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

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

日期：2014-05-17　浏览次数：20882 次

韩顺平_轻松搞定网页设计(html+css+javascript)_第23讲_js三大流程控制(顺序流程、分支控制、循环控制)_js调式技巧_学习笔记_源代码图解_PPT文档整理
js基本语法——三大流程控制
循环控制
听其名而知其意，就是让你的代码可以循环的执行。
案例：
编写一个程序，可以打印10句
“你好，我是刘德华同志”

demo1.html

<html>
	<head>
		<script language="javascript">
			for(var i=0; i<10; i++){
				document.writeln("你好，刘德华同志！<br/>");
			}
			document.writeln("=======<br/>");
			// while循环
			var i=0;
			while(i<10){
				document.writeln("你好，我是刘德华 <br/>");
				i++;
			}
			// do while循环
			document.writeln("=======<br/>");
			var i=0;
			do{
				document.writeln("你好，我是张学友 <br/>");
				i++;
			}while(i<10);
		</script>
	</head>
	<body></body>
</html>

看for循环执行的流程，看内存中的变化

内存示意图

程序流程图，看图知意。

循环控制
循环控制有三种
①for循环
for(循环初值;循环条件;步长){
语句; //循环体
}
②while循环
while(循环条件){
语句; //循环体

}

特别说明：while循环是先判断再执行语句。
③do while循环
do{
}while(循环条件);
特别说明：do while循环是先执行，再判断。
while和do while区别的通俗讲解：
还钱的问题
while：上来先问你还不还钱，还钱，就不打你（先判断，再执行）
do while：上来先打一顿，打完了再问，还钱吗（先执行，再判断）

var i=0;
do{
document.writeln("hello <br/>");
i++;
}while(i<10);

的流程图

案例：
（1）计算1+2+…n的值

demo2.html

<html>
	<head>
		<script language="javascript">
			var n=window.prompt("请输入一个整数");
			n=parseInt(n);

			var res=0;
			for(var i=0;i<=n;i++){
				res+=i;
			}
			document.writeln("结果是"+res);
		</script>
	</head>
	<body></body>
</html>

（2）计算1!+2!+…+n!的值

demo3.html

<html>
	<head>
		<script language="javascript">
			var n=window.prompt("请输入一个整数");
			n=parseInt(n);

			var res=0;
			var temp=1;
			for(var i=1;i<=n;i++){
				for(var j=1;j<=i;j++){
					temp*=j;
				}
				res+=temp;
				tmep=1; // 清temp
			}
			document.writeln("结果是"+res);
		</script>
	</head>
	<body></body>
</html>

这个案例用来做调试太好了
代码执行流程图，加深理解

细致分析

n=2时

①执行完毕后，
就执行②，此时i=1,则i<=n成立
执行④
就执行⑤，此时j=1,i=1，则j<=i成立
执行⑦，temp*=j，即temp=1*1
然后执行⑥，j++，此时j=2
接着执行⑤，此时j=2,i=1，则j<=i不成立
跳出里层for循环，执行⑧，此时res=0,temp=1,则res+=temp;，即是res=0+1
接着执行⑨，temp=1，把temp清为1

然后执行外层循环的③，i++,此时i=2
接着执行②，进行判断，此时i=2，则i<=n成立
执行④
就执行⑤，此时j=1,i=2，则j<=i成立
执行⑦，temp*=j，即temp=1*1
然后执行⑥，j++，此时j=2
接着执行⑤，此时j=2,i=2，则j<=i成立
再执行⑦，temp*=j，即temp=1*2
然后再执行⑥，j++，此时j=3
接着执行⑤，此时j=3,i=2，则j<=i不成立
跳出里层for循环，执行⑧，此时res=1,temp=2,则res+=temp;，即是res=1+2
接着执行⑨，temp=1，把temp清为1

然后执行外层循环的③，i++,此时i=3
接着执行②，进行判断，此时i=3，则i<=n不成立
跳出外层循环，然后执行⑨，res=3

如果有一个工具，帮助我们向上面一样一步一步的分析就太好了，
在IE中进行js调试
在IE8中通过开发人员工具，就可以进行js的调试工作
注意：首先要在IE—工具—internet选项—高级中取消“禁止脚本调试”

对于低版本的IE浏览器，需要做下面的处里，才能进行js调试
1.安装Microsoft Script Editor
Microsoft Script Editor是o

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>