let 和 const 声明变量并理解五种数据类型，编写函数处理逻辑，用 querySelector 选取并修改网页元素，通过 addEventListener 响应用户的点击和输入，最终为第 9-10 篇的个人主页加上暗色模式切换和动态待办列表。前两篇里，HTML 搭出了网页的骨架，CSS 给骨架穿上了衣服。但页面始终是静止的——用户点击按钮没反应，填写表单没反馈。如果把网页比作人体，HTML 是骨骼，CSS 是皮肤，那 JavaScript 就是神经系统：它感知用户的触摸，控制肌肉的收缩，让整个身体活过来。
和 CSS 类似，JavaScript 也有三种引入方式，但推荐程度大不相同：
| 方式 | 写在哪里 | 推荐度 |
|---|---|---|
| 行内式 | HTML 标签的 onclick 属性 | 不推荐 |
| 内嵌式 | <script> 标签放在 HTML 中 |
学习阶段推荐 |
| 外链式 | <script src="app.js"> |
项目实战推荐 |
学习阶段用内嵌式最方便——代码和 HTML 在同一文件里，保存即刷新。下面是第一个 JS 程序：
把这段代码放进 HTML 的 <body> 末尾，用浏览器打开后：控制台（按 F12 打开开发者工具 → Console 标签页）会打印 Hello, JavaScript!，同时屏幕弹出一个写着"欢迎学习全栈开发！"的提示框。
console.log() 是开发调试最常用的工具。看到代码没按预期运行？在关键位置插入一行 console.log(变量名) 查看实际值，比盲目猜测高效得多。你已经会了 Python 的变量，JS 的概念类似但声明方式不同。JavaScript 用三个关键字声明变量：let、const 和老旧的 var。
| 关键字 | 能否重新赋值 | 使用场景 |
|---|---|---|
const |
不能 | 默认首选，值不变的量 |
let |
能 | 需要改变值的计数器、循环变量 |
var |
能 | 已过时，现代代码不推荐使用 |
JavaScript 有五种基本数据类型，加上两种复合类型（数组和对象），覆盖了日常开发绝大多数场景：
| 类型 | 示例 | 说明 |
|---|---|---|
| String | "hello" |
文本，单引号或双引号均可 |
| Number | 42, 3.14 |
整数和浮点数统一为 Number |
| Boolean | true, false |
只有两个值，条件判断的核心 |
| null | null |
开发者主动赋的"空值" |
| undefined | undefined |
变量声明了但没赋值，系统默认值 |
用 typeof 运算符可以检测变量的类型——这是调试类型相关 bug 的第一步：
typeof null 实际返回 "object"。判断 null 要用 === null 而非 typeof。
if (value === null) { ... }
单个变量存单个值，多个值怎么办？数组和对象是两种最常用的数据容器：
读取对象属性用点号：user.name 得到 "张三"。读取数组元素用索引：skills[1] 得到 "C"。这两种数据结构在后续 DOM 操作和 API 调用中会反复出现。
变量存了值，运算符把值加工成新结果。算术运算符和 Python 几乎一样，但比较运算符有一个关键陷阱需要特别留意。
最后一行用了模板字符串——反引号包裹的字符串中，${表达式} 会被自动替换为表达式的值。这比 Python 的 f-string 语法稍长，但功能相同，在拼接 HTML 片段时特别方便。
这是 JavaScript 最经典的坑：== 会做类型转换再比较，=== 严格比较类型和值。永远用 ===，没有例外：
== 时，数字 0 和空字符串 "" 会被视为相等，导致意外的条件分支被触发。
if (status === "active")
学会了变量和运算符，你已经能写顺序执行的代码了。但当代码超过二十行，重复逻辑会开始堆积。函数把一段逻辑打包，取个名字，反复调用——和 Python 的 def 概念一致，语法不同。
toFixed(2) 是 Number 的方法，把数字保留两位小数并返回字符串形式，在显示价格时很常用。
现代 JavaScript 中，函数经常用"箭头函数"语法定义，特别是作为参数传给其他函数时（回调），写法更紧凑：
箭头函数的规则：参数只有一个时省略括号，函数体只有一行 return 时省略大括号和 return 关键字。后续的事件处理章节会大量使用箭头函数，因为它的 this 指向更直观（这个特点在复杂项目中很重要，本篇暂不展开）。
前面四章学的 JS 语法，和 Python 一样是在控制台里跑的。JavaScript 真正的威力在于：它能直接操作网页上的每一个元素。浏览器加载 HTML 后，会把每个标签变成一个可编程的对象，这些对象组成的树状结构就叫 DOM（Document Object Model，文档对象模型）。
操作 DOM 的第一步是"找到"目标元素。两个核心方法覆盖 90% 的场景：
querySelector 接受的参数和 CSS 选择器完全一样——"#id"、".class"、"div > p" 都行。你在第 10 篇学的 CSS 选择器知识直接复用。
拿到元素后，可以修改它的文字内容、HTML 结构和 CSS 样式：
font-size → fontSize，background-color → backgroundColor。这是 JS 语法的要求，连字符会被解释为减号。除了修改已有元素，还能用代码动态创建新元素并插入页面——这是实现动态列表、实时评论等功能的基础：
三步走：创建元素 → 设置内容/样式 → 插入到父元素。这个模式在后文的综合实战中会反复使用。
上一章你学会了修改网页，但修改是"主动"的——代码一跑就改了。真实场景中，修改应该由用户触发：点击按钮、输入文字、提交表单。事件监听就是连接"用户操作"和"代码响应"的桥梁。
回调函数的参数 e（event 对象）携带了事件的详细信息：e.target 是触发事件的元素，e.target.value 是输入框当前的值。
| 事件名 | 触发时机 | 典型用途 |
|---|---|---|
click |
鼠标点击元素 | 按钮提交、切换状态 |
input |
输入框内容变化 | 实时字数统计、搜索建议 |
submit |
表单提交 | 登录/注册表单验证 |
DOMContentLoaded |
HTML 解析完成 | 初始化页面逻辑 |
<script> 在 <body> 内容之前执行，元素还不存在。
<script> 放在 </body> 之前，或用 DOMContentLoaded 事件等待 DOM 加载完成。
现在把前面六章的知识串联起来。我们在第 9-10 篇的个人主页基础上，添加两个交互功能：暗色模式切换和动态待办列表。最终效果：点击按钮在亮/暗主题间切换，输入框输入文字按回车添加待办项，点击待办项可删除。
下面是完整的 HTML 文件（内嵌 CSS 和 JS），保存为 interactive-home.html 后用浏览器打开即可体验：
这段代码整合了本篇所有核心知识点：
let 声明可变状态 isDark，用 ! 取反切换布尔值
条件 ? A : B，等价于 Python 的 A if 条件 else B
e.key === "Enter" 严格比较，.trim() 去除首尾空格防止空输入
item.remove() 是现代浏览器支持的元素自删除方法。如果需要兼容旧浏览器，可以用 list.removeChild(item) 替代，效果相同。const 对象 book，包含 title（字符串）、price（数字）、inStock（布尔）三个属性，然后用 console.log 输出 typeof book.price 的结果。<p id="counter"> 元素，统计并显示当前待办项数量。提示：每次添加或删除待办项时，用 list.children.length 获取列表子元素数量，更新 textContent。localStorage.setItem("theme", "dark")，页面加载时 localStorage.getItem("theme") 读取并应用。