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

時間  2020-01-14
標籤 寫給 白的 教程 欄目 JavaScript 简体版
原文   原文鏈接

昨天兔小白太忙了，沒有完成家庭做業，不要緊，今天講的東西比較簡單，給兔子一個緩衝的時間。javascript

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


一、for循環語句java

for循環語句能夠將某段代碼反覆執行必定的次數，咱們直接用例子講語法。好比咱們要在頁面上連續跳10次提示框，能夠這麼寫：數組

  
  
  
  
    
   
   
   
   
  1. for(var i = 0;i < 10;++i){ 
    2. 
   
   
   
   
  2.     window.alert("ALARM"); 
    3. 
   
   
   
   
  3. } 
    4.

固然啦，只有搗亂的程序纔會這麼不停的彈提示框，我們無論它，來看語法。for語句由三段組成，第一段是初始化用的，這裏咱們定義了一個變量i，賦了初值0。第二段是判斷條件，表示條件知足時纔會繼續循環，這裏寫的是i<10，表示只要變量i的值小於10，就一直循環。第三段是增量語句，這裏每循環一次就自增i的值，因此循環10次之後，i=10，就再也不知足循環條件了，因此循環就退出了。app

for語句還能有一些變化：dom

  
  
  
  
    
   
   
   
   
  1. //用多個變量也能夠喲 
    2. 
   
   
   
   
  2. for(var i = 0,j = 0;i +j < 10;++i,++j){ 
    3. 
   
   
   
   
  3.     //do something 
    4. 
   
   
   
   
  4. } 
    5. 
   
   
   
   
  5.  
    6. 
   
   
   
   
  6. //用自減也能夠喲 
    7. 
   
   
   
   
  7. for(var i = 100;i > 0;--i){ 
    8. 
   
   
   
   
  8.     //do something 
    9. 
   
   
   
   
  9. } 
    10. 
   
   
   
   
  10.  
    11. 
   
   
   
   
  11. //判斷條件不只限於循環變量喲，能夠與外部變量結合使用 
    12. 
   
   
   
   
  12. for(var i = 0;i < 10 && !userCancel;++i){ 
    13. 
   
   
   
   
  13.     //do something 
    14. 
   
   
   
   
  14. } 
    15. 
   
   
   
   
  15.  
    16. 
   
   
   
   
  16. //什麼都不寫，會死循環的，這種狀況要在內部按某種條件強行退出循環 
    17. 
   
   
   
   
  17. for(;;){ 
    18. 
   
   
   
   
  18.     //do something 
    19. 
   
   
   
   
  19. } 
    20.

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

  
  
  
  
    
   
   
   
   
  1. var rnd = 0; 
    2. 
   
   
   
   
  2. for(;;){ 
    3. 
   
   
   
   
  3.     //生成一個100之內的隨機數，看着眼熟不？嘿嘿 
    4. 
   
   
   
   
  4.     rnd = Math.floor(Math.random() * 100); 
    5. 
   
   
   
   
  5.  
    6. 
   
   
   
   
  6.     //若是這個隨機數大於60，就退出循環 
    7. 
   
   
   
   
  7.     if(rnd > 60) 
    8. 
   
   
   
   
  8.         break; 
    9. 
   
   
   
   
  9. } 
    10.

二、for...in循環語句ui

for...in語句能夠認爲是for循環針對數組與對象的一個簡化的特殊用法，它常常用於遍歷數組元素。下面兩種寫法是等價的，兔體會一下：spa

  
  
  
  
    
   
   
   
   
  1. var numbers = [1, 2, 3]; 
    2. 
   
   
   
   
  2. for(var i in numbers){ 
    3. 
   
   
   
   
  3.     alert(numbers[i]); 
    4. 
   
   
   
   
  4. } 
    5. 
  
  
  
  
  
  
  
  
    
   
   
   
   
  1. var numbers = [1, 2, 3]; 
    2. 
   
   
   
   
  2. for(var i = 0;i < numbers.length;++i){ 
    3. 
   
   
   
   
  3.     alert(numbers[i]); 
    4. 
   
   
   
   
  4. } 
    5.

三、while循環語句htm

while循環也用於將一段代碼反覆執行，直到條件不知足時爲止。它和for能夠互相轉化，好比上面那個彈出10次提示框的for循環，用while改寫一下：

  
  
  
  
    
   
   
   
   
  1. var i = 0; 
    2. 
   
   
   
   
  2. while(++i < 10){ 
    3. 
   
   
   
   
  3.     window.alert("ALARM"); 
    4. 
   
   
   
   
  4. } 
    5.

while只有一個判斷條件，只要條件知足，就一直循環，因此與for相比，它常常用於沒法事先判斷循環次數的場景。用while的時候要當心，若是處理很差，它可能會形成死循環喲。

四、do...while循環

while循環有個缺點，就是若是條件不知足，它就一次循環都不執行，但是有時候咱們但願咱們的代碼至少執行一次，這時候do...while就派上用場了。看個例子，好比咱們要讓用戶輸入一個數字，若是輸入不合法，就從新輸入，直到合法爲止，用do...while會比用while舒服不少：

  
  
  
  
    
   
   
   
   
  1. var num; 
    2. 
   
   
   
   
  2. do{ 
    3. 
   
   
   
   
  3.     //prompt()方法會彈一個輸入框讓用戶輸入 
    4. 
   
   
   
   
  4.     num = window.prompt("請輸入一個數字"); 
    5. 
   
   
   
   
  5. } 
    6. 
   
   
   
   
  6. while(isNaN(num)); 
    7.


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


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

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
    2. 
   
   
   
   
  2. <html> 
    3. 
   
   
   
   
  3. <title>兔小灰猜水果</title> 
    4. 
   
   
   
   
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. 
   
   
   
   
  5. <style> 
    6. 
   
   
   
   
  6. *{font-size:20px;font-family:"微軟雅黑"} 
    7. 
   
   
   
   
  7. #fruits{display:inline-block;} 
    8. 
   
   
   
   
  8. </style> 
    9. 
   
   
   
   
  9. <script type="text/javascript" language="javascript"> 
    10. 
   
   
   
   
  10.  
    11. 
   
   
   
   
  11. //定義一個全局的字符串數組，用來存兔小灰知道的全部水果(真少啊) 
    12. 
   
   
   
   
  12. var fruitArray = ["apple", "banana", "cherry", "grape", "mango", "orange", "peach", "pineapple", "strawberry", "watermelon"]; 
    13. 
   
   
   
   
  13.  
    14. 
   
   
   
   
  14. /* 
    15. 
   
   
   
   
  15.  * 這個方法和上課課的同樣喲，偷懶用的 
    16. 
   
   
   
   
  16.  */ 
    17. 
   
   
   
   
  17. function get(id){ 
    18. 
   
   
   
   
  18.     return document.getElementById(id); 
    19. 
   
   
   
   
  19. } 
    20. 
   
   
   
   
  20.  
    21. 
   
   
   
   
  21. /* 
    22. 
   
   
   
   
  22.  * 兔小灰來猜想兔小白想吃什麼 
    23. 
   
   
   
   
  23.  */ 
    24. 
   
   
   
   
  24. function grayGuess(){ 
    25. 
   
   
   
   
  25.  
    26. 
   
   
   
   
  26.     //取得兔小白的輸入，爲了防止兔小白用大寫字母致使後面比對出問題，一概用toLowerCase()方法轉成小寫 
    27. 
   
   
   
   
  27.     //fruits是一個空數組，兔能夠把它想象成一個空籃子，一下子咱們要往裏放過濾出來的水果圖片 
    28. 
   
   
   
   
  28.     var input = get("whiteWant").value.toLowerCase(), 
    29. 
   
   
   
   
  29.         fruits = []; 
    30. 
   
   
   
   
  30.  
    31. 
   
   
   
   
  31.     //這裏用到了今天學的for...in循環了 
    32. 
   
   
   
   
  32.     //咱們遍歷fruitArray中的每個元素 
    33. 
   
   
   
   
  33.     for(var i in fruitArray){ 
    34. 
   
   
   
   
  34.  
    35. 
   
   
   
   
  35.         //[i]用於從數組中取第i個元素 
    36. 
   
   
   
   
  36.         //咱們看這個元素是否包含兔小白的輸入，indexOf()是字符串對象的一個方法，返回子串出現的位置，若是找不到，會返回-1 
    37. 
   
   
   
   
  37.         //因此判斷其返回值>=0，就代表找到了 
    38. 
   
   
   
   
  38.         if(fruitArray[i].indexOf(input) >= 0){ 
    39. 
   
   
   
   
  39.  
    40. 
   
   
   
   
  40.             //push()方法用於往數組裏壓入一個元素，這裏咱們壓入一段html代碼，兔應該能看懂，就是一個<img>標籤 
    41. 
   
   
   
   
  41.             fruits.push("<img src='p_w_picpaths/" + fruitArray[i] + ".jpg' />"); 
    42. 
   
   
   
   
  42.  
    43. 
   
   
   
   
  43.         } 
    44. 
   
   
   
   
  44.     } 
    45. 
   
   
   
   
  45.  
    46. 
   
   
   
   
  46.     //join()是數組的方法，用於把數組中的每一個元素鏈接成一個字符串 
    47. 
   
   
   
   
  47.     //咱們再把這個字符串賦給div的innerHTML屬性，就至關於把那一堆<img>加到頁面上了 
    48. 
   
   
   
   
  48.     get("fruits").innerHTML = fruits.join(""); 
    49. 
   
   
   
   
  49. } 
    50. 
   
   
   
   
  50.  
    51. 
   
   
   
   
  51. </script> 
    52. 
   
   
   
   
  52. <body> 
    53. 
   
   
   
   
  53. 兔小灰我想吃 
    54. 
   
   
   
   
  54. <input type="text" id="whiteWant" onkeyup="grayGuess()" /> 
    55. 
   
   
   
   
  55. <img src="p_w_picpaths/white.gif" id="white" /> 
    56. 
   
   
   
   
  56. <br/><br/> 
    57. 
   
   
   
   
  57. <img src="p_w_picpaths/gray.gif" id="gray" /> 
    58. 
   
   
   
   
  58. 兔小白是否是想吃…… 
    59. 
   
   
   
   
  59. <div id="fruits"></div> 
    60. 
   
   
   
   
  60. </body> 
    61. 
   
   
   
   
  61. </html> 
    62.


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

一、基礎題：若是沒找到合適的水果，能不能讓兔小灰說：「這是什麼水果啊？北門的水果攤有沒？」
二、進階題：如今每次兔小灰會列出一大堆可能的水果，能不能讓他只列最有可能的一個？

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程