teaching-design/data/Web/15.md

任务管理系统——函数封装与事件处理 教学设计

课题	任务管理系统——函数封装与事件处理
课时	1课时（40分钟）
教学目标	知识目标：理解函数的定义、调用、参数和返回值，掌握浏览器事件及 addEventListener 的基本用法。 技能目标：能够把任务校验、状态统计等重复逻辑封装为函数，为添加按钮绑定点击事件，并通过参数传递输入数据。 素养目标：形成单一职责、代码复用和事件驱动意识，养成用函数名表达功能、避免复制重复代码的习惯。
教学重难点	重点：函数定义与调用；参数和返回值；点击事件绑定。 难点：区分函数本身与函数调用，理解事件发生后浏览器才执行回调函数。
教学资源准备	任务管理系统项目、重复代码案例、函数结构卡、带输入框和按钮的页面模板、浏览器控制台。

教学过程

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

板书设计

函数
输入参数 → 处理逻辑 → 返回结果

事件流程
页面加载
   ↓
等待用户操作
   ↓ click
执行 handleAddTask
   ↓
调用校验函数和摘要函数

原则：
事件决定“何时做”
函数规定“怎么做”

教学成效与反思

教学成效	学生能够把重复逻辑封装为函数，并为按钮绑定点击事件。通过空白、正常和超长输入测试，多数学生理解了参数、返回值及事件触发时机。
教学反思	常见错误是把 handleAddTask() 的调用结果传给监听器，导致页面加载时立即执行。应借助事件时序图反复区分“交给浏览器一个函数”和“现在调用函数”，并保持函数示例职责单一。