一、JavaScript核心 一个完整的JavaScript应该由下列三个不同的部分组成。 1.核心(ECMAScript) 2.文档对象模型(DOM,Document Object Model) 3.浏览器对象模型(BOM,Browser Object Model) 二、ECMAScript ①.语法 1.区分大小写 2.标识符 3.注释 4.直接量(字面量) 直接量(字面量),就是程序中直接显示出来的数据值。 100 //数字字面量 '李炎恢' //字符串字面量 false //布尔字面量 /js/gi //正则表达式字面量 null //对象字面量 {x:1,y:2} //对象字面量表达式 [1,2,3,4,5] //数组字面量表达式 5.关键字和保留字 6.变量(松散类型) var box; alert(box); ②.类型 1.typeof操作符 var box='小明'; alert(typeof box); alert(typeof '小明'); PS:函数在ECMAScript中是对象,不是一种数据类型。所以,使用typeof来区分function和object是非常有必要的。 2.五种简单数据类型: undefined (没有初始化) null (空对象引用【指针】,返回object) boolean (true false) number (整形和浮点型) string (字符串) object类型 a.ECMAScript中的对象其实就是一组数据和功能的集合。 var box = new Object(); ③.运算符 1.表达式 2.一元运算符 3.算术运算符 4.关系运算符 5.逻辑运算符 6.*位运算符 7.赋值运算符 8.其他运算符 ③.语句 1.语句的定义 语句表明执行过程中的流程、限定与约定,形式上可以是单行语句,或者由一对大括号“{}”括起来的复合语句,在语法描 述中,复合语句整体可以作为一个单行语句处理。 a.声明语句 变量声明语句 var box=100; 标签声明语句 label:box; b.表达式语句 变量赋值语句 box=100; 函数调用语句 box(); 属性赋值语句 box.property=100; 方法调用语句 box.method(); c.分支语句 条件分支语句 if(){}else{} 多重分支语句 switch(){casen:...}; d.循环语句 for for(;;;){} for...in for(x in x){} while while(){}; do...while do{}while(); e.控制结构 继续执行子句 continue; 终端执行子句 break; 函数返回子句 return; 异常触发子句 throw; 异常捕获与处理 try{}catch(){}finally{} f.其他 空语句 ; with语句 with(){} ④.函数 1.函数声明 function box(){ //没有参数的函数 alert('只有函数被调用,我才会被之执行'); } box(); //直接调用函数 function box(name,age){ //带参数的函数 alert('你的姓名:'+name+',年龄:'+age); } box('李炎恢',28); //调用函数,并传参 2.return返回值 实际上,任何函数都可以通过return语句跟后面的要返回的值来实现返回值。 function box(){ //没有参数的函数 return'我被返回了!'; //通过return把函数的最终值返回 } alert(box()); //调用函数会得到返回值,然后外面输出 function box(name,age){ //有参数的函数 return'你的姓名:'+name+',年龄:'+age;//通过return 把函数的最终值返回 } alert(box('李炎恢', 28)); //调用函数得到返回值,然后外面输出 我们还可以把函数的返回值赋给一个变量,然后通过变量进行操作。 function box(num1,num2){ return num1*num2; } var num = box(10,5); //函数得到的返回值赋给变量 alert(num); return语句还有一个功能就是退出当前函数,注意和break的区别。PS:break用在循环 和switch分支语句里。 function box(num){ if(num<5) return num; //满足条件,就返回num return 100; //返回之后,就不执行下面的语句了 } alert(box(10)); 3.arguments对象 ECMAScript函数不介意传递进来多少参数,也不会因为参数不统一而错误。 实际上,函数体内可以通过arguments对象来接收传递进来的参数。 functionbox(){ return arguments[0]+'| '+arguments[1]; //得到每次参数的值 } alert(box(1,2,3,4,5,6)); //传递参数 arguments对象的length属性可以得到参数的数量。 function box(){ return arguments.length; //得到6 } alert(box(1,2,3,4,5,6)); ⑤.对象和数组 1.Object类型 a.创建 1.使用new运算符创建Object var box= new Object(); //new方式 box.name='李炎恢'; //创建属性字段 box.age=28; //创建属性字段 2.new关键字可以省略 var box = Object(); //省略了new关键字 3.使用字面量方式创建Object var box={ //字面量方式 name:'李炎恢', //创建属性字段 age:28 }; 4.属性字段也可以使用字符串星矢 var box={ 'name' :'李炎恢', //也可以用字符串形式 'age' :28 }; 5.使用字面量及传统复制方式 var box={}; //字面量方式声明空的对象 box.name='李炎恢'; //点符号给属性复制 box.age=28; 6.两种属性输出方式 alert(box.age); //点表示法输出 alert(box['age']); //中括号表示法输出,注意引号 PS:在使用字面量声明Object对象时,不会调用Object()构造函数(Firefox除外)。 7.给对象创建方法 var box={ run : function(){ //对象中的方法 return'运行'; } } alert(box.run()); //调用对象中的方法 8.使用delete删除对象属性 delete box.name; //删除属性 2.Array类型 1.创建 1.使用new关键字创建数组 var box=new Array(); //创建了一个数组 var box=new Array(10); //创建一个包含10个元素的数组 var box=new Array('李炎恢',28,'教师','盐城'); //创建一个数组并分配好了元素 2.以上三种方法,可以省略new关键字。 var box = Array(); //省略了new关键字 3.使用字面量方式创建数组 var box=[]; //创建一个空的数组 var box=['李炎恢',28,'教师','盐城']; //创建包含元素的数组 var box=[1,2,]; //禁止这么做,IE会识别3个元素 var box=[,,,,,]; //同样,IE的会有识别问题 PS:和Object一样,字面量的写法不会调用Array()构造函数。(Firefox除外)。 4.使用索引下标来读取数组的值 alert(box[2]); //获取第三个元素 box[2]='学生'; //修改第三个元素 box[4]='计算机编程'; //增加第五个元素 5.使用length属性获取数组元素量 alert(box.length) //获取元素个数 box.length=10; //强制元素个数 box[box.length]='JS 技术'; //通过length给数组增加一个元素 6.创建一个稍微复杂一点的数组 var box=[ { //第一个元素是一个对象 name:'李炎恢', age:28, run:function(){ return'run 了'; } }, ['马云','李彦宏',new Object()],//第二个元素是数组 '江苏', //第三个元素是字符串 25+25, //第四个元素是数值 newArray(1,2,3) //第五个元素是数组 ]; alert(box); PS:数组最多可包含4294967295个元素,超出即会发生异常。 3.对象中的方法 a.转换方法 对象或数组都具有toLocaleString()、toString()和valueOf()方法。 var box=['李炎恢',28,'计算机编程']; //字面量数组 alert(box); //隐式调用了toString() alert(box.toString()); //和valueOf()返回一致 alert(box.toLocaleString()); //返回值和上面两种一致 var box=['李炎恢', 28,'计算机编程']; alert(box.join('|')); //李炎恢|28|计算机编程 b.栈方法(后进先出) ECMAScript为数组专门提供了push()和pop()方法。 var box=['李炎恢', 28,'计算机编程']; //字面量声明 alert(box.push('盐城')); //数组末尾添加一个元素,并且返回长度 alert(box); //查看数组 box.pop(); //移除数组末尾元素,并返回移除的元素 alert(box); //查看元素 c.队列方法(先进先出) 通过push()向数组末端添加一个元素,然后通过shift()方法从数组前端移除 一个元素。 var box=['李炎恢', 28,'计算机编程']; //字面量声明 alert(box.push('盐城')); //数组末尾添加一个元素,并且返回长度 alert(box); //查看数组 alert(box.shift()); //移除数组开头元素,并返回移除的元素 alert(box); //查看数组 ECMAScript还为数组提供了一个unshift()方法,它和shift()方法的功能完全相反。 unshift()方法为数组的前端添加一个元素。 var box=['李炎恢', 28,'计算机编程']; //字面量声明 alert(box.unshift('盐城','江苏')); //数组开头添加两个元素 alert(box); //查看数组 alert(box.pop()); //移除数组末尾元素,并返回移除的元素 alert(box); //查看数组 PS:IE浏览器对unshift()方法总是返回undefined而不是数组的新长度。 d.重排序方法 数组中已经存在两个可以直接用来排序的方法:reverse()和sort()。 reverse() 逆向排序 var box=[1,2,3,4,5]; //数组 alert(box.reverse()); //逆向排序方法,返回排序后的数组 alert(box); //源数组也被逆向排序了,说明是引用 sort() 从小到大排序 var box=[4,1,7,3,9,2]; //数组 alert(box.sort()); //从小到大排序,返回排序后的数组 alert(box); //源数组也被从小到大排序了 e.操作方法 ECMAScript为操作已经包含在数组中的元素提供了很多方法。concat()方法可以基于当前数组创建一个新数组。slice()方法可以基于当前数组获取指定区域元素并创建一个新数组。splice()主要用途是向数组的中部插入元素。 var box=['李炎恢', 28,'盐城']; //当前数组 var box2=box.concat('计算机编程'); //创建新数组,并添加新元素 alert(box2); //输出新数组 alert(box); //当前数组没有任何变化 var box=['李炎恢', 28,'盐城']; //当前数组 var box2=box.slice(1); //box.slice(1,3),2-4之间的元素 alert(box2); //28,盐城 alert(box); //当前数组 splice中的删除功能: var box=['李炎恢', 28,'盐城']; //当前数组 var box2=box.splice(0,2); //截取前两个元素 alert(box2); //返回截取的元素 alert(box); //当前数组被截取的元素被删除 splice中的插入功能: var box=['李炎恢', 28,'盐城']; //当前数组 var box2=box.splice(1,0,'计算机编程','江苏'); //没有截取,但插入了两条 alert(box2); //在第2个位置插入两条 alert(box); //输出 splice中的替换功能: var box=['李炎恢', 28,'盐城']; //当前数组 var box2=box.splice(1,1,100); //截取了第2条,替换成100 alert(box2); //输出截取的28 alert(box); //输出数组 ⑥。时间与日期 1.Date类型 创建一个日期对象,使用new运算符和Date构造方法(构造函数)即可。 var box=new Date(); //创建一个日期对象 在调用Date构造方法而不传递参数的情况下,新建的对象自动获取当前的时间和日期。 alert(box); //不同浏览器显示不同 ECMAScript提供了两个方法,Date.parse()和Date.UTC()。 2.通用的方法 与其他类型一样,Date类型也重写了toLocaleString()、toString()和valueOf()方法;但这 些方法返回值与其他类型中的方法不同。 var box=new Date(Date.UTC(2011,11,5,15,13,16)); alert('toString:'+box.toString()); alert('toLocaleString:'+box.toLocaleString()); //按本地格式输出 PS:这两个方法在不同浏览器显示的效果又不一样,但不用担心,这两个方法只是在 调试比较有用,在显示时间和日期上,没什么价值。valueOf()方法显示毫秒数。 3.日期格式化方法 Date类型还有一些专门用于将日期格式化为字符串的方法。 var box= new Date(); alert(box.toDateString()); //以特定的格式显示星期几、月、日和年 alert(box.toTimeString()); //以特定的格式显示时、分、秒和时区 alert(box.toLocaleDateString()); //以特定地区格式显示星期几、月、日和年 alert(box.toLocaleTimeString()); //以特定地区格式显示时、分、秒和时区 alert(box.toUTCString()); //以特定的格式显示完整的UTC日期。 4.组件方法 alert(box.getTime()); //获取日期的毫秒数,和valueOf()返回一致 alert(box.setTime(100)); //以毫秒数设置日期,会改变整个日期 alert(box.getFullYear()); //获取四位年份 alert(box.setFullYear(2012)); //设置四位年份,返回的是毫秒数 alert(box.getMonth()); //获取月份,没指定月份,从0开始算起 alert(box.setMonth(11)); //设置月份 alert(box.getDate()); //获取日期 alert(box.setDate(8)); //设置日期,返回毫秒数 alert(box.getDay()); //返回星期几,0表示星期日,6表示星期六 alert(box.setDay(2)); //设置星期几 alert(box.getHours()); //返回时 alert(box.setHours(12)); //设置时 alert(box.getMinutes()); //返回分钟 alert(box.setMinutes(22)); //设置分钟 alert(box.getSeconds()); //返回秒数 alert(box.setSeconds(44)); //设置秒数 alert(box.getMilliseconds()); //返回毫秒数 alert(box.setMilliseconds()); //设置毫秒数 alert(box.getTimezoneOffset()); //返回本地时间和UTC时间相差的分钟数 PS:以上方法除了getTimezoneOffset(),其他都具有UTC功能,例如setDate()及getDate() 获取星期几,那么就会有setUTCDate()及getUTCDate()。表示世界协调时间。