1.3　JavaScript语言

JavaScript是一种嵌入在HTML文件中的脚本语言，它是Netscape公司提出的一种跨平台的、基于对象的脚本语言，能对诸如鼠标单击、表单输入、页面浏览等用户事件做出反应并进行处理。由于JavaScript是用于响应用户的请求的程序操作，为网页添加动态功能，通常也称为动态网页编程DHTML。JavaScript由三部分组成：JavaScript核心语言、JavaScript客户端扩展、JavaScript服务器端扩展。

JavaScript核心语言部分包括了JavaScript的内建的基本语法（操作符、语句、函数）和一些JavaScript的内建对象（如Array, Date、Math对象），这些基本语法客户端和服务器端都可以使用。

1.3.1　数据类型与常量

每一种计算机语言都有自己所支持的数据类型。在JavaScript语言中采用的是弱类型的方式，即一个数据（变量或常量）不必首先作声明，可以在使用或赋值时再确定其数据的类型。当然也可以先声明该数据的类型，即通过在赋值时自动说明其数据类型。在JavaScript脚本中的几种数据类型如下。

1.数值型

JavaScript语言和其他程序设计语言（如C和Java）的不同之处在于所有的数字都是由浮点型表示的。JavaScript采用IEEE754标准定义的64位浮点格式表示数字，这意味着它能表示的最大值是±1.797693 134862 3157×10308，最小值是±5×10-324。

当一个数字直接出现在JavaScript程序中时，我们称它为数值直接量（numeric literal）。JavaScript支持数值直接量的形式有整型和浮点型。

（1）整型数据：整数常量分为十进制、八进制和十六进制。其中，十进制的整数是由0～9的数字序列表示，例如：0、7、-8、1000等；八进制的整数是由0～7的数字序列表示，并且首位必须为0，例如：0124，-075等；十六进制的整数是由0～9、A～F（a～f）的数码序列表示，并且前两位必须是0X或0x，例如：0x254，-0X77，0XBC。

（2）浮点型数据：浮点型数据可以具有小数点，采用的是传统科学计数法的语法。一个实数值可以表示为整数部分后加小数点和小数部分。还可以使用指数法表示浮点型数据，即实数后跟随字母e或E，后面加上正负号，其后再加一个整型指数。这种计数法表示的数值等于前面的实数乘以10的指数次幂。例如：12.5、5.32e5、314E-3。

此外，JavaScript用了一个特殊的数值常量NaN（非数字）表示无意义的数学运算结果。

2.字符串型

字符串用于表示文本数据，由若干个字符组成的序列组成，包括了数字、字母或者其他可显示字符以及特殊字符，也可以包含汉字。字符串型数据使用双引号或单引号表示，如表1.3.1所示。

表1.3.1　字符串示例

3.布尔型

布尔数据类型，又称逻辑型，只有两个值，这两个合法的值分别由直接量true和false表示。一个布尔值代表的是一个“真值”，它说明了某个事物是真还是假。当把布尔型true和false转换成数值时，分别用1和0表示。

4.特殊数据类型

除了以上介绍的数据类型，JavaScript还包括一些特殊的数据类型，如转义字符、未定义值等。如表1.3.2所示。

表1.3.2　特殊字符

1.3.2　JavaScript中的变量

1.变量定义

虽然JavaScript支持变量未经定义直接使用，但建议对变量定义，否则变量的生命周期难以确定。

在定义变量时，因为JavaScript为弱类型语言，所以不需要指定变量类型，只需要指定变量名称，也可以为变量赋初始值。定义变量时可以使用var关键字。例如：

【例1.3.1】用var关键字定义变量。

JavaScript变量的命名规则如下。

（1）必须以字母或下划线开头，中间可以是数字、字母或下划线。

（2）变量名不能包含空格或加号、减号等符号。

（3）不能使用JavaScript中的关键字。

（4）JavaScript的变量名是严格区分大小写的。例如，UserName与username就代表两个不同的变量，这一点一定要特别注意。

2.变量的类型

在JavaScript中常见的内置变量类型如下。

（1）数字型：可以存储小数或整数。

（2）字符串型：属于引用类型，可以存储字符串。

（3）布尔型：可以存储true或false。

（4）数组：属于引用类型，存储多项数据。

如果要将字符串转换成数字类型，可以使用parseInt或parseFloat方法，如果无法转换为数字，则JavaScript会返回特殊值NaN。

例如：

3.注释与特殊符号

JavaScript语言中的注释使用单行注释（//）与多行注释（/*……*/）两种方式，注意：不能在JavaScript内部使用HTML语言中的＜！——＞注释。

在JavaScript中字符串可以使用双引号或单引号引起来，在不引起冲突的情况下可以混用，也可以使用反斜杠进行转义。

例如：

（1）JavaScript运算符。

JavaScript运算符大致分为算术、关系、逻辑、位操作、赋值、条件等。

（2）算法运算符。

在JavaScript中算术运算符的操作数和计算结果都是数值型，如表1.3.3所示。

表1.3.3　算术运算符

（3）关系运算符。

关系运算符（比较运算符）对操作数进行比较，返回一个布尔值，如表1.3.4所示。

表1.3.4　关系运算符

（4）逻辑运算符。

逻辑运算符的操作数和计算结果都是布尔值，如表1.3.5所示。

表1.3.5　逻辑运算符

（5）位操作运算符

位操作运算符用于对整数的二进制位进行操作，计算结果仍为整数，如表1.3.6所示。

表1.3.6　位操作运算符

（6）赋值运算符。

最基本的赋值运算符是等于号=，用于对变量进行赋值，而其他运算符可以和赋值运算符=联合使用，构成组合赋值运算符，如表1.3.7所示。

表1.3.7　赋值运算符

（7）条件运算符。

JavaScript支持一种特殊的三目运算符，称为条件运算符。其格式如下：

如果condition为真，则表达式的值为true＿result子表达式的值，否则为false＿result子表达式的值。

（8）其他运算符。

JavaScript还包含几个特殊的运算符，如表1.3.8所示。

表1.3.8　特殊运算符

1.3.3　JavaScript流程控制语句

1.if语句的语法结构

if语句的语法结构如下：

例如：输入两个变量m、n，并求出两个变量的最大值。

部分代码如下：

2.switch语句的语法结构

switch语句的语法结构如下：

例如：李白笔下的“飞流直下三千尺，疑是银河落九天”指的是哪个风景区？A、庐山B、香山C、华山D、恒山。

部分代码如下：

在switch语句中用到了break语句，即当程序执行到break语句时就直接跳出switch语句。另外，还有continue语句，但注意它只能用在循环体中，其作用是跳出循环体中未执行的语句，结束本次循环，然后跳至求循环判定式，决定是否继续循环。

continue语句和break语句的区别是，continue语句只是结束本次循环体的执行，而break语句则是结束整个循环语句的执行。

3.for语句的语法结构

for语句是最常用的循环语句，通常使用一个变量作为计数器来指定重复执行的次数，for语句的语法结构如下：

例如：计算1+2+……+50的和。

部分代码如下：

4.while语句的语法结构

while语句是另一种基本的循环语句，语句的语法结构如下：

例如：使用while语句计算1+2+……+50的和。

部分代码如下：

5.do while语句的语法结构

do while语句是while语句的变形，语法结构如下：

例如：使用do while语句计算1+2+……+50的和。部分代码如下：

6.对象操作语句的语法结构

（1）for……in语句。语句的语法结构如下：

该语句用于对已有对象实例的所有属性进行循环控制操作。它将一个对象实例的所有属性反复置给指定的变量来实现循环，而不是使用计数器来实现的。

（2）with语句。语句的语法结构如下：

该语句可用于简化对象方法的引用，使其成为默认对象。当脚本中要引用对象的方法时，在方法名前通常要写对象名，如果要引用某子对象的方法，则对象名会很长，用with来引用对象方法使编程简化。

例如：用for……in语句例举Document对象的所有属性。

7.注释语句

注释可以增加程序的可读性，所以应适当在程序中加注释。JavaScript的注释语句与Java相同，有以下两种。

（1）双斜线//注释一行。

（2）通过符号/*和*/注释多行。

如：var authorName=Zhouxingo；//定义作者名并初始化

又如：/*这是关于JavaScript的变量定义与命名例子，其中authorName是作者名*/

1.3.4　JavaScript函数

函数是一种能够完成特定功能的代码块，可以被调用。JavaScript中的函数同时具有函数和过程的双重功能。也就是说，JavaScript不区分函数和过程，只有函数。函数完成一定功能可以有返回值也可以没有，这与VBScript不同。JavaScript中的函数分为自定义函数和全局函数。

1.自定义函数

JavaScript自定义函数用于封装那些在程序中可能要多次用到的功能块。首先自定义函数，然后通过调用函数实现程序功能。

（1）定义自定义函数。

格式：

其中：“形参列表”是向函数传递数据；“语句组”是函数所要完成功能的JavaScript代码。如果需要返回值给调用语句，可使用可选项return语句。

（2）调用自定义函数。

在JavaScript中调用函数有两种方式：一是直接写函数名并在函数的形参列表处列出实参；二是将函数名直接写在表达式中实现调用。

【例1.3.2】自定义函数的运用举例。

程序代码如下：

程序执行结果：1+……+50的累加和值=1275。

2.全局函数

JavaScript全局函数是指与JavaScript中的任何对象没有发生关联的那些函数。全局函数在脚本编写时常用于完成数据类型转换等功能。

（1）escape和unescape函数。

格式：escape（字符串）unescape（字符串）

功能：两个函数分别对字符串进行编码和解码工作。escape（）函数采用ISO-Latin-1字行集对字符串进行编码；unescape（）可对其进行解码。

（2）eval函数。

格式：eval（字符串）

功能：执行“字符串”的功能。“字符串”可以是可执行语句，也可以是一个表达式。

（3）isNaN函数。

格式：isNaN（表达式）

功能：用于判断表达式是否是一个数值类型的数据。

（4）Number和String函数。

格式：Number（对象）String（对象）

功能：两个函数分别用于将指定对象转化为数值或字符串。如果对象不能转换为数值，则Number函数返回NaN。

（5）parseInt和parseFloat函数。

格式：parseInt（字符串）parseFloat（字符串）

功能：两个函数分别用于将字符串转换化为整数和浮点数，常与表单配合使用。

1.3.5　JavaScript的对象

JavaScript是一种基于对象的脚本语言，由于JavaScript提供大量的对象，用户可以方便地编写出功能强大的脚本。JavaScript的对象可以分为JavaScript内置对象、浏览器对象（文档对象模型DOM）和自定义对象。JavaScript内置对象属于JavaScript的核心语言部分，它在客户端和服务器端都发挥着重要的作用。浏览器对象指DOM文档对象模型对象，应用于客户端，JavaScript通过DOM向Web浏览器提供功能接口，属于JavaScript客户端扩展部分。

JavaScript中的对象是由属性（Properties）和方法（Methods）两个基本元素构成的：属性成员是对象的数据，方法成员是对数据的操作。要使用JavaScript对象，可采用三种方式。

（1）创建自定义对象。

（2）引用JavaScript内置对象。

（3）引用浏览器对象（由浏览器环境中提供，也称宿主对象）。

特别注意的是一个对象在被引用之前，这个对象必须存在。也就是说要么利用现存的对象，要么创建新的对象。否则将出错。

1.内置对象

JavaScript内置对象是JavaScript的预定义对象，是JavaScript的核心对象，这些对象功能强，既可以在客户端发挥作用，又可以在服务器端发挥作用。它包括Array、String、Date、Math对象。

（1）Array数组对象。

在几乎所有的高级语言中，数组都是被支持的数据类型，但在JavaScript中，没有明显的数组类型。JavaScript中数组的功能是通过数组对象来实现。

①建立、访问和使用数组。建立数组语法格式如下：

其中数组名是一个标识符，数组长度值是一个正整数。

例如：

第一个语句创建数组时不给出元素个数，则数组的大小由后面引用数组时确定；第二个语句创建数组有10个元素数，数组的下标从0开始，因此下标范围是0～7。

引用数组元素的语法格式为：数组名[下标值]

例如：

②数组对象的属性。Array对象只有一个属性length，通过对象的实例stu引用其属性length就可获得对象实例的长度。如stu.length。

③数组对象的方法。Array对象提供了许多方法主要有：

●join（）：该方法返回由数组中所有元素链接而成的字符串；

●sore（）：该方法可将数组的元素排序；

●reverse（）：该方法可以将数组中元素颠倒顺序。

【例1.3.3a】Array对象的应用。

程序代码如下：

（2）String对象。

JavaScript提供了字符串对象（String）。在JavaScript中每个字符串都是对象，并且字符串变量也可以使用String对象的属性和方法。

①创建String对象实例。创建String对象实例的语法是：

var String对象实例名=new String（string）；或var String对象实例名=字符串值；

例如：

字符串变量在使用String的属性和方法时，JavaScript会自动将字符串变量生成一个字符串临时对象，然后再调用临时对象的属性和方法，调用完成后又将其删除。

②String对象属性。String对象只有一个属性length。

③String对象的方法。String对象的方法共有19个，常用的有下面几个。

●toUpperCase（）：将字符串字母全部转换为大写字母。

●toLowerCase（）：将字符串字母全部转换成小写字母。

●indexOf（子字符串）：该方法是返回参数“子字符串”在字符串对象中的位置。

如果在字符串对象中存在“子字符串”，则返回其第一个子字符串的位置，否则返回-1。例如：

●lastindexOf（子字符串）：该方法与indexOf（）类似，差别在于它是从右往左查找。

●charAt（位置）：该方法返回字符串对象中“位置”参数所指的那个字符，其中位置为正整数或0。注意字符串中字符位置从0开始计算。

●Substring（位置1，位置2）：返回从“位置1”到“位置2”之间的字符串。

【例1.3.3b】string对象的应用。

程序代码如下：

（3）Date日期时间对象。

Date对象封装了有关日期和时间的操作，它有大量处理日期时间的方法但没有属性。

①创建Date对象实例。创建Date对象实例的语法格式：

var Date对象名=new Date（参数）；

参数可以是以下的任一种形式：

●当前日期和时间（无参数）。例如：

●将年、月、日、时、分、秒的值都设为整数的参数形式。例如：

②Date对象方法。提供了大量的方法来取得或设置日期对象中的年、月、日、小时、分、秒等。如：getYear（），getMonth（）……，getSeconds（），setYear（年）……，setSeconds（秒）等。

（4）Math对象。

Math对象封装了常用的数学常数和运算，包括三角函数、对数函数、指数函数等。Math对象不需用new创建实例，它本身就是一个实例，由系统创建，称之为“静态对象”。

Math对象常见的属性及其含义见表1.3.9。

表1.3.9　Math对象属性表

Math对象常见的方法及其含义见表1.3.10。

表1.3.10　Math对象常用方法表

【例1.3.3c】Math对象的应用。

程序代码如下：

2.浏览器对象

浏览器对象是JavaScript中定义而由浏览器提供的对象。浏览器对象指文档对象模型（DOM）中的浏览器端对象，也称宿主对象。当用户用浏览器打开一个页面时，浏览器会自动创建DOM中的一些对象，即浏览器对象，这些运行在浏览器端的对象存放了HTML页面的属性和其他的相关信息。运用浏览器对象可以对浏览器中的各元素进行控制，如对窗口的操作、对HTML文档的操作等。浏览器对象（DOM模型）属于JavaS-cript客户端扩展部分。

DOM是一个庞大层次体系结构，Window对象在层次结构中位于最高一层，其他Document对象、Location对象、history对象、navigator对象等都是它的子对象。在DOM中每个对象都是它的父对象的属性。在JavaScript中，如果要引用某个对象的属性必须通过整个对象属性的完整路径来进行引用，即要指明这个对象属性的所有父对象。如Form1表单中TextBox1字符串的完整引用应是：

下面介绍DOM中几个重要的浏览器对象。

（1）Window对象。

Window对象表示浏览器中的窗口。在浏览器打开时产生并存放着浏览器整个窗口的属性，例如各种工具条的设置、浏览器的外观设置、Document对象、Location对象、History对象、Link对象、Anchor对象、From对象等。此外，Window还有很多方法和事件。

①Window的属性。

Window的属性有defaultStatus（状态栏中默认显示的信息）、Status（窗口下部状态条），name（窗口名称）、self（当前窗口）、top（第一个窗口）、parent（引用框架时的父窗口）、opener（打开当前窗口的那个窗口）、timeout（窗口内的定时器）、Document、Lo-cation、History、Link、Anchor等属性，它们既是Window的属性也是Window的子对象。

Closed属性可以用来判断一个窗口是否被关闭；opener属性可用来记录其父窗口中的信息（窗口由open（）方法打开）。因此通过opener属性和open（）的返回值可以在父子窗口之间建立联系实现窗口互操作。如：用Window.Document.write（window.opener.location）可以获得并显示父窗口文档的URL信息；用Window.Document.write（window.location）；可以分别获得并显示子窗口文档的URL信息。

②Window的方法。

Window的方法有Open（打开一个具备某种属性的窗口）、close（关闭某窗口）、a-lert（显示一个警告框）、confirm（显示一个请求确认的对话框）、Prompt（显示一个消息，并提示用户输入）、settimeout（定时器）、cleartimeout（清除定时器）、scroll（使窗口滚动）、focus（激活一个窗口）、blur（使一个窗口失去激活态）等。这些方法常常用来完成与用户的交互。

●Open（）方法。

Open（）方法格式：Open（“页面URL”，“窗口名称”，“窗口属性列表”）

如下所示代码打开了一个窗口：

该窗口页面是1.htm，窗口名myWindow，窗口高350，宽500，有工具栏、地址栏、目录按钮、状态栏、菜单条和滚动条。

●close（）方法。

close（）方法用来自动关闭一个窗口。如myWin.close（）可关闭刚打开的myWindow窗口。

●项目符alert（字符串）方法

可弹出—个带“字符串”信息的警告框，如图1.3.1所示。代码如下：

●confirm（）方法。

confirm（字符串）方法可弹出一个带“字符串”信息的确认框。如图1.3.2所示。该方法执行后会返回一个布尔值，单击“确定”按钮返回true，单击“取消”按钮返回false。代码如下：

●Prompt（）方法。

Prompt（字符串，默认值）方法用于弹出一个带“字符串”和“默认值”的输入框，如图1.3.3所示。若用户输入文本后单击“确定”按钮，则返回用户输入的字符串；单击“取消”按钮，则返回null值。代码如下：

③Window对象常见的方法和属性。

Window对象常用的定时任务类、交互对话类、窗口操作类的方法和常见的属性如表1.3.11所示。

表1.3.11　Window对象常见的方法和属性

【例1.3.4a】Windows对象应用实例：测试窗口互操作。

程序代码如下：

【例1.3.4b】Windows对象应用实例：测试子窗口与父窗口的信息。

程序代码如下：

程序执行结果如图1.3.4所示，当单击图中的两个按钮时可测试窗口互操作。

【例1.3.4c】Windows对象应用实例：窗口移向左上角。

1-3-64c. htm程序代码如下：

程序执行结果：当前的窗口将移向左上角。

（2）Document对象。

Document对象代表浏览器当前浏览的HTML文档，它是Window对象的一部分，也是Window对象的子对象，在层次结构中位于最核心的地位。Document对象代表着当前的整个页面，页面上的对象都是Document的子对象，所包含的属性是整个页面的属性，存储着当前页面的各类信息，如页面的前景和背景色、页面中的表单、锚标、图像等对象。还可以向页面动态添加文本和各种标签。

①Document的属性。

Document的属性主要有：Location（文档的URL）、Title（Html中＜Title＞定义的标题）、Referrer（当前页指向的URL）、LastModified（文档最后更新的日期）、Form（页中的表单）、Anchors（页中的链接点）、Link（页中的链接）、Image（页中的图像）、BgColor（背景色）、FgColor（前景色）、LinkColor（超链接点未访问前颜色）、VlinkColor（超链接点访问后颜色）等。

②Document的方法。

Document的方法主要有：Write（写HTML文本）、Writeln（写HTML文本，末位带换行符）、Open（打开一个流）、Close（关闭一个流）、Clear（清除文档内容）。

Document对象还有3个重要方法如表1.3.12所示。getElementById（）方法可以通过ID访问Document中的某一特定元素；getElementsByName（）方法可通过Name属性值来获得对象数组；getElementsByName（）方法可通过TagName（标签名称）来获得元素数组。

表1.3.12　Document对象的3个重要方法

【例1.3.5a】Document对象的应用实例：改变颜色。

1-3-65a. htm程序代码如下：

程序执行结果如图1.3.5所示，单击图中的两个按钮时可改变背景及前景的颜色。

【例1.3.5b】Document对象的应用实例：倒计时窗口。

1-3-65b. htm程序代码如下：

程序执行结果：倒计时页面将会在10秒后转到新的窗口。以上程序是通过读写对象innerHTML属性来完成页面倒计时功能。

（3）History对象。

History对象是Window对象的子对象，它包含了客户端浏览器上过去访问URL地址的信息；History对象用数组的方式记录访问过的URL信息。使用该对象可以获得最近访问过的URL地址。运用该对象的Back（）和Forward（）方法可以模拟浏览器工具栏中的“后退”和“前进”按钮的功能。

History对象的属性只一个length，其中记录了当前浏览器访问历史记录的数量。

History对象方法有三个：Back（）、Forward（）和Go（参数值）。

（4）Location对象。

Location对象存储着当前浏览器访问页面的URL地址。利用该对象可以对这个URL地址进行分析、将页面刷新或将页面导航到指定的地址。Location对象作为Window对象的子对象，也是Window对象的一个属性，但它自身同时又带有属性和方法。

①Location的属性。

Location的属性有protocol（使用的协议）、host（主机名称）、port（端口号）、path-name（页面路径）、hash（锚标）、search（搜索信息）、hostname（主机名称与端口号）、href（整个URL地址）。一个站点完整的URL地址由以下几部分组成：协议名称：//主机名称：端口号/页面路径/文件？搜索信息。利用该对象可以分析URL地址的各个组成部分。

②Location的方法。

●assign（URL地址）方法：可将页面导航到另外一个地址。如下面的代码可将页面导航至www.fzu.edu.cn站点下的index.html文档处。例如：

●Reload（）方法：用于刷新页面。如可以定义一个按钮，当单击按钮时执行location.reload方法，即可刷新页面。

Replace（URL地址）方法：用URL地址所指的页面代替当前页面。

【例1.3.6】Location与History对象的应用实例。

1-3-66. htm程序代码如下：

程序执行结果如图1.3.6所示。

（5）Form对象。

Form对象是Document对象的子对象。Form对象在用户的信息进行交互的网页中起着至关重要的作用，利用Form可以对表单、文本框、按钮、单选框、复选框、文本区等表单元素进行控制与管理。

①Form的属性有下列几种。

●action：指明表单所对应的HTTP服务器CGI处理程序的URL地址。

●elements[]：表单对象中包含的元素，如文本框、按钮、单选框、复选框等，它们可以通过elements[]数组引用。表单中元素下标顺序和它们在HTML文档中的顺序相对应。

●length：表单中元素的个数。

●method：指明访问HTTP服务器的信息处理方式，取值可以是get或post。get表示系统将客户端输入的变量数据附加在action指定的处理程序文件名之后并用？分隔进行传送；post表示系统将客户端输入的变量数据包装后再传送给action指定的处理程序进行保密传送，对传送信息长度不限制。

●name：用于指明表单的名称。

●target：指明了响应页面应该在Frame哪一部分进行显示，该属性值可以是窗口名称或Frame名称，分别代表用以显示反馈信息的窗口或者Frame。

②Form的方法。

form对象的方法有如下两个。

●reset（）：将表单中所有元素值重置为默认值，相当于表单中定义的Reset按钮复位功能。

●submit（）：将表单中输入的数据发送给服务器的CGI程序处理，相当于表单中定义的Submit按钮提交功能。

③Form的事件

Form事件有如下两个。

●OnReset：单击Reset按钮或执行reset（）方法将进行重置时，JavaScript调用该事件函数对其进行处理。若返回值为true，表单中所有元素重置为默认状态；若返回false，则不进行Reset操作。用该事件可以防止误操作。

●OnSubmit：单击Submit按钮或执行submit（）方法向服务器提交表单数据时，JavaScript将调用该事件函数对其进行处理。若返回值为true，将向服务器提交表单数据；返回false，则不进行Submit操作。该事件可用于表单数据提交前进行数据有效性验证。

下面给出一个表单对象与文本框对象的综合应用实例来说明如何在表单的Reset和Submit动作完成之前对文本框输入的数据进行有效性验证。

【例1.3.7】Form对象的属性、方法与事件应用实例。

1-3-67a. htm程序代码如下：

1-3-67b. asp程序代码如下：

在浏览器中运行1-3-67a.htm程序时，当输入图1.3.7中的数据并按提交按钮时，就会弹出“名字不能为空，请重输你的名字……”的警告框，如图1.3.8所示。此时focus（）方法会使姓名文本框获得输入焦点，而select（）方法选中文本框内容，以便用户删除并进行重新输入。

在1-3-67a.htm中我们使用了表单、文本框与单选框对象等。其中文本框对象是表单用来接收用户输入数据的主要方式，可对文本框中输入的数据进行有效性验证。文本框对象的属性有DefaultValue、Form、Name、type、value；方法有Blur（）、Focus（）、handleEvent（）、select（）；事件有OnBlur、OnChange、OnFocus、OnKeyDown、OnKeyUp、OnSelect等。此外还有“文本区”“按钮”“单选框”“复选框”等对象。

在客户端进行数据有效性验证可以帮助表单提交者及时发现错误，进行改正后提交表单；同时可以防止无意义的数据存入数据库；通过有效性验证，服务器端的CGI程序不必处理太多的不合法的表单数据，大大减轻了服务器或网络传输的负担，从而提高了效率。

（6）Screen对象。

Screen对象是Window对象的子对象。存放着有关显示浏览器屏幕的信息。可以通过window.screen访问Screen对象，获取用户屏幕的分辨率等参数，用于检测和修正网页的布局方式及提供智能选择。Screen对象只有属性，常见的属性如表1.3.13所示。

表1.3.13　Screen对象常见的属性

【例1.3.8】Screen对象应用实例：检测用户屏幕分辨率与跳转。

1-3-68. htm程序代码如下：

程序执行结果：Screen对象通过检测用户屏幕分辨率，如分辨率过低则认为用户使用移动设备，提示转到特定页面。

3.自定义对象

对象是一种结构，其中有属性、方法；属性可以是与对象相联系的JavaScript变量，也可以是已经定义的其他对象；方法就是一些与对象相联系的JavaScript函数。JavaScript允许用户定义自己对象并使用对象。

（1）自定义对象的定义。

在JavaScript中，建立自定义对象有通过对象初始化创建对象和通过定义对象的构造函数创建对象两种方法。

①通过对象初始化创建对象。其语句如下：

对象名={属性1：属性值1，属性2：属性值2，……属性n：属性值n，}

如建立了一本书名为MyBook的对象，有4个属性：书名，作者，出版社，出版时间。

②通过定义对象的构造函数创建对象。其语句如下：

用构造函数创建对象包括构造对象的属性和定义对象的方法两部分。如“书”对象的定义，其语句如下：

上面的例子定义了“书”对象，book是该对象的构造函数，该对象有4个属性成员：name, author, publisher和date；有一个方法成员print，作用是输出对象的属性值。从这个例子可以看出，定义一个对象首先应定义对象的各个方法成员，每个方法成员就是一个普通函数，然后定义对象的构造函数，其中包含每个属性成员的定义和初始化以及每个方法成员的初始化。构造函数从形式上看与普通函数相同，但有其特殊性：构造函数的名字就是对象的名字，如上面例子所定义的对象的名字就是构造函数book的名字，也就是book。在构造函数中常使用关键字this来为对象的属性成员和方法成员初始化，this本身是一个特殊对象，即当前构造函数正在创建的对象；每个对象都必须定义构造函数。

（2）自定义对象的引用。

引用自定义对象必须先用保留字new创建对象的实例。JavaScript中，对象是对具有相同特性的实体的抽象描述，而对象实例则是具有这些特性的单个实体。创建对象实例的方法是：var对象实例名=new对象名（实参表）；创建对象实例时，要注意实参表与对象构造函数的形式参数表的对应关系。例如：上例定义的book对象创建实例。Var mybook=new book（“语文”“陈林”“人民教育出版社”“2015”）；创建了对象实例后，就可通过该实例引用对象的属性和方法成员。对象属性成员的引用格式是：对象实例名.属性成员名；对象方法成员的引用格式是：对象实例名.方法成员名。

例如：

1.3.6　事件驱动和事件处理

1.事件的概念

事件（Events）是指计算机进行一定操作而产生的结果，用户对页面元素进行一些可被识别的操作。可以是用户事件和系统事件。如将鼠标移到某个超链接上、按下鼠标按钮等都是事件。

事件驱动（Event Driven）指的是事件源，由鼠标、热键或触摸引发的一连串程序的动作（元素）。

事件处理程序（Event Handler）指对事件进行处理的程序或函数代码。

HTML中的JavaScript应用程序通常是事件驱动程序，采用事件驱动（event-driven）是基于对象（object-based）的脚本语言的基本特征。

在JavaScript应用程序中为事件源添加事件处理程序有两种方式：一是在HTML元素中修改元素的特定属性，二是通过JavaScript动态地设置事件处理方法。

JavaScript定义了常用事件的名称、发生对象以及事件处理名，表1.3.14列出了常用的事件及相应的事件处理名。

表1.3.14　JavaScrip常用的事件表

2.加载事件

JavaScript应用程序中要求在页面加载完毕后执行某些JavaScript操作，此时需要使用加载事件。浏览器支持onLoad与onUnload事件。onload事件用于body元素或img元素，表示HTML文档及相关资源全部加载后事件发生。onUnload事件只用于body元素，表示用户离开本页（关闭窗口或跳转）后事件发生。

当应用程序要求在初始化时通过JavaScript修改页面中的某些元素，则需要借助使用Onload事件，同时可防止HTML文档可能还未完全加载就引发异常。

以下加载事件实例表明了可以通过三方面来添加事件处理程序。

（1）通过修改HTML元素的事件属性添加事件处理程序。当希望运行时修改元素属性，可以将JavaScript语句直接作为属性值赋给属性。具体实现如下：

修改属性语法：元素对象.属性=属性值

特殊属性1：样式引用属性Class是保留字需改为Class name；

特殊属性2：属性“innerHTML”代表元素中的内容，不存在于HTML元素中，但可通过JavaScript操作此属性来改变元素的显示内容。

（2）用JavaScript代码为HTML元素添加事件（处理程序）。当希望运行时改变元素行为效果，可以在页面加载完毕后用代码实现特殊显示效果（下拉广告）。

（3）通过修改HTML元素的样式添加事件处理程序。如果希望运行时修改元素的样式，可以通过修改样式语句内容，具体实现如下：

修改样式语法：元素对象.Style样式名=样式值

特殊样式名：注意如果CSS样式名称中含有符号“-”则需将其删除并将其后字母改大写。

【例1.3.9a】通过修改HTML元素的事件属性添加事件处理程序。

1-3-71a. htm程序代码如下：

程序执行结果如图1.3.9所示。单击“获取当前时间”，修改了元素的事件属性，即获取当前时间。

【例1.3.9b】用JavaScript代码为HTML元素添加处理程序。

1-3-72. htm程序代码如下：

程序执行结果如图1.3.10所示。

3.鼠标事件

在JavaScript应用程序中，经常通过在事件处理程序中获取事件源和事件对象来达到事件目的。

最常见的鼠标事件是单击事件，多数可见HTML元素均支持单击事件。事件源即触发当前事件的对象，获取事件源就是在指定事件处理方法时传入this参数。通过事件对象可以获取事件对象属性，即获取当前事件发生时的相关参数，如鼠标位置等属性（如表1.3.15所示）。通常获取事件对象的方式是在调用事件处理方法时传入event参数，以便更好地适应浏览器的兼容性。

常见的事件对象属性如表1.3.15所示。

表1.3.15　常见的事件对象属性

【例1.3.9c】通过在事件处理程序中获取事件源和事件对象实例：body元素在鼠标单击位置显示爆炸动画。

1-3-73. htm程序代码如下：

以上程序为body元素添加了单击事件，在鼠标点击位置显示爆炸动画。为了适应不同的浏览器，使用了语法var鼠标坐标x=event.x？event.x：event.clientX来获取鼠标位置；在点击处的爆炸是通过一系列爆炸图片从图片数组缓存中读取逐帧显示而产生动画效果。

程序执行结果如图1.3.11所示。

除了以上实例运用鼠标单击事件之外，还有双击鼠标事件ondblclick，鼠标移出事件onmouseout，鼠标移入事件onmouseover，双击移动事件onmousemove，鼠标按下事件onmousedown，鼠标松开事件onmouseup，以及鼠标滚轴事件（非标准键盘事件），均可利用事件制作各种移动、滚动、旋转、渐变的动态效果。

此外，还有3类与按键相关的事件：键盘按下事件（onkeydown），键盘松开事件（onkeyup），键盘击键事件（onkeypress）。类似地可用于指定输入，判定按键等操作。

4.表单事件

表单事件包括有焦点事件、内容更改事件、表单提交事件。

（1）表单焦点事件。

表单焦点可用于捕捉输入域获取焦点事件（onFocus）与失去焦点事件（onBlur）。常用于数据验证或突出显示当前操作的输入域（效果）。

常用的实例有：获焦点高亮显示。当输入域未填写，未获取焦点，普通显示“请输入内容：”。一旦有输入，获取焦点，则清空输入域并高亮显示。此外还可以利用焦点在输入域添加灰色文字提示等。

（2）内容更改事件。

内容更改事件（onChange）用于输入框时，为输入框内容改变且失去焦点后触发事件；用于下拉列表框时，为下拉列表框内容改变后触发事件处理。

输入框的应用实例有：将onChange事件用于输入框验证。当用户对输入框内容修改并移走焦点后，则对内容验证和提示。

下拉列表框的应用实例有：将onChange事件用于下拉列表框。当用户对下拉列表框内容修改后获取当前选中的内容，便可根据内容修改网页功能，如改变背景色等。

（3）表单提交事件。

提交表单事件（onsubmit）用于将表单内容提交给CGI程序处理。常用于表单内容合理性验证，如果失败则取消该事件，阻止表单提交。用于下拉列表框时，下拉列表框内容改变后触发事件。最常见的是将onsubmit事件用于输入框数据合法性验证。对用户进行输入框内容验证和提示。

【例1.3.9d】内容更改事件OnChange应用实例：对下拉列表框内容选择，修改网页背景色。

1-3-74. htm程序代码如下：

程序执行结果如图1.3.12所示。