【JavaScript教程】#6 JavaScript 条件判断语句 IF ELSE (让JavaScript变得更聪明，自己在代码中做决定) | JS Conditional Operators
【JavaScript教程】#6 JavaScript 条件判断语句 IF ELSE (让JavaScript变得更聪明，自己在代码中做决定) | Introduction To JavaScript Conditional Operators
☕ ☕ ☕ 给我买杯咖啡提提神吧！
✅ https://bit.ly/3kCOpFK
✅ (免费) JavaScript教程系列：
https://bit.ly/310cHle
✅ 更多精彩的JavaScript入门课程：
http://bit.ly/js-for-beginners
✅ JavaScript相关书籍：
1：The Definitive Guide: Master the World's Most-Used Programming Language - 7th Edition (强烈推荐👍)
https://amzn.to/31s30uH
✅（通告）”Codetisan 自学编程社区“ 已经正式开通啦，三人行必有我师，同学们再也不用独自一人闷头自学编程了，快去社区里和其他小伙伴们互动吧！
▶︎ https://bit.ly/2AHylzN
🔆订阅我的YouTube频道，让你从一个0基础编程的菜鸟快速成为编程大师！🔆
http://bit.ly/2TBkXo1
▶︎ 文轩解码更精彩的平台 ◀︎
‣‣ Blogger ：https://bit.ly/2yMz0PC
‣‣ Twitter: https://bit.ly/2R74FS1
‣‣ Facebook: https://bit.ly/35crcmz
‣‣ Instagram: https://bit.ly/2KH6Wjw
‣‣ Github: https://bit.ly/2SHtsx4
#javascript条件判断语句 #编程入门 #javascript入门
文字内容：
Hi, 大家好，我是文轩
欢迎再次收看文轩解码
如果你想和其他同学
一起学习和讨论JavaScript编程
可以扫描这个二维码
去到自学编程社区里和其他的同学一起互动
今天我们来聊点有趣的话题
今天的JavaScript教学稍微和游戏有点沾边
我会用Super Mario里的
一些场景作为今天教学的示例
看看JavaScript怎么根据某些条件
去判断下一步该执行那些代码
在写代码的时候
我们经常需要让程序
根据提前设定好的条件
去控制程序的运行流程
我打个比方
在Super Mario里
如果Mario收集到一个金币
它的金币数就会增加
分数也会加200
能不能收集到金币
是Mario必须完成和满足的一个条件
当这个条件被满足了之后
Mario的金币数和分数才会增加
说白了
条件判断就是不停的在问
如果某某条件被满足了
下一步该什么做
有了这些条件把关
程序才能更聪明的
判断什么时候需要执行A功能
什么时候执行B功能
那现在我们切换到VS Code里实操一下
看看这些条件判断具体是怎么实施的
最简单的if条件判断语句可以这样表示
if
小括号
大括号
我们把需要判断的条件放在小括号里
所有需要被判断的条件
都必须返回boolean值
true或者false
需要执行的代码
我们必须把它放到大括号里
一旦这个条件被满足了
大括号里代码才会被执行
我们来让JavaScript判断10是否大于1
如果返回true值的话
就打印10 is greater than 1
我们保存刷新看看结果
嗯，if条件现在被满足了
10是大于1的
所以JavaScript就会打印
10 is greater than 1
回到刚才我们说Mario收集金币的示例
每当Mario收集到一个金币
它的分数和金币数就会增加
我们现在用if语句去表示
我们需要先声明三个变量
第一个变量是isCollectedCoin
这是用来保存Mario是否收集到金币
是boolean值
我们把它设置成true
第二个变量是points
用来保存分数
默认值是0
第三个变量是coins
用来保存金币数
默认值也是0
接下来
我们开始写if语句
现在我们要判断
Mario是否已经收集到金币
我们可以这样表示
把isCollectedCoin
输入到小括号这里
如果isCollectedCoin值
是true的话
coins值加1
points值加200
我们把这两行代码写在大括号里
coins++
这代表coins加1
然后points值也要加200
points += 200
接着我们在这里
打印coins和points值
isCollectedCoin值是true
条件被满足了
所以当我们刷新页面后
JavaScript会执行这两行代码
Console应该会打印
累计金币是1
累计分数是200
我们保存刷新看看
这里出现了乱码
显示不了中文
我们需要去到html文档里
添加javascript的编码
在这里添加
charset=utf-8就可以了
保存刷新一下
嗯，这一次能正常显示中文了
累计金币是1
累计分数是200
这就是程序员经常编写的if语句
以后在你的程序里
也会经常出现类似这样的语句
还有一种语句也会经常出现在代码里
那就是else语句
else语句一般会用来执行条件
不被满足的代码
我们把isCollectedCoin换成false
这说明Mario没有收集到任何的金币
当我们刷新页面的时候
console这里不会输出任何的东西
因为isCollectedCoin的条件没被满足
所以这些代码是不会被执行的
我们可以在这里
大括号之后添加else语句
else
大括号
然后在else大括号里添加代码
如果isCollectedCoin值是false
我们就让console打印
Mario,加油！
好的
我们保存刷新一下
是的
console这里输出
Mario 加油！
isCollectedCoin值是false
if语句里的条件没被满足
所以程序会跳到else语句
执行打印Mario 加油！
如果我们同时要判断多个条件
那要怎么表示呢？
在Super Mario里
每一关都有不同的游戏场景
游戏会根据玩家的进度
显示下一关的场景
现在我们来模拟一下这个流程
要进入下一关
游戏程序需要判断
玩家是否已经完成当前的任务
如果任务已经完成
游戏就会让玩家进入下一关
这里我们需要创建两个变量
isLevelDone
和currentLevel
isLevelDone是boolean值
用来保存玩家是否已经完成当前任务
currentLevel则用来保存玩家现在在哪一关
我们先声明isLevelDone
把true赋予isLevelDone
再声明currentLevel
把1赋予currentLevel
接下来
我们要判断玩家的任务是否已经完成
先插入if else语句
这里我们要判断
isLevelDone值是true还是false
true的代码放在这里
false的代码放在else这里
假设玩家完成了当前的任务
程序接下来需要再判断进入第几关
我们假设Super Mario里就只有3关
我们在这里再添加1个if语句
用来判断currentLevel是否等于1
如果等于1的话
那就进入第二关
因为我们现在只是模拟部分的代码
所有就不展开讨论游戏怎么进入第2关
我们用console.log来代替
进入第2关的程序
在console里直接输出“进入第2关”
当玩家成功进入下一关
程序需要更新玩家currentLevel值
我们可以用currentLevel++去表示
为currentLevel值加1
如果玩家顺利完成了第2关
准备进入第3关
我们这里需要再添加一个if语句
如果要插入多个if语句
我们需要在接下来的if语句使用else if
像这样
else if
小括号
大括号
条件这里我们要判断
currentLevel是否等于2
如果currentLevel等于2的话
我们就打印进入第3关
和BOSS决斗
然后为currentLevel值加1
从2变成3
我们在这里再添加一个
else if来完成这个模拟
这里我们要判断玩家
是否完成了所有的任务
如果所有的任务已经完成
程序就会告诉玩家
“你已经完成所有的任务，重启任务”
然后把currentLevel设置成1
模拟玩家回到第1关
在else的这个部分
如果isLevelDone值是false的话
游戏程序不需要做任何的东西
只打印任务未完成，加油！的文本
好的
我们的代码差不多了现在
我们先刷新页面执行这些代码
console这里打印进入第2关
isLevelDone值是true
程序会进入这个部分
currentLevel值是1
第1个条件被满足了
所以就会执行这两行代码
打印进入第2关
和currentLevel++
好的
现在我们把currentLevel换成2
保存刷新看看效果
这里打印进入第3关
和BOSS决斗
isLevelDone是true
程序还是会执行这个部分的代码
currentLevel等于2吗？
不是
跳到下一个else if
currentLevel等于2吗？
是的
条件被满足了
然后就执行这里的代码
显示进入第3关，和BOSS决斗
然后再currentLevel++
我们再把currentLevel换成3
保存刷新
console这里显示
你已经完成所有的任务，重启任务
我们看看代码是怎么被执行的
isLevelDone是true吗？
是的
currentLevel等于3吗？
不是
跳到下一个else if
currentLevel等于3吗？
也不是
再跳到下一个else if
这个else if最终能满足
currentLevel等于3的条件
程序就会执行这里的代码
去显示你已经完成所有的任务
重启任务
然后再把currentLevel设置成1
模拟玩家回到第一关
好的
我们把isLevelDone设置成false
看看console会输出什么？
应该会显示任务未完成，加油！
我们来验证一下
嗯，这里输出
任务未完成，加油！
这是因为在第一个if语句里
isLevelDone值是false
程序就直接跳到else的部分
执行这里的代码
所以才会打印
任务未完成，加油！
一般像isLevelDone
和currentLevel值
在完整的游戏程序里
都是从数据库或者
根据玩家的状态获取的
不会像我们刚才那样
手动更改数据去模拟
好的
我们来总结一下刚才的分享
JavaScript 条件判断有三种语句
if
else
和 else if
简单的if语句可以这样表示
只要条件被满足了
就会执行大括号里的代码
if else语句可以这样表示
if else语句有两个部分
条件是true的时候
会执行这里的代码
条件是false的时候
则会执行这里的代码
如果需要判断多个条件
可以用else if
像这样
程序会逐一的判断条件
直到发现可以被满足的条件
如果没有发现能被满足的if条件
程序就会跳到else的部分
执行该部分的代码
好的
今天的视频就到这里
如果喜欢今天的分享
那就帮忙点个赞吧
我们下个视频见，拜拜
Comments
Post a Comment