第3章 JavaScript脚本语言

第3章 JavaScript脚本语言

知识点：

（1） 了解什么是JavaScript以及JavaScript的主要特点

（2） 掌握JavaScript语言基础

（3） 掌握JavaScript的流程控制语句

（4） 掌握JavaScript中函数的应用

（5） 掌握JavaScriptc常用对象的应用

（6） 掌握DOM技术

本章概述：

JavaScript是Web 页面中一种比较流行的脚本语言，它由客户端浏览器解释执行，可以应用在JSP、PHP、ASP等网站中。随着Ajax进入Web开发的主流市场，JavaScript已经被推到了舞台的中心。因此，掌握并能熟练应用JavaScript，对于网站开发人员来说非常重要。本章将详细介绍JavaScript的基本语法、常用对象及DOM技术。

3.1 JavaScript概述

3.1.1 什么是JavaScript

JavaScript是一种基于对象和事件驱动并具有安全性的解释型脚本语言，在Web应用中得到了非常广泛的应用。它不需要进行编译，而是直接嵌入在HTTP页面中，把静态页面转变成支持用户交互并响应应用事件的动态页面。在Java Web程序中，经常应用JavaScript进行数据验证、控制浏览器以及生成时钟、日历和时间戳文档等。

2.1.2 JavaScript的主要特点

JavaScript适用于静态或动态网页，是一种被广泛使用的客户端脚本语言。它具有解释性、基于对象、事件驱动、安全性和跨平台等特点，下面进行详细介绍。

1.解释性

JavaScript是一种脚本语言，采用小程序段的方式实现编程。和其他脚本语言一样，JavaScript也是一种解释性语言，它提供了一个简易的开发过程。

2.基于对象

JavaScript是一种基于对象的语言。它可以应用自己创建的对象，因此许多功能来自于脚本环境中对象的方法与脚本的相互作用。

3.事件驱动

JavaScript可以以事件驱动的方式直接对客户端的输入作出响应，无须经过服务器端程序。

说明：事件驱动是指当用户进行某种操作（如按下鼠标、选择菜单等）时，计算机随之作出相应的响应。这里的某种操作称为事件，而计算机作出的响应称为事件响应。

4.安全性

JavaScript具有安全性，它不允许访问本地硬盘，不能将数据写入到服务器上，并且不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失。

5.跨平台

JavaScript依赖于浏览器本身，与操作系统无关，只要浏览器支持JavaScript，JavaScript的程序代码就可以正确执行。

3.2 JavaScript语言基础

3.2.1 JavaScript语法

JavaScript与Java在语法上有些相似，但也不尽相同。下面将结合Java语言对编写JavaScript代码时需要注意的事项进行详细介绍。

（1）JavaScript区分大小写

JavaScript区分大小写，这一点与Java语言是相同的。例如，变量username与变量userName是两个不同的变量。

（2）每行结尾的分号可有可无

与Java语言不同，JavaScript并不要求必须以分号（;）作为语句的结束标记。如果语句的结束处没有分号，JavaScript会自动将该行代码的结尾作为语句的结尾。

例3.1 语句末尾添加分号与不添加分号，实例代码如下：

alert(“您好！欢迎访问我公司网站！”);

alert(“您好！欢迎访问我公司网站！”)

说明：良好的代码编写习惯是在每行代码的结尾处加上分号，这样可以保证每行代码的准确性。

（3）变量是弱类型的

与Java语言不同，JavaScript的变量是弱类型的。因此在定义变量时，只使用var运算符就可以将变量初始化为任意的值。例如，通过以下代码就可以将变量username初始化为mrsoft，而将变量age初始化为20。

例3.2 在JavaScript中定义变量，代码如下：

var username= “mrsoft”;

//将变量username初始化为mrsoft

var age= 20;

//将变量age初始化为20

（4）使用大括号标记代码块

与Java语言相同，JavaScript也是使用一对大括号标记代码块，被封装在大括号内的语句将按顺序执行。

（5）注释

在JavaScript中，提供了两种注释，即单行注释和多行注释。下面进行详细介绍。

单行注释使用双线性“//”开头，在“//”后面的文字为注释内容，在代码执行过程中不起任何作用。例如，在下面的代码中，“获取日期对象”为注释内容，在代码执行时不起任何作用。

例3.3 在JavaScript代码中添加注释，代码如下：

var now=new Date(); //获取日期对象

多行注释以“/*”开头，以“*/”结尾。在“/*”和“*/”之间的内容为注释内容，在代码执行过程中不起任何作用。

例如，在下面的代码中，“功能……”“参数……”“时间……”“作者……”等为注释内容，在代码执行时不起任何作用。

例3.4 在JavaScript代码中添加多行注释，代码如下：

var now=new Date(); //获取日期对象

*功能：获取系统日期函数

*参数：指定获取的系统日期显示的位置

*时间：2016-10-09

*作者：cdd

function getClock(clock){

… //此处省略了获取系统日期的代码

clock.innerHTML= “系统公告:” +time //显示系统日期

}

说明：Java除了以上两种注释外，还有文档注释。“/** */”为文档注释标记。符号“/**”与“ */”之间的内容均为文档注释内容。当文档注释出现在声明（如类的说明、类的成员变量的说明、类的成员方法声明等）之前时，会被Javadoc文档工具读取作为Javadoc文档内容。文档注释的格式与多行注释的格式相同。对于初学者而言，文档注释并不是很重要，了解即可。

一定要养成良好的编程风格。软件编码规范中提到“可读性第一，效率第二”，所以程序员必须要在程序中添加适量的注释来提高程序的可读性和可维护性。程序中注释要占代码总量的20%～50%。

3.2.2 JavaScript中的关键字

JavaScript中的关键字是指在JavaScript中具有特定含义的、可以成为JavaScript语法中一部分的字符。与其他编程语言一样，JavaScript中也有许多关键字，如表3.1所示。

表3.1 JavaScript中的关键字

abstract	continue	finally	instanceof	private	this
boolean	default	float	int	public	throw
break	do	for	interface	return	typeof
byte	double	function	long	short	true
case	else	goto	native	static	var
catch	extends	implements	new	super	void
char	false	import	null	switch	while
class	final	in	package	synchronized	with

注意：JavaScript中的关键字不能用作变量名、函数名以及循环标签。

3.2.3 JavaScript的数据类型

JavaScript的数据类型比较简单，主要有数值型、字符型、布尔型、转义字符、空值（null）和未定义值6种，下面分别介绍。

数值型

JavaScript的数值型数据又可以分为整型和浮点型两种。

（1）整型：JavaScript的整型数据可以是正整数、负整数和0，可以采用十进制、八进制或十六进制来表示。

例3.5 定义整型变量，代码如下：

729 //表示十进制的729

071 //表示八进制的71

0x9405B //表示十六进制的9405B

说明：以0开头的数为八进制，以0x开头的数为十六进制数。

注：八进制英文是Octal，缩写OCT或O，O与0外形相近，C语言就借用了数字0来表示8进制数，这是不能省略的。

octal ['ɒkt(ə)l] adj. [数] 八进制的

hexadecimal [‚heksə'desɪməl adj. 十六进制的 n. 十六进制

sexadecimal [,seksə'desiməl] adj. 十六进制的 num. 十六分之一

（2）浮点型：JavaScript的浮点型数据由整数部分加小数部分组成，只能采用十进制，但是可以使用科学计数法或标准方法来表示。

例3.6 定义浮点型变量，代码如下：

3.1415926 //采用标准方法表示

1.6E5 //采用科学计数法表示，代表1.6*10⁵

字符型

字符型数据是使用单引号或双引号括起来的一个或多个字符。

（1）单引号括起来的一个或多个字符。

例3.7 定义用单引号括起来的字符型变量，代码如下：

‘a’

‘保护环境从自我做起’

（2）双引号括起来的一个或多个字符。

例3.8 定义用双引号括起来的字符型变量，代码如下：

“b”

“系统公告：”

说明：JavaScript与Java不同，它没有char数据类型，要表示单个字符，必须使用长度为1的字符串。

布尔型

布尔型数据只有两个值，即true或false，主要用来说明或代表一种状态或标志。在JavaScript中，也可以使用整数0表示false，使用非0的整数表示true。

转义字符

以反斜杠开头的不可显示的特殊字符通常称为控制字符，也被称为转义字符。通常转义字符，可以在字符串中添加不可显示的特殊字符，或者防止引号匹配混乱的问题。JavaScript常用的转义字符如表3.2所示。

表3.2 JavaScript常用的转义字符

转义字符	描述	转义字符	描述
\b	退格	\n	换行
\f	换页	\t	Tab符
\r	回车符	\’	单引号
\ “	双引号	\\	反斜杠
\xnn	16进制代码nn表示的字符	\ummmm	16进制代码nnnn表示的Unicode字符
\0nnn	8进制代码nnn表示的字符

注： Unicode ['juːnɪˌkəʊd] n. 采用双字节对字符进行编码；统一的字符编码标准

例3.9 在网页中弹出一个提示对话框，其中应用转义字符“\r”将文字分为两行显示，代码如下：

alert(“欢迎访问我公司网站！ \r http://www.mingribook.com”);

上面代码的执行结果如图3.1所示。

说明：在 “document.writeln();”语句中使用转义字符时，只有将其放在格式化文本块中才会起作用，所以输出的带转义字符的内容必须位于<pre>和</pre>标记内。

空值

JavaScript中有一个空值（null），用于定义空的或不存在的引用。如果试图引用一个没有定义的变量，则返回一个null值。

注意：空值不等于空的字符串（“”）或0。

未定义值

当使用了一个并未声明的变量，或者使用了一个已经声明但没有赋值的变量时，将返回未定义值（undefined）。

说明：JavaScript中还有一种特殊类型的数字常量NaN，即“非数字”。当在程序中由于某种原因发生计算错误后，将产生一个没有意义的数字，此时JavaScript返回的数值就是NaN。

3.2.4 变量的定义及使用

变量是指程序中一个已经命名的存储单元，其主要作用就是为数据操作提供存放信息的容器。在使用变量前，必须明确变量的命名规则、变量的声明方法以及变量的作用域。

变量的命名规则

JavaScript变量的命名规则如下：

（1）变量名由字母、数字或下划线组成，但必须以字母或下划线开头。

（2）变量名中不能有空格、加号、减号、逗号等符号。

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

（4）JavaScript中的变量名是严格区分大小写的。例如，arr_week与arr_Week代表了两个不同的变量。

说明：虽然JavaScript的变量可以任意命名，但是在实际编程时，最好使用便于记忆且有意义的变量名，以增加程序的可读性。

变量的声明方法

JavaScript中，可以位于关键字var声明变量，其语法格式如下：

var variable;

参数说明：

variable：用于指定变量名，该变量名必须遵守变量的命名规则。

在声明变量时需要遵守以下规则：

（1）可以使用关键字var同时声明多个变量。

例3.10 同时声明多个变量，代码如下：

var now,year,month,date;

（2）可以在声明变量的同时对其进行赋值，即初始化。

例3.11 定义变量并进行赋值，代码如下：

var now=“2018-10-29”, year= “2018”, month= “10”,date= “29”;

（3）如果只是声明了变量，但未对其赋值，则其默认值为undefined。

（4）当给一个尚未声明的变量赋值时，JavaScript会自动用该变量名创建一个变量。在一个函数内部，通常创建的只是一个仅在函数内部起作用的局部变量，而不是一个全局变量。要创建一个全局变量，则必须使用var关键字进行变量声明。

（5）JavaScript采用弱类型，所以在声明变量时不需要指定变量的类型，而变量的类型将根据变量的值来确定。

例3.12 定义变量并进行赋值，代码如下：

var number= 10 //数值型

var info= “欢迎访问我公司网站\rhttp://www.mingribook.com”; //字符型

var flag= true //布尔型

变量的作用域

变量的作用域是指变量在程序中的有效范围。在JavaScript中，根据变量的作用域可以将变量分为全局变量和局部变量两种。全局变量是定义在所有函数之外，作用于整个脚本代码的变量；局部变量是定义在函数体内，只作用于函数体内的变量。

例3.13 下面的代码将说明变量的有效范围：

var company= “明日科技”;

//该变量在函数外声明，作用于整个脚本代码

function send(){

var url= www.mingribook.com;

//该变量在函数内声明，只作用于该函数体

alert(company+url);

}

</script>

3.2.5 运算符的应用

运算符是用来完成计算或者比较数据等一系列操作的符号。常用的JavaScript运算符按类型，可分为赋值运算符、算术运算符、比较运算符、逻辑运算符、条件运算符和字符串运算符等6种。

赋值运算符

JavaScript中的赋值运算可以分为简单赋值运算和复合赋值运算。简单赋值运算是将赋值运算符（=）右边表达式的值保存到左边的变量中；而复合赋值运算混合了其他操作（算术运算操作、位操作等）和赋值操作。

例3.14 使用赋值运算符，代码如下：

sum+=i; //等同于sum=sum+i;

JavaScript中的赋值运算符如表3.3所示。

表3.3 JavaScript中的赋值运算符

运算符	描述	示例
=	将右边表达式的值赋给左边的变量	userName="mr"
+=	将运算符左边的变量加上右边表达式的值赋给左边的变量	a+=b //相当于a=a+b
-=	将运算符左边的变量减去右边表达式的值赋给左边的变量	a-=b //相当于a=a-b
*=	将运算符左边的变量乘以右边表达式的值赋给左边的变量	a=b //相当于a=ab
/=	将运算符左边的变量除以右边表达式的值赋给左边的变量	a/=b //相当于a=a/b
%=	将运算符左边的变量用右边表达式的值求模，并将结果赋给左边的变量	a%=b //相当于a=a%b
&=	将运算符左边的变量与右边表达式的值进行逻辑与运算，并将结果赋给左边的变量	a&=b //相当于a=a&b
\|=	将运算符左边的变量与右边表达式的值进行逻辑或运算，并将结果赋给左边的变量	a\|=b //相当于a=a\|b
^=	将运算符左边的变量与右边表达式的值进行异或运算，并将结果赋给左边的变量	a^=b //相当于a=a^b

算术运算符

算术运算符用于在程序中进行加、减、乘、除等运算。在JavaScript中常用的算术运算符如表3.4所示。

表3.4 JavaScript中的赋值运算符

运算符	描述	示例
+	加运算符	4+6 //返回值为10
-	减运算符	7-2 //返回值为5
*	乘运算符	7*3 //返回值为21
/	除运算符	12/3 返回值为4
%	求模运算符	7%4 返回值为3
++	自增运算符。该运算符有两种情况：i++（在使用i之后，使i的值加1）；++i（在使用i之前，先使i的值加1）	i=1; j=i++ //j的值为1，i的值为2 i=1; j=++i //j的值为2，i的值为2
--	自减运算符。该运算符有两种情况：i--（在使用i之后，使i的值减1）；--i（在使用i之前，先使i的值减1）	i=6; j=i-- //j的值为6，i的值为5 i=6; j=--i //j的值为5，i的值为5

注意：执行除法运算时，0不能作为除数。如果0作为除数，返回结果则为Infinity。

例3.15 编写JavaScript代码，应用算术运算符计算商品金额（例3.1，代码1）。

var price= 992; //定义商品价格

var number=10; //定义商品数量

var sum=price*number; //计算商品金额

alert（sum）; //显示商品金额

</script>

运行结果如图3.2所示。

比较运算符

比较运算符的基本操作过程是：首先对操作数进行比较，这个操作数可以是数字也可以是字符串，然后返回一个布尔值true或false。在JavaScript中常用的比较运算符如表3.5所示。

表3.5 JavaScript中的比较运算符

运算符	描述	示例
<	小于	1<6 //返回值为true
>	大于	7>10 //返回值为false
<=	小于等于	10<=10 //返回值为true
>=	大于等于	3>=6 //返回值为false
==	等于。只根据表面值进行判断，不涉及数据类型	"17"==17 //返回值为true
===	绝对等于。根据表面值和数据类型同时进行判断	"17"===17 /返回值为false
!=	不等于。只根据表面值进行判断，不涉及数据类型	"17"!=17 //返回值为false
!==	不绝对等于。根据表面值和数据类型同时进行判断	"17"!==17 //返回值为true

逻辑运算符

逻辑运算符通常和比较运算符一起使用，用来表示复杂的比较运算，常用于if、while和for语句中，其返回结果为一个布尔值。JavaScript中常用的逻辑运算符如表3.6所示。

表3.6 JavaScript中的逻辑运算符

运算符	描述	示例
!	逻辑非。否定条件，即!假＝真，!真＝假	!true //值为false
&&	逻辑与。只有当两个操作数的值都为true时，值才为true	true && flase //值为false
\|\|	逻辑或。只要两个操作数其中之一为true，值就为true	true \|\| false //值为true

条件运算符

条件运算符是JavaScript支持的一种特殊的三目运算符，其语法格式如下：

操作数？结果1：结果2

如果“操作数”的值为true，则整个表达式的结果为“结果1”，否则为“结果2”。

例3.16 应用条件运算符计算两个数中的最大数，并赋值给另一个变量。代码如下：

var a=26;

var b=30;

var m=a>b?a:b //m的值为30

字符串运算符

字符串运算符是用于两个字符型数据之间的运算符，除了比较运算符外，还可以是+和+=运算符。其中，+运算符用于连接两个字符串；而+=运算符用于连接两个字符串，并将结果赋给第一个字符串。

例3.17 在网页中弹出一个提示对话框，显示进行字符串运算后变量a的值。代码如下：

var a= “One”+ “world”;

//将两个字符串连接后的值赋给变量a

a+= “One Dream”

//连接两个字符串，并将结果赋给第一个字符串

alert(a);

运行实例，结果如图3.3所示。

3.3 流程控制语句

流程控制语句对于任何一门编程语言都是至关重要的，JavaScript也不例外。在JavaScript中提供了if条件判断语句、switch多分支语句、for循环语句、while循环语句、do...while循环语句、break语句和continue语句7种流程控制语句。

3.3.1 if条件判断语句

if条件判断语句是最基本、最常用的流程控制语句，可以根据条件表达式的值执行相应的处理。if语句的语法格式如下：

if(expression){

statement 1

}else{

statement 2

}

参数说明：

（1）expression：必选项。用于指定条件表达式，可以使用逻辑运算符。

（2）statement 1：用于指定要执行的语句序列。当expression的值为true时，执行该语句序列。

（3）statement 2：用于指定要执行的语句序列。当expression的值为false时，执行该语句序列。

if...else条件判断语句的执行流程如图3.4所示。

说明：上述if语句是典型的二路分支结构。其中else部分可以省略，而且statement 1为单一语句时，其两边的大括号也可以省略。

例如，下面3段代码的执行结果是一样的，都可以计算2月份的天数。

//计算2月份的天数

代码段1：

var year=2016;

var month=0;

if((year%4==0 && year%100!=0)|| year%400==0){ //判断指定年是否为闰年

month=29;

}else{

month=28;

}

//计算2月份的天数

代码段2：

var year=2016;

var month=0;

if((year%4==0 && year%100!=0)|| year%400==0) //判断指定年是否为闰年

month=29;

else{

month=28;

}

//计算2月份的天数

代码段3：

var year=2016;

var month=0;

if((year%4==0 && year%100!=0)|| year%400==0){ //判断指定年是否为闰年

month=29;

}else month=28;

注：闰年是公历中的名词。

普通闰年:能被4整除但不能被100整除的年份为普通闰年。(如2004年就是闰年，1999年不是闰年)；

世纪闰年:能被400整除的为世纪闰年。(如2000年是闰年，1900年不是闰年)。

if 语句是一种使用很灵活的语句，除了可以使用if...else的形式外，还可以使用if...else if 的形式。if...else if语句的语法格式如下：

if(expression 1){

statement 1

}else if(expression 2){

statement 2

}

…

else if(expression n){

statement n

}else{

statement n+1

}

if...else if语句的执行流程如图3.5所示。

例3.18 应用if语句验证用户登录信息（例3.2，代码3.2）。

（1）在页面中添加用户登录表单及表单元素。具体代码如下：

用户名：<input name= “user” type= “text” id= “user”>

密码：<input name= “pwd” type= “text” id= “pwd”>

</form>

（2）编写自定义的JavaScript函数check()，用if语句验证

登录信息是否为空。check()函数的具体代码如下：

function check(){

if(form1.user.value== “”){ //判断用户名是否为空

alert(“请输入用户名！”);form1.user.focus();return;

}else if(form1.pwd.value== “”){ //判断密码是否为空

alert(“请输入用户名！”);form1.user.focus();return;

} else{

form1.submit(); //提交表单

}

</script>

（3）在“登录”按钮的onclick事件中调用check()函数。具

体代码如下：

运行程序，单击“登录”按钮，将显示如图3.6所示的提示对话框。

说明：同Java语言一样，JavaScript的if语句也可以嵌套使用。由于JavaScript中if语句的嵌套方式同Java语言基本相同，在此不再赘述。

3.3.2 switch多分支语句

switch是典型的多路分支语句，其作用与嵌套使用if语句基本相同，但switch语句比if语句更具有可读性，而且switch语句允许在找不到一个匹配条件的情况下执行默认的一组语句。switch语句的语法格式如下：

switch (expression){

case judgement 1:

statement 1;

break;

case judgement 2:

statement 2;

break;

…

case judgement n:

statement n;

break;

default:

statement n+1;

break;

}

注： switch vt.转换；用鞭子等抽打 vi.转换；抽打；换防 n.开关；转换；鞭子

参数说明：

（1）expression：任意的表达式或变量。

（2）judgement：任意的常数表达式。当expression的值与某个judgement的值相等时，就执行此case后的statement语句；如果expression的值与所有judgement的值都不相等，则执行default后面的statement语句。

（3）break：用于结束switch语句，从而使JavaScript只执行匹配的分支。如果没有break语句，则switch语句的所有分支都将被执行，switch语句也就失去了使用的意义。

switch语句的执行流程如图3.7所示。

例3.19 应用switch语句输出今天是星期几。（例3.3，代码3.3）。

var now=new Date(); //获取系统日期

var day=now.getDay(); //获取星期

var week;

switch (day){

case 1:

week="星期一";

break;

case 2:

week="星期二";

break;

case 3:

week="星期三";

break;

case 4:

week="星期四";

break;

case 5:

week="星期五";

break;

case 6:

week="星期六";

break;

default:

week="星期日";

break;

}

document.write("今天是"+week); //输出中文的星期

</script>

程序的运行结果如图3.8所示。

技巧：在程序开发的过程中，使用if语句还是使用switch语句，可以根据实际情况而定。尽量做到物尽其用，不要因为switch语句的效率高，就一味地使用；也不要因为if语句常用，就懒得应用switch语句。要根据实际情况，具体问题具体分析，使用最合适的条件语句。一般情况下，对于判断条件较少的可以使用if条件语句，但是在实现一些多条件的判断中，就应该使用switch语句。

3.3.3 for循环语句

for循环语句也称为计次循环语句，一般用于循环次数已知的情况，在JavaScript中应用比较广泛。for循环语句的语法格式如下：

for(initialize;test;increment){

statement

}

参数说明：

（1）initialize：初始化语句，用来对循环变量进行初始化赋值。

（2）test：循环条件，一个包含比较运算符的表达式，用来限定循环变量的边限。如果循环变量超过了该边限，则停止该循环语句的执行。

（3）increment：用来指定循环变量的步幅。

（4）statement：用来指定循环体，在循环条件的结果为true时，重复执行。

说明：for循环语句执行的过程是：先执行初始化语句，然后判断循环条件，如果循环条件的结果为true，则执行一次循环体，否则直接退出循环。然后执行迭代语句，改变循环变量的值。至此，完成一次循环。接下来，将进行下一次循环，直到循环条件的结果为false，才结束循环。

for循环语句的执行流程如图3.9所示。

说明：在for语句中可以使用break语句来中止循环语句的执行，关于break语句的语法参见3.3.6节。

为了使读者更好地理解for语句，下面将以一个具体的实例介绍for语句的应用。

例3.20 计算100以内所有奇数的和。（例3.4，代码3.4）。

关键代码如下：

var sum=0;

for(i=1;i<100;i+=2){

sum=sum+i;

}

alert("100以内所有奇数的和为："+sum); //输出计算结果

</script>

程序运行结果如图3.10所示。

说明：在使用for语句时，一定要保证循环可以正常结束，也就是必须保证循环条件的结果存在为true的情况。否则，循环体将无休止地执行下去，从而形成死循环。例如，下面的循环语句就会造成死循环，原因是i永远大于等于1。

for(i=1;i>=1;i++){

alert(i);

}

3.3.4 while循环语句

while循环语句也称为前测试循环语句，它是利用一个条件来控制是否要继续重复执行这个语句。while循环语句与for循环语句相比，无论是语法还是执行的流程，都较为简明易懂。while循环语句的语法格式如下：

while(expression){

statement

}

参数说明：

（1）expression：一个包含比较运算符的条件表达式，用来指定循环条件。

（2）statement：用来指定循环体，在循环条件的结果为true时，重复执行。

说明：while循环语句之所以命名为前测试循环，是因为它要先判断此循环的条件是否成立，然后再进行重复执行的操作。也就是说，while循环语句执行的过程是先判断条件表达式，如果条件表达式的值为true，则执行循环体，并且在循环体执行完毕后，进入下一次循环，否则退出循环。

while循环语句的执行流程如图3.11所示。

注意：在使用while语句时，也一定要保证循环可以正常结束，即必须保证条件表达式的值存在为true的情况，否则将形成死循环。例如，下面的循环语句就会造成死循环，原因是i永远都小于100。

var i=1;

while(i<=100){

alert(i); //输出i的值

}

while循环语句经常用于循环执行的次数不确定的情况下。

例3.21 列举出累加和不大于10的所有自然数。（例3.5，代码3.5）。

关键代码如下：

var i=1; //由于是计算自然数，所以i的初始值设置为1

var sum=i;

var result="";

document.write("累加和不大于10的所有自然数为：<br>");

while(sum<10){

sum=sum+i; //累加i的值

document.write(i+'<br>'); //输出符合条件的自然数

i++; //该语句一定不要少

}

</script>

程序运行结果如图3.12所示。

3.3.5 do…while循环语句

do…while循环语句也称为后测试循环语句，它也是利用一个条件来控制是否要继续重复执行这个语句。与while循环所不同的是，它先执行一次循环语句，然后再去判断是否继续执行。do…while循环语句的语法格式如下：

do{

statement

} while(expression);

参数说明：

（1）statement：用来指定循环体，循环开始时先被执行一次，然后在循环条件的结果为true时，重复执行。

（2）expression：一个包含比较运算符的条件表达式，用来指定循环条件。

说明：do...while循环语句执行的过程是：先执行一次循环体，然后再判断条件表达式，如果条件表达式的值为true，则继续执行，否则退出循环。也就是说，do...while循环语句中的循环体至少被执行一次。

do...while循环语句的执行流程如图3.13所示。

do...while循环语句同while循环语句类似，也常用于循环执行的次数不确定的情况下。

例3.22 应用do...while循环语句列举出累加和不大于10的所有自然数。（例3.6，代码3.6）。

关键代码如下：

var sum=0;

var i=1; //由于是计算自然数，所以1的初始值设置为1

document.write("累加和不大于10的所有自然数为：<br>");

do{

sum=sum+i; //累加i的值

document.write(i+'<br>'); //输出符合条件的自然数

i++; //该语句一定不用少

}while(sum<10);

</script>

程序运行结果如图3.14所示。

3.3.6 break与continue语句

break语句与continue语句都可以用于跳出循环，但两者也存在着一些区别。下面将详细介绍这两个关键字的用法。

（1）break语句用于退出包含在最内层的循环或者退出一个switch语句。break语句的语法格式如下：

break;

说明：break语句通常用在for、while、do...while或switch语句中。

例3.23 在for语句中通过break语句中断循环。代码如下：

var sum=0;

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

sum+=i;

if (sum>10) break; //如果sum>10，就会立即跳出循环

}

document.write(“0至”+i+”(包括 “+i+”)之间自然数的累加和为： “+sum”);

运行结果为：“0至5（包括5）之间自然数的累加和为：15”。

（2）continue语句：一个包含比较运算符的条件表达式，用来指定循环条件。

continue语句和break语句类似，所不同的是，continue语句用于终止本次循环，直接开始下一次循环。其语法格式如下：

continue;

说明：continue语句只能应用在while、for、do...while或switch语句中。

例3.24 在for语句中通过continue语句计算金额大于等于1000的数据的和。代码如下：

var total=0;

var sum=new Array(1000,1200,100,600,736,1107,1205) ;

//声明一个一维数组

for(i=0; i<sum.length; i++){

if (sum[i]<1000) continue;

total+=sum[i];

}

document.write(“累加和为：” + total)； //输出计算结果

运行结果为：“累加和为：4512”。

说明：当使用continue语句中止本次循环后，如果循环条件的结果为false，则退出循环，否则继续下一次循环。

3.4 函数

函数实质上就是可以作为一个逻辑单元对待的一组JavaScript代码。使用函数可以使代码更为简洁，提高重用性。在JavaScript中，大约95%的代码都是包含在函数中的。由此可见，函数在JavaScript中是非常重要的。

3.4.1 函数的定义

函数是由关键字function、函数名加一组参数以及置于大括号中需要执行的一段代码定义的。定义函数的基本语法如下：

function functionName([parameter 1, parameter 2,……]){

statements;

[return expression;]

}

参数说明：

（1）functionName：必选项，用来指定函数名。在同一个页面中，函数名必须是唯一的，并且区分大小写。

（2）parameter：可选项，用来指定参数列表。当使用多个参数时，参数间使用逗号进行分隔。一个函数最多可以有255个参数。

（2）statements：必选项，是函数体，用于实现函数功能的语句。

（2）expression：可选项，用于返回函数值。expression为任意的表达式、变量或常量。

例3.25 定义一个用于计算商品金额的函数account()，该函数有两个参数，用于指定单价和数量，返回值为计算后的金额。具体代码如下：

function account(price, number){

var sum=price*number; //计算金额

return sum; //返回计算后的金额

}

3.4.2 函数的调用

函数的调用比较简单，如果要调用不带参数的函数，使用函数名加上括号即可；如果要调用的函数带参数，则在括号中加上需要传递的参数；如果包含多个参数，各参数间用逗号分隔。

如果函数有返回值，则可以使用赋值语句将函数值赋给一个变量。

例3.26 对例3.25中定义的函数account()，可以通过以下代码进行调用。

account(10.6, 10)；

说明：在JavaScript中，由于函数名区分大小写，在调用函数时也需要注意函数名的大小写。

例3.27 定义一个JavaScript函数checkRealName()，用于验证输入的字符串是否为汉字。（例3.7，代码3.7）。

（1）在页面中添加用于输入真实姓名的表单及表单元素。具体代码如下：

请输入真实姓名：<input name="realName" type="text" id="realName">

</form>

（2）编写自定义的JavaScript函数checkRealName()，用于验证输入的真实姓名是否正确，即判断输入的内容是否为两个或两个以上的汉字。checkRealName()函数的具体代码如下：

function checkRealName(){

var str=form1.realName.value; //获取输入的真实姓名

if(str==""){ //当真实姓名为空时

alert("请输入真实姓名！");form1.realName.focus();return;

}else{ //当真实姓名不为空时

var objExp=/[\u4E00-\u9FA5]{2,}/; //创建RegExp对象

if(objExp.test(str)==true){ //判断是否匹配

alert("您输入的真实姓名正确！");

}else{

alert("您输入的真实姓名不正确！");

}

</script>

说明：正确的真实姓名由两个以上的汉字组成，如果输入的不是汉字，或是只输入一个汉字，都将被认为是不准确的真实姓名。

（3）在“检测”按钮的onclick事件中调用checkRealName()函数。具体代码如下：

运行程序，输入真实姓名 “cdd”，单击 “检测”按钮，将弹出如图3.15所示的对话框；输入真实姓名“绿草”，单击“检测”按钮，将弹出如图3.16所示的对话框。

3.5 事件处理

通过前面的学习，知道JavaScript可以以事件驱动的方式直接对客户端的输入作出响应，无须经过服务器端程序；也就是说，JavaScript是事件驱动的，它可以使在图形界面环境下的一切操作变得简单化。下面将对事件及事件处理程序进行详细介绍。

3.5.1 什么是事件处理程序

JavaScript与Web页面之间的交互是通过用户操作浏览器页面时触发相关事件来实现的。例如，在页面载入完毕时将触发onload（载入）事件、当用户单击按钮时将触发按钮的onclick事件等。事件处理程序则是用于响应某个事件而执行的处理程序。事件处理程序可以是任意JavaScript语句，但通常使用特定的自定义函数（Function）来对事件进行处理。

3.5.2 JavaScript常用事件

多数浏览器内部对象都拥有很多事件，下面将以表格的形式给出常用的事件及何时触发这些事件。JavaScript的常用事件如表3.7所示。

表3.7 JavaScript的常用事件

事件	何时触发
onabort	对象载入被中断时触发
onblur	元素或窗口本身失去焦点时触发
onchange	改变<select>元素中的选项或其他表单元素失去焦点，并且在其获取焦点后内容发生过改变时触发
onclick	单击鼠标左键时触发。当光标的焦点在按钮上，并按下回车键时，也会触发该事件
ondblclick	双击鼠标左键时触发
onerror	出现错误时触发
onfocus	任何元素或窗口本身获得焦点时触发
onkeydown	键盘上的按键（包括Shift或Alt等键）被按下时触发，如果一直按着某键，则会不断触发。当返回false时，取消默认动作
onkeypress	键盘上的按键被按下，并产生一个字符时发生。也就是说，当按下Shift或Alt等键时不触发。如果一直按下某键时，会不断触发。当返回false时，取消默认动作
onkeyup	释放键盘上的按键时触发
onload	页面完全载入后，在Window对象上触发；所有框架都载入后，在框架集上触发；<img>标记指定的图像完全载入后，在其上触发；或<object>标记指定的对象完全载入后，在其上触发
onmousedown	单击任何一个鼠标按键时触发
onmousemove	鼠标在某个元素上移动时持续触发
onmouseout	将鼠标从指定的元素上移开时触发
onmouseover	鼠标移到某个元素上时触发
onmouseup	释放任意一个鼠标按键时触发
onreset	单击重置按钮时，在<form>上触发
onresize	窗口或框架的大小发生改变时触发
onscroll	在任何带滚动条的元素或窗口上滚动时触发
onselect	选中文本时触发
onsubmit	单击提交按钮时，在<form>上触发
onunload	页面完全卸载后，在Window对象上触发；或者所有框架都卸载后，在框架集上触发

3.5.2 事件处理程序的调用

在使用事件处理程序对页面进行操作时，最主要的是如何通过对象的事件来指定事件处理程序。指定方式主要有以下两种：一种是在JavaScript中，另一种是在HTML中。

在JavaScript中

在JavaScript中调用事件处理程序，首先需要获得要处理对象的引用，然后将要执行的处理函数赋值给对应的事件。

例3.28 在JavaScript中调用事件处理程序。代码如下：

var b_save=document.getElementByld(“bt_save”);

b_save.onclick=function(){

alert(“单击了保存按钮”);

}

</script>

说明：在页面中加入上面的代码并运行，当单击“保存”按钮时，将弹出“单击了保存按钮”对话框。

注意：在上面的代码中，一定要将 “<input name= “bt_save” type= “button” value= “保存”>”放在JavaScript代码的上方，否则将弹出 “‘b_save’”为空或不是对象”的错误提示。在JavaScript中指定事件处理程序时，事件名称必须为小写，才能正确响应事件。

在HTML中

在HTML中分配事件处理程序，只需要在HTML标记中添加相应的事件，并在其中指定要执行的代码或函数名即可。

例3.29 在HTML中调用事件处理程序。代码如下：

说明：在页面中加入上面的代码并运行，当单击“保存”按钮时，将弹出“单击了保存按钮”对话框。

3.6 常用对象

通过前面的学习，知道JavaScript是一种基于对象的语言，它可以应用自己创建的对象，因此许多功能来自于脚本环境中对象的方法与脚本的相互作用。下面将对JavaScript的常用对象进行详细介绍。

3.6.1 Window对象

Window对象即浏览器窗口对象，是一个全局对象，是所有对象的顶级对象，在JavaScript中起着举足轻重的作用。Window对象提供了许多属性和方法，这些属性和方法被用来操作浏览器页面的内容。Window对象同Math对象一样，也不需要使用new关键字创建对象实例，而是直接使用“对象名.成员”的格式来访问其属性或方法。下面将对Window对象的属性和方法进行介绍。

Window对象的属性

Window对象的常用属性如表3.8所示。

表3.8 Window对象的常用属性

属性	描述
document	对窗口或框架中含有文档的Document对象的只读引用
defaultStatus	一个可读写的字符，用于指定状态栏中的默认消息
frames	表示当前窗口中所有Frame对象的集合
location	用于代表窗口或框架的Location对象。如果将一个URL赋予该属性，则浏览器将加载并显示该URL指定的文档。
length	窗口或框架包含的框架个数
history	对窗口或框架的History对象的只读引用
name	用于存放窗口对象的名称
status	一个可读写的字符，用于指定状态栏中的当前信息
top	表示最顶层的浏览器窗口
parent	表示包含当前窗口的父窗口
opener	表示打开当前窗口的父窗口
closed	一个只读的布尔值，表示当前窗口是否关闭。当浏览器窗口关闭时，表示该窗口的Window对象并不会消失，不过其closed属性被设置为true
self	表示当前窗口
screen	对窗口或框架的Screen对象的只读引用，提供屏幕尺寸、颜色深度等信息
navigator	对窗口或框架的Navigator对象的只读引用，通过Navigator对象可以获得与浏览器相关的信息

注： frame n. 框架；结构；[电影] 画面 vt. 设计；建造；陷害；使…适合 vi. 有成功希望 adj. 有木架的；有构架的 n. (Frame)人名；(英)弗雷姆

navigator ['nævɪgeɪtə] n. 航海家；领航员；驾驶员

Window对象的方法

Window对象的常用方法如表3.9所示。

表3.9 Window对象的常用方法

方法	描述
alert()	弹出一个警告对话框
confirm()	显示一个确认对话框，单击“确认”按钮时返回true，否则返回false
prompt()	弹出一个提示对话框，并要求输入一个简单的字符串
blur()	将键盘焦点从顶层浏览器窗口移走。在多数平台上，这将使窗口移到最后面
close()	关闭窗口
focus()	将键盘焦点赋予顶层浏览器窗口。在多数平台上，这将使窗口移到最前面
open()	打开一个新窗口
scrollTo(x,y)	把窗口滚动到x,y坐标指定的位置
scrollBy(offsetx, offsety)	按照指定的位移量滚动窗口
setTimeout(timer)	在经过指定的时间后执行代码
clearTimeout()	取消对指定代码的延迟执行
moveTo(x,y)	将窗口移动到一个绝对位置
moveBy(offsetx, offsety)	将窗口移动到指定的位移量处
resizeTo(x,y)	设置窗口的大小
resizeBy(offsetx, offsety)	按照指定的位移量设置窗口的大小
print()	相当于浏览器工具栏中的“打印”按钮
setInterval()	周期性执行指定的代码
clearInterval()	停止周期性地执行代码

注： prompt[prɒm(p)t] adj. 敏捷的，迅速的；立刻的 vt. 提示；促进；激起；（给演员）提白n. 提示；付款期限；DOS命令：改变DOS系统提示符的风格 adv. 准时地

Scroll n. 卷轴，画卷；名册；卷形物 vi. 成卷形 vt. 使成卷形

Timeout ['taɪm'aʊt] n. 超时；暂时休息；工间休息

Interval n. 间隔；间距；幕间休息

技巧：

由于Window对象使用十分频繁，又是其他对象的父对象，所以在使用Window对象的属性和方法时，JavaScript允许省略Window对象的名称。

例如，在使用Window对象的alert()方法弹出一个提示对话框时，可以使用下面的语句：

window.alert(“欢迎访问明日科技网站！”);

也可以使用下面的语句：

alert(“欢迎访问明日科技网站！”);

由于Window对象的open()方法和colse()方法在实际网站开发中经常用到，下面将对其进行详细的介绍。

（1） open()方法

open()方法用于打开一个新的浏览器窗口，并在该窗口中装载指定URL地址的网页。open()方法的语法格式如下：

windowVar=window.open(url,windowname[,location]);

参数说明：

（1）windowVar:当前打开窗口的句柄。如果open()方法执行成功，则windowVar的值为一个Window对象的句柄，否则windowVar的值是一个空值。

（2）url:目标窗口的URL。如果URL是一个空字符串，则浏览器将打开一个空白窗口，允许用write()方法创建动态HTML。

（3）windowname:用于指定新窗口的名称，该名称可以作为<a>标记和<form>的target属性的值。如果该参数指定了一个已经存在的窗口，那么open()方法将不再创建一个新的窗口，而只是返回对指定窗口的引用。

（4）location:对窗口属性进行设置，其可选参数如表3.10所示。

表3.10 对窗口属性进行设置的可选参数

参数	描述
width	窗口的宽度
height	窗口的高度
top	窗口顶部距离屏幕顶部的像素数
left	窗口左端距离屏幕左端的像素数
scrollbars	是否显示滚动条，值为yes或no
resizable	设定窗口大小是否固定，值为yes或no
toolbar	浏览器工具栏，包括后退及前进按钮等，值为yes或no
menubar	菜单栏，一般包括文件、编辑及其他菜单项，值为yes或no
location	定位区，也叫地址栏，是可以输入URL的浏览器文本区，值为yes或no

技巧：当Window对象赋给变量后，也可以使用打开窗口句柄的close()方法关闭窗口。

例如，打开一个新的浏览器窗口，在该窗口中显示bbs.htm文件，设置打开窗口的名称为bbs，并设置窗口的顶边距、左边距、宽度和高度。代码如下：

window.open(“bbs.htm”, “bbs”, “width=531,height=402, top=50, left=20”);

（2） close()方法

close()方法用于关闭当前窗口。其语法格式如下：

window.close()

例3.30 实现用户注册页面，其中包含“用户名”“密码”“确认密码”3个文本框，还包含“提交”“重置”“关闭”3个按钮。当用户单击“关闭”按钮，将关闭当前浏览器。（例3.8，代码3.8）。

关键代码如下：

<tr>

</tr>

<tr>

</tr>




	<tr>
	<td align="right">确认密码：</td>
	<td align="left"><label for="textfield3"></label>
	<input type="password" name="textfield3" id="textfield3" /></td>
	</tr>
	<tr>
	<td colspan="2" align="center"><label>
	<input type="submit" name="Submit" value="提交" onclick="mysubmit()"/>
	</label>
	<label>
	<input type="reset" name="Submit2" value="重置" />
	</label>
	<label>
	<input type="button" name="Submit3" value="关闭" onclick="window.close()"/>
	</label></td>
	</tr>
	</table>

</label>

</form>

运行本实例，结果如图3.17所示。

3.6.2 String对象

String对象是动态对象，需要创建对象实例后才能引用其属性和方法。但是，由于在JavaScript中可以将用单引号或双引号括起来的字符串当作一个字符串对象的实例，所以可以直接在某个字符串后面加上点“.”去调用String对象的属性和方法。下面对String对象的常用属性和方法进行详细介绍。

String对象的属性

String对象最常用的属性是length，该属性用于返回String对象的长度。Length属性的语法格式如下：

string.length

返回值：一个只读的整数，它代表指定字符串中的字符数，每个汉字按一个字符计算。

例3.31 获取字符串对象的长度。代码如下：

“flowre的哭泣”.length; //值为9

“wgh”.length; //值为3

String对象的方法

String对象提供了很多用于对字符串进行操作的方法，如表3.11所示。

表3.11 String对象的常用方法

方法	描述
anchor(name)	为字符串对象中的内容两边加上HTML的<a name=name></a>标记对
big()	为字符串对象中的内容两边加上HTML的<big></big>标记对
bold()	为字符串对象中的内容两边加上HTML的<b></b>标记对
charAt(index)	返回字符串对象中指定索引号的字符组成的字符串，位置的有效值为0到字符串长度减1的数值。一个字符串第一个字符的索引位置为0，第二个字符位于索引位置1，以此类推。当指定的索引位置超出有效范围时，charAt()方法返回一个空字符串
charCodeAt(index)	返回一个整数，该整数表示字符串对象中指定位置处的字符的Unicode编码
concat(s1,...,sn)	将调用方法的字符串与指定字符串结合，结果返回新字符串
fontcolor()	为字符串对象中的内容两边加上HTML的<font></font>标记对,并设置color属性，可以是颜色的十六进制值，也可以是颜色的预定义名
fontsize(size)	为字符串对象中的内容两边加上HTML的<font></font>标记对,并设置size属性
indexOf(pattern)	返回字符串中包含pattern所代表参数第一次出现的位置值。如果该字符串中不包含要查找的模式，则返回-1
indexOf(pattern, startIndex)	返回字符串中包含pattern所代表参数第一次出现的位置值。如果该字符串中不包含要查找的模式，则返回-1，只是从startIndex指定的位置开始查找
lastIndexOf(pattern)	返回字符串中包含pattern所代表参数最后一次出现的位置值，如果该字符串中不包含要查找的模式，则返回-1
lastIndexOf(pattern,startIndex)	返回字符串中包含pattern所代表参数最后一次出现的位置值，如果该字符串中不包含要查找的模式，则返回-1，只是检索从startIndex指定的位置开始
localeCompare(s)	用特定比较方法比较字符串与s字符串。如果字符串相等，则返回0，否则返回一个非0数字值

注： anchor ['æŋkə] n. 锚；抛锚停泊；靠山；新闻节目主播 vt. 抛锚；使固定；主持节目 vi. 抛锚 adj. 末棒的；最后一棒的

font [fɒnt] n. 字体；字形

locale [ləʊ'kɑːl] n. 场所，现场

下面对比较常用的方法进行详细介绍。

（1）indexOf()方法

indexOf()方法用于返回String对象内第一次出现子字符串的字符位置。如果没有找到指定的子字符串，则返回-1。其语法格式如下：

string.indexOf(substring[,startIndex])

参数说明：

（1） subString: 必选项。要在String对象中查找的子字符串。

（2）startIndex: 可选项。该整数值指出在String对象内开始查找索引。如果省略，则从字符串的开始处查找。

例3.32 从一个邮箱地址中查找@所在的位置，可以用下面的代码：

var str= “wgh717@sohu.com”;

var index=str.indexOf(‘@’); //返回的索引值为6

var index=str.indexOf(‘@’,7); //返回值为-1

说明：由于在JavaScript中，String对象的索引值是从0开始的，所以此处返回的值为6，而不是7。String对象各字符的索引值如图3.18所示。

说明： String对象还有一个lastIndexOf()方法，该方法的语法格式同indexOf()方法类似，所不同的是，indexOf()从字符串的第一个字符开始查找，而lastIndexOf()方法从字符串的最后一个字符开始查找。

例3.33 下面的代码将演示indexOf()方法与lastIndexOf()方法的区别。

var str= “2016-05-15”;

var index= str.indexOf(‘-’); //返回的索引值为4

var lastIndex= str.lastIndexOf(‘-’); //返回的索引值为7

（2）substr()方法

substr()方法用于返回指定字符串的一个子串。其语法格式如下：

string.substr(start[,length])

参数说明：

① start: 用于指定获取子字符串的起始下标，如果是一个负数，那么表示从字符串的尾部开始算起的位置。即-1代表字符串的最后一个字符，-2代表字符串的倒数第二个字符，以此类推。

② length: 可选项,用于指定子字符串中字符的个数。如果省略该参数，则返回从start开始位置到字符串结尾的子串。

例3.34 使用substr()方法获取指定字符串的子串，代码如下：

var word= “One World One Dream! ”;

var subs=word.substr(10,9); //subs的值为One Dream

（3）substring()方法

substring()方法用于返回指定字符串的一个子串。其语法格式如下：

string.substring(from[,to])

参数说明：

① from: 用于指定要获取子字符串的第一个字符在string中的位置。

② to: 可选项,用于指定要获取子字符串的最后一个字符在string中的位置。

注意： 由于substring()方法在获取子字符串时，是从string中的from处到to-1处复制，所以to的值应该是要获取子字符串的最后一个字符在string中的位置加1。如果省略该参数，则返回从from开始到字符串结尾处的子串。

例3.35 使用substring()方法获取指定字符串的子串，代码如下：

var word= “One World One Dream! ”;

var subs=word.substring(10,19); //subs的值为One Dream

（4）replace()方法

replace()方法用于替换一个正则表达式匹配的子串。其语法格式如下：

string.replace(regExp,substring);

参数说明：

① regExp: 一个正则表达式。如果正则表达式中设置了标志g，那么该方法将用替换字符串替换检索的所有与模式匹配的子串，否则只替换所检索到的第一个与模式匹配的子串。

② substring: 用于指定替换文本或生成替换文本的函数。如果substring是一个字符串，那么每个匹配都将由该字符串替换，但是在substring中的 “$”字符具有特殊的意义，如表3.12所示。

表3.12 substring中的 “$” 字符的意义

字符	替换文本
$1,$2,...,$99	与regExp中的第1-99个子表达式匹配的文本
$&	与regExp相匹配的子串
$`	位于匹配子串左侧的文本
$’	位于匹配子串右侧的文本
$$	直接量—$符号

例3.36 去掉字符串中的首尾空格。

① 在页面中添加用于输入原字符串和显示转换后的字符串的表单及表单元素，具体代码如下：

原字符串：

转换后的字符串：

</form>

② 编写自定义的JavaScript函数trim(),在该函数中应用String对象的replace()方法去掉字符串中的首尾空格。trim()函数的具体代码如下：

function trim(){

var str= form1.oldString.value; //获取原字符串

if(str== “”){ //当原字符串为空时

alert(“请输入原字符串”);

form1.oldString.focus(); return;

}else{

var objExp=/(^\s*)|(\s*$)/g; //创建RegExp对象

str=str.replace(objExp, “”); //替换字符串中的首尾空格

}

form1.newString.value= str;

//将转换后的字符串写入“转换后的字符串”文本框中

}

</script>

③ 在“去掉字符串的首尾空格”按钮的onclick事件中调用trim（）函数，具体代码如下：

运行程序，输入原字符串，单击“去掉字符串的首尾空格”按钮，将去掉字符串中的首尾空格，并显示到“转换后的字符串”文本框中，如图3.19所示。

（5）split()方法

split()方法用于将字符串分割为字符串组。其语法格式如下：

string.split(delimiter,limit)

参数说明：

① delimiter:字符串或正则表达式，用于指定分隔符。

② limit: 可选项,用于指定返回数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数字，否则整个字符串都会被分割，而不考虑其长度。

注意：在使用split()方法分割数组时，返回的数组不包括delimiter自身。

例3.37 将字符串 “2011-10-15” 以 “-”为分隔符分割成数组，代码如下：

var str= “2011-10-15 ”;

var arr= str.split(“-”); //分割字符串数组

document.write(“字符串”+str+ “进行分割后的数组为：<br>”);

// 通过for循环输出各个数组元素

for(i=0;i<arr.length;i++) {

document.write(“arr[“+i+”]: “+arr[i]+”<br>”);

}

3.6.3 Date对象

在Web程序开发的过程中，可以使用JavaScript的Date对象来对日期和时间进行操作。例如，如果想在网页中显示计时的时钟，就可以使用Date对象来获取当前系统的时间并按照指定的格式进行显示。下面将对Date对象进行详细介绍。

创建Date对象

Date对象是一个有关日期和时间的对象。它具有动态性，即必须使用new运算符创建一个实例。创建Date对象的语法格式如下：

dateObj=new Date()

dateObj=new Date(dateValue)

dateObj=new Date(year,month,date[,hours[, minutes[,seconds[,ms]]]])

参数说明：

dateValue:如果是数值，则表示指定日期与1970年1月1日午夜全球标准时间相差的毫秒数；如果是字符串，则dateValue按照parse()方法中的规则进行解析。

注： parse [pɑːz] vt. 解析；从语法上分析 vi. 理解；从语法上分析 n. 从语法上分析；分列

year:一个4位数的年份。如果输入的是0～99之间的值，则给它加上1900。

month:表示月份，值为0～11之间的整数，即0代表1月份。

date:表示日，值为1～31之间的整数。

hours: 表示小时，值为0～23之间的整数。

minutes: 表示分钟，值为0～59之间的整数。

seconds: 表示秒钟，值为0～59之间的整数。

ms: 表示毫秒，值为 0～999之间的整数。

例3.38 创建一个代表当前系统日期的Date对象，代码如下：

var now =new Date();

注意：在上面的代码中，第二个参数应该是当前月份-1，而不能是当前月份5，如果是5则表示6月份。

Date对象的方法

Date对象没有提供直接访问的属性，只具有获取、设置日期和时间的方法。Date对象的常用方法如表3.13所示。

表3.13 Date对象的常用方法

方法	描述	示例
get[UTC]FullYear()	返回Date对象中的年份，用4位数表示，采用本地时间或世界时	new Date().getFullYear(); //返回值为2016/10/16
get[UTC]Month()	返回Date对象中的月份（0～11），采用本地时间或世界时	new Date().getMonth();//返回值为4
get[UTC]Date()	返回Date对象中的日（1～31），采用本地时间或世界时	new Date().getDate();//返回值为18
get[UTC]Day()	返回Date对象中的星期（0～6），采用本地时间或世界时	new Date().getDay();//返回值为1
get[UTC]Hours()	返回Date对象中的小时数（0～23），采用本地时间或世界时	new Date().getHours();//返回值为9

注：协调世界时(英:Coordinated Universal Time ，法: Temps Universel Coordonné

)，又称世界统一时间，世界标准时间，国际协调时间。英文(CUT)和法文(TUC)的缩写不同，作为妥协，简称UTC。

例3.39 实时显示系统时间。（例3.10，代码3.10）。

（1）在页面的合适位置添加一个id为clock的 <div>标记，关键代码如下：

（2）编写自定义的JavaScript函数realSysTime()，在该函数中使用Date对象的相关方法获取系统日期。realSysTime()函数的具体代码如下：

function realSysTime(clock){

var now=new Date(); //创建Date对象

var year=now.getFullYear(); //获取年份

var month=now.getMonth(); //获取月份

var date=now.getDate(); //获取日期

var day=now.getDay(); //获取星期

var hour=now.getHours(); //获取小时

var minu=now.getMinutes(); //获取分钟

var sec=now.getSeconds(); //获取秒钟

month=month+1;

var arr_week=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");

var week=arr_week[day]; //获取中文的星期

var time=year+"年"+month+"月"+date+"日 "+week+" "+hour+":"+minu+":"+sec; //组合系统时间

clock.innerHTML="当前时间："+time; //显示系统时间

}

（3）在页面的载入事件中每隔1秒调用一次realSysTime()

函数，实时显示系统时间，具体代码如下：

window.onload=function(){

window.setInterval("realSysTime(clock)",1000); //实时获取并显示系统时间

}

注意：setInterval() 周期性执行指定的代码

运行本实例，结果如图3.21所示。

3.7 DOM技术

DOM是Document Object Model（文档对象模型）的简称，是表示文档（如HTML文档）和访问、操作构成文档的各种元素（如HTML标记和文本串）的应用程序接口（API）。它提供了文档中独立元素的结构化、面向对象的表示方法，并允许通过对象的属性和方法访问这些对象。另外，文档对象模型还提供了添加和删除文档对象的方法，这样能够创建动态的文档内容。DOM也提供了处理事件的接口，它允许捕获和响应用户以及浏览器的动作。下面将对其进行详细介绍。

3.7.1 DOM的分层结构

在DOM中，文档的层次结构以树形表示。树是倒立的，树根在上，枝叶在下，树的节点表示文档中的内容。DOM树的根节点是个Document对象，该对象的documentElement属性引用表示文档根元素的Element对象。对于HTML文档，表示文档根元素的Element对象是<html>标记，<head>和<body>元素是树的枝干。

例3.40 一个简单的HTML文档说明DOM的分层结构。代码如下：

<html>

<head>

<title>一个HTML文档</title>

</head>

<body>

欢迎访问明日科技网站！

<br>

http://www.mingribook.com</a>

</body>

</html>

上面的HTML文档的运行结果如图3.22所示，对应的Document对象的层次结构如图3.23所示。

说明：在树形结构中，直接位于一个节点之下的节点称为该节点的子节点（children）；直接位于一个节点之上的节点称为该节点的父节点（parent）；位于同一层次，具有相同父节点的节点是兄弟节点(sibling)。一个节点的下一个层次的节点集合是该节点的后代（descendant）；一个节点的父节点、祖父节点及其他所有位于它之上的节点集合是该节点的祖先（ancestor）。

注： sibling ['sɪblɪŋ] n. 兄弟姊妹；民族成员

descendant [dɪ'send(ə)nt] adj. 下降的；祖传的 n. 后裔；子孙

ancestor ['ænsestə] n. 始祖，祖先；被继承人

3.7.2 遍历文档

在DOM中，HTML文档中各个节点被视为各种类型的Node对象，并且将HTML文档表示为Node对象的树。对于任何一个树形结构来说，最常做的就是遍历树。在DOM中，可以通过Node对象的parentNode、firstChild、nextChild、lastChild、previousSibling等属性来遍历文档树。Node对象的常用属性如表3.14所示。

表3.14 Node对象的常用属性

属性	类型	描述
parentNode	Node	节点的父节点，没有父节点时为null
childNodes	Node	节点的所有子节点的NodeList
firstChild	Node	节点的第一个子节点，没有则为null
lastChild	Node	节点的最后一个子节点，没有则为null
previousSibling	Node	节点的上一个节点，没有则为null
nextChild	Node	节点的下一个节点，没有则为null
nodeName	String	节点名
nodeValue	String	节点值
nodeType	Short	表示节点类型的整型常量

由于HTML文档的复杂性，DOM定义了nodeType来表示节点的类型。下面以列表的形式给出Node对象的节点类型、节点名、节点值及节点类型常量，如表3.15所示。

表3.15 Node对象的节点类型、节点名、节点值及节点类型常量

节点类型	节点名	节点值	节点类型常量
Attr	属性名	属性值	ATTRIBUTE_NODE(2)
CDATASection	#cdata-section	CDATA段内容	CDATA_SECTION_NODE(4)
Comment	#comment	注释的内容	COMMENT_NODE(8)
Document	#document	null	DOCUMENT_NODE(9)
DocumentFragment	#document-fragment	null	DOCUMENT_FRAGMENT_NODE(11)
DocumentType	文档类型名	null	DOCUMENT_TYPE_NODE(10)
Element	标记名	null	ELEMENT_NODE(1)
Entity	实体名	null	ENTITY_NODE(6)
EntityReference	引用实体名	null	ENTITY_REFERENCE_NODE(5)
Notation	符号名	null	NOTATION_NODE(12)
ProcessionInstruction	目标	除目标以外的所有内容	PROCESSION_INSTRUCTION_NODE(7)
Text	#text	文本节点内容	TEXT_NODE(3)

例3.41 遍历JSP文档，获取该文档中的全部标记及标记总数。（例3.11，代码3.11）。

（1）编写index.jsp文件，在该文件中添加提示性文字及进入明日科技网站的超链接。具体代码如下：

<%@ page language="java" pageEncoding="GBK"%>

<html>

<head>

<title>一个简单的文档</title>

</head>

<body>

欢迎访问明日科技网站！

<br>

http://www.mingribook.com</a>

</body>

</html>

（2）编写JavaScript代码，用于获取文档中全部的标记，并统计标记的个数。具体代码如下：

var elementList = ""; //全局变量，保存Element标记名，使用完毕要清空

function getElement(node) { //参数node是一个Node对象

var total = 0;

if(node.nodeType==1) { //检查node是否为Element对象

total++; //如果是，计数器加1

elementList = elementList + node.nodeName + "、"; //保存标记名

}

var childrens = node.childNodes; //获取node的全部子节点

for(var m=node.firstChild; m!=null;m=m.nextSibling) {

total += getElement(m); //对每个子节点进行递归操作

}

return total;

}

function show(){

var number=getElement(document); //获取标记总数

elementList=elementList.substring(0,elementList.length-1); //去除字符串中最后一个逗号

alert("该文档中包含："+elementList+"等"+number+"个标记！");

elementList=""; //清空全局变量

}

</script>

（3）在页面的onload事件中，调用show()方法获取并显示文档中的标记及标记总数。具体代码如下：

运行程序，将显示如图3.24所示的页面，并弹出提示对话框显示文档中的标记及标记总数。

3.7.3 获取文档中的指定元素

虽然通过3.7.2节中介绍的遍历文档树中全部节点的方法可以找到文档中指定的元素，但是这种方法比较麻烦。下面介绍两种直接搜索文档中指定元素的方法。

通过元素的id属性获取元素

使用Document对象的getElementsById()方法可以通过元素的id属性获取元素。例如，获取文档中id属性为userList的节点。代码如下：

document.getElementById(“userList”);

通过元素的name属性获取元素

使用Document对象的getElementsByName()方法可以通过元素的name属性获取元素。与getElementsById()方法不同的是，该方法的返回值为一个数组，而不是一个元素。如果想通过name属性获取页面中唯一的元素，可以通过获取返回数组中下标值为0的元素进行获取。例如，获取name属性为userName的节点。代码如下：

document.getElementByName(“userName”)[0];

3.7.4 操作文档

在DOM中不仅可以通过节点的属性查询节点，还可以对节点进行创建、插入、删除和替换等操作。这些操作都可以通过节点（Node）对象提供的方法来完成。Node对象的常用方法如表3.16所示。

表3.16 Node对象的常用方法

方法	描述
insertBefore(newChild,refChild)	在现有节点refChild之前插入节点newChild
replaceChild(newChild,oldChild)	将子节点列表中的子节点oldChild换成newChild，并返回oldChild节点
removeChild(oldChild)	将子节点列表中的子节点oldChild删除，并返回oldChild节点
appendChild(newChild)	将节点newChild添加到该节点的子节点列表末尾。如果newChild已经在树中，则先将其删除
hasChildNodes()	返回一个布尔值，表示节点是否有子节点
cloneNode(deep)	返回这个节点的副本（包括属性）。如果deep的值为true，则复制所有包含的节点；否则只复制这个节点

例3.42 应用DOM操作文档，实现添加评论和删除评论的功能。（例3.12，代码3.12）。

（1）在页面的合适位置添加一个1行2列的表格，用于显示评论列表，并将该表格的ID属性设置为comment。具体代码如下：

<table width="600" border="1" align="center"

cellpadding="0" cellspacing="0"

bordercolor="#FFFFFF" bordercolorlight="#666666" bordercolordark="#FFFFFF" id="comment">

<tr>

<td width="18%" height="27" align="center"

bgcolor="#E5BB93"> 评论人</td>

td width="82%" align="center" bgcolor="#E5BB93">评论内容</td>

</tr>

</table>

（2）在评论列表的下方添加一个用于收集评论信息的表单及表单元素。具体代码如下：

评论人：<input name="person" type="text" id="person" size="40">

评论内容：<textarea name="content" cols="60" rows="6" id="content"></textarea>

</form>

（3）编写自定义JavaScript函数addElement()，用于在评论列表中添加一条评论信息。在该函数中，首先将评论信息添加到评论列表的后面，然后清空评论人和评论内容文本框。具体代码如下：

function addElement() {

//创建TextNode节点

var person =

document.createTextNode(form1.person.value);

//创建代表评论人的TextNode节点

var content =

document.createTextNode(form1.content.value);

//创建代表评论内容的TextNode节点

//创建td类型的Element节点

var td_person = document.createElement("td");

var td_content = document.createElement("td");

var tr = document.createElement("tr"); //创建一个tr类型的Element节点

var tbody = document.createElement("tbody"); //创建一个tbody类型的Element节点

//将TextNode节点加入到td类型的节点中

td_person.appendChild(person); //添加评论人

td_content.appendChild(content); //添加评论内容

//将td类型的节点添加到tr节点中

tr.appendChild(td_person);

tr.appendChild(td_content);

tbody.appendChild(tr); //将tr节点加入tbody中

var tComment = document.getElementById("comment"); //获取table对象

tComment.appendChild(tbody); //将节点tbody加入节点尾部

form1.person.value=""; //清空评论人文本框

form1.content.value=""; //清空评论内容文本框

}

（4）编写自定义JavaScript函数deleteFirstE()，用于将评论列表中的第一条评论信息删除。deleteFirstE()函数的具体代码如下：

//删除第一条评论

function deleteFirstE(){

var tComment = document.getElementById("comment"); //获取table对象

if(tComment.rows.length>1){

tComment.deleteRow(1); //删除表格的第二行，即第一条评论

}

（5）编写自定义JavaScript函数deleteLastE()，用于将评论列表中的最后一条评论信息删除。deleteLastE()函数的具体代码如下：

//删除最后一条评论

function deleteLastE(){

var tComment = document.getElementById("comment"); //获取table对象

if(tComment.rows.length>1){

tComment.deleteRow(tComment.rows.length-1); //删除表格的最后一行，即最后一条评论

}

（6）分别添加“发表”按钮、“删除第一条评论”按钮和“删除最后一条评论”按钮，并在各按钮的onclick事件中，调用发表评论函数addElement()函数、删除第一条评论函数deleteFirstE()和删除最后一条评论函数deleteLastE()。另外，还需要添加“重置”按钮。具体代码如下：

<input name="Button" type="button"

class="btn_grey" value="发表"

onClick="addElement()">

<input name="Button" type="button"

class="btn_grey" value="删除第一条评论"

onClick="deleteFirstE()">

运行程序，在“评论人”文本框中输入评论人，在“评论内容”文本框中输入评论内容，单击“发表”按钮，即可将该评论显示到评论列表中；单击“删除第一条评论”按钮，将删除第一条评论；单击“删除最后一条评论”按钮，将删除最后一条评论，如图3.25所示。

3.8 小结

本章首先对什么是JavaScript、JavaScript的主要特点以及JavaScript与Java之间的区别作了简要介绍；然后对JavaScript的基本语法、流程控制语句、函数、事件处理、常用对象等作了详细的介绍；最后对DOM技术进行了详细的介绍。在进行Ajax开发时，DOM技术也是必不可少的，所以这部分内容也需要读者重点掌握。

注： Ajax ['eidʒæks] 创建交互式 Web 应用程序而无需牺牲浏览器兼容性的流行方法（Asynchronous JavaScript and XML）。

asynchronous [ə'sɪŋkrənəs; eɪ-] adj. [电] 异步的；不同时的；不同期的

3.9 实践与练习

1. 应用JavaScript检测输入的日期格式是否合法。

2. 应用JavaScript验证身份证号码是否合法。

3. 应用JavaScript实现日期倒计时。

posted @ 2020-03-17 09:13 小西贝呦阅读(614) 评论(0) 编辑收藏举报

刷新页面返回顶部

小西贝

let's go laker

第3章 JavaScript脚本语言

公告