2.3 流程控制语句
JavaScript流程控制语句包括if语句、switch语句、for循环、while循环、do/while循环、continue语句和break语句等。
2.3.1 if语句
if语句用于实现分支选择，根据条件成立与否，执行不同的代码段。if语句有3种格式。
if语句
1. 格式一
if(条件表达式){
代码段
}
如果条件表达式计算结果为true，则执行大括号中的代码段，否则跳过if语句，执行后继代码。如果代码段中只有一条语句，可省略大括号。例如：
if (x%2==0)
document.write(x+"是偶数");
2. 格式二
if(条件表达式){
代码段1
}else{
代码段2
}
如果条件表达式计算结果为true，则执行代码段1中的语句，否则执行代码2中的语句。例如：
if(x%2==0)
document.write(x+"是偶数");
else
document.write(x+"是奇数");
3. 格式三
if(条件1){
代码段1
}else if(条件2) {
代码段2
}
…
else if(条件n) {
代码段n
} else {
代码段n+1
}
JavaScript依次判断各个条件，只有在前一个条件表达式计算结果为false时，才计算下一个条件。当某个条件表达式计算结果为true时，执行对应的代码段。对应代码段中的语句执行完后，if语句结束。只有在所有条件表达式的计算结果均为false时，才会执行else部分的代码段。else部分可以省略。
例如：
if(x<60)
document.write(x+"分，不及格！");
else if(x<70)
document.write(x+"分，及格！");
else if(x<90)
document.write(x+"分，中等！");
else
document.write(x+"分，优秀！");
【例2-13】 使用if语句，根据页面中的输入给出评语。源文件：02\test2-13.html。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>使用if语句</title>
<script>
function rate() {
x = document.getElementById("score").value;
if (x < 0 || x > 100)
y = "无效成绩！"
else if (x < 60)
y = "不及格！";
else if (x < 70)
y = "及格！";
else if (x < 90)
y = "中等！";
else
y = "优秀！";
document.getElementById("out").innerText = y;
}
</script>
</head>
<body>
<form>
请输入分：<input type="text" id="score" value="0" size="5" />
<input type="button" value="显示评语" onclick="rate()" />
<br>评语：<span id="out" />
</form>
</body>
</html>
脚本中定义了一个rate()函数，该函数根据输入输出不同的评语。rate()函数名作为按钮的onclick属性值，在单击按钮时调用。在浏览器中打开HTML文件后，输入不同的分数，单击“显示评语”按钮显示评语，如图2-17所示。
图2-17 使用if语句
2.3.2 switch语句
switch语句
switch语句用于实现多分支选择，其基本格式如下。
switch(n){
case 标号1:
代码段1
break;
case 标号2:
代码段2
break;
…
case 标号n:
代码段n
break;
default:
代码段n+1
}
每个case关键字定义一个标号，标号不区别大小。default部分可以省略。switch语句执行时，首先计算n的值，然后依次测试case标号是否与n值匹配，如果匹配则执行对应的代码段中的语句，否则测试下一个case标号是否匹配。只要有一个case标号匹配，JavaScript就不会再测试是否还有匹配标号。如果所有标号均不匹配，则执行default部分的语句块（如果有的话）。
每个case块末尾的break用于跳出switch语句。break不是必需的。如果没有break，JavaScript会在该case块中的语句执行结束后，继续执行后继case块，直到遇到break或switch语句结束。
【例2-14】 使用switch语句改造例2-13。源文件：02\test2-14.html。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>使用switch语句</title>
<script>
function rate() {
x = document.getElementById("score").value;
x = Math.floor(x / 10); //x除以10后取整数部分
switch (x) {
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
y = "不及格！";
break;
case 6:
y = "及格！";
break;
case 7:
case 8:
y = "中等！";
break;
case 9:
case 10:
y = "优秀！";
break;
default:
y = "无效成绩！";
}
document.getElementById("out").innerText = y;
}
</script>
</head>
<body>
<form>
请输入分：<input type="text" id="score" value="0" size="5" />
<input type="button" value="显示评语" onclick="rate()" />
<br>评语：<span id="out" />
</form>
</body>
</html>
浏览器中的运行结果如图2-18所示。
图2-18 使用switch语句
switch语句的case标号除了可以用数值外，也可使用字符串。
【例2-15】 使用switch语句实现颜色选择。源文件：02\test2-15.html。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>使用switch语句实现颜色选择</title>
<script>
function changecolor(){
x = document.getElementById("getcolor").value;
switch(x){
case "red":
y="#FF0000";
break;
case "green":
y="#00FF00";
break;
case "blue":
y="#0000FF";
}
document.getElementById("show").style.color=y;
}
</script>
</head>
<body>
<span id="show" style="{color:#000000}">请选择颜色：</span>
<select id="getcolor" onchange="changecolor()">
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
</select>
</body>
</html>
浏览器中的运行结果如图2-19所示。下拉列表框用于颜色选择，并在下拉列表框的onchange事件中调用函数完成颜色修改。下拉列表框返回值为字符串，在函数中用switch语句实现分支选择，确定应使用的颜色。
图2-19 使用switch语句实现颜色选择
2.3.3 for循环
for循环
for循环基本语法格式如下。
for(初始化;条件;增量){
循环体
}
for循环执行步骤如下。
（1）执行初始化。
（2）计算条件，若结果为true，则执行第（3）步，否则结束循环。
（3）执行循环体。
（4）执行增量操作，转到第（2）步。
初始化操作可以放在for循环前面完成，增量部分可放在循环体内完成。条件表达式应有计算结果为false的机会，否则会构成“死循环”。
【例2-16】 使用for循环计算1+2+3+…+100。源文件：02\test2-16.html。
…
<body>
<script>
var s = 0
for (var n = 1; n <= 100; n++) {
s+=n
}
document.write("1+2+3+…+100 = " + s)
</script>
</body>
</html>
浏览器中的运行结果如图2-20所示。
图2-20 使用for循环
2.3.4 while循环
while循环
while循环基本语法格式如下。
while(条件){
循环体
}
while循环执行时首先计算条件，若结果为true，则执行循环体，否则结束循环。每次执行完循环体后，重新计算条件。
【例2-17】 使用while循环计算阶乘。源文件：02\test2-17.html。
…
<body>
<script>
var s = 1, n = 1, x = 5, y = 10
while (n <= x) {
s *= n
n++
}
document.write(x + "! = " + s)
n=1
while (n <= y) {
s *= n
n++
}
document.write("<br>"+y + "! = " + s)
</script>
</body>
</html>
浏览器中的运行结果如图2-21所示。
图2-21 使用while循环
2.3.5 do/while循环
do/while循环是while循环的变体，其基本格式如下。
do{
循环体
}while(条件);
do/while循环与while循环类似，都是在条件为true时执行循环体。区别是，while循环在一开始就测试条件，如果条件不为true，则一次也不执行循环。do/while循环在执行一次循环体后才测试条件，所以至少执行一次循环。
【例2-18】 使用do/while循环计算阶乘。源文件：02\test2-18.html。
…
<body>
<script>
var s = 1, n = 1, x = 6, y = 11
do{
s *= n
n++
} while (n <= x)
document.write(x + "! = " + s)
n=1
do {
s *= n
n++
} while (n <= y)
document.write("<br>"+y + "! = " + s)
</script>
</body>
</html>
浏览器中的运行结果如图2-22所示。
图2-22 使用do/while循环
2.3.6 continue语句
continue语句用于终止本次循环，开始下一次循环。continue语句只能放在循环内部，在其他位置使用会出错。
跳转语句
continue语句语法格式如下。
continue continue 标号
不带标号的continue只作用于当前所在的循环，带标号时作用于标号处的循环。
【例2-19】 使用continue。源文件：02\test2-19.html。
…
<body>
<script>
outloop:
for (var i = 1; i < 10; i++) {
for (var j = 1; j < 10; j++) {
document.write(i + "×" + j + "=" + i * j + " ")
if (j >= i) {
document.write("<br>")
continue outloop
}
}
}
</script>
</body>
</html>
浏览器中的运行结果如图2-23所示。
图2-23 使用continue语句
脚本中的“continue outloop”语句表示开始下一次outloop标号处的外层循环，该语句等价于break。如果去掉语句中的标号，则开始当前循环的下一次内层循环，将会得到不同的结果。
当continue用在while或do/while循环中时会转移到条件计算，然后在条件为true时开始下一次循环，否则结束循环。
for循环中的continue会转移到增量部分，执行增量操作后再计算循环条件。
2.3.7 break语句
break语句的第一种格式如下。
break
这种格式的break语句用于跳出循环或switch语句，并且必须放在循环或switch语句内部，否则会出错。
break语句的第二种格式如下。
break 标号
这种格式中的标号标示的必须是一个封闭语句或代码块，例如循环、if语句或大括号括起来的代码块等。带标号的break语句用于跳出封闭语句或代码块，让程序流程转移到其后的语句。
【例2-20】 输出100以内的素数。源文件：02\test2-20.html。
素数指不能被除数1和它本身之外的数整除的数。例如，3、5、7都是素数。判断素数的程序基本结构如下。
for(x=2;x<n;n++){
if(n%x==0) break;
}
if(x==n){
…//n是素数
}else{
…//n不是素数
}
HTML代码如下。
…
<body>
<script>
document.write("100以内的素数：<br>")
var count = 0, s = ""
for (y = 2; y < 100; y++) {
for (x = 2; x < y; x++) {
if (y % x == 0) break;
}
if (x == y) {
s = s + " " + y; //将素数连接成字符串
count++; //统计素数个数
if (count % 10 == 0)
s = s + "<br>";//添加换行符号
}
}
document.write(s)
</script>
</body>
</html>
浏览器中的运行结果如图2-24所示。
图2-24 输出100以内的素数