diff options
Diffstat (limited to 'files/zh-tw/conflicting/web/api')
7 files changed, 578 insertions, 0 deletions
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..7f7d4cd897 --- /dev/null +++ b/files/zh-tw/conflicting/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,163 @@ +--- +title: Drawing graphics with canvas +slug: conflicting/Web/API/Canvas_API/Tutorial +translation_of: Web/API/Canvas_API/Tutorial +translation_of_original: Web/API/Canvas_API/Drawing_graphics_with_canvas +original_slug: 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..b9d5d2fc30 --- /dev/null +++ b/files/zh-tw/conflicting/web/api/document_object_model/index.html @@ -0,0 +1,23 @@ +--- +title: DOM developer guide +slug: conflicting/Web/API/Document_Object_Model +tags: + - API + - DOM + - Guide + - NeedsTranslation + - TopicStub +translation_of: Web/API/Document_Object_Model +translation_of_original: Web/Guide/API/DOM +original_slug: Web/Guide/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..29db189e36 --- /dev/null +++ b/files/zh-tw/conflicting/web/api/html_drag_and_drop_api/index.html @@ -0,0 +1,6 @@ +--- +title: DragDrop +slug: conflicting/Web/API/HTML_Drag_and_Drop_API +original_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..e1f9906366 --- /dev/null +++ b/files/zh-tw/conflicting/web/api/index.html @@ -0,0 +1,128 @@ +--- +title: WebAPI +slug: conflicting/Web/API +translation_of: Web/API +translation_of_original: WebAPI +original_slug: 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..01e24642b1 --- /dev/null +++ b/files/zh-tw/conflicting/web/api/websockets_api/index.html @@ -0,0 +1,27 @@ +--- +title: WebSockets 參考 +slug: conflicting/Web/API/WebSockets_API +tags: + - WebSockets +translation_of: Web/API/WebSockets_API +translation_of_original: Web/API/WebSockets_API/WebSockets_reference +original_slug: WebSockets/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..5bc6671f29 --- /dev/null +++ b/files/zh-tw/conflicting/web/api/windoworworkerglobalscope/index.html @@ -0,0 +1,115 @@ +--- +title: WindowBase64 +slug: conflicting/Web/API/WindowOrWorkerGlobalScope +translation_of: Web/API/WindowOrWorkerGlobalScope +translation_of_original: Web/API/WindowBase64 +original_slug: 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..d003a22367 --- /dev/null +++ b/files/zh-tw/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html @@ -0,0 +1,116 @@ +--- +title: WindowTimers +slug: conflicting/Web/API/WindowOrWorkerGlobalScope_e2691f7ad05781a30c5fc5bb3b3f633a +translation_of: Web/API/WindowOrWorkerGlobalScope +translation_of_original: Web/API/WindowTimers +original_slug: 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> |