1、第5章JavaScript5.1 JavaScript概述概述 5.2 语法与事件语法与事件 5.3 对象模型对象模型 5.4 AJAX 习题习题 5.1 JavaScript概述概述HTML语言是网页设计普遍采用的超文本标记语言,但它只能提供一种静态的信息资源,缺少动态的效果。JavaScript的出现弥补了HTML语言的缺陷。5.1.1 JavaScript简介简介JavaScript具有如下特点:(1)JavaScript是一种脚本编写语言,采用小程序段的方式实现编程。其基本结构形式与C、Java、C+十分类似,但不像这些语言需要先编译,而是在程序运行过程中才被逐行解释的。(2)Java
2、Script是基于对象的语言,是一种(弱)面向对象的语言,能运用已创建的对象。JavaScript能够访问预定义对象,如窗体(window)、框架(frame)、文档(document)、表单(form)以及表单元素等,并操纵这些对象的属性、方法和关联事件。(3)JavaScript具有简单性。JavaScript采用的是一种基于Java基本语句和控制流的简单而紧凑的设计,同时它的变量类型采用弱类型,并未使用严格的数据类型。(4)JavaScript具有安全性。JavaScript是一种安全性语言,不允许访问本地硬盘,不能将数据存到服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信
3、息浏览或动态交互。(5)JavaScript具有动态性。JavaScript是动态的,可以直接对用户输入作出响应,而无需经过Web服务程序。对用户的响应,是采用以事件驱动的方式进行的。(6)JavaScript具有跨平台性。JavaScript是依赖于浏览器的语言,与操作系统无关。只要浏览器支持JavaScript,就可正确执行,从而实现了“编写一次,走遍天下”的梦想。综上所述,JavaScript是一种新的描述语言,在TML文件中执行、响应用户事件,不经过服务器先处理再传回来的过程,有助于提高网页的交互性能和浏览速度。5.1.2 JavaScript基础基础JavaScript和Java很类
4、似,但又不一样。JavaScript短小精悍,比Java容易掌握。1JavaScript的代码格式的代码格式JavaScript的脚本包含在HTML中,成为HTML文档的一部分,与HTML标识相结合。其基本结构分为以下两种。1)嵌入式语法格式如下:/JavaScript语言代码部分为了支持较老式的浏览器,可采取如下方式:如果浏览器是Netscape,则在“-”前加“/”,即“/-”。其中,script标记的属性language等于“JavaScript”,说明使用的是JavaScript脚本。script标记段之间是JavaScript脚本源代码。2)外挂式语法格式如下:不同于嵌入式,外挂式建
5、立的是独立的扩展名为js的JavaScript脚本文件(不含script标记),在HTML中通过使用该方法将外部js文件引入到本页面中来。外挂式的特点是可以应用到多个页面中,和页面中表示的数据分离,从而能更好地维护页面。2注释的使用注释的使用注释是加到脚本中的解释、说明信息,用来描述程序功能,或者用来说明创建脚本的作用和限制等。JavaScript可以使用两种方式书写注释:单行注释和多行注释。单行注释以“/”开头,注释内容不超过一行,如例5.1所示。【例5.1】单行注释。/这是注释,不执行。/alert(“该执行语句被注释,不执行。”);多行注释又称为注释块,注释内容为一段文字。多行注释以符号
6、“/*”开头,并以“*/”结尾,中间部分为注释的内容,但注释中不能含有嵌套的注释,如例5.2所示。【例5.2】多行注释。/*if(score=60)alert(“及格”);elsealert(“不及格”);*/3标识符和关键字标识符和关键字标识符就是指JavaScript中定义的符号,用来命名变量和函数等。JavaScript中合法的标识符命名规则和Java以及其他许多语言的命名规则相同,第一个字符必须是字母、下划线(_)和美元符号($),接下来的字符可以是字母、数字或下划线、美元符号(标识符不允许数字作为首字符出现,并且不能是JavaScript中的保留字)。合法的标识符如例5.3所示,非法
7、的标识符如例5.4所示。【例5.3】合法的标识符。_sum$str score3 avg_of_month【例5.4】非法的标识符。*sum 2day the%class保留字对JavaScript语言有特殊的含义,是语法的一部分,不能在标识符中使用。JavaScript中的保留字如表5.1所示。4在网页中使用在网页中使用JavaScript脚本脚本JavaScript程序放置的位置不同,效果就会不同,通常会放置在以下两个位置。1)在和标签之间如果在显示页面之前,执行JavaScript程序,则JavaScript程序处于和标签之间,如图5.1所示。图5.1 脚本在和标签内在HTML文档中加入
8、script标签段,并在标签段内输入JavaScript代码:alert(“This is the first example.”);alert是JavaScript的窗口对象方法,功能是弹出一个具有提示信息的对话框。用IE6打开该HTML文档,结果如图5.2所示。点击“确定”按钮后接着显示HTML内容,如图5.3所示。图5.2 先执行JavaScript脚本图5.3 执行JavaScript后的效果 2)在和标签之间如果JavaScript程序处于和标签之间,则浏览器会按照网页内容的顺序依次执行显示。通常大部分JavaScript程序的内容都位于BODY标签段中,如图5.4所示。图5.4 脚
9、本位于和标签内 JavaScript程序位于内,在“This is the first line.”和“This is the second line.”之间,浏览器执行时按顺序输出,脚本内容输出在以上两行文本之间,如图5.5所示。注意:document.writeln()是文档对象的输出函数,其功能是将参数内容输出到窗口。图5.5 JavaScript在BODY标签段内5.2 语语法法与与事事件件本节主要介绍作为编程语言的JavaScript所具有的基本的数据类型、表达式,以及程序结构、函数、事件等。5.2.1 简单数据类型简单数据类型能够表示并操作的值的类型称为数据类型,程序设计语言最基本
10、的特征之一就是它所支持的数据类型的集合。JavaScript允许使用三种基本数据类型:数值型、字符串型和布尔型。此外,还支持两种小数据类型null和undefined,它们各自只定义了一个值。1数值型数值型数值型是最基本的数据类型,可用于完成数据运算。JavaScript并不区别整型数值和浮点型数值,所有的数值都是由浮点型表示的。当一个数值直接出现在JavaScript程序中时,称为数值直接量。JavaScript支持数值直接量的形式有以下几种。1)整型直接量一个整型直接量可以是十进制、八进制或者十六进制数。十进制数由一串数字序列组成,如100。十进制数的第一个数字不能为0。八进制数以数字0开
11、头,其后跟随一个数字序列,这个数字序列中的每个数字都在0和7之间(包括0和7),如0144。十六进制数以“0X”或者“0 x”开头,其后跟随十六进制数字串的直接量。十六进制数是由09之间的数字和a(A)f(F)之间的字母构成的,用来表示015之间(包括015)的某个值,如0 x64。2)浮点型直接量浮点型直接量也就是可以带小数点的数。可以采用传统科学计数法的语法,将实数型数表示为整数部分加小数点和小数部分,如3.1415。可以使用指数计数法表示浮点型直接量,即实数后跟随字母“e”或“E”,其后加上正负号,再加上一个整型指数。该记数法表示的数值等于前面的实数乘以10的指数次幂,如1.2E+10或
12、1.2E-10。3)特殊的数值另外,JavaScript使用了一些特殊符号表示特殊数值:Infinity表示正无穷大;-Infinity表示负无穷大;NaN表示一个非数值,需要专门的函数isNaN来检测。2字符串型字符串型字符串(String)是由Unicode字符、数字、标点符号等组成的序列,用来表示文本的数据类型。1)字符串直接量字符串直接量是由单引号或双引号括起来的Unicode字符序列,其中可以包含0个或多个字符。由单引号定界的字符串中可以含有双引号,由双引号定界的字符串中也可以含有单引号。字符直接量如例5.5所示。【例5.5】字符直接量:“Happy am I;from care I
13、m free!”,This is a“serious”consequence,“42”,c2)转义字符一些字符包含在字符串中,但在屏幕上不能显示,或者该字符在JavaScript语法上已经有了特殊用途,而不能以常规的形式直接输入。例如,换行符(n)、在单引号定义的字符串中使用的撇号()等都是不能直接输入的符号。这些字符称为转义字符。JavaScript专门为这类字符提供了特殊的表达方法,即以反斜线()开始,后跟一些特定符号。表5.2列出了JavaScript支持的转义字符及其表示的实际字符。3布尔型布尔型布尔型数据的值为“true”或“false”,分别表示真或假,用来说明或者代表一种状态,主
14、要用于条件判断,如例5.6和例5.7所示。【例5.6】直接将一个布尔型值赋给作为标志的变量isOver。isOver=true;【例5.7】布尔型值用于条件判断。if(score=60)result=“及格”;elseresult=不及格;这里要比较变量score的值是否大于等于60。如果大于等于60,则比较的结果为布尔型值true,并将“及格”字符串赋给变量result;如果小于60,则比较的结果为布尔型值false,并将“不及格”字符串赋给变量result。4对象对象JavaScript语言是基于对象的(Object-Based),而不是面向对象的(Object-Oriented),主要是
15、因为它没有提供抽象、继承、重载等有关面向对象语言的功能。但JavaScript仍然具有一些面向对象的基本特征,可以根据需要创建自己的对象,从而进一步扩大JavaScript的应用范围。1)对象的基本结构JavaScript中的对象是由属性(properties)和方法(methods)两个基本的元素构成的。前者是对象在实施其所需要行为的过程中,实现信息装载的单位,因而与变量相关联;后者是指对象能够按照设计者的意图而被执行,因而与特定的函数相关联。2)引用对象的途径一个对象要真正地被使用,可采用以下几种方式获得:(1)引用JavaScript内部对象。(2)由浏览器环境提供。(3)创建新对象。也
16、就是说,对象的获取方式要么是创建新的对象,要么是利用现存的对象。这就是说一个对象在被引用之前,这个对象必须存在,否则引用将毫无意义。虽然在JavaScript中对象的功能已经非常丰富了,但仍支持设计人员按照需求来创建自己的对象。使用new运算符可以创建一个新的对象,其创建格式如下:newObject=new Object(parameters table);其中,newObject为创建的新对象,Object是已经存在的对象,parameters table表示创建对象时所需的参数表。创建日期类型新对象,如例5.8所示。【例5.8】创建日期类型新对象。var myday=new Date(20
17、08,8,8);var today=new Date();其中,myday和today即为创建的日期对象。3)对象属性和方法的使用对象属性和方法的使用都是通过“.”来实现的,其格式分别如下:对象名.属性名对象名.方法名(参数)例如,设置myday对象的year属性值和获取year属性值,可参照例5.9。【例5.9】设置、获取属性。myday.year=2008;alert(myday.year);例如,调用myday对象的getDate方法返回日期,如例5.10所示。【例5.10】调用方法。alert(myday.getDate();5.2.2 表达式与运算符表达式与运算符表达式和运算符是所有
18、语言最基本的组成部分,下面分别予以介绍。1表达式表达式表达式是一种语句,可以通过运算产生一个结果或完成某种操作,如为变量赋值等。可以在计算窗口、对话框、文本对象等所有使用函数与变量的地方使用表达式。表达式由函数、变量、运算符、数字、字母、字符串、常数以及注释组成。表达式可以分为算术表达式、字串表达式、赋值表达式以及布尔表达式等。【例5.11】表达式。c=5/9*(F-32);x1=(-b-Math.sqrt(b*b-4*a*c)/(2*a);2运算符运算符1)以对象的数目分类根据处理对象的数目,可以将JavaScript中的运算符分为三类:(1)单目运算符。只需一个操作数,其运算符可在前或后,
19、如负号“”,取非“!”等。(2)双目运算符。双目运算符格式如下:操作数1 运算符 操作数2即由两个操作数和一个运算符组成,如50+40等。(3)三目运算符。三目运算符格式如下:操作数?结果1:结果2若操作数的结果为真,则表达式的结果为1,否则为2,如例5.12所示。【例5.12】三目运算符。score=87;result=(score=60?“及格”:“不及格”);运算完成,result结果为“及格”。2)以功能分类(1)new运算符。new运算符用来创建对象以及创建用户自定义的对象实例,格式如下:对象名称=new对象类型(参数)如例5.8所示,产生一个类型的对象日期Date。(2)算术运算符
20、。JavaScript中的算术运算符有单目运算符和双目运算符。属于双目运算符的有:+(加)、-(减)、*(乘)、/(除)、%(取模),属于单目运算符的有:-(取反)、+(递加1)、-(递减1)等,如表5.3所示。(3)赋值运算符。赋值运算符如表5.4所示。(4)关系运算符(比较运算符)。关系运算符的基本操作过程是,首先对操作数进行比较,然后再返回一个true或false值。有8个关系运算符,如表5.5所示。注意:布尔型值和数值型值进行比较或运算时,true可隐式转换为1,false则转换为0,所以比较运算false=0结果则为true。严格等于运算符“=”不同于等于运算符“=”的地方在于,严格
21、等于不仅要求值相等,而且要求类型相等,所以flase=0为false。(5)逻辑运算符。逻辑运算符用于两个布尔型值进行运算,如表5.6所示。(6)字符串运算符。字符串运算符只有一个,是双目运算符“+”,它可以将两个字符串连接起来形成一个新的字符串。如hello+kitty的运算结果为hello kitty。(7)this运算符。this运算符表示当前对象,格式如下:this.属性若在文本框中输入数据,每当释放按键时便弹出文本框中的值,如例5.13所示。【例5.13】this运算符应用。请输入任意字符:除了以上介绍的各种常用运算符外,还有一些特殊的运算符,读者可进一步查看相关资料。5.2.3 基
22、本语句基本语句流程是指程序代码执行的顺序。流程有三种结构:程序按书写的顺序执行称为顺序结构;执行重复的语句称为循环结构;根据条件的不同执行不同的分支称为选择结构。下面是JavaScript中常用的流程控制结构。1if语句语句if语句作为条件语句,表示选择结构,基本格式如下:if(表述式)/语句组 大括号内是执行语句组,如果只有一条语句,可以省略大括号。程序执行时,首先计算条件表达式的值,如果其值为true,则执行大括号内的语句组,否则程序直接执行if语句后面的语句。同时if语句还存在if-else结构,即从两种可能的执行路线中选择其一执行,其语法格式为if(表达式)语句组1;else 语句组2
23、;如果表达式为true,则执行语句组1;表达式为false,则执行语句组2。若if和else后的语句有多行,则必须使用大括号将其括起来。使用if-else语句进行成绩判断,如例5.14所示。【例5.14】if-else语句应用。if(score=60)result=“及格”;else result=“不及格”;if语句是可以嵌套的,格式如下:if(条件1)语句1;else if(条件2)语句2;else 这种情况下,每一分支的条件会依次计算,若某分支条件为真,则执行其相应的语句,并退出该选择结构,否则执行else后的语句后退出。使用if嵌套语句进行成绩判断,如例5.15所示。【例5.15】if
24、嵌套语句应用。if(score=85)result=“优秀”;else if(score=75)result=“良好”;else if(score=60)result=“及格”;else result=不及格;2switch语句语句switch语句是另一种条件语句,又称为情况语句,主要用于从多个分支中选择一条分支执行,完成的功能和if嵌套语句相似。使用switch语句可以使程序结构清晰,便于阅读和维护。其语法格式为switch(表达式)case常量表达式1:语句组1;break;case常量表达式2:语句组2;break;default:语句组n+1;switch语句在执行时,首先计算表达式的
25、值,然后自上而下地与常量表达式的值进行比较,如果相等,就执行该常量表达式后面相应的语句组,直到遇到break语句或return语句就跳出switch语句。可见在每个case语句中,如果不加break语句,程序将会把所有的分支都执行一遍,而一般情况下只需要选择其中一个分支执行,所以要在每个case子句后加上break语句。使用switch语句进行方向判断,如例5.16所示。【例5.16】switch语句应用。switch(direction)case 1:document.writeln(“上”);break;case 2:document.writeln(“下”);break;default:
26、document.writeln(“中”);当direction为1、2时分别输出“上”、“下”,为其他值时输出“中”。3while语句语句while语句用于满足指定条件时反复执行一组语句的情况。当条件为真时,重复循环,否则退出循环。其语法格式如下:while(表达式)/语句组;若求15之和sum,如例5.17所示。【例5.17】while语句应用。sum=0;i=1;while(i=5)sum=sum+i;i+;4for语句语句for语句同样用来实现条件循环,当条件成立时执行语句组,否则跳出循环体,基本格式为for(初始化;条件;增量)/语句组;初始化部分用于对循环控制变量赋初值;条件部分用
27、于指明循环能执行时的条件,若条件满足,则执行循环体,否则跳出循环;增量部分主要用于定义循环控制变量在每次循环时按什么方式变化。这三个部分之间必须使用分号分隔。【例5.18】for语句应用。sum=0;for(i=1;i=5;i+)sum=sum+i;for语句在增量部分定义i+,说明执行完一次循环体内容,i自动递增1,而while语句需要在循环体内增加i+语句。5break、continue语句语句break语句表示从for或while循环中跳出,而continue语句表示跳过当前循环内剩余的语句而进入下一次循环。在计算110的10个数之和的循环中,如果设置i等于5时跳出循环(break),计
28、算结束后,sum结果为10,表示只计算了1、2、3、4的和,如例5.19所示。【例5.19】break语句应用。sum=0;for(i=1;i=10;i+)if(i=5)break;else sum=sum+i;如果设置i等于5时停止本次累加,进入下次循环继续累加,则sum结果为50,表示只对5没有累加,不影响后续数字的计算,如例5.20所示。【例5.20】continue语句应用。sum=0;for(i=1;i=10;i+)if(i=5)continue;else sum=sum+i;5.2.4 函数函数通常在进行一个复杂的程序设计时,根据功能的不同,可将程序划分为一些相对独立的部分,对每部
29、分编写一个函数,使各部分充分独立,任务单一。1.函数定义函数定义函数定义的格式如下:function 函数名(参数)函数体;return 表达式;函数由关键字function定义,函数名为自己指定的名称,参数表是传递给函数使用或操作的值,可以是常量、变量或其他表达式。通过指定函数名(实参)来调用一个函数。如果需要返回值,则必须使用return语句将值返回。【例5.21】定义函数fac求n的阶乘。function fac(n)result=1;for(i=1;i=n;i+)result=result*i;return result;通过函数名fac指定一个整数值n作为参数完成函数的调用,返回n的
30、阶乘。函数调用如例5.22所示。【例5.22】函数调用。var k=fac(5);其中,k为接收函数调用的结果,表示5的阶乘的值。2常用预定义函数常用预定义函数(1)parseInt:返回由字符串转换得到的整数。parseInt方法返回与保存在参数中的数字值相等的整数。如果参数的前缀不能解释为整数,则返回NaN(非数字)。基本应用如例5.23所示。【例5.23】parseInt应用。parseInt(“3 page”)返回3parseInt(“3.3”)返回3parseInt(“page 3”)返回NaN(2)parseFloat:返回由字符串转换得到的浮点数,算法同parseInt。基本应用
31、如例5.24所示。【例5.24】parseFloat应用。parseFloat(“3.2abc”)返回3.2parseFloat(page 3.2)返回NaN(3)eval:检查代码并执行。参数是包含有效JavaScript代码的字符串值,该字符串将由JavaScript分析器进行分析和执行,如果为运算表达式则进行数学计算。基本应用如例5.25所示。【例5.25】eval应用。eval(“var mydate=new Date();”)返回一个mydate对象(日期类型)eval(“1+2*3”)返回计算结果7(4)isNaN:判断参数是否是非数字构成的字符串。基本应用如例5.26所示。【例5
32、.26】isNaN应用。isNaN(“123”)返回falseisNaN(“abc”)返回trueisNaN(“100.50”)返回falseisNaN(100abc)返回true5.2.5 事件事件JavaScript是基于对象的语言,采用事件驱动(Event-Driven)。通常鼠标或按键的动作称为事件(Event),而由鼠标或按键引发的一连串程序的动作称为事件驱动,对事件进行处理的程序或函数称为事件处理程序(Event Handler)。1事件处理事件处理事件是在动态HTML(DHTML)中浏览器响应用户操作的机制。事件处理功能可改变浏览器相应操作的标准方式,这样便可以开发出更具交互性并
33、更容易使用的Web页面。如用户单击按钮时便产生一个onclick事件,通知浏览器发生了什么操作,需要进行什么样的处理。浏览器一直处于等待事件发生的状态,并在事件发生时进行相应的处理。JavaScript处理事件的过程可以分为如下两个步骤:(1)定义脚本可以处理的事件。JavaScript定义了链接、图形、图形映射、窗体元素和窗口等的事件,还定义了对应这些HTML元素的标记属性,这些属性的值是表示事件处理代码的文本。例如对于按钮,存在onclick、ondblclick、onmouseover、onmouseout等事件,分别表示当单击按钮、双击按钮、鼠标进入按钮范围、鼠标离开按钮范围时触发的事
34、件。具体HTML中各个元素存在的事件可参考HTML手册。(2)将事件连接到用户提供的事件处理代码上。在JavaScript中对事件的处理通常由函数来完成。其基本格式与函数全部一样,可以将前面所介绍的所有函数作为事件处理程序,只需将某元素的事件等于一个函数名(函数名后要加括号)即可。当发生该事件时,便会调用等号后的函数来完成相应操作。下面通过例5.27、例5.28来说明事件的用法。【例5.27】onclick事件的使用。function myfunc()alert(“您好!”);设置按钮,指定该按钮的onclick等于myfunc函数,表示当按下按钮的时候,会触发onclick事件,随后调用在o
35、nclick事件上注册的函数myfunc。myfunc的功能为弹出一个“您好!”的提示框,即实现了当单击按钮时,弹出一个“您好!”的提示框功能,如图5.6所示。图5.6 按钮的onclick事件处理【例5.28】onmouseover、onmouseout事件的使用。function myover()alert(“进入图片范围了!”);function myout()alert(“退出图片范围了!”);该例为图片元素(img)的onmouseover(鼠标进入)事件、onmouseout(鼠标退出)事件分别设置函数myover、myout。当鼠标移入该图片时触发onmouseover事件,随即
36、调用在该事件上注册的方法myover,弹出一个提示框,如图5.7所示;当鼠标移出图片时调用在onmouseout事件上注册的方法myout,同样弹出一个提示框,如图5.8所示。2常用事件常用事件事件主要是通过鼠标或按键的动作引发的。一般情况下,不同的元素对应的事件往往不同,常用的事件如表5.7所示。图5.7 鼠标移入图片 图5.8 鼠标移出图片 5.3 对对 象象 模模 型型JavaScript提供了一些非常有用的内部对象来帮助开发人员简化程序设计,可以以更直观、模块化和可重用的方式进行开发,提高编程效率。5.3.1 JavaScript内部对象内部对象JavaScript中提供的内部对象按使
37、用方式可以分为动态对象和静态对象。动态对象:在引用其属性和方法时,必须使用new关键字创建一个对象实例,然后才可以使用“对象实例名.成员”的格式来访问其属性和方法。静态对象:在引用该对象的属性和方法时,不需要使用new关键字创建对象实例,直接使用“对象实例名.成员”的格式就可以访问其属性和方法。下面介绍几种常用的内部对象。1数组对象数组对象(Array)数组将同类的数据组织在一起,便于对同类数据统一操作。数组的下标是从零开始的。创建数组后,能够用“数组名下标”方式访问数组中的单个元素。1)一维数组JavaScript的内部数组是通过Array来实现的。创建数组对象实例的方法是:变量名=new
38、Array(参数列表);参数列表分为三种情况,可分别创建不同的数组:(1)参数列表为一个整形值。参数的值即为创建一维数组中元素的个数,由于数组下标从零开始,因此下标最大值是参数值减1。建立数组student,共100个元素,如例5.29所示。【例5.29】创建参数为一个整型值的数组。var student=new Array(100);student0=“刘强”;student1=“张弛”;student99=“周斌”;(2)参数列表为一个字符串。参数列表为一个字符串表示创建的数组只有一个元素,并且该元素的初值为参数列表中指定的字符串。建立只有一个元素的数组student,并且student0
39、的值为“刘强”,如例5.30所示。【例5.30】创建参数为一个字符串的数组。var student=new Array(“刘强”);(3)参数列表为多个值。如果参数列表中参数有多个,则说明创建的数组长度为参数中值的个数,并且数组中每个元素的值为参数列表指定的参数值,如例5.31所示。【例5.31】创建参数为多个值的数组。var week=new Array(周一,周二,周三,周四,周五,周六,周日);JavaScript中定义的数组长度是可以改变的,是通过给大于下标最大值的元素赋值来实现的。例如要扩充student数组元素的个数到200,只要执行语句student199=“XXX”即可。所以在
40、定义数组时也可以不预先指定数组下标的最大值,而在使用数组元素时再由JavaScript自动根据数组中下标最大的赋值元素的下标来决定。数组中的数据类型可以是以前定义的任何一种基本数据类型。数组中各元素的初值可以在定义的时候直接指定,也可以在定义后一一赋值。另外,JavaScript也支持不通过Array显式地建立数组,而通过在中直接指定用逗号分隔的数值隐式地建立数组,如例5.32所示。【例5.32】隐式建立数组。var week=“周一”,“周二”,“周三”,“周四”,“周五”,“周六”,“周日”;注意:数组列表的每个元素既可以是有效的JavaScript表达式,也可以是空,即允许是不同的类型。
41、如果数组中某个元素为空,则该元素的值就是undefined,如例5.33所示。【例5.33】数组存放不同数据类型。var arr=new Array(3);arr0=100;arr2=“ABC”;for(i=0;iarr.length;i+)document.writeln(arri);由于arr数组中arr1未赋值,因此输出时为undefined。程序运行结果为100 undefined ABC2)二维数组二维数组是通过将一维数组的每一项再设置为数组来实现的。二维数组中每个元素的格式为“数组名一维下标二维下标”,如例5.34所示。【例5.34】使用两种方法定义二维数组。2布尔值对象布尔值对象
42、(Boolean)布尔类型的取值只能是true或false。如例5.35所示。【例5.35】定义布尔类型变量。bNoParam=new Boolean()/falsebNull=new Boolean(null)/falsebEmptyString=new Boolean(“”)/falsebtrue=new Boolean(true)/truebSuLin=new Boolean(“Su Lin”)/truebtrueString=new Boolean(“true”)/true3日期对象日期对象(Date)Date对象包括了关于年、月、日、时、分、秒、星期等与日期和时间相关的属性和方法。基
43、本语法如下:对象名=new Date()对象名=new Date(year,month,date,hours,minutes,seconds,ms)其中,第一种声明方法是获得当前时间的实例,第二种是获取指定时间的实例(year、month、date为必选,hours、minutes、seconds、ms为可选)。Date对象的常用方法如表5.8所示。4数学对象数学对象(Math)Math对象可以用来处理各种数学运算,它定义了一些常用的数学常数,例如圆周率PI等和常用运算的方法,如表5.9所示。5数字对象数字对象(Number)使用Number对象可以将数字作为对象直接访问,方便对数值对象的操作
44、。创建Number对象的语法格式为对象名=new Number(数值);与其他对象一样,Number对象也有一组属性和方法,如表5.10所示。6字符串对象字符串对象(String)字符串表示用单引号或双引号括起来的字符的组合。字符串是最常用的对象。创建字符串的语法格式为对象名=new String(“This is a string”);对象名=“This is a string too”;字符串对象常用的属性为length,表示字符串的长度,常用的方法如表5.11所示。5.3.2 文档对象模型文档对象模型文档对象模型以对象形式描述HTML页面和Web浏览器的层次结构。通过访问或设置相关对象的
45、属性并调用其方法,可以使程序按照一定的方式显示Web页面,实现与用户的交互。文档对象模型的层次结构如图5.9所示。在文档对象模型中,所有下层对象都是其上层对象的子对象。而子对象其实就是父对象的属性,所以引用子对象的方式与引用对象的一般属性是相同的,如例5.36所示。图5.9 文档对象模型的层次结构【例5.36】调用document的方法write。window.document.write(“Hello”);由于window对象是默认的最上层对象,在HTML页被加载时便存在了,因此引用它的子对象时,可以不使用window,即document.write(“Hello”);下面对常用对象进行详细
46、介绍。1window对象对象window对象表示浏览器中打开的窗口,可提供关于窗口状态的信息。可以用window对象访问窗口中的文档、窗口中发生的事件和影响窗口的浏览器特性等。浏览器在打开HTML文档时就生成window对象,对于window对象的使用,主要集中在窗口的打开和关闭、窗口状态的设置、定时执行程序以及各种对话框的使用等几个方面。window对象常用的属性和方法如表5.12所示。2document对象对象document对象反映了HTML文档方面的信息,包括文档中的元素,如各种表格、表单、图像、超链接等,以及文档的最近修改日期、先前访问的URL信息、当前文档的URL信息等。docum
47、ent对象常用的属性和方法如表5.13所示。通过点击按钮改变文档默认的超链接颜色,如例5.37所示。【例5.37】document对象的应用。sina网function changeColor()document.linkColor=red;/设置未点击时链接颜色为红色 document.alinkColor=“black”;/设置点击(未释放)时链接颜色为黑色 document.vlinkColor=“white”;/设置点击后链接颜色为白色3location对象对象location对象提供当前页面的URL信息,常用来加载当前页面或新页面。location对象常用的属性和方法如表5.14所示
48、。4navigator对象对象navigator对象保存浏览器厂家、版本和功能等的信息。常用的属性如表5.15所示。5screen对象对象screen对象主要包含描述显示屏幕和颜色等方面的属性。常用的属性如表5.16所示。6history对象对象history对象主要用于保存用户访问Web的历史记录,常用的属性为length,表示浏览器历史清单中的项目个数。history对象常用的方法如表5.17所示。5.3.3 表单对象表单对象form元素在HTML部分已经详细介绍过,当在页面中使用和定义表单时,表单(form)对象就建立了。表单对象是实现用户和浏览器之间的信息交换的重要工具。在实际应用中,
49、从设计最简单的登录界面,到比较复杂的用户申请界面,都通过表单来提取用户信息。1.form对象对象页面中可以同时存在多个表单,所以对各个表单对象用数组或表单名来区分。由图5.9可知,表单对象是document对象的子对象,所以需要通过“document.表单”来表示指定的表单。用索引表示页面中表单的编号,编号从0开始,则“document.forms索引”表示页面中的具体表单,或者直接使用“document.表单名”来定位表单对象。对于表单的属性和方法的访问有如下几种方法:document.forms索引.属性document.forms索引.方法(参数)document.表单名称.属性docu
50、ment.表单名称.方法(参数)表单对象常用的属性和方法如表5.18所示。由HTML部分的内容可知,表单元素包含的基本元素有按钮、单选框、复选框、文本框等,同样,表单对象也可包含按钮对象、单选框对象、复选框对象、文本框对象等。由表5.18可知,表单对象不仅可以访问表单内的元素(对象),也可以创建新的元素(对象)。在JavaScript中要访问表单内的元素,必须通过表单对象的elements数组下标或元素名来实现。访问表单内元素方法的基本格式如下:document.forms索引.elements索引document.forms索引.elementNamedocument.表单名称.elemen