🧠 第四课：JavaScript 进阶 — 让程序"会思考"

上一课你学会了变量、函数、DOM 操作——程序能动起来了。

今天学三个新东西：条件判断、列表、循环——让程序"会判断、会重复做事"。

最后我们做一个完整的小项目把这些都用上。

🚦 1. if/else — 让程序做判断

生活中我们一直在做判断："如果下雨，带伞；否则，不带。"

let score = 85;

if (score >= 60) {
  alert("及格了！");
} else {
  alert("没及格。");
}

if (条件) = 如果条件成立 → 做 { } 里面的事

else = 否则 → 做 else { } 里面的事

比较符号：

>大于score > 60
<小于age < 18
>=大于等于score >= 60
<=小于等于price <= 100
===等于name === "小明"
!==不等于name !== "小明"

输入分数，看看及格没 ↓

📋 2. 数组 — 装一堆东西的列表

变量是一个盒子装一个东西。数组是一个大盒子，里面可以装很多东西。

// 数组用方括号 [ ]，元素之间用逗号分隔
let colors = ["红", "蓝", "绿", "黄"];

// 取出来：用序号（从 0 开始！）
colors[0]; // → "红"（第一个是 0，不是 1）
colors[1]; // → "蓝"
colors[2]; // → "绿"

⚠️ 重要：计算机从 0 开始数！
第 1 个 = 序号 0，第 2 个 = 序号 1，第 3 个 = 序号 2……
这和日常习惯不一样，写代码时最容易忘。

🔁 3. for 循环 — 重复做一件事

如果要对数组里每一个元素做同样的事，用循环。

let fruits = ["苹果", "香蕉", "橘子"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]); // 依次打印：苹果、香蕉、橘子
}

for = 开始循环

let i = 0 = 从第 0 个开始

i < fruits.length = 只要没到最后一个，就继续

i++ = 每轮结束，i 加 1（去看下一个）

.length = 数组里有多少个元素（这里是 3）

点击按钮，用循环把颜色列表输出出来 ↓

🎮 4. 小项目① — 猜数字游戏

综合练习：变量 + 条件判断 + DOM 操作

电脑心里想了一个 1~50 的数，你来猜！

我已经想好了一个 1~50 的数……

🔍 游戏用到了什么？
let 变量 → 存随机数、猜的次数
if/else → 判断猜大了还是猜小了
querySelector → 更新页面上的提示文字

📝 5. 小项目② — 待办事项清单

综合练习：数组 + 循环 + DOM 操作

🔍 清单用到了什么？
数组 → 存的不是数据，是操作
createElement / appendChild → 动态生成新 HTML 元素
removeChild → 动态删除元素
onclick → 每个按钮绑定一个函数

🛠️ 6. 动手试一试！

✏️ 三个小挑战：
① 修改猜数字游戏，把范围从 1~100 改成 1~50
② 修改 if/else 示例，增加一个"分数 = 100，提示"满分！"
③ 在待办清单里，点一下文字让它加删除线（提示：用 classList.toggle("done")）

📋 7. 今日总结

概念作用怎么写
if/else判断条件，走不同分支if (x > 10) { } else { }
数组装一堆数据的列表let arr = ["a", "b", "c"];
for 循环重复做一件事for (let i=0; i<3; i++) { }
.length数组有多少个元素arr.length → 3
arr[0]取数组第 1 个元素arr[0] → "a"
🎉 你现在会什么？
HTML 搭结构 + CSS 做样子 + JS 写交互 + 条件判断 + 列表循环 = 能做出真正有用的网页了。
上面的猜数字和待办清单，就是完整的小应用。

✅ 下一步？

你已经入门了！接下来可以：

📐CSS Flexbox 布局做导航栏、多列排版
🎨做一个完整个人主页把你学到的全用上
🖥️学习 VS Code换掉记事本，用专业编辑器

告诉我你想学哪个，或者直接说"下一课" 🚀