写给兔小白的js教程(2)

叮铃铃，上课啦~~

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

1、javascript中的常量与变量

所有编程语言都会涉及这两个概念，所谓常量就是值不变的固定数据，变量就是值可以按需要变化的数据，兔有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，我们继续。

2、控制语句

一门语言光有变量能干什么？我们最终是要用它执行逻辑的，所以接下来我们看看语句与方法。

先看控制语句吧，这个最常用，因为计算机比较笨，只会按规则办事，如果满足什么条件就怎么怎么样，否则就不怎么怎么样。javascript里判断语句的语法是这样的：

//基本判断
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;
}

3、方法

刚才判断奇偶数的时候，我们遇到了一个新的概念：方法（或者叫函数）。  

所谓方法，可以认为它是多条语句的一个集合，用来完成特定的功能。javascript内置了许多函数，比如parseInt()可以把一个字符串转化成对应的整数，getElementById()可以取到页面中的元素。

我们也可以自己定义方法，比如上面的isOdd()就是一个我们自己定义的方法，关键字function表示定义方法，isOdd是函数名，它接收一个参数number，并且有返回值，告诉调用者运算的结果是什么。

适当使用方法对大段的语句进行封装可以使程序结构清晰，更简洁易懂。

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

上代码啦，请兔小白认真阅读。

"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

兔小灰猜数
 </span></li> 
    <li class="alt"><span>*{font-size:20px;font-family:<span class="string">"微软雅黑"</span><span>} </span></span></li> 
    <li><span><span class="preprocessor">#whiteSay{display:inline-block;width:300px;text-align:right}</span><span> </span></span></li> 
    <li class="alt"><span><span class="preprocessor">#grayGuess{width:60px}</span><span> </span></span></li> 
    <li><span>
"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 = "images/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);
}


"init()">

"whiteSay">我想好了一个100以内的数，猜猜是多少吧
"images/white.gif" id="white" />



"images/gray.gif" id="gray" />
我猜是 "text" id="grayGuess" />
"judge()" id="btnSubmit">兔小灰提交

 

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