---
title: "4.3 第二轮：实现核心功能"
order: 1
---


![04-practice-0-to-1_4.3-core-features_index.png](/images/Basic/04-practice-0-to-1_4.3-core-features_index.png)
# 4.3 第二轮：实现核心功能

> **本轮目标**：让页面能响应用户操作——点击按钮真的有反应

在上一轮（4.2），你已经做出了一个"好看的空壳"：有标题、有输入框、有按钮、有列表区域。但如果你现在点击"添加"按钮，什么都不会发生。

这就像造了一辆漂亮的汽车，但还没装发动机。

**本轮，我们要给它装上"发动机"**——让每个按钮都能真正工作。

## 从"静态"到"动态"

在 4.2 节，我们用 HTML 和 CSS 搭建了页面。现在需要加入 JavaScript，让页面能"响应"用户的操作。

| 概念 | 类比 | 在待办清单中的体现 |
|------|------|-------------------|
| HTML | 房子的骨架 | 输入框、按钮、列表的结构 |
| CSS | 房子的装修 | 颜色、字体、布局 |
| JavaScript | 房子的电路和开关 | 点击按钮后的响应逻辑 |

你不需要"学会" JavaScript。你只需要告诉 AI 你想要什么效果，AI 会帮你写代码。

## 本轮要实现的三个功能

还记得第二章定义的 P0 功能吗？本轮我们要实现最核心的三个：

| 功能 | 用户操作 | 预期结果 |
|------|---------|---------|
| 添加任务 | 输入内容，点击"添加"按钮 | 新任务出现在列表中 |
| 删除任务 | 点击任务旁边的"删除"按钮 | 该任务从列表中消失 |
| 标记完成 | 点击任务的"完成"按钮 | 任务显示为已完成状态（加删除线） |

这三个功能覆盖了"增、删、改"操作，是几乎所有应用的基础模式。

## 事件处理：让页面"听懂"你的操作

在开始之前，先理解一个核心概念：**事件处理**。

想象你在餐厅点餐：

1. 你按下呼叫服务员的按钮（**触发事件**）
2. 服务员听到铃声（**监听事件**）
3. 服务员走过来为你服务（**执行响应**）

JavaScript 的事件处理也是这个逻辑：

```
用户点击按钮 → 程序监听到点击 → 执行相应的代码
```

你不需要自己写这些代码。只需要告诉 AI："当用户点击添加按钮时，把输入的内容加到列表里"，AI 就会帮你实现。

## 本轮的工作流程

```
4.3.1 添加任务 → 让"添加"按钮能用
       ↓
4.3.2 删除任务 → 让"删除"按钮能用
       ↓
4.3.3 标记完成 → 让"完成"按钮能用
       ↓
4.3.4 迭代优化 → 调整不满意的地方
       ↓
4.3.5 阶段检查 → 确认所有功能正常
```

每完成一个功能，都要测试确认可以正常使用，再进入下一个。

## 章节导航

| 小节 | 主题 | 预计时间 |
|------|------|---------|
| [4.3.1](./4.3.1-add-task.md) | 功能一：添加任务 | 10 分钟 |
| [4.3.2](./4.3.2-delete-task.md) | 功能二：删除任务 | 8 分钟 |
| [4.3.3](./4.3.3-complete-task.md) | 功能三：标记完成 | 8 分钟 |
| [4.3.4](./4.3.4-iterate.md) | 迭代优化的艺术 | 7 分钟 |
| [4.3.5](./4.3.5-checkpoint.md) | 阶段性成果检查 | 2 分钟 |

**预计总时间：约 35 分钟**

::: tip 💡 温馨提示
如果某个功能实现后不太对，不要着急。4.3.4 节会专门讲如何追问和调整。先跟着做，遇到问题记下来。
:::

## 准备好了吗？

确保你已经完成 4.2 节，有一个能正常显示的静态页面。

让我们开始给它"装发动机"！

→ [4.3.1 功能一：添加任务](./4.3.1-add-task.md)