# 任务管理系统——函数封装与事件处理 教学设计
| **课题** | **任务管理系统——函数封装与事件处理** |
|:---|:---|
| **课时** | 1课时（40分钟） |
| **教学目标** | **知识目标**：理解函数的定义、调用、参数和返回值，掌握浏览器事件及 `addEventListener` 的基本用法。
**技能目标**：能够把任务校验、状态统计等重复逻辑封装为函数，为添加按钮绑定点击事件，并通过参数传递输入数据。
**素养目标**：形成单一职责、代码复用和事件驱动意识，养成用函数名表达功能、避免复制重复代码的习惯。 |
| **教学重难点** | **重点**：函数定义与调用；参数和返回值；点击事件绑定。
**难点**：区分函数本身与函数调用，理解事件发生后浏览器才执行回调函数。 |
| **教学资源准备** | 任务管理系统项目、重复代码案例、函数结构卡、带输入框和按钮的页面模板、浏览器控制台。 |
## 教学过程
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|:---|:---|:---|:---|:---|
| **1. 重复问题导入**
（5分钟） | 分析多处重复校验和统计代码，提出功能封装与按钮响应任务。 | **案例展示**
展示三次复制的空值判断代码，修改规则后逐处调整，提问其维护风险。
**任务发布**
要求用函数统一处理规则，并让“添加任务”按钮响应点击。 | **问题诊断**
找出重复代码和可能遗漏的修改点。
**功能命名**
为“检查任务名称”“统计完成数”等功能拟定名称。 | 从维护痛点引出函数，通过功能命名建立职责意识。 |
| **2. 函数结构探究**
（9分钟） | 学习函数名、参数、函数体、返回值和调用。 | **结构讲解**
演示 `validateTask(name)`，传入任务名，返回是否合法；说明参数是函数接收的数据。
**调用对比**
比较函数名与带括号调用的差异，追踪返回值流向。 | **结构标注**
在代码中标出函数名、参数和返回值。
**手动追踪**
代入空字符串和正常名称，写出执行结果。 | 通过结构标注和数据代入理解函数输入、处理和输出。 |
| **3. 事件机制示范**
（8分钟） | 认识点击事件、事件监听和回调函数。 | **交互演示**
获取按钮并使用 `addEventListener("click", handleAddTask)` 绑定处理函数。
**时序讲解**
画出“页面加载—等待操作—用户点击—执行函数”的事件流程。 | **跟随编码**
为按钮绑定点击事件，点击后在控制台输出提示。
**现象验证**
刷新页面但不点击，确认函数不会立即执行。 | 用时序观察突破“代码为何没有立即运行”的事件驱动难点。 |
| **4. 功能封装实践**
（14分钟） | 封装输入校验和任务摘要函数，完成按钮点击后的读取、校验与反馈。 | **任务分解**
点击后读取输入值，调用校验函数；合法时生成任务摘要，不合法时给出提示。
**巡回指导**
检查事件绑定是否传入函数本身、参数作用域和返回值使用，帮助定位重复触发问题。 | **函数开发**
编写校验和摘要函数，在事件处理函数中组合调用。
**交互测试**
分别输入空白、正常文字和超长文字，记录反馈并修正逻辑。 | 将函数和事件组合成可运行交互，体现模块复用和测试边界。 |
| **5. 成果评价总结**
（4分钟） | 展示按钮交互，归纳函数与事件的协作关系。 | **代码点评**
展示职责清晰的函数，纠正一个函数承担过多任务和事件重复绑定。
**关系总结**
概括“事件决定何时做，函数规定具体怎么做”。 | **成果演示**
用三类输入展示不同反馈。
**代码自查**
检查函数名、参数和职责是否清楚。 | 以多输入演示验证交互质量，为下一课动态修改页面做好准备。 |
## 板书设计
```text
函数
输入参数 → 处理逻辑 → 返回结果
事件流程
页面加载
↓
等待用户操作
↓ click
执行 handleAddTask
↓
调用校验函数和摘要函数
原则：
事件决定“何时做”
函数规定“怎么做”
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够把重复逻辑封装为函数，并为按钮绑定点击事件。通过空白、正常和超长输入测试，多数学生理解了参数、返回值及事件触发时机。 |
| **教学反思** | 常见错误是把 `handleAddTask()` 的调用结果传给监听器，导致页面加载时立即执行。应借助事件时序图反复区分“交给浏览器一个函数”和“现在调用函数”，并保持函数示例职责单一。 |