第二课：把代码保存成网页 + 认识变量 （2）

第二课：把代码保存成网页 + 认识变量

课程时长：约 60~75 分钟

本课目标：

1. 学会把代码保存成文件，双击就能运行
2. 认识编程中最重要的概念之一：变量
3. 做出第一个"能和人互动"的小程序

---

一、复习第一课（5分钟）

先让学习者在控制台（F12 → Console）回忆这几行：

console.log("你好，世界！")
console.log(5000 * 12)
alert("我回来了！")

提问检查：

• "1" + "1" 结果是什么？（答：11）
• 写代码时括号、引号要用什么输入法？（答：英文）

---

二、为什么要把代码写进文件？（5分钟）

用比喻讲：

控制台就像草稿纸，写完一刷新页面就没了。

把代码写进文件，就像写在笔记本上，可以保存、修改、发给别人看。

网页文件的后缀是 .html，浏览器打开它时，会自动运行里面的 JS 代码。

---

三、动手：创建第一个网页文件（20分钟）

第1步：让电脑显示文件后缀名（Windows 必做）

很多人卡在这一步！Windows 默认隐藏后缀名，导致文件实际变成 index.html.txt，打不开。

• Windows 10 ：打开任意文件夹 → 顶部点"查看" → 勾选 "文件扩展名"
• Windows 11 ：打开文件夹 → 顶部点"查看" → "显示" → 勾选 "文件扩展名"
• Mac：Finder → 设置 → 高级 → 勾选"显示所有文件扩展名"

第2步：新建文件

1. 在桌面新建一个文件夹，命名为 学JS
2. 进入文件夹，右键 → 新建 → 文本文档
3. 把文件名（包括后缀）改成：index.html
4. 弹出"改变扩展名可能导致文件不可用"，点 "是"

Mac 用户：建议直接安装 VS Code（见本课第七部分），用自带"文本编辑"容易保存成错误格式。

第3步：写入代码

右键 index.html → 打开方式 → 记事本，输入以下内容：

<meta charset="UTF-8">
<h1>我的第一个网页</h1>

<script>
  alert("这是我的第一个网页程序！")
  console.log("我在控制台里也能看到")
</script>

保存（Ctrl + S）。

第4步：运行

双击 index.html，浏览器会打开它：

• 先弹出提示框
• 页面上显示大标题"我的第一个网页"
• 按 F12 打开控制台，能看到打印的文字

🎉 恭喜！你做出了第一个网页程序！

讲解这几行代码

代码	作用
<meta charset="UTF-8">	告诉浏览器用正确的编码，防止中文变乱码
<h1>...</h1>	网页上的大标题（这是 HTML，不是 JS）
<script>...</script>	JS 代码要写在这两个标签中间

可以把 <script> 理解成一个"盒子"，告诉浏览器：这里面装的是 JavaScript。

修改代码的流程（要反复练习）

改代码 → 保存（Ctrl+S）→ 回到浏览器刷新（F5）→ 看效果

很多新手改了代码没保存或没刷新，以为代码"不起作用"。

---

四、认识变量（20分钟）------本课重点

1. 变量是什么？

比喻：

变量就是一个贴了标签的盒子，里面可以放东西。 以后想用这个东西，叫盒子的名字就行。

2. 创建变量

把 index.html 里 <script> 中间的内容换成：

let name = "小明"
console.log(name)

保存、刷新，控制台显示：小明

讲解：

• let = "我要创建一个盒子"
• name = 盒子的名字（标签）
• = = 把右边的东西放进盒子（不是数学里的"等于"！）
• "小明" = 放进去的内容

3. 变量可以存数字，也可以参与计算

let salary = 5000
let months = 12
console.log(salary * months)

结果：60000

4. 变量里的东西可以换

let mood = "开心"
console.log(mood)

mood = "有点累"
console.log(mood)

第二次不用再写 let，因为盒子已经有了，只是换了里面的东西。

5. 文字和变量拼在一起

let name = "小明"
let age = 25
console.log("我叫" + name + "，今年" + age + "岁")

结果：我叫小明，今年25岁

还记得第一课的 "1" + "1" = 11 吗？+ 遇到文字就会拼接，原理一样。

6. 变量命名规则

✅ 可以	❌ 不可以
name、age、myName	my name（不能有空格）
salary2、user_age	2salary（不能数字开头）
	let（不能用 JS 自己的关键词）

建议：用有意义的英文单词 ，比如 price 比 a 好懂得多。 注意：name 和 Name 是两个不同的变量（区分大小写）。

---

五、小项目：会打招呼的网页（10分钟）

结合第一课的 prompt，做一个能互动的程序：

<meta charset="UTF-8">
<h1>欢迎光临</h1>

<script>
  // 问用户的名字，把回答存进变量 name
  let name = prompt("你叫什么名字？")

  // 用变量打招呼
  alert("你好，" + name + "！欢迎来学编程！")
</script>

运行后：先问名字 → 输入"小红" → 弹出"你好，小红！欢迎来学编程！"

新知识：注释

• // 后面的内容是注释，写给人看的，电脑会忽略
• 养成写注释的习惯，过几天回来看代码不会忘

---

六、常见错误（5分钟）

现象	原因	解决
双击文件用记事本打开了	后缀其实是 .txt	显示扩展名，改成 .html
中文显示成乱码	缺少编码声明	第一行加 <meta charset="UTF-8">
改了代码没变化	没保存或没刷新	Ctrl+S 保存，浏览器按 F5
页面上直接显示出代码文字	代码没写在 <script> 里	检查标签是否完整
报错 name is not defined	变量名写错或没创建	检查拼写和大小写
console.log("name") 打印出 name 这几个字母	变量名加了引号	变量名不要加引号

最后一条要特别强调：

let name = "小明"
console.log(name)    // 显示：小明（盒子里的东西）
console.log("name")  // 显示：name（就是这四个字母）

---

七、推荐工具：VS Code（课后选做）

记事本能用，但写多了不方便。推荐安装免费的 VS Code：

• 官网：code.visualstudio.com
• 代码有颜色区分，容易发现错误
• 可在扩展里搜索 "Chinese" 安装中文界面

第三课开始可以正式使用它。

---

八、课后练习

1. 自我介绍网页 ：创建变量 name、age、city，用 console.log 打印出"我叫XX，今年XX岁，来自XX"
2. 工资计算 ：创建变量 monthSalary = 6000，计算并打印一年工资
3. 互动程序 ：用 prompt 问"你最喜欢的食物是什么？"，再用 alert 回答"我也喜欢吃XX！"
4. 挑战题 ：运行下面代码，输入 5000，看看结果为什么不对？

let money = prompt("你的月薪是多少？")
console.log(money + 1000)

提示：想想第一课 "1" + "1" 的例子。prompt 得到的是文字 而不是数字。 解决办法（提前了解）：Number(money) + 1000。这个问题第三课会详细讲。

---

九、本课总结

1. 网页文件后缀是 .html，JS 写在 <script></script> 中间
2. 修改流程：改代码 → 保存 → 刷新
3. 变量是"贴了标签的盒子"：let 名字 = 内容
4. 用 + 可以把文字和变量拼在一起
5. // 是注释，写给人看的

---