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">
<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">
<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流程控制语句的使用方法。

JavaScript的流程控制语句的更多相关文章

  1. javaScript的流程控制语句学习笔记

    JavaScript提供了5种流程控制语句,if条件判断语句,switch语句,for循环语句,while循环语句,do-while循环语句. 1.条件判读语句 对变量或表达式进行判定,并根据判定结果 ...

  2. JavaScript语句-流程控制语句

    JavaScript定义了一组语句,语句通常用于执行一定的任务.语句可以很简单,也可以很复杂. 选择结构,可以在程序中创建交叉结构来指定程序流的可能方向.JavaScript中有四种选择结构: 1.单 ...

  3. JavaScript语法-流程控制语句

    一.JavaScript特殊语法 JS特殊语法: 1. 语句以;结尾,如果一行只有一条语句则 ;可以省略 (不建议) 2. 变量的定义使用var关键字,也可以不使用 * 用: 定义的变量是局部变量 * ...

  4. javaScript(6)---流程控制语句

    学习要点: 1.语句的定义 2.if 语句 3.switch语句 4.do...while语句 5.while语句 6.for语句 7.for...in语句 8.break和continue语句 9. ...

  5. JavaScript的流程控制语句以及函数

    一.流程控制 1. 作用:控制代码的执行顺序 2. 分类 2.1顺序结构:从上到下依次执行代码语句 2.2选择结构: 1. if语句 简单if结构 if(条件表达式){ 表达式成立时执行的代码段 } ...

  6. 二、JavaScript语言--JS基础--JavaScript进阶篇--流程控制语句

    1.if语句--做判断 if语句是基于条件成立才执行相应代码时使用的语句. 语法: if(条件) { 条件成立时执行代码} 注意:if小写,大写字母(IF)会出错! 假设你应聘web前端技术开发岗位, ...

  7. 2014年辛星完全解读Javascript第四节 流程控制语句

    上一节我们介绍了函数,本小节我们介绍一下流程控制语句,对于任何一门编程语言来说,流程控制都是非常重要的,也就是我们常说的顺序结构.选择结构和循环结构. ************选择结构******** ...

  8. 2014年辛星Javascript解读第四节 流程控制语句

    上一节我们介绍了函数,本小节我们介绍一下流程控制语句,对于不论什么一门编程语言来说,流程控制都是很重要的,也就是我们常说的顺序结构.选择结构和循环结构. ************选择结构******* ...

  9. 第一百零一节，JavaScript流程控制语句

    JavaScript流程控制语句 学习要点: 1.语句的定义 2.if 语句 3.switch语句 4.do...while语句 5.while语句 6.for语句 7.for...in语句 8.br ...

随机推荐

  1. spring: 创建环绕通知

    package ch2.test; public interface Performance { void perform(); } package ch2.test; import org.aspe ...

  2. asp.net 基础知识

    1. DropDownList 的赋值 Response.Write(DropDownList1.Items.FindByText("潍坊").Value); Response.W ...

  3. 第一个DirectX程序include、lib设置问题

    1.fatal error LNK1104: cannot open file "d3d9.lib" 解决方案: (1)项目 -->属性 --> 配置属性 --> ...

  4. Linux下tar命令的各种参数选项和他们的作用整理

    1.建立TAR包(打包)命令格式:tar cvf TAR包文件名.tar 所备份的文件或目录功能描述:tar cvf命令用于把指定的目录或文件打包到指定的文件中.“c”指定建立(或压缩)TAR包,“v ...

  5. C#中的线程（三）多线程

    C#中的线程(三)多线程   Keywords:C# 线程Source:http://www.albahari.com/threading/Author: Joe AlbahariTranslator ...

  6. CSS3 之 RGBa 可透明颜色

    在 CSS3 中,增加了一个 opacity 属性,允许开发者设置元素的透明度,现在 opacity 已被主流的现代浏览器支持,但 opacity 会把被设置的元素及其子元素同时设置为同一个透明度,这 ...

  7. 如何将Emmet安装到到 Sublime text 3？第二部分该插件还能让我们自定义快捷键呼出某个浏览器以预览页面

    看清楚哦~~这是Sublime text 3不是2的版本,两者的安装还是有区别的,下面的方法是我感觉比较简单的,其他的要命令什么的感觉太复杂了,经测试是OK的. 先关闭Sublime text 3: ...

  8. Memorial for Nanjing victims today 南京大屠杀死难者公祭仪式今于南京举行 勿忘国耻，活捉小*日*本。

    China will hold an annual memorial for the victims of the Nanjing Massacre today in the eastern city ...

  9. vue-cli 脚手架项目-package.json

    使用vue-cli脚手架新建的项目中,含有package.json. package.json是npm的配置文件,里面设定了脚本以及项目依赖的库. npm run dev 这样的命令就写在packag ...

  10. UVA 11291 Smeech

    [来源]https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...