diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
| commit | 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (patch) | |
| tree | a9ef8ac1e1b8fe4207b6d64d3841bfb8990b6fd0 /files/zh-tw/web/guide | |
| parent | 074785cea106179cb3305637055ab0a009ca74f2 (diff) | |
| download | translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.gz translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.bz2 translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.zip | |
initial commit
Diffstat (limited to 'files/zh-tw/web/guide')
17 files changed, 1487 insertions, 0 deletions
diff --git a/files/zh-tw/web/guide/ajax/getting_started/index.html b/files/zh-tw/web/guide/ajax/getting_started/index.html new file mode 100644 index 0000000000..7e27c1ebac --- /dev/null +++ b/files/zh-tw/web/guide/ajax/getting_started/index.html @@ -0,0 +1,287 @@ +--- +title: 入門篇 +slug: Web/Guide/AJAX/Getting_Started +tags: + - AJAX + - API + - Advanced + - JavaScript + - WebMechanics + - XMLHttpRequest +translation_of: Web/Guide/AJAX/Getting_Started +--- +<p class="summary">這篇文章說明 AJAX 相關技術的基礎，並提供兩個簡單的實際操作範例供您入門。</p> + +<h3 id="AJAX_是什麼？">AJAX 是什麼？</h3> + +<p>AJAX 代表 <strong>A</strong>synchronous <strong>J</strong>avaScript <strong>A</strong>nd <strong>X</strong>ML，即非同步 JavaScript 及 XML。簡單地說，AJAX 使用 {{domxref("XMLHttpRequest")}} 物件來與伺服器進行通訊。它可以傳送並接收多種格式的資訊，包括 JSON、XML、HTML、以及文字檔案。AJAX 最吸引人的特點是「非同步」的本質，這代表它可以與伺服溝通、交換資料、以及更新頁面，且無須重整網頁。</p> + +<p>有兩項即將討論到的特點如下︰</p> + +<ul> + <li>無須重新載入整個頁面，便能對伺服器發送請求</li> + <li>分析並運用 XML 文件</li> +</ul> + +<h3 id="第一步_–_如何發出_HTTP_請求">第一步 – 如何發出 HTTP 請求</h3> + +<p>為了使用 JavaScript 向伺服器發送 HTTP 請求，便需要一個能夠提供相關功能的類別實體（an instance of a class）。這樣的類別最初由 Internet Explorer 以 ActiveX 物件的方式引入，稱為 <code>XMLHTTP</code>。Mozilla、Safari 及其他瀏覽器則隨後跟進，實作了 <code>XMLHttpRequest</code> 類別，以提供微軟最初的 ActiveX 物件中的方法及屬性。</p> + +<p>因此，為了建立能夠跨瀏覽器的物件實體，可以這麼寫：</p> + +<pre class="brush: js notranslate">// Old compatibility code, no longer needed. +if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ... + httpRequest = new XMLHttpRequest(); +} else if (window.ActiveXObject) { // IE 6 and older + httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); +} +</pre> + +<div class="note"><strong>備註：</strong>出於解說上的需要，上述代碼使用最簡方式建立 XMLHTTP 的實體。較貼近實際運用的範例，見第三步。</div> + +<p>部分版本的 Mozilla 瀏覽器，在伺服器送回的資料未含 XML <code>mime-type</code> 標頭（header）時會出錯。為了避免這個問題，你可以用下列方法覆寫伺服器傳回的檔頭，以免傳回的不是 <code>text/xml</code>。</p> + +<pre class="notranslate">httpRequest = new XMLHttpRequest(); +httpRequest.overrideMimeType('text/xml'); +</pre> + +<p>接下來是要決定伺服器傳回資料後的處理方式，此時你只要以 <code>onreadystatechange</code> 這個屬性指明要處理傳回值的 JavaScript 函式名稱即可，例如：</p> + +<pre class="brush: js notranslate"><code>httpRequest.onreadystatechange = nameOfTheFunction;</code></pre> + +<p>注意，指定的函式名稱後不加括號也沒有參數。這只是簡單的賦值，而非真的呼叫函數。除了指定函式名稱外，你也能用 Javascript 即時定義函式的技巧（稱為〝匿名函數〞）來定一個新的處理函式，如下：</p> + +<pre class="brush: js notranslate">httpRequest.onreadystatechange = function(){ + // 做些事 +}; +</pre> + +<p>決定處理方式之後你得確實發出 request，此時需叫用 HTTP request 類別的 <code>open()</code> 及 <code>send()</code> 方法，如下：</p> + +<pre class="brush: js notranslate">httpRequest.open('GET', 'http://www.example.org/some.file', true); +httpRequest.send(); +</pre> + +<ul> + <li><code>open()</code> 的第一個參數是 HTTP request 的方法，也就是從 GET、POST、HEAD 等伺服器支援的方法中擇一使用。為遵循 HTTP 標準，請記得這些方法都是大寫，否則有的瀏覽器（如 Firefox）不會處理這些請求。其他可用的 HTTP request 方法的列表請參考 <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">W3C 規格書</a>。</li> + <li>第二個參數是請求頁面的 URL。基於安全考量，你不能叫用同網域以外的網頁。如果網域不同，則叫用 <code>open()</code> 時會出現「權限不足，拒絕存取」那類的錯誤。常見的錯誤多為在 domain.tld 的網站下呼叫 www.domain.tld 中的網頁，僅是一點點差別都不行。</li> + <li>第三個參數決定此 request 是否不同步進行，如果設定為 <code>TRUE</code> 則即使伺服器尚未傳回資料也會繼續執行其餘的程式，這也就是 AJAX 中第一個 A 代表的意義。</li> +</ul> + +<p><code>send()</code> 的參數在以 POST 發出 request 時，可以是任何想傳給伺服器的東西，而資料則以查詢字串的方式列出，例如：</p> + +<pre class="notranslate"><code>"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"</code></pre> + +<p>不過如果你想要以 POST 方式傳送資料，則必須先將 MIME 型態改好，如下：</p> + +<pre class="brush: js notranslate">httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); +</pre> + +<p>否則伺服器就不會理你傳過來的資料了。</p> + +<h3 id="第二步_–_處理伺服器傳回的資料">第二步 – 處理伺服器傳回的資料</h3> + +<p>傳出 request 時必須提供處理傳回值的函數名稱，這個函數是用來處理伺服器的回應。</p> + +<pre class="brush: js notranslate">httpRequest.onreadystatechange = nameOfTheFunction; +</pre> + +<p>那麼來看看這個函數該做些什麼。首先，它必須檢查 request 目前的狀態。如果狀態值為 4 代表伺服器已經傳回所有資訊了，便可以開始解析所得資訊。</p> + +<pre class="brush: js notranslate">if (httpRequest.readyState === XMLHttpRequest.DONE) { + // 一切 ok, 繼續解析 +} else { + // 還沒完成 +} +</pre> + +<p><code>readyState</code> 所有可能的值如下：</p> + +<ul> + <li>0（還沒開始）</li> + <li>1（讀取中）</li> + <li>2（已讀取）</li> + <li>3（資訊交換中）</li> + <li>4（一切完成）</li> +</ul> + +<p>（<a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_1.asp">資料來源：MSDN</a>）</p> + +<p>接下來要檢查伺服器傳回的 HTTP 狀態碼。所有狀態碼列表可於 <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">W3C 網站</a>上查到，但我們要管的是 <code>200 OK</code> 這種狀態。</p> + +<pre class="brush: js notranslate">if (httpRequest.status === 200) { + // 萬事具備 +} else { + // 似乎有點問題。 + // 或許伺服器傳回了 404（查無此頁） + // 或者 500（內部錯誤）什麼的。 +} +</pre> + +<p>檢查傳回的 HTTP 狀態碼後，要怎麼處理傳回的資料就由你決定了。有兩種存取資料的方式：</p> + +<ul> + <li><code>httpRequest.responseText</code> – 這樣會把傳回值視為字串用</li> + <li><code>httpRequest.responseXML</code> – 這樣會把傳回值視為 <code>XMLDocument</code> 物件，而後可用 JavaScript DOM 相關函式處理</li> +</ul> + +<h3 id="第三步_–_簡單範例">第三步 – 簡單範例</h3> + +<p>好，接著就做一次簡單的 HTTP 範例，演示方才的各項技巧。這段 JavaScript 會向伺服器要一份裡頭有「I'm a test.」字樣的 HTML 文件(<code>test.html</code>)，而後以 <code>alert()</code> 將文件內容列出。</p> + +<pre class="brush: html notranslate"><button id="ajaxButton" type="button">Make a request</button> + +<script> +(function() { + var httpRequest; + document.getElementById("ajaxButton").addEventListener('click', makeRequest); + + function makeRequest() { + httpRequest = new XMLHttpRequest(); + + if (!httpRequest) { + alert('Giving up :( Cannot create an XMLHTTP instance'); + return false; + } + httpRequest.onreadystatechange = alertContents; + httpRequest.open('GET', 'test.html'); + httpRequest.send(); + } + + function alertContents() { + if (httpRequest.readyState === XMLHttpRequest.DONE) { + if (httpRequest.status === 200) { + alert(httpRequest.responseText); + } else { + alert('There was a problem with the request.'); + } + } + } +})(); +</script> +</pre> + +<p>在此範例中：</p> + +<ul> + <li>首先使用者按下「Make a request」</li> + <li>這麼一來就會呼叫 <code>makeRequest()</code> 函式，亦傳入參數值 <code>test.html</code> (也就是那份 HTML 檔的名稱，放在同目錄下)</li> + <li>接著發出 request，而後會將主導權交給 <code>onreadystatechange</code> 指定的 <code>alertContents()</code> 函式</li> + <li><code>alertContents()</code> 檢查回應是否正常，而後以 <code>alert()</code> 將 <code>test.html</code> 的內容列出</li> +</ul> + +<p>你可以<a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test.html">由此測試本例</a>，也可以參考<a class="external" href="http://www.w3clubs.com/mozdev/test.html">測試檔案</a>。</p> + +<div class="note">Note:如果你傳送一個要求到一段代碼，而這段代碼將回應XML而非靜態的HTML檔，那則必須要設定一個可以在IE中運作的header。如果我們不設定header <code>Content-Type: application/xml</code>，IE將會在我們試圖運作的XML項目行下，回應一個"Object Expected" 的錯誤。</div> + +<div class="note">Note 2: 如果我們沒有設定header <code>Cache-Control: no-cache</code>，那瀏覽器將會藏匿response並且不再重新傳送request，造成除錯上的挑戰。我們也可以增加一個 always-different GET 參數，像是 timestamp 或 random number (詳見<a href="https://developer.mozilla.org/en/DOM/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache">bypassing the cache</a>)</div> + +<div class="note"><strong>Note 3</strong>: If the <code>httpRequest</code> variable is used globally, competing functions calling <code>makeRequest()</code> can overwrite each other, causing a race condition. Declaring the <code>httpRequest </code>variable local to a <a href="/en/JavaScript/Guide/Closures">closure</a> containing the AJAX functions avoids this.</div> + +<p>In the event of a communication error (such as the server going down), an exception will be thrown in the <code>onreadystatechange</code> method when accessing the response status. To mitigate this problem, you could wrap your <code>if...then</code> statement in a <code>try...catch</code>:</p> + +<pre class="brush: js notranslate">function alertContents() { + try { + if (httpRequest.readyState === XMLHttpRequest.DONE) { + if (httpRequest.status === 200) { + alert(httpRequest.responseText); + } else { + alert('There was a problem with the request.'); + } + } + } + catch( e ) { + alert('Caught Exception: ' + e.description); + } +} +</pre> + +<h3 id="第四步_–_運用_XML_資料">第四步 – 運用 XML 資料</h3> + +<p>前面的例子中，在收到 HTTP 傳回值後我們以物件的 <code>reponseText</code> 屬性接收 <code>test.html</code> 檔案的內容，接著來試試 <code>responseXML</code> 屬性。</p> + +<p>首先，我們得做個格式正確的 XML 文件以便稍後取用。文件 (<code>test.xml</code>) 內容如下：</p> + +<pre class="brush: html notranslate"><?xml version="1.0" ?> +<root> + I'm a test. +</root> +</pre> + +<p>在程式中，我們叫用檔案的地方只須略事修改如下：</p> + +<pre class="brush: html notranslate">... +onclick="makeRequest('test.xml')"> +... +</pre> + +<p>接著在 <code>alertContents()</code> 中，我們把 <code>alert(http_request.responseText);</code> 改成這樣：</p> + +<pre class="brush: js notranslate">var xmldoc = httpRequest.responseXML; +var root_node = xmldoc.getElementsByTagName('root').item(0); +alert(root_node.firstChild.data); +</pre> + +<p>這樣一來我們便可取得 <code>responseXML</code> 所傳回的 <code>XMLDocument</code> 物件，而後以 DOM 方法取用 XML 文件的內容。你可以參考 <a class="external" href="http://www.w3clubs.com/mozdev/test.xml"><code>test.xml</code> 的原始碼</a> 以及修改過後的<a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test_xml.html">測試程式</a>。</p> + +<p>關於 DOM 方法，請參考 <a class="external" href="http://www.mozilla.org/docs/dom/">Mozilla DOM</a> 文件。</p> + +<h3 id="Step_5_–_Working_with_data">Step 5 – Working with data</h3> + +<p>Finally, let's send some data to the server and receive a response. Our JavaScript will request a dynamic page this time, <code>test.php</code>, which will take the data we send and return a "computed" string - "Hello, [user data]!" - which we'll <code>alert().</code></p> + +<p>First we'll add a text box to our HTML so the user can enter their name:</p> + +<pre class="brush: html notranslate"><label>Your name: + <input type="text" id="ajaxTextbox" /> +</label> +<span id="ajaxButton" style="cursor: pointer; text-decoration: underline"> + Make a request +</span></pre> + +<p>We'll also add a line to our event handler to get the user's data from the text box and send it to the <code>makeRequest()</code> function along with the URL of our server-side script:</p> + +<pre class="brush: js notranslate"> document.getElementById("ajaxButton").onclick = function() { + var userName = document.getElementById("ajaxTextbox").value; + makeRequest('test.php',userName); + }; +</pre> + +<p>We need to modify <code>makeRequest()</code> to accept the user data and pass it along to the server. We'll change the request method from <code>GET</code> to <code>POST</code>, and include our data as a parameter in the call to <code>httpRequest.send()</code>:</p> + +<pre class="brush: js notranslate"> function makeRequest(url, userName) { + + ... + + httpRequest.onreadystatechange = alertContents; + httpRequest.open('POST', url); + httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); + httpRequest.send('userName=' + encodeURIComponent(userName)); + } +</pre> + +<p>The function <code>alertContents()</code> can be written the same way it was in Step 3 to alert our computed string, if that's all the server returns. However, let's say the server is going to return both the computed string and the original user data. So if our user typed "Jane" in the text box, the server's response would look like this:</p> + +<p><code>{"userData":"Jane","computedString":"Hi, Jane!"}</code></p> + +<p>To use this data within <code>alertContents()</code>, we can't just alert the <code>responseText</code>, we have to parse it and alert <code>computedString</code>, the property we want:</p> + +<pre class="brush: js notranslate">function alertContents() { + if (httpRequest.readyState === XMLHttpRequest.DONE) { + if (httpRequest.status === 200) { + var response = JSON.parse(httpRequest.responseText); + alert(response.computedString); + } else { + alert('There was a problem with the request.'); + } + } +}</pre> + +<p>The <code>test.php file should contain the following:</code></p> + +<pre class="brush: php notranslate"><code>$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'no name'; +$computedString = "Hi, " . $name; +$array = ['userName' => $name, 'computedString' => $computedString]; +echo json_encode($array);</code></pre> + +<p><code>For more on DOM methods, be sure to check <a class="external" href="http://www.mozilla.org/docs/dom/">Mozilla's DOM implementation</a> documents.</code></p> diff --git a/files/zh-tw/web/guide/ajax/index.html b/files/zh-tw/web/guide/ajax/index.html new file mode 100644 index 0000000000..8e6a49698f --- /dev/null +++ b/files/zh-tw/web/guide/ajax/index.html @@ -0,0 +1,119 @@ +--- +title: Ajax +slug: Web/Guide/AJAX +translation_of: Web/Guide/AJAX +--- +<div class="callout-box"><strong><a href="/zh-TW/docs/Web/Guide/AJAX/Getting_Started" title="zh-TW/docs/Web/Guide/AJAX/Getting_Started">入門篇</a></strong><br> +Ajax 簡介。</div> + +<div> +<p><strong>非同步 JavaScript 及 XML（Asynchronous JavaScript and XML，AJAX）</strong> 並不能稱做是種「技術」，而是 2005 年時由 Jesse James Garrett 所發明的術語，描述一種使用數個既有技術的「新」方法。這些技術包括 <a href="/zh-TW/docs/HTML" title="zh-TW/docs/HTML">HTML</a> 或 <a href="/zh-TW/docs/XHTML" title="zh-TW/docs/XHTML">XHTML</a>、<a href="/zh-TW/docs/CSS" title="zh-TW/docs/CSS">層疊樣式表</a>、<a href="/zh-TW/docs/JavaScript" title="zh-TW/docs/JavaScript">JavaScript</a>、<a href="/zh-TW/docs/DOM" title="zh-TW/docs/DOM">文件物件模型</a>、<a href="/zh-TW/docs/XML" title="zh-TW/docs/XML">XML</a>、<a href="/zh-TW/docs/XSLT" title="zh-TW/docs/XSLT">XSLT</a> 以及最重要的 <a href="/zh-TW/docs/XMLHttpRequest" title="zh-TW/docs/XMLHttpRequest">XMLHttpRequest 物件</a>。<br> + 當這些技術被結合在 Ajax 模型中，Web 應用程式便能快速、即時更動介面及內容，不需要重新讀取整個網頁，讓程式更快回應使用者的操作。</p> + +<p>雖然 X 在 Ajax 中代表 XML，但由於 <a href="/zh-TW/docs/JSON" title="https://developer.mozilla.org/en-US/docs/JSON">JSON</a> 的許多優點，如輕量以及其本身就是 JavaScript 的一部分等，讓現今 JSON 比起 XML 被更廣泛的使用。JSON 與 XML 兩者都被用來在 Ajax 模型中包裝資訊。</p> +</div> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="文件">文件</h2> + +<dl> + <dt><a href="/zh-TW/docs/AJAX/Getting_Started" title="zh-TW/docs/AJAX/Getting_Started">入門篇</a></dt> + <dd>這篇文章會指引你瞭解 Ajax 的基礎知識並提供了兩個簡單的動手做範例來入門。</dd> + <dt><a href="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">使用 XMLHttpRequest API</a></dt> + <dd><a href="/zh-TW/docs/DOM/XMLHttpRequest" title="XMLHttpRequest"><code>XMLHttpRequest</code> API</a> 是 Ajax 的核心。這篇文章將解釋如何使用一些 Ajax 技術，例如： + <ul> + <li><a href="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Handling_responses" title="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Handling_responses">分析及處理伺服器回應</a></li> + <li><a href="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress" title="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress">監視請求進度</a></li> + <li><a href="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">提交表單與上傳二進制檔案</a> – 使用<em>單純的</em> Ajax，或使用 <a href="/zh-TW/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> 物件</li> + <li><a href="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Types_of_requests" title="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Types_of_requests">建立同步或非同步請求</a></li> + <li>在 <a href="/en-US/docs/DOM/Worker" title="/zh-TW/docs/DOM/Worker">Web workers</a> 中使用 Ajax</li> + </ul> + </dd> + <dt><a href="/zh-TW/docs/Web/API/Fetch_API">Fetch API</a></dt> + <dd>Fetch API 提供了取得資源（fetching resources）的介面（interface）。這似乎對於曾使用過 {{domxref("XMLHTTPRequest")}} 的人而言並不陌生，然而這個 API 提供一個更強大且彈性的功能集。</dd> + <dt><a href="/en-US/docs/Server-sent_events" title="/en-US/docs/Server-sent_events">Server-sent events</a></dt> + <dd>傳統上來說，一個網頁必須送出 request 到伺服器來得到新的資料，也就是說，網頁藉由server-sent 事件從伺服器請求 (request) 資料，伺服器在任何時候都能送新的資料給網頁，藉由推送訊息到網頁。這些傳入的訊息可以被視為網頁中的 <em><a href="/en-US/docs/DOM/event" title="DOM/Event">事件</a></em> + 資料，請參見 <a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="/en-US/docs/Server-sent_events/Using_server-sent_events">使用server-sent event </a>。</dd> + <dt><a href="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history/Example" title="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history/Example"><em>Pure-Ajax</em> navigation example</a></dt> + <dd>This article provides a working (minimalist) example of a <em>pure-Ajax</em> website composed only of three pages.</dd> + <dt><a href="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data" title="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">Sending and Receiving Binary Data</a></dt> + <dd>The <code>responseType</code> property of the XMLHttpRequest object can be set to change the expected response type from the server. Possible values are the empty string (default), <code>"arraybuffer"</code>, <code>"blob"</code>, <code>"document"</code>, <code>"json"</code>, and <code>"text"</code>. The <code>response</code> property will contain the entity body according to <code>responseType</code>, as an <code>ArrayBuffer</code>, <code>Blob</code>, <code>Document</code>, <code>JSON</code>, or string. This article will show some Ajax I/O techniques.</dd> + <dt><a href="/en-US/docs/XML" title="XML">XML</a></dt> + <dd>可擴展標記語言（The Extensible Markup Language, XML）是W3C推薦的用於創建特殊用途標記語言的通用標記語言。它是SGML的簡化子集，能夠描述許多不同類型的數據。其主要目的是促進不同系統間的數據共享，特別是通過網際網路連接的系統。</dd> + <dt><a href="/en-US/docs/JXON" title="JXON">JXON</a></dt> + <dd>JXON 代表無損耗 <strong>J</strong>avascript <strong>X</strong>ML <strong>O</strong>bject <strong>N</strong>otation, 是一個通用名稱，用來定義使用 XML 的 Javascript 物件樹(JSON) 的通用名稱。</dd> + <dt><a href="/en-US/docs/Parsing_and_serializing_XML" title="Parsing_and_serializing_XML">解析和序列化 XML</a></dt> + <dd>如何從一串字串，一個檔案中透過 Javascript 解析一個 XML 文件 ，以及如何將 XML 檔案序列化成字串、Javascript 物件樹(JXON) 或檔案。 </dd> + <dt><a href="/en-US/docs/XPath" title="XPath">XPath</a></dt> + <dd>XPath stands for <strong>X</strong>ML <strong>Path</strong> Language, it uses a non-XML syntax that provides a flexible way of addressing (pointing to) different parts of an <a href="/en-US/docs/XML" title="XML">XML</a> document. As well as this, it can also be used to test addressed nodes within a document to determine whether they match a pattern or not.</dd> + <dt><a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader">The <code>FileReader</code> API</a></dt> + <dd>The <code>FileReader</code> API lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using <a href="https://developer.mozilla.org/en-US/docs/DOM/File" title="/en-US/docs/DOM/File"><code>File</code></a> or <a href="https://developer.mozilla.org/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob"><code>Blob</code></a> objects to specify the file or data to read. File objects may be obtained from a <a href="https://developer.mozilla.org/en-US/docs/DOM/FileList" title="/en-US/docs/DOM/FileList"><code>FileList</code></a> object returned as a result of a user selecting files using the <code><a href="https://developer.mozilla.org/en-US/docs/HTML/Element/input" title="<input>"><input></a></code> element, from a drag and drop operation's <a href="https://developer.mozilla.org/En/DragDrop/DataTransfer" title="En/DragDrop/DataTransfer"><code>DataTransfer</code></a> object, or from the <code>mozGetAsFile()</code> API on an <a href="https://developer.mozilla.org/en-US/docs/DOM/HTMLCanvasElement" title="/en-US/docs/DOM/HTMLCanvasElement"><code>HTMLCanvasElement</code></a>.</dd> + <dt><a href="/en-US/docs/HTML_in_XMLHttpRequest" title="en-US/docs/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></dt> + <dd>The W3C <a class="external" href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> specification adds HTML parsing support to <a href="/en/DOM/XMLHttpRequest" title="en/DOM/XMLHttpRequest"><code>XMLHttpRequest</code></a>, which originally supported only XML parsing. This feature allows Web apps to obtain an HTML resource as a parsed DOM using <code>XMLHttpRequest</code>.</dd> + <dt><a href="/en-US/docs/AJAX/Other_Resources" title="en-US/docs/AJAX/Other_Resources">Other resources</a></dt> + <dd>Other Ajax resources you may find useful.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/AJAX" title="en-US/docs/tag/AJAX">View All...</a></span></p> + +<h2 class="Other" id="參見">參見</h2> + +<dl> + <dt><a href="http://www.webreference.com/programming/ajax_tech/">Alternate Ajax Techniques</a></dt> + <dd>Most articles on Ajax have focused on using XMLHttp as the means to achieving such communication, but Ajax techniques are not limited to just XMLHttp. There are several other methods.</dd> + <dt><a href="http://adaptivepath.org/ideas/ajax-new-approach-web-applications/">Ajax: A New Approach to Web Applications</a></dt> + <dd>Jesse James Garrett, of <a href="http://www.adaptivepath.com">adaptive path</a>, wrote this article in February 2005, introducing Ajax and its related concepts.</dd> + <dt><a href="http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html">A Simpler Ajax Path</a></dt> + <dd>"As it turns out, it's pretty easy to take advantage of the XMLHttpRequest object to make a web app act more like a desktop app while still using traditional tools like web forms for collecting user input."</dd> + <dt><a href="http://alexbosworth.backpackit.com/pub/67688">Ajax Mistakes</a></dt> + <dd>Alex Bosworth has written this article outlining some of the mistakes Ajax application developers can make.</dd> + <dt><a href="http://www.xul.fr/en-xml-ajax.html">Tutorial</a> with examples.</dt> + <dd> </dd> + <dt><a href="http://www.w3.org/TR/XMLHttpRequest/">XMLHttpRequest specification</a></dt> + <dd>W3C Working draft</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Community" id="社群">社群</h2> + +<ul> + <li>View Mozilla forums...</li> +</ul> + +<div>{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}</div> + +<ul> + <li><a href="/en-US/docs/AJAX/Community" title="en-US/docs/AJAX/Community">Ajax community links</a></li> +</ul> + +<h2 class="Tools" id="工具">工具</h2> + +<ul> + <li><a href="http://www.ajaxprojects.com">Toolkits and frameworks</a></li> + <li><a href="http://www.getfirebug.com/">Firebug - Ajax/Web development tool</a></li> + <li><a href="http://blog.monstuff.com/archives/000252.html">AJAX Debugging Tool</a></li> + <li><a href="http://www.osflash.org/doku.php?id=flashjs">Flash/AJAX Integration Kit</a></li> + <li><a href="http://xkr.us/code/javascript/XHConn/">A Simple XMLHTTP Interface Library</a></li> +</ul> + +<p><span class="alllinks"><a href="/en-US/docs/AJAX:Tools" title="en-US/docs/AJAX:Tools">View All...</a></span></p> + +<h2 id="範例">範例</h2> + +<ul> + <li><a href="http://www.dhtmlgoodies.com/index.html?whichScript=ajax-poller">Ajax poller script</a></li> + <li><a href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=9">Ajax Chat Tutorial</a></li> + <li><a href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=13">RSS Ticker with Ajax</a></li> + <li><a href="http://www.thinkvitamin.com/features/ajax/create-your-own-ajax-effects">Create your own Ajax effects</a></li> + <li><a href="http://codinginparadise.org/weblog/2005/08/ajax-creating-huge-bookmarklets.html">Ajax: Creating Huge Bookmarklets</a></li> + <li><a href="http://www.hotajax.org">Ajax: Hot!Ajax There are many cool examples</a></li> +</ul> + +<h2 class="Related_Topics" id="相關主題">相關主題</h2> + +<p><a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DOM" title="en-US/docs/DOM">DOM</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>, <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>, <a href="/en-US/docs/nsIXMLHttpRequest" title="en-US/docs/XMLHttpRequest">XMLHttpRequest</a>, <a href="/en-US/docs/XSLT" title="en-US/docs/XSLT">XSLT</a>, <a href="/en-US/docs/DHTML" title="en-US/docs/DHTML">DHTML</a>, <a href="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript" title="en-US/docs/JavaScript/Same_origin_policy_for_JavaScript">Same Origin Policy</a></p> +</div> +</div> + +<p>{{ListSubpages}}</p> diff --git a/files/zh-tw/web/guide/api/index.html b/files/zh-tw/web/guide/api/index.html new file mode 100644 index 0000000000..950affd971 --- /dev/null +++ b/files/zh-tw/web/guide/api/index.html @@ -0,0 +1,25 @@ +--- +title: Guide to Web APIs +slug: Web/Guide/API +tags: + - API + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide/API +--- +<p>Here you'll find links to each of the guides introducing and explaining each of the APIs that make up the Web development architecture.</p> +<h2 id="Web_APIs_from_A_to_Z">Web APIs from A to Z</h2> + +<p>{{ListGroups}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API">Web API interface reference</a> (an index of all of the interfaces comprising all of these APIs)</li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model</a> (DOM)</li> + <li><a href="/en-US/docs/Web/Events">Web API event reference</a></li> + <li><a href="/en-US/docs/Learn">Learning web development</a></li> +</ul> diff --git a/files/zh-tw/web/guide/dom/index.html b/files/zh-tw/web/guide/dom/index.html new file mode 100644 index 0000000000..997730a412 --- /dev/null +++ b/files/zh-tw/web/guide/dom/index.html @@ -0,0 +1,21 @@ +--- +title: DOM developer guide +slug: Web/Guide/DOM +tags: + - API + - DOM + - Guide + - NeedsTranslation + - TopicStub +translation_of: Web/API/Document_Object_Model +--- +<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/web/guide/events/creating_and_triggering_events/index.html b/files/zh-tw/web/guide/events/creating_and_triggering_events/index.html new file mode 100644 index 0000000000..c198adaa5e --- /dev/null +++ b/files/zh-tw/web/guide/events/creating_and_triggering_events/index.html @@ -0,0 +1,144 @@ +--- +title: 建立或觸發事件 +slug: Web/Guide/Events/Creating_and_triggering_events +tags: + - Advanced + - DOM + - Guide + - JavaScript + - 事件 +translation_of: Web/Guide/Events/Creating_and_triggering_events +--- +<p>本文介紹如何建立和觸發事件。</p> + +<h2 id="建立自定義事件">建立自定義事件</h2> + +<p>事件可以用 {{domxref("Event")}} constructor 建立，如下所示：</p> + +<pre class="brush: js">var event = new Event('build'); + +// 監聽事件 +elem.addEventListener('build', function (e) { ... }, false); + +// 觸發事件 +elem.dispatchEvent(event);</pre> + +<p>除了 Internet Explorer 以外，大多數的瀏覽器都支持這個 constructor 。若要能夠支援 Internet Explore 的更詳細的方法，可以參考段落《<a href="#早期的做法" title="早期的作法">早期的做法</a>》。</p> + +<h3 id="增加自定義的資料－－CustomEvent()">增加自定義的資料－－CustomEvent()</h3> + +<p>要在事件的 object 追加其他資料，能使用 {{domxref("CustomEvent")}} 介面。它有 <u><strong>detail</strong></u> 屬性，可以用來傳送自訂資料。<br> + <span style="line-height: 1.5;">舉例來說，可以以下面方式建立事件：</span></p> + +<pre class="brush: js">var event = new CustomEvent('build', { 'detail': elem.dataset.time });</pre> + +<p>它可以讓你傳送自訂資料到事件的監聽器：</p> + +<pre class="brush: js">function eventHandler(e) { + log('The time is: ' + e.detail); +} +</pre> + +<h3 id="早期的做法">早期的做法</h3> + +<p>早期建立事件的方式參考了 Java 的 API 。下為一個早期作法的例子：</p> + +<pre class="brush: js">// 建立事件 +var event = document.createEvent('Event'); + +// 設定事件名稱為 “build” 。 +event.initEvent('build', true, true); + +// 監聽事件 +elem.addEventListener('build', function (e) { + // e.target matches elem +}, false); + +// 事件對象可以是任一 HTML 元素或是 EventTarget 。 +elem.dispatchEvent(event); + +</pre> + +<h2 id="觸發自定義事件">觸發自定義事件</h2> + +<p>下面的例子演示了一個複選框藉由 DOM 的 methods 模擬一次點擊（換言之，讓程式執行一次「點擊事件」。）。 <a class="external" href="http://developer.mozilla.org/samples/domref/dispatchEvent.html">觀看實例</a>。</p> + +<pre class="brush: js">function simulateClick() { + var event = new MouseEvent('click', { + 'view': window, + 'bubbles': true, + 'cancelable': true + }); + var cb = document.getElementById('checkbox'); + var canceled = !cb.dispatchEvent(event); + if (canceled) { + // A handler called preventDefault. + alert("canceled"); + } else { + // None of the handlers called preventDefault. + alert("not canceled"); + } +}</pre> + +<h2 id="Browser_compatibility" name="Browser_compatibility" style="line-height: 30px; font-size: 2.14285714285714rem;">瀏覽器的支援度</h2> + +<h2 id="sect1"> </h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th style="line-height: 16px;">Feature</th> + <th style="line-height: 16px;">Chrome</th> + <th style="line-height: 16px;">Firefox (Gecko)</th> + <th style="line-height: 16px;">Edge</th> + <th style="line-height: 16px;">Internet Explorer</th> + <th style="line-height: 16px;">Opera</th> + <th style="line-height: 16px;">Safari (WebKit)</th> + </tr> + <tr> + <td><code>Event()</code> constructor</td> + <td>15</td> + <td>11</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>11.60</td> + <td>6</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th style="line-height: 16px;">Feature</th> + <th style="line-height: 16px;">Android</th> + <th style="line-height: 16px;">Firefox Mobile (Gecko)</th> + <th style="line-height: 16px;">IE Mobile</th> + <th style="line-height: 16px;">Opera Mobile</th> + <th style="line-height: 16px;">Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>6</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="延伸閱讀">延伸閱讀</h2> + +<ul> + <li>{{domxref("document.createEvent()")}}</li> + <li>{{domxref("Event.initEvent()")}}</li> + <li>{{domxref("EventTarget.dispatchEvent()")}}</li> + <li>{{domxref("EventTarget.addEventListener()")}}</li> +</ul> diff --git a/files/zh-tw/web/guide/events/event_handlers/index.html b/files/zh-tw/web/guide/events/event_handlers/index.html new file mode 100644 index 0000000000..519ac8bf90 --- /dev/null +++ b/files/zh-tw/web/guide/events/event_handlers/index.html @@ -0,0 +1,178 @@ +--- +title: DOM on-event 處理器 +slug: Web/Guide/Events/Event_handlers +translation_of: Web/Guide/Events/Event_handlers +--- +<p><span class="seoSummary">Web 平台提供了多種獲得 <a href="/zh-TW/docs/Web/Events">DOM 事件</a>通知的方式。兩種常見的風格為：通用的 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 及一組特定的 <em><strong>on-event</strong></em> 處理器。</span>本頁聚焦在後者如何運作的細節。</p> + +<h3 id="註冊_on-event_處理器">註冊 <em>on-event</em> 處理器</h3> + +<p><em><strong>on-event</strong></em> 處理器為一群由 DOM 元素提供的屬性（{{Glossary("property")}}），用來協助管理元素要如何應對事件。元素可以是具互動性的（如：links、buttons、images、forms）或非互動性的（如頁面基礎 document）。事件為一個操作，像是點擊（clicked）、偵測按下按鍵（pressed keys）、取得焦點（focus）等。on-event 處理器通常是根據它被設計來應對的事件，例如 <code>onclick</code>、<code>onkeypress</code>、<code>onfocus</code> 等等。</p> + +<p>你可以使用兩種不同的方式來為一個物件的特定事件（例如：{{event("click")}}）指定一個 <code>on<...></code> 事件處理器：</p> + +<ul> + <li>在元素上使用一個名稱為 <code>on<em>{eventtype}</em></code> 的 HTML 標籤屬性（{{Glossary("attribute")}}），例如：<br> + <code><button <u>onclick="return handleClick(event);"</u>></code>,</li> + <li>或藉由設定相對應的 JavaScript 屬性（{{Glossary("property/JavaScript", "property")}}），例如：<br> + <code>document.getElementById("mybutton")<u>.onclick = function(event) { ... }</u></code>.</li> +</ul> + +<p>Note that each object can have <strong>only one</strong> <em>on-event</em> handler for a given event (though that handler could call multiple sub-handlers). This is why {{domxref("EventTarget.addEventListener", "addEventListener()")}} is often the better way to get notified of events, especially when wishing to apply various event handlers independently from each other, even for the same event and/or to the same element.</p> + +<p>Also note that <em>on-event</em> handlers are called automatically, not at the programmer's will (although you can, like <code>mybutton.onclick(myevent); ) </code>since they serve more as placeholders to which a real handler function can be <strong>assigned</strong>.</p> + +<h3 id="非元素物件">非元素物件</h3> + +<p>Event handlers can also be set using properties on many non-element objects that generate events, including {{ domxref("window") }}, {{ domxref("document") }}, {{ domxref("XMLHttpRequest") }}, and others, for example:</p> + +<pre>xhr.onprogress = function() { ... }</pre> + +<h2 id="細節">細節</h2> + +<h3 id="HTML_的_on<...>_屬性值及對應的_JavaScript_屬性">HTML 的 on<...> 屬性值及對應的 JavaScript 屬性</h3> + +<p>A handler registered via an <code>on<...></code> attribute will be available via the corresponding <code>on<...></code> property, but not the other way around:</p> + +<pre class="brush: html"><div id="a" onclick="alert('old')">Open the Developer Tools Console to see the output.</div> + +<script> +window.onload = function () { + var div = document.getElementById("a"); + console.log("Attribute reflected as a property: ", div.onclick.toString()); + // Prints: function onclick(event) { alert('old') } + div.onclick = function() { alert('new') }; + console.log("Changed property to: ", div.onclick.toString()); + // Prints: function () { alert('new') } + console.log("Attribute value is unchanged: ", div.getAttribute("onclick")); + // Prints: alert('old') +} +</script></pre> + +<p>For historical reasons, some attributes/properties on the {{HTMLElement("body")}} and {{HTMLElement("frameset")}} elements actually set event handlers on their parent {{domxref("Window")}} object. (The HTML specification names these: <code>onblur</code>, <code>onerror</code>, <code>onfocus</code>, <code>onload</code>, <code>onscroll</code>.)</p> + +<h3 id="事件處理器的參數、this_綁定及回傳值">事件處理器的參數、<code>this</code> 綁定及回傳值</h3> + +<p>當一個事件處理被定義成為一個 <strong>HTML </strong>的屬性時，給定的程式碼會被包成一個具有下列參數的函式：</p> + +<ul> + <li><code>event</code> - 除了{{domxref("GlobalEventHandlers.onerror", "onerror")}}的事件以外，其他所有的事件都會有此參數。</li> + <li><code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, 還有專為 {{domxref("GlobalEventHandlers.onerror", "onerror")}} 事件處理的 <code>error</code> 。請注意： <code>event</code> 參數實際上擁有以字串形式呈現的錯誤訊息。</li> +</ul> + +<p>當事件處理函式被觸發時，處理函式中的關鍵字： <code>this</code> 被設定成為註冊這個事件處理函式的DOM 元件。 請參閱 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#In_an_in%E2%80%93line_event_handler">this 關鍵字說明</a> 獲得更多細節。</p> + +<p>The return value from the handler determines if the event is canceled. The specific handling of the return value depends on the kind of event, for details see <a href="https://html.spec.whatwg.org/multipage/webappapis.html#the-event-handler-processing-algorithm">"The event handler processing algorithm" in the HTML specification</a>.</p> + +<h3 id="當事件處理器被調用">當事件處理器被調用</h3> + +<p>TBD (non-capturing listener)</p> + +<h3 id="術語">術語</h3> + +<p>The term <strong>event handler</strong> may be used to refer to:</p> + +<ul> + <li>any function or object registered to be notified of events,</li> + <li>or, more specifically, to the mechanism of registering event listeners via <code>on...</code> attributes in HTML or properties in web APIs, such as <code><button onclick="alert(this)"></code> or <code>window.onload = function() { /* ... */ }</code>.</li> +</ul> + +<p>When discussing the various methods of listening to events,</p> + +<ul> + <li><strong>event listener</strong> refers to a function or object registered via {{domxref("EventTarget.addEventListener()")}},</li> + <li>whereas <strong>event handler</strong> refers to a function registered via <code>on...</code> attributes or properties.</li> +</ul> + +<h2 id="Specifications" name="Specifications">規範</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', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</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>Feature</th> + <th>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>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Event_handler_changes_in_Firefox_9">Event handler changes in Firefox 9</h3> + +<p>In order to better match the specifications, and improve cross-browser compatibility, the way event handlers were implemented at a fundamental level changed in Gecko 9.0 {{ geckoRelease("9.0") }}.</p> + +<p>Specifically, in the past, event handlers were not correctly implemented as standard IDL attributes. In Gecko 9.0, this was changed. Because of this, certain behaviors of event handlers in Gecko have changed. In particular, they now behave in all the ways standard IDL attributes behave. In most cases, this shouldn't affect web or add-on content at all; however, there are a few specific things to watch out for.</p> + +<h4 id="Detecting_the_presence_of_event_handler_properties">Detecting the presence of event handler properties</h4> + +<p>You can now detect the presence of an event handler property (that is, for example, <code>onload</code>), using the JavaScript <a href="/en-US/JavaScript/Reference/Operators/in" title="en/JavaScript/Reference/Operators/in"><code>in</code></a> operator. For example:</p> + +<pre class="brush: js">if ("onsomenewfeature" in window) { + /* do something amazing */ +} +</pre> + +<h4 id="Event_handlers_and_prototypes">Event handlers and prototypes</h4> + +<p>You can't set or access the values of any IDL-defined attributes on DOM prototype objects; that means you can't, for example, change <code>Window.prototype.onload</code> anymore. In the past, event handlers (<code>onload</code>, etc.) weren't implemented as IDL attributes in Gecko, so you were able to do this for those. Now you can't. This improves compatibility.</p> diff --git a/files/zh-tw/web/guide/events/index.html b/files/zh-tw/web/guide/events/index.html new file mode 100644 index 0000000000..4484986b66 --- /dev/null +++ b/files/zh-tw/web/guide/events/index.html @@ -0,0 +1,52 @@ +--- +title: Event developer guide +slug: Web/Guide/Events +tags: + - DOM + - Event + - Guide + - NeedsTranslation + - NeedsUpdate + - TopicStub +translation_of: Web/Guide/Events +--- +<p>{{draft()}}</p> + +<p>Events refers both to a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types.</p> + +<p>The <a href="/en-US/docs/Web/Guide/API/DOM/Events/Overview_of_Events_and_Handlers">overview page</a> provides an introduction to the design pattern and a summary of the types of incidents which are defined and reacted to by modern web browsers.</p> + +<p>The <a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">custom events page</a> describes how the event code design pattern can be used in custom code to define new event types emitted by user objects, register listener functions to handle those events, and trigger the events in user code.</p> + +<p>The remaining pages describe how to use events of different kinds defined by web browsers. Unfortunately, these events have been defined piece by piece as web browsers have evolved so that there is no satisfying systematic characterization of the events built-in or defined by modern web browsers.</p> + +<p>The <strong>device</strong> on which the web browser is running can trigger events, for example due to a change in its position and orientation in the real world, as discussed partially by the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained">page on orientation coordinate systems</a> and the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Using_device_orientation_with_3D_transforms">page on the use of 3D transforms</a>. That is different, but similar, to the change in device vertical orientation.</p> + +<p>The <strong>window</strong> in which the browser is displayed can trigger events; for example, change size if the user maximizes the window or otherwise changes it.</p> + +<p>The <strong>process</strong> loading of a web page can trigger events in response to the completion of different steps in the downloading, parsing, and rendering of the web page for display to the user.</p> + +<p>The <strong>user interaction</strong> with the web page contents can trigger events. The events triggered by user interaction evolved during the early years of browser design and include a complicated system defining the sequence in which events will be called and the manner in which that sequence can be controlled. The different types of user interaction-driven events include:</p> + +<ul> + <li>the original 'click' event,</li> + <li>mouse events,</li> + <li><a href="/en-US/docs/Web/Guide/API/DOM/Events/Mouse_gesture_events">mouse gesture events</a>, and</li> + <li>both <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events">touch events</a> and the earlier <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events_(Mozilla_experimental)">mozilla experimental touch events</a>, now deprecated.</li> +</ul> + +<p>The <strong>modification of the web page</strong> in structure or content might trigger some events, as explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events">mutation events page</a>, but the use of these events has been deprecated in favour of the lighter <a href="/en-US/docs/Web/API/MutationObserver">Mutation Observer</a> approach.</p> + +<p>The <strong>media streams</strong> embedded in the HTML documents might trigger some events, as explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Media_events">media events</a> page.</p> + +<p>The <strong>network requests</strong> made by a web page might trigger some events.</p> + +<p>There are many other sources of events defined by web browsers for which pages are not yet available in this guide.</p> + +<div class="note"> +<p>Note: This Event Developer Guide needs substantial work. The structure needs to be reorganized and the pages rewritten. Our hope is that everything you need to know about events will go under here.</p> +</div> + +<h2 id="文件">文件</h2> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/zh-tw/web/guide/graphics/index.html b/files/zh-tw/web/guide/graphics/index.html new file mode 100644 index 0000000000..224757c138 --- /dev/null +++ b/files/zh-tw/web/guide/graphics/index.html @@ -0,0 +1,49 @@ +--- +title: 網頁上的圖像 +slug: Web/Guide/Graphics +translation_of: Web/Guide/Graphics +--- +<p><span class="seoSummary">現代網站或應用程式通常都配有圖像。</span>我們可以很容易地使用{{HTMLElement("img")}}元素呈現靜態圖像 , 或藉由使用{{cssxref("background-image")}} 設定HTML的背景元素性質。你常會想要建立動態圖像或在事後操縱圖像。<span class="seoSummary">這些文章將讓你知道如何達成這些效果。</span></p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">2D 圖像</h2> + +<dl> + <dt><a href="/en-US/docs/HTML/Canvas">Canvas</a></dt> + <dd><em>{{HTMLElement("canvas")}} 元素提供 </em><em>APIs讓開發者透過Javascript來繪製2D圖像.</em></dd> + <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt> + <dd><em>可縮放向量圖像(SVG) 讓你可以使用直線，曲線以及其他幾何圖形來編寫圖像。避免使用點陣圖像(bitmaps)，你可以創造出適合任何大小的圖像。</em></dd> +</dl> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Graphics">觀看全部...</a></span></p> +</div> + +<div class="section"> +<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">3D 圖像</h2> + +<dl> + <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt> + <dd><em>一份WebGL初始指南，網頁用3D 圖像 API。這項技術讓你在網頁內容使用standard OpenGL ES。</em></dd> +</dl> + +<h2 id="影片">影片</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">使用 HTML5 影音</a></dt> + <dd><em>在 HTML 檔案嵌入影片及控制播放。</em></dd> + <dt><a href="/en-US/docs/WebRTC">WebRTC</a></dt> + <dd><em>在WebRTC 中 RTC 是 Real-Time Communications 的簡稱，讓瀏覽器客戶端之間(peers)串流影片/音效檔案與數據分享的技術。</em></dd> +</dl> +</div> +</div> + +<p> </p> diff --git a/files/zh-tw/web/guide/html/content_categories/index.html b/files/zh-tw/web/guide/html/content_categories/index.html new file mode 100644 index 0000000000..707e63ca85 --- /dev/null +++ b/files/zh-tw/web/guide/html/content_categories/index.html @@ -0,0 +1,150 @@ +--- +title: 內容類型 +slug: Web/Guide/HTML/Content_categories +translation_of: Web/Guide/HTML/Content_categories +--- +<p><span class="seoSummary">每個 HTML 元素都要遵從該元素可擁有何種內容規則，這些規則被歸為幾種常用的內容模型（content model）。每個 HTML 元素都屬於零個、一個、或數個內容的模型，所有元素內容的設置規則都要遵從 HTML 一致性文件。</span></p> + +<p>內容類型有三種類型：</p> + +<ul> + <li>主要內容類型（Main content categories）描述了許多元素共享的常見內容規則（content rule）。</li> + <li>表單相關內容類型（Form-related content categories）描述了表單相關元素的內容規則。</li> + <li>特別內容類型（Specific content categories） 描述了只有少數元素共享的內容規則，有時甚至只有特定上下文。</li> +</ul> + +<div style="width: 50%;"><a href="/@api/deki/files/6244/=Content_categories_venn.png" title="Content_categories_venn.png"><img alt="Content_categories_venn.png" class="default internal" src="/@api/deki/files/6244/=Content_categories_venn.png?size=webview" style="height: 200px; width: 350px;"></a></div> + +<h2 id="主要內容類型">主要內容類型</h2> + +<h3 id="資訊元內容（Metadata_content）">資訊元內容（Metadata content）</h3> + +<p>屬於<em>元資訊內容</em>類型的元素修飾該文件其餘部分的陳述或行為、與其他文件建立連結、或是傳達其他<em>外來</em>（out of band）訊息。</p> + +<p>屬於這個類型的元素有 {{HTMLElement("base")}}、{{ Obsolete_inline() }}{{HTMLElement("command")}}、{{HTMLElement("link")}}、{{HTMLElement("meta")}}、{{HTMLElement("noscript")}}、{{HTMLElement("script")}}、{{HTMLElement("style")}} 與 {{HTMLElement("title")}}</p> + +<h3 id="流內容（Flow_content）"><a name="flow_content">流內容（Flow content）</a></h3> + +<p>屬於流內容的元素通常含有文字或嵌入內容。它們是：{{HTMLElement("a")}}、{{HTMLElement("abbr")}}、{{HTMLElement("address")}}、{{HTMLElement("article")}}、{{HTMLElement("aside")}}、{{HTMLElement("audio")}}、{{HTMLElement("b")}},{{HTMLElement("bdo")}}、{{HTMLElement("bdi")}}、{{HTMLElement("blockquote")}}、{{HTMLElement("br")}}、{{HTMLElement("button")}}、{{HTMLElement("canvas")}}、{{HTMLElement("cite")}}、{{HTMLElement("code")}}、{{ Obsolete_inline() }}{{HTMLElement("command")}}、{{HTMLElement("data")}}、{{HTMLElement("datalist")}}、{{HTMLElement("del")}}、{{HTMLElement("details")}}、{{HTMLElement("dfn")}}、{{HTMLElement("div")}}、{{HTMLElement("dl")}}、{{HTMLElement("em")}}、{{HTMLElement("embed")}}、{{HTMLElement("fieldset")}}、{{HTMLElement("figure")}}、{{HTMLElement("footer")}}、{{HTMLElement("form")}}、{{HTMLElement("h1")}}、{{HTMLElement("h2")}}、{{HTMLElement("h3")}}、{{HTMLElement("h4")}}、{{HTMLElement("h5")}}、{{HTMLElement("h6")}}、{{HTMLElement("header")}}、{{HTMLElement("hgroup")}}、{{HTMLElement("hr")}}、{{HTMLElement("i")}}、{{HTMLElement("iframe")}}、{{HTMLElement("img")}}、{{HTMLElement("input")}}、{{HTMLElement("ins")}}、{{HTMLElement("kbd")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("label")}}、{{HTMLElement("main")}}、{{HTMLElement("map")}}、{{HTMLElement("mark")}}、{{MathMLElement("math")}}、{{HTMLElement("menu")}}、{{HTMLElement("meter")}}、{{HTMLElement("nav")}}、{{HTMLElement("noscript")}}、{{HTMLElement("object")}}、{{HTMLElement("ol")}}、{{HTMLElement("output")}}、{{HTMLElement("p")}}、{{HTMLElement("pre")}}、{{HTMLElement("progress")}}、{{HTMLElement("q")}}、{{HTMLElement("ruby")}}、{{HTMLElement("s")}}、{{HTMLElement("samp")}}、{{HTMLElement("script")}}、{{HTMLElement("section")}}、{{HTMLElement("select")}}、{{HTMLElement("small")}}、{{HTMLElement("span")}}、{{HTMLElement("strong")}}、{{HTMLElement("sub")}}、{{HTMLElement("sup")}}、{{SVGElement("svg")}}、{{HTMLElement("table")}}、{{HTMLElement("template")}}、{{HTMLElement("textarea")}}、{{HTMLElement("time")}}、{{HTMLElement("ul")}}、{{HTMLElement("var")}}、{{HTMLElement("video")}}、{{HTMLElement("wbr")}} 還有文字。</p> + +<p>在滿足特定條件下，某些元素也屬這個類型：</p> + +<ul> + <li>{{HTMLElement("area")}}，如果它是 {{HTMLElement("map")}} 元素的後代。</li> + <li>{{HTMLElement("link")}}，如果<a href="/zh-TW/docs/HTML/Global_attributes#attr-itemprop"><strong>itemprop</strong></a> 屬性存在。</li> + <li>{{HTMLElement("meta")}}，如果<a href="/zh-TW/docs/HTML/Global_attributes#attr-itemprop"><strong>itemprop</strong></a> 屬性存在。</li> + <li>{{HTMLElement("style")}}，如果 {{htmlattrxref("scoped","style")}} 屬性存在。</li> +</ul> + +<h3 id="章節型內容（Sectioning_content）">章節型內容（Sectioning content）</h3> + +<p>屬於章節型內容模型的元素會<a href="/zh-TW/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">在該大綱裡面創立章節</a>，這個章節會定義{{HTMLElement("header")}}、{{HTMLElement("footer")}}、還有<a href="#Heading_content" title="#heading content">heading content</a>的範圍。</p> + +<p>屬於這個類型的元素有{{HTMLElement("article")}}、{{HTMLElement("aside")}}、{{HTMLElement("nav")}}還有{{HTMLElement("section")}}。</p> + +<div class="note"> +<p><em>注意：</em>不要把這個內容模型，和把內容與常規大綱隔開的 <a href="/zh-TW/docs/Sections_and_Outlines_of_an_HTML5_document#sectioning_root" title="Sections and Outlines of an HTML5 document#sectioning root">sectioning root</a> 類別搞混。</p> +</div> + +<h3 id="標題型內容（Heading_content）">標題型內容（Heading content）</h3> + +<p>标题内容 定义了分节的标题，而这个分节可能由一个明确的分节内容元素直接标记，也可能由标题本身隐式地定义。</p> + +<p>標題型內容定義了章節的標題，不論該章節由明確的<a href="#Sectioning_content" title="#sectioning content">章節型內容</a>元素標記、抑或由標題本身隱式定義。</p> + +<p>屬於這個類型的元素有{{HTMLElement("h1")}}、{{HTMLElement("h2")}}、{{HTMLElement("h3")}}, {{HTMLElement("h4")}}、{{HTMLElement("h5")}}、{{HTMLElement("h6")}}還有{{HTMLElement("hgroup")}}.</p> + +<div class="note"> +<p><em>注意：</em>儘管 {{HTMLElement("header")}} 可能含有某些標題型內容，但它本身並不是。</p> +</div> + +<h3 id="段落型內容（Phrasing_content）">段落型內容（Phrasing content）</h3> + +<p>段落型內容定義了文字、還有它包含的標記。Runs of phrasing content make up paragraphs.</p> + +<p>屬於這個類型的元素有{{HTMLElement("abbr")}}、{{HTMLElement("audio")}}、{{HTMLElement("b")}}、{{HTMLElement("bdo")}}、{{HTMLElement("br")}}、{{HTMLElement("button")}}、{{HTMLElement("canvas")}}、{{HTMLElement("cite")}}、{{HTMLElement("code")}}、{{ Obsolete_inline() }}{{HTMLElement("command")}}、{{HTMLElement("datalist")}}、{{HTMLElement("dfn")}}、{{HTMLElement("em")}}、{{HTMLElement("embed")}}、{{HTMLElement("i")}}、{{HTMLElement("iframe")}}、{{HTMLElement("img")}}、{{HTMLElement("input")}}、{{HTMLElement("kbd")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("label")}}、{{HTMLElement("mark")}}、{{MathMLElement("math")}}、{{HTMLElement("meter")}}、{{HTMLElement("noscript")}}、{{HTMLElement("object")}}、{{HTMLElement("output")}}、{{HTMLElement("progress")}}、{{HTMLElement("q")}}、{{HTMLElement("ruby")}}、{{HTMLElement("samp")}}、{{HTMLElement("script")}}、{{HTMLElement("select")}}、{{HTMLElement("small")}}、{{HTMLElement("span")}}、{{HTMLElement("strong")}}、{{HTMLElement("sub")}}、{{HTMLElement("sup")}}、{{SVGElement("svg")}}、{{HTMLElement("textarea")}}、{{HTMLElement("time")}}、{{HTMLElement("var")}}、{{HTMLElement("video")}}、{{HTMLElement("wbr")}}以及空白字符在內的純文本。</p> + +<p>在滿足特定條件下，某些元素也屬這個類型：</p> + +<ul> + <li>{{HTMLElement("a")}}，如果它只包含段落型內容。</li> + <li>{{HTMLElement("area")}}，如果它是 {{HTMLElement("map")}} 元素的後代。</li> + <li>{{HTMLElement("del")}}，如果它只包含段落型內容。</li> + <li>{{HTMLElement("ins")}}, 如果它只包含段落型內容。</li> + <li>{{HTMLElement("link")}}, 如果 <a href="/zh-TW/docs/HTML/Global_attributes#itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a> 屬性存在。</li> + <li>{{HTMLElement("map")}}, 如果它只包含段落型內容。</li> + <li>{{HTMLElement("meta")}}, 如果 <a href="/zh-TW/docs/HTML/Global_attributes#itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a> 屬性存在。</li> +</ul> + +<h3 id="嵌入型內容（Embedded_content）">嵌入型內容（Embedded content）</h3> + +<p>嵌入型內容從其他標記語言或文件命名空間，導入資源或插入內容。 屬於這個類型的元素有{{HTMLElement("audio")}}、{{HTMLElement("canvas")}}、{{HTMLElement("embed")}}、{{HTMLElement("iframe")}}、{{HTMLElement("img")}}、{{MathMLElement("math")}}、{{HTMLElement("object")}}、{{SVGElement("svg")}}、{{HTMLElement("video")}}。</p> + +<h3 id="互動型內容（Interactive_content）"><a name="interactive_content">互動型內容（Interactive content）</a></h3> + +<p>互動型內容包含專為用戶互動設計的元素。屬於這個類型的元素有 {{HTMLElement("a")}}、{{HTMLElement("button")}}、{{HTMLElement("details")}}、{{HTMLElement("embed")}}、{{HTMLElement("iframe")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("label")}}、{{HTMLElement("select")}} 還有 {{HTMLElement("textarea")}}。</p> + +<p>在滿足特定條件下，某些元素也屬這個類型：</p> + +<ul> + <li>{{HTMLElement("audio")}}，如果 {{htmlattrxref("controls", "audio")}} 元素存在。</li> + <li>{{HTMLElement("img")}}，如果 {{htmlattrxref("usemap", "img")}} 元素存在。</li> + <li>{{HTMLElement("input")}}，如果 {{htmlattrxref("type", "input")}} 元素不是隱藏狀態。</li> + <li>{{HTMLElement("menu")}}，如果 {{htmlattrxref("type", "menu")}} 元素處於 toolbar 狀態。</li> + <li>{{HTMLElement("object")}}，如果 {{htmlattrxref("usemap", "object")}} 元素存在。</li> + <li>{{HTMLElement("video")}}，如果 {{htmlattrxref("controls", "video")}} 元素存在。</li> +</ul> + +<h3 id="捫及內容（Palpable_content）">捫及內容（Palpable content）</h3> + +<p>不是空白或隱藏的內容稱為捫及。屬於流內容或是Phrasing content模型的元素最少要有一個捫及的節點。</p> + +<h3 id="表單相關內容（Form-associated_content）">表單相關內容（Form-associated content）</h3> + +<p>表單相關內容包含了由 <strong>form</strong> 屬性顯露的 form owner 元素。form owner 是本身包含於 {{HTMLElement("form")}}、或 id 由 <strong>form</strong> 屬性指定的元素。</p> + +<ul> + <li>{{HTMLElement("button")}}</li> + <li>{{HTMLElement("fieldset")}}</li> + <li>{{HTMLElement("input")}}</li> + <li>{{deprecated_inline()}}{{HTMLElement("keygen")}}</li> + <li>{{HTMLElement("label")}}</li> + <li>{{HTMLElement("meter")}}</li> + <li>{{HTMLElement("object")}}</li> + <li>{{HTMLElement("output")}}</li> + <li>{{HTMLElement("progress")}}</li> + <li>{{HTMLElement("select")}}</li> + <li>{{HTMLElement("textarea")}}</li> +</ul> + +<p>本類型包含某些子類別:</p> + +<dl> + <dt><a name="Form_listed">listed</a></dt> + <dd>Elements that are listed in the <a href="/zh-TW/docs/DOM/form.elements" title="DOM/form.elements">form.elements</a> and fieldset.elements IDL collections. Contains {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</dd> + <dt><a name="Form_labelable">labelable</a></dt> + <dd>與元素 {{HTMLElement("label")}} 相關的元素。包含 {{HTMLElement("button")}}、{{HTMLElement("input")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("meter")}}、{{HTMLElement("output")}}、{{HTMLElement("progress")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}}。</dd> + <dt><a name="Form_submittable">submittable</a></dt> + <dd>用在建構送出時，資料就設定好的表單元素。包含 {{HTMLElement("button")}}、{{HTMLElement("input")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("object")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}}。</dd> + <dt><a name="Form_resettable">resettable</a></dt> + <dd>當表單重設時會受影響的元素。包含 {{HTMLElement("button")}}、{{HTMLElement("input")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("output")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}}。</dd> +</dl> + +<h2 id="透明內容模型（Transparent_content_model）">透明內容模型（Transparent content model）</h2> + +<p>如果一個元素是透明內容模型，then its contents must be structured such that they would be valid HTML 5，就算該透明元素被移除、並由子元素取代。</p> + +<p>例如，{{HTMLElement("del")}} 與 {{HTMLELement("ins")}} 元素都是透明的：</p> + +<pre><p>我們認為下面這些真理是<del><em>神聖不可否認</em></del><ins>不言而喻的。</ins></p> +</pre> + +<p>這果這些元素被刪掉的話，這個分段依然在 HTML 有效（if not correct English）</p> + +<pre><p>我們認為下面這些真理是<em>神聖不可否認</em>不言而喻的。</p> +</pre> + + +<h2 id="其他內容模型">其他內容模型</h2> + +<p>章節根（Sectioning root）</p> diff --git a/files/zh-tw/web/guide/html/event_attributes/index.html b/files/zh-tw/web/guide/html/event_attributes/index.html new file mode 100644 index 0000000000..6f57526dde --- /dev/null +++ b/files/zh-tw/web/guide/html/event_attributes/index.html @@ -0,0 +1,84 @@ +--- +title: Event attributes +slug: Web/Guide/HTML/Event_attributes +translation_of: >- + Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don%27t_use_these +--- +<p><span class="seoSummary">每一個 HTML 元素都可以放置事件屬性，以藉此於事件發生時能執行 JavaScripte 程式。事件屬性的名稱都有一個前綴「on」，例如當使用者點選元素時要執行指定的 JavaScript，可以使用 </span><code>onclick</code><span class="seoSummary"> 屬性並把要執行的 JavaScript 當成屬性值。</span></p> + +<p>In the JavaScript code executed in response to the event, <code>this</code> is bound to the HTML element and the {{domxref("Event")}} object can be reached using the <code>event</code> variable in the scope of the attribute.</p> + +<div class="warning"> +<p><strong>Warning:</strong> These attributes should be avoided. This makes the markup bigger and less readable. Concerns of content/structure and behavior are not well-separated, making a bug harder to find. Furthermore, usage of event attributes almost always causes scripts to expose global functions on the {{domxref("Window")}} object, polluting the global namespace.</p> +</div> + +<p>While these attributes can at times be attractively easy to use, you should avoid using them. Instead, use the {{domxref("EventTarget.addEventListener()")}} function to add a listener for the event.</p> + +<p>Event attributes can be blocked by using <a href="/en-US/docs/Security/CSP/Introducing_Content_Security_Policy">Content Security Policy</a> which if used, blocks all inline scripts unless the <em>'unsafe-inline'</em> keyword is used.</p> + +<h2 id="Example_using_event_attributes" name="Example_using_event_attributes">Example using event attributes</h2> + +<p>This example appends text to an element each time time the {{HTMLElement("div")}} is clicked.</p> + +<div class="note"> +<p><strong>Note:</strong> This is an example of how not to do things, using one of these attributes.</p> +</div> + +<pre class="brush: html"><!doctype html> +<html> + <head> + <title>Event Attribute Example</title> + <script> + function doSomething() { + document.getElementById("thanks").innerHTML += "<p>Thanks for clicking!</p>"; + } + </script> + </head> + <body> + <div onclick="doSomething();">Click me!</div> + <div id="thanks"></div> + </body> +</html> +</pre> + +<p>Try this example below:</p> + +<p>{{ EmbedLiveSample('Example_using_event_attributes', '', '', '') }}</p> + +<h2 id="Example_using_event_listeners">Example using event listeners</h2> + +<p>Instead, you should use {{domxref("EventTarget.addEventListener()")}}, as shown here:</p> + +<pre class="brush: html"><!doctype html> +<html> + <head> + <title>Event Attribute Example</title> + <script> + function doSomething() { + document.getElementById("thanks").innerHTML += "<p>Thanks for clicking!</p>"; + } + + // Called when the page is done loading; this is where we do any setup we need, + // such as creating event listeners for the elements in the page. + + function setup() { + document.getElementById("click").addEventListener("click", doSomething, true); + } + + // Install an event handler on the window to receive the "load" event, which + // indicates that the document has finished loading into the window. + + window.addEventListener("load", setup, true); + </script> + </head> + <body> + <div id="click">Click me!</div> + <div id="thanks"></div> + </body> +</html></pre> + +<p>You can see this in action below:</p> + +<p>{{ EmbedLiveSample('Example_using_event_listeners', '', '', '') }}</p> + +<section id="Quick_Links"><ol><li><a href="/en-US/docs/Web/API/Event" title='The Event interface represents an event which takes place in the DOM; some are user-generated (such as mouse or keyboard events), while others are generated by APIs (such as events that indicate an animation has finished running, a video has been paused, and so forth). While events are usually triggered by such "external" sources, they can also be triggered programmatically, such as by calling the HTMLElement.click() method of an element, or by defining the event, then sending it to a specified target using EventTarget.dispatchEvent(). There are many types of events, some of which use other interfaces based on the main Event interface. Event itself contains the properties and methods which are common to all events.'>Event</a></li><li><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is a DOM interface implemented by objects that can receive events and may have listeners for them.">EventTarget</a></li><li><a href="/en-US/docs/Web/API/EventTarget.addEventListener">EventTarget.addEventListener</a></li></ol></section> diff --git a/files/zh-tw/web/guide/html/html5/index.html b/files/zh-tw/web/guide/html/html5/index.html new file mode 100644 index 0000000000..c1ea8252ef --- /dev/null +++ b/files/zh-tw/web/guide/html/html5/index.html @@ -0,0 +1,112 @@ +--- +title: HTML5 +slug: Web/Guide/HTML/HTML5 +translation_of: Web/Guide/HTML/HTML5 +--- +<p>HTML5 是 <a href="/docs/HTML">HTML </a>標準中的最新版。在 <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/">HTML5 規格</a>還未拍板定案之前，Mozilla 以及其他瀏覽器開發商已經著手實現其中的部分功能。本文所列的連結網址與相關內容，是 Mozilla <a href="/en/Gecko" title="en/Gecko">Gecko</a> 解析引擎已經支援的部份，<a class="external" href="http://www.mozilla.com/en-US/firefox/" title="http://www.mozilla.com/en-US/firefox/">Firefox</a> 和<a href="/En/List_of_Mozilla-Based_Applications" title="En/List of Mozilla-Based Applications">許多其他產品</a>都使用 Gecko 解析引擎。</p> + +<p>(這裡是 <a href="/en/HTML/HTML5/HTML5_Thematic_Classification" title="en/HTML/HTML5/HTML5 Thematic Classification">另一篇 HTML5 分類整理文章</a>。)</p> + +<h2 id="HTML5_簡介">HTML5 簡介</h2> + +<dl> + <dt><a href="/en/HTML/HTML5/Introduction_to_HTML5" title="en/HTML/Introduction to HTML5"><strong>HTML5 簡介</strong></a></dt> + <dd>這篇文章介紹如何在你的網頁設計或 Web 應用程式中使用 HTML5。</dd> +</dl> + +<h2 id="HTML5_元素">HTML5 元素</h2> + +<dl> + <dt><a href="/en/Using_HTML5_audio_and_video" title="En/Using_audio_and_video_in_Firefox">使用 audio 和 video</a> {{ gecko_minversion_inline("1.9.2") }}</dt> + <dd>Firefox 3.5 開始支援 HTML5 {{ HTMLElement("audio") }} 和 {{ HTMLElement("video") }} 兩個元素。</dd> + <dt><a href="/zh_tw/HTML/HTML5_表單" title="zh_tw/HTML/HTML5_表單">HTML5 表單</a> {{ gecko_minversion_inline("2.0") }}</dt> + <dd>簡單介紹 HTML5 對於 Web 表單的改進項目：限制條件與驗證 API、多個新增的屬性、新增多個值供 {{ HTMLElement("input") }} 的 {{ htmlattrxref("type", "input") }} 屬性使用，並且新增 {{ HTMLElement("output") }} 元素。</dd> + <dt><a href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Sections 和 outlines</a> {{ gecko_minversion_inline("2.0") }}</dt> + <dd>HTML5 對於大綱與分段的支援元素包含有： {{ HTMLElement("section") }}、{{ HTMLElement("article") }}、{{ HTMLElement("nav") }}、{{ HTMLElement("header") }}、{{ HTMLElement("footer") }}、{{ HTMLElement("aside") }} 以及 {{ HTMLElement("hgroup") }}。</dd> + <dt>元素 {{ HTMLElement("mark") }} {{ gecko_minversion_inline("2.0") }}</dt> + <dd>元素 mark 被用在標註特別相關的重點文字。</dd> + <dt>元素 {{ HTMLElement("figure") }} 和 {{ HTMLElement("figcaption") }} {{ gecko_minversion_inline("2.0") }}</dt> + <dd>These elements lets you add figures and illustration, with an eventual caption, loosely coupled to the main text.</dd> +</dl> + +<h3 id="支援_Canvas">支援 Canvas</h3> + +<dl> + <dt><a href="/zh_tw/Canvas_tutorial" title="zh_tw/Canvas_tutorial">Canvas 導覽 </a>{{ gecko_minversion_inline("1.8.1") }}</dt> + <dd> 學習如何使用新的 <code>{{ HTMLElement("canvas") }}</code> 元素，以及如何在 Firefox 中繪製圖表與其他物件。</dd> + <dt style="text-align: justify;"><a href="/en/Drawing_text_using_a_canvas" title="en/Drawing_text_using_a_canvas">給 <code><canvas></code> 元素的 HTML5 文字(text) API</a> {{ gecko_minversion_inline("1.9.1") }}</dt> + <dd style="text-align: justify;">{{ HTMLElement("canvas") }} 元素現在已經支援 HTML5 文字(text) API。</dd> +</dl> + +<h2 id="給_Web_應用程式的新功能">給 Web 應用程式的新功能</h2> + +<dl> + <dt><a href="/zh_tw/Firefox_中的離線資源" title="zh_tw/Firefox_中的離線資源">Firefox 中的離線資源(含 HTML5 Application Cache 介紹)</a> {{ gecko_minversion_inline("1.9.1") }}</dt> + <dd>Firefox 完整支援 HTML5 離線資源規格。</dd> + <dt><a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">上線與離線事件 (Online and offline events)</a> {{ gecko_minversion_inline("1.9") }}</dt> + <dd>Firefox 3 支援 WHATWG 的上線與離線事件，這讓應用程式與擴充套件可以偵測目前是否有可用的 Internet 連線，也可以偵測何時建立或結束這個網路連線。</dd> + <dt><a href="/en/DOM/Storage" title="en/DOM/Storage">WHATWG 用戶端 session 與持續性儲存 (persistent storage) (亦稱 DOM 儲存)</a> {{ gecko_minversion_inline("1.8.1") }}</dt> + <dd>用戶端 session 與持續性儲存功能，讓 web 應用程式可以在用戶端儲存結構性資料。</dd> + <dt><a href="/en/HTML/Content_Editable" title="en/HTML/Content Editable">屬性 contentEditable ，將你的網站變成 wiki !</a> {{ gecko_minversion_inline("1.9.1") }}</dt> + <dd>HTML5 已經將 contentEditable 屬性標準化。學習更多這個新功能。</dd> + <dt><a href="/en/Using_files_from_web_applications" title="en/Using_files_from_web_applications">在 web 應用程式中存取檔案</a> {{ gecko_minversion_inline("1.9.2") }}</dt> + <dd>Gecko 已經支援新的 HTML5 檔案 API，讓 web 應用程式可以存取使用者所選的本地端檔案。這個功能也包含使用檔案類型的輸入元素 <span style="font-family: monospace;">{{ HTMLElement("input") }}</span> <a href="/en/HTML/Element/Input#attr-type" title="en/HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> 的新屬性 <a href="/en/HTML/Element/Input#attr-multiple" title="en/HTML/Element/input#attr-multiple"><strong>multiple</strong></a> 來選取多個檔案。</dd> +</dl> + +<h2 id="DOM_新功能">DOM 新功能</h2> + +<dl> + <dt><a href="/en/DOM/document.getElementsByClassName" title="en/DOM/document.getElementsByClassName">getElementsByClassName</a> {{ fx_minversion_inline(3.0) }}</dt> + <dd>支援 Document 與 Element 節點的 getElementsByClassName 方法。這個方法允許藉由指定的一個或多個 class 尋找頁面中的元素。</dd> + <dt><a href="/zh_tw/DragDrop/Drag_and_Drop" title="zh_tw/DragDrop/Drag_and_Drop">拖曳功能 (Drag and drop)</a> {{ fx_minversion_inline(3.5) }}</dt> + <dd>HTML5 拖曳 API 支援在一個或多個網站之間拖曳物件。也提供了一個更簡化的 API 供擴充套件與 Mozilla-based 應用程式使用。</dd> + <dt><a href="/en/Focus_management_in_HTML" title="en/Focus_management_in_HTML">HTML Focus 管理</a> {{ fx_minversion_inline(3.0) }}</dt> + <dd>支援新的 HTML5 屬性：<code>activeElement</code> 與 <code>hasFocus</code> 。</dd> + <dt><a href="/en/Web-based_protocol_handlers" title="en/Web-based_protocol_handlers">Web-based 協定處理器</a> {{ fx_minversion_inline(3.0) }}</dt> + <dd>你現在可以使用 <code>navigator.registerProtocolHandler() 方法</code>將 web 應用程式註冊成協定處理器 (protocol handlers)。</dd> +</dl> + +<h2 id="HTML_解析器">HTML 解析器</h2> + +<p>Gecko 的 <a href="/en/HTML/HTML5/HTML5_Parser" title="en/HTML/HTML5/HTML5 parser">HTML5相容解析器 </a>— 負責將一份 HTML 文件字元們轉化為 DOM — 已經於 2010 年五月預設為啟用。（備忘：該 HTML5 解析器版本搭載於 Gecko 1.9.2 / Firefox 3.6 當中，是個不穩定的版本，並且不建議用於正式使用環境。） {{ fx_minversion_inline(4.0) }}</p> + +<h2 id="其他">其他</h2> + +<ul> + <li>HTML 文件中的 <code>localName</code> 與 <code>namespaceURI</code> ，現在可以實作類似在 XML 文件中的行為：<code>localName</code> 傳回小寫字元，而 <code>namespaceURI</code> 對於 HTML 元素是 <code>"<a class="external" href="http://www.w3.org/1999/xhtml" rel="external nofollow" title="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" </code>{{ fx_minversion_inline(3.6) }}</li> + <li>當頁面 URI 的片段標示 （在 "#" (hash) 字元之後的部份）有變更時，新的 <code>hashchange</code> 事件會被送至該頁面。 請參考 <a href="/en/DOM/window.onhashchange" title="en/DOM/window.onhashchange">window.onhashchange</a>。{{ fx_minversion_inline(3.6) }}</li> + <li>支援 <code><a href="/en/DOM/element.classList" title="en/DOM/element.classList">element.classList</a></code> ，可以更方便處理 class 屬性。 {{ fx_minversion_inline(3.6) }}</li> + <li>文件就緒事件 <a href="/en/DOM/document.onreadystatechange" title="en/DOM/document.onreadystatechange">document.onreadystatechange</a> {{ fx_minversion_inline(4) }} 以及 <a href="/en/DOM/document.readyState" title="en/DOM/document.readyState">document.readyState</a> {{ fx_minversion_inline(3.6) }} 也被支援了。</li> + <li>Colors in presentation attributes are interpreted according to HTML5. {{ fx_minversion_inline(4.0) }}</li> +</ul> + +<h2 id="有些人自以為它是_HTML5_的一部分……XD">有些人自以為它是 HTML5 的一部分……XD</h2> + +<ul> + <li><a href="/en/WebGL" title="en/WebGL">WebGL</a></li> + <li><a href="/en/DOM/FileReader" title="en/DOM/FileReader"><code>FileReader</code></a></li> + <li><code><a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></code></li> + <li><code><a href="/en/DOM/Locating_DOM_elements_using_selectors" title="en/DOM/Locating DOM elements using selectors">querySelector(All)</a></code></li> + <li><a href="/En/Using_geolocation" title="En/Using geolocation">Geolocation</a></li> + <li><a href="/en/JavaScript/ECMAScript_5_support_in_Mozilla" title="en/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript5</a></li> + <li>CSS3</li> + <li><a href="/en/XBL2_specification_(external)" title="en/XBL2 specification (external)">XBL2</a></li> + <li><a href="/En/DOM/Using_web_workers" title="En/Using web workers">Web Workers</a></li> + <li><a href="/zh_tw/WebSockets" title="zh tw/WebSockets">Web Sockets</a></li> + <li>Faster JavaScript</li> +</ul> + +<h2 id="參考">參考</h2> + +<ul> + <li><a href="/Firefox/Releases/4" rel="internal">Firefox 4 技術文件</a></li> + <li><a href="/Firefox/Releases/3.6" title="en/Firefox 3.6 for developers">Firefox 3.6 技術文件</a></li> + <li><a href="/Firefox/Releases/3.5" title="En/Firefox 3.5 for developers">Firefox 3.5 技術文件</a></li> + <li><a href="/Firefox/Releases/3" title="en/Firefox 3 for developers">Firefox 3 技術文件</a></li> + <li><a href="/Firefox/Releases/2" title="en/Firefox 2 for developers">Firefox 2 技術文件</a></li> + <li><a href="/Firefox/Releases/1.5" title="en/Firefox 1.5 for developers">Firefox 1.5 技術文件</a></li> +</ul> + +<p>{{ HTML5ArticleTOC() }}</p> + +<p>{{ languages( {"es": "es/HTML/HTML5", "fr": "fr/HTML/HTML5", "ja": "ja/HTML/HTML5" , "ko": "ko/HTML/HTML5" , "pt": "pt/HTML/HTML5", "zh-cn": "cn/HTML/HTML5", "zh-tw": "zh_tw/HTML/HTML5", "pt-br": "pt-br/HTML/HTML5"} ) }}</p> diff --git a/files/zh-tw/web/guide/html/html5/introduction_to_html5/index.html b/files/zh-tw/web/guide/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..7e2eba7335 --- /dev/null +++ b/files/zh-tw/web/guide/html/html5/introduction_to_html5/index.html @@ -0,0 +1,40 @@ +--- +title: Introduction to HTML5 +slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +tags: + - HTML + - HTML5 +translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +--- +<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a> 是目前最新的HTML標準。它提供一些新特性，不只是支援多媒體，還讓網頁應用程式可以更容易、更有效地與使用者、伺服器互動。</p> + +<p>目前，仍有一些瀏覽器未完全支援HTML5所有特性。但是使用Gecko解析引擎的Firefox已經對HTML5十分支持，現時還繼續開發去支援更多特性。Gecko已經在1.8.1版本開始支持一些HTML5 了。你可以在<a href="/en/HTML/HTML5" title="en/HTML/HTML5">main HTML5 page</a>找到Gecko解析引擎最近支援的HTML5特性列表。若要更仔細知道多種瀏覽器支援的情況，可瀏覽<a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5">CanIUse</a>。</p> + +<h2 id="建立HTML5文件並宣告HTML5_doctype">建立HTML5文件並宣告HTML5 doctype</h2> + +<p>要建立HTML5文件很簡單，只需要在文件開首宣告：</p> + +<pre class="brush:html;"><!DOCTYPE html> +</pre> + +<p>對於未支援HTML5標準的瀏覽器，瀏覽器會繼續解析，但要注意一些HTML5的新特性則會忽略、不會支援。</p> + +<p>然而這個宣告方法比以前HTML版本更簡單、更短，更容易記憶，亦減少文件容量。</p> + +<h2 id="利用<meta_charset>來宣告字符集"><code>利用<meta charset>來宣告字符集</code></h2> + +<p>你需要首先指示瀏覽器要使用哪一種字符集。在以前版本，這需要複雜的<code><meta>完素；來到</code>HTML5，這變得非常簡單：</p> + +<pre class="brush:html;"><meta charset="UTF-8"></pre> + +<p>將它放置在<code><head></head>之間。若果你使用的字符集與瀏覽器預先設定的不一樣，</code><span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">瀏覽器會重新解析文件。另外，若你目前並非</span>UTF-8<span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">字符集，建議你在網頁中自行設定。</span></p> + +<p>為了加強安全，HTML5文件限制<span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">字符集需要兼容</span>ASCII和最少8位元。</p> + +<h2 id="Using_the_new_HTML5_parser">Using the new HTML5 parser</h2> + +<p>The parsing rule of HTML5, which analyzes the meaning of mark-up, has been more precisely defined in HTML5. Until the introduction of HTML5, only the meaning of <em>valid</em> mark-up was defined, meaning that as soon as one small error was made in the mark-up (most Web sites have at least one), the behavior was undefined. Essentially, it meant that all browsers behaved differently, which is no longer the case. Now, faced with errors in the mark-up, all compliant browsers must behave exactly in the same way.</p> + +<p>This requirement helps Web developers quite a bit. While it is true that all modern browsers now use these HTML5 parsing rules, non-HTML5-compliant browsers are still used by some. Keep in mind that it's still highly recommended that one write valid mark-up, as such code is easier to read and maintain, and it greatly decreases the prominence of incompatibilities that exists in various older browsers.</p> + +<p>Don't worry — you don't have to change anything on your Web site — the Web browsers' developers have done everything for you!</p> diff --git a/files/zh-tw/web/guide/index.html b/files/zh-tw/web/guide/index.html new file mode 100644 index 0000000000..48772ec771 --- /dev/null +++ b/files/zh-tw/web/guide/index.html @@ -0,0 +1,29 @@ +--- +title: Web 開發者指引 +slug: Web/Guide +tags: + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide +--- +<p>這些文章提供了如何幫助你使用特定技術和 APIs 的資訊。</p> + +<div class="note"> +<p><strong>注意:</strong> 很抱歉。這個頁面在我們完成內容遷移之前會很混亂。</p> +</div> + +<div>{{LandingPageListSubpages}}</div> + +<dl> + <dt><a href="/zh-TW/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt> + <dd>JavaScript 是用來創造網頁應用程式的腳本化語言.</dd> +</dl> + +<h2 id="參見">參見</h2> + +<ul> + <li><a href="/zh-TW/docs/Web/Reference" title="/en-US/docs/Web/Reference">Web Developer Reference</a></li> +</ul> diff --git a/files/zh-tw/web/guide/introduction_to_web_development/index.html b/files/zh-tw/web/guide/introduction_to_web_development/index.html new file mode 100644 index 0000000000..ec264af0b3 --- /dev/null +++ b/files/zh-tw/web/guide/introduction_to_web_development/index.html @@ -0,0 +1,13 @@ +--- +title: Web開發入門 +slug: Web/Guide/Introduction_to_Web_development +translation_of: Web/Guide/Introduction_to_Web_development +--- +<p>不論你是否是剛入門的 Web 開發者，或者只是為了拓寬視野而進入全新的 Web 領域，這裡的連結應該幫得上你。至少，我們在此有很多的連結。</p> +<div class="note"><strong>附註:</strong> 本頁明顯還是個片斷，我們需要在此產生一些內容。</div> +<table class="mainpage-table"> <tbody> <tr> <td> <h2 id="文件主題">文件主題</h2> <p>在此我們還沒有任何文章，但很需要。</p> </td> <td> <h2 id="資源">資源</h2> +<dl> <dt><a class="external" href="http://www.w3schools.com/" title="http://www.w3schools.com/">W3Schools</a>（<a class="external" href="http://www.w3school.com.cn/" title="http://www.w3school.com.cn/">簡體中文版</a>）</dt> <dd>免費的 Web 開發教學，從提供給初學者的 HTML，到高級的 Web 技術。</dd> +</dl></td> </tr> </tbody> +</table> +<p> </p> +<p>{{ languages( { "en": "en/Web_Development/Introduction_to_Web_development" } ) }}</p> diff --git a/files/zh-tw/web/guide/performance/index.html b/files/zh-tw/web/guide/performance/index.html new file mode 100644 index 0000000000..00c4b9d7fe --- /dev/null +++ b/files/zh-tw/web/guide/performance/index.html @@ -0,0 +1,14 @@ +--- +title: Optimization and performance +slug: Web/Guide/Performance +tags: + - Landing + - NeedsTranslation + - Optimization + - Performance + - TopicStub + - Web +translation_of: Web/Guide/Performance +--- +<p>When building modern Web apps and sites, it's important to make your content perform well. That is, to make it work quickly and efficiently. This lets it work effectively both for users of powerful desktop systems as well as for handheld devices with less power.</p> +<p>{{LandingPageListSubpages}}</p> diff --git a/files/zh-tw/web/guide/woff/index.html b/files/zh-tw/web/guide/woff/index.html new file mode 100644 index 0000000000..38bc75a2c1 --- /dev/null +++ b/files/zh-tw/web/guide/woff/index.html @@ -0,0 +1,100 @@ +--- +title: 網路開放字型格式 (WOFF) +slug: Web/Guide/WOFF +tags: + - Fonts + - NeedsMobileBrowserCompatibility + - WOFF + - 字型 +translation_of: Web/Guide/WOFF +--- +<p><span class="seoSummary"><strong>WOFF</strong>（<strong>網頁開放字型格式</strong>）是由 Mozilla、Type Supply、LettError 和其它組織協力開發的全新網路字型格式。它</span>使用了同為表格結構的 <code>sfnt</code> 壓縮版，廣泛用於 TrueType、OpenType 和開放字型格式，另外<span class="seoSummary">加入了中繼資料和私有資料結構，其中包含事先定義的欄位，讓有意願的廠商和製造商提供授權資訊。</span></p> + +<p>使用 WOFF 主要有以下三項好處：</p> + +<ol> + <li>字型資料經過壓縮，因此使用 WOFF 的網站流量降低，載入速度也會比未壓縮的 TrueType 或 OpenType 檔更快。</li> + <li>許多不願授權的字型商都可以授權 WOFF 格式的字型，網站設計師有更多的字型可以選擇。</li> + <li>專有軟體和自由軟體商都喜歡 WOFF 格式，因此在網路世界上，可以成為真正通用和可交換的字型格式，有別於目前其它字型格式。</li> +</ol> + +<h2 id="使用_WOFF">使用 WOFF</h2> + +<p>您可透過{{cssxref("@font-face")}} CSS 屬性在網頁內的文字使用 WOFF 字型。它的運作方式和 OpenType 以及 TrueType 字型並無二異，但在下載內容時可能會更有效率，這完全歸功於其與生俱來的壓縮特性。</p> + +<h2 id="Specifications" name="Specifications">規格文件</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">規格文件</th> + <th scope="col">狀態</th> + <th scope="col">註解</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WOFF1.0', '', '')}}</td> + <td>{{Spec2('WOFF1.0')}}</td> + <td>初始規格文件</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p>{{CompatibilityTable}}</p> + +<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>6.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>11.10</td> + <td>5.1</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>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="詳見">詳見</h2> + +<ul> + <li>{{cssxref("@font-face")}}</li> +</ul> diff --git a/files/zh-tw/web/guide/writing_forward-compatible_websites/index.html b/files/zh-tw/web/guide/writing_forward-compatible_websites/index.html new file mode 100644 index 0000000000..67d7b2c5e9 --- /dev/null +++ b/files/zh-tw/web/guide/writing_forward-compatible_websites/index.html @@ -0,0 +1,70 @@ +--- +title: Writing forward-compatible websites +slug: Web/Guide/Writing_forward-compatible_websites +translation_of: Web/Guide/Writing_forward-compatible_websites +--- +<p>這個頁面將解釋如何撰寫在新的瀏覽器版本發布時不會遭受毀損的網頁。</p> +<p>這對內部網路和其他非公共網站尤其重要，如果我們不能看到你的原始碼，我們將無法看到它是否已遭受毀損。底下所提到的原則可能無法全數做到，但盡可能遵守這些原則，對於你的網站在未來發展維護上有所幫助。</p> +<h2 id="JavaScript">JavaScript</h2> +<h3 id="以「window.」前綴修飾所有存取於_onfoo_屬性的全域變數">以「<code>window.</code>」前綴修飾所有存取於 <code>onfoo</code> 屬性的全域變數</h3> +<p>當一個事件處理器內容屬性（例如：<code>onclick</code>, <code>onmouseover</code> 等等）被使用在 HTML 的元素上時，所有對於屬性內名稱的查找首先發生在元素本身，若元素為表單控制項，再來尋找元素的表單，接著是 document，最後是 window（你定義全域變數的地方）。例如，如果你有這樣的原始碼：</p> +<pre><div onclick="alert(ownerDocument)">點我一下</div></pre> +<p>在點選文字時，div 中的 ownerDocument 會被提示，即使是在全域範圍內宣告 var ownerDocument 這種情況依然會發生。</p> +<p>這意味著，無論你何時在事件處理器內容屬性存取了一個全域變數，包括呼叫任何全域函數，當規格中新增了和您變數或函式同名的 DOM 屬性到元素或文件之中，在瀏覽器實作之後，就會產生名稱衝突。這時你的函式將突然被停止呼叫。這種情況在 HTML5 的發展之下，多次在不同網站中發生。</p> +<p>為了避免這種情況，以 window 來限定全域變數的存取，例如：</p> +<pre><script> + function localName() { + alert('函式 localName 被呼叫了'); + } +</script> +<div onclick="<strong>window.</strong>localName()">按一下會跑出一個提示訊息</div> +</pre> +<h3 id="不要直接附加非您能控制的腳本">不要直接附加非您能控制的腳本</h3> +<p><code>"use strict;"</code> 指令在 ECMAScript 裡，使用於檔案層級時適用於檔案的所有程式碼。因此，若將取決非嚴格模式行為的腳本，直接附加到要求嚴格模式的腳本會導致不正常的行為。</p><h3 id="要求_JavaScript_函式庫的作者遵守這些規則">要求 JavaScript 函式庫的作者遵守這些規則</h3> +<p>向您喜歡的函式庫開發者們建議他們遵循這些規範，否則您無法確保未來這些函式庫能否依舊正常運作。可惜的是函式庫往往違反這些準則。</p> +<h2 id="偵測">偵測</h2> +<h3 id="偵測特定功能支援">偵測特定功能支援</h3> +<p>如果您打算使用某些功能，盡可能使用物件偵測來偵測功能是否支援。簡單來說，不要假設只要 <code>"filter" in body.style</code> 測試結果為 true 的瀏覽器必定是 Microsoft Internet Explorer，進而我們一定會有 <code>window.event</code> 物件提供事件處理器。不要假設一個擁有特定 DOM 功能的瀏覽器一定也有另外一個 DOM 功能（特別是非標準功能）；或著反過來假設一定不會支持某些功能（例如，假設在腳本元素中支援 <code>onload</code> 的瀏覽器一定不會支援 <code>onreadystatechange</code>）。隨著瀏覽器們整合他們的行為，它們會同時新增和刪除許多功能並修正錯誤。過去即是如此，未來也將會如此。</p> +<p>所以，在偵測特定功能時，不要接著假定「只要某個功能支援與否，另外一樣功能就一定支援與否」。</p> +<h3 id="別做_UA_偵測">別做 UA 偵測</h3> +<p>這就是假設一項功能存在（User Agent 中包含特定的字元）時，必定有哪些東西可用或不可用的常見實例。</p> +<h4 id="如果您不得不做_UA_偵測，僅針對過去的瀏覽器版本">如果您不得不做 UA 偵測，僅針對過去的瀏覽器版本</h4> +<p>如果您還是得訴諸 UA（User Agent）偵測，請只針對特定瀏覽器的過去版本進行偵測。首先，對於未知的、所測試瀏覽器的目前與未來版本執行預設的程式內容。接著如果無法透過偵測，找出過去瀏覽器版本中預設程式內容中無法使用的功能，就可以透過偵測特定瀏覽器的過去版本來追加對應的修正。</p> +<p>在這個提案中，「目前的版本」意指您所能測試到的最新版本。如果您的預設程式內容在 Firefox Aurora 中可以正常運作，而在 Beta 和最新釋出版中存在問題而無法運作，此時您可以將您所測試中的 Firefox Aurora 版本標為「目前的版本」，將 Beta 以前的版本都視為「過去的版本」，即使它們還沒有被正式釋出給大眾。</p> +<h3 id="不要為了不同的瀏覽器設計多餘的對應程式">不要為了不同的瀏覽器設計多餘的對應程式</h3> +<p>當您所用的一部分程式內容可能在所有瀏覽器都能運作時，別隨便透過物件或 UA 偵測來決定執行不同的程式碼。瀏覽器很有可能改變它們的行為並互相整合，若您任意切出不同的替代程式，您的網站將有可能會損壞。</p> +<h2 id="測試">測試</h2> +<h3 id="測試所有主流引擎">測試所有主流引擎</h3> +<p>至少在 Firefox、Chrome 或 Safari（因為兩者都基於相同的 WebKit 引擎）、Opera 及 Internet Explorer 測試您的程式碼。若遵循以上原則，你有一個單一的程式碼內容在目前所有的和未知的瀏覽器都測試過，在所有主要引擎都能運作下，極有可能表示您的程式碼將不會在未來被破壞。</p> +<p>有時不同瀏覽器對特定功能的實作不盡相同。如果你有一個單一的程式碼內容，在所有常用的引擎中都沒問題，這可能表示，你使用了各瀏覽器間已經整合的行為，或著使用了尚未整合，而程式碼無關引擎的行為標準所堅持的部份。</p> +<h2 id="特定瀏覽器支援的功能和前綴">特定瀏覽器支援的功能和前綴</h2> +<h3 id="別針對目前或未來的瀏覽器版本做臨時方案">別針對目前或未來的瀏覽器版本做臨時方案</h3> +<p>這又是一個常見的實例：假設目前瀏覽器臭蟲之間的關聯性可以代表未來也會繼續擁有如此的關聯。針對舊瀏覽器，如果您用做臨時方案的臭蟲在目前的瀏覽器已經不存在，那針對舊瀏覽器套用方案沒有問題；只針對舊瀏覽器下，一旦瀏覽器修正了 X 臭蟲，您可以肯定所有具有臭蟲 X 的瀏覽器都有臭蟲 Y，因此使用臭蟲 X 的存在來針對臭蟲 Y 的問題做解套。</p> +<p>跟之前 UA 偵測中的建議一樣，「目前的版本」意指您所能測試到的最新版本。</p> +<h3 id="避免依賴新潮的非標準功能">避免依賴新潮的非標準功能</h3> +<p>就算加了前綴，使用新潮的功能依舊還是很危險：隨著規格的發展，瀏覽器前綴的實作也會遵循最新的規範而改變。一旦功能被標準化，含前綴的版本有可能會被刪除。</p> +<p>瀏覽器開發者提供前綴與非標準功能給您是為了實驗和意見回饋，而非讓您將這些酷玩意散佈出去。如果您選擇使用它們，請準備經常更新您的網站以趕上變化。</p> +<h3 id="當使用未普遍實作（即使是標準）的新潮功能時，記得測試備援方案">當使用未普遍實作（即使是標準）的新潮功能時，記得測試備援方案</h3> +<p>要檢查在未實作所用功能的瀏覽器下瀏覽網頁會發生什麼事，尤其是您在工作時不會經常使用的瀏覽器。</p> +<h3 id="除非針對過去有問題的版本，不要使用廠商前綴（Vender-prefix）功能">除非針對過去有問題的版本，不要使用廠商前綴（Vender-prefix）功能</h3> +<p>廠商前綴的功能可以在將來的版本中改變。然而，一旦瀏覽器已提供不帶前綴的功能，您可以在確保不帶前綴版在可用時總會被套用下，使用前綴版本針對舊版本。一個很好的例子，假設<code>-vnd</code> 廠商已經將不帶前綴的 <code>make-it-pretty</code> 屬性實作加入新出品的瀏覽器，包含一個前綴版與不含前綴版作用不同的值「<code>sometimes</code>」：</p> +<pre><style> + .pretty-element { + -vnd-make-it-pretty: sometimes; + make-it-pretty: sometimes; + } +</style> +</pre> +<p>上述規則中，聲明的順序非常重要：無前綴者一定要排在最後。</p> +<h3 id="在沒有瀏覽器支援前，不要使用不含前綴的_CSS_屬性或_API">在沒有瀏覽器支援前，不要使用不含前綴的 CSS 屬性或 API</h3> +<p>除非不帶前綴的版本得到了廣泛支持，其行為可能仍會發生意想不到的改變。特別是，當沒有瀏覽器支援不帶前綴的版本時，就不要使用不帶前綴的版本。最終的語法不盡然會和任何帶前綴的語法相同。</p> +<h2 id="程式碼維護">程式碼維護</h2> +<h3 id="別忘了_>">別忘了 <code>></code></h3> +<p>透過驗證器可以確保這個問題不會發生，但即使你的網站沒有完全驗證，你仍應確保你所有的 > 字元都有出現。少了它可能會讓接下來的 Tag 名稱被當成上一個 Tag 所屬的屬性，而造成意想不到的結果。可能一小段沒問題，但接下來因為某段文字代表一個屬性而完全被破壞。舉例來說，以下是一段在不支援 HTML5 瀏覽器下可正常運作，但卻讓支援 HTML5 的瀏覽器無法正常運作的網頁程式碼：</p> +<pre class="brush: html"><form action="http://www.example.com"> + <input type="submit" value="傳送此表單" +</form> +</pre> +<p>因為在 <code>input</code> Tag 的最後忘了加上 <code>></code>。</p> +<h3 id="別把失敗的實驗品留在您的網頁程式碼裡">別把失敗的實驗品留在您的網頁程式碼裡</h3> +<p>如果您想嘗試一個 CSS 屬性或其他的酷東西，但沒有效果，請記得拿掉。不然您無法預知這東西未來會做什麼壞事。</p> |