4.3 选择语句
选择语句是JavaScript中的基本控制语句之一，其作用是让JavaScript根据条件选择执行哪些语句或不执行哪些语句。在JavaScript中的选择语句可以分为if语句和switch语句两种。
4.3.1 if语句
if语句是一个单一的选择语句，相当于口语中的“如果……就……”语句。其语法代码如下所示：
if (<逻辑表达式>) <语句块>
在if语句中，只有当<逻辑表达式>返回的结果为true时，才会去执行<语句块>中的语句，否则，将跳过<语句块>中的语句，继续执行其他语句。
【实例4.1】有关if语句的使用方法请看以下代码，注意加粗的文字。
01 <html> 02 <head> 03 <title>if语句</title> 04 <script type="text/javascript"> 05 <!-- 06 var a = 10; 07 var b = 20; 08 if (b>a) 09 document.write("b大于a<br>"); 10 if (b=2qa) 11 { 12 var c = a + b; 13 document.write("a + b = " + c + "<br>"); 14 } 15 if (a>b) 16 { 17 document.write("a大于b"); 18 } 19 --> 20 </script> 21 </head> 22 <body> 23 </body> 24 </html>
【代码说明】在本例中所涉及的知识点有以下几个：
■因为表达式“b>a”返回true，执行“document.write("b大于a<br>");”语句，输出“b大于a”，如图4.1所示中的第一行文字。此时由于语句块中只有一个语句，所以可以省略大括号。
■因为“b=2*a”返回true，因此执行下面的语句块中的语句。即先执行“var c = a + b;”，再执行“document.write("a + b = " + c + "<br>");”。如图4.1所示中的第二行文字。此时语句块中有两个语句，因此必须要用{}将这两个语句括起来。
■因为“a>b”返回false，因此JavaScript不会执行其后的语句块中的语句。虽然在该语句块中只有一个语句，也可以用大括号将其括起来形成一个语句块。
提示
即使语句块中只有一个语句，最好也不要省略大括号，这样可以让代码的可读性增强，也可以减少出错的机会。
【运行效果】以上代码为本书配套代码文件目录“代码\第04章\sample01.htm”里的内容，其运行结果如图4.1所示。
图4.1 sample01.htm的运行结果
4.3.2 if...else语句
if...else语句是两路选择语句，相当于口语中常用到的“如果……否则……”语句，其语法代码如下所示：
if (<逻辑表达式>) <语句块1> else <语句块2>
在if...else语句中，当<逻辑表达式>返回的结果为true时，则执行<语句块1>中的语句，执行完<语句块1>中的语句之后，跳过else和<语句块2>，继续执行其他语句。当<逻辑表达式>返回的结果为false时，则跳过<语句块1>中的语句，执行<语句块2>中的语句。
【实例4.2】有关if...else语句的使用方法请看以下代码，注意加粗的文字：
01 <html> 02 <head> 03 <title>if...else语句</title> 04 <script type="text/javascript"> 05 <!-- 06 //定义一个日期型对象 07 var myDate = new Date(); 08 //获取当前时间 09 var myHoure = myDate.getHours(); 10 if (myHoure>=6 && myHoure<18) 11 { 12 document.write("白天好！"); 13 } 14 else 15 { 16 document.write("晚上好！"); 17 } 18 --> 19 </script> 20 </head> 21 <body> </body> </html>
【代码说明】在本例中，第7行先定义了一个时间类型的对象，再通过该对象获得当前的时间（小时），然后用“if (myHoure>=6 && myHoure<18)”判断当前时间是不是在6点到18点之间，如果是的话，执行“document.write(“白天好！”);”语句，如果不是的话，执行“document.write(“晚上好！”);”语句。
【运行效果】以上代码为本书配套代码文件目录“代码\第04章\sample02.htm”里的内容，在早上7点到晚上18点之间运行该文件的结果如图4.2所示，在其余时间运行该文件的结果如图4.3所示。
图4.2 白天的运行结果
图4.3 晚上的运行结果
4.3.3 if...else if...else语句
if...else if...else语句可以提供多重选择，相当于口语中的“如果……如果……否则”，其语法代码如下所示：
if (<逻辑表达式1>) <语句块1> else if (<逻辑表达式2>) <语句块2> …… else if (<逻辑表达式n>) <语句块n> else <语句块x>
在if...else if...else语句中，JavaScript会先判断<逻辑表达式1>返回的结果是否为true，如果为true的话，执行<语句块1>中的语句，执行完毕后忽略其他else if和else中的语句。如果不为true，则跳过<语句块1>中的语句，判断<逻辑表达式2>返回的结果是否为true，如果为true的话，执行<语句块2>中的语句，执行完毕后忽略其他else if和else中的语句。以此类推，直到所有逻辑表达式都为false时，才执行语句块n中的语句。
【实例4.3】有关if...else if...else语句的使用方法请看以下代码，注意加粗的文字：
01 <html> 02 <head> 03 <title>if...else if...else语句</title> 04 <script type="text/javascript"> 05 <!-- 06 //定义一个日期型对象 07 var myDate = new Date(); 08 //获取当前时间 09 var myHoure = myDate.getHours(); 10 if (myHoure>5 && myHoure<=12) 11 { 12 document.write("早上好！"); 13 } 14 else if (myHoure>12 && myHoure<=18) 15 { 16 document.write("下午好！"); 17 } 18 else 19 { 20 document.write("晚上好！"); 21 } 22 --> 23 </script> 24 </head> 25 <body> 26 </body> 27 </html>
【代码说明】代码第7行先创建一个日期对象，然后代码第9行获取当前的时间。代码第10～21行根据当前时间显示问候信息。
【运行效果】以上代码为本书配套代码文件目录“代码\第04章\sample03.htm”里的内容，如果在6点与12点之间运行该文件，则会输出“早上好！”；如果在12点与18点之间运行该文件，则会输出“下午好！”；如果在其他时间运行该文件，则会输出“晚上好！”。
4.3.4 if...else if语句
将if...else if...else语句中的else省略就成了if...else if语句，其语法代码如下所示：
if (<逻辑表达式1>) <语句块1> else if (<逻辑表达式2>) <语句块2> …… else if (<逻辑表达式n>) <语句块n>
从以上代码中可以看出，如果所有逻辑表达式都为false，那么整个if语句将什么也不执行。
【实例4.4】请看以下代码，注意加粗的文字：
01 <html> 02 <head> 03 <title>if...else if语句</title> 04 <script type="text/javascript"> 05 <!-- 06 //定义一个日期型对象 07 var myDate = new Date(); 08 //获取当前时间 09 var myHoure = myDate.getHours(); 10 if (myHoure>5 && myHoure<=12) 11 { 12 document.write("早上好！"); 13 } 14 else if (myHoure>12 && myHoure<=18) 15 { 16 document.write("下午好！"); 17 } 18 --> 19 </script> 20 </head> 21 <body> 22 </body> 23 </html>
【代码说明】代码第7行先创建一个日期对象，然后代码第9行获取当前的时间。代码第10～17行根据当前时间显示问候信息。
【运行效果】以上代码为本书配套代码文件目录“代码\第04章\sample04.htm”里的内容，如果在6点与12点之间运行该文件，则会输出“早上好！”；如果在12点与18点之间运行该文件，则会输出“下午好！”，否则什么都不输出。
4.3.5 if语句的嵌套
if语句允许嵌套，在嵌套时要注意else与if的匹配，sample03.htm也可以用嵌套方式来实现。
【实例4.5】请看以下代码，注意加粗的文字：
01 <html> 02 <head> 03 <title>if语句的嵌套</title> 04 <script type="text/javascript"> 05 <!-- 06 var myDate = new Date(); 07 var myHoure = myDate.getHours(); 08 09 if (myHoure>5 && myHoure<=12) 10 { 11 document.write("早上好！"); 12 } 13 else 14 { 15 if (myHoure>12 && myHoure<=18) 16 { 17 document.write("下午好！"); 18 } 19 else 20 { 21 document.write("晚上好！"); 22 } 23 } 24 --> 25 </script> 26 </head> 27 <body> 28 </body> 29 </html>
【代码说明】代码第6行先创建一个日期对象，然后代码第7行获取当前的时间。代码第9～23行根据当前时间显示问候信息。
【运行效果】以上代码为本书配套代码文件目录“代码\第04章\sample05.htm”里的内容，在本例中，粗体部分是一个if...else语句，斜体部分是嵌套在if...else语句中的另一个if...else语句。sample05.htm与sample03.htm的运行结果完全一致，但sample03.htm看上去要比sample05.htm更直观和易于理解。
4.3.6 switch语句
if...else if...else语句和嵌套的if语句都可以为程序流程提供多个可执行的分支，由JavaScript判断并执行某一个分支。但是如果分支特别多的话，JavaScript就要重复去判断每个分支中的逻辑表达式，这无疑是一种时间上的浪费。JavaScript的switch语句在多分支的处理上，比if语句要有效得多。switch语句可以针对变量不同的值来选择执行哪个语句块，其语法代码如下所示：
switch (<变量>)
{
case <数值1>:
<语句块1>
break;
case <数值2>:
<语句块2>
break;
…… ……
case <数值n>:
<语句块n>
break;
default:
<语句块m>
}
在以上代码中，JavaScript会先计算<变量>的值，然后再与<数值1>比较，如果相同，则执行<语句块1>中的语句，执行完毕后跳出整个switch语句；如果不相同，则与<数值2>比较。如果与<数值2>相同，则执行<语句块2>中的语句，执行完毕后跳出整个switch语句；如果不同，则继续比较下去。如果所有case语句后的数值与<变量>的值都不相同，则执行default后的<语句块m>。
【实例4.6】有关switch语句的使用方法请看以下代码，注意加粗的文字：
01 <html>
02 <head>
03 <title>switch语句</title>
04 <script type="text/javascript">
05 <!--
06 function myFun(str)
07 {
08 switch (str)
09 {
10 case "1":
11 alert("您选择的是星期一");
12 break;
13 case "2":
14 alert("您选择的是星期二");
15 break;
16 case "3":
17 alert("您选择的是星期三");
18 break;
19 case "4":
20 alert("您选择的是星期四");
21 break;
22 case "5":
23 alert("您选择的是星期五");
24 break;
25 case "6":
26 alert("您选择的是星期六");
27 break;
28 default:
29 alert("您选择的是星期日");
30 }
31 }
32 -->
33 </script>
34 </head>
35 <body>
36 <input type="radio"name="week" value="1"onclick="myFun(this.value)">星期一
37 <br>
38 <input type="radio"name="week" value="2"onclick="myFun(this.value)">星期二
39 <br>
40 <input type="radio"name="week" value="3"onclick="myFun(this.value)">星期三
41 <br>
42 <input type="radio"name="week" value="4"onclick="myFun(this.value)">星期四
43 <br>
44 <input type="radio"name="week" value="5"onclick="myFun(this.value)">星期五
45 <br>
46 <input type="radio"name="week" value="6"onclick="myFun(this.value)">星期六
47 <br>
48 <input type="radio"name="week" value="7"onclick="myFun(this.value)">星期日
49 <br>
50 </body>
51 </html>
【代码说明】在使用switch语句时，有以下几种是需要注意的：
■变量必须要用小括号括起来。
■case语句后的数值的数据类型必须与变量的数据类型相同，否则匹配会全部失败，而去执行default语句后的语句块。
■case <数值1>后必须要加上冒号。
■每个case语句的最后，必须要用break语句结束。如果省略break语句，JavaScript在执行完case后的语句块之后，不会跳出整个switch语句，还会继续执行下去。
■default语句必须放在所有case语句之后。
■default语句的最后可以不使用break语句。
■default语句可以省略。如果省略default语句，在变量值不能与任何一个case后的数值匹配成功的情况下，JavaScript会直接结束switch语句，不做任何操作。
■如果省略了default语句，最后一个case语句后的break语句也可以省略。
【运行效果】以上代码为本书配套代码文件目录“代码\第04章\sample06.htm”里的内容，在本例中，创建了7个单选框，在单击这些单选框时，调用myFun()函数，并将参数值传到该函数中。在myFun()函数里使用了switch语句判断传入的参数值是多少，然后根据不同的参数值，弹出不同内容的警告框。其运行结果如图4.4所示。
图4.4 sample06.htm的运行结果