码迷,mamicode.com
首页 > 编程语言 > 详细

轻松学习JavaScript七:JavaScript的流程控制语句

时间:2015-11-29 21:30:01      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:

        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 时执行其他代码

<!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>

       运行的结果为:

技术分享

       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>如果时间早于 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>

       运行的结果为:

技术分享

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

<!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关键字的使用

<!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>

      运行的结果为:

技术分享

      二循环结构

      循环可以将代码块执行指定的次数。

      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的流程控制语句

标签:

原文地址:http://blog.csdn.net/erlian1992/article/details/50098575

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!