JavaScript是页面的神经
先看见页面会『响应』你
视角
前两节的 HTML 骨架、CSS 外观都是静态的「展品」——你只能看，不能跟它互动。 JavaScript 让页面「活」起来：你做一个动作，页面就跟着变。 先点右边两个按钮，亲身感受一下。
核心
把刚才的感觉拆成三步：事件（你点了）→ 状态（改了一个值）→ 界面（文字跟着变）。 这就是 JS 的本职：让页面响应用户。后面几个例子，都是这个套路的不同样子。
当前状态
待处理
事件尚未点击
状态status = "pending"
界面状态区显示「待处理」
事件系统浏览器时刻在听你的动作
机制
上一节你点了按钮，页面就响应了——背后靠的是「事件」。浏览器时刻监听用户的每个动作，点击、按键、输入、提交……每个动作发生时，浏览器都发出一个「事件」。你预先告诉它「这个事件发生时执行这段」，页面就响应了。这套机制叫事件驱动。
最常见的几个事件：
| 事件 | 什么时候触发 |
|---|---|
click | 鼠标点击（按钮、链接、卡片） |
input | 输入框里打字，每敲一个字触发一次 |
change | 输入框失焦、值确定下来时 |
submit | 提交表单（点提交 / 回车） |
keydown | 按下键盘任意键 |
mouseenter | 鼠标移进某个元素 |
事件有上百种，不用背——需要时查 MDN 的事件参考 ↗。
HTML · CSS · JavaScript前端三件套到齐
凑齐
到这里，前端三件套凑齐了： HTML 决定页面有什么（结构）； CSS 决定长什么样（外观）； JavaScript 决定会做什么（行为、响应）。 静态的骨架与装修，加上会响应的「神经」，一个能看又能互动的页面就完整了。
本课只是让你「看见」JS 在干什么，不教语法。真要学写，从 MDN 的 JavaScript 指南 ↗ 开始。