首页 > 代码库 > Day3-if语句
Day3-if语句
3.1 if语句初步
如果……那么……否则……
if就是英语“如果”的意思，else就是“否则”。
举个例子：
|
1 if(明天不下雨){ 2 我就出去玩； 3 }else{ 4 我就在家写作业; 5 } |
公式：
|
1 if(条件表达式){ 2 条件为真的时候做的事情 3 }else{ 4 条件为假的时候做的事情 5 } |
称为if语句结构体。
一个程序：
|
1 <script type="text/javascript"> 2 var a = 10; //设置变量 3 if(a > 5){ 4 console.log("哈哈"); 5 }else{ 6 console.log("嘻嘻"); 7 } 8 </script> |
if语句也成为“选择语句”、“条件判断语句”，我们通过下面的图片来解释。
殊途同归，走了不一样的路，但是最后都要执行if结构体后面的语句。
条件表达式，要么是true、要么是false。绝对在计算机中，不可能出现模棱两可的情况。所以，if语句让程序有了“选择”，可以在两条路中选择一条。
小题目：
用户输入自己的考试成绩，提示用户是否及格。如果及格了，弹出警告框“恭喜，你及格了”、“不要骄傲啊”。如果没有及格，那么弹出警告框“很遗憾，你没有及格”、“请继续努力啊”。 然后都弹出“么么哒”。
答案：
|
1 <script type="text/javascript"> 2 //第一步，让用户输入自己的成绩。 3 var score = parseFloat(prompt("请输入你的成绩")); 4 //第二步，判断 5 if(score >= 60){ 6 alert("恭喜，你及格了！"); 7 alert("不过不要骄傲啊！"); 8 }else{ 9 alert("很遗憾，你没有及格！"); 10 alert("请继续加油啊！！"); 11 } 12 alert("么么哒"); 13 </script> |
小题目：
用户输入自己的年龄，判断用户是否在18~70岁，如果在，那么弹出框框“恭喜，可以考驾照”，“加油啊”；
否则弹出“年龄不符合要求”。 最后，都要弹出“么么哒”。
|
1 <script type="text/javascript"> 2 //第一步，得到用户输入的年龄 3 var age = parseInt(prompt("请输入年龄")); 4 //第二步，判断。if的结构体 5 if(age >= 18 && age <= 70){ 6 alert("恭喜，可以考驾照"); 7 alert("加油啊"); 8 }else{ 9 alert("年龄不符合要求"); 10 } 11 alert("么么哒"); 12 </script> |
小题目：
判断用户输入的密码是否正确，如果是123，那么就弹出正确；如果不是，就弹出错误。
|
1 <script type="text/javascript"> 2 //第一步，得到用户输入的密码 3 var password = prompt("请输入密码"); 4 5 //第二步，判断 6 if(password == 123){ 7 alert("正确"); 8 }else{ 9 alert("错误"); 10 } 11 </script> |
3.2 多分支的if语句和跳楼现象
用户输入成绩，
如果成绩大于等于85，那么提示优秀；
否则如果成绩大于等于70，那么提示良好；
否则如果成绩60~69，那么提示及格；
否则，不及格
答案：
|
1 <script type="text/javascript"> 2 //第一步，得到用户输入的成绩 3 var score = parseFloat(prompt("请输入成绩")); 4 5 //第二步，判断 6 if(score >= 85){ 7 alert("优秀"); 8 }else if(score >= 70){ 9 alert("良好"); 10 }else if(score >= 60){ 11 alert("及格"); 12 }else{ 13 alert("不及格"); 14 } 15 </script> |
语法：
|
1 if(条件表达式1){ 2 条件1为真的时候做的时候 3 }else if(条件表达式2){ 4 条件1不满足，条件2满足的时候做的事情 5 }else if(条件表达式3){ 6 条件1、2不满足，条件3满足的时候做的事情 7 }else{ 8 全都不满足的时候做的事情 9 } |
跳楼现象，揭示多分支if语句的本质，就是下一个楼层已经暗含之上的楼层都不满足。
小题目： 面试题，读下面的程序，试问控制台输出什么？
明天的考试，一定有类似的题目：
|
1 <script type="text/javascript"> 2 var a = 10; 3 4 if(a > 5){ 5 a = a + 3; 6 }else if(a == 13){ 7 a = a + 4; 8 }else if(a == 17){ 9 a = a + 5; 10 }else{ 11 a = a + 6; 12 } 13 14 console.log(a); 15 </script> |
小练习：【分组探究作业】根据BMI（身体质量指数）显示一个人的体型。
BMI指数，就是体重、身高的一个计算公式。公式是：
BMI =体重÷身高的平方
比如，老师的体重是81.6公斤，身高是1.71米。
那么老师的BMI就是 81.6 ÷ 1.712 等于 27.906022365856163
过轻：低于18.5
正常：18.5-24.99999999
过重：25-27.9999999
肥胖：28-32
非常肥胖, 高于32
用JavaScript开发一个程序，让用户先输入自己的体重，然后输入自己的身高（弹出两次prompt框）。计算它的BMI，根据上表，弹出用户的身体情况。比如“过轻” 、 “正常” 、“过重” 、 “肥胖” 、“非常肥胖”。在程序开发中，充分考虑跳楼现象，不允许出现多余的东西。
方法1：
|
1 <script type="text/javascript"> 2 //第一步，输入身高和体重 3 var height = parseFloat(prompt("请输入身高，单位是米")); 4 var weight = parseFloat(prompt("请输入体重，单位是公斤")); 5 6 //第二步，计算BMI指数 7 var BMI = weight / Math.pow(height,2); 8 9 //第三步，if语句来判断。注意跳楼现象 10 if(BMI < 18.5){ 11 alert("过轻，嘻嘻嘻，你不怕被风吹走啊？？多吃点吧！"); 12 }else if(BMI < 25){ 13 alert("正常，真好！！"); 14 }else if(BMI < 28){ 15 alert("过重!还好啊！"); 16 }else if(BMI <= 32){ 17 alert("肥胖,注意减肥啊！"); 18 }else{ 19 alert("非常肥胖！"); 20 } 21 </script> |
方法2：
|
1 <script type="text/javascript"> 2 //第一步，输入身高和体重 3 var height = parseFloat(prompt("请输入身高，单位是米")); 4 var weight = parseFloat(prompt("请输入体重，单位是公斤")); 5 6 //第二步，计算BMI指数 7 var BMI = weight / Math.pow(height,2); 8 9 //第三步，if语句来判断。注意跳楼现象 10 if(BMI > 32){ 11 alert("非常肥胖"); 12 }else if(BMI >= 28){ 13 alert("肥胖"); 14 }else if(BMI >= 25){ 15 alert("过重"); 16 }else if(BMI >= 18.5){ 17 alert("正常") 18 }else{ 19 alert("偏瘦"); 20 } 21 </script> |
3.3 if语句的嵌套
小例子：
一个加油站为了鼓励车主多加油，所以加的多有优惠。
92号汽油，每升6元；如果大于等于20升，那么每升5.9；
97号汽油，每升7元；如果大于等于30升，那么每升6.95
编写JS程序，用户输入自己的汽油编号，然后输入自己加多少升，弹出价格。
两层：
|
1 //第一步，输入 2 var bianhao = parseInt(prompt("你想加什么油？填写92或者97")); 3 var sheng = parseFloat(prompt("你想加多少升？")); 4 5 //第二步，判断 6 if(bianhao == 92){ 7 //编号是92的时候做的事情 8 if(sheng >= 20){ 9 var price = sheng * 5.9; 10 }else{ 11 var price = sheng * 6; 12 } 13 }else if(bianhao == 97){ 14 //编号是97的时候做的事情 15 if(sheng >= 30){ 16 var price = sheng * 6.95; 17 }else{ 18 var price = sheng * 7; 19 } 20 }else{ 21 alert("对不起，没有这个编号的汽油！"); 22 } 23 24 alert("价格是" + price); |
小例子：
某个公司要给员工发年终奖，为了奖励老员工，所以工作时间越长，发的越多，规则如下：
工作满0年 发月薪的1倍月薪年终奖，如果月薪大于8000，那么就是发1.2倍
工作满1年 发月薪的1.5倍月薪年终奖，如果月薪大于10000，那么就是发1.7倍
工作满2年，甚至更多 发月薪的3倍月薪年终奖，如果月薪大于12000，那么就是发3.2倍
用JS编写程序，让用户输入工作了几年，可以输入0，然后输入月薪。然后算年终奖。
答案见案例
3.4 if语句的小知识点
else部分可以省略。
|
1 <script type="text/javascript"> 2 var a = 10; 3 if(a > 20){ 4 alert("这个数字大于20"); 5 } 6 </script> |
没有else部分，就是说没有“否则”，如果条件表达式不满足了，那么就什么都不做。
如果要做的事情，只有一句话，那么可以省略大括号（初学者尽量不要这么玩儿，一定要把大括号写完整）：
|
1 <script type="text/javascript"> 2 var a = 2; 3 if(a > 5) alert("这个数字大于5"); 4 alert("哈哈哈哈"); 5 </script> |
这个程序，a>5不满足，所以不能弹出“这个数字大于5” 。这是单行if语句，省略了大括号，
等价于：
|
1 <script type="text/javascript"> 2 var a = 2; 3 if(a > 5){ 4 alert("这个数字大于5"); 5 } 6 alert("哈哈哈哈"); 7 </script> |
所以“哈哈哈哈”是能够弹出的。
Day3-if语句