语法高亮，滚动条美化，设置页面调整

docs/javascript/javascript(%E8%B5%B7%E6%AD%A5).html

@@ -27,16 +27,16 @@
 <li>ContextMenu - 用户点击鼠标右键时触发</li>
 </ul>
 <p>捕获事件并注册处理函数最简单的办法就是使用HTML，你可以把事件当成元素属性来使用。例子：</p>
-<pre class="brush:js">  &lt;span onclick="alert('Hello World!');"&gt;Click Here&lt;/span&gt;</pre>
+<pre><code class="language-js">  &lt;span onclick="alert('Hello World!');"&gt;Click Here&lt;/span&gt;</code></pre>
 <p>要执行的JavaScript代码既可以作为属性值写在行内位置，也可以写成函数并用&lt;script&gt;包裹后放到HTML页面中：</p>
-<pre class="brush:js">&lt;script type="text/javascript"&gt;
+<pre><code class="language-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>
+&lt;span onclick="onclick_callback();"&gt;Click Here&lt;/span&gt;</code></pre>
 <p>另外，事件对象是可以被捕获和引用，开发者可以通过访问事件对象来获取更多信息，如捕获事件的对象、事件类型、哪个鼠标按键被点击等。我们还用上面的例子来说明：</p>
-<pre class="brush:js">&lt;script type="text/javascript"&gt;
+<pre><code class="language-js">&lt;script type="text/javascript"&gt;
   function onclick_callback(event) {
     var eType = event.type;
     /* the following is for compatability */
@@ -47,9 +47,9 @@
     alert( "Captured Event (type=" + eType + ", target=" + eTarget );
   }
 &lt;/script&gt;
-&lt;span onclick="onclick_callback(event);"&gt;Click Here&lt;/span&gt;</pre>
+&lt;span onclick="onclick_callback(event);"&gt;Click Here&lt;/span&gt;</code></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;
+<pre><code class="language-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 */
@@ -79,7 +79,7 @@
    /* display the span on the page */
    body.appendChild(span);   
 }
-&lt;/script&gt;</pre>
+&lt;/script&gt;</code></pre>
 <p></p><div class="blockIndicator draft">
 <p><strong>草案</strong><br/>
     本页尚未完工.</p>
@@ -95,19 +95,19 @@
 </ul>
 <p>在一个 <a class=" new" href="/en-US/docs/DOM/event/keypress" rel="internal nofollow">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>
+<pre><code class="language-js">  &lt;input type="text" onkeypress="alert ('Hello World!');"&gt;&lt;/input&gt;
+</code></pre>
 <p>同鼠标事件类似，你的 JavaScript代码既可以写到属性值内，也可以作为函数用&lt;script包裹后写到HTML页面中：</p>
-<pre class="brush:js">&lt;script type="text/javascript"&gt;
+<pre><code class="language-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>
+</code></pre>
 <p>捕获事件和引用事件源(一个真实的键被按下时) 的方法同鼠标事件类似：</p>
-<pre class="brush:js">&lt;script type="text/javascript"&gt;
+<pre><code class="language-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;
@@ -116,9 +116,9 @@
       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>
+&lt;input onkeypress="onkeypress_callback(event);"&gt;&lt;/input&gt;</code></pre>
 <p>要捕获页面上所有的键盘事件，可以在document上注册和绑定相关的处理函数：</p>
-<pre class="brush:js">&lt;script type="text/javascript"&gt;
+<pre><code class="language-js">&lt;script type="text/javascript"&gt;
   document.onkeypress = key_event;
   document.onkeydown = key_event;
   document.onkeyup = key_event;
@@ -130,9 +130,9 @@
 
       alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")");
    }
-&lt;/script&gt;</pre>
+&lt;/script&gt;</code></pre>
 <p>下面是一个完整的键盘事件处理过程：</p>
-<pre class="brush:js">&lt;!DOCTYPE html&gt;
+<pre><code class="language-js">&lt;!DOCTYPE html&gt;
 &lt;html&gt;
 &lt;head&gt;
   &lt;script&gt;
@@ -157,7 +157,7 @@
 &lt;/head&gt;
 &lt;body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)"&gt;
 &lt;/body&gt;
-&lt;/html&gt;</pre>
+&lt;/html&gt;</code></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>
@@ -168,7 +168,7 @@
 </div><p></p>
 <h2 id="Example:_Dragging_images_around" name="Example:_Dragging_images_around">举例：拖曳图片</h2>
 <p>下面的例子展示了firefox浏览器下如何实现拖动图片：</p>
-<pre class="brush:js">&lt;!DOCTYPE html&gt;
+<pre><code class="language-js">&lt;!DOCTYPE html&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;style type='text/css'&gt;
@@ -222,7 +222,7 @@ window.onload = function() {
   &lt;p&gt;Drag and drop around the image in this page.&lt;/p&gt;
 &lt;/body&gt;
 
-&lt;/html&gt;</pre>
+&lt;/html&gt;</code></pre>
 <h2 id="Example:_Resizing_things" name="Example:_Resizing_things">举例：改变大小</h2>
 <div><span class="inlineIndicator todo todoInline"><strong>FIXME:</strong> <em>Need Content. Or, remove headline</em></span></div>
 <h3 id="Example:_Drawing_Lines" name="Example:_Drawing_Lines">举例：绘制直线</h3>