4.3 第二轮：实现核心功能
本轮目标：让页面能响应用户操作——点击按钮真的有反应
在上一轮（4.2），你已经做出了一个"好看的空壳"：有标题、有输入框、有按钮、有列表区域。但如果你现在点击"添加"按钮，什么都不会发生。
这就像造了一辆漂亮的汽车，但还没装发动机。
本轮，我们要给它装上"发动机"——让每个按钮都能真正工作。
从"静态"到"动态"
在 4.2 节，我们用 HTML 和 CSS 搭建了页面。现在需要加入 JavaScript，让页面能"响应"用户的操作。
| 概念 | 类比 | 在待办清单中的体现 |
|---|---|---|
| HTML | 房子的骨架 | 输入框、按钮、列表的结构 |
| CSS | 房子的装修 | 颜色、字体、布局 |
| JavaScript | 房子的电路和开关 | 点击按钮后的响应逻辑 |
你不需要"学会" JavaScript。你只需要告诉 AI 你想要什么效果，AI 会帮你写代码。
本轮要实现的三个功能
还记得第二章定义的 P0 功能吗？本轮我们要实现最核心的三个：
| 功能 | 用户操作 | 预期结果 |
|---|---|---|
| 添加任务 | 输入内容，点击"添加"按钮 | 新任务出现在列表中 |
| 删除任务 | 点击任务旁边的"删除"按钮 | 该任务从列表中消失 |
| 标记完成 | 点击任务的"完成"按钮 | 任务显示为已完成状态（加删除线） |
这三个功能覆盖了"增、删、改"操作，是几乎所有应用的基础模式。
事件处理：让页面"听懂"你的操作
在开始之前，先理解一个核心概念：事件处理。
想象你在餐厅点餐：
- 你按下呼叫服务员的按钮（触发事件）
- 服务员听到铃声（监听事件）
- 服务员走过来为你服务（执行响应）
JavaScript 的事件处理也是这个逻辑：
用户点击按钮 → 程序监听到点击 → 执行相应的代码你不需要自己写这些代码。只需要告诉 AI："当用户点击添加按钮时，把输入的内容加到列表里"，AI 就会帮你实现。
本轮的工作流程
4.3.1 添加任务 → 让"添加"按钮能用
↓
4.3.2 删除任务 → 让"删除"按钮能用
↓
4.3.3 标记完成 → 让"完成"按钮能用
↓
4.3.4 迭代优化 → 调整不满意的地方
↓
4.3.5 阶段检查 → 确认所有功能正常每完成一个功能，都要测试确认可以正常使用，再进入下一个。
章节导航
| 小节 | 主题 | 预计时间 |
|---|---|---|
| 4.3.1 | 功能一：添加任务 | 10 分钟 |
| 4.3.2 | 功能二：删除任务 | 8 分钟 |
| 4.3.3 | 功能三：标记完成 | 8 分钟 |
| 4.3.4 | 迭代优化的艺术 | 7 分钟 |
| 4.3.5 | 阶段性成果检查 | 2 分钟 |
预计总时间：约 35 分钟
💡 温馨提示
如果某个功能实现后不太对，不要着急。4.3.4 节会专门讲如何追问和调整。先跟着做，遇到问题记下来。
准备好了吗？
确保你已经完成 4.2 节，有一个能正常显示的静态页面。
让我们开始给它"装发动机"！