diff options
Diffstat (limited to 'files/zh-tw/archive/web')
| -rw-r--r-- | files/zh-tw/archive/web/e4x/index.html | 6 | ||||
| -rw-r--r-- | files/zh-tw/archive/web/e4x/processing_xml_with_e4x/index.html | 229 | ||||
| -rw-r--r-- | files/zh-tw/archive/web/index.html | 12 |
3 files changed, 0 insertions, 247 deletions
diff --git a/files/zh-tw/archive/web/e4x/index.html b/files/zh-tw/archive/web/e4x/index.html deleted file mode 100644 index 7ba42421ff..0000000000 --- a/files/zh-tw/archive/web/e4x/index.html +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: E4X -slug: Archive/Web/E4X -translation_of: Archive/Web/E4X ---- -<p>This page was auto-generated because a user created a sub-page to this page.</p> diff --git a/files/zh-tw/archive/web/e4x/processing_xml_with_e4x/index.html b/files/zh-tw/archive/web/e4x/processing_xml_with_e4x/index.html deleted file mode 100644 index 3c8b4cb442..0000000000 --- a/files/zh-tw/archive/web/e4x/processing_xml_with_e4x/index.html +++ /dev/null @@ -1,229 +0,0 @@ ---- -title: 使用 E4X 處理 XML -slug: Archive/Web/E4X/Processing_XML_with_E4X -translation_of: Archive/Web/E4X/Processing_XML_with_E4X ---- -<p>{{Warning("E4X 已廢棄不用。 It's been disabled by default for chrome in Firefox 17, and completly removed in Firefox 21. 請使用 DOMParser/DOMSerializer 或 a non-native JXON algorithm 替代。")}}</p> -<h2 id="使用_E4X_處理_XML" name="使用_E4X_處理_XML">使用 E4X 處理 XML</h2> -<p>JavaScript 在 1.6 版本中首次引入，<strong><a class="internal" href="/zh_tw/E4X" title="zh tw/E4X">E4X</a></strong> 引入原生的 XML 物件以供 JavaScript 語言使用，並新增用來在 JavaScript 的代碼中嵌入照字面表達的 XML 文件的語法。</p> -<p>E4X 的完整定義可以在 <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-357.htm">Ecma-357 規範</a> 中找到。本章提供實踐中的語言概要；但這並不是全面的參考資料。</p> -<h3 id="相容性的問題" name="相容性的問題">相容性的問題</h3> -<p>在主要的瀏覽器支援 <code><script></code> 元素以前，對於嵌入到頁面裡的 JavaScript 存有一種常見的做法，就是使用 HTML 的註解標籤將其包夾，避免瀏覽器直接把 <code><script></code> 裡的 JavaScript 代碼顯示在使用者眼前。如今已無須這麼做，不過仍殘存在部分遺留下來的代碼中。為了向後相容的需要，E4X 預設會忽略註解和 CDATA 區段。你可以給你的 <code><script></code> 標籤加上 <code>e4x=1</code> 參數以解除這項限制︰</p> -<pre><script type="text/javascript;e4x=1"> -... -</script> -</pre> -<h3 id="XML_物件的建立" name="XML_物件的建立">XML 物件的建立</h3> -<p>E4X 提供兩種建立 XML 物件的方式。第一種是傳入字串給 <code>XML</code> 建構子︰</p> -<pre class="eval"> var languages = new XML('<languages type="dynamic"><lang>JavaScript</lang><lang>Python</lang></languages>'); -</pre> -<p>第二種是直接在你的 Script 中嵌入 XML︰</p> -<pre class="eval"> var languages = <languages type="dynamic"> - <lang>JavaScript</lang> - <lang>Python</lang> - </languages>; -</pre> -<p>在這兩種情況裡，產生都會是 E4X <code>XML</code> 物件，他提供了方便的語法用以存取並更新其內夾藏著的資料。</p> -<p>XML 物件在外觀上和行為上都和普通的 JavaScript 物件很類似，但有兩件事並不相同。E4X 引入的新語法只能用在 E4X XML 物件上。雖然新語法被設計成對 JavaScript 設計者而言較熟悉的形式，但 E4X 並不提供從 XML 到原生 JavaScript 物件的完整對應；只是看起來很像而已。</p> -<p>可以把變數加入到 XML 的字面中用來建立元素的名稱（或是內容）。</p> -<pre>var h = 'html'; -var text = "Here's some text"; -var doc = <{h}><body>{text}</body></{h}>; -alert(doc.toXMLString()); -// 產生的是 -<html> - <body>Here's some text</body> -</html> -</pre> -<h3 id="屬性的運用" name="屬性的運用">屬性的運用</h3> -<p>當你需要動態的建立標記的時候，XML 字面語法明顯更勝 <code>XML</code> 建構子。使用 E4X 可輕易的在標記中嵌入動態值。只需使用花括弧 ({}) 包夾要建立的屬性值，並省略一般會加上的引號標記，變數和表達式即可用於建立屬性值，如同下例所示︰</p> -<pre class="eval"> var a = 2; - var b = <foo bar={a}>"hi"</foo>; -</pre> -<p>開始執行時，變數的值會被求出，並自動在適當的位置加上引號。前面的例子產生的 XML 物件看起來就像這樣︰<code><foo bar="2">"hi"</foo></code>。</p> -<p>在屬性的替換方面，雙引號會被跳脫成 &quot;，單引號則按平常方式處理。</p> -<pre class="eval">var b = 'He said "Don\'t go there."'; -var el = <foo a={b}/>; -alert(el.toXMLString()); -// 產生︰<foo a="He said &quot;Don't go there.&quot;"/> -</pre> -<p>小於和 & 符號也會被跳脫成各自的等價實體。由於大於符號不會被跳脫，因此如果包含了 <a class="internal" href="/zh_tw/DOM/CDATASection" title="zh tw/DOM/CDATASection">CDATA</a> 結束序列 (]]>)，就有可能產生 XML 錯誤。</p> -<p>通常不會直接在字面（或變數）的屬性內容之中作修改（例如，<code>bar="a{var1}{var2}"</code>）。如果有必須使用 JavaScript 表達式計算變數來替代的內容的話（例如，<code>bar={'a'+var1+var2}</code>），在元素字面之前先定義新的變數，在變數中包含完整的修改內容，然後在字面中含入這個變數，或在字面之後取回屬性並將其修改（見下）。</p> -<p>可如同屬性值一般的修改屬性的名稱︰</p> -<pre>var a = 'att'; -var b = <b {a}='value'/>; -alert(b); -// Gives: -<b att="value"/> - -</pre> -<p>…但之後就不能修改表達式（例如，<b {a}>）。</p> -<p>執行上面的例子之後，參考 XML 物件的語言變數與 XML 文件中的 <code><languages></code> 結點一致。這個結點只有一個屬性︰type，這個屬性可用各種方式來存取並更新︰</p> -<pre class="eval"> alert(languages.@type); // 警報 "dynamic" - languages.@type = "agile"; - alert(languages.@type); // 警報 "agile" -</pre> -<pre class="eval"> alert(languages.toString()); - /* 警報: - <languages type="agile"><lang>JavaScript</lang><lang>Python</lang></languages> - */ -</pre> -<p>注意，如果想要把取回的屬性與其他的字串作比較，就有必要先把屬性作轉換，即使屬性有可能會在其他地方被轉換成字串（例如插入到文字框中）。</p> -<pre class="eval">if (<a class="link-mailto" href="mailto:languages.@type.toString()" rel="freelink">languages.@type.toString()</a> === 'agile') { - ... -} -</pre> -<h3 id="XML_物件的運用" name="XML_物件的運用">XML 物件的運用</h3> -<p>XML 物件提供一系列的方法用來查閱並更新其中的內容。這類物件亦支援 JavaScript 的點 (.) 和 <code>[]</code> 符號，但不是用來存取物件的屬性，E4X 覆蓋了這些運算子，改用來存取元素的子結點︰</p> -<pre>var person = <person> - <name>Bob Smith</name> - <likes> - <os>Linux</os> - <browser>Firefox</browser> - <language>JavaScript</language> - <language>Python</language> - </likes> -</person>; - -alert(person.name); // Bob Smith -alert(person['name']); // Bob Smith -alert(person.likes.browser); // Firefox -alert(person['likes'].browser); // Firefox -</pre> -<p>如果你使用多於一個以上的元素來存取的話，你會得到 <code>XMLList</code>︰</p> -<pre>alert(person.likes.language.length()); // 2 -</pre> -<p>和 DOM 一樣，<code>*</code> 可以用來存取所有的子結點︰</p> -<pre>alert(person.likes.*.length()); // 4 -</pre> -<p><code>.</code> 運算子會直接存取指定結點的子結點，<code>..</code> 運算子則會存取所有的子結點，不論嵌入的有多深︰</p> -<pre>alert(person..*.length()); // 11 -</pre> -<p><code>length()</code> 方法在此返回 11，因為元素結點和文字結點兩者都被包含在 <code>XMLList</code> 的結果中。</p> -<p>用來表示 XML 元素的物件提供一系列實用的方法，部分方法的解說見下︰<span class="comment">TODO: Add all of the methods to the JavaScript reference, link from here</span></p> -<pre>alert(person.name.text()) // Bob Smith - -var xml = person.name.toXMLString(); // 內含 XML 的字串 - -var personCopy = person.copy(); // XML 物件的深層複製 - -var child = person.child(1); // 第二個子結點；目前是 <likes> 元素 -</pre> -<h3 id="XMLLists_的運用" name="XMLLists_的運用">XMLLists 的運用</h3> -<p>除了 XML 物件以外，E4X 也引入了 <code>XMLList</code> 物件。<code>XMLList</code> 是用來表示附有編號的 XML 物件的集合；例如，元素的列表。接續上面的例子，我們可以在頁面上存取 <code>XMLList</code> 的 <code><lang></code> 元素如下︰</p> -<pre class="eval"> var langs = languages.lang; -</pre> -<p><code>XMLList</code> 提供 <code>length()</code> 方法，可用來查出內含元素的數目︰</p> -<pre class="eval"> alert(languages.lang.length()); -</pre> -<p>注意，有別於 JavaScript 陣列的 length 屬性，這個 length 是方法，不是屬性，而且必須使用 <code>length()</code> 來呼叫。</p> -<p>我們可以迭代所有相配的元素，就像這樣︰</p> -<pre class="eval"> for (var i = 0; i < languages.lang.length(); i++) { - alert(languages.lang[i].toString()); - } -</pre> -<p>在此我們使用同一個語法存取陣列中的已編號項。雖然這部分很類似普通的陣列，但 <code>XMLList</code> 並不支援 <code>Array</code> 的方法，如 <code>forEach</code>，且陣列的通用功能，如 <code>Array.forEach()</code> 也不相容於 <code>XMLList</code> 物件。</p> -<p>我們也可以使用在 JavaScript 1.6 中所引入的 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_參考/語法/for_each...in" title="zh tw/Core JavaScript 1.5 參考/語法/for each...in">for each...in 語法</a>，他已支援 E4X 的部分︰</p> -<pre class="eval"> for each (var lang in languages.lang) { - alert(lang); - } -</pre> -<p><code>for each...in</code> 也可以用在普通的 JavaScript 物件，迭代出內含在物件中的值（不是鍵）。如同 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_參考/語法/for...in" title="zh tw/Core JavaScript 1.5 參考/語法/for...in">for...in</a>，<a href="/en/Core_JavaScript_1.5_Reference/Statements/for...in#Description" title="en/Core_JavaScript_1.5_Reference/Statements/for...in#Description">非常不建議</a> 和陣列一起使用。</p> -<p>可以使用下面的 XML 字面語法來建立 <code>XMLList</code>，而無須建立格式正確的 XML 文件︰</p> -<pre class="eval"> var xmllist = <> - <lang>JavaScript</lang> - <lang>Python</lang> - </>; -</pre> -<p><code>+=</code> 運算子可用來把新的元素附加到文件中的 <code>XMLList</code>︰</p> -<pre class="eval"> languages.lang += <lang>Ruby</lang>; -</pre> -<p>注意，有別於由普通的 DOM 方法所返回的結點列表，<code>XMLList</code> 只是靜態的，而且不會自動更新以反映在 DOM 中的改變。如果你在既有的 <code>XML</code> 物件底下建立 <code>XMLList</code> 作為子集，<code>XMLList</code> 並不會反映 XML 物件的改變；你需要重新建立 XMLList 以取得最近的更新︰</p> -<pre class="eval"> var languages = <languages> - <lang>JavaScript</lang> - <lang>Python</lang> - </languages>; - - var lang = languages.lang; - alert(lang.length()); // 警報 2 - - languages.lang += <lang>Ruby</lang>; - alert(lang.length()); // 仍舊警報 2 - - lang = languages.lang; // 重新建立 XMLList - alert(lang.length()); // 警報 3 -</pre> -<h3 id="搜尋和過濾" name="搜尋和過濾">搜尋和過濾</h3> -<p>E4X 提供特殊的運算子用來在通過指定條件的文件內部選取結點。這種過濾動作是由括弧裡面的表達式所指定的︰</p> -<pre>var html = <html> - <p id="p1">First paragraph</p> - <p id="p2">Second paragraph</p> -</html>; - -alert(html.p.(@id == "p1")); // 警報 "First paragraph" -</pre> -<p>在表達式前面比對路徑的結點（在本例中即 p 元素）會在表達式求值之前先加上作用域的限縮。就如同已經用 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_參考/語法/with" title="zh tw/Core JavaScript 1.5 參考/語法/with">with 語法</a> 指定了一樣。</p> -<p>因此，過濾器也可以依據在目前元素中內含的單一結點的值來執行︰</p> -<pre>var people = <people> - <person> - <name>Bob</name> - <age>32</age> - </person> - <person> - <name>Joe</name> - <age>46</age> - </person> -</people>; - -alert(people.person.(name == "Joe").age); // 警報 46 -</pre> -<p>也可以使用 JavaScript 函數當作過濾器的表達式︰</p> -<pre>function over40(i) { - return i > 40; -} - -alert(people.person.(over40(parseInt(age))).name); // 警報 Joe -</pre> -<h3 id="命名空間的處理" name="命名空間的處理">命名空間的處理</h3> -<p>E4X 也全面考慮到命名空間。任何代表結點或屬性的 XML 物件都提供了可返回 <code>QName</code> 物件的 <code>name()</code> 方法，使加上命名空間的元素的查詢更為容易。</p> -<h4 id="預設" name="預設">預設</h4> -<pre>default xml namespace = "http://www.w3.org/1999/xhtml"; -// 目前還沒有必要在 HTML 標記裡指定命名空間 -var xhtml = <html><head><title></title></head><body> - <p>text</p></body></html>; -alert(xhtml.head); // 目前還沒有必要在此處的子元素中指定命名空間</pre> -<h4 id="非預設" name="非預設">非預設</h4> -<pre>var xhtml = <html xmlns="http://www.w3.org/1999/xhtml"> - <head> - <title>Embedded SVG demo</title> - </head> - <body> - <h1>Embedded SVG demo</h1> - <svg xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 100 100"> - <circle cx="50" - cy="50" - r="20" - stroke="orange" - stroke-width="2px" - fill="yellow" /> - </svg> - </body> -</html>; - -alert(xhtml.name().localName); // 警報 "html" -alert(xhtml.name().uri); // 警報 "http://www.w3.org/1999/xhtml" -</pre> -<p>若要存取非預設命名空間內部的元素，首先建立 <code>Namespace</code> 物件把特定的命名空間的 URI 加以封裝︰</p> -<pre>var svgns = new Namespace('http://www.w3.org/2000/svg'); -</pre> -<p>目前可以在 E4X 中使用 <code>namespace::localName</code> 代替一般的元素指定子來作查詢︰</p> -<pre>var svg = xhtml..svgns::svg; -alert(svg); // 顯示文件中的 <svg> 部分 -</pre> -<h2 id="參閱" name="參閱">參閱</h2> -<ul> - <li><a class="internal" href="/zh_tw/E4X" title="zh tw/E4X">E4X</a></li> - <li><a class="internal" href="/zh_tw/E4X_教學" title="zh tw/E4X 教學">E4X 教學</a></li> -</ul> -<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Processing_XML_with_E4X", "zh-cn": "cn/Core_JavaScript_1.5_Guide/Processing_XML_with_E4X", "fr": "fr/Guide_JavaScript_1.5/Traitement_de_XML_avec_E4X", "ja": "ja/Core_JavaScript_1.5_Guide/Processing_XML_with_E4X" } ) }}</p> diff --git a/files/zh-tw/archive/web/index.html b/files/zh-tw/archive/web/index.html deleted file mode 100644 index 6f60d315ff..0000000000 --- a/files/zh-tw/archive/web/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Archived open Web documentation -slug: Archive/Web -tags: - - Archived - - NeedsTranslation - - TopicStub - - Web -translation_of: Archive/Web ---- -<p>The documentation listed below is archived, obsolete material about open Web topics.</p> -<p>{{SubpagesWithSummaries}}</p> |