Web-JavaScript-Study

<u> 作者：jason-wrj </u>

<u> 分类：服务器/网络服务器/JavaScript </u>

<u> 标签：Server, Web Server, JavaScript </u>

<u> 更多：www.dioit.com——迪欧IT——dio智能科技 </u>

<u> 更多：www.dioit.com——dioIT——嵌入式电子智能技术 </u>

1 JavaScript 概述

1.1 JavaScript 简介

JavaScript （简称 JS），是一种轻量级、解释型（或即时编译型）的弱类型动态编程语言，是基于原型、函数优先、支持多范式（如面向对象、函数式编程）的脚本语言。

它最初由 Brendan Eich 在 1995 年为 Netscape Navigator 浏览器设计，原名 LiveScript，后与 Sun 公司合作更改名为 JavaScript（营销策略，为蹭 Java 热度），与 Java 没有直接关系，但这个名字反映了当时 Java 的流行。

JavaScript 主要用于增强网页的动态交互性，现已成为 Web 开发的核心技术之一，是全栈开发的核心技术。

1.2 JavaScript 规范

语言规范由 ECMAScript（ES）定义标准化，ES6（2015）新增模块化、箭头函数等革命性特性，最新版本为ES2023。

1.3 JavaScript 优势

1. 生态丰富性

   • 跨平台：从浏览器到服务器均可运行。

   • 前端框架：React、Vue、Angular 简化复杂应用开发。

   • 后端工具：Express、Koa 构建 Web 服务，NestJS 支持企业级架构。

   • 包管理：npm 仓库拥有超 300 万开源包，覆盖从工具链（Webpack）到数据库（MongoDB 驱动）的全链路需求。

2. 开发效率

   • 实时调试：浏览器开发者工具支持代码修改后即时生效。

   • 模块化：ES6 引入 import/export，结合 Webpack 实现代码分割与懒加载。

   • 快速迭代：ECMAScript 每年更新一次，持续引入现代化特性。

3. 学习曲线平缓

   • 语法接近自然语言，适合新手入门。

   • 社区资源庞大（如 MDN 文档、Stack Overflow），问题解决路径清晰。

   • 社区活跃：npm 是全球最大的包仓库，社区支持丰富。

2 特性和组成

2.1 JavaScript 核心特性

• 弱类型动态语言：

  • 变量无需预声明类型，无需编译，变量类型运行时自动推断确定，运行时动态解析。由浏览器或Node.js引擎（如V8）直接解释执行，简化开发流程。

  • 灵活但需注意类型转换问题，（如 let x = 10; x = "hello";），支持隐式类型转换。

  • ES6 新增 let/const 提升严谨性，声明可使用var（变量）、let（块级作用域）、const（常量）。

• 函数优先（函数为一等公民）： JavaScript 将函数视为（一等公民），函数可赋值给变量、作为参数传递或返回值，支持高阶函数与闭包，适合函数式编程。

• 语法灵活简洁：

  • 支持函数式编程（如箭头函数 const add = (a, b) => a + b;）

  • 基于原型的面向对象，通过原型链（Prototype Chain）实现继承（而非类），灵活性高。ES6 后新增 class 语法糖。

  • 模块化：ES6 模块标准（import/export）替代传统脚本。

• 事件驱动与异步编程：

  • 特别适合处理网页中的交互事件，适合处理高并发场景。

  • 单线程事件循环模型：主线程处理同步任务，通过事件循环（Event Loop）机制处理异步操作，异步处理用户操作（点击、网络请求），避免阻塞主线程，避免页面阻塞（如 Ajax 请求）。

  • 异步操作（如网络请求）通过回调函数、Promise 或 async/await 交由事件循环管理，处理非阻塞操作。

  • 典型场景：高并发服务器（Node.js）、实时交互（WebSocket）。

• 跨平台兼容执行：

  • 浏览器端：所有现代主流浏览器（Chrome、Firefox、Edge 等）均内置 JavaScript 引擎（如 V8、SpiderMonkey），通过 V8（Chrome）、SpiderMonkey（Firefox）等引擎直接解析执行，无需编译。

  • 服务器端：Node.js 扩展了 JavaScript 的运行环境，支持后端开发（如 API 接口、实时通信）。

  • 移动/桌面端：React Native、Electron 等框架实现跨平台应用开发（如 VS Code 桌面版）。

• 丰富的生态系统：

  • 拥有大量库（如 jQuery、React、Vue）和框架（如 Express、Angular），以及包管理工具（npm）。

2.2 Web 开发核心组成

• ECMAScript：

  JavaScript 语言基础（语法、类型、语句）。

• BOM（浏览器对象模型）：

  控制浏览器行为（窗口、历史、定位）。

• DOM（文档对象模型）：

  操作 HTML/XML 元素（如修改内容、样式）。

3 应用和技术栈

3.1 应用领域

JavaScript 是一种广泛使用的编程语言，主要用于 Web 开发的前端和后端全栈开发。

• 前端开发：

  JavaScript 是前端开发的核心语言，实现浏览器端网页的动态交互（如 DOM 操作、动态更新 DOM、表单验证、动态内容渲染（如 AJAX 异步加载数据）、动画效果、动画 React/Vue/Angular 框架、用户事件处理、用户交互等）。

  • DOM 操作：与 HTML 和 CSS 协同工作，动态修改网页内容、样式和结构。

  • 用户交互：响应点击、滚动、输入等事件。

  • 动画与图形：使用 Canvas 或 WebGL 实现 2D/3D 渲染。

  • 单页应用（SPA）：通过 React、Vue 等框架构建复杂的 Web 应用。React Router 管理路由，Redux 状态管理。

  • 服务端渲染（SSR）：Next.js 优化 SEO 和首屏加载速度。

• 后端开发（Node.js）：

  • 借助 Node.js 平台，JavaScript 可以进行后端开发，构建高性能的服务器端应用程序。

  • 通过 Node.js 构建高性能的服务器端应用（如 Express.js）和 API。

  • Node.js 的非阻塞 I/O 和事件驱动特性使得 JavaScript 在处理高并发场景下具有优势。

  • 构建 RESTful API、实时通信（WebSocket）和微服务。

  • 与数据库（MySQL、MongoDB）交互。

• 跨平台开发：

  • 移动应用：通过 React Native、Ionic 等框架，开发跨平台移动应用，实现一套代码在多个移动平台上的运行。

  • 桌面应用：使用 Electron 等框架，封装 Web 技术，开发构建如 VS Code、Slack 客户端等桌面应用程序，将网页技术与桌面应用的优势相结合。

• 脚本工具：自动化任务、浏览器扩展

• 新兴领域扩展：

  • 游戏开发：结合 Canvas 或 WebGL 创建网页游戏，Web游戏（Phaser.js），（Three.js）等场景。

  • 物联网（IoT）：通过 Node.js 控制硬件IoT设备，Node-RED 结合 MQTT 协议实现设备通信。

  • 机器学习：使用 TensorFlow.js 在浏览器端运行轻量级训练模型（如图像分类）。

  • 区块链：以太坊智能合约开发（如 Solidity 语法与 JavaScript 相似）。

领域	典型用途	代表技术/库
网页交互	DOM 操作、表单验证、动态内容加载	React/Vue/Angular
服务端	后端 API、实时通信、微服务	Node.js、Express
移动开发	跨平台应用开发	React Native、Ionic
桌面应用	跨操作系统桌面程序	Electron、NW.js

3.2 应用场景对比

场景	技术方案	优势
实时通信	WebSocket + Socket.IO	低延迟双向通信
状态管理	Redux / Vuex	可预测数据流
静态站点	Next.js / Gatsby	SEO 友好 + 服务端渲染
微前端架构	Module Federation	独立部署的组件集成

3.3 现代开发技术栈

• 框架：

  • React（组件化）：用于构建用户界面的 JavaScript 库。

  • Vue.js（响应式）：渐进式 JavaScript 框架。

  • Angular（企业级）：完整的前端框架。

• 构建工具：

  • Webpack（模块打包）、Vite（极速热更新）

• 类型扩展：

  • TypeScript（静态类型检查）

• 运行时：

  • Node.js（Chrome V8 引擎）：服务器端 JavaScript 运行环境。

  • Deno（安全优先）

• 应用：

  • Express：基于 Node.js 的 Web 应用框架。

3.4 发展趋势

• 性能持续优化

  • WebAssembly 集成结合：高性能计算，JS 调用（C++/Rust）高性能模块编译运行。WebAssembly 允许 C/C++ 代码与 JavaScript 混合运行，突破性能瓶颈。

  • V8 引擎引入 TurboFan 编译器，提升复杂逻辑执行效率。

• 语言特性演进

  • TypeScript兴起：微软开发的超集语言，静态类型增强代码健壮性。通过静态类型检查减少运行时错误。

  • ECMAScript 每年更新：ES2025 计划引入模式匹配、装饰器等特性。

• 架构模式创新

  • 微前端：将单体应用拆分为独立模块（如 Webpack 5 Module Federation）。

  • Serverless：AWS Lambda、阿里云函数计算支持事件驱动的无服务器开发。

• 行业深度融合

  • PWA（渐进式 Web 应用）：结合 Service Worker 实现离线访问和消息推送。

  • 智能设备控制：JavaScript 通过 Node.js 控制机器人、智能家居设备。

• AI 开发：TensorFlow.js 实现浏览器端机器学习

• 边缘计算：Cloudflare Workers 边缘 JS 运行时

• 元宇宙支持：Three.js/Babylon.js 构建 Web3D 应用

• 框架持续演进：如Next.js（服务端渲染）、Deno（安全运行时）。

3.5 JavaScript 最新发展（ES2025）

2025 年的 ECMAScript 标准（ES2025）引入了多项实用特性：

• Promise.try()：统一处理同步和异步异常。

Promise.try(() => {
    if (Math.random() < 0.5) throw new Error("同步错误");
  return "成功";
}).catch(err => console.error(err));

• Set 集合运算：原生支持交集、并集、差集等操作。

const A = new Set([1, 2, 3]);
const B = new Set([3, 4, 5]);
console.log(A.union(B)); // Set(5) {1, 2, 3, 4, 5}

• 正则表达式增强：支持重复命名捕获组。

const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/v;
const match = regex.exec("2025-08-18");
console.log(match.groups.year); // 2025

4 编程规范

4.1 JS 语法概述

JavaScript 的语法与 Java、C 等语言有相似之处，包含变量声明、运算符、流程控制语句（如 if 语句、for 循环、switch 语句等）。

4.2 编成规范

• 变量：其值在程序运行过程中是可变，用于存储某种数据/某些数值的存储器，想象成存储物品的盒子。

• 变量命名：用于区分存储器（盒子），必须以字母、下划线（_）或美元符号（$）开头，后面可以跟字母、下划线、美元符号和数字。变量名区分大小写，且不允许使用 JavaScript 关键字和 JavaScript 保留字做变量名。

• 关键字：break，case，catch，default，delete，do，else，finally，for，if，in，instanceof，new，return，switch，throw，try，typeof，var，void，while。

• 保留字：abstract，boolean，byte，char，class，const，debugger，double，enum，export，extends，final，float，goto，implements，import，int，interface，long，native，package，private，protected，public，short，static，super，synchronized，throws，transient，volatile。

• 大小写：JavaScript 区分大小写。

• 表达式：表达式是指具有一定的值，用操作符把常数和变量连接起来的代数式。

• 操作符：

  • 算术操作符：（+ 加法、- 减法、* 乘法、/ 除法、% 余数、++ 自加一、-- 自减一）

  • 比较操作符：（< 小于、> 大于、<= 小于等于、>= 大于等于、==等于、!= 不等于、=== 值及类型均相等（恒等于）、!==值与类型均不等（不恒等于））

  • 条件运算符：（变量 = (条件) ? 值1:值2 符合条件赋值1，不符合赋值2）

  • 逻辑操作符：（&&与、|| 或、！ 非）

  • 位运算符：（& 位与、| 位或、~ 取反、^ 异或、<<左移、>> 右移）

  • 字符串连接操作符：（+ 连接运算符、+=）

  • 赋值运算符：（= 赋值、+=、-=、*=、/=、%=）

  操作符之间的优先级（左边高到右边低）：

  • 算术操作符 → 比较操作符 → 逻辑操作符 → “=”赋值符号

  如果要改变运算顺序，需添加 () 括号的方法来改变优先级。

• 语句结束：通常在每条语句的结尾加上一个（分号 ;），来表示语句的结束。

• 单行注释：在注释内容前加（双斜杠符号 //）.

• 多行注释：以 “/*” 开始，以 “*/” 结束。

4.3 编程范式

• 面向对象：JavaScript 支持面向对象编程，通过构造函数、原型等方式创建对象，实现继承、封装等面向对象的特性。

• 函数式编程：JavaScript 也支持函数式编程，如高阶函数、纯函数等概念在 JavaScript 中可以得到应用，可以使用函数式编程的方式处理数据、实现逻辑。

4.4 变量作用域与闭包

JavaScript 的变量虽然可以不声明，直接使用。但这样编程不规范，建议先声明，后使用。

• 使用 var（函数作用域），声明变量。使用=等于号给变量赋值（存储内容）。

// 使用var（函数作用域）
// 变量声明：var 变量名1[,变量名2];
// 变量赋值：变量名 = 变量值;
var my_var = 10; //声明变量my_var，并赋值＝10（数值类型）
my_var = "ABC"; //变量my_var，重新赋值＝"ABC"（字符串类型）
my_var = true; //变量my_var，重新赋值＝true（布尔类型）

• 使用let/const（块级作用域），声明变量和常量。

// 使用let（块级作用域）
let y = 20;
​
// 使用const（常量，块级作用域）
const PI = 3.14;

• 闭包：函数保留其词法作用域（如计数器实现）。

4.5 数据类型

• 原始基本类型：

  Number（含 BigInt）、String、Boolean、Null、Undefined、Symbol（ES6 新增）。

• 对象引用类型：

  Object、Array、Function（包括Array 数组、Date 日期、RegExp、函数等）。

  类型	示例	描述
  原始类型	let str = "hello";	按值访问，不可变
  引用类型	let obj = {a: 1};	按引用访问，属性可变
  特殊值	null, undefined	空值或未定义

• Array 一维数组类型：

  数组是一个值的集合，每个值都有一个索引号，从 0 开始，每个索引都有一个相应的值，根据需要添加更多数值。

// 创建数组语法
var my_arr = new Array(); // 创建数组
// 新创建的数组，默认是空数组，没有值，如果输出则显示 undefined
// 数组存储的数据可以是任何类型（数字、字符、布尔值等）
​
// 创建数组的同时，还可以为数组指定长度，长度可任意指定。
var my_arr = new Array(10); // 创建数组，存储10个数据
my_arr[0] = "索引0，第1个数值"; // 给数组赋值为字符串
my_arr[9] = "索引9，第10个数值"; // 给数组赋值为字符串
​
// 创建数组的同时，赋值
var my_array = new Array(12,34,56,78,90); // 创建数组同时赋值
var my_array = [90,78,56,34,12]; // 直接输入一个数组（字面量数组）
​
// 新增元素语法
// 使用下一个未用的索引，任何时刻可以不断向数组增加新元素
my_array[5] = 100;
​
// 获取数组元素的值，只需引用数组变量的索引
var my_var1 = my_array[4];
​
// 获取数组的大小，只需引用数组的 length 属性
var my_var2 = my_array.length;

• Array 二维数组类型：

  一维数组 myarray[ ]，可以看成一组小盒子，每个小盒子只能放一个内容。

  二维数组 myarray[ ][ ]，可以看成一组大盒子，每个大盒子里面存放多个小盒子，每个小盒子只能放一个内容。

  二维数组的两个维度的索引值也是从 0 开始，两个维度的最后一个索引值为长度 -1。

// 第1种创建（二维）数组语法
// 先创建声明（一维）数组，再使用（循环）语句，给原（一维）数组的元素声明为数组类型。
​
// 第2种创建（二维）数组语法
var my_arr2 = [ [1,2,3],[4,5,6] ];
// my_arr2[0][2]的值为3，my_arr2[1][0]的值为4

4.6 流程控制语句

• （if）条件判断语句

// if 单值判断
if (condition) {
  // 条件成立时执行的代码块
}
​
// if - else 二选一判断
if (condition) {
  // 条件成立时执行的代码块
} else {
  // 条件不成立时执行的代码块
}
​
// if - else if - else 多选一判断
if (condition_1) {
  // 条件1成立时执行的代码块
} else if (condition_2) {
  // 条件2成立时执行的代码块
} else if (condition_n) {
  // 条件n成立时执行的代码块
} else {
  // 所有条件都不成立时执行的代码块
}

• （switch）条件判断语句

  当有很多种选项的时候，switch 比 if 使用更方便。

// switch 多种选项判断，
switch (expression) {   // 表达式
case value_1: // 满足表达式的值，就会执行该 case 后的所有代码块
    // 代码块1;
    break; // 可使用 break 语句来阻止运行下一个 case 中的代码块
case value_2:
    // 代码块2;
    break;
case value_n:
    // 代码块n;
    break;
default:
    // 表达式没有符合的 case 值，执行此默认代码块
}

• （for）循环语句

// for 循环
for(初始化变量;循环条件;循环迭代)
{     
    循环语句代码块; 
}
​
for (let i = 0; i < 5; i++) {
  console.log(i);
}

• （while）循环语句

// while 循环
while(判断条件)
{
    循环语句代码块; 
}

• （do ... while）循环语句

  do ... while 循环和 while 循环的唯一差别是，do ... while 循环保证循环体内的代码块至少被执行一次。因为它是先执行代码，后判断条件，如果条件为真，继续循环。

// do ... while 循环
do
{
    循环语句代码块; 
}
while(判断条件)

• （break）退出循环体语句

  在 for、while、do ... while 等循环中，使用 break 语句退出当前循环体，直接执行后面的代码。

// break 退出循环体
break; // 退出当前循环体，直接执行（循环语句）后面的代码。

• （continue）退出本次循环语句

  在 for、while、do ... while 等循环中，使用 continue 语句退出本次循环，直接进行后续循环。

// continue 退出本次循环
continue; // 退出本次循环，直接进行后续循环。

4.7 函数

JavaScript 中的函数是一等公民，支持函数表达式、函数嵌套、箭头函数（=>）和闭包等高级特性，函数既可以作为对象的方法，也可以作为独立的函数使用。

• 定义：声明式、表达式、箭头函数（() => {}）。

• 参数：支持默认值、剩余参数（...args）。

// 函数定义
// 函数中参数和返回值不只是数字，还可以是字符串等其它类型。 
/*
function 函数名([参数1],[参数2],[参数n])
{
    函数体代码;
    return 返回值; //返回函数值，return 后面的值叫做返回值。
}
*/
​
function add(a, b) {
  var sum = a + b;
  return sum;
}
​
// 可以通过变量存储调用函数的返回值，代码如下:
result = add(7,4); // 语句执行后，result 变量中的值为11。
​
// 箭头函数（ES6）
const multiply = (a, b) => a * b;
​
// 立即执行函数表达式（IIFE）
(function() {
  console.log('立即执行');
})();

• 函数调用1：在 <script> </script> 标签内调用。

<script type="text/javascript">
    function add()
    {
         sum = 1 + 2;
         alert(sum);
    }
  add();//调用函数，直接写函数名。
</script>

• 函数调用2：在 HTML 文件中调用。

<!-- 例如通过点击按钮后调用定义好的函数。 -->
<input type="button" value="click it" onclick="add()"> 

4.8 异步编程

• 回调函数 → Promise→ async/await（现代推荐方式，解决回调地狱）。

// Promise
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));
​
// async/await（ES8）
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

4.9 ES6+ 新特性

• 模块化（import/export）、解构赋值、模板字符串、默认参数、展开运算符（...）等。

4.10 代码示例

• 前端示例（DOM 操作）

<!DOCTYPE html>
<html>
<body>
  <button id="myButton">点击我</button>
  <p id="text"></p>
  <script>
    document.getElementById("myButton").addEventListener("click", () => {
      document.getElementById("text").innerHTML = "Hello, JavaScript!";
    });
  </script>
</body>
</html>

• 后端示例（Node.js）

const express = require("express");
const app = express();
​
app.get("/", (req, res) => {
  res.send("Hello from Node.js!");
});
​
app.listen(3000, () => {
  console.log("Server running on http://localhost:3000");
});

• 异步处理（Async/Await）

// 异步处理（Async/Await）
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data?.results?.map(item => ({ ...item, active: true }));
  } catch (error) {
    console.error("Fetch failed:", error);
    return [];
  }
}

• 类与模块化

// 类与模块化
export class User {
  #password;  // 私有字段
​
  constructor(name) {
    this.name = name;
  }
​
  login = (pass) => this.#password === pass;
}

5 HTML 引入 JavaScript

5.1 外部脚本

• 编写在HTML文档中的<head> </head>头部元素之间，通过<link>元素标签引入独立 CSS 文件，方便实现多页面复用：

<head>
    <!-- 引入外部 JavaScript 脚本 -->
    
    <script type="application/javascript" src="script1.js"> </script> 
    <!-- type="application/javascript" 在旧版浏览器中可能无法识别 -->
​
    <!-- 可以使用 type="text/javascript" 替代，或直接省略 type 属性。 -->
    <script type="text/javascript" src="script2.js"> </script> 
    <script src="script3.js"> </script> 
</head>

5.2 内部脚本

• 通常编写在HTML文档中的<head> </head>头部元素之间的<script> </script>元素内，通过在<script>元素内，直接插入 JavaScript 代码：

<head>
    <!-- JavaScript 脚本，写在 <head> 元素内-->
    <script type="application/javascript">
        document.write("JS 文档流输出文本");
    </script>
</head>

• JavaScript 能够直接写入 HTML 输出流中：

<body>
    <!-- JavaScript 脚本，写在 <body> 元素内-->
    <script type="application/javascript">
        document.write("<h1>一级标题</h1>");
        document.write("<p>文本段落。</p>");
    </script>
</body>

5.3 引入代码位置

JavaScript 代码，可以放在 HTML 页面中任何位置，但是浏览器解释 HTML 时是按先后顺序的，所以放置前面的 script 脚本就先被执行。

因此，进行页面显示初始化的 JavaScript 必须放在 <head>元素里面，因为初始化都要求提前进行（如给页面 <body> 设置 CSS 等）。

如果是通过事件调用执行的 function，那么 JavaScript 代码放置的位置没什么特别要求。

5.4 引入类型兼容性

<script>元素标签中的 type 属性，若设置为 type="application/javascript" ，在旧版浏览器中可能无法识别。

此时可以使用 type="text/javascript" 替代，或直接省略 type 属性。

6 动态页面事件

6.1 事件概述

JavaScript 可应用于创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

例如：当网页用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，再返回给网页用户一个结果。

使用事件，即在 HTML 网页元素中设置该事件属性。

6.2 常用事件

• onclick：鼠标单击事件

  当在网页上单击鼠标时，就会发生 onclick 事件。同时 onclick 事件调用的程序块就会被执行，通常与 HTML 输入/按钮一起使用。

<input name="button1" type="button" value="点击提交" onclick="submit1()" />

• onmouseover：鼠标经过事件

  当鼠标移到一个网页上的对象时，该对象就触发 onmouseover 事件，并执行 onmouseover 事件调用的程序块。

• onmouseout：鼠标移开事件

  当鼠标移开当前网页上的对象时，就触发 onmouseout 事件，执行 onmouseout 调用的程序块。

• onchange：文本框内容发生改变事件

  当 HTML 网页的文本框内容发生改变时，会触发 onchange 事件，同时执行 onchange 调用的程序块。

• onselect：文本框内容被选中事件

  当文本框或者文本域中的文字被选中时，触发 onselect 事件，同时 onselect 调用的程序块就会被执行。

• onfocus：光标聚集事件

  当网页中的对象获得聚点时，例如将光标移到 HTML 网页对象上进行聚焦时，就会执行 onfocus 调用的程序块。

• onblur：光标离开事件

  onblur 事件与 onfocus 事件是相对互反的，例如将光标离开当前获得聚焦的 HTML 网页对象时，触发 onblur 事件，同时执行 onblur 调用的程序块。

• onload：网页加载事件

  在页面加载完成后，写在 <body> 标签内的 onload 事件会立即发生，同时执行 onload 调用的程序块。

• onunload：网页卸载事件

  当用户退出页面时（页面关闭、页面刷新等），会触发 onunload 事件，同时执行 onunload 调用的程序块。

7 JavaScript 内置对象

7.1 JS 对象概述

JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。

• 对象的属性：反映该对象某些特定的性质的。例如字符串的长度、图像的长宽等。

• 对象的方法：能够在对象上执行的动作。例如表单的“提交”(Submit)，时间的“获取”(getYear)等。

  JavaScript 提供多个内置对象，比如 String、Date、Array 等等。使用内置对象前先定义，如下使用数组对象：

var obj_name1 = new Array(); //使用new关键字定义对象
var obj_name2 = [];
​
// 访问对象的属性
obj_name1.property_Name;
​
// 访问对象的方法
obj_name2.method_Name;

7.2 Array 数组对象

• Array 数组对象属性

  • <数组对象>.length：返回数组的长度，即数组里有多少个元素。

  • <数组对象>.constructor： 返回创建数组对象的原型函数。

  • Array.prototype：允许向数组对象添加属性或方法。

• Array 数组对象方法

  • [...]：创建一个新数组。

  • arrayObject.concat(array1,array2,...,arrayN);：连接两个或更多个数组，并返回结果。

    该方法不会改变现有的数组 arrayObject，而仅仅会返回被连接数组的一个副本。

  • arrayObject.copyWithin(targetIndex,sourceIndex);：从数组的指定位置拷贝元素到数组的另一个指定位置中。

  • arrayObject.entries();：返回数组的可迭代对象，包含了数组的键值对。

  • arrayObject.keys();：返回数组的可迭代对象，包含原始数组的键(key)。

  • arrayObject.every(函数);：通过函数，检测数值元素的每个元素是否都符合条件。

  • arrayObject.filter(函数);：通过函数，检测数值元素，并返回符合条件所有元素的数组。

  • arrayObject.find(函数);：返回符合测试（函数）条件的数组元素。

  • arrayObject.findIndex(函数);：返回符合测试（函数）条件的数组元素索引。

  • arrayObject.some(函数);：检测数组元素中是否有元素符合指定条件。

  • arrayObject.fill(固定值);：使用一个固定值来填充数组。

  • arrayObject.forEach(回调函数);：数组每个元素都执行一次回调函数。

  • arrayObject.reduce(回调函数);：将数组元素计算为一个值（从左到右）。

  • arrayObject.reduceRight(回调函数);：将数组元素计算为一个值（从右到左）。

  • arrayObject.from("字符串");：通过给定的对象中创建一个数组。

  • arrayObject.fromAsync();：从异步可迭代对象、可迭代对象或类数组对象创建一个新的数组。

  • arrayObject.includes(searchElement, fromIndex);：判断一个数组是否包含一个指定的值。

  • arrayObject.indexOf(searchElement);：搜索数组中的元素，并返回它所在的位置。

  • arrayObject.isArray(Object);：判断对象是否为数组。

  • arrayObject.map(function(currentValue, index,arr),thisValue);：通过指定函数处理数组的每个元素，并返回处理后的数组。

  • arrayObject.join(separator);：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

    separator 是可选的分隔符，若省略，则使用逗号,作为分隔符。

    这个方法会返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元素与元素之间。这个方法不影响数组原本的内容。

  • arrayObject.reverse();：颠倒反转数组中元素的顺序。

    arrayObject.reverse(); 会改变原来的数组，而不会创建新的数组。

  • arrayObject.slice(start,end);：选取数组的一部分，并返回一个新数组，即从 start（包含）到 end（不包含）的 arrayObject 中的元素，并不会修改原数组。

    start 是必需的起始位置。如果 start 是负数，则从数组尾部开始算起，-1 是最后一个元素，-2 是倒数第二个元素，以此类推。

    end 是可选的结束位置。如果省略该参数，则切分的数组包含从 start 到数组结束的所有元素。如果 end 是负数，表示从数组尾部算起来的元素。

  • arrayObject.sort(sortMethod);：对数组的元素进行排序。

    如果不指定<sortMethod>，则按 unicode 码的顺序进行排列。

    如果指定<sortMethod>，则按<方法函数sortMethod>所指定的排序方法进行排序。

    sortMethod(A,B);比较函数应该具有两个参数 A 和 B，且该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。其返回值如下：

    若返回值 <=-1，则表示 A 在排序后的序列中出现在 B 之前。 若返回值 >-1 && <1，则表示 A 和 B 具有相同的排序顺序。 若返回值 >=1，则表示 A 在排序后的序列中出现在 B 之后。

  • <数组对象>.shift();：删除并返回数组的第一个元素。

  • <数组对象>.unshift(新元素1,新元素2,...,新元素N);：向数组的开头添加一个或更多元素，并返回新的长度。

  • <数组对象>.pop();：删除数组的最后一个元素并返回删除的元素。

  • <数组对象>.push(新元素);：向数组的末尾添加一个或更多元素，并返回新的长度。

  • <数组对象>.splice(index,数量,item1,...,itemX);：从数组中添加或删除元素。

  • <数组对象>.toString();：将数组转换为字符串，并返回结果。

  • <数组对象>.toLocaleString(locales[, options]);：将数组转化为本地数组，并返回结果。根据当前环境的语言设置（locale）来格式化数组中的每个元素。

    • locales（可选）：字符串或字符串数组，表示语言代码（如 “en-US”、”zh-CN”）。

    • options（可选）：配置对象，用于指定格式化选项。

  • <数组对象>.valueOf();：返回数组对象的原始值。

  • Array.of()：将一组值转换为数组。

  • Array.at()：用于接收一个整数值并返回该索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数。

  • Array.flat()：创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

  • Array.flatMap()：使用映射函数映射每个元素，然后将结果压缩成一个新数组。

  • Array.with()：更新数组元素。

  • Array.findLastIndex()：对数组中的每个元素执行一个函数。

  • Array.lastIndexOf()：对数组中的每个元素执行一个函数。

  • Array.findLast()：对数组中的每个元素执行一个函数。

  • Array.toReversed()：反转数组中元素的顺序。

  • Array.toSorted()：对数组中的元素按字母顺序进行排序。

  • Array.toSpliced()：向数组中添加和/或移除元素。

  • [Symbol.iterator]() 返回一个数组迭代器对象，该对象会产生数组中每个索引的值。

7.3 Date 日期对象

日期对象可以储存任意一个日期，并且可以精确到毫秒数（1/1000 秒）。

• 定义 Date 日期对象：

var c_date = new Date(); //定义 c_date 为日期对象，且初始值为(当前电脑系统时间)。
var d_date = new Date(2025, 8, 30);  //自定义初始值为2025年8月30日
var d_date = new Date('Oct 1, 2025'); //自定义初始值为2025年10月1日

• Date 日期对象属性：

  • Object.constructor：返回对创建此对象的 Date 函数的引用。

• Date.prototype：向对象添加属性和方法。

• Date 日期对象方法：

  • <日期对象>.setFullYear(四位数字);：设置（全）年份。设置 Date 对象中的年份（四位数字）。

  • <日期对象>.getFullYear();：获取（全）年份。从 Date 对象以四位数字返回年份。

    例如(火狐浏览器)返回：【星期 月 日 年 时:分:秒 时区】这样的格式。

  • <日期对象>.setMonth();：设置月份。设置 Date 对象中月份 (0 ~ 11)。

  • <日期对象>.getMonth();：获取月份。从 Date 对象返回月份 (0 ~ 11)。

  • <日期对象>.setDate();：设置日期（天数）。设置 Date 对象中月的某一天 (1 ~ 31)。

  • <日期对象>.getDate();：获取日期（天数）。从 Date 对象返回一个月中的某一天 (1 ~ 31)。

  • <日期对象>.setHours();：设置小时。设置 Date 对象中的小时 (0 ~ 23)。

  • <日期对象>.getHours();：获取小时。返回 Date 对象的小时 (0 ~ 23)。

  • <日期对象>.setMinutes();：设置分钟。设置 Date 对象中的分钟 (0 ~ 59)。

  • <日期对象>.getMinutes();：获取分钟。返回 Date 对象的分钟 (0 ~ 59)。

  • <日期对象>.setSeconds();：设置秒数。设置 Date 对象中的秒钟 (0 ~ 59)。

  • <日期对象>.getSeconds();：获取秒数。返回 Date 对象的秒数 (0 ~ 59)。

  • <日期对象>.setMilliseconds();：设置毫秒数。设置 Date 对象中的毫秒 (0 ~ 999)。

  • <日期对象>.getMilliseconds();：获取毫秒数。返回 Date 对象的毫秒(0 ~ 999)。

  • <日期对象>.setTime(设置值);：设置时间（毫秒单位）。setTime() 方法以毫秒设置 Date 对象。

    设置值的计算从 1970年1月1日零时 到日期对象所指日期时间 的毫秒数，若设置时间推迟2小时，则可以表示为x.setTime(x.getTime() + 2 * 60 * 60 * 1000);

  • <日期对象>.getTime();：获取时间（毫秒单位）。返回（1970 年 1 月 1 日零时）至今的毫秒数。

  • <日期对象>.getDay();：获取星期。从 Date 对象返回一周中的某一天 (0 ~ 6)。

  • <日期对象>.setUTCFullYear(四位数字);：设置（全）年份。根据世界时 (UTC) 设置 Date 对象中的年份（四位数字）。

  • <日期对象>.getUTCFullYear();：获取（全）年份。根据世界时从 Date 对象返回四位数的年份。

    例如(火狐浏览器)返回：【星期 月 日 年 时:分:秒 时区】这样的格式。

  • <日期对象>.setUTCMonth();：设置月份。根据世界时 (UTC) 设置 Date 对象中的月份 (0 ~ 11)。

  • <日期对象>.getUTCMonth();：获取月份。 根据世界时从 Date 对象返回月份 (0 ~ 11)。

  • <日期对象>.setUTCDate();：设置日期（天数）。根据世界时 (UTC) 设置 Date 对象中月份的一天 (1 ~ 31)。

  • <日期对象>.getUTCDate();：获取日期（天数）。根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。

  • <日期对象>.setUTCHours();：设置小时。根据世界时 (UTC) 设置 Date 对象中的小时 (0 ~ 23)。

  • <日期对象>.getUTCHours();：获取小时。根据世界时返回 Date 对象的小时 (0 ~ 23)。

  • <日期对象>.setUTCMinutes();：设置分钟。根据世界时 (UTC) 设置 Date 对象中的分钟 (0 ~ 59)。

  • <日期对象>.getUTCMinutes();：获取分钟。根据世界时返回 Date 对象的分钟 (0 ~ 59)。

  • <日期对象>.setUTCSeconds();：设置秒数。根据世界时 (UTC) 设置指定时间的秒字段。

  • <日期对象>.getUTCSeconds();：获取秒数。根据世界时返回 Date 对象的秒钟 (0 ~ 59)。

  • <日期对象>.setUTCMilliseconds();：设置毫秒数。根据世界时 (UTC) 设置 Date 对象中的毫秒 (0 ~ 999)。

  • <日期对象>.getUTCMilliseconds();：获取毫秒数。根据世界时返回 Date 对象的毫秒(0 ~ 999)。

  • <日期对象>.getUTCDay();：获取星期。根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。

  • <日期对象>.parse("March 1, 2022");：返回1970年1月1日午夜到指定日期（字符串）的毫秒数。

  • <日期对象>.toString();：把 Date 对象转换为字符串。

  • <日期对象>.toDateString();：把 Date 对象的日期部分转换为字符串。

  • <日期对象>.toTimeString();：把 Date 对象的时间部分转换为字符串。

  • <日期对象>.toLocaleString();：根据本地时间格式，把 Date 对象转换为字符串。

  • <日期对象>.toLocaleDateString();： 根据本地时间格式，把 Date 对象的日期部分转换为字符串。

  • <日期对象>.toLocaleTimeString();：根据本地时间格式，把 Date 对象的时间部分转换为字符串。

  • <日期对象>.toUTCString();： 根据世界时，把 Date 对象转换为字符串。

  • <日期对象>.toISOString();：使用 ISO 标准返回字符串的日期格式。

  • <日期对象>.toJSON();：以 JSON 数据格式返回日期字符串。

  • <日期对象>.UTC();： 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。

  • <日期对象>.valueOf();： 返回 Date 对象的原始值。

  • <日期对象>.now();：返回当前时间的毫秒数。

7.4 String 字符串对象

• 定义 String 字符串对象

  直接赋值="字符串内容";

• String 字符串对象属性

  • stringObject.length：返回字符串的长度（字符数）。

  • Object.constructor：对创建该对象的函数的引用。

  • String.prototype：允许向对象添加属性和方法。

• String 字符串对象方法

  • stringObject.toUpperCase();：把小写字符串转换为大写字符串。

  • stringObject.toLowerCase();：把大写字符串转换为小写字符串。

  • stringObject.toLocaleUpperCase();：根据本地主机的语言环境把字符串转换为大写字符串。

  • stringObject.toLocaleLowerCase();：根据本地主机的语言环境把字符串转换为小写字符串。

  • stringObject.concat(str1,str2,...,strN);：连接两个或更多字符串，并返回新的字符串。

  • stringObject.startsWith("subString");：判查看字符串是否以指定的子字符串开头的（区分大小写）。

  • stringObject.endsWith("subString");：判断当前字符串是否以指定的子字符串结尾的（区分大小写）。

  • stringObject.fromCharCode(Unicode 编码);：将 Unicode 编码转为字符。

  • stringObject.includes("subString");：查找字符串中是否包含指定的子字符串。

  • stringObject.match(正则表达式);：查找找到一个或多个正则表达式的匹配。

  • stringObject.replace("oldString","newString");：在字符串中查找匹配的第一个子串，并替换与正则表达式匹配的子串。

  • stringObject.replaceAll("oldString","newString");：在字符串中查找匹配的所有子串，并替换与正则表达式匹配的子串。

  • stringObject.search("subString");：查找与正则表达式相匹配的值。

  • stringObject.repeat(次数);：复制字符串指定次数，并将它们连接在一起返回。

  • stringObject.slice(startPos,stopPos);：提取字符串的片断，并在新的字符串中返回被提取的部分。

  • stringObject.trim();：去除字符串两边的空白。

  • stringObject.charAt(index);：返回在指定位置的字符。

    字符串中第一个字符的 index 下标是 0，最后一个字符的 index 下标为字符串长度减一（string.length-1）。

    如果参数 index 不在 0 与 string.length-1 之间，stringObject.charAt(index)方法将返回一个空字符串。

  • stringObject.charCodeAt(index);：返回在指定位置的字符的 Unicode 编码。

  • stringObject.indexOf("subString", startpos);：返回指定字符串首次出现的位置。

    subString 是必需指定的字符串。

    startpos 是可选的整数取值，从 0 到 string.length-1 选择，若省略 startpos ，表示从 0 （即首字符）开始检索 。

    如果 stringObject.indexOf("subString", startpos) 要检索的字符串值没有出现，则该方法返回 -1。

  • stringObject.lastIndexOf("subString");：从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。

  • stringObject.split(separator,limit);：把字符串分割为字符串数组。

    separator 是必需指定的分隔符，若 separator 设置为（空字符串" "），则表示每个字符都会被分割开。

    limit 是可选的分割次数。如果 limit 参数有设置值，则返回的（子字符串）数量不会多于这个设置值。如果 limit 参数没有设置值，则不限制返回的（子字符串）数量。

  • stringObject.substring(startPos,stopPos);： 提取字符串中两个指定的索引号之间的字符。

    startPos 是必需指定的开始位置，是一个非负数的整数。

    stopPos 是可选指定的结束位置，也是一个非负数的整数。如果省略 stopPos 参数，则返回的（子字符串）会一直到（原字符串）对象的结尾。

  • stringObject.substr(startPos,length);：从起始索引号提取字符串中指定数目的字符。

    startPos 是必需指定的起始位置。如果 startPos 是负数，从字符串的尾部开始算起的位置。-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。

    length 是可选的长度，如果省略 length 参数，则返回从 startPos开始到 stringObject 对象结尾的字符。

  • stringObject.valueOf();：返回某个字符串对象的原始值。

  • Object.toString();：返回一个字符串。

7.5 Math 数学对象

Math 对象是一个固有的对象，无需创建它，直接把 Math 作为对象使用就可以调用 Math 所有属性和方法。这是 Math 对象与 Date,String 对象的区别。

• Math 对象属性

  • Math.E：返回算术常量 e，即自然对数的底数（约等于 2.718）。

  • Math.LN2：返回 2 的自然对数（约等于 0.693）。

  • Math.LN10：返回 10 的自然对数（约等于 2.302）。

  • Math.LOG2E：返回以 2 为底的 e 的对数（约等于 1.442）。

  • Math.LOG10E：返回以 10 为底的 e 的对数（约等于 0.434）。

  • Math.PI：返回圆周率（约等于 3.14159）。

  • Math.SQRT2：返回 2 的平方根（约等于 1.414）。

  • Math.SQRT1_2：返回 2 的平方根的倒数（约等于 0.707）。

• Math 对象方法

  • Math.abs(x);：返回 x 的绝对值。

  • Math.cos(x);：返回 x 的余弦值。

  • Math.sin(x);：返回 x 的正弦值。

  • Math.tan(x);：返回 x 的正切值。

  • Math.acos(x);：返回 x 的反余弦值。

  • Math.asin(x);：返回 x 的反正弦值。

  • Math.atan(x);：返回 x 的反正切值。

  • Math.atan2(y,x);：返回由 x 轴到点（x,y）的角度（以弧度为单位）。

  • Math.ceil(x);：返回 x 进行上舍入后的值，对 x 进行向上取整。

  • Math.floor(x);：返回 x 进行下舍入后的值，对 x 进行向下取整。

  • Math.round(x);：把 x 四舍五入为最接近的整数。

  • Math.exp(x);：返回 e的指数（ x 次幂）。

  • Math.log(x);：返回 x 的自然对数（以 e 为底）。

  • Math.max(x,y);：返回 x 和 y 之中的最大值。

  • Math.min(x,y);：返回 x 和 y 之中的最小值。

  • Math.pow(x,y);：返回 x 的 y 次幂。

  • Math.sqrt(x);：返回 x 的平方根。

  • Math.random();：返回 0 ~ 1 之间的随机数，（大于或等于 0 ，但小于 1)。

  • Math.toSource();：返回 Math 对象的源代码。

  • Math.valueOf();：返回 Math 对象的原始值。

7.6 Boolean 对象

Boolean 对象用于转换一个不是 Boolean 类型的值转换为 Boolean 类型值 (true 或者false).

• 定义 Boolean 对象：

  var myvar = new Boolean(1);

• Boolean 对象属性

  • Object.constructor：返回对创建此对象的 Boolean 函数的引用。

  • Boolean.prototype：向对象添加属性和方法。

• Boolean 对象方法

  • BooleanObject.toString();： 把布尔值转换为字符串，并返回结果。

  • BooleanObject.valueOf();：返回 Boolean 对象的原始值。

7.7 Number 对象

Number 对象是原始数值的包装对象。

• 定义 Number 对象：

  var num = new Number(value);

• Number 对象属性

  • Object.constructor：返回对创建此对象的 Number 函数的引用。

  • Number.prototype：允许向对象添加属性和方法。

  • Number.MAX_VALUE：可表示的最大的数。

  • Number.MIN_VALUE：可表示的最小的数。

  • Number.POSITIVE_INFINITY：正无穷大，溢出时返回该值。

  • Number.NEGATIVE_INFINITY：负无穷大，溢出时返回该值。

  • Number.NaN：非数字值。

  • Number.EPSILON：表示 1 和比最接近 1 且大于 1 的最小 Number 之间的差别。

  • Number.MIN_SAFE_INTEGER：表示在 JavaScript中最小的安全的 integer 型数字 (-(2^53 - 1))。

  • Number.MAX_SAFE_INTEGER：表示在 JavaScript 中最大的安全整数（2^53 - 1）。

• Number 对象方法

  • Number.isFinite(参数)：检测指定参数是否为无穷大。

  • Number.isInteger(参数)：检测指定参数是否为整数。

  • Number.isNaN(参数)：检测指定参数是否为 NaN，即（不是一个数字）。

  • Number.isSafeInteger(参数)：检测指定参数是否为安全整数。

  • NumberObject.toExponential(x)：把对象的值转换为指数计数法。

  • NumberObject.toFixed(x)：把数字转换为字符串，结果的小数点后有指定位数的数字。

  • Number.toLocaleString(locales, options)：返回数字在特定语言环境下的表示字符串。

  • NumberObject.toPrecision(x)：把数字格式化为指定的长度。

  • NumberObject.toString()：把数字转换为字符串，使用指定的基数。

  • NumberObject.valueOf()：返回一个 Number 对象的基本数字值。

  • Number.isInteger(参数)：用来判断给定的参数是否为整数。

  • Number.isSafeInteger(参数)：判断传入的参数值是否是一个”安全整数”。

7.8 RegExp 对象

RegExp 正则表达式是描述字符模式的对象。

正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。

• 语法

var patt=new RegExp(pattern,modifiers);
// 当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠 \）。
​
var patt=/pattern/modifiers; // 更简单的方式
// pattern（模式） 描述了表达式的模式
// modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配

• RegEXp 对象属性

  • RegEXpObject.constructor：返回一个函数，该函数是一个创建 RegExp 对象的原型。

  • RegExpObject.global：判断是否设置了 “g” 修饰符。

  • RegExpObject.ignoreCase：判断是否设置了 “i” 修饰符。

  • RegExpObject.lastIndex：用于规定下次匹配的起始位置。

  • RegExpObject.multiline：判断是否设置了 “m” 修饰符。

  • RegExpObject.source：返回正则表达式的匹配模式。

• RegEXp 对象方法

  • RegExpObject.exec(string)：检索字符串中指定的值。返回找到的值，并确定其位置。

  • RegExpObject.test(string)：检索字符串中指定的值。返回 true 或 false。

  • RegExpObject.toString：返回正则表达式的字符串。

• 修饰符

  修饰符用于执行区分大小写和全局匹配。

  修饰符	描述
  i	执行对大小写不敏感的匹配。
  g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
  m	执行多行匹配。

• 括号

  括号用于查找某个范围内的字符。

  表达式	描述
  [abc]	查找方括号之间的任何字符。
  [^abc]	查找任何不在方括号之间的字符。
  [0-9]	查找任何从 0 至 9 的数字。
  [a-z]	查找任何从小写 a 到小写 z 的字符
  [A-Z]	查找任何从大写 A 到大写 Z 的字符。
  [A-z]	查找任何从大写 A 到小写 z 的字符。
  [abrs]	查找给定集合内的任何字符。
  [^abrs]	查找给定集合外的任何字符。
  （r|g|b）	查找任何指定的选项。

• 元字符

  元字符（Metacharacter）是拥有特殊含义的字符。

  元字符	描述
  .	查找单个字符，除了换行和行结束符。
  \w	查找数字、字母及下划线。
  \W	查找非单词字符。
  \d	查找数字。
  \D	查找非数字字符。
  \s	查找空白字符。
  \S	查找非空白字符。
  \b	匹配单词边界。
  \B	匹配非单词边界。
  \0	查找 NULL 字符。
  \n	查找换行符。
  \f	查找换页符。
  \r	查找回车符。
  \t	查找制表符。
  \v	查找垂直制表符。
  \xxx	查找以八进制数 xxx 规定的字符。
  \xdd	查找以十六进制数 dd 规定的字符。
  \uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

• 量词

  量词	描述
  n+	匹配任何包含至少一个 n 的字符串。例如，/a+/ 匹配 “candy” 中的 “a”，”caaaaaaandy” 中所有的 “a”。
  n*	匹配任何包含零个或多个 n 的字符串。例如，/bo*/ 匹配 “A ghost booooed” 中的 “boooo”，”A bird warbled” 中的 “b”，但是不匹配 “A goat grunted”。
  n?	匹配任何包含零个或一个 n 的字符串。例如，/e?le?/ 匹配 “angel” 中的 “el”，”angle” 中的 “le”。
  n{X}	匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 “candy,” 中的 “a”，但是匹配 “caandy,” 中的两个 “a”，且匹配 “caaandy.” 中的前两个 “a”。
  n{X,}	X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy” 和 “caaaaaaandy.” 中所有的 “a”。
  n{X,Y}	X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 “cndy”，匹配 “candy,” 中的 “a”，”caandy,” 中的两个 “a”，匹配 “caaaaaaandy” 中的前面三个 “a”。注意，当匹配 “caaaaaaandy” 时，即使原始字符串拥有更多的 “a”，匹配项也是 “aaa”。
  n$	匹配任何结尾为 n 的字符串。
  ^n	匹配任何开头为 n 的字符串。
  ?=n	匹配任何其后紧接指定字符串 n 的字符串。
  ?!n	匹配任何其后没有紧接指定字符串 n 的字符串。

7.9 Error 错误对象

Error 对象在错误发生时提供了错误的提示信息。

• Error 对象属性

  • ErrorObject.name：设置或返回一个错误名。

    • EvalError：eval() 函数产生的错误。

      注意: 新版的 JavaScript 使用 SyntaxError 替代 EvalError。

    • RangeError：数值超出规定的范围。

    • ReferenceError：非法引用。

    • SyntaxError：语法错误。

    • TypeError：类型错误。

    • URIError：encodeURI() 函数产生的错误。

  • ErrorObject.message：设置或返回一个错误信息（字符串）。

7.10 全局属性和全局函数

JavaScript 全局属性和函数可用于创建 Javascript 对象。

• JavaScript 全局属性

  • Infinity：代表正的无穷大的数值。

  • NaN：指示某个值是不是数字值。

  • undefined：指示未定义的值。

• JavaScript 全局函数

  • encodeURI("uri")：把字符串编码为 URI。

  • decodeURI("uri")：解码某个编码的 URI。

  • encodeURIComponent("uri")：把字符串编码为 URI 组件。

  • decodeURIComponent("uri")：解码一个编码的 URI 组件。

  • escape(string)：对字符串进行编码。

  • unescape(string)：对由 escape() 编码的字符串进行解码。

  • eval(string)：计算 JavaScript 字符串，并把它作为脚本代码来执行。

  • isFinite(value)：检查某个值是否为有穷大的数。

  • isNaN(value)：检查某个值是否是数字。

  • Number(object)：把对象的值转换为数字。

  • String(object)：把对象的值转换为字符串。

  • parseFloat(string)：解析一个字符串并返回一个浮点数。

  • parseInt(string,radix)：解析一个字符串并返回一个整数。

    radix 表示要解析的数字的基数，取值介于 2 ~ 36 之间。

8 BOM 浏览器对象

8.1 window 顶层对象

window 对象是 BOM 浏览器对象模型（Browser Object Model）的核心，window 对象是指当前的浏览器窗口。

window 对象方法如下：

• alert(str);：显示带有一段消息和一个确认按钮的警告框。

• confirm(str);：显示带有一段消息和一个确认按钮、一个取消按钮的对话框。

• prompt(str1,str2);：显示可提示用户输入的对话框，带有一段消息，一个输入文本框，一个确认按钮，一个取消按钮。

• open();：打开一个新的浏览器窗口或查找一个已命名的窗口。

• close();：关闭浏览器窗口。

• print();：打印当前窗口的内容。

• focus();：把键盘焦点给予有一个窗口。

• blur();：把键盘焦点从顶层窗口移开。

• moveBy();：可相对窗口的当前坐标，把窗口移动到指定的像素。

• moveTo();：把窗口的左上角移动到指定的坐标。

• resizeBy();：按照指定的像素调整窗口的大小。

• resizeTo();：把窗口的大小调整到指定的宽度和高度。

• scrollBy();：按照指定的像素值来滚动内容。

• scrollTo();：把内容滚动到指定的坐标。

8.2 history 子对象

history 对象用于历史记录管理，该对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。

从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的 history 对象与特定的 window 对象关联。

• history 对象语法：window.history.[属性|方法] (window 可以省略)

• history 对象属性：

  • history.length：返回浏览器历史列表中的 URL 数量。

• history 对象方法：

  • history.back();：加载 history 列表中的前一个 URL。等同于点击浏览器的倒退按钮。

    history.back(); 相当于 window.history.go(-1);

  • history.forward();：加载 history 列表中的下一个 URL。等同于点击浏览器的前进按钮。

    history.back(); 相当于 window.history.go(1);

  • history.go(number);：加载 history 列表中的某个具体的页面。

    number设置为 1：表示前一个页面，go(1); 等价 forward();

    number设置为 0：表示当前页面。

    number设置为 -1：表示后一个页面，go(-1); 等价 back();

    number设置为其它数值：表示要访问的 URL 在 history 的 URL 列表中的相对位置。

8.3 location 子对象

location 用于 URL 操作，可获取或设置窗体的 URL，并且可以用于解析 URL。

// Location 对象的各部分属性，如下所示：
// href     : http://www.dioit.com:8080/index.php?id1=1&id2=2#id3
// protocol : http:
// host     : www.dioit.com:8080
// hostname : www.dioit.com
// port     : 8080
// pathname : index.php
// search   : id1=1&id2=2
// hash     : id3

• location 对象语法：window.location.[属性|方法] (window 可以省略)

• location 对象属性：

  • location.href：设置或返回完整的 URL。

  • location.protocol：设置或返回当前 URL 的协议。

  • location.host：设置或返回当前 URL 的主机名和端口号。

  • location.hostname：设置或返回当前 URL 的主机名。

  • location.port：设置或返回当前 URL 的端口号。

  • location.pathname：设置或返回当前 URL 的路径部分。

  • location.search：设置或返回从（问号?）开始的 URL (查询部分)。

  • location.hash：设置或返回从（井号#）开始的 URL （锚）。

• location 对象方法：

  • location.assign();：加载新的文档。

  • location.reload();：重新加载当前文档。

  • location.replace();：用新的文档替换当前文档。

8.4 navigator 子对象

navigator 对象包含有关浏览器的信息，用于浏览器信息检测，检测浏览器与操作系统的版本。

• navigator 对象语法：window.navigator.[属性] (window 可以省略)

• navigator 对象属性：

  • navigator.appCodeName：浏览器代码名的字符串表示。

  • navigator.appName：返回浏览器的名称。

  • navigator.appVersion：返回浏览器的平台和版本信息。

  • navigator.platform：返回运行浏览器的操作系统平台。

  • navigator.userAgent：返回由客户机发送服务器的 user-agent 头部的值。

    userAgent 是返回用户代理头的字符串表示（包括浏览器版本信息等的字符串）。

    可使用 navigator.userAgent 判断使用的是什么浏览器。

8.5 screen 子对象

screen 对象用于屏幕参数获取，可获取用户的屏幕信息。

• screen 对象语法：window.screen.[属性] (window 可以省略)

• screen 对象属性：

  • screen.availHeight：返回访问者屏幕窗口可以使用的高度，单位（像素）。

  • screen.availWidth：返回访问者屏幕窗口可以使用的宽度，单位（像素）。

  • screen.colorDepth：用户浏览器表示的颜色位数，通常为 32 位（每像素的位数）。

  • screen.pixelDepth：用户浏览器表示的颜色位数，通常为 32 位（每像素的位数）（IE 不支持此属性）。

  • screen.height：返回屏幕分辨率的高度，单位（像素）。

  • screen.width：返回屏幕分辨率的宽度，单位（像素）。

8.6 Storage 子对象

Web 存储 API 提供了 localStorage（本地存储）和 sessionStorage （会话存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。

• Storage 对象属性

  • length：返回存储对象中包含多少条数据。

• Storage 对象方法

  • key(n)：返回存储对象中第 n 个键的名称。

  • getItem(keyname)：返回指定键的值。

  • setItem(keyname, value)：添加键和值，如果对应的值存在，则更新该键对应的值。

  • removeItem(keyname)：移除键。

  • clear()：清除存储对象中所有的键。

• Web 存储 API

  • window.localStorage：在浏览器中存储 key/value 对。用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

  • window.sessionStorage：在浏览器中存储 key/value 对。 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

8.7 document 对象

document 对象是 window 对象的一部分，可通过 window.document 对其进行访问。当浏览器载入 HTML 文档，HTML 文档就会成为 Document 对象。Document 对象是 HTML 文档的根节点。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

• document 对象语法：window.document.[属性|方法] (window 可以省略)

• document 对象属性：

  • document.activeElement：返回当前获取焦点的元素。

  • document.anchors：返回对文档中所有 Anchor 对象的引用。

  • document.baseURI：返回文档的绝对基础 URI。

  • document.body：返回文档的 body 元素。

  • document.cookie：设置或返回与当前文档有关的所有 cookie。

  • document.doctype：返回与文档相关的文档类型声明 DTD。

  • document.documentElement：返回文档的根节点。

  • document.documentMode：返回用于通过浏览器渲染文档的模式。

  • document.documentURI：设置或返回文档的位置。

  • document.domain：返回当前文档的域名。

  • document.embeds：返回文档中所有嵌入的内容（embed）集合。

  • document.forms：返回对文档中所有 Form 对象引用。

  • document.images：返回对文档中所有 Image 对象引用。

  • document.implementation：返回处理该文档的 DOM Implementation 对象。

  • document.inputEncoding：返回用于文档的编码方式（在解析时）。

  • document.lastModified：返回文档被最后修改的日期和时间。

  • document.links：返回对文档中所有 Area 和 Link 对象引用。

  • document.readyState：返回文档状态 (载入中……).

  • document.referrer：返回载入当前文档的 URL。

  • document.scripts：返回页面中所有脚本的集合。

  • document.strictErrorChecking：设置或返回是否强制进行错误检查。

  • document.title：返回当前文档的标题。

  • document.URL：返回文档完整的 URL。

• document 对象方法：

  • document.getElementById(id属性值);：返回对拥有唯一 id 属性 的第一个对象的引用。

  • document.getElementsByName(name属性值);：返回带有指定名称属性的节点对象集合（和数组类似，有 length 属性）。

  • document.getElementsByClassName(class属性值);：返回文档中所有指定类名属性的元素集合，作为 NodeList 对象。

  • document.getElementsByTagName(标签名);：返回带有指定标签名称的节点对象集合（和数组类似，有 length 属性）。

  • document.write();：向文档写 HTML 表达式 或 JavaScript 代码。

  • document.writeln();：等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

  • document.open();：打开一个流，以收集来自任何 document.write(); 或 document.writeln(); 方法的输出。

  • document.close();：关闭用 document.open(); 方法打开的输出流，并显示选定的数据。

  • document.createElement("tagName");：创建一个新的元素节点。

    "tagName"：字符串值，这个字符串用来指明创建元素的类型。

  • document.createAttribute();：创建一个属性节点。

  • document.createTextNode("给定文本");：创建一个新的文本节点（包含给定文本）。

  • document.createComment();：创建注释节点。

  • document.createDocumentFragment();：创建空的 DocumentFragment 对象，并返回此对象。

  • document.renameNode();：重命名元素或者属性节点。

  • document.normalize();：删除空文本节点，并连接相邻节点。

  • document.normalizeDocument();：删除空文本节点，并连接相邻节点的。

  • document.addEventListener();：向文档添加句柄。

  • document.removeEventListener();：移除文档中（由 addEventListener(); 添加）的事件句柄。

  • document.adoptNode(node);：从另外一个文档返回 adapded 节点到当前文档。

  • document.importNode();：把一个节点从另一个文档复制到该文档以便应用。

  • document.querySelector();：返回文档中匹配指定的CSS选择器的第一元素。

  • document.querySelectorAll();：返回文档中匹配的CSS选择器的所有元素节点列表。

9 DOM 对象

9.1 DOM 介绍

DOM 是文档对象模型（Document Object Model），用于定义访问和处理 HTML 文档的标准方法。DOM 将 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。

HTML 文档可以表示为由节点构成的集合：

• 文档节点：HTML 文档。

• 元素节点：<html>、<body>、<p> 等元素标签，都是元素节点。

• 属性节点：元素标签的属性，如 <a> 标签的链接属性href。

• 文本节点：HTML 文档中，给用户可视的内容。

• 注释节点：HTML 文档注释。

9.2 DOM 元素对象、NodeList 对象

• DOM 元素对象代表着一个 HTML 元素。元素对象的子节点可以是：

  • 元素节点

  • 文本节点

  • 注释节点

• NodeList 对象 代表了节点列表，类似于 HTML 元素的子节点集合。

• DOM 元素对象属性

  • element.nodeName：是只读属性，返回一个字符串（元素的标记名），返回值是大写字母）其内容是给定元素的节点名字。

    • 如果是元素节点，返回这个元素的名字（与标签名相同，相当于tagName属性）。

    • 如果是属性节点，返回这个属性的名字。

    • 如果是文本节点，返回一个 #text 字符串。

    • 如果是文档节点，返回一个 #document 字符串。

  • element.nodeType：是只读属性，返回一个整数，数值代表给定元素的节点类型。

    nodeType 经常跟（if/switch 条件判断语句）配合使用，确保不会在错误的节点类型上，执行错误的操作。

    • 如果是元素节点，返回数值 1。

    • 如果是属性节点，返回数值 2。

    • 如果是文本节点，返回数值 3。

    • 如果是注释节点，返回数值 8。

    • 如果是文档节点，返回数值 9。

  • element.nodeValue：返回给定元素的节点值。

    nodeValue 是读写属性，但不能设置元素节点的值。一般只用来设置文本节点的值，而属性节点的值建议用 document.setAttribute() 进行设置。

    • 如果是元素节点，返回 null 或 undefined；

    • 如果是属性节点，返回这个属性节点的属性值。

    • 如果是文本节点，返回这个文本节点的内容本身。

  • element.childNodes：返回元素的一个子节点数组，数组内容由给定元素节点的子节点构成。如果选定的 element 没有子节点，则该属性返回不包含节点的 NodeList。

  • element.children：返回元素的子元素的集合。

  • element.firstChild：返回 element 子节点列表中的第一个子节点，与 element.childNodes[0] 是同样的效果 。

  • element.lastChild：返回 element 子节点列表中的最后一个子节点，与 elementNode.childNodes[elementNode.childNodes.length-1] 是同样的效果。

  • element.parentNode：返回元素的父节点，父节点只能有一个。

    可通过 element.parentNode.parentNode 访问父节点的父节点（即祖父节点）。

    parentElement=targetElement.parentNode; 通过父节点获取父元素。

  • element.nextSibling：返回该元素下一个紧跟着的兄弟节点（处于同一树层级中）。如果无此下一个紧跟的兄弟节点，则该属性返回 null。

  • element.nextElementSibling：返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点）。

  • element.previousSibling：返回该元素上一个紧跟着的兄弟节点（处于同一树层级中）。如果无此上一个紧跟的兄弟节点，则该属性返回 null。

  • element.previousElementSibling：返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）。

  • element.accessKey：设置或返回accesskey一个元素。

  • element.attributes：返回一个元素的属性数组。

  • element.classList：返回元素的类名，作为 DOMTokenList 对象。

  • element.className：设置或返回元素的class属性。

  • element.clientTop：表示一个元素的顶部边框的宽度，以像素表示。

  • element.clientLeft：表示一个元素的左边框的宽度，以像素表示。

  • element.clientHeight：在页面上返回内容的可视高度（高度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）。

  • element.clientWidth：在页面上返回内容的可视宽度（宽度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）。

  • element.contentEditable：设置或返回元素的内容是否可编辑。

  • element.dir：设置或返回一个元素中的文本方向。

  • element.firstElementChild：返回元素的第一个子元素。

  • element.id：设置或者返回元素的 id。

  • element.innerHTML：设置或者返回元素的内容。

  • element.isContentEditable：如果元素内容可编辑返回 true，否则返回false

  • element.lang：设置或者返回一个元素的语言。

  • element.lastElementChild：返回指定元素的最后一个子元素。

  • element.namespaceURI：返回命名空间的 URI。

  • element.offsetHeight：返回任何一个元素的高度包括边框（border）和内边距（padding），但不包含外边距（margin）。

  • element.offsetWidth：返回元素的宽度，包括边框（border）和内边距（padding），但不包含外边距（margin）。

  • element.offsetLeft：返回当前元素的相对水平偏移位置的偏移容器。

  • element.offsetParent：返回元素的偏移容器。

  • element.offsetTop：返回当前元素的相对垂直偏移位置的偏移容器。

  • element.ownerDocument：返回元素的根元素（文档对象）。

  • element.scrollHeight：返回整个元素的高度（包括带滚动条的隐蔽的地方）。

  • element.scrollLeft：返回当前视图中的实际元素的左边缘和左边缘之间的距离。

  • element.scrollTop：返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离。

  • element.scrollWidth：返回元素的整个宽度（包括带滚动条的隐蔽的地方）。

  • element.style：设置或返回元素的样式属性。

  • element.tabIndex：设置或返回元素的标签顺序。

  • element.tagName：作为一个字符串返回某个元素的标记名（大写）。

  • element.textContent：设置或返回一个节点和它的文本内容。

  • element.title：设置或返回元素的title属性。

• DOM 元素对象方法

  • element.addEventListener(event,function,useCapture);：向指定元素添加事件句柄。

  • element.removeEventListener(event,function,useCapture);：移除由 addEventListener() 方法添加的事件句柄。

  • element.appendChild(newChildNode);：在元素的子节点列表最后，添加一个新的子元素节点。

  • element.cloneNode(BooleanValue);：克隆某个元素。

  • element.compareDocumentPosition(node);：比较两个元素的文档位置。

  • element.focus();：设置文档或元素获取焦点。

  • element.getAttribute(属性名);：只能通过元素节点对象调用的函数，通过元素节点的属性名称获取属性的值。

  • element.getAttributeNode(属性名);：返回指定属性节点。

  • element.getElementsByTagName(标签名);：返回指定标签名的所有子元素集合。

  • element. getElementsByClassName(类名);：返回文档中所有指定类名的元素集合，作为 NodeList 对象。

  • element.getFeature();：返回指定特征的执行APIs对象。

  • element.getUserData();：返回一个元素中关联键值的对象。

  • element.hasAttribute(属性名);：如果元素中存在指定的属性返回 true，否则返回false。

  • element.hasAttributes();：如果元素有任何属性返回true，否则返回false。

  • element.hasChildNodes();：返回一个元素是否具有任何子元素。

  • element.hasFocus();：返回布尔值，检测文档或元素是否获取焦点。

  • element.insertBefore(newNode,existingNode);：现有已存在的子元素节点之前插入一个新的子元素节点。

  • element.isDefaultNamespace(namespaceURI);：如果指定了namespaceURI 返回 true，否则返回 false。

  • element.isEqualNode(node);：检查两个元素是否相等。

  • element.isSameNode(node);：检查两个元素所有有相同节点。

  • element.isSupported(feature,version);：如果在元素中支持指定特征返回 true。

  • element.matches(选择器);：如果元素匹配指定的 CSS 选择器，matches() 方法就返回 true，否则返回 false。

  • element.normalize();：使得此成为一个”normal”的形式，其中只有结构（如元素，注释，处理指令，CDATA节和实体引用）隔开Text节点，即元素（包括属性）下面的所有文本节点，既没有相邻的文本节点也没有空的文本节点。

  • document.querySelector(选择器);：返回匹配指定 CSS 选择器元素的第一个子元素。

  • document.querySelectorAll(选择器);：返回匹配指定 CSS 选择器元素的所有子元素节点列表。

  • element.removeAttribute(属性名);：从元素中删除指定的属性。

  • element.removeAttributeNode(属性节点);：删除指定属性节点并返回移除后的节点。

  • element.removeChild(targrtNode);：从一个给定元素节点中，删除一个指定的子元素节点。如果删除成功，返回被删除的节点。如果删除失败，则返回 NULL。

  • element.replaceChild(newNode,oldNode);：从一个给定元素节点中，把旧的子元素节点，替换成新的子元素节点。

  • element.setAttribute("属性名","属性值");：只能通过元素节点对象调用的函数，在元素节点增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。如果不存在该属性名，将创建一个新属性。

  • element.setAttributeNode(nodeValue);：设置或者改变指定属性节点。

  • element.setUserData();：在元素中为指定键值关联对象。

  • element.toString();：一个元素转换成字符串。

• NodeList 对象属性

  • nodelist.length：返回节点列表的节点数目。

    • document.body.childNodes.length;：返回 body 元素子节点的的数目

• NodeList 对象方法

  • nodelist.item(index);：返回某个元素基于文档树的索引

    • document.body.childNodes.item(0);：返回元素的第一个子节点。

    • document.body.childNodes[0];：返回元素的第一个子节点。

9.3 DOM 属性对象、NamedNodeMap 对象

• DOM 属性对象

  DOM 属性对象代表一个 HTML 属性，HTML 属性总是属于 HTML 元素。

• NamedNodeMap 对象

  NamedNodeMap 对象表示一个无顺序的节点列表，可通过节点名称来访问 NamedNodeMap 对象中的节点。

• DOM 属性对象属性

  • attr.isId：如果属性是 ID 类型，则 isId 属性返回 true，否则返回 false。

  • attr.name：返回属性名称

  • attr.value：设置或者返回属性值

  • attr.specified：如果属性被指定返回 true ，否则返回 false

• NamedNodeMap 对象属性

  • nodemap.length：返回节点列表的节点数目。

• NamedNodeMap 对象方法

  • nodemap.getNamedItem(nodeName);：从节点列表中返回的指定属性节点。

  • nodemap.item(index);：返回节点列表中处于指定索引号的节点。

  • nodemap.removeNamedItem(nodeName);：删除指定属性节点

  • nodemap.setNamedItem(node);：设置指定属性节点(通过名称)

9.4 DOM 事件对象

HTML DOM 事件允许 Javascript 在HTML文档元素中注册不同事件处理程序。

事件通常与函数结合使用，函数不会在事件发生前被执行。

• 鼠标事件

  事件	描述
  onclick	当用户点击某个对象时调用的事件句柄。
  oncontextmenu	在用户点击鼠标右键打开上下文菜单时触发。
  ondblclick	当用户双击某个对象时调用的事件句柄。
  onmousedown	鼠标按钮被按下。
  onmouseup	鼠标按键被松开。
  onmouseenter	当鼠标指针移动到元素上时触发。
  onmouseleave	当鼠标指针移出元素时触发。
  onmouseover	鼠标移到某元素之上。
  onmouseout	鼠标从某元素移开。
  onmousemove	鼠标被移动。

• 键盘事件

  事件	描述
  onkeydown	某个键盘按键被按下
  onkeypress	某个键盘按键被按下并松开
  onkeyup	某个键盘按键被松开

• 剪贴板事件

  事件	描述
  oncopy	该事件在用户拷贝元素内容时触发。
  oncut	该事件在用户剪切元素内容时触发。
  onpaste	该事件在用户粘贴元素内容时触发。

• 打印事件

  事件	描述
  onbeforeprint	该事件在页面即将开始打印时触发。
  onafterprint	该事件在页面已经开始打印，或者打印窗口已经关闭时触发。

• 表单事件

  事件	描述
  onfocus	元素获取焦点时触发。
  onblur	元素失去焦点时触发。
  onfocusin	元素即将获取焦点时触发。
  onfocusout	元素即将失去焦点时触发。
  oninput	元素获取用户输入时触发。
  onsubmit	表单提交时触发。
  onreset	表单重置时触发。
  onchange	该事件在表单元素的内容改变时触发。（<input>、<keygen>、<select>、<textarea>）
  onsearch	用户向搜索域输入文本时触发。（<input="search">）
  onselect	用户选取文本时触发。（<input>、<textarea>）

• 拖动事件

  事件	描述
  ondragstart	该事件在用户开始拖动元素时触发。
  ondrag	该事件在元素正在拖动时触发。
  ondragend	该事件在用户完成元素的拖动时触发。
  ondragenter	该事件在拖动的元素进入放置目标时触发。
  ondragover	该事件在拖动元素在放置目标上时触发。
  ondrop	该事件在拖动元素放置在目标区域时触发。
  ondragleave	该事件在拖动元素离开放置目标时触发。

• 多媒体（Media）事件

  事件	描述
  oncanplay	事件在用户可以开始播放视频/音频（audio/video）时触发。
  onplay	事件在视频/音频（audio/video）开始播放时触发。
  onpause	事件在视频/音频（audio/video）暂停时触发。
  onended	事件在视频/音频（audio/video）播放结束时触发。
  oncanplaythrough	事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。
  ondurationchange	事件在视频/音频（audio/video）的时长发生变化时触发。
  onplaying	事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。
  onwaiting	事件在视频由于要播放下一帧而需要缓冲时触发。
  onloadstart	事件在浏览器开始寻找指定视频/音频（audio/video）触发。
  onprogress	事件在浏览器下载指定的视频/音频（audio/video）时触发。
  onerror	事件在视频/音频（audio/video）数据加载期间发生错误时触发。
  onloadeddata	事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。
  onabort	事件在视频/音频（audio/video）终止加载时触发。
  onloadedmetadata	事件在指定视频/音频（audio/video）的元数据加载后触发。
  onseeking	事件在用户开始重新定位视频/音频（audio/video）时触发。
  onseeked	事件在用户重新定位视频/音频（audio/video）的播放位置后触发。
  onstalled	事件在浏览器获取媒体数据，但媒体数据不可用时触发。
  onsuspend	事件在浏览器读取媒体数据中止时触发。
  ontimeupdate	事件在当前的播放位置发送改变时触发。
  onratechange	事件在视频/音频（audio/video）的播放速度发送改变时触发。
  onvolumechange	事件在音量发生改变时触发。
  onemptied	当期播放列表为空时触发。

• 框架/对象（Frame/Object）事件

  事件	描述
  onabort	图像的加载被中断。（<object>）
  onbeforeunload	该事件在即将离开页面（刷新或关闭）时触发
  onerror	在加载文档或图像时发生错误。（<object>、<body> 和 <frameset>）
  onhashchange	该事件在当前 URL 的锚部分发生修改时触发。
  onload	一张页面或一幅图像完成加载。
  onpageshow	该事件在用户访问页面时触发。
  onpagehide	该事件在用户离开当前网页跳转到另外一个页面时触发
  onresize	窗口或框架被重新调整大小。
  onscroll	当文档被滚动时发生的事件。
  onunload	用户退出页面。（<body> 和 <frameset>）

• 过渡事件

  事件	描述
  transitionend	该事件在 CSS 完成过渡后触发。

• 动画事件

  事件	描述
  animationstart	该事件在 CSS 动画开始播放时触发。
  animationend	该事件在 CSS 动画结束播放时触发。
  animationiteration	该事件在 CSS 动画重复播放时触发。

• 其他事件

  事件	描述
  ononline	该事件在浏览器开始在线工作时触发。
  onoffline	该事件在浏览器开始离线工作时触发。
  onmessage	该事件通过或者从对象（WebSocket, Web Worker, Event Source 或者子 frame 或父窗口）接收到消息时触发。
  onwheel	该事件在鼠标滚轮在元素上下滚动时触发。
  onpopstate	该事件在窗口的浏览历史（history 对象）发生改变时触发。
  onshow	该事件当 <menu> 元素在上下文菜单显示时触发。
  ontoggle	该事件在用户打开或关闭 <details> 元素时触发。
  onstorage	该事件在 Web Storage（HTML 5 Web 存储）更新时触发。
  visibilitychange	该事件用于检测当前页面的可见性状态是否发生变化。

• Event 事件对象常量

  1. CAPTURING-PHASE：当前事件，处于捕获阶段。

     事件从 Document 对象沿着文档树向下传递给目标节点。如果目标的任何一个先辈专门注册了捕获事件句柄，那么在事件传播过程中运行这些句柄。

  2. AT-TARGET：当前事件，处于目标阶段。在评估目标事件。

     直接注册砸目标上的适合的事件句柄将运行。这与 0 级事件模型提供的事件处理方法相似。

  3. BUBBLING-PHASE：当前事件，处于冒泡阶段。

     在此阶段，事件将从目标元素向上传播回或起泡回 Document 对象的文档层次。

• Event 事件对象属性

  • event.bubbles：返回布尔值，指示事件是否是起泡事件类型。

  • event.cancelable：返回布尔值，指示事件是否可拥可取消的默认动作。

    用 preventDefault() 方法可以取消与事件关联的默认动作。

  • event.currentTarget：返回其监听器触发事件的节点。即当前处理该事件的元素、文档或窗口。在捕获和起泡阶段，该属性是非常有用的。

  • event.eventPhase：返回事件传播的当前阶段。

  • event.target：返回事件的目标节点（触发该事件的节点）。例如生成事件的元素、文档或窗口。

  • event.timeStamp：返回一个时间戳。指示发生事件的日期和时间（从 epoch 开始的毫秒数）。

    epoch 是一个事件参考点，是客户机启动的时间。

  • event.type：返回发生的事件的类型（当前 Event 对象表示的事件的名称）。

• Event 事件对象方法

  • initEvent();：初始化新创建的 Event 对象的属性。

  • preventDefault();：通知浏览器不要执行与事件关联的默认动作。

  • stopPropagation();：不再派发事件。

• 目标事件对象方法

  • addEventListener();：允许在目标事件中注册监听事件（IE8 = attachEvent()）。

  • dispatchEvent();：允许发送事件到监听器上（IE8 = fireEvent()）。

  • removeEventListener();：运行一次注册在事件目标上的监听事件（IE8 = detachEvent()）。

• 事件监听对象方法

  • handleEvent();：把任意对象注册为事件处理程序。

• 文档事件对象方法

  • createEvent();：创建自定义事件对象。

• 鼠标事件对象属性

  • button：返回当事件被触发时，哪个鼠标按钮被点击。

  • clientX：返回当事件被触发时，鼠标指针的水平坐标。

  • clientY：返回当事件被触发时，鼠标指针的垂直坐标。

  • screenX：返回当某个事件被触发时，鼠标指针的水平坐标。

  • screenY：返回当某个事件被触发时，鼠标指针的垂直坐标。

  • relatedTarget：返回与事件的目标节点相关的节点。

• 鼠标事件对象方法

  • initMouseEvent();：初始化鼠标事件对象的值。

• 键盘事件对象属性

  • key：在按下按键时返回按键的标识符。

  • ctrlKey：返回当事件被触发时，”CTRL” 键是否被按下。

  • altKey：返回当事件被触发时，”ALT” 是否被按下。

  • shiftKey：返回当事件被触发时，”SHIFT” 键是否被按下。

  • metaKey：返回当事件被触发时，”meta” 键是否被按下。

  • which：返回 onkeypress 事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。

  • keyCode：返回 onkeypress 事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。

  • charCode：返回 onkeypress 事件触发键值的字母代码。

  • Location：返回按键在设备上的位置。

• 键盘事件对象方法

  • initKeyboardEvent();：初始化键盘事件对象的值。

9.5 DOM 控制台对象

Console 控制台对象提供了访问浏览器调试模式的信息到控制台。

控制台需要可见（浏览器按下 F12 打开控制台）。

• Console 控制台对象方法

  • console.assert(expression, message);：如果第一个参数断言为 false，则在信息到控制台输出错误信息。

  • console.warn(message);：输出警告信息，信息最前面加一个黄色三角，表示警告。该方法对于开发过程进行测试很有帮助。

  • console.error(message);：输出错误信息到控制台。该方法对于开发过程进行测试很有帮助。

  • console.info(message);：控制台输出一条信息。该方法对于开发过程进行测试很有帮助。

  • console.log(message);：控制台输出一条信息。该方法对于开发过程进行测试很有帮助。

  • console.table(tabledata, tablecolumns);：以表格形式显示数据。第一个参数是必需的，且对象类型需要是对象或数组，对应的数据会填充到表格中。控制台需要可见（浏览器按下 F12 打开控制台）。

  • console.clear();：清除控制台上的信息。在执行成功后，会在控制台输出: “Console was cleared”。

  • console.trace(label);：用于显示当前执行的代码在堆栈中的调用路径。

  • console.count(label);：记录 count()调用次数，一般用于计数。在调用时会将数字（调用次数）写入到控制台。

  • console.time(label);：作为计时器的起始方法，开始计时间。与 timeEnd() 联合使用，用于算出一个操作所花费的准确时间。

  • console.timeEnd(label);：作为计时器的结束方法，计时结束。与 time() 联合使用，用于算出一个操作所花费的准确时间。

  • console.group(label);：在控制台创建一个信息分组。 一个完整的信息分组以 console.group() 开始，以 console.groupEnd() 结束。

  • console.groupEnd();：设置当前信息分组结束。 一个完整的信息分组以 console.group() 开始，以 console.groupEnd() 结束。

  • console.groupCollapsed(label);：在控制台创建一个信息分组。 类似 console.group() ，但它默认是折叠的。

9.6 DOM CSS 样式声明对象

CSS 样式声明对象（CSS Style Declaration）表示一个 CSS 属性-值（property-value）对的集合。

• CSS 样式声明对象属性

  • element.style.cssText：设置或返回样式声明文本，cssText 对应的是 HTML 元素的 style 属性。

  • element.style.length：返回样式中包含多少条声明。

  • object.parentRule：返回包含当前规则的规则。

• CSS 样式声明对象方法

  • object.getPropertyPriority(propertyname);：返回指定的 CSS 属性是否设置了 !important 属性。

  • object.getPropertyValue(propertyname);：返回指定的 CSS 属性值。

  • style.item(index);：通过索引方式返回 CSS 声明中的 CSS 属性名。

  • object.setProperty(propertyname,value,priority);：在 CSS 声明块中新建或者修改 CSS 属性。

  • object.removeProperty(propertyname);：移除 CSS 声明中的 CSS 属性。

9.7 DOM HTML 集合对象

HTML 集合对象（HTML Collection）表示一个 HTML 元素的集合，类似一个包含 HTML 元素的数组列表。

例如通过 getElementsByTagName(标签名); 方法，返回的就是一个 HTML Collection 集合对象。

• HTML 集合对象属性

  • HTMLCollection.length：返回 HTMLCollection 中元素的数量。

• HTML 集合对象方法

  • HTMLCollection.item(index);：返回 HTML Collection 集合对象中指定索引的元素。也可以使用HTMLCollection[index]。

  • HTMLCollection.namedItem(name);：返回 HTML Collection 集合对象中指定 ID 或 name 属性的元素。也可以使用HTMLCollection[name]。

10 DOM 对象操作示例

10.1 DOM 获取 HTML 节点示例

• 通过 HTML 元素的 id 属性值，获取元素节点：

  document.getElementById("id属性值");

• 通过 HTML 元素的 name 属性值，获取元素节点集合：

  document.getElementsByName(name属性值);

• 通过 HTML 元素的 class 属性值，获取元素节点集合：document.getElementsByClassName(class属性值);

• 通过 HTML 元素的 tagName 标签名，获取元素节点集合：document.getElementsByTagName(标签名);

10.2 DOM 操作 HTML 元素示例

• Object.innerHTML，可用于获取或替换 HTML 元素的内容。

  • Object：是获取的元素对象，例如通过object1=document.getElementById("id属性值"); 等方法获取的元素节点。

• Object.className = new_class_name;，设置或返回 Object 对象元素的类名。

10.3 DOM 操作 CSS 样式示例

• Object.style.property=new_style_Value;，用于改变 HTML 元素的样式。

  • Object：是获取的元素对象，例如通过object1=document.getElementById("id属性值"); 等方法获取的元素节点。

  • property：是样式属性，常见样式属性如下：

    • backgroundColor：HTML 元素的背景颜色。

    • width：HTML 元素的宽带。

    • height：HTML 元素的高度。

    • color：HTML 元素的颜色。

    • font：HTML 元素的字体属性。

    • fontFamily：HTML 元素的字体类型。

    • fontSize：HTML 元素的字体大小。

• Object.style.display = none;：将 Object 对象元素隐藏，关闭显示。

• Object.style.display = block;：将 Object 对象元素显示为区块级。

11 常用属性和函数方法

11.1 网页内容输出（document）

• 输出内容：document.write(字符串或变量或 HTML 标签);

  document.write 可用于直接向 HTML 输出流写内容，直接在网页中输出内容。

document.write("hello world!"); //输出内容：双引号""里包含的内容。
​
var mystr="hello world!"; //声明变量，并定义初值。
document.write(mystr); //输出内容：变量名存储的内容。
document.write(mystr+"123"); //多项内容之间用+号连接，再输出。
​
var mystr="hello";
document.write(mystr+"<br>");//输出hello后，输出一个换行符
document.write("JavaScript");
document.write("&nbsp;");//输出空格

11.2 网页用户交互（window）

• 警告：alert(str);

• alert 会弹出消息对话框，用于提示用户相关信息。

  alert 带有一个确定按钮。弹出消息对话框后，必须点击确定按钮后，才可继续其它操作。

  • str：显示在消息对话框中的文本。

var mysrt = "hello world!";
alert(mysrt);

• 确认：confirm(str);

  confirm 会弹出消息对话框，用于提示用户相关信息，并让用户做选择的动作。

  confirm 带有一个确定按钮和一个取消按钮。 弹出消息对话框后，必须点击确定/取消按钮后，才可继续其它操作。

  • str：显示在消息对话框中的文本。

  • 返回值：Boolean 值。当点击”确定”按钮时，返回true；当点击”取消”按钮时，返回false。

var response_massage=confirm("确定或取消？");
if(response_massage==true){
    document.write("确定");
}
else {
    document.write("取消");
}

• 提问：prompt(str1,str2);

  prompt 会弹出消息对话框，用于询问一些需要与用户交互的信息，并让用户做出回应。

  prompt 带有一个文本输入框，带有一个确定按钮和一个取消按钮。弹出消息对话框后，必须点击确定/取消按钮后，才可继续其它操作。

  • str1：要显示在消息对话框中的文本，不可修改。

  • str2：文本输入框中的默认显示内容，可以修改。

  • 返回值：点击确定按钮，文本输入框中的内容将作为函数返回值。若点击取消按钮，将返回 null。

var input_content=prompt("请输入内容，并点击确定按钮！");
if(myname!=null) {
    alert("你输入的内容是："+input_content);
}
else {
    alert("你点击的是取消按钮！");
}

11.3 网页窗口操作（window）

• 打开窗口：window.open([URL], [窗口名称], [参数字符串]);

  window.open() 可以新建一个浏览器窗口，或者查找一个已经存在的浏览器窗口。

  • URL：可选参数，在窗口中要显示网页的网址或路径。

    如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。

  • 窗口名称：可选参数，被打开窗口的名称。

    窗口名称由字母、数字和下划线字符组成，不能包含空格，且多个窗口的名称必须唯一。_blank 表示在新窗口显示目标网页，_self表示在当前窗口显示目标网页，_top用于框架网页中在上部窗口中显示目标网页。

  • 参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

    • top=Number：设置窗口顶部和屏幕顶部的像素距离。

    • left=Number：设置窗口左边和屏幕左边的像素距离。

    • width=Number：设置窗口的宽度。

    • height=Number：设置窗口的高度。

    • menubar=yes|no：设置窗口有没有菜单栏。

    • toolbar=yes|no：设置窗口有没有工具栏。

    • status=yes|no：设置窗口有没有状态栏。

    • scrollbars=yes|no：设置窗口有没有滚动条。

/*
打开http://www.dioit.com网站，新窗口，距离屏幕顶部100px，距离屏蔽坐标100px，窗口大小为800px * 600px，无菜单栏，无工具栏，无状态栏，有滚动条窗口：
*/
window.open('http://www.dioit.com','_blank','top=100,left=100,width=800,height=600,menubar=no,toolbar=no, status=no,scrollbars=yes');

• 关闭窗口：window.close();或<窗口对象>.close();

  window.close() 用于关闭当前窗口。

  <窗口对象>.close() 用于关闭指定窗口。

var window1=window.open('http://www.dioit.com'); //将打开的窗口对象，存储在变量window1中。
window1.close(); //window1窗口关闭

11.4 JavaScript 计时器

在 JavaScript 中，可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。

（1）间隔性触发计时器：每隔一定的时间间隔就触发一次。

• setInterval(代码,交互时间) 或setInterval("代码()",交互时间)：在每隔（指定的）时间，执行一次代码。

  • 代码：要调用的函数或要执行的程序块。

  • 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒为单位（1s=1000ms）。

  • 返回值：一个可以传递给 clearInterval() 从而取消对”代码”的周期性执行的值。

• clearInterval(id_of_setInterval)：取消 setInterval() 的设置。

  • id_of_setInterval：由 setInterval() 返回的 ID 值。该值标识要取消的间隔性执行代码块。

  （2）一次性计时器：仅在指定的延迟时间之后触发一次。

• setTimeout(代码,延迟时间) 或 setTimeout("代码()",延迟时间) ：在指定的延迟时间之后，执行代码。

  • 代码：要调用的函数或要执行的程序块。

  • 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。

• clearTimeout(id_of_setTimeout)：取消 setTimeout() 的设置。

  • id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

12 浏览器网页尺寸

12.1 浏览器窗口可视区域

获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法：

var browserVisibleWidth= document.documentElement.clientWidth
      || document.body.clientWidth;
var browserVisibleHeight= document.documentElement.clientHeight
      || document.body.clientHeight;

Document 对象的 body 属性，对应 HTML 文档的 <body> 标签：

• document.body.clientWidth：HTML文档所在窗口的当前宽度。

• document.body.clientHeight：HTML文档所在窗口的当前高度。

  对于 Internet Explorer 8、7、6、5：

• document.documentElement.clientWidth：HTML文档所在窗口的当前宽度。

• document.documentElement.clientHeight：HTML文档所在窗口的当前高度。

  对于 IE9+、Chrome、Firefox、Opera、Safari：

• window.innerWidth：表示的文档显示区域的宽度，不包括工具栏和地址栏等区域；

• window.innerHeight：表示的文档显示区域的高度，不包括工具栏和地址栏等区域；

12.2 网页内容尺寸

scrollWidth 和 scrollHeight 属性，可用于获取网页内容宽度和高度。

var webpageContentWidth=document.documentElement.scrollWidth
   || document.body.scrollWidth;
var webpageContentHeight=document.documentElement.scrollHeight
   || document.body.scrollHeight;

12.3 网页内容尺寸(含滚动条)

offsetWidth 和 offsetHeight 属性，可用于获取网页内容宽度和高度（包括滚动条等边线，且会随窗口的显示大小改变）。

var webpageWidth= document.documentElement.offsetWidth
    || document.body.offsetWidth;
var webpageHeight= document.documentElement.offsetHeight
    || document.body.offsetHeight;

12.4 网页卷去的距离

• Object.scrollLeft：设置或获取（位于给定对象最左边界）与（窗口中目前可见内容的最左端）之间的距离。

• Object.scrollTop：设置或获取（位于给定对象最顶端）与（窗口中目前可见内容的最顶端）之间的距离。

12.5 网页的偏移量

• Object.offsetLeft：获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。

  offsetParent：CSS 布局中设置 postion属性（relative、absolute、fixed）的父容器，从最近的父节点开始，一层层向上找，直到 HTML 的 body 元素。

• Object.offsetTop：获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。

  offsetParent：CSS 布局中设置 postion属性（relative、absolute、fixed）的父容器，从最近的父节点开始，一层层向上找，直到 HTML 的 body 元素。

13 学习建议

13.1 学习路径

学习 JavaScript，可以构建从简单的网页交互到复杂的全栈应用的完整解决方案。

1. 基础：语法 → DOM → 异步编程（Promise）

2. 进阶：ES6+ → TypeScript → 框架原理

3. 工程化：单元测试（Jest）→ CI/CD → 性能优化

4. 拓展：Node.js 服务端开发 → WebGL 可视化

13.2 学习资源

• 官方文档：

  • MDN JavaScript 教程

  • ECMAScript 标准文档

• 入门教程：

  • 菜鸟教程 JavaScript 教程

  • 《JavaScript 基础教程（第9版）》

• 进阶学习：

  • 《JavaScript 高级程序设计》

关键资源：

• MDN Web Docs（权威文档）

• JavaScript.info（现代教程）

• StackBlitz（在线 IDE）

• Node.js 官方指南（服务端开发）

14 总结

JavaScript 已从简单的网页脚本发展为全平台通用语言，其生态持续引领 Web 技术革新，2025 年市场份额仍保持 >95% 的浏览器覆盖率（StatCounter 数据）。

JavaScript凭借其灵活性、全栈能力及庞大生态（npm库年下载量超万亿次），稳居全球最流行语言前三。掌握其核心概念（原型链、异步、闭包）及现代框架，是成为全栈工程师的必经之路。

JavaScript 不断发展，ES6 + 引入了许多新特性，如箭头函数、解构赋值、扩展运算符等，使代码更加简洁高效。它是 Web 开发不可或缺的一部分，并且在其他领域也有广泛应用。

JavaScript 从最初的网页脚本语言，已演变为覆盖全栈开发、跨平台应用、物联网和 AI 的“全能选手”。其核心优势在于灵活的语法、庞大的生态和持续进化的标准。对于开发者而言，掌握 JavaScript 不仅是进入 Web 开发的钥匙，更是适应全栈技术栈、参与新兴领域创新的基础。未来，随着性能提升和框架演进，JavaScript 将继续拓展其技术边界，成为连接数字世界与物理世界的核心桥梁。

随着技术的不断演进，JavaScript 仍然是现代软件开发的核心语言之一。

内容目录

迪欧IT——dio智能科技