又上课啦，控制语句里还差一个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.  
  
 
  

 
  
其实还能更变态一点：
 
  
 
   
 
    

     
      
 
        
        

         1
        
 
        

         2
        
 
        

         3
        
 
        

         4
        
 		 
        
        
 
         
 
          var 
          sum = (
          function
          (x, y){ 
         
 
         
 
              
          return 
          x + y; 
         
 
         

          })(100 ,200);
         
 
         

          alert(sum);
         
 
        
 		 
      

     
    
 
   
 
  
 
  

 
  
今天的内容有点多，虽然都没有深入下去，但也够兔子理解一会儿了。来玩小游戏吧，之前看兔小白对动画比较感兴趣，今天上个动画的小游戏，用上下左右键可以控制小人四处走动，不是简单的移动哟，走路是有动画的：
 
  
161414253.png
 
  
然后是代码了：
 
  
 
  
     
   
  1.  
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> 
     
    2.  
   
  2.  
    <html> 
     
    3.  
   
  3.  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     
    4.  
   
  4.  
    <title>简单的动画</title> 
     
    5.  
   
  5.  
    <style> 
     
    6.  
   
  6.  
    #user{width:27px;height:41px;top:100px;left:200px;position:absolute;url(images /user.png) 0 0}
     
    7.  
   
  7.  
    </style> 
     
    8.  
   
  8.  
    <script type="text/javascript" language="javascript"> 
     
    9.  
   
  9.  
    //定义几个全局的变量
     
    10.  
   
  10.  
    //direction记录运动方向，0=停止、1=下、2=左、3=右、4=上，为什么这么定义呢？这样会上图片的行相匹配，后面好处理
     
    11.  
   
  11.  
    //img_x和img_y分别记录图片在div背景上的横向和纵向偏移
     
    12.  
   
  12.  
    var direction = 0, img_x = 0, img_y = 0; 
     
    13.  
   
  13.  
    //老面孔啦，不过这回它换了个时髦的名字，不叫get啦，改叫$了，没错，这也是合法的方法名
     
    14.  
   
  14.  
    function $(id){ 
     
    15.  
   
  15.  
    return document.getElementById(id); 
     
    16.  
   
  16.  
    } 
     
    17.  
   
  17.  
    //初始化
     
    18.  
   
  18.  
    function init(){ 
     
    19.  
   
  19.  
    //为document对象定义事件处理函数，注意是不加括号的写法
     
    20.  
   
  20.  
        document.onkeydown = keydownHandler; 
     
    21.  
   
  21.  
        document.onkeyup = keyupHandler; 
     
    22.  
   
  22.  
    //设定定时器，第一个用来播放动画，第二个用来移动小人
     
    23.  
   
  23.  
    //注意也是用的指针的方式
     
    24.  
   
  24.  
        window.setInterval(play, 100); 
     
    25.  
   
  25.  
        window.setInterval(move, 25); 
     
    26.  
   
  26.  
    } 
     
    27.  
   
  27.  
    //播放动画的方法
     
    28.  
   
  28.  
    function play(){ 
     
    29.  
   
  29.  
    var user = $("user"); 
     
    30.  
   
  30.  
    if(direction == 0){ 
     
    31.  
   
  31.  
    //如果是停止，就把背景图片的x偏移置为最左边一列，y偏移不动
     
    32.  
   
  32.  
            img_x = 0; 
     
    33.  
   
  33.  
        } 
     
    34.  
   
  34.  
    else{ 
     
    35.  
   
  35.  
    //我们的小人大小是27*41
     
    36.  
   
  36.  
    //把img_x减掉27，表示向左移动27像素，这样就移到第二张图了。当然啦，要注意一行只有4张图，超出了还要回到0
     
    37.  
   
  37.  
    if((img_x -= 27) <= -108) 
     
    38.  
   
  38.  
                img_x = 0; 
     
    39.  
   
  39.  
    //y偏移与运动方向相关，把direction减掉1，再乘41，就是对应行的图片了
     
    40.  
   
  40.  
            img_y = -41 * (direction - 1); 
     
    41.  
   
  41.  
        } 
     
    42.  
   
  42.  
    //这里涉及到了一个浏览器差异的问题，backgroundPositionX表示背景图的x偏移，对应css是background-position-x
     
    43.  
   
  43.  
    //但只有ie和chrome支持它，firefox不支持，firefox只支持backgroundPosition
     
    44.  
   
  44.  
    //所以要判断一下是否支持，支持才用这种方法设置，否则要换方法
     
    45.  
   
  45.  
    //对前端工程师来说，最讨厌的就是浏览器差异了，很多库比如后面要讲到的jQuery，都在努力通过封装透明化这些差异
     
    46.  
   
  46.  
    if(user.style.backgroundPositionX){ 
     
    47.  
   
  47.  
            $("user").style.backgroundPositionX = img_x + "px"; 
     
    48.  
   
  48.  
            $("user").style.backgroundPositionY = img_y + "px"; 
     
    49.  
   
  49.  
        } 
     
    50.  
   
  50.  
    else{ 
     
    51.  
   
  51.  
            $("user").style.backgroundPosition = img_x + "px " + img_y + "px"; 
     
    52.  
   
  52.  
        } 
     
    53.  
   
  53.  
    } 
     
    54.  
   
  54.  
    //移动小人的方法
     
    55.  
   
  55.  
    function move(){ 
     
    56.  
   
  56.  
    var user = $("user"); 
     
    57.  
   
  57.  
    //这里用到今天学的swtich...case了
     
    58.  
   
  58.  
    switch(direction){ 
     
    59.  
   
  59.  
    case 1:     //向下
     
    60.  
   
  60.  
                user.style.top = (user.offsetTop + 2) + "px";   break; 
     
    61.  
   
  61.  
    case 2:     //向左
     
    62.  
   
  62.  
                user.style.left = (user.offsetLeft - 2) + "px"; break; 
     
    63.  
   
  63.  
    case 3:     //向右
     
    64.  
   
  64.  
                user.style.left = (user.offsetLeft + 2) + "px"; break; 
     
    65.  
   
  65.  
    case 4:     //向上
     
    66.  
   
  66.  
                user.style.top = (user.offsetTop - 2) + "px";   break; 
     
    67.  
   
  67.  
        } 
     
    68.  
   
  68.  
    } 
     
    69.  
   
  69.  
    //键按下时的处理方法
     
    70.  
   
  70.  
    function keydownHandler(evt){ 
     
    71.  
   
  71.  
        evt = evt || event; 
     
    72.  
   
  72.  
    //瞧，又看到今天学的switch了
     
    73.  
   
  73.  
    switch(evt.keyCode){ 
     
    74.  
   
  74.  
    case 37: 
     
    75.  
   
  75.  
                direction = 2;  break; 
     
    76.  
   
  76.  
    case 38: 
     
    77.  
   
  77.  
                direction = 4;  break; 
     
    78.  
   
  78.  
    case 39: 
     
    79.  
   
  79.  
                direction = 3;  break; 
     
    80.  
   
  80.  
    case 40: 
     
    81.  
   
  81.  
                direction = 1;  break;   
     
    82.  
   
  82.  
        } 
     
    83.  
   
  83.  
    } 
     
    84.  
   
  84.  
    //键抬起时的处理方法
     
    85.  
   
  85.  
    function keyupHandler(){ 
     
    86.  
   
  86.  
    //键抬起来了，表示停止移动了，设置direction=0
     
    87.  
   
  87.  
        direction = 0; 
     
    88.  
   
  88.  
    } 
     
    89.  
   
  89.  
    </script> 
     
    90.  
   
  90.  
    <body onload="init()"> 
     
    91.  
   
  91.  
    <!-- 这个就是我们的主角啦 --> 
     
    92.  
   
  92.  
    <div id="user"></div> 
     
    93.  
   
  93.  
    </body> 
     
    94.  
   
  94.  
    </html> 
     
    95.  
  
 
  
认真读代码了没？今天这个有点长，内容也比较多，有不懂的欢迎提问。
 
  
今天的作业是：
 
  
1、基础题：现在的小人有时会走出边界消失，能不能不让它出去？或者从左边走出去就又从右边进来？
 
  
2、进阶题：能不能按键盘上的H键时，让小人说一句"Hello!"，就像下面图中一样: 
161530247.png