寫給兔小白的js教程(3)

昨天兔小白太忙了，沒有完成家庭作業，沒關系，今天講的東西比較簡單，給兔子一個緩沖的時間。

今天繼續講語句，來看看用得第二多的循環語句吧。

1、for循環語句

for循環語句可以将某段代碼反複執行一定的次數，我們直接用例子講文法。比如我們要在頁面上連續跳10次提示框，可以這麼寫：

for(var i = 0;i < 10;++i){ 

    window.alert("ALARM"); 

} 

當然啦，隻有搗亂的程式才會這麼不停的彈提示框，咱們不管它，來看文法。for語句由三段組成，第一段是初始化用的，這裡我們定義了一個變量i，賦了初值0。第二段是判斷條件，表示條件滿足時才會繼續循環，這裡寫的是i<10，表示隻要變量i的值小于10，就一直循環。第三段是增量語句，這裡每循環一次就自增i的值，是以循環10次以後，i=10，就不再滿足循環條件了，是以循環就退出了。

for語句還能有一些變化：

//用多個變量也可以喲 

for(var i = 0,j = 0;i +j < 10;++i,++j){ 

    //do something 

//用自減也可以喲 

for(var i = 100;i > 0;--i){ 

//判斷條件不僅限于循環變量喲，可以與外部變量結合使用 

for(var i = 0;i < 10 && !userCancel;++i){ 

//什麼都不寫，會死循環的，這種情況要在内部按某種條件強行退出循環 

for(;;){ 

與循環語句經常一起出現的還有兩個關鍵字：break和continue，前者用于強行退出循環，後者用于忽略本次循環後面的語句，直接進入下一次循環。看個例子：

var rnd = 0; 

    //生成一個100以内的随機數，看着眼熟不？嘿嘿 

    rnd = Math.floor(Math.random() * 100); 

    //如果這個随機數大于60，就退出循環 

    if(rnd > 60) 

        break; 

2、for...in循環語句

for...in語句可以認為是for循環針對數組與對象的一個簡化的特殊用法，它經常用于周遊數組元素。下面兩種寫法是等價的，兔體會一下：

var numbers = [1, 2, 3]; 

for(var i in numbers){ 

    alert(numbers[i]); 

for(var i = 0;i < numbers.length;++i){ 

3、while循環語句

while循環也用于将一段代碼反複執行，直到條件不滿足時為止。它和for可以互相轉化，比如上面那個彈出10次提示框的for循環，用while改寫一下：

var i = 0; 

while(++i < 10){ 

while隻有一個判斷條件，隻要條件滿足，就一直循環，是以與for相比，它經常用于無法事先判斷循環次數的場景。用while的時候要小心，如果處理不好，它可能會造成死循環喲。

4、do...while循環

while循環有個缺點，就是如果條件不滿足，它就一次循環都不執行，可是有時候我們希望我們的代碼至少執行一次，這時候do...while就派上用場了。看個例子，比如我們要讓使用者輸入一個數字，如果輸入不合法，就重新輸入，直到合法為止，用do...while會比用while舒服很多：

var num; 

do{ 

    //prompt()方法會彈一個輸入框讓使用者輸入 

    num = window.prompt("請輸入一個數字"); 

while(isNaN(num)); 

好了，遊戲時間到了，我們把今天的知識點組合一下，讓兔小灰來猜水果。規則是這樣的，兔小白輸入想吃的水果的名字（英文），不等兔小白輸完，兔小灰就要猜出是什麼。

<a href="http://blog.51cto.com/attachment/201206/150946517.png" target="_blank"></a>

上代碼啦，這回不算長吧？

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; 

&lt;html&gt; 

&lt;title&gt;兔小灰猜水果&lt;/title&gt; 

&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;

&lt;style&gt; 

*{font-size:20px;font-family:"微軟雅黑"} 

#fruits{display:inline-block;} 

&lt;/style&gt; 

&lt;script type="text/javascript" language="javascript"&gt; 

//定義一個全局的字元串數組，用來存兔小灰知道的所有水果(真少啊) 

var fruitArray = ["apple", "banana", "cherry", "grape", "mango", "orange", "peach", "pineapple", "strawberry", "watermelon"]; 

/* 

 * 這個方法和上課課的一樣喲，偷懶用的 

 */ 

function get(id){ 

    return document.getElementById(id); 

 * 兔小灰來猜測兔小白想吃什麼 

function grayGuess(){ 

    //取得兔小白的輸入，為了防止兔小白用大寫字母導緻後面比對出問題，一律用toLowerCase()方法轉成小寫 

    //fruits是一個空數組，兔可以把它想象成一個空籃子，一會兒我們要往裡放過濾出來的水果圖檔 

    var input = get("whiteWant").value.toLowerCase(), 

        fruits = []; 

    //這裡用到了今天學的for...in循環了 

    //我們周遊fruitArray中的每一個元素 

    for(var i in fruitArray){ 

        //[i]用于從數組中取第i個元素 

        //我們看這個元素是否包含兔小白的輸入，indexOf()是字元串對象的一個方法，傳回子串出現的位置，如果找不到，會傳回-1 

        //是以判斷其傳回值&gt;=0，就表明找到了 

        if(fruitArray[i].indexOf(input) &gt;= 0){ 

            //push()方法用于往數組裡壓入一個元素，這裡我們壓入一段html代碼，兔應該能看懂，就是一個&lt;img&gt;标簽 

            fruits.push("&lt;img src='images/" + fruitArray[i] + ".jpg' /&gt;"); 

        } 

    } 

    //join()是數組的方法，用于把數組中的每個元素連接配接成一個字元串 

    //我們再把這個字元串賦給div的innerHTML屬性，就相當于把那一堆&lt;img&gt;加到頁面上了 

    get("fruits").innerHTML = fruits.join(""); 

&lt;/script&gt; 

&lt;body&gt; 

兔小灰我想吃 

&lt;input type="text" id="whiteWant" onkeyup="grayGuess()" /&gt; 

&lt;img src="images/white.gif" id="white" /&gt; 

&lt;br/&gt;&lt;br/&gt; 

&lt;img src="images/gray.gif" id="gray" /&gt; 

兔小白是不是想吃…… 

&lt;div id="fruits"&gt;&lt;/div&gt; 

&lt;/body&gt; 

&lt;/html&gt; 

兔小白認真閱讀了沒？下面是家庭作業了： 

1、基礎題：如果沒找到合适的水果，能不能讓兔小灰說：“這是什麼水果啊？北門的水果攤有沒？”

2、進階題：現在每次兔小灰會列出一大堆可能的水果，能不能讓他隻列最有可能的一個？

     本文轉自 BoyTNT 51CTO部落格，原文連結：http://blog.51cto.com/boytnt/890216，如需轉載請自行聯系原作者