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"> <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的流程控制语句的更多相关文章
- javaScript的流程控制语句学习笔记
JavaScript提供了5种流程控制语句,if条件判断语句,switch语句,for循环语句,while循环语句,do-while循环语句. 1.条件判读语句 对变量或表达式进行判定,并根据判定结果 ...
- JavaScript语句-流程控制语句
JavaScript定义了一组语句,语句通常用于执行一定的任务.语句可以很简单,也可以很复杂. 选择结构,可以在程序中创建交叉结构来指定程序流的可能方向.JavaScript中有四种选择结构: 1.单 ...
- JavaScript语法-流程控制语句
一.JavaScript特殊语法 JS特殊语法: 1. 语句以;结尾,如果一行只有一条语句则 ;可以省略 (不建议) 2. 变量的定义使用var关键字,也可以不使用 * 用: 定义的变量是局部变量 * ...
- javaScript(6)---流程控制语句
学习要点: 1.语句的定义 2.if 语句 3.switch语句 4.do...while语句 5.while语句 6.for语句 7.for...in语句 8.break和continue语句 9. ...
- JavaScript的流程控制语句以及函数
一.流程控制 1. 作用:控制代码的执行顺序 2. 分类 2.1顺序结构:从上到下依次执行代码语句 2.2选择结构: 1. if语句 简单if结构 if(条件表达式){ 表达式成立时执行的代码段 } ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--流程控制语句
1.if语句--做判断 if语句是基于条件成立才执行相应代码时使用的语句. 语法: if(条件) { 条件成立时执行代码} 注意:if小写,大写字母(IF)会出错! 假设你应聘web前端技术开发岗位, ...
- 2014年辛星完全解读Javascript第四节 流程控制语句
上一节我们介绍了函数,本小节我们介绍一下流程控制语句,对于任何一门编程语言来说,流程控制都是非常重要的,也就是我们常说的顺序结构.选择结构和循环结构. ************选择结构******** ...
- 2014年辛星Javascript解读第四节 流程控制语句
上一节我们介绍了函数,本小节我们介绍一下流程控制语句,对于不论什么一门编程语言来说,流程控制都是很重要的,也就是我们常说的顺序结构.选择结构和循环结构. ************选择结构******* ...
- 第一百零一节，JavaScript流程控制语句
JavaScript流程控制语句 学习要点: 1.语句的定义 2.if 语句 3.switch语句 4.do...while语句 5.while语句 6.for语句 7.for...in语句 8.br ...
随机推荐
- 分享知识-快乐自己：Java中的经典算法之冒泡排序(Bubble Sort)
原理:比较两个相邻的元素,将值大的元素交换至右端. 思路:依次比较相邻的两个数,将小数放在前面,大数放在后面.即在第一趟:首先比较第1个和第2个数,将小数放前,大数放后.然后比较第2个数和第3个数,将 ...
- Dom节点操作常用方法
1.访问/获取节点 document.getElementById(id); //返回对拥有指定id的第一个对象进行访问 document.getElementsByName(name); //返回带 ...
- javascript queue 打字效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Linux tar命令总结
压缩 tar –cvf jpg.tar *.jpg 将目录里所有jpg文件打包成tar.jpg tar –czf jpg.tar.gz *.jpg 将目录里所有jpg文件打包成jpg.tar后, ...
- pandas中Loc vs. iloc vs. ix vs. at vs. iat?
loc: only work on indexiloc: work on positionix: You can get data from dataframe without it being in ...
- .NET MVC 异步提交和返回参数
一.后台页面中的接收方法和返回写法 Jsonresult意味着返回值是json格式,也可以是string或者int等其他类型. Httppost代表只接受Post方法. Mvc中返回Jsonresul ...
- Js里头的对象字面量
JavaScript 对象字面量 在编程语言中,字面量是一种表示值的记法.例如,"Hello, World!" 在许多语言中都表示一个字符串字面量(string literal ) ...
- why latches are considered bad?
A "latch" is different from a "Flip-Flop" in that a FF only changes its output i ...
- qt在linux下使用open，write，close等文件操作
正常在linux下使用的文件操作函数为: #include <fcntl.h>fd = open(“path”,O_RDWR|O_NONBLOCK); 但是在qt中,需要使用: #incl ...
- 配置Nginx实现负载均衡
在关于高并发负载均衡一文中已经提到,企业在解决高并发问题时,一般有两个方向的处理策略,软件.硬件,硬件上添加负载均衡器分发大量请求,软件上可在高并发瓶颈处:数据库+web服务器两处添加解决方案,其中w ...