first commit
This commit is contained in:
43
data/Web/13.md
Normal file
43
data/Web/13.md
Normal file
@@ -0,0 +1,43 @@
|
||||
# 任务管理系统——JavaScript基础与任务数据 教学设计
|
||||
|
||||
| **课题** | **任务管理系统——JavaScript基础与任务数据** |
|
||||
|:---|:---|
|
||||
| **课时** | 1课时（40分钟） |
|
||||
| **教学目标** | **知识目标**：理解 JavaScript 在网页交互中的作用，掌握外部脚本关联、`const`、`let`、字符串、数字、布尔值和控制台输出。<br>**技能目标**：能够建立任务管理系统项目，正确关联 `app.js`，使用变量描述任务名称、优先级、预计时长和完成状态并输出检查。<br>**素养目标**：形成用数据描述业务对象的程序思维，养成变量命名清晰、使用控制台验证代码和及时查看错误的习惯。 |
|
||||
| **教学重难点** | **重点**：脚本文件关联；变量声明；基本数据类型；模板字符串；控制台。<br>**难点**：根据数据是否需要变化选择 `const` 或 `let`，理解代码执行顺序和控制台报错信息。 |
|
||||
| **教学资源准备** | 任务管理界面 HTML/CSS 模板、Visual Studio Code、现代浏览器、开发者工具、任务数据需求卡、错误示例。 |
|
||||
|
||||
## 教学过程
|
||||
|
||||
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||
|:---|:---|:---|:---|:---|
|
||||
| **1. 交互项目导入**<br>（5分钟） | 展示可添加和完成任务的成品，分析静态网页无法响应操作的问题。 | **成品演示**<br>添加任务、切换状态并刷新页面，提问：“页面如何记住用户操作？”<br><br>**任务发布**<br>说明六课时将用原生 JavaScript 完成任务管理系统。 | **功能观察**<br>列出输入、添加、完成、删除和保存等操作。<br><br>**技术回顾**<br>说明 HTML、CSS 已完成什么，还缺少什么。 | 从静态页面过渡到交互应用，建立 JavaScript 项目的完整功能预期。 |
|
||||
| **2. 脚本运行认知**<br>（10分钟） | 认识外部脚本、执行顺序、控制台和基础语句。 | **关联示范**<br>创建 `js/app.js`，在页面底部通过 `script` 关联，使用 `console.log` 输出启动信息。<br><br>**错误诊断**<br>故意写错路径和变量名，引导从控制台查看文件位置与错误信息。 | **跟随操作**<br>建立项目目录并关联脚本，打开控制台确认启动信息。<br><br>**报错阅读**<br>根据错误提示定位一处拼写问题并修正。 | 把控制台作为程序开发的基本工具，建立“先看报错再修改”的调试习惯。 |
|
||||
| **3. 变量类型示范**<br>（8分钟） | 学习 `const`、`let` 和任务所需的基本数据类型。 | **代码演示**<br>声明任务名称、优先级、预计分钟数和完成状态，修改可变状态并使用模板字符串输出。<br><br>**选择讲解**<br>说明默认优先使用 `const`，确需重新赋值时使用 `let`。 | **类型判断**<br>根据四项任务数据判断适合的类型。<br><br>**代码跟随**<br>声明自己的模拟任务数据并输出一句完整描述。 | 将抽象类型映射到项目数据，让变量选择服务于实际业务含义。 |
|
||||
| **4. 任务数据实践**<br>（13分钟） | 完成一组任务变量并模拟状态更新，检查输出结果。 | **任务分层**<br>基础任务输出名称、优先级和时长；进阶任务用布尔值决定输出“待完成”或“已完成”。<br><br>**巡回指导**<br>检查命名、引号、大小写和 `const` 重新赋值错误，引导学生读取控制台行号。 | **独立编码**<br>创建两组任务数据，使用模板字符串输出任务摘要。<br><br>**状态测试**<br>改变可变状态并再次输出，对比执行结果；修复控制台错误。 | 通过数据变化体验程序状态，以真实报错训练基本调试能力。 |
|
||||
| **5. 成果评价总结**<br>（4分钟） | 归纳脚本运行、变量和类型，保存首课项目成果。 | **代码点评**<br>展示命名清晰和类型合理的示例，纠正常量滥改与拼音缩写。<br><br>**知识梳理**<br>总结“定义数据—执行代码—控制台验证—根据错误修正”。 | **成果说明**<br>解释一个变量名和类型选择。<br><br>**自查归档**<br>确认脚本路径正确、控制台无错误。 | 通过说明设计意图提升代码可读性意识，为后续批量任务处理奠定基础。 |
|
||||
|
||||
## 板书设计
|
||||
|
||||
```text
|
||||
任务管理系统
|
||||
|
||||
HTML：界面结构
|
||||
CSS：界面样式
|
||||
JavaScript：数据 + 逻辑 + 交互
|
||||
|
||||
任务数据：
|
||||
const taskName = "完成网页作业";
|
||||
const priority = "高";
|
||||
const minutes = 30;
|
||||
let isDone = false;
|
||||
|
||||
流程：编写 → 保存 → 刷新 → 看控制台 → 修正
|
||||
```
|
||||
|
||||
## 教学成效与反思
|
||||
|
||||
| | |
|
||||
|:---|:---|
|
||||
| **教学成效** | 学生能够关联外部脚本并使用变量描述任务数据，多数学生能根据数据变化需求选择 `const` 或 `let`，并开始利用控制台定位路径和拼写错误。 |
|
||||
| **教学反思** | 初学者常忽略大小写和控制台，遇错后反复修改代码。应要求每次调试先读错误类型和行号，再做一次有依据的修改；变量示例需保持数量适中，避免类型概念过载。 |
|
||||
Reference in New Issue
Block a user