02-condition

JavaScript Development Lab 02：条件判断

这是 javascript-development-lab 的第 02 个最小实验。

1. 这一章解决什么问题？

理解 JavaScript 如何根据条件决定“接下来执行哪一段代码”。

本实验使用一个简单的会员判断场景，根据积分、VIP 状态和角色得到不同结果。

2. 核心 JavaScript 知识

• if
• else if
• else
• switch
• case
• break
• 三元运算符 条件 ? A : B
• 比较运算符：>、>=、<、<=、===
• 逻辑与 &&
• 逻辑或 ||
• 逻辑非 !

3. HTML 做什么？

HTML 只负责提供两类显示位置：

• 当前测试数据
• 条件判断后的结果

HTML 本身不负责决定会员等级、优惠资格和角色权限。

4. JavaScript 做什么？

JavaScript 负责：

1. 定义测试数据。
2. 使用 if / else if / else 判断会员等级。
3. 使用逻辑运算符组合多个条件。
4. 使用三元运算符完成简单二选一。
5. 使用 switch 判断不同角色。
6. 把判断结果输出到页面。

5. 数据如何流动？

原始变量
↓
条件表达式
↓
判断 true / false
↓
进入对应代码分支
↓
得到结果
↓
DOM
↓
页面显示

这一章最重要的不是记住语法，而是理解：

同一段程序，可以因为输入数据不同而走向不同路径。

6. 建议修改哪里观察结果？

重点修改：

js/app.js

建议依次测试：

1. memberScore = 95
2. memberScore = 75
3. memberScore = 50
4. isVip = true
5. isVip = false
6. memberRole = 'admin'
7. memberRole = 'member'
8. memberRole = 'guest'
9. 输入一个不存在的角色，观察 default。

每修改一次，只观察结果如何变化，不需要增加新功能。

7. 这一章后面可以扩展什么？

暂时不增加复杂功能。

后续可以继续研究：

• === 与 == 的区别
• truthy / falsy
• 条件嵌套
• 短路求值
• 更复杂的权限判断
• 表单输入后实时判断

其中“表单输入”和“事件触发”会在后面的 Lab 单独研究，因此本章不提前展开。

文件结构

javascript-development-lab-02-condition/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── app.js
└── README.md

使用方法

直接使用浏览器打开：

index.html

不需要：

• npm
• Node.js
• 构建工具
• 第三方 JavaScript 框架

本章学习标准

完成本章后，至少应该能够解释：

1. if / else if / else 分别在什么情况下执行。
2. 比较表达式最终为什么会得到 true 或 false。
3. &&、||、! 分别表示什么。
4. 什么情况下适合使用三元运算符。
5. switch 与多个 if 判断有什么区别。
6. 为什么修改输入数据后，程序会得到不同结果。