![动态网页设计与开发: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=1738823221-bkozqyjKYSQ12se7V0hupKfVJpjL8Wai-0-3ac07363262c56630398f1c545287647)
流程结构如图2.4所示。
例如判断成绩等级,如果高于90分则弹出提示框提示为Excellent,代码如下:
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_48_1.jpg?sign=1738823221-qEkO63XSMVwccbEkJLPGr2CuGFeR8g3K-0-3c458a6e637102cfb123672d68b4366e)
2.if-else语句
当判断条件成立与否都需要有对应的处理时可以使用if-else语句。其语法格式如下:
语法
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_48_2.jpg?sign=1738823221-FmFgFTNVuHRcKa6R14Zyj0HAhzFAweXj-0-3882a271c83027aa066132e1423135ed)
流程结构如图2.5所示。
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_48_3.jpg?sign=1738823221-OzWrb31bYvCnp7HlMruwJYgNY6BSl0Zr-0-8659e12a2151e04af6a0103425e3cb2e)
图2.4 选择结构—if单分支语句
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_48_4.jpg?sign=1738823221-z1TuyDWiUS5IMOyt77zQAKfbwpunXse5-0-7ccedc12245815fad321e8fe9502dde7)
图2.5 选择结构—if-else语句
如果条件成立则执行紧跟if语句的代码部分,否则执行跟在else语句后面的代码部分。这些代码均可以是单行语句,也可以是一段代码块。
例如同样是判断成绩等级,如果大于等于60分则弹出提示框提示“考试通过!”,否则提示“不及格!”。修改后的代码如下:
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_48_5.jpg?sign=1738823221-WePfpmaeMmBe51GpQhMnHq2187pR303O-0-534184548caa5d9f53f73bb4dcae6675)
3.if-else if-else语句
当有多个条件分支需要分别判断时,可以使用if-else if-else语句:
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_48_6.jpg?sign=1738823221-CckscEDYfkgFQZObwwMRbfXMDGxySPv0-0-5a3f8731e951b36265c45006b2279d02)
其中的else if语句可以根据实际需要有一个或多个。流程结构如图2.6所示。
【示例2】 JavaScript if-else if-else语句的简单应用
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_49_1.jpg?sign=1738823221-PvvxGqfBFafIhpoqzibanr21kQ7ZLJqE-0-630d4683d0dbe2e0bba3da85657ba42d)
示例2在浏览器中的运行效果如图2.7所示。
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_49_2.jpg?sign=1738823221-UAMoQu2qJ0wJmoHb3oUF2EzRBxhgXjda-0-75bff1adac181f21a2b36e1b5ab9ce23)
图2.6 选择结构—if-else if-else多分支语句
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_49_3.jpg?sign=1738823221-pJzxKMKHvWxpwsg80MLJkigXadYmPtoK-0-f9f78aa98885b82033dd3b522375d0f1)
图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=1738823221-WZ6ArSTNBooO3xDih88Jew80ZiW76d3h-0-9e1d379c3b51569bcf2886015d42e62a)
流程结构如图2.8所示。
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_50_2.jpg?sign=1738823221-AQFU3JjUpZZo6pp5MWHsHTrlELwhYnS8-0-79954c852f1e3a1314d20ee4f6afd583)
图2.8 选择结构—switch多分支语句
【示例3】 JavaScript switch语句的简单应用
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_50_3.jpg?sign=1738823221-W623LYXWpPx48GLScMxNGCzSWVuncupF-0-bf5b59163f1c537528ae07d7cb67d1ec)
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_51_1.jpg?sign=1738823221-yxRS8HMgBv4iS5DTN65Pe1uARmxloEEL-0-532e8ffc3069174033c55aa088c89016)
示例3在浏览器中的运行效果如图2.9所示。
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_51_2.jpg?sign=1738823221-iC6zZtfS3mvxjZxhMj85JwoqthVkVLqu-0-263ca17ae69c1422e01d4740f2a6fd0a)
图2.9 示例3运行效果
2.3.3 技能训练
上机练习3 用if语句判断某学生成绩是否及格
需求说明
已知学生成绩60分及以上为及格,试用if语句判断某学生成绩是否及格。
上机练习4 用switch语句判断任意年份是十二生肖中的哪一年
需求说明
已知1900年为鼠年,试用switch语句判断1900~2022年之间的任意年份是十二生肖中的哪一年。