寫給兔小白的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教程