韓順平_輕鬆搞定網頁設計(html+css+javascript)_第23講_js三大流程控制(順序流程、分支控制、循環控制)_js調式技巧_學習筆記_源代碼圖解_PPT文檔整理

文西馬龍:http://blog.csdn.net/wenximalong/

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是office2003中的一個組件。要安裝Microsoft Script Editor,首先要有office的安裝程序。安裝步驟如下:
a.打開word,工具—宏—Microsoft腳本編輯器,這個時候會需要office的安裝文件
b.執行完上一步後,在Microsoft Script Editor中,調試—安裝web測試,這個時候還會需要office的安裝文件
c.完成安裝後,重啓IE和Microsoft Script Editor
2.調試
先決條件:
1.安裝Microsoft Script Editor或Microsoft Script debugger
2.IE中打開了腳本調試。
要在IE中進行javascript debugger調試,首先要在IE—工具—internet選項—高級 中 取消“禁止腳本調試”,然後重新啓動IE就可以使用Microsoft Script Editor。注意:IE較爲不穩定,可能會出現該選項失效的情況。關閉IE重來一遍。

如何使用Microsoft Script Editor進行調試:
在javascript代碼中,在你想要設置斷點的位置,加上“debugger”
在已經處於debugger狀態的Microsoft Script Editor代碼窗口中設置斷點
在IE中直接調用Microsoft Script Editor,請在IE地址欄中輸入"javascript:debugger"回車
Microsoft Script Editor的具體使用方法請參考Microsoft Script Editor的幫助文檔


雙擊下斷點,重點看局部變量的變化
firefox瀏覽器下:Javascript的調試利器Firebug


經驗:★★★js發生錯誤,如何定位其錯誤?
1.可以通過程序員的經驗來判斷
2.window.alert()來輸出信息

3.使用firebug的調試工具[cy--5,瀏覽器對象模型BOM]


 韓順平_php從入門到精通_視頻教程_學習筆記_源代碼圖解_PPT文檔整理_目錄

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章