第十章 JavaScript的应用
JavaScript 概述与核心特性深度解析
在当今的网页开发领域，HTML 和 CSS 技术构建出了信息丰富且样式美观的网页框架，但在交互性方面却存在明显局限。JavaScript 的出现恰好弥补了这一短板，作为一种强大的脚本语言，它为网页注入了灵动的交互性与绚丽的特效，极大地提升了用户体验。本文将深入剖析 JavaScript 的核心特性与应用场景，涵盖其基本概念、语法结构、对象体系以及事件驱动机制等关键方面，旨在为读者全面呈现这一语言的魅力与价值。
一、JavaScript 简介
JavaScript 是一种基于对象（Object）和事件驱动（Event Driven）的脚本语言，具备卓越的安全性能。它与 HTML 和 Java 语言紧密协作，在 Web 页面中实现与用户的无缝交互，无需繁琐的服务器端数据往返传输，直接在客户端处理应用程序逻辑，显著提升了响应速度和交互效率。其显著特点包括：
（一）简单性
JavaScript 采用简洁的小程序段编写方式，作为解释性语言，无需复杂的编译过程，极大地简化了开发流程，降低了初学者的入门门槛。
（二）动态性
能够实时响应用户的输入操作，无需借助 Web 服务程序的中转，通过事件机制迅速捕捉并处理用户请求，为网页带来即时的动态反馈。
（三）跨平台性
依托于浏览器运行，与操作系统环境无关，只要计算机具备浏览器且支持 JavaScript，代码就能稳定执行，确保了广泛的兼容性和可移植性。
（四）安全性
严格限制对本地硬盘的访问权限，禁止数据随意存储到服务器，同时防止对网络文档的非法修改与删除操作，仅允许通过浏览器进行安全的信息浏览与动态交互，有效保障了数据的完整性与安全性。
（五）基于对象的特性
JavaScript 不仅是基于对象的语言，还展现出面向对象的编程风格，能够将特定功能封装为独立对象，便于代码的组织、复用与维护，提升了开发效率和代码质量。
二、JavaScript 入门案例
JavaScript 程序无法独立运行，必须嵌入 HTML 文件中。通常将 JavaScript 代码置于 `script` 标记内，由浏览器的 JavaScript 脚本引擎负责解释执行。
<!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!”。
三、JavaScript 放置的位置
JavaScript 代码在页面中的放置位置主要有以下几种选择，各有其特点与应用场景：
（一）head 标记中的脚本
将 `script` 标记放置在头部 `head` 标记内时，JavaScript 代码通常需定义为函数形式，并在主体 `body` 标记内通过调用或事件触发执行。这种方式使得脚本在页面装载时提前载入，当在主体中调用时可迅速响应，有效提升了脚本的执行效率。
<!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>
在这个例子中，`message` 函数在 `head` 中定义，当页面中的按钮被点击时，通过 `onclick` 事件触发调用 `message` 函数，进而调用 `sum` 函数进行计算并弹出结果。
（二）body 标记中的脚本
`script` 标记位于主体 `body` 标记内时，JavaScript 代码既可以定义为函数形式并通过调用或事件触发执行，也可以直接编写脚本语句。这些代码在页面装载时同步执行，其执行结果直接融入网页内容，在浏览器中即时呈现。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>body 中 JavaScript 脚本</title>
</head>
<body>
<p id="clk">Click Here</p>
<script type="text/javascript">
var demo = document.getElementById("clk");
demo.onclick = msg;
function msg() {
alert("我是 body 中的 JavaScript 脚本")
}
</script>
</body>
</html>
此示例中，当页面中的 “Click Here” 段落被点击时，会触发 `msg` 函数，弹出相应的提示框。
（三）外部 js 文件中的脚本
为了提升代码的可维护性与复用性，可将 JavaScript 函数单独存储在一个 `.js` 文件中，并在 HTML 文档中通过 `script` 标记的 `src` 属性进行引用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>调用外部js文件的JavaScript函数</title>
<script type="text/javascript" src="js/demo.js">
document.write("这条语句没有执行，被忽略掉了！")
</script>
</head>
<body>
<form>
<input name="bnt1" type="button" onclick="message()" value="调用外部js文件的JavaScript函数" />
</form>
</body>
</html>在对应的 `demo.js` 文件中：
function message() {
alert("调用外部 js 文件中的函数")
}
这样的结构使得 JavaScript 代码能够独立管理和维护，方便在多个页面中共享和复用。
（四）事件处理代码中的脚本
JavaScript 代码还可以直接嵌入事件处理代码中，实现简洁高效的局部交互逻辑。
<!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>
在此示例中，按钮的点击事件直接关联了一个 JavaScript 代码片段，点击按钮时会立即弹出相应的提示框。
四、JavaScript 语法
深入理解 JavaScript 语法是编写高效、可靠代码的基石，尽管其语法学习过程可能略显枯燥，但对于掌握这门语言却至关重要。
（一）语法基础
1. 区分大小写
JavaScript 对大小写极为敏感，变量名、函数名等标识符的大小写不同将被视为完全不同的实体。这要求开发者在编写代码时务必保持严谨的大小写规范，以避免因大小写错误引发的调试困扰。
2. 变量不区分类型
JavaScript 采用弱类型变量声明机制，变量在使用前无需显式声明其数据类型，解释器会在运行时自动推断。例如，`x = 1234` 会被识别为数值型变量，而 `y = "1234"` 则被判定为字符串型变量。这种灵活性在一定程度上简化了代码编写，但也需要开发者更加谨慎地处理变量类型的转换与操作。
3. 每行代码结尾可省略分号
在 JavaScript 中，每行语句结尾的分号并非强制要求。然而，如果一行中包含多个语句，则语句之间的分号是必需的。尽管如此，为了养成良好的编程习惯，提升代码的可读性与可维护性，建议在每条语句结尾都添加分号。
4. 注释与 C、C++、Java 等语言相同
注释是代码中不可或缺的部分，用于增强代码的可读性与可理解性。JavaScript 支持单行注释（`//`）和多行注释（`/* */`），其注释风格与 C、C++、Java 等语言保持一致，方便开发者进行代码注释与文档编写。
（二）标识符和常用变量
1. 标识符
标识符作为变量名、函数名等的有效字符序列，在 JavaScript 中有严格的命名规则。必须以英文字母或下划线开头，后续可由英文字母、数字和下划线组成，且不能包含空格或制表符。同时，不能使用 JavaScript 关键字、保留字以及内部特定单词（如 `Infinity`、`NaN`、`undefined` 等），并且大小写敏感。例如，`Hello`、`_12th`、`sum`、`Dog23` 等均为合法标识符，而 `if`、`3com`、`case`、`switch` 等则是非法的。
2. 变量声明
在 JavaScript 环境中，变量是存储信息的容器，使用关键字 `var` 进行声明。需要注意的是，JavaScript 存在隐式变量声明机制，在函数外部未使用 `var` 声明的变量将被视为全局变量，而函数内的局部变量则必须使用 `var` 声明，以明确变量的作用范围，避免变量污染和命名冲突。
3. 变量类型
JavaScript 涵盖 6 种主要数据类型，包括 `Number`（数值型）、`String`（字符型）、`Object`（对象）、`Boolean`（布尔型）、`Null` 和 `Undefined`。
- `Number` 数值型支持整数和浮点数，整数可正可负或为零，浮点数包含小数点，还可采用科学计数法表示，如 `3.5E15` 表示 `3.5×10^15`。
- `String` 字符型由若干字符组成，需用单引号或双引号封装。在字符串中使用引号时，需遵循单双引号交替使用且不交叉的原则，例如 `"热烈欢迎参加 JavaScript 技术 '研讨' 的专家"` 是正确的用法，而 `"学习不是一件 "容易" 的事件"` 则是错误的。
- `Boolean` 布尔型仅有 `true` 和 `false` 两个特殊值，可在特定场景下与其他数据类型进行转换，如 `true` 可转换为整数 `1`，`false` 可转换为整数 `0`，但不能直接用 `true` 表示 `1` 或 `false` 表示 `0`。
- `Undefined` 数据类型表示未赋值的变量，JavaScript 会自动为未赋值变量赋予 `undefined` 值。
- `Null` 数据类型是一个特殊的空对象，`typeof null` 返回 “Object”，它作为 JavaScript 保留关键字，在特定场景下用于表示空值或未定义的对象引用。
- `Object` 类型是 JavaScript 中极为重要的组成部分，除了上述基本类型外，复杂的数据结构和功能模块多通过对象来实现，对象可以包含属性和方法，用于描述和操作特定的实体或行为。
（三）运算符与表达式
JavaScript 运算符丰富多样，主要包括算术运算符、关系运算符、逻辑运算符、赋值运算符、条件三元运算符、逗号运算符等。由操作数（变量、常量、函数调用等）与运算符组合而成的式子即为表达式，最简单的表达式可以是常量名称。
1. 算术运算符和表达式
算术运算符负责执行基本的算术运算，如加法（`+`）、减法（`-`）、乘法（`*`）、除法（`/`）、取模（`%`）等，将算术运算符与运算对象连接起来符合规则的式子即为算术表达式。例如，`3 + 5`、`10 * 6` 等都是简单的算术表达式。
2. 关系运算符和表达式
关系运算符用于比较两个表达式的值，确定它们之间的大小关系，运算结果返回布尔值（`true` 或 `false`）。常见的关系运算符包括大于（`>`）、小于（`<`）、大于等于（`>=`）、小于等于（`<=`）、等于（`==`）、不等于（`!=`）等。例如，`3 > 2` 的结果为 `true`，`5 == "5"` 的结果为 `false`（注意这里的 `==` 是比较值是否相等，而 `===` 则会同时比较值和类型）。
3. 逻辑运算符和表达式
逻辑运算符主要用于执行逻辑运算，其操作数通常为布尔型数值或可转换为布尔型的表达式，运算结果同样返回 `true` 或 `false`。逻辑运算符包括逻辑与（`&&`）、逻辑或（`||`）、逻辑非（`!`）等。例如，`(3 > 2) && (5 < 10)` 的结果为 `true`，`(3 > 5) || (2 < 1)` 的结果为 `false`。
4. 赋值运算符和表达式
赋值运算符是 JavaScript 中使用频率极高的运算符之一，其作用是将右操作数的值赋给左操作数，左操作数必须是变量、数组元素或对象属性，右操作数可以是任意类型的值。常见的赋值运算符包括基本赋值运算符（`=`）、复合赋值运算符（如 `+=`、`-=`、`*=`、`/=` 等）。例如，`x = 5` 将数值 `5` 赋值给变量 `x`，`y += 3` 等价于 `y = y + 3`。
5. 条件运算符和表达式
条件运算符是一个三元运算符，由条件运算符和三个操作数构成。其语法为 `变量 = 表达式 1? 表达式 2 : 表达式 3`，表示如果表达式 1 的结果为真（`true`），则将表达式 2 的值赋给变量，否则将表达式 3 的值赋给变量。例如，`var max = (number1 > number2)? number1 : number2`，用于比较两个数的大小并将较大值赋给 `max` 变量。
6. 逗号运算符和表达式
逗号运算符是二元运算符，优先级最低。逗号表达式的运算规则是依次计算各个表达式的值，最终结果为最后一个表达式的值。例如，`var rs = (3 + 5, 10 * 6)`，先计算 `3 + 5` 得到 `8`，再计算 `10 * 6` 得到 `60`，最后将 `60` 赋给变量 `rs`。
（四）程序设计
JavaScript 脚本语言的核心构成包括控制语句、函数、对象等，其中控制语句主要涵盖条件分支语句和循环语句，用于实现复杂的程序逻辑与流程控制。
1. 条件分支语句
- **if…else 语句**：`if…else` 语句是实现程序分支逻辑的基础结构，根据条件的真假决定执行不同的语句块。如果条件成立，则执行 `if` 后的语句或语句块；否则，执行 `else` 中的语句或语句块。其语法如下：
if (条件) {
// 条件为真执行的语句
} else {
// 条件为假执行的语句
}
此外，`if…else` 语句还有多种变形形式，如仅包含 `if` 部分省略 `else` 分支的语句，用于在条件满足时执行特定操作；`if… else if… else…` 多分支语句，可根据多个条件进行更细致的分支处理，例如：
if (score >= 90) {
grade = "A";
} else if (score >= 80) {
grade = "B";
} else if (score >= 70) {
grade = "C";
} else if (score >= 60) {
grade = "D";
} else {
grade = "F";
}- **switch 分支语句**：`switch` 分支语句根据一个变量或表达式的不同取值采取不同的处理方法。其语法如下：
switch (表达式) {
case case1:
执行语句 1;
break;
case case2:
执行语句 2;
break;
case case3:
执行语句 3;
break;
default:
默认执行语句;
}如果表达式的值与 `case` 后的常量值匹配，则执行相应的语句块，直到遇到 `break` 关键字跳出 `switch` 语句。若表达式的值与所有 `case` 都不匹配，则执行 `default` 中的语句。需要注意的是，如果没有 `break` 语句，代码会继续执行下一个 `case` 分支，可能导致意外的结果。
2. 循环语句
- **for 语句**：`for` 语句是最常用的循环语句之一，用于控制一段代码按照指定的次数重复执行。其语法如下：
for (变量 = 开始值; 变量 <= 结束值; 变量 = 变量 + 步进值) {
// 循环体语句
}例如，使用 `for` 循环打印 1 到 10 的数字：
for (var i = 1; i <= 10; i++) {
console.log(i);
}在这个循环中，变量 `i` 从 1 开始，每次循环增加 1，直到 `i` 大于 10 时循环结束。循环体中的 `console.log(i)` 会在每次循环时输出当前的 `i` 值。
for…in 语句：`for…in` 语句用于遍历对象的属性或数组的元素。其语法如下：
for (变量 in 对象或数组) {
// 循环体语句
}例如，遍历一个对象的属性：
var person = {
name: "John",
age: 30,
gender: "male"
};
for (var key in person) {
console.log(key + ": " + person[key]);
}在这个例子中，`for…in` 循环会依次取出对象 `person` 的属性名（`key`），并通过 `person[key]` 访问对应属性的值，然后输出属性名和属性值。
- while 语句：`while` 语句根据条件的真假来控制循环的执行。只要条件成立，循环体就会一直执行，直到条件不成立为止。其语法如下：
while (条件) {
// 循环体语句
}例如，使用 `while` 循环计算 1 到 100 的和：
var sum = 0;
var i = 1;
while (i <= 100) {
sum += i;
i++;
}
console.log(sum);
在这个循环中，只要 `i` 小于等于 100，就会执行循环体中的代码，将 `i` 的值累加到 `sum` 中，并将 `i` 加 1。当 `i` 大于 100 时，循环结束，最后输出总和。
- do…while 语句：`do…while` 语句与 `while` 语句类似，但它先执行一次循环体，然后再判断条件是否成立。如果条件仍然成立，则继续执行循环体，直到条件不成立。其语法如下：
do {
// 循环体语句
} while (条件);例如：
var i = 1;
do {
console.log(i);
i++;
} while (i <= 5);在这个例子中，先执行一次循环体，输出 `i` 的初始值 1，然后判断条件 `i <= 5` 是否成立。由于此时条件成立，继续执行循环体，直到 `i` 大于 5 时循环结束。
此外，`break` 语句用于立即结束当前循环，并执行循环后的下一条语句；`continue` 语句则用于结束当前循环的本次迭代，直接开始下一轮循环。例如：
for (var i = 0; i < 10; i++) {
if (i === 3) {
break; // 当 i 等于 3 时，结束整个循环
}
console.log(i);
}
for (var j = 0; j < 10; j++) {
if (j === 3) {
continue; // 当 j 等于 3 时，跳过本次循环，继续下一轮
}
console.log(j);
}在第一个 `for` 循环中，当 `i` 等于 3 时，`break` 语句被执行，循环立即结束，所以只会输出 0、1、2。在第二个 `for` 循环中，当 `j` 等于 3 时，`continue` 语句被执行，本次循环的剩余代码被跳过，直接进入下一轮循环，所以会输出 0、1、2、4、5、6、7、8、9。
（五）函数
函数是 JavaScript 中实现代码复用和模块化编程的重要机制，由事件驱动或被显式调用时执行可重复使用的代码块。
1. 定义函数
使用 `function` 关键字定义函数，函数名后可跟参数列表，参数用于接收传入函数的值，大括号内包含函数的具体代码逻辑。
function 函数名(var1, var2, var3) {
// 函数代码
}
例如，定义一个简单的加法函数：
function add(a, b) {
return a + b;
}
2. 函数返回值
如果函数需要返回一个值，使用 `return` 语句。`return` 语句后面的值即为函数的返回值，函数的返回值类型可以是 JavaScript 中的任意一种数据类型，无需提前声明返回值类型。
function sum(a, b) {
var x = a + b;
return x;
}
在这个例子中，函数 `sum` 计算 `a` 和 `b` 的和，并将结果通过 `return` 语句返回。
3. 函数调用
函数的调用通过函数名加上括号中的参数来实现。例如，调用上述的 `add` 函数：
var result = add(3, 5);
console.log(result); // 输出 8
函数可以在页面的起始位置（如 `<head>` 部分）定义，也可以定义在外部的 `.js` 文件中，然后在需要的地方进行调用，这样可以提高代码的组织性和可维护性，避免代码的重复编写。
五、JavaScript 对象
JavaScript 编程采用 “面向对象” 的思想，将各种实体和功能抽象为对象，通过对象的属性和方法来描述和操作它们。
（一）对象基础
1. 概述
在 JavaScript 中，可以创建自定义对象，同时也内置了许多常用对象供开发者使用。对象可分为本地对象（或内置对象）、Browser 对象和 HTML DOM 对象。
- 本地对象：本地对象是由 ECMA - 262 标准定义的类，如 `Object`、`Array`、`String`、`Number`、`Boolean` 等，它们提供了丰富的功能和方法，用于处理各种数据类型和逻辑操作。
- Browser 对象：Browser Objects（BOM - 浏览器对象模型）用于与浏览器窗口和页面进行交互，包括 `window` 对象、`history` 对象、`location` 对象、`navigator` 对象、`screen` 对象等。这些对象提供了操作浏览器窗口、处理页面历史记录、获取页面 URL、获取浏览器信息以及获取屏幕信息等功能。
- HTML DOM 对象：HTML DOM（文档对象模型）定义了用于 HTML 的一系列标准对象以及访问和处理 HTML 文档的标准方法。其中，`document` 对象是最重要的对象之一，它代表整个 HTML 文档，通过 `document` 对象可以访问和操作页面中的各种元素，如获取元素、修改元素属性、添加或删除元素等。
在 JavaScript 中创建一个新的空对象可以使用 `new Object()` 语法，例如：
var o = new Object();
2. 属性
属性是对象的特性值的描述。例如，对于字符串对象，可以通过 `length` 属性获取字符串的长度：
var str = "Hello World!";
console.log(str.length); // 输出 12
JavaScript 内置对象的属性可以通过查阅相关技术文档来了解，在一些开发环境（如 Visual Studio）中，还可以利用智能感应功能方便地访问对象的属性。对于自定义对象，属性可以通过对已有对象的新属性进行赋值的方式创建，与声明变量时使用 `var` 关键字不同，创建对象属性时不需要 `var`。例如：
var person = new Object();
person.name = "John";
person.age = 30;
在这个例子中，为 `person` 对象创建了 `name` 和 `age` 两个属性，并分别赋值。
3. 方法
方法是对象可以执行的行为或功能。JavaScript 内置对象本身自带了许多强大的方法，可以直接调用以完成特定的任务。例如，字符串对象的 `toUpperCase` 方法可以将字符串转换为大写形式：
var str = "Hello World!";
console.log(str.toUpperCase()); // 输出 HELLO WORLD!
（二）常用对象
1. window 对象
- 窗口操作：`window` 对象是 JavaScript 中最大的对象，代表浏览器窗口或框架。在客户端 JavaScript 中，它是全局对象，所有的表达式都在当前的 `window` 环境中计算。通常引用其属性和方法时可以直接使用方法名称，无需 `window.` 前缀（但使用 `window.` 前缀也是正确的）。`window` 对象提供了多种操作浏览器窗口的方法，如 `moveBy(x, y)` 用于相对当前位置移动窗口，`moveTo(x, y)` 用于将窗口左上角移动到指定坐标，`resizeBy(w, h)` 用于相对当前大小调整窗口尺寸，`resizeTo(w, h)` 用于将窗口设置为指定大小。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>移动窗口</title>
<script type="text/javascript">
function moveWin() {
window.moveTo(50, 50);
}
</script>
</head>
<body>
<script type="text/javascript">
var myWindow = window.open('', '', 'width=200,height=100');
myWindow.document.write("This is `myWindow`");
</script>
<input type="button" value="Move `myWindow`" onclick="moveWin()" />
</body>
</html>
在这个示例中，首先使用 `window.open` 方法打开一个新窗口，并在新窗口中写入一些内容。然后通过点击按钮，调用 `moveWin` 函数，使用 `moveTo` 方法将新窗口移动到坐标 (50, 50)。
- 打开窗口：使用 `open` 方法可以打开新窗口，其语法如下：
window.open(url, name, features, replace);
其中，`url` 是要载入窗口的 URL，`name` 是新建窗口的名称，`features` 是代表窗口特性的字符串（如窗口大小、是否可调整等，各个特性用逗号分隔），`replace` 是一个布尔值，用于说明新载入的页面是否替换当前载入的页面（通常很少使用）。例如：
var newWindow = window.open('https://www.example.com', 'newWindow', 'width=500,height=300');
- 关闭窗口：使用 `close` 方法可以关闭窗口，例如：
var newWin = window.open('');
newWin.close();
在这个例子中，先打开一个新窗口，然后立即关闭它。
- 系统对话框：`window` 对象提供了三种常用的对话框：`alert`、`confirm` 和 `prompt`。
- `alert` 方法用于显示提示信息，用户只能查看信息，不能进行任何操作，常用于提醒用户重要信息或错误提示。例如：
alert("欢迎访问页面！");
- `confirm` 方法弹出一个包含 “确定” 和 “取消” 按钮的消息对话框，用户点击后返回 `true` 或 `false`，常用于确认用户的操作或选择。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>confirm() 的使用</title>
</head>
<body>
<script type="text/javascript">
var userChoice = window.confirm("请选择“确定”或“取消”");
if (userChoice == true) {
document.write("OK!");
} else {
document.write("Cancel!");
}
</script>
</body>
</html>
在这个示例中，弹出一个确认对话框，根据用户的选择在页面中显示不同的信息。
- `prompt` 方法弹出一个带输入框的对话框，用户输入内容后点击 “确定” 按钮，返回输入的字符串，常用于获取用户的输入信息。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>prompt()的使用</title>
</head>
<body>
<script type="text/javascript">
// var hobby=prompt('请问您的爱好是？','请输入');
// document.write("您的爱好是---"+hobby);
document.write("您的爱好是---"+prompt('请问你的爱好?','请输入'))
</script>
</body>
</html>在这个示例中，弹出一个输入对话框，获取用户输入的爱好信息，并在页面中显示。
- history 历史对象：`window` 对象中的 `history` 历史对象包含了用户已浏览的 URL 信息，但由于安全性考虑，其使用有一定限制。`history` 对象有 `length` 属性用于列出历史记录的项数，同时提供了 `back`、`forward` 和 `go` 方法。`back` 方法相当于按下浏览器的 “后退” 键，`forward` 方法相当于按下 “前进” 键，`go` 方法用于在历史记录中跳转，`go(x)` 中 `x` 为负数时后退 `x` 个地址，`x` 为正数时前进 `x` 个地址，`x = 0` 时刷新当前页面。例如：
history.back(); // 后退到上一个页面
history.forward(); // 前进到下一个页面
history.go(-2); // 后退两个页面
2. document 对象
- document 对象属性：`document` 对象代表当前窗口或指定窗口的文档，包含从 `<head>` 标签到 `<body>` 标签的全部内容。它有许多属性用于获取文档的相关信息，如 `location` 属性获取文档的 URL，`title` 属性获取文档的标题，`images` 属性用于获取页面中的图片元素集合等。例如：
<!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>
在这个示例中，通过 `document` 对象的属性获取并显示了文档的 URL、标题和页面中第一张图片的路径。
- document 对象方法：`document` 对象的方法在 JavaScript 程序中使用非常频繁，用于操作文档中的元素。例如，`getElementById` 方法用于根据元素的 `id` 属性获取特定元素，然后可以对该元素进行各种操作，如修改其内容、添加事件监听器等。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document 方法</title>
</head>
<body>
<br />
<div id="book">网页设计基础</div>
<br />
<script type="text/javascript">
var book = document.getElementById("book");
book.onclick = function () {
alert(book.innerText);
};
</script>
</body>
</html>
在这个示例中，使用 `getElementById` 方法获取 `id` 为 “book” 的 `<div>` 元素，然后为其添加点击事件监听器，当点击该元素时，弹出一个显示元素文本内容的对话框。
3. location 对象
`location` 对象用于获取或设置窗口的 URL，并且可以解析 URL。它既是 `window` 对象的属性，也是 `document` 对象的属性（即 `window.location == document.location`）。
- location 对象属性：`location` 对象包含多个属性，其中最重要的是 `href` 属性，它代表当前窗口的完整 URL，其余属性如 `protocol`（协议）、`host`（主机名和端口号）、`pathname`（路径名）等分别表示 URL 的不同部分。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>location 对象属性</title>
<script type="text/javascript">
function currLocation() {
alert(window.location.href);
}
function newLocation() {
// 改变 URL 必须是已有的项目名或有效的 URL
window.location.href = "https://www.example.com";
}
</script>
</head>
<body>
<input type="button" onclick="currLocation()" value="显示当前的 URL" />
<input type="button" onclick="newLocation()" value="改变 URL" />
</body>
</html>
在这个示例中，`currLocation` 函数通过 `location.href` 属性获取当前窗口的 URL 并弹出提示框，`newLocation` 函数则将窗口的 URL 更改为指定的地址。
- location 对象方法：`location` 对象还提供了一些方法，如 `reload` 方法用于重新加载当前页面，`replace` 方法用于替换当前页面的 URL，且不会在浏览器历史记录中留下原页面的记录。例如：
location.reload(); // 重新加载当前页面
location.replace('https://www.newpage
4. navigator 对象
`navigator` 对象用于获取浏览器的相关信息，如浏览器名称、版本号、操作系统信息等。通过 `navigator` 对象，可以根据不同的浏览器特性来编写兼容性代码，或者获取用户的浏览器环境信息以进行相应的处理。例如：
console.log(navigator.userAgent); // 输出浏览器的用户代理字符串，包含浏览器名称、版本等信息
5. screen 对象
`screen` 对象用于获取用户的屏幕信息，是 `window` 对象的属性。每个 `window` 对象的 `screen` 属性都引用一个 `screen` 对象。可以通过 `screen` 对象获取一些用户屏幕的信息，如宽度、高度、像素等，而这些信息对于设置图片和页面在浏览器中显示的大小都是非常有用的。`screen` 对象的属性应用和浏览器的关系比较密切，所以在应用这些属性时，一定要注意浏览器之间的兼容性。例如：
console.log(screen.width); // 输出屏幕的宽度像素值
console.log(screen.height); // 输出屏幕的高度像素值
`availWidth` 与 `availHeight` 属性比较常用，它们可以使窗口填满用户显示器的屏幕，获取的是除去系统任务栏等占用空间后的可用屏幕宽度和高度。例如：
console.log(screen.availWidth);
console.log(screen.availHeight);
六、JavaScript 事件
JavaScript 中的事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。例如，在用户单击页面中某按钮时产生一个 `onClick` 事件。事件可以是用户在某些内容上的单击、鼠标经过特定元素或按下了键盘上的按键；也可以是某个 Web 页面加载完成、用户改变了窗口的大小或是滚动了窗口等。
事件处理是对象化编程的一个重要环节，JavaScript 会为特定文档元素的特定类型事件注册一个事件处理程序，该处理程序可以是个函数，也可以是一段代码。事件处理的过程可以这样表示：发生事件→启动事件处理程序→事件处理程序做出反应。其中，要使事件处理程序能够启动，必须先告诉对象发生了什么事情，要启动什么处理程序。事件的处理程序可以是任意 JavaScript 语句，但是一般用特定的自定义函数来处理。
指定事件处理程序有三种方法：
（一）直接在 HTML 标记中指定
这种方法用得最多。一般形式为 `<标记 事件="事件处理程序" [事件="事件处理程序"…]>`。例如：
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body onload="alert('欢迎访问页面!')">
</body>
</html>
在上述示例中，`<body>` 标记中通过 `onload` 事件在文档加载完毕时弹出一个告警框，显示 “欢迎访问页面”。
（二）在 JavaScript 代码中通过对象属性指定
可以先获取对象的引用，然后通过对象的事件属性来指定事件处理程序。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<head>
<meta charset="utf-8">
<title>通过对象属性指定事件处理程序</title>
</head>
<body>
<button id="myButton">点击我</button>
<script type="text/javascript">
var button = document.getElementById("myButton");
button.onclick = function() {
alert("按钮被点击了");
};
</script>
</body>
</html>
在这个例子中，首先使用 `document.getElementById` 方法获取 `id` 为 “myButton” 的按钮元素，然后通过 `onclick` 属性指定一个匿名函数作为点击事件的处理程序，当按钮被点击时，会弹出提示框显示 “按钮被点击了”。
（三）使用 `addEventListener` 方法添加事件监听器
这种方式可以为一个元素添加多个事件处理程序，并且具有更好的灵活性和兼容性。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用 addEventListener 添加事件监听器</title>
</head>
<body>
<input type="text" id="myInput">
<script type="text/javascript">
var input = document.getElementById("myInput");
input.addEventListener("keydown", function(event) {
console.log("键盘按下：", event.key);
});
input.addEventListener("keyup", function(event) {
console.log("键盘松开：", event.key);
});
</script>
</body>
</html>
在这个示例中，为 `id` 为 “myInput” 的输入框分别添加了 `keydown` 和 `keyup` 事件监听器，当在输入框中按下或松开键盘按键时，会在控制台输出相应的信息，包括按下或松开的键值。
七、常用事件
JavaScript 中常用事件主要包括一般页面事件、鼠标事件、键盘事件等。
（一）一般页面事件
1. load 事件
当页面及其所有资源（如图片、脚本等）都加载完成后触发。通常用于在页面完全加载后执行一些初始化操作，如初始化页面布局、绑定事件等。例如：
window.addEventListener("load", function() {
// 页面加载完成后的操作
console.log("页面已加载");
});
2. unload 事件
当页面即将被卸载（如用户关闭页面或导航到其他页面）时触发。可以在这个事件中执行一些清理操作，如保存用户数据、取消未完成的网络请求等，但需要注意的是，在这个事件中执行的操作可能会受到浏览器限制，并且不能保证一定会执行完成。例如：
window.addEventListener("unload", function() {
// 页面卸载前的操作
console.log("页面即将卸载");
});
（二）鼠标事件
1. click 事件
当鼠标左键点击元素时触发。这是最常用的鼠标事件之一，常用于执行点击按钮、链接等元素后的操作。例如：
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
// 按钮点击后的操作
console.log("按钮被点击");
});
2. dblclick 事件：
当鼠标左键双击元素时触发。例如：
```javascript
var element = document.getElementById("myElement");
element.addEventListener("dblclick", function() {
// 元素被双击后的操作
console.log("元素被双击");
});
3. mousedown 事件：
当鼠标按钮在元素上按下时触发，包括左键、右键和中键。例如：
var div = document.getElementById("myDiv");
div.addEventListener("mousedown", function(event) {
if (event.button === 0) {
// 鼠标左键按下
console.log("鼠标左键在元素上按下");
} else if (event.button === 1) {
// 鼠标中键按下
console.log("鼠标中键在元素上按下");
} else if (event.button === 2) {
// 鼠标右键按下
console.log("鼠标右键在元素上按下");
}
});
4. mouseup 事件
当鼠标按钮在元素上松开时触发。通常与 `mousedown` 事件配合使用，用于实现一些拖动、点击长按等交互效果。例如：
var box = document.getElementById("myBox");
box.addEventListener("mousedown", function() {
// 记录鼠标按下时的位置等信息
console.log("鼠标按下");
});
box.addEventListener("mouseup", function() {
// 根据鼠标按下和松开的位置等信息进行相应操作
console.log("鼠标松开");
});
5. mouseover 事件
当鼠标指针移动到元素上时触发。例如：
var link = document.getElementById("myLink");
link.addEventListener("mouseover", function() {
// 鼠标指针移到链接上时的操作，如改变样式
link.style.color = "red";
});
6. mouseout 事件
当鼠标指针移出元素时触发。例如：
var link = document.getElementById("myLink");
link.addEventListener("mouseout", function() {
// 鼠标指针移出链接时的操作，如恢复样式
link.style.color = "black";
});
7. mousemove 事件
当鼠标指针在元素内移动时持续触发。常用于实现鼠标跟随效果、绘制图形等需要实时获取鼠标位置的场景。例如：
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
canvas.addEventListener("mousemove", function(event) {
// 根据鼠标位置在画布上绘制图形
ctx.beginPath();
ctx.arc(event.offsetX, event.offsetY, 5, 0, 2 * Math.PI);
ctx.fill();
});
（三）键盘事件
1. **keydown 事件**：当键盘上的某个键被按下时触发。可以获取按下的键码等信息，用于实现快捷键、键盘控制等功能。例如：
document.addEventListener("keydown", function(event) {
if (event.keyCode === 13) {
// 回车键被按下
console.log("回车键按下");
}
});
2. keyup 事件
当键盘上的某个键被松开时触发。例如：
document.addEventListener("keyup", function(event) {
if (event.keyCode === 27) {
// Esc 键被松开
console.log("Esc 键松开");
}
});
3. keypress 事件
当键盘上产生可打印字符时触发（如字母、数字、标点符号等）。与 `keydown` 事件不同的是，它只在产生可打印字符时触发，并且会重复触发（如果按住某个可打印字符键不放）。例如：
document.addEventListener("keypress", function(event) {
console.log("按下的字符：", String.fromCharCode(event.charCode));
});
八、事件应用举例
事件的应用常见于以下几种场景：鼠标单击某一元素、页面或图像载入、鼠标悬浮与页面的某个热点之上、在表单中选取输入框、确认表单、键盘按键等。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标单击事件示例</title>
</head>
<body>
<p id="clk">Click Here</p>
<script type="text/javascript">
var demo = document.getElementById("clk");
demo.onclick = function() {
alert("你点击了段落");
};
</script>
</body>
</html>
在这个例子中，当点击 `id` 为 “clk” 的段落时，会弹出提示框显示 “你点击了段落”。
（二）页面加载事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面加载事件示例</title>
</head>
<body onload="initPage()">
<script type="text/javascript">
function initPage() {
console.log("页面加载完成，进行初始化操作");
// 可以在这里进行页面布局初始化、数据加载等操作
}
</script>
</body>
</html>当页面加载完成后，会在控制台输出 “页面加载完成，进行初始化操作”，并可以在 `initPage` 函数中进行其他初始化相关的代码逻辑。
（三）鼠标悬浮事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标悬浮事件示例</title>
</head>
<body>
<div id="hotSpot" style="width: 100px; height: 100px; background-color: yellow;">
热点区域
</div>
<script type="text/javascript">
var hotSpot = document.getElementById("hotSpot");
hotSpot.onmouseover = function() {
this.style.backgroundColor = "orange";
};
hotSpot.onmouseout = function() {
this.style.backgroundColor = "yellow";
};
</script>
</body>
</html>
当鼠标悬浮在 `id` 为 “hotSpot” 的 `div` 元素上时，背景颜色变为橙色，当鼠标移出时，背景颜色恢复为黄色。
（四）表单输入框事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单输入框事件示例</title>
</head>
<body>
请输入用户名：<input type="text" id="username" onchange="checkUsername()">
<script type="text/javascript">
function checkUsername() {
var username = document.getElementById("username").value;
if (username.length < 3) {
alert("用户名长度至少为 3 位");
}
}
</script>
</body>
</html>
当在输入框中输入用户名并离开输入框时（触发 `onchange` 事件），会检查用户名长度，如果长度小于 3 位，则弹出提示框。
（五）键盘按键事件
<!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>
当在页面中按下键盘上的 键时，会在控制台输出 “ 键按下”。通过这些事件的应用，可以为网页添加丰富的交互功能，提升用户体验，使网页更加生动和实用。
10.5 综合案例——轮播广告
<!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;
}
.aroow{
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="";
}
}
//数组从0开始，index需要减1
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="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="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
</body>
</html>
原文地址：https://blog.csdn.net/KO2131855283/article/details/143982526
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！