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

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

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

写给兔小白的js教程(1)_javascript


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

  1. <html> 
  2. <head> 
  3. <title> 
  4. 追逐兔小白的兔小灰 
  5. </title> 
  6. <style> 
  7. .bunny{ 
  8.     position:absolute; 
  9.     width:91px; 
  10.     height:152px; 
  11. } 
  12. </style> 
  13. <script> 
  14. /* 
  15.  * 定义一个名叫init的方法 
  16.  * 在body的onload时调用它，我们用它来初始化一些东西 
  17.  */ 
  18. function init(){ 
  19.  
  20.     //setInterval方法用于设定一个定时器，它会每隔一定时间执行你指定的方法 
  21.     //第一个参数是一个function，它就是每次定时器触发时需要执行的代码 
  22.     //第二个参数50表示每50毫秒执行一次 
  23.     window.setInterval(function(){ 
  24.  
  25.         //document.getElementById表示按id获取文档中的指定元素 
  26.         var white = document.getElementById("white"),  
  27.             gray = document.getElementById("gray"); 
  28.  
  29.         //为了让兔小灰追着兔小白，我们要判断两者的位置 
  30.         //如果兔小灰当前的x坐标(offsetLeft)大于兔小白的，就把兔小灰向左移动一点（减5个像素），反之就向右移动 
  31.         if(gray.offsetLeft > white.offsetLeft) 
  32.             gray.style.left = gray.offsetLeft - 5; 
  33.         else if(gray.offsetLeft < white.offsetLeft) 
  34.             gray.style.left = gray.offsetLeft + 5; 
  35.  
  36.         //同理处理纵坐标 
  37.         if(gray.offsetTop > white.offsetTop) 
  38.             gray.style.top = gray.offsetTop - 5; 
  39.         else if(gray.offsetTop < white.offsetTop) 
  40.             gray.style.top = gray.offsetTop + 5; 
  41.  
  42.     }, 50); 
  43.      
  44. } 
  45.  
  46. /* 
  47.  * 定义一个名叫bunnyRun的方法 
  48.  * 在body的onmousemove时调用它，我们用它来移动兔小白 
  49.  */ 
  50. function bunnyRun(){ 
  51.     //把兔小白的x与y坐标设定成与鼠标当前位置一致，这样就能用鼠标移动兔小白了 
  52.     var white = document.getElementById("white"); 
  53.     white.style.left = event.clientX; 
  54.     white.style.top = event.clientY; 
  55. } 
  56.  
  57. </script> 
  58. </head> 
  59. <!-- onload事件在文档加载完成时触发，onmousemove事件在鼠标于body上移动时触发 --> 
  60. <body onload="init()" onmousemove="bunnyRun()"> 
  61.  
  62. <!-- 这两张图片分别代表兔小白和兔小灰 --> 
  63. <img class="bunny" id="white" src="white.gif" /> 
  64. <img class="bunny" id="gray" src="gray.gif" /> 
  65.  
  66. </body> 
  67. </html> 


如果兔宝看不太懂也没有关系，第一篇教程只是让你有个直观的概念，下节课开始才正式讲语法。

从这个例子中我们可以看出以下几点：

1、javascript和html结合得比较紧密，事实上，可以说javascript就是为了增加网页表现力而专门发明的语言，虽然在其它领域它也很有用武之地，不过还是html中用得最多；

2、javascript不需要编译，上面的文件扔到浏览器里就能跑了，因为javascript是解释型的语言，浏览器都内嵌了js解释器；

3、javascript中用var定义变量（不区分类型），用function定义方法；

4、javascript中有事件的概念，在指定事件发生时可以触发用户指定的方法；


OK，第一讲就到这里了，给兔小白留个作业：示例中兔小灰靠近兔小白的时间经常会抖啊抖的，想想是为什么呢？