Built Programing-In-Javascript from commit 8aa9cd5 on branch master

Author: RobinQu

Browser_Scripting/DOM_Scripting/EventAPI.html

@@ -43,19 +43,19 @@ <h3 id="eventtarget-">EventTarget和节点元素</h3>
 <p>在应用Javascript进行DOM编程时时，事件的产生源头很多，同时，事件的订阅也存在多种形式。从事件源头看，拥有能够接受事件DOM事件的对象，都实现了<code>EventTarget</code>接口。下面这三个方法，大家应该都不陌生。</p>
 <pre><code>EventTarget.addEventListener ()
 EventTarget.removeEventListener ()
-EventTarget.dispatchEvent ()</code></pre>
-<p>DOM内的文档元素，大多都有如下的继承状态:</p>
+EventTarget.dispatchEvent ()
+</code></pre><p>DOM内的文档元素，大多都有如下的继承状态:</p>
 <pre><code>EventTarget -&gt; Node -&gt; |-&gt; Element -&gt; HTMLElement -&gt; ...
                        |-&gt; Document
-                       |-&gt; ...</code></pre>
-<p>如上所述，大多素我们获取的节点，都是有相关的事件方法的。但由于历史原因，有大量DOM0时期（即没有标准化）的代码，可以使用以下两种办法注册事件监听：</p>
+                       |-&gt; ...
+</code></pre><p>如上所述，大多素我们获取的节点，都是有相关的事件方法的。但由于历史原因，有大量DOM0时期（即没有标准化）的代码，可以使用以下两种办法注册事件监听：</p>
 <ul>
 <li><p>通过HTML属性</p>
-<pre><code>  &lt;button onclick=&quot;alert(&#39;Hello world!&#39;)&quot;&gt;</code></pre>
-</li>
+<pre><code>  &lt;button onclick=&quot;alert(&#39;Hello world!&#39;)&quot;&gt;
+</code></pre></li>
 <li><p>通过DOM元素属性</p>
-<pre><code>  myButton.onclick = function(event){alert(&#39;Hello world&#39;);};</code></pre>
-</li>
+<pre><code>  myButton.onclick = function(event){alert(&#39;Hello world&#39;);};
+</code></pre></li>
 </ul>
 <h3 id="-">事件派发</h3>
 <p>事件可以通过调用<code>EventTarget.dispatchEvent()</code>进行派发，浏览器自己也需要遵循该方法的行为自动派发相应事件。整个事件派发的流程如下：</p>
@@ -123,8 +123,8 @@ <h2 id="-">参考文档</h2>
   </div>
   <div class="right">
     <ul class="inline-list">
-      <li>Rev <a href="https://github.com/RobinQu/Programing-In-Javascript/tree/5870e0e/chapters/Browser_Scripting/DOM_Scripting/EventAPI.md">5870e0e</a></li>
-      <li>Thu Mar 27 2014 17:42:10 GMT+0800 (CST)</li>
+      <li>Rev <a href="https://github.com/RobinQu/Programing-In-Javascript/tree/65f38de/chapters/Browser_Scripting/DOM_Scripting/EventAPI.md">65f38de</a></li>
+      <li>Thu Mar 27 2014 19:21:58 GMT+0800 (CST)</li>
     </ul>
   </div>
 </footer>

Browser_Scripting/Document_Loading/ScriptExecution.html

@@ -45,22 +45,22 @@ <h2 id="-">执行入口</h2>
 </ul>
 <h3 id="script-">script标签</h3>
 <p>最基本，最常用的脚本引入方式。例如：</p>
-<pre><code>&lt;script src=&quot;http://code.jquery.com/jquery-1.11.0.min.js&quot;&gt;&lt;/script&gt;</code></pre>
-<p>尽管在HTML4和XHTML里面，要求开发者使用<code>type</code>属性来制定脚本的类型。但是主流浏览器都默认认为脚本类型是<code>text/javascript</code>。</p>
-<p>在HTML5的规范内<a href="http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#the-script-element">^1</a>，<code>script</code>标签的type属性是完全可选的。</p>
+<pre><code>&lt;script src=&quot;http://code.jquery.com/jquery-1.11.0.min.js&quot;&gt;&lt;/script&gt;
+</code></pre><p>尽管在HTML4和XHTML里面，要求开发者使用<code>type</code>属性来制定脚本的类型。但是主流浏览器都默认认为脚本类型是<code>text/javascript</code>。</p>
+<p>在HTML5的规范内<sup id="fnref1"><a href="#fn1">1</a></sup>，<code>script</code>标签的type属性是完全可选的。</p>
 <h3 id="eval-">eval函数</h3>
 <ul>
 <li><code>eval</code> is evil</li>
 <li><code>eval</code>有访问本地scope的权利</li>
 </ul>
 <pre><code>var a = 1;
 eval(&quot;a=2&quot;);
-a === 2; // ==&gt; true</code></pre>
-<h3 id="function-">Function构造函数</h3>
+a === 2; // ==&gt; true
+</code></pre><h3 id="function-">Function构造函数</h3>
 <ul>
-<li>function是“first-class citizen”<a href="https://developer.mozilla.org/en-US/docs/functional-javascript/First-class_citizen">^2</a>；自然有相应的构造函数</li>
+<li>function是“first-class citizen”<sup id="fnref2"><a href="#fn2">2</a></sup>；自然有相应的构造函数</li>
 <li><code>new Function(arg1, arg2, ..., fnStr)</code></li>
-<li><code>Function</code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">^3</a>构造函数本质是创建一个函数对象；其创建的函数执行也并不能访问其所在创建环境的闭包，只能访问本地作用域（local scope）和全局作用域（global scope）</li>
+<li><code>Function</code><sup id="fnref3"><a href="#fn3">3</a></sup>构造函数本质是创建一个函数对象；其创建的函数执行也并不能访问其所在创建环境的闭包，只能访问本地作用域（local scope）和全局作用域（global scope）</li>
 <li><code>Function()</code>和<code>new Function()</code>效果一样</li>
 </ul>
 <pre><code>(function() {
@@ -69,16 +69,31 @@ <h3 id="function-">Function构造函数</h3>
   func();
   a === 2; // ==&gt; false
 }());
-a === 2; // ==&gt; true</code></pre>
-<h3 id="settimeout-setinterval">setTimeout和setInterval</h3>
-<pre><code>setTimeout(&quot;alert(&#39;haha&#39;)&quot;, 0);</code></pre>
-<p>这个和eval有异曲同工之妙，对作用域的访问也是类似的。</p>
-<p>另外要说名，以上几点，除了script标签的方法之外，其他方法都在<code>strict</code>模式<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">^4</a>下不可用。</p>
+a === 2; // ==&gt; true
+</code></pre><h3 id="settimeout-setinterval">setTimeout和setInterval</h3>
+<pre><code>setTimeout(&quot;alert(&#39;haha&#39;)&quot;, 0);
+</code></pre><p>这个和eval有异曲同工之妙，对作用域的访问也是类似的。</p>
+<p>另外要说名，以上几点，除了script标签的方法之外，其他方法都在<code>strict</code>模式<sup id="fnref4"><a href="#fn4">4</a></sup>下不可用。</p>
 <h3 id="html-">HTML內联事件回调</h3>
-<pre><code>&lt;a href=&#39;#hello&#39; onclick=&quot;alert(this.href)&quot;&gt;Say hello&lt;/a&gt;</code></pre>
-<p>这样如同在click事件的<code>Target Phase</code>运行了一个回调。<code>this</code>指向目标元素本身。</p>
+<pre><code>&lt;a href=&#39;#hello&#39; onclick=&quot;alert(this.href)&quot;&gt;Say hello&lt;/a&gt;
+</code></pre><p>这样如同在click事件的<code>Target Phase</code>运行了一个回调。<code>this</code>指向目标元素本身。</p>
 <h3 id="-hack">其他Hack</h3>
-<p>利用MessageChannel等新特性可以触发一些函数的执行<a href="https://github.com/kriskowal/asap/blob/master/asap.js">^5</a>。也许Javascript的其他的角落也有不少其他执行脚本的入口吧。</p>
+<p>利用MessageChannel等新特性可以触发一些函数的执行<sup id="fnref5"><a href="#fn5">5</a></sup>。也许Javascript的其他的角落也有不少其他执行脚本的入口吧。</p>
+<hr>
+<div class="footnotes">
+<ol>
+<li id="fn1"><p><a href="http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#the-script-element">http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#the-script-element</a></p>
+<a href="#fnref1" class="footnoteBackLink" title="Jump back to footnote 1 in the text.">↩</a></li>
+<li id="fn2"><p><a href="https://developer.mozilla.org/en-US/docs/functional-javascript/First-class_citizen">https://developer.mozilla.org/en-US/docs/functional-javascript/First-class_citizen</a></p>
+<a href="#fnref2" class="footnoteBackLink" title="Jump back to footnote 2 in the text.">↩</a></li>
+<li id="fn3"><p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function</a></p>
+<a href="#fnref3" class="footnoteBackLink" title="Jump back to footnote 3 in the text.">↩</a></li>
+<li id="fn4"><p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode</a></p>
+<a href="#fnref4" class="footnoteBackLink" title="Jump back to footnote 4 in the text.">↩</a></li>
+<li id="fn5"><p><a href="https://github.com/kriskowal/asap/blob/master/asap.js">https://github.com/kriskowal/asap/blob/master/asap.js</a></p>
+<a href="#fnref5" class="footnoteBackLink" title="Jump back to footnote 5 in the text.">↩</a></li>
+</ol>
+</div>
 
 </div>
 <footer class="misc clearfix">
@@ -92,8 +107,8 @@ <h3 id="-hack">其他Hack</h3>
   </div>
   <div class="right">
     <ul class="inline-list">
-      <li>Rev <a href="https://github.com/RobinQu/Programing-In-Javascript/tree/5870e0e/chapters/Browser_Scripting/Document_Loading/ScriptExecution.md">5870e0e</a></li>
-      <li>Thu Mar 27 2014 17:42:10 GMT+0800 (CST)</li>
+      <li>Rev <a href="https://github.com/RobinQu/Programing-In-Javascript/tree/65f38de/chapters/Browser_Scripting/Document_Loading/ScriptExecution.md">65f38de</a></li>
+      <li>Thu Mar 27 2014 19:21:58 GMT+0800 (CST)</li>
     </ul>
   </div>
 </footer>