From 6062fd0a4704d12f74bf1fd07b2f83bc7954ba67 Mon Sep 17 00:00:00 2001 From: Jason Lam Date: Wed, 1 Nov 2023 09:20:43 +0800 Subject: [PATCH 01/32] [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 02/32] [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 03/32] =?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 04/32] 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 05/32] =?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 06/32] =?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 07/32] =?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 08/32] 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 09/32] =?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 10/32] =?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 11/32] =?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 12/32] =?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 13/32] =?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 14/32] =?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 15/32] =?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 16/32] =?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 17/32] =?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 18/32] =?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 19/32] [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 20/32] 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 21/32] 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 22/32] [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 23/32] 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 24/32] [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 25/32] 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 26/32] [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 27/32] 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 28/32] [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 29/32] 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 30/32] 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 31/32] 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 32/32] 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") }} 等打印时需要的属性可以使用。其他属性将直接忽略，并且可以使用的属性也只会在打印时生效，显示时不会生效。 ## 参数