From 599b7aa7b21fe689d0f7a4e0921efa1d7487eca5 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 18 Jun 2024 23:34:32 +0900 Subject: [PATCH 001/907] =?UTF-8?q?2023/11/09=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/api/document/exitpictureinpicture/index.md | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/files/ja/web/api/document/exitpictureinpicture/index.md b/files/ja/web/api/document/exitpictureinpicture/index.md index 3896e4bfaa1923..77f2a3687f2a9c 100644 --- a/files/ja/web/api/document/exitpictureinpicture/index.md +++ b/files/ja/web/api/document/exitpictureinpicture/index.md @@ -3,12 +3,12 @@ title: "Document: exitPictureInPicture() メソッド" short-title: exitPictureInPicture() slug: Web/API/Document/exitPictureInPicture l10n: - sourceCommit: 04ebe57066db2cff350018649bdb15b2a10c67ba + sourceCommit: 4cbb657f882495b1cd18cbbaa8d1c5237bce4eb8 --- -{{ApiRef("Picture-in-Picture API")}} +{{APIRef("Picture-in-Picture API")}} -{{domxref("Document")}} の **`exitPictureInPicture()`** メソッドは、この文書に含まれ、現在浮動している動画をピクチャインピクチャモードから外し、画面の前回状態に戻すようリクエストします。これは通常、 {{domxref("HTMLVideoElement.requestPictureInPicture()")}} を前回呼び出したときの効果を逆転させます。 +**`exitPictureInPicture()`** は {{domxref("Document")}} インターフェイスのメソッドで、この文書に含まれ、現在浮動している動画をピクチャインピクチャモードから外し、画面の前回状態に戻すようリクエストします。これは通常、 {{domxref("HTMLVideoElement.requestPictureInPicture()")}} を前回呼び出したときの効果を逆転させます。 ## 構文 @@ -24,6 +24,11 @@ exitPictureInPicture() プロミス ({{jsxref("Promise")}}) で、{{Glossary("user agent", "ユーザーエージェント")}}がピクチャインピクチャモードを終了した時点で解決されます。全画面モードを終了しようとしてエラーが発生した場合、プロミスの `catch()` ハンドラーが呼び出されます。 +### 例外 + +- `InvalidStateError` {{domxref("DOMException")}} + - : `document.pictureInPictureElement` が `null` の場合に発生します。 + ## 例 この例では、現在の文書内でマウスボタンがクリックされるたびに、ピクチャインピクチャモードを終了させます。 From 099a46104c378d1ab85fbd085eb7358ab5cc0dfa Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 18 Jun 2024 23:38:38 +0900 Subject: [PATCH 002/907] =?UTF-8?q?2023/12/12=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/document/exitpointerlock/index.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/files/ja/web/api/document/exitpointerlock/index.md b/files/ja/web/api/document/exitpointerlock/index.md index a2c3fc606130a3..888289501293b0 100644 --- a/files/ja/web/api/document/exitpointerlock/index.md +++ b/files/ja/web/api/document/exitpointerlock/index.md @@ -1,13 +1,16 @@ --- -title: Document.exitPointerLock() +title: "Document: exitPointerLock() メソッド" +short-title: exitPointerLock() slug: Web/API/Document/exitPointerLock l10n: - sourceCommit: d4619276d67ca1ee02bd964d884ec52c2aa2ad4b + sourceCommit: c99ff93a1b71e7d664509fdd3e0c168920be967a --- -{{APIRef("DOM")}} +{{APIRef("Pointer Lock API")}} -**`exitPointerLock()`** メソッドは、以前 {{domxref("Element.requestPointerLock()")}} でリクエストされたポインターロックを非同期に解放します。 +**`exitPointerLock()`** は {{domxref("Document")}} インターフェイスのメソッドで、以前 {{domxref("Element.requestPointerLock")}} でリクエストされたポインターロックを非同期に解放します。 + +> **メモ:** **`exitPointerLock()`** メソッドは文書に対して呼び出されるのに対し、**`requestPointerLock()`** メソッドは要素に対して呼び出されます。 リクエストが成功したか失敗したかを追跡するには、 {{domxref("Document/pointerlockchange_event", "pointerlockchange")}} および {{domxref("Document/pointerlockerror_event", "pointerlockerror")}} イベントを待ち受けする必要があります。 From 150001f4b6f39ee5aa5f37837caaa71607727719 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 20 Jun 2024 08:14:16 +0900 Subject: [PATCH 003/907] =?UTF-8?q?2023/12/21=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/api/document/getelementbyid/index.md | 55 ++++++++++--------- 1 file changed, 30 insertions(+), 25 deletions(-) diff --git a/files/ja/web/api/document/getelementbyid/index.md b/files/ja/web/api/document/getelementbyid/index.md index 4bfc11a1387cb0..19eaa974b7dcf8 100644 --- a/files/ja/web/api/document/getelementbyid/index.md +++ b/files/ja/web/api/document/getelementbyid/index.md @@ -1,20 +1,27 @@ --- -title: Document.getElementById() +title: "Document: getElementById() メソッド" +short-title: getElementById() slug: Web/API/Document/getElementById +l10n: + sourceCommit: 8d89e9669f59f208a80c0bdbee48ba75d37a726e --- {{ ApiRef("DOM") }} -{{domxref("Document")}} の **`getElementById()`** メソッドは、 {{domxref("Element.id", "id")}} プロパティが指定された文字列に一致する要素を表す {{domxref("Element")}} オブジェクトを返します。要素の ID は指定されていれば固有であることが求められているため、特定の要素にすばやくアクセスするには便利な方法です。 +**`getElementById()`** は {{domxref("Document")}} インターフェイスのメソッドで、 {{domxref("Element.id", "id")}} プロパティが指定された文字列に一致する要素を表す {{domxref("Element")}} オブジェクトを返します。要素の ID は指定されていれば固有であることが求められているため、特定の要素にすばやくアクセスするには便利な方法です。 ID を持たない要素にアクセスする必要がある場合は、 {{domxref("Document.querySelector", "querySelector()")}} で何らかの{{Glossary("CSS selector", "セレクター")}}を使用して要素を検索することができます。 +> **メモ:** ID は文書内で固有である必要があります。単一の文書内で 2 つ以上の要素が同じ ID であった場合、このメソッドは最初に見つかった要素を返します。 + ## 構文 -``` -var element = document.getElementById(id); +```js-nolint +getElementById(id) ``` +> **メモ:** メソッド名における `"Id"` の部分は、関数のコードに対して正しくなければなりません。 `getElementByID()` は自然に見えるかもしれませんが、正しくなく動作しません。 + ### 引数 - `id` @@ -29,14 +36,14 @@ var element = document.getElementById(id); ### HTML ```html - + - getElementById example + getElementById の例 -

Some text here

- - +

いくらかのテキスト

+ + ``` @@ -45,26 +52,24 @@ var element = document.getElementById(id); ```js function changeColor(newColor) { - var elem = document.getElementById("para"); + const elem = document.getElementById("para"); elem.style.color = newColor; } ``` ### 結果 -{{ EmbedLiveSample('Example', 250, 100) }} +{{ EmbedLiveSample('Examples', 250, 120) }} ## 使用上のメモ -コードが機能するためには、メソッドの名前の中の `"Id"` は、大文字と小文字を正しく表記し*なければなりません*。 `getElementByID()` は自然に見えますが、妥当では*なく*動作しません。 - -{{domxref("Document.querySelector()")}} や {{domxref("Document.querySelectorAll()")}} などの他の要素検索メソッドとは異なり、 `getElementById()` はグローバルの `document` オブジェクトに対してのみ利用可能であり、 DOM のすべての要素オブジェクトのメソッドとしては利用*できません*。 ID の値は文書全体を通して固有でなければならないため、機能の「ローカル」バージョンは必要ないのです。 +{{domxref("Document.querySelector()")}} や {{domxref("Document.querySelectorAll()")}} などの他の要素検索メソッドとは異なり、`getElementById()` はグローバルの `document` オブジェクトに対してのみ利用可能であり、 DOM のすべての要素オブジェクトのメソッドとしては利用*できません*。ID の値は文書全体を通して固有でなければならないため、機能の「ローカル」バージョンは必要ないのです。 ### 例 ```html - + Document @@ -77,26 +82,26 @@ function changeColor(newColor) {

hello word4

``` -もし指定された `id` を持つ要素がなければ、この関数は `null` を返します。なお、 `id` 引数は大文字小文字の区別があるため、 `document.getElementById("Main")` は `
` 要素の代わりに `null` を返し、これは "M" と "m" がこのメソッドの目的では区別されるためです。 +もし指定された `id` を持つ要素がなければ、この関数は `null` を返します。なお、 `id` 引数は大文字小文字の区別があるため、 `document.getElementById("Main")` は `
` 要素ではなく `null` を返します。これは "M" と "m" がこのメソッドの目的では区別されるためです。 -**文書内にない要素** は `getElementById()` で検索されません。要素を作成し ID を割り当てたとき、 `getElementById()` でアクセスする前に {{domxref("Node.insertBefore()")}} またはそのたぐいのメソッドで、要素を文書ツリーに挿入しておく必要があります。 +文書内にない要素は `getElementById()` で検索されません。要素を作成し ID を割り当てたとき、 `getElementById()` でアクセスする前に {{domxref("Node.insertBefore()")}} またはそのたぐいのメソッドで、要素を文書ツリーに挿入しておく必要があります。 ```js -var element = document.createElement("div"); +const element = document.createElement("div"); element.id = "testqq"; -var el = document.getElementById("testqq"); // el は null になります +const el = document.getElementById("testqq"); // el は null になります ``` -**HTML 以外の文書**の場合。 DOM の実装では、どの属性が ID 類であるかを示す情報が必要です。 "id" という名前の属性は、文書の DTD で定義されていない限り ID 類とみなされません。 `id` 属性は [XHTML](/ja/docs/XHTML), [XUL](/ja/docs/XUL) などの一般的な場合には ID 類として定義されています。属性が ID 類であるかどうかが分からない実装では、 `null` を返すでしょう。 +HTML 以外の文書の場合。 DOM の実装では、どの属性が ID 類であるかを示す情報が必要です。 "id" という名前の属性は、文書の DTD で定義されていない限り ID 類とみなされません。 `id` 属性は [XHTML](/ja/docs/Glossary/XHTML), XUL などの一般的な場合には ID 型として定義されています。属性が ID 類であるかどうかが分からない実装では、 `null` を返すでしょう。 ## 仕様書 @@ -109,5 +114,5 @@ var el = document.getElementById("testqq"); // el は null になります ## 関連情報 - {{domxref("Document")}}: 文書内で要素への参照を取得するために使うことができる他のメソッドやプロパティで使用するための参照。 -- {{domxref("Document.querySelector()")}}: `'div.myclass'` のようなセレクターを通したクエリのためのもの。 -- [xml:id](/ja/docs/xml/xml:id) - `getElementById()` による XML 文書 (Ajax 呼び出しによって返されるものなど) の 'xml:id' の取得を可能とする便利なメソッドを持つ +- {{domxref("Document.querySelector()")}}: `'div.myclass'` のようなセレクターを通したクエリーのためのもの。 +- {{domxref("Document.evaluate()")}} `xml:id` によって {{glossary("XML")}} 文書内を選択するユーティリティーメソッド From ed1d41033ea9590a01126343736ff9345eb12bc9 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 26 Jun 2024 00:26:41 +0900 Subject: [PATCH 004/907] =?UTF-8?q?2024/03/12=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0=20(#21755)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2024/03/12 時点の英語版に基づき更新 * linterによる修正 --- .../document/getelementsbyclassname/index.md | 85 ++++++++++--------- 1 file changed, 43 insertions(+), 42 deletions(-) diff --git a/files/ja/web/api/document/getelementsbyclassname/index.md b/files/ja/web/api/document/getelementsbyclassname/index.md index bae1af8f639596..23efbf45a361df 100644 --- a/files/ja/web/api/document/getelementsbyclassname/index.md +++ b/files/ja/web/api/document/getelementsbyclassname/index.md @@ -1,22 +1,33 @@ --- -title: Document.getElementsByClassName() +title: "Document: getElementsByClassName() メソッド" +short-title: getElementsByClassName() slug: Web/API/Document/getElementsByClassName +l10n: + sourceCommit: 0a881eea07f0cec6ca4ed85a24af43b367a9f80d --- {{APIRef("DOM")}} -{{domxref("Document")}} インターフェイスの **`getElementsByClassName`** メソッドは、指定されたクラス名をすべて持つすべての子要素の配列風オブジェクトを返します。 {{domxref("document")}} オブジェクトに対して呼び出したときは、ルートノードを含む文書全体が検索されます。任意の要素に対して {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} を呼び出すこともできます。その場合は、指定されたルート要素下の指定されたクラス名を持つ要素だけを返します。 +**`getElementsByClassName`** は {{domxref("Document")}} インターフェイスのメソッドで、指定されたクラス名をすべて持つすべての子要素の配列風オブジェクトを返します。 + +{{domxref("document")}} オブジェクトに対して呼び出したときは、ルートノードを含む文書全体が検索されます。任意の要素に対して {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} を呼び出すこともできます。その場合は、指定されたルート要素下の指定されたクラス名を持つ要素だけを返します。 + +> **警告:** これは生きた {{domxref("HTMLCollection")}} です。DOM の変更は、その都度配列に反映されます。この配列で選択された要素がセレクターに該当しなくなった場合は、 自動的に除去されます。反復処理する際には、このことに注意しましょう。 ## 構文 +```js-nolint +getElementsByClassName(names) ``` -var elements = document.getElementsByClassName(names); // または -var elements = rootElement.getElementsByClassName(names); -``` -- _elements_ は、見つかった要素の生きた {{domxref("HTMLCollection")}} です。 -- _names_ は文字列で、一致させるクラス名を表します。複数のクラス名はホワイトスペースで区切ります。 -- {{domxref("Element.getElementsByClassName", "getElementsByClassName")}} は、 {{domxref("document")}} だけでなく、任意の要素に対して呼び出すことができます。呼び出した要素が検索のルートとして使われます。 +### 引数 + +- `names` + - : 照合するクラス名を表す文字列です。複数のクラス名はホワイトスペースで区切ります。 + +### 返値 + +見つかった要素の生きた {{domxref("HTMLCollection")}} です。 ## 例 @@ -44,15 +55,13 @@ document.getElementById("main").getElementsByClassName("test"); document.getElementsByClassName("test")[0]; ``` -メソッドの _this_ 値として {{domxref("HTMLCollection")}} を渡すことで、 Array プロトタイプのメソッドを `HTMLCollection` で使用することができます。ここでは、 'test' クラスを持つすべての div 要素を検索します。 +メソッドの _this_ 値として {{domxref("HTMLCollection")}} を渡すことで、Array.prototype のメソッドを `HTMLCollection` で使用することができます。ここでは、 'test' クラスを持つすべての div 要素を検索します。 ```js -var testElements = document.getElementsByClassName("test"); -var testDivs = Array.prototype.filter.call( +const testElements = document.getElementsByClassName("test"); +const testDivs = Array.prototype.filter.call( testElements, - function (testElement) { - return testElement.nodeName === "DIV"; - }, + (testElement) => testElement.nodeName === "DIV", ); ``` @@ -60,24 +69,24 @@ var testDivs = Array.prototype.filter.call( これは最もよく使われる操作のメソッドです。 -``` - - +```html + +
-

hello world 1

-

hello world 2

-

hello world 3

-

hello world 4

+

hello world 1

+

hello world 2

+

hello world 3

+

hello world 4

@@ -101,25 +110,17 @@ var testDivs = Array.prototype.filter.call( ```js // getElementsByClassName は指定された両方のクラスを持つ要素のみを選択する -var allOrangeJuiceByClass = document.getElementsByClassName("orange juice"); -var result = "document.getElementsByClassName('orange juice')"; -for ( - var i = 0, len = allOrangeJuiceByClass.length | 0; - i < len; - i = (i + 1) | 0 -) { - result += "\n " + allOrangeJuiceByClass[i].textContent; +const allOrangeJuiceByClass = document.getElementsByClassName("orange juice"); +let result = "document.getElementsByClassName('orange juice')"; +for (let i = 0; i < allOrangeJuiceByClass.length; i++) { + result += `\n ${allOrangeJuiceByClass[i].textContent}`; } -// querySelector は完全一致で選択する -var allOrangeJuiceQuery = document.querySelectorAll(".orange.juice"); +// querySelector は完全一致するもののみ選択する +const allOrangeJuiceQuery = document.querySelectorAll(".orange.juice"); result += "\n\ndocument.querySelectorAll('.orange.juice')"; -for ( - var i = 0, len = allOrangeJuiceQuery.length | 0; - i < len; - i = (i + 1) | 0 -) { - result += "\n " + allOrangeJuiceQuery[i].textContent; +for (let i = 0; i < allOrangeJuiceQuery.length; i++) { + result += `\n ${allOrangeJuiceQuery[i].textContent}`; } document.getElementById("resultArea").value = result; From 6e666fbcef6e4b847c7ffdc6383277a545d7fa54 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 26 Jun 2024 00:27:02 +0900 Subject: [PATCH 005/907] =?UTF-8?q?2024/03/12=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0=20(#21768)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2024/03/12 時点の英語版に基づき更新 * Prettier 対策 --- .../document/getelementsbytagnamens/index.md | 125 ++++++++---------- 1 file changed, 53 insertions(+), 72 deletions(-) diff --git a/files/ja/web/api/document/getelementsbytagnamens/index.md b/files/ja/web/api/document/getelementsbytagnamens/index.md index fe01c56ae69866..9bf488e83d02a3 100644 --- a/files/ja/web/api/document/getelementsbytagnamens/index.md +++ b/files/ja/web/api/document/getelementsbytagnamens/index.md @@ -1,6 +1,9 @@ --- -title: Document.getElementsByTagNameNS() +title: "Document: getElementsByTagNameNS() メソッド" +short-title: getElementsByTagNameNS() slug: Web/API/Document/getElementsByTagNameNS +l10n: + sourceCommit: 0a881eea07f0cec6ca4ed85a24af43b367a9f80d --- {{APIRef("DOM")}} @@ -9,17 +12,27 @@ slug: Web/API/Document/getElementsByTagNameNS ## 構文 +```js-nolint +getElementsByTagNameNS(namespace, name) ``` -elements = document.getElementsByTagNameNS(namespace, name) -``` -- _elements_ は見つかった要素の生きた {{DOMxRef("NodeList")}} (但し下記のメモを参照) で、ツリーに現れる順です。 -- _namespace_ は検索する要素の名前空間 URI です ({{domxref("Node.namespaceURI", "element.namespaceURI")}} を参照)。 -- _name_ は検索する要素の局所名、またはすべての要素に一致する特殊な値 `*` です ({{domxref("Node.localName", "element.localName")}} を参照)。 +### 引数 + +- `namespace` + - : 検索する要素の名前空間 URI です（{{domxref("Element.namespaceURI", "element.namespaceURI")}} を参照）。 +- `name` + - : 検索する要素のローカル名、またはすべての要素に一致する特殊な値 `*` です（{{domxref("Element.localName", "element.localName")}} を参照）。 + +### 返値 + +見つかった要素の生きた {{DOMxRef("NodeList")}}（但し下記のメモを参照）で、ツリーに現れる順です。 -> **メモ:** W3C の仕様書では `elements` は `NodeList` であるとされていますが、 Gecko および Internet Explorer ではこのメソッドは {{DOMxRef("HTMLCollection")}} を返します。 Opera は `NodeList` を返しますが、 `namedItem` メソッドを実装しているので、 `HTMLCollection` と同様になります。2012 年 1 月時点で、 WebKit ブラウザーのみが純粋な `NodeList` の値を返します。詳しくは [bug 14869](https://bugzilla.mozilla.org/show_bug.cgi?id=14869) を参照してください。 +> **メモ:** W3C の仕様書では返値は `NodeList` であるとされていますが、Firefox ではこのメソッドは {{DOMxRef("HTMLCollection")}} を返します。 +> Opera は `NodeList` を返しますが、 `namedItem` メソッドを実装しているので、 `HTMLCollection` と同様になります。2012 年 1 月時点で、 WebKit ブラウザーのみが純粋な `NodeList` の値を返します。 +> 詳しくは [bug 14869](https://bugzil.la/14869) を参照してください。 -> **メモ:** 現在、このメソッドの引数は大文字と小文字を区別しますが、 Firefox 3.5 以前は大文字と小文字を区別していませんでした。詳しくは [Firefox 3.6 の開発者リリースノート](/ja/docs/Mozilla/Firefox/Releases/3.6#DOM)および {{domxref("Element.getElementsByTagNameNS")}} のブラウザーの互換性のメモをご覧ください。 +> **メモ:** 現在、このメソッドの引数は大文字と小文字を区別しますが、 Firefox 3.5 以前は大文字と小文字を区別していませんでした。 +> 詳しくは [Firefox 3.6 の開発者リリースノート](/ja/docs/Mozilla/Firefox/Releases/3.6#dom)および {{domxref("Element.getElementsByTagNameNS")}} のブラウザーの互換性のメモをご覧ください。 ## 例 @@ -29,110 +42,78 @@ elements = document.getElementsByTagNameNS(namespace, name) 以下の例を使用するには、新しいファイルにそのままコピー＆ペーストして、 .xhtml の拡張子で保存してください。 -```html - +```html-nolint + - getElementsByTagNameNS example + getElementsByTagNameNS の例 - -

Some outer text

-

Some outer text

+

外側のテキスト

+

外側のテキスト

-

Some div1 text

-

Some div1 text

-

Some div1 text

+

div1 のテキスト

+

div1 のテキスト

+

div1 のテキスト

-

Some div2 text

-

Some div2 text

+

div2 のテキスト

+

div2 のテキスト

-

Some outer text

-

Some outer text

+

外側のテキスト

+

外側のテキスト

-
+ +

+ div1 要素内のすべての p 要素 + +
``` -## 対応していないブラウザーでの代替方法 - -要求されたブラウザーが XPath に対応していない場合、他のアプローチ (DOM のすべての子要素をたどって、すべての @xmlns インスタンスで識別する、など) で要求された局所名および名前空間を持つすべてのタグを検索する必要がありますが、 XPath の方がはるかに高速です。 (Explorer に対応するためには、[このラッパークラス](http://www.davidflanagan.com/javascript5/display.php?n=21-10&f=21/10.js)のように、以下の関数で XPath の代わりに XPath のラッパーを呼び出すことができます (Explorer は異なる API を持つ XPath に対応しています)。 - -```js -function getElementsByTagNameNSWrapper(ns, elName, doc, context) { - if (!doc) { - doc = document; - } - if (!context) { - context = doc; - } - - var result = doc.evaluate( - '//*[local-name()="' + elName + '" and namespace-uri() = "' + ns + '"]', - context, - null, - XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, - null, - ); - - var a = []; - for (var i = 0; i < result.snapshotLength; i++) { - a[i] = result.snapshotItem(i); - } - return a; -} -``` - ## 仕様書 {{Specifications}} From 9d1f3c770d66ae95fc858c8098325c19b8a60de4 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 21 Jun 2024 00:24:37 +0900 Subject: [PATCH 006/907] =?UTF-8?q?2023/04/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/document/getselection/index.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/files/ja/web/api/document/getselection/index.md b/files/ja/web/api/document/getselection/index.md index 38100091860724..6671bf9caeec42 100644 --- a/files/ja/web/api/document/getselection/index.md +++ b/files/ja/web/api/document/getselection/index.md @@ -1,16 +1,19 @@ --- -title: Document.getSelection() +title: "Document: getSelection() メソッド" +short-title: getSelection() slug: Web/API/Document/getSelection +l10n: + sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b --- {{APIRef("DOM")}} -**`getSelection()`** は {{DOMxRef("Document")}} インターフェイスのプロパティで、ユーザーが選択したテキストの範囲、またはキャレットの現在位置を表す {{DOMxRef("Selection")}} オブジェクトを返します。 +**`getSelection()`** は {{DOMxRef("Document")}} インターフェイスのメソッドで、ユーザーが選択したテキストの範囲、またはキャレットの現在位置を表す {{DOMxRef("Selection")}} オブジェクトを返します。 ## 構文 -```js -getSelection(); +```js-nolint +getSelection() ``` ### 引数 From 26f36a6fac777f029d2cbe3b8ab0be71cac230fd Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 20 Jun 2024 23:38:22 +0900 Subject: [PATCH 007/907] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/document/getelementsbyname/index.md | 54 ++++++++++--------- files/ja/web/api/document/hasfocus/index.md | 3 +- 2 files changed, 32 insertions(+), 25 deletions(-) diff --git a/files/ja/web/api/document/getelementsbyname/index.md b/files/ja/web/api/document/getelementsbyname/index.md index 3a293778993531..b63b5ba9dc4f4c 100644 --- a/files/ja/web/api/document/getelementsbyname/index.md +++ b/files/ja/web/api/document/getelementsbyname/index.md @@ -1,50 +1,56 @@ --- -title: Document.getElementsByName() +title: "Document: getElementsByName() メソッド" +short-title: getElementsByName() slug: Web/API/Document/getElementsByName +l10n: + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc --- {{APIRef("DOM")}} -{{domxref("Document")}} オブジェクトの **`getElementsByName()`** メソッドは、文書内で指定した {{domxref("element.name","name")}} を持つ要素の {{domxref("NodeList")}} コレクションを返します。 +**`getElementsByName()`** は {{domxref("Document")}} オブジェクトのメソッドで、文書内で指定した `name` を持つ要素の {{domxref("NodeList")}} コレクションを返します。 ## 構文 +```js-nolint +getElementsByName(name) ``` -var elements = document.getElementsByName(name); -``` -- _elements_ は、生きた {{domxref("NodeList")}} コレクション、つまり文書内で同じ `name` を持った新しい要素が追加されたり削除されたりすると自動的に更新されるものです。 -- `name` は、要素の `name` 属性の値です。 +### 引数 + +- `name` + - : 探している要素の `name` 属性の値です。 + +### 返値 + +生きた {{domxref("NodeList")}} コレクション、つまり文書内で同じ `name` を持った新しい要素が追加されたり削除されたりすると自動的に更新されるものです。 ## 例 ```html - - document.getElementsByName の使用例 - - - - - + + + document.getElementsByName の使用例 + + + + + ``` +```js +const up_names = document.getElementsByName("up"); +console.log(up_names[0].tagName); // "INPUT" と表示 +``` + ## メモ -{{domxref("element.name","name")}} 属性は、(X)HTML 文書にのみ適用可能です。 +`name` 属性は、(X)HTML 文書にのみ適用可能です。 返却された {{domxref("NodeList")}} コレクションには、 {{htmlelement("meta")}} や {{htmlelement("object")}} など、それに `name` 属性にまったく対応していない要素も含め、指定された `name` を持つ*すべての*要素が含まれます。 -> **警告:** **getElementsByName** メソッドは、 IE10 以前では動作が異なります。この場合、 `getElementsByName()` は指定された [`id` 属性](/ja/docs/Web/HTML/Global_attributes/id)を持つ要素も返します。 `name` および `id` で同じ文字列を使用しないように注意してください。 - -> **警告:** **getElementsByName** メソッドは IE では動作が異なります。この場合、 `getElementsByName()` は `name` 属性を許容しない要素 (`` など) を返しません。 - -> **警告:** IE および Edge では、 {{domxref("NodeList")}} ではなく {{domxref("HTMLCollection")}} を返します。 - ## 仕様書 {{Specifications}} @@ -57,4 +63,4 @@ var elements = document.getElementsByName(name); - {{domxref("document.getElementById()")}} : 固有の `id` を持つ要素への参照を返す - {{domxref("document.getElementsByTagName()")}} : 同じ[タグ名](/ja/docs/Web/API/Element/tagName)の要素への参照を返す -- {{domxref("document.querySelector()")}} : `'div.myclass'` のような CSS セレクターによって要素への参照をかえす +- {{domxref("document.querySelector()")}}: `'div.myclass'` のような CSS セレクターによって要素への参照を返す diff --git a/files/ja/web/api/document/hasfocus/index.md b/files/ja/web/api/document/hasfocus/index.md index af39e91da9018c..dd9c9ccbf05ef9 100644 --- a/files/ja/web/api/document/hasfocus/index.md +++ b/files/ja/web/api/document/hasfocus/index.md @@ -1,8 +1,9 @@ --- title: "Document: hasFocus() メソッド" +short-title: hasFocus() slug: Web/API/Document/hasFocus l10n: - sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc --- {{APIRef}} From f7ca95d38fd32c0f6e29b72d80a4cdcd63bc1e2a Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 21 Jun 2024 22:30:13 +0900 Subject: [PATCH 008/907] =?UTF-8?q?2024/05/22=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/document/hasstorageaccess/index.md | 41 ++++++++++++++----- 1 file changed, 31 insertions(+), 10 deletions(-) diff --git a/files/ja/web/api/document/hasstorageaccess/index.md b/files/ja/web/api/document/hasstorageaccess/index.md index 27d648bce895a3..5a16798d1bed65 100644 --- a/files/ja/web/api/document/hasstorageaccess/index.md +++ b/files/ja/web/api/document/hasstorageaccess/index.md @@ -1,18 +1,23 @@ --- -title: Document.hasStorageAccess() +title: "Document: hasStorageAccess() メソッド" +short-title: hasStorageAccess() slug: Web/API/Document/hasStorageAccess +l10n: + sourceCommit: b97c61b40d8b71532d54fe5af1eab4ca014605ec --- -{{APIRef}}{{seecompattable}} +{{APIRef("Storage Access API")}} -{{domxref("Document")}} インターフェイスの **`hasStorageAccess()`** メソッドは、文書がファーストパーティのストレージへのアクセス権を持っているかどうかを真偽値で解決する {{jsxref("Promise")}} を返します。 +**`hasStorageAccess()`** は {{domxref("Document")}} インターフェイスのメソッドで、この文書が[サードパーティ](/ja/docs/Web/Privacy/Third-party_cookies)の[分離された](/ja/docs/Web/API/Storage_Access_API#unpartitioned_versus_partitioned_cookies)クッキーへのアクセス権を持っているかどうかを示す論理値で解決する {{jsxref("Promise")}} を返します。 -詳しくは [Storage Access API](/ja/docs/Web/API/Storage_Access_API) を参照してください。 +詳しくは [ストレージアクセス API](/ja/docs/Web/API/Storage_Access_API) を参照してください。 + +> **メモ:** このメソッドは {{DOMxRef("Document.hasUnpartitionedCookieAccess()")}} の別名です。{{DOMxRef("Document.hasUnpartitionedCookieAccess()")}} のためにこのメソッドを削除する予定はありません。 ## 構文 -``` -var promise = document.hasStorageAccess(); +```js-nolint +hasStorageAccess() ``` ### 引数 @@ -21,9 +26,19 @@ var promise = document.hasStorageAccess(); ### 返値 -文書がファーストパーティのストレージへのアクセス権を持っているかどうかを真偽値で解決する {{jsxref("Promise")}} です。 +文書がサードパーティ Cookie にアクセスできるかどうかを示す論理値で解決する {{jsxref("Promise")}} です。サードパーティ Cookie にアクセスできる場合は `true`、できない場合は `false` です。 + +このメソッドが返す結果は、状況によっては不正確なことがあります。 + +1. ユーザーがサードパーティクッキーをブロックするブラウザー設定をアクティブにしている場合があります。この場合、サードパーティのクッキーにはまだアクセスできないにもかかわらず、`true` が返されるかもしれません。このような状況を処理するには、クッキーの値が回復不可能になるようなエラーを適切に処理しなければなりません。例えば、個人設定へのアクセスがブロックされていることをユーザーに知らせ、それを使用するには再度サインインするよう促してください。 +2. ブラウザーは既定で、サードパーティクッキーへのアクセスをブロックしない場合があります。この場合、サードパーティクッキーがアクセス可能であっても `false` が返されるかもしれませんし、ストレージへのアクセスは（つまり {{domxref("Document.requestStorageAccess()")}} を通して）リクエストされる必要はないでしょう。この課題を回避するには、{{domxref("Document.cookie")}} に問い合わせてクッキーがアクセス可能かどうかを探し、アクセス可能でない場合は {{domxref("Document.requestStorageAccess()")}} を呼び出します。 -Promise が解決され、関数が最初に呼び出されたときにユーザージェスチャーイベントを処理していた場合、解決ハンドラーはユーザージェスチャーが処理されているかのように実行されるため、ユーザーによるアクティベーションを必要とする API を呼び出すことができます。 +> **メモ:** プロミスが解決され、関数が元々呼び出されたときにユーザージェスチャーイベントが処理されていた場合、解決ハンドラーはユーザーによるジェスチャーが処理されているかのように実行サレルるので、ユーザーによるアクティブ化が要求される API を呼び出すことができます。 + +### 例外 + +- `InvalidStateError` {{domxref("DOMException")}} + - : 現在の {{domxref("Document")}} がまだアクティブでない場合に発生します。 ## 例 @@ -31,16 +46,20 @@ Promise が解決され、関数が最初に呼び出されたときにユーザ document.hasStorageAccess().then((hasAccess) => { if (hasAccess) { // ストレージへのアクセスはすでに許可されています。 + console.log("クッキーへのアクセスが許可されました"); } else { // ストレージへのアクセスはまだ許可されていません。 // requestStorageAccess() を呼び出す必要があります。 + console.log("クッキーへのアクセスが拒否されました"); } }); ``` +> **メモ:** より完全な例は、[ストレージアクセス API の使用](/ja/docs/Web/API/Storage_Access_API/Using)を参照してください。 + ## 仕様書 -この API はまだ提案段階にあります。 — 標準化プロセスはまだ始まっていません。現在のところ、この API の詳細の仕様書は、アップルのブログ投稿の [Introducing Storage Access API](https://webkit.org/blog/8124/introducing-storage-access-api/)、および [WHATWG HTML issue 3338 — Proposal: Storage Access API](https://github.com/whatwg/html/issues/3338) で見ることができます。 +{{Specifications}} ## ブラウザーの互換性 @@ -48,4 +67,6 @@ document.hasStorageAccess().then((hasAccess) => { ## 関連情報 -[Storage Access API](/ja/docs/Web/API/Storage_Access_API) +- {{domxref("Document.hasUnpartitionedCookieAccess()")}}, {{domxref("Document.requestStorageAccess()")}}, {{domxref("Document.requestStorageAccessFor()")}} +- [ストレージアクセス API の使用](/ja/docs/Web/API/Storage_Access_API/Using) +- [Introducing Storage Access API](https://webkit.org/blog/8124/introducing-storage-access-api/) (WebKit blog) From f881af0442930e67c08f8ccaa8c5c4cc391c8f9b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 21 Jun 2024 22:35:54 +0900 Subject: [PATCH 009/907] =?UTF-8?q?2024/05/22=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../hasunpartitionedcookieaccess/index.md | 67 +++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 files/ja/web/api/document/hasunpartitionedcookieaccess/index.md diff --git a/files/ja/web/api/document/hasunpartitionedcookieaccess/index.md b/files/ja/web/api/document/hasunpartitionedcookieaccess/index.md new file mode 100644 index 00000000000000..88348fcffd7b78 --- /dev/null +++ b/files/ja/web/api/document/hasunpartitionedcookieaccess/index.md @@ -0,0 +1,67 @@ +--- +title: "Document: hasUnpartitionedCookieAccess() メソッド" +short-title: hasUnpartitionedCookieAccess() +slug: Web/API/Document/hasUnpartitionedCookieAccess +l10n: + sourceCommit: b97c61b40d8b71532d54fe5af1eab4ca014605ec +--- + +{{APIRef("Storage Access API")}} + +**`hasUnpartitionedCookieAccess()`** は {{domxref("Document")}} インターフェイスのメソッドで、論理値を返すプロミス ({{jsxref("Promise")}}) を返します。これはこの文書が[サードパーティ](/ja/docs/Web/HTTP/Cookies#third-party_cookies)の[分離されていない](/ja/docs/Web/API/Storage_Access_API#unpartitioned_versus_partitioned_cookies)クッキーへのアクセス権があるかどうかを示します。 + +このメソッドは[ストレージアクセス API](/ja/docs/Web/API/Storage_Access_API) の一部です。 + +このメソッドは {{DOMxRef("Document.hasStorageAccess()")}} の新しい名前です。 + +## 構文 + +```js-nolint +hasUnpartitionedCookieAccess() +``` + +### 引数 + +なし。 + +### 返値 + +文書がサードパーティクッキーにアクセスできるかどうかを示す論理値で解決する {{jsxref("Promise")}} です。サードパーティクッキーにアクセスできる場合は `true`、できない場合は `false` です。 + +詳しくは {{DOMxRef("Document.hasStorageAccess()")}} を参照してください。 + +### 例外 + +- `InvalidStateError` {{domxref("DOMException")}} + - : 現在の {{domxref("Document")}} がまだアクティブでない場合に発生します。 + +## 例 + +```js +document.hasUnpartitionedCookieAccess().then((hasAccess) => { + if (hasAccess) { + // ストレージへのアクセスはすでに許可されています。 + console.log("クッキーへのアクセスが許可されました"); + } else { + // ストレージへのアクセスはまだ許可されていません。 + // requestStorageAccess() を呼び出す必要があります。 + console.log("クッキーへのアクセスが拒否されました"); + } +}); +``` + +> **メモ:** より完全な例は、[ストレージアクセス API の使用](/ja/docs/Web/API/Storage_Access_API/Using)を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Document.hasStorageAccess()")}}, {{domxref("Document.requestStorageAccess()")}}, {{domxref("Document.requestStorageAccessFor()")}} +- [ストレージアクセス API の使用](/ja/docs/Web/API/Storage_Access_API/Using) +- [Introducing Storage Access API](https://webkit.org/blog/8124/introducing-storage-access-api/) (WebKit blog) From f527a69da6c20fbd80e10aad4a77db9d6ff41638 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 21 Jun 2024 22:37:41 +0900 Subject: [PATCH 010/907] =?UTF-8?q?2023/04/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/document/importnode/index.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/files/ja/web/api/document/importnode/index.md b/files/ja/web/api/document/importnode/index.md index cedae59842a2ad..d68bf63c6e766d 100644 --- a/files/ja/web/api/document/importnode/index.md +++ b/files/ja/web/api/document/importnode/index.md @@ -1,6 +1,9 @@ --- -title: Document.importNode() +title: "Document: importNode() メソッド" +short-title: importNode() slug: Web/API/Document/importNode +l10n: + sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b --- {{APIRef("DOM")}} @@ -13,9 +16,9 @@ slug: Web/API/Document/importNode ## 構文 -```js -importNode(externalNode); -importNode(externalNode, deep); +```js-nolint +importNode(externalNode) +importNode(externalNode, deep) ``` ### 引数 From f5336a13e51b4dc9a826d037067c378af06ccbcc Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 21 Jun 2024 22:47:16 +0900 Subject: [PATCH 011/907] =?UTF-8?q?2024/03/12=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/document/mozsetimageelement/index.md | 83 +++++++++++++++++++ 1 file changed, 83 insertions(+) create mode 100644 files/ja/web/api/document/mozsetimageelement/index.md diff --git a/files/ja/web/api/document/mozsetimageelement/index.md b/files/ja/web/api/document/mozsetimageelement/index.md new file mode 100644 index 00000000000000..c1d8c405df7282 --- /dev/null +++ b/files/ja/web/api/document/mozsetimageelement/index.md @@ -0,0 +1,83 @@ +--- +title: "Document: mozSetImageElement() メソッド" +short-title: mozSetImageElement() +slug: Web/API/Document/mozSetImageElement +l10n: + sourceCommit: 0a881eea07f0cec6ca4ed85a24af43b367a9f80d +--- + +{{ ApiRef("DOM") }}{{ non-standard_header() }} + +**`Document.mozSetImageElement()`** メソッドは、指定された background 要素 ID を持つ背景の CSS 背景として使用する要素を変更します。 + +## 構文 + +```js-nolint +mozSetImageElement(imageElementId, imageElement) +``` + +### 引数 + +- `imageElementId` は文字列で、{{ cssxref("element", "-moz-element") }} 関数を使用して背景画像を指定する要素の名前を示します。 +- `imageElement` はその画像要素文字列に対応する背景として使用する新しい要素です。`null`を指定すると背景要素を除去します。 + +### 返値 + +なし ({{jsxref("undefined")}})。 + +## 例 + +この例は、{{ HTMLElement("div") }} ブロックの背景を、ユーザーがブロックをクリックするたびに変更します。 + +[この例をライブで見る](https://mdn.dev/archives/media/samples/domref/mozSetImageElement.html). + +```html + +``` + +The CSS defined by the {{ HTMLElement("style") }} block above is used by our {{HTMLElement("div")}} to use an element with the id "canvasbg" as its background. + +```js +let c = 0x00; +function clicked() { + const canvas = document.createElement("canvas"); + canvas.setAttribute("width", 100); + canvas.setAttribute("height", 100); + + const ctx = canvas.getContext("2d"); + ctx.fillStyle = `#${c.toString(16)}0000`; + ctx.fillRect(25, 25, 75, 75); + + c += 0x11; + if (c > 0xff) { + c = 0x00; + } + + document.mozSetImageElement("canvasbg", canvas); +} +``` + +このコードは、ユーザーが {{ HTMLElement("div") }} 要素をクリックするたびに呼び出されます。 +幅と高さを 100 ピクセルに設定した新しい {{ HTMLElement("canvas") }} を作成し、そこに 50 × 50 ピクセルの正方形を描画します。この関数が呼び出されるたびに、正方形は異なる色（赤の部品は毎回増えます）になるので、背景は赤のタイルのパターンで、ユーザーが要素をクリックするたびにだんだん明るく塗りつぶされます。 + +キャンバスが描画されると、`document.mozSetImageElement()` が呼び出され、背景要素の ID として "canvasbg" を使用している CSS の背景が新しいキャンバスに設定されます。 + +## 仕様書 + +どの仕様書にも含まれていません。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{ cssxref("element", "-moz-element") }} From d95d8d38d75279b93ff43b7fb93440ebe4da169b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 21 Jun 2024 22:50:25 +0900 Subject: [PATCH 012/907] =?UTF-8?q?2023/04/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/document/open/index.md | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/files/ja/web/api/document/open/index.md b/files/ja/web/api/document/open/index.md index b37527b2d6035a..4af993beb6a99d 100644 --- a/files/ja/web/api/document/open/index.md +++ b/files/ja/web/api/document/open/index.md @@ -1,6 +1,9 @@ --- -title: Document.open() +title: "Document: open() メソッド" +short-title: open() slug: Web/API/Document/open +l10n: + sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b --- {{APIRef("DOM")}} @@ -14,8 +17,8 @@ slug: Web/API/Document/open ## 構文 -``` -document.open(); +```js-nolint +open() ``` ### 引数 @@ -38,17 +41,13 @@ document.write("

The number is 42

"); document.close(); ``` -## 注 +## メモ ページが読み込まれたあとで {{domxref("document.write()")}} が呼び出されると、自動的に `document.open()` が呼び出されます。 -Firefox や Internet Explorer では何年も前から、すべてのノードの削除に加えて、 JavaScript の変数なども追加で消去していました。今はそうではありません。document non-spec'ed parameters to document.open - -### Gecko 固有のメモ - -Gecko 1.9 以降、このメソッドは他のプロパティと同一オリジンポリシーが同じになるようになり、文書のオリジンを変更しようとした場合に動作しません。 +### コンテンツのセキュリティ -Gecko 1.9.2 以降、 `document.open()` は[プリンシパル](/ja/docs/Security_check_basics)をスタックからフェッチするのではなく、 URI を使用する文書のプリンシパルを使用します。その結果、 [`wrappedJSObject`](/ja/wrappedJSObject) を使用しても、 {{domxref("document.write()")}} を{{Glossary("chrome", "クローム")}}からの信頼できない文書に呼び出すことはできません。考え方については[セキュリティチェックの基本](/ja/Security_check_basics)を参照してください。 +このメソッドは他のプロパティと同じ[同一オリジンポリシー](/ja/docs/Web/Security/Same-origin_policy)に従います。このメソッドによって文書のオリジンが変更される場合は動作しません。 ## 引数 3 つの document.open() @@ -68,7 +67,7 @@ document.open("https://www.github.com", "", "noopener=true"); document.open(type, replace); ``` -`type` は書き込もうとしているデータの MIME タイプ (`text/html` など) を指定し、 replace が設定されていれば (すなわち "replace" の文字列)、新しい文書の履歴エントリが書き込まれている文書の現在の履歴エントリを置き換えることを指定していました。 +`type` は書き込もうとしているデータの MIME タイプ (`text/html` など) を指定し、 replace が設定されていれば (すなわち "replace" の文字列)、新しい文書の履歴エントリーが書き込まれている文書の現在の履歴エントリーを置き換えることを指定していました。 この形式は現在では廃止されています。エラーは発生せず、代わりに `document.open()` に転送されます (つまり、引数なしで実行した場合と同等です)。 履歴の置換動作は常に行われるようになりました。 From e0fb677f04e53bf882e5d1c7f47fbf8a6e68889e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 21 Jun 2024 22:57:03 +0900 Subject: [PATCH 013/907] =?UTF-8?q?2023/08/04=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/document/prepend/index.md | 70 ++++++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 files/ja/web/api/document/prepend/index.md diff --git a/files/ja/web/api/document/prepend/index.md b/files/ja/web/api/document/prepend/index.md new file mode 100644 index 00000000000000..751ce09dc8b40b --- /dev/null +++ b/files/ja/web/api/document/prepend/index.md @@ -0,0 +1,70 @@ +--- +title: "Document: prepend() メソッド" +short-title: prepend() +slug: Web/API/Document/prepend +l10n: + sourceCommit: 542ef6cfd82288925e0a9238b47933f03e2dddca +--- + +{{APIRef("DOM")}} + +**`Document.prepend()`** メソッドは、一連の {{domxref("Node")}} オブジェクトまたは文字列オブジェクトを文書の最初の子の前に挿入します。文字列オブジェクトは等価な {{domxref("Text")}} ノードとして挿入されます。 + +このメソッドは子要素を `Document` に前置します。ツリー内の任意の要素に前置するには {{domxref("Element.prepend()")}} を参照してください。 + +## 構文 + +```js-nolint +prepend(param1) +prepend(param1, param2) +prepend(param1, param2, /* …, */ paramN) +``` + +### 引数 + +- `param1`, …, `paramN` + - : 挿入する一連の {{domxref("Node")}} または文字列オブジェクトです。 + +### 返値 + +なし ({{jsxref("undefined")}})。 + +### 例外 + +- `HierarchyRequestError` {{DOMxRef("DOMException")}} + - : ノードが階層内の指定した点に挿入できなかった場合に発生します。 + +## 例 + +### 文書にルート要素を前置 + +既存の HTML 文書に要素を追加しようとすると、{{HTMLElement("html")}} 要素が既に存在する場合は `HierarchyRequestError' {{domxref("DOMException")}} が発生するかもしれません。 + +```js +let html = document.createElement("html"); +document.prepend(html); +// HierarchyRequestError: The operation would yield an incorrect node tree. +``` + +既存の要素のない新しい文書を作成する場合、ルート HTML 要素（またはルート SVG 要素）を前置することができます。 + +```js +let doc = new Document(); +let html = document.createElement("html"); +doc.prepend(html); + +doc.children; // HTMLCollection [] +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Document.append()")}} +- {{domxref("Element.prepend()")}} From e2eff47bb5fb8cabb2186c4e8ebf2aa0360e7423 Mon Sep 17 00:00:00 2001 From: yassh Date: Thu, 20 Jun 2024 21:12:26 +0900 Subject: [PATCH 014/907] =?UTF-8?q?2023/06/20=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/css/_doublecolon_backdrop/index.md | 74 ++++++++++++++++--- 1 file changed, 64 insertions(+), 10 deletions(-) diff --git a/files/ja/web/css/_doublecolon_backdrop/index.md b/files/ja/web/css/_doublecolon_backdrop/index.md index 929d771c0f6667..b38248298b2bbf 100644 --- a/files/ja/web/css/_doublecolon_backdrop/index.md +++ b/files/ja/web/css/_doublecolon_backdrop/index.md @@ -28,9 +28,9 @@ Backdrop は以下の状況で現れます。 全画面モードで複数の要素が配置されたときは、それぞれに自身の `::backdrop` 疑似要素があります。 ```css -/* backdrop はダイアログが dialog.showModal() が開いている時のみ表示されます */ +/* backdrop はダイアログが dialog.showModal() で開いている時のみ表示されます */ dialog::backdrop { - background: rgba(255, 0, 0, 0.25); + background: rgb(255 0 0 / 25%); } ``` @@ -40,21 +40,73 @@ dialog::backdrop { ## 例 -### 全画面動画の背景のスタイル付け +### モーダルダイアログの backdrop のスタイル付け -この例では、動画が全画面モードに移行したときの backdrop スタイルが、多くのブラウザーでの既定値である黒ではなく、青灰色に構成しています。 +この例では、`::backdrop` 擬似要素を使用して、モーダルで {{htmlelement("dialog")}} が開いているときの backdrop をスタイル付けします。 + +#### HTML + +{{htmlelement("button")}} を設置し、それをクリックすると `` が開くようにします。`` が開いたら、ダイアログを閉じるためのボタンにフォーカスが当たります。 + +```html + + +

このモーダルダイアログには美しい backdrop があります！

+ + +``` + +#### CSS + +[CSS グラデーション](/ja/docs/Web/CSS/gradient)を使用してカラフルなドーナツを作成し、backdrop に背景を追加します。 ```css -video::backdrop { - background-color: #448; +::backdrop { + background-image: radial-gradient( + circle, + #fff 0 5vw, + transparent 5vw 20vw, + #fff 20vw 22.5vw, + #eee 22.5vw + ), + conic-gradient( + #272b66 0 50grad, + #2d559f 50grad 100grad, + #9ac147 100grad 150grad, + #639b47 150grad 200grad, + #e1e23b 200grad 250grad, + #f7941e 250grad 300grad, + #662a6c 300grad 350grad, + #9a1d34 350grad 400grad, + #43a1cd 100grad 150grad, + #ba3e2e + ); } ``` -結果の画面は以下のようになります。 +#### JavaScript + +ダイアログを [`.showModal()`](/ja/docs/Web/API/HTMLDialogElement/showModal) メソッドを使用してモーダルで開き、[`.close()`](/ja/docs/Web/API/HTMLDialogElement/close) メソッドを使用して閉じます。 + +```js +const dialog = document.querySelector("dialog"); +const showButton = document.querySelector("dialog + button"); +const closeButton = document.querySelector("dialog button"); + +// 「ダイアログを表示する」ボタンでダイアログをモーダルで開く +showButton.addEventListener("click", () => { + dialog.showModal(); +}); + +// 「閉じる」ボタンでダイアログを閉じる +closeButton.addEventListener("click", () => { + dialog.close(); +}); +``` -![ほぼ全画面のビデオプレイヤー。ビデオプレイヤーが完全に画面を覆わないので、プレイヤーの上下に紫が見える。](bbb-backdrop.png) +#### 結果 -[動作例を見てみてください](https://mdn.github.io/css-examples/backdrop/index.html)。背景の色を変更した後、動画を全画面表示にすると、背景色の変更を確認することができます。 +{{EmbedLiveSample("Styling a modal dialog's backdrop", 450, 300)}} ## 仕様書 @@ -68,4 +120,6 @@ video::backdrop { - {{cssxref(":fullscreen")}} 疑似クラス - {{HTMLElement("dialog")}} HTML 要素 -- [Fullscreen API](/ja/docs/Web/API/Fullscreen_API) +- [全画面 API](/ja/docs/Web/API/Fullscreen_API) +- [`popover`](/ja/docs/Web/HTML/Global_attributes/popover) HTML グローバル属性 +- [ポップオーバー API](/ja/docs/Web/API/Popover_API) From be9242497ca8f9d96787974ce84704c9792fde28 Mon Sep 17 00:00:00 2001 From: mdn-bot <108879845+mdn-bot@users.noreply.github.com> Date: Tue, 25 Jun 2024 01:29:17 +0000 Subject: [PATCH 015/907] ja: sync translated content --- files/ja/_redirects.txt | 2 ++ files/ja/_wikihistory.json | 16 ++++++++-------- .../index.md | 3 ++- .../turning_off_form_autocompletion/index.md | 3 ++- 4 files changed, 14 insertions(+), 10 deletions(-) rename files/ja/web/security/{securing_your_site => practical_implementation_guides}/index.md (98%) rename files/ja/web/security/{securing_your_site => practical_implementation_guides}/turning_off_form_autocompletion/index.md (97%) diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 12122064c48ebb..53e260f4d6a881 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -4578,6 +4578,8 @@ /ja/docs/Web/Security/HTTP_Strict_Transport_Security /ja/docs/Web/HTTP/Headers/Strict-Transport-Security /ja/docs/Web/Security/Information_Security_Basics /ja/docs/orphaned/Web/Security/Information_Security_Basics /ja/docs/Web/Security/Public_Key_Pinning /ja/docs/conflicting/Web/Security/Certificate_Transparency +/ja/docs/Web/Security/Securing_your_site /ja/docs/Web/Security/Practical_implementation_guides +/ja/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion /ja/docs/Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion /ja/docs/Web/WebGL /ja/docs/Web/API/WebGL_API /ja/docs/Web/WebGL/Adding_2D_content_to_a_WebGL_context /ja/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context /ja/docs/Web/WebGL/Animating_objects_with_WebGL /ja/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index b9b28197194df6..db568772e482bf 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -29501,6 +29501,14 @@ "modified": "2020-08-31T12:56:43.359Z", "contributors": ["mfuji09", "YuichiNukiyama", "hashedhyphen", "clariroid"] }, + "Web/Security/Practical_implementation_guides": { + "modified": "2020-07-25T12:16:18.770Z", + "contributors": ["pcw", "mfuji09", "satakeh", "hashedhyphen"] + }, + "Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion": { + "modified": "2020-07-25T12:03:22.245Z", + "contributors": ["pcw", "mfuji09", "hashedhyphen"] + }, "Web/Security/Referer_header:_privacy_and_security_concerns": { "modified": "2020-10-24T06:28:29.243Z", "contributors": ["silverskyvicto", "soratako", "mfuji09", "ShowGoTagami"] @@ -29534,14 +29542,6 @@ "modified": "2020-10-23T09:50:39.875Z", "contributors": ["silverskyvicto", "mfuji09", "YuichiNukiyama"] }, - "Web/Security/Securing_your_site": { - "modified": "2020-07-25T12:16:18.770Z", - "contributors": ["pcw", "mfuji09", "satakeh", "hashedhyphen"] - }, - "Web/Security/Securing_your_site/Turning_off_form_autocompletion": { - "modified": "2020-07-25T12:03:22.245Z", - "contributors": ["pcw", "mfuji09", "hashedhyphen"] - }, "Web/Security/Subdomain_takeovers": { "modified": "2020-10-23T16:21:24.230Z", "contributors": ["silverskyvicto"] diff --git a/files/ja/web/security/securing_your_site/index.md b/files/ja/web/security/practical_implementation_guides/index.md similarity index 98% rename from files/ja/web/security/securing_your_site/index.md rename to files/ja/web/security/practical_implementation_guides/index.md index dcae226d3ad6e7..93b552b1e05817 100644 --- a/files/ja/web/security/securing_your_site/index.md +++ b/files/ja/web/security/practical_implementation_guides/index.md @@ -1,6 +1,7 @@ --- title: サイトの安全化 -slug: Web/Security/Securing_your_site +slug: Web/Security/Practical_implementation_guides +original_slug: Web/Security/Securing_your_site --- サイトをより安全にする方法はいくつもあります。この記事では、その方法を紹介するとともに、他のより有益な記事へのリンクを掲載しています。 diff --git a/files/ja/web/security/securing_your_site/turning_off_form_autocompletion/index.md b/files/ja/web/security/practical_implementation_guides/turning_off_form_autocompletion/index.md similarity index 97% rename from files/ja/web/security/securing_your_site/turning_off_form_autocompletion/index.md rename to files/ja/web/security/practical_implementation_guides/turning_off_form_autocompletion/index.md index b6caf37e4c392e..33ce693c461aae 100644 --- a/files/ja/web/security/securing_your_site/turning_off_form_autocompletion/index.md +++ b/files/ja/web/security/practical_implementation_guides/turning_off_form_autocompletion/index.md @@ -1,6 +1,7 @@ --- title: フォームの自動補完を無効にするには -slug: Web/Security/Securing_your_site/Turning_off_form_autocompletion +slug: Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion +original_slug: Web/Security/Securing_your_site/Turning_off_form_autocompletion --- この記事では、フォーム入力欄の自動補完をウェブサイト側から無効にする方法を説明します。 From bdd20a6ae2e6ca26b584a8d186c0cf773362081c Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Wed, 26 Jun 2024 08:03:02 +0800 Subject: [PATCH 016/907] [zh-cn]: create the translation of `contextualIdentities.get()` method (#21299) --- .../api/contextualidentities/get/index.md | 55 +++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/get/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/get/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/get/index.md new file mode 100644 index 00000000000000..f4e092a1b20a9e --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/get/index.md @@ -0,0 +1,55 @@ +--- +title: contextualIdentities.get() +slug: Mozilla/Add-ons/WebExtensions/API/contextualIdentities/get +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c +--- + +{{AddonSidebar}} + +获取给定其 cookie 存储 ID 的场景身份的信息。 + +这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。 + +## 语法 + +```js-nolint +let getContext = browser.contextualIdentities.get( + cookieStoreId // 字符串 +) +``` + +### 参数 + +- `cookieStoreId` + - : `string`。这个场景身份的 cookie 存储 ID。因为场景身份都有自己的 cookie 存储，所以这充当场景身份本身的标识符。 + +### 返回值 + +一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个描述该身份的 {{WebExtAPIRef('contextualIdentities.ContextualIdentity', 'ContextualIdentity')}}。如果找不到身份或场景身份特性未启用，则该 promise 将被拒绝。 + +## 浏览器兼容性 + +{{Compat}} + +## 示例 + +此示例尝试检索 ID 为“firefox-container-1”的场景身份： + +```js +function onGot(context) { + if (!context) { + console.error("未找到场景"); + } else { + console.log(`名字：${context.name}`); + } +} + +function onError(e) { + console.error(e); +} + +browser.contextualIdentities.get("firefox-container-1").then(onGot, onError); +``` + +{{WebExtExamples}} From e4876f4da1fc959c94f8f567c339ac5df18bb8b2 Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Wed, 26 Jun 2024 08:08:50 +0800 Subject: [PATCH 017/907] [zh-cn]: create the translation of `contextualIdentities.create()` method (#21298) --- .../api/contextualidentities/create/index.md | 94 +++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/create/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/create/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/create/index.md new file mode 100644 index 00000000000000..c85d00f67dd4cd --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/create/index.md @@ -0,0 +1,94 @@ +--- +title: contextualIdentities.create() +slug: Mozilla/Add-ons/WebExtensions/API/contextualIdentities/create +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c +--- + +{{AddonSidebar}} + +创建一个新的场景身份。创建后，用户将能够创建属于这个场景身份的新标签，就像他们使用内置身份一样。 + +这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。 + +## 语法 + +```js-nolint +let createContext = browser.contextualIdentities.create( + details // 对象 +) +``` + +### 参数 + +- `details` + + - : `object`。包含新场景身份属性的对象。这包含以下属性： + + - `name` + + - : `string`。新标识的名称。这将显示在浏览器的用户界面中，使用户能够打开属于此身份的新标签。它还将在属于此身份的标签的 URL 栏中显示。 + + - `color` + + - : `string`。与新身份关联的颜色。这将用于突出显示属于此身份的标签。你可以在此处提供以下任何值： + + - "blue" + - "turquoise" + - "green" + - "yellow" + - "orange" + - "red" + - "pink" + - "purple" + - "toolbar" + + - `icon` + + - : `string`。显示在属于此身份的标签的 URL 栏中的图标名称。你可以在此处提供以下任何值： + + - "fingerprint" + - "briefcase" + - "dollar" + - "cart" + - "circle" + - "gift" + - "vacation" + - "food" + - "fruit" + - "pet" + - "tree" + - "chill" + - "fence" + +### 返回值 + +一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个描述新身份的 {{WebExtAPIRef('contextualIdentities.ContextualIdentity', 'ContextualIdentity')}}。如果场景身份特性未启用，则该 promise 将被拒绝。 + +## 浏览器兼容性 + +{{Compat}} + +## 示例 + +此示例创建一个新的场景身份并记录其 cookie 存储 ID： + +```js +function onCreated(context) { + console.log(`新身份的 ID 是：${context.cookieStoreId}。`); +} + +function onError(e) { + console.error(e); +} + +browser.contextualIdentities + .create({ + name: "my-thing", + color: "purple", + icon: "briefcase", + }) + .then(onCreated, onError); +``` + +{{WebExtExamples}} From 8da6bc88bbb4ced60bef2373364b018a5cff4f7f Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Wed, 26 Jun 2024 08:12:33 +0800 Subject: [PATCH 018/907] [zh-cn]: create the translation of `contextualIdentities.query()` method (#21305) --- .../api/contextualidentities/query/index.md | 77 +++++++++++++++++++ 1 file changed, 77 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/query/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/query/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/query/index.md new file mode 100644 index 00000000000000..b98ed92f20bcdb --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/query/index.md @@ -0,0 +1,77 @@ +--- +title: contextualIdentities.query() +slug: Mozilla/Add-ons/WebExtensions/API/contextualIdentities/query +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c +--- + +{{AddonSidebar}} + +获取有关所有场景身份的信息，或获取与给定过滤参数匹配的场景身份的信息。 + +这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。 + +## 语法 + +```js-nolint +let getContext = browser.contextualIdentities.query( + details // 对象 +) +``` + +### 参数 + +- `details` + + - : `object`。一个用于过滤返回的场景身份的对象。可以包含以下任意属性： + + - `name` {{optional_inline}} + - : `string`。仅返回具有此名称的场景身份。 + +### 返回值 + +一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，在场景身份查询完成时其会兑现一个 {{WebExtAPIRef('contextualIdentities.ContextualIdentity', 'ContextualIdentity')}} 对象数组，每个对象描述一个身份。如果未启用场景身份特性，则 promise 将被拒绝。 + +## 浏览器兼容性 + +{{Compat}} + +## 示例 + +检索所有场景身份，并记录它们的名称： + +```js +function onGot(contexts) { + for (const context of contexts) { + console.log(`名称：${context.name}`); + } +} + +function onError(error) { + console.error(error); +} + +browser.contextualIdentities.query({}).then(onGot, onError); +``` + +检索所有名称为“my-thing”的场景身份，并记录它们的名称： + +```js +function onGot(contexts) { + for (const context of contexts) { + console.log(`名称：${context.name}`); + } +} + +function onError(error) { + console.error(error); +} + +browser.contextualIdentities + .query({ + name: "my-thing", + }) + .then(onGot, onError); +``` + +{{WebExtExamples}} From 1d10c97dd71de307a7e37f648a1941fc7205fcfd Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Wed, 26 Jun 2024 08:18:30 +0800 Subject: [PATCH 019/907] [zh-cn]: create the translation of `contextualIdentities.remove()` method (#21306) --- .../api/contextualidentities/remove/index.md | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/remove/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/remove/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/remove/index.md new file mode 100644 index 00000000000000..486938577fee8f --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/remove/index.md @@ -0,0 +1,57 @@ +--- +title: contextualIdentities.remove() +slug: Mozilla/Add-ons/WebExtensions/API/contextualIdentities/remove +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c +--- + +{{AddonSidebar}} + +移除给定 cookie 存储 ID 的场景身份。 + +这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。 + +## 语法 + +```js-nolint +let removeContext = browser.contextualIdentities.remove( + cookieStoreId // 字符串 +) +``` + +### 参数 + +- `cookieStoreId` + - : `string`。场景身份的 cookie 存储 的 ID。由于每个场景身份都有自己的 cookie 存储，因此这也作为场景身份的标识符。 + +### 返回值 + +一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，在场景身份删除完成时其会兑现一个描述已删除身份的 {{WebExtAPIRef('contextualIdentities.ContextualIdentity', 'ContextualIdentity')}} 对象。如果无法找到该身份或未启用场景身份特性，则 promise 将被拒绝。 + +## 浏览器兼容性 + +{{Compat}} + +## 示例 + +此示例尝试移除 ID 为“firefox-container-1”的场景身份： + +```js +function onRemoved(context) { + if (!context) { + console.error("场景未找到"); + } else { + console.log(`已删除身份：${context.cookieStoreId}.`); + } +} + +function onError(e) { + console.error(e); +} + +browser.contextualIdentities + .remove("firefox-container-1") + .then(onRemoved, onError); +``` + +{{WebExtExamples}} From 2f17639f00544e0a945fd4f71f11edd282641189 Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Wed, 26 Jun 2024 08:20:39 +0800 Subject: [PATCH 020/907] [zh-cn]: create the translation of `contextualIdentities.onCreated` event (#21309) --- .../contextualidentities/oncreated/index.md | 82 +++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/oncreated/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/oncreated/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/oncreated/index.md new file mode 100644 index 00000000000000..1dea24a6d7ba3d --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/oncreated/index.md @@ -0,0 +1,82 @@ +--- +title: contextualIdentities.onCreated +slug: Mozilla/Add-ons/WebExtensions/API/contextualIdentities/onCreated +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c +--- + +{{AddonSidebar}} + +当创建新的场景身份时触发事件。场景身份可以由扩展使用 `contextualIdentities` API 创建，也可以由用户直接通过浏览器的用户界面创建。 + +## 语法 + +```js-nolint +browser.contextualIdentities.onCreated.addListener(listener) +browser.contextualIdentities.onCreated.removeListener(listener) +browser.contextualIdentities.onCreated.hasListener(listener) +``` + +事件有三个函数： + +- `addListener(listener)` + - : 添加一个监听器到这个事件。 +- `removeListener(listener)` + - : 停止监听这个事件。`listener` 参数是要移除的监听器。 +- `hasListener(listener)` + - : 检查 `listener` 是否已注册为此事件的监听器。如果正在监听，则返回 `true`，否则返回 `false`。 + +## addListener 语法 + +### 参数 + +- `listener` + - : 当事件发生时调用的函数。该函数接收以下参数： + - `changeInfo` + - : `object`。包含单个属性 `contextualIdentity` 的对象，它是一个表示创建的身份的 {{WebExtAPIRef("contextualIdentities.ContextualIdentity")}} 对象。 + +## 浏览器兼容性 + +{{Compat}} + +## 示例 + +```js +function handleCreated(changeInfo) { + console.log(`已创建：${changeInfo.contextualIdentity.name}`); +} + +browser.contextualIdentities.onCreated.addListener(handleCreated); +``` + +{{WebExtExamples}} + + From c10965f362b0e219590e4650fee059f2d2369b4d Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Wed, 26 Jun 2024 08:27:13 +0800 Subject: [PATCH 021/907] [zh-cn]: create the translation of `contextualIdentities.onUpdated` event (#21318) --- .../contextualidentities/onupdated/index.md | 84 +++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/onupdated/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/onupdated/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/onupdated/index.md new file mode 100644 index 00000000000000..6ee2acb87039f0 --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/onupdated/index.md @@ -0,0 +1,84 @@ +--- +title: contextualIdentities.onUpdated +slug: Mozilla/Add-ons/WebExtensions/API/contextualIdentities/onUpdated +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c +--- + +{{AddonSidebar}} + +当场景身份的属性（例如其名称、图标或颜色）发生变化时触发。场景身份可以由扩展使用 `contextualIdentities` API 更新，也可以由用户直接通过浏览器的用户界面更新。 + +## 语法 + +```js-nolint +browser.contextualIdentities.onUpdated.addListener(listener) +browser.contextualIdentities.onUpdated.removeListener(listener) +browser.contextualIdentities.onUpdated.hasListener(listener) +``` + +事件有三个函数： + +- `addListener(listener)` + - : 向此事件添加一个监听器。 +- `removeListener(listener)` + - : 停止监听此事件。`listener` 参数是要移除的监听器。 +- `hasListener(listener)` + - : 检查 `listener` 是否已注册此事件。如果正在监听，返回 `true`，否则返回 `false`。 + +## addListener 语法 + +### 参数 + +- `listener` + + - : 当此事件发生时调用的函数。该函数传递一个参数： + + - `changeInfo` + - : `object`。包含单个属性 `contextualIdentity` 的对象（一个 {{WebExtAPIRef("contextualIdentities.ContextualIdentity")}} 对象表示属性被更新的身份）。 + +## 浏览器兼容性 + +{{Compat}} + +## 示例 + +```js +function handleUpdated(changeInfo) { + console.log(`已更新：${changeInfo.contextualIdentity.name}`); +} + +browser.contextualIdentities.onUpdated.addListener(handleUpdated); +``` + +{{WebExtExamples}} + + From 60dfca5ffeb23d7c40d86c6f1a3db9d2a6740c1a Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Wed, 26 Jun 2024 10:22:22 +0800 Subject: [PATCH 022/907] [zh-cn]: create the translation of `contextualIdentities.onRemoved` event (#21310) Co-authored-by: A1lo --- .../contextualidentities/onremoved/index.md | 82 +++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/onremoved/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/onremoved/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/onremoved/index.md new file mode 100644 index 00000000000000..0c7c60fbb604e9 --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/onremoved/index.md @@ -0,0 +1,82 @@ +--- +title: contextualIdentities.onRemoved +slug: Mozilla/Add-ons/WebExtensions/API/contextualIdentities/onRemoved +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c +--- + +{{AddonSidebar}} + +当删除一个场景身份时触发事件。场景身份可以由扩展使用 `contextualIdentities` API 删除，也可以由用户直接通过浏览器的用户界面删除。 + +## 语法 + +```js-nolint +browser.contextualIdentities.onRemoved.addListener(listener) +browser.contextualIdentities.onRemoved.removeListener(listener) +browser.contextualIdentities.onRemoved.hasListener(listener) +``` + +事件有三个函数： + +- `addListener(listener)` + - : 添加一个监听器到这个事件。 +- `removeListener(listener)` + - : 停止监听这个事件。`listener` 参数是要移除的监听器。 +- `hasListener(listener)` + - : 检查 `listener` 是否已注册为此事件的监听器。如果正在监听，则返回 `true`，否则返回 `false`。 + +## addListener 语法 + +### 参数 + +- `listener` + - : 当事件发生时调用的函数。该函数接收以下参数： + - `changeInfo` + - : `object`。包含单个属性 `contextualIdentity` 的对象，它是一个表示被删除的身份的 {{WebExtAPIRef("contextualIdentities.ContextualIdentity")}} 对象。 + +## 浏览器兼容性 + +{{Compat}} + +## 示例 + +```js +function handleRemoved(changeInfo) { + console.log(`已删除：${changeInfo.contextualIdentity.name}`); +} + +browser.contextualIdentities.onRemoved.addListener(handleRemoved); +``` + +{{WebExtExamples}} + + From 59fae987c91402759307a4ca1bf3a304e704debd Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Wed, 26 Jun 2024 09:25:38 +0200 Subject: [PATCH 023/907] [ko] sync translated content (#21915) ko: sync translated content --- files/ko/_redirects.txt | 2 ++ .../index.md | 3 ++- .../turning_off_form_autocompletion/index.md | 3 ++- 3 files changed, 6 insertions(+), 2 deletions(-) rename files/ko/web/security/{securing_your_site => practical_implementation_guides}/index.md (98%) rename files/ko/web/security/{securing_your_site => practical_implementation_guides}/turning_off_form_autocompletion/index.md (97%) diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt index 427e4ce157a0a4..c874592be86e09 100644 --- a/files/ko/_redirects.txt +++ b/files/ko/_redirects.txt @@ -808,6 +808,8 @@ /ko/docs/Web/SVG/Tutorial/시작하기 /ko/docs/Web/SVG/Tutorial/Getting_Started /ko/docs/Web/SVG/Tutorial/위치 /ko/docs/Web/SVG/Tutorial/Positions /ko/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content /ko/docs/orphaned/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content +/ko/docs/Web/Security/Securing_your_site /ko/docs/Web/Security/Practical_implementation_guides +/ko/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion /ko/docs/Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion /ko/docs/Web/WebGL /ko/docs/Web/API/WebGL_API /ko/docs/Web/WebGL/Adding_2D_content_to_a_WebGL_context /ko/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context /ko/docs/Web/WebGL/Animating_objects_with_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL diff --git a/files/ko/web/security/securing_your_site/index.md b/files/ko/web/security/practical_implementation_guides/index.md similarity index 98% rename from files/ko/web/security/securing_your_site/index.md rename to files/ko/web/security/practical_implementation_guides/index.md index 0f2494da1fa605..d6f2c2c97d6c01 100644 --- a/files/ko/web/security/securing_your_site/index.md +++ b/files/ko/web/security/practical_implementation_guides/index.md @@ -1,6 +1,7 @@ --- title: 사이트 보안 -slug: Web/Security/Securing_your_site +slug: Web/Security/Practical_implementation_guides +original_slug: Web/Security/Securing_your_site l10n: sourceCommit: e74627e6fd9ba19696b918c2bdddfff8aa160787 --- diff --git a/files/ko/web/security/securing_your_site/turning_off_form_autocompletion/index.md b/files/ko/web/security/practical_implementation_guides/turning_off_form_autocompletion/index.md similarity index 97% rename from files/ko/web/security/securing_your_site/turning_off_form_autocompletion/index.md rename to files/ko/web/security/practical_implementation_guides/turning_off_form_autocompletion/index.md index d4d57810407f1d..404fc026ea1006 100644 --- a/files/ko/web/security/securing_your_site/turning_off_form_autocompletion/index.md +++ b/files/ko/web/security/practical_implementation_guides/turning_off_form_autocompletion/index.md @@ -1,6 +1,7 @@ --- title: 양식 자동 완성을 끄는 방법 -slug: Web/Security/Securing_your_site/Turning_off_form_autocompletion +slug: Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion +original_slug: Web/Security/Securing_your_site/Turning_off_form_autocompletion l10n: sourceCommit: e74627e6fd9ba19696b918c2bdddfff8aa160787 --- From d719a44cf95b241c79e7aedda4fb879df786c964 Mon Sep 17 00:00:00 2001 From: yzr Date: Wed, 26 Jun 2024 15:30:38 +0800 Subject: [PATCH 024/907] fix typo (#21935) --- files/zh-cn/web/api/url/host/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/api/url/host/index.md b/files/zh-cn/web/api/url/host/index.md index eee55fd94ccef8..65bd99e0dec9d2 100644 --- a/files/zh-cn/web/api/url/host/index.md +++ b/files/zh-cn/web/api/url/host/index.md @@ -7,7 +7,7 @@ l10n: {{ApiRef("URL API")}} {{AvailableInWorkers}} -{{domxref("URL")}} 接口的 **`host`** 属性是一个包含主机信息（即{{domxref("URL.hostname", "主机名", "", 1)}}）的字符串，然后，如果 URL 的{{glossary("port", "端口")}}非空，则会出现 `':'`，后根 URL 的{{domxref("URL.port", "端口", "", 1)}}。 +{{domxref("URL")}} 接口的 **`host`** 属性是一个包含主机信息（即{{domxref("URL.hostname", "主机名", "", 1)}}）的字符串，然后，如果 URL 的{{glossary("port", "端口")}}非空，则会出现 `':'`，后跟 URL 的{{domxref("URL.port", "端口", "", 1)}}。 ## 值 From d69e8471378f5daea1ab0b0b1276a82bbcb1c505 Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Wed, 26 Jun 2024 13:38:10 +0200 Subject: [PATCH 025/907] [pt-br] sync translated content (#21916) pt-br: sync translated content --- files/pt-br/_redirects.txt | 2 ++ files/pt-br/_wikihistory.json | 4 ++-- .../index.md | 3 ++- .../turning_off_form_autocompletion/index.md | 3 ++- 4 files changed, 8 insertions(+), 4 deletions(-) rename files/pt-br/web/security/{securing_your_site => practical_implementation_guides}/index.md (97%) rename files/pt-br/web/security/{securing_your_site => practical_implementation_guides}/turning_off_form_autocompletion/index.md (96%) diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt index 4e6a81369f02be..515cc4eb7887c0 100644 --- a/files/pt-br/_redirects.txt +++ b/files/pt-br/_redirects.txt @@ -898,6 +898,8 @@ /pt-BR/docs/Web/SVG/Element/animateColor /pt-BR/docs/conflicting/Web/SVG/Element/animate /pt-BR/docs/Web/SVG/Element/texto /pt-BR/docs/Web/SVG/Element/text /pt-BR/docs/Web/SVG/Intensivo_de_Namespaces /pt-BR/docs/Web/SVG/Namespaces_Crash_Course +/pt-BR/docs/Web/Security/Securing_your_site /pt-BR/docs/Web/Security/Practical_implementation_guides +/pt-BR/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion /pt-BR/docs/Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion /pt-BR/docs/Web/Tutoriais /pt-BR/docs/Web/Tutorials /pt-BR/docs/Web/WebGL /pt-BR/docs/Web/API/WebGL_API /pt-BR/docs/Web/Web_Components /pt-BR/docs/Web/API/Web_components diff --git a/files/pt-br/_wikihistory.json b/files/pt-br/_wikihistory.json index 290d7885441962..3292765ce649ad 100644 --- a/files/pt-br/_wikihistory.json +++ b/files/pt-br/_wikihistory.json @@ -10257,11 +10257,11 @@ "Fulanodigital" ] }, - "Web/Security/Securing_your_site": { + "Web/Security/Practical_implementation_guides": { "modified": "2019-03-23T22:41:54.591Z", "contributors": ["julio-elipse", "ygormaximo", "marumari"] }, - "Web/Security/Securing_your_site/Turning_off_form_autocompletion": { + "Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion": { "modified": "2019-03-23T22:41:55.986Z", "contributors": [ "VitorTakara", diff --git a/files/pt-br/web/security/securing_your_site/index.md b/files/pt-br/web/security/practical_implementation_guides/index.md similarity index 97% rename from files/pt-br/web/security/securing_your_site/index.md rename to files/pt-br/web/security/practical_implementation_guides/index.md index 2d9c69611966e1..66cb3d0b23465e 100644 --- a/files/pt-br/web/security/securing_your_site/index.md +++ b/files/pt-br/web/security/practical_implementation_guides/index.md @@ -1,6 +1,7 @@ --- title: Deixando seu site seguro -slug: Web/Security/Securing_your_site +slug: Web/Security/Practical_implementation_guides +original_slug: Web/Security/Securing_your_site --- Há várias coisas que você pode fazer para ajudar na segurança do seu site. Esse artigo oferece uma série de sugestões, bem como links para outros artigos fornecendo informações mais úteis. diff --git a/files/pt-br/web/security/securing_your_site/turning_off_form_autocompletion/index.md b/files/pt-br/web/security/practical_implementation_guides/turning_off_form_autocompletion/index.md similarity index 96% rename from files/pt-br/web/security/securing_your_site/turning_off_form_autocompletion/index.md rename to files/pt-br/web/security/practical_implementation_guides/turning_off_form_autocompletion/index.md index fe24f29d5a49f8..665b19e7725901 100644 --- a/files/pt-br/web/security/securing_your_site/turning_off_form_autocompletion/index.md +++ b/files/pt-br/web/security/practical_implementation_guides/turning_off_form_autocompletion/index.md @@ -1,6 +1,7 @@ --- title: How to Turn Off Form Autocompletion -slug: Web/Security/Securing_your_site/Turning_off_form_autocompletion +slug: Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion +original_slug: Web/Security/Securing_your_site/Turning_off_form_autocompletion --- Este artigo explica como um Site da Web pode desabilitar a função autocompletar de campos de formulário. From 195a156e8d52cc6f0db1af773ec4905c14a4187e Mon Sep 17 00:00:00 2001 From: Thiago Miquelleto Tolotti <110072374+thiagomtolotti@users.noreply.github.com> Date: Wed, 26 Jun 2024 08:38:52 -0300 Subject: [PATCH 026/907] fixed typos in FormData.getAll() in PT-BR (#21931) --- files/pt-br/web/api/formdata/getall/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/pt-br/web/api/formdata/getall/index.md b/files/pt-br/web/api/formdata/getall/index.md index a1e981eb00a1ac..3ae44b0c56da9b 100644 --- a/files/pt-br/web/api/formdata/getall/index.md +++ b/files/pt-br/web/api/formdata/getall/index.md @@ -34,7 +34,7 @@ A seguinte linha cria um objeto `FormData` vazio: var formData = new FormData(); ``` -Se nos adicionarmos dois valores oara `username` {{domxref("FormData.append")}}: +Se nós adicionarmos dois valores para `username` {{domxref("FormData.append")}}: ```js formData.append("username", "Chris"); From e23480e5b7fa372c10c916ce37bf3248b5ef06df Mon Sep 17 00:00:00 2001 From: takai-minoru Date: Sat, 22 Jun 2024 13:19:42 +0900 Subject: [PATCH 027/907] copied index.md from en-US --- .../float16array/float16array/index.md | 82 ++++++++++++++++ .../global_objects/float16array/index.md | 94 +++++++++++++++++++ 2 files changed, 176 insertions(+) create mode 100644 files/ja/web/javascript/reference/global_objects/float16array/float16array/index.md create mode 100644 files/ja/web/javascript/reference/global_objects/float16array/index.md diff --git a/files/ja/web/javascript/reference/global_objects/float16array/float16array/index.md b/files/ja/web/javascript/reference/global_objects/float16array/float16array/index.md new file mode 100644 index 00000000000000..4a091111f976c7 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/float16array/float16array/index.md @@ -0,0 +1,82 @@ +--- +title: Float16Array() constructor +slug: Web/JavaScript/Reference/Global_Objects/Float16Array/Float16Array +page-type: javascript-constructor +browser-compat: javascript.builtins.Float16Array.Float16Array +--- + +{{JSRef}} + +The **`Float16Array()`** constructor creates {{jsxref("Float16Array")}} objects. The contents are initialized to `0` unless initialization data is explicitly provided. + +## Syntax + +```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) +``` + +> **Note:** `Float16Array()` can only be constructed with [`new`](/en-US/docs/Web/JavaScript/Reference/Operators/new). Attempting to call it without `new` throws a {{jsxref("TypeError")}}. + +### Parameters + +See [`TypedArray`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#parameters). + +### Exceptions + +See [`TypedArray`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#exceptions). + +## Examples + +### Different ways to create a Float16Array + +```js +// From a length +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 + +// From an array +const x = new Float16Array([21, 31]); +console.log(x[1]); // 31 + +// From another TypedArray +const y = new Float16Array(x); +console.log(y[0]); // 21 + +// From an ArrayBuffer +const buffer = new ArrayBuffer(32); +const z = new Float16Array(buffer, 4, 4); +console.log(z.byteOffset); // 4 + +// From an iterable +const iterable = (function* () { + yield* [1, 2, 3]; +})(); +const float16FromIterable = new Float16Array(iterable); +console.log(float16FromIterable); +// Float16Array [1, 2, 3] +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [JavaScript typed arrays](/en-US/docs/Web/JavaScript/Guide/Typed_arrays) guide +- {{jsxref("TypedArray")}} +- {{jsxref("ArrayBuffer")}} +- {{jsxref("DataView")}} diff --git a/files/ja/web/javascript/reference/global_objects/float16array/index.md b/files/ja/web/javascript/reference/global_objects/float16array/index.md new file mode 100644 index 00000000000000..c2cdfad2e16208 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/float16array/index.md @@ -0,0 +1,94 @@ +--- +title: Float16Array +slug: Web/JavaScript/Reference/Global_Objects/Float16Array +page-type: javascript-class +browser-compat: javascript.builtins.Float16Array +--- + +{{JSRef}} + +The **`Float16Array`** typed array represents an array of 16-bit floating point numbers in the platform byte order. If control over byte order is needed, use {{jsxref("DataView")}} instead. The contents are initialized to `0` unless initialization data is explicitly provided. Once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). + +`Float16Array` is a subclass of the hidden {{jsxref("TypedArray")}} class. + +> **Note:** Float16 support is not universal, both in the JavaScript API and the underlying CPU architecture. Using it may result in slower performance on some platforms. It is intended for interacting with highly optimized and performance-sensitive systems such as [float-backed canvases](https://github.com/w3c/ColorWeb-CG/blob/main/canvas_float.md), WebGPU, WebGL, and deep learning models including [stable diffusion](https://github.com/huggingface/blog/blob/main/stable_diffusion.md). + +## Constructor + +- {{jsxref("Float16Array/Float16Array", "Float16Array()")}} + - : Creates a new `Float16Array` object. + +## Static properties + +_Also inherits static properties from its parent {{jsxref("TypedArray")}}_. + +- {{jsxref("TypedArray/BYTES_PER_ELEMENT", "Float16Array.BYTES_PER_ELEMENT")}} + - : Returns a number value of the element size. `2` in the case of `Float16Array`. + +## Static methods + +_Inherits static methods from its parent {{jsxref("TypedArray")}}_. + +## Instance properties + +_Also inherits instance properties from its parent {{jsxref("TypedArray")}}_. + +These properties are defined on `Float16Array.prototype` and shared by all `Float16Array` instances. + +- {{jsxref("TypedArray/BYTES_PER_ELEMENT", "Float16Array.prototype.BYTES_PER_ELEMENT")}} + - : Returns a number value of the element size. `2` in the case of a `Float16Array`. +- {{jsxref("Object/constructor", "Float16Array.prototype.constructor")}} + - : The constructor function that created the instance object. For `Float16Array` instances, the initial value is the {{jsxref("Float16Array/Float16Array", "Float16Array")}} constructor. + +## Instance methods + +_Inherits instance methods from its parent {{jsxref("TypedArray")}}_. + +## Examples + +### Different ways to create a Float16Array + +```js +// From a length +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 + +// From an array +const x = new Float16Array([21, 31]); +console.log(x[1]); // 31 + +// From another TypedArray +const y = new Float16Array(x); +console.log(y[0]); // 21 + +// From an ArrayBuffer +const buffer = new ArrayBuffer(32); +const z = new Float16Array(buffer, 4, 4); +console.log(z.byteOffset); // 4 + +// From an iterable +const iterable = (function* () { + yield* [1, 2, 3]; +})(); +const float16FromIterable = new Float16Array(iterable); +console.log(float16FromIterable); +// Float16Array [1, 2, 3] +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [JavaScript typed arrays](/en-US/docs/Web/JavaScript/Guide/Typed_arrays) guide +- {{jsxref("TypedArray")}} +- {{jsxref("ArrayBuffer")}} +- {{jsxref("DataView")}} From baab98de5265d8ea86f8dee88a7a9bb964212d54 Mon Sep 17 00:00:00 2001 From: takai-minoru Date: Sat, 22 Jun 2024 14:00:57 +0900 Subject: [PATCH 028/907] translate Float16Array document --- .../global_objects/float16array/index.md | 50 +++++++++---------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/float16array/index.md b/files/ja/web/javascript/reference/global_objects/float16array/index.md index c2cdfad2e16208..64a7fa63ffd27c 100644 --- a/files/ja/web/javascript/reference/global_objects/float16array/index.md +++ b/files/ja/web/javascript/reference/global_objects/float16array/index.md @@ -1,52 +1,52 @@ --- title: Float16Array slug: Web/JavaScript/Reference/Global_Objects/Float16Array -page-type: javascript-class -browser-compat: javascript.builtins.Float16Array +l10n: + sourceCommit: dd339290fa3a42d9a7f079e17a62e1df1206f29d --- {{JSRef}} -The **`Float16Array`** typed array represents an array of 16-bit floating point numbers in the platform byte order. If control over byte order is needed, use {{jsxref("DataView")}} instead. The contents are initialized to `0` unless initialization data is explicitly provided. Once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). +**`Float16Array`** 型配列は、プラットフォームのバイトオーダーで 16 ビット浮動小数点数の配列を表します。バイトオーダーの制御が必要な場合は、代わりに {{jsxref("DataView")}} を使用してください。初期化データが明示的に与えられない限り、内容は `0` に初期化されます。一旦初期化されると、オブジェクトのメソッドを使用するか、標準的な配列インデックスの構文（つまりブラケット記法）を使用して配列の要素を参照できます。 -`Float16Array` is a subclass of the hidden {{jsxref("TypedArray")}} class. +`Float16Array` は隠された {{jsxref("TypedArray")}} クラスのサブクラスです。 -> **Note:** Float16 support is not universal, both in the JavaScript API and the underlying CPU architecture. Using it may result in slower performance on some platforms. It is intended for interacting with highly optimized and performance-sensitive systems such as [float-backed canvases](https://github.com/w3c/ColorWeb-CG/blob/main/canvas_float.md), WebGPU, WebGL, and deep learning models including [stable diffusion](https://github.com/huggingface/blog/blob/main/stable_diffusion.md). +> **メモ:** Float16 のサポートは、JavaScript API と CPU アーキテクチャの両方において万能ではありません。これを使用すると、プラットフォームによってはパフォーマンスが低下する可能性があります。これは、[float-backed canvases](https://github.com/w3c/ColorWeb-CG/blob/main/canvas_float.md)、WebGPU、WebGL、[stable diffusion](https://github.com/huggingface/blog/blob/main/stable_diffusion.md) を含む深層学習モデルなど、高度に最適化されパフォーマンスに敏感なシステムとのやり取りを想定しています。 -## Constructor +## コンストラクター - {{jsxref("Float16Array/Float16Array", "Float16Array()")}} - - : Creates a new `Float16Array` object. + - : 新しい `Float16Array` オブジェクトを作成します。 -## Static properties +## 静的プロパティ -_Also inherits static properties from its parent {{jsxref("TypedArray")}}_. +以下に加えて、親である {{jsxref("TypedArray")}} から静的プロパティを継承します。 - {{jsxref("TypedArray/BYTES_PER_ELEMENT", "Float16Array.BYTES_PER_ELEMENT")}} - - : Returns a number value of the element size. `2` in the case of `Float16Array`. + - : 要素サイズを数値で返します。`Float16Array` の場合は `2` を返します。 -## Static methods +## 静的メソッド -_Inherits static methods from its parent {{jsxref("TypedArray")}}_. +親である {{jsxref("TypedArray")}} から静的メソッドを継承します。 -## Instance properties +## インスタンスプロパティ -_Also inherits instance properties from its parent {{jsxref("TypedArray")}}_. +以下に加えて、親である {{jsxref("TypedArray")}} からインスタンスプロパティを継承します。 -These properties are defined on `Float16Array.prototype` and shared by all `Float16Array` instances. +これらのプロパティは `Float16Array.prototype` で定義され、すべての `Float16Array` インスタンスで共有されます。 - {{jsxref("TypedArray/BYTES_PER_ELEMENT", "Float16Array.prototype.BYTES_PER_ELEMENT")}} - - : Returns a number value of the element size. `2` in the case of a `Float16Array`. + - : 要素サイズを数値で返します。`Float16Array` の場合は `2` を返します。 - {{jsxref("Object/constructor", "Float16Array.prototype.constructor")}} - - : The constructor function that created the instance object. For `Float16Array` instances, the initial value is the {{jsxref("Float16Array/Float16Array", "Float16Array")}} constructor. + - : インスタンスオブジェクトを生成したコンストラクター関数です。`Float16Array` インスタンスの場合、初期値は {{jsxref("Float16Array/Float16Array", "Float16Array")}} コンストラクターです。 -## Instance methods +## インスタンスメソッド -_Inherits instance methods from its parent {{jsxref("TypedArray")}}_. +親である {{jsxref("TypedArray")}} からインスタンスメソッドを継承します。 -## Examples +## 例 -### Different ways to create a Float16Array +### Float16Array を作成する様々な方法 ```js // From a length @@ -78,17 +78,17 @@ console.log(float16FromIterable); // Float16Array [1, 2, 3] ``` -## Specifications +## 仕様書 {{Specifications}} -## Browser compatibility +## ブラウザーの互換性 {{Compat}} -## See also +## 関連情報 -- [JavaScript typed arrays](/en-US/docs/Web/JavaScript/Guide/Typed_arrays) guide +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays) - {{jsxref("TypedArray")}} - {{jsxref("ArrayBuffer")}} - {{jsxref("DataView")}} From 41a3cbb77a3080e7edf4d8a02f7a4cc1d258e432 Mon Sep 17 00:00:00 2001 From: takai-minoru Date: Sat, 22 Jun 2024 14:14:15 +0900 Subject: [PATCH 029/907] translate Float16Array constructor document --- .../float16array/float16array/index.md | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/float16array/float16array/index.md b/files/ja/web/javascript/reference/global_objects/float16array/float16array/index.md index 4a091111f976c7..e706e6b99c8635 100644 --- a/files/ja/web/javascript/reference/global_objects/float16array/float16array/index.md +++ b/files/ja/web/javascript/reference/global_objects/float16array/float16array/index.md @@ -1,15 +1,15 @@ --- -title: Float16Array() constructor +title: Float16Array() コンストラクター slug: Web/JavaScript/Reference/Global_Objects/Float16Array/Float16Array -page-type: javascript-constructor -browser-compat: javascript.builtins.Float16Array.Float16Array +l10n: + sourceCommit: dd339290fa3a42d9a7f079e17a62e1df1206f29d --- {{JSRef}} -The **`Float16Array()`** constructor creates {{jsxref("Float16Array")}} objects. The contents are initialized to `0` unless initialization data is explicitly provided. +**`Float16Array()`** コンストラクターは {{jsxref("Float16Array")}} オブジェクトを生成します。初期化データが明示的に与えられない限り、中身は `0` に初期化されます。 -## Syntax +## 構文 ```js-nolint new Float16Array() @@ -22,19 +22,19 @@ new Float16Array(buffer, byteOffset) new Float16Array(buffer, byteOffset, length) ``` -> **Note:** `Float16Array()` can only be constructed with [`new`](/en-US/docs/Web/JavaScript/Reference/Operators/new). Attempting to call it without `new` throws a {{jsxref("TypeError")}}. +> **メモ:** `Float16Array()` は [`new`](/ja/docs/Web/JavaScript/Reference/Operators/new) でのみ構築できます。`new` なしで呼び出そうとすると {{jsxref("TypeError")}} がスローされます。 -### Parameters +### 引数 -See [`TypedArray`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#parameters). +[`TypedArray#引数`](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#引数) を参照してください。 -### Exceptions +### 例外 -See [`TypedArray`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#exceptions). +[`TypedArray#例外`](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#例外) を参照してください。 -## Examples +## 例 -### Different ways to create a Float16Array +### Float16Array を作成する様々な方法 ```js // From a length @@ -66,17 +66,17 @@ console.log(float16FromIterable); // Float16Array [1, 2, 3] ``` -## Specifications +## 仕様書 {{Specifications}} -## Browser compatibility +## ブラウザーの互換性 {{Compat}} -## See also +## 関連情報 -- [JavaScript typed arrays](/en-US/docs/Web/JavaScript/Guide/Typed_arrays) guide +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays) - {{jsxref("TypedArray")}} - {{jsxref("ArrayBuffer")}} - {{jsxref("DataView")}} From 3eb45bcfe49e5deaf2f5274e3ca07e2430b21b59 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 21 Jun 2024 23:19:07 +0900 Subject: [PATCH 030/907] =?UTF-8?q?2023/04/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/document/querycommandenabled/index.md | 54 +++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 files/ja/web/api/document/querycommandenabled/index.md diff --git a/files/ja/web/api/document/querycommandenabled/index.md b/files/ja/web/api/document/querycommandenabled/index.md new file mode 100644 index 00000000000000..56288e15fb43b2 --- /dev/null +++ b/files/ja/web/api/document/querycommandenabled/index.md @@ -0,0 +1,54 @@ +--- +title: "Document: queryCommandEnabled() メソッド" +short-title: queryCommandEnabled() +slug: Web/API/Document/queryCommandEnabled +l10n: + sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b +--- + +{{ApiRef("DOM")}}{{deprecated_header}}{{Non-standard_header}} + +The **`Document.queryCommandEnabled()`** メソッドは、指定したエディターコマンドがブラウザーで有効になっているかどうかを報告します。 + +## 構文 + +```js-nolint +document.queryCommandEnabled(command) +``` + +### 引数 + +- `command` + - : 対応するかどうかを判断するコマンド。 + +### 返値 + +論理値で、コマンドが有効な場合は `true`、無効な場合は `false` を返します。 + +## メモ + +- '`cut`' および '`copy`' コマンドの場合、このメソッドはユーザーが起動したスレッドから呼び出されたときのみ true を返します。 +- `'paste'` コマンドは、その機能が利用できない場合だけでなく、呼び出されたスクリプトがそのアクションを実行するのに十分な権限を持っていない場合にも `false` を返します。 + +## 例 + +```js +const flg = document.queryCommandEnabled("SelectAll"); + +if (flg) { + document.execCommand("SelectAll", false, null); // コマンドが有効なので、実行する +} +``` + +## 仕様書 + +この機能はどの現行仕様にも属していません。標準化の予定はなくなりました。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Document.execCommand()")}} +- {{domxref("Document.queryCommandSupported()")}} From ea88e05badcf24a46f2fc9dde29513d0da617529 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 21 Jun 2024 23:21:40 +0900 Subject: [PATCH 031/907] =?UTF-8?q?2023/04/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/api/document/querycommandstate/index.md | 11 +++++++---- .../api/document/querycommandsupported/index.md | 15 +++++++++------ files/ja/web/api/document/releasecapture/index.md | 13 ++++++++----- 3 files changed, 24 insertions(+), 15 deletions(-) diff --git a/files/ja/web/api/document/querycommandstate/index.md b/files/ja/web/api/document/querycommandstate/index.md index 504bbc22806298..08fb06fff797b5 100644 --- a/files/ja/web/api/document/querycommandstate/index.md +++ b/files/ja/web/api/document/querycommandstate/index.md @@ -1,16 +1,19 @@ --- -title: Document.queryCommandState() +title: "Document: queryCommandState() メソッド" +short-title: queryCommandState() slug: Web/API/Document/queryCommandState +l10n: + sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b --- -{{ApiRef("DOM")}}{{deprecated_header}} +{{ApiRef("DOM")}}{{deprecated_header}}{{Non-standard_header}} **`queryCommandState()`** メソッドは、現在の選択範囲に特定の {{domxref("Document.execCommand()")}} コマンドが適用されているかどうかを知らせます。 ## 構文 -```js -queryCommandState(String command) +```js-nolint +queryCommandState(command) ``` ### 引数 diff --git a/files/ja/web/api/document/querycommandsupported/index.md b/files/ja/web/api/document/querycommandsupported/index.md index c2c32707c9f00c..c1c5b5b00193f1 100644 --- a/files/ja/web/api/document/querycommandsupported/index.md +++ b/files/ja/web/api/document/querycommandsupported/index.md @@ -1,16 +1,19 @@ --- -title: Document.queryCommandSupported() +title: "Document: queryCommandSupported() メソッド" +short-title: queryCommandSupported() slug: Web/API/Document/queryCommandSupported +l10n: + sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b --- -{{ApiRef("DOM")}}{{deprecated_header}} +{{ApiRef("DOM")}}{{deprecated_header}}{{Non-standard_header}} -**`Document.queryCommandSupported()`** メソッドは、指定しされたエディターコマンドにブラウザーが対応しているかどうかを報告します。 +**`Document.queryCommandSupported()`** メソッドは、指定されたエディターコマンドにブラウザーが対応しているかどうかを報告します。 ## 構文 -```js -queryCommandSupported(command); +```js-nolint +queryCommandSupported(command) ``` ### 引数 @@ -29,7 +32,7 @@ queryCommandSupported(command); ## 例 ```js -var flg = document.queryCommandSupported("SelectAll"); +const flg = document.queryCommandSupported("SelectAll"); if (flg) { // ...何か行う diff --git a/files/ja/web/api/document/releasecapture/index.md b/files/ja/web/api/document/releasecapture/index.md index 461fe3facf023c..05a293fe464c6a 100644 --- a/files/ja/web/api/document/releasecapture/index.md +++ b/files/ja/web/api/document/releasecapture/index.md @@ -1,9 +1,12 @@ --- -title: Document.releaseCapture() +title: "Document: releaseCapture() メソッド" +short-title: releaseCapture() slug: Web/API/Document/releaseCapture +l10n: + sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b --- -{{ApiRef("DOM")}} +{{ApiRef("DOM")}}{{Non-standard_header}} **`releaseCapture()`** メソッドは、この文書内の要素でマウスキャプチャが有効になっている場合、それを解除します。 マウスキャプチャが解除されると、キャプチャが有効になっている要素に全てのマウスイベントが送られるという状態は解除されます。 @@ -12,8 +15,8 @@ slug: Web/API/Document/releaseCapture ## 構文 -```js -releaseCapture(); +```js-nolint +releaseCapture() ``` ### 引数 @@ -30,7 +33,7 @@ releaseCapture(); ## 仕様書 -Internet Explorer の実装に基づく。 +どの仕様書にも含まれていません。 ## ブラウザーの互換性 From 38c340e5959b15bd71dff561b409e04b1a1d7b20 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 22 Jun 2024 21:53:32 +0900 Subject: [PATCH 032/907] =?UTF-8?q?2023/04/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/document/copy_event/index.md | 52 ++++++++------ files/ja/web/api/document/cut_event/index.md | 54 ++++++++------- .../ja/web/api/document/paste_event/index.md | 56 +++++++++------- .../document/readystatechange_event/index.md | 67 ++++++++++--------- .../document/selectionchange_event/index.md | 52 +++++++------- 5 files changed, 155 insertions(+), 126 deletions(-) diff --git a/files/ja/web/api/document/copy_event/index.md b/files/ja/web/api/document/copy_event/index.md index 914489860b5e30..333aada49bcfe9 100644 --- a/files/ja/web/api/document/copy_event/index.md +++ b/files/ja/web/api/document/copy_event/index.md @@ -1,43 +1,51 @@ --- title: "Document: copy イベント" +short-title: copy slug: Web/API/Document/copy_event +l10n: + sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b --- {{APIRef}} **`copy`** イベントは、ユーザーがブラウザーのユーザーインターフェイスからコピー操作を実行したときに発生します。 - - - - - - - - - - - - - - - - - - - -
バブリングあり
キャンセル可
インターフェイス{{domxref("ClipboardEvent")}}
イベントハンドラープロパティ{{domxref("HTMLElement/oncopy", "oncopy")}}
- このイベントの本来の対象は、コピー操作の意図の対象である {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントの局面について完全な詳細は、 [Element: copy イベント](/ja/docs/Web/API/Element/copy_event)を参照してください。 +## 構文 + +このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラーのプロパティを設定するかしてください。 + +```js +addEventListener("copy", (event) => {}); + +oncopy = (event) => {}; +``` + +## イベント型 + +{{domxref("ClipboardEvent")}} です。{{domxref("Event")}} から継承しています。 + +{{InheritanceDiagram("ClipboardEvent")}} + ## 例 +ユーザーがウェブページのデータをクリップボードにコピーしたときに通知されるようにするには、{{domxref("Document")}} インスタンスに {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用してハンドラーを追加してください。 + ```js document.addEventListener("copy", (event) => { - console.log("copy action initiated"); + /* セッションはシャットダウンしている */ }); ``` +また、`Document.oncopy` イベントハンドラープロパティを使用して、`copy` イベントのハンドラーを確立することもできます。 + +```js +document.oncopy = (event) => { + /* セッションはシャットダウンしている */ +}; +``` + ## 仕様書 {{Specifications}} diff --git a/files/ja/web/api/document/cut_event/index.md b/files/ja/web/api/document/cut_event/index.md index aa50fce2855daf..3aae3bb1fc8085 100644 --- a/files/ja/web/api/document/cut_event/index.md +++ b/files/ja/web/api/document/cut_event/index.md @@ -1,43 +1,51 @@ --- title: "Document: cut イベント" +short-title: cut slug: Web/API/Document/cut_event +l10n: + sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b --- {{APIRef}} **`cut`** イベントは、ユーザーがブラウザーのユーザーインターフェイスから切り取り操作を実行したときに発生します。 - - - - - - - - - - - - - - - - - - - -
バブリングあり
キャンセル可
インターフェイス{{domxref("ClipboardEvent")}}
イベントハンドラープロパティ{{domxref("HTMLElement/oncut", "oncut")}}
- このイベントの本来の対象は、切り取り操作の意図の対象である {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントの局面について完全な詳細は、 [Element: cut イベント](/ja/docs/Web/API/Element/cut_event)を参照してください。 +## 構文 + +このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラーのプロパティを設定するかしてください。 + +```js +addEventListener("cut", (event) => {}); + +oncut = (event) => {}; +``` + +## イベント型 + +{{domxref("ClipboardEvent")}} です。{{domxref("Event")}} から継承しています。 + +{{InheritanceDiagram("ClipboardEvent")}} + ## 例 +ユーザーがウェブページからデータをクリップボードに切り取りしたときに通知されるようにするには、{{domxref("Document")}} インスタンスに {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用してハンドラーを追加してください。 + ```js document.addEventListener("cut", (event) => { - console.log("cut action initiated"); + /* セッションはシャットダウンしている */ }); ``` +また、`Document.oncut` イベントハンドラープロパティを使用して、`cut` イベントのハンドラーを確立することもできます。 + +```js +document.oncut = (event) => { + /* セッションはシャットダウンしている */ +}; +``` + ## 仕様書 {{Specifications}} @@ -50,4 +58,4 @@ document.addEventListener("cut", (event) => { - 関連イベント: {{domxref("Document/copy_event", "copy")}}, {{domxref("Document/paste_event", "paste")}} - {{domxref("Element")}} を対象としたこのイベント: {{domxref("Element/cut_event", "cut")}} -- {{domxref("Document")}} を対象としたこのイベント: {{domxref("Document/cut_event", "cut")}} +- {{domxref("Window")}} を対象としたこのイベント: {{domxref("Window/cut_event", "cut")}} diff --git a/files/ja/web/api/document/paste_event/index.md b/files/ja/web/api/document/paste_event/index.md index e484b02e07e091..00f94dbdc2d590 100644 --- a/files/ja/web/api/document/paste_event/index.md +++ b/files/ja/web/api/document/paste_event/index.md @@ -1,43 +1,51 @@ --- title: "Document: paste イベント" +short-title: paste slug: Web/API/Document/paste_event +l10n: + sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b --- {{APIRef}} -**`paste`** イベントは、ユーザーがブラウザーのユーザーインターフェイスから「貼り付け」操作を実行したときに発生します。 - - - - - - - - - - - - - - - - - - - - -
バブリングあり
キャンセル可
インターフェイス{{domxref("ClipboardEvent")}}
イベントハンドラープロパティ{{domxref("HTMLElement/onpaste", "onpaste")}}
+**`paste`** イベントは、ユーザーがブラウザーのユーザーインターフェイスから貼り付け操作が実行されたときに発生します。 このイベントの本来の対象は、貼り付け操作を意図する対象である {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントの局面について完全な詳細は、 [Element: paste イベント](/ja/docs/Web/API/Element/paste_event)を参照してください。 +## 構文 + +このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラーのプロパティを設定するかしてください。 + +```js +addEventListener("paste", (event) => {}); + +onpaste = (event) => {}; +``` + +## イベント型 + +{{domxref("ClipboardEvent")}} です。{{domxref("Event")}} から継承しています。 + +{{InheritanceDiagram("ClipboardEvent")}} + ## 例 +ユーザーがウェブページからデータをクリップボードから貼り付けたときに通知されるようにするには、{{domxref("Document")}} インスタンスに {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用してハンドラーを追加してください。 + ```js document.addEventListener("paste", (event) => { - console.log("paste action initiated"); + /* セッションはシャットダウンしている */ }); ``` +また、`Document.onpaste` イベントハンドラープロパティを使用して、`paste` イベントのハンドラーを確立することもできます。 + +```js +document.onpaste = (event) => { + /* セッションはシャットダウンしている */ +}; +``` + ## 仕様書 {{Specifications}} @@ -48,6 +56,6 @@ document.addEventListener("paste", (event) => { ## 関連情報 -- 関連イベント: {{domxref("Document/cut_event", "cut")}}, {{domxref("Document/copy_event", "copy")}} +- 関連イベント: {{domxref("Document/copy_event", "copy")}}, {{domxref("Document/cut_event", "cut")}} - {{domxref("Element")}} を対象としたこのイベント: {{domxref("Element/paste_event", "paste")}} - {{domxref("Window")}} を対象としたこのイベント: {{domxref("Window/paste_event", "paste")}} diff --git a/files/ja/web/api/document/readystatechange_event/index.md b/files/ja/web/api/document/readystatechange_event/index.md index 70275486008c71..fcd56a5d4ee3ff 100644 --- a/files/ja/web/api/document/readystatechange_event/index.md +++ b/files/ja/web/api/document/readystatechange_event/index.md @@ -1,32 +1,30 @@ --- title: "Document: readystatechange イベント" +short-title: readystatechange slug: Web/API/Document/readystatechange_event +l10n: + sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b --- {{APIRef}} **`readystatechange`** event は、文書の {{domxref("Document.readyState", "readyState")}} 属性が変化したときに発生します。 - - - - - - - - - - - - - - - - - - - -
バブリングなし
キャンセル不可
インターフェイス{{domxref("Event")}}
イベントハンドラープロパティonreadystatechange
+このイベントはキャンセル不可で、バブリングしません。 + +## 構文 + +このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラーのプロパティを設定するかしてください。 + +```js +addEventListener("readystatechange", (event) => {}); + +onreadystatechange = (event) => {}; +``` + +## イベント型 + +一般的な {{domxref("Event")}} です。 ## 例 @@ -36,19 +34,26 @@ slug: Web/API/Document/readystatechange_event ```html
- +
- - + +
``` +#### CSS + ```css hidden body { display: grid; - grid-template-areas: "control log"; + grid-template-areas: "control log"; } .controls { @@ -76,7 +81,7 @@ button { } ``` -#### JS +#### JavaScript ```js const log = document.querySelector(".event-log-contents"); @@ -84,27 +89,27 @@ const reload = document.querySelector("#reload"); reload.addEventListener("click", () => { log.textContent = ""; - window.setTimeout(() => { + setTimeout(() => { window.location.reload(true); }, 200); }); window.addEventListener("load", (event) => { - log.textContent = log.textContent + "load\n"; + log.textContent = `${log.textContent}load\n`; }); document.addEventListener("readystatechange", (event) => { - log.textContent = log.textContent + `readystate: ${document.readyState}\n`; + log.textContent = `${log.textContent}readystate: ${document.readyState}\n`; }); document.addEventListener("DOMContentLoaded", (event) => { - log.textContent = log.textContent + `DOMContentLoaded\n`; + log.textContent = `${log.textContent}DOMContentLoaded\n`; }); ``` #### 結果 -{{ EmbedLiveSample('Live_example', '100%', '160px') }} +{{ EmbedLiveSample('ライブデモ', '100%', '160px') }} ## 仕様書 @@ -116,4 +121,4 @@ document.addEventListener("DOMContentLoaded", (event) => { ## 関連情報 -- 関連イベント: {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Window/load_event", "load")}}, {{domxref("Window/beforeunload_event", "beforeunload")}}, {{domxref("Window/unload_event", "unload")}} +- 関連イベント: [`DOMContentLoaded`](/ja/docs/Web/API/Document/DOMContentLoaded_event), [`load`](/ja/docs/Web/API/Window/load_event), [`beforeunload`](/ja/docs/Web/API/Window/beforeunload_event), [`unload`](/ja/docs/Web/API/Window/unload_event) diff --git a/files/ja/web/api/document/selectionchange_event/index.md b/files/ja/web/api/document/selectionchange_event/index.md index 788830507a2052..76388876644d06 100644 --- a/files/ja/web/api/document/selectionchange_event/index.md +++ b/files/ja/web/api/document/selectionchange_event/index.md @@ -1,44 +1,44 @@ --- title: "Document: selectionchange イベント" +short-title: selectionchange slug: Web/API/Document/selectionchange_event +l10n: + sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b --- {{APIRef}} **`selectionchange`** イベントは [Selection API](/ja/docs/Web/API/Selection_API) の一部で、文書における現在のテキストの選択が変更された際に発生します。 - - - - - - - - - - - - - - - - - - - -
バブリングなし
キャンセル不可
インターフェイス{{domxref("Event")}}
イベントハンドラープロパティ - {{domxref("GlobalEventHandlers.onselectionchange", "onselectionchange")}} -
+このイベントはキャンセル不可で、バブリングしません。 + +このイベントは `selectionchange` のイベントリスナーを追加するか、`onselectionchange` イベントハンドラーを使用して処理することができます。 + +> **メモ:** このイベントは {{HTMLElement("input")}} や {{HTMLElement("textarea")}} 要素のテキスト選択が変更されたときに発行される `selectionchange` イベントとは異なります。詳しくは{{domxref("HTMLInputElement.selectionchange_event")}}を参照してください。 + +## 構文 + +このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。 + +```js +addEventListener("scrollend", (event) => {}); + +onscrollend = (event) => {}; +``` + +## イベント型 + +一般的な {{domxref("Event")}} です。 ## 例 ```js -// addEventListener version +// addEventListener 版 document.addEventListener("selectionchange", () => { console.log(document.getSelection()); }); -// onselectionchange version +// onselectionchange 版 document.onselectionchange = () => { console.log(document.getSelection()); }; @@ -54,6 +54,6 @@ document.onselectionchange = () => { ## 関連情報 -- {{domxref("Document/selectstart_event", "selectstart")}} -- {{domxref("Document/getSelection", "Document.getSelection")}} +- {{domxref("Node/selectstart_event", "selectstart")}} +- {{domxref("Document.getSelection()")}} - {{domxref("Selection", "Selection")}} From b19667f695db78c35c3e5c85b76cb3c9d3b57eed Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 22 Jun 2024 22:57:59 +0900 Subject: [PATCH 033/907] =?UTF-8?q?2023/05/06=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/document/scrollend_event/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/ja/web/api/document/scrollend_event/index.md b/files/ja/web/api/document/scrollend_event/index.md index 48ae04578b30d9..c6b6ea4ce384cb 100644 --- a/files/ja/web/api/document/scrollend_event/index.md +++ b/files/ja/web/api/document/scrollend_event/index.md @@ -1,12 +1,12 @@ --- title: "Document: scrollend イベント" +short-title: scrollend slug: Web/API/Document/scrollend_event l10n: - sourceCommit: ad11fa09cfe07fbce82de0457daa8c5ac243b748 + sourceCommit: 458eb9af74287fd15ef8ba9f4ba9aa3423c4cac3 --- {{APIRef}} -{{SeeCompatTable}} **`scrollend`** イベントは、文書のビューのスクロールが完了した時に発生します。 スクロールが完了したと見なされるのは、スクロール位置に保留中の更新値がなくなり、かつユーザーがジェスチャーを完了したときです。 From 1462cca094e7d15261b11cf0bf1b3e619ddb637f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 22 Jun 2024 22:20:57 +0900 Subject: [PATCH 034/907] =?UTF-8?q?2023/12/12=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../document/pointerlockchange_event/index.md | 27 +++++++++++++------ .../document/pointerlockerror_event/index.md | 9 ++++--- 2 files changed, 24 insertions(+), 12 deletions(-) diff --git a/files/ja/web/api/document/pointerlockchange_event/index.md b/files/ja/web/api/document/pointerlockchange_event/index.md index 54835367acc185..54027e724bbaab 100644 --- a/files/ja/web/api/document/pointerlockchange_event/index.md +++ b/files/ja/web/api/document/pointerlockchange_event/index.md @@ -1,19 +1,22 @@ --- title: "Document: pointerlockchange イベント" +short-title: pointerlockchange slug: Web/API/Document/pointerlockchange_event l10n: - sourceCommit: d4619276d67ca1ee02bd964d884ec52c2aa2ad4b + sourceCommit: c99ff93a1b71e7d664509fdd3e0c168920be967a --- -{{APIRef}} +{{APIRef("Pointer Lock API")}} -`pointerlockchange` イベントは、ポインターがロックされたり解除されたりしたときに発行されます。 +**`pointerlockchange`** イベントは、ポインターがロックされたり解除されたりしたときに発行されます。 -このイベントはキャンセル不可です。 +イベントハンドラーは {{domxref("Document.pointerLockElement")}} を使用して、ポインターがロックされているかどうか、ロックされている場合はどの要素にロックされているかを判断することができます。 + +このイベントはキャンセル不可で、バブリングしません。 ## 構文 -このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。 +このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラーのプロパティを設定するかしてください。 ```js addEventListener("pointerlockchange", (event) => {}); @@ -30,8 +33,12 @@ onpointerlockchange = (event) => {}; `addEventListener()` を使用した場合 ```js -document.addEventListener("pointerlockchange", (event) => { - console.log("Pointer lock changed"); +addEventListener("pointerlockchange", (event) => { + if (document.pointerLockElement) + console.log("The pointer is locked to: ", document.pointerLockElement); + else { + console.log("The pointer is not locked"); + } }); ``` @@ -39,7 +46,11 @@ document.addEventListener("pointerlockchange", (event) => { ```js document.onpointerlockchange = (event) => { - console.log("Pointer lock changed"); + if (document.pointerLockElement) + console.log("The pointer is locked to: ", document.pointerLockElement); + else { + console.log("The pointer is not locked"); + } }; ``` diff --git a/files/ja/web/api/document/pointerlockerror_event/index.md b/files/ja/web/api/document/pointerlockerror_event/index.md index 991647150050dc..217a9445c2826b 100644 --- a/files/ja/web/api/document/pointerlockerror_event/index.md +++ b/files/ja/web/api/document/pointerlockerror_event/index.md @@ -1,15 +1,16 @@ --- title: "Document: pointerlockerror イベント" +short-title: pointerlockerror slug: Web/API/Document/pointerlockerror_event l10n: - sourceCommit: 8f91a466f5a6d1e238ed209f36f9b506fc73ee0d + sourceCommit: c99ff93a1b71e7d664509fdd3e0c168920be967a --- -{{APIRef}} +{{APIRef("Pointer Lock API")}} -`pointerlockerror` イベントは、（技術的な理由、または権限が拒否されたために）ポインターのロックに失敗したときに発生します。 +**`pointerlockerror`** イベントは、（技術的な理由、または権限が拒否されたために）ポインターのロックに失敗したときに発生します。 -このイベントはキャンセル不可です。 +このイベントはキャンセル不可で、バブリングしません。 ## 構文 From 910b30e2c2e955a1b7174b0ca947409aa60a3331 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 22 Jun 2024 23:10:57 +0900 Subject: [PATCH 035/907] =?UTF-8?q?2023/12/19=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../securitypolicyviolation_event/index.md | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 files/ja/web/api/document/securitypolicyviolation_event/index.md diff --git a/files/ja/web/api/document/securitypolicyviolation_event/index.md b/files/ja/web/api/document/securitypolicyviolation_event/index.md new file mode 100644 index 00000000000000..999a02ab11522f --- /dev/null +++ b/files/ja/web/api/document/securitypolicyviolation_event/index.md @@ -0,0 +1,61 @@ +--- +title: "Document: securitypolicyviolation イベント" +short-title: securitypolicyviolation +slug: Web/API/Document/securitypolicyviolation_event +l10n: + sourceCommit: 7c77ca51ce4433ad19af82016604987f42693784 +--- + +{{APIRef}} + +**`securitypolicyviolation`** イベントは、[コンテンツセキュリティポリシー](/ja/docs/Web/HTTP/CSP)に違反があった場合に発行されます。 + +このイベントはポリシー違反があるとグローバルスコープで発行され、{{domxref("Window")}} オブジェクトにバブリングされます。このイベントは、文書ツリー内の{{domxref("Node", "ノード", "", "nocode")}}からもバブリングされます。 + +ハンドラーは `onsecuritypolicyviolation` イベントハンドラープロパティを使用するか、{{domxref("EventTarget.addEventListener()")}} を使用して割り当てることができます。 + +> **メモ:** このイベントのハンドラーは最上位のオブジェクト（{{domxref("Window")}} や {{domxref("Document")}} など）に追加することをお勧めします。HTML 要素にプロパティが存在する間は、要素が読み込まれるまでプロパティにハンドラーを割り当てることはできず、その時刻にはすでにこのイベントは発生しています。 + +## 構文 + +このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。 + +```js +addEventListener("securitypolicyviolation", (event) => {}); + +onsecuritypolicyviolation = (event) => {}; +``` + +## イベント型 + +{{domxref("SecurityPolicyViolationEvent")}} です。{{domxref("Event")}} から継承しています。 + +{{InheritanceDiagram("SecurityPolicyViolationEvent")}} + +## 例 + +下記のコードは、`onsecuritypolicyviolation` イベントハンドラープロパティまたは `Document` の `addEventListener()` を使用してイベントハンドラー関数を追加する方法を示しています。 + +```js +document.onsecuritypolicyviolation = (e) => { + // ここで SecurityPolicyViolationEvent である e を処理 +}; + +document.addEventListener("securitypolicyviolation", (e) => { + // ここで SecurityPolicyViolationEvent である e を処理 +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Element/securitypolicyviolation_event", "securitypolicyviolation")}} イベント（{{domxref("Element")}} インターフェイス） +- {{domxref("WorkerGlobalScope/securitypolicyviolation_event", "securitypolicyviolation")}} イベント（{{domxref("WorkerGlobalScope")}} インターフェイス） +- [HTTP > コンテンツセキュリティポリシー](/ja/docs/Web/HTTP/CSP) From f95abb59cd9564dcff38484d515a1c6114c91e0c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 22 Jun 2024 22:09:44 +0900 Subject: [PATCH 036/907] =?UTF-8?q?2024/01/15=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../document/domcontentloaded_event/index.md | 81 ++++++++++--------- 1 file changed, 41 insertions(+), 40 deletions(-) diff --git a/files/ja/web/api/document/domcontentloaded_event/index.md b/files/ja/web/api/document/domcontentloaded_event/index.md index 0816ca56d265a5..2a84ebf5caf839 100644 --- a/files/ja/web/api/document/domcontentloaded_event/index.md +++ b/files/ja/web/api/document/domcontentloaded_event/index.md @@ -1,38 +1,32 @@ --- title: "Document: DOMContentLoaded イベント" +short-title: DOMContentLoaded slug: Web/API/Document/DOMContentLoaded_event +l10n: + sourceCommit: 0474b1e858a9d6261cbcd6763ec5e13a60cae2da --- {{APIRef}} -**`DOMContentLoaded`** イベントは、 HTML の初期文書が完全に読み込まれ解釈された時点で発生し、スタイルシート、画像、サブフレームの読み込みが完了するのを待ちません。 - - - - - - - - - - - - - - - - - - - - -
バブリングあり
キャンセル - 可 (ただし、キャンセル可能ではない単純イベントとして定義されている) -
インターフェイス{{domxref("Event")}}
イベントハンドラープロパティなし
+**`DOMContentLoaded`** イベントは、HTML の文書が完全に読み込まれ構文解析され、すべての遅延スクリプト（[` ``` @@ -75,25 +70,32 @@ if (document.readyState === "loading") { } ``` -### ライブデモ +> **メモ:** ここでは競合条件はありません。 `if` チェックと `addEventListener()` 呼び出しの間に文書が読み込まれることはあり得ません。JavaScript には run-to-completion という意味づけがあります。つまり、イベントループのある特定のタイミングで文書が読み込まれていたとしても、次のサイクルまで読み込まれることはなく、その時には `doSomething` ハンドラーはすでに取り付けられており、発生します。 + +### ライブサンプル #### HTML ```html
- +
- - + +
``` ```css hidden body { display: grid; - grid-template-areas: "control log"; + grid-template-areas: "control log"; } .controls { @@ -121,7 +123,7 @@ button { } ``` -#### JS +#### JavaScript ```js const log = document.querySelector(".event-log-contents"); @@ -129,27 +131,27 @@ const reload = document.querySelector("#reload"); reload.addEventListener("click", () => { log.textContent = ""; - window.setTimeout(() => { + setTimeout(() => { window.location.reload(true); }, 200); }); window.addEventListener("load", (event) => { - log.textContent = log.textContent + "load\n"; + log.textContent += "load\n"; }); document.addEventListener("readystatechange", (event) => { - log.textContent = log.textContent + `readystate: ${document.readyState}\n`; + log.textContent += `readystate: ${document.readyState}\n`; }); document.addEventListener("DOMContentLoaded", (event) => { - log.textContent = log.textContent + `DOMContentLoaded\n`; + log.textContent += "DOMContentLoaded\n"; }); ``` #### 結果 -{{ EmbedLiveSample('Live_example', '100%', '160px') }} +{{ EmbedLiveSample('ライブサンプル', '100%', '160px') }} ## 仕様書 @@ -162,4 +164,3 @@ document.addEventListener("DOMContentLoaded", (event) => { ## 関連情報 - 関連イベント: {{domxref("Window/load_event", "load")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/beforeunload_event", "beforeunload")}}, {{domxref("Window/unload_event", "unload")}} -- {{domxref("Window")}} を対象とした同じイベント: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}} From f5c517fc6e84557416935b0b9bff5f6ea246407b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 22 Jun 2024 22:49:54 +0900 Subject: [PATCH 037/907] =?UTF-8?q?2024/01/20=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../prerenderingchange_event/index.md | 54 +++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 files/ja/web/api/document/prerenderingchange_event/index.md diff --git a/files/ja/web/api/document/prerenderingchange_event/index.md b/files/ja/web/api/document/prerenderingchange_event/index.md new file mode 100644 index 00000000000000..d9148d18cfc381 --- /dev/null +++ b/files/ja/web/api/document/prerenderingchange_event/index.md @@ -0,0 +1,54 @@ +--- +title: "Document: prerenderingchange イベント" +short-title: prerenderingchange +slug: Web/API/Document/prerenderingchange_event +l10n: + sourceCommit: c99ff93a1b71e7d664509fdd3e0c168920be967a +--- + +{{ APIRef("Speculation Rules API") }}{{seecompattable}} + +**`prerenderingchange`** イベントは、事前レンダリングされた文書がアクティブになった（ユーザーがページを閲覧した）ときに発生します。 + +## 構文 + +このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。 + +```js +addEventListener("prerenderingchange", (event) => {}); + +prerenderingchange = (event) => {}; +``` + +## イベント型 + +一般的な {{domxref("Event")}} です。 + +## 例 + +以下のコードは、イベントリスナーを設定して、事前レンダリングされたページ（事前レンダリングは{{domxref("Document.prerendering")}}によって検出されます）においては、事前レンダリングが完了たときに関数を実行し、事前レンダリングされていないページでは直ちに実行します。 + +```js +if (document.prerendering) { + document.addEventListener("prerenderingchange", initAnalytics, { + once: true, + }); +} else { + initAnalytics(); +} +``` + +> **メモ:** 事前レンダリングが完了するまで遅らせたいアクティビティの種類については、[投機ルール API](/ja/docs/Web/API/Speculation_Rules_API) ランディングページ、特に[安全でない投機的読み込み条件](/ja/docs/Web/API/Speculation_Rules_API#安全でない投機的読み込み条件)の節を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [投機ルール API](/ja/docs/Web/API/Speculation_Rules_API) +- {{domxref("Document.prerendering", "prerendering")}} プロパティ From 41d5589967a2734e51ccefde991982fade5009bf Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 22 Jun 2024 21:46:26 +0900 Subject: [PATCH 038/907] =?UTF-8?q?2024/05/09=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../afterscriptexecute_event/index.md | 29 +++++++++++++------ .../beforescriptexecute_event/index.md | 9 +++++- 2 files changed, 28 insertions(+), 10 deletions(-) diff --git a/files/ja/web/api/document/afterscriptexecute_event/index.md b/files/ja/web/api/document/afterscriptexecute_event/index.md index 8c262dcbdfc10c..e31d006b320d77 100644 --- a/files/ja/web/api/document/afterscriptexecute_event/index.md +++ b/files/ja/web/api/document/afterscriptexecute_event/index.md @@ -1,19 +1,28 @@ --- -title: Document.onafterscriptexecute +title: "Document: afterscriptexecute イベント" +short-title: afterscriptexecute slug: Web/API/Document/afterscriptexecute_event +l10n: + sourceCommit: 3966c40a3917825e6e467f1592bc7f8d59458e74 --- -{{ApiRef("DOM")}}{{non-standard_header}} +{{APIRef}}{{non-standard_header}} -**`Document.onafterscriptexecute`** プロパティは、静的な {{HTMLElement("script")}} 要素のスクリプトの実行が終了したときに呼び出される関数を参照します。要素が {{domxref("Node.appendChild()", "appendChild()")}} などで動的に追加された場合には呼び出されません。 +`afterscriptexecute` イベントは、静的な {{HTMLElement("script")}} 要素のスクリプトの実行が終了したときに発生します。要素が {{domxref("Node.appendChild()", "appendChild()")}} などで動的に追加された場合には呼び出されません。 ## 構文 +このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラーのプロパティを設定するかしてください。 + +```js +addEventListener("afterscriptexecute", (event) => {}); + +onafterscriptexecute = (event) => {}; ``` -document.onafterscriptexecute = funcRef; -``` -_funcRef_ は関数の参照で、イベントが発行されると呼び出されます。イベントの `target` 属性が、実行が完了した {{HTMLElement("script")}} 要素に設定されます。 +## イベント型 + +一般的な {{domxref("Event")}} です。 ## 例 @@ -23,13 +32,15 @@ function finished(e) { } document.addEventListener("afterscriptexecute", finished, true); +// または +document.onafterscriptexecute = finished; ``` -[ライブ例を表示](/samples/html/currentScript.html) +[ライブ例を表示](https://mdn.dev/archives/media/samples/html/currentScript.html) ## 仕様書 -- [HTML5](https://www.whatwg.org/specs/web-apps/current-work/#the-script-element) +どの仕様書にも含まれていません。 ## ブラウザーの互換性 @@ -37,5 +48,5 @@ document.addEventListener("afterscriptexecute", finished, true); ## 関連情報 -- {{domxref("Document.onbeforescriptexecute")}} +- {{domxref("Document.beforescriptexecute_event")}} - {{domxref("Document.currentScript")}} diff --git a/files/ja/web/api/document/beforescriptexecute_event/index.md b/files/ja/web/api/document/beforescriptexecute_event/index.md index 561ef33994dcc6..0469ee8be865fa 100644 --- a/files/ja/web/api/document/beforescriptexecute_event/index.md +++ b/files/ja/web/api/document/beforescriptexecute_event/index.md @@ -1,6 +1,9 @@ --- title: "Document: beforescriptexecute イベント" +short-title: beforescriptexecute slug: Web/API/Document/beforescriptexecute_event +l10n: + sourceCommit: 3966c40a3917825e6e467f1592bc7f8d59458e74 --- {{APIRef}}{{non-standard_header}} @@ -25,7 +28,7 @@ onbeforescriptexecute = (event) => {}; ```js function starting(e) { - logMessage(`スクリプト実行開始 (ID: ${e.target.id})`); + logMessage(`スクリプト実行開始 (ID: ${e.target.id})`); } document.addEventListener("beforescriptexecute", starting, true); @@ -37,6 +40,10 @@ document.onbeforescriptexecute = starting; ## 仕様書 +どの仕様書にも含まれていません。 + +## ブラウザーの互換性 + {{Compat}} ## 関連情報 From 76f5db6d074b917fb4178bacde91dc6bbe3dc886 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 22 Jun 2024 23:17:45 +0900 Subject: [PATCH 039/907] =?UTF-8?q?2024/05/09=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../document/visibilitychange_event/index.md | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/files/ja/web/api/document/visibilitychange_event/index.md b/files/ja/web/api/document/visibilitychange_event/index.md index 2df9a205e0af52..e29cef45b2598f 100644 --- a/files/ja/web/api/document/visibilitychange_event/index.md +++ b/files/ja/web/api/document/visibilitychange_event/index.md @@ -1,8 +1,9 @@ --- title: "Document: visibilitychange イベント" +short-title: visibilitychange slug: Web/API/Document/visibilitychange_event l10n: - sourceCommit: 1511e914c6b1ce6f88056bfefd48a6aa585cebce + sourceCommit: 14a752ccdcaa736e8e368156c48bca61a3c1e5ed --- {{APIRef}} @@ -37,14 +38,19 @@ onvisibilitychange = (event) => {}; ### 非表示に遷移した際に音楽を一時停止 -この例では、文書が表示状態になった時に音楽を再生し、文書が非表示になった時に音楽を停止します。 +この例は、ページが非表示になると音声再生を一時停止し、ページが再び表示されると再生を再開します。 +完全な例については、[Page Visibility API: Pausing audio on page hide](/ja/docs/Web/API/Page_Visibility_API#pausing_audio_on_page_hide) ドキュメントを参照してください。 ```js document.addEventListener("visibilitychange", () => { - if (document.visibilityState === "visible") { - backgroundMusic.play(); + if (document.hidden) { + playingOnHide = !audio.paused; + audio.pause(); } else { - backgroundMusic.pause(); + // 音声が "playing on hide" であった場合は復旧する + if (playingOnHide) { + audio.play(); + } } }); ``` @@ -73,5 +79,6 @@ document.onvisibilitychange = () => { - [ページ可視性 API](/ja/docs/Web/API/Page_Visibility_API) - {{domxref("Document.visibilityState")}} +- {{domxref("Document.hidden")}} - [Don't lose user and app state, use Page Visibility](https://www.igvita.com/2015/11/20/dont-lose-user-and-app-state-use-page-visibility/) は、なぜ `beforeunload`/`unload` ではなく、`visibilitychange` を使用しなければならないのか、その理由を詳しく説明しています。 - [Page Lifecycle API](https://developer.chrome.com/blog/page-lifecycle-api/) は、ウェブアプリケーションでページのライフサイクルの動作を処理する際の最善の手法を解説しています。 From 39a3d534c8a5304aea954cbf9e06e5c9a1b15291 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 22 Jun 2024 23:36:01 +0900 Subject: [PATCH 040/907] =?UTF-8?q?2024/06/19=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/document/index.md | 136 +++++++++-------------------- 1 file changed, 39 insertions(+), 97 deletions(-) diff --git a/files/ja/web/api/document/index.md b/files/ja/web/api/document/index.md index 3fcfea0581c77c..5b55b0c99423f7 100644 --- a/files/ja/web/api/document/index.md +++ b/files/ja/web/api/document/index.md @@ -2,12 +2,12 @@ title: Document slug: Web/API/Document l10n: - sourceCommit: 56c76424a5edb45f6716ac4ee48861dac8e7ae38 + sourceCommit: 4558d208395a5b1df4db44b0c8ef4e9a0f8adbbf --- {{APIRef("DOM")}} -**`Document`** インターフェイスはブラウザーに読み込まれたウェブページを表し、 [DOM ツリー](/ja/docs/Web/API/Document_object_model/Using_the_Document_Object_Model#dom_ツリーとは？)であるウェブページのコンテンツへの入口としての役割を果たします。 +**`Document`** インターフェイスはブラウザーに読み込まれたウェブページを表し、 [DOM ツリー](/ja/docs/Web/API/Document_Object_Model/Using_the_Document_Object_Model#dom_%e3%83%84%e3%83%aa%e3%83%bc%e3%81%a8%e3%81%af%ef%bc%9f)であるウェブページのコンテンツへの入口としての役割を果たします。 DOM ツリーには {{HTMLElement("body")}} や {{HTMLElement("table")}} など、[多数の要素](/ja/docs/Web/HTML/Element)があります。これはページの URL を取得したり文書で新たな要素を作成するなど、文書全体に関わる機能を提供します。 @@ -51,6 +51,8 @@ _このインターフェイスは、 {{DOMxRef("Node")}} インターフェイ - : 文書の場所を文字列で返します。 - {{DOMxRef("Document.embeds")}} {{ReadOnlyInline}} - : {{DOMxRef("HTMLCollection")}} で、現在の文書に含まれる埋め込まれた {{HTMLElement('embed')}} 要素のリストを返します。 +- {{DOMxRef("Document.featurePolicy")}} {{Experimental_Inline}} {{ReadOnlyInline}} + - : 文書に適用されている機能ポリシーを {{DOMxRef("FeaturePolicy")}} インターフェイスで返します。 - {{domxref("Document.firstElementChild")}} {{ReadOnlyInline}} - : 現在の文書における最初の子要素を返します。 - {{DOMxRef("Document.fonts")}} @@ -81,8 +83,8 @@ _このインターフェイスは、 {{DOMxRef("Node")}} インターフェイ - : {{DOMxRef("HTMLCollection")}} で、利用可能なプラグインのリストを返します。 - {{DOMxRef("Document.pointerLockElement")}} {{ReadOnlyInline}} - : ポインターがロックされている場合、マウスイベントのターゲットとして設定された要素を返します。ロック待ちの場合、ポインターがロックされていない場合、ターゲットが他の文書にある場合は `null` を返します。 -- {{DOMxRef("Document.featurePolicy")}} {{Experimental_Inline}} {{ReadOnlyInline}} - - : 特定の文書に適用される機能ポリシーを簡単に導入するための API を提供する {{DOMxRef("FeaturePolicy")}} インターフェイスを返します。 +- {{DOMxRef("Document.prerendering")}} {{ReadOnlyInline}} {{experimental_inline}} + - : 論理値で、文書が現在、[投機ルール API](/ja/docs/Web/API/Speculation_Rules_API) によって開始されたような、事前レンダリング中であるかどうかを示します。 - {{DOMxRef("Document.scripts")}} {{ReadOnlyInline}} - : {{DOMxRef("HTMLCollection")}} で、文書内のすべての {{HTMLElement("script")}} 要素を返します。 - {{DOMxRef("Document.scrollingElement")}} {{ReadOnlyInline}} @@ -106,8 +108,6 @@ _HTML 文書用の `Document` インターフェイスは {{DOMxRef("HTMLDocumen - : 文書全体を編集可能かを取得/設定します。 - {{DOMxRef("Document.dir")}} - : 文書の書字方向 (rtl/ltr) を取得/設定します。 -- {{DOMxRef("Document.domain")}} {{Deprecated_Inline}} - - : 現在の文書のドメインを取得/設定します。 - {{DOMxRef("Document.fullscreenEnabled")}} {{ReadOnlyInline}} - : 全画面モードが利用できるかどうかを示します。 - {{DOMxRef("Document.lastModified")}} {{ReadOnlyInline}} @@ -136,11 +136,13 @@ _HTML 文書用の `Document` インターフェイスは {{DOMxRef("HTMLDocumen - {{DOMxRef("Document.bgColor")}} {{Deprecated_Inline}} - : 現在の文書の背景色を取得または設定します。 - {{DOMxRef("Document.characterSet","Document.charset")}} {{Deprecated_Inline}} {{ReadOnlyInline}} - - : {{DOMxRef("Document.characterSet")}} の別名です。代わりに {{DOMxRef("Document.characterSet")}} を使用してください。 + - : {{DOMxRef("Document.characterSet")}} の別名です。代わりにこのプロパティを使用してください。 +- {{DOMxRef("Document.domain")}} {{Deprecated_Inline}} + - : 現在の文書のドメインを取得/設定します。 - {{DOMxRef("Document.fgColor")}} {{Deprecated_Inline}} - : 現在の文書の前景色または文字色を取得/設定します。 - {{DOMxRef("Document.fullscreen")}} {{Deprecated_Inline}} - - : 文書が[全画面モード](/ja/docs/Web/API/Fullscreen_API)にあるときに `true` になります。 + - : 文書が[全画面モード](/ja/docs/Web/API/Fullscreen_API)にあるときに `true` を返します。 - {{DOMxRef("Document.characterSet", "Document.inputEncoding")}} {{Deprecated_Inline}} {{ReadOnlyInline}} - : {{DOMxRef("Document.characterSet")}} の別名です。代わりにそちらを使用してください。 - {{DOMxRef("Document.lastStyleSheetSet")}} {{Deprecated_Inline}} {{ReadOnlyInline}} {{Non-standard_Inline}} @@ -172,6 +174,8 @@ _このインターフェイスは、{{DOMxRef("Node")}} インターフェイ - : 外部文書からノードを取り込みます。 - {{DOMxRef("Document.append()")}} - : 文書の最後の子の後に {{domxref("Node")}} オブジェクトまたは文字列の集合を挿入します。 +- {{DOMxRef("Document.browsingTopics()")}} {{Experimental_Inline}} {{non-standard_inline}} + - : 過去 3 つのエポックのそれぞれから 1 つずつ、ユーザーのトップトピックを表すオブジェクトの配列で履行されるプロミスを返します。既定では、このメソッドは、呼び出し側が監視している現在のページの訪問をブラウザーに記録させるので、後でページのホスト名をトピックの計算に使用することができます。詳細は[トピック API](/ja/docs/Web/API/Topics_API) を参照してください。 - {{DOMxRef("Document.captureEvents()")}} {{Deprecated_Inline}} - : {{DOMxRef("Window.captureEvents")}} をご覧ください。 - {{DOMxRef("Document.caretPositionFromPoint()")}} @@ -236,8 +240,12 @@ _このインターフェイスは、{{DOMxRef("Node")}} インターフェイ - : ユーザーが現在選択しているテキスト範囲、または現在のキャレットの位置を表す {{DOMxRef('Selection')}} オブジェクトを返します。 - {{DOMxRef("Document.hasStorageAccess()")}} - : 文書に分離されていないクッキーへのアクセスがあるかどうかを示す論理値で解決する {{jsxref("Promise")}} を返します。 +- {{DOMxRef("Document.hasUnpartitionedCookieAccess()")}} + - : {{DOMxRef("Document.hasStorageAccess()")}} の新しい名前です。 - {{DOMxRef("Document.importNode()")}} - : 外部文書のノードの複製を返します。 +- {{DOMxRef("Document.mozSetImageElement()")}} {{Non-standard_Inline}} + - : 指定した要素 ID の背景画像として使用している要素を変更することができます。 - {{DOMxRef("Document.prepend()")}} - : 文書の最初の子の前に、 {{domxref("Node")}} オブジェクトまたは文字列の集合を挿入します。 - {{DOMxRef("Document.querySelector()")}} @@ -252,10 +260,10 @@ _このインターフェイスは、{{DOMxRef("Node")}} インターフェイ - : 文書の既存の子を、指定された新しい子の集合で置き換えます。 - {{DOMxRef("Document.requestStorageAccess()")}} - : サードパーティのコンテキスト（すなわち、 {{htmlelement("iframe")}} に埋め込まれたもの）に読み込まれた文書が、分離されていないクッキーへのアクセスを要求できるようにします。これはユーザーエージェントが既定で、プライバシーを改善するためにサードパーティコンテキストで読み込まれたサイトによる分離されていないクッキーへのアクセスをブロックしている場合に使用します。 -- {{domxref("Document.startViewTransition()")}} {{Experimental_Inline}} +- {{DOMxRef("Document.requestStorageAccessFor()")}} {{experimental_inline}} + - : 最上位のサイトが、同じ[関連ウェブサイト設定](/ja/docs/Web/API/Storage_Access_API/Related_website_sets)内の別のウェブサイトから発信された埋め込みコンテンツの代わりに、サードパーティクッキーへのアクセスをリクエストできるようにします。 +- {{domxref("Document.startViewTransition()")}} - : 新しい{{domxref("View Transitions API", "ビュートランジション", "", "nocode")}}を開始し、それを表すための {{domxref("ViewTransition")}} オブジェクトを返します。 -- {{DOMxRef("Document.mozSetImageElement()")}} {{Non-standard_Inline}} - - : 指定した ID を持つ要素の背景画像として使用する要素を変更できます。 `Document` インターフェイスは、{{DOMxRef("XPathEvaluator")}} インターフェイスによって拡張されています。 @@ -297,33 +305,28 @@ HTML 文書用の `Document` インターフェイスは {{DOMxRef("HTMLDocument - {{DOMxRef("Document.writeln()")}} - : 文書にテキスト行を書き込みます。 +## 静的メソッド + +_このインターフェイスには {{DOMxRef("Node")}} および {{DOMxRef("EventTarget")}} インターフェイスから継承したメソッドもあります。_ + +- {{domxref("Document/parseHTMLUnsafe_static", "Document.parseHTMLUnsafe()")}} + - : サニタイズ処理を行わずに、HTML の文字列から新しい `Document` オブジェクトを作成します。 + 文字列には宣言敵にシャドウルートを含むことができます。 + ## イベント -これらのイベントを待ち受けするには、 `addEventListener()` を使用するか、本インターフェイスの `onイベント名` プロパティへイベントリスナーを代入するかしてください。 +これらのイベントを待ち受けするには、 `addEventListener()` を使用するか、本インターフェイスの `onイベント名` プロパティへイベントリスナーを代入するかしてください。下記の一覧に掲載されているイベントの他に、文書ツリー内の{{domxref("Node", "ノード", "", "nocode")}}から多くのイベントがバブリングする可能性があります。 - {{DOMxRef("Document.afterscriptexecute_event", "afterscriptexecute")}} {{Non-standard_Inline}} - : 静的な {{HTMLElement("script")}} 要素でスクリプトの実行が完了した時に発生します。 - {{DOMxRef("Document.beforescriptexecute_event", "beforescriptexecute")}} {{Non-standard_Inline}} - : 静的な {{HTMLElement("script")}} で実行を開始しようとしている時に発生します。 +- {{domxref("Document.prerenderingchange_event", "prerenderingchange")}} {{experimental_inline}} + - : 事前レンダリングされた文書がアクティブになった（ユーザーがページを表示した）ときに発行されます。 - {{DOMxRef("Document.securitypolicyviolation_event", "securitypolicyviolation")}} - : コンテンツセキュリティポリシーに違反した場合に発行されます。 -- {{DOMxRef("Document/scroll_event", "scroll")}} - - : 文書のビューまたは要素がスクロールしたときに発行されます。 - {{DOMxRef("Document/visibilitychange_event", "visibilitychange")}} - : タブの内容の表示・非表示の状態が切り替わった時に発行されます。 -- {{DOMxRef("Document/wheel_event","wheel")}} - - : ユーザーがポインティングデバイス（通常はマウス）のホイールボタンを回転させた時に発行されます。 - -### アニメーションイベント - -- {{DOMxRef("Document/animationcancel_event", "animationcancel")}} - - : アニメーションが予期せず中断された時に発行されます。 -- {{DOMxRef("Document/animationend_event", "animationend")}} - - : アニメーションが正常に完了したときに発行されます。 -- {{DOMxRef("Document/animationiteration_event", "animationiteration")}} - - : アニメーションの1周期が完了したときに発行されます。 -- {{DOMxRef("Document/animationstart_event", "animationstart")}} - - : アニメーションが始まった時に発行されます。 ### クリップボードイベント @@ -334,23 +337,6 @@ HTML 文書用の `Document` インターフェイスは {{DOMxRef("HTMLDocument - {{DOMxRef("Document/paste_event", "paste")}} - : ユーザーがブラウザーのユーザーインターフェイスから貼り付け操作を開始したときに発行されます。 -### ドラッグ＆ドロップイベント - -- {{DOMxRef("Document/drag_event", "drag")}} - - : 要素またはテキストの選択範囲をユーザーがドラッグしている間、数百ミリ秒ごとに発行されます。 -- {{DOMxRef("Document/dragend_event", "dragend")}} - - : ドラッグ操作が終了したとき (マウスボタンを離したときやエスケープキーを押したとき) に発行されます。 -- {{DOMxRef("Document/dragenter_event", "dragenter")}} - - : ドラッグ中の要素またはテキストの選択範囲が妥当なドロップ対象に入ったときに発行されます。 -- {{DOMxRef("Document/dragleave_event", "dragleave")}} - - : ドラッグ中の要素またはテキストの選択範囲が妥当なドロップ対象から外れたときに発行されます。 -- {{DOMxRef("Document/dragover_event", "dragover")}} - - : 要素またはテキストの選択範囲が妥当なドロップ対象の上をドラッグされているときに (数ミリ秒ごとに) 発行されます。 -- {{DOMxRef("Document/dragstart_event", "dragstart")}} - - : ユーザーが要素またはテキストの選択範囲のドラッグを開始したときに発行されます。 -- {{DOMxRef("Document/drop_event", "drop")}} - - : 要素またはテキストの選択範囲が妥当なドロップ対象にドロップされたときに発行されます。 - ### 全画面イベント - {{DOMxRef("Document/fullscreenchange_event", "fullscreenchange")}} @@ -358,15 +344,6 @@ HTML 文書用の `Document` インターフェイスは {{DOMxRef("HTMLDocument - {{DOMxRef("Document/fullscreenerror_event", "fullscreenerror")}} - : [全画面](/ja/docs/Web/API/Fullscreen_API/Guide)モードへ切り替えようとしたとき、または解除しようとしたときにエラーが発生した場合に発行されます。 -### キーボードイベント - -- {{DOMxRef("Document/keydown_event", "keydown")}} - - : キーが押されたときに発行されます。 -- {{DOMxRef("Document/keypress_event", "keypress")}} {{Deprecated_Inline}} - - : 文字値を生成するキーが押下されたときに発行されます。 -- {{DOMxRef("Document/keyup_event", "keyup")}} - - : キーを離したときに発行されます。 - ### ロード＆アンロードイベント - {{DOMxRef("Document/DOMContentLoaded_event", "DOMContentLoaded")}} @@ -374,60 +351,25 @@ HTML 文書用の `Document` インターフェイスは {{DOMxRef("HTMLDocument - {{DOMxRef("Document/readystatechange_event", "readystatechange")}} - : 文書の {{DOMxRef("Document/readyState", "readyState")}} 属性が変更されたときに発行されます。 -### ポインターイベント - -- {{DOMxRef("Document/gotpointercapture_event", "gotpointercapture")}} - - : [`setPointerCapture()`](/ja/docs/Web/API/Element/setPointerCapture) を使用して要素がポインターをキャプチャしたときに発行されます。 -- {{DOMxRef("Document/lostpointercapture_event", "lostpointercapture")}} - - : [キャプチャされたポインター](/ja/docs/Web/API/Pointer_events#pointer_capture)が解放されたときに発行されます。 -- {{DOMxRef("Document/pointercancel_event", "pointercancel")}} - - : ポインターイベントがキャンセルされたときに発行されます。 -- {{DOMxRef("Document/pointerdown_event", "pointerdown")}} - - : ポインターがアクティブになったときに発行されます。 -- {{DOMxRef("Document/pointerenter_event", "pointerenter")}} - - : ポインターが要素やその子孫のヒットテスト境界の中へ移動したときに発行されます。 -- {{DOMxRef("Document/pointerleave_event", "pointerleave")}} - - : ポインターが要素のヒットテスト境界の外へ移動したときに発行されます。 +### ポインターロックイベント + - {{DOMxRef("Document/pointerlockchange_event", "pointerlockchange")}} - : ポインターがロックまたはアンロックされたときに発行されます。 - {{DOMxRef("Document/pointerlockerror_event", "pointerlockerror")}} - : ポインターをロックしようとして失敗したときに発行されます。 -- {{DOMxRef("Document/pointermove_event", "pointermove")}} - - : ポインターの座標が変化したときに発行されます。 -- {{DOMxRef("Document/pointerout_event", "pointerout")}} - - : ポインターが（訳あって）要素の _ヒットテスト_ 境界の外へ移動したときに発行されます。 -- {{DOMxRef("Document/pointerover_event", "pointerover")}} - - : ポインターが要素のヒットテスト境界の中へ移動したときに発行されます。 -- {{DOMxRef("Document/pointerup_event", "pointerup")}} - - : ポインターがアクティブではなくなったときに発行されます。 + +### スクロールイベント + +- {{DOMxRef("Document/scroll_event", "scroll")}} + - : 文書のビューまたは要素がスクロールされたときに発行されます。 +- {{DOMxRef("Document/scrollend_event", "scrollend")}} + - : 文書のビューまたは要素のスクロールが完全に終了したときに発行されます。 ### 選択イベント - {{DOMxRef("Document/selectionchange_event", "selectionchange")}} - : 文書でのテキスト選択範囲が変化したときに発行されます。 -### タッチイベント - -- {{DOMxRef("Document/touchcancel_event", "touchcancel")}} - - : 1 つ以上のタッチ点が実装固有の方法で中断された場合に発行されます (例えば、作成されたタッチ点が多すぎた場合など)。 -- {{DOMxRef("Document/touchend_event", "touchend")}} - - : 1 つ以上のタッチ点がタッチ面から取り除かれたときに発行されます。 -- {{DOMxRef("Document/touchmove_event", "touchmove")}} - - : 1 つ以上のタッチ点がタッチ面に沿って移動したときに発行されます。 -- {{DOMxRef("Document/touchstart_event", "touchstart")}} - - : 1 つ以上のタッチ点がタッチ面に配置されたときに発行されます。 - -### トランジションイベント - -- {{DOMxRef("Document/transitioncancel_event", "transitioncancel")}} - - : [CSS トランジション](/ja/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)がキャンセルされたときに発行されます。 -- {{DOMxRef("Document/transitionend_event", "transitionend")}} - - : [CSS トランジション](/ja/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)が完了したときに発行されます。 -- {{DOMxRef("Document/transitionrun_event", "transitionrun")}} - - : [CSS トランジション](/ja/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)が初めて作成されたときに発行されます。 -- {{DOMxRef("Document/transitionstart_event", "transitionstart")}} - - : [CSS トランジション](/ja/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)が実際に開始されたときに発行されます。 - ## 仕様書 {{Specifications}} From e17967c156df8bb7ad25f4a2201181ac0c571cf4 Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Wed, 26 Jun 2024 22:13:51 +0800 Subject: [PATCH 041/907] [zh-cn]: create the translation of `cookies.get()` method (#21049) Co-authored-by: A1lo --- .../webextensions/api/cookies/get/index.md | 119 ++++++++++++++++++ 1 file changed, 119 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/cookies/get/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/get/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/get/index.md new file mode 100644 index 00000000000000..04b24a94184cd0 --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/get/index.md @@ -0,0 +1,119 @@ +--- +title: cookies.get() +slug: Mozilla/Add-ons/WebExtensions/API/cookies/get +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c +--- + +{{AddonSidebar}} + +{{WebExtAPIRef("cookies")}} API 的 **`get()`** 方法根据 cookie 的名称和 URL 检索有关单个 cookie 的信息。 + +如果给定 URL 存在多个具有相同名称的 cookie，将返回路径最长的那个 cookie。对于路径长度相同的 cookie，将返回创建时间最早的那个。如果找不到匹配的 cookie，则返回 `null`。 + +这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。 + +## 语法 + +```js-nolint +let getting = browser.cookies.get( + details // 对象 +) +``` + +## 参数 + +- `details` + + - : 一个 `object`，包含用于匹配要检索的 cookie 的详细信息。它可以包含以下属性： + + - `firstPartyDomain` {{optional_inline}} + + - : 一个 `string`，表示与要检索的 cookie 关联的第一方域。如果浏览器启用了第一方隔离，则必须提供此属性。请参见[第一方隔离](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/cookies#第一方隔离)。 + + - `name` + + - : 一个 `string`，表示要检索的 cookie 的名称。 + + - `partitionKey` {{optional_inline}} + + - : 一个 `object`，表示包含 cookie 的[存储分区](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/cookies#存储分区)。包括此对象和 `topLevelSite` 以从分区存储中获取 cookie。否则，从未分区存储中返回 cookie。此对象包含： + + - `topLevelSite` {{optional_inline}} + - : 一个 `string`，表示包含 cookie 的顶级站点存储分区的第一方 URL。 + + - `storeId` {{optional_inline}} + + - : 一个 `string`，表示要查找的 {{WebExtAPIRef("cookies.CookieStore", "cookie 存储", "", 1)}}的 ID（由 {{WebExtAPIRef("cookies.getAllCookieStores()")}} 返回）。默认情况下，将使用当前执行上下文的 cookie 存储。 + + - `url` + + - : 一个 `string`，表示与要检索的 cookie 关联的 URL。此参数可以是完整的 URL，在这种情况下，URL 路径之后的任何数据（例如查询字符串）将被忽略。如果此 URL 的[主机权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)未在扩展的 [manifest 文件](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json)中指定，则 API 调用将失败。 + +### 返回值 + +一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个包含有关 cookie 的详细信息的 {{WebExtAPIRef('cookies.Cookie', 'Cookie')}} 对象，或者如果未找到 cookie，则兑现 `null`。 + +## 浏览器兼容性 + +{{Compat}} + +## 示例 + +此示例尝试获取与当前活动标签页的 URL 关联的名为“favorite-color”的 cookie： + +```js +function logCookie(cookie) { + if (cookie) { + console.log(cookie.value); + } +} + +function getCookie(tabs) { + let getting = browser.cookies.get({ + url: tabs[0].url, + name: "favorite-color", + }); + getting.then(logCookie); +} + +let getActive = browser.tabs.query({ + active: true, + currentWindow: true, +}); +getActive.then(getCookie); +``` + +{{WebExtExamples}} + +> **备注：** 此 API 基于 Chromium 的 [`chrome.cookies`](https://developer.chrome.com/docs/extensions/reference/cookies/#type-Cookie) API。本文档源自 Chromium 代码中的 [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json)。 + + From 10491f0f4eaeac5e9a5988ef073bf457427a5477 Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Wed, 26 Jun 2024 22:18:58 +0800 Subject: [PATCH 042/907] [zh-cn]: create the translation of `contextualIdentities.move()` method (#21304) Co-authored-by: A1lo --- .../api/contextualidentities/move/index.md | 92 +++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/move/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/move/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/move/index.md new file mode 100644 index 00000000000000..d2f9193907f19e --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/move/index.md @@ -0,0 +1,92 @@ +--- +title: contextualIdentities.move() +slug: Mozilla/Add-ons/WebExtensions/API/contextualIdentities/move +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c +--- + +{{AddonSidebar}} + +将一个或多个场景身份移动到场景身份列表中的新位置。 + +这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。 + +## 语法 + +```js-nolint +let moveContainers = browser.contextualIdentities.move( + cookieStoreIds, // 字符串或字符串数组 + position // 整数 +) +``` + +### 参数 + +- `cookieStoreIds` + + - : 字符串或字符串数组。要移动的场景身份的 cookie 存储 ID 的有序列表。 + +- `position` + + - : `integer`。将 `cookieStoreIds` 移动到场景身份列表中的位置。使用基于零的索引；`0` 表示第一个位置。`-1` 表示将项目移动到列表末尾。 + +### 返回值 + +一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，在场景身份重新排序完成时其会兑现。如果请求无效或未启用场景身份特性，则 promise 将被拒绝。 + +## 示例 + +此示例将第一个身份移动到末尾，然后再移回到开始位置。 + +```js +let identities = await browser.contextualIdentities.query({}); +let firstId = identities[0].cookieStoreId; + +// 将第一个身份移动到末尾。 +await browser.contextualIdentities.move(firstId, -1); + +// 再将身份移回到开始位置。 +await browser.contextualIdentities.move(firstId, 0); +``` + +另一种将第一个身份移动到末尾的方法是将所有其他身份移动到开始位置。 + +```js +let identities = await browser.contextualIdentities.query({}); +let ids = identities.map((identity) => identity.cookieStoreId); +// 创建一个不包含第一个项目的数组： +let otherIds = ids.slice(1); + +// 将其它身份移动到开始位置， +// 实际上将第一个身份放在了末尾。 +await browser.contextualIdentities.move(otherIds, 0); +``` + +此示例将“个人”身份移动到“工作”身份之前。此示例假设存在具有这些名称的容器。在自定义或本地化（非英文）Firefox 实例中可能会不存在这些容器。 + +```js +let identities = await browser.contextualIdentities.query({}); + +// 找到名称为“个人”的容器的索引和 ID。 +let personalIndex = identities.findIndex((ci) => ci.name === "个人"); +if (personalIndex === -1) { + throw new Error("“个人”容器未找到！"); +} +let personalId = identities[personalIndex].cookieStoreId; + +// 找到名称为“工作”的容器的索引。 +let workIndex = identities.findIndex((identity) => identity.name === "工作"); +if (workIndex === -1) { + throw new Error("“工作”容器未找到！"); +} + +if (personalIndex < workIndex) { + // 当“个人”身份移动时，所有后续身份向左移动一个位置。为了将“个人”身份放在“工作”身份之前，我们应当减去一个。 + workIndex--; +} +await browser.contextualIdentities.move(personalId, workIndex); +``` + +## 浏览器兼容性 + +{{Compat}} From 195a9262288153f0a711150cf327835b89258da8 Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Wed, 26 Jun 2024 22:19:12 +0800 Subject: [PATCH 043/907] [zh-cn]: create the translation of `contextualIdentities.ContextualIdentity` type (#21308) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: A1lo --- .../contextualidentity/index.md | 67 +++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/contextualidentity/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/contextualidentity/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/contextualidentity/index.md new file mode 100644 index 00000000000000..8a6d13447ac810 --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/contextualidentity/index.md @@ -0,0 +1,67 @@ +--- +title: contextualIdentities.ContextualIdentity +slug: Mozilla/Add-ons/WebExtensions/API/contextualIdentities/ContextualIdentity +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c +--- + +{{AddonSidebar}} + +**`contextualIdentities.ContextualIdentity`** 类型描述了单个场景身份。 + +## 类型 + +这种类型的值是对象，包含以下属性： + +- `cookieStoreId` + + - : `string`。身份的 cookie 存储 ID。由于场景身份不共享 cookie 存储，因此这作为唯一标识符。 + +- `color` + + - : `string`。身份的颜色。这将在属于该身份的标签页中显示。以下值是有效的： + + - "blue" + - "turquoise" + - "green" + - "yellow" + - "orange" + - "red" + - "pink" + - "purple" + - "toolbar" + + 值“toolbar”代表一个依赖主题的颜色。颜色为“toolbar”的身份将显示为与工具栏文本颜色（对应于[主题键](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme#colors) `"toolbar_field_text"`）相同的颜色。 + +- `colorCode` + + - : `string`。表示用于该身份的确切颜色的十六进制代码。例如：`"#37adff"`。在颜色为“toolbar”的特殊情况下，无论显示的颜色如何，`colorCode` 始终为 `"#7c7c7d"`。 + +- `icon` + + - : `string`。身份的图标名称。这将在属于该身份的标签页的 URL 栏中显示。以下值是有效的： + - "fingerprint" + - "briefcase" + - "dollar" + - "cart" + - "circle" + - "gift" + - "vacation" + - "food" + - "fruit" + - "pet" + - "tree" + - "chill" + - "fence" + +- `iconUrl` + + - : `string`。指向身份图标的完整 resource:// URL。例如：“resource://usercontext-content/fingerprint.svg”。 + +- `name` + + - : `string`。身份的名称。这将在属于该身份的标签页的 URL 栏中显示。注意，名称不必唯一。 + +## 浏览器兼容性 + +{{Compat}} From 62651d5710b5c2a40b53ccfa2101e8107e5ef6b4 Mon Sep 17 00:00:00 2001 From: hanyujie2002 Date: Thu, 27 Jun 2024 09:22:34 +0800 Subject: [PATCH 044/907] zh-cn: revise the translation of cbt - accessibility (#21747) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: A1lo --- .../accessibility/index.md | 589 +++++++++++------- 1 file changed, 365 insertions(+), 224 deletions(-) diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.md b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.md index 49c3c09d546c33..612b034748c114 100644 --- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.md +++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.md @@ -1,6 +1,8 @@ --- title: 解决常见的无障碍问题 slug: Learn/Tools_and_testing/Cross_browser_testing/Accessibility +l10n: + sourceCommit: af1e384356e21dbcc573d1c1cc015ec79c644de1 --- {{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/JavaScript","Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing")}} @@ -12,11 +14,11 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/Accessibility 前提： - 熟悉HTML, - CSS,和HTML、CSS 和 JavaScript语言; 理解 语言；理解跨浏览器测试原理 @@ -33,105 +35,98 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/Accessibility 当我们在 web 技术的背景下说无障碍时，大多数人立即想到确保残疾人可以使用网站/应用程序，例如： -- 视障人士使用屏幕阅读器或放大/缩放浏览文本 -- 有运动功能障碍的人使用键盘（或其他非鼠标功能）使用网站。 +- 视障人士使用屏幕阅读器或放大/缩放浏览文本。 +- 有运动功能障碍的人使用键盘（或其他非鼠标特性）使用网站。 - 有听力障碍的人依赖于替代音频/视频内容的文本。 -但是，说无障碍仅与残疾人有关是错误的。实际上，无障碍的目的是使你的网站/应用程序在尽可能多的环境中被尽可能多的人使用，而不仅仅是那些使用高性能台式计算机的用户。极端的例子可能包括： +然而，认为无障碍设计仅与残障人士相关是不准确的。无障碍设计的真正目的是确保你的网站/应用程序能够被尽可能多的人在尽可能多的环境下使用，而不限于那些使用高性能台式电脑的用户。一些具体的例子可能包括： - 移动端用户 -- 使用其他浏览设备（例如电视，手表等） -- 使用较旧设备的用户（他们可能没有最新的浏览器） -- 设备性能不高的用户（他们可能具有较慢的处理器） +- 使用其他浏览设备（例如电视、手表等）的用户 +- 使用较旧设备（可能没有最新的浏览器）的用户 +- 设备性能不高（可能具有较慢的处理器）的用户 -在某种程度上，本模块都是关于无障碍的 — 跨浏览器测试可确保你的网站可以被尽可能多的人使用。这篇[无障碍是什么？](/zh-CN/docs/Learn/Accessibility/What_is_accessibility) 更全面透彻地定义了什么是无障碍。 +在某种程度上，本模块都是关于无障碍的——跨浏览器测试可确保你的网站可以被尽可能多的人使用。这篇[无障碍是什么？](/zh-CN/docs/Learn/Accessibility/What_is_accessibility)更全面透彻地定义了什么是无障碍。 -也就是说，本文将涵盖跨浏览器和有关残疾人的测试问题以及他们如何使用 Web。我们在其他地方已经讨论过其他领域，例如[响应式设计问题](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1%E9%97%AE%E9%A2%98)和[性能](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#Performance_issues)。 +也就是说，本文将涵盖跨浏览器和有关残疾人的测试问题以及他们如何使用 Web。我们在本模块的其他地方已经讨论过别的领域，例如[响应式设计问题](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#响应式设计问题)和[性能](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#性能问题)。 -> **备注：** 就像 Web 开发中的许多事情一样，无障碍不是 100% 的成功或失败可以定义的；对于所有内容而言，几乎不可能实现 100％的无障碍，尤其是当站点变得越来越复杂时。我们更多的是通过防御性编码并遵循最佳实践，努力使尽可能多的人可以访问尽可能多的内容。 +> **备注：** 如同 Web 开发的许多方面一样，无障碍并非可以用 100% 的成功或失败来定义；实际上，对于所有内容来说，要达到完全的无障碍几乎是不可能的，特别是当网站变得越来越复杂。我们所做的，更多是采取防御性编程，并遵守最佳实践，以确保尽可能多的人能够访问到尽可能多的内容。 ## 常见无障碍问题 在本节中，我们将围绕 Web 无障碍，详细介绍与特定技术相关的一些主要问题、要遵循的最佳实践，以及可以进行的一些快速测试，以查看你的网站是否朝着正确的方向发展。 -> **备注：** 无障碍在道德上是正确的事情，对企业也有好处 (残疾用户，移动用户等构成了重要的细分市场), 并且在世界许多地方，提供出来的网络媒体资源无法为残疾人服务也是违法的。阅读[无障碍指南和法律](/zh-CN/docs/Learn/Accessibility/What_is_accessibility#%E6%97%A0%E9%9A%9C%E7%A2%8D%E6%8C%87%E5%8D%97%E5%92%8C%E6%B3%95%E5%BE%8B)获取更多相关信息。 +> **备注：** 无障碍在道德上是正确的事情，对企业也有好处（残疾用户，移动用户等构成了重要的细分市场），并且在世界许多地方，提供出来的网络媒体资源无法为残疾人服务也是违法的。阅读[无障碍指南和法律](/zh-CN/docs/Learn/Accessibility/What_is_accessibility#无障碍指南和法律)获取更多相关信息。 ### HTML -HTML 语义化 (语义化正确地使用 HTML 标签) 对于无障碍来说是开箱即用的 — 这类内容可供无视障人士阅读（前提是你不会做任何愚蠢的事情，例如使文本变小或使用 CSS 隐藏它），也可被屏幕阅读器（从字面上读出网页的应用）之类的辅助技术使用，并赋予其他优势。 +HTML 语义化（即正确使用 HTML 标签）对无障碍访问至关重要——这样的内容不仅能为视障人士提供阅读可能（前提是避免诸如缩小文本或使用 CSS 隐藏内容等不当做法），还能被屏幕阅读器（能够朗读网页内容的应用程序）等辅助技术所利用，同时带来其他好处。 #### 语义化结构 -HTML 语义化最重要的捷径是为你的内容使用标题和段落的结构；这是因为屏幕阅读器用户倾向于将文档标题用作导航，以更快地找到他们需要的内容。如果你的内容没有标题，那么他们将获得的是一大坨文字，没有任何可定位的标记。坏的例子和好的例子如下： +HTML 语义化的关键在于使用标题和段落结构来组织你的内容；这是因为屏幕阅读器的用户通常会利用文档标题进行导航，以便更快地定位他们所需的信息。如果你的内容缺少标题，那么他们面对的将是一堆无法轻易导航的文本，缺乏明确的定位标识。以下是不佳与佳的示例： -```html example-bad -My heading

-This is the first section of my document. +```html 错误示例 +我的标题

+这是我文档的第一部分。

-I'll add another paragraph here too. +我还会在这里添加另一个段落。

-My subheading +我的子标题

-This is the first subsection of my document. I'd love people to be able to find -this content! +这是我文档的第一个子部分。我希望人们能够找到这些内容！

-My 2nd subheading +我的第二个子标题

-This is the second subsection of my content. I think is more interesting than -the last one. +这是我内容的第二个子部分。我认为这比上一个更有趣。 ``` -```html example-good -

My heading

+```html 正确示例 +

我的标题

-

This is the first section of my document.

+

这是我文档的第一部分。

-

I'll add another paragraph here too.

+

我还会在这里添加另一个段落。

-

My subheading

+

我的子标题

-

- This is the first subsection of my document. I'd love people to be able to - find this content! -

+

这是我文档的第一个子部分。我希望人们能够找到这些内容！

-

My 2nd subheading

+

我的第二个子标题

-

- This is the second subsection of my content. I think is more interesting than - the last one. -

+

这是我内容的第二个子部分。我认为这比上一个更有趣。

``` -此外，你的内容应该在逻辑顺序上讲得通的 — 你总能在以后再为它们写 CSS，但你应该在一开始就确定内容正确的顺序。 +此外，你的内容的源代码应符合逻辑顺序——你总能在以后再为它们写 CSS，但你应该在一开始就确定源代码正确的顺序。 -作为测试，你可以关闭网站的 CSS，然后看看没有了 CSS 网站是否能被理解。你可以通过从代码中删除 CSS 来手动完成此操作，但是最简单的方法是使用浏览器功能，例如： +作为测试，你可以关闭网站的 CSS，然后看看没有了 CSS 网站是否能被理解。你可以通过从代码中删除 CSS 来手动完成此操作，但是最简单的方法是使用浏览器特性，例如： -- Firefox: 选择*查看 > 页面样式 > 无样式* -- Safari: 选择*开发 > 停用样式* (需要开启“开发”菜单，点击*Safari > 偏好设置 > 高级 > 在菜单栏中显示“开发”菜单*) -- Chrome: 安装 Web Developer Toolbar 扩展程序，然后重启浏览器。点击图标，选择*CSS > 停用所有样式* -- Edge: 选择*查看 > 样式 > 无样式* +- Firefox：选择*查看 > 页面样式 > 无样式* +- Safari：选择*开发 > 停用样式*（需要开启“开发”菜单，点击 _Safari > 偏好设置 > 高级 > 在菜单栏中显示“开发”菜单_） +- Chrome：安装 Web Developer Toolbar 扩展程序，然后重启浏览器。点击图标，选择 _CSS > 停用所有样式_ +- Edge：选择*查看 > 样式 > 无样式* -#### 使用键盘 +#### 使用键盘原生无障碍性 -某些 HTML 功能可以使用键盘来选择 — 这是默认的，从早期 web 开始就是这样的。具有此功能的元素是允许用户与网页交互的常见元素，比如 links, {{htmlelement("button")}}s, 以及表单元素，比如{{htmlelement("input")}}. +某些 HTML 特性可以只使用键盘来选择——这是默认的，从早期 web 开始就是这样的。具有此功能的元素是允许用户与网页交互的常见元素，比如链接、{{htmlelement("button", "按钮")}}，以及表单元素，比如 {{htmlelement("input")}}。 -浏览[native-keyboard-accessibility.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html) (查看[源码](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html)) 尝试一下— 在新标签页中打开它，然后尝试按 Tab 键；按下几下后，你应该看到标签焦点开始在不同的可聚焦元素之间移动；在每个浏览器中，被聚焦的元素都被赋予突出的默认样式 (不同的浏览器表现略有不同) 以便你能分辨聚焦在哪个元素上。 +浏览 [native-keyboard-accessibility.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html)（查看[源码](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html)）尝试一下——在新标签页中打开它，然后尝试按 Tab 键；按下几下后，你应该看到标签焦点开始在不同的可聚焦元素之间移动；在每个浏览器中，被聚焦的元素都被赋予突出的默认样式 (不同的浏览器表现略有不同) 以便你能分辨聚焦在哪个元素上。 -![](button-focused-unfocused.png) +![三个按钮的截图，展示了交互式原生元素的默认行为示例。第三个按钮用蓝色边框突出显示，表示其聚焦状态。](button-focused-unfocused.png) -然后，你可以按 Enter / Return 键来关注焦点链接，或者按一个按钮（我们已经包含一些 JavaScript 来使按钮提醒消息），或者在输入框开始输入文本，（其他表单元素具有不同的控件，例如{{htmlelement("select")}}元素可以使用向上和向下箭头键显示和循环显示其选项）。 +> **备注：** 在 Firefox 中，你还可以启用一个叠加层来显示页面的标签顺序。有关更多信息，请参见：[Accessibility Inspector > Show web page tabbing order](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html#show-web-page-tabbing-order)。 -请注意，不同的浏览器可能具有不同的键盘控制选项。大多数现代浏览器都遵循上述的标签模式（你也可以执行 Shift + Tab 来向后移动可聚焦元素），但是某些浏览器具有自己的特性： +然后你可以按 Enter/Return 键来跟随聚焦的链接或按下按钮（我们已经包含了一些 JavaScript 来使按钮显示一条消息），或开始输入以在文本输入框中输入文本（其他表单元素有不同的控制方式，例如 {{htmlelement("select")}} 元素可以使用向上和向下箭头键显示和循环其选项）。 -- Firefox for the Mac doesn't do tabbing by default. To turn it on, you have to go to _Preferences > Advanced > General_, then uncheck "Always use the cursor keys to navigate within pages". Next, you have to open your Mac's System Preferences app, then go to _Keyboard > Shortcuts_, then select the _All Controls_ radio button. -- Safari 默认情况下不允许你按 tab 遍历链接；要启用此功能，你需要打开 Safari 的“_偏好设置_”，转到“_高级_”，然后选中“_按下 Tab 键以高亮显示网页上的每一项_”。 +请注意，不同的浏览器可能有不同的键盘控制选项可用。大多数现代浏览器都遵循上述 tab 模式（你也可以使用 Shift + Tab 向后移动浏览可聚焦元素），但一些浏览器有自己的特点： -> **警告：** 你应该在所写的任何新页面上执行这种测试 — 确保可以通过键盘使用功能。 +- 默认情况下，Safari 浏览器在 Mac 上不能通过 Tab 键在各个链接间切换。要激活这项功能，请打开*系统偏好设置*，滚动至*键盘*选项，并开启*使用 Tab 键移动焦点*。如果你使用的是较旧版本的 macOS，请查阅 Apple 的 macOS 用户指南中的[使用键盘来代替鼠标操作 Mac](https://support.apple.com/zh-cn/guide/mac-help/mchlp1399/mac)一节。 -这个例子强调了正确使用语义元素的重要性。可以用 CSS 将任何元素的样式设置为看起来像链接或按钮，并使用 JavaScript 让其表现为像链接或按钮一样，但实际上它们不是链接或按钮，你将失去很多语义化元素带给你的无障碍。因此，尽量避免这样做。 +> **警告：** 你应该对你编写的任何新页面执行此类测试/审查——确保功能可通过键盘访问，并且 Tab 浏览顺序遵守贯穿文档的合理导航路径。 -另一个技巧 — 如我们的示例所示，你可以使用[:focus](/zh-CN/docs/Web/CSS/:focus)伪类控制可聚焦元素在聚焦时的外观。最好将焦点和悬停样式加重显示，这样无论是使用鼠标还是键盘的用户，都能直观地察觉控件在被激活时将执行的操作 +这个例子强调了使用正确的语义元素来执行适当任务的重要性。你可以用 CSS 设计任何元素，使其看起来像链接或按钮，并用 JavaScript 让它们的行为类似于链接或按钮，但实际上它们并不是真正的链接或按钮。这样做，你会失去这些元素本身就提供的许多无障碍特性，而且这些特性是免费的。因此，如果可能的话，你应该避免这样做。 + +另一个建议——正如我们的示例所展示的，你可以使用 [:focus](/zh-CN/docs/Web/CSS/:focus) 伪类来控制可聚焦元素在聚焦时的样式。最佳实践是将焦点和悬停样式结合使用，这样无论用户是使用鼠标还是键盘，都能通过视觉提示了解控件在激活时的行为。 ```css a:hover, @@ -146,297 +141,443 @@ select:focus { } ``` -> **备注：** 如果你决定使用 CSS 删除默认的焦点样式，请确保将其替换为更适合你的设计的其他样式 — 这是一种非常有价值的无障碍工具，不应删除。 +> **备注：** 如果你决定使用 CSS 移除默认焦点样式，请确保用其他更适合你的设计的东西替换它——这是一个非常有价值的无障碍工具，不应该被删除。 -#### 模拟键盘 +#### 构建键盘无障碍性 -有时可能无法使用键盘完成无障碍。你可能有一个语义不是很好的网站（也许你最终得到了一个糟糕的 CMS 网页，该 CMS 生成了由\
组成的按钮），或者你正在使用一个没有内置键盘无障碍的复杂控件，例如 HTML5 {{htmlelement("video")}} 元素（令人惊奇的是，Opera 是唯一允许你在\