![动态网页设计与开发: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=1739278890-n9lT9Z95leaZQPKt3WMgp7bng0qfVIpk-0-42aa7b488ee15062125f14e90bc7ff17)
流程结构如图2.4所示。
例如判断成绩等级,如果高于90分则弹出提示框提示为Excellent,代码如下:
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_48_1.jpg?sign=1739278890-dimtBG9jenYRqnzaLoBH57zMxvatEEP7-0-7f9c253d2b0fd82302b6dd89c12b5f86)
2.if-else语句
当判断条件成立与否都需要有对应的处理时可以使用if-else语句。其语法格式如下:
语法
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_48_2.jpg?sign=1739278890-wsBT7CCHBYA5BxVEzlgnfvGW4Yt4D50B-0-5fd72a18a4d3ea7c0d9785998a0d1e73)
流程结构如图2.5所示。
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_48_3.jpg?sign=1739278890-pNiDjdAYkWAMMy56WNLwH5DIv0mmzRTD-0-ebdb45942f79dcd272a2ee65c98337dc)
图2.4 选择结构—if单分支语句
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_48_4.jpg?sign=1739278890-jlO2N7Op7o3xdWX1kusy7asfKqddvTjr-0-dc960d26ccf86a96b0b1f5738caf7be2)
图2.5 选择结构—if-else语句
如果条件成立则执行紧跟if语句的代码部分,否则执行跟在else语句后面的代码部分。这些代码均可以是单行语句,也可以是一段代码块。
例如同样是判断成绩等级,如果大于等于60分则弹出提示框提示“考试通过!”,否则提示“不及格!”。修改后的代码如下:
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_48_5.jpg?sign=1739278890-cY6y6AlSNQe7LI045HQMfcsDqmCDLeIB-0-32e8233003db1153b701d4ba30bea47d)
3.if-else if-else语句
当有多个条件分支需要分别判断时,可以使用if-else if-else语句:
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_48_6.jpg?sign=1739278890-fJWh5dZZLzxIJb0zz8XxBsAp6aJYjgvr-0-0f5817ddd29bf6b4362383b20699f385)
其中的else if语句可以根据实际需要有一个或多个。流程结构如图2.6所示。
【示例2】 JavaScript if-else if-else语句的简单应用
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_49_1.jpg?sign=1739278890-YXBDzrysC6nYzNK6Kvncd2ueTsB77mQl-0-3b9d53d35e8d564999f35a1095332b78)
示例2在浏览器中的运行效果如图2.7所示。
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_49_2.jpg?sign=1739278890-GYHH1IQNAEdCYCfQWjywt4EogNieRjtI-0-bf585d4158396522e229c869e1bf0b09)
图2.6 选择结构—if-else if-else多分支语句
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_49_3.jpg?sign=1739278890-gmdGEqz8l9L5MjiZznI61U3jiEtjJXwV-0-4ce4effd77e30cf93af2588c2176816c)
图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=1739278890-uLLlckMh9ItmNaZoNrXRujzIbbo2bjty-0-b985883c6104e23e5630c0b3f41ec3bd)
流程结构如图2.8所示。
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_50_2.jpg?sign=1739278890-bqV79XSs8EEs4adjKRns0VokJW4eH3KL-0-f08634b0bb1536b4b2e2ef13a47140c8)
图2.8 选择结构—switch多分支语句
【示例3】 JavaScript switch语句的简单应用
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_50_3.jpg?sign=1739278890-P4NzBnTIwBxR5GPpeOhtiokcQAxTacYE-0-2b96a7dd45659dd4a8a7186afeb75cb5)
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_51_1.jpg?sign=1739278890-EflGqgopQr4gCV6ToxANedXcH0tsrkY7-0-9b94eed471542f5f6723e95338e0c9e8)
示例3在浏览器中的运行效果如图2.9所示。
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_51_2.jpg?sign=1739278890-HADUSBCsqA7ZfN33bDkH3pj9f003nhkB-0-91d28880d8e328e63a098cddab82f654)
图2.9 示例3运行效果
2.3.3 技能训练
上机练习3 用if语句判断某学生成绩是否及格
需求说明
已知学生成绩60分及以上为及格,试用if语句判断某学生成绩是否及格。
上机练习4 用switch语句判断任意年份是十二生肖中的哪一年
需求说明
已知1900年为鼠年,试用switch语句判断1900~2022年之间的任意年份是十二生肖中的哪一年。