第一节JavaScript工作原理

一、1JavaScript介绍

1．JavaScript简史

一种编程语言通常是由另一种编程语言演变而来。JavaScript也不例外。

它是由Netscape最初开发了一个Livescript语言，在Navigator和Web服务器产

品中加进了基本的脚本功能。当Navigator2.0中加进了Java小程序支持后，

Netscape把Livescript变成了JavaScript。最初的JavaScript只不过是Livescript

的更名，但每次新的Navigator都使JavaScript有所改进。

说明：尽管JavaScript与Java名称相似但性质和用途大不相同。

2．JavaScript功能。

JavaScript支持Web浏览器和服务器脚本。浏览器脚本用于生成更直观、更

有响应性和更紧密地与插入件、ActiveX组件和Java小程序相联系的动态Web

页面。JavaScript支持这些特性，提供动态产生HTML和定义专用事件处理函数

等特殊编程功能。

JavaScript脚本把HTML标志定义一个JavaScript语言块，在该块中可以编写

JavaScript语句、函数等，由此JavaScript是HTML的一个扩展。

②JavaScript是一种解释性语言。

③JavaScript的输出结果为HTML的一部分。

④JavaScript可与HTML组件协同工作。

⑤JavaScript有编程控制功能。

⑥JavaScript的每一个语句以分号或换行结束。

二、在HTML中嵌入JavaScript

将JavaScript嵌入HTML的办法是，在JavaScript语句前后增加标签（志）。在开始标志中将语言属性值设置为JavaScript，表示

其中的脚本是JavaScript，而不是其他脚本语言，如VisualBasicScript

（VBScript）。

1．Script标志的典型用法如下：

JavaScript语句

……

可以放在HTML文档的头部或主体中。多数情况下，最好把它放在文档的头

部，以确保脚本中的所有JavaScript定义均在显示文档主体之前。这将在“使

用文档头”中进一步和介绍。

现举例说明SCRIPT标志的使用。写一个显示\"Helloworld\"的程序,

其JavaScript脚本的程序如下：

(\"HelloWorld!\")

显示结果或

(\"HelloWorld!\")

显示结果如下:

后一个文档在主体和之间，包含了一个元素SCRIPT，用

标签表示。开始的

2嵌入JavaScript文件或函数

格式：

这里使用的是

如果文件的代码是：

则该例题在浏览器中产生的结果为:

\"s\"。

本例中插入JavaScript源程序后的HTML文档为：

③JavaScript在HTML中的位置及作用

……定义性内容

……执行性内容

三、JavaScript的说明语句

1．说明语句（注释语句）

JavaScript语言提供了自己的说明语句。它类似于C++和Java的语法，用

\"/*\"和\"*/\"以及\"//\"来表示.

\"//\"字符串表示直到行末。单行说明的例子如下:

//ThisJavaScriptcommentcontinuestotheendoftheline.

\"/*\"和\"*/\"字符串用来表示其中的内容为说明信息。例如：

/*Thisisan

exampleofamultiple

linescomment*/

2．使用文档头

HTML的文档头是放置JavaScript定义的好地方。由于文档头在文档主

体之前处理，将定义部分放在文档头中，可使之实现先定义后使用。这是很重要

的，因为任何未定义的变量在使用时都会产生错误。

例如：用文档头放定义部分。即先定义后使用。

显示结果如下:

如果未定义就直接使用，会在浏览器装入HTML文档时产生错误，其信息

为：\"某某变量isnotdefined.\"

例：先使用后定义。

显示如下：

四、生成HTML

前面介绍了作用使用JavaScript向document对象写入简单文本，通过

在JavaScript脚本中加入HTML标签，也可以用JavaScript生成当前文档中显

示的HTML元素。

例：

显示如下：

在HTML文档头中包含的脚本，其变量greeting和welcome包含了嵌入

到HTML标签的文本字符串。HTML文档主体中包含的脚本显示这些文本字符串：

•变量greeting包含标题头\"HiWeb

surfers!\"放在HTML标头标签

和

之间。

•变量welcome取值为字符串\"Welcometo

MasteringJavaScriptandJscript\"。

•引证标签

和

使变量的字符串

作为自由参数引

用（比如以斜体字

显示）。

•\"Welcome\"字

符串周围的段落

标签

和

它独立形成段落。

这个脚本产生的

HTML文档相当于

如下的文档:

HiWebsurfers!

WelcometoMasteringJavaScriptand

Jscript.

显示如下：

五、变量(数值仓库）

1．变量

JavaScript与其他编程语言一样，用变量存放数据。变量就是与存放的

数据相对应的名称。例如，变量imageName可以指定一个要显示的图形文件名。

变量名以英文字母A到Z或a到z和下划线开头，其余的字符可以使用

字母、下划线或数字（0到9）。例如：

orderNumber1、_123、Sum、Image5、Previous_Document。

注：

变量名区分大小写。即变量SUM、Sum、sum、sUm是

不同的，故引用时应注意。

美元号（$）是机器生成码保留字，不能在脚本中使

用。

2．变量与类型

JavaScript与其他语言不同的是，它不用指定（声明）变量的数据类型。

变量的类型根据对变量的赋值隐含定义。变量可以在脚本中先赋予一种类型，再

根据需要赋予另一种类型，也就是说，同一变量可用于包含各种不同的数值。

JavaScript翻译器会自动跟踪这些变量，并在需要时变换变量的数据类型并自

动完成不同类型之间的转换。

六、类型和直接数值

1．类型

JavaScript支持四种基本数值和数组及对象等复杂类型。

基本类型：是可以描写雪景的佳句欣赏 赋值的单个直接数值型。如数字、字符串和布尔值。

JavaScript的基本类型如下：

Number（数字）：整数、实数以及NoN（非数）值，数字用64位IEEE754

格式。

Boolean（布尔值）：逻辑值true和false。

String（字符串）：单引号和双引号中的字符串值。

Null（空）：一个null值，定义空的和不存在的引用。

Undefined（未定义）：一个undefined值，表示变量还没有赋值。

2．数值型：整数和浮点数

整数和浮点数在表达式中可混合使用，它透明地将一种类型转换成另一

种类型。例，当整数用于浮点表达式时转换为浮点数。

整数直接数：十进制数、十六进制数、八进制数。

十进制数：0到9的数字。

十六进制数：用前两个字符为0X或0x的0到9以及A到F（分别表

示10到15）表示。

八进制数：第一位数字就为0，用数字0到7表示。例子如表4--1。

十进制十六进制八进制

190x13023

2550xff0377

5130x20101001

10240x40002000

123450x3039030071

直接浮点数：用于表示小数、很大的数或极小的数，也可以是要用指数计数法表

示的数。

浮点数举例如下：

-4.321

55.

12e2相当于：12102＝1200

1e-2相当于：110-2＝0.01

7e1相当于：7101＝70

-4e-4相当于：-410-4＝0.0004

.5

3．逻辑值

JavaScript支持由True和False两值构成的纯布尔型逻辑值。当他们

的值用于数值表达式时自动将其变成1和0。

4．字符串

是双引号和单引号中的字符序列。单双引号必须成对使用。

如果需要在字符串中插入引号，可在其前加上反斜杠（）作为转义符。

例如：

“Heasked,”Whoownsthisbook?””

‘It’sBill’sbook.’

这两句显示的结果是：

Heasked,”Whoownsthisbook?”

It’sBill’sbook.

JavaScript定义了在字符串中使用的8个特殊格式符，如表4--2所示。

字符含义字符含义

’单引号r回车

”双引号f进纸

反斜杠t水平制表符

n新行b退格

Null值和undefined值

Null值和undefined值是所有JavaScript类型的公用值。Null将

变量设置成与其他有效值不同的初始值，undefined值表示变量还没有赋值；在

表达式中使用他们时，自动转换为相应类型的缺省值。Undefined值对数字类型

变为NoN，对布尔值变为false，对字符串变为\"undefined\"

5．数据类型转换

在表达式中使用变量时，JavaScript会自动地将一种类型值变成

另一种类型。也就是说在表达式中可有不同类型的数据组合，JavaScript在运

算时完成使表达式有意义所必需的类型转换。在JavaScript中类型的转换是按

其运算的优先级进行的，一般来说，字符串运算的优先级较高，然后依次是浮点

运算、整型运算和逻辑运算。

例如：表达式\"test\"+5，先将数字5转换成字符串\"5\",并附加到字符串

\"test\"后面,结果为\"test\"+5

注意：所有情况下，非字符串运算符使用字符串运算时，JavaScript都

将其运算符转变成字符串：

•

数字值转换为相应的字符串值。

•

布尔值转换为1和0以支持数字运算。

•

null值变成字符串运算的\"null\"或布尔false

或数字运算0。

一些表格标签：

和标签表示表格中的一行；

和标签表示标题单元；

和标签表示普通的非标题表格单元。

6．转换函数

函数（Function）是进行特定任务的一组JavaScript代码，通常返回一

个值。函数可能没有参数或有多个参数。参数指定函数要处理的数据。

JavaScript提供了3个显式的类型转换函数，分别是eval()、parseInt()和

parseFloat()。

eval()函数：将字符串表达式转换成数字值。例如，语句total=eval(\"432.1*10\")

的结果是total=4321即将数值4321赋予total变量。

parseInt()函数：把字符串转换成整数。返回是从字符串的第一个字符开始，如

果字符不是以整数开头则返回0。parseInt()函数还可以转换十六进制数或十进

制数。

例如：parseInt(\"123xyz\")返回123，而parseInt(\"xyz\")返回0。

parseFloat()函数：类似于parseInt()函数，它返回字符串上包含的第一个浮

点数。如果字符串不以有效浮点数开头，则返回0。

例如：parseFloat(\"2.1e4xyz\")返回21000；而parseFloat(\"xyz假装的近义词 \")返回0。

例JP42

七、对象类型数组

除了前面介绍的基本类型外，JavaScript还支持两个复杂类型的变量类

型数组和对象，它们是用基本字符串、数字和逻辑类型构造起来的。后面介绍对

象和Object类型，这里介绍JavaScript特殊对象数组。

1．数组

数组：能够存放一系列数值的对象，数值存放在数组的索引位置中。由new

Array(n)定义一个变量。n为数组长度。数组的各个元素用数组名和方括号以及

括号中的数组元素索引号表示。第1个索引号为0，最后一个索引号为数组长度

减1。

例如：某公司有5个员工，要在Web页上显示员工的姓名，可用数组变量来跟踪

员工姓名。用employee=newArray(5)语句。newArray(5)是数组定义，说明

employee是数组变量，数组的长度为5，即有5个数组元素。它们是：employee[0]、

employee[1]、employee[2]、employee[3]和employee[4]。

声明数组和给各元素赋初值的语句如下：

employee=newArray(5)

employee[0]=\"王一\"

employee[1]=\"李二\"

employee[2]=\"张三\"

employee[3]=\"赵四\"

employee[4]=\"Bill\"

然后用引用数组元素访问各个员工姓名。例如，用下列语句显示员工姓名：

(employee[0])

(employee[1])

(employee[2])

(employee[3])

(employee[4])

完整的HTML程序如下：

UsingArrays

显示结果如下:

2．声明数组

数组必须选声明，后使用。数组可用以下两种形式声明：

arraryName=newArray(arrayLength)即：数组名=

newArray(数组长度)。

arraryName=newArray()即：数组名=newArray()，

称为0长度数组。

newArray()声明的0长度数组，用于跟踪客户定单。新元素初始

化时，JavaScript将自动延伸数组的长度。

例如：order=newArray()

order[99]=\"化肥100吨\"

order[999]=\"汽油5000公升\"

则数组order的长度为1000。

注：即使数组最初声明为固定初始长度，也可在引用时将其扩展。这与0长度数

组的扩展方式一样。

3．构造紧凑数组

紧凑数组（densearray）：是最初声明时，为每个元素指定初值的

数组。用法和其他数组一样。紧凑数组的声明形式如下：

arraryName=newArray(value0,value1,value2,…,valuen)

声明中从0开始计数，所以数组长度为n+1。

4．数组元素

JavaScript并不对数组元素的值进行限制。这些值可以用于不同类型，

也可以引用其他数组或对象。

例：junk=newArray(\'s1\',\'s2\',4,3.5,true,false,null,new

Array(5,6,7))

junk数组有8个元素，最后一个元素junk[7]本身又是一个数组，其中

有三个元素（数组中的数组），他们可以用第二组秋夜将晓出篱门迎凉有感二首 子脚本访问如下：

junk[7][0]=5

junk[7][1]=6

junk[7][2]=7

其形式类似于其他语言的双维数组，但又和双维数组有着本质的区别。

因第一个下标（索引号）仅表示它在原来数组中的位置，而不表示双维数组所具

有的行数。

下面的HTML程序，演示了数组中数组的使用。

数组中的数组：

ArrayswithinArrays

显示结果如下

八、对象及其长度属性

JavaScript数组是作为特殊对象实现的。对象是有属性并允许通过方

法访问的数据集合。属性返回标识对象某方面状态的数值，方法用于读取或修改

对象中所包含的数据。

数组长度是数组的一个属性。将对象名加上小数点，再加上属性名便可

访问对象属性：

tyName

例如，获取数组的长度(元素个数)的方法如下：

例如，下列数组：

a=newArray(2,4,6,8,10)

而的返值是5。

数组除了length属性外，它还有几个方法，这些将在后面的声明和使用

对象的过程中介绍

第三节运算符、语句和函数

•运算符与表达式

•运算符优先顺序

•语句和声明

•局部变量和全局变量

•语句中的对象访问

一、运算符与表达式

JavaScript提供的所有运算符可分为七类：

•算术运算符：+、－（减或一元非）、、

／、%、＋＋、――

•逻辑运算符：&&逻辑与、||逻辑或、！

逻辑非，用于布尔算子的布尔运算。

•比较运算符：==、===、!=不等于、!==

严格不等于、<、<=、>、>=

•字符串运算符：＋字符串接合运算。例如

\"ab\"+\"cd\"的结果为\"abcd\".

•位操作运算符：&于、!或、^异或、<<左移、>>

带符号右移、>>>填0右移。

•赋值运算符

•条件运算符

1．算术运算符

+、－（减或一元非）、、／、%、＋＋、――

%模：求两个整数相除的余数，例如：17%5=2。

＋＋递增并返回数值（或返回数值并递增）。

――递减并返回数值（或返回数值并递减）。

2．比较运算符

确定两个数值是否为相等，或比较数字值大小。有：

==、===严格等于、!=不等于、!==严格不等于、<、<=、>、>=

（1）等于（==）和不等于（!=）是先进行类型转换再进行运算（测

试等值性）。

例如：\"5\"==5的值为真。

注：若

显示如下

对象访问语句

对象是复杂的JavaScript数据结构，提供数据和方法（用于对数据进行

操作）。对象中的各个变量称为属性，属性提供了对象数据的访问方法。

访问对象属性的一般方法为：

变量名属性名tyName

例：将empolyee变量的empolyeeID属性值赋予变量id。

id=eeID

属性引用出现在等式的左边时，引用对象的属性会被更新。如：

eeID=id

id变量中存放的是更新值。

对象的方法是用于操作对象的函数。这些方法的调用与属性类似。但由

于方法是函数，必须有参数，空参数表的指定和函数调用一样。方法调用的一般

语法如下：

变量名方法名（参数表）

→Name(p1,p2,p3…,pn)

这里的变量名表示对象的变量名。

有些方法不返回数值，其调用本身就是个完整的语句。多次用过的

document对象的write()方法便属于此类：

(“texttobedisplayed”)

有些方法返回值，这时方法的调用是表达式的一部分。例如：

payroll=0

for(I=0;I<;++I)

payroll+=employee[I].netpay()

其中employee是employeeRecord对象的数组，netPay()方法根据

employeeRecord对象中的属性值，计算每个员工的纯收入。

第四节对象

•何谓对象

•何谓面向对象编程

•JavaScript对象模型颜色常量

•定义对象类型

•删除属性与方法

JavaScript的一个最重要的特性是基于对象（Object-Based）,它大大简化了

JavaScript程序的设计，使其可以用更直观、模块化和可复用的方式进行程序开

发。

这一节介绍JavaScript的对象支持和基于对象编程，介绍JavaScript对象模型

并总结了预定义JavaScript对象，同时介绍如何创建自己的对象类型。

一、对象

对象就是客观世界中存在的人、事和物体等实体。对象也存在于计算机和网

络和电子世界中。在电子世界中的对象例子有创建的Web页面和其中包含的各

种HTML元素。这里主要介绍这类对象与JavaScript的关系。

对象由两个元素构成：

•一组包含数据的属性

•允许对属性中包含的数据进行操作的方法

当把某个元素作为对象时，可看看其属性和方法。表4--6列出了常用对象的

属性和方法。

对象、属性和方法举例

对象属性方法

人（客观对象）

身高(height)

体重(weight)

头发颜色

(hairColor)

eat()

exercise()

grow()

书（客观对象）

页数(page)

当前页

（currentPage）

turnPageForward()

turnPageBackward()

goToPage()

灯（客观对象）开关状态

turnOn()

turnOff()

Web页面(电子对

象）

title(标题)

bgColor(页面颜

色)

Link(链接)

open()

close()

write()

HTML按钮(电子

对象）

name(名称)

value(值)

setlabel()

我们介绍过的例子中，许多脚本中都用到document对象及其write()方法，

用window对象的alert()方法可向用户显示信息。窗体的字段也是对象，可使用

字段的value属性测试和设置字段值。

说明：JavaScript不是完全的面向对象式语言。它尚缺少面向对象编程的几个

功能，但JavaScript是基于对象的语言，提供了一些面向对象编程的重要特性。

二、面向对象编程

1．面向对象编程

面向对象编程（简称OOP）：将软件程序的元素构造成对象，指定对象类型、

表示对象属性的描述对象方法。定义对象后，即可用于创建这种类型对象的具体

实例并构造其他更复杂的对象类型。

说明：对象类型在Java和C++等面向对象的语言中称为类（Class）。

2．对象类型及其实例

对象类型：就是用于创建该类型具体对象的模型，它定义该类型对象共有的

属性和方法。

例如，以一个人的邮政地址作为对象类型，称为mailAddress，具体属性

streetAddress、city、state（国家）和postalCode。除了这此属性外，我们定义

changeAddress()方法，用于改变地址。再定义findAssress()方法，以便找出其他

人的地址。

在定义mailAddress对象类型时，我们并没有指定某个人的地址，而只是建立

了一个创建地址的模型，就象一个空白的Rolodex卡片。地址类型可以实例化，

即创建该类型对象的具体实例，这就是创建具体某个人的地址记录。这类似于创

建Rolodex卡，填好后贴在Rolodex上。

定义用于创建具体对象实例的对象类型，是面向对象软件开发的基本而重要

的功能。

//************JavaScript不支持

3．创建对象类型

定义和实例化对象类型是面向对象语言的基本功能，但不是这语言提供的唯

一功能。他的真正魅力在于，可用一种对象类型定义另一种对象类型。可用两种

主要方法进行：对象合成和继承。

（1）对象合成（封装、模块化和信息隐藏）

开发对象的类型的方法之一则定义基本对象类型，用其作为简单构造块，以

便构造更复杂的对象类型。这个过程称为对象合成。

以建造房子的过程为例百闻不如一见造句 ，我们要先构造墙板、柱子、窗框等基本组件。然后

把基本组件组合成更复杂的门、窗、预制墙等组件，最后再将其集成为房子。同

样，编程中邮局是用简单对象类型构造更复杂的对象类型，最后集成为完整的软

件程序。

对象合成与对象复用的支持密切相关。定义对象类型时通常希望该对象能在

其他软件程序中复用，这样可以简化其他程序的开发，从而节约成本和时间。软

件对象的复用和其他工程原则中的复用同样重要。如果汽车制造厂要为每种车型

重新设计轮子，该有多么可怕。

封装（Encapsulation）

软件对象要遵守一定的设计原则才能保证其可复用性。封装是其最重要的原

则之一。

封装是将对象的属性和方法封装到具的适当定义接口的容器中。对象接口提

供的方法和赂性应使对象能够如如期使用。而不能提供误用对象的方法和属性。

例如，汽车设计人员提供了方向盘、制动器和调速能力，它们是汽车必须的，但

汽车制造商不会向驾驶员提供人工点火的能力，这不是必须的，也没有什么好处。

模块化和信息隐藏（ModularityandInformationHiding）

封装的成功取决于模块化和信息隐藏这两个重要的概念。模块化是对象的自

给自足特性，它不会访问定义接口以外的其他对象。模块化对象是松散藕合的，

即对象间的依赖性最少。一个对象的内部改变，不要求另一个使用该对象的对象

也作出改变。信息隐藏指将对象的信息限制在对象接口使用所必须的范围内，删

除对象接口中仅供对象内部操作的信息。

（2）继承--对象设计的层次方法

从一种对象构造另一种对象类型的第二个主要方法是继承。继承方法定义更

高层更抽象的对象类型，并从中推导出低层的更具体的对象类型。创建低层对象

类型时，它把一个或几个高层对象类型作为上级类型，子类型继承上级类型中的

所有属性和方法。这样就不必重新定义这些属性和方法。子类型可以重新定义继

承的方法，或加进新的属性或方法，这样，子类型就可以根据具体情况调整继承

的属性。

例如，考虑实现滚动字幕框所要构造的各种类型的对象，最高层

genericMarquee的可能构造成具有基本属性scrolledText和scrollRate，提供基本

方法startScrolling()和stopScrolling()，可以借用这个常用字幕框创建更复杂的字

幕框。例如，可以在genericMarquee中加进属性scrollDirection（滚动方向），

得到出horizontalMarquee（垂直字幕框）和verticalMarquee（水平字幕框）对象

类型，这又可以进一步推导出利用彩色字符或背景的字幕框，可以加进属性

textColor、backgroundColor和方法randomTextColor()（随机字符颜色）与

randomBackgroundColor()(随机背景颜色）

利用继承性，在已经定义的对象类型基础上创建更复杂、更专业的对象类型，

只要加进所需属性和方法，将新对象与上级对象区别开来即可。一旦创建有用的

对象类型，即可多次复用，创建多个子对象和多代子对象。

单一继承与多重继承（singleandMultipleInheritance）

继承在对象开发中取得成功的原因之一是它的直观性，与我们取得和组织知

识的方式相似。

的些语言（如Java）强制采用一种更严格的继承形式，称为单一继承性。单一继

承性要求子类只有一个上级类，但上级类可以有多个子类。由于子类从单一的上

级类继承其父类属性和方法，所以在加入独特属性和方法之前的，是上级类的严

格复制。

其他语言（如C++）支持多重继承，即子类可以继承多个上级类的属性和方

法。多重继承比单一继承更强大，因为它不仅允许单独的继承性，而且支持互补

类或分支式类结构，从而使之融合在一起。

但多重继承也为名称解析方面带来了某种困难。假设C类是A类和B类的子

类，假设A类的B类分别定义了不同save()方法，C类继承其中的哪个save()方

法呢？编译器如何确定C类的对象用哪个方法呢？尽管有可以创建一个命名模

式，使编译器解决多重继承带来的命名困难，但这些办法通常需要大量的附加编

译工作和运行时的处理器时间。

多态（Polymorphism）

多个同名方法是面向对象编程的一个特性。多态就是能够分别适应多个窗体

的方式。它可为一种对象类型定义一种方法的多种实现方案。这些方法通过类型

和可接受的参数来区分。

例如，可以定义几个不同的print()方法，各用于不同对象类型的打印。还可

以定义其他print()方法，取不同个数的参数。编译器、翻译器和运行系统能选择

最适合所打印对象类型的print()方法。多态使编程人员可以用标准方法（如

print()）进行特定的操作；定义不同形式的方法适用于不同的参数。这样便形成

了标准化和可复用的软件；从而消除了用多个名称稍有不同的对象只是参数略有

出入，而执行同样的操作的情况的出现

**********//

三、JavaScript基于对象编程功能

介绍JavaScript基于对象编程功能和JavaScript开发基于对象的JavaScript程

序方法。

1．基于对象编程功能

JavaScript不支持分类、继承、封装和信息隐藏等面向对象的编程的基本功能。

它的功能在于迅速方便地产生在Web页面，或在服务器方生成执行于应用程序

上下文中的脚本。JavaScript是“基于对象”（object-based）的语言，它支持开发

对象类型并可将这些类型实例化，创建对象实例。它提供了对象合成地支持，但

只支持模块化和对象复用。表4--7总结了JavaScript基于对象的编程功能。

表4--7JavaScript基于对象的编程功能

功能说明

对象类

型

支持预定义和用户定义的对象类型。不支持强制的数据类型，任何

类型的对象都可以赋予任意类型的数值。

对象实

例化

对象类型用new运算符实例化，创建具体对象实例。

对象合

成

对象类型可以用其他预定义类型或通过用户定义的对象类型来定

义。

模块化JavaScript代码可以用模块方式定义，但JavaScript并不提供强制化

软件开发的特性。

对象复

用

JavaScript软件可以通过SCRIPT标签的SRC属性实现复用，也

可以通过Internet复用。

信息隐

藏

JavaScript不提供也不支持任何信息隐藏功能。

封装

由于JavaScript无信息隐藏功能，故无法用于开发封装对象类型，

用类型语句定义的任何方法和属性都可以直接访问。

继承JavaScript不提供“对象类型间继承”语言特性。

分类由于JavaScript不支持继承，所以无法开发层次式的对象类型。

多态JavaScript支持多态功能，它可通过定义函数数组参数实现。

JavaScript提供了一组特别通用于浏览器和服务器脚本的基于对象特性。这些

特性包括一组预定义的浏览器和服务器对象，以及通过其他对象的属性和方法访

问相关对象的功能。

四、JavaScript对象模型

JavaScript支持由一些预定义对象支持的简单对象模型。JavaScript以对象模型

为中心，通过特殊定义的对象类型来创建文件具体对象实例。这个模型中的对象

类型用属性和方法来定义：

•属性：用于访问对象中包含的数据值。缺省情况下，属性可

以更新和读取，但有的预定义JavaScript对象属性为只读属

性。

•方法：用于控制对象操作的函数，方法用对象的属性进行这

些操作。

1．使用属性

对象属性是通过对象名和对象属性名组合来访问的。形式如下：

对象名．属性名tyName

例如，当前Wed文档的背景颜色用预定义对象document的bgColor属性表示，

要把背景颜色变成白色，可有下列JavaScript语句：

r=\"white\"

下面的程序使用了这个语句，Web页中的几个按钮上显示了不同颜色名。单

击某个按钮时，这个按钮的onClik事件处理器设置r属性，改

变当前文档的背景色。

使用JavaScript属性

ONCLICK=\'r=\"red\"\'>

ONCLICK=\'r=\"white\"\'>

ONCLICK=\'r=\"blue\"\'>

显示如下

2．使用方法

对象方法的访问和属性相似，形式如下：

对象名方法名（参数表）→Name(paramenterList)

参数之间用逗号分开。即使不指定参数，也要有括号。其中的方法调用语句

如下：

r=()

这个语句调用预定义Math对象的random()方法。这个方法返回0到1之间的

随机浮点数，再把该浮点数送到变量r。

3．创建对象的实例

建立特殊对象类型的实例是用new运算符（曾用new运算符创建数组对象）。

语法如下：

变量名=new对象类型（参数表）→variable=newobjectType(parameters)

其中objectType(parameters)部分称为构造器。有些对象类型中有多个构造器，

各个构造器允许的参数个数不同。

例如，Date属于预定义的JavaScript对象类型。要用当前日期和时间创建Date

的实例，并将实例值赋予currentDate变量，可以用下列语句：

currentDate=newDate()

语句中Date构造器没有取任何参数。Date对象类型还允许创建指定日期的对

象实例。例如，下列语句得到2000年3月27日的Date实例：

currentDate=newDate(2000,3,27)

语句中Date构造器Date(2000,3,27)取3个参数。

五、浏览器对象

支持JavaScript的浏览器装入Web页面时，浏览器创建多个JavaScript对象，

以访问Web页面中及其所包含的HTML元素。这些对象用于更新页面或与装入

的Web页交互。这些对象及用途见表4--8

表4--8浏览器对象

对象用途

Window对

象

访问浏览器窗口或窗口中的帧，window对象假设已经存在，因而

其他属性和方法使用时不必加window.前缀

document对

象

访问装入到当前窗口的文档,文档指提供内容的HTML文档，具有

HEAD和BODY标签(志)

location对

象

表示URL，可用于创建URL对象，访问部分URL或修改已存在

的URL

history对象维护窗口中访问过的URL历史

frame对象frame对象访问HTML帧;

frames数组frames数组用于访问窗口中的所有帧

link对象link对象访问超文本链接或图形的位置点;

LinkS数组LinkS数组用于访问文档中的所有链接对象

anchor对象

anchor对象访问超文本链接的目标;anchors数组用于访问文档

中所有位置点对象

image对象

image对象访问嵌入到HTML文档的图形;images数组用于访问

文档中的所有图形对象

area对象访问客户机方图形映射中的区域

applet对象

applet对象访问Java小程序，applets数组用于访问文档中的所有

小程序

event对象

Event对象

访问一个对象实际上例的信息。

event对象产生特定事件的信息。Event对象则提供表示事件的常

量

form对象

form对象访问HTML窗体，forms数组用于访问文档中所有窗

体

elements对

象

访问窗体中的所有元素（字段或按钮）

text对象访问窗体中的文本字段

textarea对

象

访问窗体中的文本区字段

radio对象访问窗体中的单选钮集合

checkbox对

象

访问窗体中的复选框

button对象访问窗体中的按钮（除复位钮reset和提交钮submit）

submit对象访问窗体中的提交钮(submit)

reset对象访问窗体中的复位钮(reset)

select对象访问窗体中的选项清单，option对象用于访问选项清单中的元素

password对

象

访问窗体中的口令字段

hidden对象访问窗体中的隐藏字段

FileUpload

对象

访问窗体中的文件上装元素

navigator对

象

访问执行脚本的浏览信息

Screen对象访问用户屏幕的尺寸和颜色度信息

embed对象

embed对象访问嵌入对象;embeds数组访问文档中的所有嵌入

数组

mimeType

对象

mimeType对象访问浏览器支持的特定MIME(多用途的网际邮件

扩充协议)类型信息;

mimeTypes数组是浏览器支持的所有MIME类型对象数组

plugin对象

plugin对象访问特定浏览器插入件的信息;

plugins数组是plugins数组浏览器支持的所有插入件数组

JavaScript还支持独立于Web页面而装入的对象类型。将在\"预定义对象类型\"

中介绍。

对象的层次结构

表4--8中的对象是设计Web页面时建立的，如果创建具有三个窗体的Web

页面，则forms数组包含对应于3个窗体的form对象。同样，如果定义9个链

接的文档，则link数组包含对应于9个链接的link对象。

浏览器对象组成对应于装入的Web文档结构和当前浏览状态的层次结构。这

个层次结构称为实例结构（instancehierarchy）。Window和navigator对象便是

这个结构中的最高层对象。

Window对象

Window对象表示浏览器窗口，具有用于表示构成窗口的HTML元素对象对

属性。例如，frames数组是window对象的属性。如果窗口用帧数组标签（志）

定义多个帧，则frames数组包含与每个帧相关联的frame对象。窗口的Location

属性指包含与相关联的URL的location对象。

如果窗口包含可显示内容而不是帧组标志，则window对象的document属性

指与窗口相关联的document对象。document对象包含引用窗口中所显示对象的

属性。这些属性包括links、anchors、images和forms数组。links数组表示文档

中包含的所有链接对象；anchors数组表示所有指名的位置点；link对象指示超

链接的源，而anchor对象指链接的指名目标。images、applets和forms数组分别

表示文档中包含的所有图形、小程序和窗体。文档的area属性指定文档中定义

的客户方图形映射的区域。文档的history属性指包含用户在特定窗口中访问过

的URL清单。

在IE中把link和anchor对象结合起来，两者都可以通过anchors数组访问。

document对象的forms数组表示文档中定义的所有form对象。尽管文档中可以

定义多个窗体，但通常只定义一个窗体。form对象提供了通过elements数组对

特定窗体中定义的各个元素的访问。（其元素后面介绍）

层次对象标识符

由于浏览器用实例层次结构组织Web页的各个对象，因此可以用层次式命名

模式表示这些对象。例如，假设HTML文档定义3个窗体，第二个窗体有9个

元素，其中第5个元素是个单选钮，则可以用下列标识符访问这个单选钮的名称：

[1].element[4].name

其中：forms[1]表示第二个窗体（数组索引从0开始）；

element[4]表示第5个元素。

可以用下列语句显示这个名称：

([1].element[4].name)

说明：引用当前窗口的属性和方法时不必指出window对象，因为缺省是当前

窗口。仅在事件处理代码中，缺省假设document对象为当前窗口。

大多数情况下，可以从document开始引用浏览器所建对象的属性和方法。用

包含对象的对象属性名，如（links、anchor、images、forms）表示实例层次结构

中的对象。以这种形式指名对象时，可以用对象的属性或方法名来访问该对象的

数据和函数。

onClick=’()’>

本窗体创建名为CloseWindow的按钮，其功能是关闭第二个窗口。

七、其他预定义对象类型

JavaScript除了有预定义浏览器对象外，JavaScript还提供了两个通用对象类

型，支持公用操作。

1．Array对象

Array对象可以将数组作为对象访问。

Array对象的属性（已被ECMAScript）：

Length属性：数组长度。

prototype属性：所有对象类型都支持的属性，允许对一个对象类型定义其他

属性和方法。

Array方法（已被ECMAScript1规范定义）：

toString()返回数组的字符串。数组元素用逗号分开。

join(separator)返回数组的字符串，数组元素用分隔符分开。

如果不指定分隔符，则用逗号分开。

reverse()逆转数组元素，即最后一个元素放在最前面，第一个元素放到最后

面。

sort(comparisonFunction)根据一个比较函数排序数组元素。如果不指定比较

函数，则按字典顺序排序数组元素。如果指定函数，则它应有两个参数p1和p2，

当：

p1

p1=p2时，返回值为0

p1>p2时，返回值为正整数

例：生成0到10的整数数组并对其采用toString()、join(‘:’)、reverse()和sort()

方法。

使用数组

显示如下

2．Boolean对象

Boolean对象可以将布尔值作为对象访问，支持prototype属性、toString()和

valueOf()方法。toString()返回布尔值的对应字符串，valueOf()方法根据对象的

值返回真或假。

对象建立时，将其值作为构造器的变元：

myBoolean=newBoolean(false)

myBoolean=newBoolean(true)

3．Date对象类型

Date对象类型提供了使用日期和时间的共用方法集合。见表4--8带UTC的方

法中UTC指统一协调时间，是世界时间标准定义的时间。Date对象类型定义

prototype属性，Date对象类型的的实例可以用表中的4个构造器之一来建立。

方法说明

getdate()反回或设置date对象是当月第几天

gettcdate()

setdate()

seutcdate()

getday()反回或设置date对象是本周的星期几

getutcdate()

gethour()反回或设置date对象的小时数

sethours()

getutchours()

getmilliseconds()反回或设置date对象的毫秒数

getutcmilliseconds()

setmillseconds()

setutcmillseconds()

getminites()反回或设置date对象的分钟数

getutcminutes()

setminites()

setutcminites()

getmonth()反回或设置date对象的月份

getutcmonth()

setmonth()

setutcmonth()

getseconds()反回或设置date对象的秒

getutcseconds()

setseconds()

setutcseconds()

gettime()返回或设置date对象的时间

settime()

gettimezoneoffset()返回或设置date对象的时区偏差(分钟)

getyear()返回或设置date对象的年份.整年方法用四位年份

getfullyear()

setyear()

setfullyear()

setutvfullyear()

togmstring()将日期转化为InternetGmt(格林威治标准时间)

tolocalstring()将时间转化为本地格式,即用户所在地常用格式

tostring()返回对象Date的字符串值

valueof()返回自1970年1月1日午夜(gmt)的毫秒数

toutstring()返回表示utc事件的字符串值

表Date构造器

构造器说明

datea()用当前时间和日期来创建date实例

date(datestring)

用datestring参数指定的日期创建date实

例,datestring的格式:monthday,year

hours:minites:seconds

date(milliseconds)

用1970年1月1日以来的毫秒数,来创建

date实例

date(year,month,day,hours,minites,seconds)

用整数的年,月,日,时,分,秒,毫秒质地定的日

期创建date实例,年参数,月参数要提供

date对象类型的方法

例：使用Date对象的实例

使用日期对象类型

4．Function对象

Function对象可以将函数作为对象访问，可以在脚本执行期间动态生成和调用

函数。ECMAScript1规范指定了两个属性：

length属性：指定函数定义的参数个数。

prototype属性。

Navigator和InternetExplorer定义的属性：

arguments属性是个数组，表示调用函数时传递的变元组。

Caller属性表示调用函数的函数。

ECMAScript1规范指定了toSing()和valueOf()方法。

toSing()方法返回表示函数的字符串；

valueOf()方法返回函数本身。

生成Function对象时，要向Function()构造器提供函数参数和函数体：

variable=newfunction(“p1”,”p2”,”p3”，……，”pn”,”body”)

其中：“p1”,”p2”,”p3”，……，”pn”是参数；

”body”是函数体，函数体的开/闭大括号（{和}）不指定。下列函数返回x平

方加y平方：

myFunction=newFunction(“x”,”y”,”returnx*x+y*y”)

例：Function对象的用法程序如下：

使用函数对象

它生成带开/闭中括号（[和]）的函数，结果为：

[This][is][a][test.]

5．Global对象

Global对象是直接以全局变量和函数形式访问其属性和方法。

ECMAScript1规范指定了两个常量属性：

NaN属性：表示非数字；Infinty表示正无穷大。

Global对象的定义方法如下：

Escape(sting)将字符串变为新的字符串，有些字符根据RFC1738转换转义序

列。

Eval(x)求值并返回表达式x的值。

IsFinite(number)对有限数返回真，否则返回假。

IsNan(number)对非数字返回真，否则返回假。

ParseFloat(string)将字符串分析为一个浮点值。

ParseInt(string,radix)将字符串分析为一个基整数。

Unescape(string)将escape()编码的字符测试和URL编码/译码。

Math对象、Number对象、Object对象、string对象将在后续的例题中介绍。

第五节表单对象

表单（格）是JavaScript中的一个对象，可根据JavaScript提供的定义对象类

型和创建具体对象实例的方法来定义表格。我们结合建立table对象类型来介绍

其方法。

要创建新的对象类型，需要定义用于构造该对象类型的具体实例函数，实际

上这个构造函数做两件事：

•为对象类型的属性赋值

•指出作为对象类型方法的函数

1．2.标识和赋值属性

表格的行数和列数是两个必需的属性，设置为和

s，还定义存放表格元素的属性，假设是长度

如下述数值的数组：

*s

由于HTML中可以指定一些单元为头单元，可以定义属性

为与上述数组长度相同的数组，其中所有的元素均是布

尔值，表示表格单元是否为头单元。最后定义属性，表

示表格的边框宽度。代码如下：

functiontable(rows,columns){

=rows

s=columns

=0

=newArray(rows*columns)

=newArray(rows*columns)

}

table()构造器将rows和columns作为参数，并将它们分别赋和

s。this是个特殊关键字，表示当前对象。例如，语句=rows

将参数rows中存放的值赋当前对象的rows属性。table()构造器中的参数rows

和columns也可取x和y等其他名字。

Border属性在当前对象中设置为缺省值0，创建的是无边框表格。

创建table对象类型的实例对象，可用new操作符和table构造器。

例如：下列语句建3行、4列的表格，并赋变量t:

t=newtable(3,4)

3．定义方法

我们已定义了table对象的类型属性，还要定义一些方法来更新

data、header和border属性值，并将table对象写入document对象。

定义方法，就是将已经定义的函数名赋予对象类型构造器的方法名。例如，

假设table_setValue()函数定义如下，这个函数将表格中row行鬼故事短篇 、column列的单

元值设置为value参数：

functiontable_setValue(row,col,value){

[row*s+col]=value

}

则可在table构造器中用下列语句，将上述table_setValue()函数当作table对

象类型的setValue()方法：

ue=table_setValue

注意:这里table_setValue后无括号，新的表格构造器如下：

functiontable(rows,columns){

=rows

s=columns

=0

=newArray(rows*columns)

=newArray(row*columns)

ue=table_setValue

用表格调用存放的表格对象的setValue()方法如下：

ue(2,3,”Hello”)

该语句将表格第2行，第3列的表格数据设置为\"Hello\"

4．定义table对象

下列程序提供了table对象的完整定义，注意要先定义函数，后命

名方法。

Table对象的定义:

functiontable_getvalue(row,rol){

[row*s+col]

}

functiontable_setvalue(row,col){

[row*s+col]

}

functiontable_set(contents){

varn=

for(varj=0:j

}

functiontable_isheader(row,col){

[row*s+col]

}

functiontable_makeHeader(row,col){

[row*s+col]=true

}

functiontable_makenormal(row,col){

[row*s+col]=false

}

functiontable_makeHeaderrow(row){

for(varj=0;j

[row*s+j]-=true

}

functiontable_makeHeaerColumn(col){

for(vari=0;i<;++j)

[i*s+col]=true

}

functiontable_write(doc){

(\"\")

for(vari=0;i<;++i){

(\"\")

for(varj=0;j

if([i*s+j]){

(\"\")

(\"[i*s+j]\")

(\"\")

}elset:{

(\"\")

(\"[i*s+j]\")

(\"\")

}

}

n(\"\")

}

n(\"\")

}

functiontable(rows,columns){

=rows

s=columns

=0

=newArray(rows*columns)

=newArray(row*columns)

ue=table_getValue

ue=table_setValue

=table_set

er=table_isHeader

ader=table_makeHeader

rmal=table_makeNormal

aderrow=table_makeHeaderrow

adercolumn=table_makeHederColumn

=table_write}

其中：

getValue()方法返回指定行和列存放的数据值；

set()方法将数值数组存放成表格内容；

markeHeader()和markeNormal()方法用于表示一个单元是否为头单

元；

markeHeaderRow()和markeHeaderColumn()方法用于指定完整的行

或列为头单元；

write()方法用于将表格写入document对象。

5．使用table对象

下列程序提供了一个使用table对象的例子。文档主体中包含的脚本创建、初

始化并显示一个3行4列的table对象，它用SCRIPT标签的SRC属性包括了前

面介绍的文件。首先创建table对象并将其赋予t变量，然后创建数组

cotents，包含数值清单，调用set()方法将这个数组赋予t中存放的表格单元。表

格的border属性为4个风雨送春归飞雪迎春到 像素，第0列的单元作为头单元。最后，write()方法用于

将表格写入当前document对象。

DefiningObjectTypes

第六节事件处理

一、事件

事件是浏览器响应用户操作的机制，JavaScript的事件处理功能可改变浏

览器响应这些操作的标准方式，就可以开发更具有交互性、更具响应性和更易使

用的Web页面。

事件（event）：用户与Web页面交互时产生的操作。

例如，用户单击超链接或按钮时或输入数据时，即产生一个事件，告诉

浏览器发生了操作，需要进行处理。浏览器等待事件发生，并在事件发生时，进

行相应的事件处理工作。响应某个事件面进行的处理工作过程称为事件处理，进

行这种处理的代码称为事件处理器。通知事件和处理事件的过程如图4--6：

简单的事件处理，如用户单击Web页面上的URL时，缺省的HTML操作

是浏览器装入并显示与这个URL相关的页面。但利用JavaScript可以编写另外

一个事件处理器，从而改变这个缺省操作。如JavaScript事件处理器完成的操作：

可定义一个事件处理器，在用户将鼠标移过一个链接

时显示一个对话框

可定义一个事件处理器，验证用户输入窗体的数据

可定义一个事件处理器，在用户单击某个按钮时装入

并显示动画系列

可定义一个事件处理器，与Java小程序和浏览器插

入件交互操作

JavaScript的事件处理能使JavaScript能够生成生动的与Web用户

交互操作的Web页面。

二、JavaScript如何处理事件

JavaScript处理事件的过程分为两个步骤：

（1）定义脚本可以处理的事件

（2）提供将这些事件连接到用户的

JavaScript代码的标准方法。

JavaScript定义了链接、图形、图形映射、窗体元素和窗口的事件，还定义了

对应这些HTML元素的标签（志）属性，允许脚本识别事件处理JavaScript代码

而不是缺省HTML事件处理器。这些属性值是表示事件处理代码的文本。见表

4--9总结了Javasript定义的Navigator和IE共同事件,

Html元素Html标志Javascript事件说明

所有事件可变***mousemove鼠标移动

链接...

click鼠标单击

dbclick鼠标双击

mousedown鼠标按下

mouseup鼠标放开

mouseout鼠标移出链接

mouseover鼠标移入链接

keydown用户按下键

keyup用户放开健

keypress用户按下并放开

图型

abort中断图形装入

error图装入期间错误

load图形装入并显示

keydown用户按下键

keyup用户放开健

keypress用户按下并放开

区域

mouseover

鼠标移动经过客户机

方图形映射区域

mouseout

鼠标从图形映射区域

移到区域外部

dblclick

用户双击一个图形区

域

文档主体.

click用户在文档中单击

dblclick用户在文档中双击

keydown用户按下键

keyup用户放开健

keypress用户按下并放开

mousedown用户按下鼠标

mouseup用户释放鼠标

窗口,帧组.

帧

blur窗口失去焦点

error装入出口时错误

focus窗口收到当前焦点

load装入窗口完成

unload用户退出窗口

move窗口移动

resize窗口缩放

dragdrop

用户将一个对象放在

窗体上

窗体

submit用户提交窗体

reset用户复位窗体

文本字段

blur

当前文本字段失去焦

点

focus

文本字段得到当前输

入焦点

change

文本区修改并失去当

前输入焦点

select

文本字段中的文本被

选中

口令字段

blur口令字段失去焦点

focus

口令字段得到输入焦

点

文本区

blur

文本区域失去输入焦

点

focus

文本区得到输入

焦点

change

文本区修改并失去当

前输入焦点

select

文本区中的文本被选

中

按钮

click单击按钮

blur按钮失去焦点

focus按钮得到焦点

mousedown用户鼠标左键单击

mouseup用户鼠标右键单击

提交

click单击提交按钮

blur提交钮失去焦点

focus提交钮得到输入焦点

复位

click

单击复位键

blur复位钮失去输入焦点

focus复位钮得到输入焦点

单选钮

click单击单选钮

blur单选钮失去输入焦点

focus单选钮得到输入焦点

复选框

click单击复选钮

blur复选钮失去输入焦点

change复选钮得到输入焦点

文件上装

blur

文件上装窗体元素失

去输入焦点

focus

文件上装窗体元素得

到输入焦点

change用户选择上装文件

选项

blur

选择元素得到当前输

入焦点

focus

选择元素得到当前输

入焦点

change

选择元素被修改并失

去当前输入焦点

例如，假设要处理与用户移动鼠标经过特定链接相关联的事件，可以将

链接与事件处理代码连接如下：

code”>

textassociatedwithlink

onMouseOver表示这个事件处理器与mouseOver事件相关联，实际

代码放在引号中。如下程序是一个使用onMouseOver属性的例子。

程序清单4.1

ExampleEventHandler

onMouseOver=

”alert(‘LinktotheMasteringJavaScriptandJscriptHomepage.’)”>moveyourmouse

overthislinkandapopupwindowisdisplayed.

其中JavaScript事件处理代码为：

alert(‘LinktotheMasteringJavaScriptandJscriptHomepage.’)

是用字符串\"LinktotheMasteringJavaScriptandJscriptHome

page.\"调用窗口对象的alert()方法，alert()方法显示一个具有指定文本的弹

出窗口。这个例子的在窗口中的表现形式是，鼠标未移到链接之前时，显示的是

一个代码定义的Web页面，当鼠标指向链接时（即处理mouseOver事件后），显

示一个弹出菜单。如果单击这个链接，则不会显示弹出窗口，因为Click事件是

由另一事件处理的，这个事件处理器由onClick属性指定。

mouseOver的属性是onMouseOver，该事件启动的JavaScript代码作为

onMouseOver属性的值提供。一般来说，事件处理属性名由事件名前面加上on

字符组成。属性名是大小写无关的，即可用onMouseOver、onmouseOver、

ONMOUSEOVER或其他大小写组合。

注意：IE只有在事件属性用大写时才处理事件。

表JSP88表4.2列出了事件处理属性。

事件处理程序表示和时处理

onAbort用户中断图形装入操作时

onBlur窗口,文档,帧组,窗体元素失去当前输入焦点

onChange窗口,文档,帧组,窗体元素因修改而失去当前输入焦点

onClick单击链接客户机方图形映射区或窗体

onDbclick双击链接,客户机方图形映射区或文档

onDragDrop将对象拖放到窗口或帧时

onErroe窗口,文档,帧组或窗体装入时出错

onFocus窗口,文档,帧组或窗体得到输入焦点时

onKeydown用户按键时

onKeypress用户按键并放开键时

onKeyup用户放开键时

onLoad装入图形文档或帧组

onMouseDown用户按鼠标时

onMouseMove用户移动鼠标时

onMouseOut鼠标移出链接或客户机方图形映射区

onMouseOver鼠标经过链接或客户机方图形映射区

onMouseUp用户放开鼠标时

onMove用户移动窗口或帧时

onRest用户单击窗体复位链接或复位窗体时

onResize用户缩放窗口或帧时

onSelect文本区或文本字段的文本被选中

onSubmit提交窗体

onUnload用户退出文档

三、处理JavaScript事件

1．插入事件处理属性值代码

要处理表4--1（JSP84）中所示的JavaScript事件，只要在相应HTML

标志中包括该事件的事件处理属性，然后指定属性值为事件处理JavaScript代

码。程序清单4.1显示了一个例子。首先介绍插入事件处理属性值代码的最佳办

法。

通常，可以插入事件处理属性值的任何JavaScript代码，但如果属性值用双引

号括起，则事件处理代码中要使用单引号；如果属性值用单引号括起，则事件处

理代码中要使用双引号。多个JavaScript语句必须用分号分开。程序清单4.2

了在事件处理属性中插入多个语句的事件处理器的例子。

插入多个语句的事件处理器

ONMOUSEOVER=’++count;

alert(“Youmovedyourmousehere“+count+”times!”)’>Displaysthe

numberoftimesyoumoveyourmouseoverthislink.

程序中，文档头中将变量计数初始化为0，onMouseOver事件处理器包括

下列语句：

++count;alert(“Youmovedyourmousehere“+count+”times!”)

显示如下

两个语句要用分号分开，第一个语句++count在每次鼠标经过链接时递

增1，第二个语句生成弹出窗口，向用户显示信息：

Youmovedyourmousehere3times!

作为一种好习惯,最好用一个函数调用作为事件处理属性的值,使事件处

理代码更易调试、更易模块化、更易在其他Web页面中反复使用.下列程序清单

4.3显示了通过单个函数调用访问更复杂的事件处理器。

用函数调用事件处理器

onMOUSEover=”confirmLink()”>

Confirmswhetheryouwanttoconnectviathislink.

confirmlink()函数在文档头中定义，是文档主体中所定义链接的

onMOUSEover事件和事件处理器。confirmlink()函数调用当前窗口的alert()

方法，显示警告信息：

Thecontentsofthislinkmaybeobjectionabletoanyoneovertheageof

ten.

然后它用当前窗口的confirm()方法确定用户年龄。显示一对话框，其

信息为：

Areyoutenyearsoldoryounger?

及OK和Cancel按钮，由用户来确定。如果用户单击Cancel按钮，则

confirm()方法返回假值，不进行进一步的操作；如果用户单击OK按钮，则则

confirm()方法返回真值，当前窗口的location属性设置为新的URL。这样用户

没有单击新的链接就可以新装入文档。事实上，Web文档主体中按钮的目标只是

个虚拟的URL撃车刂窋，但这个按钮的单击通过设置onClick事件处理器返回假

值而关闭。返回假时，则取消与单击事件相关的操作。

在程序4.3中，onMOUSEover事件处理器是通过调用confirmLink()函数

完成的，而不必用引号或将所有语句放在属性值中而开发confirmLink()函数，

从而可获得这个事件处理器更整洁的实现版本。

2．处理链接事件

这里先对链接事件处理过程作一个完整介绍，然后再处理与其他HTML

元素相关联的事件。

与链接相关的事件有9个，见表4--9（4.1）。从前述的例子中可知

onMOUSEover事件用于在用户单击前提供警告或其他信息。还有另外两个常用的

与链接相关联的事件是onMouseOut和onClick。

链接事件onMouseOut类似于onMOUSEover事件，只是在鼠标离开链接时

触发，而不是在其到达时触发。即，onMouseOut事件处理器一般在鼠标离开链

接后，显示提示信息。下列程序（4.4）提供了onMouseOut事件处理器的例子。

onMouseOut事件处理程序4.4

HandlingonMouseOutforlinks用函数调用事件处理器

Tellsyouwhy

youshouldconnecttothislink.

程序中advertiseLink()函数在文档头中定义，并设置为ONMOUSEOUT事

件和事件处理器，在HTML文档主体中定义的链接中设置。用户将鼠标移出链接

时，调用advertiseLink()函数。advertiseLink()函数首先通过alert()方法告

诉用户ACMEWidget公司下在五折销售其产品，然后用comfirm()方法询问用户

是否要访问ACMEWidget公司的页面。若用户单击OK钮，则advertiseLink()

函数将窗口的地址设置为ACMEWeb页面地址。如果用户单击Cancel按钮，则终

止事件处理过程。

第三个链接事件处理属性是onClick,允许用专用方式处理超链接单击。

如果onClick事件处理器返回值false，则取消与单击相关的操作，这里就是链

接新文档，这使onClick事件处理器可以要求用户确认或拒绝继续访问链接。下

例程序（4.5）是这类onClick事件处理器的例子。

处理链接的onClik程序4.5

HandlingonClickforlinks用函数调用事件处理器

ONCLICK=”returnconfirmLink()”>Asksyoutoconfirmyourselectionof

thislink.

confirmLink()函数在文档头中定义，告诉用户选择了Mastering

JavaScript主页，然后询问用户是否要链接该主页，显示信息为：

“Areyousureyouwanttoloadthisdocument?”

和OK及Cancel按钮；最后返回confirm()方法的结果。

注意：在onClik事件处理器中，并没有直接调用confirmLink()函数，

而是作为return语句的一部分调用：

returnconfirmLink()

这是因为confirm()和confirmLink()函数的返回值，必须传递到调用事

件筛器之处，以便通过传递false值取消与链接单击相关的操作。如果删除

return语句而直接调用confirmLink()函数，这时就不能再选择取消链接了。

3．处理窗口事件

窗口事件即适用于包含文档主体和产生显示的普通HTML文档，也适用于

将文档主体放在帧组中的布局文档（布局文档用于通过帧组织其他文档的显示）。

这介绍与这两种文档相关的事件处理。

下列程序（4.6）显示了普通可显示HTML文档的onLoad和onUnload事

件处理首次装入文档时，显示提示信息\"Hello！\"和OK确认按钮；退出窗口而不

退出浏览器时显示提示信息\"ByeBye!”和OK确认按钮。

在内容文档中处理装入事件程序4.6：

Handlingloadeventsinacontentdocument在内容文档中处理装入事

件

Thisdocumenthasabodyandisdisplayedintypicalfashion.

onLoad事件处理常用于Java或插入件的Web页面，进行必要的初始化

或播放语音文件、动画序列等，使页面入口更精彩。onLoad事件处理器完成类

似的功能，例如，终止Java小程序或插入件的打开，或采用戏剧性的退出方式。

下面给出如何在文档中使用onLoad和onUnload事件。

在布局文档中处理Load事件程序4.7

COLS=”*.*”ONLOAD=”selectFrames()”ONUNLOAD=”alert(‘Thanksfor

stoppingby!’)”>

程序中的HTML文档定义了selectFrames()函数，它负责处理onLoad事

件。介绍selectFrames()函数完成的过程之前，先介绍文档的帧组成部分发生

的事件。帧组标志指定文档中要包含的两个帧，帧组成两列，第一个帧名为

firstName，第二个帧名为secondFrame，开始时，两个帧显示相对URL

frames/处的文档，帧组标志的onLoad属性指定selectFrame()函数负

责处理与帧装入相关联的事件。OnUnload事件只是在帧组退出时显示\"Thanks

forstoppingby!\"和OK按钮。

selectFrame()函数函数随机装入两个新文档到firstFrame和

secondFrame中，newFrames数组包含5个文档名，文档从清单中随机选出，用

Math对象的random()和round()方法计算newFrames数组的索引号。firstFrame

和secondFrame的loction属性设置为随机选择文档。

装入程序4.7时，它打开两个帧的文档，左右两帧最初都设置为灰色。

一旦装入了文档，即产生onLoad事件，并调用selectFrames()函数，从而装入

图4.13（JSP95）所示新文档，分为左右两帧，左帧显示WhiteFrame，右帧显

示YellowFrame。退出文档时，显示消息\"Thanksforstoppingby!”和OK按

钮。

onLoad和onUnload事件分别在文档开始装入或结束退出时产生，而

onFocus和onBlur事件则可以在装入文档时触发多次。OnFocus事件通常用于将

文档恢复为缺省开始状态，或继续以前中断的进程。OnBlur事件用于中断页面

上正在进行的过程，如播放语音文件或动画，然后再激活新的页面或当前页面的

新区域。程序4.8到程序4.10显示了使用onLoad和onUnload事件处理器的例

子。帧按列顺序组织。

程序4.8定义帧组（）

程序4.9处理帧的onBlur和onFocus()

BGCOLOR=”#FF0000”>

Document1

程序4.10显示新的背景颜色（）

Document2

文件是本例的核心，装入这个文件时，显示一个桔红色的标题。

文档主体标志指定用事件处理器gotFocus()和lostFocus()来处理onFocus和

onBlur事件。文档头定义这些函数。gotFocus()函数设置文档使帧的背景颜色

为白色，lostFocus()函数设置文档使帧背景颜色返回原先的颜色。

结果是在帧组的原始状态下，当得到输入焦点属性时，第一个帧的背景

变成白色。

文件是个简单的文档，只显示标题和深粉红色背景，它与

形成了对比。

4．处理图形事件

图形事件用于监视图形装入的过程。通常，图形是Web文档中装入时间

最长的元素。在许多应用程序中，一定要知道图形何时装入，是处于装入过程中？

还是中断了装入过程？图形事件提供了这些功能。onLoad事件发生在图形装入

并在完成时显示。许多情况下，如在图形映射应用程序中同一定要等待onLoad

事件发生后才能做进一步的处理。为onAbort和onError事件用于响应装入过程

中可能发生的异常。程序4.11演示了这些事件的处理功能的使用。

程序4.11图形事件处理（）

ImageEventHandling图形事件处理

Animageisloadedafterthisparagraph.

onLoad=”imageLoaded()”

onAbort=”imageAborted()”

onError=”imageError()”>

程序4.11所示的文档显示了一行标题，包含一行文本的段和一个图形。

图形的事件处理器响应onLoad、onAbort和onError事件。OnLoad事件用

imageLoad()函数处理。图形装入后，imageLoaded()函数将文档背景颜色变成白

色，并在浏览器窗口底部显示状态消息，指示图形名和表示图形已经装入。

onAbort事件在用户终止图形装入时发生，例如单击Stop按钮，或选择

新文档。该事件由imageAborted()函数来处理，它告诉用户图形装入操作已经

被终止。本例显示信息：“Heyyoujustabortedtheloadingofthelast

image!”和OK按钮。

onError事件在图形装入出错时发生，这类错误的常见例子是，Web浏览

器无法找到所要的形。OnError事件由imageError()函数处理。它显示一个提示

信息框。本例当图形文件从指定位置移走时，显示信息：\"Errorloadingimage!”

和OK按钮。

6．处理图形映射事件

图形映射是许多Web页面上常见功能，图形映射由分布在不同区域的图

形组成。用户单击某个区域时，可以连接与该区域相关联的URL。使得图形映射

可以根据用户单击显示不同的图形。图4.20总结了图形映射的基本机制。

JavaScript支持两种图形映射：服务器方图形映射和客户图形映射。先出现

的是服务器方图形映射，即大部分处理过程是在服务器上进行的，服务器中

包含定义图形各个区和将这些区域与特定URL相关联的映射文件。用户单击

某个区时，该区的坐标传入Web服务器，服务器能确定所选的区，并返回与

该区相联的URL。然后用户浏览器连接到这个URL。图4.21演示了服务器

方图形映射的过程。

客户方图形映射是服务器方图形映射的巨大改进。这里，映射

文件不是放在服务器上，而是嵌入到浏览器的HTML文件的映射元

素中，使浏览器能够确定用户所选的映射区并选择目标URL。图

4.22总结了客户方图形映射的过程。

***图形某个区域

(1)浏览器

***

JavaScript提供了支持处理客户方图形映射的事件处理功能。支持图形

映射的事件和支持链接的事件相同，如表4.3所示。这些事件使特定映射区的用

户图形映射单击和鼠标移动可以采用用户处理程序。

注：要使用onMouseOver、onMouseOut和onDblClike事件及AREA标志，

应设置HREF属性，否则这些事件无法正确工作。

程序4.12是一个处理onMouseOver、onMouseOut事件的例子，文档显示

一个标题和一个用作客户方图形映射的图形。（其中图形的USEMAP属性设置为

#blockman，是映射标志所描述的图形映射名。图形映射中使用的图形是

，如图4.23所示。其中还显示了图中各个点的坐标，这些坐标用

于建立映射标志中包括的区域标志参数。）

程序4.12图形映射事件处理（ch04—）