teaching-design/data/Web/13.md

任务管理系统——JavaScript基础与任务数据 教学设计

课题	任务管理系统——JavaScript基础与任务数据
课时	1课时（40分钟）
教学目标	知识目标：理解 JavaScript 在网页交互中的作用，掌握外部脚本关联、const、let、字符串、数字、布尔值和控制台输出。 技能目标：能够建立任务管理系统项目，正确关联 app.js，使用变量描述任务名称、优先级、预计时长和完成状态并输出检查。 素养目标：形成用数据描述业务对象的程序思维，养成变量命名清晰、使用控制台验证代码和及时查看错误的习惯。
教学重难点	重点：脚本文件关联；变量声明；基本数据类型；模板字符串；控制台。 难点：根据数据是否需要变化选择 const 或 let，理解代码执行顺序和控制台报错信息。
教学资源准备	任务管理界面 HTML/CSS 模板、Visual Studio Code、现代浏览器、开发者工具、任务数据需求卡、错误示例。

教学过程

教学环节	教学内容	教师活动	学生活动	设计意图
1. 交互项目导入 （5分钟）	展示可添加和完成任务的成品，分析静态网页无法响应操作的问题。	成品演示 添加任务、切换状态并刷新页面，提问：“页面如何记住用户操作？” 任务发布 说明六课时将用原生 JavaScript 完成任务管理系统。	功能观察 列出输入、添加、完成、删除和保存等操作。 技术回顾 说明 HTML、CSS 已完成什么，还缺少什么。	从静态页面过渡到交互应用，建立 JavaScript 项目的完整功能预期。
2. 脚本运行认知 （10分钟）	认识外部脚本、执行顺序、控制台和基础语句。	关联示范 创建 js/app.js，在页面底部通过 script 关联，使用 console.log 输出启动信息。 错误诊断 故意写错路径和变量名，引导从控制台查看文件位置与错误信息。	跟随操作 建立项目目录并关联脚本，打开控制台确认启动信息。 报错阅读 根据错误提示定位一处拼写问题并修正。	把控制台作为程序开发的基本工具，建立“先看报错再修改”的调试习惯。
3. 变量类型示范 （8分钟）	学习 const、let 和任务所需的基本数据类型。	代码演示 声明任务名称、优先级、预计分钟数和完成状态，修改可变状态并使用模板字符串输出。 选择讲解 说明默认优先使用 const，确需重新赋值时使用 let。	类型判断 根据四项任务数据判断适合的类型。 代码跟随 声明自己的模拟任务数据并输出一句完整描述。	将抽象类型映射到项目数据，让变量选择服务于实际业务含义。
4. 任务数据实践 （13分钟）	完成一组任务变量并模拟状态更新，检查输出结果。	任务分层 基础任务输出名称、优先级和时长；进阶任务用布尔值决定输出“待完成”或“已完成”。 巡回指导 检查命名、引号、大小写和 const 重新赋值错误，引导学生读取控制台行号。	独立编码 创建两组任务数据，使用模板字符串输出任务摘要。 状态测试 改变可变状态并再次输出，对比执行结果；修复控制台错误。	通过数据变化体验程序状态，以真实报错训练基本调试能力。
5. 成果评价总结 （4分钟）	归纳脚本运行、变量和类型，保存首课项目成果。	代码点评 展示命名清晰和类型合理的示例，纠正常量滥改与拼音缩写。 知识梳理 总结“定义数据—执行代码—控制台验证—根据错误修正”。	成果说明 解释一个变量名和类型选择。 自查归档 确认脚本路径正确、控制台无错误。	通过说明设计意图提升代码可读性意识，为后续批量任务处理奠定基础。

板书设计

任务管理系统

HTML：界面结构
CSS：界面样式
JavaScript：数据 + 逻辑 + 交互

任务数据：
const taskName = "完成网页作业";
const priority = "高";
const minutes = 30;
let isDone = false;

流程：编写 → 保存 → 刷新 → 看控制台 → 修正

教学成效与反思

教学成效	学生能够关联外部脚本并使用变量描述任务数据，多数学生能根据数据变化需求选择 const 或 let，并开始利用控制台定位路径和拼写错误。
教学反思	初学者常忽略大小写和控制台，遇错后反复修改代码。应要求每次调试先读错误类型和行号，再做一次有依据的修改；变量示例需保持数量适中，避免类型概念过载。