程序控制结构及语句
编程就是将现实应用,转换为程序能够读得懂的语法语句。Javascript编程中对程序流程控制主要是通过条件判断语句、循环控制语句及continue、break来完成的,其中条件判断按预先设定的条件执行顺序,它包括if语句和switch语句;而循环控制语句则可以重复完成任务,它包括while语句、do...while语句及for语句。
一、条件判断语句:
条件判断语句就是对语句中不同条件的值进行判断,进而根据不同条件执行不同的语句。条件判断语句有“if条件语句”和“switch多分支语句”。
(1)、if条件语句
是条件选择语句,语法格式:
if (条件语句表达式) { 只有当条件语句表达式为 true 时执行的代码 }
例子1: var y; y=80; if(y>120) //表达式为false alert("执行语句1信息");//if结构只能控制它下面一条语句 alert("执行语句2"); //因y>120表达式为false,故执行此语句 注意:只弹出 ”语句2“ ,而 ”此只执行语句1信息“ 不会弹出 例子2: var y; y=80; if(y>120){ //if控制{}所有语句 alert("语句1"); alert("语句2"); } 注意:两条都不执行,因为y>120为false 注意:所有结构都是如此,默认只能控制结构下方一条语句,想控制多条必须加在大括号{}中
案例:
<!doctype html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <meta name="keywords" content="javascript的程序控制结构与语句,javascript入门"> <meta name="description" content="老罗江湖"> <title> if语句的使用 </title> </head> <body> <p>如果时间早于21:00,会获得问候“very Good”。</p> <button onclick="myFunction()">单击这里</button> <p id="demo"></p> <script type="text/javascript"> function myFunction() { var x=""; var time=new Date().getHours(); //获取系统日期、获取此时此刻“时针数” if (time<22) //22代表“时间”填写时,注意根据时间而定。 { x="very Good"; } document.getElementById("demo").innerHTML=x; } </script> <p>请注意,上面在if语句中,没有 ..else..。您已经告诉浏览器只有在指定条件为 true 时才执行代码。</p> </body> </html>
效果图:
(注意:请使用小写的 if,使用大写字母(IF)会生成 JavaScript 错误!请注意,上面在if语句中,没有 ..else..。您已经告诉浏览器只有在指定条件为 true 时才执行代码。)
2、if...else 语句 :
用于需要用两个程序分支来执行的情况。 If...else语法:
If(条件表达式) { 当条件表达式为true时执行的语句段 } else{ 当条件表达式不为true时执行的语句段 }
//当条件为 true 时执行if后面的从句,当条件为 false 时执行else后面部分的从句。
案例:
<script type="text/javascript"> var y="Beautiful Girl"; if(y!="Beautiful Girl") { document.write(‘<h3 style="text-algin:center;color:pink;">欢迎素颜美女光临</h3>‘); } else{ document.write(‘<p style="font-size:30px;color:red;">先天问题请化妆再来</p>‘); }</script>
效果图:对变量y的值进行判断,如果y值不等于Beautiful Girl,则输出粉红色字符;否则输出红色字符。
3、If...else if...else语句
使用 if....else if...else语句来选择多个代码块之一来执行。语法格式:
if(条件1) { 当条件1为true是执行的代码 } else if(条件2) { 当条件2为true时执行的代码 } else{ 当条件1和条件2都不为true是执行的代码 }
案例:
<title> if...else if...else语句的使用 </title> </head> <body> <p>如果时间早于21:00,会获得问候“very Good”。</p> <button onclick="myFunction()">单击这里</button> <p id="demo"></p> <script type="text/javascript"> function myFunction() { var d = new Date(); //获取系统日期 var time=d.getHours(); //获取此时此刻“时针数” if (time<10) { document.write(‘Good morning‘); } else if (time<18) { document.write(‘Good afternoon‘); } else { document.write(‘Good evening‘); } } </script> </body>
效果图:如果时间小于 10:00,则将发送问候 "Good morning",否则如果时间小于 18:00,则发送问候 "Good afternoon",否则发送问候 "Good evening",因此时是晚上九点钟,所以输出的结构为下图:
4、if语句的嵌套
If语句可以嵌套使用。当使用if语句的嵌套应用时,最好使用“{ }”来确定相互的层次关系,由于大括号“{ }”使用的位置不同,可能导致程序代码的含义完全不同,从而输出不同的结果。
案例:
<title> if语句的嵌套 </title> </head> <body> <script type="text/javascript"> var x=20;y=x; //x、y值都为20 if(x<1) //x为20,不满足此条件,故其下面的代码不会执行 { if(y==5) alert("x<1&&y==5"); else alert("x<1&&y!==5"); } else if(x>15) //x满足条件,继续执行下面的语句 { if(y==5) //y为20,不满足此条件,故其下面的代码不会执行(已满足的不会被执行) alert("x>15&&y==5"); else //y满足条件,继续执行下面的语句 alert("x>15&&y!==5") //这里是程序输出的结果 } </script> </body>
效果图:
5、switch语句
switch选择语句用于将一个表达式的结果同多个值进行比较,并根据比较结果选择执行语句。语法:
Switch(表达式) { aase取值1: 语句块1;break case取值2: 语句块2;break; ... case取值n: 语句块n;break; Default: 语句块n+1; }
switch语句只是相当于定义一个标记位置,程序根据switch条件表达式的结果,直接跳转第一个匹配的标记位置处,开始顺序执行后面的所有程序代码,包括后面的其他case语句下的代码,直到碰到break语句或函数返回语句为止。Default语句是可选的,它匹配上面所有的case语句定义的值以外的其他值,也就是前面所有取值都不满足时,就执行default后面的语句块。
案例:
<script type="text/javascript"> var now=new Date(); var day=now.getDay(); var week; switch (day){ case 1: week="Monday"; break; case 2: week="Tuesday"; break; case 3: week="Wednesday"; break; case 4: week="Thursday"; break; case 5: week="Friday"; break; case 6: week="Saturday"; break; default: week="Sunday"; break; } document.write("今天是"+week); //输出今天是星期几 </script>
效果图:
总结:
结合上面介绍的内容:If语句是常用语句,switch语句是效率高语句,对于判断条件较小的可以使用if语句,但是在现实一下条件判断中,就应该使用switch语句。
/*以上的内容部分来自“javascript从零开始学”、“W3School离线手册简体中文版”和个人学习笔记,此文最终解释权归本人所有!*/