一、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()。表示世界协调时间。