Skip to content

Commit

Permalink
convert to markdown for for web zh-TW
Browse files Browse the repository at this point in the history
  • Loading branch information
@yin1999
yin1999 committed Aug 12, 2022
1 parent bce67b7 commit f45505a
Show file tree
Hide file tree
Showing 203 changed files with 17,749 additions and 20,536 deletions.
66 changes: 28 additions & 38 deletions files/zh-tw/web/api/abortcontroller/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,42 +3,37 @@ title: AbortController
slug: Web/API/AbortController
translation_of: Web/API/AbortController
---
<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
{{APIRef("DOM")}}{{SeeCompatTable}}

<p><strong><code>AbortController</code></strong> 介面代表一個控制器物件，讓你可以在需要時中斷一個或多個 DOM 請求。</p>
**`AbortController`** 介面代表一個控制器物件，讓你可以在需要時中斷一個或多個 DOM 請求。

<p>你可以使用 {{domxref("AbortController.AbortController()")}} 建立一個新的 <code>AbortController</code> 物件。與 DOM 請求溝通時則是使用 {{domxref("AbortSignal")}} 物件。</p>
你可以使用 {{domxref("AbortController.AbortController()")}} 建立一個新的 `AbortController` 物件。與 DOM 請求溝通時則是使用 {{domxref("AbortSignal")}} 物件。

<h2 id="建構子">建構子</h2>
## 建構子

<dl>
<dt>{{domxref("AbortController.AbortController()")}}</dt>
<dd>建立一個新的 <code>AbortController</code> 物件實體。</dd>
</dl>
- {{domxref("AbortController.AbortController()")}}
- : 建立一個新的 `AbortController` 物件實體。

<h2 id="屬性">屬性</h2>
## 屬性

<dl>
<dt>{{domxref("AbortController.signal")}} {{readonlyInline}}</dt>
<dd>回傳一個 {{domxref("AbortSignal")}} 物件實體，可以用來中斷一個 DOM 請求、或是與其溝通。</dd>
</dl>
- {{domxref("AbortController.signal")}} {{readonlyInline}}
- : 回傳一個 {{domxref("AbortSignal")}} 物件實體，可以用來中斷一個 DOM 請求、或是與其溝通。

<h2 id="方法">方法</h2>
## 方法

<dl>
<dt>{{domxref("AbortController.abort()")}}</dt>
<dd>在一個 DOM 請求完成前中斷他。這可以用來中斷 <a href="/zh-TW/docs/Web/API/fetch">fetch 請求</a>、對任何 Response {{domxref("Body")}} 的讀取、或是資料流。</dd>
</dl>
- {{domxref("AbortController.abort()")}}
- : 在一個 DOM 請求完成前中斷他。這可以用來中斷 [fetch 請求](/zh-TW/docs/Web/API/fetch)、對任何 Response {{domxref("Body")}} 的讀取、或是資料流。

<h2 id="範例">範例</h2>
## 範例

<p>在下面的程式碼片段中，我們要用 <a href="/zh-TW/docs/Web/API/Fetch_API">Fetch API</a> 來下載一部影片。</p>
在下面的程式碼片段中，我們要用 [Fetch API](/zh-TW/docs/Web/API/Fetch_API) 來下載一部影片。

<p>我們首先用 {{domxref("AbortController.AbortController","AbortController()")}} 建立一個控制器，然後透過 {{domxref("AbortController.signal")}} 屬性取得他的 {{domxref("AbortSignal")}} 物件。</p>
我們首先用 {{domxref("AbortController.AbortController","AbortController()")}} 建立一個控制器，然後透過 {{domxref("AbortController.signal")}} 屬性取得他的 {{domxref("AbortSignal")}} 物件。

<p>在初始化 <a href="/en-TW/docs/Web/API/fetch">fetch 請求</a> 的時候，我們把 <code>AbortSignal</code> 作為選項傳入該請求的選項物件中（參考下方的 <code>{signal}</code>）。這樣會把剛才的中斷訊號與控制器跟 fetch 請求關聯起來，讓我們可以透過呼叫 {{domxref("AbortController.abort()")}} 來中斷該請求。請參考下方範例中第二個事件處理器。</p>
在初始化 [fetch 請求](/zh-TW/docs/Web/API/fetch) 的時候，我們把 `AbortSignal` 作為選項傳入該請求的選項物件中（參考下方的 `{signal}`）。這樣會把剛才的中斷訊號與控制器跟 fetch 請求關聯起來，讓我們可以透過呼叫 {{domxref("AbortController.abort()")}} 來中斷該請求。請參考下方範例中第二個事件處理器。

<pre class="brush: js">var controller = new AbortController();
```js
var controller = new AbortController();
var signal = controller.signal;

var downloadBtn = document.querySelector('.download');
Expand All @@ -58,27 +53,22 @@ function fetchVideo() {
}).catch(function(e) {
reports.textContent = '下載錯誤: ' + e.message;
})
}</pre>
}
```

<div class="note">
<p><strong>注意</strong>: 當 <code>abort()</code> 被呼叫的時候，<code>fetch()</code> 回傳的 Promise 會被以 <code>AbortError</code> 拒絕。</p>
</div>
> **備註：** 當 `abort()` 被呼叫的時候，`fetch()` 回傳的 Promise 會被以 `AbortError` 拒絕。
<p>在 GitHub 有個完整的範例可供參考 — 請參見 <a href="https://github.com/mdn/dom-examples/tree/master/abort-api">abort-api</a>（<a href="https://mdn.github.io/dom-examples/abort-api/">或是也可以實際體驗看看</a>）。</p>
在 GitHub 有個完整的範例可供參考 — 請參見 [abort-api](https://github.com/mdn/dom-examples/tree/master/abort-api)（[或是也可以實際體驗看看](https://mdn.github.io/dom-examples/abort-api/)）。

<h2 id="規格">規格</h2>
## 規格

{{Specifications}}

<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
## 瀏覽器相容性

{{Compat("api.AbortController")}}

## 參見

<p>{{Compat("api.AbortController")}}</p>

<h2 id="參見">參見</h2>

<ul>
<li><a href="/zh-TW/docs/Web/API/Fetch_API">Fetch API</a></li>
<li><a href="https://developers.google.com/web/updates/2017/09/abortable-fetch">Abortable Fetch</a> by Jake Archibald</li>
</ul>
- [Fetch API](/zh-TW/docs/Web/API/Fetch_API)
- [Abortable Fetch](https://developers.google.com/web/updates/2017/09/abortable-fetch) by Jake Archibald
140 changes: 64 additions & 76 deletions files/zh-tw/web/api/analysernode/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,94 +11,83 @@ tags:
- Web Audio API
translation_of: Web/API/AnalyserNode
---
<p>{{APIRef("Web Audio API")}}</p>
{{APIRef("Web Audio API")}}

<p>The <strong><code>AnalyserNode</code></strong><strong> </strong>interface represents a node able to provide real-time frequency and time-domain analysis information. It is an {{domxref("AudioNode")}} that passes the audio stream unchanged from the input to the output, but allows you to take the generated data, process it, and create audio visualizations.</p>
The **`AnalyserNode`** interface represents a node able to provide real-time frequency and time-domain analysis information. It is an {{domxref("AudioNode")}} that passes the audio stream unchanged from the input to the output, but allows you to take the generated data, process it, and create audio visualizations.

<p>An <code>AnalyzerNode</code> has exactly one input and one output. The node works even if the output is not connected.</p>
An `AnalyzerNode` has exactly one input and one output. The node works even if the output is not connected.

<p><img alt="Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT." src="fttaudiodata_en.svg"></p>
![Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT.](fttaudiodata_en.svg)

<table class="properties">
<tbody>
<tr>
<th scope="row">Number of inputs</th>
<td><code>1</code></td>
</tr>
<tr>
<th scope="row">Number of outputs</th>
<td><code>1</code> (but may be left unconnected)</td>
</tr>
<tr>
<th scope="row">Channel count mode</th>
<td><code>"explicit"</code></td>
</tr>
<tr>
<th scope="row">Channel count</th>
<td><code>1</code></td>
</tr>
<tr>
<th scope="row">Channel interpretation</th>
<td><code>"speakers"</code></td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="row">Number of inputs</th>
<td><code>1</code></td>
</tr>
<tr>
<th scope="row">Number of outputs</th>
<td><code>1</code> (but may be left unconnected)</td>
</tr>
<tr>
<th scope="row">Channel count mode</th>
<td><code>"max"</code></td>
</tr>
<tr>
<th scope="row">Channel count</th>
<td><code>2</code></td>
</tr>
<tr>
<th scope="row">Channel interpretation</th>
<td><code>"speakers"</code></td>
</tr>
</tbody>
</table>

<h2 id="Inheritance">Inheritance</h2>
## Inheritance

<p>This interface inherits from the following parent interfaces:</p>
This interface inherits from the following parent interfaces:

<p>{{InheritanceDiagram}}</p>
{{InheritanceDiagram}}

<h2 id="Properties">Properties</h2>
## Properties

<p><em>Inherits properties from its parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
_Inherits properties from its parent,_ _{{domxref("AudioNode")}}_.

<dl>
<dt>{{domxref("AnalyserNode.fftSize")}}</dt>
<dd>Is an unsigned long value representing the size of the FFT (<a href="http://en.wikipedia.org/wiki/Fast_Fourier_transform">Fast Fourier Transform</a>) to be used to determine the frequency domain.</dd>
<dt>{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}</dt>
<dd>Is an unsigned long value half that of the FFT size. This generally equates to the number of data values you will have to play with for the visualization.</dd>
<dt>{{domxref("AnalyserNode.minDecibels")}}</dt>
<dd>Is a double value representing the minimum power value in the scaling range for the FFT analysis data, for conversion to unsigned byte values — basically, this specifies the minimum value for the range of results when using <code>getByteFrequencyData()</code>.</dd>
<dt>{{domxref("AnalyserNode.maxDecibels")}}</dt>
<dd>Is a double value representing the maximum power value in the scaling range for the FFT analysis data, for conversion to unsigned byte values — basically, this specifies the maximum value for the range of results when using <code>getByteFrequencyData()</code>.</dd>
<dt>{{domxref("AnalyserNode.smoothingTimeConstant")}}</dt>
<dd>Is a double value representing the averaging constant with the last analysis frame — basically, it makes the transition between values over time smoother.</dd>
</dl>
- {{domxref("AnalyserNode.fftSize")}}
- : Is an unsigned long value representing the size of the FFT ([Fast Fourier Transform](http://en.wikipedia.org/wiki/Fast_Fourier_transform)) to be used to determine the frequency domain.
- {{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}
- : Is an unsigned long value half that of the FFT size. This generally equates to the number of data values you will have to play with for the visualization.
- {{domxref("AnalyserNode.minDecibels")}}
- : Is a double value representing the minimum power value in the scaling range for the FFT analysis data, for conversion to unsigned byte values — basically, this specifies the minimum value for the range of results when using `getByteFrequencyData()`.
- {{domxref("AnalyserNode.maxDecibels")}}
- : Is a double value representing the maximum power value in the scaling range for the FFT analysis data, for conversion to unsigned byte values — basically, this specifies the maximum value for the range of results when using `getByteFrequencyData()`.
- {{domxref("AnalyserNode.smoothingTimeConstant")}}
- : Is a double value representing the averaging constant with the last analysis frame — basically, it makes the transition between values over time smoother.

<h2 id="Methods">Methods</h2>
## Methods

<p><em>Inherits methods from its parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
_Inherits methods from its parent,_ _{{domxref("AudioNode")}}_.

<dl>
<dt>{{domxref("AnalyserNode.getFloatFrequencyData()")}}</dt>
<dd>Copies the current frequency data into a {{domxref("Float32Array")}} array passed into it.</dd>
</dl>
- {{domxref("AnalyserNode.getFloatFrequencyData()")}}
- : Copies the current frequency data into a {{domxref("Float32Array")}} array passed into it.
- {{domxref("AnalyserNode.getByteFrequencyData()")}}
- : Copies the current frequency data into a {{domxref("Uint8Array")}} (unsigned byte array) passed into it.
- {{domxref("AnalyserNode.getFloatTimeDomainData()")}}
- : Copies the current waveform, or time-domain, data into a {{domxref("Float32Array")}} array passed into it.
- {{domxref("AnalyserNode.getByteTimeDomainData()")}}
- : Copies the current waveform, or time-domain, data into a {{domxref("Uint8Array")}} (unsigned byte array) passed into it.

<dl>
<dt>{{domxref("AnalyserNode.getByteFrequencyData()")}}</dt>
<dd>Copies the current frequency data into a {{domxref("Uint8Array")}} (unsigned byte array) passed into it.</dd>
</dl>
## Examples

<dl>
<dt>{{domxref("AnalyserNode.getFloatTimeDomainData()")}}</dt>
<dd>Copies the current waveform, or time-domain, data into a {{domxref("Float32Array")}} array passed into it.</dd>
<dt>{{domxref("AnalyserNode.getByteTimeDomainData()")}}</dt>
<dd>Copies the current waveform, or time-domain, data into a {{domxref("Uint8Array")}} (unsigned byte array) passed into it.</dd>
</dl>
> **備註：** See the guide [Visualizations with Web Audio API](/zh-TW/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API) for more information on creating audio visualizations.
<h2 id="Examples">Examples</h2>
### Basic usage

<div class="note">
<p><strong>Note</strong>: See the guide <a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a> for more information on creating audio visualizations.</p>
</div>
The following example shows basic usage of an {{domxref("AudioContext")}} to create an `AnalyserNode`, then {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} and {{htmlelement("canvas")}} to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. For more complete applied examples/information, check out our [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) demo (see [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205) for relevant code).

<h3 id="Basic_usage">Basic usage</h3>

<p>The following example shows basic usage of an {{domxref("AudioContext")}} to create an <code>AnalyserNode</code>, then {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} and {{htmlelement("canvas")}} to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. For more complete applied examples/information, check out our <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> demo (see <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a> for relevant code).</p>

<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
```js
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();

...
Expand Down Expand Up @@ -127,7 +116,7 @@ function draw() {
var sliceWidth = WIDTH * 1.0 / bufferLength;
var x = 0;

for(var i = 0; i &lt; bufferLength; i++) {
for(var i = 0; i < bufferLength; i++) {

var v = dataArray[i] / 128.0;
var y = v * HEIGHT/2;
Expand All @@ -145,18 +134,17 @@ function draw() {
canvasCtx.stroke();
};

draw();</pre>
draw();
```

<h2 id="Specifications">Specifications</h2>
## Specifications

{{Specifications}}

<h2 id="Browser_compatibility">Browser compatibility</h2>
## Browser compatibility

{{Compat("api.AnalyserNode")}}

<h2 id="See_also">See also</h2>
## See also

<ul>
<li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
</ul>
- [Using the Web Audio API](/zh-TW/docs/Web_Audio_API/Using_Web_Audio_API)
52 changes: 31 additions & 21 deletions files/zh-tw/web/api/battery_status_api/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,16 @@ title: Battery Status API
slug: Web/API/Battery_Status_API
translation_of: Web/API/Battery_Status_API
---
<p><strong>Battery Status API</strong> 也就是所謂的 <strong>Battery API</strong>，將提供系統電池充電容量的資訊，並在電池容量變化時送出事件，以通知使用者。此 API 可調整 Apps 的資源耗用量，在電力偏低時縮減耗電量；或可在電力耗盡之前儲存檔案，避免資料遺失。</p>
<p>Battery Status API 是以 <a href="/en-US/docs/Web/API/window.navigator.battery"><code>window.navigator.battery</code></a> 屬性 (為 <a href="/en-US/docs/Web/API/BatteryManager"><code>BatteryManager</code></a> 物件) 而擴充了 <a href="/en-US/docs/Web/API/window.navigator"><code>window.navigator</code></a>，並新增數項可讓使用者接收的新事件，以隨時監控電池狀態。</p>
<h2 id="範例">範例</h2>
<p>在此範例中，我們將分別監聽 <a href="/en-US/docs/Web/Reference/Events/chargingchange">chargingchange</a> 與 <a href="/en-US/docs/Web/Reference/Events/levelchange">levelchange</a> 事件，而看到充電狀態 (不論是否插電進行充電) 與電池容量的變化。</p>
<pre class="brush: js">var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
**Battery Status API** 也就是所謂的 **Battery API**，將提供系統電池充電容量的資訊，並在電池容量變化時送出事件，以通知使用者。此 API 可調整 Apps 的資源耗用量，在電力偏低時縮減耗電量；或可在電力耗盡之前儲存檔案，避免資料遺失。

Battery Status API 是以 [`window.navigator.battery`](/zh-TW/docs/Web/API/window.navigator.battery) 屬性 (為 [`BatteryManager`](/zh-TW/docs/Web/API/BatteryManager) 物件) 而擴充了 [`window.navigator`](/zh-TW/docs/Web/API/window.navigator)，並新增數項可讓使用者接收的新事件，以隨時監控電池狀態。

## 範例

在此範例中，我們將分別監聽 [chargingchange](/zh-TW/docs/Web/Reference/Events/chargingchange) 與 [levelchange](/zh-TW/docs/Web/Reference/Events/levelchange) 事件，而看到充電狀態 (不論是否插電進行充電) 與電池容量的變化。

```js
var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;

function updateBatteryStatus() {
console.log("Battery status: " + battery.level * 100 + " %");
Expand All @@ -20,19 +25,24 @@ function updateBatteryStatus() {
battery.addEventListener("chargingchange", updateBatteryStatus);
battery.addEventListener("levelchange", updateBatteryStatus);
updateBatteryStatus();
</pre>
<p>另可參閱<a href="http://dev.w3.org/2009/dap/system-info/battery-status.html#introduction">規格所提供之範例</a>。</p>
<h2 id="規格">規格</h2>
<p>{{page("/en-US/docs/Web/API/BatteryManager","Specifications")}}</p>
<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
<p>{{page("/en-US/docs/Web/API/BatteryManager","Browser_compatibility")}}</p>
<h2 id="另請參閱">另請參閱</h2>
<ul>
<li><a href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">部落格文章 - Using the Battery API</a></li>
<li><a href="http://davidwalsh.name/battery-api">David Walsh 所寫的 JavaScript Battery Api</a></li>
<li><a href="https://github.com/pstadler/battery.js">battery.js - 跨瀏覽器 wrapper</a></li>
<li><a href="/en-US/docs/Web/API/BatteryManager"><code>BatteryManager</code></a></li>
<li><a href="/en-US/docs/Web/API/window.navigator.battery"><code>navigator.battery</code></a></li>
<li><code><a href="http://tools.guyellisrocks.com/experiment/batterystatus">測試你的瀏覽器是否支援 Battery Status API</a>。可掃 QR Code:</code></li>
<li> <a href="http://x.co/qr/batstat?s=165"><img alt="QR Code to Battery Status API Test Page" src="http://x.co/qr/batstat?s=165" style="width: 165px; height: 165px;"></a></li>
</ul>
```

另可參閱[規格所提供之範例](http://dev.w3.org/2009/dap/system-info/battery-status.html#introduction)。

## 規格

{{page("/en-US/docs/Web/API/BatteryManager","Specifications")}}

## 瀏覽器相容性

{{page("/en-US/docs/Web/API/BatteryManager","Browser_compatibility")}}

## 另請參閱

- [部落格文章 - Using the Battery API](http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/)
- [David Walsh 所寫的 JavaScript Battery Api](http://davidwalsh.name/battery-api)
- [battery.js - 跨瀏覽器 wrapper](https://github.com/pstadler/battery.js)
- [`BatteryManager`](/zh-TW/docs/Web/API/BatteryManager)
- [`navigator.battery`](/zh-TW/docs/Web/API/window.navigator.battery)
- `測試你的瀏覽器是否支援 Battery Status API。可掃 QR Code:`
- [![QR Code to Battery Status API Test Page](http://x.co/qr/batstat?s=165)](http://x.co/qr/batstat?s=165)
Loading

0 comments on commit f45505a

Please sign in to comment.