今天的主題是迴圈
什麼是迴圈呢?也就是你想要重複做同樣一件事情的時候
可以幫助你更輕鬆地完成
迴圈也分成幾種
1. for
2. while
3. do while
4. for in
先從for迴圈講解吧
for最常應用在於你知道需要跑幾次的時候
語法:
for(初始值; 終止條件; 計數條件){
程式碼...
}
範例:
<html>
<head>
</head>
<body>
<script type="text/javascript">
for(var i = 0; i<10 ; i++){
document.write(i);
}
</script>
</body>
</html>
基本上呢，JS的語法通常都是寫在HEAD之間或是BODY之後
但其實也可以寫在BODY之內
而document.write就是把括號內的東西輸出到畫面上
但是要注意的是，若是瀏覽器已經把BODY的東西跑完了再遇到write
那就會把BODY的內容洗掉
在運用for的時候，初始值通常都會使用ijk，所以我var了一個變數為i初始值為0
第二個終結條件為只要i大於等於10就會停止迴圈
計數條件為加一，++是一個運算符，用來把變數加一，當然也有--
其實也可以寫成這樣
i = i + 1 、 i += 1
這兩種寫法都可以，後面的寫法是前面的簡寫，通常也都是用後面的寫法
所以執行了上面的程式碼，就可以看到畫面上出現了 0123456789
順序是這樣的，設定初始值 -> 詢問一次終止條件 -> 跑了一次程式碼 -> 詢問一次終止條件 -> 計數(之後再跑一次程式碼)或是終止
這也就是迴圈的用意了，減少程式碼的撰寫量
通常迴圈都是搭配著陣列來使用
若是有研讀上一篇文章的讀者
可以嘗試把這兩者結合起來使用
接下來是while迴圈
while是只要條件成立，就會一直跑下去
最常用於的是你不知道甚麼時候條件會成立
但條件就是會有成立的時候
如果都沒有，就會形成一種叫做無窮迴圈
簡單來說，就是跑到天荒地老，跑到電腦承受不住
語法:
while(條件){
程式碼....
}
範例:
<html>
<head>
</head>
<body>
<script type="text/javascript">
var i = 0 ;
while(i<10){
document.write(i);
i++;
}
</script>
</body>
</html>
上面這段程式碼其實跟第一個for迴圈跑出來的沒有兩樣
寫法也只是稍稍微的有些不一樣
但若是把i++這一行拿掉
i這個變數就一直都是0，也一直符合條件
也就會一直跑下去
所以在使用while、do while的時候，一定要細心的去看條件有沒有成立的時候
不然一不小心可能就會變成無窮迴圈
再來是do while迴圈
do while 跟 while 很像，只是一個是先判斷再跑程式碼，另一個是先跑程式碼在判斷
也就是說在do while 裡面，可以保證至少跑了一次程式碼
語法:
do{
程式碼...
}while(條件)
範例:
<html>
<head>
</head>
<body>
<script type="text/javascript">
var i = 0 ;
do{
document.write(i);
}while(i<0)
</script>
</body>
</html>
在以上的範例中
可以看到的是條件值從一開始就已經是不成立
但是畫面中還是會有一個0出現
這也就是剛剛我說的至少會跑到一次程式碼
最後是 for in 迴圈
這個迴圈比較特別
是用來跑物件中的屬性
在JS的特性當中，凡事都是物件
這樣說可能有點抽象
拿現實生活中的東西來比較
電風扇是物件
手機是物件
電視機也是物件
你手裡摸到的眼裡看到的都是物件
那麼甚麼又是屬性，講的白話一些屬性就是用來形容物件
手機有 廠牌 螢幕大小 觸控或是非觸控
電風扇有 尺寸 大小 耗電量
這一些用來形容物件的就叫做屬性
至於要怎麼樣使用呢?這就讓各位讀者自行去查詢資料了
動手去找資料然後實作，才會變成自己的
另外也可以查查break這個關鍵字可以使用在甚麼樣的地方
下一篇將會開始講解一些語法跟事件，敬請期待