本课程需要具备的知识：

• HTML5 (opens new window)
• CSS3 (opens new window)

JavaScript教程 - 1 JavaScript简介

在 HTML5 教程中，已经介绍了前端页面的构成，主要包括：

• HTML：用于描述页面的结构；
• CSS：用于控制页面中元素的样式；
• JavaScript：用于响应用户操作；

通过 JavaScript 可以对用户操作（如点击、输入）作出响应，增强用户与页面的互动性。还可以在数据提交前检查表单输入，保证数据有效性；动态改变网页的内容、结构和样式等等。

1.1 JavaScript发展史

JavaScript发展史可谓跌宕起伏，快意恩仇！

在互联网早期的江湖中，有一个公司叫网景公司，其推出的网景浏览器浏览器，凭借着领先的技术和出色的用户体验，迅速风靡全球，市场占有率一路飙升，稳稳占据着浏览器界的霸主地位，是众多用户遨游网络世界的首选工具，关键还是收费的。这就好比在武林中，网景派凭借着一门绝世武功，称霸武林，风光无限。

初出茅庐：诞生于网景

彼时的互联网虽日渐繁荣，但网页大多是静态的，缺乏交互性。为了让网页 “动” 起来，1995 年，网景公司找来 Brendan Eich，希望他能开发出一种能在浏览器上实现简单交互功能的语言。Brendan Eich（布兰登·艾克） 临危受命，仅用了短短 10 天（你就说牛逼不牛逼吧），就创造出了最初版本的 JavaScript，当时它还叫 LiveScript。后来为了蹭 Java 的热度，便改名为 JavaScript （简称 JS）。一经推出，JavaScript 就迅速在浏览器端流行起来，它赋予了网页弹窗、表单验证等动态效果，为网页注入了灵魂，一时间让整个网页江湖热闹非凡。

微软入局：开启 “浏览器大战”

微软看着网景浏览器在市场上独占鳌头，自然是心有不甘，坐立难安。1996 年，微软凭借自身强大的技术实力和市场影响力，推出了自己的浏览器 Internet Explorer（简称 IE），你收费，我还免费，恶心死你。同时还搞出了与 JavaScript 类似的语言 JScript。微软这一招，显然是想在浏览器和网页脚本语言这两个战场上，与网景一较高下。由此，著名的 “浏览器大战” 爆发，网景和微软互不相让，不断更新浏览器功能，而 JavaScript 和 JScript 也在各自阵营中发展。然而，两者的语法和特性不完全兼容，这可让网页开发者们叫苦不迭，为了确保网页在不同浏览器上都能正常显示，他们不得不编写大量的兼容代码，就像在两个不同门派的规矩下生活，累得够呛。

标准化之路：ECMAScript 的诞生

随着 “浏览器大战” 愈演愈烈，JavaScript 的混乱局面也急需解决。当时的情况是，网景和微软各自为政，网页开发者们被不同的标准折磨得苦不堪言，整个互联网开发生态陷入了一种混乱无序的状态。网景公司为了结束这种乱象，主要是自己也要不行了，扛不住了，为了给自己辛苦孕育的 JavaScript 谋一个更广阔、更健康的发展空间，决定将 JavaScript 的相关技术和标准捐献给 ECMA 国际组织 。1997 年，ECMA 国际组织介入，制定了 JavaScript 的标准，也就是 ECMAScript （简称 ES）。这就像是江湖中出现了一个公认的武林盟主，制定了统一的武林规矩。

然而，微软仗着自己在操作系统领域的绝对统治地位以及 IE 浏览器的庞大用户基础，牛逼得很。虽然 ECMA 制定了标准，但微软对 ECMAScript 标准阳奉阴违，在 IE 浏览器中对 JavaScript 的支持依旧我行我素，不严格遵循标准。这使得开发者们仍然无法摆脱兼容不同浏览器的噩梦，微软在浏览器市场可谓是独霸武林，享受着一家独大的红利。在这之后的 10 年，网页开发领域虽然在艰难前行，但因为微软的不配合，很多新技术、新想法的推进都受到了极大的阻碍，这 10 年对于那些希望有统一开发标准的开发者来说，像是沉沦的 10 年。

谷歌崛起：V8 引擎改变战局

直到 2008 年，谷歌推出了 Chrome 浏览器，同时带来了一个超级强大的 JavaScript 引擎 ——V8。谷歌早就看到了微软在浏览器市场的 “霸权” 对整个互联网发展的限制，决心打破这种局面。V8 引擎就像是给 JavaScript 装上了一个超级涡轮增压发动机，让 JavaScript 的执行速度大幅提升。以前 JavaScript 在复杂计算和大型应用上表现不佳，有了 V8 引擎后，JavaScript 在浏览器端的性能有了质的飞跃。

Chrome 浏览器凭借着 V8 引擎带来的高性能体验，迅速吸引了大量用户。用户们发现，Chrome 浏览器在加载网页速度、运行复杂网页应用时的流畅度等方面，都远远超过了 IE 浏览器。与此同时，Chrome 对 ECMAScript 标准的支持十分积极，这让开发者们看到了希望，纷纷开始为 Chrome 浏览器优化网页和应用。此消彼长之下，微软的 IE 浏览器逐渐失去优势，市场份额不断被 Chrome 蚕食，最终惨淡出局，结束了它在浏览器市场的霸主统治。

走向后端：Node.js 横空出世

2009 年，Ryan Dahl 基于 V8 引擎创造了 Node.js，这无疑是 JavaScript 发展史上的又一个重大里程碑。Node.js 让 JavaScript 得以脱离浏览器，在服务器端运行，就好比一位大侠不仅在自己的地盘称霸，还前往别人的地盘开疆拓土。这使得 JavaScript 能够进行全栈开发，前后端均可使用同一门语言，大大提高了开发效率，吸引了更多开发者投身到 JavaScript 的阵营。

1.2 ECMAScript的版本

ECMAScript 规范不断发展，主要的版本包括：

• ES3（1999年）：最初的广泛标准，几乎所有浏览器都支持这一版本。
• ES5（2009年）：增加了许多新特性，例如 strict mode、JSON 支持、Object.create() 等。
• ES6（2015年，通常称为 ES2015）：引入了大量的语法新特性，是 JavaScript 语言史上的一个重要更新，例如 let 和 const、箭头函数、类（class）、模板字符串、模块（import/export）、Promise 等。
• ES7（2016年，ES2016）：主要包括指数运算符 ** 和 Array.prototype.includes() 方法。
• ES8（2017年，ES2017）：引入了 async/await 语法、Object.entries()、Object.values() 等。
• ES9（2018年，ES2018）：引入了异步迭代器（for await...of）和扩展对象字面量的语法。
• ES10（2019年，ES2019）：新增了 Array.prototype.flat()、flatMap()、Object.fromEntries() 等。
• ES11（2020年，ES2020）：引入了可选链（?.）、空值合并操作符（??）、BigInt 等。
• ES12（2021年，ES2021）：增加了逻辑赋值运算符（&&=, ||=, ??=）等。

现在了解一下即可。

通过上面的描述，我们知道 ECMA 国际组织制定了一个标准，也就是 ECMAScript 简称 ES，JavaScript 其实是 ECMAScript 标准的一个实现。我们学习 JavaScript 需要学习 ECMAScript 的 基础语法（如变量、数据类型、控制结构、函数等等），还要学习 ES 的各种扩展，包括 DOM（文档对象模型，HTML等文档元素）、BOM（浏览器对象模型，例如浏览器窗口、浏览器）等等。

1.3 JavaScript的特点

1 面向对象

虽然 JavaScript 是一种函数式语言，但它同样支持 面向对象编程（OOP），并且其对象系统有一些独特之处。在 JavaScript 中，几乎所有的东西都是对象，甚至函数也可以视为对象。

2 动态类型

JavaScript 是动态类型语言，变量类型在运行时确定，而非在声明时指定。例如，开发者可以先将变量赋值为数字，随后又赋值为字符串，无需进行显式的类型转换。这一特性赋予了代码编写极大的灵活性，特别适用于快速迭代开发的场景。但同时也要求开发者在编写代码时更加注意变量类型的一致性，避免因类型错误导致的运行时异常。

3 跨平台性

JavaScript 具有出色的跨平台能力，只要运行环境支持 JavaScript 引擎，无论是 Web 浏览器、服务器端（如 Node.js 环境），还是移动端应用（通过混合开发框架），甚至是物联网设备，都能够运行 JavaScript 代码。这使得开发者能够使用同一门语言进行多平台开发，有效提升开发效率，降低开发成本。

4 单线程执行

JavaScript 在浏览器环境和 Node.js 环境中都是单线程执行的。这意味着在同一时间内，JavaScript 引擎只能处理一个任务。这种设计使得 JavaScript 在处理 DOM 操作和用户交互时，不会出现多线程竞争导致的复杂问题，保证了操作的一致性和可预测性。例如，在浏览器中，JavaScript 负责处理用户的点击、输入等事件，同时操作 DOM 元素进行页面更新，如果是多线程环境，可能会出现多个线程同时修改 DOM 而导致的冲突。然而，单线程也存在局限性，对于一些耗时较长的任务，如网络请求、文件读取等，如果直接在主线程中执行，会导致页面卡顿或阻塞。为了解决这个问题，JavaScript 引入了异步编程机制，如回调函数、Promise 对象、async/await 语法等，使得这些耗时任务可以在后台执行，主线程不会被阻塞，从而保证了程序的流畅运行。

5 解释性语言

JavaScript 属于解释性语言，其代码执行过程与编译型语言有所不同。编译型语言（如 C、C++）在执行前，需要通过专门的编译器将源代码一次性编译成目标机器码，这个过程会生成可执行文件。而解释性语言 JavaScript 则是在运行时，由解释器逐行读取并执行代码。在浏览器中，JavaScript 解释器会逐行解析网页中的 JavaScript 代码，将其转换为机器能够理解的指令并立即执行。这种执行方式使得 JavaScript 开发和调试更加便捷，开发者可以实时看到代码修改后的效果，无需等待漫长的编译过程。但由于解释器每次执行代码都需要进行解析，相比编译型语言，JavaScript 在执行效率上可能会稍显逊色，尤其是在处理复杂计算和大规模数据时。不过，随着 JavaScript 引擎的不断优化，如 Chrome 浏览器的 V8 引擎采用了即时编译（JIT）等技术，在一定程度上提高了 JavaScript 的执行效率，缩小了与编译型语言的性能差距。

意思一下，进入正题！