619 lines
25 KiB
Markdown
619 lines
25 KiB
Markdown
---
|
||
课时: 4
|
||
主题: 代码审查入门
|
||
核心能力: [韧性力, 拆解力]
|
||
核心工具: [Trae IDE]
|
||
时长: 90分钟
|
||
透明化层级: 结果层
|
||
适用路线: AICODE-06（有扣子/低代码经验的学生）
|
||
---
|
||
|
||
### 1. 课程目标
|
||
|
||
**知识目标：**
|
||
- 能识别一个 index.html 文件中 HTML、CSS、JavaScript 三个部分的物理位置（`<body>` / `<style>` / `<script>` 标签范围）
|
||
- 知道三部分各自负责什么：骨架（有什么东西）/ 装修（颜色大小位置）/ 电路（交互逻辑）
|
||
- 理解"改代码的某一行→保存→刷新浏览器→看到变化"这条因果链
|
||
|
||
**能力目标：**
|
||
- 能在陌生代码中用 Ctrl+F "寻宝"方式定位控制某个效果的代码行
|
||
- 能手动修改颜色值、文字内容、简单数值，保存后验证效果
|
||
- 能描述 bug 时说出"问题可能在哪一部分"（而不只是"坏了"）
|
||
|
||
**情感目标：**
|
||
- 体验"我不只是AI的用户，我还能直接动代码"的掌控感
|
||
- 建立"代码不可怕，可以一段一段读"的信心
|
||
- 感受寻宝竞赛的乐趣，愿意主动探索代码
|
||
|
||
---
|
||
|
||
### 2. 核心概念与误概念预设
|
||
|
||
**核心概念认知层级：**
|
||
|
||
| 概念 | 六年级类比 | 认知层级 |
|
||
|------|----------|---------|
|
||
| HTML = 页面的骨架 | 房子的家具——有什么东西摆在那里 | 识别层 |
|
||
| CSS = 页面的装修 | 房子的油漆和装饰——颜色、大小、位置 | 理解层 |
|
||
| JavaScript = 页面的电路 | 房子的开关和电路——按按钮灯会亮 | 理解层 |
|
||
| Ctrl+F 搜索定位 | 在一本书里用目录找到某一页 | 应用层 |
|
||
| 改代码→保存→刷新→验证 | 改了文档→保存→重新打开看效果 | 应用层 |
|
||
| Bug定位三区域 | "没颜色"→看装修，"没反应"→看电路 | 分析层 |
|
||
|
||
**典型误概念表：**
|
||
|
||
| 编号 | 误概念 | 正确认知 | 激发策略 |
|
||
|------|--------|---------|---------|
|
||
| M1 | "改代码会把项目弄坏，不敢动" | 改错了 Ctrl+Z 就能撤销，代码有后悔药 | 演示Ctrl+Z撤销；当场故意改错再改回来 |
|
||
| M2 | "要看懂每一行才能改" | 只需要找到目标行，不需要读懂全部 | 类比"不用读懂整本书才能改封面标题" |
|
||
| M3 | "CSS和HTML一样，都是控制内容的" | CSS只管外观，HTML管结构 | HTML=家具（有什么），CSS=油漆（什么颜色） |
|
||
| M4 | "JavaScript就是让东西动起来" | JS负责所有逻辑和交互，不只是动画 | 举例：分数计算、按钮点击判断都是JS |
|
||
| M5 | "AI改了代码我就不需要看了" | AI改完你要会验证，还要会手动微调 | 本课核心：AI做大框架，你精调细节 |
|
||
| M6 | "颜色只能写red/blue这样的英文" | 颜色还可以写 #FF6B6B 十六进制格式 | 展示多种颜色写法 |
|
||
|
||
---
|
||
|
||
### 3. 教学准备
|
||
|
||
**工具与环境：**
|
||
- Trae IDE（已安装）
|
||
- Chrome 浏览器
|
||
- 每台学生电脑准备好一个可运行的 index.html（建议用第1课的反应力测试，或教师统一分发）
|
||
- 教师机连接投影
|
||
|
||
**教学资源：**
|
||
- 教师准备：一份"反应力测试"index.html（代码中 style/body/script 三部分清晰），课前确认在本机可运行
|
||
- 教师准备：寻宝任务清单（投影展示，见教学流程）
|
||
- 教师准备：好看的颜色参考表（投影展示，见教师指南）
|
||
- 学生资源：每人电脑上有一份可运行的 index.html
|
||
|
||
**教师备课体验任务：**
|
||
> 备课前，教师必须亲自完成以下操作：
|
||
> 1. 打开反应力测试 index.html，在Trae中记录三部分的起止行号
|
||
> 2. 手动改背景颜色为 `#1a1a2e`，保存刷新看效果，再改回来
|
||
> 3. 手动改按钮文字从"开始游戏"改为"点我！"，保存刷新看效果，再改回来
|
||
> 4. 用 Ctrl+F 搜索 `background`，找到所有相关行
|
||
> 5. 故意把 `background-color` 改成错误值（如 `reddd`），看浏览器如何忽略它（不会崩溃）
|
||
> 6. 用AI生成一个新小游戏，然后手动改颜色和文字，体验"混合开发"节奏
|
||
|
||
---
|
||
|
||
### 4. 教学流程
|
||
|
||
---
|
||
|
||
**第一幕：联系 (Connect) — 10分钟**
|
||
|
||
*本幕目标：激活前几课经验，用"房子"类比建立代码三部分的初步认知*
|
||
|
||
**情景导入 (10分钟)**
|
||
|
||
教师打开投影，展示一个前几课做过的小项目，让浏览器和代码并排显示。
|
||
|
||
**师：** 同学们，这是你们第1课做的反应力测试，还记得吗？上次你们已经在代码里改过颜色。今天我要问一个问题——
|
||
|
||
（教师点开代码文件，故意让代码滚动得很快，营造"一大堆字符"的视觉感）
|
||
|
||
**师：** AI帮你改颜色的时候，它改的是代码里的哪一部分？
|
||
|
||
**生：** （预期：不知道/全部？/好像是style那边？）
|
||
|
||
**师：** 有同学说style那边——很好！今天我们来验证这个猜想。我告诉你们一个秘密：这一大堆代码，其实只有**三个部分**。就像一栋房子——
|
||
|
||
（教师在白板上画简单的房子轮廓，分三层）
|
||
|
||
```
|
||
╔══════════════════╗
|
||
║ <script> ║ ← 电路系统（点击、计算、逻辑）
|
||
║ JavaScript ║
|
||
╠══════════════════╣
|
||
║ <style> ║ ← 装修（颜色、大小、位置）
|
||
║ CSS ║
|
||
╠══════════════════╣
|
||
║ <body> ║ ← 骨架（标题、按钮、图片）
|
||
║ HTML ║
|
||
╚══════════════════╝
|
||
```
|
||
|
||
**师：** HTML是骨架——房子里有什么家具、什么按钮、什么标题。CSS是装修——这个按钮是红色还是蓝色，字多大，在哪个位置。JavaScript是电路——你按下开关灯亮了，你点击按钮分数+1。
|
||
|
||
**师：** 今天这节课，我们不是要学写代码。我们要学的是——**在代码里找东西**。就像寻宝一样。
|
||
|
||
【诊断点：学生是否记得第1课已接触过 style/body/script 三个标签】【识别层】
|
||
|
||
---
|
||
|
||
**第二幕：建构 (Construct) — 65分钟**
|
||
|
||
---
|
||
|
||
**【分段一：代码解剖——找到三部分的边界】(15分钟)**
|
||
|
||
*本段重点：用Ctrl+F定位三部分的起止位置，建立"代码有结构"的认知*
|
||
|
||
**讲解与演示 (8分钟):**
|
||
|
||
**预设误概念：**
|
||
- M2: 要看懂每一行才能改
|
||
- M3: CSS和HTML分不清
|
||
|
||
教师在 Trae IDE 中打开反应力测试的 index.html，全屏展示。
|
||
|
||
**师：** 现在来做一件事——给代码找边界。我先教你们怎么找三个部分。
|
||
|
||
（教师边讲边用鼠标指出）
|
||
|
||
**师：** 看这里——`<style>` 标签。从 `<style>` 开始，到 `</style>` 结束，中间所有内容都是 CSS，**装修部分**。
|
||
|
||
**师：** 再往下——`<body>` 标签。从 `<body>` 到 `</body>`，这是**骨架部分**。
|
||
|
||
**师：** 最后——`<script>` 标签。从 `<script>` 到 `</script>`，这是**电路部分**。
|
||
|
||
**师：** 在代码里找东西有一个神器——**Ctrl+F**，搜索框。
|
||
|
||
（教师演示 Ctrl+F 搜索 `<style`，代码直接跳到CSS部分开头）
|
||
|
||
**师：** 看，直接跳过去了！你们也试一下。
|
||
|
||
**学生实践 (5分钟):**
|
||
|
||
学生在自己电脑上打开同一个文件，用 Ctrl+F 分别搜索：
|
||
- `<style` → 找到 CSS 部分开头
|
||
- `<body` → 找到 HTML 部分开头
|
||
- `<script` → 找到 JavaScript 部分开头
|
||
|
||
**师：** 现在每个人都知道三个部分在哪了。谁来说一下，CSS从第几行开始？
|
||
|
||
（请学生报行号，全班对比）
|
||
|
||
**进度同步 (2分钟):**
|
||
|
||
**师：** 记住：不需要读懂里面写了什么，只需要知道"这一块是装修的，那一块是骨架的"。就像你去一栋楼，不需要看懂设计图，但要知道一楼是大厅、二楼是卧室。
|
||
|
||
【诊断点：学生是否能独立用Ctrl+F定位三部分边界】【理解层】
|
||
|
||
---
|
||
|
||
**【分段二：寻宝游戏——定位修改点】(20分钟)**
|
||
|
||
*本段重点：通过竞赛形式练习"根据效果→判断属于哪部分→搜索关键词→定位代码行"*
|
||
|
||
**讲解与演示 (5分钟):**
|
||
|
||
**预设误概念：**
|
||
- M2: 要从第一行读到最后一行才能找
|
||
|
||
**师：** 现在进入今天最好玩的环节——**寻宝游戏！** 规则很简单：我说一个效果，你来找控制这个效果的代码在哪一行。不需要改，不需要写，只要找到那一行就举手。
|
||
|
||
**师：** 第1题——找到"控制页面背景颜色"的代码。
|
||
|
||
（给学生30秒思考）
|
||
|
||
**师：** 背景颜色，是视觉效果，还是内容，还是交互？
|
||
|
||
**生：** 视觉效果！
|
||
|
||
**师：** 视觉效果在哪一部分？
|
||
|
||
**生：** CSS！装修部分！
|
||
|
||
**师：** 对！所以我们去CSS部分找。背景颜色的英文是什么？你们第1课用AI改过——
|
||
|
||
**生：** `background`！
|
||
|
||
**师：** Ctrl+F 搜索 `background`，找到了吗？
|
||
|
||
（大部分学生举手）
|
||
|
||
**师：** 看到那个 `#0a0a1a` 了吗？这就是背景颜色的值。这是"十六进制颜色"的写法，你们不需要记，但要能认出来。
|
||
|
||
**学生实践 (13分钟):**
|
||
|
||
学生独立完成寻宝清单（可以同桌讨论）：
|
||
|
||
| 题号 | 任务 | 提示 |
|
||
|------|------|------|
|
||
| 第1题 | ✅ 控制页面背景颜色 | （已完成） |
|
||
| 第2题 | 找按钮上的文字内容 | 去 `<body>` 部分，搜索"开始"或"游戏" |
|
||
| 第3题 | 找控制按钮颜色的代码 | CSS部分，搜索 `button` 或 `background` |
|
||
| 第4题（挑战） | 找计算反应时间的代码 | JS部分，搜索 `time` 或 `Date` |
|
||
|
||
**竞赛规则：** 每找到一题，举手报告行号。教师在白板上记录"第一个找到的同学"。
|
||
|
||
（教师走动观察，重点关注：）
|
||
- 有没有学生不知道从哪里搜起 → 先判断属于哪个区域再搜
|
||
- 有没有学生搜索关键词太宽泛导致结果太多 → 引导缩小关键词
|
||
- 有没有学生在死读代码而不用Ctrl+F → 提醒用搜索神器
|
||
|
||
**进度同步 (2分钟):**
|
||
|
||
**师：** 寻宝技巧总结——1. 先判断属于哪部分（装修/骨架/电路）；2. 再用Ctrl+F搜关键词。不需要读懂每一行，只需要找到那一行。
|
||
|
||
【诊断点：学生能否正确将"视觉效果"归类到CSS，"文字内容"归类到HTML，"点击行为"归类到JS】【应用层】
|
||
|
||
---
|
||
|
||
**【分段三：手动微调挑战——建立因果感】(15分钟)**
|
||
|
||
*本段重点：学生第一次不通过AI直接改代码，建立"改代码→看到效果"的因果链*
|
||
|
||
**讲解与演示 (5分钟):**
|
||
|
||
**预设误概念：**
|
||
- M1: 改代码会弄坏，不敢动
|
||
- M5: AI改了就行，我不需要看
|
||
|
||
**师：** 刚才我们找到了很多东西。现在来做一件更厉害的事——**不通过AI，直接用手改代码！**
|
||
|
||
（故意用夸张语气）
|
||
|
||
**师：** 但在改之前，先给你们一颗定心丸——
|
||
|
||
（教师演示 Ctrl+Z）
|
||
|
||
**师：** 看好了。我现在把背景颜色改成一个奇怪的值……
|
||
|
||
（将 `#0a0a1a` 改成 `#FF0000`，Ctrl+S保存，在浏览器刷新）
|
||
|
||
**师：** 哇，变红色了！现在……我按 Ctrl+Z 撤销——
|
||
|
||
（代码恢复，Ctrl+S保存，浏览器刷新，变回原来颜色）
|
||
|
||
**师：** **代码有后悔药！** 改错了随时撤销。所以——不要怕改代码。
|
||
|
||
（投影展示安全区域）
|
||
|
||
```
|
||
✅ 安全区（随便改，改错了 Ctrl+Z）：
|
||
颜色值：把 #FF6B6B 改成 #00FF00，或把 red 改成 blue
|
||
文字内容：把"开始游戏"改成"点我试试"
|
||
字体大小：把 font-size: 24px 改成 font-size: 32px
|
||
边框圆角：把 border-radius: 8px 改成 20px
|
||
|
||
⚠️ 小心区（改太大可能影响体验）：
|
||
游戏速度、分数、时间限制等数字参数
|
||
|
||
❌ 别碰区（这节课不动）：
|
||
HTML标签结构（<div>、<button>这些尖括号里的东西）
|
||
JavaScript的计算逻辑
|
||
```
|
||
|
||
**学生实践 (8分钟):**
|
||
|
||
学生独立完成三个手动微调任务（每完成一个，Ctrl+S保存，刷新浏览器验证）：
|
||
|
||
**任务A（必做）：** 改变页面背景颜色——用Ctrl+F找到 `background-color`，把颜色值改成你喜欢的颜色。可以写英文色名（如 `purple`、`orange`），也可以随便写一个 `#` 加6个数字字母。
|
||
|
||
**任务B（必做）：** 改变按钮文字——找到按钮的文字内容，改成你想要的文字。
|
||
|
||
**任务C（选做）：** 改变某个元素的字体大小——找到一个 `font-size`，把数字调大或调小，看效果。
|
||
|
||
（教师走动观察，重点关注：）
|
||
- 是否能成功保存（Ctrl+S）
|
||
- 是否知道要刷新浏览器（部分学生会忘记刷新）
|
||
- 是否有学生改了HTML结构导致显示异常（立刻演示Ctrl+Z救场）
|
||
|
||
**关键"哇"时刻捕捉：** 当学生第一次直接改代码、按Ctrl+S、刷新浏览器看到变化时——教师要放大这个瞬间：
|
||
|
||
**师：** XXX同学，你刚才是怎么做到的？（让学生自己说出来，强化成就感）
|
||
|
||
**进度同步 (2分钟):**
|
||
|
||
**师：** 你们刚才没有告诉AI要改什么，直接改了代码，看到了变化。这就是"直接控制代码"。**AI帮你做大的事，你来调小的细节。**
|
||
|
||
【诊断点：学生是否建立了"改代码→保存→刷新→看效果"的完整操作循环】【应用层】
|
||
|
||
---
|
||
|
||
**【分段四：AI+手动混合开发——自由创作】(15分钟)**
|
||
|
||
*本段重点：用AI生成新项目+手动精调细节，体验"混合开发"的工作方式*
|
||
|
||
**讲解与演示 (3分钟):**
|
||
|
||
**预设误概念：**
|
||
- M5: 要么全靠AI，要么全靠自己
|
||
|
||
**师：** 最后一个环节——自由创作。流程是这样的：
|
||
|
||
（投影展示流程图）
|
||
|
||
```
|
||
第一步：用AI生成一个新的小项目（2-3分钟）
|
||
↓
|
||
第二步：在浏览器里试玩，找出想改的地方（1分钟）
|
||
↓
|
||
第三步：用寻宝法定位那段代码（2分钟）
|
||
↓
|
||
第四步：手动改颜色/文字/数值，保存，刷新验证（5分钟）
|
||
↓
|
||
第五步（可选）：再告诉AI做更大的修改
|
||
```
|
||
|
||
**师：** 项目主题你们自己决定。小游戏（猜数字、打地鼠、点击计分）、工具（倒计时、随机选择器）、创意页面（个人名片、生日贺卡）都可以。
|
||
|
||
**师：** 提示词模板——
|
||
|
||
```
|
||
帮我做一个[项目类型]，功能要求：
|
||
1. [功能1]
|
||
2. [功能2]
|
||
所有代码放在单个 index.html 文件里，HTML/CSS/JS都写在这一个文件中。
|
||
```
|
||
|
||
**学生实践 (10分钟):**
|
||
|
||
学生自由选主题，用AI生成后完成以下步骤：
|
||
|
||
1. 生成项目，在浏览器中测试
|
||
2. 用Ctrl+F找到 `<style>`、`<body>`、`<script>` 三部分边界
|
||
3. 找到至少两处想改的地方，手动修改
|
||
4. 能说出：我改了什么，在哪一部分
|
||
|
||
（教师走动观察，重点关注：）
|
||
- 项目提示词是否符合单文件规范
|
||
- 学生是否卡在"代码太长找不到边界" → 提醒用Ctrl+F
|
||
- 是否有学生误改了JS逻辑导致功能失效 → 引导Ctrl+Z并讨论"这在哪一部分"
|
||
|
||
**进度同步 (2分钟):**
|
||
|
||
**师：** 很多同学已经在手动改了。有人改了颜色，有人改了文字，有人已经在问AI要新功能——很好！这就是今天的目标：**AI做大框架，你来精调细节。**
|
||
|
||
【诊断点：学生是否能将"我想改这个效果"翻译成"我去哪一部分找代码"】【分析层】
|
||
|
||
---
|
||
|
||
**第三幕：反思 (Contemplate) — 10分钟**
|
||
|
||
*本幕目标：通过Bug诊断练习巩固三区域认知，展示成果*
|
||
|
||
**成果展示 + Bug诊断练习 (6分钟)**
|
||
|
||
**师：** 今天学了寻宝和手动改代码。现在来做一个诊断练习——我说一个现象，你告诉我应该去代码的**哪一部分**找问题。
|
||
|
||
```
|
||
Bug 1："按钮点击了没反应，分数没变化"
|
||
→ 在哪找？（答：<script> JavaScript 电路部分）
|
||
|
||
Bug 2："页面出来了，但背景全是白色，按钮也是灰色"
|
||
→ 在哪找？（答：<style> CSS 装修部分）
|
||
|
||
Bug 3："页面打开是空白的，什么都看不见"
|
||
→ 在哪找？（答：<body> HTML 骨架部分）
|
||
```
|
||
|
||
**师：** 这就是今天最重要的收获——以后遇到问题，先判断：是"看起来不对"（CSS），"少了东西"（HTML），还是"点了没反应"（JavaScript）。
|
||
|
||
**互评与讨论 (4分钟)**
|
||
|
||
**师：** 谁来说说今天的收获？
|
||
|
||
（引导学生总结三个关键点）
|
||
|
||
**师：** 最后一件事——把你手动改过的那段代码，告诉旁边同学：你改了什么，在哪一部分，什么效果。
|
||
|
||
（两两分享，1分钟）
|
||
|
||
【诊断点：学生能否用"HTML/CSS/JS"框架来描述bug或自己的改动】【分析层】
|
||
|
||
---
|
||
|
||
**第四幕：延续 (Continue) — 5分钟**
|
||
|
||
*本幕目标：巩固今天成果，布置手动改代码的课外任务*
|
||
|
||
**抽象总结 (3分钟)**
|
||
|
||
**师：** 今天你们做到了一件厉害的事——不通过AI，直接改了代码。代码不是只有程序员才能动的东西。
|
||
|
||
（板书/投屏）
|
||
|
||
```
|
||
代码三部分：
|
||
<style> = 装修（颜色、大小、位置）
|
||
<body> = 骨架（标题、按钮、图片）
|
||
<script> = 电路（点击、计算、逻辑）
|
||
|
||
寻宝三步法：
|
||
① 判断属于哪部分
|
||
② Ctrl+F 搜关键词
|
||
③ 找到那一行
|
||
|
||
改代码操作循环：
|
||
修改 → Ctrl+S 保存 → 刷新浏览器 → 验证效果
|
||
改错了？→ Ctrl+Z 撤销
|
||
```
|
||
|
||
**5分钟挑战发布 + 下节预告 (2分钟)**
|
||
|
||
**师：** 本周课外小挑战：
|
||
|
||
> **5分钟AI挑战：手动改造挑战**
|
||
> 找到你今天或以前做的任何一个项目（index.html文件）：
|
||
> 1. 用 Ctrl+F 找到三个标签，写下各在哪一行
|
||
> 2. 找到三处想改的地方，手动改掉，每次改完 Ctrl+S + 刷新
|
||
> 3. 截图发到群里，写一句："我改了XX，在[HTML/CSS/JS]部分"
|
||
>
|
||
> **评价标准：**
|
||
> - 基础：成功手动改了一处，截图证明
|
||
> - 进阶：改了三处，能说出每处在哪个部分
|
||
> - 挑战：用Bug描述格式写一个你项目里的问题
|
||
|
||
**师：** 第5课开始，我们就和03路线的同学合流了。你们已经掌握了Trae操作、提示词工程、完整作品开发、代码审查——这些都是03路线的同学也在学的。合流之后，我们一起做更大更有趣的项目！
|
||
|
||
---
|
||
|
||
### 5. AI助教使用指南
|
||
|
||
**教师提示词模板：**
|
||
|
||
情景1：快速生成适合课堂演示的项目（三部分结构清晰）
|
||
```
|
||
帮我生成一个适合小学高年级演示的反应力测试小游戏，要求：
|
||
1. 功能：屏幕随机出现彩色圆圈，玩家点击后显示反应时间（毫秒）
|
||
2. 界面简洁，有"开始"按钮和反应时间显示
|
||
3. 所有代码放在单个 index.html 文件里
|
||
4. <style>、<body>、<script> 结构清晰，三部分之间加注释标记
|
||
```
|
||
|
||
情景2：帮学生定位代码（不修改，只定位）
|
||
```
|
||
以下是一段 index.html 代码。学生想找"控制[具体效果]的代码在哪里"。
|
||
请告诉我：
|
||
1. 在哪一部分（HTML/CSS/JS）
|
||
2. 大概在哪个标签或关键词附近
|
||
3. 用一句话解释那段代码做什么
|
||
不要修改代码，只需要定位和解释。
|
||
[粘贴代码]
|
||
```
|
||
|
||
情景3：学生改坏了代码，急救
|
||
```
|
||
以下代码出了问题：[粘贴代码]
|
||
现象是：[描述]
|
||
请找出问题在哪一部分（HTML/CSS/JS），只修复这一个问题，不改其他地方。
|
||
```
|
||
|
||
**学生提示词模板：**
|
||
|
||
生成新项目：
|
||
```
|
||
帮我做一个[项目名称]，功能要求：
|
||
1. [功能1]
|
||
2. [功能2]
|
||
界面要求：[颜色风格/布局]
|
||
所有代码放在单个 index.html 文件里，HTML/CSS/JS都在一个文件中。
|
||
```
|
||
|
||
手动改完一部分，让AI改另一部分：
|
||
```
|
||
这是我的 index.html 代码：[粘贴代码]
|
||
我已经手动把[XX]改成了[YY]。
|
||
现在请帮我：[具体需求]
|
||
注意：不要改我已经改过的[XX]部分。
|
||
```
|
||
|
||
Bug报告模板（养成习惯）：
|
||
```
|
||
我的项目出现了一个问题：
|
||
现象：[具体描述]
|
||
我猜问题在：[HTML/CSS/JavaScript]部分
|
||
代码是：[粘贴代码]
|
||
请找出原因并修复。
|
||
```
|
||
|
||
---
|
||
|
||
### 6. 教师指南
|
||
|
||
**技术备注（教师备课知识补充）：**
|
||
|
||
1. **保存与刷新**：学生改完代码后必须 Ctrl+S 保存，再切到Chrome刷新（F5或Ctrl+R）。部分学生会忘记刷新，看不到变化误以为改错了。
|
||
2. **颜色值写法**：
|
||
- 英文色名：`red`、`blue`、`green` 等约140个
|
||
- 十六进制：`#FF6B6B`（粉红）、`#4ECDC4`（青绿）——学生觉得神秘但好用
|
||
- RGB函数：`rgb(255, 107, 107)` —— 遇到时简单解释即可
|
||
3. **好看的颜色参考表**（课堂投影用）：
|
||
```
|
||
#FF6B6B 暖红色 #4ECDC4 清新青绿
|
||
#45B7D1 天蓝色 #96CEB4 薄荷绿
|
||
#FFEAA7 奶油黄 #DDA0DD 薰衣草紫
|
||
#2D3436 深灰黑 #6C5CE7 亮紫色
|
||
```
|
||
4. **Ctrl+Z撤销的边界**：Trae的撤销历史有限（通常几十步）。建议课前把演示素材文件备份一份。
|
||
5. **文件路径**：双击 index.html 默认用Chrome打开时路径是 `file:///C:/...`，这是正常的。
|
||
|
||
**学生弹性边界——手动修改安全清单：**
|
||
|
||
```
|
||
✅ 安全改（随便改，改错了Ctrl+Z）：
|
||
颜色值（background-color、color、border-color等）
|
||
文字内容（按钮文字、标题文字、提示语）
|
||
字体大小（font-size的数字，px单位不要改）
|
||
间距（margin、padding的数字）
|
||
边框圆角（border-radius的数字）
|
||
背景渐变的颜色部分
|
||
|
||
⚠️ 小心改（可以改，但改太大可能影响体验）：
|
||
游戏速度参数（setTimeout里的数字）
|
||
分数倍率（score += 10里的10）
|
||
时间限制（timeLeft = 30里的30）
|
||
动画时长（transition: 0.3s里的0.3）
|
||
|
||
❌ 别碰（本课不动，以后学）：
|
||
HTML标签结构（<div>、<button>的开合标签）
|
||
HTML标签的class和id属性
|
||
JavaScript的函数名、变量名
|
||
JavaScript的运算符和逻辑判断（if/else、===等）
|
||
```
|
||
|
||
**常见问题 FAQ：**
|
||
|
||
| 学生问题 | 建议回答 |
|
||
|---------|---------|
|
||
| "改了HTML结构页面乱了，Ctrl+Z撤不回来" | 从备份文件复制覆盖即可。"这就是为什么建议只在安全区操作" |
|
||
| "项目太简单只有几行，找不到三部分" | 好机会！"这个文件只有HTML，连CSS和JS都没有。如果要加交互，我们要去哪加？" |
|
||
| "代码太长，几百行看不过来" | "不需要读完。找三个边界标签，然后Ctrl+F搜关键词。越长越需要寻宝技巧" |
|
||
| "JS里那些花括号是什么" | "是函数的写法，像一个任务包。今天不需要读懂，只知道那是'当XX发生时做YY'的逻辑" |
|
||
| "改了JS里的数字，游戏逻辑异常了" | "来看看你改了什么。这个数字参与计算，不只是显示。Ctrl+Z撤回来" |
|
||
| "为什么AI生成的代码每次不一样" | "AI每次重新创作，像你每次画的画不一样。所以我们要会看代码，不管AI怎么写都能找到想改的地方" |
|
||
|
||
**备课体验任务清单：**
|
||
|
||
- [ ] 打开演示项目，记录三部分起止行号
|
||
- [ ] Ctrl+F 搜索 `<style`、`<body`、`<script`，验证定位
|
||
- [ ] 手动改背景颜色，保存刷新验证，再改回来
|
||
- [ ] 手动改按钮文字，保存刷新验证，再改回来
|
||
- [ ] 故意改错误值（如 `reddd`），验证浏览器不会崩溃
|
||
- [ ] 演练 Ctrl+Z 多步撤销
|
||
- [ ] 用AI生成新项目，完整走一遍"生成→定位三部分→手动改两处→验证"
|
||
- [ ] 准备备份文件
|
||
|
||
---
|
||
|
||
### 7. 5分钟日常AI挑战
|
||
|
||
**本周任务：**
|
||
|
||
> **"手动改造挑战"**
|
||
>
|
||
> **操作步骤：**
|
||
> 1. 找到你今天或以前做的任何一个项目（index.html文件）
|
||
> 2. 用 Ctrl+F 找到 `<style>`、`<body>`、`<script>` 三个标签，记下大概行号
|
||
> 3. 在代码里找到三处想改的地方（在安全区里），手动改掉
|
||
> 4. 每次改完 Ctrl+S 保存，刷新浏览器看效果
|
||
> 5. 截图发到群里，写一句："我改了XX，在[HTML/CSS/JS]部分，把XX改成了YY"
|
||
>
|
||
> **加分挑战（选做）：**
|
||
> 用Bug描述格式描述你项目里的一个问题：
|
||
> ```
|
||
> 现象：[具体描述]
|
||
> 我猜在[HTML/CSS/JS]部分
|
||
> 因为：[你的推断]
|
||
> ```
|
||
|
||
---
|
||
|
||
### 8. 拓展任务
|
||
|
||
**进阶挑战（适合学有余力的学生）：**
|
||
|
||
**挑战一：三色注释法**
|
||
> 在你的 index.html 三个部分开头各加一行注释，标注这是什么区域：
|
||
> - CSS区域：`/* ===== 装修区 (CSS) ===== */`
|
||
> - HTML区域：`<!-- ===== 骨架区 (HTML) ===== -->`
|
||
> - JS区域：`// ===== 电路区 (JavaScript) =====`
|
||
> 加完后以后再打开这个文件，就能一眼看到三个区域。
|
||
|
||
**挑战二：Bug侦探**
|
||
> 以下三段代码各有一个问题，找出来并说明怎么改：
|
||
>
|
||
> 片段1（CSS拼写问题）：`background-colour: #FF6B6B;` → 哪里错了？
|
||
> 片段2（HTML标签问题）：`<button>开始游戏<button>` → 哪里错了？
|
||
> 片段3（数值实验）：`border-radius: 50%;` 加在一个正方形div上会变成什么形状？
|
||
|
||
**挑战三：给朋友讲解**
|
||
> 用你自己的话，向一个完全不懂代码的同学解释：
|
||
> - HTML、CSS、JavaScript分别是什么？（用房子比喻或你自己的比喻）
|
||
> - 如果页面按钮点击没反应，应该去代码哪一部分找？为什么？
|