![动态网页设计与开发:JavaScript + jQuery](https://wfqqreader-1252317822.image.myqcloud.com/cover/481/32441481/b_32441481.jpg)
2.3 JavaScript条件语句
2.3.1 if语句
1.if语句
最简单的if语句由单个条件组成,语法规则如下:
语法
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_47_3.jpg?sign=1739338650-F5iW18dDPaiyjnsu0KDKa1h4x7PXJN90-0-657019a12256ec5c2f5e1419c97c1bf4)
流程结构如图2.4所示。
例如判断成绩等级,如果高于90分则弹出提示框提示为Excellent,代码如下:
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_48_1.jpg?sign=1739338650-9rfftGVGcnwfz7bZDsubE96zPaiAja52-0-34a897d58beec96f8beefbb08bbe7238)
2.if-else语句
当判断条件成立与否都需要有对应的处理时可以使用if-else语句。其语法格式如下:
语法
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_48_2.jpg?sign=1739338650-R2MZAbavQCIEz0jqWW1koNUbeDEVH7oT-0-197d74319f8f779d98aea6ed882ca4b0)
流程结构如图2.5所示。
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_48_3.jpg?sign=1739338650-ggjerbrHrUxn9XfibxdLo4821lnLuVZh-0-d4f013569a05e305d2dcfcbc4929b0b1)
图2.4 选择结构—if单分支语句
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_48_4.jpg?sign=1739338650-LKvBPS56qwTaJsiCSU4BO4xv6I6gZa2h-0-ef0997fd52053d5620e1b193c7194cd3)
图2.5 选择结构—if-else语句
如果条件成立则执行紧跟if语句的代码部分,否则执行跟在else语句后面的代码部分。这些代码均可以是单行语句,也可以是一段代码块。
例如同样是判断成绩等级,如果大于等于60分则弹出提示框提示“考试通过!”,否则提示“不及格!”。修改后的代码如下:
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_48_5.jpg?sign=1739338650-KuVwLPy4LbsT0yBhr6z7GvLUPuJCZMaz-0-3a9f02a0993537516b64a4ffcd05450e)
3.if-else if-else语句
当有多个条件分支需要分别判断时,可以使用if-else if-else语句:
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_48_6.jpg?sign=1739338650-ofKYK8d9IFqu73oQYq95Nuf1QrhHtKhr-0-e432b3052e01484c6dcab1125f870c8f)
其中的else if语句可以根据实际需要有一个或多个。流程结构如图2.6所示。
【示例2】 JavaScript if-else if-else语句的简单应用
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_49_1.jpg?sign=1739338650-CwPdwHGoZRgX0UQr0wx6oA4sRJsQMqBj-0-23c9ca1641c69d3f43606e39e5e5a6e2)
示例2在浏览器中的运行效果如图2.7所示。
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_49_2.jpg?sign=1739338650-eU8asyLfQCYgMSlq2GAy6aZw3m8TJQzi-0-552a91db7d34ca2c185d2a1959db81f1)
图2.6 选择结构—if-else if-else多分支语句
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_49_3.jpg?sign=1739338650-wQqnjhZ2qrdG7Z03WLLLjwBT96AoTCLq-0-e6dce985d4d279c0a29b37db2a0580ff)
图2.7 示例2运行效果
2.3.2 switch语句
当对于同一个变量需要进行多次条件判断时,也可以使用switch语句代替多重if-else if-else语句。语法格式如下:
语法
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_50_1.jpg?sign=1739338650-mQwdbgStDq9kWTbxuMwMB8AvFB9PUox1-0-afe6bdcb911ca651948bad655857bddf)
流程结构如图2.8所示。
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_50_2.jpg?sign=1739338650-r7jUS1VqbhetrLwPNeanBjxRcmpAJqY9-0-ff003a7fdca87b2d9a64b80363fbf7f1)
图2.8 选择结构—switch多分支语句
【示例3】 JavaScript switch语句的简单应用
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_50_3.jpg?sign=1739338650-L2yeOGKslOdYzoazhprBG8CZOnpWiBOz-0-1a2f4adda33c40986e7d3f47195f693f)
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_51_1.jpg?sign=1739338650-qPIeOqFAdJPxD9KEiOHYUvUKnSvPjkyg-0-d2603fa32cae931d54a7eb0c62cf6af3)
示例3在浏览器中的运行效果如图2.9所示。
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_51_2.jpg?sign=1739338650-Nr2qhhidZuHfvm1JZ6vCG7joQDAtKvhB-0-f5f0f9236159b33885cae897673abc6b)
图2.9 示例3运行效果
2.3.3 技能训练
上机练习3 用if语句判断某学生成绩是否及格
需求说明
已知学生成绩60分及以上为及格,试用if语句判断某学生成绩是否及格。
上机练习4 用switch语句判断任意年份是十二生肖中的哪一年
需求说明
已知1900年为鼠年,试用switch语句判断1900~2022年之间的任意年份是十二生肖中的哪一年。