From a83272dc61c46f3fdb9567b3b0838cdd2da0efba Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Thu, 27 Jun 2024 18:58:47 +0800 Subject: [PATCH 001/318] [zh-cn]: create the translation of `tabs.onHighlightChanged` event (#21886) --- .../api/tabs/onhighlightchanged/index.md | 85 +++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onhighlightchanged/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onhighlightchanged/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onhighlightchanged/index.md new file mode 100644 index 00000000000000..0530bd1fc2475b --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onhighlightchanged/index.md @@ -0,0 +1,85 @@ +--- +title: tabs.onHighlightChanged +slug: Mozilla/Add-ons/WebExtensions/API/tabs/onHighlightChanged +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c +--- + +{{AddonSidebar}} + +> **警告：** 此事件已被弃用。请使用 {{WebExtAPIRef("tabs.onHighlighted")}} 代替。 + +当窗口中高亮或选中的标签页更改时触发。 + +## 语法 + +```js-nolint +browser.tabs.onHighlightChanged.addListener(listener) +browser.tabs.onHighlightChanged.removeListener(listener) +browser.tabs.onHighlightChanged.hasListener(listener) +``` + +事件具有三个函数： + +- `addListener(listener)` + - : 向此事件添加一个监听器。 +- `removeListener(listener)` + - : 停止监听此事件。`listener` 参数是要移除的监听器。 +- `hasListener(listener)` + - : 检查 `listener` 是否已注册此事件。如果正在监听，则返回 `true`，否则返回 `false`。 + +## addListener 语法 + +### 参数 + +- `listener` + + - : 此事件发生时调用的函数。该函数接收以下参数： + + - `selectInfo` + - : `object`。详见 [selectInfo](#selectinfo_2) 部分。 + +## 附加对象 + +### selectInfo + +- `windowId` + - : `integer`。标签页发生变化的窗口。 +- `tabIds` + - : `integer` 数组。窗口中所有被高亮的标签页。 + +## 浏览器兼容性 + +{{Compat}} + +> **备注：** 该 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#event-onHighlightChanged) API。此文档来自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。 + + From aa75ad5c7190164f9d53e325608b84df1ba1a5b4 Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Thu, 27 Jun 2024 19:18:17 +0800 Subject: [PATCH 002/318] [zh-cn]: create the translation of `tabs.onReplaced` event (#21890) --- .../api/tabs/onreplaced/index.md | 93 +++++++++++++++++++ 1 file changed, 93 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onreplaced/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onreplaced/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onreplaced/index.md new file mode 100644 index 00000000000000..05ec36f8c05e1c --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onreplaced/index.md @@ -0,0 +1,93 @@ +--- +title: tabs.onReplaced +slug: Mozilla/Add-ons/WebExtensions/API/tabs/onReplaced +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c +--- + +{{AddonSidebar}} + +当一个标签页由于预渲染或立即被另一个标签页替换时触发。 + +除了 Chrome 浏览器之外的浏览器可能不支持这个事件。 + +## 语法 + +```js-nolint +browser.tabs.onReplaced.addListener(listener) +browser.tabs.onReplaced.removeListener(listener) +browser.tabs.onReplaced.hasListener(listener) +``` + +事件具有三个函数： + +- `addListener(listener)` + - : 向此事件添加一个监听器。 +- `removeListener(listener)` + - : 停止监听此事件。`listener` 参数是要移除的监听器。 +- `hasListener(listener)` + - : 检查 `listener` 是否已注册此事件。如果正在监听，则返回 `true`，否则返回 `false`。 + +## addListener 语法 + +### 参数 + +- `listener` + + - : 此事件发生时调用的函数。该函数接收以下参数： + + - `addedTabId` + - : `integer`。替换标签页的 ID。 + - `removedTabId` + - : `integer`。被替换标签页的 ID。 + +## 示例 + +监听替换事件，并记录相关信息： + +```js +function handleReplaced(addedTabId, removedTabId) { + console.log(`新标签页：${addedTabId}`); + console.log(`旧标签页：${removedTabId}`); +} + +browser.tabs.onReplaced.addListener(handleReplaced); +``` + +{{WebExtExamples}} + +## 浏览器兼容性 + +{{Compat}} + +> **备注：** 该 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#event-onReplaced) API。此文档来自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。 + + From 08475f207d94aafd44fdc5cd12da68bbec6c1867 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Thu, 27 Jun 2024 19:27:49 +0800 Subject: [PATCH 003/318] zh-CN: create Glossary/Progressive_web_apps (#21484) Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- .../glossary/progressive_web_apps/index.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 files/zh-cn/glossary/progressive_web_apps/index.md diff --git a/files/zh-cn/glossary/progressive_web_apps/index.md b/files/zh-cn/glossary/progressive_web_apps/index.md new file mode 100644 index 00000000000000..a268959f4a1d5d --- /dev/null +++ b/files/zh-cn/glossary/progressive_web_apps/index.md @@ -0,0 +1,19 @@ +--- +title: 渐进式 Web 应用程序 +slug: Glossary/Progressive_web_apps +l10n: + sourceCommit: 835d6632d59993861a0458510402787f8a2c3cb3 +--- + +{{GlossarySidebar}} + +渐进式 Web 应用程序（PWA）是使用 Web 平台技术构建的应用程序，但提供的用户体验类似于平台特定的应用程序。 + +这种应用程序享有 Web 的所有优点——例如通过搜索引擎发现、通过 {{Glossary("URL")}} 链接以及跨多个设备工作，但通过现代 API（例如 [Service Worker](/zh-CN/docs/Web/API/Service_Worker_API) 和[推送](/zh-CN/docs/Web/API/Push_API)）逐步增强。 + +这些功能包括可安装、离线工作以及便于与服务器同步和重新吸引用户。 + +## 参见 + +- MDN 上的[渐进式 Web 应用程序](/zh-CN/docs/Web/Progressive_web_apps) +- web.dev 上的[渐进式 Web 应用程序](https://web.dev/explore/progressive-web-apps) From 73b1c973d96cdd4935244848e1094ba73d6252c5 Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Thu, 27 Jun 2024 19:28:04 +0800 Subject: [PATCH 004/318] [zh-cn]: create the translation of `declarativeNetRequest.getEnabledRulesets()` method (#21329) Co-authored-by: A1lo --- .../getenabledrulesets/index.md | 62 +++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/getenabledrulesets/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/getenabledrulesets/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/getenabledrulesets/index.md new file mode 100644 index 00000000000000..5ba510316ee2a5 --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/getenabledrulesets/index.md @@ -0,0 +1,62 @@ +--- +title: declarativeNetRequest.getEnabledRulesets +slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/getEnabledRulesets +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c +--- + +{{AddonSidebar}} + +返回已启用的静态规则集的 ID。 + +## 语法 + +```js-nolint +let rulesetIds = await browser.declarativeNetRequest.getEnabledRulesets(); +``` + +### 参数 + +此函数不接受任何参数。 + +### 返回值 + +一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个包含静态规则集 ID 的字符串数组。如果没有启用的规则，则数组为空。如果请求失败，promise 将以错误消息拒绝。 + +## 示例 + +{{WebExtExamples}} + +## 浏览器兼容性 + +{{Compat}} + + From 362047f6a342380ef930b77347238097335a0d12 Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Thu, 27 Jun 2024 19:49:12 +0800 Subject: [PATCH 005/318] [zh-cn]: create the translation of `tabs.duplicate()` method (#21784) Co-authored-by: A1lo --- .../webextensions/api/tabs/duplicate/index.md | 105 ++++++++++++++++++ 1 file changed, 105 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/tabs/duplicate/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/duplicate/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/duplicate/index.md new file mode 100644 index 00000000000000..92c61f2ea10c89 --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/duplicate/index.md @@ -0,0 +1,105 @@ +--- +title: tabs.duplicate() +slug: Mozilla/Add-ons/WebExtensions/API/tabs/duplicate +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c +--- + +{{AddonSidebar}} + +根据标签页的 ID 复制一个标签页。 + +这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。 + +## 语法 + +```js-nolint +let duplicating = browser.tabs.duplicate( + tabId, // 整数 + duplicateProperties // 可选对象 +) +``` + +### 参数 + +- `tabId` + - : `integer`。要复制的标签页的 ID。 +- `duplicateProperties` {{optional_inline}} + + - : `object`。一个描述如何复制标签页的对象。它包含以下属性： + + - `index` {{optional_inline}} + - : `integer`。新标签页在窗口中的位置。该值的范围限制为零到窗口中标签页的数量。 + - `active` {{optional_inline}} + - : `boolean`。标签页是否成为窗口中的活动标签页。不影响窗口是否被聚焦。默认为 `true`。 + +### 返回值 + +一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会在复制标签页后兑现一个 {{WebExtAPIRef('tabs.Tab')}} 对象，描述复制的标签页的详细信息。如果扩展具有 [`"tabs"` 权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)或匹配的[主机权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#主机权限)，`Tab` 对象只包含 `url`、`title` 和 `favIconUrl`。如果发生任何错误，则该 promise 将以错误消息拒绝。 + +> **备注：** 从 Firefox 68 开始，browser.tabs.duplicate() 返回的 promise 在标签页被复制后立即兑现。以前，promise 只有在标签页完全加载后才会兑现。 + +## 示例 + +复制第一个标签页，然后记录新创建的标签页的 ID： + +```js +function onDuplicated(tabInfo) { + console.log(tabInfo.id); +} + +function onError(error) { + console.log(`发生错误：${error}`); +} + +// 复制数组中的第一个标签页 +function duplicateFirstTab(tabs) { + console.log(tabs); + if (tabs.length > 0) { + let duplicating = browser.tabs.duplicate(tabs[0].id); + duplicating.then(onDuplicated, onError); + } +} + +// 查询所有打开的标签页 +let querying = browser.tabs.query({}); +querying.then(duplicateFirstTab, onError); +``` + +{{WebExtExamples}} + +## 浏览器兼容性 + +{{Compat}} + +> **备注：** 此 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#method-duplicate) API。此文档源自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。 + + From 088e41ce2d9b1d82808a8eb435f9b0f1a979572c Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Thu, 27 Jun 2024 19:55:25 +0800 Subject: [PATCH 006/318] [zh-cn]: update the translation of `CanvasRenderingContext2D.createImageData()` method (#21991) Co-authored-by: A1lo --- .../createimagedata/index.md | 93 ++++++++++++------- 1 file changed, 62 insertions(+), 31 deletions(-) diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/createimagedata/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/createimagedata/index.md index 6b4d0a2a3747aa..54e445aeac3b34 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/createimagedata/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/createimagedata/index.md @@ -1,61 +1,100 @@ --- title: CanvasRenderingContext2D.createImageData() slug: Web/API/CanvasRenderingContext2D/createImageData +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 --- {{APIRef}} -**`CanvasRenderingContext2D.createImageData()`** 是 Canvas 2D API 创建一个新的、空白的、指定大小的 {{domxref("ImageData")}} 对象。所有的像素在新对象中都是透明的。 +Canvas 2D API 的 **`CanvasRenderingContext2D.createImageData()`** 方法用于创建一个新的、空白的、指定大小的 {{domxref("ImageData")}} 对象。所有的像素在新对象中都是透明的黑色。 ## 语法 -```plain -ImageData ctx.createImageData(width, height); -ImageData ctx.createImageData(imagedata); +```js-nolint +createImageData(width, height) +createImageData(width, height, settings) +createImageData(imagedata) ``` ### 参数 - `width` - - : {{domxref("ImageData")}} 新对象的宽度。 + - : 新 `ImageData` 对象的宽度。如果是负值，将围绕垂直轴翻转矩形。 - `height` - - : {{domxref("ImageData")}} 新对象的高度。 + - : 新 `ImageData` 对象的高度。如果是负值，将围绕水平轴翻转矩形。 +- `settings` {{optional_inline}} + - : 一个包含以下属性的对象： + - `colorSpace`：指定图像数据的色彩空间。可以设置为 `"srgb"` 表示 [sRGB 色彩空间](https://zh.wikipedia.org/wiki/SRGB色彩空间)，或 `"display-p3"` 表示 [display-p3 色彩空间](https://zh.wikipedia.org/wiki/DCI-P3)。 - `imagedata` - - : 从现有的 {{domxref("ImageData")}} 对象中，复制一个和其宽度和高度相同的对象。图像自身不允许被复制。 + - : 要复制宽度和高度的现有 `ImageData` 对象。**不**会复制图像本身。 ### 返回值 -指定了宽度和高度的，新的 {{domxref("ImageData")}} 对象。新对象使用透明的像素进行填充。 +指定了宽度和高度的，新的 {{domxref("ImageData")}} 对象。新对象使用透明的黑色像素进行填充。 -### 抛出错误 +### 错误 - `IndexSizeError` - - : 如果宽度或者高度变量值为零，会抛出此异常。 + - : 如果参数 `width` 或者 `height` 为零，会抛出此异常。 ## 示例 -### 使用 `createImageData` 方法 +### 创建空的 ImageData 对象 -这是一段简单地使用 `createImageData` 方法的代码片段。获取更多信息，请看 [canvas 像素控制](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas) 和 {{domxref("ImageData")}} 对象。 - -#### HTML +这段代码使用 `createImageData()` 方法创建一个空的 `ImageData` 对象。 ```html ``` -#### JavaScript +生成的对象宽度为 100 像素，高度为 50 像素，总共包含 5,000 个像素点。每个像素点在 `ImageData` 对象中由四个数组值表示，因此对象的 {{domxref("ImageData.data", "data")}} 属性的长度为 4 × 5,000，即 20,000。 ```js -var canvas = document.getElementById("canvas"); -var ctx = canvas.getContext("2d"); -ctx.rect(10, 10, 100, 100); -ctx.fill(); +const canvas = document.getElementById("canvas"); +const ctx = canvas.getContext("2d"); + +const imageData = ctx.createImageData(100, 50); +console.log(imageData); +// ImageData { width: 100, height: 50, data: Uint8ClampedArray[20000] } +``` + +### 填充空的 ImageData 对象 + +这个示例创建了一个新的 `ImageData` 对象，并使用紫色像素填充。 + +```html + +``` -console.log(ctx.createImageData(100, 100)); -// ImageData { width: 100, height: 100, data: Uint8ClampedArray[40000] } +由于每个像素点由四个值表示，`for` 循环每次迭代增加四个值。与每个像素相关联的数组值分别是 R（红色）、G（绿色）、B（蓝色）和 A（透明度），顺序如上。 + +```js +const canvas = document.getElementById("canvas"); +const ctx = canvas.getContext("2d"); +const imageData = ctx.createImageData(100, 100); + +// 遍历每个像素点 +for (let i = 0; i < imageData.data.length; i += 4) { + // 修改像素数据 + imageData.data[i + 0] = 190; // R 值 + imageData.data[i + 1] = 0; // G 值 + imageData.data[i + 2] = 210; // B 值 + imageData.data[i + 3] = 255; // A 值 +} + +// 将图像数据绘制到画布上 +ctx.putImageData(imageData, 20, 20); ``` +#### 结果 + +{{EmbedLiveSample("创建空的_ImageData_对象", 700, 180)}} + +### 更多示例 + +关于使用 `createImageData()` 和 `ImageData` 对象的更多示例，请参阅[使用 Canvas 进行像素操作](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas) 和 {{domxref("ImageData.data")}}。 + ## 规范 {{Specifications}} @@ -64,16 +103,8 @@ console.log(ctx.createImageData(100, 100)); {{Compat}} -### 兼容性注解 - -- 从 Gecko 5.0 开始： - - - 如果矩形小于指定的 1 个像素，`createImageData()` 会返回图像数据至少 1 个像素值。 - - 当调用 `createImageData()` 指定非限制值时，会抛出`NOT_SUPPORTED_ERR` exception 异常。 - - `createImageData()` 根据规定处理负数变量，会围绕对称轴翻转矩形区域。 - ## 参见 -- 接口定义，{{domxref("CanvasRenderingContext2D")}}. +- 定义此方法的接口：{{domxref("CanvasRenderingContext2D")}} - {{domxref("ImageData")}} -- [canvas 像素控制](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas) +- [使用 Canvas 进行像素操作](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas) From 5c28eca933ec827ea0a35c293dbcc922e51f3553 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Thu, 27 Jun 2024 20:18:18 +0800 Subject: [PATCH 007/318] zh-CN: create Glossary/Speed_index (#21539) Co-authored-by: A1lo --- files/zh-cn/glossary/speed_index/index.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 files/zh-cn/glossary/speed_index/index.md diff --git a/files/zh-cn/glossary/speed_index/index.md b/files/zh-cn/glossary/speed_index/index.md new file mode 100644 index 00000000000000..4e5d35ad94cc26 --- /dev/null +++ b/files/zh-cn/glossary/speed_index/index.md @@ -0,0 +1,22 @@ +--- +title: 速度指数 +slug: Glossary/Speed_index +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**速度指数**（SI）页面加载性能指标用于衡量页面可见内容的加载速度。速度指数取决于视口的大小，以毫秒为单位表示：时间越短，得分越高。 + +速度指数是为了解决其他里程碑和指标的问题，提供真实用户体验的度量。速度指数已经在几个常见的审核中实现，包括 [WebPageTest](https://github.com/WPO-Foundation/webpagetest-docs/blob/main/src/metrics/SpeedIndex.md) 和 [Lighthouse](https://github.com/paulirish/speedline)。 + +速度指数的计算方式是：在页面可视内容完全加载之前，每隔 100 毫秒计算一次页面可视内容加载完成的百分比。指数的总分则是同样间隔内未完全显示的屏幕百分比之和。 + +_显示了页面加载事件之前的首屏内容如何加载和由速度指数测量所得的图表_： + +![速度指数的计算](speedindex.png) + +## 参见 + +- [了解 Web 性能](/zh-CN/docs/Learn/Performance) From 5b43e5979066f62d5e7ede26cb14bc4099fdb818 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Thu, 27 Jun 2024 20:18:38 +0800 Subject: [PATCH 008/318] zh-CN: create Glossary/SCTP (#21571) Co-authored-by: Tianyi Tao Co-authored-by: A1lo --- files/zh-cn/glossary/sctp/index.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 files/zh-cn/glossary/sctp/index.md diff --git a/files/zh-cn/glossary/sctp/index.md b/files/zh-cn/glossary/sctp/index.md new file mode 100644 index 00000000000000..2d7f0d246ed0a6 --- /dev/null +++ b/files/zh-cn/glossary/sctp/index.md @@ -0,0 +1,15 @@ +--- +title: SCTP +slug: Glossary/SCTP +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**SCTP**（流控制传输{{glossary("Protocol", "协议")}}）是一项用于传输协议的 {{glossary("IETF")}} 标准，它能够可靠地按顺序传输消息，同时提供拥塞控制、多宿及其他特性，以提高连接的可靠性和稳定性。它用于通过互联网发送传统电话呼叫，但也用于 {{glossary("WebRTC")}} 数据。 + +## 参见 + +- {{RFC(4960, "流控制传输协议")}} +- 维基百科上的[流控制传输协议](https://zh.wikipedia.org/wiki/流控制传输协议) From 1e600c02422368bdb246f4586e853398f2a4b987 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Thu, 27 Jun 2024 20:19:02 +0800 Subject: [PATCH 009/318] zh-CN: create Glossary/Reporting_directive (#21598) Co-authored-by: A1lo --- .../glossary/reporting_directive/index.md | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 files/zh-cn/glossary/reporting_directive/index.md diff --git a/files/zh-cn/glossary/reporting_directive/index.md b/files/zh-cn/glossary/reporting_directive/index.md new file mode 100644 index 00000000000000..965f915c625652 --- /dev/null +++ b/files/zh-cn/glossary/reporting_directive/index.md @@ -0,0 +1,28 @@ +--- +title: 报告指令 +slug: Glossary/Reporting_directive +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**{{Glossary("CSP")}} 报告指令**用于 {{HTTPHeader("Content-Security-Policy")}} 标头，控制 CSP 违规报告的过程。 + +详见[报告指令](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy#报告指令)以获取完整列表。 + +## 参见 + +- [术语](/zh-CN/docs/Glossary) + + - {{Glossary("CSP", "内容安全策略")}} + - {{Glossary("Fetch directive", "Fetch 指令")}} + - {{Glossary("Document directive", "文档指令")}} + - {{Glossary("Navigation directive", "导航指令")}} + +- 参考 + + - + - {{HTTPHeader("Content-Security-Policy/upgrade-insecure-requests", "upgrade-insecure-requests")}} + - {{HTTPHeader("Content-Security-Policy/block-all-mixed-content", "block-all-mixed-content")}} + - {{HTTPHeader("Content-Security-Policy")}} From ea2b6720345d0ac39ffbb83d11d55e0f772e601c Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Thu, 27 Jun 2024 20:19:23 +0800 Subject: [PATCH 010/318] zh-CN: create Glossary/SCM (#21575) --- files/zh-cn/glossary/scm/index.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 files/zh-cn/glossary/scm/index.md diff --git a/files/zh-cn/glossary/scm/index.md b/files/zh-cn/glossary/scm/index.md new file mode 100644 index 00000000000000..7be573540c7d37 --- /dev/null +++ b/files/zh-cn/glossary/scm/index.md @@ -0,0 +1,16 @@ +--- +title: SCM +slug: Glossary/SCM +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +SCM（源代码管理）是一种管理源代码的系统。通常它指的是使用软件来处理源文件的版本控制。程序员可以修改源代码文件而不用担心编辑掉有用的东西，因为 SCM 会跟踪源代码的更改情况以及谁做了更改。 + +SCM 系统包括 CVS、SVN、GIT。 + +## 参见 + +- 维基百科上的[版本控制](https://zh.wikipedia.org/wiki/版本控制) From 18ddebde7816d9699b9a3286b278d80f8706e7a7 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Thu, 27 Jun 2024 22:32:45 +0800 Subject: [PATCH 011/318] zh-CN: update Glossary/Sloppy_mode (#21548) Co-authored-by: A1lo --- files/zh-cn/glossary/sloppy_mode/index.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/files/zh-cn/glossary/sloppy_mode/index.md b/files/zh-cn/glossary/sloppy_mode/index.md index 98df968f1b7962..465840b8fd0689 100644 --- a/files/zh-cn/glossary/sloppy_mode/index.md +++ b/files/zh-cn/glossary/sloppy_mode/index.md @@ -1,16 +1,16 @@ --- title: 正常模式 slug: Glossary/Sloppy_mode +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -因为翻译原因，正常模式也被翻译为——马虎模式/稀松模式/懒散模式 +{{Glossary("ECMAScript")}} 5 及更高版本允许脚本选择进入新的[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)，其会以多种方式改变 JavaScript 的语义，以提高其弹性，并使在出现问题时更容易理解发生了什么。 -{{Glossary("ECMAScript")}} 5 以及其后续的版本可以选择性的使用一种新模式——严格模式 ([strict mode](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode))，这种严格模式在多个方面改变了 JavaScript 的语义，从而使得当出现问题时我们更好的理解到底发生了什么。 - -常见的，非严格模式——平时我们会称之为正常模式 (**sloppy mode)，**这并不是一个官方说法，但是你会经常见到如上的一些说法，其意义就是指代非严格模式，即正常模式。 +JavaScript 的正常、非严格模式有时被称为**正常模式**（sloppy mode）。这不是一个官方的称呼，但如果你花时间编写严格的 JavaScript 代码，你可能会遇到这个术语。 ## 参见 -- "[Strict Mode](http://speakingjs.com/es5/ch07.html#strict_mode)"，第七章 ("JavaScript Syntax")，《Speaking _JavaScript》_ +- [“严格模式”](http://speakingjs.com/es5/ch07.html#strict_mode)，《Speaking _JavaScript_》的第七章（“JavaScript 语法”） From 846c758f9b1f9ac564088d08c004fa533a65d50e Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Thu, 27 Jun 2024 22:35:01 +0800 Subject: [PATCH 012/318] zh-CN: update Glossary/SMTP (#21546) Co-authored-by: A1lo --- files/zh-cn/glossary/smtp/index.md | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/files/zh-cn/glossary/smtp/index.md b/files/zh-cn/glossary/smtp/index.md index 5bb4d8e903f94f..4454b537047682 100644 --- a/files/zh-cn/glossary/smtp/index.md +++ b/files/zh-cn/glossary/smtp/index.md @@ -1,23 +1,22 @@ --- title: SMTP slug: Glossary/SMTP +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -**SMTP**（Simple Mail Transfer Protocol，简单邮件传输协议）是用于发送的邮件的[协议](/zh-CN/docs/Glossary/Protocol)。类似于[POP3](/zh-CN/docs/Glossary/POP)和[NNTP](/zh-CN/docs/Glossary/NNTP)，它是一个[状态机](/zh-CN/docs/Glossary/State_machine)驱动的协议 +**SMTP**（简单邮件传输协议）是用于发送的邮件的{{glossary("protocol", "协议")}}。与{{glossary("POP", "邮局协议")}}和{{glossary("NNTP", "网络新闻传输协议")}}一样，它是一个{{Glossary("state machine", "状态机")}}驱动的协议。 -该协议相对简单。最复杂的部分在于添加支持不同的验证机制（[GSSAPI](https://en.wikipedia.org/wiki/Generic_Security_Services_Application_Program_Interface)， [CRAM-MD5](https://en.wikipedia.org/wiki/CRAM-MD5)，[NTLM](https://en.wikipedia.org/wiki/NTLM)，MSN，AUTH LOGIN，AUTH PLAIN 等），处理错误响应以及在验证机制错误时进行状态回退（如服务器声明其支持某种机制但其实并不）。 +该协议相对简单。最复杂的部分在于添加对不同的验证机制（[GSSAPI](https://en.wikipedia.org/wiki/Generic_Security_Services_Application_Program_Interface)、[CRAM-MD5](https://en.wikipedia.org/wiki/CRAM-MD5)、[NTLM](https://en.wikipedia.org/wiki/NTLM)、MSN、AUTH LOGIN、AUTH PLAIN 等）的支持、处理错误响应以及在验证机制错误时进行状态回退（如服务器声明其支持某种机制但其实并不）。 ## 参见 +- 维基百科上的 [SMTP](https://zh.wikipedia.org/wiki/SMTP) - [术语表](/zh-CN/docs/Glossary) - - [NNTP](/zh-CN/docs/Glossary/NNTP) - - [POP3](/zh-CN/docs/Glossary/POP) - - [协议](/zh-CN/docs/Glossary/Protocol) - - [状态机](/zh-CN/docs/Glossary/State_machine) - -- 维基百科 - - - [SMTP](https://zh.wikipedia.org/wiki/SMTP) + - {{glossary("NNTP", "网络新闻传输协议")}} + - {{glossary("POP", "邮局协议")}} + - {{glossary("protocol", "协议")}} + - {{Glossary("state machine", "状态机")}} From 356f7889a1698e77b796d59dea6099049fbcd02b Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Thu, 27 Jun 2024 22:35:27 +0800 Subject: [PATCH 013/318] zh-CN: create Glossary/Snap_positions (#21544) Co-authored-by: A1lo --- files/zh-cn/glossary/snap_positions/index.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 files/zh-cn/glossary/snap_positions/index.md diff --git a/files/zh-cn/glossary/snap_positions/index.md b/files/zh-cn/glossary/snap_positions/index.md new file mode 100644 index 00000000000000..c911b08be5bb1b --- /dev/null +++ b/files/zh-cn/glossary/snap_positions/index.md @@ -0,0 +1,12 @@ +--- +title: 吸附位置 +slug: Glossary/Snap_positions +l10n: + sourceCommit: d267a8cb862c20277f81bbc223221b36b0c613e6 +--- + +{{GlossarySidebar}} + +吸附位置是滚动操作完成后[滚动口](/zh-CN/docs/Glossary/Scroll_container)停止移动的点。设置吸附位置可以创建一个浏览内容的滚动体验，而不需要将内容拖动到视图中。 + +吸附位置设置在[滚动容器](/zh-CN/docs/Glossary/Scroll_container)上。参见 [CSS 滚动吸附](/zh-CN/docs/Web/CSS/CSS_scroll_snap)属性。 From 78723a37d9f5b76a85b50a84bcae7ce8aa623701 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 23 Jun 2024 11:06:15 +0900 Subject: [PATCH 014/318] =?UTF-8?q?2024/06/14=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/glossary/base64/index.md | 349 +++++------------------------- 1 file changed, 59 insertions(+), 290 deletions(-) diff --git a/files/ja/glossary/base64/index.md b/files/ja/glossary/base64/index.md index feab77654f76bd..078f0e04638d20 100644 --- a/files/ja/glossary/base64/index.md +++ b/files/ja/glossary/base64/index.md @@ -2,331 +2,100 @@ title: Base64 slug: Glossary/Base64 l10n: - sourceCommit: 04e75ce1f83a591a576f52b143f195133bfcbe96 + sourceCommit: 3b8be0ad781b128b70ef0d208de84932755eb4d0 --- {{GlossarySidebar}} -**Base64** とは、[バイナリーからテキストへの符号化](https://en.wikipedia.org/wiki/Binary-to-text_encoding)を行う手法のグループであり、バイナリーデータを 64 を基数とする表現に変換することで、 ASCII 文字列で表すことができます。_Base64_ という呼び方は、 [MIME の Content-Transfer-Encoding](https://ja.wikipedia.org/wiki/MIME#Content-Transfer-Encoding) における特定の符号化方式の名前に由来します。 +**Base64** とは、[バイナリーからテキストへの符号化](https://en.wikipedia.org/wiki/Binary-to-text_encoding)を行う手法のグループであり、バイナリーデータを 64 を基数とする表現に変換することで、{{glossary("ASCII")}} 文字列で表すことができます。_Base64_ という用語は、 [MIME の Content-Transfer-Encoding](https://ja.wikipedia.org/wiki/MIME#Content-Transfer-Encoding) における特定の符号化方式の名前に由来します。 -Base64 符号化方式がよく使われるのは、テキストデータを扱うよう設計されたメディア上で、バイナリーデータを格納または転送する必要がある場合です。Base64 符号化により、転送中に変換されることなく、バイナリーデータがそのままであることを保証できます。Base64 は、[MIME](https://ja.wikipedia.org/wiki/MIME) による電子メールや [XML](/ja/docs/Web/XML) における複合型データの格納など、多くのアプリケーションで幅広く使われています。 +"Base64" という用語が自分自身で具体的な{{glossary("algorithm", "アルゴリズム")}}を参照するために使用される場合、それは一般的に [RFC 4648](https://datatracker.ietf.org/doc/html/rfc4648) の第 4 章で概説された Base64 のバージョンを参照します。これは、64 進数を表すための以下のアルファベットと、同時にパディング文字として `=` を使用します。 -ウェブにおける Base64 符号化のよくある用途の一つが、バイナリーデータを符号化することで [data: URL](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) に入れられるようにすることです。 - -JavaScript には、Base64 文字列のエンコードとデコードのそれぞれに対応した、次の 2 つの関数があります。 +```plain +ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/ +``` -- [`btoa()`](/ja/docs/Web/API/btoa): バイナリーデータの「文字列」から Base64 で符号化された ASCII 文字列を生成します ("btoa" は "binary to ASCII" と読んでください)。 -- [`atob()`](/ja/docs/Web/API/atob): Base64 で符号化された文字列をデコードします ("atob" は "ASCII to binary" と読んでください)。 +よくある変化形は "Base64 URL safe" で、{{glossary("URL")}} のパス部分やクエリー引数で問題が発生する可能性のある文字を避けるために、パディングを除外して `+/` を `-_` に置き換えます。パス部分またはクエリー引数にデータを格納しない場合は、このエンコード方式は必要ありません。例えば、[データ URL](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) にはどちらもないので、標準の Base64 エンコードを使用することができます。 -`atob()` と `btoa()` のアルゴリズムは、 [RFC 4648](https://datatracker.ietf.org/doc/html/rfc4648) section 4 で定義されています。 +Base64 エンコード方式は、ASCII テキスト（または任意のバイナリーデータを受け入れるにはまだ不十分な ASCII のスーパーセット）しか扱えないメディア上で保存や送信を行う際に、バイナリーデータをエンコードするために一般的に使用されます。これにより、転送中にデータが変更されることなく、そのままの状態を確実に保持します。Base64 の一般的な用途としては、以下のものがあります。 -なお、 `btoa()` はバイナリーデータを受け取ることを期待しているため、与えられた文字列に UTF-16 表現の 2 バイト以上を占める文字が含まれていると例外が発生します。詳しくは、 [`btoa()`](/ja/docs/Web/API/btoa) のドキュメントを参照してください。 +- [MIME](https://ja.wikipedia.org/wiki/MIME) による電子メールの場合 +- [XML](/ja/docs/Web/XML) に複雑なデータを格納する場合 +- バイナリーデータをエンコードして [`data:` URL](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) に含めることができるようにする場合 -#### 符号化によるサイズの増加 +## 符号化によるサイズの増加 Base64 の 1 文字はデータのちょうど 6 ビット分を表します。そのため、入力される文字列やバイナリーファイルに含まれる 3 バイト（3×8 ビット = 24 ビット）は、4 桁の Base64 で表されます（4×6 = 24 ビット）。 -このことにより、Base64 で表された文字列またはファイルは、元のサイズの 133% の大きさになると言えます（33% の増加）。エンコードされるデータが小さい場合は、さらに増加幅が大きくなります。例えば、`length === 1` である文字列 `"a"` は、エンコードされて `length === 4` の文字列 `"YQ=="` になり、これは 300% の増加です。 - -## 「Unicode 問題」 - -JavaScript の文字列は 16 ビットでエンコードされているので、ほとんどのブラウザーでは、 Unicode 文字列に対して `window.btoa` を呼び出すと、文字が 8 ビット ASCII エンコード文字の範囲を超えた場合に `Character Out Of Range` という例外が発生します。この問題を解決するために、 2 つの使用可能な方法があります。 - -- 最初の方法は、文字列全体をエスケープしてからエンコードする方法です。 -- もう 1 つは、 UTF-16 文字列を UTF-8 文字の配列に変換してからエンコードする方法です。 +つまり、文字列やファイルを Base64 にすると、通常、その文字列のソースよりもおよそ 3 分の 1 大きくなります（正確なサイズの増加は、文字列の絶対長、その長さのモジュロ 3、パディング文字を使用しているかどうかなど、さまざまな要因に依存します）。 -以下に、使用可能な2つの方法を示します。 +## JavaScript の対応 -### 解決策その 1 - 文字列をエンコードする前にエスケープする +ブラウザーは、Base64 文字列をデコードしたりエンコードしたりするための 2 つの JavaScript の関数をネイティブで提供しています。 -```js -function utf8_to_b64(str) { - return window.btoa(unescape(encodeURIComponent(str))); -} +- {{domxref("Window.btoa()")}}（{{domxref("WorkerGlobalScope.btoa()", "ワーカーでも利用可能", "", "nocode")}}）: バイナリーデータの文字列から Base64 エンコード方式の ASCII 文字列を作成します（"btoa" は "binary to ASCII" と読んでください）。 +- {{domxref("Window.atob()")}}（{{domxref("WorkerGlobalScope.atob()", "ワーカーでも利用可能", "", "nocode")}}）: Base64 エンコード方式の文字列をデコードします（"atob" は "ASCII to binary" と読んでください）。 -function b64_to_utf8(str) { - return decodeURIComponent(escape(window.atob(str))); -} +> **メモ:** Base64 はテキストエンコードではなくバイナリーエンコード方式ですが、`btoa` と `atob` はウェブプラットフォームがバイナリーデータ型に対応する前に追加されました。その結果、2 つの関数は文字列を使用してバイナリーデータを表しており、各文字の{{glossary("code point", "コードポイント")}}が各バイトの値を表します。このため、`btoa` は任意のテキストデータをエンコードするために使用することができます。例えば、テキストや HTML 文書の Base64 `data:` URL を作成する場合などです。 +> +> しかし、バイトとコードポイントの対応が確実に成り立つのは `0x7f` までのコードポイントだけです。さらに、`0xff` を超えるコードポイントは、1 バイトの最大値を超えるために `btoa` でエラーが発生します。次の節では、任意の Unicode テキストをエンコードするときに、この制限を回避するためにどのように作業するかについて詳しく説明します。 -// Usage: -utf8_to_b64("✓ à la mode"); // "4pyTIMOgIGxhIG1vZGU=" -b64_to_utf8("4pyTIMOgIGxhIG1vZGU="); // "✓ à la mode" -``` +## 「Unicode 問題」 -この解決策は [Johan Sundström](https://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html) によって提案されたものです。 +`btoa` は入力文字列のコードポイントをバイト値として解釈するため、文字列に対して `btoa` を呼び出すと、文字のコードポイントが `0xff` を超えた場合に "Character Out Of Range" 例外が発生します。任意の Unicode テキストをエンコードする必要がある使用する用途では、まず文字列を {{glossary("UTF-8")}} で構成されるバイト列に変換し、それからバイト列をエンコードする必要があります。 -もう一つの使用可能な解決策は、今では非推奨となっている 'unescape' と 'escape' 関数を使用しないものです。 -しかし、この方法では、入力文字列の base64 エンコーディングは行われません。 -`utf8_to_b64` と `b64EncodeUnicode` の出力の違いに注意してください。 -この代替手段を採用すると、他のアプリケーションとの相互運用性の問題が発生する可能性があります。 +最も単純な解決策は、 `TextEncoder` と `TextDecoder` を使用して文字列の UTF-8 と単一のバイト表現を変換することです。 ```js -function b64EncodeUnicode(str) { - return btoa(encodeURIComponent(str)); +function base64ToBytes(base64) { + const binString = atob(base64); + return Uint8Array.from(binString, (m) => m.codePointAt(0)); } -function UnicodeDecodeB64(str) { - return decodeURIComponent(atob(str)); +function bytesToBase64(bytes) { + const binString = Array.from(bytes, (byte) => + String.fromCodePoint(byte), + ).join(""); + return btoa(binString); } -b64EncodeUnicode("✓ à la mode"); // "JUUyJTlDJTkzJTIwJUMzJUEwJTIwbGElMjBtb2Rl" -UnicodeDecodeB64("JUUyJTlDJTkzJTIwJUMzJUEwJTIwbGElMjBtb2Rl"); // "✓ à la mode" +// 使用方法 +bytesToBase64(new TextEncoder().encode("a Ā 𐀀 文 🦄")); // "YSDEgCDwkICAIOaWhyDwn6aE" +new TextDecoder().decode(base64ToBytes("YSDEgCDwkICAIOaWhyDwn6aE")); // "a Ā 𐀀 文 🦄" ``` -### 解決策その 2 - `atob()` と `btoa()` を `TypedArray` と UTF-8 を使用して書き直す - -> **メモ:** 以下のコードは、 [ArrayBuffer](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) を Base64 文字列から取得する場合、またはその逆の場合にも有用です（[下記参照](#付録_base64_文字列を_uint8array_または_arraybuffer_へデコード)）。 +## 任意のバイナリーデータの変換 -```js -"use strict"; -// Array of bytes to Base64 string decoding -function b64ToUint6(nChr) { - return nChr > 64 && nChr < 91 - ? nChr - 65 - : nChr > 96 && nChr < 123 - ? nChr - 71 - : nChr > 47 && nChr < 58 - ? nChr + 4 - : nChr === 43 - ? 62 - : nChr === 47 - ? 63 - : 0; -} - -function base64DecToArr(sBase64, nBlocksSize) { - const sB64Enc = sBase64.replace(/[^A-Za-z0-9+/]/g, ""); - const nInLen = sB64Enc.length; - const nOutLen = nBlocksSize - ? Math.ceil(((nInLen * 3 + 1) >> 2) / nBlocksSize) * nBlocksSize - : (nInLen * 3 + 1) >> 2; - const taBytes = new Uint8Array(nOutLen); - - let nMod3; - let nMod4; - let nUint24 = 0; - let nOutIdx = 0; - for (let nInIdx = 0; nInIdx < nInLen; nInIdx++) { - nMod4 = nInIdx & 3; - nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << (6 * (3 - nMod4)); - if (nMod4 === 3 || nInLen - nInIdx === 1) { - nMod3 = 0; - while (nMod3 < 3 && nOutIdx < nOutLen) { - taBytes[nOutIdx] = (nUint24 >>> ((16 >>> nMod3) & 24)) & 255; - nMod3++; - nOutIdx++; - } - nUint24 = 0; - } - } - - return taBytes; -} - -/* Base64 string to array encoding */ -function uint6ToB64(nUint6) { - return nUint6 < 26 - ? nUint6 + 65 - : nUint6 < 52 - ? nUint6 + 71 - : nUint6 < 62 - ? nUint6 - 4 - : nUint6 === 62 - ? 43 - : nUint6 === 63 - ? 47 - : 65; -} - -function base64EncArr(aBytes) { - let nMod3 = 2; - let sB64Enc = ""; - - const nLen = aBytes.length; - let nUint24 = 0; - for (let nIdx = 0; nIdx < nLen; nIdx++) { - nMod3 = nIdx % 3; - if (nIdx > 0 && ((nIdx * 4) / 3) % 76 === 0) { - sB64Enc += "\r\n"; - } - - nUint24 |= aBytes[nIdx] << ((16 >>> nMod3) & 24); - if (nMod3 === 2 || aBytes.length - nIdx === 1) { - sB64Enc += String.fromCodePoint( - uint6ToB64((nUint24 >>> 18) & 63), - uint6ToB64((nUint24 >>> 12) & 63), - uint6ToB64((nUint24 >>> 6) & 63), - uint6ToB64(nUint24 & 63), - ); - nUint24 = 0; - } - } - return ( - sB64Enc.substr(0, sB64Enc.length - 2 + nMod3) + - (nMod3 === 2 ? "" : nMod3 === 1 ? "=" : "==") - ); -} +前の節の `bytesToBase64` と `base64ToBytes` 関数を直接使用して、Base64 文字列と [`Uint8Array`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) を変換することができます。 -/* UTF-8 array to JS string and vice versa */ +パフォーマンスを向上させるために、[`FileReader`](/ja/docs/Web/API/FileReader) と [`fetch`](/ja/docs/Web/API/Fetch_API) API を介して、base64 データ URL 同士の非同期変換がウェブプラットフォーム内でネイティブにできます。 -function UTF8ArrToStr(aBytes) { - let sView = ""; - let nPart; - const nLen = aBytes.length; - for (let nIdx = 0; nIdx < nLen; nIdx++) { - nPart = aBytes[nIdx]; - sView += String.fromCodePoint( - nPart > 251 && nPart < 254 && nIdx + 5 < nLen /* six bytes */ - ? /* (nPart - 252 << 30) may be not so safe in ECMAScript! So…: */ - (nPart - 252) * 1073741824 + - ((aBytes[++nIdx] - 128) << 24) + - ((aBytes[++nIdx] - 128) << 18) + - ((aBytes[++nIdx] - 128) << 12) + - ((aBytes[++nIdx] - 128) << 6) + - aBytes[++nIdx] - - 128 - : nPart > 247 && nPart < 252 && nIdx + 4 < nLen /* five bytes */ - ? ((nPart - 248) << 24) + - ((aBytes[++nIdx] - 128) << 18) + - ((aBytes[++nIdx] - 128) << 12) + - ((aBytes[++nIdx] - 128) << 6) + - aBytes[++nIdx] - - 128 - : nPart > 239 && nPart < 248 && nIdx + 3 < nLen /* four bytes */ - ? ((nPart - 240) << 18) + - ((aBytes[++nIdx] - 128) << 12) + - ((aBytes[++nIdx] - 128) << 6) + - aBytes[++nIdx] - - 128 - : nPart > 223 && nPart < 240 && nIdx + 2 < nLen /* three bytes */ - ? ((nPart - 224) << 12) + - ((aBytes[++nIdx] - 128) << 6) + - aBytes[++nIdx] - - 128 - : nPart > 191 && nPart < 224 && nIdx + 1 < nLen /* two bytes */ - ? ((nPart - 192) << 6) + aBytes[++nIdx] - 128 - : /* nPart < 127 ? */ /* one byte */ - nPart, - ); - } - return sView; +```js +async function bytesToBase64DataUrl(bytes, type = "application/octet-stream") { + return await new Promise((resolve, reject) => { + const reader = Object.assign(new FileReader(), { + onload: () => resolve(reader.result), + onerror: () => reject(reader.error), + }); + reader.readAsDataURL(new File([bytes], "", { type })); + }); } -function strToUTF8Arr(sDOMStr) { - let aBytes; - let nChr; - const nStrLen = sDOMStr.length; - let nArrLen = 0; - - /* mapping… */ - for (let nMapIdx = 0; nMapIdx < nStrLen; nMapIdx++) { - nChr = sDOMStr.codePointAt(nMapIdx); - - if (nChr > 65536) { - nMapIdx++; - } - - nArrLen += - nChr < 0x80 - ? 1 - : nChr < 0x800 - ? 2 - : nChr < 0x10000 - ? 3 - : nChr < 0x200000 - ? 4 - : nChr < 0x4000000 - ? 5 - : 6; - } - - aBytes = new Uint8Array(nArrLen); - - /* transcription… */ - let nIdx = 0; - let nChrIdx = 0; - while (nIdx < nArrLen) { - nChr = sDOMStr.codePointAt(nChrIdx); - if (nChr < 128) { - /* one byte */ - aBytes[nIdx++] = nChr; - } else if (nChr < 0x800) { - /* two bytes */ - aBytes[nIdx++] = 192 + (nChr >>> 6); - aBytes[nIdx++] = 128 + (nChr & 63); - } else if (nChr < 0x10000) { - /* three bytes */ - aBytes[nIdx++] = 224 + (nChr >>> 12); - aBytes[nIdx++] = 128 + ((nChr >>> 6) & 63); - aBytes[nIdx++] = 128 + (nChr & 63); - } else if (nChr < 0x200000) { - /* four bytes */ - aBytes[nIdx++] = 240 + (nChr >>> 18); - aBytes[nIdx++] = 128 + ((nChr >>> 12) & 63); - aBytes[nIdx++] = 128 + ((nChr >>> 6) & 63); - aBytes[nIdx++] = 128 + (nChr & 63); - nChrIdx++; - } else if (nChr < 0x4000000) { - /* five bytes */ - aBytes[nIdx++] = 248 + (nChr >>> 24); - aBytes[nIdx++] = 128 + ((nChr >>> 18) & 63); - aBytes[nIdx++] = 128 + ((nChr >>> 12) & 63); - aBytes[nIdx++] = 128 + ((nChr >>> 6) & 63); - aBytes[nIdx++] = 128 + (nChr & 63); - nChrIdx++; - } /* if (nChr <= 0x7fffffff) */ else { - /* six bytes */ - aBytes[nIdx++] = 252 + (nChr >>> 30); - aBytes[nIdx++] = 128 + ((nChr >>> 24) & 63); - aBytes[nIdx++] = 128 + ((nChr >>> 18) & 63); - aBytes[nIdx++] = 128 + ((nChr >>> 12) & 63); - aBytes[nIdx++] = 128 + ((nChr >>> 6) & 63); - aBytes[nIdx++] = 128 + (nChr & 63); - nChrIdx++; - } - nChrIdx++; - } - - return aBytes; +async function dataUrlToBytes(dataUrl) { + const res = await fetch(dataUrl); + return new Uint8Array(await res.arrayBuffer()); } -``` - -### テスト - -```js -/* Tests */ - -const sMyInput = "Base 64 \u2014 Mozilla Developer Network"; -const aMyUTF8Input = strToUTF8Arr(sMyInput); - -const sMyBase64 = base64EncArr(aMyUTF8Input); - -alert(sMyBase64); - -const aMyUTF8Output = base64DecToArr(sMyBase64); - -const sMyOutput = UTF8ArrToStr(aMyUTF8Output); - -alert(sMyOutput); +// 使用方法 +await bytesToBase64DataUrl(new Uint8Array([0, 1, 2])); // "data:application/octet-stream;base64,AAEC" +await dataUrlToBytes("data:application/octet-stream;base64,AAEC"); // Uint8Array [0, 1, 2] ``` -### 付録: Base64 文字列を Uint8Array または ArrayBuffer へデコード - -これらの関数により、 Base64 エンコードされた文字列から [Uint8Array](/ja/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) や [ArrayBuffer](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) を作成することも可能です。 - -```js -// "Base 64 \u2014 Mozilla Developer Network" -const myArray = base64DecToArr( - "QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==", -); - -// "Base 64 \u2014 Mozilla Developer Network" -const myBuffer = base64DecToArr( - "QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==", -).buffer; - -alert(myBuffer.byteLength); -``` +## 関連情報 -> **メモ:** `base64DecToArr(sBase64[, nBlocksSize])` 関数は、バイト列の [`Uint8Array`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) を返します。 16 ビット/ 32 ビット/ 64 ビットの生データのバッファーを構築することを目的とする場合、 `nBlocksSize` 引数を使用します。これは、 `uint8Array.buffer.bytesLength` プロパティの結果が倍数となるべきバイト数（ASCII、バイナリー列（すなわち、列内のそれぞれの文字を 1 バイトのバイナリーデータと見なす列）、 UTF-16 列では `2`、 UTF-32 列では `4`）を表します。 +- JavaScript API: + - {{domxref("Window.atob()")}}（{{domxref("WorkerGlobalScope.atob()", "ワーカーでも利用可能", "", "nocode")}}） + - {{domxref("Window.btoa()")}}（{{domxref("WorkerGlobalScope.btoa()", "ワーカーでも利用可能", "", "nocode")}}） +- [データ URL](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) +- [Base64](https://ja.wikipedia.org/wiki/Base64)（ウィキペディア） +- Base64 のアルゴリズム（[RFC 4648](https://datatracker.ietf.org/doc/html/rfc4648) の説明） From e5c699a331054790daa276b1200b393aa3a58d48 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 23 Jun 2024 11:09:05 +0900 Subject: [PATCH 015/318] =?UTF-8?q?2024/06/05=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/html/attributes/index.md | 18 ++---------------- 1 file changed, 2 insertions(+), 16 deletions(-) diff --git a/files/ja/web/html/attributes/index.md b/files/ja/web/html/attributes/index.md index ac3545f5d4e4f7..a72cedf8bdb7dc 100644 --- a/files/ja/web/html/attributes/index.md +++ b/files/ja/web/html/attributes/index.md @@ -1,8 +1,9 @@ --- title: HTML 属性リファレンス +short-title: 属性 slug: Web/HTML/Attributes l10n: - sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 + sourceCommit: bf671984cfef2f7c6419571d834a146c5424ac10 --- {{HTMLSidebar("Attributes")}} @@ -751,21 +752,6 @@ HTML の要素は**属性**を持ちます。ユーザーが望む条件を満 {{ HTMLElement("meter") }} 最小値の上限を示します。 - - - manifest - {{deprecated_inline}} - - {{ HTMLElement("html") }} - - この文書のキャッシュマニフェストの URL を指定します。 -
-

- メモ: この属性は廃止されており、代わりに <link rel="manifest"> を使用してください。 -

-
- - max From e9bbf0a79c5cf96f7342460a5c857ef3568f2ae9 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 23 Jun 2024 12:23:23 +0900 Subject: [PATCH 016/318] =?UTF-8?q?2024/01/08=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../htmlscriptelement/crossorigin/index.md | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 files/ja/web/api/htmlscriptelement/crossorigin/index.md diff --git a/files/ja/web/api/htmlscriptelement/crossorigin/index.md b/files/ja/web/api/htmlscriptelement/crossorigin/index.md new file mode 100644 index 00000000000000..9f1593e69ce610 --- /dev/null +++ b/files/ja/web/api/htmlscriptelement/crossorigin/index.md @@ -0,0 +1,38 @@ +--- +title: "HTMLScriptElement: crossOrigin プロパティ" +short-title: crossOrigin +slug: Web/API/HTMLScriptElement/crossOrigin +l10n: + sourceCommit: cc756217fbcb8214730fe736973ec15f3592a246 +--- + +{{APIRef("HTML DOM")}} + +**`crossOrigin`** は {{domxref("HTMLScriptElement")}} インターフェイスのプロパティで、この script 要素の{{Glossary("CORS", "オリジン間リソース共有")}}設定を反映します。他の[オリジン](/ja/docs/Glossary/Origin)からのクラシックスクリプトの場合、完全なエラー情報が公開されるかどうかを制御します。モジュールスクリプトでは、スクリプト自身とインポートするスクリプトを制御します。詳細は [CORS 設定属性](/ja/docs/Web/HTML/Attributes/crossorigin)を参照してください。 + +## 値 + +リソースを取得する際に使用する CORS モードを指定するキーワードの文字列。使用可能な値は以下のとおりです。 + +- `anonymous` または空文字列 (`""`) + - : {{domxref("HTMLScriptElement")}} で送信されるリクエストは、`cors` {{domxref("Request.mode", "モード", "", "nocode")}}および `same-origin` の{{domxref("Request.credentials", "資格情報", "", "nocode")}}モードを使用します。これは、CORS が有効で、文書が読み込まれたのと同じオリジンからリソースが取得された場合に、資格情報が送信されるということです。 +- `use-credentials` + - : {{domxref("HTMLScriptElement")}} で送信されるリクエストは、`cors` {{domxref("Request.mode", "モード", "", "nocode")}}および `include` の{{domxref("Request.credentials", "資格情報", "", "nocode")}}モードを使用します。この要素によるすべてのリソースリクエストは、取得するドメインに関係なく、CORS を使用します。 + +`crossOrigin` プロパティに他の値を指定した場合は、`anonymous` を指定したのと同じことになります。 + +`crossOrigin` プロパティが指定されていない場合、リソースは CORS なし（`no-cors` {{domxref("Request.mode", "モード", "", "nocode")}}および `same-origin` の {{domxref("Request.credentials", "資格情報", "", "nocode")}}モード）で取得されます。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("HTMLImageElement.crossOrigin")}} +- {{domxref("HTMLLinkElement.crossOrigin")}} +- {{domxref("HTMLMediaElement.crossOrigin")}} From ccaa224d0eb23d9bdb59e25d33a1a008904f36c2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 23 Jun 2024 13:37:45 +0900 Subject: [PATCH 017/318] =?UTF-8?q?2024/04/19=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/api/htmlscriptelement/text/index.md | 44 +++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 files/ja/web/api/htmlscriptelement/text/index.md diff --git a/files/ja/web/api/htmlscriptelement/text/index.md b/files/ja/web/api/htmlscriptelement/text/index.md new file mode 100644 index 00000000000000..79dd1a27e7cde3 --- /dev/null +++ b/files/ja/web/api/htmlscriptelement/text/index.md @@ -0,0 +1,44 @@ +--- +title: "HTMLScriptElement: text プロパティ" +short-title: text +slug: Web/API/HTMLScriptElement/text +l10n: + sourceCommit: 59873ba98645df59048c642f72237f31327a6c3b +--- + +{{APIRef("HTML DOM")}} + +**`text`** は {{domxref("HTMLScriptElement")}} インターフェイスのプロパティで、{{HTMLElement("script")}} 要素内のテキストコンテンツを反映する文字列です。これは {{domxref("Node.textContent")}} プロパティと同じ方法で動作します。 + +これは {{HTMLElement("script")}} 要素の `text` 属性を反映したものです。 + +## 値 + +文字列です。 + +## 例 + +```html + +``` + +```js +const el = document.getElementById("el"); +console.log(el.text); // 出力: "\n const num = 10;\n console.log(num);\n" +console.log(el.textContent); // 出力: "\n const num = 10;\n console.log(num);\n" + +el.text = "console.log(10);"; +console.log(el.text); // 出力: "console.log(10);" +console.log(el.textContent); // 出力: "console.log(10);" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} From 0073e7b06d861f9ea9db4886c8eb2ebecfe05d06 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 23 Jun 2024 13:20:04 +0900 Subject: [PATCH 018/318] =?UTF-8?q?2024/04/19=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/htmlscriptelement/referrerpolicy/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/ja/web/api/htmlscriptelement/referrerpolicy/index.md b/files/ja/web/api/htmlscriptelement/referrerpolicy/index.md index 0d4c78fe702ce5..9c04d15b8d40ed 100644 --- a/files/ja/web/api/htmlscriptelement/referrerpolicy/index.md +++ b/files/ja/web/api/htmlscriptelement/referrerpolicy/index.md @@ -3,12 +3,12 @@ title: "HTMLScriptElement: referrerPolicy プロパティ" short-title: referrerPolicy slug: Web/API/HTMLScriptElement/referrerPolicy l10n: - sourceCommit: 595cba0e07c70eda7f08a12890e00ea0281933d3 + sourceCommit: 8bc0a4031588e94e6b7d89ebfe45716a99f5b0c0 --- -{{APIRef}} +{{APIRef("HTML DOM")}} -**`referrerPolicy`** は {{domxref("HTMLScriptElement")}} インターフェイスのプロパティで、 {{HTMLElement("script")}} 要素の [`referrerpolicy`](/ja/docs/Web/HTML/Element/script#referrerpolicy) とそのスクリプトによって行われるフェッチを反映し、リソースをフェッチする際にどのリファラーを送信するか定義しています。 +**`referrerPolicy`** は {{domxref("HTMLScriptElement")}} インターフェイスのプロパティで、この {{HTMLElement("script")}} 要素の [`referrerpolicy`](/ja/docs/Web/HTML/Element/script#referrerpolicy) を反映します。これは、スクリプトとそれがインポートするスクリプトを取得するときにリファラーをどのように設定するかを定義します。 ## 値 From 82c9bb84e55608e4c8c620171be3fe85e1f2f82f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 23 Jun 2024 12:36:39 +0900 Subject: [PATCH 019/318] =?UTF-8?q?2024/04/22=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../htmlscriptelement/fetchpriority/index.md | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 files/ja/web/api/htmlscriptelement/fetchpriority/index.md diff --git a/files/ja/web/api/htmlscriptelement/fetchpriority/index.md b/files/ja/web/api/htmlscriptelement/fetchpriority/index.md new file mode 100644 index 00000000000000..ba91f98f949a1f --- /dev/null +++ b/files/ja/web/api/htmlscriptelement/fetchpriority/index.md @@ -0,0 +1,57 @@ +--- +title: "HTMLScriptElement: fetchPriority プロパティ" +short-title: fetchPriority +slug: Web/API/HTMLScriptElement/fetchPriority +l10n: + sourceCommit: f8b524a5fbdedf04ed5d3bac2200c33c5eda8148 +--- + +{{APIRef("HTML DOM")}} + +**`fetchPriority`** は {{domxref("HTMLScriptElement")}} インターフェイスのプロパティで、ブラウザーが外部スクリプトを取得する際に、他の外部スクリプトと相対的にどのように優先させるべきかのヒントを表します。 + +これは {{HTMLElement("script")}} 要素の `fetchpriority` 属性を反映します。 + +## 値 + +優先順位のヒントを表す文字列。使用可能な値は以下のとおりです。 + +- `high` + - : 他の外部スクリプトと相対的に高い優先度で外部スクリプトを取得します。 +- `low` + - : 他の外部スクリプトと相対的に低い優先度で外部スクリプトを取得します。 +- `auto` + - : 既定のモードで、取得の優先度を示しません。 + ブラウザーがユーザーにとって最適なものを決定します。 + +もし `fetchpriority` 属性が指定されていなかったり、他の値が指定されていたりした場合は、 `auto` を指定したのと同じことになります。 + +`fetchPriority` プロパティを使用すると、外部スクリプトを取得する優先度を高くしたり低くしたり指示することができます。これを {{HTMLElement("script")}} 要素に適用すると、読み込みプロセスの早い段階でユーザーにとって「重要」な外部スクリプトを指示するのに有益です。 + +リソースの読み込みに対するヒントの効果はブラウザー特有のものなので、必ず複数のブラウザーエンジンでテストしてください。 + +ブラウザーが外部スクリプトを自動的に読み込む最適な方法を推測できないような例外的な場合を除いて、控えめに使用してください。使用しすぎるとパフォーマンスが低下することができます。 + +## 例 + +```html + +``` + +```js +const el = document.getElementById("el"); +console.log(el.fetchPriority); // 出力: "high" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("HTMLImageElement.fetchPriority")}} +- {{domxref("HTMLLinkElement.fetchPriority")}} From 3a66f8955df5abf62f0a423cdc4633f21208a9c1 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 23 Jun 2024 13:15:32 +0900 Subject: [PATCH 020/318] =?UTF-8?q?2024/04/22=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/htmlscriptelement/nomodule/index.md | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 files/ja/web/api/htmlscriptelement/nomodule/index.md diff --git a/files/ja/web/api/htmlscriptelement/nomodule/index.md b/files/ja/web/api/htmlscriptelement/nomodule/index.md new file mode 100644 index 00000000000000..b503f66237c43c --- /dev/null +++ b/files/ja/web/api/htmlscriptelement/nomodule/index.md @@ -0,0 +1,39 @@ +--- +title: "HTMLScriptElement: noModule プロパティ" +short-title: noModule +slug: Web/API/HTMLScriptElement/noModule +l10n: + sourceCommit: a16dd5636df94af17c519d5e1eaaaf967acd8203 +--- + +{{APIRef("HTML DOM")}} + +**`noModule`** は {{domxref("HTMLScriptElement")}} インターフェイスのプロパティで、[ES モジュール](/ja/docs/Web/JavaScript/Guide/Modules)に対応したブラウザーでスクリプトを実行するかどうかを論理値で示します。実際、これは JavaScript モジュールに対応していない古いブラウザーで代替スクリプトを提供するために使用することができます。 + +これは {{HTMLElement("script")}} 要素の `nomodule` 属性を反映したものです。 + +## 値 + +論理値で、`true` は ES モジュールに対応しているブラウザーではスクリプトを実行しないことを意味し、`false` はそうでないことを意味します。 + +## 例 + +```html + +``` + +```js +const el = document.getElementById("el"); +console.log(el.noModule); // 出力: true +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} From da45bacdc1c8a146fd96757d1164781d583ca0ec Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 23 Jun 2024 13:28:20 +0900 Subject: [PATCH 021/318] =?UTF-8?q?2024/04/26=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/api/htmlscriptelement/src/index.md | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 files/ja/web/api/htmlscriptelement/src/index.md diff --git a/files/ja/web/api/htmlscriptelement/src/index.md b/files/ja/web/api/htmlscriptelement/src/index.md new file mode 100644 index 00000000000000..c752754b476919 --- /dev/null +++ b/files/ja/web/api/htmlscriptelement/src/index.md @@ -0,0 +1,41 @@ +--- +title: "HTMLScriptElement: src プロパティ" +short-title: src +slug: Web/API/HTMLScriptElement/src +l10n: + sourceCommit: 2231cbd5847dff1ca21f8f7fb59d72cae615f088 +--- + +{{APIRef("HTML DOM")}} + +**`src`** は {{domxref("HTMLScriptElement")}} インターフェイスのプロパティで、外部スクリプトの URL を表す文字列です。文書内に直接スクリプトを埋め込む代わりに使用することができます。 + +これは {{HTMLElement("script")}} 要素の `src` 属性を反映したものです。 + +## 値 + +文字列です。 + +## 例 + +このコードは URL が `https://example.com` であるウェブサイト上で動作していると想定します。 + +```html + + +``` + +```js +const script_with_src = document.getElementById("script-with-src"); +console.log(script_with_src.src); // 出力: "https://example.com/main.js" +const script_without_src = document.getElementById("script-without-src"); +console.log(script_without_src.src); // 出力: "" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} From 6fc244b4a1520a37fcd464a7486ef44727862318 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 23 Jun 2024 12:58:38 +0900 Subject: [PATCH 022/318] =?UTF-8?q?2024/05/02=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/htmlscriptelement/integrity/index.md | 46 +++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 files/ja/web/api/htmlscriptelement/integrity/index.md diff --git a/files/ja/web/api/htmlscriptelement/integrity/index.md b/files/ja/web/api/htmlscriptelement/integrity/index.md new file mode 100644 index 00000000000000..a274fb653935e1 --- /dev/null +++ b/files/ja/web/api/htmlscriptelement/integrity/index.md @@ -0,0 +1,46 @@ +--- +title: "HTMLScriptElement: integrity プロパティ" +short-title: integrity +slug: Web/API/HTMLScriptElement/integrity +l10n: + sourceCommit: 49d15be653576c5f73ec527ee976c5881171b53c +--- + +{{APIRef("HTML DOM")}} + +**`integrity`** は {{domxref("HTMLScriptElement")}} インターフェイスのプロパティで、取得されたリソースが予期せぬ改変なしに配信されたことを確認するためにブラウザーが使用することができる、インラインメタデータを格納する文字列です。 + +これは {{HTMLElement("script")}} 要素の `integrity` 属性を反映したものです。 + +## 値 + +文字列です。 + +## 例 + +```html + +``` + +```js +const el = document.getElementById("el"); +console.log(el.integrity); // 出力: "sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("HTMLLinkElement.integrity")}} +- [サブリソース完全性](/ja/docs/Web/Security/Subresource_Integrity) From d0e9808d4f4cca38547fa90545597dc6cb8013b7 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 23 Jun 2024 12:27:22 +0900 Subject: [PATCH 023/318] =?UTF-8?q?2024/05/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/api/htmlscriptelement/defer/index.md | 40 +++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 files/ja/web/api/htmlscriptelement/defer/index.md diff --git a/files/ja/web/api/htmlscriptelement/defer/index.md b/files/ja/web/api/htmlscriptelement/defer/index.md new file mode 100644 index 00000000000000..14faac1a60a6a5 --- /dev/null +++ b/files/ja/web/api/htmlscriptelement/defer/index.md @@ -0,0 +1,40 @@ +--- +title: "HTMLScriptElement: defer プロパティ" +short-title: defer +slug: Web/API/HTMLScriptElement/defer +l10n: + sourceCommit: 3d57022613fbc562cc948938972aeffcaece819b +--- + +{{APIRef("HTML DOM")}} + +**`defer`** は {{domxref("HTMLScriptElement")}} インターフェイスのプロパティで、スクリプトの実行方法を論理値で制御します。クラシックスクリプトの場合、`defer` プロパティを `true` に設定すると、外部スクリプトは文書が構文解析された後、`DOMContentLoaded` イベントを発行する前に実行されます。[モジュールスクリプト](/ja/docs/Web/JavaScript/Guide/Modules)の場合、`defer` プロパティは何の効果もありません。 + +これは {{HTMLElement("script")}} 要素の `defer` 属性を反映します。 + +## 値 + +論理値です。 + +## 例 + +```html + +``` + +```js +const el = document.getElementById("el"); +console.log(el.defer); // 出力: true +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("HTMLScriptElement.async")}} From b572e90ba22ec4078e0fda4ac3f6488092e14686 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 23 Jun 2024 13:55:01 +0900 Subject: [PATCH 024/318] =?UTF-8?q?2024/05/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/api/htmlscriptelement/type/index.md | 49 +++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 files/ja/web/api/htmlscriptelement/type/index.md diff --git a/files/ja/web/api/htmlscriptelement/type/index.md b/files/ja/web/api/htmlscriptelement/type/index.md new file mode 100644 index 00000000000000..332dc3d0169483 --- /dev/null +++ b/files/ja/web/api/htmlscriptelement/type/index.md @@ -0,0 +1,49 @@ +--- +title: "HTMLScriptElement: type プロパティ" +short-title: type +slug: Web/API/HTMLScriptElement/type +l10n: + sourceCommit: dadc5c5b6386e011bc296caedadec4287d55277f +--- + +{{APIRef("HTML DOM")}} + +**`type`** は {{domxref("HTMLScriptElement")}} インターフェイスのプロパティで、スクリプトの種類を反映する文字列です。 + +これは {{HTMLElement("script")}} 要素の `type` 属性を反映したものです。 + +## 値 + +文字列です。このプロパティの値は以下のいずれかです。 + +- **属性が設定されていない (既定値)、空文字列、JavaScript の MIME タイプのいずれか** + - : スクリプトが JavaScript コードを格納した「クラシックスクリプト」であることを示します。 +- `module` + - : この値によってコードは JavaScript モジュールとして扱われます。 +- `importmap` + - : この値は、要素本体にインポートマップが含まれていることを示します。 +- `speculationrules` {{experimental_inline}} + - : この値は、要素の本体に投機ルールが含まれていることを示します。 +- **その他の値** + - : 埋め込まれたコンテンツはデータブロックとして扱われ、ブラウザーによって処理されることはありません。 + +詳しくは {{HTMLElement("script")}} 要素の [`type`](/ja/docs/Web/HTML/Element/script/type) 属性を参照してください。 + +## 例 + +```html + +``` + +```js +const el = document.getElementById("el"); +console.log(el.type); // 出力: "text/javascript" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} From 342051308446ad2fb3662c3f69422f0883337402 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 23 Jun 2024 11:30:28 +0900 Subject: [PATCH 025/318] =?UTF-8?q?2024/05/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/api/htmlscriptelement/async/index.md | 40 +++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 files/ja/web/api/htmlscriptelement/async/index.md diff --git a/files/ja/web/api/htmlscriptelement/async/index.md b/files/ja/web/api/htmlscriptelement/async/index.md new file mode 100644 index 00000000000000..fcd0ba85692a0c --- /dev/null +++ b/files/ja/web/api/htmlscriptelement/async/index.md @@ -0,0 +1,40 @@ +--- +title: "HTMLScriptElement: async プロパティ" +short-title: async +slug: Web/API/HTMLScriptElement/async +l10n: + sourceCommit: 3d57022613fbc562cc948938972aeffcaece819b +--- + +{{APIRef("HTML DOM")}} + +**`async`** は {{domxref("HTMLScriptElement")}} インターフェイスのプロパティで、スクリプトの実行方法を論理値で制御します。クラシックスクリプトの場合、`async` プロパティを `true` に設定すると、構文解析と並列に外部スクリプトが取得され、利用できるようになるとすぐに評価されます。[モジュールスクリプト](/ja/docs/Web/JavaScript/Guide/Modules)の場合、`async` プロパティを `true` に設定すると、スクリプトとその依存関係がすべて並列に取得され、利用できるようになるとすぐに評価されます。 + +これは {{HTMLElement("script")}} 要素の `async` 属性を反映しています。 + +## 値 + +論理値です。 + +## 例 + +```html + +``` + +```js +const el = document.getElementById("el"); +console.log(el.async); // 出力: true +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("HTMLScriptElement.defer")}} From 7cea2c9ed669fd812b142fb106da284f2291975b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 23 Jun 2024 12:07:20 +0900 Subject: [PATCH 026/318] =?UTF-8?q?2024/05/13=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/htmlscriptelement/blocking/index.md | 44 +++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 files/ja/web/api/htmlscriptelement/blocking/index.md diff --git a/files/ja/web/api/htmlscriptelement/blocking/index.md b/files/ja/web/api/htmlscriptelement/blocking/index.md new file mode 100644 index 00000000000000..470c0bc79eaa9d --- /dev/null +++ b/files/ja/web/api/htmlscriptelement/blocking/index.md @@ -0,0 +1,44 @@ +--- +title: "HTMLScriptElement: blocking プロパティ" +short-title: blocking +slug: Web/API/HTMLScriptElement/blocking +l10n: + sourceCommit: e651c702e7a16093ca5a615f74fde1d9ef234508 +--- + +{{APIRef("HTML DOM")}}{{SeeCompatTable}} + +**`blocking`** は {{domxref("HTMLScriptElement")}} インターフェイスのプロパティで、スクリプトを取得する際に特定の操作を実行しないことを示す文字列です。 + +これは {{HTMLElement("script")}} 要素の `blocking` 属性を反映しています。 + +## 値 + +文字列です。ブロックする操作を示す下記のブロックトークンのスペース区切りのリストでなければなりません。 + +- `render` + - : 画面へのコンテンツの描画がブロックされます。 + +## 例 + +```html + +``` + +```js +const el = document.getElementById("el"); +console.log(el.blocking); // 出力: "render" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("HTMLLinkElement.blocking")}} +- {{domxref("HTMLStyleElement.blocking")}} From 350b0fc3b1c35eab975b1224b600dd1b3e0489b3 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 23 Jun 2024 13:59:37 +0900 Subject: [PATCH 027/318] =?UTF-8?q?2024/05/23=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/htmlscriptelement/supports_static/index.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/files/ja/web/api/htmlscriptelement/supports_static/index.md b/files/ja/web/api/htmlscriptelement/supports_static/index.md index a3436a93ca2bd6..e013cc896481a7 100644 --- a/files/ja/web/api/htmlscriptelement/supports_static/index.md +++ b/files/ja/web/api/htmlscriptelement/supports_static/index.md @@ -3,10 +3,10 @@ title: "HTMLScriptElement: supports() 静的メソッド" short-title: supports() slug: Web/API/HTMLScriptElement/supports_static l10n: - sourceCommit: a0f6bf6f7d148f368f6965255058df1ed1f43839 + sourceCommit: 3bd335bf04ca78b7f4917ebc99e0f4f47f11d3de --- -{{APIRef}} +{{APIRef("HTML DOM")}} **`supports()`** は {{domxref("HTMLScriptElement")}} インターフェイスの静的メソッドで、ユーザーエージェントが対応しているスクリプトの種類を機能的に検出するための、単純で一貫したメソッドを提供します。 @@ -26,14 +26,14 @@ HTMLScriptElement.supports(type) 対応している値は以下の通りで、大文字と小文字が区別されます。 - `"classic"` - - : クラシックスクリプトが対応しているかどうかをテストします。 + - : クラシックスクリプトに対応しているかどうかを検査します。 「クラシック」スクリプトとは、モジュールスクリプトより前の通常の、伝統的な JavaScript ファイルのことです。 - `"module"` - - : [モジュールスクリプト](/ja/docs/Web/JavaScript/Guide/Modules)に対応しているかどうかをテストします。 + - : [モジュールスクリプト](/ja/docs/Web/JavaScript/Guide/Modules)に対応しているかどうかを検査します。 - `"importmap"` - - : インポートマップに対応しているかどうかをテストします。 + - : インポートマップに対応しているかどうかを検査します。 - `"speculationrules"` - - : 投機ルールが対応し、有効になっているかどうかをテストします。 + - : 投機ルールに対応し、有効になっているかどうかを検査します。 他の値であれば、このメソッドは `false` を返します。 @@ -43,7 +43,7 @@ HTMLScriptElement.supports(type) ## 例 -下記のコードは `HTMLScriptElement.supports()` が定義されているかどうかを調べ、定義されている場合はそれを使用して特定の種類のスクリプトに対応しているかどうかをテストする方法を示しています。 +下記のコードは `HTMLScriptElement.supports()` が定義されているかどうかを調べ、定義されている場合はそれを使用して特定の種類のスクリプトに対応しているかどうかを検査する方法を示しています。 ```js const log = document.getElementById("log"); From 0926ee8d80a173c8f819b01d425690d51cf22c25 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 23 Jun 2024 12:02:38 +0900 Subject: [PATCH 028/318] =?UTF-8?q?2024/06/04=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../htmlscriptelement/attributionsrc/index.md | 74 +++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 files/ja/web/api/htmlscriptelement/attributionsrc/index.md diff --git a/files/ja/web/api/htmlscriptelement/attributionsrc/index.md b/files/ja/web/api/htmlscriptelement/attributionsrc/index.md new file mode 100644 index 00000000000000..475c77e3e5e53e --- /dev/null +++ b/files/ja/web/api/htmlscriptelement/attributionsrc/index.md @@ -0,0 +1,74 @@ +--- +title: "HTMLScriptElement: attributionSrc プロパティ" +short-title: attributionSrc +slug: Web/API/HTMLScriptElement/attributionSrc +l10n: + sourceCommit: dd6f6e705b7df9d505c93023593a6bae96bef9db +--- + +{{APIRef("Attribution Reporting API")}}{{securecontext_header}}{{SeeCompatTable}} + +**`attributionSrc`** は {{domxref("HTMLScriptElement")}} インターフェイスのプロパティで、{{htmlelement("script")}} 要素の [`attributionsrc`](/ja/docs/Web/HTML/Element/script#attributionsrc) 属性をプログラムで取得・設定し、その属性値を反映します。`attributionsrc` はブラウザーにスクリプトリソースリクエストと一緒に {{httpheader("Attribution-Reporting-Eligible")}} ヘッダーを送信することを指定します。 + +サーバー側では、これはレスポンスで {{httpheader("Attribution-Reporting-Register-Source")}} または {{httpheader("Attribution-Reporting-Register-Trigger")}} ヘッダーを送信するトリガーとして用いられ、それぞれ JavaScript ベースの[属性ソース](/ja/docs/Web/API/Attribution_Reporting_API/Registering_sources#javascript-based_event_sources)または[属性トリガー](/ja/docs/Web/API/Attribution_Reporting_API/Registering_triggers#javascript-based_attribution_triggers)を登録します。どのレスポンスヘッダーを送り返すべきかは、登録を行った `Attribution-Reporting-Eligible` ヘッダーの値に依存します。 + +> **メモ:** 他にも、JavaScript の属性ソースまたはトリガーは、{{domxref("fetch()")}} リクエストに `attributionReporting` オプションをつけて送信するか（`fetch()` 呼び出しで直接設定するか、`fetch()` 呼び出しに渡された {{domxref("Request")}} オブジェクトで）、{{domxref("XMLHttpRequest")}} で {{domxref("XMLHttpRequest.setAttributionReporting", "setAttributionReporting()")}} をリクエストオブジェクトについて呼び出したりすることもできます。 + +詳細は[属性レポート API](/ja/docs/Web/API/Attribution_Reporting_API) です。 + +## 値 + +文字列です。このプロパティには 2 つのバージョンがあり、取得したり設定したりすることができます。 + +- 空文字列、すなわち `scriptElem.attributionSrc=""`。これは、{{httpheader("Attribution-Reporting-Eligible")}} ヘッダーを、`src` 属性がこの点を指すのと同じサーバーに送信することを指定します。これは、属性ソースやトリガーの登録を同じサーバーで処理している場合には問題ありません。属性トリガーを登録する場合、このプロパティはオプションであり、除外すると空文字列の値を使用します。 +- 1 つ以上の URL を含む値です。例えば次のようなものです。 + + ```js + scriptElem.attributionSrc = + "https://a.example/register-source https://b.example/register-source"; + ``` + + これは、リクエストされたリソースがあなたが制御しているサーバーにない場合や、属性ソースを別のサーバーに登録する処理だけを行いたい場合に有益です。この場合、`attributionSrc` の値として 1 つ以上の URL を指定します。リソースリクエストが発生すると、{{httpheader("Attribution-Reporting-Eligible")}} ヘッダーがリソースオリジンに加えて、`attributionSrc` を指定した URL にも送信されます。これらの URL は {{httpheader("Attribution-Reporting-Register-Source")}} または {{httpheader("Attribution-Reporting-Register-Trigger")}} ヘッダーで応答することができます。 + + > **メモ:** 複数の URL を指定するということは、複数の属性ソースを同じ機能に登録できるということです。例えば、成功を測定しようとしている様々なキャンペーンがあり、異なるデータで異なるレポートを生成する必要があるかもしれません。 + +## 例 + +### 空の attributionSrc を設定 + +```html + +``` + +```js +const scriptElem = document.querySelector("script"); +scriptElem.attributionSrc = ""; +``` + +### attributionSrc に URL を設定 + +```html + +``` + +```js +// URL に '=' のような特殊文字が格納されていると不適切に解釈されてしまうため、 +// エンコードしてください。 +const encodedUrlA = encodeURIComponent("https://a.example/register-source"); +const encodedUrlB = encodeURIComponent("https://b.example/register-source"); + +const scriptElem = document.querySelector("script"); +scriptElem.attributionSrc = `${encodedUrlA} ${encodedUrlB}`; +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [属性レポート API](/ja/docs/Web/API/Attribution_Reporting_API). From 77218628d5dc1b3d38f038940dc1dad2c3e85a68 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 27 Jun 2024 23:59:57 +0900 Subject: [PATCH 029/318] =?UTF-8?q?2024/06/03=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0=20(#21883)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2024/06/03 時点の英語版に基づき更新 * Update index.md --- files/ja/web/api/htmlscriptelement/index.md | 72 ++++++++++----------- 1 file changed, 34 insertions(+), 38 deletions(-) diff --git a/files/ja/web/api/htmlscriptelement/index.md b/files/ja/web/api/htmlscriptelement/index.md index 1eb044d7942c99..f546ed0540043b 100644 --- a/files/ja/web/api/htmlscriptelement/index.md +++ b/files/ja/web/api/htmlscriptelement/index.md @@ -2,14 +2,14 @@ title: HTMLScriptElement slug: Web/API/HTMLScriptElement l10n: - sourceCommit: 387d0d4d8690c0d2c9db1b85eae28ffea0f3ac1f + sourceCommit: ba5f28ab10ef1af48a55f363c8facc04a1f94479 --- {{APIRef("HTML DOM")}} -HTML の {{HTMLElement("script")}} 要素は **`HTMLScriptElement`** インターフェイスを公開しています。これは（通常の {{domxref("HTMLElement")}} から継承によって利用できるものに加えて） ` - + ``` From 711ddfbea9386cadb68b75327e37e8ed52a7d4b5 Mon Sep 17 00:00:00 2001 From: mdn-bot <108879845+mdn-bot@users.noreply.github.com> Date: Sat, 29 Jun 2024 01:28:40 +0000 Subject: [PATCH 063/318] ja: sync translated content --- files/ja/_redirects.txt | 4 ++ files/ja/_wikihistory.json | 38 +++++++++---------- .../web/api/fetch_api/using_fetch}/index.md | 3 +- .../index.md | 3 +- .../rendering}/index.md | 3 +- .../{calc-constant => calc-keyword}/index.md | 3 +- 6 files changed, 31 insertions(+), 23 deletions(-) rename files/ja/{glossary/guard => conflicting/web/api/fetch_api/using_fetch}/index.md (88%) rename files/ja/{web/api/fetch_api/basic_concepts => conflicting/web/api/fetch_api/using_fetch_c0ca150deec7d78cb1d4462e8542019b}/index.md (97%) rename files/ja/glossary/{rendering_engine => engine/rendering}/index.md (92%) rename files/ja/web/css/{calc-constant => calc-keyword}/index.md (99%) diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 53e260f4d6a881..5b3e5e164063bf 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -1338,12 +1338,14 @@ /ja/docs/Glossary/First_interactive /ja/docs/Glossary/First_CPU_idle /ja/docs/Glossary/Global_attribute /ja/docs/Web/HTML/Global_attributes /ja/docs/Glossary/Grid_Rows /ja/docs/Glossary/Grid_Row +/ja/docs/Glossary/Guard /ja/docs/conflicting/Web/API/Fetch_API/Using_Fetch /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/Glossary/Internationalization /ja/docs/Glossary/POP3 /ja/docs/Glossary/POP /ja/docs/Glossary/Reference /ja/docs/Glossary/Object_reference +/ja/docs/Glossary/Rendering_engine /ja/docs/Glossary/Engine/Rendering /ja/docs/Glossary/Round_Trip_Time_(RTT) /ja/docs/Glossary/Round_Trip_Time /ja/docs/Glossary/SSL_Glossary /ja/docs/Glossary/SSL /ja/docs/Glossary/Scrollport /ja/docs/Glossary/Scroll_container @@ -2757,6 +2759,7 @@ /ja/docs/Web/API/EventTarget.removeEventListener /ja/docs/Web/API/EventTarget/removeEventListener /ja/docs/Web/API/EventTarget/attachEvent /ja/docs/Web/API/EventTarget/addEventListener /ja/docs/Web/API/FetchEvent_clone /ja/docs/Web/API/FetchEvent +/ja/docs/Web/API/Fetch_API/Basic_concepts /ja/docs/conflicting/Web/API/Fetch_API/Using_Fetch_c0ca150deec7d78cb1d4462e8542019b /ja/docs/Web/API/File.name /ja/docs/Web/API/File/name /ja/docs/Web/API/File.size /ja/docs/Web/API/Blob/size /ja/docs/Web/API/File.type /ja/docs/Web/API/Blob/type @@ -3726,6 +3729,7 @@ /ja/docs/Web/CSS/border-top-left-radius_|_-moz-border-radius-topleft /ja/docs/Web/CSS/border-top-left-radius /ja/docs/Web/CSS/box_model /ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model /ja/docs/Web/CSS/calc() /ja/docs/Web/CSS/calc +/ja/docs/Web/CSS/calc-constant /ja/docs/Web/CSS/calc-keyword /ja/docs/Web/CSS/clamp() /ja/docs/Web/CSS/clamp /ja/docs/Web/CSS/color-adjust /ja/docs/conflicting/Web/CSS/print-color-adjust /ja/docs/Web/CSS/color_value/hexadecimal_rgb /ja/docs/orphaned/Web/CSS/color_value/hexadecimal_rgb diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index db568772e482bf..30b9c8c1c916cd 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -702,6 +702,10 @@ "modified": "2019-03-23T22:38:34.635Z", "contributors": ["mfuji09", "kubota-aoi"] }, + "Glossary/Engine/Rendering": { + "modified": "2020-09-28T13:40:38.634Z", + "contributors": ["mfuji09", "Uemmra3"] + }, "Glossary/Entity": { "modified": "2020-08-26T12:57:35.570Z", "contributors": ["mfuji09", "Uemmra3", "dskmori", "asuktakahashi"] @@ -898,10 +902,6 @@ "modified": "2020-03-26T14:31:20.417Z", "contributors": ["mfuji09", "dynamis"] }, - "Glossary/Guard": { - "modified": "2020-01-10T08:49:48.628Z", - "contributors": ["Wind1808"] - }, "Glossary/Gutters": { "modified": "2019-03-18T20:48:45.475Z", "contributors": ["shuuji3", "applejam9029", "mfuji09", "dynamis"] @@ -1593,10 +1593,6 @@ "modified": "2020-05-04T13:19:46.805Z", "contributors": ["Uemmra3", "segayuu"] }, - "Glossary/Rendering_engine": { - "modified": "2020-09-28T13:40:38.634Z", - "contributors": ["mfuji09", "Uemmra3"] - }, "Glossary/Repo": { "modified": "2019-03-18T21:21:56.601Z", "contributors": ["Uemmra3", "takaneichinose"] @@ -8438,17 +8434,6 @@ "chikoski" ] }, - "Web/API/Fetch_API/Basic_concepts": { - "modified": "2020-10-01T22:06:38.159Z", - "contributors": [ - "mpcjazz", - "Uemmra3", - "dskmori", - "hamasaki", - "chikoski", - "YuichiNukiyama" - ] - }, "Web/API/Fetch_API/Cross-global_fetch_usage": { "modified": "2020-01-07T17:57:37.167Z", "contributors": ["Wind1808"] @@ -30299,6 +30284,21 @@ "modified": "2020-02-11T06:17:04.429Z", "contributors": ["tyankatsu", "Marsf"] }, + "conflicting/Web/API/Fetch_API/Using_Fetch": { + "modified": "2020-01-10T08:49:48.628Z", + "contributors": ["Wind1808"] + }, + "conflicting/Web/API/Fetch_API/Using_Fetch_c0ca150deec7d78cb1d4462e8542019b": { + "modified": "2020-10-01T22:06:38.159Z", + "contributors": [ + "mpcjazz", + "Uemmra3", + "dskmori", + "hamasaki", + "chikoski", + "YuichiNukiyama" + ] + }, "conflicting/Web/API/FormData": { "modified": "2019-04-26T23:54:27.353Z", "contributors": ["mfuji09"] diff --git a/files/ja/glossary/guard/index.md b/files/ja/conflicting/web/api/fetch_api/using_fetch/index.md similarity index 88% rename from files/ja/glossary/guard/index.md rename to files/ja/conflicting/web/api/fetch_api/using_fetch/index.md index e2f100c4c092d4..aac7d89e977d9d 100644 --- a/files/ja/glossary/guard/index.md +++ b/files/ja/conflicting/web/api/fetch_api/using_fetch/index.md @@ -1,6 +1,7 @@ --- title: Guard (ガード) -slug: Glossary/Guard +slug: conflicting/Web/API/Fetch_API/Using_Fetch +original_slug: Glossary/Guard --- {{GlossarySidebar}} diff --git a/files/ja/web/api/fetch_api/basic_concepts/index.md b/files/ja/conflicting/web/api/fetch_api/using_fetch_c0ca150deec7d78cb1d4462e8542019b/index.md similarity index 97% rename from files/ja/web/api/fetch_api/basic_concepts/index.md rename to files/ja/conflicting/web/api/fetch_api/using_fetch_c0ca150deec7d78cb1d4462e8542019b/index.md index 32dad9df61dea1..8db605d02c6e89 100644 --- a/files/ja/web/api/fetch_api/basic_concepts/index.md +++ b/files/ja/conflicting/web/api/fetch_api/using_fetch_c0ca150deec7d78cb1d4462e8542019b/index.md @@ -1,6 +1,7 @@ --- title: フェッチの基本概念 -slug: Web/API/Fetch_API/Basic_concepts +slug: conflicting/Web/API/Fetch_API/Using_Fetch_c0ca150deec7d78cb1d4462e8542019b +original_slug: Web/API/Fetch_API/Basic_concepts l10n: sourceCommit: 1511e914c6b1ce6f88056bfefd48a6aa585cebce --- diff --git a/files/ja/glossary/rendering_engine/index.md b/files/ja/glossary/engine/rendering/index.md similarity index 92% rename from files/ja/glossary/rendering_engine/index.md rename to files/ja/glossary/engine/rendering/index.md index f55bae782e3e24..ce05035e966592 100644 --- a/files/ja/glossary/rendering_engine/index.md +++ b/files/ja/glossary/engine/rendering/index.md @@ -1,6 +1,7 @@ --- title: Rendering engine (レンダリングエンジン) -slug: Glossary/Rendering_engine +slug: Glossary/Engine/Rendering +original_slug: Glossary/Rendering_engine --- {{GlossarySidebar}} diff --git a/files/ja/web/css/calc-constant/index.md b/files/ja/web/css/calc-keyword/index.md similarity index 99% rename from files/ja/web/css/calc-constant/index.md rename to files/ja/web/css/calc-keyword/index.md index 2af389a0ff0aeb..28d7115faba135 100644 --- a/files/ja/web/css/calc-constant/index.md +++ b/files/ja/web/css/calc-keyword/index.md @@ -1,6 +1,7 @@ --- title: -slug: Web/CSS/calc-constant +slug: Web/CSS/calc-keyword +original_slug: Web/CSS/calc-constant l10n: sourceCommit: fb1c7f8985e4c4142f482f809366e3cba6b96b94 --- From 6a34ea2d5cc4c36116e1958da668bc6048103eac Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 30 Jun 2024 01:09:35 +0900 Subject: [PATCH 064/318] Update _redirects.txt --- files/ja/_redirects.txt | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 5b3e5e164063bf..6c1d7474ef3cad 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -1338,7 +1338,7 @@ /ja/docs/Glossary/First_interactive /ja/docs/Glossary/First_CPU_idle /ja/docs/Glossary/Global_attribute /ja/docs/Web/HTML/Global_attributes /ja/docs/Glossary/Grid_Rows /ja/docs/Glossary/Grid_Row -/ja/docs/Glossary/Guard /ja/docs/conflicting/Web/API/Fetch_API/Using_Fetch +/ja/docs/Glossary/Guard /ja/docs/Web/API/Fetch_API/Using_Fetch /ja/docs/Glossary/Header /ja/docs/Glossary/HTTP_header /ja/docs/Glossary/I18N /ja/docs/Glossary/Internationalization /ja/docs/Glossary/Index /ja/docs/Glossary @@ -2759,7 +2759,7 @@ /ja/docs/Web/API/EventTarget.removeEventListener /ja/docs/Web/API/EventTarget/removeEventListener /ja/docs/Web/API/EventTarget/attachEvent /ja/docs/Web/API/EventTarget/addEventListener /ja/docs/Web/API/FetchEvent_clone /ja/docs/Web/API/FetchEvent -/ja/docs/Web/API/Fetch_API/Basic_concepts /ja/docs/conflicting/Web/API/Fetch_API/Using_Fetch_c0ca150deec7d78cb1d4462e8542019b +/ja/docs/Web/API/Fetch_API/Basic_concepts /ja/docs/Web/API/Fetch_API/Using_Fetch /ja/docs/Web/API/File.name /ja/docs/Web/API/File/name /ja/docs/Web/API/File.size /ja/docs/Web/API/Blob/size /ja/docs/Web/API/File.type /ja/docs/Web/API/Blob/type From f20c8ea128d1fd34c28e68786605614c100352d6 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 30 Jun 2024 01:11:34 +0900 Subject: [PATCH 065/318] Update _wikihistory.json --- files/ja/_wikihistory.json | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 30b9c8c1c916cd..897ebc8fd53d1a 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -30284,21 +30284,6 @@ "modified": "2020-02-11T06:17:04.429Z", "contributors": ["tyankatsu", "Marsf"] }, - "conflicting/Web/API/Fetch_API/Using_Fetch": { - "modified": "2020-01-10T08:49:48.628Z", - "contributors": ["Wind1808"] - }, - "conflicting/Web/API/Fetch_API/Using_Fetch_c0ca150deec7d78cb1d4462e8542019b": { - "modified": "2020-10-01T22:06:38.159Z", - "contributors": [ - "mpcjazz", - "Uemmra3", - "dskmori", - "hamasaki", - "chikoski", - "YuichiNukiyama" - ] - }, "conflicting/Web/API/FormData": { "modified": "2019-04-26T23:54:27.353Z", "contributors": ["mfuji09"] From 5ea27507f9534d9a74746a45709659b71c6d8a66 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 30 Jun 2024 01:12:49 +0900 Subject: [PATCH 066/318] Delete files/ja/conflicting/web/api/fetch_api/using_fetch_c0ca150deec7d78cb1d4462e8542019b/index.md --- .../index.md | 69 ------------------- 1 file changed, 69 deletions(-) delete mode 100644 files/ja/conflicting/web/api/fetch_api/using_fetch_c0ca150deec7d78cb1d4462e8542019b/index.md diff --git a/files/ja/conflicting/web/api/fetch_api/using_fetch_c0ca150deec7d78cb1d4462e8542019b/index.md b/files/ja/conflicting/web/api/fetch_api/using_fetch_c0ca150deec7d78cb1d4462e8542019b/index.md deleted file mode 100644 index 8db605d02c6e89..00000000000000 --- a/files/ja/conflicting/web/api/fetch_api/using_fetch_c0ca150deec7d78cb1d4462e8542019b/index.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: フェッチの基本概念 -slug: conflicting/Web/API/Fetch_API/Using_Fetch_c0ca150deec7d78cb1d4462e8542019b -original_slug: Web/API/Fetch_API/Basic_concepts -l10n: - sourceCommit: 1511e914c6b1ce6f88056bfefd48a6aa585cebce ---- - -{{DefaultAPISidebar("Fetch API")}} - -[フェッチ API](/ja/docs/Web/API/Fetch_API) は、（ネットワーク越しの場合も含めて）リソースを取得するインターフェイスを提供します。 {{domxref("XMLHttpRequest")}} を使っていた人にはなじみ深いでしょうが、より強力で柔軟な機能を提供します。この記事では、フェッチ API の基本概念のいくつかを説明します。 - -> **メモ:** この記事は随時加筆されます。もっと説明が必要と感じるフェッチの概念を見つけた場合、[MDN ディスカッションフォーラム](https://discourse.mozilla.org/c/mdn/236)または [Matrix](https://wiki.mozilla.org/Matrix) の [MDN Web Docs](https://chat.mozilla.org/#/room/#mdn:mozilla.org) ルームで誰かに知らせてください。 - -## 概要 - -フェッチの核心はインターフェイスの抽象化であり、HTTP のリクエスト ({{domxref("Request")}})、レスポンス ({{domxref("Response")}})、ヘッダー ({{domxref("Headers")}}) を抽象化するインターフェイスであり、非同期のリソースのリクエストを行うための {{domxref("fetch()")}} メソッドで行います。 HTTP の主要部分が JavaScript オブジェクトとして抽象化されているため、他の API からそれらの機能を利用しやすくなっています。 - -[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)は、フェッチを多用する API の一例です。 - -フェッチはそれらのリクエストの非同期な性質をもう一歩先へ進めるものです。 API は完全に {{jsxref("Promise")}} ベースです。 - -## ガード - -ガードは {{domxref("Headers")}} オブジェクトの機能で、ヘッダーが使用されている場所に応じて `immutable`, `request`, `request-no-cors`, `response`, `none` のいずれかの値を取ります。 - -新しい {{domxref("Headers")}} オブジェクトが {{domxref("Headers.Headers","Headers()")}} {{glossary("constructor", "コンストラクター")}}を使用してが生成されるとき、ガードは `none` （既定値）に設定されます。 {{domxref("Request")}} または {{domxref("Response")}} オブジェクトが生成された場合、関連づけられた {{domxref("Headers")}} オブジェクトのガードは下記のとおり設定されます。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
新しいオブジェクト型コンストラクター - 関連する {{domxref("Headers")}} オブジェクトのガード設定 -
{{domxref("Request")}}{{domxref("Request.Request","Request()")}}request
- {{domxref("Request.Request","Request()")}} で {{domxref("Request.mode","mode")}} に no-cors を設定したもの - request-no-cors
{{domxref("Response")}}{{domxref("Response.Response","Response()")}}response
- {{domxref("Response.error","error()")}} または {{domxref("Response.redirect","redirect()")}} メソッド - immutable
- -ヘッダーのガードは、ヘッダーの内容を変更する {{domxref("Headers.set","set()")}}、 {{domxref("Headers.delete","delete()")}}、{{domxref("Headers.append","append()")}} の各メソッドに影響します。 {{domxref("Headers")}} のガードが `immutable` の場合、変更しようとすると {{jsxref("TypeError")}} が発生します。しかし、次の場合は動作します。 - -- ガードが `request` で、ヘッダーの _name_ が{{Glossary("forbidden header name", "禁止ヘッダー名")}} ではない場合。 -- ガードが `request-no-cors` で、ヘッダーの _name_/_value_ が{{Glossary("simple header", "単純ヘッダー")}}である場合。 -- ガードが `response` で、ヘッダーの _name_ が{{Glossary("forbidden response header name", "禁止レスポンスヘッダー名")}}ではない場合。 From 8f59e7eaa53889b8a7a1fbd4a4be0737ee784adf Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 30 Jun 2024 01:13:19 +0900 Subject: [PATCH 067/318] Delete files/ja/conflicting/web/api/fetch_api/using_fetch/index.md --- .../conflicting/web/api/fetch_api/using_fetch/index.md | 9 --------- 1 file changed, 9 deletions(-) delete mode 100644 files/ja/conflicting/web/api/fetch_api/using_fetch/index.md diff --git a/files/ja/conflicting/web/api/fetch_api/using_fetch/index.md b/files/ja/conflicting/web/api/fetch_api/using_fetch/index.md deleted file mode 100644 index aac7d89e977d9d..00000000000000 --- a/files/ja/conflicting/web/api/fetch_api/using_fetch/index.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Guard (ガード) -slug: conflicting/Web/API/Fetch_API/Using_Fetch -original_slug: Glossary/Guard ---- - -{{GlossarySidebar}} - -ガードは、{{domxref("Fetch_API","Fetch 仕様")}}で定義されている {{domxref("Headers")}} オブジェクトの機能で、{{domxref("Headers.set","set()")}} や {{domxref("Headers.append","append()")}} などのメソッドがヘッダーのコンテンツを変更できるかどうかに影響します。 例えば、`immutable`（不変）ガードは、ヘッダーを変更できないことを意味します。 詳しくは、[Fetch の基本概念: ガード](/ja/docs/Web/API/Fetch_API/Basic_concepts#Guard)を参照してください。 From 53324c512cc2c8a75524b8c717deeac97e99eaf8 Mon Sep 17 00:00:00 2001 From: margo <67325499+margo-yunanova@users.noreply.github.com> Date: Sun, 30 Jun 2024 01:02:37 +0300 Subject: [PATCH 068/318] [ru] update 'Web/JavaScript/Reference/Operators/in' translation (#21442) * [ru] update 'Web/JavaScript/Reference/Operators/in' translation * feat: add sourceCommit for files/ru/web/javascript/reference/operators/in/index.md Co-authored-by: Leonid Vinogradov * Update files/ru/web/javascript/reference/operators/in/index.md Co-authored-by: Leonid Vinogradov * Update files/ru/web/javascript/reference/operators/in/index.md Co-authored-by: Leonid Vinogradov * Update files/ru/web/javascript/reference/operators/in/index.md Co-authored-by: Leonid Vinogradov * Update files/ru/web/javascript/reference/operators/in/index.md Co-authored-by: Leonid Vinogradov * Update files/ru/web/javascript/reference/operators/in/index.md Co-authored-by: Leonid Vinogradov * Update files/ru/web/javascript/reference/operators/in/index.md Co-authored-by: Leonid Vinogradov * Update files/ru/web/javascript/reference/operators/in/index.md Co-authored-by: Leonid Vinogradov * Update files/ru/web/javascript/reference/operators/in/index.md Co-authored-by: Leonid Vinogradov * Update files/ru/web/javascript/reference/operators/in/index.md Co-authored-by: Leonid Vinogradov * Update files/ru/web/javascript/reference/operators/in/index.md Co-authored-by: Leonid Vinogradov * Update files/ru/web/javascript/reference/operators/in/index.md Co-authored-by: Leonid Vinogradov * Update files/ru/web/javascript/reference/operators/in/index.md Co-authored-by: Leonid Vinogradov * Update files/ru/web/javascript/reference/operators/in/index.md Co-authored-by: Leonid Vinogradov * Update files/ru/web/javascript/reference/operators/in/index.md Co-authored-by: Leonid Vinogradov * Update files/ru/web/javascript/reference/operators/in/index.md Co-authored-by: Leonid Vinogradov * Update files/ru/web/javascript/reference/operators/in/index.md Co-authored-by: Leonid Vinogradov * Update files/ru/web/javascript/reference/operators/in/index.md Co-authored-by: Leonid Vinogradov * Update files/ru/web/javascript/reference/operators/in/index.md Co-authored-by: Leonid Vinogradov * Update files/ru/web/javascript/reference/operators/in/index.md Co-authored-by: Leonid Vinogradov * Update files/ru/web/javascript/reference/operators/in/index.md Co-authored-by: Leonid Vinogradov * [ru] improve wording and add missing link * Update files/ru/web/javascript/reference/operators/in/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/ru/web/javascript/reference/operators/in/index.md * Update files/ru/web/javascript/reference/operators/in/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/ru/web/javascript/reference/operators/in/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: Leonid Vinogradov Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../reference/operators/in/index.md | 230 ++++++++++++++++-- 1 file changed, 205 insertions(+), 25 deletions(-) diff --git a/files/ru/web/javascript/reference/operators/in/index.md b/files/ru/web/javascript/reference/operators/in/index.md index fe029342b09646..141a6e37048491 100644 --- a/files/ru/web/javascript/reference/operators/in/index.md +++ b/files/ru/web/javascript/reference/operators/in/index.md @@ -1,97 +1,276 @@ --- -title: in operator +title: in slug: Web/JavaScript/Reference/Operators/in +l10n: + sourceCommit: 13b2fe46243beed6dc29f5d3defa716abe79c1f9 --- {{jsSidebar("Operators")}} -**Оператор `in`** возвращает `true`, если свойство содержится в указанном объекте или в его цепочке прототипов. +Оператор `in` возвращает `true`, если свойство содержится в указанном объекте или в его цепочке прототипов. + +Оператор `in` не может быть использован для поиска значений в других видах коллекций. Чтобы проверить, существует ли определённое значение в массиве, можно использовать {{jsxref("Array.prototype.includes()")}}. А у наборов есть метод {{jsxref("Set.prototype.has()")}}. + +{{EmbedInteractiveExample("pages/js/expressions-inoperator.html")}} ## Синтаксис -``` +```js-nolint prop in object +#prop in object ``` ### Параметры - `prop` - - : Строка или symbol, представляющий название свойства или индекс массива (non-symbols будут конвертированы в строки). - + - : Строковое или символьное значение, представляющее название свойства (несимвольные значения будут [преобразованы в строки](/ru/docs/Web/JavaScript/Reference/Global_Objects/String#приведение_к_строке)). Также может быть [именем приватного свойства](/ru/docs/Web/JavaScript/Reference/Classes/Private_properties). - `object` - - : Объект, в котором нужно проверить содержание свойства с заданным именем. + - : Объект, для которого будет производится проверка, содержит ли он (или его цепочка прототипов) свойство с указанным именем (`prop`). + +### Исключения + +- {{jsxref("TypeError")}}: + - : Возникает, если `object` не является объектом (например, является примитивом). ## Описание +Оператор `in` проверяет, существует ли указанное свойство в объекте или его цепочке прототипов. Для проверки наличия только собственных свойств следует использовать {{jsxref("Object.hasOwn()")}}. + +Свойство может существовать в объекте, но иметь значение `undefined`. Поэтому `x in obj` не то же самое, что `obj.x !== undefined`. Для того, чтобы оператор `in` возвращал значение `false`, используйте оператор [`delete`](/ru/docs/Web/JavaScript/Reference/Operators/delete) вместо присваивания свойству значения `undefined`. + +Также можно использовать оператор `in`, чтобы проверить, существует ли в объекте [приватное поле класса или метод](/ru/docs/Web/JavaScript/Reference/Classes/Private_properties). Оператор `in` возвращает `true`, если свойство определено и `false` в противном случае. Такая проверка называется _бренд-чек_, потому что `in` возвращает `true` только в том случае, когда объект был создан с помощью конструктора класса и имеет доступ к приватным свойствам. + +В этом случае используется особый синтаксис: левая сторона оператора `in` является идентификатором свойства, а не выражением, но без кавычек (иначе это будет свойством с типом строка, а не приватным свойством). + +Поскольку обращение к приватным свойствам объекта не связанного с текущим классом приводит к появлению {{jsxref("TypeError")}} вместо возвращения `undefined`, то оператор `in` позволяет сократить запись такой проверки: + +```js +class C { + #x; + static isC(obj) { + try { + obj.#x; + return true; + } catch { + return false; + } + } +} +``` + +До более короткой: + +```js +class C { + #x; + static isC(obj) { + return #x in obj; + } +} +``` + +Оператор `in` также позволяет избежать необходимости обрабатывать ошибки доступа к несуществующим приватным свойствам. + +Однако, оператор `in` по-прежнему требует предварительно объявлять приватные свойства заранее в окружающем классе, иначе будет выброшена ошибка {{jsxref("SyntaxError")}} ("Private field '#x' must be declared in an enclosing class") такая же, как и когда вы пытаетесь получить доступ к необъявленному приватному свойству. + +```js-nolint example-bad +class C { + foo() { + #x in this; + } +} + +new C().foo(); // SyntaxError: Private field '#x' must be declared in an enclosing class +``` + +## Примеры + +### Обычное использование + В примере ниже показаны некоторые способы использования оператора `in`. ```js // Массивы -var trees = new Array("redwood", "bay", "cedar", "oak", "maple"); +const trees = ["redwood", "bay", "cedar", "oak", "maple"]; 0 in trees; // true 3 in trees; // true 6 in trees; // false -"bay" in trees; // false (вы должны указать индекс элемента в массиве, а не значение в этом индексе) +"bay" in trees; // false (необходимо указать индекс элемента в массиве, а не значение) "length" in trees; // true (length является свойством Array) +Symbol.iterator in trees; // true // Уже существующие объекты "PI" in Math; // true // Пользовательские объекты -var mycar = { make: "Honda", model: "Accord", year: 1998 }; +const mycar = { make: "Honda", model: "Accord", year: 1998 }; "make" in mycar; // true "model" in mycar; // true ``` -Вы должны указать объект справа от оператора `in`. Например, вы можете указать строку, созданную через конструктор объекта `String`, но вы не можете указать строковый литерал. +Необходимо указать объект справа от оператора `in`. Например, можно указать строку, созданную с помощью конструктора `String`, но нельзя использовать строковый литерал. ```js -var color1 = new String("green"); -"length" in color1; // returns true +const color1 = new String("green"); +"length" in color1; // true -var color2 = "coral"; -// сгенерирует ошибку (color2 is not a String object) +const color2 = "coral"; +// сгенерирует ошибку (color2 не является объектом String) "length" in color2; ``` ### Использование оператора `in` с неопределёнными или с уже удалёнными свойствами -Если вы удалили свойство при помощи оператора [`delete`](/ru/docs/Web/JavaScript/Reference/Operators/delete), то оператор `in` возвратит `false` для этого свойства. +Если удалить свойство при помощи оператора [`delete`](/ru/docs/Web/JavaScript/Reference/Operators/delete), то оператор `in` возвратит `false` для этого свойства. ```js -var mycar = { make: "Honda", model: "Accord", year: 1998 }; +const mycar = { make: "Honda", model: "Accord", year: 1998 }; delete mycar.make; "make" in mycar; // false -var trees = new Array("redwood", "bay", "cedar", "oak", "maple"); +const trees = ["redwood", "bay", "cedar", "oak", "maple"]; delete trees[3]; 3 in trees; // false ``` -Если вы зададите свойству значение {{jsxref("Global_Objects/undefined", "undefined")}}, но не удалите его, то для этого свойства оператор `in` вернёт значение `true`. +Если задать свойству значение {{jsxref("undefined")}}, а не удалять его, то для этого свойства оператор `in` вернёт значение `true`. ```js -var mycar = { make: "Honda", model: "Accord", year: 1998 }; +const mycar = { make: "Honda", model: "Accord", year: 1998 }; mycar.make = undefined; "make" in mycar; // true ``` ```js -var trees = new Array("redwood", "bay", "cedar", "oak", "maple"); +const trees = ["redwood", "bay", "cedar", "oak", "maple"]; trees[3] = undefined; -3 in trees; // returns true +3 in trees; // true +``` + +Оператор `in` вернёт `false` для [пустых слотов в массиве](/ru/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays), несмотря на то, что прямой доступ к свойству вернёт `undefined`. + +```js +const empties = new Array(3); +empties[2]; // undefined +2 in empties; // false +``` + +Чтобы избежать подобного, следует заполнять новый массив непустыми значениями и не записывать значения по индексам, превышающим длину массива. + +```js +const empties = new Array(3).fill(undefined); +2 in empties; // true ``` ### Наследуемые свойства -Оператор `in` возвратит `true` для свойств, которые унаследованы по цепочке прототипов. (Если вы хотите проверить только не наследованные свойства, используйте {{jsxref("Object.prototype.hasOwnProperty()")}}.) +Оператор `in` возвратит `true` для свойств, которые унаследованы по цепочке прототипов. Это может быть нежелательно при использовании объектов для хранения произвольных пар ключ-значение. + +```js example-bad +const ages = { alice: 18, bob: 27 }; + +function hasPerson(name) { + return name in ages; +} + +hasPerson("hasOwnProperty"); // true +``` + +Можно использовать {{jsxref("Object.hasOwn()")}}, чтобы проверить, существует ли в объекте данный ключ. + +```js +const ages = { alice: 18, bob: 27 }; + +function hasPerson(name) { + return Object.hasOwn(ages, name); +} + +hasPerson("hasOwnProperty"); // false +``` + +Также можно использовать [объект с прототипом null](/ru/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects) или {{jsxref("Map")}}, чтобы избежать других ошибок. + +```js example-good +const ages = new Map([ + ["alice", 18], + ["bob", 27], +]); + +function hasPerson(name) { + return ages.has(name); +} + +hasPerson("hasOwnProperty"); // false +``` + +### Использование оператора `in` для реализации _бренд-чека_ + +Фрагмент кода ниже демонстрирует статическую функцию, которая проверяет, был ли объект создан конструктором класса `Person`, и следовательно безопасно ли использовать методы этого класса. ```js -"toString" in {}; // true +class Person { + #age; + constructor(age) { + this.#age = age; + } + static isPerson(o) { + return #age in o; + } + ageDifference(other) { + return this.#age - other.#age; + } +} + +const p1 = new Person(20); +const p2 = new Person(30); +console.log(p1.ageDifference(p2)); // -10 +console.log(Person.isPerson(p1)); // true + +if (Person.isPerson(p1) && Person.isPerson(p2)) { + console.log(p1.ageDifference(p2)); // -10 +} ``` +Это помогает предотвратить следующую ошибку: + +```js +const p2 = {}; + +p1.ageDifference(p2); // TypeError: Cannot read private member #age from an object whose class did not declare it +``` + +Без оператора `in` пришлось бы использовать блок `try...catch`, чтобы проверить, есть ли в объекте приватное свойство. + +Также это можно реализовать с помощью метода класса [`@@hasInstance`](/ru/docs/Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance), и в дальнейшем использовать оператор [`instanceof`](/ru/docs/Web/JavaScript/Reference/Operators/instanceof) для выполнения такой же проверки (которая по умолчанию проверяет только наличие `Person.prototype` в цепочке прототипов объекта). + +```js +class Person { + #age; + constructor(age) { + this.#age = age; + } + static [Symbol.hasInstance](o) { + // Проверяем `this` для предотвращения ложно-положительных + // результатов при вызове `instanceof SubclassOfPerson` + return this === Person && #age in o; + } + ageDifference(other) { + return this.#age - other.#age; + } +} + +const p1 = new Person(20); +const p2 = new Person(30); + +if (p1 instanceof Person && p2 instanceof Person) { + console.log(p1.ageDifference(p2)); // -10 +} +``` + +Дополнительные примеры есть в разделе «[Приватные свойства](/ru/docs/Web/JavaScript/Reference/Classes/Private_properties)» и в [руководстве по классам](/ru/docs/Web/JavaScript/Guide/Using_classes#private_fields). + ## Спецификации {{Specifications}} @@ -102,7 +281,8 @@ trees[3] = undefined; ## Смотрите также +- [`for...in`](/ru/docs/Web/JavaScript/Reference/Statements/for...in) - [`delete`](/ru/docs/Web/JavaScript/Reference/Operators/delete) -- {{jsxref("Object.prototype.hasOwnProperty()")}} +- {{jsxref("Object.hasOwn()")}} - {{jsxref("Reflect.has()")}} -- [Enumerability and ownership of properties](/ru/docs/Enumerability_and_ownership_of_properties) +- [Перечисляемость и владение свойствами](/ru/docs/Web/JavaScript/Enumerability_and_ownership_of_properties) From a2897b1bfaca117f7f470b5ce0f50f0a97f0b954 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Sun, 30 Jun 2024 09:21:44 +0800 Subject: [PATCH 069/318] zh-CN: create Glossary/Script-supporting_element (#21572) --- .../script-supporting_element/index.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 files/zh-cn/glossary/script-supporting_element/index.md diff --git a/files/zh-cn/glossary/script-supporting_element/index.md b/files/zh-cn/glossary/script-supporting_element/index.md new file mode 100644 index 00000000000000..27332f5e289a27 --- /dev/null +++ b/files/zh-cn/glossary/script-supporting_element/index.md @@ -0,0 +1,18 @@ +--- +title: 脚本支持元素 +slug: Glossary/Script-supporting_element +l10n: + sourceCommit: d267a8cb862c20277f81bbc223221b36b0c613e6 +--- + +{{GlossarySidebar}} + +在 {{Glossary("HTML")}} 文档中，**脚本支持元素**是那些不直接影响页面的外观或布局的元素；相反，它们要么是脚本，要么包含只有脚本才会使用的信息。 + +这些元素可能很重要，但除非页面的脚本明确让它们这样做，否则它们不会影响显示的页面。 + +只有两个脚本支持元素：{{HTMLElement("script")}} 和 {{HTMLElement("template")}}。 + +## 参见 + +[脚本支持元素](/zh-CN/docs/Web/HTML/Content_categories#script-supporting_elements) From 88dd57f9c368b6e6e1da584b0c952f3b263b2651 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Sun, 30 Jun 2024 09:29:14 +0800 Subject: [PATCH 070/318] zh-CN: update Glossary/Same-origin_policy (#21577) --- files/zh-cn/glossary/same-origin_policy/index.md | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/files/zh-cn/glossary/same-origin_policy/index.md b/files/zh-cn/glossary/same-origin_policy/index.md index 1b3659810d75bf..92e2cffb594298 100644 --- a/files/zh-cn/glossary/same-origin_policy/index.md +++ b/files/zh-cn/glossary/same-origin_policy/index.md @@ -1,8 +1,20 @@ --- -title: Same-origin policy +title: 同源策略 slug: Glossary/Same-origin_policy +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -同源策略是一种重要的安全机制，用来限制来自某个域的文档或脚本与另一个域的资源的交互行为，能够隔离潜在的恶意文件，减少受攻击的可能性。 +[**同源策略**](/zh-CN/docs/Web/Security/Same-origin_policy)是一种关键的安全机制，限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。 + +它有助于隔离潜在的恶意文档，减少可能的攻击向量。 + +## 参见 + +- [同源策略](/zh-CN/docs/Web/Security/Same-origin_policy) +- [MDN Web 文档术语表](/zh-CN/docs/Glossary): + + - {{Glossary("CORS")}} + - {{Glossary("origin", "源")}} From 2290401746ed5416d91f9b6552a69890984207b2 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Sun, 30 Jun 2024 09:30:57 +0800 Subject: [PATCH 071/318] zh-CN: create Glossary/Ruby (#21578) --- files/zh-cn/glossary/ruby/index.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 files/zh-cn/glossary/ruby/index.md diff --git a/files/zh-cn/glossary/ruby/index.md b/files/zh-cn/glossary/ruby/index.md new file mode 100644 index 00000000000000..2e2fb24afbf8c5 --- /dev/null +++ b/files/zh-cn/glossary/ruby/index.md @@ -0,0 +1,18 @@ +--- +title: Ruby +slug: Glossary/Ruby +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**Ruby** 是一种开源编程语言。在 {{glossary("world wide web","Web")}} 环境中，Ruby 通常与 _Ruby On Rails_（ROR）框架一起用于服务器端，以生成网站/应用。 + +Ruby 还是一种用于在 HTML 文档中提供发音信息的东亚文本注释方法；请参阅 {{HTMLElement("ruby")}} 元素。 + +## 参见 + +- 维基百科上的 [Ruby](https://zh.wikipedia.org/wiki/Ruby) +- [Ruby 官网](https://www.ruby-lang.org) +- [Ruby On Rails 官网](https://rubyonrails.org/) From ce8ba179182179cb1519cf69531b5ac189c50010 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Sun, 30 Jun 2024 09:37:09 +0800 Subject: [PATCH 072/318] zh-CN: create Glossary/RSS (#21583) --- files/zh-cn/glossary/rss/index.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/files/zh-cn/glossary/rss/index.md b/files/zh-cn/glossary/rss/index.md index 001b3bc3d90d07..5d3332105fa3ed 100644 --- a/files/zh-cn/glossary/rss/index.md +++ b/files/zh-cn/glossary/rss/index.md @@ -1,11 +1,13 @@ --- title: RSS slug: Glossary/RSS +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -**RSS**（简易信息聚合）指的是用于发布站点更新的数种 XML 文档格式。当你订阅一个网站的 RSS 摘要时，网站会将 RSS 信息和更新信息发送到一个称为资讯（feed）的 RSS 文档中，因此你无需手动查看所有喜爱的网站就可以获取这些网站的更新动态。 +**RSS**（简易信息聚合）指的是用于发布站点更新的数种 XML 文档格式。当你订阅一个网站的 RSS 摘要时，网站会将 RSS 信息和更新信息发送到一个称为*资讯*的 RSS 文档中，因此你无需手动查看所有喜爱的网站就可以获取这些网站的更新动态。 ## 参见 From f5b884615ff9baff8c5e4b522c010d5a2022ee09 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Sun, 30 Jun 2024 09:47:39 +0800 Subject: [PATCH 073/318] zh-CN: create Glossary/RIL (#21587) --- files/zh-cn/glossary/ril/index.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 files/zh-cn/glossary/ril/index.md diff --git a/files/zh-cn/glossary/ril/index.md b/files/zh-cn/glossary/ril/index.md new file mode 100644 index 00000000000000..41069a2546babb --- /dev/null +++ b/files/zh-cn/glossary/ril/index.md @@ -0,0 +1,14 @@ +--- +title: RIL +slug: Glossary/RIL +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +RIL（无线界面层）是一个用于在设备的软件和设备的电话、无线电或调制解调器硬件之间进行通信的移动操作系统组件。 + +## 参见 + +- 维基百科上的[无线界面层](https://zh.wikipedia.org/wiki/無線介面層) From e966765aa98a866ae576f2061013287bda50431c Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Sun, 30 Jun 2024 09:49:19 +0800 Subject: [PATCH 074/318] zh-CN: create Glossary/REST (#21591) --- files/zh-cn/glossary/rest/index.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/files/zh-cn/glossary/rest/index.md b/files/zh-cn/glossary/rest/index.md index 0e996fb61d67fb..0bfdd9ca06ace6 100644 --- a/files/zh-cn/glossary/rest/index.md +++ b/files/zh-cn/glossary/rest/index.md @@ -1,19 +1,21 @@ --- title: REST slug: Glossary/REST +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -**REST**（Representational State Transfer，表现层状态转换）是一组软件架构设计规范，可实现高效、可靠和可拓展的分布式系统。 +**REST**（表现层状态转换）是一组软件架构设计规范，可实现高效、可靠和可拓展的分布式系统。 -REST 的基本概念是资源（resource），例如文件能通过明确和标准的操作与格式，转换其状态与超文本的关系。通常在 {{Glossary("API","API's")}} 或服务能直接修改文件的类型，而非触发其他行为时，它们就称自己为 RESTful。 +REST 的基本思想是通过公认的、与语言无关的、可靠标准化的客户端/服务器交互传输资源（例如文档）。当服务遵循这些规范时，称其为 RESTful 服务。 -由于万维网 {{glossary("World Wide Web","Web")}} 背后的 {{Glossary("HTTP")}} 协议也能传输文件和超文本链接，同时又充当了标准，简易的 HTTP API 虽然有时不一定遵守所有的 RESTful 规范，但它们还是会被称为 RESTful API、RESTful 服务，或者直接叫 REST 服务。初学者可以先假设 REST API 代表一个能通过标准 web 库和工具调用的 HTTP 服务。 +通常将 HTTP API 称为 RESTful API、RESTful 服务或 REST 服务，尽管它们不一定遵循所有 REST 规范。初学者可以认为 REST API 意味着可以使用标准 Web 库和工具调用的 HTTP 服务。 ## 参见 - [restapitutorial.com](https://www.restapitutorial.com/) - [restcookbook.com](https://restcookbook.com/) - 维基百科上的[表现层状态转换](https://zh.wikipedia.org/wiki/表现层状态转换) -- [REST Architecture](https://www.service-architecture.com/articles/web-services/representational_state_transfer_rest.html) +- [REST 架构](https://www.service-architecture.com/articles/web-services/representational_state_transfer_rest.html) From 94553d134d7e70a3b7bebc6cac043d67c2ec61bf Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Sun, 30 Jun 2024 10:54:19 +0800 Subject: [PATCH 075/318] zh-CN: create Glossary/Salt (#21576) Co-authored-by: A1lo --- files/zh-cn/glossary/salt/index.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 files/zh-cn/glossary/salt/index.md diff --git a/files/zh-cn/glossary/salt/index.md b/files/zh-cn/glossary/salt/index.md new file mode 100644 index 00000000000000..85c8c039c45e9c --- /dev/null +++ b/files/zh-cn/glossary/salt/index.md @@ -0,0 +1,26 @@ +--- +title: 盐 +slug: Glossary/Salt +l10n: + sourceCommit: e63979cfb7866a20a546623e6cf736ccf9055f03 +--- + +{{GlossarySidebar}} + +密码学中，**盐**是在密码被{{glossary("hash", "哈希")}}之前添加的随机数据。这使得攻击者无法从哈希值推导出密码，因为攻击者无法使用预先计算的密码和相应哈希的表来推导密码。 + +密码不应以明文形式存储，因为攻击者可能会破解存储密码的数据库。通常，密码会被哈希，然后存储哈希的结果。如果哈希函数是密码学安全的，那么即使攻击者可以访问存储的哈希，也无法逆转这个函数。 + +为了从哈希值推导出密码，攻击者可以在预先计算的表中查找与哈希对应的密码（也称为[彩虹表](https://zh.wikipedia.org/wiki/彩虹表)）： + +| 密码 | 哈希 | +| -------- | ----------- | +| pa55w0rd | 56965E2A... | +| abcdef | BEF57EC7... | +| letmein | 1C8BFE8F... | + +虽然这些表可能非常大，但这种攻击可能会成功，因为表查找是一种快速操作。 + +在对密码进行哈希之前添加随机盐可以阻止这种攻击成功，因为哈希不是仅基于密码计算的，而是基于密码与盐的组合计算的。 + +与密码不同，盐不需要保密：它可以与加盐和哈希的密码一起存储在服务器的数据库中。 From d2a361b93afd8998cecb531acdbd74c9596141cb Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Sun, 30 Jun 2024 10:54:59 +0800 Subject: [PATCH 076/318] zh-CN: create Glossary/SRI (#21534) Co-authored-by: A1lo --- files/zh-cn/glossary/sri/index.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 files/zh-cn/glossary/sri/index.md diff --git a/files/zh-cn/glossary/sri/index.md b/files/zh-cn/glossary/sri/index.md new file mode 100644 index 00000000000000..3f259ea275581c --- /dev/null +++ b/files/zh-cn/glossary/sri/index.md @@ -0,0 +1,14 @@ +--- +title: SRI +slug: Glossary/SRI +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**子资源完整性**（Subresource Integrity，SRI）安全特性使浏览器能够验证它们获取的文件（比如来自 {{Glossary("CDN")}} 的文件）是否未经意外篡改。这是通过允许你提供一个获取的文件必须匹配的密码学哈希来运作的。 + +## 参见 + +- [子资源完整性](/zh-CN/docs/Web/Security/Subresource_Integrity) From 3ca654f29e7bbc4882d4ee34cf98fc6c7aca54eb Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Sun, 30 Jun 2024 10:55:40 +0800 Subject: [PATCH 077/318] zh-CN: update Glossary/Self-Executing_Anonymous_Function (#21563) Co-authored-by: A1lo --- .../zh-cn/glossary/self-executing_anonymous_function/index.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/files/zh-cn/glossary/self-executing_anonymous_function/index.md b/files/zh-cn/glossary/self-executing_anonymous_function/index.md index 38570b09c4be39..d40779dc2a39fc 100644 --- a/files/zh-cn/glossary/self-executing_anonymous_function/index.md +++ b/files/zh-cn/glossary/self-executing_anonymous_function/index.md @@ -1,10 +1,12 @@ --- title: 自执行匿名函数 slug: Glossary/Self-Executing_Anonymous_Function +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -一个 {{glossary("JavaScript")}} {{glossary("function", "函数")}}在定义后立即执行。也被熟知为 {{glossary("IIFE")}}（立即调用函数表达式）。 +自执行匿名函数是在定义后立即执行的 {{glossary("JavaScript")}} {{glossary("function", "函数")}}，也被称作{{glossary("IIFE", "立即调用函数表达式")}}（IIFE）。 请浏览上面 IIFE 解释页链接获取更多信息。 From 5de3b08c9b93a3ac2ac3df76d5dba1f688ea17a2 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Sun, 30 Jun 2024 11:01:12 +0800 Subject: [PATCH 078/318] zh-CN: create Glossary/Routers (#21586) Co-authored-by: A1lo --- files/zh-cn/glossary/routers/index.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 files/zh-cn/glossary/routers/index.md diff --git a/files/zh-cn/glossary/routers/index.md b/files/zh-cn/glossary/routers/index.md new file mode 100644 index 00000000000000..5b605417cd7bea --- /dev/null +++ b/files/zh-cn/glossary/routers/index.md @@ -0,0 +1,26 @@ +--- +title: 路由器 +slug: Glossary/Routers +l10n: + sourceCommit: 4ece9c7cb7312506455e34bac94898ed0b6362d8 +--- + +{{GlossarySidebar}} + +Web **路由器**有三种定义： + +1. 对于网络层，路由器是一种网络设备，用于决定将{{Glossary('Packet', '数据包')}}发送到何处。 +2. 对于应用层中的{{Glossary('SPA', '单页应用')}}，路由器是一个库，用于根据给定的 {{Glossary('URL')}} 决定呈现哪个网页。此中间件模块用于所有 URL 函数，因为这些函数会接收一个文件路径，然后渲染以打开下一个页面。 +3. 在服务层中实现 {{Glossary('API')}} 时，路由器是一个软件组件，用于解析请求并将请求定向或路由到程序中的各种处理器。路由器代码通常会接收处理器的响应，并将其返回给请求者。 + +## 参见 + +对于网络层上下文： + +- [路由器](https://zh.wikipedia.org/wiki/路由器) + +对于应用层中的单页应用，大多数流行的单页应用框架都有其路由库： + +- [Angular router](https://angular.io/guide/router) +- [React router](https://reactrouter.com/) +- [Vue router](https://router.vuejs.org) From 08d80b2a9e4a5c8c58fe71831f60d0c077cc4b7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=8B=A0=EC=A0=95=EC=84=AD?= Date: Sun, 30 Jun 2024 15:11:37 +0900 Subject: [PATCH 079/318] =?UTF-8?q?[ko]=20Using=20CSS=20nesting=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=82=B4=20=EB=B2=88=EC=97=AD=20?= =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95=20(#22072)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit '자식 선택자' 항목 내 '중첩 선택자를 사용하는 경우'와 '중첩 선택자를 사용하지 않는 경우' 헤딩 번역이 잘못되어 수정했습니다. - 'Without nesting selector'가 '중첩 선택자를 사용하는 경우'로 잘못 번역되었는데, 이를 '중첩 선택자를 사용하지 않는 경우'로 바로잡았습니다. - 'With nesting selector'가 '중첩 선택자를 사용하지 않는 경우'로 잘못 번역되었는데, 이를 '중첩 선택자를 사용하는 경우'로 바로잡았습니다. --- files/ko/web/css/css_nesting/using_css_nesting/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/ko/web/css/css_nesting/using_css_nesting/index.md b/files/ko/web/css/css_nesting/using_css_nesting/index.md index 781b7842d6d393..02f708abb4b10d 100644 --- a/files/ko/web/css/css_nesting/using_css_nesting/index.md +++ b/files/ko/web/css/css_nesting/using_css_nesting/index.md @@ -55,7 +55,7 @@ parent child { > **참고:** 이 예제는 본래의 명세서를 구현하 브라우저와 현재의 중첩 명세를 구현한 브라우저에서의 다른 결과를 보여줍니다. 2023년 8월 이전에 크롬 혹은 사파리에서 구현된 명세에서는 `&` 중첩 선택자를 필요로 했습니다. 현재의 명세를 지원하는 브라우저라면 두 가지 예제 모두에서 두번째 예제와 동일한 결과를 보여줍니다. -#### 중첩 선택자를 사용하는 경우 +#### 중첩 선택자를 사용하지 않는 경우 ##### HTML @@ -100,7 +100,7 @@ label { {{EmbedLiveSample('Without_nesting_selector','100%','120')}} -#### 중첩 선택자를 사용하지 않는 경우 +#### 중첩 선택자를 사용하는 경우 ##### HTML From 01e5c9d5aa5d2b54d52bf2eb1eb4c0c22b6e6a5c Mon Sep 17 00:00:00 2001 From: Sujin <102905624+etoile-j@users.noreply.github.com> Date: Sun, 30 Jun 2024 15:29:31 +0900 Subject: [PATCH 080/318] =?UTF-8?q?[ko]=20Clients/openWindow=20=EC=8B=A0?= =?UTF-8?q?=EA=B7=9C=20=EB=B2=88=EC=97=AD,=20Clients/claim=20=EC=B5=9C?= =?UTF-8?q?=EC=8B=A0=ED=99=94=20(#21599)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [ko] clients/claim 최신화 * [ko] clients/openwindow 신규 번역 --- files/ko/web/api/clients/claim/index.md | 43 +++++---- files/ko/web/api/clients/openwindow/index.md | 91 ++++++++++++++++++++ 2 files changed, 115 insertions(+), 19 deletions(-) create mode 100644 files/ko/web/api/clients/openwindow/index.md diff --git a/files/ko/web/api/clients/claim/index.md b/files/ko/web/api/clients/claim/index.md index 559d940331d139..6c98fe84ddc6a1 100644 --- a/files/ko/web/api/clients/claim/index.md +++ b/files/ko/web/api/clients/claim/index.md @@ -1,31 +1,38 @@ --- -title: Clients.claim() +title: "Clients: claim() 메서드" +short-title: claim() slug: Web/API/Clients/claim +l10n: + sourceCommit: 2ef36a6d6f380e79c88bc3a80033e1d3c4629994 --- -{{SeeCompatTable}}{{APIRef("Service Worker Clients")}} +{{APIRef("Service Workers API")}}{{AvailableInWorkers("service")}} -{{domxref("Clients")}} 의 **`claim()`** 메소드는 active 서비스워커가 그것의 {{domxref("ServiceWorkerRegistration.scope", "scope")}} 를 가지는 모든 클라이언트들의 {{domxref("ServiceWorkerContainer.controller", "controller")}} 로서 자신을 등록하는 것을 허용한다. 이것은 이 서비스워커가 제어하게 될 클라이언트들에 "`controllerchange`" 이벤트를 발생시킨다. +{{domxref("Clients")}} 인터페이스의 **`claim()`** 메서드는 활성화된 서비스 워커가 자신의 {{domxref("ServiceWorkerRegistration.scope", "scope")}} 내 모든 클라이언트의 {{domxref("ServiceWorkerContainer.controller", "controller")}}로 설정될 수 있습니다. +이렇게 하면 이 서비스 워커가 제어하는 클라이언트에서 {{domxref("ServiceWorkerContainer","navigator.serviceWorker")}}에 "`controllerchange`" 이벤트가 트리거됩니다. -서비스워커가 최초에 등록되면, 페이지들은 다음 로드시까지 그것을 사용하지 않을 것이다. `claim()` 메소드는 그 페이지들을 즉시 제어될 수 있도록 한다. 이로 인해, 당신의 서비스워커는 네트워크 또는 다른 서비스워커를 통해 정기적으로 로드되는 페이지들을 제어하게 된다. +서비스 워커가 처음 등록될 때, 페이지는 다음에 로드될 때까지 해당 서비스 워커를 사용하지 않습니다. +`claim()` 메서드는 이런 페이지가 즉시 제어되도록 합니다. +이로 인해 서비스 워커가 네트워크를 통해 정기적으로 로드된 페이지나 +다른 서비스 워커를 통해 로드된 페이지를 제어하게 됩니다. -## Syntax +## 구문 -```js -await clients.claim(); +```js-nolint +claim() ``` -### Parameters +### 매개변수 -None. +없음. -### Returns +### 반환 값 -A {{jsxref("Promise")}} for `void`. +`undefined`로 이행되는 {{jsxref("Promise")}}. -## Example +## 예제 -다음 예시는 서비스워커의 "`activate`" 이벤트 리스너에서 `claim()` 를 사용하므로, fetch 들이 이 서비스워커를 통과하기 전에 동일한 스코프에서 로드된 클라이언트들은 다시 로드될 필요가 없다. . +다음 예제는 서비스 워커의 "`activate`" 이벤트 수신기 내에서 `claim()`을 사용하여 동일한 범위 내에서 로드된 클라이언트가 이 서비스 워커를 통해 페치를 수행하기 전에 다시 로드될 필요가 없도록 합니다. ```js self.addEventListener("activate", (event) => { @@ -41,10 +48,8 @@ self.addEventListener("activate", (event) => { {{Compat}} -## See also +## 같이 보기 -- [Using Service Workers](/ko/docs/Web/API/ServiceWorker_API/Using_Service_Workers) -- [The service worker lifecycle](https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle) -- [Is ServiceWorker ready?](https://jakearchibald.github.io/isserviceworkerready/) -- {{jsxref("Promise", "Promises")}} -- {{domxref("ServiceWorkerGlobalScope.skipWaiting()", "self.skipWaiting()")}} - skip the service worker's waiting phase +- [서비스 워커 사용하기](/ko/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- [서비스 워커 수명 주기](https://web.dev/articles/service-worker-lifecycle) +- {{domxref("ServiceWorkerGlobalScope.skipWaiting()", "self.skipWaiting()")}} - 서비스 워커의 대기 단계 건너뛰기 diff --git a/files/ko/web/api/clients/openwindow/index.md b/files/ko/web/api/clients/openwindow/index.md new file mode 100644 index 00000000000000..d0395450103c85 --- /dev/null +++ b/files/ko/web/api/clients/openwindow/index.md @@ -0,0 +1,91 @@ +--- +title: "Clients: openWindow() 메서드" +short-title: openWindow() +slug: Web/API/Clients/openWindow +l10n: + sourceCommit: 2ef36a6d6f380e79c88bc3a80033e1d3c4629994 +--- + +{{APIRef("Service Workers API")}}{{AvailableInWorkers("service")}} + +{{domxref("Clients")}} 인터페이스의 **`openWindow()`** 메서드는 +새로운 최상위 브라우징 맥락을 생성하고 주어진 URL을 로드합니다. +호출하는 스크립트에 팝업 표시 권한이 없는 경우, `openWindow()`는 `InvalidAccessError`를 발생시킵니다. + +Firefox에서는 알림 클릭 이벤트의 결과로 호출된 경우에만 메서드가 팝업을 표시할 수 있습니다. + +Android용 Chrome에서, 이 메서드는 사용자의 홈 화면에 이전에 추가된 [독립형 웹 앱](/ko/docs/Web/Progressive_web_apps)에서 제공하는 기존 브라우징 맥락에서 URL을 대신 열 수 있습니다. +최근부터 Windows용 Chrome에서도 이렇게 작동합니다. + +## 구문 + +```js-nolint +openWindow(url) +``` + +### 매개변수 + +- `url` + - : 창에서 열려는 클라이언트의 URL을 나타내는 문자열. + 일반적으로 이 값은 호출하는 스크립트와 동일한 출처의 URL이어야 합니다. + +### 반환 값 + +서비스 워커와 동일한 출처의 URL이면 {{domxref("WindowClient")}} 객체로, +그렇지 않은 경우 {{Glossary("null", "null 값")}}으로 이행된 {{jsxref("Promise")}}. + +### 예외 + +- `InvalidAccessError` {{domxref("DOMException")}} + - : 앱의 출처에 [임시 활성화](/ko/docs/Web/Security/User_activation)된 창이 없는 경우 이 예외로 프로미스가 거부됩니다. + +## 보안 요구 사항 + +- 앱의 출처에 적어도 하나의 창은 [임시 활성화](/ko/docs/Web/Security/User_activation)되어 있어야 합니다. + +## 예제 + +```js +// 해당되는 경우 OS에 알림 보내기 +if (self.Notification.permission === "granted") { + const notificationObject = { + body: "Click here to view your messages.", + data: { url: `${self.location.origin}/some/path` }, + // data: { url: 'http://example.com' }, + }; + self.registration.showNotification( + "You've got messages!", + notificationObject, + ); +} + +// 알림 클릭 이벤트 수신기 +self.addEventListener("notificationclick", (e) => { + // 알림 팝업 닫기 + e.notification.close(); + // 모든 Window 클라이언트 가져오기 + e.waitUntil( + clients.matchAll({ type: "window" }).then((clientsArr) => { + // 타겟 URL과 일치하는 창이 이미 존재하는 경우, 해당 탭에 포커스 + const hadWindowToFocus = clientsArr.some((windowClient) => + windowClient.url === e.notification.data.url + ? (windowClient.focus(), true) + : false, + ); + // 그렇지 않은 경우, 해당 URL로 새로운 탭을 열고 포커스. + if (!hadWindowToFocus) + clients + .openWindow(e.notification.data.url) + .then((windowClient) => (windowClient ? windowClient.focus() : null)); + }), + ); +}); +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} From b021bd6302ec047cfa600b18a544cf2df5ba9729 Mon Sep 17 00:00:00 2001 From: Vivi Date: Sun, 30 Jun 2024 15:36:55 +0900 Subject: [PATCH 081/318] =?UTF-8?q?[ko]=20html=20labelelement=20htmlfor=20?= =?UTF-8?q?=EC=8B=A0=EA=B7=9C=20=EB=B2=88=EC=97=AD=20(#21702)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [ko] svg shape rendering 신규 번역 * fix * feat: [ko] labelelement htmlfor 번역 * fix: 영문 원문 제거 * Update files/ko/web/api/htmllabelelement/htmlfor/index.md --------- Co-authored-by: Yeji Choi <61399588+yechoi42@users.noreply.github.com> --- .../web/api/htmllabelelement/htmlfor/index.md | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 files/ko/web/api/htmllabelelement/htmlfor/index.md diff --git a/files/ko/web/api/htmllabelelement/htmlfor/index.md b/files/ko/web/api/htmllabelelement/htmlfor/index.md new file mode 100644 index 00000000000000..c59e74c34ad702 --- /dev/null +++ b/files/ko/web/api/htmllabelelement/htmlfor/index.md @@ -0,0 +1,37 @@ +--- +title: "HTMLLabelElement: htmlFor 속성" +short-title: htmlFor +slug: Web/API/HTMLLabelElement/htmlFor +l10n: + sourceCommit: 595cba0e07c70eda7f08a12890e00ea0281933d3 +--- + +{{APIRef("HTML DOM")}} + +**`HTMLLabelElement.htmlFor`** 속성은 +[`for`](/ko/docs/Web/HTML/Element/label#for) 컨텐츠 속성의 값을 반영하는 속성입니다. +이는 스크립트에 접근할 수 있는 해당 속성이 컨텐츠 속성 `for` 의 값을 설정하거나 읽을 수 있다는 것을 의미하며, +라벨과 연결된 컨트롤 요소의 ID 에 해당합니다. + +## 값 + +컨트롤과 연결된 요소의 ID 문자열을 포함하는 문자열입니다. + +> **참고:** 이 속성에 값이 있다면, {{domxref("HTMLLabelElement.control")}} 속성 또한 +> 동일한 컨트롤을 참조해야 합니다. + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{domxref("HTMLLabelElement")}} +- {{domxref("HTMLLabelElement.control")}} +- {{domxref("HTMLElement")}} +- {{HTMLElement("label")}} +- [HTML 폼 안내서](/ko/docs/Learn/Forms) From 2377d1aa10db64c916f9e2cc328cab9797e1028e Mon Sep 17 00:00:00 2001 From: moonheekim0118 Date: Sun, 30 Jun 2024 15:37:52 +0900 Subject: [PATCH 082/318] =?UTF-8?q?[ko=08]=20Sementics=20=EC=98=A4?= =?UTF-8?q?=ED=83=80=20=EC=88=98=EC=A0=95=20=20(#21743)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix typo --- files/ko/glossary/semantics/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ko/glossary/semantics/index.md b/files/ko/glossary/semantics/index.md index 88c50a57157323..b1761f705dd198 100644 --- a/files/ko/glossary/semantics/index.md +++ b/files/ko/glossary/semantics/index.md @@ -35,7 +35,7 @@ CSS의 경우, 다양한 종류의 과일을 나타내기 위해서는 리스트 이렇게 하면 최상위 제목처럼 보이도록 렌더링되지만, 의미적 가치가 없으므로 위에서 설명한 것처럼 추가적인 이점은 얻을 수 없습니다. 따라서 작업에 적합한 HTML 요소를 사용하는 것이 좋습니다. -HTML은 채워질 '데이터'를 나타내도록 코딩해야 합니다. 기본 프리젠테이션 스타일기반이 아닙니다. 프레젠테이션(어떻게 보여져야만 하는가)은 [CSS](/ko/docs/Web/CSS)만의 단독 역할입니다. +HTML은 채워질 '데이터'를 나타내도록 코딩해야 합니다. 기본 프레젠테이션 스타일기반이 아닙니다. 프레젠테이션(어떻게 보여져야만 하는가)은 [CSS](/ko/docs/Web/CSS)만의 단독 역할입니다. 의미론적인 마크업을 사용하면 아래와 같은 이점이 있습니다. From 908377b92bdbcfed61eb9df61294f96a888c0afb Mon Sep 17 00:00:00 2001 From: Jongha Kim Date: Sun, 30 Jun 2024 15:38:57 +0900 Subject: [PATCH 083/318] =?UTF-8?q?[ko]=20Intl=20=EC=84=A4=EB=AA=85=20?= =?UTF-8?q?=EA=B8=80=20=EC=8B=A0=EA=B7=9C=20=EB=B2=88=EC=97=AD=20(#21297)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [ko] Intl 설명 글 신규 번역 - Intl 설명 글 신규 번역 * 리뷰사항 반영 --- .../reference/global_objects/intl/index.md | 162 ++++++++++++++++++ 1 file changed, 162 insertions(+) create mode 100644 files/ko/web/javascript/reference/global_objects/intl/index.md diff --git a/files/ko/web/javascript/reference/global_objects/intl/index.md b/files/ko/web/javascript/reference/global_objects/intl/index.md new file mode 100644 index 00000000000000..c7e43e44854725 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/intl/index.md @@ -0,0 +1,162 @@ +--- +title: Intl +slug: Web/JavaScript/Reference/Global_Objects/Intl +l10n: + sourceCommit: 165d921f6f96711117be2b6513944ce36c70703f +--- + +{{JSRef}} + +**`Intl`** 네임스페이스 객체에는 여러 생성자와 국제화 생성자 및 기타 언어에 민감한 함수에 공통된 기능이 포함되어 있습니다. 이를 종합하여 언어에 민감한 문자열 비교, 숫자 서식, 날짜 및 시간 서식 등을 제공하는 ECMAScript 국제화 API를 구성합니다. + +## 설명 + +대부분의 전역 객체와 달리 `Intl`은 생성자가 아닙니다. [`new` 연산자](/ko/docs/Web/JavaScript/Reference/Operators/new)와 함께 사용하거나 `Intl` 객체를 함수로 호출할 수 없습니다. {{jsxref("Math")}} 객체와 마찬가지로 `Intl`의 모든 프로퍼티와 메서드는 정적입니다. + +국제화 생성자뿐만 아니라 다른 생성자의 여러 언어에 민감한 메서드([같이 보기](#같이_보기)에 나열되어 있습니다)는 로케일을 식별하고 실제로 사용할 로케일을 결정하는 데 공통 패턴을 사용합니다. 모두 `locales` 및 `options` 인수를 받아들이고 `options.localeMatcher` 속성에 지정된 알고리즘을 사용하여 지원되는 로케일에 대해 요청된 로케일을 협상하는 방식입니다. + +### locales 인수 + +`locales` 인수는 주어진 연산에 사용되는 로케일을 정하는 데 사용됩니다. JavaScript 구현체는 `locales`을 검사하고 표현된 기본 설정을 충족하기 위해 가장 근접한 로케일을 계산합니다. 아래 항목이 `locales`이 될 수 있습니다. + +- `undefined` (흑은 생략): 구현체의 기본 로케일을 사용합니다. +- 하나의 로케일: 하나의 로케일 식별자 혹은 로케일 식별자를 감싸는 [`Intl.Locale`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) 객체 +- 로케일 리스트: 다른 값은 객체로 변환된 다음 로케일 배열로 처리됩니다. + +후자의 두 경우에서 사용되는 실제 로케일은 [로케일 협상](#로케일_식별_및_협상)을 통해 결정된, 가장 잘 지원되는 로케일입니다. 로케일 식별자가 문자열이나 객체가 아닌 경우 {{jsxref("TypeError")}}가 발생합니다. 로케일 식별자가 구문상 유효하지 않은 문자열인 경우 {{jsxref("RangeError")}}가 발생합니다. 로케일 식별자가 제대로 형성되었지만 구현체가 이를 인식하지 못하면 무시되고 목록의 다음 로케일이 고려되어 결국 시스템의 로케일로 되돌아갑니다. 그러나 구현체가 향후 모든 로케일에 대한 데이터를 추가할 수 있으므로 특정 로케일 이름이 무시되는 것에 의존해서는 안 됩니다. 예를 들어 `new Intl.DateTimeFormat("default")`는 `"default"`가 구문상으로는 유효하지만 어떤 로케일로도 인식되지 않기 때문에 구현체의 기본 로케일만 사용하게 됩니다. + +로케일 식별자는 다음으로 구성된 문자열입니다. + +1. 2~3자 또는 5~8자로 구성된 언어 하위 태그 +2. 4글자로 구성된 스크립트 하위 태그 {{optional_inline}} +3. 2글자 또는 3자리로 구성된 지역 하위 태그 {{optional_inline}} +4. 각각 5~8개의 영숫자 또는 숫자 한 자리 뒤에 영숫자 3개가 포함된 하나 이상의 변형 하위 태그(반드시 모두 고유해야 함) {{optional_inline}} +5. 하나 이상의 BCP 47 확장 시퀀스 {{optional_inline}} +6. 개인용 확장 시퀀스 {{optional_inline}} + +각 하위 태그와 시퀀스는 하이픈으로 구분됩니다. 로케일 식별자는 대소문자를 구분하지 않는 {{Glossary("ASCII")}}입니다. 그러나 스크립트 하위 태그에는 제목 대문자(첫 글자는 대문자, 이어지는 글자는 소문자)를, 지역 하위 태그에는 대문자를, 그 외에는 모두 소문자를 사용하는 것이 일반적입니다. 예를 들어 + +- `"hi"`: 힌두어(언어) +- `"de-AT"`: 오스트리아(지역)에서 사용하는 독일어(언어) +- `"zh-Hans-CN"`: 중국(지역)에서 사용하는 간체(스크립트)로 쓰인 중국어(언어) +- `"en-emodeng"`: "초기 현대 영어" 방언(변형)의 영어(언어) + +언어, 스크립트, 지역(국가 포함) 및 변형(드물게 사용)을 식별하는 하위 태그는 [IANA 언어 하위 태그 레지스트리](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)에 등록되어 있습니다. 이 레지스트리는 시간이 지남에 따라 주기적으로 업데이트되며 구현이 항상 최신 상태가 아닐 수도 있으므로 하위 태그가 널리 지원될 것이라는데 너무 의존하지 마시기 바랍니다. + +BCP 47 확장 시퀀스는 한 자리 숫자 또는 문자(`"x"` 제외)와 하이픈으로 구분된 하나 이상의 2~8자리 숫자 또는 숫자 하위 태그로 구성됩니다. 각 숫자 또는 문자당 하나의 시퀀스만 허용됩니다 `"de-a-foo-a-foo"`는 유효하지 않습니다. BCP 47 확장자 하위태그는 [유니코드 CLDR 프로젝트](https://github.com/unicode-org/cldr/tree/main/common/bcp47)에 정의되어 있습니다. 현재 두 개의 확장자만 의미가 정의되어 있습니다. + +- `"u"`(유니코드) 확장자는 `Intl` API 객체의 추가 사용자 지정을 요청하는 데 사용할 수 있습니다. 아래는 예시입니다. + + - `"de-DE-u-co-phonebk"`: 독일어 정렬 순서의 전화번호부 변형을 사용하여 다음과 같이 움라우트 모음을 해당 문자 쌍으로 해석합니다. ä → ae, ö → oe, ü → ue. + - `"th-TH-u-nu-thai"`: 숫자 형식에 태국 숫자(๐, ๑, ๒, ๓, ๔, ๕, ๖, ๗, ๘, ๙)를 사용합니다. + - `"ja-JP-u-ca-japanese"`: 날짜 및 시간 서식에서 일본 달력을 사용하여 2013년을 헤이세이 시대 25년, 즉 平成 25로 표시합니다. + - `"en-GB-u-ca-islamic"`: 영국식 영어와 이슬람(회교) 달력을 사용하며, 2017년 10월 14일 그레고리력은 1439년 무하람 24일 회교력입니다. + +- `"t"`(변환됨) 확장자는 변환된 콘텐츠(예: 다른 로케일에서 번역된 텍스트)를 나타냅니다. 현재 `Intl` 기능은 `"t"` 확장자를 고려하지 않습니다. 그러나 이 확장자는 때때로 확장자가 없는 중첩 로케일을 포함합니다. 예를 들어 `"de-t-en"`의 변환된 확장자는 영어에 대한 로케일 식별자를 포함합니다. 중첩 로케일이 있는 경우 유효한 로케일 식별자이어야 합니다. 예를 들어 `"en-emodeng-emodeng"`은 중복된 `emodeng` 변형 하위 태그가 포함되어 있으므로 유효하지 않으므로 `"de-t-en-emodeng-emodeng"`도 유효하지 않습니다. + +마지막으로 문자 `"x"`를 사용하는 비공개 확장자 시퀀스 뒤에 하이픈으로 구분된 하나 이상의 1~8자 또는 숫자 하위 태그가 나타날 수 있습니다. 이를 통해 애플리케이션은 자체적으로 비공개로 사용할 정보를 인코딩할 수 있으며, 모든 `Intl` 연산에서 무시됩니다. + +### options 인수 + +`options` 인수는 생성자와 함수마다 다른 속성을 가진 객체여야 합니다. `options` 인수가 제공되지 않거나 정의되지 않은 경우 모든 속성에 기본값이 사용됩니다. + +`localeMatcher` 속성은 모든 언어에 민감한 생성자 및 함수에서 지원됩니다. 이 속성의 값은 문자열 `"lookup"` 또는 `"best fit"`이어야 하며 아래에 설명된 로케일 일치 알고리즘 중 하나를 선택해야 합니다. + +### 로케일 식별 및 협상 + +`locales` 인수로 지정된 로케일 목록은 유니코드 확장이 제거된 후 애플리케이션에서 우선순위가 지정된 요청으로 해석됩니다. 런타임은 이를 사용 가능한 로케일과 비교하여 사용 가능한 최상의 로케일을 선택합니다. 여기엔 두 가지 매칭 알고리즘이 존재합니다. `"lookup"` 매칭은 [BCP 47](https://datatracker.ietf.org/doc/html/rfc4647#section-3.4)에 명시된 Lookup 알고리즘을 따르고, `"best fit"` 매칭은 런타임이 Lookup 알고리즘의 결과보다 최소한 요청에 더 적합한 로케일을 제공할 수 있도록 합니다. 만약 애플리케이션에서 `locales` 인수를 제공하지 않거나 런타임에 요청과 일치하는 로케일이 없는 경우 런타임의 기본 로케일이 사용됩니다. 일치 여부 검사기는 `options` 인수의 속성을 사용하여 선택할 수 있습니다(아래를 참조하시기 바랍니다). + +선택한 로케일 식별자에 유니코드 확장 순서가 있는 경우 이제 해당 확장을 사용하여 생성된 객체 또는 함수의 동작을 사용자 맞춤 사용할 수 있습니다. 각 생성자 또는 함수는 유니코드 확장에 대해 정의된 키의 하위 집합만 지원하며, 지원되는 값은 로케일 식별자에 따라 달라지는 경우가 많습니다. 예를 들어 `"co"` 키(콜레이션)는 {{jsxref("Intl.Collator")}}에서만 지원되며, `"phonebk"` 값은 독일어에서만 지원됩니다. + +## 정적 속성 + +- {{jsxref("Intl.Collator")}} + - : 언어별 문자열 비교를 가능하게 하는 객체인 콜레이터의 생성자입니다. +- {{jsxref("Intl.DateTimeFormat")}} + - : 언어별 날짜와 시간 형식을 정할 수 있는 객체의 생성자입니다. +- {{jsxref("Intl.DisplayNames")}} + - : 언어, 지역 및 스크립트 표시 이름을 일관되게 번역할 수 있는 객체의 생성자입니다. +- {{jsxref("Intl.DurationFormat")}} {{experimental_inline}} + - : 로케일별로 기간 형식을 지정할 수 있는 객체의 생성자입니다. +- {{jsxref("Intl.ListFormat")}} + - : 언어별 리스트 형식을 정할 수 있는 객체의 생성자입니다. +- {{jsxref("Intl.Locale")}} + - : 유니코드 식별자를 표현할 수 있는 객체의 생성자입니다. +- {{jsxref("Intl.NumberFormat")}} + - : 언어별 숫자 형식을 정할 수 있는 객체의 생성자입니다. +- {{jsxref("Intl.PluralRules")}} + - : 복수형을 구분하는 형식과 언어별 규칙을 활성화하는 객체의 생성자입니다. +- {{jsxref("Intl.RelativeTimeFormat")}} + - : 상대 시간 형식을 정할 수 있는 객체의 생성자입니다. +- {{jsxref("Intl.Segmenter")}} + - : 로케일에 따른 텍스트 세그먼트를 정할 수 있는 객체의 생성자입니다. +- `Intl[@@toStringTag]` + - : [`@@toStringTag`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag)속성의 초기값은 문자열 `"Intl"`입니다. 이 속성은 {{jsxref("Object.prototype.toString()")}}에서 사용합니다. + +## 정적 메서드 + +- {{jsxref("Intl.getCanonicalLocales()")}} + - : 표준 로케일 이름을 반환합니다. +- {{jsxref("Intl.supportedValuesOf()")}} + - : 구현체에서 지원하는 지원되는 고유한 달력, 콜레이션, 통화, 숫자 체계 또는 단위 값이 포함된, 정렬된 배열을 반환합니다. + +## 예제 + +### 날짜와 숫자 서식 지정 + +`Intl`를 사용하여 특정 언어 및 지역의 일반적인 형식으로 날짜 및 숫자 형식을 지정할 수 있습니다. + +```js +const count = 26254.39; +const date = new Date("2012-05-24"); + +function log(locale) { + console.log( + `${new Intl.DateTimeFormat(locale).format(date)} ${new Intl.NumberFormat( + locale, + ).format(count)}`, + ); +} + +log("en-US"); // 5/24/2012 26,254.39 + +log("de-DE"); // 24.5.2012 26.254,39 +``` + +### 브라우저의 선호 언어 사용하기 + +`Intl` 메서드에 하드코딩된 로케일 이름을 전달하는 대신 {{domxref("navigator.language")}}에서 제공하는 사용자가 선호하는 언어를 사용할 수 있습니다. + +```js +const date = new Date("2012-05-24"); + +const formattedDate = new Intl.DateTimeFormat(navigator.language).format(date); +``` + +또는 {{domxref("navigator.languages")}} 속성은 사용자가 선호하는 언어의 정렬된 목록을 제공합니다. 이 목록을 `Intl` 생성자에 직접 전달하여 기본 설정 기반 로케일 대체 선택을 구현할 수 있습니다. [로케일 협상](#로케일_식별_및_협상) 프로세스는 사용 가능한 가장 적합한 로케일을 선택하는 데 사용됩니다. + +```js +const count = 26254.39; + +const formattedCount = new Intl.NumberFormat(navigator.languages).format(count); +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{jsxref("String.prototype.localeCompare()")}} +- {{jsxref("Number.prototype.toLocaleString()")}} +- {{jsxref("Date.prototype.toLocaleString()")}} +- {{jsxref("Date.prototype.toLocaleDateString()")}} +- {{jsxref("Date.prototype.toLocaleTimeString()")}} +- {{domxref("Keyboard.getLayoutMap()")}} +- {{domxref("navigator.language")}} +- {{domxref("navigator.languages")}} +- [The ECMAScript Internationalization API](https://norbertlindenberg.com/2012/12/ecmascript-internationalization-api/index.html) by Norbert Lindenberg (2012) From 26ba4835b5f90f06995cc0a5d3e6e735a0fb8692 Mon Sep 17 00:00:00 2001 From: Jongha Kim Date: Sun, 30 Jun 2024 16:06:32 +0900 Subject: [PATCH 084/318] =?UTF-8?q?[ko]=20Intl.RelativeTimeFormat.supporte?= =?UTF-8?q?dLocalesOf()=20=EC=8B=A0=EA=B7=9C=EB=B2=88=EC=97=AD=20(#21772)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Intl.RelativeTimeFormat.supportedLocalesOf() 신규 번역 --- .../supportedlocalesof/index.md | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 files/ko/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.md diff --git a/files/ko/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.md b/files/ko/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.md new file mode 100644 index 00000000000000..199bb751998c30 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.md @@ -0,0 +1,57 @@ +--- +title: Intl.RelativeTimeFormat.supportedLocalesOf() +slug: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/supportedLocalesOf +l10n: + sourceCommit: 5c3c25fd4f2fbd7a5f01727a65c2f70d73f1880a +--- + +{{JSRef}} + +**`Intl.RelativeTimeFormat.supportedLocalesOf()`** 정적 메서드는 런타임의 기본 로케일로 돌아갈 필요 없이 상대 시간 형식으로 지원되는 제공된 로케일이 포함된 배열을 반환합니다. + +{{EmbedInteractiveExample("pages/js/intl-relativetimeformat-supportedlocalesof.html", "shorter")}} + +## 구문 + +```js-nolint +Intl.RelativeTimeFormat.supportedLocalesOf(locales) +Intl.RelativeTimeFormat.supportedLocalesOf(locales, options) +``` + +### 매개변수 + +- `locales` + - : BCP 47 언어 태그가 포함된 문자열 또는 이러한 로케일 식별자의 배열입니다. `locales` 인수의 일반적인 형식과 해석에 대해서는 [`Intl` 메인 페이지의 매개변수 설명](/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument)을 참조하세요. +- `options` {{optional_inline}} + - : 다음의 속성을 가질 수 있는 객체 + - `localeMatcher` + - : 사용할 로케일 일치 알고리즘입니다. 가능한 값은 `"lookup"` 및 `"best fit"`이며, 기본값은 `"best fit"`입니다. 이 옵션에 대해 더 알고 싶으시다면 {{jsxref("Intl", "Intl", "#locale_identification_and_negotiation", 1)}} 페이지를 참고하시기 바랍니다. + +### 반환 값 + +런타임의 기본 로케일로 되돌아가지 않고 상대 시간 형식으로 지원되는 지정된 로케일 태그의 하위 집합을 나타내는 문자열 배열입니다. + +## 예제 + +### supportedLocalesOf() 사용하기 + +인도네시아어와 독일어는 지원하지만 인도네시아어는 상대 시간 형식을 지원하지 않는 런타임을 가정해보면, `supportedLocalesOf`는 인도네시아어와 독일어 언어 태그를 변경 없이 반환하지만 `pinyin` 콜레이션은 상대 시간 형식과 관련이 없거나 인도네시아어와 함께 사용되지 않으며 인도네시아에 특화된 독일어는 지원되지 않을 가능성이 높습니다. 여기서 `"lookup"` 알고리즘의 명세에 유의하세요. 대부분의 인도네시아어 사용자도 인도네시아어를 이해하므로 `"best fit"` 매처는 인도네시아어가 인도네시아어와 적절히 일치한다고 판단하여 인도네시아어 태그도 반환할 수 있습니다. + +```js +const locales = ["ban", "id-u-co-pinyin", "de-ID"]; +const options = { localeMatcher: "lookup" }; +console.log(Intl.RelativeTimeFormat.supportedLocalesOf(locales, options)); +// ["id-u-co-pinyin", "de-ID"] +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{jsxref("Intl.RelativeTimeFormat")}} From 9d085123b687d09c33e429eee9ed5c92e1a335ec Mon Sep 17 00:00:00 2001 From: Vivi Date: Sun, 30 Jun 2024 21:24:32 +0900 Subject: [PATCH 085/318] =?UTF-8?q?[ko]=20svg=20attr=20data-*=20=EC=8B=A0?= =?UTF-8?q?=EA=B7=9C=20=EB=B2=88=EC=97=AD=20(#21773)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit feat: [ko] svg attr data-* 신규 번역 --- .../ko/web/svg/attribute/data-_star_/index.md | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 files/ko/web/svg/attribute/data-_star_/index.md diff --git a/files/ko/web/svg/attribute/data-_star_/index.md b/files/ko/web/svg/attribute/data-_star_/index.md new file mode 100644 index 00000000000000..57a9f0d14e7970 --- /dev/null +++ b/files/ko/web/svg/attribute/data-_star_/index.md @@ -0,0 +1,34 @@ +--- +title: data-* +slug: Web/SVG/Attribute/data-* +l10n: + sourceCommit: 335dda2e9a42f5e9257ee398437cd984f6cabb45 +--- + +{{SVGRef}} + +**`data-*`** SVG 특성은 사용자 정의 데이터 특성이라고 불립니다. 이 특성은 스크립팅 목적으로 사용되며, 표준 특성으로는 공유할 수 없는 정보를 SVG 마크업과 그 결과로 출력된 DOM 공유할 수 있게 합니다. 사용자 정의 데이터는 특성이 속한 요소의 {{domxref("SVGElement")}} 인터페이스를 통해 가능하며 {{domxref("SVGElement.dataset")}} 속성을 통해 사용할 수 있습니다. + +`*` 는 [명명을 위한 XML 규칙들](https://www.w3.org/TR/REC-xml/#NT-Name) 에서 허용하는 어떠한 문자열로도 대체가 가능하지만, 아래와 같은 제한 사항들이 있습니다. + +- `xml` 로 시작할 수 없습니다. +- 세미콜론 (`;`, `U+003A`) 이 허용되지 않습니다. +- 대문자 `A` 부터 `Z` 는 사용하지 않습니다. + +> **참고:** {{domxref("SVGElement.dataset")}} 속성은 `SVGElement.dataset.testValue` 를 통해 `data-test-value` 특성을 제공하는 {{domxref("DOMStringMap")}} 속성입니다. 하이픈 문자 (`-`, `U+002D`) 는 제거되고 다음 문자는 대문자로 변환되며, {{Glossary("camel_case", "카멜 케이스")}} 형식이 됩니다. + +이 특성은 어느 SVG 요소에도 적용 가능합니다. + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{domxref("SVGElement")}} +- {{domxref("SVGElement.dataset")}} 속성은 스크립트에서 이러한 특성들로 접근할 때 사용됩니다. +- [데이터 특성 사용하기](/ko/docs/Learn/HTML/Howto/Use_data_attributes) From 44ffd4c63abbcaf0fd2f176a288c417d36990fc7 Mon Sep 17 00:00:00 2001 From: A1lo Date: Sun, 30 Jun 2024 21:10:20 +0800 Subject: [PATCH 086/318] zh-cn: create the translation of "Firefox 126 release note" (#21277) Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- .../mozilla/firefox/releases/126/index.md | 100 ++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 files/zh-cn/mozilla/firefox/releases/126/index.md diff --git a/files/zh-cn/mozilla/firefox/releases/126/index.md b/files/zh-cn/mozilla/firefox/releases/126/index.md new file mode 100644 index 00000000000000..64ad596f87cfc8 --- /dev/null +++ b/files/zh-cn/mozilla/firefox/releases/126/index.md @@ -0,0 +1,100 @@ +--- +title: Firefox 126 的开发者说明 +slug: Mozilla/Firefox/Releases/126 +l10n: + sourceCommit: e6fcda9d35359bbfec32ddb42086468701f57ee5 +--- + +{{FirefoxSidebar}} + +本文提供了有关 Firefox 126 中影响开发者的变更信息。Firefox 126 于 [2024 年 5 月 14 日](https://whattrainisitnow.com/release/?version=126)发布。 + +## 为 Web 开发者带来的变化 + +### 开发者工具 + +- 添加了用于禁用拆分控制台的选项（[Firefox bug 1731635](https://bugzil.la/1731635)）。 + +### HTML + +没有值得注意的变化。 + +### MathML + +#### 移除 + +- 垂直居中运算符（+、=、< 等）的自动调整已默认禁用。这种行为并未在 MathML Core 中定义，这只是为非数学字体的问题提供的一种解决方案。仍可以通过将 `mathml.centered_operators.disabled` 配置设为 `false` 来启用此特性。（[Firefox bug 1890531](https://bugzil.la/1890531)）。 + +### CSS + +- 现已支持 {{cssxref("zoom")}} 属性。其可用于增加或减小元素及其内容的大小（[Firefox bug 390936](https://bugzil.la/390936)）。 + +### JavaScript + +没有值得注意的变化。 + +### HTTP + +- 现已支持新的 `Content-Encoding` HTTP 标头的指令 [`zstd`](/zh-CN/docs/Web/HTTP/Headers/Content-Encoding#zstd)，允许解码服务器发送的、使用 {{glossary("Zstandard compression", "Zstandard 压缩")}}算法编码的内容（[Firefox bug 1871963](https://bugzil.la/1871963)）。 + +### API + +- 现已支持 [`IDBFactory.databases()`](/zh-CN/docs/Web/API/IDBFactory/databases)，其用于枚举可用的 [IndexedDB API](/zh-CN/docs/Web/API/IndexedDB_API) 数据库（[Firefox bug 934640](https://bugzil.la/934640)）。 +- 现在支持使用 [`IDBTransaction.durability`](/zh-CN/docs/Web/API/IDBTransaction/durability) 来查询用于创建特定事务的持久性提示（[Firefox bug 1878143](https://bugzil.la/1878143)）。 +- [`URL.parse()`](/zh-CN/docs/Web/API/URL/parse_static) 静态方法现已支持创建 [`URL`](/zh-CN/docs/Web/API/URL) 对象。如果传递的参数未定义有效的 `URL`，则返回 `null`，因此可以作为使用 [`URL` 构造函数](/zh-CN/docs/Web/API/URL/URL)创建 `URL` 对象的不抛出异常的替代方法（[Firefox bug 1823354](https://bugzil.la/1823354)）。 +- 现已支持[屏幕唤醒锁 API](/zh-CN/docs/Web/API/Screen_Wake_Lock_API)，其用于请求在应用程序处于活动状态时不要使屏幕变暗或锁定。这对于导航和阅读应用程序以及其他的因为在使用时屏幕可能不会接收到通常会使其保持唤醒状态的常规触摸输入的应用程序特别有用。在安全上下文中，可以通过 {{domxref("Navigator.wakeLock")}}（会返回一个 {{domxref("WakeLock")}}）访问 API。其允许你请求一个用于监视唤醒锁的状态并手动释放它的 {{domxref("WakeLockSentinel")}}（[Firefox bug 1589554](https://bugzil.la/1589554)、[Firefox bug 1874849](https://bugzil.la/1874849)）。 +- 现已支持所有的 [`RTCIceCandidate`](/zh-CN/docs/Web/API/RTCIceCandidate) 属性和方法（除了未实现的 `relayProtocol` 和 `url` 属性），并与规范相匹配。已对 `RTCIceCandidate` 的属性进行了以下更改： + + - 已将以下属性变为只读：[`candidate`](/zh-CN/docs/Web/API/RTCIceCandidate/candidate)、[`sdpMid`](/zh-CN/docs/Web/API/RTCIceCandidate/sdpMid)、[`sdpMLineIndex`](/zh-CN/docs/Web/API/RTCIceCandidate/sdpMLineIndex) 和 [`usernameFragment`](/zh-CN/docs/Web/API/RTCIceCandidate/usernameFragment)。 + - 已添加以下属性：[`foundation`](/zh-CN/docs/Web/API/RTCIceCandidate/foundation)、[`component`](/zh-CN/docs/Web/API/RTCIceCandidate/component)、[`priority`](/zh-CN/docs/Web/API/RTCIceCandidate/priority)、[`address`](/zh-CN/docs/Web/API/RTCIceCandidate/address)、[`protocol`](/zh-CN/docs/Web/API/RTCIceCandidate/protocol)、[`port`](/zh-CN/docs/Web/API/RTCIceCandidate/port)、[`type`](/zh-CN/docs/Web/API/RTCIceCandidate/type)、[`tcpType`](/zh-CN/docs/Web/API/RTCIceCandidate/tcpType)、[`relatedAddress`](/zh-CN/docs/Web/API/RTCIceCandidate/relatedAddress)、[`relatedPort`](/zh-CN/docs/Web/API/RTCIceCandidate/relatedPort) 和 [`usernameFragment`](/zh-CN/docs/Web/API/RTCIceCandidate/usernameFragment)。 + + （[Firefox bug 1322186](https://bugzil.la/1322186)）。 + +- 现已支持 {{domxref("Element.currentCSSZoom")}} 只读属性，其用于获取元素的实际 CSS [zoom](/zh-CN/docs/Web/CSS/zoom)（[Firefox bug 1880189](https://bugzil.la/1880189)）。 + +#### DOM + +- 定义自定义元素的状态并使用 CSS 选择器进行匹配的特性现已默认可用。自定义状态被表示为可以添加到或从元素的 {{domxref("ElementInternals.states")}} 属性（{{domxref("CustomStateSet")}}）中移除的自定义标识符。CSS [`:state()`](/zh-CN/docs/Web/CSS/:state) 伪类以自定义标识符为参数，并在自定义元素的状态集中存在该标识符时匹配该元素（[Firefox bug 1887543](https://bugzil.la/1887543)）。 +- 现已支持 {{domxref("Selection.direction")}} 属性，其用于指示范围的方向（[Firefox bug 1867058](https://bugzil.la/1867058)）。 + +#### 媒体、WebRTC 和 Web 音频 + +#### 移除 + +- 现已从 [`HTMLMarqueeElement`](/zh-CN/docs/Web/API/HTMLMarqueeElement) 中删除字幕事件 [`bounce`](/zh-CN/docs/Web/API/HTMLMarqueeElement#bounce)、[`finish`](/zh-CN/docs/Web/API/HTMLMarqueeElement#finish) 和 [`start`](/zh-CN/docs/Web/API/HTMLMarqueeElement#start)，同时删除的还有在 [`` HTML 元素](/zh-CN/docs/Web/HTML/Element/marquee)上定义的相应的[事件处理器属性](/zh-CN/docs/Web/HTML/Element/marquee#事件处理器)（[Firefox bug 1689705](https://bugzil.la/1689705)）。 + +### WebDriver 一致性（WebDriver BiDi、Marionette） + +#### WebDriver BiDi + +- 已为 `network.addIntercept` 命令添加了 `contexts` 参数，其用于限制对特定顶级浏览上下文的网络请求拦截（[Firefox bug 1884935](https://bugzil.la/1882260)）。 +- `session.subscribe` 和 `session.unsubscribe` 现在都会在参数 `events` 或 `contexts` 的值为空数组时引发 `invalid argument` 错误（[Firefox bug 1884935](https://bugzil.la/1887871)）。 +- 已更新对 `storage.getCookies` 命令的实现，以与 Gecko 默认的 cookie 行为保持一致。这允许删除用户的 `network.cookie.cookieBehavior` 偏好设置（预期仅会用于我们的 CDP 实现）（[Firefox bug 1884935](https://bugzil.la/1879503)）。 +- 已移除 `browsingContext.locateNodes` 命令的 `ownership` 和 `sandbox` 参数，因为它们不再被需要（[Firefox bug 1884935](https://bugzil.la/1838152)）。 +- 已改进 `session.new` 命令在未指定任何能力时的错误消息（[Firefox bug 1885495](https://bugzil.la/1838152)）。 + +## 为附加组件开发者带来的变化 + +- {{WebExtAPIRef("commands.onCommand")}} 事件现在将 `tab` 参数传递给事件监听器。这使得扩展可以将触发的快捷键应用于发出该事件的页面，而无需调用 `tabs.query()` 方法（[Firefox bug 1843866](https://bugzil.la/1843866)）。 +- {{WebExtAPIRef("runtime.MessageSender")}} 类型现在包含 `origin` 属性。这使得消息或连接请求可以查看打开连接的页面或框架。这对于在 URL 中未明确显示来源的情况下确定来源是否可信非常有用（[Firefox bug 1787379](https://bugzil.la/1787379)）。 +- 现已支持 `"webRequestAuthProvider"` 权限。这为 Manifest V3 中用于 {{WebExtAPIRef("webRequest.onAuthRequired")}} 的请求权限提供了与 Chrome 的兼容性（[Firefox bug 1820569](https://bugzil.la/1820569)）。 +- 现在提供 [`options_page` 清单键](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_page)来作为 [`options_ui`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui) 键的别名。这是为了使扩展更好地与 Chrome 兼容（[Firefox bug 1816960](https://bugzil.la/1816960)）。 +- {{WebExtAPIRef("tabs.captureVisibleTab")}} 方法现在也可以通过 `activeTab` [权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)启用，这提供了与 Chrome 和 Safari 的兼容性（[Firefox bug 1784920](https://bugzil.la/1784920)）。 + +### 其他 + +## 实验性 Web 特性 + +这些特性是 Firefox 126 中新添加的，但在默认情况下是禁用的。要尝试这些特性，请在 `about:config` 页面上搜索相应的首选项，并将其设置为 `true`。你可以在[实验性特性](/zh-CN/docs/Mozilla/Firefox/Experimental_features)页面上找到更多这样的特性。 + +- **可跨越影子 DOM 边界的选择**：`dom.shadowdom.selection_across_boundary.enabled`。 + + {{domxref("Selection.getComposedRanges()")}} 方法现在可用于获取影子 DOM 中具有锚点或焦点的节点的选择范围——前提是传递了包含这些节点的 {{domxref("ShadowRoot")}} 对象。`Selection` 的 {{domxref("Selection.setBaseAndExtent()","setBaseAndExtent()")}}、{{domxref("Selection.collapse()","collapse()")}} 和 {{domxref("Selection.extend()","extend()")}} 方法也已修改，以接受影子根中的节点（[Firefox bug 1867058](https://bugzil.la/1867058)）。 + +- **CSS `shape()` 函数**：`layout.css.basic-shape-shape.enabled`。 + + 你可以在 {{cssxref("clip-path")}} 和 {{cssxref("offset-path")}} 属性中使用 [`shape()`](/zh-CN/docs/Web/CSS/basic-shape/shape) 函数来定义形状。此函数使你可以更精细地控制可被定义的形状，并提供了比 {{cssxref("path","path()")}} 函数更多的优点（参见 [Firefox bug 1823463](https://bugzil.la/1823463) 以了解 `shape()` 函数在 `clip-path` 中的支持；参见 [Firefox bug 1884424](https://bugzil.la/1884424) 以了解 `shape()` 函数在 `offset-path` 中的支持；参见 [Firefox bug 1884425](https://bugzil.la/1884425) 以了解 `shape()` 的插值支持）。 + +## 更早期的版本 + +{{Firefox_for_developers}} From 4703357babd26005c2e73df0faff662572335dee Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Sun, 30 Jun 2024 21:50:10 +0800 Subject: [PATCH 087/318] [zh-cn]: create the translation of `tabs.onAttached` event (#21866) Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- .../api/tabs/onattached/index.md | 101 ++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onattached/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onattached/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onattached/index.md new file mode 100644 index 00000000000000..d9d34b6daab998 --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onattached/index.md @@ -0,0 +1,101 @@ +--- +title: tabs.onAttached +slug: Mozilla/Add-ons/WebExtensions/API/tabs/onAttached +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c +--- + +{{AddonSidebar}} + +当标签页附加到窗口时触发，例如因为它在窗口之间移动。 + +## 语法 + +```js-nolint +browser.tabs.onAttached.addListener(listener) +browser.tabs.onAttached.removeListener(listener) +browser.tabs.onAttached.hasListener(listener) +``` + +事件具有三个函数： + +- `addListener(listener)` + - : 向此事件添加一个监听器。 +- `removeListener(listener)` + - : 停止监听此事件。`listener` 参数是要移除的监听器。 +- `hasListener(listener)` + - : 检查 `listener` 是否已注册此事件。如果正在监听，则返回 `true`，否则返回 `false`。 + +## addListener 语法 + +### 参数 + +- `listener` + + - : 此事件发生时调用的函数。该函数接收以下参数： + + - `tabId` + - : `integer`。附加到新窗口的标签页的 ID。 + - `attachInfo` + - : `object`。新窗口的 ID 以及标签页在其中的位置。详见 [attachInfo](#attachinfo_2) 部分。 + +## 附加对象 + +### attachInfo + +- `newWindowId` + - : `integer`。新窗口的 ID。 +- `newPosition` + - : `integer`。标签页在新窗口中的索引位置。 + +## 示例 + +监听 attach 事件并记录信息： + +```js +function handleAttached(tabId, attachInfo) { + console.log(`标签页：${tabId} 已附加`); + console.log(`新窗口：${attachInfo.newWindowId}`); + console.log(`新索引：${attachInfo.newPosition}`); +} + +browser.tabs.onAttached.addListener(handleAttached); +``` + +{{WebExtExamples}} + +## 浏览器兼容性 + +{{Compat}} + +> **备注：** 该 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#event-onAttached) API。此文档来自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。 + + From 87c361a58d964ab5fd1a78b26ea645bfa3cf7dfd Mon Sep 17 00:00:00 2001 From: Jongha Kim Date: Sun, 30 Jun 2024 22:51:39 +0900 Subject: [PATCH 088/318] =?UTF-8?q?[ko]=20TypedArray.prototype.with()=20?= =?UTF-8?q?=EC=8B=A0=EA=B7=9C=EB=B2=88=EC=97=AD=20=EC=99=B8=20(#22020)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [ko] TypedArray.prototype.with() 신규번역 외 - TypedArray.prototype.with() 신규 번역 - Array.prototype.with() 최신화 * 리뷰 사항 반영 --- .../global_objects/array/with/index.md | 12 ++-- .../global_objects/typedarray/with/index.md | 63 +++++++++++++++++++ 2 files changed, 71 insertions(+), 4 deletions(-) create mode 100644 files/ko/web/javascript/reference/global_objects/typedarray/with/index.md diff --git a/files/ko/web/javascript/reference/global_objects/array/with/index.md b/files/ko/web/javascript/reference/global_objects/array/with/index.md index 54c845eaeb0c31..7d9d549c79600a 100644 --- a/files/ko/web/javascript/reference/global_objects/array/with/index.md +++ b/files/ko/web/javascript/reference/global_objects/array/with/index.md @@ -2,7 +2,7 @@ title: Array.prototype.with() slug: Web/JavaScript/Reference/Global_Objects/Array/with l10n: - sourceCommit: 6bd17cb9cbc2d11163617b9f71706e93fdd743c8 + sourceCommit: 85d7482697cc2bf407c58e809a2a754180d6714c --- {{JSRef}} @@ -19,7 +19,7 @@ array.with(index, value) - `index` - : 배열을 변경할 0 기반 인덱스이며 [정수로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#integer_conversion)되는 값입니다. - - 음수 인덱스는 배열의 끝부터 역산합니다 — `index < 0`인 경우 `index + array.length`가 사용됩니다. + - 음수 인덱스는 배열의 끝부터 역산합니다 — `-array.length <= index < 0`인 경우 `index + array.length`가 사용됩니다. - 정규화 후 인덱스가 범위를 벗어나면, {{jsxref("RangeError")}}가 발생합니다. - `value` - : 주어진 인덱스에 할당할 값입니다. @@ -37,6 +37,8 @@ array.with(index, value) `with()` 메서드는 배열에서 주어진 인덱스의 값을 변경하여, 주어진 인덱스에 있는 요소가 주어진 값으로 대체된 새 배열을 반환합니다. 원래 배열은 수정되지 않습니다. 이를 통해 조작을 수행하는 동안 배열 메서드를 연속으로 이어서 호출 할 수 있습니다. +`with()`를 {{jsxref("Array/at", "at()")}}와 결합하면, 음수 인덱스를 사용하여 배열을 각각 읽고 쓸 수 있습니다. + `with()` 메서드는 [희소 배열](/ko/docs/Web/JavaScript/Guide/Indexed_collections#희소배열)을 생성하지 않습니다. 만약 원래 배열이 희소 배열인 경우 빈 슬롯은 새로운 배열에서 `undefined`으로 대체됩니다. `with()` 메서드는 [제네릭](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#generic_array_methods) 메서드입니다. 이 메서드는 `this` 값에 `length` 속성과 정수 키 속성 만을 필요로 합니다. @@ -71,8 +73,7 @@ console.log(arr.with(0, 2)); // [2, undefined, 3, 4, undefined, 6] ### 배열이 아닌 객체에서 with() 호출하기 -`with()` 메서드는 `this`의 `length` 속성을 읽습니다. 그리고 `this`의 정수 키 속성을 읽어서 새 배열에 쓰고, -`value`는 주어진 `index`에 씁니다. +`with()` 메서드는 새로운 배열을 생성하고 반환합니다. 이 메서드는 `this`의 `length` 속성을 읽은 다음 키가 `length`보다 작은, 음수가 아닌 정수인 각 속성에 접근합니다. `this`의 각 속성에 접근하면 속성의 키와 동일한 인덱스를 갖는 배열 요소가 속성의 값으로 설정됩니다. 마지막으로 `index`의 배열 값은 `value`로 설정됩니다. ```js const arrayLike = { @@ -80,6 +81,7 @@ const arrayLike = { unrelated: "foo", 0: 5, 2: 4, + 3: 3, // length가 3이기 때문에 with()메서드는 이를 무시합니다. }; console.log(Array.prototype.with.call(arrayLike, 0, 1)); // [ 1, undefined, 4 ] @@ -96,7 +98,9 @@ console.log(Array.prototype.with.call(arrayLike, 0, 1)); ## 같이 보기 - [Polyfill of `Array.prototype.with` in `core-js`](https://github.com/zloirock/core-js#change-array-by-copy) +- [인덱스 기반 컬렉션](/ko/docs/Web/JavaScript/Guide/Indexed_collections) 가이드 - {{jsxref("Array.prototype.toReversed()")}} - {{jsxref("Array.prototype.toSorted()")}} - {{jsxref("Array.prototype.toSpliced()")}} +- {{jsxref("Array.prototype.at()")}} - {{jsxref("TypedArray.prototype.with()")}} diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/with/index.md b/files/ko/web/javascript/reference/global_objects/typedarray/with/index.md new file mode 100644 index 00000000000000..291374b949c929 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/typedarray/with/index.md @@ -0,0 +1,63 @@ +--- +title: TypedArray.prototype.with() +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/with +l10n: + sourceCommit: a815a95e4ab4adf391d8a7bc66a3abbce1a686d8 +--- + +{{JSRef}} + +{{jsxref("TypedArray")}} 인스턴스의 **`with()`** 메서드는 [대괄호 표기법](/ko/docs/Web/JavaScript/Reference/Operators/Property_accessors#bracket_notation)을 사용하여 주어진 인덱스의 값을 변경하는 [복사](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#복사_메서드와_변경_메서드mutating_method) 버전입니다. 이 메서드는 주어진 인덱스의 요소가 주어진 값으로 대체된 새로운 형식화 배열을 반환합니다. 이 메서드는 {{jsxref("Array.prototype.with()")}} 메서드와 같은 알고리즘을 가지고 있습니다. + +## 구문 + +```js-nolint +arrayInstance.with(index, value) +``` + +### 매개변수 + +- `index` + - : 형식화 배열을 변경할 0 기반 인덱스이며 [정수로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#integer_conversion)되는 값입니다. +- `value` + - : 주어진 인덱스에 할당할 모든 값. + +### 반환 값 + +`index`의 요소 값이 `value`로 대체된 새로운 형식화 배열. + +### 예외 + +- {{jsxref("RangeError")}} + - : `index >= array.length` 혹은 `index < -array.length`일때 발생합니다. + +## 설명 + +보다 상세한 설명은 {{jsxref("Array.prototype.with()")}}를 참고하시기 바랍니다. 이 메서드는 제네릭이 아니며 형식화 배열 인스턴스에서만 호출할 수 있습니다. + +## 예제 + +### with() 사용하기 + +```js +const arr = new Uint8Array([1, 2, 3, 4, 5]); +console.log(arr.with(2, 6)); // Uint8Array [1, 2, 6, 4, 5] +console.log(arr); // Uint8Array [1, 2, 3, 4, 5] +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [Polyfill of `TypedArray.prototype.with` in `core-js`](https://github.com/zloirock/core-js#change-array-by-copy) +- [JavaScript 형식화 배열](/ko/docs/Web/JavaScript/Guide/Typed_arrays) guide +- {{jsxref("TypedArray.prototype.toReversed()")}} +- {{jsxref("TypedArray.prototype.toSorted()")}} +- {{jsxref("TypedArray.prototype.at()")}} +- {{jsxref("Array.prototype.with()")}} From f9cc2faf340f3c186d9660fed31fdf7c2d81e50d Mon Sep 17 00:00:00 2001 From: Dabeen Jeong Date: Sun, 30 Jun 2024 22:54:49 +0900 Subject: [PATCH 089/318] =?UTF-8?q?[ko]=20HTTP=20Upgrade=20=08Header=20?= =?UTF-8?q?=EC=8B=A0=EA=B7=9C=20=EB=B2=88=EC=97=AD=20(#21925)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit feat: translate http header upgrade --- files/ko/web/http/headers/upgrade/index.md | 110 +++++++++++++++++++++ 1 file changed, 110 insertions(+) create mode 100644 files/ko/web/http/headers/upgrade/index.md diff --git a/files/ko/web/http/headers/upgrade/index.md b/files/ko/web/http/headers/upgrade/index.md new file mode 100644 index 00000000000000..ab7b5a3180ec6e --- /dev/null +++ b/files/ko/web/http/headers/upgrade/index.md @@ -0,0 +1,110 @@ +--- +title: Upgrade +slug: Web/HTTP/Headers/Upgrade +l10n: + sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8 +--- + +{{HTTPSidebar}} + +HTTP 1.1 전용 `Upgrade` 헤더는 이미 설정된 클라이언트/서버 연결을 다른 프로토콜로 업그레이드하는데 사용할 수 있습니다. 예를 들어서 클라이언트가 HTTP 1.1에서 HTTP 2.0으로 업그레이드하는데 사용하거나, HTTP 또는 HTTPS 연결을 웹소켓으로 업그레이드하는데 사용할 수 있습니다. + +> **경고:** HTTP/2는 이 메커니즘의 사용을 명시적으로 허용하지 않고, HTTP/1.1에서만 명시적으로 허용합니다. + + + + + + + + + + + + +
헤더 타입 + {{Glossary("Request header", "요청 헤더")}}, + {{Glossary("Response header", "응답 헤더")}} +
{{Glossary("Forbidden header name", "금지된 헤더 이름")}}예
+ +## 개요 + +`Upgrade` 헤더 필드는 클라이언트가 서버에게 우선순위가 내림차순으로 나열된 프로토콜 중 하나로 전환할 것을 요청하는데 사용됩니다. + +예를 들어 클라이언트는 전환할 선호 프로토콜(아래는 "example/1"과 "foo/2"인 경우)을 나열하여 다음과 같이 `GET` 요청을 보낼 수 있습니다. + +```http +GET /index.html HTTP/1.1 +Host: www.example.com +Connection: upgrade +Upgrade: example/1, foo/2 +``` + +> **참조:** `Upgrade`를 전송할 때마다 `Connection: upgrade`를 설정해야 합니다. + +서버는 어떤 이유로든 요청을 무시하도록 선택할 수 있으며, 이 경우 {{HTTPStatus(200, "200 OK")}}와 같이 업그레이드 헤더가 전송되지 않은 것처럼 응답해야 합니다. + +만약 서버가 연결을 업그레이드하기로 결정했으면 반드시 업그레이드해야 합니다. + +1. 전환할 프로토콜을 명시하는 `Upgrade` 헤더와 함께 {{HTTPStatus(101, "101 Switching Protocols")}}를 반환합니다. + + ```http + HTTP/1.1 101 Switching Protocols + Upgrade: foo/2 + Connection: Upgrade + ``` + +2. 새로운 프로토콜을 사용하여 원래 요청에 대한 응답을 보냅니다. 서버는 원래 요청을 완료할 수 있는 프로토콜로만 전환할 수 있습니다. + +서버는 {{HTTPStatus("426")}} `Upgrade Required` 응답의 일부로 이 헤더를 보낼 수도 있으며, 이것은 서버가 현재 프로토콜을 사용하여 요청을 수행하지 않지만, 프로토콜이 변경되면 수행할 수 있음을 나타냅니다. 클라이언트는 위 프로세스를 사용하여 프로토콜 변경을 요청할 수 있습니다. + +자세힌 내용과 예제는 [프로토콜 업그레이드 메커니즘](/ko/docs/Web/HTTP/Protocol_upgrade_mechanism) 항목에서 제공합니다. + +## 구문 + +```http +Connection: upgrade +Upgrade: protocol_name[/protocol_version] +``` + +참조 + +- {{HTTPHeader("Connection")}} 헤더의 `upgrade` 유형은 항상 `Upgrade` 헤더와 함께 전송되어야 합니다. +- 프로토콜은 쉼표로 구분하여 선호도 기준 내림차순으로 나열됩니다. 프로토콜 버전은 선택사항입니다. + +```http +Connection: upgrade +Upgrade: a_protocol/1, example, another_protocol/2.2 +``` + +## 지시어 + +- 쉼표로 구분한 프로토콜 이름 목록 (선택적으로 버전 포함) + - : 하나 이상의 프로토콜 이름과 버전(이름과 버전은 "/"로 구분). 프로토콜은 선호도 기준 내림차순으로 나열합니다. + +## 예제 + +```http +Connection: upgrade +Upgrade: HTTP/2.0, SHTTP/1.3, IRC/6.9, RTA/x11 +``` + +```http +Connection: Upgrade +Upgrade: websocket +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [프로토콜 업그레이드 메커니즘](/ko/docs/Web/HTTP/Protocol_upgrade_mechanism) +- {{HTTPStatus("101")}} `Switching Protocol` +- {{HTTPStatus("426")}} `Upgrade Required` +- {{HTTPHeader("Connection")}} From 2ec2710ca0e9ed2112f46ee1040d1e7fef8ef149 Mon Sep 17 00:00:00 2001 From: A1lo Date: Sun, 30 Jun 2024 22:06:27 +0800 Subject: [PATCH 090/318] zh-cn: update the translation of "Web Performance" (#21704) --- files/zh-cn/web/performance/index.md | 120 +++++++++++++-------------- 1 file changed, 59 insertions(+), 61 deletions(-) diff --git a/files/zh-cn/web/performance/index.md b/files/zh-cn/web/performance/index.md index deef788e56f36d..3b753eb4994e4b 100644 --- a/files/zh-cn/web/performance/index.md +++ b/files/zh-cn/web/performance/index.md @@ -1,15 +1,17 @@ --- title: Web 性能 slug: Web/Performance +l10n: + sourceCommit: 035dd5ef748061d1997c1c79f972781dd680dfa4 --- {{QuickLinksWithSubPages}} -Web 性能是客观的衡量标准，是用户对加载时间和运行时的直观体验。Web 性能指页面加载到可交互和可响应所消耗的时间，以及页面在交互时的流畅度——滚动是否顺滑？按钮能否点击？弹窗能否快速打开，动画是否平滑？Web 性能既包括客观的度量如加载时间，每秒帧数和到页面可交互的时间；也包括用户的对页面内容加载时间的主观感觉。 +Web 性能是客观的衡量标准，是用户对加载时间和运行时的直观体验。Web 性能指站点从加载到可交互和可响应所消耗的时间，以及页面在交互时的流畅度——滚动是否顺滑？按钮能否点击？弹窗能否快速加载和显示、动画是否平滑？Web 性能既包括客观的度量（如加载时间、每秒帧数和到页面可交互的时间），也包括用户的对页面内容加载时间的主观感觉。 -页面响应时间越长，越多的用户就会放弃该网站。重要的是，通过使体验尽可能早地变得可用和交互，同时异步地加载长尾体验部分，来最大程度地减少加载和响应时间，并添加其他功能以降低延迟。 +站点响应时间越长，越多的用户就会放弃该网站。重要的是尽量缩短加载和响应时间，并添加其他特性来降低延迟：尽快提供尽可能可用且可交互的体验，并异步加载长尾体验部分。 -有很多工具，API 和最佳实践帮助我们测量和改进网页性能。本章对此有所讲解。 +有很多工具、API 和最佳实践帮助我们测量和改进 Web 性能。我们将在本节中介绍： ## 关键性能指南 @@ -17,52 +19,48 @@ Web 性能是客观的衡量标准，是用户对加载时间和运行时的直 ## 初学者教程 -MDN [Web 性能学习专区](/zh-CN/docs/Learn/Performance)有着涵盖性能要素的最新教程。如果你是性能新手，请从这里开始： +MDN [Web 性能学习专区](/zh-CN/docs/Learn/Performance)有着涵盖性能要素的最新教程。如果你是性能方面的新手，请从这里开始： -- [Web 性能：概述](/zh-CN/docs/Learn/Performance/web_performance_overview) - - : Web 性能学习路径概述。在这里开始你的旅程。 +- [Web 性能：概述](/zh-CN/docs/Learn/Performance/What_is_web_performance) + - : Web 性能学习路径概述。从这里开始你的旅程。 - [什么是 Web 性能？](/zh-CN/docs/Learn/Performance/What_is_web_performance) - - : 该文从一个模块开始，很好地讲述了性能到底是什么——包括我们在考虑性能时需要考虑的工具、指标、API、网络和人群，以及如何使性能成为 Web 开发工作流程的一部分。 -- [用户如何看待性能？](/zh-CN/docs/Learn/Performance/perceived_performance) - - : 比网站在毫秒内响应速度更重要的是，用户对网站的感知速度有多快。这些感知受到页面实际加载时间、空闲、用户交互响应以及滚动和其他动画的平滑度的影响。在本文中，我们将随着最佳练习来提升用户感知（而不是实际时间）并讨论各种加载指标、动画和响应性指标。 -- [Web 性能基础](/zh-CN/docs/Learn/Performance/web_performance_basics) - - : 除了 HTML，CSS，JavaScript 和媒体文件这些前端模块之外，还有其他影响 Web 性能的因素，它们可能会导致应用程序变慢，或在主观和客观上使应用程序变快。有许多与 Web 性能相关的 API、开发人员工具、最佳实践和不当做法。我们将在基础层面上介绍这些影响因素，并提供进阶优化其中每一项性能的链接。 + - : 本文从一个模块开始，很好地讲述了性能到底是什么——包括我们在考虑性能时需要考虑的工具、指标、API、网络和人群，以及如何使性能成为 Web 开发工作流程的一部分。 +- [用户如何看待性能？](/zh-CN/docs/Learn/Performance/Perceived_performance) + - : 比网站在毫秒内的响应速度更重要的是，用户对网站的感知速度有多快。这些感知受到页面实际加载时间、空闲、用户交互响应以及滚动和其他动画的平滑度的影响。在本文中，我们将随着最佳实践来提升用户感知（而不是实际时间）并讨论各种加载指标、动画和响应性指标。 +- [Web 性能基础](/zh-CN/docs/Learn/Performance/Web_Performance_Basics) + - : 除了 HTML、CSS、JavaScript 和媒体文件这些前端组件之外，还有其他导致应用程序变慢，或在主观和客观上使应用程序变快的因素。有许多与 Web 性能相关的 API、开发者工具、最佳实践和不当做法。我们将在基础层面上介绍这些影响因素，并提供进阶优化其中每一项性能的链接。 - [HTML 性能特性](/zh-CN/docs/Learn/Performance/HTML) - - : 标签的某些属性和顺序可能会影响网站性能。通过最大程度地减少 DOM 节点的数量，确保使用最佳顺序和属性，包括样式、脚本、媒体和第三方脚本等内容，可以大大改善用户体验。该文详细介绍了如何使用 HTML 来确保最佳性能。 + - : 标记的某些属性和顺序可能会影响网站性能。通过最大程度地减少 DOM 节点的数量，确保使用最佳顺序和属性（包括样式、脚本、媒体和第三方脚本等内容），可以大大改善用户体验。该文详细介绍了如何使用 HTML 来确保最佳性能。 - [多媒体：图像与视频](/zh-CN/docs/Learn/Performance/Multimedia) - - : Web 性能的最小代价通常是媒体优化。基于每个用户代理的能力、大小和像素密度来服务不同的媒体文件已成为可能。另外，如从背景图像中删除音频轨迹，可进一步提升性能。该文讨论视频、音频和图像内容对性能的影响，以及确保影响尽可能小的方法。 -- [CSS 性能特性](/zh-CN/docs/Learn/Performance/CSS_performance) + - : Web 性能最容易提升的点通常是媒体优化。基于每个用户代理的能力、尺寸和像素密度来提供不同的媒体文件已成为可能。另外，如从背景视频中删除音轨，可进一步提升性能。该文讨论视频、音频和图像内容对性能的影响，以及确保将影响降至最低的方法。 +- [CSS 性能特性](/zh-CN/docs/Learn/Performance/CSS) - : CSS 对于提高性能来说可能是一个不太重要的优化点，但是某些 CSS 特性对性能的影响比其他特性更大。在该文中，我们将研究一些影响性能的 CSS 属性，并提供样式处理的建议方法，以确保性能不受负面影响。 - [JavaScript 性能最佳实践](/zh-CN/docs/Learn/Performance/JavaScript) - - : 如果正确使用 JavaScript，则可以提供交互式和身临其境的 Web 体验——否则可能会严重损害下载时间、渲染时间、应用内性能、电池寿命和用户体验。该文概述了一些值得思考的 JavaScript 最佳实践，以确保即使复杂的内容也尽可能地具有高性能。 -- [移动端性能](/zh-CN/docs/Learn/Performance/Mobile) - - : 随着移动设备上的 Web 访问普及，并且所有移动平台都具有功能完善的 Web 浏览器，但由于受限于带宽、CPU、电池续航等因素，因此考虑这些平台上 Web 内容的性能非常重要。本文着眼于特定于移动设备的性能注意事项。 + - : 如果正确使用 JavaScript，则可以提供交互式和沉浸式的 Web 体验——否则可能会严重影响下载时间、渲染时间、应用内性能、电池寿命和用户体验。该文概述了一些值得思考的 JavaScript 最佳实践，以确保即使复杂的内容也尽可能地具有高性能。 ## 使用 Performance API -- [Performance API](/zh-CN/docs/Web/API/Performance_API/Using_the_Performance_API) - - : 该指南介绍了如何使用 [High-Resolution Time](https://w3c.github.io/hr-time/) 标准中定义的 [`Performance`](/zh-CN/docs/Web/API/Performance) 接口。 -- [Resource Timing API](/zh-CN/docs/Web/API/Performance_API/Resource_timing) - - : [资源加载和定时](/zh-CN/docs/Web/API/Performance_API/Resource_timing)加载这些资源，包括管理资源缓冲区和处理 CORS -- [User Timing API](/zh-CN/docs/Web/API/Performance_API/User_timing) - - : 使用创建特定于应用程序的时间戳 user timing API 的“标记”和“度量”条目类型——它们是浏览器性能时间轴的一部分。 -- [Beacon API](/zh-CN/docs/Web/API/Beacon_API/Using_the_Beacon_API) - - : 使用 [Beacon](/zh-CN/docs/Web/API/Beacon_API) 接口调度发送给服务器的异步非阻塞请求。 -- [Intersection Observer API](/zh-CN/docs/Web/API/Intersection_Observer_API/Timing_element_visibility) - - : 通过 [Intersection Observer API](/zh-CN/docs/Web/API/Intersection_Observer_API) 学习对元素可见性的监测，并在关注的元素变得可见时被异步通知。 +- [资源计时 API](/zh-CN/docs/Web/API/Performance_API/Resource_timing) + - : [资源加载并计时](/zh-CN/docs/Web/API/Performance_API/Resource_timing)这些资源的加载，包括管理资源缓冲区和应对 [CORS](/zh-CN/docs/Web/HTTP/CORS)。 +- [用户计时 API](/zh-CN/docs/Web/API/Performance_API/User_timing) + - : 使用[用户计时 API](/zh-CN/docs/Web/API/Performance_API/User_timing) 的“标记”和“度量”条目类型（它们是浏览器性能时间轴的一部分）创建特定于应用程序的时间戳。 +- [信标 API](/zh-CN/docs/Web/API/Beacon_API) + - : 使用[信标](/zh-CN/docs/Web/API/Beacon_API)接口调度发送给 Web 服务器的异步非阻塞请求。 +- [交叉观察器 API](/zh-CN/docs/Web/API/Intersection_Observer_API/Timing_element_visibility) + - : 通过[交叉观察器 API](/zh-CN/docs/Web/API/Intersection_Observer_API) 学习对元素可见性的监测，并在关注的元素变得可见时接收异步通知。 ## 其他文档 -- [开发者工具中与性能相关的功能](/zh-CN/docs/Tools/Performance) - - : 本节提供有关如何使用和理解开发人员工具中的性能特性的信息，包括 [Waterfall](/zh-CN/docs/Tools/Performance/Waterfall)、[Call Tree](/zh-CN/docs/Tools/Performance/Call_Tree) 和 [Flame Charts](/zh-CN/docs/Tools/Performance/Flame_Chart)。 +- [Firefox Profiler 性能特性](https://profiler.firefox.com/docs/#/) + - : 网站提供了如何使用和理解开发者工具中的性能特性的信息，包括[调用树](https://profiler.firefox.com/docs/#/./guide-ui-tour-panels?id=the-call-tree)、[火焰图](https://profiler.firefox.com/docs/#/./guide-ui-tour-panels?id=the-flame-graph)、[栈图](https://profiler.firefox.com/docs/#/./guide-ui-tour-panels?id=the-stack-chart)、[标记图](https://profiler.firefox.com/docs/#/./guide-ui-tour-panels?id=the-marker-chart)和[网络图](https://profiler.firefox.com/docs/#/./guide-ui-tour-panels?id=the-network-chart)。 - [使用内置分析器进行分析](https://profiler.firefox.com/docs/#/./guide-getting-started) - : 了解如何使用 Firefox 的内置分析器来分析应用程序性能。 -## 各种术语 +## 术语表 -- {{glossary('Beacon')}} +- {{glossary('Beacon', '信标')}} - {{glossary('Brotli compression', 'Brotli 压缩')}} -- {{glossary('Client hints', '客户端提示')}} +- [客户端提示](/zh-CN/docs/Web/HTTP/Client_hints) - {{glossary('Code splitting', '代码拆分')}} - {{glossary('CSSOM')}} - {{glossary('Domain sharding', '域名分片')}} @@ -70,44 +68,43 @@ MDN [Web 性能学习专区](/zh-CN/docs/Learn/Performance)有着涵盖性能要 - {{glossary('First contentful paint', '首次内容绘制')}} - {{glossary('First CPU idle', '首次 CPU 空闲')}} - {{glossary('First input delay', '首次输入延迟')}} -- {{glossary('First interactive', '首次交互')}} - {{glossary('First meaningful paint', '首次有效绘制')}} - {{glossary('First paint', '首次绘制')}} - {{glossary('HTTP')}} - {{glossary('HTTP_2', 'HTTP/2')}} -- {{glossary('Jank', '卡顿（Jank）')}} +- {{glossary('Jank', '卡顿')}} - {{glossary('Latency', '延迟')}} - {{glossary('Lazy load', '懒加载')}} - {{glossary('Long task', '长任务')}} - {{glossary('Lossless compression', '无损压缩')}} - {{glossary('Lossy compression', '有损压缩')}} - {{glossary('Main thread', '主线程')}} -- {{glossary('Minification', '代码缩减')}} -- {{glossary('Network throttling', '网络节流')}} +- {{glossary('Minification', '极简化')}} +- {{glossary('Network throttling', '网络限速')}} - {{glossary('Packet', '包')}} - {{glossary('Page load time', '页面加载时间')}} - {{glossary('Page prediction', '页面预测')}} - {{glossary('Parse', '解析')}} - {{glossary('Perceived performance', '感知性能')}} -- {{glossary('Prefetch')}} -- {{glossary('Prerender')}} +- {{glossary('Prefetch', '预取')}} +- {{glossary('Prerender', '预渲染')}} - {{glossary('QUIC')}} - {{glossary('RAIL')}} - {{glossary('Real User Monitoring', '真实用户监控')}} -- {{glossary('Resource Timing')}} +- {{glossary('Resource Timing', '资源计时')}} - {{glossary('Round Trip Time (RTT)', '来回通讯延迟（RTT）')}} -- {{glossary('Server Timing')}} -- {{glossary('Speculative parsing')}} +- {{glossary('Server Timing', '服务器计时')}} +- {{glossary('Speculative parsing', '预解析')}} - {{glossary('Speed index', '速度指标')}} - {{glossary('SSL')}} -- {{glossary('Synthetic monitoring', '综合监控')}} +- {{glossary('Synthetic monitoring', "模拟监控")}} - {{glossary('TCP handshake', 'TCP 握手')}} - {{glossary('TCP slow start', 'TCP 慢开始')}} - {{glossary('Time to first byte', '第一字节时间')}} - {{glossary('Time to interactive', '可交互时间')}} - {{glossary('TLS')}} - {{glossary('TCP', '传输控制协议（TCP）')}} -- {{glossary('Tree shaking', '摇树（Tree shaking）')}} +- {{glossary('Tree shaking', '摇树')}} - {{glossary('Web performance', 'Web 性能')}} ## 参见 @@ -121,7 +118,8 @@ HTML - [响应式图片](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) -- [使用 `rel="preload"` 以预加载内容](/zh-CN/docs/Web/HTML/Link_types/preload)—— +- [使用 `rel="preload"` 以预加载内容](/zh-CN/docs/Web/HTML/Attributes/rel/preload) +- CSS @@ -133,30 +131,30 @@ CSS JavaScript - [DOMContentLoaded](/zh-CN/docs/Web/API/Document/DOMContentLoaded_event) -- [垃圾回收（GC）](/zh-CN/docs/Glossary/Garbage_collection) -- [requestAnimationFrame](/zh-CN/docs/Web/API/window/requestAnimationFrame) +- [垃圾回收](/zh-CN/docs/Glossary/Garbage_collection) +- [requestAnimationFrame](/zh-CN/docs/Web/API/Window/requestAnimationFrame) API - [Performance API](/zh-CN/docs/Web/API/Performance_API) -- [Navigation Timing API](/zh-CN/docs/Web/API/Performance_API/Navigation_timing) -- [Media Capabilities API](/zh-CN/docs/Web/API/Media_Capabilities_API/Using_the_Media_Capabilities_API) -- [Network Information API](/zh-CN/docs/Web/API/Network_Information_API) +- [导航计时 API](/zh-CN/docs/Web/API/Performance_API/Navigation_timing) +- [媒体能力 API](/zh-CN/docs/Web/API/Media_Capabilities_API/Using_the_Media_Capabilities_API) +- [网络信息 API](/zh-CN/docs/Web/API/Network_Information_API) - [PerformanceNavigationTiming](/zh-CN/docs/Web/API/PerformanceNavigationTiming) -- [Battery Status API](/zh-CN/docs/Web/API/Battery_Status_API) +- [电池状态 API](/zh-CN/docs/Web/API/Battery_Status_API) - [Navigator.deviceMemory](/zh-CN/docs/Web/API/Navigator/deviceMemory) -- [Intersection Observer](/zh-CN/docs/Web/API/Intersection_Observer_API) -- [使用 User Timing API](/zh-CN/docs/Web/API/Performance_API/User_timing) -- [Long Tasks API](/zh-CN/docs/Web/API/Long_Tasks_API) -- [High Resolution Timing API](/zh-CN/docs/Web/API/DOMHighResTimeStamp)（[https://w3c.github.io/hr-time/)](https://w3c.github.io/hr-time/)） -- [Resource Timing API](/zh-CN/docs/Web/API/Performance_API/Resource_timing) -- [Page Visibility](/zh-CN/docs/Web/API/Page_Visibility_API) -- [基于 Background Tasks API 的后台任务调度](/zh-CN/docs/Web/API/Background_Tasks_API) +- [交叉观察器](/zh-CN/docs/Web/API/Intersection_Observer_API) +- [使用用户计时 API](/zh-CN/docs/Web/API/Performance_API/User_timing) +- [长任务 API](/zh-CN/docs/Web/API/PerformanceLongTaskTiming) +- [高解析度时间 API](/zh-CN/docs/Web/API/DOMHighResTimeStamp)（） +- [资源计时 API](/zh-CN/docs/Web/API/Performance_API/Resource_timing) +- [页面可见性](/zh-CN/docs/Web/API/Page_Visibility_API) +- [后台任务协同调度 API](/zh-CN/docs/Web/API/Background_Tasks_API) - [requestIdleCallback()](/zh-CN/docs/Web/API/Window/requestIdleCallback) -- [Beacon API](/zh-CN/docs/Web/API/Beacon_API) -- Resource Hints - [dns-prefetch](/zh-CN/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control), preconnect, [prefetch](/zh-CN/docs/Glossary/Prefetch), and prerender +- [信标 API](/zh-CN/docs/Web/API/Beacon_API) +- 资源提示：[dns-prefetch](/zh-CN/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control)、[preconnect](/zh-CN/docs/Web/HTML/Attributes/rel/preconnect)、[prefetch](/zh-CN/docs/Glossary/Prefetch) 和 prerender - [FetchEvent.preloadResponse](/zh-CN/docs/Web/API/FetchEvent/preloadResponse) - [Performance Server Timing API](/zh-CN/docs/Web/API/PerformanceServerTiming) @@ -164,7 +162,7 @@ API - [Content-encoding](/zh-CN/docs/Web/HTTP/Headers/Content-Encoding) - HTTP/2 -- [gZip](/zh-CN/docs/Glossary/GZip_compression) +- [gZip](/zh-CN/docs/Glossary/gzip_compression) - 客户端提示 工具 @@ -182,6 +180,6 @@ API - [Web Worker API](/zh-CN/docs/Web/API/Web_Workers_API) -- [PWA](/zh-CN/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Offline_Service_workers) +- [离线和后台操作](/zh-CN/docs/Web/Progressive_web_apps/Guides/Offline_and_background_operation) - [缓存](/zh-CN/docs/Web/HTTP/Caching) - 内容分发网络（CDN） From 0e9d71c848f280eefb3808ba512a313549f5c208 Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Sun, 30 Jun 2024 22:26:14 +0800 Subject: [PATCH 091/318] [zh-cn]: create the translation of `tabs.ZoomSettingsMode` type (#21860) --- .../api/tabs/zoomsettingsmode/index.md | 59 +++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/tabs/zoomsettingsmode/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/zoomsettingsmode/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/zoomsettingsmode/index.md new file mode 100644 index 00000000000000..7a4326dbc5d8b3 --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/zoomsettingsmode/index.md @@ -0,0 +1,59 @@ +--- +title: tabs.ZoomSettingsMode +slug: Mozilla/Add-ons/WebExtensions/API/tabs/ZoomSettingsMode +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c +--- + +{{AddonSidebar}} + +定义如何处理缩放更改。扩展可以将此值传递给 {{WebExtAPIRef("tabs.setZoomSettings()")}} 以控制浏览器如何处理标签页的缩放设置更改。默认值为“automatic”。 + +## 类型 + +该类型的值是字符串。可能的值为： + +- “automatic” + - : 缩放更改由浏览器正常处理。 +- “disabled” + - : 禁用标签页中的所有缩放。标签页将恢复到默认缩放级别，所有尝试的缩放更改将被忽略。 +- “manual” + - : 扩展将自行处理缩放更改，通过监听 {{WebExtAPIRef("tabs.onZoomChange")}} 事件并相应地缩放页面。此模式不支持 `per-origin` 缩放：它将忽略 `scope` {{WebExtAPIRef("tabs.zoomSettings", "zoom setting")}} 并始终使用 `per-tab`。 + +## 浏览器兼容性 + +{{Compat}} + +{{WebExtExamples}} + +> **备注：** 该 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#type-ZoomSettingsMode) API。此文档来自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。 + + From 019f204b68bdeae1339c35a6e38f5f2888e2a20c Mon Sep 17 00:00:00 2001 From: Mozinet Date: Sun, 30 Jun 2024 23:15:27 +0200 Subject: [PATCH 092/318] Remove anglicism from HTTP 3 glossary (#20686) * Update index.md anglicism * Markdown lint fix Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: Carolyn Wu <87150472+cw118@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/fr/glossary/http_3/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/fr/glossary/http_3/index.md b/files/fr/glossary/http_3/index.md index 5f7a41891a4d08..e163ad4812d573 100644 --- a/files/fr/glossary/http_3/index.md +++ b/files/fr/glossary/http_3/index.md @@ -5,7 +5,7 @@ slug: Glossary/HTTP_3 {{GlossarySidebar}} -**HTTP/3** est la prochaine révision majeure du [protocole réseau HTTP](/fr/docs/Web/HTTP/Basics_of_HTTP), succédant à {{glossary("HTTP 2", "HTTP/2")}}. Le point majeur de HTTP/3 est qu'il utilise un nouveau protocole {{glossary("UDP")}} nommé QUIC, au lieu de {{glossary("TCP")}}. +**HTTP/3** est la prochaine révision majeure du [protocole réseau HTTP](/fr/docs/Web/HTTP/Basics_of_HTTP), succédant à {{glossary("HTTP 2", "HTTP/2")}}. L'intérêt principal de HTTP/3 est qu'il utilise un nouveau protocole {{glossary("UDP")}} nommé QUIC, au lieu de {{glossary("TCP")}}. ## Voir aussi From e68e74e791175236e340b121187dad4573d7eb14 Mon Sep 17 00:00:00 2001 From: Quentin <59255702+quentin-rey@users.noreply.github.com> Date: Sun, 30 Jun 2024 23:17:10 +0200 Subject: [PATCH 093/318] [FR] Fix: Update intro for `Web/JavaScript/Reference/Global_Objects/Map/set` (Fixes #20735) (#20758) * fix: Update intro * fix: update Exemple to use const instead of var --- .../javascript/reference/global_objects/map/set/index.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/files/fr/web/javascript/reference/global_objects/map/set/index.md b/files/fr/web/javascript/reference/global_objects/map/set/index.md index 87a39c72fd682d..d9f93e8118b7d6 100644 --- a/files/fr/web/javascript/reference/global_objects/map/set/index.md +++ b/files/fr/web/javascript/reference/global_objects/map/set/index.md @@ -1,11 +1,13 @@ --- title: Map.prototype.set() slug: Web/JavaScript/Reference/Global_Objects/Map/set +l10n: + sourceCommit: 3cfd663738e9963157d90f359789d675a6662ec2 --- {{JSRef}} -La méthode **`set()`** ajoute un nouvel élément avec une `clé` et une `valeur` données à un objet `Map`. +La méthode **`set()`** ajoute ou met à jour un élément avec une `clé` et une `valeur` données à un objet `Map`. {{EmbedInteractiveExample("pages/js/map-prototype-set.html")}} @@ -31,7 +33,7 @@ L'objet `Map` courant (auquel l'élément a été ajouté). ### Utiliser la méthode `set()` ```js -var maMap = new Map(); +const maMap = new Map(); // On ajoute de nouveaux éléments à l'objet map maMap.set("truc", "toto"); From 7937205407294433f4ced320d9472e15e852bc03 Mon Sep 17 00:00:00 2001 From: kiuxfr Date: Sun, 30 Jun 2024 23:22:54 +0200 Subject: [PATCH 094/318] [fr] fix typo in `Web/API/fetch` code example (#21052) Fix code example Co-authored-by: Carolyn Wu <87150472+cw118@users.noreply.github.com> --- files/fr/web/api/fetch/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/fr/web/api/fetch/index.md b/files/fr/web/api/fetch/index.md index afa0cf262b9f38..2b54ed77c6b1c7 100644 --- a/files/fr/web/api/fetch/index.md +++ b/files/fr/web/api/fetch/index.md @@ -81,7 +81,7 @@ let maRequete = new Request("fleurs.jpg"); fetch(maRequete) .then(function (reponse) { - if (!response.ok) { + if (!reponse.ok) { throw new Error(`erreur HTTP! statut: ${reponse.status}`); } return reponse.blob(); From ef4bdf55006ea5ae9f45709a8a293390383c5c9d Mon Sep 17 00:00:00 2001 From: Nari Florian <43005195+floriannari@users.noreply.github.com> Date: Sun, 30 Jun 2024 23:25:34 +0200 Subject: [PATCH 095/318] [fr] fix broken link to W3C in banner_role page (#21766) --- files/fr/web/accessibility/aria/roles/banner_role/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/fr/web/accessibility/aria/roles/banner_role/index.md b/files/fr/web/accessibility/aria/roles/banner_role/index.md index c4d5522191b907..030c94ef46d105 100644 --- a/files/fr/web/accessibility/aria/roles/banner_role/index.md +++ b/files/fr/web/accessibility/aria/roles/banner_role/index.md @@ -7,7 +7,7 @@ slug: Web/Accessibility/ARIA/Roles/banner_role ### Description -Cette technique présente l'utilisation du rôle [`banner` (en)](https://www.w3.org/TR/wai-aria/roles#banner). +Cette technique présente l'utilisation du rôle [`banner` (en)](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/banner.html). La zone d'entête principale d'un site devrait être structurée avec `
`. Cette zone peut contenir le logo du site, sa description, le moteur de recherche. From 6a73f626dd44cb7f640135104dc5bc8293e5bd4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micka=C3=ABl=20A?= Date: Sun, 30 Jun 2024 23:27:24 +0200 Subject: [PATCH 096/318] fix-l10n(fr): misleading sentence (#21981) --- .../add-ons/webextensions/api/storage/storagearea/get/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.md b/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.md index 31f170eda49b8a..afa2d8ae7ca090 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.md @@ -22,7 +22,7 @@ let gettingItem = browser.storage..get( ### Paramètres - `keys` - - : Une clé (chaîne) ou des clés (un tableau de chaînes ou un objet spécifiant des valeurs par défaut) pour identifier le ou les articles à extraire du stockage. Si vous passez une chaîne vide, un objet ou un tableau ici, un objet vide sera récupéré. Si vous passez `null`, ou une valeur indéfinie, le contenu entier du stockage sera récupéré. + - : Une clé (chaîne) ou des clés (un tableau de chaînes ou un objet spécifiant des valeurs par défaut) pour identifier le ou les articles à extraire du stockage. Si vous passez un objet ou un tableau vide ici, un objet vide sera récupéré. Si vous passez `null`, ou une valeur indéfinie, le contenu entier du stockage sera récupéré. ### Valeur retournée From cb4206eb0334e6db35f3c5be93cb7004a01a2768 Mon Sep 17 00:00:00 2001 From: Sujin <102905624+etoile-j@users.noreply.github.com> Date: Mon, 1 Jul 2024 08:11:14 +0900 Subject: [PATCH 097/318] =?UTF-8?q?[ko]=20HTMLElement/translate=20?= =?UTF-8?q?=EC=8B=A0=EA=B7=9C=20=EB=B2=88=EC=97=AD=20(#21742)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ko/web/api/htmlelement/translate/index.md | 64 +++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 files/ko/web/api/htmlelement/translate/index.md diff --git a/files/ko/web/api/htmlelement/translate/index.md b/files/ko/web/api/htmlelement/translate/index.md new file mode 100644 index 00000000000000..096124d6d78917 --- /dev/null +++ b/files/ko/web/api/htmlelement/translate/index.md @@ -0,0 +1,64 @@ +--- +title: "HTMLElement: translate 속성" +short-title: translate +slug: Web/API/HTMLElement/translate +l10n: + sourceCommit: 1442377111a1649dfce278eac688e06efce34b83 +--- + +{{APIRef("HTML DOM")}} + +{{domxref("HTMLElement")}} 인터페이스의 **`translate`** 속성은 페이지가 현지화될 때 요소의 특성 값과 자식 {{domxref("Text")}} 노드의 값을 번역할지 아니면 변경하지 않고 둘지 여부를 나타냅니다. + +이 속성은 [`translate`](/ko/docs/Web/HTML/Global_attributes/translate) HTML 전역 특성의 값을 반영합니다. + +## 값 + +페이지가 현지화될 때 요소의 특성 값과 자식 {{domxref("Text")}} 노드의 값이 번역되어야 하면 `true`, +그렇지 않으면 `false`인 불리언 값. + +## 예제 + +다음 예제는 스크립트를 통해 번역을 활성화하거나 비활성화하는 방법을 보여줍니다. + +```html +
+ The content may always be translated: + El contenido será traducido
+ +
+ The content may be translated: + El contenido puede ser traducido.
+ + Enable translation +``` + +```js +const label = document.getElementById("translate-label"); +const element = document.getElementById("translate-element"); +const controller = document.getElementById("translate-controller"); + +controller.addEventListener("change", (e) => { + if (controller.checked) { + element.translate = true; + label.innerText = "The content may be translated:"; + } else { + element.translate = false; + label.innerText = "The content may not be translated:"; + } +}); +``` + +{{EmbedLiveSample('Examples', 600, 200)}} + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [`translate`](/ko/docs/Web/HTML/Global_attributes#translate) HTML 전역 특성 From dc1efeee50e7327a94d775334d5644e2a8a70b59 Mon Sep 17 00:00:00 2001 From: Vivi Date: Mon, 1 Jul 2024 09:22:17 +0900 Subject: [PATCH 098/318] =?UTF-8?q?[ko]=20logical=20properties=20=EC=8B=A0?= =?UTF-8?q?=EA=B7=9C=20=EB=B2=88=EC=97=AD=20(#22029)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: [ko] logical properties 신규 번역 * feat: 빠진 부분 번역 추가 * [fix] by comments --- .../index.md | 187 ++++++++++++++++++ 1 file changed, 187 insertions(+) create mode 100644 files/ko/web/css/css_logical_properties_and_values/index.md diff --git a/files/ko/web/css/css_logical_properties_and_values/index.md b/files/ko/web/css/css_logical_properties_and_values/index.md new file mode 100644 index 00000000000000..c0d5f14d751bb7 --- /dev/null +++ b/files/ko/web/css/css_logical_properties_and_values/index.md @@ -0,0 +1,187 @@ +--- +title: CSS 논리적 속성과 값 +slug: Web/CSS/CSS_logical_properties_and_values +l10n: + sourceCommit: 63249f6b1e89f42e172878c54a2f9674bee50904 +--- + +{{CSSRef}} + +**CSS 논리적 속성과 값** 모듈은 레이아웃을 물리적인 방향과 차원의 매핑이 아닌 논리적인 방식의 매핑으로 제어할 수 있는 논리적 속성들과 값으로 정의합니다. 논리적 속성은 해당하는 물리적 속성의 대응하는 방향 상대성을 정의합니다. + +문장의 시작 부분이 항상 왼쪽 부분인 것은 아닙니다. 다른 쓰기 체계는 다양한 방향성을 가지고 있습니다. 아래 예시들을 확인해 보세요. + +- 영어와 포르투갈어는 왼쪽에서 오른쪽이로 쓰여지고 새로운 문장은 기존 문장 아래에 추가됩니다. +- 히브리어와 아라비아어는 오른쪽에서 왼쪽으로 쓰여지는 언어이고 새로운 문장은 기존 문장 아래에 추가됩니다. +- 몇몇의 쓰기 모드에서, 텍스트로 이루어진 문장은 수직이고, 위에서 아래로 쓰입니다. 중국어, 베트남어, 한국어, 그리고 일본어는 전통적으로 위에서 아래 방향인 수직 방향으로 쓰여지며, 새로운 문장은 기존 문장 왼쪽에 추가됩니다. +- 전통 방식의 몽골어 또한 위에서 아래로 쓰여지지만, 새로운 문장은 기존 문장의 오른쪽에 추가됩니다. + +이 모듈에서 정의된 논리적 속성은 물리적 방향이 아니라 콘텐츠의 쓰기 방향에 따른 속성을 정의할 수 있습니다. 이 의미는 콘텐츠가 다른 쓰기 방식의 언어로 번역되어도 콘텐츠가 의도한대로 렌더링된다는 것을 의미합니다. + +논리적 속성과 값은 흐르는 방향을 설명하기 위해 블록과 인라인이라는 추상적인 용어들을 사용합니다. 이러한 용어들의 물리적 의미는 [쓰기 모드](/ko/docs/Web/CSS/CSS_writing_modes)에 의존합니다. + +**블록 차원**은 문장 내의 흐름에 수직적인 차원입니다. 즉, 가로 방향의 쓰기 모드에서는 수직 차원이고, 세로 방향의 쓰기 모드에서는 수평 차원입니다. 표준 영어 텍스트의 경우에는 수직 차원입니다. + +**인라인 차원**은 문장 내의 흐름과 평행합니다. 즉, 가로 방향의 쓰기 모드에서는 수평 차원이고, 세로 방향의 쓰기 모드에서는 수직 차원입니다. 표준 영어 텍스트의 경우에는 수평 차원입니다. + +CSS 는 본래 물리적인 좌표만을 위해 고안되었습니다. 논리적 속성과 값 모듈은 많은 [값](/ko/docs/Web/CSS/CSS_Values_and_Units)과 [속성](/ko/docs/Glossary/Property/CSS)들에 대응하는 흐름 상대성을 정의합니다. 물리적 값 (`top`, `bottom`, `left`, `right`) 만 수용했던 속성들은 이제 흐름 상대적인 논리적 속성 (`block-start`, `block-end`, `inline-start`, `inline-end`) 들도 허용하게 됩니다. + +## 참고서 + +### 속성 + +- {{cssxref("block-size")}} +- {{cssxref("border-block")}} +- {{cssxref("border-block-color")}} +- {{cssxref("border-block-end")}} +- {{cssxref("border-block-end-color")}} +- {{cssxref("border-block-end-style")}} +- {{cssxref("border-block-end-width")}} +- {{cssxref("border-block-start")}} +- {{cssxref("border-block-start-color")}} +- {{cssxref("border-block-start-style")}} +- {{cssxref("border-block-start-width")}} +- {{cssxref("border-block-style")}} +- {{cssxref("border-block-width")}} +- {{cssxref("border-end-end-radius")}} +- {{cssxref("border-end-start-radius")}} +- {{cssxref("border-inline")}} +- {{cssxref("border-inline-color")}} +- {{cssxref("border-inline-end")}} +- {{cssxref("border-inline-end-color")}} +- {{cssxref("border-inline-end-style")}} +- {{cssxref("border-inline-end-width")}} +- {{cssxref("border-inline-start")}} +- {{cssxref("border-inline-start-color")}} +- {{cssxref("border-inline-start-style")}} +- {{cssxref("border-inline-start-width")}} +- {{cssxref("border-inline-style")}} +- {{cssxref("border-inline-width")}} +- {{cssxref("border-start-end-radius")}} +- {{cssxref("border-start-start-radius")}} +- {{cssxref("inline-size")}} +- {{cssxref("inset")}} +- {{cssxref("inset-block")}} +- {{cssxref("inset-block-end")}} +- {{cssxref("inset-block-start")}} +- {{cssxref("inset-inline")}} +- {{cssxref("inset-inline-end")}} +- {{cssxref("inset-inline-start")}} +- {{cssxref("margin-block")}} +- {{cssxref("margin-block-end")}} +- {{cssxref("margin-block-start")}} +- {{cssxref("margin-inline")}} +- {{cssxref("margin-inline-end")}} +- {{cssxref("margin-inline-start")}} +- {{cssxref("max-block-size")}} +- {{cssxref("max-inline-size")}} +- {{cssxref("min-block-size")}} +- {{cssxref("min-inline-size")}} +- {{cssxref("padding-block")}} +- {{cssxref("padding-block-end")}} +- {{cssxref("padding-block-start")}} +- {{cssxref("padding-inline")}} +- {{cssxref("padding-inline-end")}} +- {{cssxref("padding-inline-start")}} + +### 데이터 타입과 값 + +{{glossary("Flow relative values")}}: + +- `block-start` +- `block-end` +- `inline-start` +- `inline-end` +- `start` +- `end` + +### 용어 사전의 용어들 + +- {{glossary("Flow relative values")}} +- {{glossary("Inset properties")}} +- {{glossary("Logical properties")}} +- {{glossary("Physical properties")}} + +## 안내서 + +- [논리적 속성과 값의 기본 개념](/ko/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values) + + - : 흐름 상대적인 속성과 값들 전반에 대해 다룹니다. + +- [크기 조절을 위한 논리적 속성](/ko/docs/Web/CSS/CSS_logical_properties_and_values/Sizing) + + - : 페이지의 요소의 크기 조절에 사용되는 물리적 속성과 논리적 속성들 사이의 흐름 상대적인 매핑에 대해 다룹니다. + +- [바깥 여백, 테두리, 그리고 안쪽 여백에 관한 논리적 속성들](/ko/docs/Web/CSS/CSS_logical_properties_and_values/Margins_borders_padding) + + - : 바깥 여백, 테두리, 그리고 안쪽 여백에 관한 흐름 상대적인 매핑과 그에 대한 단축 속성들에 대해 다룹니다. + +- [플로팅과 위치 지정을 위한 논리적 속성](/ko/docs/Web/CSS/CSS_logical_properties_and_values/Floating_and_positioning) + + - : `float`, `clear`, [inset 속성](/ko/docs/Glossary/Inset_properties) 그리고 `resize` 에 사용되는 물리적인 값과 논리적인 값들 사이의 상세 매핑에 대해 다룹니다. + +## 연관 개념 + +- {{CSSxRef("caption-side")}} +- {{CSSxRef("clear")}} +- {{CSSxRef("float")}} +- {{CSSxRef("resize")}} +- {{CSSxRef("text-align")}} + +[CSS box model](/ko/docs/Web/CSS/CSS_box_model) + +- {{CSSxRef("margin")}} 단축어 +- {{CSSxRef("padding")}} 단축어 + +[CSS box sizing](/ko/docs/Web/CSS/CSS_box_sizing) + +- {{CSSxRef("max-height")}} +- {{CSSxRef("max-width")}} +- {{CSSxRef("min-height")}} +- {{CSSxRef("min-width")}} + +[CSS backgrounds and borders](/ko/docs/Web/CSS/CSS_backgrounds_and_borders) + +- {{CSSxRef("border-color")}} +- {{CSSxRef("border-style")}} +- {{CSSxRef("border-width")}} +- {{CSSxRef("border")}} 단축어 +- {{CSSxRef("border-radius")}} + +[CSS positioned layout](/ko/docs/Web/CSS/CSS_positioned_layout) + +- {{CSSxRef("top")}} +- {{CSSxRef("right")}} +- {{CSSxRef("bottom")}} +- {{CSSxRef("left")}} + +[CSS writing modes](/ko/docs/Web/CSS/CSS_writing_modes) + +- {{CSSxRef("direction")}} +- {{CSSxRef("text-orientation")}} +- {{CSSxRef("writing-mode")}} + +[CSS containment](/ko/docs/Web/CSS/CSS_containment) + +- {{CSSxRef("contain-intrinsic-block-size")}} +- {{CSSxRef("contain-intrinsic-inline-size")}} + +[CSS overflow](/ko/docs/Web/CSS/CSS_overflow) + +- {{CSSxRef("overflow-block")}} +- {{CSSxRef("overflow-inline")}} + +[CSS overscroll behavior](/ko/docs/Web/CSS/CSS_overscroll_behavior) + +- {{CSSxRef("overscroll-behavior-block")}} +- {{CSSxRef("overscroll-behavior-inline")}} + +## 명세서 + +{{Specifications}} + +## 같이 보기 + +- [플로우 레이아웃과 쓰기 모드](/ko/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_writing_modes) +- [CSS 유연한 박스 레이아웃](/ko/docs/Web/CSS/CSS_flexible_box_layout) 모듈 +- [CSS 그리드 레이아웃](/ko/docs/Web/CSS/CSS_grid_layout) 모듈 From c9ca3b8380eeb27098d44364e94e9fbcd17f0a44 Mon Sep 17 00:00:00 2001 From: sunny Date: Mon, 1 Jul 2024 13:12:05 +0900 Subject: [PATCH 099/318] =?UTF-8?q?[ko]=20docs:=20Section=20Title=EC=97=90?= =?UTF-8?q?=20Return=20Value=20=EC=B6=94=EA=B0=80=20(#22079)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit docs: Section Title에 Return Value 추가 --- docs/ko/guides/glossary-guide.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/ko/guides/glossary-guide.md b/docs/ko/guides/glossary-guide.md index ae5f787b6a28a6..5e6cff005f467c 100644 --- a/docs/ko/guides/glossary-guide.md +++ b/docs/ko/guides/glossary-guide.md @@ -59,6 +59,7 @@ | Polyfill | 폴리필 | [링크](https://github.com/mdn/translated-content/pull/1779/files) | | Recommendations | 권장 사항 | | | Reference | 참고서 | | +| Return Value | 반환 값 | | | See also | 같이 보기 | [링크][target] | | Specifications | 명세서 | [링크](https://github.com/mdn/translated-content/pull/1779/files) | | Static properties | 정적 속성 | | From 2bf0c2c7f3f6f020349751f1b953f9c053852aa7 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Mon, 1 Jul 2024 13:04:58 +0800 Subject: [PATCH 100/318] zh-CN: update the translation of glossary term "response header" (#21595) Co-authored-by: A1lo --- files/zh-cn/glossary/response_header/index.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/files/zh-cn/glossary/response_header/index.md b/files/zh-cn/glossary/response_header/index.md index abf922dae085c4..beb1ac2c85b559 100644 --- a/files/zh-cn/glossary/response_header/index.md +++ b/files/zh-cn/glossary/response_header/index.md @@ -1,13 +1,15 @@ --- -title: 响应标头（Response header） +title: 响应标头 slug: Glossary/Response_header +l10n: + sourceCommit: 659d8ae39e05a7a9f260f1194bb325438cea5d34 --- {{GlossarySidebar}} -**响应标头**（response header）是一种 {{glossary("HTTP header","HTTP 标头")}}，其可以用于 HTTP 响应，且与响应消息主体无关。像 {{HTTPHeader("Age")}}、{{HTTPHeader("Location")}} 或 {{HTTPHeader("Server")}} 都属于响应标头，它们被用于提供更详细的响应上下文。 +**响应标头**是一种与响应消息主体无关的 {{glossary("HTTP header","HTTP 标头")}}，可以用于 HTTP 响应。像 {{HTTPHeader("Age")}}、{{HTTPHeader("Location")}} 或 {{HTTPHeader("Server")}} 都属于响应标头，被用于提供更详细的响应上下文。 -并非所有出现在响应中的标头都根据规范将其归类为*响应标头*。例如，{{HTTPHeader("Content-Type")}} 标头就是一个{{glossary("representation header","表示标头（representation header）")}}，指示响应信息正文中的原始数据类型（在应用 {{HTTPHeader("Content-Encoding")}} 表示标头中的编码前）。然而，“会话式”的所有标头通常在响应消息中称为响应标头。 +并非所有出现在响应中的标头都根据规范将其归类为*响应标头*。例如，{{HTTPHeader("Content-Type")}} 标头就是一个{{glossary("representation header", "表示标头")}}，在应用 {{HTTPHeader("Content-Encoding")}} 表示标头中的编码前指示响应信息正文中的原始数据类型。然而，“会话式”的所有标头通常在响应消息中称为响应标头。 以下展示了 {{HTTPMethod("GET")}} 请求后的一些响应和表示标头。 @@ -34,10 +36,8 @@ x-frame-options: DENY ## 参见 - [所有 HTTP 标头列表](/zh-CN/docs/Web/HTTP/Headers) -- [Glossary](/zh-CN/docs/Glossary) +- [术语](/zh-CN/docs/Glossary) - - {{Glossary("Representation header", "表示标头（Representation header）")}} + - {{Glossary("Representation header", "表示标头")}} - {{Glossary("HTTP header", "HTTP 标头")}} - - {{Glossary("Response header", "响应标头（Response header）")}} - - {{Glossary("Fetch metadata response header", "fetch 元数据响应头")}} - - {{Glossary("Request header", "请求标头（Request header）")}} + - {{Glossary("Request header", "请求标头")}} From caed7c551896f2e121bfc3b43b685f6a534a11df Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Mon, 1 Jul 2024 20:01:48 +0800 Subject: [PATCH 101/318] zh-CN: create Glossary/RTCP (#21584) Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- files/zh-cn/glossary/rtcp/index.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 files/zh-cn/glossary/rtcp/index.md diff --git a/files/zh-cn/glossary/rtcp/index.md b/files/zh-cn/glossary/rtcp/index.md new file mode 100644 index 00000000000000..cc967da8a8b60a --- /dev/null +++ b/files/zh-cn/glossary/rtcp/index.md @@ -0,0 +1,20 @@ +--- +title: RTCP（RTP 控制协议） +slug: Glossary/RTCP +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**RTP 控制协议**（**RTCP**）是 {{Glossary("RTP")}} 协议的伙伴。RTCP 用于提供有关 RTP 媒体流会话的控制和统计信息。 + +这样可以在使用底层数据包传递层传输 RTCP 信号、RTP 和媒体内容的同时，逻辑上和功能上将控制和统计包与媒体流分离。 + +RTCP 定期向 RTP 会话的所有参与者发送控制包，使用与传输数据包相同的机制。底层协议处理数据和控制包的多路复用，可能使用不同的网络端口传输每种类型的包。 + +## 参见 + +- [介绍实时传输协议](/zh-CN/docs/Web/API/WebRTC_API/Intro_to_RTP) +- [RTP 控制协议](https://zh.wikipedia.org/wiki/实时传输控制协议) +- {{RFC(3550, "RFC 3550 第 6 节", 6)}} From 7abeab4f55d2e818e0ab3dbbc3d0dd7b10f5b380 Mon Sep 17 00:00:00 2001 From: k8o <61353435+k35o@users.noreply.github.com> Date: Mon, 1 Jul 2024 12:04:41 +0900 Subject: [PATCH 102/318] fix: EmbedLiveSample --- files/ja/web/css/flex-shrink/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/css/flex-shrink/index.md b/files/ja/web/css/flex-shrink/index.md index 49b00a9db6dd82..999db8ba4be0ea 100644 --- a/files/ja/web/css/flex-shrink/index.md +++ b/files/ja/web/css/flex-shrink/index.md @@ -86,7 +86,7 @@ flex-shrink: unset; #### 結果 -{{EmbedLiveSample('Setting_flex_item_shrink_factor', 500, 300)}} +{{EmbedLiveSample('フレックスアイテムの縮小係数の設定', 500, 300)}} ## 仕様書 From 6be0585d2b1fd981ba6497567152ad163c6180a7 Mon Sep 17 00:00:00 2001 From: ikeyan Date: Sun, 30 Jun 2024 19:39:03 +0900 Subject: [PATCH 103/318] Correct identifier regex --- files/ja/web/javascript/reference/lexical_grammar/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/javascript/reference/lexical_grammar/index.md b/files/ja/web/javascript/reference/lexical_grammar/index.md index 2a6dd9171a2e7a..c60c6e4ec48532 100644 --- a/files/ja/web/javascript/reference/lexical_grammar/index.md +++ b/files/ja/web/javascript/reference/lexical_grammar/index.md @@ -156,7 +156,7 @@ lbl: console.log(1); // ラベル JavaScript では、識別子は一般的に英数字、アンダースコア (`_`)、ドル記号 (`$`) で構成されます。識別子は数字で始めることはできません。しかし、JavaScript で使用できる識別子は {{Glossary("ASCII")}} だけではなく、ほとんどの Unicode コードポイントも使用可能です。つまり、識別子は [ID_Start](https://util.unicode.org/UnicodeJsps/list-unicodeset.jsp?a=%5Cp%7BID_Start%7D) カテゴリーにある文字で始めることができ、[ID_Continue](https://util.unicode.org/UnicodeJsps/list-unicodeset.jsp?a=%5Cp%7BID_Continue%7D) カテゴリーにある文字は先頭文字の後に置くことができます。 -> **メモ:** もし何らかの理由で JavaScript のソースを自分で解析する必要がある場合、すべての識別子が `/[A-Za-z_$][\w$]*/` のパターンに従っている（つまり ASCII のみ）と仮定しないでください。 識別子の範囲は正規表現 `/[$_p{ID_Start}][$u200cu200dp{ID_Continue}]*/u` (Unicodeエスケープシーケンスを除く) で記述することができます。 +> **メモ:** もし何らかの理由で JavaScript のソースを自分で解析する必要がある場合、すべての識別子が `/[A-Za-z_$][\w$]*/` のパターンに従っている（つまり ASCII のみ）と仮定しないでください。 識別子の範囲は正規表現 `/[$_\p{ID_Start}][$\u200c\u200d\p{ID_Continue}]*/u` (Unicodeエスケープシーケンスを除く) で記述することができます。 また、JavaScript では、識別子の中で [Unicode エスケープシーケンス](#unicode_escape_sequences)を `\u0000` または `\u{000000}` という形式で使用することができ、これは実際の Unicode 文字と同じ文字列値をエンコードするものです。例えば、`你好` と `\u4f60\u597d` は同じ識別子です。 From ca4c8359230cab452654bb9598cc451db46fa780 Mon Sep 17 00:00:00 2001 From: yassh Date: Thu, 27 Jun 2024 23:23:37 +0900 Subject: [PATCH 104/318] =?UTF-8?q?2024/06/27=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/glossary/apple_safari/index.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/files/ja/glossary/apple_safari/index.md b/files/ja/glossary/apple_safari/index.md index 3a38073f5269fd..82caca848ebe19 100644 --- a/files/ja/glossary/apple_safari/index.md +++ b/files/ja/glossary/apple_safari/index.md @@ -5,17 +5,17 @@ slug: Glossary/Apple_Safari {{GlossarySidebar}} -[Safari](http://www.apple.com/safari/) は{{Glossary("Browser","ウェブブラウザー")}}であり、Apple が開発し、 macOS と iOS の両方に組み込まれています。これは、オープンソースの [WebKit](https://webkit.org/) エンジンに基づいています。 +[**Safari**](https://www.apple.com/jp/safari/) は Apple によって開発された{{Glossary("Browser","ウェブブラウザー")}}で、macOS（Mac コンピューター用）、iPadOS（iPad タブレット用）、iOS（iPhone 用）、visionOS（Apple Vision Pro などの拡張現実デバイス用）を含む Apple のオペレーティングシステムに組み込まれています。 -## 詳細情報 +Safari は、[KHTML](https://ja.wikipedia.org/wiki/KHTML) から派生したオープンソースの {{glossary("WebKit")}} レンダリングエンジンを使用しています。 -### 基礎知識 - -- ウィキペディア上の記事「[Safari](https://ja.wikipedia.org/wiki/Safari)」 -- [apple.com の Safari](https://www.apple.com/safari/) - -### 技術情報 +## 関連情報 +- [Safari](https://ja.wikipedia.org/wiki/Safari) (Wikipedia) +- [Safari](https://www.apple.com/jp/safari/) (apple.com) - [The WebKit project](https://webkit.org/) -- [WebKit nightly build](https://nightly.webkit.org/) +- [WebKit Build Archives](https://webkit.org/build-archives/) - [Reporting a bug for Safari](https://bugs.webkit.org/) +- 用語集 + - {{glossary("Browser", "ブラウザー")}} + - {{glossary("WebKit")}} From 7a102f7a48766c9cb174430bdfb959918ba55a48 Mon Sep 17 00:00:00 2001 From: Jongha Kim Date: Mon, 1 Jul 2024 23:34:53 +0900 Subject: [PATCH 105/318] =?UTF-8?q?[ko]=20RegExp.prototype.source=20?= =?UTF-8?q?=EC=8B=A0=EA=B7=9C=20=EB=B2=88=EC=97=AD=20=EC=99=B8=20(#21987)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [ko] RegExp.prototype.source 신규 번역 외 - RegExp.prototype.source 신규 번역 - RegExp 소개글 일부 번역 `RegExp` 소개글은 분량이 너무 많아서 본 PR 머지 후 다음 `RegExp` 메서드 번역할 때마다 조금씩 (아마 3회) 나눠서 번역할 예정입니다. * Update files/ko/web/javascript/reference/global_objects/regexp/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> --- .../reference/global_objects/regexp/index.md | 29 +++++++----- .../global_objects/regexp/source/index.md | 46 +++++++++++++++++++ 2 files changed, 63 insertions(+), 12 deletions(-) create mode 100644 files/ko/web/javascript/reference/global_objects/regexp/source/index.md diff --git a/files/ko/web/javascript/reference/global_objects/regexp/index.md b/files/ko/web/javascript/reference/global_objects/regexp/index.md index f23af8dbfc0a90..347cb1e2dcf815 100644 --- a/files/ko/web/javascript/reference/global_objects/regexp/index.md +++ b/files/ko/web/javascript/reference/global_objects/regexp/index.md @@ -7,7 +7,7 @@ slug: Web/JavaScript/Reference/Global_Objects/RegExp **`RegExp`** 생성자는 패턴을 사용해 텍스트를 판별할 때 사용합니다. -정규 표현식에 대한 소개는 [JavaScript 안내서의 정규 표현식 장](/ko/docs/Web/JavaScript/Guide/Regular_Expressions)을 참고하세요. +정규 표현식에 대한 소개는 JavaScript 안내서의 [정규 표현식 장](/ko/docs/Web/JavaScript/Guide/Regular_Expressions)을 참고하세요. 정규 표현식 구문에 대한 더 자세한 정보는 [정규 표현식 참고서](/ko/docs/Web/JavaScript/Reference/Regular_expressions)를 참고하시기 바랍니다. ## 설명 @@ -15,32 +15,37 @@ slug: Web/JavaScript/Reference/Global_Objects/RegExp `RegExp` 객체는 리터럴 표기법과 생성자로써 생성할 수 있습니다. -- **리터럴 표기법**의 매개변수는 두 빗금으로 감싸야 하며 따옴표를 사용하지 않습니다. -- **생성자 함수**의 매개변수는 빗금으로 감싸지 않으나 따옴표를 사용합니다. +- **리터럴 표기법**은 두 빗금 사이에 패턴을 사용하며, 두 번째 빗금 뒤에 선택적으로 [플래그](/ko/docs/Web/JavaScript/Guide/Regular_expressions#advanced_searching_with_flags)가 올 수 있습니다. +- **생성자 함수**은 첫 번째 매개변수로 문자열이나 `RegExp` 객체 중 하나를 받고 두 번째 매개변수로 선택적 [플래그](/ko/docs/Web/JavaScript/Guide/Regular_expressions#advanced_searching_with_flags) 문자열을 받습니다. 다음의 세 표현식은 모두 같은 정규 표현식을 생성합니다. ```js -/ab+c/i; -new RegExp(/ab+c/, "i"); // 리터럴 -new RegExp("ab+c", "i"); // 생성자 +const re = /ab+c/i; // 리터럴 표기법 +// 혹은 +const re = new RegExp("ab+c", "i"); // 첫 번째 인수로 문자열 패턴과 함께 생성자 사용 +// 혹은 +const re = new RegExp(/ab+c/, "i"); // 첫 번째 인수로 정규 표현식 리터럴과 함께 생성자 사용 ``` -리터럴 표기법은 표현식을 평가할 때 정규 표현식을 컴파일합니다. 정규 표현식이 변하지 않으면 리터럴 표기법을 사용하세요. 예를 들어, 반복문 안에서 사용할 정규 표현식을 리터럴 표기법으로 생성하면 정규 표현식을 매번 다시 컴파일하지 않습니다. +정규 표현식을 사용하려면 먼저 정규 표현식을 컴파일해야 합니다. 이 과정을 통해 보다 효율적으로 매칭을 수행할 수 있습니다. 이 프로세스에 대한 보다 자세한 내용은 [dotnet 문서](https://docs.microsoft.com/dotnet/standard/base-types/compilation-and-reuse-in-regular-expressions)에서 확인할 수 있습니다. -정규 표현식 객체의 생성자(`new RegExp('ab+c')`)를 사용하면 정규 표현식이 런타임에 컴파일됩니다. 패턴이 변할 가능성이 있거나, 사용자 입력과 같이 알 수 없는 외부 소스에서 가져오는 정규 표현식의 경우 생성자 함수를 사용하세요. +리터럴 표기법은 표현식이 평가될 때 정규 표현식이 컴파일됩니다. 반면에 `RegExp` 객체의 생성자 `new RegExp('ab+c')`는 정규 표현식을 런타임에 컴파일합니다. + +[동적 입력에서 정규식을 빌드](#building_a_regular_expression_from_dynamic_inputs)하려면 `RegExp()` 생성자의 첫 번째 인수로 문자열을 사용합니다. ### 생성자의 플래그 -ECMAScript 6부터는 `new RegExp(/ab+c/, 'i')`처럼, 첫 매개변수가 `RegExp`이면서 `flags`를 지정해도 {{jsxref("TypeError")}} (`"can't supply flags when constructing one RegExp from another"`)가 발생하지 않고, 매개변수로부터 새로운 정규 표현식을 생성합니다. +표현식 `new RegExp(/ab+c/, flags)`은 첫 번째 매개변수의 소스와 두 번째 매개변수의 [플래그](/ko/docs/Web/JavaScript/Guide/Regular_expressions#advanced_searching_with_flags)를 사용하여 새로운 `RegExp`를 생성합니다. -생성자 함수를 사용할 경우 보통의 문자열 이스케이프 규칙(특수 문자를 문자열에 사용할 때 앞에 역빗금(`\`)을 붙이는 것)을 준수해야 합니다. +생성자 함수를 사용할 경우, 일반 문자열 이스케이프 규칙(문자열에 포함될 때 특수 문자 앞에 `\` 추가)이 필요합니다. 예를 들어 다음 두 줄은 동일한 정규 표현식을 생성합니다. ```js -let re = /\w+/; -let re = new RegExp("\\w+"); +const re = /\w+/; +// 혹은 +const re = new RegExp("\\w+"); ``` ### Perl 형태의 `RegExp` 속성 diff --git a/files/ko/web/javascript/reference/global_objects/regexp/source/index.md b/files/ko/web/javascript/reference/global_objects/regexp/source/index.md new file mode 100644 index 00000000000000..aeee1081f14b9c --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/regexp/source/index.md @@ -0,0 +1,46 @@ +--- +title: RegExp.prototype.source +slug: Web/JavaScript/Reference/Global_Objects/RegExp/source +l10n: + sourceCommit: 16bacf2194dc9e9ff6ee5bcc65316547cf88a8d9 +--- + +{{JSRef}} + +{{jsxref("RegExp")}} 인스턴스의 **`source`** 접근자 속성은 양쪽 슬래시 2개나 플래그 없이 이 정규 표현식의 소스 텍스트가 포함된 문자열을 반환합니다. + +{{EmbedInteractiveExample("pages/js/regexp-prototype-source.html")}} + +## 설명 + +개념적으로 `source` 속성은 정규식 리터럴의 두 슬래시 사이의 텍스트입니다. 이 언어는 반환된 문자열이 올바르게 이스케이프 되어야 하기에 `source`가 양쪽 끝에 슬래시로 연결될 때 구문 분석 가능한 정규식 리터럴이 형성됩니다. 예를 들어, `new RegExp("/")`의 경우 `source`가 `/`를 생성하면 결과 리터럴이 줄 주석인 `//`가 되기 때문에 `\\/`가 됩니다. 마찬가지로 모든 [줄 종결자](/ko/docs/Web/JavaScript/Reference/Lexical_grammar#line_terminators)는 이스케이프 처리됩니다. 줄 종결자 문자는 정규 표현식 리터럴을 분리하기 때문입니다. 결과가 파싱 가능하기만 하다면 다른 문자에 대한 요구 사항은 없습니다. 빈 정규 표현식의 경우 문자열 `(?:)`이 반환됩니다. + +## 예제 + +### source 사용하기 + +```js +const regex = /fooBar/gi; + +console.log(regex.source); // "fooBar", /.../ 과 "gi" 가 포함되지 않음. +``` + +### 빈 정규 표현식과 이스케이핑 + +```js +new RegExp().source; // "(?:)" + +new RegExp("\n").source === "\\n"; // true, ES5부터 시작됨 +``` + +## 명새서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{jsxref("RegExp.prototype.flags")}} From ca0252da5459b107ad6ed71f78a251315268d41d Mon Sep 17 00:00:00 2001 From: PhosphorusP <1309396166@qq.com> Date: Mon, 1 Jul 2024 22:37:12 +0800 Subject: [PATCH 106/318] [zh-cn]: fix typo (#22090) --- files/zh-cn/web/api/offscreencanvas/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/api/offscreencanvas/index.md b/files/zh-cn/web/api/offscreencanvas/index.md index e70716b0b56a7b..eaece4d4ac8065 100644 --- a/files/zh-cn/web/api/offscreencanvas/index.md +++ b/files/zh-cn/web/api/offscreencanvas/index.md @@ -23,7 +23,7 @@ slug: Web/API/OffscreenCanvas - {{domxref("OffscreenCanvas.getContext()")}} - : 为 offscreen canvas 对象返回一个渲染画布。 -- {{domxref("OffscreenCanvas.toBlob()")}} +- {{domxref("OffscreenCanvas.convertToBlob()")}} - : 创建一个代表 canvas 中的图像的{{domxref("Blob")}}对象。 - {{domxref("OffscreenCanvas.transferToImageBitmap()")}} - : 从 `OffscreenCanvas` 最近渲染的图像创建一个 {{domxref("ImageBitmap")}} 对象。 From 762468c8f7927a3d70f8b3b74732aa0304109ed2 Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Mon, 1 Jul 2024 22:43:46 +0800 Subject: [PATCH 107/318] [zh-cn]: create the translation of `tabs.goForward()` method (#21793) Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- .../webextensions/api/tabs/goforward/index.md | 87 +++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/tabs/goforward/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/goforward/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/goforward/index.md new file mode 100644 index 00000000000000..d98a5e98f2f70a --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/goforward/index.md @@ -0,0 +1,87 @@ +--- +title: tabs.goForward() +slug: Mozilla/Add-ons/WebExtensions/API/tabs/goForward +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c +--- + +{{AddonSidebar}} + +导航到标签页历史中的下一页（如果有）。 + +这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。 + +## 语法 + +```js-nolint +let goingForward = browser.tabs.goForward( + tabId, // 可选整数 + callback // 可选函数 +) +``` + +### 参数 + +- `tabId` {{optional_inline}} + - : `integer`。要进行导航的标签页的 ID。默认为当前窗口的活动标签页。 +- `callback` {{optional_inline}} + - : `function`。页面导航完成时调用的回调函数，没有参数。 + +### 返回值 + +一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，当页面导航完成时其会被兑现。 + +## 示例 + +在当前标签页前进到下一页： + +```js +function onGoForward() { + console.log("已前进"); +} + +function onError(error) { + console.log(`发生错误：${error}`); +} + +let goingForward = browser.tabs.goForward(); +goingForward.then(onGoForward, onError); +``` + +{{WebExtExamples}} + +## 浏览器兼容性 + +{{Compat}} + +> **注意：** 此 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#method-getZoomSettings) API。本文档来自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。 + + From 780d2cd0b6f61c0cd32007ad9a2b6c5b0dade4ea Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Mon, 1 Jul 2024 22:46:39 +0800 Subject: [PATCH 108/318] [zh-cn]: create the translation of `tabs.goBack()` method (#21792) Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- .../webextensions/api/tabs/goback/index.md | 87 +++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/tabs/goback/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/goback/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/goback/index.md new file mode 100644 index 00000000000000..0257f03dd5a89b --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/goback/index.md @@ -0,0 +1,87 @@ +--- +title: tabs.goBack() +slug: Mozilla/Add-ons/WebExtensions/API/tabs/goBack +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c +--- + +{{AddonSidebar}} + +导航到标签页历史中的上一页（如果有）。 + +这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。 + +## 语法 + +```js-nolint +let withGoingBack = browser.tabs.goBack( + tabId, // 可选整数 + callback // 可选函数 +) +``` + +### 参数 + +- `tabId` {{optional_inline}} + - : `integer`。要进行导航的标签页的 ID。默认为当前窗口的活动标签页。 +- `callback` {{optional_inline}} + - : `function`。页面导航完成时调用的回调函数，没有参数。 + +### 返回值 + +一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，当页面导航完成时其会被兑现。 + +## 示例 + +返回到当前标签页的上一页： + +```js +function onGoBack() { + console.log("已返回"); +} + +function onError(error) { + console.log(`发生错误：${error}`); +} + +let goingBack = browser.tabs.goBack(); +goingBack.then(onGoBack, onError); +``` + +{{WebExtExamples}} + +## 浏览器兼容性 + +{{Compat}} + +> **备注：** 此 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#method-getZoomSettings) API。本文档来自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。 + + From 564d1e52a126fb6ce689852b451dda87c7c15fd4 Mon Sep 17 00:00:00 2001 From: Kim Sung Hyun Date: Mon, 1 Jul 2024 23:49:53 +0900 Subject: [PATCH 109/318] =?UTF-8?q?[ko]=20with=20=EB=AC=B8=EC=84=9C=20?= =?UTF-8?q?=EC=8B=A0=EA=B7=9C=20=EB=B2=88=EC=97=AD=20(#22055)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [ko] with 문 신규 번역 Co-authored-by: 1ilsang <1ilsang@naver.com> --- .../reference/statements/with/index.md | 176 ++++++++++++++++++ 1 file changed, 176 insertions(+) create mode 100644 files/ko/web/javascript/reference/statements/with/index.md diff --git a/files/ko/web/javascript/reference/statements/with/index.md b/files/ko/web/javascript/reference/statements/with/index.md new file mode 100644 index 00000000000000..f17184dae8c7ea --- /dev/null +++ b/files/ko/web/javascript/reference/statements/with/index.md @@ -0,0 +1,176 @@ +--- +title: with +slug: Web/JavaScript/Reference/Statements/with +l10n: + sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a +--- + +{{jsSidebar("Statements")}}{{Deprecated_Header}} + +> **참고:** `with`문의 사용은 권장되지 않습니다. 혼란스러운 버그와 호환성 문제의 원인이 될 수 있고 최적화를 불가능하게 만들며 [엄격 모드](/ko/docs/Web/JavaScript/Reference/Strict_mode)에서 금지되어 있기 때문입니다. 속성에 접근하고자 하는 객체를 임시 변수에 할당하는 것이 대안으로 권장됩니다. + +`with`문은 문의 스코프 체인을 확장합니다. + +## 구문 + +```js-nolint +with (expression) + statement +``` + +- `expression` + - : 문을 평가할 때 사용되는 스코프 체인에 주어진 표현식을 추가합니다. 표현식 주위의 괄호는 필수입니다. +- `statement` + - : 임의의 문. 여러 개의 문을 실행하려면 [블록](/ko/docs/Web/JavaScript/Reference/Statements/block) 문(`{ ... }`)을 사용하여 문들을 묶습니다. + +## 설명 + +식별자에는 두 가지 유형이 있습니다. '제한된' 식별자와 '제한되지 않은' 식별자입니다. 제한되지 않은 식별자는 해당 식별자가 어디서 왔는지 나타내지 않는 식별자입니다. + +```js +foo; // 제한되지 않은 식별자 +foo.bar; // bar는 제한된 식별자 +``` + +일반적으로 제한되지 않은 식별자는 그 이름을 가진 변수를 찾기 위해 스코프 체인을 검색함으로써 이행됩니다. 반면에 제한된 식별자는 그 이름을 가진 속성을 찾기 위해 객체의 프로토타입 체인을 검색하여 이행됩니다. + +```js +const foo = { bar: 1 }; +console.log(foo.bar); +// foo는 스코프 체인에서 변수로 발견된다. +// bar는 foo에서 속성으로 발견된다. +``` + +이 규칙의 예외는 [전역 객체](/ko/docs/Glossary/Global_object)로, 이는 스코프 체인의 최상위에 위치하여 전역 객체의 속성들은 자동적으로 제한자 없이 참조할 수 있는 전역 변수가 됩니다. + +```js +console.log(globalThis.Math === Math); // true +``` + +`with` 문은 문의 본문이 평가되는 동안 주어진 객체를 스코프 체인의 맨 앞에 추가합니다. 모든 제한되지 않은 이름은 상위 스코프 체인을 검색하기 전에 먼저 주어진 객체 내에서 ([in](/ko/docs/Web/JavaScript/Reference/Operators/in)으로 확인하여) 검색됩니다. + +참고로 제한되지 않은 참조가 객체의 메서드를 조회하는 경우 그 메서드는 `with`문에 주어진 객체를 `this` 값으로 하여 호출됩니다. + +```js +with ([1, 2, 3]) { + console.log(toString()); // 1,2,3 +} +``` + +객체는 [`@@unscopables`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/unscopables) 속성을 가질 수 있으며, 이 속성은 (하위 호환성을 위해) 스코프 체인에 추가되지 않아야 하는 속성의 목록을 정의합니다. 자세한 내용은 [Symbol.unscopables](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/unscopables) 문서를 참고하십시오. + +`with` 문을 사용하는 이유는 임시 변수를 하나 줄이는 것과 긴 객체 참조를 반복하는 걸 피함으로써 파일 크기를 줄이는 것입니다. 그러나 `with`문이 바람직하지 않은 이유들은 훨씬 더 많고 다음과 같습니다. + +- 성능: `with` 문은 모든 이름 조회시에 지정된 객체를 첫번째로 검색하게 합니다. 따라서 지정된 객체의 속성이 아닌 모든 식별자는 `with` 블록 내에서 더 느리게 검색됩니다. 게다가 최적화 도구가 제한되지 않은 식별자 각각이 무엇을 참조하는지에 대해 어떤 가정도 할 수 없으므로, 식별자가 사용될 때마다 동일한 속성 조회를 반복해야 합니다. +- 가독성: `with` 문은 인간 독자나 JavaScript 컴파일러가 제한되지 않은 이름이 스코프 체인에서 발견될지, 만약 그렇다면 어떤 객체에서 발견될지를 판단하기 어렵게 만듭니다. 다음은 그 예시입니다. + + ```js + function f(x, o) { + with (o) { + console.log(x); + } + } + ``` + + `f`의 정의만 보면 `with` 본문 내의 `x`가 무엇을 참조하는지 알 수 없습니다. `x`가 `o.x`인지 `f`의 첫 번째 형식 매개변수인지는 `f`가 호출될 때만 알 수 있습니다. 두 번째 매개변수로 전달하는 객체에 `x`를 정의하는 것을 잊어도 오류가 발생하지 않습니다. 대신 예상치 못한 결과가 나올 뿐입니다. 또한 이러한 코드는 실제 의도가 무엇인지도 불분명합니다. + +- 향후 호환성: `with`를 사용하는 코드는 특히 단순한 객체가 아닌 대상과 함께 사용될 때 향후 호환되지 않는 코드가 될 수 있습니다. 이는 해당 대상이 미래에 더 많은 속성을 갖게 될 수 있기 때문입니다. 다음 예시를 살펴보겠습니다. + + ```js + function f(foo, values) { + with (foo) { + console.log(values); + } + } + ``` + + ECMAScript 5 환경에서 `f([1, 2, 3], obj)`를 호출하면, `with` 문 내의 `values` 참조는 `obj`로 이행됩니다. 그러나 ECMAScript 2015는 `Array.prototype`에 [`values`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/values) 속성을 도입합니다(따라서 모든 배열에서 `values` 속성을 사용할 수 있게 됩니다). 따라서 환경을 업그레이드하면 `with` 문 내의 `values` 참조는 `[1, 2, 3].values`로 이행되며, 이는 버그를 일으킬 가능성이 큽니다. + + 이 특정 예제에서는 `values`가 [`Array.prototype[@@unscopables]`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/@@unscopables)에 의해 스코프 지정 불가능하게 정의되어 있어 해당 코드의 `values`는 여전히 `values` 매개변수로 올바르게 이행됩니다. 만약 `values`가 스코프 지정 불가능으로 정의되지 않았다면, 이는 디버깅하기 어려운 문제가 될 수 있습니다. + +## 예제 + +### with문 사용하기 + +다음 `with` 문은 {{jsxref("Math")}} 객체를 기본 객체로 지정합니다. `with` 문 다음의 문장들은 객체를 명시하지 않고 {{jsxref("Math/PI", "PI")}} 속성과 {{jsxref("Math/cos", "cos")}} 및 {{jsxref("Math/sin", "sin")}} 메서드를 참조합니다. JavaScript는 이러한 참조에 대해 Math 객체를 가정합니다. + +```js +let a, x, y; +const r = 10; + +with (Math) { + a = PI * r * r; + x = r * cos(PI); + y = r * sin(PI / 2); +} +``` + +### 현재 스코프에서 속성 구조 분해 할당을 사용하여 with문 피하기 + +대부분의 경우 [속성 구조 분해 할당](/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)을 통해서 `with` 사용을 피할 수 있습니다. 여기서는 `with`가 추가 스코프를 생성하는 동작을 모방하기 위해 추가 블록을 만들었지만 실제 사용에서는 이 블록을 보통 생략할 수 있습니다. + +```js +let a, x, y; +const r = 10; + +{ + const { PI, cos, sin } = Math; + a = PI * r * r; + x = r * cos(PI); + y = r * sin(PI / 2); +} +``` + +### IIFE를 사용하여 with문 피하기 + +만약 긴 이름의 참조를 여러 번 재사용해야 하는 표현식을 만들고 있으며 그 긴 이름을 표현식 내에서 제거하려고 한다면 [IIFE](/ko/docs/Glossary/IIFE)로 표현식을 감싸고 긴 이름을 인수로 제공할 수 있습니다. + +```js +const objectHavingAnEspeciallyLengthyName = { foo: true, bar: false }; + +if (((o) => o.foo && !o.bar)(objectHavingAnEspeciallyLengthyName)) { + // 이 분기가 실행됩니다. +} +``` + +### with문과 프록시를 사용해서 동적 네임스페이스 생성하기 + +`with`는 모든 변수 조회를 속성 조회로 변환하는 반면 [프록시](/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy)는 모든 속성 조회 호출을 가로챌 수 있게 합니다. 이를 결합하여 동적 네임스페이스를 생성할 수 있습니다. + +```js +const namespace = new Proxy( + {}, + { + has(target, key) { + // `console`과 같은 전역 속성을 가로채는 걸 피하십시오. + if (key in globalThis) { + return false; + } + // 모든 속성 조회를 가로챕니다. + return true; + }, + get(target, key) { + return key; + }, + }, +); + +with (namespace) { + console.log(a, b, c); // "a" "b" "c" +} +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{jsxref("Statements/block", "block", "", 1)}} +- [Strict mode](/ko/docs/Web/JavaScript/Reference/Strict_mode) +- {{jsxref("Symbol.unscopables")}} +- {{jsxref("Array/@@unscopables", "Array.prototype[@@unscopables]")}} From 41a85d58ab3840fad6e1245f9469dfa803e057f2 Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Mon, 1 Jul 2024 17:11:23 +0200 Subject: [PATCH 110/318] [es] sync translated content (#22059) es: sync translated content --- files/es/_redirects.txt | 3 ++- files/es/_wikihistory.json | 8 ++++---- .../web/api/fetch_api/using_fetch}/index.md | 3 ++- 3 files changed, 8 insertions(+), 6 deletions(-) rename files/es/{web/api/fetch_api/basic_concepts => conflicting/web/api/fetch_api/using_fetch}/index.md (97%) diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index 02144621903b65..63efccc77bb2dd 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -1642,7 +1642,8 @@ /es/docs/Web/API/Event/createEvent /es/docs/Web/API/Document/createEvent /es/docs/Web/API/EventListener /es/docs/conflicting/Web/API/EventTarget/addEventListener /es/docs/Web/API/EventSource/onopen /es/docs/Web/API/EventSource/open_event -/es/docs/Web/API/Fetch_API/Conceptos_basicos /es/docs/Web/API/Fetch_API/Basic_concepts +/es/docs/Web/API/Fetch_API/Basic_concepts /es/docs/conflicting/Web/API/Fetch_API/Using_Fetch +/es/docs/Web/API/Fetch_API/Conceptos_basicos /es/docs/conflicting/Web/API/Fetch_API/Using_Fetch /es/docs/Web/API/Fetch_API/Utilizando_Fetch /es/docs/Web/API/Fetch_API/Using_Fetch /es/docs/Web/API/File/Using_files_from_web_applications /es/docs/Web/API/File_API/Using_files_from_web_applications /es/docs/Web/API/File/fileName /es/docs/web/api/file/name diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index 772f7a76032218..4f09bc3cbc01be 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -4161,10 +4161,6 @@ "enlinea777" ] }, - "Web/API/Fetch_API/Basic_concepts": { - "modified": "2019-03-18T21:24:00.327Z", - "contributors": ["IsraelFloresDGA"] - }, "Web/API/Fetch_API/Using_Fetch": { "modified": "2020-12-08T11:29:15.934Z", "contributors": [ @@ -14050,6 +14046,10 @@ "modified": "2019-03-23T22:49:37.176Z", "contributors": ["gdlm91", "japho"] }, + "conflicting/Web/API/Fetch_API/Using_Fetch": { + "modified": "2019-03-18T21:24:00.327Z", + "contributors": ["IsraelFloresDGA"] + }, "conflicting/Web/API/Geolocation": { "modified": "2019-03-23T23:01:31.642Z", "contributors": ["fscholz"] diff --git a/files/es/web/api/fetch_api/basic_concepts/index.md b/files/es/conflicting/web/api/fetch_api/using_fetch/index.md similarity index 97% rename from files/es/web/api/fetch_api/basic_concepts/index.md rename to files/es/conflicting/web/api/fetch_api/using_fetch/index.md index 1542bf81cc3e20..f66feea8981e06 100644 --- a/files/es/web/api/fetch_api/basic_concepts/index.md +++ b/files/es/conflicting/web/api/fetch_api/using_fetch/index.md @@ -1,6 +1,7 @@ --- title: Conceptos básicos de Fetch -slug: Web/API/Fetch_API/Basic_concepts +slug: conflicting/Web/API/Fetch_API/Using_Fetch +original_slug: Web/API/Fetch_API/Basic_concepts --- {{DefaultAPISidebar("Fetch API")}} From 6e9a071c621b334d60af4cb114b04e6d91ac487a Mon Sep 17 00:00:00 2001 From: Alexander Date: Mon, 1 Jul 2024 09:12:42 -0600 Subject: [PATCH 111/318] [es] Update Discussion Channels (#21913) * [es] Update Discussion Channels * Apply suggestions from code review Co-authored-by: A1lo --------- Co-authored-by: GrayWolf Co-authored-by: A1lo --- .../mdn/community/contributing/translated_content/index.md | 2 +- .../mdn/community/contributing/translated_content/index.md | 5 +++++ .../mdn/community/contributing/translated_content/index.md | 2 +- .../mdn/community/contributing/translated_content/index.md | 2 +- .../mdn/community/contributing/translated_content/index.md | 2 +- .../mdn/community/contributing/translated_content/index.md | 2 +- 6 files changed, 10 insertions(+), 5 deletions(-) diff --git a/files/es/mdn/community/contributing/translated_content/index.md b/files/es/mdn/community/contributing/translated_content/index.md index 43025f0cd43f12..bc2dd3ba9209dd 100644 --- a/files/es/mdn/community/contributing/translated_content/index.md +++ b/files/es/mdn/community/contributing/translated_content/index.md @@ -47,7 +47,7 @@ Hemos _congelado_ todo el contenido localizado (lo que significa que no aceptare ### Español (es) -- Discusiones: [Matrix (canal #mdn-l10n-es)](https://chat.mozilla.org/#/room/#mdn-l10n-es:mozilla.org), [Telegram (canal MDN l10n ES)](https://t.me/+Dr6qKQCAepw4MjFj), [Discord (MDN Web Docs Community ,canal #spanish)](/discord) +- Discusiones: [Matrix (`#mdn-l10n-es`)](https://chat.mozilla.org/#/room/#mdn-l10n-es:mozilla.org), [Telegram (`MDN l10n ES`)](https://t.me/+Dr6qKQCAepw4MjFj), [Discord (`#spanish`)](/discord) - Colaboradores actuales: [Graywolf9](https://github.com/Graywolf9), [JuanVqz](https://github.com/JuanVqz), [Jalkhov](https://github.com/Jalkhov), [marcelozarate](https://github.com/marcelozarate), [davbrito](https://github.com/davbrito), [Vallejoanderson](https://github.com/Vallejoanderson). > **Nota:** Si quiere hablar sobre la posibilidad de _descongelar_ una localización, las [directrices sobre lo que se requiere se pueden encontrar aquí](https://github.com/mdn/translated-content/blob/main/PEERS_GUIDELINES.md#activating-a-locale) diff --git a/files/fr/mdn/community/contributing/translated_content/index.md b/files/fr/mdn/community/contributing/translated_content/index.md index ffb7045cde96ec..0318b165d6b6f1 100644 --- a/files/fr/mdn/community/contributing/translated_content/index.md +++ b/files/fr/mdn/community/contributing/translated_content/index.md @@ -40,6 +40,11 @@ Nous avons actuellement dégelé les langues suivantes : - Discussions : [Matrix (#mdn-l10n-ru channel)](https://chat.mozilla.org/#/room/#mdn-l10n-ru:mozilla.org) - Contributeurs actuels : [leon-win](https://github.com/leon-win), [sashasushko](https://github.com/sashasushko), [Saionaro](https://github.com/Saionaro), [yanaklose](https://github.com/yanaklose), [myshov](https://github.com/myshov), [lex111](https://github.com/lex111) +### Espagnol (es) + +- Discussions : [Matrix (`#mdn-l10n-es`)](https://chat.mozilla.org/#/room/#mdn-l10n-es:mozilla.org), [Telegram (`MDN l10n ES`)](https://t.me/+Dr6qKQCAepw4MjFj), [Discord (`#spanish`)](/discord) +- Contributeurs actuels : [Graywolf9](https://github.com/Graywolf9), [JuanVqz](https://github.com/JuanVqz), [Jalkhov](https://github.com/Jalkhov), [marcelozarate](https://github.com/marcelozarate), [davbrito](https://github.com/davbrito), [Vallejoanderson](https://github.com/Vallejoanderson) + ## Autres sujets de localisation sur MDN Pour l'instant, la nouvelle interface utilisateur de la plateforme MDN sera uniquement en anglais. C'est un problème que nous aborderons plus tard. diff --git a/files/ja/mdn/community/contributing/translated_content/index.md b/files/ja/mdn/community/contributing/translated_content/index.md index 1847eaf8bbb449..9bc173283bd828 100644 --- a/files/ja/mdn/community/contributing/translated_content/index.md +++ b/files/ja/mdn/community/contributing/translated_content/index.md @@ -51,7 +51,7 @@ l10n: ### スペイン語 (`es`) -- ディスカッション: [Matrix (`#mdn-l10n-es`)](https://chat.mozilla.org/#/room/#mdn-l10n-es:mozilla.org), [Telegram (`MDN l10n ES`)](https://t.me/+Dr6qKQCAepw4MjFj) +- ディスカッション: [Matrix (`#mdn-l10n-es`)](https://chat.mozilla.org/#/room/#mdn-l10n-es:mozilla.org), [Telegram (`MDN l10n ES`)](https://t.me/+Dr6qKQCAepw4MjFj), [Discord (`#spanish`)](/discord) - 現在の管理者: [JuanVqz](https://github.com/JuanVqz), [davbrito](https://github.com/davbrito), [Graywolf9](https://github.com/Graywolf9), [Vallejoanderson](https://github.com/Vallejoanderson), [marcelozarate](https://github.com/marcelozarate), [Jalkhov](https://github.com/Jalkhov) ## 関連情報 diff --git a/files/ru/mdn/community/contributing/translated_content/index.md b/files/ru/mdn/community/contributing/translated_content/index.md index e0f31283b26938..8ea4aa7f6bc731 100644 --- a/files/ru/mdn/community/contributing/translated_content/index.md +++ b/files/ru/mdn/community/contributing/translated_content/index.md @@ -24,7 +24,7 @@ slug: MDN/Community/Contributing/Translated_content ### Испанский (`es`) -- Обсуждения: [Matrix (`#mdn-l10n-es`)](https://chat.mozilla.org/#/room/#mdn-l10n-es:mozilla.org), [Telegram (`MDN l10n ES`)](https://t.me/+Dr6qKQCAepw4MjFj) +- Обсуждения: [Matrix (`#mdn-l10n-es`)](https://chat.mozilla.org/#/room/#mdn-l10n-es:mozilla.org), [Telegram (`MDN l10n ES`)](https://t.me/+Dr6qKQCAepw4MjFj), [Discord (`#spanish`)](/discord) - Активные участники: [JuanVqz](https://github.com/JuanVqz), [davbrito](https://github.com/davbrito), [Graywolf9](https://github.com/Graywolf9), [Vallejoanderson](https://github.com/Vallejoanderson), [marcelozarate](https://github.com/marcelozarate), [Jalkhov](https://github.com/Jalkhov) ### Китайский (`zh-CN`, `zh-TW`) diff --git a/files/zh-cn/mdn/community/contributing/translated_content/index.md b/files/zh-cn/mdn/community/contributing/translated_content/index.md index 09290ebf60547f..f49a88ce0e4f62 100644 --- a/files/zh-cn/mdn/community/contributing/translated_content/index.md +++ b/files/zh-cn/mdn/community/contributing/translated_content/index.md @@ -51,7 +51,7 @@ l10n: ### 西班牙语（es） -- 讨论组：[Matrix (#mdn-l10n-es channel)](https://chat.mozilla.org/#/room/#mdn-l10n-es:mozilla.org) +- 讨论组：[Matrix (`#mdn-l10n-es`)](https://chat.mozilla.org/#/room/#mdn-l10n-es:mozilla.org)、[Telegram (`MDN l10n ES`)](https://t.me/+Dr6qKQCAepw4MjFj)、[Discord (`#spanish`)](/discord) - 目前的志愿者：[JuanVqz](https://github.com/JuanVqz)、[davbrito](https://github.com/davbrito)、[Graywolf9](https://github.com/Graywolf9)、[Vallejoanderson](https://github.com/Vallejoanderson)、[marcelozarate](https://github.com/marcelozarate)、[Jalkhov](https://github.com/Jalkhov) ## 参见 diff --git a/files/zh-tw/mdn/community/contributing/translated_content/index.md b/files/zh-tw/mdn/community/contributing/translated_content/index.md index 2d52a4c20e1dd5..d34ef4fbaca67d 100644 --- a/files/zh-tw/mdn/community/contributing/translated_content/index.md +++ b/files/zh-tw/mdn/community/contributing/translated_content/index.md @@ -51,7 +51,7 @@ l10n: ### 西班牙文（`es`） -- 討論群組：[Matrix（`#mdn-l10n-es`）](https://chat.mozilla.org/#/room/#mdn-l10n-es:mozilla.org)、[Telegram（`MDN l10n ES`）](https://t.me/+Dr6qKQCAepw4MjFj) +- 討論群組：[Matrix（`#mdn-l10n-es`）](https://chat.mozilla.org/#/room/#mdn-l10n-es:mozilla.org)、[Telegram（`MDN l10n ES`）](https://t.me/+Dr6qKQCAepw4MjFj)、[Discord（`#spanish`）](/discord) - 目前的維護者：[JuanVqz](https://github.com/JuanVqz)、[davbrito](https://github.com/davbrito)、[Graywolf9](https://github.com/Graywolf9)、[Vallejoanderson](https://github.com/Vallejoanderson)、[marcelozarate](https://github.com/marcelozarate)、[Jalkhov](https://github.com/Jalkhov) ## 參見 From 4aba64cc89aba6479fc1260df622d25a703d0de0 Mon Sep 17 00:00:00 2001 From: Alexander Date: Mon, 1 Jul 2024 10:25:30 -0600 Subject: [PATCH 112/318] [es] Remove DOMAttributeMethods deprecated macro (#22056) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [es] Remove DOMAttributeMethods deprecated macro Co-authored-by: GrayWolf Co-authored-by: Juan Vásquez --- files/es/web/api/element/getattribute/index.md | 8 -------- files/es/web/api/element/hasattribute/index.md | 4 ---- files/es/web/api/element/setattribute/index.md | 2 -- 3 files changed, 14 deletions(-) diff --git a/files/es/web/api/element/getattribute/index.md b/files/es/web/api/element/getattribute/index.md index 2002c2bdb37b4f..cfcb146faf54eb 100644 --- a/files/es/web/api/element/getattribute/index.md +++ b/files/es/web/api/element/getattribute/index.md @@ -29,14 +29,6 @@ var align = div1.getAttribute("align"); alert(align); // Muestra el valor de la alineación(align) del elemento con id="div1" ``` -## Notas - -Cuando es invocado en un elemento HTML desde un DOM marcado como documento HTML, `getAttribute()` convierte a minúsculas el argumento antes de proceder. - -Esencialmente todos los navegadores (Firefox, Internet Explorer, versiones recientes de Opera, Safari, Konqueror, y iCab, siendo una lista no exhaustiva) devuelven `null` cuando el atributo especificado no existe en el elemento especificado y esto es lo que establece [el actual borrador de la especificación del DOM](http://dom.spec.whatwg.org/#dom-element-getattribute). Por otra parte, la antigua especificación del DOM 3 Core dice que el valor correcto de retorno es de hecho una _cadena vacía_, y algunas implementaciones de DOM aplican este comportamiento. La implementación de getAttribute en XUL (Gecko) sigue la especificación de DOM 3 Core y retorna una cadena vacía. Por consiguiente, es recomendable usar {{domxref("element.hasAttribute()")}} para verificar la existencia de un atributo previo a la utilización de `getAttribute()` si es posible que el atributo requerido no exista en el elemento especificado. - -{{DOMAttributeMethods}} - ## Especificaciones {{Specifications}} diff --git a/files/es/web/api/element/hasattribute/index.md b/files/es/web/api/element/hasattribute/index.md index 5951414692617b..0a0d3c58322be2 100644 --- a/files/es/web/api/element/hasattribute/index.md +++ b/files/es/web/api/element/hasattribute/index.md @@ -39,10 +39,6 @@ if (foo.hasAttribute("bar")) { })(Element.prototype); ``` -## Notas - -{{DOMAttributeMethods}} - ## Especificaciones {{Specifications}} diff --git a/files/es/web/api/element/setattribute/index.md b/files/es/web/api/element/setattribute/index.md index 3aea40c7727b12..57f0d526f0d185 100644 --- a/files/es/web/api/element/setattribute/index.md +++ b/files/es/web/api/element/setattribute/index.md @@ -61,8 +61,6 @@ Esto demuestra dos cosas: {{ EmbedLiveSample('Example', '300', '50') }} -{{DOMAttributeMethods}} - ## Especificaciones {{Specifications}} From efb0c0b671bd98346e3784d859324777bc7e3dff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?I=C3=B1o?= <58248360+Ignorancio@users.noreply.github.com> Date: Mon, 1 Jul 2024 14:40:06 -0500 Subject: [PATCH 113/318] [es] Update EvilCircle (#22069) * Update index.md Actualize la definicion de evilcircle cambiando Shape.call(this, x, y, 20, 20, exists); y agregando una definicion a constructor de evilcircle a algo mas facil de entender. --- .../objects/adding_bouncing_balls_features/index.md | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/files/es/learn/javascript/objects/adding_bouncing_balls_features/index.md b/files/es/learn/javascript/objects/adding_bouncing_balls_features/index.md index 1f0d68d7281813..b4b8217907527f 100644 --- a/files/es/learn/javascript/objects/adding_bouncing_balls_features/index.md +++ b/files/es/learn/javascript/objects/adding_bouncing_balls_features/index.md @@ -51,16 +51,15 @@ En este punto, intente volver a cargar el código; debería funcionar igual que Ahora es el momento de conocer al chico malo: ¡el `EvilCircle()`! Nuestro juego solo involucrará un círculo malvado, pero lo vamos a seguir definiendo usando un constructor que hereda de `Shape()` para que tengas algo de práctica. Es posible que desee agregar otro círculo a la aplicación más adelante que pueda ser controlado por otro jugador o tener varios círculos malvados controlados por computadora. Probablemente no vas a dominar el mundo con un solo círculo maligno, pero servirá para esta evaluación. -El constructor `EvilCircle()` debe heredar `x`, `y`, `velX`, `velY`, y `exists` from `Shape()`, pero `velX` y `velY` debe ser igual a 20. - -Debería hacer algo como `Shape.call(this, x, y, 20, 20, exists);` +#### El constructor EvilCircle Debe definir también sus propias propiedades, como las siguientes: -- `color` — `'white'` -- `size` — `10` +- Pasarle solo `x`, `y` como argumentos +- Pase los argumentos `x`, `y` a la superclase `Shape` junto con los valores para `velX` y `velY` iguales a 20. Debe hacer esto con código como `super(x, y, 20, 20);` +- Debe establecer `color` en `'white'` y `size` en `10` -Otra vez, recuerda definir tus propiedades heredadas como parámetros en el constructor, y configura las propiedades `prototype` y `constructor` properties correc.tamente +Otra vez, recuerda definir tus propiedades heredadas como parámetros en el constructor, y configura las propiedades `prototype` y `constructor` properties correctamente ### Definiendo los métodos de EvilCircle() From 51c26b1cee9c28a26b4ddcd1c15b579e57ee0e9f Mon Sep 17 00:00:00 2001 From: Wonse Shin <62709718+shinwonse@users.noreply.github.com> Date: Tue, 2 Jul 2024 07:38:39 +0900 Subject: [PATCH 114/318] =?UTF-8?q?[ko]=20fix=20typo=20(=EB=B8=8C=EB=9D=BC?= =?UTF-8?q?=EC=A3=BC=EC=96=B4=20->=20=EB=B8=8C=EB=9D=BC=EC=9A=B0=EC=A0=80)?= =?UTF-8?q?=20(#21867)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix typo (브라주어 -> 브라우저) --- files/ko/web/css/css_containment/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ko/web/css/css_containment/index.md b/files/ko/web/css/css_containment/index.md index 1a0364d0620beb..5e33c5accaa4fa 100644 --- a/files/ko/web/css/css_containment/index.md +++ b/files/ko/web/css/css_containment/index.md @@ -36,7 +36,7 @@ article { 우리는 `contain` 속성을 통해 각 아티클이 독립적이라고 말했습니다. -`content` 값은 `contain: layout paint`의 약어입니다. 브라주어에 요소의 내부 레이아웃이 페이지의 나머지 부분과 완전히 분리되어 있으며, 요소에 대한 모든 것이 경계 내부에 그려져 있음을 알려줍니다. overflow되어 보이는 것이 없습니다. +`content` 값은 `contain: layout paint`의 약어입니다. 브라우저에 요소의 내부 레이아웃이 페이지의 나머지 부분과 완전히 분리되어 있으며, 요소에 대한 모든 것이 경계 내부에 그려져 있음을 알려줍니다. overflow되어 보이는 것이 없습니다. 이 정보는 페이지를 작성하는 웹 개발자에게 일반적으로 알려져 있으며, 사실 매우 분명합니다. 그러나 브라우저는 귀하의 의도를 추측할 수 없고, 아티클이 완전히 독립적일 것이라고 가정할 수 없습니다. 따라서 이 속성은 브라우저에게 이 사실을 설명하고, 그 정보를 기반으로 성능 최적화를 수행할 수 있는 좋은 방법을 제공합니다. From 06a0d85246429b0e793049dc2a6d8499c7586495 Mon Sep 17 00:00:00 2001 From: Jongha Kim Date: Tue, 2 Jul 2024 09:40:45 +0900 Subject: [PATCH 115/318] =?UTF-8?q?[ko]=20Object.prototype.=5F=5FdefineSet?= =?UTF-8?q?ter=5F=5F()=20=EC=8B=A0=EA=B7=9C=20=EB=B2=88=EC=97=AD=20(#20189?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [ko] Object.prototype.__defineSetter__() 신규 번역 - Object.prototype.__defineSetter__() 신규 번역 * 리뷰사항 반영 * 리뷰사항 수정 --- .../object/__definesetter__/index.md | 106 ++++++++++++++++++ 1 file changed, 106 insertions(+) create mode 100644 files/ko/web/javascript/reference/global_objects/object/__definesetter__/index.md diff --git a/files/ko/web/javascript/reference/global_objects/object/__definesetter__/index.md b/files/ko/web/javascript/reference/global_objects/object/__definesetter__/index.md new file mode 100644 index 00000000000000..b6eaf170263111 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/__definesetter__/index.md @@ -0,0 +1,106 @@ +--- +title: Object.prototype.__defineSetter__() +slug: Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__ +l10n: + sourceCommit: fd326b574aadcd78924a5a223f15e289e45a7f1d +--- + +{{JSRef}}{{Deprecated_Header}} + +> **참고:** 이 기능은 [객체 초기자 구문](/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer) 또는 {{jsxref("Object.defineProperty()")}} API를 사용하여 [설정자](/ko/docs/Web/JavaScript/Reference/Functions/set) 정의하는 것을 권장하기 때문에 이 기능은 더 이상 사용되지 않습니다. 이 메서드의 동작은 웹 호환성을 위해서만 명시되며 모든 플랫폼에서 구현할 필요는 없습니다.모든 환경에서 작동하지 않을 수도 있습니다. + +{{jsxref("Object")}} 인스턴스의 **`__defineSetter__()`** 메서드는 해당 속성을 설정하려고 시도할 때 호출될 함수에 객체의 속성을 바인딩합니다. + +## 구문 + +```js-nolint +__defineSetter__(prop, func) +``` + +### 매개변수 + +- `prop` + - : 설정자 `func`가 바인딩된 속성의 이름이 포함된 문자열입니다. +- `func` + - : 지정된 속성을 설정하려고 할 때 호출되는 함수입니다. 이 함수는 다음 매개변수를 받습니다. + - `val` + - : `prop`에 할당하려고 한 값입니다. + +### 반환 값 + +없음 ({{jsxref("undefined")}}). + +### 예외 + +- {{jsxref("TypeError")}} + - : `func`가 함수가 아닐 경우 발생합니다. + +## 설명 + +`Object.prototype`에서 상속하는 모든 객체(즉, [`null`-프로토타입 객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects)를 제외한 모든 객체)는 `__defineSetter__()` 메서드를 상속합니다. 이 메서드를 사용하면 기존 객체에 [설정자](/ko/docs/Web/JavaScript/Reference/Functions/set)를 정의할 수 있습니다. 이는 [`Object.defineProperty(obj, prop, { set: func, configurable: true, enumerable: true })`]와 동일하며, 이는 속성이 열거 가능하고 구성 가능하며 기존 접근자가 있는 경우 보존됨을 의미합니다. + +`__defineSetter__()`는 명세서에서 "권장 선택 사항"으로 정의되어 있으므로 반드시 구현할 필요가 없습니다. 그러나 모든 주요 브라우저에서 구현하고 있으며 계속 사용되고 있기 때문에 제거될 가능성은 낮습니다. 브라우저가 `__defineSetter__()`를 구현했다면, [`__lookupGetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__), [`__lookupSetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__), [`__defineGetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__) 구현이 필요합니다. + +## 예제 + +### \_\_defineSetter\_\_() 사용하기 + +```js +const o = {}; +o.__defineSetter__("value", function (val) { + this.anotherValue = val; +}); +o.value = 5; +console.log(o.value); // undefined +console.log(o.anotherValue); // 5 +``` + +### 표준 방식으로 설정자 속성 정의하기 + +객체가 처음 초기화될 때 `set` 구문을 사용하여 설정자를 정의할 수 있습니다. + +```js +const o = { + set value(val) { + this.anotherValue = val; + }, +}; +o.value = 5; +console.log(o.value); // undefined +console.log(o.anotherValue); // 5 +``` + +객체가 생성된 후 {{jsxref("Object.defineProperty()")}}를 사용하여 객체에 설정자를 정의할 수도 있습니다. 이 메서드는 `__defineSetter__()`와 비교하여 설정자의 열거 가능성과 구성 가능성을 제어할 수 있을 뿐만 아니라 [심볼](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol) 속성을 정의할 수 있습니다. `Object.defineProperty()` 메서드는 `Object.prototype`에서 상속되지 않으므로 `__defineSetter__()` 메서드가 없는 [`null`-프로토타입 객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects)에서도 작동합니다. + +```js +const o = {}; +Object.defineProperty(o, "value", { + set(val) { + this.anotherValue = val; + }, + configurable: true, + enumerable: true, +}); +o.value = 5; +console.log(o.value); // undefined +console.log(o.anotherValue); // 5 +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [`core-js`에서의 `Object.prototype.__defineSetter__` 폴리필](https://github.com/zloirock/core-js#ecmascript-object) +- [`Object.prototype.__defineGetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__) +- {{jsxref("Functions/set", "set")}} +- {{jsxref("Object.defineProperty()")}} +- [`Object.prototype.__lookupGetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__) +- [`Object.prototype.__lookupSetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__) +- [JS 안내서: 접근자와 설정자 정의하기](/ko/docs/Web/JavaScript/Guide/Working_with_objects#defining_getters_and_setters) +- [Firefox bug 647423](https://bugzil.la/647423) From edcdf9fdaf2a9f7abbfc95b6d61e50d0526d68a0 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Tue, 2 Jul 2024 08:59:21 +0800 Subject: [PATCH 116/318] zh-CN: create Glossary/RTF (#21581) Co-authored-by: A1lo --- files/zh-cn/glossary/rtf/index.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 files/zh-cn/glossary/rtf/index.md diff --git a/files/zh-cn/glossary/rtf/index.md b/files/zh-cn/glossary/rtf/index.md new file mode 100644 index 00000000000000..973ef51b1c3091 --- /dev/null +++ b/files/zh-cn/glossary/rtf/index.md @@ -0,0 +1,16 @@ +--- +title: RTF +slug: Glossary/RTF +l10n: + sourceCommit: 97a5c711248e4d49c1dc6d935691ffd64dbdfd17 +--- + +{{GlossarySidebar}} + +RTF（富文本格式）是一种基于纯文本的文件格式，支持格式化指令（如粗体或斜体）。 + +微软 Word 团队的三名程序员在 1980 年代创建了 RTF，微软一直开发该格式直到 2008 年。然而，许多文字处理程序仍然可以读取和写入 RTF。 + +## 参见 + +- 维基百科上的[富文本格式](https://zh.wikipedia.org/wiki/RTF) From b9b7ac3651ff2599586336d7bcf7e7909fa4f2b6 Mon Sep 17 00:00:00 2001 From: an-777 <131597737+an-777@users.noreply.github.com> Date: Tue, 2 Jul 2024 09:37:58 +0800 Subject: [PATCH 117/318] [zh-tw]: update HTTP Status `100` (#22062) --- files/zh-tw/web/http/status/100/index.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/files/zh-tw/web/http/status/100/index.md b/files/zh-tw/web/http/status/100/index.md index 8c060629f63ede..d6da8823ec4725 100644 --- a/files/zh-tw/web/http/status/100/index.md +++ b/files/zh-tw/web/http/status/100/index.md @@ -2,7 +2,7 @@ title: 100 Continue slug: Web/HTTP/Status/100 l10n: - sourceCommit: 0880a90f3811475d78bc4b2c344eb4146f25f66c + sourceCommit: b085d5418eb8ef812682e647045746221bad0e7e --- {{HTTPSidebar}} @@ -21,10 +21,6 @@ HTTP **`100 Continue`** 資訊回應碼表示到目前為止一切正常，用 {{Specifications}} -## 瀏覽器相容性 - -{{Compat}} - ## 參見 - {{HTTPHeader("Expect")}} From 513c2785ff59f87584b6ac0219baa7f9eccd36a2 Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Tue, 2 Jul 2024 11:27:02 +0800 Subject: [PATCH 118/318] [zh-cn]: create the translation of `tabs.MutedInfo` type (#21830) --- .../webextensions/api/tabs/mutedinfo/index.md | 59 +++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/tabs/mutedinfo/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/mutedinfo/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/mutedinfo/index.md new file mode 100644 index 00000000000000..9d70c96c3ad493 --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/mutedinfo/index.md @@ -0,0 +1,59 @@ +--- +title: tabs.MutedInfo +slug: Mozilla/Add-ons/WebExtensions/API/tabs/MutedInfo +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c +--- + +{{AddonSidebar}} + +这个对象包含一个布尔值，指示标签页是否静音，以及最后一次状态更改的原因。 + +## 类型 + +此类型的值是对象，包含以下属性： + +- `extensionId` {{optional_inline}} + - : `string`。最后更改静音状态的扩展程序的 ID。如果扩展程序不是最后更改静音状态的原因，则未设置。 +- `muted` + - : `boolean`。标签页当前是否静音。等同于静音音频指示器是否显示。 +- `reason` {{optional_inline}} + - : {{WebExtAPIRef('tabs.MutedInfoReason')}}。标签页被静音或取消静音的原因。如果标签页的静音状态从未更改过，则不指定。 + +## 浏览器兼容性 + +{{Compat}} + +{{WebExtExamples}} + +> **备注：** 此 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#type-MutedInfo) API。本文档内容源自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。 + + From 2426349893f8d285fe3cb26c3efb0b905b59e58c Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Tue, 2 Jul 2024 14:33:51 +0800 Subject: [PATCH 119/318] [zh-cn]: create the translation of `tabs.getSelected()` method (#21789) --- .../api/tabs/getselected/index.md | 69 +++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/tabs/getselected/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/getselected/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/getselected/index.md new file mode 100644 index 00000000000000..657e30d5674869 --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/getselected/index.md @@ -0,0 +1,69 @@ +--- +title: tabs.getSelected() +slug: Mozilla/Add-ons/WebExtensions/API/tabs/getSelected +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c +--- + +{{AddonSidebar}} + +> **警告：** 此方法已被弃用。请使用 {{WebExtAPIRef("tabs.query", "tabs.query({active: true})")}} 替代。 + +获取指定窗口中当前选中的标签页。 + +这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。 + +## 语法 + +```js-nolint +let gettingSelected = browser.tabs.getSelected( + windowId // 可选整数 +) +``` + +### 参数 + +- `windowId` {{optional_inline}} + - : `integer`。默认为当前窗口。 + +### 返回值 + +一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个包含当前选中标签页信息的 [`tabs.Tab`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/tabs/Tab) 对象。如果找不到标签页或发生其他错误，promise 将会被拒绝并返回错误信息。 + +## 浏览器兼容性 + +{{Compat}} + +{{WebExtExamples}} + +> **备注：** 此 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#method-getSelected) API。本文档来自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。 + + From e60b729fad9976627dd62d18890719a40afed044 Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Tue, 2 Jul 2024 15:07:56 +0800 Subject: [PATCH 120/318] [zh-cn]: create the translation of `tabs.toggleReaderMode()` method (#21824) --- .../api/tabs/togglereadermode/index.md | 70 +++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/tabs/togglereadermode/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/togglereadermode/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/togglereadermode/index.md new file mode 100644 index 00000000000000..656b20bd26ff3f --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/togglereadermode/index.md @@ -0,0 +1,70 @@ +--- +title: tabs.toggleReaderMode() +slug: Mozilla/Add-ons/WebExtensions/API/tabs/toggleReaderMode +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c +--- + +{{AddonSidebar}} + +为给定的标签页切换阅读模式。 + +该函数用于切换给定标签页的阅读模式。它接受一个标签页 ID 作为参数；如果省略该参数，则切换当前活动的标签页的阅读模式。 + +这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。 + +阅读模式（Reader Mode），也称为阅读视图，是浏览器的一个功能，通过以下方式帮助用户专注于文章内容： + +- 隐藏非必要的页面元素，如侧边栏、页脚和广告。 +- 调整页面的文本大小、对比度和布局，以提升可读性。 + +阅读模式特别适用于文章类型的页面，即主要以正文内容为特色的页面。不具备可识别文章的页面则无法显示在阅读模式中。要判断一个页面是否为文章，请检查 {{WebExtAPIRef("tabs.Tab")}} 的 `isArticle` 属性。 + +要查看一个标签页是否已处于阅读模式，请检查 {{WebExtAPIRef("tabs.Tab")}} 的 `isInReaderMode` 属性。若要跟踪标签页进入或退出阅读模式，请记录所有标签页的当前状态，并检查 `isInReaderMode` 何时发生变化： + +```js +function handleUpdated(tabId, changeInfo, tabInfo) { + if (changeInfo.status === "complete") { + console.log(`标签页 ${tabId} 的阅读模式状态：${tabInfo.isInReaderMode}`); + } +} + +browser.tabs.onUpdated.addListener(handleUpdated); +``` + +## 语法 + +```js-nolint +let toggling = browser.tabs.toggleReaderMode( + tabId // 可选的整型 +) +``` + +### 参数 + +- `tabId` {{optional_inline}} + - : `integer`。要切换为阅读模式的标签页的 ID。默认为当前窗口中选定的标签页。 + +### 返回值 + +一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，在标签页更新后其会被兑现且不带有参数。如果发生任何错误（例如因页面不是文章类型），promise 将会被拒绝并返回错误信息。 + +## 示例 + +以下代码会将符合条件的每个新页面切换到阅读模式： + +```js +function switchToReaderMode(tabId, changeInfo, tabInfo) { + if (changeInfo.isArticle) { + browser.tabs.toggleReaderMode(tabId); + } +} + +browser.tabs.onUpdated.addListener(switchToReaderMode); +``` + +{{WebExtExamples}} + +## 浏览器兼容性 + +{{Compat}} From ab705350ae94404707df3a291401f4e74f8fbd75 Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Tue, 2 Jul 2024 10:11:52 +0200 Subject: [PATCH 121/318] [zh-cn] sync translated content (#22104) Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/zh-cn/_redirects.txt | 1 + files/zh-cn/_wikihistory.json | 8 +- .../building_blocks/event_bubbling/index.md | 364 ++++++++++++++++++ .../building_blocks/events/index.md | 357 +---------------- files/zh-cn/learn/javascript/howto/index.md | 4 +- files/zh-cn/web/api/event/bubbles/index.md | 2 +- .../comparison_of_event_targets/index.md | 210 ---------- .../web/api/event/currenttarget/index.md | 5 +- files/zh-cn/web/api/event/index.md | 5 +- .../web/api/event/originaltarget/index.md | 14 +- files/zh-cn/web/api/event/target/index.md | 12 +- .../web/api/mouseevent/relatedtarget/index.md | 1 - 12 files changed, 385 insertions(+), 598 deletions(-) create mode 100644 files/zh-cn/learn/javascript/building_blocks/event_bubbling/index.md delete mode 100644 files/zh-cn/web/api/event/comparison_of_event_targets/index.md diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index cf3da9a7daed40..5d555b258605bf 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -1470,6 +1470,7 @@ /zh-CN/docs/Web/API/Element/pointerlockchange_event /zh-CN/docs/Web/API/Document/pointerlockchange_event /zh-CN/docs/Web/API/Element/removeAttributre /zh-CN/docs/Web/API/Element/removeAttribute /zh-CN/docs/Web/API/Element/select_event /zh-CN/docs/Web/API/HTMLInputElement/select_event +/zh-CN/docs/Web/API/Event/Comparison_of_Event_Targets /zh-CN/docs/Learn/JavaScript/Building_blocks/Event_bubbling /zh-CN/docs/Web/API/Event/CustomEvent /zh-CN/docs/Web/API/CustomEvent /zh-CN/docs/Web/API/Event/pageY /zh-CN/docs/Web/API/MouseEvent/pageY /zh-CN/docs/Web/API/Event/禁用时间冒泡 /zh-CN/docs/Web/API/Event/cancelBubble diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index 9d8dcc3e38b795..0188b12a688df3 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -3557,6 +3557,10 @@ "ppphp" ] }, + "Learn/JavaScript/Building_blocks/Event_bubbling": { + "modified": "2019-03-18T21:17:15.255Z", + "contributors": ["zhuangyin"] + }, "Learn/JavaScript/Building_blocks/Events": { "modified": "2020-08-04T06:06:58.173Z", "contributors": [ @@ -9177,10 +9181,6 @@ "TigerSoldier" ] }, - "Web/API/Event/Comparison_of_Event_Targets": { - "modified": "2019-03-18T21:17:15.255Z", - "contributors": ["zhuangyin"] - }, "Web/API/Event/Event": { "modified": "2020-10-15T21:37:04.498Z", "contributors": [ diff --git a/files/zh-cn/learn/javascript/building_blocks/event_bubbling/index.md b/files/zh-cn/learn/javascript/building_blocks/event_bubbling/index.md new file mode 100644 index 00000000000000..5c6311e9a2771f --- /dev/null +++ b/files/zh-cn/learn/javascript/building_blocks/event_bubbling/index.md @@ -0,0 +1,364 @@ +--- +title: 事件冒泡 +slug: Learn/JavaScript/Building_blocks/Event_bubbling +--- + +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Events","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}} + +## 事件冒泡 + +事件冒泡描述了浏览器如何处理针对嵌套元素的事件。 + +### 在父元素上设置监听器 + +考虑像这样的网页： + +```html +
+ +
+

+```
+
+这里有一个在其他元素（{{HTMLElement("div")}}）内部的按钮，可以说这里的 `
` 元素是其中包含元素的**父元素**。当我们在父元素附加单击事件处理器，并点击按钮时，会发生什么？
+
+```js
+const output = document.querySelector("#output");
+function handleClick(e) {
+  output.textContent += `你在 ${e.currentTarget.tagName} 元素上进行了点击\n`;
+}
+
+const container = document.querySelector("#container");
+container.addEventListener("click", handleClick);
+```
+
+{{ EmbedLiveSample('在父元素上设置监听器', '100%', 200, "", "") }}
+
+你会发现在用户单击按钮时，父元素上触发了单击事件：
+
+```
+你在 DIV 元素上进行了点击
+```
+
+这是有道理的：按钮在 `
` 里面，所以当你点击按钮的时候，你也隐含地点击了它所在的元素。
+
+### 冒泡示例
+
+如果在按钮*及*其父元素上同时添加事件处理器，会发生什么？
+
+```html
+
+  

+    
+  

+  

+
+```
+
+让我们试着给按钮、它的父元素（`
`）以及包含它们的 {{HTMLElement("body")}} 元素添加点击事件处理器：
+
+```js
+const output = document.querySelector("#output");
+function handleClick(e) {
+  output.textContent += `你在 ${e.currentTarget.tagName} 元素上进行了点击\n`;
+}
+
+const container = document.querySelector("#container");
+const button = document.querySelector("button");
+
+document.body.addEventListener("click", handleClick);
+container.addEventListener("click", handleClick);
+button.addEventListener("click", handleClick);
+```
+
+{{ EmbedLiveSample('冒泡', '100%', 200, "", "") }}
+
+你会发现在用户单击按钮时，所有三个元素都触发了单击事件：
+
+```
+你在 BUTTON 元素上进行了点击
+你在 DIV 元素上进行了点击
+你在 BODY 元素上进行了点击
+```
+
+在这种情况下：
+
+- 最先触发按钮上的单击事件
+- 然后是按钮的父元素（`
` 元素）
+- 然后是 `
` 的父元素（`` 元素）
+
+我们可以这样描述：事件从被点击的最里面的元素**冒泡**而出。
+
+这种行为可能是有用的，也可能引起意想不到的问题。在接下来的章节中，我们将看到它引起的一个问题，并找到解决方案。
+
+### 视频播放器示例
+
+在这个示例中，我们的页面包含一个视频，最初它为隐藏状态；还有一个标记为“显示视频”的按钮。我们希望有如下交互：
+
+- 当用户单击“显示视频”按钮时，显示包含视频的盒子，但不要开始播放视频。
+- 当用户在视频上单击时，开始播放视频。
+- 当用户单击盒子内视频以外的任何区域时，隐藏盒子。
+
+HTML 代码看起来像这样：
+
+```html
+
+
+
+```
+
+它包含：
+
+- 一个 `
+
+
+```
+
+```css hidden
+div {
+  width: 100%;
+  height: 100%;
+  background-color: #eee;
+}
+
+.hidden {
+  display: none;
+}
+
+div video {
+  padding: 40px;
+  display: block;
+  width: 400px;
+  margin: 40px auto;
+}
+```
+
+### 事件捕获
+
+事件传播的另一种形式是*事件捕获*。这就像事件冒泡，但顺序是相反的：事件不是先在最内层的目标元素上发生，然后在连续较少的嵌套元素上发生，而是先在*最小嵌套*元素上发生，然后在连续更多的嵌套元素上发生，直到达到目标。
+
+事件捕获默认是禁用的，你需要在 `addEventListener()` 的 `capture` 选项中启用它。
+
+以下示例类似于之前看到的[冒泡示例](#冒泡示例)，除了使用了 `capture` 选项以外：
+
+```html
+
+  

+    
+  

+  

+
+```
+
+```js
+const output = document.querySelector("#output");
+function handleClick(e) {
+  output.textContent += `你在 ${e.currentTarget.tagName} 元素上进行了点击\n`;
+}
+
+const container = document.querySelector("#container");
+const button = document.querySelector("button");
+
+document.body.addEventListener("click", handleClick, { capture: true });
+container.addEventListener("click", handleClick, { capture: true });
+button.addEventListener("click", handleClick);
+```
+
+{{ EmbedLiveSample('事件捕获', '100%', 200, "", "") }}
+
+在这种情况下，消息出现的顺序发生了颠倒：`` 事件处理器首先触发，然后是 `
` 的，最后是 `
-

-

-```
-
-这里有一个在其他元素（{{HTMLElement("div")}}）内部的按钮，可以说这里的 `
` 元素是其中包含元素的**父元素**。当我们在父元素附加单击事件处理器，并点击按钮时，会发生什么？
-
-```js
-const output = document.querySelector("#output");
-function handleClick(e) {
-  output.textContent += `你在 ${e.currentTarget.tagName} 元素上进行了点击\n`;
-}
-
-const container = document.querySelector("#container");
-container.addEventListener("click", handleClick);
-```
-
-{{ EmbedLiveSample('在父元素上设置监听器', '100%', 200, "", "") }}
-
-你会发现在用户单击按钮时，父元素上触发了单击事件：
-
-```
-你在 DIV 元素上进行了点击
-```
-
-这是有道理的：按钮在 `
` 里面，所以当你点击按钮的时候，你也隐含地点击了它所在的元素。
-
-### 冒泡示例
-
-如果在按钮*及*其父元素上同时添加事件处理器，会发生什么？
-
-```html
-
-  

-    
-  

-  

-
-```
-
-让我们试着给按钮、它的父元素（`
`）以及包含它们的 {{HTMLElement("body")}} 元素添加点击事件处理器：
-
-```js
-const output = document.querySelector("#output");
-function handleClick(e) {
-  output.textContent += `你在 ${e.currentTarget.tagName} 元素上进行了点击\n`;
-}
-
-const container = document.querySelector("#container");
-const button = document.querySelector("button");
-
-document.body.addEventListener("click", handleClick);
-container.addEventListener("click", handleClick);
-button.addEventListener("click", handleClick);
-```
-
-{{ EmbedLiveSample('冒泡', '100%', 200, "", "") }}
-
-你会发现在用户单击按钮时，所有三个元素都触发了单击事件：
-
-```
-你在 BUTTON 元素上进行了点击
-你在 DIV 元素上进行了点击
-你在 BODY 元素上进行了点击
-```
-
-在这种情况下：
-
-- 最先触发按钮上的单击事件
-- 然后是按钮的父元素（`
` 元素）
-- 然后是 `
` 的父元素（`` 元素）
-
-我们可以这样描述：事件从被点击的最里面的元素**冒泡**而出。
-
-这种行为可能是有用的，也可能引起意想不到的问题。在接下来的章节中，我们将看到它引起的一个问题，并找到解决方案。
-
-### 视频播放器示例
-
-在这个示例中，我们的页面包含一个视频，最初它为隐藏状态；还有一个标记为“显示视频”的按钮。我们希望有如下交互：
-
-- 当用户单击“显示视频”按钮时，显示包含视频的盒子，但不要开始播放视频。
-- 当用户在视频上单击时，开始播放视频。
-- 当用户单击盒子内视频以外的任何区域时，隐藏盒子。
-
-HTML 代码看起来像这样：
-
-```html
-
-
-
-```
-
-它包含：
-
-- 一个 `
-
-
-```
-
-```css hidden
-div {
-  width: 100%;
-  height: 100%;
-  background-color: #eee;
-}
-
-.hidden {
-  display: none;
-}
-
-div video {
-  padding: 40px;
-  display: block;
-  width: 400px;
-  margin: 40px auto;
-}
-```
-
-### 事件捕获
-
-事件传播的另一种形式是*事件捕获*。这就像事件冒泡，但顺序是相反的：事件不是先在最内层的目标元素上发生，然后在连续较少的嵌套元素上发生，而是先在*最小嵌套*元素上发生，然后在连续更多的嵌套元素上发生，直到达到目标。
-
-事件捕获默认是禁用的，你需要在 `addEventListener()` 的 `capture` 选项中启用它。
-
-以下示例类似于之前看到的[冒泡示例](#冒泡示例)，除了使用了 `capture` 选项以外：
-
-```html
-
-  

-    
-  

-  

-
-```
-
-```js
-const output = document.querySelector("#output");
-function handleClick(e) {
-  output.textContent += `你在 ${e.currentTarget.tagName} 元素上进行了点击\n`;
-}
-
-const container = document.querySelector("#container");
-const button = document.querySelector("button");
-
-document.body.addEventListener("click", handleClick, { capture: true });
-container.addEventListener("click", handleClick, { capture: true });
-button.addEventListener("click", handleClick);
-```
-
-{{ EmbedLiveSample('事件捕获', '100%', 200, "", "") }}
-
-在这种情况下，消息出现的顺序发生了颠倒：`` 事件处理器首先触发，然后是 `
` 的，最后是 `

 ```
 
 ```js hidden
-var htmlInput = document.querySelector(".html-input");
-var cssInput = document.querySelector(".css-input");
-var reset = document.getElementById("reset");
-var htmlCode = htmlInput.value;
-var cssCode = cssInput.value;
-var output = document.querySelector(".output");
-var solution = document.getElementById("solution");
-
-var styleElem = document.createElement("style");
-var headElem = document.querySelector("head");
+const htmlInput = document.querySelector(".html-input");
+const cssInput = document.querySelector(".css-input");
+const reset = document.getElementById("reset");
+const htmlCode = htmlInput.value;
+const cssCode = cssInput.value;
+const output = document.querySelector(".output");
+const solution = document.getElementById("solution");
+
+const styleElem = document.createElement("style");
+const headElem = document.querySelector("head");
 headElem.appendChild(styleElem);
 
 function drawOutput() {
@@ -268,16 +282,48 @@ function drawOutput() {
   styleElem.textContent = cssInput.value;
 }
 
-reset.addEventListener("click", function () {
+reset.addEventListener("click", () => {
   htmlInput.value = htmlCode;
   cssInput.value = cssCode;
   drawOutput();
 });
 
-solution.addEventListener("click", function () {
+solution.addEventListener("click", () => {
   htmlInput.value = htmlCode;
-  cssInput.value =
-    "p {\n  font-size: 1.2rem;\n  font-family: sans-serif;\n  line-height: 1.4;\n}\n\na {\n  outline: none;\n  text-decoration: none;\n  padding: 2px 1px 0;\n}\n\na:link {\n  color: #265301;\n}\n\na:visited {\n  color: #437A16;\n}\n\na:focus {\n  border-bottom: 1px solid;\n  background: #BAE498;\n}\n\na:hover {\n  border-bottom: 1px solid;\n  background: #CDFEAA;\n}\n\na:active {\n  background: #265301;\n  color: #CDFEAA;\n}";
+  cssInput.value = `p {
+  font-size: 1.2rem;
+  font-family: sans-serif;
+  line-height: 1.4;
+}
+
+a {
+  outline-color: transparent;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: #265301;
+}
+
+a:visited {
+  color: #437A16;
+}
+
+a:focus {
+  border-bottom: 1px solid;
+  background: #BAE498;
+}
+
+a:hover {
+  border-bottom: 1px solid;
+  background: #CDFEAA;
+}
+
+a:active {
+  background: #265301;
+  color: #CDFEAA;
+}`;
   drawOutput();
 });
 
@@ -286,19 +332,17 @@ cssInput.addEventListener("input", drawOutput);
 window.addEventListener("load", drawOutput);
 ```
 
-{{ EmbedLiveSample('Playable_code', 700, 800) }}
+{{ EmbedLiveSample('Active_learning_Style_your_own_links', 700, 800) }}
 
 ## リンクにアイコンを含める
 
-一般的なやり方は、リンクがどの種類のコンテンツを指しているかに関するより多くの標識を提供するためにリンクにアイコンを含めることです。 外部リンク（他のサイトにつながるリンク）にアイコンを追加する、本当に簡単な例を見てみましょう。 このようなアイコンは、通常、ボックスから出る小さな矢印のように見えます — この例では、[icons8.com からの素晴らしい例](https://icons8.jp/icon/741/external-link)を使います。
+リンクにアイコンを表記することで、リンク先がどのようなコンテンツであるかをより分かりやすく提供するのが一般的です。実に単純な例ですが、外部リンク（他のサイトにつながるリンク）にアイコンを追加する例を見てみましょう。このようなアイコンは、通常、箱から小さな矢印が出ているように見えます。この例では、[icons8.com からの外部リンクアイコン](https://icons8.jp/icon/741/external-link)を使用します。
 
-欲しい効果が得られる HTML と CSS を見てみましょう。 まず、装飾する簡単な HTML です。
+欲しい効果が得られる HTML と CSS を見てみましょう。 まず、スタイル設定する簡単な HTML です。
 
-```html
+```html-nolint
 

-  For more information on the weather, visit our weather page,
-  look at weather on Wikipedia, or check out
-  weather on Extreme Science.
+  天気に関する詳しい情報は、天気のページに行くか、ウィキペディアの天気を見るか、ナショナルジオグラフィックの天気を調べてみてください。
 

 ```
 
@@ -311,70 +355,46 @@ body {
   font-family: sans-serif;
 }
 
-p {
-  line-height: 1.4;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  padding: 2px 1px 0;
-}
-
-a:link {
-  color: blue;
-}
-
-a:visited {
-  color: purple;
-}
-
-a:focus,
-a:hover {
-  border-bottom: 1px solid;
-}
-
-a:active {
-  color: red;
-}
+a[href^="http"]::after {
+  content: "";
+  display: inline-block;
+  width: 0.8em;
+  height: 0.8em;
+  margin-left: 0.25em;
 
-a[href*="http"] {
-  background: url("external-link-52.png") no-repeat 100% 0;
-  background-size: 16px 16px;
-  padding-right: 19px;
+  background-size: 100%;
+  background-image: url("external-link-52.png");
 }
 ```
 
 {{ EmbedLiveSample('Including_icons_on_links', '100%', 150) }}
 
-それでは、ここで何が起こっているのでしょうか？ これまで見てきたのと同じ情報なので、CSS の大部分はスキップします。 しかし最後の規則は興味深いです — ここでは前回の記事の[リストアイテムのカスタム行頭記号](/ja/docs/Learn/CSS/Styling_text/Styling_lists#Using_a_custom_bullet_image)を処理したのと同じ方法で外部リンクにカスタム背景画像を挿入しています — 今回は個々のプロパティの代わりに {{cssxref("background")}} の一括指定を使用します。 挿入したい画像へのパスを設定し、`no-repeat` を指定してコピーを 1 つだけ挿入するようにしてから、テキストコンテンツの右側へ 100%、上から 0 ピクセルの位置を指定します。
-
-また、{{cssxref("background-size")}} を使用して、背景画像を表示するサイズを指定します。 レスポンシブウェブデザインの目的に合わせて、アイコンを大きくしておいて、このようにサイズを変更すると便利です。 ただし、これは IE 9 以降でのみ機能するため、これらの古いブラウザーをサポートする必要がある場合は、画像のサイズを変更しておいて、それをそのまま挿入する必要があります。
+それでは、ここで何が起こっているのでしょうか？ これまで見てきたのと同じ情報なので、CSS の大部分はスキップします。 しかし最後のルールは興味深いもので、{{cssxref("::after")}} 擬似要素を使用しています。`0.8rem x 0.8rem` の擬似要素が、アンカーテキストの後にインライングロックとして置かれています。アイコンは擬似要素の {{cssxref("background")}} として描画されます。
 
-最後に、背景画像を表示するスペースを確保するためにリンクに {{cssxref("padding-right")}} を設定しているので、テキストと重なっていません。
+ここでは[相対的な単位](/ja/docs/Learn/CSS/Building_blocks/Values_and_units#相対長の単位)である `em` を使用しています。アイコンのサイズはアンカーのテキストサイズに比例します。アンカーのテキストサイズが変更された場合、アイコンのサイズもそれに応じて調整されます。
 
-最後の一言 — どのように外部リンクだけを選択したのでしょうか？ あなたが[HTML リンク](/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks)を適切に記述しているのなら、外部リンクには絶対 URL のみを使用しているはずです — 自分のサイトの他の部分にリンクするには（最初のリンクのように）相対リンクを使用するほうが効率的です。 したがって、テキスト "http" は（2 番目と 3 番目のリンクのように）外部リンクにのみ現れ、これを[属性セレクタ](/ja/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors)で選択できます。 `a[href*="http"]` は {{htmlelement("a")}} 要素を選択しますが、"http" を含む値を持つ [`href`](/ja/docs/Web/HTML/Element/a#href) 属性がある場合に限ります。
+最後の一言です。どのように外部リンクだけを選択したのでしょうか？ [HTML のリンク](/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks)を適切に記述しているのなら、絶対 URL を使用しているのは外部リンクだけであるはずです。自分のサイトの他の部分にリンクするには（最初のリンクのように）相対リンクを使用したほうが効率的です。"http" というテキストは（2 番目と 3 番目のリンクのように）外部リンクにのみ現れるので、これを[属性セレクター](/ja/docs/Learn/CSS/Building_blocks/Selectors#属性セレクター)で選択できます。`a[href^="http"]` は {{htmlelement("a")}} 要素のうち、[`href`](/ja/docs/Web/HTML/Element/a#href) 属性が "http" で始まるものに限り選択します。
 
-それでは、これで全部です — 上の能動的学習セクションを再検討して、この新しいテクニックを試してみてください！
+以上です。上のアクティブラーニングの節を再検討して、この新しいテクニックを試してみてください！
 
-> **メモ:** [背景](/ja/docs/Learn/CSS/Styling_boxes)や[レスポンシブウェブデザイン](/ja/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks)にまだ慣れていなくても心配しないでください。 これらは他の場所で説明されています。
+> **メモ:** [背景](/ja/docs/Learn/CSS/Building_blocks)や[レスポンシブウェブデザイン](/ja/docs/Learn/CSS/CSS_layout/Responsive_Design)にまだ慣れていなくても心配しないでください。 これらは他の場所で説明します。
 
-## ボタンとしてのリンクの装飾
+## リンクをボタンとしてスタイル設定
 
-この記事でこれまでに説明したツールは、他の方法でも使用できます。 例えば、ホバーのような状態は、リンクだけでなく、さまざまな要素を装飾するために使用できます — 段落、リスト項目、またはその他のもののホバー状態を装飾することができます。
+この記事でこれまで説明してきたツールは、他にも使用することができます。例えば、ホバーのような状態は、リンクだけでなく、多くの異なる要素をスタイル設定するために使用することができます。段落やリストアイテムなどのホバー状態をスタイル設定することができます。
 
-さらに、リンクは特定の状況下ではボタンのように見えて、そうふるまうように装飾されているのが普通です — ウェブサイトのナビゲーションメニューは通常リンクを含むリストとしてマークアップれており、ユーザーがサイトの他の部分にアクセスできるようにする一連のコントロールボタンやタブのように簡単にスタイル設定できます。 その方法を探りましょう。
+さらに、状況によっては、リンクはボタンのような外見になったり動作したりするようスタイル設定することが一般的です。ウェブサイトのナビゲーションメニューは、一連のリンクとしてマークアップすることができ、これはユーザーにサイトの他の一部へのアクセスを提供する一連のコントロールボタンやタブのように見えるようにスタイル設定することができます。それでは、その方法を探ってみましょう。
 
-まず、いくつかの HTML です。
+まず、いくらかの HTML です。
 
 ```html
-
+
 ```
 
 そして CSS です。
@@ -386,34 +406,25 @@ html {
   font-family: sans-serif;
 }
 
-ul {
-  padding: 0;
-  width: 100%;
-}
-
-li {
-  display: inline;
+.container {
+  display: flex;
+  gap: 0.625%;
 }
 
 a {
-  outline: none;
+  flex: 1;
   text-decoration: none;
-  display: inline-block;
-  width: 19.5%;
-  margin-right: 0.625%;
+  outline-color: transparent;
   text-align: center;
   line-height: 3;
   color: black;
 }
 
-li:last-child a {
-  margin-right: 0;
-}
-
 a:link,
 a:visited,
 a:focus {
-  background: yellow;
+  background: palegoldenrod;
+  color: black;
 }
 
 a:hover {
@@ -421,36 +432,29 @@ a:hover {
 }
 
 a:active {
-  background: red;
+  background: darkred;
   color: white;
 }
 ```
 
 これにより、次のような結果が得られます。
 
-{{ EmbedLiveSample('Styling_links_as_buttons', '100%', 100) }}
-
-最も興味深い部分に焦点を当てて、ここで何が起こっているのかを説明しましょう。
-
-- 2 番目の規則は、{{htmlelement("ul")}} 要素からデフォルトの {{cssxref("padding")}} を削除し、その幅を外側のコンテナ（この場合は {{htmlelement("body")}}）の 100% になるように設定します。
-- {{htmlelement("li")}} 要素は通常デフォルトでブロックです（復習のために [CSS ボックスの種類](/ja/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes)を参照してください）。 つまり、要素はそれぞれ自身のラインに配置されます。 この場合、水平方向のリンクのリストを作成しているので、3 番目の規則で {{cssxref("display")}} プロパティを `inline` に設定します。 これにより、リスト項目は互いに同じラインに配置されます — それらはインライン要素のようにふるまいます。
-- {{htmlelement("a")}} 要素を装飾する 4 番目の規則は、ここで最も複雑です。 ステップバイステップで進みましょう。
-
-  - 前の例と同様に、デフォルトの {{cssxref("text-decoration")}} と {{cssxref("outline")}} をオフにすることから始めます — 見た目を損なうものは欲しくありません。
-  - 次に、{{cssxref("display")}} を `inline-block` に設定します — {{htmlelement("a")}} 要素はデフォルトではインラインですが、ブロックのように、要素を自身のラインからこぼさずに、サイズを変更できるようにしたいのです。 `inline-block` はこれを可能にします。
-  - これからサイズを設定します！ {{htmlelement("ul")}} の全幅を埋め、各ボタンの間には少しマージンを残して（ただし、右端には隙間はありません）、5 つのボタンを配置します。 それらはすべて同じサイズでなければなりません。 これを行うには、{{cssxref("width")}} を 19.5% に設定し、{{cssxref("margin-right")}} を 0.625% に設定します。この幅の合計が 100.625% になることに気付くでしょう。 これは最後のボタンが `