当前位置: 代码迷 >> 网页设计 >> 韩顺平_轻巧搞定网页设计(html+css+javascript)_第22讲_js三大流程控制(顺序流程、分支控制、循环控制)_学习笔记_源代码图解_PPT文档整理
  详细解决方案

韩顺平_轻巧搞定网页设计(html+css+javascript)_第22讲_js三大流程控制(顺序流程、分支控制、循环控制)_学习笔记_源代码图解_PPT文档整理

热度:237   发布时间:2012-11-26 11:48:50.0
韩顺平_轻松搞定网页设计(html+css+javascript)_第22讲_js三大流程控制(顺序流程、分支控制、循环控制)_学习笔记_源代码图解_PPT文档整理
js基本语法――三大流程控制
(1)顺序控制

听其名而知其意,让程序可以顺序的执行。
案例:

var a=7;
window.alert("a="+a);
window.alert("hello");
a++;
window.alert("a="+a);
window.alert("★★★");
a++;
window.alert("a+="=a);

(2)分支控制

让程序有选择的执行,分支控制有三种
①单分支②双分支③多分支
案例:
编写一个程序,额可以输入人的年龄,如果该同志的年龄大于18岁,则输出“你年龄大于18,要对自己的行为负责!”
①单分支
if(条件表达式){
语句;
}
②双分支
案例:
编写一个程序,可以输入人的年龄,如果该同志的年龄大于18岁,则输出“你年龄大于18,要对自己的行为负责!”。否则,输出“你的年龄不大,这次放过你了”
if(条件表达式){
语句;
}else{
语句;
}
var age=20;
if(age>18){
window.alert("大于18");
}else{
window.alert("小于18");
}

③多分支
if(条件表达式1){
//执行
}else if(条件表达式2){
//执行
}else if…{ //可以有多个else if
}
else{ //可以没有
}

案例:
编写一个程序,可以输入人的年龄,如果该同志的年龄大于18岁,则输出“你年龄大于18,要对自己的行为负责,送入监狱”。如果该同志的年龄大于10岁并且小于等于18,则输出“你的年龄也不小了,把你送少管所”。其他情况,则输出“小孩子,下次注意”。

举例:
如果男,男厕所,女,女厕所,否则不上
var sex=window.prompt("请输入性别");
if(sex=="男"){
window.alert("上男厕所");
}else if(sex=="女"){
window.alert("上女厕所");
}else{
window.alert("不上厕所");
}

注意:多分支,找到一个入口后,后面的都不判断了。
var sex=window.prompt("请输入性别");
if(sex=="男"){
window.alert("上男厕所");
}else if(sex=="女"){
window.alert("上女厕所");
}else if(sex=="女"){
window.alert("ok");
else{
window.alert("不上厕所");
}

判断女后,输出:上女厕所,然后就跳出if语句了。
强调:一旦找到一个满足条件的入口,执行完毕后,就直接结束整个多分支。

③多分支 switch
基础就要像磐石。

switch(条件表达式){
case 常量1:
语句; break;
case 常量2:
语句; break;

case 常量n:
语句; break;
default:
语句;
break;
}
注意:case有几个都行,default可以没有。当case1~n都不满足的时候,则default。default并不一定要在最后。
switch的细节问题,看demo1.html

注意★★★★★,对demo1.html仔细分析实践,就会搞明白了。

demo1.html

<html>
	<head>
		<script language="javascript">
			var a=890;
			switch(a){
				case 890:
					window.alert("这是890");
					break; //break 作用是跳出整个swithc语句
				case 90:
					window.alert("这是90");
					break;
				case 890:
					window.alert("没有匹配的值");
					break;
				}
			//********
			//当break语句没有的时候,会接着向下执行,直到碰到第二个break,也不会去判断90了,从入口890进来了已经。
			var a=890;
			switch(a){
				case 890:
					window.alert("这又是890"); //输出
					//这里没有break语句了
				case 90:
					window.alert("这是90"); //输出后跳出
					break;
				case 890:
					window.alert("没有匹配的值");
					break;
			}
			window.alert("end…");
			//********
			// 这个会出现什么提示?会弹出三个对话框,因为1没有任何匹配就进入了default,因为没有break,就接着执行window.alert("今天是星期一");因为又没有break,就再执行window.alert("今天是星期二");
			var flag=1;
			switch(flag){
				default:
				window.alert("默认");
				case 'a':
				window.alert("今天是星期一");
				case 'b':
				window.alert("今天是星期二");
			}
			//********
			//下面的这个又会提示什么呢?1.1有匹配了,只显示1.1,然后语句结束。
			var flag=1.1;
			switch(flag){
				default:
				window.alert("默认1.1");
				case 'a':
				window.alert("今天是星期一1.1");
				case 'b':
				window.alert("今天是星期二1.1");
				case 1.1:
				window.alert("1.1");
			}
			//********
			//对上面的程序再深一步,下面的这个又会提示什么呢?1.2有匹配了,先显示1.2,没有遇到break,就继续执行window.alert("今天是星期二1.2");还是没有遇到break,再执行window.alert("默认1.2");程序结束。
			var flag=1.2;
			switch(flag){
				case 'a':
				window.alert("今天是星期一1.2");
				case 1.2:
				window.alert("1.2");
				case 'b':
				window.alert("今天是星期二1.2");
				default:
				window.alert("默认1.2");
			}
		</script>
	</head>
	<body></body>
</html>

表达式可以是js支持的所有数据类型
注意:
(1)js的switch语句类型可以是js支持的任何类型(数组和对象除外)
(2)case后面的数据类型可以 任意(数组和对象除外)
(3)break作用是跳出整个switch语句
(4)如果没有匹配的则执行default
①这个会出现什么提示?
var flag=1;
switch(flag){
default:
window.alert("默认");
case 'a':
window.alert("今天星期一");
case 'a':
window.alert("今天星期二");
}

②这个又会提示什么呢?
var flag=1.1;
switch(flag){
default:
window.alert("默认");
case 'a':
window.alert("今天是星期一");
case 'b':
window.alert("今天是星期二");
case 1.1:
window.alert("1.1");
}

案例:

编写一个程序,可以接收一个字符串,比如:a,b,c,d,e,f,g a表示星期一,不表示星期二…根据用户的输入显示相依的信息,用switch语句。


 韩顺平_php从入门到精通_视频教程_学习笔记_源代码图解_PPT文档整理_目录

  相关解决方案