JavaScript 简介

Begindev 编辑部 April 5, 2026

欢迎来到 JavaScript 的精彩世界！

在本章节中，我们将揭开 JavaScript 的神秘面纱，了解它是什么，为什么它成为了现代 Web 开发中不可或缺的技术，以及它如何实现了我们习以为常的互动和动态在线体验。

理解 JavaScript 是你迈向构建迷人网页、强大应用程序甚至控制服务器的第一步，对于任何想要进入编程和 Web 开发领域的人来说，这都是一项至关重要的技能。

1. JavaScript 是什么？

JavaScript 是一种高级的、解释型的脚本语言，主要用于在网站上创建交互式和动态内容。

当互联网刚刚出现时，网站大多是静态的，展示信息的方式就像电子宣传册一样。JavaScript 的诞生改变了这一切，它使网页能够响应用户的操作，在不重新加载页面的情况下更新内容，并让页面真正“活”了起来。

1.1 历史背景

它最初由 Brendan Eich 在 Netscape 公司开发，名为 "LiveScript"。后来为了通过 Sun Microsystems 公司 Java 语言的热度进行营销，它被改名为 JavaScript。

注意：尽管名字相似，但 JavaScript 和 Java 是两种完全不同的语言，它们的用途和架构都不一样。

JavaScript 由 ECMAScript 标准化，该标准定义了语言的核心特性，确保了它在不同浏览器和环境中的一致性。

1.2 演变

起初，JavaScript 的主要作用局限于客户端（Client-side），这意味着它直接运行在用户的 Web 浏览器中。它允许开发者操作网页的结构（HTML）和样式（CSS），让元素根据用户的输入或其他事件显示、消失、变色或移动。

然而，多年来 JavaScript 的能力已经大幅扩展。随着 Node.js 等技术的出现，JavaScript 现在可以运行在服务端（Server-side）。这意味着它可以用来构建后端服务、API 甚至操作系统工具。

这一演变将 JavaScript 转变成了一门通用的全栈语言，能够驱动现代应用程序的几乎所有部分。

2. 为什么要使用 JavaScript？核心能力与优势

JavaScript 之所以被广泛采用，源于其独特的能力和众多的优势。它已经从一种简单的浏览器脚本语言演变成了一个用于开发各类应用的强大工具。

2.1 增强网页互动性（客户端）

这是 JavaScript 最初且最广为人知的强项。它在用户的浏览器中直接启用动态行为，从而带来更丰富的用户体验。

现实案例 1：表单验证想象一下你在填写在线注册表单。在你点击“提交”之前，JavaScript 可以检查你是否留空了必填项，邮箱格式是否正确，或者密码是否符合复杂度要求（例如，最小长度、包含数字和符号）。如果存在错误，JavaScript 可以在问题字段旁边即时显示消息，而无需将表单数据发送到服务器并等待响应，这使得过程更快且对用户更友好。
现实案例 2：交互式图片库在电商网站上，当你点击产品缩略图时，JavaScript 可以动态地将主图替换为所选缩略图的大版本，甚至打开全屏图片查看器，所有这些操作都不需要重新加载整个页面。
假设场景：动态内容加载考虑一个新闻网站，点击“加载更多文章”按钮会将新文章追加到页面底部，而无需跳转页面。JavaScript 处理新数据的请求，接收数据，然后动态地将新内容注入到现有的页面结构中。

2.2 超越浏览器（使用 Node.js 的服务端）

JavaScript 最重大的发展之一是 Node.js 的诞生。Node.js 是一个运行时环境，允许 JavaScript 在 Web 浏览器之外执行，通常是在服务器上。这意味着你可以使用同一种语言来编写前端（用户看到的部分）和后端（存储和处理数据的地方），从而简化了开发流程。

现实案例：实时聊天应用像 Slack 或 WhatsApp Web 这样的平台依赖服务端 JavaScript（通常使用 Node.js）来处理成千上万的并发连接，并在用户之间即时传递消息。当你发送消息时，它会进入 Node.js 服务器，服务器随后实时地将其推送到聊天室中的所有其他参与者。
假设场景：命令行界面 (CLI) 工具想象你需要一个简单的脚本来自动化电脑上的任务，比如批量重命名文件，或从 API 获取数据并生成特定格式的报告。你不需要学习像 Python 或 Bash 这样的单独脚本语言，而是可以使用 Node.js 用 JavaScript 编写这些工具。

2.3 移动端和桌面端应用

JavaScript 的触角延伸得更远：

移动应用：像 React Native（来自 Facebook）这样的框架允许开发者使用 JavaScript 编写 iOS 和 Android 的原生移动应用程序。这意味着一套代码可以涵盖多个平台，节省开发时间和资源。
桌面应用：像 Electron（被 VS Code、Slack 和 Discord 等应用使用）这样的工具使开发者能够使用包括 JavaScript、HTML 和 CSS 在内的 Web 技术构建跨平台的桌面应用程序。

2.4 关键优势

无处不在： JavaScript 几乎可以在任何地方运行——在每一个主流 Web 浏览器中、在服务器上、在移动设备上以及在桌面上。这种广泛的可用性使它极其强大。
多功能性：如前所述，一种语言可以用于应用程序的整个技术栈（前端、后端、移动端、桌面端）。这减少了学习多种语言的认知负担。
庞大的社区与资源：由于其流行度，JavaScript 拥有世界上最大的开发者社区之一。这意味着有丰富的资源、教程、论坛和库可供你学习和解决问题。
丰富的生态系统：围绕 JavaScript 建立了一个巨大的框架、库和工具生态系统（例如前端的 React、Angular、Vue；后端的 Express；包管理的 npm）。这加速了开发并为常见任务提供了现成的解决方案。
异步特性（为了响应速度）： JavaScript 被设计为非阻塞的。这意味着它可以启动一个任务（比如从服务器获取数据）并继续执行其他代码，而无需等待该任务完成。这对于创建不会因为等待缓慢操作而卡顿的响应式用户界面至关重要。（现在先别担心具体的实现细节，只需理解它的好处。）

3. JavaScript 是如何工作的（简化版）

当你访问一个网站时，你的 Web 浏览器会下载 HTML、CSS 和 JavaScript 文件。每个主流浏览器（如 Chrome, Firefox, Edge, Safari）都包含一个内置的 JavaScript 引擎。例如，Chrome 使用 V8 引擎，Firefox 使用 SpiderMonkey，Safari 使用 JavaScriptCore。

这是一个简化的流程分解：

解析和解释：当浏览器在网页中遇到 JavaScript 代码时，其 JavaScript 引擎会读取并解析代码。与编译型语言（代码在执行前被完全翻译成机器可读指令）不同，JavaScript 通常是即时解释的，意味着它被一行一行或分块翻译并执行。现代引擎使用复杂的技术（如即时编译 JIT）来优化性能，但对于初学者来说，将其视为解释型语言是一个很好的起点。
与文档对象模型 (DOM) 交互：浏览器会创建网页结构的表示，称为文档对象模型 (DOM)。JavaScript 可以与这个 DOM 交互，动态地读取、添加、移除或修改页面上的元素，改变它们的内容，或更改它们的样式。这就是 JavaScript 让网页具有交互性的方式——通过操作由 HTML 和 CSS 定义的底层结构和外观。
事件处理： JavaScript 监听浏览器中发生的“事件”，例如用户点击按钮、在文本框中输入内容或移动鼠标。当事件发生时，JavaScript 可以执行特定的代码作为响应，从而实现动态和交互式的用户体验。

本质上：

HTML 定义网页的结构。
CSS 定义网页的样式。
JavaScript 定义网页的行为和互动。

三者共同构成了现代 Web 的基石。

4. 实践示例与演示

让我们想象一些常见的 Web 场景，以此说明 JavaScript 的作用，暂不深入具体的代码。

4.1 一个简单的亮色/暗色模式切换

考虑一个提供按钮来在亮色和暗色主题之间切换的网站。

HTML & CSS 的角色： HTML 定义按钮和页面的初始内容。CSS 定义亮色主题和暗色主题的样式（例如背景颜色、文字颜色）。
JavaScript 的角色：JavaScript “监听”用户对“切换主题”按钮的点击。当被点击时，JavaScript 检查当前的主题。然后它修改 HTML 文档主要 body 元素上的属性或类名（Class）。CSS 中已经有了针对 light-theme（亮色主题）和 dark-theme（暗色主题）类的规则，它会自动应用新的样式，瞬间改变页面的外观，而无需刷新页面。

4.2 带有即时反馈的交互式测验

想象一下学习平台上的一个简单的多项选择题测验。

HTML & CSS 的角色： HTML 提供测验问题、答案选项（单选按钮）和“提交答案”按钮。CSS 设计这些元素的外观。
JavaScript 的角色：当用户选择一个答案并点击“提交答案”时，JavaScript 捕获用户的选择。它将选定的答案与正确答案（JavaScript 可能已经在内部存储了该答案或通过网络获取了它）进行比较。根据比较结果，JavaScript 动态地向用户显示反馈——例如，在选定选项旁边显示绿色的“正确！”消息，或红色的“错误，请重试！”消息，同时高亮显示正确答案。这种反馈是瞬间出现的，提供了即时的学习体验。

这些例子突显了 JavaScript 如何增加一层智能和响应能力，使 Web 体验更加引人入胜和直观。

5. 现实世界的应用

JavaScript 不仅仅用于微小的交互元素；它是整个现代 Web 的脊梁。考虑一下你每天使用的一些最流行的应用程序：

Google Maps (谷歌地图)：当你拖动地图、放大缩小或搜索位置时，地图会动态更新，而无需重新加载整个页面。这种无缝的交互是由 JavaScript 驱动的，它与 Google 的服务器通信以获取新的地图图块和数据，然后更新浏览器中的显示。
社交媒体信息流 (如微博, X/Twitter)：当你滚动浏览信息流时，新帖子会自动加载。点赞、评论或分享通常瞬间发生，无需刷新页面。所有这些动态更新和交互都是由 JavaScript 在后台获取数据并更新用户界面来处理的。
Netflix/Spotify 网页播放器：整个用户界面，从浏览内容到播放媒体、控制播放进度和管理播放列表，都是高度交互的。JavaScript 管理媒体播放，与流媒体服务器通信，更新进度条，并处理播放器内的所有用户输入。

这些例子表明，JavaScript 对于构建丰富、响应迅速且引人入胜的用户体验至关重要，这也是几乎每个现代 Web 应用程序的核心。

6. 附录：JavaScript 发展史

时间段	关键节点/版本	主要事件与意义
1995年	诞生 (Mocha/LiveScript)	Brendan Eich 在 Netscape（网景）公司仅用 10天设计出了原型。最初命名为 Mocha，后改名为 LiveScript。为了蹭当时 Java 的热度，最终定名为 JavaScript。
1996年	微软入局 (JScript)	微软对 JavaScript 进行逆向工程，在 IE3 中发布了 JScript。从此开始了长达数年的“浏览器兼容性噩梦”。
1997年	ECMA 标准化 (ES1)	为了统一标准，Netscape 将语言提交给 ECMA 组织。ECMAScript (ES) 标准正式诞生，ECMA-262 第一版发布。
1999年	ES3 发布	这是一个非常稳定的版本，通行了约 10 年（包括 IE6 时代）。引入了正则表达式、try/catch 等现代特性。
2005年	AJAX 复兴	Jesse James Garrett 提出 AJAX 概念。Google Maps 和 Gmail 的出现震惊世界，证明了 JS 可以构建类似桌面的 Web 应用，JS 地位大幅提升。
2006年	jQuery 时代	John Resig 发布 jQuery。它的出现抹平了浏览器差异，极大简化了 DOM 操作，统治了 Web 开发长达 10 年。
2008年	Chrome V8 引擎	Google 发布 Chrome 浏览器及其 V8 引擎。其采用 JIT（即时编译）技术，让 JS 执行速度有了质的飞跃，为后来的 Node.js 铺平了道路。
2009年	Node.js 诞生 / ES5	Node.js (Ryan Dahl)：让 JS 走出浏览器，拥有了服务端能力，全栈时代开启。 ES5：发布了严格模式（Strict Mode）和 JSON 支持，修补了语言设计的许多缺陷。
2010-2014年	前端框架大爆发	随着 SPA（单页应用）流行，AngularJS (2010)、React (2013)、Vue (2014) 相继诞生，前端工程化开始萌芽。
2015年	ES6 (ES2015)	这是历史上最大的一次更新。引入了 class、module (模块化)、箭头函数、Promise、let/const 等。JS 终于变成了一门成熟的现代语言。
2016年-至今	ESNext (年度更新)	标准制定改为每年发布一次（ES2016, ES2017...）。引入了 async/await (ES2017) 等彻底解决异步回调地狱的特性。 TypeScript (微软开发) 逐渐成为大型项目标配，弥补了 JS 弱类型的短板。

6.1 发展阶段总结

你可以将这段历史理解为三个核心阶段：

蛮荒时代 (1995-2004)：

主要用于简单的表单验证和网页特效（如跑马灯）。
浏览器兼容性极差，被视为“玩具语言”。

工具库时代 (2005-2014)：

AJAX 带来了交互革命。
jQuery 解决了兼容性问题。
Node.js 让 JS 突破了浏览器边界。

工程化与框架时代 (2015-至今)：

ES6 彻底重构了语法基础。
React/Vue/Angular 三大框架鼎立。
TypeScript 提供了类型安全。
前端不再只是写页面，而是构建复杂的应用程序。