JavaScript的流程控制语句

JS的核心ECMAScript规定的流程控制语句和其他的程序设计语言还是蛮相似的。我们选择一些实用的例子来看
一下这些语句。顺序结构我们在这里就不再提到，直接说条件和循环以及其他语句。
一、条件选择结构
       条件选择语句用于基于不同的条件来执行不同的动作，通常在写代码时，总是需要为不同的决定来执行不同的
动作，可以在代码中使用条件语句来完成该任务。
 在JavaScript中，我们可使用以下条件语句：
if 语句：只有当指定条件为true时，使用该语句来执行代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS流程控制语句</title>
</head>

<body>

<p>如果时间早于 20:00，会获得问候 "Good day"。</p>

<button onclick="myFunction()">点击这里</button>

<p id="demo"></p>

<script type="text/javascript">
var time=new Date().getHours();
document.write("当前北京时间："+time);
function myFunction()
{
 var x="";
 if (time<20)
 {
  x="Good day";
 }
 document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

　　

运行的结果为：

if...else语句：当条件为true时执行代码，当条件为 false 时执行其他代码

?

运行的结果为：

 if...else if....else 语句：使用该语句来选择多个代码块之一来执行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS流程控制语句</title>
</head>

<body>

<p>如果时间早于 20:00，会获得问候 "Good day"。如果时间晚于 20:00，会获得问候 "Good evening"。</p>

<button onclick="myFunction()">点击这里</button>

<p id="demo"></p>

<script type="text/javascript">
var time=new Date().getHours();
document.write("当前北京时间："+time);
function myFunction()
{
var x="";
if (time<20)
 {
 x="Good day";
 }
else
 {
 x="Good evening";
 }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

　　

运行的结果为：

switch语句： 使用该语句来选择多个代码块之一来执行。switch 语句用于基于不同的条件来执行不同的动作

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS流程控制语句2</title> </head>    <body> <p>点击下面的按钮来显示今天是周几：</p>    <button onclick="myFunction()">点击这里</button>    <p id="demo"></p>    <script type="text/javascript"> var d=new Date().getDay(); document.write("今天的星期代表数字："+d); function myFunction() { var x;  switch (d)  {  case 0:  x="Today it's Sunday";  break;  case 1:  x="Today it's Monday";  break;  case 2:  x="Today it's Tuesday";  break;  case 3:  x="Today it's Wednesday";  break;  case 4:  x="Today it's Thursday";  break;  case 5:  x="Today it's Friday";  break;  case 6:  x="Today it's Saturday";  break;  }  document.getElementById("demo").innerHTML=x; } </script> </body> </html>

运行的结果：

 default关键字的使用

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS流程控制语句2</title> </head>    <body> <p>点击下面的按钮来显示今天是周几：</p>    <button onclick="myFunction()">点击这里</button>    <p id="demo"></p>    <script type="text/javascript"> var d=new Date().getDay(); document.write("今天的星期代表数字："+d); function myFunction() { var x;  switch (d)  {  case 6:  x="Today it's Saturday";  break;  case 0:  x="Today it's Sunday";  break;  default:  x="Looking forward to the Weekend";  }  document.getElementById("demo").innerHTML=x; } </script> </body> </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS流程控制语句</title>
</head>

<body>

<p>如果时间早于 10:00，会获得问候 "Good morning"。</p>
<p>如果时间早于 20:00，会获得问候 "Good day"。</p>
<p>如果时间晚于 20:00，会获得问候 "Good evening"。</p>

<button onclick="myFunction()">点击这里</button>

<p id="demo"></p>

<script type="text/javascript">
var time=new Date().getHours();
document.write("当前北京时间："+time);
function myFunction()
{
var x="";
if (time<10)
 {
 x="Good morning";
 }
else if (time<20)
 {
 x="Good day";
 }
else
 {
 x="Good evening";
 }
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

　　

运行的结果为：

二、循环结构
  循环可以将代码块执行指定的次数。
  JavaScript支持不同类型的循环：
(1)for语句：循环代码块一定的次数

for(var box=1;box<=10;box++)
{
 document.write("box="+box+"<br/>");
}

运行的结果为：

(2)for...in语句： 循环遍历对象的属性

var box={
 name:"张三",
 age:24,
 sex:"男"
 };
for(x in box)
{
 document.write(box[x]+"<br/>");
}

运行的结果为：

(3)while语句：当指定的条件为 true 时循环指定的代码块。先判断，再执行语句，这种比较实用。

var box=1;
while(box<=5)
{
 document.write("box="+box+"<br/>");
 box++;
}

运行的结果为：

 (4)do...while - 同样当指定的条件为 true 时循环指定的代码块。先执行一次，再判断

var box=1;
do{
 document.write("box="+box+"<br/>");
 box++;
}while(box<=10)

运行的结果为：

三、其他语句
(1)break语句：用于跳出循环。

for(var box=1;box<=10;box++)
 {
 if(box==5)
 {
 break;//强制退出整个循环
 }
 document.write("box="+box+"<br/>");
 }

运行的结果为：

执行到第四次循环时不再继续执行，跳出了真个循环,，输出的少了box=5以后的循环。
(2)continue语句：用于跳过循环中的一个迭代。

for(var box=1;box<=10;box++)
{
 if(box==5)
 {
 continue;//退出当前循环，还会继续执行后面的循环
 }
 document.write("box="+box+"<br/>");
}

执行到第四次循环时，跳出第五次循环，继续向下面执行，输出的少了box=5。
(3)with语句：将代码的作用域设置到一个特定的对象中
      先来看一般我们是怎么样输出对象的属性的值的：

var box={
 name:"张三",
 age:24,
 sex:"男"
 };
 var n=box.name;
 var a=box.age;
 var s=box.sex;
 document.write(n+"<br/>");
document.write(a+"<br/>");
document.write(s);

运行的结果为：

改用with语句来写：

var box={
 name:"张三",
 age:24,
 sex:"男"
 };
 with(box){
 var n=name;
 var a=age;
 var s=sex;
 };
document.write(n+"<br/>");
document.write(a+"<br/>");
document.write(s);

　　

运行的结果为：

从三大方面介绍了JavaScript的流程控制语句，希望大家仔细阅读，数量掌握JavaScript流程控制语句的使用方法。