最近我家兔小白要转行学javascript了，不过又懒得抱着大本的书死啃语法，于是只好为兔宝写篇教程了。

生物书上讲，大段的文字对兔子有催眠效果，因此本教程争取以有趣的示例为主，防止兔子睡着。没有兔子基因的物种以及高手们请绕道，因为本教程真的不会写出什么新鲜东西来，嘿嘿。

先上个小游戏吧，名字叫“追逐兔小白的兔小灰”，游戏中移动鼠标就能移动兔小白，而兔小灰会不停的追兔小白：

上代码喽，兔小白请认真阅读，不要睡着：

 
    
     
         
  1. <html> 
    2.  
         
  2. <head> 
    3.  
         
  3. <title> 
    4.  
         
  4. 追逐兔小白的兔小灰 
    5.  
         
  5. </title> 
    6.  
         
  6. <style> 
    7.  
         
  7. .bunny{ 
    8.  
         
  8.     position:absolute; 
    9.  
         
  9.     width:91px; 
    10.  
         
  10.     height:152px; 
    11.  
         
  11. } 
    12.  
         
  12. </style> 
    13.  
         
  13. <script> 
    14.  
         
  14. /* 
    15.  
         
  15.  * 定义一个名叫init的方法 
    16.  
         
  16.  * 在body的onload时调用它，我们用它来初始化一些东西 
    17.  
         
  17.  */ 
    18.  
         
  18. function init(){ 
    19.  
         
  19.  
    20.  
         
  20.     //setInterval方法用于设定一个定时器，它会每隔一定时间执行你指定的方法 
    21.  
         
  21.     //第一个参数是一个function，它就是每次定时器触发时需要执行的代码 
    22.  
         
  22.     //第二个参数50表示每50毫秒执行一次 
    23.  
         
  23.     window.setInterval(function(){ 
    24.  
         
  24.  
    25.  
         
  25.         //document.getElementById表示按id获取文档中的指定元素 
    26.  
         
  26.         var white = document.getElementById("white"),  
    27.  
         
  27.             gray = document.getElementById("gray"); 
    28.  
         
  28.  
    29.  
         
  29.         //为了让兔小灰追着兔小白，我们要判断两者的位置 
    30.  
         
  30.         //如果兔小灰当前的x坐标(offsetLeft)大于兔小白的，就把兔小灰向左移动一点（减5个像素），反之就向右移动 
    31.  
         
  31.         if(gray.offsetLeft > white.offsetLeft) 
    32.  
         
  32.             gray.style.left = gray.offsetLeft - 5; 
    33.  
         
  33.         else if(gray.offsetLeft < white.offsetLeft) 
    34.  
         
  34.             gray.style.left = gray.offsetLeft + 5; 
    35.  
         
  35.  
    36.  
         
  36.         //同理处理纵坐标 
    37.  
         
  37.         if(gray.offsetTop > white.offsetTop) 
    38.  
         
  38.             gray.style.top = gray.offsetTop - 5; 
    39.  
         
  39.         else if(gray.offsetTop < white.offsetTop) 
    40.  
         
  40.             gray.style.top = gray.offsetTop + 5; 
    41.  
         
  41.  
    42.  
         
  42.     }, 50); 
    43.  
         
  43.      
    44.  
         
  44. } 
    45.  
         
  45.  
    46.  
         
  46. /* 
    47.  
         
  47.  * 定义一个名叫bunnyRun的方法 
    48.  
         
  48.  * 在body的onmousemove时调用它，我们用它来移动兔小白 
    49.  
         
  49.  */ 
    50.  
         
  50. function bunnyRun(){ 
    51.  
         
  51.     //把兔小白的x与y坐标设定成与鼠标当前位置一致，这样就能用鼠标移动兔小白了 
    52.  
         
  52.     var white = document.getElementById("white"); 
    53.  
         
  53.     white.style.left = event.clientX; 
    54.  
         
  54.     white.style.top = event.clientY; 
    55.  
         
  55. } 
    56.  
         
  56.  
    57.  
         
  57. </script> 
    58.  
         
  58. </head> 
    59.  
         
  59. <!-- onload事件在文档加载完成时触发，onmousemove事件在鼠标于body上移动时触发 --> 
    60.  
         
  60. <body onload="init()" onmousemove="bunnyRun()"> 
    61.  
         
  61.  
    62.  
         
  62. <!-- 这两张图片分别代表兔小白和兔小灰 --> 
    63.  
         
  63. <img class="bunny" id="white" src="white.gif" /> 
    64.  
         
  64. <img class="bunny" id="gray" src="gray.gif" /> 
    65.  
         
  65.  
    66.  
         
  66. </body> 
    67.  
         
  67. </html> 
    68.  
        
 
    
 如果兔宝看不太懂也没有关系，第一篇教程只是让你有个直观的概念，下节课开始才正式讲语法。
 
    
从这个例子中我们可以看出以下几点：
 
    
1、javascript和html结合得比较紧密，事实上，可以说javascript就是为了增加网页表现力而专门发明的语言，虽然在其它领域它也很有用武之地，不过还是html中用得最多；
 
    
2、javascript不需要编译，上面的文件扔到浏览器里就能跑了，因为javascript是解释型的语言，浏览器都内嵌了js解释器；
 
    
3、javascript中用var定义变量（不区分类型），用function定义方法；
 
    
4、javascript中有事件的概念，在指定事件发生时可以触发用户指定的方法；
 
    
 OK，第一讲就到这里了，给兔小白留个作业：示例中兔小灰靠近兔小白的时间经常会抖啊抖的，想想是为什么呢？