详解JavaScript的流程控制语句
作者：bea
JS的核心ECMAScript规定的流程控制语句和其他的程序设计语言还是蛮相似的。我们选择一些实用的例子来看 一下这些语句。顺序结构我们在这里就不再提到，直接说条件和循环以及其他语句。 一、条件选择结构 条件选择语句用于基于不同的条件来执行不同的动作，通常在写代码时，总是需要为不同的决定来执行不同的 动作，可以在代码中使用条件语句来完成该任务。 在JavaScript中，我们可使用以下条件语句： if 语句：只有当指定条件为true时，使用该语句来执行代码 <
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流程控制语句的使用方法。
有用 | 无用
<!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流程控制语句的使用方法。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- JS简单模拟触发按钮点击功能的方法
- 移动手机APP手指滑动切换图片特效附源码下载
- 轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
- 浅析node连接数据库（express+mysql）
- javascript编程异常处理实例小结
- 轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
- 轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
- javascript for-in有序遍历json数据并探讨各个浏览器差异
- 基于js实现微信发送好友如何分享到朋友圈、微博
- 全面解析Bootstrap排版使用方法（文字样式）
- javascript中eval和with用法实例总结
- JavaScript基础篇（3)之Object、Function等引用类型
- 全面解析Bootstrap排版使用方法（标题）
- javascript作用域链(Scope Chain)用法实例解析
- Bootstrap每天必学之js插件
- Bootstrap每天必学之面板
- Bootstrap每天必学之媒体对象
- javascript针对cookie的基本操作实例详解
- javascript闭包(Closure)用法实例简析