写给兔小白的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次之内猜中，就奖给它一根胡萝卜。