From dd071e0bca1263eef2ff210b024e3fbca65e62b8 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 23 Oct 2023 21:44:26 +0900 Subject: [PATCH 01/91] =?UTF-8?q?2023/07/10=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/xpath/axes/index.md | 36 +++++++++++++++++--------------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/files/ja/web/xpath/axes/index.md b/files/ja/web/xpath/axes/index.md index b4dc76e199aa9a..6ed14f8026102b 100644 --- a/files/ja/web/xpath/axes/index.md +++ b/files/ja/web/xpath/axes/index.md @@ -1,37 +1,39 @@ --- title: 軸 slug: Web/XPath/Axes +l10n: + sourceCommit: b6f343538eac4a803943b4e99b0c0545b372645a --- -{{ XsltRef() }} [XPath](/ja/docs/Web/XPath) 仕様では 13 種類の軸 (Axis) が定められています。軸はコンテキストノードとの関連性を表し、ツリー上でのノードのコンテキストノードからの相対的な位置を示すのに用いられます。 +{{XsltSidebar}} -XPath 式の使用に関するより詳しい情報は、 [XSLT による XML の変換](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT)の記事の最後の[さらなる読み物](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT#for_further_reading)の節を参照してください。また、[XPath 仕様書の 'axes' の節](https://www.w3.org/TR/xpath-30/#axes)も参照してください。 +[XPath](/ja/docs/Web/XPath) 仕様では 13 種類の軸 (Axis) が定められています。軸はコンテキストノードとの関連性を表し、ツリー上でのノードのコンテキストノードからの相対的な位置を示すのに用いられます。 -- [ancestor](/ja/docs/Web/XPath/Axes/ancestor) +XPath 式の使用に関するより詳しい情報は、 [XSLT による XML の変換](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT)の記事の最後の[さらなる読み物](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT#さらなる読み物)の節を参照してください。また、[XPath 仕様書の 'axes' の節](https://www.w3.org/TR/xpath-30/#axes)も参照してください。 + +- `ancestor` - : コンテキストノードの親ノードからルートノードまでのすべての祖先を示します。 -- [ancestor-or-self](/ja/docs/Web/XPath/Axes/ancestor-or-self) +- `ancestor-or-self` - : コンテキストノードと、そのすべてのルートノードを含む祖先を示します。 -- [attribute](/ja/docs/Web/XPath/Axes/attribute) +- `attribute` - : コンテキストノードの属性を示します。属性を持つのは要素のみです。この軸はアットマーク (`@`) によって省略できます。 -- [child](/ja/docs/Web/XPath/Axes/child) +- `child` - : コンテキストノードの子を示します。 XPath 式で軸が指定されていなければ、デフォルトでこの軸が指定されていると認識されます。子を持つのはルートノードか要素ノードのみなので、他のノードでこの軸を使用しても何も選択されません。 -- [descendant](/ja/docs/Web/XPath/Axes/descendant) +- `descendant` - : コンテキストノードのすべての子と、そのすべての子と、そのまたすべての･･･というように示します。属性ノードと名前空間ノードは**含まれません**。 `attribute` ノードの `parent` は要素ノードですが、`attribute` ノードはその要素ノードの子ではないからです。 -- [descendant-or-self](/ja/docs/Web/XPath/Axes/descendant-or-self) +- `descendant-or-self` - : コンテキストノードと、そのすべての子孫を示します。属性ノードと名前空間ノードは**含まれません**。 `attribute` ノードの `parent` は要素ノードですが、`attribute` ノードはその要素ノードの子ではないからです。 -- [following](/ja/docs/Web/XPath/Axes/following) +- `following` - : コンテキストノードの後に現れる、`descendant`、`attribute`、`namespace` ノードを除くすべてのノードを示します。 -- [following-sibling](/ja/docs/Web/XPath/Axes/following-sibling) +- `following-sibling` - : コンテキストノードと同じ親を持ち、ソース文書内でコンテキストノードの後に現れるすべてのノードを示します。 -- [namespace](/ja/docs/Web/XPath/Axes/namespace)_(サポート対象外)_ +- `namespace` _(未対応)_ - : コンテキストノードのスコープ内にあるすべてのノードを示します。この場合、コンテキストノードは要素ノードでなければなりません。 -- [parent](/ja/docs/Web/XPath/Axes/parent) +- `parent` - : コンテキストノードの親である単一のノードを示します。この軸は 2 つのピリオド (`..`) によって省略できます。 -- [preceding](/ja/docs/Web/XPath/Axes/preceding) +- `preceding` - : 文書内でコンテキストノードの前に現れる、 `ancestor`、 `attribute` 、 `namespace` ノードを除くすべてのノードを示します。 -- [preceding-sibling](/ja/docs/Web/XPath/Axes/preceding-sibling) +- `preceding-sibling` - : コンテキストノードと同じ親を持ち、ソース文書内でコンテキストノードの前に現れるすべてのノードを示します。 -- [self](/ja/docs/Web/XPath/Axes/self) +- `self` - : コンテキストノード自身を示します。 この軸はピリオド (`.`) によって省略できます。 - -{{QuickLinksWithSubpages("/ja/docs/Web/XPath")}} From 1f39941ea7b8d8a4fa7333708ccc7a101f34da99 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 29 Oct 2023 09:25:05 +0900 Subject: [PATCH 02/91] =?UTF-8?q?2023/10/02=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F=20(#1667?= =?UTF-8?q?7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2023/10/02 時点の英語版に同期 * Update files/ja/web/xpath/comparison_with_css_selectors/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * reviewdogの修正を反映 --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../comparison_with_css_selectors/index.md | 50 ++++--------------- 1 file changed, 11 insertions(+), 39 deletions(-) diff --git a/files/ja/web/xpath/comparison_with_css_selectors/index.md b/files/ja/web/xpath/comparison_with_css_selectors/index.md index 07240ba074d89b..646df4c5ebf419 100644 --- a/files/ja/web/xpath/comparison_with_css_selectors/index.md +++ b/files/ja/web/xpath/comparison_with_css_selectors/index.md @@ -1,47 +1,19 @@ --- title: CSS セレクターと XPath の比較 slug: Web/XPath/Comparison_with_CSS_selectors +l10n: + sourceCommit: bb652aaf3e38f3c7fef970a62f813047dffac879 --- -{{XSLTRef}} +{{XsltSidebar}} この記事では、ウェブ開発者が適材適所のツールを選択できるように、CSSセレクターとXPathの違いを説明することを目的としています。 -| [XPath 機能](/ja/docs/Web/XPath) | [相当する CSS](/ja/docs/Web/CSS/CSS_Selectors) | -| ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | -| [`ancestor`](/ja/docs/Web/XPath/Axes/ancestor), [`parent`](/ja/docs/Web/XPath/Axes/parent) or [`preceding-sibling`](/ja/docs/Web/XPath/Axes/preceding-sibling) 軸 | {{CSSxRef(":has",":has()")}} セレクター {{experimental_inline}} | -| [`attribute`](/ja/docs/Web/XPath/Axes/attribute) 軸 | [属性セレクター](/ja/docs/Web/CSS/Attribute_selectors) | -| [`child`](/ja/docs/Web/XPath/Axes/child) 軸 | [子結合子](/ja/docs/Web/CSS/Child_combinator) | -| [`descendant`](/ja/docs/Web/XPath/Axes/descendant) 軸 | [子孫結合子](/ja/docs/Web/CSS/Descendant_combinator) | -| [`following-sibling`](/ja/docs/Web/XPath/Axes/following-sibling) 軸 | [一般兄弟結合子](/ja/docs/Web/CSS/General_sibling_combinator)または[隣接兄弟結合子](/ja/docs/Web/CSS/Adjacent_sibling_combinator) | -| [`self`](/ja/docs/Web/XPath/Axes/self) 軸 | {{CSSxRef(":scope")}} または {{CSSxRef(":host")}} セレクター＾ | - - +| [XPath 機能](/ja/docs/Web/XPath) | [相当する CSS](/ja/docs/Web/CSS/CSS_selectors) | +| ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | +| [`ancestor`](/ja/docs/Web/XPath/Axes#ancestor), [`parent`](/ja/docs/Web/XPath/Axes#parent) or [`preceding-sibling`](/ja/docs/Web/XPath/Axes#preceding-sibling) 軸 | {{CSSxRef(":has",":has()")}} セレクター {{experimental_inline}} | +| [`attribute`](/ja/docs/Web/XPath/Axes#attribute) 軸 | [属性セレクター](/ja/docs/Web/CSS/Attribute_selectors) | +| [`child`](/ja/docs/Web/XPath/Axes#child) 軸 | [子結合子](/ja/docs/Web/CSS/Child_combinator) | +| [`descendant`](/ja/docs/Web/XPath/Axes#descendant) 軸 | [子孫結合子](/ja/docs/Web/CSS/Descendant_combinator) | +| [`following-sibling`](/ja/docs/Web/XPath/Axes#following-sibling) 軸 | [後続兄弟結合子](/ja/docs/Web/CSS/Subsequent-sibling_combinator)または[次兄弟結合子](/ja/docs/Web/CSS/Next-sibling_combinator) | +| [`self`](/ja/docs/Web/XPath/Axes#self) 軸 | {{CSSxRef(":scope")}} または {{CSSxRef(":host")}} セレクター＾ | From 0c4c9b3ae1497f997e2d786e40b778ed324f863d Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 23 Oct 2023 22:34:52 +0900 Subject: [PATCH 03/91] =?UTF-8?q?2023/10/02=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/css/next-sibling_combinator/index.md | 17 ++-- .../subsequent-sibling_combinator/index.md | 87 ++++++++++++++----- 2 files changed, 75 insertions(+), 29 deletions(-) diff --git a/files/ja/web/css/next-sibling_combinator/index.md b/files/ja/web/css/next-sibling_combinator/index.md index 743e76d33278e5..e078beb1326ad6 100644 --- a/files/ja/web/css/next-sibling_combinator/index.md +++ b/files/ja/web/css/next-sibling_combinator/index.md @@ -1,24 +1,27 @@ --- -title: 隣接兄弟結合子 +title: 次兄弟結合子 slug: Web/CSS/Next-sibling_combinator -original_slug: Web/CSS/Adjacent_sibling_combinator +original_slug: Web/CSS/Next-sibling_combinator +l10n: + sourceCommit: bb652aaf3e38f3c7fef970a62f813047dffac879 --- {{CSSRef("Selectors")}} -**隣接兄弟結合子** (adjacent sibling combinator, `+`) は 2 つのセレクターを接続し、 2 つ目の要素が 1 つ目の要素の _直後_ にあって、両者が同じ親{{DOMxRef("element", "要素")}}の子同士である場合に一致します。 +**次兄弟結合子** (next-sibling combinator, `+`) は 2 つのセレクターを接続し、 2 つ目の要素が 1 つ目の要素の _直後_ にあって、両者が同じ親{{DOMxRef("element", "要素")}}の子同士である場合に一致します。 ```css /* 画像の直後に来る段落 */ img + p { - font-style: bold; + font-weight: bold; } ``` ## 構文 -```css -直前の要素 + 対象の要素 { スタイルプロパティ } +```css-nolint +/* 結合子の前後の空白はオプションですが、推奨されます。 */ +直前の要素 + 対象の要素 { スタイルプロパティ } ``` ## 例 @@ -55,4 +58,4 @@ li:first-of-type + li { ## 関連情報 -- [一般兄弟結合子](/ja/docs/Web/CSS/General_sibling_combinator) +- [後続兄弟結合子](/ja/docs/Web/CSS/Subsequent-sibling_combinator) diff --git a/files/ja/web/css/subsequent-sibling_combinator/index.md b/files/ja/web/css/subsequent-sibling_combinator/index.md index 6b142845942de6..b54b0bbcfe2c07 100644 --- a/files/ja/web/css/subsequent-sibling_combinator/index.md +++ b/files/ja/web/css/subsequent-sibling_combinator/index.md @@ -1,16 +1,17 @@ --- -title: 一般兄弟結合子 +title: 後続兄弟結合子 slug: Web/CSS/Subsequent-sibling_combinator -original_slug: Web/CSS/General_sibling_combinator +l10n: + sourceCommit: bb652aaf3e38f3c7fef970a62f813047dffac879 --- {{CSSRef("Selectors")}} -**一般兄弟結合子** (general sibling combinator, `~`) は 2 個のセレクターを結びつけ、 1 つ目の要素の後に 2 つ目の要素のがあり（直後である必要はない）、かつ両者が同じ親{{Glossary("element", "要素")}}の子であるすべてのパターンに一致します。 +**後続兄弟結合子** (subsequent-sibling combinator, `~`) は 2 個のセレクターを結びつけ、 1 つ目の要素の後に 2 つ目の要素のがあり（直後である必要はない）、かつ両者が同じ親要素の子であるすべてのパターンに一致します。 + +次の例では、後続兄弟結合子 (`~`) は、画像の兄弟であり、画像の後に現れる段落を選択し、スタイル設定するのに便利です。 ```css -/* 任意の画像の兄弟で、 - その画像より後方にある段落 */ img ~ p { color: red; } @@ -18,13 +19,35 @@ img ~ p { ## 構文 -```css +```css-nolint +/* 結合子の前後の空白はオプションですが、推奨されます。 */ 先行する要素 ~ 選択される要素 { スタイルプロパティ } ``` ## 例 -### CSS +### 単純セレクターと結合子の使用 + +この例では、両方のセレクターが単純セレクター（`p` と `span`）である場合に、 `~` 結合子を使用する場合を示しています。 + +```html +
+ これは段落の前に現れるので赤にはなりません。 +

ここに段落があります。

+ ここに code があります。 + + この span が赤いのは、間に他のノードがあるにもかかわらず、段落の後に現れるからです。 + +

何かあっても、笑顔を絶やさないでください。

+

夢は大きく

+ + ノードの数や種類に関係なく、段落の後の同じ親からの span はすべて赤くなります。 + +
+ + この span は段落と親を共有していないので赤ではありません。 + +``` ```css p ~ span { @@ -32,25 +55,45 @@ p ~ span { } ``` -### HTML +{{EmbedLiveSample("Using the combinator with simple selectors", "auto", 300)}} + +### 複合セレクターによる結合子の使用 + +この例には2つの[複合セレクター](/ja/docs/Web/CSS/CSS_selectors/Selector_structure#complex_selector)があり、どちらも後続兄弟結合子 `.foo p ~ span` と `.foo p ~ .foo span` を使用しています。 + +- 最初の複合セレクターである `.foo p ~ span` は、もし span と段落の親が同じで、**かつ**その親またはその親の祖先がクラス `.foo` を持っている場合、段落の後に来るすべての span に一致します。 +- 2 つ目の複合セレクター `.foo p ~ .foo span` は、クラス `.foo` を持っている要素の子孫であるすべての span に一致します。 + +下記の例は、複合セレクターの対象要素は、複合セレクターの初期要素と同じ親を示さなければならないことを示しています。 ```html -This is not red. -

Here is a paragraph.

-Here is some code. -And here is a red span! -And this is a red span! -More code... -
How are you?
-

Whatever it may be, keep smiling.

-

Dream big

-

that's all.

-And yet again this is a red span! +

夢は大きく

+またしても赤い span です！ +
+

別の段落です。

+ 青い span +
+ 緑の span +
+
+``` + +```css +.foo p ~ span { + color: blue; +} + +.foo p ~ .foo span { + color: green; +} ``` -### 結果 +{{EmbedLiveSample("Using the combinator with complex selectors", "auto", 200)}} + +上の HTML では、`.foo p` の兄弟は `span` と `.foo` です。緑色の `span` は `.foo` クラスの子孫で、`p` の兄弟です。 -{{EmbedLiveSample("Examples", "auto", 300)}} +- 対象セレクターが `span` の場合、`p` の兄弟である `span` 要素が選択されます。 `p` 要素は `.foo` の子孫であるため、その `span` 兄弟要素も選択されます。 +- `.foo p ~ .foo span` では、対象とするセレクターは `.foo` の子孫である `span` です。この場合、 `.foo` の子孫である `span` 要素は、その `.foo` が `p` の兄弟である場合に選択されます。基本的には、どちらも `.foo` の祖先に入れ子になっています。 ## 仕様書 @@ -62,4 +105,4 @@ p ~ span { ## 関連情報 -- [隣接兄弟結合子](/ja/docs/Web/CSS/Adjacent_sibling_combinator) +- [次兄弟結合子](/ja/docs/Web/CSS/Next-sibling_combinator) From ac8b4d2e6bd61f0f333f2865a2b336bbd008e027 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 23 Oct 2023 22:39:43 +0900 Subject: [PATCH 04/91] =?UTF-8?q?=E9=9A=A3=E6=8E=A5=E5=85=84=E5=BC=9F?= =?UTF-8?q?=E7=B5=90=E5=90=88=E5=AD=90=E2=86=92=E6=AC=A1=E5=85=84=E5=BC=9F?= =?UTF-8?q?=E7=B5=90=E5=90=88=E5=AD=90=E3=80=81=E4=B8=80=E8=88=AC=E5=85=84?= =?UTF-8?q?=E5=BC=9F=E7=B5=90=E5=90=88=E5=AD=90=E2=86=92=E5=BE=8C=E7=B6=9A?= =?UTF-8?q?=E5=85=84=E5=BC=9F=E7=B5=90=E5=90=88=E5=AD=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/glossary/css_selector/index.md | 4 ++-- .../learn/css/building_blocks/selectors/combinators/index.md | 4 ++-- files/ja/learn/css/building_blocks/selectors/index.md | 4 ++-- files/ja/learn/css/howto/highlight_para_after_h1/index.md | 4 ++-- files/ja/learn/forms/ui_pseudo-classes/index.md | 2 +- files/ja/web/css/_colon_nth-last-child/index.md | 2 +- files/ja/web/css/css_selectors/index.md | 4 ++-- .../web/css/privacy_and_the__colon_visited_selector/index.md | 2 +- files/ja/web/css/reference/index.md | 4 ++-- files/ja/web/css/text-indent/index.md | 2 +- 10 files changed, 16 insertions(+), 16 deletions(-) diff --git a/files/ja/glossary/css_selector/index.md b/files/ja/glossary/css_selector/index.md index a64ae4959866d6..d779403501bab4 100644 --- a/files/ja/glossary/css_selector/index.md +++ b/files/ja/glossary/css_selector/index.md @@ -75,8 +75,8 @@ div.warning { - 結合子 - - [隣接兄弟セレクター](/ja/docs/Web/CSS/Adjacent_sibling_combinator) `A + B` - - [一般兄弟セレクター](/ja/docs/Web/CSS/General_sibling_combinator) `A ~ B` + - [次兄弟結合子](/ja/docs/Web/CSS/Next-sibling_combinator) `A + B` + - [後続兄弟結合子](/ja/docs/Web/CSS/Subsequent-sibling_combinator) `A ~ B` - [子セレクター](/ja/docs/Web/CSS/Child_combinator) `A > B` - [子孫セレクター](/ja/docs/Web/CSS/Descendant_combinator) `A B` diff --git a/files/ja/learn/css/building_blocks/selectors/combinators/index.md b/files/ja/learn/css/building_blocks/selectors/combinators/index.md index 7adaf613eca33f..d76b18c81b0e33 100644 --- a/files/ja/learn/css/building_blocks/selectors/combinators/index.md +++ b/files/ja/learn/css/building_blocks/selectors/combinators/index.md @@ -39,9 +39,9 @@ article > p {{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}} -## 隣接する兄弟 +## 次兄弟結合子 -隣接する兄弟セレクター（ `+` ）は、階層の同じレベルにある別の要素のすぐ隣にある場合に選択します。例えば、`

` 要素の直後に来るすべての `` 要素を選択するには： +**次兄弟結合子** (next-sibling selector, `+`) は 2 つの CSS セレクターの間に配置されます。2つ目のセレクターに一致する要素のうち、最初のセレクターの次の兄弟要素で あるものだけに一致します。例えば、`

` 要素の直後に来るすべての `` 要素を選択するためには、次のようにします。 ```css p + img diff --git a/files/ja/learn/css/building_blocks/selectors/index.md b/files/ja/learn/css/building_blocks/selectors/index.md index 592b589566e9a6..b943e8f7b98b4e 100644 --- a/files/ja/learn/css/building_blocks/selectors/index.md +++ b/files/ja/learn/css/building_blocks/selectors/index.md @@ -171,5 +171,5 @@ article > p { | [疑似要素セレクター](/ja/docs/Web/CSS/Pseudo-elements) | `p::first-line { }` | [疑似要素](/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#What_is_a_pseudo-element) | | [子孫結合子](/ja/docs/Web/CSS/Descendant_combinator) | `article p` | [子孫結合子](/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Descendant_Selector) | | [子結合子](/ja/docs/Web/CSS/Child_combinator) | `article > p` | [子結合子](/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Child_combinator) | -| [隣接兄弟結合子](/ja/docs/Web/CSS/Adjacent_sibling_combinator) | `h1 + p` | [隣接兄弟](/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Adjacent_sibling) | -| [一般兄弟結合子](/ja/docs/Web/CSS/General_sibling_combinator) | `h1 ~ p` | [一般兄弟](/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators#General_sibling) | +| [次兄弟結合子](/ja/docs/Web/CSS/Next-sibling_combinator) | `h1 + p` | [隣接兄弟](/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Adjacent_sibling) | +| [後続兄弟結合子](/ja/docs/Web/CSS/Subsequent-sibling_combinator) | `h1 ~ p` | [一般兄弟](/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators#General_sibling) | diff --git a/files/ja/learn/css/howto/highlight_para_after_h1/index.md b/files/ja/learn/css/howto/highlight_para_after_h1/index.md index fe898cc1bbd10b..c04e3d443c3c8f 100644 --- a/files/ja/learn/css/howto/highlight_para_after_h1/index.md +++ b/files/ja/learn/css/howto/highlight_para_after_h1/index.md @@ -13,9 +13,9 @@ l10n: よくあるパターンは、記事の最初の段落と、その後に続く段落を異なる形でスタイル設定することです。通常、この最初の段落は見出しの直後に来るので、もしこのようなデザインにするならば、その段落を対象とするためにその要素の組み合わせを使用することができます。 -## 隣接兄弟結合子 +## 次兄弟結合子 -CSS の [CSS セレクター](/ja/docs/Web/CSS/CSS_selectors) のグループには、複数のセレクターを組み合わせて選択することから**結合子**と呼ばれるものが存在します。この例では、[隣接兄弟結合子](/ja/docs/Web/CSS/Adjacent_sibling_combinator)を使用することにします。この結合子は、ある要素が他の要素の隣にあることを基準に選択します。HTML は {{htmlelement("Heading_Elements", "h1")}} の後に {{htmlelement("p")}} が続いています。`

` は `

` の隣接する兄弟要素なので、`h1 + p` で選択することができます。 +CSS の [CSS セレクター](/ja/docs/Web/CSS/CSS_selectors) のグループには、複数のセレクターを組み合わせて選択することから**結合子**と呼ばれるものが存在します。この例では、[次兄弟結合子](/ja/docs/Web/CSS/Next-sibling_combinator)を使用することにします。この結合子は、ある要素が他の要素の隣にあることを基準に選択します。HTML は {{htmlelement("Heading_Elements", "h1")}} の後に {{htmlelement("p")}} が続いています。`

` は `

` の隣接する兄弟要素なので、`h1 + p` で選択することができます。 {{EmbedGHLiveSample("css-examples/howto/highlight_h1_plus_para.html", '100%', 800)}} diff --git a/files/ja/learn/forms/ui_pseudo-classes/index.md b/files/ja/learn/forms/ui_pseudo-classes/index.md index 53953a5976bfff..8c0d8b2cf33dbf 100644 --- a/files/ja/learn/forms/ui_pseudo-classes/index.md +++ b/files/ja/learn/forms/ui_pseudo-classes/index.md @@ -556,7 +556,7 @@ input:default ~ span::after { } ``` -これは、ページが読み込まれたときに最初に選択されたものの上に、小さな "Default" ラベルを提供しています。ここでは、隣接兄弟結合子 (`+`) ではなく、一般兄弟結合子 (`~`) を使用していることに注意してください。 `` がソース順では `` のすぐ後に来ないので、このようにする必要があるのです。 +これは、ページが読み込まれたときに最初に選択されたものの上に、小さな "Default" ラベルを提供しています。ここでは、次兄弟結合子 (`+`) ではなく、後続兄弟結合子 (`~`) を使用していることに注意してください。 `` がソース順では `` のすぐ後に来ないので、このようにする必要があるのです。 以下のライブ結果を見てください。 diff --git a/files/ja/web/css/_colon_nth-last-child/index.md b/files/ja/web/css/_colon_nth-last-child/index.md index 88255752c47814..19a48ce53a3dd8 100644 --- a/files/ja/web/css/_colon_nth-last-child/index.md +++ b/files/ja/web/css/_colon_nth-last-child/index.md @@ -113,7 +113,7 @@ tr:nth-last-child(2) { ### 数量クエリー -*数量クエリー*は、要素が存在する数に応じてスタイル付けします。この例では、リストの中に項目が3つ以上ある場合にリスト項目が赤に変わります。これは `nth-last-child` 擬似クラスと [一般兄弟結合子](/ja/docs/Web/CSS/General_sibling_combinator)の機能を組み合わせることで実現できます。 +*数量クエリー*は、要素が存在する数に応じてスタイル付けします。この例では、リストの中に項目が3つ以上ある場合にリスト項目が赤に変わります。これは `nth-last-child` 擬似クラスと [後続兄弟結合子](/ja/docs/Web/CSS/Subsequent-sibling_combinator)の機能を組み合わせることで実現できます。 #### HTML diff --git a/files/ja/web/css/css_selectors/index.md b/files/ja/web/css/css_selectors/index.md index 5df97799346b13..ad6126c5c8356c 100644 --- a/files/ja/web/css/css_selectors/index.md +++ b/files/ja/web/css/css_selectors/index.md @@ -61,13 +61,13 @@ slug: Web/CSS/CSS_selectors **構文:** `A > B` **例:** `ul > li` は {{HTMLElement("ul")}} 要素の内側に直接ネストされた {{HTMLElement("li")}} 要素をすべて選択します。 -- [一般兄弟結合子](/ja/docs/Web/CSS/General_sibling_combinator) +- [後続兄弟結合子](/ja/docs/Web/CSS/Subsequent-sibling_combinator) - : `~` 結合子は兄弟を選択します。つまり、第2の要素が第1の要素の後にあり（ただし直後でなくても構わない）、両者が同じ親を持つ場合です。 **構文:** `A ~ B` **例:** `p ~ span` は {{HTMLElement("p")}} 要素の後にある {{HTMLElement("span")}} 要素をすべて選択します。 -- [隣接兄弟結合子](/ja/docs/Web/CSS/Adjacent_sibling_combinator) +- [次兄弟結合子](/ja/docs/Web/CSS/Next-sibling_combinator) - : `+` 結合子は隣接する兄弟を選択します。つまり、第2の要素が第1の要素の直後にあり、両者が同じ親を持つ場合です。 **構文:** `A + B` diff --git a/files/ja/web/css/privacy_and_the__colon_visited_selector/index.md b/files/ja/web/css/privacy_and_the__colon_visited_selector/index.md index 668af74854c099..b5666bd352e069 100644 --- a/files/ja/web/css/privacy_and_the__colon_visited_selector/index.md +++ b/files/ja/web/css/privacy_and_the__colon_visited_selector/index.md @@ -16,7 +16,7 @@ l10n: ユーザーのプライバシーを保護するために、Firefox や他のブラウザーは特定の状況下でウェブアプリケーションに嘘をつきます。 - `window.getComputedStyle` メソッドや、 {{ domxref("element.querySelector") }} などの類似の関数は、ユーザーがページ上のリンクを訪れたことがないことを示す値を常に返します。 -- `:visited + span` のような兄弟セレクターを使用した場合、隣接する要素（この例では `span`）は、リンクが未訪問であるかのようにスタイル付けされます。 +- `:visited + span` のような兄弟結合子を使用した場合、隣接する要素（この例では `span`）は、リンクが未訪問であるかのようにスタイル付けされます。 - 稀なケースですが、入れ子になったリンク要素を使用していて、一致している要素が履歴の中の存在がテストされているリンクとは異なる場合、要素はリンクが未訪問であるかのようにレンダリングされます。 ## 訪問済みリンクスタイルの制限 diff --git a/files/ja/web/css/reference/index.md b/files/ja/web/css/reference/index.md index aaf0c8e0f5909a..7151f4afdd90d5 100644 --- a/files/ja/web/css/reference/index.md +++ b/files/ja/web/css/reference/index.md @@ -80,9 +80,9 @@ div.menu-bar li:hover > ul { 結合子 (Combinator) は 2 つ以上の単純セレクターの関係、例えば「`A` は `B` の子である」や「`A` は `B` の子孫である」などを確立し、複合セレクターを作成するためのセレクターです。 -- [隣接兄弟結合子](/ja/docs/Web/CSS/Adjacent_sibling_combinator) `A + B` +- [次兄弟結合子](/ja/docs/Web/CSS/Next-sibling_combinator) `A + B` - : `A` と `B` のそれぞれで選択された要素が同じ親を持ち、かつ `B` で選択された要素が `A` で選択された要素の水平的な直後にあることを指定します。 -- [一般兄弟結合子](/ja/docs/Web/CSS/General_sibling_combinator) `A ~ B` +- [後続兄弟結合子](/ja/docs/Web/CSS/Subsequent-sibling_combinator) `A ~ B` - : `A` と `B` のそれぞれで選択された要素が同じ親を共有しており、かつ `A` で選択された要素が `B` の前に — ただし直前である必要はありませんが — 来た場合を指定します。 - [子結合子](/ja/docs/Web/CSS/Child_combinator) `A > B` - : `B` で選択された要素のうち、 `A` で選択された要素の直接の子であるものを指定します。 diff --git a/files/ja/web/css/text-indent/index.md b/files/ja/web/css/text-indent/index.md index 3a6c0c8a4b735c..d64c030ac03015 100644 --- a/files/ja/web/css/text-indent/index.md +++ b/files/ja/web/css/text-indent/index.md @@ -87,7 +87,7 @@ p { 段落の字下げがある場合の一般的な組版では、最初の段落の字下げを省略します。_The Chicago Manual of Style_ によると、「中間見出しに続くテキストの最初の行は、完全に左端から始めてもよいし、通常の段落の字下げで字下げしてもよい」とされています。 -最初の段落とそれ以降の段落を別扱いにするには、次の例のように[隣接兄弟結合子](/ja/docs/Web/CSS/Adjacent_sibling_combinator)を使います。 +最初の段落とそれ以降の段落を別扱いにするには、次の例のように[次兄弟結合子](/ja/docs/Web/CSS/Next-sibling_combinator)を使います。 #### HTML From 4e6c81834a371a69d5f433a24935467355f9d31b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 23 Oct 2023 23:25:08 +0900 Subject: [PATCH 05/91] =?UTF-8?q?2023/09/03=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../css_selectors/selector_structure/index.md | 104 ++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 files/ja/web/css/css_selectors/selector_structure/index.md diff --git a/files/ja/web/css/css_selectors/selector_structure/index.md b/files/ja/web/css/css_selectors/selector_structure/index.md new file mode 100644 index 00000000000000..767c8fd82d71cd --- /dev/null +++ b/files/ja/web/css/css_selectors/selector_structure/index.md @@ -0,0 +1,104 @@ +--- +title: CSS セレクターの構造 +slug: Web/CSS/CSS_selectors/Selector_structure +l10n: + sourceCommit: b117f457496644b248668463b12d0e0351478093 +--- + +{{CSSRef("Selectors")}} + +CSS セレクターは、ツリー構造内の要素または要素の特定のパターンを表します。「セレクター」という用語は、[単純セレクター](#単純セレクター)、[複合セレクター](#複合セレクター)、[複雑セレクター](#複雑セレクター)を参照することができます。has()`擬似クラスに引数として記載する場合、これらのセレクターは[相対セレクター](#relative_selector)と呼ばれ、1つ以上のアンカー要素からの相対的な要素を表します。 + +これらのセレクターはカンマ区切りの[セレクターリスト](#selector_list)で結合することができます。[非寛容セレクター](/ja/docs/Web/CSS/Selector_list#valid_and_invalid_selector_lists)リストに含まれるセレクターが無効な場合、セレクターリスト全体が無効になります。 + +### 単純セレクター + +**単純セレクター**とは、単一の型セレクター、属性セレクター、擬似クラスなどの単一の成分を持つセレクターのことで、他のセレクター成分や結合子と組み合わせたり含んだりすることがないものです。指定された要素が単純セレクターに一致すると言うのは、その単純セレクターが要素を正確に説明している場合です。単一の[基本セレクター](/ja/docs/Web/CSS/CSS_selectors/Selectors_and_combinators#基本セレクター)、[属性セレクター](/ja/docs/Web/CSS/Attribute_selectors)、[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)、[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を含むセレクターは単純セレクターです。 + +```css +#myId { +} + +[pattern*="\d"] { +} +``` + +### 複合セレクター + +**複合セレクター**は、[結合子](/ja/docs/Web/CSS/CSS_selectors/Selectors_and_combinators#結合子)で区切られていない一連の[単純セレクター](#単純セレクター)です。複合セレクターは、単一の要素に対する同時条件の集合を表します。指定された要素が複合セレクターに一致するというのは、その要素が複合セレクターに含まれるすべての単純セレクターに一致するときです。 + +```css +a#selected { +} + +[type="checkbox"]:checked:focus { +} +``` + +複合セレクターでは、[型セレクター](/ja/docs/Web/CSS/Type_selectors) または[全称セレクター](/ja/docs/Web/CSS/Universal_selectors)がセレクターの並びの先頭に来なければなりません。型セレクターまたは全称セレクターを入力することができるのは 1 つだけです。ホワイトスペースは[子孫結合子](/ja/docs/Web/CSS/Descendant_combinator)を表しますので、複合セレクターを構成する単純セレクターの間にホワイトスペースを入れてはいけません。 + +### 複雑セレクター + +**複雑セレクター**は、ホワイトスペースの[子孫結合子](/ja/docs/Web/CSS/Descendant_combinator)を含む、結合子で区切られた 1 つ以上の単純セレクターや複合セレクターの並びです。 + +複雑セレクターは、一連の要素に対する一連の同時条件を表します。 + +```css +a#selected > .icon { +} + +.box h2 + p { +} +``` + +セレクターは右から左に読むことができます。例えば、`a#selected > .icon` は `selected` という id を持つ `` 要素の直接の子要素で、クラスが `icon` であるすべての要素に一致します。セレクター `.box h2 + p` は `box` クラスを持つ要素の子孫である `

` 要素の直後に来る最初の `

` に一致します。 + +### 相対セレクター + +**相対セレクター**は、結合子で始まる 1 つ以上のアンカー要素からの相対的な要素を表すセレクターです。明示的な結合子で始まらない相対セレクターは、暗黙の[子孫結合子](/ja/docs/Web/CSS/Descendant_combinator)を持ちます。 + +```css ++ div#topic > #reference { +} + +> .icon { +} + +dt:has(+ img) ~ dd { +} +``` + +### セレクターリスト + +[**セレクターリスト**](/ja/docs/Web/CSS/Selector_list)は、単純、複合、複雑セレクターのカンマ区切りのリストです。指定された要素がセレクターリストに一致するとき、その要素はセレクターリストに一致すると言われます。 + +```css +#main, +article.heading { +} +``` + +[非寛容セレクター](/ja/docs/Web/CSS/Selector_list#セレクターリストの有効、無効について)リストのセレクターが無効な場合、セレクターリスト全体が無効になります。 + +```css +#main, +:bad-pseudoclass, +.validClass { + /* `:bad-pseudoclass` は無効なので、このスタイルブロックは無効になりました */ +} +``` + +{{cssxref(":is", ":is()")}} と {{cssxref(":where", ":where()")}} 擬似クラスは、[寛容なセレクターリスト](/ja/docs/Web/CSS/Selector_list#寛容なセレクターリスト)を構築するために使用することができます。 + +## 仕様書 + +{{Specifications}} + +## 関連情報 + +- [CSS セレクターと結合子](/ja/docs/Web/CSS/CSS_selectors/Selectors_and_combinators) +- [寛容なセレクターリスト](/ja/docs/Web/CSS/Selector_list#寛容なセレクターリスト) +- {{DOMXref("Document.querySelector()")}} +- {{DOMXref("Document.querySelectorAll()")}} +- [CSS セレクター](/ja/docs/Web/CSS/CSS_selectors)モジュール +- [CSS 擬似要素](/ja/docs/Web/CSS/CSS_pseudo-elements)モジュール From bc4baa558b559d5b9a48ff1f6e35640bd1e8b107 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 24 Oct 2023 23:13:35 +0900 Subject: [PATCH 06/91] =?UTF-8?q?2023/08/10=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=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/css/css_pseudo-elements/index.md | 111 ++++++++++++++++++ 1 file changed, 111 insertions(+) create mode 100644 files/ja/web/css/css_pseudo-elements/index.md diff --git a/files/ja/web/css/css_pseudo-elements/index.md b/files/ja/web/css/css_pseudo-elements/index.md new file mode 100644 index 00000000000000..2ffb120439a98d --- /dev/null +++ b/files/ja/web/css/css_pseudo-elements/index.md @@ -0,0 +1,111 @@ +--- +title: CSS 擬似要素 +slug: Web/CSS/CSS_pseudo-elements +l10n: + sourceCommit: cebbd9095ac12557c55157355181672027fffc14 +--- + +{{CSSRef}} + +**CSS 擬似要素**モジュールは、文書ツリー内には直接存在しない抽象要素を定義します。擬似要素と呼ばれるこれらの抽象要素は、レンダーツリーの一部を表し、選択したりスタイル設定したりすることができます。擬似要素は、文書ツリーによって指定された以上の文書ツリーに関する抽象化をするために使用します。 + +擬似要素の接頭辞はダブルコロン (`::`) です。擬似要素をセレクターに追加すると（`p::first-line`　など）、擬似要素を対象としてスタイル設定することができます。 + +擬似要素は、 HTML に含まれないものや 余分なマークアップを追加することなく他の方法では対象とすることができないコンテンツの一部を対象とすることができます。 {{HTMLelement("input")}} 要素のプレースホルダーについて考えてみましょう。これは抽象要素であり、文書ツリー内の明確なノードではありません。このプレースホルダーを選択するには {{CSSXref("::placeholder")}} 擬似要素を用います。別の例として、 {{CSSXref("::selection")}} 擬似要素は、ユーザーが現在選択しているコンテンツに一致し、ユーザーがコンテンツを操作して選択を変更したときに一致するものをスタイル設定することができます。同様に、 {{CSSXref("::first-line")}} 擬似要素は、要素の最初の行を対象とし、要素の行の長さを問い合わせることなく、最初の行の文字数が変われば自動的に更新されます。 + +## リファレンス + +### セレクター + +- {{CSSXref("::after")}} +- {{CSSXref("::before")}} +- {{CSSXref("::file-selector-button")}} +- {{CSSXref("::first-letter")}} +- {{CSSXref("::first-line")}} +- {{CSSXref("::grammar-error")}} +- {{CSSXref("::marker")}} +- {{CSSXref("::placeholder")}} +- {{CSSXref("::selection")}} +- {{CSSXref("::spelling-error")}} +- {{CSSXref("::target-text")}} + +### インターフェイス + +- {{DOMxRef("CSSPseudoElement")}} インターフェイス + - {{DOMxRef("CSSPseudoElement.element")}} プロパティ + - {{DOMxRef("CSSPseudoElement.type")}} プロパティ + +### 用語 + +- 用語集の{{Glossary("Pseudo-element", "擬似要素")}} + +## ガイド + +- [CSS 擬似要素](/ja/docs/Web/CSS/Pseudo-elements) + + - : すべての CSS 仕様と WebVTT で定義されている擬似要素のアルファベット順リスト。 + +- [構成要素: 擬似クラスと擬似要素](/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + + - : セレクターに関する CSS 構成要素の節の一部です。この記事では、擬似要素とは何か、擬似クラスとどのように組み合わせ、 `::before` および `::after` 擬似要素でコンテンツを生成するために使用できるかを定義します。 + +- [擬似要素を使用した装飾的なボックスの作成](/ja/docs/Learn/CSS/Howto/Create_fancy_boxes#pseudo-elements) + + - : 視覚効果のために `::before` と `::after` 擬似要素を使用して生成コンテンツをスタイル設定する例です。 + +## 関連する概念 + +- {{cssxref("::backdrop")}} + +- Web Video Text Tracks Format (WebVTT) キュー: + + - {{cssxref("::cue")}} + - {{cssxref("::cue", "::cue()")}} + - {{cssxref("::cue-region")}} + +- [CSS スコープ化](/ja/docs/Web/CSS/CSS_scoping)モジュール + + - {{CSSXref(":host")}} + - {{CSSXref(":host_function", ":host()")}} + - {{CSSXref(":host-context", ":host-context()")}} + - {{CSSXref("::slotted", "::slotted()")}} + +- [CSS シャドウ部品](/ja/docs/Web/CSS/CSS_shadow_parts)モジュール + + - {{CSSXref("::part")}} + +- [CSS セレクター](/ja/docs/Web/CSS/CSS_selectors) + + - [属性セレクター](/ja/docs/Web/CSS/Attribute_selectors) + - [結合子](/ja/docs/Web/CSS/CSS_selectors/Selectors_and_combinators#結合子) + - [クラスセレクター](/ja/docs/Web/CSS/Class_selectors) + - [ID セレクター](/ja/docs/Web/CSS/ID_selectors) + - [型セレクター](/ja/docs/Web/CSS/Type_selectors) + - [擬似クラス](/ja/docs/Web/CSS/Pseudo-classes) + - [全称セレクター](/ja/docs/Web/CSS/Universal_selectors) + +- [`placeholder`](/ja/docs/Web/HTML/Element/input#placeholder) 属性（`` 要素） +- [`:placeholder-shown`](/ja/docs/Web/CSS/:placeholder-shown) セレクター + +- [CSS 生成コンテンツ](/ja/docs/Web/CSS/CSS_generated_content) + + - {{cssxref("content")}} プロパティ + - {{cssxref("quotes")}} プロパティ + +- [テキストフラグメント](/ja/docs/Web/Text_fragments) + +- {{DOMXref("AnimationEvent.pseudoElement")}} プロパティ +- {{DOMXref("KeyframeEffect.pseudoElement")}} プロパティ +- {{DOMXref("TransitionEvent.pseudoElement")}} プロパティ + +## 仕様書 + +{{Specifications}} + +## 関連情報 + +- [詳細度](/ja/docs/Web/CSS/Specificity) +- [CSS セレクター](/ja/docs/Web/CSS/CSS_selectors)モジュール +- [CSS シャドウ部品](/ja/docs/Web/CSS/CSS_shadow_parts)モジュール +- [CSS 生成コンテンツ](/ja/docs/Web/CSS/CSS_generated_content)モジュール +- [CSS 位置指定レイアウト](/ja/docs/Web/CSS/CSS_positioned_layout)モジュール From 05916d22a9715985d8040bb8e23e2630121e1088 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 25 Oct 2023 00:00:50 +0900 Subject: [PATCH 07/91] =?UTF-8?q?2023/06/14=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/pseudo-classes/index.md | 174 ++++++++++++++--------- 1 file changed, 103 insertions(+), 71 deletions(-) diff --git a/files/ja/web/css/pseudo-classes/index.md b/files/ja/web/css/pseudo-classes/index.md index e796b4c98998b4..696df0d034da35 100644 --- a/files/ja/web/css/pseudo-classes/index.md +++ b/files/ja/web/css/pseudo-classes/index.md @@ -1,85 +1,37 @@ --- title: 擬似クラス slug: Web/CSS/Pseudo-classes +l10n: + sourceCommit: ff07c2fc3bee874e6f1e7398c42cfa702d520009 --- {{CSSRef}} -[CSS](/ja/docs/Web/CSS) の**擬似クラス** (_pseudo-classes_) は、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。例えば {{CSSxRef(":hover")}} 擬似クラスで、ユーザーのポインターが当たったときにボタンの色を変更することができます。 +[CSS](/ja/docs/Web/CSS) の**擬似クラス** (_pseudo-classes_) は、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。例えば、擬似クラス {{CSSxRef(":hover")}} を使用すると、ユーザーのポインターがボタンの上に乗ったときにボタンを選択し、この選択されたボタンをスタイル設定することができます。 ```css -/* ユーザーのポインターが当たっているすべてのボタン */ +/* ユーザーのポインターが乗っているすべてのボタン */ button:hover { color: blue; } ``` -擬似クラスにより、文書ツリーのコンテンツに関するものだけでなく、閲覧履歴 (例えば {{CSSxRef(":visited")}})、内容物の状態 (例えばフォーム要素における {{CSSxRef(":checked")}})、マウスポインターの位置 (例えばマウスポインターが要素上にあるかを知ることができる {{CSSxRef(":hover")}}) といった外的要因との関係についてスタイルを適用することができるようになります。 +擬似クラスはコロン (`:`) の後に擬似クラス名が続きます（例えば `:hover`）。関数形式の擬似クラスは、引数を定義するために括弧のペアも持ちます（例えば `:dir()`）。擬似クラスが装着されている要素（例えば `button:hover` の場合は `button`）はアンカー要素として定義されます。 -> **メモ:** 擬似クラスとは対照的に、[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)は要素の*特定の部分*にスタイルを適用するために使います。 - -## 言語擬似クラス - -これらの擬似クラスは、文書の言語を反映し、言語や書字方向に基づいた要素を選択できるようにします。 - -- {{CSSxRef(":dir")}} - - : 方向性擬似クラスは、文書の言語によって決定される書字方向に基づいて要素を選択します。 -- {{CSSxRef(":lang")}} - - : 内容物の言語に基づいて要素を選択します。 - -## 位置擬似クラス - -これらの擬似クラスは、リンクと、現在の文書内の対象となる要素に関連しています。 - -- {{CSSxRef(":any-link")}} - - : 要素が {{CSSxRef(":link")}} または {{CSSxRef(":visited")}} のいずれかに一致する場合に一致します。 -- {{CSSxRef(":link")}} - - : まだ訪問していないリンクに一致します。 -- {{CSSxRef(":visited")}} - - : 訪問したことのあるリンクに一致します。 -- {{CSSxRef(":local-link")}} - - : 絶対 URL が対象 URL と同じリンク、例えば同じページへのアンカーリンクである場合に一致します。 -- {{CSSxRef(":target")}} - - : 文書の URL の対象である要素に一致します。 -- {{CSSxRef(":target-within")}} - - : 文書の URL の対象である要素だけでなく、文書 URL の対象である子孫を持つ要素にも一致します。 -- {{CSSxRef(":scope")}} - - : セレクターを照合するための参照点となる要素を表します。 - -## ユーザー操作擬似クラス +擬似クラスにより、文書ツリーのコンテンツに関するものだけでなく、閲覧履歴（例えば {{CSSxRef(":visited")}}）、内容物の状態（例えばフォーム要素における {{CSSxRef(":checked")}}）、マウスポインターの位置（例えばマウスポインターが要素上にあるかを知ることができる {{CSSxRef(":hover")}}）といった外的要因との関係についてスタイルを適用することができるようになります。 -これらの擬似クラスは、マウスポインターを要素にかざすなど、ユーザーによる何らかの操作を必要とするものです。 - -- {{CSSxRef(":hover")}} - - : ユーザーがポインティングデバイスでアイテムを指した場合（例えば、マウスポインターをその項目にかざした場合）に一致します。 -- {{CSSxRef(":active")}} - - : アイテムがクリックされるなど、ユーザーによってアクティブになっているときに一致します。 -- {{CSSxRef(":focus")}} - - : 要素にフォーカスがあるときに一致します。 -- {{CSSxRef(":focus-visible")}} - - : 要素にフォーカスがあり、ユーザーエージェントがその要素のフォーカスを可視化する必要があると判断した場合に一致します。 -- {{CSSxRef(":focus-within")}} - - : {{CSSxRef(":focus")}} が適用される要素に加え、 {{CSSxRef(":focus")}} が適用される子孫要素を持つ要素にも一致します。 - -## 時間軸擬似クラス - -これらの擬似クラスは、 [WebVTT](/ja/docs/Web/API/WebVTT_API) キャプショントラックのようなタイミングを持つものを閲覧する際に適用されるものです。 - -- {{CSSxRef(":current")}} - - : 表示されている要素またはその祖先を表します。 -- {{CSSxRef(":past")}} - - : 完全に {{CSSxRef(":current")}} 要素の前に発生する要素を表します。 -- {{CSSxRef(":future")}} - - : 完全に {{CSSxRef(":current")}} 要素の後に発生する要素を表します。 +> **メモ:** 擬似クラスとは対照的に、[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)は要素の*特定の部分*にスタイルを適用するために使います。 -## リソース状態擬似クラス +## 表示状態擬似クラス -これらの擬似クラスは、動画など再生と表現できる状態にあるメディアに適用されます。 +これらの擬似クラスにより、表示状態に基づいて要素を選択することができます。 -- {{CSSxRef(":playing")}} - - : その要素が再生可能なメディア要素であり、再生中であることを表します。 -- {{CSSxRef(":paused")}} - - : その要素が再生可能なメディア要素であり、一時停止中であることを表します。 +- {{CSSxRef(":fullscreen")}} + - : 現在全画面モードの要素に一致します。 +- {{CSSxRef(":modal")}} + - : 操作が終了するまで、その外の要素への操作をすべて排除する状態にある要素に一致します。 +- {{CSSxRef(":picture-in-picture")}} + - : 現在ピクチャインピクチャモードの要素に一致します。 ## 入力擬似クラス @@ -96,7 +48,7 @@ button:hover { - {{CSSxRef(":read-write")}} - : ユーザーが編集することができる要素を表します。 - {{CSSxRef(":placeholder-shown")}} - - : プレイスホルダーテキスト、例えば HTML5 の `placeholder` 属性のものが表示されている入力要素に一致します。 + - : プレイスホルダーテキスト、例えば `placeholder` 属性のものが表示されている{{htmlelement("input")}} および {{htmlelement("textarea")}} 要素に一致します。 - {{CSSxRef(":default")}} - : 一連の要素のうち、1 つ以上の既定の UI 要素に一致します。 - {{CSSxRef(":checked")}} @@ -106,7 +58,7 @@ button:hover { - {{CSSxRef(":blank")}} - : ユーザーが入力する要素が空である場合に一致します。空文字列が入っているか、その他の空入力であることを表します。 - {{CSSxRef(":valid")}} - - : 内容が妥当である要素に一致します。例えば、 'email' 型の入力要素に正しい形式のメールアドレスが入力されている場合です。 + - : 内容が妥当である要素に一致します。例えば、 'email' 型の入力要素で、有効なフォームのメールアドレスを格納したもの、またはコントロールが必須ではない場合は空の値を格納したものです。 - {{CSSxRef(":invalid")}} - : 無効な内容を持つ要素に一致します。例えば、'email' 型の入力要素に名前が入力されている場合です。 - {{CSSxRef(":in-range")}} @@ -120,6 +72,54 @@ button:hover { - {{CSSxRef(":user-invalid")}} - : 不正確な値が入力されている要素を表します。ただし、ユーザーがその要素を操作した場合のみです。 +## 言語擬似クラス + +これらの擬似クラスは、文書の言語を反映し、言語や書字方向に基づいた要素を選択できるようにします。 + +- {{CSSxRef(":dir", ":dir()")}} + - : 書字方向擬似クラスは、文書の言語によって決定される書字方向に基づいて要素を選択します。 +- {{CSSxRef(":lang", ":lang()")}} + - : 内容物の言語に基づいて要素を選択します。 + +## 位置擬似クラス + +これらの擬似クラスは、リンクと、現在の文書内の対象となる要素に関連しています。 + +- {{CSSxRef(":any-link")}} + - : 要素が {{CSSxRef(":link")}} または {{CSSxRef(":visited")}} のいずれかに一致する場合に一致します。 +- {{CSSxRef(":link")}} + - : まだ訪問していないリンクに一致します。 +- {{CSSxRef(":visited")}} + - : 訪問したことのあるリンクに一致します。 +- {{CSSxRef(":local-link")}} + - : 絶対 URL が対象 URL と同じリンク、例えば同じページへのアンカーリンクである場合に一致します。 +- {{CSSxRef(":target")}} + - : 文書の URL の対象である要素に一致します。 +- {{CSSxRef(":target-within")}} + - : 文書の URL の対象である要素だけでなく、文書 URL の対象である子孫を持つ要素にも一致します。 +- {{CSSxRef(":scope")}} + - : セレクターを照合するための参照点となる要素を表します。 + +## リソース状態擬似クラス + +これらの擬似クラスは、動画など再生と表現できる状態にあるメディアに適用されます。 + +- {{CSSxRef(":playing")}} + - : その要素が再生可能なメディア要素であり、再生中であることを表します。 +- {{CSSxRef(":paused")}} + - : その要素が再生可能なメディア要素であり、一時停止中であることを表します。 + +## 時間軸擬似クラス + +これらの擬似クラスは、 [WebVTT](/ja/docs/Web/API/WebVTT_API) キャプショントラックのようなタイミングを持つものを閲覧する際に適用されるものです。 + +- {{CSSxRef(":current")}} + - : 表示されている要素またはその祖先を表します。 +- {{CSSxRef(":past")}} + - : 完全に {{CSSxRef(":current")}} 要素の前に発生する要素を表します。 +- {{CSSxRef(":future")}} + - : 完全に {{CSSxRef(":current")}} 要素の後に発生する要素を表します。 + ## ツリー構造擬似クラス これらの擬似クラスは、文書ツリー内の要素の位置に関するものです。 @@ -129,9 +129,9 @@ button:hover { - {{CSSxRef(":empty")}} - : ホワイトスペース文字以外に子がない要素を表します。 - {{CSSxRef(":nth-child")}} - - : A*n*+B の表記を用いて、兄弟要素のリストから要素を選択します。 + - : `An+B` の表記を用いて、兄弟要素のリストから要素を選択します。 - {{CSSxRef(":nth-last-child")}} - - : A*n*+B の表記を用いて、兄弟要素のリストから、リストの末尾から逆方向に数えて要素を選択します。 + - : `An+B` の表記を用いて、兄弟要素のリストから、リストの末尾から逆方向に数えて要素を選択します。 - {{CSSxRef(":first-child")}} - : 兄弟のうちの最初の要素に一致します。 - {{CSSxRef(":last-child")}} @@ -139,9 +139,9 @@ button:hover { - {{CSSxRef(":only-child")}} - : 要素に兄弟がいない場合に一致します。例えば、リスト内に他のリスト項目が存在しないリスト項目が該当します。 - {{CSSxRef(":nth-of-type")}} - - : A*n*+B の表記を用いて、兄弟要素のリストから、特定の型に一致する要素を選択します。 + - : `An+B` の表記を用いて、兄弟要素のリストから、特定の型に一致する要素を選択します。 - {{CSSxRef(":nth-last-of-type")}} - - : A*n*+B の表記を用いて、兄弟要素のリストから、リストの末尾から逆方向に数えて特定の型に一致する要素を選択します。 + - : `An+B` の表記を用いて、兄弟要素のリストから、リストの末尾から逆方向に数えて特定の型に一致する要素を選択します。 - {{CSSxRef(":first-of-type")}} - : 兄弟のうちの最初の特定の型に一致する要素に一致します。 - {{CSSxRef(":last-of-type")}} @@ -149,6 +149,34 @@ button:hover { - {{CSSxRef(":only-of-type")}} - : 指定された型セレクターで兄弟要素がない要素に一致します。 +## ユーザー操作擬似クラス + +これらの擬似クラスは、マウスポインターを要素にかざすなど、ユーザーによる何らかの操作を必要とするものです。 + +- {{CSSxRef(":hover")}} + - : ユーザーがポインティングデバイスでアイテムを指した場合（例えば、マウスポインターをその項目にかざした場合）に一致します。 +- {{CSSxRef(":active")}} + - : アイテムがクリックされるなど、ユーザーによってアクティブになっているときに一致します。 +- {{CSSxRef(":focus")}} + - : 要素にフォーカスがあるときに一致します。 +- {{CSSxRef(":focus-visible")}} + - : 要素にフォーカスがあり、ユーザーエージェントがその要素のフォーカスを可視化する必要があると判断した場合に一致します。 +- {{CSSxRef(":focus-within")}} + - : {{CSSxRef(":focus")}} が適用される要素に加え、 {{CSSxRef(":focus")}} が適用される子孫要素を持つ要素にも一致します。 + +## 関数擬似クラス + +[セレクターリスト](/ja/docs/Web/CSS/Selector_list#セレクターリスト)または[寛容なセレクターリスト](/ja/docs/Web/CSS/Selector_list#寛容なセレクターリスト)を引数として受け取る擬似クラスです。 + +- [`:is()`](/ja/docs/Web/CSS/:is) + - : matches-any 擬似クラスは、指定されたリストのセレクターのどれかに一致する要素に一致します。リストは寛容です。 +- [`:not()`](/ja/docs/Web/CSS/:not) + - : 否定 (matches-none) 擬似クラスは、引数で表されない要素を表します。 +- [`:where()`](/ja/docs/Web/CSS/:where) + - : 詳細度を調整する擬似クラスは、指定されたリストのセレクターのいずれかに一致する要素であれば、詳細度の重みを追加することなく照合します。リストは寛容です。 +- [`:has()`](/ja/docs/Web/CSS/:has) + - : 関係擬似クラスは、付属の要素に対してアンカーを付けたときに、相対セレクターのどれかが一致する場合に要素を表します。 + ## 構文 ```css @@ -205,8 +233,8 @@ H - {{CSSxRef(":has", ":has()")}} {{Experimental_Inline}} - {{CSSxRef(":host")}} -- {{CSSxRef(":host()")}} -- {{CSSxRef(":host-context()")}} {{Experimental_Inline}} +- {{CSSxRef(":host", ":host()")}} +- {{CSSxRef(":host-context", ":host-context()")}} {{Experimental_Inline}} - {{CSSxRef(":hover")}} I @@ -225,6 +253,10 @@ L - {{CSSxRef(":link")}} - {{CSSxRef(":local-link")}} {{Experimental_Inline}} +M + +- {{CSSxRef(":modal")}} + N - {{CSSxRef(":not", ":not()")}} From 405989015575f39a4fb586621d63e287be7fe759 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 25 Oct 2023 00:25:04 +0900 Subject: [PATCH 08/91] =?UTF-8?q?2023/02/19=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=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/csspseudoelement/index.md | 57 ++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 files/ja/web/api/csspseudoelement/index.md diff --git a/files/ja/web/api/csspseudoelement/index.md b/files/ja/web/api/csspseudoelement/index.md new file mode 100644 index 00000000000000..f61bf1fe11e3fb --- /dev/null +++ b/files/ja/web/api/csspseudoelement/index.md @@ -0,0 +1,57 @@ +--- +title: CSSPseudoElement +slug: Web/API/CSSPseudoElement +l10n: + sourceCommit: b280ea1234452ff553caa466bf532a66ba51db01 +--- + +{{APIRef}}{{SeeCompatTable}} + +**`CSSPseudoElement`** インターフェイスは、イベントの対象としたり{{DOMxRef('Web Animations API', 'ウェブアニメーション API', '', 'true')}} を使用してアニメーションさせたりする擬似要素を表します。このインターフェイスのインスタンスは {{DOMxRef('Element.pseudo()')}} を呼び出すことで取得できます。 + +{{InheritanceDiagram}} + +## インスタンスプロパティ + +- {{DOMxRef('CSSPseudoElement.element')}} {{Experimental_Inline}} {{ReadOnlyInline}} + - : 擬似要素の元／親要素 ({{DOMxRef('Element')}}) を返します。 +- {{DOMxRef('CSSPseudoElement.type')}} {{Experimental_Inline}} {{ReadOnlyInline}} + - : 擬似要素セレクターを文字列で返します。 + +## インスタンスプロパティ + +_`CSSPseudoElement` は {{DOMxRef('EventTarget')}} から派生しているため、以下のメソッドを継承しています。_ + +- {{domxref("EventTarget.addEventListener()")}} + - : 擬似要素に固有のイベント型のイベントハンドラーを登録します。 +- {{domxref("EventTarget.dispatchEvent()")}} + - : この擬似要素にイベントを配信します。 +- {{domxref("EventTarget.removeEventListener()")}} + - : 擬似要素からイベントリスナーを除去します。 + +## 例 + +### Element.pseudo を使用した基本的な例 + +擬似要素を用いると、ほとんどの現代のブラウザーは {{HTMLElement('q')}} 要素内のテキストに引用符を自動的に追加します。（古いブラウザーで引用符を追加するにはスタイルルールが必要な場合があります。）下記ノ例は、冒頭の引用符を表す `CSSPseudoElement` オブジェクトの基本的なプロパティを示しています。 + +```js +const element = document.querySelector("q"); +const cssPseudoElement = element.pseudo("::before"); +console.log(cssPseudoElement.element); // [object HTMLQuoteElement] を出力 +console.log(cssPseudoElement.type); // '::before' を出力 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{DOMxRef('Element.pseudo()')}} +- {{DOMxRef('Web Animations API', 'ウェブアニメーション API', '', 'true')}} +- {{DOMxRef('Element.animate()')}} From a28a76f7356938f4317d45b94815bf0423fd0a2e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 25 Oct 2023 00:29:26 +0900 Subject: [PATCH 09/91] =?UTF-8?q?2023/04/07=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=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 --- .../web/api/csspseudoelement/element/index.md | 44 +++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 files/ja/web/api/csspseudoelement/element/index.md diff --git a/files/ja/web/api/csspseudoelement/element/index.md b/files/ja/web/api/csspseudoelement/element/index.md new file mode 100644 index 00000000000000..42f72d476aea69 --- /dev/null +++ b/files/ja/web/api/csspseudoelement/element/index.md @@ -0,0 +1,44 @@ +--- +title: "CSSPseudoElement: element プロパティ" +short-title: element +slug: Web/API/CSSPseudoElement/element +l10n: + sourceCommit: d76defab4ca13261e9de81ae1df125345f847b0a +--- + +{{APIRef}}{{SeeCompatTable}} + +**`element`** は {{DOMxRef('CSSPseudoElement')}} インターフェイスの読み取り専用のプロパティで、擬似要素の元要素、言い換えれば親要素への参照を返します。 + +## 値 + +この擬似要素の元要素を表す {{DOMxRef('Element')}} です。 + +## 例 + +下記の例は、 `CSSPseudoElement.element` と {{DOMxRef('Element.pseudo()')}} の関係を示しています。 + +```js +const myElement = document.querySelector("q"); +const cssPseudoElement = myElement.pseudo("::after"); +const originatingElement = cssPseudoElement.element; + +console.log(myElement === originatingElement); // true を出力 +console.log(myElement.parentElement === originatingElement); // false を出力 +console.log(myElement.lastElementChild === cssPseudoElement); // false を出力 +console.log(myElement.lastChild === cssPseudoElement); // false を出力 +console.log(myElement.nextElementSibling === cssPseudoElement); // false を出力 +console.log(myElement.nextSibling === cssPseudoElement); // false を出力 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{DOMxRef('Element.pseudo()')}} From e69dfc89487938f46ba2b3f00cfe9f9b7d82b09e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 25 Oct 2023 00:33:52 +0900 Subject: [PATCH 10/91] =?UTF-8?q?2023/07/22=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=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 --- .../ja/web/api/csspseudoelement/type/index.md | 45 +++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 files/ja/web/api/csspseudoelement/type/index.md diff --git a/files/ja/web/api/csspseudoelement/type/index.md b/files/ja/web/api/csspseudoelement/type/index.md new file mode 100644 index 00000000000000..0deeef887d1f1e --- /dev/null +++ b/files/ja/web/api/csspseudoelement/type/index.md @@ -0,0 +1,45 @@ +--- +title: "CSSPseudoElement: type プロパティ" +short-title: type +slug: Web/API/CSSPseudoElement/type +l10n: + sourceCommit: d76defab4ca13261e9de81ae1df125345f847b0a +--- + +{{APIRef}}{{SeeCompatTable}} + +**`type`** は {{DOMxRef('CSSPseudoElement')}} インターフェイスの読み取り専用プロパティで、擬似要素の型を [CSS セレクター](/ja/docs/Web/CSS/CSS_selectors#pseudo-elements)の形の文字列で表します。 + +## 値 + +以下の値のいずれかを格納する文字列です。 + +- {{CSSxRef('::before', '"::before"')}} +- {{CSSxRef('::after', '"::after"')}} +- {{CSSxRef('::marker', '"::marker"')}} + +## 例 + +下記の例は、 `CSSPseudoElement.type` と {{DOMxRef('Element.pseudo()')}} の関係を示しています。 + +```js +const myElement = document.querySelector("q"); +const mySelector = "::after"; +const cssPseudoElement = myElement.pseudo(mySelector); +const typeOfPseudoElement = cssPseudoElement.type; + +console.log(mySelector === typeOfPseudoElement); // true を出力 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{DOMxRef('Element.pseudo()')}} +- [標準的な擬似要素の索引](/ja/docs/Web/CSS/Pseudo-elements#標準的な擬似要素の索引) From d42b0e9a4df0363c84be5977ebd08765626c8d3f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 25 Oct 2023 00:54:54 +0900 Subject: [PATCH 11/91] =?UTF-8?q?2023/07/26=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/pseudo-elements/index.md | 95 ++++++++--------------- 1 file changed, 31 insertions(+), 64 deletions(-) diff --git a/files/ja/web/css/pseudo-elements/index.md b/files/ja/web/css/pseudo-elements/index.md index d738e847487f12..1adc90ee233eb2 100644 --- a/files/ja/web/css/pseudo-elements/index.md +++ b/files/ja/web/css/pseudo-elements/index.md @@ -1,11 +1,23 @@ --- title: 擬似要素 slug: Web/CSS/Pseudo-elements +l10n: + sourceCommit: ceb7507408b15730166596ea3b2de282c4edae1f --- {{CSSRef}} -CSS の **擬似要素** (Pseudo-elements) は、セレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。例えば {{CSSxRef("::first-line")}} 擬似要素は、段落の最初の行のフォントを変更するために使用することができます。 +CSS の **擬似要素** (Pseudo-elements) は、セレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。 + +## 構文 + +```css +selector::pseudo-element { + property: value; +} +``` + +例えば {{CSSxRef("::first-line")}} 擬似要素は、段落の最初の行のフォントを変更するために使用することができます。 ```css /* すべての

要素の最初の行です。 */ @@ -15,32 +27,26 @@ p::first-line { } ``` -> **メモ:** 擬似要素とは対照的に、{{CSSxRef("pseudo-classes", "擬似クラス")}}は要素の状態に基づいてスタイル付けを行うことができます。 +擬似要素にはダブルコロン (`::`) を使用します。これは、単一のコロン (`:`) を使用する[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)と区別するためです。 -## 構文 +1つのセレクターで使用できる擬似要素は1つだけです。擬似要素が現れる場所は、それが現れる[複雑](/ja/docs/Web/CSS/CSS_selectors/Selector_structure#複雑セレクター)セレクターまたは[複合](/ja/docs/Web/CSS/CSS_selectors/Selector_structure#複合セレクター)セレクター内の他のすべての要素の後でなければなりません。例えば、段落の最初の行は `p::first-line` を使用して選択することができますが、最初の行の子やポインターが当たっている最初の行は選択できません。つまり、 `p::first-line > *` と `p::first-line:hover` はどちらも無効です。 -```css -selector::pseudo-element { - property: value; -} -``` - -擬似要素は 1 つのセレクターに 1 つだけ使用することができます。文内の単純セレクターの後に置く必要があります。 +擬似要素を使用して、状態に基づいて要素を選択することはできませんが、擬似要素を使用して、すでに状態が適用されている要素の一部を選択してスタイル設定することはできます。例えば、 `p:hover::first-line` は、段落自体にポインターが当たっているとき（擬似クラス）に、段落の最初の行（擬似要素）を選択します。 -> **メモ:** ルールとして、単一コロン (`:`) の代わりに二重コロン (`::`) を使用してください。これで擬似要素と擬似クラスを区別します。但し、この区別は W3C の古いバージョンの仕様書には存在しなかったため、多くのブラウザーは元々の擬似要素に対して両方の構文に対応しています。 +> **メモ:** [セレクターリスト](/ja/docs/Web/CSS/CSS_selectors/Selector_structure#セレクターリスト)に無効なセレクターが含まれている場合、そのスタイルブロック全体が無効になります。 -## 索引 +## 擬似要素の一覧 CSS の一連の仕様で定義される擬似要素には、以下のようなものがあります。 A -- {{CSSxRef("::after", "::after (:after)")}} +- {{CSSxRef("::after")}} B -- {{CSSxRef("::backdrop")}} {{Experimental_Inline}} -- {{CSSxRef("::before", "::before (:before)")}} +- {{CSSxRef("::backdrop")}} +- {{CSSxRef("::before")}} C @@ -49,8 +55,8 @@ C F -- {{CSSxRef("::first-letter", "::first-letter (:first-letter)")}} -- {{CSSxRef("::first-line", "::first-line (:first-line)")}} +- {{CSSxRef("::first-letter")}} +- {{CSSxRef("::first-line")}} - {{CSSxRef("::file-selector-button")}} G @@ -59,12 +65,12 @@ G M -- {{CSSxRef("::marker")}} {{Experimental_Inline}} +- {{CSSxRef("::marker")}} P -- {{CSSxRef("::part", "::part()")}} {{Experimental_Inline}} -- {{CSSxRef("::placeholder")}} {{Experimental_Inline}} +- {{CSSxRef("::part", "::part()")}} +- {{CSSxRef("::placeholder")}} S @@ -76,54 +82,15 @@ T - {{CSSxRef("::target-text")}} {{Experimental_Inline}} +> **メモ:** ブラウザーは元の 4 つの擬似要素、 `::before`、`::after`、`::first-line`、`::first-letter` のみで単一コロンの構文に対応しています。 + ## 仕様書 {{Specifications}} -## ブラウザーの互換性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ブラウザー対応開始バージョン対応内容
Internet Explorer8.0:pseudo-element
9.0:pseudo-element ::pseudo-element
Firefox (Gecko)1.0 (1.0):pseudo-element
1.0 (1.5):pseudo-element ::pseudo-element
Opera4.0:pseudo-element
7.0:pseudo-element ::pseudo-element
Safari (WebKit)1.0 (85):pseudo-element ::pseudo-element
- ## 関連情報 +- [CSS 擬似要素](/ja/docs/Web/CSS/CSS_pseudo-elements)モジュール - [擬似クラス](/ja/docs/Web/CSS/Pseudo-classes) +- [CSS セレクター](/ja/docs/Web/CSS/CSS_selectors)モジュール +- [CSS 構成要素: 擬似クラスと擬似要素](/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) From e2fad75c0893091a4f1482e5dfc0485f09d106d1 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 25 Oct 2023 08:07:57 +0900 Subject: [PATCH 12/91] =?UTF-8?q?2023/07/10=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/xpath/functions/index.md | 83 ++++++++++++++------------- 1 file changed, 42 insertions(+), 41 deletions(-) diff --git a/files/ja/web/xpath/functions/index.md b/files/ja/web/xpath/functions/index.md index 5be9a1787ca333..df63237c07df1d 100644 --- a/files/ja/web/xpath/functions/index.md +++ b/files/ja/web/xpath/functions/index.md @@ -1,47 +1,48 @@ --- -title: Functions +title: 関数 slug: Web/XPath/Functions +l10n: + sourceCommit: b6f343538eac4a803943b4e99b0c0545b372645a --- -{{ XsltRef() }} +{{XsltSidebar}} -以下はコア [XPath](/ja/docs/XPath) 関数及び [XSLT](/ja/docs/XSLT) 固有の追加 XPath 関数の、解説、構文、引数一覧、返される型、該当する W3C 勧告の原典、及び [Gecko](/ja/docs/Gecko) での現在の対応状況を含む注釈付きの一覧です。 XPath/XSLT 関数の使用に関するより詳しい情報は、[より詳しい読み物](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading)のページをご覧ください。 +以下はコア [XPath](/ja/docs/Web/XPath) 関数及び [XSLT](/ja/docs/Web/XSLT) 固有の追加 XPath 関数の、解説、構文、引数一覧、返される型、該当する W3C 勧告の原典を含む注釈付きの一覧です。 XPath/XSLT 関数の使用に関するより詳しい情報は、[より詳しい読み物](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT)のページをご覧ください。 -- [boolean()](/ja/docs/XPath/Functions/boolean) -- [ceiling()](/ja/docs/ja/XPath/Functions/ceiling) -- [concat()](/ja/docs/ja/XPath/Functions/concat) -- [contains()](/ja/docs/XPath/Functions/contains) -- [count()](/ja/docs/XPath/Functions/count) -- [current()](/ja/docs/XPath/Functions/current)_XSLT 固有_ -- [document()](/ja/docs/XPath/Functions/document)_XSLT 固有_ -- [element-available()](/ja/docs/XPath/Functions/element-available) -- [false()](/ja/docs/XPath/Functions/false) -- [floor()](/ja/docs/XPath/Functions/floor) -- [format-number()](/ja/docs/XPath/Functions/format-number) _XSLT 固有_ -- [function-available()](/ja/docs/XPath/Functions/function-available) -- [generate-id()](/ja/docs/XPath/Functions/generate-id) _XSLT 固有_ -- [id()](/ja/docs/XPath/Functions/id) _(一部対応)_ -- [key()](/ja/docs/XPath/Functions/key) _XSLT 固有_ -- [lang()](/ja/docs/XPath/Functions/lang) -- [last()](/ja/docs/XPath/Functions/last) -- [local-name()](/ja/docs/XPath/Functions/local-name) -- [name()](/ja/docs/XPath/Functions/name) -- [namespace-uri()](/ja/docs/XPath/Functions/namespace-uri) -- [normalize-space()](/ja/docs/XPath/Functions/normalize-space) -- [not()](/ja/docs/XPath/Functions/not) -- [number()](/ja/docs/XPath/Functions/number) -- [position()](/ja/docs/XPath/Functions/position) -- [round()](/ja/docs/XPath/Functions/round) -- [starts-with()](/ja/docs/XPath/Functions/starts-with) -- [string()](/ja/docs/XPath/Functions/string) -- [string-length()](/ja/docs/XPath/Functions/string-length) -- [substring()](/ja/docs/XPath/Functions/substring) -- [substring-after()](/ja/docs/XPath/Functions/substring-after) -- [substring-before()](/ja/docs/XPath/Functions/substring-before) -- [sum()](/ja/docs/XPath/Functions/sum) -- [system-property()](/ja/docs/XPath/Functions/system-property) _XSLT 固有_ -- [translate()](/ja/docs/XPath/Functions/translate) -- [true()](/ja/docs/XPath/Functions/true) -- [unparsed-entity-url()](/ja/docs/XPath/Functions/unparsed-entity-url) _XSLT 固有 (未対応)_ - -{{QuickLinksWithSubpages("/ja/docs/Web/XPath")}} +- [boolean()](/ja/docs/Web/XPath/Functions/boolean) +- [ceiling()](/ja/docs/Web/XPath/Functions/ceiling) +- [choose()](/ja/docs/Web/XPath/Functions/choose) +- [concat()](/ja/docs/Web/XPath/Functions/concat) +- [contains()](/ja/docs/Web/XPath/Functions/contains) +- [count()](/ja/docs/Web/XPath/Functions/count) +- [current()](/ja/docs/Web/XPath/Functions/current) _XSLT 固有_ +- [document()](/ja/docs/Web/XPath/Functions/document) _XSLT 固有_ +- [element-available()](/ja/docs/Web/XPath/Functions/element-available) +- [false()](/ja/docs/Web/XPath/Functions/false) +- [floor()](/ja/docs/Web/XPath/Functions/floor) +- [format-number()](/ja/docs/Web/XPath/Functions/format-number) _XSLT 固有_ +- [function-available()](/ja/docs/Web/XPath/Functions/function-available) +- [generate-id()](/ja/docs/Web/XPath/Functions/generate-id) _XSLT 固有_ +- [id()](/ja/docs/Web/XPath/Functions/id) +- [key()](/ja/docs/Web/XPath/Functions/key) _XSLT 固有_ +- [lang()](/ja/docs/Web/XPath/Functions/lang) +- [last()](/ja/docs/Web/XPath/Functions/last) +- [local-name()](/ja/docs/Web/XPath/Functions/local-name) +- [name()](/ja/docs/Web/XPath/Functions/name) +- [namespace-uri()](/ja/docs/Web/XPath/Functions/namespace-uri) +- [normalize-space()](/ja/docs/Web/XPath/Functions/normalize-space) +- [not()](/ja/docs/Web/XPath/Functions/not) +- [number()](/ja/docs/Web/XPath/Functions/number) +- [position()](/ja/docs/Web/XPath/Functions/position) +- [round()](/ja/docs/Web/XPath/Functions/round) +- [starts-with()](/ja/docs/Web/XPath/Functions/starts-with) +- [string()](/ja/docs/Web/XPath/Functions/string) +- [string-length()](/ja/docs/Web/XPath/Functions/string-length) +- [substring()](/ja/docs/Web/XPath/Functions/substring) +- [substring-after()](/ja/docs/Web/XPath/Functions/substring-after) +- [substring-before()](/ja/docs/Web/XPath/Functions/substring-before) +- [sum()](/ja/docs/Web/XPath/Functions/sum) +- [system-property()](/ja/docs/Web/XPath/Functions/system-property) _XSLT 固有_ +- [translate()](/ja/docs/Web/XPath/Functions/translate) +- [true()](/ja/docs/Web/XPath/Functions/true) +- [unparsed-entity-url()](/ja/docs/Web/XPath/Functions/unparsed-entity-url) _XSLT 固有_ From 3a0bff603f886242fbf5a06f7023aa5ee2255b99 Mon Sep 17 00:00:00 2001 From: manjuu-eater <88940383+manjuu-eater@users.noreply.github.com> Date: Sat, 28 Oct 2023 19:11:54 +0900 Subject: [PATCH 13/91] =?UTF-8?q?=E8=AA=A4=E5=AD=97=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../javascript/reference/global_objects/string/search/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/javascript/reference/global_objects/string/search/index.md b/files/ja/web/javascript/reference/global_objects/string/search/index.md index 537c21a3c5f262..192ffc4e771b4d 100644 --- a/files/ja/web/javascript/reference/global_objects/string/search/index.md +++ b/files/ja/web/javascript/reference/global_objects/string/search/index.md @@ -33,7 +33,7 @@ search(regexp) `String.prototype.search()` 自体の実装はとてもシンプルです。引数の文字列を最初の引数として `Symbol.search` メソッドを呼び出すだけです。実際の実装は [`RegExp.prototype[@@search]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@search) から来ています。 -`regexp` の `g` フラグは `search()` の結果には影響がなく、検索は常に正規表現の `lastIndex` が 0 である可能用に行われます。`search()` の動作についての詳しい情報は、[`RegExp.prototype[@@search]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@search) を参照してください。 +`regexp` の `g` フラグは `search()` の結果には影響がなく、検索は常に正規表現の `lastIndex` が 0 であるかのように行われます。`search()` の動作についての詳しい情報は、[`RegExp.prototype[@@search]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@search) を参照してください。 パターンが見つかるかどうかを知りたい場合、かつ、文字列内のインデックスを知りたい場合は、`search()` を使用してください。 From 946dd9714a3e58d7de3f35a97719800bb2589f15 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 25 Oct 2023 01:25:59 +0900 Subject: [PATCH 14/91] =?UTF-8?q?2023/06/30=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../index.md | 182 +++++++----------- 1 file changed, 70 insertions(+), 112 deletions(-) diff --git a/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md b/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md index d0d3c889ab31ae..5f6352fefc5dff 100644 --- a/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md +++ b/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md @@ -1,60 +1,77 @@ --- -title: 疑似クラスと疑似要素 +title: 擬似クラスと擬似要素 slug: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +l10n: + sourceCommit: 751d58669499de0c6ea0d5b356e0e1448418c5d3 --- {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}} -次に取り上げるセレクターのセットは、**疑似クラス**と**疑似要素**と呼ばれます。これらは多数あり、多くの場合、それらは非常に特定の目的に役立ちます。それらの使用方法がわかったら、リストを見て、達成しようとしているタスクに有効なものがあるかどうかを確認できます。ここでも、各セレクターに関連する MDN ページは、ブラウザーサポートの説明に役立ちます。 - -| 前提条件： | 基本的なコンピュータリテラシー、[インストールされている基本的なソフトウェア](/ja/Learn/Getting_started_with_the_web/Installing_basic_software)[、ファイルの操作](/ja/Learn/Getting_started_with_the_web/Dealing_with_files)に関する基本的な知識、HTML の基本（[HTML の概要を](/ja/docs/Learn/HTML/Introduction_to_HTML)学ぶ）、CSS のしくみ（[CSS の最初のステップを](/ja/docs/Learn/CSS/First_steps)学ぶ）。 | -| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| 目的： | 疑似クラスおよび疑似要素セレクターについて学習します。 | - -## 疑似クラスとは何ですか？ - -疑似クラスは、特定の状態にある要素を選択するセレクターです。たとえば、それらはそのタイプの最初の要素であるか、マウスポインターによってホバーされています。それらは、ドキュメントの一部にクラスを適用したかのように振る舞う傾向があり、マークアップの余分なクラスを削減し、より柔軟で保守可能なコードを提供するのに役立ちます。 - -疑似クラスは、コロンで始まるキーワードです。 - -``` -:疑似クラス名 -``` - -### 単純な疑似クラスの例 +次に見ていくセレクターの集合は、**擬似クラス**と**擬似要素**と呼ばれるものです。これらのセレクターは多数あり、かなり特有の用途に使われることが多いです。これらがどのように動作するのかがわかれば、一覧を見て、達成しようとしている作業にとってうまくいくものがあるかどうかを確認することができます。ブラウザーの対応については、繰り返しになりますが、セレクターの MDN ページが参考になります。 + + + + + + + + + + + + +
前提条件: + 基本的なコンピュータリテラシー、基本的なソフトウェアのインストール、ファイルの操作に関する基本的な知識、 HTML の基本（HTML 入門を学んでください）、 CSS の動作に関する知識（CSS 第一歩を学んでください）。 +
目的:擬似クラスおよび擬似要素セレクターについて学習すること。
+ +## 擬似クラスとは何か + +擬似クラスは、特定の状態にある要素を選択するセレクターです。例えば、その型の最初の要素であるとか、ポインターを当てた状態であるなどです。擬似クラスは、あたかも文書内の一部にクラスを適用したかのように動作する傾向があり、マークアップ内の余分なクラスを削減することを支援していただくことが多く、より柔軟で保守性の高いコードを提供します。 + +擬似クラスはコロンで始まるキーワードです。例えば `:hover` は擬似クラスです。 + +### 単純な擬似クラスの例 簡単な例を見てみましょう。以下の最初の例に示すように、記事の最初の段落を大きく太字にしたい場合は、その段落にクラスを追加してから、そのクラスに CSS を追加できます。 {{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}} -ただし、これを維持するのは面倒な場合があります。ドキュメントの上部に新しい段落が追加された場合はどうなりますか？クラスを新しい段落に移動する必要があります。クラスを追加する代わりに、{{cssxref(":first-child")}} 疑似クラスセレクターを使用できます。これにより、*常に*記事の最初の子要素がターゲットになり、HTML を編集する必要がなくなります（これは、CMS によって生成された可能性があるため、とにかく常に可能であるとは限りません。） +しかし、これでは保守が面倒になります。文書の先頭に新しい段落が追加されたらどうでしょう？新しい段落にクラスを移さなければなりません。クラスを追加する代わりに、 {{cssxref(":first-child")}} 擬似クラスセレクターを使用することができます。これは常に記事の最初の子要素を対象としますので、 HTML を編集する必要がなくなります（これは、CMS によって生成された可能性があるため、とにかく常に可能であるとは限りません）。 {{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}} -すべての疑似クラスは、この同じ方法で動作します。特定の状態にあるドキュメントの一部をターゲットにして、HTML にクラスを追加したかのように動作します。MDN の他の例をいくつか見てみましょう。 +すべての擬似クラスは、この同じ方法で動作します。特定の状態にある文書の一部を対象にして、 HTML にクラスを追加したかのように動作します。 MDN の他の例をいくつか見てみましょう。 - [`:last-child`](/ja/docs/Web/CSS/:last-child) - [`:only-child`](/ja/docs/Web/CSS/:only-child) - [`:invalid`](/ja/docs/Web/CSS/:invalid) -### ユーザーアクション疑似クラス +> **メモ:** 擬似クラスや要素の前に要素セレクターを書かずに書くことは有効です。この例では、 `:first-child` と書けば、段落の最初の子要素だけでなく、 `

` 要素の最初の子要素であるすべての要素に適用されます。 `:first-child` は `*:first-child` と等価だからです。しかし、通常は複数の要素を制御したいので、より詳細度を上げる必要があります。 + +### ユーザー操作擬似クラス -一部の疑似クラスは、ユーザーが何らかの方法でドキュメントを操作したときにのみ適用されます。これらの**ユーザーアクションの**疑似クラスは、**動的疑似クラス**と呼ばれることもあり、ユーザーが要素を操作したときに、要素にクラスが追加されたかのように動作します。例は次のとおりです。 +一部の擬似クラスは、ユーザーが何らかの方法で文書を操作したときにのみ適用されます。これらの**ユーザー操作の**擬似クラスは、**動的擬似クラス**と呼ばれることもあり、ユーザーが要素を操作したときに、要素にクラスが追加されたかのように動作します。例は次のとおりです。 -- [`:hover`](/ja/docs/Web/CSS/:hover) — 上記の通り; これは、ユーザーが要素（通常はリンク）の上にポインターを移動した場合にのみ適用されます。 +- [`:hover`](/ja/docs/Web/CSS/:hover) — 前述の通りです。これは、ユーザーが要素（通常はリンク）の上にポインターを載せた場合にのみ適用されます。 - [`:focus`](/ja/docs/Web/CSS/:focus) — ユーザーがキーボードコントロールを使用して要素にフォーカスした場合にのみ適用されます。 {{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}} -## 疑似要素とは何ですか？ +## 擬似要素とは何か -疑似要素は同様に動作しますが、既存の要素にクラスを適用するのではなく、まったく新しい HTML 要素をマークアップに追加したかのように動作します。疑似要素はダブルコロンで始まり `::` ます。 +擬似要素は同様に動作しますが、既存の要素にクラスを適用するのではなく、まったく新しい HTML 要素をマークアップに追加したかのように動作します。 -``` -::疑似要素名 -``` +擬似要素はダブルコロン `::` で始まります。擬似要素の例は `::before` です。 -> **メモ:** 一部の初期の疑似要素では、単一のコロン構文が使用されていたため、コードまたは例でこれを見ることがあるでしょう。最新のブラウザーは、後方互換性のためにシングルまたはダブルコロン構文で初期の疑似要素をサポートしています。 +> **メモ:** 一部の初期の擬似要素では、単一のコロン構文が使用されていたため、コードまたは例でこれを見ることがあるでしょう。最新のブラウザーは、後方互換性のためにシングルまたはダブルコロン構文で初期の擬似要素に対応しています。 たとえば、段落の最初の行を選択する場合は、それを `` 要素にラップして要素セレクターを使用できます。ただし、ラップした単語の数が親要素の幅よりも長いまたは短い場合は、失敗します。1 行にいくつの単語が収まるかわからない傾向があるため（画面の幅やフォントサイズが変わると、単語数が変わるため）、HTML を追加してこれを確実に行うことは不可能です。 @@ -62,13 +79,13 @@ slug: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements {{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}} -それはまるで最初のフォーマットされた行を `` で魔法のように包み、行の長さが変更されるたびに更新されるかのように動作します。 +それはまるで最初の整形された行を `` で魔法のように包み、行の長さが変更されるたびに更新されるかのように動作します。 これにより、両方の段落の最初の行が選択されていることがわかります。 -## 疑似クラスと疑似要素を組み合わせる +## 擬似クラスと擬似要素を組み合わせる -最初の段落の最初の行を太字にしたい場合は `:first-child` 、 `::first-line` セレクターとセレクターをチェーンすることができます。前のライブ例を編集して、次の CSS を使用するようにしてください。\
要素内にある最初の `

` 要素の最初の行を選択したいと言っています。 +最初の段落の最初の行を太字にしたい場合は、 `:first-child` および `::first-line` セレクターを連結することができます。前のライブ例を編集して、次の CSS を使用するようにしてください。 `

` 要素内にある最初の `

` 要素の最初の行を選択したいということです。 ```css article p:first-child::first-line { @@ -77,98 +94,39 @@ article p:first-child::first-line { } ``` -## :: before および:: after を使用したコンテンツの生成 +## ::before および ::after を使用したコンテンツの生成 -CSS を使用してコンテンツをドキュメントに挿入するための [`content`](/ja/docs/Web/CSS/content) プロパティと共に使用される特別な疑似要素がいくつかあります。 +CSS を使用してコンテンツを文書に挿入するための [`content`](/ja/docs/Web/CSS/content) プロパティと共に使用される特別な擬似要素がいくつかあります。 -以下のライブ例のように、これらを使用してテキストの文字列を挿入できます。{{cssxref("content")}} プロパティのテキスト値を変更してみて、出力でそれを確認してください。 `::before` 疑似要素を `::after` に変更して、要素の最初ではなく最後に挿入されたテキストを表示することもできます。 +以下のライブ例のように、これらを使用してテキストの文字列を挿入できます。{{cssxref("content")}} プロパティのテキスト値を変更してみて、出力でそれを確認してください。 `::before` 擬似要素を `::after` に変更して、要素の最初ではなく最後に挿入されたテキストを表示することもできます。 {{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}} -CSS からテキストの文字列を挿入することは、実際には Web で頻繁に行うことではありません。そのテキストは一部のスクリーンリーダーにはアクセスできず、将来誰かが見つけて編集するのが難しい場合があるためです。 +CSS からテキストを挿入することは、ウェブ上で実に多く使用することではありません。なぜなら、そのテキストはスクリーンリーダーによってはアクセスできず、将来誰かが見つけて編集するのが難しくなるからです。 -これらの疑似要素のより有効な使用法は、アイコンを挿入することです。たとえば、以下の例で追加された小さな矢印は、スクリーンリーダーで読みたくない視覚的なインジケーターです。 +これらの擬似要素のより有効な使用法は、アイコンを挿入することです。たとえば、以下の例で追加された小さな矢印は、スクリーンリーダーで読みたくない視覚的なインジケーターです。 {{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}} -これらの疑似要素は、空の文字列を挿入するためにも頻繁に使用され、ページ上の要素と同じようにスタイルを設定できます。 +これらの擬似要素は、空の文字列を挿入するためにも頻繁に使用され、ページ上の要素と同じようにスタイルを設定できます。 -次の例では、 `::before` 疑似要素を使用して空の文字列を追加しています。幅と高さでスタイルを設定できるように、これを `display: block` に設定しました。次に、CSS を使用して、他の要素と同じようにスタイルを設定します。CSS をいじって、CSS の外観と動作を変更できます。 +次の例では、 `::before` 擬似要素を使用して空の文字列を追加しています。幅と高さでスタイルを設定できるように、これを `display: block` に設定しました。次に、CSS を使用して、他の要素と同じようにスタイルを設定します。CSS をいじって、CSS の外観と動作を変更できます。 {{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}} -`content` プロパティとともに `::before` と `::after` 擬似要素を使用することは、CSS では「生成されたコンテンツ」と呼ばれ、この手法がさまざまなタスクに使用されているのをよく目にします。良い例は、[CSS Arrow Please Please](http://www.cssarrowplease.com/)のサイトで、[CSS で矢印](http://www.cssarrowplease.com/)を生成するのに役立ちます。矢印を作成するときに CSS を見ると、{{cssxref("::before")}} および {{cssxref("::after")}} 疑似要素が使用されていることがわかります。これらのセレクターが表示されたら、{{cssxref("content")}} プロパティを見て、ドキュメントに何が追加されているかを確認してください。 - -## 参照セクション - -疑似クラスと疑似要素は多数あり、参照するリストがあると便利です。以下に、MDN のリファレンスページへのリンクとともに、それらをリストした表を示します。これをリファレンスとして使用して、ターゲットにできるものの種類を確認します。 - -### 疑似クラス - -| セレクタ | 説明 | -| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{cssxref(":active")}} | ユーザーが要素をアクティブ化（たとえばクリック）すると一致します。 | -| {{cssxref(":any-link")}} | リンクの `:link` と `:visited` 状態の両方に一致します。 | -| {{cssxref(":blank")}} | 入力値が空の[`` 要素に](/ja/docs/Web/HTML/Element/input)一致します。 | -| {{cssxref(":checked")}} | 選択状態のラジオボタンまたはチェックボックスに一致します。 | -| {{cssxref(":current")}} | 現在表示されている要素または要素の祖先と一致します。 | -| {{cssxref(":default")}} | 類似要素のセットの中でデフォルトである 1 つ以上の UI 要素に一致します。 | -| {{cssxref(":dir")}} | 方向性（HTML [`dir`](/ja/docs/Web/HTML/Global_attributes/dir) 属性または CSS [`direction`](/ja/docs/Web/CSS/direction) プロパティの値）に基づいて要素を選択します。 | -| {{cssxref(":disabled")}} | 無効な状態のユーザーインターフェイス要素に一致します。 | -| {{cssxref(":empty")}} | オプションの空白以外の子を持たない要素に一致します。 | -| {{cssxref(":enabled")}} | 有効な状態のユーザーインターフェイス要素に一致します。 | -| {{cssxref(":first")}} | [ページ媒体](/ja/docs/Web/CSS/Paged_Media)では、最初のページと一致します。 | -| {{cssxref(":first-child")}} | 兄弟の中で最初にある要素に一致します。 | -| {{cssxref(":first-of-type")}} | 兄弟の中で最初にある特定のタイプの要素に一致します。 | -| {{cssxref(":focus")}} | 要素にフォーカスがあるときに一致します。 | -| {{cssxref(":focus-visible")}} | 要素にフォーカスがあり、そのフォーカスがユーザーに表示される場合に一致します。 | -| {{cssxref(":focus-within")}} | フォーカスを持つ要素と、フォーカスを持つ子孫を持つ要素に一致します。 | -| {{cssxref(":future")}} | 現在の要素の後の要素に一致します。 | -| {{cssxref(":hover")}} | ユーザーが要素にカーソルを合わせると一致します。 | -| {{cssxref(":indeterminate")}} | 値が不確定な状態の UI 要素、通常は[チェックボックスに](/ja/docs/Web/HTML/Element/input/checkbox)一致し[ます](/ja/docs/Web/HTML/Element/input/checkbox)。 | -| {{cssxref(":in-range")}} | 範囲制限を持つ要素で、要素の値が範囲内にある場合にマッチします。 | -| {{cssxref(":invalid")}} | 無効な状態の `` のような要素に一致します。 | -| {{cssxref(":lang")}} | 言語（HTML [lang](/ja/docs/Web/HTML/Global_attributes/lang)属性の値）に基づいて要素を[照合し](/ja/docs/Web/HTML/Global_attributes/lang)ます。 | -| {{cssxref(":last-child")}} | 兄弟の中で最後にある要素に一致します。 | -| {{cssxref(":last-of-type")}} | 兄弟の中で最後にある特定のタイプの要素に一致します。 | -| {{cssxref(":left")}} | [ページ媒体](/ja/docs/Web/CSS/CSS_Pages)では、左側のページと一致します。 | -| {{cssxref(":link")}} | 未訪問のリンクに一致します。 | -| {{cssxref(":local-link")}} | 現在のドキュメントと同じサイトにあるページを指すリンクに一致します。 | -| {{cssxref(":is", ":is()")}} | 渡されたセレクターリスト内の任意のセレクターに一致します。 | -| {{cssxref(":not")}} | このセレクターに値として渡されるセレクターで一致しないものと一致します。 | -| {{cssxref(":nth-child")}} | 兄弟のリストの要素に一致します — 兄弟は*an+b*の形式の式で一致します（たとえば、2n + 1 は 1、3、5、7 番目などの要素に一致します。すべてが奇数です）。 | -| {{cssxref(":nth-of-type")}} | 特定のタイプの兄弟（ `

` 要素など）のリストの要素に一致します — 兄弟は*、an+b*という形式の式で一致します（たとえば、2n + 1 は、その要素のタイプの 1、3、5 、7 番目などに一致します。すべて奇数です。） | -| {{cssxref(":nth-last-child")}} | 兄弟のリストの要素を末尾から逆に数えて一致させます。兄弟は*an+b*の形式の式で一致します（たとえば、2n + 1 はシーケンスの最後の要素、次にその 2 つ前の要素、次にその 2 つ前の要素などと一致します。最後から数えてすべての奇数の要素。） | -| {{cssxref(":nth-last-of-type")}} | 特定のタイプの兄弟のリスト（ `

` 要素など）の要素を最後から逆に数えて一致させます。兄弟は*、an+b*という形式の式で一致します（たとえば、2n + 1 は、シーケンス内のそのタイプの最後の要素、次にその 2 つ前の要素、次にその 2 つ前の要素などと一致します。最後から数えてすべての奇数の要素。） | -| {{cssxref(":only-child")}} | 兄弟がない要素に一致します。 | -| {{cssxref(":only-of-type")}} | 兄弟間でそのタイプの唯一の要素である要素に一致します。 | -| {{cssxref(":optional")}} | 不要なフォーム要素に一致します。 | -| {{cssxref(":out-of-range")}} | 範囲制限を持つ要素で、要素の値が範囲外にある場合にマッチします。 | -| {{cssxref(":past")}} | 現在の要素より前の要素に一致します。 | -| {{cssxref(":placeholder-shown")}} | プレースホルダーテキストを表示している input 要素に一致します。 | -| {{cssxref(":playing")}} | 「再生」または「一時停止」できるオーディオ、ビデオ、または類似のリソースを表す要素が「再生中」のときに一致します。 | -| {{cssxref(":paused")}} | 「再生」または「一時停止」できるオーディオ、ビデオ、または類似のリソースを表す要素が「一時停止」されている場合に一致します。 | -| {{cssxref(":read-only")}} | ユーザーが変更できない要素と一致します。 | -| {{cssxref(":read-write")}} | ユーザーが変更可能な要素と一致します。 | -| {{cssxref(":required")}} | 必要なフォーム要素に一致します。 | -| {{cssxref(":right")}} | [ページ媒体](/ja/docs/Web/CSS/CSS_Pages)では、右側のページに一致します。 | -| {{cssxref(":root")}} | ドキュメントのルートである要素に一致します。 | -| {{cssxref(":scope")}} | スコープ要素であるすべての要素に一致します。 | -| {{cssxref(":valid")}} | `` 要素などで要素が有効な状態のときに一致します。 | -| {{cssxref(":target")}} | 現在の URL のターゲットである場合（つまり、現在の[URL フラグメントに](https://en.wikipedia.org/wiki/Fragment_identifier)一致する ID を持つ場合）、要素に一致し[ます](https://en.wikipedia.org/wiki/Fragment_identifier)。 | -| {{cssxref(":visited")}} | 訪問したリンクに一致します。 | - -### 疑似要素 - -| セレクタ | 説明 | -| ------------------------------- | -------------------------------------------------------------------------------------- | -| {{cssxref("::after")}} | 元の要素の実際のコンテンツの後に現れるスタイル可能な要素と一致します。 | -| {{cssxref("::before")}} | 元の要素の実際のコンテンツの前に現れるスタイル可能な要素と一致します。 | -| {{cssxref("::first-letter")}} | 要素の最初の文字と一致します。 | -| {{cssxref("::first-line")}} | 含まれている要素の最初の行と一致します。 | -| {{cssxref("::grammar-error")}} | ブラウザーによってフラグが立てられた文法エラーを含むドキュメントの一部に一致します。 | -| {{cssxref("::marker")}} | 通常は箇条書きまたは番号が含まれているリストアイテムのマーカーボックスに一致します。 | -| {{cssxref("::selection")}} | 選択されたドキュメントの部分に一致します。 | -| {{cssxref("::spelling-error")}} | ブラウザーによってフラグが付けられた、スペルミスを含むドキュメントの一部に一致します。 | +`::before` と `::after` 擬似要素を `content` プロパティとともに使用することは、CSS では「生成コンテンツ」と呼ばれ、この手法がさまざまなタスクに使用されているのをよく目にします。良い例は、 [CSS Arrow Please](http://www.cssarrowplease.com/) のサイトで、 [CSS で矢印](http://www.cssarrowplease.com/)を生成するのに役立てています。矢印を作成するときの CSS を見ると、 {{cssxref("::before")}} および {{cssxref("::after")}} 擬似要素が使用されていることがわかります。これらのセレクターが表示されたら、{{cssxref("content")}} プロパティを見て、文書に何が追加されているかを確認してください。 + +## まとめ + +この記事では、特殊な種類のセレクターである CSS 擬似クラスと擬似要素を紹介しました。 + +擬似クラスを使用すると、要素が特定の状態にあるときに、その状態のクラスを DOM に追加したかのように、その要素を対象とすることができます。擬似要素は、あたかも DOM に新しい要素を追加したかのように動作し、その要素をスタイル設定することができます。擬似要素の `::before` と `::after` では、 CSS を使用して文書内のコンテンツを挿入することができます。 + +次の記事では、[結合子](/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators)について学びます。 + +## 関連情報 + +- [擬似クラスリファレンス](/ja/docs/Web/CSS/Pseudo-classes) +- [擬似要素リファレンス](/ja/docs/Web/CSS/Pseudo-elements) {{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}} From 0d99d6507693c77960b6b8cb1c5d30ec737c345f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 25 Oct 2023 01:32:27 +0900 Subject: [PATCH 15/91] =?UTF-8?q?Pseudo-classes=5Fand=5Fpseudo-elements=20?= =?UTF-8?q?=E3=81=B8=E3=81=AE=E3=83=AA=E3=83=B3=E3=82=AF=E3=82=92=E6=9B=B4?= =?UTF-8?q?=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/learn/css/building_blocks/selectors/index.md | 4 ++-- files/ja/learn/css/building_blocks/values_and_units/index.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/files/ja/learn/css/building_blocks/selectors/index.md b/files/ja/learn/css/building_blocks/selectors/index.md index b943e8f7b98b4e..23ec5ba4dc0c80 100644 --- a/files/ja/learn/css/building_blocks/selectors/index.md +++ b/files/ja/learn/css/building_blocks/selectors/index.md @@ -167,8 +167,8 @@ article > p { | [クラスセレクター](/ja/docs/Web/CSS/Class_selectors) | `.box { }` | [クラスセレクター](/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Class_selectors) | | [ID セレクター](/ja/docs/Web/CSS/ID_selectors) | `#unique { }` | [ID セレクター](/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#ID_Selectors) | | [属性セレクター](/ja/docs/Web/CSS/Attribute_selectors) | `a[title] { }` | [属性によるセレクター](/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) | -| [擬似クラスセレクター](/ja/docs/Web/CSS/Pseudo-classes) | `p:first-child { }` | [疑似クラス](/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#What_is_a_pseudo-class) | -| [疑似要素セレクター](/ja/docs/Web/CSS/Pseudo-elements) | `p::first-line { }` | [疑似要素](/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#What_is_a_pseudo-element) | +| [擬似クラスセレクター](/ja/docs/Web/CSS/Pseudo-classes) | `p:first-child { }` | [疑似クラス](/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#擬似クラスとは何か) | +| [疑似要素セレクター](/ja/docs/Web/CSS/Pseudo-elements) | `p::first-line { }` | [疑似要素](/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#擬似要素とは何か) | | [子孫結合子](/ja/docs/Web/CSS/Descendant_combinator) | `article p` | [子孫結合子](/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Descendant_Selector) | | [子結合子](/ja/docs/Web/CSS/Child_combinator) | `article > p` | [子結合子](/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Child_combinator) | | [次兄弟結合子](/ja/docs/Web/CSS/Next-sibling_combinator) | `h1 + p` | [隣接兄弟](/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Adjacent_sibling) | diff --git a/files/ja/learn/css/building_blocks/values_and_units/index.md b/files/ja/learn/css/building_blocks/values_and_units/index.md index ab33a1fdbc3343..0cc350d9d0b64a 100644 --- a/files/ja/learn/css/building_blocks/values_and_units/index.md +++ b/files/ja/learn/css/building_blocks/values_and_units/index.md @@ -288,7 +288,7 @@ RGB に RGBA があるように、HSL には同様な HSLA があり、アルフ 上記の例を通じて、キーワードが値として使われる場所を見てきました (例えば、`` キーワードの例として `red`, `black`, `rebeccapurple`, `goldenrod`)。このキーワードをより正確に述べると、CSS が理解できる特別な値の _識別子_ です。このためそれは引用符で囲まれておらず、文字列として扱われません。 -CSS で文字列が使われる場所もあります、例えば、[生成されたコンテンツを指定するとき](/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#before%E3%81%8A%E3%82%88%E3%81%B3_after%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%AE%E7%94%9F%E6%88%90)です。この場合、値は文字列を示すようクォートで囲まれます。下記の例ではクォートで囲まれていない color キーワードと生成されたコンテンツ文字列を一緒に使っています。 +CSS で文字列が使われる場所もあります、例えば、[生成されたコンテンツを指定するとき](/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#before_および_after_を使用したコンテンツの生成)です。この場合、値は文字列を示すようクォートで囲まれます。下記の例ではクォートで囲まれていない color キーワードと生成されたコンテンツ文字列を一緒に使っています。 {{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} From f916a38565d392535be91caf7d53c0e8573d46ee Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Sun, 29 Oct 2023 02:50:41 +0100 Subject: [PATCH 16/91] [ja] sync translated content (#16711) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ja: sync translated content * 英語版での変更を反映 * ja: sync translated content * 不要なファイルを削除 * ja: sync translated content * 不要なファイルを削除 * ja: sync translated content * ja: sync translated content * ja: sync translated content * ja: sync translated content * Revert "Merge branch 'content-sync-ja' of https://github.com/mdn/translated-content into content-sync-ja" This reverts commit dc2da8844c4a1e9d530b121889b74a0528c516ee, reversing changes made to e9cbbcab8d280a9672bfa064c8310eee1ad58dab. Revert "Revert "Merge branch 'content-sync-ja' of https://github.com/mdn/translated-content into content-sync-ja"" This reverts commit 0f338d7409c5bab94a2941a202e491da99d2170b. * Update index.md --------- Co-authored-by: Masahiro FUJIMOTO --- files/ja/_redirects.txt | 3 +++ files/ja/_wikihistory.json | 22 +++++++++---------- .../glossary/internationalization}/index.md | 5 ++--- .../web/api/blob}/type/index.md | 6 ++--- .../{i18n => internationalization}/index.md | 3 ++- 5 files changed, 20 insertions(+), 19 deletions(-) rename files/ja/{glossary/internationalization_and_localization => conflicting/glossary/internationalization}/index.md (92%) rename files/ja/{web/api/file => conflicting/web/api/blob}/type/index.md (95%) rename files/ja/glossary/{i18n => internationalization}/index.md (95%) diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index ec1c07148f62df..12abc314bbe460 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -1339,7 +1339,9 @@ /ja/docs/Glossary/Global_attribute /ja/docs/Web/HTML/Global_attributes /ja/docs/Glossary/Grid_Rows /ja/docs/Glossary/Grid_Row /ja/docs/Glossary/Header /ja/docs/Glossary/HTTP_header +/ja/docs/Glossary/I18N /ja/docs/Glossary/Internationalization /ja/docs/Glossary/Index /ja/docs/Glossary +/ja/docs/Glossary/Internationalization_and_localization /ja/docs/conflicting/Glossary/Internationalization /ja/docs/Glossary/POP3 /ja/docs/Glossary/POP /ja/docs/Glossary/Reference /ja/docs/Glossary/Object_reference /ja/docs/Glossary/Round_Trip_Time_(RTT) /ja/docs/Glossary/Round_Trip_Time @@ -2759,6 +2761,7 @@ /ja/docs/Web/API/File.size /ja/docs/Web/API/Blob/size /ja/docs/Web/API/File.type /ja/docs/Web/API/Blob/type /ja/docs/Web/API/File/size /ja/docs/Web/API/Blob/size +/ja/docs/Web/API/File/type /ja/docs/conflicting/Web/API/Blob/type /ja/docs/Web/API/FileReader/onabort /ja/docs/Web/API/FileReader/abort_event /ja/docs/Web/API/FileReader/onerror /ja/docs/Web/API/FileReader/error_event /ja/docs/Web/API/FileReader/onload /ja/docs/Web/API/FileReader/load_event diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index a3f88eac697a5a..af763114aeb690 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -992,10 +992,6 @@ "modified": "2019-03-18T21:42:25.531Z", "contributors": ["Uemmra3", "takeru0430"] }, - "Glossary/I18N": { - "modified": "2019-03-18T21:35:48.856Z", - "contributors": ["hamasaki", "kadokura"] - }, "Glossary/IANA": { "modified": "2019-03-18T21:15:23.095Z", "contributors": ["Wind1808"] @@ -1084,9 +1080,9 @@ "modified": "2019-03-23T22:38:23.483Z", "contributors": ["Potappo", "lv7777", "w-volte"] }, - "Glossary/Internationalization_and_localization": { - "modified": "2020-05-24T08:29:22.994Z", - "contributors": ["dskmori", "Potappo", "dukesan"] + "Glossary/Internationalization": { + "modified": "2019-03-18T21:35:48.856Z", + "contributors": ["hamasaki", "kadokura"] }, "Glossary/Internet": { "modified": "2019-03-23T22:38:33.920Z", @@ -8546,10 +8542,6 @@ "modified": "2020-10-15T21:21:38.016Z", "contributors": ["mfuji09", "silverskyvicto", "fscholz", "ethertank"] }, - "Web/API/File/type": { - "modified": "2020-10-15T22:11:44.472Z", - "contributors": ["silverskyvicto", "mfuji09"] - }, "Web/API/File/webkitRelativePath": { "modified": "2020-10-15T22:11:44.308Z", "contributors": ["silverskyvicto"] @@ -30218,6 +30210,10 @@ "modified": "2020-07-17T23:22:13.809Z", "contributors": ["papparapa", "silverskyvicto"] }, + "conflicting/Glossary/Internationalization": { + "modified": "2020-05-24T08:29:22.994Z", + "contributors": ["dskmori", "Potappo", "dukesan"] + }, "conflicting/Glossary/Scroll_container": { "modified": "2019-03-18T20:53:07.981Z", "contributors": ["mfuji09"] @@ -30346,6 +30342,10 @@ "modified": "2020-09-30T15:30:24.568Z", "contributors": ["chrisdavidmills", "dvincent"] }, + "conflicting/Web/API/Blob/type": { + "modified": "2020-10-15T22:11:44.472Z", + "contributors": ["silverskyvicto", "mfuji09"] + }, "conflicting/Web/API/Document": { "modified": "2020-10-15T22:12:31.952Z", "contributors": ["mfuji09"] diff --git a/files/ja/glossary/internationalization_and_localization/index.md b/files/ja/conflicting/glossary/internationalization/index.md similarity index 92% rename from files/ja/glossary/internationalization_and_localization/index.md rename to files/ja/conflicting/glossary/internationalization/index.md index 20e9806e63ba6d..821665812ff88f 100644 --- a/files/ja/glossary/internationalization_and_localization/index.md +++ b/files/ja/conflicting/glossary/internationalization/index.md @@ -1,8 +1,7 @@ --- title: Internationalization (国際化) -slug: Glossary/Internationalization_and_localization -l10n: - sourceCommit: 4a43f2f9af30db0721b0150909615f5fe9b041a4 +slug: conflicting/Glossary/Internationalization +original_slug: Glossary/Internationalization_and_localization --- **国際化** (しばしば 「[i18n](/ja/docs/Glossary/I18N)」と略される) は、ウェブサイトやウェブアプリケーションを、異なる言語、地域的差異、異なる国や地域による技術的要求に対応させます。 国際化はあなたのウェブアプリケーションを構築するプロセスであり、新しい言語や地域をサポートする場合に、さほど多くの技術的努力を必要とせずに幅広い言語や地域に対応化可能です。また、すべてのコンテンツをレイアウトを壊すことなくアプリケーションを翻訳あるいはローカライズするので、ユーザーは機能を閲覧することができます。 diff --git a/files/ja/web/api/file/type/index.md b/files/ja/conflicting/web/api/blob/type/index.md similarity index 95% rename from files/ja/web/api/file/type/index.md rename to files/ja/conflicting/web/api/blob/type/index.md index 050a4bc1ffb5ca..dfd71739b507fc 100644 --- a/files/ja/web/api/file/type/index.md +++ b/files/ja/conflicting/web/api/blob/type/index.md @@ -1,9 +1,7 @@ --- title: "File: type プロパティ" -short-title: type -slug: Web/API/File/type -l10n: - sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2 +slug: conflicting/Web/API/Blob/type +original_slug: Web/API/File/type --- {{APIRef("File API")}} diff --git a/files/ja/glossary/i18n/index.md b/files/ja/glossary/internationalization/index.md similarity index 95% rename from files/ja/glossary/i18n/index.md rename to files/ja/glossary/internationalization/index.md index 1a8635577df1bd..2344d0a5ebfaa3 100644 --- a/files/ja/glossary/i18n/index.md +++ b/files/ja/glossary/internationalization/index.md @@ -1,6 +1,7 @@ --- title: I18N(国際化対応) -slug: Glossary/I18N +slug: Glossary/Internationalization +original_slug: Glossary/I18N --- i18n("internationalization"という 20 文字の単語より)(国際化対応)は、製品やサービスをどんなターゲット文化にも容易に適応させるベストプラクティスです。 From a9cdf54a0b8a0bc6aaa992af5ab0f47bd33c2cc0 Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Sun, 29 Oct 2023 02:55:52 +0100 Subject: [PATCH 17/91] [zh-cn] sync translated content (#16742) * zh-cn: sync translated content * remove duplicate page of `File.prototype.type` ref: mdn/content#29539 --------- Co-authored-by: allo --- files/zh-cn/_redirects.txt | 1 + files/zh-cn/_wikihistory.json | 4 --- files/zh-cn/web/api/blob/index.md | 14 ++++---- files/zh-cn/web/api/blob/type/index.md | 2 ++ files/zh-cn/web/api/file/index.md | 2 +- files/zh-cn/web/api/file/type/index.md | 50 -------------------------- 6 files changed, 11 insertions(+), 62 deletions(-) delete mode 100644 files/zh-cn/web/api/file/type/index.md diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index bf0b3a1fca2839..39eb06181418f1 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -1483,6 +1483,7 @@ /zh-CN/docs/Web/API/File/fileName /zh-CN/docs/Web/API/File/name /zh-CN/docs/Web/API/File/fileSize /zh-CN/docs/Web/API/Blob/size /zh-CN/docs/Web/API/File/size /zh-CN/docs/Web/API/Blob/size +/zh-CN/docs/Web/API/File/type /zh-CN/docs/Web/API/Blob/type /zh-CN/docs/Web/API/FileException /zh-CN/docs/Web/API/File_and_Directory_Entries_API /zh-CN/docs/Web/API/FileReader/onabort /zh-CN/docs/Web/API/FileReader/abort_event /zh-CN/docs/Web/API/FileReader/onload /zh-CN/docs/Web/API/FileReader/load_event diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index 1584725ca72511..f3d3568c18b471 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -9598,10 +9598,6 @@ "modified": "2019-03-23T23:33:54.227Z", "contributors": ["teoli", "ziyunfei"] }, - "Web/API/File/type": { - "modified": "2019-03-23T22:09:04.649Z", - "contributors": ["wizardforcel"] - }, "Web/API/File/webkitRelativePath": { "modified": "2019-07-25T23:57:11.934Z", "contributors": ["dotnetcms_org", "wizardforcel"] diff --git a/files/zh-cn/web/api/blob/index.md b/files/zh-cn/web/api/blob/index.md index 2f7f69f922d816..53c8ba13c2c80f 100644 --- a/files/zh-cn/web/api/blob/index.md +++ b/files/zh-cn/web/api/blob/index.md @@ -22,20 +22,20 @@ Blob 表示的不一定是 JavaScript 原生格式的数据。{{DOMxRef("File")} ## 实例属性 -- {{DOMxRef("Blob.prototype.size")}} {{ReadOnlyInline}} +- {{DOMxRef("Blob.size")}} {{ReadOnlyInline}} - : `Blob` 对象中所包含数据的大小（字节）。 -- {{DOMxRef("Blob.prototype.type")}} {{ReadOnlyInline}} +- {{DOMxRef("Blob.type")}} {{ReadOnlyInline}} - : 一个字符串，表明该 `Blob` 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。 ## 实例方法 -- {{DOMxRef("Blob.prototype.arrayBuffer()")}} +- {{DOMxRef("Blob.arrayBuffer()")}} - : 返回一个 promise，其会兑现一个包含 `Blob` 所有内容的二进制格式的 {{jsxref("ArrayBuffer")}}。 -- {{DOMxRef("Blob.prototype.slice()")}} +- {{DOMxRef("Blob.slice()")}} - : 返回一个新的 `Blob` 对象，包含了源 `Blob` 对象中指定范围内的数据。 -- {{DOMxRef("Blob.prototype.stream()")}} +- {{DOMxRef("Blob.stream()")}} - : 返回一个能读取 `Blob` 内容的 {{DOMxRef("ReadableStream")}}。 -- {{DOMxRef("Blob.prototype.text()")}} +- {{DOMxRef("Blob.text()")}} - : 返回一个 promise，其会兑现一个包含 `Blob` 所有内容的 UTF-8 格式的字符串。 ## 示例 @@ -130,7 +130,7 @@ reader.readAsArrayBuffer(blob); const text = await new Response(blob).text(); ``` -或者，也可以使用 {{DOMxRef("Blob.prototype.text()")}}： +或者，也可以使用 {{DOMxRef("Blob.text()")}}： ```js const text = await blob.text(); diff --git a/files/zh-cn/web/api/blob/type/index.md b/files/zh-cn/web/api/blob/type/index.md index 52f34a0b1f802f..2f99b71ca764ab 100644 --- a/files/zh-cn/web/api/blob/type/index.md +++ b/files/zh-cn/web/api/blob/type/index.md @@ -11,6 +11,8 @@ slug: Web/API/Blob/type 一个包含文件 MIME 类型的字符串，如果无法确定类型则返回空字符串。 +> **备注：** 基于当前的实现，浏览器不会读取文件的字节流来确定其媒体类型。其根据文件扩展名进行假设；一个被重命名为 .txt 的 PNG 图像文件会返回“_text/plain_”而不是“_image/png_”。此外，`blob.type` 通常只对常见的文件类型（如图像、HTML 文档、音频和视频）有效。不常见的文件扩展名会返回空字符串。客户端配置（例如 Windows 注册表）可能会导致常见类型出现意外值。**开发者不应该仅依赖此属性作为验证方案。** + ## 示例 这个示例要求用户选择一些文件，然后检查每个文件以确保其是指定的图片文件类型之一。 diff --git a/files/zh-cn/web/api/file/index.md b/files/zh-cn/web/api/file/index.md index f9f5e6ca0dd951..cb5072a22ce41b 100644 --- a/files/zh-cn/web/api/file/index.md +++ b/files/zh-cn/web/api/file/index.md @@ -32,7 +32,7 @@ slug: Web/API/File - : 返回文件的大小。 - {{domxref("File.webkitRelativePath")}} {{readonlyinline}} {{non-standard_inline}} - : 返回 {{domxref("File")}} 相关的 path 或 URL。 -- {{domxref("File.type")}} {{readonlyinline}} +- {{domxref("Blob.type")}} {{readonlyinline}} - : 返回文件的 [多用途互联网邮件扩展类型（MIME Type）](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types) ## 方法 diff --git a/files/zh-cn/web/api/file/type/index.md b/files/zh-cn/web/api/file/type/index.md deleted file mode 100644 index dfc32aa7c5c212..00000000000000 --- a/files/zh-cn/web/api/file/type/index.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: File.type -slug: Web/API/File/type ---- - -{{APIRef("File API")}} - -返回 {{domxref("File")}} 对象所表示文件的媒体类型（MIME）。 - -## 语法 - -```js -var name = file.type; -``` - -## 值 - -字符串，包含媒体类型（MIME），表示文本是什么类型，例如 PNG 图像是 "image/png"。 - -## 示例 - -```html - -``` - -```js -function showType(fileInput) { - var files = fileInput.files; - - for (var i = 0; i < files.length; i++) { - var name = files[i].name; - var type = files[i].type; - alert("Filename: " + name + " , Type: " + type); - } -} -``` - -**注：** 基于当前的实现，浏览器不会实际读取文件的字节流，来判断它的媒体类型。它基于文件扩展来假设；重命名为 .txt 的 PNG 图像文件为 "_text/plain_" 而不是 "_image/png_" 。而且，file.type 仅仅对常见文件类型可靠。例如图像、文档、音频和视频。不常见的文件扩展名会返回空字符串。开发者最好不要依靠这个属性，作为唯一的验证方案。 - -## 规范 - -{{Specifications}} - -## 浏览器兼容性 - -{{Compat}} - -## 另见 - -- [在 Web 应用中使用文件](/zh-CN/docs/Using_files_from_web_applications) From 464c17f8dbe81eb59428dcbf04076f14d55ea0e9 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 29 Oct 2023 12:07:13 +0900 Subject: [PATCH 18/91] =?UTF-8?q?2023/10/02=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F=20(#1667?= =?UTF-8?q?3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 2023/10/02 時点の英語版に同期 --- .../selectors/combinators/index.md | 116 +++++++++++++----- 1 file changed, 86 insertions(+), 30 deletions(-) diff --git a/files/ja/learn/css/building_blocks/selectors/combinators/index.md b/files/ja/learn/css/building_blocks/selectors/combinators/index.md index d76b18c81b0e33..482d808bcb6466 100644 --- a/files/ja/learn/css/building_blocks/selectors/combinators/index.md +++ b/files/ja/learn/css/building_blocks/selectors/combinators/index.md @@ -1,33 +1,55 @@ --- title: 結合子 slug: Learn/CSS/Building_blocks/Selectors/Combinators +l10n: + sourceCommit: bb652aaf3e38f3c7fef970a62f813047dffac879 --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}} - -ここで取り上げる最後のセレクターは、他のセレクターと、ドキュメント内のコンテンツの場所や場所との有用な関係を提供する方法で組み合わせるため、コンビネーターと呼ばれます。 - -| 前提条件: | 基本的なコンピューターリテラシー、[基本的なソフトウェアがインストールされている](/ja/Learn/Getting_started_with_the_web/Installing_basic_software)こと、[ファイルの扱い](/ja/Learn/Getting_started_with_the_web/Dealing_with_files)、HTML の基本（[HTML 入門](/ja/docs/Learn/HTML/Introduction_to_HTML)）および CSS に関するアイデア（[CSS の第一歩](/ja/docs/Learn/CSS/First_steps)）に関する基本的な知識を得ている。 | -| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| 目的: | CSS で使用できるさまざまな結合子セレクターについて学ぶ。 | - -## 子孫コンビネーター - -子孫コンビネーター（通常は単一のスペース（" "）文字で表される）は、2 つのセレクターを結合して、最初のセレクターと一致する祖先（親、親の親、親の親の親など）要素がある場合、2 番目のセレクターと一致する要素が選択されるようにします。 子孫コンビネーターを利用するセレクターは、子孫セレクターと呼ばれます。 +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks")}} + +ここで取り上げる最後のセレクターは、他のセレクターと、ドキュメント内のコンテンツの場所や場所との有用な関係を提供する方法で組み合わせるため、結合子と呼ばれます。 + + + + + + + + + + + + +
前提条件: + 基本的なコンピューターリテラシー、基本的なソフトウェアのインストール、ファイルの扱い、の基本知識、 HTML の基本（HTML 入門で学習）および CSS の動作が分かっていること（CSS の第一歩で学習） +
目的: + CSS で使用できるさまざまな結合子セレクターについて学ぶ。 + CSS. +
+ +## 子孫結合子 + +**子孫結合子** (descendant combinator) は、通常は単一のスペース（" "）文字で表され、2 つのセレクターを結合して、最初のセレクターと一致する祖先（親、親の親、親の親の親など）要素がある場合、 2 番目のセレクターと一致する要素が選択されるようにします。 子孫結合子を利用するセレクターは、子孫セレクターと呼ばれます。 ```css body article p ``` -これらのセレクターは、他のセレクターの子孫である要素を選択します。それらは一致するように直接の子供である必要はありません。 - -以下の例では、要素の内部にある `

` 要素のみを `.box` クラスと照合しています。 +以下の例は、 `.box` クラスのついた要素の内部にある `

` 要素のみに一致します。 {{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}} -## 子コンビネーター +## 子結合子 -子コンビネーターは、大なり記号（ `>` ）であり、セレクターが直接の子である要素を選択した場合にのみ一致します。階層のさらに下の子孫は一致しません。例えば、`

` 要素の直接の子である `

` 要素のみを選択するには： +**子結合子** (child combinator, `>`) は 2 つの CSS セレクターの間に配置されます。 2 つ目のセレクターで一致した要素のうち、最初のセレクターで一致した要素の直接の子要素にのみ一致します。さらに下の階層の要素には一致しません。例えば、 `

` 要素の直接の子である `

` 要素のみを選択するためには、次のようにします。 ```css article > p @@ -35,7 +57,7 @@ article > p 次の例では、順序付けられていないリストがあり、その中にネストされているのは別の順序付けられていないリストです。子コンビネータを使用して、`

    ` の直接の子である `
  • ` 要素のみを選択し、上部の境界線を設定しています。 -これを子コンビネーターとして指定している `>` を削除すると、子孫セレクターになり、すべての `
  • ` 要素に赤い境界線が表示されます。 +これを子結合子として指定している `>` を削除すると、子孫セレクターになり、すべての `
  • ` 要素に赤い境界線が表示されます。 {{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}} @@ -47,15 +69,17 @@ article > p p + img ``` -一般的な使用例は、以下の私の例のように、見出しに続く段落で何かを行うことです。ここでは、`

    ` に直接隣接する段落を探し、スタイルを設定しています。 +一般的な用途としては、次の例のように見出しに続く段落に何かをすることです。この例では、 `

    ` と親要素を共有し、その `

    ` の直後に続く段落を探します。 + +もし `

    ` と `

    ` の間に `

    ` のような他の要素を挿入すると、段落はセレクターに一致しなくなり、要素が隣接しているときに適用される背景色と前景色が適用されなくなります。 -`

    ` と `

    ` の間に `

    ` のような他の要素を挿入すると、段落がセレクタによってマッチしなくなり、要素が隣接しているときに適用される背景色と前景色が得られなくなることに気づくでしょう。 + {{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}} -## 一般的な兄弟 +## 後続兄弟結合子 -要素が直接隣接していなくても、その要素の兄弟を選択したい場合は、一般的な兄弟コンビネーター( `~` )を使うことができます。`

    ` 要素の後のどこかに来る `` 要素をすべて選択するには、次のようにします。 +要素が直接隣接していなくても、その要素の兄弟を選択したい場合は、後続兄弟結合子 (subsequent-sibling combinator, `~`) を使うことができます。 `

    ` 要素の後のどこかに来る `` 要素をすべて選択するには、次のようにします。 ```css p ~ img @@ -63,27 +87,59 @@ p ~ img 以下の例では、`

    ` の後に続くすべての `

    ` 要素を選択しています。また、ドキュメントに `

    ` がある場合でも、その後にある `

    ` が選択されています。 + + {{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}} -## コンビネーターの使用 +## 入れ子による複雑なセレクターの作成 + +[CSS 入れ子モジュール](/ja/docs/Web/CSS/CSS_nesting/Using_CSS_nesting#結合子)により、結合子を使って[複雑なセレクター](/ja/docs/Web/CSS/CSS_selectors/Selector_structure#複雑なセレクター)を作るルールを書くことができます。 + +```css +p { + ~ img { + } +} +/* ブラウザーは次のように解釈します。 */ +p ~ img { +} +``` + +[`&` ネスティングセレクター](/ja/docs/Web/CSS/Nesting_selector)も、複合セレクターを作成するために使用されることがあります。 + +```css +p { + & img { + } +} +/* ブラウザーは次のように解釈します。 */ +p img { +} +``` + + + +{{EmbedGHLiveSample("css-examples/learn/selectors/nesting.html", '100%', 800)}} + +## 結合子の使用 -ドキュメントの一部を選択するために、前のレッスンで発見したセレクタをコンビネータと組み合わせることができます。 たとえば、`

      ` の直接の子であるクラス "a"のリストアイテムを選択する場合、次のように使用できます。 +前回学んだセレクターを結合子と組み合わせることで、文書内の一部を選択することができます。例えば、 `
        ` の直接の子であるクラスが "a" のリストアイテムを選択するには、次の例のようにします。 ```css ul > li[class="a"] { } ``` -ただし、文書の特定の部分を選択する大きなセレクタのリストを作成する際には注意が必要です。マークアップの中でその要素の位置を特定してセレクタを作成しているので、CSS ルールを再利用するのは難しいでしょう。 +しかし、文書の特定の部分を選択するセレクターの大きなリストを作成するときには注意してください。マークアップ内の要素の位置にとても固有のセレクターを作成したため、 CSS ルールを再利用することが難しくなります。 -多くの場合、単純なクラスを作成し、それを問題の要素に適用する方が適切です。つまり、ドキュメント内の何かにアクセスする必要があり、HTML にアクセスできない場合、おそらく CMS によって生成されているために、コンビネーターに関する知識は非常に役立ちます。 +単純なクラスを作成し、それを対象の要素に適用する方が多いでしょう。とはいえ、結合子の知識は、文書内の何かをスタイル設定する必要があるときに、おそらく {{Glossary("CMS")}} によって生成された HTML にアクセスすることができない場合に、とても有益なものになるでしょう。 -## あなたのスキルをテストしてみてください! +## スキルをテストしましょう -この記事では多くのことを取り上げましたが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するためのテストがいくつかあります - あなたのスキルをテストするを参照してください。[Test your skills: Selectors](/ja/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks) を参照してください。 +あなたはこの記事の最後までたどり着きましたが、最も重要な情報を覚えていますか？次に進む前に、この情報が記憶されているかどうかを確認するために、さらにいくつかのテストが用意されています。 [Test your skills: Selectors](/ja/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks) を参照してください。 -## 先へ +## まとめ -これは、セレクターに関するレッスンの最後のセクションです。次に、CSS のもう 1 つの重要な部分である[CSS ボックスモデルに進み](/ja/docs/Learn/CSS/Building_blocks/The_box_model)ます。 +セレクターの学習はこの章で終わりです。次は、 CSS のもう一つの重要な部分である[カスケード、詳細度、継承](/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)に進みます。 -{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}} +{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks")}} From 3eb47066606ca8749cee2b5a826ffb1e6aa52fe7 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 25 Oct 2023 01:48:59 +0900 Subject: [PATCH 19/91] =?UTF-8?q?2023/07/25=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../xpath/functions/format-number/index.md | 37 +++++++++---------- 1 file changed, 17 insertions(+), 20 deletions(-) diff --git a/files/ja/web/xpath/functions/format-number/index.md b/files/ja/web/xpath/functions/format-number/index.md index 53926445093d5d..bde8ca9cd90fbf 100644 --- a/files/ja/web/xpath/functions/format-number/index.md +++ b/files/ja/web/xpath/functions/format-number/index.md @@ -1,45 +1,42 @@ --- title: format-number slug: Web/XPath/Functions/format-number +l10n: + sourceCommit: 4a6dacf8c68925a8538585be3b2728bcb271241e --- -{{ XsltRef() }} +{{XsltSidebar}} -`format-number`関数は数値を評価し、与えられた形式の数値を表す文字列を返します。 +`format-number` 関数は数値を評価し、指定された書式で数値を表す文字列を返します。 ### 構文 -``` -format-number(number ,pattern [,decimal-format] ) +```plain +format-number(number, pattern) +format-number(number, pattern, decimalFormat) ``` ### 引数 - `number` - - : フォーマットする数値 - - - + - : 書式化する数値 - `pattern` - - : JDK 1.1 DecimalFormat クラスの形式の文字列。（[JDK 1.1](http://java.sun.com/products/archive/jdk/1.1/)のドキュメントはオンラインでは入手できません。[Java SE 6 DecimalFormat](https://docs.oracle.com/javase/jp/6/api/java/text/DecimalFormat.html)はこちらです） - - - -- `decimal-format` (任意) - - : 使用する数値書式を定義する[`xsl:decimal-format`](/ja/docs/XSLT/Elements/decimal-format)要素の名前。省略すると、デフォルトの 10 進形式が使用されます。 + - : Java の [DecimalFormat](https://docs.oracle.com/javase/8/docs/api/java/text/DecimalFormat.html) クラスの書式の文字列。 +- `decimalFormat` (任意) + - : 使用する数値書式を定義する[`xsl:decimal-format`](/ja/docs/Web/XSLT/Element/decimal-format)要素の名前。省略すると、既定の 10 進形式が使用されます。 ### 返値 -新しい形式の数値を表す文字列。 +新しい書式の数値を表す文字列。 -### 注記 +### メモ -この関数は XPath への XSLT 固有の追加です。コア XPath 関数ライブラリの一部ではありません。 +この関数は XPath への XSLT 固有の追加です。コア XPath 関数ライブラリーの一部ではありません。 ### 定義 -[XSLT 1.0 12.3](http://www.w3.org/TR/xslt#function-format-number) +[XSLT 1.0 12.3](https://www.w3.org/TR/1999/REC-xslt-19991116/#function-format-number) -### Gecko のサポート +### Gecko の対応 -サポート済み +対応済み From 9b1dde3195d7774181c3d96532a0ee71399ce69b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 25 Oct 2023 22:29:52 +0900 Subject: [PATCH 20/91] =?UTF-8?q?2023/07/10=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../xslt/transforming_xml_with_xslt/index.md | 233 +++++++++--------- 1 file changed, 120 insertions(+), 113 deletions(-) diff --git a/files/ja/web/xslt/transforming_xml_with_xslt/index.md b/files/ja/web/xslt/transforming_xml_with_xslt/index.md index 632535d3e3db51..e05cddb374f182 100644 --- a/files/ja/web/xslt/transforming_xml_with_xslt/index.md +++ b/files/ja/web/xslt/transforming_xml_with_xslt/index.md @@ -1,129 +1,136 @@ --- title: XSLT による XML の変換 slug: Web/XSLT/Transforming_XML_with_XSLT +l10n: + sourceCommit: b6f343538eac4a803943b4e99b0c0545b372645a --- -{{XSLTRef}} +{{XsltSidebar}} -## [概要](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/An_Overview) +## 概要 -コンテンツとプレゼンテーションの分離は、[XML](/ja/docs/XML) の重要な設計の特徴です。 XML 文書の構造は、コンテンツ自体の個々の側面の間の重要な関係を反映し、明確にするように設計されています。このデータが最終的にどのように提示されるべきかに関する指示を提供する必要はありません。このインテリジェントな構造化は、ますます多くのデータ転送が自動化され、ネットワークでリンクされた非常に異種のマシン間で行われるため、特に重要です。 +[概要](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/An_Overview) -しかし、最終的には XML 文書に格納されているコンテンツの大部分を人間の読者に提示する必要があります。ブラウザは使い慣れた非常に柔軟なインタフェースを提供するため、このようなプレゼンテーションバージョンの XML コンテンツを配信するための理想的なメカニズムです。さまざまな XML テクノロジを利用してゼロから構築されているため、 Firefox は、元の XML 文書とそれを HTML 表示用にスタイル設定してレイアウトするために使用される特殊なスタイルシートの両方を処理するために必要なすべてのメカニズムを組み込んでおり、クライアントサイド処理によるサーバの負荷を軽減します。 +コンテンツとプレゼンテーションの分離は、[XML](/ja/docs/Web/XML) の重要な設計の特徴です。 XML 文書の構造は、このデータが最終的にどのように表現されるべきかを示す必要性に妨げられることなく、コンテンツ自体の個々の側面間の重要な関係を反映し、明確にするように設計されています。このインテリジェントな構造化は、より多くのデータ移行を自動化し、ネットワークでリンクされた異機種間で配置する際に具体的な意味を持ちます。 -現時点で、 Gecko (Firefox のレイアウトエンジン) は二種類の XML 用のスタイルシートに対応しています。基本的な表示方法の制御 — フォント、色、位置、など — については、 Gecko は [CSS](/ja/docs/CSS) を使用します。 CSS1 と CSS2 はよく対応されており、 CSS3 標準への対応は開発中です。 CSS についての更なる情報は、 [Eric Meyer's CSS pages](http://www.meyerweb.com/eric/css/) を参照してください。 +しかし、 XML 文書内に格納されるコンテンツの多くは、最終的には人間の読者に表示する必要があります。ブラウザーは、親しみやすく柔軟性の高いインターフェイスを提供しているため、 XML コンテンツの表示版を提供するための理想的なメカニズムです。さまざまな XML 技術を利用して一から構築された Firefox は、元の XML 文書と、それらを HTML 表示用にスタイル設定およびレイアウトするために使用される特殊なスタイルシートの両方を処理するために必要なすべてのメカニズムをそれ自体に組み込んでおり、クライアントサイドの処理でサーバーの負荷を軽減します。 -ここで注目するのは、 Gecko が対応する二番目の種類のスタイルシート、 XSLT スタイルシートです。 XSLT は eXtensible Stylesheet Language/Transform のことで、名前の通りです。 XSLT ではスタイルシートで最初の XML 文書を二つの意味のある方法、必要に応じてコンテンツを大規模に並べ替えたり、コンテンツを別の形式に変形したりすることで変換します。 (Firefox の場合は、 HTML に変換して表示することができます)。 +現時点で、 Gecko （Firefox のレイアウトエンジン）は 2 種類の XML 用のスタイルシートに対応しています。基本的な表示方法の制御 — フォント、色、位置、など — については、 Gecko は [CSS](/ja/docs/Web/CSS) を使用します。 + +ここでは、Gecko が対応している 2 つ目の種類のスタイルシート、XSLT スタイルシートに注目します。XSLT は eXtensible Stylesheet Language/Transform の略で、この名前は最適です。 XSLT は、スタイルシート作成者が主要な XML 文書を 2 つの重要な方法で変換することができます。コンテンツの操作と並べ替え（必要であれば、コンテンツの並べ替えも含みます）、およびコンテンツの異なる形式への変換（Firefox の場合は、ブラウザーで表示できる HTML への変換）です。 ## XSLT/XPath リファレンス -### [要素](/ja/docs/Web/XSLT/Elements) - -- [xsl:apply-imports](/ja/docs/Web/XSLT/Elements/apply-imports) _(対応済み)_ -- [xsl:apply-templates](/ja/docs/Web/XSLT/Elements/apply-templates) _(対応済み)_ -- [xsl:attribute](/ja/docs/Web/XSLT/Elements/attribute) _(対応済み)_ -- [xsl:attribute-set](/ja/docs/Web/XSLT/Elements/attribute-set) _(対応済み)_ -- [xsl:call-template](/ja/docs/Web/XSLT/Elements/call-template) _(対応済み)_ -- [xsl:choose](/ja/docs/Web/XSLT/Elements/choose) _(対応済み)_ -- [xsl:comment](/ja/docs/Web/XSLT/Elements/comment) _(対応済み)_ -- [xsl:copy](/ja/docs/Web/XSLT/Elements/copy) _(対応済み)_ -- [xsl:copy-of](/ja/docs/Web/XSLT/Elements/copy-of) _(対応済み)_ -- [xsl:decimal-format](/ja/docs/Web/XSLT/Elements/decimal-format) _(対応済み)_ -- [xsl:element](/ja/docs/Web/XSLT/Elements/element) _(対応済み)_ -- [xsl:fallback](/ja/docs/Web/XSLT/Elements/fallback) _(未対応)_ -- [xsl:for-each](/ja/docs/Web/XSLT/Elements/for-each) _(対応済み)_ -- [xsl:if](/ja/docs/Web/XSLT/Elements/if) _(対応済み)_ -- [xsl:import](/ja/docs/Web/XSLT/Elements/import) _(ほぼ対応済み)_ -- [xsl:include](/ja/docs/Web/XSLT/Elements/include) _(対応済み)_ -- [xsl:key](/ja/docs/Web/XSLT/Elements/key) _(対応済み)_ -- [xsl:message](/ja/docs/Web/XSLT/Elements/message) _(対応済み)_ -- [xsl:namespace-alias](/ja/docs/Web/XSLT/Elements/namespace-alias) _(未対応)_ -- [xsl:number](/ja/docs/Web/XSLT/Elements/number) _(一部対応済み)_ -- [xsl:otherwise](/ja/docs/Web/XSLT/Elements/otherwise) _(対応済み)_ -- [xsl:output](/ja/docs/Web/XSLT/Elements/output) _(一部対応済み)_ -- [xsl:param](/ja/docs/Web/XSLT/Elements/param) _(対応済み)_ -- [xsl:preserve-space](/ja/docs/Web/XSLT/Elements/preserve-space) _(対応済み)_ -- [xsl:processing-instruction](/ja/docs/Web/XSLT/Elements/processing-instruction) -- [xsl:sort](/ja/docs/Web/XSLT/Elements/sort) _(対応済み)_ -- [xsl:strip-space](/ja/docs/Web/XSLT/Elements/strip-space) _(対応済み)_ -- [xsl:stylesheet](/ja/docs/Web/XSLT/Elements/stylesheet) _(一部対応済み)_ -- [xsl:template](/ja/docs/Web/XSLT/Elements/template) _(対応済み)_ -- [xsl:text](/ja/docs/Web/XSLT/Elements/text) _(一部対応済み)_ -- [xsl:transform](/ja/docs/Web/XSLT/Elements/transform) _(対応済み)_ -- [xsl:value-of](/ja/docs/Web/XSLT/Elements/value-of) _(一部対応済み)_ -- [xsl:variable](/ja/docs/Web/XSLT/Elements/variable) _(対応済み)_ -- [xsl:when](/ja/docs/Web/XSLT/Elements/when) _(対応済み)_ -- [xsl:with-param](/ja/docs/Web/XSLT/Elements/with-param) _(対応済み)_ - -### [軸](/ja/docs/XPath/Axes) - -- [ancestor](/ja/docs/XPath/Axes/ancestor) -- [ancestor-or-self](/ja/docs/XPath/Axes/ancestor-or-self) -- [attribute](/ja/docs/XPath/Axes/attribute) -- [child](/ja/docs/XPath/Axes/child) -- [descendant](/ja/docs/XPath/Axes/descendant) -- [descendant-or-self](/ja/docs/XPath/Axes/descendant-or-self) -- [following](/ja/docs/XPath/Axes/following) -- [following-sibling](/ja/docs/XPath/Axes/following-sibling) -- [namespace](/ja/docs/XPath/Axes/namespace) _(未対応)_ -- [parent](/ja/docs/XPath/Axes/parent) -- [preceding](/ja/docs/XPath/Axes/preceding) -- [preceding-sibling](/ja/docs/XPath/Axes/preceding-sibling) -- [self](/ja/docs/XPath/Axes/self) - -### [関数](/ja/docs/XPath/Functions) - -- [boolean()](/ja/docs/XPath/Functions/boolean) _(対応済み)_ -- [ceiling()](/ja/docs/XPath/Functions/ceiling) _(対応済み)_ -- [concat()](/ja/docs/XPath/Functions/concat) _(対応済み)_ -- [contains()](/ja/docs/XPath/Functions/contains) _(対応済み)_ -- [count()](/ja/docs/XPath/Functions/count) _(対応済み)_ -- [current()](/ja/docs/XPath/Functions/current) _(対応済み)_ -- [document()](/ja/docs/XPath/Functions/document) _(対応済み)_ -- [element-available()](/ja/docs/XPath/Functions/element-available) _(対応済み)_ -- [false()](/ja/docs/XPath/Functions/false) _(対応済み)_ -- [floor()](/ja/docs/XPath/Functions/floor) _(対応済み)_ -- [format-number()](/ja/docs/XPath/Functions/format-number) _(対応済み)_ -- [function-available()](/ja/docs/XPath/Functions/function-available) _(対応済み)_ -- [generate-id()](/ja/docs/XPath/Functions/generate-id) _(対応済み)_ -- [id()](/ja/docs/XPath/Functions/id) _(partially 対応済み)_ -- [key()](/ja/docs/XPath/Functions/key) _(対応済み)_ -- [lang()](/ja/docs/XPath/Functions/lang) _(対応済み)_ -- [last()](/ja/docs/XPath/Functions/last) _(対応済み)_ -- [local-name()](/ja/docs/XPath/Functions/local-name) _(対応済み)_ -- [name()](/ja/docs/XPath/Functions/name) _(対応済み)_ -- [namespace-uri()](/ja/docs/XPath/Functions/namespace-uri) _(対応済み)_ -- [normalize-space()](/ja/docs/XPath/Functions/normalize-space) _(対応済み)_ -- [not()](/ja/docs/XPath/Functions/not) _(対応済み)_ -- [number()](/ja/docs/XPath/Functions/number) _(対応済み)_ -- [position()](/ja/docs/XPath/Functions/position) _(対応済み)_ -- [round()](/ja/docs/XPath/Functions/round) _(対応済み)_ -- [starts-with()](/ja/docs/XPath/Functions/starts-with) _(対応済み)_ -- [string()](/ja/docs/XPath/Functions/string) _(対応済み)_ -- [string-length()](/ja/docs/XPath/Functions/string-length) _(対応済み)_ -- [substring()](/ja/docs/XPath/Functions/substring) _(対応済み)_ -- [substring-after()](/ja/docs/XPath/Functions/substring-after) _(対応済み)_ -- [substring-before()](/ja/docs/XPath/Functions/substring-before) _(対応済み)_ -- [sum()](/ja/docs/XPath/Functions/sum) _(対応済み)_ -- [system-property()](/ja/docs/XPath/Functions/system-property) _(対応済み)_ -- [translate()](/ja/docs/XPath/Functions/translate) _(対応済み)_ -- [true()](/ja/docs/XPath/Functions/true) _(対応済み)_ -- [unparsed-entity-url()](/ja/docs/XPath/Functions/unparsed-entity-url) _(not 対応済み)_ - -## [さらなる読み物](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading) - -- [書籍](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading#Books) -- [オンライン](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading#Online) - - - [The World Wide Web Consortium](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading#The_World_Wide_Web_Consortium) - - [Portals](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading#Portals) - - [Articles](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading#Articles) - - [Tutorials/Examples](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading#Tutorials.2FExamples) - - [Mailing Lists/Newsgroups](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading#Mailing_Lists.2FNewsgroups) - -## [リソース](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/Resources) - -## [索引](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/Index) +### 要素 + +[要素](/ja/docs/Web/XSLT/Element) + +- [xsl:apply-imports](/ja/docs/Web/XSLT/Element/apply-imports) _(対応済み)_ +- [xsl:apply-templates](/ja/docs/Web/XSLT/Element/apply-templates) _(対応済み)_ +- [xsl:attribute](/ja/docs/Web/XSLT/Element/attribute) _(対応済み)_ +- [xsl:attribute-set](/ja/docs/Web/XSLT/Element/attribute-set) _(対応済み)_ +- [xsl:call-template](/ja/docs/Web/XSLT/Element/call-template) _(対応済み)_ +- [xsl:choose](/ja/docs/Web/XSLT/Element/choose) _(対応済み)_ +- [xsl:comment](/ja/docs/Web/XSLT/Element/comment) _(対応済み)_ +- [xsl:copy](/ja/docs/Web/XSLT/Element/copy) _(対応済み)_ +- [xsl:copy-of](/ja/docs/Web/XSLT/Element/copy-of) _(対応済み)_ +- [xsl:decimal-format](/ja/docs/Web/XSLT/Element/decimal-format) _(対応済み)_ +- [xsl:element](/ja/docs/Web/XSLT/Element/element) _(対応済み)_ +- [xsl:fallback](/ja/docs/Web/XSLT/Element/fallback) _(未対応)_ +- [xsl:for-each](/ja/docs/Web/XSLT/Element/for-each) _(対応済み)_ +- [xsl:if](/ja/docs/Web/XSLT/Element/if) _(対応済み)_ +- [xsl:import](/ja/docs/Web/XSLT/Element/import) _(ほぼ対応済み)_ +- [xsl:include](/ja/docs/Web/XSLT/Element/include) _(対応済み)_ +- [xsl:key](/ja/docs/Web/XSLT/Element/key) _(対応済み)_ +- [xsl:message](/ja/docs/Web/XSLT/Element/message) _(対応済み)_ +- [xsl:namespace-alias](/ja/docs/Web/XSLT/Element/namespace-alias) _(未対応)_ +- [xsl:number](/ja/docs/Web/XSLT/Element/number) _(一部対応済み)_ +- [xsl:otherwise](/ja/docs/Web/XSLT/Element/otherwise) _(対応済み)_ +- [xsl:output](/ja/docs/Web/XSLT/Element/output) _(一部対応済み)_ +- [xsl:param](/ja/docs/Web/XSLT/Element/param) _(対応済み)_ +- [xsl:preserve-space](/ja/docs/Web/XSLT/Element/preserve-space) _(対応済み)_ +- [xsl:processing-instruction](/ja/docs/Web/XSLT/Element/processing-instruction) +- [xsl:sort](/ja/docs/Web/XSLT/Element/sort) _(対応済み)_ +- [xsl:strip-space](/ja/docs/Web/XSLT/Element/strip-space) _(対応済み)_ +- [xsl:stylesheet](/ja/docs/Web/XSLT/Element/stylesheet) _(一部対応済み)_ +- [xsl:template](/ja/docs/Web/XSLT/Element/template) _(対応済み)_ +- [xsl:text](/ja/docs/Web/XSLT/Element/text) _(一部対応済み)_ +- [xsl:transform](/ja/docs/Web/XSLT/Element/transform) _(対応済み)_ +- [xsl:value-of](/ja/docs/Web/XSLT/Element/value-of) _(一部対応済み)_ +- [xsl:variable](/ja/docs/Web/XSLT/Element/variable) _(対応済み)_ +- [xsl:when](/ja/docs/Web/XSLT/Element/when) _(対応済み)_ +- [xsl:with-param](/ja/docs/Web/XSLT/Element/with-param) _(対応済み)_ + +### 軸 + +[軸](/ja/docs/Web/XPath/Axes) + +- [ancestor](/ja/docs/Web/XPath/Axes/ancestor) +- [ancestor-or-self](/ja/docs/Web/XPath/Axes/ancestor-or-self) +- [attribute](/ja/docs/Web/XPath/Axes/attribute) +- [child](/ja/docs/Web/XPath/Axes/child) +- [descendant](/ja/docs/Web/XPath/Axes/descendant) +- [descendant-or-self](/ja/docs/Web/XPath/Axes/descendant-or-self) +- [following](/ja/docs/Web/XPath/Axes/following) +- [following-sibling](/ja/docs/Web/XPath/Axes/following-sibling) +- [namespace](/ja/docs/Web/XPath/Axes/namespace) _(未対応)_ +- [parent](/ja/docs/Web/XPath/Axes/parent) +- [preceding](/ja/docs/Web/XPath/Axes/preceding) +- [preceding-sibling](/ja/docs/Web/XPath/Axes/preceding-sibling) +- [self](/ja/docs/Web/XPath/Axes/self) + +### 関数 + +[関数](/ja/docs/Web/XPath/Functions) + +- [boolean()](/ja/docs/Web/XPath/Functions/boolean) _(対応済み)_ +- [ceiling()](/ja/docs/Web/XPath/Functions/ceiling) _(対応済み)_ +- [concat()](/ja/docs/Web/XPath/Functions/concat) _(対応済み)_ +- [contains()](/ja/docs/Web/XPath/Functions/contains) _(対応済み)_ +- [count()](/ja/docs/Web/XPath/Functions/count) _(対応済み)_ +- [current()](/ja/docs/Web/XPath/Functions/current) _(対応済み)_ +- [document()](/ja/docs/Web/XPath/Functions/document) _(対応済み)_ +- [element-available()](/ja/docs/Web/XPath/Functions/element-available) _(対応済み)_ +- [false()](/ja/docs/Web/XPath/Functions/false) _(対応済み)_ +- [floor()](/ja/docs/Web/XPath/Functions/floor) _(対応済み)_ +- [format-number()](/ja/docs/Web/XPath/Functions/format-number) _(対応済み)_ +- [function-available()](/ja/docs/Web/XPath/Functions/function-available) _(対応済み)_ +- [generate-id()](/ja/docs/Web/XPath/Functions/generate-id) _(対応済み)_ +- [id()](/ja/docs/Web/XPath/Functions/id) _(partially 対応済み)_ +- [key()](/ja/docs/Web/XPath/Functions/key) _(対応済み)_ +- [lang()](/ja/docs/Web/XPath/Functions/lang) _(対応済み)_ +- [last()](/ja/docs/Web/XPath/Functions/last) _(対応済み)_ +- [local-name()](/ja/docs/Web/XPath/Functions/local-name) _(対応済み)_ +- [name()](/ja/docs/Web/XPath/Functions/name) _(対応済み)_ +- [namespace-uri()](/ja/docs/Web/XPath/Functions/namespace-uri) _(対応済み)_ +- [normalize-space()](/ja/docs/Web/XPath/Functions/normalize-space) _(対応済み)_ +- [not()](/ja/docs/Web/XPath/Functions/not) _(対応済み)_ +- [number()](/ja/docs/Web/XPath/Functions/number) _(対応済み)_ +- [position()](/ja/docs/Web/XPath/Functions/position) _(対応済み)_ +- [round()](/ja/docs/Web/XPath/Functions/round) _(対応済み)_ +- [starts-with()](/ja/docs/Web/XPath/Functions/starts-with) _(対応済み)_ +- [string()](/ja/docs/Web/XPath/Functions/string) _(対応済み)_ +- [string-length()](/ja/docs/Web/XPath/Functions/string-length) _(対応済み)_ +- [substring()](/ja/docs/Web/XPath/Functions/substring) _(対応済み)_ +- [substring-after()](/ja/docs/Web/XPath/Functions/substring-after) _(対応済み)_ +- [substring-before()](/ja/docs/Web/XPath/Functions/substring-before) _(対応済み)_ +- [sum()](/ja/docs/Web/XPath/Functions/sum) _(対応済み)_ +- [system-property()](/ja/docs/Web/XPath/Functions/system-property) _(対応済み)_ +- [translate()](/ja/docs/Web/XPath/Functions/translate) _(対応済み)_ +- [true()](/ja/docs/Web/XPath/Functions/true) _(対応済み)_ +- [unparsed-entity-url()](/ja/docs/Web/XPath/Functions/unparsed-entity-url) _(not 対応済み)_ + +## さらなる読み物 + +[さらなる読み物](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading) + +- [書籍](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading#書籍) +- [デジタル](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading#デジタル) + + - [ウェブサイト](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading#ウェブサイト) + - [記事](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading#記事) + - [チュートリアル／例](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading#チュートリアル／例) + - [その他](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading#その他) ## 原典情報 From ae0766ff54fd8a65032e2cc1c0cfee529a3c41a5 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 25 Oct 2023 22:43:06 +0900 Subject: [PATCH 21/91] =?UTF-8?q?2023/07/25=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/xpath/functions/key/index.md | 29 +++++++++++------------ 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/files/ja/web/xpath/functions/key/index.md b/files/ja/web/xpath/functions/key/index.md index c10bbf5528697e..831cf1a3ff8b99 100644 --- a/files/ja/web/xpath/functions/key/index.md +++ b/files/ja/web/xpath/functions/key/index.md @@ -1,42 +1,41 @@ --- title: key slug: Web/XPath/Functions/key +l10n: + sourceCommit: b6f343538eac4a803943b4e99b0c0545b372645a --- -{{ XsltRef() }} +{{XsltSidebar}} -`key`関数は、与えられたキーに対して与えられた値を持つノードのノード集合を返します。 +`key` 関数は、指定されたキーに対して指定された値を持つノードのノード集合を返します。 ### 構文 -``` -key(keyname ,value ) +```plain +key( keyname, value ) ``` ### 引数 - `keyname` - - : 使用される[`xsl:key`](/ja/docs/XSLT/Elements/key)要素の名前を含む文字列。 - - - + - : 使用される [`xsl:key`](/ja/docs/Web/XSLT/Element/key) 要素の名前を含む文字列。 - `value` - - : 返されるノード集合には、与えられたキーに対してこの値を持つすべてのノードが含まれます。 + - : 返されるノード集合には、指定されたキーに対してこの値を持つすべてのノードが含まれます。 ### 返値 -ノード集合。 +ノード集合です。 -### 注記 +### メモ -- [`xsl:key`](/ja/docs/XSLT/Elements/key)要素は、指定された要素がキーと一致するために使用される属性を定義します +- [`xsl:key`](/ja/docs/Web/XSLT/Element/key) 要素は、指定された要素がキーと一致するために使用される属性を定義します この関数は XPath への XSLT 固有の追加です。コア XPath 関数ライブラリの一部ではありません。 ### 定義 -[XSLT 1.0 12.2](http://www.w3.org/TR/xslt#function-key) +[XSLT 1.0 12.2](https://www.w3.org/TR/1999/REC-xslt-19991116/#function-key) -### Gecko のサポート +### Gecko の対応 -サポート済み +対応済み。 From 05a5146acd30cd95449c134cc95aced8445df0c0 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 25 Oct 2023 22:53:41 +0900 Subject: [PATCH 22/91] =?UTF-8?q?2023/07/25=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/xpath/functions/number/index.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/files/ja/web/xpath/functions/number/index.md b/files/ja/web/xpath/functions/number/index.md index 13bd46bec2ee56..e7ab1f2155c2de 100644 --- a/files/ja/web/xpath/functions/number/index.md +++ b/files/ja/web/xpath/functions/number/index.md @@ -1,15 +1,17 @@ --- title: number slug: Web/XPath/Functions/number +l10n: + sourceCommit: 4a6dacf8c68925a8538585be3b2728bcb271241e --- -{{ XsltRef() }} +{{XsltSidebar}} `number` 関数はオブジェクトを数値に変換し、その数値を返します。 ### 構文 -``` +```plain number( [object] ) ``` @@ -31,7 +33,7 @@ number( [object] ) ### 定義 -[XPath 1.0 4.4](https://www.w3.org/TR/xpath#function-number) +[XPath 1.0 4.4](https://www.w3.org/TR/1999/REC-xpath-19991116/#function-number) ### Gecko での対応 From 0439cc4065f10ac09c37446dcbec0dbcaafb8737 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 25 Oct 2023 23:03:00 +0900 Subject: [PATCH 23/91] =?UTF-8?q?2023/07/25=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/xpath/functions/sum/index.md | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/files/ja/web/xpath/functions/sum/index.md b/files/ja/web/xpath/functions/sum/index.md index 502e5f3e00ce55..486f4620e71110 100644 --- a/files/ja/web/xpath/functions/sum/index.md +++ b/files/ja/web/xpath/functions/sum/index.md @@ -1,34 +1,36 @@ --- title: sum slug: Web/XPath/Functions/sum +l10n: + sourceCommit: 4a6dacf8c68925a8538585be3b2728bcb271241e --- -{{ XsltRef() }} +{{XsltSidebar}} -`sum` 関数は、与えられたノード集合内のそれぞれのノードの数値としての値を合計した数値を返します。 +`sum` 関数は、指定されたノード集合内のそれぞれのノードの数値としての値を合計した数値を返します。 ### 構文 -``` -sum(node-set ) +```plain +sum(node-set) ``` ### 引数 - `node-set` - - : 評価されるノード集合。 このノード集合内のそれぞれのノードが [number()](/ja/XPath/Functions/number) 関数に渡されたかのように評価され、その結果として得られた数値の合計が返される。 + - : 評価されるノード集合。 このノード集合内のそれぞれのノードが [number()](/ja/XPath/Functions/number) 関数に渡されたかのように評価され、その結果として得られた数値の合計が返されます。 ### 返値 -数値。 +数値です。 -### 注 +### メモ -_(なし)_ +なし。 ### 定義 -[XPath 1.0 4.3](https://www.w3.org/TR/xpath#function-sum) +[XPath 1.0 4.3](https://www.w3.org/TR/1999/REC-xpath-19991116/#function-sum) ### Gecko での対応 From 23fe496d08f2dff4a58475894ff3c911021ebb1b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 25 Oct 2023 23:08:20 +0900 Subject: [PATCH 24/91] =?UTF-8?q?2023/07/25=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/xpath/functions/sum/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/xpath/functions/sum/index.md b/files/ja/web/xpath/functions/sum/index.md index 486f4620e71110..41f8077f7966e8 100644 --- a/files/ja/web/xpath/functions/sum/index.md +++ b/files/ja/web/xpath/functions/sum/index.md @@ -18,7 +18,7 @@ sum(node-set) ### 引数 - `node-set` - - : 評価されるノード集合。 このノード集合内のそれぞれのノードが [number()](/ja/XPath/Functions/number) 関数に渡されたかのように評価され、その結果として得られた数値の合計が返されます。 + - : 評価されるノード集合。 このノード集合内のそれぞれのノードが [number()](/ja/docs/Web/XPath/Functions/number) 関数に渡されたかのように評価され、その結果として得られた数値の合計が返されます。 ### 返値 From e03972dd55c12fb9feb76ededd60700a69dd148e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 25 Oct 2023 23:43:12 +0900 Subject: [PATCH 25/91] =?UTF-8?q?2023/07/10=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/xpath/index.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/files/ja/web/xpath/index.md b/files/ja/web/xpath/index.md index eeaf1ef41e30f0..b487451a2198a4 100644 --- a/files/ja/web/xpath/index.md +++ b/files/ja/web/xpath/index.md @@ -1,9 +1,11 @@ --- title: XPath slug: Web/XPath +l10n: + sourceCommit: b6f343538eac4a803943b4e99b0c0545b372645a --- -{{XSLTRef}} +{{XsltSidebar}} XPath は XML Path Language の略称です。非 XML 構文を使って、柔軟な方法で [XML](/ja/docs/Web/XML/XML_introduction) 文書の様々な部分をアドレッシングする（指し示す）ことができます。さらに、文書中で指し示されたノードがパターンに一致するかどうかの判定を行うこともできます。 @@ -11,7 +13,7 @@ XPath は主に [XSLT](/ja/docs/Web/XSLT) で使われていますが、 [HTML]( XPath は XML 文書の階層構造を辿るために（URL のような）パス表記を使います。また、URI や XML 属性値の中で使えるように非 XML 構文を採用しています。 -> **メモ:** XPath の対応状況は大きく異なります。 Firefox は合理的にうまく対応しています（対応をさらに改善する計画はありません）が、他のブラウザーではそれほど実装されていません。ポリフィルが必要な場合は、[js-xpath](http://nchc.dl.sourceforge.net/project/js-xpath/js-xpath/1.0.0/xpath.js)または [wicked-good-xpath](https://github.com/google/wicked-good-xpath) を検討してください。 +> **メモ:** XPath の対応状況は大きく異なります。 Firefox は合理的にうまく対応しています（対応をさらに改善する計画はありません）が、他のブラウザーではそれほど実装されていません。ポリフィルが必要な場合は、[js-xpath](https://sourceforge.net/projects/js-xpath/files/js-xpath/1.0.0/xpath.js/download) または [wicked-good-xpath](https://github.com/google/wicked-good-xpath) を検討してください。 ## ドキュメント @@ -30,8 +32,6 @@ XPath は XML 文書の階層構造を辿るために（URL のような）パ ## ツール -- [XMLQuire (以前は SketchPath と呼ばれていた)](http://qutoric.com/xmlquire/) - - : グラフィカルな XPath ビルダー／デバッガー (.NET) です。 - [XPath tester](https://extendsclass.com/xpath-tester.html) - : オンラインの XPath ビルダー／デバッガーです。 @@ -39,5 +39,3 @@ XPath は XML 文書の階層構造を辿るために（URL のような）パ - [XSLT](/ja/docs/Web/XSLT), [XML](/ja/docs/Web/XML), [DOM](/ja/docs/Web/API/Document_Object_Model) - [CSS セレクターと XPath の比較](/ja/docs/Web/XPath/Comparison_with_CSS_selectors) - - From ee7e763d0e2ef9c76975e00982ea2b659150b98c Mon Sep 17 00:00:00 2001 From: queuek Date: Sun, 29 Oct 2023 11:13:25 +0900 Subject: [PATCH 26/91] fix link and text on Japanese loops and iteration page --- .../guide/loops_and_iteration/index.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/files/ja/web/javascript/guide/loops_and_iteration/index.md b/files/ja/web/javascript/guide/loops_and_iteration/index.md index e379168c911a5c..16e0744c0548cc 100644 --- a/files/ja/web/javascript/guide/loops_and_iteration/index.md +++ b/files/ja/web/javascript/guide/loops_and_iteration/index.md @@ -22,14 +22,14 @@ for (let step = 0; step < 5; step++) { JavaScript で提供されるループ文は以下のとおりです : -- [for 文](#for_statement) -- [do...while 文](#do...while_statement) -- [while 文](#while_statement) -- [label 文](#label_statement) -- [break 文](#break_statement) -- [continue 文](#continue_statement) -- [for...in 文](#for...in_statement) -- [for...of 文](#for...of_statement) +- [for 文](#for_文) +- [do...while 文](#do...while_文) +- [while 文](#while_文) +- [ラベルつき 文](#ラベルつき文) +- [break 文](#break_文) +- [continue 文](#continue_文) +- [for...in 文](#for...in_文) +- [for...of 文](#for...of_文) ## `for` 文 From 6481c5de97e49ad40a247a379510ae8ac1a0103a Mon Sep 17 00:00:00 2001 From: A1lo Date: Sun, 29 Oct 2023 15:36:51 +0800 Subject: [PATCH 27/91] zh-cn: sync the translation of runtime.sendMessage() (#16724) Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- .../api/runtime/sendmessage/index.md | 101 ++++++++++-------- .../webextensions/content_scripts/index.md | 4 +- 2 files changed, 59 insertions(+), 46 deletions(-) diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/runtime/sendmessage/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/runtime/sendmessage/index.md index 082f9a7de7aa70..76f612f5d24c53 100644 --- a/files/zh-cn/mozilla/add-ons/webextensions/api/runtime/sendmessage/index.md +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/runtime/sendmessage/index.md @@ -1,83 +1,97 @@ --- title: runtime.sendMessage() slug: Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage +l10n: + sourceCommit: d6856a051d0ba078ec1d24b80908b1ca174917db --- -{{AddonSidebar()}}向你的扩展或其他扩展发送单条消息。如果想发给你自己的扩展，则省略 `extensionId` 参数。扩展中所有页面的{{WebExtAPIRef('runtime.onMessage')}}将会被触发，除了调用`runtime.sendMessage` 的页面。 +{{AddonSidebar()}} -如果发送给其他扩展，则将参数 `extensionId` 设置为其他扩展的 ID。其他扩展的 {{WebExtAPIRef('runtime.onMessageExternal')}} 将会被触发。 +向你的扩展或其他扩展中的事件监听器发送一条消息。 -此接口不能给 content script 发消息，如果要给 content script 发消息，请使用 {{WebExtAPIRef('tabs.sendMessage')}}。 +如果想发给你自己的扩展，则省略 `extensionId` 参数。扩展中除调用 `runtime.sendMessage` 的页面以外的所有页面都会触发 {{WebExtAPIRef('runtime.onMessage')}} 事件。 -这是个异步方法，将返回一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)。 +如果要发送给其他扩展，则将参数 `extensionId` 设置为其他扩展的 ID。其他扩展的 {{WebExtAPIRef('runtime.onMessageExternal')}} 将会被触发。默认情况下，你的扩展可以与其自身以及其他任何扩展（通过 `extensionId` 定义）传递消息。但是，可以使用 [`externally_connectable`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/externally_connectable) 来限制与特定扩展的通信。 -Syntax +扩展不能使用此方法给内容脚本发送消息。要给内容脚本发送消息，请使用 {{WebExtAPIRef('tabs.sendMessage')}}。 -```js -var sending = browser.runtime.sendMessage( - extensionId, // optional string - message, // any - options, // optional object -); +这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。 + +> **备注：** 你还可以使用[基于连接的方法来传递消息](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#基于连接的消息传递)。 + +## 语法 + +```js-nolint +let sending = browser.runtime.sendMessage( + extensionId, // 可选字符串 + message, // 任何值 + options, // 可选对象 +) ``` ### 参数 -- `extensionId`{{optional_inline}} - - : `string`. 若你想要发给不同的扩展，这里传入接收方的扩展 ID。The ID of the extension to send the message to. Include this to send the message to a different extension. If the intended recipient has set an ID explicitly using the [applications](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications) key in manifest.json, then `extensionId` should have this value. Otherwise it should be have the ID that was generated for the intended recipient. 若此省略此参数，则发送给自己的扩展。 +- `extensionId` {{optional_inline}} + + - : `string`。要将消息发送到的扩展的 ID。包含该参数可将消息发送到其他扩展。如果接收方使用 manifest.json 中的 [browser_specific_settings](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings) 键显式设置了 ID，则 `extensionId` 应该设为该值。否则，它应该是为接收方生成的 ID。 + + 如果省略了 `extensionId`，则消息会被发送到你自己的扩展。 + - `message` - - : `any`. 任何可以序列化成 JSON 的东西。 -- `options`{{optional_inline}} - - : `object`. - - `includeTlsChannelId`{{optional_inline}} - - : `boolean`. Whether the TLS channel ID will be passed into {{WebExtAPIRef('runtime.onMessageExternal')}} for processes that are listening for the connection event. - - `toProxyScript` {{optional_inline}} - - : `boolean`. Must be True if the message is intended for a PAC file loaded using the {{WebExtAPIRef("proxy")}} API. + - : `any`。可以使用结构化克隆算法序列化的对象。（参见[数据克隆算法](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities#数据克隆算法)）。 +- `options` {{optional_inline}} -根据给出的参数不同，API 遵循如下规则： + - : `object`。 -- **只有 1 个参数**：将会被当做 message 发送给自己的扩展。 + - `includeTlsChannelId` {{optional_inline}} + + - : `boolean`。是否将 TLS 通道 ID 传递给正在监听连接事件的进程的 {{WebExtAPIRef('runtime.onMessageExternal')}}。 + + 只有基于 Chromium 的浏览器支持此选项。 + +根据给出的参数不同，API 有时并不明确。此时会使用以下规则： + +- **只有 1 个参数**：为要发送的消息，且该消息会在内部传递。 - **有 2 个参数**： - - 若第二个参数符合下面的规则，将会被当做 `(message, options)`，将消息发送给自己的扩展： + - 若第二个参数符合下面的规则，则参数将会被解释为 `(message, options)`，且消息会在内部传递： - 1. 一个合法的配置对象（也就是说这个对象只包含 options 参数支持的属性） + 1. 一个有效的 `options` 对象（也就是说，它是一个仅包含浏览器支持的 `options` 属性的对象） 2. null 3. undefined - - 否则，将会被当做 `(extensionId, message)`。消息将会给发送给 `extensionId` 指定 ID 的扩展 + - 否则，参数将会被解释为 `(extensionId, message)`。消息将会发送给由 `extensionId` 标识的扩展。 -- **有 3 个参数**：将会被当做 `(extensionId, message, options)`. 消息将会给发送给 `extensionId` 指定 ID 的扩展 +- **有 3 个参数**：将会被解释为 `(extensionId, message, options)`。消息将会给发送给由 `extensionId` 标识的扩展。 -> **备注：** 在 Firefox 55 之前，只给出 2 个参数时，规则会有所不同： -> Under the old rules, if the first argument was a string, it was treated as the `extensionId`, with the message as the second argument. This meant that if you called `sendMessage()` with arguments like `("my-message", {})`, then it would send an empty message to the extension identified by "my-message". Under the new rules, with these arguments you would send the message "my-message" internally, with an empty options object. +注意，在 Firefox 55 之前，2 个参数的情况下的规则是不同的。在旧规则下，如果第一个参数是字符串，则将其视为 `extensionId`，第二个参数作为消息。这意味着如果你使用 `("my-message", {})` 这样的参数调用 `sendMessage()`，那么它将向标识为“my-message”的扩展发送空消息。根据新规则，使用这样的参数，将会是在带有一个空的 options 对象的情况下，在内部发送消息“my-message”。 -### Return value +### 返回值 -返回一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)。若接收方响应，Promise 将会变为 fulfilled 并且返回接收方响应的 JSON 对象（数字、字符串、数组、true/false 都是合法的 JSON 对象）。否则，Promise 会变为 fulfilled 但是不返回任何参数。如果发生了连接错误，Promise 将会变为 rejected 并返回一个错误消息。 +一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)。若接收方发送了响应，Promise 将会兑现为该响应。否则，它将不带任何参数兑现。如果连接到扩展时发生了错误，则 Promise 将以一个错误消息拒绝。 -## Browser compatibility +## 浏览器兼容性 {{Compat}} -## Examples +## 示例 -Here's a content script that sends a message to the background script when the user clicks the content window. The message payload is `{greeting: "Greeting from the content script"}`, and the sender also expects to get a response, which is handled in the `handleResponse` function: +这是一个内容脚本，当用户点击内容窗口时，会向后台脚本发送一条消息。消息载荷是 `{greeting: "来自内容脚本的问候"}`，发送者还期望得到一个响应，该响应在 `handleResponse` 函数中处理： ```js // content-script.js function handleResponse(message) { - console.log(`Message from the background script: ${message.response}`); + console.log(`来自后台脚本的消息：${message.response}`); } function handleError(error) { - console.log(`Error: ${error}`); + console.log(`错误：${error}`); } function notifyBackgroundPage(e) { - var sending = browser.runtime.sendMessage({ - greeting: "Greeting from the content script", + const sending = browser.runtime.sendMessage({ + greeting: "来自内容脚本的问候", }); sending.then(handleResponse, handleError); } @@ -85,24 +99,23 @@ function notifyBackgroundPage(e) { window.addEventListener("click", notifyBackgroundPage); ``` -The corresponding background script looks like this: +对应的后台脚本如下所示： ```js // background-script.js - function handleMessage(request, sender, sendResponse) { - console.log("Message from the content script: " + request.greeting); - sendResponse({ response: "Response from background script" }); + console.log(`内容脚本发送了一条消息：${request.greeting}`); + sendResponse({ response: "来自后台脚本的响应" }); } browser.runtime.onMessage.addListener(handleMessage); ``` +> **备注：** 对于 Firefox 附加组件，建议使用返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的方法，而不是使用 `sendResponse()`。使用 Promise 的示例可在 {{WebExtAPIRef('runtime.onMessage')}} 监听器的[“示例”小节](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage#示例)中找到。 + {{WebExtExamples}} -> **备注：** This API is based on Chromium's [`chrome.runtime`](https://developer.chrome.com/extensions/runtime#method-sendMessage) API. This documentation is derived from [`runtime.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/runtime.json) in the Chromium code. -> -> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License. +> **备注：** 此 API 基于 Chromium 的 [`chrome.runtime`](https://developer.chrome.com/docs/extensions/reference/runtime/#method-sendMessage) API。本文档源自 Chromium 代码中的 [`runtime.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/runtime.json)。 @@ -289,9 +306,26 @@ You can include links to several different icons on the same page, and the brows ``` +### 미디어 쿼리를 이용하여 조건에 맞는 리소스 로드하기 + +미디어 유형이나 쿼리를 `media` 특성 안에 제공할 수 있습니다. 이 리소스는 미디어 조건이 참일 경우에만 로드됩니다. + +```html + + + + +``` + ### 스타일 시트 load 이벤트 -당신은 load 이벤트를 통해 스타일시트가 언제 로드되는지 확인할수 있습니다. 비슷한 방법으로, 당신은 error 이벤트를 통해 스타일시트를 처리하는 도중 에러가 발생했는지 확인할 수 있습니다: +당신은 load 이벤트를 통해 스타일시트가 언제 로드되는지 확인할수 있습니다. 비슷한 방법으로, 당신은 error 이벤트를 통해 스타일시트를 처리하는 도중 에러가 발생했는지 확인할 수 있습니다. ```html - - -``` +
        +

        Switch to tab

        +
        +
        +
    -Here is a summary of the above does: + + + + ``` -1. The menu items are declared. -2. An empty `div` with the ID `tabs-list` is declared to contain the list of tabs. -3. tabs.js is called. + 它做了这些事情： -### tabs.js + 1. 声明菜单项。 + 2. 声明一个 ID 为 `tabs-list` 的空 `div` 以包含标签页列表。 + 3. 调用 `tabs.js`。 -In [tabs.js](https://github.com/mdn/webextensions-examples/blob/main/tabs-tabs-tabs/tabs.js), we’ll see how the list of tabs is built and added to the popup. +- tabs.js + - : 在 [`tabs.js`](https://github.com/mdn/webextensions-examples/blob/main/tabs-tabs-tabs/tabs.js) 文件中，我们将看到标签列表是如何创建并添加到弹出窗口的。 -#### Creating the popup +#### 创建弹出内容 -First, an event handler is added to execute `listTabs()` when tabs.html is loaded: +首先，添加一个事件处理器，以便在加载 `tabs.html` 时执行 `listTabs()`： ```js document.addEventListener("DOMContentLoaded", listTabs); ``` -The first thing that `listTabs()` does is to call `getCurrentWindowTabs()`. This is where {{WebExtAPIRef("tabs.query")}} is used to get a {{WebExtAPIRef("tabs.Tab")}} object for the tabs in the current window: +`listTabs()` 首先会调用 `getCurrentWindowTabs()`。在这里，{{WebExtAPIRef("tabs.query()")}} 被用来获取当前窗口中标签页的 {{WebExtAPIRef("tabs.Tab")}} 对象： ```js function getCurrentWindowTabs() { @@ -149,51 +143,51 @@ function getCurrentWindowTabs() { } ``` -Now, `listTabs()` is ready to create the content for the popup. +现在，`listTabs()` 已准备好为弹出窗口创建内容。 -To start with: +首先： -1. Grab the `tabs-list` `div`. -2. Create a document fragment (into which the list will be built). -3. Set counters. -4. Clear the content of the `tabs-list` `div`. +1. 抓取 `
    ` 元素。 +2. 创建一个文档片段（将在其中创建列表）。 +3. 设置计数器。 +4. 清除 `
    ` 元素的内容。 ```js function listTabs() { getCurrentWindowTabs().then((tabs) => { - let tabsList = document.getElementById('tabs-list'); - let currentTabs = document.createDocumentFragment(); - let limit = 5; + const tabsList = document.getElementById('tabs-list'); + const currentTabs = document.createDocumentFragment(); + const limit = 5; let counter = 0; tabsList.textContent = ''; ``` -Next, we'll create the links for each tab: +接下来，我们将为每个标签页创建链接： -1. Loops through the first 5 items from the {{WebExtAPIRef("tabs.Tab")}} object. -2. For each item, add a hyperlink to the document fragment. +1. 循环遍历 {{WebExtAPIRef("tabs.Tab")}} 对象的前 5 个项目。 +2. 为每个项目在文档片段中添加一个超链接。 - - The link’s label—that is, its text—is set using the tab’s title (or the ID, if it has no title). - - The link’s address is set using the tab’s ID. + - 链接的标签（即文本）使用标签页的 `title`（如果没有 `title`，则使用 `id`）设置。 + - 链接的地址使用标签页的 `id` 设置。 - ```js - for (let tab of tabs) { - if (!tab.active && counter <= limit) { - let tabLink = document.createElement("a"); +```js +for (const tab of tabs) { + if (!tab.active && counter <= limit) { + const tabLink = document.createElement("a"); - tabLink.textContent = tab.title || tab.id; + tabLink.textContent = tab.title || tab.id; - tabLink.setAttribute("href", tab.id); - tabLink.classList.add("switch-tabs"); - currentTabs.appendChild(tabLink); - } + tabLink.setAttribute("href", tab.id); + tabLink.classList.add("switch-tabs"); + currentTabs.appendChild(tabLink); + } - counter += 1; - } - ``` + counter += 1; +} +``` -Finally, the document fragment is written to the `tabs-list` div: +最后，文档片段被写入 `
    ` 元素： ```js tabsList.appendChild(currentTabs); @@ -201,150 +195,147 @@ Finally, the document fragment is written to the `tabs-list` div: } ``` -#### Working with the active tab +#### 使用活动标签页 -Another related example feature is the "Alert active tab" info option that dumps all the {{WebExtAPIRef("tabs.Tab")}} object properties for the active tab into an alert: +另一个相关的示例功能是“警报活动标签页”信息选项，它可将活动标签页的所有 {{WebExtAPIRef("tabs.Tab")}} 对象属性输出到警报中： ```js - else if (e.target.id === "tabs-alertinfo") { - callOnActiveTab((tab) => { - let props = ""; - for (let item in tab) { - props += `${ item } = ${ tab[item] } \n`; - } - alert(props); - }); - } +else if (e.target.id === "tabs-alertinfo") { + callOnActiveTab((tab) => { + let props = ""; + for (const item in tab) { + props += `${ item } = ${ tab[item] } \n`; + } + alert(props); + }); +} ``` -Where `callOnActiveTab()` finds the active tab object by looping through the {{WebExtAPIRef("tabs.Tab")}} objects looking for the item with active set: +其中，`callOnActiveTab()` 通过在 {{WebExtAPIRef("tabs.Tab")}} 对象中循环查找已设置为活动的项目，从而找到活动的标签页对象： ```js -document.addEventListener("click", function(e) { - function callOnActiveTab(callback) { - getCurrentWindowTabs().then((tabs) => { - for (var tab of tabs) { - if (tab.active) { - callback(tab, tabs); - } - } - }); - } +document.addEventListener("click", (e) => { + function callOnActiveTab(callback) { + getCurrentWindowTabs().then((tabs) => { + for (const tab of tabs) { + if (tab.active) { + callback(tab, tabs); + } + } + }); + } } ``` -## Creating, duplicating, moving, updating, reloading, and removing tabs +## 创建、复制、移动、更新、重新加载、删除标签页 -Having gathered information about the tabs you'll most likely want to do something with them—either to offer users features for manipulating and managing tabs or to implement functionality in your extension. +收集了标签页的信息后，你很可能想对它们做些什么——要么为用户提供操作和管理标签页的功能，要么在扩展中实现功能。 -The following functions are available: +以下是可用的功能： -- create a new tab ({{WebExtAPIRef("tabs.create")}}). -- duplicate a tab ({{WebExtAPIRef("tabs.duplicate")}}). -- remove a tab ({{WebExtAPIRef("tabs.remove")}}). -- move a tab ({{WebExtAPIRef("tabs.move")}}). -- update the tab's URL—effectively browse to a new page—({{WebExtAPIRef("tabs.update")}}). -- reload the tab's page ({{WebExtAPIRef("tabs.reload")}}). +- 创建新标签页（{{WebExtAPIRef("tabs.create()")}}）。 +- 复制标签页（{{WebExtAPIRef("tabs.duplicate()")}}）。 +- 删除标签页（{{WebExtAPIRef("tabs.remove()")}}）。 +- 移动标签页（{{WebExtAPIRef("tabs.move()")}}）。 +- 更新标签页的 URL（有效地浏览到新页面）（{{WebExtAPIRef("tabs.update()")}}）。 +- 重新加载标签页（{{WebExtAPIRef("tabs.reload()")}}）。 -> **备注：** These functions all require the ID (or IDs) of the tab they are manipulating: +> **备注：** 这些函数都需要它们要操作的标签页的 ID（一个或多个 ID）： > > - {{WebExtAPIRef("tabs.duplicate")}} > - {{WebExtAPIRef("tabs.remove")}} > - {{WebExtAPIRef("tabs.move")}} > -> Whereas the following functions will act on the active tab (if no tab ID is provided): +> 而以下函数将作用于活动标签页（如果没有提供标签页 `id`）： > > - {{WebExtAPIRef("tabs.update")}} > - {{WebExtAPIRef("tabs.reload")}} -### How to example +### 教程示例 -The [tabs-tabs-tabs](https://github.com/mdn/webextensions-examples/tree/main/tabs-tabs-tabs) example exercises all of these features except for updating a tab's URL The way in which these APIs are used is similar, so we'll look at one of the more involved implementations, that of the "Move active tab to the beginning of the window list" option. +除了更新标签页的 URL 之外，[tabs-tabs-tabs](https://github.com/mdn/webextensions-examples/tree/main/tabs-tabs-tabs) 示例使用了所有这些功能。这些 API 的使用方式类似，因此我们将查看其中一个更复杂的实现，即“将活动标签页移至窗口列表开头”选项。 -But first, here is a demonstration of the feature in action: +首先，这里演示了该功能的实际操作： {{EmbedYouTube("-lJRzTIvhxo")}} -#### manifest.json - -None of the functions require a permission to operate, so there are no features in the manifest.json file that need to be highlighted. - -#### tabs.html - -tabs.html defines the "menu" displayed in the popup, which includes the "Move active tab to the beginning of the window list" option, with a series of `` tags grouped by a visual separator. Each menu item is given an ID, which is used in tabs.js to determine which menu item is being requested. - -```html -Move active tab to the beginning of the window
    -Move active tab to the end of the window
    - -
    - -Duplicate active tab
    - -Reload active tab
    -Alert active tab info
    -``` - -#### tabs.js - -To implement the "menu" defined in tabs.html, tabs.js includes a listener for clicks in tabs.html: - -```js -document.addEventListener("click", function(e) { - function callOnActiveTab(callback) { - - getCurrentWindowTabs().then((tabs) => { - for (var tab of tabs) { - if (tab.active) { - callback(tab, tabs); - } - } - }); -} -} -``` - -A series of `if` statements then look to match the ID of the item clicked. - -This code snippet is for the "Move active tab to the beginning of the window list" option: - -```js -if (e.target.id === "tabs-move-beginning") { - callOnActiveTab((tab, tabs) => { - var index = 0; - if (!tab.pinned) { - index = firstUnpinnedTab(tabs); +- manifest.json + - : 没有一个功能需要权限才能运行，因此 [manifest.json](https://github.com/mdn/webextensions-examples/blob/main/tabs-tabs-tabs/manifest.json) 文件中没有需要突出显示的功能。 +- tabs.html + + - : [`tabs.html`](https://github.com/mdn/webextensions-examples/blob/main/tabs-tabs-tabs/tabs.html) 定义了弹出窗口中显示的“菜单”，其中包括“将活动标签页移至窗口列表开头”选项，以及一系列由可视分隔符分组的 `` 标记。每个菜单项都有一个 `id` ，`tabs.js` 使用该 `id` 来确定请求的是哪个菜单项。 + + ```html + + Move active tab to the beginning of the window + +
    + Move active tab to the end of the window +
    + +
    + + Duplicate active tab
    + Reload active tab
    + Alert active tab info
    + ``` + +- tabs.js + + - : 为了实现在 `tabs.html` 中定义的“菜单”，[`tabs.js`](https://github.com/mdn/webextensions-examples/blob/main/tabs-tabs-tabs/tabs.js) 在 `tabs.html` 中包含了一个点击监听器： + + ```js + document.addEventListener("click", (e) => { + function callOnActiveTab(callback) { + getCurrentWindowTabs().then((tabs) => { + for (const tab of tabs) { + if (tab.active) { + callback(tab, tabs); + } + } + }); + } + }); + ``` + + 然后，一系列 `if` 语句会查找与点击项目的 `id` 匹配的内容。 + + 此代码片段用于“将活动标签页移至窗口列表开头”选项： + + ```js + if (e.target.id === "tabs-move-beginning") { + callOnActiveTab((tab, tabs) => { + let index = 0; + if (!tab.pinned) { + index = firstUnpinnedTab(tabs); + } + console.log(`moving ${tab.id} to ${index}`); + browser.tabs.move([tab.id], { index }); + }); } - console.log(`moving ${tab.id} to ${index}`); - browser.tabs.move([tab.id], { index }); - }); -} -``` + ``` -It's worth noting the use of `console.log()`. This enables you to output information to the [debugger](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Debugging) console, which can be useful when resolving issues found during development. + 值得注意的是 `console.log()` 的使用。这样就能向[调试器](https://extensionworkshop.com/documentation/develop/debugging/)控制台输出信息，在解决开发过程中发现的问题时非常有用。 -![Example of the console.log output, from the move tabs feature, in the debugging console](console.png) + ![调试控制台中移动标签页功能的控制台日志输出示例](console.png) -The move code first calls `callOnActiveTab()` which in turn calls `getCurrentWindowTabs()` to get a {{WebExtAPIRef("tabs.Tab")}} object containing the active window’s tabs. It then loops through the object to find and return the active tab object: + 移动代码首先调用 `callOnActiveTab()`，然后再调用 `getCurrentWindowTabs()`，以获取包含活动窗口标签页的 {{WebExtAPIRef("tabs.Tab")}} 对象。然后在该对象中循环查找并返回活动标签页对象： -```js -function callOnActiveTab(callback) { - getCurrentWindowTabs().then((tabs) => { - for (var tab of tabs) { - if (tab.active) { - callback(tab, tabs); - } + ```js + function callOnActiveTab(callback) { + getCurrentWindowTabs().then((tabs) => { + for (const tab of tabs) { + if (tab.active) { + callback(tab, tabs); + } + } + }); } - }); -} -``` + ``` -##### Pinned tabs +#### 固定标签页 -A feature of tabs is that the user can _pin_ tabs in a window. Pinned tabs are placed at the start of the tab list and cannot be moved. This means that the earliest position a tab can move to is the first position after any pinned tabs. So, `firstUnpinnedTab()` is called to find the position of the first unpinned tab by looping through the `tabs` object: +标签页的一个特点是用户可以在窗口中*固定*标签页。被固定的标签页会放在标签页列表的起始位置，并且不能移动。这意味着标签页可以移动的最早位置是任何已固定标签页之后的第一个位置。因此，`firstUnpinnedTab()` 将被调用，通过循环查看 `tabs` 对象来查找第一个未固定标签页的位置： ```js function firstUnpinnedTab(tabs) { @@ -356,231 +347,222 @@ function firstUnpinnedTab(tabs) { } ``` -We now have everything needed to move the tab: the active tab object from which we can get the tab ID and the position the tab is to be moved to. So, we can implement the move: +现在我们拥有了移动标签页所需的一切：活动标签页对象，从中我们可以获得标签页的 `id` 和标签页要移动到的位置。因此，我们可以这样实现移动： ```js browser.tabs.move([tab.id], { index }); ``` -The remaining functions to duplicate, reload, create, and remove tabs are implemented similarly. +其余功能：复制、重新加载、创建和删除标签页，实现类似。 -## Manipulating a tab's zoom level +## 改变标签页的缩放级别 -The next set of functions enable you to get ({{WebExtAPIRef("tabs.getZoom")}}) and set ({{WebExtAPIRef("tabs.setZoom")}}) the zoom level within a tab. You can also retrieve the zoom settings ({{WebExtAPIRef("tabs.getZoomSettings")}}) but, at the time of writing, the ability to set the settings ({{WebExtAPIRef("tabs.setZoomSettings")}}) wasn’t available in Firefox. +下一组功能可用于获取（{{WebExtAPIRef("tabs.getZoom")}}）和设置（{{WebExtAPIRef("tabs.setZoom")}}）标签页内的缩放级别。你还可以检索缩放设置（{{WebExtAPIRef("tabs.getZoomSettings")}}），但在撰写本文档时，Firefox 还不提供设置功能（{{WebExtAPIRef("tabs.setZoomSettings")}}）。 -The level of zoom can be between 30% and 300% (represented as decimals `0.3` to `3`). +缩放级别可在 30% 到 500% 之间（以小数 `0.3` 到 `5` 表示）。 -In Firefox the default zoom settings are: +在 Firefox 中，默认缩放设置为 -- **default zoom level:** 100%. -- **zoom mode:** automatic (so the browser manages how zoom levels are set). -- **scope of zoom changes:** `"per-origin"`, meaning that when you visit a site again, it takes the zoom level set in your last visit. +- **默认缩放级别**：100%。 +- **缩放模式**：自动（因此浏览器会管理缩放级别的设置）。 +- **缩放更改的范围**：`"per-origin"`，这意味着当你再次访问网站时，网站会采用上次访问时设置的缩放级别。 -### How to example +### 教程示例 -The [tabs-tabs-tabs](https://github.com/mdn/webextensions-examples/tree/main/tabs-tabs-tabs) example includes three demonstrations of the zoom feature: zoom in, zoom out, and reset zoom. Here is the feature in action: +[tabs-tabs-tabs](https://github.com/mdn/webextensions-examples/tree/main/tabs-tabs-tabs) 示例包括三个缩放功能演示：放大、缩小和重置缩放。下面是该功能的实际操作： {{EmbedYouTube("RFr3oYBCg28")}} -Let's take a look at how the zoom in is implemented. - -#### manifest.json - -None of the zoom functions require permissions, so there are no features in the manifest.json file that need to be highlighted. - -#### tabs.html - -We have already discussed how the tabs.html defines the options for this extension, nothing new or unique is done to provide the zoom options. - -#### tabs.js - -tabs.js starts by defining several constants used in the zoom code: - -```js -const ZOOM_INCREMENT = 0.2; -const MAX_ZOOM = 3; -const MIN_ZOOM = 0.3; -const DEFAULT_ZOOM = 1; -``` - -It then uses the same listener we discussed earlier so it can act on clicks in tabs.html. - -For the zoom in feature, this runs: - -```js - else if (e.target.id === "tabs-add-zoom") { - callOnActiveTab((tab) => { - var gettingZoom = browser.tabs.getZoom(tab.id); - gettingZoom.then((zoomFactor) => { - //the maximum zoomFactor is 3, it can't go higher - if (zoomFactor >= MAX_ZOOM) { - alert("Tab zoom factor is already at max!"); - } else { - var newZoomFactor = zoomFactor + ZOOM_INCREMENT; - //if the newZoomFactor is set to higher than the max accepted - //it won't change, and will never alert that it's at maximum - newZoomFactor = newZoomFactor > MAX_ZOOM ? MAX_ZOOM : newZoomFactor; - browser.tabs.setZoom(tab.id, newZoomFactor); - } - }); - }); - } -``` +让我们看看缩放功能是如何实现的。 + +- manifest.json + - : 缩放功能都不需要权限，因此 [manifest.json](https://github.com/mdn/webextensions-examples/blob/main/tabs-tabs-tabs/manifest.json) 文件中没有需要突出显示的功能。 +- tabs.html + - : 我们已经讨论过 [`tabs.html`](https://github.com/mdn/webextensions-examples/blob/main/tabs-tabs-tabs/tabs.html) 是如何定义该扩展的选项的，在提供缩放选项方面没有做任何新的或独特的工作。 +- tabs.js + + - : [`tabs.js`](https://github.com/mdn/webextensions-examples/blob/main/tabs-tabs-tabs/tabs.js) 首先定义了缩放代码中使用的几个常量： + + ```js + const ZOOM_INCREMENT = 0.2； + const MAX_ZOOM = 5； + const MIN_ZOOM = 0.3； + const DEFAULT_ZOOM = 1； + ``` + + 然后，它会使用我们之前讨论过的监听器，以便对 `tabs.html` 中的点击采取行动。 + + 对于放大功能，将执行以下操作： + + ```js + else if (e.target.id === "tabs-add-zoom") { + callOnActiveTab((tab) => { + browser.tabs.getZoom(tab.id).then((zoomFactor) => { + // 最大 zoomFactor 为 5，不能再高了 + if (zoomFactor >= MAX_ZOOM) { + alert("Tab zoom factor is already at max!")； + } else { + let newZoomFactor = zoomFactor + ZOOM_INCREMENT； + //如果 newZoomFactor 被设置为高于最大值，则该值不会改变。 + //它将不会改变，也不会提示已达到最大值 + newZoomFactor = newZoomFactor > MAX_ZOOM ? MAX_ZOOM : newZoomFactor； + browser.tabs.setZoom(tab.id, newZoomFactor)； + } + }); + }); + } + ``` -This code uses `callOnActiveTab()` to get the details of the active tab, then {{WebExtAPIRef("tabs.getZoom")}} gets the tab’s current zoom factor. The current zoom is compared to the defined maximum (`MAX_ZOOM`) and an alert issued if the tab is already at the maximum zoom. Otherwise, the zoom level is incremented but limited to the maximum zoom, then the zoom is set with {{WebExtAPIRef("tabs.getZoom")}}. + 这段代码使用 `callOnActiveTab()` 获取活动标签页的详细信息，然后 {{WebExtAPIRef("tabs.getZoom")}} 获取标签页的当前缩放系数。当前缩放与定义的最大值（`MAX_ZOOM`）进行比较，如果标签页已达到最大缩放，就会发出警报。否则，缩放级别会递增，但仅限于最大缩放，然后使用 {{WebExtAPIRef("tabs.getZoom")}} 设置缩放。 -## Manipulating a tab's CSS +## 改变标签页的 CSS 样式 -Another significant capability offered by the Tabs API is the ability to manipulate the CSS within a tab—add new CSS to a tab ({{WebExtAPIRef("tabs.insertCSS")}}) or remove CSS from a tab ({{WebExtAPIRef("tabs.removeCSS")}}). +标签 API 提供的另一项重要功能是操作标签内的 CSS 样式：为标签添加新 CSS 样式（{{WebExtAPIRef("tabs.insertCSS()")}}）或从标签移除 CSS 样式（{{WebExtAPIRef("tabs.removeCSS()")}}）。 -This can be useful, for example, if you want to highlight certain page elements or change the default layout of the page. +例如，如果你想突出显示某些页面元素或更改页面的默认布局，这将非常有用。 -### How to example +### 教程示例 -The [apply-css](https://github.com/mdn/webextensions-examples/tree/main/apply-css) example uses these features to add a red border to the web page in the active tab. Here is the feature in action: +[apply-css](https://github.com/mdn/webextensions-examples/tree/main/apply-css) 示例使用这些功能为活动标签页中的网页添加红色边框。下面是该功能的实际效果： {{EmbedYouTube("bcK-GT2Dyhs")}} -Let's walk through how it's set up. +让我们来看看它是如何实现的。 -#### manifest.json +- manifest.json -To use the CSS features you need either: + - : [`manifest.json`](https://github.com/mdn/webextensions-examples/blob/main/apply-css/manifest.json) 请求使用 CSS 功能所需的权限。你需要 -- `"tabs"` permission and [host permission](/zh-CN/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions) or -- `"activeTab"` permission. + - `"tabs"` 权限和[主机权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#主机权限)；或者 + - `"activeTab"` 权限。 -The latter is the most useful, as it allows an extension to use {{WebExtAPIRef("tabs.insertCSS")}} and {{WebExtAPIRef("tabs.removeCSS")}} in the active tab when run from the extension’s browser or page action, context menu, or a shortcut. + 后者最有用，因为它允许扩展在通过扩展的浏览器或页面操作、上下文菜单或快捷方式运行时，在活动标签页中使用 {{WebExtAPIRef("tabs.insertCSS()")}} 和 {{WebExtAPIRef("tabs.removeCSS()")}} 。 -```json -{ - "description": "Adds a page action to toggle applying CSS to pages.", + ```json + { + "description": "Adds a page action to toggle applying CSS to pages.", - "manifest_version": 2, - "name": "apply-css", - "version": "1.0", - "homepage_url": "https://github.com/mdn/webextensions-examples/tree/main/apply-css", + "manifest_version": 2, + "name": "apply-css", + "version": "1.0", + "homepage_url": "https://github.com/mdn/webextensions-examples/tree/main/apply-css", - "background": { - "scripts": ["background.js"] - }, + "background": { + "scripts": ["background.js"] + }, - "page_action": { - "default_icon": "icons/off.svg" - }, + "page_action": { + "default_icon": "icons/off.svg" + }, - "permissions": ["activeTab", "tabs"] -} -``` + "permissions": ["activeTab", "tabs"] + } + ``` -You will note that `"tabs"` permission is requested in addition to `"activeTab"`. This additional permission is needed to enable the extension’s script to access the tab’s URL, the importance of which we’ll see in a moment. + 你会注意到，除了 `"activeTab"`，还请求了 `"tabs"` 权限。扩展脚本需要这个额外权限才能访问标签页的 URL，我们稍后会看到它的重要性。 -The other main features in the manifest.json file are the definition of: + manifest.json 文件中的其他主要功能包括以下定义： -- **a background script**, which starts running as soon as the extension is loaded. -- **a "page action"**, which defines an icon to be added to the browser’s address bar. + - **后台脚本**，加载扩展后立即开始运行。 + - **一个“页面动作”**，它定义了一个要添加到浏览器地址栏的图标。 -#### background.js +- background.js -On startup, background.js sets some constants to define the CSS to be applied, titles for the "page action", and a list of protocols the extension will work in: + - : 启动时，[`background.js`](https://github.com/mdn/webextensions-examples/blob/main/apply-css/background.js) 会设置一些常量，以定义要应用的 CSS、“页面操作”的标题以及扩展将在其中运行的协议列表： -```js -const CSS = "body { border: 20px solid red; }"; -const TITLE_APPLY = "Apply CSS"; -const TITLE_REMOVE = "Remove CSS"; -const APPLICABLE_PROTOCOLS = ["http:", "https:"]; -``` + ```js + const CSS = "body { border: 20px solid red; }"; + const TITLE_APPLY = "Apply CSS"; + const TITLE_REMOVE = "Remove CSS"; + const APPLICABLE_PROTOCOLS = ["http:", "https:"]; + ``` -When first loaded, the extension uses {{WebExtAPIRef("tabs.query")}} to get a list of all the tabs in the current browser window. It then loops through the tabs calling `initializePageAction()`. + 首次加载时，扩展会使用 {{WebExtAPIRef("tabs.query()")}} 获取当前浏览器窗口中所有标签页的列表。然后，它会调用 `initializePageAction()` 对标签页进行循环。 -```js -var gettingAllTabs = browser.tabs.query({}); + ```js + browser.tabs.query({}).then((tabs) => { + for (const tab of tabs) { + initializePageAction(tab); + } + }); + ``` -gettingAllTabs.then((tabs) => { - for (let tab of tabs) { - initializePageAction(tab); - } -}); -``` + `initializePageAction` 使用 `protocolIsApplicable()` 来确定活动标签页的 URL 是否可以应用 CSS： -`initializePageAction` uses `protocolIsApplicable()` to determine whether the active tab's URL is one the CSS can be applied to: + ```js + function protocolIsApplicable(url) { + const anchor = document.createElement("a"); + anchor.href = url; + return APPLICABLE_PROTOCOLS.includes(anchor.protocol); + } + ``` -```js -function protocolIsApplicable(url) { - var anchor = document.createElement("a"); - anchor.href = url; - return APPLICABLE_PROTOCOLS.includes(anchor.protocol); -} -``` + 如果示例可以在标签页上执行操作，`initializePageAction()` 会在使 `pageAction` 可见之前将标签页的 `pageAction`（导航栏）图标和标题设置为使用“关闭”版本： -Then, if the example can act on the tab, `initializePageAction()` sets the tab's `pageAction` (navigation bar) icon and title to use the “off” versions before making the `pageAction` visible: + ```js + function initializePageAction(tab) { + if (protocolIsApplicable(tab.url)) { + browser.pageAction.setIcon({ tabId: tab.id, path: "icons/off.svg" }); + browser.pageAction.setTitle({ tabId: tab.id, title: TITLE_APPLY }); + browser.pageAction.show(tab.id); + } + } + ``` -```js -function initializePageAction(tab) { - if (protocolIsApplicable(tab.url)) { - browser.pageAction.setIcon({ tabId: tab.id, path: "icons/off.svg" }); - browser.pageAction.setTitle({ tabId: tab.id, title: TITLE_APPLY }); - browser.pageAction.show(tab.id); - } -} -``` + 接下来，`pageAction.onClicked` 的监听器会等待 `pageAction` 图标被点击，并在点击时调用 `toggleCSS`。 -Next, a listener on `pageAction.onClicked` waits for the `pageAction` icon to be clicked, and calls `toggleCSS` when it is. + ```js + browser.pageAction.onClicked.addListener(toggleCSS); + ``` -```js -browser.pageAction.onClicked.addListener(toggleCSS); -``` + `toggleCSS()` 获取 `pageAction` 的标题，然后执行所述操作： -`toggleCSS()` gets the title of the `pageAction` and then takes the action described: + - **对于“应用 CSS”**： -- **For "Apply CSS":** + - 将 `pageAction` 图标和标题切换为“移除”。 + - 使用 {{WebExtAPIRef("tabs.insertCSS()")}} 应用 CSS。 - - toggles the `pageAction` icon and title to the "remove" versions. - - applies the CSS using {{WebExtAPIRef("tabs.insertCSS")}}. + - **对于“移除 CSS”**： -- **For "Remove CSS":** + - 将 `pageAction` 图标和标题切换为“应用”。 + - 使用 {{WebExtAPIRef("tabs.removeCSS()")}} 删除 CSS。 - - toggles the `pageAction` icon and title to the "apply" versions. - - removes the CSS using {{WebExtAPIRef("tabs.removeCSS")}}. + ```js + function toggleCSS(tab) { + function gotTitle(title) { + if (title === TITLE_APPLY) { + browser.pageAction.setIcon({ tabId: tab.id, path: "icons/on.svg" }); + browser.pageAction.setTitle({ tabId: tab.id, title: TITLE_REMOVE }); + browser.tabs.insertCSS({ code: CSS }); + } else { + browser.pageAction.setIcon({ tabId: tab.id, path: "icons/off.svg" }); + browser.pageAction.setTitle({ tabId: tab.id, title: TITLE_APPLY }); + browser.tabs.removeCSS({ code: CSS }); + } + } -```js -function toggleCSS(tab) { - function gotTitle(title) { - if (title === TITLE_APPLY) { - browser.pageAction.setIcon({ tabId: tab.id, path: "icons/on.svg" }); - browser.pageAction.setTitle({ tabId: tab.id, title: TITLE_REMOVE }); - browser.tabs.insertCSS({ code: CSS }); - } else { - browser.pageAction.setIcon({ tabId: tab.id, path: "icons/off.svg" }); - browser.pageAction.setTitle({ tabId: tab.id, title: TITLE_APPLY }); - browser.tabs.removeCSS({ code: CSS }); + browser.pageAction.getTitle({ tabId: tab.id }).then(gotTitle); } - } + ``` - var gettingTitle = browser.pageAction.getTitle({ tabId: tab.id }); + 最后，为确保 `pageAction` 在每次更新标签页后都有效，{{WebExtAPIRef("tabs.onUpdated")}} 上的监听器会在每次更新标签页时调用 `initializePageAction()`，以检查标签页是否仍在使用可应用 CSS 的协议。 - gettingTitle.then(gotTitle); -} -``` - -Finally, to ensure that the `pageAction` is valid after each update to the tab, a listener on {{WebExtAPIRef("tabs.onUpdated")}} calls `initializePageAction()` each time the tab is updated to check that the tab is still using a protocol to which the CSS can be applied. - -```js -browser.tabs.onUpdated.addListener((id, changeInfo, tab) => { - initializePageAction(tab); -}); -``` + ```js + browser.tabs.onUpdated.addListener((id, changeInfo, tab) => { + initializePageAction(tab); + }); + ``` -## Some other interesting abilities +## 一些其他有趣的特性 -There are a couple of other Tabs API features that don't fit into one of the earlier sections: +还有一些其他 Tabs API 特性，前面的章节还没有介绍过： -- Capture the visible tab content with {{WebExtAPIRef("tabs.captureVisibleTab")}}. -- Detect the primary language of the content in a tab using {{WebExtAPIRef("tabs.detectLanguage")}}. This could be used, for example, to match the language in your extension’s UI with that of the page it’s running in. +- 使用 {{WebExtAPIRef("tabs.captureVisibleTab")}} 捕捉可见标签内容。 +- 使用 {{WebExtAPIRef("tabs.detectLanguage")}} 检测标签页内容的主要语言。例如，这可用于将扩展用户界面的语言与运行页面的语言相匹配。 -## Learn more +## 进一步学习 -If you want to learn more about the Tabs API, check out: +如果你想了解有关 Tabs API 的更多信息，请查阅 -- [Tabs API reference](/zh-CN/Add-ons/WebExtensions/API/tabs) -- [Example extensions](/zh-CN/Add-ons/WebExtensions/Examples) (many of which use the Tabs API) +- [Tabs API 参考](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/tabs) +- [扩展示例](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Examples)（很多示例使用了 Tabs API） From 0963632d9fedbe4a1561048b6bb570708903ebc3 Mon Sep 17 00:00:00 2001 From: wonseok Date: Mon, 30 Oct 2023 22:51:42 +0900 Subject: [PATCH 51/91] =?UTF-8?q?ko:=20http=20header=20if-none-match=20?= =?UTF-8?q?=EC=A0=84=EC=B2=B4=20=EB=B2=88=EC=97=AD=20(#16532)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/http/headers/if-none-match/index.md | 76 +++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 files/ko/web/http/headers/if-none-match/index.md diff --git a/files/ko/web/http/headers/if-none-match/index.md b/files/ko/web/http/headers/if-none-match/index.md new file mode 100644 index 00000000000000..ecb6370feff65a --- /dev/null +++ b/files/ko/web/http/headers/if-none-match/index.md @@ -0,0 +1,76 @@ +--- +title: If-None-Match +slug: Web/HTTP/Headers/If-None-Match +l10n: + sourceCommit: 997a0ec66e1514b7269076195b2419db334e876e +--- + +{{HTTPSidebar}} + +**`If-None-Match`** HTTP 요청 헤더는 요청을 조건부로 만듭니다. {{HTTPMethod("GET")}} 및 {{HTTPMethod("HEAD")}} 메서드의 경우, 서버는 요청된 리소스에 주어진 값과 일치하는 {{HTTPHeader("ETag")}}가 없는 경우에만 {{HTTPStatus("200")}} 상태와 함께 요청된 리소스를 반환합니다. 다른 메서드의 경우, 최종적으로 존재하는 리소스의 {{HTTPHeader("ETag")}}가 나열된 값 중 어느 것과도 일치하지 않는 경우에만 요청이 처리됩니다. + +{{HTTPMethod("GET")}} 및 {{HTTPMethod("HEAD")}} 메서드에서 조건이 실패하면 서버는 HTTP 상태 코드 304(Not Modified)를 반환해야 합니다. 서버 측 변경 사항을 적용하는 메서드의 경우 상태 코드 412(Precondition Failed)가 사용됩니다. 304 응답을 생성하는 서버는 동일한 요청에 대해 200(OK) 응답으로 전송되는 다양한 헤더 필드(Cache-Control, Content-Location, Date, ETag, Expires 등) 중 하나를 생성해야 합니다. + +저장된 {{HTTPHeader("ETag")}}와의 비교는 약한 비교 알고리즘을 활용하므로, 콘텐츠가 같다면 두 파일이 바이트 단위로 완전히 일치하지 않아도 동일하다고 판단합니다. 예를 들어, 푸터(footer)의 생성 날짜가 다른 두 페이지는 여전히 동일하다고 판단합니다. + +서버에서 지원한다면, {{HTTPHeader("If-Modified-Since")}}와 함께 사용할 경우 **`If-None-Match`** 가 우선 적용됩니다. + +두 가지 일반적인 사용 사례가 있습니다. + +- {{HTTPMethod("GET")}} 및 {{HTTPMethod("HEAD")}} 메서드의 경우, 연결된 {{HTTPHeader("ETag")}}가 있는 캐시된 개체를 업데이트합니다. +- 다른 메서드, 특히 {{HTTPMethod("PUT")}}의 경우, `If-None-Match`가 `*` 값과 함께 사용되면 이는 아직 생성되지 않은 것으로 알려진 파일을 저장하는 데 활용될 수 있으며, 이전에 다른 업로드가 발생하지 않았다는 것을 보장합니다. 더불어 이전에 업로드한 데이터가 손실될 수 있으며 이 문제는 [lost update problem](https://www.w3.org/1999/04/Editing/#3.1)의 한 형태입니다. + + + + + + + + + + + + +
    Header type{{Glossary("Request header")}}
    {{Glossary("Forbidden header name")}}no
    + +## 구문 + +```http +If-None-Match: "" +If-None-Match: "", "", … +If-None-Match: * +``` + +## 지시어 + +- \ + - : 개체 태그는 요청된 리소스를 고유하게 식별합니다. 이는 큰따옴표 사이에 위치한 {{Glossary("ASCII")}} 문자열로 표현되며(예: `"675af34563dc-tr34"`), 앞에 `W/`를 추가하여 약한 비교 알고리즘의 사용이 필요함을 나타낼 수 있습니다(`If-None-Match`에서는 해당 알고리즘만을 사용하므로 무의미합니다). +- `*` + - : 별표(asterisk)는 리소스를 나타내는 특수 값입니다. 이는 리소스를 업로드할 때, 특히 {{HTTPMethod("PUT")}}을 사용하여, 동일한 식별자를 가진 다른 리소스가 이미 업로드되었는지를 확인할 때에만 유용합니다. + +## 예제 + +```http +If-None-Match: "bfc13a64729c4290ef5b2c2730249c88ca92d82d" + +If-None-Match: W/"67ab43", "54ed21", "7892dd" + +If-None-Match: * +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{HTTPHeader("ETag")}} +- {{HTTPHeader("If-Unmodified-Since")}} +- {{HTTPHeader("If-Modified-Since")}} +- {{HTTPHeader("If-Match")}} +- {{HTTPStatus("304", "304 Not Modified")}} +- {{HTTPStatus("412", "412 Precondition Failed")}} From 0b93e08d7df490aadb364e768d28ae3c4a3419df Mon Sep 17 00:00:00 2001 From: Minoru Takai Date: Mon, 30 Oct 2023 22:26:54 +0900 Subject: [PATCH 52/91] =?UTF-8?q?=E6=84=8F=E5=A4=96=20=3D>=20=E4=BB=A5?= =?UTF-8?q?=E5=A4=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/white-space/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/css/white-space/index.md b/files/ja/web/css/white-space/index.md index 91473aaf8f0c48..7bb9d89b620437 100644 --- a/files/ja/web/css/white-space/index.md +++ b/files/ja/web/css/white-space/index.md @@ -126,7 +126,7 @@ white-space: unset; > - 空白 > - : 空白 (U+0020)、タブ (U+0009)、区切り文字 (改行など)。 > - その他の空白区切り -> - : Unicode で定義されているその他の区切り文字で、空白として定義されているもの意外。 +> - : Unicode で定義されているその他の区切り文字で、空白として定義されているもの以外。 > > ホワイトスペースが*ぶら下げる*とある場合、内在サイズを計算するときにボックスの大きさに影響することがあります。 From 6beee95090c8dc3b31b0e9fe3a10a1e819dd9717 Mon Sep 17 00:00:00 2001 From: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Date: Mon, 30 Oct 2023 22:04:10 +0800 Subject: [PATCH 53/91] [zh-cn]: update 'how browsers work' (#16764) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: A1lo --- .../performance/how_browsers_work/index.md | 82 ++++++++++--------- 1 file changed, 43 insertions(+), 39 deletions(-) diff --git a/files/zh-cn/web/performance/how_browsers_work/index.md b/files/zh-cn/web/performance/how_browsers_work/index.md index d7d0612b1c3fe0..fe187deef371da 100644 --- a/files/zh-cn/web/performance/how_browsers_work/index.md +++ b/files/zh-cn/web/performance/how_browsers_work/index.md @@ -1,8 +1,12 @@ --- title: 渲染页面：浏览器的工作原理 slug: Web/Performance/How_browsers_work +l10n: + sourceCommit: f32c38c1245815c7f520730f0cdef54960e5cee1 --- +{{QuickLinksWithSubPages("Web/Performance")}} + 页面内容快速加载和流畅的交互是用户希望得到的 Web 体验，因此，开发者应力争实现这两个目标。 了解如何提升性能和感知性能，有助于了解浏览器的工作原理。 @@ -29,7 +33,7 @@ Web 性能优化的目标之一就是缩短导航完成所花费的时间，在 浏览器向**名称服务器**发起 DNS 查询请求，最终得到一个 IP 地址。第一次请求之后，这个 IP 地址可能会被缓存一段时间，这样可以通过从缓存里面检索 IP 地址而不是再通过名称服务器进行查询来加速后续的请求。 -通过主机名加载一个页面通常仅需要一次 DNS 查询。但是，对于页面指向的不同的主机名，则需要多次 DNS 查询。如果字体（fonts）、图像（images）、脚本（scripts）、广告（ads）和网站统计（metrics）都有不同的主机名，则需要对每一个主机名进行 DNS 查询。 +通过主机名加载一个页面通常仅需要一次 DNS 查询。但是，对于页面指向的不同的主机名，则需要多次 DNS 查询。如果字体（font）、图像（image）、脚本（script）、广告（ads）和网站统计（metric）都有不同的主机名，则需要对每一个主机名进行 DNS 查询。 ![移动终端的请求先发送到基站，接着发送到运营商的中心计算机，然后再发送到互联网](latency.jpg) @@ -43,7 +47,7 @@ TCP 的“三次握手”技术经常被称为“SYN-SYN-ACK”——更确切 ### TLS 协商 -为了在 HTTPS 上建立安全连接，另一种握手是必须的。更确切的说是 {{glossary('TLS')}} 协商，它决定了什么密码将会被用来加密通信，验证服务器，在进行真实的数据传输之前建立安全连接。在发送真正的请求内容之前还需要三次往返服务器。 +对于通过 HTTPS 建立的安全连接，还需要另一次 "握手"。这种握手，或者说 {{glossary('TLS')}} 协商，决定使用哪种密码对通信进行加密，验证服务器，并在开始实际数据传输前建立安全连接。这就需要在实际发送内容请求之前，再往返服务器五次。 ![DNS 查询、TCP 握手和 TLS 5 步握手（包括服务器和客户端之间的 clienthello、serverhello 以及证书、clientkey 和完成消息）。](ssl.jpg) @@ -57,41 +61,41 @@ TCP 的“三次握手”技术经常被称为“SYN-SYN-ACK”——更确切 ```html - + - My simple page - + 简单的页面 + -

    My Page

    -

    A paragraph with a link

    +

    我的页面

    +

    含有链接的段落。

    - image description + 图像描述
    ``` -初始请求的响应包含所接收数据的第一个字节。{{glossary('Time to First Byte')}}（TTFB）是用户通过点击链接进行请求与收到第一个 HTML 数据包之间的时间。第一个内容分块通常是 14KB 的数据。 +初始请求的响应包含所接收数据的第一个字节。{{glossary('Time to First Byte','首字节时间（TTFB）')}}是用户通过点击链接进行请求与收到第一个 HTML 数据包之间的时间。第一个内容分块通常是 14KB 的数据。 -上面的例子中，这个请求肯定是小于 14KB 的，但是直到浏览器在解析阶段遇到链接时才会去请求链接的资源，下面有进行描述。 +上面的示例中，这个请求肯定是小于 14KB 的，但是直到浏览器在解析阶段遇到链接时才会去请求链接的资源，下面有进行描述。 -### TCP 慢启动 / 14KB 规则 +### 拥塞控制 / TCP 慢启动 -第一个响应数据包是 14KB 大小的。这是慢启动的一部分，慢启动是一种均衡网络连接速度的算法。慢启动逐渐增加发送数据的数量直到达到网络的最大带宽。 +TCP 数据包在传输过程中被分成若干段。由于 TCP 保证数据包的顺序，因此服务器在发送一定数量的数据包后，必须以 ACK 数据包的形式收到客户端的确认。 -在 {{glossary('TCP slow start', "TCP 慢启动")}} 中，在收到初始包之后，服务器会将下一个数据包的大小加倍到大约 28KB。后续的数据包依次是前一个包大小的二倍直到达到预定的阈值，或者遇到拥塞。 +如果服务器在每个网段后都等待 ACK，则会导致客户端频繁发出 ACK，即使在网络负荷较低的情况下也会增加传输时间。 -![TCP 慢启动](congestioncontrol.jpg) +另一方面，一次性发送过多网段可能会导致这样的问题：在繁忙的网络中，客户端无法接收到网段，只能长时间不停地回应 ACK，服务器不得不不断重新发送网段。 -如果你听说过初始页面加载的 14KB 规则，TCP 慢启动就是初始响应为 14KB 的原因，也是为什么 web 性能优化需要将此初始 14KB 响应作为优化重点的原因。TCP 慢启动逐渐建立适合网络能力的传输速度，以避免拥塞。 +为了平衡传输段的数量，{{glossary('TCP slow start', 'TCP 慢启动')}}算法用于逐渐增加传输数据量，直到确定最大网络带宽，并在网络负载较高时减少传输数据量。 -### 拥塞控制 +传输段的数量由拥塞窗口（CWND）的值控制，该值可初始化为 1、2、4 或 10 MSS（以太网协议中的 MSS 为 1500 字节）。该值是发送的字节数，客户端收到后必须发送 ACK。 -当服务器用 TCP 数据包来发送数据时，客户端通过返回确认帧来确认传输。由于硬件和网络条件，连接的容量是有限的。如果服务器太快地发送太多的包，它们可能会被丢弃。这意味着，将不会有确认帧的返回。服务器把它们当做确认帧丢失。拥塞控制算法使用这个发送包和确认帧流来确定发送速率。 +如果收到 ACK，那么 CWND 值将加倍，这样服务器下次就能发送更多的数据段。相反，如果没有收到 ACK，那么 CWND 值将减半。因此，这种机制在发送过多网段和过少网段之间取得了平衡。 ## 解析 @@ -103,9 +107,9 @@ DOM 是浏览器标记的内部表示。DOM 也是被暴露的，可以通过 Ja ### 构建 DOM 树 -我们描述五个步骤在[关键渲染路径](/zh-CN/docs/Web/Performance/Critical_rendering_path)这篇文章中。 +我们在[关键渲染路径](/zh-CN/docs/Web/Performance/Critical_rendering_path)这篇文章中描述了五个步骤。 -第一步是处理 HTML 标记并构造 DOM 树。HTML 解析涉及到 [tokenization](/zh-CN/docs/Web/API/DOMTokenList) 和树的构造。HTML 标记包括开始和结束标记，以及属性名和值。如果文档格式良好，则解析它会简单而快速。解析器将标记化的输入解析到文档中，构建文档树。 +第一步是处理 HTML 标记并构造 DOM 树。HTML 解析涉及到[符号化](/zh-CN/docs/Web/API/DOMTokenList)和树的构造。HTML 标记包括开始和结束标记，以及属性名和值。如果文档格式良好，则解析它会简单而快速。解析器将标记化的输入解析到文档中，构建文档树。 DOM 树描述了文档的内容。[``](/zh-CN/docs/Web/HTML/Element/html) 元素是第一个标签也是文档树的根节点。树反映了不同标记之间的关系和层次结构。嵌套在其他标记中的标记是子节点。DOM 节点的数量越多，构建 DOM 树所需的时间就越长。 @@ -118,9 +122,9 @@ DOM 树描述了文档的内容。[``](/zh-CN/docs/Web/HTML/Element/html) 浏览器构建 DOM 树时，这个过程占用了主线程。当这种情况发生时，预加载扫描仪将解析可用的内容并请求高优先级资源，如 CSS、JavaScript 和 web 字体。多亏了预加载扫描器，我们不必等到解析器找到对外部资源的引用来请求它。它将在后台检索资源，以便在主 HTML 解析器到达请求的资源时，它们可能已经在运行，或者已经被下载。预加载扫描仪提供的优化减少了阻塞。 ```html - + -image description +图像描述 ``` @@ -136,45 +140,45 @@ DOM 树描述了文档的内容。[``](/zh-CN/docs/Web/HTML/Element/html) CSSOM 树包括来自用户代理样式表的样式。浏览器从适用于节点的最通用规则开始，并通过应用更具体的规则递归地优化计算的样式。换句话说，它级联属性值。 -构建 CSSOM 非常非常快，并且在当前的开发工具中没有以独特的颜色显示。相反，开发人员工具中的“重新计算样式”显示解析 CSS、构建 CSSOM 树和递归计算计算样式所需的总时间。在 web 性能优化方面，它是可轻易实现的，因为创建 CSSOM 的总时间通常小于一次 DNS 查询所需的时间。 +构建 CSSOM 非常快，并且在当前的开发工具中没有以独特的颜色显示。相反，开发人员工具中的“重新计算样式”显示解析 CSS、构建 CSSOM 树和递归计算计算样式所需的总时间。在 web 性能优化方面，它是可轻易实现的，因为创建 CSSOM 的总时间通常小于一次 DNS 查询所需的时间。 ### 其他过程 #### JavaScript 编译 -当 CSS 被解析并创建 CSSOM 时，其他资源，包括 JavaScript 文件正在下载（借助预加载扫描器）。JavaScript 被解释、编译、解析和执行。脚本被解析为抽象语法树。一些浏览器引擎使用[抽象语法树](https://zh.wikipedia.org/wiki/抽象语法树)并将其传递到解释器中，输出在主线程上执行的字节码。这就是所谓的 JavaScript 编译。 +在解析 CSS 和创建 CSSOM 的同时，包括 JavaScript 文件在内的其他资源也在下载（这要归功于预加载扫描器）。JavaScript 会被解析、编译和解释。脚本被解析为抽象语法树。有些浏览器引擎会将[抽象语法树](https://zh.wikipedia.org/wiki/抽象语法树)输入编译器，输出字节码。这就是所谓的 JavaScript 编译。大部分代码都是在主线程上解释的，但也有例外，例如在 [web worker](/zh-CN/docs/Web/API/Web_Workers_API) 中运行的代码。 -#### 构建辅助功能树 +#### 构建无障碍树 -浏览器还构建辅助设备用于分析和解释内容的辅助功能（[accessibility](/zh-CN/docs/Learn/Accessibility)）树。无障碍对象模型（AOM）类似于 DOM 的语义版本。当 DOM 更新时，浏览器会更新辅助功能树。辅助技术本身无法修改无障碍树。 +浏览器还构建辅助设备用于分析和解释内容的[无障碍](/zh-CN/docs/Learn/Accessibility)树。无障碍对象模型（AOM）类似于 DOM 的语义版本。当 DOM 更新时，浏览器会更新辅助功能树。辅助技术本身无法修改无障碍树。 -在构建 AOM 之前，屏幕阅读器（[screen readers](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Screen_Reader_Implementors_Guide)）无法访问内容。 +在构建 AOM 之前，[屏幕阅读器](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Screen_Reader_Implementors_Guide)无法访问内容。 ## 渲染 -渲染步骤包括样式、布局、绘制，在某些情况下还包括合成。在解析步骤中创建的 CSSOM 树和 DOM 树组合成一个 Render 树，然后用于计算每个可见元素的布局，然后将其绘制到屏幕上。在某些情况下，可以将内容提升到它们自己的层并进行合成，通过在 GPU 而不是 CPU 上绘制屏幕的一部分来提高性能，从而释放主线程。 +渲染步骤包括样式、布局、绘制，在某些情况下还包括合成。在解析步骤中创建的 CSSOM 树和 DOM 树组合成一个渲染树，然后用于计算每个可见元素的布局，然后将其绘制到屏幕上。在某些情况下，可以将内容提升到它们自己的层并进行合成，通过在 GPU 而不是 CPU 上绘制屏幕的一部分来提高性能，从而释放主线程。 -### Style +### 样式 -第三步是将 DOM 和 CSSOM 组合成一个 Render 树，计算样式树或渲染树从 DOM 树的根开始构建，遍历每个可见节点。 +关键呈现路径的第三步是将 DOM 和 CSSOM 组合成渲染树。计算样式树或渲染树的构建从 DOM 树的根开始，遍历每个可见节点。 -像 [``](/zh-CN/docs/Web/HTML/Element/head) 和它的子节点以及任何具有 `display: none` 样式的结点，例如 `script { display: none; }`（在 user agent stylesheets 可以看到这个样式）这些标签将不会显示，也就是它们不会出现在 Render 树上。具有 `visibility: hidden` 的节点会出现在 Render 树上，因为它们会占用空间。由于我们没有给出任何指令来覆盖用户代理的默认值，因此上面代码示例中的 `script` 节点将不会包含在 Render 树中。 +不会被显示的元素，如 [``](/zh-CN/docs/Web/HTML/Element/head) 元素及其子元素，以及任何带有 `display: none` 的节点，如用户代理样式表中的 `script { display: none; }`，都不会包含在渲染树中，因为它们不会出现在渲染输出中。应用了 `visibility: hidden` 的节点会包含在渲染树中，因为它们会占用空间。由于我们没有给出任何指令来覆盖用户代理默认值，因此上述代码示例中的 `script` 节点不会包含在渲染树中。 -每个可见节点都应用了其 CSSOM 规则。Render 树保存所有具有内容和计算样式的可见节点——将所有相关样式匹配到 DOM 树中的每个可见节点，并根据 [CSS 级联](/zh-CN/docs/Web/CSS/Cascade)确定每个节点的计算样式。 +每个可见节点都应用了 CSSOM 规则。渲染树包含所有可见节点的内容和计算样式，将所有相关样式与 DOM 树中的每个可见节点匹配起来，并根据 [CSS 级联](/zh-CN/docs/Web/CSS/Cascade)，确定每个节点的计算样式。 -### Layout +### 布局 -第四步是在渲染树上运行布局以计算每个节点的几何体。布局是确定呈现树中所有节点的宽度、高度和位置，以及确定页面上每个对象的大小和位置的过程。回流是对页面的任何部分或整个文档的任何后续大小和位置的确定。 +第四步是在渲染树上运行布局以计算每个节点的几何体。*布局*是确定呈现树中所有节点的宽度、高度和位置，以及确定页面上每个对象的大小和位置的过程。回流是对页面的任何部分或整个文档的任何后续大小和位置的确定。 构建渲染树后，开始布局。渲染树标识显示哪些节点（即使不可见）及其计算样式，但不标识每个节点的尺寸或位置。为了确定每个对象的确切大小和位置，浏览器从渲染树的根开始遍历它。 -在网页上，大多数东西都是一个盒子。不同的设备和不同的桌面意味着无限数量的不同的视区大小。在此阶段，考虑到视区大小，浏览器将确定屏幕上所有不同框的尺寸。以视区的大小为基础，布局通常从 body 开始，用每个元素的框模型属性排列所有 body 的子孙元素的尺寸，为不知道其尺寸的替换元素（例如图像）提供占位符空间。 +在网页上，大多数东西都是一个盒子。不同的设备和不同的桌面意味着无限数量的不同的视区大小。在此阶段，考虑到视口大小，浏览器将确定屏幕上所有不同框的尺寸。以视口的大小为基础，布局通常从 body 开始，用每个元素的框模型属性排列所有 body 的子孙元素的尺寸，为不知道其尺寸的替换元素（例如图像）提供占位符空间。 -第一次确定节点的大小和位置称为布局。随后对节点大小和位置的重新计算称为回流。在我们的示例中，假设初始布局发生在返回图像之前。由于我们没有声明图像的大小，因此一旦知道图像大小，就会有回流。 +第一次确定节点的大小和位置称为布局。随后对节点大小和位置的重新计算称为回流。在我们的示例中，假设初始布局发生在返回图像之前。由于我们没有声明图像的尺寸，因此一旦知道图像的尺寸，就会出现回流。 ### 绘制 -最后一步是将各个节点绘制到屏幕上，第一次出现的节点称为 [first meaningful paint](/zh-CN/docs/Glossary/first_meaningful_paint)。在绘制或光栅化阶段，浏览器将在布局阶段计算的每个框转换为屏幕上的实际像素。绘画包括将元素的每个可视部分绘制到屏幕上，包括文本、颜色、边框、阴影和替换的元素（如按钮和图像）。浏览器需要非常快地完成这项工作。 +最后一步是将各个节点绘制到屏幕上，第一次出现的节点称为 [first meaningful paint](/zh-CN/docs/Glossary/First_meaningful_paint)。在绘制或光栅化阶段，浏览器将在布局阶段计算的每个框转换为屏幕上的实际像素。绘画包括将元素的每个可视部分绘制到屏幕上，包括文本、颜色、边框、阴影和替换的元素（如按钮和图像）。浏览器需要非常快地完成这项工作。 为了确保平滑滚动和动画，占据主线程的所有内容，包括计算样式，以及回流和绘制，必须让浏览器在 16.67 毫秒内完成。在 2048x1536 分辨率的 iPad 上，有超过 314.5 万像素将被绘制到屏幕上。那是很多像素需要快速绘制。为了确保重绘的速度比初始绘制的速度更快，屏幕上的绘图通常被分解成数层。如果发生这种情况，则需要进行合成。 @@ -182,7 +186,7 @@ CSSOM 树包括来自用户代理样式表的样式。浏览器从适用于节 分层确实可以提高性能，但是它以内存管理为代价，因此不应作为 web 性能优化策略的一部分过度使用。 -### Compositing +### 合成 当文档的各个部分以不同的层绘制，相互重叠时，必须进行合成，以确保它们以正确的顺序绘制到屏幕上，并正确显示内容。 @@ -190,9 +194,9 @@ CSSOM 树包括来自用户代理样式表的样式。浏览器从适用于节 ## 交互 -一旦主线程绘制页面完成，你会认为我们已经“准备好了”，但事实并非如此。如果加载包含 JavaScript（并且延迟到 [`onload`](/zh-CN/docs/Web/API/GlobalEventHandlers/onload) 事件激发后执行），则主线程可能很忙，无法用于滚动、触摸和其他交互。 +一旦主线程绘制页面完成，你会认为我们已经“准备好了”，但事实并非如此。如果加载包含 JavaScript（并且延迟到 [`onload`](/zh-CN/docs/Web/API/Window/load_event) 事件触发后执行），则主线程可能很忙，无法用于滚动、触摸和其他交互。 -{{glossary('Time to Interactive')}}（TTI）是测量从第一个请求导致 DNS 查询和 SSL 连接到页面可交互时所用的时间——可交互是 {{glossary('First Contentful Paint')}} 之后的时间点，页面在 50ms 内响应用户的交互。如果主线程正在解析、编译和执行 JavaScript，则它不可用，因此无法及时（小于 50ms）响应用户交互。 +{{glossary('Time to Interactive', '可交互时间（TTI）')}}是测量从第一个请求导致 DNS 查询和 SSL 连接到页面可交互时所用的时间——可交互是 {{glossary('First Contentful Paint')}} 之后的时间点，页面在 50ms 内响应用户的交互。如果主线程正在解析、编译和执行 JavaScript，则它不可用，因此无法及时（小于 50ms）响应用户交互。 在我们的示例中，可能图像加载很快，但 `anotherscript.js` 文件可能是 2MB，而且用户的网络连接很慢。在这种情况下，用户可以非常快地看到页面，但是在下载、解析和执行脚本之前，就无法滚动。这不是一个好的用户体验。避免占用主线程，如下面的网页测试示例所示： From ff161afdc59577a5eaf45808468917a2dd2a1209 Mon Sep 17 00:00:00 2001 From: Leonid Vinogradov Date: Mon, 30 Oct 2023 17:54:21 +0300 Subject: [PATCH 54/91] feat(ru): update translation of "First-class function" in Glossary (#16722) Co-authored-by: Sasha Sushko --- .../ru/glossary/first-class_function/index.md | 68 ++++++++++++++++--- 1 file changed, 58 insertions(+), 10 deletions(-) diff --git a/files/ru/glossary/first-class_function/index.md b/files/ru/glossary/first-class_function/index.md index 6472e7970cc90e..a1ea990796ad26 100644 --- a/files/ru/glossary/first-class_function/index.md +++ b/files/ru/glossary/first-class_function/index.md @@ -3,19 +3,67 @@ title: Функции первого класса slug: Glossary/First-class_Function --- -Если язык программирования имеет функции первого класса, то значит они трактуются как объекты, то есть могут быть переданы другим функциям и их можно вернуть из функций. Так же их можно присваивать переменным. +{{GlossarySidebar}} -## Пример +Говорят, что в языке программирования есть **функции первого класса**, если с функциями в этом языке обращаются как с любой другой переменной. Например, передают в качестве аргумента другим функциям, возвращают из другой функции или присваивают переменной в качестве значения. -``` -/* функция не имеет имени и находится в правой части команды присваивания переменной.*/ +## Примеры + +### Присвоение функции в качестве значения переменной -var dog = function(num) { - for (var i = 0; i < num; i++) { - alert("Woof"); - } +```js +const foo = () => { + console.log("foobar"); }; -dog(3); //Эту функцию можно вызвать через переменную dog. + +// Вызов функции с использованием переменной +foo(); // Выведет в консоль строку "foobar" +``` + +Мы присвоили _анонимную функцию_ {{glossary("Variable", "переменной")}}, а затем использовали эту переменную для вызова функции, добавив круглые скобки `()` в конце. + +> **Примечание:** Даже если у вашей функции было имя, вы можете использовать имя переменной для её вызова. Именование функции будет полезно при отладке кода, _но это не повлияет на то, как мы её вызываем_. + +### Передача функции в качестве аргумента + +```js +function sayHello() { + return "Привет, "; +} + +function greeting(helloMessage, name) { + console.log(helloMessage() + name); +} + +// Передача функции `sayHello` в качестве аргумента функции `greeting` +greeting(sayHello, "JavaScript!"); // Выведет в консоль строку "Привет, JavaScript!" ``` -Такое использование ключевого слова function — внутри команды, как в команде присваивания, — называется функциональным выражением. В отличие от объявления, эта функция не имеет имени. Кроме того, результатом этого выражения является значение, которое затем присваивается переменной dog. Что это за значение? Мы присваиваем его переменной dog, а затем вызываем через эту переменную, значит, это есть ссылка на функцию. +Мы передали нашу функцию `sayHello()` в качестве аргумента функции `greeting()`, это показывает, что функцию можно рассматривать в качестве значения. + +> **Примечание:** Функция, которую передают в качестве значения другой функции (в данном примере `sayHello()`), называется _{{glossary("callback function", "колбэк-функцией")}}_. + +### Возвращение функции + +```js +function sayHello() { + return () => { + console.log("Привет!"); + }; +} + +// Вызов анонимной функции, которую возвращает функция `sayHello`. Обратите внимание на повторяющиеся два раза круглые скобки +sayHello()(); // Выведет в консоль строку "Привет!" +``` + +В этом примере мы возвращаем функцию из другой функции, это возможно, потому что _функции в JavaScript могут быть значениями._ + +> **Примечание:** Функция, которая возвращает функцию или принимает другие функции в качестве аргументов, называется _функцией высшего порядка_. + +## Смотрите также + +- [Функции первого класса](https://ru.wikipedia.org/wiki/Функции_первого_класса) на Википедии +- [Глоссарий](/ru/docs/Glossary) + - {{glossary("Variable", "Переменная")}} + - {{glossary("Function", "Функция")}} + - {{glossary("Callback function", "Колбэк-функция")}} From c30c6dbb2bbeaf6f28024747abe1c9a2db383b1d Mon Sep 17 00:00:00 2001 From: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Date: Tue, 31 Oct 2023 13:42:05 +0800 Subject: [PATCH 55/91] [zh-cn]: update glossary attribute (#16780) --- files/zh-cn/glossary/attribute/index.md | 44 +++++++++++++++++++++++-- 1 file changed, 42 insertions(+), 2 deletions(-) diff --git a/files/zh-cn/glossary/attribute/index.md b/files/zh-cn/glossary/attribute/index.md index 41141a7ef4445c..320929fc377196 100644 --- a/files/zh-cn/glossary/attribute/index.md +++ b/files/zh-cn/glossary/attribute/index.md @@ -1,11 +1,51 @@ --- -title: Attribute +title: 属性 slug: Glossary/Attribute +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -**Attribute** （标签属性）用于拓展 HTML [for paragraph. Note that the end tag's name is preceded by a slash character, "\

    ", and that in empty elements the end tag is neither required nor allowed. If attributes are not mentioned, default values are used in each case.">tag](/zh-CN/docs/Glossary/tag)，可改变标签行为或提供元数据，属性总是以`name = value`的格式（属性的识别码后接与之相关的值） +**属性**（Attribute）可扩展 HTML 或 XML {{Glossary("element", "元素")}}，改变其行为或提供元数据。 + +属性的形式总是 `name="value"`（属性的标识符后跟相关的值）。 + +你可能会看到没有等号或值的属性。这是在 HTML 中提供空字符串或在 XML 中提供属性名称的简写。 + +```html + + + + + + +``` + +## 属性的反射 + +属性可以*反射*到特定接口的特定属性中。这意味着属性的值可以通过访问该属性来读取，并可通过将属性设置为不同的值来修改属性。 + +例如，下面的 `placeholder` 反射为 {{domxref("HTMLInputElement.placeholder")}}。 + +考虑这段 HTML 代码： + +```html + +``` + +我们可以使用 {{domxref("HTMLInputElement.placeholder")}} 检查属性与 {{domxref("HTMLInputElement.placeholder")}} 之间的反射性： + +```js +const input = document.querySelector("input"); +const attr = input.getAttributeNode("placeholder"); +console.log(attr.value); +console.log(input.placeholder); // 与 `attr.value` 打印的值相同 + +// 更改占位符的值也会更改反射属性的值。 +input.placeholder = "修改过的占位符"; +console.log(attr.value); // 打印出 `修改过的占位符` +``` ## 参见 From bb2c629af9b6f50b130d6e2b46dc8f8452921655 Mon Sep 17 00:00:00 2001 From: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Date: Tue, 31 Oct 2023 15:41:19 +0800 Subject: [PATCH 56/91] =?UTF-8?q?chore(zh-cn):=20batch=20replace=20'?= =?UTF-8?q?=E7=9B=B8=E5=85=B3=E9=93=BE=E6=8E=A5'=20to=20=E2=80=98=E5=8F=82?= =?UTF-8?q?=E8=A7=81'=20part=202=20&=20minor=20fixes=20(#16781)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: A1lo Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../zh-cn/web/api/cssstylerule/style/index.md | 18 ++++------- files/zh-cn/web/api/fetch/index.md | 6 ++-- files/zh-cn/web/api/filereader/abort/index.md | 2 +- files/zh-cn/web/api/filereader/error/index.md | 2 +- .../web/api/filereader/filereader/index.md | 4 +-- files/zh-cn/web/api/filereader/index.md | 5 +-- .../api/filereader/readasarraybuffer/index.md | 2 +- .../filereader/readasbinarystring/index.md | 2 +- files/zh-cn/web/api/filereadersync/index.md | 9 +++--- files/zh-cn/web/api/filesystem/index.md | 8 ++--- files/zh-cn/web/api/formdata/append/index.md | 6 ++-- files/zh-cn/web/api/formdata/entries/index.md | 6 ++-- .../zh-cn/web/api/formdata/formdata/index.md | 6 ++-- files/zh-cn/web/api/formdata/get/index.md | 6 ++-- files/zh-cn/web/api/formdata/getall/index.md | 6 ++-- files/zh-cn/web/api/formdata/has/index.md | 6 ++-- files/zh-cn/web/api/formdata/keys/index.md | 6 ++-- files/zh-cn/web/api/formdata/set/index.md | 6 ++-- .../formdata/using_formdata_objects/index.md | 6 ++-- files/zh-cn/web/api/formdata/values/index.md | 6 ++-- files/zh-cn/web/api/headers/index.md | 6 ++-- files/zh-cn/web/api/headers/keys/index.md | 6 ++-- files/zh-cn/web/api/response/index.md | 6 ++-- files/zh-cn/web/api/response/json/index.md | 6 ++-- files/zh-cn/web/api/response/ok/index.md | 6 ++-- .../web/api/response/redirected/index.md | 6 ++-- .../zh-cn/web/api/screen/colordepth/index.md | 20 +++++------- .../zh-cn/web/api/screen/pixeldepth/index.md | 16 ++++------ .../api/url/createobjecturl_static/index.md | 8 ++--- files/zh-cn/web/api/url/index.md | 9 +++--- files/zh-cn/web/api/worker/index.md | 10 +++--- .../web/api/xmlhttprequest/abort/index.md | 2 +- .../xmlhttprequest/progress_event/index.md | 8 ++--- .../api/xmlhttprequest/responsetype/index.md | 7 +++-- .../api/xmlhttprequest/timeout_event/index.md | 2 +- .../reference/operators/function/index.md | 10 +++--- .../operators/function_star_/index.md | 12 +++---- .../reference/operators/in/index.md | 6 ++-- .../reference/operators/instanceof/index.md | 3 +- .../reference/operators/new.target/index.md | 6 ++-- .../operators/spread_syntax/index.md | 6 ++-- .../reference/operators/this/index.md | 5 ++- .../reference/operators/yield_star_/index.md | 4 +-- .../reference/statements/block/index.md | 2 +- .../reference/statements/break/index.md | 4 +-- .../reference/statements/const/index.md | 4 +-- .../reference/statements/do...while/index.md | 4 ++- .../reference/statements/empty/index.md | 2 +- .../statements/for-await...of/index.md | 2 +- .../reference/statements/for...in/index.md | 6 ++-- .../reference/statements/for...of/index.md | 3 +- .../reference/statements/function/index.md | 13 ++++---- .../statements/function_star_/index.md | 31 ++++++++++--------- .../reference/statements/if...else/index.md | 4 +-- .../reference/statements/import/index.md | 19 ++++++------ .../reference/statements/switch/index.md | 4 +-- .../reference/statements/throw/index.md | 5 +-- .../reference/statements/try...catch/index.md | 2 +- .../javascript/reference/strict_mode/index.md | 14 +++------ 59 files changed, 187 insertions(+), 220 deletions(-) diff --git a/files/zh-cn/web/api/cssstylerule/style/index.md b/files/zh-cn/web/api/cssstylerule/style/index.md index 108a8d42a7d53e..5aa7af3561e844 100644 --- a/files/zh-cn/web/api/cssstylerule/style/index.md +++ b/files/zh-cn/web/api/cssstylerule/style/index.md @@ -5,17 +5,15 @@ slug: Web/API/CSSStyleRule/style {{ ApiRef() }} -### 概述 - 返回 一个 {{ domxref("CSSStyleDeclaration") }}接口对象，它代表了{{ DOMXref("CSSRule") }}的 [declaration block](http://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html#block)。 -### 语法 +## 语法 ```plain styleObj = cssRule.style ``` -### 例子 +## 示例 ```js function stilo() { @@ -24,18 +22,14 @@ function stilo() { // 弹出 "background-color: gray;" ``` -### 备注 +## 备注 declaration block 是样式规则中花括号内的部分（选择器就在花括号的外部） -### 相关链接 - -- [DOM CSS Properties](/zh-CN/CSS/CSS_Reference) - -### 规范 +## 规范 -[DOM Level 2 CSS: style](http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule-style) +{{Specifications}} -### 浏览器兼容性 +## 浏览器兼容性 {{Compat}} diff --git a/files/zh-cn/web/api/fetch/index.md b/files/zh-cn/web/api/fetch/index.md index adf2d6827799f2..7558db04cb61d4 100644 --- a/files/zh-cn/web/api/fetch/index.md +++ b/files/zh-cn/web/api/fetch/index.md @@ -124,9 +124,9 @@ var myRequest = new Request("flowers.jpg", myInit); {{Compat}} -## 相关链接 +## 参见 - [Fetch API](/zh-CN/docs/Web/API/Fetch_API) -- [ServiceWorker API](/zh-CN/docs/Web/API/ServiceWorker_API) -- [HTTP access control (CORS)](/zh-CN/docs/Web/HTTP/Access_control_CORS) +- [ServiceWorker API](/zh-CN/docs/Web/API/Service_Worker_API) +- [HTTP 访问控制（CORS）](/zh-CN/docs/Web/HTTP/CORS) - [HTTP](/zh-CN/docs/Web/HTTP) diff --git a/files/zh-cn/web/api/filereader/abort/index.md b/files/zh-cn/web/api/filereader/abort/index.md index 9ce27ac73d157c..04899ce53fbe89 100644 --- a/files/zh-cn/web/api/filereader/abort/index.md +++ b/files/zh-cn/web/api/filereader/abort/index.md @@ -26,6 +26,6 @@ instanceOfFileReader.abort(); {{Compat}} -## 相关链接 +## 参见 - {{domxref("FileReader")}} diff --git a/files/zh-cn/web/api/filereader/error/index.md b/files/zh-cn/web/api/filereader/error/index.md index 60c50cc3398b5b..ccd288031d6f8b 100644 --- a/files/zh-cn/web/api/filereader/error/index.md +++ b/files/zh-cn/web/api/filereader/error/index.md @@ -25,6 +25,6 @@ var error = instanceOfFileReader.error {{Compat}} -## 相关链接 +## 参见 - {{domxref("FileReader")}} diff --git a/files/zh-cn/web/api/filereader/filereader/index.md b/files/zh-cn/web/api/filereader/filereader/index.md index b4270166463bf2..885c4ef8b42e40 100644 --- a/files/zh-cn/web/api/filereader/filereader/index.md +++ b/files/zh-cn/web/api/filereader/filereader/index.md @@ -35,6 +35,6 @@ function printFile(file) { {{Specifications}} -## 相关链接 +## 参见 -- [Using files from web applications](/zh-CN/docs/Web/API/File/Using_files_from_web_applications) +- [在 web 应用程序中使用文件](/zh-CN/docs/Web/API/File_API/Using_files_from_web_applications) diff --git a/files/zh-cn/web/api/filereader/index.md b/files/zh-cn/web/api/filereader/index.md index ba44a4667e0649..84c273df2ea364 100644 --- a/files/zh-cn/web/api/filereader/index.md +++ b/files/zh-cn/web/api/filereader/index.md @@ -75,8 +75,9 @@ slug: Web/API/FileReader {{Compat}} -## 相关链接 +## 参见 -- [如何在 web 应用程序中使用文件](/zh-CN/Using_files_from_web_applications) +- [如何在 web 应用程序中使用文件](/zh-CN/docs/Web/API/File_API/Using_files_from_web_applications) - {{domxref("File")}} - {{domxref("Blob")}} +- {{domxref("FileReaderSync")}} diff --git a/files/zh-cn/web/api/filereader/readasarraybuffer/index.md b/files/zh-cn/web/api/filereader/readasarraybuffer/index.md index 49b01d6f11a3cc..27ebd677e429a8 100644 --- a/files/zh-cn/web/api/filereader/readasarraybuffer/index.md +++ b/files/zh-cn/web/api/filereader/readasarraybuffer/index.md @@ -26,6 +26,6 @@ instanceOfFileReader.readAsArrayBuffer(blob); {{Compat}} -## 相关链接 +## 参见 - {{domxref("FileReader")}} diff --git a/files/zh-cn/web/api/filereader/readasbinarystring/index.md b/files/zh-cn/web/api/filereader/readasbinarystring/index.md index 863571f8176a29..2ac344ba0d95b9 100644 --- a/files/zh-cn/web/api/filereader/readasbinarystring/index.md +++ b/files/zh-cn/web/api/filereader/readasbinarystring/index.md @@ -56,6 +56,6 @@ canvas.toBlob(function (blob) { {{Compat}} -## 相关链接 +## 参见 - {{domxref("FileReader")}} diff --git a/files/zh-cn/web/api/filereadersync/index.md b/files/zh-cn/web/api/filereadersync/index.md index b1af8abe72309f..8fb9bfae2c8e8b 100644 --- a/files/zh-cn/web/api/filereadersync/index.md +++ b/files/zh-cn/web/api/filereadersync/index.md @@ -179,7 +179,7 @@ String readAsDataURL( - `EncodingError` - : 当资源是一个 data URL，并且超过了浏览器的限制大小时触发该异常。 -## Specifications +## 规范 {{Specifications}} @@ -187,7 +187,8 @@ String readAsDataURL( {{Compat}} -## 相关链接 +## 参见 -- [File API Specification: FileReaderSync](https://www.w3.org/TR/FileAPI/#FileReaderSync) -- Related interfaces: {{ domxref("FileReader") }}, {{ domxref("BlobBuilder") }}, {{ domxref("File") }}, {{ domxref("Blob") }} +- {{DOMxRef("FileReader")}} +- {{DOMxRef("Blob")}} +- {{DOMxRef("File")}} diff --git a/files/zh-cn/web/api/filesystem/index.md b/files/zh-cn/web/api/filesystem/index.md index afb2b7ad17e17f..ac169adbb5d6a3 100644 --- a/files/zh-cn/web/api/filesystem/index.md +++ b/files/zh-cn/web/api/filesystem/index.md @@ -33,8 +33,8 @@ slug: Web/API/FileSystem {{Compat}} -## 相关链接 +## 参见 -引用：[File System API](/zh-CN/DOM/File_API/File_System_API) - -介绍：[Basic Concepts About the File System API](/zh-CN/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API) +- [文件与目录条目 API](/zh-CN/docs/Web/API/File_and_Directory_Entries_API) +- [文件与目录条目 API 介绍](/zh-CN/docs/Web/API/File_and_Directory_Entries_API/Introduction) +- {{domxref("FileSystemEntry")}}、{{domxref("FileSystemFileEntry")}} 和 {{domxref("FileSystemDirectoryEntry")}} diff --git a/files/zh-cn/web/api/formdata/append/index.md b/files/zh-cn/web/api/formdata/append/index.md index cd77f5ab9bff9d..d14b4fe74dba71 100644 --- a/files/zh-cn/web/api/formdata/append/index.md +++ b/files/zh-cn/web/api/formdata/append/index.md @@ -67,9 +67,7 @@ formData.append("userpic[]", myFileInput2.files[0], "chris2.jpg"); {{Compat}} -## 相关链接 +## 参见 -- {{domxref("XMLHTTPRequest")}} -- [Using XMLHttpRequest](/zh-CN/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest) -- [Using FormData objects](/zh-CN/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects) +- [使用 FormData 对象](/zh-CN/docs/Web/API/FormData/Using_FormData_Objects) - {{HTMLElement("Form")}} diff --git a/files/zh-cn/web/api/formdata/entries/index.md b/files/zh-cn/web/api/formdata/entries/index.md index 7d478a4d3bed9d..0c28e2fc4d0526 100644 --- a/files/zh-cn/web/api/formdata/entries/index.md +++ b/files/zh-cn/web/api/formdata/entries/index.md @@ -48,9 +48,7 @@ key2, value2 {{Compat}} -## 相关链接 +## 参见 -- {{domxref("XMLHTTPRequest")}} -- [Using XMLHttpRequest](/zh-CN/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest) -- [Using FormData objects](/zh-CN/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects) +- [使用 FormData 对象](/zh-CN/docs/Web/API/FormData/Using_FormData_Objects) - {{HTMLElement("Form")}} diff --git a/files/zh-cn/web/api/formdata/formdata/index.md b/files/zh-cn/web/api/formdata/formdata/index.md index 656d5a9adf69a2..fdca834380a9d2 100644 --- a/files/zh-cn/web/api/formdata/formdata/index.md +++ b/files/zh-cn/web/api/formdata/formdata/index.md @@ -73,9 +73,7 @@ formData = new FormData(myForm); 在 Gecko 7.0 之前，如果你将{{domxref("Blob")}}作为数据添加到 form 对象中，文件名就是空的，这可能导致服务器在 HTTP 头的 Content-Disposition 中设置的文件名为空而引起错误。从 Gecko 7.0 开始，将会使用"blob"作为 Blob 数据的文件名。 -## 相关链接 +## 参见 -- {{domxref("XMLHTTPRequest")}} -- [Using XMLHttpRequest](/zh-CN/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest) -- [Using FormData objects](/zh-CN/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects) +- [使用 FormData 对象](/zh-CN/docs/Web/API/FormData/Using_FormData_Objects) - {{HTMLElement("Form")}} diff --git a/files/zh-cn/web/api/formdata/get/index.md b/files/zh-cn/web/api/formdata/get/index.md index 0dae07bc5ef160..a805cfd6876d85 100644 --- a/files/zh-cn/web/api/formdata/get/index.md +++ b/files/zh-cn/web/api/formdata/get/index.md @@ -53,9 +53,7 @@ formData.get("username"); // Returns "Chris" {{Compat}} -## 相关链接 +## 参见 -- {{domxref("XMLHTTPRequest")}} -- [Using XMLHttpRequest](/zh-CN/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest) -- [Using FormData objects](/zh-CN/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects) +- [使用 FormData 对象](/zh-CN/docs/Web/API/FormData/Using_FormData_Objects) - {{HTMLElement("Form")}} diff --git a/files/zh-cn/web/api/formdata/getall/index.md b/files/zh-cn/web/api/formdata/getall/index.md index 2155fdae1231b8..94f34c2456d856 100644 --- a/files/zh-cn/web/api/formdata/getall/index.md +++ b/files/zh-cn/web/api/formdata/getall/index.md @@ -53,9 +53,7 @@ formData.getAll("username"); // Returns ["Chris", "Bob"] {{Compat}} -## 相关链接 +## 参见 -- {{domxref("XMLHTTPRequest")}} -- [使用 XMLHttpRequest](/zh-CN/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest) -- [使用 FormData 对象](/zh-CN/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects) +- [使用 FormData 对象](/zh-CN/docs/Web/API/FormData/Using_FormData_Objects) - {{HTMLElement("Form")}} diff --git a/files/zh-cn/web/api/formdata/has/index.md b/files/zh-cn/web/api/formdata/has/index.md index 9f86945ced5713..38790d5573d3fc 100644 --- a/files/zh-cn/web/api/formdata/has/index.md +++ b/files/zh-cn/web/api/formdata/has/index.md @@ -48,9 +48,7 @@ formData.has("username"); // Returns true {{Compat}} -## 相关链接 +## 参见 -- {{domxref("XMLHTTPRequest")}} -- [Using XMLHttpRequest](/zh-CN/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest) -- [Using FormData objects](/zh-CN/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects) +- [使用 FormData 对象](/zh-CN/docs/Web/API/FormData/Using_FormData_Objects) - {{HTMLElement("Form")}} diff --git a/files/zh-cn/web/api/formdata/keys/index.md b/files/zh-cn/web/api/formdata/keys/index.md index ad8b8e704b58a0..34b8f7744f7e36 100644 --- a/files/zh-cn/web/api/formdata/keys/index.md +++ b/files/zh-cn/web/api/formdata/keys/index.md @@ -48,9 +48,7 @@ key2 {{Compat}} -## 相关链接 +## 参见 -- {{domxref("XMLHTTPRequest")}} -- [Using XMLHttpRequest](/zh-CN/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest) -- [Using FormData objects](/zh-CN/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects) +- [使用 FormData 对象](/zh-CN/docs/Web/API/FormData/Using_FormData_Objects) - {{HTMLElement("Form")}} diff --git a/files/zh-cn/web/api/formdata/set/index.md b/files/zh-cn/web/api/formdata/set/index.md index 8d4875b48e6d35..7e2fa65e454436 100644 --- a/files/zh-cn/web/api/formdata/set/index.md +++ b/files/zh-cn/web/api/formdata/set/index.md @@ -55,9 +55,7 @@ formData.set("userpic", myFileInput.files[0], "chris.jpg"); {{Compat}} -## 相关链接 +## 参见 -- {{domxref("XMLHTTPRequest")}} -- [Using XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) -- [Using FormData objects](/zh-CN/docs/Web/API/FormData/Using_FormData_Objects) +- [使用 FormData 对象](/zh-CN/docs/Web/API/FormData/Using_FormData_Objects) - {{HTMLElement("Form")}} diff --git a/files/zh-cn/web/api/formdata/using_formdata_objects/index.md b/files/zh-cn/web/api/formdata/using_formdata_objects/index.md index c7b5e97067ce14..5ed208efb3a9d9 100644 --- a/files/zh-cn/web/api/formdata/using_formdata_objects/index.md +++ b/files/zh-cn/web/api/formdata/using_formdata_objects/index.md @@ -150,9 +150,9 @@ $.ajax({ 如果你想知道不使用 FormData 对象的情况下，通过[AJAX](/zh-CN/docs/AJAX)序列化和提交表单 [请点击这里](/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files)。 -## 相关链接 +## 参见 -- [Using XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) +- [使用 XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) - {{domxref("HTMLFormElement")}} - {{domxref("Blob")}} -- [Typed Arrays](/zh-CN/docs/Web/JavaScript/Typed_arrays) +- [类型化数组](/zh-CN/docs/Web/JavaScript/Guide/Typed_arrays) diff --git a/files/zh-cn/web/api/formdata/values/index.md b/files/zh-cn/web/api/formdata/values/index.md index a59b939ebfe5db..fa0e55184d04d0 100644 --- a/files/zh-cn/web/api/formdata/values/index.md +++ b/files/zh-cn/web/api/formdata/values/index.md @@ -48,9 +48,7 @@ value2 {{Compat}} -## 相关链接 +## 参见 -- {{domxref("XMLHTTPRequest")}} -- [Using XMLHttpRequest](/zh-CN/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest) -- [Using FormData objects](/zh-CN/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects) +- [使用 FormData 对象](/zh-CN/docs/Web/API/FormData/Using_FormData_Objects) - {{HTMLElement("Form")}} diff --git a/files/zh-cn/web/api/headers/index.md b/files/zh-cn/web/api/headers/index.md index e5e64506fc18e3..00b1db41268d2d 100644 --- a/files/zh-cn/web/api/headers/index.md +++ b/files/zh-cn/web/api/headers/index.md @@ -73,8 +73,8 @@ myHeaders.get("Content-Type"); {{Compat}} -## 相关链接 +## 参见 -- [ServiceWorker API](/zh-CN/docs/Web/API/ServiceWorker_API) -- [HTTP access control (CORS)](/zh-CN/docs/Web/HTTP/Access_control_CORS) +- [ServiceWorker API](/zh-CN/docs/Web/API/Service_Worker_API) +- [HTTP 访问控制（CORS）](/zh-CN/docs/Web/HTTP/CORS) - [HTTP](/zh-CN/docs/Web/HTTP) diff --git a/files/zh-cn/web/api/headers/keys/index.md b/files/zh-cn/web/api/headers/keys/index.md index d5903d7b28fc8c..bdd55b673bc5b4 100644 --- a/files/zh-cn/web/api/headers/keys/index.md +++ b/files/zh-cn/web/api/headers/keys/index.md @@ -44,8 +44,8 @@ vary {{Compat}} -## 相关链接 +## 参见 -- [ServiceWorker API](/zh-CN/docs/Web/API/ServiceWorker_API) -- [HTTP access control (CORS)](/zh-CN/docs/Web/HTTP/Access_control_CORS) +- [ServiceWorker API](/zh-CN/docs/Web/API/Service_Worker_API) +- [HTTP 访问控制（CORS）](/zh-CN/docs/Web/HTTP/CORS) - [HTTP](/zh-CN/docs/Web/HTTP) diff --git a/files/zh-cn/web/api/response/index.md b/files/zh-cn/web/api/response/index.md index 13815ab0c9cb73..449a83ceac7ee8 100644 --- a/files/zh-cn/web/api/response/index.md +++ b/files/zh-cn/web/api/response/index.md @@ -92,8 +92,8 @@ const response = new Response(); {{Compat}} -## 相关链接 +## 参见 -- [ServiceWorker API](/zh-CN/docs/Web/API/ServiceWorker_API) -- [HTTP access control (CORS)](/zh-CN/docs/Web/HTTP/Access_control_CORS) +- [ServiceWorker API](/zh-CN/docs/Web/API/Service_Worker_API) +- [HTTP 访问控制（CORS）](/zh-CN/docs/Web/HTTP/CORS) - [HTTP](/zh-CN/docs/Web/HTTP) diff --git a/files/zh-cn/web/api/response/json/index.md b/files/zh-cn/web/api/response/json/index.md index cb10e377f15b7d..d80be00efcc1fb 100644 --- a/files/zh-cn/web/api/response/json/index.md +++ b/files/zh-cn/web/api/response/json/index.md @@ -53,8 +53,8 @@ fetch(myRequest) {{Compat}} -## 相关链接 +## 参见 -- [ServiceWorker API](/zh-CN/docs/Web/API/ServiceWorker_API) -- [HTTP access control (CORS)](/zh-CN/docs/Web/HTTP/Access_control_CORS) +- [ServiceWorker API](/zh-CN/docs/Web/API/Service_Worker_API) +- [HTTP 访问控制（CORS）](/zh-CN/docs/Web/HTTP/CORS) - [HTTP](/zh-CN/docs/Web/HTTP) diff --git a/files/zh-cn/web/api/response/ok/index.md b/files/zh-cn/web/api/response/ok/index.md index 1b455cd441409a..6e20fec7ffb0dd 100644 --- a/files/zh-cn/web/api/response/ok/index.md +++ b/files/zh-cn/web/api/response/ok/index.md @@ -45,8 +45,8 @@ fetch(myRequest).then(function (response) { {{Compat}} -## 相关链接 +## 参见 -- [ServiceWorker API](/zh-CN/docs/Web/API/ServiceWorker_API) -- [HTTP access control (CORS)](/zh-CN/docs/Web/HTTP/Access_control_CORS) +- [ServiceWorker API](/zh-CN/docs/Web/API/Service_Worker_API) +- [HTTP 访问控制（CORS）](/zh-CN/docs/Web/HTTP/CORS) - [HTTP](/zh-CN/docs/Web/HTTP) diff --git a/files/zh-cn/web/api/response/redirected/index.md b/files/zh-cn/web/api/response/redirected/index.md index d610293c20bea3..d16ed7f9beb6cb 100644 --- a/files/zh-cn/web/api/response/redirected/index.md +++ b/files/zh-cn/web/api/response/redirected/index.md @@ -65,9 +65,9 @@ fetch("awesome-picture.jpg", { redirect: "error" }) {{Compat}} -## 相关链接 +## 参见 - [Fetch API](/zh-CN/docs/Web/API/Fetch_API) -- [ServiceWorker API](/zh-CN/docs/Web/API/ServiceWorker_API) -- [HTTP access control (CORS)](/zh-CN/docs/Web/HTTP/Access_control_CORS) +- [ServiceWorker API](/zh-CN/docs/Web/API/Service_Worker_API) +- [HTTP 访问控制（CORS）](/zh-CN/docs/Web/HTTP/CORS) - [HTTP](/zh-CN/docs/Web/HTTP) diff --git a/files/zh-cn/web/api/screen/colordepth/index.md b/files/zh-cn/web/api/screen/colordepth/index.md index 26fa0a51a2fd06..0494399b9171d4 100644 --- a/files/zh-cn/web/api/screen/colordepth/index.md +++ b/files/zh-cn/web/api/screen/colordepth/index.md @@ -3,23 +3,15 @@ title: Screen.colorDepth slug: Web/API/Screen/colorDepth --- -{{APIRef("CSSOM View")}} - -## 概述 +{{APIRef("CSSOM")}} 返回屏幕的颜色深度（color depth）。根据 CSSOM( CSS 对象模型 ) 视图，为兼容起见，该值总为 24。 -## 语法 - -```plain -bitDepth = window.screen.colorDepth -``` - ## 示例 -```plain +```js // 检测屏幕的颜色深度 -if ( window.screen.colorDepth < 8) { +if (window.screen.colorDepth < 8) { // 使用低色彩版本页面 } else { // 使用常规的彩色版页面 @@ -30,6 +22,10 @@ if ( window.screen.colorDepth < 8) { {{Specifications}} -## 相关链接 +## 浏览器兼容性 + +{{Compat}} + +## 参见 - {{domxref("Screen.pixelDepth")}} diff --git a/files/zh-cn/web/api/screen/pixeldepth/index.md b/files/zh-cn/web/api/screen/pixeldepth/index.md index 93f3776b9289bf..6e25023fce882a 100644 --- a/files/zh-cn/web/api/screen/pixeldepth/index.md +++ b/files/zh-cn/web/api/screen/pixeldepth/index.md @@ -3,18 +3,10 @@ title: Screen.pixelDepth slug: Web/API/Screen/pixelDepth --- -{{APIRef("CSSOM View")}} - -## 概述 +{{APIRef("CSSOM")}} 返回屏幕的位深度/色彩深度（bit depth）。根据 CSSOM( CSS 对象模型 ) 视图，为兼容起见，该值总为 24。 -## 语法 - -```plain -depth = window.screen.pixelDepth -``` - ## 示例 ```js @@ -30,6 +22,10 @@ if (window.screen.pixelDepth > 8) { {{Specifications}} -## 相关链接 +## 浏览器兼容性 + +{{Compat}} + +## 参见 - {{domxref("Screen.colorDepth")}} diff --git a/files/zh-cn/web/api/url/createobjecturl_static/index.md b/files/zh-cn/web/api/url/createobjecturl_static/index.md index 6d16223ff06f84..086ac71178172a 100644 --- a/files/zh-cn/web/api/url/createobjecturl_static/index.md +++ b/files/zh-cn/web/api/url/createobjecturl_static/index.md @@ -52,10 +52,10 @@ objectURL = URL.createObjectURL(object); {{Compat}} -## 相关链接 +## 参见 -- [在 web 应用程序中使用文件](/zh-CN/docs/Using_files_from_web_applications) -- [Using object URLs to display images](/zh-CN/docs/Using_files_from_web_applications#Example_Using_object_URLs_to_display_images) -- {{domxref("URL.revokeObjectURL()")}} +- [在 web 应用程序中使用文件](/zh-CN/docs/Web/API/File_API/Using_files_from_web_applications) +- [使用对象 URL 显示图像](/zh-CN/docs/Web/API/File_API/Using_files_from_web_applications#示例：使用对象_url_来显示图片) +- {{domxref("URL.revokeObjectURL_static", "URL.revokeObjectURL()")}} - {{domxref("HTMLMediaElement.srcObject")}} - {{domxref("FileReader.readAsDataURL()")}} diff --git a/files/zh-cn/web/api/url/index.md b/files/zh-cn/web/api/url/index.md index bba10e5f94c949..f8b094e7f8fb3b 100644 --- a/files/zh-cn/web/api/url/index.md +++ b/files/zh-cn/web/api/url/index.md @@ -105,9 +105,10 @@ const response = await fetch(new URL('http://www.example.com/démonstration.html {{Compat}} -## 相关链接 +## 参见 +- [`core-js` 中针对 `URL` 的 polyfill](https://github.com/zloirock/core-js#url-and-urlsearchparams) - [URL API](/zh-CN/docs/Web/API/URL_API) -- [What is a URL?](/zh-CN/docs/Learn/Common_questions/What_is_a_URL) -- Property to obtain a `URL` object: {{domxref("Window.URL")}}. -- {{domxref("URLSearchParams")}}. +- [什么是 URL？](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL) +- 获取 `URL` 对象的属性：{{domxref("URL")}} +- {{domxref("URLSearchParams")}} diff --git a/files/zh-cn/web/api/worker/index.md b/files/zh-cn/web/api/worker/index.md index a7785563800242..ee64a740b7c519 100644 --- a/files/zh-cn/web/api/worker/index.md +++ b/files/zh-cn/web/api/worker/index.md @@ -71,9 +71,9 @@ first.onchange = function () { 浏览器的早期版本中，加载跨域的执行者脚本导致 `SecurityError`事件。根据规范的变更，而新版本的浏览器只有[`error`](/zh-CN/docs/Web/API/Element/error_event)事件发生 -## 相关链接 +## 参见 -- [Using web workers](/En/Using_web_workers) -- [Functions available to workers](/En/DOM/Worker/Functions_available_to_workers) -- Other kind of workers: {{ domxref("SharedWorker") }} and [ServiceWorker](/zh-CN/docs/Web/API/ServiceWorker_API). -- Non-standard, Gecko-specific workers: {{ domxref("ChromeWorker") }}, used by extensions. +- [使用 Web Worker](/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers) +- [Web Worker 可用的函数和类](/zh-CN/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers) +- 其他类型的 worker：{{ domxref("SharedWorker") }} 和 [ServiceWorker](/zh-CN/docs/Web/API/Service_Worker_API). +- [`OffscreenCanvas`](/zh-CN/docs/Web/API/OffscreenCanvas) 接口 diff --git a/files/zh-cn/web/api/xmlhttprequest/abort/index.md b/files/zh-cn/web/api/xmlhttprequest/abort/index.md index 280aeb951feb16..5cd923dd45dfff 100644 --- a/files/zh-cn/web/api/xmlhttprequest/abort/index.md +++ b/files/zh-cn/web/api/xmlhttprequest/abort/index.md @@ -44,6 +44,6 @@ if (OH_NOES_WE_NEED_TO_CANCEL_RIGHT_NOW_OR_ELSE) { {{Compat}} -## 相关链接 +## 参见 - [使用 XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) diff --git a/files/zh-cn/web/api/xmlhttprequest/progress_event/index.md b/files/zh-cn/web/api/xmlhttprequest/progress_event/index.md index 88de92a9b8a9d5..b2b7ccf7018a9c 100644 --- a/files/zh-cn/web/api/xmlhttprequest/progress_event/index.md +++ b/files/zh-cn/web/api/xmlhttprequest/progress_event/index.md @@ -118,7 +118,7 @@ xhrButtonAbort.addEventListener("click", () => { }); ``` -#### Result +#### 结果 {{ EmbedLiveSample('Live_example', '100%', '150px') }} @@ -130,7 +130,7 @@ xhrButtonAbort.addEventListener("click", () => { {{Compat}} -## 相关链接 +## 参见 -- Related events: {{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}, {{domxref("XMLHttpRequest/load_event", "load")}}, {{domxref("XMLHttpRequest/loadend_event", "loadend")}}, {{domxref("XMLHttpRequest/error_event", "error")}}, {{domxref("XMLHttpRequest/abort_event", "abort")}} -- [Monitoring progress](/zh-CN/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress) +- 相关事件：{{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}、{{domxref("XMLHttpRequest/load_event", "load")}}、{{domxref("XMLHttpRequest/loadend_event", "loadend")}}、{{domxref("XMLHttpRequest/error_event", "error")}}、{{domxref("XMLHttpRequest/abort_event", "abort")}} +- [监测进度](/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#监测进度) diff --git a/files/zh-cn/web/api/xmlhttprequest/responsetype/index.md b/files/zh-cn/web/api/xmlhttprequest/responsetype/index.md index 7ef36d66eb8262..e8eb577ed9fa95 100644 --- a/files/zh-cn/web/api/xmlhttprequest/responsetype/index.md +++ b/files/zh-cn/web/api/xmlhttprequest/responsetype/index.md @@ -63,8 +63,9 @@ XHR 请求默认是异步的；它们仅通过在调用 {{DOMxRef("XMLHttpReques {{Compat}} -## 相关链接 +## 参见 - [使用 XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) -- [HTML in XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest) -- {{DOMxRef("XMLHttpRequest.response", "response")}}, {{DOMxRef("XMLHttpRequest.responseText", "responseText")}} 和 {{DOMxRef("XMLHttpRequest.responseXML", "responseXML")}} +- [XMLHttpRequest 中的 HTML](/zh-CN/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest) +- 响应数据：{{domxref("XMLHttpRequest.response", "response")}}、 + {{domxref("XMLHttpRequest.responseText", "responseText")}} 和 {{domxref("XMLHttpRequest.responseXML", "responseXML")}} diff --git a/files/zh-cn/web/api/xmlhttprequest/timeout_event/index.md b/files/zh-cn/web/api/xmlhttprequest/timeout_event/index.md index c63e6d64ef8bcb..d07bfb7170aca5 100644 --- a/files/zh-cn/web/api/xmlhttprequest/timeout_event/index.md +++ b/files/zh-cn/web/api/xmlhttprequest/timeout_event/index.md @@ -49,6 +49,6 @@ client.send(); {{Compat}} -## 相关链接 +## 参见 - [XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest) diff --git a/files/zh-cn/web/javascript/reference/operators/function/index.md b/files/zh-cn/web/javascript/reference/operators/function/index.md index 98cc4d411aeb96..e6a3ac5b47bcd9 100644 --- a/files/zh-cn/web/javascript/reference/operators/function/index.md +++ b/files/zh-cn/web/javascript/reference/operators/function/index.md @@ -100,11 +100,9 @@ button.addEventListener("click", function (event) { {{Compat}} -## 相关链接 +## 参见 -- {{jsxref("Functions_and_function_scope", "Functions and function scope")}} +- {{jsxref("Functions/Arrow_functions", "箭头函数", "", 1)}} +- {{jsxref("Functions", "函数", "", 1)}} - {{jsxref("Function")}} -- {{jsxref("Statements/function", "function statement")}} -- {{jsxref("Statements/function*", "function* statement")}} -- {{jsxref("Operators/function*", "function* expression")}} -- {{jsxref("GeneratorFunction")}} +- {{jsxref("Statements/function", "function 语句", "", 1)}} diff --git a/files/zh-cn/web/javascript/reference/operators/function_star_/index.md b/files/zh-cn/web/javascript/reference/operators/function_star_/index.md index 2d38996c3b3ab0..ac3155ee0e6a21 100644 --- a/files/zh-cn/web/javascript/reference/operators/function_star_/index.md +++ b/files/zh-cn/web/javascript/reference/operators/function_star_/index.md @@ -48,14 +48,10 @@ var x = function* (y) { {{Compat}} -## 相关链接 +## 参见 -- {{jsxref("Statements/function*", "function* statement")}} -- {{jsxref("GeneratorFunction")}} 对象 -- [The Iterator protocol](/zh-CN/docs/Web/JavaScript/Guide/The_Iterator_protocol) +- {{jsxref("Statements/function*", "function*")}} +- {{jsxref("GeneratorFunction")}} +- [迭代器协议](/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols) - {{jsxref("Operators/yield", "yield")}} - {{jsxref("Operators/yield*", "yield*")}} -- {{jsxref("Function")}} 对象 -- {{jsxref("Statements/function", "function statement")}} -- {{jsxref("Operators/function", "function expression")}} -- {{jsxref("Functions_and_function_scope", "Functions and function scope")}} diff --git a/files/zh-cn/web/javascript/reference/operators/in/index.md b/files/zh-cn/web/javascript/reference/operators/in/index.md index 9404a60632ee75..cb8205f18abba8 100644 --- a/files/zh-cn/web/javascript/reference/operators/in/index.md +++ b/files/zh-cn/web/javascript/reference/operators/in/index.md @@ -100,10 +100,10 @@ trees[3] = undefined; {{Compat}} -## 相关链接 +## 参见 - [`for...in`](/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in) - [`delete`](/zh-CN/docs/JavaScript/Reference/Operators/delete) -- {{jsxref("Object.prototype.hasOwnProperty()")}} +- {{jsxref("Object.hasOwn()")}} - {{jsxref("Reflect.has()")}} -- [属性的可枚举性和所有权](/zh-CN/docs/Enumerability_and_ownership_of_properties) +- [属性的可枚举性和所有权](/zh-CN/docs/Web/JavaScript/Enumerability_and_ownership_of_properties) diff --git a/files/zh-cn/web/javascript/reference/operators/instanceof/index.md b/files/zh-cn/web/javascript/reference/operators/instanceof/index.md index 84ab2094bb7ff8..e818fd8d7e575b 100644 --- a/files/zh-cn/web/javascript/reference/operators/instanceof/index.md +++ b/files/zh-cn/web/javascript/reference/operators/instanceof/index.md @@ -138,7 +138,8 @@ if (!mycar instanceof Car) {{Compat}} -## 相关链接 +## 参见 - [typeof](/zh-CN/docs/JavaScript/Reference/Operators/typeof) - {{jsxref("Symbol.hasInstance")}} +- {{jsxref("Object.prototype.isPrototypeOf")}} diff --git a/files/zh-cn/web/javascript/reference/operators/new.target/index.md b/files/zh-cn/web/javascript/reference/operators/new.target/index.md index 6210ccb899e131..8bfc4dbf954ac4 100644 --- a/files/zh-cn/web/javascript/reference/operators/new.target/index.md +++ b/files/zh-cn/web/javascript/reference/operators/new.target/index.md @@ -78,9 +78,9 @@ var d = new D(); // logs class D extends C{constructor(){super();}} {{Compat}} -## 相关链接 +## 参见 -- [Functions](/zh-CN/docs/Web/JavaScript/Reference/Functions) -- [Classes](/zh-CN/docs/Web/JavaScript/Reference/Classes) +- [函数](/zh-CN/docs/Web/JavaScript/Reference/Functions) +- [类](/zh-CN/docs/Web/JavaScript/Reference/Classes) - [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new) - [`this`](/zh-CN/docs/Web/JavaScript/Reference/Operators/this) diff --git a/files/zh-cn/web/javascript/reference/operators/spread_syntax/index.md b/files/zh-cn/web/javascript/reference/operators/spread_syntax/index.md index 6192d963e91631..2d37f761e1e3fc 100644 --- a/files/zh-cn/web/javascript/reference/operators/spread_syntax/index.md +++ b/files/zh-cn/web/javascript/reference/operators/spread_syntax/index.md @@ -223,6 +223,8 @@ var array = [...obj]; // TypeError: obj is not iterable {{Compat}} -## 相关链接 +## 参见 -- [剩余参数](/zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters)（Rest Parameters 也使用' `...` '） +- [剩余参数](/zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters) +- [剩余属性](/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#剩余属性) +- {{jsxref("Function.prototype.apply()")}} diff --git a/files/zh-cn/web/javascript/reference/operators/this/index.md b/files/zh-cn/web/javascript/reference/operators/this/index.md index b99f7cf54b1b78..19697bbc731d43 100644 --- a/files/zh-cn/web/javascript/reference/operators/this/index.md +++ b/files/zh-cn/web/javascript/reference/operators/this/index.md @@ -469,8 +469,7 @@ bird.sayBye(); // Bye from Ferrari {{Compat}} -## 相关链接 +## 参见 - [严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode) -- [Gentle explanation of 'this' keyword in JavaScript](http://rainsoft.io/gentle-explanation-of-this-in-javascript/) -- Getting the global context: {{jsxref("globalThis")}} +- {{jsxref("globalThis")}} diff --git a/files/zh-cn/web/javascript/reference/operators/yield_star_/index.md b/files/zh-cn/web/javascript/reference/operators/yield_star_/index.md index bb92e9a459338d..c02cf849b8fe04 100644 --- a/files/zh-cn/web/javascript/reference/operators/yield_star_/index.md +++ b/files/zh-cn/web/javascript/reference/operators/yield_star_/index.md @@ -108,9 +108,9 @@ console.log(result); // "foo" {{Compat}} -## 相关链接 +## 参见 - [迭代器协议](/zh-CN/docs/Web/JavaScript/Guide/The_Iterator_protocol) - {{jsxref("Statements/function*", "function*")}} -- {{jsxref("Operators/function*", "function* expression")}} +- [`function*` 表达式](/zh-CN/docs/Web/JavaScript/Reference/Operators/function*) - {{jsxref("Operators/yield", "yield")}} diff --git a/files/zh-cn/web/javascript/reference/statements/block/index.md b/files/zh-cn/web/javascript/reference/statements/block/index.md index 28434a4903c14f..ba73bddb55b9b8 100644 --- a/files/zh-cn/web/javascript/reference/statements/block/index.md +++ b/files/zh-cn/web/javascript/reference/statements/block/index.md @@ -120,7 +120,7 @@ foo('outside'); // TypeError: foo is not a function {{Compat}} -## 相关链接 +## 参见 - {{jsxref("Statements/while", "while")}} - {{jsxref("Statements/if...else", "if...else")}} diff --git a/files/zh-cn/web/javascript/reference/statements/break/index.md b/files/zh-cn/web/javascript/reference/statements/break/index.md index ad2bf564ed4a8b..4700c2aa6594a4 100644 --- a/files/zh-cn/web/javascript/reference/statements/break/index.md +++ b/files/zh-cn/web/javascript/reference/statements/break/index.md @@ -134,8 +134,8 @@ block_1: { {{Compat}} -## 相关链接 +## 参见 - {{jsxref("Statements/continue", "continue")}} -- {{jsxref("Statements/label", "label")}} +- {{jsxref("Statements/label", "label", "", 1)}} - {{jsxref("Statements/switch", "switch")}} diff --git a/files/zh-cn/web/javascript/reference/statements/const/index.md b/files/zh-cn/web/javascript/reference/statements/const/index.md index 69941de14e6bac..1874f032d2a842 100644 --- a/files/zh-cn/web/javascript/reference/statements/const/index.md +++ b/files/zh-cn/web/javascript/reference/statements/const/index.md @@ -119,8 +119,8 @@ MY_ARRAY = ["B"]; {{Compat}} -## 相关链接 +## 参见 - {{jsxref("Statements/var", "var")}} - {{jsxref("Statements/let", "let")}} -- [Constants in the JavaScript Guide](/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types#Constants) +- [JavaScript 指南中的常量](/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types#常量) diff --git a/files/zh-cn/web/javascript/reference/statements/do...while/index.md b/files/zh-cn/web/javascript/reference/statements/do...while/index.md index 4c42befcae435c..2d140ec04d86c6 100644 --- a/files/zh-cn/web/javascript/reference/statements/do...while/index.md +++ b/files/zh-cn/web/javascript/reference/statements/do...while/index.md @@ -56,7 +56,9 @@ document.getElementById("example").innerHTML = result; {{Compat}} -## 相关链接 +## 参见 - {{jsxref("Statements/while", "while")}} - {{jsxref("Statements/for", "for")}} +- {{jsxref("Statements/break", "break")}} +- {{jsxref("Statements/continue", "continue")}} diff --git a/files/zh-cn/web/javascript/reference/statements/empty/index.md b/files/zh-cn/web/javascript/reference/statements/empty/index.md index af16fc789ed232..e8600ac9e269f5 100644 --- a/files/zh-cn/web/javascript/reference/statements/empty/index.md +++ b/files/zh-cn/web/javascript/reference/statements/empty/index.md @@ -61,6 +61,6 @@ else {{Compat}} -## 相关链接 +## 参见 - {{jsxref("Statements/block", "块语句")}} diff --git a/files/zh-cn/web/javascript/reference/statements/for-await...of/index.md b/files/zh-cn/web/javascript/reference/statements/for-await...of/index.md index 1fccaebc50661b..57ec1e626603ef 100644 --- a/files/zh-cn/web/javascript/reference/statements/for-await...of/index.md +++ b/files/zh-cn/web/javascript/reference/statements/for-await...of/index.md @@ -122,7 +122,7 @@ getResponseSize("https://jsonplaceholder.typicode.com/photos"); {{Compat}} -## 相关链接 +## 参见 - {{jsxref("Global_Objects/Symbol/asyncIterator", "Symbol.asyncIterator")}} - {{jsxref("Statements/for...of")}} diff --git a/files/zh-cn/web/javascript/reference/statements/for...in/index.md b/files/zh-cn/web/javascript/reference/statements/for...in/index.md index 81d174bd34ddf7..65344c27cab448 100644 --- a/files/zh-cn/web/javascript/reference/statements/for...in/index.md +++ b/files/zh-cn/web/javascript/reference/statements/for...in/index.md @@ -99,13 +99,11 @@ for (var i = 0 in obj) { 像其他引擎 V8(Chrome)，Chakra (IE/Edge)，JSC (WebKit/Safari) 正在研究去除这种不标准的行为。 -## 相关链接 +## 参见 - {{jsxref("Statements/for...of", "for...of")}} 一个类似的迭代属性值的语句 -- {{jsxref("Statements/for_each...in", "for each in")}} 一个类似的但是迭代的是对象的属性的值而不是其属性名字的语句（过时的） - {{jsxref("Statements/for", "for")}} -- 迭代器和构造器（uses the `for...in` syntax） - [属性的可枚举性和所有权](/zh-CN/docs/Web/JavaScript/Enumerability_and_ownership_of_properties) - {{jsxref("Object.getOwnPropertyNames()")}} -- {{jsxref("Object.prototype.hasOwnProperty()")}} +- {{jsxref("Object.hasOwn()")}} - {{jsxref("Array.prototype.forEach()")}} diff --git a/files/zh-cn/web/javascript/reference/statements/for...of/index.md b/files/zh-cn/web/javascript/reference/statements/for...of/index.md index 1b779c999a30fb..ff007705dc0c79 100644 --- a/files/zh-cn/web/javascript/reference/statements/for...of/index.md +++ b/files/zh-cn/web/javascript/reference/statements/for...of/index.md @@ -303,7 +303,8 @@ for (let i of iterable) { {{Compat}} -## 相关链接 +## 参见 - {{jsxref("Array.prototype.forEach()")}} - {{jsxref("Map.prototype.forEach()")}} +- {{jsxref("Object.entries()")}} diff --git a/files/zh-cn/web/javascript/reference/statements/function/index.md b/files/zh-cn/web/javascript/reference/statements/function/index.md index bf2c6c4c5ed314..bf957d6f853ede 100644 --- a/files/zh-cn/web/javascript/reference/statements/function/index.md +++ b/files/zh-cn/web/javascript/reference/statements/function/index.md @@ -134,11 +134,12 @@ function calc_sales(units_a, units_b, units_c) { {{Compat}} -## 相关链接 +## 参见 -- {{jsxref("Functions_and_function_scope", "Functions and function scope")}} +- [函数](/zh-CN/docs/Web/JavaScript/Guide/Functions)指南 +- [Function](/zh-CN/docs/Web/JavaScript/Reference/Functions) - {{jsxref("Function")}} -- {{jsxref("Operators/function", "function expression")}} -- {{jsxref("Statements/function*", "function* statement")}} -- {{jsxref("Operators/function*", "function* expression")}} -- {{jsxref("GeneratorFunction")}} +- [`function` 表达式](/zh-CN/docs/Web/JavaScript/Reference/Operators/function) +- {{jsxref("Statements/function*", "function*")}} +- {{jsxref("Statements/async_function", "async function")}} +- {{jsxref("Statements/async_function*", "async function*")}} diff --git a/files/zh-cn/web/javascript/reference/statements/function_star_/index.md b/files/zh-cn/web/javascript/reference/statements/function_star_/index.md index f1eba971b4bb20..aa7465de23d4b3 100644 --- a/files/zh-cn/web/javascript/reference/statements/function_star_/index.md +++ b/files/zh-cn/web/javascript/reference/statements/function_star_/index.md @@ -178,20 +178,21 @@ arr = [...gen]; // ["a", "b", "c", "d", "e"] {{Compat}} -## 相关链接 - -- {{jsxref("Operators/function*", "function* expression")}} -- {{jsxref("GeneratorFunction")}} object -- [迭代器协议](/zh-CN/docs/Web/JavaScript/Guide/The_Iterator_protocol) +## 参见 + +- [函数](/zh-CN/docs/Web/JavaScript/Guide/Functions)指南 +- [迭代器与生成器](/zh-CN/docs/Web/JavaScript/Guide/Iterators_and_generators)指南 +- [Function](/zh-CN/docs/Web/JavaScript/Reference/Functions) +- {{jsxref("GeneratorFunction")}} +- [`function*` 表达式](/zh-CN/docs/Web/JavaScript/Reference/Operators/function*) +- {{jsxref("Statements/function", "function")}} +- {{jsxref("Statements/async_function", "async function")}} +- {{jsxref("Statements/async_function*", "async function*")}} +- [迭代器协议](/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols) - {{jsxref("Operators/yield", "yield")}} - {{jsxref("Operators/yield*", "yield*")}} -- {{jsxref("Function")}} object -- {{jsxref("Statements/function", "function declaration")}} -- {{jsxref("Operators/function", "function expression")}} -- {{jsxref("Functions_and_function_scope", "Functions and function scope")}} -- 其他网络资源： - - - [Regenerator](http://facebook.github.io/regenerator/) an ES2015 generator compiler to ES5 - - [Forbes Lindesay: Promises and Generators: control flow utopia — JSConf EU 2013](http://www.youtube.com/watch?v=qbKWsbJ76-s) - - [Hemanth.HM: The New gen of \*gen(){}](https://www.youtube.com/watch?v=ZrgEZykBHVo&list=PLuoyIZT5fPlG44bPq50Wgh0INxykdrYX7&index=1) - - [Task.js](http://taskjs.org/) +- {{jsxref("Generator")}} +- GitHub 上的 [Regenerator](https://github.com/facebook/regenerator) +- [Promise 和生成器：控制流的乌托邦](https://youtu.be/qbKWsbJ76-s)——Forbes Lindesay 在 JSConf 上的演讲（2013） +- GitHub 上的 [Task.js](https://github.com/mozilla/task.js) +- [你不知道的 JS：异步和性能，第 4 章：生成器](https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/async%20%26%20performance/ch4.md)——Kyle Simpson diff --git a/files/zh-cn/web/javascript/reference/statements/if...else/index.md b/files/zh-cn/web/javascript/reference/statements/if...else/index.md index 3cf9cfceb869fe..15de8d73d9094a 100644 --- a/files/zh-cn/web/javascript/reference/statements/if...else/index.md +++ b/files/zh-cn/web/javascript/reference/statements/if...else/index.md @@ -124,8 +124,8 @@ if ((x = y)) { {{Compat}} -## 相关链接 +## 参见 - {{jsxref("Statements/block", "block")}} - {{jsxref("Statements/switch", "switch")}} -- {{jsxref("Operators/conditional_operator", "条件运算符")}} +- [条件（三元）运算符](/zh-CN/docs/Web/JavaScript/Reference/Operators/Conditional_operator) diff --git a/files/zh-cn/web/javascript/reference/statements/import/index.md b/files/zh-cn/web/javascript/reference/statements/import/index.md index 23ac74edaffb1a..115c86e4aba7ec 100644 --- a/files/zh-cn/web/javascript/reference/statements/import/index.md +++ b/files/zh-cn/web/javascript/reference/statements/import/index.md @@ -227,12 +227,13 @@ for (const link of document.querySelectorAll("nav > a")) { {{Compat}} -## 相关链接 - -- {{JSxRef("Statements/export", "export")}} -- [`import.meta`](/zh-CN/docs/Web/JavaScript/Reference/Statements/import.meta) -- Limin Zhu, Brian Terlson and Microsoft Edge Team: [Previewing ES6 Modules and more from ES2015, ES2016 and beyond](https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/) -- Hacks blog post by Jason Orendorff: [ES6 in Depth: Modules](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/) -- Hacks blog post by Lin Clark: [ES modules: A cartoon deep-dive](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/) -- Axel Rauschmayer's book: ["Exploring JS: Modules"](https://exploringjs.com/es6/ch_modules.html) -- The Modern JavaScript Tutorial(javascript.info): [Export and Import](https://javascript.info/import-export) +## 参见 + +- {{jsxref("Statements/export", "export")}} +- [`import()`](/zh-CN/docs/Web/JavaScript/Reference/Operators/import) +- [`import.meta`](/zh-CN/docs/Web/JavaScript/Reference/Operators/import.meta) +- [预览 ES6 模块以及 ES2015、ES2016 和更多内容](https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/)，载于 blogs.windows.com (2016) +- [ES6 深入浅出：模块](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/)，载于 hacks.mozilla.org (2015) +- [深入挖掘 ES 模块](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/)，载于 hacks.mozilla.org (2018) +- [探索 JS，第 16 章：模块](https://exploringjs.com/es6/ch_modules.html)，由 Dr. Axel Rauschmayer 撰写 +- [Export 和 Import](https://javascript.info/import-export)，载于 javascript.info diff --git a/files/zh-cn/web/javascript/reference/statements/switch/index.md b/files/zh-cn/web/javascript/reference/statements/switch/index.md index 13cd5686bdca3e..47552c025f3430 100644 --- a/files/zh-cn/web/javascript/reference/statements/switch/index.md +++ b/files/zh-cn/web/javascript/reference/statements/switch/index.md @@ -251,6 +251,6 @@ switch (action) { {{Compat}} -## 相关链接 +## 参见 -- [`if...else`](/zh-CN/docs/Web/JavaScript/Reference/Statements/if...else) +- {{jsxref("Statements/if...else", "if...else")}} diff --git a/files/zh-cn/web/javascript/reference/statements/throw/index.md b/files/zh-cn/web/javascript/reference/statements/throw/index.md index dc2306ef255517..1e043f5edd131b 100644 --- a/files/zh-cn/web/javascript/reference/statements/throw/index.md +++ b/files/zh-cn/web/javascript/reference/statements/throw/index.md @@ -168,6 +168,7 @@ try { {{Compat}} -## 相关链接 +## 参见 -- [`try...catch`](/zh-CN/docs/Web/JavaScript/Reference/Statements/try...catch) +- {{jsxref("Statements/try...catch", "try...catch")}} +- {{jsxref("Error")}} diff --git a/files/zh-cn/web/javascript/reference/statements/try...catch/index.md b/files/zh-cn/web/javascript/reference/statements/try...catch/index.md index 8ef1c8dcb102e7..b8a5bf7c2b1ecf 100644 --- a/files/zh-cn/web/javascript/reference/statements/try...catch/index.md +++ b/files/zh-cn/web/javascript/reference/statements/try...catch/index.md @@ -242,7 +242,7 @@ try { {{Compat}} -## 相关链接 +## 参见 - {{jsxref("Error")}} - {{jsxref("Statements/throw", "throw")}} diff --git a/files/zh-cn/web/javascript/reference/strict_mode/index.md b/files/zh-cn/web/javascript/reference/strict_mode/index.md index 54938249fe6cc2..af3e5c78b093ab 100644 --- a/files/zh-cn/web/javascript/reference/strict_mode/index.md +++ b/files/zh-cn/web/javascript/reference/strict_mode/index.md @@ -349,13 +349,7 @@ function baz() { 主流浏览器现在实现了严格模式。但是不要盲目地依赖它，因为市场上仍然有大量的浏览器版本只部分支持严格模式或者根本就不支持（比如 IE10 之前的版本）。*严格模式改变了语义。*依赖这些改变可能会导致没有实现严格模式的浏览器中出现问题或者错误。谨慎地使用严格模式，通过检测相关代码的功能保证严格模式不出问题。最后，记得*在支持或者不支持严格模式的浏览器中测试你的代码*。如果你只在不支持严格模式的浏览器中测试，那么在支持的浏览器中就很有可能出问题，反之亦然。 -## 相关链接 - -- [Where's Walden? » New ES5 strict mode support: now with poison pills!](http://whereswalden.com/2010/09/08/new-es5-strict-mode-support-now-with-poison-pills/) -- [Where's Walden? » New ES5 strict mode requirement: function statements not at top level of a program or function are prohibited](http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/) -- [Where's Walden? » New ES5 strict mode support: new vars created by strict mode eval code are local to that code only](http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/) -- [JavaScript "use strict" tutorial for beginners.](http://qnimate.com/javascript-strict-mode-in-nutshell/) -- [John Resig - ECMAScript 5 Strict Mode, JSON, and More](http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/) -- [ECMA-262-5 in detail. Chapter 2. Strict Mode.](http://dmitrysoshnikov.com/ecmascript/es5-chapter-2-strict-mode/) -- [Strict mode compatibility table](http://kangax.github.com/es5-compat-table/strict-mode/) -- [Transitioning to strict mode](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode) +## 参见 + +- [JavaScript 模块](/zh-CN/docs/Web/JavaScript/Guide/Modules)指南 +- [词法语法](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar) From 190211ca210fb5ae98318208950de8f68785a2ef Mon Sep 17 00:00:00 2001 From: A1lo Date: Tue, 31 Oct 2023 17:11:12 +0800 Subject: [PATCH 57/91] zh-cn: update the translation of HTMLBodyElement (#16782) --- files/zh-cn/web/api/htmlbodyelement/index.md | 79 ++++++++++---------- 1 file changed, 41 insertions(+), 38 deletions(-) diff --git a/files/zh-cn/web/api/htmlbodyelement/index.md b/files/zh-cn/web/api/htmlbodyelement/index.md index 59bb3f50b4d2c6..f2f179686e0b54 100644 --- a/files/zh-cn/web/api/htmlbodyelement/index.md +++ b/files/zh-cn/web/api/htmlbodyelement/index.md @@ -1,78 +1,81 @@ --- title: HTMLBodyElement slug: Web/API/HTMLBodyElement +l10n: + sourceCommit: 387d0d4d8690c0d2c9db1b85eae28ffea0f3ac1f --- {{APIRef("HTML DOM")}} -**`HTMLBodyElement`** 接口提供了特殊的属性（除了它们继承的常规的{{ domxref("HTMLElement") }}接口）以外，还可以处理 body 元素。 -{{InheritanceDiagram(600, 120)}} +**`HTMLBodyElement`** 接口提供了用于操作 {{HtmlElement("body")}} 元素的特定属性（除继承自 {{domxref("HTMLElement")}} 接口的属性以外）。 -## 属性 +{{InheritanceDiagram}} -_从其父项{{domxref("HTMLElement")}} 中继承属性。_ +## 实例属性 -- {{domxref("HTMLBodyElement.aLink")}} {{Deprecated_Inline}} - - : Is a {{ domxref("DOMString") }} that represents the color of active hyperlinks. -- {{domxref("HTMLBodyElement.background")}} {{Deprecated_Inline}} - - : Is a {{ domxref("DOMString") }} that represents the description of the location of the background image resource. Note that this is not an URI, though some older version of some browsers do expect it. -- {{domxref("HTMLBodyElement.bgColor")}} {{Deprecated_Inline}} - - : Is a {{ domxref("DOMString") }} that represents the background color for the document. -- {{domxref("HTMLBodyElement.link")}} {{Deprecated_Inline}} - - : Is a {{ domxref("DOMString") }} that represents the color of unvisited links. -- {{domxref("HTMLBodyElement.text")}} {{Deprecated_Inline}} - - : Is a {{ domxref("DOMString") }} that represents the foreground color of text. -- {{domxref("HTMLBodyElement.vLink")}} {{Deprecated_Inline}} - - : Is a {{ domxref("DOMString") }} that represents the color of visited links. +_从其父接口 {{domxref("HTMLElement")}} 继承属性。_ -## 方法 +- {{domxref("HTMLBodyElement.aLink")}} {{deprecated_inline}} + - : 一个表示活动链接颜色的字符串。 +- {{domxref("HTMLBodyElement.background")}} {{deprecated_inline}} + - : 一个表示背景图片资源位置的字符串。注意，这不是 URI，尽管一些旧版浏览器可能会期望它是。 +- {{domxref("HTMLBodyElement.bgColor")}} {{deprecated_inline}} + - : 一个表示文档背景颜色的字符串。 +- {{domxref("HTMLBodyElement.link")}} {{deprecated_inline}} + - : 一个表示未访问链接颜色的字符串。 +- {{domxref("HTMLBodyElement.text")}} {{deprecated_inline}} + - : 一个表示文本前景色的字符串。 +- {{domxref("HTMLBodyElement.vLink")}} {{deprecated_inline}} + - : 一个表示已访问链接颜色的字符串。 -_No specific methods; inherits methods from its parent, {{domxref("HTMLElement")}}_. +## 实例方法 + +_无特定方法；从其父接口 {{domxref("HTMLElement")}} 继承方法。_ ## 事件处理器 -继承了 {{domxref("HTMLElement")}} 的事件。 +从 {{domxref("HTMLElement")}} 继承事件。 以下以 {{domxref("Window")}} 为目标的 `onXYZ` 事件处理器属性同样在 `window` 对象这一别名目标上可用。但建议直接在 `window` 对象上监听这些事件，而不是在 `HTMLBodyElement` 上。 > **备注：** 对于以下的 `onXYZ` 事件处理器，在 `HTMLBodyElement` 上使用 `addEventListener()` 将不会生效。请在 {{domxref("window")}} 对象上监听这些事件。 - {{domxref("window.afterprint_event", "HTMLBodyElement.onafterprint")}} - - : Fired after the associated document has started printing or the print preview has been closed. + - : 在关联的文档开始打印或打印预览关闭后触发。 - {{domxref("window.beforeprint_event", "HTMLBodyElement.onbeforeprint")}} - - : Fired when the associated document is about to be printed or previewed for printing. + - : 在关联的文档即将打印或预览打印时触发。 - {{domxref("window.beforeunload_event", "HTMLBodyElement.onbeforeunload")}} - - : Fired when the window, the document and its resources are about to be unloaded. + - : 在窗口、文档及其资源即将被卸载时触发。 - {{domxref("window.gamepadconnected_event", "HTMLBodyElement.ongamepadconnected")}} - - : Fired when the browser detects that a gamepad has been connected or the first time a button/axis of the gamepad is used. + - : 在浏览器检测到游戏手柄已连接或首次使用游戏手柄的按钮/轴时触发。 - {{domxref("window.gamepaddisconnected_event", "HTMLBodyElement.ongamepaddisconnected")}} - - : Fired when the browser detects that a gamepad has been disconnected. + - : 在浏览器检测到游戏手柄已断开连接时触发。 - {{domxref("window.hashchange_event", "HTMLBodyElement.onhashchange")}} - - : Fired when the fragment identifier of the URL has changed (the part of the URL beginning with and following the `#` symbol). + - : 在 URL 的片段标识符（URL 中以 `#` 符号开头和紧跟的部分）发生变化时触发。 - {{domxref("window.languagechange_event", "HTMLBodyElement.onlanguagechange")}} - - : Fired when the user's preferred language changes. + - : 在用户首选语言发生变更时触发。 - {{domxref("window.message_event", "HTMLBodyElement.onmessage")}} - - : Fired when the window receives a message, for example from a call to [`Window.postMessage()`](/zh-CN/docs/Web/API/Window/postMessage) from another browsing context. + - : 在窗口接收到消息时触发，例如来自另一个浏览上下文的 [`Window.postMessage()`](/zh-CN/docs/Web/API/Window/postMessage) 调用。 - {{domxref("window.messageerror_event", "HTMLBodyElement.onmessageerror")}} - - : Fired when the window receives a message that can't be deserialized. + - : 在窗口接收到无法反序列化的消息时触发。 - {{domxref("window.offline_event", "HTMLBodyElement.onoffline")}} - - : Fired when the browser has lost access to the network and the value of {{domxref("Navigator.onLine")}} switches to `false`. + - : 在浏览器失去网络连接且 {{domxref("Navigator.onLine")}} 的值变为 `false` 时触发。 - {{domxref("window.online_event", "HTMLBodyElement.ononline")}} - - : Fired when the browser has gained access to the network and the value of {{domxref("Navigator.onLine")}} switches to `true`. + - : 在浏览器获得网络连接且 {{domxref("Navigator.onLine")}} 的值变为 `true` 时触发。 - {{domxref("window.pagehide_event", "HTMLBodyElement.onpagehide")}} - - : Fired when the browser hides the current page in the process of presenting a different page from the session's history. + - : 在浏览器在呈现会话历史中的不同页面而隐藏当前页面时触发。 - {{domxref("window.pageshow_event", "HTMLBodyElement.onpageshow")}} - - : Fired when the browser displays the window's document due to navigation. + - : 在浏览器由于导航而显示窗口的文档时触发。 - {{domxref("window.popstate_event", "HTMLBodyElement.onpopstate")}} - - : Fired when the active history entry changes while the user navigates the session history. + - : 在用户导航会话历史而使活动历史条目发生变化时触发。 - {{domxref("window.rejectionhandled_event", "HTMLBodyElement.onrejectionhandled")}} - - : Fired whenever a JavaScript {{jsxref("Promise")}} is rejected and the rejection has been handled. + - : 在 JavaScript {{jsxref("Promise")}} 被拒绝且拒绝已被处理时触发。 - {{domxref("window.storage_event", "HTMLBodyElement.onstorage")}} - - : Fired when a storage area (`localStorage`) has been modified in the context of another document. + - : 在另一个文档的上下文中修改存储区（`localStorage`）时触发。 - {{domxref("window.unhandledrejection_event", "HTMLBodyElement.onunhandledrejection")}} - - : Fired whenever a {{jsxref("Promise")}} is rejected but the rejection was not handled. + - : 在 JavaScript {{jsxref("Promise")}} 被拒绝且拒绝未被处理时触发。 - {{domxref("window.unload_event", "HTMLBodyElement.onunload")}} - - : Fired when the document is being unloaded. + - : 在文档被卸载时触发。 ## 规范 @@ -84,4 +87,4 @@ _No specific methods; inherits methods from its parent, {{domxref("HTMLElement") ## 参见 -- HTML 元素实现了这个接口：{{ HTMLElement("body") }} +- 实现了此接口的 HTML 元素：{{ HTMLElement("body") }} From da1a0f82705bc6cd8a9df464766d91df4f1ae64f Mon Sep 17 00:00:00 2001 From: Jason Lam Date: Tue, 31 Oct 2023 23:02:48 +0800 Subject: [PATCH 58/91] [zh-cn]: update the translation of WeakMap overview (#16772) Co-authored-by: A1lo --- .../reference/global_objects/weakmap/index.md | 236 +++++++++++++++--- 1 file changed, 197 insertions(+), 39 deletions(-) diff --git a/files/zh-cn/web/javascript/reference/global_objects/weakmap/index.md b/files/zh-cn/web/javascript/reference/global_objects/weakmap/index.md index 22464ee8dc57de..9773734229f5ad 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/weakmap/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/weakmap/index.md @@ -5,99 +5,257 @@ slug: Web/JavaScript/Reference/Global_Objects/WeakMap {{JSRef}} -**`WeakMap`** 对象是一组键/值对的集合，其中的键是弱引用的。其键必须是对象，而值可以是任意的。 +**`WeakMap`** 是一种**键值对**的集合，其中的键必须是对象或[非全局注册的符号](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol#全局共享的_symbol)，且值可以是任意的 [JavaScript 类型](/zh-CN/docs/Web/JavaScript/Data_structures)，并且不会创建对它的键的强引用。换句话说，一个对象作为 `WeakMap` 的键存在，不会阻止该对象被垃圾回收。一旦一个对象作为键被回收，那么在 `WeakMap` 中相应的值便成为了进行垃圾回收的候选对象，只要它们没有其他的引用存在。唯一可以作为 `WeakMap` 的键的类型是[非全局注册的符号](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol#全局共享的_symbol)，因为非全局注册的符号是保证唯一的，并且不能被重新创建。 -你可以从这里了解更多关于 `WeakMap` 的内容：[WeakMap 对象](/zh-CN/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap_object)。 +`WeakMap` 允许将数据与对象相关联，而不阻止键对象被垃圾回收，即使值引用了键。然而，`WeakMap` 并不允许观察其键的生命周期，这就是为什么它不允许枚举；如果 `WeakMap` 提供了任何获得其键的列表的方法，那么这些列表将会依赖于垃圾回收的状态，这引入了不确定性。如果你想要可以获取键的列表，你应该使用 {{jsxref("Map")}} 而不是 `WeakMap`。 + +你可以在[带键的集合](/zh-CN/docs/Web/JavaScript/Guide/Keyed_collections)指南的 [WeakMap 对象](/zh-CN/docs/Web/JavaScript/Guide/Keyed_collections#weakmap_object)部分了解更多关于 `WeakMap` 的内容。 ## 描述 -WeakMap 的 key 只能是 `Object` 类型。 {{Glossary("Primitive", "原始数据类型")}} 是不能作为 key 的（比如 {{jsxref("Symbol")}}）。 +WeakMap 的键必须是可被垃圾回收的。大多数{{Glossary("Primitive", "原始数据类型")}}可以任意地被创建，且没有生命周期，因此不能作为键。对象和[非全局注册的符号](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol#全局共享的_symbol)都可以作为键，因为它们是可被垃圾回收的。 -### Why *Weak*Map ？ +### WeakMap 的意义 -在 JavaScript 里，map API _可以_ 通过使其四个 API 方法共用两个数组（一个存放键，一个存放值）来实现。给这种 map 设置值时会同时将键和值添加到这两个数组的末尾。从而使得键和值的索引在两个数组中相对应。当从该 map 取值的时候，需要遍历所有的键，然后使用索引从存储值的数组中检索出相应的值。 +在 JavaScript 里，map API *可以*通过使其四个 API 方法共用两个数组（一个存放键，一个存放值）来实现。给这种映射设置值时会同时将键和值添加到这两个数组的末尾。从而使得键和值的索引在两个数组中相对应。当从该映射取值的时候，需要遍历所有的键，然后使用索引从存储值的数组中检索出相应的值。 但这样的实现会有两个很大的缺点： -1. 首先赋值和搜索操作都是 *O(*n*)* 的时间复杂度（_n_ 是键值对的个数），因为这两个操作都需要遍历全部整个数组来进行匹配。 - +1. 首先赋值和搜索操作都是 `O(n)` 的时间复杂度（_n_ 是键值对的个数），因为这两个操作都需要遍历全部整个数组来进行匹配。 2. 另外一个缺点是可能会导致内存泄漏，因为数组会一直引用着每个键和值。这种引用使得垃圾回收算法不能回收处理他们，即使没有其他任何引用存在了。 -相比之下，原生的 `WeakMap` 持有的是每个键对象的“弱引用”，这意味着在没有其他引用存在时垃圾回收能正确进行。原生 `WeakMap` 的结构是特殊且有效的，其用于映射的 key *只有*在其没有被回收时才是有效的。 +相较之下，`WeakMap` 的键对象会强引用其值，直到该键对象被垃圾回收，但从那时起，它会变为弱引用。因此，`WeakMap`： + +- 不会阻止垃圾回收，直到垃圾回收器移除了键对象的引用 +- 任何值都可以被垃圾回收，只要它们的键对象没有被 `WeakMap` 以外的地方引用 + +当将键映射到与键相关的信息，而该信息*仅*在键未被垃圾回收的情况下具有价值时，`WeakMap` 是一个特别有用的构造。 -**正由于这样的弱引用，`WeakMap` 的 key 是不可枚举的**（没有方法能给出所有的 key）。如果 key 是可枚举的话，其列表将会受垃圾回收机制的影响，从而得到不确定的结果。因此，如果你想要这种类型对象的 key 值的列表，你应该使用 {{jsxref("Map")}}。 +但因为 `WeakMap` 不允许观察其键的生命周期，所以其键是不可枚举的。没有方法可以获得键的列表。如果有的话，该列表将会依赖于垃圾回收的状态，这引入了不确定性。如果你想要可以获得键的列表，你应该使用 {{jsxref("Map")}}。 ## 构造函数 - {{jsxref("WeakMap/WeakMap", "WeakMap()")}} - : 创建一个新的 `WeakMap` 对象。 +## 实例属性 + +这些属性在 `WeakMap.prototype` 上定义，并且由所有 `WeakMap` 实例所共享。 + +- {{jsxref("Object/constructor", "WeakMap.prototype.constructor")}} + - : 创建了该实例对象的构造函数。对于 `WeakMap` 实例，初始值是 {{jsxref("WeakMap/WeakMap", "WeakMap")}} 构造函数。 +- `WeakMap.prototype[@@toStringTag]` + - : [`@@toStringTag`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) 属性的初始值是字符串 `"WeakMap"`。该属性在 {{jsxref("Object.prototype.toString()")}} 中使用。 + ## 实例方法 -- {{jsxref("WeakMap.delete", "WeakMap.prototype.delete(key)")}} - - : 删除 WeakMap 中与 `key` 相关联的值。删除之后， `WeakMap.prototype.has(key)` 将会返回 `false`。 -- {{jsxref("WeakMap.get", "WeakMap.prototype.get(key)")}} - - : 返回 WeakMap 中与 `key` 相关联的值，如果 `key` 不存在则返回 `undefined`。 -- {{jsxref("WeakMap.has", "WeakMap.prototype.has(key)")}} - - : 返回一个布尔值，断言一个值是否已经与 `WeakMap` 对象中的 `key` 关联。 -- {{jsxref("WeakMap.set", "WeakMap.prototype.set(key, value)")}} - - : 给 `WeakMap` 中的 `key` 设置一个 `value`。该方法返回一个 `WeakMap` 对象。 +- {{jsxref("WeakMap.prototype.delete()")}} + - : 删除任何与 `key` 关联的值。删除之后，`WeakMap.prototype.has(key)` 将会返回 `false`。 +- {{jsxref("WeakMap.prototype.get()")}} + - : 返回与 `key` 关联的值，如果不存在则返回 `undefined`。 +- {{jsxref("WeakMap.prototype.has()")}} + - : 返回一个布尔值，断言某个值是否已经与 `WeakMap` 对象中的 `key` 关联。 +- {{jsxref("WeakMap.prototype.set()")}} + - : 给 `WeakMap` 对象中的 `key` 设置 `value`。返回该 `WeakMap` 对象。 ## 示例 ### 使用 WeakMap ```js -const wm1 = new WeakMap(), - wm2 = new WeakMap(), - wm3 = new WeakMap(); -const o1 = {}, - o2 = function () {}, - o3 = window; +const wm1 = new WeakMap(); +const wm2 = new WeakMap(); +const wm3 = new WeakMap(); +const o1 = {}; +const o2 = function () {}; +const o3 = window; + wm1.set(o1, 37); wm1.set(o2, "azerty"); wm2.set(o1, o2); // value 可以是任意值，包括一个对象或一个函数 -wm2.set(o3, undefined); +wm2.set(o2, undefined); wm2.set(wm1, wm2); // 键和值可以是任意对象，甚至另外一个 WeakMap 对象 + wm1.get(o2); // "azerty" -wm2.get(o2); // undefined，wm2 中没有 o2 这个键 -wm2.get(o3); // undefined，值就是 undefined +wm2.get(o2); // undefined，设置的值就是 undefined +wm2.get(o3); // undefined，wm2 中没有 o3 这个键 + wm1.has(o2); // true -wm2.has(o2); // false -wm2.has(o3); // true (即使值是 undefined) +wm2.has(o2); // true（即使值是 undefined） +wm2.has(o3); // false + wm3.set(o1, 37); wm3.get(o1); // 37 + wm1.has(o1); // true wm1.delete(o1); wm1.has(o1); // false ``` -### 实现一 个带有 .clear() 方法的类 WeakMap 类 +### 实现一个带有 .clear() 方法的类 WeakMap 的类 ```js class ClearableWeakMap { + #wm; constructor(init) { - this._wm = new WeakMap(init); + this.#wm = new WeakMap(init); } clear() { - this._wm = new WeakMap(); + this.#wm = new WeakMap(); } delete(k) { - return this._wm.delete(k); + return this.#wm.delete(k); } get(k) { - return this._wm.get(k); + return this.#wm.get(k); } has(k) { - return this._wm.has(k); + return this.#wm.has(k); } set(k, v) { - this._wm.set(k, v); + this.#wm.set(k, v); return this; } } ``` +### 模拟私有成员 + +开发者可以使用 `WeakMap` 关联对象与私有数据，从而获得以下好处： + +- 与 {{jsxref("Map")}} 相比，WeakMap 不持有键对象的强引用，因此元数据与对象本身共享同样的生命周期，避免内存泄漏。 +- 与使用不可枚举对象和/或 {{jsxref("Symbol")}} 属性相比，WeakMap 位于对象外部，没有办法通过像 {{jsxref("Object.getOwnPropertySymbols")}}等的反射方法来检索元数据。 +- 与[闭包](/zh-CN/docs/Web/JavaScript/Closures)相比，构造函数可以复用同一个 WeakMap 对象来创建所有实例，从而节省内存，并且允许同一个类创建的不同实例读取彼此的私有成员。 + +```js +let Thing; + +{ + const privateScope = new WeakMap(); + let counter = 0; + + Thing = function () { + this.someProperty = "foo"; + + privateScope.set(this, { + hidden: ++counter, + }); + }; + + Thing.prototype.showPublic = function () { + return this.someProperty; + }; + + Thing.prototype.showPrivate = function () { + return privateScope.get(this).hidden; + }; +} + +console.log(typeof privateScope); +// "undefined" + +const thing = new Thing(); + +console.log(thing); +// Thing {someProperty: "foo"} + +thing.showPublic(); +// "foo" + +thing.showPrivate(); +// 1 +``` + +这与下面使用了[私有字段](/zh-CN/docs/Web/JavaScript/Reference/Classes/Private_class_fields)的示例类似： + +```js +class Thing { + static #counter = 0; + #hidden; + constructor() { + this.someProperty = "foo"; + this.#hidden = ++Thing.#counter; + } + showPublic() { + return this.someProperty; + } + showPrivate() { + return this.#hidden; + } +} + +console.log(thing); +// Thing {someProperty: "foo"} + +thing.showPublic(); +// "foo" + +thing.showPrivate(); +// 1 +``` + +### 关联元数据 + +`WeakMap` 可用于将元数据与对象关联，而不影响对象的生命周期。这与私有成员示例非常相似，因为私有成员也是以外部的形式模拟的元数据，不参与[原型继承](/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)。 + +这个用例可以扩展到已经创建的对象上。例如，在网页上，我们可能希望将额外的数据与 DOM 元素相关联，而 DOM 元素可能在之后访问这些数据。一种常见的做法是将数据附加为属性： + +```js +const buttons = document.querySelectorAll(".button"); +buttons.forEach((button) => { + button.clicked = false; + button.addEventListener("click", () => { + button.clicked = true; + const currentButtons = [...document.querySelectorAll(".button")]; + if (currentButtons.every((button) => button.clicked)) { + console.log("所有按钮被都被点击了！"); + } + }); +}); +``` + +这种方法是有效的，但是有一些缺点： + +- `clicked` 属性是可枚举的，因此它会出现在 [`Object.keys(button)`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys)、[`for...in`](/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in) 循环中，等等。可以通过使用 {{jsxref("Object.defineProperty()")}} 来缓解，但这会使代码更冗长。 +- `clicked` 属性是一个普通的字符串属性，因此它可以被其他代码访问和覆盖。可以通过使用 {{jsxref("Symbol")}} 键来缓解，但键仍然可以通过 {{jsxref("Object.getOwnPropertySymbols()")}} 访问。 + +使用 `WeakMap` 来解决这些问题： + +```js +const buttons = document.querySelectorAll(".button"); +const clicked = new WeakMap(); +buttons.forEach((button) => { + clicked.set(button, false); + button.addEventListener("click", () => { + clicked.set(button, true); + const currentButtons = [...document.querySelectorAll(".button")]; + if (currentButtons.every((button) => clicked.get(button))) { + console.log("所有按钮被都被点击了！"); + } + }); +}); +``` + +这段代码里，只有能访问 `clicked` 的代码才能知道每个按钮的点击状态，而外部代码就不能修改这些状态。此外，如果任何按钮从 DOM 中删除，那么相应的元数据将自动进行垃圾回收。 + +### 缓存 + +你可以将传递给函数的对象与函数的结果相关联，从而在再次传入相同的对象时，可以返回缓存的结果而无需再次执行函数。如果该函数是纯函数（即它不会改变任何外部对象或导致其他可观察到的副作用）的话，这非常有用。 + +```js +const cache = new WeakMap(); +function handleObjectValues(obj) { + if (cache.has(obj)) { + return cache.get(obj); + } + const result = Object.values(obj).map(heavyComputation); + cache.set(obj, result); + return result; +} +``` + +只有当函数的输入是对象时才有效。此外，即使输入不再传入，结果依然永远保留在缓存中，更有效的方法是将 {{jsxref("Map")}} 与 {{jsxref("WeakRef")}} 对象配对使用，这允许你讲任何类型的输入值与各自的（很可能的）计算结果关联。有关更多详细信息，请参阅 [WeakRef 和 FinalizationRegistry](/zh-CN/docs/Web/JavaScript/Memory_management#weakrefs_and_finalizationregistry) 示例。 + ## 规范 {{Specifications}} @@ -106,11 +264,11 @@ class ClearableWeakMap { {{Compat}} -## 相关链接 +## 参见 -- A polyfill of `WeakMap` is available in [`core-js`](https://github.com/zloirock/core-js#weakmap) -- [`WeakMap` in the JavaScript guide](/zh-CN/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap_object) -- [Hiding Implementation Details with ECMAScript 6 WeakMaps](http://fitzgeraldnick.com/weblog/53/) +- [`core-js` 中 `WeakMap` 的 polyfill](https://github.com/zloirock/core-js#weakmap) +- [带键的集合](/zh-CN/docs/Web/JavaScript/Guide/Keyed_collections#weakmap_对象) +- [使用 ECMAScript 6 WeakMap 隐藏实现细节](https://fitzgeraldnick.com/2014/01/13/hiding-implementation-details-with-e6-weakmaps.html)，作者：尼克·菲茨杰拉德（2014） - {{jsxref("Map")}} - {{jsxref("Set")}} - {{jsxref("WeakSet")}} From dbd2eee80cc3084f9cf1cf00641005c343a1a7d4 Mon Sep 17 00:00:00 2001 From: hanyujie2002 Date: Tue, 31 Oct 2023 23:13:59 +0800 Subject: [PATCH 59/91] zh-cn: init the translation of mathml text container (#16756) Co-authored-by: A1lo --- .../first_steps/text_containers/index.md | 471 ++++++++++++++++++ 1 file changed, 471 insertions(+) create mode 100644 files/zh-cn/learn/mathml/first_steps/text_containers/index.md diff --git a/files/zh-cn/learn/mathml/first_steps/text_containers/index.md b/files/zh-cn/learn/mathml/first_steps/text_containers/index.md new file mode 100644 index 00000000000000..5717dfff6873fa --- /dev/null +++ b/files/zh-cn/learn/mathml/first_steps/text_containers/index.md @@ -0,0 +1,471 @@ +--- +title: MathML 文本容器 +slug: Learn/MathML/First_steps/Text_containers +--- + +{{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Getting_started", "Learn/MathML/First_steps/Fractions_and_roots", "Learn/MathML/First_steps")}} + +现在，我们将重点介绍 MathML 的文本容器（变量、数字、运算符等），它们是 MathML 公式的构建模块。 + + + + + + + + + + + + +
    前提： + 基本的计算机知识，已安装基本软件，了解基本的文件操作，了解 HTML 基础知识（学习HTML 入门），并对文本样式方面的 CSS 有一定的了解（阅读文本和字体样式基础和 + Web 字体）。 +
    目标： + 熟悉用于编写文本的 MathML 元素，并掌握它们的特殊行为。 +
    + +## 数学符号的 Unicode 字符 + +数学公式涉及许多特殊字符，例如希腊字母（例如 Δ）、弗拉克图尔字母（例如 𝔄）、双线字母（例如 ℂ）、二元运算符（例如 ≠）、箭头（例如 ⇒）、积分符号（例如 ∮）、求和符号（例如 ∑）、逻辑符号（例如 ∀）以及括号（例如 ⌊）等等。维基百科的文章[数学运算符和符号的 Unicode](https://en.wikipedia.org/wiki/Mathematical_operators_and_symbols_in_Unicode) 提供了这些字符的概述。 + +由于这些字符大多不属于基本拉丁 Unicode 块，因此建议指定你的[文档字符编码](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#指定文档中的字符编码)，并使用适当的 [Web 字体](/zh-CN/docs/Learn/CSS/Styling_text/Web_fonts)。以下是一个使用 UTF-8 编码和 [Latin Modern Math](/zh-CN/docs/Web/MathML/Fonts#带有数学表的字体) 字体的基本模板： + +```html + + + + + 带数学字符的页面 + + + +

    ∀A∊𝔰𝔩(n,𝔽),TrA=0

    + + +``` + +{{ EmbedLiveSample('数学 Unicode 字符', 700, 100, "", "") }} + +## 一些语义 + +我们在 [MathML 使用入门](/zh-CN/docs/Learn/MathML/First_steps/Getting_started)文章中提到，MathML 公式中的文本被包裹在特定的容器元素中，例如 `` 或 ``。一般而言，MathML 公式中的所有文字都必须包含在这类容器元素中，这类元素被称为*标记*（token）元素。此外，MathML 提供了多种标记元素，以区分文字内容的不同含义。 + +- `` 元素表示“标识符”，其可以是符号名称或任意文本。例如：`x`（变量）、`cos`（函数名）和 `π`（符号常量）。 +- `` 元素表示“数值文字”或其他应呈现为数值文字的数据。例如：`2`（整数）、`0.123`（小数）或 `0xFFEF`（十六进制值）。 +- `` 元素表示运算符或任何应呈现为运算符的内容。例如：`+`（二元运算符）、`≤`（二元关系符），`∑`（求和符号）或 `[`（括号）。 +- `` 元素用于表示任意文本。例如公式中的短词，如 `if` 或 `映射到`。 + +### 主动学习：识别标记元素 + +下面是一个更复杂的例子，它告诉我们，只有当一个实数是非负数时，它的绝对值才等于它自己。请注意不同的标记元素，它们有什么作用。点击文本中的任何部分，就会高亮显示，并给出相应的解释。 + +```html hidden + + + + + 带数学字符的页面 + + + + + + + | + x + | + + = + x + +  iff  + + x + ≥ + 0 + + + +
    + + +``` + +```css hidden +.highlight { + color: red; +} +math { + font-size: 200%; +} +``` + +```js hidden +const tokenElements = Array.from( + document.querySelectorAll("mi, mo, mn, mtext"), +); +const outputDiv = document.getElementById("output"); +function clearHighlight() { + tokenElements.forEach((token) => { + token.classList.remove("highlight"); + }); +} +tokenElements.forEach((token) => { + token.addEventListener("click", () => { + clearHighlight(); + token.classList.add("highlight"); + outputDiv.insertAdjacentHTML( + "beforeend", + `

    你点击了 <${token.tagName}> 元素。

    `, + ); + }); +}); +document.getElementById("clearOutput").addEventListener("click", () => { + clearHighlight(); + outputDiv.innerHTML = ""; +}); +``` + +{{ EmbedLiveSample('主动学习：识别标记元素', 700, 400) }} + +最后，阅读 MathML 源代码以验证其是否符合你的期望： + +```xml + + + + | + x + | + + = + x + +  iff  + + x + ≥ + 0 + + +``` + +> **备注：** 对于给定的文本内容，有时很难确定要使用哪个标记元素。在实践中，选择错误的元素通常不会导致重大问题，因为所有的标记元素在浏览器实现中通常都会以相同的方式呈现（用于视觉显示和辅助技术）。然而，`` 和 `` 元素具有特殊的区别特征，需要注意。下面的小节将对它们进行解释。 + +## \ 的自动斜体化 + +在数学中的一种排版惯例是使用斜体字母表示变量。为了帮助实现这一点，仅具有单个字符的 `` 元素会自动呈现为斜体。请比较以下公式中两个 `` 元素的渲染效果： + +```html + + sin + x + +``` + +{{ EmbedLiveSample(' 自动斜体化', 700, 50) }} + +> **备注：** [MathML Core 中的这个表格](https://w3c.github.io/mathml-core/#italic-mappings)提供了受斜体化影响的字符的详尽列表，以及相应的斜体字符。 + +## 阻止对 \ 的自动斜体化 + +要想阻止 `` 元素的自动斜体化，可以在该元素上附加 `mathvariant="normal"` 属性。比较以下公式中大写伽马字母的渲染效果： + +```html + + Γ + Γ + +``` + +{{ EmbedLiveSample('阻止 自动斜体化', 700, 50) }} + +> **备注：** 尽管可以应用此转换，但通常你只需直接使用所需的[数学字母数字符号](https://zh.wikipedia.org/wiki/数学字母数字符号)即可。 + +## \ 的运算符属性 + +MathML 包含一个[运算符字典](https://w3c.github.io/mathml-core/#operator-dictionary-human)，其根据 `` 元素的内容和其在容器中的位置（前缀、中缀或后缀），定义了默认属性。让我们考虑一个具体的例子： + +```html + + + + + + + + + + + + + +
    前缀加号 + + + + i + +
    中缀加号 + + j + + + i + +
    前缀求和符号 + + ∑ + i + +
    +``` + +本示例渲染结果应该与下面的屏幕截图类似。观察 `i` 元素及其前面的 `` 之间的间距：前缀加号没有间距，中缀加号有一些间距，前缀求和符号有一些较小的间距。 + +![具有不同运算符间距的 MathML 公式的屏幕截图](operator-spacing.png) + +运算符还有许多其他属性，我们将在后面的内容中详细了解。现在，请记住在运算符字典中使用 `` 容器来包含字符，并使用 `` 元素正确分组子表达式，以利于 MathML 的渲染。 + +### 主动学习：发现不同点 + +现在你对 `` 和 `` 的特殊特性有了一些了解，让我们使用一些实际中用到的 MathML 来重写[页面顶部的示例](#数学符号的_unicode_字符)中的 `

    ` 元素。比较新版本与纯文本版本在你的浏览器中的视觉呈现，并解释两者的区别。 + +```html + + + + + 带数学字符的页面 + + + +

    ∀A∊𝔰𝔩(n,𝔽),TrA=0

    +

    + + ∀ + + A + ∊ + + 𝔰𝔩 + + ( + n + , + 𝔽 + ) + + + + , + + + Tr + A + + = + 0 + + +

    + +
    + + +``` + +```css hidden +div { + padding: 0.5em; +} +``` + +```js hidden +document.getElementById("showSolution").addEventListener( + "click", + () => { + document.getElementById("solution").insertAdjacentHTML( + "beforeEnd", + `
      +
    • 包裹“A”和“n”变量的<mi>元素以斜体渲染。但是，具有包含多个字符的“𝔰𝔩”或字符为“𝔽”的<mi>元素仍然以直立的方式渲染。
      • +
    • 在文本为“∀”、“∊”、“=”或逗号的<mo>元素周围自动添加间距。但是，其中一些元素之前没有添加间距，而括号周围也没有间距。
      • +
    `, + ); + }, + { once: true }, +); +``` + +{{ EmbedLiveSample('主动学习：发现不同点', 700, 500) }} + +> **备注：** 一个明显的区别是，使用 MathML 的源代码会变得更加冗长。请记住，本教程是关于学习语言本身，但在实践中，MathML 内容通常不会手动编写。要查看更多信息，请参阅[编写 MathML](/zh-CN/docs/Web/MathML/Authoring) 页面。 + +### 主动学习：可伸缩运算符 + +操作符词典定义了一些操作符的默认*可伸缩*属性以及相应的*伸缩轴*。例如，操作符可以默认垂直伸展，以覆盖其 `` 容器中非可伸缩兄弟节点的最大高度。通过稍微调整[之前的练习](#主动学习：识别标记元素)，你可以使操作符在垂直方向上伸展。你能找到它们吗？ + +```html hidden + + + + + 具有垂直操作符的页面 + + + + + + + | + + 1 + x + + | + + = + + 1 + + | + x + | + + + = + + 1 + x + + +  iff  + + x + ≥ + 0 + + + +
    + + +``` + +```css hidden +.highlight { + color: red; +} +math { + font-size: 200%; +} +``` + +```js hidden +const tokenElements = Array.from( + document.querySelectorAll("mi, mo, mn, mtext"), +); +const stretchyMoElements = Array.from( + document.getElementsByTagName("mo"), +).slice(0, 2); +const outputDiv = document.getElementById("output"); +function clearHighlight() { + tokenElements.forEach((token) => { + token.classList.remove("highlight"); + }); +} +tokenElements.forEach((token) => { + token.addEventListener("click", () => { + clearHighlight(); + token.classList.add("highlight"); + let message = ""; + let tagName = `<${token.tagName}>`; + if (token.tagName !== "mo") message = `不，这是 ${tagName} 元素！`; + else if (!stretchyMoElements.includes(token)) + message = `不，这是 ${tagName} 元素，但它不是垂直伸展元素。`; + else + message = `正确，此 ${tagName} 元素伸展至它的 <mfrac> 兄弟元素的高度。`; + outputDiv.insertAdjacentHTML( + "beforeend", + `

    ${message}

    `, + ); + }); +}); +document.getElementById("clearOutput").addEventListener("click", () => { + clearHighlight(); + outputDiv.innerHTML = ""; +}); +``` + +{{ EmbedLiveSample('主动学习：可伸缩运算符', 700, 400) }} + +一如往常，请你在完成后阅读源码： + +```xml + + + + | + + 1 + x + + | + + = + + 1 + + | + x + | + + + = + + 1 + x + + +  iff  + + x + ≥ + 0 + + +``` + +> **警告：** 通常需要特殊的[数学字体](/zh-CN/docs/Web/MathML/Fonts)才能实现文本的拉伸效果，前面的示例依赖于 [Web 字体](/zh-CN/docs/Learn/CSS/Styling_text/Web_fonts)。 + +## 总结 + +在本文中，我们学习了一些用作文本容器的*标记*元素及其不同的语义，即 ``（标识符）、``（数字）、``（运算符）、``（通用文本）。我们介绍了在数学公式中常见的特殊 Unicode 字符，并概述了 `` 和 `` 元素的一些可观察表现。在下一篇文章中，我们将学习如何借助*标记*元素构建更复杂的表达式，例如[分数和根号](/zh-CN/docs/Learn/MathML/First_steps/Fractions_and_roots)。 + +{{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Getting_started", "Learn/MathML/First_steps/Fractions_and_roots", "Learn/MathML/First_steps")}} + +## 参见 + +- [`` 元素](/zh-CN/docs/Web/MathML/Element/mi) +- [`` 元素](/zh-CN/docs/Web/MathML/Element/mn) +- [`` 元素](/zh-CN/docs/Web/MathML/Element/mo) +- [`` 元素](/zh-CN/docs/Web/MathML/Element/mtext) From 6062fd0a4704d12f74bf1fd07b2f83bc7954ba67 Mon Sep 17 00:00:00 2001 From: Jason Lam Date: Wed, 1 Nov 2023 09:20:43 +0800 Subject: [PATCH 60/91] [zh-cn]: update the translation of WeakMap constructor (#16783) Co-authored-by: A1lo --- .../global_objects/weakmap/weakmap/index.md | 54 +++++++++---------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/files/zh-cn/web/javascript/reference/global_objects/weakmap/weakmap/index.md b/files/zh-cn/web/javascript/reference/global_objects/weakmap/weakmap/index.md index 216d547a4b7695..6fd007ebf0d56a 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/weakmap/weakmap/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/weakmap/weakmap/index.md @@ -1,58 +1,58 @@ --- -title: WeakMap() constructor +title: WeakMap() 构造函数 slug: Web/JavaScript/Reference/Global_Objects/WeakMap/WeakMap --- {{JSRef}} -**`WeakMap()`** 会创建一个 `WeakMap` 对象，该对象是一组键/值对的集合，其中的键是弱引用的。其键必须是对象，而值可以是任意的。 - -你可以从这里了解更多关于 `WeakMap` 的内容 [WeakMap 对象](/zh-CN/docs/Web/JavaScript/Guide/Keyed_collections) +**`WeakMap()`** 构造函数创建 {{jsxref("WeakMap")}} 对象。 ## 语法 -```js -new WeakMap(); -new WeakMap([iterable]); +```js-nolint +new WeakMap() +new WeakMap(iterable) ``` +> **备注：** `WeakMap()` 构造函数只能使用 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new) 调用。不使用 `new` 而直接调用会抛出 {{jsxref("TypeError")}}。 + ## 参数 - `iterable` - - Iterable 是一个数组（二元数组）或者其他可迭代的且其元素是键值对的对象。每个键值对会被加到新的 WeakMap 里。null 会被当做 undefined。 + - : 一个 [`Array`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array) 或者其他实现了 [`@@iterator`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator) 方法的可迭代对象，该方法返回一个迭代器对象，该对象会产生一个二元类数组对象，其第一个元素是将被用作 `WeakMap` 键的对象，第二个元素是与该键相关联的值。每个键值对都会被添加到新的 `WeakMap` 对象中。`null` 会被视为 `undefined`。 ## 示例 -### 使用 `WeakMap` +### 使用 WeakMap -```JavaScript -const wm1 = new WeakMap(), - wm2 = new WeakMap(), - wm3 = new WeakMap(); -const o1 = {}, - o2 = function(){}, - o3 = window; +```js +const wm1 = new WeakMap(); +const wm2 = new WeakMap(); +const wm3 = new WeakMap(); +const o1 = {}; +const o2 = function () {}; +const o3 = window; wm1.set(o1, 37); wm1.set(o2, "azerty"); -wm2.set(o1, o2); // value可以是任意值,包括一个对象或一个函数 +wm2.set(o1, o2); // value 可以是任何值，包括对象或函数 wm2.set(o3, undefined); -wm2.set(wm1, wm2); // 键和值可以是任意对象,甚至另外一个WeakMap对象 +wm2.set(wm1, wm2); // 键和值可以是任何对象，甚至是 WeakMap！ wm1.get(o2); // "azerty" -wm2.get(o2); // undefined,wm2中没有o2这个键 -wm2.get(o3); // undefined,值就是undefined +wm2.get(o2); // undefined，因为 wm2 上没有 o2 的键 +wm2.get(o3); // undefined，因为设置的值就是 undefined wm1.has(o2); // true wm2.has(o2); // false -wm2.has(o3); // true (即使值是undefined) +wm2.has(o3); // true（即使值是 undefined） wm3.set(o1, 37); wm3.get(o1); // 37 -wm1.has(o1); // true +wm1.has(o1); // true wm1.delete(o1); -wm1.has(o1); // false +wm1.has(o1); // false ``` ## 规范 @@ -63,11 +63,11 @@ wm1.has(o1); // false {{Compat}} -## 相关链接 +## 参见 -- A polyfill of `WeakMap` is available in [`core-js`](https://github.com/zloirock/core-js#weakmap) -- [`WeakMap` in the JavaScript guide](/zh-CN/docs/Web/JavaScript/Guide/Keyed_collections#weakmap对象) -- [Hiding Implementation Details with ECMAScript 6 WeakMaps](https://fitzgeraldnick.com/weblog/53/) +- [`core-js` 中 `WeakMap` 的 polyfill](https://github.com/zloirock/core-js#weakmap) +- [JavaScript 指南中的 `WeakMap`](/zh-CN/docs/Web/JavaScript/Guide/Keyed_collections#weakmap_对象) +- [使用 ECMAScript 6 WeakMap 隐藏实现细节](https://fitzgeraldnick.com/2014/01/13/hiding-implementation-details-with-e6-weakmaps.html) - {{jsxref("Map")}} - {{jsxref("Set")}} - {{jsxref("WeakSet")}} From ab5da488d67cf78252fc41d7c06c5979bd645a72 Mon Sep 17 00:00:00 2001 From: frodo821 Date: Wed, 1 Nov 2023 22:23:39 +0900 Subject: [PATCH 61/91] [JA] Translate `WebGLRenderingContext: createRenderbuffer()` and `WebGLRenderingContext: createFramebuffer()` Page (#16607) * create createFrameBuffer page and translate into Japanese. * create createRenderbuffer page and translate it into Japanese * Update index.md * Update files/ja/web/api/webglrenderingcontext/createrenderbuffer/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/ja/web/api/webglrenderingcontext/createframebuffer/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/ja/web/api/webglrenderingcontext/createframebuffer/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/ja/web/api/webglrenderingcontext/createframebuffer/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/ja/web/api/webglrenderingcontext/createrenderbuffer/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/ja/web/api/webglrenderingcontext/createrenderbuffer/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update index.md * Update index.md --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../createframebuffer/index.md | 50 +++++++++++++++++++ .../createrenderbuffer/index.md | 50 +++++++++++++++++++ 2 files changed, 100 insertions(+) create mode 100644 files/ja/web/api/webglrenderingcontext/createframebuffer/index.md create mode 100644 files/ja/web/api/webglrenderingcontext/createrenderbuffer/index.md diff --git a/files/ja/web/api/webglrenderingcontext/createframebuffer/index.md b/files/ja/web/api/webglrenderingcontext/createframebuffer/index.md new file mode 100644 index 00000000000000..e5d973d16eb64a --- /dev/null +++ b/files/ja/web/api/webglrenderingcontext/createframebuffer/index.md @@ -0,0 +1,50 @@ +--- +title: WebGLRenderingContext.createFramebuffer() +short-title: createFramebuffer() +slug: Web/API/WebGLRenderingContext/createFramebuffer +--- + +{{APIRef("WebGL")}} + +[WebGL API](/ja/docs/Web/API/WebGL_API) の **`WebGLRenderingContext.createFramebuffer()`** メソッドは、 +{{domxref("WebGLFramebuffer")}} +を作成し、初期化します。 + +## 構文 + +```js-nolint +createFramebuffer() +``` + +### 引数 + +なし。 + +### 返値 + +{{domxref("WebGLFramebuffer")}} オブジェクト。 + +## 例 + +### フレームバッファーを作成する + +```js +const canvas = document.getElementById("canvas"); +const gl = canvas.getContext("webgl"); +const framebuffer = gl.createFramebuffer(); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("WebGLRenderingContext.bindFramebuffer()")}} +- {{domxref("WebGLRenderingContext.deleteFramebuffer()")}} +- {{domxref("WebGLRenderingContext.isFramebuffer()")}} +- 他のバッファ: {{domxref("WebGLBuffer")}}, {{domxref("WebGLRenderbuffer")}} diff --git a/files/ja/web/api/webglrenderingcontext/createrenderbuffer/index.md b/files/ja/web/api/webglrenderingcontext/createrenderbuffer/index.md new file mode 100644 index 00000000000000..5955e415766239 --- /dev/null +++ b/files/ja/web/api/webglrenderingcontext/createrenderbuffer/index.md @@ -0,0 +1,50 @@ +--- +title: WebGLRenderingContext.createRenderbuffer() +short-title: createRenderbuffer() +slug: Web/API/WebGLRenderingContext/createRenderbuffer +--- + +{{APIRef("WebGL")}} + +[WebGL API](/ja/docs/Web/API/WebGL_API) の **`WebGLRenderingContext.createRenderbuffer()`** メソッドは、 +{{domxref("WebGLRenderbuffer")}} +オブジェクトを作成し、初期化します。 + +## 構文 + +```js-nolint +createRenderbuffer() +``` + +### 引数 + +なし。 + +### 返値 + +画像または、レンダリングのソースやターゲットとなるデータを保存する {{domxref("WebGLRenderbuffer")}} オブジェクト。 + +## 例 + +### レンダリングバッファーを作成する + +```js +const canvas = document.getElementById("canvas"); +const gl = canvas.getContext("webgl"); +const renderBuffer = gl.createRenderbuffer(); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("WebGLRenderingContext.bindRenderbuffer()")}} +- {{domxref("WebGLRenderingContext.deleteRenderbuffer()")}} +- {{domxref("WebGLRenderingContext.isRenderbuffer()")}} +- 他のバッファ: {{domxref("WebGLBuffer")}}, {{domxref("WebGLFramebuffer")}} From e02001df7de9548be40ebe7003c266941fd4ed4d Mon Sep 17 00:00:00 2001 From: yyss Date: Wed, 1 Nov 2023 22:25:31 +0900 Subject: [PATCH 62/91] =?UTF-8?q?Firefox=20119=20for=20developers=E3=82=92?= =?UTF-8?q?=E7=BF=BB=E8=A8=B3=20(#16736)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Firefox 119 for developersを翻訳 Oct 24, 2023の英語版に対応。 * Update index.md * Update index.md --- .../ja/mozilla/firefox/releases/119/index.md | 78 +++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 files/ja/mozilla/firefox/releases/119/index.md diff --git a/files/ja/mozilla/firefox/releases/119/index.md b/files/ja/mozilla/firefox/releases/119/index.md new file mode 100644 index 00000000000000..114c83bfecaf4e --- /dev/null +++ b/files/ja/mozilla/firefox/releases/119/index.md @@ -0,0 +1,78 @@ +--- +title: Firefox 119 for developers +slug: Mozilla/Firefox/Releases/119 +l10n: + sourceCommit: 7c6b02283df15120126fd174f91519c9a76d81c9 +--- + +{{FirefoxSidebar}} + +このページでは、開発者に影響する Firefox 119 の変更点をまとめています。Firefox 119 は、2023 年 10 月 24 日にリリースされました。 + +## ウェブ開発者向けの変更点一覧 + +### HTML + +#### 廃止 + +- {{HTMLElement('input')}} 要素で、非標準の `mozactionhint` 属性のサポートを廃止しました。代わりに [`enterkeyhint`](/ja/docs/Web/HTML/Global_attributes/enterkeyhint) を使用してください (詳しくは [Firefox bug 1735980](https://bugzil.la/1735980) をご覧ください)。 + +### CSS + +- {{cssxref("attr")}} CSS 関数の代替値をサポートしました。これは [グローバル属性](/ja/docs/Web/HTML/Global_attributes) が見つからない場合に、代替値の設定を使用することができます ([Firefox bug 1448248](https://bugzil.la/1448248))。 + +### JavaScript + +- 反復可能な要素をグループ化するための {{jsxref("Object.groupBy()")}} および {{jsxref("Map.groupBy()")}} 静的メソッドをサポートしました (詳しくは [Firefox bug 1792650](https://bugzil.la/1792650) をご覧ください)。 +- 文字列が適格な Unicode 文字を含んでいる (すなわち、[孤立サロゲート](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#utf-16_characters_unicode_code_points_and_grapheme_clusters) がない) ことを確認できる {{jsxref("String.prototype.isWellFormed()")}} メソッドと、不適格な文字列を適格な Unicode 文字に修正できる {{jsxref("String.prototype.toWellFormed()")}} メソッドをサポートしました (詳しくは [Firefox bug 1850755](https://bugzil.la/1850755) をご覧ください)。 + +### SVG + +- すべての SVG 要素で、[``](/ja/docs/Web/SVG/Content_type#length) の値を受け入れる [SVG 属性](/ja/docs/Web/SVG/Attribute) が [level 3](https://www.w3.org/TR/css-values-3/#lengths) [length](/ja/docs/Web/CSS/length) [CSS データ型](/ja/docs/Web/CSS/CSS_Types) をサポートしました。これはフォントサイズ (`cap`、`rem` など) やビューポート (`vh`、`vw`、`vmin` など) に基づくサイズや、絶対的な長さ (`px`、`cm` など) で SVG 要素のサイズを決めることを可能にします。例: `` (詳しくは [Firefox bug 1287054](https://bugzil.la/1287054) をご覧ください) + +### HTTP + +- {{HTTPHeader("Cross-Origin-Embedder-Policy")}} HTTP レスポンスヘッダーの [`credentialless`](/ja/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy#credentialless) をデスクトッププラットフォーム (および Android を除くモバイルプラットフォーム) でサポートしました。Cookie やほかの資格情報がない場合でも、明示的に許可していない外部オリジンのサーバーへリソースの `no-cors` 要求を行えます ([Firefox bug 1851467](https://bugzil.la/1851467))。 + +### API + +- [`WebTransport.createBidirectionalStream()`](/ja/docs/Web/API/WebTransport/createBidirectionalStream) および [`WebTransport.createUnidirectionalStream()`](/ja/docs/Web/API/WebTransport/createUnidirectionalStream) に渡す options 引数に `sendOrder` プロパティを含めることで、送信ストリームの相対的な優先度を指定できるようになりました ([Firefox bug 1816925](https://bugzil.la/1816925))。 +- [`AuthenticatorAttestationResponse`](/ja/docs/Web/API/AuthenticatorAttestationResponse) インターフェイスの [`getAuthenticatorData()`](/ja/docs/Web/API/AuthenticatorAttestationResponse/getAuthenticatorData)、[`getPublicKeyAlgorithm()`](/ja/docs/Web/API/AuthenticatorAttestationResponse/getPublicKeyAlgorithm)、[`getPublicKey()`](/ja/docs/Web/API/AuthenticatorAttestationResponse/getPublicKey) メソッドをサポートしました ([Firefox bug 1816519](https://bugzil.la/1816519)、[Firefox bug 1816520](https://bugzil.la/1816520))。 +- [Web Authentication API](/ja/docs/Web/API/Web_Authentication_API) の [Credential Properties Extension (`credProps`)](/ja/docs/Web/API/Web_Authentication_API/WebAuthn_extensions#credprops) をサポートしました。資格情報を生成または登録した後に検出可能かを、ユーザーが確認できます ([Firefox bug 1844437](https://bugzil.la/1844437))。 +- [`SubtleCrypto.deriveKey()`](/ja/docs/Web/API/SubtleCrypto/deriveKey) メソッドで、引数 [`derivedKeyAlgorithm`](/ja/docs/Web/API/SubtleCrypto/deriveKey#derivedkeyalgorithm) のオプションとして [HKDF](/ja/docs/Web/API/SubtleCrypto/deriveKey#hkdf) アルゴリズムをサポートしました ([Firefox bug 1851928](https://bugzil.la/1851928))。 +- {{domxref("PublicKeyCredential")}} インターフェイスの {{domxref("PublicKeyCredential.parseCreationOptionsFromJSON_static", "parseCreationOptionsFromJSON()")}}、{{domxref("PublicKeyCredential.parseRequestOptionsFromJSON_static", "parseRequestOptionsFromJSON()")}}、{{domxref("PublicKeyCredential.toJSON", "toJSON()")}} メソッドをサポートしました。 + これらは資格情報の生成や共有に使用するオブジェクトを、シリアライズやデシリアライズやサーバーとの共有に使用できる JSON 表現に変換するのに便利なメソッドです ([Firefox bug 1823782](https://bugzil.la/1823782))。 + +#### DOM + +- ほかの要素を参照しない属性に対して、[ARIA](/ja/docs/Web/Accessibility/ARIA) reflection をデフォルトでサポートしました。IDREF 型でない属性だけが反映されます。`setAttribute` や `getAttribute` を使用せずに、JavaScript API を通して DOM 要素の ARIA 属性を直接設定および取得できるようになりました。たとえば、`buttonElement.setAttribute("aria-pressed", "true");` に加えて `buttonElement.ariaPressed = "true";` もサポートしました ([Firefox bug 1785412](https://bugzil.la/1785412))。 + +### WebDriver conformance (WebDriver BiDi, Marionette) + +#### 一般 + +- 中央または右のマウスボタンを押して `pointerDown` アクションを実行するとき、関連する HTML 要素から発生する `mousedown` イベントの `buttons` プロパティの値が入れ替わっていた不具合を修正しました ([Firefox bug 1850086](https://bugzil.la/1850086))。 + +- `pointer` を基準に設定して入力タイプが `wheel` の `scroll` アクションを実行すると、不適切な `invalid argument` エラーが発生していた不具合を修正しました。現在の WebDriver 仕様ではこの組み合わせがサポートされていません ([Firefox bug 1850166](https://bugzil.la/1850166))。 + +#### WebDriver BiDi + +- 指定したブラウジングコンテキストで現在表示されているページまたはフレームを再読み込みできるコマンド [`browsingContext.reload`](https://w3c.github.io/webdriver-bidi/#command-browsingContext-reload) を追加しました ([Firefox bug 1830859](https://bugzil.la/1830859))。 + +- `alert`、`confirm`、`prompt` 型のユーザープロンプトが閉じられたときに発生するイベント [`browsingContext.userPromptClosed`](https://w3c.github.io/webdriver-bidi/#event-browsingContext-userPromptClosed) を追加しました ([Firefox bug 1824221](https://bugzil.la/1824221))。 + +- Firefox によって新しいナビゲーションが開始されたときに発生するイベント [`browsingContext.navigationStarted`](https://w3c.github.io/webdriver-bidi/#event-browsingContext-navigationStarted) を追加しました ([Firefox bug 1756595](https://bugzil.la/1756595))。 + +- 指定したブラウジングコンテキストで JavaScript Realm のライフタイムを監視できるイベント [`script.realmCreated`](https://w3c.github.io/webdriver-bidi/#event-script-realmCreated) および [`script.realmDestroyed`](https://w3c.github.io/webdriver-bidi/#event-script-realmDestroyed) を追加しました。Realm は基本的に、独自のグローバルオブジェクト (window) を持つ分離された実行環境 (`sandbox`) です ([Firefox bug 1788657](https://bugzil.la/1788657)、[Firefox bug 1788659](https://bugzil.la/1788659))。 + +- HTTP 認証のダイアログボックスが表示されたときに、`browsingContext.userPromptOpened` イベントが誤って発生していた不具合を修正しました ([Firefox bug 1853302](https://bugzil.la/1853302))。 + +- `context` フィールドが `null` に設定された不必要なイベントが発生しないようになりました。基礎となるブラウジングコンテキストが閉じられたため、このようなイベントは有効ではありません ([Firefox bug 1847563](https://bugzil.la/1847563))。 + +#### Marionette + +- `Addon:Install` コマンドを使用して WebExtension のインスストールを試みたときに発生する可能性があるエラーコードのリストを、最新の Firefox のエラーコードに合うように更新しました ([Firefox bug 1852537](https://bugzil.la/1852537))。 + +## 過去のバージョン + +{{Firefox_for_developers(118)}} From e86208e662f39410dc66cd882caaa4d19e7de577 Mon Sep 17 00:00:00 2001 From: beezen <1184031131@qq.com> Date: Wed, 1 Nov 2023 21:50:01 +0800 Subject: [PATCH 63/91] zh-cn: fix typos (#16791) --- .../tutorial/pixel_manipulation_with_canvas/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/zh-cn/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md b/files/zh-cn/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md index 1ad14ccf653b72..e6f1326a55ad38 100644 --- a/files/zh-cn/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md +++ b/files/zh-cn/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md @@ -362,12 +362,12 @@ function draw(img) { - {{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/jpeg', quality)")}} - : 创建一个 JPG 图片。你可以有选择地提供从 0 到 1 的品质量，1 表示最好品质，0 基本不被辨析但有比较小的文件大小。 -当你从画布中生成了一个数据链接，例如，你可以将它用于任何{{HTMLElement("image")}}元素，或者将它放在一个有 download 属性的超链接里用于保存到本地。 +当你从画布中生成了一个数据链接，例如，你可以将它用于任何 {{HTMLElement("image")}} 元素，或者将它放在一个有 download 属性的超链接里用于保存到本地。 -你也可以从画布中创建一个{{domxref("Blob")}}对像。 +你也可以从画布创建一个 {{domxref("Blob")}} 对象。 - {{domxref("HTMLCanvasElement.toBlob", "canvas.toBlob(callback, type, encoderOptions)")}} - - : 这个创建了一个在画布中的代表图片的 `Blob` 对像。 + - : 这个创建了一个在画布中的代表图片的 `Blob` 对象。 ## 参见 From 45015aa1ad731c4024e2e801907c873d7464ab84 Mon Sep 17 00:00:00 2001 From: Fushihara <1039534+fushihara@users.noreply.github.com> Date: Thu, 2 Nov 2023 00:18:35 +0900 Subject: [PATCH 64/91] =?UTF-8?q?TypedArray=20=E3=81=AEmarkdown=E3=81=AE?= =?UTF-8?q?=E3=83=86=E3=83=BC=E3=83=96=E3=83=AB=E3=81=8C=E5=A3=8A=E3=82=8C?= =?UTF-8?q?=E3=81=A6=E3=81=84=E3=81=9F=E3=81=AE=E3=81=A7=E4=BF=AE=E6=AD=A3?= =?UTF-8?q?=20(#16738)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Update index.md https://github.com/mdn/content/blob/70f09675ddcfc75a3bb66d2dce4cf82738948a37/files/en-us/web/javascript/reference/global_objects/typedarray/index.md を参照 * Update files/ja/web/javascript/reference/global_objects/typedarray/index.md --------- Co-authored-by: Masahiro FUJIMOTO --- .../javascript/reference/global_objects/typedarray/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/index.md index 397fd04725db5c..08e97ae128077e 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/index.md @@ -20,7 +20,7 @@ l10n: ### TypedArray オブジェクト | 型 | 値の範囲 | サイズ (バイト数) | 説明 | Web IDL 型 | 同等の C 型 | -| ------------------------------- | ---------------------------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------ | --------------------- | -------------------------------------------------------------------- | -------------------- | ------- | +| ------------------------------- | ---------------------------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------ | --------------------- | -------------------------------------------------------------------- | | {{jsxref("Int8Array")}} | -128 から 127 | 1 | 8 ビット長、2 の補数方式の符号付き整数値 | `byte` | `int8_t` | | {{jsxref("Uint8Array")}} | 0 から 255 | 1 | 8 ビット長、符号なし整数値 | `octet` | `uint8_t` | | {{jsxref("Uint8ClampedArray")}} | 0 から 255 | 1 | 8 ビット長、符号なし整数値 (切り詰め) | `octet` | `uint8_t` | @@ -28,7 +28,7 @@ l10n: | {{jsxref("Uint16Array")}} | 0 から 65535 | 2 | 16 ビット長、符号なし整数値 | `unsigned short` | `uint16_t` | | {{jsxref("Int32Array")}} | -2147483648 から 2147483647 | 4 | 32 ビット長、2 の補数方式の符号付き整数値 | `long` | `int32_t` | | {{jsxref("Uint32Array")}} | 0 から 4294967295 | 4 | 32 ビット長、符号なし整数値 | `unsigned long` | `uint32_t` | -| {{jsxref("Float32Array")}} | `-3.4E38` から `3.4E38` および `1.2E-38` （最小の正の数） | 4 | 32-bit IEEE floating point number (7 significant digits e.g., `1.234567`)`1.2`×`10-38 から 3.4`×`1038` | 4 | 32 ビット長 IEEE 方式浮動小数点数 (有効桁数 7 桁、例えば `1.234567`) | `unrestricted float` | `float` | +| {{jsxref("Float32Array")}} | `-3.4E38` から `3.4E38` および `1.2E-38` （最小の正の数） | 4 | 32 ビット長 IEEE 方式浮動小数点数 (有効桁数 7 桁、例えば `1.234567`) | `unrestricted float` | `float` | | {{jsxref("Float64Array")}} | `-1.8E308` から `1.8E308` および `5E-324` （最小の正の数） | 8 | 64 ビット長 IEEE 方式浮動小数点数 (有効桁数 16 桁、例えば`1.23456789012345`) | `unrestricted double` | `double` | | {{jsxref("BigInt64Array")}} | -263 to 263 - 1 | 8 | 64 ビット長、2 の補数方式の符号付き整数値 | `bigint` | `int64_t (signed long long)` | | {{jsxref("BigUint64Array")}} | 0 to 264 - 1 | 8 | 64 ビット長、符号なし整数値 | `bigint` | `uint64_t (unsigned long long)` | From 574010aa8905458304f6099a3e661546a3082e64 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 29 Oct 2023 11:30:41 +0900 Subject: [PATCH 65/91] =?UTF-8?q?#16711=20=E3=81=AE=E8=BF=BD=E5=8A=A0?= =?UTF-8?q?=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/_redirects.txt | 2 +- files/ja/_wikihistory.json | 8 --- .../glossary/internationalization/index.md | 15 ----- .../ja/conflicting/web/api/blob/type/index.md | 64 ------------------- .../ja/glossary/internationalization/index.md | 35 +++++----- 5 files changed, 16 insertions(+), 108 deletions(-) delete mode 100644 files/ja/conflicting/glossary/internationalization/index.md delete mode 100644 files/ja/conflicting/web/api/blob/type/index.md diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 12abc314bbe460..ebf0603d5afd8c 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -1341,7 +1341,7 @@ /ja/docs/Glossary/Header /ja/docs/Glossary/HTTP_header /ja/docs/Glossary/I18N /ja/docs/Glossary/Internationalization /ja/docs/Glossary/Index /ja/docs/Glossary -/ja/docs/Glossary/Internationalization_and_localization /ja/docs/conflicting/Glossary/Internationalization +/ja/docs/Glossary/Internationalization_and_localization /ja/docs/Glossary/Internationalization /ja/docs/Glossary/POP3 /ja/docs/Glossary/POP /ja/docs/Glossary/Reference /ja/docs/Glossary/Object_reference /ja/docs/Glossary/Round_Trip_Time_(RTT) /ja/docs/Glossary/Round_Trip_Time diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index af763114aeb690..9946100bc9c154 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -30210,10 +30210,6 @@ "modified": "2020-07-17T23:22:13.809Z", "contributors": ["papparapa", "silverskyvicto"] }, - "conflicting/Glossary/Internationalization": { - "modified": "2020-05-24T08:29:22.994Z", - "contributors": ["dskmori", "Potappo", "dukesan"] - }, "conflicting/Glossary/Scroll_container": { "modified": "2019-03-18T20:53:07.981Z", "contributors": ["mfuji09"] @@ -30342,10 +30338,6 @@ "modified": "2020-09-30T15:30:24.568Z", "contributors": ["chrisdavidmills", "dvincent"] }, - "conflicting/Web/API/Blob/type": { - "modified": "2020-10-15T22:11:44.472Z", - "contributors": ["silverskyvicto", "mfuji09"] - }, "conflicting/Web/API/Document": { "modified": "2020-10-15T22:12:31.952Z", "contributors": ["mfuji09"] diff --git a/files/ja/conflicting/glossary/internationalization/index.md b/files/ja/conflicting/glossary/internationalization/index.md deleted file mode 100644 index 821665812ff88f..00000000000000 --- a/files/ja/conflicting/glossary/internationalization/index.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Internationalization (国際化) -slug: conflicting/Glossary/Internationalization -original_slug: Glossary/Internationalization_and_localization ---- - -**国際化** (しばしば 「[i18n](/ja/docs/Glossary/I18N)」と略される) は、ウェブサイトやウェブアプリケーションを、異なる言語、地域的差異、異なる国や地域による技術的要求に対応させます。 国際化はあなたのウェブアプリケーションを構築するプロセスであり、新しい言語や地域をサポートする場合に、さほど多くの技術的努力を必要とせずに幅広い言語や地域に対応化可能です。また、すべてのコンテンツをレイアウトを壊すことなくアプリケーションを翻訳あるいはローカライズするので、ユーザーは機能を閲覧することができます。 - -国際化は複数の文字セット (通常は [Unicode](https://www.techtarget.com/whatis/definition/Unicode) を通じ)、計量単位（既定の通貨、°C/°F、km/マイル、など）、日付と時刻の書式、キーボードレイアウト、レイアウト、書字方向を含みます。 - -## 関連情報 - -- [国際化拡張](/ja/docs/Mozilla/Add-ons/WebExtensions/Internationalization) -- [国際化 API](/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl) -- [フレックスボックス](/ja/docs/Learn/CSS/CSS_layout/Flexbox) および [グリッドレイアウト](/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) diff --git a/files/ja/conflicting/web/api/blob/type/index.md b/files/ja/conflicting/web/api/blob/type/index.md deleted file mode 100644 index dfd71739b507fc..00000000000000 --- a/files/ja/conflicting/web/api/blob/type/index.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: "File: type プロパティ" -slug: conflicting/Web/API/Blob/type -original_slug: Web/API/File/type ---- - -{{APIRef("File API")}} - -{{domxref("File")}} オブジェクトによって表されるファイルのメディアタイプ ([MIME](/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types)) を返します。 - -## 値 - -ファイルのタイプを示すメディアタイプ (MIME) を含む文字列。たとえば、 PNG 画像の場合は "image/png" です。 - -## 例 - -### HTML - -```html - - -``` - -```css hidden -output { - display: block; - white-space: pre-wrap; -} -``` - -### JavaScript - -```js -const output = document.getElementById("output"); -const filepicker = document.getElementById("filepicker"); - -filepicker.addEventListener("change", (event) => { - const files = event.target.files; - output.textContent = ""; - - for (const file of files) { - output.textContent += `${file.name}: ${file.type || "unknown"}\n`; - } -}); -``` - -### 結果 - -{{EmbedLiveSample('Examples')}} - -> **メモ:** 現在の実装に基づくと、ブラウザーは実際にファイルのバイトストリームを読み取ってメディアタイプを判断している訳ではありません。ファイルの拡張子に基づいて推測します。 PNG 画像ファイルを .txt に改名すると "_text/plain_" となり、"_image/png_" とはなりません。さらに `file.type` は一般的に、画像、 HTML 文書、音声、動画などの一般的なファイルタイプに対してのみ信頼できます。一般的ではないファイルの拡張子に対しては、空の文字列を返します。クライアントの構成 (Windows レジストリーなど) によっては、一般的なタイプの場合でも予期しない値が発生することがあります。**開発者は、このプロパティを唯一の検証方法として信頼しないことをお勧めします。** - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [ウェブアプリケーションからのファイルの使用](/ja/docs/Web/API/File_API/Using_files_from_web_applications) -- ブログ記事: [Be skeptical of client-reported MIME types](https://textslashplain.com/2018/07/26/be-skeptical-of-client-reported-mime-content-types/) diff --git a/files/ja/glossary/internationalization/index.md b/files/ja/glossary/internationalization/index.md index 2344d0a5ebfaa3..ed82bb3ef17ee8 100644 --- a/files/ja/glossary/internationalization/index.md +++ b/files/ja/glossary/internationalization/index.md @@ -1,32 +1,27 @@ --- -title: I18N(国際化対応) +title: Internationalization (i18n) （国際化対応） slug: Glossary/Internationalization -original_slug: Glossary/I18N +l10n: + sourceCommit: 5f5daffff583dffcf4650a8812bc228807a1b34d --- -i18n("internationalization"という 20 文字の単語より)(国際化対応)は、製品やサービスをどんなターゲット文化にも容易に適応させるベストプラクティスです。 +{{GlossarySidebar}} -> **Internationalization(国際化対応)**とは、文化、地域、言語によって異なるターゲットオーディエンスに合わせて容易にローカライズできる製品、アプリケーション、または文書内容の設計と開発のことです。({{Glossary("W3C")}}の定義) +**国際化対応** (Internationalization) は "i18n" と略されることもあり、さまざまな地域、言語、文化が異なるターゲットオーディエンスに簡単に適応できるようにシステムを設計することです。 -なかでも、i18n では次に挙げるものについて、複数のサポートが必要です。 +システムを特定のターゲット層に適合させる補完的なプロセスを{{glossary("Localization", "ローカライズ")}}と呼びます。 -- 文字セット(通常は[Unicode](http://searchcio-midmarket.techtarget.com/definition/Unicode)) -- 測定単位(通貨、°C/°F, km/マイル、など) +特に国際化とは、国際的な文化や習慣に関する次のような違いに適応することです。 + +- 書記体系 +- 測定単位（通貨、°C/°F, km/マイル、など） - 日時フォーマット - キーボードレイアウト -- テキストの方向 - -## 詳細情報 - -### 一般知識 - -- Wikipedia 上の記事：[国際化と地域化](https://ja.wikipedia.org/wiki/国際化と地域化) - -### 技術リファレンス -- [W3C での国際化対応](http://www.w3.org/International/questions/qa-i18n.en#Internationalization) -- [gala-global.org での国際化対応](http://www.gala-global.org/what-internationalization) +[Unicode コンソーシアム](https://home.unicode.org/)の活動は、国際化の基本的な部分です。 Unicode は、世界の書記体系の多様性だけでなく、通貨や時間/日付フォーマットのような文化的な多様性にも対応しています。 -### これについて学習する +## 関連情報 -- [i18nguy.com での i18n 資料](http://www.i18nguy.com/) +- {{glossary("Localization", "地域化")}} +- [Unicode コンソーシアム](https://home.unicode.org/) +- [JavaScript 国際化対応 API](/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl) From aa674c1db388b9682790e40f4b5b70e231d8e93c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 29 Oct 2023 12:01:08 +0900 Subject: [PATCH 66/91] =?UTF-8?q?=E3=83=AA=E3=83=80=E3=82=A4=E3=83=AC?= =?UTF-8?q?=E3=82=AF=E3=83=88=E3=82=92=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/_redirects.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index ebf0603d5afd8c..d87a2a01366c87 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -2761,7 +2761,7 @@ /ja/docs/Web/API/File.size /ja/docs/Web/API/Blob/size /ja/docs/Web/API/File.type /ja/docs/Web/API/Blob/type /ja/docs/Web/API/File/size /ja/docs/Web/API/Blob/size -/ja/docs/Web/API/File/type /ja/docs/conflicting/Web/API/Blob/type +/ja/docs/Web/API/File/type /ja/docs/Web/API/Blob/type /ja/docs/Web/API/FileReader/onabort /ja/docs/Web/API/FileReader/abort_event /ja/docs/Web/API/FileReader/onerror /ja/docs/Web/API/FileReader/error_event /ja/docs/Web/API/FileReader/onload /ja/docs/Web/API/FileReader/load_event From a3edac1a1819b0e5af623d2003e2e1bd6707ffe7 Mon Sep 17 00:00:00 2001 From: Tatsunori Uchino Date: Wed, 1 Nov 2023 00:04:52 +0900 Subject: [PATCH 67/91] fix: opposite words in Japanese --- .../reference/global_objects/string/trimstart/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/javascript/reference/global_objects/string/trimstart/index.md b/files/ja/web/javascript/reference/global_objects/string/trimstart/index.md index 31631971f77fcf..5d456c86b75c7a 100644 --- a/files/ja/web/javascript/reference/global_objects/string/trimstart/index.md +++ b/files/ja/web/javascript/reference/global_objects/string/trimstart/index.md @@ -37,7 +37,7 @@ String.prototype.trimLeft.name === "trimStart"; ### trimStart() の使用 -次の例は `str` の末尾から空白を取り除きますが、先頭からは取り除きません。 +次の例は `str` の先頭から空白を取り除きますが、末尾からは取り除きません。 ```js-nolint let str = " foo "; From 1c4dd6a7285bc32778b1400e88ea78abbe1e2f3f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 29 Oct 2023 12:56:32 +0900 Subject: [PATCH 68/91] =?UTF-8?q?2023/02/21=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../css/_doublecolon_first-letter/index.md | 23 ++++++++++--------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/files/ja/web/css/_doublecolon_first-letter/index.md b/files/ja/web/css/_doublecolon_first-letter/index.md index 0b892864bf346c..8300708162c54f 100644 --- a/files/ja/web/css/_doublecolon_first-letter/index.md +++ b/files/ja/web/css/_doublecolon_first-letter/index.md @@ -1,18 +1,15 @@ --- -title: "::first-letter (:first-letter)" +title: "::first-letter" slug: Web/CSS/::first-letter +l10n: + sourceCommit: 5fea7c9593f5e4b4ef13ec65064acf1eabf01e4e --- {{CSSRef}} -**`::first-letter`** は [CSS](/ja/docs/Web/CSS) の[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)で、[ブロックレベル要素](/ja/docs/Web/CSS/Visual_formatting_model#block-level_elements_and_block_boxes)の最初の行の最初の文字にスタイルを適用します。ただし、最初の文字より前に他のコンテンツ (画像やインラインテーブルなど) がないときに限ります。 +**`::first-letter`** は [CSS](/ja/docs/Web/CSS) の[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)で、[ブロックコンテナー](/ja/docs/Web/CSS/Visual_formatting_model#ブロックコンテナー)の最初の行の最初の文字にスタイルを適用します。ただし、最初の文字より前に他のコンテンツ（画像やインラインテーブルなど）がないときに限ります。 -```css -/*

    の最初の文字を選択します */ -p::first-letter { - font-size: 130%; -} -``` +{{EmbedInteractiveExample("pages/tabbed/pseudo-element-first-letter.html", "tabbed-shorter")}} 要素の最初の文字は、常に単純に識別できるとは限りません。 @@ -20,7 +17,7 @@ p::first-letter { - 言語によっては常に一緒に大文字化される連字があります。例えばオランダ語の `IJ` などです。この場合、連字の両方の文字が `::first-letter` 擬似要素で選択されます。 - {{ cssxref("::before") }} 擬似要素と {{ cssxref("content") }} プロパティの組み合わせにより、要素の先頭にテキストが挿入されることがあります。この場合、 `::first-letter` は生成されたこのコンテンツの最初の文字に一致します。 -> **メモ:** CSS3 では[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)と[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を見分けやすくするために、 `::first-letter` の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された `:first-letter` も使用できます。 +> **メモ:** CSS では[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)と[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を見分けやすくするために、 `::first-letter` の表記法（二重コロン付き）が導入されました。後方互換性のため、ブラウザーは以前に導入された `:first-letter` も受け付けます。 > > オランダ語の `IJ` のような連字に対するブラウザーの対応は貧弱です。下記の互換性一覧表で、現在の対応状況を確認してください。 @@ -38,7 +35,11 @@ p::first-letter { ## 構文 -{{csssyntax}} +```css +::first-letter { + /* ... */ +} +``` ## 例 @@ -92,7 +93,7 @@ h2 + p::first-letter { #### HTML -```html +```html-nolint

    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. From dd9e0d6a4a580908c566677b64f62db58e3a3851 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 29 Oct 2023 13:13:35 +0900 Subject: [PATCH 69/91] =?UTF-8?q?2023/07/04=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/mozilla/firefox/releases/87/index.md | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/files/ja/mozilla/firefox/releases/87/index.md b/files/ja/mozilla/firefox/releases/87/index.md index 1309d16de11ffe..fe552e8203c377 100644 --- a/files/ja/mozilla/firefox/releases/87/index.md +++ b/files/ja/mozilla/firefox/releases/87/index.md @@ -1,6 +1,8 @@ --- title: Firefox 87 for developers slug: Mozilla/Firefox/Releases/87 +l10n: + sourceCommit: 7f74644d98484c67817c1dd556a6e394f5a26a6f --- {{FirefoxSidebar}} @@ -13,9 +15,9 @@ slug: Mozilla/Firefox/Releases/87 ### 開発者ツール -- 開発者がオペレーティングシステムをライトモードやダークモードに切り替えることなく、{{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} メディアクエリーのシミュレーションに [インスペクター](/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#view_media_rules_for_prefers-color-scheme) を使用できるようになりました ([Firefox バグ 1679408](https://bugzil.la/1679408) および [Firefox バグ 1692272](https://bugzil.la/1692272))。 -- [インスペクター](/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#viewing_common_pseudo-classes) を使用して、(すでにサポートしている {{cssxref(":hover")}}、{{cssxref(":active")}}、{{cssxref(":focus")}}、{{cssxref(":focus-within")}}、{{cssxref(":focus-visible")}}、{{cssxref(":visited")}} 疑似クラスに加えて) 現在選択されている要素の {{cssxref(":target")}} 疑似クラスを切り替えられるようになりました ([Firefox バグ 1689899](https://bugzil.la/1689899))。 -- Firefox 87 は、非活性の CSS 規則に関して [インスペクター](/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#rule_display) を改良および不具合修正しました: +- 開発者が[ページインスペクター](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html#view-media-rules-for-prefers-color-scheme)を使用して、オペレーティングシステムをライトモードやダークモードに切り替えることなく、 {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} メディアクエリーのシミュレーションができるようになりました ([Firefox バグ 1679408](https://bugzil.la/1679408) および [Firefox バグ 1692272](https://bugzil.la/1692272))。 +- [ページインスペクター](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html#viewing-common-pseudo-classes)を使用して、現在選択されている要素の {{cssxref(":target")}} 擬似クラスを (すでに対応している {{cssxref(":hover")}}、{{cssxref(":active")}}、{{cssxref(":focus")}}、{{cssxref(":focus-within")}}、{{cssxref(":focus-visible")}}、{{cssxref(":visited")}} 擬似クラスに加えて) 切り替えられるようになりました ([Firefox バグ 1689899](https://bugzil.la/1689899))。 +- Firefox 87 で、非活性の CSS ルールにする[ページインスペクター](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html#rule-display)の数々の改良とバグ修正を行いました。 - テーブル以外の要素について、{{cssxref("table-layout")}} プロパティを非活性としてマークするようになりました ([Firefox バグ 1551571](https://bugzil.la/1551571))。 - スクロールできない要素について、{{cssxref("scroll-padding")}} プロパティを (ショートハンドプロパティ・ロングハンドプロパティともに) 非活性としてマークするようになりました ([Firefox バグ 1551577](https://bugzil.la/1551577))。 @@ -27,12 +29,12 @@ _変更なし。_ ### CSS -- 例えばオランダ語の `IJ` など、一緒に大文字で書く二重音字を持つ言語があります。{{cssxref("::first-letter")}} 疑似要素がこれらの二重音字に配慮して、1 つの文字として扱うようになりました ([Firefox バグ 92176](https://bugzil.la/92176))。 -- {{HTMLElement("link")}} 要素が {{cssxref(":link")}}、{{cssxref(":visited")}}、{{cssxref(":any-link")}} にマッチしないようになりました。これは Firefox の動作を、Chrome の既存の動作や最近の仕様書の変更に合わせたものです ([Firefox バグ 1687538](https://bugzil.la/1687538))。 +- 例えばオランダ語の `IJ` など、一緒に大文字で書く二重音字を持つ言語があります。{{cssxref("::first-letter")}} 擬似要素がこれらの二重音字に配慮して、1 つの文字として扱うようになりました ([Firefox バグ 92176](https://bugzil.la/92176))。 +- {{HTMLElement("link")}} 要素が {{cssxref(":link")}}、{{cssxref(":visited")}}、{{cssxref(":any-link")}} に一致しないようになりました。これは Firefox の動作を、Chrome の既存の動作や最近の仕様書の変更に合わせたものです ([Firefox バグ 1687538](https://bugzil.la/1687538))。 #### 廃止 -- 以下の Firefox 固有のテーマに関連するメディア特性を、ウェブページで使用できないようにしました ([Firefox バグ 787521](https://bugzil.la/787521)): +- 以下の Firefox 固有のテーマに関連するメディア特性を、ウェブページで使用できないようにしました ([Firefox バグ 787521](https://bugzil.la/787521))。 - `-moz-mac-graphite-theme` - `-moz-mac-lion-theme` @@ -56,7 +58,7 @@ _変更なし。_ ### HTTP -- 一部の企業向け認証サービスは、TLS クライアント証明書を [CORS のプリフライトリクエストで送信する](/ja/docs/Web/HTTP/CORS#preflight_requests_and_credentials) ことを要求します。これらのサービスのユーザーは設定項目 `network.cors_preflight.allow_client_cert` で、この (仕様書に準拠しない) 動作を有効化できます ([Firefox バグ 1511151](https://bugzil.la/1511151))。 +- 一部の企業向け認証サービスは、TLS クライアント証明書を [CORS のプリフライトリクエストで送信する](/ja/docs/Web/HTTP/CORS#preflight_requests_and_credentials) ことを要求します。これらのサービスのユーザーは設定項目 `network.cors_preflight.allow_client_cert` で、この（仕様書に準拠しない）動作を有効化できます ([Firefox バグ 1511151](https://bugzil.la/1511151))。 - クロスオリジンリクエストでリファラー情報が漏洩するリスクを低減するため、デフォルトの [`Referrer-Policy`](/ja/docs/Web/HTTP/Headers/Referrer-Policy) を (`no-referrer-when-downgrade` から) [`strict-origin-when-cross-origin`](/ja/docs/Web/HTTP/Headers/Referrer-Policy#strict-origin-when-cross-origin) に変更しました ([Firefox バグ 1589074](https://bugzil.la/1589074))。 - [`Content-Length`](/ja/docs/Web/HTTP/Headers/Content-Length) を、[CORS セーフリストレスポンスヘッダー](/ja/docs/Glossary/CORS-safelisted_response_header) のリストに追加しました ([Firefox バグ 1460299](https://bugzil.la/1460299))。 @@ -80,6 +82,7 @@ _変更なし。_ ## アドオン開発者向けの変更点 - [nativeMessaging](/ja/docs/Mozilla/Add-ons/WebExtensions/Native_messaging) が [optional permission](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/optional_permissions) になりました ([Firefox バグ 1630415](https://bugzil.la/1630415))。 +- {{WebExtAPIRef("browserSettings.colorManagement")}} ([Firefox バグ 1719688](https://bugzil.la/1719688)) および ([Firefox バグ 1714428](https://bugzil.la/1714428)) によるカラーマネジメント関連の機能の問い合わせと設定のサポートを追加しました。 ## 過去のバージョン From ac444cde5cfab6fee683ef34a4f95f09e2c8ee8e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 29 Oct 2023 14:25:06 +0900 Subject: [PATCH 70/91] =?UTF-8?q?2023/04/07=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/eyedropper/eyedropper/index.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/files/ja/web/api/eyedropper/eyedropper/index.md b/files/ja/web/api/eyedropper/eyedropper/index.md index f24a2a7a9882f0..96a5492ecca3e7 100644 --- a/files/ja/web/api/eyedropper/eyedropper/index.md +++ b/files/ja/web/api/eyedropper/eyedropper/index.md @@ -1,8 +1,9 @@ --- -title: EyeDropper() +title: "EyeDropper: EyeDropper() コンストラクター" +short-title: EyeDropper() slug: Web/API/EyeDropper/EyeDropper l10n: - sourceCommit: 4e233c16c6f0d347972c5c762f5b836318a46124 + sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2 --- {{APIRef("EyeDropper API")}}{{SeeCompatTable}} @@ -17,7 +18,7 @@ new EyeDropper() ### 引数 -なし +なし。 ## 仕様書 From 86760f7f0b6768201b944fdeb62f69495eb37c84 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 29 Oct 2023 14:28:59 +0900 Subject: [PATCH 71/91] =?UTF-8?q?2023/06/29=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/eyedropper/open/index.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/files/ja/web/api/eyedropper/open/index.md b/files/ja/web/api/eyedropper/open/index.md index 1caeb08c25528c..8957b353c08459 100644 --- a/files/ja/web/api/eyedropper/open/index.md +++ b/files/ja/web/api/eyedropper/open/index.md @@ -1,5 +1,6 @@ --- -title: EyeDropper.open() +title: "EyeDropper: open() メソッド" +short-title: open() slug: Web/API/EyeDropper/open l10n: sourceCommit: 4e233c16c6f0d347972c5c762f5b836318a46124 @@ -7,7 +8,7 @@ l10n: {{APIRef("EyeDropper API")}}{{SeeCompatTable}} -**`EyeDropper.open()`** メソッドは、スポイトモードを開始し、ユーザーが色を選択するかスポイトモードをキャンセルすると解決する {{jsxref("Promise")}} を返します。 +**`EyeDropper.open()`** メソッドは、スポイトモードを開始し、ユーザーが色を選択してスポイトモードを終了したときに履行されるプロミスを返します。 ## 構文 From 35d371f4378ac238940a22a5d52fa42623d2f21a Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 29 Oct 2023 14:34:16 +0900 Subject: [PATCH 72/91] =?UTF-8?q?2023/02/22=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/eyedropper/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/api/eyedropper/index.md b/files/ja/web/api/eyedropper/index.md index 44e70f65c0b926..0d223dd30efa64 100644 --- a/files/ja/web/api/eyedropper/index.md +++ b/files/ja/web/api/eyedropper/index.md @@ -19,7 +19,7 @@ l10n: _`EyeDropper` インターフェイスは、メソッドを継承しません。_ - {{DOMxRef("EyeDropper.open()")}} {{Experimental_Inline}} - - : 選択された色へのアクセスを提供するオブジェクトで解決する {{jsxref("Promise")}} を返します。 + - : 選択された色へのアクセスを提供するオブジェクトで解決するプロミスを返します。 ## 例 From 64751c49260c57a47f40335a8d28945ad3218034 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 29 Oct 2023 15:28:15 +0900 Subject: [PATCH 73/91] =?UTF-8?q?2023/04/08=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=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 --- .../localdescription/index.md | 56 +++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 files/ja/web/api/rtcpeerconnection/localdescription/index.md diff --git a/files/ja/web/api/rtcpeerconnection/localdescription/index.md b/files/ja/web/api/rtcpeerconnection/localdescription/index.md new file mode 100644 index 00000000000000..725d300ce2ed65 --- /dev/null +++ b/files/ja/web/api/rtcpeerconnection/localdescription/index.md @@ -0,0 +1,56 @@ +--- +title: "RTCPeerConnection: localDescription プロパティ" +short-title: localDescription +slug: Web/API/RTCPeerConnection/localDescription +l10n: + sourceCommit: 954612667bafd71241a93e8554e8f11afc474ff3 +--- + +{{APIRef("WebRTC")}} + +**`RTCPeerConnection.localDescription`** は読み取り専用プロパティで、接続のローカル側のセッションを説明する {{domxref("RTCSessionDescription")}} を返します。 +まだ設定されていない場合は `null` となります。 + +## 構文 + +```js-nolint +const sessionDescription = peerConnection.localDescription +``` + +より基本的なレベルでは、 {{domxref("RTCPeerConnection.pendingLocalDescription")}} のプロパティが `null` でない場合、その値が返されます。 +それ以外の場合は、 {{domxref("RTCPeerConnection.currentLocalDescription")}} の値が返されます。 +このアルゴリズムの詳細と使用理由については、 WebRTC Connectivity ページの [Pending and current descriptions](/ja/docs/Web/API/WebRTC_API/Connectivity#pending_and_current_descriptions) を参照してください。 + +## 例 + +この例では `localDescription` を見て、{{domxref("RTCSessionDescription")}} オブジェクトの `type` と `sdp` フィールドを含むアラートを表示します。 + +```js +const pc = new RTCPeerConnection(); +// ... +const sd = pc.localDescription; +if (sd) { + alert(`Local session: type='${sd.type}'; sdp description='${sd.sdp}'`); +} else { + alert("No local session yet."); +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("RTCPeerConnection.setLocalDescription()")}}, + {{domxref("RTCPeerConnection.pendingLocalDescription")}}, + {{domxref("RTCPeerConnection.currentLocalDescription")}} +- {{domxref("RTCPeerConnection.setRemoteDescription()")}}, + {{domxref("RTCPeerConnection.remoteDescription")}}, + {{domxref("RTCPeerConnection.pendingRemoteDescription")}}, + {{domxref("RTCPeerConnection.currentRemoteDescription")}} +- [WebRTC](/ja/docs/Web/API/WebRTC_API) From 2aec83ee239b36dd120afe0d5f8ed5e1695a6ee6 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 29 Oct 2023 16:13:46 +0900 Subject: [PATCH 74/91] =?UTF-8?q?2023/07/25=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=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/xsltprocessor/basic_example/index.md | 49 ++++++++++++------- 1 file changed, 32 insertions(+), 17 deletions(-) diff --git a/files/ja/web/api/xsltprocessor/basic_example/index.md b/files/ja/web/api/xsltprocessor/basic_example/index.md index 10c035eddadcda..3c6db1f935ffb6 100644 --- a/files/ja/web/api/xsltprocessor/basic_example/index.md +++ b/files/ja/web/api/xsltprocessor/basic_example/index.md @@ -1,19 +1,16 @@ --- title: XSLT の基本的な例 slug: Web/API/XSLTProcessor/Basic_Example +l10n: + sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8 --- -## 基本的な例 +{{APIRef("XSLT")}} -最初の例は、ブラウザーで XSLT 変換の設定の基本を実演します。 この例は、人が読むことのできる書式で書かれた記事についての情報 (タイトル、著者の一覧、本文) を含む XML 文書を取得します。 +この最初の例では、ブラウザーで XSLT 変換を設定する基本を示します。 +この例では、記事に関する情報（タイトル、著者の一覧、本文）を含む XML 文書を取り込み、それを人間が読める形式で表示します。 -図 1 は基本的な XSLT の例のソースです。 XML 文書 (example.xml) は記事についての情報を含んでいます。 `?xml-stylesheet?` で処理を指示すると、その href 属性を通して XSLT スタイルシートへリンクします。 - -XSLT スタイルシートは、最終的な出力を生成するためのすべてのテンプレートを含む、`xsl:stylesheet` 要素で開始します。図 1 の例には二つのテンプレートがあります。一つはルートノードに対応し、一つは Author ノードに対応します。ルートノードが出力する記事のタイトルにテンプレートが一致すると、(`apply-templates` を通して) Authors ノードの子の、すべての Author ノードに対応するテンプレートが処理されます。 - -図 1 : 簡単な XSLT の例 - -XML 文書 (example.xml) : +XML 文書 (**example.xml**) は次の通りです。 ```xml @@ -28,7 +25,9 @@ XML 文書 (example.xml) :

``` -XSL スタイルシート (example.xsl) : +この XML ファイルの `?xml-stylesheet` 処理命令により、その `href` 属性で適用する XSLT スタイルシートを指定します。 + +XSL スタイルシートファイル (**example.xsl**) は次の通りです。 ```xml @@ -48,11 +47,27 @@ XSL スタイルシート (example.xsl) : ``` -ブラウザーの出力: +XSLT スタイルシートは、最終的な出力を生成するためのすべてのテンプレートを含む、`xsl:stylesheet` 要素で始まります。 +この例には 2 つのテンプレートがあります。一つはルートノードに対応し、一つは Author ノードに対応します。 +ルートノードが出力する記事のタイトルにテンプレートが一致すると、（`apply-templates` を通して） Authors ノードの子の、すべての Author ノードに対応するテンプレートが処理されます。 -``` -Article - My Article -Authors: -- Mr. Foo -- Mr. Bar -``` +例を試してみましょう。 + +1. ファイルシステム上にディレクトリーを作成し、その中に上記の `example.xml` と `example.xsl` を作成します。 +2. ファイルのあるディレクトリーで[ローカルサーバーを起動](/ja/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server#running_a_simple_local_http_server)します。 + これにより、あたかもインターネット上でホスティングされているかのように、ディレクトリー内のファイルを閲覧することができます。 + + > **警告:** ファイルシステムからスタイルシートを読み込むことは[オリジン間リクエスト](/ja/docs/Web/HTTP/CORS)であり、既定で許可されないためです。 + > XML とスタイルシートを同じローカルサーバーでホスティングすることで、同一のオリジンになることが保証されます。 + +3. ブラウザーから **example.xml** を開きます。 +4. ブラウザーの出力は次のようになります。 + + ```plain + Browser Output : + + Article - My Article + Authors: + - Mr. Foo + - Mr. Bar + ``` From 77bc71aa0861e84efc6a43e4ec7d1ec391cfdfe8 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 2 Nov 2023 08:40:48 +0900 Subject: [PATCH 75/91] =?UTF-8?q?2023/07/25=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F=20(#1675?= =?UTF-8?q?1)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2023/07/25 時点の英語版に同期 * Update files/ja/web/http/basics_of_http/mime_types/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/ja/web/http/basics_of_http/mime_types/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../http/basics_of_http/mime_types/index.md | 100 +++++++++++------- 1 file changed, 60 insertions(+), 40 deletions(-) diff --git a/files/ja/web/http/basics_of_http/mime_types/index.md b/files/ja/web/http/basics_of_http/mime_types/index.md index cb05d9a20fe230..47fefe0f2fb7e3 100644 --- a/files/ja/web/http/basics_of_http/mime_types/index.md +++ b/files/ja/web/http/basics_of_http/mime_types/index.md @@ -1,22 +1,25 @@ --- -title: MIME タイプ (IANA メディアタイプ) +title: MIME タイプ（IANA メディア種別） slug: Web/HTTP/Basics_of_HTTP/MIME_types +l10n: + sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8 --- {{HTTPSidebar}} -**メディアタイプ** (別名 **Multipurpose Internet Mail Extensions または MIME タイプ**) は、文書、ファイル、またはバイト列の性質や形式を示します。 +**メディア種別** (別名 **Multipurpose Internet Mail Extensions または MIME タイプ**) は、文書、ファイル、またはバイト列の性質や形式を示します。 MIME タイプは IETF の {{RFC(6838)}} で定義され、標準化されています。 -[Internet Assigned Numbers Authority (IANA)](https://www.iana.org/) はすべての公式の MIME タイプを管理しており、[Media Types](https://www.iana.org/assignments/media-types/media-types.xhtml) ページで最新の完全なリストを見つけることができます。 +[Internet Assigned Numbers Authority (IANA)](https://www.iana.org/) はすべての公式の MIME タイプを管理しており、[Media Types](https://www.iana.org/assignments/media-types/media-types.xhtml) ページで最新の完全な一覧を見ることができます。 -> **警告:** ブラウザーは URL を処理する方法を決定するために、_ファイル拡張子ではなく_ MIME タイプを使用しますので、ウェブサーバーは正しい MIME タイプをレスポンスの {{HTTPHeader("Content-Type")}} ヘッダーで送信することが重要です。これが正しく構成されていないと、ブラウザーはファイルの中身を誤って解釈し、サイトが正しく動作しなかったり、ダウンロードファイルが誤って扱われたりすることがあります。 +> **警告:** ブラウザーは URL を処理する方法を決定するために、_ファイル拡張子ではなく_ MIME タイプを使用しますので、ウェブサーバーは正しい MIME タイプをレスポンスの {{HTTPHeader("Content-Type")}} ヘッダーで送信することが重要です。 +> これが正しく構成されていないと、ブラウザーはファイルの中身を誤って解釈し、サイトが正しく動作しなかったり、ダウンロードファイルが誤って扱われたりすることがあります。 ## MIME タイプの構造 -MIME タイプは*タイプ*と*サブタイプ*と、その間をスラッシュ (`/`) で区切ったもので構成されます。間にホワイトスペースは入りません。 +MIME タイプふつう、*タイプ*と*サブタイプ*と、その間をスラッシュ (`/`) で区切ったもので構成されます。間にホワイトスペースは入りません。 -``` +```plain タイプ/サブタイプ ``` @@ -29,17 +32,22 @@ MIME タイプは*タイプ*と*サブタイプ*と、その間をスラッシ 任意で**引数**を追加して、追加の詳細情報を提供することができます。 -``` +```plain タイプ/サブタイプ;引数=値 ``` -例えば、 MIME タイプのうちメインタイプが `text` であるものでは、任意で `charset` 引数を使用して、データ内の文字の文字コードを指定することができます。 `charset` が指定されない場合は、既定では {{Glossary("ASCII")}} (`US-ASCII`) が、{{Glossary("user agent", "ユーザーエージェント")}}の設定で上書きされない限り使われます。 UTF-8 のテキストファイルを指定するには、 MIME タイプとして `text/plain;charset=UTF-8` が使用されます。 +例えば、 MIME タイプのうちメインタイプが `text` であるものでは、任意で `charset` 引数を使用して、データ内の文字の文字コードを指定することができます。 +`charset` が指定されなかった場合は、既定では {{Glossary("ASCII")}} (`US-ASCII`) が、{{Glossary("user agent", "ユーザーエージェント")}}の設定で上書きされない限り使われます。 +UTF-8 のテキストファイルを指定するには、 MIME タイプとして `text/plain;charset=UTF-8` が使用されます。 MIME タイプは大文字と小文字を区別しませんが、伝統的に小文字で記述されます。引数の値は大文字と小文字を区別することができます。 ### タイプ -タイプには **個別タイプ** (discrete) **マルチパートタイプ** (multipart) の 2 種類があります。個別タイプは単一のファイルまたはメディアを表すタイプで、単一のテキストファイルや音楽ファイル、単一の映像などです。マルチパートタイプは複数のコンポーネント部品によって構成される文書を表すもので、それぞれの部分が固有の MIME タイプを持ちます。また、マルチパートタイプは一度のトランザクションで一緒に送信される複数のファイルをまとめることもできます。例えば、マルチパート MIME タイプは複数のファイルを電子メールに添付するときに使用されます。 +タイプには **個別タイプ** (discrete) **マルチパートタイプ** (multipart) の 2 種類があります。 +個別タイプは単一のファイルまたはメディアを表すタイプで、単一のテキストファイルや音楽ファイル、単一の映像などです。 +マルチパートタイプは複数のコンポーネント部品によって構成される文書を表すもので、それぞれの部分が固有の MIME タイプを持ちます。また、マルチパートタイプは一度のトランザクションで一緒に送信される複数のファイルをまとめることもできます。 +例えば、マルチパート MIME タイプは複数のファイルを電子メールに添付するときに使用されます。 #### 個別タイプ @@ -47,11 +55,12 @@ MIME タイプは大文字と小文字を区別しませんが、伝統的に小 - `application` - : 他のタイプに明確に当てはまらない、あらゆる種類のバイナリーデータです。 - 何らかの方法で実行されたり解釈されたりするデータ、または利用するのに特定のアプリケーションや特定の種類のアプリケーションを必要とするバイナリーデータのどちらかです。汎用的なバイナリーデータ（または本当のタイプが不明なバイナリーデータ）は `application/octet-stream` です。他のよくある例として、 `application/pdf`, `application/pkcs8`, `application/zip` があります。 - [(IANA での登録)](https://www.iana.org/assignments/media-types/media-types.xhtml#application) + 何らかの方法で実行されたり解釈されたりするデータ、または利用するのに特定のアプリケーションや特定の種類のアプリケーションを必要とするバイナリーデータのどちらかです。 + 汎用的なバイナリーデータ（または本当のタイプが不明なバイナリーデータ）は `application/octet-stream` です。他のよくある例として、 `application/pdf`, `application/pkcs8`, `application/zip` があります。 + [（IANA での application 型の登録を見る）](https://www.iana.org/assignments/media-types/media-types.xhtml#application) - `audio` - : 音声または音楽データです。例えば、 `audio/mpeg`, `audio/vorbis` などがあります。 - [(IANA での登録)](https://www.iana.org/assignments/media-types/media-types.xhtml#audio) + [（IANA での audio 型の登録を見る）](https://www.iana.org/assignments/media-types/media-types.xhtml#audio) - `example` - : MIME タイプの使用方法を例示する際のプレイスホルダーとして使用するために予約されています。 これらはサンプルコードのリストや文書の外で使用してはいけません。 @@ -59,38 +68,43 @@ MIME タイプは大文字と小文字を区別しませんが、伝統的に小 例えば、ウェブ上で音声として動作する例として、 MIME タイプの `audio/example` を使用してタイプがプレイスホルダーであり、実世界で使用されるコードでは適切なもので置き換えられることを表します。 - `font` - : フォントやタイプフェイスのデータです。よく使われるものとしては `font/woff`, `font/ttf`, `font/otf` などがあります。 - [(IANA での登録)](https://www.iana.org/assignments/media-types/media-types.xhtml#font) + [（IANA での font 型の登録を見る）](https://www.iana.org/assignments/media-types/media-types.xhtml#font) - `image` - - : 画像またはグラフィックデータで、ビットマップとベクター静止画像の両方を含み、さらに静止画像形式のアニメーション版であるアニメーション {{Glossary("GIF")}} や APNG なども含みます。よく使われるものとしては、 `image/jpeg`, `image/png`, `image/svg+xml` などがあります。 - [(IANA での登録)](https://www.iana.org/assignments/media-types/media-types.xhtml#image) + - : 画像またはグラフィックデータで、ビットマップとベクター静止画像の両方を含み、さらに静止画像形式のアニメーション版であるアニメーション {{Glossary("GIF")}} や APNG なども含みます。 + よく使われるものとしては、 `image/jpeg`, `image/png`, `image/svg+xml` などがあります。 + [（IANA での image 型の登録を見る）](https://www.iana.org/assignments/media-types/media-types.xhtml#image) - `model` - - : 三次元のオブジェクトやシーンなどのモデルデータです。例えば、 `model/3mf` や `model/vml` などがあります。 - [(IANA での登録)](https://www.iana.org/assignments/media-types/media-types.xhtml#model) + - : 三次元のオブジェクトやシーンなどのモデルデータです。例えば、 `model/3mf` や `model/vrml` などがあります。 + [（IANA での model 型の登録を見る）](https://www.iana.org/assignments/media-types/media-types.xhtml#model) - `text` - - : テキストのみのデータで、人間が読むことができるあらゆるコンテンツ、ソースコード、コンマ区切り値 (CSV) 形式のデータのようなテキストデータを含みます。例えば、 `text/plain`, `text/csv`, `text/html` などがあります。 - [(IANA での登録)](https://www.iana.org/assignments/media-types/media-types.xhtml#text) + - : テキストのみのデータで、人間が読むことができるあらゆるコンテンツ、ソースコード、コンマ区切り値 (CSV) 形式のデータのようなテキストデータを含みます。 + 例えば、 `text/plain`, `text/csv`, `text/html` などがあります。 + [（IANA での text 型の登録を見る）](https://www.iana.org/assignments/media-types/media-types.xhtml#text) - `video` - : 動画のデータまたはファイルで、 MP4 movies (`video/mp4`) などがあります。 - [(IANA での登録)](https://www.iana.org/assignments/media-types/media-types.xhtml#video) + [（IANA での video 型の登録を見る）](https://www.iana.org/assignments/media-types/media-types.xhtml#video) -特定のサブタイプを持たないテキスト形式の文書には、 `text/plain` を使用してください。同様に、特定のサブタイプまたは既知のサブタイプを持たないバイナリー形式の文書には、 `application/octet-stream` を使用してください。 +特定のサブタイプを持たないテキスト形式の文書には、 `text/plain` を使用してください。 +同様に、特定のサブタイプまたは既知のサブタイプを持たないバイナリー形式の文書には、 `application/octet-stream` を使用してください。 #### マルチパートタイプ -**マルチパート**タイプは、ふつうそれぞれ異なる MIME タイプを持つ複数の部品に分割される文書のカテゴリーを示します。これらは、特に電子メールにおいて、同じトランザクションの一部である複数の別々のファイルを表すためにも使用されます。これらは**複合文書**を表します。 +**マルチパート**タイプは、ふつうそれぞれ異なる MIME タイプを持つ複数の部品に分割される文書のカテゴリーを示します。 +これらは、特に電子メールにおいて、同じトランザクションの一部である複数の別々のファイルを表すためにも使用されます。これらは**複合文書**を表します。 -HTTP は `multipart/form-data` が [HTML フォーム](/ja/docs/Learn/Forms)の {{HTTPMethod("POST")}} メソッドで使用されたり、 `multipart/byteranges` が文書の一部を送信するために {{HTTPStatus("206")}} `Partial Content` で使用されたりする例外を除いて、 HTTP はマルチパート文書を特定の方法で扱いません。メッセージは（おそらく文書をインラインで表示する方法がわからず、「名前を付けて保存」をすることを提案されるでしょうが）ブラウザーへ送信されます。 +HTTP は `multipart/form-data` が [HTML フォーム](/ja/docs/Learn/Forms)の {{HTTPMethod("POST")}} メソッドで使用されたり、 `multipart/byteranges` が文書の一部を送信するために {{HTTPStatus("206")}} `Partial Content` で使用されたりする例外を除いて、 HTTP はマルチパート文書を特別な方法で扱いません。 +メッセージは（おそらく文書をインラインで表示する方法がわからず、「名前を付けて保存」をすることを提案されるでしょうが）ブラウザーへ送信されます。 マルチパートタイプは 2 種類があります。 - `message` - : 他のメッセージをカプセル化したメッセージ。例えば、転送されたメッセージをデータの一部として含む電子メールを表現したり、非常に大きなメッセージを複数のメッセージであるかのように塊で送信できるようにしたりするために使用されます。 例としては `message/rfc822` （転送されたメッセージや返信されたメッセージの引用）や `message/partial` （大きなメッセージを自動的に小さなメッセージに分割し、受信者が再び組み立てることを可能にします）があります。 - [(IANA での登録)](https://www.iana.org/assignments/media-types/media-types.xhtml#message) + [（IANA での message 型の登録を見る）](https://www.iana.org/assignments/media-types/media-types.xhtml#message) - `multipart` - : 個別に異なる MIME タイプを持つ可能性のある複数のコンポーネントから構成されるデータ。 例としては、 `multipart/form-data` （{{domxref("FormData")}} API を使用して生成されたデータ用）や `multipart/byteranges` （{{RFC(7233, "", "5.4.1")}} で定義されており、 {{Glossary("HTTP")}} の {{HTTPStatus(206)}} と共に使用される）が含まれます。"Partial Content" レスポンスは、{{HTTPHeader("Range")}} ヘッダーを使用して配信されるような、取得したデータがコンテンツの一部分のみである場合に返されます。 - [(IANA での登録)](https://www.iana.org/assignments/media-types/media-types.xhtml#multipart) + [（IANA での multipart 型の登録を見る）](https://www.iana.org/assignments/media-types/media-types.xhtml#multipart) ## ウェブ開発者向けの重要な MIME タイプ @@ -116,14 +130,14 @@ HTTP は `multipart/form-data` が [HTML フォーム](/ja/docs/Learn/Forms)の ### text/javascript -[IANA メディアタイプレジストリー](https://www.iana.org/assignments/media-types/media-types.xhtml#text)、[RFC 9239](https://www.rfc-editor.org/rfc/rfc9239.html)、 [HTML 仕様書](https://html.spec.whatwg.org/multipage/scripting.html#scriptingLanguages:text/javascript)によれば、 JavaScript コンテンツは MIME タイプとして常に `text/javascript` を使用することになっています。他の MIME タイプは JavaScript において妥当であると見なされず、 `text/javascript` 以外の MIME タイプを使用すると、スクリプトが読み込まれなかったり、実行されなかったりする結果になる可能性があります。 +[IANA メディア種別レジストリー](https://www.iana.org/assignments/media-types/media-types.xhtml#text)、[RFC 9239](https://www.rfc-editor.org/rfc/rfc9239.html)、 [HTML 仕様書](https://html.spec.whatwg.org/multipage/scripting.html#scriptingLanguages:text/javascript)によれば、 JavaScript コンテンツは MIME タイプとして常に `text/javascript` を使用することになっています。他の MIME タイプは JavaScript において妥当であると見なされず、 `text/javascript` 以外の MIME タイプを使用すると、スクリプトが読み込まれなかったり、実行されなかったりする結果になる可能性があります。 JavaScript のコンテンツの中には、 `charset` 引数を MIME タイプの一部として使用し、スクリプトコンテンツの文字セットを設定しようとしている不適切なものを見かけることがあります。 この `charset` パラメータは JavaScript のコンテンツには有効ではなく、ほとんどの場合スクリプトを読み込むのに失敗します。 #### JavaScript の歴史的な MIME タイプ -`text/javascript` MIME タイプに加えて、歴史的な理由で、 [MIME スニッフィング標準](https://mimesniff.spec.whatwg.org/) (ブラウザーがメディアタイプをどのように解釈し、有効なタイプを持たないコンテンツをどう処理するかを定義する方法の定義) は、 JavaScript を以下のいずれかと基本的に一致する MIME タイプを使用して提供することを許可しています。 +`text/javascript` MIME タイプに加えて、歴史的な理由で、 [MIME スニッフィング標準](https://mimesniff.spec.whatwg.org/) (ブラウザーがメディア種別をどのように解釈し、有効なタイプを持たないコンテンツをどう処理するかを定義する方法の定義) は、 JavaScript を以下のいずれかと基本的に一致する MIME タイプを使用して提供することを許可しています。 - `application/javascript` {{deprecated_inline}} - `application/ecmascript` {{deprecated_inline}} @@ -175,7 +189,7 @@ MIME タイプが `image` であるファイルは、画像データを含んで ウェブコンテンツに使用されるMIMEタイプのうち、最も一般的なものを以下に一覧で示します。 ただし、これは利用可能なすべてのタイプの完全なリストではありません。 -これについては[メディアコンテナー形式](/ja/docs/Web/Media/Formats/Containers)のガイドを参照してください。 +これについては[メディアコンテナー形式のガイド](/ja/docs/Web/Media/Formats/Containers)を参照してください。 | MIME タイプ | 音声または動画のタイプ | | ------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | @@ -190,11 +204,12 @@ MIME タイプが `image` であるファイルは、画像データを含んで `multipart/form-data` タイプは、入力済みの [HTML フォーム](/ja/docs/Learn/Forms) の内容をブラウザーからサーバーに送信するときに使用することができます。 -これはマルチパート文書形式として複数の部分から成り、境界 (二重ダッシュ `--` で始まる文字列) によって区切られます。それぞれの部分は固有のエンティティであり、固有の HTTP ヘッダーとして {{HTTPHeader("Content-Disposition")}} やファイルアップロードのフィールドには {{HTTPHeader("Content-Type")}} を持ちます。 +これはマルチパート文書形式として複数の部分から成り、境界（二重ダッシュ `--` で始まる文字列）によって区切られます。 +それぞれの部分は固有のエンティティであり、固有の HTTP ヘッダーとして {{HTTPHeader("Content-Disposition")}} やファイルアップロードのフィールドには {{HTTPHeader("Content-Type")}} を持ちます。 -``` +```http Content-Type: multipart/form-data; boundary=aBoundaryString -(マルチパート文書全体に関連付けられる、他のヘッダー) +（マルチパート文書全体に関連付けられる、他のヘッダー） --aBoundaryString Content-Disposition: form-data; name="myFile"; filename="img.jpg" @@ -219,16 +234,16 @@ Content-Disposition: form-data; name="myField" enctype="multipart/form-data"> - + ``` これは以下のメッセージを送信します。 -``` +```http POST / HTTP/1.1 Host: localhost:8000 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0 @@ -262,7 +277,7 @@ Simple file. {{HTTPStatus("206", "206 Partial Content")}} ステータスコードを送信するとき、この MIME タイプは文書がいくつかの部分で構成されていることを示しており、それぞれのリクエストされた範囲のひとつになります。ほかのマルチパートタイプと同様に、 {{HTTPHeader("Content-Type")}} で `boundary` を使用してそれぞれの部分を区切ります。それぞれの部分は実際のタイプを表す {{HTTPHeader("Content-Type")}} ヘッダーと、表現している範囲を表す {{HTTPHeader("Content-Range")}} ヘッダーを持ちます。 -``` +```http HTTP/1.1 206 Partial Content Accept-Ranges: bytes Content-Type: multipart/byteranges; boundary=3d6b6a416f9b5 @@ -304,17 +319,22 @@ Content-Range: bytes 300-400/1270 MIME タイプが欠落している、あるいは MIME タイプが誤って設定されているとクライアントが考えている場合に、ブラウザーは MIME スニッフィングを行います。これは、リソースを確認して正しい MIME タイプを推測します。 -MIME スニッフィングはブラウザーによって異なる方法で、異なる状況下で行います。 (例えば、 Safari は受信した MIME タイプが合わない場合は、 URL のファイルの拡張子を見ます。) 実行可能なコンテンツを表す MIME タイプの一部には、セキュリティ上の懸念があります。サーバーは {{HTTPHeader("X-Content-Type-Options")}} を送信することで、MIME スニッフィングを抑制できます。 +MIME スニッフィングはブラウザーによって様々な方法で、様々な状況下で行われます。 +（例えば、 Safari は受信した MIME タイプが合わない場合は、 URL のファイルの拡張子を見ます。） +実行可能なコンテンツを表す一部の MIME タイプには、セキュリティ上の懸念があります。 +サーバーは {{HTTPHeader("X-Content-Type-Options")}} を送信することで、MIME スニッフィングを抑制できます。 ## 文書の種類を伝える他の方法 MIME タイプは、文書の種類の情報を伝える唯一の方法ではありません。 -- 特に Microsoft Windows では、ファイル名の拡張子を使用することがあります。拡張子に意味があるとは考えないオペレーティングシステムもありますし (Linux や Mac OS など)、正しいという保証はありません。 -- マジックナンバー。バイト構造を見ることで、様々な形式の構文によりファイルタイプを推測することができます。例えば GIF ファイルは16進数の値 `47 49 46 38 39` (`GIF89`)、 PNG ファイルは `89 50 4E 47` (`.PNG`) で始まります。マジックナンバーを持たない種類のファイルもありますので、100%信頼できるシステムではありません。 +- 特に Microsoft Windows では、ファイル名の拡張子を使用することがあります。 + 拡張子に意味があるとは考えないオペレーティングシステムもありますし（Linux や Mac OS など）、正しいという保証はありません。 +- マジックナンバー。ファイルのバイト構造を見ることで、様々な形式の構文によりファイルタイプを推測することができます。 + 例えば GIF ファイルは16進数の値 `47 49 46 38 39` (`GIF89`)、 PNG ファイルは `89 50 4E 47` (`.PNG`) で始まります。マジックナンバーを持たない種類のファイルもありますので、 100% 信頼できるシステムではありません。 ## 関連情報 - [ウェブメディア技術](/ja/docs/Web/Media) - [ウェブ上で使用されるメディア形式のガイド](/ja/docs/Web/Media/Formats) -- [サーバーの MIME タイプの正しい構成](/ja/docs/Learn/Server-side/Configuring_server_MIME_types) +- [サーバーの MIME タイプを正しく構成する](/ja/docs/Learn/Server-side/Configuring_server_MIME_types) From b1f0b67b516d338038e6f256710b75745a70afc3 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 2 Nov 2023 08:41:22 +0900 Subject: [PATCH 76/91] =?UTF-8?q?2023/04/26=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3=20(#16753)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 2023/04/26 時点の英語版に基づき新規翻訳 記述ミスを修正 --- .../elementinternals/checkvalidity/index.md | 52 ++++++ .../ja/web/api/elementinternals/form/index.md | 53 ++++++ files/ja/web/api/elementinternals/index.md | 169 ++++++++++++++++++ .../web/api/elementinternals/labels/index.md | 40 +++++ .../elementinternals/reportvalidity/index.md | 56 ++++++ .../elementinternals/setformvalue/index.md | 56 ++++++ .../api/elementinternals/setvalidity/index.md | 88 +++++++++ 7 files changed, 514 insertions(+) create mode 100644 files/ja/web/api/elementinternals/checkvalidity/index.md create mode 100644 files/ja/web/api/elementinternals/form/index.md create mode 100644 files/ja/web/api/elementinternals/index.md create mode 100644 files/ja/web/api/elementinternals/labels/index.md create mode 100644 files/ja/web/api/elementinternals/reportvalidity/index.md create mode 100644 files/ja/web/api/elementinternals/setformvalue/index.md create mode 100644 files/ja/web/api/elementinternals/setvalidity/index.md diff --git a/files/ja/web/api/elementinternals/checkvalidity/index.md b/files/ja/web/api/elementinternals/checkvalidity/index.md new file mode 100644 index 00000000000000..1c36f8b893f51a --- /dev/null +++ b/files/ja/web/api/elementinternals/checkvalidity/index.md @@ -0,0 +1,52 @@ +--- +title: "ElementInternals: checkValidity() メソッド" +short-title: checkValidity() +slug: Web/API/ElementInternals/checkValidity +l10n: + sourceCommit: 86215eff9beccf2e069be9109347ad830cc5e9c4 +--- + +{{APIRef("DOM")}} + +**`checkValidity()`** は {{domxref("ElementInternals")}} インタフェイスのメソッドで、要素が適用された[制約検証](/ja/docs/Web/HTML/Constraint_validation)のルールを満たしているかどうかをチェックします。 + +もし `checkValidity` が `false` を返したら、キャンセル可能な [invalid イベント](/ja/docs/Web/API/HTMLInputElement/invalid_event)が要素で発生します。 + +## 構文 + +```js-nolint +checkValidity() +``` + +### 引数 + +なし。 + +### 返値 + +論理値で、要素がすべての検証される制約に合格していれば `true` を返します。 + +### 例外 + +- `NotSupportedError` {{domxref("DOMException")}} + - : 要素の `formAssociated` プロパティが `true` に設定されていない場合に発生します。 + +## 例 + +以下の例では、 {{domxref("ElementInternals.setValidity()")}} を使用して、要素が検証ルールを満たしていないことを示します。 `checkValidity()` を呼び出すと `false` が返されます。再度 `setValidity` を呼び出し、今度はすべてのルールが false になっていることを示すと、`checkValidity()` は `true` を返します。 + +```js +let element = document.getElementById("join-checkbox"); +element.internals_.setValidity({ valueMissing: true }, "メッセージ"); +console.log(element.internals_.checkValidity()); // false +element.internals_.setValidity({}); +console.log(element.internals_.checkValidity()); // true +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/elementinternals/form/index.md b/files/ja/web/api/elementinternals/form/index.md new file mode 100644 index 00000000000000..e48443c41936e7 --- /dev/null +++ b/files/ja/web/api/elementinternals/form/index.md @@ -0,0 +1,53 @@ +--- +title: "ElementInternals: form プロパティ" +short-title: form +slug: Web/API/ElementInternals/form +l10n: + sourceCommit: 86215eff9beccf2e069be9109347ad830cc5e9c4 +--- + +{{APIRef("DOM")}} + +**`form`** は {{domxref("ElementInternals")}} インターフェイスの読み取り専用プロパティで、この要素に関連付けられた {{domxref("HTMLFormElement")}} を返します。 + +## 値 + +{{domxref("HTMLFormElement")}} です。 + +## 例 + +次の例では、 ID が `myForm` のフォーム内にカスタムチェックボックスコンポーネントを配置しています。 +コンソールに `form.length` を出力すると、 {{domxref("HTMLFormElement.length")}} という値が得られます。 + +```html +
+ + Join newsletter +
+``` + +```js +class CustomCheckbox extends HTMLElement { + static formAssociated = true; + #internals; + + constructor() { + super(); + this.#internals = this.attachInternals(); + } + + connectedCallback() { + console.log(this.#internals.form.length); + } +} + +window.customElements.define("custom-checkbox", CustomCheckbox); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/elementinternals/index.md b/files/ja/web/api/elementinternals/index.md new file mode 100644 index 00000000000000..ea98666795e736 --- /dev/null +++ b/files/ja/web/api/elementinternals/index.md @@ -0,0 +1,169 @@ +--- +title: ElementInternals +slug: Web/API/ElementInternals +l10n: + sourceCommit: 835d6632d59993861a0458510402787f8a2c3cb3 +--- + +{{APIRef("DOM")}} + +**`ElementInternals`** は [Document Object Model](/ja/docs/Web/API/Document_Object_Model) のインターフェイスで、カスタム要素を HTML フォームに完全に参加させる方法をウェブ開発者に提供します。標準的な HTML フォーム要素を扱うのと同じように、これらの要素を扱うためのユーティリティを提供し、 [Accessibility Object Model](https://wicg.github.io/aom/explainer.html) も要素で使えるようにします。 + +## コンストラクター + +このインターフェイスにはコンストラクターがありません。 `ElementInternals` オブジェクトは {{domxref("HTMLElement.attachInternals()")}} を呼び出したときに返されます。 + +## インスタンスプロパティ + +- {{domxref("ElementInternals.shadowRoot")}} {{ReadOnlyInline}} + - : この要素に関連付けられた {{domxref("ShadowRoot")}} オブジェクトを返します。 +- {{domxref("ElementInternals.form")}} {{ReadOnlyInline}} + - : この要素に関連付けられた {{domxref("HTMLFormElement")}} を返します。 +- {{domxref("ElementInternals.states")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : この要素に関連付けられた {{domxref("CustomStateSet")}} を返します。 +- {{domxref("ElementInternals.willValidate")}} {{ReadOnlyInline}} + - : 論理値で、要素が[制約検証](/ja/docs/Web/HTML/Constraint_validation)の候補である送信可能要素である場合に true を返します。 +- {{domxref("ElementInternals.validity")}} {{ReadOnlyInline}} + - : このオブジェクトは、制約検証に関して、その要素が取りうるさまざまな有効性の状態を表します。 +- {{domxref("ElementInternals.validationMessage")}} {{ReadOnlyInline}} + - : 文字列で、この要素の検証メッセージが入ります。 +- {{domxref("ElementInternals.labels")}} {{ReadOnlyInline}} + - : この要素に関連付けられているすべてのラベル要素の {{domxref("NodeList")}} を返します。 + +### ARIA から取り込まれたインスタンスプロパティ + +`ElementInternals` インターフェイスには以下のプロパティがあり、`ARIAMixin` ミックスインで定義されています。 + +> **メモ:** これらは、カスタム要素に既定のアクセシビリティ上の意味を定義できるようにするために取り込まれています。これらは作者が定義した属性によって上書きされる可能性がありますが、作者が属性を削除したり追加しなかったりした場合でも、既定の意味が保持されるようにします。詳しくは、 [Accessibility Object Model explainer](https://wicg.github.io/aom/explainer.html#default-semantics-for-custom-elements-via-the-elementinternals-object) を参照してください。 + +- {{domxref("ElementInternals.ariaAtomic")}} + - : [`aria-atomic`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-atomic) 属性を反映した文字列で、[`aria-relevant`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-relevant)属性で定義された変更通知に基づいて、支援技術が変更された領域のすべてを提示するか、一部のみを提示するかを示します。 +- {{domxref("ElementInternals.ariaAutoComplete")}} + - : [`aria-autocomplete`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-autocomplete) 属性を反映した文字列で、テキスト入力が、コンボボックス、検索ボックス、またはテキストボックスに対するユーザーの意図する値の 1 つまたは複数の予測を表示するトリガーとなり得るかどうかを示し、予測が行われた場合にどのように表示されるかを指定します。 +- {{domxref("ElementInternals.ariaBusy")}} + - : [`aria-busy`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-busy) 属性を反映した文字列で、要素が変更されているかどうかを示すもので、支援技術はユーザーに公開する前に変更が完了するまで待ちたい場合があります。 +- {{domxref("ElementInternals.ariaChecked")}} + - : [`aria-checked`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-checked) 属性を反映した文字列で、チェックボックス、ラジオボタン、その他のチェック状態を持つウィジェットの現在の「チェックされた」状態を示します。 +- {{domxref("ElementInternals.ariaColCount")}} + - : [`aria-colcount`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-colcount) 属性を反映した文字列で、テーブル、グリッド、ツリーグリッドの列数を定義します。 +- {{domxref("ElementInternals.ariaColIndex")}} + - : [`aria-colindex`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-colindex) 属性を反映した文字列で、テーブル、グリッド、ツリーグリッド内の列の総数に対する要素の列インデックスまたは位置を定義します。 +- {{domxref("ElementInternals.ariaColSpan")}} + - : [`aria-colspan`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-colspan) 属性を反映した文字列で、テーブル、グリッド、ツリーグリッド内のセルやグリッドセルにまたがる列の数を定義します。 +- {{domxref("ElementInternals.ariaCurrent")}} + - : [`aria-current`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-current) 属性を反映した文字列で、コンテナーや関連する要素の集合の中で、現在のアイテムを表す要素を表します。 +- {{domxref("ElementInternals.ariaDescription")}} + - : [`aria-description`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-description) 属性を反映した文字列で、現在の ElementInternals を説明または注釈する文字列値を定義します。 +- {{domxref("ElementInternals.ariaDisabled")}} + - : [`aria-disabled`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) 属性を反映した文字列で、その要素が知覚可能であるが無効であり、編集やその他の操作ができないことを示します。 +- {{domxref("ElementInternals.ariaExpanded")}} + - : [`aria-expanded`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) 属性を反映した文字列で、この要素が所有または制御するグループ化要素が展開されているか、折りたたまれているかを示します。 +- {{domxref("ElementInternals.ariaHasPopup")}} + - : [`aria-haspopup`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup) 属性を反映した文字列で、 ElementInternals によって起動される、メニューやダイアログのような操作可能なポップアップ要素の有無と種類を示します。 +- {{domxref("ElementInternals.ariaHidden")}} + - : [`aria-hidden`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-hidden) 属性を反映した文字列で、その要素がアクセシビリティ API に公開されているかどうかを示します。 +- {{domxref("ElementInternals.ariaKeyShortcuts")}} + - : [`aria-keyshortcuts`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-keyshortcuts) 属性を反映した文字列で、作者が ElementInternals をアクティブにしたりフォーカスを与えたりするために実装したキーボードショートカットを示します。 +- {{domxref("ElementInternals.ariaLabel")}} + - : [`aria-label`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-label) 属性を反映した文字列で、現在の ElementInternals にラベルを付ける文字列値を定義します。 +- {{domxref("ElementInternals.ariaLevel")}} + - : [`aria-level`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-level) 属性を反映した文字列で、構造内の要素の階層レベルを定義します。 +- {{domxref("ElementInternals.ariaLive")}} + - : [`aria-live`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-live) 属性を反映した文字列で、要素が更新されることを示し、ユーザエージェント、支援技術、ユーザーがライブ領域から期待できる更新の種類を記述します。 +- {{domxref("ElementInternals.ariaModal")}} + - : [`aria-modal`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-modal) 属性を反映した文字列で、要素が表示されたときにモーダルであるかどうかを示します。 +- {{domxref("ElementInternals.ariaMultiline")}} + - : [`aria-multiline`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-multiline) 属性を反映した文字列で、テキストボックスが複数行の入力を受け付けるか、 1 行のみの入力を受け付けるかを示します。 +- {{domxref("ElementInternals.ariaMultiSelectable")}} + - : [`aria-multiselectable`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-multiselectable) 属性を反映した文字列で、ユーザーが現在の選択可能な子孫から複数のアイテムを選択できることを示します。 +- {{domxref("ElementInternals.ariaOrientation")}} + - : [`aria-orientation`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-orientation) 属性を反映した文字列で、要素の向きが水平であるか、垂直であるか、不明または曖昧であるかを示します。 +- {{domxref("ElementInternals.ariaPlaceholder")}} + - : [`aria-placeholder`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-placeholder) 属性を反映した文字列で、コントロールに値がない場合に、ユーザーのデータ入力を補助するための短いヒントを定義します。 +- {{domxref("ElementInternals.ariaPosInSet")}} + - : [`aria-posinset`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-posinset) 属性を反映した文字列で、現在のリストアイテムまたはツリーアイテムの集合における要素の番号または位置を定義します。 +- {{domxref("ElementInternals.ariaPressed")}} + - : [`aria-pressed`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-pressed) 属性を反映した文字列で、トグルボタンの現在の「押されている」状態を示します。 +- {{domxref("ElementInternals.ariaReadOnly")}} + - : [`aria-readonly`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-readonly) 属性を反映した文字列で、その要素が編集可能ではないが、それ以外は操作可能であることを示します。 +- {{domxref("ElementInternals.ariaRelevant")}} {{Non-standard_Inline}} + - : [`aria-relevant`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-relevant) 属性を反映した文字列で、ライブ領域内のアクセシビリティツリーが変更されたときに、ユーザーエージェントがどのような通知を行うかを示します。これは、 `aria-live` 領域内のどのような変更が関連性があり、通知されるべきかを記述するために使用されます。 +- {{domxref("ElementInternals.ariaRequired")}} + - : [`aria-required`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-required) 属性を反映した文字列で、これは、フォームを送信する前に、その要素でユーザー入力が必要であることを示します。 +- {{domxref("ElementInternals.role")}} + - : ARIA ロールを含む文字列です。 ARIA ロールの完全なリストは [ARIA 技術のページ](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques)にあります。 +- {{domxref("ElementInternals.ariaRoleDescription")}} + - : [`aria-roledescription`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-roledescription) 属性を反映した文字列で、要素のロールのための、人間が読める、作者がローカライズした説明を定義します。 +- {{domxref("ElementInternals.ariaRowCount")}} + - : [`aria-rowcount`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-rowcount) 属性を反映した文字列で、これは、テーブル、グリッド、ツリーグリッドの行の総数を定義します。 +- {{domxref("ElementInternals.ariaRowIndex")}} + - : [`aria-rowindex`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-rowindex) 属性を反映した文字列で、テーブル、グリッド、ツリーグリッド内の行の総数に対する要素の行インデックスまたは位置を定義します。 +- {{domxref("ElementInternals.ariaRowSpan")}} + - : [`aria-rowspan`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-rowspan) 属性を反映した文字列で、これは、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがまたがる行の数を定義します。 +- {{domxref("ElementInternals.ariaSelected")}} + - : [`aria-selected`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-selected) 属性を反映した文字列で、選択状態を持つ要素の現在の「選択されている」状態を示します。 +- {{domxref("ElementInternals.ariaSetSize")}} + - : [`aria-setsize`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-setsize) 属性を反映した文字列で、現在のリストアイテムまたはツリーアイテムのセットに含まれるアイテムの数を定義します。 +- {{domxref("ElementInternals.ariaSort")}} + - : [`aria-sort`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-sort) 属性を反映した文字列で、テーブルやグリッドのアイテムが昇順でソートされているか降順でソートされているかを示します。 +- {{domxref("ElementInternals.ariaValueMax")}} + - : [`aria-valueMax`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-valuemax) 属性を反映した文字列で、これは範囲ウィジェットの最大許容値を定義します。 +- {{domxref("ElementInternals.ariaValueMin")}} + - : [`aria-valueMin`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-valuemin) 属性を反映した文字列で、これは範囲ウィジェットの最小許容値を定義します。 +- {{domxref("ElementInternals.ariaValueNow")}} + - : [`aria-valueNow`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-valuenow) 属性を反映した文字列で、範囲ウィジェットの現在値を定義します。 +- {{domxref("ElementInternals.ariaValueText")}} + - : [`aria-valuetext`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext) 属性を反映した文字列で、 これは、範囲ウィジェットの aria-valuenow の代替となる人間が読めるテキストを定義します。 + +## インスタンスメソッド + +- {{domxref("ElementInternals.setFormValue()")}} + - : 要素の送信値と状態を設定し、これらをユーザーエージェントに伝えます。 +- {{domxref("ElementInternals.setValidity()")}} + - : 要素の有効性を設定します。 +- {{domxref("ElementInternals.checkValidity()")}} + - : 要素が、[制約検証](/ja/docs/Web/HTML/Constraint_validation)ルールを満たしているかどうかをチェックします。 +- {{domxref("ElementInternals.reportValidity()")}} + - : 要素が[制約検証](/ja/docs/Web/HTML/Constraint_validation)ルールを満たしているかどうかをチェックし、ユーザエージェントに検証メッセージを送信します。 + +## 例 + +次の例は、カスタムフォーム関連要素を {{domxref("HTMLElement.attachInternals")}} で作成する方法を示しています。 + +```js +class CustomCheckbox extends HTMLElement { + static formAssociated = true; + + constructor() { + super(); + this.internals_ = this.attachInternals(); + } + + // … +} + +window.customElements.define("custom-checkbox", CustomCheckbox); + +let element = document.createElement("custom-checkbox"); +let form = document.createElement("form"); + +// フォームに要素を追加して関連付ける +form.appendChild(element); + +console.log(element.internals_.form); +// expected output:
+``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [More capable form controls](https://web.dev/articles/more-capable-form-controls) +- [Creating custom form controls with ElementInternals](https://css-tricks.com/creating-custom-form-controls-with-elementinternals/) +- [ElementInternals polyfill](https://www.npmjs.com/package/element-internals-polyfill) diff --git a/files/ja/web/api/elementinternals/labels/index.md b/files/ja/web/api/elementinternals/labels/index.md new file mode 100644 index 00000000000000..130b22b6a6cb39 --- /dev/null +++ b/files/ja/web/api/elementinternals/labels/index.md @@ -0,0 +1,40 @@ +--- +title: "ElementInternals: labels プロパティ" +short-title: labels +slug: Web/API/ElementInternals/labels +l10n: + sourceCommit: 86215eff9beccf2e069be9109347ad830cc5e9c4 +--- + +{{APIRef("DOM")}} + +**`labels`** は {{domxref("ElementInternals")}} インターフェイスのプロパティで、要素に関連付けられたラベルを返します。 + +## 値 + +この要素に関連付けられたすべてのラベル要素の入った {{domxref("NodeList")}} です。 + +## 例 + +次の例は、カスタムチェックボックスコンポーネントに {{HTMLElement("label")}} 要素をリンクしたものです。 +`labels` の値をコンソールに出力すると、このラベルを表す1つのエントリを持つ {{domxref("NodeList")}} が返されます。 + +```html +
+ + +
+``` + +```js +let element = document.getElementById("custom-checkbox"); +console.log(element.internals_.label); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/elementinternals/reportvalidity/index.md b/files/ja/web/api/elementinternals/reportvalidity/index.md new file mode 100644 index 00000000000000..d43fe1417a28c3 --- /dev/null +++ b/files/ja/web/api/elementinternals/reportvalidity/index.md @@ -0,0 +1,56 @@ +--- +title: "ElementInternals: reportValidity() メソッド" +short-title: reportValidity() +slug: Web/API/ElementInternals/reportValidity +l10n: + sourceCommit: 86215eff9beccf2e069be9109347ad830cc5e9c4 +--- + +{{APIRef("DOM")}} + +**`reportValidity()`** は {{domxref("ElementInternals")}} インターフェイスのメソッドで、適用された[制約検証](/ja/docs/Web/HTML/Constraint_validation)ルールをこの要素が満たしているかどうかをチェックします。 + +`reportValidity` が `false` を返した場合、キャンセル可能な [invalid イベント](/ja/docs/Web/API/HTMLInputElement/invalid_event)が要素で発生します。 + +このメソッドは {{domxref("ElementInternals.checkValidity()")}} と同様の振る舞いをしますが、 {{domxref("ElementInternals.validationMessage")}} の値をユーザーエージェントに送信して表示させます。 + +## 構文 + +```js-nolint +reportValidity() +``` + +### 引数 + +なし。 + +### 返値 + +論理値で、要素がすべての検証される制約に合格していれば `true` を返します。 + +### 例外 + +- `NotSupportedError` {{domxref("DOMException")}} + - : 要素の `formAssociated` プロパティが `true` に設定されていない場合に発生します。 + +## 例 + +以下の例では、 {{domxref("ElementInternals.setValidity()")}} を使用して、要素が検証ルールを満たしていないことを示します。 `reportValidity()` を呼び出すと `false` が返され、 "メッセージ" という値がユーザーエージェントに送られ、表示されます。 + +再度 `setValidity` を呼び出し、今度はすべてのルールが false になっていることを示すと、`reportValidity()` は `true` を返します。 + +```js +let element = document.getElementById("join-checkbox"); +element.internals_.setValidity({ valueMissing: true }, "メッセージ"); +console.log(element.internals_.reportValidity()); // false +element.internals_.setValidity({}); +console.log(element.internals_.reportValidity()); // true +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/elementinternals/setformvalue/index.md b/files/ja/web/api/elementinternals/setformvalue/index.md new file mode 100644 index 00000000000000..873234711c669a --- /dev/null +++ b/files/ja/web/api/elementinternals/setformvalue/index.md @@ -0,0 +1,56 @@ +--- +title: "ElementInternals: setFormValue() メソッド" +short-title: setFormValue() +slug: Web/API/ElementInternals/setFormValue +l10n: + sourceCommit: 86215eff9beccf2e069be9109347ad830cc5e9c4 +--- + +{{APIRef("DOM")}} + +**`setFormValue()`** は {{domxref("ElementInternals")}} インターフェイスのメソッドで、このメソッドは、要素の送信値と状態を設定し、これらをユーザーエージェントに伝えます。 + +## 構文 + +```js-nolint +setFormValue(value) +setFormValue(value, state) +``` + +### 引数 + +- `value` + - : サーバに送信する値として、{{domxref("File")}}、文字列、{{domxref("FormData")}} のいずれかを指定します。 +- `state` {{optional_inline}} + - : {{domxref("File")}}、文字列、{{domxref("FormData")}} のいずれかで、ユーザーの入力を表します。 + これにより、アプリケーションは必要に応じて、ユーザーが送信した情報を、ユーザーが入力した形式で再表示することができます。 + +> **メモ:** 一般的に、 `state` はユーザがー指定した情報を渡すために、 `value` はサニタイズ後、サーバーに送信するのに適した情報を渡すために使用されます。 +> たとえば、カスタム要素で日付の入力を求められた場合、ユーザーは「3/15/2019」と入力するかもしれません。 +> これは `state` です。 +> サーバーは `2019-03-15` という日付書式を期待しているので、この書式の日付が `value` として渡されます。 + +### 返値 + +undefined です。 + +### 例外 + +- `NotSupportedError` {{domxref("DOMException")}} + - : 要素の `formAssociated` プロパティが `true` に設定されていない場合に発生します。 + +## 例 + +次の例では、チェックボックスのカスタム要素で、サーバーに送信する値として `on` を、状態として `checked` を設定しています。 + +```js +this.internals_.setFormValue("on", "checked"); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/elementinternals/setvalidity/index.md b/files/ja/web/api/elementinternals/setvalidity/index.md new file mode 100644 index 00000000000000..807f85cc92de7a --- /dev/null +++ b/files/ja/web/api/elementinternals/setvalidity/index.md @@ -0,0 +1,88 @@ +--- +title: "ElementInternals: setValidity() メソッド" +short-title: setValidity() +slug: Web/API/ElementInternals/setValidity +l10n: + sourceCommit: 86215eff9beccf2e069be9109347ad830cc5e9c4 +--- + +{{APIRef("DOM")}} + +**`setValidity()`** は {{domxref("ElementInternals")}} インターフェイスのメソッドで、この要素の妥当性を設定します。 + +## 構文 + +```js-nolint +setValidity(flags) +setValidity(flags, message) +setValidity(flags, message, anchor) +``` + +### 引数 + +- `flags` {{Optional_Inline}} + + - : 要素の有効状態を示す、 1 つ以上のフラグを含む辞書オブジェクトです。 + + - `valueMissing` + - : 論理値で、要素に [`required`](/ja/docs/Web/HTML/Element/input#required) 属性があって値がない場合は `true` となり、そうでない場合は `false` となります。もし `true` なら、その要素は CSS の {{cssxref(":invalid")}} の擬似クラスに一致します。 + - `typeMismatch` + - : 論理値で、値が必要とされる構文でない場合（[`type`](/ja/docs/Web/HTML/Element/input#type) が `email` または `url` の場合）は `true` となり、構文が正しい場合は `false` となります。 `true` の場合、その要素は CSS の {{cssxref(":invalid")}} の擬似クラスに一致します。 + - `patternMismatch` + - : 論理値で、指定された [`pattern`](/ja/docs/Web/HTML/Element/input#pattern) に一致しない場合は `true` となり、一致する場合は `false` となります。 `true` の場合、その要素は CSS の {{cssxref(":invalid")}} の擬似クラスに一致します。 + - `tooLong` + - : 論理値で、値が {{domxref("HTMLInputElement")}} または {{domxref("HTMLTextAreaElement")}} オブジェクトで指定された `maxlength` を超える場合は `true` となり、最大の長さ以下の場合は `false` となります。 `true` の場合、その要素は CSS の {{cssxref(":invalid")}} および {{cssxref(":out-of-range")}} 擬似クラスに一致します。 + - `tooShort` + - : 論理値で、値が {{domxref("HTMLInputElement")}} または {{domxref("HTMLTextAreaElement")}} オブジェクトで指定された `minlength` に満たない場合は `true` となり、最小の長さ以上の場合は `false` となります。 `true` の場合、その要素は CSS の {{cssxref(":invalid")}} および {{cssxref(":out-of-range")}} 擬似クラスに一致します。 + - `rangeUnderflow` + - : 論理値で、値が [`min`](/ja/docs/Web/HTML/Element/input#min) 属性で指定された最小値より小さい場合は `true` となり、最小値以上の場合は `false` となります。 `true` の場合、要素は CSS の {{cssxref(":invalid")}} および {{cssxref(":out-of-range")}} 擬似クラスに一致します。 + - `rangeOverflow` + - : 論理値で、値が [`max`](/ja/docs/Web/HTML/Element/input#max) 属性で指定された最大値より大きい場合は `true` となり、最大値以下であれば `false` となります。 `true` の場合、要素は CSS の {{cssxref(":invalid")}} および {{cssxref(":out-of-range")}} 擬似クラスに一致します。 + - `stepMismatch` + - : 論理値で、値が [`step`](/ja/docs/Web/HTML/Element/input#step) 属性によって決定されるルールに適合しない（つまり、ステップ値で均等に割り切れない）場合は `true` となり、ステップのルールに適合する場合は `false` となります。 `true` の場合、要素は CSS の {{cssxref(":invalid")}} および {{cssxref(":out-of-range")}} 擬似クラスに一致します。 + - `badInput` + - : 論理値で、ブラウザーが変換できない入力をユーザーが入力した場合に `true` となります。 + - `customError` + - : 論理値で、この要素の {{domxref('HTMLObjectElement.setCustomValidity', 'setCustomValidity()')}} メソッドを呼び出すことで、要素のカスタム有効性メッセージが空でない文字列に設定されたかどうかを示します。 + + > **メモ:** すべてのフラグを `false` に設定し、この要素がすべての制約の検証に合格したことを示すには、空のオブジェクト `{}` を渡してください。この場合、 `message` も渡す必要はありません。 + +- `message` {{Optional_Inline}} + - : `flags` が `true` の場合に設定されるメッセージを含む文字列。すべての `flags` が `false` の場合のみ、この引数はオプションとなります。 +- `anchor` {{Optional_Inline}} + - : このフォーム送信に関する問題を報告するためにユーザーエージェントが使用する {{domxref("HTMLElement")}} です。 + +### 返値 + +なし ({{jsxref("undefined")}})。 + +### 例外 + +- `NotSupportedError` {{domxref("DOMException")}} + - : 要素の `formAssociated` プロパティが `true` に設定されていない場合に発生します。 +- {{jsxref("TypeError")}} + - : 1 つ以上の `flags` が `true` の場合に発生します。 +- `NotFoundError` {{domxref("DOMException")}} + - : `anchor` が与えられているが、そのアンカーが要素のシャドウを含む子孫でない場合に発生します。 + +## 例 + +次の例では、 `setValidity` を空の `flags` 引数を指定して呼び出して、この要素が制約検証ルールを満たしていることを示します。 + +```js +this.internals_.setValidity({}); +``` + +次の例では、 `valueMissing` フラグを `true` に設定して `setValidity` を呼び出しています。その際、 `message` 引数にメッセージを渡す必要があります。 + +```js +this.internals_.setValidity({ valueMissing: true }, "my message"); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} From cae6b5e455b7489af9b0c34dca13367302df0723 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 29 Oct 2023 18:55:09 +0900 Subject: [PATCH 77/91] =?UTF-8?q?2023/02/21=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../global_objects/math/log10e/index.md | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/math/log10e/index.md b/files/ja/web/javascript/reference/global_objects/math/log10e/index.md index 73b8a32305d5ed..01f2babcc9a620 100644 --- a/files/ja/web/javascript/reference/global_objects/math/log10e/index.md +++ b/files/ja/web/javascript/reference/global_objects/math/log10e/index.md @@ -1,19 +1,25 @@ --- title: Math.LOG10E slug: Web/JavaScript/Reference/Global_Objects/Math/LOG10E +l10n: + sourceCommit: fcd80ee4c8477b6f73553bfada841781cf74cf46 --- {{JSRef}} -**`Math.LOG10E`** プロパティは 10 を底とした e の対数、約 0.434 を表します。 +**`Math.LOG10E`** は静的データプロパティで、 10 を底とした [e](/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/E) の対数、約 0.434 を表します。 -Math.LOG10E=log10(e)≈0.434\mathtt{\mi{Math.LOG10E}} = \log_10(e) \approx 0.434 +{{EmbedInteractiveExample("pages/js/math-log10e.html", "shorter")}} -{{EmbedInteractiveExample("pages/js/math-log10e.html", "shorter")}}{{js_property_attributes(0, 0, 0)}} +## 値 + +𝙼𝚊𝚝𝚑.𝙻𝙾𝙶𝟷𝟶𝙴=log10(e)≈0.434\mathtt{\mi{Math.LOG10E}} = \log\_{10}(\mathrm{e}) \approx 0.434 + +{{js_property_attributes(0, 0, 0)}} ## 解説 -`LOG10E` は `Math` オブジェクトの静的プロパティなので、 `Math` オブジェクトを生成してプロパティとして使用するのではなく、常に `Math.LOG10E` として使用するようにしてください (`Math` はコンストラクターではありません)。 +`LOG10E` は `Math` オブジェクトの静的プロパティなので、自分で作成した `Math` オブジェクトのプロパティとして使用するのではなく、常に `Math.LOG10E` として使用するようにしてください（`Math` はコンストラクターではありません）。 ## 例 @@ -35,7 +41,7 @@ getLog10e(); // 0.4342944819032518 ## ブラウザーの互換性 -{{Compat("javascript.builtins.Math.LOG10E")}} +{{Compat}} ## 関連情報 From 67c796086a0d0921ed60197dfd54a6345243087d Mon Sep 17 00:00:00 2001 From: Jason Lam Date: Thu, 2 Nov 2023 09:05:43 +0800 Subject: [PATCH 78/91] [zh-cn]: update the translation of WeakMap.set()&get()&has()&delete() (#16792) Co-authored-by: Allo --- .../global_objects/weakmap/delete/index.md | 28 ++++++++----- .../global_objects/weakmap/get/index.md | 24 ++++++----- .../global_objects/weakmap/has/index.md | 29 +++++++------- .../global_objects/weakmap/set/index.md | 40 ++++++++++++------- 4 files changed, 70 insertions(+), 51 deletions(-) diff --git a/files/zh-cn/web/javascript/reference/global_objects/weakmap/delete/index.md b/files/zh-cn/web/javascript/reference/global_objects/weakmap/delete/index.md index b27431d4ae676b..ba6db388c0c5a5 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/weakmap/delete/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/weakmap/delete/index.md @@ -3,7 +3,11 @@ title: WeakMap.prototype.delete() slug: Web/JavaScript/Reference/Global_Objects/WeakMap/delete --- -{{JSRef("Global_Objects", "WeakMap")}} +{{JSRef}} + +{{jsxref("WeakMap")}} 实例的 **`delete()`** 方法从该 `WeakMap` 中删除指定的元素。 + +{{EmbedInteractiveExample("pages/js/weakmap-prototype-delete.html")}} ## 概述 @@ -11,28 +15,30 @@ slug: Web/JavaScript/Reference/Global_Objects/WeakMap/delete ## 语法 -```plain -wm.delete(key); +```js-nolint +weakMapInstance.delete(key) ``` -### Parameters 参数 +### 参数 -- key - - : 需要删除的元素的键 +- `key` + - : 要从 `WeakMap` 对象中删除的元素的键。 ### 返回值 -如果成功删除，返回 `true`，否则返回 `false`。 +如果成功在 `WeakMap` 对象中删除了元素，则返回 `true`。如果未在 `WeakMap` 中找到该键，则返回 `false`。如果 `key` 不是对象或[非全局注册的符号](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol#全局共享的_symbol)，则始终返回 `false`。 ## 示例 +### 使用 delete() 方法 + ```js -var wm = new WeakMap(); +const wm = new WeakMap(); wm.set(window, "foo"); -wm.delete(window); // 返回 true，表示删除成功。 +wm.delete(window); // 返回 true。成功删除。 -wm.has(window); // 返回 false，因为 window 对象已经被删除了。 +wm.has(window); // 返回 false。WeakMap 中已经不存在 window 对象。 ``` ## 规范 @@ -43,6 +49,6 @@ wm.has(window); // 返回 false，因为 window 对象已经被删除了。 {{Compat}} -## 相关链接 +## 参见 - {{jsxref("WeakMap")}} diff --git a/files/zh-cn/web/javascript/reference/global_objects/weakmap/get/index.md b/files/zh-cn/web/javascript/reference/global_objects/weakmap/get/index.md index c7d4217230a2fd..2dad1f470cba33 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/weakmap/get/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/weakmap/get/index.md @@ -5,33 +5,35 @@ slug: Web/JavaScript/Reference/Global_Objects/WeakMap/get {{JSRef}} -**`get()`** 方法返回 `WeakMap` 指定的元素。 +{{jsxref("WeakMap")}} 实例的 **`get()`** 方法返回该 `WeakMap` 中的指定元素。 + +{{EmbedInteractiveExample("pages/js/weakmap-prototype-get.html")}} ## 语法 -```plain -wm.get(key); +```js-nolint +get(key) ``` ### 参数 -- key - - : 必须。想要从 `WeakMap` 获取的元素的键。 +- `key` + - : 要从 `WeakMap` 对象返回的元素的键。 ### 返回值 -### 返回与指定键相关联的值，如果 `WeakMap` 对象找不到这个键则返回 `undefined`。 +该 `WeakMap` 对象中与指定键相关联的元素。如果找不到该键，则返回 {{jsxref("undefined")}}。如果 `key` 不是对象或[非全局注册的符号](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol#全局共享的_symbol)，则始终返回 {{jsxref("undefined")}}。 ## 示例 -### 使用 `get` 方法 +### 使用 get() 方法 ```js -var wm = new WeakMap(); +const wm = new WeakMap(); wm.set(window, "foo"); -wm.get(window); // 返回 "foo". -wm.get("baz"); // 返回 undefined. +wm.get(window); // 返回 "foo"。 +wm.get("baz"); // 返回 undefined。 ``` ## 规范 @@ -42,7 +44,7 @@ wm.get("baz"); // 返回 undefined. {{Compat}} -## 相关链接 +## 参见 - {{jsxref("WeakMap")}} - {{jsxref("WeakMap.set()")}} diff --git a/files/zh-cn/web/javascript/reference/global_objects/weakmap/has/index.md b/files/zh-cn/web/javascript/reference/global_objects/weakmap/has/index.md index 385a0613027b60..2b9c362fdca9d9 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/weakmap/has/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/weakmap/has/index.md @@ -5,34 +5,35 @@ slug: Web/JavaScript/Reference/Global_Objects/WeakMap/has {{JSRef}} -**`has()`** 方法根据 WeakMap 对象的元素中是否存在 key 键返回一个 boolean 值。 +{{jsxref("WeakMap")}} 实例的 **`has()`** 返回一个布尔值，指示该 `WeakMap` 中是否存在具有指定键的元素。 + +{{EmbedInteractiveExample("pages/js/weakmap-prototype-has.html")}} ## 语法 -```plain -wm.has(key); +```js-nolint +has(key) ``` -### Parameters +### 参数 -- key - - : 必须的。用来检测 WeakMap 对象中是否存在元素的键为 key。 +- `key` + - : 要测试是否在该 `WeakMap` 对象中存在的元素的键。 -### Return value +### 返回值 -- Boolean - - : 如果指定的 key 存在于某个元素中则返回 true，否则返回 flase。 +如果指定键的元素存在于 `WeakMap` 对象中，则返回 `true`；否则返回 `false`。如果 `key` 不是对象或[非全局注册的符号](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol#全局共享的_symbol)，则始终返回 `false`。 ## 示例 -### 使用 `has` 方法 +### 使用 has 方法 ```js -var wm = new WeakMap(); +const wm = new WeakMap(); wm.set(window, "foo"); -wm.has(window); // returns true -wm.has("baz"); // returns false +wm.has(window); // 返回 true +wm.has("baz"); // 返回 false ``` ## 规范 @@ -43,7 +44,7 @@ wm.has("baz"); // returns false {{Compat}} -## See also +## 参见 - {{jsxref("WeakMap")}} - {{jsxref("WeakMap.prototype.set()")}} diff --git a/files/zh-cn/web/javascript/reference/global_objects/weakmap/set/index.md b/files/zh-cn/web/javascript/reference/global_objects/weakmap/set/index.md index 3f49e4ecd1b48e..9cfc7bdc57d38e 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/weakmap/set/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/weakmap/set/index.md @@ -5,40 +5,50 @@ slug: Web/JavaScript/Reference/Global_Objects/WeakMap/set {{JSRef}} -**`set()`** 方法根据指定的 `key` 和 `value` 在 `WeakMap`对象中添加新/更新元素。 +{{jsxref("WeakMap")}} 实例的 **`set()`** 方法根据指定的键值在该 `WeakMap` 中添加新元素。 {{EmbedInteractiveExample("pages/js/weakmap-prototype-set.html")}} ## 语法 -```plain -wm.set(key, value); +```js-nolint +set(key, value) ``` ### 参数 -- key - - : 必须的。必须是`对象`。是要在`WeakMap` 对象中添加元素的 key 部分。 -- value - - : 必须的。任意的值。是要在`WeakMap` 对象中添加/元素的 value 部分。 +- `key` + - : 必须是对象或[非全局注册的符号](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol#全局共享的_symbol)。要添加到 `WeakMap` 对象的元素的键。 +- `value` + - : 任何要添加到 `WeakMap` 对象的元素的值。 ### 返回值 -该`WeakMap`对象 +该 `WeakMap` 对象 + +### 异常 + +- {{jsxref("TypeError")}} + - : 如果 `key` 不是一个对象或[非全局注册的符号](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol#全局共享的_symbol)，则抛出该异常。 ## 示例 -### 使用 `set` 方法 +### 使用 set() 方法 ```js -var wm = new WeakMap(); -var obj = {}; +const wm = new WeakMap(); +const obj = {}; -// Add new elements to the WeakMap -wm.set(obj, "foo").set(window, "bar"); // chainable +// 将新元素添加到 WeakMap +wm.set(obj, "foo").set(window, "bar"); // 链式调用 -// Update an element in the WeakMap +// 更新 WeakMap 中的元素 wm.set(obj, "baz"); + +// 使用非全局注册的符号作为键 +const sym = Symbol("foo"); +wm.set(sym, "baz"); +wm.set(Symbol.iterator, "qux"); ``` ## 规范 @@ -49,7 +59,7 @@ wm.set(obj, "baz"); {{Compat}} -## See also +## 参见 - {{jsxref("WeakMap")}} - {{jsxref("WeakMap.prototype.get()")}} From 0e0687ae26847a3da005b0d330868c31b021ddb9 Mon Sep 17 00:00:00 2001 From: AquanJSW <62047911+AquanJSW@users.noreply.github.com> Date: Thu, 2 Nov 2023 12:27:46 +0800 Subject: [PATCH 79/91] zh-cn: update typed_arrays and related docs (#16794) Co-authored-by: Allo --- .../javascript/guide/typed_arrays/index.md | 187 ++++++++++++++---- .../global_objects/arraybuffer/index.md | 10 +- .../global_objects/typedarray/index.md | 89 ++++++++- 3 files changed, 251 insertions(+), 35 deletions(-) diff --git a/files/zh-cn/web/javascript/guide/typed_arrays/index.md b/files/zh-cn/web/javascript/guide/typed_arrays/index.md index 496db4062ea8e8..7e4eb0ae6f1330 100644 --- a/files/zh-cn/web/javascript/guide/typed_arrays/index.md +++ b/files/zh-cn/web/javascript/guide/typed_arrays/index.md @@ -5,25 +5,47 @@ slug: Web/JavaScript/Guide/Typed_arrays {{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Using_promises", "Web/JavaScript/Guide/Iterators_and_generators")}} -**JavaScript 类型化数组**（typed array）是一种类似数组的对象，并提供了一种用于在内存缓冲区中访问原始二进制数据的机制。 +JavaScript 类型化数组是一种类似数组的对象，并提供了一种用于在内存缓冲中访问原始二进制数据的机制。 -{{jsxref("Array")}} 存储的对象能动态增多和减少，并且可以存储任何 JavaScript 值。JavaScript 引擎会做一些内部优化，以便对数组的操作可以很快。然而，随着 Web 应用程序变得越来越强大，尤其一些新增加的功能例如：音频视频编辑、访问 WebSockets 的原始数据等，很明显有些时候如果使用 JavaScript 代码可以快速方便地通过类型化数组来操作原始的二进制数据将会非常有帮助。JavaScript 类型化数组中的每一个元素都是原始二进制值，而二进制值采用多种支持的格式之一（从 8 位整数到 64 位浮点数）。 +引入类型化数组并非是为了取代 JavaScript 中数组的任何一种功能。相反，它为开发者提供了一个操作二进制数据的接口。这在操作与平台相关的特性时会很有用，例如：音频视频编辑和访问 [WebSocket](/zh-CN/docs/Web/API/WebSockets_API) 原始数据等。JavaScript 类型化数组中的每一个元素都是以某种格式表示的原始二进制值，JavaScript 支持从 8 位整数到 64 位浮点数的多种二进制格式。 -但是，不要把类型化数组与普通数组混淆，因为在类型数组上调用 {{jsxref("Array.isArray()")}} 会返回 `false`。此外，并不是所有可用于普通数组的方法都能被类型化数组所支持（如 push 和 pop）。 +类型化数组拥有许多与数组相同的方法，语义也相似。但是，类型化数组并不是普通数组，因为在类型化数组上调用 {{jsxref("Array.isArray()")}} 会返回 `false`。此外，并不是所有可用于普通数组的方法都能被类型化数组所支持（如 push 和 pop）。 -## 缓冲和视图：类型数组架构 +为了最大程度的灵活性和效率，JavaScript 将类型化数组的实现拆分为*缓冲*和*视图*两部分。缓冲是一种表示了数据块的对象，它没有格式可言，也没有提供访问其内容的机制。为了访问缓冲中的内存，你需要使用[视图](#视图)。视图提供了*上下文*——即数据类型、起始偏移量和元素数量。 -为了达到最大的灵活性和效率，JavaScript 类型化数组将实现拆分为**缓冲**和**视图**两部分。缓冲（由 {{jsxref("ArrayBuffer")}} 对象实现）描述的是一个数据分块。缓冲没有格式可言，并且不提供访问其内容的机制。为了访问在缓冲对象中包含的内存，你需要使用视图。视图提供了上下文——即数据类型、起始偏移量和元素数——将数据转换为实际有类型的数组。 +![同一缓冲上的不同类型化数组。每种类型化数组的元素数量与元素宽度都不同。](typed_arrays.png) -![ArrayBuffer 中的类型化数组](typed_arrays.png) +## 缓冲 -### ArrayBuffer +有两种类型的缓冲：{{jsxref("ArrayBuffer")}} 和 {{jsxref("SharedArrayBuffer")}}。它们都是内存块的低级表示。它们名字中都含有“array”，但是它们与数组并没有太多关系——你不能直接读写它们。相反，缓冲是通用的对象，它们只包含原始数据。为了访问缓冲所表示的内存，你需要使用视图。 -{{jsxref("ArrayBuffer")}} 是一种数据类型，用来表示一个通用的、固定长度的二进制数据缓冲区。你不能直接操作 ArrayBuffer 中的内容；你需要创建一个类型化数组的视图或一个描述缓冲数据格式的 {{jsxref("DataView")}}，使用它们来读写缓冲区中的内容。 +缓冲支持以下操作： + +- _分配_：创建一个新的缓冲时，会分配一个新的内存块，并且初始化为 `0`。 +- _复制_：使用 {{jsxref("ArrayBuffer/slice", "slice()")}} 方法，你可以高效地复制缓冲中的一部分数据，而不需要创建视图来手动复制每一个字节。 +- _转移_：使用 {{jsxref("ArrayBuffer/transfer", "transfer()")}} 和 {{jsxref("ArrayBuffer/transferToFixedLength", "transferToFixedLength()")}} 方法，可以将内存块的所有权转移给一个新的缓冲对象。若你想要在不同的执行上下文间转移数据，又不想复制，这些方法就很有用。转移后，原始缓冲将不再可用。`SharedArrayBuffer` 不能被转移（因为缓冲已经被所有执行上下文共享）。 +- _调整大小_：使用 {{jsxref("ArrayBuffer/resize", "resize()")}} 方法，可以调整内存块的大小（只要不超过预设的 {{jsxref("ArrayBuffer/maxByteLength", "maxByteLength")}} 限制）。`SharedArrayBuffer` 只能[增长](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/grow)，不能缩小。 + +`ArrayBuffer` 与 `SharedArrayBuffer` 之间的区别是，前者在同一时刻只能所属于单个执行上下文。如果你将 `ArrayBuffer` 传递给另一个执行上下文，它会被*转移*，原始的 `ArrayBuffer` 将不再可用。这确保了同一时刻只有一个执行上下文可以访问内存。`SharedArrayBuffer` 在传递给另一个执行上下文时不会被转移，因此可以被多个执行上下文同时访问。当多个线程同时访问同一内存块时，可能会出现竞争条件，这时候 {{jsxref("Atomics")}} 方法就很有用了。 + +## 视图 + +目前主要有两种视图：类型化数组视图和 {{jsxref("DataView")}}。类型化数组提供了[实用方法](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#实例方法)，可以方便地转换二进制数据。`DataView` 更底层，可以精确控制数据的访问方式。使用这两种视图读写数据的方式是非常不同的。 + +两种视图都会使 {{jsxref("ArrayBuffer.isView()")}} 返回 `true`。它们都有以下属性： + +- `buffer` + - : 视图所引用的底层缓冲。 +- `byteOffset` + - : 视图相对于缓冲起始位置的偏移量（以字节为单位）。 +- `byteLength` + - : 视图的长度（以字节为单位）。 + +两者的构造函数都接受上述三个分离的参数。类型化数组构造函数还接受 `length` 作为元素数量，而不是字节长度。 ### 类型化数组视图 -类型化数组视图具有自描述性的名字和所有常用的数值类型像 `Int8`、`Uint32`、`Float64` 等等。有一种特殊类型的数组 `Uint8ClampedArray`。它仅操作 0 到 255 之间的数值。例如，这对于 [Canvas 数据处理](/zh-CN/docs/Web/API/ImageData)非常有用。 +类型化数组视图有自描述的名称，并且提供了所有常见数值类型的视图，如 `Int8`、`Uint32` 和 `Float64` 等等。还有一种特殊的类型化数组视图，{{jsxref("Uint8ClampedArray")}}，它会将值钳制（clamp）到 `0` 到 `255` 之间，这在 [Canvas 数据处理](/zh-CN/docs/Web/API/ImageData)等场景中很有用。 | 类型 | 值范围 | 字节数 | 描述 | 对应的 Web IDL 类型 | 等效的 C 类型 | | ------------------------------- | ---------------------------------------------- | ------ | ----------------------------------------------------- | --------------------- | ------------------------------- | @@ -39,9 +61,67 @@ slug: Web/JavaScript/Guide/Typed_arrays | {{jsxref("BigInt64Array")}} | -263~263 - 1 | 8 | 64 位有符号整数（补码） | `bigint` | `int64_t (signed long long)` | | {{jsxref("BigUint64Array")}} | 0~264 - 1 | 8 | 64 位无符号整数 | `bigint` | `uint64_t (unsigned long long)` | +所有类型化数组类型都有相同的方法与属性，这些方法与属性由 {{jsxref("TypedArray")}} 类定义。它们的唯一区别在于底层数据类型和字节数的不同。这在[值编码与标准化](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#值编码与标准化)中有详细讨论。 + +类型化数组原则上是固定长度的，因此并不存在可以改变数组长度的方法，如 `pop`、`push`、`shift`、`splice` 和 `unshift`。此外，`flat` 也不可用，因为类型化数组无法嵌套；`concat` 和 `flatMap` 则是由于应用场景不大，亦不可用。由于 `splice` 不可用，因此 `toSpliced` 也不可用。所有其他数组方法都是 `Array` 和 `TypedArray` 共享的。 + +另一方面，类型化数组有额外的 `set` 和 `subarray` 方法，可以用来优化“同缓冲多视图”的场景。`set()` 方法允许你使用一个数组或类型化数组的数据，来对另一个类型化数组的多个索引同时进行设置。如果两个类型化数组共享同一个底层缓冲，那么这个操作可能会更加高效，因为这是一个快速的内存移动。`subarray()` 方法创建一个新的类型化数组视图，它引用与原始类型化数组相同的缓冲，但是范围更窄。 + +在不改变底层缓冲的前提下，无法直接改变类型化数组的长度。但是，当类型化数组的底层是可调整大小的缓冲，且没有固定的 `byteLength` 时，它就会*跟踪长度*，即它的长度会随着缓冲的大小而自动调整。详情请参阅[底层为可变大小缓冲时的行为](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#底层为可变大小缓冲时的行为)。 + +类似于普通数组，你可以使用[方括号表示法](/zh-CN/docs/Web/JavaScript/Reference/Operators/Property_accessors#方括号表示法)来访问类型化数组的元素。底层缓冲中对应的字节会被解析为一个数字。任何使用数字（或数字的字符串表示，因为数字总是在访问属性时被转换为字符串）的属性访问都会被类型化数组代理——它们永远不会与对象本身交互。这意味着，例如： + +- 超越边界索引的访问总是返回 `undefined`，而不会实际访问对象上的属性。 +- 任何尝试写入超越边界的属性的行为都不会生效：它既不会抛出错误，也不会改变缓冲或类型化数组。 +- 类型化数组的索引看起来是可配置的和可写的，但是任何改变它们的属性的尝试都会失败。 + +```js +const uint8 = new Uint8Array([1, 2, 3]); +console.log(uint8[0]); // 1 + +// 仅用作示例。不要在生产代码中使用。 +uint8[-1] = 0; +uint8[2.5] = 0; +uint8[NaN] = 0; +console.log(Object.keys(uint8)); // ["0", "1", "2"] +console.log(uint8[NaN]); // undefined + +// 非数字访问仍然有效 +uint8[true] = 0; +console.log(uint8[true]); // 0 + +Object.freeze(uint8); // TypeError：无法冻结非空缓冲的视图 +``` + ### DataView -{{jsxref("DataView")}} 是一种底层接口，它提供有可以操作缓冲区中任意数据的访问器（getter/setter）API。这对操作不同类型数据的场景很有帮助，例如：类型化数组视图都是运行在本地字节序模式（参考[字节序](/zh-CN/docs/Glossary/Endianness)），可以通过使用 `DataView` 来控制字节序。默认是大端字节序（Big-endian），但可以调用 getter/setter 方法改为小端字节序（Little-endian）。 +{{jsxref("DataView")}} 是一种底层接口，它提供可以操作缓冲中任意数据的 getter/setter API。这对操作不同类型数据的场景很有帮助，例如：类型化数组视图都是运行在本地字节序模式（参考[字节序](/zh-CN/docs/Glossary/Endianness)），可以通过使用 `DataView` 来控制字节序。默认是大端字节序（big-endian），但可以调用 getter/setter 方法改为小端字节序（little-endian）。 + +`DataView` 不需要对齐，多字节读写可以从任意指定的偏移量开始。setter 方法也是如此。 + +下面的例子使用 `DataView` 来获取任意数字的二进制表示： + +```js +function toBinary( + x, + { type = "Float64", littleEndian = false, separator = " ", radix = 16 } = {}, +) { + const bytesNeeded = globalThis[`${type}Array`].BYTES_PER_ELEMENT; + const dv = new DataView(new ArrayBuffer(bytesNeeded)); + dv[`set${type}`](0, x, littleEndian); + const bytes = Array.from({ length: bytesNeeded }, (_, i) => + dv + .getUint8(i) + .toString(radix) + .padStart(8 / Math.log2(radix), "0"), + ); + return bytes.join(separator); +} + +console.log(toBinary(1.1)); // 3f f1 99 99 99 99 99 9a +console.log(toBinary(1.1, { littleEndian: true })); // 9a 99 99 99 99 99 f1 3f +console.log(toBinary(20, { type: "Int8", radix: 2 })); // 00010100 +``` ## 使用类型化数组的 Web API @@ -58,7 +138,7 @@ slug: Web/JavaScript/Guide/Typed_arrays ### 使用视图和缓冲 -首先，我们创建一个 16 字节固定长度的缓冲： +首先，我们需要创建一个 16 字节固定长度的缓冲： ```js const buffer = new ArrayBuffer(16); @@ -68,13 +148,13 @@ const buffer = new ArrayBuffer(16); ```js if (buffer.byteLength === 16) { - console.log("Yes, it's 16 bytes."); + console.log("是 16 字节。"); } else { - console.log("Oh no, it's the wrong size!"); + console.log("大小有问题！"); } ``` -在实际开始操作这个缓冲之前，需要创建一个视图。我们将创建一个视图，此视图将把缓冲内的数据格式化为一个 32 位有符号整数数组： +在实际开始操作这个缓冲之前，还需要一个视图。现在，我们就创建一个视图，该视图将把缓冲内的数据视为一个 32 位有符号整数数组： ```js const int32View = new Int32Array(buffer); @@ -90,28 +170,73 @@ for (let i = 0; i < int32View.length; i++) { 该代码会将数组以 `0`、`2`、`4` 和 `6` 填充（一共 4 个 4 字节元素，所以总长度为 16 字节）。 -### 同一数据的多个视图 +### 相同数据上的多个视图 -更有意思的是，你可以在同一数据上创建多个视图。例如：基于上文的代码，我们可以添加如下代码处理： +更有意思的是，你可以在同一数据上创建多个视图。例如：基于上文的代码，我们可以像这样继续操作： ```js const int16View = new Int16Array(buffer); for (let i = 0; i < int16View.length; i++) { - console.log(`Entry ${i}: ${int16View[i]}`); + console.log(`索引 ${i}：${int16View[i]}`); } ``` -这里我们创建了一个 16 位整数视图，该视图共享上文的 32 位整数视图的缓冲，然后以 16 位整数打印出缓冲里的数据，这次我们会得到 `0`、`0`、`2`、`0`、`4`、`0`、`6`、`0` 这样的输出。 +这里我们创建了一个 16 位整数视图，该视图共享上文的 32 位整数视图的缓冲，然后以 16 位整数打印出缓冲里的数据，这次我们会得到 `0`、`0`、`2`、`0`、`4`、`0`、`6`、`0` 这样的输出（假设是小端序编码）。 + +```plain +Int16Array | 0 | 0 | 2 | 0 | 4 | 0 | 6 | 0 | +Int32Array | 0 | 2 | 4 | 6 | +ArrayBuffer | 00 00 00 00 | 02 00 00 00 | 04 00 00 00 | 06 00 00 00 | +``` -那么，这样呢？ +进一步地： ```js int16View[0] = 32; -console.log(`Entry 0 in the 32-bit array is now ${int32View[0]}`); +console.log(`32 位数组的索引 0 处数据是：${int32View[0]}`); +``` + +这次的输出是 `"32 位数组的索引 0 处数据是：32"`。也就是，这 2 个数组都是同一数据的以不同格式展示出来的视图。 + +```plain +Int16Array | 32 | 0 | 2 | 0 | 4 | 0 | 6 | 0 | +Int32Array | 32 | 2 | 4 | 6 | +ArrayBuffer | 00 02 00 00 | 02 00 00 00 | 04 00 00 00 | 06 00 00 00 | +``` + +你可以对任意视图类型进行这样的操作，尽管如果你设置一个整数，然后以浮点数的形式读取它，你可能会得到一个奇怪的结果，因为位的解释方式不同。 + +```js +const float32View = new Float32Array(buffer); +console.log(float32View[0]); // 4.484155085839415e-44 +``` + +### 从缓冲读取文本 + +缓冲并不总是表示数字。例如，读取文件可以给你一个文本数据缓冲。你可以使用类型化数组从缓冲中读取这些数据。 + +下面的代码使用 {{domxref("TextDecoder")}} web API 读取 UTF-8 文本： + +```js +const buffer = new ArrayBuffer(8); +const uint8 = new Uint8Array(buffer); +// 我们手动写入数据，假装它已经在缓冲区中了 +uint8.set([228, 189, 160, 229, 165, 189]); +const text = new TextDecoder().decode(uint8); +console.log(text); // "你好" ``` -这次的输出是 `"Entry 0 in the 32-bit array is now 32"`。也就是，这 2 个数组都是同一数据的以不同格式展示出来的视图。你可以使用任何一种[视图类型](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_对象)。 +下面的代码使用 {{jsxref("String.fromCharCode()")}} 方法读取 UTF-16 文本： + +```js +const buffer = new ArrayBuffer(8); +const uint16 = new Uint16Array(buffer); +// 我们手动写入数据，假装它已经在缓冲区中了 +uint16.set([0x4f60, 0x597d]); +const text = String.fromCharCode(...uint16); +console.log(text); // "你好" +``` ### 使用复杂的数据结构 @@ -132,20 +257,20 @@ struct someStruct { ```js const buffer = new ArrayBuffer(24); -// ... read the data into the buffer ... +// …将数据读入缓冲… const idView = new Uint32Array(buffer, 0, 1); const usernameView = new Uint8Array(buffer, 4, 16); const amountDueView = new Float32Array(buffer, 20, 1); ``` -现在你就可以通过 `amountDueView[0]` 的方式访问数据。 +这样一来，你就得到了一个类似的数据结构，例如，`amountDueView[0]` 对应了 C 的 `amountDue` 字段。 -> **备注：** C 语言结构体的[数据对齐](https://zh.wikipedia.org/wiki/数据结构对齐)与平台相关。因此需要防范和考虑不同平台字节填充对齐的差异。 +> **备注**：C 语言结构体的[数据对齐](https://zh.wikipedia.org/wiki/数据结构对齐)与平台相关。因此需要防范和考虑不同平台字节填充对齐的差异。 ### 转换为普通数组 -在处理完一个类型化数组后，有时需要把它转为普通数组，以便可以从 {{jsxref("Array")}} 原型中受益。可以使用 {{jsxref("Array.from()")}} 实现： +在处理完一个类型化数组后，有时需要把它转为普通数组，以便可以从 {{jsxref("Array")}} 原型中受益。可以通过使用 {{jsxref("Array.from()")}} 实现： ```js const typedArray = new Uint8Array([1, 2, 3, 4]); @@ -159,18 +284,14 @@ const typedArray = new Uint8Array([1, 2, 3, 4]); const normalArray = [...typedArray]; ``` -如果不支持 `Array.from()`，还可以使用以下代码。 - -```js -const typedArray = new Uint8Array([1, 2, 3, 4]); -const normalArray = Array.prototype.slice.call(typedArray); -``` - ## 参见 -- [从 Base64 编码的字符串获取 `ArrayBuffer` 或类型化数组](/zh-CN/docs/Glossary/Base64#appendix_decode_a_base64_string_to_uint8array_or_arraybuffer) - [使用类型化数组实现快速的 Canvas 像素操作](https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays/) - [类型化数组：浏览器中的二进制数据](https://web.dev/articles/webgl-typed-arrays) - [字节序](/zh-CN/docs/Glossary/Endianness) +- {{jsxref("ArrayBuffer")}} +- {{jsxref("DataView")}} +- {{jsxref("TypedArray")}} +- {{jsxref("SharedArrayBuffer")}} {{PreviousNext("Web/JavaScript/Guide/Using_promises", "Web/JavaScript/Guide/Iterators_and_generators")}} diff --git a/files/zh-cn/web/javascript/reference/global_objects/arraybuffer/index.md b/files/zh-cn/web/javascript/reference/global_objects/arraybuffer/index.md index 312637b31f5d19..2e60373f88d3c3 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/arraybuffer/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/arraybuffer/index.md @@ -13,6 +13,14 @@ slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer `ArrayBuffer` 是一个[可转移对象](/zh-CN/docs/Web/API/Web_Workers_API/Transferable_objects)。 +## 描述 + +### 调整 ArrayBuffer 的大小 + +`ArrayBuffer` 对象可以通过在调用 {{jsxref("ArrayBuffer/ArrayBuffer", "ArrayBuffer()")}} 构造函数时包含 `maxByteLength` 选项来使其大小可变。你可以通过访问其 {{jsxref("ArrayBuffer/resizable", "resizable")}} 和 {{jsxref("ArrayBuffer/maxByteLength", "maxByteLength")}} 属性来查询 `ArrayBuffer` 的大小是否可变以及其最大值。你可以通过调用 {{jsxref("ArrayBuffer/resize", "resize()")}} 为可变大小的 `ArrayBuffer` 分配一个新的大小。新的字节会被初始化为 0。 + +这些特性使得调整 `ArrayBuffer` 的大小更加高效——否则，你必须使用新的大小创建一个缓冲副本。这也使得 JavaScript 在这方面与 WebAssembly 相当（Wasm 线性内存可以使用 [`WebAssembly.Memory.prototype.grow()`](/zh-CN/docs/WebAssembly/JavaScript_interface/Memory/grow) 调整大小）。 + ## 构造函数 - {{jsxref("ArrayBuffer.ArrayBuffer", "ArrayBuffer()")}} @@ -62,6 +70,6 @@ const view = new Int32Array(buffer); ## 参见 - [`core-js` 中的 `ArrayBuffer` Polyfill](https://github.com/zloirock/core-js#ecmascript-typed-arrays) -- [JavaScript 类型化数组](/zh-CN/docs/Web/JavaScript/Typed_arrays) +- [JavaScript 类型化数组](/zh-CN/docs/Web/JavaScript/Guide/Typed_arrays) - {{jsxref("SharedArrayBuffer")}} - [RangeError：无效的数组长度](/zh-CN/docs/Web/JavaScript/Reference/Errors/Invalid_array_length) diff --git a/files/zh-cn/web/javascript/reference/global_objects/typedarray/index.md b/files/zh-cn/web/javascript/reference/global_objects/typedarray/index.md index 1b2b13e4d7234c..774c0c1fd49430 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/typedarray/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/typedarray/index.md @@ -31,6 +31,93 @@ slug: Web/JavaScript/Reference/Global_Objects/TypedArray | {{jsxref("BigInt64Array")}} | -263 到 263 - 1 | 8 | 64 位有符号整型（补码） | `bigint` | `int64_t (signed long long)` | | {{jsxref("BigUint64Array")}} | 0 到 264 - 1 | 8 | 64 位无符号整型 | `bigint` | `uint64_t (unsigned long long)` | +### 值编码与标准化 + +所有的类型化数组都是基于 `ArrayBuffer` 进行操作的，你可以借此观察到每个元素的确切字节表示，因此二进制格式中的数字编码方式具有重要意义。 + +- 无符号整数数组（`Uint8Array`、`Uint16Array`、`Uint32Array` 和 `BigUint64Array`）直接以二进制形式存储数字。 +- 有符号整数数组（`Int8Array`、`Int16Array`、`Int32Array` 和 `BigInt64Array`）使用[二进制补码](https://zh.wikipedia.org/zh-cn/二補數)存储数字。 +- 浮点数组（`Float32Array` 和 `Float64Array`）使用 [IEEE 754](https://zh.wikipedia.org/zh-cn/IEEE_754)浮点格式存储数字。[`Number`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number#number_编码) 参考文档中有关于确切格式的更多信息。JavaScript 数字默认使用双精度浮点格式，这与 `Float64Array` 相同。`Float32Array` 将 23（而不是 52）位用于尾数，以及 8（而不是 11）位用于指数。请注意，规范要求所有的 {{jsxref("NaN")}} 值使用相同的位编码，但确切的位模式取决于实现。 +- `Uint8ClampedArray` 是一种特殊情况。它像 `Uint8Array` 一样以二进制形式存储数字，但是当你存储超出范围的数字时，它会将数字*钳制*（clamp）到 0 到 255 的范围内，而不是截断最高有效位。 + +除了 `Int8Array`、`Unit8Array` 和 `Uint8ClampedArray` 以外的其他类型数组都将每个元素存储为多个字节。这些字节可以按照从最高有效位到最低有效位（大端序）或从最低有效位到最高有效位（小端序）的顺序进行排序。请参阅[字节序](/zh-CN/docs/Glossary/Endianness)以了解更多。类型化数组始终使用平台的本机字节顺序。如果要在缓冲区中写入和读取时指定字节顺序，应该使用 {{jsxref("DataView")}}。 + +当向这些类型化数组写入时，超出可表示范围的值将被标准化。 + +- 所有整数数组（`Uint8ClampedArray` 除外）都使用[固定宽度数值转换](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number#固定宽度数值转换)，首先截断数字的小数部分，然后取最低位。 +- `Uint8ClampedArray` 首先将数字钳制到 0 到 255 的范围内（大于 255 的值变为 255，小于 0 的值变为 0），然后使用银行家舍入法将结果*四舍五入*（而非向下取整）到最近的整数，也就是说，如果数字恰好在两个整数之间，它将四舍五入到最近的偶数。例如，`0.5` 变为 `0`，`1.5` 变为 `2`，`2.5` 变为 `2`。 +- `Float32Array` 使用“银行家舍入法”将 64 位浮点数转换为 32 位。这与 {{jsxref("Math.fround()")}} 提供的算法相同。 + +### 底层为可变大小缓冲时的行为 + +当一个 `TypedArray` 被创建为一个[可变大小缓冲](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer#调整_arraybuffer_的大小)的视图时，改变底层缓冲的大小会对 `TypedArray` 的大小产生不同的影响，这取决于 `TypedArray` 是否是长度跟踪的。 + +如果一个类型化数组是通过省略或传递 `undefined` 给第三个参数来创建的，那么它将*跟踪长度*，并且将自动调整大小以适应底层 `buffer` 的大小： + +```js +const buffer = new ArrayBuffer(8, { maxByteLength: 16 }); +const float32 = new Float32Array(buffer); + +console.log(float32.byteLength); // 8 +console.log(float32.length); // 2 + +buffer.resize(12); + +console.log(float32.byteLength); // 12 +console.log(float32.length); // 3 +``` + +如果一个类型化数组是通过使用第三个 `length` 参数指定大小创建时，则它的大小不会随着 `buffer` 大小的增长而改变： + +```js +const buffer = new ArrayBuffer(8, { maxByteLength: 16 }); +const float32 = new Float32Array(buffer, 0, 2); + +console.log(float32.byteLength); // 8 +console.log(float32.length); // 2 +console.log(float32[0]); // 0, 初始值 + +buffer.resize(12); + +console.log(float32.byteLength); // 8 +console.log(float32.length); // 2 +console.log(float32[0]); // 0, 初始值 +``` + +当 `buffer` 缩小时，其上的类型化数组可能会超出范围，在这种情况下，类型化数组的观测大小将减少为 0。这是非长度跟踪类型化数组唯一可能改变长度的情况。 + +```js +const buffer = new ArrayBuffer(8, { maxByteLength: 16 }); +const float32 = new Float32Array(buffer, 0, 2); + +buffer.resize(7); + +console.log(float32.byteLength); // 0 +console.log(float32.length); // 0 +console.log(float32[0]); // undefined +``` + +如果你随后再次增长 `buffer` 以使类型化数组回到范围内，类型化数组的大小将恢复到其原始值。 + +```js +buffer.resize(8); + +console.log(float32.byteLength); // 8 +console.log(float32.length); // 2 +console.log(float32[0]); // 0 - 又回到范围内了！ +``` + +对于长度跟踪的类型化数组，如果 `buffer` 被缩小到小于 `byteOffset`，也会发生同样的事情。 + +```js +const buffer = new ArrayBuffer(8, { maxByteLength: 16 }); +const float32 = new Float32Array(buffer, 4); +// float32 是长度跟踪的，但它只从第 4 个字节开始，直到缓冲的结尾， +// 所以如果缓冲被缩小到小于 4 个字节，类型化数组就将超出范围 +buffer.resize(3); +console.log(float32.byteLength); // 0 +``` + ## 构造函数 该对象不能被直接实例化——试图去使用 `new` 构造它将会抛出 {{jsxref("TypeError")}}。 @@ -259,7 +346,7 @@ const i32 = new Int32Array(new ArrayBuffer(4)); ## 参见 - [`core-js` 中类型化数组的 polyfill](https://github.com/zloirock/core-js#ecmascript-typed-arrays) -- [JavaScript 类型化数组](/zh-CN/docs/Web/JavaScript/Typed_arrays) +- [JavaScript 类型化数组](/zh-CN/docs/Web/JavaScript/Guide/Typed_arrays) - {{jsxref("ArrayBuffer")}} - {{jsxref("DataView")}} - [TextDecoder](/zh-CN/docs/Web/API/TextDecoder)——从数字数据中解码字符串的助手 From 782266f1f05a68ea6762d07c8b9ba8654ac8f37d Mon Sep 17 00:00:00 2001 From: Shane Date: Thu, 2 Nov 2023 16:12:27 +0800 Subject: [PATCH 80/91] zh-cn: update the content of the `Why use dns-prefetch?` section (#16802) --- files/zh-cn/web/performance/dns-prefetch/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/zh-cn/web/performance/dns-prefetch/index.md b/files/zh-cn/web/performance/dns-prefetch/index.md index 721e243711025a..4e36e573c680ae 100644 --- a/files/zh-cn/web/performance/dns-prefetch/index.md +++ b/files/zh-cn/web/performance/dns-prefetch/index.md @@ -9,9 +9,9 @@ slug: Web/Performance/dns-prefetch ## 为什么要使用 dns-prefetch？ -当浏览器从（第三方）服务器请求资源时，必须先将该[跨源](/zh-CN/docs/Web/HTTP/CORS)域名解析为 IP 地址，然后浏览器才能发出请求。此过程称为 DNS 解析。DNS 缓存可以帮助减少此延迟，而 DNS 解析可以导致请求增加明显的延迟。对于打开了与许多第三方的连接的网站，此延迟可能会大大降低加载性能。 +当浏览器从（第三方）服务器请求资源时，必须先将该[跨源](/zh-CN/docs/Web/HTTP/CORS)域名解析为 IP 地址，然后浏览器才能发出请求。此过程称为 DNS 解析。虽然 DNS 缓存可以帮助减少此延迟，但 DNS 解析可能会给请求增加明显的延迟。对于打开了与许多第三方的连接的网站，此延迟可能会大大降低加载性能。 -`dns-prefetch` 可帮助开发人员掩盖 DNS 解析延迟。[HTML `` 元素](/zh-CN/docs/Web/HTML/Element/link)通过 `dns-prefetch` 的 [`rel` 属性](/zh-CN/docs/Web/HTML/Attributes/rel)值提供此功能。然后在 [href 属性](/zh-CN/docs/Web/HTML/Attributes)中指明要[跨源](/zh-CN/docs/Web/HTTP/CORS)的域名： +`dns-prefetch` 可帮助开发人员掩盖 DNS 解析延迟。[HTML `` 元素](/zh-CN/docs/Web/HTML/Element/link)通过设置 [`rel` 属性](/zh-CN/docs/Web/HTML/Attributes/rel)值为 `dns-prefetch` 提供此功能。然后在 [href 属性](/zh-CN/docs/Web/HTML/Attributes)中指明要[跨源](/zh-CN/docs/Web/HTTP/CORS)的域名： ## 语法 From db3d94cfd41dc3b70e20ab1518efc193248883d0 Mon Sep 17 00:00:00 2001 From: Dr-XYZ <121708493+Dr-XYZ@users.noreply.github.com> Date: Thu, 2 Nov 2023 18:13:29 +0800 Subject: [PATCH 81/91] [zh-tw]: translate (#16793) Co-authored-by: Dr.XYZ Co-authored-by: A1lo --- files/zh-tw/web/html/element/head/index.md | 95 ++++++++++++++++++++++ 1 file changed, 95 insertions(+) create mode 100644 files/zh-tw/web/html/element/head/index.md diff --git a/files/zh-tw/web/html/element/head/index.md b/files/zh-tw/web/html/element/head/index.md new file mode 100644 index 00000000000000..81a55b02075afa --- /dev/null +++ b/files/zh-tw/web/html/element/head/index.md @@ -0,0 +1,95 @@ +--- +title: +slug: Web/HTML/Element/head +--- + +{{HTMLSidebar}} + +[HTML](/zh-TW/docs/Web/HTML) 中的 **``** 元素包含有關文件的機器可讀信息（後設資料），例如 [標題](/zh-TW/docs/Web/HTML/Element/title)、[腳本](/zh-TW/docs/Web/HTML/Element/script)、[樣式表](/zh-TW/docs/Web/HTML/Element/style)。 + +> **備註：**`` 主要保存用於機器處理的訊息，而不是人類可讀的訊息。對於人類可見的訊息，例如頂級標題和列出的作者，請參見 {{HTMLElement("header")}} 元素。 + +## 屬性 + +這個元件屬性含有[全域屬性](/zh-TW/docs/HTML/Global_attributes)。 + +## 範例 + +```html + + + + + + Document title + + +``` + +## 技術摘要 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ 內容類型 + 無
允許內容 +

+ 如果文件是一個 {{HTMLElement("iframe")}} + srcdoc 文件，或者如果標題信息來自於更高級的協議（像是 HTML 電子郵件的主題行），則應包含零個或多個元素的後設資料內容。 +

+

+ 否則，必須包含一個或多個元素的後設資料內容，其中確實包括一個 {{HTMLElement("title")}} 元素。 +

+
標籤省略 + 如果 + <head> 元素內的第一個內容是一個元素，則開起標籤可以省略。
如果跟在 + <head> 元素後面的第一個內容不是空格字符或註釋，則關閉標籤可以省略。 +
允許的父元素作為 {{HTMLElement("html")}} 元素的第一個子元素。
允許的 ARIA 角色沒有允許的 role
DOM 介面{{domxref("HTMLHeadElement")}}
+ +## 規範 + +{{Specifications}} + +## 瀏覽器相容性 + +{{Compat}} + +## 參見 + +- 可以使用在 `` 中的元素： + + - {{HTMLElement("title")}} + - {{HTMLElement("base")}} + - {{HTMLElement("link")}} + - {{HTMLElement("style")}} + - {{HTMLElement("meta")}} + - {{HTMLElement("script")}} + - {{HTMLElement("noscript")}} + - {{HTMLElement("template")}} From 32d8fb16006e02a132ae5d15ec8828e8f62b51d3 Mon Sep 17 00:00:00 2001 From: mdn-bot <108879845+mdn-bot@users.noreply.github.com> Date: Thu, 2 Nov 2023 00:26:51 +0000 Subject: [PATCH 82/91] ja: auto-fix Markdownlint issues --- .../global_objects/typedarray/index.md | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/index.md index 08e97ae128077e..a445441dad3233 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/index.md @@ -19,19 +19,19 @@ l10n: ### TypedArray オブジェクト -| 型 | 値の範囲 | サイズ (バイト数) | 説明 | Web IDL 型 | 同等の C 型 | -| ------------------------------- | ---------------------------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------ | --------------------- | -------------------------------------------------------------------- | -| {{jsxref("Int8Array")}} | -128 から 127 | 1 | 8 ビット長、2 の補数方式の符号付き整数値 | `byte` | `int8_t` | -| {{jsxref("Uint8Array")}} | 0 から 255 | 1 | 8 ビット長、符号なし整数値 | `octet` | `uint8_t` | -| {{jsxref("Uint8ClampedArray")}} | 0 から 255 | 1 | 8 ビット長、符号なし整数値 (切り詰め) | `octet` | `uint8_t` | -| {{jsxref("Int16Array")}} | -32768 から 32767 | 2 | 16 ビット長、2 の補数方式の符号付き整数値 | `short` | `int16_t` | -| {{jsxref("Uint16Array")}} | 0 から 65535 | 2 | 16 ビット長、符号なし整数値 | `unsigned short` | `uint16_t` | -| {{jsxref("Int32Array")}} | -2147483648 から 2147483647 | 4 | 32 ビット長、2 の補数方式の符号付き整数値 | `long` | `int32_t` | -| {{jsxref("Uint32Array")}} | 0 から 4294967295 | 4 | 32 ビット長、符号なし整数値 | `unsigned long` | `uint32_t` | -| {{jsxref("Float32Array")}} | `-3.4E38` から `3.4E38` および `1.2E-38` （最小の正の数） | 4 | 32 ビット長 IEEE 方式浮動小数点数 (有効桁数 7 桁、例えば `1.234567`) | `unrestricted float` | `float` | -| {{jsxref("Float64Array")}} | `-1.8E308` から `1.8E308` および `5E-324` （最小の正の数） | 8 | 64 ビット長 IEEE 方式浮動小数点数 (有効桁数 16 桁、例えば`1.23456789012345`) | `unrestricted double` | `double` | -| {{jsxref("BigInt64Array")}} | -263 to 263 - 1 | 8 | 64 ビット長、2 の補数方式の符号付き整数値 | `bigint` | `int64_t (signed long long)` | -| {{jsxref("BigUint64Array")}} | 0 to 264 - 1 | 8 | 64 ビット長、符号なし整数値 | `bigint` | `uint64_t (unsigned long long)` | +| 型 | 値の範囲 | サイズ (バイト数) | 説明 | Web IDL 型 | 同等の C 型 | +| ------------------------------- | ---------------------------------------------------------- | ----------------- | ---------------------------------------------------------------------------- | --------------------- | ------------------------------- | +| {{jsxref("Int8Array")}} | -128 から 127 | 1 | 8 ビット長、2 の補数方式の符号付き整数値 | `byte` | `int8_t` | +| {{jsxref("Uint8Array")}} | 0 から 255 | 1 | 8 ビット長、符号なし整数値 | `octet` | `uint8_t` | +| {{jsxref("Uint8ClampedArray")}} | 0 から 255 | 1 | 8 ビット長、符号なし整数値 (切り詰め) | `octet` | `uint8_t` | +| {{jsxref("Int16Array")}} | -32768 から 32767 | 2 | 16 ビット長、2 の補数方式の符号付き整数値 | `short` | `int16_t` | +| {{jsxref("Uint16Array")}} | 0 から 65535 | 2 | 16 ビット長、符号なし整数値 | `unsigned short` | `uint16_t` | +| {{jsxref("Int32Array")}} | -2147483648 から 2147483647 | 4 | 32 ビット長、2 の補数方式の符号付き整数値 | `long` | `int32_t` | +| {{jsxref("Uint32Array")}} | 0 から 4294967295 | 4 | 32 ビット長、符号なし整数値 | `unsigned long` | `uint32_t` | +| {{jsxref("Float32Array")}} | `-3.4E38` から `3.4E38` および `1.2E-38` （最小の正の数） | 4 | 32 ビット長 IEEE 方式浮動小数点数 (有効桁数 7 桁、例えば `1.234567`) | `unrestricted float` | `float` | +| {{jsxref("Float64Array")}} | `-1.8E308` から `1.8E308` および `5E-324` （最小の正の数） | 8 | 64 ビット長 IEEE 方式浮動小数点数 (有効桁数 16 桁、例えば`1.23456789012345`) | `unrestricted double` | `double` | +| {{jsxref("BigInt64Array")}} | -263 to 263 - 1 | 8 | 64 ビット長、2 の補数方式の符号付き整数値 | `bigint` | `int64_t (signed long long)` | +| {{jsxref("BigUint64Array")}} | 0 to 264 - 1 | 8 | 64 ビット長、符号なし整数値 | `bigint` | `uint64_t (unsigned long long)` | ### サイズ変更可能なバッファー表示時の動作について From 2362d8c6f6af7a830185ef6fe927a73c88319043 Mon Sep 17 00:00:00 2001 From: Jason Lam Date: Fri, 3 Nov 2023 08:40:52 +0800 Subject: [PATCH 83/91] [zh-cn]: update the translation of WeakSet overview (#16803) Co-authored-by: A1lo --- .../reference/global_objects/weakset/index.md | 33 ++++++++++++------- 1 file changed, 21 insertions(+), 12 deletions(-) diff --git a/files/zh-cn/web/javascript/reference/global_objects/weakset/index.md b/files/zh-cn/web/javascript/reference/global_objects/weakset/index.md index 1fef5b69176874..0ddcaf14b94573 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/weakset/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/weakset/index.md @@ -5,18 +5,18 @@ slug: Web/JavaScript/Reference/Global_Objects/WeakSet {{JSRef}} -**`WeakSet`** 对象允许你将弱保持*对象*存储在一个集合中。 +**`WeakSet`** 是可被垃圾回收的值的集合，包括对象和[非全局注册的符号](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol#全局共享的_symbol)。`WeakSet` 中的值只能出现一次。它在 `WeakSet` 的集合中是唯一的。 ## 描述 -`WeakSet` 对象是一些对象值的集合。且其与 {{jsxref("Set")}} 类似，`WeakSet` 中的每个对象值都只能出现一次。在 `WeakSet` 的集合中，所有对象都是唯一的。 +WeakSet 中的值一定是可被垃圾回收的值。大多数{{Glossary("Primitive", "原始数据类型")}}可以被任意地创建，并且没有生命周期，所以它们不能被存储。对象和[非全局注册的符号](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol#全局共享的_symbol)可以被存储，因为它们是可被垃圾回收的值。 它和 {{jsxref("Set")}} 对象的主要区别有： -- `WeakSet` **只能是对象**的集合，而不能像 {{jsxref("Set")}} 那样，可以是任何类型的任意值。 -- `WeakSet` 持*弱引用*：集合中对象的引用为*弱*引用。如果没有其他的对 `WeakSet` 中对象的引用，那么这些对象会被当成垃圾回收掉。 +- `WeakSet` **只能是对象和符号**的集合，它不能像 {{jsxref("Set")}} 那样包含任何类型的任意值。 +- `WeakSet` 持*弱引用*：`WeakSet` 中对象的引用为*弱*引用。如果没有其他的对 `WeakSet` 中对象的引用存在，那么这些对象会被垃圾回收。 -> **备注：** 这也意味着 `WeakSet` 中没有存储当前对象的列表。正因为这样，`WeakSet` 是不可枚举的。 + > **备注：** 这也意味着集合中没有存储当前值的列表。`WeakSet` 是不可枚举的。 ### 用例：检测循环引用 @@ -25,7 +25,7 @@ slug: Web/JavaScript/Reference/Global_Objects/WeakSet 为此，`WeakSet` 非常适合处理这种情况： ```js -// 对 传入的 subject 对象 内部存储的所有内容执行回调 +// 对传入的 subject 对象内部存储的所有内容执行回调 function execRecursively(fn, subject, _refs = new WeakSet()) { // 避免无限递归 if (_refs.has(subject)) { @@ -61,14 +61,23 @@ execRecursively((obj) => console.log(obj), foo); - {{jsxref("WeakSet/WeakSet", "WeakSet()")}} - : 创建一个新的 `WeakSet` 对象。 +## 实例属性 + +这些属性在 `WeakSet.prototype` 上定义，并且由所有 `WeakSet` 实例所共享。 + +- {{jsxref("Object/constructor", "WeakSet.prototype.constructor")}} + - : 创建了该实例对象的构造函数。对于 `WeakSet` 实例，初始值是 {{jsxref("WeakSet/WeakSet", "WeakSet")}} 构造函数。 +- `WeakSet.prototype[@@toStringTag]` + - : [`@@toStringTag`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) 属性的初始值是字符串 `"WeakSet"`。该属性被 {{jsxref("Object.prototype.toString()")}} 所使用。 + ## 实例方法 -- {{jsxref("WeakSet.add", "WeakSet.prototype.add(value)")}} - - : 将 `value` 添加到 `WeakSet` 对象最后一个元素的后面。 -- {{jsxref("WeakSet.delete", "WeakSet.prototype.delete(value)")}} +- {{jsxref("WeakSet.prototype.add()")}} + - : 将 `value` 追加到 `WeakSet` 对象。 +- {{jsxref("WeakSet.prototype.delete()")}} - : 从 `WeakSet` 中移除 `value`。此后调用 `WeakSet.prototype.has(value)` 将返回 `false`。 -- {{jsxref("WeakSet.has", "WeakSet.prototype.has(value)")}} - - : 返回一个布尔值，表示 `value` 是否存在于 `WeakSet` 对象中。 +- {{jsxref("WeakSet.prototype.has()")}} + - : 返回一个表示 `value` 是否存在于 `WeakSet` 对象中的布尔值。 ## 示例 @@ -90,7 +99,7 @@ ws.has(foo); // false，foo 对象已经被删除了 ws.has(bar); // true，bar 依然存在 ``` -注意，`foo !== bar`。尽管它们是相似的对象，但是它们不是**_同一个对象_**。因此，它们都可以被加入到 set 中。 +注意，`foo !== bar`。尽管它们是相似的对象，_但是它们不是**同一个对象**_。因此，它们都可以被加入到集合中。 ## 规范 From 7b86a24299397f98e9289779504f6ce3b8f57062 Mon Sep 17 00:00:00 2001 From: mdn-bot <108879845+mdn-bot@users.noreply.github.com> Date: Fri, 3 Nov 2023 01:25:16 +0000 Subject: [PATCH 84/91] ja: sync translated content --- files/ja/_redirects.txt | 28 ++++---- files/ja/_wikihistory.json | 68 +++++++++---------- .../availleft/index.md | 3 +- .../availtop/index.md | 3 +- .../{screen => screendetailed}/left/index.md | 3 +- .../{screen => screendetailed}/top/index.md | 3 +- 6 files changed, 58 insertions(+), 50 deletions(-) rename files/ja/web/api/{screen => screendetailed}/availleft/index.md (94%) rename files/ja/web/api/{screen => screendetailed}/availtop/index.md (87%) rename files/ja/web/api/{screen => screendetailed}/left/index.md (81%) rename files/ja/web/api/{screen => screendetailed}/top/index.md (83%) diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index d87a2a01366c87..6fab820d5fff73 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -993,14 +993,14 @@ /ja/docs/DOM/window.resizeTo /ja/docs/Web/API/Window/resizeTo /ja/docs/DOM/window.screen /ja/docs/Web/API/Window/screen /ja/docs/DOM/window.screen.availHeight /ja/docs/Web/API/Screen/availHeight -/ja/docs/DOM/window.screen.availLeft /ja/docs/Web/API/Screen/availLeft -/ja/docs/DOM/window.screen.availTop /ja/docs/Web/API/Screen/availTop +/ja/docs/DOM/window.screen.availLeft /ja/docs/Web/API/ScreenDetailed/availLeft +/ja/docs/DOM/window.screen.availTop /ja/docs/Web/API/ScreenDetailed/availTop /ja/docs/DOM/window.screen.availWidth /ja/docs/Web/API/Screen/availWidth /ja/docs/DOM/window.screen.colorDepth /ja/docs/Web/API/Screen/colorDepth /ja/docs/DOM/window.screen.height /ja/docs/Web/API/Screen/height -/ja/docs/DOM/window.screen.left /ja/docs/Web/API/Screen/left +/ja/docs/DOM/window.screen.left /ja/docs/Web/API/ScreenDetailed/left /ja/docs/DOM/window.screen.pixelDepth /ja/docs/Web/API/Screen/pixelDepth -/ja/docs/DOM/window.screen.top /ja/docs/Web/API/Screen/top +/ja/docs/DOM/window.screen.top /ja/docs/Web/API/ScreenDetailed/top /ja/docs/DOM/window.screen.width /ja/docs/Web/API/Screen/width /ja/docs/DOM/window.screenX /ja/docs/Web/API/Window/screenX /ja/docs/DOM/window.screenY /ja/docs/Web/API/Window/screenY @@ -1203,14 +1203,14 @@ /ja/docs/DOM:window.resizeTo /ja/docs/Web/API/Window/resizeTo /ja/docs/DOM:window.screen /ja/docs/Web/API/Window/screen /ja/docs/DOM:window.screen.availHeight /ja/docs/Web/API/Screen/availHeight -/ja/docs/DOM:window.screen.availLeft /ja/docs/Web/API/Screen/availLeft -/ja/docs/DOM:window.screen.availTop /ja/docs/Web/API/Screen/availTop +/ja/docs/DOM:window.screen.availLeft /ja/docs/Web/API/ScreenDetailed/availLeft +/ja/docs/DOM:window.screen.availTop /ja/docs/Web/API/ScreenDetailed/availTop /ja/docs/DOM:window.screen.availWidth /ja/docs/Web/API/Screen/availWidth /ja/docs/DOM:window.screen.colorDepth /ja/docs/Web/API/Screen/colorDepth /ja/docs/DOM:window.screen.height /ja/docs/Web/API/Screen/height -/ja/docs/DOM:window.screen.left /ja/docs/Web/API/Screen/left +/ja/docs/DOM:window.screen.left /ja/docs/Web/API/ScreenDetailed/left /ja/docs/DOM:window.screen.pixelDepth /ja/docs/Web/API/Screen/pixelDepth -/ja/docs/DOM:window.screen.top /ja/docs/Web/API/Screen/top +/ja/docs/DOM:window.screen.top /ja/docs/Web/API/ScreenDetailed/top /ja/docs/DOM:window.screen.width /ja/docs/Web/API/Screen/width /ja/docs/DOM:window.screenX /ja/docs/Web/API/Window/screenX /ja/docs/DOM:window.screenY /ja/docs/Web/API/Window/screenY @@ -3048,7 +3048,11 @@ /ja/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API /ja/docs/Web/API/Performance_API/Resource_timing /ja/docs/Web/API/Response/error /ja/docs/Web/API/Response/error_static /ja/docs/Web/API/Response/redirect /ja/docs/Web/API/Response/redirect_static +/ja/docs/Web/API/Screen/availLeft /ja/docs/Web/API/ScreenDetailed/availLeft +/ja/docs/Web/API/Screen/availTop /ja/docs/Web/API/ScreenDetailed/availTop +/ja/docs/Web/API/Screen/left /ja/docs/Web/API/ScreenDetailed/left /ja/docs/Web/API/Screen/onorientationchange /ja/docs/Web/API/Screen/orientationchange_event +/ja/docs/Web/API/Screen/top /ja/docs/Web/API/ScreenDetailed/top /ja/docs/Web/API/ScrollToOptions /ja/docs/Web/API/Window/scroll /ja/docs/Web/API/ServiceWorkerContainer/oncontrollerchange /ja/docs/Web/API/ServiceWorkerContainer/controllerchange_event /ja/docs/Web/API/ServiceWorkerContainer/onerror /ja/docs/Web/API/ServiceWorkerContainer/error_event @@ -3415,14 +3419,14 @@ /ja/docs/Web/API/window.resizeTo /ja/docs/Web/API/Window/resizeTo /ja/docs/Web/API/window.screen /ja/docs/Web/API/Window/screen /ja/docs/Web/API/window.screen.availHeight /ja/docs/Web/API/Screen/availHeight -/ja/docs/Web/API/window.screen.availLeft /ja/docs/Web/API/Screen/availLeft -/ja/docs/Web/API/window.screen.availTop /ja/docs/Web/API/Screen/availTop +/ja/docs/Web/API/window.screen.availLeft /ja/docs/Web/API/ScreenDetailed/availLeft +/ja/docs/Web/API/window.screen.availTop /ja/docs/Web/API/ScreenDetailed/availTop /ja/docs/Web/API/window.screen.availWidth /ja/docs/Web/API/Screen/availWidth /ja/docs/Web/API/window.screen.colorDepth /ja/docs/Web/API/Screen/colorDepth /ja/docs/Web/API/window.screen.height /ja/docs/Web/API/Screen/height -/ja/docs/Web/API/window.screen.left /ja/docs/Web/API/Screen/left +/ja/docs/Web/API/window.screen.left /ja/docs/Web/API/ScreenDetailed/left /ja/docs/Web/API/window.screen.pixelDepth /ja/docs/Web/API/Screen/pixelDepth -/ja/docs/Web/API/window.screen.top /ja/docs/Web/API/Screen/top +/ja/docs/Web/API/window.screen.top /ja/docs/Web/API/ScreenDetailed/top /ja/docs/Web/API/window.screen.width /ja/docs/Web/API/Screen/width /ja/docs/Web/API/window.screenX /ja/docs/Web/API/Window/screenX /ja/docs/Web/API/window.screenY /ja/docs/Web/API/Window/screenY diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 9946100bc9c154..592bb730878670 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -12134,27 +12134,6 @@ "modified": "2020-10-15T21:16:25.668Z", "contributors": ["mfuji09", "fscholz", "soumya", "ethertank", "Potappo"] }, - "Web/API/Screen/availLeft": { - "modified": "2020-10-15T21:16:27.232Z", - "contributors": [ - "mfuji09", - "wbamberg", - "fscholz", - "khalid32", - "ethertank", - "Potappo" - ] - }, - "Web/API/Screen/availTop": { - "modified": "2020-10-15T21:16:28.901Z", - "contributors": [ - "mfuji09", - "fscholz", - "basemnassar11", - "ethertank", - "Potappo" - ] - }, "Web/API/Screen/availWidth": { "modified": "2019-03-23T23:50:19.480Z", "contributors": ["fscholz", "jsx", "ethertank", "Potappo"] @@ -12167,10 +12146,6 @@ "modified": "2020-10-15T21:16:36.031Z", "contributors": ["mfuji09", "fscholz", "khalid32", "ethertank", "Potappo"] }, - "Web/API/Screen/left": { - "modified": "2020-10-15T21:16:25.501Z", - "contributors": ["mfuji09", "fscholz", "jsx", "ethertank", "Potappo"] - }, "Web/API/Screen/lockOrientation": { "modified": "2020-10-15T21:52:16.220Z", "contributors": ["mfuji09", "shuuji3"] @@ -12201,23 +12176,48 @@ "Potappo" ] }, - "Web/API/Screen/top": { - "modified": "2020-10-15T21:16:26.905Z", + "Web/API/Screen/unlockOrientation": { + "modified": "2020-10-15T21:52:16.003Z", + "contributors": ["mfuji09", "shuuji3"] + }, + "Web/API/Screen/width": { + "modified": "2020-10-15T21:16:26.560Z", + "contributors": ["mfuji09", "fscholz", "khalid32", "ethertank", "Potappo"] + }, + "Web/API/ScreenDetailed/availLeft": { + "modified": "2020-10-15T21:16:27.232Z", "contributors": [ "mfuji09", + "wbamberg", "fscholz", - "AshfaqHossain", + "khalid32", "ethertank", "Potappo" ] }, - "Web/API/Screen/unlockOrientation": { - "modified": "2020-10-15T21:52:16.003Z", - "contributors": ["mfuji09", "shuuji3"] + "Web/API/ScreenDetailed/availTop": { + "modified": "2020-10-15T21:16:28.901Z", + "contributors": [ + "mfuji09", + "fscholz", + "basemnassar11", + "ethertank", + "Potappo" + ] }, - "Web/API/Screen/width": { - "modified": "2020-10-15T21:16:26.560Z", - "contributors": ["mfuji09", "fscholz", "khalid32", "ethertank", "Potappo"] + "Web/API/ScreenDetailed/left": { + "modified": "2020-10-15T21:16:25.501Z", + "contributors": ["mfuji09", "fscholz", "jsx", "ethertank", "Potappo"] + }, + "Web/API/ScreenDetailed/top": { + "modified": "2020-10-15T21:16:26.905Z", + "contributors": [ + "mfuji09", + "fscholz", + "AshfaqHossain", + "ethertank", + "Potappo" + ] }, "Web/API/ScriptProcessorNode": { "modified": "2019-03-23T22:35:37.748Z", diff --git a/files/ja/web/api/screen/availleft/index.md b/files/ja/web/api/screendetailed/availleft/index.md similarity index 94% rename from files/ja/web/api/screen/availleft/index.md rename to files/ja/web/api/screendetailed/availleft/index.md index 7c9365c8626f59..975ffc0f3304bd 100644 --- a/files/ja/web/api/screen/availleft/index.md +++ b/files/ja/web/api/screendetailed/availleft/index.md @@ -1,6 +1,7 @@ --- title: Screen.availLeft -slug: Web/API/Screen/availLeft +slug: Web/API/ScreenDetailed/availLeft +original_slug: Web/API/Screen/availLeft --- {{APIRef("CSSOM")}}{{Non-standard_Header}} diff --git a/files/ja/web/api/screen/availtop/index.md b/files/ja/web/api/screendetailed/availtop/index.md similarity index 87% rename from files/ja/web/api/screen/availtop/index.md rename to files/ja/web/api/screendetailed/availtop/index.md index 22a61099b9312e..6db3b43cbf88f0 100644 --- a/files/ja/web/api/screen/availtop/index.md +++ b/files/ja/web/api/screendetailed/availtop/index.md @@ -1,6 +1,7 @@ --- title: Screen.availTop -slug: Web/API/Screen/availTop +slug: Web/API/ScreenDetailed/availTop +original_slug: Web/API/Screen/availTop --- {{APIRef("CSSOM")}}{{Non-standard_Header}} diff --git a/files/ja/web/api/screen/left/index.md b/files/ja/web/api/screendetailed/left/index.md similarity index 81% rename from files/ja/web/api/screen/left/index.md rename to files/ja/web/api/screendetailed/left/index.md index 40f92dbe3e7622..ccb5e030683d3d 100644 --- a/files/ja/web/api/screen/left/index.md +++ b/files/ja/web/api/screendetailed/left/index.md @@ -1,6 +1,7 @@ --- title: Screen.left -slug: Web/API/Screen/left +slug: Web/API/ScreenDetailed/left +original_slug: Web/API/Screen/left --- {{APIRef("CSSOM")}}{{Non-standard_Header}} diff --git a/files/ja/web/api/screen/top/index.md b/files/ja/web/api/screendetailed/top/index.md similarity index 83% rename from files/ja/web/api/screen/top/index.md rename to files/ja/web/api/screendetailed/top/index.md index 788f03c62fabb6..ae65fc42b2519b 100644 --- a/files/ja/web/api/screen/top/index.md +++ b/files/ja/web/api/screendetailed/top/index.md @@ -1,6 +1,7 @@ --- title: Screen.top -slug: Web/API/Screen/top +slug: Web/API/ScreenDetailed/top +original_slug: Web/API/Screen/top --- {{APIRef("CSSOM")}}{{deprecated_header}}{{Non-standard_Header}} From cbacb6d56c1b6e2cf695cdda436f3bf527d02f5c Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Fri, 3 Nov 2023 03:47:09 +0100 Subject: [PATCH 85/91] [zh-cn] sync translated content (#16810) --- files/zh-cn/_redirects.txt | 6 ++++-- files/zh-cn/_wikihistory.json | 16 ++++++++-------- .../availleft/index.md | 3 ++- .../{screen => screendetailed}/availtop/index.md | 3 ++- 4 files changed, 16 insertions(+), 12 deletions(-) rename files/zh-cn/web/api/{screen => screendetailed}/availleft/index.md (93%) rename files/zh-cn/web/api/{screen => screendetailed}/availtop/index.md (86%) diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index 39eb06181418f1..b4812509ea1aa6 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -1730,13 +1730,15 @@ /zh-CN/docs/Web/API/SVGMatrix /zh-CN/docs/Web/API/DOMMatrix /zh-CN/docs/Web/API/SVGPathElement/getTotalLength /zh-CN/docs/Web/API/SVGGeometryElement/getTotalLength /zh-CN/docs/Web/API/Screen.availHeight /zh-CN/docs/Web/API/Screen/availHeight -/zh-CN/docs/Web/API/Screen.availLeft /zh-CN/docs/Web/API/Screen/availLeft -/zh-CN/docs/Web/API/Screen.availTop /zh-CN/docs/Web/API/Screen/availTop +/zh-CN/docs/Web/API/Screen.availLeft /zh-CN/docs/Web/API/ScreenDetailed/availLeft +/zh-CN/docs/Web/API/Screen.availTop /zh-CN/docs/Web/API/ScreenDetailed/availTop /zh-CN/docs/Web/API/Screen.availWidth /zh-CN/docs/Web/API/Screen/availWidth /zh-CN/docs/Web/API/Screen.colorDepth /zh-CN/docs/Web/API/Screen/colorDepth /zh-CN/docs/Web/API/Screen.height /zh-CN/docs/Web/API/Screen/height /zh-CN/docs/Web/API/Screen.pixelDepth /zh-CN/docs/Web/API/Screen/pixelDepth /zh-CN/docs/Web/API/Screen.width /zh-CN/docs/Web/API/Screen/width +/zh-CN/docs/Web/API/Screen/availLeft /zh-CN/docs/Web/API/ScreenDetailed/availLeft +/zh-CN/docs/Web/API/Screen/availTop /zh-CN/docs/Web/API/ScreenDetailed/availTop /zh-CN/docs/Web/API/ScrollToOptions /zh-CN/docs/Web/API/Window/scroll /zh-CN/docs/Web/API/Selection.addRange /zh-CN/docs/Web/API/Selection/addRange /zh-CN/docs/Web/API/Selection.anchorNode /zh-CN/docs/Web/API/Selection/anchorNode diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index f3d3568c18b471..39490efaae8cdf 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -13176,14 +13176,6 @@ "modified": "2019-03-23T23:10:33.122Z", "contributors": ["teoli", "AlexChao"] }, - "Web/API/Screen/availLeft": { - "modified": "2019-03-23T23:10:32.405Z", - "contributors": ["teoli", "khalid32", "AlexChao"] - }, - "Web/API/Screen/availTop": { - "modified": "2019-03-23T23:10:26.366Z", - "contributors": ["teoli", "khalid32", "AlexChao"] - }, "Web/API/Screen/availWidth": { "modified": "2019-03-23T23:10:30.530Z", "contributors": ["teoli", "AlexChao"] @@ -13212,6 +13204,14 @@ "modified": "2019-03-23T23:10:29.689Z", "contributors": ["teoli", "AlexChao"] }, + "Web/API/ScreenDetailed/availLeft": { + "modified": "2019-03-23T23:10:32.405Z", + "contributors": ["teoli", "khalid32", "AlexChao"] + }, + "Web/API/ScreenDetailed/availTop": { + "modified": "2019-03-23T23:10:26.366Z", + "contributors": ["teoli", "khalid32", "AlexChao"] + }, "Web/API/Screen_Capture_API": { "modified": "2020-10-15T22:30:44.340Z", "contributors": ["hzy", "Sheppy"] diff --git a/files/zh-cn/web/api/screen/availleft/index.md b/files/zh-cn/web/api/screendetailed/availleft/index.md similarity index 93% rename from files/zh-cn/web/api/screen/availleft/index.md rename to files/zh-cn/web/api/screendetailed/availleft/index.md index 834f9266479dd3..c541a75bffc7ae 100644 --- a/files/zh-cn/web/api/screen/availleft/index.md +++ b/files/zh-cn/web/api/screendetailed/availleft/index.md @@ -1,6 +1,7 @@ --- title: Screen.availLeft -slug: Web/API/Screen/availLeft +slug: Web/API/ScreenDetailed/availLeft +original_slug: Web/API/Screen/availLeft --- {{ ApiRef() }} diff --git a/files/zh-cn/web/api/screen/availtop/index.md b/files/zh-cn/web/api/screendetailed/availtop/index.md similarity index 86% rename from files/zh-cn/web/api/screen/availtop/index.md rename to files/zh-cn/web/api/screendetailed/availtop/index.md index 9d5dae56918393..b192547f5f0921 100644 --- a/files/zh-cn/web/api/screen/availtop/index.md +++ b/files/zh-cn/web/api/screendetailed/availtop/index.md @@ -1,6 +1,7 @@ --- title: Screen.availTop -slug: Web/API/Screen/availTop +slug: Web/API/ScreenDetailed/availTop +original_slug: Web/API/Screen/availTop --- {{ ApiRef() }} From 87f1da4d86a7dba1a7f4ca1983d5784b733d3ca9 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Fri, 3 Nov 2023 12:02:04 +0100 Subject: [PATCH 86/91] fr: Initial translation for CycleTracker : JS functionality (#16727) * Initial translation * Fix typo --------- Co-authored-by: tristantheb --- .../javascript_functionality/index.md | 349 ++++++++++++++++++ 1 file changed, 349 insertions(+) create mode 100644 files/fr/web/progressive_web_apps/tutorials/cycletracker/javascript_functionality/index.md diff --git a/files/fr/web/progressive_web_apps/tutorials/cycletracker/javascript_functionality/index.md b/files/fr/web/progressive_web_apps/tutorials/cycletracker/javascript_functionality/index.md new file mode 100644 index 00000000000000..cae22cdf553331 --- /dev/null +++ b/files/fr/web/progressive_web_apps/tutorials/cycletracker/javascript_functionality/index.md @@ -0,0 +1,349 @@ +--- +title: "CycleTracker : fonctionnalités JavaScript" +short-title: Fonctionnalités JavaScript +slug: Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality +l10n: + sourceCommit: 3c0315d7898d2a5bc21784002c9cdc9dddcf559d +--- + +{{PWASidebar}} + +{{PreviousMenuNext("Web/Progressive_web_apps/Tutorials/CycleTracker/Secure_connection", "Web/Progressive_web_apps/Tutorials/CycleTracker", "Web/Progressive_web_apps/Tutorials/CycleTracker")}} + +Dans la section précédente, nous avons écrit le code HTML et CSS de CycleTracker, et ainsi obtenu une version statique de notre application web. Dans cette section, nous écrirons le code JavaScript qui permettra de convertir le HTML statique en une application web fonctionnelle. + +Si ce n'est pas déjà fait, téléchargez [le fichier HTML](https://github.com/mdn/pwa-examples/tree/master/cycletracker/javascript_functionality/index.html) et [le fichier CSS](https://github.com/mdn/pwa-examples/tree/master/cycletracker/javascript_functionality/style.css), et enregistrez-les sur votre ordinateur avec les noms `index.html` et `styles.css`, respectivement. + +La dernière ligne du fichier HTML appelle le fichier JavaScript `app.js`. C'est le script que nous allons créer dans ce chapitre. Dans cette leçon, nous allons écrire le code JavaScript exécuté par le navigateur, qui est responsable de la capture des données saisies dans le formulaire, de l'enregistrement local des données et de la complétion de la zone indiquant les cycles précédents. + +À la fin de ce chapitre, vous aurez une application pleinement fonctionnelle. Dans les chapitres suivants, nous améliorerons progressivement l'application afin que celle-ci devienne une PWA qui puisse être installée et qui fonctionne hors-ligne. + +## Plan d'action JavaScript + +Lorsqu'une personne visite la page, nous vérifions s'il existe déjà des données dans le stockage local. À la première visite, il n'y aura pas de données. Lorsqu'une personne sélectionne deux dates et soumet le formulaire pour la première fois, il faut : + +1. Créer un titre "`

Cycles antérieurs

`" +2. Créer une liste non-ordonnée avec un élément [`
    `](/fr/docs/Web/HTML/Element/ul) +3. Remplir l'élément `
      ` avec un seul élément [`
    • `](/fr/docs/Web/HTML/Element/li) qui contient les informations du cycle en question +4. Sauvegarder les données dans le stockage local + +Pour les saisies ultérieures, il faut : + +1. Ajouter le nouveau cycle menstruel à la liste actuelle +2. Trier la liste par ordre chronologique +3. Remplir à nouveau la liste `
        ` avec cette nouvelle liste, en utilisant un élément `
      • ` par cycle +4. Ajouter les données dans le stockage local + +Les personnes ayant déjà utilisé l'application auront des données existantes dans le stockage local. Lorsqu'elles reviennent sur la page web en utilisant le même navigateur depuis le même appareil, il faut : + +1. Récupérer les données enregistrées dans le stockage local +2. Créer un titre "`

        Cycles antérieurs

        `" +3. Créer une liste non-ordonnée avec un élément [`
          `](/fr/docs/Web/HTML/Element/ul) +4. Remplir l'élément `
            ` avec un élément [`
          • `](/fr/docs/Web/HTML/Element/li) pour chaque cycle menstruel enregistré dans le stockage local. + +Cette application a uniquement pour objectif d'enseigner les fondamentaux pour convertir une application web en PWA. Aussi, elle ne contient pas les fonctionnalités nécessaires à une application réelle comme la validation du formulaire, la vérification des erreurs ou encore les fonctionnalités pour éditer ou supprimer un enregistrement. N'hésitez pas à ajouter ces fonctionnalités et à adapter les exemples donnés pour créer l'application qui correspond à vos objectifs d'apprentissage et à vos besoins. + +## Envoi du formulaire + +La page contient un formulaire, l'élément HTML [`
            `](/fr/docs/Web/HTML/Element/form), doté de sélecteurs de date pour saisir les dates de début et de fin de chaque cycle menstruel. Les sélecteurs de date sont des éléments HTML [``](/fr/docs/Web/HTML/Element/input) de type [`date`](/fr/docs/Web/HTML/Element/input/date), dotés respectivement des [identifiants (`id`)](/fr/docs/Web/HTML/Global_attributes/id) `start-date` et `end-date`. + +Le formulaire n'a pas de méthode ou d'action déclarée dans le HTML. À la place, nous ajoutons un gestionnaire d'évènement au formulaire à l'aide de la méthode [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener). Lorsqu'on tente d'envoyer le formulaire, on empêche l'envoi par défaut du formulaire, on enregistre les données du nouveau cycle menstruel et on affiche ce cycle ainsi que les précédents, puis on réinitialise le formulaire. + +```js +// On crée des constantes pour le formulaire et les contrôles associés +const elemFormNouveauCycle = document.getElementsByTagName("form")[0]; +const elemChampDateDebut = document.getElementById("start-date"); +const elemChampDateFin = document.getElementById("end-date"); + +// On écoute l'évènement pour l'envoi du formulaire. +elemFormNouveauCycle.addEventListener("submit", (event) => { + // On empêche le formulaire d'être envoyé au serveur + // car tout se fait côté client. + event.preventDefault(); + + // On récupère les dates de début et de fin + // à partir du formulaire. + const dateDebut = elemChampDateDebut.value; + const dateFin = elemChampDateFin.value; + + // On vérifie si les dates sont invalides + if (verifierDatesInvalides(dateDebut, dateFin)) { + // Si c'est le cas, on s'arrête là. + return; + } + + // On enregistre le nouveau cycle dans l'espace de stockage + // côté client + enregistrerNouveauCycle(dateDebut, dateFin); + + // On rafraîchit l'interface. + afficherCyclesAnterieurs(); + + // On réinitialise le formulaire. + elemFormNouveauCycle.reset(); +}); +``` + +Après avoir empêché l'envoi du formulaire au serveur grâce à [`preventDefault()`](/fr/docs/Web/API/Event/preventDefault), on : + +1. [Valide les données saisies](#validation_des_données_saisies) et on quitte la fonction si elles sont invalides, +2. Enregistre le nouveau cycle en [récupérant, analysant, ajoutant, triant, transformant en texte, puis en triant à nouveau](#récupérer_ajouter_trier_et_réengistrer_les_données) les données dans le stockage local, +3. [Affiche les données du formulaire](#afficher_les_données_à_lécran) ainsi que celles des cycles menstruels passés avec un titre de section, +4. Réinitialise le formulaire grâce à la méthode [`HTMLFormElement.reset()`](/fr/docs/Web/API/HTMLFormElement/reset). + +### Validation des données saisies + +On vérifie si les dates sont invalides de façon minimale. On s'assure qu'aucune date ne vaut `null` (ce qui ne devrait pas avoir lieu grâce à l'attribut HTML `required`). On vérifie aussi si la date de début n'est pas postérieure à la date de fin. S'il y a une erreur, on réinitialise le formulaire. + +```js +function verifierDatesInvalides(dateDebut, dateFin) { + // On vérifie que la date de fin arrive après la date de début + // et qu'aucune n'est nulle. + if (!dateDebut || !dateFin || dateDebut > dateFin) { + // Pour améliorer la validation, on pourrait : + // 1. Ajouter un message d'erreur pour chaque type d'erreur + // 2. Transmettre ces erreurs aux outils d'assistance + // 3. Déplacer le focus à l'emplacement de l'erreur + // Pour notre exemple actuel, on réinitialise simplement + // le formulaire si au moins une des dates est invalide + elemFormNouveauCycle.reset(); + // Si les dates sont invalides, on renvoie true + return true; + } + // Sinon + return false; +} +``` + +Dans une version plus robuste de cette application, il faudrait aussi inclure des messages d'erreur explicatifs pour indiquer où l'erreur se situe. Une application correcte indiquerait l'erreur, puis placerait le focus sur le contrôle de formulaire concerné, tout en utilisant [les régions dynamiques ARIA](/fr/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) pour communiquer ces informations aux outils d'assistance. + +## Stockage local + +On utilise [l'API Web Storage](/fr/docs/Web/API/Web_Storage_API), et plus précisément [`window.localStorage`](/fr/docs/Web/API/Window/localStorage) pour enregistrer les paires de dates de début et de fin dans un objet JSON en chaîne de caractères dans l'espace de stockage local. + +[Le stockage local (local storage)](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage#stocker_des_données_simples_—_web_storage) a quelques limitations, mais il suffira aux besoins de notre application. Nous utilisons ici le stockage local pour avoir une application et qui fonctionne uniquement côté client. Cela signifie que les données seront uniquement stockées dans un navigateur d'un appareil donné. Toute suppression des données du navigateur entraînera la perte des cycles enregistrés localement. On peut voir ce point comme une limitation ou comme un avantage pour ce cas précis : les données des cycles menstruels sont personnelles et on pourra se soucier de la vie privée et de la diffusion de ces données sur d'autres appareils ou navigateurs. + +Pour une application plus robuste, on pourra employer d'autres outils [de stockage côté client](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage) comme [IndexedDB](/fr/docs/Web/API/IndexedDB_API/Using_IndexedDB) (IDB) et les service workers (que nous verrons plus tard) qui ont de meilleures performances. + +Parmi les limites de `localStorage`, il y a : + +- Un stockage limité des données + - : `localStorage` est limité à 5Mo de données par origine. Dans notre cas, c'est largement suffisant. +- Seules des chaînes de caractères peuvent y être stockées + - : `localStorage` enregistre des données avec une clé qui est une chaîne de caractères et une valeur correspondante qui est aussi une chaîne de caractères. Nos dates de début et de fin seront enregistrées sous la forme d'un objet JSON passé en chaîne de caractères. Pour des données plus complexes, un mécanisme de stockage plus robuste comme IndexedDB sera plus utile. +- Un impact sur les performances + - : Récupérer ou écrire des données dans le stockage local se fait de façon synchrone et sur le fil d'exécution principal. Lorsque le fil d'exécution principal est occupé, les applications ne répondent pas et apparaissent comme figées. Étant donné la nature élémentaire de cette application, on néglige cet impact. +- La disponibilité restreinte au fil d'exécution principal + - : En complément des problèmes de performance liés à l'exécution sur le thread principal, les service workers n'ont pas accès à ce contexte. Autrement dit, un service worker ne peut pas récupérer ou écrire directement des données dans le stockage local. + +### Récupérer, ajouter, trier, et réengistrer les données + +En utilisant le stockage local avec une seule chaîne de caractères, on : + +1. Récupère les données stockées en JSON +2. Analyse ces éventuelles données +3. Ajoute la nouvelle paire de dates au tableau existant +4. Trie les dates +5. Convertit de nouveau l'objet en chaîne de caractères +6. Enregistre cette chaîne de caractères dans `localStorage`. + +Pour cela, on crée quelques fonctions : + +```js +// On ajoute une clé de stockage comme une constante +// globale de l'application +const CLE_STOCKAGE = "period-tracker"; + +function enregistrerNouveauCycle(dateDebut, dateFin) { + // On récupère les données du stockage + const cycles = recupererCyclesEnregistres(); + + // On ajoute à la fin du tableau un objet correspondant + // au nouveau cycle. + cycles.push({ dateDebut, dateFin }); + + // On trie le tableau afin que les cycles soient triés + // par date de début, du plus récent jusqu'au plus + // ancien. + cycles.sort((a, b) => { + return new Date(b.dateDebut) - new Date(a.dateDebut); + }); + + // On enregistre le tableau mis à jour dans le stockage. + window.localStorage.setItem(CLE_STOCKAGE, JSON.stringify(cycles)); +} + +function recupererCyclesEnregistres() { + // On récupère la chaîne de caractères qui représente + // les données des cycles depuis localStorage + const donnees = window.localStorage.getItem(CLE_STOCKAGE); + + // Si aucun cycle n'était enregistré, on prend un + // tableau vide par défaut. Sinon, on renvoie les données + // enregistrées après une extraction du format JSON + const cycles = donnees ? JSON.parse(donnees) : []; + + return cycles; +} +``` + +## Afficher les données à l'écran + +La dernière étape de notre application consiste à afficher la liste des cycles antérieurs à l'écran avec un titre. + +Dans notre document HTML, on a ajouté un emplacement `
            ` qui servira à contenir ce titre et la liste des cycles antérieurs. + +Ajoutons cet élément conteneur en haut du script. + +```js +const conteneurCyclesAnterieurs = document.getElementById("past-periods"); +``` + +On récupère la chaîne de caractères convertie des cycles passés ou un tableau vide. Si le tableau est vide, on sort de la fonction. S'il y a des cycles antérieurs, on réinitialise le contenu du conteneur. On crée ensuite un titre et une liste non-ordonnée, puis on boucle sur les cycles passés et on ajoute un élément de liste pour chacun, avec les dates de début et de fin mises en forme. + +```js +function afficherCyclesAnterieurs() { + // On récupère les données sur les cycles passés + // à partir de la chaîne de caractères convertie + // ou un tableau vide. + const cycles = recupererCyclesEnregistres(); + + // On sort de la fonction s'il n'y a pas de cycle + if (cycles.length === 0) { + return; + } + + // On nettoie la liste des cycles antérieurs, + // car on va l'afficher complètement à nouveau. + conteneurCyclesAnterieurs.innerHTML = ""; + + const titreCyclesAnterieurs = document.createElement("h2"); + titreCyclesAnterieurs.textContent = "Cycles antérieurs"; + + const listeCyclesPasses = document.createElement("ul"); + + // On parcourt la liste des tous les cycles et on + // les affiche. + cycles.forEach((period) => { + const elementCycle = document.createElement("li"); + elementCycle.textContent = `Du ${formaterDate( + cycle.dateDebut, + )} au ${formaterDate(cycle.dateFin)}`; + listeCyclesPasses.appendChild(elementCycle); + }); + + conteneurCyclesAnterieurs.appendChild(titreCyclesAnterieurs); + conteneurCyclesAnterieurs.appendChild(listeCyclesPasses); +} + +function formaterDate(chaineDate) { + // On convertit la chaîne de caractères + // représentant la date en un objet Date. + const date = new Date(chaineDate); + + // On formate la date en tenant compte de + // la locale pour une meilleure expérience. + return date.toLocaleDateString("fr", { timeZone: "UTC" }); +} +``` + +### Afficher les cycles antérieurs au chargement + +Lorsque le fichier JavaScript est exécuté après le chargement de la page, on affiche les éventuels cycles antérieurs. + +```js +// On démarre l'application en affichant les données +// des cycles antérieurs. +afficherCyclesAnterieurs(); +``` + +## Fichier JavaScript complet + +Au final, votre fichier `app.js` devrait ressembler à ce JavaScript : + +```js +const elemFormNouveauCycle = document.getElementsByTagName("form")[0]; +const elemChampDateDebut = document.getElementById("start-date"); +const elemChampDateFin = document.getElementById("end-date"); +const conteneurCyclesAnterieurs = document.getElementById("past-periods"); + +// On ajoute une clé de stockage comme une constante +// globale de l'application +const CLE_STOCKAGE = "period-tracker"; + +// On écoute l'évènement pour l'envoi du formulaire. +elemFormNouveauCycle.addEventListener("submit", (event) => { + event.preventDefault(); + const dateDebut = elemChampDateDebut.value; + const dateFin = elemChampDateFin.value; + if (verifierDatesInvalides(dateDebut, dateFin)) { + return; + } + enregistrerNouveauCycle(dateDebut, dateFin); + afficherCyclesAnterieurs(); + elemFormNouveauCycle.reset(); +}); + +function verifierDatesInvalides(dateDebut, dateFin) { + if (!dateDebut || !dateFin || dateDebut > dateFin) { + elemFormNouveauCycle.reset(); + return true; + } + return false; +} + +function enregistrerNouveauCycle(dateDebut, dateFin) { + const cycles = recupererCyclesEnregistres(); + cycles.push({ dateDebut, dateFin }); + cycles.sort((a, b) => { + return new Date(b.dateDebut) - new Date(a.dateDebut); + }); + window.localStorage.setItem(CLE_STOCKAGE, JSON.stringify(cycles)); +} + +function recupererCyclesEnregistres() { + const data = window.localStorage.getItem(CLE_STOCKAGE); + const cycles = data ? JSON.parse(data) : []; + console.dir(cycles); + console.log(cycles); + return cycles; +} + +function afficherCyclesAnterieurs() { + const titreCyclesAnterieurs = document.createElement("h2"); + const listeCyclesPasses = document.createElement("ul"); + const cycles = recupererCyclesEnregistres(); + if (cycles.length === 0) { + return; + } + conteneurCyclesAnterieurs.innerHTML = ""; + titreCyclesAnterieurs.textContent = "Past cycles"; + cycles.forEach((cycle) => { + const elementCycle = document.createElement("li"); + elementCycle.textContent = `From ${formaterDate( + cycle.dateDebut, + )} to ${formaterDate(cycle.dateFin)}`; + listeCyclesPasses.appendChild(elementCycle); + }); + + conteneurCyclesAnterieurs.appendChild(titreCyclesAnterieurs); + conteneurCyclesAnterieurs.appendChild(listeCyclesPasses); +} + +function formaterDate(chaineDate) { + const date = new Date(chaineDate); + return date.toLocaleDateString("fr", { timeZone: "UTC" }); +} + +afficherCyclesAnterieurs(); +``` + +Vous pouvez essayer [l'application de suivi menstruel CycleTracker (en anglais)](https://mdn.github.io/pwa-examples/cycletracker/javascript_functionality) et voir [le code source correspondant (en anglais)](https://github.com/mdn/pwa-examples/tree/master/cycletracker/javascript_functionality) sur GitHub. Pour l'instant, l'application est fonctionnelle, mais ce n'est pas encore une PWA. + +## Pour la suite + +Une PWA est essentiellement une application web qui peut être installée et améliorée progressivement pour fonctionner hors-ligne. Maintenant que nous avons une application web fonctionnelle, nous allons ajouter les fonctionnalités nécessaires pour la convertir en PWA : [un manifeste](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Manifest_file), [une connexion sécurisée](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Secure_connection), et [un service worker](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers). + +Pour commencer, nous allons créer [le fichier du manifeste de CycleTracker](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Manifest_file), qui contiendra l'identité, l'apparence et l'iconographie de notre PWA CycleTracker. + +{{PreviousMenuNext("Web/Progressive_web_apps/Tutorials/CycleTracker/HTML_and_CSS", "Web/Progressive_web_apps/Tutorials/CycleTracker/Manifest_file", "Web/Progressive_web_apps/Tutorials/CycleTracker")}} From a40647e49678bbb4f0a03ce58ea857f0a04f0657 Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Fri, 3 Nov 2023 15:21:41 +0100 Subject: [PATCH 87/91] [fr] sync translated content (#16648) * fr: sync translated content * Update i18n glossary page * Update CanvasRenderingContext2D/globalCompositeOperation * update title accordingly --------- Co-authored-by: SphinxKnight --- files/fr/_redirects.txt | 13 +- files/fr/_wikihistory.json | 14 +- files/fr/glossary/i18n/index.md | 33 -- .../fr/glossary/internationalization/index.md | 27 ++ .../index.md | 16 - .../tutorial/compositing/example/index.md | 320 -------------- .../globalcompositeoperation/index.md | 394 +++++++++++++++++- 7 files changed, 420 insertions(+), 397 deletions(-) delete mode 100644 files/fr/glossary/i18n/index.md create mode 100644 files/fr/glossary/internationalization/index.md delete mode 100644 files/fr/glossary/internationalization_and_localization/index.md delete mode 100644 files/fr/web/api/canvas_api/tutorial/compositing/example/index.md diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt index 0af28c473e2d9e..ebf01aa8ee2250 100644 --- a/files/fr/_redirects.txt +++ b/files/fr/_redirects.txt @@ -1433,7 +1433,7 @@ /fr/docs/Glossaire/Hyperlien /fr/docs/Glossary/Hyperlink /fr/docs/Glossaire/Hypertexte /fr/docs/Glossary/Hypertext /fr/docs/Glossaire/Héritage /fr/docs/Glossary/Inheritance -/fr/docs/Glossaire/I18N /fr/docs/Glossary/I18N +/fr/docs/Glossaire/I18N /fr/docs/Glossary/Internationalization /fr/docs/Glossaire/IANA /fr/docs/Glossary/IANA /fr/docs/Glossaire/ICANN /fr/docs/Glossary/ICANN /fr/docs/Glossaire/ICE /fr/docs/Glossary/ICE @@ -1459,7 +1459,7 @@ /fr/docs/Glossaire/Input_method_editor /fr/docs/Glossary/Input_method_editor /fr/docs/Glossaire/Instance /fr/docs/Glossary/Instance /fr/docs/Glossaire/Intergiciel /fr/docs/Glossary/Middleware -/fr/docs/Glossaire/Internationalisation_et_localisation /fr/docs/Glossary/Internationalization_and_localization +/fr/docs/Glossaire/Internationalisation_et_localisation /fr/docs/Glossary/Internationalization /fr/docs/Glossaire/Internet /fr/docs/Glossary/Internet /fr/docs/Glossaire/JSON /fr/docs/Glossary/JSON /fr/docs/Glossaire/Jank /fr/docs/Glossary/Jank @@ -1730,7 +1730,9 @@ /fr/docs/Glossary/Descriptor_(CSS) /fr/docs/Glossary/CSS_Descriptor /fr/docs/Glossary/Empty_element /fr/docs/Glossary/Void_element /fr/docs/Glossary/Grid_Rows /fr/docs/Glossary/Grid_Row +/fr/docs/Glossary/I18N /fr/docs/Glossary/Internationalization /fr/docs/Glossary/Index /fr/docs/Glossary +/fr/docs/Glossary/Internationalization_and_localization /fr/docs/Glossary/Internationalization /fr/docs/Glossary/Modern_web_apps /fr/docs/Glossary/Progressive_web_apps /fr/docs/Glossary/Node/réseau /fr/docs/Glossary/Node/networking /fr/docs/Glossary/Origine /fr/docs/Glossary/Origin @@ -3580,7 +3582,7 @@ /fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs /fr/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors /fr/docs/Tutoriel_canvas/Animations_basiques /fr/docs/Web/API/Canvas_API/Tutorial/Basic_animations /fr/docs/Tutoriel_canvas/Composition /fr/docs/Web/API/Canvas_API/Tutorial/Compositing -/fr/docs/Tutoriel_canvas/Composition/Example /fr/docs/Web/API/Canvas_API/Tutorial/Compositing/Example +/fr/docs/Tutoriel_canvas/Composition/Example /fr/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation /fr/docs/Tutoriel_canvas/Formes_géométriques /fr/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes /fr/docs/Tutoriel_canvas/Optimizing_canvas /fr/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas /fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas /fr/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas @@ -3631,12 +3633,13 @@ /fr/docs/Web/API/ByteString /fr/docs/Web/JavaScript/Reference/Global_Objects/String /fr/docs/Web/API/CSSMatrix /fr/docs/Web/API/DOMMatrix /fr/docs/Web/API/Canvas_API/Drawing_graphics_with_canvas /fr/docs/Web/API/Canvas_API/Tutorial +/fr/docs/Web/API/Canvas_API/Tutorial/Compositing/Example /fr/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation /fr/docs/Web/API/Canvas_API/Tutoriel_canvas /fr/docs/Web/API/Canvas_API/Tutorial /fr/docs/Web/API/Canvas_API/Tutoriel_canvas/Advanced_animations /fr/docs/Web/API/Canvas_API/Tutorial/Advanced_animations /fr/docs/Web/API/Canvas_API/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs /fr/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors /fr/docs/Web/API/Canvas_API/Tutoriel_canvas/Animations_basiques /fr/docs/Web/API/Canvas_API/Tutorial/Basic_animations /fr/docs/Web/API/Canvas_API/Tutoriel_canvas/Composition /fr/docs/Web/API/Canvas_API/Tutorial/Compositing -/fr/docs/Web/API/Canvas_API/Tutoriel_canvas/Composition/Example /fr/docs/Web/API/Canvas_API/Tutorial/Compositing/Example +/fr/docs/Web/API/Canvas_API/Tutoriel_canvas/Composition/Example /fr/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation /fr/docs/Web/API/Canvas_API/Tutoriel_canvas/Dessin_de_texte_avec_canvas /fr/docs/Web/API/Canvas_API/Tutorial/Drawing_text /fr/docs/Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques /fr/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes /fr/docs/Web/API/Canvas_API/Tutoriel_canvas/Optimizing_canvas /fr/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas @@ -6369,6 +6372,7 @@ /fr/docs/conflicting/Glossary/DOM /fr/docs/Glossary/DOM /fr/docs/conflicting/Glossary/Doctype /fr/docs/Glossary/Doctype /fr/docs/conflicting/Glossary/Firefox_OS /fr/docs/Glossary/Firefox_OS +/fr/docs/conflicting/Glossary/Internationalization /fr/docs/Glossary/Internationalization /fr/docs/conflicting/Glossary/Object_reference /fr/docs/Glossary/Object_reference /fr/docs/conflicting/Glossary/TCP /fr/docs/Glossary/TCP /fr/docs/conflicting/Learn /fr/docs/Learn @@ -6442,6 +6446,7 @@ /fr/docs/conflicting/Tools/Responsive_Design_Mode https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/index.html /fr/docs/conflicting/Web/API /fr/docs/Web/API /fr/docs/conflicting/Web/API/Blob /fr/docs/Web/API/Blob +/fr/docs/conflicting/Web/API/CanvasRenderingContext2D/globalCompositeOperation /fr/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation /fr/docs/conflicting/Web/API/Canvas_API/Tutorial /fr/docs/Web/API/Canvas_API/Tutorial /fr/docs/conflicting/Web/API/DOMMatrix /fr/docs/Web/API/DOMMatrix /fr/docs/conflicting/Web/API/Document /fr/docs/Web/API/Document diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json index b5657c3ea36c33..86b344d7cd8ce0 100644 --- a/files/fr/_wikihistory.json +++ b/files/fr/_wikihistory.json @@ -1018,10 +1018,6 @@ "modified": "2019-03-23T22:42:03.435Z", "contributors": ["loella16", "Porkepix", "xdelatour"] }, - "Glossary/I18N": { - "modified": "2019-03-23T22:41:26.912Z", - "contributors": ["Goofy", "xdelatour"] - }, "Glossary/IANA": { "modified": "2019-03-23T22:42:02.685Z", "contributors": ["loella16", "xdelatour"] @@ -1118,9 +1114,9 @@ "modified": "2019-03-23T22:41:11.990Z", "contributors": ["xdelatour"] }, - "Glossary/Internationalization_and_localization": { - "modified": "2020-10-09T08:51:46.428Z", - "contributors": ["Voulto"] + "Glossary/Internationalization": { + "modified": "2019-03-23T22:41:26.912Z", + "contributors": ["Goofy", "xdelatour"] }, "Glossary/Internet": { "modified": "2019-03-23T22:53:44.936Z", @@ -7359,10 +7355,6 @@ "modified": "2020-11-13T03:38:19.786Z", "contributors": ["SphinxKnight", "a-mt", "Syberam"] }, - "Web/API/Canvas_API/Tutorial/Compositing/Example": { - "modified": "2020-11-13T03:38:18.691Z", - "contributors": ["SphinxKnight", "a-mt"] - }, "Web/API/Canvas_API/Tutorial/Drawing_shapes": { "modified": "2020-11-13T03:38:18.692Z", "contributors": [ diff --git a/files/fr/glossary/i18n/index.md b/files/fr/glossary/i18n/index.md deleted file mode 100644 index 65a02c16ae8c46..00000000000000 --- a/files/fr/glossary/i18n/index.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: I18N -slug: Glossary/I18N ---- - -{{GlossarySidebar}} - -i18n (issu de "internationalisation", un mot de 20 lettres) est l'ensemble des bonnes pratiques pour permettre à des produits ou des services d'être lisiblement adaptés à toute culture visée. - -> L'**internationalisation** est la conception et le développement d'un produit, d'une application ou d'un contenu de document qui **permet** une localisation facile pour les publics ciblés de culture, région et langue différentes. (Définition du {{Glossary("W3C")}}) - -Parmi d'autres choses, i18n nécessite le support de plusieurs… - -- jeux de caractères (en général via [Unicode](http://searchcio-midmarket.techtarget.com/definition/Unicode)) -- unités de mesure (monnaie, °C/°F, km/miles, etc.) -- formats de dates et heures -- dispositions de clavier -- directions de texte - -## Pour en savoir plus - -### Culture générale - -- [Internationalisation]() sur Wikipédia - -### Référence technique - -- [i18n sur W3C](http://www.w3.org/International/questions/qa-i18n.en#Internationalization) -- [i18n sur gala-global.org](http://www.gala-global.org/what-internationalization) - -### Apprendre sur ce sujet - -- [Ressources i18n sur i18nguy.com](http://www.i18nguy.com/) diff --git a/files/fr/glossary/internationalization/index.md b/files/fr/glossary/internationalization/index.md new file mode 100644 index 00000000000000..ec8eca51e33235 --- /dev/null +++ b/files/fr/glossary/internationalization/index.md @@ -0,0 +1,27 @@ +--- +title: Internationalisation +slug: Glossary/Internationalization +l10n: + sourceCommit: 050c1825df97d836d7b91c0719386dcb5b5dded2 +--- + +{{GlossarySidebar}} + +L'**internationalisation** (aussi abrégée en "i18n") est l'ensemble des bonnes pratiques permettant à des produits ou des services d'être adaptés pour différents publics, d'une langue, d'une culture ou d'une région différente. + +La [localisation](/fr/docs/Glossary/Localization) est le processus complémentaire pour adapter un système à un public donné. + +L'internationalisation permet entre autres l'adaptation des différences relatives aux : + +- Systèmes d'écriture +- Unités de mesure (monnaie, °C/°F, km/miles, etc.) +- Formats de dates et heures +- Dispositions de clavier + +Le travail du [consortium Unicode](https://home.unicode.org/) fait partie intégrante de l'internationalisation. Unicode prend en charge les variations entre les systèmes d'écriture du monde entier, et aussi les variations culturelles notamment liées aux devises et formats des dates et heures. + +## Voir aussi + +- [La localisation sur le glossaire MDN](/fr/docs/Glossary/Localization) +- [Le site du consortium Unicode](https://home.unicode.org/) +- [L'API JavaScript pour l'internationalisation](/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl) diff --git a/files/fr/glossary/internationalization_and_localization/index.md b/files/fr/glossary/internationalization_and_localization/index.md deleted file mode 100644 index 8d76b06b60f3e2..00000000000000 --- a/files/fr/glossary/internationalization_and_localization/index.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Internationalisation -slug: Glossary/Internationalization_and_localization ---- - -{{GlossarySidebar}} - -**L'internationalisation**, souvent abrégée en "[i18n](/fr/docs/Glossary/I18N)", est l'adaptation d'un site web ou d'une application web à différentes langues, différences régionales et exigences techniques pour différentes régions et pays. L'internationalisation est le processus d'architecture de votre application web afin qu'elle puisse être rapidement et facilement adaptée à diverses langues et régions sans trop d'efforts d'ingénierie lorsque de nouvelles langues et régions sont prises en charge. Aussi pour qu'un utilisateur puisse parcourir les fonctionnalités pour traduire ou localiser l'application pour accéder à tout le contenu sans casser la mise en page. - -L'internationalisation inclut la prise en charge de plusieurs jeux de caractères (généralement via [Unicode](http://searchcio-midmarket.techtarget.com/definition/Unicode)), des unités de mesure ([devise](/fr/docs/Web/API/PaymentCurrencyAmount), °C/°F, km/miles, etc.), [formats de date et d'heure](/fr/docs/Mozilla/Projects/NSPR/Reference/Date_and_Time), dispositions du clavier, et directions du texte. - -## Voir aussi - -- [Extension d'internationalisation](/fr/docs/Mozilla/Add-ons/WebExtensions/Internationalization) -- [API d'internationalisation](/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl) -- [Disposition Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) et [Grid](/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) diff --git a/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md deleted file mode 100644 index 6a4a5448d1e91f..00000000000000 --- a/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md +++ /dev/null @@ -1,320 +0,0 @@ ---- -title: Exemple de composition -slug: Web/API/Canvas_API/Tutorial/Compositing/Example -l10n: - sourceCommit: 3c67eed7b0d2c91198ec95bcc9b1a570f6c0f585 ---- - -{{DefaultAPISidebar("Canvas API")}} - -Cet exemple illustre un certain nombre d'[opérations de composition](/fr/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation). Voici le résultat : - -{{EmbedLiveSample("Exemple_de_composition", "100%", 7250)}} - -## Exemple de composition - -Ce code configure les valeurs globales utilisées par le reste du programme. - -```js -const canvas1 = document.createElement("canvas"); -const canvas2 = document.createElement("canvas"); -const gco = [ - "source-over", - "source-in", - "source-out", - "source-atop", - "destination-over", - "destination-in", - "destination-out", - "destination-atop", - "lighter", - "copy", - "xor", - "multiply", - "screen", - "overlay", - "darken", - "lighten", - "color-dodge", - "color-burn", - "hard-light", - "soft-light", - "difference", - "exclusion", - "hue", - "saturation", - "color", - "luminosity", -].reverse(); -const gcoText = [ - "La configuration par défaut, les nouvelles formes sont dessinées au-dessus du contenu existant sur le canevas.", - "La nouvelle forme est dessinée aux endroits où elle chevauche le contenu du canevas. Tout le reste est rendu transparent.", - "La nouvelle forme est dessinée là où elle ne chevauche pas le contenu existant sur le canevas.", - "La nouvelle forme est uniquement dessinée où elle chevauche le contenu existant du canevas.", - "Les nouvelles formes sont dessinées derrière le contenu existant du canevas.", - "Le contenu existant du canevas est conservé là où il chevauche la nouvelle forme. Tout le reste est rendu transparent.", - "Le contenu existant est conservé où il ne chevauche pas la nouvelle forme.", - "Le canevas existant est uniquement conservé où il chevauche la nouvelle forme. Cette dernière est dessinée derrière le contenu du canevas.", - "Là où les formes se chevauchent, la couleur est déterminée en additionnant les valeurs des couleurs.", - "Seule la nouvelle forme est affichée.", - "Les formes sont rendues transparentes où elles se chevauchent et dessinées normalement par ailleurs.", - "Les pixels de la couche supérieure sont multipliés par les pixels correspondants de la couche inférieure. On obtient alors une image plus sombre.", - "Les pixels sont inversés, multipliés, puis inversés à nouveau. On obtient alors une image plus claire (contrairement à multiply", - "Une combinaison de multiply et de screen. Les parties sombres de la couche de base deviennent plus sombres, et les parties plus claires deviennent plus claires.", - "Ce sont pixels les plus sombres entre les deux couches qui sont retenus.", - "Ce sont pixels les plus clairs entre les deux couches qui sont retenus.", - "Divise la couche inférieure par l'inverse de la couche supérieure.", - "Divise la couche inférieure par la couche supérieure puis inverse le résultat.", - "Une combinaison de multiply et de screen, comme overlay, mais où les couches supérieure et inférieure sont échangées.", - "Une version plus douce de hard-light. Le blanc pur ou le noir pur ne donne pas un noir ou un blanc pur.", - "La couche inférieure est soustraite de la couche supérieure, ou dans l'autre sens, afin de toujours obtenir une valeur positive.", - "Fonctionne comme difference, mais avec un contraste moindre.", - "Conserve la luminance et la chrominance de la couche inférieure, mais adopte la teinte de la couche supérieure.", - "Conserve la luminance et la teinte de la couche inférieure, mais adopte la chrominance de la couche supérieure.", - "Conserve la luminance de la couche inférieure, mais adopte la teinte et la chrominance de la couche supérieure.", - "Conserve la teinte et la chrominance de la couche inférieure, mais adopte la luminance de la couche supérieure.", -].reverse(); -const width = 320; -const height = 340; -``` - -### Programme principal - -Quand la page se charge, le code suivant s'exécute pour configurer et exécuter l'exemple : - -```js -window.onload = () => { - // lum en sRGB - const lum = { - r: 0.33, - g: 0.33, - b: 0.33, - }; - // redimensionne le canevas - canvas1.width = width; - canvas1.height = height; - canvas2.width = width; - canvas2.height = height; - lightMix(); - colorSphere(); - runComposite(); - return; -}; -``` - -Dans le code suivant, `runComposite()` gère la majeure partie du travail, en s'appuyant sur un certain nombre de fonctions utilitaires pour réaliser les parties difficiles. - -```js -function createCanvas() { - const canvas = document.createElement("canvas"); - canvas.style.background = `url(${op_8x8.data})`; - canvas.style.border = "1px solid #000"; - canvas.style.margin = "5px"; - canvas.width = width / 2; - canvas.height = height / 2; - return canvas; -} - -function runComposite() { - const dl = document.createElement("dl"); - document.body.appendChild(dl); - while (gco.length) { - const pop = gco.pop(); - const dt = document.createElement("dt"); - dt.textContent = pop; - dl.appendChild(dt); - const dd = document.createElement("dd"); - const p = document.createElement("p"); - p.textContent = gcoText.pop(); - dd.appendChild(p); - - const canvasToDrawOn = createCanvas(); - const canvasToDrawFrom = createCanvas(); - const canvasToDrawResult = createCanvas(); - - let ctx = canvasToDrawResult.getContext("2d"); - ctx.clearRect(0, 0, width, height); - ctx.save(); - ctx.drawImage(canvas1, 0, 0, width / 2, height / 2); - ctx.globalCompositeOperation = pop; - ctx.drawImage(canvas2, 0, 0, width / 2, height / 2); - ctx.globalCompositeOperation = "source-over"; - ctx.fillStyle = "rgba(0,0,0,0.8)"; - ctx.fillRect(0, height / 2 - 20, width / 2, 20); - ctx.fillStyle = "#FFF"; - ctx.font = "14px arial"; - ctx.fillText(pop, 5, height / 2 - 5); - ctx.restore(); - - ctx = canvasToDrawOn.getContext("2d"); - ctx.clearRect(0, 0, width, height); - ctx.save(); - ctx.drawImage(canvas1, 0, 0, width / 2, height / 2); - ctx.fillStyle = "rgba(0,0,0,0.8)"; - ctx.fillRect(0, height / 2 - 20, width / 2, 20); - ctx.fillStyle = "#FFF"; - ctx.font = "14px arial"; - ctx.fillText("contenu existant", 5, height / 2 - 5); - ctx.restore(); - - ctx = canvasToDrawFrom.getContext("2d"); - ctx.clearRect(0, 0, width, height); - ctx.save(); - ctx.drawImage(canvas2, 0, 0, width / 2, height / 2); - ctx.fillStyle = "rgba(0,0,0,0.8)"; - ctx.fillRect(0, height / 2 - 20, width / 2, 20); - ctx.fillStyle = "#FFF"; - ctx.font = "14px arial"; - ctx.fillText("nouveau contenu", 5, height / 2 - 5); - ctx.restore(); - - dd.appendChild(canvasToDrawOn); - dd.appendChild(canvasToDrawFrom); - dd.appendChild(canvasToDrawResult); - - dl.appendChild(dd); - } -} -``` - -### Fonctions utilitaires - -Notre programme repose sur un certain nombre de fonctions utilitaires. - -```js -const lightMix = () => { - const ctx = canvas2.getContext("2d"); - ctx.save(); - ctx.globalCompositeOperation = "lighter"; - ctx.beginPath(); - ctx.fillStyle = "rgba(255,0,0,1)"; - ctx.arc(100, 200, 100, Math.PI * 2, 0, false); - ctx.fill(); - ctx.beginPath(); - ctx.fillStyle = "rgba(0,0,255,1)"; - ctx.arc(220, 200, 100, Math.PI * 2, 0, false); - ctx.fill(); - ctx.beginPath(); - ctx.fillStyle = "rgba(0,255,0,1)"; - ctx.arc(160, 100, 100, Math.PI * 2, 0, false); - ctx.fill(); - ctx.restore(); - ctx.beginPath(); - ctx.fillStyle = "#f00"; - ctx.fillRect(0, 0, 30, 30); - ctx.fill(); -}; -``` - -```js -const colorSphere = (element) => { - const ctx = canvas1.getContext("2d"); - const width = 360; - const halfWidth = width / 2; - const rotate = (1 / 360) * Math.PI * 2; // par degré - const offset = 0; // décalage de la barre de défilement - const oleft = -20; - const otop = -20; - for (let n = 0; n <= 359; n++) { - const gradient = ctx.createLinearGradient( - oleft + halfWidth, - otop, - oleft + halfWidth, - otop + halfWidth, - ); - const color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 }); - gradient.addColorStop(0, "rgba(0,0,0,0)"); - gradient.addColorStop(0.7, `rgba(${color.R}, ${color.G}, ${color.B}, 1)`); - gradient.addColorStop(1, "rgba(255,255,255,1)"); - ctx.beginPath(); - ctx.moveTo(oleft + halfWidth, otop); - ctx.lineTo(oleft + halfWidth, otop + halfWidth); - ctx.lineTo(oleft + halfWidth + 6, otop); - ctx.fillStyle = gradient; - ctx.fill(); - ctx.translate(oleft + halfWidth, otop + halfWidth); - ctx.rotate(rotate); - ctx.translate(-(oleft + halfWidth), -(otop + halfWidth)); - } - ctx.beginPath(); - ctx.fillStyle = "#00f"; - ctx.fillRect(15, 15, 30, 30); - ctx.fill(); - return ctx.canvas; -}; -``` - -```js -// HSV (1978) = H: Teinte / S: Saturation / V: Valeur -Color = {}; -Color.HSV_RGB = (o) => { - const S = o.S / 100; - let H = o.H / 360, - V = o.V / 100; - let R, G; - let A, B, C, D; - if (S === 0) { - R = G = B = Math.round(V * 255); - } else { - if (H >= 1) H = 0; - H *= 6; - D = H - Math.floor(H); - A = Math.round(255 * V * (1 - S)); - B = Math.round(255 * V * (1 - S * D)); - C = Math.round(255 * V * (1 - S * (1 - D))); - V = Math.round(255 * V); - switch (Math.floor(H)) { - case 0: - R = V; - G = C; - B = A; - break; - case 1: - R = B; - G = V; - B = A; - break; - case 2: - R = A; - G = V; - B = C; - break; - case 3: - R = A; - G = B; - B = V; - break; - case 4: - R = C; - G = A; - B = V; - break; - case 5: - R = V; - G = A; - B = B; - break; - } - } - return { R, G, B }; -}; - -const createInterlace = (size, color1, color2) => { - const proto = document.createElement("canvas").getContext("2d"); - proto.canvas.width = size * 2; - proto.canvas.height = size * 2; - proto.fillStyle = color1; // supérieur gauche - proto.fillRect(0, 0, size, size); - proto.fillStyle = color2; // supérieur droit - proto.fillRect(size, 0, size, size); - proto.fillStyle = color2; // inférieur gauche - proto.fillRect(0, size, size, size); - proto.fillStyle = color1; // inférieur droit - proto.fillRect(size, size, size, size); - const pattern = proto.createPattern(proto.canvas, "repeat"); - pattern.data = proto.canvas.toDataURL(); - return pattern; -}; - -const op_8x8 = createInterlace(8, "#FFF", "#eee"); -``` diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md index c59b58f19ecb5c..e4f57709dbf5c7 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md @@ -1,27 +1,78 @@ --- -title: CanvasRenderingContext2D.globalCompositeOperation +title: "CanvasRenderingContext2D : propriété globalCompositeOperation" slug: Web/API/CanvasRenderingContext2D/globalCompositeOperation +l10n: + sourceCommit: 050c1825df97d836d7b91c0719386dcb5b5dded2 --- {{APIRef}} -La propriété **`CanvasRenderingContext2D.globalCompositeOperation`** de l'API Canvas 2D définit le type d'opération de composition à appliquer lors du tracé de nouvelles formes. +La propriété **`CanvasRenderingContext2D.globalCompositeOperation`** de l'API Canvas 2D définit le type d'opération de composition à appliquer lors du tracé de nouvelles formes. -Voir aussi [Composition et découpe](/fr/docs/Tutoriel_canvas/Composition) dans le [Tutoriel canvas](/fr/docs/Tutoriel_canvas). +Voir aussi [Composition et découpe](/fr/docs/Web/API/Canvas_API/Tutorial/Compositing) dans le [Tutoriel sur l'API Canvas](/fr/docs/Web/API/Canvas_API/Tutorial). -## Syntaxe +## Valeur -```js -ctx.globalCompositeOperation = type; -``` +Une chaîne de caractères qui identifie les opérations de composition ou de mode de fusion à utiliser. Elle peut prendre l'une des valeurs suivantes : -`type` est de type {{jsxref("String")}} et permet de choisir quelle opération de composition ou de mode fondu utiliser. +- `"source-over"` + - : Il s'agit du paramètre par défaut. Les nouvelles formes sont dessinées par-dessus le contenu existant du canevas. +- `"source-in"` + - : La nouvelle forme est uniquement dessinée là où elle chevauche le canevas de destination. Tout le reste est rendu transparent. +- `"source-out"` + - : La nouvelle forme est dessinée où elle ne chevauche pas le contenu du canevas existant. +- `"source-atop"` + - : La nouvelle forme est uniquement dessinée où elle chevauche le contenu du canevas existant. +- `"destination-over"` + - : Les nouvelles formes sont dessinées derrière le contenu existant du canevas. +- `"destination-in"` + - : Le contenu existant est conservé où la nouvelle forme chevauche le contenu existant du canevas. Tout le reste est rendu transparent. +- `"destination-out"` + - : Le contenu existant est conservé où il ne chevauche pas la nouvelle forme. +- `"destination-atop"` + - : Le canevas existant est uniquement conservé où il chevauche la nouvelle forme. La nouvelle forme est dessinée derrière le contenu du canevas. +- `"lighter"` + - : Là où les deux formes se chevauchent, la couleur est déterminée en ajoutant les valeurs des couleurs. +- `"copy"` + - : Seule la nouvelle forme est affichée. +- `"xor"` + - : Les formes sont rendues transparentes où les deux se chevauchent, et dessinées normalement partout ailleurs. +- `"multiply"` + - : Les pixels de la couche supérieure sont multipliés avec les pixels correspondants de la couche inférieure. On obtiendra une image plus sombre comme résultat. +- `"screen"` + - : Les pixels sont inversés, multipliés, puis à nouveau inversés. À l'inverse de `multiply`, on obtiendra une image plus claire en résultat. +- `"overlay"` + - : Une combinaison de `multiply` et `screen`. Les parties sombres de la couche de base deviennent plus sombres, les parties claires deviennent plus claires. +- `"darken"` + - : Les pixels les plus sombres des deux couches sont conservés. +- `"lighten"` + - : Les pixels les plus clairs des deux couches sont conservés. +- `"color-dodge"` + - : La couche inférieure est divisée par l'inverse de la couche supérieure. +- `"color-burn"` + - : L'inverse de la couche inférieure est divisé par la couche supérieure, le résultat obtenu est inversé pour fournir le résultat final. +- `"hard-light"` + - : À l'instar d'`overlay`, une combinaison de `multiply` et `screen`, mais avec les couches supérieure et inférieure échangées. +- `"soft-light"` + - : Une version plus douce de `hard-light`. Un noir ou un blanc pur ne donnera pas un noir ou un blanc pur. +- `"difference"` + - : La couche inférieure est soustraite à la couche supérieure, ou inversement pour toujours obtenir une valeur positive. +- `"exclusion"` + - : Semblable à `difference`, avec un contraste plus faible. +- `"hue"` + - : Conserve la luminance et la chrominance de la couche inférieure, en prenant la teinte de la couche supérieure. +- `"saturation"` + - : Conserve la luminance et la teinte de la couche inférieure, en prenant la chrominance de la couche supérieure. +- `"color"` + - : Conserve la luminance de la couche inférieure, en prenant la teinte et la chrominance de la couche supérieure. +- `"luminosity"` + - : Conserve la teinte et la chrominance de la couche inférieure, en prenant la luminance de la couche supérieure. ## Exemples -### Changer l'opération de composition +### Modifier l'opération de composition -Cet exemple utilise la propriété `globalCompositeOperation` pour dessiner deux rectangles qui s'excluent l'un l'autre quand ils se superposent. +Dans cet exemple, on utilise la propriété `globalCompositeOperation` afin de dessiner deux rectangles où leur intersection est exclue. #### HTML @@ -46,7 +97,324 @@ ctx.fillRect(50, 50, 100, 100); #### Résultat -{{ EmbedLiveSample('Exemples', 700, 180) }} +{{EmbedLiveSample('', 700, 180)}} + +### Démonstration pour toutes les valeurs + +#### Valeurs globales + +Ce fragment de code définit les valeurs globales utilisées par le reste du programme. + +```js +const canvas1 = document.createElement("canvas"); +const canvas2 = document.createElement("canvas"); +const gco = [ + "source-over", + "source-in", + "source-out", + "source-atop", + "destination-over", + "destination-in", + "destination-out", + "destination-atop", + "lighter", + "copy", + "xor", + "multiply", + "screen", + "overlay", + "darken", + "lighten", + "color-dodge", + "color-burn", + "hard-light", + "soft-light", + "difference", + "exclusion", + "hue", + "saturation", + "color", + "luminosity", +].reverse(); +const gcoText = [ + "Il s'agit du paramètre par défaut. Les nouvelles formes sont dessinées par-dessus le contenu existant du canevas.", + "La nouvelle forme est uniquement dessinée là où elle chevauche le canevas de destination. Tout le reste est rendu transparent.", + "La nouvelle forme est dessinée où elle ne chevauche pas le contenu du canevas existant.", + "La nouvelle forme est uniquement dessinée où elle chevauche le contenu du canevas existant.", + "Les nouvelles formes sont dessinées derrière le contenu existant du canevas.", + "Le contenu existant est conservé où la nouvelle forme chevauche le contenu existant du canevas. Tout le reste est rendu transparent.", + "Le contenu existant est conservé où il ne chevauche pas la nouvelle forme.", + "Le canevas existant est uniquement conservé où il chevauche la nouvelle forme. La nouvelle forme est dessinée derrière le contenu du canevas.", + "Là où les deux formes se chevauchent, la couleur est déterminée en ajoutant les valeurs des couleurs.", + "Seule la nouvelle forme est affichée.", + "Les formes sont rendues transparentes où les deux se chevauchent, et dessinées normalement partout ailleurs.", + "Les pixels de la couche supérieure sont multipliés avec les pixels correspondants de la couche inférieure. On obtiendra une image plus sombre comme résultat.", + "Les pixels sont inversés, multipliés, puis à nouveau inversés. À l'inverse de multiply, on obtiendra une image plus claire en résultat.", + "Une combinaison de multiply et screen. Les parties sombres de la couche de base deviennent plus sombres, les parties claires deviennent plus claires.", + "Les pixels les plus sombres des deux couches sont conservés.", + "Les pixels les plus clairs des deux couches sont conservés.", + "La couche inférieure est divisée par l'inverse de la couche supérieure.", + "L'inverse de la couche inférieure est divisé par la couche supérieure, le résultat obtenu est inversé pour fournir le résultat final.", + "À l'instar d'overlay, une combinaison de multiply et screen, mais avec les couches supérieure et inférieure échangées.", + "Une version plus douce de hard-light. Un noir ou un blanc pur ne donnera pas un noir ou un blanc pur.", + "La couche inférieure est soustraite à la couche supérieure, ou inversement pour toujours obtenir une valeur positive.", + "Semblable à difference, avec un contraste plus faible.", + "Conserve la luminance et la chrominance de la couche inférieure, en prenant la teinte de la couche supérieure.", + "Conserve la luminance et la teinte de la couche inférieure, en prenant la chrominance de la couche supérieure.", + "Conserve la luminance de la couche inférieure, en prenant la teinte et la chrominance de la couche supérieure.", + "Conserve la teinte et la chrominance de la couche inférieure, en prenant la luminance de la couche supérieure.", +].reverse(); +const width = 320; +const height = 340; +``` + +#### Programme principal + +Au chargement de la page, le code qui suit est exécuté pour initialiser puis exécuter l'exemple : + +```js +window.onload = () => { + // Luminance exprimée en sRGB + const lum = { + r: 0.33, + g: 0.33, + b: 0.33, + }; + // Redimensionnement du canevas + canvas1.width = width; + canvas1.height = height; + canvas2.width = width; + canvas2.height = height; + lightMix(); + colorSphere(); + runComposite(); + return; +}; +``` + +Dans le fragment de code qui suit, c'est `runComposite()` qui est responsable de la majorité du travail, exploitant quelques fonctions utilitaires pour les parties les plus complexes. + +```js +function createCanvas() { + const canvas = document.createElement("canvas"); + canvas.style.background = `url(${op_8x8.data})`; + canvas.style.border = "1px solid #000"; + canvas.style.margin = "5px"; + canvas.width = width / 2; + canvas.height = height / 2; + return canvas; +} + +function runComposite() { + const dl = document.createElement("dl"); + document.body.appendChild(dl); + while (gco.length) { + const pop = gco.pop(); + const dt = document.createElement("dt"); + dt.textContent = pop; + dl.appendChild(dt); + const dd = document.createElement("dd"); + const p = document.createElement("p"); + p.textContent = gcoText.pop(); + dd.appendChild(p); + + const canvasToDrawOn = createCanvas(); + const canvasToDrawFrom = createCanvas(); + const canvasToDrawResult = createCanvas(); + + let ctx = canvasToDrawResult.getContext("2d"); + ctx.clearRect(0, 0, width, height); + ctx.save(); + ctx.drawImage(canvas1, 0, 0, width / 2, height / 2); + ctx.globalCompositeOperation = pop; + ctx.drawImage(canvas2, 0, 0, width / 2, height / 2); + ctx.globalCompositeOperation = "source-over"; + ctx.fillStyle = "rgba(0,0,0,0.8)"; + ctx.fillRect(0, height / 2 - 20, width / 2, 20); + ctx.fillStyle = "#FFF"; + ctx.font = "14px arial"; + ctx.fillText(pop, 5, height / 2 - 5); + ctx.restore(); + + ctx = canvasToDrawOn.getContext("2d"); + ctx.clearRect(0, 0, width, height); + ctx.save(); + ctx.drawImage(canvas1, 0, 0, width / 2, height / 2); + ctx.fillStyle = "rgba(0,0,0,0.8)"; + ctx.fillRect(0, height / 2 - 20, width / 2, 20); + ctx.fillStyle = "#FFF"; + ctx.font = "14px arial"; + ctx.fillText("contenu existant", 5, height / 2 - 5); + ctx.restore(); + + ctx = canvasToDrawFrom.getContext("2d"); + ctx.clearRect(0, 0, width, height); + ctx.save(); + ctx.drawImage(canvas2, 0, 0, width / 2, height / 2); + ctx.fillStyle = "rgba(0,0,0,0.8)"; + ctx.fillRect(0, height / 2 - 20, width / 2, 20); + ctx.fillStyle = "#FFF"; + ctx.font = "14px arial"; + ctx.fillText("nouveau contenu", 5, height / 2 - 5); + ctx.restore(); + + dd.appendChild(canvasToDrawOn); + dd.appendChild(canvasToDrawFrom); + dd.appendChild(canvasToDrawResult); + + dl.appendChild(dd); + } +} +``` + +#### Fonctions utilitaires + +Ce programme utilise certaines fonctions utilitaires. + +```js +const lightMix = () => { + const ctx = canvas2.getContext("2d"); + ctx.save(); + ctx.globalCompositeOperation = "lighter"; + ctx.beginPath(); + ctx.fillStyle = "rgba(255,0,0,1)"; + ctx.arc(100, 200, 100, Math.PI * 2, 0, false); + ctx.fill(); + ctx.beginPath(); + ctx.fillStyle = "rgba(0,0,255,1)"; + ctx.arc(220, 200, 100, Math.PI * 2, 0, false); + ctx.fill(); + ctx.beginPath(); + ctx.fillStyle = "rgba(0,255,0,1)"; + ctx.arc(160, 100, 100, Math.PI * 2, 0, false); + ctx.fill(); + ctx.restore(); + ctx.beginPath(); + ctx.fillStyle = "#f00"; + ctx.fillRect(0, 0, 30, 30); + ctx.fill(); +}; +``` + +```js +const colorSphere = (element) => { + const ctx = canvas1.getContext("2d"); + const width = 360; + const halfWidth = width / 2; + const rotate = (1 / 360) * Math.PI * 2; // par degré + const offset = 0; // décalage de la barre de défilement + const oleft = -20; + const otop = -20; + for (let n = 0; n <= 359; n++) { + const gradient = ctx.createLinearGradient( + oleft + halfWidth, + otop, + oleft + halfWidth, + otop + halfWidth, + ); + const color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 }); + gradient.addColorStop(0, "rgba(0,0,0,0)"); + gradient.addColorStop(0.7, `rgba(${color.R}, ${color.G}, ${color.B}, 1)`); + gradient.addColorStop(1, "rgba(255,255,255,1)"); + ctx.beginPath(); + ctx.moveTo(oleft + halfWidth, otop); + ctx.lineTo(oleft + halfWidth, otop + halfWidth); + ctx.lineTo(oleft + halfWidth + 6, otop); + ctx.fillStyle = gradient; + ctx.fill(); + ctx.translate(oleft + halfWidth, otop + halfWidth); + ctx.rotate(rotate); + ctx.translate(-(oleft + halfWidth), -(otop + halfWidth)); + } + ctx.beginPath(); + ctx.fillStyle = "#00f"; + ctx.fillRect(15, 15, 30, 30); + ctx.fill(); + return ctx.canvas; +}; +``` + +```js +// HSV (1978) +// H: Hue (en anglais, teinte en français) +// S: Saturation +// V: Value (en anglais, valeur en français) +Color = {}; +Color.HSV_RGB = (o) => { + const S = o.S / 100; + let H = o.H / 360, + V = o.V / 100; + let R, G; + let A, B, C, D; + if (S === 0) { + R = G = B = Math.round(V * 255); + } else { + if (H >= 1) H = 0; + H *= 6; + D = H - Math.floor(H); + A = Math.round(255 * V * (1 - S)); + B = Math.round(255 * V * (1 - S * D)); + C = Math.round(255 * V * (1 - S * (1 - D))); + V = Math.round(255 * V); + switch (Math.floor(H)) { + case 0: + R = V; + G = C; + B = A; + break; + case 1: + R = B; + G = V; + B = A; + break; + case 2: + R = A; + G = V; + B = C; + break; + case 3: + R = A; + G = B; + B = V; + break; + case 4: + R = C; + G = A; + B = V; + break; + case 5: + R = V; + G = A; + B = B; + break; + } + } + return { R, G, B }; +}; + +const createInterlace = (size, color1, color2) => { + const proto = document.createElement("canvas").getContext("2d"); + proto.canvas.width = size * 2; + proto.canvas.height = size * 2; + proto.fillStyle = color1; // supérieur gauche + proto.fillRect(0, 0, size, size); + proto.fillStyle = color2; // supérieur droit + proto.fillRect(size, 0, size, size); + proto.fillStyle = color2; // inférieur gauche + proto.fillRect(0, size, size, size); + proto.fillStyle = color1; // inférieur droit + proto.fillRect(size, size, size, size); + const pattern = proto.createPattern(proto.canvas, "repeat"); + pattern.data = proto.canvas.toDataURL(); + return pattern; +}; + +const op_8x8 = createInterlace(8, "#FFF", "#eee"); +``` + +#### Résultat + +{{EmbedLiveSample("démonstration_pour_toutes_les_valeurs", "100%", 7250)}} ## Spécifications @@ -58,5 +426,5 @@ ctx.fillRect(50, 50, 100, 100); ## Voir aussi -- L'interface qui définit cette propriété : {{domxref("CanvasRenderingContext2D")}} -- {{domxref("CanvasRenderingContext2D.globalAlpha")}} +- L'interface définissant cette propriété : [`CanvasRenderingContext2D`](/fr/docs/Web/API/CanvasRenderingContext2D) +- [`CanvasRenderingContext2D.globalAlpha`](/fr/docs/Web/API/CanvasRenderingContext2D/globalAlpha) From b229cd3c98d15e9e7be1b670695b9ec57ffa643c Mon Sep 17 00:00:00 2001 From: Alexander Date: Fri, 3 Nov 2023 11:01:28 -0600 Subject: [PATCH 88/91] es: Update matriz to arreglo where it is an Array (#16720) Update matriz to arreglo where it is an Array --- .../javascript/first_steps/arrays/index.md | 72 +++++++++---------- 1 file changed, 36 insertions(+), 36 deletions(-) diff --git a/files/es/learn/javascript/first_steps/arrays/index.md b/files/es/learn/javascript/first_steps/arrays/index.md index 3a4270e8badd6e..69c3b3b9c33b14 100644 --- a/files/es/learn/javascript/first_steps/arrays/index.md +++ b/files/es/learn/javascript/first_steps/arrays/index.md @@ -5,17 +5,17 @@ slug: Learn/JavaScript/First_steps/Arrays {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}} -## Arreglos o Matrices +## Arreglos -En este último artículo de este módulo, veremos las matrices — una manera ordenada de almacenar una lista de elementos de datos bajo un solo nombre de variable. Aquí vemos por qué esto es útil, luego exploramos cómo crear una matriz, recuperar, agregar y eliminar elementos almacenados en una matriz, y más. +En este último artículo de este módulo, veremos las matrices — una manera ordenada de almacenar una lista de elementos de datos bajo un solo nombre de variable. Aquí vemos por qué esto es útil, luego exploramos cómo crear un arreglo, recuperar, agregar y eliminar elementos almacenados en un arreglo, y más. | Prerrequisitos: | Conocimientos básicos de informática, una comprensión básica de HTML y CSS, una idea de lo que es JavaScript. | | --------------- | ------------------------------------------------------------------------------------------------------------- | | Objectivo: | Para entender qué son las matrices y cómo manipularlas en JavaScript. | -## ¿Qué es una matriz? +## ¿Qué es un arreglo? -Las matrices se describen como "objetos tipo lista"; básicamente son objetos individuales que contienen múltiples valores almacenados en una lista. Los objetos de matriz pueden almacenarse en variables y tratarse de la misma manera que cualquier otro tipo de valor, la diferencia es que podemos acceder individualmente a cada valor dentro de la lista y hacer cosas útiles y eficientes con la lista, como recorrerlo con un bucle y hacer una misma cosa a cada valor. Tal vez tenemos una serie de productos y sus precios almacenados en una matriz, y queremos recorrerlos e imprimirlos en una factura, sumando todos los precios e imprimiendo el total en la parte inferior. +Las matrices se describen como "objetos tipo lista"; básicamente son objetos individuales que contienen múltiples valores almacenados en una lista. Los objetos de arreglos pueden almacenarse en variables y tratarse de la misma manera que cualquier otro tipo de valor, la diferencia es que podemos acceder individualmente a cada valor dentro de la lista y hacer cosas útiles y eficientes con la lista, como recorrerlo con un bucle y hacer una misma cosa a cada valor. Tal vez tenemos una serie de productos y sus precios almacenados en un arreglo, y queremos recorrerlos e imprimirlos en una factura, sumando todos los precios e imprimiendo el total en la parte inferior. Si no tuvieramos matrices, tendríamos que almacenar cada elemento en una variable separada, luego llamar al código que hace la impresión y agregarlo por separado para cada artículo. Esto sería mucho más largo de escribir, menos eficiente y más propenso a errores. si tuviéramos 10 elementos para agregar a la factura, ya sería suficientemente malo, pero ¿ qué pasa con 100 o 1000 artículos? Volveremos a este ejemplo más adelante en el artículo. @@ -126,18 +126,18 @@ Como en artículos anteriores, aprendamos sobre los aspectos básicos reales de {{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }} -### Creando una matriz +### Creando un arreglo Las matrices se construyen con corchetes, que contiene una lista de elementos separdos por comas. -1. Digamos que queríamos almacenar una lista de compras en una matriz — haríamos algo como lo siguiente. Ingresa las siguientes líneas en la consola: +1. Digamos que queríamos almacenar una lista de compras en un arreglo — haríamos algo como lo siguiente. Ingresa las siguientes líneas en la consola: ```js let shopping = ["bread", "milk", "cheese", "hummus", "noodles"]; shopping; ``` -2. En este caso, cada elemento de la matriz es una cadena, pero ten en cuenta que puedes almacenar cualquier elemento en una matriz — cadena, número, objeto, otra variable, incluso otra matriz. También puedes mezclar y combinar tipos de elementos — no todos tienen que ser números, cadenas, etc. Prueba estos: +2. En este caso, cada elemento del arreglo es una cadena, pero ten en cuenta que puedes almacenar cualquier elemento en un arreglo — cadena, número, objeto, otra variable, incluso otro arreglo. También puedes mezclar y combinar tipos de elementos — no todos tienen que ser números, cadenas, etc. Prueba estos: ```js let sequence = [1, 1, 2, 3, 5, 8, 13]; @@ -146,9 +146,9 @@ Las matrices se construyen con corchetes, que contiene una lista de elementos se 3. Intenta creando un par de matrices por tu cuenta, antes de continuar. -### Accediendo y modificando elementos de la matriz +### Accediendo y modificando elementos del arreglo -Puedes entonces acceder a elementos individuales en la matriz mediante la notación de corchetes, del mismo modo que [accediste a las letras de una cadena](/es/docs/Learn/JavaScript/First_steps/Useful_string_methods#retrieving_a_specific_string_character). +Puedes entonces acceder a elementos individuales en el arreglo mediante la notación de corchetes, del mismo modo que [accediste a las letras de una cadena](/es/docs/Learn/JavaScript/First_steps/Useful_string_methods#retrieving_a_specific_string_character). 1. Ingresa lo siguiente en tu consola: @@ -157,7 +157,7 @@ Puedes entonces acceder a elementos individuales en la matriz mediante la notaci // devuelve "bread" ``` -2. también puedes modificar un elemento en una matriz simplemente dando a un item de la matriz un nuevo valor. Prueba esto: +2. también puedes modificar un elemento en un arreglo simplemente dando a un item del arreglo un nuevo valor. Prueba esto: ```js shopping[0] = "tahini"; @@ -167,7 +167,7 @@ Puedes entonces acceder a elementos individuales en la matriz mediante la notaci > **Nota:** Lo dijimos antes, pero solo como recordatorio — ¡ las computadoras comienzan a contar desde 0! -3. Ten en cuenta que una matriz dentro de otra matriz se llama matriz multidimensional. Puedes acceder a los elementos de una matriz que estén dentro de otra, encadenando dos pares de corchetes. Por ejemplo, para acceder a uno de los elementos dentro de la matriz, que a su vez, es el tercer elemento dentro de la matriz `random` (ver sección anterior), podríamos hacer algo como esto: +3. Ten en cuenta que un arreglo dentro de otro arreglo se llama arrelog multidimensional o matriz. Puedes acceder a los elementos de un arreglo que estén dentro de otro, encadenando dos pares de corchetes. Por ejemplo, para acceder a uno de los elementos dentro de la matriz, que a su vez, es el tercer elemento dentro de la matriz `random` (ver sección anterior), podríamos hacer algo como esto: ```js random[2][2]; @@ -175,16 +175,16 @@ Puedes entonces acceder a elementos individuales en la matriz mediante la notaci 4. Intenta seguir jugando y haciendo algunas modificaciones más a tus ejemplos de matriz antes de continuar. -### Encontrar la longitud de una matriz +### Encontrar la longitud de un arreglo -Puedes averiguar la longitud de una matriz (cuántos elementos contiene) exactamente de la misma manera que determinas la longitud (en caracteres) de una cadena— utilizando la propiedad {{jsxref("Array.prototype.length","length")}}. Prueba lo siguiente: +Puedes averiguar la longitud de un arreglo (cuántos elementos contiene) exactamente de la misma manera que determinas la longitud (en caracteres) de una cadena— utilizando la propiedad {{jsxref("Array.prototype.length","length")}}. Prueba lo siguiente: ```js sequence.length; // Deve devolver 7 ``` -Esto tiene otros usos, pero se usa más comunmente para indicarle a un ciclo que continúe hasta que haya recorrido todos los elementos de la matriz. Así por ejemplo: +Esto tiene otros usos, pero se usa más comunmente para indicarle a un ciclo que continúe hasta que haya recorrido todos los elementos del arreglo. Así por ejemplo: ```js let sequence = [1, 1, 2, 3, 5, 8, 13]; @@ -195,19 +195,19 @@ for (var i = 0; i < sequence.length; i++) { Aprenderás acerca de bucles correctamente en un artículo futuro, pero brevemente, éste código dice: -1. Comienza el bucle en el elemento de la posición 0 en la matriz. -2. Detén el bucle en el número de item igual a la longitud de la matriz. Esto funcionará para una matriz de cualquier longitid, pero en este caso el ciclo se detendrá en el elemento número 7 (esto es bueno, ya que el último elemento — que queremos que recorra el bucle — es 6. +1. Comienza el bucle en el elemento de la posición 0 en el arreglo. +2. Detén el bucle en el número de item igual a la longitud del arreglo. Esto funcionará para un arreglo de cualquier longitid, pero en este caso el ciclo se detendrá en el elemento número 7 (esto es bueno, ya que el último elemento — que queremos que recorra el bucle — es 6. 3. Para cada elemento, imprime en la consola del navegador con [`console.log()`](/es/docs/Web/API/console/log). -## Alguno métodos de matriz útiles +## Algunos métodos de arreglo útiles -En esta sección veremos algunos métodos bastante útiles relacionados con matrices que nos permiten dividir cadenas en elementos de matriz y viceversa, y agregar nuevos elementos en matrices. +En esta sección veremos algunos métodos bastante útiles relacionados con matrices que nos permiten dividir cadenas en elementos de arreglo y viceversa, y agregar nuevos elementos en matrices. ### Conversión entre matrices y cadenas -A menudo se te presentarán algunos datos brutos contenidos en una cadena larga y grande, y es posible que desees separar los elementos útiles de una forma más conveniente y luego hacerle cosas, como mostrarlos en una tabla de datos. Para hacer esto, podemos usar el método {{jsxref("String.prototype.split()","split()")}}. En su forma más simple, esto toma un único parámetro, el caracter que quieres separar de la cadena, y devuelve las subcadenas entre el separador como elementos en una matriz. +A menudo se te presentarán algunos datos brutos contenidos en una cadena larga y grande, y es posible que desees separar los elementos útiles de una forma más conveniente y luego hacerle cosas, como mostrarlos en una tabla de datos. Para hacer esto, podemos usar el método {{jsxref("String.prototype.split()","split()")}}. En su forma más simple, esto toma un único parámetro, el caracter que quieres separar de la cadena, y devuelve las subcadenas entre el separador como elementos en un arreglo. -> **Nota:** Bien, esto es técnicamente un método de cadena, no un método de matriz, pero lo hemos incluido con las matrices, ya que va bien aquí. +> **Nota:** Bien, esto es técnicamente un método de cadena, no un método de arreglo, pero lo hemos incluido con las matrices, ya que va bien aquí. 1. Vamos a jugar con esto, para ver como funciona. Primero, crea una cadena en tu consola: @@ -222,7 +222,7 @@ A menudo se te presentarán algunos datos brutos contenidos en una cadena larga myArray; ``` -3. Finalmente, intenta encontrar la longitud de tu nueva matriz y recuperar algunos elementos de ella: +3. Finalmente, intenta encontrar la longitud de tu nuevo arreglo y recuperar algunos elementos de ella: ```js myArray.length; @@ -238,16 +238,16 @@ A menudo se te presentarán algunos datos brutos contenidos en una cadena larga myNewString; ``` -5. Otra forma de convertir una matriz en cadena es usar el método {{jsxref("Array.prototype.toString()","toString()")}}. `toString()` es posiblemente más simple que `join()` ya que no toma un parámetro, pero es más limitado. Con `join()` puedes especificar diferentes separadores (intenta ejecutar el Paso 4 con un caracter diferente a la coma). +5. Otra forma de convertir un arreglo en cadena es usar el método {{jsxref("Array.prototype.toString()","toString()")}}. `toString()` es posiblemente más simple que `join()` ya que no toma un parámetro, pero es más limitado. Con `join()` puedes especificar diferentes separadores (intenta ejecutar el Paso 4 con un caracter diferente a la coma). ```js let dogNames = ["Rocket", "Flash", "Bella", "Slugger"]; dogNames.toString(); //Rocket,Flash,Bella,Slugger ``` -### Agregar y eliminar elementos de la matriz +### Agregar y eliminar elementos del arreglo -Todavia no hemos cubierto la posibilidad de agregar y eliminar elementos de la matriz — echemos un vistazo a esto ahora. Usaremos la matriz `myArray` con la que terminamos en la última sección. Si todavía no has seguido esa sección, primero crea la matriz en tu consola: +Todavia no hemos cubierto la posibilidad de agregar y eliminar elementos del arreglo — echemos un vistazo a esto ahora. Usaremos el arreglo `myArray` con la que terminamos en la última sección. Si todavía no has seguido esa sección, primero crea el arreglo en tu consola: ```js let myArray = [ @@ -260,9 +260,9 @@ let myArray = [ ]; ``` -Antes que nada, para añdir o eliminar un elemento al final de una matriz podemos usar {{jsxref("Array.prototype.push()","push()")}} y {{jsxref("Array.prototype.pop()","pop()")}} respectivamente. +Antes que nada, para añdir o eliminar un elemento al final de un arreglo podemos usar {{jsxref("Array.prototype.push()","push()")}} y {{jsxref("Array.prototype.pop()","pop()")}} respectivamente. -1. primero usemos `push()` — nota que necesitas incluir uno o más elementos que desees agregas al final de tu matriz. Prueba esto: +1. primero usemos `push()` — nota que necesitas incluir uno o más elementos que desees agregas al final de tu arreglo. Prueba esto: ```js myArray.push("Cardiff"); @@ -271,7 +271,7 @@ Antes que nada, para añdir o eliminar un elemento al final de una matriz podemo myArray; ``` -2. La nueva longitud de la matriz se devuelve cuando finaliza la llamada al método. Si quisieras almacenar la nueva longitud de matriz en una variable, podrías hacer algo como esto: +2. La nueva longitud del arreglo se devuelve cuando finaliza la llamada al método. Si quisieras almacenar la nueva longitud del arreglo en una variable, podrías hacer algo como esto: ```js let newLength = myArray.push("Bristol"); @@ -279,7 +279,7 @@ Antes que nada, para añdir o eliminar un elemento al final de una matriz podemo newLength; ``` -3. Eliminar el último elemento de una matriz es tan simple como ejecutar `pop()` en ella. Prueba esto: +3. Eliminar el último elemento de un arreglo es tan simple como ejecutar `pop()` en ella. Prueba esto: ```js myArray.pop(); @@ -293,7 +293,7 @@ Antes que nada, para añdir o eliminar un elemento al final de una matriz podemo removedItem; ``` -{{jsxref("Array.prototype.unshift()","unshift()")}} y {{jsxref("Array.prototype.shift()","shift()")}} funcionan exactamente igual de `push()` y `pop()`, respectivamente, excepto que funcionan al principio de la matriz, no al final. +{{jsxref("Array.prototype.unshift()","unshift()")}} y {{jsxref("Array.prototype.shift()","shift()")}} funcionan exactamente igual de `push()` y `pop()`, respectivamente, excepto que funcionan al principio del arreglo, no al final. 1. Primero `unshift()` — prueba el siguiente comando: @@ -314,9 +314,9 @@ Antes que nada, para añdir o eliminar un elemento al final de una matriz podemo Volvamos al ejemplo que describimos anteriormente — imprima los nombres de los productos y los precios en una factura, luego, sume los precios e imprímelos en la parte inferior. En el ejemplo editable a continuación, hay comentarios que contienen números — cada uno de estos marca un lugar donde debe agregar algo al código. Ellos son los siguientes: -1. Debajo de `// number 1` hay un número de cadena, cada una de las cuales contiene un nombre de producto y un precio separados por dos puntos. Nos gustaría que conviertas esto en una matriz y lo almacenamos en una matriz llamda `products`. -2. En la misma línea que el comentario `// number 2` es el comienzo de un ciclo for. En esta línea, actualmente tenemos `i <= 0`, que es una prueba condicional que hace que el [bucle for](/es/docs/Learn/JavaScript/First_steps/A_first_splash#loops) se detenga inmediatamente, porque dice "detener cuando `i` es menor o igual 0", y `i` comienza en 0. Nos gustaría que reemplazaras esto con una prueba condicional que detenga el ciclo cuando `i` no sea inferior a la longitud la matriz `products` . -3. Justo debajo del comentario `// number 3` queremos que escriba una línea de código que divide el elemento actual de la matriz (`nombre:precio`) en dos elementos separados, uno que contiene solo el nombre y otros que contienen solo el precio. Si no está seguro de cómo hacerlo, consulte el artículo [Métodos de cadenas útiles](/es/docs/Learn/JavaScript/First_steps/Useful_string_methods) para obtener ayuda o, mejor aún, consulte la sección [Conversión entre cadenas y matrices](#converting_between_strings_and_arrays) de este artículo. +1. Debajo de `// number 1` hay un número de cadena, cada una de las cuales contiene un nombre de producto y un precio separados por dos puntos. Nos gustaría que conviertas esto en un arreglo y lo almacenamos en un arreglo llamda `products`. +2. En la misma línea que el comentario `// number 2` es el comienzo de un ciclo for. En esta línea, actualmente tenemos `i <= 0`, que es una prueba condicional que hace que el [bucle for](/es/docs/Learn/JavaScript/First_steps/A_first_splash#loops) se detenga inmediatamente, porque dice "detener cuando `i` es menor o igual 0", y `i` comienza en 0. Nos gustaría que reemplazaras esto con una prueba condicional que detenga el ciclo cuando `i` no sea inferior a la longitud del arreglo `products` . +3. Justo debajo del comentario `// number 3` queremos que escriba una línea de código que divide el elemento actual del arreglo (`nombre:precio`) en dos elementos separados, uno que contiene solo el nombre y otros que contienen solo el precio. Si no está seguro de cómo hacerlo, consulte el artículo [Métodos de cadenas útiles](/es/docs/Learn/JavaScript/First_steps/Useful_string_methods) para obtener ayuda o, mejor aún, consulte la sección [Conversión entre cadenas y matrices](#converting_between_strings_and_arrays) de este artículo. 4. Como parte de la línea de código anterior, también querras convertir el precio de una cadena a un número. Si no pudes recordar como hacerlo, consulta el [primer artículo de cadenas](/es/docs/Learn/JavaScript/First_steps/Strings#numbers_versus_strings). 5. Hay una variable llamada `total` que se crea y se le da un valor de 0 en la parte superior del código. Dentro del ciclo (debajo de `// number 4`) queremos que agregues una línea que añade el precio actual del artículo a ese total en cada iteración del ciclo, de modo que al final del código el total correcto se imprima en la factura. Es posible que necesites un [operador de asignación](/es/docs/Learn/JavaScript/First_steps/Math#assignment_operators) para hacer esto. 6. Queremos que cambies la línea justo de bajo `// number 5` para que la variable `itemText` se iguale a "nombre de elemnto actual — $precio de elemento actual", por ejemplo "Zapatos — $23.99" en cada caso, por lo que la información correcta del artículo está impreso en la factura. Esto es simplemente una concatenación de cadenas, lo que debería ser familiar para ti. @@ -481,7 +481,7 @@ body { ## Aprendizaje Activo: Top 5 búsquedas -Un buen uso para los métodos de matriz como {{jsxref("Array.prototype.push()","push()")}} y {{jsxref("Array.prototype.pop()","pop()")}} es cuando estás manteniendo un registro de elementos actualmente activos en una aplicación web. En una escena animada por ejemplo, es posible que tengas una matriz de objetos que representan los gráficos de fondo que se muestran actualmente, y es posible que sólo desees que se muestren 50 a la vez, por razones de rendimiento o desorden. A medida que se crean y agregan nuevos objetos a la matriz, se puede eliminar los más antiguos de la matriz para mantener el número deseado. +Un buen uso para los métodos de arreglo como {{jsxref("Array.prototype.push()","push()")}} y {{jsxref("Array.prototype.pop()","pop()")}} es cuando estás manteniendo un registro de elementos actualmente activos en una aplicación web. En una escena animada por ejemplo, es posible que tengas un arreglo de objetos que representan los gráficos de fondo que se muestran actualmente, y es posible que sólo desees que se muestren 50 a la vez, por razones de rendimiento o desorden. A medida que se crean y agregan nuevos objetos al arreglo, se puede eliminar los más antiguos del arreglo para mantener el número deseado. En este ejemplo vamos a mostrar un uso mucho más simple — aquí te daremos un sitio de búsqueda falso, con un cuadro de búsqueda. La idea es que cuando los términos se ingresan en un cuadro de búsqueda, se muetren el top 5 de términos de búsqueda previos en la lista. Cuando el número de términos supera el 5, el último término comienza a borrarse cada vez que agregas un nuevo término a la parte superior, por lo que siempre se muestran los 5 términos anteriores. @@ -489,8 +489,8 @@ En este ejemplo vamos a mostrar un uso mucho más simple — aquí te daremos un Para completar la aplicación necesitamos: -1. Agregar una línea debajo del comentario `// number 1` que agrega el valor actual ingresado en la entrada de la búsqueda al inicio de la matriz. Esto se puede recuperar usando `searchInput.value`. -2. Agrega una línea debajo del comentario `// number 2` que elimina el valor actualmente al final de la matriz. +1. Agregar una línea debajo del comentario `// number 1` que agrega el valor actual ingresado en la entrada de la búsqueda al inicio del arreglo. Esto se puede recuperar usando `searchInput.value`. +2. Agrega una línea debajo del comentario `// number 2` que elimina el valor actualmente al final del arreglo. ```html hidden

            Salida en vivo

            @@ -661,7 +661,7 @@ textarea.onkeyup = function () { ## Conclusión -Después de leer este artículo, estamos seguros de que estaras de acuerdo en que las matrices parecen bastante útiles; las verás aparecer en todas partes en JavaScript, a menudo en asociación con bucles para hacer una misma cosa con cada elemento de la matriz. Te enseñaremos todos los aspectos básicos útiles que hay que conocer sobre los bucles en el siguiente módulo, pero por ahora debes darte un aplauso y tomarte un merecido descanso; ¡has trabajado en todos los artículos de este módulo! +Después de leer este artículo, estamos seguros de que estaras de acuerdo en que las matrices parecen bastante útiles; las verás aparecer en todas partes en JavaScript, a menudo en asociación con bucles para hacer una misma cosa con cada elemento del arreglo. Te enseñaremos todos los aspectos básicos útiles que hay que conocer sobre los bucles en el siguiente módulo, pero por ahora debes darte un aplauso y tomarte un merecido descanso; ¡has trabajado en todos los artículos de este módulo! Lo único que queda por hacer es trabajar a través de la evaluación de este módulo, que te pondrá a prueba tu comprensión de los de los artículos anteriores. From 5fb21a71f1bed90dd6d269d3faee68b25d529c5c Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Fri, 3 Nov 2023 19:10:54 +0100 Subject: [PATCH 89/91] fr - Update Glossary/MitM (#16815) * update glossary with gender neutral wordings * typofix * Adding missing link --------- Co-authored-by: tristantheb --- files/fr/glossary/mitm/index.md | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/files/fr/glossary/mitm/index.md b/files/fr/glossary/mitm/index.md index ae66e6f6c450f7..e7fc8bbd803c33 100644 --- a/files/fr/glossary/mitm/index.md +++ b/files/fr/glossary/mitm/index.md @@ -1,22 +1,24 @@ --- title: MitM slug: Glossary/MitM +l10n: + sourceCommit: 37bd8d794902f05bbb638eb3505cb87ccf38a992 --- {{GlossarySidebar}} -Une **attaque de l'homme du milieu** (Man-in-the-middle attack ou MitM) intercepte une communication entre deux systèmes. Par exemple, un routeur Wi-Fi peut être compromis. +Une **attaque du monstre du milieu** (en anglais manipulator-in-the-middle attack, abrégé en MitM) ou aussi attaque de l'homme du milieu consiste à intercepter une communication entre deux systèmes. Cela peut par exemple se produit lorsqu'un routeur Wi-Fi a été compromis. -En comparant cela au courrier physique : si vous échangez des lettres, le facteur peut intercepter chaque lettre que vous postez. Il l'ouvre, la lit, la modifie finalement, puis la reconditionne et seulement ensuite l'envoie à son destinataire initial. Celui-ci vous répond par lettre postée, et à nouveau, le facteur l'ouvre, la lit, la modifie éventuellement, la reconditionne et vous la remet. Vous ne savez pas qu'il y a un homme au milieu de votre canal de communication - le facteur est invisible pour vous et votre destinataire. +Prenons une analogie avec le courrier postal : si vous échangez des lettres, la factrice ou le facteur peut intercepter chaque lettre que vous postez : l'ouvrir, la lire, la modifier, puis la reconditionner et ensuite l'envoyer au destinataire initial. Lorsque ce dernier vous répond par courrier, à nouveau, la factrice ou le facteur peut l'ouvrir, la lire, la modifier éventuellement, la renvelopper et vous la remettre. Vous ne savez pas que votre courrier a été intercepté, le circuit de distribution du courrier est invisible pour vous et votre destinataire. -Dans le courrier physique et la communication en ligne, il est difficile de se défendre contre les attaques MitM. Quelques conseils : +Qu'il s'agisse du courrier postal ou des communications électroniques, il est difficile de se défendre contre les attaques MitM. Voici quelques conseils : -- Ne pas ignorer les avertissements de certificat. Vous pourriez être connecté à un serveur d'hameçonnage ou à un serveur imposteur. -- Les sites sensibles sans cryptage HTTPS sur les réseaux Wi-Fi publics ne sont pas fiables. -- Vérifiez "HTTPS" dans votre barre d'adresse et assurez-vous que le chiffrement est en place avant de vous connecter. +- N'ignorez pas les avertissements liés aux certificats. Vous pourriez être connecté à un serveur d'hameçonnage ou à un serveur imposteur. +- Les sites sensibles qui ne sont pas chiffrés à l'aide de HTTPS ne sont pas fiables sur les réseaux Wi-Fi publics. +- Avant de vous authentifier sur un site, vérifiez dans la barre d'URL que son adresse commence bien par `https://`, ce qui indique que le chiffrement est en place. ## Voir aussi -- Article OWASP : [Man-in-the-middle attack](https://www.owasp.org/index.php/Man-in-the-middle_attack) (en) -- Wikipédia : [Attaque de l'homme du milieu](https://fr.wikipedia.org/wiki/Attaque_de_l%27homme_du_milieu) -- L'en-tête {{HTTPHeader("Public-Key-Pins")}} ({{Glossary("HPKP")}}) peut significativement réduire le risque d'attaque MitM en demandant aux navigateurs d'exiger des certificats valides (liste blanche) pour toute connexion ultérieure à ce site. +- [La page OWASP sur les attaques du monstre du milieu (en anglais)](https://owasp.org/www-community/attacks/Manipulator-in-the-middle_attack) +- Le site PortSwigger : [les dernières actualités concernant les attaques du monstre du milieu (en anglais)](https://portswigger.net/daily-swig/mitm) +- [La page Wikipédia correspondante](https://fr.wikipedia.org/wiki/Attaque_de_l%27homme_du_milieu) From 60a252e734c0470253f14573821216b3f47f9fe3 Mon Sep 17 00:00:00 2001 From: Kei <66120473+kei-0917@users.noreply.github.com> Date: Sat, 4 Nov 2023 00:54:42 +0900 Subject: [PATCH 90/91] docs: fix a typo --- files/ja/web/javascript/language_overview/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/javascript/language_overview/index.md b/files/ja/web/javascript/language_overview/index.md index 9e789e383c157f..1f998343fdba64 100644 --- a/files/ja/web/javascript/language_overview/index.md +++ b/files/ja/web/javascript/language_overview/index.md @@ -52,7 +52,7 @@ JavaScript はマルチパラダイムの動的言語であり、型や演算子 ECMAScript には 2 つの組み込み数値型があります。 **Number** と **BigInt** です。 -Number 型は[IEEE 754 倍精度 64 ビットバイナリー値](https://ja.wikipedia.org/wiki/%E5%80%8D%E7%B2%BE%E5%BA%A6%E6%B5%AE%E5%8B%95%E5%B0%8F%E6%95%B0%E7%82%B9%E6%95%B0) (-(253 − 1) と 253 − 1 の間の数) です。そして、この記事や他の MDN の記事で「整数」という場合は、ふつう Number 値を使った整数の*表現*を意味しています。しかし、このような Number 値は本物の整数ではないので、少し注意が必要です。以下の例を見てください。 +Number 型は[IEEE 754 倍精度 64 ビットバイナリー値](https://ja.wikipedia.org/wiki/%E5%80%8D%E7%B2%BE%E5%BA%A6%E6%B5%AE%E5%8B%95%E5%B0%8F%E6%95%B0%E7%82%B9%E6%95%B0) (-(253 − 1) と 253 − 1 の間の数) です。そして、この記事や他の MDN の記事で「整数」という場合は、ふつう Number 値を使った整数の*表現*を意味しています。しかし、このような Number 値は本物の整数ではないので、少し注意が必要です。以下の例を見てください。 ```js console.log(3 / 2); // 1.5, 1 ではない From e74b28fa0131278cd46f9a9c555240b1eaf30ac8 Mon Sep 17 00:00:00 2001 From: Fu Yuchen <78291982+diolam@users.noreply.github.com> Date: Sat, 4 Nov 2023 15:55:19 +0800 Subject: [PATCH 91/91] Fix typo (#16819) --- files/zh-cn/web/css/_colon_left/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/zh-cn/web/css/_colon_left/index.md b/files/zh-cn/web/css/_colon_left/index.md index 2efb7905f122ef..964ad474488ace 100644 --- a/files/zh-cn/web/css/_colon_left/index.md +++ b/files/zh-cn/web/css/_colon_left/index.md @@ -14,9 +14,9 @@ slug: Web/CSS/:left } ``` -打印文档的"左"或"右"是由书写方向相关的。举个栗子，"从左到右"的书写方向中第一页应当使用 {{Cssxref(":right")}} 配置; "从右至左"的书写方向中第一页应当使用 `:left` 配置。 +打印文档的“左”或“右”是由书写方向相关的。举个例子，从左到右的书写方向中第一页应当使用 {{Cssxref(":right")}} 配置；从右至左的书写方向中第一页应当使用 `:left` 配置。 -> **备注：** 并不是所有样式属性都能应用在此选择器内。仅仅 {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, 和 {{ Cssxref("background") }} 等打印时需要的属性可以使用。其他属性将直接忽略，并且可以使用的属性也只会在打印时生效，显示时不会生效。 +> **备注：** 并不是所有样式属性都能应用在此选择器内。仅仅 {{ Cssxref("margin") }}、{{ Cssxref("padding") }}、{{ Cssxref("border") }} 和 {{ Cssxref("background") }} 等打印时需要的属性可以使用。其他属性将直接忽略，并且可以使用的属性也只会在打印时生效，显示时不会生效。 ## 参数