叮铃铃，上课啦~~

昨天的家庭作业兔小白完成得不错，今天开始我们要正式学习语法了。老规矩，后面会有小游戏等着兔子哟~~

1、javascript中的常量与变量

所有编程语言都会涉及这两个概念，所谓常量就是值不变的固定数据，变量就是值可以按需要变化的数据，兔有Perl的基础，应该不难理解。我们来看几个例子，加深一下理解：

 
   
  1. //用var定义一个变量number，把整型常量100赋给它，这样它也是整型的了 
  2. var number = 100; 
  3.  
  4. //这几个是把字符串常量赋给变量，单双引号的用法很灵活哟 
  5. var msg1 = "这是一个字符串"; 
  6. var msg2 = '这是单引号的字符串'; 
  7. var msg3 = "还可以混用'单双引号'哟"; 
  8. var msg4 = '换过来用"单双引号"也可以哟'; 
  9.  
  10. //用一个var可以同时声明多个变量，这里的y是实型变量，就是小数 
  11. var x = 100, y = 120.15; 
  12.  
  13. //也可以先定义，后赋值 
  14. var exist; 
  15. exist = true; 
  16.  
  17. //不光可以把常量赋给变量，变量也可以赋给变量 
  18. var top = 100, bottom = top; 
  19.  
  20. //这是定义数组，数组就是多个数据的集合 
  21. var list = [100, 120, 140, 160, 180]; 
  22.  
  23. //这是定义对象，上一篇中出现的window就是一个js内置的对象，对象中可以有方法和变量，兔可以先不用深究，后面还会遇到 
  24. var obj = { id:1, name:"Bunny", hello:function(){return "Hello"} }; 
 
   

怎么样，还不算复杂吧？OK，我们继续。
 
   
2、控制语句
 
   
一门语言光有变量能干什么？我们最终是要用它执行逻辑的，所以接下来我们看看语句与方法。
 
   
先看控制语句吧，这个最常用，因为计算机比较笨，只会按规则办事，如果满足什么条件就怎么怎么样，否则就不怎么怎么样。javascript里判断语句的语法是这样的：
 
   
 
   
  1. //基本判断 
  2. if(条件) 
  3.     执行语句1; 
  4. else 
  5.     执行语句2; 
  6.  
  7. //多级判断 
  8. if(条件1) 
  9.     执行语句1; 
  10. else if(条件2) 
  11.     执行语句2; 
  12. else 
  13.     执行语句3; 
  14.  
  15. //嵌套判断 
  16. if(条件1){ 
  17.     if(条件2) 
  18.         执行语句2; 
  19.     else 
  20.         执行语句3; 
  21. } 
  22. else{ 
  23.     执行语句1; 
  24. } 
 
   
我们来尝试用判断语句结合变量做点事情：判断奇偶数。
 
   
 
   
  1. /* 
  2.  * 判断给定的变量number是否奇数 
  3.  */ 
  4. function isOdd(number){ 
  5.     var odd; 
  6.     if(number % 2 != 0)   //%是取模运算，就是取两个数相除后的余数 
  7.         odd = true; 
  8.     else 
  9.         odd = false; 
  10.  
  11.     return odd; 
  12. } 
 
   

 3、方法
 
   
刚才判断奇偶数的时候，我们遇到了一个新的概念：方法（或者叫函数）。  
 
   
所谓方法，可以认为它是多条语句的一个集合，用来完成特定的功能。javascript内置了许多函数，比如parseInt()可以把一个字符串转化成对应的整数，getElementById()可以取到页面中的元素。
 
   
我们也可以自己定义方法，比如上面的isOdd()就是一个我们自己定义的方法，关键字function表示定义方法，isOdd是函数名，它接收一个参数number，并且有返回值，告诉调用者运算的结果是什么。
 
   
适当使用方法对大段的语句进行封装可以使程序结构清晰，更简洁易懂。
 
   

 好了，兔子累了，上个小游戏吧，整合一下今天的知识。游戏名叫“兔小灰猜数”，运行时，兔小白会随机想好一个100以内的整数让兔小灰猜，每次兔小白会告诉兔小灰猜大了还是猜小了，直到猜中为止。
 
   
 
   

 上代码啦，请兔小白认真阅读。
 
   
 
   
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  2. <html> 
  3. <title>兔小灰猜数</title> 
  4. <style> 
  5. *{font-size:20px;font-family:"微软雅黑"} 
  6. #whiteSay{display:inline-block;width:300px;text-align:right} 
  7. #grayGuess{width:60px} 
  8. </style> 
  9. <script type="text/javascript" language="javascript"> 
  10.  
  11. //定义两个变量，number用来存兔小白随机想好的数，count用来存兔小灰猜的次数 
  12. var whiteNumber = 0, count = 1; 
  13.  
  14. /* 
  15.  * 初始化方法，给number赋值用的 
  16.  */ 
  17. function init(){ 
  18.     //Math是一个js内置的对象，它上面定义了很多与数学相关的方法 
  19.     //random()用来随机生成一个0~1之间的小数，我们把它乘以100就得到了一个0~100之间的小数 
  20.     //再用floor()方法取一下整，就是0~100之间的整数了 
  21.     whiteNumber = Math.floor(Math.random() * 100); 
  22. } 
  23.  
  24. /* 
  25.  * 用来判断兔小灰输入的方法 
  26.  */ 
  27. function judge(){ 
  28.      
  29.     //这个get是什么呢？它是个自定义的方法（见下方），其实就是老写document.getElementById有点麻烦，所以提成一个自定义方法，这样使用时能缩短点 
  30.     var guess = get("grayGuess"),   say = get("whiteSay"); 
  31.  
  32.     //parseInt()用来把一个字符串转化成对应的整数，注意如果字符串不合法，它可能转换出一个NaN来(Not a Number的意义) 
  33.     //这里我们把guess.value转化一下，它就是输入框的值 
  34.     var guessNum = parseInt(guess.value); 
  35.  
  36.     //要做一下判断，必须是数字、且大于0、且小于100，才认为兔小灰输入是合法的 
  37.     if(!isNaN(guessNum) && guessNum > 0 && guessNum <= 100){ 
  38.  
  39.         //如果兔小灰猜的和兔小白想的一样，就是猜对了 
  40.         if(guessNum == whiteNumber){ 
  41.             say.innerText = "恭喜兔小灰猜对啦~~";           //输出信息 
  42.             get("white").src = "images/succeed.jpg";    //更换图片 
  43.             get("btnSubmit").disabled = "disabled";     //禁用按钮，因为不用继续猜了 
  44.         } 
  45.         //猜大了 
  46.         else if(guessNum > whiteNumber){ 
  47.             say.innerText = "第" + (count++) + "次，你猜大啦~~"; 
  48.         } 
  49.         //既没猜中也没猜大，那就只能是猜小了 
  50.         else{ 
  51.             say.innerText = "第" + (count++) + "次，你猜得有点小哟~~~"; 
  52.         } 
  53.  
  54.     } 
  55.     //输入不合法 
  56.     else{ 
  57.         say.innerText = "不许乱输入！！"; 
  58.     } 
  59.  
  60.     //清空输入框 
  61.     guess.value = ""; 
  62.     //focus()方法用于把输入焦点定位到指定元素上 
  63.     guess.focus(); 
  64. } 
  65.  
  66. /* 
  67.  * 我们自定义的一个方法，这样就不用总写document......了 
  68.  */ 
  69. function get(id){ 
  70.     return document.getElementById(id); 
  71. } 
  72.  
  73. </script> 
  74. <body οnlοad="init()"> 
  75.  
  76. <span id="whiteSay">我想好了一个100以内的数，猜猜是多少吧</span> 
  77. <img src="images/white.gif" id="white" /> 
  78.  
  79. <br/> 
  80.  
  81. <img src="images/gray.gif" id="gray" /> 
  82. 我猜是 <input type="text" id="grayGuess" /> 
  83. <button οnclick="judge()" id="btnSubmit">兔小灰提交</button> 
  84.  
  85. </body> 
  86. </html> 
 
   
 
 
   
兔小白认真阅读了没？ 下面是家庭作业了：请改写一下代码，如果兔小灰能在5次以内猜中，就奖给它一根胡萝卜。