又上课啦，控制语句里还差一个switch...case，我们今天讲完它，然后要开始正式讲方法啦。

switch的行为其实与if很接近，我们看看它的语法：

   
   
   
   
    
    
    
    
    
  1. switch(变量表达式){ 
    2. 
    
    
    
    
  2. case 值1: 
    3. 
    
    
    
    
  3. //do something
    4. 
    
    
    
    
  4. break; 
    5. 
    
    
    
    
  5. case 值2: 
    6. 
    
    
    
    
  6. //do something
    7. 
    
    
    
    
  7. break; 
    8. 
    
    
    
    
  8. default: 
    9. 
    
    
    
    
  9. //do something
    10. 
    
    
    
    
  10. break; 
    11. 
    
    
    
    
  11. } 
    12.

为什么说它和if很像呢？因为它完全可以转化为下面的形式：

   
   
   
   
    
    
    
    
    
  1. if(变量表达式 == 值1) 
    2. 
    
    
    
    
  2. //do something
    3. 
    
    
    
    
  3. elseif(变量表达式 == 值2) 
    4. 
    
    
    
    
  4. //do something
    5. 
    
    
    
    
  5. else
    6. 
    
    
    
    
  6. //do something
    7.

相比之下，用switch...case在代码可读性上会比用if...else更好一些。

注意那个break很重要，如果少了break，代码会一直向下执行直到找到break或出了switch的范围时才会停止。不过有时可以利用一下这个特性：

   
   
   
   
    
    
    
    
    
  1. switch(变量表达式){ 
    2. 
    
    
    
    
  2. case 值1: 
    3. 
    
    
    
    
  3. case 值2: 
    4. 
    
    
    
    
  4. //do something
    5. 
    
    
    
    
  5. break; 
    6. 
    
    
    
    
  6. case 值3: 
    7. 
    
    
    
    
  7. //do something
    8. 
    
    
    
    
  8. break; 
    9. 
    
    
    
    
  9. } 
    10.

表示值1与值2时执行相同的代码。


OK，消化一下，下面要讲方法啦。

其实之前已经不止一次接触过方法了，在有些书上管它叫函数，指的都是function。系统有许多内置的方法，比如我们已经接触过的parseInt()、document.getElementById()等等，还有一类是自定义方法，就是写程序的人自己定义的。前者数量很多，建议兔去查文档，本教程不会一一讲解，只在demo中随用随讲。后者对我们来说才是最重要的。

1、方法的定义

一个方法，其形态一般是这样的：

   
   
   
   
    
    
    
    
    
  1. function 方法名(参数1, 参数2){ 
    2. 
    
    
    
    
  2. //do something
    3. 
    
    
    
    
  3. return 返回值; 
    4. 
    
    
    
    
  4. } 
    5.

关键字function表示后面的定义是一个方法而不是变量，方法名在当前文档里要唯一（暂时这么认为吧）。参数是输入数据，不是必须的，关键字return用来向外返回结果，也不是必须的。

比如我们要做一个加法：

   
   
   
   
    
    
    
    
    
  1. function add(x, y){ 
    2. 
    
    
    
    
  2. return x + y; 
    3. 
    
    
    
    
  3. } 
    4.

2、方法的调用

比如我们要调用一下上面写的add()方法，这么写：

   
   
   
   
    
    
    
    
    
  1. var sum = add(100, 200); 
    2.

3、方法的指针

方法名后面不写括号，就表示方法的指针。指针是个什么概念呢？兔可以先这么理解：方法相当于一个储物柜，里面有很多内容，方法的指针相当于储物柜的号码，号码很短，但通过号码我们就能拿到储物柜里的所有东西。

方法有了指针，就可以像变量那样进行赋值了，看这段代码：

   
   
   
   
    
    
    
    
    
  1. function add(x, y){ 
    2. 
    
    
    
    
  2. return x + y; 
    3. 
    
    
    
    
  3. } 
    4. 
    
    
    
    
  4. var func = add; 
    5. 
    
    
    
    
  5. window.alert(func(x, y)); 
    6.

我们并没有定义func()这个方法，只是把add()方法的指针赋给了它，相当于它里面存的就是add()方法的索引了，调用它和调用add()是一样的。

4、匿名方法

在定义方法的时候，有时我们也可以不提供方法名，这就叫“匿名方法”，比如第一节课的时候用到window.setInterval()，提供给它的第一个参数就是个匿名方法：

   
   
   
   
    
    
    
    
    
  1. window.setInterval(function(){ ... }, 100); 
    2.

在function后面没有写方法名，直接就上括号了。因为这里写不写方法名无所谓，这是个“一次性”的方法，只在这里用，不会在别处用方法名来调用它。

结合上面讲的方法指针，兔如果见了这样的用法不要惊奇：

   
   
   
   
    
    
    
    
    
  1. var func = function(x, y){ 
    2. 
    
    
    
    
  2. return x + y; 
    3. 
    
    
    
    
  3. }; 
    4. 
    
    
    
    
  4. alert(func(100, 200)); 
    5.


其实还能更变态一点：

var sum = (function(x, y){
    return x + y;
})(100 ,200);
alert(sum);


今天的内容有点多，虽然都没有深入下去，但也够兔子理解一会儿了。来玩小游戏吧，之前看兔小白对动画比较感兴趣，今天上个动画的小游戏，用上下左右键可以控制小人四处走动，不是简单的移动哟，走路是有动画的：

写给兔小白的js教程(4)_第1张图片

然后是代码了：

   
   
   
   
    
    
    
    
    
  1. "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> 
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. "Content-Type" content="text/html; charset=utf-8" /> 
    4. 
    
    
    
    
  4. 简单的动画 
    5. 
    
    
    
    
  5.  
    6. 
    
    
    
    
  6.  
    7. 
    
    
    
    
  7. "init()"> 
    8. 
    
    
    
    
  8.  
    9. 
    
    
    
    
  9. "user">
     
    10. 
    
    
    
    
  10.  
    11. 
    
    
    
    
  11.  
    12.

认真读代码了没？今天这个有点长，内容也比较多，有不懂的欢迎提问。

今天的作业是：

1、基础题：现在的小人有时会走出边界消失，能不能不让它出去？或者从左边走出去就又从右边进来？

2、进阶题：能不能按键盘上的H键时，让小人说一句"Hello!"，就像下面图中一样: