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

时间  2020-01-14
标签 写给 白的 教程 栏目 JavaScript 繁體版
原文   原文链接

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

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

  
  
  
  
    
   
   
   
   
  1. switch(变量表达式){ html
    2. 
   
   
   
   
  2. case 值1: 前端
    3. 
   
   
   
   
  3. //do somethingjava
    4. 
   
   
   
   
  4. break; chrome
    5. 
   
   
   
   
  5. case 值2: 浏览器
    6. 
   
   
   
   
  6. //do something前端工程师
    7. 
   
   
   
   
  7. break; ide
    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. 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.

二、方法的调用

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

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

三、方法的指针

方法名后面不写括号，就表示方法的指针。指针是个什么概念呢？兔能够先这么理解：方法至关于一个储物柜，里面有不少内容，方法的指针至关于储物柜的号码，号码很短，但经过号码咱们就能拿到储物柜里的全部东西。

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

  
  
  
  
    
   
   
   
   
  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()是同样的。

四、匿名方法

在定义方法的时候，有时咱们也能够不提供方法名，这就叫“匿名方法”，好比第一节课的时候用到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);


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

而后是代码了：

  
  
  
  
    
   
   
   
   
  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(p_w_picpaths /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.

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

今天的做业是：

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

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程