第十章 JavaScript的应用

最新推荐文章于 2025-08-22 19:09:26 发布

不搭821

最新推荐文章于 2025-08-22 19:09:26 发布

阅读量762

点赞数 20

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2403_87185665/article/details/144217101

10.1 JavaScript概述

10.1.1 JavaScript简介

avaScript是一种广泛应用于Web开发的编程语言，它主要用于创建动态、交互式的用户界面。JavaScript可以在浏览器中执行，使得它能够与HTML和CSS一起构建完整的Web应用程序。以下是JavaScript的一些主要特点和概述

10.1.1.1 简单性

JavaScript的语法基本结构形式与C、C++、Java十分类似，对于有C语系编程功底的程序员来说，JavaScript上手非常容易。其变量类型采用弱类型，并未使用严格的数据类型，这使得JavaScript的学习曲线相对平缓。

10.1.1.2 动态性

JavaScript是一种动态类型语言，这意味着变量的类型不需要显式声明，类型可以在运行时改变。这种特性使得JavaScript在处理不同类型的数据时更加灵活。

10.1.1.3 跨平台性

JavaScript依赖于浏览器本身，与操作环境无关，只要计算机能运行浏览器，并支持JavaScript的浏览器，就可正确执行。这使得JavaScript实现了“编写一次，走遍天下”的梦想，无论是Windows系统，还是Linux系统，只要有能支持JavaScript运行的浏览器就可以运行JavaScript。

10.1.1.4 安全性

JavaScript由浏览器运行，它既不允许访问客户端的文件，也不允许在服务器端打开文件和保存信息。它只允许客户查看信息和实现同客户的交互，因此JavaScript被认为是一种安全性较高的语言。

10.1.1.5 基于对象的语言

JavaScript是一种基于对象的语言，它可以直接调用由JavaScript自身提供的一些对象或一些其他编程语言创建的对象。JavaScript的大部分功能都是来自对这些对象方法的调用和对脚本的相互作用。

10.1.2 JavaScript入门案例

Hello World
这是编程学习中的经典入门案例，在JavaScript中，可以通过在控制台打印"Hello World"来作为入门练习。

10.1.3 JavaScript放置的位置

10.1.3.1 head标记中的脚本

在HTML的<head>标记中放置JavaScript脚本是一种常见的做法。这种方式的优点在于可以确保在文档的主体内容加载之前，脚本已经被加载和解析。

然而，将大量JavaScript代码放在<head>中可能会导致页面渲染延迟，因为浏览器在解析到<script>标签时会暂停渲染页面，先去加载和执行脚本。

10.1.3.2 body标记中的脚本

把JavaScript脚本放在<body>标记中也是可行的。这种方式可以确保页面的元素已经被加载后再执行脚本，避免了因为脚本执行而导致页面渲染延迟的问题。

例：

10.1.3.3 外部js文件中的脚本

将JavaScript代码存储在独立的.js文件中，然后在HTML文件中引用这个外部文件是一种非常好的实践。这样做有利于代码的维护和复用。

例：

首先创建一个名为main.js的文件，内容如下：

function externalFunction() {
    console.log('This is a function from an external file.');
}

使用外部文件可以使HTML文件更简洁，并且多个HTML页面可以共用同一个.js文件。

10.1.3.4 事件处理代码中的脚本

事件处理代码中的脚本是一种特殊的JavaScript放置方式。当特定的事件发生时（如点击、鼠标移动等），相关的JavaScript代码才会执行。

例：

在这个例子中，onclick是一个事件处理属性，当按钮被点击这个事件发生时，alert('Button clicked!')这个JavaScript代码就会执行。这种方式将脚本与事件紧密结合，直接在HTML标签中定义事件处理的JavaScript代码，但如果代码较为复杂，建议采用外部函数调用的方式。

10.2 JavaScript语法

10.2.1 语法基础

10.2.1.1 区分大小写

JavaScript是一种区分大小写的语言，这意味着变量名、函数名、关键字等在使用时必须保持正确的大小写形式。例如，myVariable和MyVariable在JavaScript中会被视为两个不同的变量。

10.2.1.2 变量不区分类型

JavaScript是一种动态类型语言，这意味着在声明变量时不需要指定变量的类型，变量可以存储任何类型的数据。例如，可以先将一个变量赋值为字符串，然后再将其赋值为数字。

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

在JavaScript中，每行代码的结尾可以省略分号。JavaScript解析器会根据换行符自动判断语句的结束位置。然而，为了提高代码的可读性和避免潜在的语法错误，建议在每条语句的结尾添加分号。

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

JavaScript的注释方式与C、C++、Java等语言类似。可以使用//进行单行注释，或者使用/* */进行多行注释。例如：

// 这是一个单行注释
var x = 5; /* 这是一个多行注释，可以跨越多行 */

JavaScript的语法基础还包括其他方面，如变量声明、数据类型、操作符、条件语句、循环语句、函数定义等。这些基础语法构成了JavaScript语言的核心，是学习和使用JavaScript的基础。

10.2.2 标识符和常用变量

10.2.2.1 标识符

定义：在JavaScript中，标识符是用来命名变量、函数、属性、函数的参数等的字符序列。
命名规则
标识符必须以字母（a - z或A - Z）、下划线（_）或者美元符号（$）开头。
后续字符可以是字母、数字、下划线或者美元符号。
标识符不能是JavaScript中的保留关键字（如if、else、for、while等）。
标识符是区分大小写的，例如myVariable和myvariable是不同的标识符。
示例：合法的标识符有myVar、_count、$price等；不合法的标识符如5num（不能以数字开头）、if（是保留关键字）。

10.2.2.2 变量声明

var关键字：在JavaScript的早期版本中，使用var关键字来声明变量。例如：var x = 5;。使用var声明的变量具有函数级别的作用域。这意味着如果在一个函数内部使用var声明变量，该变量在整个函数内部都是可访问的。
let关键字：随着JavaScript的发展，引入了let关键字来声明变量。let声明的变量具有块级别的作用域。例如：

{
    let y = 10;
    console.log(y); // 10，在这个块内部可以访问y
}
console.log(y); // 会报错，因为y的作用域仅限于块内部

const关键字：用于声明常量。一旦用const声明了一个变量，就不能再重新赋值。例如：const PI = 3.14159;。需要注意的是，const声明的常量如果是对象或者数组，虽然不能重新赋值，但可以修改其内部的属性或元素。

10.2.2.3 变量类型

原始数据类型
Number（数字类型）：包括整数和浮点数。例如var num1 = 5;（整数），var num2 = 3.14;（浮点数）。JavaScript中的数字类型遵循IEEE 754标准。
String（字符串类型）：由零个或多个字符组成，用单引号或双引号括起来。例如var str1 = 'Hello';，var str2 = "World";。
Boolean（布尔类型）：只有两个值，true或者false。例如var isTrue = true;。
null（空值类型）：表示一个空对象指针，只有一个值null。例如var emptyValue = null;。
undefined（未定义类型）：当一个变量被声明但未被初始化时，它的值为undefined。例如：

var unassigned;
console.log(unassigned); // undefined

10.2.3 运算符与表达式

10.2.3.1 算术运算符和表达式

算术运算符
加法（+）：用于数字相加或字符串连接。例如，3 + 5结果为8；而'Hello' + ' World'结果为'Hello World'。
减法（-）：用于数字相减，如7 - 2结果为5。
乘法（*）：实现数字相乘，如4 * 3结果为12。
除法（/）：进行数字相除，如8 / 2结果为4。
取模（%）：返回除法的余数，例如9 % 2结果为1。
自增（++）和自减（--）：有前置和后置两种形式。前置自增++i先将变量i的值加1，再使用i的值；后置自增i++先使用i的值，再将i的值加1。例如：

let i = 3;
let j = ++i; // i先自增为4，然后j被赋值为4
let k = 3;
let l = k++; // l被赋值为3，然后k自增为4

算术表达式：由算术运算符连接操作数（常量、变量）组成的式子，例如(2 + 3) * 4。

10.2.3.2 关系运算符和表达式

关系运算符
大于（>）：判断左边操作数是否大于右边操作数，如5 > 3结果为true。
小于（<）：判断左边操作数是否小于右边操作数，如2 < 4结果为true。
大于等于（>=）：判断左边操作数是否大于等于右边操作数，如4 >= 4结果为true。
小于等于（<=）：判断左边操作数是否小于等于右边操作数，如3 <= 3结果为true。
等于（==）和全等（===）：==只比较值是否相等，===不仅比较值，还比较数据类型。例如，5 == '5'结果为true，但5 === '5'结果为false。
不等于（!=）和不全等（!==）：与等于和全等相反。例如，5!= '5'结果为false，但5!== '5'结果为true。
关系表达式：由关系运算符连接操作数组成的式子，如x > y，其结果为布尔值。

10.2.3.3 逻辑运算符和表达式

逻辑运算符
逻辑与（&&）：当且仅当两个操作数都为true时，结果为true。例如，true && false结果为false。如果第一个操作数为false，则不会再计算第二个操作数（短路特性）。
逻辑或（||）：只要有一个操作数为true，结果为true。例如，true || false结果为true。如果第一个操作数为true，则不会再计算第二个操作数（短路特性）。
逻辑非（!）：对操作数取反，true变为false，false变为true。例如，!(true)结果为false。
逻辑表达式：由逻辑运算符连接操作数（通常为布尔值或可转换为布尔值的表达式）组成的式子，如(a > b) && (c < d)。

10.2.3.4 赋值运算符和表达式

赋值运算符
基本赋值（=）：将右边表达式的值赋给左边的变量，如let x = 5;。
复合赋值运算符：包括+=（加等于）、-=（减等于）、*=（乘等于）、/=（除等于）、%=（模等于）等。例如，let y = 3; y += 2;等同于y = y + 2，结果y的值为5。
赋值表达式：由赋值运算符连接变量和表达式组成的式子，如z = (a + b) / 2。

10.2.3.5 条件运算符和表达式

条件运算符（?:）：也称为三元运算符。语法为条件表达式? 表达式1 : 表达式2。如果条件表达式为true，则返回表达式1的值，否则返回表达式2的值。例如，let num = 10; let result = num > 5? 'Greater' : 'Less';结果result为Greater。
条件表达式：由条件运算符连接条件、表达式1和表达式2组成的式子。
10.2.3.6 逗号运算符和表达式
逗号运算符（,）：用于在一条语句中执行多个操作。整个逗号表达式的值为最后一个表达式的值。例如，let a = (1, 2, 3);结果a的值为3。
逗号表达式：由逗号运算符连接多个表达式组成的式子，如x = 1, y = 2, z = x + y。

10.2.4 程序设计

10.2.4.1 条件分支语句

JavaScript中的条件分支语句用于根据不同的条件执行不同的代码块

if语句
基本形式：

if (condition) {
    // 如果condition为真，执行这里的代码块
}

switch (expression) {
    case value1:
        // 当expression的值等于value1时执行这里的代码块
        break;
    case value2:
        // 当expression的值等于value2时执行这里的代码块
        break;
    default:
        // 当expression的值与前面的case值都不匹配时执行这里的代码块
}

10.2.4.2 循环语句

循环语句用于重复执行一段代码。

for循环
基本语法：

for (initialization; condition; increment/decrement) {
    // 只要condition为真，就执行这里的代码块
}

while (condition) {
    // 只要condition为真，就执行这里的代码块
}

do {
    // 先执行这里的代码块，然后再判断condition
} while (condition);

与while循环不同的是，do - while循环至少会执行一次代码块，因为它是先执行代码块再判断条件。

10.2.5 函数

10.2.5.1 定义函数

函数声明
基本语法：

function functionName(parameters) {
    // 函数体，包含要执行的代码
}

let add = function (num1, num2) {
    return num1 + num2;
};

这种方式定义的函数也可以正常调用，和函数声明方式在功能上是类似的，但存在一些细微的区别，比如函数声明会被提升到作用域的顶部，而函数表达式不会。

箭头函数（ES6+）
这是一种更简洁的函数定义方式。例如：

let add = (num1, num2) => num1 + num2;

如果函数体只有一条语句且是返回值，箭头函数可以省略花括号和return关键字。如果函数有多个参数，需要用括号括起来；如果只有一个参数，可以省略括号。例如：

// 无参数的箭头函数
let sayHello = () => console.log('Hello');
 
// 单个参数的箭头函数省略括号
let double = num => num * 2;

10.2.5.2 函数返回值

函数可以通过return语句返回一个值。这个值可以是任何数据类型，如数字、字符串、对象等。

在函数内部，一旦遇到return语句，函数就会停止执行，并将指定的值返回给调用者。例如：

function getMax(num1, num2) {
    if (num1 > num2) {
        return num1;
    } else {
        return num2;
    }
}
let result = getMax(5, 3);
console.log(result); // 输出5

function doSomething() {
    console.log('执行一些操作');
}
let value = doSomething();
console.log(value); // 输出undefined

10.2.5.3 函数调用

直接调用
对于已经定义好的函数，可以直接使用函数名加上括号（如果有参数则在括号内传入参数）来调用。例如：
```
function greet(name) {
    console.log('Hello, ' + name);
}
greet('John');
```
作为方法调用
在JavaScript中，对象可以包含函数作为其属性，这些函数被称为方法。可以通过对象.方法名()的形式来调用。例如：
```
let person = {
    name: 'Alice',
    sayHello: function () {
        console.log('Hello, my name is ' + this.name);
    }
};
person.sayHello();
```
里this关键字在方法内部指向调用该方法的对象（在这个例子中就是person对象）。
作为函数构造器调用（使用new关键字）

当使用new关键字调用函数时，函数会被作为构造函数来创建一个新的对象。例如：

function Person(name) {
    this.name = name;
    this.sayHello = function () {
        console.log('Hello, my name is ' + this.name);
    }
}
let newPerson = new Person('Bob');
newPerson.sayHello();

10.3 JavaScript对象

10.3.1 对象基础

10.3.1.1 概述

在JavaScript中，对象是一种复合的数据类型，它可以将多个数据（以属性的形式）和功能（以方法的形式）组合在一起。对象就像是一个容器，用来存储相关的数据和操作这些数据的函数。
对象可以通过字面量表示法、构造函数或者Object.create()方法来创建。
例如，使用字面量创建一个简单的对象：

这里创建了一个名为person的对象，它包含name和age两个属性。

10.3.1.2 属性
属性定义
属性是对象内部存储数据的成员。在对象字面量中，属性以键 - 值对的形式出现，键（如name和age上面的例子）是一个字符串（在JavaScript中也可以使用标识符形式，不需要引号），值可以是任何数据类型，如数字、字符串、布尔值、函数、对象等。
可以动态地给对象添加属性。例如：
```
let car = {};
car.color = 'blue';
car['model'] = 'sedan';
```
这里先创建了一个空对象car，然后通过点语法和方括号语法分别添加了color和model两个属性。

属性访问
可以使用点语法或者方括号语法来访问对象的属性。
点语法：如果属性名是合法的标识符，就可以使用objectName.propertyName的形式访问属性。例如，对于前面的person对象，可以使用person.name来获取name属性的值。
方括号语法：如果属性名是一个表达式或者包含特殊字符，就需要使用objectName['propertyName']的形式。例如，person['age']和person.age都可以获取age属性的值，但如果属性名是动态的，如let prop = 'name'; console.log(person[prop]);这种情况就只能使用方括号语法。

10.3.1.3 方法
方法定义
方法是对象中的函数，它定义了对象可以执行的操作。在对象字面量中，方法也是以键 - 值对的形式定义的，只不过值是一个函数。例如：
```
let dog = {
    name: 'Buddy',
    bark: function () {
        console.log('Woof!');
    }
};
```
这里bark就是dog对象的一个方法。、

方法调用
可以通过对象来调用其内部的方法，同样使用点语法或者方括号语法。例如，对于前面的dog对象，可以使用dog.bark()或者dog['bark']()来调用bark方法。
this关键字在方法中的使用
在方法内部，this关键字通常指向调用该方法的对象。例如：
```
let cat = {
    name: 'Mimi',
    sayName: function () {
        console.log('My name is ' + this.name);
    }
};
cat.sayName(); // 输出 'My name is Mimi'
```
10.3.2 常用对象

10.3.2.1 window对象
window对象代表浏览器窗口，是JavaScript中的全局对象。它提供了许多属性和方法，例如alert()、confirm()、prompt()等，用于与用户交互。此外，window对象还提供了setTimeout()、setInterval()等方法，用于设置定时器。

例：

0.3.2.2 document对象
document对象代表整个HTML文档，是window对象的一个属性。它提供了访问和操作文档内容的方法和属性，例如getElementById()、getElementsByTagName()等，用于获取文档中的元素。此外，document对象还提供了write()、writeln()等方法，用于向文档中写入内容。、

例：

0.3.2.3 location对象
location对象提供了与当前窗口中加载的文档有关的信息，例如href属性表示当前文档的URL，search属性表示查询字符串部分，hash属性表示URL中的锚部分。此外，location对象还提供了assign()、reload()、replace()等方法，用于导航到新的URL或重新加载当前页面。

例：

10.3.2.4 navigator对象
navigator对象包含有关浏览器的信息，例如appCodeName、appName、appVersion等属性，以及javaEnabled()、taintEnabled()等方法。这些信息可以用于检测浏览器的类型和版本，以及是否支持某些功能。

例：

10.3.2.5 screen对象
screen对象包含有关客户端显示屏幕的信息，例如availHeight、availWidth、colorDepth、height、width等属性。这些信息可以用于获取屏幕的大小和颜色深度等参数。

以上是对这些常用对象的简要介绍，它们在Web开发中非常重要，掌握它们的使用方法对于编写有效的JavaScript代码至关重要。

例：

10.4 JavaScript事件

10.4.1 事件及事件处理
事件：在JavaScript中，事件是浏览器或用户执行的某种动作。例如，用户点击鼠标、按下键盘按键、页面加载完成等都是事件。这些事件可以被JavaScript代码检测到并做出相应的反应。
事件处理：当事件发生时，需要有相应的代码来处理这个事件，这就是事件处理。JavaScript提供了多种方式来处理事件。一种常见的方式是将一个函数赋值给事件属性。例如，对于一个HTML按钮元素，可以通过在JavaScript中设置其onclick属性来处理点击事件：
```
<button id="myButton">点击我</button>
 
<script>
function handleClick() {
    alert('你点击了按钮');
}
// 获取按钮元素并设置点击事件处理函数
var button = document.getElementById('myButton');
button.onclick = handleClick;
</script>
```
另一种方式是使用事件监听器（addEventListener），这种方式更加灵活，允许为一个元素添加多个事件处理函数，并且可以控制事件传播的阶段等。例如：
```
<button id="myButton2">使用addEventListener点击我</button>
 
<script>
function handleClick2() {
    alert('你使用addEventListener点击了按钮');
}
var button2 = document.getElementById('myButton2');
// 使用addEventListener添加点击事件处理函数
button2.addEventListener('click', handleClick2);
</script>
```
10.4.2 常用事件
鼠标事件
click：当鼠标左键点击元素时触发。例如在按钮上绑定click事件，当用户点击按钮时执行相应操作。
dblclick：双击鼠标左键时触发。
mousedown：鼠标按键（任何键）按下时触发。
mouseup：鼠标按键（任何键）松开时触发。
mousemove：鼠标在元素内部移动时触发。
mouseover：鼠标指针移到元素上时触发。
mouseout：鼠标指针移出元素时触发。
键盘事件
keydown：当键盘上的某个按键被按下时触发。可以用来检测用户是否按下了特定的按键，例如在一个输入框中，可以阻止某些按键的输入。
keyup：当键盘上的某个按键被松开时触发。
keypress：当用户按下并松开一个产生字符值的按键时触发（例如字母、数字、标点符号等）。注意，一些功能键（如方向键、控制键等）不会触发keypress事件。
页面事件
load：当页面及其所有资源（如图像、脚本等）完全加载后触发。通常用于在页面加载完成后执行一些初始化操作，比如初始化某些插件或者获取页面元素进行操作。
unload：当用户离开页面时触发。例如可以用于保存用户在页面上的某些临时数据。
7
10.4.3 事件应用举例

示例1：图片切换器（鼠标悬停事件mouseover和鼠标移出事件mouseout）
```
<!DOCTYPE html>
<html>
 
<head>
    <title>图片切换器</title>
</head>
 
<body>
    <img id="mainImage" src="img/1.jpg" alt="初始图片">
    <script>
        var mainImage = document.getElementById('mainImage');
        var image2 = 'image2.jpg';
 
        mainImage.addEventListener('mouseover', function () {
            mainImage.src = image2;
        });
 
        mainImage.addEventListener('mouseout', function () {
            mainImage.src = 'image1.jpg';
        });
    </script>
</body>
 
</html>
```
在这个例子中，当鼠标悬停在初始图片（image1.jpg）上时，图片切换为image2.jpg，当鼠标移出时，图片又切换回image1.jpg。

onClick事件举例

onLoad事件举例
onchange事件举例
鼠标事件（onmouseover.onmouseout.onmousedown.onmouseup）

onkeypress事件.omkerdown事件10.5 综合案例——轮播广告

广告