第十章 JavaScript的应用

JavaScript 概述与核心特性深度解析

在当今的网页开发领域，HTML 和 CSS 技术构建出了信息丰富且样式美观的网页框架，但在交互性方面却存在明显局限。JavaScript 的出现恰好弥补了这一短板，作为一种强大的脚本语言，它为网页注入了灵动的交互性与绚丽的特效，极大地提升了用户体验。本文将深入剖析 JavaScript 的核心特性与应用场景，涵盖其基本概念、语法结构、对象体系以及事件驱动机制等关键方面，旨在为读者全面呈现这一语言的魅力与价值。

一、JavaScript 简介

JavaScript 是一种基于对象（Object）和事件驱动（Event Driven）的脚本语言，具备卓越的安全性能。它与 HTML 和 Java 语言紧密协作，在 Web 页面中实现与用户的无缝交互，无需繁琐的服务器端数据往返传输，直接在客户端处理应用程序逻辑，显著提升了响应速度和交互效率。其显著特点包括：

（一）简单性

JavaScript 采用简洁的小程序段编写方式，作为解释性语言，无需复杂的编译过程，极大地简化了开发流程，降低了初学者的入门门槛。

（二）动态性

能够实时响应用户的输入操作，无需借助 Web 服务程序的中转，通过事件机制迅速捕捉并处理用户请求，为网页带来即时的动态反馈。

（三）跨平台性

依托于浏览器运行，与操作系统环境无关，只要计算机具备浏览器且支持 JavaScript，代码就能稳定执行，确保了广泛的兼容性和可移植性。

（四）安全性

严格限制对本地硬盘的访问权限，禁止数据随意存储到服务器，同时防止对网络文档的非法修改与删除操作，仅允许通过浏览器进行安全的信息浏览与动态交互，有效保障了数据的完整性与安全性。

（五）基于对象的特性

JavaScript 不仅是基于对象的语言，还展现出面向对象的编程风格，能够将特定功能封装为独立对象，便于代码的组织、复用与维护，提升了开发效率和代码质量。

10.1JavaScript 入门案例

JavaScript 程序无法独立运行，必须嵌入 HTML 文件中。通常将 JavaScript 代码置于 `script` 标记内，由浏览器的 JavaScript 脚本引擎负责解释执行。

html 复制代码

<!DOCTYPE html>
 
<html>
 
<head>
 
    <meta charset="utf-8">
 
    <title></title>
 
</head>
 
<body>
 
    <script type="text/javascript">
 
        document.write('Hello World!');
 
    </script>
 
</body>
 
</html>

在上述示例中，`script` 标记成对出现，`type` 属性指定脚本类型为 "text/javascript"，表明这是一段 JavaScript 代码。此代码在页面加载时会立即执行，在页面中输出 "Hello World!"。

10.1.3.1JavaScript 放置的位置

JavaScript 代码在页面中的放置位置主要有以下几种选择，各有其特点与应用场景：

10.1.3.2标记中的脚本

将 `script` 标记放置在头部 `head` 标记内时，JavaScript 代码通常需定义为函数形式，并在主体 `body` 标记内通过调用或事件触发执行。这种方式使得脚本在页面装载时提前载入，当在主体中调用时可迅速响应，有效提升了脚本的执行效率。

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			function message(){
				alert("调研JS函数！sum(100,200)="+sum(100,200));
			}
			function sum(x,y){
				return x+y;
			}
		</script>
	</head>
	<body>
		<p>无返回函数:message()</p>
		<p>有返回函数:sum(x,y)</p>
		<form>
		<input name="btncal" type="button" onclick="message();" value="计算并显示两个数的和"/>
		</form>
	</body>
</html>

10.1.3.3 外部js文件中的脚本

除了将JavaScript代码写在head和body部分以外，也可将JavaScript 函数单独写成个js

文件，在HTML文档中引用该js文件

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>调用外部js文件的JavaScript函数</title>
		<script type="text/javascript" src="js/abc.js">
			document.write(这条语言无用));
		</script>
	</head>
	<body>
		<form>
			<input name="btn1" type="button" onclick="message()" value="调用外部js文件的JavaScript函数"/>
		</form>
	</body>
</html>

10.1.3.4 事件处理代码中的脚本

JavaScript 代码除了上述三种放置位置外，还可直接写在事件处理代码中

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>直接调用JavaScript函数</title>
	</head>
	<body>
		<form>
			<input type="button" onclick="alert('直接在事件处理代码中加入JavaScript代码')"
			 value="直接调用JavaScript函数"/>
		</form>
	</body>
</html>

10.2 JavaScript语法

10.2.1 语法基础

在运用JavaScript语言编写程序时应注意以下几点：

10.2.1.1 区分大小写

在JavaScript语言中，对大小写是敏感的，这在现在的很多开发语言中都是如此，所以读者要养成一种良好的习惯，这样就可以避免调试程序时遇到这些低级错误。

10.2.1.2 变量不区分类型

JavaScript中变量声明，采用其弱类型，即变量在使用前无须进行变量数据类型声明，

而由解释器在运行时检查其数据类型，例如：

x=1234;y="1234"

根据JavaScript变量的申明方式，可知前者说明x为数值型变量，而后者说明y为字符

串型变量。

10.2.1.3 每行代码结尾可以省略分号

在JavaScript里面每条语句结尾的分号";"不是必要的，如果多个语句写在一行上那么语句之间的分号";"才是必需的，最后一条语句的分号";"可以省略。为了养成良好的编程习惯，建议还是在每条语句后面加上分号。

10.2.1.4 注释与C、C++、Java等语言相同

注释就是对代码的解释和说明，目的是为了让别人和自己容易读懂程序。JavaScript的

注释形式与C、C++、Java等语言相同，格式如下：

//单行注释
/ *
多行注释

10.2.2 标识符和常用变量

10.2.2.1 标识符

标识符是计算机语言中用来表示变量名、函数名等的有效字符序列，简单来说，标识符就是一个名字，JavaScript关于标识符的规定如下:

(1)必须使用英文字母或者下划线开头。

(2)必须使用英文字母、数字、下划线组成，不能出现空格或制表符。

(3)不能使用 JavaScript 关键字与 JavaScript 保留字。

(4)不能使用 JavaScript语言内部的单词，比如Infinity，NaN，undefined 等。

(5)大小写敏感，如 name 和 Name 是不同的两个标识符。

合法的标识符:Hello、-12th、sum、Dog23 等。

不合法的标识符:if、3com、case、switch 等。

10.2.2.2 变量声明

在JavaScript 语言环境中，变量是用于存储信息的容器，关键字 var 可应用于JavaScripl中任何类型的变量声明。JavaScript 是采用的隐式变量声明，但要注意在JavaScript语言的任何位置进行隐式变量声明会将变量声明为全局变量，而函数内的局部变量则必须使用var来声明变量，因此，在声明变量时，需要根据变量的作用范围来声明变量。

变量声明格式如下

var count; //单个声明

var count,amount,level; //用单个var 关键字声明的多个变量

var count=0,amount=100; //一条语甸中的变量声明和初始化

10.2.2.3 变量类型

JavaScript 有6种数据类型，主要的类型有Number 数值型、String字符型、Object 对象以及Boolean布尔型，其他两种类型为Null和 Undefined。

（1)Number 数值型。JavaScript支持整数和浮点数。整数可以为正数、0或负数；浮点数包含小数点，例如3.53、-534.87等都是浮点数。浮点数还可以采用科学计数法进行表示，如3.5E15 表示3.5×10"。

（2)String字符型。字符型数据又称为字符串型，由若干个字符组成，并且用单引号或

双引号封装起来，例如："你好！"" this is string""学习'语言"。

在使用字符串的过程中，有时会遇到一种情况：在一个字符串中需要使用单引号或双引号。正确的方法是在由双引号标记的字符串中引用字符时使用单引号，在由单引号标记的学符串中引用字符时使用双引号，即单引号、双引号必须成对使用相互包含，但不能交叉。例如：

"热烈欢迎参加JavaScript 技术研讨的专家"

//正确的用法

"学习不是一件容易"的事件'；

//错误的用法

（3)Boolean布尔型。Boolean 值有true和false，这是两个特殊值，可以将他们转换为其他类型的数据，例如可将值为true的布尔型数据转换为整数1，而将值为flse的布尔型数据转换为整数0。但不能用true表示1或false表示0。

（4)Undefined 数据类型。JavaScript 会对未赋值变量赋值为undefined。

（5）Null数据类型。这是一个对象，但是为空。因为是对象，所以typeof null 返回

"Object"，注意null是Javascript 保留关键字。

（6)Object类型。除了上面提到的各种常用类型外，对象类型也是JavaScript中的重要

组成部分。

10.2.3 运算符与表达式

JavaScript 运算符主要有:算术运算符、关系运算符、逻辑运算符、赋值运算符、条件运算符、逗号运算符等。根据操作数的个数，可以将运算符分为一元运算符、二元运算符和三元运算符。

由操作数(变量、常量、函数调用等)和运算符结合在一起构成的式子称为"表达式"，最简单的表达式可以是常量名称

10.2.3.1 算术运算符和表达式

算术运算符负责算术运算，用算术运算符和运算对象（操作数）连接起来符合规则的

式子，称为算术表达式。

10.2.3.2 关系运算符和表达式

关系运算符用于比较运算符两端的表达式的值，确定二者的关系，根据运算结果返回一个布尔值。用关系运算符和操作数连接起来符合规则的式子，称为关系表达式

10.2.3.3 逻辑运算符和表达式

逻辑运算符用来执行逻辑运算，其操作数都应该是布尔型数值和表达式或者是可以转为布尔型的数值和表达式，其运算结果返回true或false。用逻辑运算符和操作数连接起来符合规则的式子，称为逻辑表达式。

10.2.3.4 赋值运算符和表达式

赋值运算符是JavaScript中使用频率最高的运算符之一。赋值运算符要求其左操作数是一个变量、数组元素或对象属性，右操作数是一个任意类型的值，可以为常量、变量、数组元素或对象属性。赋值运算符的作用就是将右操作数的值赋给左操作数。用赋值运算符和操

作数连接起来符合规则的式子，称为赋值表达式

10.2.3.5 条件运算符和表达式

条件运算符是一个三元运算符，条件表达式由条件运算符和三个操作数构成。语法:

变量=表达式1?表达式2:表达式3

说明:

该条件表达式表示，如果表达式1的结果为真(true)，则将表达式2的值赋给变量否则将表达式3的值赋给变量。例如，变量number1、number2比较大小，将较大的数赋值给变量max，

代码如下:

war max ( mumber1>number2)? number1 :number2 ;

10.2.3.6 逗号运算符和表达式

逗号运算符是一个二元运算符，逗号运算符的优先级最低，由逗号运算符和操作数连接起来符合规则的式子，称为逗号表达式，其运算规则是先计算第一个表达式的值，再计算第二个表达式的值，依次类推，计算完所有表达式的值，运算结果为最后一个表达式的值。

例如:warrs=(3+5,10*6); /*先计算第一个表达式3+5的值为8,再计算第二个表达式10*6的值为60,最后将第二个表达式的值60赋给变量rs*/

10.2.4 程序设计

avaScript 脚本语言的基本构成是由控制语句、函数、对象等来实现编程的，其中控制

语句主要有条件分支语句和循环语句。

10.2.4.1 条件分支语句

if-·else语句完成了程序流程块中分支功能：如果其中的条件成立，则程序执行紧接着

条件的语甸或语句块；否则；程序执行clse中的语句戒语句块。其语法如下:

i(条件)

{

/*条件为真执行的语句 */

}

else

{

/*条件为假执行的语句 */

}

if-else 语甸还有一些变形语句。例如，只有部分省略else分支的语句；if... else if ....else...··多分支语句等。

switch 分支语句可以根据一个变量或表达式的不同取值采取不同的处理方法，其语法如下：

switch（表达式）

{

case casel:执行语句 1;break;

case case2:执行语句 2;break;

case case3:执行语句3;break;

default：默认执行语句;

}

如果表达式取的值同程序中提供的任何一条语句都不匹配，将执行default中的语句。关键字break会使代码跳出switch 语句，如果没有关键字break，代码就会继续进人下一个case分支。

10.2.4.2 循环语句

JavaScript 中的循环用来控制同一段代码执行的次数。for语句是最基本的循环语句，语法如下：

for(变量=开始值；变量<=结束值；变量=变量+步进值）

{

/*循环体语句 */

}

只要循环的条件成立，循环体就被反复的执行。

for...·in 语句与C#中foreach（）语句很像，它循环的范围是一个对象所有的属性或是一个数组的所有元素。for...in 语句的语法如下：

for（变量in对象或数组）

/* 循环体语句 */

while 语句所控制的循环，不断地测试条件，如果条件成立，则一直循环，直到条件不再成立。其语法如下：

while(条件)

{

/*循环体语句 */

}

do-- while 语句表示先执行循环体语句一次，再判断条件是否成立，如果条件还成立，

则再执行循环体语句，直到条件不再成立。其语法如下：

{

/* 循环体语句 */

}

while(条件）;

break 语句结束当前的各种循环，并执行循环的下一条语句。

10.2.5 函数

由事件驱动或当它被调用时执行的可重复使用的代码块称为函数，将脚本编写为函数,这样就可以实现按需调用相应的代码函数。

函数在页面起始位置定义，即网页的<head>部分或定义在外部JS文件里面，然后进行外部调用。

10.2.5.1 定义函数

function函数名(varl，var2，var3)

{

/*函数代码*/

}

var、var2、var3 等指的是传人函数的变量或值，为函数的参数;大括号定义了函数的开始和结束。

10.2.5.2 函数返回值

需要返回某个值的函数必须使用return语句。例如：

function sum(a,b)

{

x=a+b;

return x;

}

JavaScript 中的函数无须对函数的返回值进行申明，直接使用retum，返回值的类型可以

是本节提到的6种类型中的任意一种。

10.2.5.3 函数调用

函数的调用很简单，可以通过其名字加上括号中的参数进行调用。如调用上面的sum

函数，可以这样写：sum（5，8)

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>函数调用</title>
		<script type="text/javascript">
			function sayHello(){
				alert("Hello Word!")
			}
		</script>
	</head>
	<body>
		<button onclick="sayHello()">单击这里</button>
	</body>
</html>

10.3 JavaScript对象

10.3.1 对象基础

10.3.1.1 概述

JavaScript 编程是使用"面向对象"的概念，也称为"对象化编程"。JavaScript"面向对象编程"的意思就是把JavaScript能涉及的范围划分成大大小小的对象，对象下面还继续划分对象，所有的编程都以对象为出发点，基于对象，小到一个变量，大到网页文档、窗口甚至屏幕，都是对象。

在JavaScript里面可以创建自己的对象，但在创建用户自定义对象前，需要先学习创建的JavaScript对象，以及如何使用它们。本节后续开始将具体地依次讲解JavaSeript的内建对象。

10.3.1.2 属性

属性是对象的特性值的表述，例如：

var str = Hello World!;

document, writeln(str. length);

</script>

以上示例定义了一个字符串变量，其实字符串也是一个对象，length作为str对象的属

性用来取得字符串的长度。

JavaScript 内建对象的属性可以参阅相关的技术文档，当然在Visual Studio平台中由于有

智能感应功能，就可以很方便地访问对象的属性。

访问用户自定义对象属性的方式和访问JavaScript内建对象的属性方式是一样的，例如：

var person= new object();

person. birthday = 1982-09-09';

属性是通过对一个已有对象的新属性进行赋值的方式来创建的，前面提到声明变量时道

常用关键宇var，但是创建对象属性和赋值时不使用var。

10.3.1.3 方法

方法指对象可以执行的行为(或可以完成的功能)，与属性相同，JavaSeript内建对象本身就自带了很多功能强大的方法，，可以直接调用来完成某些特定的功能，例如:

var str =Hello World!document. writeln ( str. toUpperCase( ));

运行结果为:

HELLO WORLD！

以上示例使用了字符串对象的toUpperCase()方法，其功能是将st 字符串全部转变为大写字母

10.3.2 常用对象

10.3.2.1 window对象

window 对象表示一个浏览器窗口或一个框架。在客户端JavaScript中，window对象是全局对象，所有的表达式都在当前的环境中计算。

（1）窗口操作。window 对象是JavaScript中最大的对象，主要用于操作浏览器窗口。通常要引用它的属性和方法时不用window.xx形式，而直接使用方法名称即可。

通过window 对象移动或调整浏览器窗口的大小，有4种方法：

moveBy（x，y)：从当前位置水平移动窗体x个像素，垂直移动窗体y个像素。x为负数，将向左移动窗体；y为负数，将向下移动窗体。

moveTo（x，y）：移动窗体左上角到相对于屏幕左上角的（x，y）点。当使用负数作为参数时，窗体会移出屏幕的可视区域。

resizeBy（w，h）：相对窗体当前的大小，宽度调整w个像素，高度调整h个像素。如果参数为负值，将缩小窗体，反之扩大窗体。

resizeTo（w，h）：把窗体宽度调整为w个像素，高度调整为h个像素。

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>移动窗口</title>
		<script type="text/javascript">
			function moveWIn(){
				myWindow.moveTo(50,50)
			}
		</script>
	</head>
	<body>
	<script type="text/javascript">
	myWindow=window.open(",",width=200,height=100)
	myWindow.document.write("This is myWindow");
	</script>
	<input type="button" value="Move myWindow" onclick="moveWin()"/>
	</body>
</html>

（2）打开窗口。用open（）打开新窗口。

语法：

window. open(url, name,features,replace);

说明：

url：要载入窗体的URL。

name：新建窗体的名称。

features：代表窗体特性的字符串，字符串中每个特性使用逗号分隔。

replace：一个布尔值，说明新载入的页面是否替换当前载入的页面，此参数通常不用

（3）关闭窗口。用close（）关闭窗口。

语法：

window.close();

例如，关闭一个新建的窗口：

var NewWin= window. open(......);

NewWin.close();

（4）系统对话框。window 对象有三种常用的对话框：

alert（）：显示提示信息，不能对脚本产生任何改变。常见于提醒用户信息不完整、有误等情况。

confirm（）：弹出消息对话框（对话框中包含一个OK按钮与一个Cancel 按钮），一般用于确认信息，返回true或fale，所以主要用于ifelse...判断。常见于用户对信息更改前的确认。

prompt（）：一个带输入框的对话框，可以返回用户填入的字符串，常见于某些留言板

或论坛输入内容那里的插入UBB格式图片。

alert（）方法前面示例讲解过，这里再举例说明confirm（）方法和prompt（）方法的使用

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>confirm的使用</title>
	</head>
	<body>
		<script>
			var userChoice = window.confirm("请选择"确定"或"取消"");
			if(userChoice == true){
				document.write("OK!");
			}
			if(userChoice ==false){
				document.write("Cancel!")
			}
		</script>
	</body>
</html>

（使用prompt（）选择对话框）代码

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>prompt()的使用</title>
	</head>
	<body>
		<script type="text/javascript">
			document.write("您的爱好是---"+ prompt('请问你的爱好？','请输入'));
		</script>
	</body>
</html>

说明：prompt（）方法需要定义两个参数，而第2个参数是可选的，是指文本框输人的默认文本。与confimm（）方法不同的是，prompt（）方法只返回1个值，当浏览者单击"确定"按钮时，返回文本框中输入的文本，如图10-13所示；单击"取消"按钮时，返回值为null。

（5)history 历史对象。window 对象中的history 历史对象包含了用户已浏览的URL的信息，是指浏览器的浏览历史。鉴于安全性的需要，该对象有很多限制。history历史对象有length 这个属性来列出历史的项数。JavaScript 所能管到的历史被限制在用测览器的"前进""后退"键链接到的范围。

history 历史对象有以下方法：

back（)：后退，与按下"后退"键是等效的。

forward（）：前进，与按下"前进"键是等效的。

go（）：用法为 history.go(x)；在历史的范围内指向指定的URL访问地址。如果x<0,

则后退x个地址；如果x>0，则前进x个地址；如果x=0，则刷新现在打开的网页。

10.3.2.2 document对象

document本身是一个对象，但又是JavaScript中window 对象和frames对象的一个属性，其描述当前窗口或指定窗口对象的文档。它包含文档从<head>标签到</lody>标签的全部内容。

用法为document 或<窗口对象>.document，其中document表示当前窗口的文档，<窗口

对象>.document 表示指定窗口的文档。

（1)document 对象属性。

表为document 对象比较常用的属性，其他更多的属性

请查阅JavaScript 的相关技术文档

（查看document对象属性）代码

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document 属性</title>
	</head>
	<body>
		<img src="img/1.bmp" BORDER="0" alt=""/><br />
		<script type="text/javascript">
			document.write("文件地址："+ document.location+"<br/>")
			document.write("文件标题："+ document.title+"<br/>");
			document.write("文件地址："+ document.images[0].src+"<br/>");
		</script>
	</body>
</html>

（2）document对象方法

10.3.2.3 location对象

location 对象用于获取或设置窗体的URL，并且可以用于解析URL，是JavaScript 中最重要的对象之一，location 的中文意思是"位置"。location 既是window 对象的属性又是document 对象的属性，即"window. location== document. location；"。

（1)location 对象属性。location对象包含8个属性，最重要的一个是href属性，代表当

前窗体的URL，其余7个都是当前窗体的URL的一部分

location 对象的8个属性都是可读写的，但通常只对href与hash属性进行写操作。

（location对象）代码

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>location 对象属性</title>
		<script type="text/javascript">
			function currLocation(){alert(window.location)}
			function newLocation(){window.Location="new_file8.html"}
		</script>
	</head>
	<body>
		<input type="button" onclick="currLocation()" value="显示当前的URL"/>
		<input type="button" onclick="nweLocation()" value="改变URL"/>
	</body>
</html>

10.3.2.4 navigator对象

navigator 对象的中文意思为"导航器"，通常用于检测浏览器与操作系统的版本，也是window 对象的属性。

由于navigator 没有统一的标准，因此各个浏览器都有自己不同的navigator版本，navigator 的属性和方法也会有一定的不同。这里介绍普遍支持且常用的部分属性和方法。

（1)navigator 对象属性。navigator 中最重要的是userAgent属性，它用来返回包含浏览器版本等信息的字符串；其次cookieEnabled 也很重要，使用它可以判断用户浏览器是否开启cookienavigator 对象属性及其描述见表

10.3.2.5 screen对象

screen 对象用于获取用户的屏幕信息，是window 对象的属性。

每个window 对象的screen属性都引用一个screen 对象。可以通过screen 对象获取一些用户屏幕的信息，如宽度、高度、像素等，而这些信息对于设置图片和页面在浏览器中显示的大小都是非常有用的。screen 对象的属性应用和浏览器的关系比较密切，所以在应用这些属性时，一定要注意浏览器之间的兼容性

10.4 JavaScript事件

10.4.1 事件及事件处理

JavaScript 中的事件是可以被JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript 函数的事件。例如，在用户单击页面中某按钮时产生一个onClick事件。事件可以是用户在某些内容上的单击、鼠标经过特定元素或按下了键盘上的按键；也可以是某个Web页面加载完成、用户改变了窗口的大小或是滚动了窗口等。

事件处理是对象化编程的一个重要环节，JavaScript 会为特定文档元素的特定类型事件注册一个事件处理程序，该处理程序可以是个函数，也可以是一段代码。事件处理的过程可以这样表示：发生事件→启动事件处理程序→事件处理程序做出反应。其中，要使事件处理程序能够启动，必须先告诉对象发生了什么事情，要启动什么处理程序。事件的处理程序可以是任意JavaScript 语句，但是一般用特定的自定义函数来处理。

指定事件处理程序有三种方法：

（1）直接在 HTML标记中指定。这种方法用得最多

一般形式：

<标记...事件="事件处理程序"[事件="事件处理程序"...]>

例如：

html 复制代码

<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body οnlοad="alert("欢迎访问页面！）">
</body>
</html>

以上示例<body>标记中，在文档加载完毕时弹出一个告警框，显示"欢迎访问页面"。

（2）编写特定对象特定事件的JavaScript。这种方法用得少，但是在某些场合还是很好用的。

一般形式:

（事件处理程序代码）

例如：

html 复制代码

<html><head>
<meta charset="utf-8" />
<title></title>
<script language ="JavaScript" for=" window" event="onload">
alert("欢迎访问页面！）
</script>

</head>

<body>

</body>

</html>

（3）在JavaScript中说明。

一般形式：

<事件主角 -对象>.<事件>=<事件处理程序>;

该方法需要注意的是，"事件处理程序"是真正的代码，而不是字符串形式的代码。如

果事件处理程序是一个自定义函数，如无使用参数的需要，就不要加"（）"

html 复制代码

<html>
<head>
<script type="text/javascript">
window. onerror = ignoreError;
function ignoreError(){
return true;

}

</script>

</head>

<body>

</body>

</html>

10.4.2 常用事件

JavaScript 中常用事件主要包括一般页面事件、鼠标事件、键盘事件等。

页面事件

10.4.3 事件应用举例

(onLoad事件)代码

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>onLoad事件</title>
	</head>
	<body onload="checkCookies()">
		<script type="text/javascript">
			function checkCookies(){
				if(navigator.cookieEnabled==true)
				alert("已启用Cookies");
				else
				alert("未启用Cookies")
			}
		</script>
		<p>提示框会告诉你，浏览器是否已启用Cookies。</p>
	</body>
</html>

以上示例中，当用户打开页面会提示客户端浏览器是否启用Cookie

（onchange事件）代码

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>onchange事件</title>
		<script type="text/javascript">
			function myFunction(){
				var x=document.getElementById("fname");
				x.value=x.value.toUpperCase();
			}
		</script>
	</head>
	<body>
		请输入英文字符；<input type="text" id="fname" onchange="myFunction()"/>
		<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>
	</body>
</html>

当用户在输入框输入英文字符后，离开输入框时，会使输入的字符转换为大写

鼠标事件代码

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>鼠标事件</title>
		<script type="text/javascript">
			function mouseOver(obj) {
				obj.style.color = "blue";
				obj.innerHTML = "把鼠标移开"
			}
			function mouseOut(obj) {
				obj.style.color = "white";
				obj.innerHTML = "把鼠标移到上面"
			}
			function mouseDown(obj) {
				obj.style.backgroundColor = "blue";
				obj.innerHTML = "请释放鼠标按钮";
			}
			function mouseUp(obj) {
				obj.style.backgroundColor = "green";
				obj.innerHTML = "请按下鼠标按钮";
			}
		</script>
	</head>
	<body>
		<div onmouseover="mouseOver(this)" onmouseout="mouseOut( this)" style="background-color:green; width:120px; height:20px; padding:20px; color:#ffffff;">
			把鼠标移到上面
		</div>
		<br />
		<div onmousedown="mouseDown(this)" onmouseup="mouseUp(this)" style="background-color:green; width:120px; height:20px; padding:20px; color:#ffffff;">
			请按下鼠标按钮
		</div>
	</body>
</html>

以上示例中，第一个层中显示文本"把鼠标移到上面"，第二个层中显示文本"请按下鼠标按钮"，如图10-25所示；当用户移动鼠标经过第一个层上时，文本内容改变为"把鼠标移开"，且文本颜色改变为蓝色，如图10-26.所示；当用户鼠标离开第一个层时，文本内容改变为"把鼠标移到上面"，且文本颜色还原为白色；当用户在第二个层上按下鼠标左键时，文本内容改变为"请释放鼠标按钮"，同时背景颜色改变为蓝色

键盘事件代码

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>键盘事件</title>
		<script type="text/javascript">
			function keyDown() {
				alert("你按下了按键");
				if (event.ctrlKey) {
					alert("你按下了Ctrl键");
				}
			}
			function keyPress() {
				alert("你按下了键,并且释放了按键");
			}
		</script>
	</head>
	<body onkeydown="keyDown()" onkeypress="keyPress()">
	</body>
</html>

以上示例中，当用户按下任意一个按键，浏览器会弹出信息框"你按下了按键"，如果按下键为Ctrl键，还会弹出信息框"你按下了Ctr 键"；当用户释放按下的按键后，又会弹出信息框"你按下了键，并且释放了按键"

10.5 综合案例------轮播广告

html 复制代码

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>图片轮播效果</title>  
    <style type="text/css">  
        * {  
            margin: 0;  
            padding: 0;  
            text-decoration: none;  
        }  
        body {  
            padding: 20px;  
        }  
        #container {  
            position: relative;  
            width: 600px;  
            height: 400px;  
            border: 1px solid #333;  
            overflow: hidden;  
            margin-left: auto;  
            margin-right: auto;  
        }  
        #list {  
            position: absolute;  
            z-index: 1;  
            width: 4200px;  
            height: 400px;  
        }  
        #list img {  
            float: left;  
            width: 600px;  
            height: 400px;  
        }  
        #buttons {  
            position: absolute;  
            left: 250px;  
            bottom: 20px;  
            z-index: 2;  
            width: 100px;  
            height: 10px;  
        }  
        #buttons span {  
            float: left;  
            margin-right: 5px;  
            width: 10px;  
            height: 10px;  
            border: 1px solid #fff;  
            border-radius: 50%;  
            background: #333;  
            cursor: pointer;  
        }  
        #buttons .on {  
            background: orangered;  
        }  
        .arrow {  
            position: absolute;  
            top: 180px;  
            z-index: 2;  
            display: none;  
            width: 40px;  
            height: 40px;  
            font-size: 36px;  
            font-weight: bold;  
            line-height: 39px;  
            text-align: center;  
            color: #fff;  
            background-color: rgba(0, 0, 0, .3);  
            cursor: pointer;  
        }  
        .arrow:hover {  
            background-color: rgba(0, 0, 0, .7);  
        }  
        #container:hover .arrow {  
            display: block;  
        }  
        #prev {  
            left: 20px;  
        }  
        #next {  
            right: 20px;  
        }  
    </style>  
    <script type="text/javascript">  
        window.onload = function() {  
            var container = document.getElementById("container");  
            var list = document.getElementById("list");  
            var buttons = document.getElementById("buttons").getElementsByTagName("span");  
            var prev = document.getElementById("prev");  
            var next = document.getElementById("next");  
            var index = 1;  
            var timer;  
 
            function animate(offset) {  
                var newLeft = parseInt(list.style.left) + offset;  
                list.style.left = newLeft + "px";  
                if (newLeft > -600) {  
                    list.style.left = -3000 + "px"; // 循环到最后一张  
                }  
                if (newLeft < -3000) {  
                    list.style.left = -600 + "px"; // 循环到第一张  
                }  
            }  
 
            function play() {  
                timer = setInterval(function() {  
                    next.onclick();  
                }, 2000);  
            }  
 
            function stop() {  
                clearInterval(timer);  
            }  
 
            function buttonsShow() {  
                for (var i = 0; i < buttons.length; i++) {  
                    buttons[i].className = ""; // 清除所有按钮的选中状态  
                }  
                buttons[index - 1].className = "on"; // 设置当前按钮为选中状态  
            }  
 
            prev.onclick = function() {  
                index -= 1;  
                if (index < 1) {  
                    index = 5; // 循环到最后一张  
                }  
                buttonsShow();  
                animate(600);  
            };  
 
            next.onclick = function() {  
                index += 1;  
                if (index > 5) {  
                    index = 1; // 循环到第一张  
                }  
                animate(-600);  
                buttonsShow();  
            };  
 
            for (var i = 0; i < buttons.length; i++) {  
                (function(i) {  
                    buttons[i].onclick = function() {  
                        var clickIndex = parseInt(this.getAttribute("index"));  
                        var offset = 600 * (index - clickIndex);  
                        animate(offset);  
                        index = clickIndex;  
                        buttonsShow();  
                    }  
                })(i);  
            }  
 
            container.onmouseover = stop;  
            container.onmouseout = play;  
            play();  
        };  
    </script>  
</head>  
<body>  
    <div id="container">  
        <div id="list" style="left: -600px;">  
            <img src="img/p5.jpg" alt="5"/>  
            <img src="img/p1.jpg" alt="1"/>  
            <img src="img/p2.jpg" alt="2"/>  
            <img src="img/p3.jpg" alt="3"/>  
            <img src="img/p4.jpg" alt="4"/>  
            <img src="img/p5.jpg" alt="5"/>  
            <img src="img/p1.jpg" alt="1"/>  
        </div>  
        <div id="buttons">  
            <span index="1" class="on"></span>  
            <span index="2"></span>  
            <span index="3"></span>  
            <span index="4"></span>  
            <span index="5"></span>  
        </div>  
        <a href="javascript:;" id="prev" class="arrow">&lt;</a>  
        <a href="javascript:;" id="next" class="arrow">&gt;</a>  
    </div>  
</body>  
</html>