`、`` のいずれに接続されていても、`target` は常にボタン要素であることに注意してください。しかし、`currentTarget` は現在実行しているイベントハンドラーの要素を特定します。
+
+{{embedlivesample("target and currentTarget")}}
+
+`target` プロパティは、上記の[イベント移譲](#イベント移譲)の例のように、イベント移譲でよく使用します。
+
+## スキルテスト
+
+この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。[スキルテスト: イベント](/ja/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Events)を参照してください。
+
+## まとめ
+
+これで、この早い段階でウェブイベントについて知っておくべきことはすべてわかったはずです。
+前述したように、イベントは実のところ JavaScript のコアには属しません。ブラウザーの Web API で定義されています。
+
+また、JavaScript が使用されるさまざまなコンテキストには、異なるイベントモデルがあることを理解することが重要です。Web API から、ブラウザーの WebExtensions や Node.js (サーバーサイド JavaScript) などの他の領域までです。
+これでこれらの領域をすべて理解できるとは思っていませんが、ウェブ開発を学習していく上で、イベントの基本を理解しておくことはとても役に立ちます。
+
+> **メモ:** 行き詰まった場合は、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
+
+## 関連情報
+
+- [domevents.dev](https://domevents.dev/) — 探究を通して DOM イベントシステムの動作について学ぶことができる、とても有益なインタラクティブな遊び場アプリです。
+- [イベントリファレンス](/ja/docs/Web/Events)
+- [Event order](https://www.quirksmode.org/js/events_order.html) （キャプチャとバブリングの議論） — Peter-Paul Koch による素晴らしい作品です。
+
+{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Events","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
diff --git a/files/ja/learn/javascript/first_steps/variables/index.md b/files/ja/learn/javascript/first_steps/variables/index.md
index e636181f1aaa83..38f4dfc2366b1f 100644
--- a/files/ja/learn/javascript/first_steps/variables/index.md
+++ b/files/ja/learn/javascript/first_steps/variables/index.md
@@ -200,7 +200,7 @@ myName = "Bob";
これらの理由と複数の理由から、コードでは `var` よりも `let` を使用することをお勧めします。古いブラウザーの対応を明確に書いている場合を除き、2015 年以降、現代のすべてのブラウザーが `let` に対応しているため、`var` を使用する理由はなくなりました。
-> **メモ:** このコードをブラウザーコンソールで試す場合は、ここにあるコードブロックのそれぞれを丸ごとコピー & ペーストするのがよいでしょう。[Chrome のコンソールの機能](https://goo.gle/devtools-const-repl)には、`let` と `const` による変数の再宣言が許可されているものがあります。
+> **メモ:** このコードをブラウザーコンソールで試す場合は、ここにあるコードブロックのそれぞれを丸ごとコピー & ペーストするのがよいでしょう。[Chrome のコンソールの機能](https://docs.google.com/document/d/1NP_FnHr4WCZRp7exgUklvNiXrH3nujcfwvp2pzMQ8-0/edit#heading=h.7y5hynxk52e9)には、`let` と `const` による変数の再宣言が許可されているものがあります。
>
> ```plain
> > let myName = "Chris";
diff --git a/files/ja/orphaned/tutorials/index.md b/files/ja/orphaned/tutorials/index.md
deleted file mode 100644
index 1f21c18382c293..00000000000000
--- a/files/ja/orphaned/tutorials/index.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: チュートリアル
-slug: orphaned/Tutorials
----
-
-SDK を使用したアドオンの開発方法を実践的に説明したページの一覧です。
-
----
-
-### はじめに
-
-- [インストール](/en-US/Add-ons/SDK/Tutorials/Installation)
- - : Windows、OS X および Linux 上で、SDK をダウンロード、インストール、および初期化します。
-- [トラブルシューティング](/en-US/Add-ons/SDK/Tutorials/Troubleshooting)
- - : よくある問題を解決する場合や、支援を求める場合のヒントを説明します。
-
-- [入門](/en-US/Add-ons/SDK/Tutorials/Getting_started_with_cfx)
- - : シンプルなアドオンを作成を始めるための手順の概略です。
-
-### ユーザーインターフェイスの作成
-
-- [ツールバーボタンの追加](/en-US/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar)
- - : Firefox アドオンツールバーにボタンを追加します。
-- [Firefox へのメニュー項目の追加](/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox)
- - : Firefox のメインメニューにアイテムを追加します。
-- [ポップアップの表示](/en-US/Add-ons/SDK/Tutorials/Display_a_Popup)
- - : HTML および JavaScript を使用して実装したポップアップダイアログを表示します。
-- [コンテキストメニュー項目の追加](/en-US/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item)
- - : Firefox のコンテキストメニューに項目を追加します。
-
----
-
-### ブラウザーの操作
-
-- [ウェブページを開く](/en-US/Add-ons/SDK/Tutorials/Open_a_Web_Page)
- - : tabs モジュールを用いて、新しいタブまたはウィンドウでウェブページを開き、そのコンテンツにアクセスします。
-- [ページの読み込みを確認する](/en-US/Add-ons/SDK/Tutorials/Listen_for_Page_Load)
- - : tabs モジュールを用いて、新しいウェブページが読み込まれたときに通知を受け取り、それらのウェブページのコンテンツにアクセスします。
-
-- [開いているタブの一覧を表示する](/en-US/Add-ons/SDK/Tutorials/List_Open_Tabs)
- - : tabs モジュールを用いて、現在開いているすべてのタブに対して反復処理を行い、それらのコンテンツにアクセスします。
-
-### ウェブページの変更
-
-- [URL に基づいたウェブページの変更](/en-US/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL)
- - : URL に基づいてウェブページを検索するフィルタを作成します。フィルタに一致する URL のウェブページを読み込んだときに、フィルタ内の指定したスクリプトを実行します。
-- [アクティブなウェブページの変更](/en-US/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab)
- - : 現在アクティブなウェブページに、動的にスクリプトを読み込みます。
-
----
-
-### 開発テクニック
-
-- [ログの出力](/en-US/Add-ons/SDK/Tutorials/Logging)
- - : 診断を行うために、メッセージをコンソールにログとして出力します。
-- [再利用可能なモジュールの作成](/en-US/Add-ons/SDK/Tutorials/Creating_reusable_modules)
- - : アドオンを別個のモジュールとして体系化し、開発、デバッグ、およびメンテナンスを容易にします。 また、作成したモジュールが入った再利用可能なパッケージを作成し、他の開発者もそのモジュールを使用できるようにします。
-- [ユニットテスト](/en-US/Add-ons/SDK/Tutorials/Unit_testing)
- - : SDK のテストフレームワークを使用して、ユニットテストを作成し実行します。
-- [Chrome 権限](/en-US/Add-ons/SDK/Tutorials/Chrome_authority)
- - : この権限を使用すると、アドオンが Components オブジェクトにアクセスできるので、どんな XPCOM オブジェクトでも読み込んで使用できるようになります。
-- [イベントターゲットの作成](/en-US/Add-ons/SDK/Tutorials/Creating_event_targets)
- - : 定義したオブジェクトがイベントを発生させられるようにします。
-- [読み込みと読み込み解除の確認](/en-US/Add-ons/SDK/Tutorials/Listening_for_load_and_unload)
- - : Firefox にアドオンが読み込まれたり、読み込み解除されたりしたときに通知を受け取ります。またコマンドラインからアドオンに引数を渡します。
-- [サードパーティーモジュールの使用](/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox)
- - : SDK 自体に含まれていない追加のモジュールをインストールして使用します。
-- [ローカライゼーション](/en-US/Add-ons/SDK/Tutorials/l10n)
- - : ローカライズ可能なコードを作成します。
-- [モバイル開発](/en-US/Add-ons/SDK/Tutorials/Mobile_development)
- - : Android 用 Firefox モバイルのアドオン開発を始める手順を説明します。
-- [アドオン用のデバッガー](/en-US/Add-ons/SDK/Tutorials/Mobile_development)
- - : アドオン内の JavaScript のデバッグを行います。
-
----
-
-### 応用
-
-- [アノテーターアドオン](/en-US/Add-ons/SDK/Tutorials/Annotator)
- - : より複雑なアドオンの開発作業を順を追って説明します。
diff --git a/files/ja/web/api/abortcontroller/abort/index.md b/files/ja/web/api/abortcontroller/abort/index.md
index 55e5e2b0e0a186..30b50b6ade5109 100644
--- a/files/ja/web/api/abortcontroller/abort/index.md
+++ b/files/ja/web/api/abortcontroller/abort/index.md
@@ -3,13 +3,13 @@ title: "AbortController: abort() メソッド"
short-title: abort()
slug: Web/API/AbortController/abort
l10n:
- sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8
+ sourceCommit: c0e43030605b6f12bc4d550c0d5b8bf8a633eff3
---
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
-**`abort()`** は {{domxref("AbortController")}} インターフェイスのメソッドで、 DOM リクエストを完了前に中止します。
-これは[フェッチリクエスト](/ja/docs/Web/API/fetch)、あらゆるレスポンス本体の消費、ストリームを中止することができます。
+**`abort()`** は {{domxref("AbortController")}} インターフェイスのメソッドで、非同期操作を完了前に中止します。
+これは[フェッチリクエスト](/ja/docs/Web/API/Window/fetch)、あらゆるレスポンス本体の消費、ストリームを中止することができます。
## 構文
@@ -34,7 +34,7 @@ abort(reason)
最初に {{domxref("AbortController.AbortController","AbortController()")}} コンストラクターを使用してコントローラーを作成し、関連する {{domxref("AbortSignal")}} オブジェクトへの参照を {{domxref("AbortController.signal")}} プロパティを使用して取り込みます。
-[フェッチリクエスト](/ja/docs/Web/API/fetch)が開始されると、 `AbortSignal` をリクエストのオプションオブジェクト（下記の `{signal}`）にオプションとして渡します。これにより、シグナルとコントローラーをそのフェッチリクエストと関連付け、 2 つ目のイベントリスナーで下記のように {{domxref("AbortController.abort()")}} を呼び出すことでフェッチを中断できるようになります。
+[フェッチリクエスト](/ja/docs/Web/API/Window/fetch)が開始されると、 `AbortSignal` をリクエストのオプションオブジェクト（下記の `{signal}`）にオプションとして渡します。これにより、シグナルとコントローラーをそのフェッチリクエストと関連付け、 2 つ目のイベントリスナーで下記のように {{domxref("AbortController.abort()")}} を呼び出すことでフェッチを中断できるようになります。
```js
const controller = new AbortController();
diff --git a/files/ja/web/api/abortcontroller/abortcontroller/index.md b/files/ja/web/api/abortcontroller/abortcontroller/index.md
index 91b115980d88b9..c5efb513d061b8 100644
--- a/files/ja/web/api/abortcontroller/abortcontroller/index.md
+++ b/files/ja/web/api/abortcontroller/abortcontroller/index.md
@@ -3,10 +3,10 @@ title: "AbortController: AbortController() コンストラクター"
short-title: AbortController()
slug: Web/API/AbortController/AbortController
l10n:
- sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8
+ sourceCommit: c0e43030605b6f12bc4d550c0d5b8bf8a633eff3
---
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
**`AbortController()`** は、新しい {{domxref("AbortController")}} オブジェクトインスタンスを生成します。
@@ -26,7 +26,7 @@ new AbortController()
最初に {{domxref("AbortController.AbortController","AbortController()")}} コンストラクターを使用してコントローラーを作成し、関連する {{domxref("AbortSignal")}} オブジェクトへの参照を {{domxref("AbortController.signal")}} プロパティを使用して取り込みます。
-[フェッチリクエスト](/ja/docs/Web/API/fetch)が開始されると、 `AbortSignal` をリクエストのオプションオブジェクト（下記の `{ signal }`）にオプションとして渡します。これにより、シグナルとコントローラーをそのフェッチリクエストと関連付け、 2 つ目のイベントリスナーで下記のように {{domxref("AbortController.abort()")}} を呼び出すことでフェッチを中断できるようになります。
+[フェッチリクエスト](/ja/docs/Web/API/Window/fetch)が開始されると、 `AbortSignal` をリクエストのオプションオブジェクト（下記の `{ signal }`）にオプションとして渡します。これにより、シグナルとコントローラーをそのフェッチリクエストと関連付け、 2 つ目のイベントリスナーで下記のように {{domxref("AbortController.abort()")}} を呼び出すことでフェッチを中断できるようになります。
```js
const controller = new AbortController();
diff --git a/files/ja/web/api/abortcontroller/index.md b/files/ja/web/api/abortcontroller/index.md
index 96e1f5d984b554..6064b77d78fe6f 100644
--- a/files/ja/web/api/abortcontroller/index.md
+++ b/files/ja/web/api/abortcontroller/index.md
@@ -2,29 +2,29 @@
title: AbortController
slug: Web/API/AbortController
l10n:
- sourceCommit: bca8d1ab2bc4f5a1ef6b39c454b0229539178e98
+ sourceCommit: c0e43030605b6f12bc4d550c0d5b8bf8a633eff3
---
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
**`AbortController`** インターフェイスは 1 つ以上のウェブリクエストをいつでも中断することを可能にするコントローラーオブジェクトを表します。
-新しい `AbortController` オブジェクトを新しく生成するには、 {{domxref("AbortController.AbortController()", "AbortController()")}} コンストラクターを使うことができます。 DOM リクエストとの送信は、 {{domxref("AbortSignal")}} オブジェクトを使って行われます。
+新しい `AbortController` オブジェクトは、 {{domxref("AbortController.AbortController()", "AbortController()")}} コンストラクターを使って新しく生成することができます。非同期操作の通信は、{{domxref("AbortSignal")}} オブジェクトを使って行われます。
## コンストラクター
-- {{domxref("AbortController()")}}
+- {{domxref("AbortController.AbortController()", "AbortController()")}}
- : 新しい `AbortController` オブジェクトインスタンスを生成します。
-## プロパティ
+## インスタンスプロパティ
- {{domxref("AbortController.signal")}} {{ReadOnlyInline}}
- - : {{domxref("AbortSignal")}} オブジェクトのインスタンスを返します。 このオブジェクトは、 DOM リクエストの送信や中断に使用します。
+ - : {{domxref("AbortSignal")}} オブジェクトのインスタンスを返します。 このオブジェクトは、非同期操作の通信や中断に使用します。
-## メソッド
+## インスタンスメソッド
- {{domxref("AbortController.abort()")}}
- - : DOM リクエストが完了する前に中断します。これは、[フェッチリクエスト](/ja/docs/Web/API/fetch)、あらゆるレスポンス本体やストリームを中断することができます。
+ - : 非同期操作が完了する前に中断します。これは、[フェッチリクエスト](/ja/docs/Web/API/Window/fetch)や、あらゆるレスポンス本体やストリームを中断することができます。
## 例
@@ -34,7 +34,9 @@ l10n:
まず {{domxref("AbortController.AbortController","AbortController()")}} コンストラクターを使ってコントローラーを生成し、 {{domxref("AbortController.signal")}} プロパティを使用して関連する {{domxref("AbortSignal")}} オブジェクトへの参照を取得します。
-[フェッチリクエスト](/ja/docs/Web/API/fetch)が行われると、リクエストのオプションオブジェクト（下記 `{signal}` を参照）の内部のオプションとして `AbortSignal` を渡します。これによりシグナルと読み込みリクエストのコントローラーは関連付き、 {{domxref("AbortController.abort()")}} を呼び出すことで下記の 2 つ目のイベントリスナーに見られるように中断が許可されます。
+[フェッチリクエスト](/ja/docs/Web/API/Window/fetch)が行われると、リクエストのオプションオブジェクト（下記 `{signal}` を参照）の内部のオプションとして `AbortSignal` を渡します。これによりシグナルと読み込みリクエストのコントローラーは関連付き、 {{domxref("AbortController.abort()")}} を呼び出すことで下記の 2 つ目のイベントリスナーに見られるように中断が許可されます。
+
+`abort()` が呼び出されると、`fetch()` のプロミスは `AbortError` という名前の `DOMException` で拒否されます。
```js
let controller;
@@ -52,20 +54,36 @@ abortBtn.addEventListener("click", () => {
}
});
-function fetchVideo() {
+async function fetchVideo() {
controller = new AbortController();
const signal = controller.signal;
- fetch(url, { signal })
- .then((response) => {
- console.log("Download complete", response);
- })
- .catch((err) => {
- console.error(`Download error: ${err.message}`);
- });
+
+ try {
+ const response = await fetch(url, { signal });
+ console.log("Download complete", response);
+ // process response further
+ } catch (err) {
+ console.error(`Download error: ${err.message}`);
+ }
}
```
-> **メモ:** `abort()` が呼ばれると、`fetch()` のプロミスは `AbortError` と呼ばれる `DOMException` で失敗します。
+`fetch()` が履行された後で、レスポンス本体を読み込む前にリクエストが中止された場合、レスポンス本体を読み込もうとすると `AbortError` 例外が発生して拒否されます。
+
+```js
+async function get() {
+ const controller = new AbortController();
+ const request = new Request("https://example.org/get", {
+ signal: controller.signal,
+ });
+
+ const response = await fetch(request);
+ controller.abort();
+ // 次の行で `AbortError` が発生する
+ const text = await response.text();
+ console.log(text);
+}
+```
[GitHub に完全に動作する例](https://github.com/mdn/dom-examples/tree/main/abort-api)があります。また、[ライブでの実行](https://mdn.github.io/dom-examples/abort-api/)も確認してください。
diff --git a/files/ja/web/api/abortcontroller/signal/index.md b/files/ja/web/api/abortcontroller/signal/index.md
index 140a7ac9e7e640..2db5f05ece74d2 100644
--- a/files/ja/web/api/abortcontroller/signal/index.md
+++ b/files/ja/web/api/abortcontroller/signal/index.md
@@ -3,12 +3,12 @@ title: "AbortController: signal プロパティ"
short-title: signal
slug: Web/API/AbortController/signal
l10n:
- sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8
+ sourceCommit: c0e43030605b6f12bc4d550c0d5b8bf8a633eff3
---
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
-**`signal`** は {{domxref("AbortController")}} インターフェイスの読み取り専用プロパティで、求めに応じて DOM リクエストと連携したり中止したりするために使用される {{domxref("AbortSignal")}} オブジェクトインスタンスを返します。
+**`signal`** は {{domxref("AbortController")}} インターフェイスの読み取り専用プロパティで、求めに応じて非同期操作とやりとりしたり中止したりするために使用される {{domxref("AbortSignal")}} オブジェクトインスタンスを返します。
## 値
@@ -20,7 +20,7 @@ l10n:
最初に {{domxref("AbortController.AbortController", "AbortController()")}} コンストラクターを使用してコントローラーを作成し、関連する {{domxref("AbortSignal")}} オブジェクトへの参照を {{domxref("AbortController.signal")}} プロパティを使用して取り込みます。
-[フェッチリクエスト](/ja/docs/Web/API/fetch)が開始されると、 `AbortSignal` をリクエストのオプションオブジェクト（下記の `{signal}`）にオプションとして渡します。これにより、シグナルとコントローラーをそのフェッチリクエストと関連付け、 2 つ目のイベントリスナーで下記のように {{domxref("AbortController.abort()")}} を呼び出すことでフェッチを中断できるようになります。
+[フェッチリクエスト](/ja/docs/Web/API/Window/fetch)が開始されると、 `AbortSignal` をリクエストのオプションオブジェクト（下記の `{signal}`）にオプションとして渡します。これにより、シグナルとコントローラーをそのフェッチリクエストと関連付け、 2 つ目のイベントリスナーで下記のように {{domxref("AbortController.abort()")}} を呼び出すことでフェッチを中断できるようになります。
```js
const controller = new AbortController();
diff --git a/files/ja/web/api/abortsignal/abort_event/index.md b/files/ja/web/api/abortsignal/abort_event/index.md
index 7ec8d3e856de07..9aefd30a0b28e4 100644
--- a/files/ja/web/api/abortsignal/abort_event/index.md
+++ b/files/ja/web/api/abortsignal/abort_event/index.md
@@ -1,11 +1,12 @@
---
title: "AbortSignal: abort イベント"
+short-title: abort
slug: Web/API/AbortSignal/abort_event
l10n:
- sourceCommit: 02e1bfcad5fd0de845fb033d331c3c027afa2d6e
+ sourceCommit: 15f0b5552bc9c2ea1f32b0cd5ee840a7d43c887e
---
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
**`abort`** は {{domxref("AbortSignal")}} のイベントで、関連するリクエストが中止されたとき、つまり {{domxref("AbortController.abort()")}} を使用して中止されたときに発行されます。
diff --git a/files/ja/web/api/abortsignal/abort_static/index.md b/files/ja/web/api/abortsignal/abort_static/index.md
index 8300cc0a31687b..0ac1e42a130b0b 100644
--- a/files/ja/web/api/abortsignal/abort_static/index.md
+++ b/files/ja/web/api/abortsignal/abort_static/index.md
@@ -1,11 +1,14 @@
---
-title: AbortSignal.abort()
+title: "AbortSignal: abort() 静的メソッド"
+short-title: abort()
slug: Web/API/AbortSignal/abort_static
+l10n:
+ sourceCommit: 15f0b5552bc9c2ea1f32b0cd5ee840a7d43c887e
---
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
-静的な **`AbortSignal.abort()`** メソッドは、既に中止と設定されている（かつ {{domxref("AbortSignal/abort_event", "abort")}} イベントが発生していない） {{domxref("AbortSignal") }} を返します。
+**`AbortSignal.abort()`** は静的メソッドで、既に中止と設定されている（かつ {{domxref("AbortSignal/abort_event", "abort")}} イベントが発生していない） {{domxref("AbortSignal")}} を返します。
これは、以下のコードの一連で行うものです。
@@ -22,8 +25,8 @@ return controller.signal;
## 構文
```js-nolint
-abort()
-abort(reason)
+AbortSignal.abort()
+AbortSignal.abort(reason)
```
### 引数
diff --git a/files/ja/web/api/abortsignal/aborted/index.md b/files/ja/web/api/abortsignal/aborted/index.md
index 2542c175cc7396..6efddea518c5ee 100644
--- a/files/ja/web/api/abortsignal/aborted/index.md
+++ b/files/ja/web/api/abortsignal/aborted/index.md
@@ -1,13 +1,14 @@
---
-title: AbortSignal.aborted
+title: "AbortSignal: aborted プロパティ"
+short-title: aborted
slug: Web/API/AbortSignal/aborted
l10n:
- sourceCommit: 02e1bfcad5fd0de845fb033d331c3c027afa2d6e
+ sourceCommit: 15f0b5552bc9c2ea1f32b0cd5ee840a7d43c887e
---
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
-**`aborted`** は読み取り専用プロパティで、そのシグナルが通信している DOM リクエストが中止されているか (`true`)、されていないか (`false`) を示す値を返します。
+**`aborted`** は読み取り専用プロパティで、そのシグナルがやりとりしている非同期操作が中止されているか (`true`)、されていないか (`false`) を示す値を返します。
## 値
diff --git a/files/ja/web/api/abortsignal/any_static/index.md b/files/ja/web/api/abortsignal/any_static/index.md
index 8916b8a8f4fed5..ee28ccbbf71755 100644
--- a/files/ja/web/api/abortsignal/any_static/index.md
+++ b/files/ja/web/api/abortsignal/any_static/index.md
@@ -1,13 +1,14 @@
---
title: "AbortSignal: any() 静的メソッド"
+short-title: any()
slug: Web/API/AbortSignal/any_static
l10n:
- sourceCommit: 32f666e453bdb8c93d305075453b6e304cae94de
+ sourceCommit: 15f0b5552bc9c2ea1f32b0cd5ee840a7d43c887e
---
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
-静的メソッド **`AbortSignal.any()`** は、中止シグナルが入った反復可能オブジェクトを受け取り、{{domxref("AbortSignal")}} を返します。返される中止シグナルは、渡された反復可能オブジェクト内の中止シグナルのいずれかが中止された時中止されます。{{domxref("AbortSignal.reason", "中止の理由","","true")}}は、中止された最初のシグナルの理由に設定されます。渡された中止シグナルのいずれかが既に中止されている場合は、既に中止と設定されている {{domxref("AbortSignal")}} を返します。
+**`AbortSignal.any()`** は静的メソッドで、中止シグナルが入った反復可能オブジェクトを受け取り、{{domxref("AbortSignal")}} を返します。返される中止シグナルは、渡された反復可能オブジェクト内の中止シグナルのいずれかが中止された時中止されます。{{domxref("AbortSignal.reason", "中止の理由","","true")}}は、中止された最初のシグナルの理由に設定されます。渡された中止シグナルのいずれかが既に中止されている場合は、既に中止と設定されている {{domxref("AbortSignal")}} を返します。
## 構文
diff --git a/files/ja/web/api/abortsignal/index.md b/files/ja/web/api/abortsignal/index.md
index 49286970da9ec0..a0b55d7e056f36 100644
--- a/files/ja/web/api/abortsignal/index.md
+++ b/files/ja/web/api/abortsignal/index.md
@@ -2,45 +2,49 @@
title: AbortSignal
slug: Web/API/AbortSignal
l10n:
- sourceCommit: a662e542a529a0f8c86b60d85abe0035093c86d1
+ sourceCommit: c0e43030605b6f12bc4d550c0d5b8bf8a633eff3
---
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
-**`AbortSignal`** インターフェイスは DOM リクエスト（フェッチなど）と通信し、必要に応じて {{domxref("AbortController")}} オブジェクトを介して中止することを可能にするシグナルオブジェクトを表します。
+**`AbortSignal`** インターフェイスは非同期操作（フェッチリクエストなど）とやりとりし、必要に応じて {{domxref("AbortController")}} オブジェクトを介して中止することを可能にするシグナルオブジェクトを表します。
{{InheritanceDiagram}}
## インスタンスプロパティ
-_AbortSignal インターフェイスには、親インターフェイスである {{domxref("EventTarget")}} から継承しているプロパティもあります。_
+_親インターフェイスである {{domxref("EventTarget")}} から継承しているプロパティもあります。_
- {{domxref("AbortSignal.aborted")}} {{ReadOnlyInline}}
- - : 論理値で、シグナルが通信しているリクエスト（または複数のリクエスト）が中止されているか (`true`)、中止されていないか (`false`) を表します。
+ - : 論理値で、このシグナルが通信しているリクエスト（または複数のリクエスト）が中止されているか (`true`)、中止されていないか (`false`) を表します。
- {{domxref("AbortSignal.reason")}} {{ReadOnlyInline}}
- - : シグナルが中止されると、中止の理由を提供する JavaScript の値です。
+ - : シグナルが中止されたとき、中止の理由を提供する JavaScript の値です。
## 静的メソッド
-- {{domxref("AbortSignal.abort()")}}
- - : 既に中止と設定された **`AbortSignal`** を返します。
-- {{domxref("AbortSignal.any()")}}
- - : 指定された中止シグナルのいずれかが中止された時中止となる **`AbortSignal`** を返します。
-- {{domxref("AbortSignal.timeout()")}}
- - : 指定された時間の後で自動的に中止となる **`AbortSignal`** インターフェイスを返します。
+_親インターフェイスである {{domxref("EventTarget")}} から継承しているメソッドもあります。_
+
+- {{domxref("AbortSignal/abort_static", "AbortSignal.abort()")}}
+ - : 既に中止と設定された `AbortSignal` を返します。
+- {{domxref("AbortSignal/any_static", "AbortSignal.any()")}}
+ - : 指定された中止シグナルのいずれかが中止された時中止となる `AbortSignal` を返します。
+- {{domxref("AbortSignal/timeout_static", "AbortSignal.timeout()")}}
+ - : 指定された時間の後で自動的に中止となる `AbortSignal` インターフェイスを返します。
## インスタンスメソッド
-_**`AbortSignal`** インターフェイスには、親インターフェイスである {{domxref("EventTarget")}} から継承しているメソッドもあります。_
+_親インターフェイスである {{domxref("EventTarget")}} から継承しているメソッドもあります。_
- {{domxref("AbortSignal.throwIfAborted()")}}
- : シグナルが中止された場合、シグナルの中止理由 ({{domxref("AbortSignal.reason", "reason")}}) で例外を発生させ、それ以外の場合は何もしません。
## イベント
-[`addEventListener()`](/ja/docs/Web/API/EventTarget/addEventListener) を使うか、このインターフェイスの `onイベント名` プロパティにイベントリスナーを割り当てるかして、このイベントを待ち受けしてください。
+_親インターフェイスである {{DOMxRef("EventTarget")}} から継承しているイベントもあります。_
+
+{{domxref("EventTarget.addEventListener", "addEventListener()")}} を使うか、このインターフェイスの `onイベント名` プロパティにイベントリスナーを割り当てるかして、このイベントを待ち受けしてください。
-- [`abort`](/ja/docs/Web/API/AbortSignal/abort_event)
+- {{domxref("AbortSignal/abort_event", "abort")}}
- : このシグナルが通信している DOM リクエストが中断されたとき、呼び出されます。
`onabort` プロパティを介しても利用可能です。
@@ -52,42 +56,63 @@ _**`AbortSignal`** インターフェイスには、親インターフェイス
まず {{domxref("AbortController.AbortController","AbortController()")}} コンストラクターを使ってコントローラーを生成し、{{domxref("AbortController.signal")}} プロパティを使用して関連する {{domxref("AbortSignal")}} オブジェクトへの参照を取得します。
-[読み込みリクエスト](/ja/docs/Web/API/fetch) が初期化すると、 `AbortSignal` をリクエストのオプションオブジェクト（下記 `{signal}` を参照）の内部のオプションとして渡します。これによりシグナルと読み込みリクエストのコントローラーが関連付き、{{domxref("AbortController.abort()")}} を呼び出すことで下記の 2 つ目のイベントリスナーに見られるように中断が許可されます。
+[フェッチリクエスト](/ja/docs/Web/API/Window/fetch) が初期化すると、 `AbortSignal` をリクエストのオプションオブジェクト（下記 `{signal}` を参照）の内部のオプションとして渡します。これによりシグナルと読み込みリクエストのコントローラーが関連付き、{{domxref("AbortController.abort()")}} を呼び出すことで下記の 2 つ目のイベントリスナーに見られるように中断が許可されます。
下記では、フェッチ処理が 2 つ目のイベントリスナーで中止されていることがわかります。このイベントリスナーは、中止ボタン (`abortBtn`) がクリックされたときに起動します。
-```js
-const controller = new AbortController();
-const signal = controller.signal;
+`abort()` が呼び出されると、`fetch()` のプロミスは `AbortError` という名前の `DOMException` で拒否されます。
+```js
+let controller;
const url = "video.mp4";
+
const downloadBtn = document.querySelector(".download");
const abortBtn = document.querySelector(".abort");
downloadBtn.addEventListener("click", fetchVideo);
abortBtn.addEventListener("click", () => {
- controller.abort();
- console.log("Download aborted");
+ if (controller) {
+ controller.abort();
+ console.log("ダウンロードを中止しました");
+ }
});
-function fetchVideo() {
- fetch(url, { signal })
- .then((response) => {
- console.log("Download complete", response);
- })
- .catch((err) => {
- console.error(`Download error: ${err.message}`);
- });
+async function fetchVideo() {
+ controller = new AbortController();
+ const signal = controller.signal;
+
+ try {
+ const response = await fetch(url, { signal });
+ console.log("ダウンロードが完了しました", response);
+ // さらにレスポンスを処理
+ } catch (err) {
+ console.error(`ダウンロードエラー: ${err.message}`);
+ }
}
```
-> **メモ:** `abort()` が呼び出されると、`fetch()` のプロミスは `AbortError` で失敗します。
+`fetch()` が履行された後で、レスポンス本体を読み込む前にリクエストが中止された場合、レスポンス本体を読み込もうとすると `AbortError` 例外が発生して拒否されます。
+
+```js
+async function get() {
+ const controller = new AbortController();
+ const request = new Request("https://example.org/get", {
+ signal: controller.signal,
+ });
+
+ const response = await fetch(request);
+ controller.abort();
+ // 次の行で `AbortError` が発生する
+ const text = await response.text();
+ console.log(text);
+}
+```
-You can find a [full working example on GitHub](https://github.com/mdn/dom-examples/tree/main/abort-api); you can also see it [running live](https://mdn.github.io/dom-examples/abort-api/).
+[GitHub に完全に動作する例](https://github.com/mdn/dom-examples/tree/main/abort-api)があります。[実行可能な例](https://mdn.github.io/dom-examples/abort-api/)を見ることもできます。
### タイムアウトによるフェッチ操作の中止
-もしタイムアウトで処理を中断する必要がある場合は、静的な {{domxref("AbortSignal.timeout()") }} メソッドを使用することができます。
+もしタイムアウトで処理を中断する必要がある場合は、静的な {{domxref("AbortSignal/timeout_static", "AbortSignal.timeout()")}} メソッドを使用することができます。
これは、指定のミリ秒後に自動的にタイムアウトする `AbortSignal` を返すものです。
下記のコードでは、ファイルのダウンロードに成功するか、 5 秒後にタイムアウトエラーが発生した場合にどのように処理するかを示しています。
@@ -119,31 +144,83 @@ try {
### タイムアウトまたは明示的な中止を伴うフェッチの中止
-`fetch()` は複数のシグナルを組み合わせられるようには設計されていないので、 {{domxref("AbortController.abort()")}} の呼び出しまたは `AbortSignal` のタイムアウトのどちらかでダウンロードを中止することは「直接」はできません（ただし、前の例のように、停止ボタンなどのブラウザー内蔵の仕組みからタイムアウトシグナルを中止することができます）。
-
-複数のシグナルに対してトリガーを発生させるには、デイジーチェーン接続する必要があります。
-次のコードは、別個のタイマーのハンドラーで {{domxref("AbortController.abort()")}} を呼び出す方法を示しています。
+複数のシグナルから中止したい場合は、{{domxref("AbortSignal/any_static", "AbortSignal.any()")}}を使用して単一のシグナルに結合することができます。次の例では、 {{domxref("Window/fetch", "fetch")}} を使用してこの例を示しています。
```js
try {
const controller = new AbortController();
- const timeoutId = setTimeout(() => controller.abort(), 5000);
- const res = await fetch(url, { signal: controller.signal });
+ const timeoutSignal = AbortSignal.timeout(5000);
+ const res = await fetch(url, {
+ // どちらかのシグナルが中止されると、フェッチは中止される
+ signal: AbortSignal.any([controller.signal, timeoutSignal]),
+ });
const body = await res.json();
} catch (e) {
if (e.name === "AbortError") {
- // Notify the user of abort.
- // Note this will never be a timeout error!
+ // ユーザーに中止を通知
+ } else if (e.name === "TimeoutError") {
+ // ユーザーにタイムアウトを通知
} else {
- // A network error, or some other problem.
+ // ネットワークエラー、またはその他の問題
console.log(`Type: ${e.name}, Message: ${e.message}`);
}
-} finally {
- clearTimeout(timeoutId);
}
```
-> **メモ:** {{domxref("AbortSignal.timeout()")}} を使用したときとは異なり、最終的な中止がタイムアウトによって発生したのかどうかを判断する方法はありません。
+> **メモ:** {{domxref("AbortSignal/timeout_static", "AbortSignal.timeout()")}} を使用したときとは異なり、最終的な中止がタイムアウトによって発生したのかどうかを判断する方法はありません。
+
+### 中止可能な API の実装
+
+中止対応を必要とする API は `AbortSignal` オブジェクトを受け入れることができ、必要なときに中止シグナル処理を発生させるためにその状態を使用することができます。
+
+{{jsxref("Promise")}} ベースの API は、`AbortSignal` の中止 {{domxref("AbortSignal.reason", "reason")}} で未確定のプロミスを拒否することで、中止シグナルに応答する必要があります。
+例えば、次の `myCoolPromiseAPI` はシグナルを受け取ってプロミスを返します。
+シグナルが既に中止されている場合、または中止イベントが検出された場合、プロミスは直ちに拒否されます。
+そうでない場合は完全に完了し、プロミスを解決します。
+
+```js
+function myCoolPromiseAPI(/* …, */ { signal }) {
+ return new Promise((resolve, reject) => {
+ // シグナルがすでに中止されている場合は、プロミスを拒否するために直ちに例外を発生
+ if (signal.aborted) {
+ reject(signal.reason);
+ }
+
+ // API の主目的を実行
+ // 終了したら resolve(result) を呼び出す。
+
+ // 'abort' シグナルを監視
+ signal.addEventListener("abort", () => {
+ // 主な処理を停止
+ // 中止される理由でプロミスを拒否する
+ reject(signal.reason);
+ });
+ });
+}
+```
+
+このAPIは、次のように使用します。
+処理を中止するために {{domxref("AbortController.abort()")}} が呼び出されていることに注意しましょう。
+
+```js
+const controller = new AbortController();
+const signal = controller.signal;
+
+startSpinner();
+
+myCoolPromiseAPI({ /* …, */ signal })
+ .then((result) => {})
+ .catch((err) => {
+ if (err.name === "AbortError") return;
+ showUserErrorMessage();
+ })
+ .then(() => stopSpinner());
+
+controller.abort();
+```
+
+プロミスを返さない API も同じような反応をするかもしれません。
+場合によっては、そのシグナルを吸収する意味があるかもしれません。
## 仕様書
diff --git a/files/ja/web/api/abortsignal/throwifaborted/index.md b/files/ja/web/api/abortsignal/throwifaborted/index.md
index 11befad05d33e2..6756e60dabd0e6 100644
--- a/files/ja/web/api/abortsignal/throwifaborted/index.md
+++ b/files/ja/web/api/abortsignal/throwifaborted/index.md
@@ -1,17 +1,18 @@
---
-title: AbortSignal.throwIfAborted()
+title: "AbortSignal: throwIfAborted() メソッド"
+short-title: throwIfAborted()
slug: Web/API/AbortSignal/throwIfAborted
l10n:
- sourceCommit: 8d27f508bd2c6270918fb3b047d73b57e8b949d3
+ sourceCommit: 15f0b5552bc9c2ea1f32b0cd5ee840a7d43c887e
---
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
-**`throwIfAborted()`**メソッドは、シグナルが中止された場合、シグナルの中止理由 ({{domxref("AbortSignal.reason", "reason")}}) の例外を発生させ、それ以外の場合は何もしません。
+**`throwIfAborted()`** メソッドは、シグナルが中止された場合、シグナルの中止理由 ({{domxref("AbortSignal.reason", "reason")}}) の例外を発生させ、それ以外の場合は何もしません。
中止に対応させる必要がある API は、{{domxref("AbortSignal")}} オブジェクトを受け入れ、 `throwIfAborted()` を使用して [`abort`](/ja/docs/Web/API/AbortSignal/abort_event) イベントが発生するとテストして例外を発生するようにすることができます。
-このメソッドは、シグナルを受け取る関数に渡すのではなく、コード内の特定の点で処理を中止するために使用することもできます。
+このメソッドは、シグナルを受け取る関数に渡すのではなく、コード内の特定の時点で処理を中止するために使用することもできます。
## 構文
@@ -54,59 +55,6 @@ async function waitForCondition(func, targetValue, { signal } = {}) {
ループを反復処理するたびに、 `throwIfAborted()` を使用して、もし処理が中止された場合にはシグナルの `reason` を例外として投げます（それ以外の場合は何もしません）。
シグナルが中止された場合、 `waitForCondition()` のプロミスが拒否されます。
-### 中止可能な API の実装
-
-中止することを対応する必要がある API は `AbortSignal` オブジェクトを受け入れ、必要なときにその状態を使用して中止シグナル処理を開始させることができます。
-
-{{jsxref("Promise")}} ベースの API は、`AbortSignal` の中止理由 ({{domxref("AbortSignal.reason", "reason")}}) で未確定のプロミスを拒否して、中止シグナルに応答する必要があります。
-例えば、シグナルを受け取ってプロミスを返す以下の `myCoolPromiseAPI` を考えてみましょう。
-シグナルが既に中止されている場合、あるいは中止イベントが検出された場合、プロミスは直ちに拒否されます。
-そうでなければ、プロミスは完全に終了し、プロミスを解決します。
-
-```js
-function myCoolPromiseAPI(/* … ,*/ { signal }) {
- return new Promise((resolve, reject) => {
- // If the signal is already aborted, immediately throw in order to reject the promise.
- if (signal.aborted) {
- reject(signal.reason);
- }
-
- // Perform the main purpose of the API
- // Call resolve(result) when done.
-
- // Watch for 'abort' signals
- signal.addEventListener("abort", () => {
- // Stop the main operation
- // Reject the promise with the abort reason.
- reject(signal.reason);
- });
- });
-}
-```
-
-そして、 API は次のように使用されるかもしれません。
-処理を中止するために {{domxref("AbortController.abort()")}} が呼び出されることに注意してください。
-
-```js
-const controller = new AbortController();
-const signal = controller.signal;
-
-startSpinner();
-
-myCoolPromiseAPI({ /* … ,*/ signal })
- .then((result) => {})
- .catch((err) => {
- if (err.name === "AbortError") return;
- showUserErrorMessage();
- })
- .then(() => stopSpinner());
-
-controller.abort();
-```
-
-プロミスを返さない API も同じように反応するかもしれません。
-場合によっては、そのシグナルを吸収することが意味を持つかもしれません。
-
## 仕様書
{{Specifications}}
diff --git a/files/ja/web/api/abortsignal/timeout_static/index.md b/files/ja/web/api/abortsignal/timeout_static/index.md
index 6488ee30755e54..007ebf59bc3bcf 100644
--- a/files/ja/web/api/abortsignal/timeout_static/index.md
+++ b/files/ja/web/api/abortsignal/timeout_static/index.md
@@ -1,24 +1,26 @@
---
-title: AbortSignal.timeout()
+title: "AbortSignal: timeout() 静的メソッド"
+short-title: timeout()
slug: Web/API/AbortSignal/timeout_static
+l10n:
+ sourceCommit: 15f0b5552bc9c2ea1f32b0cd5ee840a7d43c887e
---
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
-静的な **`AbortSignal.timeout()`** メソッドは、指定した時間が経過すると自動的に中止する {{domxref("AbortSignal")}} を返すものです。
+**`AbortSignal.timeout()`** は静的メソッドで、指定した時間が経過すると自動的に中止する {{domxref("AbortSignal")}} を返すものです。
-このシグナルは、タイムアウト時には `TimeoutError` {{domxref("DOMException")}} で、ブラウザーの停止ボタン（または他にも組み込まれた「停止」処理）を押した場合には `AbortError` {{domxref("DOMException")}} で中止されます。
+このシグナルは、タイムアウト時には `TimeoutError` {{domxref("DOMException")}} で、ブラウザーの停止ボタン（または他の組み込まれた「停止」処理）を押した場合には `AbortError` {{domxref("DOMException")}} で中止されます。
これにより、通常ユーザーへの通知が必要なタイムアウトエラーと、そうでないユーザーによる中止の発生を UI で区別できます。
-タイムアウトは経過時間ではなく活動時間に基づきます。コードが実行されているワーカーがサスペンドされている場合や、文書がバックフォワードキャッシュ ("[bfcache](https://web.dev/bfcache/)") にある場合は、事実上一時停止されます。
+タイムアウトは経過時間ではなく活動時間に基づきます。コードが実行されているワーカーがサスペンドされている場合や、文書がバックフォワードキャッシュ ("[bfcache](https://web.dev/articles/bfcache)") にある場合は、事実上一時停止されます。
-> **メモ:** 執筆時点では、複数のシグナルを組み合わせる方法はありません。
-> つまり、タイムアウトシグナルを使用するか、{{domxref("AbortController.abort()")}}を呼び出してダウンロードを直接中止することはできません。
+複数のシグナルを組み合わせるには、{{domxref("AbortSignal/any_static", "AbortSignal.any()")}} を使用することができます。例えば、タイムアウトシグナルまたは {{domxref("AbortController.abort()")}} を呼び出してダウンロードを直接中止させることができます。
## 構文
```js-nolint
-timeout(time)
+AbortSignal.timeout(time)
```
### 引数
diff --git a/files/ja/web/api/document/requeststorageaccessfor/index.md b/files/ja/web/api/document/requeststorageaccessfor/index.md
index 72465ea2bc091a..7c7a9bd9a8cfe8 100644
--- a/files/ja/web/api/document/requeststorageaccessfor/index.md
+++ b/files/ja/web/api/document/requeststorageaccessfor/index.md
@@ -3,7 +3,7 @@ title: "Document: requestStorageAccessFor() メソッド"
short-title: requestStorageAccessFor()
slug: Web/API/Document/requestStorageAccessFor
l10n:
- sourceCommit: b97c61b40d8b71532d54fe5af1eab4ca014605ec
+ sourceCommit: 0ebc78fd61acddbe9505330f006b706ac786456d
---
{{APIRef("Storage Access API")}}{{SeeCompatTable}}
@@ -84,7 +84,7 @@ function rSAFor() {
}
```
-`requestStorageAccessFor()` の呼び出しが成功した後、[CORS](/ja/docs/Web/HTTP/CORS) / [`crossorigin`](/ja/docs/Web/HTML/Attributes/crossorigin) を含む場合、クロスサイトリクエストはクッキーを入れることができます。このようなリクエストは [`credentials: "include"`](/ja/docs/Web/API/fetch#credentials) オプションを用い、リソースは `crossorigin="use-credentials"` 属性を記載しなければなりません。
+`requestStorageAccessFor()` の呼び出しが成功した後、[CORS](/ja/docs/Web/HTTP/CORS) / [`crossorigin`](/ja/docs/Web/HTML/Attributes/crossorigin) を含む場合、クロスサイトリクエストはクッキーを入れることができます。このようなリクエストは [`credentials: "include"`](/ja/docs/Web/API/RequestInit#credentials) オプションを用い、リソースは `crossorigin="use-credentials"` 属性を記載しなければなりません。
例えば、次のようにします。
diff --git a/files/ja/web/api/element/ariacolindextext/index.md b/files/ja/web/api/element/ariacolindextext/index.md
new file mode 100644
index 00000000000000..a070ddbddaaf8c
--- /dev/null
+++ b/files/ja/web/api/element/ariacolindextext/index.md
@@ -0,0 +1,88 @@
+---
+title: Element.ariaColIndexText
+slug: Web/API/Element/ariaColIndexText
+l10n:
+ sourceCommit: 388135bbfb0c1f852a17f52a6bfe6e85c8dc1abc
+---
+
+{{APIRef("DOM")}}{{SeeCompatTable}}
+
+**`ariaColIndexText`** は {{domxref("Element")}} インターフェイスのプロパティで、[`aria-colindextext`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-colindextext) 属性の値を反映し、aria-colindex の人間が読むための代替テキストを定義します。
+
+## 値
+
+文字列です。
+
+## 例
+
+この例では、ID が `role-heading` の要素の `aria-colindex` 属性に "Aria Role column" が設定されています。`ariaColIndexText` を使用して、値を文字列 "New column name" に更新します。
+
+```html
+
+```
+
+```js
+let el = document.getElementById("role-heading");
+console.log(el.ariaColIndexText); // "Aria Role"
+el.ariaColIndexText = "New column name";
+console.log(el.ariaColIndexText); // "New column name"
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ARIA: table role](/ja/docs/Web/Accessibility/ARIA/Roles/table_role)
diff --git a/files/ja/web/api/element/ariarowindextext/index.md b/files/ja/web/api/element/ariarowindextext/index.md
new file mode 100644
index 00000000000000..f60bc65b4a3e64
--- /dev/null
+++ b/files/ja/web/api/element/ariarowindextext/index.md
@@ -0,0 +1,87 @@
+---
+title: Element.ariaRowIndexText
+slug: Web/API/Element/ariaRowIndexText
+l10n:
+ sourceCommit: 388135bbfb0c1f852a17f52a6bfe6e85c8dc1abc
+---
+
+{{APIRef("DOM")}}{{SeeCompatTable}}
+
+**`ariaRowIndexText`** は {{domxref("Element")}} インターフェイスのプロパティで、[`aria-rowindextext`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-rowindextext) 属性の値を反映し、aria-rowindex の人間が読むための代替テキストを定義します。
+
+## 値
+
+文字列です。
+
+## 例
+
+この例では、ID が `role-heading` の要素の `aria-rowindextext` 属性に "Heading row" が設定されています。`ariaRowIndexText` を使用して、値を文字列 "Updated heading row" に更新します。
+
+```html
+
+```
+
+```js
+let el = document.getElementById("role-heading");
+console.log(el.ariaRowIndexText); // "Heading row"
+el.ariaRowIndexText = "Updated heading row";
+console.log(el.ariaRowIndexText); // "Updated heading row"
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ARIA: table role](/ja/docs/Web/Accessibility/ARIA/Roles/table_role)
diff --git a/files/ja/web/api/element/checkvisibility/index.md b/files/ja/web/api/element/checkvisibility/index.md
new file mode 100644
index 00000000000000..e4a913cabb87b5
--- /dev/null
+++ b/files/ja/web/api/element/checkvisibility/index.md
@@ -0,0 +1,185 @@
+---
+title: "Element: checkVisibility() メソッド"
+short-title: checkVisibility()
+slug: Web/API/Element/checkVisibility
+l10n:
+ sourceCommit: 2b07e7febdc4b51243873b0b4978228a603f3f73
+---
+
+{{APIRef("DOM")}}
+
+**`checkVisibility()`** は {{domxref("Element")}} インターフェイスのメソッドで、この要素が可視状態であるかどうかを検査します。
+
+このメソッドは以下のどちらかの場合に `false` を返します。
+
+- 例えば CSS の {{cssxref("display")}} プロパティが [`none`](/ja/docs/Web/CSS/display#none) または [`contents`](/ja/docs/Web/CSS/display#contents) に設定されている場合のように、要素に関連づけられたボックスがない場合。
+- 要素または祖先要素が {{cssxref("content-visibility")}} プロパティを [`hidden`](/ja/docs/Web/CSS/content-visibility#hidden) に設定しているため、要素が描画されない場合。
+
+オプションの引数を指定することで、「可視」の意味を他の解釈として検査することができます。
+例えば、要素の不透明度が `0` であるかどうか、要素の [`visibility`](/ja/docs/Web/CSS/visibility) プロパティの値が不可視であるかどうか、要素 {{cssxref("content-visibility")}} プロパティの値が [`auto`](/ja/docs/Web/CSS/content-visibility#auto) であり、現在その描画がスキップされているかどうかを追加で検査することができます。
+
+## 構文
+
+```js-nolint
+checkVisibility(options)
+```
+
+### 引数
+
+- `options` {{optional_inline}}
+
+ - : 実行する追加チェックを示すオブジェクト。
+ 可能なオプションは以下の通りです。
+
+ - `contentVisibilityAuto`
+ - : `true` を指定すると、要素 {{cssxref("content-visibility")}} プロパティに値 [`auto`](/ja/docs/Web/CSS/content-visibility#auto) がある（または継承している）場合に、現在その描画がスキップされているかどうかを調べます。
+ 既定では `false` です。
+ - `opacityProperty`
+ - : `true` を指定すると、要素の {{cssxref("opacity")}} プロパティが `0` の値である（または継承している）かどうかを調べます。
+ 既定では `false` です。
+ - `visibilityProperty`
+
+ - : `true` を指定すると、{{cssxref("visibility")}} プロパティの値によって要素が不可視になっているかどうかを調べます。
+ 既定では `false` です。
+
+ > **メモ:** 不可視の要素には、[`visibility: hidden`](/ja/docs/Web/CSS/visibility#hidden) が設定された要素や、[`visibility: collapse`](/ja/docs/Web/CSS/visibility#collapse) が設定された要素が含まれます。
+
+ - `checkOpacity`
+ - : [`opacityProperty`](#opacityproperty) の過去の別名です。
+ - `checkVisibilityCSS`
+ - : [`visibilityProperty`](#visibilityproperty) の過去の別名です。
+
+### 返値
+
+以下の条件に当てはまる場合は `false`、当てはまらない場合は `true` となります。
+
+- 要素に関連づけられたボックスがない場合。
+- 要素の {{cssxref("content-visibility")}} プロパティが [`hidden`](/ja/docs/Web/CSS/visibility#hidden) の値である（または継承している）場合。
+- `opacityProperty`（または `checkOpacity`）が `true` で、要素 {{cssxref("opacity")}} プロパティの値が `0` である（または継承している）場合。
+- `visibilityProperty`（または `checkVisibilityCSS`）が `true` で、{{cssxref("visibility")}} プロパティの値によって要素が不可視になっている場合。
+- `contentVisibilityAuto` が `true` で、{{cssxref("content-visibility")}} プロパティの値が [`auto`](/ja/docs/Web/CSS/content-visibility#auto) の値で（または継承している）、要素の描画がスキップされている場合。
+
+## 例
+
+### さまざまな CSS で checkVisibility() の検査
+
+次の例では、`display`、`content-visibility`、`visibility`、`opacity` の各 CSS プロパティのさまざまな値の場合に、`checkVisibility()` の結果がどのように変化するかを検査することができます。
+
+#### HTML
+
+この HTML は `
` 要素を `checkVisibility()` の結果に影響を与える CSS プロパティのために定義します。
+最初の値 （選択された既定値） は、要素に適用されたときに `checkVisibility()` が `true` を返すようにし、他の値は可視性に影響します。
+
+```html
+
+ display: block
+ display: none
+ display: content
+
+
+
+ content-visibility: visible
+ content-visibility: hidden
+ content-visibility: auto
+
+
+
+ opacity: 1
+ opacity: 0
+
+
+
+ visibility: visible
+ visibility: hidden
+ visibility: collapse
+
+```
+
+次に `` があり、引数にオプションを渡さなかった場合と、別個のオプション値が渡された場合の `checkVisibility()` の検査の結果を出力するために使用します。
+最後には、検査される要素（選択された CSS プロパティ値が適用される要素）があります。
+
+```html
+可視性を検査する要素
+```
+
+#### CSS
+
+CSSはテストする要素を強調表示するだけです。
+
+```css
+#test_element {
+ border: solid;
+ border-color: blue;
+}
+```
+
+#### JavaScript
+
+下記のコードは、それぞれの `` 要素を取得しています。
+始めに `updateCSS()` メソッドが呼び出され、select 要素が変わるたびに、選択した CSS を対象とする要素に適用します。
+
+```js
+const displayCssSelect = document.getElementById("css_display");
+const contentVisibilityCssSelect = document.getElementById(
+ "css_content_visibility",
+);
+const displayCssOpacity = document.getElementById("css_opacity");
+const displayCssVisibility = document.getElementById("css_visibility");
+
+const outputResult = document.getElementById("output_result");
+const elementToCheck = document.getElementById("test_element");
+
+updateCSS();
+
+const cssSelectors = document.querySelectorAll("select");
+cssSelectors.forEach((select) => {
+ select.addEventListener("change", (event) => {
+ updateCSS();
+ });
+});
+
+function updateCSS() {
+ // 選択した CSS プロパティを対象とする要素に適用する
+ elementToCheck.style.display = displayCssSelect.value;
+ elementToCheck.style.contentVisibility = contentVisibilityCssSelect.value;
+ elementToCheck.style.opacity = displayCssOpacity.value;
+ elementToCheck.style.visibility = displayCssVisibility.value;
+
+ // 既定および各オプションでは、要素に対して checkVisibility() を呼び出す
+ const defaultVisibilityCheck = elementToCheck.checkVisibility();
+ const opacityVisibilityCheck = elementToCheck.checkVisibility({
+ opacityProperty: true,
+ });
+ const cssVisibilityCheck = elementToCheck.checkVisibility({
+ visibilityProperty: true,
+ });
+ const contentVisibilityAutoCheck = elementToCheck.checkVisibility({
+ contentVisibilityAuto: true,
+ });
+
+ // テスト結果の出力
+ outputResult.innerText = `下記の要素の検査結果（非表示になる可能性あり）:
+- checkVisibility() の結果: ${defaultVisibilityCheck}
+- checkVisibility({opacityProperty: true}) の結果: ${opacityVisibilityCheck}
+- checkVisibility({visibilityProperty: true}) の結果: ${cssVisibilityCheck}
+- checkVisibility({contentVisibilityAuto: true}) の結果: ${contentVisibilityAutoCheck}`;
+}
+```
+
+#### 結果
+
+結果は下記に示す通りです。
+選択範囲を変更すると、その結果が（青い輪郭線の）検査要素に適用され、それぞれの設定に対する `checkVisibility()` の結果が表示されます。
+例えば、`opacity: 0` を設定した場合、その検査（のみ）は `false` を示すはずです。
+しかし、`display: none` と設定した場合は、すべての検査で `false` を返すはずです。
+
+{{ EmbedLiveSample('Test checkVisibility() with varied CSS', "100%", "200" ) }}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/element/currentcsszoom/index.md b/files/ja/web/api/element/currentcsszoom/index.md
new file mode 100644
index 00000000000000..723e61be577133
--- /dev/null
+++ b/files/ja/web/api/element/currentcsszoom/index.md
@@ -0,0 +1,112 @@
+---
+title: "Element: currentCSSZoom プロパティ"
+short-title: currentCSSZoom
+slug: Web/API/Element/currentCSSZoom
+l10n:
+ sourceCommit: e29bc9fed720cb4f8e58c1edf4365cdd61160b16
+---
+
+{{APIRef("DOM")}}{{SeeCompatTable}}
+
+**`currentCSSZoom`** は {{domxref("Element")}} インターフェイスの読み取り専用プロパティで、要素とそのすべての親要素に適用されている変倍率を考慮した、要素の「実効的な」[CSS `zoom`](/ja/docs/Web/CSS/zoom) を提供します。
+
+値は、要素とそのすべての親の `zoom` の値を掛け合わせることによって計算されます。
+例えば、zoom の値が 2、1.5、3 の 3 つの要素が入れ子関係にある場合、最も深く入れ子になっている要素の `currentCSSZoom` の値は 9 になります。
+例えば `display: none` が設定されているなど、要素が CSS ボックスを持っていない場合、`currentCSSZoom` は 1 に設定されます。
+
+なお、{{domxref("Element.getBoundingClientRect()")}} のような一部のメソッドは、ビューポートに相対する寸法と位置を返すので、CSS の `zoom` の影響を受けます。
+他のプロパティやメソッドは要素自身からの相対値を返しますので、zoom の影響を受けません。
+これには、例えば `client*` プロパティ（{{domxref("Element.clientHeight")}} など）、 `scroll*()` メソッド（{{domxref("Element.scroll()")}} など）、`offset*` プロパティ（{{domxref("HTMLElement.offsetHeight")}} など）が含まれます。
+`currentCSSZoom` プロパティを使用してこれらの値を変倍することで、zoom の効果を調整することができます。
+
+## 値
+
+要素の実効的な CSS の変倍を示す数値です。要素が描画されない場合は 1 です。
+
+## 例
+
+この例は、 `currentCSSZoom` がどのように計算されるかを示しています。
+
+最初に `` 要素の入れ子構造を定義します。"parent" は変倍されておらず、その内側にある要素 "child1" は `zoom: 2` が適用されており、さらに内側にある要素 "child2" には `zoom: 3` が適用されています。
+"child2" 要素は中に 2 つの要素を持ち、そのうちの 1 つは描画されず、どちらにも zoom プロパティがありません。
+
+```html
+
+ parent
+
+ child1 (zoom: 2)
+
+ child2 (zoom: 3)
+
child3_rendered
+
+ child3_notrendered
+
+
+
+
+```
+
+```html hidden
+
+```
+
+```css hidden
+#log {
+ height: 95px;
+ overflow: scroll;
+ margin: 10px;
+ border: 1px solid black;
+}
+```
+
+```js hidden
+const logElement = document.querySelector("#log");
+function log(text) {
+ logElement.innerText = `${logElement.innerText}${text}\n`;
+ logElement.scrollTop = logElement.scrollHeight;
+}
+```
+
+JavaScript コードでは、各レベルで適用された変倍率を `currentCSSZoom` 値とともにログ出力します。
+
+```js
+if ("currentCSSZoom" in Element.prototype) {
+ const parent = document.querySelector("#parent");
+ log(`parent (unzoomed). currentCSSZoom: ${parent.currentCSSZoom}`);
+ const child1 = document.querySelector("#child1");
+ log(`child1 (zoom: 2). currentCSSZoom: ${child1.currentCSSZoom}`);
+ const child2 = document.querySelector("#child2");
+ log(`child2 (zoom: 2). currentCSSZoom: ${child2.currentCSSZoom}`);
+ const top_child3_rendered = document.querySelector("#child3_rendered");
+ log(
+ `child3_rendered (unzoomed). currentCSSZoom: ${child3_rendered.currentCSSZoom}`,
+ );
+ const top_child3_notrendered = document.querySelector("#child3_notrendered");
+ log(
+ `child3_notrendered (not rendered): ${child3_notrendered.currentCSSZoom}`,
+ );
+} else {
+ log("このブラウザーは Element.currentCSSZoom に対応していません。");
+}
+```
+
+描画された `
` 構造とログ出力は下記の通りです。
+最初に、parent、child1、child2 はそれぞれ拡大率 1、2、3 となっており、親テキストのそれぞれ 1、2、6 倍で描画されます。
+これはログ出力される `currentCSSZoom` 値に反映されます。
+
+ID `child3_rendered` の `
` には `zoom` は設定されていませんが、ログ出力した `currentCSSZoom` の値 6 を継承しています。
+最後の `
` は描画されていないため、`currentCSSZoom` の値は 1 です。
+
+{{EmbedLiveSample('Examples', '100%', "400px")}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS `zoom`](/ja/docs/Web/CSS/zoom)
diff --git a/files/ja/web/api/element/getattributenames/index.md b/files/ja/web/api/element/getattributenames/index.md
index 8a43aab0c702b0..89a8e00546025f 100644
--- a/files/ja/web/api/element/getattributenames/index.md
+++ b/files/ja/web/api/element/getattributenames/index.md
@@ -3,14 +3,14 @@ title: "Element: getAttributeNames() メソッド"
short-title: getAttributeNames()
slug: Web/API/Element/getAttributeNames
l10n:
- sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+ sourceCommit: d93e5a0bca36d745734e46c0cd55f40cda28e221
---
{{APIRef("DOM")}}
-**`getAttributeNames()`** は {{domxref("Element")}} インターフェースのメソッドで、この要素の属性名を文字列の {{jsxref("Array")}} で返します。要素に属性がない場合は、空の配列を返します。
+**`getAttributeNames()`** は {{domxref("Element")}} インターフェイスのメソッドで、この要素の属性名を文字列の {{jsxref("Array")}} で返します。要素に属性がない場合は、空の配列を返します。
-`getAttributeNames()` を {{domxref("Element.getAttribute","getAttribute()")}} と共に使用すると、 {{domxref("Element.attributes")}} にアクセスするよりメモリ効率やパフォーマンスが良くなります。
+`getAttributeNames()` を {{domxref("Element.getAttribute","getAttribute()")}} と共に使用すると、 {{domxref("Element.attributes")}} にアクセスするよりメモリー効率やパフォーマンスが良くなります。
**`getAttributeNames()`** から返される名前は*修飾*属性名です。すなわち、名前空間接頭辞がついた属性であり、名前空間接頭辞（実際の名前空間では*ない*）にコロンが続き、属性名が続きます（例えば **`xlink:href`**）。名前空間接頭辞のない属性は、そのままの名前になります（例えば **`href`**）。
@@ -26,7 +26,7 @@ getAttributeNames()
### 返値
-なし ({{jsxref("undefined")}})。
+文字列の配列 ({{jsxref("Array")}}) です。
## 例
diff --git a/files/ja/web/api/element/gethtml/index.md b/files/ja/web/api/element/gethtml/index.md
new file mode 100644
index 00000000000000..caaf26dc51a9f5
--- /dev/null
+++ b/files/ja/web/api/element/gethtml/index.md
@@ -0,0 +1,59 @@
+---
+title: "Element: getHTML() メソッド"
+short-title: getHTML()
+slug: Web/API/Element/getHTML
+l10n:
+ sourceCommit: 4558d208395a5b1df4db44b0c8ef4e9a0f8adbbf
+---
+
+{{APIRef("DOM")}}
+
+**`getHTML()`** は {{domxref("Element")}} インターフェイスのメソッドで、要素の DOM を HTML 文字列にシリアライズするために使用します。
+
+このメソッドは、シャドウルートに含まれる子ノードのシリアライズを有効にするオプション引数を提供します。
+このオプションによって、{{domxref("ShadowRoot/serializable","serializable")}} として設定されている入れ子のシャドウルートや、{{domxref("ShadowRoot")}} オブジェクトの指定された配列を含めることができます。
+
+引数がない場合、シャドウルートである子ノードはシリアライズされず、このメソッドは {{domxref("Element.innerHTML")}} の値を読み取るのと同じ方法で動作します。
+
+## 構文
+
+```js-nolint
+getHTML(options)
+```
+
+### 引数
+
+- `options` {{optional_inline}}
+
+ - : 以下のオプション引数を持つオプションオブジェクトです。
+
+ - `serializableShadowRoots`
+ - : 論理値で、{{domxref("ShadowRoot/serializable","serializable")}} なシャドウルートを含めるかどうかを指定します。
+ 既定値は `false` です。
+ - `shadowRoots`
+ - : シリアライズする {{domxref("ShadowRoot")}} オブジェクトの配列。
+ これらは `serializable` としてマークされているかどうかや、開いているか閉じられているかに関係なく含まれます。
+ 既定値は空の配列です。
+
+### 返値
+
+要素の HTML シリアライズを表す文字列です。
+
+### 例外
+
+なし。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("ShadowRoot.getHTML()")}}
+- {{domxref("Element.innerHTML")}}
+- {{domxref("Element.setHTMLUnsafe()")}}
+- {{domxref("ShadowRoot.setHTMLUnsafe()")}}
diff --git a/files/ja/web/api/element/gotpointercapture_event/index.md b/files/ja/web/api/element/gotpointercapture_event/index.md
index 20cda2ad2d8812..4a8a7c877bbff1 100644
--- a/files/ja/web/api/element/gotpointercapture_event/index.md
+++ b/files/ja/web/api/element/gotpointercapture_event/index.md
@@ -3,7 +3,7 @@ title: "Element: gotpointercapture イベント"
short-title: gotpointercapture
slug: Web/API/Element/gotpointercapture_event
l10n:
- sourceCommit: 7b3ccaec4a93584da12939587ea746acaabe30bc
+ sourceCommit: 6636dfb792a72346c68e44c9d042e3c2219e522b
---
{{APIRef}}
@@ -30,25 +30,29 @@ ongotpointercapture = (event) => {};
_このインターフェイスは {{domxref("MouseEvent")}} および {{domxref("Event")}} からプロパティを継承しています。_
-- {{ domxref('PointerEvent.pointerId')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.altitudeAngle')}} {{ReadOnlyInline}} {{experimental_inline}}
+ - : トランスデューサー（ポインターまたはスタイラス）の軸と端末画面の X-Y 平面との間の角度を表します。
+- {{domxref('PointerEvent.azimuthAngle')}} {{ReadOnlyInline}} {{experimental_inline}}
+ - : Y-Z 平面と、トランスデューサー（ポインターまたはスタイラス）の軸と Y 軸の両方を格納する平面との間の角度を表します。
+- {{domxref('PointerEvent.pointerId')}} {{ReadOnlyInline}}
- : イベントを発生させたポインターの固有の識別子です。
-- {{ domxref('PointerEvent.width')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.width')}} {{ReadOnlyInline}}
- : ポインターが接触するジオメトリーの幅（X 軸の大きさ、CSS ピクセル単位）。
-- {{ domxref('PointerEvent.height')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.height')}} {{ReadOnlyInline}}
- : ポインターが接触するジオメトリーの高さ（Y 軸の大きさ、CSS ピクセル単位）。
-- {{ domxref('PointerEvent.pressure')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.pressure')}} {{ReadOnlyInline}}
- : ポインター入力の正規化された圧力で、範囲は `0` から `1` です。ここで `0` と `1` は、それぞれハードウェアが検出可能な最小圧力と最大圧力を表します。
-- {{ domxref('PointerEvent.tangentialPressure')}} {{ReadOnlyInline}}
- - : ポインタ入力の正規化された接線圧力（バレル圧力またはシリンダー応力（[cylinder stress](https://en.wikipedia.org/wiki/Cylinder_stress)）とも呼ばれます）で、 `-1` から `1` の範囲であり、 `0` はコントロールの中立位置です。
-- {{ domxref('PointerEvent.tiltX')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.tangentialPressure')}} {{ReadOnlyInline}}
+ - : ポインター入力の正規化された接線圧力（バレル圧力またはシリンダー応力（[cylinder stress](https://en.wikipedia.org/wiki/Cylinder_stress)）とも呼ばれます）で、 `-1` から `1` の範囲であり、 `0` はコントロールの中立位置です。
+- {{domxref('PointerEvent.tiltX')}} {{ReadOnlyInline}}
- : Y-Z 平面と、ポインター（ペンスタイラスなど）の軸と Y 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。
-- {{ domxref('PointerEvent.tiltY')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.tiltY')}} {{ReadOnlyInline}}
- : X-Z 平面と、ポインター（ペンスタイラスなど）の軸と X 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。
-- {{ domxref('PointerEvent.twist')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.twist')}} {{ReadOnlyInline}}
- : ポインター（ペンスタイラスなど）の長軸を中心とした時計回りの回転の度数（`0` から `359` の範囲の値）。
-- {{ domxref('PointerEvent.pointerType')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.pointerType')}} {{ReadOnlyInline}}
- : イベントの原因となった機器の種類（マウス、ペン、タッチなど）を示します。
-- {{ domxref('PointerEvent.isPrimary')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.isPrimary')}} {{ReadOnlyInline}}
- : このポインターがこのポインター種別の主ポインターを表すかどうかを示します。
## 例
@@ -93,12 +97,14 @@ para.addEventListener("pointerdown", (event) => {
- 関連イベント
- - [`lostpointercapture`](/ja/docs/Web/API/Element/lostpointercapture_event)
- - [`pointerover`](/ja/docs/Web/API/Element/pointerover_event)
- - [`pointerenter`](/ja/docs/Web/API/Element/pointerenter_event)
- - [`pointerdown`](/ja/docs/Web/API/Element/pointerdown_event)
- - [`pointermove`](/ja/docs/Web/API/Element/pointermove_event)
- - [`pointerup`](/ja/docs/Web/API/Element/pointerup_event)
- - [`pointercancel`](/ja/docs/Web/API/Element/pointercancel_event)
- - [`pointerout`](/ja/docs/Web/API/Element/pointerout_event)
- - [`pointerleave`](/ja/docs/Web/API/Element/pointerleave_event)
+ - {{domxref('Element/gotpointercapture_event', 'gotpointercapture')}}
+ - {{domxref('Element/lostpointercapture_event', 'lostpointercapture')}}
+ - {{domxref('Element/pointerover_event', 'pointerover')}}
+ - {{domxref('Element/pointerenter_event', 'pointerenter')}}
+ - {{domxref('Element/pointerdown_event', 'pointerdown')}}
+ - {{domxref('Element/pointermove_event', 'pointermove')}}
+ - {{domxref('Element/pointerup_event', 'pointerup')}}
+ - {{domxref('Element/pointercancel_event', 'pointercancel')}}
+ - {{domxref('Element/pointerout_event', 'pointerout')}}
+ - {{domxref('Element/pointerleave_event', 'pointerleave')}}
+ - {{domxref('Element/pointerrawupdate_event', 'pointerrawupdate')}}
diff --git a/files/ja/web/api/element/haspointercapture/index.md b/files/ja/web/api/element/haspointercapture/index.md
index 9813dbc147b70e..9b89a46f1417b4 100644
--- a/files/ja/web/api/element/haspointercapture/index.md
+++ b/files/ja/web/api/element/haspointercapture/index.md
@@ -3,12 +3,12 @@ title: "Element: hasPointerCapture() メソッド"
short-title: hasPointerCapture()
slug: Web/API/Element/hasPointerCapture
l10n:
- sourceCommit: bbf7f25f9cf95fb154e2740a9fdc9c02818981bf
+ sourceCommit: f70edbb6584d2df5ad4842ecf2170b3cbddc6cf6
---
{{APIRef("DOM")}}
-**`hasPointerCapture()`** は {{domxref("Element")}} インターフェイスのメソッドで、それを呼び出した要素が、指定されたポインター ID によって識別されるポインターに対するポインターキャプチャを持つかどうかを示します。
+**`hasPointerCapture()`** は {{domxref("Element")}} インターフェイスのメソッドで、それを呼び出した要素が、指定されたポインター ID によって識別されるポインターに対する[ポインターキャプチャ](/ja/docs/Web/API/Pointer_events#ポインターキャプチャ)を持つかどうかを示します。
## 構文
@@ -23,7 +23,7 @@ hasPointerCapture(pointerId)
### 返値
-論理値です。要素がポインターキャプチャを持っている場合は `true`、持っていない場合は `false` です。
+論理値です。 指定されたポインター ID で識別されるポインターのポインターキャプチャが要素にある場合は `true`、ない場合は `false` を返します。
## 例
@@ -37,12 +37,12 @@ hasPointerCapture(pointerId)
// …
- // 要素にまだポインタキャプチャがあるかどうかを確認します
+ // 要素にまだポインターキャプチャがあるかどうかを確認します
let pointerCap = el.hasPointerCapture(ev.pointerId);
if (pointerCap) {
- // まだポインタキャプチャがあります
+ // まだポインターキャプチャがあります
} else {
- // おっと、ポインタキャプチャを失いました！
+ // おっと、ポインターキャプチャを失いました！
}
}
@@ -52,7 +52,7 @@ hasPointerCapture(pointerId)
}
-
この要素をポインタでタッチします。
+
この要素をポインターでタッチします。
```
@@ -69,4 +69,4 @@ hasPointerCapture(pointerId)
- {{ domxref("Element.setPointerCapture()")}}
- {{ domxref("Element.releasePointerCapture()")}}
-- {{ domxref("Pointer_events","Pointer Events") }}
+- {{ domxref("Pointer_events","ポインターイベント", "", 1) }}
diff --git a/files/ja/web/api/element/lostpointercapture_event/index.md b/files/ja/web/api/element/lostpointercapture_event/index.md
index 85e127f0044c88..95c14ef4650288 100644
--- a/files/ja/web/api/element/lostpointercapture_event/index.md
+++ b/files/ja/web/api/element/lostpointercapture_event/index.md
@@ -3,7 +3,7 @@ title: "Element: lostpointercapture イベント"
short-title: lostpointercapture
slug: Web/API/Element/lostpointercapture_event
l10n:
- sourceCommit: 7b3ccaec4a93584da12939587ea746acaabe30bc
+ sourceCommit: 6636dfb792a72346c68e44c9d042e3c2219e522b
---
{{APIRef}}
@@ -30,25 +30,29 @@ onlostpointercapture = (event) => {};
_このインターフェイスは {{domxref("MouseEvent")}} および {{domxref("Event")}} からプロパティを継承しています。_
-- {{ domxref('PointerEvent.pointerId')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.altitudeAngle')}} {{ReadOnlyInline}} {{experimental_inline}}
+ - : トランスデューサー（ポインターまたはスタイラス）の軸と端末画面の X-Y 平面との間の角度を表します。
+- {{domxref('PointerEvent.azimuthAngle')}} {{ReadOnlyInline}} {{experimental_inline}}
+ - : Y-Z 平面と、トランスデューサー（ポインターまたはスタイラス）の軸と Y 軸の両方を格納する平面との間の角度を表します。
+- {{domxref('PointerEvent.pointerId')}} {{ReadOnlyInline}}
- : イベントを発生させたポインターの固有の識別子です。
-- {{ domxref('PointerEvent.width')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.width')}} {{ReadOnlyInline}}
- : ポインターが接触するジオメトリーの幅（X 軸の大きさ、CSS ピクセル単位）。
-- {{ domxref('PointerEvent.height')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.height')}} {{ReadOnlyInline}}
- : ポインターが接触するジオメトリーの高さ（Y 軸の大きさ、CSS ピクセル単位）。
-- {{ domxref('PointerEvent.pressure')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.pressure')}} {{ReadOnlyInline}}
- : ポインター入力の正規化された圧力で、範囲は `0` から `1` です。ここで `0` と `1` は、それぞれハードウェアが検出可能な最小圧力と最大圧力を表します。
-- {{ domxref('PointerEvent.tangentialPressure')}} {{ReadOnlyInline}}
- - : ポインタ入力の正規化された接線圧力（バレル圧力またはシリンダー応力（[cylinder stress](https://en.wikipedia.org/wiki/Cylinder_stress)）とも呼ばれます）で、 `-1` から `1` の範囲であり、 `0` はコントロールの中立位置です。
-- {{ domxref('PointerEvent.tiltX')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.tangentialPressure')}} {{ReadOnlyInline}}
+ - : ポインター入力の正規化された接線圧力（バレル圧力またはシリンダー応力（[cylinder stress](https://en.wikipedia.org/wiki/Cylinder_stress)）とも呼ばれます）で、 `-1` から `1` の範囲であり、 `0` はコントロールの中立位置です。
+- {{domxref('PointerEvent.tiltX')}} {{ReadOnlyInline}}
- : Y-Z 平面と、ポインター（ペンスタイラスなど）の軸と Y 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。
-- {{ domxref('PointerEvent.tiltY')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.tiltY')}} {{ReadOnlyInline}}
- : X-Z 平面と、ポインター（ペンスタイラスなど）の軸と X 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。
-- {{ domxref('PointerEvent.twist')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.twist')}} {{ReadOnlyInline}}
- : ポインター（ペンスタイラスなど）の長軸を中心とした時計回りの回転の度数（`0` から `359` の範囲の値）。
-- {{ domxref('PointerEvent.pointerType')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.pointerType')}} {{ReadOnlyInline}}
- : イベントの原因となった機器の種類（マウス、ペン、タッチなど）を示します。
-- {{ domxref('PointerEvent.isPrimary')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.isPrimary')}} {{ReadOnlyInline}}
- : このポインターがこのポインター種別の主ポインターを表すかどうかを示します。
## 例
@@ -93,12 +97,14 @@ para.addEventListener("pointerdown", (event) => {
- 関連イベント
- - [`gotpointercapture`](/ja/docs/Web/API/Element/gotpointercapture_event)
- - [`pointerover`](/ja/docs/Web/API/Element/pointerover_event)
- - [`pointerenter`](/ja/docs/Web/API/Element/pointerenter_event)
- - [`pointerdown`](/ja/docs/Web/API/Element/pointerdown_event)
- - [`pointermove`](/ja/docs/Web/API/Element/pointermove_event)
- - [`pointerup`](/ja/docs/Web/API/Element/pointerup_event)
- - [`pointercancel`](/ja/docs/Web/API/Element/pointercancel_event)
- - [`pointerout`](/ja/docs/Web/API/Element/pointerout_event)
- - [`pointerleave`](/ja/docs/Web/API/Element/pointerleave_event)
+ - {{domxref('Element/gotpointercapture_event', 'gotpointercapture')}}
+ - {{domxref('Element/lostpointercapture_event', 'lostpointercapture')}}
+ - {{domxref('Element/pointerover_event', 'pointerover')}}
+ - {{domxref('Element/pointerenter_event', 'pointerenter')}}
+ - {{domxref('Element/pointerdown_event', 'pointerdown')}}
+ - {{domxref('Element/pointermove_event', 'pointermove')}}
+ - {{domxref('Element/pointerup_event', 'pointerup')}}
+ - {{domxref('Element/pointercancel_event', 'pointercancel')}}
+ - {{domxref('Element/pointerout_event', 'pointerout')}}
+ - {{domxref('Element/pointerleave_event', 'pointerleave')}}
+ - {{domxref('Element/pointerrawupdate_event', 'pointerrawupdate')}}
diff --git a/files/ja/web/api/element/pointercancel_event/index.md b/files/ja/web/api/element/pointercancel_event/index.md
index 661e3d7817d402..95927c9e2d5f6c 100644
--- a/files/ja/web/api/element/pointercancel_event/index.md
+++ b/files/ja/web/api/element/pointercancel_event/index.md
@@ -3,7 +3,7 @@ title: "Element: pointercancel イベント"
short-title: pointercancel
slug: Web/API/Element/pointercancel_event
l10n:
- sourceCommit: 9fb6c9e56c6db295967384730feeb941509ac743
+ sourceCommit: 6636dfb792a72346c68e44c9d042e3c2219e522b
---
{{APIRef}}
@@ -16,6 +16,7 @@ l10n:
- ポインターが活動中に端末の画面の向きが変化した場合。
- ユーザーが突然、ポインターの入力を始めたとブラウザーが判断した場合。これが発生するのは、例えば、スタイラスを使用中に画面上で手が反応するのを防ぐために掌を除外して予期せずイベントを起動することを防ぐことに、ハードウェアが対応している場合などです。
- CSS の {{cssxref("touch-action")}} プロパティが、入力の継続を防止している場合。
+- ユーザーが同時に多くのポインターを操作すると、ブラウザーは既存のすべてのポインターに対してこのイベントを発生させる可能性があります（ユーザーがまだ画面に触れている場合でも）。
> **メモ:** `pointercancel` イベントの発生後、ブラウザーは {{domxref("Element/pointerout_event", "pointerout")}} イベントと、続いて {{domxref("Element/pointerleave_event", "pointerleave")}} イベントを送信します。
@@ -39,25 +40,29 @@ onpointercancel = (event) => {};
_このインターフェイスは {{domxref("MouseEvent")}} および {{domxref("Event")}} からプロパティを継承しています。_
-- {{ domxref('PointerEvent.pointerId')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.altitudeAngle')}} {{ReadOnlyInline}} {{experimental_inline}}
+ - : トランスデューサー（ポインターまたはスタイラス）の軸と端末画面の X-Y 平面との間の角度を表します。
+- {{domxref('PointerEvent.azimuthAngle')}} {{ReadOnlyInline}} {{experimental_inline}}
+ - : Y-Z 平面と、トランスデューサー（ポインターまたはスタイラス）の軸と Y 軸の両方を格納する平面との間の角度を表します。
+- {{domxref('PointerEvent.pointerId')}} {{ReadOnlyInline}}
- : イベントを発生させたポインターの固有の識別子です。
-- {{ domxref('PointerEvent.width')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.width')}} {{ReadOnlyInline}}
- : ポインターが接触するジオメトリーの幅（X 軸の大きさ、CSS ピクセル単位）。
-- {{ domxref('PointerEvent.height')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.height')}} {{ReadOnlyInline}}
- : ポインターが接触するジオメトリーの高さ（Y 軸の大きさ、CSS ピクセル単位）。
-- {{ domxref('PointerEvent.pressure')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.pressure')}} {{ReadOnlyInline}}
- : ポインター入力の正規化された圧力で、範囲は `0` から `1` です。ここで `0` と `1` は、それぞれハードウェアが検出可能な最小圧力と最大圧力を表します。
-- {{ domxref('PointerEvent.tangentialPressure')}} {{ReadOnlyInline}}
- - : ポインタ入力の正規化された接線圧力（バレル圧力またはシリンダー応力（[cylinder stress](https://en.wikipedia.org/wiki/Cylinder_stress)）とも呼ばれます）で、 `-1` から `1` の範囲であり、 `0` はコントロールの中立位置です。
-- {{ domxref('PointerEvent.tiltX')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.tangentialPressure')}} {{ReadOnlyInline}}
+ - : ポインター入力の正規化された接線圧力（バレル圧力またはシリンダー応力（[cylinder stress](https://en.wikipedia.org/wiki/Cylinder_stress)）とも呼ばれます）で、 `-1` から `1` の範囲であり、 `0` はコントロールの中立位置です。
+- {{domxref('PointerEvent.tiltX')}} {{ReadOnlyInline}}
- : Y-Z 平面と、ポインター（ペンスタイラスなど）の軸と Y 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。
-- {{ domxref('PointerEvent.tiltY')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.tiltY')}} {{ReadOnlyInline}}
- : X-Z 平面と、ポインター（ペンスタイラスなど）の軸と X 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。
-- {{ domxref('PointerEvent.twist')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.twist')}} {{ReadOnlyInline}}
- : ポインター（ペンスタイラスなど）の長軸を中心とした時計回りの回転の度数（`0` から `359` の範囲の値）。
-- {{ domxref('PointerEvent.pointerType')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.pointerType')}} {{ReadOnlyInline}}
- : イベントの原因となった機器の種類（マウス、ペン、タッチなど）を示します。
-- {{ domxref('PointerEvent.isPrimary')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.isPrimary')}} {{ReadOnlyInline}}
- : このポインターがこのポインター種別の主ポインターを表すかどうかを示します。
## 例
@@ -94,12 +99,14 @@ para.onpointercancel = (event) => {
- 関連イベント
- - [`gotpointercapture`](/ja/docs/Web/API/Element/gotpointercapture_event)
- - [`lostpointercapture`](/ja/docs/Web/API/Element/lostpointercapture_event)
- - [`pointerover`](/ja/docs/Web/API/Element/pointerover_event)
- - [`pointerenter`](/ja/docs/Web/API/Element/pointerenter_event)
- - [`pointerdown`](/ja/docs/Web/API/Element/pointerdown_event)
- - [`pointermove`](/ja/docs/Web/API/Element/pointermove_event)
- - [`pointerup`](/ja/docs/Web/API/Element/pointerup_event)
- - [`pointerout`](/ja/docs/Web/API/Element/pointerout_event)
- - [`pointerleave`](/ja/docs/Web/API/Element/pointerleave_event)
+ - {{domxref('Element/gotpointercapture_event', 'gotpointercapture')}}
+ - {{domxref('Element/lostpointercapture_event', 'lostpointercapture')}}
+ - {{domxref('Element/pointerover_event', 'pointerover')}}
+ - {{domxref('Element/pointerenter_event', 'pointerenter')}}
+ - {{domxref('Element/pointerdown_event', 'pointerdown')}}
+ - {{domxref('Element/pointermove_event', 'pointermove')}}
+ - {{domxref('Element/pointerup_event', 'pointerup')}}
+ - {{domxref('Element/pointercancel_event', 'pointercancel')}}
+ - {{domxref('Element/pointerout_event', 'pointerout')}}
+ - {{domxref('Element/pointerleave_event', 'pointerleave')}}
+ - {{domxref('Element/pointerrawupdate_event', 'pointerrawupdate')}}
diff --git a/files/ja/web/api/element/pointerdown_event/index.md b/files/ja/web/api/element/pointerdown_event/index.md
index ba571664ded755..333dcd06e4262a 100644
--- a/files/ja/web/api/element/pointerdown_event/index.md
+++ b/files/ja/web/api/element/pointerdown_event/index.md
@@ -3,7 +3,7 @@ title: "Element: pointerdown イベント"
short-title: pointerdown
slug: Web/API/Element/pointerdown_event
l10n:
- sourceCommit: 7b3ccaec4a93584da12939587ea746acaabe30bc
+ sourceCommit: 6636dfb792a72346c68e44c9d042e3c2219e522b
---
{{APIRef}}
@@ -32,25 +32,29 @@ onpointerdown = (event) => {};
_このインターフェイスは {{domxref("MouseEvent")}} および {{domxref("Event")}} からプロパティを継承しています。_
-- {{ domxref('PointerEvent.pointerId')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.altitudeAngle')}} {{ReadOnlyInline}} {{experimental_inline}}
+ - : トランスデューサー（ポインターまたはスタイラス）の軸と端末画面の X-Y 平面との間の角度を表します。
+- {{domxref('PointerEvent.azimuthAngle')}} {{ReadOnlyInline}} {{experimental_inline}}
+ - : Y-Z 平面と、トランスデューサー（ポインターまたはスタイラス）の軸と Y 軸の両方を格納する平面との間の角度を表します。
+- {{domxref('PointerEvent.pointerId')}} {{ReadOnlyInline}}
- : イベントを発生させたポインターの固有の識別子です。
-- {{ domxref('PointerEvent.width')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.width')}} {{ReadOnlyInline}}
- : ポインターが接触するジオメトリーの幅（X 軸の大きさ、CSS ピクセル単位）。
-- {{ domxref('PointerEvent.height')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.height')}} {{ReadOnlyInline}}
- : ポインターが接触するジオメトリーの高さ（Y 軸の大きさ、CSS ピクセル単位）。
-- {{ domxref('PointerEvent.pressure')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.pressure')}} {{ReadOnlyInline}}
- : ポインター入力の正規化された圧力で、範囲は `0` から `1` です。ここで `0` と `1` は、それぞれハードウェアが検出可能な最小圧力と最大圧力を表します。
-- {{ domxref('PointerEvent.tangentialPressure')}} {{ReadOnlyInline}}
- - : ポインタ入力の正規化された接線圧力（バレル圧力またはシリンダー応力（[cylinder stress](https://en.wikipedia.org/wiki/Cylinder_stress)）とも呼ばれます）で、 `-1` から `1` の範囲であり、 `0` はコントロールの中立位置です。
-- {{ domxref('PointerEvent.tiltX')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.tangentialPressure')}} {{ReadOnlyInline}}
+ - : ポインター入力の正規化された接線圧力（バレル圧力またはシリンダー応力（[cylinder stress](https://en.wikipedia.org/wiki/Cylinder_stress)）とも呼ばれます）で、 `-1` から `1` の範囲であり、 `0` はコントロールの中立位置です。
+- {{domxref('PointerEvent.tiltX')}} {{ReadOnlyInline}}
- : Y-Z 平面と、ポインター（ペンスタイラスなど）の軸と Y 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。
-- {{ domxref('PointerEvent.tiltY')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.tiltY')}} {{ReadOnlyInline}}
- : X-Z 平面と、ポインター（ペンスタイラスなど）の軸と X 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。
-- {{ domxref('PointerEvent.twist')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.twist')}} {{ReadOnlyInline}}
- : ポインター（ペンスタイラスなど）の長軸を中心とした時計回りの回転の度数（`0` から `359` の範囲の値）。
-- {{ domxref('PointerEvent.pointerType')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.pointerType')}} {{ReadOnlyInline}}
- : イベントの原因となった機器の種類（マウス、ペン、タッチなど）を示します。
-- {{ domxref('PointerEvent.isPrimary')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.isPrimary')}} {{ReadOnlyInline}}
- : このポインターがこのポインター種別の主ポインターを表すかどうかを示します。
## 例
@@ -87,12 +91,14 @@ para.onpointerdown = (event) => {
- 関連イベント
- - [`gotpointercapture`](/ja/docs/Web/API/Element/gotpointercapture_event)
- - [`lostpointercapture`](/ja/docs/Web/API/Element/lostpointercapture_event)
- - [`pointerover`](/ja/docs/Web/API/Element/pointerover_event)
- - [`pointerenter`](/ja/docs/Web/API/Element/pointerenter_event)
- - [`pointermove`](/ja/docs/Web/API/Element/pointermove_event)
- - [`pointercancel`](/ja/docs/Web/API/Element/pointercancel_event)
- - [`pointerup`](/ja/docs/Web/API/Element/pointerup_event)
- - [`pointerout`](/ja/docs/Web/API/Element/pointerout_event)
- - [`pointerleave`](/ja/docs/Web/API/Element/pointerleave_event)
+ - {{domxref('Element/gotpointercapture_event', 'gotpointercapture')}}
+ - {{domxref('Element/lostpointercapture_event', 'lostpointercapture')}}
+ - {{domxref('Element/pointerover_event', 'pointerover')}}
+ - {{domxref('Element/pointerenter_event', 'pointerenter')}}
+ - {{domxref('Element/pointerdown_event', 'pointerdown')}}
+ - {{domxref('Element/pointermove_event', 'pointermove')}}
+ - {{domxref('Element/pointerup_event', 'pointerup')}}
+ - {{domxref('Element/pointercancel_event', 'pointercancel')}}
+ - {{domxref('Element/pointerout_event', 'pointerout')}}
+ - {{domxref('Element/pointerleave_event', 'pointerleave')}}
+ - {{domxref('Element/pointerrawupdate_event', 'pointerrawupdate')}}
diff --git a/files/ja/web/api/element/pointerenter_event/index.md b/files/ja/web/api/element/pointerenter_event/index.md
index 6f1466bb70c17b..34e96aeeab98f7 100644
--- a/files/ja/web/api/element/pointerenter_event/index.md
+++ b/files/ja/web/api/element/pointerenter_event/index.md
@@ -3,7 +3,7 @@ title: "Element: pointerenter イベント"
short-title: pointerenter
slug: Web/API/Element/pointerenter_event
l10n:
- sourceCommit: 7b3ccaec4a93584da12939587ea746acaabe30bc
+ sourceCommit: 6636dfb792a72346c68e44c9d042e3c2219e522b
---
{{APIRef}}
@@ -30,25 +30,29 @@ onpointerenter = (event) => {};
_このインターフェイスは {{domxref("MouseEvent")}} および {{domxref("Event")}} からプロパティを継承しています。_
-- {{ domxref('PointerEvent.pointerId')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.altitudeAngle')}} {{ReadOnlyInline}} {{experimental_inline}}
+ - : トランスデューサー（ポインターまたはスタイラス）の軸と端末画面の X-Y 平面との間の角度を表します。
+- {{domxref('PointerEvent.azimuthAngle')}} {{ReadOnlyInline}} {{experimental_inline}}
+ - : Y-Z 平面と、トランスデューサー（ポインターまたはスタイラス）の軸と Y 軸の両方を格納する平面との間の角度を表します。
+- {{domxref('PointerEvent.pointerId')}} {{ReadOnlyInline}}
- : イベントを発生させたポインターの固有の識別子です。
-- {{ domxref('PointerEvent.width')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.width')}} {{ReadOnlyInline}}
- : ポインターが接触するジオメトリーの幅（X 軸の大きさ、CSS ピクセル単位）。
-- {{ domxref('PointerEvent.height')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.height')}} {{ReadOnlyInline}}
- : ポインターが接触するジオメトリーの高さ（Y 軸の大きさ、CSS ピクセル単位）。
-- {{ domxref('PointerEvent.pressure')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.pressure')}} {{ReadOnlyInline}}
- : ポインター入力の正規化された圧力で、範囲は `0` から `1` です。ここで `0` と `1` は、それぞれハードウェアが検出可能な最小圧力と最大圧力を表します。
-- {{ domxref('PointerEvent.tangentialPressure')}} {{ReadOnlyInline}}
- - : ポインタ入力の正規化された接線圧力（バレル圧力またはシリンダー応力（[cylinder stress](https://en.wikipedia.org/wiki/Cylinder_stress)）とも呼ばれます）で、 `-1` から `1` の範囲であり、 `0` はコントロールの中立位置です。
-- {{ domxref('PointerEvent.tiltX')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.tangentialPressure')}} {{ReadOnlyInline}}
+ - : ポインター入力の正規化された接線圧力（バレル圧力またはシリンダー応力（[cylinder stress](https://en.wikipedia.org/wiki/Cylinder_stress)）とも呼ばれます）で、 `-1` から `1` の範囲であり、 `0` はコントロールの中立位置です。
+- {{domxref('PointerEvent.tiltX')}} {{ReadOnlyInline}}
- : Y-Z 平面と、ポインター（ペンスタイラスなど）の軸と Y 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。
-- {{ domxref('PointerEvent.tiltY')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.tiltY')}} {{ReadOnlyInline}}
- : X-Z 平面と、ポインター（ペンスタイラスなど）の軸と X 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。
-- {{ domxref('PointerEvent.twist')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.twist')}} {{ReadOnlyInline}}
- : ポインター（ペンスタイラスなど）の長軸を中心とした時計回りの回転の度数（`0` から `359` の範囲の値）。
-- {{ domxref('PointerEvent.pointerType')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.pointerType')}} {{ReadOnlyInline}}
- : イベントの原因となった機器の種類（マウス、ペン、タッチなど）を示します。
-- {{ domxref('PointerEvent.isPrimary')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.isPrimary')}} {{ReadOnlyInline}}
- : このポインターがこのポインター種別の主ポインターを表すかどうかを示します。
## 例
@@ -85,12 +89,14 @@ para.onpointerenter = (event) => {
- 関連イベント
- - [`gotpointercapture`](/ja/docs/Web/API/Element/gotpointercapture_event)
- - [`lostpointercapture`](/ja/docs/Web/API/Element/lostpointercapture_event)
- - [`pointerover`](/ja/docs/Web/API/Element/pointerover_event)
- - [`pointerdown`](/ja/docs/Web/API/Element/pointerdown_event)
- - [`pointermove`](/ja/docs/Web/API/Element/pointermove_event)
- - [`pointerup`](/ja/docs/Web/API/Element/pointerup_event)
- - [`pointercancel`](/ja/docs/Web/API/Element/pointercancel_event)
- - [`pointerout`](/ja/docs/Web/API/Element/pointerout_event)
- - [`pointerleave`](/ja/docs/Web/API/Element/pointerleave_event)
+ - {{domxref('Element/gotpointercapture_event', 'gotpointercapture')}}
+ - {{domxref('Element/lostpointercapture_event', 'lostpointercapture')}}
+ - {{domxref('Element/pointerover_event', 'pointerover')}}
+ - {{domxref('Element/pointerenter_event', 'pointerenter')}}
+ - {{domxref('Element/pointerdown_event', 'pointerdown')}}
+ - {{domxref('Element/pointermove_event', 'pointermove')}}
+ - {{domxref('Element/pointerup_event', 'pointerup')}}
+ - {{domxref('Element/pointercancel_event', 'pointercancel')}}
+ - {{domxref('Element/pointerout_event', 'pointerout')}}
+ - {{domxref('Element/pointerleave_event', 'pointerleave')}}
+ - {{domxref('Element/pointerrawupdate_event', 'pointerrawupdate')}}
diff --git a/files/ja/web/api/element/pointerleave_event/index.md b/files/ja/web/api/element/pointerleave_event/index.md
index d9bd89693b7659..ecf32b35f5d731 100644
--- a/files/ja/web/api/element/pointerleave_event/index.md
+++ b/files/ja/web/api/element/pointerleave_event/index.md
@@ -3,7 +3,7 @@ title: "Element: pointerleave イベント"
short-title: pointerleave
slug: Web/API/Element/pointerleave_event
l10n:
- sourceCommit: 7b3ccaec4a93584da12939587ea746acaabe30bc
+ sourceCommit: 6636dfb792a72346c68e44c9d042e3c2219e522b
---
{{APIRef}}
@@ -30,25 +30,29 @@ onpointerleave = (event) => {};
_このインターフェイスは {{domxref("MouseEvent")}} および {{domxref("Event")}} からプロパティを継承しています。_
-- {{ domxref('PointerEvent.pointerId')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.altitudeAngle')}} {{ReadOnlyInline}} {{experimental_inline}}
+ - : トランスデューサー（ポインターまたはスタイラス）の軸と端末画面の X-Y 平面との間の角度を表します。
+- {{domxref('PointerEvent.azimuthAngle')}} {{ReadOnlyInline}} {{experimental_inline}}
+ - : Y-Z 平面と、トランスデューサー（ポインターまたはスタイラス）の軸と Y 軸の両方を格納する平面との間の角度を表します。
+- {{domxref('PointerEvent.pointerId')}} {{ReadOnlyInline}}
- : イベントを発生させたポインターの固有の識別子です。
-- {{ domxref('PointerEvent.width')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.width')}} {{ReadOnlyInline}}
- : ポインターが接触するジオメトリーの幅（X 軸の大きさ、CSS ピクセル単位）。
-- {{ domxref('PointerEvent.height')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.height')}} {{ReadOnlyInline}}
- : ポインターが接触するジオメトリーの高さ（Y 軸の大きさ、CSS ピクセル単位）。
-- {{ domxref('PointerEvent.pressure')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.pressure')}} {{ReadOnlyInline}}
- : ポインター入力の正規化された圧力で、範囲は `0` から `1` です。ここで `0` と `1` は、それぞれハードウェアが検出可能な最小圧力と最大圧力を表します。
-- {{ domxref('PointerEvent.tangentialPressure')}} {{ReadOnlyInline}}
- - : ポインタ入力の正規化された接線圧力（バレル圧力またはシリンダー応力（[cylinder stress](https://en.wikipedia.org/wiki/Cylinder_stress)）とも呼ばれます）で、 `-1` から `1` の範囲であり、 `0` はコントロールの中立位置です。
-- {{ domxref('PointerEvent.tiltX')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.tangentialPressure')}} {{ReadOnlyInline}}
+ - : ポインター入力の正規化された接線圧力（バレル圧力またはシリンダー応力（[cylinder stress](https://en.wikipedia.org/wiki/Cylinder_stress)）とも呼ばれます）で、 `-1` から `1` の範囲であり、 `0` はコントロールの中立位置です。
+- {{domxref('PointerEvent.tiltX')}} {{ReadOnlyInline}}
- : Y-Z 平面と、ポインター（ペンスタイラスなど）の軸と Y 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。
-- {{ domxref('PointerEvent.tiltY')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.tiltY')}} {{ReadOnlyInline}}
- : X-Z 平面と、ポインター（ペンスタイラスなど）の軸と X 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。
-- {{ domxref('PointerEvent.twist')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.twist')}} {{ReadOnlyInline}}
- : ポインター（ペンスタイラスなど）の長軸を中心とした時計回りの回転の度数（`0` から `359` の範囲の値）。
-- {{ domxref('PointerEvent.pointerType')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.pointerType')}} {{ReadOnlyInline}}
- : イベントの原因となった機器の種類（マウス、ペン、タッチなど）を示します。
-- {{ domxref('PointerEvent.isPrimary')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.isPrimary')}} {{ReadOnlyInline}}
- : このポインターがこのポインター種別の主ポインターを表すかどうかを示します。
## 例
@@ -85,12 +89,14 @@ para.onpointerleave = (event) => {
- 関連イベント
- - [`gotpointercapture`](/ja/docs/Web/API/Element/gotpointercapture_event)
- - [`lostpointercapture`](/ja/docs/Web/API/Element/lostpointercapture_event)
- - [`pointerover`](/ja/docs/Web/API/Element/pointerover_event)
- - [`pointerenter`](/ja/docs/Web/API/Element/pointerenter_event)
- - [`pointerdown`](/ja/docs/Web/API/Element/pointerdown_event)
- - [`pointermove`](/ja/docs/Web/API/Element/pointermove_event)
- - [`pointerup`](/ja/docs/Web/API/Element/pointerup_event)
- - [`pointercancel`](/ja/docs/Web/API/Element/pointercancel_event)
- - [`pointerout`](/ja/docs/Web/API/Element/pointerout_event)
+ - {{domxref('Element/gotpointercapture_event', 'gotpointercapture')}}
+ - {{domxref('Element/lostpointercapture_event', 'lostpointercapture')}}
+ - {{domxref('Element/pointerover_event', 'pointerover')}}
+ - {{domxref('Element/pointerenter_event', 'pointerenter')}}
+ - {{domxref('Element/pointerdown_event', 'pointerdown')}}
+ - {{domxref('Element/pointermove_event', 'pointermove')}}
+ - {{domxref('Element/pointerup_event', 'pointerup')}}
+ - {{domxref('Element/pointercancel_event', 'pointercancel')}}
+ - {{domxref('Element/pointerout_event', 'pointerout')}}
+ - {{domxref('Element/pointerleave_event', 'pointerleave')}}
+ - {{domxref('Element/pointerrawupdate_event', 'pointerrawupdate')}}
diff --git a/files/ja/web/api/element/pointermove_event/index.md b/files/ja/web/api/element/pointermove_event/index.md
index 660964b7213404..2e00d2e8a34fbe 100644
--- a/files/ja/web/api/element/pointermove_event/index.md
+++ b/files/ja/web/api/element/pointermove_event/index.md
@@ -3,7 +3,7 @@ title: "Element: pointermove イベント"
short-title: pointermove
slug: Web/API/Element/pointermove_event
l10n:
- sourceCommit: 7b3ccaec4a93584da12939587ea746acaabe30bc
+ sourceCommit: 6636dfb792a72346c68e44c9d042e3c2219e522b
---
{{APIRef}}
@@ -30,25 +30,29 @@ onpointermove = (event) => {};
_このインターフェイスは {{domxref("MouseEvent")}} および {{domxref("Event")}} からプロパティを継承しています。_
-- {{ domxref('PointerEvent.pointerId')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.altitudeAngle')}} {{ReadOnlyInline}} {{experimental_inline}}
+ - : トランスデューサー（ポインターまたはスタイラス）の軸と端末画面の X-Y 平面との間の角度を表します。
+- {{domxref('PointerEvent.azimuthAngle')}} {{ReadOnlyInline}} {{experimental_inline}}
+ - : Y-Z 平面と、トランスデューサー（ポインターまたはスタイラス）の軸と Y 軸の両方を格納する平面との間の角度を表します。
+- {{domxref('PointerEvent.pointerId')}} {{ReadOnlyInline}}
- : イベントを発生させたポインターの固有の識別子です。
-- {{ domxref('PointerEvent.width')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.width')}} {{ReadOnlyInline}}
- : ポインターが接触するジオメトリーの幅（X 軸の大きさ、CSS ピクセル単位）。
-- {{ domxref('PointerEvent.height')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.height')}} {{ReadOnlyInline}}
- : ポインターが接触するジオメトリーの高さ（Y 軸の大きさ、CSS ピクセル単位）。
-- {{ domxref('PointerEvent.pressure')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.pressure')}} {{ReadOnlyInline}}
- : ポインター入力の正規化された圧力で、範囲は `0` から `1` です。ここで `0` と `1` は、それぞれハードウェアが検出可能な最小圧力と最大圧力を表します。
-- {{ domxref('PointerEvent.tangentialPressure')}} {{ReadOnlyInline}}
- - : ポインタ入力の正規化された接線圧力（バレル圧力またはシリンダー応力（[cylinder stress](https://en.wikipedia.org/wiki/Cylinder_stress)）とも呼ばれます）で、 `-1` から `1` の範囲であり、 `0` はコントロールの中立位置です。
-- {{ domxref('PointerEvent.tiltX')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.tangentialPressure')}} {{ReadOnlyInline}}
+ - : ポインター入力の正規化された接線圧力（バレル圧力またはシリンダー応力（[cylinder stress](https://en.wikipedia.org/wiki/Cylinder_stress)）とも呼ばれます）で、 `-1` から `1` の範囲であり、 `0` はコントロールの中立位置です。
+- {{domxref('PointerEvent.tiltX')}} {{ReadOnlyInline}}
- : Y-Z 平面と、ポインター（ペンスタイラスなど）の軸と Y 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。
-- {{ domxref('PointerEvent.tiltY')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.tiltY')}} {{ReadOnlyInline}}
- : X-Z 平面と、ポインター（ペンスタイラスなど）の軸と X 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。
-- {{ domxref('PointerEvent.twist')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.twist')}} {{ReadOnlyInline}}
- : ポインター（ペンスタイラスなど）の長軸を中心とした時計回りの回転の度数（`0` から `359` の範囲の値）。
-- {{ domxref('PointerEvent.pointerType')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.pointerType')}} {{ReadOnlyInline}}
- : イベントの原因となった機器の種類（マウス、ペン、タッチなど）を示します。
-- {{ domxref('PointerEvent.isPrimary')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.isPrimary')}} {{ReadOnlyInline}}
- : このポインターがこのポインター種別の主ポインターを表すかどうかを示します。
## 使用上のメモ
@@ -89,12 +93,14 @@ para.onpointermove = (event) => {
- 関連イベント
- - [`gotpointercapture`](/ja/docs/Web/API/Element/gotpointercapture_event)
- - [`lostpointercapture`](/ja/docs/Web/API/Element/lostpointercapture_event)
- - [`pointerover`](/ja/docs/Web/API/Element/pointerover_event)
- - [`pointerenter`](/ja/docs/Web/API/Element/pointerenter_event)
- - [`pointerdown`](/ja/docs/Web/API/Element/pointerdown_event)
- - [`pointerup`](/ja/docs/Web/API/Element/pointerup_event)
- - [`pointercancel`](/ja/docs/Web/API/Element/pointercancel_event)
- - [`pointerout`](/ja/docs/Web/API/Element/pointerout_event)
- - [`pointerleave`](/ja/docs/Web/API/Element/pointerleave_event)
+ - {{domxref('Element/gotpointercapture_event', 'gotpointercapture')}}
+ - {{domxref('Element/lostpointercapture_event', 'lostpointercapture')}}
+ - {{domxref('Element/pointerover_event', 'pointerover')}}
+ - {{domxref('Element/pointerenter_event', 'pointerenter')}}
+ - {{domxref('Element/pointerdown_event', 'pointerdown')}}
+ - {{domxref('Element/pointermove_event', 'pointermove')}}
+ - {{domxref('Element/pointerup_event', 'pointerup')}}
+ - {{domxref('Element/pointercancel_event', 'pointercancel')}}
+ - {{domxref('Element/pointerout_event', 'pointerout')}}
+ - {{domxref('Element/pointerleave_event', 'pointerleave')}}
+ - {{domxref('Element/pointerrawupdate_event', 'pointerrawupdate')}}
diff --git a/files/ja/web/api/element/pointerout_event/index.md b/files/ja/web/api/element/pointerout_event/index.md
index 394ad1cf351e18..b340086eec2092 100644
--- a/files/ja/web/api/element/pointerout_event/index.md
+++ b/files/ja/web/api/element/pointerout_event/index.md
@@ -1,8 +1,9 @@
---
title: "Element: pointerout イベント"
+short-title: pointerout
slug: Web/API/Element/pointerout_event
l10n:
- sourceCommit: 7b3ccaec4a93584da12939587ea746acaabe30bc
+ sourceCommit: 6636dfb792a72346c68e44c9d042e3c2219e522b
---
{{APIRef}}
@@ -29,25 +30,29 @@ onpointerout = (event) => {};
_このインターフェイスは {{domxref("MouseEvent")}} および {{domxref("Event")}} からプロパティを継承しています。_
-- {{ domxref('PointerEvent.pointerId')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.altitudeAngle')}} {{ReadOnlyInline}} {{experimental_inline}}
+ - : トランスデューサー（ポインターまたはスタイラス）の軸と端末画面の X-Y 平面との間の角度を表します。
+- {{domxref('PointerEvent.azimuthAngle')}} {{ReadOnlyInline}} {{experimental_inline}}
+ - : Y-Z 平面と、トランスデューサー（ポインターまたはスタイラス）の軸と Y 軸の両方を格納する平面との間の角度を表します。
+- {{domxref('PointerEvent.pointerId')}} {{ReadOnlyInline}}
- : イベントを発生させたポインターの固有の識別子です。
-- {{ domxref('PointerEvent.width')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.width')}} {{ReadOnlyInline}}
- : ポインターが接触するジオメトリーの幅（X 軸の大きさ、CSS ピクセル単位）。
-- {{ domxref('PointerEvent.height')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.height')}} {{ReadOnlyInline}}
- : ポインターが接触するジオメトリーの高さ（Y 軸の大きさ、CSS ピクセル単位）。
-- {{ domxref('PointerEvent.pressure')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.pressure')}} {{ReadOnlyInline}}
- : ポインター入力の正規化された圧力で、範囲は `0` から `1` です。ここで `0` と `1` は、それぞれハードウェアが検出可能な最小圧力と最大圧力を表します。
-- {{ domxref('PointerEvent.tangentialPressure')}} {{ReadOnlyInline}}
- - : ポインタ入力の正規化された接線圧力（バレル圧力またはシリンダー応力（[cylinder stress](https://en.wikipedia.org/wiki/Cylinder_stress)）とも呼ばれます）で、 `-1` から `1` の範囲であり、 `0` はコントロールの中立位置です。
-- {{ domxref('PointerEvent.tiltX')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.tangentialPressure')}} {{ReadOnlyInline}}
+ - : ポインター入力の正規化された接線圧力（バレル圧力またはシリンダー応力（[cylinder stress](https://en.wikipedia.org/wiki/Cylinder_stress)）とも呼ばれます）で、 `-1` から `1` の範囲であり、 `0` はコントロールの中立位置です。
+- {{domxref('PointerEvent.tiltX')}} {{ReadOnlyInline}}
- : Y-Z 平面と、ポインター（ペンスタイラスなど）の軸と Y 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。
-- {{ domxref('PointerEvent.tiltY')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.tiltY')}} {{ReadOnlyInline}}
- : X-Z 平面と、ポインター（ペンスタイラスなど）の軸と X 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。
-- {{ domxref('PointerEvent.twist')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.twist')}} {{ReadOnlyInline}}
- : ポインター（ペンスタイラスなど）の長軸を中心とした時計回りの回転の度数（`0` から `359` の範囲の値）。
-- {{ domxref('PointerEvent.pointerType')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.pointerType')}} {{ReadOnlyInline}}
- : イベントの原因となった機器の種類（マウス、ペン、タッチなど）を示します。
-- {{ domxref('PointerEvent.isPrimary')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.isPrimary')}} {{ReadOnlyInline}}
- : このポインターがこのポインター種別の主ポインターを表すかどうかを示します。
## 例
@@ -84,12 +89,14 @@ para.onpointerout = (event) => {
- 関連イベント
- - [`gotpointercapture`](/ja/docs/Web/API/Element/gotpointercapture_event)
- - [`lostpointercapture`](/ja/docs/Web/API/Element/lostpointercapture_event)
- - [`pointerover`](/ja/docs/Web/API/Element/pointerover_event)
- - [`pointerenter`](/ja/docs/Web/API/Element/pointerenter_event)
- - [`pointerdown`](/ja/docs/Web/API/Element/pointerdown_event)
- - [`pointermove`](/ja/docs/Web/API/Element/pointermove_event)
- - [`pointerup`](/ja/docs/Web/API/Element/pointerup_event)
- - [`pointercancel`](/ja/docs/Web/API/Element/pointercancel_event)
- - [`pointerleave`](/ja/docs/Web/API/Element/pointerleave_event)
+ - {{domxref('Element/gotpointercapture_event', 'gotpointercapture')}}
+ - {{domxref('Element/lostpointercapture_event', 'lostpointercapture')}}
+ - {{domxref('Element/pointerover_event', 'pointerover')}}
+ - {{domxref('Element/pointerenter_event', 'pointerenter')}}
+ - {{domxref('Element/pointerdown_event', 'pointerdown')}}
+ - {{domxref('Element/pointermove_event', 'pointermove')}}
+ - {{domxref('Element/pointerup_event', 'pointerup')}}
+ - {{domxref('Element/pointercancel_event', 'pointercancel')}}
+ - {{domxref('Element/pointerout_event', 'pointerout')}}
+ - {{domxref('Element/pointerleave_event', 'pointerleave')}}
+ - {{domxref('Element/pointerrawupdate_event', 'pointerrawupdate')}}
diff --git a/files/ja/web/api/element/pointerover_event/index.md b/files/ja/web/api/element/pointerover_event/index.md
index 5f5b6cf5ac90b7..0300d1de37b57d 100644
--- a/files/ja/web/api/element/pointerover_event/index.md
+++ b/files/ja/web/api/element/pointerover_event/index.md
@@ -30,25 +30,29 @@ onpointerover = (event) => {};
_このインターフェイスは {{domxref("MouseEvent")}} および {{domxref("Event")}} からプロパティを継承しています。_
-- {{ domxref('PointerEvent.pointerId')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.altitudeAngle')}} {{ReadOnlyInline}} {{experimental_inline}}
+ - : トランスデューサー（ポインターまたはスタイラス）の軸と端末画面の X-Y 平面との間の角度を表します。
+- {{domxref('PointerEvent.azimuthAngle')}} {{ReadOnlyInline}} {{experimental_inline}}
+ - : Y-Z 平面と、トランスデューサー（ポインターまたはスタイラス）の軸と Y 軸の両方を格納する平面との間の角度を表します。
+- {{domxref('PointerEvent.pointerId')}} {{ReadOnlyInline}}
- : イベントを発生させたポインターの固有の識別子です。
-- {{ domxref('PointerEvent.width')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.width')}} {{ReadOnlyInline}}
- : ポインターが接触するジオメトリーの幅（X 軸の大きさ、CSS ピクセル単位）。
-- {{ domxref('PointerEvent.height')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.height')}} {{ReadOnlyInline}}
- : ポインターが接触するジオメトリーの高さ（Y 軸の大きさ、CSS ピクセル単位）。
-- {{ domxref('PointerEvent.pressure')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.pressure')}} {{ReadOnlyInline}}
- : ポインター入力の正規化された圧力で、範囲は `0` から `1` です。ここで `0` と `1` は、それぞれハードウェアが検出可能な最小圧力と最大圧力を表します。
-- {{ domxref('PointerEvent.tangentialPressure')}} {{ReadOnlyInline}}
- - : ポインタ入力の正規化された接線圧力（バレル圧力またはシリンダー応力（[cylinder stress](https://en.wikipedia.org/wiki/Cylinder_stress)）とも呼ばれます）で、 `-1` から `1` の範囲であり、 `0` はコントロールの中立位置です。
-- {{ domxref('PointerEvent.tiltX')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.tangentialPressure')}} {{ReadOnlyInline}}
+ - : ポインター入力の正規化された接線圧力（バレル圧力またはシリンダー応力（[cylinder stress](https://en.wikipedia.org/wiki/Cylinder_stress)）とも呼ばれます）で、 `-1` から `1` の範囲であり、 `0` はコントロールの中立位置です。
+- {{domxref('PointerEvent.tiltX')}} {{ReadOnlyInline}}
- : Y-Z 平面と、ポインター（ペンスタイラスなど）の軸と Y 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。
-- {{ domxref('PointerEvent.tiltY')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.tiltY')}} {{ReadOnlyInline}}
- : X-Z 平面と、ポインター（ペンスタイラスなど）の軸と X 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。
-- {{ domxref('PointerEvent.twist')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.twist')}} {{ReadOnlyInline}}
- : ポインター（ペンスタイラスなど）の長軸を中心とした時計回りの回転の度数（`0` から `359` の範囲の値）。
-- {{ domxref('PointerEvent.pointerType')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.pointerType')}} {{ReadOnlyInline}}
- : イベントの原因となった機器の種類（マウス、ペン、タッチなど）を示します。
-- {{ domxref('PointerEvent.isPrimary')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.isPrimary')}} {{ReadOnlyInline}}
- : このポインターがこのポインター種別の主ポインターを表すかどうかを示します。
## 例
@@ -85,12 +89,14 @@ para.onpointerover = (event) => {
- 関連イベント
- - [`gotpointercapture`](/ja/docs/Web/API/Element/gotpointercapture_event)
- - [`lostpointercapture`](/ja/docs/Web/API/Element/lostpointercapture_event)
- - [`pointerenter`](/ja/docs/Web/API/Element/pointerenter_event)
- - [`pointerdown`](/ja/docs/Web/API/Element/pointerdown_event)
- - [`pointermove`](/ja/docs/Web/API/Element/pointermove_event)
- - [`pointerup`](/ja/docs/Web/API/Element/pointerup_event)
- - [`pointercancel`](/ja/docs/Web/API/Element/pointercancel_event)
- - [`pointerout`](/ja/docs/Web/API/Element/pointerout_event)
- - [`pointerleave`](/ja/docs/Web/API/Element/pointerleave_event)
+ - {{domxref('Element/gotpointercapture_event', 'gotpointercapture')}}
+ - {{domxref('Element/lostpointercapture_event', 'lostpointercapture')}}
+ - {{domxref('Element/pointerover_event', 'pointerover')}}
+ - {{domxref('Element/pointerenter_event', 'pointerenter')}}
+ - {{domxref('Element/pointerdown_event', 'pointerdown')}}
+ - {{domxref('Element/pointermove_event', 'pointermove')}}
+ - {{domxref('Element/pointerup_event', 'pointerup')}}
+ - {{domxref('Element/pointercancel_event', 'pointercancel')}}
+ - {{domxref('Element/pointerout_event', 'pointerout')}}
+ - {{domxref('Element/pointerleave_event', 'pointerleave')}}
+ - {{domxref('Element/pointerrawupdate_event', 'pointerrawupdate')}}
diff --git a/files/ja/web/api/element/pointerup_event/index.md b/files/ja/web/api/element/pointerup_event/index.md
index b1be0dbe6a9005..045df397fa9f9c 100644
--- a/files/ja/web/api/element/pointerup_event/index.md
+++ b/files/ja/web/api/element/pointerup_event/index.md
@@ -1,13 +1,14 @@
---
title: "Element: pointerup イベント"
+short-title: pointerup
slug: Web/API/Element/pointerup_event
l10n:
- sourceCommit: 9fb6c9e56c6db295967384730feeb941509ac743
+ sourceCommit: 6636dfb792a72346c68e44c9d042e3c2219e522b
---
{{APIRef}}
-`pointerup` イベントは、ポインターがアクティブではなくなったときに発生します。
+`pointerup` イベントは、ポインターがアクティブではなくなったときに発生します。これは代わりに [`pointercancel`](/ja/docs/Web/API/Element/pointercancel_event) イベントを用いて取得できることを覚えておいてください。
## 構文
@@ -29,25 +30,29 @@ onpointerup = (event) => {};
_このインターフェイスは {{domxref("MouseEvent")}} および {{domxref("Event")}} からプロパティを継承しています。_
-- {{ domxref('PointerEvent.pointerId')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.altitudeAngle')}} {{ReadOnlyInline}} {{experimental_inline}}
+ - : トランスデューサー（ポインターまたはスタイラス）の軸と端末画面の X-Y 平面との間の角度を表します。
+- {{domxref('PointerEvent.azimuthAngle')}} {{ReadOnlyInline}} {{experimental_inline}}
+ - : Y-Z 平面と、トランスデューサー（ポインターまたはスタイラス）の軸と Y 軸の両方を格納する平面との間の角度を表します。
+- {{domxref('PointerEvent.pointerId')}} {{ReadOnlyInline}}
- : イベントを発生させたポインターの固有の識別子です。
-- {{ domxref('PointerEvent.width')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.width')}} {{ReadOnlyInline}}
- : ポインターが接触するジオメトリーの幅（X 軸の大きさ、CSS ピクセル単位）。
-- {{ domxref('PointerEvent.height')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.height')}} {{ReadOnlyInline}}
- : ポインターが接触するジオメトリーの高さ（Y 軸の大きさ、CSS ピクセル単位）。
-- {{ domxref('PointerEvent.pressure')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.pressure')}} {{ReadOnlyInline}}
- : ポインター入力の正規化された圧力で、範囲は `0` から `1` です。ここで `0` と `1` は、それぞれハードウェアが検出可能な最小圧力と最大圧力を表します。
-- {{ domxref('PointerEvent.tangentialPressure')}} {{ReadOnlyInline}}
- - : ポインタ入力の正規化された接線圧力（バレル圧力またはシリンダー応力（[cylinder stress](https://en.wikipedia.org/wiki/Cylinder_stress)）とも呼ばれます）で、 `-1` から `1` の範囲であり、 `0` はコントロールの中立位置です。
-- {{ domxref('PointerEvent.tiltX')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.tangentialPressure')}} {{ReadOnlyInline}}
+ - : ポインター入力の正規化された接線圧力（バレル圧力またはシリンダー応力（[cylinder stress](https://en.wikipedia.org/wiki/Cylinder_stress)）とも呼ばれます）で、 `-1` から `1` の範囲であり、 `0` はコントロールの中立位置です。
+- {{domxref('PointerEvent.tiltX')}} {{ReadOnlyInline}}
- : Y-Z 平面と、ポインター（ペンスタイラスなど）の軸と Y 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。
-- {{ domxref('PointerEvent.tiltY')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.tiltY')}} {{ReadOnlyInline}}
- : X-Z 平面と、ポインター（ペンスタイラスなど）の軸と X 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。
-- {{ domxref('PointerEvent.twist')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.twist')}} {{ReadOnlyInline}}
- : ポインター（ペンスタイラスなど）の長軸を中心とした時計回りの回転の度数（`0` から `359` の範囲の値）。
-- {{ domxref('PointerEvent.pointerType')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.pointerType')}} {{ReadOnlyInline}}
- : イベントの原因となった機器の種類（マウス、ペン、タッチなど）を示します。
-- {{ domxref('PointerEvent.isPrimary')}} {{ReadOnlyInline}}
+- {{domxref('PointerEvent.isPrimary')}} {{ReadOnlyInline}}
- : このポインターがこのポインター種別の主ポインターを表すかどうかを示します。
## 例
@@ -84,12 +89,14 @@ para.onpointerup = (event) => {
- 関連イベント
- - [`gotpointercapture`](/ja/docs/Web/API/Element/gotpointercapture_event)
- - [`lostpointercapture`](/ja/docs/Web/API/Element/lostpointercapture_event)
- - [`pointerover`](/ja/docs/Web/API/Element/pointerover_event)
- - [`pointerenter`](/ja/docs/Web/API/Element/pointerenter_event)
- - [`pointerdown`](/ja/docs/Web/API/Element/pointerdown_event)
- - [`pointermove`](/ja/docs/Web/API/Element/pointermove_event)
- - [`pointercancel`](/ja/docs/Web/API/Element/pointercancel_event)
- - [`pointerout`](/ja/docs/Web/API/Element/pointerout_event)
- - [`pointerleave`](/ja/docs/Web/API/Element/pointerleave_event)
+ - {{domxref('Element/gotpointercapture_event', 'gotpointercapture')}}
+ - {{domxref('Element/lostpointercapture_event', 'lostpointercapture')}}
+ - {{domxref('Element/pointerover_event', 'pointerover')}}
+ - {{domxref('Element/pointerenter_event', 'pointerenter')}}
+ - {{domxref('Element/pointerdown_event', 'pointerdown')}}
+ - {{domxref('Element/pointermove_event', 'pointermove')}}
+ - {{domxref('Element/pointerup_event', 'pointerup')}}
+ - {{domxref('Element/pointercancel_event', 'pointercancel')}}
+ - {{domxref('Element/pointerout_event', 'pointerout')}}
+ - {{domxref('Element/pointerleave_event', 'pointerleave')}}
+ - {{domxref('Element/pointerrawupdate_event', 'pointerrawupdate')}}
diff --git a/files/ja/web/api/element/requestfullscreen/index.md b/files/ja/web/api/element/requestfullscreen/index.md
index 76d294b0bea1cc..93ad9ce92cdab6 100644
--- a/files/ja/web/api/element/requestfullscreen/index.md
+++ b/files/ja/web/api/element/requestfullscreen/index.md
@@ -3,7 +3,7 @@ title: "Element: requestFullscreen() メソッド"
short-title: requestFullscreen()
slug: Web/API/Element/requestFullscreen
l10n:
- sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+ sourceCommit: bafc473d01411340a547b9fae11702ead2b28016
---
{{APIRef("Fullscreen API")}}
@@ -28,12 +28,14 @@ requestFullscreen(options)
- : 要素が全画面モードのときにナビゲーション UI を表示するかどうかを制御します。
既定値では `"auto"` であり、これはブラウザーが何をすべきかを決定することを示す。
- `"hide"`
- - : このとき、ブラウザーのナビゲーションインターフェースは非表示になり、画面全体が要素の表示に割り当てられます。
+ - : このとき、ブラウザーのナビゲーションインターフェイスは非表示になり、画面全体が要素の表示に割り当てられます。
- `"show"`
- : ブラウザーは、ページナビゲーションコントロールや、場合によっては他のユーザーインターフェイスを表示します。要素の寸法（および画面の知覚サイズ）は、このユーザーインターフェイスのためのスペースを残すために締め付けられます。
- `"auto"`
- : 上記の設定のうち、どれを適用するかはブラウザーが選択します。
これが既定値です。
+ - `screen` {{optional_inline}} {{experimental_inline}}
+ - : 要素を全画面モードで表示したい画面を指定します。これは {{domxref("ScreenDetailed")}} オブジェクトを値として取り、選択された画面を表します。
### 返値
@@ -124,6 +126,23 @@ elem
プロミスの解決ハンドラーは何もしませんが、プロミスが拒否された場合は {{DOMxRef("Window.alert", "alert()")}} を呼び出すことでエラーメッセージが表示します。
+### screen オプションの使用
+
+要素を OS の第 1 画面で全画面にしたい場合は、以下のようなコードを使用することで実現できます。
+
+```js
+try {
+ const primaryScreen = (await getScreenDetails()).screens.find(
+ (screen) => screen.isPrimary,
+ );
+ await document.body.requestFullscreen({ screen: primaryScreen });
+} catch (err) {
+ console.error(err.name, err.message);
+}
+```
+
+{{domxref("Window.getScreenDetails()")}} メソッドを使用して、現在の端末の {{domxref("ScreenDetails")}} オブジェクトを取得します。これには、利用できるさまざまな画面を表す {{domxref("ScreenDetailed")}} オブジェクトが格納されています。
+
## 仕様書
{{Specifications}}
diff --git a/files/ja/web/api/element/scroll_event/index.md b/files/ja/web/api/element/scroll_event/index.md
index cf471b78b2812f..47d4e8b1ffbba2 100644
--- a/files/ja/web/api/element/scroll_event/index.md
+++ b/files/ja/web/api/element/scroll_event/index.md
@@ -28,7 +28,7 @@ onscroll = (event) => {};
## 例
以下の例では、`scroll` イベントをイベントリスナーと `onscroll` イベントハンドラープロパティによって使用する方法を示しています。
-`scroll` イベントは高頻度で発行されるため、{{DOMxRef("setTimeout()")}} メソッドを使用してイベントハンドラをスロットルで制御しています。
+`scroll` イベントは高頻度で発行されるため、{{DOMxRef("setTimeout()")}} メソッドを使用してイベントハンドラーをスロットルで制御しています。
その他の {{DOMxRef("Window.requestAnimationFrame()", "requestAnimationFrame")}} を使用した例については、{{domxref("Document/scroll_event", "Document: scroll イベント")}}ページを参照してください。
### `scroll` をイベントリスナーで使用
diff --git a/files/ja/web/api/element/scrollwidth/index.md b/files/ja/web/api/element/scrollwidth/index.md
index c70eaf9deb3c89..49f30520610909 100644
--- a/files/ja/web/api/element/scrollwidth/index.md
+++ b/files/ja/web/api/element/scrollwidth/index.md
@@ -3,14 +3,14 @@ title: "Element: scrollWidth プロパティ"
short-title: scrollWidth
slug: Web/API/Element/scrollWidth
l10n:
- sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+ sourceCommit: ce85e3fb7865330e4ac2a6dad25db5cf5d27ea74
---
{{APIRef("DOM")}}
**`Element.scrollWidth`** は読み取り専用のプロパティで、あふれたために画面に表示されない部分を含めた、要素の中身の幅の寸法です。
-`scrollWidth` の値は、水平スクロールバーを使用せずにすべてのコンテンツをビューポート内に合わせるために要素が必要とする最小幅に等しくなります。幅は {{domxref("Element.clientWidth", "clientWidth")}} と同じ方法で定めます。要素のパディングは含みますが、境界線、マージン、 (もしあれば) 垂直スクロールバーは含みません。これには {{cssxref("::before")}} または {{cssxref("::after")}} のような疑似要素の幅を含むことがあります。要素の内容が水平スクロールバーが必要なく合うのであれば、 `scrollWidth` は {{domxref("Element.clientWidth", "clientWidth")}} と等しくなります。
+`scrollWidth` の値は、水平スクロールバーを使用せずにすべてのコンテンツをビューポート内に合わせるために要素が必要とする最小幅に等しくなります。幅は {{domxref("Element.clientWidth", "clientWidth")}} と同じ方法で測定されます。要素のパディングは含みますが、境界線、マージン、垂直スクロールバー（ある場合）は含みません。これには {{cssxref("::before")}} または {{cssxref("::after")}} のような擬似要素の幅を含むことがあります。要素の内容が水平スクロールバーが必要なく合うのであれば、 `scrollWidth` は {{domxref("Element.clientWidth", "clientWidth")}} と等しくなります。
> **メモ:** このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
diff --git a/files/ja/web/api/element/sethtmlunsafe/index.md b/files/ja/web/api/element/sethtmlunsafe/index.md
new file mode 100644
index 00000000000000..21bdfb0d50a7e0
--- /dev/null
+++ b/files/ja/web/api/element/sethtmlunsafe/index.md
@@ -0,0 +1,63 @@
+---
+title: "Element: setHTMLUnsafe() メソッド"
+short-title: setHTMLUnsafe()
+slug: Web/API/Element/setHTMLUnsafe
+l10n:
+ sourceCommit: 3c386c36f6f1d177ae2ed400668f21ea2ada5db3
+---
+
+{{APIRef("DOM")}}
+
+**`setHTMLUnsafe()`** は {{domxref("Element")}} インターフェイスのメソッドで、HTML の文字列を {{domxref("DocumentFragment")}} として解釈し、DOM 内の要素のサブツリーを置き換えるために使用します。入力された HTML は[宣言的シャドウルート](/ja/docs/Web/HTML/Element/template#宣言的シャドウ_dom)を含むことがあります。
+
+メソッド名の接尾辞 "Unsafe" は、そのメソッドが `
+
+```
+
+`logID()` 内の `this` の値はグローバルオブジェクト {{domxref("Window")}} への参照です（[厳格モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)の場合は `undefined`）。
+
+#### bind() を使用した "this" の設定
+
+{{jsxref("Function.prototype.bind()")}} メソッドを使用すると、修正された `this` コンテキストをその後のすべての呼び出しに使用することができます。ただし、リスナーへの参照を保持しておく必要があることに注意してください。
-[Web Incubator Community Group](https://wicg.github.io/admin/charter.html) の [`EventListenerOptions`](https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection) の記事を参考にしてください。
+これは `bind()` を使用した例と使用しない例です。
+
+```js
+class Something {
+ name = "Something Good";
+ constructor(element) {
+ // bind によって、修正された `this` コンテキストを `onclick2` に代入される
+ this.onclick2 = this.onclick2.bind(this);
+ element.addEventListener("click", this.onclick1, false);
+ element.addEventListener("click", this.onclick2, false); // Trick
+ }
+ onclick1(event) {
+ console.log(this.name); // undefined（`this` が要素であるため）
+ }
+ onclick2(event) {
+ console.log(this.name); // 'Something Good'（`this` が Something インターフェイスに結び付けられているため）
+ }
+}
+
+const s = new Something(document.body);
+```
+
+もう一つの解決策は、`handleEvent()` と呼ばれる特別な関数を使用してイベントを捕捉することです。
+
+```js
+class Something {
+ name = "Something Good";
+ constructor(element) {
+ // この場合のリスナーは `this` であり、 this.handleEvent ではないことに注意
+ element.addEventListener("click", this, false);
+ element.addEventListener("dblclick", this, false);
+ }
+ handleEvent(event) {
+ console.log(this.name); // 'Something Good'（新しく作成されたオブジェクトに結び付けられているため）
+ switch (event.type) {
+ case "click":
+ // ここにいくらかのコード…
+ break;
+ case "dblclick":
+ // ここにいくらかのコード…
+ break;
+ }
+ }
+}
+
+const s = new Something(document.body);
+```
+
+`this` への参照を処理するもう一つの方法は、別個の `this` コンテキストを作成しないアロー関数を使用することです。
+
+```js
+class SomeClass {
+ name = "Something Good";
+
+ register() {
+ window.addEventListener("keydown", (e) => {
+ this.someMethod(e);
+ });
+ }
+
+ someMethod(e) {
+ console.log(this.name);
+ switch (e.code) {
+ case "ArrowUp":
+ // ここにいくらかのコード…
+ break;
+ case "ArrowDown":
+ // ここにいくらかのコード…
+ break;
+ }
+ }
+}
+
+const myObject = new SomeClass();
+myObject.register();
+```
+
+### イベントリスナーのデータの出し入れ
+
+イベントリスナーは {{domxref("Event")}} または `Event` のサブクラスの引数を 1 つだけ取りますが、これは自動的にリスナーに渡され、返値は無視されます。
+したがって、イベントリスナーにデータを取得したり、イベントリスナーからデータを取得したりするには、引数と返値でデータを渡すのではなく、代わりに[クロージャ](/ja/docs/Web/JavaScript/Closures)を作成する必要があります。
+
+イベントリスナーとして渡された関数は、その関数を格納する外部スコープで宣言されたすべての変数にアクセスすることができます。
+
+```js
+const myButton = document.getElementById("my-button-id");
+let someString = "Data";
+
+myButton.addEventListener("click", () => {
+ console.log(someString);
+ // 最初のクリックでは 'Data' となり、
+ // 2 番目のクリックでは 'Data Again' となる
+
+ someString = "Data Again";
+});
+
+console.log(someString); // 期待される値: 'Data' （'Data Again' とはならない）
+```
+
+関数スコープに関する詳細情報は、[関数ガイド](/ja/docs/Web/JavaScript/Guide/Functions#関数のスコープ)をお読みください。
+
+### メモリーの問題
+
+```js
+const elts = document.getElementsByTagName("*");
+
+// ケース 1
+for (const elt of elts) {
+ elt.addEventListener(
+ "click",
+ (e) => {
+ // 何かを行う
+ },
+ false,
+ );
+}
+
+// ケース 2
+function processEvent(e) {
+ // 何かを行う
+}
+
+for (const elt of elts) {
+ elt.addEventListener("click", processEvent, false);
+}
+```
+
+上記の 1 つ目のケースでは、ループの繰り返しごとに新しい（無名の）ハンドラー関数が作成されます。一方、 2 つ目のケースでは、以前に宣言した同じ関数がイベントハンドラーとして使用され、作成されるハンドラー関数が 1 つであるため、メモリー消費量が少なくなります。さらに、最初のケースでは、無名関数への参照が保持されないため、 {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} を呼び出すことができません（ここでは、ループが生成する可能性がある複数の無名関数への参照が保持されません）。2 番目のケースでは、`processEvent` が関数の参照なので、`myElement.removeEventListener("click", processEvent, false)` を実行することが可能です。
+
+実は、メモリー消費に関しては、関数参照を保持しないことが本当の問題ではなく、むしろ、*静的*な関数参照を保持しないことが問題なのです。
+
+### パッシブリスナーの使用
+
+イベントに既定のアクションがある場合、例えば、既定でコンテナーをスクロールする {{domxref("Element/wheel_event", "wheel")}} イベントの場合、イベントリスナーが {{domxref("Event.preventDefault()")}} を呼び出して既定のアクションをキャンセルするかどうかを事前に知ることができないため、ブラウザーは一般的にイベントリスナーが完了するまで既定のアクションを開始することができません。イベントリスナーの実行に時間がかかりすぎると、既定のアクションが実行されるまでに、{{glossary("jank", "ジャンク")}}と呼ばれる顕著な遅延が発生する可能性があります。
+
+`passive` オプションを `true` に設定することで、イベントリスナーは既定のアクションを取り消される可能性がないことを宣言します。リスナーが {{domxref("Event.preventDefault()")}} を呼び出しても、効果はありません。
+
+`addEventListener()` の仕様書では、`passive` オプションの既定値は常に `false` であると定義しています。しかし、パッシブリスナーのスクロールパフォーマンスの利点を古いコードで実現するために、最近のブラウザーでは {{domxref("Element/wheel_event", "wheel")}}、{{domxref("Element/mousewheel_event", "mousewheel")}}、{{domxref("Element/touchstart_event", "touchstart")}}、{{domxref("Element/touchmove_event", "touchmove")}} の各イベントの `passive` オプションの既定値が、文書レベルノード {{domxref("Window")}}、{{domxref("Document")}}、{{domxref("Document.body")}} においては `true` に変更されています。これにより、イベントリスナーが[イベントが取り消される可能性](/ja/docs/Web/API/Event/preventDefault)を防ぐことができるので、ユーザーがスクロールしている間にページのレンダリングをブロックすることはありません。
+
+そのため、（既定値に頼らずに）その動作を上書きして `passive` オプションを確実に `false` にしたい場合は、明示的にこのオプションを `false` に設定する必要があります。
+
+基本的な {{domxref("Element/scroll_event", "scroll")}} イベントについて、`passive` の値を気にする必要はありません。
+取り消される可能性がないため、イベントリスナーがページのレンダリングをブロックすることはありません。
+
+パッシブリスナーの効果を示す例については[パッシブリスナーによるスクロールの性能改善](#パッシブリスナーによるスクロールの性能改善)を参照してください。
+
+### 古いブラウザーの場合
+
+`addEventListener()` の引数 `options` に対応していない古いブラウザーでは、これを使用しようとすると、[機能検出](#オプションの対応の安全な検出)を適切に使用しない限り、引数 `useCapture` が使用できなくなります。
## 例
@@ -172,7 +377,7 @@ const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);
```
-このコードの中で、 `modifyText()` が `addEventListener()` を使用して登録された `click` イベントのリスナーです。表の中のどこかをクリックすると、ハンドラーまでバブリングし、 `modifyText()` が実行されます。
+このコードの中で、 `modifyText()` は `click` イベントのリスナーであり、`addEventListener()` を使用して登録されています。表の中のどこかをクリックすると、ハンドラーまでバブリングし、`modifyText()` が実行されます。
#### 結果
@@ -215,7 +420,7 @@ function modifyText() {
}
```
-上の例では、2 行目の内容が "three" に変わった後に、 `addEventListener()` に渡した {{domxref("AbortController")}} から `abort()` を呼び出すようにコードを変更しました。その結果、クリックイベントを待ち受けするコードがなくなったので、値は永遠に "three" のままとなります。
+上の例では、2 行目のコンテンツが "three" に変更された後に、 `addEventListener()` の呼び出しに渡した {{domxref("AbortController")}} から `abort()` を呼び出すように、前回のコードを変更しています。その結果、クリックイベントを待ち受けするコードがなくなったので、値は永遠に "three" のままとなります。
#### 結果
@@ -266,7 +471,7 @@ el.addEventListener(
### アロー関数を使用したイベントリスナー
-この例はアロー関数表記を使用して実装された、簡単なイベントリスナーを紹介しています。
+この例はアロー関数記法を使用して実装された、簡単なイベントリスナーを紹介しています。
#### HTML
@@ -305,7 +510,7 @@ el.addEventListener(
{{EmbedLiveSample('Event_listener_with_an_arrow_function')}}
-なお、無名関数とアロー関数は似ており、違いは `this` を結び付けるかどうかです。無名関数 (および従来のすべての JavaScript 関数) は固有の `this` を作成するのに対し、アロー関数はそれを含む関数の `this` を継承します。
+なお、無名関数とアロー関数は似ており、違いは `this` を結び付けるかどうかです。無名関数（および従来のすべての JavaScript 関数）は固有の `this` を作成するのに対し、アロー関数はそれを含む関数の `this` を継承します。
つまり、アロー関数を使用したときは、それを含む関数の変数や定数をイベントハンドラーで利用することができます。
@@ -319,13 +524,16 @@ el.addEventListener(
+
+
ログをクリア
+
```
#### CSS
@@ -358,8 +566,31 @@ el.addEventListener(
}
```
+```css hidden
+.demo-logs {
+ width: 530px;
+ height: 16rem;
+ background-color: #ddd;
+ overflow-x: auto;
+ padding: 1rem;
+}
+```
+
#### JavaScript
+```js hidden
+const clearBtn = document.querySelector(".clear-button");
+const demoLogs = document.querySelector(".demo-logs");
+
+function log(msg) {
+ demoLogs.innerText += `${msg}\n`;
+}
+
+clearBtn.addEventListener("click", () => {
+ demoLogs.innerText = "";
+});
+```
+
```js
const outer = document.querySelector(".outer");
const middle = document.querySelector(".middle");
@@ -393,27 +624,27 @@ inner1.addEventListener("click", passiveHandler, passive);
inner2.addEventListener("click", nonePassiveHandler, nonePassive);
function onceHandler(event) {
- alert("outer, once");
+ log("outer、once");
}
function noneOnceHandler(event) {
- alert("outer, none-once, default");
+ log("outer、非 once、既定値\n");
}
function captureHandler(event) {
//event.stopImmediatePropagation();
- alert("middle, capture");
+ log("middle、capture");
}
function noneCaptureHandler(event) {
- alert("middle, none-capture, default");
+ log("middle、非 capture、既定値");
}
function passiveHandler(event) {
- // Unable to preventDefault inside passive event listener invocation.
+ // パッシブイベントリスナーの呼び出しの中では preventDefault は実行できない
event.preventDefault();
- alert("inner1, passive, open new page");
+ log("inner1、passive、新しいページを開く");
}
function nonePassiveHandler(event) {
event.preventDefault();
//event.stopPropagation();
- alert("inner2, none-passive, default, not open new page");
+ log("inner2、非 passive、既定値、新しいページを開かない");
}
```
@@ -421,7 +652,7 @@ function nonePassiveHandler(event) {
外側、中央、内側のコンテナーをそれぞれクリックして、オプションがどのように動作するかを確認してください。
-{{ EmbedLiveSample('Example_of_options_usage', 600, 310, '') }}
+{{ EmbedLiveSample('options_の使い方の例', 600, 630) }}
`options` オブジェクトで特定の値を使用する前に、ユーザーのブラウザーがその値に対応していることを確認するのが良いでしょう。これらは歴史的にすべてのブラウザーがサポートしてきたわけではない追加要素であるからです。詳細は[オプションの対応の安全な検出](#オプションの対応の安全な検出)を参照してください。
@@ -481,292 +712,96 @@ addListener();
{{EmbedLiveSample('Event_listener_with_multiple_options')}}
-## その他の注意事項
-
-### ハンドラー内での "this" の値
-
-一連の類似した要素に対して一般的なハンドラーを使いたい場合のように、イベントハンドラーが実行される要素を参照したいということがたびたびあります。
-
-ハンドラー関数を `addEventListener()` を使って要素に装着したとき、ハンドラーの中の {{jsxref("Operators/this","this")}} の値は要素への参照となります。これはハンドラーに渡された event 引数の `currentTarget` プロパティの値と同じです。
-
-```js
-my_element.addEventListener("click", function (e) {
- console.log(this.className); // logs the className of my_element
- console.log(e.currentTarget === this); // logs `true`
-});
-```
-
-[アロー関数は独自の `this` コンテキストを持たない](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions#メソッドとして使われるアロー関数)ことをお忘れなく。
-
-```js
-my_element.addEventListener("click", (e) => {
- console.log(this.className); // WARNING: `this` is not `my_element`
- console.log(e.currentTarget === this); // logs `false`
-});
-```
-
-イベントハンドラー（例えば {{domxref("Element.click_event", "onclick")}}）が HTML ソース内の要素に指定されていた場合、属性値の JavaScript コードは、 `addEventListener()` を使用するような方法で `this` の値を結び付けたハンドラー関数に置き換えられます。コード内に `this` が現れた場合には、要素への参照を表します。
+### パッシブリスナーによるスクロールの性能改善
-```html
-
-```
+次の例は `passive` を設定した効果を示しています。テキストとチェックボックスを含む {{htmlelement("div")}} があります。
-`this` の値は、属性値の中のコード*によって呼び出される*関数内では、[標準的な規則](/ja/docs/Web/JavaScript/Reference/Operators/this)に従って動作することに注意してください。これは次の例で示されています。
+#### HTML
```html
-
-
-```
-
-`this` は `logID()` 内においては、グローバルオブジェクト {{domxref("Window")}} (または[厳格モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)の場合は `undefined` になります。
-
-#### bind() を使用した this の指定
-
-{{jsxref("Function.prototype.bind()")}} メソッドで、その関数のすべての呼び出しにおいて `this` として使用される値を指定できます。これを使えば、関数がどこから呼び出されるかによって `this` の値が変わってしまうというややこしい問題を簡単に回避できます。ただし、リスナーを後で削除できるように、そのリスナーへの参照を残しておく必要があります。
-
-以下は `bind()` を使った場合と使わない場合の例です。
-
-```js
-const Something = function (element) {
- // |this| is a newly created object
- this.name = "Something Good";
- this.onclick1 = function (event) {
- console.log(this.name); // this は element なので undefined になります
- };
-
- this.onclick2 = function (event) {
- console.log(this.name); // this は新しく生成されたオブジェクトに結び付けられているので、 'Something Good' と出力されます
- };
-
- // bind によって、固定の `this` コンテキストを onclick2 に割り当てる
- this.onclick2 = this.onclick2.bind(this);
-
- element.addEventListener("click", this.onclick1, false);
- element.addEventListener("click", this.onclick2, false); // これが仕掛けです
-};
-const s = new Something(document.body);
-```
-
-もうひとつの解決策は、あらゆるイベントを捕捉する `handleEvent()` という特別な関数を使用することです。
-
-```js
-const Something = function (element) {
- // |this| is a newly created object
- this.name = "Something Good";
- this.handleEvent = function (event) {
- console.log(this.name); // this は新しく生成されたオブジェクトに結び付けられているので、 'Something Good' と出力されます
- switch (event.type) {
- case "click":
- // 処理
- break;
- case "dblclick":
- // 処理
- break;
- }
- };
-
- // この場合のリスナーは this であって this.handleEvent でないことに注意してください
- element.addEventListener("click", this, false);
- element.addEventListener("dblclick", this, false);
+
+
+ But down there it would be dark now, and not the lovely lighted aquarium she
+ imagined it to be during the daylight hours, eddying with schools of tiny,
+ delicate animals floating and dancing slowly to their own serene currents
+ and creating the look of a living painting. That was wrong, in any case. The
+ ocean was different from an aquarium, which was an artificial environment.
+ The ocean was a world. And a world is not art. Dorothy thought about the
+ living things that moved in that world: large, ruthless and hungry. Like us
+ up here.
+
+
- // リスナーは適切に削除できます
- element.removeEventListener("click", this, false);
- element.removeEventListener("dblclick", this, false);
-};
-const s = new Something(document.body);
+
+ パッシブ
+
```
-_this_ の参照を扱うためのもう一つの方法は、 `EventListener` にアクセスする必要のあるフィールドを含むオブジェクトのメソッドを呼び出す関数を渡すことです。
-
-```js
-class SomeClass {
- constructor() {
- this.name = "Something Good";
- }
-
- register() {
- const that = this;
- window.addEventListener("keydown", (e) => {
- that.someMethod(e);
- });
- }
-
- someMethod(e) {
- console.log(this.name);
- switch (e.keyCode) {
- case 5:
- // ここにいくらかのコード...
- break;
- case 6:
- // ここにいくらかのコード...
- break;
- }
- }
+```css hidden
+#container {
+ width: 150px;
+ height: 200px;
+ overflow: scroll;
+ margin: 2rem 0;
+ padding: 0.4rem;
+ border: 1px solid black;
}
-
-const myObject = new SomeClass();
-myObject.register();
```
-### イベントリスナーのデータの出し入れ
-
-イベントリスナーは離島のようなもので、データを渡すのも、ましてや実行後にデータを取り戻すのも至難の業だと思われるかもしれません。
-イベントリスナーは引数を、[イベントオブジェクト](/ja/docs/Learn/JavaScript/Building_blocks/Events#event_objects) 1 つしかとらず、これは自動的にリスナーに渡され、返値は無視されます。
-では、どのようにデータを取り込んだり、戻したりすればよいのでしょうか。これには良い方法がいくつかあります。
-
-#### "this" を使用したイベントリスナーへのデータの入力
-
-[前述](#bind_を使用した_this_の指定)の通り、 `Function.prototype.bind()` を使用すると `this` 参照変数を通じてイベントリスナーに値を渡すことができます。
-
-```js
-const myButton = document.getElementById("my-button-id");
-const someString = "Data";
-
-myButton.addEventListener(
- "click",
- function () {
- console.log(this); // 期待される値: 'Data'
- }.bind(someString),
-);
-```
-
-この方法は、イベントリスナーの中からプログラムでイベントリスナーがどの HTML 要素で発生したかを知る必要がない場合に適しています。これを行う主な利点は、実際に引数リストにデータを渡す場合とほぼ同じ方法でイベントリスナーがデータを受け取ることです。
-
-#### 外部スコープのプロパティを使用したイベントリスナーへのデータの入力
+#### JavaScript
-外部スコープに（`const`, `let` を付けた）変数宣言が含まれている場合、そのスコープで宣言されたすべての内部関数はその変数にアクセスすることができます（外部関数/内部関数については[こちら](/ja/docs/Glossary/Function#different_types_of_functions)を、変数スコープについては[こちら](/ja/docs/Web/JavaScript/Reference/Statements/var#暗黙のグローバル変数と関数スコープの外部)を参照してください）。したがって、イベントリスナーの外部からデータにアクセスする最も簡単な方法の 1 つは、イベントリスナーが宣言されているスコープにアクセスできるようにすることです。
+このコードは、コンテナーの {{domxref("Element/wheel_event", "wheel")}} イベントにリスナーを追加するもので、既定ではコンテナーをスクロールします。リスナーは長時間実行する処理を実行します。初期状態では、リスナーは `passive` オプションで追加され、チェックボックスがトグル切り替えされるたびに、コードは `passive` オプションをトグル切り替えします。
```js
-const myButton = document.getElementById("my-button-id");
-let someString = "Data";
-
-myButton.addEventListener("click", () => {
- console.log(someString); // 期待される値: 'Data'
-
- someString = "Data Again";
+const passive = document.querySelector("#passive");
+passive.addEventListener("change", (event) => {
+ container.removeEventListener("wheel", wheelHandler);
+ container.addEventListener("wheel", wheelHandler, {
+ passive: passive.checked,
+ once: true,
+ });
});
-console.log(someString); // 期待される値: 'Data' (will never output 'Data Again')
-```
-
-> **メモ:** 内側のスコープは外側のスコープにある `const`, `let` 変数にアクセスすることができますが、イベントリスナーの定義後に、同じ外側のスコープ内でこれらの変数にアクセスできるようになることは期待できません。なぜでしょうか？単純に、イベントリスナーが実行される頃には、イベントリスナーが定義されたスコープは既に実行を終了しているからです。
-
-#### オブジェクトを用いたイベントリスナーのデータの出し入れ
-
-JavaScript のほとんどの関数とは異なり、オブジェクトはそのオブジェクトを参照する変数がメモリー内に存在する限り、メモリー内に保持されます。それに加えて、オブジェクトはプロパティを持つことができ、参照によって渡すことができることから、スコープ間でデータを共有するための有力な候補となります。これについて調べてみましょう。
-
-> **メモ:** JavaScript の関数は厳密にはオブジェクトです。 (そのため、プロパティを持つことができ、メモリー内に永続的に存在する変数に代入されていれば、実行終了後もメモリー内に保持されます。)
-
-オブジェクトを参照する変数がメモリーに存在する限り、オブジェクトのプロパティを使用してメモリーにデータを格納することができるので、実際にそれらを使用して、イベントリスナーにデータを渡し、イベントハンドラーが実行された後でデータに変更があった場合には、それを戻すことができます。この例を考えてみましょう。
-
-```js
-const myButton = document.getElementById("my-button-id");
-const someObject = { aProperty: "Data" };
-
-myButton.addEventListener("click", () => {
- console.log(someObject.aProperty); // 期待される値: 'Data'
-
- someObject.aProperty = "Data Again"; // 値を変更
+const container = document.querySelector("#container");
+container.addEventListener("wheel", wheelHandler, {
+ passive: true,
+ once: true,
});
-setInterval(() => {
- if (someObject.aProperty === "Data Again") {
- console.log("Data Again: True");
- someObject.aProperty = "Data"; // 次のイベントの実行を待つために値を初期化
+function wheelHandler() {
+ function isPrime(n) {
+ for (let c = 2; c <= Math.sqrt(n); ++c) {
+ if (n % c === 0) {
+ return false;
+ }
+ }
+ return true;
}
-}, 5000);
-```
-
-この例では、イベントリスナーとインターバル関数の両方が定義されているスコープは、 `someObject.aProperty` の元の値が変更される前に実行を終了していたとしても、イベントリスナーとインターバル関数の両方で `someObject` がメモリー内に (*参照*によって) 持続するため、両方とも同じデータにアクセスできます (つまり、一方がデータを変更したときに、もう一方がその変更に対応できます)。
-
-> **メモ:** オブジェクトは参照で変数に格納されます。つまり、実際のデータのメモリーの場所だけが変数に格納されます。とりわけ、これはオブジェクトを「格納」する変数が、実際に同じオブジェクト参照が代入 (「格納」) されている他の変数に影響を与えることができるということです。 2 つの変数が同じオブジェクトを参照している場合 (例えば、 `let a = b = {aProperty: 'Yeah'};`)、どちらかから変数のデータを変更すると、もう一方の変数に影響を与えます。
-
-> **メモ:** オブジェクトは参照によって変数に格納されているので、関数の実行を停止した後も、関数からオブジェクトを返す (データを失わないようにメモリーに保存しておく) ことができます。
-
-### メモリーの問題
-
-```js
-const elts = document.getElementsByTagName("*");
-// ケース 1
-for (const elt of elts) {
- elt.addEventListener(
- "click",
- (e) => {
- // 何かを行う
- },
- false,
- );
-}
+ const quota = 1000000;
+ const primes = [];
+ const maximum = 1000000;
-// ケース 2
-function processEvent(e) {
- // 何かを行う
-}
+ while (primes.length < quota) {
+ const candidate = Math.floor(Math.random() * (maximum + 1));
+ if (isPrime(candidate)) {
+ primes.push(candidate);
+ }
+ }
-for (const elt of elts) {
- elt.addEventListener("click", processEvent, false);
+ console.log(primes);
}
```
-上記の 1 つ目のケースでは、ループの繰り返しごとに新しい（無名の）ハンドラー関数が作成されます。一方、 2 つ目のケースでは、以前に宣言した同じ関数がイベントハンドラーとして使用され、作成されるハンドラー関数が 1 つであるため、メモリー消費量が少なくなります。さらに、最初のケースでは、無名関数への参照が保持されないため、 {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} を呼び出すことができません（ここでは、ループが生成する可能性がある複数の無名関数への参照が保持されません）。2 番目のケースでは、`processEvent` が関数の参照なので、`myElement.removeEventListener("click", processEvent, false)` を実行することが可能です。
-
-実は、メモリー消費に関しては、関数参照を保持しないことが本当の問題ではなく、むしろ、*静的*な関数参照を保持しないことが問題なのです。
-
-### パッシブリスナーによるスクロールの性能改善
-
-以下の例にあるように、`passive` の値を `true` に設定すると、パフォーマンスを最適化し、アプリケーションのパフォーマンスが劇的に向上する可能性があります。
-
-```js
-/* 機能検出 */
-let passiveIfSupported = false;
-
-try {
- window.addEventListener(
- "test",
- null,
- Object.defineProperty({}, "passive", {
- get() {
- passiveIfSupported = { passive: true };
- },
- }),
- );
-} catch (err) {}
-
-window.addEventListener(
- "scroll",
- (event) => {
- /* 何かを行う */
- // event.preventDefault(); は使用できない
- },
- passiveIfSupported,
-);
-```
-
-`addEventListener()` の仕様では、`passive` オプションの既定値は常に `false` です。しかし、これはタッチイベントやホイールイベントを扱うイベントリスナーがスクロールを処理しようとしている間にブラウザーのメインスレッドをブロックする可能性をもたらすため、スクロール処理中の性能が大幅に低下する結果になる可能性があります。
-
-この問題を防ぐため、Safari 以外のブラウザーでは、文書レベルのノードである {{domxref("Window")}}、{{domxref("Document")}}、{{domxref("Document.body")}} のに対する {{domxref("Element/wheel_event", "wheel")}}、{{domxref("Element/mousewheel_event", "mousewheel")}}、{{domxref("Element/touchstart_event", "touchstart")}}、{{domxref("Element/touchmove_event", "touchmove")}} イベントの `passive` オプションの既定値が `true` に変更されました。これにより、イベントリスナーが[イベントをキャンセルする](/ja/docs/Web/API/Event/preventDefault)ことができなくなるため、ユーザーがスクロールしている間、ページレンダリングをブロックすることがなくなります。
-
-> **メモ:** この変更された動作を実装しているブラウザー（およびそれらのブラウザーのバージョン）を知りたい場合は、下記の互換性一覧表を参照してください。
-
-そのため、その動作を上書きして、すべてのブラウザーで `passive` オプションが `false` になるようにしたい場合は、（既定値に頼らず）明示的にオプションを `false` に設定する必要があります。
+#### 結果
-基本的な {{domxref("Element/scroll_event", "scroll")}} イベントの `passive` の値を気にする必要はありません。
-もともとキャンセル不可であるため、イベントリスナーはいずれにせよページのレンダリングをブロックすることはありません。
+効果は次の通りです。
-### 古いブラウザー
+- 初期状態では、リスナーはパッシブであるため、ホイールでコンテナーをスクロールしようとするとすぐにスクロールします。
+- 「パッシブ」のチェックを外して、ホイールを使用してコンテナーをスクロールしようとすると、コンテナーがスクロールするまでに顕著な遅延があります。
-`addEventListener()` の `options` 引数に対応していない古いブラウザーでは、正しく[機能検出](#オプションの対応の安全な検出)をせずに使おうとすると、 `useCapture` 引数が使用できないことがあります。
+{{EmbedLiveSample("Improving scroll performance using passive listeners", 100, 300)}}
## 仕様書
diff --git a/files/ja/web/api/eventtarget/dispatchevent/index.md b/files/ja/web/api/eventtarget/dispatchevent/index.md
index d104e41b3e4d63..83b1af6c98a056 100644
--- a/files/ja/web/api/eventtarget/dispatchevent/index.md
+++ b/files/ja/web/api/eventtarget/dispatchevent/index.md
@@ -1,19 +1,20 @@
---
title: "EventTarget: dispatchEvent() メソッド"
+short-title: dispatchEvent()
slug: Web/API/EventTarget/dispatchEvent
l10n:
- sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
+ sourceCommit: 8ac73df2fbe2c88d8649fcb006dcde098616c723
---
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
-**`dispatchEvent()`** は {{domxref("EventTarget")}} のメソッドで、 {{domxref("Event")}} をそのオブジェクトへ送り、関連する[イベントリスナー](/ja/docs/Web/API/EventTarget/addEventListener)を（同期的に）適切に起動させます。通常のイベント処理ルール（キャプチャとオプションのバブリングフェーズを含む）は `dispatchEvent()` で手動で配信されたイベントにも適用されます。
+**`dispatchEvent()`** は {{domxref("EventTarget")}} のメソッドで、 {{domxref("Event")}} をそのオブジェクトへ送り、関連するイベントリスナーを（同期的に）適切に起動させます。通常のイベント処理ルール（キャプチャとオプションのバブリングフェーズを含む）は `dispatchEvent()` で手動で配信されたイベントにも適用されます。
`dispatchEvent()` の呼び出しは、イベントを発行させるための最後のステップです。イベントは既に {{domxref("Event/Event", "Event()")}} コンストラクターを使って作成され、初期化されているはずです。
> **メモ:** このメソッドを呼び出すとき、 {{domxref("Event.target")}} プロパティは現在の `EventTarget` に初期化されます。
-「ネイティブ」イベントがブラウザーによって発生し、[イベントループ](/ja/docs/Web/JavaScript/Event_loop)を介して非同期にイベントハンドラーを呼び出すのとは異なり、 `dispatchEvent()` はイベントハンドラーを*同期的に*呼び出します。適用可能なすべてのイベントハンドラが呼び出され、 `dispatchEvent()` から戻る前に返されます。
+「ネイティブ」イベントがブラウザーによって発生し、[イベントループ](/ja/docs/Web/JavaScript/Event_loop)を介して非同期にイベントハンドラーを呼び出すのとは異なり、 `dispatchEvent()` はイベントハンドラーを*同期的に*呼び出します。適用可能なすべてのイベントハンドラーが呼び出され、 `dispatchEvent()` から戻る前に返されます。
## 構文
diff --git a/files/ja/web/api/eventtarget/eventtarget/index.md b/files/ja/web/api/eventtarget/eventtarget/index.md
index b5c6cd724177b0..19db53f3e038b7 100644
--- a/files/ja/web/api/eventtarget/eventtarget/index.md
+++ b/files/ja/web/api/eventtarget/eventtarget/index.md
@@ -1,11 +1,12 @@
---
title: "EventTarget: EventTarget() コンストラクター"
+short-title: EventTarget()
slug: Web/API/EventTarget/EventTarget
l10n:
- sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
+ sourceCommit: 15f0b5552bc9c2ea1f32b0cd5ee840a7d43c887e
---
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
**`EventTarget()`** コンストラクターは、新しい {{domxref("EventTarget")}} オブジェクトのインスタンスを作成します。
@@ -27,29 +28,63 @@ new EventTarget()
## 例
+### カウンターの実装
+
+この例では、 `increment()` メソッドと `decrement()` メソッドを持つ `Counter` クラスを実装します。これらのメソッドが呼び出されると、カスタムイベント `"valuechange"` が発生します。
+
+#### HTML
+
+```html
+
-
+
0
+
+
+```
+
+#### JavaScript
+
```js
-class MyEventTarget extends EventTarget {
- constructor(mySecret) {
+class Counter extends EventTarget {
+ constructor(initialValue = 0) {
super();
- this._secret = mySecret;
+ this.value = initialValue;
+ }
+
+ #emitChangeEvent() {
+ this.dispatchEvent(new CustomEvent("valuechange", { detail: this.value }));
}
- get secret() {
- return this._secret;
+ increment() {
+ this.value++;
+ this.#emitChangeEvent();
+ }
+
+ decrement() {
+ this.value--;
+ this.#emitChangeEvent();
}
}
-let myEventTarget = new MyEventTarget(5);
-let value = myEventTarget.secret; // === 5
-myEventTarget.addEventListener("foo", (e) => {
- myEventTarget._secret = e.detail;
+const initialValue = 0;
+const counter = new Counter(initialValue);
+document.querySelector("#currentValue").innerText = initialValue;
+
+counter.addEventListener("valuechange", (event) => {
+ document.querySelector("#currentValue").innerText = event.detail;
+});
+
+document.querySelector("#inc").addEventListener("click", () => {
+ counter.increment();
});
-let event = new CustomEvent("foo", { detail: 7 });
-myEventTarget.dispatchEvent(event);
-let newValue = myEventTarget.secret; // === 7
+document.querySelector("#dec").addEventListener("click", () => {
+ counter.decrement();
+});
```
+#### 結果
+
+{{EmbedLiveSample("Implementing a counter")}}
+
## 仕様書
{{Specifications}}
diff --git a/files/ja/web/api/eventtarget/index.md b/files/ja/web/api/eventtarget/index.md
index 0a47d008e7c2d5..e2ed2bb930c450 100644
--- a/files/ja/web/api/eventtarget/index.md
+++ b/files/ja/web/api/eventtarget/index.md
@@ -2,15 +2,15 @@
title: EventTarget
slug: Web/API/EventTarget
l10n:
- sourceCommit: 049632675ccb83fe2e257c43071d366d3f80ee2b
+ sourceCommit: 15f0b5552bc9c2ea1f32b0cd5ee840a7d43c887e
---
-{{ApiRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
**`EventTarget`** インターフェイスは、イベントを受け取ることや、リスナーを持つことができるオブジェクトが実装します。
言い換えると、イベントのターゲットはすべて、このインターフェイスに関する 3 つのメソッドを実装しています。
-{{domxref("Element")}} とその子、{{domxref("Document")}}、{{domxref("Window")}} は、最も一般的なイベントターゲットですが、他のオブジェクトも、例えば {{domxref("XMLHttpRequest")}}、{{domxref("AudioNode")}}、{{domxref("AudioContext")}} などもイベントターゲットになります。
+{{domxref("Element")}} とその子、{{domxref("Document")}}、{{domxref("Window")}} は、最も一般的なイベントターゲットですが、他のオブジェクト、例えば {{domxref("IDBRequest")}}、{{domxref("AudioNode")}}、{{domxref("AudioContext")}} などもイベントターゲットになります。
多くのイベントターゲット (要素、文書、ウィンドウを含む) は、[イベントハンドラー](/ja/docs/Web/Events/Event_handlers)を設定するのに `onイベント名` プロパティや属性を使用することもできます。
diff --git a/files/ja/web/api/eventtarget/removeeventlistener/index.md b/files/ja/web/api/eventtarget/removeeventlistener/index.md
index 0e0006df4e1d66..50afc4360dd00a 100644
--- a/files/ja/web/api/eventtarget/removeeventlistener/index.md
+++ b/files/ja/web/api/eventtarget/removeeventlistener/index.md
@@ -1,11 +1,12 @@
---
title: "EventTarget: removeEventListener() メソッド"
+short-title: removeEventListener()
slug: Web/API/EventTarget/removeEventListener
l10n:
- sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
+ sourceCommit: 15f0b5552bc9c2ea1f32b0cd5ee840a7d43c887e
---
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
**`removeEventListener()`** は {{domxref("EventTarget")}} インターフェイスのメソッドで、以前に {{domxref("EventTarget.addEventListener()")}} で登録されたイベントリスナーを取り外します。
取り外されるイベントリスナーはイベントの型、イベントリスナー関数そのもの、照合プロセスに影響を与えるさまざまな任意のオプションを使用して識別します。
@@ -90,7 +91,7 @@ element.removeEventListener("mousedown", handleMouseDown, false); // 成功
element.removeEventListener("mousedown", handleMouseDown, true); // 失敗
```
-この点については、いくつかのブラウザのリリースで一貫性がないことに注意してください。特に理由がない限り、`addEventListener()` の呼び出しで使用したのと同じ値を `removeEventListener()` の呼び出しでも使用することが賢明でしょう。
+この点については、いくつかのブラウザーのリリースで一貫性がないことに注意してください。特に理由がない限り、`addEventListener()` の呼び出しで使用したのと同じ値を `removeEventListener()` の呼び出しでも使用することが賢明でしょう。
## 例
diff --git a/files/ja/web/api/fetch_api/index.md b/files/ja/web/api/fetch_api/index.md
index 13e95b5045d2d8..cf25fa86bf99f7 100644
--- a/files/ja/web/api/fetch_api/index.md
+++ b/files/ja/web/api/fetch_api/index.md
@@ -2,22 +2,18 @@
title: フェッチ API
slug: Web/API/Fetch_API
l10n:
- sourceCommit: 1511e914c6b1ce6f88056bfefd48a6aa585cebce
+ sourceCommit: f2426e77139097d22e45eb44c6b7849d86fb6462
---
-{{DefaultAPISidebar("Fetch API")}}
+{{DefaultAPISidebar("Fetch API")}} {{AvailableInWorkers}}
-フェッチ API は（ネットワーク越しの通信を含む）リソース取得のためのインターフェイスを提供しています。 {{DOMxRef("XMLHttpRequest")}} と似たものではありますが、より強力で柔軟な操作が可能です。
+フェッチ API は（ネットワーク越しの通信を含む）リソース取得のためのインターフェイスを提供しています。これは {{DOMxRef("XMLHttpRequest")}} をより強力かつ柔軟に置き換えたものです。
-{{AvailableInWorkers}}
+## 概念と使用方法
-## 概念と利用方法
+フェッチ API は {{DOMxRef("Request")}} と {{DOMxRef("Response")}} オブジェクト（他にもネットワークリクエストに関係すること）と、CORS や HTTP の Origin ヘッダーの意味づけのような関連の概念を使用します。
-フェッチでは、 {{DOMxRef("Request")}} および {{DOMxRef("Response")}} オブジェクト（およびネットワークリクエストに関わるその他のもの）の汎用的な定義が提供されています。これにより、サービスワーカー、キャッシュ API、リクエストやレスポンスを処理または変更するその他の類似のもの、またはプログラム的にレスポンスを生成する (つまり、コンピュータプログラムまたはパーソナルプログラミング命令を使用する) 必要があるあらゆる種類の利用法など、将来的に必要とされるあらゆる場所で使用できるようになります。
-
-また CORS や HTTP の Origin ヘッダーの振る舞いといった関連した概念についても定義しています。この定義は、現行の分散している個別の定義を置き換えるものです。
-
-リソースを取得するためのリクエストは、 {{DOMxRef("fetch()")}} メソッドを呼ぶことで作成できます。このメソッドは {{DOMxRef("Window")}} や {{DOMxRef("WorkerGlobalScope")}} といったインターフェイスによって実装されています。その結果、リソース取得を必要とする様々な場面での利用が可能です。
+リクエストを行い、リソースを読み取るには、{{DOMxRef("Window.fetch", "fetch()")}} メソッドを使用します。これは {{DOMxRef("Window")}} と {{DOMxRef("WorkerGlobalScope", "Worker")}} コンテキストの両方でグローバルメソッドです。このため、リソースを取得するほとんどのコンテキストで利用できます。
`fetch()` メソッドは必須の引数を 1 つ取り、取得したいリソースのパスを指定します。これは {{JSxRef("Promise")}} を返します。これはサーバーがヘッダーで返答するとすぐに、**サーバーレスポンスが HTTP エラーステータスであったとしても**、 {{DOMxRef("Response")}} に解決します。第 2 引数は任意で、 `init` オプションオブジェクトを渡すことができます（{{DOMxRef("Request")}} を参照してください）。
@@ -25,25 +21,11 @@ l10n:
{{DOMxRef("Request.Request", "Request()")}} および {{DOMxRef("Response.Response", "Response()")}} を利用することで、リクエストとレスポンスを直接作成できます。ただしこれらのオブジェクトは、{{DOMxRef("FetchEvent.respondWith()")}} のような他の API 呼び出しの結果として取得されるべきもので、直接作成しないほうが良いでしょう。
-### jQuery との違い
-
-`fetch` は主に 3 つの点で `jQuery.ajax()` と異なります。
-
-- `fetch()` から返されたプロミスは、レスポンスが HTTP `404` や `500` であっても、 **HTTP エラーステータスで拒否されません**。代わりに、正常に解決され (`ok` ステータスが `false` に設定されます)、ネットワーク障害が発生した場合、または要求の完了が妨げられた場合にのみ拒否されます。
-- `fetch()` は _credentials_ の[初期化オプション](/ja/docs/Web/API/fetch#引数)を（`include` に）設定しない限り、**オリジンをまたいだ Cookie を送信しません**。
-
- - [2018 年 4 月](https://github.com/whatwg/fetch/pull/585)、に仕様の既定の認証情報ポリシーが `'same-origin'` に変更され、古いネイティブの fetch が Firefox 61.0b13, Safari 12, Chrome 68 のバージョンのブラウザーで更新されました。
- - これらのブラウザーより古いバージョンをターゲットにしている場合は、 Cookie/ユーザーログイン状態の影響を受ける可能性のあるすべての API リクエストに `'same-origin'` を[初期化オプション](/ja/docs/Web/API/fetch#引数) に設定した認証情報を必ず含めてください。
-
-> **メモ:** フェッチ API の詳しい利用方法は [フェッチの使用](/ja/docs/Web/API/Fetch_API/Using_Fetch)を参照してください。また [フェッチの基本概念](/ja/docs/Web/API/Fetch_API/Basic_concepts)では、フェッチ API の基本概念が解説されています。
-
-### フェッチの中止
-
-未完了の `fetch()` （または `XMLHttpRequest`）の操作を中止するには、 {{DOMxRef("AbortController")}} および {{DOMxRef("AbortSignal")}} インターフェイスを使用してください。
+フェッチ API の詳しい利用方法は [フェッチの使用](/ja/docs/Web/API/Fetch_API/Using_Fetch)を参照してください。
## Fetch インターフェイス
-- {{DOMxRef("fetch()")}}
+- {{DOMxRef("Window.fetch", "fetch()")}}
- : `fetch()` メソッドはリソース取得のために使用されます。
- {{DOMxRef("Headers")}}
- : リクエストとレスポンスのヘッダーを表現しています。ヘッダー情報への問い合わせや、結果による振る舞いの選択が可能です。
@@ -67,4 +49,3 @@ l10n:
- [HTTP アクセス制御 (CORS)](/ja/docs/Web/HTTP/CORS)
- [HTTP](/ja/docs/Web/HTTP)
- [フェッチのポリフィル](https://github.com/github/fetch)
-- [フェッチの基本概念](/ja/docs/Web/API/Fetch_API/Basic_concepts)
diff --git a/files/ja/web/api/fetch_api/using_fetch/index.md b/files/ja/web/api/fetch_api/using_fetch/index.md
index b4cca6a909246e..8699638252c2a1 100644
--- a/files/ja/web/api/fetch_api/using_fetch/index.md
+++ b/files/ja/web/api/fetch_api/using_fetch/index.md
@@ -2,491 +2,598 @@
title: フェッチ API の使用
slug: Web/API/Fetch_API/Using_Fetch
l10n:
- sourceCommit: aae16b81e18d13dd006d418983558578563e9746
+ sourceCommit: c0e43030605b6f12bc4d550c0d5b8bf8a633eff3
---
{{DefaultAPISidebar("Fetch API")}}
-[フェッチ API](/ja/docs/Web/API/Fetch_API) は、リクエストやレスポンスといった[プロトコル](/ja/docs/Glossary/Protocol)を操作する要素にアクセスするための JavaScript インターフェイスです。グローバルの {{domxref("fetch()")}} メソッドも提供しており、簡単で論理的な方法で、非同期にネットワーク越しでリソースを取得することができます。
+[フェッチ API](/ja/docs/Web/API/Fetch_API) は、HTTP リクエストを行い、レスポンスを処理するための JavaScript インターフェイスを提供します。
-コールバックベースの API である {{domxref("XMLHttpRequest")}} とは異なり、Fetch は Promise ベースであり、[サービスワーカー](/ja/docs/Web/API/Service_Worker_API) で簡単に使用できる優れた代替手段を提供します。Fetch は、[CORS](/ja/docs/Web/HTTP/CORS) やその他の HTTP 拡張機能などの高度な HTTP 概念も統合します。
+フェッチは {{domxref("XMLHttpRequest")}} の現代の置き換えです。コールバックを使用する `XMLHttpRequest` とは異なり、フェッチはプロミスベースで、[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)や[オリジン間リソース共有 (CORS)](/ja/docs/Web/HTTP/CORS) のような現代のウェブの機能と統合されています。
-基本的なフェッチリクエストは、以下のコードを見てください。
+フェッチ API では、{{domxref("Window/fetch", "fetch()")}} を呼び出してリクエストを行います。これは {{domxref("Window", "ウィンドウ", "", "nocode")}}と{{domxref("WorkerGlobalScope", "ワーカー", "", "nocode")}}の両方のコンテキストでグローバル関数として利用できます。このコンテキストには {{domxref("Request")}} オブジェクトか、フェッチする URL を格納した文字列、およびリクエストを構成するためのオプション引数を渡します。
+
+`fetch()` 関数は {{jsxref("Promise")}} を返します。このプロミスはサーバーのレスポンスを表す {{domxref("Response")}} オブジェクトで履行されます。レスポンスに対して適切なメソッドを呼び出すと、リクエストのステータスを調べたり、レスポンス本体をテキストや JSON など様々な形式で取り出すことができます。
+
+以下は `fetch()` を使用してサーバーから JSON データを取得する最小限の関数です。
```js
-async function logMovies() {
- const response = await fetch("http://example.com/movies.json");
- const movies = await response.json();
- console.log(movies);
+async function getData() {
+ const url = "https://example.org/products.json";
+ try {
+ const response = await fetch(url);
+ if (!response.ok) {
+ throw new Error(`レスポンスステータス: ${response.status}`);
+ }
+
+ const json = await response.json();
+ console.log(json);
+ } catch (error) {
+ console.error(error.message);
+ }
}
```
-これはネットワーク越しに JSON ファイルを取得してパースし、コンソールにデータを出力するスクリプトです。 `fetch()` の最も簡単な使い方は 1 つの引数 — fetch で取得したいリソースへのパス — のみをとり、 {{domxref("Response")}} オブジェクトで解決するプロミスを返します。
+URL を格納した文字列を宣言し、`fetch()` を呼び出して、余計なオプションを付けずに URL を渡します。
-{{domxref("Response")}} は、実際の JSON レスポンス本体を直接持っているのではなく、 HTTP レスポンス全体を表現するものです。 {{domxref("Response")}} オブジェクトから JSON の本体の内容を抽出するには、 {{domxref("Response.json()", "json()")}} メソッドを使用します。これはレスポンス本体のテキストを JSON として解釈した結果で解決する第 2 のプロミスを返します。
+`fetch()` 関数は何かエラーがあるとプロミスを拒否しますが、サーバーが {{httpstatus("404")}} のようなエラーステータスで応答した場合は拒否しません。したがって、レスポンスのステータスも調べて、OK でない場合はエラーを throw します。
-> **メモ:** 本体の内容が他の形式である場合に展開する同様の方法は、[本体](#本体)の節を参照してください。
+そうでない場合は、`Response` の {{domxref("Response.json()", "json()")}} メソッドを呼び出して、レスポンス本体のコンテンツを {{glossary("JSON")}} として取得し、その値の一つをログ出力します。`fetch()` 自体と同様に、 `json()` はレスポンス本体のコンテンツにアクセスする他のすべてのメソッドと同様に非同期であることに注意してください。
-フェッチリクエストは、受け取るリソースからの指示ではなく、[コンテンツセキュリティポリシー](/ja/docs/Web/HTTP/Headers/Content-Security-Policy)の `connect-src` ディレクティブによって制御されます。
+このページの残りの部分では、このプロセスのさまざまな段階を詳しく見ていきます。
-## リクエストオプションの適用
+## リクエストを行う
-`fetch()` メソッドには 2 つ目の引数を適用することができ、 `init` オブジェクトで様々な種類の設定を制御することができます。
+リクエストを行うには、 `fetch()` を呼び出して、次のものを渡します。
-すべての設定可能なオプションや詳しい説明については、 {{domxref("fetch()")}} を参照してください。
+1. フェッチするリソースの定義。これは以下のいずれかです。
+ - URL を格納した文字列。
+ - {{domxref("URL")}} のインスタンスなどのオブジェクト、すなわち URL を格納した文字列を生成する{{glossary("stringifier", "文字列化子")}}のあるもの。
+ - {{domxref("Request")}} のインスタンス。
+2. オプションとして、リクエストを構成するためのオプションを含むオブジェクト。
-```js
-// POST メソッドの実装の例
-async function postData(url = "", data = {}) {
- // 既定のオプションには * が付いています
- const response = await fetch(url, {
- method: "POST", // *GET, POST, PUT, DELETE, etc.
- mode: "cors", // no-cors, *cors, same-origin
- cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
- credentials: "same-origin", // include, *same-origin, omit
- headers: {
- "Content-Type": "application/json",
- // 'Content-Type': 'application/x-www-form-urlencoded',
- },
- redirect: "follow", // manual, *follow, error
- referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
- body: JSON.stringify(data), // 本体のデータ型は "Content-Type" ヘッダーと一致させる必要があります
- });
- return response.json(); // JSON のレスポンスをネイティブの JavaScript オブジェクトに解釈
-}
+この節では、よく使用するオプションを見ていきます。指定されるすべてのオプションについては、[`fetch()`](/ja/docs/Web/API/Window/fetch) リファレンスページを参照してください。
+
+### メソッドの設定
-postData("https://example.com/answer", { answer: 42 }).then((data) => {
- console.log(data); // `data.json()` の呼び出しで解釈された JSON データ
+既定では、`fetch()` は {{httpmethod("GET")}} リクエストを行いますが、`method` オプションを使用すれば、別の[リクエストメソッド](/ja/docs/Web/HTTP/Methods)を使用することができます。
+
+```js
+const response = await fetch("https://example.org/post", {
+ method: "POST",
+ // ...
});
```
-なお、 `mode: "no-cors"` はリクエスト中の限られたヘッダーにしか許可されていません。
+`mode` オプションが `no-cors` に設定されている場合、 `method` は `GET`、`POST`、`HEAD` のいずれかでなければなりません。
-- `Accept`
-- `Accept-Language`
-- `Content-Language`
-- `Content-Type` のうち、値が `application/x-www-form-urlencoded`, `multipart/form-data`, `text/plain` のいずれかのもの
+### 本体の設定
-## fetch の中止
+リクエスト本体はリクエストの内容です。クライアントがサーバーに送るものです。`GET` リクエストでは本体を含めることはできませんが、{{httpmethod("POST")}} や {{httpmethod("PUT")}} リクエストのようにサーバーにコンテンツを送信するリクエストでは有益です。例えば、サーバーにファイルをアップロードしたい場合、`POST` リクエストを行い、リクエスト本体にファイルを含めることができます。
-未完了の `fetch()` 操作を中止するには、{{DOMxRef("AbortController")}} および {{DOMxRef("AbortSignal")}} インターフェイスを使用します。
+リクエスト本体を設定するには、`body` オプションとして渡します。
```js
-const controller = new AbortController();
-const signal = controller.signal;
-const url = "video.mp4";
+const response = await fetch("https://example.org/post", {
+ body: JSON.stringify({ username: "example" }),
+ // ...
+});
+```
-const downloadBtn = document.querySelector("#download");
-const abortBtn = document.querySelector("#abort");
+本体は、以下いずれかの型のインスタンスとして指定できます。
-downloadBtn.addEventListener("click", async () => {
- try {
- const response = await fetch(url, { signal });
- console.log("Download complete", response);
- } catch (error) {
- console.error(`Download error: ${error.message}`);
- }
+- 文字列
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("TypedArray")}}
+- {{jsxref("DataView")}}
+- {{domxref("Blob")}}
+- {{domxref("File")}}
+- {{domxref("URLSearchParams")}}
+- {{domxref("FormData")}}
+
+レスポンス本体と同様に、リクエスト本体はストリームであり、リクエストを作成するとストリームを読み込むので、リクエストが本体を含む場合、2 回作成することはできないことに注意してください。
+
+```js example-bad
+const request = new Request("https://example.org/post", {
+ method: "POST",
+ body: JSON.stringify({ username: "example" }),
});
-abortBtn.addEventListener("click", () => {
- controller.abort();
- console.log("Download aborted");
+const response1 = await fetch(request);
+console.log(response1.status);
+
+// 例外が発生: "Body has already been consumed."
+const response2 = await fetch(request);
+console.log(response2.status);
+```
+
+その代わりに、リクエストを送信する前に{{domxref("Request.clone()", "複製を作成する", "", "nocode")}}する必要があります。
+
+```js
+const request1 = new Request("https://example.org/post", {
+ method: "POST",
+ body: JSON.stringify({ username: "example" }),
});
+
+const request2 = request1.clone();
+
+const response1 = await fetch(request1);
+console.log(response1.status);
+
+const response2 = await fetch(request2);
+console.log(response2.status);
```
-## 資格情報つきのリクエストの送信
+詳しくは、[ロックされ妨害されたストリーム](#ロックされ妨害されたストリーム)を参照してください。
-ブラウザーに資格情報のついたリクエストを送るようにするには、同一オリジンの場合もオリジン間の呼び出しの場合も、 `credentials: 'include'` を `init` オブジェクトに追加して `fetch()` メソッドに渡してください。
+### ヘッダーの設定
+
+リクエストヘッダーは、リクエストに関する情報をサーバーに与えます。例えば {{httpheader("Content-Type")}} ヘッダーは、リクエスト本体の形式をサーバーに指示します。多くのヘッダーはブラウザーが自動的に設定し、スクリプトでは設定できません。これらは{{glossary("Forbidden header name", "禁止ヘッダー名")}}と呼ばれています。
+
+リクエストヘッダーを設定するには、`headers` オプションに割り当ててください。
+
+ここには `ヘッダー名: ヘッダー値` の形でプロパティを格納したオブジェクトリテラルを渡すことができます。
```js
-fetch("https://example.com", {
- credentials: "include",
+const response = await fetch("https://example.org/post", {
+ headers: {
+ "Content-Type": "application/json",
+ },
+ // .,.
});
```
-> **メモ:** `Access-Control-Allow-Origin` は `credentials: 'include'` を含むリクエストでは、ワイルドカードを使用することを禁止しています。このような場合、正確なオリジンを提供する必要があります。 CORS unblocker 拡張機能を使用している場合でも、リクエストは失敗します。
+あるいは、{{domxref("Headers")}} オブジェクトを構築し、{{domxref("Headers.append()")}} を使用してそのオブジェクトにヘッダーを追加し、`Headers` オブジェクトを `headers` オプションに割り当てることもできます。
-> **メモ:** この設定に関係なく、ブラウザーはプリフライトリクエストで資格情報を送信しないようにしてください。詳細については、 [CORS 資格情報を含むリクエスト](/ja/docs/Web/HTTP/CORS#資格情報を含むリクエスト)を参照してください。
+```js
+const myHeaders = new Headers();
+myHeaders.append("Content-Type", "application/json");
-リクエスト URL が呼び出しスクリプトと同一オリジンの場合だけ資格情報を送りたい場合、 `credentials: 'same-origin'` を追加します。
+const response = await fetch("https://example.org/post", {
+ headers: myHeaders,
+ // .,.
+});
+```
+
+`mode` オプションが `no-cors` に設定されている場合、{{glossary("CORS-safelisted request header", "CORS セーフリストリクエストヘッダー")}}のみを設定することができます。
+
+### POST リクエストを行う
+
+`method`、`body`、`headers` オプションを組み合わせることで、POST リクエストを作ることができます。
```js
-// オリジン 'https://example.com' で呼び出すスクリプトです。
+const myHeaders = new Headers();
+myHeaders.append("Content-Type", "application/json");
-fetch("https://example.com", {
- credentials: "same-origin",
+const response = await fetch("https://example.org/post", {
+ method: "POST",
+ body: JSON.stringify({ username: "example" }),
+ headers: myHeaders,
});
```
-ブラウザーがリクエストに資格情報を含めないことを保証するには、代わりに `credentials: 'omit'` を使用してください。
+### オリジン間リクエストを行う
+
+オリジン間のリクエストができるかどうかは `mode` オプションの値で決まります。これは `cors`、`no-cors`、`same-origin` の 3 つの値のいずれかを取ります。
+
+- 既定では `mode` は `cors` に設定され、リクエストがオリジンをまたぐものであれば、[オリジン間リソース共有 (CORS)](/ja/docs/Web/HTTP/CORS) の仕組みを使用することを意味しています。これは以下のことを意味しています。
+
+ - リクエストが[単純リクエスト](/ja/docs/Web/HTTP/CORS#simple_requests)の場合、リクエストは常に送信されますが、サーバーは正しい {{httpheader("Access-Control-Allow-Origin")}} ヘッダーで応答しなければなりません。
+ - リクエストが単純なリクエストでない場合、ブラウザーは[プリフライトリクエスト](/ja/docs/Web/HTTP/CORS#preflighted_requests)を送信して、サーバーが CORS を理解し、リクエストを許可しているか調べ、サーバーが適切な CORS ヘッダーでプリフライトリクエストに応答しない限り、実際のリクエストは送信されません。
+
+- `mode` を `same-origin` に設定すると、オリジン間のリクエストを完全に禁止します。
+
+- `mode` を `no-cors` に設定すると、リクエストは単純なリクエストでなりません。これにより、設定するヘッダーは制限され、メソッドは `GET`、`HEAD`、`POST` に制限されます。
+
+### 資格情報を含める
+
+資格情報とはクッキー、{{glossary("TLS")}} クライアント証明書、またはユーザー名とパスワードを格納した認証ヘッダーのことです。
+
+ブラウザーが資格情報を送信するかどうか、および **`Set-Cookie`** レスポンスヘッダーを尊重するかどうかを制御するには、`credentials` オプションを設定します。
+
+- `omit`: リクエストに資格情報を送信したり、レスポンスに資格情報を含めたりしません。
+- `same-origin` （既定値）: 同一オリジンのリクエストに対してのみ資格情報を送信し、含めます。
+- `include`: オリジンをまたいだ場合であっても常に資格情報を含めます。
+
+クッキーの [`SameSite`](/ja/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value) 属性が `Strict` または `Lax` に設定されている場合、`credentials` が `include` に設定されていても、クッキーはサイトをまたいで送信されないことに注意してください。
+
+そのため、たとえ `credentials` が `include` に設定されていても、サーバーはレスポンスに {{httpheader("Access-Control-Allow-Credentials")}} ヘッダーを記載することで、資格情報を含めることに同意しなければなりません。さらに、この状況ではサーバーは {{httpheader("Access-Control-Allow-Origin")}} レスポンスヘッダーでクライアントの元のサーバーを明示的に指定しなければなりません（つまり、`*` は許可されません）。
+
+つまり、`credentials` が `include` に設定されていて、リクエストがオリジンをまたぐ場合、次のようになります。
+
+- リクエストが [単純リクエスト](/ja/docs/Web/HTTP/CORS#単純リクエスト)の場合、リクエストは資格情報と共に送信されますが、サーバーは {{httpheader("Access-Control-Allow-Credentials")}} と {{httpheader("Access-Control-Allow-Origin")}} レスポンスヘッダーを設定しなければなりません。サーバーが正しいヘッダーを設定した場合、資格情報を含むレスポンスが呼び出し元に配送されます。
+
+- リクエストが単純なリクエストでない場合、ブラウザーは資格情報なしの[プリフライトリクエスト](/ja/docs/Web/HTTP/CORS#プリフライトリクエスト)を送信し、サーバーは {{httpheader("Access-Control-Allow-Credentials")}} と {{httpheader("Access-Control-Allow-Origin")}} レスポンスヘッダーを設定しなければ、ブラウザーは呼び出し元にネットワークエラーを返します。サーバーが正しいヘッダーを設定した場合、ブラウザーは資格情報を含む本当のリクエストに続き、資格情報を含む本当のレスポンスを呼び出し元に送ります。
+
+### `Request` オブジェクトの作成
+
+{{domxref("Request.Request()", "Request()")}} コンストラクターは `fetch()` 自体と同じ引数を取ります。これは、オプションを `fetch()` に渡す代わりに、同じオプションを `Request()` コンストラクターに渡して、そのオブジェクトを `fetch()` に渡すことができるということです。
+
+例えば、次のようなコードを用いて `fetch()` にオプションを渡すことで POST リクエストを行うことができます。
```js
-fetch("https://example.com", {
- credentials: "omit",
+const myHeaders = new Headers();
+myHeaders.append("Content-Type", "application/json");
+
+const response = await fetch("https://example.org/post", {
+ method: "POST",
+ body: JSON.stringify({ username: "example" }),
+ headers: myHeaders,
});
```
-## JSON データのアップロード
-
-{{domxref("fetch()")}} を使って JSON エンコードしたデータを POST します。
+しかし、同じ引数を `Request()` コンストラクターに渡すように書き換えることもできます。
```js
-async function postJSON(data) {
- try {
- const response = await fetch("https://example.com/profile", {
- method: "POST", // or 'PUT'
- headers: {
- "Content-Type": "application/json",
- },
- body: JSON.stringify(data),
- });
+const myHeaders = new Headers();
+myHeaders.append("Content-Type", "application/json");
- const result = await response.json();
- console.log("Success:", result);
- } catch (error) {
- console.error("Error:", error);
- }
-}
+const myRequest = new Request("https://example.org/post", {
+ method: "POST",
+ body: JSON.stringify({ username: "example" }),
+ headers: myHeaders,
+});
-const data = { username: "example" };
-postJSON(data);
+const response = await fetch(myRequest);
```
-## ファイルのアップロード
-
-ファイルは HTML の `
` input 要素と、{{domxref("FormData.FormData","FormData()")}} と {{domxref("fetch()")}} を使ってアップロードできます。
+これは、2 つ目の引数を使用してプロパティの一部を変更しながら、 別のリクエストからリクエストを作成することができるということでもあります。
```js
-async function upload(formData) {
+async function post(request) {
try {
- const response = await fetch("https://example.com/profile/avatar", {
- method: "PUT",
- body: formData,
- });
+ const response = await fetch(request);
const result = await response.json();
- console.log("Success:", result);
+ console.log("成功:", result);
} catch (error) {
- console.error("Error:", error);
+ console.error("エラー:", error);
}
}
-const formData = new FormData();
-const fileField = document.querySelector('input[type="file"]');
+const request1 = new Request("https://example.org/post", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({ username: "example1" }),
+});
-formData.append("username", "abc123");
-formData.append("avatar", fileField.files[0]);
+const request2 = new Request(request1, {
+ body: JSON.stringify({ username: "example2" }),
+});
-upload(formData);
+post(request1);
+post(request2);
```
-## 複数のファイルのアップロード
+## リクエストの中止
+
+リクエストを中止できるようにするには、{{domxref("AbortController")}} を作成し、{{domxref("AbortSignal")}} をリクエストの `signal` プロパティに割り当てます。
-ファイルのアップロードは、 HTML の `
` 入力要素と {{domxref("FormData.FormData","FormData()")}} と {{domxref("fetch()")}} を使用して行うことができます。
+リクエストを中止するには、コントローラーの {{domxref("AbortController.abort()", "abort()")}} メソッドを呼び出します。`fetch()` を呼び出すと、例外 `AbortError` が発生してプロミスが拒否されます。
```js
-async function uploadMultiple(formData) {
+const controller = new AbortController();
+
+const fetchButton = document.querySelector("#fetch");
+fetchButton.addEventListener("click", async () => {
try {
- const response = await fetch("https://example.com/posts", {
- method: "POST",
- body: formData,
+ console.log("フェッチを開始");
+ const response = await fetch("https://example.org/get", {
+ signal: controller.signal,
});
- const result = await response.json();
- console.log("Success:", result);
- } catch (error) {
- console.error("Error:", error);
+ console.log(`レスポンス: ${response.status}`);
+ } catch (e) {
+ console.error(`エラー: ${e}`);
}
-}
-
-const photos = document.querySelector('input[type="file"][multiple]');
-const formData = new FormData();
-
-formData.append("title", "My Vegas Vacation");
-
-for (const [i, photo] of Array.from(photos.files).entries()) {
- formData.append(`photos_${i}`, photo);
-}
+});
-uploadMultiple(formData);
+const cancelButton = document.querySelector("#cancel");
+cancelButton.addEventListener("click", () => {
+ controller.abort();
+ console.log("フェッチを中止");
+});
```
-### テキストファイルの 1 行ずつの処理
-
-レスポンスから読み込まれる塊は、行の境界できれいに分割されておらず、文字列ではなく Uint8Array になっています。テキストファイルを読み取って一行ずつ処理したい場合、これらの複雑な処理を行うのはあなた次第です。次の例は、行イテレーターを作成することでこれを行う方法の一つを示しています（簡単にするため、テキストは UTF-8 であると仮定しており、読み取りエラーは処理していません）。
+`fetch()` が履行された後で、レスポンス本体を読み込む前にリクエストが中止された場合、レスポンス本体を読み込もうとすると `AbortError` 例外が発生して拒否されます。
```js
-async function* makeTextFileLineIterator(fileURL) {
- const utf8Decoder = new TextDecoder("utf-8");
- const response = await fetch(fileURL);
- const reader = response.body.getReader();
- let { value: chunk, done: readerDone } = await reader.read();
- chunk = chunk ? utf8Decoder.decode(chunk) : "";
+async function get() {
+ const controller = new AbortController();
+ const request = new Request("https://example.org/get", {
+ signal: controller.signal,
+ });
- const newline = /\r?\n/gm;
- let startIndex = 0;
- let result;
+ const response = await fetch(request);
+ controller.abort();
+ // 次の行では `AbortError` が発生
+ const text = await response.text();
+ console.log(text);
+}
+```
- while (true) {
- const result = newline.exec(chunk);
- if (!result) {
- if (readerDone) break;
- const remainder = chunk.substr(startIndex);
- ({ value: chunk, done: readerDone } = await reader.read());
- chunk = remainder + (chunk ? utf8Decoder.decode(chunk) : "");
- startIndex = newline.lastIndex = 0;
- continue;
- }
- yield chunk.substring(startIndex, result.index);
- startIndex = newline.lastIndex;
- }
+## レスポンスの処理
- if (startIndex < chunk.length) {
- // Last line didn't end in a newline char
- yield chunk.substr(startIndex);
- }
-}
+ブラウザーがサーバーからレスポンスステータスとヘッダーを受け取るとすぐに（潜在的にはレスポンス本体を受け取る前に）、`fetch()` が返すプロミスは {{domxref("Response")}} オブジェクトで履行されます。
-async function run() {
- for await (const line of makeTextFileLineIterator(urlOfFile)) {
- processLine(line);
- }
-}
+### レスポンスステータスのチェック
-run();
-```
+`fetch()` が返すプロミスは、ネットワークエラーや不正なスキームなどのエラーでは拒否されます。しかし、サーバーが {{httpstatus("404")}} のようなエラーで応答した場合、 `fetch()` は `Response` で履行されるので、レスポンス本体を読み込む前にステータスを調べる必要があります。
-## フェッチが成功したかの確認
+{{domxref("Response.status")}} プロパティはステータスコードを数値で指示し、{{domxref("Response.ok")}} プロパティはステータスが [200 番台](/ja/docs/Web/HTTP/Status#成功レスポンス)の場合は `true` を返します。
-{{domxref("fetch()")}} のプロミスは、ネットワークエラーに遭遇したりサーバー側の CORS の設定（通常はアクセス権の問題など）が間違っていたりすると、 {{jsxref("TypeError")}} で拒否されます。例えば、 404 はネットワークエラーにはなりません。 `fetch()` が成功したかどうかを正確に判定するには、プロミスが解決された後で、 {{domxref("Response.ok")}} プロパティが true になっているかを確認してください。次のようなコードになるでしょう。
+よくあるパターンは、`ok` の値を調べて `false` なら例外を発生させることです。
```js
-async function fetchImage() {
+async function getData() {
+ const url = "https://example.org/products.json";
try {
- const response = await fetch("flowers.jpg");
+ const response = await fetch(url);
if (!response.ok) {
- throw new Error("Network response was not OK");
+ throw new Error(`レスポンスステータス: ${response.status}`);
}
- const myBlob = await response.blob();
- myImage.src = URL.createObjectURL(myBlob);
+ // ...
} catch (error) {
- console.error("There has been a problem with your fetch operation:", error);
+ console.error(error.message);
}
}
```
-## 独自のリクエストオブジェクトの提供
+### レスポンス型のチェック
+
+レスポンスには {{domxref("Response.type", "type")}} プロパティがあり、以下のいずれかになります。
+
+- `basic`: リクエストが同一オリジンリクエストだった。
+- `cors`: リクエストがオリジン間の CORS リクエストだった。
+- `opaque`: リクエストは `no-cors` モードで行われた単純なオリジン間リクエストだった。
+- `opaqueredirect`: リクエストで `redirect` オプションが `manual` に設定されており、サーバーが[リダイレクトステータス](/ja/docs/Web/HTTP/Status#リダイレクトメッセージ)を返した。
+
+型はレスポンスに入りうる内容を、以下のように決定します。
+
+- 基本レスポンスは{{glossary("Forbidden response header name", "禁止レスポンスヘッダー名")}}リストにあるレスポンスヘッダーを除外します。
+
+- CORS レスポンスは {{glossary("CORS-safelisted response header", "CORS セーフリストレスポンスヘッダー")}}リストのレスポンスヘッダーのみを含みます。
-`fetch()` の呼び出しに、リクエストしたいリソースへのパスを渡す代わりに、{{domxref("Request.Request","Request()")}} コンストラクターを使用して Request オブジェクトを作成し、 `fetch()` メソッドの引数として渡すこともできます。
+- 不透明なレスポンスと不透明なリダイレクトレスポンスは `status` が `0`、ヘッダーリストが空、そして本体が `null` になります。
+
+### ヘッダーのチェック
+
+リクエストと同じように、レスポンスにも {{domxref("Response.headers", "headers")}} オブジェクトである {{domxref("Headers")}} プロパティがあり、 レスポンス型に基づく除外に従って、スクリプトに公開されるレスポンスヘッダーが格納されます。
+
+この一般的な用途は、本体を読もうとする前にコンテンツ型を調べることです。
```js
-async function fetchImage(request) {
+async function fetchJSON(request) {
try {
const response = await fetch(request);
- if (!response.ok) {
- throw new Error("Network response was not OK");
+ const contentType = response.headers.get("content-type");
+ if (!contentType || !contentType.includes("application/json")) {
+ throw new TypeError("残念、受信したのは JSON ではなかった！");
}
- const myBlob = await response.blob();
- myImage.src = URL.createObjectURL(myBlob);
+ // それ以外の場合、本体を JSON として読み取れる
} catch (error) {
- console.error("Error:", error);
+ console.error("エラー:", error);
}
}
-
-const myHeaders = new Headers();
-
-const myRequest = new Request("flowers.jpg", {
- method: "GET",
- headers: myHeaders,
- mode: "cors",
- cache: "default",
-});
-
-fetchImage(myRequest);
```
-`Request()` は、 `fetch()` メソッドとまったく同じ引数を受け入れます。既存のリクエストオブジェクトを渡して、コピーを作成することもできます。
-
-```js
-const anotherRequest = new Request(myRequest, myInit);
-```
+### レスポンス本体の読み取り
-リクエストとレスポンスの本体は一度しか使用できないので、これはかなり有益なことです。
-このようにコピーを作成することで、リクエストやレスポンスを効果的に使用することができ、使用した場合には `init` オプションを変更することができます。
-コピーは本体が読み込まれる前に作成されなければなりません。
+`Response` インターフェイスには、本体のコンテンツ全体を様々な形式で取得するためのメソッドがあります。
-> **メモ:** {{domxref("Request.clone","clone()")}} メソッドを利用してコピーを生成することもできます。コピーを作成するどちらの方法でも、元のリクエストまたはレスポンスの 本体がすでに読まれている場合は失敗しますが、複製されたレスポンスまたは リクエストの本体を読んでも、元で読み取り済みとマークされることはありません。
+- {{domxref("Response.arrayBuffer()")}}
+- {{domxref("Response.blob()")}}
+- {{domxref("Response.formData()")}}
+- {{domxref("Response.json()")}}
+- {{domxref("Response.text()")}}
-## Headers
+これらはすべて非同期メソッドで、本体のコンテンツで履行される {{jsxref("Promise")}} を返します。
-{{domxref("Headers")}} インターフェイスでは、 {{domxref("Headers.Headers","Headers()")}} コンストラクターを使用して、ヘッダーオブジェクトを作成することができます。ヘッダーオブジェクトは、シンプルな複数の名前と値のマップです。
+この例では、画像を読み取って {{domxref("Blob")}} として読み込み、それを使用してオブジェクト URL を作成することができます。
```js
-const content = "Hello World";
-const myHeaders = new Headers();
-myHeaders.append("Content-Type", "text/plain");
-myHeaders.append("Content-Length", content.length.toString());
-myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
-```
+const image = document.querySelector("img");
-コンストラクターに配列の配列またはオブジェクトリテラルを渡すことで、同じことが実現できます。
+const url = "flowers.jpg";
-```js
-const myHeaders = new Headers({
- "Content-Type": "text/plain",
- "Content-Length": content.length.toString(),
- "X-Custom-Header": "ProcessThisImmediately",
-});
+async function setImage() {
+ try {
+ const response = await fetch(url);
+ if (!response.ok) {
+ throw new Error(`レスポンスステータス: ${response.status}`);
+ }
+ const blob = await response.blob();
+ const objectURL = URL.createObjectURL(blob);
+ image.src = objectURL;
+ } catch (e) {
+ console.error(e);
+ }
+}
```
-ヘッダーの中身を見たり、検索することができます。
-
-```js
-console.log(myHeaders.has("Content-Type")); // true
-console.log(myHeaders.has("Set-Cookie")); // false
-myHeaders.set("Content-Type", "text/html");
-myHeaders.append("X-Custom-Header", "AnotherValue");
+このメソッドでは、レスポンス本体が適切な形式でない場合に例外が発生します。例えば、JSONとして解釈できないレスポンスに対して `json()` を呼び出した場合などです。
-console.log(myHeaders.get("Content-Length")); // 11
-console.log(myHeaders.get("X-Custom-Header")); // ['ProcessThisImmediately', 'AnotherValue']
+### レスポンス本体のストリーミング
-myHeaders.delete("X-Custom-Header");
-console.log(myHeaders.get("X-Custom-Header")); // null
-```
+リクエスト本体とレスポンス本体は、実際には {{domxref("ReadableStream")}} オブジェクトであり、それらを読むときは常にコンテンツをストリーミングしています。これはメモリー効率が良くなります。呼び出し側が `json()` のようなメソッドを使用してレスポンスを取得する前に、 ブラウザーがレスポンス全体をメモリーにバッファリングする必要がないからです。
-いくつかの操作は{{domxref("Service_Worker_API","サービスワーカー", "", 1)}}でしか役立ちませんが、ヘッダーを操作するためのより良い API を提供しています。
+また、これは呼び出し側がコンテンツを受信したときに増加しながら処理できることを意味しています。
-Headers のメソッドはすべて、有効な HTTP ヘッダーではない名前が渡されたときは `TypeError` が発生します。 immutable ガード（[下記参照](#ガード)）がかかっている場合に変更操作を行った場合も `TypeError` が発生します。それ以外の場合は、暗黙に失敗します。例を示します。
+例えば、大きなテキストファイルを読み取って、それを何か方法で処理したり、ユーザーに表示したりする `GET` リクエストを考えてみましょう。
```js
-const myResponse = Response.error();
-try {
- myResponse.headers.set("Origin", "http://mybank.com");
-} catch (e) {
- console.log("銀行のふりをしないで下さい！");
+const url = "https://www.example.org/a-large-file.txt";
+
+async function fetchText(url) {
+ try {
+ const response = await fetch(url);
+ if (!response.ok) {
+ throw new Error(`レスポンスステータス: ${response.status}`);
+ }
+
+ const text = await response.text();
+ console.log(text);
+ } catch (e) {
+ console.error(e);
+ }
}
```
-ヘッダーの良い使用方法としては、以下のように、処理を行う前に、コンテンツタイプが正しいかどうか判定する等の使い方があります。
+上記のように {{domxref("Response.text()")}} を使用することができますが、ファイル全体を受信するまで待たなければなりません。
+
+代わりにレスポンスをストリーミングすると、本体をネットワークから受信した塊のままで処理することができます。
```js
-async function fetchJSON(request) {
+const url = "https://www.example.org/a-large-file.txt";
+
+async function fetchTextAsStream(url) {
try {
- const response = await fetch(request);
- const contentType = response.headers.get("content-type");
- if (!contentType || !contentType.includes("application/json")) {
- throw new TypeError("Oops, we haven't got JSON!");
+ const response = await fetch(url);
+ if (!response.ok) {
+ throw new Error(`レスポンスステータス: ${response.status}`);
}
- const jsonData = await response.json();
- // process your data further
- } catch (error) {
- console.error("Error:", error);
+
+ const stream = response.body.pipeThrough(new TextDecoderStream());
+ for await (const value of stream) {
+ console.log(value);
+ }
+ } catch (e) {
+ console.error(e);
}
}
```
-### ガード
-
-ヘッダーは、リクエストで送信でき、レスポンスで受信できます。また、どの情報が変更できる（または、すべき）かといったさまざまな制限があります。そのため、ヘッダーには _guard_ プロパティがあります。これはリクエストやレスポンスに含まれませんが、ヘッダーオブジェクトでできる変更操作に影響を与えます。
-
-設定できるガード値には以下のものがあります。
-
-- `none`: 既定値です。
-- `request`: リクエストから得たヘッダーオブジェクト ({{domxref("Request.headers")}}) を保護します。
-- `request-no-cors`: {{domxref("Request.mode")}} が `no-cors` で生成されたリクエストから得たヘッダーオブジェクトを保護します。
-- `response`: レスポンスから得たヘッダーオブジェクト ({{domxref("Response.headers")}}) を保護します。
-- `immutable`: ヘッダーを読み取り専用にします。主にサービスワーカーで使用されます。
+この例では、{{jsxref("Statements/for-await...of", "iterate asynchronously", "", "nocode")}} ストリームを処理し、到着したそれぞれの塊を処理しています。
-> **メモ:** `response` のガードされたヘッダーオブジェクトに `Content-Length` ヘッダーを追加したり設定したりすることはできません。同様に、レスポンスヘッダーに `Set-Cookie` を挿入することもできません。サービスワーカーは合成されたレスポンスでクッキーを設定することはできません。
+このように本体に直接アクセスすると、レスポンスの生のバイト列を取得し、それを自分で変換しなければならないことに注意しましょう。この場合、{{domxref("ReadableStream.pipeThrough()")}} を呼び出して {{domxref("TextDecoderStream")}} にレスポンスを通し、UTF-8 エンコードされた本体データをテキストとしてデコードします。
-## Response オブジェクト
+### テキストファイルを 1 行ずつ処理する
-すでに見てきたように、 {{domxref("Response")}} インスタンスは、 `fetch()` プロミスが解決 (resolve) されたときに返値として渡されます。
+下記の例では、テキストリソースを取得し、それを行ごとに処理し、正規表現を使って行末を探しています。分かりやすいように、テキストは UTF-8 を想定し、読み取りエラーは処理しません。
-使用できる主なレスポンスプロパティには、以下のものがあります。
+```js
+async function* makeTextFileLineIterator(fileURL) {
+ const response = await fetch(fileURL);
+ const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
-- {{domxref("Response.status")}} — 整数値 (既定値は 200) で、 HTTP ステータスコードが入ります。
-- {{domxref("Response.statusText")}} — HTTP ステータスコードに対応するメッセージの文字列 (既定値は "")。なお、 HTTP/2 ではステータスメッセージに[対応していません](https://fetch.spec.whatwg.org/#concept-response-status-message)。
-- {{domxref("Response.ok")}} — 上述の例で使用したように、これは HTTP ステータスコードが 200-299 の範囲にあるかどうかをチェックする略記法です。これは論理値を返します。
+ let { value: chunk, done: readerDone } = await reader.read();
+ chunk = chunk || "";
-Response オブジェクトは JavaScript で動的に作ることもできます。これは{{domxref("Service_Worker_API", "サービスワーカー", "", 1)}}で非常に役立ちます。例えばリクエストを受け取ったときに {{domxref("FetchEvent.respondWith","respondWith()")}} メソッドによってカスタマイズされたレスポンスを返すようなときに役立ちます。
+ const newline = /\r?\n/gm;
+ let startIndex = 0;
+ let result;
-```js
-const myBody = new Blob();
-
-addEventListener("fetch", (event) => {
- // ServiceWorker intercepting a fetch
- event.respondWith(
- new Response(myBody, {
- headers: { "Content-Type": "text/plain" },
- }),
- );
-});
-```
+ while (true) {
+ const result = newline.exec(chunk);
+ if (!result) {
+ if (readerDone) break;
+ const remainder = chunk.substr(startIndex);
+ ({ value: chunk, done: readerDone } = await reader.read());
+ chunk = remainder + (chunk || "");
+ startIndex = newline.lastIndex = 0;
+ continue;
+ }
+ yield chunk.substring(startIndex, result.index);
+ startIndex = newline.lastIndex;
+ }
-{{domxref("Response.Response","Response()")}} コンストラクターは、オプションとして 2 つの引数をとることができます。レスポンス本体と初期化オブジェクトです。 ({{domxref("Request.Request","Request()")}} が受け取れるものと似ています。)
+ if (startIndex < chunk.length) {
+ // Last line didn't end in a newline char
+ yield chunk.substring(startIndex);
+ }
+}
-> **メモ:** 静的メソッド {{domxref("Response/error_static","error()")}} は単純にエラーレスポンスを返します。同様に {{domxref("Response/redirect_static","redirect()")}} メソッドも 指定した URL にリダイレクトするレスポンスを返します。これらはサービスワーカーにのみ関連しています。
+async function run(urlOfFile) {
+ for await (const line of makeTextFileLineIterator(urlOfFile)) {
+ processLine(line);
+ }
+}
-## 本体
+function processLine(line) {
+ console.log(line);
+}
-リクエストにもレスポンスにも本体データが含まれています。本体は以下のタイプのいずれかのインスタンスです。
+run("https://www.example.org/a-large-file.txt");
+```
-- {{jsxref("ArrayBuffer")}}
-- {{jsxref("TypedArray")}} （Uint8Array など）
-- {{jsxref("DataView")}}
-- {{domxref("Blob")}}
-- {{domxref("File")}}
-- {{jsxref("String")}}、または文字列リテラル
-- {{domxref("URLSearchParams")}}
-- {{domxref("FormData")}}
+### ロックされ妨害されたストリーム
-{{domxref("Request")}} および {{domxref("Response")}} インターフェイスは本体を展開するために以下のメソッドを持っています。これらはすべて最終的に実際の内容で解決されるプロミスを返します。
+リクエスト本体とレスポンス本体がストリームであることの結果は以下のとおりです：
-- {{domxref("Request.arrayBuffer()")}} / {{domxref("Response.arrayBuffer()")}}
-- {{domxref("Request.blob()")}} / {{domxref("Response.blob()")}}
-- {{domxref("Request.formData()")}} / {{domxref("Response.formData()")}}
-- {{domxref("Request.json()")}} / {{domxref("Response.json()")}}
-- {{domxref("Request.text()")}} / {{domxref("Response.text()")}}
+- `ReadableStream.getReader()` を使用してストリームにリーダーが接続されている場合、そのストリームはロックされ、他の誰もストリームを読むことができません。
+- もしストリームから何らかのコンテンツが読み取られた場合、ストリームは妨害され、ストリームから読み取ることはできません。
-これらはテキストでないデータを XHR よりはるかに楽に扱うことができます。
+これは、同じレスポンス（またはリクエスト）本体を複数回読み取ることは不可能であるということです。
-リクエスト本体は、 body 引数を渡すことによって設定することができます。
+```js example-bad
+async function getData() {
+ const url = "https://example.org/products.json";
+ try {
+ const response = await fetch(url);
+ if (!response.ok) {
+ throw new Error(`レスポンスステータス: ${response.status}`);
+ }
-```js
-const form = new FormData(document.getElementById("login-form"));
-fetch("/login", {
- method: "POST",
- body: form,
-});
+ const json1 = await response.json();
+ const json2 = await response.json(); // 例外が発生
+ } catch (error) {
+ console.error(error.message);
+ }
+}
```
-リクエストとレスポンス（および `fetch()` 関数の拡張）は、自動的にコンテンツ種別を決定しようとします。リクエストもまた、指定されていなければ自動で `Content-Type` ヘッダーを設定しようとします。
+本体を複数回読み込む必要がある場合は、本体を読み込む前に {{domxref("Response.clone()")}} を呼び出す必要があります。
-## 使用可能かどうかの判別
+```js
+async function getData() {
+ const url = "https://example.org/products.json";
+ try {
+ const response1 = await fetch(url);
+ if (!response1.ok) {
+ throw new Error(`レスポンスステータス: ${response1.status}`);
+ }
-Fetch API が利用できるかどうかは、{{domxref("Headers")}}、{{domxref("Request")}}、{{domxref("Response")}}、{{domxref("fetch()")}} のいずれかが {{domxref("Window")}} もしくは {{domxref("Worker")}} のスコープで参照できるかどうかによって判断できます。例を挙げます。
+ const response2 = response1.clone();
-```js
-if (window.fetch) {
- // ここで fetch リクエストを実行
-} else {
- // XMLHttpRequest で何か実行する？
+ const json1 = await response1.json();
+ const json2 = await response2.json();
+ } catch (error) {
+ console.error(error.message);
+ }
}
```
-## `jQuery.ajax()` との差異
+これは[サービスワーカーのオフラインキャッシュ実装](/ja/docs/Web/Progressive_web_apps/Guides/Caching)でよくあるパターンです。サービスワーカーはアプリにレスポンスを返しますが、同時にレスポンスをキャッシュすることも望んでいます。そのため、レスポンスを複製して元を返し、複製をキャッシュします。
-`fetch` の仕様は、 `jQuery.ajax()` とは特に以下の点で異なっています。
+```js
+async function cacheFirst(request) {
+ const cachedResponse = await caches.match(request);
+ if (cachedResponse) {
+ return cachedResponse;
+ }
+ try {
+ const networkResponse = await fetch(request);
+ if (networkResponse.ok) {
+ const cache = await caches.open("MyCache_1");
+ cache.put(request, networkResponse.clone());
+ }
+ return networkResponse;
+ } catch (error) {
+ return Response.error();
+ }
+}
-- `fetch()` から返されるプロミスは、レスポンスが HTTP 404 や 500 を返す HTTP エラーステータスの場合でも拒否されません。サーバーがヘッダーで応答すると、プロミスは直ちに正常に解決します（レスポンスが 200-299 の範囲にない場合は、レスポンスの {{domxref("Response/ok", "ok")}} プロパティが `false` に設定されます）。拒否されるのは、ネットワーク障害があった場合や、何かがリクエストの完了を妨げた場合のみです。
-- [`credentials`](/ja/docs/Web/API/fetch#credentials) オプションを `include` に設定しない限り、`fetch()` は次のように動作します。
- - オリジン間リクエストではクッキーを送信しません。
- - オリジン間のレスポンスでは、送り返されたクッキーを設定しません。
- - 2018 年 8 月現在、既定の資格情報ポリシーは same-origin に変更されています。
+self.addEventListener("fetch", (event) => {
+ if (precachedResources.includes(url.pathname)) {
+ event.respondWith(cacheFirst(event.request));
+ }
+});
+```
## 関連情報
- [サービスワーカー API](/ja/docs/Web/API/Service_Worker_API)
-- [HTTP アクセス制御 (CORS)](/ja/docs/Web/HTTP/CORS)
+- [ストリーム API](/ja/docs/Web/API/Streams_API)
+- [CORS](/ja/docs/Web/HTTP/CORS)
- [HTTP](/ja/docs/Web/HTTP)
-- [フェッチのポリフィル](https://github.com/github/fetch)
- [Fetch の例 (GitHub)](https://github.com/mdn/dom-examples/tree/main/fetch)
diff --git a/files/ja/web/api/file/file/index.md b/files/ja/web/api/file/file/index.md
index dbf09db9c208e3..d3935d5a05f148 100644
--- a/files/ja/web/api/file/file/index.md
+++ b/files/ja/web/api/file/file/index.md
@@ -3,33 +3,36 @@ title: "File: File() コンストラクター"
short-title: File()
slug: Web/API/File/File
l10n:
- sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
+ sourceCommit: 8fd2ee72038310e3ecc387df235ffac1cb08775c
---
-{{APIRef("File")}}
+{{APIRef("File API")}}{{AvailableInWorkers}}
**`File()`** コンストラクターは、新しい {{domxref("File")}} オブジェクトのインスタンスを生成します。
## 構文
```js-nolint
-new File(bits, name)
-new File(bits, name, options)
+new File(fileBits, fileName)
+new File(fileBits, fileName, options)
```
### 引数
-- `bits`
- - : [反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)オブジェクト、例えば {{jsxref("Array")}}、{{jsxref("ArrayBuffer")}}、{{jsxref("TypedArray")}}、{{jsxref("DataView")}}、{{domxref("Blob")}}、文字列、またはそのような要素を混合させたものを {{domxref("File")}} 内に格納します。なお、文字列は JavaScript の UTF-16 文字列ではなく、UTF-8 でエンコードされます。
-- `name`
+- `fileBits`
+ - : [反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)オブジェクト、例えば {{jsxref("Array")}}、{{jsxref("ArrayBuffer")}}、{{jsxref("TypedArray")}}、{{jsxref("DataView")}}、{{domxref("Blob")}}、文字列、またはそのような要素を混合させたものを {{domxref("File")}} 内に格納します。
+ なお、文字列は JavaScript の UTF-16 文字列ではなく、UTF-8 でエンコードされます。
+- `fileName`
- : 文字列で、ファイル名またはファイルへのパスを表します。
- `options` {{optional_inline}}
- : ファイルのオプション属性を含むオプションオブジェクト。利用可能なオプションは以下の通りです。
- - `type`
+ - `type` {{optional_inline}}
- : ファイルの中に入るコンテンツの MIME タイプを表す文字列です。既定値は `""` です。
- - `lastModified`
+ - `endings` {{optional_inline}}
+ - : データがテキストの場合、コンテンツ内の改行文字 (`\n`) をどのように解釈するか。既定値である `transparent` は、改行文字を変更せずにblobにコピーします。改行文字をホストシステムのネイティブ規約に変換するには、値 `native` を指定します。
+ - `lastModified` {{optional_inline}}
- : UNIX 元期からのミリ秒単位で、ファイルが最後に更新された時刻を表す数値です。既定値は {{jsxref("Date.now()")}} です。
## 例
diff --git a/files/ja/web/api/file/index.md b/files/ja/web/api/file/index.md
index fb09cd0a48ec84..225efedded66b9 100644
--- a/files/ja/web/api/file/index.md
+++ b/files/ja/web/api/file/index.md
@@ -2,16 +2,16 @@
title: File
slug: Web/API/File
l10n:
- sourceCommit: 2a09bee9b36fd9a53c1bce641297021bfe274a33
+ sourceCommit: 0ebc78fd61acddbe9505330f006b706ac786456d
---
-{{APIRef("File API")}}
+{{APIRef("File API")}}{{AvailableInWorkers}}
**`File`** インターフェイスは、ファイルについての情報を提供したり、ウェブページ内の JavaScript からその内容にアクセスできるようにしたりします。
`File` オブジェクトは通常、{{HTMLElement("input")}} 要素を使用してファイルを選択した結果として返される {{DOMxRef("FileList")}} オブジェクト、またはドラッグ＆ドロップ操作の {{DOMxRef("DataTransfer")}} オブジェクトから取得します。
-`File` オブジェクトは特別な種類の {{DOMxRef("Blob")}} オブジェクトであり、 Blob が利用できる場面ではどこでも利用できます。特に、{{DOMxRef("FileReader")}}、{{DOMxRef("URL.createObjectURL_static")}}、{{DOMxRef("createImageBitmap()")}}、{{DOMxRef("XMLHttpRequest", "", "send()")}} は、`Blob` と `File` の両方を受け付けます。
+`File` オブジェクトは特別な種類の {{DOMxRef("Blob")}} オブジェクトであり、 Blob が利用できる場面ではどこでも利用できます。特に、{{DOMxRef("FileReader")}}、{{DOMxRef("URL.createObjectURL_static", "URL.createObjectURL()")}}、{{DOMxRef("createImageBitmap()")}}、{{domxref("Window.fetch", "fetch()")}} の [`body`](/ja/docs/Web/API/RequestInit#body) オプション、{{DOMxRef("XMLHttpRequest.send()")}} は、`Blob` と `File` の両方を受け付けます。
詳しい情報や例は、[ウェブアプリケーションからのファイルの使用](/ja/docs/Web/API/File_API/Using_files_from_web_applications) を参照してください。
@@ -24,34 +24,20 @@ l10n:
## インスタンスプロパティ
-- {{DOMxRef("File.prototype.lastModified")}} {{ReadOnlyInline}}
+_`File` インターフェイスには {{DOMxRef("Blob")}} インターフェイスから継承したプロパティもあります。_
+
+- {{DOMxRef("File.lastModified")}} {{ReadOnlyInline}}
- : ファイルの最終更新時刻を、 UNIX 元期 (1970 年 1 月 1 日深夜) からの経過ミリ秒数で返します。
-- {{DOMxRef("File.prototype.lastModifiedDate")}} {{Deprecated_Inline}} {{ReadOnlyInline}} {{Non-standard_Inline}}
+- {{DOMxRef("File.lastModifiedDate")}} {{Deprecated_Inline}} {{ReadOnlyInline}} {{Non-standard_Inline}}
- : `File` オブジェクトが参照しているファイルの最終更新時刻の {{JSxRef("Date")}} を返します。
-- {{DOMxRef("File.prototype.name")}} {{ReadOnlyInline}}
+- {{DOMxRef("File.name")}} {{ReadOnlyInline}}
- : `File` オブジェクトが参照しているファイルの名前を返します。
-- {{DOMxRef("File.prototype.webkitRelativePath")}} {{ReadOnlyInline}}
- - : {{DOMxRef("File")}} の URL の相対パスを返します。
-
-`File` は {{DOMxRef("Blob")}} を実装しているので、以下のようなプロパティも利用できます。
-
-- {{DOMxRef("Blob.size")}} {{ReadOnlyInline}}
- - : ファイルのサイズをバイト単位で返します。
-- {{DOMxRef("File.prototype.type")}} {{ReadOnlyInline}}
- - : ファイルの [MIME](/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types) タイプを返します。
+- {{DOMxRef("File.webkitRelativePath")}} {{ReadOnlyInline}}
+ - : `File` の URL の相対パスを返します。
## インスタンスメソッド
-_`File` インターフェイスはメソッドを定義せず、{{DOMxRef("Blob")}} インターフェイスからメソッドを継承しています。_
-
-- {{DOMxRef("Blob.prototype.slice()", "Blob.prototype.slice([start[, end[, contentType]]])")}}
- - : ソース `Blob` の指定したバイト数の範囲のデータを含む新しい `Blob` オブジェクトを返します。
-- {{DOMxRef("Blob.prototype.stream()")}}
- - : `File` を {{DOMxRef("ReadableStream")}} に変換し、`File` の内容を読み込めるようにします。
-- {{DOMxRef("Blob.prototype.text()")}}
- - : `File` をストリームに変換し、最後まで読み込みます。これは、文字列（テキスト）で解決するプロミスを返します。
-- {{DOMxRef("Blob.prototype.arrayBuffer()")}}
- - : `File` をストリームに変換し、最後まで読み込みます。 {{jsxref("ArrayBuffer")}} で解決するプロミスを返します。
+_`File` インターフェイスには {{DOMxRef("Blob")}} インターフェイスから継承したメソッドもあります。_
## 仕様書
diff --git a/files/ja/web/api/file/lastmodified/index.md b/files/ja/web/api/file/lastmodified/index.md
index 1960b12530ac1a..ba61075adbe4ec 100644
--- a/files/ja/web/api/file/lastmodified/index.md
+++ b/files/ja/web/api/file/lastmodified/index.md
@@ -3,12 +3,12 @@ title: "File: lastModified プロパティ"
short-title: lastModified
slug: Web/API/File/lastModified
l10n:
- sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
+ sourceCommit: 3b5a1c0dfd59257c0a51052a9efa7b0108f8ecca
---
-{{APIRef("File")}}
+{{APIRef("File API")}}{{AvailableInWorkers}}
-**`File.lastModified`** は読み取り専用プロパティで、ファイルの最終更新日時を UNIX 元期（1970 年 1 月 1 日の深夜 0 時）からのミリ秒数で返します。最終更新日時が分からないファイルは、現在の日時を返します。
+**`lastModified`** は {{domxref("File")}} インターフェイスの読み取り専用プロパティで、ファイルの最終更新日時を UNIX 元期（1970 年 1 月 1 日の深夜 0 時）からのミリ秒数で返します。最終更新日時が分からないファイルは、現在の日時を返します。
## 値
@@ -74,12 +74,15 @@ console.log(fileWithoutDate.lastModified); // returns current time
## 時間の精度の低下
-タイミング攻撃やフィンガープリンティングに対する保護機能を提供するために、 `someFile.lastModified` の精度がブラウザーの設定に応じて丸められることがあります。
-Firefox では、`privacy.reduceTimerPrecision` 設定は既定で有効になっており、 Firefox 59 では既定で 20 us に設定されています。60 で 2 ms になります。
+タイミング攻撃や[フィンガープリンティング](/ja/docs/Glossary/Fingerprinting)に対する保護機能を提供するために、 `someFile.lastModified` の精度がブラウザーの設定に応じて丸められることがあります。
+Firefox では、`privacy.reduceTimerPrecision` 設定は既定で有効になっており、既定で 2 ミリ秒になります。この場合、精度は 100ms または `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` の値のどちらか大きい方になります。
+
+例えば、時刻の精度を下げた場合、`someFile.lastModified` の結果は常に 2 の倍数になり、`privacy.resistFingerprinting` を有効にした場合は 100 の倍数（または `privacy.resistFingerprinting.reduceTimerPrecision.microseconds`）になります。
```js
// Firefox 60 での時間の制度の低下 (2ms)
someFile.lastModified;
+// 取りうる値:
// 1519211809934
// 1519211810362
// 1519211811670
@@ -87,14 +90,13 @@ someFile.lastModified;
// `privacy.resistFingerprinting` が有効な場合の時間の制度の低下
someFile.lastModified;
+// 取りうる値:
// 1519129853500
// 1519129858900
// 1519129864400
// …
```
-Firefox では、`privacy.resistFingerprinting` を有効にすることもできます。精度は 100ms か `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` のいずれか大きい方の値になります。
-
## 仕様書
{{Specifications}}
diff --git a/files/ja/web/api/file/lastmodifieddate/index.md b/files/ja/web/api/file/lastmodifieddate/index.md
index 6b7f6c1323d7c4..f9ace3a00f6747 100644
--- a/files/ja/web/api/file/lastmodifieddate/index.md
+++ b/files/ja/web/api/file/lastmodifieddate/index.md
@@ -3,16 +3,16 @@ title: "File: lastModifiedDate プロパティ"
short-title: lastModifiedDate
slug: Web/API/File/lastModifiedDate
l10n:
- sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+ sourceCommit: 3b5a1c0dfd59257c0a51052a9efa7b0108f8ecca
---
-{{APIRef("File API")}}{{Deprecated_Header}}{{Non-standard_Header}}
+{{APIRef("File API")}}{{AvailableInWorkers}}{{Deprecated_Header}}{{Non-standard_Header}}
-**`File.lastModifiedDate`** 読み取り専用プロパティは、ファイルの最終更新日を返します。最終更新日がわからないファイルは、現在の日付を返します。
+**`lastModifiedDate`** は {{domxref("File")}} インターフェイスの読み取り専用プロパティで、ファイルの最終更新日を返します。最終更新日がわからないファイルは、現在の日付を返します。
## 値
-[`Date`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Date) オブジェクトで、ファイルが最後に変更された日時を表します。
+{{JSXRef("Global_Objects/Date", "Date")}} オブジェクトで、ファイルが最後に変更された日時を表します。
## 例
@@ -27,31 +27,32 @@ for (const file of fileInput.files) {
## 時間の精度の低下
-タイミング攻撃や[フィンガープリンティング](/ja/docs/Glossary/Fingerprinting)に対する保護機能を提供するために、 `someFile.lastModifiedDate.getTime()` の精度がブラウザーの設定に応じて丸められることがあります。
+タイミング攻撃や[フィンガープリンティング](/ja/docs/Glossary/Fingerprinting)に対する保護機能を提供するために、 `someFile.lastModified` の精度がブラウザーの設定に応じて丸められることがあります。
+Firefox では、`privacy.reduceTimerPrecision` 設定は既定で有効になっており、既定で 2 ミリ秒になります。この場合、精度は 100ms または `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` の値のどちらか大きい方になります。
-Firefox では、`privacy.reduceTimerPrecision` 設定は既定で有効になっており、 Firefox 59 では既定で 20 us に設定されています。60 で 2 ms になります。
+例えば、時刻の精度を下げた場合、`someFile.lastModified` の結果は常に 2 の倍数になり、`privacy.resistFingerprinting` を有効にした場合は 100 の倍数（または `privacy.resistFingerprinting.reduceTimerPrecision.microseconds`）になります。
```js
// Firefox 60 での時間の制度の低下 (2ms)
-someFile.lastModifiedDate.getTime();
+someFile.lastModified;
+// 取りうる値:
// 1519211809934
// 1519211810362
// 1519211811670
// …
// `privacy.resistFingerprinting` が有効な場合の時間の制度の低下
-someFile.lastModifiedDate.getTime();
+someFile.lastModified;
+// 取りうる値:
// 1519129853500
// 1519129858900
// 1519129864400
// …
```
-Firefox では、`privacy.resistFingerprinting` を有効にすることもできます。精度は 100ms か `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` のいずれか大きい方の値になります。
-
## 仕様書
-_ファイル API 仕様の初期のドラフトにありますが、このプロパティは削除されており、現在は非標準です。代わりに{{domxref("File.lastModified")}} を使用してください。_
+_ファイル API 仕様の初期の草稿にありますが、このプロパティは削除されており、現在は標準外です。代わりに {{domxref("File.lastModified")}} を使用してください。_
## ブラウザーの互換性
diff --git a/files/ja/web/api/file/name/index.md b/files/ja/web/api/file/name/index.md
index f6ad5518f74748..a64053155faf47 100644
--- a/files/ja/web/api/file/name/index.md
+++ b/files/ja/web/api/file/name/index.md
@@ -3,12 +3,12 @@ title: "File: name プロパティ"
short-title: name
slug: Web/API/File/name
l10n:
- sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
+ sourceCommit: 8fd2ee72038310e3ecc387df235ffac1cb08775c
---
-{{APIRef("File API")}}
+{{APIRef("File API")}}{{AvailableInWorkers}}
-{{domxref("File")}} オブジェクトによって表されるファイルの名前を返します。セキュリティ上の理由から、パスはこのプロパティから除外されます。
+**`name`** は {{domxref("File")}} インターフェイスの読み取り専用プロパティで、この {{domxref("File")}} オブジェクトによって表されるファイルの名前を返します。セキュリティ上の理由から、パスはこのプロパティから除外されます。
## 値
diff --git a/files/ja/web/api/file/webkitrelativepath/index.md b/files/ja/web/api/file/webkitrelativepath/index.md
index 9086d006befbf2..b0f875eff607ab 100644
--- a/files/ja/web/api/file/webkitrelativepath/index.md
+++ b/files/ja/web/api/file/webkitrelativepath/index.md
@@ -3,12 +3,12 @@ title: "File: webkitRelativePath プロパティ"
short-title: webkitRelativePath
slug: Web/API/File/webkitRelativePath
l10n:
- sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
+ sourceCommit: 367b982b93c07f7f99e7bb768a6bf326fa5198e6
---
-{{APIRef("File API")}}
+{{APIRef("File and Directory Entries API")}}{{AvailableInWorkers}}
-**`File.webkitRelativePath`** は、[`webkitdirectory`](/ja/docs/Web/HTML/Element/input#webkitdirectory) 属性が設定された {{HTMLElement("input")}} 要素で、ユーザーが選択したディレクトリーに対するファイルのパスを指定する文字列を持つ読み取り専用のプロパティです。
+**`webkitRelativePath`** は {{domxref("File")}} インターフェイスの読み取り専用プロパティで、[`webkitdirectory`](/ja/docs/Web/HTML/Element/input#webkitdirectory) 属性が設定された {{HTMLElement("input")}} 要素において、ユーザーが選択したディレクトリーに対するファイルのパスを指定する文字列を保持します。
## 値
@@ -16,7 +16,7 @@ l10n:
## 例
-この例では、ユーザーが 1 つまたは複数のディレクトリーを選択することができるディレクトリーピッカーが表示されます。 {{domxref("HTMLElement/change_event", "change")}} イベントが発生すると、選択されたディレクトリ階層に含まれるすべてのファイルのリストが生成され、表示されます。
+この例では、ユーザーが 1 つまたは複数のディレクトリーを選択することができるディレクトリーピッカーが表示されます。 {{domxref("HTMLElement/change_event", "change")}} イベントが発生すると、選択されたディレクトリー階層に含まれるすべてのファイルのリストが生成され、表示されます。
### HTML
diff --git a/files/ja/web/api/file_and_directory_entries_api/introduction/index.md b/files/ja/web/api/file_and_directory_entries_api/introduction/index.md
index 9688fe780f774b..ae1189d8307406 100644
--- a/files/ja/web/api/file_and_directory_entries_api/introduction/index.md
+++ b/files/ja/web/api/file_and_directory_entries_api/introduction/index.md
@@ -7,7 +7,7 @@ l10n:
{{DefaultAPISidebar("File and Directory Entries API")}}
-[ファイルとディレクトリー項目 API](/ja/docs/Web/API/File_and_Directory_Entries_API) は、ウェブアプリケーションがナビゲートできるローカルファイルシステムをシミュレートします。サンドボックス化された仮想ファイルシステムでファイルやディレクトリの読み取り、書き込み、作成ができるアプリを開発できます。
+[ファイルとディレクトリー項目 API](/ja/docs/Web/API/File_and_Directory_Entries_API) は、ウェブアプリケーションがナビゲートできるローカルファイルシステムをシミュレートします。サンドボックス化された仮想ファイルシステムでファイルやディレクトリーの読み取り、書き込み、作成ができるアプリを開発できます。
ファイルとディレクトリー項目 API は、他にも関連する API と対話します。このAPIはファイルライター API をベースに構築されており、さらにファイル API をベースに構築されています。それぞれの API は異なる機能を追加しています。これらの API はウェブアプリケーションにとって大きな進化を遂げ、これで大量のデータをキャッシュして処理できるようになりました。
diff --git a/files/ja/web/api/file_api/using_files_from_web_applications/index.md b/files/ja/web/api/file_api/using_files_from_web_applications/index.md
index 263c80938df12b..d0d521bcba6626 100644
--- a/files/ja/web/api/file_api/using_files_from_web_applications/index.md
+++ b/files/ja/web/api/file_api/using_files_from_web_applications/index.md
@@ -286,7 +286,7 @@ function handleFiles(files) {
各画像には CSS クラス `obj` が追加されており、DOM ツリーで簡単に見つけることができます。また、各画像に `file` 属性を追加し、画像の {{DOMxRef("File")}} を指定しています。これにより、後で実際にアップロードする画像を取得することができます。{{DOMxRef("Node.appendChild()")}} を使用して、文書のプレビュー領域に新しいサムネイルを追加します。
-次に、画像の読み込みと `img` 要素へのアタッチを非同期で処理するための {{DOMxRef("FileReader")}} を確立します。新しい `FileReader` オブジェクトを作成した後、その `onload` 関数を設定し、`readAsDataURL()` を呼び出してバックグラウンドで読み込み処理を開始します。画像ファイルのコンテンツ全体が読み込まれると、それらは `data:` URL に変換され、`onload` コールバックに渡されます。このルーチンの実装では、`img` 要素の `src` 属性が読み込まれた画像に設定され、その結果、画像がユーザの画面のサムネイルに表示されます。
+次に、画像の読み込みと `img` 要素へのアタッチを非同期で処理するための {{DOMxRef("FileReader")}} を確立します。新しい `FileReader` オブジェクトを作成した後、その `onload` 関数を設定し、`readAsDataURL()` を呼び出してバックグラウンドで読み込み処理を開始します。画像ファイルのコンテンツ全体が読み込まれると、それらは `data:` URL に変換され、`onload` コールバックに渡されます。このルーチンの実装では、`img` 要素の `src` 属性が読み込まれた画像に設定され、その結果、画像がユーザーの画面のサムネイルに表示されます。
## オブジェクト URL を利用する
@@ -308,7 +308,7 @@ URL.revokeObjectURL(objectURL);
この例では、オブジェクト URL を使用して画像のサムネイルを表示しています。さらに、ファイル名やサイズなどの他のファイル情報も表示します。
-インターフェースとなる HTML は次のようになります。
+インターフェイスとなる HTML は次のようになります。
```html
{
// ファイルのサイズを取得する
const fileSize = accessHandle.getSize();
- // ファイルの内容をバッファに読み込む
+ // ファイルの内容をバッファーに読み込む
const buffer = new DataView(new ArrayBuffer(fileSize));
const readBuffer = accessHandle.read(buffer, { at: 0 });
diff --git a/files/ja/web/api/filesystemsyncaccesshandle/truncate/index.md b/files/ja/web/api/filesystemsyncaccesshandle/truncate/index.md
index 1137f18ca3386b..48162648e94a35 100644
--- a/files/ja/web/api/filesystemsyncaccesshandle/truncate/index.md
+++ b/files/ja/web/api/filesystemsyncaccesshandle/truncate/index.md
@@ -27,7 +27,7 @@ truncate(newSize)
### 例外
- `InvalidStateError` {{domxref("DOMException")}}
- - : 対応するアクセスハンドルが既に閉じられているか、ファイルのバイナリデータの変更が失敗したとき投げられます。
+ - : 対応するアクセスハンドルが既に閉じられているか、ファイルのバイナリーデータの変更が失敗したとき投げられます。
- `QuotaExceededError` {{domxref("DOMException")}}
- : `newSize` がファイルのもとのサイズより大きく、ブラウザーの[ストレージ制限](/ja/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria)を超えるとき投げられます。
diff --git a/files/ja/web/api/fontface/fontface/index.md b/files/ja/web/api/fontface/fontface/index.md
index 10cd628a7b7018..40d66e0de51032 100644
--- a/files/ja/web/api/fontface/fontface/index.md
+++ b/files/ja/web/api/fontface/fontface/index.md
@@ -63,7 +63,7 @@ new FontFace(family, source, descriptors)
### 例外
- `SyntaxError` {{domxref("DOMException")}}
- - : 記述子の文字列が、対応する {{cssxref("@font-face")}} 記述子の文法に照合しないか、指定するバイナリソースを読み込むことができない場合に発生します。
+ - : 記述子の文字列が、対応する {{cssxref("@font-face")}} 記述子の文法に照合しないか、指定するバイナリーソースを読み込むことができない場合に発生します。
このエラーでは {{domxref("FontFace.status")}} が `error` に設定されます。
## 例
diff --git a/files/ja/web/api/fullscreen_api/index.md b/files/ja/web/api/fullscreen_api/index.md
index 699148e04679f9..b5f915881fb9c4 100644
--- a/files/ja/web/api/fullscreen_api/index.md
+++ b/files/ja/web/api/fullscreen_api/index.md
@@ -11,7 +11,7 @@ l10n:
API の使い方についての詳細は、 [全画面 API ガイド](/ja/docs/Web/API/Fullscreen_API/Guide)をご覧ください。
-> **メモ:** この API の対応はブラウザーによって、ベンダー接頭辞が必要かどうか、最新の仕様を実装しているかどうかがいくらか異なっています。この API の実装状況の詳細は、[ブラウザーの互換性](#ブラウザーの互換性)の節を参照してください。ベンダーに依存せずに全画面 API にアクセスできる [Fscreen](https://github.com/rafgraph/fscreen) のようなライブラリのー使用を検討したほうが良いかもしれません。
+> **メモ:** この API の対応はブラウザーによって、ベンダー接頭辞が必要かどうか、最新の仕様を実装しているかどうかがいくらか異なっています。この API の実装状況の詳細は、[ブラウザーの互換性](#ブラウザーの互換性)の節を参照してください。ベンダーに依存せずに全画面 API にアクセスできる [Fscreen](https://github.com/rafgraph/fscreen) のようなライブラリーのー使用を検討したほうが良いかもしれません。
## インターフェイス
@@ -33,7 +33,7 @@ _全画面 API 自体に独自のインターフェイスはありません。
## インスタンスプロパティ
-_{{DOMxRef("Document")}} インターフェイスはこのインターフェースは、全画面モードに対応していて利用できるかどうか、全画面モードが現在有効であれば、どの要素が画面を使用しているかを判断するために使用できるプロパティを提供します_。
+_{{DOMxRef("Document")}} インターフェイスはこのインターフェイスは、全画面モードに対応していて利用できるかどうか、全画面モードが現在有効であれば、どの要素が画面を使用しているかを判断するために使用できるプロパティを提供します_。
- {{DOMxRef("Document.fullscreenElement")}} / {{DOMxRef("ShadowRoot.fullscreenElement")}}
- : `fullscreenElement` プロパティで、現在全画面モードで表示されている DOM （またはシャドウ DOM）上の要素 ({{DOMxRef("Element")}}) が分かります。これが `null` の場合、文書（またはシャドウ DOM）は全画面モードになっていません。
diff --git a/files/ja/web/api/gamepad_api/using_the_gamepad_api/index.md b/files/ja/web/api/gamepad_api/using_the_gamepad_api/index.md
index d3606c25f3e113..5ad91d630d782a 100644
--- a/files/ja/web/api/gamepad_api/using_the_gamepad_api/index.md
+++ b/files/ja/web/api/gamepad_api/using_the_gamepad_api/index.md
@@ -107,14 +107,14 @@ window.addEventListener("gamepadconnected", (e) => {
- `id`: コントローラーに関する情報を含んだ文字列です。これは厳密には指定されていなく、Firefox では、コントローラーの USB ベンダと製品 ID を含んでいる 2 つの 4 桁 16 進数字列、およびドライバーから提供されるようなコントローラーの名前といった 3 つの情報が、ダッシュ (`-`) により分離され含まれています。この情報はユーザーへの有益なフィードバックを表示するとともに、デバイスのコントロールのマッピングを見つけることができるようにします。
- `index`: 現在システムに接続されているゲームパッドごとに固有の整数。この値は複数のコントローラーを区別するために使用できます。デバイスを切断してから新しいデバイスを接続すると、以前のインデックスが再利用されることに注意してください。
-- `mapping`: ブラウザがデバイス上のコントロールを既知のレイアウトに再マップしたかどうかを示す文字列。現在、サポートされている既知のレイアウト - [標準のゲームパッド](https://w3c.github.io/gamepad/gamepad.html#remapping)は 1 つしかありません。ブラウザがデバイス上のコントロールをそのレイアウトにマッピングできる場合、 `mapping` プロパティは文字列 `standard` に設定されます。
+- `mapping`: ブラウザーがデバイス上のコントロールを既知のレイアウトに再マップしたかどうかを示す文字列。現在、サポートされている既知のレイアウト - [標準のゲームパッド](https://w3c.github.io/gamepad/gamepad.html#remapping)は 1 つしかありません。ブラウザーがデバイス上のコントロールをそのレイアウトにマッピングできる場合、 `mapping` プロパティは文字列 `standard` に設定されます。
- `connected`:ゲームパッドがシステムに接続されているかどうかを示すブール値。もし接続されている場合は `True`。接続されていない場合は `False` が設定されます。
- `buttons`: デバイス上に存在するボタンを表す {{ domxref("GamepadButton") }} オブジェクトの配列。各 {{ domxref("GamepadButton") }} には、`pressed` プロパティと `value` のプロパティがあります。
- `pressed` プロパティは、ボタンが現在押されている (`true`) か押されていない (`false`) かを示すブール値です。>
- `value` プロパティは、現代の多くのゲームパッドのトリガなど、アナログボタンの表示を有効にするために使用される浮動小数点値です。値は 0.0..1.0 の範囲に正規化され、 0.0 は押されていないボタンを表し、 1.0 は完全に押されたボタンを表します。
-- `axes`: デバイス上に軸があるコントロールを表す配列 (例：アナログサムスティック)。 配列の各エントリは-1.0〜1.0 の範囲の浮動小数点値で、最小値 (-1.0) から最大値 (1.0) までの軸の位置を表します。
+- `axes`: デバイス上に軸があるコントロールを表す配列 (例：アナログサムスティック)。 配列の各エントリーは-1.0〜1.0 の範囲の浮動小数点値で、最小値 (-1.0) から最大値 (1.0) までの軸の位置を表します。
- `timestamp`: このゲームパッドのデータが最後に更新された時刻を表す {{ domxref("DOMHighResTimeStamp") }} を返します。この値により、開発者は `axes` と `button` のデータがハードウェアから更新されたかどうかを判断できます。 値は、 {{ domxref("PerformanceTiming") }} インターフェイスの `navigationStart` 属性との相対値でなければなりません。 値は単調に増加します。つまり、更新の順序を決定するために比較することができます。新しい値は常に古い値よりも大きいか等しいためです。このプロパティは現在 Firefox ではサポートされていません。
> **メモ:** Gamepad オブジェクトは、セキュリティ上の理由から {{ domxref("Window") }} オブジェクトではなく {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} イベントで使用できます。一度参照を取得すると、そのプロパティでゲームパッドの現在の状態に関する情報を照会できます。 このオブジェクトは、ゲームパッドの状態が変わるたびに更新されます。
@@ -123,7 +123,7 @@ window.addEventListener("gamepadconnected", (e) => {
1 つのゲームパッドの接続情報を表示する簡単な例を見てみましょう (後続のゲームパッド接続を無視します)。ゲームパッドの右側にある 4 つのゲームパッドボタンを使用してボールを画面の周りに移動できます。[デモをライブで見ることができ](http://chrisdavidmills.github.io/gamepad-buttons/)ことができ、Github で[ソースコードを見つけることができます](https://github.com/chrisdavidmills/gamepad-buttons/tree/master)。
-まず、いくつかの変数を宣言します。接続情報が書き込まれる `gamepadInfo` のパラグラフ、移動する `ball`、`requestAnimation Frame` の ID として機能する `start` 変数、ボールを移動するための位置変更子として機能する a および b 変数、および短縮形変数 これは、 {{ domxref("Window.requestAnimationFrame", "requestAnimationFrame()") }} および {{ domxref("Window.cancelAnimationFrame", "cancelAnimationFrame()") }} クロスブラウザフォークで使用されます。
+まず、いくつかの変数を宣言します。接続情報が書き込まれる `gamepadInfo` のパラグラフ、移動する `ball`、`requestAnimation Frame` の ID として機能する `start` 変数、ボールを移動するための位置変更子として機能する a および b 変数、および短縮形変数 これは、 {{ domxref("Window.requestAnimationFrame", "requestAnimationFrame()") }} および {{ domxref("Window.cancelAnimationFrame", "cancelAnimationFrame()") }} クロスブラウザーフォークで使用されます。
```js
const gamepadInfo = document.getElementById("gamepad-info");
diff --git a/files/ja/web/api/html_drag_and_drop_api/file_drag_and_drop/index.md b/files/ja/web/api/html_drag_and_drop_api/file_drag_and_drop/index.md
index be37744079a5c9..44dd5b815027cf 100644
--- a/files/ja/web/api/html_drag_and_drop_api/file_drag_and_drop/index.md
+++ b/files/ja/web/api/html_drag_and_drop_api/file_drag_and_drop/index.md
@@ -11,7 +11,7 @@ HTML ドラッグ & ドロップインターフェイスは、ウェブアプリ
ドラッグ & ドロップの主な手順は、ドロップゾーン（ファイルドロップの対象要素）を定義することと、 {{domxref("HTMLElement/drop_event", "drop")}} および {{domxref("HTMLElement/dragover_event", "dragover")}} イベントのイベントハンドラーを定義することです。これらの手順は、コード例を含め、下記で記述します。完全なソースコードは [MDN のドラッグ & ドロップリポジトリー](https://github.com/mdn/dom-examples/tree/main/drag-and-drop)で利用できます（プルリクエストや issue を歓迎します）。
-なお、 {{domxref("HTML_Drag_and_Drop_API","HTML ドラッグ & ドロップ", "", 1)}}では、ファイルのドラッグ & ドロップに対応するために 2 つの異なる形の API を定義しています。一方の API は {{domxref("DataTransfer")}} インターフェイスで、もう一方の API は {{domxref("DataTransferItem")}} と {{domxref("DataTransferItemList")}} インターフェイスです。この例では、両方の API の使用方法を説明します （そして、Gecko 固有のインターフェースは一切使用しません）。
+なお、 {{domxref("HTML_Drag_and_Drop_API","HTML ドラッグ & ドロップ", "", 1)}}では、ファイルのドラッグ & ドロップに対応するために 2 つの異なる形の API を定義しています。一方の API は {{domxref("DataTransfer")}} インターフェイスで、もう一方の API は {{domxref("DataTransferItem")}} と {{domxref("DataTransferItemList")}} インターフェイスです。この例では、両方の API の使用方法を説明します （そして、Gecko 固有のインターフェイスは一切使用しません）。
## ドロップゾーンの定義
diff --git a/files/ja/web/api/window/sidebar/index.md b/files/ja/web/api/window/external/index.md
similarity index 97%
rename from files/ja/web/api/window/sidebar/index.md
rename to files/ja/web/api/window/external/index.md
index 20e41b5adcff2c..bed5e9e252f91d 100644
--- a/files/ja/web/api/window/sidebar/index.md
+++ b/files/ja/web/api/window/external/index.md
@@ -1,6 +1,7 @@
---
title: Window.sidebar
-slug: Web/API/Window/sidebar
+slug: Web/API/Window/external
+original_slug: Web/API/Window/sidebar
---
{{APIRef}} {{Deprecated_Header}}
diff --git a/files/ja/web/css/calc-keyword/index.md b/files/ja/web/css/calc-keyword/index.md
index 28d7115faba135..36211c82eb8bf8 100644
--- a/files/ja/web/css/calc-keyword/index.md
+++ b/files/ja/web/css/calc-keyword/index.md
@@ -1,18 +1,17 @@
---
-title:
+title:
slug: Web/CSS/calc-keyword
-original_slug: Web/CSS/calc-constant
l10n:
- sourceCommit: fb1c7f8985e4c4142f482f809366e3cba6b96b94
+ sourceCommit: 62ebcab471aceef4d843e57e310dae4ab1eda94a
---
{{CSSRef}}
-**``** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、 `e` や `pi` のようなよく定義された定数を表します。これらの数学定数を何桁も手作業で入力したり、計算したりする必要はなく、利便性のために CSS によって直接提供されています。
+**``** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、 `e` や `pi` のようなよく定義された定数を表します。これらの数学定数を何桁も手作業で入力したり、計算したりする必要はなく、利便性のために CSS によって直接提供されています。
## 構文
-`` 型は、 [CSS 数学関数](/ja/docs/Web/CSS/CSS_Functions#数学関数)で使用される数値の定数を定義します。
+`` 型は、 [CSS 数学関数](/ja/docs/Web/CSS/CSS_Functions#数学関数)で使用される数値の定数を定義します。
### 値
@@ -66,7 +65,7 @@ l10n:
- `line-height: e;` は無効ですが、 `line-height: calc(e);` は有効です。
- `rotate(1rad * pi);` は動作しません。 {{CSSxRef("transform-function/rotate", "rotate()")}} は数学関数ではないからです。 `rotate(calc(1rad * pi));` を使用してください。
-数学関数では、 `` 値は {{CSSxRef("number")}} 値として評価されるので、 `e` と `pi` は数値定数として動作します。
+数学関数では、 `` 値は {{CSSxRef("number")}} 値として評価されるので、 `e` と `pi` は数値定数として動作します。
`infinity` と `NaN` は少し異なり、退化した数値定数とみなされます。
技術的には数値ではありませんが、 {{CSSxRef("number")}} 値として動作するので、例えば無限大の {{CSSxRef("length")}} を取得するには `calc(infinity * 1px)` のような式が必要となります。
diff --git a/files/ja/web/css/css_box_sizing/index.md b/files/ja/web/css/css_box_sizing/index.md
new file mode 100644
index 00000000000000..c350264aa1ebd0
--- /dev/null
+++ b/files/ja/web/css/css_box_sizing/index.md
@@ -0,0 +1,151 @@
+---
+title: CSS ボックスサイズ指定
+slug: Web/CSS/CSS_box_sizing
+l10n:
+ sourceCommit: 2ef2c905a7322f5a533cf7c96ec5a337fc614359
+---
+
+{{CSSRef}}
+
+**CSS ボックスサイズ指定**モジュールは、要素のサイズをどのようにコンテンツに合わせるか、または特定のレイアウトコンテキストに合わせるかを開発者が指定できるようにします。このモジュールでは、サイズ指定、最小サイズ指定、最大サイズ指定のプロパティを定義しており、コンテンツに基づく{{glossary("intrinsic size", "内在サイズ")}}とコンテキストに基づく[外在](/ja/docs/Glossary/Intrinsic_Size#外在サイズ)サイズを表すキーワードで CSS サイズ指定のプロパティを拡張します。
+
+要素は、外在的にも内在的にもサイズを設定することができます。[CSS ボックスモデル](/ja/docs/Web/CSS/CSS_box_model)は、要素の大きさを明示的に、つまり「外在的」に設定するためのページに相対的なプロパティ、たとえば `width`、`height`、`padding`、`margin` などのプロパティ（[CSS 背景と境界](/ja/docs/Web/CSS/CSS_backgrounds_and_borders)モジュールで定義されている `border` プロパティも含む）を定義しています。この CSS ボックスサイズ指定モジュールは、CSS ボックスモデルモジュールを拡張し、コンテンツのサイズに基づいて要素のサイズを設定することで、要素を内在的にサイズ指定できるようにします。
+
+このモジュールで導入されたサイズ指定値は、[サイズの封じ込め](/ja/docs/Web/CSS/CSS_containment/Using_CSS_containment#サイズの封じ込め)を持つ要素が、内在サイズが何も指定されていないかのようにサイズ指定されるのではなく、そのフロー内コンテンツの幅と高さが指定された明示的な内在サイズと一致するように、明示的な内在サイズを取ることができるようになります。
+
+このモジュールでは、要素のボックスのアスペクト比を定義する機能も導入されました。つまり、ブラウザーは指定されたアスペクト比を維持するために、いずれかの寸法が自動的にサイズ調整される限り、要素の寸法を自動的に調整することができます。
+
+[論理的プロパティと値モジュール](/ja/docs/Web/CSS/CSS_logical_properties_and_values)は、ボックスモデルとボックスサイズ指定モジュールで利用可能なプロパティを拡張し、対応する物理ボックスモデルと内在ボックスサイズ指定プロパティの書字方向に相対的である等価なものを含むように拡張しています。
+
+## リファレンス
+
+### プロパティ
+
+- {{cssxref("aspect-ratio")}}
+- {{cssxref("box-sizing")}}
+- {{cssxref("contain-intrinsic-block-size")}}
+- {{cssxref("contain-intrinsic-height")}}
+- {{cssxref("contain-intrinsic-inline-size")}}
+- {{cssxref("contain-intrinsic-size")}}
+- {{cssxref("contain-intrinsic-width")}}
+- {{cssxref("height")}}
+- {{cssxref("max-height")}}
+- {{cssxref("max-width")}}
+- {{cssxref("min-height")}}
+- {{cssxref("min-width")}}
+- {{cssxref("width")}}
+
+> **メモ:** CSS ボックスサイズ指定モジュールでは、まだ実装されていない `min-intrinsic-sizing` プロパティを導入しています。
+
+### データ型と値
+
+- {{cssxref("ratio")}} データ型
+- {{cssxref("min-content")}} 値
+- {{cssxref("max-content")}} 値
+- {{cssxref("fit-content")}} 値
+- {{cssxref("fit-content_function", "fit-content()")}} 関数
+
+> **メモ:** CSS ボックスサイズ指定モジュールでは、ボックスサイズ指定プロパティにまだ実装されていないサイズ指定値として、`stretch` と `contain` キーワードを導入しています。
+
+### 関数
+
+- [`fit-content()`](/ja/docs/Web/CSS/fit-content_function)
+
+### 用語集の用語
+
+- {{glossary("intrinsic size", "内在サイズ")}}
+
+## ガイド
+
+- [アスペクト比を理解する](/ja/docs/Web/CSS/CSS_box_sizing/Understanding_aspect-ratio)
+
+ - : `aspect-ratio` プロパティについて学び、置換要素と非置換要素のアスペクト比について議論し、一般的なアスペクト比の使用例を検討します。
+
+- [CSS ボックスモデルの紹介](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)
+
+ - : CSS の基本概念のひとつであるボックスモデルについての解説です。このモデルは、CSS が要素をどのようにレイアウトするかを定義するもので、コンテンツ、パディング、境界、マージン領域などが含まれます。
+
+- [マージンの相殺をマスターする](/ja/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)
+
+ - : 隣接する 2 つのマージンが 1 つに折りたたまれることがあります。この記事では、この現象がいつ、なぜ起こるのか、そしてどのように制御するのかについて説明します。
+
+- [視覚整形モデル](/ja/docs/Web/CSS/Visual_formatting_model)
+
+ - : 視覚整形モデルを説明します。
+
+- [主軸方向のフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)
+
+ - : 内在的なサイズ調整について、{{CSSxRef("flex-grow")}}、{{CSSxRef("flex-shrink")}}、{{CSSxRef("flex-basis")}} を使用して主軸に沿ってフレックスアイテムのサイズと柔軟性を制御する方法を理解する前段階として説明します。
+
+## 関連概念
+
+- [CSS 論理的プロパティ](/ja/docs/Web/CSS/CSS_logical_properties_and_values)モジュール
+ - {{CSSxRef("min-inline-size")}}
+ - {{CSSxRef("block-size")}}
+ - {{CSSxRef("inline-size")}}
+ - {{CSSxRef("max-block-size")}}
+ - {{CSSxRef("max-inline-size")}}
+ - {{CSSxRef("min-block-size")}}
+ - {{CSSxRef("min-inline-size")}}
+ - {{CSSxRef("margin-block")}}
+ - {{CSSxRef("margin-inline")}}
+ - {{CSSxRef("padding-block")}}
+ - {{CSSxRef("padding-inline")}}
+ - {{CSSxRef("border-block")}}
+ - {{CSSxRef("border-inline")}}
+ - {{CSSxRef("contain-intrinsic-block-size")}}
+ - {{CSSxRef("contain-intrinsic-inline-size")}}
+ - {{CSSxRef("overflow-block")}}
+ - {{CSSxRef("overflow-inline")}}
+ - {{CSSxRef("overscroll-behavior-block")}}
+ - {{CSSxRef("overscroll-behavior-inline")}}
+- [CSS ボックスモデル](/ja/docs/Web/CSS/CSS_box_model)モジュール
+ - {{cssxref("margin")}} 一括指定プロパティ
+ - {{cssxref("margin-bottom")}}
+ - {{cssxref("margin-left")}}
+ - {{cssxref("margin-right")}}
+ - {{cssxref("margin-top")}}
+ - {{cssxref("margin-trim")}}
+ - {{cssxref("padding")}} 一括指定プロパティ
+ - {{cssxref("padding-bottom")}}
+ - {{cssxref("padding-left")}}
+ - {{cssxref("padding-right")}}
+ - {{cssxref("padding-top")}}
+- [CSS 背景と境界](/ja/docs/Web/CSS/CSS_backgrounds_and_borders)モジュール
+ - {{cssxref("border")}} 一括指定プロパティ
+ - {{cssxref("border-width")}} 一括指定プロパティ
+ - {{cssxref("border-bottom-width")}}
+ - {{cssxref("border-left-width")}}
+ - {{cssxref("border-right-width")}}
+ - {{cssxref("border-top-width")}}
+- [CSS オーバーフロー](/ja/docs/Web/CSS/CSS_overflow)モジュール
+ - {{CSSxRef("overflow")}} 一括指定プロパティ
+ - {{CSSxRef("overflow-block")}}
+ - {{CSSxRef("overflow-clip-margin")}}
+ - {{CSSxRef("overflow-inline")}}
+ - {{CSSxRef("overflow-x")}}
+ - {{CSSxRef("overflow-y")}}
+ - {{CSSxRef("text-overflow")}}
+- [CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_grid_layout)モジュール
+ - {{CSSxRef("grid")}}
+ - {{CSSxRef("grid-auto-columns")}}
+ - {{CSSxRef("grid-auto-rows")}}
+ - {{CSSxRef("grid-template-columns")}}
+ - {{CSSxRef("grid-template-rows")}}
+ - {{CSSxRef("repeat")}}
+ - {{CSSxRef("minmax")}} 関数
+- [CSS フレックスボックスレイアウト](/ja/docs/Web/CSS/CSS_flexible_box_layout)モジュール
+ - {{CSSxRef("flex-basis")}}
+ - {{CSSxRef("flex")}}
+
+## 仕様書
+
+{{Specifications}}
+
+## 関連情報
+
+- [CSS 表示](/ja/docs/Web/CSS/CSS_display)モジュール
+- [CSS フレックスボックスレイアウト](/ja/docs/Web/CSS/CSS_flexible_box_layout)モジュール
+- [CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_grid_layout)モジュール
+- [CSS 位置指定レイアウト](/ja/docs/Web/CSS/CSS_positioned_layout)モジュール
+- [CSS 断片化](/ja/docs/Web/CSS/CSS_fragmentation)モジュール
diff --git a/files/ja/web/html/element/menuitem/index.md b/files/ja/web/html/element/menuitem/index.md
deleted file mode 100644
index b1a095ce53cca8..00000000000000
--- a/files/ja/web/html/element/menuitem/index.md
+++ /dev/null
@@ -1,134 +0,0 @@
----
-title:
-slug: Web/HTML/Element/menuitem
-l10n:
- sourceCommit: 76600240fbe75e083e964bc3707cce81e99999c2
----
-
-{{HTMLSidebar}}{{Deprecated_Header}}{{Non-standard_header}}
-
-**``** は [HTML](/ja/docs/Web/HTML) の要素で、ユーザーがポップアップメニューから呼び出すことができるコマンドを表します。メニューボタンに割り当てるメニューはもちろん、コンテキストメニューも含みます。
-
-コマンドはテキストのラベルと任意で外観を表すアイコン、あるいは代わりに別の要素で動作を定義する*インダイレクトコマンド*で明示的に定義できます。また、任意でコマンドにチェックボックスを含めたり、ラジオボタンを共有するグループにすることができます (インダイレクトコマンドのメニュー項目を `Right-click to see the adjusted context menu
-
-
-```
-
-### CSS
-
-```css
-div {
- width: 300px;
- height: 80px;
- background-color: lightgreen;
-}
-```
-
-### 結果
-
-{{EmbedLiveSample("Example", '100%', 80)}}
-
-## 技術的概要
-
-
-
-
-
- コンテンツカテゴリー
-
- なし。
-
-
- 許可されている内容
- なし。これは{{Glossary("void element", "空要素")}}です。
-
-
- タグの省略
- 開始タグが必須で、終了タグはあってはいけません。
-
-
- 許可されている親要素
-
- ポップアップメニュー 状態である {{HTMLElement("menu")}}
- 要素。（{{HTMLElement("menu")}} 要素の
- type 属性を指定する場合は
- popup にしなければなりません。属性がない場合は
- {{HTMLElement("menu")}}
- の親要素自体がポップアップメニュー 状態の
- {{HTMLElement("menu")}} であることが必要です。）
-
-
-
- 許可されている ARIA ロール
- なし
-
-
- DOM インターフェイス
- {{DOMxRef("HTMLMenuItemElement")}}
-
-
-
-
-## 仕様書
-
-現行のどの仕様書にも含まれていません。
-
-## ブラウザーの互換性
-
-どのブラウザーでも対応していません。この要素を唯一対応していたブラウザー Firefox は、85 で対応を削除しました。
-
-## 関連情報
-
-- [HTML context menus in Firefox (Screencast and Code)](https://hacks.mozilla.org/2011/11/html5-context-menus-in-firefox-screencast-and-code/)
diff --git a/files/ja/web/html/element/template/index.md b/files/ja/web/html/element/template/index.md
index a57886f30757cf..526c922459ff61 100644
--- a/files/ja/web/html/element/template/index.md
+++ b/files/ja/web/html/element/template/index.md
@@ -2,25 +2,78 @@
title: ": コンテンツテンプレート要素"
slug: Web/HTML/Element/template
l10n:
- sourceCommit: e04d8d2766c468f149445c0bf438d09f9b2d188c
+ sourceCommit: 5618052b7314a29552ff9e4331dd3da13dc19f5e
---
{{HTMLSidebar}}
-**``** は [HTML](/ja/docs/Web/HTML) の要素で、ページが読み込まれたときにすぐにレンダリングされるのではなく、実行時に JavaScript を使って後からインスタンス化することができる {{Glossary("HTML")}} を保持するためのメカニズムです。
-
-テンプレートは、文書内に格納されたコンテンツの断片として考えてください。ページの読み込み時にパーサーが **``** 要素の内容を処理している間、その内容の有効性のみが検証されます。しかし、要素の内容は描画されません。
+**``** は [HTML](/ja/docs/Web/HTML) の要素で、{{Glossary("HTML")}} フラグメントを保持し、後で JavaScript を使用して使用したり、シャドウ DOM の中に即座に生成したりするためのメカニズムとして機能します。
## 属性
-`` 要素が対応している標準的な属性は、[グローバル属性](/ja/docs/Web/HTML/Global_attributes)のみです。
+この要素には[グローバル属性](/ja/docs/Web/HTML/Global_attributes)があります。
+
+- `shadowrootmode`
+
+ - : 親要素の[シャドウルート](/ja/docs/Glossary/Shadow_tree)を生成します。
+ これは {{domxref("Element.attachShadow()")}} メソッドの宣言版で、同じ {{glossary("enumerated")}} 値を受け入れます。
+
+ - `open`
+
+ - : 内部シャドウルート DOM を JavaScript に公開します（ほとんどの用途で推奨）。
+
+ - `closed`
+
+ - : 内部シャドウルート DOM を JavaScript から隠します。
+
+ > **メモ:** HTML パーサーは、この属性が設定されているノードの最初の `` に対して、DOM に {{domxref("ShadowRoot")}} オブジェクトを作成します。
+ > この属性が設定されていない場合、または許可された値が設定されていない場合、あるいは `ShadowRoot` が既に同じ親に宣言的に作成されている場合は、{{domxref("HTMLTemplateElement")}} が作成されます。
+ > {{domxref("HTMLTemplateElement")}} は、{{domxref("HTMLTemplateElement.shadowRootMode")}} を設定したりすることで、解釈後にシャドウルートに変更することはできません。
+
+ > **メモ:** 古いチュートリアルや例では、Chrome 90-110 で対応していた非標準の `shadowroot` 属性が見つかるかもしれません。この属性は削除され、標準の `shadowrootmode` 属性に置き換えられています。
+
+- `shadowrootclonable`
+
+ - : この要素を使用して作成した [`ShadowRoot`](/ja/docs/Web/API/ShadowRoot) の [`clonable`](/ja/docs/Web/API/ShadowRoot/clonable) プロパティの値を `true` に設定します。
+ 設定されている場合、シャドウホスト（この `` の親要素）の複製を {{domxref("Node.cloneNode()")}} または {{domxref("Document.importNode()")}} で作成すると、コピーにシャドウルートが含まれます。
+
+- `shadowrootdelegatesfocus`
+
+ - : この要素を使用して作成した [`ShadowRoot`](/ja/docs/Web/API/ShadowRoot) の [`delegatesFocus`](/ja/docs/Web/API/ShadowRoot/delegatesFocus) プロパティの値を `true` に設定します。
+ これが設定されていて、シャドウツリー内のフォーカス可能でない要素が選択されている場合、フォーカスはツリー内の最初のフォーカス可能な要素に譲られます。
+ この値は `false` が既定値です。
-Chromium ベースのブラウザーでは、`` 要素は標準外の [`shadowrootmode` 属性](https://github.com/mfreed7/declarative-shadow-dom/blob/master/README.md#syntax) にも、実験的な ["Declarative Shadow DOM"](https://developer.chrome.com/articles/declarative-shadow-dom/) 提案の一部として対応しています。対応しているブラウザーでは、`` 要素が `shadowrootmode` 属性を持っていることが HTML パーサーによって検出され、直ちに親要素のシャドウルートとして適用されます。`shadowrootmode` は `open` と `closed` のどちらかの値を取ります。これらは {{domxref("Element.attachShadow()")}} の `mode` オプションの `open` と `closed` の値に相当します。
+- `shadowrootserializable` {{experimental_inline}}
-また、対応する {{domxref("HTMLTemplateElement")}} インターフェイスは標準で {{domxref("HTMLTemplateElement.content", "content")}} プロパティを持ち（同等のコンテンツ/マークアップ属性はなく）、読み取り専用の {{domxref("DocumentFragment")}} で、テンプレートが表現する DOM サブツリーを保持しています。なお、{{domxref("HTMLTemplateElement.content", "content")}} プロパティの値を直接使用すると予想外の動作につながる可能性があります。詳しくは、下記の [DocumentFragment の落とし穴の回避](#documentfragment_の落とし穴の回避)の節を参照してください。
+ - : この要素を使用して作成した [`ShadowRoot`](/ja/docs/Web/API/ShadowRoot) の [`serializable`](/ja/docs/Web/API/ShadowRoot/serializable) プロパティの値を `true` に設定します。
+ 設定されている場合、シャドウルートは {{DOMxRef('Element.getHTML()')}} または {{DOMxRef('ShadowRoot.getHTML()')}} メソッドを、`options.serializableShadowRoots` 引数を `true` に設定して呼び出すことでシリアライズされます。
+ この値は `false` が既定値です。
+
+## 使用上のメモ
+
+`` 要素の主な用途は 2 つあります。
+
+### テンプレート文書フラグメント
+
+既定では、要素のコンテンツはレンダリングされません。
+対応する {{domxref("HTMLTemplateElement")}} インターフェイスは標準で {{domxref("HTMLTemplateElement.content", "content")}} プロパティを含みます（同等の content/markup 属性はありません）。この `content` プロパティは読み取り専用で、テンプレートが表す DOM サブツリーを格納する {{domxref("DocumentFragment")}} を保持します。
+このフラグメントは {{domxref("Node.cloneNode", "cloneNode")}} メソッドで複製し、DOM に挿入することができます。
+
+`content` プロパティを使用するときは、返値の `DocumentFragment` が予期せぬ挙動を示すことがあることに注意が必要です。
+詳細は下記の [DocumentFragment の落とし穴を避ける](#documentfragment_の落とし穴を避ける)節を参照してください。
+
+### 宣言的シャドウ DOM
+
+もし `` 要素が [`shadowrootmode`](#shadowrootmode) 属性の値 `open` または `closed` を格納すると、HTML パーサーは直ちにシャドウ DOM を生成します。その要素は {{domxref("ShadowRoot")}} でラップされたコンテンツによって DOM 内で置き換えられ、親要素に装着されます。
+これは {{domxref("Element.attachShadow()")}} を呼び出して要素にシャドウルートを付けるのと宣言的に等価です。
+
+要素が `shadowrootmode` に他の値を示す場合、または `shadowrootmode` 属性を持たない場合、パーサは {{domxref("HTMLTemplateElement")}} を生成します。
+同様に、宣言的シャドウルートが複数ある場合、最初のシャドウルートのみが {{domxref("ShadowRoot")}} で置き換えられ、それ以降は {{domxref("HTMLTemplateElement")}} オブジェクトとして解釈できます。
## 例
+### 表の行を生成
+
まず、HTML 部分の例から始めましょう。
```html
@@ -89,11 +142,121 @@ table td {
}
```
-{{EmbedLiveSample("Examples", 500, 120)}}
+{{EmbedLiveSample("Generating table rows", 500, 120)}}
+
+### 宣言的シャドウ DOM の実装
+
+この例では、マークアップの始めに非表示で対応する警告を記載しています。この警告は後でブラウザーの `shadowrootmode` 属性に対応していない場合に JavaScript で表示するように設定します。次の記事には 2 つの {{HTMLElement("article")}} 要素があり、それぞれ異なる振る舞いをする {{HTMLElement("style")}} 要素を含んでいます。最初の `
+ I'm in the DOM.
+
+
+
+
+ I'm in the shadow DOM.
+
+
+```
+
+```js
+const isShadowRootModeSupported =
+ HTMLTemplateElement.prototype.hasOwnProperty("shadowRootMode");
+
+document
+ .querySelector("p[hidden]")
+ .toggleAttribute("hidden", isShadowRootModeSupported);
+```
+
+{{EmbedGHLiveSample("dom-examples/shadow-dom/shadowrootmode/scoping.html", "", "120")}}
+
+### フォーカスを譲渡を伴う宣言的シャドウ DOM
+
+この例では、`shadowrootdelegatesfocus` を宣言的に作成したシャドウルートに適用し、フォーカスにどのような効果があるかを示します。
+
+このコードでは、最初に `` 要素に `shadowrootmode` 属性を用いて、`` 要素の中にシャドウルートを宣言します。
+これにより、テキストを格納したフォーカスできない `
` と、フォーカスできる `
` 要素の両方が表示されます。
+また、[`:focus`](/ja/docs/Web/CSS/:focus) を持つ要素を青にスタイル設定し、ホスト要素の通常のスタイル設定を設定するには CSS を使用します。
+
+```html
+
+
+
+ Clickable Shadow DOM text
+
+
+```
+
+2 つ目のコードブロックは、`shadowrootdelegatesfocus` 属性を設定している以外は同じです。この属性は、ツリー内のフォーカス可能でない要素が選択された場合に、ツリー内の最初のフォーカス可能な要素にフォーカスを譲ったものです。
+
+```html
+
+
+
+ Clickable Shadow DOM text
+
+
+```
+
+最後に、以下の CSS を使用して、親要素である `
` にフォーカスがあるときに緑黄色の枠線を適用します。
+
+```css
+div:focus {
+ border: 2px solid red;
+}
+```
+
+その結果を下記に示します。
+HTML は最初にレンダリングされるとき、最初の画像に示すように要素にはスタイル設定がありません。
+`shadowrootdelegatesfocus` が設定されていないシャドウルートでは、`
` 以外の場所をクリックしてもフォーカスは変わりません（`
` 要素を選択すると 2 つ目の画像のようになります）。
+
+
+
+`shadowrootdelegatesfocus` を設定したシャドウルートでは、テキスト（フォーカスできない）をクリックすると、`
` 要素が選択されます。
+これは下記に示すように親要素もフォーカスされます。
+
+
## DocumentFragment の落とし穴の回避
-{{domxref("DocumentFragment")}} は様々なイベントのために有効なターゲットではないので、その中の要素を複製したり、参照したりすることが好ましいことがよくあります。
+{{domxref("DocumentFragment")}} の値が渡されると、{{domxref("Node.appendChild")}} や同様のメソッドはその値の子ノードだけを対象とするノードに移動させます。したがって、イベントハンドラーは `DocumentFragment` 自体ではなく、`DocumentFragment` の子ノードに設定することが推奨されます。
以下の HTML および JavaScript を考えてみてください。
@@ -121,14 +284,14 @@ const firstClone = template.content.cloneNode(true);
firstClone.addEventListener("click", clickHandler);
container.appendChild(firstClone);
-const secondClone = template.content.firstElementChild.cloneNode(true);
-secondClone.addEventListener("click", clickHandler);
+const secondClone = template.content.cloneNode(true);
+secondClone.children[0].addEventListener("click", clickHandler);
container.appendChild(secondClone);
```
### 結果
-`firstClone` は DocumentFragment のインスタンスなので、期待通りにコンテナー内に追加されますが、クリックしてもクリックイベントは発生しません。 `secondClone` は {{domxref("HTMLDivElement")}} のインスタンスなので、クリックすると期待通りに動作します。
+`firstClone` は `DocumentFragment` なので、`appendChild` が呼び出されたときに `container` に追加されるのはその子ノードだけで、`firstClone` のイベントハンドラーはコピーされません。一方、`secondClone` は最初の子ノードにイベントハンドラーが追加されているため、`appendChild` が呼び出されるとイベントハンドラーがコピーされ、クリックすると期待通りに動作します。
{{EmbedLiveSample('Avoiding_DocumentFragment_pitfall')}}
@@ -153,7 +316,7 @@ container.appendChild(secondClone);
タグの省略
- {{no_tag_omission}}
+ なし。開始タグと終了タグの両方が必須です。
許可されている親要素
@@ -191,5 +354,12 @@ container.appendChild(secondClone);
## 関連情報
-- ウェブコンポーネント: {{HTMLElement("slot")}} （および過去の ``）
+- [`part`](/ja/docs/Web/HTML/Global_attributes#part) および [`exportparts`](/ja/docs/Web/HTML/Global_attributes#exportparts) 属性
+- {{HTMLElement("slot")}} 要素
+- {{CSSXref(":host")}}、{{CSSXref(":host_function", ":host()")}}、{{CSSXref(":host-context", ":host-context()")}} 擬似クラス
+- {{CSSXref("::part")}}、{{CSSXref("::slotted")}} 擬似要素
+- [`ShadowRoot`](/ja/docs/Web/API/ShadowRoot) インターフェイス
- [テンプレートとスロットの使用](/ja/docs/Web/API/Web_components/Using_templates_and_slots)
+- [CSS スコープ化](/ja/docs/Web/CSS/CSS_scoping) モジュール
+- [宣言的シャドウ DOM （HTML による）](/ja/docs/Web/API/Web_components/Using_shadow_DOM#declaratively_with_html) （シャドウ DOM の使用）
+- [Declarative shadow DOM](https://developer.chrome.com/docs/css-ui/declarative-shadow-dom) (developer.chrome.com, 2023)
diff --git a/files/ja/web/http/headers/permissions-policy/battery/index.md b/files/ja/web/http/headers/permissions-policy/battery/index.md
deleted file mode 100644
index 678001b99f1fd7..00000000000000
--- a/files/ja/web/http/headers/permissions-policy/battery/index.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-title: "Feature-Policy: battery"
-slug: Web/HTTP/Headers/Permissions-Policy/battery
----
-
-{{HTTPSidebar}}{{SeeCompatTable}}
-
-HTTP の {{HTTPHeader("Feature-Policy")}} ヘッダーにおける `battery` ディレクティブは、現在の文書で {{DOMxRef("Navigator.getBattery","Navigator.getBattery()")}} で得られる {{DOMxRef("BatteryManager")}} インターフェイスを通じて、端末のバッテリーに関する情報の収集を許可するかどうかを制御します。
-
-## 構文
-
-```
-Feature-Policy: battery ;
-```
-
-- \
- - : この機能を許可するオリジンのリストです。 [`Feature-Policy`](/ja/docs/Web/HTTP/Headers/Feature-Policy#%E6%A7%8B%E6%96%87) を参照してください。
-
-## 既定のポリシー
-
-`battery` の許可リストの既定値は `'self'` です。
-
-## 仕様書
-
-{{Specifications}}
-
-## ブラウザーの互換性
-
-{{Compat}}
-
-## 関連情報
-
-- {{HTTPHeader("Feature-Policy")}} ヘッダー
-- [機能ポリシー](/ja/docs/Web/HTTP/Feature_Policy)
-- [機能ポリシーの使用](/ja/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy)
-- [Battery Status API](/ja/docs/Web/API/Battery_Status_API)
-- {{DOMxRef("Navigator.getBattery","Navigator.getBattery()")}}
-- {{DOMxRef("BatteryManager")}}
diff --git a/files/ja/web/http/methods/trace/index.md b/files/ja/web/http/methods/trace/index.md
index 3af787c717096c..b2c6ef15e70049 100644
--- a/files/ja/web/http/methods/trace/index.md
+++ b/files/ja/web/http/methods/trace/index.md
@@ -17,11 +17,11 @@ slug: Web/HTTP/Methods/TRACE
成功時のレスポンスの本文
- なし
+ あり
{{Glossary("Safe/HTTP", "安全性")}}
- なし
+ あり
{{Glossary("Idempotent", "べき等性")}}
diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt
index 48d0849814a535..9ba3afad3ec0f1 100644
--- a/files/ko/_redirects.txt
+++ b/files/ko/_redirects.txt
@@ -539,6 +539,7 @@
/ko/docs/Web/API/console/warn /ko/docs/Web/API/console/warn_static
/ko/docs/Web/API/crypto_property /ko/docs/Web/API/Window/crypto
/ko/docs/Web/API/document.importNode /ko/docs/Web/API/Document/importNode
+/ko/docs/Web/API/fetch /ko/docs/Web/API/Window/fetch
/ko/docs/Web/API/window.navigator.battery /ko/docs/Web/API/Navigator/getBattery
/ko/docs/Web/API/window.navigator.connection /ko/docs/Web/API/Navigator/connection
/ko/docs/Web/API/window.screen.lockOrientation /ko/docs/Web/API/Screen/lockOrientation
@@ -742,21 +743,35 @@
/ko/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement /ko/docs/conflicting/Web/JavaScript/Reference/Errors/Unexpected_token
/ko/docs/Web/JavaScript/Reference/Errors/Not_a_codepoint /ko/docs/Web/JavaScript/Reference/Errors/Not_a_valid_code_point
/ko/docs/Web/JavaScript/Reference/Errors/Undefined_prop /ko/docs/orphaned/Web/JavaScript/Reference/Errors/Undefined_prop
+/ko/docs/Web/JavaScript/Reference/Functions/arguments/@@iterator /ko/docs/Web/JavaScript/Reference/Functions/arguments/Symbol.iterator
/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션 /ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions
/ko/docs/Web/JavaScript/Reference/Global_Functions /ko/docs/Web/JavaScript/Reference/Global_Objects
+/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator /ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Symbol.iterator
+/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/@@species /ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Symbol.species
+/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/@@unscopables /ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Symbol.unscopables
/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/constructor /ko/docs/Web/JavaScript/Reference/Global_Objects/Array
+/ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species /ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/Symbol.species
/ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype /ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer
/ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean/constructor /ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive /ko/docs/Web/JavaScript/Reference/Global_Objects/Date/Symbol.toPrimitive
/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/constructor /ko/docs/Web/JavaScript/Reference/Global_Objects/Date
/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype /ko/docs/Web/JavaScript/Reference/Global_Objects/Date
/ko/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat /ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/@@hasInstance /ko/docs/Web/JavaScript/Reference/Global_Objects/Function/Symbol.hasInstance
/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype /ko/docs/Web/JavaScript/Reference/Global_Objects/Function
/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/toSource /ko/docs/Web/JavaScript/Reference/Global_Objects/Function/toString
/ko/docs/Web/JavaScript/Reference/Global_Objects/Locale/language /ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/language
+/ko/docs/Web/JavaScript/Reference/Global_Objects/Map/@@iterator /ko/docs/Web/JavaScript/Reference/Global_Objects/Map/Symbol.iterator
+/ko/docs/Web/JavaScript/Reference/Global_Objects/Map/@@species /ko/docs/Web/JavaScript/Reference/Global_Objects/Map/Symbol.species
/ko/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat /ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler /ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy
/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply /ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply
+/ko/docs/Web/JavaScript/Reference/Global_Objects/Set/@@iterator /ko/docs/Web/JavaScript/Reference/Global_Objects/Set/Symbol.iterator
+/ko/docs/Web/JavaScript/Reference/Global_Objects/String/@@iterator /ko/docs/Web/JavaScript/Reference/Global_Objects/String/Symbol.iterator
+/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive /ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/Symbol.toPrimitive
/ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError/prototype /ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError
+/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator /ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/Symbol.iterator
+/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/@@species /ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/Symbol.species
/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/name /ko/docs/Web/JavaScript/Reference/Global_Objects/Function/name
/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly /ko/docs/WebAssembly/JavaScript_interface
/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError /ko/docs/WebAssembly/JavaScript_interface/CompileError
diff --git a/files/ko/_wikihistory.json b/files/ko/_wikihistory.json
index ce92bdf2971218..b63b77f68e5f01 100644
--- a/files/ko/_wikihistory.json
+++ b/files/ko/_wikihistory.json
@@ -8091,7 +8091,7 @@
"modified": "2020-10-15T21:38:47.452Z",
"contributors": ["alattalatta", "Netaras", "tmxkwkfgka"]
},
- "Web/JavaScript/Reference/Functions/arguments/@@iterator": {
+ "Web/JavaScript/Reference/Functions/arguments/Symbol.iterator": {
"modified": "2020-10-15T22:12:01.387Z",
"contributors": ["alattalatta", "vividhee"]
},
@@ -8149,22 +8149,22 @@
"Aeuiop"
]
},
- "Web/JavaScript/Reference/Global_Objects/Array/@@iterator": {
+ "Web/JavaScript/Reference/Global_Objects/Array/Array": {
+ "modified": "2020-10-15T22:26:58.481Z",
+ "contributors": ["alattalatta"]
+ },
+ "Web/JavaScript/Reference/Global_Objects/Array/Symbol.iterator": {
"modified": "2020-10-15T21:43:02.789Z",
"contributors": ["alattalatta", "KisukPark", "hwangtan", "."]
},
- "Web/JavaScript/Reference/Global_Objects/Array/@@species": {
+ "Web/JavaScript/Reference/Global_Objects/Array/Symbol.species": {
"modified": "2020-10-15T21:50:41.909Z",
"contributors": ["alattalatta", "KisukPark", "imskojs"]
},
- "Web/JavaScript/Reference/Global_Objects/Array/@@unscopables": {
+ "Web/JavaScript/Reference/Global_Objects/Array/Symbol.unscopables": {
"modified": "2020-10-15T21:50:41.776Z",
"contributors": ["alattalatta", "zziuni", "imskojs"]
},
- "Web/JavaScript/Reference/Global_Objects/Array/Array": {
- "modified": "2020-10-15T22:26:58.481Z",
- "contributors": ["alattalatta"]
- },
"Web/JavaScript/Reference/Global_Objects/Array/concat": {
"modified": "2020-10-15T21:38:49.144Z",
"contributors": [
@@ -9587,14 +9587,14 @@
"modified": "2019-06-18T04:56:00.166Z",
"contributors": ["kooljay82", "Netaras", "Khai96_"]
},
- "Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator": {
- "modified": "2019-03-23T22:30:48.269Z",
- "contributors": ["Netaras"]
- },
"Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT": {
"modified": "2020-10-15T21:47:35.788Z",
"contributors": ["alattalatta", "Netaras"]
},
+ "Web/JavaScript/Reference/Global_Objects/TypedArray/Symbol.iterator": {
+ "modified": "2019-03-23T22:30:48.269Z",
+ "contributors": ["Netaras"]
+ },
"Web/JavaScript/Reference/Global_Objects/TypedArray/buffer": {
"modified": "2019-03-23T22:30:15.273Z",
"contributors": ["Netaras"]
diff --git a/files/ko/glossary/baseline/typography/index.md b/files/ko/glossary/baseline/typography/index.md
index 734a43fcd4d006..4f2dbe853e9572 100644
--- a/files/ko/glossary/baseline/typography/index.md
+++ b/files/ko/glossary/baseline/typography/index.md
@@ -2,14 +2,14 @@
title: 기준선 (타이포그래피)
slug: Glossary/Baseline/Typography
l10n:
- sourceCommit: d267a8cb862c20277f81bbc223221b36b0c613e6
+ sourceCommit: 703476742325afe583b74ba0203ff0894b831110
---
{{GlossarySidebar}}
**기준선**은 유럽 및 서아시아 타이포그래피에서 글꼴의 문자가 놓이는 가상의 선을 의미하는 용어입니다.
-{{GlossaryDisambiguation}}
+동아시아 문자에는 기준선이 없으며, 각 글자는 상자 안에 자리 잡고 있어 상단 또는 하단으로 돌출된 부분이 없습니다. 기준선이 낮은 문자와 혼합될 때, 동아시아 문자는 문자 하단이 기준선과 하단선 사이에 오도록 설정해야 합니다.
## 같이 보기
diff --git a/files/ko/web/api/pushevent/index.md b/files/ko/web/api/pushevent/index.md
new file mode 100644
index 00000000000000..fec8368e18f113
--- /dev/null
+++ b/files/ko/web/api/pushevent/index.md
@@ -0,0 +1,71 @@
+---
+title: PushEvent
+slug: Web/API/PushEvent
+l10n:
+ sourceCommit: 3a91caa0ebbc5131ed75afe0e5168cd5bffc0976
+---
+
+{{APIRef("Push API")}}{{SecureContext_Header}}{{AvailableInWorkers("service")}}
+
+[Push API](/ko/docs/Web/API/Push_API)의 **`PushEvent`** 인터페이스는 수신된 푸시 메시지를 나타냅니다. 이 이벤트는 {{domxref("ServiceWorker")}}의 [전역 범위](/ko/docs/Web/API/ServiceWorkerGlobalScope)로 전송됩니다. 애플리케이션 서버에서 {{domxref("PushSubscription")}}로 전송된 정보를 포함합니다.
+
+{{InheritanceDiagram}}
+
+## 생성자
+
+- {{domxref("PushEvent.PushEvent", "PushEvent()")}}
+ - : 새로운 `PushEvent` 객체를 생성합니다.
+
+## 인스턴스 속성
+
+부모인 {{domxref("ExtendableEvent")}}에서 속성을 상속받습니다. 다음은 추가 속성입니다.
+
+- {{domxref("PushEvent.data")}} {{ReadOnlyInline}}
+ - : {{domxref("PushSubscription")}}으로 전송된 데이터를 포함하는 {{domxref("PushMessageData")}} 객체에 대한 참조를 반환합니다.
+
+## 인스턴스 메서드
+
+부모인 {{domxref("ExtendableEvent")}}에서 메서드를 상속받습니다.
+
+## 예제
+
+다음 예제는 `PushEvent`에서 데이터를 가져와 서비스 워커의 모든 클라이언트에 표시합니다.
+
+```js
+self.addEventListener("push", (event) => {
+ if (!(self.Notification && self.Notification.permission === "granted")) {
+ return;
+ }
+
+ const data = event.data?.json() ?? {};
+ const title = data.title || "Something Has Happened";
+ const message =
+ data.message || "Here's something you might want to check out.";
+ const icon = "images/new-notification.png";
+
+ const notification = new self.Notification(title, {
+ body: message,
+ tag: "simple-push-demo-notification",
+ icon,
+ });
+
+ notification.addEventListener("click", () => {
+ clients.openWindow(
+ "https://example.blog.com/2015/03/04/something-new.html",
+ );
+ });
+});
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [Push API](/ko/docs/Web/API/Push_API)
+- [Service Worker API](/ko/docs/Web/API/Service_Worker_API)
diff --git a/files/ko/web/api/fetch/index.md b/files/ko/web/api/window/fetch/index.md
similarity index 99%
rename from files/ko/web/api/fetch/index.md
rename to files/ko/web/api/window/fetch/index.md
index b26ec13a498dfa..ad802f372e59fd 100644
--- a/files/ko/web/api/fetch/index.md
+++ b/files/ko/web/api/window/fetch/index.md
@@ -1,7 +1,7 @@
---
title: fetch() 전역 함수
-short-title: fetch()
-slug: Web/API/fetch
+slug: Web/API/Window/fetch
+original_slug: Web/API/fetch
l10n:
sourceCommit: 15db4f1dd87a80c4aec2cfba3e73bc8291f29110
---
diff --git a/files/ko/web/css/_doublecolon_view-transition-group/index.md b/files/ko/web/css/_doublecolon_view-transition-group/index.md
new file mode 100644
index 00000000000000..2dfe85f772cf58
--- /dev/null
+++ b/files/ko/web/css/_doublecolon_view-transition-group/index.md
@@ -0,0 +1,73 @@
+---
+title: "::view-transition-group"
+slug: Web/CSS/::view-transition-group
+l10n:
+ sourceCommit: 722311032dbf520bf6aeba3d1f432aca38779ffd
+---
+
+{{CSSRef}}{{SeeCompatTable}}
+
+**`::view-transition-group`** [CSS](/ko/docs/Web/CSS) [의사 요소](/ko/docs/Web/CSS/Pseudo-elements)는 단일 뷰 전환 스냅샷 그룹을 나타냅니다.
+
+뷰 전환이 이루어지는 동안, `::view-transition` 는 [뷰 전환 의사 요소 트리](/ko/docs/Web/API/View_Transitions_API/Using#the_view_transition_pseudo-element_tree) 에 기술된 것처럼 연관된 의사 요소 트리에 포함됩니다. 이는 {{cssxref("::view-transition")}}의 자식으로만 존재하며, {{cssxref("::view-transition-image-pair")}} 를 자식으로 가집니다.
+
+`::view-transition-group` 는 UA 스타일시트에서 다음과 같은 스타일을 기본으로 부여 받습니다.
+
+```css
+html::view-transition-group(*) {
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ animation-duration: 0.25s;
+ animation-fill-mode: both;
+}
+```
+
+기본적으로 선택된 요소는 오래된 뷰 상태를 나타내는 {{cssxref("::view-transition-old")}} 의사 요소의 크기와 위치를 반영하지만, 오래된 뷰 상태가 없는 경우에 새로운 뷰 상태를 나타내는 {{cssxref("::view-transition-new")}} 의사 요소의 크기위 위치를 반영하게 됩니다.
+
+오래된 뷰 상태와 새로운 뷰 상태가 동시에 존재한다면, 뷰 전환 스타일 시트의 스타일은 이 의사 요소의 {{cssxref("width", "너비")}} 와 {{cssxref("height", "높이")}}를 오래된 뷰 상태의 테두리 박스로부터 새로운 뷰 상태의 테두리 박스로의 애니메이션을 진행합니다.
+
+> **참고:** 뷰 전환 스타일은 뷰 전환이 이루어지는 동안 동적으로 생성됩니다. 더 많은 정보는 [setup transition pseudo-elements](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements) 와 [update pseudo-element styles](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles) 섹션 명세서를 참고하여 확인할 수 있습니다.
+
+더불어, 요소의 변형은 오래된 뷰 상태의 화면 공간 변형에서 새로운 뷰 상태의 화면 공간으로 애니메이션이 진행됩니다. 이러한 스타일은 애니메이션이 진행된 속성 값이 전환을 시작할 때 결정되므로 동적으로 생성됩니다.
+
+## 구문
+
+```css-nolint
+::view-transition-group() {
+ /* ... */
+}
+```
+
+`` 는 다음 값들을 가질 수 있습니다.
+
+- `*`
+ - : 의사 요소를 모든 뷰 전환 그룹에 대해 일치하도록 합니다.
+- `root`
+ - : 의사 요소를 사용자 에이전트가 생성한 기본 `root` 뷰 전환 그룹과 일치하도록 합니다. 이 그룹은 페이지 전체의 뷰 전환을 포함하고, {{cssxref("view-transition-name")}} 속성을 통해 고유한 뷰 전환 그룹에 할당되지 않은 모든 요소를 포함합니다.
+- {{cssxref("custom-ident")}}
+ - : {{cssxref("view-transition-name")}} 속성을 통해 의사 요소를 주어진 {{cssxref("custom-ident")}} 로부터 할당받아 생성된 특정 뷰 전환 그룹과 일치하도록 합니다.
+
+## 예제
+
+```css
+view-transition-group(embed-container) {
+ animation-duration: 0.3s;
+ animation-timing-function: ease;
+ z-index: 1;
+}
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [뷰 전환 API](/ko/docs/Web/API/View_Transitions_API)
+- [뷰 전환 API와 부드럽고 간단한 트랜지션](https://developer.chrome.com/docs/web-platform/view-transitions/)
diff --git a/files/ko/web/css/_doublecolon_view-transition-new/index.md b/files/ko/web/css/_doublecolon_view-transition-new/index.md
new file mode 100644
index 00000000000000..c58d45455ff8d8
--- /dev/null
+++ b/files/ko/web/css/_doublecolon_view-transition-new/index.md
@@ -0,0 +1,120 @@
+---
+title: "::view-transition-new"
+slug: Web/CSS/::view-transition-new
+l10n:
+ sourceCommit: 722311032dbf520bf6aeba3d1f432aca38779ffd
+---
+
+{{CSSRef}}{{SeeCompatTable}}
+
+**`::view-transition-new`** [CSS](/ko/docs/Web/CSS) [의사 요소](/ko/docs/Web/CSS/Pseudo-elements)는 전환 후의 상태를 나타내는 스냅샷, 즉 뷰 전환의 새로운 뷰 상태를 나타냅니다.
+
+뷰 전환이 이루어지는 동안, `::view-transition-new` 는 [뷰 전환 의사 요소 트리](/ko/docs/Web/API/View_Transitions_API/Using#the_view_transition_pseudo-element_tree) 에 기술된 것처럼 연관된 의사 요소 트리에 포함됩니다. 이는 {{cssxref("::view-transition-image-pair")}} 의 자식 요소로만 존재하고, 다른 자식 요소는 가질 수 없습니다.
+
+이 속성은 재배치된 요소이기 때문에, {{cssxref("object-fit")}} 와 {{cssxref("object-position")}} 같은 속성으로 조작할 수 있습니다. 이 요소의 자연 치수는 콘텐츠의 크기와 동일합니다.
+
+UA 스타일시트에서 다음과 같은 스타일을 기본으로 부여 받습니다.
+
+```css
+:root::view-transition-old(*),
+:root::view-transition-new(*) {
+ position: absolute;
+ inset-block-start: 0;
+ inline-size: 100%;
+ block-size: auto;
+
+ animation-duration: inherit;
+ animation-fill-mode: inherit;
+ animation-delay: inherit;
+}
+
+/* 2개의 이미지가 존재할 때 블렌딩을 위한 키프레임 */
+@keyframes -ua-mix-blend-mode-plus-lighter {
+ from {
+ mix-blend-mode: plus-lighter;
+ }
+ to {
+ mix-blend-mode: plus-lighter;
+ }
+}
+
+@keyframes -ua-view-transition-fade-in {
+ from {
+ opacity: 0;
+ }
+}
+```
+
+> **참고:** 추가적인 뷰 전환 스타일은 `::view-transition-new` 의 애니메이션을 설정할 수 있습니다. 뷰 전환 스타일은 뷰 전환이 이루어지는 동안 동적으로 생성됩니다. 더 많은 정보는 [setup transition pseudo-elements](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements) 와 [update pseudo-element styles](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles) 섹션 명세서를 참고하여 확인할 수 있습니다.
+
+## 구문
+
+```css-nolint
+::view-transition-new() {
+ /* ... */
+}
+```
+
+`` 는 다음 값들을 가질 수 있습니다.
+
+- `*`
+ - : 의사 요소를 모든 뷰 전환 그룹에 대해 일치하도록 합니다.
+- `root`
+ - : 의사 요소를 사용자 에이전트가 생성한 기본 `root` 뷰 전환 스냅샷 그룹과 일치하도록 합니다. 이 그룹은 페이지 전체의 뷰 전환을 포함하고, {{cssxref("view-transition-name")}} 속성을 통해 고유한 뷰 전환 스냅샷 그룹에 할당되지 않은 모든 요소를 포함합니다.
+- {{cssxref("custom-ident")}}
+ - : {{cssxref("view-transition-name")}} 속성을 통해 의사 요소를 주어진 {{cssxref("custom-ident")}} 로부터 할당받아 생성된 특정 뷰 전환 스냅샷 그룹과 일치하도록 합니다.
+
+## 예제
+
+```css
+figcaption {
+ view-transition-name: figure-caption;
+}
+
+@keyframes grow-x {
+ from {
+ transform: scaleX(0);
+ }
+ to {
+ transform: scaleX(1);
+ }
+}
+
+@keyframes shrink-x {
+ from {
+ transform: scaleX(1);
+ }
+ to {
+ transform: scaleX(0);
+ }
+}
+
+::view-transition-old(figure-caption),
+::view-transition-new(figure-caption) {
+ height: auto;
+ right: 0;
+ left: auto;
+ transform-origin: right center;
+}
+
+::view-transition-old(figure-caption) {
+ animation: 0.25s linear both shrink-x;
+}
+
+::view-transition-new(figure-caption) {
+ animation: 0.25s 0.25s linear both grow-x;
+}
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [뷰 전환 API](/ko/docs/Web/API/View_Transitions_API)
+- [뷰 전환 API와 부드럽고 간단한 트랜지션](https://developer.chrome.com/docs/web-platform/view-transitions/)
diff --git a/files/ko/web/css/_doublecolon_view-transition-old/index.md b/files/ko/web/css/_doublecolon_view-transition-old/index.md
new file mode 100644
index 00000000000000..4d2f8e9350f60e
--- /dev/null
+++ b/files/ko/web/css/_doublecolon_view-transition-old/index.md
@@ -0,0 +1,120 @@
+---
+title: "::view-transition-old"
+slug: Web/CSS/::view-transition-old
+l10n:
+ sourceCommit: 722311032dbf520bf6aeba3d1f432aca38779ffd
+---
+
+{{CSSRef}}{{SeeCompatTable}}
+
+**`::view-transition-old`** [CSS](/ko/docs/Web/CSS) [의사 요소](/ko/docs/Web/CSS/Pseudo-elements)는 전환 이전의 상태를 나타내는 스냅샷, 즉 뷰 전환의 과거 뷰 상태를 나타냅니다.
+
+뷰 전환이 이루어지는 동안, `::view-transition-old` 는 [뷰 전환 의사 요소 트리](/ko/docs/Web/API/View_Transitions_API/Using#the_view_transition_pseudo-element_tree) 에 기술된 것처럼 연관된 의사 요소 트리에 포함됩니다. 이는 {{cssxref("::view-transition-image-pair")}} 의 자식 요소로만 존재하고, 다른 자식 요소는 가질 수 없습니다.
+
+이 속성은 재배치된 요소이기 때문에, {{cssxref("object-fit")}} 와 {{cssxref("object-position")}} 같은 속성으로 조작할 수 있습니다. 이 요소의 자연 치수는 콘텐츠의 크기와 동일합니다.
+
+UA 스타일시트에서 다음과 같은 스타일을 기본으로 부여 받습니다.
+
+```css
+:root::view-transition-old(*),
+:root::view-transition-new(*) {
+ position: absolute;
+ inset-block-start: 0;
+ inline-size: 100%;
+ block-size: auto;
+
+ animation-duration: inherit;
+ animation-fill-mode: inherit;
+ animation-delay: inherit;
+}
+
+/* 2개의 이미지가 존재할 때 블렌딩을 위한 키프레임 */
+@keyframes -ua-mix-blend-mode-plus-lighter {
+ from {
+ mix-blend-mode: plus-lighter;
+ }
+ to {
+ mix-blend-mode: plus-lighter;
+ }
+}
+
+@keyframes -ua-view-transition-fade-out {
+ to {
+ opacity: 0;
+ }
+}
+```
+
+> **참고:** 추가적인 뷰 전환 스타일은 `::view-transition-old` 의 애니메이션을 설정할 수 있습니다. 뷰 전환 스타일은 뷰 전환이 이루어지는 동안 동적으로 생성됩니다. 더 많은 정보는 [전환 의사 요소 설정](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements)과 [의사 요소 스타일 업데이트](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles) 섹션 명세서를 참고하여 확인할 수 있습니다.
+
+## 구문
+
+```css-nolint
+::view-transition-old() {
+ /* ... */
+}
+```
+
+`` 는 다음 값들을 가질 수 있습니다.
+
+- `*`
+ - : 의사 요소를 모든 뷰 전환 그룹에 대해 일치하도록 합니다.
+- `root`
+ - : 의사 요소를 사용자 에이전트가 생성한 기본 `root` 뷰 전환 스냅샷 그룹과 일치하도록 합니다. 이 그룹은 페이지 전체의 뷰 전환을 포함하고, {{cssxref("view-transition-name")}} 속성을 통해 고유한 뷰 전환 스냅샷 그룹에 할당되지 않은 모든 요소를 포함합니다.
+- {{cssxref("custom-ident")}}
+ - : {{cssxref("view-transition-name")}} 속성을 통해 의사 요소를 주어진 {{cssxref("custom-ident")}} 로부터 할당받아 생성된 특정 뷰 전환 스냅샷 그룹과 일치하도록 합니다.
+
+## 예제
+
+```css
+figcaption {
+ view-transition-name: figure-caption;
+}
+
+@keyframes grow-x {
+ from {
+ transform: scaleX(0);
+ }
+ to {
+ transform: scaleX(1);
+ }
+}
+
+@keyframes shrink-x {
+ from {
+ transform: scaleX(1);
+ }
+ to {
+ transform: scaleX(0);
+ }
+}
+
+::view-transition-old(figure-caption),
+::view-transition-new(figure-caption) {
+ height: auto;
+ right: 0;
+ left: auto;
+ transform-origin: right center;
+}
+
+::view-transition-old(figure-caption) {
+ animation: 0.25s linear both shrink-x;
+}
+
+::view-transition-new(figure-caption) {
+ animation: 0.25s 0.25s linear both grow-x;
+}
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [뷰 전환 API](/ko/docs/Web/API/View_Transitions_API)
+- [뷰 전환 API와 부드럽고 간단한 트랜지션](https://developer.chrome.com/docs/web-platform/view-transitions/)
diff --git a/files/ko/web/css/column_combinator/index.md b/files/ko/web/css/column_combinator/index.md
new file mode 100644
index 00000000000000..ab98bf35410c6c
--- /dev/null
+++ b/files/ko/web/css/column_combinator/index.md
@@ -0,0 +1,85 @@
+---
+title: Column combinator
+slug: Web/CSS/Column_combinator
+l10n:
+ sourceCommit: 7fa9b134e7a886b47bd8c6e3135ba329ee0ddf09
+---
+
+{{CSSRef}} {{SeeCompatTable}}
+
+**컬럼 결합자** (`||`)는 CSS 선택자 사이에 위치합니다. 이는 첫번째 선택자에 의해 일치되는 컬럼 요소에 속하는 두번째 선택자와 일치되는 요소들만을 매칭합니다.
+
+```css
+/* "selected" 컬럼에 속한 테이블 셀 */
+col.selected||td {
+ background: gray;
+}
+```
+
+## 구문
+
+```css-nolint
+/* || 결합자 주위의 공백은 선택이자 권장 사항입니다. */
+column-selector || cell-selector {
+ /* style properties */
+}
+```
+
+## 예제
+
+### HTML
+
+```html
+
+
+
+
+
+ A
+ B
+ C
+
+
+
+ D
+ E
+
+
+ F
+ G
+
+
+
+```
+
+### CSS
+
+```css
+col.selected||td {
+ background: gray;
+ color: white;
+ font-weight: bold;
+}
+```
+
+### 결과
+
+{{EmbedLiveSample("Examples", "100%")}}
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{HTMLElement("col")}}
+- {{HTMLElement("colgroup")}}
+- {{CSSxRef("grid", "그리드")}}
+- {{CSSxRef(":nth-of-type")}}
+- {{CSSxRef(":nth-last-of-type")}}
diff --git a/files/ko/web/css/css_font_loading/index.md b/files/ko/web/css/css_font_loading/index.md
new file mode 100644
index 00000000000000..abc6c53648ff4f
--- /dev/null
+++ b/files/ko/web/css/css_font_loading/index.md
@@ -0,0 +1,45 @@
+---
+title: CSS font loading
+slug: Web/CSS/CSS_font_loading
+l10n:
+ sourceCommit: fe5361c29eab373c0b60d07bb86dbf0048220110
+---
+
+{{CSSRef}}
+
+**CSS 글꼴 로딩**은 글꼴 관련 리소스를 동적으로 로드하는 데 사용되는 이벤트와 인터페이스를 설명하는 모듈입니다.
+
+## 참고서
+
+### 인터페이스
+
+- {{domxref("fontFace")}} 인터페이스
+ - [`FontFace()`](/ko/docs/Web/API/FontFace/FontFace) 생성자
+ - {{domxref("fontFace.family")}} 속성
+ - {{domxref("fontFace.style")}} 속성
+ - {{domxref("fontFace.weight")}} 속성
+ - {{domxref("fontFace.stretch")}} 속성
+ - {{domxref("fontFace.unicodeRange")}} 속성
+ - {{domxref("fontFace.variant")}} 속성
+ - {{domxref("fontFace.featureSettings")}} 속성
+ - {{domxref("fontFace.variationSettings")}} 속성
+ - {{domxref("fontFace.display")}} 속성
+ - {{domxref("fontFace.ascentOverride")}} 속성
+ - {{domxref("fontFace.descentOverride")}} 속성
+ - {{domxref("fontFace.lineGapOverride")}} 속성
+ - {{domxref("fontFace.load()")}} promise 반환 메서드
+- {{domxref("fontFaceSet")}} 인터페이스
+- {{domxref("fontFaceSetLoadEvent")}} 이벤트
+
+## 안내서
+
+- [CSS 글꼴 로딩 API](/ko/docs/Web/API/CSS_Font_Loading_API)
+ - : 글꼴 리소스를 동적으로 로드하기 위한 이벤트와 인터페이스를 제공하는 CSS 글꼴 로딩 API에 대한 설명입니다.
+
+## 명세서
+
+{{Specifications}}
+
+## 같이 보기
+
+- [CSS 폰트](/ko/docs/Web/CSS/CSS_fonts) 모듈
diff --git a/files/ko/web/css/css_positioned_layout/index.md b/files/ko/web/css/css_positioned_layout/index.md
index ac451846d94bb8..3842eb63d8cf99 100644
--- a/files/ko/web/css/css_positioned_layout/index.md
+++ b/files/ko/web/css/css_positioned_layout/index.md
@@ -1,28 +1,38 @@
---
-title: CSS Positioning
+title: CSS positioned layout
slug: Web/CSS/CSS_positioned_layout
+l10n:
+ sourceCommit: e1b6d7d2d02a07f7e86268c81678713fad4d9a5d
---
{{CSSRef}}
-**CSS Positioning**은 요소를 페이지에 배치하는 방법을 정의하는 CSS 모듈입니다.
+**CSS positioned layout**은 요소를 페이지에 배치하는 방법을 정의하는 CSS 모듈입니다.
## 참고서
### CSS 속성
+- {{cssxref("top")}}
+- {{cssxref("right")}}
- {{cssxref("bottom")}}
-- {{cssxref("clear")}}
-- {{cssxref("float")}}
- {{cssxref("left")}}
+- {{cssxref("inset")}}
+- {{cssxref("inset-inline")}}
+- {{cssxref("inset-inline-start")}}
+- {{cssxref("inset-inline-end")}}
+- {{cssxref("inset-block")}}
+- {{cssxref("inset-block-start")}}
+- {{cssxref("inset-block-end")}}
+- {{cssxref("float")}}
+- {{cssxref("clear")}}
- {{cssxref("position")}}
-- {{cssxref("right")}}
-- {{cssxref("top")}}
- {{cssxref("z-index")}}
+- {{cssxref("transform")}}
## 안내서
-- [CSS z-index 이해하기](/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index)
+- [CSS z-index 이해하기](/ko/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index)
- : 쌓임 문맥의 개념을 소개하고 몇 가지 예와 함께 z축 순서의 동작을 설명합니다.
## 명세
diff --git a/files/ko/web/html/attributes/elementtiming/index.md b/files/ko/web/html/attributes/elementtiming/index.md
new file mode 100644
index 00000000000000..3c9df99d6ad24f
--- /dev/null
+++ b/files/ko/web/html/attributes/elementtiming/index.md
@@ -0,0 +1,42 @@
+---
+title: "HTML attribute: elementtiming"
+slug: Web/HTML/Attributes/elementtiming
+l10n:
+ sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35
+---
+
+{{HTMLSidebar}}
+
+**`elementtiming`** 특성은 `"element"` 타입을 사용하는 {{domxref("PerformanceObserver")}} 객체가 추적할 요소를 표시하는 데 사용됩니다. 자세한 내용은 {{domxref("PerformanceElementTiming")}} 인터페이스를 참조하세요.
+
+이 특성은 {{htmlelement("img")}}, {{SVGElement("image")}} 요소가 {{SVGElement("svg")}} 내부에 있을 때, {{htmlelement("video")}} 요소의 포스터 이미지, {{cssxref("background-image")}}를 가지는 요소, 그리고 {{htmlelement("p")}}와 같이 텍스트 노드를 포함하는 요소에 적용될 수 있습니다.
+
+DOM에서의 해당 특성은 {{domxref("Element.elementTiming")}}로 반영됩니다.
+
+## 사용
+
+`elementtiming`에 주어진 값은 관찰된 요소의 식별자가 됩니다.
+
+```html
+Some very important information.
+```
+
+## 같이 보기
+
+- {{domxref("PerformanceElementTiming")}}
+- {{domxref("Element.elementTiming")}}
diff --git a/files/ko/web/http/headers/sec-websocket-accept/index.md b/files/ko/web/http/headers/sec-websocket-accept/index.md
new file mode 100644
index 00000000000000..10a996f7faedcd
--- /dev/null
+++ b/files/ko/web/http/headers/sec-websocket-accept/index.md
@@ -0,0 +1,52 @@
+---
+title: Sec-WebSocket-Accept
+slug: Web/HTTP/Headers/Sec-WebSocket-Accept
+l10n:
+ sourceCommit: 0880a90f3811475d78bc4b2c344eb4146f25f66c
+---
+
+{{HTTPSidebar}}
+
+**Sec-WebSocket-Accept** 헤더는 웹소켓 오프닝 핸드셰이크에 사용됩니다. 이는 응답 헤더에 나타납니다. 즉, 이 헤더는 서버가 웹소켓 연결을 시작할 의향을 알리기 위해 서버에서 클라이언트로 전송하는 헤더입니다.
+
+
+
+
+ 헤더 타입
+ {{Glossary("Response header", "요청 헤더")}}
+
+
+ {{Glossary("Forbidden header name", "금지된 헤더 이름")}}
+ 아니요
+
+
+
+
+## 구문
+
+```http
+Sec-WebSocket-Accept:
+```
+
+## 지시어
+
+- \
+ - : 서버는 핸드셰이크 요청에서 전송된 Sec-WebSocket-Key의 값을 가져와서 `258EAFA5-E914-47DA-95CA-C5AB0DC85B11`을 덧붙이고, 새 값의 SHA-1 값을 가져온 다음, [base64](/ko/docs/Glossary/Base64)로 인코딩합니다.
+
+## 예제
+
+```http
+Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 같이 보기
+
+- {{HTTPHeader("Sec-WebSocket-Key")}}
+
+## 브라우저 호환성
+
+{{Compat}}
diff --git a/files/ko/web/http/methods/options/index.md b/files/ko/web/http/methods/options/index.md
index e404450e6321eb..9646fc9098b6ac 100644
--- a/files/ko/web/http/methods/options/index.md
+++ b/files/ko/web/http/methods/options/index.md
@@ -58,7 +58,7 @@ curl -X OPTIONS https://example.org -i
그럼 응답은 허용된 메서드를 가지고 있는 {{HTTPHeader("Allow")}} 헤더가 있습니다.
```http
-HTTP/1.1 200 No Content
+HTTP/1.1 204 No Content
Allow: OPTIONS, GET, HEAD, POST
Cache-Control: max-age=604800
Date: Thu, 13 Oct 2016 11:45:00 GMT
@@ -96,7 +96,7 @@ Access-Control-Request-Headers: X-PINGOTHER, Content-Type
- : 위 권한은 86,400초(1일) 동안 캐시될 수 있습니다.
```http
-HTTP/1.1 200 No Content
+HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: https://foo.example
diff --git a/files/ko/web/javascript/closures/index.md b/files/ko/web/javascript/closures/index.md
index a649245eb193f1..30e51e9309bc25 100644
--- a/files/ko/web/javascript/closures/index.md
+++ b/files/ko/web/javascript/closures/index.md
@@ -84,7 +84,7 @@ myFunc();
한눈에 봐서는, 이 코드가 여전히 작동하는 것이 직관적으로 보이지 않을 수 있습니다. 몇몇 프로그래밍 언어에서, 함수 안의 지역 변수들은 그 함수가 처리되는 동안에만 존재합니다. `makeFunc()` 실행이 끝나면, `name` 변수에 더 이상 접근할 수 없게 될 것으로 예상하는 것이 일반적이지만, 코드는 여전히 예상대로 작동하기 때문에 JavaScript에서는 분명히 다릅니다.
그 이유는 JavaScript의 함수가 클로저를 형성하기 때문입니다. 클로저는 함수와 함수가 선언된 어휘적 환경의 조합입니다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성됩니다. 예시의 경우, `myFunc`은 `makeFunc`이 실행
-될 때 생성된 `displayName` 함수의 인스턴스에 대한 참조입니다. `displayName`의 인스턴스는 변수 `name` 이 있는 어휘적 환경에 대한 참조를 유지합니다. 이런 이유로, `myFunc`가 호출될 때 변수 `name`은 사용할 수 있는 상태로 남게 되고 "Mozilla" 가 `console.log` 에 전달된다.
+될 때 생성된 `displayName` 함수의 인스턴스에 대한 참조입니다. `displayName`의 인스턴스는 변수 `name` 이 있는 어휘적 환경에 대한 참조를 유지합니다. 이런 이유로, `myFunc`가 호출될 때 변수 `name`은 사용할 수 있는 상태로 남게 되고 "Mozilla" 가 `console.log` 에 전달됩니다.
다음은 조금 더 흥미로운 예제인 `makeAdder` 함수입니다.
diff --git a/files/ko/web/javascript/reference/functions/arguments/@@iterator/index.md b/files/ko/web/javascript/reference/functions/arguments/symbol.iterator/index.md
similarity index 82%
rename from files/ko/web/javascript/reference/functions/arguments/@@iterator/index.md
rename to files/ko/web/javascript/reference/functions/arguments/symbol.iterator/index.md
index b87cdb89d7af39..90d4a700da6a7d 100644
--- a/files/ko/web/javascript/reference/functions/arguments/@@iterator/index.md
+++ b/files/ko/web/javascript/reference/functions/arguments/symbol.iterator/index.md
@@ -1,6 +1,7 @@
---
title: arguments[@@iterator]()
-slug: Web/JavaScript/Reference/Functions/arguments/@@iterator
+slug: Web/JavaScript/Reference/Functions/arguments/Symbol.iterator
+original_slug: Web/JavaScript/Reference/Functions/arguments/@@iterator
---
{{jsSidebar("Functions")}}
diff --git a/files/ko/web/javascript/reference/global_objects/array/copywithin/index.md b/files/ko/web/javascript/reference/global_objects/array/copywithin/index.md
index 7cbd19c5d75c2d..83bb906b13f5c3 100644
--- a/files/ko/web/javascript/reference/global_objects/array/copywithin/index.md
+++ b/files/ko/web/javascript/reference/global_objects/array/copywithin/index.md
@@ -2,7 +2,7 @@
title: Array.prototype.copyWithin()
slug: Web/JavaScript/Reference/Global_Objects/Array/copyWithin
l10n:
- sourceCommit: b7ca46c94631967ecd9ce0fe36579be334a01275
+ sourceCommit: 6e8ca9ecc4bfd14ea5c46d4817f189eecacb8296
---
{{JSRef}}
@@ -21,22 +21,22 @@ copyWithin(target, start, end)
### 매개변수
- `target`
- - : 시퀀스를 복사할 0 기반 인덱스로, [정수로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#정수_변환)됩니다.
- - 음수 인덱스는 배열의 끝부터 셉니다. `target < 0`이라면, `target + array.length`이 사용됩니다.
+ - : 시퀀스를 복사할 0 기반 인덱스로, [정수로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#정수_변환)됩니다. 이는 `start`에 있는 요소가 복사될 위치에 해당하며, `start`과 `end` 사이의 모든 요소는 후속 인덱스에 복사됩니다.
+ - 음수 인덱스는 배열의 끝부터 셉니다. `-array.length <= target < 0`이라면, `target + array.length`이 사용됩니다.
- `target < -array.length`이면, `0`이 사용됩니다.
- `target >= array.length`이면, 아무것도 복사되지 않습니다.
- - 정수 변환 후 `target`이 `start` 보디 뒤에 위치하면, `array.length`의 끝부분까지만 복사가 수행됩니다(즉, `copyWithin()`은 배열을 확장하지 않습니다).
+ - 정수 변환 후 `target`이 `start` 보다 뒤에 위치하면, `array.length`의 끝부분까지만 복사가 수행됩니다(즉, `copyWithin()`은 배열을 확장하지 않습니다).
- `start`
- : 요소 복사를 시작할 0 기반 인덱스로, [정수로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#정수_변환)됩니다.
- - 음수 인덱스는 배열의 끝부터 셉니다. `target < 0`이라면, `target + array.length`이 사용됩니다.
+ - 음수 인덱스는 배열의 끝부터 셉니다. `-array.length <= start < 0`이라면, `target + array.length`이 사용됩니다.
- `target < -array.length`이면, `0`이 사용됩니다.
- `target >= array.length`이면, 아무것도 복사되지 않습니다.
- `end` {{optional_inline}}
- : 요소 복사를 끝낼 0 기반 인덱스로, [정수로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#정수_변환)됩니다. `copyWithin()`은 `end`를 포함하지 않고 `end`전 까지 복사합니다.
- - 음수 인덱스는 배열의 끝부터 셉니다. `target < 0`이라면, `target + array.length`이 사용됩니다.
+ - 음수 인덱스는 배열의 끝부터 셉니다. `-array.length <= end < 0`이라면, `target + array.length`이 사용됩니다.
- `target < -array.length`이면, `0`이 사용됩니다.
- `end >= array.length` 이거나 `end`가 생략되면, `array.length`가 사용됩니다. 이는 끝까지 모든 요소를 복사하는 것이 됩니다.
- - 정수 변환 후 `end`가 `start`뒤에 위치하면, 아무것도 복사되지 않습니다.
+ - `end`가 `start`가 암시하는 위치나 그 앞의 위치를 암시하는 경우 아무것도 복사되지 않습니다.
### 반환 값
@@ -57,7 +57,7 @@ console.log([1, 2, 3, 4, 5].copyWithin(2));
`copyWithin()` 메서드는 빈 슬롯을 보존합니다. 복사할 영역이 [희소](/ko/docs/Web/JavaScript/Guide/Indexed_collections#희소_배열)인 경우, 빈 슬롯의 해당 새 인덱스에 있는 항목은 [삭제](/ko/docs/Web/JavaScript/Reference/Operators/delete)되고 빈 슬롯이 됩니다.
-`copyWithin()` 메서드는 [범용](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#범용_배열_메서드)입니다. 이 메서드는 `this` 값에 `length` 속성과 정수 키 속성만 있을 것으로 예상합니다. 문자열도 유사 배열이지만, 문자열은 불변이므로 이 메서드를 적용하기에는 적합하지 않습니다.
+`copyWithin()` 메서드는 [범용](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#범용_배열_메서드)입니다. `this` 값에 `length` 속성과 정수 키 속성 만을 기대합니다. 문자열도 유사 배열이지만, 문자열은 불변이므로 이 메서드를 적용하기에는 적합하지 않습니다.
## 예제
@@ -109,6 +109,6 @@ console.log(Array.prototype.copyWithin.call(arrayLike, 3, 1));
## 같이 보기
- [`core-js`의 `Array.prototype.copyWithin` 폴리필](https://github.com/zloirock/core-js#ecmascript-array)
-- [인덱스된 컬렉션](/ko/docs/Web/JavaScript/Guide/Indexed_collections)
+- [인덱스 기반 컬렉션](/ko/docs/Web/JavaScript/Guide/Indexed_collections) 가이드
- {{jsxref("Array")}}
- {{jsxref("TypedArray.prototype.copyWithin()")}}
diff --git a/files/ko/web/javascript/reference/global_objects/array/findlastindex/index.md b/files/ko/web/javascript/reference/global_objects/array/findlastindex/index.md
index 71d6184aba59f5..ee762cde8e73a1 100644
--- a/files/ko/web/javascript/reference/global_objects/array/findlastindex/index.md
+++ b/files/ko/web/javascript/reference/global_objects/array/findlastindex/index.md
@@ -2,16 +2,17 @@
title: Array.prototype.findLastIndex()
slug: Web/JavaScript/Reference/Global_Objects/Array/findLastIndex
l10n:
- sourceCommit: 34a34bee83fb4accf073ebc0c8cfc8eff956dc9b
+ sourceCommit: 57375b77984037c614982a9327bc96101824db89
---
{{JSRef}}
-**`findLastIndex()`** 메서드는 배열을 역순으로 순회하며 주어진 판별 함수를 만족하는 만족하는 배열의 첫번째 요소의 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.
+{{jsxref("Array")}} 인스턴스의 **`findLastIndex()`** 메서드는 배열을 역순으로 순회하며 주어진 판별 함수를 만족하는 배열의 첫번째 요소의 인덱스를 반환합니다.
+만족하는 요소가 없으면 -1을 반환합니다.
-인덱스 대신 판별함수를 만족하는 마지막 값을 반환하는{{jsxref("Array/findLast", "findLast()")}}메서드도 참고하세요.
+인덱스 대신 판별 함수를 만족하는 마지막 값을 반환하는 {{jsxref("Array/findLast", "findLast()")}} 메서드도 참고하세요.
-{{EmbedInteractiveExample("pages/js/array-findlastindex.html","shorter")}}
+{{EmbedInteractiveExample("pages/js/array-findlastindex.html", "shorter")}}
## 구문
@@ -23,39 +24,28 @@ findLastIndex(callbackFn, thisArg)
### 매개변수
- `callbackFn`
-
- - : 배열의 각 요소에 대해 실행할 함수입니다. 이 함수는 매칭된 요소가 발견되었음을 나타내기 위해 [참 값](/ko/docs/Glossary/Truthy)을 반환해야하며, 그렇지 않으면 [거짓 값](/ko/docs/Glossary/Falsy)을 반환해야 합니다. 이 함수는 다음과 같은 인수와 함께 호출됩니다.
-
+ - : 배열의 각 요소에 대해 실행할 함수입니다. 이 함수는 매칭된 요소가 발견되었음을 나타내기 위해 [참 같은 값](/ko/docs/Glossary/Truthy)을 반환해야하며, 그렇지 않으면 [거짓 같은 값](/ko/docs/Glossary/Falsy)을 반환해야 합니다. 이 함수는 다음과 같은 인수와 함께 호출됩니다.
- `element`
- - : 배열에서 처리중인 현재 요소입니다.
+ - : 배열에서 처리 중인 현재 요소입니다.
- `index`
- - : 배열에서 처리중인 현재 요소의 인덱스입니다.
+ - : 배열에서 처리 중인 현재 요소의 인덱스입니다.
- `array`
- : `findLastIndex()`가 호출된 배열입니다.
-
- `thisArg` {{optional_inline}}
- - : `callbackFn`을 실행할 때 this로 사용할 객체입니다. 자세한 내용은 반복적인 메소드([iterative methods](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#iterative_methods))를 참조합니다.
+ - : `callbackFn`을 실행할 때 `this`로 사용할 객체입니다. 자세한 내용은 [순회 가능 메서드](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#iterative_methods)를 참고하시기 바랍니다.
### 반환 값
테스트를 통과하는 배열에서 마지막 요소(가장 높은 인덱스)의 인덱스입니다.
-만약 매칭되는 요소가 없다면 -1을 반환합니다.
+만약 일치하는 요소가 없다면 `-1`을 반환합니다.
## 설명
-`findLastIndex()` 메서드는 반복적인 메소드([iterative methods](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#iterative_methods))입니다. 이 메서드는 배열의 각 요소마다 제공된 `callbackFn` 함수를 역순으로 한 번씩 호출하며, `callbackFn`이 [참 값](/ko/docs/Glossary/Truthy)을 반환할 때까지 반복합니다. 참 값이 반환되면 `findLastIndex()`는 해당 요소의 인덱스를 반환하고 배열 반복을 중단합니다. 만약 `callbackFn`이 참 값을 반환하지 않으면, `findLastIndex()`는 `-1`을 반환합니다.
-
-`callbackFn`는 배열의 _모든_ 인덱스에 대해 호출됩니다. 할당된 값이 있는 인덱스뿐만 아니라 희소 배열([sparse arrays](/ko/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays))의 비어있는 슬롯도 `undefined`와 동일하게 동작합니다.
-
-`findLastIndex()` 메서드는 호출된 배열을 변경하지 않지만, 인자로 제공된 `callbackFn`은 변경할 수 있습니다. 그러나, 배열의 길이는 `callbackFn`의 첫 호출 _이전에_ 저장됨에 유의합니다. 따라서 다음과 같이 동작합니다.
-
-- `callbackFn`은 `findLastIndex()`가 호출된 이후 배열에 추가된 요소에 방문하지 않습니다.
-- 이미 방문한 인덱스의 변경은 `callbackFn`을 다시 호출하지 않습니다.
-- `callbackFn`에 의해 아직 방문되지 않은 배열의 기존 요소가 변경되면, `callbackFn`에 전달되는 값은 해당 요소가 방문되었을 때의 값이 됩니다. [삭제된](/ko/docs/Web/JavaScript/Reference/Operators/delete) 요소는 마치 `undefined`인 것처럼 방문됩니다.
+`findLastIndex()` 메서드는 [순회 가능 메서드](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#iterative_methods)입니다. 이 메서드는 배열의 각 요소마다 제공된 `callbackFn` 함수를 역순으로 한 번씩 호출하며, `callbackFn`이 [참 같은 값](/ko/docs/Glossary/Truthy)을 반환할 때까지 반복합니다. 참 같은 값이 반환되면 `findLastIndex()`는 해당 요소의 인덱스를 반환하고 배열 순회를 중단합니다. 만약 `callbackFn`이 참 같은 값을 반환하지 않으면, `findLastIndex()`는 `-1`을 반환합니다.
-> **경고:** 위에서 설명한 종류의 동시 수정은 이해하기 어려운 코드로 이어지는 경우가 많으며, 일반적으로 피해야 할 것입니다 (특별한 경우를 제외하고).
+`callbackFn`는 배열의 모든 인덱스에 대해 호출됩니다. 할당된 값이 있는 인덱스뿐만 아니라 [희소 배열](/ko/docs/Web/JavaScript/Guide/Indexed_collections#희소_배열)의 비어있는 슬롯도 `undefined`와 동일하게 동작합니다.
-`findLastIndex()` 메서드는 [일반적인(generic)](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#generic_array_methods) 메서드입니다. 이는 `this` 값이 `length` 속성과 정수 키 속성을 가지고 있는 것만을 요구합니다.
+`findLastIndex()` 메서드는 [범용](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#generic_array_methods) 메서드입니다. `this` 값에 `length` 속성과 정수 키 속성 만을 기대합니다.
## 예제
@@ -76,10 +66,28 @@ function isPrime(element) {
return true;
}
-console.log([4, 6, 8, 12].findLastIndex(isPrime)); // -1, not found
+console.log([4, 6, 8, 12].findLastIndex(isPrime)); // -1, 찾을 수 없음
console.log([4, 5, 7, 8, 9, 11, 12].findLastIndex(isPrime)); // 5
```
+### callbackFn의 세 번째 인수 사용하기
+
+`array` 인수는 배열의 다른 요소에 접근하려는 경우, 특히 배열을 참조하는 기존 변수가 없는 경우에 유용합니다. 다음 예제에서는 먼저 `filter()`를 사용하여 양수 값을 추출한 다음 `findLastIndex()`를 사용하여 이웃 요소보다 작은 마지막 요소를 찾습니다.
+
+```js
+const numbers = [3, -1, 1, 4, 1, 5, 9, 2, 6];
+const lastTrough = numbers
+ .filter((num) => num > 0)
+ .findLastIndex((num, idx, arr) => {
+ // arr 인수가 없으면 변수로 저장하지 않고 중간에 생성된
+ // 배열에 쉽게 접근할 수 있는 방법은 없습니다.
+ if (idx > 0 && num >= arr[idx - 1]) return false;
+ if (idx < arr.length - 1 && num >= arr[idx + 1]) return false;
+ return true;
+ });
+console.log(lastTrough); // 6
+```
+
### 희소 배열에서 findLastIndex() 사용
희소 배열에서 `undefined`를 찾아 빈 슬롯의 인덱스를 알아낼 수 있습니다.
@@ -114,7 +122,7 @@ console.log(
## 같이 보기
-- [Polyfill of `Array.prototype.findIndex` in `core-js`](https://github.com/zloirock/core-js#ecmascript-array)
+- [`core-js`에서의 `Array.prototype.findIndex` 폴리필](https://github.com/zloirock/core-js#ecmascript-array)
- {{jsxref("Array")}}
- {{jsxref("Array.prototype.find()")}}
- {{jsxref("Array.prototype.findIndex()")}}
diff --git a/files/ko/web/javascript/reference/global_objects/array/@@iterator/index.md b/files/ko/web/javascript/reference/global_objects/array/symbol.iterator/index.md
similarity index 96%
rename from files/ko/web/javascript/reference/global_objects/array/@@iterator/index.md
rename to files/ko/web/javascript/reference/global_objects/array/symbol.iterator/index.md
index 7f7ae31aab3f10..d016fd7ea5eda5 100644
--- a/files/ko/web/javascript/reference/global_objects/array/@@iterator/index.md
+++ b/files/ko/web/javascript/reference/global_objects/array/symbol.iterator/index.md
@@ -1,6 +1,7 @@
---
title: Array.prototype[@@iterator]()
-slug: Web/JavaScript/Reference/Global_Objects/Array/@@iterator
+slug: Web/JavaScript/Reference/Global_Objects/Array/Symbol.iterator
+original_slug: Web/JavaScript/Reference/Global_Objects/Array/@@iterator
l10n:
sourceCommit: 27180875516cc311342e74b596bfb589b7211e0c
---
diff --git a/files/ko/web/javascript/reference/global_objects/array/@@species/index.md b/files/ko/web/javascript/reference/global_objects/array/symbol.species/index.md
similarity index 96%
rename from files/ko/web/javascript/reference/global_objects/array/@@species/index.md
rename to files/ko/web/javascript/reference/global_objects/array/symbol.species/index.md
index a8f77264d5d2e5..f07a101e0a9236 100644
--- a/files/ko/web/javascript/reference/global_objects/array/@@species/index.md
+++ b/files/ko/web/javascript/reference/global_objects/array/symbol.species/index.md
@@ -1,6 +1,7 @@
---
title: Array[@@species]
-slug: Web/JavaScript/Reference/Global_Objects/Array/@@species
+slug: Web/JavaScript/Reference/Global_Objects/Array/Symbol.species
+original_slug: Web/JavaScript/Reference/Global_Objects/Array/@@species
l10n:
sourceCommit: 34a34bee83fb4accf073ebc0c8cfc8eff956dc9b
---
diff --git a/files/ko/web/javascript/reference/global_objects/array/@@unscopables/index.md b/files/ko/web/javascript/reference/global_objects/array/symbol.unscopables/index.md
similarity index 96%
rename from files/ko/web/javascript/reference/global_objects/array/@@unscopables/index.md
rename to files/ko/web/javascript/reference/global_objects/array/symbol.unscopables/index.md
index 00a57b067f3a0e..5ec4fa0fcb34bf 100644
--- a/files/ko/web/javascript/reference/global_objects/array/@@unscopables/index.md
+++ b/files/ko/web/javascript/reference/global_objects/array/symbol.unscopables/index.md
@@ -1,6 +1,7 @@
---
title: Array.prototype[@@unscopables]
-slug: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables
+slug: Web/JavaScript/Reference/Global_Objects/Array/Symbol.unscopables
+original_slug: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables
l10n:
sourceCommit: 34a34bee83fb4accf073ebc0c8cfc8eff956dc9b
---
diff --git a/files/ko/web/javascript/reference/global_objects/arraybuffer/@@species/index.md b/files/ko/web/javascript/reference/global_objects/arraybuffer/@@species/index.md
deleted file mode 100644
index c200abbc3bc1ed..00000000000000
--- a/files/ko/web/javascript/reference/global_objects/arraybuffer/@@species/index.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: ArrayBuffer[@@species]
-slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species
-l10n:
- sourceCommit: bf81c9ed7de8cfd94cf1fc7f77e23b987f753a8b
----
-
-{{JSRef}}
-
-**`ArrayBuffer[@@species]`** 정적 접근자 속성은 배열 버퍼 메서드에서 반환 값을 생성하는데 사용되는 생성자를 반환합니다.
-
-> **경고:** `@@species` 존재는 임의의 코드가 실행될 수 있게하며 보안 취약점이 발생할 수 있습니다. 또한 어떠한 최적화를 훨씬 어렵게 만들 수 있습니다. 엔진 구현자들은 [이 기능을 제거할지 여부를 검토 중](https://github.com/tc39/proposal-rm-builtin-subclassing) 입니다. 가능하면 이 기능에 의존하지 마시기 바랍니다.
-
-## 구문
-
-```js-nolint
-ArrayBuffer[Symbol.species]
-```
-
-### 반환 값
-
-`get @@species`이 호출된 생성자(`this`)의 값입니다. 반환 값은 새 배열 버퍼를 생성하는 배열 버퍼 메서드에서 반환 값을 구성하는 데 사용됩니다.
-
-## 설명
-
-`@@species` 접근자 속성은 `ArrayBuffer` 객체를 생성하기 위한 기본 생성자를 반환합니다. 하위 클래스 생성자는 생성자 할당을 변경하기 위해 재정의 할 수 있습니다. 기본 구현은 기본적으로 아래와 같습니다.
-
-```js
-// 예시를 위한 가상의 구현
-class ArrayBuffer {
- static get [Symbol.species]() {
- return this;
- }
-}
-```
-
-이 다형성 구현으로 인해 파생된 하위 클래스의 `@@species`은 기본적으로 생성자 자체도 반환합니다.
-
-```js
-class SubArrayBuffer extends ArrayBuffer {}
-SubArrayBuffer[Symbol.species] === SubArrayBuffer; // true
-```
-
-기존 객체를 변경하지 않고 새 배열 버퍼 인스턴스를 반환하는 배열 버퍼 메서드를 호출할 때(예를 들어 [`slice()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice)) 객체의 `constructor[@@species]`에 접근하게 됩니다. 반환된 생성자는 배열 버퍼 메서드의 반환값을 구성하는 데 사용됩니다.
-
-## 예제
-
-### 일반적인 객체에서의 Species
-
-`@@species` 속성은 기본 생성자 함수, 즉 `ArrayBuffer`의 `ArrayBuffer` 생성자를 반환합니다.
-
-```js
-ArrayBuffer[Symbol.species]; // function ArrayBuffer()
-```
-
-### 파생 객체에서의 Species
-
-`MyArrayBuffer`와 같은 사용자 정의 `ArrayBuffer` 하위 클래스의 인스턴스에서 `MyArrayBuffer`의 Species은 `MyArrayBuffer` 생성자입니다. 그러나 파생 클래스 메서드에서 부모 `ArrayBuffer` 객체를 반환하기 위해 이를 덮어쓸 수 있습니다.
-
-```js
-class MyArrayBuffer extends ArrayBuffer {
- // 부모 ArrayBuffer 생성자에 MyArrayBuffer Species 를 덮어 씀
- static get [Symbol.species]() {
- return ArrayBuffer;
- }
-}
-```
-
-## 명세서
-
-{{Specifications}}
-
-## 브라우저 호환성
-
-{{Compat}}
-
-## 같이 보기
-
-- {{jsxref("ArrayBuffer")}}
-- {{jsxref("Symbol.species")}}
diff --git a/files/ko/web/javascript/reference/global_objects/arraybuffer/arraybuffer/index.md b/files/ko/web/javascript/reference/global_objects/arraybuffer/arraybuffer/index.md
index f08318c0d2e7a9..3e51374e7dfa7a 100644
--- a/files/ko/web/javascript/reference/global_objects/arraybuffer/arraybuffer/index.md
+++ b/files/ko/web/javascript/reference/global_objects/arraybuffer/arraybuffer/index.md
@@ -1,43 +1,73 @@
---
title: ArrayBuffer() 생성자
slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/ArrayBuffer
+l10n:
+ sourceCommit: 5c3c25fd4f2fbd7a5f01727a65c2f70d73f1880a
---
{{JSRef}}
**`ArrayBuffer()`** 생성자는 {{jsxref("ArrayBuffer")}} 객체를 생성합니다.
-{{EmbedInteractiveExample("pages/js/arraybuffer-constructor.html")}}
+{{EmbedInteractiveExample("pages/js/arraybuffer-constructor.html", "shorter")}}
## 구문
-```js
-new ArrayBuffer(length);
+```js-nolint
+new ArrayBuffer(length)
+new ArrayBuffer(length, options)
```
+> **참고:** `ArrayBuffer()`는 오직 [`new`](/ko/docs/Web/JavaScript/Reference/Operators/new)로만 생성할 수 있습니다. `new` 없이 호출을 시도하면 {{jsxref("TypeError")}} 예외가 발생합니다.
+
### 매개변수
- `length`
- : 생성할 `ArrayBuffer`의 바이트 크기.
+- `length`
+ - : 생성할 배열 버퍼의 바이트 단위의 크기.
+- `options` {{optional_inline}}
+ - : 다음 속성을 포함하는 객체.
+ - `maxByteLength` {{optional_inline}}
+ - : 배열 버퍼가 크기를 재조정할 수 있는 바이트 단위 최대 크기.
### 반환 값
지정한 크기를 가진 새로운 `ArrayBuffer` 객체. 내용은 모두 0으로 초기화됩니다.
+지정된 크기의 새 `ArrayBuffer` 객체입니다. `maxByteLength` 속성이 명시되어 있을 경우 이 값으로 {{jsxref("ArrayBuffer/maxByteLength", "maxByteLength")}} 속성이 설정됩니다. 그 내용은 0으로 초기화됩니다.
+
### 예외
-`length`가 {{jsxref("Number.MAX_SAFE_INTEGER")}}보다 크거나, 음수면 {{jsxref("RangeError")}}.
+- {{jsxref("RangeError")}}
+ - : 다음 중 한 가지 경우에 발생합니다.
+ - `length` 혹은 `maxByteLength`가 {{jsxref("Number.MAX_SAFE_INTEGER")}} (≥ 253 )보다 크거나 음수일 경우
+ - `length`가 `maxByteLength`보다 클 경우.
## 예제
-아래 예제 코드는 8바이트 버퍼를 생성한 후 {{jsxref("Int32Array")}} 뷰로 그 버퍼를 참조합니다.
+### ArrayBuffer 생성하기
+
+이 예제에서는 버퍼를 참조하는 {{jsxref("Int32Array")}} 뷰를 사용하여 8바이트 버퍼를 만듭니다.
+
+```js
+const buffer = new ArrayBuffer(8);
+const view = new Int32Array(buffer);
+```
+
+### 크기 조절이 가능한 ArrayBuffer 생성하기
+
+이 예제에서는 최대 16바이트까지 크기를 조정할 수 있는 8바이트 버퍼를 생성한 다음 {{jsxref("ArrayBuffer/resize", "resize()")}} 이를 12바이트로 조정합니다.
```js
-var buffer = new ArrayBuffer(8);
-var view = new Int32Array(buffer);
+const buffer = new ArrayBuffer(8, { maxByteLength: 16 });
+
+buffer.resize(12);
```
-## 명세
+> **참고:** `maxByteLength`는 사용 사례에 맞게 가능한 가장 작은 값으로 설정하는 것이 좋습니다. 메모리 부족 오류의 위험을 줄이려면 `1073741824`(1GB)를 초과하지 않아야 합니다.
+
+## 명세서
{{Specifications}}
@@ -47,5 +77,6 @@ var view = new Int32Array(buffer);
## 같이 보기
-- [JavaScript 형식화 배열](/ko/docs/Web/JavaScript/Typed_arrays)
+- [`core-js`에서의 `ArrayBuffer` 폴리필](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
+- [JavaScript 형식화 배열](/ko/docs/Web/JavaScript/Typed_arrays) 안내서
- {{jsxref("SharedArrayBuffer")}}
diff --git a/files/ko/web/javascript/reference/global_objects/arraybuffer/symbol.species/index.md b/files/ko/web/javascript/reference/global_objects/arraybuffer/symbol.species/index.md
new file mode 100644
index 00000000000000..8b62248531c780
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/arraybuffer/symbol.species/index.md
@@ -0,0 +1,80 @@
+---
+title: ArrayBuffer[Symbol.species]
+slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/Symbol.species
+l10n:
+ sourceCommit: 6fbdb78c1362fae31fbd545f4b2d9c51987a6bca
+---
+
+{{JSRef}}
+
+**`ArrayBuffer[Symbol.species]`** 정적 접근자 속성은 배열 버퍼 메서드에서 반환 값을 생성하는데 사용되는 생성자를 반환합니다.
+
+> **경고:** `Symbol.species` 존재는 임의의 코드가 실행될 수 있게하며 보안 취약점이 발생할 수 있습니다. 또한 어떠한 최적화를 훨씬 어렵게 만들 수 있습니다. 엔진 구현자들은 [이 기능을 제거할지 여부를 검토 중](https://github.com/tc39/proposal-rm-builtin-subclassing) 입니다. 가능하면 이 기능에 의존하지 마시기 바랍니다.
+
+## 구문
+
+```js-nolint
+ArrayBuffer[Symbol.species]
+```
+
+### 반환 값
+
+`get [Symbol.species]`이 호출된 생성자(`this`)의 값입니다. 반환 값은 새 배열 버퍼를 생성하는 배열 버퍼 메서드에서 반환 값을 구성하는 데 사용됩니다.
+
+## 설명
+
+`Symbol.species` 접근자 속성은 `ArrayBuffer` 객체를 생성하기 위한 기본 생성자를 반환합니다. 하위 클래스 생성자는 생성자 할당을 변경하기 위해 재정의 할 수 있습니다. 기본 구현은 기본적으로 아래와 같습니다.
+
+```js
+// 예시를 위한 가상의 구현
+class ArrayBuffer {
+ static get [Symbol.species]() {
+ return this;
+ }
+}
+```
+
+이 다형성 구현으로 인해 파생된 하위 클래스의 `Symbol.species`은 기본적으로 생성자 자체도 반환합니다.
+
+```js
+class SubArrayBuffer extends ArrayBuffer {}
+SubArrayBuffer[Symbol.species] === SubArrayBuffer; // true
+```
+
+기존 객체를 변경하지 않고 새 배열 버퍼 인스턴스를 반환하는 배열 버퍼 메서드를 호출할 때(예를 들어 [`slice()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice)) 객체의 `constructor[Symbol.species]`에 접근하게 됩니다. 반환된 생성자는 배열 버퍼 메서드의 반환값을 구성하는 데 사용됩니다.
+
+## 예제
+
+### 일반적인 객체에서의 Species
+
+`Symbol.species` 속성은 기본 생성자 함수, 즉 `ArrayBuffer`의 `ArrayBuffer` 생성자를 반환합니다.
+
+```js
+ArrayBuffer[Symbol.species]; // function ArrayBuffer()
+```
+
+### 파생 객체에서의 Species
+
+`MyArrayBuffer`와 같은 사용자 정의 `ArrayBuffer` 하위 클래스의 인스턴스에서 `MyArrayBuffer`의 Species은 `MyArrayBuffer` 생성자입니다. 그러나 파생 클래스 메서드에서 부모 `ArrayBuffer` 객체를 반환하기 위해 이를 덮어쓸 수 있습니다.
+
+```js
+class MyArrayBuffer extends ArrayBuffer {
+ // 부모 ArrayBuffer 생성자에 MyArrayBuffer Species 를 덮어 씀
+ static get [Symbol.species]() {
+ return ArrayBuffer;
+ }
+}
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("Symbol.species")}}
diff --git a/files/ko/web/javascript/reference/global_objects/dataview/setfloat16/index.md b/files/ko/web/javascript/reference/global_objects/dataview/setfloat16/index.md
new file mode 100644
index 00000000000000..f67d6e7177d070
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/dataview/setfloat16/index.md
@@ -0,0 +1,64 @@
+---
+title: DataView.prototype.setFloat16()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/setFloat16
+l10n:
+ sourceCommit: fb442649a7e91a177a582a3e9c6e1a95a9e8dda5
+---
+
+{{JSRef}}
+
+{{jsxref("DataView")}} 인스턴스의 **`setFloat16()`** 메서드는 숫자를 받아 이 `DataView`의 지정된 바이트 오프셋의 2 바이트의 공간에 16비트 실수로 저장합니다. 정렬 제약 조건은 없으며, 범위 내의 모든 오프셋에서 멀티바이트 값을 저장할 수 있습니다.
+
+{{EmbedInteractiveExample("pages/js/dataview-setfloat16.html")}}
+
+## 구문
+
+```js-nolint
+setFloat16(byteOffset, value)
+setFloat16(byteOffset, value, littleEndian)
+```
+
+### 매개변수
+
+- `byteOffset`
+ - : 데이터를 저장할 데이터 뷰의 시작점으로부터의 바이트 단위의 오프셋.
+- `value`
+ - : 저장할 값. 어떻게 값이 바이트로 인코딩되는지는 [값 인코딩 및 정규화](/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#value_encoding_and_normalization)를 보시기 바랍니다.
+- `littleEndian` {{optional_inline}}
+ - : {{Glossary("Endianness", "리틀 엔디언 혹은 빅 엔디언")}} 형식으로 데이터를 저장할지 여부를 나타냅니다. `false` 혹은 `undefined`이라면 빅 엔디언 값으로 저장합니다.
+
+### 반환 값
+
+{{jsxref("undefined")}}.
+
+### 예외
+
+- {{jsxref("RangeError")}}
+ - : `byteOffset`이 뷰의 끝을 넘어서 저장되어 있는 경우 발생합니다.
+
+## 예제
+
+### setFloat16() 사용하기
+
+```js
+const buffer = new ArrayBuffer(10);
+const dataview = new DataView(buffer);
+dataview.setFloat16(0, 3);
+dataview.getFloat16(1); // 0
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [`core-js`에서의 `DataView.prototype.setFloat16` 안내서](https://github.com/zloirock/core-js#float16-methods)
+- [JavaScript 형식화 배열](/ko/docs/Web/JavaScript/Guide/Typed_arrays) 안내서
+- {{jsxref("DataView")}}
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("Float16Array")}}
diff --git a/files/ko/web/javascript/reference/global_objects/date/@@toprimitive/index.md b/files/ko/web/javascript/reference/global_objects/date/symbol.toprimitive/index.md
similarity index 93%
rename from files/ko/web/javascript/reference/global_objects/date/@@toprimitive/index.md
rename to files/ko/web/javascript/reference/global_objects/date/symbol.toprimitive/index.md
index 95c858a134fb5e..09f37cedb11ded 100644
--- a/files/ko/web/javascript/reference/global_objects/date/@@toprimitive/index.md
+++ b/files/ko/web/javascript/reference/global_objects/date/symbol.toprimitive/index.md
@@ -1,6 +1,7 @@
---
title: Date.prototype[@@toPrimitive]
-slug: Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive
+slug: Web/JavaScript/Reference/Global_Objects/Date/Symbol.toPrimitive
+original_slug: Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive
---
{{JSRef}}
diff --git a/files/ko/web/javascript/reference/global_objects/float16array/float16array/index.md b/files/ko/web/javascript/reference/global_objects/float16array/float16array/index.md
new file mode 100644
index 00000000000000..f2744c3152cb4d
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/float16array/float16array/index.md
@@ -0,0 +1,82 @@
+---
+title: Float16Array() 생성자
+slug: Web/JavaScript/Reference/Global_Objects/Float16Array/Float16Array
+l10n:
+ sourceCommit: dd339290fa3a42d9a7f079e17a62e1df1206f29d
+---
+
+{{JSRef}}
+
+**`Float16Array()`** 생성자는 {{jsxref("Float16Array")}} 객체를 생성합니다. 명시적으로 초기 값이 주어지지 않으면 내용은 모두 `0`으로 초기화됩니다.
+
+## 구문
+
+```js-nolint
+new Float16Array()
+new Float16Array(length)
+new Float16Array(typedArray)
+new Float16Array(object)
+
+new Float16Array(buffer)
+new Float16Array(buffer, byteOffset)
+new Float16Array(buffer, byteOffset, length)
+```
+
+> **참고:** `Float16Array()`는 오직 [`new`](/ko/docs/Web/JavaScript/Reference/Operators/new)로만 생성할 수 있습니다. `new` 없이 호출을 시도하면 {{jsxref("TypeError")}} 예외가 발생합니다.
+
+### 매개변수
+
+[`TypedArray`](/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#매개변수)를 참고하세요.
+
+### 예외
+
+[`TypedArray`](/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#exceptions)를 참고하세요.
+
+## 예제
+
+### Float16Array를 생성하기 위한 각기 다른 여러 방법
+
+```js
+// 길이로부터 생성
+const float16 = new Float16Array(2);
+float16[0] = 42;
+console.log(float16[0]); // 42
+console.log(float16.length); // 2
+console.log(float16.BYTES_PER_ELEMENT); // 2
+
+// 배열로부터 생성
+const x = new Float16Array([21, 31]);
+console.log(x[1]); // 31
+
+// 다른 TypedArray로부터 생성
+const y = new Float16Array(x);
+console.log(y[0]); // 21
+
+// ArrayBuffer로부터 생성
+const buffer = new ArrayBuffer(32);
+const z = new Float16Array(buffer, 4, 4);
+console.log(z.byteOffset); // 4
+
+// 순회로부터 생성
+const iterable = (function* () {
+ yield* [1, 2, 3];
+})();
+const float16FromIterable = new Float16Array(iterable);
+console.log(float16FromIterable);
+// Float16Array [1, 2, 3]
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [JavaScript 형식화 배열](/ko/docs/Web/JavaScript/Guide/Typed_arrays) 안내서
+- {{jsxref("TypedArray")}}
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("DataView")}}
diff --git a/files/ko/web/javascript/reference/global_objects/float32array/float32array/index.md b/files/ko/web/javascript/reference/global_objects/float32array/float32array/index.md
index b663f29c787ac6..7ae9434c0897f5 100644
--- a/files/ko/web/javascript/reference/global_objects/float32array/float32array/index.md
+++ b/files/ko/web/javascript/reference/global_objects/float32array/float32array/index.md
@@ -1,14 +1,13 @@
---
-title: Float32Array() constructor
+title: Float32Array() 생성자
slug: Web/JavaScript/Reference/Global_Objects/Float32Array/Float32Array
+l10n:
+ sourceCommit: dd339290fa3a42d9a7f079e17a62e1df1206f29d
---
{{JSRef}}
-**`Float32Array`** 형식화 배열(TypedArray) 생성자는 플랫폼의 바이트 순서를 따르는 32비트 부동 소수점(C의
-`float` 데이터 타입에 대응) 배열을 생성합니다. 바이트 순서를 제어해야 하는 경우 대신 {{jsxref("DataView")}}를
-사용합니다. 배열의 내용은 0으로 초기화됩니다. 배열이 생성되면 객체의 메서드를 사용하거나 표준 배열 인덱스 구문
-(즉, 대괄호 표기법 사용)을 사용하여 배열의 요소를 참조할 수 있습니다.
+**`Float32Array()`** 생성자는 {{jsxref("Float32Array")}} 객체를 생성합니다. 초기 값이 명시적으로 주어지지 않으면 내용은 `0`으로 초기화 합니다.
## 구문
@@ -78,6 +77,6 @@ console.log(float32FromIterable);
## 같이 보기
- [`core-js`에서 `Float32Array`의 폴리필](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
-- [JavaScript 형식화 배열](/ko/docs/Web/JavaScript/Typed_arrays)
+- [JavaScript 형식화 배열](/ko/docs/Web/JavaScript/Typed_arrays) 안내서
- {{jsxref("ArrayBuffer")}}
- {{jsxref("DataView")}}
diff --git a/files/ko/web/javascript/reference/global_objects/float64array/float64array/index.md b/files/ko/web/javascript/reference/global_objects/float64array/float64array/index.md
index e8a606d748f26f..9158aea9ee2638 100644
--- a/files/ko/web/javascript/reference/global_objects/float64array/float64array/index.md
+++ b/files/ko/web/javascript/reference/global_objects/float64array/float64array/index.md
@@ -1,14 +1,13 @@
---
-title: Float64Array() constructor
+title: Float64Array() 생성자
slug: Web/JavaScript/Reference/Global_Objects/Float64Array/Float64Array
+l10n:
+ sourceCommit: dd339290fa3a42d9a7f079e17a62e1df1206f29d
---
{{JSRef}}
-**`Float64Array`** 형식화 배열(TypedArray) 생성자는 플랫폼의 바이트 순서를 따르는 64비트 부동 소수점(C의
-`double` 데이터 타입에 대응) 배열을 생성합니다. 바이트 순서를 제어해야 하는 경우 대신 {{jsxref("DataView")}}를
-사용합니다. 배열의 내용은 0으로 초기화됩니다. 배열이 생성되면 객체의 메서드를 사용하거나 표준 배열 인덱스 구문
-(즉, 대괄호 표기법 사용)을 사용하여 배열의 요소를 참조할 수 있습니다.
+**`Float64Array()`** 생성자는 {{jsxref("Float64Array")}} 객체를 생성합니다. 초기 값이 명시적으로 주어지지 않으면 내용은 `0`으로 초기화 합니다.
## 구문
@@ -23,16 +22,15 @@ new Float64Array(buffer, byteOffset)
new Float64Array(buffer, byteOffset, length)
```
-> **참고:** `Float64Array()`는 오직 [`new`](/ko/docs/Web/JavaScript/Reference/Operators/new)
-> 로만 생성할 수 있습니다. `new` 없이 호출을 시도하면 {{jsxref("TypeError")}} 예외가 발생합니다.
+> **참고:** `Float64Array()`는 오직 [`new`](/ko/docs/Web/JavaScript/Reference/Operators/new) 로만 생성할 수 있습니다. `new` 없이 호출을 시도하면 {{jsxref("TypeError")}} 예외가 발생합니다.
### 매개변수
-[`TypedArray`](/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#parameters)를 참고하세요.
+[`TypedArray`](/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#매개변수)를 참고하세요.
### 예외
-[`TypedArray`](/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#exceptions)를 참고하세요.
+[`TypedArray`](/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#예외)를 참고하세요.
## 예제
@@ -79,6 +77,6 @@ console.log(float64FromIterable);
## 같이 보기
- [`core-js`에서 `Float64Array`의 폴리필](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
-- [JavaScript 형식화 배열](/ko/docs/Web/JavaScript/Typed_arrays)
+- [JavaScript 형식화 배열](/ko/docs/Web/JavaScript/Typed_arrays) 안내서
- {{jsxref("ArrayBuffer")}}
- {{jsxref("DataView")}}
diff --git a/files/ko/web/javascript/reference/global_objects/function/caller/index.md b/files/ko/web/javascript/reference/global_objects/function/caller/index.md
new file mode 100644
index 00000000000000..7a58ca8f8d235c
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/function/caller/index.md
@@ -0,0 +1,149 @@
+---
+title: Function.prototype.caller
+slug: Web/JavaScript/Reference/Global_Objects/Function/caller
+l10n:
+ sourceCommit: 6a0f9553932823cd0c4dcf695d4b4813474964fb
+---
+
+{{JSRef}}{{Non-standard_Header}}{{Deprecated_Header}}
+
+> **참고:** [엄격 모드](/ko/docs/Web/JavaScript/Reference/Strict_mode)에서 함수의 `caller`에 접근하면 오류가 발생합니다. 해당 API가 대체되지 않고 제거되었습니다. 이는 보안 위험을 초래하고 인라이닝 및 꼬리 호출(tail-call) 최적화와 같은 최적화의 가능성을 심각하게 제한하는 코드가 스택을 순차적으로 검사하는 것(walk the stack)을 방지하기 위한 것입니다. 자세한 설명은 [`arguments.callee`의 사용 중단에 대한 근거](/ko/docs/Web/JavaScript/Reference/Functions/arguments/callee#description)에서 확인할 수 있습니다.
+
+{{jsxref("Function")}} 인스턴스의 **`caller`** 접근자 속성은 이 함수를 호출한 함수를 반환합니다. [엄격 모드](/ko/docs/Web/JavaScript/Reference/Strict_mode), 화살표, 비동기 및 제너레이터 함수의 경우 `caller` 속성에 액세스하면 {{jsxref("TypeError")}}가 발생합니다.
+
+## 설명
+
+`f` 함수가 최상위 코드에 의해 호출된 경우 `f.caller`의 값은 {{jsxref("Operators/null", "null")}}이고, 그렇지 않으면 `f`를 호출한 함수입니다. `f`를 호출한 함수가 엄격 모드 함수인 경우 `f.caller`의 값도 `null`입니다.
+
+ECMAScript 사양에 지정된 유일한 동작은 `Function.prototype`에 모든 `get` 또는 `set` 요청("포이즌 필 접근자"(poison pill accessor)라고 함)에 대해 무조건 {{jsxref("TypeError")}}가 발생하는 초기 `caller` 접근자가 있다는 것과 구현체에서 이 의미를 변경할 수 없는 엄격하지 않은 일반 함수를 제외한 어떤 함수에도 엄격한 모드 함수 값이 없어야 한다는 점에 유의하시기 바랍니다. `caller` 속성의 실제 동작은 오류를 발생시키는 것 이외의 경우 구현체에 따라 정의됩니다. 예를 들어 Chrome은 자체 데이터 속성으로 정의하는 반면, Firefox와 Safari는 초기 포이즌 필 `Function.prototype.caller` 접근자를 확장하여 엄격한 함수가 아닌 `this` 값을 특별히 처리합니다.
+
+```js
+(function f() {
+ if (Object.hasOwn(f, "caller")) {
+ console.log(
+ "caller is an own property with descriptor",
+ Object.getOwnPropertyDescriptor(f, "caller"),
+ );
+ } else {
+ console.log(
+ "f doesn't have an own property named caller. Trying to get f.[[Prototype]].caller",
+ );
+ console.log(
+ Object.getOwnPropertyDescriptor(
+ Object.getPrototypeOf(f),
+ "caller",
+ ).get.call(f),
+ );
+ }
+})();
+
+// In Chrome:
+// caller is an own property with descriptor {value: null, writable: false, enumerable: false, configurable: false}
+
+// In Firefox:
+// f doesn't have an own property named caller. Trying to get f.[[Prototype]].caller
+// null
+```
+
+이 속성은 {{jsxref("Functions/arguments", "arguments")}} 객체의 미사용 `arguments.caller` 속성을 대체합니다.
+
+## 예제
+
+### 함수의 caller 속성의 값 확인하기
+
+아래 코드는 함수의 `caller` 속성 값을 확인합니다.
+
+```js
+function myFunc() {
+ if (myFunc.caller === null) {
+ return "The function was called from the top!";
+ } else {
+ return `This function's caller was ${myFunc.caller}`;
+ }
+}
+```
+
+### 스택 재생성과 재귀
+
+재귀의 경우에는 이 속성을 사용하여 호출 스택을 재생성할 수 없음을 유의하시기 바랍니다. 아래를 고려해보세요.
+
+```js
+function f(n) {
+ g(n - 1);
+}
+function g(n) {
+ if (n > 0) {
+ f(n);
+ } else {
+ stop();
+ }
+}
+f(2);
+```
+
+`stop()`이 호출될 시점에서의 호출 스택은 아래와 같습니다.
+
+```plain
+f(2) -> g(1) -> f(1) -> g(0) -> stop()
+```
+
+아래는 참입니다.
+
+```js
+stop.caller === g && f.caller === g && g.caller === f;
+```
+
+아래와 같이 `stop()` 함수에서 스택 추적을 가져오려고 시도한다면
+
+```js
+let f = stop;
+let stack = "Stack trace:";
+while (f) {
+ stack += `\n${f.name}`;
+ f = f.caller;
+}
+```
+
+루프는 절대 멈추지 않습니다.
+
+### 엄격 모드에서의 caller
+
+caller가 엄격 모드 함수라면, `caller`의 값은 `null`입니다.
+
+```js
+function callerFunc() {
+ calleeFunc();
+}
+
+function strictCallerFunc() {
+ "use strict";
+ calleeFunc();
+}
+
+function calleeFunc() {
+ console.log(calleeFunc.caller);
+}
+
+(function () {
+ callerFunc();
+})();
+// Logs [Function: callerFunc]
+
+(function () {
+ strictCallerFunc();
+})();
+// Logs null
+```
+
+## 명세서
+
+어떤 표준에도 속하지 않습니다.
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{jsxref("Function.prototype.name")}}
+- {{jsxref("Functions/arguments", "arguments")}}
diff --git a/files/ko/web/javascript/reference/global_objects/function/@@hasinstance/index.md b/files/ko/web/javascript/reference/global_objects/function/symbol.hasinstance/index.md
similarity index 95%
rename from files/ko/web/javascript/reference/global_objects/function/@@hasinstance/index.md
rename to files/ko/web/javascript/reference/global_objects/function/symbol.hasinstance/index.md
index 777b4796a9dc4d..9e6b1050279304 100644
--- a/files/ko/web/javascript/reference/global_objects/function/@@hasinstance/index.md
+++ b/files/ko/web/javascript/reference/global_objects/function/symbol.hasinstance/index.md
@@ -1,6 +1,7 @@
---
title: Function.prototype[@@hasInstance]()
-slug: Web/JavaScript/Reference/Global_Objects/Function/@@hasInstance
+slug: Web/JavaScript/Reference/Global_Objects/Function/Symbol.hasInstance
+original_slug: Web/JavaScript/Reference/Global_Objects/Function/@@hasInstance
l10n:
sourceCommit: 0891bd2199fabb1ec00dfe4765019d54f21d965c
---
diff --git a/files/ko/web/javascript/reference/global_objects/intl/locale/getcalendars/index.md b/files/ko/web/javascript/reference/global_objects/intl/locale/getcalendars/index.md
new file mode 100644
index 00000000000000..7109a1f4f37275
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/intl/locale/getcalendars/index.md
@@ -0,0 +1,100 @@
+---
+title: Intl.Locale.prototype.getCalendars()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/getCalendars
+l10n:
+ sourceCommit: 27180875516cc311342e74b596bfb589b7211e0c
+---
+
+{{JSRef}}
+
+{{jsxref("Intl.Locale")}} 인스턴스의 **`getCalendars()`** 메서드는 이 로케일에 대한 하나 이상의 고유한 캘린더 식별자 목록을 반환합니다.
+
+> **참고:** 일부 브라우저의 일부 버전에서는 이 메서드가 `calendars`라는 접근자 속성으로 구현되었습니다. 그러나 이 메서드는 접근할 때마다 새로운 배열을 반환하기 때문에 `locale.calendars === locale.calendars`가 `false`를 반환하는 상황을 방지하기 위해 이제 메서드로 구현되었습니다. 자세한 내용은 [브라우저 호환성 표](#브라우저_호환성)를 참조하세요.
+
+## 구문
+
+```js-nolint
+getCalendars()
+```
+
+### 매개변수
+
+없음.
+
+### 반환 값
+
+`Locale`에 일반적으로 사용되는 모든 달력을 나타내는 문자열 배열로, 내림차순 기본 설정으로 정렬됩니다. `Locale`에 이미 [`calender`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar)가 있는 경우 반환된 배열에는 해당 단일 값이 포함됩니다.
+
+아래는 지원되는 캘린더 목록입니다.
+
+### 지원하는 달력 유형
+
+- `buddhist`
+ - : 태국 불교 달력
+- `chinese`
+ - : 전통 중국력
+- `coptic`
+ - : 콥트 달력
+- `dangi`
+ - : 전통 한국력
+- `ethioaa`
+ - : 에디오피아력, 아메테 알렘력 (기원전 약 5493년경)
+- `ethiopic`
+ - : 에디오피아력, 아메테 미흐렛력 (기원후 약 8년경)
+- `gregory`
+ - : 그레고리안력
+- `hebrew`
+ - : 전통 히브리력
+- `indian`
+ - : 인도력
+- `islamic`
+ - : 이슬람력
+- `islamic-umalqura`
+ - : 이슬람력, Umm al-Qura
+- `islamic-tbla`
+ - : 이슬람력, 표 형식 (윤년 [2,5,7,10,13,16,18,21,24,26,29] - 천문학적 기원)
+- `islamic-civil`
+ - : 이슬람력, 표 형식 (윤년 [2,5,7,10,13,16,18,21,24,26,29] - 민간 기원)
+- `islamic-rgsa`
+ - : 이슬람력, 사우디아라비아 달 관측법
+- `iso8601`
+ - : ISO 달력 (ISO 8601 달력 주 규칙을 사용한 그레고리안력)
+- `japanese`
+ - : 일본 제국력
+- `persian`
+ - : 페르시안력
+- `roc`
+ - : 민간용(계산식) 아랍 달력
+- `islamicc`
+ - : 민간용(계산식) 아랍 달력
+ > **경고:** `islamicc` 달력 키는 더 이상 사용하지 않습니다. `islamic-civil`를 사용해주세요.
+
+## 예제
+
+### 지원하는 달력 목록 얻기
+
+`Locale` 객체에 `calendar`가 없는 경우, `getCalendars()`는 주어진 `Locale`에 대해 일반적으로 사용되는 모든 캘린더를 나열합니다. `calendar`를 명시적으로 설정하는 예제는 [`calendar` 예제](/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar#예제)를 참고하세요.
+
+```js
+const arEG = new Intl.Locale("ar-EG");
+console.log(arEG.getCalendars()); // ["gregory", "coptic", "islamic", "islamic-civil", "islamic-tbla"]
+```
+
+```js
+const jaJP = new Intl.Locale("ja-JP");
+console.log(jaJP.getCalendars()); // ["gregory", "japanese"]
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{jsxref("Intl.Locale")}}
+- [`Intl.Locale.prototype.calendar`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar)
+- 유니코드 로케일 데이터 마크업 언어 명세에서의 [유니코드 달력 식별자](https://www.unicode.org/reports/tr35/#UnicodeCalendarIdentifier)
diff --git a/files/ko/web/javascript/reference/global_objects/intl/locale/getweekinfo/index.md b/files/ko/web/javascript/reference/global_objects/intl/locale/getweekinfo/index.md
new file mode 100644
index 00000000000000..0b891da6026519
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/intl/locale/getweekinfo/index.md
@@ -0,0 +1,66 @@
+---
+title: Intl.Locale.prototype.getWeekInfo()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/getWeekInfo
+l10n:
+ sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a
+---
+
+{{JSRef}}
+
+{{jsxref("Intl.Locale")}} 인스턴스의 **`getWeekInfo()`** 메서드는 이 로케일에 대한 `firstDay`, `weekend` 및 `minimalDays` 속성을 가진 `weekInfo` 객체를 반환합니다.
+
+> **참고:** 일부 브라우저의 일부 버전에서는 이 메서드가 `weekInfo`라는 접근자 속성으로 구현되었습니다. 그러나 이 메서드는 접근할 때마다 새로운 객체를 반환하기 때문에 `locale.weekInfo === locale.weekInfo`가 `false`를 반환하는 상황을 방지하기 위해 이제 메서드로 구현되었습니다. 자세한 내용은 [브라우저 호환성 표](#브라우저_호환성)를 참조하세요.
+
+## 구문
+
+```js-nolint
+getWeekInfo()
+```
+
+### 매개변수
+
+없음.
+
+### 반환 값
+
+[UTS 35의 주 요소](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Patterns_Week_Elements)에 지정된 로케일 데이터와 관련된 주 정보를 나타내는 객체입니다. 다음과 같은 속성이 있습니다.
+
+- `firstDay`
+ - : 로케일의 첫 번째 요일을 나타내는 정수입니다. `1`(월요일) 또는 `7`(일요일)이 될 수 있습니다.
+- `weekend`
+ - : 로케일의 주말 요일을 나타내는 정수 배열로, 여기서 `1`은 월요일, `7`은 일요일입니다.
+- `minimalDays`
+ - : 달력용도로 사용되며, 월 또는 연도의 첫 주에 필요한 최소 일수를 나타내는 1에서 7 사이의 정수입니다.
+
+## 예제
+
+### 주 정보 획득하기
+
+주어진 `Locale`을 위한 주 정보를 반환합니다.
+
+```js
+const he = new Intl.Locale("he");
+console.log(he.getWeekInfo()); // { firstDay: 7, weekend: [5, 6], minimalDays: 1 }
+
+const af = new Intl.Locale("af");
+console.log(af.getWeekInfo()); // { firstDay: 7, weekend: [6, 7], minimalDays: 1 }
+
+const enGB = new Intl.Locale("en-GB");
+console.log(enGB.getWeekInfo()); // { firstDay: 1, weekend: [6, 7], minimalDays: 4 }
+
+const msBN = new Intl.Locale("ms-BN");
+console.log(msBN.getWeekInfo()); // { firstDay: 7, weekend: [5, 7], minimalDays: 1 }
+// 브루네이의 주말은 금요일과 일요일이지 토요일은 아닙니다.
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{jsxref("Intl.Locale")}}
diff --git a/files/ko/web/javascript/reference/global_objects/iterator/drop/index.md b/files/ko/web/javascript/reference/global_objects/iterator/drop/index.md
new file mode 100644
index 00000000000000..33610d8d400dda
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/iterator/drop/index.md
@@ -0,0 +1,138 @@
+---
+title: Iterator.prototype.drop()
+slug: Web/JavaScript/Reference/Global_Objects/Iterator/drop
+l10n:
+ sourceCommit: 088b56a895d22b6df854a9f26400af7d399f289f
+---
+
+{{JSRef}}{{SeeCompatTable}}
+
+{{jsxref("Iterator")}} 인스턴스의 **`drop()`** 메서드는 이 반복자의 시작점에서 주어진 숫자만큼의 요소를 지나치는 새로운 [반복자 헬퍼](/ko/docs/Web/JavaScript/Reference/Global_Objects/Iterator#iterator_helpers)를 반환합니다.
+
+## 구문
+
+```js-nolint
+drop(limit)
+```
+
+### 매개변수
+
+- `limit`
+ - : 순회 시작점부터 버릴 요소의 수.
+
+### 반환 값
+
+새로운 [반복자 헬퍼](/ko/docs/Web/JavaScript/Reference/Global_Objects/Iterator#iterator_helpers)를 반환합니다. 반환된 반복자 헬퍼의 `next()` 메서드가 처음 호출될 때, 현재 반복자는 즉시 `limit` 개의 요소만큼 전진하고, 그 다음 요소(`limit+1`번째 요소)를 산출합니다. 그 후 반복자 헬퍼는 남은 요소들을 하나씩 산출합니다. 만약 현재 반복자가 `limit`개 미만의 요소를 가지고 있다면, 새로운 반복자 헬퍼는 `next()`가 처음 호출될 때 즉시 완료됩니다.
+
+### 예외
+
+- {{jsxref("RangeError")}}
+ - : [정수로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#integer_conversion)시 `limit`가 {{jsxref("NaN")}} 되거나 음수일 경우에 발생합니다.
+
+## 예제
+
+### drop() 사용하기
+
+다음 예제는 피보나치 수열의 항을 생성하는 반복자를 만들되, 처음 두 항을 버리고 3번째 항부터 시작하는 반복자를 생성합니다.
+
+```js
+function* fibonacci() {
+ let current = 1;
+ let next = 1;
+ while (true) {
+ yield current;
+ [current, next] = [next, current + next];
+ }
+}
+
+const seq = fibonacci().drop(2);
+console.log(seq.next().value); // 2
+console.log(seq.next().value); // 3
+```
+
+이는 아래와 동일합니다.
+
+```js
+const seq = fibonacci();
+seq.next();
+seq.next();
+```
+
+### for...of 루프와 같이 drop() 사용하기
+
+`drop()`은 반복자를 직접 이동시키지 않을 때 가장 편리합니다. 반복자도 순회 가능하기 때문에, 반환된 헬퍼를 {{jsxref("Statements/for...of", "for...of")}} 루프로 반복할 수 있습니다.
+
+```js
+for (const n of fibonacci().drop(2)) {
+ console.log(n);
+ if (n > 30) {
+ break;
+ }
+}
+
+// Logs:
+// 2
+// 3
+// 5
+// 8
+// 13
+// 21
+// 34
+```
+
+### drop()과 take() 결합하기
+
+반복자의 일부를 얻기 위해 `drop()`과 {{jsxref("Iterator.prototype.take()")}}을 같이 사용할 수 있습니다.
+
+```js
+for (const n of fibonacci().drop(2).take(5)) {
+ // 첫 두 개의 요소를 버리고, 다음 5개를 취합니다
+ console.log(n);
+}
+// 로그:
+// 2
+// 3
+// 5
+// 8
+// 13
+
+for (const n of fibonacci().take(5).drop(2)) {
+ // 처음 5개를 취하고, 처음 2개를 탈락시킵니다
+ console.log(n);
+}
+// 로그:
+// 2
+// 3
+// 5
+```
+
+### drop 갯수의 상단과 하단
+
+`limit`가 음수거나 {{jsxref("NaN")}}일 경우 {{jsxref("RangeError")}}가 발생합니다.
+
+```js
+fibonacci().drop(-1); // RangeError: -1 must be positive
+fibonacci().drop(undefined); // RangeError: undefined must be positive
+```
+
+`limit`가 반복자가 생성할 수 있는 총 요소 수보다 큰 경우(예: {{jsxref("Infinity")}}), 반환된 반복자 헬퍼는 `next()`가 처음 호출될 때 즉시 모든 요소를 버리고 완료됩니다. 만약 현재 반복자가 무한한 경우, 반환된 반복자 헬퍼는 절대 완료되지 않을 것입니다.
+
+```js
+fibonacci().drop(Infinity).next(); // Never ends
+new Set([1, 2, 3]).values().drop(Infinity).next(); // { value: undefined, done: true }
+new Set([1, 2, 3]).values().drop(4).next(); // { value: undefined, done: true }
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [`core-js`에서의 `Iterator.prototype.drop` 폴리필](https://github.com/zloirock/core-js#iterator-helpers)
+- {{jsxref("Iterator")}}
+- {{jsxref("Iterator.prototype.take()")}}
diff --git a/files/ko/web/javascript/reference/global_objects/map/@@iterator/index.md b/files/ko/web/javascript/reference/global_objects/map/symbol.iterator/index.md
similarity index 94%
rename from files/ko/web/javascript/reference/global_objects/map/@@iterator/index.md
rename to files/ko/web/javascript/reference/global_objects/map/symbol.iterator/index.md
index 0056497dcc03cd..b2098977384a2f 100644
--- a/files/ko/web/javascript/reference/global_objects/map/@@iterator/index.md
+++ b/files/ko/web/javascript/reference/global_objects/map/symbol.iterator/index.md
@@ -1,6 +1,7 @@
---
title: Map.prototype[@@iterator]()
-slug: Web/JavaScript/Reference/Global_Objects/Map/@@iterator
+slug: Web/JavaScript/Reference/Global_Objects/Map/Symbol.iterator
+original_slug: Web/JavaScript/Reference/Global_Objects/Map/@@iterator
---
{{JSRef}}
diff --git a/files/ko/web/javascript/reference/global_objects/map/@@species/index.md b/files/ko/web/javascript/reference/global_objects/map/symbol.species/index.md
similarity index 91%
rename from files/ko/web/javascript/reference/global_objects/map/@@species/index.md
rename to files/ko/web/javascript/reference/global_objects/map/symbol.species/index.md
index a4c8c1989fae26..81e92962e7613c 100644
--- a/files/ko/web/javascript/reference/global_objects/map/@@species/index.md
+++ b/files/ko/web/javascript/reference/global_objects/map/symbol.species/index.md
@@ -1,6 +1,7 @@
---
title: Map[@@species]
-slug: Web/JavaScript/Reference/Global_Objects/Map/@@species
+slug: Web/JavaScript/Reference/Global_Objects/Map/Symbol.species
+original_slug: Web/JavaScript/Reference/Global_Objects/Map/@@species
l10n:
sourceCommit: bf81c9ed7de8cfd94cf1fc7f77e23b987f753a8b
---
diff --git a/files/ko/web/javascript/reference/global_objects/math/cosh/index.md b/files/ko/web/javascript/reference/global_objects/math/cosh/index.md
new file mode 100644
index 00000000000000..f298ddbf65a255
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/cosh/index.md
@@ -0,0 +1,67 @@
+---
+title: Math.cosh()
+slug: Web/JavaScript/Reference/Global_Objects/Math/cosh
+l10n:
+ sourceCommit: 761b9047d78876cbd153be811efb1aa77b419877
+---
+
+{{JSRef}}
+
+**`Math.cosh()`** 정적 메서드는 숫자의 쌍곡 코사인을 반환합니다. 이는 아래와 같습니다.
+
+
+
+ 𝙼𝚊𝚝𝚑.𝚌𝚘𝚜𝚑 ( 𝚡 ) = cosh ( x ) = e x + e − x 2 \mathtt{\operatorname{Math.cosh}(x)} = \cosh(x) = \frac{\mathrm{e}^x + \mathrm{e}^{-x}}{2}
+
+
+{{EmbedInteractiveExample("pages/js/math-cosh.html")}}
+
+## 구문
+
+```js-nolint
+Math.cosh(x)
+```
+
+### 매개 변수
+
+- `x`
+ - : 숫자.
+
+### 반환 값
+
+`x`의 쌍곡 코사인.
+
+## 설명
+
+`Math`의 정적 메서드이기 때문에 `cosh()`는 생성한 `Math` 객체(`Math`는 생성자가 아닙니다)의 메서드를 사용하기보다는 언제나 `Math.cosh()`를 사용하세요.
+
+## 예제
+
+### Math.cosh() 사용하기
+
+```js
+Math.cosh(-Infinity); // Infinity
+Math.cosh(-1); // 1.5430806348152437
+Math.cosh(-0); // 1
+Math.cosh(0); // 1
+Math.cosh(1); // 1.5430806348152437
+Math.cosh(Infinity); // Infinity
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [`core-js`에서의 `Math.cosh` 폴리필](https://github.com/zloirock/core-js#ecmascript-math)
+- {{jsxref("Math.acosh()")}}
+- {{jsxref("Math.asinh()")}}
+- {{jsxref("Math.atanh()")}}
+- {{jsxref("Math.sinh()")}}
+- {{jsxref("Math.tanh()")}}
diff --git a/files/ko/web/javascript/reference/global_objects/math/e/index.md b/files/ko/web/javascript/reference/global_objects/math/e/index.md
index 79280d323ed466..f328a096161021 100644
--- a/files/ko/web/javascript/reference/global_objects/math/e/index.md
+++ b/files/ko/web/javascript/reference/global_objects/math/e/index.md
@@ -1,19 +1,29 @@
---
title: Math.E
slug: Web/JavaScript/Reference/Global_Objects/Math/E
+l10n:
+ sourceCommit: 761b9047d78876cbd153be811efb1aa77b419877
---
{{JSRef}}
-**`Math.E`** 속성은 자연로그의 밑 값 e를 나타내며 약 2.718의 값을 가집니다.
+**`Math.E`** 정적 데이터 속성은 오일러 수를 의미하며, 자연로그의 밑 값 e를 나타내며 약 2.718의 값을 가집니다.
-Math.E = e ≈ 2.718 \mathtt{\mi{Math.E}} = e \approx 2.718
+ 𝙼𝚊𝚝𝚑.𝙴 = e ≈ 2.718 \mathtt{Math.E} = e \approx 2.718
+
+
+{{js_property_attributes(0, 0, 0)}}
## 설명
-`E`는 `Math`의 정적 속성이므로, 사용자가 생성한 `Math` 객체의 속성으로 접근할 수 없고 항상 `Math.E`를 사용해야 합니다. (`Math`는 생성자가 아닙니다)
+`E`는 `Math`의 정적 속성이므로, 생성한 `Math` 객체(`Math`는 생성자가 아닙니다)의 속성 대신 항상 `Math.E`를 사용해야 합니다.
## 예제
@@ -29,7 +39,7 @@ function getNapier() {
getNapier(); // 2.718281828459045
```
-## 명세
+## 명세서
{{Specifications}}
diff --git a/files/ko/web/javascript/reference/global_objects/math/f16round/index.md b/files/ko/web/javascript/reference/global_objects/math/f16round/index.md
new file mode 100644
index 00000000000000..293c25a39a61b2
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/f16round/index.md
@@ -0,0 +1,71 @@
+---
+title: Math.f16round()
+slug: Web/JavaScript/Reference/Global_Objects/Math/f16round
+l10n:
+ sourceCommit: fb442649a7e91a177a582a3e9c6e1a95a9e8dda5
+---
+
+{{JSRef}}
+
+**`Math.f16round()`** 정적 메서드는 숫자의 가장 가까운 [16비트 반정밀도 부동소수점](https://en.wikipedia.org/wiki/Half-precision_floating-point_format) 표현을 반환합니다.
+
+{{EmbedInteractiveExample("pages/js/math-f16round.html")}}
+
+## 구문
+
+```js-nolint
+Math.f16round(doubleFloat)
+```
+
+### 매개변수
+
+- `doubleFloat`
+ - : 숫자.
+
+### 반환 값
+
+`doubleFloat`의 가장 가까운 [16비트 반정밀도](https://en.wikipedia.org/wiki/Half-precision_floating-point_format) 부동소수점 표현.
+
+## 설명
+
+`Math.f16round`는 {{jsxref("Math.fround()")}}의 16비트 버전입니다. 이는 {{jsxref("Float16Array")}}에서 읽을 때와 같이 float16 숫자와 상호 작용할 때 발생하는 일부 문제점을 해결하기 위한 것입니다. 내부적으로 JavaScript는 여전히 숫자를 64비트 부동소수점으로 취급하지만, 가수의 10번째 비트에서 "짝수로 반올림"을 수행하고 이후의 모든 가수 비트를 `0`으로 설정합니다. 숫자가 16비트 부동소수점의 범위를 벗어나면 {{jsxref("Infinity")}} 또는 `-Infinity`가 반환됩니다.
+
+`f16round()`는 `Math`의 정적 메서드이므로, 생성한 `Math` 객체의 메서드로 사용하는 것이 아니라 항상 `Math.f16round()`로 사용합니다(`Math`는 생성자가 아닙니다).
+
+## 예제
+
+### Math.f16round() 사용하기
+
+숫자 1.5는 이진 숫자 시스템에서 정확하게 표현될 수 있으며, 16비트와 64비트에서 동일합니다.
+
+```js
+Math.f16round(1.5); // 1.5
+Math.f16round(1.5) === 1.5; // true
+```
+
+그러나 숫자 1.337은 이진 숫자 시스템에서 정확하게 표현될 수 없기 때문에 16비트와 64비트에서 다릅니다.
+
+```js
+Math.f16round(1.337); // 1.3369140625
+Math.f16round(1.337) === 1.337; // false
+```
+
+100000은 16비트 부동소수점에 비해 너무 크므로 `Infinity`가 반환됩니다:
+
+```js
+Math.f16round(100000); // Infinity
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [`core-js`의 `Math.f16round` 폴리필](https://github.com/zloirock/core-js#float16-methods)
+- {{jsxref("Math.fround()")}}
+- {{jsxref("Math.round()")}}
diff --git a/files/ko/web/javascript/reference/global_objects/math/floor/index.md b/files/ko/web/javascript/reference/global_objects/math/floor/index.md
index ddd7cfdfacceae..b6d93afb3a826b 100644
--- a/files/ko/web/javascript/reference/global_objects/math/floor/index.md
+++ b/files/ko/web/javascript/reference/global_objects/math/floor/index.md
@@ -1,18 +1,20 @@
---
title: Math.floor()
slug: Web/JavaScript/Reference/Global_Objects/Math/floor
+l10n:
+ sourceCommit: 6a0f9553932823cd0c4dcf695d4b4813474964fb
---
{{JSRef}}
-**`Math.floor()`** 함수는 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환합니다.
+**`Math.floor()`** 정적 메서드는 언제나 버림 처리하고 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환합니다.
{{EmbedInteractiveExample("pages/js/math-floor.html")}}
## 구문
-```js
-Math.floor(x);
+```js-nolint
+Math.floor(x)
```
### 매개변수
@@ -22,100 +24,93 @@ Math.floor(x);
### 반환 값
-주어진 수 이하의 가장 큰 정수.
+`x`와 같거나 작은 정수 중 가장 큰 수. [`-Math.ceil(-x)`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil)와 같은 값입니다.
## 설명
-`floor()`는 `Math`의 정적 메서드이므로, 사용자가 생성한 `Math` 객체의 메서드로 호출할 수 없고 항상 `Math.floor()`를 사용해야 합니다. (`Math`는 생성자가 아닙니다)
-
-> **참고:** `Math.floor(null)`은 {{jsxref("NaN")}} 대신 0을 반환합니다.
+`floor()`는 `Math`의 정적 메서드이므로, 생성한 `Math` 객체(`Math`는 생성자가 아닙니다)의 메서드 보다는 항상 `Math.floor()`를 사용하세요.
## 예제
-### `Math.floor()` 사용하기
+### Math.floor() 사용하기
```js
-Math.floor(45.95); // 45
-Math.floor(45.05); // 45
-Math.floor(4); // 4
-Math.floor(-45.05); // -46
+Math.floor(-Infinity); // -Infinity
Math.floor(-45.95); // -46
+Math.floor(-45.05); // -46
+Math.floor(-0); // -0
+Math.floor(0); // 0
+Math.floor(4); // 4
+Math.floor(45.05); // 45
+Math.floor(45.95); // 45
+Math.floor(Infinity); // Infinity
```
### 십진수 조절
-```js
-// Closure
-(function () {
- /**
- * 십진수 조절
- *
- * @param {String} type 조정 타입.
- * @param {Number} value 숫자.
- * @param {Integer} exp 지수 (10 로그의 조정값).
- * @returns {Number} 조정값
- */
- function decimalAdjust(type, value, exp) {
- // exp가 undefined 또는 0인 경우...
- if (typeof exp === "undefined" || +exp === 0) {
- return Math[type](value);
- }
- value = +value;
- exp = +exp;
- // 값이 숫자가 아니거나 정수형이 아닌 경우...
- if (isNaN(value) || !(typeof exp === "number" && exp % 1 === 0)) {
- return NaN;
- }
- // Shift
- value = value.toString().split("e");
- value = Math[type](+(value[0] + "e" + (value[1] ? +value[1] - exp : -exp)));
- // Shift back
- value = value.toString().split("e");
- return +(value[0] + "e" + (value[1] ? +value[1] + exp : exp));
- }
+이 예시에서, 우리는 `Math.floor()`, `Math.ceil()`, 그리고 `Math.round()`를 확장한 메서드인 `decimalAdjust()`를 구현합니다. 세 가지 `Math` 함수가 항상 입력을 정수 단위로 조정하는 반면, `decimalAdjust`는 숫자를 조정해야 하는 소수점 왼쪽의 자릿수를 지정하는 `exp` 매개변수를 받습니다. 예를 들어, `-1`은 소수점 이후 한 자리를 남긴다는 의미입니다 ("× 10-1 "와 같이). 또한, `type` 매개변수를 통해 조정 방식 - `round`, `floor`, 또는 `ceil` - 을 선택할 수 있습니다.
- // 십진수 round
- if (!Math.round10) {
- Math.round10 = function (value, exp) {
- return decimalAdjust("round", value, exp);
- };
- }
- // 십진수 floor
- if (!Math.floor10) {
- Math.floor10 = function (value, exp) {
- return decimalAdjust("floor", value, exp);
- };
+이는 숫자에 10의 거듭제곱을 곱한 다음, 결과를 가장 가까운 정수로 반올림하고, 그 다음 10의 거듭제곱으로 나누는 방식으로 작동합니다. 정밀도를 더 잘 유지하기 위해, 이 방법은 Number의 [`toString()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/toString) 메서드를 활용합니다. 이 메서드는 큰 숫자나 작은 숫자를 과학적 표기법(예: `6.02e23`)으로 표현합니다.
+
+```js
+/**
+ * 명시된 자리수의 숫자 조정하기
+ *
+ * @param {"round" | "floor" | "ceil"} type 조정의 유형.
+ * @param {number} value 숫자 값.
+ * @param {number} exp 지수(조정 기준의 10 로그)입니다.
+ * @returns {number} 조정된 값.
+ */
+function decimalAdjust(type, value, exp) {
+ type = String(type);
+ if (!["round", "floor", "ceil"].includes(type)) {
+ throw new TypeError(
+ "The type of decimal adjustment must be one of 'round', 'floor', or 'ceil'.",
+ );
}
- // 십진수 ceil
- if (!Math.ceil10) {
- Math.ceil10 = function (value, exp) {
- return decimalAdjust("ceil", value, exp);
- };
+ exp = Number(exp);
+ value = Number(value);
+ if (exp % 1 !== 0 || Number.isNaN(value)) {
+ return NaN;
+ } else if (exp === 0) {
+ return Math[type](value);
}
-})();
-
-// Round
-Math.round10(55.55, -1); // 55.6
-Math.round10(55.549, -1); // 55.5
-Math.round10(55, 1); // 60
-Math.round10(54.9, 1); // 50
-Math.round10(-55.55, -1); // -55.5
-Math.round10(-55.551, -1); // -55.6
-Math.round10(-55, 1); // -50
-Math.round10(-55.1, 1); // -60
-// Floor
-Math.floor10(55.59, -1); // 55.5
-Math.floor10(59, 1); // 50
-Math.floor10(-55.51, -1); // -55.6
-Math.floor10(-51, 1); // -60
-// Ceil
-Math.ceil10(55.51, -1); // 55.6
-Math.ceil10(51, 1); // 60
-Math.ceil10(-55.59, -1); // -55.5
-Math.ceil10(-59, 1); // -50
+ const [magnitude, exponent = 0] = value.toString().split("e");
+ const adjustedValue = Math[type](`${magnitude}e${exponent - exp}`);
+ // 뒤로 이동
+ const [newMagnitude, newExponent = 0] = adjustedValue.toString().split("e");
+ return Number(`${newMagnitude}e${+newExponent + exp}`);
+}
+
+// 십진법 반올림
+const round10 = (value, exp) => decimalAdjust("round", value, exp);
+// 십진법 버림
+const floor10 = (value, exp) => decimalAdjust("floor", value, exp);
+// 십진법 올림
+const ceil10 = (value, exp) => decimalAdjust("ceil", value, exp);
+
+// 반올림
+round10(55.55, -1); // 55.6
+round10(55.549, -1); // 55.5
+round10(55, 1); // 60
+round10(54.9, 1); // 50
+round10(-55.55, -1); // -55.5
+round10(-55.551, -1); // -55.6
+round10(-55, 1); // -50
+round10(-55.1, 1); // -60
+// 버립
+floor10(55.59, -1); // 55.5
+floor10(59, 1); // 50
+floor10(-55.51, -1); // -55.6
+floor10(-51, 1); // -60
+// 올림
+ceil10(55.51, -1); // 55.6
+ceil10(51, 1); // 60
+ceil10(-55.59, -1); // -55.5
+ceil10(-59, 1); // -50
```
-## 명세
+## 명세서
{{Specifications}}
diff --git a/files/ko/web/javascript/reference/global_objects/math/log/index.md b/files/ko/web/javascript/reference/global_objects/math/log/index.md
index 13a4a5997769fa..55f792a6314014 100644
--- a/files/ko/web/javascript/reference/global_objects/math/log/index.md
+++ b/files/ko/web/javascript/reference/global_objects/math/log/index.md
@@ -1,53 +1,50 @@
---
title: Math.log()
slug: Web/JavaScript/Reference/Global_Objects/Math/log
+l10n:
+ sourceCommit: 761b9047d78876cbd153be811efb1aa77b419877
---
{{JSRef}}
-**`Math.log()`** 함수는 자연 로가리즘은 ({{jsxref("Math.E", "e")}} 를 기초) 의 수를 계산합니다, 이건 다음의
+**`Math.log()`** 정적 메서드는 숫자의 자연 로그(밑이 [e](/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/E))를 반환합니다. 즉, 아래와 같습니다.
-∀ x > 0 , Math.log ( x ) = ln ( x ) = the unique y such that e y = x \forall x > 0, \mathtt{\operatorname{Math.log}(x)} = \ln(x) = \text{고유값} \; y \; \text{같이} \; e^y = x
+ ∀ x > 0 , 𝙼𝚊𝚝𝚑.𝚕𝚘𝚐 ( 𝚡 ) = ln ( x ) = the unique y such that e y = x \forall x > 0,\;\mathtt{\operatorname{Math.log}(x)} = \ln(x) = \text{the unique } y \text{ such that } e^y = x
+
-JavaScript **`Math.log()`** 함수는 _ln(x)_ 수학적으로 같습니다.
+{{EmbedInteractiveExample("pages/js/math-log.html")}}
-## 문법
+## 구문
-```js
-Math.log(x);
+```js-nolint
+Math.log(x)
```
-### 인자
+### 매개변수
- `x`
- - : 실수값.
+ - : 0 이상의 수
-### 반환값
+### 반환 값
-자연 로가리즘은 ({{jsxref("Math.E", "e")}} 를 기초) 실수값으로 줍니다. 마이너스 실수값, {{jsxref("NaN")}} 계산됩니다.
+`x`의 자연 로그(밑이 [e](/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/E)). 만약 `x`가 ±0일 경우 [`-Infinity`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY)을 반환하며, `x < 0` 이라면 {{jsxref("NaN")}}을 반환합니다.
## 설명
-만일 값 `x` 가 마이너스라면, 항상 다음값이 계산됩니다 {{jsxref("NaN")}}.
+`log()`는 `Math`의 정적 메서드이기 때문에, 항상 `Math.log()`로 사용합니다. 생성한 `Math` 객체의 메서드로 사용하지 않습니다 (`Math`는 생성자가 아닙니다).
-왜그렇냐면 `Math` 의 log() 가 정적 메서드이기 때문,에 매번 다음처럼 `Math.log()` 써야합니다 (생성자로 초기화된 `Math` 개체가 아니기 때문입니다).
+2나 10의 자연 로그가 필요하다면, {{jsxref("Math.LN2")}}나 {{jsxref("Math.LN10")}} 상수를 사용하세요. 밑이 2나 10인 로그가 필요하다면, {{jsxref("Math.log2()")}} 혹은 {{jsxref("Math.log10()")}}을 사용하세요. 다른 밑의 로그가 필요하다면, 아래 예시처럼 `Math.log(x) / Math.log(otherBase)`를 사용하세요. 이 경우 `1 / Math.log(otherBase)`를 미리 계산해 두는 것이 좋습니다. `Math.log(x) * constant` 곱셈이 훨씬 더 빠르기 때문입니다.
-자연로그 2 나 10, 상수로쓸때 {{jsxref("Math.LN2")}} or {{jsxref("Math.LN10")}} . 로가리즘 기초값 2 나 10, 쓸때는 {{jsxref("Math.log2()")}} 혹은 {{jsxref("Math.log10()")}} . 로가리즘 다른 기초값은 Math.log(x) / Math.log(기초값) 처럼 예제참고; 미리계산하여 1 / Math.log(기초값) 할 수 있습니다.
+1에 매우 가까운 양수의 경우 정밀도 손실이 발생할 수 있어 자연 로그의 정확도가 떨어질 수 있습니다. 이런 경우에는 {{jsxref("Math.log1p")}}를 대신 사용하는 것이 좋습니다.
## 예제
-### `Math.log() 사용`
-
-```js
-Math.log(-1); // NaN, 정의범위 초과
-Math.log(0); // -Infinity, 무한
-Math.log(1); // 0
-Math.log(10); // 2.302585092994046
-```
-
-### `Math.log()` 다른 기초값 사용
+### Math.log() 사용하기
-이 함수는 로가리즘 `y 에 대한것으로` 기초값 `x` (ie. log x y \log_x y log x y \log_x y 53 – 1)을 나타냅니다.
-{{EmbedInteractiveExample("pages/js/number-maxsafeinteger.html")}}{{js_property_attributes(0, 0, 0)}}
+더 큰 정수는 {{jsxref("BigInt")}}를 고려해보시기 바랍니다.
+
+{{EmbedInteractiveExample("pages/js/number-maxsafeinteger.html")}}
+
+## 값
+
+`9007199254740991` (9,007,199,254,740,991, or \~9천 조).
+
+{{js_property_attributes(0, 0, 0)}}
## 설명
@@ -17,23 +27,27 @@ slug: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER
`MAX_SAFE_INTEGER`는 {{jsxref("Number")}}의 정적 속성이기 때문에, 직접 생성한 {{jsxref("Number")}} 객체의 속성이 아니라 `Number.MAX_SAFE_INTEGER` 형식으로 사용해야 합니다.
+[배정밀도 부동 소수점 형식](https://en.wikipedia.org/wiki/Double_precision_floating-point_format)은 [가수부](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#number_encoding)를 표현하기 위해 오직 52비트만 사용할 수 있습니다. 그래서 -(253 – 1) 부터 253 – 1 까지의 정수만 안전하게 표현할 수 있습니다. 이 문맥에서 "안전"이라는 말은 정수를 정확하게 표현하고 이 정수들을 올바르게 비교할 수 있음을 의미합니다. 예를 들어 `Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2`는 true로 평가되겠지만 수학적으로는 틀렸습니다. 보다 자세한 정보는 {{jsxref("Number.isSafeInteger()")}}를 참고하시기 바랍니다.
+
+{{jsxref("Number")}}는 `MAX_SAFE_INTEGER`는 정적 속성이기 때문에 숫자 값의 속성보다는 언제나 `Number.MAX_SAFE_INTEGER` 형태로 사용하세요.
+
## 예제
+### MAX_SAFE_INTEGER의 반환 값
+
```js
Number.MAX_SAFE_INTEGER; // 9007199254740991
-Number.MAX_SAFE_INTEGER * Number.EPSILON; // 2 because in floating points, the value is actually the decimal trailing "1"
-// except for in subnormal precision cases such as zero
```
-## 폴리필
+### MAX_SAFE_INTEGER와 EPSILON의 관계
+
+{{jsxref("Number.EPSILON")}}는 2-52 인데 반해 `MAX_SAFE_INTEGER`는 253 – 1 입니다. 두 값은 모두 53비트(가장 높은 비트는 언제나 1)인 가수부의 너비에서 파생됩니다. 이를 곱하면 2에 매우 가깝지만 같지는 않은 값이 나옵니다.
```js
-if (!Number.MAX_SAFE_INTEGER) {
- Number.MAX_SAFE_INTEGER = Math.pow(2, 53) - 1; // 9007199254740991
-}
+Number.MAX_SAFE_INTEGER * Number.EPSILON; // 1.9999999999999998
```
-## 명세
+## 명세서
{{Specifications}}
@@ -43,6 +57,7 @@ if (!Number.MAX_SAFE_INTEGER) {
## 같이 보기
+- [`core-js`에서의 `Number.MAX_SAFE_INTEGER` 폴리필](https://github.com/zloirock/core-js#ecmascript-number)
- {{jsxref("Number.MIN_SAFE_INTEGER")}}
- {{jsxref("Number.isSafeInteger()")}}
- {{jsxref("BigInt")}}
diff --git a/files/ko/web/javascript/reference/global_objects/object/__lookupsetter__/index.md b/files/ko/web/javascript/reference/global_objects/object/__lookupsetter__/index.md
new file mode 100644
index 00000000000000..a93da800b3709e
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/__lookupsetter__/index.md
@@ -0,0 +1,105 @@
+---
+title: Object.prototype.__lookupSetter__()
+slug: Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__
+l10n:
+ sourceCommit: fd326b574aadcd78924a5a223f15e289e45a7f1d
+---
+
+{{JSRef}} {{Deprecated_Header}}
+
+> **참고:** 이 기능은 {{jsxref("Object.getOwnPropertyDescriptor()")}} API 사용을 선호하기 때문에 더 이상 사용되지 않습니다. 이 메서드의 동작은 웹 호환성을 위해서만 명시되며 모든 플랫폼에서 구현할 필요는 없습니다. 모든 곳에서 작동하지 않을 수도 있습니다.
+
+{{jsxref("Object")}} 인스턴스의 **`__lookupSetter__()`** 메서드는 지정된 속성에 설정자로 바인딩된 함수를 반환합니다.
+
+## 구문
+
+```js-nolint
+__lookupSetter__(prop)
+```
+
+### 매개변수
+
+- `prop`
+ - : 반환되어야 할 설정자 속성의 이름이 포함된 문자열.
+
+### 반환 값
+
+지정된 속성에 설정자로 바인딩된 함수를 반환합니다. 해당 속성을 찾을 수 없거나 해당 속성이 [데이터 속성](/ko/docs/Web/JavaScript/Data_structures#data_property)이면 `undefined`를 반환합니다.
+
+## 설명
+
+`Object.prototype`을 상속받는 모든 객체들(즉, [`null`-프로토타입 객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects)를 제외한 모든 객체)은 `__lookupSetter__()` 메서드를 상속받습니다. 객체의 속성에 대해 [설정자](/ko/docs/Web/JavaScript/Reference/Functions/get)가 정의되어 있다면, 해당 속성을 통해 설정자 함수를 직접 참조하는 것은 불가능합니다. 왜냐하면 그 속성은 값이 설정될 때만 함수를 호출하기 때문입니다. `__lookupSetter__()`는 설정자 함수에 대한 참조를 얻는 데 사용될 수 있습니다.
+
+`__lookupSetter__()` 메서드는 [프로토타입 체인](/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)을 따라 올라가며 지정된 속성을 찾습니다. 프로토타입 체인 상의 어떤 객체가 지정된 [고유 속성](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn)을 가지고 있다면, 해당 속성의 [속성 설명자](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor) 의 `set` 속성이 반환됩니다. 만약 그 속성이 데이터 속성이라면, `undefined`가 반환됩니다. 전체 프로토타입 체인을 따라 속성을 찾지 못한 경우에도 `undefined`가 반환됩니다.
+
+`__lookupSetter__()` 메서드는 명세서에서 "규범적 선택사항(normative optional)"으로 정의되어 있습니다. 이는 모든 구현체가 이 메서드를 반드시 구현할 필요는 없다는 의미입니다. 그러나 모든 주요 브라우저들이 이를 구현하고 있으며, 지속적인 사용으로 인해 앞으로 제거될 가능성은 낮습니다. 만약 브라우저가 `__lookupSetter__()`를 구현한다면, [`__lookupGetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__), [`__defineGetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__), 그리고 [`__defineSetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__) 메서드도 함께 구현해야 합니다.
+
+## 예제
+
+### \_\_lookupSetter\_\_() 사용하기
+
+```js
+const obj = {
+ set foo(value) {
+ this.bar = value;
+ },
+};
+
+obj.__lookupSetter__("foo");
+// [Function: set foo]
+```
+
+### 표준 방법으로 속성의 설정자 검색하기
+
+속성의 설정자를 찾을 때는 {{jsxref("Object.getOwnPropertyDescriptor()")}} API를 사용해야 합니다. `__lookupSetter__()`와 비교하자면, 이 메서드는 [심볼](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol) 속성도 찾을 수 있습니다. `Object.getOwnPropertyDescriptor()` 메서드는 또한 [`null`-프로토타입 객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects)에서도 작동합니다. 이러한 객체들은 `Object.prototype`을 상속받지 않아 `__lookupSetter__()` 메서드를 가지고 있지 않습니다. 만약 `__lookupSetter__()`의 프로토타입 체인을 따라 올라가는 동작이 중요하다면, {{jsxref("Object.getPrototypeOf()")}}를 사용하여 직접 구현할 수 있습니다.
+
+```js
+const obj = {
+ set foo(value) {
+ this.bar = value;
+ },
+};
+
+Object.getOwnPropertyDescriptor(obj, "foo").set;
+// [Function: set foo]
+```
+
+```js
+const obj2 = {
+ __proto__: {
+ set foo(value) {
+ this.bar = value;
+ },
+ },
+};
+
+function findSetter(obj, prop) {
+ while (obj) {
+ const desc = Object.getOwnPropertyDescriptor(obj, prop);
+ if (desc) {
+ return desc.set;
+ }
+ obj = Object.getPrototypeOf(obj);
+ }
+}
+
+console.log(findSetter(obj2, "foo")); // [Function: set foo]
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [`core-js`에서의 `Object.prototype.__lookupSetter__` 폴리필](https://github.com/zloirock/core-js#ecmascript-object)
+- [`Object.prototype.__lookupGetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__)
+- {{jsxref("Functions/set", "set")}}
+- {{jsxref("Object.getOwnPropertyDescriptor()")}}
+- [`Object.prototype.__defineGetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__)
+- [`Object.prototype.__defineSetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__)
+- [JS 안내서: 접근자와 설정자 정의하기](/ko/docs/Web/JavaScript/Guide/Working_with_objects#접근자와_설정자_정의하기)
diff --git a/files/ko/web/javascript/reference/global_objects/regexp/leftcontext/index.md b/files/ko/web/javascript/reference/global_objects/regexp/leftcontext/index.md
new file mode 100644
index 00000000000000..4989e9f07a2aad
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/regexp/leftcontext/index.md
@@ -0,0 +1,49 @@
+---
+title: RegExp.leftContext ($`)
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/leftContext
+l10n:
+ sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a
+---
+
+{{JSRef}} {{Deprecated_Header}}
+
+> **참고:** 마지막 일치 상태를 전역적으로 노출하는 모든 `RegExp` 정적 속성은 더 이상 사용되지 않습니다. 자세한 내용은 [더 이상 사용되지 않는 RegExp 기능](/ko/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#regexp)을 참고하세요.
+
+**`RegExp.leftContext`** 정적 접근자 속성은 가장 최근 일치 항목 앞에 있는 하위 문자열을 반환합니다. ``RegExp["$`"]``는 이 속성의 별칭입니다.
+
+## 설명
+
+`leftContext`는 {{jsxref("RegExp")}}의 정적 속성이기 때문에, 생성한 `RegExp` 객체의 속성으로 사용하는 것보다는 항상 `RegExp.leftContext` 또는 ``RegExp["$`"]``로 사용해야 합니다.
+
+`leftContext`의 값은 `RegExp`(`RegExp` 하위 클래스 제외) 인스턴스가 일치에 성공할 때마다 갱신됩니다. 일치하는 항목이 없으면 `leftContext`는 빈 문자열입니다. `leftContext`의 설정 접근자는 `undefined`이므로 이 속성을 직접 변경할 수 없습니다.
+
+`` ` ``는 유효한 식별자 부분이 아니므로 점 속성 접근자(``RegExp.$` ``)와 함께 약칭을 사용할 수 없으며 이로 인해 {{jsxref("SyntaxError")}}가 발생합니다. 대신 [대괄호 표기법](/ko/docs/Web/JavaScript/Reference/Operators/Property_accessors)을 사용하시기 바랍니다.
+
+``$` ``는 {{jsxref("String.prototype.replace()")}}의 대체 문자열에도 사용할 수 있지만, 이는 ``RegExp["$`"]`` 레거시 속성과는 관련이 없습니다.
+
+## 예제
+
+### leftContext와 $\` 사용하기
+
+```js
+const re = /world/g;
+re.test("hello world!");
+RegExp.leftContext; // "hello "
+RegExp["$`"]; // "hello "
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{jsxref("RegExp/input", "RegExp.input ($_)")}}
+- {{jsxref("RegExp/lastMatch", "RegExp.lastMatch ($&)")}}
+- {{jsxref("RegExp/lastParen", "RegExp.lastParen ($+)")}}
+- {{jsxref("RegExp/rightContext", "RegExp.rightContext ($')")}}
+- {{jsxref("RegExp/n", "RegExp.$1, …, RegExp.$9")}}
diff --git a/files/ko/web/javascript/reference/global_objects/regexp/n/index.md b/files/ko/web/javascript/reference/global_objects/regexp/n/index.md
new file mode 100644
index 00000000000000..62d84e51e4d596
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/regexp/n/index.md
@@ -0,0 +1,52 @@
+---
+title: RegExp.$1, …, RegExp.$9
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/n
+l10n:
+ sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a
+---
+
+{{JSRef}} {{Deprecated_Header}}
+
+> **참고:** 마지막 일치 상태를 전역적으로 노출하는 모든 `RegExp` 정적 속성은 더 이상 사용되지 않습니다. 자세한 내용은 [더 이상 사용되지 않는 RegExp 기능](/ko/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#regexp)을 참고하세요.
+
+**`RegExp.$1, …, RegExp.$9`** 정적 접근자 속성은 괄호 안의 하위 문자열 일치 항목을 반환합니다.
+
+## 설명
+
+`$1`–`$9`는 {{jsxref("RegExp")}}의 정적 속성이기 때문에, 생성한 `RegExp` 객체의 속성으로 사용하는 것보다는 항상`RegExp.$1`, `RegExp.$2` 등으로 사용해야 합니다.
+
+`$1, …, $9`의 값은 `RegExp`(`RegExp` 하위 클래스 제외) 인스턴스가 일치에 성공할 때마다 갱신됩니다. 일치하는 항목이 없거나 마지막 일치가 대응되는 캡쳐 그룹이 없으면 각각의 속성은 빈 문자열입니다. 각각의 속성의 설정 접근자는 `undefined`이므로 이 속성을 직접 변경할 수 없습니다.
+
+괄호로 묶을 수 있는 하위 문자열의 개수는 제한이 없지만 `RegExp` 객체는 처음 9개만 보유할 수 있습니다. 반환된 배열의 인덱스를 통해 괄호로 묶인 모든 하위 문자열에 접근할 수 있습니다.
+
+`$1, …, $9`는 {{jsxref("String.prototype.replace()")}}의 대체 문자열에도 사용할 수 있지만, 이는 `RegExp.$n` 레거시 속성과는 관련이 없습니다.
+
+## 예제
+
+### RegExp.prototype.test()와 함께 $n 사용하기
+
+아래 스크립트는 일반적인 문자열 내에서 숫자를 잡아내기 위해 {{jsxref("RegExp.prototype.test()")}} 메서드를 사용합니다.
+
+```js
+const str = "Test 24";
+const number = /(\d+)/.test(str) ? RegExp.$1 : "0";
+number; // "24"
+```
+
+`re.test(str)` 호출과 `RegExp.$n` 속성 사이에 다른 정규식을 사용하는 작업은 부작용이 있을 수 있습니다. 이러한 특수 속성 접근은 즉시 수행해야 하며, 그렇지 않으면 예상치 못한 결과가 발생할 수 있다는 점을 주의하시기 바랍니다.
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{jsxref("RegExp/input", "RegExp.input ($_)")}}
+- {{jsxref("RegExp/lastMatch", "RegExp.lastMatch ($&)")}}
+- {{jsxref("RegExp/lastParen", "RegExp.lastParen ($+)")}}
+- {{jsxref("RegExp/leftContext", "RegExp.leftContext ($`)")}}
+- {{jsxref("RegExp/rightContext", "RegExp.rightContext ($')")}}
diff --git a/files/ko/web/javascript/reference/global_objects/regexp/rightcontext/index.md b/files/ko/web/javascript/reference/global_objects/regexp/rightcontext/index.md
new file mode 100644
index 00000000000000..52cd14f90031a2
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/regexp/rightcontext/index.md
@@ -0,0 +1,49 @@
+---
+title: RegExp.rightContext ($')
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/rightContext
+l10n:
+ sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a
+---
+
+{{JSRef}} {{Deprecated_Header}}
+
+> **참고:** 마지막 일치 상태를 전역적으로 노출하는 모든 `RegExp` 정적 속성은 더 이상 사용되지 않습니다. 자세한 내용은 [더 이상 사용되지 않는 RegExp 기능](/ko/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#regexp)을 참고하세요.
+
+**`RegExp.rightContext`** 정적 접근자 속성은 가장 최근에 일치한 하위 문자열을 반환합니다. `RegExp["$'"]`는 이 속성의 별칭입니다.
+
+## 설명
+
+`rightContext`는 {{jsxref("RegExp")}}의 정적 속성이기 때문에, 생성한 `RegExp` 객체의 속성으로 사용하는 것보다는 항상 `RegExp.rightContext` 또는 ``RegExp["$'"]`로 사용해야 합니다.
+
+`rightContext`의 값은 `RegExp`(`RegExp` 하위 클래스 제외) 인스턴스가 일치에 성공할 때마다 갱신됩니다. 일치하는 항목이 없으면 `rightContext`는 빈 문자열입니다. `rightContext`의 설정 접근자는 `undefined`이므로 이 속성을 직접 변경할 수 없습니다.
+
+`'`는 유효한 식별자 부분이 아니므로 점 속성 접근자(`RegExp.$'`)와 함께 약칭을 사용할 수 없으며 이로 인해 {{jsxref("SyntaxError")}}가 발생합니다. 대신 [대괄호 표기법](/ko/docs/Web/JavaScript/Reference/Operators/Property_accessors)을 사용하시기 바랍니다.
+
+`$'`는 {{jsxref("String.prototype.replace()")}}의 대체 문자열에도 사용할 수 있지만, 이는 `RegExp["$'"]` 레거시 속성과는 관련이 없습니다.
+
+## 예제
+
+### rightContext와 $' 사용하기
+
+```js
+const re = /hello/g;
+re.test("hello world!");
+RegExp.rightContext; // " world!"
+RegExp["$'"]; // " world!"
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{jsxref("RegExp/input", "RegExp.input ($_)")}}
+- {{jsxref("RegExp/lastMatch", "RegExp.lastMatch ($&)")}}
+- {{jsxref("RegExp/lastParen", "RegExp.lastParen ($+)")}}
+- {{jsxref("RegExp/leftContext", "RegExp.leftContext ($`)")}}
+- {{jsxref("RegExp/n", "RegExp.$1, …, RegExp.$9")}}
diff --git a/files/ko/web/javascript/reference/global_objects/set/intersection/index.md b/files/ko/web/javascript/reference/global_objects/set/intersection/index.md
index 2c754ad2148e93..4e0d7d4fd650f5 100644
--- a/files/ko/web/javascript/reference/global_objects/set/intersection/index.md
+++ b/files/ko/web/javascript/reference/global_objects/set/intersection/index.md
@@ -7,7 +7,7 @@ l10n:
{{JSRef}}
-{{jsxref("Set")}} 인스턴스의 **`intersection()`** 메서드는 집합을 받아서 이 집합과 주어진 집합의 요소를 모두 포함하는 새 집합을 반환합니다.
+{{jsxref("Set")}} 인스턴스의 **`intersection()`** 메서드는 집합을 받아서 이 집합과 주어진 집합의 공통 요소를 포함하는 새 집합을 반환합니다.
## 구문
@@ -22,7 +22,7 @@ intersection(other)
### 반환 값
-이 집합과 `other` 집합 모두 있는 요소를 포함하는 새 {{jsxref("Set")}} 객체입니다.
+이 집합과 `other` 집합에 공통으로 있는 요소를 포함하는 새 {{jsxref("Set")}} 객체입니다.
## 설명
diff --git a/files/ko/web/javascript/reference/global_objects/set/@@iterator/index.md b/files/ko/web/javascript/reference/global_objects/set/symbol.iterator/index.md
similarity index 94%
rename from files/ko/web/javascript/reference/global_objects/set/@@iterator/index.md
rename to files/ko/web/javascript/reference/global_objects/set/symbol.iterator/index.md
index 5335caeceefb55..90d435d49db244 100644
--- a/files/ko/web/javascript/reference/global_objects/set/@@iterator/index.md
+++ b/files/ko/web/javascript/reference/global_objects/set/symbol.iterator/index.md
@@ -1,6 +1,7 @@
---
title: Set.prototype[@@iterator]()
-slug: Web/JavaScript/Reference/Global_Objects/Set/@@iterator
+slug: Web/JavaScript/Reference/Global_Objects/Set/Symbol.iterator
+original_slug: Web/JavaScript/Reference/Global_Objects/Set/@@iterator
l10n:
sourceCommit: f3df52530f974e26dd3b14f9e8d42061826dea20
---
diff --git a/files/ko/web/javascript/reference/global_objects/string/slice/index.md b/files/ko/web/javascript/reference/global_objects/string/slice/index.md
index 955f93d1122ec1..e66ac147dd6417 100644
--- a/files/ko/web/javascript/reference/global_objects/string/slice/index.md
+++ b/files/ko/web/javascript/reference/global_objects/string/slice/index.md
@@ -2,7 +2,7 @@
title: String.prototype.slice()
slug: Web/JavaScript/Reference/Global_Objects/String/slice
l10n:
- sourceCommit: 4406757f6bb4404b5309756bac2acb994c169e40
+ sourceCommit: 5f08178b7c2c97b15dd5d6483580fd70abd5169a
---
{{JSRef}}
@@ -50,7 +50,7 @@ slice(indexStart, indexEnd)
- `indexStart >= str.length`이라면, 빈 문자열이 반환됩니다.
- `indexStart < 0`이라면, 문자열의 끝부터 인덱스를 셉니다. 보다 공식적으로 말하자면 이 경우, 하위 문자열은 `max(indexStart + str.length, 0)`에서 시작합니다.
- `indexStart`가 생략되었거나 정의되지 않았거나 [숫자로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#number_coercion)할 수 없는 경우, `0`으로 처리됩니다.
-- `indexEnd`가 생략되었거나, 정의되지 않았거나, [숫자로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#number_coercion)할 수 없는 경우 또는 `indexEnd >= str.length`이면 `slice()`는 문자열 끝으로 추출합니다.
+- `indexEnd`가 생략되었거나 혹은 정의되지 않았거나 혹은 `indexEnd >= str.length`이면 `slice()`는 문자열 끝으로 추출합니다.
- `indexEnd < 0`이면 문자열의 끝부터 인덱스를 셉니다. 보다 공식적으로 말하자면 이 경우, 하위 문자열은 `max(indexEnd + str.length, 0)`에서 끝납니다.
- 음수 값을 정규화한 후 (즉, `indexEnd`가 `indexStart` 앞에 있는 문자를 나타내는 경우) `indexEnd <= indexStart`인 경우 빈 문자열이 반환됩니다.
diff --git a/files/ko/web/javascript/reference/global_objects/string/substr/index.md b/files/ko/web/javascript/reference/global_objects/string/substr/index.md
index c8f0ea0582b96d..11d067331c29b2 100644
--- a/files/ko/web/javascript/reference/global_objects/string/substr/index.md
+++ b/files/ko/web/javascript/reference/global_objects/string/substr/index.md
@@ -1,85 +1,67 @@
---
title: String.prototype.substr()
slug: Web/JavaScript/Reference/Global_Objects/String/substr
+l10n:
+ sourceCommit: c2445ce1dc3a0170e2fbfdbee10e18a7455c2282
---
-{{JSRef}}
+{{JSRef}} {{Deprecated_Header}}
-> **경고:** 경고: 엄밀히 말해서 `String.prototype.substr()` 메서드가 더 이상 사용되지 않는, 즉 "웹 표준에서 제거된" 건 아닙니다. 그러나 `substr()`이 포함된 ECMA-262 표준의 [부록 B](https://www.ecma-international.org/ecma-262/9.0/index.html#sec-additional-ecmascript-features-for-web-browsers)는 다음과 같이 명시하고 있습니다.> … 본 부록이 포함한 모든 언어 기능과 행동은 하나 이상의 바람직하지 않은 특징을 갖고 있으며 사용처가 없어질 경우 명세에서 제거될 것입니다. …
->
-> > … 프로그래머는 새로운 ECMAScript 코드를 작성할 때 본 부록이 포함한 기능을 사용하거나 존재함을 가정해선 안됩니다. …
+{{jsxref("String")}} 값의 **`substr()`** 메서드는 지정된 인덱스에서 시작하여 그 다음에 지정된 문자 수만큼 확장되는 이 문자열의 일부를 반환합니다.
-**`substr()`** 메서드는 문자열에서 특정 위치에서 시작하여 특정 문자 수 만큼의 문자들을 반환합니다.
+> **참고:** `substr()`은 기본 ECMAScript 명세의 일부가 아니며, 비브라우저 런타임에 대한 권장 선택 사항인[부록 B: 웹 브라우저용 추가 ECMAScript 기능](https://tc39.es/ecma262/multipage/additional-ecmascript-features-for-web-browsers.html)에 정의되어 있습니다. 그러므로 코드를 최대한 크로스 플랫폼 친화적으로 만들려면 표준 [`String.prototype.substring()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/String/substring) 그리고 [`String.prototype.slice()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/String/slice) 메서드를 대신 사용을 권장합니다. [`String.prototype.substring()` 페이지](/ko/docs/Web/JavaScript/Reference/Global_Objects/String/substring#the_difference_between_substring_and_substr)에는 세 가지 메서드 간의 비교가 나와 있습니다.
{{EmbedInteractiveExample("pages/js/string-substr.html")}}
## 구문
-```js
-str.substr(start[, length])
+```js-nolint
+substr(start)
+substr(start, length)
```
### 매개변수
- `start`
- - : 추출하고자 하는 문자들의 시작위치입니다. 만약 음수가 주어진다면, `문자열총길이 + start`의 값으로 취급합니다. 예를 들면, `start`에 -3을 설정하면, 자동적으로 `문자열총길이 - 3`으로 설정하게 됩니다.
-- `length`
- - : 옵션값. 추출할 문자들의 총 숫자.
-
-## 설명
+ - : 반환된 부분 문자열에 포함할 첫 번째 문자의 인덱스입니다.
+- `length` {{optional_inline}}
+ - : 추출할 문자 수입니다.
-`start` 는 문자 인덱스입니다. 문자열에서 첫 번째 문자의 인덱스는 0이며, 마지막 문자의 인덱스는 문자열 전체 길이에서 1을 뺀 값입니다. `substr()` 는 `start` 에서 문자들을 추출을 시작하여 `length` 만큼 문자들을 수집합니다.
+### 반환 값
-만약 `start` 값이 양수이고 문자열 전체 길이보다 크거가 같을 경우, `substr()`은 빈 문자열을 반환합니다.
+주어진 문자열의 지정된 부분을 포함하는 새 문자열입니다.
-만약 `start`가 음수이면, `substr()`은 문자열 끝에서 `start` 숫자만큼 뺀 곳에서 시작하게 됩니다. 만약 `start`가 음수이고 절대값이 문자열 전체보다 크다면, `substr()`은 문자열의 0 인덱스부터 시작하게 됩니다. (주의: `start`의 음수값은 Microsoft JScript에서는 위의 설명과 같이 동작하지 않습니다.)
+## 설명
-만약 `length`가 0 혹은 음수이면, `substr()`은 빈 문자열을 반환합니다. 만약 `length`가 생략되면, `substr()`은 문자열의 끝까지 추출하여 반환합니다.
+문자열의 `substr()` 메서드는 `start` 인덱스부터 `length` 만큼의 문자를 추출합니다.
-## 예제
+- `start >= str.length`이면 빈 문자열이 반환됩니다.
+- `start < 0`이면 인덱스는 문자열의 끝부터 카운트를 시작합니다. 보다 공식적으로는 이 경우 하위 문자열은 `max(start + str.length, 0)`에서 시작합니다.
+- `start`가 생략되거나 {{jsxref("undefined")}}가 있으면 `start`는 `0`으로 처리됩니다.
+- `length`가 생략되거나 {{jsxref("undefined")}}인 경우 혹은 `start + length >= str.length`인 경우 `substr()`은 문자열의 끝 부분까지 문자를 추출합니다.
+- `length < 0`이면 빈 문자열이 반환됩니다.
+- `start`와 `length` 모두에 대해 {{jsxref("NaN")}}는 `0`으로 처리됩니다.
-### `substr()` 사용하기
+`substr()` 사용을 피하는 것이 좋지만, 기본적으로 `substr()`에 대한 폴리필을 작성하지 않고도 레거시 코드에서 `substr()`을 `slice()` 또는 `substring()`으로 마이그레이션하는 간단한 방법은 없습니다. 예를 들어, `str = "01234", a = 1, l = -2`인 경우 `str.substr(a, l)`, `str.slice(a, a + l)`, `str.substring(a, a + l)`는 모두 다른 결과를 반환하지만, `substr()`는 빈 문자열을 반환하고 `slice()`는 `"123"`을 반환하지만 `substring()`는 `"0"`을 반환합니다. 실제 리팩토링 방법은 `a`와 `l`의 범위에 대한 지식에 따라 달라집니다.
-```js
-var str = "abcdefghij";
-
-console.log("(1, 2): " + str.substr(1, 2)); // '(1, 2): bc'
-console.log("(-3, 2): " + str.substr(-3, 2)); // '(-3, 2): hi'
-console.log("(-3): " + str.substr(-3)); // '(-3): hij'
-console.log("(1): " + str.substr(1)); // '(1): bcdefghij'
-console.log("(-20, 2): " + str.substr(-20, 2)); // '(-20, 2): ab'
-console.log("(20, 2): " + str.substr(20, 2)); // '(20, 2): '
-```
-
-## 폴리필
+## 예제
-Microsoft의 JScript는 시작 인덱스에서 음수값을 지원하지 않습니다. 만약 여러분이 이렇게 동작하길 원한다면, 아래 코드를 사용하여 해결할 수 있습니다:
+### substr() 사용하기
```js
-// only run when the substr() function is broken
-if ("ab".substr(-1) != "b") {
- /**
- * Get the substring of a string
- * @param {integer} start where to start the substring
- * @param {integer} length how many characters to return
- * @return {string}
- */
- String.prototype.substr = (function (substr) {
- return function (start, length) {
- // call the original method
- return substr.call(
- this,
- // did we get a negative start, calculate how much it is from the beginning of the string
- // adjust the start parameter for negative value
- start < 0 ? this.length + start : start,
- length,
- );
- };
- })(String.prototype.substr);
-}
+const aString = "Mozilla";
+
+console.log(aString.substr(0, 1)); // 'M'
+console.log(aString.substr(1, 0)); // ''
+console.log(aString.substr(-1, 1)); // 'a'
+console.log(aString.substr(1, -1)); // ''
+console.log(aString.substr(-3)); // 'lla'
+console.log(aString.substr(1)); // 'ozilla'
+console.log(aString.substr(-20, 2)); // 'Mo'
+console.log(aString.substr(20, 2)); // ''
```
-## 명세
+## 명세서
{{Specifications}}
@@ -89,5 +71,6 @@ if ("ab".substr(-1) != "b") {
## 같이 보기
+- [`core-js`의 `String.prototype.substr` 폴리필](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
- {{jsxref("String.prototype.slice()")}}
- {{jsxref("String.prototype.substring()")}}
diff --git a/files/ko/web/javascript/reference/global_objects/string/@@iterator/index.md b/files/ko/web/javascript/reference/global_objects/string/symbol.iterator/index.md
similarity index 95%
rename from files/ko/web/javascript/reference/global_objects/string/@@iterator/index.md
rename to files/ko/web/javascript/reference/global_objects/string/symbol.iterator/index.md
index 49fbf95c37e1fe..4e63bfb5f1bad0 100644
--- a/files/ko/web/javascript/reference/global_objects/string/@@iterator/index.md
+++ b/files/ko/web/javascript/reference/global_objects/string/symbol.iterator/index.md
@@ -1,6 +1,7 @@
---
title: String.prototype[@@iterator]()
-slug: Web/JavaScript/Reference/Global_Objects/String/@@iterator
+slug: Web/JavaScript/Reference/Global_Objects/String/Symbol.iterator
+original_slug: Web/JavaScript/Reference/Global_Objects/String/@@iterator
l10n:
sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de
---
diff --git a/files/ko/web/javascript/reference/global_objects/symbol/@@toprimitive/index.md b/files/ko/web/javascript/reference/global_objects/symbol/symbol.toprimitive/index.md
similarity index 88%
rename from files/ko/web/javascript/reference/global_objects/symbol/@@toprimitive/index.md
rename to files/ko/web/javascript/reference/global_objects/symbol/symbol.toprimitive/index.md
index 816e90bcfc832a..67ccfe7aaff2e1 100644
--- a/files/ko/web/javascript/reference/global_objects/symbol/@@toprimitive/index.md
+++ b/files/ko/web/javascript/reference/global_objects/symbol/symbol.toprimitive/index.md
@@ -1,6 +1,7 @@
---
title: Symbol.prototype[@@toPrimitive]
-slug: Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/Symbol.toPrimitive
+original_slug: Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive
l10n:
sourceCommit: f3df52530f974e26dd3b14f9e8d42061826dea20
---
diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/copywithin/index.md b/files/ko/web/javascript/reference/global_objects/typedarray/copywithin/index.md
new file mode 100644
index 00000000000000..49b744a76ec144
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/typedarray/copywithin/index.md
@@ -0,0 +1,64 @@
+---
+title: TypedArray.prototype.copyWithin()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/copyWithin
+l10n:
+ sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f
+---
+
+{{JSRef}}
+
+{{jsxref("TypedArray")}} 인스턴스의 **`copyWithin()`** 메서드는 이 형식화 배열의 일부를 같은 형식화 배열의 다른 장소에 얕은 복사를 수행하며 배열의 길이를 수정하지 않고 해당 배열을 반환합니다. 이 메서드는 {{jsxref("Array.prototype.copyWithin()")}}와 같은 알고리즘을 가집니다.
+
+{{EmbedInteractiveExample("pages/js/typedarray-copywithin.html")}}
+
+## 구문
+
+```js-nolint
+copyWithin(target, start)
+copyWithin(target, start, end)
+```
+
+### 매개변수
+
+- `target`
+ - : 시퀀스를 복사할 0 기반 인덱스로, [정수로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#정수_변환). 이는 `start`에 있는 요소가 복사될 위치에 해당하며, `start`과 `end` 사이의 모든 요소는 후속 인덱스에 복사됩니다.
+- `start`
+ - : 요소 복사를 시작할 0 기반 인덱스로, [정수로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#정수_변환)됩니다.
+- `end` {{optional_inline}}
+ - : 요소 복사를 끝낼 0 기반 인덱스로, [정수로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#정수_변환)됩니다. `copyWithin()`은 `end`를 포함하지 않고 `end`전 까지 복사합니다. `copyWithin()`는 여기까지 복사하지만 `end`를 포함하지는 않습니다.
+
+### 반환 값
+
+수정된 형식화 배열
+
+## 설명
+
+보다 자세한 설명은 {{jsxref("Array.prototype.copyWithin()")}}을 참고하시기 바랍니다. 이 메서드는 범용 메서드가 아니며 오직 형식화 배열 인스턴스에서만 호출할 수 있습니다.
+
+## 예제
+
+### copyWithin() 사용하기
+
+```js
+const buffer = new ArrayBuffer(8);
+const uint8 = new Uint8Array(buffer);
+uint8.set([1, 2, 3]);
+console.log(uint8); // Uint8Array [ 1, 2, 3, 0, 0, 0, 0, 0 ]
+uint8.copyWithin(3, 0, 3);
+console.log(uint8); // Uint8Array [ 1, 2, 3, 1, 2, 3, 0, 0 ]
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [`core-js`에서의 `TypedArray.prototype.copyWithin` 폴리필](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
+- [JavaScript 형식화 배열](/ko/docs/Web/JavaScript/Guide/Typed_arrays) 안내서
+- {{jsxref("TypedArray")}}
+- {{jsxref("Array.prototype.copyWithin()")}}
diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/findlastindex/index.md b/files/ko/web/javascript/reference/global_objects/typedarray/findlastindex/index.md
new file mode 100644
index 00000000000000..48919f75a5d03e
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/typedarray/findlastindex/index.md
@@ -0,0 +1,87 @@
+---
+title: TypedArray.prototype.findLastIndex()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/findLastIndex
+l10n:
+ sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f
+---
+
+{{JSRef}}
+
+{{jsxref("TypedArray")}} 인스턴스의 **`findLastIndex()`** 메서드는 배열을 역순으로 순회하며 주어진 판별 함수를 만족하는 배열의 첫번째 요소의 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다. 이 메서드는 {{jsxref("Array.prototype.findLastIndex()")}}와 알고리즘이 같습니다.
+
+{{EmbedInteractiveExample("pages/js/typedarray-findlastindex.html")}}
+
+## 구문
+
+```js-nolint
+findLastIndex(callbackFn)
+findLastIndex(callbackFn, thisArg)
+```
+
+### 매개변수
+
+- `callbackFn`
+ - : 형식화 배열의 각 요소에 대해 실행할 함수입니다. 일치하는 요소를 찾았으면 [참 같은](/ko/docs/Glossary/Truthy) 값을 반환하고, 그렇지 않으면 [거짓 같은](/ko/docs/Glossary/Falsy) 값을 반환해야 합니다. 함수는 다음 인수를 사용하여 호출됩니다.
+ - `element`
+ - : 형식화 배열에서 현재 처리되고 있는 요소.
+ - `index`
+ - : 형식화 배열에서 현재 처리되고 있는 요소의 인덱스.
+ - `array`
+ - : `findLastIndex()`가 호출된 형식화 배열.
+- `thisArg` {{optional_inline}}
+ - : `callbackFn`을 실행할 때 `this`로 사용할 값입니다. [순회 메서드](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#순회_메서드)를 참고하세요.
+
+### 반환 값
+
+제공된 테스트 함수를 만족하는 형식화 배열의 마지막(가장 높은 인덱스) 요소의 인덱스. 일치하는 요소를 찾을 수 없으면 `-1`을 반환합니다.
+
+## 설명
+
+보다 자세한 설명은 {{jsxref("Array.prototype.findLastIndex()")}}을 참고하시기 바랍니다. 이 메서드는 범용 메서드가 아니며 오직 형식화 배열 인스턴스에서만 호출할 수 있습니다.
+
+## 예제
+
+### 형식화 배열에서 마지막 소수 찾기
+
+다음 예제는 형식화 배열의 마지막 요소 중 소수인 요소를 반환하거나, 소수가 없는 경우 `-1`을 반환합니다.
+
+```js
+function isPrime(element) {
+ if (element % 2 === 0 || element < 2) {
+ return false;
+ }
+ for (let factor = 3; factor <= Math.sqrt(element); factor += 2) {
+ if (element % factor === 0) {
+ return false;
+ }
+ }
+ return true;
+}
+
+let uint8 = new Uint8Array([4, 6, 8, 12]);
+console.log(uint8.findLastIndex(isPrime));
+// -1 (배열에 소수 없음)
+uint8 = new Uint8Array([4, 5, 7, 8, 9, 11, 12]);
+console.log(uint8.findLastIndex(isPrime));
+// 5
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [`core-js`에서의 `TypedArray.prototype.findLastIndex` 폴리필](https://github.com/zloirock/core-js#array-find-from-last)
+- [JavaScript 형식화 배열](/ko/docs/Web/JavaScript/Guide/Typed_arrays) 안내서
+- {{jsxref("TypedArray")}}
+- {{jsxref("TypedArray.prototype.find()")}}
+- {{jsxref("TypedArray.prototype.findIndex()")}}
+- {{jsxref("TypedArray.prototype.findLast()")}}
+- {{jsxref("TypedArray.prototype.indexOf()")}}
+- {{jsxref("TypedArray.prototype.lastIndexOf()")}}
+- {{jsxref("Array.prototype.findLastIndex()")}}
diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/index.md b/files/ko/web/javascript/reference/global_objects/typedarray/index.md
index a5ae134672f1b4..21c6f64ab21ce2 100644
--- a/files/ko/web/javascript/reference/global_objects/typedarray/index.md
+++ b/files/ko/web/javascript/reference/global_objects/typedarray/index.md
@@ -48,7 +48,7 @@ new TypedArray(buffer, byteOffset);
new TypedArray(buffer, byteOffset, length);
```
-여기서 _TypedArray_ 는 구체적인 유형 중 하나의 생성자입니다.
+여기서 TypedArray 는 구체적인 유형 중 하나의 생성자입니다.
> **참고:** 모든 `TypedArray` 생성자는 [`new`](/ko/docs/Web/JavaScript/Reference/Operators/new)로만 생성할 수 있습니다. `new` 없이 호출하려고 하면 {{jsxref("TypeError")}}가 발생합니다.
@@ -64,6 +64,21 @@ new TypedArray(buffer, byteOffset, length);
`length`
- : `buffer`와 선택적으로 전달할 수 있는 `byteOffset` 및 `length` 인수가 함께 호출되면, 지정된 {{jsxref("ArrayBuffer")}}를 보는 새로운 형식화 배열 뷰가 생성됩니다. `byteOffset` 및 `length` 매개변수는 형식화 배열 보기에 의해 노출될 메모리 범위를 지정합니다. 둘 다 생략하면 모든 버퍼가 표시되고, `length`만 생략하면 `buffer`의 나머지 부분이 표시됩니다.
+### 예외
+
+모든 `TypeArray` 하위 클래스 생성자는 같은 방식으로 동작합니다. 생성자는 모두 아래와 같은 예외를 발생시킵니다.
+
+- {{jsxref("TypeError")}}
+ - : 다음 상황 중 하나일 경우 발생합니다.
+ - `typedArray`가 전달되었으나, [bigint](/ko/docs/Web/JavaScript/Reference/Global_Objects/BigInt) 유형이지만 현 생성자가 그렇지 않을 경우 혹은 그 반대의 경우입니다.
+ - `typeArray`가 전달되었으나, 바라보는 버퍼가 분리되었거나 혹은 분리된 `buffer`가 바로 전달될 경우입니다.
+- {{jsxref("RangeError")}}
+ - : 다음 상황 중 하나일 경우 발생합니다.
+ - 새로운 형식화 배열의 길이가 너무 클 경우입니다.
+ - `buffer`의 길이(`length` 매개변수가 명시되지 않을 경우) 혹은 `byteOffset`이 새로운 형식화 배열의 요소 크기의 정수 배수가 아닐 경우입니다.
+ - `byteOffset`이 유효한 배열 인덱스(0부터 253 - 1 사이의 정수)가 아닐 경우입니다.
+ - 버퍼에서 뷰를 만들 때 뷰가 버퍼를 벗어날 경우입니다. 즉, `byteOffset + length * TypedArray.BYTES_PER_ELEMENT > buffer.byteLength`입니다.
+
## 정적 속성
- {{jsxref("TypedArray.BYTES_PER_ELEMENT")}}
@@ -231,8 +246,8 @@ const i32 = new Int32Array(new ArrayBuffer(4));
## 같이 보기
-- [Polyfill of typed arrays in `core-js`](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
-- [JavaScript 형식화 배열](/ko/docs/Web/JavaScript/Typed_arrays)
+- [`core-js`에서의 형식화 배열 폴리필](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
+- [JavaScript 형식화 배열](/ko/docs/Web/JavaScript/Typed_arrays) 안내서
- {{jsxref("ArrayBuffer")}}
- {{jsxref("DataView")}}
-- [TextDecoder](/ko/docs/Web/API/TextDecoder) — 숫자 데이터에서 문자열을 디코딩하는 헬퍼
+- {{domxref("TextDecoder")}}
diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/of/index.md b/files/ko/web/javascript/reference/global_objects/typedarray/of/index.md
index f36bad8e73b5fa..ce30c41a7f991d 100644
--- a/files/ko/web/javascript/reference/global_objects/typedarray/of/index.md
+++ b/files/ko/web/javascript/reference/global_objects/typedarray/of/index.md
@@ -1,58 +1,68 @@
---
title: TypedArray.of()
slug: Web/JavaScript/Reference/Global_Objects/TypedArray/of
+l10n:
+ sourceCommit: fb442649a7e91a177a582a3e9c6e1a95a9e8dda5
---
{{JSRef}}
-TypedArray .of()`):
+Как упоминалось ранее, почти любой контент может быть ссылкой, даже {{Glossary("Block/CSS", "блочный элемент")}}. Если вы хотите превратить заголовок в ссылку, то оберните его в элемент (` `):
```html
@@ -60,30 +60,26 @@ slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
```
-This turns the heading into a link:
+Это превратит заголовок в ссылку:
{{EmbedLiveSample('Блочные ссылки', '100%', 150)}}
### Добавляем информацию с помощью атрибута title
-Другим атрибутом, который вы можете добавить к своим ссылкам, является — `title`. Он предназначен для хранения полезной информации о ссылке. Например, какую информацию содержит страница или другие вещи, о которых вам нужно знать. Например:
+Другим атрибутом ссылок является `title`. Он может содержать дополнительную информацию о ссылке, например, описание страницы или другие вещи, о которых следует знать пользователю.
```html-nolint
Я создал ссылку на
- домашнюю страницу Mozilla .
+ домашнюю страницу Mozilla .
```
-Вот что получилось (описание появится, если навести курсор на ссылку):
+Результат описанного выше примера будет таким (описание появится, если навести курсор на ссылку):
{{EmbedLiveSample('Добавляем информацию с помощью атрибута title', '100%', 150)}}
-> **Примечание:** Описание из атрибута title отображается только при наведении курсора, значит люди, полагающиеся на клавиатурные элементы управления для навигации по веб-страницам, будут испытывать трудности с доступом к информации, которую содержит title. Если информация заголовка действительно важна для удобства использования страницы, то вы должны представить её таким образом, который будет доступен для всех пользователей, например, поместив её в обычный текст.
+> **Примечание:** Описание из атрибута `title` отображается только при наведении курсора, значит люди, полагающиеся на клавиатурные элементы управления для навигации по веб-страницам, будут испытывать трудности с доступом к информации, которую содержит title. Если информация заголовка действительно важна для удобства использования страницы, то вы должны представить её таким образом, который будет доступен для всех пользователей, например, поместив её в обычный текст.
### Активное изучение: создаём собственную ссылку
@@ -195,13 +191,13 @@ _Относительный URL_ будет указывать на различ
_**Хороший** текст ссылки:_ [Скачать Firefox](https://firefox.com)
```html
- Скачать Firefox
+Скачать Firefox
```
_**Плохой** текст ссылки:_ [Нажми сюда](https://firefox.com/), чтобы скачать Firefox
```html
- Нажми сюда чтобы скачать Firefox
+Нажми сюда чтобы скачать Firefox
```
Советы:
@@ -301,12 +297,12 @@ _**Плохой** текст ссылки:_ [Нажми сюда](https://firefo
Помимо адреса электронной почты, вы можете предоставить другую информацию. Фактически, любые стандартные поля для отправки почты могут быть добавлены к указанному вами адресу `mailto`. Часто используемыми из них являются «subject», «cc» и «body» (которые не являются истинным полем заголовка, но позволяют указать дополнительную информацию для нового сообщения электронной почты). Каждое поле и его значение задаются в качестве условия запроса.
-Вот пример который включает cc(кому отправить копию сообщения, все получатели письма видят список тех кто это письмо получит), bcc(скрытый адрес получателя, никто из получателей не будет видеть полный список получателей письма), subject(тема письма) и body(текст сообщения):
+Вот пример, который содержит поля cc (кому отправить копию сообщения, все получатели письма видят список тех кто это письмо получит), bcc (скрытый адрес получателя, никто из получателей не будет видеть полный список получателей письма), subject (тема письма) и body (текст сообщения):
```html
- Send mail with cc, bcc, subject and body
+ Отправить письмо с полями cc, bcc, subject и body
```
diff --git a/files/ru/learn/javascript/building_blocks/event_bubbling/index.md b/files/ru/learn/javascript/building_blocks/event_bubbling/index.md
index 9c386ffe105db3..b27076fe163340 100644
--- a/files/ru/learn/javascript/building_blocks/event_bubbling/index.md
+++ b/files/ru/learn/javascript/building_blocks/event_bubbling/index.md
@@ -84,7 +84,7 @@ original_slug: Web/API/Event/Comparison_of_Event_Targets
>
- Event.webidl
+ Event.webidl
{{ Non-standard_inline() }} Если по какой-либо причине событие
@@ -107,7 +107,7 @@ original_slug: Web/API/Event/Comparison_of_Event_Targets
>
- Event.webidl
+ Event.webidl
{{ Non-standard_inline() }} Первоначальная цель события перед
diff --git a/files/ru/learn/javascript/first_steps/what_went_wrong/index.md b/files/ru/learn/javascript/first_steps/what_went_wrong/index.md
index 8a0321b488934c..367e25e6f0528d 100644
--- a/files/ru/learn/javascript/first_steps/what_went_wrong/index.md
+++ b/files/ru/learn/javascript/first_steps/what_went_wrong/index.md
@@ -161,24 +161,6 @@ Math.floor(Math.random() * 100) + 1;
Существуют и другие распространённые ошибки, которые вы обнаружите в своём коде. В этом разделе показано большинство из них.
-### SyntaxError: отсутствует ; перед постановкой
-
-Эта ошибка обычно означает что вы упустили точку с запятой в конце одной из ваших строк кода, но иногда ошибка может быть более загадочной. Например, если мы изменим эту строку внутри функции `checkGuess()` :
-
-```js
-var userGuess = Number(guessField.value);
-```
-
-на эту
-
-```js
-var userGuess === Number(guessField.value);
-```
-
-Это вызовет данную ошибку, потому что браузер подумает, что вы пытались сделать что-то другое. Вы должны быть уверены, что вы не перепутали оператор присваивания (`=`), который присваивает значение переменной — с оператором сравнения (`===`), который строго сравнивает операнды, и возвращает `true`/`false` .
-
-> **Примечание:** Загляните на справочную страницу [Синтаксическая ошибка: пропущен символ ; до объявления инструкции](/ru/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement) для получения дополнительной информации об этой ошибке.
-
### В программе всегда говорится, что вы выиграли, независимо от того, что вы ввели
Причиной этому является все то же перепутывание оператора присваивания (`=`) со строгим сравнением (`===`). Например, если мы изменим внутри `checkGuess()` эту строку кода:
@@ -221,13 +203,13 @@ function checkGuess( {
Это легко — обычно это означает, что вы пропустили одну из ваших фигурных скобок из функции или условной структуры. Мы получили эту ошибку, удалив одну из закрывающих фигурных скобок возле нижней части функции `checkGuess()`.
-### SyntaxError: expected expression, got '_string_' or SyntaxError: unterminated string literal
+### SyntaxError: expected expression, got '_string_' or SyntaxError: string literal contains an unescaped line break
Эти ошибки обычно означает, что вы пропустили открывающую или закрывающую кавычку для строковых значений. В первой ошибки выше, _строка_ будет заменена на неожиданный персонаж (ей) , что браузер нашёл вместо кавычек в начале строки. Вторая ошибка означает , что строка не закончилась кавычки.
При всех этих ошибках действуйте так, как в наших примерах, которые мы рассмотрели в пошаговом руководстве. Когда возникает ошибка, посмотрите полученный номер строки, перейдите к этой строке и посмотрите, можете ли вы определить, что случилось. Имейте в виду, что ошибка не обязательно будет на этой строке, а также, что ошибка может быть вызвана не такой же проблемой, которую мы привели выше!
-> **Примечание:** : Смотрите наш [SyntaxError: Неожиданный токен](/ru/docs/Web/JavaScript/Reference/Errors/Unexpected_token) и [SyntaxError: незавершённая строка](/ru/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal) эталонных страниц для получения более подробной информации об этих ошибках.
+> **Примечание:** : Смотрите [SyntaxError: Unexpected token](/ru/docs/Web/JavaScript/Reference/Errors/Unexpected_token) и [SyntaxError: string literal contains an unescaped line break](/ru/docs/Web/JavaScript/Reference/Errors/String_literal_EOL) для получения более подробной информации об этих ошибках.
## Резюме
diff --git a/files/ru/orphaned/web/javascript/reference/errors/equal_as_assign/index.md b/files/ru/orphaned/web/javascript/reference/errors/equal_as_assign/index.md
deleted file mode 100644
index af44799a3859d3..00000000000000
--- a/files/ru/orphaned/web/javascript/reference/errors/equal_as_assign/index.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: "SyntaxError: test for equality (==) mistyped as assignment (=)?(тест на равенство (==) опечатка как присваивание (=)?)"
-slug: orphaned/Web/JavaScript/Reference/Errors/Equal_as_assign
-original_slug: Web/JavaScript/Reference/Errors/Equal_as_assign
----
-
-{{jsSidebar("Errors")}}
-
-## Сообщения
-
-```
-Warning: SyntaxError: тест на равенство (==) опечатка как присваивание (=)?
-```
-
-## Тип ошибки
-
-(Только в Firefox) {{jsxref("SyntaxError")}} предупреждение, в котором сообщается, только если `javascript.options.strict` предпочтение установлено в `true`.
-
-## Что пошло не так?
-
-Было присвоение ( = ), когда вы обычно ожидали тест на присвоение (==). Чтобы помочь отладке, JavaScript (с включёнными строгими предупреждениями) предупреждает об этом шаблоне.
-
-## Примеры
-
-### Задание в условных выражениях
-
-Рекомендуется не использовать простые назначения в условном выражении (например, if...else), поскольку при просмотре кода назначение можно спутать с равенством. Например, не используйте следующий код:
-
-```js-nolint example-bad
-if (x = y) {
- // делать правильные вещи
-}
-```
-
-Если необходимо использовать присваивание в условном выражении, то обычно вокруг него ставят дополнительные скобки. Например:
-
-```js
-if ((x = y)) {
- // делать правильные вещи
-}
-```
-
-В противном случае вы, вероятно, хотели использовать оператор сравнения (например, = = или ===):
-
-```js
-if (x == y) {
- // делать правильные вещи
-}
-```
-
-## Смотрите также
-
-- [`if...else`](/ru/docs/Web/JavaScript/Reference/Statements/if...else)
-- [Comparison operators](/ru/docs/Web/JavaScript/Reference/Operators/Comparison_Operators)
diff --git a/files/ru/orphaned/web/javascript/reference/errors/undefined_prop/index.md b/files/ru/orphaned/web/javascript/reference/errors/undefined_prop/index.md
deleted file mode 100644
index 1caf390ca8157d..00000000000000
--- a/files/ru/orphaned/web/javascript/reference/errors/undefined_prop/index.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: 'ReferenceError: reference to undefined property "x"'
-slug: orphaned/Web/JavaScript/Reference/Errors/Undefined_prop
-original_slug: Web/JavaScript/Reference/Errors/Undefined_prop
----
-
-{{jsSidebar("Errors")}}
-
-## Сообщение
-
-```
-ReferenceError: reference to undefined property "x" (Firefox)
-```
-
-## Тип ошибки
-
-(только в Firefox) Предупреждение {{jsxref("ReferenceError")}}, возникает, только если значение настройки `javascript.options.strict` равно `true`.
-
-## Что пошло не так?
-
-Совершена попытка обращения к свойству объекта, которое не определено. Существует два способа обращения к свойствам: обратитесь к странице справочника {{jsxref("Operators/Property_Accessors", "property accessors", 0, 1)}} для более подробной информации.
-
-## Примеры
-
-### Случаи возникновения ошибки
-
-В данном примере свойство `bar` не определено, поэтому возникнет ошибка `ReferenceError`.
-
-```js example-bad
-var foo = {};
-foo.bar; // ReferenceError: reference to undefined property "bar"
-```
-
-### Правильный код
-
-Чтобы избежать ошибки, потребуется либо задать для объекта свойство `bar`, либо проверить существование данного свойства, прежде чем обращаться к нему. Одним из способов это сделать является использование метода {{jsxref("Object.prototype.hasOwnProperty()")}}:
-
-```js example-good
-var foo = {};
-
-// Задать свойство bar
-
-foo.bar = "moon";
-console.log(foo.bar); // "moon"
-
-// Убедиться, что свойство bar существует, прежде чем обращаться к нему
-
-if (foo.hasOwnProperty("bar")) {
- console.log(foo.bar);
-}
-```
-
-## Смотрите также
-
-- {{jsxref("Operators/Property_Accessors", "property accessors", 0, 1)}}
diff --git a/files/ru/web/api/htmlanchorelement/hash/index.md b/files/ru/web/api/htmlanchorelement/hash/index.md
index aef8ae568db833..b0eafc852ba9cb 100644
--- a/files/ru/web/api/htmlanchorelement/hash/index.md
+++ b/files/ru/web/api/htmlanchorelement/hash/index.md
@@ -1,25 +1,37 @@
---
-title: HTMLHyperlinkElementUtils.hash
+title: "HTMLAnchorElement: свойство hash"
slug: Web/API/HTMLAnchorElement/hash
+l10n:
+ sourceCommit: 3e301467a02808e9fc488d7012f1f49eb66a5980
---
-{{ APIRef("URLUtils") }}
+{{ APIRef("HTML DOM") }}
-Свойство **`HTMLHyperlinkElementUtils.hash`** – это {{domxref("USVString")}}, содержащий `'#'` с последующим идентификатором. Идентификатор не декодирован.
+Свойство **`HTMLHyperlinkElementUtils.hash`** возвращает строку, содержащую `'#'` с последующим якорем URL.
-## Синтаксис
+Якорь URL [закодирован](https://en.wikipedia.org/wiki/Percent-encoding). Если в URL нет якоря, это свойство содержит пустую строку (`""`).
-```
-string = object.hash;
-object.hash = string;
-```
+## Значение
+
+Строка.
## Примеры
+### Получение якоря из ссылки
+
+При наличии такой ссылки
+
+```html
+
+ Примеры
+
+```
+
+можно получить из неё якорь таким образом:
+
```js
-// Допустим, что документ содержит элемент
-var anchor = document.getElementByID("myAnchor");
-var result = anchor.hash; // Вернёт: '#youhou'
+const anchor = document.getElementById("myAnchor");
+anchor.hash; // '#примеры'
```
## Спецификации
@@ -32,4 +44,4 @@ var result = anchor.hash; // Вернёт: '#youhou'
## Смотрите также
-- Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит это свойство.
+- Интерфейс {{domxref("HTMLAnchorElement")}}.
diff --git a/files/ru/web/html/element/script/index.md b/files/ru/web/html/element/script/index.md
index 45da12982e09b9..9d96c7485c7884 100644
--- a/files/ru/web/html/element/script/index.md
+++ b/files/ru/web/html/element/script/index.md
@@ -49,7 +49,7 @@ HTML-элемент **`` 一行里， `defer` 属性指明在页面加载完成之前，{{htmlelement("script")}}元素的内容不会执行。
+> [!NOTE]
+> 在完成版本的源代码中， `` 一行里， `defer` 属性指明在页面加载完成之前，{{htmlelement("script")}}元素的内容不会执行。
## 存储复杂数据 — IndexedDB
@@ -298,7 +302,8 @@ web storage 的一个关键特性是，数据在不同页面加载时都存在
要在 IndexedDB 中处理此问题，你需要创建一个请求对象（可以随意命名 - 命名为`request`，可以表明它的用途）。然后，在请求完成或者失败时，使用事件处理程序来运行代码，你将在下面看到这些代码。
- > **备注：** 版本号很重要。如果要升级数据库（例如：更改表结构），则必须使用增加的版本号或者`onupgradeneeded`处理程序内指定的不同模式（请参阅下文）等再次运行代码。在这个简单教程中，我们不讨论数据库升级。
+ > [!NOTE]
+ > 版本号很重要。如果要升级数据库（例如：更改表结构），则必须使用增加的版本号或者`onupgradeneeded`处理程序内指定的不同模式（请参阅下文）等再次运行代码。在这个简单教程中，我们不讨论数据库升级。
1. 在之前添加的事件处理程序下方添加以下代码 - 在`window.onload`处理程序内：
@@ -671,7 +676,8 @@ function deleteItem(e) {
Cache API 是另一种客户端存储机制，略有不同 - 它旨在保存 HTTP 响应，因此与服务工作者一起工作得非常好。
-> **备注：** 现在大多数现代浏览器都支持服务工作者和缓存。在撰写本文时，Safari 仍在忙着实施它，但它应该很快就会存在。
+> [!NOTE]
+> 现在大多数现代浏览器都支持服务工作者和缓存。在撰写本文时，Safari 仍在忙着实施它，但它应该很快就会存在。
### 一个 service worker 例子
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/drawing_graphics/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/drawing_graphics/index.md
index 78c29ed629528e..0ad9d8cdf4a4c5 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/drawing_graphics/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/drawing_graphics/index.md
@@ -50,7 +50,8 @@ slug: Learn/JavaScript/Client-side_web_APIs/Drawing_graphics
由于原生的 WebGL 代码非常复杂，本文主要针对 2D 画布。然而，你也可以通过 [WebGL 介绍页面](/zh-CN/docs/Web/API/WebGL_API) 找到 WebGL 原生代码的教程，来学习如何更容易地使用 WebGL 库来创建一个 3D 场景。
-> **备注：** 画布的基本功能有良好的跨浏览器支持。但存在例外：IE 8 及以下不支持 2D 画布，IE 11 及以下不支持 WebGL。
+> [!NOTE]
+> 画布的基本功能有良好的跨浏览器支持。但存在例外：IE 8 及以下不支持 2D 画布，IE 11 及以下不支持 WebGL。
## 主动学习：开始使用 \
@@ -112,7 +113,8 @@ slug: Learn/JavaScript/Client-side_web_APIs/Drawing_graphics
此时滚动条就消失了。
-> **备注：** 如上文所讲，一般情况下图片的尺寸可以通过 HTML 属性或 DOM 属性来设定。你也可以使用 CSS，但问题是画布在渲染完毕后其尺寸就是固定的了，如果试图调整，就会与其他图象一样（其实渲染好的画布就是一副图片），所显示的内容将变得像素化或扭曲变形。
+> [!NOTE]
+> 如上文所讲，一般情况下图片的尺寸可以通过 HTML 属性或 DOM 属性来设定。你也可以使用 CSS，但问题是画布在渲染完毕后其尺寸就是固定的了，如果试图调整，就会与其他图象一样（其实渲染好的画布就是一副图片），所显示的内容将变得像素化或扭曲变形。
### 获取画布上下文（canvas context）并完成设置
@@ -124,7 +126,8 @@ slug: Learn/JavaScript/Client-side_web_APIs/Drawing_graphics
var ctx = canvas.getContext("2d");
```
-> **备注：** 可选上下文还包括 WebGL（`webgl`）、WebGL 2（`webgl2`）等等，但本文暂不涉及。
+> [!NOTE]
+> 可选上下文还包括 WebGL（`webgl`）、WebGL 2（`webgl2`）等等，但本文暂不涉及。
好啦，现已万事具备！`ctx` 变量包含一个 {{domxref("CanvasRenderingContext2D")}} 对象，画布上所有绘画操作都会涉及到这个对象。
@@ -200,7 +203,8 @@ ctx.fillRect(0, 0, width, height);
{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html", '100%', 250)}}
-> **备注：** 完整代码请访问 GitHub： [2_canvas_rectangles.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html)。
+> [!NOTE]
+> 完整代码请访问 GitHub： [2_canvas_rectangles.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html)。
### 绘制路径
@@ -289,7 +293,8 @@ ctx.fill();
`arc()` 函数有六个参数。前两个指定圆心的位置坐标，第三个是圆的半径，第四、五个是绘制弧的起、止角度（给定 0° 和 360° 便能绘制一个完整的圆），第六个是绘制方向（`false` 是顺时针，`true` 是逆时针）。
- > **备注：** 0° 设定为水平向右。
+ > [!NOTE]
+ > 0° 设定为水平向右。
2. 我们再来画一条弧：
@@ -310,9 +315,11 @@ ctx.fill();
{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html", '100%', 200)}}
-> **备注：** 完整代码可到 GitHub 下载：[3_canvas_paths.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html)。
+> [!NOTE]
+> 完整代码可到 GitHub 下载：[3_canvas_paths.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html)。
-> **备注：** 请访问我们的 [用画布绘图](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) 入门课程来学习更多高级的路径绘制功能，比如贝叶斯曲线。
+> [!NOTE]
+> 请访问我们的 [用画布绘图](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) 入门课程来学习更多高级的路径绘制功能，比如贝叶斯曲线。
### 文本
@@ -344,7 +351,8 @@ ctx.fillText("Canvas text", 50, 150);
{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html", '100%', 180)}}
-> **备注：** 完整代码可到 GitHub 下载：[4_canvas_text.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html).
+> [!NOTE]
+> 完整代码可到 GitHub 下载：[4_canvas_text.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html).
可以自己尝试一下。访问 [绘制文本](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_text) 获得关于画布文本选项的更多信息。
@@ -391,7 +399,8 @@ ctx.fillText("Canvas text", 50, 150);
{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html", '100%', 260)}}
-> **备注：** 完整代码可到 GitHub 下载：[5_canvas_images.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html).
+> [!NOTE]
+> 完整代码可到 GitHub 下载：[5_canvas_images.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html).
## 循环和动画
@@ -470,7 +479,8 @@ ctx.fillText("Canvas text", 50, 150);
- 修改 `length` 和 `moveOffset` 的值。
- 我们引入了 `rand()` 函数但是没有使用，你可以试着用它引入一些随机数。
-> **备注：** 完整代码可到 GitHub 下载：[6_canvas_for_loop.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop.html).
+> [!NOTE]
+> 完整代码可到 GitHub 下载：[6_canvas_for_loop.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop.html).
### 动画
@@ -622,7 +632,8 @@ loop();
{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}
-> **备注：** 完整代码可到 GitHub 下载：[7_canvas_walking_animation.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html).
+> [!NOTE]
+> 完整代码可到 GitHub 下载：[7_canvas_walking_animation.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html).
### 简单的绘图应用
@@ -821,7 +832,8 @@ WebGL 基于 [OpenGL](/zh-CN/docs/Glossary/OpenGL) 图形编程语言实现，
你可以 [到 Github 下载最终代码](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/threejs-cube)。
-> **备注：** 在我们的 GitHub repo 还有另一个趣味 3D 魔方示例——[Three.js Video Cube](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/threejs-video-cube)（在线查看）。其中通过 {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} 来从电脑摄像头获取一段视频，将其投影到魔方上作为纹理。
+> [!NOTE]
+> 在我们的 GitHub repo 还有另一个趣味 3D 魔方示例——[Three.js Video Cube](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/threejs-video-cube)（在线查看）。其中通过 {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} 来从电脑摄像头获取一段视频，将其投影到魔方上作为纹理。
## 小结
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/fetching_data/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/fetching_data/index.md
index b74390951896f1..cd4e01e36709c1 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/fetching_data/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/fetching_data/index.md
@@ -55,7 +55,8 @@ l10n:
- 页面更新更加迅速，你不必等待页面刷新，这意味这网站的体验更加流畅、响应更加迅速。
- 每次更新时下载的数据更少，这意味着浪费的带宽更少。这在使用宽带连接的台式机上可能不是什么问题，但在移动设备或没有高速互联网连接的国家/地区则是一个主要问题。
-> **备注：** 在早期，这种通用技术被称为[异步](/zh-CN/docs/Glossary/Asynchronous)的 JavaScript 与 XML（[Ajax](/zh-CN/docs/Glossary/AJAX)）。但现在通常不是这种情况，相反你更有可能请求 JSON，不过由于结果依然相同，我们通常依旧使用术语“Ajax”来描述该技术。
+> [!NOTE]
+> 在早期，这种通用技术被称为[异步](/zh-CN/docs/Glossary/Asynchronous)的 JavaScript 与 XML（[Ajax](/zh-CN/docs/Glossary/AJAX)）。但现在通常不是这种情况，相反你更有可能请求 JSON，不过由于结果依然相同，我们通常依旧使用术语“Ajax”来描述该技术。
为了进一步加快速度，某些网站还会在首次请求时将资源和数据存储在用户的计算机上，这意味这在后续的访问中，会使用这些内容的本地版本，而不是在每次重新加载页面时都下载新的副本。内容仅在更新后才会从服务器重新加载。
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/index.md
index 6e2e830ceb5068..4803930b6d6cee 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/index.md
@@ -15,7 +15,8 @@ l10n:
了解 [HTML](/zh-CN/docs/Learn/HTML) 和 [CSS](/zh-CN/docs/Learn/CSS) 的基本知识，也会对理解这个单元的内容大有裨益。
-> **备注：** 如果你正在使用一台无法创建你自己的文件的电脑、平板或其他设备，你可以尝试使用一些在线网页编辑器如 [JSBin](https://jsbin.com/) 或者 [Glitch](https://glitch.com/) 来尝试编辑一些代码示例。
+> [!NOTE]
+> 如果你正在使用一台无法创建你自己的文件的电脑、平板或其他设备，你可以尝试使用一些在线网页编辑器如 [JSBin](https://jsbin.com/) 或者 [Glitch](https://glitch.com/) 来尝试编辑一些代码示例。
## 指南
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.md
index 6d4036e3959adb..5fc0208b133f48 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.md
@@ -42,7 +42,8 @@ _图片来自：[过载的插头接口](https://www.flickr.com/photos/easy-pics/
同样，比如说，编程来显示一些 3D 图形，使用以更高级语言编写的 API（例如 JavaScript 或 Python）将会比直接编写直接控制计算机的 GPU 或其他图形功能的低级代码（比如 C 或 C++）来执行操作要容易得多。
-> **备注：** 详细说明请见 [API 术语条目](/zh-CN/docs/Glossary/API)。
+> [!NOTE]
+> 详细说明请见 [API 术语条目](/zh-CN/docs/Glossary/API)。
### 客户端 JavaScript 中的 API
@@ -100,7 +101,8 @@ _图片来自：[过载的插头接口](https://www.flickr.com/photos/easy-pics/
API 使用一个或多个 [JavaScript 对象](/zh-CN/docs/Learn/JavaScript/Objects)在你的代码中进行交互，这些对象用作 API 使用的数据（包含在对象属性中）的容器以及 API 提供的功能（包含在对象方法中）。
-> **备注：** 如果你不熟悉对象如何工作，则应在继续之前学习 [JavaScript 对象](/zh-CN/docs/Learn/JavaScript/Objects)模块。
+> [!NOTE]
+> 如果你不熟悉对象如何工作，则应在继续之前学习 [JavaScript 对象](/zh-CN/docs/Learn/JavaScript/Objects)模块。
让我们回到 Web 音频 API 的例子——这是一个相当复杂的 API，它由多个对象组成。最重要的包括：
@@ -169,7 +171,8 @@ audioElement.addEventListener("ended", () => {
});
```
-> **备注：** 有些人可能会注意到，用于播放和暂停音轨的 `play()` 和 `pause()` 方法并不属于 Web 音频 API；它们属于 {{domxref("HTMLMediaElement")}} API，这是一个不同但紧密相关的 API。
+> [!NOTE]
+> 有些人可能会注意到，用于播放和暂停音轨的 `play()` 和 `pause()` 方法并不属于 Web 音频 API；它们属于 {{domxref("HTMLMediaElement")}} API，这是一个不同但紧密相关的 API。
接下来，我们使用 {{domxref("BaseAudioContext/createGain", "AudioContext.createGain()")}} 方法创建一个 {{domxref("GainNode")}} 对象，可以用于调整通过它的音频的音量，并创建另一个事件处理器，当滑块值改变时改变音频图的增益（音量）值：
@@ -221,7 +224,8 @@ Ball.prototype.draw = function () {
};
```
-> **备注：** 你可以在我们的[弹跳球演示](https://github.com/mdn/learning-area/blob/main/javascript/apis/introduction/bouncing-balls.html)中看到此代码（也可以[在线运行](https://mdn.github.io/learning-area/javascript/apis/introduction/bouncing-balls.html)）。
+> [!NOTE]
+> 你可以在我们的[弹跳球演示](https://github.com/mdn/learning-area/blob/main/javascript/apis/introduction/bouncing-balls.html)中看到此代码（也可以[在线运行](https://mdn.github.io/learning-area/javascript/apis/introduction/bouncing-balls.html)）。
### 它们使用事件来处理状态的变化
@@ -269,7 +273,8 @@ Web API 特性受到与 JavaScript 和其他 Web 技术（例如[同源策略](/
Web 音频和 {{domxref("HTMLMediaElement")}} API 受制于一种名为[自动播放策略](/zh-CN/docs/Web/API/Web_Audio_API/Best_practices#自动播放策略)的安全机制。这基本上意味着你不能在页面加载时自动播放音频：你必须允许用户通过按钮等控件启动音频播放。这样做的原因是，自动播放音频通常非常恼人，我们实在不应该让用户忍受它。
-> **备注：** 根据浏览器的严格程度，这种安全机制甚至可能会阻止示例在本地运行，也就是说，如果你在浏览器中加载本地示例文件，而不是从 Web 服务器上运行它的话。在撰写本文时，我们的 Web 音频 API 示例在 Google Chrome 浏览器上无法本地运行，必须上传到 GitHub 才能运行。
+> [!NOTE]
+> 根据浏览器的严格程度，这种安全机制甚至可能会阻止示例在本地运行，也就是说，如果你在浏览器中加载本地示例文件，而不是从 Web 服务器上运行它的话。在撰写本文时，我们的 Web 音频 API 示例在 Google Chrome 浏览器上无法本地运行，必须上传到 GitHub 才能运行。
## 总结
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/manipulating_documents/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/manipulating_documents/index.md
index 7442ff9acf4b45..ff77d6ca6298c2 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/manipulating_documents/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/manipulating_documents/index.md
@@ -69,7 +69,8 @@ Web 浏览器是非常复杂的软件，有许多活动部件，其中许多部
-> **备注：** 这个 DOM 树状图是用 Ian Hickson 的[在线 DOM 查看器](https://software.hixie.ch/utilities/js/live-dom-viewer/)生成的。
+> [!NOTE]
+> 这个 DOM 树状图是用 Ian Hickson 的[在线 DOM 查看器](https://software.hixie.ch/utilities/js/live-dom-viewer/)生成的。
树上的每个条目都被称为**节点**。你可以在上图中看到，一些节点代表元素（标识为 `HTML`、`HEAD`、`META` 等），另一些代表文本（标识为 `#text`）。还有[其他类型的节点](/zh-CN/docs/Web/API/Node/nodeType)，但这些是你会遇到的主要类型。
@@ -215,7 +216,8 @@ linkPara.parentNode.removeChild(linkPara);
```
-> **备注：** 请注意，CSS 样式的 JavaScript 属性版本是用{{Glossary("camel_case", "小驼峰命名法")}}书写的，而 CSS 版本采用连字符（{{Glossary("kebab_case", "烤串命名法")}}）（例如，`backgroundColor` 对 `background-color`）。确保你不要把这些混为一谈，否则将无法工作。
+> [!NOTE]
+> 请注意，CSS 样式的 JavaScript 属性版本是用{{Glossary("camel_case", "小驼峰命名法")}}书写的，而 CSS 版本采用连字符（{{Glossary("kebab_case", "烤串命名法")}}）（例如，`backgroundColor` 对 `background-color`）。确保你不要把这些混为一谈，否则将无法工作。
还有一种在你的文档上动态操作样式的常见方法，我们现在就来看看。
@@ -248,7 +250,8 @@ linkPara.parentNode.removeChild(linkPara);
在接下来的几节中我们将看看 DOM API 一些更实际的用途。
-> **备注：** 你可以在 GitHub 上找到我们的 [dom-example.html 的完成版](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/dom-example-manipulated.html)演示（[也可以看看它的在线运行版本](https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example-manipulated.html)）。
+> [!NOTE]
+> 你可以在 GitHub 上找到我们的 [dom-example.html 的完成版](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/dom-example-manipulated.html)演示（[也可以看看它的在线运行版本](https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example-manipulated.html)）。
## 动手练习：一个动态的购物单
@@ -276,7 +279,8 @@ linkPara.parentNode.removeChild(linkPara);
10. 为删除按钮绑定事件处理程序。当点击按钮时，删除它所在的整个列表元素（`... `）。
11. 最后，使用 [`focus()`](/zh-CN/docs/Web/API/HTMLElement/focus) 方法聚焦输入框准备输入下一个购物项。
-> **备注：** 如果你卡住了，请查看[完成的购物清单](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/shopping-list-finished.html)（[查看其在线版本](https://mdn.github.io/learning-area/javascript/apis/document-manipulation/shopping-list-finished.html)）。
+> [!NOTE]
+> 如果你卡住了，请查看[完成的购物清单](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/shopping-list-finished.html)（[查看其在线版本](https://mdn.github.io/learning-area/javascript/apis/document-manipulation/shopping-list-finished.html)）。
## 总结
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/third_party_apis/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/third_party_apis/index.md
index 2662e1403b4349..ec7ecdff7c4bf2 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/third_party_apis/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/third_party_apis/index.md
@@ -37,7 +37,8 @@ slug: Learn/JavaScript/Client-side_web_APIs/Third_party_APIs
让我们再来瞧一眼这个地图的例子 (see the [source code on GitHub](https://github.com/mdn/learning-area/blob/main/javascript/apis/introduction/maps-example.html); [see it live also](https://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html)), 从这里可以知道第三方 API 和浏览器 API 的区别是怎么样的。
-> **备注：** 你可能想要一次获得所有的代码示例，在这种情况下，你可以搜索 repo 来获取每个部分中需要的示例文件。
+> [!NOTE]
+> 你可能想要一次获得所有的代码示例，在这种情况下，你可以搜索 repo 来获取每个部分中需要的示例文件。
### 它们植根于第三方服务器
@@ -76,7 +77,8 @@ var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
以上就是用 Google Maps API 建立一个简单地图所需要的所有信息。所有复杂的工作都全由你所连接的第三方服务器处理，包括展示正确地理位置的地图块，等等。
-> **备注：** 一些 api 处理对其功能的访问略有不同，相反，它们要求开发人员向特定的 URL 模式发出 HTTP 请求 (参见从服务器获取数据)，以检索特定的数据。这些被称为 RESTful api，稍后我们将在文章中展示这个示例。
+> [!NOTE]
+> 一些 api 处理对其功能的访问略有不同，相反，它们要求开发人员向特定的 URL 模式发出 HTTP 请求 (参见从服务器获取数据)，以检索特定的数据。这些被称为 RESTful api，稍后我们将在文章中展示这个示例。
### 权限的不同处理方式
@@ -109,7 +111,8 @@ URL 末尾提供的 URL 参数是一个开发人员密钥—应用程序的开
6. 单击创建凭据，然后选择 API 密钥。
7. 复制你的 API 密钥并将示例中的第一个{{htmlelement("script")}}元素中的现有密钥替换为你自己的密钥。（位于`?key=`和属性结束引号标记 (`"`) 之间的位置。)
- > **备注：** 获取 Google 相关 API 密钥可能会有一点困难——Google Cloud Platform API Manager 有许多不同的屏幕，并且工作流程可能因你是否设置账户而变得细微的不同。如果你在执行此步骤时遇到了困难，我们将很乐意为你提供帮助——[联系我们](/zh-CN/docs/Learn#Contact_us)。
+ > [!NOTE]
+ > 获取 Google 相关 API 密钥可能会有一点困难——Google Cloud Platform API Manager 有许多不同的屏幕，并且工作流程可能因你是否设置账户而变得细微的不同。如果你在执行此步骤时遇到了困难，我们将很乐意为你提供帮助——[联系我们](/zh-CN/docs/Learn#Contact_us)。
3. 打开你的 Google Maps 起始文件，找到`INSERT-YOUR-API-KEY-HERE`字符串，然后将其替换为你从 Google Cloud Platform API Manager dashboard 获取的实际 API 密钥。
@@ -148,9 +151,11 @@ URL 末尾提供的 URL 参数是一个开发人员密钥—应用程序的开
这里我们用`iconBase` 加上图标的文件名，从而创建完整 URL 的方式阐明了 icon 属性。现在尝试重新加载你的例子，你会看到你的地图上显示了一个定制的标记！
-> **备注：** 访问 [Customizing a Google Map: Custom Markers](https://developers.google.com/maps/documentation/javascript/custom-markers) 以查看更多信息。
+> [!NOTE]
+> 访问 [Customizing a Google Map: Custom Markers](https://developers.google.com/maps/documentation/javascript/custom-markers) 以查看更多信息。
-> **备注：** 访问 [Map marker or Icon names](https://fusiontables.google.com/DataSource?dsrcid=308519#map:id=3) 以找出还有哪些可以的图标，并查看它们的引用名称是什么。它们的文件名应当是当你点击它们时显示出的图标名，最后带有".png"。
+> [!NOTE]
+> 访问 [Map marker or Icon names](https://fusiontables.google.com/DataSource?dsrcid=308519#map:id=3) 以找出还有哪些可以的图标，并查看它们的引用名称是什么。它们的文件名应当是当你点击它们时显示出的图标名，最后带有".png"。
### 单击标记时显示弹出窗口
@@ -287,9 +292,11 @@ https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=4f3c267e125943d
&begin_date=20170301&end_date=20170312
```
-> **备注：** 更多 URL 参数的说明参考 [NYTimes developer docs](https://developer.nytimes.com/).
+> [!NOTE]
+> 更多 URL 参数的说明参考 [NYTimes developer docs](https://developer.nytimes.com/).
-> **备注：** 示例包含了基本的表单数据验证操作 — 表项提交之前必须有内容 (用 `required` 属性实现)，此外，日期字段有确定的 `pattern` 属性，它们的值必须由 8 个数字组成 (`pattern="[0-9]{8}"`)，否则不能提交。更多细节参考 [Form data validation](/zh-CN/docs/Learn/HTML/Forms/Form_validation)
+> [!NOTE]
+> 示例包含了基本的表单数据验证操作 — 表项提交之前必须有内容 (用 `required` 属性实现)，此外，日期字段有确定的 `pattern` 属性，它们的值必须由 8 个数字组成 (`pattern="[0-9]{8}"`)，否则不能提交。更多细节参考 [Form data validation](/zh-CN/docs/Learn/HTML/Forms/Form_validation)
### 从 api 请求数据
@@ -421,7 +428,8 @@ function displayResults(json) {
第二个函数基本上执行相反的操作，不过有个额外的步骤是检测 `pageNumber` 在 -1 之前是否已经是 0 — 如果 fetch 请求的 `page` URL 参数是负数，会导致错误。如果 `pageNumber` 已经是 0，则直接执行 [`return`](/zh-CN/docs/Web/JavaScript/Reference/Statements/return) 退出函数，避免多余的计算。 (如果当前页面已经是首页，就不需要重新加载)。
-> **备注：** 完整代码参考 [finished nytimes API example code on GitHub](https://github.com/mdn/learning-area/blob/main/javascript/apis/third-party-apis/nytimes/index.html) (实例参考 [see it running live here](https://mdn.github.io/learning-area/javascript/apis/third-party-apis/nytimes/)).
+> [!NOTE]
+> 完整代码参考 [finished nytimes API example code on GitHub](https://github.com/mdn/learning-area/blob/main/javascript/apis/third-party-apis/nytimes/index.html) (实例参考 [see it running live here](https://mdn.github.io/learning-area/javascript/apis/third-party-apis/nytimes/)).
## YouTube 示例
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md
index 414e0aac188f02..5f5285c0c971d2 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md
@@ -1,23 +1,25 @@
---
title: 视频和音频 API
slug: Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs
+l10n:
+ sourceCommit: d6a792e3adce2c8b29a73a3b407e786091363980
---
{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs/Client-side_storage", "Learn/JavaScript/Client-side_web_APIs")}}
-HTML5 提供了用于在文档中嵌入富媒体的元素 — {{htmlelement("video")}}和{{htmlelement("audio")}} — 这些元素通过自带的 API 来控制视频或音频的播放，定位进度等。本文将向你展示如何执行一些常见的任务，如创建自定义播放控件。
+HTML 提供了用于在文档中嵌入富媒体的元素：{{htmlelement("video")}}、{{htmlelement("audio")}}。这些元素通过自带的 API 来控制视频或音频的播放，定位进度等。本文将向你展示如何执行一些常见的任务，如创建自定义播放控件。
-
+
-## HTML5 视频和音频
+## HTML 视频和音频
-{{htmlelement("video")}}和{{htmlelement("audio")}}元素允许我们把视频和音频嵌入到网页当中。就像我们在[音频和视频内容](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)文中展示的一样，一个典型的实现如下所示：
+{{htmlelement("video")}} 和 {{htmlelement("audio")}} 元素允许我们把视频和音频嵌入到网页当中。就像我们在[音频和视频内容](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)文中展示的一样，一个典型的实现如下所示：
```html
- Your browser doesn't support HTML5 video. Here is a
- link to the video instead.
+ 你的浏览器不支持 HTML 视频。下面是一个前往
+ 视频的链接 。
```
@@ -49,17 +51,17 @@ HTML5 提供了用于在文档中嵌入富媒体的元素 — {{htmlelement("vid
{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html", '100%', 380)}}
-你可以点击上面的文章链接来查看相关 HTML 元素的所有特性；但在这篇文章中，主要目的是学习我们最感兴趣的[`controls`](/zh-CN/docs/Web/HTML/Element/video#controls)属性，它会启用默认的播放设置。如果没有指定该属性，则播放器中不会显示相关控件：
+你可以点击上面的文章链接来查看相关 HTML 元素的所有特性；但在这篇文章中，主要目的是学习我们最感兴趣的 [`controls`](/zh-CN/docs/Web/HTML/Element/video#controls) 属性：它会启用默认的播放设置。如果没有指定该属性，则播放器中不会显示相关控件：
{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats-no-controls.html", '100%', 380)}}
-至此，你可能会觉得这个属性作用不大，但是它确实很有优势。使用原生浏览器控件的一个很大的问题在于，它们在各个浏览器中都不相同 — 对于跨浏览器的支持并不是很好！另一个问题是，在大多数浏览器中原生控件难以通过键盘来操作。
+至此，你可能会觉得这个属性作用不大，但是它确实很有优势。不过，使用原生浏览器控件有一个很大的问题：它们在各个浏览器中都不相同——对于跨浏览器的支持并不是很好！另一个问题是，在大多数浏览器中原生控件难以通过键盘来操作。
-你可以通过隐藏本地控件（通过删除 controls 属性），然后使用 HTML，CSS 和 JavaScript 编写自己的代码来解决这两个问题。在下一节中，我们将看到如何通过一些可用的工具来实现。
+你可以通过隐藏原生控件（通过删除 `controls` 属性），然后使用 HTML、CSS 和 JavaScript 编写自己的代码来解决这两个问题。在下一节中，我们将看到如何通过一些可用的基本工具来实现。
## HTMLMediaElement API
-作为 HTML5 规范的一部分，{{domxref("HTMLMediaElement")}} API 提供允许你以编程方式来控制视频和音频播放的功能—例如 {{domxref("HTMLMediaElement.play()")}}, {{domxref("HTMLMediaElement.pause()")}},等。该接口对{{htmlelement("audio")}}和{{htmlelement("video")}}两个元素都是可用的，因为在这两个元素中要实现的功能几乎是相同的。让我们通过一个例子来一步步演示一些功能。
+作为 HTML 规范的一部分，{{domxref("HTMLMediaElement")}} API 提供允许你以编程方式来控制视频和音频播放的特性——例如 {{domxref("HTMLMediaElement.play()")}}、{{domxref("HTMLMediaElement.pause()")}} 等。因为在这两个元素中要实现的特性几乎是相同的，这些接口对 {{htmlelement("audio")}} 和 {{htmlelement("video")}} 两个元素都是可用的。让我们通过一个例子来一步步演示一些功能。
我们最终的示例（和功能）将会如下所示：
@@ -69,17 +71,17 @@ HTML5 提供了用于在文档中嵌入富媒体的元素 — {{htmlelement("vid
想要使用这个示例的代码来入门，请下载 [media-player-start.zip](https://github.com/mdn/learning-area/raw/main/javascript/apis/video-audio/start/media-player-start.zip) 并解压到你的硬盘上的一个新建目录里。如果想要下载[示例仓库](https://github.com/mdn/learning-area)，它位于 `javascript/apis/video-audio/start/` 路径下。
-下载并解压之后，如果你加载这个 HTML，你将会看到一个通过浏览器原生播放控件渲染的非常一般的 HTML5 视频播放器。
+下载并解压之后，如果你加载这个 HTML，你将会看到一个通过浏览器原生播放控件渲染的非常一般的 HTML 视频播放器。
#### 探索 HTML
打开 HTML index 文件。你将看到一些功能；HTML 由视频播放器和它的控件所控制：
-```plain
+```html
-
-
+
@@ -95,17 +97,17 @@ HTML5 提供了用于在文档中嵌入富媒体的元素 — {{htmlelement("vid
```
-- 整个播放器被包装在一个{{htmlelement("div")}}元素之中，所以如果有必要的话，可以把它作为一个单元整体来设置其样式。
-- {{htmlelement("video")}}元素层包含两个{{htmlelement("source")}}元素，这样可以根据浏览器来加载其所支持的不同视频格式。
-- 控件 HTML 大概是最有趣的：
+- 整个播放器被包装在一个 {{htmlelement("div")}} 元素之中，所以如果有必要的话，可以把它作为一个单元整体来设置其样式。
+- {{htmlelement("video")}} 元素层包含两个 {{htmlelement("source")}} 元素，这样可以根据浏览器来加载其所支持的不同视频格式。
+- 控件 HTML 大概是其中最有趣的：
- - 我们有四个 {{htmlelement("button")}} — play/pause, stop, rewind, and fast forward.
- - 每个`
` 都有一个 `class` 名，一个`data-icon` 属性来决定在每个按钮上显示什么图标 (在下一节讲述它是如何工作的), 和一个`aria-label` 属性为每一个按钮提供容易理解的描述，即使我们没有在 tags 内提供可读的标签。当用户关注这些元素时含有`aria-label` 属性的内容也会被讲述人读出来。
- - 有一个设定的计时器 {{htmlelement("div")}}用来报告已经播放的时长。为了好玩，我们提供了两种报告机制 — 一个 {{htmlelement("span")}} 包含了流逝时间的分钟和秒，和一个额外的`` 用来创建一个水平的随着时间增加而增长的进度条。要想了解完成版本看上去是咋样的，[点击查看完成版本](https://mdn.github.io/learning-area/javascript/apis/video-audio/finished/).
+ - 我们有四个 {{htmlelement("button")}}，分别对应播放/暂停、终止、回退、快进。
+ - 每个 `
` 都有一个 `class` 名、一个用于决定在每个按钮上显示什么图标（在下一节我们将讲述它是如何工作的）的 `data-icon` 属性和一个用于每一个按钮提供容易理解的描述的 `aria-label` 属性，因为我们没有在标签中提供对人类可读的描述内容。当用户聚焦包含有 `aria-label` 属性的标签时，其内容会被屏幕阅读器读出来。
+ - 有一个设定的计时器 {{htmlelement("div")}} 用来指出已经播放的时长。为了好玩，我们同时给出了两种报告机制：一个 {{htmlelement("span")}} 包含了流逝时间的分钟和秒；一个额外的 `` 用来创建一个水平的随着时间增加而增长的进度条。要想了解完成版本看上去如何，[点击查看完成的版本](https://mdn.github.io/learning-area/javascript/apis/video-audio/finished/)。
#### 探索 CSS
-现在打开 CSS 文件来查看里面的内容。例子中的 CSS 样式并不是很复杂，我们突出了最主要的一部分。首先注意`.controls` 的样式：
+现在打开 CSS 文件来查看里面的内容。例子中的 CSS 样式并不是很复杂，我们突出了最主要的一部分。首先注意 `.controls` 的样式：
```css
.controls {
@@ -124,14 +126,14 @@ HTML5 提供了用于在文档中嵌入富媒体的元素 — {{htmlelement("vid
}
.player:hover .controls,
-player:focus .controls {
+.player:focus-within .controls {
opacity: 1;
}
```
-- 我们从设置为`hidden`的自定义控件{{cssxref("visibility")}}开始。稍后在我们的 JavaScript 中，我们将控件设置为 `visible`, 并且从`
` 元素中移除`controls` 属性。这是因为，如果 JavaScript 由于某种原因没有加载，用户依然可以使用原生的控件播放视频。
-- 默认情况下，我们将控件的`opacity`设置为 0.5 {{cssxref("opacity")}}，这样当你尝试观看视频时，它们就不会分散注意力。只有当你将鼠标悬停/聚焦在播放器上时，控件才会完全不透明。
-- 我们使用 Flexbox({{cssxref("display")}}: flex) 布置控制栏内的按钮，以简化操作。
+- 我们从设置自定义控件的 {{cssxref("visibility")}} 值为 `hidden` 开始。稍后在我们的 JavaScript 中，我们将控件设置为 `visible`, 并且从 `` 元素中移除 `controls` 属性。这是因为，如果 JavaScript 由于某种原因没有加载，用户依然可以使用原生的控件播放视频。
+- 默认情况下，我们将控件的 {{cssxref("opacity")}} 设置为 0.5，这样当你尝试观看视频时，它们就不会分散你的注意力。只有当你将鼠标悬停/聚焦在播放器上时，控件才会完全不透明。
+- 我们使用弹性盒（{{cssxref("display")}}：flex）布置控制栏内的按钮，以简化操作。
接下来，让我们看看我们的按钮图标：
@@ -163,10 +165,10 @@ button:before {
接下来，我们使用这些内容来显示每个按钮上的图标：
- 我们使用 {{cssxref("::before")}} 选择器在每个 {{htmlelement("button")}} 元素之前显示内容。
-- 我们使用 {{cssxref("content")}} 属性将各情况下要显示的内容设置为 [`data-icon`](/zh-CN/docs/Learn/HTML/Howto/Use_data_attributes) 属性的内容。例如在播放按钮的情况下，[`data-icon`](/zh-CN/docs/Learn/HTML/Howto/Use_data_attributes) 包含大写的“P”。
+- 我们使用 {{cssxref("content")}} 属性将各情况下要显示的内容设置为 [`data-icon`](/zh-CN/docs/Learn/HTML/Howto/Use_data_attributes) 属性的内容。例如在播放按钮的情况下，[`data-icon`](/zh-CN/docs/Learn/HTML/Howto/Use_data_attributes) 的内容是一个大写的“P”。
- 我们使用 {{cssxref("font-family")}} 将自定义 Web 字体应用于我们的按钮上。在该字体中“P”对应的是“播放”图标，因此播放按钮上显示“播放”图标。
-图标字体非常酷有很多原因——减少 HTTP 请求，因为你不需要将这些图标作为图像文件下载。同时具有出色的可扩展性，以及你可以使用文本属性来设置它们的样式——例如 {{cssxref("color")}} 和 {{cssxref("text-shadow")}}。
+图标字体非常酷有很多原因：可以减少 HTTP 请求，因为你不再需要将这些图标作为图像文件一一下载；具有出色的可扩展性；可以使用文本属性来设置它们的样式，例如 {{cssxref("color")}} 和 {{cssxref("text-shadow")}}。
最后让我们来看看进度条的 CSS:
@@ -183,7 +185,7 @@ button:before {
.timer div {
position: absolute;
- background-color: rgba(255, 255, 255, 0.2);
+ background-color: rgb(255 255 255 / 20%);
left: 0;
top: 0;
width: 0;
@@ -198,10 +200,10 @@ button:before {
}
```
-- 我们将外部 `.timer` `` 设为 flex：5，这样它占据了控件栏的大部分宽度。我们还设置 {{cssxref("position")}}`: relative`，这样我们就可以根据它的边界方便地定位元素，而不是{{htmlelement("body")}} 元素的边界。
-- 内部 `
` 绝对定位于外部 `
` 的顶部。它的初始宽度为 0，因此根本无法看到它。随着视频的播放，JavaScript 将动态的增加其宽度。
+- 我们将外部 `.timer` 设置了 `flex: 5`，这样它占据了控件栏的大部分宽度。我们还设置 {{cssxref("position")}}`: relative`，这样我们就可以根据它的边界方便地定位元素，而不再通过 {{htmlelement("body")}} 元素的边界这样做。
+- 内部 `
` 绝对定位于外部 `
` 的顶部。设定其初始宽度为 0，因而起初无法看到它。随着视频的播放，JavaScript 将动态地增加其宽度。
- `
` 也绝对位于计时器/进度条 `timer` 栏的左侧附近。
-- 我们还对内部 `` 和 `
` 定义适当数值的 {{cssxref("z-index")}} ，以便进度条显示在最上层，内部 `` 显示在下层。这样，我们确保我们可以看到所有信息——一个 box 不会遮挡另一个。
+- 我们还对内部 `
` 和 `
` 设置适当数值的 {{cssxref("z-index")}}，从而让进度条显示在最上层，而内部 `` 显示在下层。这样，我们确保我们可以看到所有信息：一个盒子不会遮挡另一个。
### 实现 JavaScript
@@ -211,24 +213,24 @@ button:before {
2. 在此文件的顶部，插入以下代码：
```js
- var media = document.querySelector("video");
- var controls = document.querySelector(".controls");
+ const media = document.querySelector("video");
+ const controls = document.querySelector(".controls");
- var play = document.querySelector(".play");
- var stop = document.querySelector(".stop");
- var rwd = document.querySelector(".rwd");
- var fwd = document.querySelector(".fwd");
+ const play = document.querySelector(".play");
+ const stop = document.querySelector(".stop");
+ const rwd = document.querySelector(".rwd");
+ const fwd = document.querySelector(".fwd");
- var timerWrapper = document.querySelector(".timer");
- var timer = document.querySelector(".timer span");
- var timerBar = document.querySelector(".timer div");
+ const timerWrapper = document.querySelector(".timer");
+ const timer = document.querySelector(".timer span");
+ const timerBar = document.querySelector(".timer div");
```
- 这里我们创建变量来保存对我们想要操作的所有对象的引用。有如下三组：
+ 这里我们创建常量来保存对我们想要操作的所有对象的引用。有如下三组：
- - `
` 元素，和控制栏。
- - 播放/暂停，停止，快退，和快进按钮。
- - 进度条外面的 ``，数字计时器的 `
`，以及内部的 `` 会随着视频播放逐渐变宽。
+ - `
` 元素和控制栏。
+ - 播放/暂停、停止、回退和快进按钮。
+ - 进度条外面的 ``、数字计时器的 `
` 以及内部的 `` 会随着视频播放逐渐变宽。
3. 接下来，在代码的底部插入以下内容：
@@ -243,13 +245,13 @@ button:before {
让我们实现或许是最重要的控制——播放/暂停按钮。
-1. 首先，将以下内容添加到你代码的底部，以便于在单击播放按钮时调用 `playPauseMedia()`函数：
+1. 首先，将以下内容添加到你的代码底部，以便于在单击播放按钮时调用 `playPauseMedia()` 函数：
```js
play.addEventListener("click", playPauseMedia);
```
-2. 现在定义 `playPauseMedia()` 函数——再次添加以下内容到你代码底部：
+2. 现在定义 `playPauseMedia()` 函数——再次添加以下内容到你的代码底部：
```js
function playPauseMedia() {
@@ -263,51 +265,51 @@ button:before {
}
```
- 我们使用 if 语句来检查视频是否暂停。如果视频已暂停，{{domxref("HTMLMediaElement.paused")}} 属性将返回 true，任何视频没有播放的时间，包括第一次加载时处于 0 的时间段都是视频暂停状态。如果已暂停，我们把 play 按钮的 `data-icon` 属性值设置成"u", 用以表示 "暂停" 按钮图标，并且调用{{domxref("HTMLMediaElement.play()")}} 函数播放视频。
+ 我们使用 [`if`](/zh-CN/docs/Web/JavaScript/Reference/Statements/if...else) 语句来检查视频是否暂停。如果视频已暂停（视频没有播放，也包括初次加载视频进度设置为 0 的情况），{{domxref("HTMLMediaElement.paused")}} 属性将返回真。如果已暂停，我们把播放按钮的 `data-icon` 属性值设置成"u", 用以显示“暂停”按钮图标，并且调用 {{domxref("HTMLMediaElement.play()")}} 函数播放视频。
- 点击第二次，按钮将会切换回去——"播放"按钮图标将会再次显示，并且视频将会被{{domxref("HTMLMediaElement.paused()")}} 函数暂停。
+ 点击第二次，按钮将会切换回去——“播放”按钮图标将会再次显示，并且视频将会被 {{domxref("HTMLMediaElement.pause()")}} 函数暂停。
-#### 暂停视频
+#### 停止视频
-1. 接下来，让我们添加处理视频停止的方法。添加以下的 [`addEventListener()`](/zh-CN/docs/Web/API/EventTarget/addEventListener) 行在你之前添加的内容的下面：
+1. 接下来，让我们添加处理视频停止的方法。在你之前添加的内容的下面，添加以下的 [`addEventListener()`](/zh-CN/docs/Web/API/EventTarget/addEventListener)：
```js
stop.addEventListener("click", stopMedia);
media.addEventListener("ended", stopMedia);
```
- [`click`](/zh-CN/docs/Web/API/Element/click_event) 事件很明显——我们想要在点击停止按钮的时候停止视频通过运行我们的 `stopMedia()` 函数。然而我们也希望停止视频当视频播放完成时——由[`ended`](/zh-CN/docs/Web/API/HTMLMediaElement/ended_event) 事件标记，所以我们也会设置一个监听器在此事件触发时运行函数。
+ {{domxref("Element/click_event", "click")}} 事件显而易见：我们想要在点击停止按钮的时候停止视频通过调用我们的 `stopMedia()` 函数。然而当视频播放完成时（这由 {{domxref("HTMLMediaElement/ended_event", "ended")}} 事件标记），我们也希望停止视频，所以我们也会设置一个监听器在此事件触发时运行函数。
2. 接下来，让我们定义 `stopMedia()`——在 `playPauseMedia()` 后面添加以下函数：
- ```plain
+ ```js
function stopMedia() {
media.pause();
media.currentTime = 0;
- play.setAttribute('data-icon','P');
+ play.setAttribute("data-icon", "P");
}
```
- 在 HTMLMediaElement API 中没有 `stop()` 方法——等效的办法是先用 `pause()` 暂停视频，然后设置{{domxref("HTMLMediaElement.currentTime","currentTime")}} 属性为 0。设置 `currentTime` 的值（单位：秒）将会立刻使视频跳到该位置。
+ 在 HTMLMediaElement API 中没有 `stop()` 方法：等效的办法是先用 `pause()` 暂停视频，然后设置 {{domxref("HTMLMediaElement.currentTime","currentTime")}} 属性为 0。设置 `currentTime` 的值（单位：秒）将会立刻使视频跳到该位置。
之后要做的事是把显示的图标设置成“播放”图标。无论视频使暂停还是正在播放，你都希望它随后可以播放。
-#### 探索快进和快退
+#### 快进和快退
-有许多方法可以实现快退和快进功能;在这里，我们向你展示了一种相对复杂的方式，当按意外顺序按下不同的按钮时，它不会中断。
+有许多方法可以实现快退和快进功能；在这里，我们向你展示了一种相对复杂的方式，当按意外顺序按下不同的按钮时，它不会中断。
-1. 首先，在前面的代码之下添加以下两个[`addEventListener()`](/zh-CN/docs/Web/API/EventTarget/addEventListener)：
+1. 首先，在前面的代码之下添加以下两个 [`addEventListener()`](/zh-CN/docs/Web/API/EventTarget/addEventListener)：
```js
rwd.addEventListener("click", mediaBackward);
fwd.addEventListener("click", mediaForward);
```
-2. 现在转到事件处理函数 - 在以前的函数下面添加以下代码来定义`mediaBackward（）`和`mediaForward（）`：
+2. 现在转到事件处理函数：在以前的函数下面添加以下代码来定义 `mediaBackward()` 和 `mediaForward()`：
```js
- var intervalFwd;
- var intervalRwd;
+ let intervalFwd;
+ let intervalRwd;
function mediaBackward() {
clearInterval(intervalFwd);
@@ -340,16 +342,16 @@ button:before {
}
```
- 你会注意到，首先我们初始化两个变量 - intervalFwd 和 intervalRwd - 你将在后面发现它们的用途。
+ 你会注意到，首先我们初始化 `intervalFwd` 和 `intervalRwd` 两个变量。你将在后面发现它们的用途。
- 让我们逐步浏览`mediaBackward()`（`mediaForward()`的功能性完全相同，但效果相反）：
+ 让我们逐步浏览 `mediaBackward()`（`mediaForward()` 的功能与之完全相同，但效果相反）：
- 1. 我们清除在快进功能上设置的所有 classes 和 intervals ––这样做是因为如果我们在按下`fwd`（快进）按钮后再按下`rwd`（快退）按钮，就可以取消任何快进的功能并将其替换为快退功能。如果我们试图同时做到这两点，播放器就会暂停。
- 2. 使用`if`语句检查是否已在`rwd`按钮上设置了用来指示它已被按下的`active`类。{{domxref("classList")}}是一个非常方便的属性，存在于每个元素上 ––它包含元素上设置的所有类的列表，以及添加/删除类的方法等。使用`classList.contains（）`方法检查列表是否包含`active`类。这将返回布尔值`true/false`结果。
- 3. 如果在`rwd`按钮上设置了`active`，我们使用`classList.remove（）`删除它，清除第一次按下按钮时设置的间隔（参见下面的更多解释），并使用{{domxref("HTMLMediaElement.play()")}}取消快退并开始正常播放视频。
- 4. 如果尚未设置，使用`classList.add（）`将`active`类添加到`rwd`按钮，使用{{domxref("HTMLMediaElement.pause()")}}暂停视频，然后设置`intervalRwd`变量为 {{domxref("setInterval()")}} 的调用。调用时，`setInterval（）`会创建一个活动间隔，这意味着它每隔 x 毫秒运行一个作为第一个参数给出的函数，其中 x 是第二个参数的值。所以这里我们每 200 毫秒运行一次`windBackward（）`函数 ––我们将使用此函数不断向后滚动（快退动作）视频。要停止 {{domxref("setInterval()")}} 运行，你必须调用 {{domxref("clearInterval()")}}，给它识别要清除的间隔的名称，在本例中是变量名称 intervalRwd（请参阅函数中较早的 clearInterval（）调用）。
+ 1. 我们清除在快进功能上设置的所有类和时间间隔。这样做是因为如果我们在按下 `fwd`（快进）按钮后再按下 `rwd`（快退）按钮，就可以取消任何快进的功能并将其替换为快退功能。如果我们试图同时做到这两点，播放器就会暂停。
+ 2. 使用 `if` 语句检查是否已在 `rwd` 按钮上设置了用来指示它已被按下的 `active` 类。{{domxref("classList")}} 是一个存在于每个元素上的非常方便的属性。它包含元素上设置的所有类的列表，以及添加/删除类的方法等。使用 `classList.contains()` 方法检查列表是否包含 `active` 类，将返回布尔值 `true`/`false` 结果。
+ 3. 如果在 `rwd` 按钮上设置了 `active`，我们将使用 `classList.remove()` 删除它，清除第一次按下按钮时设置的时间间隔（参见下面的更多解释），并调用 {{domxref("HTMLMediaElement.play()")}} 取消快退并开始正常播放视频。
+ 4. 如果尚未设置，使用 `classList.add()` 将 `active` 类添加到 `rwd` 按钮，调用 {{domxref("HTMLMediaElement.pause()")}} 暂停视频，然后设置 `intervalRwd` 变量为 {{domxref("setInterval()")}} 的调用结果。调用时，`setInterval()` 会创建一个时间间隔。这意味着它每隔 x 毫秒运行一个作为第一个参数给出的函数，其中 x 是第二个参数的值。所以这里我们每 200 毫秒运行一次 `windBackward()` 函数——我们将使用此函数不断快退视频。要停止 {{domxref("setInterval()")}} 运行，你必须调用 {{domxref("clearInterval()")}}，并给出要清除的时间间隔的标识名，在本例中是变量名称 `intervalRwd`（请参阅函数中较早的一个 `clearInterval()` 调用）。
-3. 最后，对于本节，定义在 setInterval（）调用中需要调用的 windBackward（）和 windForward（）函数。在以上两个函数下面添加以下内容：
+3. 最后，对于本节，定义在 `setInterval()` 调用中需要调用的 `windBackward()` 和 `windForward()` 函数。在以上两个函数下面添加以下内容：
```js
function windBackward() {
@@ -373,66 +375,54 @@ button:before {
}
```
- 同样，我们将完成这些功能中的第一个，因为它们几乎完全相同，但彼此相反。在`windBackward（）`中，我们执行以下操作 ––请记住，当间隔处于活动状态时，此函数每 200 毫秒运行一次。
+ 同样，因为它们几乎完全相同但效果相反，我们将完成这些功能中的第一个。在 `windBackward()` 中，我们执行以下操作：请记住，当时间间隔处于活动状态时，此函数每 200 毫秒运行一次。
- 1. 我们从一个`if`语句开始，该语句检查当前时间是否小于 3 秒，即，如果再倒退三秒将使其超过视频的开始。这会导致奇怪的行为，所以如果是这种情况，我们通过调用`stopMedia（）`来停止视频播放，从倒带按钮中删除`active`类，并清除`intervalRwd`间隔以停止快退功能。如果我们没有做到最后一步，视频将永远保持快退。
- 2. 如果当前时间不在视频开始的 3 秒内，我们只需通过执行`media.currentTime-=3`从当前时间中删除三秒。因此，实际上，我们将视频快退 3 秒，每 200 毫秒一次。
+ 1. 我们从一个 `if` 语句开始。该语句检查当前时间是否小于 3 秒（如果小于三秒，回退视频三秒会导致视频进度比视频开头还前，这样就会有奇怪的表现）。如果是这样，我们将删除 `active` 类，调用 `stopMedia()` 函数来停止视频，并清除时间间隔 `intervalRwd`。如果我们没有做最后一步，视频将不断往前回退。
+ 2. 如果当前时间不在视频开始的 3 秒内，我们只需通过执行 `media.currentTime -= 3` 从当前时间中减掉三秒。实际上，我们是在每 200 毫秒将视频回退三秒。
#### 更新已用时间
-我们要实施的媒体播放器的最后一块是显示的时间。为此，我们将运行一个函数，以便每次在\
元素上触发 [`timeupdate`](/zh-CN/docs/Web/API/HTMLMediaElement/timeupdate_event)事件时更新时间显示。此事件触发的频率取决于你的浏览器，CPU 电源等（[see this stackoverflow post](http://stackoverflow.com/questions/9678177/how-often-does-the-timeupdate-event-fire-for-an-html5-video)）。
+我们要实现的媒体播放器的最后一块是显示的时间。为此，我们将执行一个函数，这样每次在 `` 元素上触发 [`timeupdate`](/zh-CN/docs/Web/API/HTMLMediaElement/timeupdate_event) 事件时更新时间显示。此该事件触发的频率取决于你的浏览器，CPU 电源等（[详见这个 StackOverflow 帖文](http://stackoverflow.com/questions/9678177/how-often-does-the-timeupdate-event-fire-for-an-html5-video)）。
-在代码下方添加`addEventListener（）`行：
+在代码下方添加 `addEventListener()`：
```js
media.addEventListener("timeupdate", setTime);
```
-现在定义`setTime（）`函数。在文件底部添加以下内容：
+现在定义 `setTime()` 函数。在文件底部添加以下内容：
```js
function setTime() {
- var minutes = Math.floor(media.currentTime / 60);
- var seconds = Math.floor(media.currentTime - minutes * 60);
- var minuteValue;
- var secondValue;
-
- if (minutes < 10) {
- minuteValue = "0" + minutes;
- } else {
- minuteValue = minutes;
- }
-
- if (seconds < 10) {
- secondValue = "0" + seconds;
- } else {
- secondValue = seconds;
- }
-
- var mediaTime = minuteValue + ":" + secondValue;
+ const minutes = Math.floor(media.currentTime / 60);
+ const seconds = Math.floor(media.currentTime - minutes * 60);
+
+ const minuteValue = minutes.toString().padStart(2, "0");
+ const secondValue = seconds.toString().padStart(2, "0");
+
+ const mediaTime = `${minuteValue}:${secondValue}`;
timer.textContent = mediaTime;
- var barLength =
+ const barLength =
timerWrapper.clientWidth * (media.currentTime / media.duration);
- timerBar.style.width = barLength + "px";
+ timerBar.style.width = `${barLength}px`;
}
```
这是一个相当长的函数，所以让我们一步一步地完成它：
-1. 首先，我们计算{{domxref("HTMLMediaElement.currentTime")}} 值中的分钟数和秒数。
-2. 然后我们初始化另外两个变量 ––`minuteValue`和`secondValue`。
-3. 两个`if`语句计算出分钟数和秒数是否小于 10.如果是这样，它们会在类似数值时钟显示工作的方式上为值添加前置的零。
-4. 要显示的实际时间值设置为`minuteValue`加上冒号字符加`secondValue`。
-5. 计时器的{{domxref("Node.textContent")}}值设置为时间值，因此它显示在 UI 中。
-6. 我们应该设置内部``的长度是通过首先计算外部`
`的宽度来计算出来的（任何元素的{{domxref("HTMLElement.clientWidth", "clientWidth")}} 属性将包含它的长度），然后乘以{{domxref("HTMLMediaElement.currentTime")}}除以媒体的总{{domxref("HTMLMediaElement.duration")}}。
-7. 我们将内部`
`的宽度设置为等于计算的条形长度加上“px”，因此它将设置为该像素数
+1. 首先，我们计算 {{domxref("HTMLMediaElement.currentTime")}} 值中的分钟数和秒数。
+2. 然后我们初始化另外两个变量 `minuteValue` 和 `secondValue`。我们将要使用 {{jsxref("String/padStart", "padStart()")}} 将每个数值变成为 2 个字符，即使数值只有一位数。
+3. 要显示的实际时间值设置为 `minuteValue` 加上冒号字符再加上 `secondValue`。
+4. 计时器的 {{domxref("Node.textContent")}} 值设置为时间值，以让这个时间在 UI 中显示。
+5. 内部 `
` 的长度是通过首先计算外部 `
` 的宽度来计算出来的（任何元素的 {{domxref("HTMLElement.clientWidth", "clientWidth")}} 属性将包含它的长度），然后乘以 {{domxref("HTMLMediaElement.currentTime")}} 除以媒体的总 {{domxref("HTMLMediaElement.duration")}}。
+6. 我们将内部 `
` 的宽度设置为等于计算的条形长度加上“px”，设置为这个数值大小的像素。
#### 修复播放和暂停
-还有一个问题需要修复。如果在快退或快进功能激活时按下播放/暂停或停止按钮，它们就不起作用。我们如何修复它以便取消`rwd / fwd`按钮功能并按照你的预期播放/停止视频？这很容易解决。
+还有一个问题需要修复。如果在快退或快进功能激活时按下播放/暂停或停止按钮，它们就不起作用。我们如何修复它以便取消 `rwd`/`fwd` 按钮功能并按照你的预期播放/停止视频？这很容易解决。
-首先，在`stopMedia（）`函数中添加以下行 ––任何地方都可以：
+首先，在 `stopMedia()` 函数中添加以下代码（任何地方都可以）：
```js
rwd.classList.remove("active");
@@ -441,35 +431,35 @@ clearInterval(intervalRwd);
clearInterval(intervalFwd);
```
-现在再次添加相同的行（上面的四行）到`playPauseMedia（）`函数的最开头（就在`if`语句的开始之前）。
+现在再次添加相同的行（上面的四行）到 `playPauseMedia()` 函数的最开头（就在 `if` 语句的开始之前）。
-此时，你可以删除`windBackward（）`和`windForward（）`函数中的等效行，因为该函数已在`stopMedia（）`函数中实现。
+此时，你可以删除 `windBackward()` 和 `windForward()` 函数中的等效代码，因为该函数已在 `stopMedia()` 函数中实现。
-> **备注：** 你还可以通过创建运行这些行的单独函数来进一步提高代码的效率，然后在需要的任何地方调用它，而不是在代码中多次重复这些行。但是我们会把这些留给你自己。
+值得注意的是，你还可以通过创建运行这些行的单独函数来进一步提高代码的效率，然后在需要的任何地方调用它，而不是在代码中多次重复这些行。但是我们会把这些留给你自己。
## 小结
-我想我们已经在这篇文章中教过你足够多了。使用{{domxref("HTMLMediaElement")}} API 可以为创建简单的视频和音频播放器提供丰富的可用功能，然而这只是冰山一角。有关更复杂和有趣功能的链接，请参阅下面的“另请参阅”部分。
+我想我们已经在这篇文章中教过你足够多了。使用 {{domxref("HTMLMediaElement")}} API 可以为创建简单的视频和音频播放器提供丰富的可用功能，然而这只是冰山一角。有关更复杂和有趣功能的链接，请参阅下面的“参见”部分。
以下是一些有关如何增强我们构建的现有示例的建议：
-1. 如果视频是一小时或更长时间（嗯，它不会显示小时;只有几分钟和几秒），当前显示时间会中断。你能弄清楚如何更改示例以使其显示小时数吗？
-2. 由于 `
` 元素具有相同的{{domxref("HTMLMediaElement")}}功能，因此你可以轻松地将此播放器用于 `` 元素。试着这样做。
-3. 你能找到一种方法将计时器内部的 `` 元素转换为真正的搜索条/ 滑动条 - 也就是说，当你点击条形图上的某个位置时，它会跳转到视频播放中的相对位置吗？作为提示，你可以通过[`getBoundingClientRect()`](/zh-CN/docs/Web/API/Element/getBoundingClientRect) 方法找出元素左/右和上/下侧的 X 和 Y 值，而且你可以通过 {{domxref("Document")}} 对象调用的 click 事件的事件对象找到鼠标单击的坐标。举个栗子：
+1. 如果视频是一小时或更长时间（嗯，它不会显示小时：现在只能显示几分几秒），当前显示时间会出错。你能弄清楚如何更改示例以使其显示小时数吗？
+2. 由于 `
` 元素具有相同的 {{domxref("HTMLMediaElement")}} 功能，因此你可以轻松地将此播放器用于 `` 元素。试着这样做。
+3. 你能找到一种方法将计时器内部的 `` 元素转换为真正的搜索条/滑动条——也就是说，当你点击进度条上的某个位置时，它会跳转到视频播放中的相对位置吗？作为提示，你可以通过 [`getBoundingClientRect()`](/zh-CN/docs/Web/API/Element/getBoundingClientRect) 方法找出元素左/右和上/下侧的 X 和 Y 值，而且你可以通过 {{domxref("Document")}} 对象调用的 click 事件的事件对象找到鼠标单击的坐标。举个例子：
```js
document.onclick = function (e) {
- console.log(e.x) + "," + console.log(e.y);
+ console.log(e.x, e.y);
};
```
## 参见
- {{domxref("HTMLMediaElement")}}
-- [视频和音频内容](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)— \
和\的简单指南。
-- [Audio and video delivery](/zh-CN/docs/Web/Apps/Fundamentals/Audio_and_video_delivery) — detailed guide to delivering media inside the browser, with many tips, tricks, and links to further more advanced tutorials.
-- [Audio 与 video 操作](/zh-CN/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation) — 操作 audio 和 video 的详细指南，例如：使用 [Canvas API](/zh-CN/docs/Web/API/Canvas_API), [Web Audio API](/zh-CN/docs/Web/API/Web_Audio_API)，等等。
-- {{htmlelement("video")}} and {{htmlelement("audio")}} reference pages.
-- [Media formats supported by the HTML audio and video elements](/zh-CN/docs/Web/HTML/Supported_media_formats).
+- [视频和音频内容](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)：`` 和 `` 的简单指南。
+- [音频与视频传输](/zh-CN/docs/Web/Media/Audio_and_video_delivery)：给浏览器传输音频和视频的详细指南，包括很多提示、技巧和指向更深层次教程的相关链接。
+- [音频与视频操作](/zh-CN/docs/Web/Media/Audio_and_video_manipulation)：操作音频和视频的详细指南，例如：使用 [Canvas API](/zh-CN/docs/Web/API/Canvas_API)、[Web Audio API](/zh-CN/docs/Web/API/Web_Audio_API) 等。
+- {{htmlelement("video")}}、{{htmlelement("audio")}} 参考。
+- [Web 上的媒体类型与格式教程](/zh-CN/docs/Web/Media/Formats)
{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs/Client-side_storage", "Learn/JavaScript/Client-side_web_APIs")}}
diff --git a/files/zh-cn/learn/javascript/first_steps/a_first_splash/index.md b/files/zh-cn/learn/javascript/first_steps/a_first_splash/index.md
index f04b3c9d6ef940..9947c3b19c0f93 100644
--- a/files/zh-cn/learn/javascript/first_steps/a_first_splash/index.md
+++ b/files/zh-cn/learn/javascript/first_steps/a_first_splash/index.md
@@ -24,7 +24,8 @@ slug: Learn/JavaScript/First_steps/A_first_splash
我们并不要求你立刻完整理解所有代码：你不需要借此学会 JavaScript，甚至不需要理解我们要求你编写的全部代码。当前只是概括地介绍一些抽象的概念，让你了解 JavaScript 的特性是如何协同工作的，以及获得编写 JavaScript 的一些感受。所有具体特性将在后续文章中详细介绍，如果你没有很快地全部理解它们，请不要担心！
-> **备注：** 可以看到，JavaScript 中许多代码特性和其他编程语言是一致的（函数、循环，等等）。尽管代码语法不尽相同，但概念基本类似。
+> [!NOTE]
+> 可以看到，JavaScript 中许多代码特性和其他编程语言是一致的（函数、循环，等等）。尽管代码语法不尽相同，但概念基本类似。
## 像程序员一样思考
@@ -136,7 +137,8 @@ let resetButton;
- 倒数第二个变量存储一个计数器并初始化为 1（用于跟踪玩家猜测的次数），最后一个变量存储对重置按钮的引用，这个按钮尚不存在（但稍后就有了）。
-> **备注：** 稍后将讲解更多关于变量和常量的信息。[参见下一篇文章](/zh-CN/docs/Learn/JavaScript/First_steps/Variables)。
+> [!NOTE]
+> 稍后将讲解更多关于变量和常量的信息。[参见下一篇文章](/zh-CN/docs/Learn/JavaScript/First_steps/Variables)。
### 函数（Function）
diff --git a/files/zh-cn/learn/javascript/first_steps/arrays/index.md b/files/zh-cn/learn/javascript/first_steps/arrays/index.md
index 418f457a4e7d55..c5eaa6eebbf306 100644
--- a/files/zh-cn/learn/javascript/first_steps/arrays/index.md
+++ b/files/zh-cn/learn/javascript/first_steps/arrays/index.md
@@ -174,7 +174,8 @@ slug: Learn/JavaScript/First_steps/Arrays
// shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ]
```
- > **备注：** 我们以前说过，但还是提醒一下——电脑从 0 开始计数！
+ > [!NOTE]
+ > 我们以前说过，但还是提醒一下——电脑从 0 开始计数！
3. 请注意，数组中包含数组的话称之为多维数组。你可以通过将两组方括号链接在一起来访问数组内的另一个数组。例如，要访问数组内部的一个项目，即 `random` 数组中的第三个项目（参见上一节），我们可以这样做：
@@ -216,7 +217,8 @@ for (let i = 0; i < sequence.length; i++) {
通常，你会看到一个包含在一个长长的字符串中的原始数据，你可能希望将有用的项目分成更有用的表单，然后对它们进行处理，例如将它们显示在数据表中。为此，我们可以使用 {{jsxref("String.prototype.split()","split()")}} 方法。在其最简单的形式中，这需要一个参数，你要将字符串分隔的字符，并返回分隔符之间的子串，作为数组中的项。
-> **备注：** 好吧，从技术上讲，这是一个字符串方法，而不是一个数组方法，但是我们把它放在数组中，因为它在这里很合适。
+> [!NOTE]
+> 好吧，从技术上讲，这是一个字符串方法，而不是一个数组方法，但是我们把它放在数组中，因为它在这里很合适。
1. 我们来玩一下这个方法，看看它是如何工作的。首先，在控制台中创建一个字符串：
@@ -407,7 +409,8 @@ window.addEventListener("load", updateCode);
在这个例子中，我们将展示一种更简单的使用方法 - 在这里我们给你一个假的搜索网站，一个搜索框。这个想法是，当在搜索框中输入时，列表中会显示 5 个先前的搜索字词。当列表项目数量超过 5 时，每当新项目被添加到顶部时，最后一个项目开始被删除，因此总是显示 5 个以前的搜索字词。
-> **备注：** 在真正的搜索应用中，你可能可以点击先前的搜索字词返回上一次搜索，并显示实际的搜索结果！我们现在只是保持简单的逻辑。
+> [!NOTE]
+> 在真正的搜索应用中，你可能可以点击先前的搜索字词返回上一次搜索，并显示实际的搜索结果！我们现在只是保持简单的逻辑。
要完成该应用程序，我们需要你：
diff --git a/files/zh-cn/learn/javascript/first_steps/index.md b/files/zh-cn/learn/javascript/first_steps/index.md
index c0e366b665739a..bd90fe0e7722ee 100644
--- a/files/zh-cn/learn/javascript/first_steps/index.md
+++ b/files/zh-cn/learn/javascript/first_steps/index.md
@@ -15,7 +15,8 @@ slug: Learn/JavaScript/First_steps
- [HTML 简介](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)。
- [CSS 简介](/zh-CN/docs/Learn/CSS/Introduction_to_CSS)。
-> **备注：** 如果你无法在你使用的电脑/平板/其他设备上创建自己的文件，尝试使用在线编程应用来运行（大部分）代码示例，例如 [JSBin](https://jsbin.com/) 和 [Glitch](https://glitch.com/)。
+> [!NOTE]
+> 如果你无法在你使用的电脑/平板/其他设备上创建自己的文件，尝试使用在线编程应用来运行（大部分）代码示例，例如 [JSBin](https://jsbin.com/) 和 [Glitch](https://glitch.com/)。
## 学习指南
diff --git a/files/zh-cn/learn/javascript/first_steps/math/index.md b/files/zh-cn/learn/javascript/first_steps/math/index.md
index 6f1e81895a4bef..db946e2f968344 100644
--- a/files/zh-cn/learn/javascript/first_steps/math/index.md
+++ b/files/zh-cn/learn/javascript/first_steps/math/index.md
@@ -134,9 +134,11 @@ slug: Learn/JavaScript/First_steps/Math
-> **备注：** 你以后有时候会看到参与算术计算的数字被称为 操作数 ({{Glossary("Operand", "operands")}})。
+> [!NOTE]
+> 你以后有时候会看到参与算术计算的数字被称为 操作数 ({{Glossary("Operand", "operands")}})。
-> **备注：** 有时你可能会看到使用较旧的 {{jsxref("Math.pow()")}} 方法表达的指数，该方法的工作方式非常相似。例如，在 `Math.pow(7, 3)` 中，`7` 是基数，`3` 是指数，因此表达式的结果是 `343`。 `Math.pow(7, 3)` 相当于 `7 ** 3`。
+> [!NOTE]
+> 有时你可能会看到使用较旧的 {{jsxref("Math.pow()")}} 方法表达的指数，该方法的工作方式非常相似。例如，在 `Math.pow(7, 3)` 中，`7` 是基数，`3` 是指数，因此表达式的结果是 `343`。 `Math.pow(7, 3)` 相当于 `7 ** 3`。
我们可能不需要教你如何做基础数学，但我们想测试你对所涉及的语法的理解。尝试将下面的示例输入到[开发者工具 JavaScript 控制台](/zh-CN/docs/Learn/Discover_browser_developer_tools)中。
@@ -190,7 +192,8 @@ num2 + num1 / 8 + 2;
尝试看看。
-> **备注：** 注意：可以在[表达式和运算符](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#运算符优先级)中找到所有 JavaScript 运算符的完整列表及其优先级。
+> [!NOTE]
+> 注意：可以在[表达式和运算符](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#运算符优先级)中找到所有 JavaScript 运算符的完整列表及其优先级。
## 自增和自减运算符
@@ -200,7 +203,8 @@ num2 + num1 / 8 + 2;
guessCount++;
```
-> **备注：** 它们最常用于[循环](/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration)中，你将在以后的课程中了解。例如，假设你想循环查看价格表，并为每个价格增加销售税。你可以使用循环依次查看每个值，并在每种情况下进行必要的计算，以添加销售税。当需要时，增量器用于移动到下一个值。我们实际上提供了一个简单的例子，显示了如何完成——[在线查看效果](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/loop.html)，并[查看源代码](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/maths/loop.html)，看看是否可以发现增量器！我们稍后将会详细介绍循环。
+> [!NOTE]
+> 它们最常用于[循环](/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration)中，你将在以后的课程中了解。例如，假设你想循环查看价格表，并为每个价格增加销售税。你可以使用循环依次查看每个值，并在每种情况下进行必要的计算，以添加销售税。当需要时，增量器用于移动到下一个值。我们实际上提供了一个简单的例子，显示了如何完成——[在线查看效果](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/loop.html)，并[查看源代码](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/maths/loop.html)，看看是否可以发现增量器！我们稍后将会详细介绍循环。
我们来试试看你们的控制台。首先，请注意，你不能将这些直接应用于一个数字，这可能看起来很奇怪，但是我们为变量赋值一个新的更新值，而不是对该值进行操作。以下将返回错误：
@@ -229,7 +233,8 @@ num2--;
num2;
```
-> **备注：** 你可以使浏览器以其他方式进行操作 - 递增/递减变量，然后返回值 - 将操作符放在变量的开头，而不是结束。再次尝试上面的例子，但这次使用 `++num1` 和 `--num2`。
+> [!NOTE]
+> 你可以使浏览器以其他方式进行操作 - 递增/递减变量，然后返回值 - 将操作符放在变量的开头，而不是结束。再次尝试上面的例子，但这次使用 `++num1` 和 `--num2`。
## 赋值运算符
@@ -260,7 +265,8 @@ let y = 4; // y 包含值 4
x *= y; // x 现在包含值 12
```
-> **备注：** 虽然有很多可用的[赋值运算符](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#Assignment_operators)，但是这些是你现在应该学习的基本的一类。
+> [!NOTE]
+> 虽然有很多可用的[赋值运算符](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#Assignment_operators)，但是这些是你现在应该学习的基本的一类。
## 主动学习：调整画布框的大小
@@ -294,7 +300,8 @@ x *= y; // x 现在包含值 12
| <= | 小于或等于 | 测试左值是否小于或等于右值。 | `3 <= 2` |
| >= | 大于或等于 | 测试左值是否大于或等于正确值。 | `5 >= 4` |
-> **备注：** 你可能会看到有些人在他们的代码中使用`==`和`!=`来判断相等和不相等，这些都是 JavaScript 中的有效运算符，但它们与`===`/`!==`不同，前者测试值是否相同，但是数据类型可能不同，而后者的严格版本测试值和数据类型是否相同。严格的版本往往导致更少的错误，所以我们建议你使用这些严格的版本。
+> [!NOTE]
+> 你可能会看到有些人在他们的代码中使用`==`和`!=`来判断相等和不相等，这些都是 JavaScript 中的有效运算符，但它们与`===`/`!==`不同，前者测试值是否相同，但是数据类型可能不同，而后者的严格版本测试值和数据类型是否相同。严格的版本往往导致更少的错误，所以我们建议你使用这些严格的版本。
如果你尝试在控制台中输入这些值，你将看到它们都返回 `true`/`false` 值 - 我们在上一篇文章中提到的那些布尔值。这些是非常有用的，因为它们允许我们在我们的代码中做出决定 - 每次我们想要选择某种类型时，都会使用这些代码，例如：
@@ -333,7 +340,8 @@ function updateBtn() {
你可以在 updateBtn（）函数内看到正在使用的等号运算符。在这种情况下，我们不会测试两个数学表达式是否具有相同的值 - 我们正在测试一个按钮的文本内容是否包含某个字符串 - 但它仍然是工作原理。如果按钮当前为“启动机器（start machine）”，则将其标签更改为“停止机器（stop machine）”，并根据需要更新标签。如果按钮上写着“停机”时被按下，我们将显示回原来的内容。
-> **备注：** 这种在两个状态之间来回交换的行为通常被称为**切换**。它在一个状态和另一个状态之间切换 - 点亮，熄灭等
+> [!NOTE]
+> 这种在两个状态之间来回交换的行为通常被称为**切换**。它在一个状态和另一个状态之间切换 - 点亮，熄灭等
## 总结
@@ -341,6 +349,7 @@ function updateBtn() {
在下一篇文章中，我们将探讨文本，以及 JavaScript 如何让我们操纵它。
-> **备注：** 如果你喜欢数学，并希望阅读更多关于它如何在 JavaScript 中实现的，那么你可以在 MDN's main JavaScript 部分读到更多关于它的内容。对于学习[数字与日期](/zh-CN/docs/Web/JavaScript/Guide/Numbers_and_dates)和[表达式与运算符](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#运算符优先级)来说，那是一个不错的地方。
+> [!NOTE]
+> 如果你喜欢数学，并希望阅读更多关于它如何在 JavaScript 中实现的，那么你可以在 MDN's main JavaScript 部分读到更多关于它的内容。对于学习[数字与日期](/zh-CN/docs/Web/JavaScript/Guide/Numbers_and_dates)和[表达式与运算符](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#运算符优先级)来说，那是一个不错的地方。
{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}
diff --git a/files/zh-cn/learn/javascript/first_steps/silly_story_generator/index.md b/files/zh-cn/learn/javascript/first_steps/silly_story_generator/index.md
index 8a71f137b8af7a..24d1fd308f3ec1 100644
--- a/files/zh-cn/learn/javascript/first_steps/silly_story_generator/index.md
+++ b/files/zh-cn/learn/javascript/first_steps/silly_story_generator/index.md
@@ -27,7 +27,8 @@ slug: Learn/JavaScript/First_steps/Silly_story_generator
测验开始之前需要下载并保存 [index.html](https://github.com/roy-tian/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html)、[style.css](https://github.com/roy-tian/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/style.css)、[raw-text.txt](https://github.com/roy-tian/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt)。
-> **备注：** 你还可以用类似 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 这些在线编辑器来完成测验。你可以把 HTML、CSS 及 JavaScript 代码复制过去。如果你选的工具没有独立的 JavaScript 版面，可以随时在 HTML 页面中添加 ``
- > **备注：** 这一段代码并没有任何杀伤力，在执行的时候只会在浏览器中弹出一个警告提示框。如果这个警告提示框出现，则表明本网站存在可被 XSS 攻击的漏洞。
+ > [!NOTE]
+ > 这一段代码并没有任何杀伤力，在执行的时候只会在浏览器中弹出一个警告提示框。如果这个警告提示框出现，则表明本网站存在可被 XSS 攻击的漏洞。
5. 点击 **Submit** 按钮保存信息。
6. 保存后的作者信息将会显示为下图的样式。因为 XSS 防护措施的存在，注入代码中的`alert()`部分并没有执行，而只是用文本的方式直接显示了出来。
@@ -76,7 +78,8 @@ XSS 攻击也可能来自于其他不可信的数据来源，例如 cookies，We
CSRF(英语：Cross-site request forgery，通常简称：CSRF 或 XSRF) 攻击可以让恶意攻击者在用户不知情的情况下，使用用户的身份来进行系统操作。举个例子，现在有一名黑客想要在我们的本地图书馆中添加一些作者信息。
-> **备注：** 这个示例里面的黑客没有考虑对钱下手。而现实生活中的黑客则极有可能会产生更加危险的操作（例如，把钱转入他们自己的账户中等等）。
+> [!NOTE]
+> 这个示例里面的黑客没有考虑对钱下手。而现实生活中的黑客则极有可能会产生更加危险的操作（例如，把钱转入他们自己的账户中等等）。
为了实现这个目的，黑客可以创建一个类似于下面示例的 HTML 文件，这个文件包含了一个创建作者的表单 (类似我们在之前章节中用过的)，并且一旦加载完毕就会立即进行提交。随后黑客可以将这个文件发送至所有的图书管理员，并且引诱他们打开这个文件 (文件中真的没有啥有害的信息)。如果任何一个已登录的图书管理员不慎打开了这个文件，那么文件中的表单就会利用图书管理员的身份来提交，随后就会创建出一个新的作者来。
diff --git a/files/zh-cn/learn/server-side/express_nodejs/deployment/index.md b/files/zh-cn/learn/server-side/express_nodejs/deployment/index.md
index d5f313ca929c27..2fa1bf641b8448 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/deployment/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/deployment/index.md
@@ -53,19 +53,22 @@ slug: Learn/Server-side/Express_Nodejs/deployment
这种可远程访问的计算/网络硬件，称为基础架构即服务（IaaS）。许多 IaaS 供应商，提供预安装特定操作系统的选项，你必须在其上，安装生产环境的其他组件。其他供应商，允许你选择功能更全面的环境，可能包括完整的 node 设置。
-> **备注：** 预构建环境，可以使你的网站设置变得非常简单，因为它们会减少配置，但可用选项可能会限制你使用不熟悉的服务器（或其他组件），并且可能基于较旧版本的操作系统。通常最好自己安装组件，以便获得所需的组件，并且当你需要升级系统的某些部分时，你可以知道从哪里开始！
+> [!NOTE]
+> 预构建环境，可以使你的网站设置变得非常简单，因为它们会减少配置，但可用选项可能会限制你使用不熟悉的服务器（或其他组件），并且可能基于较旧版本的操作系统。通常最好自己安装组件，以便获得所需的组件，并且当你需要升级系统的某些部分时，你可以知道从哪里开始！
其他托管服务提供商，支持 Express 作为平台即服务（PaaS）产品的一部分。使用此类托管时，你无需担心大多数生产环境（服务器，负载平衡器等），因为主机平台会为你处理这些问题。这使得部署非常简单，因为你只需要专注于 Web 应用程序，而不是任何其他服务器基础结构。
一些开发人员选择 IaaS，相对于 PaaS，IaaS 提供更高灵活性，而其他开发人员偏好 PaaS 的降低维护开销，和更轻松的扩展性。当你在一开始使用时，在 PaaS 系统上设置你的网站，要容易得多，因此我们将在本教程中使用 PaaS。
-> **备注：** 如果你选择 Node/Express 友好的托管服务提供商，他们应该提供，有关如何使用 Web 服务器，应用程序服务器，反向代理等不同配置，来设置 Express 网站的说明。例如，在[数字海洋 node 社区文档](https://www.digitalocean.com/community/tutorials?q=node)中，有许多各种配置的手把手指南。
+> [!NOTE]
+> 如果你选择 Node/Express 友好的托管服务提供商，他们应该提供，有关如何使用 Web 服务器，应用程序服务器，反向代理等不同配置，来设置 Express 网站的说明。例如，在[数字海洋 node 社区文档](https://www.digitalocean.com/community/tutorials?q=node)中，有许多各种配置的手把手指南。
## 选择一个主机供应商
众所周知，众多托管服务提供商，都积极支持或与 Node（和 Express）合作。这些供应商提供不同类型的环境（IaaS，PaaS），以及不同价格的不同级别的计算和网络资源。
-> **备注：** 有很多托管解决方案，他们的服务和定价，可能会随着时间而改变。虽然我们在下面介绍几个选项，但在选择托管服务提供商之前，有必要自己进行互联网搜索。
+> [!NOTE]
+> 有很多托管解决方案，他们的服务和定价，可能会随着时间而改变。虽然我们在下面介绍几个选项，但在选择托管服务提供商之前，有必要自己进行互联网搜索。
选择主机时需要考虑的一些事项：
@@ -83,7 +86,8 @@ slug: Learn/Server-side/Express_Nodejs/deployment
许多提供商还拥有“基本”层，可提供更多有用的计算能力，和更少的限制。举例来说， [Digital Ocean](https://www.digitalocean.com/) 是一个流行的托管服务提供商，它提供了一个相对便宜的基本计算层（在本教程写作时，是每月 5 美元的较低范围）。
-> **备注：** 请记住，价格不是唯一的选择标准。如果你的网站成功，可能会发现可扩展性是最重要的考虑因素。
+> [!NOTE]
+> 请记住，价格不是唯一的选择标准。如果你的网站成功，可能会发现可扩展性是最重要的考虑因素。
## 准备好发布你的网站
@@ -91,7 +95,8 @@ slug: Learn/Server-side/Express_Nodejs/deployment
在以下小节中，我们概述了你应该对应用进行的、最重要的更改。
-> **备注：** Express 文档中还有其他有用的提示 - 请参阅“[生产最佳实践：性能和可靠性](https://expressjs.com/en/advanced/best-practice-performance.html)”，以及“[生产最佳实践：安全性](https://expressjs.com/en/advanced/best-practice-security.html)”。
+> [!NOTE]
+> Express 文档中还有其他有用的提示 - 请参阅“[生产最佳实践：性能和可靠性](https://expressjs.com/en/advanced/best-practice-performance.html)”，以及“[生产最佳实践：安全性](https://expressjs.com/en/advanced/best-practice-security.html)”。
### 设置 NODE_ENV 为 'production'
@@ -99,7 +104,8 @@ slug: Learn/Server-side/Express_Nodejs/deployment
可以使用导出或环境文件，或使用 OS 初始化系统，以进行此更改。
-> **备注：** 这实际上是在环境设置，而不是应用中所做的更改，但重要的是，要注意这里！我们将在下面，展示如何为我们的托管示例设置。
+> [!NOTE]
+> 这实际上是在环境设置，而不是应用中所做的更改，但重要的是，要注意这里！我们将在下面，展示如何为我们的托管示例设置。
### Log appropriately
@@ -134,7 +140,8 @@ set DEBUG=author,book
export DEBUG="author,book"
```
-> **备注：** 调用`debug`可以替换你以前使用`console.log()`或`console.error()`执行的日志记录。通过调试模块[debug](https://www.npmjs.com/package/debug)进行日志记录，替换代码中的所有`console.log()`调用。通过设置 DEBUG 变量，并在其中记录对日志记录的影响，在开发环境中，打开和关闭日志记录。
+> [!NOTE]
+> 调用`debug`可以替换你以前使用`console.log()`或`console.error()`执行的日志记录。通过调试模块[debug](https://www.npmjs.com/package/debug)进行日志记录，替换代码中的所有`console.log()`调用。通过设置 DEBUG 变量，并在其中记录对日志记录的影响，在开发环境中，打开和关闭日志记录。
如果你需要记录网站活动，可以使用 Winston 或 Bunyan 等日志库。有关此主题的更多信息，请参阅：[生产最佳实践：性能和可靠性](https://expressjs.com/en/advanced/best-practice-performance.html)。
@@ -170,7 +177,8 @@ app.use('/catalog', catalogRouter); // Add catalog routes to middleware chain.
...
```
-> **备注：** 对于生产中流量较大的网站，你不会使用此中间件。相反，你会使用像 Nginx 这样的反向代理。
+> [!NOTE]
+> 对于生产中流量较大的网站，你不会使用此中间件。相反，你会使用像 Nginx 这样的反向代理。
### 使用 Helmet 避免被常见漏洞侵袭
@@ -195,7 +203,8 @@ app.use(helmet());
...
```
-> **备注：** 上面的命令，添加了对大多数站点有意义的可用标头子集。你可以按照[npm](https://www.npmjs.com/package/helmet)上的说明，根据需要添加/禁用特定标头。
+> [!NOTE]
+> 上面的命令，添加了对大多数站点有意义的可用标头子集。你可以按照[npm](https://www.npmjs.com/package/helmet)上的说明，根据需要添加/禁用特定标头。
## 例子：在 Heroku 上安装一个本地图书馆
@@ -238,7 +247,8 @@ Heroku 在一个或多个“[Dynos](https://devcenter.heroku.com/articles/dynos)
Heroku 与 **git** 源代码版本控制系统紧密集成，使用它来上传/同步你对实时运行系统所做的任何更改。它通过添加一个名为 heroku 的新 Heroku“远程”存储库，来指向你在 Heroku 云上的源存储库。在开发期间，你使用 git 在“主”存储库 master 中存储更改。如果要部署站点，请将更改同步到 Heroku 存储库。
-> **备注：** 如果你习惯于遵循良好的软件开发实践，那么你可能已经在使用 git 或其他一些 SCM 系统。如果你已有 git 存储库，则可以跳过此步骤。
+> [!NOTE]
+> 如果你习惯于遵循良好的软件开发实践，那么你可能已经在使用 git 或其他一些 SCM 系统。如果你已有 git 存储库，则可以跳过此步骤。
有很多方法可以使用 git，但最简单的方法之一，是首先在[GitHub](https://github.com/)上建立一个帐户，在那里创建存储库，然后在本地同步它：
@@ -307,7 +317,8 @@ Heroku 与 **git** 源代码版本控制系统紧密集成，使用它来上传/
完成此操作后，你应该可以返回创建存储库的 Github 上的页面，刷新页面，并查看你的整个应用程序现已上传。使用此添加/提交/推送循环，你可以在文件更改时，继续更新存储库。
-> **备注：** 这是备份你的“vanilla”项目的好时机 - 虽然我们将在以下部分中进行的一些更改，可能对任何平台（或开发）上的部署有用，而一些其他的更改可能没有用。
+> [!NOTE]
+> 这是备份你的“vanilla”项目的好时机 - 虽然我们将在以下部分中进行的一些更改，可能对任何平台（或开发）上的部署有用，而一些其他的更改可能没有用。
>
> 执行此操作的最佳方法，是使用 git 来管理你的修订。使用 git，你不仅可以回到特定的旧版本，而且可以在生产变更的单独“分支”中进行维护，并选择在生产和开发分支之间移动的任何更改。[学习 Git](https://help.github.com/articles/good-resources-for-learning-git-and-github/)非常值得，但超出了本主题的范围。
>
@@ -412,7 +423,8 @@ heroku help
heroku create
```
-> **备注：** 如果你愿意，可以在“创建”create 之后指定远程存储库的命名。如果你不这样做，你会得到一个随机的名字。该名称用于默认 URL。
+> [!NOTE]
+> 如果你愿意，可以在“创建”create 之后指定远程存储库的命名。如果你不这样做，你会得到一个随机的名字。该名称用于默认 URL。
然后，我们可以将我们的应用程序，推送到 Heroku 存储库，如下所示。这将上传应用程序，获取所有依赖项，将其打包到 dyno 中，然后启动该站点。
@@ -426,7 +438,8 @@ git push heroku master
heroku open
```
-> **备注：** 该站点将使用我们的开发数据库运行。创建一些书本和其他对象，并检查该网站是否按预期运行。在下一节中，我们将其设置为使用我们的新数据库。
+> [!NOTE]
+> 该站点将使用我们的开发数据库运行。创建一些书本和其他对象，并检查该网站是否按预期运行。在下一节中，我们将其设置为使用我们的新数据库。
### 设定配置变量
diff --git a/files/zh-cn/learn/server-side/express_nodejs/development_environment/index.md b/files/zh-cn/learn/server-side/express_nodejs/development_environment/index.md
index 06fa88e780e431..5305975a4a1101 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/development_environment/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/development_environment/index.md
@@ -32,7 +32,8 @@ Node 和 NPM 包管理器可以用二进制包、安装程序或系统包管理
NPM 也可以安装（全局的）**Express 应用生成器**，可用于创建遵循 [MVC 模式](/zh-CN/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture) 的 Express 应用框架。它不是必备的，因为无需这个工具就可以创建 Express 应用（或相同架构布局或依赖的 Express 应用）。但我们还是会使用它，因为它更容易上手，还有助于应用结构的模块化管理。
-> **备注：** 与某些其他 Web 框架不同，开发环境不包含单独的开发 Web 服务器。在 Node / Express 中，Web 应用程序将创建并运行自己的 Web 服务器！
+> [!NOTE]
+> 与某些其他 Web 框架不同，开发环境不包含单独的开发 Web 服务器。在 Node / Express 中，Web 应用程序将创建并运行自己的 Web 服务器！
典型的开发环境中还需要一些外围工具，包括用于编写代码的 [文本编辑器](/zh-CN/docs/Learn/Common_questions/实用文本编辑器) 或 IDE，用于代码控制管理的工具（比如代码版本控制工具 [Git](https://git-scm.com/)）。这里假定你已经安装了这些工具（尤其是文本编辑器）。
@@ -58,7 +59,8 @@ Express 应选用最新版本。
先在操作系统上安装 Node.js 和 NPM 后才可使用 Express。接下来将介绍如何最简便地在 Ubuntu 18.04、macOS Mojave 以及 Windows 10 上安装 Node.js 最新的 LTS 版本。.
-> **备注：** 以下内容将介绍在上述三种 OS 上安装 Node 和 NPM 的最简便方法。对于其他操作系统，以及更多的安装方法，可以参考 [通过包管理器方式安装 Node.js](https://nodejs.org/zh-cn/download/package-manager/) (nodejs.org).
+> [!NOTE]
+> 以下内容将介绍在上述三种 OS 上安装 Node 和 NPM 的最简便方法。对于其他操作系统，以及更多的安装方法，可以参考 [通过包管理器方式安装 Node.js](https://nodejs.org/zh-cn/download/package-manager/) (nodejs.org).
### Windows 和 macOS
@@ -80,7 +82,8 @@ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt-get install -y nodejs
```
-> **警告：** 直接从 Ubuntu 默认仓库中下载的 Node 是 8.x 版本的。
+> [!WARNING]
+> 直接从 Ubuntu 默认仓库中下载的 Node 是 8.x 版本的。
### 测试 Node.js 和 NPM 是否安装成功
@@ -126,7 +129,8 @@ $ npm -v
代码导入了 `"http"` 模块，并用它（`createServer()`）创建了一个服务器来监听 3000 端口的 HTTP 请求。随后在控制台打印一条信息，提示测试服务器的正确 URL。`createServer()` 函数接受一个回调函数作为参数，并在接收 HTTP 请求后进行回调。直接返回了 HTTP 状态码 200（"`OK`"），以及纯文本信息 "Hello World"。
- > **备注：** 现在看不懂这些代码请不要担心，开始使用 Express 后候会进行更加详细的解释。
+ > [!NOTE]
+ > 现在看不懂这些代码请不要担心，开始使用 Express 后候会进行更加详细的解释。
2. 在命令行工具中进入 hellonode.js 文件所在的目录，输入“node + 文件名”并运行，服务器就启动了：
@@ -141,7 +145,8 @@ $ npm -v
构建 Node 应用过程中，[NPM](https://docs.npmjs.com/) 是除了 Node 本身之外最重要的工具。可用于获取应用开发、测试以及生产所需的所有包（JavaScript 库）。也可运行开发过程中使用的测试单元和工具。
-> **备注：** 以 Node 的角度来看，Express 只是一个用 NPM 安装、供人使用的包而已。
+> [!NOTE]
+> 以 Node 的角度来看，Express 只是一个用 NPM 安装、供人使用的包而已。
可以用 NPM 手动逐个安装所需包。但通常可用 [package.json](https://docs.npmjs.com/files/package.json) 文件来管理依赖。把每个依赖以一个 JavaScript“包”的形式（其中包括名称、版本、描述，初始执行文件、生产依赖，开发依赖、支持的 _Node_ 版本，等等）罗列在这个文件中。package.json 文件包含 NPM 获取和运行应用程序所需的所有内容（在编写可重用的库时，可以用它把包上传到 NPM 仓库中供其他用户使用）。
@@ -149,7 +154,8 @@ $ npm -v
下面介绍用 NPM 下载包、将包保存进工程依赖树，以及在 Node 应用中调用包的方法和步骤。
-> **备注：** 现在来讲解获取和安装 Express 包的步骤。稍后解释为什么可以直接对 Express 包（乃至其他包）使用 **Express 应用生成器**。这段对理解 NPM 的工作原理和应用生成器的工作机制有一定的帮助。
+> [!NOTE]
+> 现在来讲解获取和安装 Express 包的步骤。稍后解释为什么可以直接对 Express 包（乃至其他包）使用 **Express 应用生成器**。这段对理解 NPM 的工作原理和应用生成器的工作机制有一定的帮助。
1. 首先为新应用创建一个目录，并进入它：
@@ -249,7 +255,8 @@ npm install eslint --save-dev
}
```
-> **备注：** "[lint](https://zh.wikipedia.org/wiki/Lint)" 是用于对软件进行静态分析的工具，可以发现并报告软件是否遵循某些最佳编程惯例。
+> [!NOTE]
+> "[lint](https://zh.wikipedia.org/wiki/Lint)" 是用于对软件进行静态分析的工具，可以发现并报告软件是否遵循某些最佳编程惯例。
### 运行任务
@@ -297,7 +304,8 @@ npm install express-generator -g
express helloworld
```
-> **备注：** 也可以指定模板库来使用其他丰富的设置。可通过 help 命令来查看所有选项：
+> [!NOTE]
+> 也可以指定模板库来使用其他丰富的设置。可通过 help 命令来查看所有选项：
>
> ```bash
> $ express --help
@@ -305,7 +313,8 @@ express helloworld
NPM 将在当前位置的子目录中创建新的 Express 应用，可以在控制台看到构建的过程。在完成时，NPM 会提示你需要安装哪些 Node 依赖，以及如何开启应用。
-> **备注：** 新应用的根目录有一个 **package.json** 文件。可以打开它看看都安装了哪些依赖，其中可以看到 Express 和 Jade 模板库：
+> [!NOTE]
+> 新应用的根目录有一个 **package.json** 文件。可以打开它看看都安装了哪些依赖，其中可以看到 Express 和 Jade 模板库：
>
> ```js
> {
diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md
index ea83ba3741163a..d357fd54a6e3e2 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md
@@ -87,7 +87,8 @@ block content
-> **备注：** 作者的出生与死亡日期的外观很丑！我们将在本文最后的自我挑战处理它。
+> [!NOTE]
+> 作者的出生与死亡日期的外观很丑！我们将在本文最后的自我挑战处理它。
## 下一步
diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_list_page/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_list_page/index.md
index d37f3a23181fac..4115aa8f725af7 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_list_page/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_list_page/index.md
@@ -59,7 +59,8 @@ block content
-> **备注：** 作者生命日期的外观是丑陋的！你可以使用我们用于`BookInstance` 列表的[相同方法](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data#date_formatting)（将生命周期的虚拟属性，添加到 `Author` 模型），来改进此方法。
+> [!NOTE]
+> 作者生命日期的外观是丑陋的！你可以使用我们用于`BookInstance` 列表的[相同方法](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data#date_formatting)（将生命周期的虚拟属性，添加到 `Author` 模型），来改进此方法。
>
> 但是，这次缺少日期，除非严格模式生效，否则将忽略对不存在的属性的引用。`moment()`返回当前时间，并且你不希望将缺少的日期格式化为就像今天一样。
>
diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.md
index ae6d60c0fab626..e450f5592d5d5c 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.md
@@ -33,7 +33,8 @@ exports.book_detail = asyncHandler(async (req, res, next) => {
});
```
-> **备注：** 我们不需要用 require 导入任何额外的模块，因为我们在实现主页控制器时已经导入了依赖项。
+> [!NOTE]
+> 我们不需要用 require 导入任何额外的模块，因为我们在实现主页控制器时已经导入了依赖项。
此方法与[类别详细信息页面](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page)描述的方法完全相同。路由控制器函数使用 `Promise.all()` 并行查询指定的书籍（`Book`）以及它的相关副本（`BookInstance`）。如果没有找到匹配的书籍，就会返回一个带有“404: Not Found”错误的 Error 对象。如果找到了书籍，那么就会使用“book_detail”模板呈现检索到的数据库信息。由于“title”键用于给网页命名（如“layout.pug”中定义的标题），所以这次我们在渲染网页时传递了 `results.book.title`。
@@ -80,7 +81,8 @@ block content
在这个模板中，几乎所有内容都在先前的章节演示过了。
-> **备注：** 与本书相关的类别列表在模板中的实现如下。除了最后一个之外，这会在与本书相关的每个类别后面添加一个逗号。
+> [!NOTE]
+> 与本书相关的类别列表在模板中的实现如下。除了最后一个之外，这会在与本书相关的每个类别后面添加一个逗号。
>
> ```pug
> p #[strong Genre:]
diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/book_list_page/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/book_list_page/index.md
index 5a9f3a1b1faf80..f32e01a6e9ced2 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/book_list_page/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/book_list_page/index.md
@@ -52,7 +52,8 @@ block content
這个视图扩展了 **layout.pug** 基本模板，并覆盖了名为 '**content**' 的區块 `block` 。它显示我们从控制器传入的标题`title`（通过`render()`方法），然后使用`each`-`in`-`else`语法，遍历`book_list`变量。为每本图书创建一个列表项，以显示书名，并作为书的详细信息页面的链接，后面跟着作者姓名。如果`book_list`中没有书，则执行`else`子句，并显示文字“没有书” 'There are no books.'。
-> **备注：** 我们使用 `book.url` ，为每本书提供详细记录链接（我们已经实现了此路由，但尚未实现此页面）。这是 `Book` 模型的一个虚拟属性，它使用模型实例的 `_id` 字段，生成唯一的 URL 路径。
+> [!NOTE]
+> 我们使用 `book.url` ，为每本书提供详细记录链接（我们已经实现了此路由，但尚未实现此页面）。这是 `Book` 模型的一个虚拟属性，它使用模型实例的 `_id` 字段，生成唯一的 URL 路径。
在这里，我們感兴趣的是，每本书被定义为两行，第二行使用管道（上面高亮显示）。这种方法是必要的，因为如果作者姓名位于上一行，那么它将成为超链接的一部分。
diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.md
index c6ffaff99fe938..1819fb34264377 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.md
@@ -76,7 +76,8 @@ block content
目前，我们网站上显示的大多数日期，都使用默认的 JavaScript 格式（例如 _Tue Dec 06 2016 15:49:58 GMT+1100_（AUS 东部夏令时间）。本文的挑战，是改善作者`Author`生命周期日期显示的外观信息（死亡/出生日期）和 BookInstance 详细信息页面，使用格式：December 6th, 2016。
-> **备注：** 你可以使用与我们用于 Book Instance List 的相同方法（将生命周期的虚拟属性，添加到`Author`模型，并使用[moment](https://www.npmjs.com/package/moment)来设置日期字符串的格式）。
+> [!NOTE]
+> 你可以使用与我们用于 Book Instance List 的相同方法（将生命周期的虚拟属性，添加到`Author`模型，并使用[moment](https://www.npmjs.com/package/moment)来设置日期字符串的格式）。
这一挑战的要求：
diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md
index e94069f3b1f2d1..a4fa838d3ecf92 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md
@@ -7,7 +7,8 @@ slug: Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_mom
我们将使用的方法，是在我们的`BookInstance`模型中，创建一个返回格式化日期的虚拟屬性。我们将使用[moment](https://www.npmjs.com/package/moment) 来做实际的格式化，这是一个轻量级 JavaScript 日期库，用于解析，验证，操作和格式化日期。
-> **备注：** 我们可以直接在 Pug 模板中，使用 _moment_ 格式化字符串，或者可以在许多其他地方格式化字符串。使用虚拟属性，可以使我们获得格式化的日期，這与我们当前获取 `due_date` 的方式完全相同。
+> [!NOTE]
+> 我们可以直接在 Pug 模板中，使用 _moment_ 格式化字符串，或者可以在许多其他地方格式化字符串。使用虚拟属性，可以使我们获得格式化的日期，這与我们当前获取 `due_date` 的方式完全相同。
## 安装 moment
@@ -34,7 +35,8 @@ BookInstanceSchema.virtual("due_back_formatted").get(function () {
});
```
-> **备注：** 格式化方法可以使用几乎任何模式显示日期。[moment 文档](http://momentjs.com/docs/#/displaying/)中，可以找到表示不同日期组件的语法。
+> [!NOTE]
+> 格式化方法可以使用几乎任何模式显示日期。[moment 文档](http://momentjs.com/docs/#/displaying/)中，可以找到表示不同日期组件的语法。
## 更新视图
diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.md
index 1b250402bf828f..4d0c460890e3d5 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.md
@@ -54,7 +54,8 @@ exports.genre_detail = function (req, res, next) {
所需种类记录的 ID，在 URL 的末尾编码，并根据路由定义（**/genre/:id**）自动提取。通过请求参数（`req.params.id`）在控制器内访问 ID。它在 `Genre.findById()` 中用于获取当前种类。它还用于获取符合当前种类的所有`Book`对象，就是在种类字段中具有种类 ID 的那些 `Book.find({ 'genre': req.params.id })`。
-> **备注：** 如果数据库中不存在该类型（即它可能已被删除），则`findById()`将成功返回，但没有结果。在这种情况下，我们想要显示一个“未找到”页面，因此我们创建一个`Error`对象，并将其传递给链中的下一个中间件函数`next`。
+> [!NOTE]
+> 如果数据库中不存在该类型（即它可能已被删除），则`findById()`将成功返回，但没有结果。在这种情况下，我们想要显示一个“未找到”页面，因此我们创建一个`Error`对象，并将其传递给链中的下一个中间件函数`next`。
>
> ```js
> if (results.genre == null) {
@@ -102,7 +103,8 @@ block content
-> **备注：** 你可能会收到与此类似的错误：
+> [!NOTE]
+> 你可能会收到与此类似的错误：
>
> ```bash
> Cast to ObjectId failed for value " 59347139895ea23f9430ecbb" at path "_id" for model "Genre"
diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/home_page/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/home_page/index.md
index 843a17ee270492..8d38fc3b85ed46 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/home_page/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/home_page/index.md
@@ -107,7 +107,8 @@ block content
在动态内容标题下，我们检查从`render()`函数传入的错误变量，是否已定义。如果是这样，我们列出这个错误。如果不是，我们从`data`变量中，获取并列出每个模型的副本数量。
-> **备注：** 我们没有转义计数值 (i.e. 我们使用 `!{}` 语法) ，因为计数值已经被计算过了。如果信息是由终端用户提供的，那么我们就会转义該变量，以用于显示。
+> [!NOTE]
+> 我们没有转义计数值 (i.e. 我们使用 `!{}` 语法) ，因为计数值已经被计算过了。如果信息是由终端用户提供的，那么我们就会转义該变量，以用于显示。
## 它看起来像是？
@@ -115,7 +116,8 @@ block content
-> **备注：** 你将无法使用侧边栏链接，因为这些网页的网址，视图和模板尚未定义。例如，如果你尝试，取决于你点击的链接，你将获取“NOT IMPLEMENTED: Book list”等错误。在“控制器”文件中的不同控制器中，会指定这些字符串文字（将被合适的数据替换）。
+> [!NOTE]
+> 你将无法使用侧边栏链接，因为这些网页的网址，视图和模板尚未定义。例如，如果你尝试，取决于你点击的链接，你将获取“NOT IMPLEMENTED: Book list”等错误。在“控制器”文件中的不同控制器中，会指定这些字符串文字（将被合适的数据替换）。
## 下一步
diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/template_primer/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/template_primer/index.md
index 599b4c9a230cc1..6308b7ae551e3e 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/template_primer/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/template_primer/index.md
@@ -11,7 +11,8 @@ Express 可以与许多不同的[模板渲染引擎](https://expressjs.com/en/gu
不同的模板语言使用不同的方法，来定义布局和标记数据的占位符 — 一些使用 HTML 来定义布局，而另一些则使用可以编译为 HTML 的不同标记格式。Pug 是第二种类型；它使用 HTML 的表示形式，其中任何行中的第一个单词，通常表示 HTML 元素，后续行中的缩进，用于表示嵌套在这些元素中的任何内容。结果是一个页面定义直接转换为 HTML，但可以说更简洁，更容易阅读。
-> **备注：** 使用 Pug 的缺点，是它对缩进和空格敏感（如果在错误的位置添加额外的空格，可能会得到没什么帮助的错误代码）。但是，一旦你的模板到位，它们就很容易阅读和维护。
+> [!NOTE]
+> 使用 Pug 的缺点，是它对缩进和空格敏感（如果在错误的位置添加额外的空格，可能会得到没什么帮助的错误代码）。但是，一旦你的模板到位，它们就很容易阅读和维护。
## 模板组态
@@ -98,7 +99,8 @@ p This is a line with #[em some emphasis] and #[strong strong text] markup.
p This line has an un-escaped string: !{' is emphasised '}, an escaped string: #{' is not emphasised '}, and escaped variables: #{title}.
```
-> **备注：** 你几乎总是希望转义来自用户的数据（通过 **`#{}`** 语法）。可信任的数据（例如，生成的记录计数等）可以不先转义就显示。
+> [!NOTE]
+> 你几乎总是希望转义来自用户的数据（通过 **`#{}`** 语法）。可信任的数据（例如，生成的记录计数等）可以不先转义就显示。
你可以在行的开头使用管道（“**|**”）字符来表示“[纯文本](https://pugjs.org/language/plain-text.html)”。例如，下面显示的附加文本，将显示在与前一个锚点相同的行上，但不会链接。
diff --git a/files/zh-cn/learn/server-side/express_nodejs/forms/create_author_form/index.md b/files/zh-cn/learn/server-side/express_nodejs/forms/create_author_form/index.md
index d93b8646a2813c..4820a3bf71782b 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/forms/create_author_form/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/forms/create_author_form/index.md
@@ -97,7 +97,8 @@ exports.author_create_post = [
此代码的结构和行为，几乎与创建`Genre`对象完全相同。首先，我们验证并清理数据。如果数据无效，那么我们将重新显示表单，以及用户最初输入的数据，和错误消息列表。如果数据有效，那么我们保存新的作者记录，并将用户重定向到作者详细信息页面。
-> **备注：** 与`Genre` post 处理程序不同，我们不会在保存之前，检查`Author`对象是否已存在。可以说，我们应该这样做，尽管现在我们可以有多个具有相同名称的作者。
+> [!NOTE]
+> 与`Genre` post 处理程序不同，我们不会在保存之前，检查`Author`对象是否已存在。可以说，我们应该这样做，尽管现在我们可以有多个具有相同名称的作者。
验证代码演示了几个新功能：
@@ -149,7 +150,8 @@ block content
此视图的结构和行为与**genre_form.pug**模板完全相同，因此我们不再对其进行描述。
-> **备注：** 某些浏览器不支持 input `type=“date”`，因此你不会获得日期选取部件或默认的*`dd/mm/yyyy`*占位符，而是获取一个空的纯文本字段。一种解决方法，是明确添加属性`placeholder='dd/mm/yyyy'`，以便在功能较少的浏览器上，仍然可以获得有关所需文本格式的信息。
+> [!NOTE]
+> 某些浏览器不支持 input `type=“date”`，因此你不会获得日期选取部件或默认的*`dd/mm/yyyy`*占位符，而是获取一个空的纯文本字段。一种解决方法，是明确添加属性`placeholder='dd/mm/yyyy'`，以便在功能较少的浏览器上，仍然可以获得有关所需文本格式的信息。
### 自我挑战：加入死亡日期
@@ -161,7 +163,8 @@ block content
-> **备注：** 如果你尝试使用日期的各种输入格式，你可能会发现格式`yyyy-mm-dd`行为不正常。这是因为 JavaScript 将日期字符串，视为包含 0 小时的时间，但另外将该格式的日期字符串（ISO 8601 标准）视为包括 0 小时 UTC 时间，而不是本地时间。如果你的时区在 UTC 以西，则日期显示（即本地）将在你输入的日期之前一天。这是我们在这里没有解决的几个复杂问题之一（例如多字姓和有多个作者的书本）。
+> [!NOTE]
+> 如果你尝试使用日期的各种输入格式，你可能会发现格式`yyyy-mm-dd`行为不正常。这是因为 JavaScript 将日期字符串，视为包含 0 小时的时间，但另外将该格式的日期字符串（ISO 8601 标准）视为包括 0 小时 UTC 时间，而不是本地时间。如果你的时区在 UTC 以西，则日期显示（即本地）将在你输入的日期之前一天。这是我们在这里没有解决的几个复杂问题之一（例如多字姓和有多个作者的书本）。
## 下一步
diff --git a/files/zh-cn/learn/server-side/express_nodejs/forms/create_book_form/index.md b/files/zh-cn/learn/server-side/express_nodejs/forms/create_book_form/index.md
index c8163f15775364..36eb27bc6ee929 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/forms/create_book_form/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/forms/create_book_form/index.md
@@ -225,7 +225,9 @@ block content
- 种类集合显示为复选框，使用我们在控制器中设置的检查值 `checked`，来确定是否应该选中该框。
- 作者集合显示为单选下拉列表。在这种情况下，我们通过比较当前作者选项的 id 与用户先前输入的值（作为 `book` 变量传入），来确定要显示的作者。这在上面突出显示！
- > **备注：** 如果提交的表单中存在错误，那么，当要重新呈现表单时，新的书本作者仅使用字符串（作者列表中选中选项的值）进行标识。相比之下，现有的书本作者的 `_id` 属性不是字符串。因此，要比较新的和现有的，我们必须将每个现有书本作者的 `_id`，强制转换为字符串，如上所示。
+ > [!NOTE]
+ >
+ > 如果提交的表单中存在错误，那么，当要重新呈现表单时，新的书本作者仅使用字符串（作者列表中选中选项的值）进行标识。相比之下，现有的书本作者的 `_id` 属性不是字符串。因此，要比较新的和现有的，我们必须将每个现有书本作者的 `_id`，强制转换为字符串，如上所示。
## 它看起來像是？
diff --git a/files/zh-cn/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.md b/files/zh-cn/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.md
index b86a351be28571..b7e2b2f669d66a 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.md
@@ -150,7 +150,8 @@ block content
这个视图的结构和行为，几乎等同于 **book_form.pug** 模板，因此我们就不再重覆说明一次了。
-> **备注：** 以上的模板将状态值 (Maintenance, Available, 等等) 写死在代码里，而且不能 "记忆" 使用者的输入值。如果你愿意的话，考虑重新实作此列表，当表单被重新呈现时，从控制器传入选项数据，并设定选中的值。
+> [!NOTE]
+> 以上的模板将状态值 (Maintenance, Available, 等等) 写死在代码里，而且不能 "记忆" 使用者的输入值。如果你愿意的话，考虑重新实作此列表，当表单被重新呈现时，从控制器传入选项数据，并设定选中的值。
## 它看起來像是？
diff --git a/files/zh-cn/learn/server-side/express_nodejs/forms/create_genre_form/index.md b/files/zh-cn/learn/server-side/express_nodejs/forms/create_genre_form/index.md
index 0160ef3fa7da7b..8d6fbfee733623 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/forms/create_genre_form/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/forms/create_genre_form/index.md
@@ -84,7 +84,8 @@ exports.genre_create_post = [
首先要注意的是，控制器不是单个中间件函数（带参数（`req, res, next`）），而是指定一组中间件函数。数组传递给路由器函数，并按顺序调用每个方法。
-> **备注：** 这种方法是必需的，因为消毒/验证器是中间件功能。
+> [!NOTE]
+> 这种方法是必需的，因为消毒/验证器是中间件功能。
数组中的第一个方法定义了一个验证器（`body`），来检查 name 字段是否为空（在执行验证之前调用`trim()`，以删除任何尾随/前导空格）。
@@ -98,7 +99,8 @@ body('name', 'Genre name required').isLength({ min: 1 }).trim(),
sanitizeBody('name').trim().escape(),
```
-> **备注：** 验证期间运行的清洁器不会修改请求。这就是为什么我们必须在上面的两个步骤中调用`trim()`！
+> [!NOTE]
+> 验证期间运行的清洁器不会修改请求。这就是为什么我们必须在上面的两个步骤中调用`trim()`！
在指定验证器和清理器之后，我们创建了一个中间件函数，来提取任何验证错误。我们使用`isEmpty()` 来检查验证结果中，是否有任何错误。如果有，那么我们再次渲染表单，传入我们的已清理种类对象和错误消息的数组（`errors.array()`）。
@@ -196,7 +198,8 @@ block content
页面的最后一部分是错误代码。如果已定义错误变量，则只会打印错误列表（换句话说，当模板在`GET`路由上呈现时，此部分不会出现）。
-> **备注：** 这只是呈现错误的一种方法。你还可以从错误变量中，获取受影响字段的名称，并使用这些，来控制错误消息的呈现位置，以及是否应用自定义 CSS 等。
+> [!NOTE]
+> 这只是呈现错误的一种方法。你还可以从错误变量中，获取受影响字段的名称，并使用这些，来控制错误消息的呈现位置，以及是否应用自定义 CSS 等。
## 它看起來像是？
@@ -208,7 +211,8 @@ block content
-> **备注：** 我们的验证使用`trim()`，来确保不接受空格作为种类名称。我们还可以在表单中 的字段定义中，添加值`required='true'`，来验证客户端字段不为空：
+> [!NOTE]
+> 我们的验证使用`trim()`，来确保不接受空格作为种类名称。我们还可以在表单中 的字段定义中，添加值`required='true'`，来验证客户端字段不为空：
>
> ```js
> input#name.form-control(type='text', placeholder='Fantasy, Poetry etc.' name='name' value=(undefined===genre ? '' : genre.name), required='true' )
diff --git a/files/zh-cn/learn/server-side/express_nodejs/forms/delete_author_form/index.md b/files/zh-cn/learn/server-side/express_nodejs/forms/delete_author_form/index.md
index 2cbc5490c21e33..7199e86c47cbd6 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/forms/delete_author_form/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/forms/delete_author_form/index.md
@@ -44,7 +44,8 @@ exports.author_delete_get = function (req, res, next) {
控制器从 URL 参数（`req.params.id`）中，获取要删除的 `Author` 实例的 id。它使用 `async.parallel()` 方法，并行获取作者记录和所有相关书本。当两个操作都完成后，它将呈现 **author_delete.pug** 视图，为 `title`、`author` 和 `author_books` 传递变量。
-> **备注：** 如果`findById()`返回“没有结果”，则作者不在数据库中。在这种情况下，没有什么可以删除，所以我们立即呈现所有作者的列表。
+> [!NOTE]
+> 如果`findById()`返回“没有结果”，则作者不在数据库中。在这种情况下，没有什么可以删除，所以我们立即呈现所有作者的列表。
>
> ```js
> }, function(err, results) {
@@ -100,7 +101,8 @@ exports.author_delete_post = function (req, res, next) {
首先，我们验证是否已提供 id（这是通过表单主体参数发送的，而不是使用 URL 中的版本）。然后我们以与 `GET` 路由相同的方式，获得作者及其相关书本。如果没有书本，那么我们删除作者对象，并重定向到所有作者的列表。如果还有书本，那么我们只需重新呈现表格，传递作者和要删除的书本列表。
-> **备注：** 我们可以检查对 `findById()` 的调用，是否返回任何结果，如果没有，则立即呈现所有作者的列表。为简洁起见，我们将代码保留在上面（如果找不到 id，它仍会返回作者列表，但这将在 `findByIdAndRemove()` 之后发生）。
+> [!NOTE]
+> 我们可以检查对 `findById()` 的调用，是否返回任何结果，如果没有，则立即呈现所有作者的列表。为简洁起见，我们将代码保留在上面（如果找不到 id，它仍会返回作者列表，但这将在 `findByIdAndRemove()` 之后发生）。
## 视图
@@ -146,7 +148,8 @@ block content
接下来，我们将向 Author 详细视图添加 **Delete** 控件（详细信息页面是删除记录的好地方）。
-> **备注：** 在完整实现中，控件将仅对授权用户可见。但是在这个时间点上，我们还没有一个授权系统！
+> [!NOTE]
+> 在完整实现中，控件将仅对授权用户可见。但是在这个时间点上，我们还没有一个授权系统！
打开 **author_detail.pug** 视图，并在底部添加以下行。
@@ -172,7 +175,8 @@ p
-> **备注：** 其他删除对象的页面，可以用相同的方式实现。我们把它留下，作为挑战。
+> [!NOTE]
+> 其他删除对象的页面，可以用相同的方式实现。我们把它留下，作为挑战。
## 下一步
diff --git a/files/zh-cn/learn/server-side/express_nodejs/forms/index.md b/files/zh-cn/learn/server-side/express_nodejs/forms/index.md
index be9fb0d84e8862..6ab29bf1ed0b47 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/forms/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/forms/index.md
@@ -37,7 +37,8 @@ slug: Learn/Server-side/Express_Nodejs/forms
此教程将展示上述的操作，如何在 _Express_ 中实现。在此过程中，我们将扩展 LocalLibrary 网站，以允许用户创建，编辑和删除图书馆中的项目。
-> **备注：** 我们还没有考虑如何将特定路由，限制为经过身份验证或授权的用户，因此在这个时间点，任何用户都可以对数据库进行更改。
+> [!NOTE]
+> 我们还没有考虑如何将特定路由，限制为经过身份验证或授权的用户，因此在这个时间点，任何用户都可以对数据库进行更改。
### HTML 表单
@@ -114,7 +115,8 @@ npm install express-validator --save
#### 使用 express-validator
-> **备注：** Github 上的[express-validator](https://github.com/ctavan/express-validator#express-validator)指南，提供了 API 的良好概述。我们建议你阅读该内容，以了解其所有功能（包括创建自定义验证程序）。下面我们只介绍一个对 LocalLibrary 有用的子集。
+> [!NOTE]
+> Github 上的[express-validator](https://github.com/ctavan/express-validator#express-validator)指南，提供了 API 的良好概述。我们建议你阅读该内容，以了解其所有功能（包括创建自定义验证程序）。下面我们只介绍一个对 LocalLibrary 有用的子集。
要在我们的控制器中使用验证器，我们必须从'**express-validator/check**'和'**express-validator/filter**'模块中，导入我们想要使用的函数，如下所示：
@@ -141,7 +143,9 @@ const { sanitizeBody } = require("express-validator/filter");
.isAlpha().withMessage('Name must be alphabet letters.'),
```
- > **备注：** 你还可以添加内联清理器，如`trim()`，如上所示。但是，此处应用清理器，仅适用于验证步骤。如果要对最终输出进行消毒，则需要使用单独的清理器方法，如下所示。
+ > [!NOTE]
+ >
+ > 你还可以添加内联清理器，如`trim()`，如上所示。但是，此处应用清理器，仅适用于验证步骤。如果要对最终输出进行消毒，则需要使用单独的清理器方法，如下所示。
- [`sanitizeBody(fields)`](https://github.com/ctavan/express-validator#sanitizebodyfields): 指定一个正文要清理的字段。然后将清理操作，以菊花链形式连接到此方法。例如，下面的`escape()`清理操作，会从名称变量中，删除可能在 JavaScript 跨站点脚本攻击中使用的 HTML 字符。
@@ -197,7 +201,8 @@ const { sanitizeBody } = require("express-validator/filter");
哦，如果你涉及文件上传，那么你可能需要“[multer](https://blog.csdn.net/qq_43624878/article/details/103607944)”中间件，你大概听说过“formidable”，但 multer 比它更强大！
-> **备注：** 更“牢固”的实现，可能允许你在创建新对象时创建依赖对象，并随时删除任何对象（例如，通过删除依赖对象，或从数据库中，删除对已删除对象的引用） 。
+> [!NOTE]
+> 更“牢固”的实现，可能允许你在创建新对象时创建依赖对象，并随时删除任何对象（例如，通过删除依赖对象，或从数据库中，删除对已删除对象的引用） 。
### 路由
diff --git a/files/zh-cn/learn/server-side/express_nodejs/forms/update_book_form/index.md b/files/zh-cn/learn/server-side/express_nodejs/forms/update_book_form/index.md
index a5b556300cdf17..91c3b0ddc08313 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/forms/update_book_form/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/forms/update_book_form/index.md
@@ -187,7 +187,8 @@ exports.book_update_post = [
option(value=author._id) #{author.name}
```
-> **备注：** 此处代码的更动，是为了让书本表单 book_form，能被创建和更新书本的对象共同使用 (如果不这么做，当创建表单时，在 `GET` 路由会发生一个错误)。
+> [!NOTE]
+> 此处代码的更动，是为了让书本表单 book_form，能被创建和更新书本的对象共同使用 (如果不这么做，当创建表单时，在 `GET` 路由会发生一个错误)。
## 加入一个更新按钮
@@ -211,7 +212,8 @@ exports.book_update_post = [
-> **备注：** 其他更新对象的页面，也可以用同样的方式处理。我们把这些更新页面的实作留下，做为自我挑战。
+> [!NOTE]
+> 其他更新对象的页面，也可以用同样的方式处理。我们把这些更新页面的实作留下，做为自我挑战。
## 下一步
diff --git a/files/zh-cn/learn/server-side/express_nodejs/index.md b/files/zh-cn/learn/server-side/express_nodejs/index.md
index 2d8dba7aecfba3..b69ddb07773e19 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/index.md
@@ -11,7 +11,8 @@ Express 是一款受欢迎的开源 web 框架，构建语言是 JavaScript，
在开始这个模块之前你需要知道什么是服务端网页编程和 web 框架，建议你先阅读 [服务端网页编程](/zh-CN/docs/Learn/Server-side) 模块。强烈推荐了解编程概念和 [JavaScript](/zh-CN/docs/Web/JavaScript) ，但这对理解核心概念不是必需的。
-> **备注：** 这个网站有很多有用的资源用来学习 JavaScript 做客户端开发： [JavaScript](/zh-CN/docs/Web/JavaScript), [JavaScript Guide](/zh-CN/docs/Web/JavaScript/Guide), [JavaScript Basics](/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics), [JavaScript](/zh-CN/docs/Learn/JavaScript) (learning). 核心的 JavaScript 语言和概念用 Nodejs 服务端开发是相同的，也是相关的。Node.js 提供 [额外的 API](https://nodejs.org/dist/latest-v6.x/docs/api/) 用于支持在无浏览器环境中有用的功能，例如，创建 HTTP 服务器并访问文件系统，但不支持 JavaScript API 以使用浏览器和 DOM。
+> [!NOTE]
+> 这个网站有很多有用的资源用来学习 JavaScript 做客户端开发： [JavaScript](/zh-CN/docs/Web/JavaScript), [JavaScript Guide](/zh-CN/docs/Web/JavaScript/Guide), [JavaScript Basics](/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics), [JavaScript](/zh-CN/docs/Learn/JavaScript) (learning). 核心的 JavaScript 语言和概念用 Nodejs 服务端开发是相同的，也是相关的。Node.js 提供 [额外的 API](https://nodejs.org/dist/latest-v6.x/docs/api/) 用于支持在无浏览器环境中有用的功能，例如，创建 HTTP 服务器并访问文件系统，但不支持 JavaScript API 以使用浏览器和 DOM。
>
> 这篇指南将会提供一些 Node.js 和 Express 的信息，并且有很多优秀的网络资源和书籍。一些链接 比如[How do I get started with Node.js](http://stackoverflow.com/a/5511507/894359) (StackOverflow) 和 [What are the best resources for learning Node.js?](https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?) (Quora).
diff --git a/files/zh-cn/learn/server-side/express_nodejs/introduction/index.md b/files/zh-cn/learn/server-side/express_nodejs/introduction/index.md
index 644034216a8dda..d6a031cee2615a 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/introduction/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/introduction/index.md
@@ -98,7 +98,8 @@ Node 本身并不支持其他常见的 web 开发任务。如果需要进行一
虽然 Express 本身是极简风格的，但是开发人员通过创建各类兼容的中间件包解决了几乎所有的 web 开发问题。这些库可以实现 cookie、会话、用户登录、URL 参数、`POST` 数据、安全头等功能。可在 [Express 中间件](https://www.expressjs.com.cn/resources/middleware.html) 网页中找到由 Express 团队维护的中间件软件包列表（还有一张流行的第三方软件包列表）。
-> **备注：** 这种灵活性是一把双刃剑。虽然有一些中间件包可以解决几乎所有问题或需求，但是挑选合适的包有时也会成为一个挑战。这里构建应用没有“不二法门”，Internet 上许多示例也不是最优的，或者只展示了开发 web 应用所需工作的冰山一角。
+> [!NOTE]
+> 这种灵活性是一把双刃剑。虽然有一些中间件包可以解决几乎所有问题或需求，但是挑选合适的包有时也会成为一个挑战。这里构建应用没有“不二法门”，Internet 上许多示例也不是最优的，或者只展示了开发 web 应用所需工作的冰山一角。
## Node 和 Express 从哪儿来？
@@ -136,7 +137,8 @@ Express 是高度包容的。几乎可以将任何兼容的中间件以任意顺
首先来看 Express 的 [Hello World](https://www.expressjs.com.cn/starter/hello-world.html) 的示例（下文将逐行讨论）。
-> **备注：** 如果你已经安装了 Node 和 Express（或者你已经按照 [下一节](/zh-CN/docs/Learn/Server-side/Express_Nodejs/development_environment) 中的说明安装好了），可以将此代码保存为 **app.js**，并通过在 bash 中这样运行它：
+> [!NOTE]
+> 如果你已经安装了 Node 和 Express（或者你已经按照 [下一节](/zh-CN/docs/Learn/Server-side/Express_Nodejs/development_environment) 中的说明安装好了），可以将此代码保存为 **app.js**，并通过在 bash 中这样运行它：
>
> ```bash
> node ./app.js
@@ -174,7 +176,8 @@ const app = express();
还可以创建自定义模块，并用相同的方法导入。
-> **备注：** 你一定会有自建模块的**需求**，因为这可以让代码管理更有序。单文件应用是很难理解和维护的。使用模块还有助于管理名字空间，因为在使用模块时只会导入模块中显式导出的变量。
+> [!NOTE]
+> 你一定会有自建模块的**需求**，因为这可以让代码管理更有序。单文件应用是很难理解和维护的。使用模块还有助于管理名字空间，因为在使用模块时只会导入模块中显式导出的变量。
为了让对象暴露于模块之外，只需把它们设置为 `exports` 对象的附加属性即可。例如，下面的 **square.js** 模块就是一个导出了 `area()` 和 `perimeter()` 方法的文件：
@@ -195,7 +198,8 @@ const square = require("./square");
console.log("边长为 4 的正方形面积为 " + square.area(4));
```
-> **备注：** 为模块指定绝对路径（或模块的名字，见最初的示例）也是可行的。
+> [!NOTE]
+> 为模块指定绝对路径（或模块的名字，见最初的示例）也是可行的。
一次赋值不仅能构建一个单一的属性，还能构建一个完整的对象，可以像下面这样把对象赋值给 `module.exports`（也可以让 `exports` 对象直接作为一个构造器或另一个函数）：
@@ -210,7 +214,8 @@ module.exports = {
};
```
-> **备注：** 在一个既定的模块内，可以把 `exports` 想象成 `module.exports` 的 [快捷方式](https://nodejs.cn/api/modules.html#modules_exports_shortcut)。`exports` 本质上就是在模块初始化前为 `module.exports` 的值进行初始化的一个变量。这个值是对一个对象（这里是空对象）的引用。这意味着 `exports` 与 `module.exports` 引用了同一个对象，也意味着如果为 `exports` 赋其他值不会影响到 `module.exports`。
+> [!NOTE]
+> 在一个既定的模块内，可以把 `exports` 想象成 `module.exports` 的 [快捷方式](https://nodejs.cn/api/modules.html#modules_exports_shortcut)。`exports` 本质上就是在模块初始化前为 `module.exports` 的值进行初始化的一个变量。这个值是对一个对象（这里是空对象）的引用。这意味着 `exports` 与 `module.exports` 引用了同一个对象，也意味着如果为 `exports` 赋其他值不会影响到 `module.exports`。
更多信息请参阅 [模块](https://nodejs.cn/api/modules.html)（Node API 文档）。
@@ -236,9 +241,11 @@ console.log("第二");
有多种方法可以让一个异步 API 通知当前应用它已执行完毕。最常用的是在调用异步 API 时注册一个回调函数，在 API 操作结束后将“回调”之。这也是上面的代码所使用的方法。
-> **备注：** 如果有一系列独立的异步操作必须按顺序执行，那么使用回调可能会非常“混乱”，因为这会导致多级嵌套回调。人们通常把这个问题叫做“回调地狱”。缓解这个问题有以下办法：良好的编码实践（参考 `）。可以用路径参数来提取嵌入的信息，并传递给路由处理器（后续章节中用于动态获取数据库中的信息）。通过在 URL 中嵌入信息，使得每种类型的所有资源只需要一个路由（例如，所有藏书副本的显示操作只需要一个路由）。
-> **备注：** Express 可以通过任何方式构造 URL，可以在 URL 正文中嵌入信息（如上文），或使用 URL `GET` 参数（例如 `/book/?id=6`）。无论哪种方法，URL 都应保持整洁、合理且易读（另请参阅 [W3C 相关建议](https://www.w3.org/Provider/Style/URI)）。
+> [!NOTE]
+> Express 可以通过任何方式构造 URL，可以在 URL 正文中嵌入信息（如上文），或使用 URL `GET` 参数（例如 `/book/?id=6`）。无论哪种方法，URL 都应保持整洁、合理且易读（另请参阅 [W3C 相关建议](https://www.w3.org/Provider/Style/URI)）。
下面我们为上述所有 URL 创建路由处理器回调函数和路由代码。
@@ -201,7 +206,8 @@ app.get("/users/:userId/books/:bookId", (req, res) => {
genreController.js
```
-> **备注：** 上述四个文件可到 GitHub 下载 [dummyControllers.zip](https://github.com/roy-tian/mdn-examples/blob/master/server/express-locallibrary-tutorial/controllers/dummyControllers.zip)。（链接已失效，请移步英文版查看具体代码）
+> [!NOTE]
+> 上述四个文件可到 GitHub 下载 [dummyControllers.zip](https://github.com/roy-tian/mdn-examples/blob/master/server/express-locallibrary-tutorial/controllers/dummyControllers.zip)。（链接已失效，请移步英文版查看具体代码）
### `Author` 控制器
@@ -283,7 +289,8 @@ exports.index = (req, res) => { res.send('未实现：站点首页'); };
catalog.js
```
-> **备注：** 可到 GitHub 下载完整的 [catalog.js](https://raw.githubusercontent.com/roy-tian/mdn-examples/master/server/express-locallibrary-tutorial/routes/catalog.js)。
+> [!NOTE]
+> 可到 GitHub 下载完整的 [catalog.js](https://raw.githubusercontent.com/roy-tian/mdn-examples/master/server/express-locallibrary-tutorial/routes/catalog.js)。
**/routes/catalog.js** 中有以下代码：
@@ -350,7 +357,8 @@ router.get("/", (req, res) => {
});
```
-> **备注：** 这是我们第一次使用 [redirect()](https://expressjs.com/en/4x/api.html#res.redirect) 响应方法。它会使路由重定向到指定的页面，默认发送 HTTP 状态代码“302 Found”。可以根据需要更改返回的状态代码、设置绝对或相对路径。
+> [!NOTE]
+> 这是我们第一次使用 [redirect()](https://expressjs.com/en/4x/api.html#res.redirect) 响应方法。它会使路由重定向到指定的页面，默认发送 HTTP 状态代码“302 Found”。可以根据需要更改返回的状态代码、设置绝对或相对路径。
### 更新 app.js
@@ -372,7 +380,8 @@ app.use("/users", usersRouter);
app.use("/catalog", catalogRouter); // 将 catalog 路由添加进中间件链
```
-> **备注：** 我们将图书编目模块添加到了 `'/catalog'` 路径，该路径是 catalog 模块中所有路径的前缀。例如，访问藏书列表 的 URL 为：`/catalog/books/`。
+> [!NOTE]
+> 我们将图书编目模块添加到了 `'/catalog'` 路径，该路径是 catalog 模块中所有路径的前缀。例如，访问藏书列表 的 URL 为：`/catalog/books/`。
大功告成。LocalLibrary 网站所需的所有 URL 的路由和框架函数都已准备完毕。
@@ -392,7 +401,8 @@ app.use("/catalog", catalogRouter); // 将 catalog 路由添加进中间件链
DEBUG=express-locallibrary-tutorial:* npm run devstart
```
-> **备注：** 以上命令只对 bash 有效，要在 Windows 上使用 bash，最简单的方法就是安装 Git。（详情参见[教程 2 相关译注](/zh-CN/docs/Learn/Server-side/Express_Nodejs/skeleton_website#使用应用生成器)）
+> [!NOTE]
+> 以上命令只对 bash 有效，要在 Windows 上使用 bash，最简单的方法就是安装 Git。（详情参见[教程 2 相关译注](/zh-CN/docs/Learn/Server-side/Express_Nodejs/skeleton_website#使用应用生成器)）
接下来浏览上面一些 URL，确保不会收到错误页面（HTTP 404）。可以尝试以下示例：
diff --git a/files/zh-cn/learn/server-side/express_nodejs/skeleton_website/index.md b/files/zh-cn/learn/server-side/express_nodejs/skeleton_website/index.md
index b58be3d0cd143e..cc704f7a656f5f 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/skeleton_website/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/skeleton_website/index.md
@@ -33,17 +33,20 @@ slug: Learn/Server-side/Express_Nodejs/skeleton_website
以下内容介绍了应用生成器的用法，以及视图 / CSS 的一些不同选项。还介绍了骨架站点的组织结构。最后，我们将介绍站点的运行方法，从而对其进行验证。
-> **备注：** Express 应用生成器并非唯一的 Express 应用生成工具，而且生成项目的结构也不是组织文件和目录的唯一可行方式。但生成项目具有易于扩展和理解的模块化结构。最简单的 Express 应用请参阅 [Hello world 示例](http://expressjs.com.cn/starter/hello-world.html)（Express 镜像站）。
+> [!NOTE]
+> Express 应用生成器并非唯一的 Express 应用生成工具，而且生成项目的结构也不是组织文件和目录的唯一可行方式。但生成项目具有易于扩展和理解的模块化结构。最简单的 Express 应用请参阅 [Hello world 示例](http://expressjs.com.cn/starter/hello-world.html)（Express 镜像站）。
## 使用应用生成器
-> **备注：** 本教程中命令操作基于 Linux/macOS 的 bash 终端，Windows 的命令提示符 cmd/PowerShell 与 bash 的概念和用法略有不同，为在 Windows 上获得一致的体验，可以：
+> [!NOTE]
+> 本教程中命令操作基于 Linux/macOS 的 bash 终端，Windows 的命令提示符 cmd/PowerShell 与 bash 的概念和用法略有不同，为在 Windows 上获得一致的体验，可以：
>
> - 自己弄懂 cmd/PowerShell 与 bash 的区别。
> - 使用 [Git](https://git-scm.com/) 或 [MSYS2](http://www.msys2.org/) 为 Windows 提供的 bash。（推荐）
> - 使用 Windows 的 Linux 子系统。（到 Microsoft Store 中搜索“Linux”，安装喜欢的版本（Ubuntu 18.04、openSUSE 42、Debian 等），仅限 Windows 10，使用前需要先安装 [WSL](https://docs.microsoft.com/en-us/windows/wsl/install-win10)）
-> **备注：** 你可能已经发现国内用 NPM 太慢了！这是由众所周知的不可抗力造成的。可用淘宝提供的 [CNPM](https://npm.taobao.org/) 代替之，功能和用法基本一致（只是不能上传自己的包）。
+> [!NOTE]
+> 你可能已经发现国内用 NPM 太慢了！这是由众所周知的不可抗力造成的。可用淘宝提供的 [CNPM](https://npm.taobao.org/) 代替之，功能和用法基本一致（只是不能上传自己的包）。
你应该已经安装好了生成器，它是 [设置 Node 开发环境](/zh-CN/docs/Learn/Server-side/Express_Nodejs/development_environment) 的一部分。可以使用 NPM 来安装全局的生成器，如下所示：
@@ -84,13 +87,15 @@ express
还可以使用 `--view` 选择视图（模板）引擎，并且/或者使用 `--css` 选择 CSS 生成引擎。
-> **备注：** 不推荐用 `--hogan`、`--ejs`、`--hbs` 等参数选用模板引擎。请使用 `--view`（或 `-v`）。
+> [!NOTE]
+> 不推荐用 `--hogan`、`--ejs`、`--hbs` 等参数选用模板引擎。请使用 `--view`（或 `-v`）。
### 我应该用哪个视图引擎？
Express 应用生成器支持多款流行的视图/模板引擎，包括 [EJS](https://www.npmjs.com/package/ejs)、[Hbs](http://github.com/donpark/hbs)、[Pug](https://pugjs.org/api/getting-started.html) (Jade)、[Twig](https://www.npmjs.com/package/twig) 和 [Vash](https://www.npmjs.com/package/vash)，缺省选项是 Jade。Express 本身也支持大量其他模板语言，[开箱即用](https://github.com/expressjs/express/wiki#template-engines)。
-> **备注：** 如果要使用生成器不支持的模板引擎，请参阅 [在 Express 中使用模板引擎](http://expressjs.com.cn/guide/using-template-engines.html)（Express 文档）和所选视图引擎的文档。
+> [!NOTE]
+> 如果要使用生成器不支持的模板引擎，请参阅 [在 Express 中使用模板引擎](http://expressjs.com.cn/guide/using-template-engines.html)（Express 文档）和所选视图引擎的文档。
一般来说，你应该选择一个大而全的模板引擎，可以尽快进入生产状态。就像你选择其他组件一样！选用模板引擎需要考虑以下因素：
@@ -108,7 +113,8 @@ Express 应用生成器支持多款流行的视图/模板引擎，包括 [EJS](h
- 支持异步操作和流。
- 可以在同时在客户端和服务器上使用。如果一款模板引擎可以在客户端使用，那么就使在客户端托管数据并完成所有（或大多数）渲染成为可能。
-> **备注：** 互联网上有许多资源，可帮助你选择合适的视图/模板引擎。
+> [!NOTE]
+> 互联网上有许多资源，可帮助你选择合适的视图/模板引擎。
本项目选用 [Pug](https://pugjs.org/api/getting-started.html) 模板引擎（Jade 是它不久前的曾用名），它是最流行的 Express / JavaScript 模板语言之一，且对 Express 生成器 [开箱即用](https://github.com/expressjs/express/wiki#template-engines)。
@@ -116,7 +122,8 @@ Express 应用生成器支持多款流行的视图/模板引擎，包括 [EJS](h
Express 应用生成器支持最常见的 CSS 引擎：[LESS](http://lesscss.org/), [SASS](http://sass-lang.com/), [Compass](http://compass-style.org/), [Stylus](http://stylus-lang.com/)。
-> **备注：** CSS 的一些限制导致某些任务完成起来非常困难。CSS 引擎提供了更强大的语法来定义 CSS，然后将定义编译为纯 CSS 供浏览器使用。
+> [!NOTE]
+> CSS 的一些限制导致某些任务完成起来非常困难。CSS 引擎提供了更强大的语法来定义 CSS，然后将定义编译为纯 CSS 供浏览器使用。
与模板引擎一样，你也应该使用样式表引擎，这可以最大化团队生产力。本项目将使用原始 CSS（默认的），因为我们对 CSS 要求不复杂，没有必要使用引擎。
@@ -156,7 +163,8 @@ Express 应用生成器支持最常见的 CSS 引擎：[LESS](http://lesscss.org
一个 Express 应用就配置成功了，它托管于 localhost:3000。
-> **备注：** 指定 DEBUG 变量可启用控制台日志记录/调试。例如，当你访问上面的页面时，你会看到像这样的调试输出：  直接通过 `npm start` 命令启动应用也可以，但不会看到调试信息。
+> [!NOTE]
+> 指定 DEBUG 变量可启用控制台日志记录/调试。例如，当你访问上面的页面时，你会看到像这样的调试输出：  直接通过 `npm start` 命令启动应用也可以，但不会看到调试信息。
## 文件改动时重启服务器
@@ -199,7 +207,8 @@ DEBUG=express-locallibrary-tutorial:* npm run devstart
现在，如果编辑项目中的任何文件，服务器将自动重启（或者可以随时使用 rs 命令来重启）。查看更新后的页面需要点击浏览器的“刷新”按钮。
-> **备注：** 这里必须使用“`npm run `”命令，而不是 `npm start`，因为“start”本质上是映射到脚本的一条 NPM 命令。我们可以在 `start` 脚本中替换它，但我们只想在开发期间使用 nodemon，因此有必要创建一条新的脚本命令。
+> [!NOTE]
+> 这里必须使用“`npm run `”命令，而不是 `npm start`，因为“start”本质上是映射到脚本的一条 NPM 命令。我们可以在 `start` 脚本中替换它，但我们只想在开发期间使用 nodemon，因此有必要创建一条新的脚本命令。
## 生成的项目
@@ -327,7 +336,8 @@ var indexRouter = require("./routes/index");
var usersRouter = require("./routes/users");
```
-> **备注：** 此时我们刚刚导入了模块；还没有真正使用过其中的路由（稍后会使用）。
+> [!NOTE]
+> 此时我们刚刚导入了模块；还没有真正使用过其中的路由（稍后会使用）。
下面我们用导入的 `express` 模块来创建 `app` 对象，然后使用它来设置视图（模板）引擎。设置引擎分两步：首先设置 '`views`' 以指定模板的存储文件夹（此处设为子文件夹 **/views**）。然后设置 '`view engine`' 以指定模板库（本例中设为“pug” ）。
@@ -357,7 +367,8 @@ app.use("/", indexRouter);
app.use("/users", usersRouter);
```
-> **备注：** 这些路径（`'/'` 和 '`/users'`）将作为导入路由的前缀。如果导入的模块 `users` 在 `/profile` 定义了路由，则可以在 `/users/profile` 访问该路由。我们将在后面的文章中，详细讨论路由。
+> [!NOTE]
+> 这些路径（`'/'` 和 '`/users'`）将作为导入路由的前缀。如果导入的模块 `users` 在 `/profile` 定义了路由，则可以在 `/users/profile` 访问该路由。我们将在后面的文章中，详细讨论路由。
最后一个中间件为错误和 HTTP 404 响应添加处理方法。
@@ -407,7 +418,8 @@ module.exports = router;
该路由定义了一个回调，在检测到正确模式的 HTTP `GET` 请求时将调用该回调。正确模式即导入模块时指定的路由（'`/users`'）加该模块（'`/`'）中定义的任何内容。换句话说，在收到 `/users/` URL 时使用此路由。
-> **备注：** 用 node 启动该应用并访问
@@ -138,7 +139,8 @@ npx create-react-app moz-todo-react
- 创建一系列结构化的子文件夹和文件，奠定应用程序的基础架构；
- 如果你的电脑上安装了 git 的话，顺便帮你把 git 仓库也建好。
-> **备注：** 如果你的电脑上安装了 yarn 的话，create-react-app 会默认使用 yarn 而非 npm。如果你同时安装了 yarn 和 npm，但你希望使用 npm 的话，在 create-react-app 的时候需要输入 `--use-npm` **:**
+> [!NOTE]
+> 如果你的电脑上安装了 yarn 的话，create-react-app 会默认使用 yarn 而非 npm。如果你同时安装了 yarn 和 npm，但你希望使用 npm 的话，在 create-react-app 的时候需要输入 `--use-npm` **:**
>
> ```bash
> npx create-react-app moz-todo-react --use-npm
@@ -232,11 +234,13 @@ import "./App.css";
第二句代码引入了 `'./logo.svg'`。注意文件路径以 `./` 开头、由 `.svg` 尾——表明这是一个本地文件，并且它不是 JavaScript 文件。
-> **备注：** 我们没有指定 React 模块的路径——表明它并非来自本地文件，而是在 `package.json` 文件中列为依赖项。在整个学习过程中，请务必留心这两种引入方式的不同之处。
+> [!NOTE]
+> 我们没有指定 React 模块的路径——表明它并非来自本地文件，而是在 `package.json` 文件中列为依赖项。在整个学习过程中，请务必留心这两种引入方式的不同之处。
第三行引入了我们的组件所需的 CSS 文件。与上面两句不同，这里没有将引入的内容赋给任何变量、也没有用到 `from` 指令。请注意这种特殊的语法并非原生 JS 的语法——它源自前端资源打包工具 webpack，而 create-react-app 正是基于 webpack 配置而来的。
-> **备注：** 译者补充：webpack 可用于打包 JS 和非 JS 的内容 (当然，非 JS 的内容需要一些插件或加载器来处理)，但是 JavaScript 标准只有关于 JS 的内容，所以 webpack 社区使用这种特殊的 `import` 语句来声明对非 JS 内容的引用。
+> [!NOTE]
+> 译者补充：webpack 可用于打包 JS 和非 JS 的内容 (当然，非 JS 的内容需要一些插件或加载器来处理)，但是 JavaScript 标准只有关于 JS 的内容，所以 webpack 社区使用这种特殊的 `import` 语句来声明对非 JS 内容的引用。
>
> 详情参见 webpack 官方和社区，截止目前 (2020 年下旬)，webpack 仍是现代前端工作中必不可少的技能之一。
@@ -321,7 +325,8 @@ serviceWorker.unregister();
上述所有都告诉 React 我们想把 `App` 组件作为 root 或者第一个组件来渲染我们的 React App。
-> **备注：** 在 JSX 中，React 组件和 HTML 元素必须有关闭斜杠（`/`），如 `` 或者 `` 或者 `
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components/index.md
index 0edd22ce520fb9..2cce75a22e2029 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components/index.md
@@ -98,7 +98,8 @@ npx degit opensas/mdn-svelte-tutorial/04-componentizing-our-app
让我们开始吧。
-> **备注：** 在创建我们的前几个组件的过程中，我们还将学习不同的组件间通信技术以及每种技术的优缺点。
+> [!NOTE]
+> 在创建我们的前几个组件的过程中，我们还将学习不同的组件间通信技术以及每种技术的优缺点。
## 提取我们的过滤器组件
@@ -143,7 +144,8 @@ npx degit opensas/mdn-svelte-tutorial/04-componentizing-our-app
+ 半径：
+ 50
+
+
-
-
+### 简单的贝塞尔曲线
+
+此示例使用 `bezierCurveTo()` 绘制了一条简单的贝塞尔曲线。
+
+#### HTML
+
+```html
+ [)`
- - : `url()` 函数接受一个描述 SVG 过滤器的 XML 文件的位置，并且可以包含一个针对特殊过滤元素的锚点。
-- `blur()`
- - : length：CSS 长度。给绘图提供一个高斯模糊。
-- `brightness()`
- - : Percentage：百分比。给绘图提供一个线性乘法，调节亮度的高低。
-- `contrast()`
- - : Percentage：百分比。调节图像的对比度。当数值为 `0%` 时，图像会完全变黑。当数值为 `100%` 时，图像没有任何变化。
-- `drop-shadow(, , , , )`
-
- - : 给绘图提供阴影。阴影事实上是在图像下面呈现出模糊的，通过对图像的透明遮罩进行偏移绘制出一种特殊的颜色，组合而成的效果。这个函数接受 5 个参数：
-
- - ``: 查看 {{cssxref("<length>")}} 允许的单位。描述阴影的水平距离。
- - ``: 查看 {{cssxref("<length>")}} 允许的单位。描述阴影的垂直距离。
- - ``: 数值越大，模糊就越大，从而使阴影范围变得更大颜色变得更浅。不允许为负数。
- - ``: 正数会使阴影扩张变大，负数会使阴影收缩。
- - ``: 查看 {{cssxref("<color>")}} 允许的关键字和标识符。
-
-- `grayscale()`
- - : Percentage：百分比。将图像转换成灰色的图片。当值为 100% 时，图像会完全变成灰色。当值为 0% 时，图像没有任何变化。
-- `hue-rotate()`
- - : Degree：度数。对图像进行色彩旋转的处理。当值为 0 度时，图像没有任何变化。
-- `invert()`
- - : Percentage：百分比。反色图像（呈现出照片底片的效果）。当值为 100% 时，图像会完全反色处理。当值为 0% 时，图像没有任何变化。
-- `opacity()`
- - : Percentage：百分比。对图像进行透明度的处理。当值为 0% 时，图像完全透明。当值为 100% 时，图像没有任何变化。
-- `saturate()`
- - : 对图像进行饱和度的处理。当值为 0% 时，图像完全不饱和。当值为 100% 时，图像没有任何变化。
-- `sepia()`
- - : 对图像进行深褐色处理（怀旧风格）。当值为 100% 时，图像完全变成深褐色。当值为 0% 时，图像没有任何变化。
+{{APIRef}}
+
+Canvas 2D API 的 **`CanvasRenderingContext2D.filter`** 属性是用来提供模糊、灰度等滤镜效果。它类似于 CSS {{cssxref("filter")}} 属性，并且接受相同的值。
+
+## 值
+
+`filter` 属性接受字符串形式的值，可以是 `"none"`，或者是以下一个或多个滤镜函数。
+
+- [`url()`](/zh-CN/docs/Web/CSS/url)
+ - : 一个 CSS {{cssxref("url", "url()")}}。接受一个指向 SVG 滤镜元素（可以被嵌入在外部的 XML 文件中）的 IRI。
+- [`blur()`](/zh-CN/docs/Web/CSS/filter-function/blur)
+ - : 一个 CSS {{cssxref("<length>")}}。将高斯模糊应用于绘图。它定义了高斯函数的标准偏差值，即屏幕上多少像素混合在一起；因此，较大的值会产生更模糊的效果。值为 `0` 时保持输入不变。
+- [`brightness()`](/zh-CN/docs/Web/CSS/filter-function/brightness)
+ - : 一个 CSS {{cssxref("<percentage>")}}。将线性乘数应用于绘图，使其看起来更亮或更暗。低于 `100%` 的值会使图像变暗，而高于 `100%` 的值会使其变亮。值为 `0%` 会生成完全黑色的图像，值为 `100%` 保持输入不变。
+- [`contrast()`](/zh-CN/docs/Web/CSS/filter-function/contrast)
+ - : 一个 CSS {{cssxref("<percentage>")}}。调整绘图的对比度。值为 `0%` 会生成完全黑色的绘图，值为 `100%` 保持绘图不变。
+- [`drop-shadow()`](/zh-CN/docs/Web/CSS/filter-function/drop-shadow)
+ - : 将阴影效果应用于绘图。阴影效果实际上是绘图 alpha 蒙版的模糊、偏移版本，以特定颜色绘制，位于绘图下方。此函数最多接受五个参数：
+ - ``
+ - : 参见 {{cssxref("<length>")}} 允许的单位。指定阴影的水平偏移距离。
+ - ``
+ - : 参见 {{cssxref("<length>")}} 允许的单位。指定阴影的垂直偏移距离。
+ - ``
+ - : 此值越大，模糊程度越高，因此阴影会变得更大更淡。不允许使用负值。
+ - ``
+ - : 参见 {{cssxref("<color>")}} 允许的关键字和表示法。
+- [`grayscale()`](/zh-CN/docs/Web/CSS/filter-function/grayscale)
+ - : 一个 CSS {{cssxref("<percentage>")}}。将绘图转换为灰度。值为 `100%` 完全灰度化，值为 `0%` 保持绘图不变。
+- [`hue-rotate()`](/zh-CN/docs/Web/CSS/filter-function/hue-rotate)
+ - : 一个 CSS {{cssxref("<angle>")}}。对绘图应用色相旋转。值为 `0deg` 保持输入不变。
+- [`invert()`](/zh-CN/docs/Web/CSS/filter-function/invert)
+ - : 一个 CSS {{cssxref("<percentage>")}}。反转绘图。值为 `100%` 完全反转，值为 `0%` 保持绘图不变。
+- [`opacity()`](/zh-CN/docs/Web/CSS/filter-function/opacity)
+ - : 一个 CSS {{cssxref("<percentage>")}}。对绘图应用透明度。值为 `0%` 完全透明，值为 `100%` 保持绘图不变。
+- [`saturate()`](/zh-CN/docs/Web/CSS/filter-function/saturate)
+ - : 一个 CSS {{cssxref("<percentage>")}}。修改绘图饱和度。值为 `0%` 完全不饱和，值为 `100%` 保持绘图不变。
+- [`sepia()`](/zh-CN/docs/Web/CSS/filter-function/sepia)
+ - : 一个 CSS {{cssxref("<percentage>")}}。将绘图转换为深褐色。值为 `100%` 完全深褐色，值为 `0%` 保持绘图不变。
- `none`
- - : 没有使用 filter。
+ - : 不应用滤镜。初始值。
## 示例
+要查看这些示例，请确保使用支持此特性的浏览器；请参阅以下的兼容性表格。
+
### 应用模糊
这是一段使用 `filter` 属性的简单的代码片段。
@@ -78,6 +75,40 @@ ctx.fillText("Hello world", 50, 100);
{{ EmbedLiveSample('应用模糊', 700, 180) }}
+### 应用多个滤镜
+
+你可以组合任意数量的滤镜。此示例将 `contrast`、`sepia` 和 `drop-shadow` 滤镜应用于一张犀牛的照片。
+
+#### HTML
+
+```html
+
+
+
[ a c e b d f 0 0 1 ] \left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right] [ a c e b d f 0 0 1 ] \left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]
@@ -56,7 +57,8 @@ slug: Web/API/ConvolverNode
下面的示例展示了 AudioContext 创建卷积节点的基础用法。
-> **备注：** 你需要找到一个脉冲反应来完成下面的示例。可查看[此处](https://codepen.io/DonKarlssonSan/pen/doVKRE) 的实例。
+> [!NOTE]
+> 你需要找到一个脉冲反应来完成下面的示例。可查看[此处](https://codepen.io/DonKarlssonSan/pen/doVKRE) 的实例。
```js
let audioCtx = new window.AudioContext();
diff --git a/files/zh-cn/web/api/cookiechangeevent/cookiechangeevent/index.md b/files/zh-cn/web/api/cookiechangeevent/cookiechangeevent/index.md
index d99c4e3e3c47b7..bffdfe283a307a 100644
--- a/files/zh-cn/web/api/cookiechangeevent/cookiechangeevent/index.md
+++ b/files/zh-cn/web/api/cookiechangeevent/cookiechangeevent/index.md
@@ -9,7 +9,8 @@ l10n:
**`CookieChangeEvent()`** 构造函数创建一个新的 {{domxref("CookieChangeEvent")}} 对象，这是发生任何 cookie 更改时在 {{domxref("CookieStore")}} 上触发的 {{domxref("CookieStore/change_event", "change")}} 事件的事件类型。当变更事件发生时浏览器调用这个构造函数。
-> **备注：** 此事件构造函数通常不在生产环境的站点上使用。它主要用于测试需要此事件的实例。
+> [!NOTE]
+> 此事件构造函数通常不在生产环境的站点上使用。它主要用于测试需要此事件的实例。
## 语法
diff --git a/files/zh-cn/web/api/credential_management_api/index.md b/files/zh-cn/web/api/credential_management_api/index.md
index 3282db0fa3dec5..cc47736e171215 100644
--- a/files/zh-cn/web/api/credential_management_api/index.md
+++ b/files/zh-cn/web/api/credential_management_api/index.md
@@ -11,7 +11,8 @@ Credential Management API 允许网站存储和检索用户，联合账户和公
此 API 允许网站与用户代理的密码系统进行交互，以便网站能够以统一的方式处理站点凭证，而用户代理则可以为他们的凭证管理提供更好的帮助。例如，用户代理在处理联合身份提供程序或使用不仅仅是用户名和密码的深奥登录机制时特别困难。为了解决这些问题，Credential Management API 为网站提供了存储和检索不同类型凭据的方法。这为用户提供了一些功能，比如查看他们曾经登录到某个站点的联合帐户，或者在会话过期且没有显式的登录流程的情况下恢复会话。
-> **备注：** 此 API 仅限于顶级上下文。在\
```
-> **备注：** 你会注意到，`