JavaScript: JavaScript 简介

最后更新：2026-10-13

JavaScript 是网页的编程语言——它让静态的 HTML 页面变得活灵活现。

本教程面向零基础学习者，从变量和函数讲起，直到你能独立开发一个完整的待办清单应用。

1. 你将学到

• JavaScript 基本语法和核心概念
• 数组、对象、函数的使用
• DOM 操作和事件处理
• 异步编程和模块化
• 综合项目实战

▶ 示例

这是最简单的示例，后续章节会详细解释。## 2. 前置知识

学习本教程前，你应该已经了解：

• HTML 基础（标签、属性、表单）
• CSS 基础（选择器、盒模型）

3. JavaScript 是什么

JavaScript 是一种脚本语言，可以直接在浏览器中运行，不需要编译。你写的每一行 JS 代码，浏览器会逐行读取并立即执行。

JS 最初只为浏览器设计，但现在它的势力范围已经扩展到了服务器（Node.js）、桌面应用（Electron）、甚至手机 App（React Native）。不过在本教程中，我们聚焦于 JS 在网页中的用法。

4. JavaScript 能做什么

JS 的能力覆盖网页交互的方方面面：

• 改变 HTML 内容——点击按钮后替换页面上的文字
• 响应事件——用户点击、滚动、输入时触发逻辑
• 验证表单——提交前检查邮箱格式、密码长度
• 操作 CSS——动态修改样式、实现动画效果
• 与服务器通信——无需刷新页面即可获取数据（AJAX）

一句话总结：HTML 搭骨架，CSS 披皮肤，JS 让它动起来。

5. JavaScript 与 HTML/CSS 的关系

把网页比作一个人：

• HTML 是骨架——定义页面结构
• CSS 是皮肤和衣服——控制外观样式
• JavaScript 是肌肉——让页面产生动作和反应

三者各司其职，JS 通过操作 HTML 元素和 CSS 样式来改变页面的呈现和行为。

6. JavaScript 的历史趣事

1995 年，网景公司的 Brendan Eich 用 10 天写出了 JavaScript 的第一版。没错，如今统治互联网的这门语言，诞生只花了不到两周。

几个容易混淆的事实：

• JavaScript 和 Java 是两门完全不同的语言，就像"雷峰塔"和"雷锋"的关系
• JS 最初叫 Mocha，后来改名 LiveScript，最终蹭了 Java 的热度改名 JavaScript
• 1997 年，JS 被提交给 ECMA 组织标准化，正式名称是 ECMAScript（ES）。你常听到的 ES6 就是 2015 年发布的第六版

7. 浏览器如何执行 JavaScript

每个浏览器都内置了 JS 引擎，负责把你写的代码翻译成机器能执行的指令：

• Chrome / Edge：V8 引擎
• Firefox：SpiderMonkey 引擎
• Safari：JavaScriptCore 引擎

执行流程很简单：浏览器加载 HTML → 遇到 script 标签 → JS 引擎逐行解析执行 → 结果反映在页面上。

▶ 示例：用 JavaScript 改变页面文字

▶ 示例：JavaScript 响应用户事件

▶ 示例：JavaScript 验证表单输入

❓ 常见问题

📖 小节

• JavaScript 是浏览器的脚本语言，逐行解释执行，无需编译
• JS 的核心能力：改内容、响应事件、验证表单、操作样式、与服务器通信
• HTML/CSS/JS 三者分工明确——结构、样式、行为
• JS 由 Brendan Eich 在 1995 年用 10 天创建，经 ECMA 标准化后称 ECMAScript
• 浏览器通过内置 JS 引擎（如 V8）执行代码

📝 作业

1. 基础题：创建一个 HTML 页面，包含一个按钮和一个段落，点击按钮后段落文字变为"我学会了 JavaScript！"，文字颜色变为蓝色。
2. 进阶题：创建一个页面，包含两个按钮"放大"和"缩小"，点击后分别让页面上一段文字的字号增大或减小 2px。
3. 挑战题：创建一个简单的密码验证页面，要求密码长度不少于 6 位且必须包含数字，不符合条件时在输入框下方显示红色提示文字。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

关于我们