叮铃铃,上课啦~~

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

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. else
  22.     执行语句1; 

我们来尝试用判断语句结合变量做点事情:判断奇偶数。


  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; 


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. function judge(){ 
  27.      
  28.     //这个get是什么呢?它是个自定义的方法(见下方),其实就是老写document.getElementById有点麻烦,所以提成一个自定义方法,这样使用时能缩短点 
  29.     var guess = get("grayGuess"),   say = get("whiteSay"); 
  30.  
  31.     //parseInt()用来把一个字符串转化成对应的整数,注意如果字符串不合法,它可能转换出一个NaN来(Not a Number的意义) 
  32.     //这里我们把guess.value转化一下,它就是输入框的值 
  33.     var guessNum = parseInt(guess.value); 
  34.  
  35.     //要做一下判断,必须是数字、且大于0、且小于100,才认为兔小灰输入是合法的 
  36.     if(!isNaN(guessNum) && guessNum > 0 && guessNum <= 100){ 
  37.  
  38.         //如果兔小灰猜的和兔小白想的一样,就是猜对了 
  39.         if(guessNum == whiteNumber){ 
  40.             say.innerText = "恭喜兔小灰猜对啦~~";           //输出信息 
  41.             get("white").src = "images/succeed.jpg";    //更换图片 
  42.             get("btnSubmit").disabled = "disabled";     //禁用按钮,因为不用继续猜了 
  43.         } 
  44.         //猜大了 
  45.         else if(guessNum > whiteNumber){ 
  46.             say.innerText = "第" + (count++) + "次,你猜大啦~~"
  47.         } 
  48.         //既没猜中也没猜大,那就只能是猜小了 
  49.         else
  50.             say.innerText = "第" + (count++) + "次,你猜得有点小哟~~~"
  51.         } 
  52.  
  53.     } 
  54.     //输入不合法 
  55.     else
  56.         say.innerText = "不许乱输入!!"
  57.     } 
  58.  
  59.     //清空输入框 
  60.     guess.value = ""
  61.     //focus()方法用于把输入焦点定位到指定元素上 
  62.     guess.focus(); 
  63.  
  64. /* 
  65.  * 我们自定义的一个方法,这样就不用总写document......了 
  66.  */ 
  67. function get(id){ 
  68.     return document.getElementById(id); 
  69.  
  70. </script> 
  71. <body onload="init()"
  72.  
  73. <span id="whiteSay">我想好了一个100以内的数,猜猜是多少吧</span> 
  74. <img src="images/white.gif" id="white" /> 
  75.  
  76. <br/> 
  77.  
  78. <img src="images/gray.gif" id="gray" /> 
  79. 我猜是 <input type="text" id="grayGuess" /> 
  80. <button onclick="judge()" id="btnSubmit">兔小灰提交</button> 
  81.  
  82. </body> 
  83. </html> 

 

兔小白认真阅读了没? 下面是家庭作业了:请改写一下代码,如果兔小灰能在5次以内猜中,就奖给它一根胡萝卜。