第十章 JavaScript的应用

第十章JavaScript的应用

10.1 JavaScript概述

10.1.1 JavaScript简介

10.1.1.1 简单性

JavaScript 的语法相对简单，易于学习和使用。它不需要复杂的编译过程，开发者可以直接在浏览器中编写和调试代码。例如，变量声明可以不指定类型，这使得代码更加简洁。同时，每行代码结尾可以省略分号，进一步简化了代码的书写。

10.1.1.2 动态性

JavaScript 是一种动态语言，可以在运行时动态地添加、修改和删除对象的属性和方法。这使得开发者可以根据用户的交互和程序的运行状态实时地改变页面的内容和行为。例如，可以通过 JavaScript 动态地创建新的 HTML 元素、修改现有元素的样式和属性等。

10.1.1.3 跨平台性

JavaScript 可以在不同的操作系统和浏览器上运行，具有很强的跨平台性。这是因为 JavaScript 是由浏览器解释执行的，而不是依赖于特定的操作系统或硬件平台。只要浏览器支持 JavaScript，就可以运行相同的 JavaScript 代码。

10.1.1.4 安全性

JavaScript 在浏览器中运行时受到严格的安全限制，不能访问用户的本地文件系统、网络资源等敏感信息。这保证了用户的安全和隐私。同时，JavaScript 也不能直接修改浏览器的设置和其他应用程序，进一步增强了安全性。

10.1.1.5 基于对象的语言

JavaScript 是一种基于对象的语言，它提供了丰富的内置对象和方法，可以方便地进行面向对象编程。例如，可以使用对象字面量的方式创建对象，也可以使用构造函数的方式创建对象。

10.1.2 JavaScript入门案例

入门案例可以帮助开发者快速了解 JavaScript 的基本语法和功能。例如，可以通过一个简单的网页，展示如何使用 JavaScript 实现页面的交互效果，如按钮点击事件、表单验证等。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><script type="text/javascript">document.write(`hello word`)</script></body>
</html>

10.1.3 JavaScript放置的位置

10.1.3.1 head标记中的脚本

将 JavaScript 代码放在 head 标记中，可以在页面加载之前执行脚本。这适用于需要在页面加载之前进行一些初始化操作的情况，如设置全局变量、定义函数等。

<!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标记内有2个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标记中的脚本

将 JavaScript 代码放在 body 标记中，可以在页面加载完成后执行脚本。这适用于需要在页面加载完成后进行一些操作的情况，如操作页面元素、响应用户事件等。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><p id="clk">Clicke Here</p ><script type="text/javascripy">var demo = document.getElementById("clk");demo.onClick = msg;function msg(){alert("我是body中的javas脚本")}</scripy></body>
</html>

10.1.3.3 外部js文件中的脚本

将 JavaScript 代码放在外部 js 文件中，可以提高代码的可维护性和可重用性。可以在多个页面中引用同一个外部 js 文件，避免了代码的重复编写。

<!DOCTYPE html>
<html><meta charset="utf-8" /><title></title><head><meta charset="utf-8"><title></title><script type="text/javascript" src="js/Demo.js"></script></head><body><form><input name="btn1" type="button" onClick="message" value="调用外部js文件的Javascript函数"/></form></body>
</html>

10.1.3.4 事件处理代码中的脚本

将 JavaScript 代码放在事件处理函数中，可以在特定的事件发生时执行脚本。例如，可以在按钮点击事件、表单提交事件等处理函数中编写 JavaScript 代码。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>10.5</title></head><body><form><input type="button" onclick="alert('happy');" value="直接调用JavaScript代码"/></form></body>
</html>

10.2 JavaScript语法

10.2.1 语法基础

10.2.1.1 区分大小写

JavaScript 是区分大小写的语言，这意味着变量名、函数名、关键字等都必须严格区分大小写。例如，变量名“myVariable”和“MyVariable”是两个不同的变量。

10.2.1.2 变量不区分类型

在 JavaScript 中，变量在声明时不需要指定类型，可以在运行时动态地改变变量的类型。这使得 JavaScript 更加灵活，但也可能导致一些潜在的问题，如类型错误等。

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

虽然在 JavaScript 中每行代码结尾可以省略分号，但为了提高代码的可读性和可维护性，建议在每行代码结尾加上分号。

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

JavaScript 支持单行注释和多行注释，单行注释以“//”开头，多行注释以“/”开头和“/”结尾。

10.2.2 标识符和常用变量

10.2.2.1 标识符

标识符是用来命名变量、函数、对象等的名称。在 JavaScript 中，标识符必须以字母、下划线或美元符号开头，后面可以跟字母、数字、下划线或美元符号。

10.2.2.2 变量声明

在 JavaScript 中，可以使用“var”、“let”或“const”关键字来声明变量。“var”关键字是传统的变量声明方式，但存在一些问题，如变量提升等。“let”和“const”关键字是 ES6 引入的新的变量声明方式，它们可以避免一些“var”关键字带来的问题。

10.2.2.3 变量类型

JavaScript 中的变量类型包括数字、字符串、布尔值、对象、数组等。变量的类型可以在运行时动态地改变。

10.2.3 运算符与表达式

10.2.3.1 算术运算符和表达式

JavaScript 中的算术运算符包括加（+）、减（-）、乘（）、除（/）、取余（%）等。算术表达式是由算术运算符和操作数组成的表达式

10.2.3.2 关系运算符和表达式

JavaScript 中的关系运算符包括等于（==）、不等于（!=）、大于（>）、小于（<）、大于等于（>=）、小于等于（<=）等。关系表达式是由关系运算符和操作数组成的表达式，其结果为布尔值。

10.2.3.3 逻辑运算符和表达式

JavaScript 中的逻辑运算符包括与（&&）、或（||）、非（!）等。逻辑表达式是由逻辑运算符和操作数组成的表达式，其结果为布尔值。

10.2.3.4 赋值运算符和表达式

JavaScript 中的赋值运算符包括等于（=）、加等于（+=）、减等于（-=）、乘等于（=）、除等于（/=）等。赋值表达式是由赋值运算符和操作数组成的表达式，其结果为赋值后的值。

10.2.3.5 条件运算符和表达式

JavaScript 中的条件运算符（?:）也称为三元运算符，它是一种简洁的条件判断表达式。其语法为：条件? 表达式 1 : 表达式 2。如果条件为真，则返回表达式 1 的值；如果条件为假，则返回表达式 2 的值。

10.2.3.6 逗号运算符和表达式

JavaScript 中的逗号运算符（,）可以用来分隔多个表达式，其结果为最后一个表达式的值。

10.2.4 程序设计

10.2.4.1 条件分支语句

JavaScript 中的条件分支语句包括 if 语句、if...else 语句、if...else if...else 语句、switch 语句等。这些语句可以根据不同的条件执行不同的代码块。

10.2.4.2 循环语句

JavaScript 中的循环语句包括 for 循环、while 循环、do...while 循环等。这些语句可以重复执行一段代码，直到满足特定的条件为止。

10.2.5 函数

10.2.5.1 定义函数

在 JavaScript 中，可以使用函数声明和函数表达式两种方式来定义函数。函数声明的语法为：function 函数名(参数列表) {函数体}。函数表达式的语法为：var 函数名 = function(参数列表) {函数体}。

10.2.5.2 函数返回值

函数可以返回一个值，也可以不返回值。如果函数需要返回一个值，可以使用“return”语句来返回值。

10.2.5.3 函数调用

函数可以通过函数名和参数列表来调用。在调用函数时，需要将实际参数传递给函数的形式参数。
三、JavaScript 对象

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>10.6</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 中的基本数据类型之一。对象由属性和方法组成，可以通过对象字面量、构造函数等方式来创建对象。

10.3.1.2 属性

对象的属性是描述对象特征的变量。可以通过点运算符（.）或方括号运算符（[]）来访问对象的属性。

10.3.1.3 方法

对象的方法是描述对象行为的函数。可以通过点运算符（.）或方括号运算符（[]）来调用对象的方法。

10.3.2 常用对象

10.3.2.1 window对象

window 对象是浏览器的顶级对象，它代表浏览器窗口。可以通过 window 对象来访问浏览器的各种功能，如打开新窗口、关闭窗口、获取窗口大小等。

<!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 my window")</script><input type="button" value="move'mywindow'" onclick="moveWin()"/></body>
</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("Cance!");}</script></body>
</html>

10.3.2.2 document对象

document 对象代表当前网页的文档对象。可以通过 document 对象来访问网页的各种元素，如 HTML 元素、表单元素、图像元素等。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>10.10</title></head><body><img src="img/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>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>10.11</title></head><body><br /><div id="book">网页设计基础</div><br /><script type="text/javascript">var book= document.getElementById("book");book.onclick=msg;function msg(){alert(book.innerText);}</script></body>
</html>

10.3.2.3 location对象

location 对象代表当前网页的 URL 地址。可以通过 location 对象来获取当前网页的 URL、刷新页面、跳转到新页面等。

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

10.3.2.4 navigator对象

navigator 对象代表浏览器的信息。可以通过 navigator 对象来获取浏览器的名称、版本、操作系统等信息。

10.3.2.5 screen对象

screen 对象代表用户的屏幕信息。可以通过 screen 对象来获取屏幕的宽度、高度、颜色深度等信息。

综合 HTML

以下是一个综合的 HTML 文件，它包含了多个 JavaScript 对象操作的示例，包括创建对象、操作属性、对象迭代、原型链、Proxy、Reflect、Object 方法等。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript对象综合案例</title>
</head>
<body><h1>JavaScript对象综合案例</h1><script>// 创建对象const person = {firstName: "Kimi",lastName: "Chat",age: 30,greet: function() {console.log("Hello, " + this.firstName + " " + this.lastName);}};// 访问和修改对象属性console.log(person.firstName); // 输出 "Kimi"person.firstName = "Moonshot";console.log(person.firstName); // 输出 "Moonshot"// 删除对象属性delete person.age;console.log(person.age); // 输出 "undefined"// 枚举属性for (let key in person) {if (person.hasOwnProperty(key)) {console.log(key + ": " + person[key]);}}// Object 方法console.log(Object.keys(person)); // 输出 ["firstName", "lastName", "greet"]console.log(Object.values(person)); // 输出 ["Moonshot", "Chat", function()]console.log(Object.entries(person)); // 输出 [["firstName", "Moonshot"], ["lastName", "Chat"], ["greet", function() {}]]// 原型链const proto = {sayHello() {console.log("Hello");}};const obj = Object.create(proto);obj.sayHello(); // 输出 "Hello"// 动态属性名和方法const prefix = "user";const dynamicPerson = {};dynamicPerson[prefix + 'Name'] = 'Kimi';dynamicPerson[prefix + 'Age'] = 30;console.log(dynamicPerson.userName); // 输出 "Kimi"console.log(dynamicPerson.userAge); // 输出 30// 对象的复制const original = { a: 1, b: { c: 2 } };const copied = { ...original };copied.b.c = 4;console.log(original); // { a: 1, b: { c: 2 } }console.log(copied);   // { a: 1, b: { c: 4 } }// Proxy 和 Reflectconst proxyPerson = new Proxy(person, {get(target, property, receiver) {if (property === 'name') {return `Mr. ${Reflect.get(target, property, receiver)}`;}return Reflect.get(target, property, receiver);}});console.log(proxyPerson.name); // 输出 "Mr. Moonshot"// Object.freeze() 和 Object.seal()const frozenObj = Object.freeze({ a: 1 });frozenObj.a = 2; // 无效，frozenObj.a 仍然是 1const sealedObj = Object.seal({ a: 1, b: 2 });sealedObj.c = 3; // 无效，属性 c 不会被添加delete sealedObj.a; // 无效，属性 a 不会被删除// Object.getOwnPropertyDescriptor()const descriptor = Object.getOwnPropertyDescriptor(proxyPerson, 'name');console.log(descriptor);// Object.setPrototypeOf()const newProto = { newMethod() { console.log('New Method'); } };Object.setPrototypeOf(obj, newProto);obj.newMethod(); // 输出 'New Method'// Object.hasOwn()const hasOwn = Object.hasOwn(person, 'firstName');console.log(hasOwn); // 输出 true// JSON.stringify() 的高级用法const jsonString = JSON.stringify(person, (key, value) => {if (typeof value === 'string') {return value.toUpperCase();}return value;});console.log(jsonString);// Date 对象和时间操作const now = new Date();console.log(now.getFullYear());console.log(now.getMonth());console.log(now.getDate());console.log(now.getTime());// Math 对象和数值操作console.log(Math.PI);console.log(Math.sqrt(16));console.log(Math.pow(2, 3));console.log(Math.random());// Array 对象和数组方法const arr = [1, 2, 3, 4, 5];console.log(arr.map(x => x * 2));console.log(arr.filter(x => x > 2));console.log(arr.reduce((acc, x) => acc + x, 0));</script>
</body>
</html>

10.4 JavaScript事件

10.4.1 事件及事件处理

事件是用户与网页交互时发生的动作，如鼠标点击、键盘按下、页面加载等。事件处理是指当事件发生时执行的代码。可以通过在 HTML 元素上添加事件属性或使用 JavaScript 代码来注册事件处理函数。

10.4.2 常用事件

JavaScript 中有很多常用的事件，如 click 事件（鼠标点击事件）、keydown 事件（键盘按下事件）、load 事件（页面加载事件）、submit 事件（表单提交事件）等。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>常用事件综合案例</title><style>#tooltip {display: none;position: absolute;border: 1px solid #333;background-color: #fff;padding: 5px;}</style>
</head>
<body><h1>常用事件综合案例</h1><button id="myButton">点击我</button><input type="text" id="myInput" placeholder="输入文本"><div id="tooltip">这是一个工具提示</div><script>const button = document.getElementById('myButton');const input = document.getElementById('myInput');const tooltip = document.getElementById('tooltip');// 点击事件button.addEventListener('click', function() {alert('按钮被点击了！');});// 输入事件input.addEventListener('input', function() {console.log('输入内容：' + input.value);});// 鼠标悬停事件button.addEventListener('mouseover', function() {tooltip.style.display = 'block';});button.addEventListener('mouseout', function() {tooltip.style.display = 'none';});// 键盘事件input.addEventListener('keydown', function(event) {if (event.key === 'Enter') {alert('你按下了回车键！');}});</script>
</body>
</html>

10.4.3 事件应用举例

例如，可以通过 click 事件来实现按钮的点击效果，通过 keydown 事件来实现键盘输入的响应，通过 load 事件来实现页面加载完成后的初始化操作等。

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

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

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>10.16</title><script type="text/javascript">function mouseOver(obj){obj.style.color="blue";obj.innerHTML="把鼠标移开"}function mouseOut(obj){obj.style.color="red";obj.innerHTML="把鼠标移到上面"}function mouseDown(obj){obj.style.backgroundColor="blue";obj.innerHTML="请释放鼠标按钮"}function mouseUp(obj){obj.style.backgroundColor="red";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>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>10.17</title><script type="text/javascript">function keyDown(){alert("你按下了按键");if(event.ctrlKey){alert("你按下Ctrl键");	}}function keyPrass(){alert("你按下了键,并释放了按键");}</script></head><body onkeydown="keyDown()" onkeypress="keyPrass()"></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 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>