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

時間 2020-01-14

原文原文鏈接

叮鈴鈴，上課啦~~javascript

昨天的家庭做業兔小白完成得不錯，今天開始咱們要正式學習語法了。老規矩，後面會有小遊戲等着兔子喲~~ html

一、javascript中的常量與變量java

全部編程語言都會涉及這兩個概念，所謂常量就是值不變的固定數據，變量就是值能夠按須要變化的數據，兔有Perl的基礎，應該不難理解。咱們來看幾個例子，加深一下理解：編程

  
  
  
  
   
   
   
   //用var定義一個變量number，把整型常量100賦給它，這樣它也是整型的了 
   
   
   
   var number = 100; 
   
   
   
    
   
   
   
   //這幾個是把字符串常量賦給變量，單雙引號的用法很靈活喲 
   
   
   
   var msg1 = "這是一個字符串"; 
   
   
   
   var msg2 = '這是單引號的字符串'; 
   
   
   
   var msg3 = "還能夠混用'單雙引號'喲"; 
   
   
   
   var msg4 = '換過來用"單雙引號"也能夠喲'; 
   
   
   
    
   
   
   
   //用一個var能夠同時聲明多個變量，這裏的y是實型變量，就是小數 
   
   
   
   var x = 100, y = 120.15; 
   
   
   
    
   
   
   
   //也能夠先定義，後賦值 
   
   
   
   var exist; 
   
   
   
   exist = true; 
   
   
   
    
   
   
   
   //不光能夠把常量賦給變量，變量也能夠賦給變量 
   
   
   
   var top = 100, bottom = top; 
   
   
   
    
   
   
   
   //這是定義數組，數組就是多個數據的集合 
   
   
   
   var list = [100, 120, 140, 160, 180]; 
   
   
   
    
   
   
   
   //這是定義對象，上一篇中出現的window就是一個js內置的對象，對象中能夠有方法和變量，兔能夠先不用深究，後面還會遇到 
   
   
   
   var obj = { id:1, name:"Bunny", hello:function(){return "Hello"} };

怎麼樣，還不算複雜吧？OK，咱們繼續。數組

二、控制語句dom

一門語言光有變量能幹什麼？咱們最終是要用它執行邏輯的，因此接下來咱們看看語句與方法。編程語言

先看控制語句吧，這個最經常使用，由於計算機比較笨，只會按規則辦事，若是知足什麼條件就怎麼怎麼樣，不然就不怎麼怎麼樣。javascript裏判斷語句的語法是這樣的：
ide

  
  
  
  
   
   
   
   //基本判斷 
   
   
   
   if(條件) 
   
   
   
       執行語句1; 
   
   
   
   else 
   
   
   
       執行語句2; 
   
   
   
    
   
   
   
   //多級判斷 
   
   
   
   if(條件1) 
   
   
   
       執行語句1; 
   
   
   
   else if(條件2) 
   
   
   
       執行語句2; 
   
   
   
   else 
   
   
   
       執行語句3; 
   
   
   
    
   
   
   
   //嵌套判斷 
   
   
   
   if(條件1){ 
   
   
   
       if(條件2) 
   
   
   
           執行語句2; 
   
   
   
       else 
   
   
   
           執行語句3; 
   
   
   
   } 
   
   
   
   else{ 
   
   
   
       執行語句1; 
   
   
   
   }

咱們來嘗試用判斷語句結合變量作點事情：判斷奇偶數。函數

  
  
  
  
   
   
   
   /* 
   
   
   
    * 判斷給定的變量number是否奇數 
   
   
   
    */ 
   
   
   
   function isOdd(number){ 
   
   
   
       var odd; 
   
   
   
       if(number % 2 != 0)   //%是取模運算，就是取兩個數相除後的餘數 
   
   
   
           odd = true; 
   
   
   
       else 
   
   
   
           odd = false; 
   
   
   
    
   
   
   
       return odd; 
   
   
   
   }

三、方法學習

剛纔判斷奇偶數的時候，咱們遇到了一個新的概念：方法（或者叫函數）。

所謂方法，能夠認爲它是多條語句的一個集合，用來完成特定的功能。javascript內置了許多函數，好比parseInt()能夠把一個字符串轉化成對應的整數，getElementById()能夠取到頁面中的元素。

咱們也能夠本身定義方法，好比上面的isOdd()就是一個咱們本身定義的方法，關鍵字function表示定義方法，isOdd是函數名，它接收一個參數number，而且有返回值，告訴調用者運算的結果是什麼。

適當使用方法對大段的語句進行封裝可使程序結構清晰，更簡潔易懂。

好了，兔子累了，上個小遊戲吧，整合一下今天的知識。遊戲名叫「兔小灰猜數」，運行時，兔小白會隨機想好一個100之內的整數讓兔小灰猜，每次兔小白會告訴兔小灰猜大了仍是猜小了，直到猜中爲止。

上代碼啦，請兔小白認真閱讀。

  
  
  
  
   
   
   
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
   
   
   
   <html> 
   
   
   
   <title>兔小灰猜數</title> 
   
   
   
   <style> 
   
   
   
   *{font-size:20px;font-family:"微軟雅黑"} 
   
   
   
   #whiteSay{display:inline-block;width:300px;text-align:right} 
   
   
   
   #grayGuess{width:60px} 
   
   
   
   </style> 
   
   
   
   <script type="text/javascript" language="javascript"> 
   
   
   
    
   
   
   
   //定義兩個變量，number用來存兔小白隨機想好的數，count用來存兔小灰猜的次數 
   
   
   
   var whiteNumber = 0, count = 1; 
   
   
   
    
   
   
   
   /* 
   
   
   
    * 初始化方法，給number賦值用的 
   
   
   
    */ 
   
   
   
   function init(){ 
   
   
   
       //Math是一個js內置的對象，它上面定義了不少與數學相關的方法 
   
   
   
       //random()用來隨機生成一個0~1之間的小數，咱們把它乘以100就獲得了一個0~100之間的小數 
   
   
   
       //再用floor()方法取一下整，就是0~100之間的整數了 
   
   
   
       whiteNumber = Math.floor(Math.random() * 100); 
   
   
   
   } 
   
   
   
    
   
   
   
   /* 
   
   
   
    * 用來判斷兔小灰輸入的方法 
   
   
   
    */ 
   
   
   
   function judge(){ 
   
   
   
        
   
   
   
       //這個get是什麼呢？它是個自定義的方法（見下方），其實就是老寫document.getElementById有點麻煩，因此提成一個自定義方法，這樣使用時能縮短點 
   
   
   
       var guess = get("grayGuess"),   say = get("whiteSay"); 
   
   
   
    
   
   
   
       //parseInt()用來把一個字符串轉化成對應的整數，注意若是字符串不合法，它可能轉換出一個NaN來(Not a Number的意義) 
   
   
   
       //這裏咱們把guess.value轉化一下，它就是輸入框的值 
   
   
   
       var guessNum = parseInt(guess.value); 
   
   
   
    
   
   
   
       //要作一下判斷，必須是數字、且大於0、且小於100，才認爲兔小灰輸入是合法的 
   
   
   
       if(!isNaN(guessNum) && guessNum > 0 && guessNum <= 100){ 
   
   
   
    
   
   
   
           //若是兔小灰猜的和兔小白想的同樣，就是猜對了 
   
   
   
           if(guessNum == whiteNumber){ 
   
   
   
               say.innerText = "恭喜兔小灰猜對啦~~";           //輸出信息 
   
   
   
               get("white").src = "p_w_picpaths/succeed.jpg";    //更換圖片 
   
   
   
               get("btnSubmit").disabled = "disabled";     //禁用按鈕，由於不用繼續猜了 
   
   
   
           } 
   
   
   
           //猜大了 
   
   
   
           else if(guessNum > whiteNumber){ 
   
   
   
               say.innerText = "第" + (count++) + "次，你猜大啦~~"; 
   
   
   
           } 
   
   
   
           //既沒猜中也沒猜大，那就只能是猜小了 
   
   
   
           else{ 
   
   
   
               say.innerText = "第" + (count++) + "次，你猜得有點小喲~~~"; 
   
   
   
           } 
   
   
   
    
   
   
   
       } 
   
   
   
       //輸入不合法 
   
   
   
       else{ 
   
   
   
           say.innerText = "不準亂輸入！！"; 
   
   
   
       } 
   
   
   
    
   
   
   
       //清空輸入框 
   
   
   
       guess.value = ""; 
   
   
   
       //focus()方法用於把輸入焦點定位到指定元素上 
   
   
   
       guess.focus(); 
   
   
   
   } 
   
   
   
    
   
   
   
   /* 
   
   
   
    * 咱們自定義的一個方法，這樣就不用總寫document......了 
   
   
   
    */ 
   
   
   
   function get(id){ 
   
   
   
       return document.getElementById(id); 
   
   
   
   } 
   
   
   
    
   
   
   
   </script> 
   
   
   
   <body onload="init()"> 
   
   
   
    
   
   
   
   <span id="whiteSay">我想好了一個100之內的數，猜猜是多少吧</span> 
   
   
   
   <img src="p_w_picpaths/white.gif" id="white" /> 
   
   
   
    
   
   
   
   <br/> 
   
   
   
    
   
   
   
   <img src="p_w_picpaths/gray.gif" id="gray" /> 
   
   
   
   我猜是 <input type="text" id="grayGuess" /> 
   
   
   
   <button onclick="judge()" id="btnSubmit">兔小灰提交</button> 
   
   
   
    
   
   
   
   </body> 
   
   
   
   </html>

兔小白認真閱讀了沒？下面是家庭做業了：請改寫一下代碼，若是兔小灰能在5次之內猜中，就獎給它一根胡蘿蔔。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。