日期:2014-05-17  浏览次数:20635 次

韩顺平_轻松搞定网页设计(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