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