diff options
| author | Florian Merz <me@fiji-flo.de> | 2021-02-11 13:12:08 +0100 |
|---|---|---|
| committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 13:12:08 +0100 |
| commit | 43a5cac2eff22c21071800e13bef12af9d3a37d0 (patch) | |
| tree | f6e91f8aa958f15bd0b0aabf7b8dfc09063eceda /files/zh-tw/conflicting | |
| parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
| download | translated-content-43a5cac2eff22c21071800e13bef12af9d3a37d0.tar.gz translated-content-43a5cac2eff22c21071800e13bef12af9d3a37d0.tar.bz2 translated-content-43a5cac2eff22c21071800e13bef12af9d3a37d0.zip | |
unslug zh-tw: move
Diffstat (limited to 'files/zh-tw/conflicting')
64 files changed, 6468 insertions, 0 deletions
diff --git a/files/zh-tw/conflicting/learn/html/introduction_to_html/index.html b/files/zh-tw/conflicting/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..29c2532f6f --- /dev/null +++ b/files/zh-tw/conflicting/learn/html/introduction_to_html/index.html @@ -0,0 +1,90 @@ +--- +title: 應該避免的過時語法 +slug: Web_開發/Historical_artifacts_to_avoid +translation_of: Learn/HTML/Introduction_to_HTML +translation_of_original: Web/Guide/HTML/Obsolete_things_to_avoid +--- +<h2 id="介紹">介紹</h2> + +<p>許多人藉由觀看原始碼，然後複製貼上來學習 HTML、CSS 及 JavaScript。然而他們並沒有考慮到原本的網站，是否正確實做過。這意味著他們延續了一些過去必要，但現在不需要的程式慣例。這篇文章就是要列出那些隨著時間，變得不必要、或糟糕的程式語法。</p> + +<h2 id="Doctype">Doctype</h2> + +<p>大約有十來種 <a class="external" href="http://en.wikipedia.org/wiki/Document_Type_Declaration">(X)HTML文件類型描述（doctype）</a>，他們之間的差異非常細微（甚至沒差別），我們建議你使用以下 HTML5 的文件類型宣告：</p> + +<pre><!DOCTYPE html></pre> + +<p>如此會觸發所有瀏覽器使用標準模式（甚至包含 Internet Explorer 6）。</p> + +<h2 id="<meta>_元素與_charset_屬性"><code><meta></code> 元素與 <code>charset</code> 屬性</h2> + +<p>如同以下的原始碼寫法並不少見：</p> + +<pre><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></pre> + +<p>然而，就算你把它縮減成這樣，所有的瀏覽器還是會做出相同判定（甚至包括Internet Explorer 6）：</p> + +<pre><meta charset="UTF-8" /> +</pre> + +<p>這些知識已經透過<a href="https://blog.whatwg.org/the-road-to-html-5-character-encoding">逆向工程（reverse engineering）</a>與<a href="http://lists.w3.org/Archives/Public/public-html/2007Jul/0550.html#replies">實用主義（pragmatism）</a>證實。用就對了。</p> + +<h2 id="不存在的_<meta>_元素">不存在的 <code><meta></code> 元素</h2> + +<p>許多被棄用或不標準的值，常常因為從某個頁面被複製到另個頁面，而延續了它們的利用。儘管這些元件被廣為利用，它們其實不符合規範、也不會有效用。特別是，不要去使用：</p> + +<ul> + <li><code><meta name="MSSmartTagsPreventParsing" content="true"></code> 這個只有在其中一個 beta 版的 Internet Explorer 6 是有用處的。這個 beta 版已經不再使用，而且這版本的特色聰明標籤（smart tags）已經被移除，也不會再被加回來。</li> + <li><code><meta name="robots" content="all"> </code>雖然 <code>robot</code> 屬性是存在且確實合法的，但請不要去使用根本不存在的值，像是 <code>all</code>。 <code>robots</code> 預設的值為 <code>index, follow</code>，其實這就是你寫的 <code>all</code> 想要做的事。因此請直接移除整個 <code><meta></code> 標籤即可。</li> + <li><code><meta name="copyright" content="…"> </code> 這個 meta 並不存在。移除它並創建一個版權頁面或 <code>div</code>，或是使用 <code>rel="copyright"</code> 的 {{HTMLElement("link")}} HTML 元素之連結。</li> + <li><code><meta name="rating" content="…"> </code> 這個 meta 並不存在。只要移除整個 <code><meta></code> 即可。</li> +</ul> + +<h2 id="HTML_腳本的註解">HTML 腳本的註解</h2> + +<p>曾經有一段時間有些瀏覽器了解 {{ HTMLElement("script") }} 標籤，但有些則否。這有時導致瀏覽器把應該作為腳本的文字，解讀成純文字。有個自然的想法，使得腳本成為 HTML 的註解。這方法，可以讓能執行腳本的瀏覽器做動、而不了解的瀏覽器忽略。</p> + +<p>從這時起，我們繼承了：</p> + +<pre><script> +<!-- +var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); +document.write(unescape("%3Cscript src='" + gaJsHost + "bla.com/ga.js' type='text/javascript'%3E%3C/script%3E")); +//--> +</script> +</pre> + +<p>或是：</p> + +<pre><script type="text/javascript"> +<!--//--><![CDATA[//><!-- +Blabla.extend(MyFramework.settings, { "basePath": "/" }); +//--><!]]> +</script> +</pre> + +<p>如今，這只會在 strict XML 驗證下，因為註解避開不帶引號標記的誤報，而有所幫助。除此之外，是完全無用的。甚至不執行腳本的瀏覽器，也只會忽略 {{ HTMLElement("script") }} 標籤。簡單起見，只要把你的腳本寫在 {{ HTMLElement("script") }} 的開頭與結尾之間就行。更理想的話，把你的腳本變成獨立的檔案，並透過 {{ htmlattrxref("src", "script") }} 屬性連結。如果你在寫腳本，考慮使用 HTML5 {{ htmlattrxref("async", "script") }} 與 {{ htmlattrxref("defer", "script") }} 屬性。</p> + +<h2 id="不應再使用的元素">不應再使用的元素</h2> + +<h3 id="font_basefont"><a href="/zh-TW/docs/Web/HTML/Element/font">font</a>, <a href="/zh-TW/docs/Web/HTML/Element/basefont">basefont</a></h3> + +<p>這些元素不應再使用。針對元素排版外觀，應當優先考慮 CSS，並藉由元素、ID、或 class 屬性控制目標。</p> + +<h3 id="b_i_u">b, i, u</h3> + +<p>這些往往比較有爭議，但是當有相應的話，盡量去使用個別的 {{ HTMLElement("strong") }}、{{ HTMLElement("em") }} 或是 {{ HTMLElement("span") }} 和 CSS (<code>text-decoration:underline</code>)。</p> + +<p>斟酌考慮使用哪個元素。有些以發展為導向的頁面，建議以簡單的 {{ HTMLElement("strong") }} 取代 {{ HTMLElement("b") }}、還有 {{ HTMLElement("em") }} 取代 {{ HTMLElement("i") }}。<strong>遵從這個建議不是好主意。</strong>{{ HTMLElement("strong") }} 是用作強調陳述，而 {{ HTMLElement("em") }} 只是加粗文字。例如，使用 {{ HTMLElement("em") }} 去簡單完成斜體不是好主意。非強調的斜體文字可以透過你頁面 CSS 的 <code>font-style:italic</code> 完成。類似的，書的標題和藝術作品傳統上都被轉成斜體，但針對這些東西使用 {{ HTMLElement("cite") }} 元素可以給出比 {{ HTMLElement("em") }} 或 {{ HTMLElement("i") }} 更語意的標記。</p> + +<h3 id="acronym"><a href="/zh-TW/docs/Web/HTML/Element/acronym">acronym</a></h3> + +<p>acronym 元素不應該再使用。要表示縮寫應當用 {{ HTMLElement("abbr") }}。</p> + +<h3 id="tt_xmp"><a href="/zh-TW/docs/Web/HTML/Element/tt">tt</a>, <a href="/zh-TW/docs/Web/HTML/Element/xmp">xmp</a></h3> + +<p>不要使用這些元素。要表現出電腦程式碼的片段，使用 {{ HTMLElement("code") }}。要表現出預格式化的文字，使用 {{ HTMLElement("pre") }}。如果只是想要 monospace 字型，在 CSS 使用 <code>font-family: monospace</code>。</p> + +<h3 id="applet"><a href="/zh-TW/docs/Web/HTML/Element/applet">applet</a></h3> + +<p>這個元素不應再使用。更通用的 {{ HTMLElement("object") }} 才是首選。</p> diff --git a/files/zh-tw/conflicting/learn/javascript/objects/index.html b/files/zh-tw/conflicting/learn/javascript/objects/index.html new file mode 100644 index 0000000000..292229d00d --- /dev/null +++ b/files/zh-tw/conflicting/learn/javascript/objects/index.html @@ -0,0 +1,394 @@ +--- +title: JavaScript 物件導向介紹 +slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +tags: + - 中階 + - 命名空間 + - 封裝 + - 建構子 + - 成員 + - 物件 + - 物件導向 + - 物件導向程式設計 +translation_of: Learn/JavaScript/Objects +translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +--- +<div>{{jsSidebar("Introductory")}}</div> + +<p>深入淺出物件導向，JavaScript 支援強大、彈性的物件導向程式設計 ({{Glossary("OOP")}})。本篇文章會先介紹物件導向程式設計，然後複習 JavaScript 物件模型，最後示範在 JavaScript 物件導向程式設計的概念。本篇文章並不會介紹 <a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Classes">在 ECMAScript 6 的物件導向程式設計</a> 的新語法。</p> + +<h2 id="複習_JavaScript">複習 JavaScript</h2> + +<p>若您對 JavaScript 變數、型態、函數及作用範圍的觀念並不是很有信心，您可以閱讀 <a href="/zh-TW/docs/Web/JavaScript/A_re-introduction_to_JavaScript">重新膫解 JavaScript</a> 中相關的主題。您也可以參考 <a href="/zh-TW/docs/Web/JavaScript/Guide">JavaScript 指南</a>。</p> + +<h2 id="物件導向程式設計">物件導向程式設計</h2> + +<p>物件導向程式設計 (Object-oriented programming, OOP) 是一種使用 {{glossary("abstraction")}} 概念表達現實世界的程式設計方式。物件導向程式設計運用數個先前所建立的技術所組成，包含模組化 ({{glossary("modularity")}})、多型 ({{glossary("polymorphism")}}) 以及封裝 ({{glossary("encapsulation")}}) 。直到今天許多主流的程式語言 (如 Java, JavaScript, C#, C++, Python, PHP, Ruby 與 Objective-C) 也都支援物件導向程式設計。</p> + +<p>物件導向程式設計是將軟體想像成由一群物件交互合作所組成，而非以往以函數 (Function) 或簡單的指令集交互合作所組成。在物件導向的架構中，每個物件都具有接收訊息，處理資料以及發送訊息給其他物件的能力。每個物件都可視為獨一無二的個體，他們扮演不同的角色並有不同的能力及責任。</p> + +<p>物作導向程式設計提出了一個一個更有彈性且易於維護的設計方法，且廣泛被許多大型軟體工程所採用。由於物件導向程式設計強調模組化，因為物件導向的程式碼變的較為容易開發且易於理解。與較少模組化的程式設計技術相比，物件導向的程式碼更能更直接分析、編寫、理解複雜的情況與程序。<a href="#cite-1"><sup>1</sup></a></p> + +<p>JavaScript 是一個以雛型為基礎 (Prototype-based) 的程式設計語言 (或更準確的說是以雛型為基礎的腳本語言)，它採用了複製的模式而非繼承。以雛型為基礎的程式設計語言是一種物件導向程式設計，使用了函數來當做類別 (Class) 的建構子 (Constructor)，儘管 JavaScript 擁有類別 (Class) 的關鍵字，但它沒有類別敘述，當要拿 JavaScript 與其他物件導向程式語言相比時，這是很重要的區別。</p> + +<h2 id="專門用語">專門用語</h2> + +<dl> + <dt>{{Glossary("Namespace")}}</dt> + <dd>可讓開發人員包裝所有功能到一個獨一無二、特定應用程式名稱的容器。</dd> + <dt>{{Glossary("Class")}}</dt> + <dd>用來定義物件的特徵，類別 (Class) 是物件屬性與方法的藍圖。</dd> + <dt>{{Glossary("Object")}}</dt> + <dd>類別 (Class) 的實際案例。</dd> + <dt>{{Glossary("Property")}}</dt> + <dd>物件 (Object) 的特徵，例如：顏色。</dd> + <dt>{{Glossary("Method")}}</dt> + <dd>物件 (Object) 的功能，例如：行走。它是與類別相關的子程序或函數。</dd> + <dt>{{Glossary("Constructor")}}</dt> + <dd>一個在物件產生時會被呼叫的方法。通常會使用與其所在類別 (Class) 相同的名稱。</dd> + <dt>{{Glossary("Inheritance")}}</dt> + <dd>一個類別 (Class) 可以繼承另一個類別的特徵與功能。</dd> + <dt>{{Glossary("Encapsulation")}}</dt> + <dd>可以將資料與方法包裝在一起使用的技術。</dd> + <dt>{{Glossary("Abstraction")}}</dt> + <dd>結合物件的複雜繼承關係、方法與屬性來充分反映現實的模型。</dd> + <dt>{{Glossary("Polymorphism")}}</dt> + <dd>Poly 指的是 "多" 而 Morphism 指的是 "<em>型</em>"。是指不同的類別可以定義相同的方法或屬性。</dd> +</dl> + +<p>要了解物件導向程式設計更廣泛的說明，請參考維基百科的 {{interwiki("wikipedia", "Object-oriented programming")}}。</p> + +<h2 id="以雛型為基礎_Prototype-based_的程式設計">以雛型為基礎 (Prototype-based) 的程式設計</h2> + +<p>以雛型為基礎的程式設計是一種不使用類別的物件導向程式設計模式，但它是第一個透過修改 (或者擴充) 既有的 <em>prototype</em> 來達到類別的功能並可重複使用 (等同在以類別為基礎的程式語言中的繼承)。 又稱作無類別 (Classless)、雛型導向 (Prototype-oriented) 或以實例為基的程式語言 (Instance-based programming)。</p> + +<p>最早 (最典型) 以雛型為基礎的程式語言的典範是由 David Ungar 與 Randall Smith 所開發的 {{interwiki("wikipedia", "Self (programming language)", "Self")}}。近年來無類別 (Class-less) 的程式設計風格越來越流行，並且被 JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (在使用 Viewer 框架來處理 Morphic 元件時)，還有許多其他程式語言所採用。<a href="#cite-2"><sup>2</sup></a></p> + +<h2 id="JavaScript_物件導向程式設計">JavaScript 物件導向程式設計</h2> + +<h3 id="命名空間">命名空間</h3> + +<p>命名空間是一個可讓開發人員包裝所有功能到一個獨一無二、特定應用程式名稱的容器。在<strong> JavaScript 中命名空間其實是另一個包含方法、屬性及物件的物件。</strong></p> + +<div class="note"> +<p>注意，在 JavaScript 中一般物件與命名空間並無語法上的差異，這於其他許多物件導向的語言並不相同，可能是初學 JavaScript 的程式設計師容易混淆的地方。</p> +</div> + +<p>在 JavaScript 建立一個命名空間背後的概念非常的簡單：建立一個全域的物件，然後將所有的變數、方法及函數設為該物件的屬性。使用命名空間可以減少應用程式中名稱衝突發生的機率，由於每個應用程式的物件皆會是應用程式定義的全域物件的屬性。</p> + +<p>讓我們來建立一個叫做 MYAPP 全域物件：</p> + +<pre class="brush: js notranslate">// 全域命名空間 +var MYAPP = MYAPP || {};</pre> + +<p>在上述程式範例，我們會先檢查 <code>MYAPP</code> 是否已經定義過 (不論是定義在同一檔案或在其他檔案)。若已定義過，便會使用現有的 MYAPP 全域物件，否則會建一個稱作 <code>MYAPP</code> 的空物件來包裝方法、函數、變數及物件。</p> + +<p>我們也可以建立子命名空間 (要注意，全域物件必須已事先定義)：</p> + +<pre class="brush: js notranslate">// 子命名空間 +MYAPP.event = {};</pre> + +<p>以下的程式碼會建立一個命名空間並加入變數、函數以及一個方法：</p> + +<pre class="brush: js notranslate">// 建立一個稱作 MYAPP.commonMethod 的容器來存放常用方法與屬性 +MYAPP.commonMethod = { + regExForName: "", // define regex for name validation + regExForPhone: "", // define regex for phone no validation + validateName: function(name){ + // Do something with name, you can access regExForName variable + // using "this.regExForName" + }, + + validatePhoneNo: function(phoneNo){ + // do something with phone number + } +} + +// 物件與方法宣告 +MYAPP.event = { + addListener: function(el, type, fn) { + // code stuff + }, + removeListener: function(el, type, fn) { + // code stuff + }, + getEvent: function(e) { + // code stuff + } + + // 可以加入其他方法與屬性 +} + +// 使用 addListener 方法的語法： +MYAPP.event.addListener("yourel", "type", callback);</pre> + +<h3 id="標準內建物件">標準內建物件</h3> + +<p> JavaScript 的核心內建了許多物件，例如有 {{jsxref("Math")}}, {{jsxref("Object")}}, {{jsxref("Array")}} 以及 {{jsxref("String")}}。以下範例將示範如何使用 Math 物件中的 <code>random()</code> <code>方法</code>來取得一個隨機的數字。</p> + +<pre class="brush: js notranslate">console.log(Math.random()); +</pre> + +<div class="note"><strong>注意：</strong>這個例子及之後的例子會假設全域已經有定義名稱為 {{domxref("console.log()")}} 的函數。<code>console.log()</code> 函數並不算是 JavaScript 的一部份，但是有許多瀏覽器會實作這個功能來協助除錯使用。</div> + +<p>請參考 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects" title="zh-TW/docs/Web/JavaScript/Reference/Global_Objects">JavaScript 參考: 標準內建物件</a> 來取得在 JavaScript 中所有核心物件的清單。</p> + +<p>每個在 JavaScript 中的物件均為物件 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code> <code>的</code>實例 (Instance)，因此會繼承其所有的屬性與方法。</p> + +<h3 id="自訂物件">自訂物件</h3> + +<h4 id="類別_Class">類別 (Class)</h4> + +<p>JavaScript 是以雛形為基礎的程式語言，並沒有像在 C++ 或 Java 中看以到的 <code>class</code> 敘述句，這有時會讓習慣使用有 <code>class</code> 敘述句的程式設計師混淆。JavaScript 使用函數來作為類別 (Class) 的建構子 (Constructor)，要定義一個類別 (Class) 如同定義一個函數 (Function)一樣簡單，以下例子中我們使用空的建構子來定義了一個新的 Person 類別。</p> + +<pre class="brush: js notranslate">var Person = function () {}; +</pre> + +<h4 id="物件_Object_-_類別的實例_Instance">物件 (Object) - 類別的實例 (Instance)</h4> + +<p>要建立物件 <code>obj</code> 的新實例，我們可以使用 <code>new obj</code> 敘述句，並將結果 (型態為 <code>obj</code>) 指派 (Assign) 到一個變數方便之後存取。</p> + +<p>在先前範例中我們定義了一個名稱為 <code>Person</code> 的類別 (Class)。在以下的例子我們會建立兩個實例 (<code>person1</code> 與 <code>person2</code>)。</p> + +<pre class="brush: js notranslate">var person1 = new Person(); +var person2 = new Person(); +</pre> + +<div class="note"> +<p>請參考 {{jsxref("Object.create()")}} 來了解建立未初始化實例的實例化新方法。</p> +</div> + +<h4 id="建構子_Constructor">建構子 (Constructor)</h4> + +<p>建構子會在實例化 (Instantiation) 時被呼叫 (建立物件實例被建立時)。建構子是類別的一個方法，在 JavaScript 中會以函數來當做物件的建構子，因此無須明確的定義建構子方法，而每個在類別中宣告的動作均會在實例化時被執行。</p> + +<p>建構子會用來設定物件的屬性 (Property) 或是呼叫要準備讓物件可以使用的方法 (Method)。增加類別的方法及定義會使用另一種語法，在本文稍後會說明。</p> + +<p>在以下例之中，類別 <code>Person</code> 的建構子在 <code>Person </code>實例化時會記錄下一個訊息。</p> + +<pre class="brush: js notranslate">var Person = function () { + console.log('instance created'); +}; + +var person1 = new Person(); // 會記錄 "instance created" +var person2 = new Person(); // 會記錄 "instance created" +</pre> + +<h4 id="屬性_Property_-_物件的屬性">屬性 (Property) - 物件的屬性</h4> + +<p>屬性即為在類別中的變數，每個物件的實例都會有同樣的屬性。屬性會在類別的建構子 (函數) 中設定，所以屬性在每個實例產生時才會產生。</p> + +<p>關鍵字 <code>this </code>可以引用目前的物件，讓您使用在該類別中的其他屬性。存取 (讀寫或寫入) 一個在類別之外的屬性可以用語法：<code>InstanceName.Property</code>，如同在 C++, Java 以及其他語言。 (在類別內會使用語法 <code>this.Property</code> 來取得或設定屬性的數值。)</p> + +<p>在以下例子中，我們會在實例化時定義 <code>Person</code> 類別的 <code>firstName</code> 屬性：</p> + +<pre class="brush: js notranslate">var Person = function (firstName) { + this.firstName = firstName; + console.log('Person instantiated'); +}; + +var person1 = new Person('Alice'); // 會記錄 "Person instantiated" +var person2 = new Person('Bob'); // 會記錄 "Person instantiated" + +// 顯示物件的 firstName 屬性 +console.log('person1 is ' + person1.firstName); // 會記錄 "person1 is Alice" +console.log('person2 is ' + person2.firstName); // 會記錄 "person2 is Bob" +</pre> + +<h4 id="方法_Method">方法 (Method)</h4> + +<p>方法即為函數 (也如同函數般定義)，但是依照屬性的邏輯來運作，呼叫一個方法如同存取一個屬性，但您需要在函數名稱後加上 <code>()</code> ，並有可能會有參數。要定義一個方法，只需將函數指定 (Assign) 給類別的 <code>prototype</code> 屬性中一個已命名的屬性，接著，您便可用剛指定的屬性名稱來呼叫該物件的方法。</p> + +<p>以下範例中，我們為 <code>Person</code> 類別定義了方法 <code>sayHello()</code> 並使用。</p> + +<pre class="brush: js notranslate">var Person = function (firstName) { + this.firstName = firstName; +}; + +Person.prototype.sayHello = function() { + console.log("Hello, I'm " + this.firstName); +}; + +var person1 = new Person("Alice"); +var person2 = new Person("Bob"); + +// 呼叫 Person sayHello 方法。 +person1.sayHello(); // 會記錄 "Hello, I'm Alice" +person2.sayHello(); // 會記錄 "Hello, I'm Bob" +</pre> + +<p>在 JavaScript 中，方法其實是一般的函數物件 (Function object) 連結到一個物件的屬性，這意謂著您可以在 "物件之外" 呼叫方法。請看以下範例程式碼：</p> + +<pre class="brush: js notranslate">var Person = function (firstName) { + this.firstName = firstName; +}; + +Person.prototype.sayHello = function() { + console.log("Hello, I'm " + this.firstName); +}; + +var person1 = new Person("Alice"); +var person2 = new Person("Bob"); +var helloFunction = person1.sayHello; + +// 會記錄 "Hello, I'm Alice" +person1.sayHello(); + +// 會記錄 "Hello, I'm Bob" +person2.sayHello(); + +// 會記錄 "Hello, I'm undefined" (或在 Strict +// 模式會出現 TypeError) +helloFunction(); + +// 會記錄 true +console.log(helloFunction === person1.sayHello); + +// 會記錄 true +console.log(helloFunction === Person.prototype.sayHello); + +// 會記錄 "Hello, I'm Alice" +helloFunction.call(person1);</pre> + +<p>如範例中所示，我們讓所有的參考均指向 <code>sayHello</code> 函數 — 一個在 <code>person1、一個在 Person.prototype、另一個在 helloFunction</code> 變數 — 這些均參考<em>相同的函數</em>。在呼叫的過程中 <code>this</code> 的值會根據我們如何呼叫來決定，最常見的地方是：我們取得函數的物件屬性所在，在表示法中呼叫 <code>this</code> — <code>person1.sayHello()</code>— 會設定 <code>this</code> 為我們取得函數的地方 (<code>person1</code>)，這也是 <code>person1.sayHello() 顯示的名稱為 </code>"Alice" 以及 <code>person2.sayHello() 顯示的</code>名稱為 "Bob" 的原因。但如果我們以其他的方式來呼叫，那麼 <code>this</code> 結果將截然不同：在變數中呼叫 <code>this</code> — <code>helloFunction()</code>— 會設定 <code>this</code> 為所在的全域物件 (在瀏覽器即為 <code>window</code>)。由於物件 (可能) 並沒有 <code>firstName</code> 屬性，因此會得到 "Hello, I'm undefined" 這樣的結果 (在 Loose 模式才有這樣的結果，若在 <a href="/zh-TW/docs/Web/JavaScript/Reference/Strict_mode" title="/en/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict mode</a> 則會不同 [會出現錯誤]，為了避免混淆，此處將不會再詳述)。 或者我們可以像最後一個例子使用 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call</a> (或 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">apply</a>) 來明確的設定 <code>this。</code></p> + +<div class="note"><strong>注意：</strong>請參考 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call">call</a> 及 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply">apply</a> 來取得更多有關 <code>this</code> 的資訊</div> + +<h4 id="繼承">繼承</h4> + +<p>繼承是一種用一個或多個類別建立一個特殊版本類別的方式 (<em>JavaScript 僅支援單一繼承</em>)。這個特殊的類別通常稱做<em>子類別</em>，而其引用的類別則通常稱作<em>父類別</em>。在 JavaScript 您可以指定父類別的實例到子類別來做到這件事。在最近的瀏覽器中您也可以使用 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create" title="/zh-TW/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create">Object.create</a> 來實作繼承。</p> + +<div class="note"> +<p><strong>注意：</strong>JavaScript 不會偵測子類別的 <code>prototype.constructor</code> (請參考 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype">Object.prototype</a>)，所以我們必須手動處理。請參考在 Stackoverflow 的問題 "<a href="https://stackoverflow.com/questions/8453887/why-is-it-necessary-to-set-the-prototype-constructor">為什麼一定要設定 prototype 的建構子?</a>"。</p> +</div> + +<p>於以下範例，我們會定義類別 <code>Student</code> 做為 <code>Person</code> 的子類別。然後我們會重新定義 <code>sayHello()</code> 方法然後加入 <code>sayGoodBye()</code> 方法。</p> + +<pre class="brush: js notranslate">// 定義 Person 建構子 +var Person = function(firstName) { + this.firstName = firstName; +}; + +// 加入兩個方法到 Person.prototype +Person.prototype.walk = function(){ + console.log("I am walking!"); +}; + +Person.prototype.sayHello = function(){ + console.log("Hello, I'm " + this.firstName); +}; + +// 定義 Student 建構子 +function Student(firstName, subject) { + // Call the parent constructor, making sure (using call) + // that "this" is set correctly during the call + Person.call(this, firstName); + + // Initialize our Student-specific properties + this.subject = subject; +} + +// 建立 Student.prototype 物件來繼承 Person.prototype。 +// 注意: 在此處經常見的錯誤是使用 "new Person()" 來建立 +// Student.prototype。不正確的原因許多個，尤其是 +// 我們沒有給予 Person 任何 "firstName" 的參數。 +// 呼叫 Person 的正確位置在上方，也就是我們呼叫 Student +// 的地方。 +Student.prototype = Object.create(Person.prototype); // 詳見以下說明 + +// 設定 "constructor" 屬性參考 Student +Student.prototype.constructor = Student; + +// 替換 "sayHello" 方法 +Student.prototype.sayHello = function(){ + console.log("Hello, I'm " + this.firstName + ". I'm studying " + + this.subject + "."); +}; + +// 加入"sayGoodBye" 方法 +Student.prototype.sayGoodBye = function(){ + console.log("Goodbye!"); +}; + +// 範例用法: +var student1 = new Student("Janet", "Applied Physics"); +student1.sayHello(); // "Hello, I'm Janet. I'm studying Applied Physics." +student1.walk(); // "I am walking!" +student1.sayGoodBye(); // "Goodbye!" + +// 檢查 instanceof 可正常運作 +console.log(student1 instanceof Person); // true +console.log(student1 instanceof Student); // true +</pre> + +<p>於 <code>Student.prototype = Object.create(Person.prototype);</code> 一行：在舊版的 JavaScript 引擎沒有 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="Object.create"><code>Object.create</code></a>，可以使用 "polyfill" (又稱 "shim"，請參考以下文章連結) 或使用函數來達到同樣的效果，如：</p> + +<pre class="brush: js notranslate">function createObject(proto) { + function ctor() { } + ctor.prototype = proto; + return new ctor(); +} + +// 用法: +Student.prototype = createObject(Person.prototype); +</pre> + +<div class="note"><strong>注意：</strong> 請參考 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a> 來了解其功能與舊引擎使用的 shim。</div> + +<p>要在不管物件如何實例化的情況下確保 <code>this</code> 指向正確的地方並不簡單，儘管如此，這裡仍有一個簡單的習慣用法讓這件事變的較簡單。</p> + +<pre class="brush: js notranslate">var Person = function(firstName) { + if (this instanceof Person) { + this.firstName = firstName; + } else { + return new Person(firstName); + } +} +</pre> + +<h4 id="封裝">封裝</h4> + +<p>於上述例子中 <code>Student</code> 並不需要知道 <code>Person</code> 類別的 <code>walk()</code> 方法實作的方式，但仍可以使用該方法，除非我們想要更改該函數，否則 <code>Student</code> 類別並不需要明確的定義該函數。這樣的概念稱就叫作<strong>封裝 (Encapsulation)</strong>，透過將每個類別的資料與方法包裝成一個單位。</p> + +<p>隱藏資訊在其他語言是常見的功能，通當會使用私有 (Private) 與保護 (Protected) 方法/屬性。既使如此，您仍可在 JavaScript 模擬類似的操作，這並不是物件導向程式設計必要的功能。<a href="#cite-3"><sup>3</sup></a></p> + +<h4 id="抽象化">抽象化</h4> + +<p>抽象化是一個機制能讓您將工作問題的目前部份進行建立模型，不論是用繼承 (特殊化) 或是組合的方式。JavaScript 可以透過繼承達到特殊化 (Specialization)，並可讓類別實例成為其他物件的屬性來達到組合 (Composition)。</p> + +<p>JavaScript 的 Function 類別繼承 Object 類別 (這示範了模型的特殊化) 而 {{jsxref("Function.prototype")}} 屬性是 {{jsxref("Object")}} 的實例 (這示範了組合)。</p> + +<pre class="brush: js notranslate">var foo = function () {}; + +// 會記錄 "foo is a Function: true" +console.log('foo is a Function: ' + (foo instanceof Function)); + +// 會記錄 "foo.prototype is an Object: true" +console.log('foo.prototype is an Object: ' + (foo.prototype instanceof Object));</pre> + +<h4 id="Polymorphism" name="Polymorphism">多型</h4> + +<p>如同所有方法與屬性會定義在 prototype 之中，不同的類別可以定義相同名稱的方法，而這些方法的有效範圍其所在的類別之中，除非兩個類別之間有父子關係 (例如，其中一個類別是繼承另一個類別而來)。</p> + +<h2 id="注意">注意</h2> + +<p>在 JavaScript 並不是只有這些方式可以實作物件導向程式設計，JavaScript 在這方面非常有彈性。另外，在此處示範的方法並沒有使用任何語言特殊技巧，也沒有模仿其他語言的物件理論來實作。</p> + +<p>在 JavaScript 也有其他的方式可以做更進階的物件導向程式設計，但已超出本篇簡介的範圍。</p> + +<h2 id="參考文獻">參考文獻</h2> + +<ol> + <li><a href="https://en.wikipedia.org/wiki/Object-oriented_programming" id="cite-1">Wikipedia - Object-oriented programming</a></li> + <li><a href="https://en.wikipedia.org/wiki/Prototype-based_programming" id="cite-2">Wikipedia - Prototype-based programming</a></li> + <li><a href="http://en.wikipedia.org/wiki/Encapsulation_%28object-oriented_programming%29" id="cite-3">Wikipedia - Encapsulation (object-oriented programming)</a></li> +</ol> + +<h2 id="相關資料">相關資料</h2> + +<ul> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Function.prototype.apply()")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Strict_mode">嚴謹模式 (Strict mode)</a></li> +</ul> diff --git a/files/zh-tw/conflicting/learn/server-side/django/index.html b/files/zh-tw/conflicting/learn/server-side/django/index.html new file mode 100644 index 0000000000..11e3c03038 --- /dev/null +++ b/files/zh-tw/conflicting/learn/server-side/django/index.html @@ -0,0 +1,66 @@ +--- +title: Python +slug: Python +tags: + - Python +translation_of: Learn/Server-side/Django +translation_of_original: Python +--- +<p><a class="external" href="http://www.python.org">Python</a> 是一種直譯式的腳本語言，是一個跨平台的的語言，可以在各個平台上面使用，如：Linux、Mac OS X、以及Microsoft Windows.</p> +<h2 id="Learning_Python" name="Learning_Python">學習 Python</h2> +<h3 id="免費的電子書">免費的電子書</h3> +<p>如果是初學 Python，可以考慮看 <a class="external" href="http://www.diveintopython.net/toc/index.html">Dive Into Python</a>，雖然他最後是更新的時間是2004年，但依然是一部免費而且很棒的教程。它含括了幾乎所有 Python 的基本元素，還有一些平常使用 Python 可以執行什麼任務，像是網頁的請求，檔案的處理。如果對於 Python 基礎已經基礎的概念，就可以參考 <a class="external" href="http://gnosis.cx/TPiP/">Text Processing In Python</a> ，這本書將會對於 Python 有更進階的介紹。</p> +<p>其他相關的免費電子書或是線上資源 :</p> +<ul style="margin-left: 40px;"> + <li>The <a class="external" href="http://docs.python.org/tutorial/index.html" title="http://docs.python.org/tutorial/index.html">Python Tutorial</a> at <a href="http://docs.python.org" title="http://docs.python.org">docs.python.org</a></li> + <li><a href="http://en.wikibooks.org/wiki/Non-Programmer%27s_Tutorial_for_Python_2.6" title="http://en.wikibooks.org/wiki/Non-Programmer%27s_Tutorial_for_Python_2.6">Non-Programmer's Tutorial for Python 2.6</a> at <a href="http://en.wikibooks.org/wiki/Main_Page" title="http://en.wikibooks.org/wiki/Main_Page">Wikibooks</a></li> + <li><a href="http://www.greenteapress.com/thinkpython/" title="http://www.greenteapress.com/thinkpython/">Think Python</a>: How to Think Like a Computer Scientist by Allen B. Downey (free <a href="http://www.greenteapress.com/thinkpython/thinkpython.pdf" title="http://www.greenteapress.com/thinkpython/thinkpython.pdf">PDF</a> & <a href="http://www.greenteapress.com/thinkpython/html/index.html" title="http://www.greenteapress.com/thinkpython/html/index.html">HTML</a> versions). + <ul> + <li><a href="http://greenteapress.com/complexity/index.html" title="http://greenteapress.com/complexity/index.html">Think Complexity</a> by Allen B. Downey "picks up where Think Python leaves off" (free <a href="http://greenteapress.com/complexity/thinkcomplexity.pdf" title="http://greenteapress.com/complexity/thinkcomplexity.pdf">PDF</a> & <a href="http://greenteapress.com/complexity/html/index.html" title="http://greenteapress.com/complexity/html/index.html">HTML</a> versions)</li> + </ul> + </li> + <li><a href="http://learnpythonthehardway.org" title="http://learnpythonthehardway.org">Learn Python The Hard Way</a> by Zed Shaw (<a href="http://learnpythonthehardway.org/book/" title="http://learnpythonthehardway.org/book/">free HTML verison</a>)</li> + <li><a href="http://www.itmaybeahack.com/book/python-2.6/html/index.html" title="http://www.itmaybeahack.com/book/python-2.6/html/index.html">Building Skills in Python</a> by Steven F. Lott (<a href="http://www.itmaybeahack.com/book/python-2.6/latex/BuildingSkillsinPython.pdf" title="http://www.itmaybeahack.com/book/python-2.6/latex/BuildingSkillsinPython.pdf">also available as a PDF</a>)</li> +</ul> +<p>當了解基礎的 Python，<a href="http://python.net/~goodger/projects/pycon/2007/idiomatic/handout.html" title="http://python.net/~goodger/projects/pycon/2007/idiomatic/handout.html">Code Like a Pythonista: Idiomatic Python</a> 將幫助你了解一些 Python 特別的地方，還有跟別的語言的差異。</p> +<h3 id="Free_Online_Courses">Free Online Courses</h3> +<ul style="margin-left: 40px;"> + <li><a href="https://developers.google.com/edu/python/" title="http://code.google.com/edu/languages/google-python-class/">Google's Python Class</a></li> + <li>Learnstreet's Free <a href="http://www.learnstreet.com/lessons/languages/python" title="http://www.learnstreet.com/lessons/languages/python">Python Courses and Videos</a></li> + <li><a href="http://www.codecademy.com/tracks/python" title="http://www.codecademy.com/tracks/python">Python</a> at Code Academy</li> + <li><a href="http://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-189-a-gentle-introduction-to-programming-using-python-january-iap-2008/" title="http://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-189-a-gentle-introduction-to-programming-using-python-january-iap-2008/">A Gentle Introduction to Programming Using Python</a> at MIT</li> +</ul> +<h2 id="Python_in_Mozilla" name="Python_in_Mozilla">Python in Mozilla-based applications</h2> +<p><a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> in Mozilla is used to support inter-language communication. Out-of-box it only supports C++ <-> JavaScript communication. The <a href="/en-US/docs/PyXPCOM" title="PyXPCOM">Python XPCOM package</a> (also called PyXPCOM) is the low-level glue that ties Python and Mozilla together, letting XPCOM components written in JavaScript or C++ to be used from Python and vice versa. PyXPCOM is<strong> not</strong> included in the default Firefox build, so you'll need to use a third-party build or build yourself to use it. The most known consumer of PyXPCOM is the Komodo family of products.</p> +<p>Starting with Mozilla 1.9, Python DOM (<a href="/en-US/docs/PyDOM" title="PyDOM">PyDOM</a>) bindings are implemented. This lets <a href="/en-US/docs/Chrome" title="Chrome">chrome</a> XUL and HTML authors use Python in their <script> tags (again, not in the official Firefox/Thunderbird builds).</p> +<h2 id="Python-based_tools_for_Mozilla_development">Python-based tools for Mozilla development</h2> +<p>Python is used by Mozillians for tools that do various things with Mozilla apps and infrastructure. It would be useful to have a document on <a href="/en-US/docs/Python_Environment_and_Tools_for_Mozilla" title="Python_Environment_and_Tools_for_Mozilla">Python Environment and Tools for Mozilla</a>.</p> +<p>Tools are listed here: <a class="external" href="http://k0s.org/toolbox/?language=python">http://k0s.org/toolbox/?language=python</a></p> +<h2 id="Use_of_Python_at_Mozilla">Use of Python at Mozilla</h2> +<p>Mozilla has considerable infrastructure based on python:</p> +<ul> + <li>django for <a class="external" href="http://blog.mozilla.com/webdev/" title="http://blog.mozilla.com/webdev/">webdev</a></li> + <li><a class="link-https" href="https://wiki.mozilla.org/Buildbot" title="https://wiki.mozilla.org/Buildbot">buildbot</a> for continuous integration</li> + <li>many of our <a href="/en-US/docs/Mozilla_automated_testing" title="Mozilla automated testing">test harnesses</a></li> + <li><a class="link-https" href="https://wiki.mozilla.org/Auto-tools/Projects/Mozbase" title="https://wiki.mozilla.org/Auto-tools/Projects/MozBase">mozbase</a></li> +</ul> +<h2 id="Python_packaging">Python packaging</h2> +<p>Python uses <a class="external" href="http://docs.python.org/distutils/index.html" title="http://docs.python.org/distutils/index.html">setup.py</a> files to record metadata and installation instructions for <a class="external" href="http://docs.python.org/tutorial/modules.html#packages" title="http://docs.python.org/tutorial/modules.html#packages">python packages</a>. Running (e.g.) <code>python setup.py install</code> will install the package, making its modules available on <a class="external" href="http://docs.python.org/tutorial/modules.html#the-module-search-path" title="http://docs.python.org/tutorial/modules.html#the-module-search-path">python's import path</a>. For python 2.x, several distribution/installation modules exist. <code><a class="external" href="http://docs.python.org/distutils/index.html" title="http://docs.python.org/distutils/index.html">distutils</a></code> is the only distribution package available in <a class="external" href="http://docs.python.org/library/" title="http://docs.python.org/library/">python's standard library</a>. <code>distutils</code> has ability to upload to the <a class="external" href="http://pypi.python.org/pypi" title="http://pypi.python.org/pypi">python package index</a> and to install python packages. See the <a class="external" href="http://docs.python.org/distutils/index.html" title="http://docs.python.org/distutils/index.html">Python documentation on <code>distutils</code></a> for details.</p> +<p>While <code>distutils</code> is built in to python's standard library, <a class="external" href="http://peak.telecommunity.com/DevCenter/setuptools" title="http://peak.telecommunity.com/DevCenter/setuptools">setuptools</a> is a third-party ad hoc standard for packaging and distribution. It is mostly compatible with <code>distutils</code>, but importantly adds the ability for packages to <a class="external" href="http://peak.telecommunity.com/DevCenter/setuptools#declaring-dependencies" title="http://peak.telecommunity.com/DevCenter/setuptools#declaring-dependencies">include dependencies</a> that are installed as prerequisites at the time <code>setup.py</code> is invoked as well as the ability to install python packages in <a class="external" href="http://packages.python.org/distribute/setuptools.html#development-mode" title="http://packages.python.org/distribute/setuptools.html#development-mode">development mode</a>. This allows the files to be edited in place via <a class="external" href="http://docs.python.org/library/site.html" title="http://docs.python.org/library/site.html">.pth files</a> which is handy if you are actively working on a project. <code>setuptools</code> also provides an <code><a class="external" href="http://packages.python.org/distribute/easy_install.html" title="http://packages.python.org/distribute/easy_install.html">easy_install</a></code> script for installing packages and their dependencies through the web from <a class="external" href="http://pypi.python.org/pypi" title="http://pypi.python.org/pypi">PyPI</a>. For instance, in order to install the <a class="external" href="http://pyyaml.org/wiki/PyYAML" title="http://pyyaml.org/wiki/PyYAML">PyYAML</a> package, just run</p> +<pre>easy_install PyYAML +</pre> +<p>Since <code>setuptools</code> is not included with python, you will need to install it in order to use it. You may install it from the <code>setuptools</code> PyPI page by downloading, extracting, and running <code>python setup.py install</code>. Or you can use the <code><a class="external" href="http://peak.telecommunity.com/dist/ez_setup.py" title="http://peak.telecommunity.com/dist/ez_setup.py">ez_setup.py</a></code> script. You can download and run it with python (with root/Administrator privileges), or if you're in a <a class="external" href="http://www.gnu.org/s/bash/" title="http://www.gnu.org/s/bash/">bash shell</a>, you can run</p> +<pre>sudo python <(curl http://peak.telecommunity.com/dist/ez_setup.py) +</pre> +<p><code>setuptools</code> is also provided with instances of <a href="/en-US/docs/Python/Virtualenv" title="Virtualenv">virtualenv</a>, so if you use virtualenvs for developing you may not need to install <code>setuptools</code> globally. <a class="external" href="http://packages.python.org/distribute/" title="http://packages.python.org/distribute/">distribute</a> is a fork of setuptools written by Mozilla's own <a class="external" href="http://ziade.org/" title="http://ziade.org/">Tarek Ziade</a>. It is compatible with <code>setuptools</code> and fixes a few bugs there.</p> +<div class="note"> + <strong>Note:</strong> It's <strong>highly</strong> recommended that you use <a href="/en-US/docs/Python/Virtualenv" title="Virtualenv">virtualenv</a> for development!</div> +<p>The <a class="external" href="http://pypi.python.org/pypi" title="http://pypi.python.org/pypi">Python Package Index (PyPI)</a> is the standard distribution point for python packages. If you need some functionality in python, it is a good place to look!</p> +<p>See also: <a class="external" href="http://k0s.org/portfolio/packaging.html">http://k0s.org/portfolio/packaging.html</a></p> +<h2 id="See_also">See also</h2> +<ul> + <li><a class="external" href="http://docs.services.mozilla.com/server-devguide/release.html" title="http://docs.services.mozilla.com/server-devguide/release.html">Releasing an application</a> (Mozilla Services documentation)</li> + <li>http://pycheesecake.org/wiki/PythonTestingToolsTaxonomy</li> + <li><a class="link-https" href="https://wiki.mozilla.org/Auto-tools/Python101">https://wiki.mozilla.org/Auto-tools/Python101</a></li> + <li><a href="http://www.learnstreet.com/cg/simple/projects/python" title="http://www.learnstreet.com/cg/simple/projects/python">Python Projects </a>at Code Garage</li> +</ul> diff --git a/files/zh-tw/conflicting/web/api/canvas_api/tutorial/index.html b/files/zh-tw/conflicting/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..63bd0017fc --- /dev/null +++ b/files/zh-tw/conflicting/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,162 @@ +--- +title: Drawing graphics with canvas +slug: Web/API/Canvas_API/Drawing_graphics_with_canvas +translation_of: Web/API/Canvas_API/Tutorial +translation_of_original: Web/API/Canvas_API/Drawing_graphics_with_canvas +--- +<div class="note"> + <p>Most of this content (but not the documentation on drawWindow) has been rolled into the more expansive <a href="/en-US/docs/HTML/Canvas/Tutorial" title="HTML/Canvas/tutorial">Canvas tutorial</a>, this page should probably be redirected there as it's now redundant but some information may still be relevant.</p> +</div> +<h2 id="Introduction" name="Introduction">介紹</h2> +<p> 在 <a href="/en-US/docs/Mozilla/Firefox/Releases/1.5" title="Firefox_1.5_for_developers">Firefox 1.5</a>, Firefox 引入了新的 HTML 元素 <canvas> 來繪製圖形。<code><canvas></code> 是基於 <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG canvas specification</a> 的技術 (其發軔於蘋果公司在 Safari 上的實做)。 我們可以用它來在使用者端進行圖形和 UI 元件的渲染。</p> +<p><code> <canvas></code> 創建了一個具有一致多個 <em>rendering contexts 的</em>區域。在本文中，我們著重於 2D rendering context 的部份。對於 3D 圖形，您可以參考 <a href="/en-US/docs/WebGL" title="https://developer.mozilla.org/en/WebGL">WebGL rendering context</a>。</p> +<h2 id="The_2D_Rendering_Context" name="The_2D_Rendering_Context">2D Rendering Context</h2> +<h3 id="A_Simple_Example" name="A_Simple_Example">先來個簡單的範例</h3> +<p> 以下的程式碼做了一個簡單的展示：繪製兩個部份交疊的矩形 (其中一個矩形有透明屬性) :</p> +<pre class="brush: js">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + ctx.fillStyle = "rgb(200,0,0)"; + ctx.fillRect (10, 10, 55, 50); + + ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; + ctx.fillRect (30, 30, 55, 50); +} +</pre> +<div class="hidden"> + <pre class="brush: html"><canvas id="canvas" width="120" height="120"></canvas></pre> + <pre class="brush: js">draw();</pre> +</div> +<p>{{EmbedLiveSample('A_Simple_Example','150','150','/@api/deki/files/602/=Canvas_ex1.png')}}</p> +<p> 這個名為 <code>draw</code> 的函式從 <code>canvas</code> element 取得 <code>2d</code> context。物件 <code>ctx</code> 可以被用來在 canvas 上頭繪製圖形。從程式碼可以看出，我們簡單的藉由設定 fillStyle 繪製了兩個顏色不同的矩形，並透過 <code>fillRect 設定其位置。此外，第二個矩形透過</code> <code>rgba()</code> 配置了透明屬性。</p> +<p> 關於更複雜的圖形繪製，我們可以使用 <code>fillRect</code>, <code>strokeRect 和</code> <code>clearRect，他們分別可以畫出填滿的矩形, 僅有外框的矩形以及矩形區域清除。</code></p> +<h3 id="Using_Paths" name="Using_Paths">路徑的使用</h3> +<p> <code>beginPath</code> 函式用來初始一段路徑的繪製，並且可以透過 <code>moveTo</code>, <code>lineTo</code>, <code>arcTo</code>, <code>arc </code>以及相關的函式來描述路徑內容。要結束的時候呼叫 <code>closePath 即可。一旦路徑描述完畢，就可以透過</code> <code>fill</code> 或 <code>stroke</code> 來渲染該路徑在 canvas 上。</p> +<pre class="brush: js">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + ctx.fillStyle = "red"; + + ctx.beginPath(); + ctx.moveTo(30, 30); + ctx.lineTo(150, 150); + // was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong. + ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // <- this is right formula for the image on the right -> + ctx.lineTo(30, 30); + ctx.fill(); +} +</pre> +<div class="hidden"> + <pre class="brush: html"><canvas id="canvas" width="160" height="160"></canvas></pre> + <pre class="brush: js">draw();</pre> +</div> +<p>{{EmbedLiveSample('Using_Paths','190','190','/@api/deki/files/603/=Canvas_ex2.png')}}</p> +<p> 呼叫 <code>fill()</code> 或 <code>stroke()</code> 代表該路徑已經被使用。若要重新進行填滿等動作，則需要重頭創造一次路徑。</p> +<h3 id="Graphics_State" name="Graphics_State">圖像狀態</h3> +<p> <code>fillStyle</code>, <code>strokeStyle</code>, <code>lineWidth 和</code> <code>lineJoin</code> 等屬性是 <em>graphics state 的一部分。關於這些屬性的修改，您可以透過</em> <code>save()</code> 及 <code>restore() 來進行操作。</code></p> +<h3 id="A_More_Complicated_Example" name="A_More_Complicated_Example">一個更為複雜的範例</h3> +<p> 接著我們來看一個稍微複雜一點的範例，它同時引入了路徑, 狀態的修改以及變換矩陣。</p> +<pre class="brush: js">function drawBowtie(ctx, fillStyle) { + + ctx.fillStyle = "rgba(200,200,200,0.3)"; + ctx.fillRect(-30, -30, 60, 60); + + ctx.fillStyle = fillStyle; + ctx.globalAlpha = 1.0; + ctx.beginPath(); + ctx.moveTo(25, 25); + ctx.lineTo(-25, -25); + ctx.lineTo(25, -25); + ctx.lineTo(-25, 25); + ctx.closePath(); + ctx.fill(); +} + +function dot(ctx) { + ctx.save(); + ctx.fillStyle = "black"; + ctx.fillRect(-2, -2, 4, 4); + ctx.restore(); +} + +function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // note that all other translates are relative to this one + ctx.translate(45, 45); + + ctx.save(); + //ctx.translate(0, 0); // unnecessary + drawBowtie(ctx, "red"); + dot(ctx); + ctx.restore(); + + ctx.save(); + ctx.translate(85, 0); + ctx.rotate(45 * Math.PI / 180); + drawBowtie(ctx, "green"); + dot(ctx); + ctx.restore(); + + ctx.save(); + ctx.translate(0, 85); + ctx.rotate(135 * Math.PI / 180); + drawBowtie(ctx, "blue"); + dot(ctx); + ctx.restore(); + + ctx.save(); + ctx.translate(85, 85); + ctx.rotate(90 * Math.PI / 180); + drawBowtie(ctx, "yellow"); + dot(ctx); + ctx.restore(); +} +</pre> +<div class="hidden"> + <pre class="brush: html"><canvas id="canvas" width="185" height="185"></canvas></pre> + <pre class="brush: js">draw();</pre> +</div> +<p>{{EmbedLiveSample('A_More_Complicated_Example','215','215','/@api/deki/files/604/=Canvas_ex3.png')}}</p> +<p> 我們自定義了兩個函式： <code>drawBowtie 以及</code> <code>dot，並且個別呼叫了四次。</code>在呼叫他們之前，我們使用了 <code>translate()</code> 和 <code>rotate()</code> 來設定接著要繪製圖形的 transformation matrix，這將改變最終 dot 和 bowtie 的位置。<code>dot</code> 繪製了一個以 <code>(0, 0) 為中心的小黑正方形，而</code> <code>drawBowtie</code> 產生了一個填滿的蝴蝶結樣貌的圖形。</p> +<p> <code>save()</code> 和 <code>restore()</code> 規範了一系列動作的初始和結尾。一個值得注意的地方是，旋轉的動作是基於該圖形當下所在的位置， 所以 <code>translate() -> rotate() -> translate() 的結果會和</code> <code>translate() -> translate() -> rotate()</code> 不同。</p> +<h2 id="Compatibility_With_Apple_.3Ccanvas.3E" name="Compatibility_With_Apple_.3Ccanvas.3E">和 Apple <canvas> 的相容性</h2> +<p>For the most part, <code><canvas></code> is compatible with Apple's and other implementations. There are, however, a few issues to be aware of, described here.</p> +<h3 id="Required_.3C.2Fcanvas.3E_tag" name="Required_.3C.2Fcanvas.3E_tag"><code></canvas></code> tag 是必要的</h3> +<p>In the Apple Safari implementation, <code><canvas></code> is an element implemented in much the same way <code><img></code> is; it does not have an end tag. However, for <code><canvas></code> to have widespread use on the web, some facility for fallback content must be provided. Therefore, Mozilla's implementation has a <em>required</em> end tag.</p> +<p>If fallback content is not needed, a simple <code><canvas id="foo" ...></canvas></code> will be fully compatible with both Safari and Mozilla -- Safari will simply ignore the end tag.</p> +<p>If fallback content is desired, some CSS tricks must be employed to mask the fallback content from Safari (which should render just the canvas), and also to mask the CSS tricks themselves from IE (which should render the fallback content).</p> +<pre>canvas { + font-size: 0.00001px !ie; +}</pre> +<h2 id="Additional_Features" name="Additional_Features">其他特性</h2> +<h3 id="Rendering_Web_Content_Into_A_Canvas" name="Rendering_Web_Content_Into_A_Canvas">藉由 Canvas 渲染網頁內容</h3> +<div class="note"> + This feature is only available for code running with Chrome privileges. It is not allowed in normal HTML pages. <a href="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352" title="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352">Read why</a>.</div> +<p>Mozilla's <code>canvas</code> is extended with the <a href="/en-US/docs/DOM/CanvasRenderingContext2D#drawWindow()" title="DOM/CanvasRenderingContext2D#drawWindow()"><code>drawWindow()</code></a> method. This method draws a snapshot of the contents of a DOM <code>window</code> into the canvas. For example,</p> +<pre class="brush: js">ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)"); +</pre> +<p>would draw the contents of the current window, in the rectangle (0,0,100,200) in pixels relative to the top-left of the viewport, on a white background, into the canvas. By specifying "rgba(255,255,255,0)" as the color, the contents would be drawn with a transparent background (which would be slower).</p> +<p>It is usually a bad idea to use any background other than pure white "rgb(255,255,255)" or transparent, as this is what all browsers do, and many websites expect that transparent parts of their interface will be drawn on white background.</p> +<p>With this method, it is possible to fill a hidden IFRAME with arbitrary content (e.g., CSS-styled HTML text, or SVG) and draw it into a canvas. It will be scaled, rotated and so on according to the current transformation.</p> +<p>Ted Mielczarek's <a href="http://ted.mielczarek.org/code/mozilla/tabpreview/">tab preview</a> extension uses this technique in chrome to provide thumbnails of web pages, and the source is available for reference.</p> +<div class="note"> + <strong>Note:</strong> Using <code>canvas.drawWindow()</code> while handling a document's <code>onload</code> event doesn't work. In Firefox 3.5 or later, you can do this in a handler for the <a href="/en-US/docs/Gecko-Specific_DOM_Events#MozAfterPaint" title="Gecko-Specific DOM Events#MozAfterPaint"><code>MozAfterPaint</code></a> event to successfully draw HTML content into a canvas on page load.</div> +<h2 id="See_also" name="See_also">更多資訊</h2> +<ul> + <li><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas topic page</a></li> + <li><a href="/en-US/docs/Canvas_tutorial" title="Canvas_tutorial">Canvas tutorial</a></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG specification</a></li> + <li><a href="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html" title="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html">Apple Canvas Documentation</a></li> + <li><a href="http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html">Rendering Web Page Thumbnails</a></li> + <li>Some <a href="/en-US/docs/tag/canvas_examples">examples</a>: + <ul> + <li><a href="http://azarask.in/projects/algorithm-ink">Algorithm Ink</a></li> + <li><a href="http://www.tapper-ware.net/canvas3d/">OBJ format 3D Renderer</a></li> + <li><a href="/en-US/docs/A_Basic_RayCaster" title="A_Basic_RayCaster">A Basic RayCaster</a></li> + <li><a href="http://awordlike.textdriven.com/">The Lightweight Visual Thesaurus</a></li> + <li><a href="http://caimansys.com/painter/">Canvas Painter</a></li> + </ul> + </li> + <li><a href="/en-US/docs/tag/canvas">And more...</a></li> +</ul> diff --git a/files/zh-tw/conflicting/web/api/document_object_model/index.html b/files/zh-tw/conflicting/web/api/document_object_model/index.html new file mode 100644 index 0000000000..fc26bc0bee --- /dev/null +++ b/files/zh-tw/conflicting/web/api/document_object_model/index.html @@ -0,0 +1,22 @@ +--- +title: DOM developer guide +slug: Web/Guide/DOM +tags: + - API + - DOM + - Guide + - NeedsTranslation + - TopicStub +translation_of: Web/API/Document_Object_Model +translation_of_original: Web/Guide/API/DOM +--- +<p>{{draft}}</p> +<p>The <a href="/docs/DOM">Document Object Model</a> is an API for <a href="/en-US/docs/HTML">HTML</a> and <a href="/en-US/docs/XML">XML</a> documents. It provides a structural representation of the document, enabling the developer to modify its content and visual presentation. Essentially, it connects web pages to scripts or programming languages.</p> +<p>All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into <a href="/en-US/docs/Gecko_DOM_Reference">objects</a> (e.g., the document object that represents the document itself, the table object that represents a HTML table element, and so forth). Those objects are accessible via scripting languages in most recent web browsers.</p> +<p>The DOM is most often used in conjunction with <a href="/en-US/docs/JavaScript">JavaScript</a>. However, the DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though we focus on JavaScript throughout this site, implementations of the DOM can be built for <a href="http://www.w3.org/DOM/Bindings">any language</a>.</p> +<p>The <a href="http://www.w3.org/">World Wide Web Consortium</a> establishes a <a href="http://www.w3.org/DOM/">standard for the DOM</a>, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications.</p> +<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">Why is the DOM important?</h2> +<p>"Dynamic HTML" (<a href="/en-US/docs/DHTML">DHTML</a>) is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. The W3C DOM Working Group is working hard to make sure interoperable and language-neutral solutions are agreed upon (see also the <a href="http://www.w3.org/DOM/faq.html">W3C FAQ</a>). As Mozilla claims the title of "Web Application Platform", support for the DOM is one of the most requested features, and a necessary one if Mozilla wants to be a viable alternative to the other browsers.</p> +<p>Even more important is the fact that the user interface of Mozilla (also Firefox and Thunderbird) is built using <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>, using the DOM to <a href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface">manipulate its own UI</a>.</p> +<h2 id="More_about_the_DOM">More about the DOM</h2> +<p>{{LandingPageListSubpages}}</p> diff --git a/files/zh-tw/conflicting/web/api/html_drag_and_drop_api/index.html b/files/zh-tw/conflicting/web/api/html_drag_and_drop_api/index.html new file mode 100644 index 0000000000..8113a786ec --- /dev/null +++ b/files/zh-tw/conflicting/web/api/html_drag_and_drop_api/index.html @@ -0,0 +1,5 @@ +--- +title: DragDrop +slug: DragDrop +--- +This page was auto-generated because a user created a sub-page to this page. diff --git a/files/zh-tw/conflicting/web/api/index.html b/files/zh-tw/conflicting/web/api/index.html new file mode 100644 index 0000000000..c606a94846 --- /dev/null +++ b/files/zh-tw/conflicting/web/api/index.html @@ -0,0 +1,127 @@ +--- +title: WebAPI +slug: WebAPI +translation_of: Web/API +translation_of_original: WebAPI +--- +<p><strong>WebAPI</strong> 是指一系列的存取與裝置相容性 API，讓 Web App 及其內容能夠存取裝置的硬體 (例如電池狀態或裝置的振動硬體)，亦可存取裝置所儲存的資料 (例如行事曆或聯絡人清單)。在添加這些 API 之後，我們希望 Web 能跳脫目前的功能，並打破專利平台的限制。</p> + +<div class="note"> +<p><strong>注意：</strong>我們實際撰寫的內容，其實比本頁所列出的 API 還多，而且仍有許多連結尚未補齊。我們將持續補完相關內容，以提供更完整的資訊。可參閱 <a href="https://developer.mozilla.org/en-US/docs/WebAPI/Doc_status" title="WebAPI/Doc_status">WebAPI 文件狀態頁面</a>，隨時追蹤目前的 WebAPI 說明文件。</p> +</div> + +<div class="note"> +<p><strong>注意：</strong>若要了解小標圖的意義，可先參閱<a href="https://developer.mozilla.org/zh-TW/docs/%E6%87%89%E7%94%A8%E7%A8%8B%E5%BC%8F-840092-dup/Packaged_apps?redirectlocale=en-US&redirectslug=Apps%2FPackaged_apps" title="Web/Apps/Packaged_apps#Types_of_packaged_apps">《封裝式 (Packaged) App》</a>一文。</p> +</div> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Communication_APIs" name="Communication_APIs">通訊 API</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/zh-TW/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">Network Information API</a></dt> + <dd>提供目前網路連線的基本資訊，如連線速度。</dd> + <dt><a href="/en-US/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth">Bluetooth</a></dt> + <dd>The WebBluetooth API provides low-level access to the device's Bluetooth hardware.</dd> + <dt><a href="/en-US/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">Mobile Connection API</a> {{NonStandardBadge}}</dt> + <dd>Exposes information about the device's cellular connectivity, such as signal strength, operator information, and so forth.</dd> + <dt><a href="https://developer.mozilla.org/zh-TW/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">Network Stats API</a> {{NonStandardBadge}}</dt> + <dd>監控資料使用情形，並將此資料提供給 Privileged App。</dd> + <dt><a href="https://developer.mozilla.org/zh-TW/docs/WebAPI/TCP_Socket" title="WebAPI/TCP_Socket">TCP Socket API</a> {{NonStandardBadge}}</dt> + <dd>提供初階的 Socket 與 SSL 支援功能。</dd> + <dt><a href="https://developer.mozilla.org/zh-TW/docs/Web/Guide/Telephony" title="WebAPI/WebTelephony">Telephony</a> {{NonStandardBadge}}</dt> + <dd>讓 App 可撥/接電話，並使用內建電話的使用者介面。</dd> + <dt><a href="https://developer.mozilla.org/zh-TW/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS </a>{{NonStandardBadge}}</dt> + <dd>讓 App 能收/發 SMS 文字簡訊，並能存取/管理裝置所儲存的訊息。</dd> + <dt><a href="/en-US/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">WiFi Information API</a> {{NonStandardBadge}}</dt> + <dd>A privileged API which provides information about signal strength, the name of the current network, available WiFi networks, and so forth.</dd> +</dl> + +<h2 class="Documentation" id="Hardware_access_APIs" name="Hardware_access_APIs">硬體存取 API</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/zh-TW/docs/WebAPI/Using_Light_Events">Ambient Light Sensor API</a></dt> + <dd>可存取環境光線感測器，讓 App 可偵測裝置四周的環境光線強度。</dd> + <dt><a href="https://developer.mozilla.org/zh-TW/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">Battery Status API</a></dt> + <dd>不論是否插電進行充電，均將提供電池充電容量的相關資訊。</dd> + <dt><a href="https://developer.mozilla.org/zh-TW/docs/Using_geolocation" title="Using_geolocation">Geolocation API</a></dt> + <dd>提供裝置實際位置的相關資訊。</dd> + <dt><a href="/zh-TW/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>讓 App 能鎖定存取滑鼠，並取得「隨著時間推移的滑鼠位移 (即 deltas)」，而不只是絕對座標而已。特別適用遊戲類 App。</dd> + <dt><a href="https://developer.mozilla.org/zh-TW/docs/WebAPI/Proximity" title="WebAPI/Proximity">Proximity API</a></dt> + <dd>測得裝置與物體 (如使用者的臉部) 之間的距離。</dd> + <dt><a href="https://developer.mozilla.org/zh-TW/docs/WebAPI/Detecting_device_orientation" title="Detecting_device_orientation">Device Orientation API</a></dt> + <dd>當裝置的方向改變時，送出通知。</dd> + <dt><a href="https://developer.mozilla.org/zh-TW/docs/WebAPI/Managing_screen_orientation" title="Detecting_device_orientation">Screen Orientation API</a></dt> + <dd>在畫面方向改變時發出通知。另透過此 API，可讓 App 呈現其所偏好的方向。</dd> + <dt><a href="https://developer.mozilla.org/zh-TW/docs/WebAPI/Vibration" title="WebAPI/WebBluetooth">Vibration API</a></dt> + <dd>可讓 App 控制裝置上的振動硬體，用於如遊戲中的觸控回饋。此 API <strong>並非</strong>用於如「通知」的振動事件。若需要通知的振動事件，請參閱 <a href="https://developer.mozilla.org/zh-TW/docs/WebAPI/Alarm" title="WebAPI/Alarm">Alarm API</a>。</dd> + <dt><a href="https://developer.mozilla.org/zh-TW/docs/WebAPI/Camera" title="WebAPI/Camera">Camera API</a> {{NonStandardBadge}}</dt> + <dd>讓 App 透過裝置內建的相機，即可拍照或錄製影片。</dd> + <dt><a href="https://developer.mozilla.org/zh-TW/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">Power Management API</a> {{NonStandardBadge}}</dt> + <dd>讓 App 能開/關 CPU、螢幕、裝置電力，與類似資源。另可進一步監聽或檢視資源鎖定事件。</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/WebAPI" title="tag/CSS">View All...</a></span></p> +</div> + +<div class="section"> +<h2 class="Documentation" id="Data_management_APIs" name="Data_management_APIs">資料管理 API</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/zh-TW/docs/WebAPI/FileHandle" title="WebAPI/FileHandle_API">FileHandle API</a></dt> + <dd>支援可寫入的檔案，並搭配鎖存功能。</dd> + <dt><a href="https://developer.mozilla.org/zh-TW/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> + <dd>於用戶端儲存結構性的資料，並支援高效率的搜尋功能。</dd> + <dt><a href="https://developer.mozilla.org/zh-TW/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a> {{NonStandardBadge}}</dt> + <dd>App 可檢查並更改系統的相關設定；而這些設定選項均屬於永久儲存性質。</dd> +</dl> + +<h2 class="Documentation" id="Other_APIs" name="Other_APIs">其他 API</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/zh-TW/docs/WebAPI/Alarm" title="WebAPI/Alarm">Alarm API</a></dt> + <dd>App 可排定通知，亦可於特定時間自行啟動 App。</dd> + <dt><a href="https://developer.mozilla.org/zh-TW/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">Simple Push API</a></dt> + <dd>讓平台傳送通知訊息至特定 App。</dd> + <dt><a href="https://developer.mozilla.org/zh-TW/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Web Notifications</a></dt> + <dd>讓 App 傳送通知並於系統層級顯示。</dd> + <dt><a href="https://developer.mozilla.org/zh-TW/docs/%E6%87%89%E7%94%A8%E7%A8%8B%E5%BC%8F-840092-dup" title="Apps">Apps API</a> {{NonStandardBadge}}</dt> + <dd>Open WebApps API 可安裝並管理 Web App。此外，亦可讓 App 決定付款資訊。</dd> + <dt><a href="https://developer.mozilla.org/zh-TW/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities">Web Activities</a> {{NonStandardBadge}}</dt> + <dd>讓 App 可委派某個 Activity 給其他 App。舉例來說，XX App 可能要求 YY App 選擇並回傳相片。使用者一般均可設定 Activity 所應搭配使用的 App。</dd> + <dt><a href="https://developer.mozilla.org/zh-TW/docs/WebAPI/Browser" title="DOM/Using_the_Browser_API"><strong>Browser API</strong></a> {{NonStandardBadge}}</dt> + <dd>完全透過 Web 技術，支援建構 Web 瀏覽器 (可說是瀏覽器中再建構出瀏覽器)。</dd> +</dl> + +<dl> + <dt><a href="https://developer.mozilla.org/zh-TW/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">Idle API</a></dt> + <dd>使用者並未使用裝置時，讓 App 接收通知。</dd> + <dt><a href="https://developer.mozilla.org/zh-TW/docs/WebAPI/Permissions" title="WebAPI/Permissions">Permissions API</a> {{NonStandardBadge}}</dt> + <dd>集中管理 App 的權限 (Permission)。由設定類 (Settings) 的 App 所使用。</dd> + <dt><a href="https://developer.mozilla.org/zh-TW/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">Time/Clock API</a> {{NonStandardBadge}}</dt> + <dd>可設定目前時間。另透過 <a href="https://developer.mozilla.org/zh-TW/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a> 設定時區。</dd> +</dl> + +<h2 class="Community" id="Community" name="Community">WebAPI 社群</h2> + +<p>如果需要這些 API 的相關協助，則有許多方法可諮詢其他開發人員。</p> + +<ul> + <li>在 WebAPI 討論區中提出問題： {{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}</li> + <li>到 WebAPI IRC channel 逛逛：<a href="irc://irc.mozilla.org/webapi" title="irc://irc.mozilla.org/webapi">#webapi</a></li> +</ul> + +<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">相關主題</h2> + +<ul> + <li>The <a href="/en-US/docs/Document_Object_Model_(DOM)" title="Document Object Model (DOM)">Document Object Model (DOM)</a> is the representation of an HTML document as a tree.</li> + <li><a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a> - Scripting language for the Web.</li> + <li><a href="/en-US/docs/WebAPI/Doc_status" title="WebAPI/Doc_status">Doc status</a>: A list of WebAPI topics and their documentation status.</li> +</ul> +</div> +</div> + +<p> </p> diff --git a/files/zh-tw/conflicting/web/api/websockets_api/index.html b/files/zh-tw/conflicting/web/api/websockets_api/index.html new file mode 100644 index 0000000000..8ba3337205 --- /dev/null +++ b/files/zh-tw/conflicting/web/api/websockets_api/index.html @@ -0,0 +1,26 @@ +--- +title: WebSockets 參考 +slug: WebSockets/WebSockets_reference +tags: + - WebSockets +translation_of: Web/API/WebSockets_API +translation_of_original: Web/API/WebSockets_API/WebSockets_reference +--- +<p>{{ draft() }}</p> +<p>下述文章是 WebSocket API 各介面的說明文件，本頁面為暫時的佔位文件。</p> +<dl> + <dt> + <a href="/zh_tw/WebSockets/WebSockets_reference/WebSocket" title="zh tw/WebSockets/WebSockets reference/WebSocket"><code>WebSocket</code></a></dt> + <dd> + 與 WebSocket 伺服器連接，傳送、接收資料的主介面。.</dd> + <dt> + <a href="/zh_tw/WebSockets/WebSockets_reference/CloseEvent" title="zh tw/WebSockets/WebSockets reference/CloseEvent"><code>CloseEvent</code></a></dt> + <dd> + 當連線關閉時 WebSocket 物件送出的事件。</dd> + <dt> + <a href="/zh_tw/WebSockets/WebSockets_reference/MessageEvent" title="zh tw/WebSockets/WebSockets reference/MessageEvent"><code>MessageEvent</code></a></dt> + <dd> + 當伺服器傳來資料時 WebSocket 物送送出的事件。</dd> +</dl> +<p> </p> +<p>{{ languages ( {"en": "en/WebSockets/WebSockets_reference"} ) }}</p> diff --git a/files/zh-tw/conflicting/web/api/windoworworkerglobalscope/index.html b/files/zh-tw/conflicting/web/api/windoworworkerglobalscope/index.html new file mode 100644 index 0000000000..6cf618070e --- /dev/null +++ b/files/zh-tw/conflicting/web/api/windoworworkerglobalscope/index.html @@ -0,0 +1,114 @@ +--- +title: WindowBase64 +slug: Web/API/WindowBase64 +translation_of: Web/API/WindowOrWorkerGlobalScope +translation_of_original: Web/API/WindowBase64 +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p>The <code><strong>WindowBase64</strong></code> helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in <a href="/en-US/docs/data_URIs">data URIs</a>.</p> + +<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}} for workers, implements it.</p> + +<h2 id="屬性">屬性</h2> + +<p><em>This helper neither defines nor inherits any properties.</em></p> + +<h2 id="方法">方法</h2> + +<p><em>This helper does not inherit any methods.</em></p> + +<dl> + <dt>{{domxref("WindowBase64.atob()")}}</dt> + <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> + <dt>{{domxref("WindowBase64.btoa()")}}</dt> + <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> +</dl> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop(1)}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>10.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoMobile(1)}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>atob()</code> is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.</p> + +<h2 id="參見">參見</h2> + +<ul> + <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li> + <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> +</ul> diff --git a/files/zh-tw/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html b/files/zh-tw/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html new file mode 100644 index 0000000000..c38c15b821 --- /dev/null +++ b/files/zh-tw/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html @@ -0,0 +1,115 @@ +--- +title: WindowTimers +slug: Web/API/WindowTimers +translation_of: Web/API/WindowOrWorkerGlobalScope +translation_of_original: Web/API/WindowTimers +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><code><strong>WindowTimers</strong></code> is a mixin used to provide utility methods which set and clear timers. No objects of this type exist; instead, its methods are available on {{domxref("Window")}} for the standard browsing scope, or on {{domxref("WorkerGlobalScope")}} for workers.</p> + +<h2 id="屬性">屬性</h2> + +<p><em>WindowTimers 介面沒有繼承也沒有定義任何屬性。</em></p> + +<h2 id="方法">方法</h2> + +<p><em>除以下自身方法外，WindowTimers 介面提沒有任何繼承方法。</em></p> + +<dl> + <dt>{{domxref("WindowTimers.clearInterval()")}}</dt> + <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd> + <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt> + <dd>Cancels the delayed execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd> + <dt>{{domxref("WindowTimers.setInterval()")}}</dt> + <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd> + <dt>{{domxref("WindowTimers.setTimeout()")}}</dt> + <dd>Schedules a function to execute in a given amount of time.</dd> +</dl> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop(1)}}</td> + <td>1.0</td> + <td>4.0</td> + <td>4.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoMobile(1)}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> +</ul> diff --git a/files/zh-tw/conflicting/web/css/@viewport/index.html b/files/zh-tw/conflicting/web/css/@viewport/index.html new file mode 100644 index 0000000000..78d80ee35b --- /dev/null +++ b/files/zh-tw/conflicting/web/css/@viewport/index.html @@ -0,0 +1,121 @@ +--- +title: height +slug: Web/CSS/@viewport/height +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/height +--- +<div>{{CSSRef}}</div> + +<h2 id="概要">概要</h2> + +<p><font face="Consolas, Liberation Mono, Courier, monospace"><strong>高度 </strong></font>的 CSS 描述符是用於設定兩者的簡易描述符 {{cssxref("@viewport/min-height", "min-height")}} 與 {{cssxref("@viewport/max-height", "max-height")}} 的可視區域(viewport)。提供一個可視區域的長度值，將設定兩者的最小高度與最大高度的值。</p> + +<p>如果提供了兩個可視區域(viewport)，第一個值將設定為最小高度，而第二個值將設定為最大高度。</p> + +<h2 id="語法">語法</h2> + +<pre class="brush: css">/* One value */ +height: auto; +height: 320px; +height: 15em; + +/* Two values */ +height: 320px 200px; +</pre> + +<h3 id="值">值</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>使用 CSS 描述符來進行值的計算。</dd> + <dt><code><length></code></dt> + <dd>非負絕對值或相對長度。</dd> + <dt><code><percentage></code></dt> + <dd>初始可視區域的相對寬度或相對高度百分比的縮放係數為 1.0，且必須是非負數。</dd> +</dl> + +<h3 id="正式語法">正式語法</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="舉例">舉例</h2> + +<pre class="brush: css">@viewport { + height: 500px; +}</pre> + +<h2 id="格式">格式</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器兼容性">瀏覽器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>29 (behind a flag)</td> + <td>{{CompatNo}}</td> + <td>10 {{property_prefix("-ms")}}</td> + <td>11.10<br> + Removed in 15<br> + Reintroduced behind a flag in 16</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.4</td> + <td>29</td> + <td>{{CompatNo}}</td> + <td>10{{property_prefix("-ms")}}</td> + <td>11.10<br> + Removed in 15<br> + Reintroduced behind a flag in 16</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/zh-tw/conflicting/web/guide/index.html b/files/zh-tw/conflicting/web/guide/index.html new file mode 100644 index 0000000000..2644dd50c6 --- /dev/null +++ b/files/zh-tw/conflicting/web/guide/index.html @@ -0,0 +1,5 @@ +--- +title: Web development +slug: Web_development +--- +This page was auto-generated because a user created a sub-page to this page. diff --git a/files/zh-tw/conflicting/web/guide_6b4b72e1fc91461bde34734ce07b1c08/index.html b/files/zh-tw/conflicting/web/guide_6b4b72e1fc91461bde34734ce07b1c08/index.html new file mode 100644 index 0000000000..45d12b6e0f --- /dev/null +++ b/files/zh-tw/conflicting/web/guide_6b4b72e1fc91461bde34734ce07b1c08/index.html @@ -0,0 +1,16 @@ +--- +title: Web 開發 +slug: Web_開發 +translation_of: Web/Guide +translation_of_original: Web_Development +--- +<p><strong>Web 開發</strong>包括開發 Web 網站或 Web 應用程式的各方面。</p> +<p>學習如何建立從簡單到複雜、互動性高的 Web 網站，閱讀此處的文章，採用最新 Web 技術。</p> +<div> +<table class="mainpage-table"> <tbody> <tr> <td colspan="2"> <h2 id="文件主題">文件主題</h2> </td> </tr> <tr> <td> <dl> <dt><a class="internal" href="/zh_tw/Web_%E9%96%8B%E7%99%BC/Web%E9%96%8B%E7%99%BC%E5%85%A5%E9%96%80" title="zh tw/Web 開發/Web開發入門">Web 開發入門</a></dt> <dd>如何開發 Web 的學習指南。</dd> <dt><a class="internal" href="/zh_tw/HTML" rel="internal" title="zh tw/HTML">HTML</a></dt> <dd>超文字標記語言是建立 Web 頁面和顯示在瀏覽器中的各種文件的基礎語言。</dd> <dt><a class="internal" href="/zh_tw/JavaScript" rel="internal" title="zh tw/JavaScript">JavaScript</a></dt> <dd>JavaScript 是開發 Web 應用程式中最常使用的 Script 語言。也可用於開發以 Mozilla 為基礎的軟體。</dd> <dt><a class="internal" href="/zh_tw/CSS" rel="internal" title="zh tw/CSS">CSS</a></dt> <dd>層疊樣式表使你能在 Web 上安排布局和頁面設計。</dd> <dt><a class="internal" href="/zh_tw/AJAX" rel="internal" title="zh tw/AJAX">AJAX</a></dt> <dd>非同步 JavaScript 和 XML 不是一項技術，而是各種技術的結合。使用 JavaScript 配合各種現代 Web 技術，建立動態 Web 應用程式。</dd> </dl> </td> <td> <dl> <dt><a class="internal" href="/zh_tw/Web_%E6%A8%99%E6%BA%96" title="zh tw/Web 標準">Web 標準</a></dt> <dd>學習如何藉由開放式 Web 和相容性，使你的 Web 網站或應用程式延伸至最大數量的使用者。</dd> <dt><a class="internal" href="/zh_tw/DOM" rel="internal" title="zh tw/DOM">DOM</a></dt> <dd>文件物件模型是用於 HTML 和 XML 的 API，提供文件的結構化表達方式，以改變文件的呈現。</dd> <dt><a class="internal" href="/zh_tw/XHTML" title="zh tw/XHTML">XHTML</a></dt> <dd>可擴展超文字標記語言是一種以 XML 為基礎、類似 HTML 的語言，提供比 HTML 還嚴格的語法。</dd> <dt><a class="internal" href="/zh_tw/SVG" rel="internal" title="zh tw/SVG">SVG</a></dt> <dd>可縮放向量圖形是一種 XML 標記語言，用於描述 2D 向量圖形。</dd> <dt><a class="internal" href="/zh_tw/Mozilla_Web_%E9%96%8B%E7%99%BC%E8%80%85_FAQ" title="zh tw/Mozilla Web 開發者 FAQ">Mozilla Web 開發者 FAQ</a></dt> <dd>來自 Web 開發者的問答集。附有解答！</dd> </dl> <p><span class="alllinks"><a class="internal" href="/Special:Tags?tag=Web_%E9%96%8B%E7%99%BC&language=zh_tw" title="Special:Tags?tag=Web 開發&language=zh tw">檢視全部...</a></span></p> </td> </tr> <tr> <td> <h2 id="社群">社群</h2> <ul> <li>檢視 Mozilla 討論區... <ul> <li><a class=" link-https" href="https://lists.mozilla.org/listinfo/dev-web-development" rel="external nofollow" title="https://lists.mozilla.org/listinfo/dev-web-development">郵件列表</a></li> <li><a class=" link-news" href="news://news.mozilla.org/mozilla.dev.web-development" rel="external nofollow" title="news://news.mozilla.org/mozilla.dev.web-development">新聞群組</a></li> <li><a class=" external" href="http://groups.google.com/group/mozilla.dev.web-development" rel="external nofollow" title="http://groups.google.com/group/mozilla.dev.web-development"> Google 群組</a></li> <li><a class=" external" href="http://groups.google.com/group/mozilla.dev.web-development/feeds" rel="external nofollow" title="http://groups.google.com/group/mozilla.dev.web-development/feeds">消息來源</a></li> </ul> </li> <li><a class="external" href="/web-tech" title="https://developer.mozilla.org/editor/fckeditor/core/editor/web-tech/">Mozilla Web-tech blog</a></li> <li><a class="external" href="http://www.whatwg.org/" rel="external nofollow" title="http://www.whatwg.org/">WHAT Working Group</a></li> <li><a class="external" href="http://webdevfeedhouse.com/" rel="external nofollow" title="http://webdevfeedhouse.com/">WebDev FeedHouse</a></li> </ul> </td> <td> <h2 id="工具">工具</h2> <ul> <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug 擴充套件</a></li> <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer 擴充套件</a></li> <li><a href="../../../../en/Venkman" rel="internal">Venkman</a>，JavaScript 除錯器</li> <li><a href="../../../../en/DOM_Inspector" rel="internal">DOM Inspector</a> <p><span class="alllinks"><a class="internal" href="/Special:Tags?tag=Web_%E9%96%8B%E7%99%BC:Tools&language=zh_tw" title="Special:Tags?tag=Web 開發:Tools&language=zh tw">檢視全部...</a></span></p> </li> </ul> </td> </tr> </tbody> +</table> +</div> +<p><span class="comment">Categories</span></p> +<p><span class="comment">Interwiki Language Links</span></p> +<p> </p> +<p>{{ languages( { "en": "en/Web_Development", "de": "de/Webentwicklung", "es": "es/Desarrollo_Web", "fr": "fr/D\u00e9veloppement_Web", "it": "it/Sviluppo_Web", "ja": "ja/Web_Development", "pl": "pl/Programowanie_WWW","zh-cn": "cn/Web_Development" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/http/cors/index.html b/files/zh-tw/conflicting/web/http/cors/index.html new file mode 100644 index 0000000000..29ba4ef791 --- /dev/null +++ b/files/zh-tw/conflicting/web/http/cors/index.html @@ -0,0 +1,213 @@ +--- +title: 伺服器端存取控制（CORS） +slug: Web/HTTP/Server-Side_Access_Control +translation_of: Web/HTTP/CORS +translation_of_original: Web/HTTP/Server-Side_Access_Control +--- +<p>存取控制系統是執行<a href="http://searchsoftwarequality.techtarget.com/definition/authorization">授權</a>識別、<a href="http://searchsecurity.techtarget.com/definition/authentication">認證</a>、存取核可的實體，也負責透過登入來進行驗證，包含<a href="http://searchsecurity.techtarget.com/definition/password">密碼</a>、個人身份識別碼（personal identification numbers，PINs）、<a href="http://searchsecurity.techtarget.com/definition/biometrics">生物辨識</a>掃描，以及物理或電子的金鑰。</p> + +<p>存取控制是用於規範計算環境之資源可供哪些人或單位觀看、使用的一種安全技術。</p> + +<p>{{HTTPSidebar}}</p> + +<p>瀏覽器透過 {{domxref("XMLHttpRequest")}} 或 <a href="/zh-TW/docs/Web/API/Fetch_API">Fetch API</a> 所發起的跨網域請求（cross-site request），會在寄送時使用特定的 <a href="/zh-TW/docs/Web/HTTP/Headers">HTTP 標頭</a>。同樣的，由伺服器回傳的跨網域回應（cross-site response）中也能看到特定的 HTTP 標頭。關於這些特定標頭的簡介，包括使用 JavaScript 發起請求與處理來自伺服器回應的範例以及每一個標頭的討論，<a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS">可以在 HTTP 存取控制（CORS）一文中找到</a>，並應該搭配本文一起閱讀。這篇文章包含使用 PHP 處理<strong>存取控制請求</strong>與建立<strong>存取控制回應</strong>。本文的目標讀者為伺服器端程式設計師或管理員。僅管本篇範例使用的是 PHP，但類似的概念也適用於 ASP.net、Perl、Python、Java 等等其他語言；一般來說，這些概念也能套用在任何處理 HTTP 請求及動態建立 HTTP 回應的伺服器端程式環境中。</p> + +<h2 id="HTTP_標頭討論">HTTP 標頭討論</h2> + +<p>討論到<a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS">同時涵蓋客戶端及伺服器端使用的 HTTP 標頭的文章在此</a>，建議先閱讀該篇文章。</p> + +<h2 id="可執行的程式碼範例">可執行的程式碼範例</h2> + +<p>隨後章節的 PHP 程式碼片段（以及 JavaScript 呼叫伺服器）可以在<a class="external" href="http://arunranga.com/examples/access-control/">這裡</a>取得。這些程式在實作了跨網域 {{domxref("XMLHttpRequest")}} 的瀏覽器中都可以運作。</p> + +<h2 id="簡單跨網域請求">簡單跨網域請求</h2> + +<p><a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#簡單請求">簡單存取控制請求</a>會在以下情況下被建立發起：</p> + +<ul> + <li>一個 HTTP/1.1 {{HTTPMethod("GET")}} 或 {{HTTPMethod("POST")}} 方法送出之請求。若為 POST，則該請求之 {{HTTPHeader("Content-Type")}} 標頭值須為 <code>application/x-www-form-urlencoded</code>、<code>multipart/form-data</code> 或 <code>text/plain</code> 其中之一。</li> + <li>HTTP 請求中沒有使用自定義的標頭（如 <code>X-Modified</code> 等等）。</li> +</ul> + +<p>在此情況下，回傳回應需要考慮以下條件：</p> + +<ul> + <li>如果該資源是允許被任何人存取的（就像所有透過 GET 方法存取的 HTTP 資源），則只要回傳帶有 {{HTTPHeader("Access-Control-Allow-Origin")}}<code>: *</code> 標頭值的回應即可。<strong>除非</strong>資源需要身分驗證（credentials），如 <a href="/zh-TW/docs/Web/HTTP/Cookies">Cookies</a> 與 HTTP 認證（Authentication）資訊。</li> + <li>如果資源應該要限制請求者的網域（domain），<strong>或是</strong>假如資源需要身分驗證（credentials）來進行存取（或是要設定驗證）。則篩選請求的 {{HTTPHeader("Origin")}} 標頭就可能是必要的，或至少呼應請求者的 <code>Origin</code> 標頭值（例如 {{HTTPHeader("Access-Control-Allow-Origin")}}<code>: <a class="external" href="http://arunranga.com" rel="freelink">http://arunranga.com</a></code>）。另外，將會發送 {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> 標頭，在<a class="internal" href="#身分憑證請求">下面的章節</a>會進行討論。</li> +</ul> + +<p>在 HTTP 存取控制（CORS）一文的<a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#簡單請求">簡單存取控制請求</a>章節示範了客戶端與伺服器端之間標頭的交流。下面是一個處理簡單請求的 PHP 程式碼片段：</p> + +<pre class="brush: php"><?php + +// 我們僅授權讓 arunranga.com 網域來存取資源 +// 因為我們認為該網域存取本 application/xml 資源是安全的 + +if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") { + header('Access-Control-Allow-Origin: http://arunranga.com'); + header('Content-type: application/xml'); + readfile('arunerDotNetResource.xml'); +} else { + header('Content-Type: text/html'); + echo "<html>"; + echo "<head>"; + echo " <title>Another Resource</title>"; + echo "</head>"; + echo "<body>", + "<p>This resource behaves two-fold:"; + echo "<ul>", + "<li>If accessed from <code>http://arunranga.com</code> it returns an XML document</li>"; + echo "<li>If accessed from any other origin including from simply typing in the URL into the browser's address bar,"; + echo "you get this HTML document</li>", + "</ul>", + "</body>", + "</html>"; +} +?> +</pre> + +<p>以上的程式會檢查由瀏覽器所送出之請求的 {{HTTPHeader("Origin")}} 標頭（透過取得 $_SERVER['HTTP_ORIGIN']）是否為「<a class="external" href="http://arunranga.com" rel="freelink">http://arunranga.com</a>」。若相符，則回傳之回應中加入 {{HTTPHeader("Access-Control-Allow-Origin")}}<code>: <a class="external" href="http://arunranga.com" rel="freelink">http://arunranga.com</a></code> 標頭值。這個範例可以在<a class="external" href="http://arunranga.com/examples/access-control/">這裡看到執行的情形</a>。</p> + +<h2 id="預檢請求">預檢請求</h2> + +<p><a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#Preflighted_requests">預檢存取控制請求</a>在以下情況下發起：</p> + +<ul> + <li>使用一個 {{HTTPMethod("GET")}} 或 {{HTTPMethod("POST")}} 以外的 HTTP 方法。或是在使用 {{HTTPMethod("POST")}} 方法的情況下，其 {{HTTPHeader("Content-Type")}} 標頭值為 <code>application/x-www-form-urlencoded</code>、<code>multipart/form-data</code> 或 <code>text/plain</code> <strong>以外</strong>的值。例如，假設使用 <code>POST</code> 方法並包含之 <code>Content-Type</code> 標頭值為 <code>application/xml</code>，則此請求便為預檢（preflighted）請求。</li> + <li>一個帶有自定義 HTTP 標頭（如 <code>X-PINGARUNER</code>）的請求。</li> +</ul> + +<p>在 HTTP 存取控制（CORS）一文的<a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#預檢請求">預檢存取控制請求</a>章節示範了客戶端與伺服器端之間標頭的交流。一個伺服器資源要回應預檢（preflighted）請求必須能夠進行以下的判斷：</p> + +<ul> + <li>基於 {{HTTPHeader("Origin")}} 的篩選，如果有的話。</li> + <li>回應一個 {{HTTPMethod("OPTIONS")}} 請求（即預檢（preflighted）請求），包含寄送必要的 {{HTTPHeader("Access-Control-Allow-Methods")}}、{{HTTPHeader("Access-Control-Allow-Headers")}} 標頭值（假如有任何應用程式運作所需要的額外標頭），以及若是此資源要求身分驗證，則需要包含 {{HTTPHeader("Access-Control-Allow-Credentials")}} 標頭。</li> + <li>回應實際（actual）請求，包含處理 <code>POST</code> 請求的資料等等。</li> +</ul> + +<p>下面是一個使用 PHP 實作之處理<a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#預檢請求">預檢請求</a>的範例：</p> + +<pre class="brush: php"><?php + +if($_SERVER['REQUEST_METHOD'] == "GET") { + + header('Content-Type: text/plain'); + echo "This HTTP resource is designed to handle POSTed XML input"; + echo "from arunranga.com and not be retrieved with GET"; + +} elseif($_SERVER['REQUEST_METHOD'] == "OPTIONS") { + // 告訴客戶端我們支援來自 arunranga.com 的呼叫 + // 以及這個預檢請求的有效期限僅有 20 天 + + if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") { + header('Access-Control-Allow-Origin: http://arunranga.com'); + header('Access-Control-Allow-Methods: POST, GET, OPTIONS'); + header('Access-Control-Allow-Headers: X-PINGARUNER'); + header('Access-Control-Max-Age: 1728000'); + header("Content-Length: 0"); + header("Content-Type: text/plain"); + //exit(0); + } else { + header("HTTP/1.1 403 Access Forbidden"); + header("Content-Type: text/plain"); + echo "You cannot repeat this request"; + } + +} elseif($_SERVER['REQUEST_METHOD'] == "POST") { + // 處理 POST 請求，第一步為取得 POST 請求中 blob 型態的 XML + // 並且對其做一些處理，再傳送結果給客戶端 + + if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") { + $postData = file_get_contents('php://input'); + $document = simplexml_load_string($postData); + + // 對 POST 請求的資料做一些處理 + + $ping = $_SERVER['HTTP_X_PINGARUNER']; + + header('Access-Control-Allow-Origin: http://arunranga.com'); + header('Content-Type: text/plain'); + echo // 在處理之後要回傳的一些回應字串 + } else { + die("POSTing Only Allowed from arunranga.com"); + } +} else { + die("No Other Methods Allowed"); +} +?> +</pre> + +<p>注意範例中在回應 {{HTTPMethod("OPTIONS")}} 預檢（preflighted）請求與回應 {{HTTPMethod("POST")}} 請求時都會回傳相對應的 HTTP 標頭值，因此一個伺服器資源可以處理預檢以及實際（actual）請求。在回應 <code>OPTIONS</code> 預檢請求之回應標頭中，伺服器告知客戶端可以使用 <code>POST</code> 方法發送實際（actual）請求，並且能於實際（actual）請求的 HTTP 標頭欄位中帶上 <code>X-PINGARUNER</code> 及其值。這個範例可以在<a class="external" href="http://arunranga.com/examples/access-control/">這裡看到執行的情形</a>。</p> + +<h2 id="身分驗證請求">身分驗證請求</h2> + +<p><a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#附帶身分憑證的請求">身分驗證存取控制請求</a>——即請求可以附帶 <a href="/zh-TW/docs/Web/HTTP/Cookies">Cookies</a> 或 HTTP 認證（Authentication）訊息（並期望回應攜帶 Cookies）——可以是<a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#簡單請求">簡單</a>或<a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#預檢">預檢請求</a>，根據請求使用之 HTTP 方法而定。</p> + +<p>於<a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#簡單請求">簡單請求</a>情境中，請求將會連同 Cookies 一起發送（例如當 <code><a href="/zh-TW/docs/Web/API/XMLHttpRequest/withCredentials">withCredentials</a></code> 旗標被設置於 {{domxref("XMLHttpRequest")}} 時）。假如伺服器以附帶了 {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> 標頭值的身分驗證回應來回傳，則回應會被客戶端接受並且可被用於網頁內容中。在<a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#預檢請求">預檢請求</a>中，伺服器可以用 <code>Access-Control-Allow-Credentials: true</code> 標頭來回應 <code>OPTIONS</code> 預檢請求。</p> + +<p>以下為一些處理身分驗證請求的 PHP 程式片段：</p> + +<pre class="brush: php"><?php + +if($_SERVER['REQUEST_METHOD'] == "GET") { + header('Access-Control-Allow-Origin: http://arunranga.com'); + header('Access-Control-Allow-Credentials: true'); + header('Cache-Control: no-cache'); + header('Pragma: no-cache'); + header('Content-Type: text/plain'); + + // 檢查有沒有 Cookie，若沒有則當作是第一次訪問 + if (!isset($_COOKIE["pageAccess"])) { + setcookie("pageAccess", 1, time()+2592000); + echo 'I do not know you or anyone like you so I am going to'; + echo 'mark you with a Cookie :-)'; + } else { + $accesses = $_COOKIE['pageAccess']; + setcookie('pageAccess', ++$accesses, time()+2592000); + echo 'Hello -- I know you or something a lot like you!'; + echo 'You have been to ', $_SERVER['SERVER_NAME'], '; + echo 'at least ', $accesses-1, ' time(s) before!'; + } +} elseif($_SERVER['REQUEST_METHOD'] == "OPTIONS") { + // 告訴客戶端這個預檢請求的有效期限僅有 20 天 + if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") { + header('Access-Control-Allow-Origin: http://arunranga.com'); + header('Access-Control-Allow-Methods: GET, OPTIONS'); + header('Access-Control-Allow-Credentials: true'); + header('Access-Control-Max-Age: 1728000'); + header("Content-Length: 0"); + header("Content-Type: text/plain"); + } else { + header("HTTP/1.1 403 Access Forbidden"); + header("Content-Type: text/plain"); + echo "You cannot repeat this request"; + } +} else { + die("This HTTP Resource can ONLY be accessed with GET or OPTIONS"); +} +?> +</pre> + +<p>注意此範例中的身分驗證請求，其中的 <code>Access-Control-Allow-Origin:</code> 標頭值<strong>不得</strong>是萬用字元（wildcard）「*」。此標頭值<strong>必須</strong>為一個有效的的來源網域（origin domain）。以上的範例可以在<a class="external" href="http://arunranga.com/examples/access-control/">這裡看到執行的情形</a>。</p> + +<h2 id="Apache_範例">Apache 範例</h2> + +<h3 id="限制存取某些_URI">限制存取某些 URI</h3> + +<p>一個實用的訣竅是使用 Apache rewrite 環境變數（environment variable），並且讓 HTTP 標頭套用 <code>Access-Control-Allow-*</code> 至某些 URI。這相當有用，例如要限制跨來源（cross-origin）請求 <code>GET /api(.*).json</code> 為不帶身分驗證的請求：</p> + +<pre>RewriteRule ^/api(.*)\.json$ /api$1.json [CORS=True] +Header set Access-Control-Allow-Origin "*" env=CORS +Header set Access-Control-Allow-Methods "GET" env=CORS +Header set Access-Control-Allow-Credentials "false" env=CORS +</pre> + +<h2 id="參見">參見</h2> + +<ul> + <li><a class="external" href="http://arunranga.com/examples/access-control/">Examples of Access Control in Action</a></li> + <li><a href="https://github.com/jackblackevo/cors-jsonp-sample">Client-Side & Server-Side (Java) sample for Cross-Origin Resource Sharing (CORS)</a></li> + <li><a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP Access Control covering the HTTP headers</a></li> + <li>{{domxref("XMLHttpRequest")}}</li> + <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li> +</ul> diff --git a/files/zh-tw/conflicting/web/javascript/guide/control_flow_and_error_handling/index.html b/files/zh-tw/conflicting/web/javascript/guide/control_flow_and_error_handling/index.html new file mode 100644 index 0000000000..24484bb5b3 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/control_flow_and_error_handling/index.html @@ -0,0 +1,34 @@ +--- +title: 區塊語法 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/區塊語法 +translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Block_Statement +--- +<h3 id="區塊語法" name="區塊語法">區塊語法</h3> +<p>區塊語法用於把語句群組化。區塊的範圍是由一對大括號所界定︰</p> +<pre class="eval">{ + statement_1 + statement_2 + . + . + . + statement_n +} +</pre> +<p><strong>範例</strong><br> 區塊語法通常和流程控制語法（例如 <code>if</code>、<code>for</code>、<code>while</code>）一併使用。</p> +<pre class="eval">while (x < 10) { + x++; +} +</pre> +<p>此處，<code>{ x++; }</code> 就是區塊語法。</p> +<p><strong>重要</strong>: JavaScript <strong>並沒有</strong> 區塊作用域。區塊裡的變數其作用域相當於函數或 Script，對變數的設定會一直持續到區塊本身之外。換言之，區塊語法並沒有作用域。儘管“單獨”的區塊仍是有效的句法，你也不會想要在 JavaScript 中使用單獨的區塊，因為這樣做並不會產生任何你所期待的機能，譬如說如果你期待類似 C 或 Java 而這樣做的話。例如︰</p> +<pre class="eval">var x = 1; +{ + var x = 2; +} +alert(x); // 輸出 2 +</pre> +<p>這樣會輸出 2，因為在區塊之內的 <code>var x</code> 語法，其作用域如同沒有區塊的 <code>var x</code> 語法。而在 C 或 Java 中，同樣的代碼將會輸出 1。</p> +<div class="noinclude"> <p>{{ PreviousNext("Core_JavaScript_1.5_教學:正規表達式的運用:正規表達式的範例", "Core_JavaScript_1.5_教學:條件語法") }}</p> +</div> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Block_Statement", "fr": "fr/Guide_JavaScript_1.5/D\u00e9claration_de_blocs", "ja": "ja/Core_JavaScript_1.5_Guide/Block_Statement", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Blok_instrukcji" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/control_flow_and_error_handling_2691b613803afee4bca87dca2a41b5c5/index.html b/files/zh-tw/conflicting/web/javascript/guide/control_flow_and_error_handling_2691b613803afee4bca87dca2a41b5c5/index.html new file mode 100644 index 0000000000..c9f263afe1 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/control_flow_and_error_handling_2691b613803afee4bca87dca2a41b5c5/index.html @@ -0,0 +1,104 @@ +--- +title: 條件語法 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/條件語法 +translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Conditional_Statements +--- +<h3 id="條件語法" name="條件語法">條件語法</h3> +<p>條件語法是在當指定的條件為 true 時，就執行一整組指令。JavaScript 支援兩種條件語法︰<code>if...else</code> 和 <code>switch</code>。</p> +<h4 id="if...else_語法" name="if...else_語法">if...else 語法</h4> +<p>如果邏輯條件為 true 時，就執行 <code>if</code> 語法裡的語句。如果條件為 false 的話，可以使用選用性的 <code>else</code> 子句來執行語句。<code>if</code> 語法如下︰</p> +<pre class="eval">if (condition) + statement_1 +[else + statement_2] +</pre> +<p><code>condition</code> 可以是任何可求值為 true 或 false 的表達式。如果 <code>condition</code> 的求值為 true，就會執行 <code>statement_1</code>，否則執行 <code>statement_2</code>。<code>statement_1</code> 和 <code>statement_2</code> 可以是任何的語句，包括嵌套的 <code>if</code> 語法。</p> +<p>你也可以使用 <code>else if</code> 來組合語句，並依序測試各個條件，如下︰</p> +<pre class="eval">if (condition) + statement_1 +[else if (condition_2) + statement_2] +... +[else if (condition_n_1) + statement_n_1] +[else + statement_n] +</pre> +<p>要執行多個語句，就使用區塊語法（<code>{ ... }</code>）把語句群組化。一般來說，固定使用區塊語法是非常好的作法，尤其是當代碼內部還有嵌套的 <code>if</code> 語法時︰</p> +<pre class="eval">if (condition) { + statements_1 +} else { + statements_2 +} +</pre> +<p>不要在條件表達式裡使用簡單的代入動作會比較明智，因為在快速瀏覽代碼時，代入和相等很容易彼此混淆。例如，不要使用如下代碼︰</p> +<pre class="eval">if (x = y) { + /* 做一些事 */ +} +</pre> +<p>如果你需要在條件表達式中使用代入的話，常見的作法是在代入語句加上額外的括弧。例如︰</p> +<pre class="eval">if ((x = y)) { + /* 做一些事 */ +} +</pre> +<p>不要把 Boolean 物件的 true、false 值和原始的布林值 <code>true</code>、<code>false</code> 相混淆。任何值只要不是 <code>undefined</code>、<code>null</code>、<code>0</code>、<code>NaN</code>、空字串 (<code>""</code>)、物件，即使是含有 false 值的 Boolean 物件，傳給條件語法的求值結果也會是 true。例如︰</p> +<pre class="eval">var b = new Boolean(false); +if (b) // 這個條件的求值結果為 true +</pre> +<p><strong>範例</strong><br> +在以下的範例中，如果在 <code>Text</code> 物件裡的字元數目為 3，函數 <code>checkData</code> 就返回 true。否則，他會顯示警報並返回 false。</p> +<pre class="eval">function checkData() { + if (document.form1.threeChar.value.length == 3) { + return true; + } else { + alert("Enter exactly three characters. " + + document.form1.threeChar.value + " is not valid."); + return false; + } +} +</pre><h4 id="switch_語法" name="switch_語法">switch 語法</h4> +<p><code>switch</code> 語法可讓程式對表達式求值，並試著以表達式的值來一一比對 case 標籤。如果發現比對符合，程式就會執行與之關聯的語句。<code>switch</code> 語法如下︰</p> +<pre class="eval">switch (expression) { + case label_1: + statements_1 + [break;] + case label_2: + statements_2 + [break;] + ... + default: + statements_def + [break;] +} +</pre> +<p>程式首先從附有標籤的 <code>case</code> 子句找出能夠符合表達式的值的標籤，然後把控制權轉移到那個子句，並執行與之相關的語句。如果找不到相符的標籤，程式就會尋找選用性的 <code>default</code> 子句，如果找到的話，就把控制權轉移到那個子句，並執行與之相關的語句。如果找不到 <code>default</code> 子句，程式就會繼續執行 <code>switch</code> 語法後面的語句。根據慣例，<code>default</code> 語句一定是最後一個子句，但是並非只能這樣使用。</p> +<p>可用在每一個 <code>case</code> 子句的選用性 <code>break</code> 語法，可確實從 <code>switch</code> 裡已執行完且後面還有其他語句的符合語句中跳出。如果省略 <code>break</code>，程式就會繼續執行 <code>switch</code> 語法裡的下一個語法。</p> +<p><strong>範例</strong><br> +在以下範例中，如果 <code>fruittype</code> 求值為 "Bananas"，程式就會比對出 case "Bananas" 的值，並執行相聯的語句。如果遇到 <code>break</code>，程式就會終止 <code>switch</code> 並執行 <code>switch</code> 後面的語句。如果省略了 <code>break</code>，case "Cherries" 裡的語句也會被執行。</p> +<pre>switch (fruittype) { + case "Oranges": + document.write("Oranges are $0.59 a pound.<br>"); + break; + case "Apples": + document.write("Apples are $0.32 a pound.<br>"); + break; + case "Bananas": + document.write("Bananas are $0.48 a pound.<br>"); + break; + case "Cherries": + document.write("Cherries are $3.00 a pound.<br>"); + break; + case "Mangoes": + case "Papayas": + document.write("Mangoes and papayas are $2.79 a pound.<br>"); + break; + default: + document.write("Sorry, we are out of " + fruittype + ".<br>"); +} +document.write("Is there anything else you'd like?<br>"); +</pre> +<div class="noinclude"> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:區塊語法", "Core_JavaScript_1.5_教學:循環語法") }}</p> +</div> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Conditional_Statements", "fr": "fr/Guide_JavaScript_1.5/Instructions_conditionnelles", "ja": "ja/Core_JavaScript_1.5_Guide/Conditional_Statements", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Instrukcje_warunkowe" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/control_flow_and_error_handling_74154e098f4b1e7026df3945ceb0fa4a/index.html b/files/zh-tw/conflicting/web/javascript/guide/control_flow_and_error_handling_74154e098f4b1e7026df3945ceb0fa4a/index.html new file mode 100644 index 0000000000..1e922b72f2 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/control_flow_and_error_handling_74154e098f4b1e7026df3945ceb0fa4a/index.html @@ -0,0 +1,21 @@ +--- +title: 註解 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/註解 +translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Comments +--- +<h3 id="註解" name="註解">註解</h3> +<p>註解是作者用來解釋 Script 在做什麼的標記符號。註解會被解譯器忽略。JavaScript 支援 Java 和 C++ 形式的註解︰</p> +<ul> <li>單行註解是在前面加上兩個斜線 (//)。</li> <li>多行註解是在前面加上 /* 並在尾端加上 */。</li> +</ul> +<p><strong>範例</strong><br> +以下範例示範這兩種註解︰</p> +<pre>// 這是單行註解。 + +/* 這是多行註解。不管是什麼長度都可以，你也 +可以在任何你喜歡的地方使用。 */ +</pre> +<div class="noinclude"> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:物件的操作語法", "Core_JavaScript_1.5_教學:例外處理語法") }}</p> +</div> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Comments", "es": "es/Gu\u00eda_JavaScript_1.5/Sentencias_para_comentarios", "fr": "fr/Guide_JavaScript_1.5/Commentaires", "ja": "ja/Core_JavaScript_1.5_Guide/Comments", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Instrukcje_komentarzy" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/control_flow_and_error_handling_a2d11ceeaeb3cb8c43292be7771f9b23/index.html b/files/zh-tw/conflicting/web/javascript/guide/control_flow_and_error_handling_a2d11ceeaeb3cb8c43292be7771f9b23/index.html new file mode 100644 index 0000000000..af67cbfa03 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/control_flow_and_error_handling_a2d11ceeaeb3cb8c43292be7771f9b23/index.html @@ -0,0 +1,16 @@ +--- +title: 循環語法 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/循環語法 +translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Loop_Statements +--- +<h3 id="循環語法" name="循環語法">循環語法</h3> +<p>循環（或稱迴圈）是一組反覆執行的指令，直到滿足指定的條件為止。JavaScript 支援 for、do while、while 循環語法，除了 label 以外（label 本身不是循環語法，但經常和循環語法一起使用）。此外，你也可以在循環語法內部使用 <code>break</code> 和 <code>continue</code> 語法。</p> +<p>還有另一種語法 <code>for...in</code> 反覆執行語句，但是只用於物件的操作。參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E7%89%A9%E4%BB%B6%E7%9A%84%E6%93%8D%E4%BD%9C%E8%AA%9E%E6%B3%95" title="zh tw/Core JavaScript 1.5 教學/物件的操作語法">物件的操作語法</a>。</p> +<p>循環語法如下︰</p> +<ul> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%BE%AA%E7%92%B0%E8%AA%9E%E6%B3%95/for_%E8%AA%9E%E6%B3%95" title="zh_tw/Core_JavaScript_1.5_教學/Loop_語法/for_Statement">for 語法</a></li> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%BE%AA%E7%92%B0%E8%AA%9E%E6%B3%95/do...while_%E8%AA%9E%E6%B3%95" title="zh_tw/Core_JavaScript_1.5_教學/Loop_語法/do...while_Statement">do...while 語法</a></li> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%BE%AA%E7%92%B0%E8%AA%9E%E6%B3%95/while_%E8%AA%9E%E6%B3%95" title="zh_tw/Core_JavaScript_1.5_教學/Loop_語法/while_Statement">while 語法</a></li> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%BE%AA%E7%92%B0%E8%AA%9E%E6%B3%95/label_%E8%AA%9E%E6%B3%95" title="zh_tw/Core_JavaScript_1.5_教學/Loop_語法/label_Statement">label 語法</a></li> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%BE%AA%E7%92%B0%E8%AA%9E%E6%B3%95/break_%E8%AA%9E%E6%B3%95" title="zh_tw/Core_JavaScript_1.5_教學/Loop_語法/break_Statement">break 語法</a></li> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%BE%AA%E7%92%B0%E8%AA%9E%E6%B3%95/continue_%E8%AA%9E%E6%B3%95" title="zh_tw/Core_JavaScript_1.5_教學/Loop_語法/continue_Statement">continue 語法</a></li> +</ul> +<div class="noinclude"> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:條件語法", "Core_JavaScript_1.5_教學:循環語法:for_語法") }}</p> +</div> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Loop_Statements", "es": "es/Gu\u00eda_JavaScript_1.5/Sentencias_de_bucle", "fr": "fr/Guide_JavaScript_1.5/Boucles", "ja": "ja/Core_JavaScript_1.5_Guide/Loop_Statements", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Instrukcje_p\u0119tli" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/details_of_the_object_model/index.html b/files/zh-tw/conflicting/web/javascript/guide/details_of_the_object_model/index.html new file mode 100644 index 0000000000..45678e3bdb --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/details_of_the_object_model/index.html @@ -0,0 +1,28 @@ +--- +title: 以類別為基礎的語言 vs. 以原型為基礎的語言 +slug: >- + Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/以類別為基礎的語言_vs._以原型為基礎的語言 +translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Class-Based_vs._Prototype-Based_Languages +--- +<h3 id="以類別為基礎的語言_vs._以原型為基礎的語言" name="以類別為基礎的語言_vs._以原型為基礎的語言">以類別為基礎的語言 vs. 以原型為基礎的語言</h3> +<p>以類別為基礎的語言，如 Java 和 C++，是以兩種不同實體的概念為根基︰類別（Class）和實體（Instance）。</p> +<ul> <li>類別定義了所有的屬性（就 Java 的方法和欄位以及 C++ 的成員而論），刻劃出明確的物件集合。類別是抽象的事物，而不是任何他所刻劃的物件集合的實際成員。例如，Employee 類別可以代表所有職員的集合。</li> <li>實體從另一個角度來看就是類別的實際例證；也就是類別成員的其中一者。例如，Victoria 可以是 Employee 類別的實體，代表作為職員的獨特個體。實體恰好有親類別的屬性（且不多也不少）。</li> +</ul> +<p>以原型為基礎的語言，如 JavaScript，並沒有這些分別︰他簡單到只有物件。以原型為基礎的語言具有原型物件的概念。物件被當作模板來使用，從中取得最初的屬性以提供給新物件。不論是在你建立物件或執行時期的時候，任何物件都可以指定他自己的屬性。此外，任何物件都可以作為其他物件的原型而連繫起來，讓第二個物件共用第一個物件的屬性。</p> +<h4 id="類別的定義" name="類別的定義">類別的定義</h4> +<p>在以類別為基礎的語言中，你會在獨立的類別定義中定義類別。在這些定義中，你可以指定稱為建構子的特殊方法，用來建立類別的實體。建構子方法可以為實體的屬性指定初始值，並進行在建立時期的其他適當處理。你會使用 new 運算子配合建構子方法來建立類別的實體。</p> +<p>JavaScript 遵從類似的模型，但是建構子和其他類別的定義並沒有分別。取而代之，你會定義建構子函數來建立帶有特定初始值的一組屬性和值的物件。任何的 JavaScript 函數都可以用作建構子。你會使用 new 運算子配合建構子函數來建立新的物件。</p> +<h4 id="子類別和繼承" name="子類別和繼承">子類別和繼承</h4> +<p>在以類別為基礎的語言中，你會建立出類別定義整體的類別階層。在類別的定義中，你可以把新的類別指定為另一個既存類別的子類別。這個子類別會繼承親類別所有的屬性，也可以另外加入新的屬性或修改繼承下來的。例如，假定 Employee 類別只含有 name 和 dept 屬性，而 Manager 是 Employee 的子類別，且加入了 reports 屬性。在這個情況下，Manager 類別的實體將具有全部的三個屬性︰name、dept、reports。</p> +<p>JavaScript 可讓你把任意的建構子函數和原型物件連結在一起，以此實現繼承。因此，你可以準確的建立出 Employee 和 Manager 的範例，但是你會使用有點不一樣的術語。首先，你會定義 Employee 的建構子函數，指定 name 和 dept 屬性。接著，你會定義 Manager 的建構子函數，指定 reports 屬性。最後，你會把新的 Employee 物件作為原型代入給 Manager 的建構子函數。然後，當你建立新的 Manager 的時候，他就會從 Employee 物件繼承 name 和 dept 屬性。</p> +<h4 id="屬性的加入和移除" name="屬性的加入和移除">屬性的加入和移除</h4> +<p>在以類別為基礎的語言中，你通常會在編譯時期建立類別，然後你會在編譯時期或執行時期實體化類別的實體。在你定義了類別以後，你就不能改變類別的屬性的類型或數目。然而在JavaScript 中，你可以在執行時期加入或移除任何物件的屬性。如果你把屬性加入到用作為一整群物件的原型的物件裡，使用同一個原型的物件也會得到新的屬性。</p> +<h4 id="不同點的摘要" name="不同點的摘要">不同點的摘要</h4> +<p>下表給出了這些不同點的簡短摘要。本章的剩餘部分描述了使用 JavaScript 的建構子和原型來建立物件的階層，並和 Java 的做法來做比較。</p> +<table class="fullwidth-table"> <tbody> <tr> <th>以類別為基礎 (Java)</th> <th>以原型為基礎 (JavaScript)</th> </tr> <tr> <td>類別和實體這兩者有分別。</td> <td>所有的物件都是實體。</td> </tr> <tr> <td>使用類別定義來定義類別；使用建構子方法來把類別實體化。</td> <td>使用建構子函數來定義並建立一整群物件。</td> </tr> <tr> <td>使用 <code>new</code> 運算子來建立單一的物件。</td> <td>相同。</td> </tr> <tr> <td>使用類別定義來建構物件的階層，用以定義既存類別的子類。</td> <td>藉由代入，把作為原型的物件和建構子函數連結起來，來建構出物件的階層。</td> </tr> <tr> <td>藉由遵從類別鏈來繼承屬性。</td> <td>藉由遵從原型鏈來繼承屬性。</td> </tr> <tr> <td>類別定義指定了類別的所有實體的所有屬性。不能在執行時期動態的加入屬性。</td> <td>建構子函數或原型指定並初始化了一系列屬性。可以給單獨的物件或一整組物件來動態的加入或移除屬性。</td> </tr> </tbody> +</table> +<div class="noinclude"> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:迭代器和產生器", "Core_JavaScript_1.5_教學:職員的例子") }}</p> +</div> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages", "es": "es/Gu\u00eda_JavaScript_1.5/Lenguajes_basados_en_clases_frente_a_basados_en_prototipos", "fr": "fr/Guide_JavaScript_1.5/Langages_bas\u00e9s_sur_les_classes_et_langages_bas\u00e9s_sur_les_prototypes", "ja": "ja/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/J\u0119zyki_oparte_na_klasach_vs._oparte_na_prototypach", "zh-cn": "cn/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/details_of_the_object_model_3193ca1e5a7bdb78e9d9418a947916aa/index.html b/files/zh-tw/conflicting/web/javascript/guide/details_of_the_object_model_3193ca1e5a7bdb78e9d9418a947916aa/index.html new file mode 100644 index 0000000000..451fa3036e --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/details_of_the_object_model_3193ca1e5a7bdb78e9d9418a947916aa/index.html @@ -0,0 +1,46 @@ +--- +title: 實體關係的確定 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/再談屬性的繼承/實體關係的確定 +translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model +translation_of_original: >- + Web/JavaScript/Guide/Obsolete_Pages/Property_Inheritance_Revisited/Determining_Instance_Relationships +--- +<h3 id="實體關係的確定" name="實體關係的確定">實體關係的確定</h3> +<p>Javascript 搜尋屬性時，會先從物件內部所擁有的屬性開始，如果找不到屬性的名稱，就會從特殊的物件屬性 <code>__proto__</code> 內部搜尋。不斷反覆執行；這個過程就稱為〝在原型鏈中搜尋〞。</p> +<p>當物件建構完成時，就會設定這個特殊的屬性 <code>__proto__</code>；他會被設成建構子的 <code>prototype</code> 屬性的值。因此，表達式 <code>new Foo()</code> 會以 <code>__proto__ == <code class="moz-txt-verticalline">Foo.prototype</code></code> 來建立物件。因此，變更 <code class="moz-txt-verticalline">Foo.prototype</code> 的屬性，就會改變所有由 <code>new Foo()</code> 所建立的物件的屬性的搜尋。</p> +<p>每一個物件都有 <code>__proto__</code> 物件屬性（除了 <code>Object</code> 以外）；每一個函數都有 <code>prototype</code> 物件屬性。所以物件可藉由“原型的繼承”與其他物件建立起關係。你可以藉由物件的 <code>__proto__</code> 與函數的 <code>prototype</code> 物件的比較來對繼承進行測試。JavaScript 也提供了便捷方式︰<code>instanceof</code> 運算子會對照函數以檢測物件，如果這個物件繼承自函數的原型，就返回 true。例如，</p> +<pre>var f = new Foo(); +var isTrue = (f instanceof Foo);</pre> +<p>舉個更詳細的例子，假設你有顯示在 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E8%81%B7%E5%93%A1%E7%9A%84%E4%BE%8B%E5%AD%90/%E7%89%A9%E4%BB%B6%E7%9A%84%E5%B1%AC%E6%80%A7/%E5%B1%AC%E6%80%A7%E7%9A%84%E7%B9%BC%E6%89%BF" title="zh tw/Core JavaScript 1.5 教學/職員的例子/物件的屬性/屬性的繼承">屬性的繼承</a> 中的同一組定義。並建立 <code>Engineer</code> 物件如下︰</p> +<pre>chris = new Engineer("Pigman, Chris", ["jsd"], "fiji"); +</pre> +<p>對於這個物件，以下語句全部為 true︰</p> +<pre>chris.__proto__ == Engineer.prototype; +chris.__proto__.__proto__ == WorkerBee.prototype; +chris.__proto__.__proto__.__proto__ == Employee.prototype; +chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype; +chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null; +</pre> +<p>有鑑於此，你可以編寫 <code>instanceOf</code> 函數如下︰</p> +<pre>function instanceOf(object, constructor) { + while (object != null) { + if (object == constructor.prototype) + return true; + object = object.__proto__; + } + return false; +} +</pre> +<p>根據這個定義，以下語句全部為 true︰</p> +<pre>instanceOf (chris, Engineer) +instanceOf (chris, WorkerBee) +instanceOf (chris, Employee) +instanceOf (chris, Object) +</pre> +<p>但下面的表達式是 false︰</p> +<pre>instanceOf (chris, SalesPerson) +</pre> +<div class="noinclude"> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:再談屬性的繼承:局域值和繼承值", "Core_JavaScript_1.5_教學:再談屬性的繼承:建構子中的全域資訊") }}</p> +</div> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited/Determining_Instance_Relationships", "es": "es/Gu\u00eda_JavaScript_1.5/M\u00e1s_sobre_la_herencia_de_propiedades/Determinando_relaciones_de_instancia", "ja": "ja/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited/Determining_Instance_Relationships", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Powr\u00f3t_dziedziczenia_w\u0142asno\u015bci/Okre\u015blanie_wzajemnych_relacji_obiektu" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/details_of_the_object_model_483bbc3a620ead7b721647d1a2cb216f/index.html b/files/zh-tw/conflicting/web/javascript/guide/details_of_the_object_model_483bbc3a620ead7b721647d1a2cb216f/index.html new file mode 100644 index 0000000000..e042494b71 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/details_of_the_object_model_483bbc3a620ead7b721647d1a2cb216f/index.html @@ -0,0 +1,57 @@ +--- +title: 局域值和繼承值 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/再談屬性的繼承/局域值和繼承值 +translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model +translation_of_original: >- + Web/JavaScript/Guide/Obsolete_Pages/Property_Inheritance_Revisited/Local_versus_Inherited_Values +--- +<h3 id="局域值和繼承值" name="局域值和繼承值">局域值和繼承值</h3> +<p>當你存取物件屬性的時候，JavaScript 會進行這些步驟，如同本章前面所提到過的︰</p> +<ol> <li>檢查局域值是否存在。如果存在，就返回局域值。</li> <li>如果局域值不存在，就檢查原型鏈（使用 <code>__proto__</code> 屬性）。</li> <li>如果在原型鏈上的物件具有所求的指定屬性，就返回這個屬性的值。</li> <li>如果找不到這樣的屬性，這個物件就不具有這個屬性。</li> +</ol> +<p>這些步驟之後的結果，取決於你如何循著這個方式來定義。一開始的例子有這些定義︰</p> +<pre>function Employee () { +this.name = ""; +this.dept = "general"; +} + +function WorkerBee () { +this.projects = []; +} +WorkerBee.prototype = new Employee; +</pre> +<p>藉由這些定義，假定你以如下語句建立 <code>amy</code> 作為 <code>WorkerBee</code> 的實體︰</p> +<pre>amy = new WorkerBee; +</pre> +<p><code>amy</code> 物件具有一個局域的屬性，<code>projects</code>。<code>name</code> 和 <code>dept</code> 屬性的值並不是 <code>amy</code> 的局域值，所以是從 <code>amy</code> 物件的 <code>__proto__</code> 屬性得來的。因此，<code>amy</code> 具有這些屬性值︰</p> +<pre>amy.name == ""; +amy.dept == "general"; +amy.projects == []; +</pre> +<p>現在假定你在與 <code>Employee</code> 連結的原型改變 <code>name</code> 屬性的值︰</p> +<pre>Employee.prototype.name = "Unknown" +</pre> +<p>乍看之下，你可能會預期新的值會被向下傳播給 <code>Employee</code> 所有的實體。然而，事情並不如此。</p> +<p>當你建立 <code>Employee</code> 物件的<em>任何</em>實體，這些實體會取得 <code>name</code> 屬性的局域值（空字串的那個）。這意味著當你使用新建立的 <code>Employee</code> 物件來設定 <code>WorkerBee</code> 原型的時候，<code>WorkerBee.prototype</code> 就具有 <code>name</code> 屬性的局域值。因此，當 JavaScript 找到 <code>amy</code> 物件（<code>WorkerBee</code> 的實體）的 <code>name</code> 屬性的時候，JavaScript 在 <code>WorkerBee.prototype</code> 找到了這些屬性的局域值。也因此並不會進一步在鏈的上一層 <code>Employee.prototype</code> 裡尋找。</p> +<p>如果你想要在執行時期改變物件屬性的值，而且希望新的值能被這個物件的所有子孫所繼承，你就不能在物件的建構子函數中定義這個屬性。相對的，你要把這個屬性加入到與建構子相連結的原型。例如，假定你修改前面的代碼如下︰</p> +<pre>function Employee () { + this.dept = "general"; +} +Employee.prototype.name = ""; + +function WorkerBee () { +this.projects = []; +} +WorkerBee.prototype = new Employee; + +amy = new WorkerBee; + +Employee.prototype.name = "Unknown"; +</pre> +<p>在這個情況下，<code>amy</code> 的 <code>name</code> 屬性就會變成 "Unknown"。</p> +<p>如同這些範例所示，如果你希望物件的屬性有預設值，而且還希望能夠在執行時期修改這些預設值，你就應該在建構子的原型中設定這些屬性，而不是在建構子函數本身。</p> +<div class="noinclude"> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:再談屬性的繼承", "Core_JavaScript_1.5_教學:再談屬性的繼承:實體關係的確定") }}</p> +</div> + +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited/Local_versus_Inherited_Values", "es": "es/Gu\u00eda_JavaScript_1.5/M\u00e1s_sobre_la_herencia_de_propiedades/Valores_locales_frente_a_los_heredados", "ja": "ja/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited/Local_versus_Inherited_Values", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Powr\u00f3t_dziedziczenia_w\u0142asno\u015bci/Warto\u015bci_lokalne_vs._dziedziczone" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/details_of_the_object_model_60d6c39d4282c67c117db9fdaf83be08/index.html b/files/zh-tw/conflicting/web/javascript/guide/details_of_the_object_model_60d6c39d4282c67c117db9fdaf83be08/index.html new file mode 100644 index 0000000000..b787de8dd0 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/details_of_the_object_model_60d6c39d4282c67c117db9fdaf83be08/index.html @@ -0,0 +1,42 @@ +--- +title: 沒有多重繼承 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/再談屬性的繼承/沒有多重繼承 +translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model +translation_of_original: >- + Web/JavaScript/Guide/Obsolete_Pages/Property_Inheritance_Revisited/No_Multiple_Inheritance +--- +<h3 id="沒有多重繼承" name="沒有多重繼承">沒有多重繼承</h3> +<p>部分物件導向語言允許多重繼承。也就是說，物件可以從互不相關的親物件繼承屬性和值。不過 JavaScript 並不支援多重繼承。</p> +<p>屬性值的繼承發生在執行時期，由 JavaScript 搜尋物件的原型鏈以找出繼承值。由於物件只有單一的已連結原型，因此 JavaScript 並不能從多於一個以上的原型鏈中動態的繼承。</p> +<p>在 JavaScript 中，建構子函數的內部可以有很多個其他的建構子函數的呼叫。如此可提供多重繼承的假象。例如，思考下面的語句︰</p> +<pre>function Hobbyist (hobby) { + this.hobby = hobby || "scuba"; +} + +function Engineer (name, projs, mach, hobby) { + this.base1 = WorkerBee; + this.base1(name, "engineering", projs); + this.base2 = Hobbyist; + this.base2(hobby); + this.machine = mach || ""; +} +Engineer.prototype = new WorkerBee; + +dennis = new Engineer("Doe, Dennis", ["collabra"], "hugo") +</pre> +<p>接著假定 <code>WorkerBee</code> 的定義使用的是本章先前的內容。在這個情況下，<code>dennis</code> 物件就有了這些屬性︰</p> +<pre>dennis.name == "Doe, Dennis" +dennis.dept == "engineering" +dennis.projects == ["collabra"] +dennis.machine == "hugo" +dennis.hobby == "scuba" +</pre> +<p>所以 <code>dennis</code> 從 <code>Hobbyist</code> 建構子中得到了 <code>hobby</code> 的屬性。然而，假定你稍後把新的屬性加入到 <code>Hobbyist</code> 建構子的原型︰</p> +<pre>Hobbyist.prototype.equipment = ["mask", "fins", "regulator", "bcd"] +</pre> +<p><code>dennis</code> 物件並未繼承到這個新的屬性。</p> +<div class="noinclude"> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:再談屬性的繼承:建構子中的全域資訊", "Core_JavaScript_1.5_教學:LiveConnect_概要") }}</p> +</div> + +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited/No_Multiple_Inheritance", "es": "es/Gu\u00eda_JavaScript_1.5/M\u00e1s_sobre_la_herencia_de_propiedades/Herencia_no_m\u00faltiple", "ja": "ja/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited/No_Multiple_Inheritance", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Powr\u00f3t_dziedziczenia_w\u0142asno\u015bci/Brak_wielokrotnego_dziedziczenia" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/details_of_the_object_model_8898a6dd437cc51f48b4e8cade0385ac/index.html b/files/zh-tw/conflicting/web/javascript/guide/details_of_the_object_model_8898a6dd437cc51f48b4e8cade0385ac/index.html new file mode 100644 index 0000000000..cece6b5a66 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/details_of_the_object_model_8898a6dd437cc51f48b4e8cade0385ac/index.html @@ -0,0 +1,58 @@ +--- +title: 建構子中的全域資訊 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/再談屬性的繼承/建構子中的全域資訊 +translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model +translation_of_original: >- + Web/JavaScript/Guide/Obsolete_Pages/Property_Inheritance_Revisited/Global_Information_in_Constructors +--- +<h3 id="建構子中的全域資訊" name="建構子中的全域資訊">建構子中的全域資訊</h3> +<p>當你建立建構子的時候，如果你在建構子中設定全域資訊，需要很小心。例如，假定你想要自動的給每一個新的職員指定一個專有的 ID。你可以給 <code>Employee</code> 使用下面的定義︰</p> +<pre>var idCounter = 1; + +function Employee (name, dept) { + this.name = name || ""; + this.dept = dept || "general"; + this.id = idCounter++; +} +</pre> +<p>根據這個定義，當你建立新的 <code>Employee</code> 的時候，建構子會依序把下一個 ID 指定給他，然後增加全域 ID 的計數器。因此，如果你的下一條語句如下，<code>victoria.id</code> 為 1，且 <code>harry.id</code> 為 2︰</p> +<pre>victoria = new Employee("Pigbert, Victoria", "pubs") +harry = new Employee("Tschopik, Harry", "sales") +</pre> +<p>乍看之下很好。然而，<code>idCounter</code> 會在每一次建立 <code>Employee</code> 物件的時候遞增，而不問用途。如果你建立顯示在本章中的整個 <code>Employee</code> 階層結構，<code>Employee</code> 建構子會在你每一次設定原型的時候被呼叫。假設你有下面的代碼︰</p> +<pre>var idCounter = 1; + +function Employee (name, dept) { + this.name = name || ""; + this.dept = dept || "general"; + this.id = idCounter++; +} + +function Manager (name, dept, reports) {...} +Manager.prototype = new Employee; + +function WorkerBee (name, dept, projs) {...} +WorkerBee.prototype = new Employee; + +function Engineer (name, projs, mach) {...} +Engineer.prototype = new WorkerBee; + +function SalesPerson (name, projs, quota) {...} +SalesPerson.prototype = new WorkerBee; + +mac = new Engineer("Wood, Mac"); +</pre> +<p>在此略過 <code>base</code> 屬性的定義，並呼叫原型鏈中在他們之上的建構子。在這個情況下，等到 <code>mac</code> 物件被建立的時候，<code>mac.id</code> 是 5。</p> +<p>根據應用程式而定，計數器遞增了額外的次數，這也許重要，也許不重要。如果你很在意計數器額外的數值，有一個可能的解決方案是改用下面的建構子來代替︰</p> +<pre>function Employee (name, dept) { + this.name = name || ""; + this.dept = dept || "general"; + if (name) + this.id = idCounter++; +} +</pre> +<p>當你建立用作為原型的 <code>Employee</code> 實體時候，你並不需要提供參數給建構子。使用這個定義的建構子，當你並未提供參數時，建構子並不會把值代入給 id，也不會更新計數器。因此，若要 <code>Employee</code> 取得指定的 id，你就必須為職員指定名稱。在這個範例中，<code>mac.id</code> 將會是 1。</p> +<div class="noinclude"> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:再談屬性的繼承:實體關係的確定", "Core_JavaScript_1.5_教學:再談屬性的繼承:沒有多重繼承") }}</p> +</div> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited/Global_Information_in_Constructors", "es": "es/Gu\u00eda_JavaScript_1.5/M\u00e1s_sobre_la_herencia_de_propiedades/Informaci\u00f3n_global_en_los_constructores", "ja": "ja/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited/Global_Information_in_Constructors", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Powr\u00f3t_dziedziczenia_w\u0142asno\u015bci/Globalne_informacje_w_konstruktorach" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/details_of_the_object_model_937645e235e25783cc4e9b0d7a1f6d76/index.html b/files/zh-tw/conflicting/web/javascript/guide/details_of_the_object_model_937645e235e25783cc4e9b0d7a1f6d76/index.html new file mode 100644 index 0000000000..3bba16f786 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/details_of_the_object_model_937645e235e25783cc4e9b0d7a1f6d76/index.html @@ -0,0 +1,14 @@ +--- +title: 再談屬性的繼承 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/再談屬性的繼承 +translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Property_Inheritance_Revisited +--- +<h3 id="再談屬性的繼承" name="再談屬性的繼承">再談屬性的繼承</h3> +<p>前面的章節說明了 JavaScript 建構子和原型如何提供階層組織和實體。本節將會討論一些稍早的討論中所看不到的細微差別。</p> +<ul> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%86%8D%E8%AB%87%E5%B1%AC%E6%80%A7%E7%9A%84%E7%B9%BC%E6%89%BF/%E5%B1%80%E5%9F%9F%E5%80%BC%E5%92%8C%E7%B9%BC%E6%89%BF%E5%80%BC" title="zh_tw/Core_JavaScript_1.5_教學/再談屬性的繼承/局域值和繼承值">局域值和繼承值</a></li> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%86%8D%E8%AB%87%E5%B1%AC%E6%80%A7%E7%9A%84%E7%B9%BC%E6%89%BF/%E5%AF%A6%E9%AB%94%E9%97%9C%E4%BF%82%E7%9A%84%E7%A2%BA%E5%AE%9A" title="zh_tw/Core_JavaScript_1.5_教學/再談屬性的繼承/實體關係的確定">實體關係的確定</a></li> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%86%8D%E8%AB%87%E5%B1%AC%E6%80%A7%E7%9A%84%E7%B9%BC%E6%89%BF/%E5%BB%BA%E6%A7%8B%E5%AD%90%E4%B8%AD%E7%9A%84%E5%85%A8%E5%9F%9F%E8%B3%87%E8%A8%8A" title="zh_tw/Core_JavaScript_1.5_教學/再談屬性的繼承/建構子中的全域資訊">建構子中的全域資訊</a></li> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%86%8D%E8%AB%87%E5%B1%AC%E6%80%A7%E7%9A%84%E7%B9%BC%E6%89%BF/%E6%B2%92%E6%9C%89%E5%A4%9A%E9%87%8D%E7%B9%BC%E6%89%BF" title="zh tw/Core JavaScript 1.5 教學/再談屬性的繼承/沒有多重繼承">沒有多重繼承</a></li> +</ul> +<div class="noinclude"> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:職員的例子:更靈活的建構子", "Core_JavaScript_1.5_教學:再談屬性的繼承:局域值和繼承值") }}</p> +</div> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited", "es": "es/Gu\u00eda_JavaScript_1.5/M\u00e1s_sobre_la_herencia_de_propiedades", "ja": "ja/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Powr\u00f3t_dziedziczenia_w\u0142asno\u015bci" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/details_of_the_object_model_b021bd32308e4c421518cdd7104ac7bc/index.html b/files/zh-tw/conflicting/web/javascript/guide/details_of_the_object_model_b021bd32308e4c421518cdd7104ac7bc/index.html new file mode 100644 index 0000000000..5f071f0b00 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/details_of_the_object_model_b021bd32308e4c421518cdd7104ac7bc/index.html @@ -0,0 +1,145 @@ +--- +title: 更靈活的建構子 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/職員的例子/更靈活的建構子 +translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model +translation_of_original: >- + Web/JavaScript/Guide/Obsolete_Pages/The_Employee_Example/More_Flexible_Constructors +--- +<h3 id="更靈活的建構子" name="更靈活的建構子">更靈活的建構子</h3> +<p>目前為止所介紹的建構子函數並不能讓你在建立實體的時候指定屬性值。如同 Java 一般，你可以提供參數給建構子來為實體初始化屬性值。下圖顯示了做到這點的其中一個方式。</p> +<p><img alt="Image:hier05.gif" class="internal" src="/@api/deki/files/712/=Hier05.gif"><br> +<small><strong>圖 8.5: 在建構子中指定屬性，之一</strong></small></p> +<p>下表顯示出 Java 和 JavaScript 對這些物件的定義。</p> +<table class="fullwidth-table"> <tbody> <tr> <th>JavaScript</th> <th>Java</th> </tr> <tr> <td> <pre> +function Employee (name, dept) { + this.name = name || ""; + this.dept = dept || "general"; +} +</pre> </td> <td> <pre> +public class Employee { + public String name; + public String dept; + public Employee () { + this("", "general"); + } + public Employee (String name) { + this(name, "general"); + } + public Employee (String name, String dept) { + this.name = name; + this.dept = dept; + } +} +</pre> </td> </tr> <tr> <td> <pre> +function WorkerBee (projs) { + this.projects = projs || []; +} +WorkerBee.prototype = new Employee; +</pre> </td> <td> <pre> +import java.util.List; +import java.util.ArrayList; + +public class WorkerBee extends Employee { + public List<String> projects; + public WorkerBee () { + this(new ArrayList<String>()); + } + public WorkerBee (List<String> projs) { + projects = projs; + } +} + +</pre> </td> </tr> <tr> <td> <pre> + +function Engineer (mach) { + this.dept = "engineering"; + this.machine = mach || ""; +} +Engineer.prototype = new WorkerBee; +</pre> </td> <td> <pre> +public class Engineer extends WorkerBee { + public String machine; + public Engineer () { + dept = "engineering"; + machine = ""; + } + public Engineer (String mach) { + dept = "engineering"; + machine = mach; + } +} +</pre> </td> </tr> </tbody> +</table> +<p><br> +JavaScript 的這些定義使用了特殊的用語來設定預設值︰</p> +<pre>this.name = name || ""; +</pre> +<p>JavaScript 的邏輯 OR 運算子 (||) 會對他的第一參數求值。如果參數轉換為 true，運算子就返回這個參數。否則，運算子返回第二個參數的值。因此，這一行測試代碼可以看成，如果 <code>name</code> 具有對 <code>name</code> 屬性而言有用的值。如果是的話，他就把 <code>this.name</code> 設定成這個值。否則，他就把 <code>this.name</code> 設定成空字串。為簡單起見，本章使用這個用語；然而，第一眼看到這種用法的時候會使人迷惑不解<span style="font-style: italic;">。</span><em>請注意</em>︰這個用法在數字或布林參數中，可能不會如預期般運作，例如 <code>0</code>（零）和 <code>false</code> 會導致預設值被選取；在這種情況下，你將會需要使用下面更為冗長的用語，他會使所有的資料類型都發生預期般的行為︰</p> +<pre>this.authorized = typeof(authorized) !== 'undefined' ? authorized : true; +</pre> +<p>當你使用這個定義來建立物件的實體的時候，你可以為在局域中定義的屬性來指定值。如同圖 8.5 所示，你可以使用如下語句來建立新的 Engineer︰</p> +<pre>jane = new Engineer("belau"); +</pre> +<p> <code>Jane</code> 的屬性現在是︰</p> +<pre>jane.name == ""; +jane.dept == "engineering"; +jane.projects == []; +jane.machine == "belau" +</pre> +<p>注意這些定義，你不能為像 <code>name</code> 這種繼承下來的屬性指定初始值。如果你想要在 JavaScript 中，給繼承下來的屬性指定初始值，你就需要加入更多的代碼到建構子函數中。</p> +<p>截至目前為止，建構子函數建立了通用的物件，然後為新物件指定局域的屬性和值。你的建構子也可以直接呼叫建構子函數，來為原型鏈中較高層的物件加入更多的屬性。下圖顯示了這些定義。</p> +<p><img alt="Image:hier06.gif" class="internal" src="/@api/deki/files/713/=Hier06.gif"><br> +<small><strong>圖 8.6 在建構子中指定屬性，之二</strong></small></p> +<p>讓我們來更仔細的觀察其中一個定義。這是 Engineer 建構子的新定義︰</p> +<pre>function Engineer (name, projs, mach) { + this.base = WorkerBee; + this.base(name, "engineering", projs); + this.machine = mach || ""; +} +</pre> +<p>假設你如下建立新的 <code>Engineer</code> 物件︰</p> +<pre>jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau"); +</pre> +<p>JavaScript 遵循以下步驟︰</p> +<ol> <li>new 運算子建立通用物件，並且把他的 <code>__proto__</code> 屬性設定為 <code>Engineer.prototype</code>。</li> <li>new 運算子把新物件傳遞給 <code>Engineer</code> 建構子當作 <code>this</code> 關鍵字的值。</li> <li>建構子為這個物件建立稱為 <code>base</code> 的新屬性，並且把 <code>WorkerBee</code> 建構子的值代入給 <code>base</code> 屬性。這會使 <code>WorkerBee</code> 建構子成為 <code>Engineer</code> 物件的一個方法。<code>base</code> 屬性的名稱並無特別之處。你可以使用任意的有效的屬性名稱；<code>base</code> 這個名稱只是簡單的為了他的用途而取的。</li> <li>建構子呼叫 <code>base</code> 方法，把傳入給建構子的其中兩個參數（"Doe, Jane" 以及 {{ mediawiki.external('\"navigator\", \"javascript\"') }}）以及字串 "engineering" 當作自己的參數傳入。在建構子中明確的使用 "engineering"，表明了所有 <code>Engineer</code> 物件所繼承下來的 <code>dept</code> 屬性都有相同的值，而且這個值會覆蓋繼承自 <code>Employee</code> 的值。</li> <li>因為 <code>base</code> 是 <code>Engineer</code> 的方法，<code>base</code> 呼叫端的內部是 JavaScript 在步驟 1 時和新建立的物件綁在一起的 <code>this</code> 關鍵字。因此，<code>WorkerBee</code> 函數依序把 "Doe, Jane" 以及 {{ mediawiki.external('\"navigator\", \"javascript\"') }} 參數傳遞給 <code>Employee</code> 建構子函數。從 <code>Employee</code> 建構子函數返回以後，<code>WorkerBee</code> 函數使用剩下的參數來設定 <code>projects</code> 屬性。</li> <li>從 <code>base</code> 方法返回以後，<code>Engineer</code> 建構子把物件的 <code>machine</code> 屬性初始化成 "belau"。</li> <li>從建構子返回以後，JavaScript 就把新物件代入給 <code>jane</code> 變數。</li> +</ol> +<p>你可能在想，要從 <code>Engineer</code> 建構子的內部呼叫 <code> WorkerBee</code> 的建構子，明明你已經為 <code>Engineer</code> 物件設置適當的繼承了。實際情形並非如此。呼叫 <code>WorkerBee</code> 建構子可以確保，與已指定屬性的 <code>Engineer</code> 物件一起開始的所有建構子函數都會被呼叫。然而，如果你稍後把屬性加入到 <code>Employee</code> 或者 <code>WorkerBee</code> 屬性，這些屬性並不會被 <code>Engineer</code> 物件所繼承。例如，假設你使用如下語句︰</p> +<pre>function Engineer (name, projs, mach) { + this.base = WorkerBee; + this.base(name, "engineering", projs); + this.machine = mach || ""; +} +jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau"); +Employee.prototype.specialty = "none"; +</pre> +<p><code>jane</code> 物件並未繼承 <code>specialty</code> 屬性。你仍然需要明確的設置原型，以確保動態繼承。假設你改用這些語句︰</p> +<pre>function Engineer (name, projs, mach) { + this.base = WorkerBee; + this.base(name, "engineering", projs); + this.machine = mach || ""; +} +Engineer.prototype = new WorkerBee; +jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau"); +Employee.prototype.specialty = "none"; +</pre> +<p>現在 <code> jane</code> 物件的 <code>specialty</code> 屬性的值是 "none"。</p> +<hr> +<p>另一種繼承的方式是使用 <code>.call</code>/<code>.apply</code> 方法。以下兩者是等價的︰</p> +<table> <tbody> <tr> <td> <pre class="eval"> +function Engineer (name, projs, mach) { + this.base = WorkerBee; + this.base(name, "engineering", projs); + this.machine = mach || ""; +} +</pre> </td> <td> <pre class="eval"> +function Engineer (name, projs, mach) { + WorkerBee.call(this, name, "engineering", projs); + this.machine = mach || ""; +} +</pre> </td> </tr> </tbody> +</table> +<p>使用 Javascript<span style="font-family: monospace;"> 的 </span><code>.call</code> 方法可以產生較為簡潔的實作，因為不再需要 <code>".base"</code>。</p> +<div class="noinclude"> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:職員的例子:物件的屬性:屬性的加入", "Core_JavaScript_1.5_教學:再談屬性的繼承") }}</p> +</div> +<p>{{ languages( {"en": "en/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors", "es": "es/Gu\u00eda_JavaScript_1.5/El_ejemplo_Employee/Constructores_m\u00e1s_flexibles", "ja": "ja/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Praca_z_przyk\u0142adem/Wi\u0119cej_elastycznych_konstruktor\u00f3w" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/expressions_and_operators/index.html b/files/zh-tw/conflicting/web/javascript/guide/expressions_and_operators/index.html new file mode 100644 index 0000000000..0d694e88f8 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/expressions_and_operators/index.html @@ -0,0 +1,16 @@ +--- +title: 表達式 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/表達式 +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Expressions +--- +<p> </p> +<h3 id="表達式" name="表達式">表達式</h3> +<p><em>表達式</em>即任何有效的一組字面表達、變數、運算子、可求值的單一的值，值可以使用數字、字串、或邏輯值。</p> +<p>大致上來說，表達式可分為兩種︰把值代入給變數，和單純的持有值。例如，表達式 <code>x = 7</code> 是把值 7 代入給 x 的表達式。表達式本身的求值結果是 7。這些表達式使用<em>代入運算子</em>。換句話說，表達式 <code>3 + 4</code> 單純的求值結果為 7，且沒有代入動作。這些表達式使用的運算子又可以簡單的稱為<em>運算子</em>。</p> +<p>JavaScript 有以下幾種表達式︰</p> +<ul> <li>算術式: 求出數值，例如，3.14159。（一般使用 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%81%8B%E7%AE%97%E5%AD%90/%E7%AE%97%E8%A1%93%E9%81%8B%E7%AE%97%E5%AD%90" title="zh tw/Core JavaScript 1.5 教學/運算子/算術運算子">算術運算子</a>。）</li> <li>字串式: 求出字元、字串，例如，"Fred" 或 "234"。（一般使用 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%81%8B%E7%AE%97%E5%AD%90/%E5%AD%97%E4%B8%B2%E9%81%8B%E7%AE%97%E5%AD%90" title="zh tw/Core JavaScript 1.5 教學/運算子/字串運算子">字串運算子</a>。）</li> <li>邏輯式: 求出真值或假值。（通常和 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%81%8B%E7%AE%97%E5%AD%90/%E9%82%8F%E8%BC%AF%E9%81%8B%E7%AE%97%E5%AD%90" title="zh tw/Core JavaScript 1.5 教學/運算子/邏輯運算子">邏輯運算子</a> 有關。）</li> <li>物件式: 求出物件。（參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%81%8B%E7%AE%97%E5%AD%90/%E7%89%B9%E6%AE%8A%E9%81%8B%E7%AE%97%E5%AD%90" title="zh tw/Core JavaScript 1.5 教學/運算子/特殊運算子">特殊運算子</a> 取得有關求出物件的各種例子。）</li> +</ul> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:Unicode", "Core_JavaScript_1.5_教學:運算子") }}</p> + +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Expressions", "fr": "fr/Guide_JavaScript_1.5/Expressions", "ja": "ja/Core_JavaScript_1.5_Guide/Expressions", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Wyra\u017cenia" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/expressions_and_operators_05717c12b1ecaebc9d68cf43524d31b1/index.html b/files/zh-tw/conflicting/web/javascript/guide/expressions_and_operators_05717c12b1ecaebc9d68cf43524d31b1/index.html new file mode 100644 index 0000000000..e00a0e612b --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/expressions_and_operators_05717c12b1ecaebc9d68cf43524d31b1/index.html @@ -0,0 +1,20 @@ +--- +title: 算術運算子 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/運算子/算術運算子 +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Arithmetic_Operators +--- +<p> </p> +<h3 id="算術運算子" name="算術運算子">算術運算子</h3> +<p>算術運算子把數值（字面表達或變數其中一種）作為運算元，並返回 1 個數值。標準的算術運算子有加法 (+)、減法 (-)、乘法 (*)、除法 (/)。這些運算子在大部分的程式語言中，都以原來的方式運作。當使用於浮點數時（須特別注意，除以零會產生 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E5%B1%AC%E6%80%A7/NaN" title="zh tw/Core JavaScript 1.5 參考/全域屬性/NaN"><code>NaN</code></a>）︰</p> +<pre class="eval">1 / 2 // 在 JavaScript 中返回 0.5 +1 / 2 // 在 Java 中返回 0（這兩個數並未明確表示為浮點數） + +1.0 / 2.0 // 在 JavaScript 和 Java 中都返回 0.5 +</pre> +<p>此外，JavaScript 提供了列於下表的算術運算子。</p> +<table class="fullwidth-table"> <tbody> <tr> <th>運算子</th> <th>說明</th> <th>範例</th> </tr> <tr> <td>%（模數）</td> <td>二元運算子。返回兩數相除之後的整數餘數。</td> <td>12 % 5 返回 2。</td> </tr> <tr> <td>++（遞增）</td> <td>一元運算子。運算元加 1。如果用作為前綴運算子 (++x)，返回運算元加 1 之後的值；如果用作為後綴運算子 (x++)，返回運算元加 1 之前的值。</td> <td>如果 <code>x</code> 是 3，然後 <code>++x</code> 把 <code>x</code> 設為 4 並返回 4，反之 <code>x++</code> 返回 3，然後把 <code>x</code> 設為 4。</td> </tr> <tr> <td>--（遞減）</td> <td>一元運算子。運算元減 1。返回的值和遞增運算子類似。</td> <td>如果 <code>x</code> 是 3，然後 <code>--x</code> 把 <code>x</code> 設為 2 並返回 2，反之 <code>x--</code> 返回 3，然後把 <code>x</code> 設為 2。</td> </tr> <tr> <td>-（正負反轉）</td> <td>一元運算子。返回將運算子的正負號反轉的值。</td> <td>如果 <code>x</code> 是 3，然後 <code>-x</code> 返回 -3。</td> </tr> </tbody> +</table> +<p><small><strong>表 3.4: 算術運算子</strong></small></p> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:運算子:比較運算子", "Core_JavaScript_1.5_教學:運算子:位元運算子") }}</p> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators", "es": "es/Gu\u00eda_JavaScript_1.5/Operadores/Operadores_aritm\u00e9ticos", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_arithm\u00e9tiques", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators", "ko": "ko/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operatory_arytmetyczne" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/expressions_and_operators_11969cb29fead65c26360f554426c217/index.html b/files/zh-tw/conflicting/web/javascript/guide/expressions_and_operators_11969cb29fead65c26360f554426c217/index.html new file mode 100644 index 0000000000..6109b2d6e3 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/expressions_and_operators_11969cb29fead65c26360f554426c217/index.html @@ -0,0 +1,31 @@ +--- +title: 位元運算子 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/運算子/位元運算子 +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Bitwise_Operators +--- +<p> </p> +<p> </p> +<h3 id="位元運算子" name="位元運算子">位元運算子</h3> +<p>位元運算子把他們的運算元視為一組 32 位元的集合（零或一），而非十進制、十六進制、八進制。例如，十進制數 9 的二進制表示法為 1001。位元運算子對這些二進制表示法進行運算，並返回標準的 JavaScript 數值。</p> +<p>下表解說 JavaScript 的位元運算子。</p> +<table class="fullwidth-table"> <tbody> <tr> <th>運算子</th> <th>用法</th> <th>說明</th> </tr> <tr> <td>位元 AND</td> <td><code>a & b</code></td> <td>每一個對應至同一位元位置的兩個運算元兩者為 1 時，返回 1。</td> </tr> <tr> <td>位元 OR</td> <td><code>a | b</code></td> <td>每一個對應至同一位元位置的兩個運算元兩者或其中一者為 1 時，返回 1。</td> </tr> <tr> <td>位元 XOR</td> <td><code>a ^ b</code></td> <td>每一個對應至同一位元位置的兩個運算元其中一者而非兩者為 1 時，返回 1。</td> </tr> <tr> <td>位元 NOT</td> <td><code>~ a</code></td> <td>反轉運算元的位元。</td> </tr> <tr> <td>左移</td> <td><code>a << b</code></td> <td>往左移動 a 的二進制表示法 b 位元，從右邊補 0。</td> </tr> <tr> <td>維持符號右移</td> <td><code>a >> b</code></td> <td>往右移動 a 的二進制表示法 b 位元，丟棄移出的位元。</td> </tr> <tr> <td>填 0 右移</td> <td><code>a >>> b</code></td> <td>往右移動 a 的二進制表示法 b 位元，丟棄移出的位元，並從左邊補 0。</td> </tr> </tbody> +</table> +<p><small><strong>表 3.5: 位元運算子</strong></small></p> +<h4 id="位元邏輯運算子" name="位元邏輯運算子">位元邏輯運算子</h4> +<p>大致上，位元邏輯運算子的運作如下︰</p> +<ul> <li>運算元轉換成 32 位元整數，並表示為一系列的位元（0 或 1）。</li> <li>第一個運算元的每一個位元與第二個運算元對應的位元結成配對︰第一個位元對第一個位元、第二個位元對第二個位元，餘類推。</li> <li>運算子套用到每一對位元，運算結果以位元構成。</li> +</ul> +<p>舉個例子，9 的二進制表示法是 1001，15 的二進制表示法是 1111。因此，當位元的運算子套用到這些值上時，結果如下︰</p> +<ul> <li>15 & 9 的結果是 9 (1111 & 1001 = 1001)</li> <li>15 | 9 的結果是 15 (1111 | 1001 = 1111)</li> <li>15 ^ 9 的結果是 6 (1111 ^ 1001 = 0110)</li> +</ul> +<h4 id="位元位移運算子" name="位元位移運算子">位元位移運算子</h4> +<p>位元位移運算子有兩個運算元︰第一個是被移動的數值，第二個指定第一個運算元要移動的位元位置的數目。位移運算元的方向是以使用的運算元來控制。</p> +<p>位移運算子轉換這些運算元為 32 位元整數，並返回與左邊運算元同類型的結果。</p> +<p>位移運算子列於下表。</p> +<table class="fullwidth-table"> <tbody> <tr> <th>運算子</th> <th>說明</th> <th>範例</th> </tr> <tr> <td><<（左移）</td> <td>這個運算子把第一個運算元向左移動指定的位元數。丟棄向左移出的多餘位元。從右邊填補 0 的位元。</td> <td>9<<2 的結果是 36，因為 1001 向左移動 2 位元而變成 100100，此即 36。</td> </tr> <tr> <td>>>（維持符號右移）</td> <td>這個運算子把第一個運算元向右移動指定的位元數。丟棄向右移出的多餘位元。從左邊填補在最左邊複製的位元。</td> <td>9>>2 的結果是 2，因為 1001 向右移動 2 位元而變成 10，此即 2。同樣的，-9>>2 的結果是 -3，因為保留了正負號。</td> </tr> <tr> <td>>>>（填 0 右移）</td> <td>這個運算子把第一個運算元向右移動指定的位元數。丟棄向右移出的多餘位元。從右邊填補 0 的位元。</td> <td>19>>>2 的結果是 4，因為 10011 向右移動 2 位元而變成 100，此即 4。對於非負數而言，補 0 右移和維持符號右移的結果相同。</td> </tr> </tbody> +</table> +<p><small><strong>表 3.6: 位元位移運算子</strong></small></p> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:運算子:算術運算子", "Core_JavaScript_1.5_教學:運算子:邏輯運算子") }}</p> + +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators", "es": "es/Gu\u00eda_JavaScript_1.5/Operadores/Operadores_sobre_bits", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_bit-\u00e0-bit", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators", "ko": "ko/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operatory_bitowe" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/expressions_and_operators_351a6d9e4d31b32eff9762ef5deead93/index.html b/files/zh-tw/conflicting/web/javascript/guide/expressions_and_operators_351a6d9e4d31b32eff9762ef5deead93/index.html new file mode 100644 index 0000000000..7ba467a3cf --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/expressions_and_operators_351a6d9e4d31b32eff9762ef5deead93/index.html @@ -0,0 +1,43 @@ +--- +title: 邏輯運算子 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/運算子/邏輯運算子 +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Logical_Operators +--- +<p> </p> +<h3 id="邏輯運算子" name="邏輯運算子">邏輯運算子</h3> +<p>邏輯運算子通常和布林（邏輯）值一起使用，並返回布林值。然而，&& 和 || 運算子實際上返回的是指定的運算元的其中一個的值，所以如果這些運算子與非布林值一起使用，有可能返回非布林值。邏輯運算子的說明如下表。</p> +<table class="fullwidth-table"> <tbody> <tr> <th>運算子</th> <th>用法</th> <th>說明</th> </tr> <tr> <td>&&</td> <td>expr1 && expr2</td> <td>（邏輯 AND）如果 expr1 可以轉換為 false，就返回 expr1。否則返回 expr2。所以，當使用於布林值時，如果兩個運算元都為 true，&& 返回 true。否則返回 false。</td> </tr> <tr> <td>||</td> <td>expr1 || expr2</td> <td>（邏輯 OR）如果 expr1 可以轉換為 true，就返回 expr1。否則返回 expr2。所以，當使用於布林值時，如果其中一個運算元為 true，|| 返回 true，如果兩個運算元都為 false，就返回 false。</td> </tr> <tr> <td>!</td> <td>!expr</td> <td>（邏輯 NOT）如果運算元可以轉換為 true，就返回 false。否則返回 true。</td> </tr> </tbody> +</table> +<p><small><strong>表 3.7: 邏輯運算子</strong></small></p> +<p>可以轉換成 false 的表達式的例子有︰對 null、0、空字串 ("") 或 undefined 求值。</p> +<p>以下代碼為 &&（邏輯 AND）運算子的範例。</p> +<pre>a1=true && true // t && t 返回 true +a2=true && false // t && f 返回 false +a3=false && true // f && t 返回 false +a4=false && (3 == 4) // f && f 返回 false +a5="Cat" && "Dog" // t && t 返回 Dog +a6=false && "Cat" // f && t 返回 false +a7="Cat" && false // t && f 返回 false +</pre> +<p>以下代碼為 ||（邏輯 OR）運算子的範例。</p> +<pre>o1=true || true // t || t 返回 true +o2=false || true // f || t 返回 true +o3=true || false // t || f 返回 true +o4=false || (3 == 4) // f || f 返回 false +o5="Cat" || "Dog" // t || t 返回 Cat +o6=false || "Cat" // f || t 返回 Cat +o7="Cat" || false // t || f 返回 Cat +</pre> +<p>以下代碼為 !（邏輯 NOT）運算子的範例。</p> +<pre>n1=!true // !t 返回 false +n2=!false // !f 返回 true +n3=!"Cat" // !t 返回 false +</pre> +<h4 id="求值的最短路徑" name="求值的最短路徑">求值的最短路徑</h4> +<p>由於邏輯表達式是由左往右求值，他們使用以下規則來測試，儘可能以“最短路徑”求值︰</p> +<ul> <li><code>false</code> && <em>anything</em> 中的 false 是求值的最短路徑。</li> <li><code>true</code> || <em>anything</em> 中的 true 是求值的最短路徑。</li> +</ul> +<p>這些邏輯規則保證求出的值永遠正確。注意，上述表達式中的 <em>anything</em> 部分並未求值，因此所有未求值的部分都不會產生作用。</p> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:運算子:位元運算子", "Core_JavaScript_1.5_教學:運算子:字串運算子") }}</p> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Logical_Operators", "es": "es/Gu\u00eda_JavaScript_1.5/Operadores/Operadores_l\u00f3gicos", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_logiques", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Logical_Operators", "ko": "ko/Core_JavaScript_1.5_Guide/Operators/Logical_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operatory_logiczne" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/expressions_and_operators_952d66f1fe521bc0574c89750f5b406e/index.html b/files/zh-tw/conflicting/web/javascript/guide/expressions_and_operators_952d66f1fe521bc0574c89750f5b406e/index.html new file mode 100644 index 0000000000..a37ea47e50 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/expressions_and_operators_952d66f1fe521bc0574c89750f5b406e/index.html @@ -0,0 +1,186 @@ +--- +title: 特殊運算子 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/運算子/特殊運算子 +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Special_Operators +--- +<p> </p> +<h3 id="特殊運算子" name="特殊運算子">特殊運算子</h3> +<p>JavaScript 提供下列的特殊運算子︰</p> +<ul> <li>{{ Anch("條件運算子") }}</li> <li>{{ Anch("逗號運算子") }}</li> <li>{{ Anch("delete") }}</li> <li>{{ Anch("in") }}</li> <li>{{ Anch("instanceof") }}</li> <li>{{ Anch("new") }}</li> <li>{{ Anch("this") }}</li> <li>{{ Anch("typeof") }}</li> <li>{{ Anch("void") }}</li> +</ul> +<h4 id="條件運算子" name="條件運算子">條件運算子</h4> +<p>條件運算子是 JavaScript 唯一使用三個運算元的運算子。運算子根據條件得到兩個值的其中一個。語法為︰</p> +<pre>condition ? val1 : val2 +</pre> +<p>如果 <code>condition</code> 為 true，運算子得到 <code>val1</code> 的值。否則得到 <code>val2</code> 的值。你可以在條件運算子上使用標準運算子。</p> +<p>例如，</p> +<pre>status = (age >= 18) ? "adult" : "minor" +</pre> +<p>這個語句把“adult”的值代入給變數 <code>status</code>，只要 <code>age</code> 是 18 以上。否則，把“minor”的值代入給 <code>status</code>。</p> +<h4 id="逗號運算子" name="逗號運算子">逗號運算子</h4> +<p>逗號運算子 (,) 簡單的對他的兩個運算元求值，並返回第二個運算元的值。這個運算子主要用在 <code>for</code> 迴圈內部，使多個變數可在每一次的循環中更新。</p> +<p>例如，如果 <code>a</code> 是各邊含有 10 個元素的二維陣列，以下代碼使用逗號運算子同時遞增兩個變數。這個代碼在陣列裡輸出斜三角元素︰</p> +<pre>for (var i=0, j=9; i <= 9; i++, j--) + document.writeln("a["+i+"]["+j+"]= " + a[i][j]) +</pre> +<h4 id="delete" name="delete">delete</h4> +<p>delete 運算子可刪除物件、物件的屬性、陣列中指定索引的元素。語法為︰</p> +<pre>delete objectName +delete objectName.property +delete objectName[index] +delete property // 只在 with 語法之內有效 +</pre> +<p>此處的 <code>objectName</code> 是指物件的名稱，<code>property</code> 是指現存的屬性，<code>index</code> 是指陣列中以整數表示的元素位置。</p> +<p>第四種於物件中刪除屬性的形式，只在 <code>with</code> 語法之內有效。</p> +<p>你可以使用 <code>delete</code> 運算子刪除以隱式宣告、沒有使用 <code>var</code> 語法的變數。</p> +<p>如果 <code>delete</code> 運算子成功的話，他會把屬性或元素設定為 <code>undefined</code>。如果操作是可行的話，<code>delete</code> 運算子返回 true；如果操作不可行，就返回 false。</p> +<pre>x=42 +var y= 43 +myobj=new Number() +myobj.h=4 // 建立屬性 h +delete x // 返回 true（如果以隱式宣告，就可以刪除） +delete y // 返回 false（如果以 var 宣告，就不能刪除） +delete Math.PI // 返回 false（預先定義的屬性不能刪除） +delete myobj.h // 返回 true（使用者定義的屬性可以刪除） +delete myobj // 返回 true（如果以隱式宣告，就可以刪除）</pre> +<p><strong>刪除陣列裡的元素</strong><br> +當你刪除陣列元素時，陣列的長度並不受影響。舉例來說，如果你刪除 a{{ mediawiki.external(3) }}，a{{ mediawiki.external(4) }} 仍然是 {{ mediawiki.external(4) }}，a{{ mediawiki.external(3) }} 則是 undefined。</p> +<p>當 <code>delete</code> 運算子移除陣列的元素時，這個元素便不復存在於陣列之中。在以下範例中，使用 <code>delete</code> 移除 trees{{ mediawiki.external(3) }}。</p> +<pre>trees=new Array("redwood","bay","cedar","oak","maple") +delete trees[3] +if (3 in trees) { + // 此處不會被執行 +} +</pre> +<p>如果你希望陣列元素存在、且元素的值是未定義，就使用 <code>undefined</code> 關鍵字取代 <code>delete</code> 運算子。在以下範例中，<code>trees{{ mediawiki.external(3) }}</code> 的值被代入為 <code>undefined</code>，而陣列元素仍然存在︰</p> +<pre>trees=new Array("redwood","bay","cedar","oak","maple") +trees[3]=undefined +if (3 in trees) { + // 此處會被執行 +} +</pre><h4 id="in" name="in">in</h4> +<p>如果指定的屬性存在於指定的物件中，<code>in</code> 運算子返回 true。語法為︰</p> +<pre>propNameOrNumber in objectName +</pre> +<p>此處 <code>propNameOrNumber</code> 是指表示為屬性名的字串、或表示為陣列索引的數值的表達式，<code>objectName</code> 是指物件的名稱。</p> +<p>以下範例示範 <code>in</code> 運算子的使用方法。</p> +<pre>// 陣列 +trees=new Array("redwood","bay","cedar","oak","maple") +0 in trees // 返回 true +3 in trees // 返回 true +6 in trees // 返回 false +"bay" in trees // 返回 false（你必須指定索引編號，而不是索引上的值） +"length" in trees // 返回 true（length 是 Array 的屬性） + +// 預先定義的物件 +"PI" in Math // 返回 true +myString=new String("coral") +"length" in myString // 返回 true + +// 自訂的物件 +mycar = {make:"Honda",model:"Accord",year:1998} +"make" in mycar // 返回 true +"model" in mycar // 返回 true +</pre><h4 id="instanceof" name="instanceof">instanceof</h4> +<p>如果指定的物件屬於指定的物件的類型，<code>instanceof</code> 運算子返回 true。語法為︰</p> +<pre>objectName instanceof objectType +</pre> +<p>此處 <code>objectName</code> 是指用來和 <code>objectType</code> 作比較的物件的名稱，<code>objectType</code> 是指物件的類型，如 <code>Date</code> 或 <code>Array</code>。</p> +<p>當你需要確認執行中物件的類型時，就使用 <code>instanceof</code>。舉個例子，當接受到例外時，你可以根據被拋出的例外來決定要執行哪一條例外處理。</p> +<p>例如，以下代碼使用 <code>instanceof</code> 確認 <code>theDay</code> 是否屬於 <code>Date</code> 物件。由於 <code>theDay</code> 屬於 <code>Date</code> 物件，所以會執行 <code>if</code> 語法裡的語句。</p> +<pre>theDay=new Date(1995, 12, 17) +if (theDay instanceof Date) { + // 被執行的語句 +} +</pre><h4 id="new" name="new">new</h4> +<p>你可以使用 <code>new</code> 運算子來建立使用者定義的物件類型的實體，或建立預先定義的物件類型 <code>Array、Boolean</code><code>、</code><code>Date</code><code>、</code><code>Function</code><code>、</code><code>Image</code><code>、</code><code>Number</code><code>、</code><code>Object</code><code>、</code><code>Option</code><code>、</code><code>RegExp</code><code>、</code><code>String</code> 其中之一。在伺服器上，你也可以用於 <code>DbPool</code><code>、</code><code>Lock</code><code>、</code><code>File</code><code>、</code><code>SendMail</code>。<code>new</code> 的使用方法如下︰</p> +<pre>objectName = new objectType ( param1 [,param2] ...[,paramN] ) +</pre> +<p>你也可以使用物件的初始化子來建立物件，如同 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%BB%BA%E7%AB%8B%E6%96%B0%E7%9A%84%E7%89%A9%E4%BB%B6/%E7%89%A9%E4%BB%B6%E5%88%9D%E5%A7%8B%E5%8C%96%E5%AD%90%E7%9A%84%E4%BD%BF%E7%94%A8" title="zh tw/Core JavaScript 1.5 教學/建立新的物件/物件初始化子的使用">物件初始化子的使用</a> 所述。</p> +<p>參閱 Core JavaScript 參考中的 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E9%81%8B%E7%AE%97%E5%AD%90/%E7%89%B9%E6%AE%8A%E9%81%8B%E7%AE%97%E5%AD%90/new_%E9%81%8B%E7%AE%97%E5%AD%90" title="zh tw/Core JavaScript 1.5 參考/運算子/特殊運算子/new 運算子">new 運算子</a> 頁面，以取得更多資訊。</p><h4 id="this" name="this">this</h4> +<p>使用 <code>this</code> 關鍵字可參考目前所使用的物件。一般而言，<code>this</code> 是在方法裡、並參考了呼叫這個方法的物件。<code>this</code> 的使用方法如下︰</p> +<pre>this[propertyName] +</pre> +<p><strong>範例 1</strong><br> +假設有一個稱為 <code>validate</code> 的函數可驗證某一物件的 <code>value</code> 屬性，並以物件和上限、下限值作為參數︰</p> +<pre>function validate(obj, lowval, hival) { + if ((obj.value < lowval) || (obj.value > hival)) + alert("Invalid Value!") +} +</pre> +<p>你可以在每一個表單元素的 <code>onChange</code> 事件處理器中呼叫 <code>validate</code>，並使用 <code>this</code> 傳送表單元素，如下範例︰</p> +<pre><B>Enter a number between 18 and 99:</B> +<INPUT TYPE = "text" NAME = "age" SIZE = 3 + onChange="validate(this, 18, 99)"> +</pre> +<p><strong>範例 2</strong><br> +結合 <code>form</code> 屬性時，<code>this</code> 也可以參考目前所使用的物件的親表單。在以下範例中，表單 <code>myForm</code> 內含一個 <code>Text</code> 物件和按鈕。當使用者點擊按鈕，<code>Text</code> 物件的值便設定為表單的名稱。按鈕的 <code>onClick</code> 事件處理器使用 <code>this.form</code> 來參考親表單 <code>myForm</code>。</p> +<pre><FORM NAME="myForm"> +Form name:<INPUT TYPE="text" NAME="text1" VALUE="Beluga"> +<P> +<INPUT NAME="button1" TYPE="button" VALUE="Show Form Name" + onClick="this.form.text1.value=this.form.name"> +</FORM> +</pre> +<h4 id="typeof" name="typeof">typeof</h4> +<p><code>typeof</code> 運算子可按下列兩種方式來使用︰</p> +<pre>1. typeof operand +2. typeof (operand) +</pre> +<p><code>typeof</code> 運算子可返回字串，這些字串指出未求值的運算元的類型。<code>operand</code> 是指字串、變數、關鍵字、物件，其類型可被 <code>typeof</code> 返回。括弧並非必要的。</p> +<p>假設你定義了以下變數︰</p> +<pre>var myFun = new Function("5+2") +var shape="round" +var size=1 +var today=new Date() +</pre> +<p><code>typeof</code> 運算子對以下變數返回以下結果︰</p> +<pre>typeof myFun 返回的是 function +typeof shape 返回的是 string +typeof size 返回的是 number +typeof today 返回的是 object +typeof dontExist 返回的是 undefined +</pre> +<p>對於 <code>true</code> 和 <code>null</code> 關鍵字而言，<code>typeof</code> 運算子返回以下結果︰</p> +<pre>typeof true 返回的是 boolean +typeof null 返回的是 object +</pre> +<p>對於數字或字串而言，<code>typeof</code> 運算子返回以下結果︰</p> +<pre>typeof 62 返回的是 number +typeof 'Hello world' 返回的是 string +</pre> +<p>對於屬性值而言，<code>typeof</code> 運算子返回屬性裡的值的類型︰</p> +<pre>typeof document.lastModified 返回的是 string +typeof window.length 返回的是 number +typeof Math.LN2 返回的是 number +</pre> +<p>對於方法和函數而言，<code>typeof</code> 運算子返回以下結果︰</p> +<pre>typeof blur 返回的是 function +typeof eval 返回的是 function +typeof parseInt 返回的是 function +typeof shape.split 返回的是 function +</pre> +<p>對於預先定義的物件而言，<code>typeof</code> 運算子返回以下結果︰</p> +<pre>typeof Date 返回的是 function +typeof Function 返回的是 function +typeof Math 返回的是 function +typeof Option 返回的是 function +typeof String 返回的是 function +</pre> +<h4 id="void" name="void">void</h4> +<p><code>void</code> 運算子可按下列兩種方式來使用︰</p> +<pre>1. void (expression) +2. void expression +</pre> +<p><code>void</code> 運算子表示表達式求值之後不必把值返回。<code>expression</code> 是指可供求值的 JavaScript 表達式。表達式兩邊的圓括號並不是必要的，但圓括號的使用對閱讀有利。</p> +<p>你可以把 <code>void</code> 運算子使用於當作超連結的表達式。表達式會被求值，但不會被載入而取代目前的文件。</p> +<p>以下代碼建立了什麼也不做的超連結。當使用者點擊連結時，<code>void(0)</code> 的求值為 undefined，這在 JavaScript 中並沒有作用。</p> +<pre><A HREF="javascript:void(0)">Click here to do nothing</A> +</pre> +<p>以下代碼建立了超連結，當使用者點擊時，就傳送表單。</p> +<pre><A HREF="javascript:void(document.form.submit())"> +Click here to submit</A> +</pre> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:運算子:字串運算子", "Core_JavaScript_1.5_教學:正規表達式的建立") }}</p> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Special_Operators", "es": "es/Gu\u00eda_JavaScript_1.5/Operadores/Operadores_especiales", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_sp\u00e9ciaux", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Special_Operators", "ko": "ko/Core_JavaScript_1.5_Guide/Operators/Special_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operatory_specjalne" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/expressions_and_operators_e6fc14473511cf01e7062dfb7751f49d/index.html b/files/zh-tw/conflicting/web/javascript/guide/expressions_and_operators_e6fc14473511cf01e7062dfb7751f49d/index.html new file mode 100644 index 0000000000..5c6eb2fb16 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/expressions_and_operators_e6fc14473511cf01e7062dfb7751f49d/index.html @@ -0,0 +1,30 @@ +--- +title: 運算子 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/運算子 +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators +--- +<p> </p> +<h3 id="運算子" name="運算子">運算子</h3> +<p>JavaScript 有以下幾種運算子。本節說明運算子，且包含有關運算子優先順序的資訊。</p> +<ul> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%81%8B%E7%AE%97%E5%AD%90/%E4%BB%A3%E5%85%A5%E9%81%8B%E7%AE%97%E5%AD%90" title="zh tw/Core JavaScript 1.5 教學/運算子/代入運算子">代入運算子</a></li> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%81%8B%E7%AE%97%E5%AD%90/%E6%AF%94%E8%BC%83%E9%81%8B%E7%AE%97%E5%AD%90" title="zh tw/Core JavaScript 1.5 教學/運算子/比較運算子">比較運算子</a></li> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%81%8B%E7%AE%97%E5%AD%90/%E7%AE%97%E8%A1%93%E9%81%8B%E7%AE%97%E5%AD%90" title="zh tw/Core JavaScript 1.5 教學/運算子/算術運算子">算術運算子</a></li> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%81%8B%E7%AE%97%E5%AD%90/%E4%BD%8D%E5%85%83%E9%81%8B%E7%AE%97%E5%AD%90" title="zh tw/Core JavaScript 1.5 教學/運算子/位元運算子">位元運算子</a></li> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%81%8B%E7%AE%97%E5%AD%90/%E9%82%8F%E8%BC%AF%E9%81%8B%E7%AE%97%E5%AD%90" title="zh tw/Core JavaScript 1.5 教學/運算子/邏輯運算子">邏輯運算子</a></li> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%81%8B%E7%AE%97%E5%AD%90/%E5%AD%97%E4%B8%B2%E9%81%8B%E7%AE%97%E5%AD%90" title="zh tw/Core JavaScript 1.5 教學/運算子/字串運算子">字串運算子</a></li> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%81%8B%E7%AE%97%E5%AD%90/%E7%89%B9%E6%AE%8A%E9%81%8B%E7%AE%97%E5%AD%90" title="zh tw/Core JavaScript 1.5 教學/運算子/特殊運算子">特殊運算子</a></li> +</ul> +<p>JavaScript 有一元和二元兩種運算子，以及特殊的三元運算子，也就是條件運算子。二元運算子需要兩個運算元，一個在運算子之前，一個在運算子之後︰</p> +<pre>operand1 operator operand2 +</pre> +<p>例如，<code>3+4</code> 或 <code>x*y</code>。</p> +<p>一元運算子需要一個運算元，可以運算子之前或之後︰</p> +<pre>operator operand +</pre> +<p>或</p> +<pre>operand operator +</pre> +<p><span style="font-family: monospace;">例如，</span><code>x++</code> 或 <code>++x</code>。</p> +<h4 id="運算子的優先順序" name="運算子的優先順序">運算子的優先順序</h4> +<p><small><em>按照<a href="/Talk:en/Core_JavaScript_1.5_Guide/Operators#Precedence_Table" title="Talk:en/Core_JavaScript_1.5_Guide/Operators#Precedence_Table">相關的討論</a>，本表採用<strong>由高到低</strong>的優先順序。</em></small></p> +<table class="fullwidth-table"> <tbody> <tr> <th>運算子類型</th> <th>單獨的運算子</th> </tr> <tr> <td>成員</td> <td>. []</td> </tr> <tr> <td>呼叫 / 建立實體</td> <td>() new</td> </tr> <tr> <td>反轉 / 遞增</td> <td>! ~ - + ++ -- typeof void delete</td> </tr> <tr> <td>乘法 / 除法</td> <td>* / %</td> </tr> <tr> <td>加法 / 減法</td> <td>+ -</td> </tr> <tr> <td>位元位移</td> <td><< >> >>></td> </tr> <tr> <td>關係</td> <td>< <= > >= in instanceof</td> </tr> <tr> <td>等價</td> <td>== != === !==</td> </tr> <tr> <td>位元 AND</td> <td>&</td> </tr> <tr> <td>位元 XOR</td> <td>^</td> </tr> <tr> <td>位元 OR</td> <td>|</td> </tr> <tr> <td>邏輯 AND</td> <td>&&</td> </tr> <tr> <td>邏輯 OR</td> <td>||</td> </tr> <tr> <td>條件</td> <td>?:</td> </tr> <tr> <td>代入</td> <td>= += -= *= /= %= <<= >>= >>>= &= ^= |=</td> </tr> <tr> <td>逗號</td> <td>,</td> </tr> </tbody> +</table> +<p><small><strong>表 3.1: 運算子的優先順序</strong></small></p> +<p>有關本表的詳細版本，且附有關於運算子的完整細節，請參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E9%81%8B%E7%AE%97%E5%AD%90/%E9%81%8B%E7%AE%97%E5%AD%90%E7%9A%84%E5%84%AA%E5%85%88%E9%A0%86%E5%BA%8F#%E8%A1%A8" title="zh tw/Core JavaScript 1.5 參考/運算子/運算子的優先順序#表">參考的章節</a>。</p> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:表達式", "Core_JavaScript_1.5_教學:運算子:代入運算子") }}</p> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators", "es": "es/Gu\u00eda_JavaScript_1.5/Operadores", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs", "ja": "ja/Core_JavaScript_1.5_Guide/Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/expressions_and_operators_e70c1f2655520c542321ddbdb2c4f28d/index.html b/files/zh-tw/conflicting/web/javascript/guide/expressions_and_operators_e70c1f2655520c542321ddbdb2c4f28d/index.html new file mode 100644 index 0000000000..31b103c23f --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/expressions_and_operators_e70c1f2655520c542321ddbdb2c4f28d/index.html @@ -0,0 +1,65 @@ +--- +title: 代入運算子 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/運算子/代入運算子 +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Comparison_Operators +--- +<p> </p> +<h3 id="代入運算子" name="代入運算子">代入運算子</h3> +<p>代入運算子根據右邊運算元的值，把值代入給左邊運算元的值。最基本的代入運算子是等號 (=)，他會把右邊運算元的值代入給左邊運算元的值。也就是說，x = y 就是把 y 的值代入給 x。</p> +<p>其餘的代入運算子只是標準運算子的簡記法，如下表所示。</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>運算子的簡記法</th> + <th>意義</th> + </tr> + <tr> + <td>x += y</td> + <td>x = x + y</td> + </tr> + <tr> + <td>x -= y</td> + <td>x = x - y</td> + </tr> + <tr> + <td>x *= y</td> + <td>x = x * y</td> + </tr> + <tr> + <td>x /= y</td> + <td>x = x / y</td> + </tr> + <tr> + <td>x %= y</td> + <td>x = x % y</td> + </tr> + <tr> + <td>x <<= y</td> + <td>x = x << y</td> + </tr> + <tr> + <td>x >>= y</td> + <td>x = x >> y</td> + </tr> + <tr> + <td>x >>>= y</td> + <td>x = x >>> y</td> + </tr> + <tr> + <td>x &= y</td> + <td>x = x & y</td> + </tr> + <tr> + <td>x ^= y</td> + <td>x = x ^ y</td> + </tr> + <tr> + <td>x |= y</td> + <td>x = x | y</td> + </tr> + </tbody> +</table> +<p><small><strong>表 3.2: 代入運算子</strong></small></p> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:運算子", "Core_JavaScript_1.5_教學:運算子:比較運算子") }}</p> +<p> </p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/expressions_and_operators_eb65eb8f4e6b3c16f08b95149183cfb8/index.html b/files/zh-tw/conflicting/web/javascript/guide/expressions_and_operators_eb65eb8f4e6b3c16f08b95149183cfb8/index.html new file mode 100644 index 0000000000..0589aefd73 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/expressions_and_operators_eb65eb8f4e6b3c16f08b95149183cfb8/index.html @@ -0,0 +1,12 @@ +--- +title: 字串運算子 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/運算子/字串運算子 +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/String_Operators +--- +<p> </p> +<h4 id="字串運算子" name="字串運算子">字串運算子</h4> +<p>除了比較運算子可以用於字串值以外，連結運算子 (+) 把兩個字串值串連在一起，返回另一個以兩個運算元字串連結的字串。例如，<code>"my " + "string"</code> 返回<code> "my string"</code> 字串。</p> +<p>代入運算子 += 的簡記法也可用於連結字串。例如，如果變數 <code>mystring</code> 內有 "alpha" 值，<code>mystring += "bet"</code> 表達式的求值為“alphabet”，並把這個值代入到 <code>mystring</code>。</p> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:運算子:邏輯運算子", "Core_JavaScript_1.5_教學:運算子:特殊運算子") }}</p> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/String_Operators", "es": "es/Gu\u00eda_JavaScript_1.5/Operadores/Operadores_de_cadenas_de_caracteres_(string)", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_li\u00e9s_aux_cha\u00eenes", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/String_Operators", "ko": "ko/Core_JavaScript_1.5_Guide/Operators/String_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operacje_na_\u0142a\u0144cuchach" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/functions/index.html b/files/zh-tw/conflicting/web/javascript/guide/functions/index.html new file mode 100644 index 0000000000..8999a04084 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/functions/index.html @@ -0,0 +1,34 @@ +--- +title: 函數的呼叫 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/函數的呼叫 +translation_of: Web/JavaScript/Guide/Functions +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Calling_Functions +--- +<p> </p> +<div class="onlyinclude"> +<h3 id="函數的呼叫">函數的呼叫</h3> +<p>定義函數並不會執行函數。函數的定義只是簡單的給函數命名，並指定當函數被呼叫的時候要做些什麼。函數的<em>呼叫</em>會以指定的參數真正的執行指定的動作。例如，如果你定義了函數 square，你可以如下呼叫。</p> +<pre>square(5) +</pre> +<p>上面的語句以 5 為參數呼叫函數。函數執行他的語句，並返回 25 的值。</p> +<p>函數的參數並不限於字串和數字。你也可以傳遞一整個物件給函數。<code>show_props</code> 函數（定義在 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E7%89%A9%E4%BB%B6%E5%92%8C%E5%B1%AC%E6%80%A7" title="zh tw/Core JavaScript 1.5 教學/物件和屬性">物件和屬性</a>）即是接收一個物件作為參數的函數的範例。</p> +<p>函數甚至可以遞歸循環，也就是他可以呼叫他自己。例如，這裡有個計算階乘的函數︰</p> +<pre>function factorial(n) { + if ((n == 0) || (n == 1)) + return 1; + else { + var result = (n * factorial(n-1) ); + return result; + } +} +</pre> +<p>你可以計算一到五的階乘如下︰</p> +<pre>a=factorial(1); // 返回 1 +b=factorial(2); // 返回 2 +c=factorial(3); // 返回 6 +d=factorial(4); // 返回 24 +e=factorial(5); // 返回 120 +</pre> +</div> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:函數的定義", "Core_JavaScript_1.5_教學:arguments_物件的使用") }}</p> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Calling_Functions", "fr": "fr/Guide_JavaScript_1.5/Appel_de_fonctions", "ja": "ja/Core_JavaScript_1.5_Guide/Calling_Functions", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Wywo\u0142anie_funkcji" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/functions_536f6bf46bbdf38cc1a0b28ca1bc41b9/index.html b/files/zh-tw/conflicting/web/javascript/guide/functions_536f6bf46bbdf38cc1a0b28ca1bc41b9/index.html new file mode 100644 index 0000000000..0b44186a97 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/functions_536f6bf46bbdf38cc1a0b28ca1bc41b9/index.html @@ -0,0 +1,36 @@ +--- +title: Number 和 String 函數 +slug: >- + Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/預先定義的函數/Number_和_String_函數 +translation_of: Web/JavaScript/Guide/Functions +translation_of_original: >- + Web/JavaScript/Guide/Obsolete_Pages/Predefined_Functions/parseInt_and_parseFloat_Functions +--- +<h4 id="Number_和_String_函數">Number 和 String 函數</h4> +<div class="onlyinclude"> +<p><code>Number</code> 和 <code>String</code> 函數讓你把物件轉換為數字或字串。這些函數的語句是︰</p> +<pre>var objRef=Number(objRef); +var objRef=String(objRef); +</pre> +<p>此處的 <code>objRef</code> 就是物件的參考。</p> +<p>以下的範例把 <code><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/Date" title="zh tw/Core JavaScript 1.5 參考/全域物件/Date">Date</a></code> 物件轉換為可讀的字串。</p> +<pre>var D = new Date (430054663215); +// 返回以下字串 +// "Thu Aug 18 04:37:43 GMT-0700 (Pacific Daylight Time) 1983" +var x = String(D); +</pre> +</div> +<p> </p> +<p>以下範例把 <code><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/String" title="zh tw/Core JavaScript 1.5 參考/全域物件/String">String</a></code> 物件轉換為 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/Number" title="zh tw/Core JavaScript 1.5 參考/全域物件/Number"><font face="Courier New">Number</font></a> 物件。</p> +<pre>var str="12"; +var num=Number(str); +</pre> +<p>你可以使用 DOM 的方法 write() 和 JavaScript 的 typeof 運算子來檢驗。</p> +<pre>var str="12"; +document.write(typeof str); +document.write("<br/>"); +var num=Number(str); +document.write(typeof num); +</pre> +<p> {{ PreviousNext("Core_JavaScript_1.5_教學:預先定義的函數:parseInt_和_parseFloat_函數", "Core_JavaScript_1.5_教學:預先定義的函數:escape_和_unescape_函數") }}</p> +<p>{{ languages( {"en": "en/Core_JavaScript_1.5_Guide/Predefined_Functions/Number_and_String_Functions", "es": "es/Gu\u00eda_JavaScript_1.5/Funciones_predefinidas/Funciones_Number_y_String", "fr": "fr/Guide_JavaScript_1.5/Fonctions_pr\u00e9d\u00e9finies/Les_fonctions_Number_et_String", "ja": "ja/Core_JavaScript_1.5_Guide/Predefined_Functions/Number_and_String_Functions", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Funkcje_predefiniowane/Funkcje_Number_i_String" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/functions_587eb671a310bac0771e73a91b0abe6d/index.html b/files/zh-tw/conflicting/web/javascript/guide/functions_587eb671a310bac0771e73a91b0abe6d/index.html new file mode 100644 index 0000000000..b44b292eb8 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/functions_587eb671a310bac0771e73a91b0abe6d/index.html @@ -0,0 +1,15 @@ +--- +title: 預先定義的函數 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/預先定義的函數 +translation_of: Web/JavaScript/Guide/Functions +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Predefined_Functions +--- +<p> </p> +<div class="onlyinclude"> +<h3 id="預先定義的函數" name="預先定義的函數">預先定義的函數</h3> +<p>JavaScript 有一些最頂層的已預先定義的函數︰</p> +<ul> <li><a href="/zh%20tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E5%87%BD%E6%95%B8/eval_%E5%87%BD%E6%95%B8" title="zh tw/Core_JavaScript_1.5_教學/預先定義的函數/eval_函數">eval</a></li> <li><a href="/zh%20tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E5%87%BD%E6%95%B8/isFinite_%E5%87%BD%E6%95%B8" title="zh tw/Core_JavaScript_1.5_教學/預先定義的函數/isFinite_函數">isFinite</a></li> <li><a href="/zh%20tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E5%87%BD%E6%95%B8/isNaN_%E5%87%BD%E6%95%B8" title="zh tw/Core_JavaScript_1.5_教學/預先定義的函數/isNaN_函數">isNaN</a></li> <li><a href="/zh%20tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E5%87%BD%E6%95%B8/parseInt_%E5%92%8C_parseFloat_%E5%87%BD%E6%95%B8" title="zh tw/Core_JavaScript_1.5_教學/預先定義的函數/parseInt_和_parseFloat_函數">parseInt 和 parseFloat</a></li> <li><a href="/zh%20tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E5%87%BD%E6%95%B8/Number_%E5%92%8C_String_%E5%87%BD%E6%95%B8" title="zh tw/Core_JavaScript_1.5_教學/預先定義的函數/Number_和_String_函數">Number 和 String</a></li> <li><a href="/zh%20tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E5%87%BD%E6%95%B8/escape_%E5%92%8C_unescape_%E5%87%BD%E6%95%B8" title="zh tw/Core_JavaScript_1.5_教學/預先定義的函數/escape_和_unescape_函數">encodeURI、decodeURI、encodeURIComponent、decodeURIComponent（Javascript 1.5 以後的版本皆可使用）。</a></li> +</ul> +</div> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:arguments_物件的使用", "Core_JavaScript_1.5_教學:預先定義的函數:eval_函數") }}</p> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Predefined_Functions", "fr": "fr/Guide_JavaScript_1.5/Fonctions_pr\u00e9d\u00e9finies", "ja": "ja/Core_JavaScript_1.5_Guide/Predefined_Functions", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Funkcje_predefiniowane" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/functions_925b2d10050621507a9c990cb803dcca/index.html b/files/zh-tw/conflicting/web/javascript/guide/functions_925b2d10050621507a9c990cb803dcca/index.html new file mode 100644 index 0000000000..d2ea7c4a46 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/functions_925b2d10050621507a9c990cb803dcca/index.html @@ -0,0 +1,26 @@ +--- +title: isNaN 函數 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/預先定義的函數/isNaN_函數 +translation_of: Web/JavaScript/Guide/Functions +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Predefined_Functions/isNaN_Function +--- +<p> </p> +<div class="onlyinclude"> +<h4 id="isNaN_函數">isNaN 函數</h4> +<p><code>isNaN</code> 函數對參數求值，來判斷是不是〝NaN〞（不是數字，not a number）。<code>isNaN</code> 的語句如下︰</p> +<pre>isNaN(testValue) +</pre> +<p>此處的 <code>testValue</code> 就是你想要求值的值。</p> +<p><code>parseFloat</code> 和 <code>parseInt</code> 函數會在求出來的值不是數字的時候返回〝NaN〞<span style="font-family: monospace;">。</span>如果傳入的是〝NaN〞，<code>isNaN</code> 返回 true，否則為 false。</p> +<p>以下的代碼會對 <code>floatValue</code> 求值，來判斷這是不是數字，然後呼叫相應的程序︰</p> +<pre>floatValue=parseFloat(toFloat) + +if (isNaN(floatValue)) { + notFloat() +} else { + isFloat() +} +</pre> +</div> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:預先定義的函數:isFinite_函數", "Core_JavaScript_1.5_教學:預先定義的函數:parseInt_和_parseFloat_函數") }}</p> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Predefined_Functions/isNaN_Function", "fr": "fr/Guide_JavaScript_1.5/Fonctions_pr\u00e9d\u00e9finies/La_fonction_isNaN", "ja": "ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isNaN_Function", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Funkcje_predefiniowane/Funkcja_isNaN" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/functions_b2cd05cbfe188215dc2e3f972d293ed6/index.html b/files/zh-tw/conflicting/web/javascript/guide/functions_b2cd05cbfe188215dc2e3f972d293ed6/index.html new file mode 100644 index 0000000000..db213a465e --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/functions_b2cd05cbfe188215dc2e3f972d293ed6/index.html @@ -0,0 +1,24 @@ +--- +title: isFinite 函數 +slug: >- + Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/預先定義的函數/isFinite_函數 +translation_of: Web/JavaScript/Guide/Functions +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Predefined_Functions/isFinite_Function +--- +<p> </p> +<div class="onlyinclude"> +<h4 id="isFinite_函數">isFinite 函數</h4> +<p><code>isFinite</code> 函數會對參數求值，來判斷是否是有限的數字。<code>isFinite</code> 的語法如下︰</p> +<pre>isFinite(number) +</pre> +<p>此處的 number 就是要求值的數字。</p> +<p>如果參數是 <code>NaN</code>、正無限大、負無限大，這個方法就會返回 <code>false</code>，否則就會返回 <code>true</code>。</p> +<p>以下的代碼會檢查客戶端的輸入，來判斷是否是有限的數字。</p> +<pre>if(isFinite(ClientInput)) +{ + /* 適當的處理 */ +} +</pre> +</div> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:預先定義的函數:eval_函數", "Core_JavaScript_1.5_教學:預先定義的函數:isNaN_函數") }}</p> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Predefined_Functions/isFinite_Function", "fr": "fr/Guide_JavaScript_1.5/Fonctions_pr\u00e9d\u00e9finies/La_fonction_isFinite", "ja": "ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isFinite_Function", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Funkcje_predefiniowane/Funkcja_isFinite" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/functions_ceaa4b2a55bb67388c2728af1ff890f5/index.html b/files/zh-tw/conflicting/web/javascript/guide/functions_ceaa4b2a55bb67388c2728af1ff890f5/index.html new file mode 100644 index 0000000000..0533e2d1a4 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/functions_ceaa4b2a55bb67388c2728af1ff890f5/index.html @@ -0,0 +1,21 @@ +--- +title: escape 和 unescape 函數 +slug: >- + Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/預先定義的函數/escape_和_unescape_函數 +translation_of: Web/JavaScript/Guide/Functions +translation_of_original: >- + Web/JavaScript/Guide/Obsolete_Pages/Predefined_Functions/escape_and_unescape_Functions +--- +<p> </p> +<div class="onlyinclude"> +<h4 id="escape_和_unescape_函數">escape 和 unescape 函數</h4> +<p><code>escape</code> 和 <code>unescape</code> 函數可讓你把字串編碼或解碼。<code>escape</code> 函數會返回以 ISO Latin 字元集來表示參數的十六進制編碼。<code>unescape</code> 函數會對指定的十六進制編碼值返回 ASCII 字串。</p> +<p>這些函數的語句是︰</p> +<pre>escape(string) +unescape(string) +</pre> +<p>這些函數主要是在伺服端的 JavaScript 用來編碼或解碼 URL 裡的名稱和值的配對。</p> +<p><code>escape</code> 和 <code>unescape</code> 函數在非 ASCII 字元下無法正確運作，也已被廢棄。在 JavaScript 1.5 及其後版本中，可以改用 <code><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E5%87%BD%E6%95%B8/encodeURI" title="zh tw/Core JavaScript 1.5 參考/全域函數/encodeURI">encodeURI</a></code>、<code><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E5%87%BD%E6%95%B8/decodeURI" title="zh tw/Core JavaScript 1.5 參考/全域函數/decodeURI">decodeURI</a></code>、<code><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E5%87%BD%E6%95%B8/encodeURIComponent" title="zh tw/Core JavaScript 1.5 參考/全域函數/encodeURIComponent">encodeURIComponent</a></code>、<code><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E5%87%BD%E6%95%B8/decodeURIComponent" title="zh tw/Core JavaScript 1.5 參考/全域函數/decodeURIComponent">decodeURIComponent</a></code>。</p> +</div> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:預先定義的函數:Number_和_String_函數", "Core_JavaScript_1.5_教學:閉鎖的運用") }}</p> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Predefined_Functions/escape_and_unescape_Functions", "es": "es/Gu\u00eda_JavaScript_1.5/Funciones_predefinidas/Funciones_escape_y_unescape", "fr": "fr/Guide_JavaScript_1.5/Fonctions_pr\u00e9d\u00e9finies/Les_fonctions_escape_et_unescape", "ja": "ja/Core_JavaScript_1.5_Guide/Predefined_Functions/escape_and_unescape_Functions", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Funkcje_predefiniowane/Funkcje_escape_i_unescape" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/functions_effb9b1bcc102a5f6df7f1785ce89033/index.html b/files/zh-tw/conflicting/web/javascript/guide/functions_effb9b1bcc102a5f6df7f1785ce89033/index.html new file mode 100644 index 0000000000..fb257f891c --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/functions_effb9b1bcc102a5f6df7f1785ce89033/index.html @@ -0,0 +1,17 @@ +--- +title: eval 函數 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/預先定義的函數/eval_函數 +translation_of: Web/JavaScript/Guide/Functions +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Predefined_Functions/eval_Function +--- +<p> </p> +<div class="onlyinclude"> +<h4 id="eval_函數" name="eval_函數">eval 函數</h4> +<p><code>eval</code> 函數無須參考實際的物件，就可以對 JavaScript 代碼的字串直接求值。eval 語法如下︰</p> +<pre>eval(expr) +</pre> +<p>此處 <code>expr</code> 就是要被求值的字串。</p> +<p>如果字串表示成表達式，<code>eval</code> 就會對表達式求值。如果參數（<code>expr</code>）表示成一個以上的 JavaScript 語句，eval 就會對語句求值。<code>eval</code> 代碼的作用域等同於呼叫端代碼的作用域。不要用 <code>eval</code> 來對算術表達式求值，JavaScript 會自動的對算術表達式來求值。</p> +</div> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:預先定義的函數", "Core_JavaScript_1.5_教學:預先定義的函數:isFinite_函數") }}</p> +<p>{{ languages( {"en": "en/Core_JavaScript_1.5_Guide/Predefined_Functions/eval_Function", "fr": "fr/Guide_JavaScript_1.5/Fonctions_pr\u00e9d\u00e9finies/La_fonction_eval", "ja": "ja/Core_JavaScript_1.5_Guide/Predefined_Functions/eval_Function", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Funkcje_predefiniowane/Funkcja_eval" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/grammar_and_types/index.html b/files/zh-tw/conflicting/web/javascript/guide/grammar_and_types/index.html new file mode 100644 index 0000000000..407d484a34 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/grammar_and_types/index.html @@ -0,0 +1,33 @@ +--- +title: Unicode +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/Unicode +translation_of: Web/JavaScript/Guide/Grammar_and_types +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Unicode +--- +<p> </p> +<h3 id="Unicode" name="Unicode">Unicode</h3> +<p>Unicode 是一種全球通用的字元編碼標準，用於交換並顯示主要的書寫語言。Unicode 涵括了美國、歐洲、中東、非洲、印度、亞洲以及太平洋地區的語系，但不包括歷史手稿和專門符號。Unicode 可用於交換、處理並顯示多國語系的文書，除了一般的專門符號和數學符號以外。Unicode 期望能夠解決對於不同國家的字元標準的多國語言處理等國際化問題。但目前並未完整支援所有的現代或古代的文字。</p> +<p>Unicode 字元集可以使用所有已知編碼的字元。Unicode 是繼 ASCII（American Standard Code for Information Interchange；美國資訊交換標準碼）字元集之後的字元集模型。Unicode 為每一個字元分配一個數字和名稱。字元編碼規範了字元的識別資訊及其數值（編碼位置），但未指明數值的位元表示法。16 位元數值（編碼值）是以十六進制數並加上前綴 U 來定義的，例如，U+0041 表示 A。這個數值的專用名稱是 LATIN CAPITAL LETTER A。</p> +<p><strong>JavaScript 1.3 以前的版本並不支援 </strong><strong>Unicode。</strong></p> +<h4 id="Unicode_與_ASCII_和_ISO_的相容性" name="Unicode_與_ASCII_和_ISO_的相容性">Unicode 與 ASCII 和 ISO 的相容性</h4> +<p>Unicode 完全相容於國際標準 ISO/IEC 10646-1; 1993，屬於 ISO 10646 的子集。</p> +<p>若干編碼標準（包括 UTF-8、UTF-16、ISO UCS-2）是用來把 Unicode 表示為實際的位元。</p> +<p>Unicode 的 UTF-8 編碼可相容於 ASCII 字元，並已有許多程式支援。並且把前 128 個 Unicode 字元對應至 ASCII 字元，而擁有相同的位元組內碼。從 U+0020 到 U+007E 的 Unicode 字元完全等價於從 0x20 到 0x7E 的 ASCII 字元。與 ASCII 不同之處在於，還支援了使用 7 位元字元集的拉丁字母，UTF-8 為各個字元使用 1 到 4 個位元組（原作“octet”，即位元組、8 位元），借此容納數以百萬計的字元。另一種編碼標準，UTF-16，使用 2 個位元組表示 Unicode 字元。藉由 4 位元組的跳脫序列，可讓 UTF-16 表示 Unicode 的全部範圍。ISO UCS-2（Universal Character Set）使用 2 個位元組。</p> +<p>JavaScript 和 Navigator 支援 UTF-8/Unicode，意味著你只需在 JavaScript 程式中加上特別的技術，就可以使用非拉丁文、國際性、地域性的文字。Unicode 為多國文字的編碼提供了標準方法。由於 Unicode 的 UTF-8 編碼可相容於 ASCII，程式可以使用 ASCII 字元。你可以在 JavaScript 的註解、字串的字面表達、識別子、正則表達式中使用非 ASCII 的 Unicode 字元。</p> +<h4 id="Unicode_的跳脫序列" name="Unicode_的跳脫序列">Unicode 的跳脫序列</h4> +<p>你可以在字串的字面表達、正則表達式、識別子中使用 Unicode 跳脫序列。跳脫序列是由 6 個 ASCII 字元所構成︰\u 和 4 個十六進制數。例如，\u00A9 表示版權符號。在 JavaScript 中，所有的 Unicode 跳脫序列都會被解譯為單一字元。</p> +<p>以下代碼返回版權符號和字串 "Netscape Communications"。</p> +<pre>x="\u00A9 Netscape Communications"</pre> +<p>下表列出最常用的特殊字元及其 Unicode 值。</p> +<table class="fullwidth-table"> <tbody> <tr> <th>分類</th> <th>Unicode 值</th> <th>名稱</th> <th>格式名稱</th> </tr> <tr> <td>空白的值</td> <td>\u0009</td> <td>Tab</td> <td><TAB></td> </tr> <tr> <td> </td> <td>\u000B</td> <td>Vertical Tab</td> <td><VT></td> </tr> <tr> <td> </td> <td>\u000C</td> <td>Form Feed</td> <td><FF></td> </tr> <tr> <td> </td> <td>\u0020</td> <td>Space</td> <td><SP></td> </tr> <tr> <td>行終止的值</td> <td>\u000A</td> <td>Line Feed</td> <td><LF></td> </tr> <tr> <td> </td> <td>\u000D</td> <td>Carriage Return</td> <td><CR></td> </tr> <tr> <td>額外的 Unicode 跳脫序列的值</td> <td>\u0008</td> <td>Backspace</td> <td><BS></td> </tr> <tr> <td> </td> <td>\u0009</td> <td>Horizontal Tab</td> <td><HT></td> </tr> <tr> <td> </td> <td>\u0022</td> <td>Double Quote</td> <td>"</td> </tr> <tr> <td> </td> <td>\u0027</td> <td>Single Quote</td> <td>'</td> </tr> <tr> <td> </td> <td>\u005C</td> <td>Backslash</td> <td>\</td> </tr> </tbody> +</table> +<p><small><strong>表 2.2: 特殊字元的 Unicode 值</strong></small></p> +<p>JavaScript 使用的 Unicode 跳脫序列與 Java 不同。在 JavaScript 中，跳脫序列一開始不會被解譯為特殊字元。例如，字串裡的換行的跳脫序列，在給函數解譯以前，並不會使字串換行。JavaScript 會忽略所有使用在註解裡的跳脫序列。在 Java 中，如果跳脫序列使用在單行註解裡，就會被解譯為 Unicode 字元。對於字串的字面表達而言，Java 編譯器將首先解譯跳脫序列。例如，如果在 Java 中使用換行的跳脫字元（即 \u000A），就會使字串的字面表達換行。這在 Java 中會引起錯誤，因為換行不可以用在字串的字面表達。你必須給字串的字面表達的換行替換成 \n。在 JavaScript 中，也同樣使用 \n 作為跳脫序列。</p> +<h4 id="在_JavaScript_檔案裡的_Unicode_字元" name="在_JavaScript_檔案裡的_Unicode_字元">在 JavaScript 檔案裡的 Unicode 字元</h4> +<p><a class="internal" href="/zh_tw/Gecko" title="zh tw/Gecko">Gecko</a> 的早期版本假設從 XUL 載入的 JavaScript 檔案使用的是 Latin-1 字元編碼。從 Gecko 1.8 開始，就從 XUL 檔案的編碼來推斷字元編碼。請參閱 <a class="internal" href="/zh_tw/%E5%9C%A8_XUL_JavaScript_%E4%B8%AD%E7%9A%84%E5%9C%8B%E9%9A%9B%E5%8C%96%E5%AD%97%E5%85%83" title="zh tw/在 XUL JavaScript 中的國際化字元">在 XUL JavaScript 中的國際化字元</a> 取得進一步資訊。</p> +<h4 id="使用_Unicode_顯示字元" name="使用_Unicode_顯示字元">使用 Unicode 顯示字元</h4> +<p>你可以使用 Unicode 顯示不同語言或專門符號的字元。為使字元正確的顯示，像 Mozilla Firefox 或 Netscape 這類客戶端也需要支援 Unicode。此外，客戶端也必須有可用的 Unicode 字型，客戶端平台也必須支援 Unicode。通常，Unicode 字型並不會顯示所有的 Unicode 字元。部分平台，如 Windows 95，只提供對 Unicode 的一部分支援。</p> +<p>要接收非 ASCII 字元的輸入，客戶端需要把傳送進來的輸入視為 Unicode。使用標準的增強式鍵盤，客戶端無法簡單的輸入由 Unicode 支援的額外字元。在某些時候，使用 Unicode 跳脫序列輸入 Unicode 字元是唯一的輸入方法。</p> +<p>有關 Unicode 的詳細資訊，參閱 <a class="external" href="http://www.unicode.org/">Unicode 首頁</a> 以及 1996 年由 Addison-Wesley 出版的 Unicode Standard, Version 2.0。</p> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:字面表達", "Core_JavaScript_1.5_教學:表達式") }}</p> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Unicode", "es": "es/Gu\u00eda_JavaScript_1.5/Unicode", "fr": "fr/Guide_JavaScript_1.5/Unicode", "ja": "ja/Core_JavaScript_1.5_Guide/Unicode", "ko": "ko/Core_JavaScript_1.5_Guide/Unicode", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Unicode" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/grammar_and_types_5c6f30ff8e011c45a011b9c8f3b5bcea/index.html b/files/zh-tw/conflicting/web/javascript/guide/grammar_and_types_5c6f30ff8e011c45a011b9c8f3b5bcea/index.html new file mode 100644 index 0000000000..bea630e438 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/grammar_and_types_5c6f30ff8e011c45a011b9c8f3b5bcea/index.html @@ -0,0 +1,30 @@ +--- +title: 值 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/值 +translation_of: Web/JavaScript/Guide/Grammar_and_types +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Values +--- +<p> </p> +<h3 id="值" name="值">值</h3> +<p>JavaScript 識別下列值的類型︰</p> +<ul> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/%E6%95%B8%E5%80%BC" title="zh tw/Core JavaScript 1.5 參考/全域物件/數值">數值</a>，如 42 或 3.14159</li> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/%E5%B8%83%E6%9E%97" title="zh tw/Core JavaScript 1.5 參考/全域物件/布林">邏輯值（布林）</a>，<code>true</code> 或 <code>false</code></li> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/%E5%AD%97%E4%B8%B2" title="zh tw/Core JavaScript 1.5 參考/全域物件/字串">字串</a>，如 "Howdy!"</li> <li><code>null</code>，用來表示空值的特殊關鍵字；<code>null</code> 也是一個原始值。由於 JavaScript 區分大小寫，<code>null</code> 與 <code>Null</code>、<code>NULL</code> 等變體並不相同</li> <li><code><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E5%B1%AC%E6%80%A7/undefined" title="zh tw/Core JavaScript 1.5 參考/全域屬性/undefined">undefined</a></code>，一個值為未定義的頂級屬性；<code>undefined</code> 也是一個原始值。</li> +</ul> +<p>這是相對來說比較小的一組值的類型，也就是<em>資料類型</em>，可讓你的應用程式發揮出有用的功能。整數和實數之間並沒有明顯的區別。在 JavaScript 中也沒有明確的日期資料類型。不過你還是可以使用 <code><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/%E6%97%A5%E6%9C%9F" title="zh tw/Core JavaScript 1.5 參考/全域物件/日期">Date</a></code> 物件及其方法來處理日期。<a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/%E7%89%A9%E4%BB%B6" title="zh tw/Core JavaScript 1.5 參考/全域物件/物件">物件</a> 和 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/%E5%87%BD%E6%95%B8" title="zh tw/Core JavaScript 1.5 參考/全域物件/函數">函數</a> 也是語言的基礎元素。你可以把物件想成已命名的值的容器，而函數是使程式可以執行的處理程序。</p> +<h4 id="資料類型的轉換" name="資料類型的轉換">資料類型的轉換</h4> +<p>JavaScript 是動態類型的語言。這表示當你宣告變數時，你不必指定變數的資料類型，而且資料類型會在 Script 執行過程中按需要自動的轉換。所以，舉例如下，你可以如下定義變數︰</p> +<pre class="brush: js">var answer = 42; +</pre> +<p>然後，你可以把字串值代入給值，如下︰</p> +<pre>answer = "Thanks for all the fish..."; +</pre> +<p>因為 JavaScript 的類型是動態的，這個代入的代碼不會引起錯誤訊息。</p> +<p>在含有數值和字串值並介以 + 運算子的表達式中，JavaScript 把數值轉換為字串。例如，考慮下面的語句︰</p> +<pre class="eval">x = "The answer is " + 42 // 返回 "The answer is 42" +y = 42 + " is the answer" // 返回 "42 is the answer" +</pre> +<p>在含有其他運算子的語句裡，JavaScript 不會把數值轉換為字串。例如︰</p> +<pre class="eval">"37" - 7 // 返回 30 +"37" + 7 // 返回 "377" +</pre> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:JavaScript_概要", "Core_JavaScript_1.5_教學:變數") }}</p> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Values", "es": "es/Gu\u00eda_JavaScript_1.5/Valores", "fr": "fr/Guide_JavaScript_1.5/Valeurs", "ja": "ja/Core_JavaScript_1.5_Guide/Values", "ko": "ko/Core_JavaScript_1.5_Guide/Values", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Warto\u015bci", "zh-cn": "cn/Core_JavaScript_1.5_Guide/Values" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/grammar_and_types_d57082c2207b466127d8dc34a980addf/index.html b/files/zh-tw/conflicting/web/javascript/guide/grammar_and_types_d57082c2207b466127d8dc34a980addf/index.html new file mode 100644 index 0000000000..0c66b79359 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/grammar_and_types_d57082c2207b466127d8dc34a980addf/index.html @@ -0,0 +1,118 @@ +--- +title: 字面表達 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/字面表達 +translation_of: Web/JavaScript/Guide/Grammar_and_types +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Literals +--- +<p> </p> +<h3 id="字面表達" name="字面表達">字面表達</h3> +<p>你在 JavaScript 使用字面表達來表示值。這是由你在 Script 中<em>直接寫下</em>的固定值，這些不是變數。本節說明下列各類型的字面表達︰</p> +<ul> <li>{{ Anch("陣列的字面表達") }}</li> <li>{{ Anch("布林的字面表達") }}</li> <li>{{ Anch("整數") }}</li> <li>{{ Anch("浮點數的字面表達") }}</li> <li>{{ Anch("物件的字面表達") }}</li> <li>{{ Anch("字串的字面表達") }}</li> +</ul> +<h4 id="陣列的字面表達" name="陣列的字面表達">陣列的字面表達</h4> +<p>陣列的字面表達是以零個以上的表達式所構成的列表，列表的每一項代表陣列的元素，以方括號 ([]) 包夾。當你使用陣列的字面表達建立陣列時，陣列會以指定的值作為元素來初始化，也會以指定的參數個數來設定陣列的長度。</p> +<p>以下範例以三個元素和長度建立 <code>coffees</code> 陣列︰</p> +<pre class="eval">var coffees = ["French Roast", "Colombian", "Kona"]; +</pre> +<p><strong>附註:</strong> 陣列的字面表達是物件初始化子的一種類型。參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%BB%BA%E7%AB%8B%E6%96%B0%E7%9A%84%E7%89%A9%E4%BB%B6/%E7%89%A9%E4%BB%B6%E5%88%9D%E5%A7%8B%E5%8C%96%E5%AD%90%E7%9A%84%E4%BD%BF%E7%94%A8" title="zh tw/Core JavaScript 1.5 教學/建立新的物件/物件初始化子的使用">物件初始化子的使用</a>。</p> +<p>如果在頂層 Script 裡使用字面表達建立陣列，每一次對含有陣列的字面表達的表達式求值時，JavaScript 就會解譯這些陣列。此外，每一次呼叫函數時，在函數中使用的字面表達就會被建立。</p> +<p>陣列的字面表達也是 Array 物件。參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E6%A0%B8%E5%BF%83%E7%89%A9%E4%BB%B6/Array_%E7%89%A9%E4%BB%B6" title="zh tw/Core JavaScript 1.5 教學/預先定義的核心物件/Array 物件">Array 物件</a> 取得有關 Array 物件的細節。</p> +<p><strong>陣列的字面表達的額外的逗號</strong></p> +<p>你不必在陣列的字面表達中指定所有的元素。如果你放上兩個連續的逗號，就會為未指定的元素預留空間來建立陣列。以下範例建立 <code>fish</code> 陣列︰</p> +<pre class="eval">var fish = ["Lion", , "Angel"]; +</pre> +<p>這個陣列含有兩個附有值的元素和一個空的元素（<code>fish{{ mediawiki.external(0) }}</code> 是“Lion”，<code>fish{{ mediawiki.external(1) }}</code> 是 <code>undefined</code>，<code>fish{{ mediawiki.external(2) }}</code> 是“Angel”）。</p> +<p>如果你在元表列表的尾部附帶逗號，這個逗號會被忽略。在下面的範例中，陣列的長度是 3，這裡不存在 <code>myList{{ mediawiki.external(3) }}</code>。所在位於列表裡面的逗號指的都是新的元素。</p> +<pre class="eval">var myList = ['home', , 'school', ]; +</pre> +<p>在下面的範例中，陣列的長度是 4，<code>myList{{ mediawiki.external(0) }}</code> 和 <code>myList{{ mediawiki.external(2) }}</code> 是空的。</p> +<pre class="eval">var myList = [ , 'home', , 'school']; +</pre> +<p>在下面的範例中，陣列的長度是 4，<code>myList{{ mediawiki.external(1) }}</code> 和 <code>myList{{ mediawiki.external(3) }}</code> 是空的。只有最後面的逗號被忽略。</p> +<pre class="eval">var myList = ['home', , 'school', , ]; +</pre><h4 id="布林的字面表達" name="布林的字面表達">布林的字面表達</h4> +<p>布林類型有兩種字面表達︰<code>true</code> 和 <code>false</code>。</p> +<p>別被原始布林值的 <code>true</code>、<code>false</code> 和 Boolean 物件的 true、false 的值混淆了。Boolean 物件是以原始布林資料類型包裝起來的。參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E6%A0%B8%E5%BF%83%E7%89%A9%E4%BB%B6/Boolean_%E7%89%A9%E4%BB%B6" title="zh tw/Core JavaScript 1.5 教學/預先定義的核心物件/Boolean 物件">Boolean 物件</a> 取得更多資訊。</p><h4 id="整數" name="整數">整數</h4> +<p>整數可以表示為十進制、十六進制、八進制。十進制整數的字面表達由一系列不以 0 開頭的數字組成。以 0 開頭的整數的字面表達表示他是八進制，以 0x（或 0X）開頭表示十六進制。十六進制整數可以包含數字 (0-9) 和 a-f 和 A-F 的字母。八進制整數只可以包含 0-7 的數字。</p> +<p>八進制整數的字面表達在 ECMA-262 第三版的標準中已不被推薦。JavaScript 1.5 為了向後相容，仍然繼續支援。</p> +<p>整數的字面表達的一些範例︰</p> +<pre class="eval">0、117、-345（十進制） +015、0001、-077（八進制） +0x1123、0x00111、-0xF1A7（十六進制） +</pre> +<h4 id="浮點數的字面表達" name="浮點數的字面表達">浮點數的字面表達</h4> +<p>浮點數的字面表達可分為以下部分︰</p> +<ul> <li>可帶正負號的十進制整數（在前面加上“+”或“-”），</li> <li>小數點（“.”），</li> <li>小數部分（十進制數），</li> <li>指數部分。</li> +</ul> +<p>指數部分是以一個“e”或“E”後接數字所組成，可帶正負符號（在前面加上“+”或“-”）。浮點數的字面表達至少必須要有一個數字和一個小數點或“e”（或“E”）。</p> +<p>浮點數的字面表達的一些範例有 3.1415、-3.1E12、.1e12、2E-12。</p> +<p>表示成更精簡的語法結構是︰</p> +<pre class="eval">[digits][.digits][(E|e)[(+|-)]digits] +</pre> +<p>例如︰</p> +<pre class="eval">3.14 +2345.789 +.3333333333333333333 +</pre> +<h4 id="物件的字面表達" name="物件的字面表達">物件的字面表達</h4> +<p>物件的字面表達是以零個以上的 屬性名稱-關聯值 的配對所構成，以花括號 ({}) 包夾。你不應該在語句的開始處使用物件的字面表達。這會導致錯誤，或出現非預期的行為，因為 { 會被解譯成區塊的開始處。</p> +<p>以下是物件的字面表達的範例。<code>car</code> 物件的第一個元素定義了 <code>myCar</code> 屬性；第二個元素，<code>getCar</code> 屬性，含有函數 <code>(CarTypes("Honda"));</code>；第三個元素，<code>special</code> 屬性，使用了現存的變數（<code>Sales</code>）。</p> +<pre class="eval">var Sales = "Toyota"; + +function CarTypes(name) { + if (name == "Honda") + return name; + else + return "Sorry, we don't sell " + name + "."; +} + +var car = { myCar: "Saturn", getCar: CarTypes("Honda"), special: Sales }; + +document.write(car.myCar); // Saturn +document.write(car.getCar); // Honda +document.write(car.special); // Toyota +</pre> +<p>此外，你可以使用數值或字串的字面表達作為屬性的名稱，或者嵌入其他的物件。以下是上述的範例。</p> +<pre class="eval">var car = { manyCars: {a: "Saab", b: "Jeep"}, 7: "Mazda" }; + +document.write(car.manyCars.b); // Jeep +document.write(car[7]); // Mazda +</pre> +<p>請注意︰</p> +<pre class="eval">var foo = {a: "alpha", 2: "two"}; +document.write(foo.a); // alpha +document.write(foo[2]); // two +//document.write(foo.2); // 錯誤: 參數列表後面少了 ) +//document.write(foo[a]); // 錯誤: a 尚未定義 +document.write(foo["a"]); // alpha +document.write(foo["2"]); // two +</pre><h4 id="字串的字面表達" name="字串的字面表達">字串的字面表達</h4> +<p>字串的字面表達是以零個以上的字元所構成，並以雙引號 (") 或單引號 (') 包夾。字串必須以相同的引號包夾，也就是成對的單、雙引號。以下是字串的字面表達的範例︰</p> +<ul> <li>"blah"</li> <li>'blah'</li> <li>"1234"</li> <li>"one line \n another line"</li> <li>"John's cat"</li> +</ul> +<p>你可以在字串的字面表達的值上呼叫 String 物件的所有方法—JavaScript 會自動的把字串的字面表達轉換成臨時的 String 物件，呼叫方法，然後丟棄臨時的 String 物件。你也可以使用 <code>String.length</code> 屬性︰</p> +<ul> <li>"John's cat".length</li> +</ul> +<p>除非你特別使用 String 物件，否則就應該使用字串的字面表達。參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E6%A0%B8%E5%BF%83%E7%89%A9%E4%BB%B6/String_%E7%89%A9%E4%BB%B6" title="zh tw/Core JavaScript 1.5 教學/預先定義的核心物件/String 物件">String 物件</a> 取得有關 String 物件的細節。</p> +<h5 id="在字串中使用特殊字元" name="在字串中使用特殊字元">在字串中使用特殊字元</h5> +<p>除了普通的字元以外，你也可以在字串中包含特殊字元，如下範例︰</p> +<pre class="eval">"one line \n another line" +</pre> +<p>下表列出了你可以使用於 JavaScript 字串中的特殊字元。</p> +<table class="fullwidth-table"> <tbody> <tr> <th>字元</th> <th>意義</th> </tr> <tr> <td>\b</td> <td>後退一格</td> </tr> <tr> <td>\f</td> <td>換頁</td> </tr> <tr> <td>\n</td> <td>換行</td> </tr> <tr> <td>\r</td> <td>歸位</td> </tr> <tr> <td>\t</td> <td>Tab</td> </tr> <tr> <td>\v</td> <td>垂直 Tab</td> </tr> <tr> <td>\'</td> <td>單引號</td> </tr> <tr> <td>\"</td> <td>雙引號</td> </tr> <tr> <td>\\</td> <td>反斜線 (\)。</td> </tr> <tr> <td>\<em>XXX</em></td> <td>使用介於 0 至 377 之間的三個八進制數 <em>XXX</em> 來表示以 Latin-1 編碼的字元。例如，\251 是版權符號的八進制內碼序列。</td> </tr> <tr> <td>\x<em>XX</em></td> <td>使用介於 00 至 FF 之間的兩個十六進制數 <em>XX</em> 來表示以 Latin-1 編碼的字元。例如，\xA9 是版權符號的十六進制內碼序列。</td> </tr> <tr> <td>\u<em>XXXX</em></td> <td>使用四個十六進制數 <em>XXXX</em> 來表示 Unicode 字元。例如，\u00A9 是版權符號的 Unicode 內碼序列。參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/Unicode#Unicode_%E7%9A%84%E8%B7%B3%E8%84%AB%E5%BA%8F%E5%88%97" title="zh tw/Core JavaScript 1.5 教學/Unicode#Unicode 的跳脫序列">Unicode 的跳脫序列</a>。</td> </tr> </tbody> +</table> +<p><small><strong>表 2.1: JavaScript 的特殊字元</strong></small></p> +<h5 id="字元的跳脫" name="字元的跳脫">字元的跳脫</h5> +<p>對於未列在表 2.1 的字元，加在前面的反斜線將會被忽略，但是這個作法已被建議廢除，應該要避免。</p> +<p>你可以在字串裡面的引號前面插入反斜線。這就是引號的<em>跳脫</em>。例如︰</p> +<pre class="eval">var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service."; +document.write(quote); +</pre> +<p>結果會是︰</p> +<pre class="eval">He read "The Cremation of Sam McGee" by R.W. Service. +</pre> +<p>要在字串裡包含反斜線，你必須跳脫反斜線字元。例如，要把檔案路徑 <code>c:\temp</code> 代入成字串，方法如下︰</p> +<pre class="eval">var home = "c:\\temp"; +</pre> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:常數", "Core_JavaScript_1.5_教學:Unicode") }}</p> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Literals", "es": "es/Gu\u00eda_JavaScript_1.5/Literales", "fr": "fr/Guide_JavaScript_1.5/Constantes_litt\u00e9rales", "ja": "ja/Core_JavaScript_1.5_Guide/Literals", "ko": "ko/Core_JavaScript_1.5_Guide/Literals", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Litera\u0142y", "zh-cn": "cn/Core_JavaScript_1.5_Guide/\u6587\u672c\u5316" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/grammar_and_types_e5a53691c318855e3342ad91feb78f2e/index.html b/files/zh-tw/conflicting/web/javascript/guide/grammar_and_types_e5a53691c318855e3342ad91feb78f2e/index.html new file mode 100644 index 0000000000..9eedc7a21a --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/grammar_and_types_e5a53691c318855e3342ad91feb78f2e/index.html @@ -0,0 +1,28 @@ +--- +title: 常數 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/常數 +translation_of: Web/JavaScript/Guide/Grammar_and_types +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Constants +--- +<p> </p> +<h3 id="常數" name="常數">常數</h3> +<p>你可以使用 <code><a href="/en/Core_JavaScript_1.5_Reference/Statements/const" title="en/Core_JavaScript_1.5_Reference/Statements/const">const</a></code> 關鍵字建立唯讀的常數。常數識別子的語法和變數識別子的相同︰以字母或底線開頭，可以包含字母、數值、底線字元。</p> +<pre class="eval">const prefix = '212'; +</pre> +<p>在 Script 執行時，常數不可以藉由代入或重新宣告來改變值。</p> +<p>常數的作用域規則和變數一樣，除了 <code>const</code> 關鍵字即使是全域常數也一直是必要的。如果省略了關鍵字，識別子就會被認定為變數。</p> +<p>你不可以在同一個作用域裡，使用和函數或變數的同樣的名稱來宣告常數。例如︰</p> +<pre class="eval">// 這會引起錯誤 +function f() {}; +const f = 5; + +// 這也會引起錯誤 +function f() { + const g = 5; + var g; + + //其他語句 +} +</pre> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:變數", "Core_JavaScript_1.5_教學:字面表達") }}</p> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Constants", "es": "es/Gu\u00eda_JavaScript_1.5/Constantes", "fr": "fr/Guide_JavaScript_1.5/Constantes", "ja": "ja/Core_JavaScript_1.5_Guide/Constants", "ko": "ko/Core_JavaScript_1.5_Guide/Constants", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Sta\u0142e" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/grammar_and_types_ef6fc79abc28f5eadd6c126341df5e49/index.html b/files/zh-tw/conflicting/web/javascript/guide/grammar_and_types_ef6fc79abc28f5eadd6c126341df5e49/index.html new file mode 100644 index 0000000000..151736f40c --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/grammar_and_types_ef6fc79abc28f5eadd6c126341df5e49/index.html @@ -0,0 +1,57 @@ +--- +title: 變數 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/變數 +translation_of: Web/JavaScript/Guide/Grammar_and_types +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Variables +--- +<p> </p> +<h3 id="變數" name="變數">變數</h3> +<p>你會在你的應用程式中使用變數作為值的名稱。變數的名稱稱為<em>識別子</em>，並遵守以下規則。</p> +<p>JavaScript 識別子必須以字母、底線 (_)、美金符號 ($) 開頭；之後的字元就可以使用數字 (0-9)。因為 JavaScript 區分大小寫，字母包括從“A”到“Z”的字元（大寫）和從“a”到“z”的字元（小寫）。</p> +<p>從 JavaScript 1.5 開始，你可以在識別子中使用 ISO 8859-1 或 Unicode 字母，如 å、ü。你也可以使用表列於 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/Unicode#Unicode_%E8%B7%B3%E8%84%AB%E5%BA%8F%E5%88%97" title="zh tw/Core JavaScript 1.5 教學/Unicode#Unicode 跳脫序列">Unicode 跳脫序列</a> 頁面的 \uXXXX 的 Unicode 跳脫序列作為識別子。</p> +<p>合規則的名稱例子有 <code>Number_hits</code>、<code>temp99</code> 和 <code>_name</code>。</p> +<h4 id="變數的宣告" name="變數的宣告">變數的宣告</h4> +<p>你可以使用兩個方法宣告變數︰</p> +<ul> <li>使用關鍵字 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E8%AA%9E%E6%B3%95/var" title="zh tw/Core JavaScript 1.5 參考/語法/var">var</a>。例如，<code>var x = 42</code>。這個語法也可用於宣告 <a class="internal" href="/#%E8%AE%8A%E6%95%B8%E7%9A%84%E4%BD%9C%E7%94%A8%E5%9F%9F" title="#變數的作用域">局域和全域</a> 變數。</li> <li>只需簡單的把值代給他。例如，<code>x = 42</code>。這只能宣告 <a class="internal" href="/#%E5%85%A8%E5%9F%9F%E8%AE%8A%E6%95%B8" title="#全域變數">全域變數</a>，並引起嚴格的 JavaScript 警告。你不應該使用這個方法。</li> +</ul> +<h4 id="變數的求值" name="變數的求值">變數的求值</h4> +<p>使用 <code>var</code> 語法宣告、且沒有初始值的變數，這個變數的值是 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E5%B1%AC%E6%80%A7/undefined" title="zh tw/Core JavaScript 1.5 參考/全域屬性/undefined">undefined</a>。</p> +<p>企圖存取未宣告的變數，將導致 ReferenceError 例外的拋出︰</p> +<pre class="eval">var a; +print("The value of a is " + a); // 輸出 "a 的值是 undefined" +print("The value of b is " + b); // 拋出 ReferenceError 例外 +</pre> +<p>你可以使用 <code>undefined</code> 確認變數是否有值。在下列代碼中，變數 <code>input</code> 尚未代入值，所以 <code><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E8%AA%9E%E6%B3%95/if...else" title="zh tw/Core JavaScript 1.5 參考/語法/if...else">if</a></code> 語法求出的是 <code>true</code>。</p> +<pre class="eval">var input; +if(input === undefined){ + doThis(); +} else { + doThat(); +} +</pre> +<p>在用於布林邏輯時，<code>undefined</code> 值會被視為 <code>false</code>。例如，下面的代碼會執行函數 <code>myFunction</code>，因為 <code>myArray</code> 元素尚未定義︰</p> +<pre class="eval">var myArray = new Array(); +if (!myArray[0]) myFunction(); +</pre> +<p>當你對 null 變數求值時，null 值在用於數值時會被視為 0，而在用於布林邏輯時則視為 false。例如︰</p> +<pre class="eval">var n = null; +print(n * 32); // 輸出 0 +</pre><h4 id="變數的作用域" name="變數的作用域">變數的作用域</h4> +<p>當你在任何函數之外宣告變數時，這個變數就稱為<em>全域</em>變數，因為這個變數可以在整份文件中的任何代碼裡使用。當你在函數之內宣告變數時，這個變數就稱為<em>局域</em>變數，因為這個變數只能在函數之內使用。</p> +<p>JavaScript 的 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%8D%80%E5%A1%8A%E8%AA%9E%E6%B3%95#%E5%8D%80%E5%A1%8A%E8%AA%9E%E6%B3%95" title="zh tw/Core JavaScript 1.5 教學/區塊語法#區塊語法">區塊語法</a> 並沒有作用域；在區塊之內的代碼不會是局域的。例如在下面的代碼中，如果 <code>condition</code> 是 <code>false</code>，結果會輸出 <code>0</code>，而不是拋出例外︰</p> +<pre class="eval">if (condition) { + var x = 5; +} +print(x ? x : 0); +</pre> +<p>另一個在 JavaScript 中關於變數的獨特行為是，你可以參考稍後才會宣告的變數，而不會引起例外︰</p> +<pre class="eval">print(x === undefined); // 輸出 "true" +var x = 3; +</pre> +<h4 id="全域變數" name="全域變數">全域變數</h4> +<p>全域變數其實就是<em>全域物件</em>的屬性。在 Web 頁面中，全域物件是 <a class="internal" href="/zh_tw/DOM/window" title="zh tw/DOM/window">window</a>，所以你可以使用 <code>window.<em>variable</em></code> 語法設定並存取全域變數。</p> +<p>因此，你可以從另一個視窗或框架，藉由指定視窗或框架的名稱，來存取宣告在視窗或框架裡的全域變數。例如，如果有一個稱為 <code>phoneNumber</code> 的變數是在 <code>FRAMESET</code> 文件中宣告，你可以從名為 <code>parent.phoneNumber</code> 的子框架參考這個變數。</p> +<h4 id="參閱" name="參閱">參閱</h4> +<p><a href="/en/Sharp_variables_in_JavaScript" title="en/Sharp_variables_in_JavaScript"> JavaScript 的 Sharp 變數</a></p> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:值", "Core_JavaScript_1.5_教學:常數") }}</p> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Variables", "es": "es/Gu\u00eda_JavaScript_1.5/Variables", "fr": "fr/Guide_JavaScript_1.5/Variables", "ja": "ja/Core_JavaScript_1.5_Guide/Variables", "ko": "ko/Core_JavaScript_1.5_Guide/Variables", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Zmienne", "zh-cn": "cn/Core_JavaScript_1.5_Guide/\u53d8\u91cf" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/index.html b/files/zh-tw/conflicting/web/javascript/guide/index.html new file mode 100644 index 0000000000..7f8133da58 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/index.html @@ -0,0 +1,452 @@ +--- +title: 陣列的運用 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/陣列的運用 +translation_of: Web/JavaScript/Guide +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Working_with_Arrays +--- +<p>陣列是值的有序序列。有別於其他的語言，JavaScript 並沒有明確的陣列資料類型。取而代之，提供了 <code>Array</code> 物件，可以直接實體化或使用陣列的字面表達記法。</p> + +<p>Array 物件有以各種方式操作陣列的方法，如合併、反轉、排序。他有一個用來指定陣列長度的屬性。JavaScript 也提供有用的陣列的字面表達語法，用來建立這些物件。</p> + +<h3 id="陣列的建立" name="陣列的建立">陣列的建立</h3> + +<p>陣列可以使用字面表達語法（通常是首選）或使用 Array 的建構子（也可以稱作函數，兩者行為完全相同）來建立︰</p> + +<pre class="eval">var colors = ["Red", "Green", "Blue"]; +var colors = new Array("Red", "Green", "Blue"); +var colors = Array("Red", "Green", "Blue"); +</pre> + +<p>陣列具有 length 屬性，提供來存取陣列的長度。如果你使用上述其中一個例子來初始化陣列，陣列的長度將會是 3︰</p> + +<pre class="eval">print(colors.length); // 3 +</pre> + +<p>在建立陣列的時候，如果你知道你的陣列的預期長度，你可以給 Array 的建構子傳入長度︰</p> + +<pre class="eval">var fiveItems = new Array(5); +</pre> + +<p>明確定義長度並不會影響陣列的實際容量；這樣只會影響新陣列的 <code>length</code> 屬性。（陣列本身並沒有小於指定值的索引的屬性。）構建子的變體極少使用到。</p> + +<p>JavaScript 1.7 引入陣列的簡約式作為建立新陣列的捷徑；<a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%99%A3%E5%88%97%E7%9A%84%E9%81%8B%E7%94%A8#%E9%99%A3%E5%88%97%E7%9A%84%E7%B0%A1%E7%B4%84%E5%BC%8F" title="zh tw/Core JavaScript 1.5 教學/陣列的運用#陣列的簡約式">下面</a> 會討論。</p> + +<h3 id="陣列元素的運用" name="陣列元素的運用">陣列元素的運用</h3> + +<p>你可以透過把值代入給陣列元素的方式儲存陣列。下面是我們的範例 <code>colors</code> 陣列更為完整的實例︰</p> + +<pre class="eval">var colors = []; // 空陣列 +print(colors.length); // 0 + +colors[0] = 'Red'; +colors[1] = 'Green'; +colors[2] = 'Blue'; +print(colors.length); // 3 +</pre> + +<p>附加元素至陣列的末端的常見習慣是使用 <code>array.length</code> 作為索引︰</p> + +<pre class="eval">colors[colors.length] = 'Orange'; +</pre> + +<p>可以使用 <code>array.push()</code> 方法達到同樣效果︰</p> + +<pre class="eval">colors.push('Purple'); +</pre> + +<p>陣列的元素使用元素的索引來存取。陣列是以 0 開始索引，因此陣列中的第一個元素是 0︰</p> + +<pre class="eval">var red = colors[0]; +</pre> + +<p>可以使用各式各樣的陣列方法來存取陣列的元素。例如，<code>pop()</code> 方法移除並返回陣列的最後一個元素︰</p> + +<pre class="eval">var lastElement = colors.pop(); /* colors 的最後一個元素也被移除 */ +</pre> + +<h3 id="理解_length" name="理解_length">理解 length</h3> + +<p>以實作的層級來說，JavaScript 的陣列實際上把元素存放成標準的物件屬性，並使用陣列的索引作為屬性的名稱。<code>length</code> 屬性很特別；他永遠會返回比保存在陣列中的最高索引值再高一的值︰</p> + +<pre class="eval">var cats = []; +cats[30] = ['Dusty']; +print(cats.length); // 31 +</pre> + +<p>你也可以把值代入給 <code>length</code> 屬性。寫下小於陣列中已存放的項目的數目，就會截掉其餘的項目；寫下 0 就完全清空陣列︰</p> + +<pre class="eval">var cats = ['Dusty', 'Misty', 'Twiggy']; +print(cats.length); // 3 + +cats.length = 2; +print(cats); // 輸出 "Dusty,Misty" - Twiggy 被移除了 + +cats.length = 0; +print(cats); // 什麼也沒輸出；cats 陣列是空的 +</pre> + +<h3 id="迭代整個陣列" name="迭代整個陣列">迭代整個陣列</h3> + +<p>常見的操作就是迭代所有陣列的值，並以同樣方式處理每一個值。做到這一點的最簡單的方式如下︰</p> + +<pre class="eval">var colors = ['red', 'green', 'blue']; +for (var i = 0; i < colors.length; i++) { + alert(colors[i]); +} +</pre> + +<p>如果你知道陣列中沒有一個元素會在布林的求值結果中為 false - 如果你的陣列只以 DOM 的結點組成，例如，你可以使用更有效率的習慣︰</p> + +<pre class="eval">var divs = document.getElementsByTagName('div'); +for (var i = 0, div; div = divs[i]; i++) { + /* 以同樣方式處理 div */ +} +</pre> + +<p>這樣可以避免檢查陣列長度的開支，並且確保 div 變數被重新指定到每一次循環的使用中項目，以方便加入。</p> + +<p> <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/Array/forEach" title="zh tw/Core JavaScript 1.5 參考/全域物件/Array/forEach"><code>forEach</code></a> 方法是在 JavaScript 1.6 引入的，提供了另一種迭代陣列的方式︰</p> + +<pre class="eval">var colors = ['red', 'green', 'blue']; +colors.forEach(function(color) { + alert(color); +}); +</pre> + +<p>傳給 <code>forEach</code> 的函數會在陣列中的每一個項目中執行一次，並把陣列的項目傳給函數作為參數。</p> + +<h3 id="Array_的方法" name="Array_的方法">Array 的方法</h3> + +<p><code>Array</code> 物件有以下的方法︰</p> + +<ul> + <li><code>concat</code> 合併兩個陣列，並把新的陣列返回。</li> +</ul> + +<pre class="eval">var a1 = [1, 2, 3]; +var a2 = a1.concat(['a', 'b', 'c']); +print(a2); // 1,2,3,a,b,c +</pre> + +<ul> + <li><code>join(deliminator = ",")</code> 把所有的陣列元素合併成字串。</li> +</ul> + +<pre class="eval">var a = ['Wind', 'Rain', 'Fire']; +print(a.join(' - ')); // "Wind - Rain - Fire" +</pre> + +<ul> + <li><code>pop</code> 移除掉陣列的最後一個元素，並把這個元素返回。</li> +</ul> + +<pre class="eval">var a = [1, 2, 3]; +var last = a.pop(); +print(a); // 1,2 +print(last); // 3 +</pre> + +<ul> + <li><code>push</code> 在陣列的末端加入一個以上的元素，並返回新的陣列長度。</li> +</ul> + +<pre class="eval">var a = [1, 2]; +a.push(3); +print(a); // 1,2,3 +</pre> + +<ul> + <li><code>reverse</code> 反轉陣列元素的順序至適當的位置。</li> +</ul> + +<pre class="eval">var a = [1, 2, 3, 4]; +a.reverse(); +print(a); // 4,3,2,1 +</pre> + +<ul> + <li><code>shift</code> 移除並返回陣列的第一個元素。</li> +</ul> + +<pre class="eval">var a = [1, 2, 3]; +var first = a.shift(); +print(a); // 2,3 +print(first); // 警報 1 +</pre> + +<ul> + <li><code>unshift</code> 在陣列的開頭處加入一個以上的元素，並返回新的陣列長度。</li> +</ul> + +<pre class="eval">var a1 = [1, 2, 3]; +a1.unshift(4); +print(a1); // 4,1,2,3 +</pre> + +<ul> + <li><code>slice (start_index, upto_index)</code> 返回陣列的片斷。</li> +</ul> + +<pre class="eval">var a1 = ['a', 'b', 'c', 'd', 'e']; +var a2 = a1.slice(1, 4); +print(a2); // 警報 b,c,d +</pre> + +<ul> + <li><code>splice(index, count_to_remove, addelement1, addelement2, ...)</code> 加入 和/或 移除陣列的元素，在適當的位置修改。</li> +</ul> + +<pre class="eval">var a = ['a', 'b', 'c', 'd', 'e']; +var removed = a.splice(1, 3, 'f', 'g', 'h', 'i'); +print(removed); // b,c,d +print(a); // a,f,g,h,i,e +</pre> + +<ul> + <li><code>sort</code> 在適當的位置排序陣列的元素。</li> +</ul> + +<pre class="eval">var a = ['Wind', 'Rain', 'Fire']; +a.sort(); +print(a); // Fire,Rain,Wind +</pre> + +<p><code>sort</code> 也可以接受 Callback 函數來決定如何排序陣列的內容。這個函數會對兩個值做比較，並返回下列三個值其中之一︰</p> + +<ul> + <li>如果 a 在排序系統中小於 b，返回 -1（或任意的負數）</li> + <li>如果 a 在排序系統中大於 b，返回 1（或任意的正數）</li> + <li>如果 a 和 b 被認為是相等的，返回 0。</li> +</ul> + +<p>例如，下面的例子會以字串的最後一個字母來排序︰</p> + +<pre class="eval">var a = ['Wind', 'Rain', 'Fire']; +function sortFn(a, b) { + var lastA = a[a.length - 1]; + var lastB = b[b.length - 1]; + if (lastA < lastB) return -1; + if (lastA > lastB) return 1; + if (lastA == lastB) return 0; +} +a.sort(sortFn); +print(a); // Wind,Fire,Rain +</pre> + +<h4 id="於_JavaScript_1.6_引入" name="於_JavaScript_1.6_引入">於 JavaScript 1.6 引入</h4> + +<ul> + <li><code>indexOf(searchElement[, fromIndex)</code> 在陣列中搜尋 <code>searchElement</code> 並返回第一個符合項的索引。</li> +</ul> + +<p> </p> + +<pre class="eval"> var a = ['a', 'b', 'a', 'b', 'a']; + alert(a.indexOf('b')); // 警報 1 + // 現在再試一次，從最後的符合項之後的索引開始 + alert(a.indexOf('b', 2)); // 警報 3 + alert(a.indexOf('z')); // 警報 -1，因為找不到 'z' +</pre> + +<p> </p> + +<ul> + <li><code>lastIndexOf(searchElement[, fromIndex)</code> 類似 <code>indexOf</code>，但是最後面開始往回搜尋。</li> +</ul> + +<p> </p> + +<pre class="eval"> var a = ['a', 'b', 'c', 'd', 'a', 'b']; + alert(a.lastIndexOf('b')); // 警報 5 + // 現在再試一次，從最後的符合項之前的索引開始 + alert(a.lastIndexOf('b', 4)); // 警報 1 + alert(a.lastIndexOf('z')); // 警報 -1 +</pre> + +<p> </p> + +<ul> + <li><code>forEach(callback{{ mediawiki.external(', thisObject') }})</code> 在每一個項目上執行 <code>callback</code>。</li> +</ul> + +<p> </p> + +<pre class="eval"> var a = ['a', 'b', 'c']; + a.forEach(alert); // 依序警報每一個項目 +</pre> + +<p> </p> + +<ul> + <li><code>map(callback{{ mediawiki.external(', thisObject') }})</code> 返回在每一個陣列的項目上執行 <code>callback</code> 所返回的值的新陣列。</li> +</ul> + +<p> </p> + +<pre class="eval"> var a1 = ['a', 'b', 'c']; + var a2 = a1.map(function(item) { return item.toUpperCase(); }); + alert(a2); // 警報 A,B,C +</pre> + +<p> </p> + +<ul> + <li><code>filter(callback{{ mediawiki.external(', thisObject') }})</code> 返回內含在 Callback 中返回為 true 的項目的新陣列。</li> +</ul> + +<p> </p> + +<pre class="eval"> var a1 = ['a', 10, 'b', 20, 'c', 30]; + var a2 = a1.filter(function(item) { return typeof item == 'number'; }); + alert(a2); // 警報 10,20,30 +</pre> + +<p> </p> + +<ul> + <li><code>every(callback{{ mediawiki.external(', thisObject') }})</code> 返回 true，如果 <code>callback</code> 在陣列中的每一項上都返回 true。</li> +</ul> + +<p> </p> + +<pre class="eval"> function isNumber(value) { return typeof value == 'number'; } + var a1 = [1, 2, 3]; + alert(a1.every(isNumber)); // 警報 true + var a2 = [1, '2', 3]; + alert(a2.every(isNumber)); // 警報 false +</pre> + +<p> </p> + +<ul> + <li><code>some(callback{{ mediawiki.external(', thisObject') }})</code> 返回 true，如果 <code>callback</code> 在陣列中至少有一個項目返回為 true。</li> +</ul> + +<p> </p> + +<pre class="eval"> function isNumber(value) { return typeof value == 'number'; } + var a1 = [1, 2, 3]; + alert(a1.some(isNumber)); // 警報 true + var a2 = [1, '2', 3]; + alert(a2.some(isNumber)); // 警報 true + var a3 = ['1', '2', '3']; + alert(a3.some(isNumber)); // 警報 false +</pre> + +<p> </p> + +<p>上面接受 Callback 的方法又稱為<em>迭代方法</em>，因為他們會以同樣的方式迭代整個陣列。其中第二個選用性的參數稱為 <code>thisObject</code>。如果有提供的話，<code>thisObject</code> 會變成 Callback 函數的本體內部的 <code>this</code> 關鍵字的值。</p> + +<p>實際上 Callback 函數會以三個參數來呼叫。第一個是使用中項目的值，第二個是他的陣列索引，第三個是陣列本身的參考。JavaScript 函數會忽略任何沒有在參數列表中命名的參數，因此提供只接受單一參數的 Callback 函數也很安全，如 <code>alert</code>。</p> + +<h4 id="於_JavaScript_1.8_引入" name="於_JavaScript_1.8_引入">於 JavaScript 1.8 引入</h4> + +<ul> + <li><code>reduce(callback[, initialValue)</code> 使用 <code>callback(firstValue, secondValue)</code> 把項目的列表合併成單一的值。</li> +</ul> + +<p> </p> + +<pre class="eval"> var a = [10, 20, 30]; + var total = a.reduce(function(first, second) { return first + second; }, 0); + alert(total) // 警報 60 +</pre> + +<p> </p> + +<ul> + <li><code>reduceRight(callback[, initialValue)</code> 類似 <code>reduce</code>，但是從最後一個元素開始。</li> +</ul> + +<p><code>reduce</code> 和 <code>reduceRight</code> 明顯是迭代陣列的方法中最少的。為了把序列降至單一的值，應該把他們用於遞歸合併兩個值的演算法。</p> + +<h3 id="近似陣列的物件的運用" name="近似陣列的物件的運用">近似陣列的物件的運用</h3> + +<p> 某些 JavaScript 物件，如 <code>document.getElementsByTagName</code> 返回的 NodeList，或者在函數本體內部可以利用的 <code>arguments</code> 物件，表面上看來外觀和行為和陣列很類似，但並未共用所有的方法。例如，<code>arguments</code> 物件提供 <code>length</code> 屬性，但並未實作 <code>forEach</code> 方法。</p> + +<p>在 JavaScript 1.6 中引入的通用陣列，為其他類似陣列的物件提供執行 <code>Array</code> 方法的途徑。每一個標準的陣列方法在 <code>Array</code> 物件本身都有相對應的方法；例如︰</p> + +<pre class="eval"> function alertArguments() { + Array.forEach(arguments, function(item) { + alert(item); + }); + } +</pre> + +<p>這些通用方法可以在舊版本的 JavaScript 中，使用由 JavaScript 函數物件所提供的 call 方法，以更冗長的形式模擬。</p> + +<pre class="eval"> Array.prototype.forEach.call(arguments, function(item) { + alert(item); + }); +</pre> + +<p>陣列的通用方法也可以使用在字串上，因為字串提供的對字元循序存取的方式，和陣列的很類似︰</p> + +<pre class="eval"> Array.forEach("a string", function(char) { + alert(char); + }); +</pre> + +<h3 id="二維陣列" name="二維陣列">二維陣列</h3> + +<p>下面的代碼建立二維陣列。</p> + +<pre>var a = []; +for (i = 0; i < 4; i++) { + a[i] = []; + for (j = 0; j < 4; j++) { + a[i][j] = "[" + i + ", " + j + "]"; + } +} +</pre> + +<p>本例以如下的行來建立陣列︰</p> + +<pre>行 0: [0,0][0,1][0,2][0,3] +行 1: [1,0][1,1][1,2][1,3] +行 2: [2,0][2,1][2,2][2,3] +行 3: [3,0][3,1][3,2][3,3] +</pre> + +<h3 id="陣列的簡約式" name="陣列的簡約式">陣列的簡約式</h3> + +<p>在 JavaScript 1.7 中引入的陣列簡約式（array comprehension），對於以其他內容為基礎來建構新陣列提供了很有用的捷徑。簡約式通常可以用在 <code>map()</code> 和 <code>filter()</code> 呼叫的地方，或是結合這兩者的方式。</p> + +<p>下面的簡約式接收數字的陣列，並建立每一個數字的雙倍的新陣列。</p> + +<pre>var numbers = [1, 2, 3, 4]; +var doubled = [i * 2 for each (i in numbers)]; +alert(doubled); // 警報 2,4,6,8 +</pre> + +<p>這等同於下面的 <code>map()</code> 操作︰</p> + +<pre>var doubled = numbers.map(function(i) { return i * 2; }); +</pre> + +<p>簡約式也可以用於選取符合特定表達式的項目。這是只選取偶數的簡約式︰</p> + +<pre>var numbers = [1, 2, 3, 21, 22, 30]; +var evens = [i for each (i in numbers) if (i % 2 == 0)]; +alert(evens); // 警報 2,22,30 +</pre> + +<p><code>filter()</code> 也可以用於同樣的用途︰</p> + +<pre>var evens = numbers.filter(function(i) { return i % 2 == 0; }); +</pre> + +<p><code>map()</code> 和 <code>filter()</code> 這類型的操作可以合併至單一的陣列簡約式。這是只篩出偶數的簡約式，然後建立內含雙倍數值的新陣列。</p> + +<pre>var numbers = [1, 2, 3, 21, 22, 30]; +var doubledEvens = [i * 2 for each (i in numbers) if (i % 2 == 0)]; +alert(doubledEvens); // 警報 4,44,60 +</pre> + +<p>陣列簡約式的方括號導入了默許的作用域區塊。新的變數（如範例中的 i）會被視為已經使用 <code>let</code> 宣告過了。其意義是不能在簡約式的外部使用這些變數。</p> + +<p>輸入到陣列的簡約式本身並不需要是陣列；也可以使用 <a class="internal" href="/zh_tw/JavaScript_1.7_%E6%96%B0%E9%AE%AE%E4%BA%8B#%E8%BF%AD%E4%BB%A3%E5%99%A8%E5%92%8C%E7%94%A2%E7%94%9F%E5%99%A8" title="zh tw/JavaScript 1.7 新鮮事#迭代器和產生器">迭代器和產生器</a>。</p> + +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:繼承", "Core_JavaScript_1.5_教學:迭代器和產生器") }}</p> + +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Working_with_Arrays" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/regular_expressions/index.html b/files/zh-tw/conflicting/web/javascript/guide/regular_expressions/index.html new file mode 100644 index 0000000000..792eec13b9 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/regular_expressions/index.html @@ -0,0 +1,59 @@ +--- +title: 正規表達式的運用 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/正規表達式的運用 +translation_of: Web/JavaScript/Guide/Regular_Expressions +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Working_with_Regular_Expressions +--- +<ul> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E6%AD%A3%E8%A6%8F%E8%A1%A8%E9%81%94%E5%BC%8F%E7%9A%84%E9%81%8B%E7%94%A8/%E4%BD%BF%E7%94%A8%E6%A8%99%E8%AA%8C%E7%9A%84%E9%80%B2%E9%9A%8E%E6%90%9C%E5%B0%8B" title="zh tw/Core JavaScript 1.5 教學/正則表達式的運用/使用標誌的進階搜尋">使用標誌的進階搜尋</a></li> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E6%AD%A3%E8%A6%8F%E8%A1%A8%E9%81%94%E5%BC%8F%E7%9A%84%E9%81%8B%E7%94%A8/%E6%8B%AC%E5%BC%A7%E5%AD%90%E5%AD%97%E4%B8%B2%E7%9A%84%E6%AF%94%E5%B0%8D%E7%B5%90%E6%9E%9C%E7%9A%84%E9%81%8B%E7%94%A8" title="zh tw/Core JavaScript 1.5 教學/正則表達式的運用/括弧子字串的比對結果的運用">括弧子字串的比對結果的運用</a></li> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E6%AD%A3%E8%A6%8F%E8%A1%A8%E9%81%94%E5%BC%8F%E7%9A%84%E9%81%8B%E7%94%A8/%E6%AD%A3%E8%A6%8F%E8%A1%A8%E9%81%94%E5%BC%8F%E7%9A%84%E7%AF%84%E4%BE%8B" title="zh tw/Core JavaScript 1.5 教學/正規表達式的運用/正規表達式的範例">正規表達式的範例</a></li> +</ul> +<h3 id="正則表達式的運用" name="正則表達式的運用">正規表達式的運用</h3> +<p>RegExp 的 <code>test</code> 和 <code>exec</code> 方法，還有 String 的 <code>match</code>、<code>replace</code>、<code>search</code>、<code>split</code> 方法都有使用到正規表達式。這些方法在 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83" title="zh tw/Core JavaScript 1.5 參考">Core JavaScript 參考</a> 中已有詳細說明。</p> +<table class="fullwidth-table"> <tbody> <tr> <th>方法</th> <th>說明</th> </tr> <tr> <td><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/RegExp/exec" title="zh tw/Core JavaScript 1.5 參考/全域物件/RegExp/exec">exec</a></td> <td>RegExp 的方法，在字串中比對以執行搜尋。他會返回搜尋資訊的陣列。</td> </tr> <tr> <td><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/RegExp/test" title="zh tw/Core JavaScript 1.5 參考/全域物件/RegExp/test">test</a></td> <td>RegExp 的方法，在字串中比對以進行測試。他會返回 true 或 false。</td> </tr> <tr> <td><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/String/match" title="zh tw/Core JavaScript 1.5 參考/全域物件/String/match">match</a></td> <td>String 的方法，在字串中比對以執行搜尋。他會返回搜尋資訊的陣列，或在比對不出時返回 null。</td> </tr> <tr> <td><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/String/search" title="zh tw/Core JavaScript 1.5 參考/全域物件/String/search">search</a></td> <td>String 的方法，在字串中比對以進行測試。他會返回符合比對的索引，或在搜尋失敗時返回 -1。</td> </tr> <tr> <td><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/String/replace" title="zh tw/Core JavaScript 1.5 參考/全域物件/String/replace">replace</a></td> <td>String 的方法，在字串中比對以執行搜尋，並以其他子字串取代符合比對的子字串。</td> </tr> <tr> <td><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/String/split" title="zh tw/Core JavaScript 1.5 參考/全域物件/String/split">split</a></td> <td>String 的方法，使用正規表達式或固定的字串，把字串分割為子字串的陣列。</td> </tr> </tbody> +</table> +<p><small><strong>表 4.2: 使用了正規表達式的方法</strong></small></p> +<p>當你想知道是否可以在字串裡找出某個模式，可以使用 <code>test</code> 或 <code>search</code> 方法。要更詳細的資訊（不過執行速度也慢）可以使用 <code>exec</code> 或 <code>match</code> 方法。如果你使用 <code>exec</code> 或 <code>match</code> 並且比對成功，這些方法會返回陣列，並更新相關聯的正規表達式物件包括預先定義的 <code>RegExp</code> 的屬性，如果比對失敗，<code>exec</code> 方法返回 <code>null</code>（可轉換為 false）。</p> +<p>在以下的範例中，Script 使用了 <code>exec</code> 方法來在字串裡尋找符合的字串。</p> +<pre><SCRIPT type="text/javascript"> + myRe = /d(b+)d/g; + myArray = myRe.exec("cdbbdbsbz"); +</SCRIPT> +</pre> +<p>如果你不需要存取正規表達式的屬性，另一個建立 <code>myArray</code> 的方式如下 Script︰</p> +<pre><SCRIPT type="text/javascript"> + myArray = /d(b+)d/g.exec("cdbbdbsbz"); +</SCRIPT> +</pre> +<p>如果你想要從字串來建構正規表達式，還有其他選擇如下 Script︰</p> +<pre><SCRIPT type="text/javascript"> + myRe = new RegExp ("d(b+)d", "g"); + myArray = myRe.exec("cdbbdbsbz"); +</SCRIPT> +</pre> +<p>這些 Script 比對成功並返回陣列，並更新顯示在下表中的屬性。</p> +<table class="fullwidth-table"> <tbody> <tr> <th>物件</th> <th>屬性或索引</th> <th>說明</th> <th>上面的範例</th> </tr> <tr> <td>myArray</td> <td> </td> <td>比對符合的字串和所有已記憶的子字串。</td> <td>{{ mediawiki.external('\"dbbd\", \"bb\"') }}</td> </tr> <tr> <td> </td> <td>index</td> <td>在輸入的字串中比對符合的索引位置。索引從 0 開始。</td> <td>1</td> </tr> <tr> <td> </td> <td>input</td> <td>原始的字串。</td> <td>"cdbbdbsbz"</td> </tr> <tr> <td> </td> <td>{{ mediawiki.external(0) }}</td> <td>最後一次比對符合的字元。</td> <td>"dbbd"</td> </tr> <tr> <td>myRe</td> <td>lastIndex</td> <td>下一個符合項的開始處的索引位置。（這個屬性只在正規表達式使用 g 選項時設定，選項的說明在 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E6%AD%A3%E8%A6%8F%E8%A1%A8%E9%81%94%E5%BC%8F%E7%9A%84%E9%81%8B%E7%94%A8/%E4%BD%BF%E7%94%A8%E6%A8%99%E8%AA%8C%E7%9A%84%E9%80%B2%E9%9A%8E%E6%90%9C%E5%B0%8B" title="zh tw/Core JavaScript 1.5 教學/正則表達式的運用/使用標誌的進階搜尋">使用標誌的進階搜尋</a>。）</td> <td>5</td> </tr> <tr> <td> </td> <td>source</td> <td>模式的文字。在正規表達式建立時更新，而非執行時。</td> <td>"d(b+)d"</td> </tr> </tbody> +</table> +<p><small><strong>表 4.3: 正規表達式的執行結果。</strong></small></p> +<p>如上第二個範例所示，你可以藉由物件的初始化子使用正規表達式，而無需代入到變數裡。然而，如果你這樣做的話，每一次使用的都會是新的正規表達式。因此，如果你使用這個形式而不代入到變數，之後你就沒辦法存取正規表達式的屬性。舉例來說，假設你有這個 Script︰</p> +<pre><SCRIPT type="text/javascript"> + myRe = /d(b+)d/g; + myArray = myRe.exec("cdbbdbsbz"); + document.writeln("The value of lastIndex is " + myRe.lastIndex); +</SCRIPT> +</pre> +<p>Script 顯示︰</p> +<pre>The value of lastIndex is 5 +</pre> +<p>然而，如果你有這個 Script︰</p> +<pre><SCRIPT type="text/javascript"> + myArray = /d(b+)d/g.exec("cdbbdbsbz"); + document.writeln("The value of lastIndex is " + /d(b+)d/g.lastIndex); +</SCRIPT> +</pre> +<p>他會顯示︰</p> +<pre>The value of lastIndex is 0 +</pre> +<p><code>/d(b+)d/g</code> 在兩個語句中是不同的正規表達式物件，也因此各自對 <code>lastIndex</code> 屬性有著不同的變數。如果你需要存取以物件初始化子所建立的正規表達式的屬性，你應該先把他代入到變數裡。</p> +<div class="noinclude"> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:正規表達式模式的編寫", "Core_JavaScript_1.5_教學:正規表達式的運用:括弧子字串的比對結果的運用") }}</p> +</div> +<p>{{ languages( {"en": "en/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions", "es": "es/Gu\u00eda_JavaScript_1.5/Trabajar_con_expresiones_regulares", "fr": "fr/Guide_JavaScript_1.5/Travailler_avec_les_expressions_rationnelles", "ja": "ja/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Praca_z_wyra\u017ceniami_regularnymi" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/regular_expressions_24eb6498b86da57e7fb5337fd8fa04a6/index.html b/files/zh-tw/conflicting/web/javascript/guide/regular_expressions_24eb6498b86da57e7fb5337fd8fa04a6/index.html new file mode 100644 index 0000000000..8abec68f16 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/regular_expressions_24eb6498b86da57e7fb5337fd8fa04a6/index.html @@ -0,0 +1,44 @@ +--- +title: 括弧子字串的比對結果的運用 +slug: >- + Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/正規表達式的運用/括弧子字串的比對結果的運用 +translation_of: Web/JavaScript/Guide/Regular_Expressions#Using_Parenthesized_Substring_Matches +translation_of_original: >- + Web/JavaScript/Guide/Obsolete_Pages/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches +--- +<h4 id="括弧子字串的比對結果的運用" name="括弧子字串的比對結果的運用">括弧子字串的比對結果的運用</h4> +<p>在正規表達式的模式中包含括弧，對應的子比對結果就會被記憶。舉例來說，<code>/a(b)c/</code> 比對字元 'abc' 並把 'b' 記憶起來。若要取回括弧子字串的比對結果，就使用 Array 元素 {{ mediawiki.external(1) }}, ..., {{ mediawiki.external('n') }}。</p> +<p>括弧子字串的可能數目並沒有限制。返回的陣列保留了所有找到的子字串。以下範例解說如何使用括弧子字串的比對結果。</p> +<p><strong>範例 1</strong><br> +以下 Script 使用 <code>replace</code> 方法來置換字串裡的文字。對於那些替換用的文字，Script 使用了 <code>$1</code> 和 <code>$2</code> 來表示第一個和第二個括弧子字串的比對結果。</p> +<pre><script type="text/javascript"> + re = /(\w+)\s(\w+)/; + str = "John Smith"; + newstr = str.replace(re, "$2, $1"); + document.write(newstr); +</script> +</pre> +<p>本例輸出 "Smith, John"。</p> +<p><strong>範例 2</strong><br> +附註: 在 <code>getInfo</code> 函數中，<code>exec</code> 方法是以 () 省略記法所呼叫的，這個記法在 Firefox 可以運作，其他瀏覽器則不一定。</p> +<pre><html> + +<script type="text/javascript"> + function getInfo(field){ + var a = /(\w+)\s(\d+)/(field.value); + window.alert(a[1] + ", your age is " + a[2]); + } +</script> + +Enter your first name and your age, and then press Enter. + +<form> + <input type="text" name="NameAge" onchange="getInfo(this);"> +</form> + +</html> +</pre> +<div class="noinclude"> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:正規表達式的運用", "Core_JavaScript_1.5_教學:正規表達式的運用:使用標誌的進階搜尋") }}</p> +</div> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches", "es": "es/Gu\u00eda_JavaScript_1.5/Trabajar_con_expresiones_regulares/Usar_coincidencias_de_subcadenas_parentizadas", "fr": "fr/Guide_JavaScript_1.5/Travailler_avec_les_expressions_rationnelles/Utilisation_des_parenth\u00e8ses_de_capture", "ja": "ja/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Praca_z_wyra\u017ceniami_regularnymi/U\u017cycie_odpowiedniego_znaku" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/regular_expressions_38b32725e0e3217a5542b1b4ee122407/index.html b/files/zh-tw/conflicting/web/javascript/guide/regular_expressions_38b32725e0e3217a5542b1b4ee122407/index.html new file mode 100644 index 0000000000..2dce68e5a9 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/regular_expressions_38b32725e0e3217a5542b1b4ee122407/index.html @@ -0,0 +1,37 @@ +--- +title: 使用標誌的進階搜尋 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/正規表達式的運用/使用標誌的進階搜尋 +translation_of: Web/JavaScript/Guide/Regular_Expressions +translation_of_original: >- + Web/JavaScript/Guide/Obsolete_Pages/Working_with_Regular_Expressions/Advanced_Searching_With_Flags +--- +<h3 id="使用標誌的進階搜尋" name="使用標誌的進階搜尋">使用標誌的進階搜尋</h3> +<p>正規表達式有四個選用的標誌，這些標誌可用於全域或不分大小寫等的搜尋。若要指明為全域搜尋，就使用 <code>g</code> 標誌。若要指明為區分大小寫來搜尋，就使用 <code>i</code> 標誌。若要指明為在多行中搜尋，就使用 <code>m</code> 標誌。若要進行“定點”搜尋，也就是以目標字串的目前位置為開始點來搜尋，那就使用 <code>y</code> 標誌。這些標誌可以單獨或不分順序混合使用，並作為正規表達式的一部分。</p> +<p>{{ Fx_minversion_note(3, "Firefox 3 新增了對 <code>y</code> 標誌的支援。如果在目標字串的目前位置上比對不成功，<code>y</code> 標誌就會失敗。") }}</p> +<p>要在正規表達式中包含標誌，使用以下語法︰</p> +<pre>re = /pattern/flags +re = new RegExp("pattern", ["flags"]) +</pre> +<p>注意，標誌也是正規表達式整體的一部分。之後就不能新增或移除標誌。</p> +<p>舉例來說，<code>re = /\w+\s/g</code> 建立了可尋找 1 個以上的字元並且後接空白的正規表達式，並找出整個字串的組合部分。</p> +<pre><script type="text/javascript"> + re = /\w+\s/g; + str = "fee fi fo fum"; + myArray = str.match(re); + document.write(myArray); +</script> +</pre> +<p>顯示出 {{ mediawiki.external('\"fee \", \"fi \", \"fo \"') }}。在這個範例中，你可以取代一整行︰</p> +<pre>re = /\w+\s/g; +</pre> +<p>改用︰</p> +<pre>re = new RegExp("\\w+\\s", "g"); +</pre> +<p>得到同樣的結果。</p> +<p><code>m</code> 標誌用來指明輸入的多行字串應該視為多行。如果使用 <code>m</code> 標誌，^ 和 $ 就會在輸入字串裡比對每一行的開始處和結尾處，而非整個字串的開始處和結尾處。</p> +<div class="noinclude"> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:正規表達式的運用:括弧子字串的比對結果的運用", "Core_JavaScript_1.5_教學:正規表達式的運用:正規表達式的範例") }}</p> +</div> +<p> </p> +<p> </p> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions/Advanced_Searching_With_Flags", "es": "es/Gu\u00eda_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejecutar_una_busqueda_global,_discriminar_mayusculas_y_minusculas_y_considerar_entrada_multil\u00ednea", "fr": "fr/Guide_JavaScript_1.5/Travailler_avec_les_expressions_rationnelles/Ex\u00e9cution_de_recherches_globales,_ignorer_la_casse,_utilisation_de_cha\u00eenes_multilignes", "ja": "ja/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions/Advanced_Searching_With_Flags", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Praca_z_wyra\u017ceniami_regularnymi/Globalne_wyszukiwanie,_wielko\u015b\u0107_znak\u00f3w,_wieloliniowe_wej\u015bcie" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide/working_with_objects/index.html b/files/zh-tw/conflicting/web/javascript/guide/working_with_objects/index.html new file mode 100644 index 0000000000..fc10840076 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide/working_with_objects/index.html @@ -0,0 +1,43 @@ +--- +title: 物件和屬性 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/物件和屬性 +translation_of: Web/JavaScript/Guide/Working_with_Objects +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Objects_and_Properties +--- +<p> </p> +<h3 id="物件和屬性" name="物件和屬性">物件和屬性</h3> +<p>JavaScript 的物件連結有屬性。你只需要使用簡單的記法就能存取物件的屬性︰</p> +<pre>objectName.propertyName +</pre> +<p>物件的名稱和屬性的名稱兩者都區分大小寫。你可藉由給他代入值來定義屬性。例如，假設有名為 <code>myCar</code> 的物件（假設物件已經存在）。你可以把他的屬性命名為 <code>make</code>、<code>model</code>、<code>year</code> 如下所示︰</p> +<pre>myCar.make = "Ford"; +myCar.model = "Mustang"; +myCar.year = 1969; +</pre> +<p>JavaScript 物件的屬性也可以使用方括號記法來存取或設定。物件有時又稱為<em>關聯陣列</em>，因為每一個屬性都和字串值連繫在一起，且可以用這些字串值來存取屬性。然後，舉例來說，你可以存取 <code>myCar</code> 物件的屬性如下所示︰</p> +<pre>myCar["make"] = "Ford"; +myCar["model"] = "Mustang"; +myCar["year"] = 1969; +</pre> +<p>你也可以使用儲存在變數裡的字串值來存取屬性︰</p> +<pre>var propertyName = "make"; +myCar[propertyName] = "Ford"; + +propertyName = "model"; +myCar[propertyName] = "Mustang"; +</pre> +<p>你也可以使用括弧和 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E7%89%A9%E4%BB%B6%E7%9A%84%E6%93%8D%E4%BD%9C%E8%AA%9E%E6%B3%95#for...in_%E8%AA%9E%E6%B3%95" title="zh tw/Core JavaScript 1.5 教學/物件的操作語法#for...in 語法">for...in</a> 來迭代物件所有的屬性。為解說這是如何運作的，以下函數用來顯示物件的屬性，當你把物件和物件的名稱作為參數傳給這個函數的時候︰</p> +<pre>function show_props(obj, obj_name) { + var result = ""; + for (var i in obj) + result += obj_name + "." + i + " = " + obj[i] + "\n"; + return result; +} +</pre> +<p>然後，呼叫函數 <code>show_props(myCar, "myCar")</code> 就會返回以下內容︰</p> +<pre>myCar.make = Ford +myCar.model = Mustang +myCar.year = 1969 +</pre> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:閉包的運用", "Core_JavaScript_1.5_教學:建立新的物件") }}</p> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Objects_and_Properties", "es": "es/Gu\u00eda_JavaScript_1.5/Objetos_y_propiedades", "fr": "fr/Guide_JavaScript_1.5/Objets_et_propri\u00e9t\u00e9s", "ja": "ja/Core_JavaScript_1.5_Guide/Objects_and_Properties", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Obiekty_i_w\u0142asno\u015bci" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/guide_dc05b578fe0c2f7d9a89ed82daab4e65/index.html b/files/zh-tw/conflicting/web/javascript/guide_dc05b578fe0c2f7d9a89ed82daab4e65/index.html new file mode 100644 index 0000000000..181d55974e --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/guide_dc05b578fe0c2f7d9a89ed82daab4e65/index.html @@ -0,0 +1,13 @@ +--- +title: 預先定義的核心物件 +slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/預先定義的核心物件 +translation_of: Web/JavaScript/Guide +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Predefined_Core_Objects +--- +<p> </p> +<h3 id="預先定義的核心物件" name="預先定義的核心物件">預先定義的核心物件</h3> +<p>本節解說在核心 JavaScript 裡預先定義的物件︰</p> +<ul> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E6%A0%B8%E5%BF%83%E7%89%A9%E4%BB%B6/Array_%E7%89%A9%E4%BB%B6" title="zh_tw/Core_JavaScript_1.5_教學/預先定義的核心物件/Array_物件">Array 物件</a></li> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E6%A0%B8%E5%BF%83%E7%89%A9%E4%BB%B6/Boolean_%E7%89%A9%E4%BB%B6" title="zh_tw/Core_JavaScript_1.5_教學/預先定義的核心物件/Boolean_物件">Boolean 物件</a></li> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E6%A0%B8%E5%BF%83%E7%89%A9%E4%BB%B6/Date_%E7%89%A9%E4%BB%B6" title="zh_tw/Core_JavaScript_1.5_教學/預先定義的核心物件/Date_物件">Date 物件</a></li> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E6%A0%B8%E5%BF%83%E7%89%A9%E4%BB%B6/Function_%E7%89%A9%E4%BB%B6" title="zh_tw/Core_JavaScript_1.5_教學/預先定義的核心物件/Function_物件">Function 物件</a></li> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E6%A0%B8%E5%BF%83%E7%89%A9%E4%BB%B6/Math_%E7%89%A9%E4%BB%B6" title="zh_tw/Core_JavaScript_1.5_教學/預先定義的核心物件/Math_物件">Math 物件</a></li> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E6%A0%B8%E5%BF%83%E7%89%A9%E4%BB%B6/Number_%E7%89%A9%E4%BB%B6" title="zh_tw/Core_JavaScript_1.5_教學/預先定義的核心物件/Number_物件">Number 物件</a></li> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E6%A0%B8%E5%BF%83%E7%89%A9%E4%BB%B6/RegExp_%E7%89%A9%E4%BB%B6" title="zh_tw/Core_JavaScript_1.5_教學/預先定義的核心物件/RegExp_物件">RegExp 物件</a></li> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E6%A0%B8%E5%BF%83%E7%89%A9%E4%BB%B6/String_%E7%89%A9%E4%BB%B6" title="zh_tw/Core_JavaScript_1.5_教學/預先定義的核心物件/String_物件">String 物件</a></li> +</ul> +<p>{{ PreviousNext("Core_JavaScript_1.5_教學:新物件的建立:屬性的刪除", "Core_JavaScript_1.5_教學:預先定義的核心物件:Array_物件") }}</p> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Predefined_Core_Objects", "es": "es/Gu\u00eda_JavaScript_1.5/Objetos_base_predefinidos", "fr": "fr/Guide_JavaScript_1.5/Objets_pr\u00e9d\u00e9finis", "ja": "ja/Core_JavaScript_1.5_Guide/Predefined_Core_Objects", "ko": "ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Obiekty_predefiniowane" } ) }}</p> diff --git a/files/zh-tw/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html b/files/zh-tw/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html new file mode 100644 index 0000000000..263726d7e0 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html @@ -0,0 +1,111 @@ +--- +title: ArrayBuffer.prototype +slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer +translation_of_original: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype +--- +<div>{{JSRef}}</div> + +<p>The <strong><code>ArrayBuffer.prototype</code></strong> property represents the prototype for the {{jsxref("ArrayBuffer")}} object.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="描述">描述</h2> + +<p><code>ArrayBuffer</code> instances inherit from <code>ArrayBuffer.prototype</code>. As with all constructors, you can change the constructor's prototype object to make changes to all <code>ArrayBuffer</code> instances.</p> + +<h2 id="屬性">屬性</h2> + +<dl> + <dt>ArrayBuffer.prototype.constructor</dt> + <dd>Specifies the function that creates an object's prototype. The initial value is the standard built-in <code>ArrayBuffer</code> constructor.</dd> + <dt>{{jsxref("ArrayBuffer.prototype.byteLength")}} {{readonlyInline}}</dt> + <dd>陣列大小，以位元組（byte）計算。此屬性在陣列建立之後就不可能改變了。<strong>唯讀</strong>。</dd> +</dl> + +<h2 id="方法">方法</h2> + +<dl> + <dt>{{jsxref("ArrayBuffer.prototype.slice()")}}</dt> + <dd>Returns a new <code>ArrayBuffer</code> whose contents are a copy of this <code>ArrayBuffer</code>'s bytes from <code>begin</code>, inclusive, up to <code>end</code>, exclusive. If either <code>begin</code> or <code>end</code> is negative, it refers to an index from the end of the array, as opposed to from the beginning.</dd> +</dl> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>7.0</td> + <td>{{ CompatGeckoDesktop("2")}}</td> + <td>10</td> + <td>11.6</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2")}}</td> + <td>10</td> + <td>11.6</td> + <td>4.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{jsxref("ArrayBuffer")}}</li> +</ul> diff --git a/files/zh-tw/conflicting/web/javascript/reference/global_objects/date/index.html b/files/zh-tw/conflicting/web/javascript/reference/global_objects/date/index.html new file mode 100644 index 0000000000..5490743ec0 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/reference/global_objects/date/index.html @@ -0,0 +1,246 @@ +--- +title: Date.prototype +slug: Web/JavaScript/Reference/Global_Objects/Date/prototype +tags: + - Date + - JavaScript + - 原型 + - 參考資料 + - 屬性 +translation_of: Web/JavaScript/Reference/Global_Objects/Date +translation_of_original: Web/JavaScript/Reference/Global_Objects/Date/prototype +--- +<div>{{JSRef}}</div> + +<p><strong><code>Date.prototype</code></strong> 屬性表示 {{jsxref("Date")}} 建構子的原型。</p> + +<div>{{js_property_attributes(0, 0, 1)}}</div> + +<h2 id="描述">描述</h2> + +<p>JavaScript {{jsxref("Date")}} 實體繼承自 <code>Date.prototype。你可以藉由改變建構子的原型物件，來影響所有繼承自</code> JavaScript {{jsxref("Date")}} 的實體。</p> + +<p>為了千年年份（換個說法，考慮現在已到了 2000 年）的相容性，設定上你應該採用完整的年份。舉例來說，使用 1998 而不是 98 。為了讓你能取得完整的年份資料， Javascript 包含了 {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}} ， {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}} ， {{jsxref("Date.prototype.getUTCFullYear()", "getUTCFullYear()")}} 以及 {{jsxref("Date.prototype.setUTCFullYear()", "setUTCFullYear()")}} 方法。</p> + +<p>自 ECMAScript 6 開始， <code>Date.prototype</code> 物件只是個一般物件，而不是一個 {{jsxref("Date")}} 實體。</p> + +<h2 id="屬性">屬性</h2> + +<dl> + <dt><code>Date.prototype.constructor</code></dt> + <dd>回傳一個能建立實體的函數，這是 {{jsxref("Date")}} 預設的建構子。</dd> +</dl> + +<h2 id="方法">方法</h2> + +<h3 id="Getter">Getter</h3> + +<dl> + <dt>{{jsxref("Date.prototype.getDate()")}}</dt> + <dd>回傳本地時間月份中的日期（1-31）。</dd> + <dt>{{jsxref("Date.prototype.getDay()")}}</dt> + <dd>回傳本地時間星期中的日子（0-6）。</dd> + <dt>{{jsxref("Date.prototype.getFullYear()")}}</dt> + <dd>回傳本地時間的年份（ 以 4 位數表現）。</dd> + <dt>{{jsxref("Date.prototype.getHours()")}}</dt> + <dd>回傳本地時間的小時（0-23）。</dd> + <dt>{{jsxref("Date.prototype.getMilliseconds()")}}</dt> + <dd>回傳本地時間的毫秒數（0-999）。</dd> + <dt>{{jsxref("Date.prototype.getMinutes()")}}</dt> + <dd>回傳本地時間的分鐘數（0-59）。</dd> + <dt>{{jsxref("Date.prototype.getMonth()")}}</dt> + <dd>回傳本地時間的月份（0-11）。</dd> + <dt>{{jsxref("Date.prototype.getSeconds()")}}</dt> + <dd>回傳本地時間的秒數（0-59)。</dd> + <dt>{{jsxref("Date.prototype.getTime()")}}</dt> + <dd>回傳由 1970-01-01 00:00:00 UTC 開始，到代表時間經過的毫秒數（以負值表示 1970 年之前的時間）。</dd> + <dt>{{jsxref("Date.prototype.getTimezoneOffset()")}}</dt> + <dd>回傳本地時差為多少分鐘。</dd> + <dt>{{jsxref("Date.prototype.getUTCDate()")}}</dt> + <dd>回傳標準時間的在月份中的日期（1-31）。</dd> + <dt>{{jsxref("Date.prototype.getUTCDay()")}}</dt> + <dd>回傳標準時間在星期中的日子（0-6）。</dd> + <dt>{{jsxref("Date.prototype.getUTCFullYear()")}}</dt> + <dd>回傳標準時間的年份（ 以 4 位數表現）。</dd> + <dt>{{jsxref("Date.prototype.getUTCHours()")}}</dt> + <dd>回傳標準時間的小時數（0-23）。</dd> + <dt>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</dt> + <dd>回傳標準時間裡的毫秒數（0-999）。</dd> + <dt>{{jsxref("Date.prototype.getUTCMinutes()")}}</dt> + <dd>回傳標準時間的分鐘數（0-59）。</dd> + <dt>{{jsxref("Date.prototype.getUTCMonth()")}}</dt> + <dd>回傳標準時間的月份數（0-11）。</dd> + <dt>{{jsxref("Date.prototype.getUTCSeconds()")}}</dt> + <dd>回傳標準時間的秒數（0-59）。</dd> + <dt>{{jsxref("Date.prototype.getYear()")}} {{deprecated_inline}}</dt> + <dd>回本地時間的年份（通常 2-3 位數）。用 {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}} 取代。</dd> +</dl> + +<h3 id="Setter">Setter</h3> + +<dl> + <dt>{{jsxref("Date.prototype.setDate()")}}</dt> + <dd>設定本地時間月份中的日期。</dd> + <dt>{{jsxref("Date.prototype.setFullYear()")}}</dt> + <dd>設定本地時間的完整年份（以 4 位數表達 4 位數年份）。</dd> + <dt>{{jsxref("Date.prototype.setHours()")}}</dt> + <dd>設定本地時間的小時數。</dd> + <dt>{{jsxref("Date.prototype.setMilliseconds()")}}</dt> + <dd>設定本地時間的毫秒數。</dd> + <dt>{{jsxref("Date.prototype.setMinutes()")}}</dt> + <dd>設定本地時間的分鐘數。</dd> + <dt>{{jsxref("Date.prototype.setMonth()")}}</dt> + <dd>設定本地時間的月份。</dd> + <dt>{{jsxref("Date.prototype.setSeconds()")}}</dt> + <dd>設定本地時間的秒數。</dd> + <dt>{{jsxref("Date.prototype.setTime()")}}</dt> + <dd>設定這個 {{jsxref("Date")}} 物件距 1970-01-01 00:00:00 UTC 的毫秒數，允許使用負值表示之前的時間。</dd> + <dt>{{jsxref("Date.prototype.setUTCDate()")}}</dt> + <dd>設定標準時間月份中的日期。</dd> + <dt>{{jsxref("Date.prototype.setUTCFullYear()")}}</dt> + <dd>設定標準時間的完整年份（以 4 位數表示 4 位數年分）。</dd> + <dt>{{jsxref("Date.prototype.setUTCHours()")}}</dt> + <dd>設定標準時間的小時數。</dd> + <dt>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</dt> + <dd>設定標準時間的毫秒數。</dd> + <dt>{{jsxref("Date.prototype.setUTCMinutes()")}}</dt> + <dd>設定標準時間的分鐘數。</dd> + <dt>{{jsxref("Date.prototype.setUTCMonth()")}}</dt> + <dd>設定標準時間的月份數。</dd> + <dt>{{jsxref("Date.prototype.setUTCSeconds()")}}</dt> + <dd>設定標準時間的秒數。</dd> + <dt>{{jsxref("Date.prototype.setYear()")}} {{deprecated_inline}}</dt> + <dd>設定本地時間的年份（使用 2-3 位數）。使用 {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}} 取代。</dd> +</dl> + +<h3 id="Conversion_getter">Conversion getter</h3> + +<dl> + <dt>{{jsxref("Date.prototype.toDateString()")}}</dt> + <dd>以可閱讀的字串型式，回傳 {{jsxref("Date")}} 的部分資訊。</dd> + <dt>{{jsxref("Date.prototype.toISOString()")}}</dt> + <dd>將日期時間轉換成 ISO 8601 格式的字串回傳。</dd> + <dt>{{jsxref("Date.prototype.toJSON()")}}</dt> + <dd>回傳等義於 {{jsxref("Date")}} 物件使用 {{jsxref("Date.prototype.toISOString()", "toISOString()")}} 方法的結果。特別使用 {{jsxref("JSON.stringify()")}} 處理。</dd> + <dt>{{jsxref("Date.prototype.toGMTString()")}} {{deprecated_inline}}</dt> + <dd>回傳 {{jsxref("Date")}} 以 GMT (UT) 時區基準代表的時間字串。使用 {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}} 方法來取代。</dd> + <dt>{{jsxref("Date.prototype.toLocaleDateString()")}}</dt> + <dd>依照系統的時間地區設定，回傳日期字串。</dd> + <dt>{{jsxref("Date.prototype.toLocaleFormat()")}} {{non-standard_inline}}</dt> + <dd>傳入格式化字串參數，將日期時間轉換成指定格式的字串。</dd> + <dt>{{jsxref("Date.prototype.toLocaleString()")}}</dt> + <dd>回傳依系統的地區設定導出的日期時間字串。覆寫自 {{jsxref("Object.prototype.toLocaleString()")}} 方法。</dd> + <dt>{{jsxref("Date.prototype.toLocaleTimeString()")}}</dt> + <dd>回傳依系統的地區設定導出的時間字串。</dd> + <dt>{{jsxref("Date.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>回傳一個建立相同 {{jsxref("Date")}} 物件的程式碼字串；你可以拿這個結果來建立新物件。覆寫自 {{jsxref("Object.prototype.toSource()")}} 方法。</dd> + <dt>{{jsxref("Date.prototype.toString()")}}</dt> + <dd>回傳代表此 {{jsxref("Date")}} 物件的字串。覆寫自 {{jsxref("Object.prototype.toString()")}} 方法。</dd> + <dt>{{jsxref("Date.prototype.toTimeString()")}}</dt> + <dd>以人類可讀的格式，回傳時間部分的字串。</dd> + <dt>{{jsxref("Date.prototype.toUTCString()")}}</dt> + <dd>依 UTC 時區，轉換出時間日期字串。</dd> + <dt>{{jsxref("Date.prototype.valueOf()")}}</dt> + <dd>回傳 {{jsxref("Date")}} 物件的原始數值。覆寫自 {{jsxref("Object.prototype.valueOf()")}} 方法。</dd> +</dl> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">規範</th> + <th scope="col">狀態</th> + <th scope="col">註</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>初步定義。實作在 JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5', 'Date.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>平台</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本支援</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>一般物件</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("41")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>平台</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本支援</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>一般物件</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("41")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/zh-tw/conflicting/web/javascript/reference/global_objects/function/index.html b/files/zh-tw/conflicting/web/javascript/reference/global_objects/function/index.html new file mode 100644 index 0000000000..718454721b --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/reference/global_objects/function/index.html @@ -0,0 +1,139 @@ +--- +title: Function.prototype +slug: Web/JavaScript/Reference/Global_Objects/Function/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Function +translation_of_original: Web/JavaScript/Reference/Global_Objects/Function/prototype +--- +<div>{{JSRef}}</div> + +<p><code><strong>Function.prototype</strong></code> 屬性表示 {{jsxref("Function")}} 的原型物件。</p> + +<h2 id="描述">描述</h2> + +<p>{{jsxref("Function")}} objects inherit from <code>Function.prototype</code>. <code>Function.prototype</code> cannot be modified.</p> + +<h2 id="屬性">屬性</h2> + +<dl> + <dt>{{jsxref("Function.arguments")}} {{deprecated_inline}}</dt> + <dd>An array corresponding to the arguments passed to a function. This is deprecated as property of {{jsxref("Function")}}, use the {{jsxref("Functions/arguments", "arguments")}} object available within the function instead.</dd> + <dt><s class="obsoleteElement">{{jsxref("Function.arity")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Used to specifiy the number of arguments expected by the function, but has been removed. Use the {{jsxref("Function.length", "length")}} property instead.</s></dd> + <dt>{{jsxref("Function.caller")}} {{non-standard_inline}}</dt> + <dd>Specifies the function that invoked the currently executing function.</dd> + <dt>{{jsxref("Function.length")}}</dt> + <dd>Specifies the number of arguments expected by the function.</dd> + <dt>{{jsxref("Function.name")}}</dt> + <dd>The name of the function.</dd> + <dt>{{jsxref("Function.displayName")}} {{non-standard_inline}}</dt> + <dd>The display name of the function.</dd> + <dt><code>Function.prototype.constructor</code></dt> + <dd>Specifies the function that creates an object's prototype. See {{jsxref("Object.prototype.constructor")}} for more details.</dd> +</dl> + +<h2 id="方法">方法</h2> + +<dl> + <dt>{{jsxref("Function.prototype.apply()")}}</dt> + <dd>Calls a function and sets its <em>this</em> to the provided value, arguments can be passed as an {{jsxref("Array")}} object.</dd> + <dt>{{jsxref("Function.prototype.bind()")}}</dt> + <dd>Creates a new function which, when called, has its <em>this</em> set to the provided value, with a given sequence of arguments preceding any provided when the new function was called.</dd> + <dt>{{jsxref("Function.prototype.call()")}}</dt> + <dd>Calls (executes) a function and sets its <em>this</em> to the provided value, arguments can be passed as they are.</dd> + <dt>{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}</dt> + <dd>Returns <code>true</code> if the function is a <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">generator</a>; otherwise returns <code>false</code>.</dd> + <dt>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Returns a string representing the source code of the function. Overrides the {{jsxref("Object.prototype.toSource")}} method.</dd> + <dt>{{jsxref("Function.prototype.toString()")}}</dt> + <dd>Returns a string representing the source code of the function. Overrides the {{jsxref("Object.prototype.toString")}} method.</dd> +</dl> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.5.2', 'Function.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-instances-prototype', 'Function.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-instances-prototype', 'Function.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/zh-tw/conflicting/web/javascript/reference/global_objects/number/index.html b/files/zh-tw/conflicting/web/javascript/reference/global_objects/number/index.html new file mode 100644 index 0000000000..bfd57f3d21 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/reference/global_objects/number/index.html @@ -0,0 +1,85 @@ +--- +title: Number.prototype +slug: Web/JavaScript/Reference/Global_Objects/Number/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Number +translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype +--- +<div>{{JSRef}}</div> + +<p><strong><code>Number.prototype</code></strong> 屬性用來表示 {{jsxref("Number")}} 建構式的原型。</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="說明">說明</h2> + +<p>所有 {{jsxref("Number")}} 實體都繼承自 <code>Number.prototype</code> 。{{jsxref("Number")}} 建構式的原型物件可以被修改並作用在所有 {{jsxref("Number")}} 實體。</p> + +<h2 id="屬性">屬性</h2> + +<dl> + <dt><code>Number.prototype.constructor</code></dt> + <dd>回傳建立這個物件實體的建構式。預設為 {{jsxref("Number")}} 物件。</dd> +</dl> + +<h2 id="方法">方法</h2> + +<dl> + <dt>{{jsxref("Number.prototype.toExponential()")}}</dt> + <dd>回傳以「科學記數法」表示的數值字串。</dd> + <dt>{{jsxref("Number.prototype.toFixed()")}}</dt> + <dd>回傳以定點表示的數值字串。</dd> + <dt>{{jsxref("Number.prototype.toLocaleString()")}}</dt> + <dd>回傳以當地語言為主的數值字串。這覆寫 {{jsxref("Object.prototype.toLocaleString()")}} 的方法。</dd> + <dt>{{jsxref("Number.prototype.toPrecision()")}}</dt> + <dd>回傳以定點或科學記數表示的數值字串。</dd> + <dt>{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Returns an object literal representing the specified {{jsxref("Number")}} object; you can use this value to create a new object. Overrides the {{jsxref("Object.prototype.toSource()")}} method.</dd> + <dt>{{jsxref("Number.prototype.toString()")}}</dt> + <dd>回傳以特定基數表示的數值字串。這覆寫 {{jsxref("Object.prototype.toString()")}} 的方法 。</dd> + <dt>{{jsxref("Number.prototype.valueOf()")}}</dt> + <dd>回傳這個物件的原始型別，即原始數值。這覆寫 {{jsxref("Object.prototype.valueOf()")}} 。</dd> +</dl> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">規範</th> + <th scope="col">狀態</th> + <th scope="col">註記</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Number.prototype")}}</p> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{jsxref("Number")}}</li> +</ul> diff --git a/files/zh-tw/conflicting/web/javascript/reference/global_objects/object/index.html b/files/zh-tw/conflicting/web/javascript/reference/global_objects/object/index.html new file mode 100644 index 0000000000..4365b10c61 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,219 @@ +--- +title: Object.prototype +slug: Web/JavaScript/Reference/Global_Objects/Object/prototype +tags: + - JavaScript + - Object + - 待翻譯 +translation_of: Web/JavaScript/Reference/Global_Objects/Object +translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.prototype</strong></code> 代表 {{jsxref("Object")}} 的原型物件。</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="描述">描述</h2> + +<p>All objects in JavaScript are descended from {{jsxref("Object")}}; all objects inherit methods and properties from <code>Object.prototype</code>, although they may be overridden (except an <code>Object</code> with a <code>null</code> prototype, i.e. <code>Object.create(null)</code>). For example, other constructors' prototypes override the <code>constructor</code> property and provide their own {{jsxref("Object.prototype.toString()", "toString()")}} methods. Changes to the <code>Object</code> prototype object are propagated to all objects unless the properties and methods subject to those changes are overridden further along the prototype chain.</p> + +<h2 id="屬性">屬性</h2> + +<dl> + <dt>{{jsxref("Object.prototype.constructor")}}</dt> + <dd>Specifies the function that creates an object's prototype.</dd> + <dt>{{jsxref("Object.prototype.__proto__")}} {{non-standard_inline}}</dt> + <dd>Points to the object which was used as prototype when the object was instantiated.</dd> + <dt>{{jsxref("Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}</dt> + <dd>Allows a function to be defined that will be executed when an undefined object member is called as a method.</dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.__count__")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Used to return the number of enumerable properties directly on a user-defined object, but has been removed.</s></dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.__parent__")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Used to point to an object's context, but has been removed.</s></dd> +</dl> + +<h2 id="方法">方法</h2> + +<dl> + <dt>{{jsxref("Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Associates a function with a property that, when accessed, executes that function and returns its return value.</dd> + <dt>{{jsxref("Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Associates a function with a property that, when set, executes that function which modifies the property.</dd> + <dt>{{jsxref("Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Returns the function associated with the specified property by the {{jsxref("Object.defineGetter", "__defineGetter__")}} method.</dd> + <dt>{{jsxref("Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Returns the function associated with the specified property by the {{jsxref("Object.defineSetter", "__defineSetter__")}} method.</dd> + <dt>{{jsxref("Object.prototype.hasOwnProperty()")}}</dt> + <dd>Returns a boolean indicating whether an object contains the specified property as a direct property of that object and not inherited through the prototype chain.</dd> + <dt>{{jsxref("Object.prototype.isPrototypeOf()")}}</dt> + <dd>Returns a boolean indication whether the specified object is in the prototype chain of the object this method is called upon.</dd> + <dt>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</dt> + <dd>Returns a boolean indicating if the internal <a href="/en-US/docs/ECMAScript_DontEnum_attribute" title="ECMAScript_DontEnum_attribute">ECMAScript DontEnum attribute</a> is set.</dd> + <dt>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Returns string containing the source of an object literal representing the object that this method is called upon; you can use this value to create a new object.</dd> + <dt>{{jsxref("Object.prototype.toLocaleString()")}}</dt> + <dd>Calls {{jsxref("Object.toString", "toString()")}}.</dd> + <dt>{{jsxref("Object.prototype.toString()")}}</dt> + <dd>Returns a string representation of the object.</dd> + <dt>{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}</dt> + <dd>Removes a watchpoint from a property of the object.</dd> + <dt>{{jsxref("Object.prototype.valueOf()")}}</dt> + <dd>Returns the primitive value of the specified object.</dd> + <dt>{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}</dt> + <dd>Adds a watchpoint to a property of the object.</dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Used to evaluate a string of JavaScript code in the context of the specified object, but has been removed.</s></dd> +</dl> + +<h2 id="範例">範例</h2> + +<p>因為 JavaScript 並沒有子類別的物件，所以原型是個很有用的解決辦法, 使某些函數作為物件的基本類別物件。例如：</p> + +<pre class="brush: js">var Person = function() { + this.canTalk = true; +}; + +Person.prototype.greet = function() { + if (this.canTalk) { + console.log('Hi, I am ' + this.name); + } +}; + +var Employee = function(name, title) { + Person.call(this); + this.name = name; + this.title = title; +}; + +Employee.prototype = Object.create(Person.prototype); +Employee.prototype.constructor = Employee; + +Employee.prototype.greet = function() { + if (this.canTalk) { + console.log('Hi, I am ' + this.name + ', the ' + this.title); + } +}; + +var Customer = function(name) { + Person.call(this); + this.name = name; +}; + +Customer.prototype = Object.create(Person.prototype); +Customer.prototype.constructor = Customer; + +var Mime = function(name) { + Person.call(this); + this.name = name; + this.canTalk = false; +}; + +Mime.prototype = Object.create(Person.prototype); +Mime.prototype.constructor = Mime; + +var bob = new Employee('Bob', 'Builder'); +var joe = new Customer('Joe'); +var rg = new Employee('Red Green', 'Handyman'); +var mike = new Customer('Mike'); +var mime = new Mime('Mime'); + +bob.greet(); +// Hi, I am Bob, the Builder + +joe.greet(); +// Hi, I am Joe + +rg.greet(); +// Hi, I am Red Green, the Handyman + +mike.greet(); +// Hi, I am Mike + +mime.greet(); +</pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="參見">參見</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Introduction to Object-Oriented JavaScript</a></li> +</ul> diff --git a/files/zh-tw/conflicting/web/javascript/reference/global_objects/promise/index.html b/files/zh-tw/conflicting/web/javascript/reference/global_objects/promise/index.html new file mode 100644 index 0000000000..f93572bea3 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/reference/global_objects/promise/index.html @@ -0,0 +1,65 @@ +--- +title: Promise.prototype +slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +translation_of_original: Web/JavaScript/Reference/Global_Objects/Promise/prototype +--- +<div>{{JSRef}}</div> + +<p><code><strong>Promise</strong></code><strong><code>.prototype</code></strong> 屬性代表了 {{jsxref("Promise")}} 建構式的原型物件。</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="描述">描述</h2> + +<p>所有 {{jsxref("Promise")}} 實例都繼承自 {{jsxref("Promise.prototype")}}。您可以使用建構式的原型物件來增加屬性或方法到所有的 <code>Promise</code> 實例。</p> + +<h2 id="屬性">屬性</h2> + +<dl> + <dt><code>Promise.prototype.constructor</code></dt> + <dd>回傳一個建立實例原型（instance's prototype）的函式。預設為 {{jsxref("Promise")}} 函數。</dd> +</dl> + +<h2 id="方法">方法</h2> + +<dl> + <dt>{{jsxref("Promise.catch", "Promise.prototype.catch(onRejected)")}}</dt> + <dd>繫結一個拒絕回呼函式（rejection handler callback）到 promise，當它被呼叫時回傳一個以回傳值作解析的新 promise，或者當 promise 被實現時以原值作解析。</dd> + <dt>{{jsxref("Promise.then", "Promise.prototype.then(onFulfilled, onRejected)")}}</dt> + <dd>繫結實現或拒絕回呼函式到 promise，回傳一個以 handler 之回傳值作解析的新 promise，或者當 promise 未處理（not handled）時以原值作解析。(i.e. 比如相關聯的 <code>onFulfilled</code> 或 <code>onRejected</code> 不是函式。)</dd> +</dl> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.prototype', 'Promise.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p class="hidden">To contribute to this compatibility data, please write a pull request against this file: <a href="https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json">https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json</a>.</p> + +<p>{{Compat("javascript/promise","Promise.prototype")}}</p> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> +</ul> diff --git a/files/zh-tw/conflicting/web/javascript/reference/global_objects/string/index.html b/files/zh-tw/conflicting/web/javascript/reference/global_objects/string/index.html new file mode 100644 index 0000000000..011c61418e --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/reference/global_objects/string/index.html @@ -0,0 +1,177 @@ +--- +title: String.prototype +slug: Web/JavaScript/Reference/Global_Objects/String/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/String +translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype +--- +<div>{{JSRef}}</div> + +<p>The <strong><code>String.prototype</code></strong> property represents the {{jsxref("String")}} prototype object.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Description">Description</h2> + +<p>All {{jsxref("String")}} instances inherit from <code>String.prototype</code>. Changes to the <code>String</code> prototype object are propagated to all {{jsxref("String")}} instances.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt><code>String.prototype.constructor</code></dt> + <dd>Specifies the function that creates an object's prototype.</dd> + <dt>{{jsxref("String.prototype.length")}}</dt> + <dd>Reflects the length of the string.</dd> + <dt><code><em>N</em></code></dt> + <dd>Used to access the character in the <em>N</em>th position where <em>N</em> is a positive integer between 0 and one less than the value of {{jsxref("String.length", "length")}}. These properties are read-only.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<h3 id="Methods_unrelated_to_HTML">Methods unrelated to HTML</h3> + +<dl> + <dt>{{jsxref("String.prototype.charAt()")}}</dt> + <dd>Returns the character (exactly one UTF-16 code unit) at the specified index.</dd> + <dt>{{jsxref("String.prototype.charCodeAt()")}}</dt> + <dd>Returns a number that is the UTF-16 code unit value at the given index.</dd> + <dt>{{jsxref("String.prototype.codePointAt()")}}</dt> + <dd>Returns a nonnegative integer Number that is the code point value of the UTF-16 encoded code point starting at the specified index.</dd> + <dt>{{jsxref("String.prototype.concat()")}}</dt> + <dd>Combines the text of two strings and returns a new string.</dd> + <dt>{{jsxref("String.prototype.includes()")}}</dt> + <dd>Determines whether one string may be found within another string.</dd> + <dt>{{jsxref("String.prototype.endsWith()")}}</dt> + <dd>Determines whether a string ends with the characters of another string.</dd> + <dt>{{jsxref("String.prototype.indexOf()")}}</dt> + <dd>Returns the index within the calling {{jsxref("String")}} object of the first occurrence of the specified value, or -1 if not found.</dd> + <dt>{{jsxref("String.prototype.lastIndexOf()")}}</dt> + <dd>Returns the index within the calling {{jsxref("String")}} object of the last occurrence of the specified value, or -1 if not found.</dd> + <dt>{{jsxref("String.prototype.localeCompare()")}}</dt> + <dd>Returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order.</dd> + <dt>{{jsxref("String.prototype.match()")}}</dt> + <dd>Used to match a regular expression against a string.</dd> + <dt>{{jsxref("String.prototype.normalize()")}}</dt> + <dd>Returns the Unicode Normalization Form of the calling string value.</dd> + <dt>{{jsxref("String.prototype.padEnd()")}}</dt> + <dd>Pads the current string from the end with a given string to create a new string from a given length.</dd> + <dt>{{jsxref("String.prototype.padStart()")}}</dt> + <dd>Pads the current string from the start with a given string to create a new string from a given length.</dd> + <dt><s class="obsoleteElement">{{jsxref("String.prototype.quote()")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Wraps the string in double quotes ("<code>"</code>").</s></dd> + <dt>{{jsxref("String.prototype.repeat()")}}</dt> + <dd>Returns a string consisting of the elements of the object repeated the given times.</dd> + <dt>{{jsxref("String.prototype.replace()")}}</dt> + <dd>Used to find a match between a regular expression and a string, and to replace the matched substring with a new substring.</dd> + <dt>{{jsxref("String.prototype.search()")}}</dt> + <dd>Executes the search for a match between a regular expression and a specified string.</dd> + <dt>{{jsxref("String.prototype.slice()")}}</dt> + <dd>Extracts a section of a string and returns a new string.</dd> + <dt>{{jsxref("String.prototype.split()")}}</dt> + <dd>Splits a {{jsxref("Global_Objects/String", "String")}} object into an array of strings by separating the string into substrings.</dd> + <dt>{{jsxref("String.prototype.startsWith()")}}</dt> + <dd>Determines whether a string begins with the characters of another string.</dd> + <dt>{{jsxref("String.prototype.substr()")}}</dt> + <dd>Returns the characters in a string beginning at the specified location through the specified number of characters.</dd> + <dt>{{jsxref("String.prototype.substring()")}}</dt> + <dd>Returns the characters in a string between two indexes into the string.</dd> + <dt>{{jsxref("String.prototype.toLocaleLowerCase()")}}</dt> + <dd>The characters within a string are converted to lower case while respecting the current locale. For most languages, this will return the same as {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}.</dd> + <dt>{{jsxref("String.prototype.toLocaleUpperCase()")}}</dt> + <dd>The characters within a string are converted to upper case while respecting the current locale. For most languages, this will return the same as {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}.</dd> + <dt>{{jsxref("String.prototype.toLowerCase()")}}</dt> + <dd>Returns the calling string value converted to lower case.</dd> + <dt>{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Returns an object literal representing the specified object; you can use this value to create a new object. Overrides the {{jsxref("Object.prototype.toSource()")}} method.</dd> + <dt>{{jsxref("String.prototype.toString()")}}</dt> + <dd>Returns a string representing the specified object. Overrides the {{jsxref("Object.prototype.toString()")}} method.</dd> + <dt>{{jsxref("String.prototype.toUpperCase()")}}</dt> + <dd>Returns the calling string value converted to uppercase.</dd> + <dt>{{jsxref("String.prototype.trim()")}}</dt> + <dd>Trims whitespace from the beginning and end of the string. Part of the ECMAScript 5 standard.</dd> + <dt>{{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}</dt> + <dd>Trims whitespace from the left side of the string.</dd> + <dt>{{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}</dt> + <dd>Trims whitespace from the right side of the string.</dd> + <dt>{{jsxref("String.prototype.valueOf()")}}</dt> + <dd>Returns the primitive value of the specified object. Overrides the {{jsxref("Object.prototype.valueOf()")}} method.</dd> + <dt>{{jsxref("String.prototype.@@iterator()", "String.prototype[@@iterator]()")}}</dt> + <dd>Returns a new <code>Iterator</code> object that iterates over the code points of a String value, returning each code point as a String value.</dd> +</dl> + +<h3 id="HTML_wrapper_methods">HTML wrapper methods</h3> + +<p>These methods are of limited use, as they provide only a subset of the available HTML tags and attributes.</p> + +<dl> + <dt>{{jsxref("String.prototype.anchor()")}}</dt> + <dd>{{htmlattrxref("name", "a", "<a name=\"name\">")}} (hypertext target)</dd> + <dt>{{jsxref("String.prototype.big()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("big")}}</dd> + <dt>{{jsxref("String.prototype.blink()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("blink")}}</dd> + <dt>{{jsxref("String.prototype.bold()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("b")}}</dd> + <dt>{{jsxref("String.prototype.fixed()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("tt")}}</dd> + <dt>{{jsxref("String.prototype.fontcolor()")}} {{deprecated_inline}}</dt> + <dd>{{htmlattrxref("color", "font", "<font color=\"color\">")}}</dd> + <dt>{{jsxref("String.prototype.fontsize()")}} {{deprecated_inline}}</dt> + <dd>{{htmlattrxref("size", "font", "<font size=\"size\">")}}</dd> + <dt>{{jsxref("String.prototype.italics()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("i")}}</dd> + <dt>{{jsxref("String.prototype.link()")}}</dt> + <dd>{{htmlattrxref("href", "a", "<a href=\"url\">")}} (link to URL)</dd> + <dt>{{jsxref("String.prototype.small()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("small")}}</dd> + <dt>{{jsxref("String.prototype.strike()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("strike")}}</dd> + <dt>{{jsxref("String.prototype.sub()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("sub")}}</dd> + <dt>{{jsxref("String.prototype.sup()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("sup")}}</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype', 'String.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.String.prototype")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/zh-tw/conflicting/web/javascript/reference/operators/index.html b/files/zh-tw/conflicting/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..050c362008 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/reference/operators/index.html @@ -0,0 +1,309 @@ +--- +title: 算術運算子 +slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>算術運算子接受數值（資料型態為字串或變數都可）作為其運算子並回傳單個數值。 標準算術運算符號有加號（+），減號（ - ），乘（*）和除（/）。</strong></p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}</div> + + + +<h2 id="Addition_()"><a id="加法" name="加法">Addition (+)</a></h2> + +<p>加法運算子生成數字(運算元)的總和或字串串接。</p> + +<h3 id="Syntax">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> x + y +</pre> + +<h3 id="Examples">Examples</h3> + +<pre class="brush: js">// Number + Number -> addition +1 + 2 // 3 + +// Boolean + Number -> addition +true + 1 // 2 + +// Boolean + Boolean -> addition +false + false // 0 + +// Number + String -> concatenation +5 + 'foo' // "5foo" + +// String + Boolean -> concatenation +'foo' + false // "foofalse" + +// String + String -> concatenation +'foo' + 'bar' // "foobar" +</pre> + +<h2 id="Subtraction_(-)"><a id="減法" name="減法">Subtraction (-)</a></h2> + +<p>減法運算子能算出兩個運算元間的差異。</p> + +<h3 id="Syntax_2">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> x - y +</pre> + +<h3 id="Examples_2">Examples</h3> + +<pre class="brush: js">5 - 3 // 2 +3 - 5 // -2 +'foo' - 3 // NaN</pre> + +<h2 id="Division_()"><a id="除法" name="除法">Division (/)</a></h2> + +<p>The division operator produces the quotient of its operands where the left operand is the dividend and the right operand is the divisor.</p> + +<h3 id="Syntax_3">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> x / y +</pre> + +<h3 id="Examples_3">Examples</h3> + +<pre class="brush: js">1 / 2 // returns 0.5 in JavaScript +1 / 2 // returns 0 in Java +// (neither number is explicitly a floating point number) + +1.0 / 2.0 // returns 0.5 in both JavaScript and Java + +2.0 / 0 // returns Infinity in JavaScript +2.0 / 0.0 // returns Infinity too +2.0 / -0.0 // returns -Infinity in JavaScript</pre> + +<h2 id="Multiplication_(*)"><a id="乘法" name="乘法">Multiplication (*)</a></h2> + +<p>The multiplication operator produces the product of the operands.</p> + +<h3 id="Syntax_4">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> x * y +</pre> + +<h3 id="Examples_4">Examples</h3> + +<pre class="brush: js">2 * 2 // 4 +-2 * 2 // -4 +Infinity * 0 // NaN +Infinity * Infinity // Infinity +'foo' * 2 // NaN +</pre> + +<h2 id="Remainder_()"><a id="餘數運算" name="餘數運算">Remainder (%)</a></h2> + +<p>The remainder operator returns the remainder left over when one operand is divided by a second operand. It always takes the sign of the dividend.</p> + +<h3 id="Syntax_5">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> var1 % var2 +</pre> + +<h3 id="Examples_5">Examples</h3> + +<pre class="brush: js">12 % 5 // 2 +-1 % 2 // -1 +1 % -2 // 1 +NaN % 2 // NaN +1 % 2 // 1 +2 % 3 // 2 +-4 % 2 // -0 +5.5 % 2 // 1.5 +</pre> + +<h2 id="Exponentiation_(**)"><a id="指數運算" name="指數運算">Exponentiation (**)</a></h2> + +<p>The exponentiation operator returns the result of raising first operand to the power second operand. that is, <code>var1</code><sup><code>var2</code></sup>, in the preceding statement, where <code>var1</code> and <code>var2</code> are variables. Exponentiation operator is right associative. <code>a ** b ** c</code> is equal to <code>a ** (b ** c)</code>.</p> + +<h3 id="Syntax_6">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> var1 ** var2 +</pre> + +<h3 id="Notes">Notes</h3> + +<p>In most languages like PHP and Python and others that have an exponentiation operator (**), the exponentiation operator is defined to have a higher precedence than unary operators such as unary + and unary -, but there are a few exceptions. For example, in Bash the ** operator is defined to have a lower precedence than unary operators. In JavaScript, it is impossible to write an ambiguous exponentiation expression, i.e. you cannot put a unary operator (<code>+/-/~/!/delete/void/typeof</code>) immediately before the base number.</p> + +<pre class="brush: js">-2 ** 2; +// 4 in Bash, -4 in other languages. +// This is invalid in JavaScript, as the operation is ambiguous. + + +-(2 ** 2); +// -4 in JavaScript and the author's intention is unambiguous. +</pre> + +<h3 id="Examples_6">Examples</h3> + +<pre class="brush: js">2 ** 3 // 8 +3 ** 2 // 9 +3 ** 2.5 // 15.588457268119896 +10 ** -1 // 0.1 +NaN ** 2 // NaN + +2 ** 3 ** 2 // 512 +2 ** (3 ** 2) // 512 +(2 ** 3) ** 2 // 64 +</pre> + +<p>To invert the sign of the result of an exponentiation expression:</p> + +<pre class="brush: js">-(2 ** 2) // -4 +</pre> + +<p>To force the base of an exponentiation expression to be a negative number:</p> + +<pre class="brush: js">(-2) ** 2 // 4 +</pre> + +<div class="note"> +<p><strong>Note:</strong> JavaScript also has <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">a bitwise operator ^ (logical XOR)</a>. <code>**</code> and <code>^</code> are different (for example : <code>2 ** 3 === 8</code> when <code>2 ^ 3 === 1</code>.)</p> +</div> + +<h2 id="Increment_()"><a id="遞增運算" name="遞增運算">Increment (++)</a></h2> + +<p>The increment operator increments (adds one to) its operand and returns a value.</p> + +<ul> + <li>If used postfix, with operator after operand (for example, x++), then it returns the value before incrementing.</li> + <li>If used prefix with operator before operand (for example, ++x), then it returns the value after incrementing.</li> +</ul> + +<h3 id="Syntax_7">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> x++ or ++x +</pre> + +<h3 id="Examples_7">Examples</h3> + +<pre class="brush: js">// Postfix +var x = 3; +y = x++; // y = 3, x = 4 + +// Prefix +var a = 2; +b = ++a; // a = 3, b = 3 +</pre> + +<h2 id="Decrement_(--)"><a id="遞減運算" name="遞減運算">Decrement (--)</a></h2> + +<p>The decrement operator decrements (subtracts one from) its operand and returns a value.</p> + +<ul> + <li>If used postfix (for example, x--), then it returns the value before decrementing.</li> + <li>If used prefix (for example, --x), then it returns the value after decrementing.</li> +</ul> + +<h3 id="Syntax_8">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> x-- or --x +</pre> + +<h3 id="Examples_8">Examples</h3> + +<pre class="brush: js">// Postfix +var x = 3; +y = x--; // y = 3, x = 2 + +// Prefix +var a = 2; +b = --a; // a = 1, b = 1 +</pre> + +<h2 id="Unary_negation_(-)"><a name="Unary_negation">Unary negation (-)</a></h2> + +<p>The unary negation operator precedes its operand and negates it.</p> + +<h3 id="Syntax_9">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> -x +</pre> + +<h3 id="Examples_9">Examples</h3> + +<pre class="brush: js">var x = 3; +y = -x; // y = -3, x = 3 + +// Unary negation operator can convert non-numbers into a number +var x = "4"; +y = -x; // y = -4 +</pre> + +<h2 id="Unary_plus_()"><a name="Unary_plus">Unary plus</a> (+)</h2> + +<p>The unary plus operator precedes its operand and evaluates to its operand but attempts to convert it into a number, if it isn't already. Although unary negation (-) also can convert non-numbers, unary plus is the fastest and preferred way of converting something into a number, because it does not perform any other operations on the number. It can convert string representations of integers and floats, as well as the non-string values <code>true</code>, <code>false</code>, and <code>null</code>. Integers in both decimal and hexadecimal ("0x"-prefixed) formats are supported. Negative numbers are supported (though not for hex). If it cannot parse a particular value, it will evaluate to {{jsxref("NaN")}}.</p> + +<h3 id="Syntax_10">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> +x +</pre> + +<h3 id="Examples_10">Examples</h3> + +<pre class="brush: js">+3 // 3 ++'3' // 3 ++true // 1 ++false // 0 ++null // 0 ++function(val){ return val } // NaN +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.3')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Additive operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.5">Multiplicative operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.3">Postfix expressions</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4">Unary operators</a>.</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-postfix-expressions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-additive-operators">Additive operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-multiplicative-operators">Multiplicative operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-postfix-expressions">Postfix expressions</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-unary-operators">Unary operators</a>.</td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-postfix-expressions')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td>Added <a href="https://github.com/rwaldron/exponentiation-operator">Exponentiation operator</a>.</td> + </tr> + <tr> + <td>{{SpecName('ES2017', '#sec-postfix-expressions')}}</td> + <td>{{Spec2('ES2017')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-additive-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.operators.arithmetic")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Assignment operators</a></li> +</ul> diff --git a/files/zh-tw/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html b/files/zh-tw/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html new file mode 100644 index 0000000000..f0b3e39c6e --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html @@ -0,0 +1,284 @@ +--- +title: 比較運算子 +slug: Web/JavaScript/Reference/Operators/Comparison_Operators +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>JavaScript has both strict and type–converting comparisons. A strict comparison (e.g., <code>===</code>) is only true if the operands are of the same type and the contents match. The more commonly-used abstract comparison (e.g. <code>==</code>) converts the operands to the same type before making the comparison. For relational abstract comparisons (e.g., <code><=</code>), the operands are first converted to primitives, then to the same type, before comparison.</p> + +<p>Strings are compared based on standard lexicographical ordering, using Unicode values.</p> + +<p>Features of comparisons:</p> + +<ul> + <li>Two strings are strictly equal when they have the same sequence of characters, same length, and same characters in corresponding positions.</li> + <li>Two numbers are strictly equal when they are numerically equal (have the same number value). <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="NaN">NaN</a> is not equal to anything, including NaN. Positive and negative zeros are equal to one another.</li> + <li>Two Boolean operands are strictly equal if both are <code>true</code> or both are <code>false</code>.</li> + <li>Two distinct objects are never equal for either strict or abstract comparisons.</li> + <li>An expression comparing Objects is only true if the operands reference the same Object.</li> + <li>Null and Undefined Types are strictly equal to themselves and abstractly equal to each other.</li> +</ul> + +<h2 id="Equality_operators">Equality operators</h2> + +<h3 id="Equality_()"><a name="Equality">Equality (==)</a></h3> + +<p>The equality operator converts the operands if they are <strong>not of the same type</strong>, then applies strict comparison. If <strong>both operands are objects</strong>, then JavaScript compares internal references which are equal when operands refer to the same object in memory.</p> + +<h4 id="Syntax">Syntax</h4> + +<pre class="syntaxbox">x == y +</pre> + +<h4 id="Examples">Examples</h4> + +<pre class="brush: js"> 1 == 1 // true + "1" == 1 // true + 1 == '1' // true + 0 == false // true + 0 == null // false +var object1 = {"value":"key"}, object2={"value":"key"}; +object1 == object2 //false + + 0 == undefined // false +null == undefined // true +</pre> + +<h3 id="Inequality_(!)"><a name="Inequality">Inequality (!=)</a></h3> + +<p>The inequality operator returns true if the operands are not equal. If the two operands are <strong>not of the same type</strong>, JavaScript attempts to convert the operands to an appropriate type for the comparison. If <strong>both operands are objects</strong>, then JavaScript compares internal references which are not equal when operands refer to different objects in memory.</p> + +<h4 id="Syntax_2">Syntax</h4> + +<pre class="syntaxbox">x != y</pre> + +<h4 id="Examples_2">Examples</h4> + +<pre class="brush: js">1 != 2 // true +1 != "1" // false +1 != '1' // false +1 != true // false +0 != false // false +</pre> + +<h3 id="Identity_strict_equality_()"><a name="Identity">Identity / strict equality (===)</a></h3> + +<p>The identity operator returns true if the operands are strictly equal (see above) <strong>with no type conversion</strong>. </p> + +<h4 id="Syntax_3">Syntax</h4> + +<pre class="syntaxbox">x === y</pre> + +<h4 id="Examples_3">Examples</h4> + +<pre class="brush: js ">3 === 3 // true +3 === '3' // false +var object1 = {"value":"key"}, object2={"value":"key"}; +object1 === object2 //false</pre> + +<p> </p> + +<h3 id="Non-identity_strict_inequality_(!)"><a name="Nonidentity">Non-identity / strict inequality (!==)</a></h3> + +<p>The non-identity operator returns true if the operands <strong>are not equal and/or not of the same type</strong>.</p> + +<h4 id="Syntax_4">Syntax</h4> + +<pre class="syntaxbox">x !== y</pre> + +<h4 id="Examples_4">Examples</h4> + +<pre class="brush: js">3 !== '3' // true +4 !== 3 // true +</pre> + +<h2 id="Relational_operators">Relational operators</h2> + +<p>Each of these operators will call the <code>valueOf()</code> function on each operand before a comparison is made.</p> + +<h3 id="Greater_than_operator_(>)"><a name="Greater_than_operator">Greater than operator (>)</a></h3> + +<p>The greater than operator returns true if the left operand is greater than the right operand.</p> + +<h4 id="Syntax_5">Syntax</h4> + +<pre class="syntaxbox">x > y</pre> + +<h4 id="Examples_5">Examples</h4> + +<pre class="brush: js">4 > 3 // true +</pre> + +<h3 id="Greater_than_or_equal_operator_(>)"><a name="Greater_than_or_equal_operator">Greater than or equal operator (>=)</a></h3> + +<p>The greater than or equal operator returns true if the left operand is greater than or equal to the right operand.</p> + +<h4 id="Syntax_6">Syntax</h4> + +<pre class="syntaxbox"> x >= y</pre> + +<h4 id="Examples_6">Examples</h4> + +<pre class="brush: js">4 >= 3 // true +3 >= 3 // true +</pre> + +<h3 id="Less_than_operator_(<)"><a name="Less_than_operator">Less than operator (<)</a></h3> + +<p>The less than operator returns true if the left operand is less than the right operand.</p> + +<h4 id="Syntax_7">Syntax</h4> + +<pre class="syntaxbox"> x < y</pre> + +<h4 id="Examples_7">Examples</h4> + +<pre class="brush: js">3 < 4 // true +</pre> + +<h3 id="Less_than_or_equal_operator_(<)"><a id="Less_than_or_equal_operator" name="Less_than_or_equal_operator">Less than or equal operator (<=)</a></h3> + +<p>The less than or equal operator returns true if the left operand is less than or equal to the right operand.</p> + +<h4 id="Syntax_8">Syntax</h4> + +<pre class="syntaxbox"> x <= y</pre> + +<h4 id="Examples_8">Examples</h4> + +<pre class="brush: js">3 <= 4 // true +</pre> + +<h2 id="Using_the_Equality_Operators">Using the Equality Operators</h2> + +<p>The standard equality operators (<code>==</code> and <code>!=</code>) use the <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">Abstract Equality Comparison Algorithm</a> to compare two operands. If the operands are of different types, it will attempt to convert them to the same type before making the comparison, e.g., in the expression <code>5 == '5'</code>, the string on the right is converted to {{jsxref("Number")}} before the comparison is made.</p> + +<p>The strict equality operators (<code>===</code> and <code>!==</code>) use the <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">Strict Equality Comparison Algorithm</a> and are intended for performing equality comparisons on operands of the same type. If the operands are of different types, the result is always <code>false</code> so <code>5 !== '5'</code>.</p> + +<p>Use strict equality operators if the operands must be of a specific type as well as value or if the exact type of the operands is important. Otherwise, use the standard equality operators, which allow you to compare the identity of two operands even if they are not of the same type.</p> + +<p>When type conversion is involved in the comparison (i.e., non–strict comparison), JavaScript converts the types {{jsxref("String")}}, {{jsxref("Number")}}, {{jsxref("Boolean")}}, or {{jsxref("Object")}} operands as follows:</p> + +<ul> + <li>When comparing a number and a string, the string is converted to a number value. JavaScript attempts to convert the string numeric literal to a <code>Number</code> type value. First, a mathematical value is derived from the string numeric literal. Next, this value is rounded to nearest <code>Number</code> type value.</li> + <li>If one of the operands is <code>Boolean</code>, the Boolean operand is converted to 1 if it is <code>true</code> and +0 if it is <code>false</code>.</li> + <li>If an object is compared with a number or string, JavaScript attempts to return the default value for the object. Operators attempt to convert the object to a primitive value, a <code>String</code> or <code>Number</code> value, using the <code>valueOf</code> and <code>toString</code> methods of the objects. If this attempt to convert the object fails, a runtime error is generated.</li> + <li>Note that an object is converted into a primitive if, and only if, its comparand is a primitive. If both operands are objects, they're compared as objects, and the equality test is true only if both refer the same object.</li> +</ul> + +<div class="note"><strong>Note:</strong> String objects are Type Object, not String! String objects are rarely used, so the following results might be surprising:</div> + +<pre class="brush:js">// true as both operands are type String (i.e. string primitives): +'foo' === 'foo' + +var a = new String('foo'); +var b = new String('foo'); + +// false as a and b are type Object and reference different objects +a == b + +// false as a and b are type Object and reference different objects +a === b + +// true as a and 'foo' are of different type and, the Object (a) +// is converted to String 'foo' before comparison +a == 'foo'</pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Adds <code>===</code> and <code>!==</code> operators. Implemented in JavaScript 1.3</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.8')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Relational Operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Equality Operators</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-relational-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-relational-operators">Relational Operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-equality-operators">Equality Operators</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-relational-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Defined in several sections of the specification: <a href="http://tc39.github.io/ecma262/#sec-relational-operators">Relational Operators</a>, <a href="http://tc39.github.io/ecma262/#sec-equality-operators">Equality Operators</a></td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{jsxref("Object.is()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">Equality comparisons and sameness</a></li> +</ul> diff --git a/files/zh-tw/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html b/files/zh-tw/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html new file mode 100644 index 0000000000..86f78270b5 --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html @@ -0,0 +1,555 @@ +--- +title: 位元運算子 +slug: Web/JavaScript/Reference/Operators/Bitwise_Operators +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>位元運算子</strong>將運算元視為一段 32 位元長的 0 和 1 序列，而不是十進位、十六進位或八進位的 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Numbers</a></code>。 舉例來說，十進位的 9 可以用二進位表示為 1001。位元運算子對這樣的二進位表示法進行運算，然後回傳標準 JavaScript 數值。</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-bitwiseoperators.html")}}</div> + + + +<p>下表總結了 JavaScript 的位元運算子：</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Operator</th> + <th>Usage</th> + <th>Description</th> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#(位元_AND)">位元 AND</a></td> + <td><code>a & b</code></td> + <td>當兩運算元的該位置皆為 <code>1</code> 時，回傳值的該位置為 <code>1</code>。</td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#(位元_OR)">位元 OR</a></td> + <td><code>a | b</code></td> + <td>當兩運算元的該位置有一者為 <code>1</code> 時，回傳值的該位置為 <code>1</code>。</td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#(位元_XOR)">位元 XOR</a></td> + <td><code>a ^ b</code></td> + <td>當兩運算元的該位置恰好一者為 <code>1</code> 時，回傳值的該位置為 <code>1</code>。</td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#(位元_NOT)">位元 NOT</a></td> + <td><code>~ a</code></td> + <td>將運算元的所有位元反轉。</td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#%3C%3C_(左移)">左移</a></td> + <td><code>a << b</code></td> + <td>將 <code>a</code> 的二進位表示法左移 <code>b</code> (< 32) 位元，右側補 <code>0</code>。</td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#%3E%3E_(保持符號右移)">保持符號右移</a></td> + <td><code>a >> b</code></td> + <td>將 <code>a</code> 的二進位表示法右移 <code>b</code> (< 32) 位元，拋棄被移出的位元。</td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#%3E%3E%3E_(填零右移)">填零右移</a></td> + <td><code>a >>> b</code> </td> + <td>將 <code>a</code> 的二進位表示法右移 <code>b</code> (< 32) 位元，拋棄被移出的位元，並於右側補 <code>0</code>。</td> + </tr> + </tbody> +</table> + +<h2 id="帶號的_32位元整數">帶號的 32位元整數</h2> + +<p>所有位元運算子的運算元皆會被轉換成二<a href="https://en.wikipedia.org/wiki/Method_of_complements">補數系統</a>下的帶號32位元整數。二補數系統意味著一個整數的加法反元素(例如 5和 -5)是該整數的所有位元反轉(位元 NOT，也就是該數的一補數) 再加一。舉例來說，下面的序列代表著整數 314：</p> + +<pre class="brush: js">00000000000000000000000100111010 +</pre> + +<p>下面的序列代表 <code>~314</code>，也就是 <code>314</code> 的一補數：</p> + +<pre class="brush: js">11111111111111111111111011000101 +</pre> + +<p>接著，下面代表著 <code>-314</code>，也就是 <code>314</code> 的二補數：</p> + +<pre class="brush: js">11111111111111111111111011000110 +</pre> + +<p>二補數系統確保了正值時最左邊的位元為 0，反之則為 1。因此，最左邊的位元被稱作符號位。</p> + +<p>整數 <code>0</code> 全由位元 0組成。</p> + +<pre class="brush: js">0 (base 10) = 00000000000000000000000000000000 (base 2) +</pre> + +<p>整數 <code>-1</code> 全由位元 1組成。</p> + +<pre class="brush: js">-1 (base 10) = 11111111111111111111111111111111 (base 2) +</pre> + +<p>整數 <code>-2147483648</code> (十六進位： <code>-0x80000000</code>) 除了第一位為 1，其餘皆由位元 0組成。</p> + +<pre class="brush: js">-2147483648 (base 10) = 10000000000000000000000000000000 (base 2) +</pre> + +<p>整數 <code>-2147483648</code> (十六進位： <code>-0x7fffffff</code>) 除了第一位為 0，其餘皆由位元 1組成。</p> + +<pre class="brush: js">2147483647 (base 10) = 01111111111111111111111111111111 (base 2) +</pre> + +<p>整數 <code>-2147483648</code> 和 <code>2147483647</code> 分別為帶號32位元整數所能表示的最小值和最大值。</p> + +<h2 id="位元邏輯運算子">位元邏輯運算子</h2> + +<p>大致上，位元邏輯運算子的運作如下︰</p> + +<ul> + <li>運算元會被轉換成 32位元的整數，並被表達為一系列的位元 (0 和 1)。多於 32位元的數值在轉換中其超出第32位元的部分會被捨棄。下面的多於32位元整數在被轉換時： + <pre class="brush: js">Before: 11100110111110100000000000000110000000000001 +After: 10100000000000000110000000000001</pre> + </li> + <li>兩個運算元中的位元會根據其位置兩兩一組：第一個跟第一個、第二個跟第二個 ...</li> + <li>運算子會作用在每一組位元上，運算完成後再重新組合起來得到回傳值。</li> +</ul> + +<h3 id="(位元_AND)"><a id="Bitwise_AND" name="Bitwise_AND">& (位元 AND)</a></h3> + +<p>對每一組位元執行 AND 運算。<code>a</code> AND <code>b</code> 只在 <code>a</code> 和 <code>b</code> 同時為 <code>1</code> 時得到 1。AND運算的真值表如下：</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a AND b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre class="brush: js">. 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10) +</pre> + +<p>將任何數 <code>x</code> 和 <code>0</code> 做位元 AND 皆會得到 <code>0</code>。將任何數 <code>x</code> 和 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">-1</span></font> 做位元 AND 皆會得到 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">x</span></font>。</p> + +<h3 id="(位元_OR)"><a name="Bitwise_OR">| (位元 OR)</a></h3> + +<p>對每一組位元執行 OR 運算。<code>a</code> OR <code>b</code> 在 <code>a</code> 和 <code>b</code> 有一者為 <code>1</code> 時得到 1。OR運算的真值表如下：</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a OR b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre class="brush: js">. 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10) +</pre> + +<p>將任何數 <code>x</code> 和 <code>0</code> 做位元 OR 皆會得到 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">x</span></font>。將任何數 <code>x</code> 和 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">-1</span></font> 做位元 OR 皆會得到 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">-1</span></font>。</p> + +<h3 id="(位元_XOR)"><a name="Bitwise_XOR">^ (位元 XOR)</a></h3> + +<p>對每一組位元執行 XOR 運算。<code>a</code> XOR <code>b</code> 只在 <code>a</code> 和 <code>b</code> 恰一者為 <code>1</code> 時得到 1。XOR運算的真值表如下：</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a XOR b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<pre class="brush: js">. 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10) +</pre> + +<p>將任何數 <code>x</code> 和 <code>0</code> 做位元 AND 皆會得到 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">x</span></font>。將任何數 <code>x</code> 和 <font face="consolas, Liberation Mono, courier, monospace">-1</font> 做位元 AND 皆會得到 <code>~x</code>。</p> + +<h3 id="(位元_NOT)"><a name="Bitwise_NOT">~ (位元 NOT)</a></h3> + +<p>對每一個位元執行 NOT 運算。NOT <code>a</code> 會得到 <code>a</code> 的反轉值(也就是一補數)。NOT運算的真值表如下：</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">NOT a</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<pre class="brush: js"> 9 (base 10) = 00000000000000000000000000001001 (base 2) + -------------------------------- +~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10) +</pre> + +<p>將任何數 <code>x</code> 做位元 NOT 皆會得到 <code>-(x + 1)</code>。舉例來說，<code>~-5</code> 會得到 <code>4</code>。</p> + +<p>值得注意的是，因為使用 32位元表示法表示數值 <code>~-1</code> 和 <code>~4294967295</code> (2<sup>32</sup>-1) 皆會得到 <code>0</code>。</p> + +<h2 id="位元位移運算子">位元位移運算子</h2> + +<p>位移運算子需要兩個運算元：第一個是要被位移的值，第二個是位元位移量。位移的方向取決於使用的運算子。</p> + +<p>位移運算子將運算元轉換成 32位元的大端序整數並回傳一個與左運算元相同類別的值。右運算元應不大於32，如果超過的話，將只會使用後 5個位元。</p> + +<h3 id="<<_(左移)"><a name="Left_shift"><< (左移)</a></h3> + +<p>將第一個運算元向左位移指定的量。被移出的位元會被拋棄，並從右側補零。</p> + +<p>例如，<code>9 << 2</code> 會得到 36：</p> + +<pre class="brush: js">. 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- +9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10) +</pre> + +<p>將任意值 <code>x</code> 左移 <code>y</code> 位元會得到 <code>x * 2 ** y</code>。</p> + +<h3 id=">>_(保持符號右移)"><a name="Right_shift">>> (保持符號右移)</a></h3> + +<p>將第一個運算元向右位移指定的量。被移出的位元會被拋棄，並從左側補進和原本最左端相同的位元值。因為新的最左端位元和原本的最左端位元是一樣的，符號位(最左端位元)並不會改變。「保持符號」之名便是因此。</p> + +<p>例如，<code>9 >> 2</code> 會得到 2：</p> + +<pre class="brush: js">. 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- +9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) +</pre> + +<p>同樣地，<code>-9 >> 2</code> 會得到 <code>-3</code>，因為符號會保持不變。</p> + +<pre class="brush: js">. -9 (base 10): 11111111111111111111111111110111 (base 2) + -------------------------------- +-9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10) +</pre> + +<h3 id=">>>_(填零右移)"><a name="Unsigned_right_shift">>>> (填零右移)</a></h3> + +<p>將第一個運算元向右位移指定的量。被移出的位元會被拋棄，並從左側補零。因為符號位變成 0，所以結果永遠都是正值。</p> + +<p>對非負的數來說，填零右移會得到和保持符號右移一樣的結果。例如，<code>9 >>> 2</code> 和 <code>9 >> 2</code> 一樣，皆會得到 2：</p> + +<pre class="brush: js">. 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- +9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) +</pre> + +<p>然而對負值來說並不是這麼一回事。例如，<code>-9 >>> 2</code> 會得到 1073741821，跟 <code>-9 >> 2</code> (得到 <code>-3</code>)的結果是不一樣的：</p> + +<pre class="brush: js">. -9 (base 10): 11111111111111111111111111110111 (base 2) + -------------------------------- +-9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10) +</pre> + +<h2 id="範例">範例</h2> + +<h3 id="旗標(flags)_和遮罩_(bitmasks)">旗標(flags) 和遮罩 (bitmasks)</h3> + +<p>位元運算子常被用於生成、修改、和讀取旗標序列，就像是二進制的變數一般。雖然也可以使用普通變數，但使用二進制的旗標序列大大的減少了所需空間 (32 倍)。</p> + +<p>假設有 4個旗標：</p> + +<ul> + <li>旗標 A：我們有螞蟻問題</li> + <li>旗標 B：我們擁有一隻蝙蝠</li> + <li>旗標 C：我們擁有一隻貓</li> + <li>旗標 D：我們擁有一隻鴨子</li> +</ul> + +<p>這些旗標倍表達成一個位元序列：DCBA。當一個旗標被立起 (set)時，其值為1。當一個旗標被放下 (clear)，其值為0。假設有一變數 <code>flags</code> 的二進位值為 0101：</p> + +<pre class="brush: js">var flags = 5; // 二進位 0101 +</pre> + +<p>這個值表示：</p> + +<ul> + <li>旗標 A為真 (我們有螞蟻問題);</li> + <li>旗標 B為假 (我們並未擁有一隻蝙蝠);</li> + <li>旗標 C為真 (我們擁有一隻貓);</li> + <li>旗標 D為假 (我們並未擁有一隻鴨子);</li> +</ul> + +<p>因為位元運算子進行的是 32位元操作，0101 實際上是 00000000000000000000000000000101，但前導的 0可被忽略因為他們沒有實際上的意義。</p> + +<p>位元遮罩則為一個可以修改且(或)讀取旗標序列的位元序列。通常為每個單獨旗標為真的「初始」值：</p> + +<pre class="brush: js">var FLAG_A = 1; // 0001 +var FLAG_B = 2; // 0010 +var FLAG_C = 4; // 0100 +var FLAG_D = 8; // 1000 +</pre> + +<p>新的位元遮罩可以透過對初始遮罩進行位元運算獲得。例如，遮罩 1011 可以透過對 FLAG_A、FLAG_B、和 FLAG_D進行 OR運算獲得：</p> + +<pre class="brush: js">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011 +</pre> + +<p>Individual flag values can be extracted by ANDing them with a bitmask, where each bit with the value of one will "extract" the corresponding flag. The bitmask <em>masks</em> out the non-relevant flags by ANDing with zeroes (hence the term "bitmask"). For example, the bitmask 0100 can be used to see if flag C is set:</p> + +<pre class="brush: js">// if we own a cat +if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true + // do stuff +} +</pre> + +<p>A bitmask with multiple set flags acts like an "either/or". For example, the following two are equivalent:</p> + +<pre class="brush: js">// if we own a bat or we own a cat +// (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true +if ((flags & FLAG_B) || (flags & FLAG_C)) { + // do stuff +} +</pre> + +<pre class="brush: js">// if we own a bat or cat +var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110 +if (flags & mask) { // 0101 & 0110 => 0100 => true + // do stuff +} +</pre> + +<p>Flags can be set by ORing them with a bitmask, where each bit with the value one will set the corresponding flag, if that flag isn't already set. For example, the bitmask 1100 can be used to set flags C and D:</p> + +<pre class="brush: js">// yes, we own a cat and a duck +var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100 +flags |= mask; // 0101 | 1100 => 1101 +</pre> + +<p>Flags can be cleared by ANDing them with a bitmask, where each bit with the value zero will clear the corresponding flag, if it isn't already cleared. This bitmask can be created by NOTing primitive bitmasks. For example, the bitmask 1010 can be used to clear flags A and C:</p> + +<pre class="brush: js">// no, we don't have an ant problem or own a cat +var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010 +flags &= mask; // 1101 & 1010 => 1000 +</pre> + +<p>The mask could also have been created with <code>~FLAG_A & ~FLAG_C</code> (De Morgan's law):</p> + +<pre class="brush: js">// no, we don't have an ant problem, and we don't own a cat +var mask = ~FLAG_A & ~FLAG_C; +flags &= mask; // 1101 & 1010 => 1000 +</pre> + +<p>Flags can be toggled by XORing them with a bitmask, where each bit with the value one will toggle the corresponding flag. For example, the bitmask 0110 can be used to toggle flags B and C:</p> + +<pre class="brush: js">// if we didn't have a bat, we have one now, +// and if we did have one, bye-bye bat +// same thing for cats +var mask = FLAG_B | FLAG_C; +flags = flags ^ mask; // 1100 ^ 0110 => 1010 +</pre> + +<p>Finally, the flags can all be flipped with the NOT operator:</p> + +<pre class="brush: js">// entering parallel universe... +flags = ~flags; // ~1010 => 0101 +</pre> + +<h3 id="Conversion_snippets">Conversion snippets</h3> + +<p>Convert a binary <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code> to a decimal <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code>:</p> + +<pre class="brush: js">var sBinString = '1011'; +var nMyNumber = parseInt(sBinString, 2); +alert(nMyNumber); // prints 11, i.e. 1011 +</pre> + +<p>Convert a decimal <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code> to a binary <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code>:</p> + +<pre class="brush: js">var nMyNumber = 11; +var sBinString = nMyNumber.toString(2); +alert(sBinString); // prints 1011, i.e. 11 +</pre> + +<h3 id="Automate_Mask_Creation">Automate Mask Creation</h3> + +<p>You can create multiple masks from a set of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></code> values, like this:</p> + +<pre class="brush: js">function createMask() { + var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length; + for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++); + return nMask; +} +var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011 +var mask2 = createMask(false, false, true); // 4, i.e.: 0100 +var mask3 = createMask(true); // 1, i.e.: 0001 +// etc. + +alert(mask1); // prints 11, i.e.: 1011 +</pre> + +<h3 id="Reverse_algorithm_an_array_of_booleans_from_a_mask">Reverse algorithm: an array of booleans from a mask</h3> + +<p>If you want to create an <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Booleans</a></code> from a mask you can use this code:</p> + +<pre class="brush: js">function arrayFromMask(nMask) { + // nMask must be between -2147483648 and 2147483647 + if (nMask > 0x7fffffff || nMask < -0x80000000) { + throw new TypeError('arrayFromMask - out of range'); + } + for (var nShifted = nMask, aFromMask = []; nShifted; + aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1); + return aFromMask; +} + +var array1 = arrayFromMask(11); +var array2 = arrayFromMask(4); +var array3 = arrayFromMask(1); + +alert('[' + array1.join(', ') + ']'); +// prints "[true, true, false, true]", i.e.: 11, i.e.: 1011 +</pre> + +<p>You can test both algorithms at the same time…</p> + +<pre class="brush: js">var nTest = 19; // our custom mask +var nResult = createMask.apply(this, arrayFromMask(nTest)); + +alert(nResult); // 19 +</pre> + +<p>For the didactic purpose only (since there is the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number/toString">Number.toString(2)</a></code> method), we show how it is possible to modify the <code>arrayFromMask</code> algorithm in order to create a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code> containing the binary representation of a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code>, rather than an <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Booleans</a></code>:</p> + +<pre class="brush: js">function createBinaryString(nMask) { + // nMask must be between -2147483648 and 2147483647 + for (var nFlag = 0, nShifted = nMask, sMask = ''; nFlag < 32; + nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1); + return sMask; +} + +var string1 = createBinaryString(11); +var string2 = createBinaryString(4); +var string3 = createBinaryString(1); + +alert(string1); +// prints 00000000000000000000000000001011, i.e. 11 +</pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.7')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.8">Bitwise NOT operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.7">Bitwise shift operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.10">Binary bitwise operators</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-bitwise-shift-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-not-operator">Bitwise NOT operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-shift-operators">Bitwise shift operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-bitwise-operators">Binary bitwise operators</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Defined in several sections of the specification: <a href="http://tc39.github.io/ecma262/#sec-bitwise-not-operator">Bitwise NOT operator</a>, <a href="http://tc39.github.io/ecma262/#sec-bitwise-shift-operators">Bitwise shift operators</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-bitwise-operators">Binary bitwise operators</a></td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("javascript.operators.bitwise")}}</p> + +<h2 id="另見">另見</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators">Logical operators</a></li> +</ul> diff --git a/files/zh-tw/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html b/files/zh-tw/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html new file mode 100644 index 0000000000..2fb07f891e --- /dev/null +++ b/files/zh-tw/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html @@ -0,0 +1,244 @@ +--- +title: Logical operators +slug: Web/JavaScript/Reference/Operators/Logical_Operators +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>邏輯運算子通常會搭配 {{jsxref("Boolean")}} (logical) 值。若是，則回傳布林值。然而， <code>&&</code> 和 <code>||</code> 運算子通常回傳其中一運算元的值, 因此若這些運算子搭配非布林值使用，他們會回傳非布林值。</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-logicaloperator.html")}}</div> + + + +<h2 id="說明">說明</h2> + +<p>邏輯運算子的使用方式如下(<code><em>expr</em></code> 可能會是 <a href="/en-US/docs/Glossary/Data_structure">type</a>，不只是布林值)：</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Operator</th> + <th>Syntax</th> + <th>Description</th> + </tr> + <tr> + <td>邏輯 AND (<code>&&</code>)</td> + <td><code><em>expr1</em> && <em>expr2</em></code></td> + <td>若 <code>expr<strong>1</strong></code> 可被轉換成 <code>true</code>, 回傳 <code>expr<strong>2</strong></code>; 否則 回傳 <code>expr<strong>1</strong></code>.</td> + </tr> + <tr> + <td>邏輯 OR (<code>||</code>)</td> + <td><code><em>expr1</em> || <em>expr2</em></code></td> + <td>若 <code>expr<strong>1</strong></code> 可被轉換成 <code>true</code>, 回傳 <code>expr<strong>1</strong></code>; 否則 回傳 <code>expr<strong>2</strong></code>.</td> + </tr> + <tr> + <td>邏輯 NOT (<code>!</code>)</td> + <td><code>!<em>expr</em></code></td> + <td>回傳 <code>false</code> 若它的單一運算元可被轉換成 <code>true</code>; 否則回傳 <code>true</code>.</td> + </tr> + </tbody> +</table> + +<p>If a value can be converted to <code>true</code>, the value is so-called {{Glossary("truthy")}}. If a value can be converted to <code>false</code>, the value is so-called {{Glossary("falsy")}}.</p> + +<p>Examples of expressions that can be converted to false are:</p> + +<ul> + <li><code>null</code>;</li> + <li><code>NaN</code>;</li> + <li><code>0</code>;</li> + <li>empty string (<code>""</code> or <code>''</code> or <code>``</code>);</li> + <li><code>undefined</code>.</li> +</ul> + +<p>Even though the <code>&&</code> and <code>||</code> operators can be used with operands that are not Boolean values, they can still be considered boolean operators since their return values can always be converted to <a href="/en-US/docs/Web/JavaScript/Data_structures#Boolean_type">boolean primitives</a>. To explicitly convert their return value (or any expression in general) to the corresponding boolean value, use a double <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">NOT operator</a> or the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a> constructor.</p> + +<h3 id="Short-circuit_evaluation">Short-circuit evaluation</h3> + +<p>As logical expressions are evaluated left to right, they are tested for possible "short-circuit" evaluation using the following rules:</p> + +<ul> + <li><code>(some falsy expression) && <em>expr</em></code> is short-circuit evaluated to the falsy expression;</li> + <li><code>(some truthy expression) || <em>expr</em></code> is short-circuit evaluated to the truthy expression.</li> +</ul> + +<p>Short circuit means that the <em>expr</em> parts above are <strong>not evaluated</strong>, hence any side effects of doing so do not take effect (e.g., if <em>expr</em> is a function call, the calling never takes place). This happens because the value of the operator is already determined after the evaluation of the first operand. See example:</p> + +<pre class="brush: js">function A(){ console.log('called A'); return false; } +function B(){ console.log('called B'); return true; } + +console.log( A() && B() ); +// logs "called A" due to the function call, +// then logs false (which is the resulting value of the operator) + +console.log( B() || A() ); +// logs "called B" due to the function call, +// then logs true (which is the resulting value of the operator) +</pre> + +<h3 id="Operator_precedence">Operator precedence</h3> + +<p>The following expressions might seem equivalent, but they are not, because the <code>&&</code> operator is executed before the <code>||</code> operator (see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">operator precedence</a>).</p> + +<pre class="brush: js">true || false && false // returns true, because && is executed first +(true || false) && false // returns false, because operator precedence cannot apply</pre> + +<h3 id="Logical_AND_()"><a name="Logical_AND">Logical AND (<code>&&</code>)</a></h3> + +<p>The following code shows examples of the <code>&&</code> (logical AND) operator.</p> + +<pre class="brush: js">a1 = true && true // t && t returns true +a2 = true && false // t && f returns false +a3 = false && true // f && t returns false +a4 = false && (3 == 4) // f && f returns false +a5 = 'Cat' && 'Dog' // t && t returns "Dog" +a6 = false && 'Cat' // f && t returns false +a7 = 'Cat' && false // t && f returns false +a8 = '' && false // f && f returns "" +a9 = false && '' // f && f returns false +</pre> + +<h3 id="Logical_OR_()"><a name="Logical_OR">Logical OR (<code>||</code>)</a></h3> + +<p>The following code shows examples of the <code>||</code> (logical OR) operator.</p> + +<pre class="brush: js">o1 = true || true // t || t returns true +o2 = false || true // f || t returns true +o3 = true || false // t || f returns true +o4 = false || (3 == 4) // f || f returns false +o5 = 'Cat' || 'Dog' // t || t returns "Cat" +o6 = false || 'Cat' // f || t returns "Cat" +o7 = 'Cat' || false // t || f returns "Cat" +o8 = '' || false // f || f returns false +o9 = false || '' // f || f returns "" +o10 = false || varObject // f || object returns varObject +</pre> + +<h3 id="Logical_NOT_(!)"><a name="Logical_NOT">Logical NOT (<code>!</code>)</a></h3> + +<p>The following code shows examples of the <code>!</code> (logical NOT) operator.</p> + +<pre class="brush: js">n1 = !true // !t returns false +n2 = !false // !f returns true +n3 = !'' // !f returns true +n4 = !'Cat' // !t returns false +</pre> + +<h4 id="Double_NOT_(!!)">Double NOT (<code>!!</code>)</h4> + +<p>It is possible to use a couple of NOT operators in series to explicitly force the conversion of any value to the corresponding <a href="/en-US/docs/Web/JavaScript/Data_structures#Boolean_type">boolean primitive</a>. The conversion is based on the "truthyness" or "falsyness" of the value (see {{Glossary("truthy")}} and {{Glossary("falsy")}}).</p> + +<p>The same conversion can be done through the {{jsxref("Boolean")}} function.</p> + +<pre class="brush: js">n1 = !!true // !!truthy returns true +n2 = !!{} // !!truthy returns true: <strong>any</strong> object is truthy... +n3 = !!(new Boolean(false)) // ...even Boolean objects with a false <em>.valueOf()</em>! +n4 = !!false // !!falsy returns false +n5 = !!"" // !!falsy returns false +n6 = !!Boolean(false) // !!falsy returns false +</pre> + +<h3 id="Conversion_rules_for_booleans">Conversion rules for booleans</h3> + +<h4 id="Converting_AND_to_OR">Converting AND to OR</h4> + +<p>The following operation involving <strong>booleans</strong>:</p> + +<pre class="brush: js">bCondition1 && bCondition2</pre> + +<p>is always equal to:</p> + +<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre> + +<h4 id="Converting_OR_to_AND">Converting OR to AND</h4> + +<p>The following operation involving <strong>booleans</strong>:</p> + +<pre class="brush: js">bCondition1 || bCondition2</pre> + +<p>is always equal to:</p> + +<pre class="brush: js">!(!bCondition1 && !bCondition2)</pre> + +<h4 id="Converting_between_NOTs">Converting between NOTs</h4> + +<p>The following operation involving <strong>booleans</strong>:</p> + +<pre class="brush: js">!!bCondition</pre> + +<p>is always equal to:</p> + +<pre class="brush: js">bCondition</pre> + +<h3 id="Removing_nested_parentheses">Removing nested parentheses</h3> + +<p>As logical expressions are evaluated left to right, it is always possible to remove parentheses from a complex expression following some rules.</p> + +<h4 id="Removing_nested_AND">Removing nested AND</h4> + +<p>The following composite operation involving <strong>booleans</strong>:</p> + +<pre class="brush: js">bCondition1 || (bCondition2 && bCondition3)</pre> + +<p>is always equal to:</p> + +<pre class="brush: js">bCondition1 || bCondition2 && bCondition3</pre> + +<h4 id="Removing_nested_OR">Removing nested OR</h4> + +<p>The following composite operation involving <strong>booleans</strong>:</p> + +<pre class="brush: js">bCondition1 && (bCondition2 || bCondition3)</pre> + +<p>is always equal to:</p> + +<pre class="brush: js">!(!bCondition1 || !bCondition2 && !bCondition3)</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.11')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Binary Logical Operators</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">Binary Logical Operators</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Defined in several sections of the specification: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Binary Logical Operators</a></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.operators.logical")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Bitwise operators</a></li> + <li>{{jsxref("Boolean")}}</li> + <li><a href="/en-US/docs/Glossary/Truthy">Truthy</a></li> + <li><a href="/en-US/docs/Glossary/Falsy">Falsy</a></li> +</ul> diff --git a/files/zh-tw/conflicting/web/media/formats/index.html b/files/zh-tw/conflicting/web/media/formats/index.html new file mode 100644 index 0000000000..455655ba25 --- /dev/null +++ b/files/zh-tw/conflicting/web/media/formats/index.html @@ -0,0 +1,467 @@ +--- +title: Media formats supported by the HTML audio and video elements +slug: Web/HTML/Supported_media_formats +translation_of: Web/Media/Formats +translation_of_original: Web/HTML/Supported_media_formats +--- +<p>The {{ HTMLElement("audio") }} and {{ HTMLElement("video") }} elements provide support for playing audio and video media without requiring plug-ins. Video codecs and audio codecs are used to handle video and audio, and different codecs offer different levels of compression and quality. A container format is used to store and transmit the coded video and audio (both together, the case of a video with a soundtrack). Many combinations of codecs and container formats exist, although only a handful of these are relevant on the Web.</p> + +<p>Different browsers do not support the same media formats in their implementations of HTML5 video and audio, mainly because of patent issues. The area of media formats on the Web has greatly suffered from patent law in many countries - including the USA and EU countries (the notes on patents in this article is provided as-is and without any warranty.) This article discusses the different codec and container combinations relevant to the web, including support in browsers on both desktop and other device types.</p> + +<p>To make an HTML5 video, which works in the newest versions of all major browsers, you can serve your video in both WebM format and MPEG H.264 AAC format, using the <a href="/en/HTML/Element/source" title="En/HTML/Element/Source"><code>source</code></a> element like this:</p> + +<pre class="brush: html"><video controls> + <source src="somevideo.webm" type="video/webm"> + <source src="somevideo.mp4" type="video/mp4"> + I'm sorry; your browser doesn't support HTML5 video in WebM with VP8 or MP4 with H.264. + <!-- You can embed a Flash player here, to play your mp4 video in older browsers --> +</video> +</pre> + +<h2 id="WebM">WebM</h2> + +<p>The <a class="external" href="http://www.webmproject.org/" title="http://www.webmproject.org/">WebM</a> format is based on a restricted version of the <a class="external" href="http://corecodec.com/products/matroska" title="http://corecodec.com/products/matroska">Matroska</a> container format. It always uses the VP8 or VP9 video codec and the Vorbis or Opus audio codec. WebM is natively supported in desktop and mobile Gecko (Firefox), Chrome and Opera, and support for the format can be added to Internet Explorer and Safari (but not on iOS) by installing an add-on.</p> + +<p><a href="http://blogs.msdn.com/b/ie/archive/2011/02/02/html5-and-web-video-questions-for-the-industry-from-the-community.aspx" title="http://blogs.msdn.com/b/ie/archive/2011/02/02/html5-and-web-video-questions-for-the-industry-from-the-community.aspx">Statement from Microsoft on why IE9 does not have native WebM support</a>.</p> + +<p>The WebM format, specifically the VP8 video codec, had been acccused of patent infringment by a group of companies answering a call by the MPEG LA for the formation of a patent pool, but <a href="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8" title="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8">MPEG LA has agreed to license those patents to Google</a> under a "<a href="http://xiphmont.livejournal.com/59893.html?thread=310261#t310261" title="http://xiphmont.livejournal.com/59893.html?thread=310261#t310261">perpetual, transferable, royalty free license"</a>. This means, effectively, that all known patents on the WebM format are licensed to everyone for free. </p> + +<p>Gecko recognizes the following MIME types as WebM files:</p> + +<dl> + <dt><code>video/webm</code></dt> + <dd>A WebM media file containing video (and possibly audio as well).</dd> + <dt><code>audio/webm</code></dt> + <dd>A WebM media file containing only audio.</dd> +</dl> + +<h2 id="Ogg_Theora_Vorbis">Ogg Theora Vorbis</h2> + +<p>The Ogg container format with the Theora video codec and the Vorbis audio codec is supported in desktop/mobile Gecko (Firefox), Chrome, and Opera, and support for the format can be added to Safari (but not on iOS) by installing an add-on. The format is not supported in Internet Explorer in any way.</p> + +<p>WebM is generally preferred over Ogg Theora Vorbis when available, because it provides a better compression to quality ratio and is supported in more browsers. The Ogg format can however be used to support older browser versions (for example Firefox 3.5/3.6 don't support WebM, but do support Ogg.)</p> + +<p>The patent situation of Theora is similar to that of WebM.</p> + +<p>You can learn more about creating Ogg media by reading the <a class="external" href="http://en.flossmanuals.net/ogg-theora/" title="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a>.</p> + +<p>Gecko recognizes the following MIME types as Ogg files:</p> + +<dl> + <dt><code>audio/ogg</code></dt> + <dd>An Ogg file containing only audio.</dd> + <dt><code>video/ogg</code></dt> + <dd>An ogg file containing video (and possibly also audio).</dd> + <dt><code>application/ogg</code></dt> + <dd>An Ogg file with unspecified content. Using one of the other two MIME types is preferred, but you can use this if you don't know what the contents of the file are.</dd> +</dl> + +<h2 id="Ogg_Opus">Ogg Opus</h2> + +<p>The Ogg container can also contain audio encoded using the <a class="external" href="http://www.opus-codec.org/" title="http://www.opus-codec.org/">Opus codec</a>. Support for this is available in Gecko 15.0 {{ geckoRelease("15.0") }} and later, on desktop and mobile browsers.</p> + +<h2 id="MP4_H.264_(AAC_or_MP3)">MP4 H.264 (AAC or MP3)</h2> + +<p>The MP4 container format with the H.264 video codec and the AAC audio codec is natively supported by desktop/mobile Internet Explorer, Safari and Chrome, but Chromium and Opera do not support the format. IE and Chrome also support the MP3 audio codec in the MP4 container, but Safari does not. Firefox/Firefox for Android/Firefox OS supports the format in some cases, but only when a third-party decoder is available, and the device hardware can handle the profile used to encode the MP4.</p> + +<div class="note"> +<p><strong>Note</strong>: MP4s encoded with a high profile will not run on lower end hardware, such as low end Firefox OS phones.</p> +</div> + +<p>The MPEG media formats are covered by patents, which are not freely licensed. All the necessary licenses can be bought from MPEG LA. Since H.264 is currently not a royalty free format, it is unfit for the open web platform, according to Mozilla [<a class="external" href="http://shaver.off.net/diary/2010/01/23/html5-video-and-codecs/" title="http://shaver.off.net/diary/2010/01/23/html5-video-and-codecs/">1</a>, <a class="external" href="http://robert.ocallahan.org/2010/01/video-freedom-and-mozilla_23.html" title="http://robert.ocallahan.org/2010/01/video-freedom-and-mozilla_23.html">2</a>], Google [<a class="external" href="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html" title="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html">1</a>, <a class="external" href="http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html" title="http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html">2</a>] and Opera. However, since royalty free formats are not supported by Internet Explorer and Safari, <a href="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/" title="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/">Mozilla has decided to support the format anyway</a>, and Google never fulfilled their promise to <span class="external">remove support for it in Chrome</span>.</p> + +<h2 id="MP3">MP3</h2> + +<p>The MP3 audio format (.mp3, <code>audio/mpeg</code>; distinct from the above MP3 audio in an MP4 container case) is supported in <code><audio></code> by Firefox/Firefox for Android/Firefox OS when the operating system provides an MP3 decoder, and by Internet Explorer, Chrome and Safari.</p> + +<h2 id="WAVE_PCM">WAVE PCM</h2> + +<p>The WAVE container format, with the PCM audio codec (WAVE codec "1") is supported by desktop/mobile Gecko (Firefox) and Safari. Files in the WAVE container format typically end with the ".wav" extension.</p> + +<div class="note"><strong>Note: </strong>See <a class="external" href="http://www.rfc-editor.org/rfc/rfc2361.txt" title="http://www.rfc-editor.org/rfc/rfc2361.txt">RFC 2361</a> for the WAVE codec registry.</div> + +<p>Gecko recognizes the following MIME types as WAVE audio files:</p> + +<ul> + <li><code>audio/wave</code> (preferred)</li> + <li><code>audio/wav</code></li> + <li><code>audio/x-wav</code></li> + <li><code>audio/x-pn-wav</code></li> +</ul> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>3.0</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>9.0</td> + <td>10.50</td> + <td>3.1</td> + </tr> + <tr> + <td><code><audio></code>: PCM in WAVE</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatNo() }}</td> + <td>10.50</td> + <td>3.1</td> + </tr> + <tr> + <td><code><audio></code>: Vorbis in WebM</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>10.60</td> + <td>3.1 (must be installed separately)</td> + </tr> + <tr> + <td><code><audio></code>: Vorbis in Ogg</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatNo() }}</td> + <td>10.50</td> + <td>3.1 (must be installed separately, e.g. <a class="external" href="http://www.xiph.org/quicktime/" title="http://www.xiph.org/quicktime/">XiphQT</a>)</td> + </tr> + <tr> + <td><audio>: MP3</td> + <td>{{ CompatVersionUnknown() }} (Not in Chromium)</td> + <td>Partial (see below)</td> + <td>9.0</td> + <td>{{ CompatNo() }}</td> + <td>3.1</td> + </tr> + <tr> + <td><code><audio></code>: MP3 in MP4</td> + <td> + <p>{{ CompatUnknown() }}</p> + </td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: AAC in MP4</td> + <td> + <p>{{ CompatVersionUnknown() }} (Main only) (Not in Chromium)</p> + </td> + <td> + <p>Partial (see below)</p> + </td> + <td>9.0</td> + <td>{{ CompatNo() }}</td> + <td>3.1</td> + </tr> + <tr> + <td><code><audio></code>: Opus in Ogg</td> + <td>27.0</td> + <td>{{ CompatGeckoDesktop("15.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><video></code>: VP8 and Vorbis in WebM</td> + <td>6.0</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>9.0 (<a class="external" href="http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx" title="http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx">must be installed separately</a>, e.g. <a class="external" href="http://tools.google.com/dlpage/webmmf/" title="http://tools.google.com/dlpage/webmmf/">WebM MF</a>)</td> + <td>10.60</td> + <td>3.1 (must be installed separately, e.g. <a class="external" href="http://perian.org/" title="http://perian.org/">Perian</a>)</td> + </tr> + <tr> + <td><code><video></code>: VP9 and Opus in WebM</td> + <td>29.0</td> + <td>{{ CompatGeckoDesktop("28.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><video></code>: Theora and Vorbis in Ogg</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatNo() }}</td> + <td>10.50</td> + <td>3.1 (must be installed separately, e.g. <a class="external" href="http://www.xiph.org/quicktime/" title="http://www.xiph.org/quicktime/">XiphQT</a>)</td> + </tr> + <tr> + <td><code><video></code>: H.264 and MP3 in MP4</td> + <td> + <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p> + </td> + <td>Partial (see below)</td> + <td>9.0</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code><video></code>: H.264 and AAC in MP4</td> + <td> + <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p> + </td> + <td>Partial (see below)</td> + <td>9.0</td> + <td>{{ CompatNo() }}</td> + <td>3.1</td> + </tr> + <tr> + <td>any other format</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>3.1 (plays all formats available via QuickTime)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Opera Mini</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.3</td> + <td>24.0</td> + <td>1.0.1</td> + <td>10.0</td> + <td>11.0</td> + <td>Partial (see below)</td> + <td>3.2</td> + <td>29.0</td> + </tr> + <tr> + <td><code><audio></code>: PCM in WAVE</td> + <td>{{ CompatUnknown() }}</td> + <td>24.0</td> + <td>1.0.1</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>Partial (see below)</td> + <td>3.2</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: Vorbis in WebM</td> + <td>{{ CompatUnknown() }}</td> + <td>24.0</td> + <td>1.0.1</td> + <td>{{ CompatNo() }}</td> + <td>11.0</td> + <td>Partial (see below)</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: Vorbis in Ogg</td> + <td>{{ CompatUnknown() }}</td> + <td>24.0</td> + <td>1.0.1</td> + <td>{{ CompatNo() }}</td> + <td>11.0</td> + <td>Partial (see below)</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: MP3</td> + <td>{{ CompatUnknown() }}</td> + <td>Partial (see below)</td> + <td>Partial (see below)</td> + <td>10.0</td> + <td>{{ CompatNo() }}</td> + <td>Partial (see below)</td> + <td>3.2</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: MP3 in MP4</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: AAC in MP4</td> + <td>{{ CompatUnknown() }}</td> + <td>Partial (see below)</td> + <td>Partial (see below)</td> + <td>10.0</td> + <td>{{ CompatNo() }}</td> + <td>Partial (see below)</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: Opus in Ogg</td> + <td>{{ CompatNo() }}</td> + <td>24.0</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>Partial (see below)</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code><video></code>: VP8 and Vorbis in WebM</td> + <td>2.3</td> + <td>24.0</td> + <td>1.0.1</td> + <td>{{ CompatNo() }}</td> + <td>16.0</td> + <td>Partial (see below)</td> + <td>{{ CompatNo() }}</td> + <td>29.0</td> + </tr> + <tr> + <td><code><video></code>: VP9 and Opus in WebM</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><video></code>: Theora and Vorbis in Ogg</td> + <td>{{ CompatNo() }}</td> + <td>24.0</td> + <td>1.0.1</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>Partial (see below)</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code><video></code>: H.264 and MP3 in MP4</td> + <td>Partial (see below)</td> + <td>24.0</td> + <td>Partial (see below)</td> + <td>10.0</td> + <td>Partial since 11.0, full since 16.0</td> + <td>Partial (see below)</td> + <td>{{ CompatUnknown() }}</td> + <td>29.0</td> + </tr> + <tr> + <td><code><video></code>: H.264 and AAC in MP4</td> + <td>Partial (see below)</td> + <td>24.0</td> + <td>Partial (see below)</td> + <td>10.0</td> + <td>Partial since 11.0, full since 16.0</td> + <td>Partial (see below)</td> + <td>3.2</td> + <td>29.0</td> + </tr> + <tr> + <td>any other format</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>Notes:</p> + +<ul> + <li>AAC is only supported in the MP4 container.</li> + <li>Opera Mini itself doesn't support any video or audio, but any video or audio is passed to the device to play if it has support for that format. Opera Mobile also does this with unsupported formats.</li> + <li>To get the default Android browser to play H.264 video, you need to jump through some hoops, as <a href="http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/">explained by Peter Gasston</a>.</li> + <li>In Firefox OS 1.0.1, when detecting <code><video></code> support for different formats, <code>HTMLMediaElement.prototype.canPlayType</code> incorrectly reports <code>true</code> for h.264 video whereas in actual fact h.264 is not supported. In Firefox OS 1.1 this problem has been fixed.</li> + <li>To avoid patent issues, support for MPEG 4, H.264, MP3 and AAC is not built directly into Firefox on desktop and mobile (Android and Firefox OS). Instead it relies on support from the OS or hardware (the hardware also needs to be able to support the profile used to encode the video, in the case of MP4). Firefox desktop supports these formats on the following platforms:</li> +</ul> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Platform</th> + <th scope="col">Gecko (Firefox) version</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=799315" title="https://bugzilla.mozilla.org/show_bug.cgi?id=799315">Windows 7+</a></td> + <td>21.0</td> + </tr> + <tr> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825153" title="https://bugzilla.mozilla.org/show_bug.cgi?id=825153">Windows Vista</a></td> + <td>22.0</td> + </tr> + <tr> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=748351" title="https://bugzilla.mozilla.org/show_bug.cgi?id=748351">Android</a></td> + <td>20.0</td> + </tr> + <tr> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=714408" title="https://bugzilla.mozilla.org/show_bug.cgi?id=714408">Firefox OS</a></td> + <td>15.0</td> + </tr> + <tr> + <td>Linux</td> + <td> + <p>26.0 (relies on GStreamer codecs being installed)</p> + </td> + </tr> + <tr> + <td>OS X 10.7</td> + <td><strong>Not yet </strong>(see <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=851290" title="https://bugzilla.mozilla.org/show_bug.cgi?id=851290">bug</a>)</td> + </tr> + </tbody> +</table> + +<ul> + <li><a class="external" href="http://dev.opera.com/articles/view/introduction-html5-video/#codecs" title="http://dev.opera.com/articles/view/introduction-html5-video/#codecs">Video codecs in Opera</a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975073%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ff975073%28v=VS.85%29.aspx">Video codecs in Internet Explorer</a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975061%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ff975061%28v=vs.85%29.aspx">Audio codecs in Internet Explorer</a></li> + <li><a href="http://www.chromium.org/audio-video" title="http://www.chromium.org/audio-video">Audio & Video codecs in Chrome</a></li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="internal" href="/en/Using_HTML5_audio_and_video" title="En/Using audio and video in Firefox">Using audio and video in Firefox</a></li> + <li><a href="http://bluishcoder.co.nz/2013/08/21/html-media-support-in-firefox.html">HTML media support in Firefox</a></li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#media-elements" title="http://www.whatwg.org/specs/web-apps/current-work/#media-elements">Media elements</a> (HTML 5 specification)</li> + <li><code><a class="internal" href="/en/HTML/Element/Video" title="En/HTML/Element/Video">video</a></code></li> + <li><a class="internal" href="/en/HTML/Element/Audio" title="En/HTML/Element/Audio"><code>audio</code></a></li> +</ul> diff --git a/files/zh-tw/conflicting/web/opensearch/index.html b/files/zh-tw/conflicting/web/opensearch/index.html new file mode 100644 index 0000000000..780e92fb84 --- /dev/null +++ b/files/zh-tw/conflicting/web/opensearch/index.html @@ -0,0 +1,36 @@ +--- +title: 自網頁添加搜尋引擎 +slug: Web/API/Window/sidebar/Adding_search_engines_from_Web_pages +tags: + - 搜尋模組 +translation_of: Web/OpenSearch +translation_of_original: Web/API/Window/sidebar/Adding_search_engines_from_Web_pages +--- +<p>Firefox 可以用 JavaScript 安裝搜尋引擎模組，且支援 <a href="zh_tw/%e8%a3%bd%e4%bd%9c_OpenSearch_%e6%90%9c%e5%b0%8b%e6%a8%a1%e7%b5%84">OpenSearch</a> 及 Sherlock 兩種模組格式。 +</p> +<div class="note"><b>註：</b> 自 Firefox 2 起，偏好的模組格式為 OpenSearch。</div> +<p>當 JavaScript 程式碼要安裝新的搜尋模組時，Firefox 會詢問使用者是否允許安裝。 +</p> +<h2 id=".E5.AE.89.E8.A3.9D_OpenSearch_.E6.A8.A1.E7.B5.84">安裝 OpenSearch 模組</h2> +<p>要安裝 OpenSearch 模組，必須使用 <code>window.external.AddSearchProvider()</code> DOM 方法。此方法的語法為： +</p> +<pre class="eval">window.external.AddSearchProvider(<i>搜尋模組 URL</i>); +</pre> +<p>其中 <i>搜尋模組 URL</i> 為搜尋引擎模組之 XML 檔的絕對連結 URL。 +</p> +<div class="note"><b>注意：</b> OpenSearch 自 Firefox 2 起的版本才支援。</div> +<h2 id=".E5.AE.89.E8.A3.9D_Sherlock_.E6.A8.A1.E7.B5.84">安裝 Sherlock 模組</h2> +<p>要安裝 Sherlock 模組，必須叫用 <code>window.sidebar.addSearchEngine()</code> 方法，語法為： +</p> +<pre class="eval">window.sidebar.addSearchEngine(<i>搜尋模組 URL</i>, <i>圖示 URL</i>, <i>建議名稱</i>, <i>建議分類</i>); +</pre> +<ul><li> <code>搜尋模組 URL</code> 參數為欲安裝的 Sherlock 格式檔（「.src」檔）URL。 +</li><li> <code>圖示 URL</code> 參數為此模組的圖示 URL。 +</li><li> <code>建議名稱</code> 參數僅於請求使用者確認安裝模組時才使用，安裝時訊息為「Do you want to install <i>建議名稱</i> from <i>搜尋模組 URL</i>？」 +</li><li> <code>建議分類</code> 參數並不使用，可以指定為空字串（<code>""</code>）或 <code>null</code>。 +</li></ul> +<p>Sherlock 的相關資訊可參考 <a class=" external" href="http://developer.apple.com/macosx/sherlock/">http://developer.apple.com/macosx/sherlock/</a> +</p> +<div class="noinclude"> +</div> +{{ languages( { "ca": "ca/Addici\u00f3_de_motors_de_cerca_a_les_p\u00e0gines_web", "en": "en/Adding_search_engines_from_web_pages", "es": "es/A\u00f1adir_motores_de_b\u00fasqueda_desde_p\u00e1ginas_web", "fr": "fr/Ajout_de_moteurs_de_recherche_depuis_des_pages_Web", "it": "it/Installare_plugin_di_ricerca_dalle_pagine_web", "ja": "ja/Adding_search_engines_from_web_pages", "pl": "pl/Dodawanie_wyszukiwarek_z_poziomu_stron_WWW" } ) }} |