4.2 流程控制语句
在JavaScript中，仅用顺序结构就可以编写一些简单的程序，此时程序从头到尾依次执行每个语句。使用流程控制语句则可以对程序执行的流程进行控制，以便根据条件执行不同的语句，或者重复执行某些语句。
4.2.1 选择语句
使用选择语句可以计算测试表达式的值并根据测试结果执行不同的操作。在JavaScript中，条件语句包括if-else语句和switch语句，下面分别加以介绍。
1.if-else语句
if-else语句根据一个表达式的值，有条件地执行一组语句。语法如下：
if(condition)
statement1;
[else
statement2;]
其中condition是一个布尔表达式，若其值为null或undefined，则作为false处理。statement1是当condition为true时要执行的语句。statement2是condition为false时要执行的语句。statement1和statement2可以是单个语句或语句块。
根据需要，还可以对if-else语句进行扩展，也就是使用下列else-if来处理多个条件，以形成多分支选择。
if(condition1)
statement1;
else if(condition2)
statement2;
else if(condition3)
statement3;
else
elsestatement;
例4-2 if-else语句应用示例。若未在文本框内输入用户名而单击【确定】按钮，则提示输入用户名，如图4-2所示；若已输入用户名并单击了【确定】按钮，则对该用户显示欢迎信息，如图4-3所示。
图4-2 未输入用户名时提示输入用户名
图4-3 已输入用户名时显示欢迎信息
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap04文件夹中创建一个HTML网页并保存为page4-02.html，把网页标题设置为“if-else语句应用示例”。
2 在页面上插入一个表单，保留其默认名称form1；在表单内输入提示文字，插入一个文本框并命名为txtUsername；插入一个按钮并命名为btnOK，在属性检查器上把【动作】选项设置为【无】，把按钮标题设置为“确定”，由此创建了一个<input type="button">按钮。
3 在表单下方创建一个文本段落（即p元素）并命名为msg，该段落中不包含任何文本内容。
4 按Shift+F4组合键，以打开【行为】面板；在页面上选择按钮btnOK，在【行为】面板上将其onclick事件句柄设置为“showMsg();”，如图4-4所示。
图4-4 设置按钮的onclick事件句柄
5 切换到代码视图，在</title>标记之后创建CSS样式表，源代码如下：
<style type="text/css">
<!--
body,input{font-size:12px;}
-->
</style>
6 在</style>标记之后创建JavaScript脚本块，源代码如下：
<script language="javascript" type="text/javascript">
function showMsg(){
var msg=document.getElementById("msg");
var username=form1.txtUsername.value;
if(username!=""){
msg.style.color="#0000FF";
msg.innerHTML=username+"用户，欢迎您。";
}else{
msg.style.color="#FF0000";
msg.innerHTML="请输入用户名。";
}
} </script>
7 在浏览器中打开网页，分别在输入或未输入内容情况下单击【确定】按钮，并查看网页出现的提示信息。
2.switch语句
switch语句当指定的表达式的值与某个标签匹配时，即执行相应的一个或多个语句。语法如下：
switch(expr){
case label1:
statement1;
break;
case label2:
statement2;
break;
......
default:
defaultstatement;
}
其中expr为要求值的表达式；若expr与label1相等，则执行语句statement1；若expr与label2相等，则执行语句statement2，依此类推；若没有label与expr相匹配，则执行语句defaultstatement。statement1、statement2和defaultstatement可以是单个语句，也可以是语句块。break语句与label一起使用，用于中断相关联的语句。
switch的语句执行流程如下：
（1）求expr的值并依次序查看各个label，直到找到一个匹配的值。
（2）若expr的值等于某个label的值，则执行相应的statement，直到遇到break语句，或者switch语句结束。若没有使用break语句，则执行多个label块。
（3）若没有label等于expr的值，则跳转到default处执行defaultstatement。若没有使用default子句，则跳转到最后一步。
（4）继续执行紧接switch代码块末尾的语句。
例4-3 switch语句应用示例。在网页上选择一种颜色，然后单击【应用】按钮，则下方的文字随之改变颜色，如图4-5所示。
图4-5 switch语句应用示例
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap04文件夹中创建一个HTML网页并保存为page4-03.html，把网页标题设置为“switch语句应用示例”。
2 在页面上插入一个表单，保留其默认名称form1；在表单内输入提示文字，添加三个单选按钮并把它们的name属性都设置为radColor，把它们的id分别设置为radio1、radio2和radio3，把单选按钮radio1的checked属性设置为true；插入一个按钮并将其type属性设置为button，将其value属性设置为“应用”，利用【行为】面板将其onclick事件句柄设置为“applyColor();”。
3 在表单下方创建一个文本段落，其内容为“祝您心想事成”，利用属性检查器将其字号设置为18pt，利用【行为】面板将其id设置为msg。
4 切换到代码视图，在</title>标记下方创建CSS样式表，源代码如下：
<style type="text/css">
<!--
body,input{
font-size:9pt;
text-align:center;
} -->
</style>
5 在</style>标记下方创建JavaScript脚本块，源代码如下：
<script language="javascript" type="text/javascript">
function applyColor(){
var msg=document.getElementById("msg");
switch(true){
case form1.radio1.checked:
msg.style.color="red";
break;
case form1.radio2.checked:
msg.style.color="blue";
break;
case form1.radio3.checked:
msg.style.color="green";
break;
}
}
</script>
6 在浏览器中打开网页，选择不同的颜色并单击【应用】按钮，同时观察下方文字颜色的变化情况。
4.2.2 循环语句
循环语句用于重复执行一组语句。在JavaScript中，循环语句包括while语句、do-while语句、for语句，以及for-in语句。
1.while语句
while语句重复执行一个或多个语句，直到指定的条件为false。语法如下：
while(expr){
statement
}
其中参数expr是一个布尔表达式，在循环的每次迭代前被检查；若expr为true，则执行循环，若expr为false，则结束循环。statement是当expr为true时要执行的一个语句或语句块，称为循环体。
while语句在第一次执行循环前检查表达式expr。若在第一次检查中expr的值为false，则该循环体连一次也不会执行。
例4-4 while语句应用示例。当在网页上单击【查看结果】按钮时，会显示出前100个自然数相加的结果，如图4-6所示。
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap04文件夹中创建一个HTML网页并保存为4-04.html，把网页标题设置为“while语句应用示例”。
图4-6 while语句应用示例
2 在网页上创建两个文本段落，并把第一个段落的id设置为result；在第二个段落中插入一个按钮，并将其type属性设置为“button”，按钮标题设置为“查看结果”，利用【行为】面板将其onclick事件句柄设置为“showResult();”。
3 切换到代码视图，在</title>标记下方创建CSS样式表，源代码如下：
<style type="text/css">
<!--
body,input{font-size:9pt;}
-->
</style>
4 在</style>标记下方编写JavaScript脚本块，源代码如下：
<script language="javascript" type="text/javascript">
function showResult(){
var i=1,sum=0;
while(i<=100){
sum+=i;
i++;
}
document.getElementById("result").innerHTML="1+2+3+...+100 = "+sum;
}
</script>
5 在浏览器中打开网页，并通过单击【查看结果】按钮来查看计算结果。
2.do-while语句
do-while语句第一次执行一个语句块，然后重复执行该语句块，直到条件表达式等于false。语法如下：
do{
statement
}while(expr);
其中statement是expr为true时要执行的语句，可以是复合语句。expr是一个布尔表达式。若expr为true，则再执行一次循环。若expr为false，则结束循环。
do-while语句在循环的第一次重复执行完成前，不检查expr的值，保证至少执行循环一次。此后，循环每成功重复一次后都要检查表达式。
例4-5 do-while语句应用示例。通过do-while语句计算圆周率π的近似值，所用计算公式如下：
网页运行结果如图4-7所示。
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap04文件夹中创建一个HTML网页并保存为4-05.html，把网页标题设置为“do-while语句应用示例”。
图4-7 do-while语句应用示例
2 在网页上创建两个文本段落，在第一个段落中插入一个按钮，并将其type属性设置为“button”，按钮标题设置为“查看结果”，利用【行为】面板将其onclick事件句柄设置为“showResult();”；把第二个段落的id设置为result；
3 切换到代码视图，在</title>标记下方创建CSS样式表，源代码如下：
<style type="text/css">
<!--
body,input{
font-size:9pt;
text-align:center;
}
#result{
border:1px solid #FF0000;
width:268px;
height:28px;
text-align:center;
font-family:"Times New Roman";
font-size:26px;
visibility:hidden;
}
-->
</style>
4 在</style>标记下方编写JavaScript脚本块，源代码如下：
<script language="javascript" type="text/javascript">
function showResult(){
var m=1,n=2,s=1,t=1;
do{
m=-m;t=2＊n-1;
s+=m/t;n++;
}while(t<=600000);
var result=document.getElementById("result");
result.style.visibility="visible";
result.innerHTML="pi="+4＊s;
}
</script>
5 在浏览器中打开网页，并通过单击【查看结果】按钮来查看计算结果。
3.for语句
for语句当指定条件为true时执行一个语句块。语法如下：
for(initialization;test;increment){
statement
}
其中initialization是一个表达式，它只在执行循环前被执行一次。test是一个布尔表达式，若test为true，则执行statement，若test为false，则结束循环。increment是一个递增表达式，在每次循环的最后执行该表达式。statement是当test为true时要执行的语句，可以是复合语句。
通常使用for语句执行次数确定的循环。
在下面的例子中，使用for循环计算前100个自然数之和。
var i,sum=0;
for(i=1;i<=100;i++){
sum+=i;
}
例4-6 for语句应用示例。当在网页上选择行数和列数并单击【创建表格】按钮时，将动态生成指定行数和列数的表格，如图4-8所示。
图4-8 for语句应用示例
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap04文件夹中创建一个HTML网页并保存为page4-06.html，把网页标题设置为“for语句应用示例”。
2 在页面上创建一个文本段落，输入提示文字，插入两个下拉式列表框，分别命名为lstRowNum和lstColNum，利用属性检查器为这两个列表框设置10个列表项，列表项的标签和值分别为1～10；插入一个按钮，将其type属性设置为button，将按钮标题设置为“创建表格”，利用【行为】面板将其onclick事件句柄设置为“createTable();”。
3 切换到代码视图，在段落结束标记</p>下方插入一个<span>标记，并将其id设置为tb；然后在</title>标记下方创建CSS样式表，源代码如下：
<style type="text/css">
<!--
body,td,th,input,select{
font-size:9pt;
text-align:center;
}
-->
</style>
4 在</title>标记下方创建JavaScript脚本块，源代码如下：
<script language="javascript" type="text/javascript">
function createTable(){ // 单击按钮时执行该函数
var rowNum=document.getElementById("lstRowNum").value; // 获取行数
var colNum=document.getElementById("lstColNum").value; // 获取列数
var string;
string="<table border=\"1\" cellpadding=\"5\">";
string+="<caption>"+rowNum+"行×"+colNum+"列表格</caption>";
for(var i=1;i<=rowNum;i++){ // 外层循环执行一次生成一行
string+="<tr>";
for(var j=1;j<=colNum;j++){ // 内层循环执行一次生成一个单元格
string+="<td>第"+i+"行第"+j+"列</td>";
}
string+="</tr>";
}
string+="</table>";
document.getElementById("tb").innerHTML=string; // 通过span元素显示表格
}
< / script >
5 在浏览器中打开网页，选择行数和列数并单击【创建表格】按钮，此时将生成一个包含指定行数和列数的表格。
4.for-in语句
for-in语句对应于一个对象的每个属性或一个数组的每个元素，执行一个或多个语句。语法如下：
for(variable in [object|array]){
statement
}
其中，variable是一个变量，它可以是object的任一属性或数组的任一元素。object和array分别是要在其上遍历的对象或数组。statement是相对于object的每个属性或array的每个元素都要被执行的一个或多个语句，可以是复合语句。
在循环的每次迭代前，variable被赋予object的下一个属性或array的下一个元素，然后可以在循环内的任一语句中使用它。
例4-7 for-in语句应用示例。在本例中创建一个对象，然后通过for-in语句输出对象的每个属性，网页运行结果如图4-9所示。
图4-9 for-in语句应用示例
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap04文件夹中创建一个HTML网页并保存为page4-07.html，把网页标题设置为“for-in语句应用示例”。
2 切换到代码视图，在<body>标记下方创建JavaScript脚本块，源代码如下：
<script language="javascript" type="text/javascript">
// 创建一个名为student的对象
// 并对该对象的一些属性进行设置
var student={
student_id:"20080101",
student_name:"陈小明",
gender:"男",
birthdate:"1988-8-8"
};
document.write("<h4>学生个人信息</h4>");
for(var e in student){
document.write(e+"："+student[e]+"<br />");
}
</script>
3 在浏览器中查看网页运行结果。
4.2.3 跳转语句
在while、do-while、for、或for-in循环体内，可以使用两种形式的跳转语句：break语句和continue语句。
break语句用于中断当前循环。语法如下：
break;
break语句也可以用于switch语句，此时其作用是终止当前分支的执行。
continue语句只能用在循环语句中，它把控制转移到while和do-while的测试条件，或者转移到for循环的递增表达式。语法如下：
continue;
执行continue语句会停止当前循环的迭代，并从循环的开始处继续程序流程。这样对不同的循环类型有以下影响。
● while和do-while循环：检查它们的条件，若条件为true，则再次执行循环。
● for循环：执行它们的递增表达式，若测试表达式为true，则再次执行循环。
● for-in循环：继续进行指定变量的下一个字段，并再次执行循环。
例4-8 break和continue语句应用示例。在网页上显示100以内的偶数，网页运行结果如图4-10所示。
图4-10 break和continue语句应用示例
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap04文件夹中创建一个HTML网页并保存为page4-08.html，把网页标题设置为“break和continue语句应用示例”。
2 切换到代码视图，在<body>标记下方创建JavaScript脚本块，源代码如下：
<script language="javascript" type="text/javascript">
var i=2;
document.write("<h4>100以内的偶数</h4>");
do{
i++;
if(i==101)break; // 若i等于101则跳出循环体
if(i%2!=0)continue; // 若i为奇数，则跳过后面的语句
document.write(i);
document.write (i<10?" ":" ");
if(i!=2 && i%20==0)document.write("<br />");
}while(1); // 循环条件恒为真，只有通过break语句结束循环
</script>
3 在浏览器中查看网页的运行结果。
4.2.4 异常捕获语句
在JavaScript中，可以使用try-catch语句来捕获异常，语法如下：
try{
// 可能发生异常的语句
statements
}catch(e){
// 以下是发生异常时要执行的语句
// 在catch块中可通过对象e的message或description属性来获取该异常的描述信息
statements
}finally{
// 始终要执行的语句
statements
}
除了系统本身引发的异常外，也可以使用throw语句抛出异常，语法如下：
图4-11 抛出和捕获异常
throw new Error(errorString);
其中errorString指定用户自定义的错误信息。
例4-9 本例演示了如何抛出和捕获异常，网页运行结果如图4-11所示。
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap04文件夹中创建一个HTML网页并保存为page4-09.html，然后把网页标题设置为“异常捕获示例”。
2 切换到代码视图，在<body>标记之后插入以下JavaScript脚本块：
<script type="text/javascript">
try{
for(var i=1;i<100;i++){
document.writeln(i+" ");
if(i>3)throw new Error("用户自定义错误");
}
}catch(e){
document.writeln("<br />脚本运行出现异常："+e.message+"。<br />");
}finally{
document.writeln("finally代码块总是要执行的。");
}
</script>
在浏览器中查看网页运行结果。