[CRON] sync translated content

2 files changed, 0 insertions, 348 deletions

diff --git a/files/zh-tw/web/api/detecting_device_orientation/index.html b/files/zh-tw/web/api/detecting_device_orientation/index.html
deleted file mode 100644
index d81307ba57..0000000000
--- a/files/zh-tw/web/api/detecting_device_orientation/index.html
+++ /dev/null
@@ -1,278 +0,0 @@
----
-title: 偵測裝置方向
-slug: Web/API/Detecting_device_orientation
-translation_of: Web/API/Detecting_device_orientation
----
-<div>{{SeeCompatTable}}</div>
-
-<p>目前支援 Web 的裝置，已有越來越多可偵測本身的方向（<strong>Orientation</strong>）；也就是說，這些裝置可根據重力牽引的相對關係而改變其畫面方向，同時回報該筆資料。特別是如行動電話的手持式裝置，同樣會判斷這種資訊而自動旋轉其畫面。如此除了能保持正向畫面之外，裝置橫放時亦能以寬螢幕呈現網頁內容。</p>
-
-<p>現有 2 組 JavaScript 事件可處理方向資訊。第一個是 {{domxref("DeviceOrientationEvent")}} 事件。只要加速規偵測到裝置方向的變化，隨即送出此事件。在接收並處理這些方向事件所回報的資料之後，即可針對使用者移動裝置所造成的方向與高度變化，確實做出回應。</p>
-
-<p>第二個為 {{domxref("DeviceMotionEvent")}} 事件。只要加速過程產生變化，隨即送出該事件。此事件用以監聽加速過程的變化，因此不同於 {{domxref("DeviceOrientationEvent")}} 的方向變化。如筆記型電腦中的感測器，一般均能夠偵測 {{domxref("DeviceMotionEvent")}} 而保護移動中的儲存裝置。{{domxref("DeviceOrientationEvent")}} 則較常用於行動裝置。</p>
-
-<h2 id="處理方向事件">處理方向事件</h2>
-
-<p>若要開始接收方向變換的情形，只要監聽 {{event("deviceorientation")}} 事件即可：</p>
-
-<div class="note">
-<p><strong>Note</strong>: <a href="https://github.com/dorukeker/gyronorm.js">gyronorm.js</a> is a polyfill for normalizing the accelerometer and gyroscope data on mobile devices. This is useful for overcoming some of the differences in device support for device orientation.</p>
-</div>
-
-<pre class="brush: js">window.addEventListener("deviceorientation", handleOrientation, true);
-</pre>
-
-<p>在註冊了事件監聽器（Event listener。本範例使用 <code>handleOrientation()</code> 函式）之後，將以更新過的方向資料而定期呼叫你的監聽器函式。</p>
-
-<p>方向事件共有 4 組值：</p>
-
-<ul>
- <li>{{ domxref("DeviceOrientationEvent.absolute") }}</li>
- <li>{{ domxref("DeviceOrientationEvent.alpha") }}</li>
- <li>{{ domxref("DeviceOrientationEvent.beta") }}</li>
- <li>{{ domxref("DeviceOrientationEvent.gamma") }}</li>
-</ul>
-
-<p>事件處理器（Event handler）函式則如下列：</p>
-
-<pre class="brush: js">function handleOrientation(event) {
-  var absolute = event.absolute;
-  var alpha    = event.alpha;
-  var beta     = event.beta;
-  var gamma    = event.gamma;
-
-  // Do stuff with the new orientation data
-}
-</pre>
-
-<h3 id="方向值說明">方向值說明</h3>
-
-<p>所回報的各個軸線值，均是以標準座標而呈現對應各軸線的旋轉量 (Amount of rotation)。可參閱下方所提供的<a href="/DOM/Orientation_and_motion_data_explained" title="Orientation and motion data explained">方向與動向資料說明</a>文章以獲得詳細資訊。</p>
-
-<ul>
- <li>{{domxref("DeviceOrientationEvent.alpha")}} 值為裝置的 z 軸動向 (Motion)，介於 0 ~ 360 度之間。</li>
- <li>{{domxref("DeviceOrientationEvent.beta")}} 值為裝置的 x 軸動向，介於 -180 ~ 180 度之間，代表裝置的前後動向。</li>
- <li>{{domxref("DeviceOrientationEvent.gamma")}} 值為裝置的 y 軸動向，介於 -90 ~ 90 度之間，代表裝置的左右動向。</li>
-</ul>
-
-<h3 id="方向範例">方向範例</h3>
-
-<p>只要瀏覽器支援 {{event("deviceorientation")}} 事件，且該執行裝置可偵測自己的方向，均可使用此範例。</p>
-
-<p>先想像花園裡有 1 顆球：</p>
-
-<pre class="brush: html">&lt;div class="garden"&gt;
-  &lt;div class="ball"&gt;&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;pre class="output"&gt;&lt;/pre&gt;
-</pre>
-
-<p>這座花園為 200 像素寬（對，一座小花園），球就位在正中央：</p>
-
-<pre class="brush: css">.garden {
-  position: relative;
-  width : 200px;
-  height: 200px;
-  border: 5px solid #CCC;
-  border-radius: 10px;
-}
-
-.ball {
-  position: absolute;
-  top   : 90px;
-  left  : 90px;
-  width : 20px;
-  height: 20px;
-  background: green;
-  border-radius: 100%;
-}
-</pre>
-
-<p>現在只要移動裝置，球也會跟著移動：</p>
-
-<pre class="brush: js">var ball   = document.querySelector('.ball');
-var garden = document.querySelector('.garden');
-var output = document.querySelector('.output');
-
-var maxX = garden.clientWidth  - ball.clientWidth;
-var maxY = garden.clientHeight - ball.clientHeight;
-
-function handleOrientation(event) {
-  var x = event.beta;  // In degree in the range [-180,180]
-  var y = event.gamma; // In degree in the range [-90,90]
-
-  output.innerHTML  = "beta : " + x + "\n";
-  output.innerHTML += "gamma: " + y + "\n";
-
-  // Because we don't want to have the device upside down
-  // We constrain the x value to the range [-90,90]
-  if (x &gt;  90) { x =  90};
-  if (x &lt; -90) { x = -90};
-
-  // To make computation easier we shift the range of
-  // x and y to [0,180]
-  x += 90;
-  y += 90;
-
-  // 10 is half the size of the ball
-  // It center the positioning point to the center of the ball
-  ball.style.top  = (maxX*x/180 - 10) + "px";
-  ball.style.left = (maxY*y/180 - 10) + "px";
-}
-
-window.addEventListener('deviceorientation', handleOrientation);
-</pre>
-
-<p>這裡有即時結果 (若無法顯示，可至本文右上角切換回英文原文觀看)：</p>
-
-<div>{{EmbedLiveSample('Orientation_example', '230', '260')}}</div>
-
-<div class="warning">
-<p><strong>警告：</strong>Chrome 與 Firefox 處理角度的方式不同，所以某些軸線可能方向顛倒。</p>
-</div>
-
-<h2 id="處理動向事件">處理動向事件</h2>
-
-<p>動向事件與方向事件的處理方式完全相同，但動向事件擁有自己的名稱：{{event("devicemotion")}}</p>
-
-<pre class="brush: js">window.addEventListener("devicemotion", <em>handleMotion</em>, true);</pre>
-
-<p>真正改變的是由 {{domxref("DeviceMotionEvent")}} 物件所提供的資訊；且該物件又作為 <em>HandleMotion</em> 函式的參數。</p>
-
-<p>動向事件共有 4 組屬性：</p>
-
-<ul>
- <li>{{ domxref("DeviceMotionEvent.acceleration") }}</li>
- <li>{{ domxref("DeviceMotionEvent.accelerationIncludingGravity") }}</li>
- <li>{{ domxref("DeviceMotionEvent.rotationRate") }}</li>
- <li>{{ domxref("DeviceMotionEvent.interval") }}</li>
-</ul>
-
-<h3 id="動向值說明">動向值說明</h3>
-
-<p>{{domxref("DeviceMotionEvent")}} 物件將提供「裝置位置與方向的變化速度」的相關資訊，並根據 3 組軸線 (可參閱<a href="/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained">方向與動向資料說明</a>的細節) 提供變化情形。</p>
-
-<p>針對 {{domxref("DeviceMotionEvent.acceleration","acceleration")}} 與 {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}，這些軸線將對應：</p>
-
-<ul>
- <li><code>x</code><code>：代表由東至西的軸線</code></li>
- <li><code>y</code><code>：代表由南至北的軸線</code></li>
- <li><code>z</code><code>：代表與地面垂直的軸線</code></li>
-</ul>
-
-<p>針對稍有差異的 {{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}，則資訊將對應：</p>
-
-<ul>
- <li><code>alpha</code><code>：代表與螢幕 </code>(或桌機的鍵盤) <code>垂直的軸線之旋轉率</code></li>
- <li><code>beta</code><code>：代表與螢幕平面 </code>(或桌機的鍵盤) 由左至右軸線之旋轉率</li>
- <li><code>gamma</code><code>：代表與螢幕平面 </code>(或桌機的鍵盤) 由下至上軸線之旋轉率</li>
-</ul>
-
-<p>最後，{{domxref("DeviceMotionEvent.interval","interval")}} 代表以毫秒（Millisecond）為單位的時間間隔，是裝置取得資料的頻率。</p>
-
-<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('Device Orientation')}}</td>
-   <td>{{Spec2('Device Orientation')}}</td>
-   <td>Initial specification.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Edge</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari (WebKit)</th>
-  </tr>
-  <tr>
-   <td>{{domxref("DeviceOrientationEvent")}}</td>
-   <td>7.0</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>3.6<sup>[1]</sup><br>
-    6</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
-  <tr>
-   <td>{{domxref("DeviceMotionEvent")}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>6</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>Edge</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Phone</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>{{domxref("DeviceOrientationEvent")}}</td>
-   <td>3.0</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>3.6<sup>[1]</sup><br>
-    6</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>4.2</td>
-  </tr>
-  <tr>
-   <td>{{domxref("DeviceMotionEvent")}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>6</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] Firefox 3.6 to 5 supported <a href="/en-US/docs/Web/Events/MozOrientation">mozOrientation</a> versus the standard {{domxref("DeviceOrientationEvent")}} event.</p>
-
-<h2 id="參見">參見</h2>
-
-<ul>
- <li>{{domxref("DeviceOrientationEvent")}}</li>
- <li>{{domxref("DeviceMotionEvent")}}</li>
- <li>舊版 <a href="/docs/Web/Events/MozOrientation" title="en-US/DOM/MozOrientation">MozOrientation</a> 事件</li>
- <li><a href="/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="Orientation and motion data explained">方向與動向資料說明</a></li>
- <li><a href="/docs/Web/Guide/DOM/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation In 3D Transforms">於 3D Transforms 中使用 deviceorientation</a></li>
- <li><a href="/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation">Cyber Orb: 2D maze game with device orientation</a></li>
-</ul>
diff --git a/files/zh-tw/web/api/document_object_model/events/index.html b/files/zh-tw/web/api/document_object_model/events/index.html
deleted file mode 100644
index 7949e5506a..0000000000
--- a/files/zh-tw/web/api/document_object_model/events/index.html
+++ /dev/null
@@ -1,70 +0,0 @@
----
-title: 事件與DOM
-slug: Web/API/Document_Object_Model/Events
-translation_of: Web/API/Document_Object_Model/Events
-original_slug: Web/API/Document_Object_Model/事件
----
-<h2 id="Introduction" name="Introduction">Introduction</h2>
-
-<p>This chapter describes the DOM Event Model. The <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">Event</a> interface itself is described, as well as the interfaces for event registration on nodes in the DOM, and <a href="/en-US/docs/Web/API/EventTarget.addEventListener">event listeners</a>, and several longer examples that show how the various event interfaces relate to one another.</p>
-
-<p>There is an excellent diagram that clearly explains the three phases of event flow through the DOM in the <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM Level 3 Events draft</a>.</p>
-
-<p>Also see <a href="/en-US/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation">Example 5: Event Propagation</a> in the Examples chapter for a more detailed example of how events move through the DOM.</p>
-
-<h2 id="DOM_event_handler_List" name="DOM_event_handler_List">Registering event listeners</h2>
-
-<p>There are 3 ways to register event handlers for a DOM element.</p>
-
-<h3 id="EventTarget.addEventListener" name="EventTarget.addEventListener"><a href="/en-US/docs/Web/API/EventTarget.addEventListener"><code>EventTarget.addEventListener</code></a></h3>
-
-<pre class="brush: js">// Assuming myButton is a button element
-myButton.addEventListener('click', function(){alert('Hello world');}, false);
-</pre>
-
-<p>This is the method you should use in modern web pages.</p>
-
-<p>Note: Internet Explorer 6-8 didn't support this method, offering a similar {{domxref("EventTarget.attachEvent")}} API instead. For cross-browser compatibility use one of the many JavaScript libraries available.</p>
-
-<p>More details can be found on the {{domxref("EventTarget.addEventListener")}} reference page.</p>
-
-<h3 id="HTML_attribute" name="HTML_attribute"><a href="/en-US/docs/Web/Guide/HTML/Event_attributes">HTML attribute</a></h3>
-
-<pre class="brush: html">&lt;button onclick="alert('Hello world!')"&gt;
-</pre>
-
-<p>The JavaScript code in the attribute is passed the Event object via the <code>event</code> parameter. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">The return value is treated in a special way, described in the HTML specification</a>.</p>
-
-<p>This way 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.</p>
-
-<h3 id="DOM_element_properties" name="DOM_element_properties">DOM element properties</h3>
-
-<pre class="brush: js">// Assuming myButton is a button element
-myButton.onclick = function(event){alert('Hello world');};
-</pre>
-
-<p>The function can be defined to take an <code>event</code> parameter. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">The return value is treated in a special way, described in the HTML specification</a>.</p>
-
-<p>The problem with this method is that only one handler can be set per element and per event.</p>
-
-<h2 id="Accessing_Event_interfaces">Accessing Event interfaces</h2>
-
-<p>Event handlers may be attached to various objects including DOM elements, document, the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">window object</a>, etc. When an event occurs, an event object is created and passed sequentially to the event listeners.</p>
-
-<p>The {{domxref("Event")}} interface is accessible from within the handler function, via the event object passed as the first argument. The following simple example shows how an event object is passed to the event handler function, and can be used from within one such function.</p>
-
-<pre class="brush: js">function foo(evt) {
-  // the evt parameter is automatically assigned the event object
-  alert(evt);
-}
-table_el.onclick = foo;
-</pre>
-
-<h2 id="Subnav">Subnav</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li>
- <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li>
- <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li>
- <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li>
-</ul>