第十章 JavaScript的应用

彪8252024-11-26 22:34
10.1 JavaScript概述

JavaScript 是一种广泛使用的轻量级编程语言，主要用于实现网页上的动态效果。它由 Netscape 公司在 1995 年开发，并成为了 Web 开发不可或缺的一部分。

10.1.1 JavaScript简介

1 简单性

JavaScript 设计之初就考虑到了非专业程序员的使用，因此它的语法相对简单，容易上手。

2 动态性

JavaScript 是一种解释型语言，代码可以在运行时被解释执行，这使得 JavaScript 具有高度的灵活性和动态性。

3 跨平台性

JavaScript 可以在多种操作系统和浏览器上运行，无需编译即可跨平台使用。

4 安全性

为了保护用户的安全，JavaScript 在浏览器中运行时受到沙箱环境的限制，不能直接访问用户的硬盘数据或执行其他可能危害系统的操作。

5 基于对象的语言

虽然 JavaScript 不是完全面向对象的编程语言，但它支持基于对象的编程方式，可以通过对象来组织代码，实现复杂的功能。

10.1.2 JavaScript入门案例

  1. 用 JavaScript 输出文本

这是最基础的 JavaScript 案例，通过 alert、console.log 和 document.write 等方法在网页上显示文本。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 输出文本</title>
</head>
<body>
    <script>
        // 使用 alert 显示警告框
        alert('Hello, World!');
 
        // 使用 console.log 在控制台输出
        console.log('Hello, Console!');
 
        // 使用 document.write 在页面中输出
        document.write('Hello, Document!');
    </script>
</body>
</html>

说明：

alert('Hello, World!'); 会在浏览器中弹出一个警告框，显示 "Hello, World!"。

console.log('Hello, Console!'); 会在浏览器的开发者工具控制台中输出 "Hello, Console!"。

document.write('Hello, Document!'); 会将 "Hello, Document!" 直接写入到 HTML 文档中。

  1. 用 JavaScript 改变 HTML 元素

通过 JavaScript 可以动态地改变 HTML 元素的内容、属性或样式。

示例代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 改变 HTML 元素</title>
</head>
<body>
    <p id="demo">这是一个段落。</p>
    <button onclick="changeText()">点击改变文本</button>
 
    <script>
        function changeText() {
            document.getElementById('demo').innerHTML = '文本已被改变。';
        }
    </script>
</body>
</html>

说明：

document.getElementById('demo') 通过 ID 选择器获取指定的 HTML 元素。

innerHTML 属性用于设置或获取元素的 HTML 内容。

οnclick="changeText()" 为按钮添加点击事件处理器，当按钮被点击时调用 changeText 函数。

  1. 一个外部 JavaScript 文件

将 JavaScript 代码放在外部文件中，可以提高代码的可维护性和重用性。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部 JavaScript 文件</title>
</head>
<body>
    <p id="external-demo">这是一个段落。</p>
    <button onclick="externalChangeText()">点击改变文本</button>
 
    <script src="external-script.js"></script>
</body>
</html>
html 复制代码 
function externalChangeText() {
    document.getElementById('external-demo').innerHTML = '文本已被外部脚本改变。';
}

说明：

src="external-script.js" 通过 src 属性引入外部 JavaScript 文件。

外部 JavaScript 文件中的函数可以在 HTML 文件中调用。

  1. 响应用户事件

JavaScript 可以监听和响应各种用户事件，如点击、双击、键盘输入等。

示例代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应用户事件</title>
</head>
<body>
    <input type="text" id="input-text" placeholder="请输入文本">
    <p id="event-demo"></p>
 
    <script>
        document.getElementById('input-text').addEventListener('keyup', function(event) {
            document.getElementById('event-demo').innerText = '你输入了: ' + event.target.value;
        });
    </script>
</body>
</html>

说明：

addEventListener 方法用于为元素添加事件监听器。

keyup 事件在用户释放键盘上的键时触发。

event.target.value 获取输入框中的当前值。

  1. 使用条件语句

JavaScript 中的条件语句（如 if...else）用于根据不同的条件执行不同的代码块。

示例代码：

10.1.2 JavaScript入门案例

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

语法：

<script type =" text/javascript" >

//(JavaScript 代码)

body

body主体

</script>

说明：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 标记内的脚本在页面装载时同时载入，这样在主体标记内调用时可以直接执行，提高了脚本执行速度。

语法：

function functionname(参数1,参数2,...,参数n){

函数体语句;

}

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

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>head中定义的JS函数</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>
		<script type="text/javascript">
			function message(){
				alert(sum(100,200));
			}
			function sum(x,y){
				return x+y;
			}
		</script>
	</head>
	<body>
		<h4>head标记内定义两个JS函数</h4>
		<p></p>
		<form>
			<imput name ="btncal" type="buttton" onclick="message();" value="和">
		</form>
		<p id="clk">Clicke Here</p>
		<script type="text/javascript">
			var demo=document.getElementById("clk");
			demo.onclick=msg;
			function msg(){
			alert("我是bady中的JavaScript脚本");
			}
		</script>
	</body>
</html>

10.1.3.3 外部js文件中的脚本

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

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(happy);"/>
		</form>
	</body>
</html>

10.2 JavaScript语法

10.2.1 语法基础

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

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

10.2.1.1 区分大小写

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

10.2.1.2 变量不区分类型

JavaScript中变量声明，采用其弱类型，即变量在使用前无须进行变量数据类型声明而由解释器在运行时检查其数据类型，例如：

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可应用于JavaScript中任何类型的变量声明。JavaScript是采用的隐式变量声明，但要注意在JavaScript语言的任何位置进行隐式变量声明会将变量声明为全局变量，而函数内的局部变量则必须使用vr来声明变量，因此，在声明变量时，需要根据变量的作用范围来声明变量。

变量声明格式如下:

var count ; //单个声明

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

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

10.2.2.3 变量类型

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

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

(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 返回"Object"，注意 null 是Javascript 保留关键字。

(6)0bject类型。除了上面提到的各种常用类型外，对象类型也是JavaScript中的重要组成部分。

10.2.3 运算符与表达式

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

10.2.3.1 算术运算符和表达式

算术运算符负责算术运算，用算术运算符和运算对象(操作数)连接起来符合规则的式子，称为算术表达式。

10.2.3.2 关系运算符和表达式

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

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

10.2.3.4 赋值运算符和表达式

赋值运算符是JavaSeript中使用频率最高的运算符之一。赋值运算符要求其左操作数是一个变量、数组元素或对象属性，右操作数是一个任意类型的值，可以为常量、变量、数组元素或对象属性。赋值运算符的作用就是将右操作数的值赋给左操作数。用赋值运算符和作数连接起来符合规则的式子，称为赋值表达式。

10.2.3.5 条件运算符和表达式

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

语法：

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

说明：

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

代码如下：

var max=( numberl>number2)? numberl : number2 ;

10.2.3.6 逗号运算符和表达式

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

例如:

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

10.2.4 程序设计

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

10.2.4.1 条件分支语句

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

10.2.4.2 循环语句

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

10.2.5 函数

10.2.5.1 定义函数

function函数名(varl，var2， var3)

{

/*函数代码*/

}

varl、var2、var3 等指的是传入函数的变量或值，为函数的参数；

大括号定义了函数的开始和结束。

10.2.5.2 函数返回值

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

function sum(a,b)

{

x = a + b;

return x;

}

JavaScript 中的函数无须对函数的返回值进行申明，直接使用return，返回值的类型可以是本节提到的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 World!");
			}
		</script>
	</head>
	<body>
		<button onclick="sayHello()">单机这里</button>
	</body>
</html>

10.3 JavaScript对象

10.3.1 对象基础

10.3.1.1 概述

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

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

在 JavaScript 里面创建一个新的空对象

例如:

var o= new obiect( ):

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

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

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

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

10.3.1.2 属性

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

<script type=" text/javascript" >

var str = ' Hello World! ';

document. writeln( str. length );

</script>

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

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

10.3.1.3 方法

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

例如：

var str =Hello World!

document. writeln ( str. toUpperCase( ));

运行结果为:

HELLO WORLD!

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

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>window对象移动窗口</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()：弹出消息对话框(对话框中包含一个0K按钮与一个Cancel 按钮)，一般用于确认信息，返回true或fale，所以主要用于if...else...判断。常见于用户对信息更改前的确认。

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

示例代码

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>

10.3.2.2 document对象

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

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

（1）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的一部分。

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="示例程序10.11.html"}
		</script>
	</head>
	<body>
		<input type="button" onclick="currLocation()" value="显示当前的URL"/>
		<input type="button" onclick="newLocation()" value="改变URL"/>
	</body>
</html>

(2)location 对象方法。

10.3.2.4 navigator对象

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

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

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

(2)navigator对象方法。

10.3.2.5 screen对象

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

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

10.4 JavaScript事件

10.4.1 事件及事件处理

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

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

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

一般形式:

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

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

用的。

一般形式:

<script language="JavaScript" for="对象" event="事件">

(3)在JavaScript 中说明。

一般形式:

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

10.4.2 常用事件

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

对于事件的类型，随着 HTML5 的出现和发展，又新增了HTMI5 事件、设备事件、触事件、手势事件等各种事件，感兴趣的读者可查阅相关资料，本书中不再一一列举。

10.4.3 事件应用举例

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

示例代码

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>
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>

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 span.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.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:void(0);" id="prev" class="arrow">&lt;</a>
		<a href="javascript:void(0);" id="next" class="arrow">&gt;</a>
	</div>
	</body>
	</html>
相关推荐
好青崧3 小时前
CSS 样式入门：属性全知晓
前端·css·tensorflow
珹洺4 小时前
从 HTML 到 CSS：开启网页样式之旅（开篇之一）——CSS 初体验与网页样式新征程
前端·javascript·css·前端框架·html
前端Hardy4 小时前
HTML&CSS：翻书加载效果
前端·javascript·css·3d·html·css3
问道飞鱼4 小时前
【前端知识】SCSS（Sassy CSS）是一种CSS预处理器语言
前端·css·less·scss
命运之光4 小时前
【经典】高级动态抽奖系统(HTML，CSS、JS)
前端·css·html
2301_801074155 小时前
初始ArkUI
javascript·css·html5·arkts
命运之光7 小时前
【经典】抽奖系统(HTML，CSS、JS)
javascript·css·html
家有狸花8 小时前
CSS笔记（一）炉石传说卡牌设计1
前端·css·笔记
liuweni8 小时前
Next.js 独立开发教程（三）：CSS 样式的完整指南
开发语言·前端·javascript·css·react.js·职场和发展·前端框架
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总0404 - matlab m_map地学绘图工具基础函数 - 设置网格05Coze扣子平台完整体验和实践（附国内和国际版对比）06RAG 实践- Ollama+RagFlow 部署本地知识库07鸿蒙LiteOS+Hi3861智能家居网关设计：MQTT协议实现与代码示例08玄机平台应急响应—webshell查杀09Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO10centos下静态链接：/usr/bin/ld: cannot find -l某某某