![动态网页设计与开发: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=1739064482-2flWqvSZf2TXWDFePuXhNEWAzhk6AaPO-0-4ceb3d762f07fcc46de728aee3675e1e)
流程结构如图2.4所示。
例如判断成绩等级,如果高于90分则弹出提示框提示为Excellent,代码如下:
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_48_1.jpg?sign=1739064482-X3oyPvcB3xITIuhpkdAcCh1kVa37wtie-0-7cbcd10c6e5dd842546187910e594619)
2.if-else语句
当判断条件成立与否都需要有对应的处理时可以使用if-else语句。其语法格式如下:
语法
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_48_2.jpg?sign=1739064482-JkAOgZEHAEsZiA3hnKNYCxjSpfIWAo7G-0-29300205af35ed5fc68be2840d179ad6)
流程结构如图2.5所示。
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_48_3.jpg?sign=1739064482-JA6KvzRkHGVeigYpoxetgg3JaEbO2LRh-0-6934ea961f5ca35428f6c8f7f848a286)
图2.4 选择结构—if单分支语句
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_48_4.jpg?sign=1739064482-gIyCo1Oiyiyx5qBlivnfQUPrB5qMLLd4-0-0ba3ef9c0eb39d520a9ac4a7b4fed63f)
图2.5 选择结构—if-else语句
如果条件成立则执行紧跟if语句的代码部分,否则执行跟在else语句后面的代码部分。这些代码均可以是单行语句,也可以是一段代码块。
例如同样是判断成绩等级,如果大于等于60分则弹出提示框提示“考试通过!”,否则提示“不及格!”。修改后的代码如下:
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_48_5.jpg?sign=1739064482-cQcRjMoS2eIfmzBuYro13L8771kv7px4-0-9f2fa125067686348af092cccd4d16c0)
3.if-else if-else语句
当有多个条件分支需要分别判断时,可以使用if-else if-else语句:
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_48_6.jpg?sign=1739064482-tmz5wL246HPxt3HIw5OTP2pijAmIysHQ-0-f8667f43c2786586e516cfd5c2bdcdca)
其中的else if语句可以根据实际需要有一个或多个。流程结构如图2.6所示。
【示例2】 JavaScript if-else if-else语句的简单应用
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_49_1.jpg?sign=1739064482-Ing0tTZjS2bdL23sebRFnqHoA1AypYOc-0-f3ce651f8ed846bc22f2ef085ae19f30)
示例2在浏览器中的运行效果如图2.7所示。
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_49_2.jpg?sign=1739064482-B9NJ44Efk0PsbZXswdA4QbMm0JDLCoZn-0-52a69a4d85519c5f518f39283a41936c)
图2.6 选择结构—if-else if-else多分支语句
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_49_3.jpg?sign=1739064482-lWVZ8nKW7KtEbgl1oCVdx5p3EaxynQBz-0-e472ad66aaec0f65cc58924a91abde1c)
图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=1739064482-9dcRuSVBcFg2WrLhr4qF6LJoY3vsvtRM-0-5d9473ab3907218ce442a66894a6dd87)
流程结构如图2.8所示。
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_50_2.jpg?sign=1739064482-pJPTjUHIiAWltNQClPhSeJtKmqyHlPOw-0-21e3d5e671a533f95ab63afe7c6c387b)
图2.8 选择结构—switch多分支语句
【示例3】 JavaScript switch语句的简单应用
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_50_3.jpg?sign=1739064482-w12QS16iyn9MpKtZ1IIcttbjf0uhCd47-0-0f564c1dd61410c49b79933fcf63bb71)
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_51_1.jpg?sign=1739064482-25YeaGLLTkC2nR5dI5bGT2Phca8osaOU-0-1f14795d950d0c9177593d4fccb7860d)
示例3在浏览器中的运行效果如图2.9所示。
![](https://epubservercos.yuewen.com/DE91A3/17518673407512906/epubprivate/OEBPS/Images/39132_51_2.jpg?sign=1739064482-3HM4pvVlk0bIShp9TfLnJLETESNIc0kW-0-bada59d714f7a22408dbc6477d42f4e3)
图2.9 示例3运行效果
2.3.3 技能训练
上机练习3 用if语句判断某学生成绩是否及格
需求说明
已知学生成绩60分及以上为及格,试用if语句判断某学生成绩是否及格。
上机练习4 用switch语句判断任意年份是十二生肖中的哪一年
需求说明
已知1900年为鼠年,试用switch语句判断1900~2022年之间的任意年份是十二生肖中的哪一年。