25 KiB
课时, 主题, 核心能力, 核心工具, 时长, 透明化层级, 适用路线
| 课时 | 主题 | 核心能力 | 核心工具 | 时长 | 透明化层级 | 适用路线 | |||
|---|---|---|---|---|---|---|---|---|---|
| 4 | 代码审查入门 |
|
|
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
教师备课体验任务：
备课前，教师必须亲自完成以下操作：
- 打开反应力测试 index.html，在Trae中记录三部分的起止行号
- 手动改背景颜色为
#1a1a2e，保存刷新看效果，再改回来- 手动改按钮文字从"开始游戏"改为"点我！"，保存刷新看效果，再改回来
- 用 Ctrl+F 搜索
background，找到所有相关行- 故意把
background-color改成错误值（如reddd），看浏览器如何忽略它（不会崩溃）- 用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生成后完成以下步骤：
- 生成项目，在浏览器中测试
- 用Ctrl+F找到
<style>、<body>、<script>三部分边界 - 找到至少两处想改的地方，手动修改
- 能说出：我改了什么，在哪一部分
（教师走动观察，重点关注：）
- 项目提示词是否符合单文件规范
- 学生是否卡在"代码太长找不到边界" → 提醒用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文件）：
- 用 Ctrl+F 找到三个标签，写下各在哪一行
- 找到三处想改的地方，手动改掉，每次改完 Ctrl+S + 刷新
- 截图发到群里，写一句："我改了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. 教师指南
技术备注（教师备课知识补充）：
- 保存与刷新：学生改完代码后必须 Ctrl+S 保存，再切到Chrome刷新（F5或Ctrl+R）。部分学生会忘记刷新，看不到变化误以为改错了。
- 颜色值写法：
- 英文色名：
red、blue、green等约140个 - 十六进制：
#FF6B6B（粉红）、#4ECDC4（青绿）——学生觉得神秘但好用 - RGB函数：
rgb(255, 107, 107)—— 遇到时简单解释即可
- 英文色名：
- 好看的颜色参考表（课堂投影用）：
#FF6B6B 暖红色 #4ECDC4 清新青绿 #45B7D1 天蓝色 #96CEB4 薄荷绿 #FFEAA7 奶油黄 #DDA0DD 薰衣草紫 #2D3436 深灰黑 #6C5CE7 亮紫色 - Ctrl+Z撤销的边界：Trae的撤销历史有限（通常几十步）。建议课前把演示素材文件备份一份。
- 文件路径：双击 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挑战
本周任务：
"手动改造挑战"
操作步骤：
- 找到你今天或以前做的任何一个项目（index.html文件）
- 用 Ctrl+F 找到
<style>、<body>、<script>三个标签，记下大概行号- 在代码里找到三处想改的地方（在安全区里），手动改掉
- 每次改完 Ctrl+S 保存，刷新浏览器看效果
- 截图发到群里，写一句："我改了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分别是什么？（用房子比喻或你自己的比喻）
- 如果页面按钮点击没反应，应该去代码哪一部分找？为什么？