HTML教程(第三章)

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2015/10/26,#,如何使用,Javascript,JavaScript,是一种脚本语言，嵌入在,HTML,文档中，由浏览器负责解释和执行，在页面上产生动态效果并实现与用户交互等功能。,Javascript,通常有如下三种使用方式：,(1),使用,标签的,src,属性链接外部的,js,文件。,例如：,simple.js:,function,alterA(),alert(Buuton A);,可放置于,HTML,文档中的任何位置，建议放于,和,中。,(2),在,标签内定义,javascript,脚本代码。,例如：,function,alterB(),alert(Buuton B);,在标签事件中调用,内定义的函数。,不同的标签，有着各自不同的事件，也有着相同的事件。,(3),在元素标签的事件中定义,javascript,脚本代码。,例如：,在标签事件中直接编写执行代码。,Javascript,基本语法,1.,变量,Javascript,拥有,7,种数据类型，分别是：,Undefined,、,Null,、字符串、数字、数组、布尔、对象,格式：,var,变量名,例：,var type;,var type=null;,var type=string;,var type=100;,var type=new Array();,var type=true;,var type=new Date();,变量,str,为,undefined,，表示无值的变量。使用如下语句判断：,if(typeof str=“undefined”),在,HTML,文档、,CSS,、,Javascript,中，单引号或双引号的含义一致，并且在部分场合需要同时使用。例如,:,var str=,“,;,(,见,js_defined.html),2.,函数,格式：,function,方法名,(,参数一,参数二,.),.,例一：,init(1,2);,alert(,num,);,function init(,p,1,p2),num,=3;,1.,调用,init,方法，传入两个参数，都为数字类型。,2.,在,init,函数体中，直接给一个名为,num,的变量赋价值。,3.,使用,alter,方法，弹出对话框显示,num,的值。,类似给这样没用使用,var,声明的变量赋值，无论它是否在函数体内或体外，都会成为全局变量。,(,见,js_function_1.html),例二：,init(1,2);,function init(p1),alter(1);,function init(p1,p2),alter(2);,function,init,(p1,p2,p3),alter(3);,共有三个,init,函数，似乎应该第二个被调用。其实不然，,Javascript,虽然是面向对象，但它不同于,Java,它没有多态的特性。,如果存在多个相同名称的函数，按先后顺序，最后一个会被调用,，也就是本例中第三个,init,函数。,(,见,js_function_2.html),第一及第三个,init,函数中，分别只有,1,个和,3,个参数，而实际传入了,2,个参数。这样的写法在,Javascript,中是合法的。,p3,为,undefined,。,3.,运算符,Javascript,中的运算符与,C/C+,、,Java,基本一致，个别用法不同。,“,+,”用法有些特殊，,如果将数字与字符串相加，最后的结果会是字符串,。,例如：,var str=1+”2”;,/str=”12”,var str=”1”+2;,/str=”12”,var str=”1”+”2”;,/str=”12”,var num=1+2;,/str=3,4.,比较符,Javascript,中的任何类型，都可以用,=,、,=,、,!=,、,、,=,、,、,=,来比较。比如比较两个字符串，,Java,需要使用,equals,，,C+,需要使用,strcmp,，而,Javascript,只需要,=,或,=,。,“=”,意为等同，当左右两边值类型不同时，首先将两者转换成相同的类型，再进行比较。它只比较值是否相等。,“=”,意为等同，它不只比较值，还需要比较类型是否相同。,例如：,”2”,=,2;,/true,”2”,=,2;,/,false,1,=,true;,/true,1,=,true;,/false,5.,对象,Javascript,认为,万物皆对象，,除了基本数据类型，都是对象。,它是通过一种叫做原型,(prototype),的方式来实现面向对象编程的,，不同于,C+,与,Java,是基于类面向对象。,早期,JavaScript,的发明者为了使这门语言更容易传播，借鉴了当下被热炒的,Java,的名字，使用了,new,关键字来创建对象，以使其在语法上跟,Java,创建对象的方式看上去类似。实际上，这两门语言的,new,含义毫无关系，因为其对象构造的机理完全不同。也正是因为这里语法上的类似，众多习惯了类式面向对象语言中对象创建方式的开发者，难以理解,Javascript,对象原型构造的方式，因为总是不明白在,Javascript,语言中，为什么“函数名可以作为类名”的现象。而实质上，,Javascript,这里仅仅是借用了关键字,new,，仅此而已，与,Java,毫无关系。,(1),自定义对象,方法一：类似数据集合,var,变量名称,=,属性：属性值,.,例如：,var person=,name:Tommy,age:20,birthday:1994/3/26,printInfo:,function,(),document.write(this.name+this.age+this.birthday);,;,var name=person.name;,var age=person.age;,var birthday=personbirthday;,person.printInfo();,(,见,js_object_1.html),只是使用,var,声明了,一个,对象（数据集合也是对象），,不能使用,new,关键字,。,以,”,对象,.,属性名称,”,的方式访问对象属性。,以集合的方式,”,对象,属性名称,”,访问对象属性。,定义函数。,方法二：使用,new,关键字创建一个空对象，并且添加属性及属性值。,var,变量名称,=,new Object();,对象,.,属性,=,属性值,;,.,例如：,var person=new Object();,person.name=Tommy;,person.age=20;,personbirthday=1994/3/26;,person.printInfo=function(),document.write(this.name+this.age+this.birthday);,;,var name=personname;,var age=person.age;,var birthday=person.birthday;,person.printInfo();,(,见,js_object_2.html),在我理解，所有的对象都继承自,Object,。,方法三：构造函数,function,函数名,(,参数一，参数二，,.),.,var obj=,new,函数名,(,参数一，参数二，,.),;,例如：,function person(name,age,birthday),this.name=name;,this.age=age;,this.birthday=birthday;,this.printInfo=function(),document.write(this.name+this.age+this.birthday);,;,var personObj=,new person(Tommy,20,1994/3/26),;,personObj.printInfo();,(,见,js_object_3.html),函数本身也是一个对象。,这种写法经常被错误的认识为在编写类，并且实例化这个类的对象。,方法四：原型,(prototype),方式,如果使用原型方式对象，那么生成的所有对象会共享原型中的属性，这样一个对象改变了该属性也会反应到其他对象当中。,function person(age,birthday),this.age=age;,this.birthday=birthday;,person.,prototype,.name=,Tommy,;,person.,prototype,.returnInfo=function(),document.write(this.name+this.age+this.birthday+);,;,var personObj1=new person(20,1994/3/26);,var personObj2=new person(35,1979/1/1);,var personObj3=new person(50,1964/4/8);,personObj1.name=Janney,;,personObj1.returnInfo();,personObj2.returnInfo();,personObj3.returnInfo();,Janney,20 1994/3/26,Tommy,35 1979/1/1,Tommy,50 1964/4/8,Tommy,20 1994/3/26,Tommy,35 1979/1/1,Tommy,50 1964/4/8,person.,prototype,.name=,Anderson,;,personObj1.returnInfo();,personObj2.returnInfo();,personObj3.returnInfo();,(,见,js_object_4.html),推荐一篇文章，比较深刻的描述了,Javascript,面对对象的概念。文章详细的介绍了原型、原型链、继承等内容。,http:/ 1994/3/26,Anderson,35 1979/1/1,Anderson,50 1964/4/8,Javascript,常用内置对象,1.Array,Array,对象用于在单个的变量中存储多个值，即,动态数组,。,例如,:,var array=,new Array(),;,for(var i=0;i 10;i+),array.,push,(i+1);,document.write(array.,length,);,array.,shift,();,document.write(array.,slice,(1,3);,array.,unshift,(a);,for(var i=0;i array.length;i+),document.write(,arrayi,+);,(,见,object_Array.html),创建对象。,向数组的末尾添加一个或更多元素，并返回新的长度。也可,arrayi,=i+1,。,结果：,1 2 3 4 5 6 7 8 9 10,设置或返回数组中元素的数目。,结果：,10,删除并返回数组的第一个元素。,结果：,2 3 4 5 6 7 8 9 10,从某个已有的数组返回选定的元素。,返回结果：,3,4,向数组的开头添加一个或更多元素，并返回新的长度。,结果：,a 2 3 4 5 6 7 8 9 10,2.Date,Date,对象用于处理日期和时间。,例如,:,var date=,new Date(),;,document.write(date.,getFullYear(),+-+(date.,getMonth(),+1)+-+date.,getDate,(),+date.,getHours(),+:+date.,getMinutes(),+:+date.,getSeconds(),);,date.,set