第3次课 流程控制语句

知识点

(1) . 掌握警示、确认和提示3种消息对话框的使用;

(2) . 掌握条件分支语句的语法结构及使用方法，并具备使用条件分支语句解决实际问题的能力;

(3) . 掌握循环语句的语法结构及使用方法，并具备使用循环语句解决实际问题的能力.

一、 消息对话框

JavaScript程序中常用的消息对话框有警示对话框（alert）、确认对话框（confirm）和提示对话框（prompt）3种。

(一) 警示对话框

1. 描述

警示对话框的关键字是alert，因为它本质上是JavaScript内置函数，所以在应用时直接输入alert()即可。

2. 功能

alert()对话框的功能是直接在页面上以对话框的形式输出字符串或者输出变量的值。alert()对话框在输出时除显示输出的内容外，对话框中还有一个“确定”按钮，当单击这个“确定”按钮后，会关闭对话框。

3. 案例演示：警示对话框

需求

打开页面时显示一个欢迎对话框，对话框的内容为“欢迎张三来到宁波”

实现效果

<v:shapetype id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f"><v:stroke joinstyle="miter"><v:formulas></v:formulas><v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"></v:path></v:stroke></v:shapetype><v:shape id="图片_x0020_1" o:spid="_x0000_i1032" type="#_x0000_t75" style="width:188.25pt;height:49.5pt;visibility:visible;mso-wrap-style:square"><v:imagedata src="file:///C:/Users/lenovo/AppData/Local/Temp/msohtmlclip1/01/clip_image001.png" o:title=""></v:imagedata></v:shape>

核心代码

<script type="text/javascript">

var name="张三";

alert("欢迎"+name+"来到宁波！");

</script>

(二) 确认对话框

1. 描述

确认对话框的关键字是confirm,同alert()一样，是javascript的内置函数。

2. 功能

confirm()对话框跟alert()对话框功能十分相似，不同之处是confirm对话框有“确认”和“取消”两个按钮。并且在单击“确定”按钮后，会返回布尔值true，单击“取消”按钮，将返回布尔值false.

3. 案例演示：确认对话框

需求

询问用户“你是计算机专业的吗”，如果回答是，则打印“请到一号楼报到”，否则打印“请到二号楼报到”。

实现效果

<v:shape id="图片_x0020_2" o:spid="_x0000_i1031" type="#_x0000_t75" style="width:126pt;height:93pt;
visibility:visible;mso-wrap-style:square"><v:imagedata src="file:///C:/Users/lenovo/AppData/Local/Temp/msohtmlclip1/01/clip_image002.png" o:title=""></v:imagedata></v:shape><v:shape id="图片_x0020_3" o:spid="_x0000_i1030" type="#_x0000_t75" style="width:204.75pt;height:24pt;visibility:visible;mso-wrap-style:square"><v:imagedata src="file:///C:/Users/lenovo/AppData/Local/Temp/msohtmlclip1/01/clip_image003.png" o:title=""></v:imagedata></v:shape>

核心代码

<script type="text/javascript">

var floor,major;

major = confirm("你是计算机专业的吗？");

floor = major?"请到一号楼报到":"请到二号楼报到！";

document.write(floor);

</script>

(三) 提示对话框

1. 描述

提示对话框的关键字prompt，同alert()和confirm()一样，都是javascript的内置函数，在应用时，直接输入prompt()即可。

2. 功能

prompt()对话框不但提供带有“确定”、“取消”两个按钮，而且还提供一个用户可以用键盘输入的文本框，通过个文本框可以实现系统与用户的交互功能。

3. 案例演示

需求

根据提示，从键盘上输入一个人的名字，然后在页面输出“欢迎XXX进入学习JavaScript的大家庭！”。

实现效果

<v:shape id="图片_x0020_4" o:spid="_x0000_i1029" type="#_x0000_t75" style="width:194.25pt;height:51pt;
visibility:visible;mso-wrap-style:square"><v:imagedata src="file:///C:/Users/lenovo/AppData/Local/Temp/msohtmlclip1/01/clip_image004.png" o:title=""></v:imagedata></v:shape><v:shape id="图片_x0020_5" o:spid="_x0000_i1028" type="#_x0000_t75" style="width:171.75pt;height:18pt;visibility:visible;mso-wrap-style:square"><v:imagedata src="file:///C:/Users/lenovo/AppData/Local/Temp/msohtmlclip1/01/clip_image005.png" o:title=""></v:imagedata></v:shape>

核心代码

<script type="text/javascript">

var name;

name = prompt("你的名字:");

document.write("欢迎"+name+"进入学习JavaScript的大家庭");

</script>

4. 说明

prompt(“提示信息”,”输入框的默认信息”);

第一个参数值显示在对话框上，通常是一些提示信息；

第二个参数出现在用户输入的文本框中，且被选中，作为默认值。如果第二参数被省略，则提示对话框的输入文本中会出现“undefined”，也可以把第二个参数设置为空字符串，如下

prompt("你的名字:","");

二、 条件分支

与C#一样， JavaScript条件分支语句有二种，即if语句和switch

(一) if语句

1. 简单if语句

语法格式

if(条件表达式)

语句块；

2. if…else语句

语法格式

if(条件表达式)

语句块1；

else

语句块2;

3. else if语句

else if语句是else语句和if语句的组合，当if语句中指定的条件都不满足时，可以通过else if语句指定另一个条件。

语法格式

if(条件表达式)

语句块1；

else if(条件表达式2)

语句块2；

else if(条件表达式3)

语句块3；

……

else

语句块n；

4. 案例演示：判断两个数的最大值

需求

通过if…else语句判断给出的两个数大小，并在页面输出这两个数的最大值。

参考代码

var x = prompt("请输入第1个数","");

var y = prompt("请输入第2个数","");

var max;

if(x>y){

max = x;

}else{

max = y;

}

document.write("这二个数的最大值是:"+max);

(二) switch语句

1. 描述

switch语句是条件分支语句的另外一种形式，它主要是用来解决根据表达式的值不同而执行不同语句的问题。

2. 语法格式

switch(表达式)

case 值1：

语句块1； [break;]

case 值2：

语句块2； [break;]

……

case 值n：

语句块n； [break;]

default:

语句块n+1; [break;]

}

3. 案例演示：判断今天是星期几

需求

根据系统时间，来判断今天是星期几

核心代码

var date = new Date(); //系统内置对象

var week;

switch (date.getDate()){

case 1:

week = "星期一";

break;

……

default:

week = "星期日";

break;

}

document.write("今天是"+week);

三、 循环语句

(一) for循环

1. 描述

for循环语句是JavaScript常用的循环语句之一，在for循环语句中用一个变量作为计数器来指定循环的次数，这个变量我们把它称为循环变量。

2. 语法格式

for(循环初值表达式；循环条件表达式；循环变量更新表达式){

循环体语句；

}

(二) while循环

1. 描述

while循环语句是JavaScript常用的另外一种循环语句，在while循环语句中首先根据条件表达式判断是否符合循环条件，即循环条件表达式的值是否为true，如果是true，则执行循环体，否则退出循环。

2. 语法格式

while(循环条件表达式){

循环体语句；

}

(三) do…while循环

1. 描述

do…while循环语句和while循环语句相似，它们的主要区别是：while循环语句在执行循环体之前检查表达式的值，do…while循环语句则是在执行循环体之后检查表达式的值。

2. 语法格式

do{

循环体语句；

}while(循环条件表达式)

(四) 案例演示：输出“*”组成的直角三角形图案

1. 需求描述

输出三角形图案

<v:shape id="图片_x0020_6" o:spid="_x0000_i1027" type="#_x0000_t75" style="width:36pt;height:83.25pt;visibility:visible;mso-wrap-style:square"><v:imagedata src="file:///C:/Users/lenovo/AppData/Local/Temp/msohtmlclip1/01/clip_image006.png" o:title=""></v:imagedata></v:shape>

2. 参考代码

<script type="text/javascript">

var i,j;

for(i=1;i<=5;i++){

for(j=1;j<=i;j++){

document.write("*");

}

document.write("
");

}

</script>

四、 中断语句

(一) 描述

在JavaScript程序中，经常会用到break和continue语句，这两个语句在程序中起什么作用呢？下面分别来讲解一下。

break语句既可以用在条件分支（switch）语句中，也可以用在循环语句中。其作用是当程序执行到break语句时，会结束执行并跳出整个语句。

continue语句只能用在循环语句中，在循环语句中其作用是停止本次循环，即使后面还有未执行的语句也不再执行，重新执行下一次循环。

五、 课后作业

(一) 验证邮箱的有效性

1. 需求

使用prompt()方法输入邮箱地址，默认值为susan@sohu.com

正确的邮箱地址必须包含“@”和“.”,并且必须有邮箱名称

如果是正确的邮箱地址，则弹出邮箱的名称，否则给出相应的提示。

2. 效果图：

<v:shape id="图片_x0020_7" o:spid="_x0000_i1026" type="#_x0000_t75" style="width:373.5pt;height:98.25pt;visibility:visible;mso-wrap-style:square"><v:imagedata src="file:///C:/Users/lenovo/AppData/Local/Temp/msohtmlclip1/01/clip_image007.png" o:title=""></v:imagedata></v:shape>

<v:shape id="图片_x0020_8" o:spid="_x0000_i1025" type="#_x0000_t75" style="width:181.5pt;height:138.75pt;visibility:visible;mso-wrap-style:square"><v:imagedata src="file:///C:/Users/lenovo/AppData/Local/Temp/msohtmlclip1/01/clip_image008.png" o:title=""></v:imagedata></v:shape>