第十章 JavaScript的应用

许静知2024-11-24 19:47

10.1 JavaScript概述

10.1.1 JavaScript简介

JavaScript是一种基于对象(Object)和事件驱动(Event Driven )并具有安全性能的脚本语言,能够与HTML(超文本标记语言)、Java 语言一起在Web页面中与Web客户交互,它无须经过先将数据传给服务器端(Server)、再传回来的过程,而直接可以由客户端(Client)的应用程序处理,从而可以开发客户端的应用程序等。JavaScript是通过嵌入或调入在标准的HTML语言中实现的,弥补了HTML语言的缺陷,是Java与HTML折中的选择,通常具有以下特点。

10.1.1.1 简单性

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

10.1.1.2 动态性

JavaScript是动态的,可以直接响应用户或客户的输入,无须经过Web服务程序,通过事动来响应用户的请求。

10.1.1.3 跨平台性

JavaScrip依赖测览器,与操作环境无关,只要能运行浏览器的计算机、支持 JavaScn 的浏览器就可以正确执行。

10.1.1.4 安全性

JavaScript是一种安全性语言,不允许访问本地的硬盘,并不能将数据存入到服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互,可有效地防止数据的丢失。

10.1.1.5 基于对象的语言

JavaScript是一种基于对象的语言,同时可以看作是一种面向对象的语言。这意味着它能将特定功能封装在对象中。

10.1.2 JavaScript入门案例

JavaScript 程序不能独立运行,必须依赖HTML文件,通常将JavaScript代码放置在script标记内,由浏览器JavaScript 脚本引擎来解释执行。

说明:

script标记是成对标记,以<script>开始,以</script>结束。type属性说明脚本的类型,属性值"text/javascript"意思是使用Javascript编写的程序是文本文件。script标记既可以放在HIML的头部,也可以放在HTML的主体部分,只是装载的时间不同。

10.1.3 JavaScript放置的位置

JavaScript代码一般放置在页面的head 或body 部分。当页面载入时,会自动执行位于body部分的JavaScript;而位于head部分的JavaScript只有被显式调用时才会被执行。

10.1.3.1 head标记中的脚本

script标记放在头部head 标记中,通JavaScript 代码必须定义成函数形式,并在主体body标记内调用或通过事件触发。放在head 标记内的脚本在页面装载时同时载入,这样在主体标记内调用时可以直接执行,提高了脚本执行速度。

说明:

JavaScript自定义函数必须以function关键字开始,然后给自定义函数命名,函数命名时一定遵守标识符命名规范。函数名称后面一定要有一对括号"()",括号内可以有参数,()也可以无参数,多个参数之间用逗号","分隔。函数体语句必须放在大括号"{}"内。

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>
		<h4>head标记内定义两个JS函数</h4>
		<p>无返回值函数：message()</p>
		<p>有返回值函数：sum(x,y)</p>
		<form>
			<input name="btncal" type="button" onclick="message();" value="计算并显示两个数的和"/>
		</form>
	</body>
</html>

10.1.3.2 body标记中的脚本

script 标记放在主体 body 标记中，JavaScript 代码可以定义成函数形式，在主体 body 标记内调用或通过事件触发。也可以在 script 标记内直接编写脚本语句，在页面装载时同时执行相关代码，这些代码执行的结果直接构成网页的内容，在浏览器中可以查看。

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p id="clk">Clicke Here</p>
		<script type="text/javascript">
			var demo=document.getElementById("clk");
			demo.onclick=msg;
			function msg(){
				alert("我是body中的JavaScript脚本");
			}
		</script>
	</body>
</html>

10.1.3.3 外部js文件中的脚本

除了将JavaScript代码写在head和body部分以外，也可以将JavaScript函数单独写成个js文件，在HTML文档中引用该js文件。

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/demo.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></title>
	</head>
	<body>
		<form>
			<input type="button" onclick="alert('直接在事件处理代码中加入JavaScript代码')" value="直接调用JavaScirpt代码"/>
		</form>
	</body>
</html>

10.2 JavaScript语法

10.2.1 语法基础

任何语言的语法学习都是枯燥、单调的，JavaScript 语法也一样，但学好语法是更好地使用JavaScript编写程序的前提。

在运用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、33com、case、switch等。

10.2.2.2 变量声明

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

变量声明格式如下:

var count;//单个声明var count,amount,level;//用单个var关键字声明的多个变量lvar count=0amount=100;//一条语句中的变量声明和初始化

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

var count=0amount=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\\times {10}\^{15}。

(2)String字符型。字符型数据又称为字符串型,由若干个字符组成,并且用单引号或双引号封装起来,例如:"你好!""this is string""学习语言"。

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

"热烈欢迎参加JavaScript技术研讨的专家";//正确的用法

"学习不是一件容易"的事件;//错误的用法

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

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

(5)Null数据类型。这是一个对象,但是为空。因为是对象,所以 typeof null返回"objec{t}\^{39},注意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的值赋给变量。例如,变量number l、number2比较大小,将较大的数赋值给变量max,

10.2.3.6 逗号运算符和表达式

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

10.2.4 程序设计

JavaScript 脚本语言的基本构成是由控制语句、函数、对象等来实现编程的,其中控制语句主要有条件分支语句和循环语句。

10.2.4.1 条件分支语句

if···else语句完成了程序流程块中分支功能:如果其中的条件成立,则程序执行紧接着条件的语句或语句块;否则;程序执行else中的语句或语句块。

10.2.4.2 循环语句

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

10.2.5 函数

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

函数在页面起始位置定义,即网页的$1\lt head\gt $部分或定义在外部JS文件里面,然后进行外部调用。

10.2.5.1 定义函数

function 函数名（var1，var2，var3）

{

/*函数代码*/

}

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

10.2.5.1 定义函数

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

function sum（a，b）

{

x=a+b；

return x；

}

return返回，返回值的类型有六种。

10.2.5.2 函数返回值

函数的调用很简单,可以通过其名字加上括号中的参数进行调用。如调用上面的sum 函数,可以这样写:sum(5,8)。

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 World!");
			}
		</script>
	</head>
	<body>
		<button onclick="sayHello()">点击这里</button>
	</body>
</html>

10.3 JavaScript对象

10.3.1 对象基础

10.3.1.1 概述

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

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

在JavaScript里面创建一个新的空对象，例如：

var o= new object (;

JavaScript 的对象可分为本地对象或内置对象、Browser 对象和 HTML DOM 对象。

（1） 本地对象。本地对象就是 ECMA-262 标准内定义的类，如图，

全局对象是预定义的对象，作为 JavaScript的全局函数和全局属性的占位符。通过使用全局对象，可以访问所有其他预定义的对象、兩数和属性。全局对象不是任何对象的属性。

所以它没有名称。

全局对象只是一个对象，而不是类，它既没有构造函数，也无法实例化一个新的全属对象。

（2） Browser 对象。Browser Objects 也可被称作 BOM，是用来与浏览器窗体网页产生互动的对象。Browser 对象列表如下图，

（3） HIMIL DOM对象。HTML DOM定义了用于 HTML的一系列标准对象，以及访问和处理 HTNL文档的标准方法。其中，最重要的一个对象就是 document 对象，document代表整个 HTML文档，用来访问页面中的所有元素。

10.3.1.2 属性

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

(script type =" text/javascript" >

var str = 'Hello World! ';

document. writeln（str. length）；

/ script>

以上示倒定义了一个字符串变量，其实字符串也是一个对象，length作为 str 对象的原性用来取得字符串的长度。

JavaScirpt内建对象的属性可以参阅相关的技术文档，当然在 Visual Studio 平台中由于智能感应功能，就可以很方便地访问对象的属性。

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

var person=new object();

person.birthday='1982-09-09';

属性是通过对一个已有对象的新属性进行赋值的方式来创建的，前面提到声明变量时通常用关键字var，但是创建对象属性和赋值时不使用var。

10.3.1.3 方法

方法指对象可以执行的行为（或可以完成的功能），与属性相同，JavasScript内建对象木身截自带了很多功能强大的方法，可以直接测用来宛成某些特定的功能，例如：

var str = Hello World!

document. writeln（str. toUpperCase（））；

运行结果为：

HELLO WORLD!

以上示例使用了字符串对象的 IoU pperCase（）方法，其功能是将 stir 字符串全部转变为大写字母。

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）点。当使用负数作为参数时，窗体会移出屏幕的可视区域。

rsreby（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，所以主要用于ifm else•判断。常见于用户对信息更改前的磅认。

prompt（）：一个带输人框的对话框，可以返回用户填入的字符串，常见于某些留言板或论坛输人内容那里的插入 UBB 格式图片。

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

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></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></title>
	</head>
	<body>
		<script type="text/javascript">
			document.write("您的爱好是----"+prompt('请问您的爱好？','请输入'));
		</script>
	</body>
</html>

说明：prompt（）方法需要定义两个参数，而第2个参数是可选的，是指文本框输入的默认文本。与confirm（）方法不同的是，pormpt（）方法只返回1个值，当浏览者单击"确定"按钮时，返回文本框中输入的文本。

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

history 历史对象有以下方法：

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

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

go （）：用法为 history. go（x）；在历史的范围内指向指定的URL.访问地址。如果x<0，则后退x个地址；如果x>0，则前进x个地址；如果x=0，则刷新现在打开的网页。

10.3.2.2 document对象

documnent 本身是一个对象，但又是 JavaScript 中 window 对象和 frames 对象的一个属性，其描述当新窗口或指定窗口对象的文档。它包含文档从<head>标签到 /bot＞标签的全融用送document 或 窗口对象>.document，其中 document 表示当前窗口的文档，＜窗口对象>.document 表示指定窗口的文档。

（1） document对象属性。表10-7为 doceument 对象比较常用的属性，其他更多的属性请查阅 JavaSoript 的相关技术文档。

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></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对象方法。document对象方法与描述如下图，

document对象的方法在JavaScirpt程序中使用的频率非常高。

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 的一部分。其具体描述见表10-9。

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function currLocation(){alert(window.location)}
			function newLocation(){window.location="10.10.html"}
		</script>
	</head>
	<body>
		<input type="button" onclick="currLocation()"value="显示当前URL"/>
		<input type="button" onclick="newLocation()"value="改变URL"/>
	</body>
</html>

location 对象方法。如下图

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

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

（1）

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

（2）navigator对象方法，如下图

10.3.2.5 screen对象

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

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

availWidth与availHeight属性比较常用，它们可以使窗口填满用户显示器屏幕。

10.4 JavaScript事件

10.4.1 事件及事件处理

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

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

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

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

一般形式：

<标记⋯事件="事件处理程序"〔事件="事件处理程序"...］＞例如：

<html>

<head>

<meta charset = "utf-8" />

<title></title>

</head>

<body οnlοad="alert（"欢迎访问页面！"）">

</body> </ html>

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

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

一般形式：

<script language="JavaScript" for="对象"cvent="事件">（事件处理程序代码）

<script>

例如：

<html>

<head>

<meta charset = "utf-8" />

< title></title>

< script language = " JavaScript" for = "window" event = " onload" >

alert（"欢迎访问页面！"

‹/ script>

</head>

<body>

</ body>

<html>

（3）在JavaScript 中说明。

一般形式：

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

该方法需要注意的是，"事件处理程序"是真正的代码，而不是字符串形式的代码。如果事件处理程序是一个自定义函数，如无使用参数的需要，就不要加"（）"。

<html>

<head>

< script type =" text/javascript" >

window. onerror = ignoreError;

function ignoreError () / return true;

‹/ script>

</head>

<body>

</ body>

<html>

这个例子将ignoreError()函数定义为window对象的onerror事件的处理程序。它的功能是忽略该window对象下任何错误。

10.4.2 常用事件

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

10.4.3 事件应用举例

事件的应用常见于下面几种场景：鼠标单击某一元素、页面或图像载入、鼠标悬浮于页面的某个热点之上、在表单中选取输入框、确认表单、键盘按键等。

onLoad事件：

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

onchange事件：

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></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>

鼠标事件（onmouseover、onmouseout、onmousedown、onmouseup）：

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function mouserOver(obj){
				obj.style.color="blue";
				obj.innerHTML="把鼠标移开"
			}
			function mouserOut(obj){
				obj.style.color="red";
				obj.innerHTML="把鼠标移到上面"
			}
			function mouserDown(obj){
				obj.style.backgroundcolor="blue";
				obj.innerHTML="请释放鼠标按钮"
			}
			function mouserUp(obj){
				obj.style.backgroundcolor="red";
				obj.innerHTML="请按下鼠标按钮"
			}
		</script>
	</head>
	<body>
		<div onmousedown="mouserOver(this)"onmouseout="mouseOut(this)"style="background-color:green;width:120px;height:20px;padding:20px;color:#ffffff">
			把鼠标移到上面
		</div>
		<br />
		<div onmousedown="mouserDown(this)"" onmouseup="mouserUp(this)"style="background-color:green;width:120px;height:20px;padding:20px;color:#ffffff">
			请按下鼠标按钮
		</div>
	</body>
</html>

onkeypress事件、onkeydown事件：

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function keyDown(){
				alert("你按下了按键");
				if(event.ctrKey){
					alert("你按下了Ctrl键");
				}
			}
			function keyPress(){
				alert("你按下了键，并且释放了按键");
			}
		</script>
	</head>
	<body onkeydown="keyDown()"onkeypress="keyPress">
	</body>
</html>

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;
				height: 10px;
				width: 100px;
			}
			#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++){
						if(buttons[i].className=="on"){
							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.getAttriblur('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="5"/>
			</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="javasrcipt:;"id="prev"class="arrow">&lt</a>
			<a href="javasrcipt:;"id="next"class="arrow">&gt</a>
		</div>
	</body>
</html>

相关推荐
前端Hardy21 分钟前
HTML&CSS：比赛记分卡
前端·javascript·css·3d·html
刺客-Andy1 小时前
React第六节 组件属性prop的propTypes类型使用介绍
前端·javascript·react.js·typescript
明月*清风1 小时前
【数据结构专栏】二叉搜索树(Binary Search Tree)的剖析？
开发语言·数据结构·c++·visualstudio
雪碧聊技术1 小时前
RabbitMQ3：Java客户端快速入门
java·开发语言·rabbitmq·amqp·spring amqp·rabbittemplate
Sinsa_SI2 小时前
2024年9月中国电子学会青少年软件编程（Python）等级考试试卷（六级）答案 + 解析
开发语言·python·等级考试·电子学会·考级
济南信息学奥赛刘老师2 小时前
GESP考试大纲
开发语言·c++·算法·青少年编程
是萝卜干呀2 小时前
Frontend - 防止多次请求，避免重复请求
javascript·ajax·jquery·防抖·节流·disabled属性
三金121382 小时前
局部使用Vue
前端·javascript·vue.js
froginwe112 小时前
SQLite Having 子句
开发语言
热门推荐
01抖音的互联网架构02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04【凡人修仙传_01】散修厉飞羽是如何出师未捷身先死的！05Coze扣子平台完整体验和实践（附国内和国际版对比）06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇08玄机平台应急响应—webshell查杀09RAG 实践- Ollama+RagFlow 部署本地知识库10【音视频 | opus】opus编解码库(opus-1.4)详细介绍以及使用——附带解码示例代码