# 任务管理系统——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分钟） | 归纳脚本运行、变量和类型，保存首课项目成果。 | **代码点评**
展示命名清晰和类型合理的示例，纠正常量滥改与拼音缩写。
**知识梳理**
总结“定义数据—执行代码—控制台验证—根据错误修正”。 | **成果说明**
解释一个变量名和类型选择。
**自查归档**
确认脚本路径正确、控制台无错误。 | 通过说明设计意图提升代码可读性意识，为后续批量任务处理奠定基础。 |
## 板书设计
```text
任务管理系统
HTML：界面结构
CSS：界面样式
JavaScript：数据 + 逻辑 + 交互
任务数据：
const taskName = "完成网页作业";
const priority = "高";
const minutes = 30;
let isDone = false;
流程：编写 → 保存 → 刷新 → 看控制台 → 修正
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够关联外部脚本并使用变量描述任务数据，多数学生能根据数据变化需求选择 `const` 或 `let`，并开始利用控制台定位路径和拼写错误。 |
| **教学反思** | 初学者常忽略大小写和控制台，遇错后反复修改代码。应要求每次调试先读错误类型和行号，再做一次有依据的修改；变量示例需保持数量适中，避免类型概念过载。 |