path: root/files/zh-cn/web/javascript/getting_started/index.html

---
title: 起步(Javascript 教程)
slug: Web/JavaScript/Getting_Started
tags:
  - bug-840092
translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
translation_of_original: Web/JavaScript/Getting_Started
---
<h2 id="Why_JavaScript.3F" name="Why_JavaScript.3F">JavaScript是什么?</h2>

<p>作为一门计算机语言，JavaScript本身强大、复杂，且难于理解。但是，你可以用它来开发一系列的应用程序，它有巨大的潜力来改变当前的互联网现状。下面这个应用程序就是一个很好的例子：<a class="external" href="http://local.google.com/">Google Maps</a>。</p>

<p>JavaScript（通称为ECMAScript）最大的优势在于，它基于浏览器，但是通过浏览器的支持可以在不同平台上生产出相同结果。 本文举出的例子是 Google Maps，它几乎可以无差别的运行在 Linux、Windows和Mac OS系统中。 伴随大量JavaScript类库的出现，你现在可以用它很轻易的实现文档导航、DOM元素选择、创建动画、处理事件和开发AJAX应用。同其他因各种利益目的而推动的技术不同，JavaScript是一种真正免费并且被广泛采用的跨平台编程语言。</p>

<h2 id="What_you_should_already_know" name="What_you_should_already_know">你应该知道</h2>

<p>JavaScript是一种非常容易入门的编程语言。你只需要一个文本编辑器和web浏览器就可以开始进行学习。 </p>

<p>在使用 JavaScript进行开发的过程中，可能还会涉及很多其他技术，这不在本文讨论的范围之内。 所以，不要期望在学习的第一天就能开发出一个类似 Google maps 这样的应用程序。</p>

<h2 id="Getting_Started" name="Getting_Started">起步</h2>

<p>JavaScript的起步非常简单。你不需要进行复杂的程序安装，不需要去了解如何使用shell、打包器或编译器。它是通过浏览器来展示的，你所需要做的全部事情就是把你的代码保存为文本文件，然后再浏览器中打开。就这么简单！</p>

<p>JavaScript非常适合作为入门级的编程语言。它直观形象，并且教会学生认识到这是一个在实际生活中非常有用的工具。 对比C、C++和 Java等语言会发现有很大不同，它们只对那些专业的软件开发者来说是有价值的。</p>

<h2 id="Browser_Compatibility_Issues" name="Browser_Compatibility_Issues">浏览器兼容问题</h2>

<p>不同浏览器在功能实现上有很多不同之处。Mozilla, Microsoft IE, Apple Safari 和 Opera 在行为上有很多差异。 我们计划在此记录这些差异 <a href="/en-US/docs/JavaScript/Compatibility" title="en-US/docs/JavaScript/Compatibility">documenting these variations</a>。你可以使用各种跨平台的JavaScript API接口来解决这些兼容性问题。这些API隐藏了浏览器之间的各种差异，提供了通用性的功能函数来方便调用。</p>

<h2 id="How_to_try_the_Examples" name="How_to_try_the_Examples">如何运行示例</h2>

<p>下面的例子都有相同的代码。要执行它们有多种方法，如果你有自己的个人站点，你还可以在站点上把这些例子保存为新的页面。</p>

<p>如果你没有自己的个人站点，你可以在电脑上把这些例子保存下来，并使用你自己的浏览器来执行它们。这就是JavaScript简单的地方，也是它适合做入门语言的原因。你不需要编译器或者开发环境，你只需要一个浏览器就可以开始起步了。</p>

<h2 id="Example:_Catching_a_mouse_click" name="Example:_Catching_a_mouse_click">举例：捕获一个鼠标单击事件</h2>

<p>事件处理 (事件类型、事件注册、冒泡等) 的细节是一个非常宽泛的话题，这个简单的例子并不能说明所有的问题。然而，如果我们不涉及JavaScript事件系统，我们就不能很好展示一个鼠标点击捕获的范例。你只需要记得例子里展示的只是JavaScrpt事件系统里非常表象的一些东西，如果你想要了解更多的内部细节，那你可以去查找更详细的相关资料。</p>

<p>鼠标事件只是浏览器同用户交互过程中所产生的事件系统里的一个子集。下面列举了一些用户在交互过程中产生的具体的鼠标事件：</p>

<ul>
 <li>Click - 用户点击鼠标时触发</li>
 <li>DblClick - 用户双击鼠标时触发</li>
 <li>MouseDown - 用户按下鼠标键触发 (click事件前半部分)</li>
 <li>MouseUp - 用户释放鼠标键触发 (click事件后半部分)</li>
 <li>MouseOut - 当鼠标指针离开对象物理边界时触发</li>
 <li>MouseOver - 当鼠标指针进入对象物理边界时触发</li>
 <li>MouseMove -当鼠标指针在对象物理边界内移动时触发</li>
 <li>ContextMenu - 用户点击鼠标右键时触发</li>
</ul>

<p>捕获事件并注册处理函数最简单的办法就是使用HTML，你可以把事件当成元素属性来使用。例子：</p>

<pre class="brush:js">  &lt;span onclick="alert('Hello World!');"&gt;Click Here&lt;/span&gt;</pre>

<p>要执行的JavaScript代码既可以作为属性值写在行内位置，也可以写成函数并用&lt;script&gt;包裹后放到HTML页面中：</p>

<pre class="brush:js">&lt;script type="text/javascript"&gt;
  function onclick_callback () {
     alert ("Hello, World!");
  }
&lt;/script&gt;
&lt;span onclick="onclick_callback();"&gt;Click Here&lt;/span&gt;</pre>

<p>另外，事件对象是可以被捕获和引用，开发者可以通过访问事件对象来获取更多信息，如捕获事件的对象、事件类型、哪个鼠标按键被点击等。我们还用上面的例子来说明：</p>

<pre class="brush:js">&lt;script type="text/javascript"&gt;
  function onclick_callback(event) {
    var eType = event.type;
    /* the following is for compatability */
    /* Moz populates the target property of the event object */
    /* IE populates the srcElement property */
    var eTarget = event.target || event.srcElement;

    alert( "Captured Event (type=" + eType + ", target=" + eTarget );
  }
&lt;/script&gt;
&lt;span onclick="onclick_callback(event);"&gt;Click Here&lt;/span&gt;</pre>

<p>对于事件的注册和接收还用注意一些的是，你可以给任何使用JavaScript生成的HTMLElement对象做相同的操作。下面的例子展示了一个这样的过程：生成span对象，添加到页面中的body，给span注册mouse-over、mouse-out、mouse-down和 mouse-up事件。</p>

<pre class="brush:js">&lt;script type="text/javascript"&gt;
  function mouseevent_callback(event) {
    /* The following is for compatability */
    /* IE does NOT by default pass the event object */
    /* obtain a ref to the event if one was not given */
    if (!event) event = window.event;

    /* obtain event type and target as earlier */
    var eType = event.type;
    var eTarget = event.target || event.srcElement;
    alert(eType +' event on element with id: '+ eTarget.id);
  }

 function onload () {
   /* obtain a ref to the 'body' element of the page */
   var body = document.body;
   /* create a span element to be clicked */
   var span = document.createElement('span');
   span.id = 'ExampleSpan';
   span.appendChild(document.createTextNode ('Click Here!'));

   /* register the span object to receive specific mouse events */
   span.onmousedown = mouseevent_callback;
   span.onmouseup = mouseevent_callback;
   span.onmouseover = mouseevent_callback;
   span.onmouseout = mouseevent_callback;

   /* display the span on the page */
   body.appendChild(span);
}
&lt;/script&gt;</pre>

<p>{{ draft() }}</p>

<h2 id="Example:_Catching_a_keyboard_event" name="Example:_Catching_a_keyboard_event">举例：捕获一个键盘事件</h2>

<p>同上面的例子类似，键盘事件捕获也依赖于JavaScript事件系统。当键盘上的键被使用的时候触发键盘事件。</p>

<p>下面的列表展示了一些具体的键盘事件，同鼠标事件相比是很少的：</p>

<ul>
 <li>KeyPress - 按键被按下并且释放后触发</li>
 <li>KeyDown - 按键被按下但是还没有被释放时触发</li>
 <li>KeyUp - 按键被释放时触发</li>
 <li>TextInput ( Webkit浏览器下可以使用，并且只在输入时有效) - 通过粘贴、语音或者键盘输入文本时触发。本文不介绍该事件。</li>
</ul>

<p>在一个 <a class="new " href="/en-US/docs/DOM/event/keypress" rel="internal">keypress</a> 事件中，键值的Unicode编码会存储到属性keyCode或者<code><a href="/en-US/docs/DOM/event.charCode" rel="internal">charCode</a></code> 中，但是两者不会同时存在。按键会生成一个字母 (如 'a')，这时会把字母的编码存储到<code>charCode</code> 中，注意这里是区分大小写的( <code>charCode</code> 会判断shift键是否同时被按下)。其他情况下，编码会存储到 <code>keyCode中。</code></p>

<p>捕获键盘事件最简单的方法仍然是在HTML中注册键盘事件的处理函数，在元素属性中处理相关事件。 举例：</p>

<pre class="brush:js">  &lt;input type="text" onkeypress="alert ('Hello World!');"&gt;&lt;/input&gt;
</pre>

<p>同鼠标事件类似，你的 JavaScript代码既可以写到属性值内，也可以作为函数用&lt;script包裹后写到HTML页面中：</p>

<pre class="brush:js">&lt;script type="text/javascript"&gt;
  function onkeypress_callback () {
    alert ("Hello, World!");
  }
&lt;/script&gt;

&lt;input onkeypress="onkeypress_callback();"&gt;&lt;/input&gt;
</pre>

<p>捕获事件和引用事件源(一个真实的键被按下时) 的方法同鼠标事件类似：</p>

<pre class="brush:js">&lt;script type="text/javascript"&gt;
  function onkeypress_callback(evt) {
      var eType = evt.type; // Will return "keypress" as the event type
      var eCode = 'keyCode is ' + evt.keyCode;
      var eChar = 'charCode is ' + evt.charCode;

      alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")");
   }
&lt;/script&gt;
&lt;input onkeypress="onkeypress_callback(event);"&gt;&lt;/input&gt;</pre>

<p>要捕获页面上所有的键盘事件，可以在document上注册和绑定相关的处理函数：</p>

<pre class="brush:js">&lt;script type="text/javascript"&gt;
  document.onkeypress = key_event;
  document.onkeydown = key_event;
  document.onkeyup = key_event;

  function key_event(evt) {
      var eType = evt.type;
      var eCode = "ASCII code is " + evt.keyCode;
      var eChar = 'charCode is ' + evt.charCode;

      alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")");
   }
&lt;/script&gt;</pre>

<p>下面是一个完整的键盘事件处理过程：</p>

<pre class="brush:js">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;script&gt;
    var metaChar = false;
    var exampleKey = 16;
    function keyEvent(event) {
      var key = event.keyCode || event.which;
      var keychar = String.fromCharCode(key);
      if (key==exampleKey) { metaChar = true; }
      if (key!=exampleKey) {
         if (metaChar) {
            alert("Combination of metaKey + " + keychar)
            metaChar = false;
         } else { alert("Key pressed " + key); }
      }
    }
    function metaKeyUp (event) {
      var key = event.keyCode || event.which;
      if (key==exampleKey) { metaChar = false; }
    }
  &lt;/script&gt;
&lt;/head&gt;
&lt;body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)"&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>

<h3 id="浏览器_bugs_和_quirks">浏览器 bugs 和 quirks</h3>

<p>键盘事件中有两个可用的属性<code style="font-style: normal; line-height: 1.5;">keyCode</code><span style="line-height: 1.5;"> 和 </span><code style="font-style: normal; line-height: 1.5;">charCode。通常情况下，</code><code style="font-style: normal; line-height: 1.5;">keyCode</code><span style="line-height: 1.5;"> 指向的是用户按下的键盘上的那个键，而</span><code style="font-style: normal; line-height: 1.5;">charCode</code><span style="line-height: 1.5;"> 存储的是相应键的 ASCII 码值。这两个值不一定相同，如， 小写 'a' 和 大写 'A' 拥有相同的 </span><code style="font-style: normal; line-height: 1.5;">keyCode，因为用户按下的是相同的按键，但是他们的</code><code style="font-style: normal; line-height: 1.5;">charCode不同，因为两个字母的码值不同。</code><span style="line-height: 1.5;"> </span></p>

<p>不同浏览器对于charCode的处理方式并不统一。例如Internet Explorer 和Opera 并不支持 <code>charCode，他们把字母信息写到了</code><code>keyCode</code>中，而且只在 onkeypress下有效。在 Onkeydown 和Onkeyup的事件中， <code>keyCode</code> 存储的仍然是按键的相关信息。 Firefox 则使用 "which", 来区分字母。.</p>

<p>可以到 Mozilla 文档 <a href="/en-US/docs/DOM/Event/UIEvent/KeyboardEvent" title="https://developer.mozilla.org/en-US/docs/DOM/Event/UIEvent/KeyEvent">Keyboard Events</a> 去了解关于键盘事件的更多信息。.</p>

<p>{{ draft() }}</p>

<h2 id="Example:_Dragging_images_around" name="Example:_Dragging_images_around">举例：拖曳图片</h2>

<p>下面的例子展示了firefox浏览器下如何实现拖动图片：</p>

<pre class="brush:js">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style type='text/css'&gt;
img { position: absolute; }
&lt;/style&gt;

&lt;script type='text/javascript'&gt;
window.onload = function() {

  movMeId=document.getElementById("ImgMov");
  movMeId.style.top = "80px";
  movMeId.style.left = "80px";
  movMeId.style.position = "absolute";

  document.onmousedown = coordinates;
  document.onmouseup=mouseup;

  function coordinates(e) {
    if (e == null) { e = window.event;}
    var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;

    if (sender.id=="ImgMov") {
      mouseover = true;
      pleft = parseInt(movMeId.style.left);
      ptop = parseInt(movMeId.style.top);
      xcoor = e.clientX;
      ycoor = e.clientY;
      document.onmousemove=moveImage;
      return false;
    } else {
        return false;
    }
  }

  function moveImage(e) {
    if (e == null) { e = window.event; }
    movMeId.style.left = pleft+e.clientX-xcoor+"px";
    movMeId.style.top = ptop+e.clientY-ycoor+"px";
    return false;
  }

  function mouseup(e) {
    document.onmousemove = null;
  }
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;img id="ImgMov" src="http://mozcom-cdn.mozilla.net/img/covehead/about/logo/download/logo-only.png" width="64" height="64"/&gt;
  &lt;p&gt;Drag and drop around the image in this page.&lt;/p&gt;
&lt;/body&gt;

&lt;/html&gt;</pre>

<h2 id="Example:_Resizing_things" name="Example:_Resizing_things">举例：改变大小</h2>

<div>{{todo("Need Content. Or, remove headline")}}</div>

<h3 id="Example:_Drawing_Lines" name="Example:_Drawing_Lines">举例：绘制直线</h3>

<div class="originaldocinfo">
<h2 id="Original_Document_Information" name="Original_Document_Information">附加文档信息</h2>

<ul>
 <li>作者: <a class="external" href="http://linuxmachines.com/">Jeff Carr</a></li>
 <li>Here is a attempt at a new <a href="/en-US/docs/javascript_new_testpage" title="en-US/docs/javascript_new_testpage">JavaScript new testpage</a></li>
 <li>最后修改: July 14 2005</li>
 <li>版权信息: © 2005 by individual contributors; content available under the <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a></li>
</ul>
</div>

<p> </p>