购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

第4章

语句

从上一章中可以看出,表达式的作用只是生成并返回一个值,但是在一个程序里,如果仅仅只是生成并返回值的话,那么这个程序可能什么也做不了。在JavaScript中还有很多种语句,通过这些语句可以控制程序代码的执行次序,从而可以完成比较复杂的程序操作。

本章重点:

■JavaScript的语句构成;

■JavaScript的异常处理能力;

■一些常见的关键字。

4.1 表达式语句

表达式语句是JavaScript中最简单的语句。表达式语句通常是赋值语句、delete语句和函数或方法调用语句。如以下代码中,每一行都是一个表达式语句:


a = 1 + 2;           //赋值语句
b = a * c;           //赋值语句
i++;                 //递增表达式,实际上也是一个赋值语句
x--;                 //递减表达式,实际上也是一个赋值语句
delete myObject.b;   //删除一个对象属性
delete arr[0];       //删除一个数组元素
myFun();             //调用函数
alert("");           //使用方法
window.open();       //使用方法

4.2 语句块

用{}将多个语句括起来,就形成了一个语句块。JavaScript会按着语句块中语句出现次序逐一地执行。通常情况下,JavaScript会执行完语句块中的所有语句,除非语句块中出现break、continue、return或throw语句。语句块的使用范围很广,可以与函数或选择语句、循环语句、异常处理语句等语句联合使用,以达到复杂的程序控制目的。以下代码中,加粗的文字就是一个语句块:


function myFun(a,b)
{
   var c = a + b;
   alert(c);
}

只要是用{}括起来的语句都是一个语句块,因此,一个语句块里,也可以只有一个语句,如以下代码中,加粗的文字就是一个语句块:


if (a>b)
{
   document.write(a);
}

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的运行结果

4.4 循环语句

选择语句允许让JavaScript选择执行语句块,而循环语句可以让JavaScript重复执行某个语句块。JavaScript中的循环语句包括while语句、do...while语句、for语句和for...in语句4种。

4.4.1 while语句

while语句是在JavaScript中使用得最多的一种循环语句,其语法代码如下所示:


while (<逻辑表达式>)
 <语句块>

在以上代码中,JavaScript会先判断逻辑表达式的值,如果该值为false,则不执行语句块(在循环语句中语句块又称为循环体)中的语句,即结束整个while语句。如果逻辑表达式的值为true,则执行循环体中的语句,执行完毕之后,再去判断逻辑表达式的值,如果还为true,则再次执行循环体中的语句,这种循环将会一直执行下去,直到逻辑表达式的值为false时才退出循环。

因此,在while语句的循环体中,往往会包含改变逻辑表达式条件的语句,否则逻辑表达式一直为true,会造成死循环。

【实例4.7】 有关while语句的使用方法请看以下代码,注意加粗的文字:


01   <html>
02      <head>
03         <title>while语句</title>
04         <script type="text/javascript">
05            <!--
06               var i = 0;
07               while (i<4)
08               {
09                  document.write(i + "<br>");
10                  i++;
11               }
12            -->
13         </script>
14      </head>
15      <body>
16      </body>
17   </html>

【代码说明】 本例的执行过程如下所示:

(1)执行代码第6行的“var i = 0;”语句。

(2)执行代码第7行的while语句,判断“i<4”是否返回true,如果返回true,执行第(3)步骤,否则终止while语句。

(3)第9行输出变量i的值。

(4)第10行变量i自加1。

(5)重复第(2)步骤。

【运行效果】 以上代码为本书配套代码文件目录“代码\第04章\sample07.htm”里的内容,其运行结果如图4.5所示。

图4.5 sample07.htm的运行结果

4.4.2 do...while语句

do...while语句与while语句十分类似,也是一个循环语句,不同的是while语句是先判断逻辑表达式的值是否为true之后再决定是否执行循环体中的语句,而do...while语句是先执行循环体中的语句之后,再判断逻辑表达式是否为true,如果为true则重复执行循环体中的语句。do...while语句的语法代码如下所示:


do
 <语句块>
while (<逻辑表达式>);

【实例4.8】 有关do...while语句的使用方法请看以下代码,注意加粗的文字:


01   <html>
02      <head>
03         <title>do...while语句</title>
04         <script type="text/javascript">
05            <!--
06               var i = 0;
07               do
08               {
09                  document.write(i + "<br>");
10                  i++;
11               }
12               while (i<4);
13            -->
14         </script>
15      </head>
16      <body>
17      </body>
18   </html>

【代码说明】 本例的执行过程如下所示:

(1)执行第6行的“var i = 0;”语句。

(2)执行第7~11行的循环体语句。

(3)判断“i<4”是否返回true,如果返回true,执行第(2)步骤,否则终止do...while语句。

注意

在do...while语句中,while是整个do...while语句中的结束语句,因此,在while语句之后,应该加上分号(虽然省略分号也是可行的)。

【运行效果】 以上代码为本书配套代码文件目录“代码\第04章\sample08.htm”里的内容,其运行结果如图4.6所示。

图4.6 sample08.htm的运行结果

【实例4.9】 do...while语句与while语句的区别在于,do...while语句是先执行后判断,while语句是先判断后执行,因此,do...while语句有可能比while语句要多执行一次循环体中的语句。请看以下代码,注意加粗的文字:


01   <html>
02      <head>
03         <title>do...while语句与while语句的比较</title>
04         <script type="text/javascript">
05            <!--
06               var i = 4;
07               do
08               {
09                  document.write("i = " + i + "<br>");
10                  i--;
11               }
12               while (i>10);
13               
14               var j = 4;
15               while (j>10)
16               {
17                  document.write("i = " + j + "<br>");
18                  j--;
19               }
20            -->
21         </script>
22      </head>
23      <body>
24      </body>
25   </html>

【代码说明】 在本例中,在while语句与do...while语句的逻辑表达式的返回值都为false,但是do...while语句却执行了一次循环体中的语句,而while语句没有执行。这也是do...while语句与while语句的区别所在。

注意

无论是while语句还是do...while语句,在其循环体中必须要有能改变逻辑表达式结果的语句,否则就有可能会产生死循环。

【运行效果】 以上代码为本书配套代码文件目录“代码\第04章\sample09.htm”里的内容,其运行结果如图4.7所示。

图4.7 sample09.htm的运行结果

4.4.3 for语句

for语句也是一种常用的循环语句,这种循环语句使用起来比while语句更为方便,因为for语句提供的是一种常用的循环模式,即初始化变量、判断逻辑表达式和改变变量值,这3个关键操作都可以在for语句中被明确定义。for语句的语法代码如下所示:


for (初始化变量 ; 逻辑表达式 ; 改变变量表达式)
 <语句块>

从以上代码中可以看出,for语句中包括以下3个表达式。

■初始化变量表达式:该表达式的作用是为循环体所循环的次数设置初始值。相当于sample07.htm中的“var i = 0;”语句,当然,这个初始值不一定要为0,也可以是其他数值。初始值视程序需要而定。

■逻辑表达式:该表达式的作用是判断是否执行循环体,与while语句中的逻辑表达式作用一致。

■改变变量表达式:该表达式的作用是用来改变初始化变量的值,从而控制循环的次数,相当于sample07.htm中的“i++;”语句。

【实例4.10】 有关for语句的使用方法请看以下代码,注意加粗的文字:


01   <html>
02      <head>
03         <title>for语句</title>
04         <script type="text/javascript">
05            <!--
06               for (var i=0;i<4;i++)
07               {
08                  document.write(i + "<br>");
09               }
10            -->
11         </script>
12      </head>
13      <body>
14      </body>
15   </html>

【代码说明】 本例的执行过程如下所示:

(1)执行第6行的“var i=0;”初始化变量。

(2)判断“i<4”是否返回true,如果返回true,则执行第(3)步。如果返回false,则结束for语句。

(3)执行第6行的“i++”语句。

(4)执行循环体中的语句。

(5)重复执行第(2)步。

【运行效果】 以上代码为本书配套代码文件目录“代码\第04章\sample10.htm”里的内容,其运行结果如图4.8所示。

图4.8 sample10.htm的运行结果

【实例4.11】 在for语句中使用第3章中所介绍过的逗号表达式,可以在初始化变量表达式和改变变量表达式中定义多个变量和改变多个变量的值。请看以下代码,注意加粗的文字:


01   <html>
02      <head>
03         <title>for语句</title>
04         <script type="text/javascript">
05            <!--
06               for (var i=0,j=10,k=2;i<4;i++,j--)
07               {
08                  document.write("i = " + i + "<br>");
09                  document.write("j = " + j + "<br>");
10                  document.write("k = " + k + "<br><br>");
11               }
12            -->
13         </script>
14      </head>
15      <body>
16      </body>
17   </html>

【代码说明】 本例的执行过程如下所示:

(1)执行第6行的“var i=0, j=10, k=2;”初始化了变量i、变量j和变量k。

(2)判断“i<4”是否返回true,如果返回true,则执行第(3)步。如果返回false,则结束for语句。

(3)执行循环体中的代码第8~10行。即输出变量i、变量j和变量k的值。

(4)执行“i++”和“j--”语句。

(5)重复执行第(2)步。

【运行效果】 以上代码为本书配套代码文件目录“代码\第04章\sample11.htm”里的内容,其运行结果如图4.9所示。

图4.9 sample11.htm的运行结果

4.4.4 for...in语句

for...in语句提供的是一种与前面提到的循环语句都不同的另一种循环语句,这种循环语句可以遍历对象中的所有属性或数组中的所有元素。也常用来为对象的所有属性赋值。for...in语句的语法代码如下所示:


for (变量 in 对象)
 <语句块>

【实例4.12】 有关for...in语句的用法请看以下代码,注意加粗的文字:


01   <html>
02      <head>
03         <title>for...in语句</title>
04         <script type="text/javascript">
05            <!--
06               var myObject = {a:100,b:200,c:300}
07               for (var i in myObject)
08               {
09                  document.write("变量名为:"+ i+",变量值为:"+myObject[i] 
10                     + "<br>");
11               }
12            -->
13         </script>
14      </head>
15      <body>
16      </body>
17   </html>

【代码说明】 在本例中定义一个名为myObject的对象,该对象有三个属性,分别为a、b、c,这三个属性的值为分别为100、200、300。然后通过for...in语句遍历myObject对象的所有属性,此时,变量i的值,就是对象的属性名称。在循环体内可以使用[ ]运算符来得到对象属性的值。

【运行效果】 以上代码为本书配套代码文件目录“代码\第04章\sample12.htm”里的内容,其运行结果如图4.10所示。

图4.10 sample12.htm的运行结果

注意

(1)for...in语句不能指定对象的属性次序,因此,不同的JavaScript版本中实现该语句的结果可能有所不同。

(2)for...in语句可以遍历所有对象的所有可能的属性,但许多内部属性与所有内部方法是不可枚举的。

4.5 跳转语句

在循环语句的循环体中,JavaScript允许在满足一定条件的情况下,直接跳出循环语句。或在满足一定条件的情况下开始一个新的循环,这种操作就需要用到跳转语句。JavaScript中的跳转语句包括break语句与continue语句两种。

4.5.1 break语句

break语句的作用是跳出循环或结束switch语句,其语法代码如下所示:


break;

【实例4.13】 有关break语句的使用方法请看以下代码,注意加粗的文字:


01   <html>
02      <head>
03         <title>break语句</title>
04         <script type="text/javascript">
05            <!--
06               for (var i=0,j=10,k=2;i<4;i++,j--,k++)
07               {
08                  document.write("i = " + i + "<br>");
09                  document.write("j = " + j + "<br>");
10                  document.write("k = " + k + "<br><br>");
11                  if (k==3)
12                  {
13                     break;
14                  }
15               }
16            -->
17         </script>
18      </head>
19      <body>
20      </body>
21   </html>

【代码说明】 在本例中,for循环只进行了两次,就终止了。本例的执行过程如下所示:

(1)执行第6行的“var i=0, j=10, k=2;”初始化变量i、变量j和变量k。

(2)判断“i<4”是否返回true。此时变量i等于0,因此返回true,进入for循环。

(3)输出变量i、变量j和变量k的值。

(4)判断“k==3”是否返回true。此时变量k等于2,返回false,因此没有执行break语句。

(5)执行“i++, j--, k++”语句。

(6)再次判断“i<4”是否返回true。此时变量i等于1,因此返回true,再次进入for循环。

(7)输出变量i、变量j和变量k的值。

(8)判断“k==3”是否返回true。此时变量k等于3,返回true,此时执行break语句,跳出整个for循环。因此,本例中的循环体只执行了两次。

【运行效果】 以上代码为本书配套代码文件目录“代码\第04章\sample13.htm”里的内容,其运行结果如图4.11所示。

图4.11 sample13.htm的运行结果

【实例4.14】 在JavaScript中,循环语句也是可以嵌套的,在嵌套的循环语句中,break语句只能跳出离该语句最近一层的循环语句,而不是所有循环语句。请看以下代码,注意加粗的文字:


01   <html>
02      <head>
03         <title>break语句</title>
04         <script type="text/javascript">
05            <!--
06               var i = 0;
07               while (i<4)
08               {
09                  document.write("i = " + i + "<br>");
10                  for (var j=0;j<4;j++)
11                  {
12                     document.write("j = " + j + "<br>");
13                     if (j==1)
14                     {
15                        break;
16                     }
17                  }
18                  document.write("<br>");
19                  i++;
20               }
21            -->
22         </script>
23      </head>
24      <body>
25      </body>
26   </html>

【代码说明】 在本例中可以看出,while循环语句一共执行了4次,而for语句在每次while语句的循环里只执行了2次,这是因为for语句在执行2次时,break语句就跳出了for循环,而不是while循环。

【运行效果】 以上代码为本书配套代码文件目录“代码\第04章\sample14.htm”里的内容,其运行结果如图4.12所示。

图4.12 sample14.htm的运行结果

事实上,JavaScript也可以让break语句跳出到一个指定的循环之外,此时要使用到标签语句,有关标签语句在后续章节里还会详细介绍。跳出到指定循环外的break语句的语法代码如下所示:


break 标签;

【实例4.15】 有关跳出到指定循环外的break语句的使用方法请看以下代码,注意加粗的文字:


01   <html>
02      <head>
03         <title>break语句</title>
04         <script type="text/javascript">
05            <!--
06               document.write("准备开始循环<br>");
07               outloop:
08               for (var i=0;i<4;i++)
09               {
10                  document.write("i = " + i + "<br>");
11                  for (var j=0;j<4;j++)
12                  {
13                     document.write("j = " + j + "<br>");
14                     if (j==1)
15                     {
16                        break outloop;
17                     }
18                  }
19                  document.write("<br>");
20               }
21               document.write("准备结束循环<br>");
22            -->
23         </script>
24      </head>
25      <body>
26      </body>
27   </html>

【代码说明】 在本例中可以看出,第一个for语句的循环体只执行了一次,而第二个for语句的循环体也只执行了两次。这是因为在第二个for语句中的break语句直接跳出了标签名为outloop的第一个for语句。

【运行效果】 以上代码为本书配套代码文件目录“代码\第04章\sample15.htm”里的内容,其运行结果如图4.13所示。

图4.13 sample15.htm的运行结果

4.5.2 continue语句

continue语句与break语句类似,也可以跳出一次循环。但与break语句不同的是,continue语句只会跳出一次循环,进入下一次循环,而break语句跳出循环之后结束了整个循环。continue语句的语法代码如下所示:


continue;

【实例4.16】 有关continue语句的使用方法如下所示,注意加粗的文字:


01   <html>
02      <head>
03         <title>continue语句</title>
04         <script type="text/javascript">
05            <!--
06               for (var i=0,j=10;i<3;i++,j--)
07               {
08                  document.write("i = " + i + "<br>");
09                  if (j==9)
10                  {
11                     document.write("<br>");
12                     continue;
13                  }
14                  document.write("j = " + j + "<br><br>");
15               }
16            -->
17         </script>
18      </head>
19      <body>
20      </body>
21   </html>

【代码说明】 在本例中,for循环只进行了两次就终止了。本例的执行过程如下所示:

(1)执行“var i=0, j=10”,初始化变量i和变量j的值。

(2)判断“i<3”是否返回true,此时变量i等于0,返回true,开始进入循环体。

(3)输出变量i的值。

(4)判断变量j是否等于9,此时变量j的值为10,返回false,跳过if语句中的语句块。

(5)输出变量j的值。

(6)变量i自加1,变量j自减1。此时变量i的值为1,变量j的值为9。

(7)第二次判断“i<3”是否返回true,此时变量i等于1,返回true,开始进入循环体。

(8)输出变量i的值。

(9)判断“j==9”是否返回ture,此时变量j等于9,返回true,执行if语句中的语句块。

(10)输出一个换行,并执行continue语句,跳出本次循环,开始下一次循环。

(11)变量i自加1,变量j自减1。此时变量i的值为2,变量j的值为8。

(12)判断“i<3”是否返回true,此时变量i等于2,返回true,开始进入循环体。

(13)输出变量i的值。

(14)判断变量j是否等于9,此时变量j的值为8,返回false,跳过if语句中的语句块。

(15)输出变量j的值。

(16)变量i自加1,变量j自减1。此时变量i的值为3,变量j的值为7。

(17)判断“i<3”是否返回true,此时变量i等于3,返回false,结束整个for循环。

在本例中可以看出,一旦执行了continue语句,在continue语句之后的所有语句就不再执行,并开始下一次循环。

continue语句可以用在所有循环语句中,但是不同的循环语句的处理方法有所不同。4种不同的循环语句的处理方式如下所示:

■在for语句中,结束当次循环后,执行改变变量表达式,再根据逻辑表达式返回的结果判断是否进入下一次循环。

■在while语句中,结束当次循环后,JavaScript会根据逻辑表达式返回的结果来判断是否进入下一次循环。

■在do...while语句中,结束当次循环后,JavaScript会跳至do...while语句的底部,根据逻辑表达式返回的结果来判断是否进入下一次循环。

■在for...in语句中,结束当次循环后,JavaScript会将下一个属性名赋值给变量,开始下一次循环。

与break语句一样,在嵌套的循环语句中,continue只能跳出离该语句最近一层的循环语句,如果要跳出指定的循环语句,可以使用以下语句:


continue 标签;

由于该语句的使用方法和break语句十分相似,在此就不再赘述了。

【运行效果】 以上代码为本书配套代码文件目录“代码\第04章\sample16.htm”里的内容,其运行结果如图4.14所示。

图4.14 sample16.htm的运行结果

4.6 异常处理语句

在JavaScript中,可以对产生的异常进行处理。所谓异常是指在程序中产生了某些异常情况或错误。处理这些异常情况或错误所使用的语句,就是异常处理语句。在JavaScript中的异常处理语句包括throw语句与try...catch...finally语句两种。

4.6.1 throw语句

throw(抛出)语句的作用是抛出一个异常。所谓的抛出异常,就是用信号通知发生了异常情况或错误。throw语句的语法代码如下所示:


throw 表达式

以上代码中的表达式,可以是任何类型的表达式。该表达式通常是一个Error对象或Error对象的某个实例。

【实例4.17】 有关throw语句的使用方法请看以下代码,注意加粗的文字:


01   <html>
02      <head>
03         <title>throw语句</title>
04         <script type="text/javascript">
05            <!--
06               function myFun(x,y)
07               {
08                  if (y==0)
09                  {
10                     throw new Error("除数不能为0");
11                  }
12                  return x/y;
13               }
14               myFun(1,0);
15            -->
16         </script>
17      </head>
18      <body>
19      </body>
20   </html>

【代码说明】 在本例中,第6行定义了一个名为“myFun”的函数,该函数的作用是返回两个参数相除后的结果。由于除数不能为0,所以在函数体中,如果检测到除数为0,就用throw语句抛出异常。

【运行效果】 以上代码为本书配套代码文件目录“代码\第04章\sample17.htm”里的内容。运行结果如图4.15所示。

图4.15 sample17.htm的运行结果

4.6.2 try...catch...finally语句

try...catch...finally语句是JavaScript中的用于处理异常的语句,该语句与throw语句不同。throw语句只是抛出一个异常,但对该异常并不进行处理,而try...catch...finally语句可以处理所抛出的异常。try...catch...finally语句的语法代码如下所示:


try
 <语句块1>
catch(e)
 <语句块2>
finally
 <语句块3>

以上代码的解释如下:

■<语句块1>是有可能要抛出异常的语句块。

■catch(e)中的e,是一个变量,该变量为从try语句块中抛出的Error对象或其他值。

■<语句块2>是处理异常的语句块。如果在<语句块1>中没有抛出异常,则不执行该语句块中的语句。

■无论在<语句块1>中是否抛出异常,JavaScript都会执行<语句块3>中的语句。<语句块3>中的语句与finally关键字可以一起省略。

【实例4.18】 有关try...catch...finally语句的使用方法请看以下代码,注意加粗的文字:


01   <html>
02      <head>
03         <title>try...catch...finally语句</title>
04         <script type="text/javascript">
05            <!--
06               function myFun()
07               {
08                  try
09                  {
10                     document.write("函数开始执行<br>");
11                     //调用了一个不存在的函数
12                     alerta("这是一个错误的函数名");
13                     document.write("函数正在执行");
14                  }
15                  catch(ex)
16                  {
17                     document.write(ex.message + "<br>");
18                  }
19                  finally
20                  {
21                     document.write("函数执行完毕");
22                  }
23               }
24               myFun();
25            -->         
26         </script>
27      </head>
28      <body>
29      </body>
30   </html>

【代码说明】 在本例中,代码6~23行定义了一个名为“myFun”的函数,然后调用该函数,该函数的运行过程如下所示:

(1)执行try后的语句块。

(2)执行“document.write("函数开始执行<br>");”语句,输出一行文字,如图4.16中的第一行文字。

(3)调用了一个不存在的函数“alerta()”,此时抛出异常。

(4)忽略try语句块中的产生异常之后的所有语句,本例中忽略了“document.write ("函数正在执行");”,因此在图4.16中并没有输出该文字。

(5)JavaScript用catch语句捕捉到抛出的异常,并赋值给变量ex。

(6)执行“document.write(ex.description + "<br>");”语句。

(7)执行“document.write("函数执行完毕");”。

【运行效果】 以上代码为本书配套代码文件目录“代码\第04章\sample18.htm”里的内容,其运行结果如图4.16所示。

图4.16 sample18.htm的运行结果

4.6.3 异常处理语句的综合应用

try...catch...finally语句不仅可以接收到JavaScript抛出的异常,还可以接收到throw语句所抛出的异常。因此可以通过try...catch...finally语句与throw语句相结合来达到处理异常的目的。

【实例4.19】 请看以下代码,注意加粗的文字:


01   <html>
02      <head>
03         <title>异常处理语句的综合应用</title>
04         <script type="text/javascript">
05            <!--
06               function myFun(x,y)
07               {
08                  var z;
09                  try
10                  {
11                     if (y==0)
12                     {
13                        throw new Error("除数不能为0");
14                     }
15                     z = x/y;
16                  }
17                  catch(ex)
18                  {
19                     z = ex.message;
20                  }
21                  return z;
22               }
23               document.write(myFun(1,0));
24            -->
25         </script>
26      </head>
27      <body>
28      </body>
29   </html>

【代码说明】 在本例中,创建了一个名为“myFun”的函数,该函数的作用是将两个参数相除,并返回结果,如果在相除时产生异常,则返回错误信息。在本例中,catch语句可以接收到由throw语句抛出的异常,并进行处理。此时,在IE浏览器的左下角不会再出现错误信息。

【运行效果】 以上代码为本书配套代码文件目录“代码\第04章\sample19.htm”里的内容,其运行结果如图4.17所示。

图4.17 sample19.htm的运行结果

4.7 其他语句

在JavaScript中除了选择语句、循环语句、跳转语句和异常处理语句之外,还存在一些其他语句,而这些语句都是在JavaScript中必不可少的语句,请看以下的介绍。

4.7.1 标签语句

标签语句在前面的章节里已经有所接触,如break语句和continue语句想要跳出到特定的循环之外时,就必须使用标签语句。在switch语句中的case语句和default语句,这些都是特殊的标签语句。其实,在JavaScript中,任何语句之前都可以加上一个标签,标签语句的作用仅仅是标记该语句,标签语句的语法代码如下所示:


标识符 : 语句

其中,标识符必须是在JavaScript中合法的标识符,不能是保留字。给一个语句加上标签,就相当于为该语句起了一个名字,这样,就可以在程序中的任何一个地方通过这个名字来引用该语句。有关标签语句的使用请查看本书配套代码文件目录“代码\第04章\sample15.htm”里的内容,在此就不再赘述了。

4.7.2 var语句

var语句在前面的章节里也曾经介绍过,该语句可以用来定义一个或多个变量,其语法代码如下所示:


var 变量名
var 变量名 = 变量值
var 变量名1, 变量名2, 变量名3 …
var 变量名1 = 变量值1, 变量名2 = 变量值2, 变量名3 = 变量值3 …

var语句的使用方法在前面章节里曾经多次出现过,在此就不再赘述了。在使用var语句时,有以下几点是需要注意的:

■使用var语句定义变量时,可以在定义变量的同时为变量赋值,也可以不赋值,如果不赋值,变量的初始值为undefined。

■由var语句定义的变量不能使用delete运算符来删除。

■在函数体内使用var定义的变量只能在该函数体内使用。而在函数体外使用var定义的变量可以在函数体内和函数体外使用。

4.7.3 function语句

function语句的作用是定义一个函数,其语法代码如下所示:


function 函数名(参数1,参数2…)
{
 <语句块>
}

在以上代码中,需要注意的是:

■函数名必须是一个合法的标识符,不能是保留字,也不能是表达式。

■函数可以有一个或多个参数,也可以没有参数。如果有多个参数的话,参数与参数之间必须用逗号隔开。

■无论函数是否有参数,函数名后面的括号不能省略。

■<语句块>中的语句可以是一条或多条,也可以一条也没有。但无论<语句块>中的语句有多少条语句,外面的大括号都不能被省略。

■<语句块>又称为函数体,这些语句在函数定义时是不会被执行的,只有在函数被调用的时候才会被执行。

■function语句是一个独立的语句,只能被嵌套在其他函数定义语句中,但不能出现在选择语句、循环语句或其他任何语句当中。

【实例4.20】 有关function语句的使用方法请看以下代码,注意加粗的文字:


01   <html>
02      <head>
03         <title>function语句</title>
04         <script type="text/javascript">
05            <!--
06               //定义一个没有参数的函数
07               function myFun1()
08               {
09                  document.write("这是一个没有参数的函数<br><br>");
10               }
11               //定义一个包含一个参数的函数
12               function myFun2(x)
13               {
14                  document.write("这是一个包含三个参数的函数<br>");
15                  document.write("传递过来的参数值为:" + x + "<br><br>");
16               }
17               //定义一个包含3个参数的函数
18               function myFun3(x,y,z)
19               {
20                  document.write("这是一个包含三个参数的函数<br>");
21                  document.write("传递过来的参数值分别为:<br>");
22                  document.write("x = " + x + "<br>");
23                  document.write("y = " + y + "<br>");
24                  document.write("z = " + z + "<br>");
25               }
26               //调用第一个函数
27               myFun1();
28               //调用第二个函数
29               myFun2(1);
30               //调用第三个函数
31               myFun3(1,2, "您好!");
32            -->
33         </script>
34      </head>
35      <body>
36      </body>
37   </html>

【代码说明】 在本例中定义了3个函数,这3个函数分别为第7~10行的没有参数的函数、第12~16行的有一个参数的函数和第18~25行的有多个参数的函数。在定义函数时,JavaScript并没有执行其中代码,只能在通过“myFun1();”、“myFun2(1);”和“myFun3(1,2, "您好!");”语句调用函数之后才会被执行。

【运行效果】 以上代码为本书配套代码文件目录“代码\第04章\sample20.htm”里的内容,其运行结果如图4.18所示。

图4.18 sample20.htm的运行结果

提示

函数可以一次定义,多次调用,因此,使用函数可以让某段代码被重复执行,减少代码输入,也可以让程序设计更具有模块性。

4.7.4 return语句

return语句只能出现在function语句的函数体中,用于指定函数的返回值。return语句的语法代码如下所示:


return 表达式;

在以上代码中,如果JavaScript执行到return语句,就会先计算表达式的值,然后将该表达式的值当成函数的值返回给调用函数的语句。当一个函数里出现了return语句,该函数就可以像表达式一样,返回一个值。

【实例4.21】 有关return语句的使用方法请看以下代码,注意加粗的文字:


01   <html>
02      <head>
03         <title>return语句</title>
04         <script type="text/javascript">
05            <!--
06               function mySum(x,y)
07               {
08                  var z = x + y;
09                  return z;
10                  document.write("测试一下。");
11               }
12               
13               var a = 1;
14               var b = 2;
15               var c = mySum(a,b);
16               document.write("a + b = " + c);
17            -->
18         </script>
19      </head>
20      <body>
21      </body>
22   </html>

【代码说明】 在本例中定义了名为“mySum”的函数,该函数的作用是将两个参数相加,并返回其和。“var c = mySum(a,b);”语句的作用是调用mySum()函数,并且将函数的返回值赋给变量c。在本例的最后,输出了变量c的值。

注意

在本例中,return语句之后还有一个输出语句“document.write ("测试一下。");”,该语句并没有被执行,这是因为JavaScript只要遇到return语句就会将return语句后的表达式的值返回给调用函数的语句,而在该函数中的return语句之后的所有语句都会被忽略。因此,return语句通常是放在函数体的最后一行。

【运行效果】 以上代码为本书配套代码文件目录“代码\第04章\sample21.htm”里的内容,其运行结果如图4.19所示。

图4.19 sample21.htm的运行结果

注意

return语句后面的表达式也可以被省略。此时JavaScript会直接终止函数的执行,不返回任何数据。

4.7.5 with语句

JavaScript语言是面向对象的语言,因此,在对象的属性调用方面有可能会多次使用到对象属性存取运算符(.)。如果使用with语句,就可以简化对象属性调用的层次。with语句的语法代码如下所示:


with (对象)
  <语句块>

【实例4.22】 有关with语句的使用方法请看以下代码,注意加粗的文字:


01   <html>
02      <head>
03         <title>with语句</title>
04      </head>
05      <body>
06         <form name="myForm">
07            <input type="text" name="myText1"><br>
08            <input type="text" name="myText2"><br>
09            <input type="text" name="myText3">
10         </form>
11         <script type="text/javascript">
12            <!--
13               //没有使用with语句时的属性调用
14               document.forms[0].myText1.value = "第一个文本框";
15               //使用with语句时的属性调用
16               with(document.forms[0])
17               {
18                  myText2.value = "第二个文本框";
19                  myText3.value = "第三个文本框";
20               }
21            -->
22         </script>
23      </body>
24   </html>

【代码说明】 在本例中第7~9行创建了3个文本框,如果要改变文本框中的内容,则要使用以下语句:


document.forms[0].myText1.value = "第一个文本框";
document.forms[0].myText2.value = "第二个文本框";
document.forms[0].myText3.value = "第三个文本框";

该语句多次使用到了对象属性存取运算符。可以将以上语句中的相同部分放在with语句里,这可以减少代码的输入,如以下代码所示:


with(document.forms[0])
{
 myText2.value = "第二个文本框";
 myText3.value = "第三个文本框";
}

【运行效果】 以上代码为本书配套代码文件目录“代码\第04章\sample22.htm”里的内容,其运行结果如图4.20所示。

图4.20 sample22.htm的运行结果

【实例4.23】 虽然使用with语句可以减少大量的输入,但是with语句的执行速度并不会被优化,甚至会比使用JavaScript的等价代码的速度还要慢。因此,with语句是一个不推荐使用的语句。使用等价代码的方法同样可以减少代码的输入,sample22.htm也可以被改写成以下代码,注意加粗的文字:


01   <html>
02      <head>
03         <title>等价代码</title>
04      </head>
05      <body>
06         <form name="myForm">
07            <input type="text" name="myText1"><br>
08            <input type="text" name="myText2"><br>
09            <input type="text" name="myText3">
10         </form>
11         <script type="text/javascript">
12            <!--
13               //没有使用等价代码的语句
14               document.forms[0].myText1.value = "第一个文本框";
15               //使用等价代码的语句
16               var myCode = document.forms[0];
17               myCode.myText2.value = "第二个文本框";
18               myCode.myText3.value = "第三个文本框";
19            -->
20         </script>
21      </body>
22   </html>

【代码说明】 代码第16行首先创建一个对象myCode,其值为document.forms[0];,表示当前表单,然后代码第17~18行分别获取表单中名为myText2和myText3的标签中的值。

【运行效果】 以上代码为本书配套代码文件目录“代码\第04章\sample23.htm”里的内容,其运行结果与sample22.htm的运行结果完全相同。

4.7.6 空语句

空语句十分简单,就是一个分号,如下所示:


;

空语句不会产生任何作用,也不会有任何执行效果,甚至可以说是一个没有任何意义的语句。空语句常用来进行排版,或者是进行注释,甚至可以用来进行一个空循环。

【实例4.24】 请看以下代码,注意加粗的文字:


01   <html>
02      <head>
03         <title>空语句</title>
04         <script type="text/javascript">
05            <!--
06               var arr = new Array();
07               for (i=0;i<5;arr[i++]=1)
08                  ;
09               document.write(arr);
10            -->
11         </script>
12      </head>
13      <body>
14      </body>
15   </html>

【代码说明】 在本例中,代码第6行定义了一个名为arr的数组,通过for语句可以为数组中的元素赋值。在该for语句中,所使用的就是一个空语句。在本例中,将为数组元素赋值的语句写在了改变变量表达式中,因此for循环中就不需要再出现其他语句,使用空语句可以让for语句变得完整。如果只使用以下代码,在JavaScript中的语法是错误的,因为该语句没有循环体。


for (i=0;i<5;arr[i++]=1)

【运行效果】 以上代码为本书配套代码文件目录“代码\第04章\sample24.htm”里的内容,其运行结果如图4.21所示。

图4.21 sample24.htm的运行结果

4.7.7 comment语句

comment语句,即注释语句,这是JavaScript中常见到的语句之一,也是本章中介绍的最后一种语句。一个好的程序员,应该会使用适当的注释语句来提高程序的可读性与维护性。在JavaScript中的注释语句有以下两种:


// <单行注释文字>
/*
 <单行或多行注释文字>
*/

其中,第一种注释语句只能注释一行文字,而第二种注释语句可以注释单行或多行文字。由于注释语句比较简单,并且在第1章中就已经介绍过了,在此就不再赘述了。

4.8 小结

本章中主要介绍了JavaScript中的语句,JavaScript的所有功能都是通过语句来实现的。JavaScript中的语句可以简单地分为表达式语句、语句块、选择语句、循环语句、跳转语句、异常处理语句和其他语句几种。熟练掌握这些语句,是学习JavaScript必不可少的基础。在第5章中将会介绍JavaScript中的函数。

4.9 本章练习

1. 循环中止的命令是_______?

2. 简述for循环、while循环和do...while循环的区别。

3. throw语句的作用是_____?

A. 抛出异常

B. 捕获异常

C. 将代码转到指定的位置

D. 释放各种资源

4. 什么是标签语句?请写出两种以上的标签语句。 QEoZv+tC1G8b1io6V+H/UsZDgYTtuBjTjKYr/VlOIgbZPJOjsBVAuxCRTDK+jWdo

点击中间区域
呼出菜单
上一章
目录
下一章
×