本文共 4272 字，大约阅读时间需要 14 分钟。
又上课啦，控制语句里还差一个switch...case，我们今天讲完它，然后要开始正式讲方法啦。
switch的行为其实与if很接近，我们看看它的语法：
switch(变量表达式){
case 值1:
//do something
break;
case 值2:
//do something
break;
default:
//do something
break;
}
为什么说它和if很像呢？因为它完全可以转化为下面的形式：
if(变量表达式 == 值1)
//do something
elseif(变量表达式 == 值2)
//do something
else
//do something
相比之下，用switch...case在代码可读性上会比用if...else更好一些。
注意那个break很重要，如果少了break，代码会一直向下执行直到找到break或出了switch的范围时才会停止。不过有时可以利用一下这个特性：
switch(变量表达式){
case 值1:
case 值2:
//do something
break;
case 值3:
//do something
break;
}
表示值1与值2时执行相同的代码。
OK，消化一下，下面要讲方法啦。
其实之前已经不止一次接触过方法了，在有些书上管它叫函数，指的都是function。系统有许多内置的方法，比如我们已经接触过的parseInt()、document.getElementById()等等，还有一类是自定义方法，就是写程序的人自己定义的。前者数量很多，建议兔去查文档，本教程不会一一讲解，只在demo中随用随讲。后者对我们来说才是最重要的。
1、方法的定义
一个方法，其形态一般是这样的：
function 方法名(参数1, 参数2){
//do something
return 返回值;
}
关键字function表示后面的定义是一个方法而不是变量，方法名在当前文档里要唯一（暂时这么认为吧）。参数是输入数据，不是必须的，关键字return用来向外返回结果，也不是必须的。
比如我们要做一个加法：
function add(x, y){
return x + y;
}
2、方法的调用
比如我们要调用一下上面写的add()方法，这么写：
var sum = add(100, 200);
3、方法的指针
方法名后面不写括号，就表示方法的指针。指针是个什么概念呢？兔可以先这么理解：方法相当于一个储物柜，里面有很多内容，方法的指针相当于储物柜的号码，号码很短，但通过号码我们就能拿到储物柜里的所有东西。
方法有了指针，就可以像变量那样进行赋值了，看这段代码：
function add(x, y){
return x + y;
}
var func = add;
window.alert(func(x, y));
我们并没有定义func()这个方法，只是把add()方法的指针赋给了它，相当于它里面存的就是add()方法的索引了，调用它和调用add()是一样的。
4、匿名方法
在定义方法的时候，有时我们也可以不提供方法名，这就叫“匿名方法”，比如第一节课的时候用到window.setInterval()，提供给它的第一个参数就是个匿名方法：
window.setInterval(function(){ ... }, 100);
在function后面没有写方法名，直接就上括号了。因为这里写不写方法名无所谓，这是个“一次性”的方法，只在这里用，不会在别处用方法名来调用它。
结合上面讲的方法指针，兔如果见了这样的用法不要惊奇：
var func = function(x, y){
return x + y;
};
alert(func(100, 200));
其实还能更变态一点：
var sum = (function(x, y){ return x + y;})(100 ,200);alert(sum); 今天的内容有点多，虽然都没有深入下去，但也够兔子理解一会儿了。来玩小游戏吧，之前看兔小白对动画比较感兴趣，今天上个动画的小游戏，用上下左右键可以控制小人四处走动，不是简单的移动哟，走路是有动画的：
然后是代码了：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单的动画</title>
<style>
#user{width:27px;height:41px;top:100px;left:200px;position:absolute;url(images /user.png) 0 0}
</style>
<script type="text/javascript" language="javascript">
//定义几个全局的变量
//direction记录运动方向，0=停止、1=下、2=左、3=右、4=上，为什么这么定义呢？这样会上图片的行相匹配，后面好处理
//img_x和img_y分别记录图片在div背景上的横向和纵向偏移
var direction = 0, img_x = 0, img_y = 0;
//老面孔啦，不过这回它换了个时髦的名字，不叫get啦，改叫$了，没错，这也是合法的方法名
function $(id){
return document.getElementById(id);
}
//初始化
function init(){
//为document对象定义事件处理函数，注意是不加括号的写法
document.onkeydown = keydownHandler;
document.onkeyup = keyupHandler;
//设定定时器，第一个用来播放动画，第二个用来移动小人
//注意也是用的指针的方式
window.setInterval(play, 100);
window.setInterval(move, 25);
}
//播放动画的方法
function play(){
var user = $("user");
if(direction == 0){
//如果是停止，就把背景图片的x偏移置为最左边一列，y偏移不动
img_x = 0;
}
else{
//我们的小人大小是27*41
//把img_x减掉27，表示向左移动27像素，这样就移到第二张图了。当然啦，要注意一行只有4张图，超出了还要回到0
if((img_x -= 27) <= -108)
img_x = 0;
//y偏移与运动方向相关，把direction减掉1，再乘41，就是对应行的图片了
img_y = -41 * (direction - 1);
}
//这里涉及到了一个浏览器差异的问题，backgroundPositionX表示背景图的x偏移，对应css是background-position-x
//但只有ie和chrome支持它，firefox不支持，firefox只支持backgroundPosition
//所以要判断一下是否支持，支持才用这种方法设置，否则要换方法
//对前端工程师来说，最讨厌的就是浏览器差异了，很多库比如后面要讲到的jQuery，都在努力通过封装透明化这些差异
if(user.style.backgroundPositionX){
$("user").style.backgroundPositionX = img_x + "px";
$("user").style.backgroundPositionY = img_y + "px";
}
else{
$("user").style.backgroundPosition = img_x + "px " + img_y + "px";
}
}
//移动小人的方法
function move(){
var user = $("user");
//这里用到今天学的swtich...case了
switch(direction){
case 1: //向下
user.style.top = (user.offsetTop + 2) + "px"; break;
case 2: //向左
user.style.left = (user.offsetLeft - 2) + "px"; break;
case 3: //向右
user.style.left = (user.offsetLeft + 2) + "px"; break;
case 4: //向上
user.style.top = (user.offsetTop - 2) + "px"; break;
}
}
//键按下时的处理方法
function keydownHandler(evt){
evt = evt || event;
//瞧，又看到今天学的switch了
switch(evt.keyCode){
case 37:
direction = 2; break;
case 38:
direction = 4; break;
case 39:
direction = 3; break;
case 40:
direction = 1; break;
}
}
//键抬起时的处理方法
function keyupHandler(){
//键抬起来了，表示停止移动了，设置direction=0
direction = 0;
}
</script>
<body οnlοad="init()">
<!-- 这个就是我们的主角啦 -->
<div id="user"></div>
</body>
</html>
认真读代码了没？今天这个有点长，内容也比较多，有不懂的欢迎提问。
今天的作业是：
1、基础题：现在的小人有时会走出边界消失，能不能不让它出去？或者从左边走出去就又从右边进来？
2、进阶题：能不能按键盘上的H键时，让小人说一句"Hello!"，就像下面图中一样:
转载地址：http://siwdo.baihongyu.com/