第二课：逻辑炼金术 - AI应用开发社团

🚨课前回顾：网页为什么会出现“乱码”？

上节课有些同学双击打开自己做的网页后，发现里面的中文变成了像或 锟斤拷 这样的奇怪符号。这在编程里叫做“乱码”。

电脑保存文字时需要用到“编码本”。豆包给你写代码时，用的是国际通用的 UTF-8 编码本；但是机房电脑自带的“记事本”，有时默认用的是老式的本地编码本。

浏览器拿着国际密码本去读老式密码本写的内容，自然就变成了天书。

1. 用“记事本”打开你的代码文件，点击左上角的 【文件】 -> 【另存为】。
2. 看弹出窗口的最下方，找到 【编码】 选项。
3. 把默认的编码改成 UTF-8，点击保存，替换原文件。再回到浏览器刷新，中文就回来啦！

🧠网页的“三位一体”

一个完整的现代网页由三种语言组成，它们就像人体的不同部分：

🦴

决定网页里有什么。
比如：文字、按钮、图片。

👗

决定网页长什么样。
比如：颜色、大小、排版。

⚡

决定网页能干什么。
比如：计算、点击、随机变化。

🎯全班统一任务：搭建基础抽取器

打开豆包，复制以下指令给它。这会生成一个带有 JavaScript 基础逻辑的网页框架。

你是一个前端程序员。请帮我写一个单文件的网页（HTML包含CSS和JS）。

1. 页面中间有一个大大的文字框，初始显示‘等待抽取...’。
2. 下方有一个按钮叫‘试试手气’。
3. 核心逻辑：当我点击按钮时，文字框里会随机出现一句鼓励的话（请你内置5句不同的话）。

请给出完整的代码。

💡 操作步骤：复制豆包给出的代码 -> 桌面新建文本文件 -> 粘贴代码 -> 重命名为 基础抽取器.html -> 双击运行测试。如果出现乱码，记得用上面学到的 UTF-8 另存为 方法解决！

🧬创意进化：打造你独一无二的应用

基础框架跑通后，请根据你的兴趣，给豆包发送追加指令，让应用发生“变异”！

将抽取器改造为：午餐盲盒 或 点名神器

干得漂亮。现在我要把这个网页改成‘午餐吃什么生成器’。请把按钮名字改成‘今天吃啥’。把内置的文字换成 10 种常见的午餐。并且点击按钮后，要有一个文字快速滚动的动画效果，3秒后停在最终结果上。

将抽取器改造为：真心话大冒险 或 塔罗牌占卜

很好。现在我要把它改成‘真心话大冒险抽取器’。请给我两个按钮，一个写‘真心话’，一个写‘大冒险’。点击后分别随机显示尴尬问题或惩罚动作。请重新写代码，让界面看起来有点神秘感。

将抽取器改造为：英语单词抽背机

请把它改成‘英语单词挑战’。点击按钮，会随机出现一个初中英语单词（内置 10 个）。再加一个‘看答案’的按钮，点击后才显示它的中文意思。

✨ 第二课：逻辑炼金术