web 学习笔记3-JavaScript

来源：互联网发布：数学自主招生知乎编辑：程序博客网时间：2024/06/04 23:44

1、Javascript概述：

a.一种基于对象和事件驱动的脚本语言b.作用： 给页面添加动态效果c.历史： 原名叫做livescript.W3c组织开发的标准叫ECMAscipt.d.特点：    1). 弱势语言    2). 由浏览器直接解析执行。（函数不能直接执行）    3). 是一个解释性语言    4). 交互性（它可以做的就是信息的动态交互）    5). 安全性（不允许直接访问本地硬盘）    6). 跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关e . javascript和java的一些区别：    1). javascript是一个解释性语言,java是编译解释性语言    2). javascript是一个弱势语言，Java是一个强势语言    3). 在页面上引入的方式不同javascript代表用<script>引入，Java代码<%>    4). JS是基于对象，Java是面向对象。基于对象就是已经存在对象，面向对象就是需要自己创建对象。

2、JavaScript语言组成：

EcMAScript  + BOM + DOM     ECMAScript: 规定了一些语法，变量，for循环等等结构    BOM: Browser  object  Model 浏览器对象模型    DOM: Document  object  Model 文档对象模型

3、JavaScript与Html的结合方式：

Javascript与HTML的结合方式有三种：    1.采用事件来调用，代码写在字符串中        <button onclick = "alert('大家好')">点击</button>    2.采用定义函数的方式: 用function来定义函数         function fun(){ alert('你好')} ;    3.采用外部js文件.        利用<script src = "a.js"></script>引入  例如：<!doctype html><html lang="en">    <head>    <meta charset="UTF-8">    <meta name="Generator" content="EditPlus?">    <meta name="Author" content="">    <meta name="Keywords" content="">    <meta name="Description" content="">    <script type="text/javascript" src = "a.js"> </script>    <title>Document</title>     </head>    <body>        <p onclick = "alert('你好')" id  = "p">大家好</p>    </body></html>

4、JavaScript基本语法：

定义变量：采用var关键字来定义.定义的变量的类型是由给定的值来决定的。数据类型：     undifined,表示未定义类型。    Number类型。代表了一切数字类型    String类型。字符串类型    Boolean类型。布尔类型    Function类型。函数类型    Null类型。       object ：对象类型.判断变量的类型 :     1. 采用typeof函数判断 :typeof(a) == "string"    2. 采用instanceof运算符： a instanceof String类型的转换：    1. Number转String : 3 + ""    2. Number转Boolean ：在javascript中，非0为真，0为假。如果变量为null或者undefined，也为假.    3. String转Number:            a. parseInt,parseFloat            b. 乘以1即可    注意：乘以1比较少的一种写法例如：<!doctype html><html lang="en">    <head>    <meta charset="UTF-8">    <meta name="Generator" content="EditPlus?">    <meta name="Author" content="">    <meta name="Keywords" content="">    <meta name="Description" content="">    <title>javascript基本语法</title>    </head>    <script type="text/javascript">    <!--            /*                javascript中的数据类型：                     a. 基本类型                        1. undefined: 没有给变量赋值时的类型                        2. String：                        3. Boolean                        4. Number:                        5. function:                        6. null                    b. 引用类型                        Object                        判断变量的类型有两种方式：                            1. 采用typeof(): 打印的是所有类型的toString方法(所有类型的小写)                            2. 采用instanceof关键字判断： 是判断变量是不是由某种类型new出来的            */            /*var a ;            a = 10 ;            a = "abc" ;            a = true;            a = function(){                alert("aaa");            }            alert(typeof(a)) ;*/            a = 10 ;            a = new Number(10) ;            //alert(a instanceof Number) ;            //alert(typeof(a) == "number") ;    //-->    </script>    <body>    </body></html>

5、JavaScript 函数的定义：

函数的定义有三种方式：     1.采用function关键字来定义    2.采用匿名的方式来定义    3.采用new Function()的方式(了解,不推荐)function fun(){    alert("大家好") ;}var a = function(){    alert("我是匿名函数") ;}var b = new Function("x","y","z","alert(x+y+z)") ;函数的调用：    1.函数调用的时候参数可以传递多个，可以和函数定义的形参个数不符合    2.如果函数重名了，那么调用的时候一定是调用最后一个，与参数无关。定义函数的不要重名。函数劫持：改变函数本身的作用.劫持例如：<!doctype html><html lang="en">    <head>        <meta charset="UTF-8">        <meta name="Generator" content="EditPlus?">        <meta name="Author" content="">        <meta name="Keywords" content="">        <meta name="Description" content="">        <title>Document</title>    </head>    <body>        <script type="text/javascript">        <!--            //函数劫持:改变javascript的预定义的函数预定义好的功能            window.alert = function(x){                document.write(x) ;            }                alert("abc") ;        //-->        </script>    </body></html>

6、JavaScript 全局函数：

全局函数：    1.isNaN：用来判断变量是否是数字类型的字符串        NaN: not a Number ,不是一个数字    2.parseInt,parseFloat    3.eval: 把字符串转换成数字    4.escape(): 编码    5.unescape(): 解码    6.encodeURI(): 对网址（URL）进行编码    7.decodeURI(): 对网址（URL）进行解码例如：var a = "100" ;if(isNaN(a)){    alert("不是数字") ;}else    alert("是数字") ;运行的结果是：数字

7、JavaScript常用对象介绍：

a、Array对象 数组对象，进行数组操    定义方式        1.采用new的方式        2.采用中括号[]来定义            数组的长度可以随时改变    特点：         1.javascript中数组的大小可以随时改变        2.javascript中数组的下标可以是任意对象。    方法：         1.join() : 把数组的所有元素放入一个字符串. 默认用逗号连接        2.push() : 向数组的末尾添加一个元素        3.reverse() :反转        4.shift() : 删除并返回数组的第一个元素        5.sort() ; 排序 .默认同类型的数据相比较.    例如：    <script type="text/javascript">    <!--        var arr = new Array() ;  //定义一个数组arr,初始长度为0        var arr1 = new Array(4) ;  //定义一个数组arr1,初始长度是4        arr1[0] = 1 ;        arr1[1] = 10 ;        alert(arr1[2]) ;//弹出来undefined,没有初始化        var arr2 = new Array(1,2,3,4,5) ; //定义一个数组arr2，初始化数据是1,2,3,4,5        var arr3 = [] ;  //定义了一个数组，里面是空的        var arr3 = [3,2,4,5] ;  //定义了一个数组，同时初始化数据        //注意：        var arr4 = [1,2,"4",true,45.8,false,"abc"] ;//数组里面可以存放不同类型的数据        //alert(arr4[3]) ;        alert(arr4.length) ;        arr4.length = 2 ;   //将数组的长度变为2，多于的数据将消失了        //alert(arr4[2]) ;   //弹不出原来的数据了，弹出来undefined        var arr5 = ["中国","美国","日本"] ;        arr5["中国"] = ["北京","上海","天津"] ;        alert(arr5["中国"][0]) ;        alert(typeof(arr5)) ;//弹出 object    //-->    </script>一个简单的例子：<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus?">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>hello</title> </head> <body onload = "init()">    <script type="text/javascript">    <!--         //示例：标题栏的滚动         function init(){              //1.拿到标题栏的文本              var title = document.title ;              //alert(title) ;              //2.将文本字串转换为数组              var arr = title.split("") ;              //3.拿到数组的第一个元素，并从数组中删除              var first = arr.shift() ;              //4.将第一个元素添加到数组的最后              arr.push(first) ;              //5.将数组再组合成一个字符串              title = arr.join("") ;              //6.将字符串再赋值回标题栏              document.title = title ;              //7.每隔1秒做一遍前6步              setTimeout("init()",1000) ;         }    //-->    </script> </body></html> b、String对象 ----- 字符串类型的引用类型    substr: 截取字符串 两个参数第一个是下标，第二个是长度    substring: 截取字符串 两个参数第一个是下标，第二个是下标    toUppercase:    toLowercase:    indexOf:    charAt() :    replace():var s = "abcdefg" ;alert(s.substring(2,3)) ;//结果是：calert(s.substr(2,3)) ;   //3是i长度，不是索引，结果是：cdec、Number对象 ---- 数字原始类型引用类型    1. random() : 获得随机数[0,1)    2. ceil() : 返回大于等于次数的最大整数    3. floor() : 返回小于等于次数的最大整数    4. round(): 返回四舍五入后的整数d、Boolean对象 ---- 布尔原始类型引用类型 e、Math对象 执行数学任务    1.floor(x): 取得小于等于x的最大整数    2.ceil(x) :取得大于于等于x的最大整数    3.random(): 取得0~1之间的随机数(可以等于0，永远不能取得1)    4.round(): 四舍五入为整数    <script type="text/javascript">    <!--        var a = 3.1;        alert(Math.floor(a)) ;//3        alert(Math.ceil(a)) ;//4        alert(Math.round(a))//3    //-->    </script>f、Date对象 用于处理日期和时间    <script type="text/javascript">    <!--        /*            Date对象：1.拿到当前时间：new Date() ;                      2.拿到年月日，时分秒： getXXX() ;        */        var d = new Date() ;        alert(d.toLocaleString()) ;        alert(d.getYear()) ;        alert(d.getMonth());        alert(d.getDate()) ;        alert(d.getDay()) ;    //-->    </script>g、RegExp 对象正则表达式对象    写法：     1. new的方式   var r = new RegExp("ab") ;    2. 采用/正则表达式/ (推荐)  var r = /ab/ ;    例如：        <script type="text/javascript">        <!--             var reg = /(..)./ ;  //括号表示子匹配，就是对结果进一步匹配             var s = "abcde" ;             alert(reg.test(s)) ;  //测试字符串中是否包含正则表达式中所匹配的字符串,返回的是boolean类型的，结果：true             alert(reg.exec(s).length) ;  //以数组的形式返回匹配的正则表达式的字符串，结果：2             alert(reg.exec(s)[0] + ":" + reg.exec(s)[1]) ;//结果  abc:ab             alert(/(.)./.exec(s));//结果 ab,a        //-->        </script>

0 0