From 0a50d4f58adc9684a80ed5465d87022237c22ab5 Mon Sep 17 00:00:00 2001 From: familyboat <84062528+familyboat@users.noreply.github.com> Date: Tue, 17 Sep 2024 22:37:10 +0800 Subject: [PATCH 001/365] zh-cn: update the translation of the 'javascript' (#23523) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: A1lo --- files/zh-cn/learn/javascript/index.md | 60 +++++++++++++++++---------- 1 file changed, 38 insertions(+), 22 deletions(-) diff --git a/files/zh-cn/learn/javascript/index.md b/files/zh-cn/learn/javascript/index.md index 5be08ad26ba936..b5ff0304fe918a 100644 --- a/files/zh-cn/learn/javascript/index.md +++ b/files/zh-cn/learn/javascript/index.md @@ -1,47 +1,63 @@ --- -title: JavaScript +title: JavaScript——动态客户端脚本语言 slug: Learn/JavaScript +l10n: + sourceCommit: 70f49e78d0f6830748fcaa490d98b4ae3e2da161 --- {{LearnSidebar}} -{{Glossary("JavaScript")}} 编程语言允许你在 Web 页面上实现复杂的功能。如果你看到一个网页不仅仅显示静态的信息，而是显示依时间更新的内容，或者交互式地图，或者 2D/3D 动画图像，或者滚动的视频播放器，等等——你基本可以确定，这需要 JavaScript 的参与。 +{{Glossary("JavaScript")}} 是一种允许你在网页上实现复杂功能的编程语言。每次网页不仅仅只是显示静态信息——而是显示及时的内容更新、交互式地图、2D/3D 动画图形、滚动的视频播放器，等等——你都可以打赌 JavaScript 可能参与其中。 -## 学习路线 +## 前提 -很多人认为，与相关技术如 [HTML](/zh-CN/docs/Learn/HTML) 和 [CSS](/zh-CN/docs/Learn/CSS) 相比，学习 JavaScript 更为困难。在尝试学习 JavaScript 之前，我们强烈建议你首先至少熟悉上述这两种技术，一些其他知识可能也会有帮助。你可以从以下模块开始学习之旅： +JavaScript 可以说比相关技术（如 [HTML](/zh-CN/docs/Learn/HTML) 和 [CSS](/zh-CN/docs/Learn/CSS)）更难学习。在尝试学习 JavaScript 之前，强烈建议你首先至少熟悉这两种技术，甚至其他技术。请先学习以下模块： -- [开始了解 Web](/zh-CN/docs/Learn/Getting_started_with_the_web) -- [HTML 入门](/zh-CN/docs/Web/Guide/HTML/Introduction) -- [CSS 入门](/zh-CN/docs/Learn/CSS/Introduction_to_CSS) +- [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web) +- [HTML 简介](/zh-CN/docs/Learn/HTML/Introduction_to_HTML) +- [CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps) -拥有其他编程语言的经验也许会有帮助。 +拥有其他编程语言的经验也可能会有所帮助。 -熟悉 JavaScript 的基本概念之后，你将具备学习更多高级主题的能力，比如这些： +熟悉 JavaScript 的基础知识后，你应该能够学习更高级的主题，例如： -- 深入理解 JavaScript，如 [JavaScript 指南](/zh-CN/docs/Web/JavaScript/Guide)中的内容 -- [Web APIs](/zh-CN/docs/Web/API) +- 深入 JavaScript，如我们的 [JavaScript 指南](/zh-CN/docs/Web/JavaScript/Guide)所教授的 +- [Web API](/zh-CN/docs/Web/API) ## 模块 -本主题包含以下模块，我们建议你按照下列顺序阅读。 +> [!CALLOUT] +> +> **我们对现代 JavaScript 的政策** +> +> JavaScript 是一种不断发展的语言，多年来发生了很大变化。特别是在 2015 年引入的第 6 版（有时称为 ECMAScript 2015 或 ES6），增加了许多新特性。与此同时，为了保持与旧网站的向后兼容性，即使不再被认为是好的实践，语言的旧特性也被保留了下来。 +> +> 我们认为，ECMAScript 2015 及后续版本中添加到 JavaScript 的特性使开发人员能够编写更易读、可靠和富有表现力的代码，因此了解它们很重要。 +> +> 我们在这门课程中教授的是稳定的并且多年来一直受到所有主要浏览器支持的特性。 + +本主题包含以下模块，建议按顺序学习。 - [JavaScript 第一步](/zh-CN/docs/Learn/JavaScript/First_steps) - - : 作为 JavaScript 学习的第一个模块，在开始编写第一段代码之前，我们首先回答一些基础的问题，比如“JavaScript 是什么？”、“它的代码长什么样？”、以及“它能做什么？”。之后我们会详细讨论一些 JavaScript 的关键功能，比如变量、字符串、数字、数组等。 -- [构建 JavaScript 代码块](/zh-CN/docs/Learn/JavaScript/Building_blocks) - - : 在这个模块中，我们继续介绍 JavaScript 的关键的基础功能，并逐渐将注意力转移到常见类型的代码块，比如条件语句、循环、函数、以及事件等。你应该已经遇到过这些概念，而这里我们将正式学习。 -- [JavaScript 对象初识](/zh-CN/docs/Learn/JavaScript/Objects) - - : 在 JavaScript 中，绝大多数东西都是对象；从作为 JavaScript 核心功能的字符串和数组，到建立在 JavaScript 之上的浏览器 API，无一不是对象。你甚至可以自己创建对象，将相关的函数和变量封装打包。想要进一步学习 JavaScript 语言知识、写出高效的代码的话，理解这种面向对象的特性是必不可少的。这个模块将帮助你了解“对象”，我们将详细介绍对象的设计思想和语法、如何创建对象，并解释 JSON 数据是什么、如何使用。 + - : 在第一个 JavaScript 模块中，我们首先回答一些基本问题，例如“什么是 JavaScript？”、“它看起来是什么样的？”和“它能做什么？”，然后带你体验第一次实际编写 JavaScript。之后，我们将详细讨论一些关键的 JavaScript 特性，如变量、字符串、数字和数组。 +- [创建 JavaScript 代码块](/zh-CN/docs/Learn/JavaScript/Building_blocks) + - : 在这个模块中，我们将继续涵盖所有 JavaScript 的关键基础特性，重点关注常见的代码块类型，如条件语句、循环、函数和事件。你已经在课程中看到了这些内容，但只是顺便提及——在这里我们将明确讨论它们。 +- [介绍 JavaScript 对象](/zh-CN/docs/Learn/JavaScript/Objects) + - : 在 JavaScript 中，大多数东西都是对象，从 JavaScript 核心特性（如字符串和数组）到构建在 JavaScript 之上的浏览器 API。你甚至可以创建自己的对象，将相关的函数和变量封装起来。如果你想进一步提高对语言的了解并编写更高效的代码，理解 JavaScript 的面向对象特性非常重要，因此我们提供了这个模块来帮助你。在这里，我们将详细教授对象理论和语法，看看如何创建你自己的对象，并解释 JSON 数据是什么以及如何使用它。 - [异步 JavaScript](/zh-CN/docs/Learn/JavaScript/Asynchronous) - - : 这个模块介绍异步 JavaScript：为什么重要，如何用它来处理 可能引起阻塞的操作（比如从服务器获取资源） + - : 在这个模块中，我们将了解异步 JavaScript，为什么它很重要，以及如何使用它有效地处理潜在的阻塞操作（如从服务器获取资源）。 - [客户端 Web API](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs) - - : 为网站或应用编写客户端 JavaScript 脚本时，你很难不用到 Web API 接口。这些接口允许你一定程度上操纵网页所运行在的浏览器和操作系统、甚至来自其他网站和服务的数据。在这个模块中，我们将了解有哪些 API，并学习使用开发过程中最常见的 API。 + - : 在为网站或应用程序编写客户端 JavaScript 时，你很快就会开始使用 API——用于操作浏览器和操作系统不同方面的接口，或者甚至是从其他网站或服务获取数据。在这个模块中，我们将探讨 API 是什么，以及如何使用一些你经常遇到的常见 API。 ## 解决常见的 JavaScript 问题 -[解决常见的 JavaScript 问题](/zh-CN/docs/Learn/JavaScript/Howto) 提供一些链接，解释如何使用 JavaScript 来解决创建网页时非常常见的问题。 +[解决 JavaScript 代码中常见的问题](/zh-CN/docs/Learn/JavaScript/Howto)提供了一些帮助你避免常见的 JavaScript 编程错误的建议，并提供了许多有用的展示如何解决常见的 JavaScript 编程问题的链接。 ## 参见 -- [Coding math](https://www.youtube.com/user/codingmath) - - : 由 [Keith Peters](https://twitter.com/bit101) 制作的一个优秀的视频教程系列，向你传授高效编程所需的必备技能。 +- [MDN 上的 JavaScript](/zh-CN/docs/Web/JavaScript) + - : 这是 MDN 上核心 JavaScript 文档的主要入口——在这里你将找到关于 JavaScript 语言所有方面的广泛参考文档，以及一些针对有经验的 JavaScript 开发人员的高级教程。 +- [学习 JavaScript](https://learnjavascript.online/) + - : 非常适合有抱负的 Web 开发人员的优秀资源——在交互式环境中通过自动评估引导的短课程和交互式测试学习 JavaScript。前 40 节课是免费的。 +- [编码数学](https://www.youtube.com/user/codingmath) + - : 一个由 [Keith Peters](https://www.bit-101.com/2017/about-me/) 创建的优秀的视频教程系列，教你成为高效的程序员所需的数学知识。 From cf1a2a2672a320313888007efc9db17d9db2cf2e Mon Sep 17 00:00:00 2001 From: familyboat <84062528+familyboat@users.noreply.github.com> Date: Tue, 17 Sep 2024 22:41:03 +0800 Subject: [PATCH 002/365] zh-cn: update the translation of the 'MathML' (#23521) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/zh-cn/learn/mathml/index.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/files/zh-cn/learn/mathml/index.md b/files/zh-cn/learn/mathml/index.md index e1c0559e3270c0..a7d6d12a2de163 100644 --- a/files/zh-cn/learn/mathml/index.md +++ b/files/zh-cn/learn/mathml/index.md @@ -1,6 +1,8 @@ --- title: 使用 MathML 编写数学公式 slug: Learn/MathML +l10n: + sourceCommit: 865acb22b74a49927b98267566369d4677414f53 --- {{LearnSidebar}} @@ -16,13 +18,13 @@ slug: Learn/MathML - [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web) - [HTML 简介](/zh-CN/docs/Learn/HTML/Introduction_to_HTML) -- [CSS 入门](/zh-CN/docs/Learn/CSS/First_steps) +- [CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps) 尽管所需的概念将根据需要进行解释，但对数学符号和 [TeX](https://zh.wikipedia.org/wiki/TeX) 渲染规则有一定的了解可能会对你有帮助。 ## 模块 -- [MathML 入门](/zh-CN/docs/Learn/MathML/First_steps) +- [MathML 第一步](/zh-CN/docs/Learn/MathML/First_steps) - : MathML 是用于在网页中编写数学公式的标记语言。该模块将以比较轻松的方式开始你的 MathML 掌握之旅，介绍其工作原理、语法以及如何在 HTML 中开始使用它。 ## 参见 From dfa3197386a38309fda32d2bff029069f2fb2d28 Mon Sep 17 00:00:00 2001 From: A1lo Date: Wed, 18 Sep 2024 08:25:42 +0800 Subject: [PATCH 003/365] chore(zh-cn): add language tags for fenced codes (part 4) (#23300) --- files/zh-cn/.markdownlint.jsonc | 21 ++++++ files/zh-cn/web/api/mediaquerylist/index.md | 19 ----- files/zh-cn/web/api/node/index.md | 6 -- files/zh-cn/web/api/uievent/which/index.md | 8 +- .../web/css/-webkit-touch-callout/index.md | 12 +-- files/zh-cn/web/css/_colon_target/index.md | 2 +- files/zh-cn/web/css/_colon_where/index.md | 14 ++-- .../web/css/_doublecolon_backdrop/index.md | 6 +- files/zh-cn/web/css/_doublecolon_cue/index.md | 6 +- .../web/css/_doublecolon_selection/index.md | 9 +-- files/zh-cn/web/css/attr/index.md | 13 +++- .../web/css/background-blend-mode/index.md | 21 ++++-- .../zh-cn/web/css/background-origin/index.md | 35 +++++---- .../web/css/background-position/index.md | 6 +- .../web/css/border-image-outset/index.md | 38 ++++++---- .../web/css/border-image-repeat/index.md | 41 +++++++---- files/zh-cn/web/css/clear/index.md | 8 +- files/zh-cn/web/css/clip/index.md | 30 +++++--- .../css/color-interpolation-method/index.md | 4 +- files/zh-cn/web/css/content/index.md | 73 +++++++++++++------ files/zh-cn/web/css/counter/index.md | 18 ++--- .../using_css_counters/index.md | 4 +- .../using_media_queries/index.md | 2 +- .../stacking_context/index.md | 40 ++++++---- files/zh-cn/web/css/cursor/index.md | 2 +- files/zh-cn/web/css/element/index.md | 2 +- .../css/filter-function/drop-shadow/index.md | 24 +++++- files/zh-cn/web/css/hex-color/index.md | 2 +- .../web/css/hue-interpolation-method/index.md | 2 +- .../zh-cn/web/css/image-orientation/index.md | 32 ++++---- files/zh-cn/web/css/image/index.md | 29 +++++--- files/zh-cn/web/css/mix-blend-mode/index.md | 12 ++- files/zh-cn/web/css/outline/index.md | 40 ++++++---- files/zh-cn/web/css/time/index.md | 2 +- .../css/transform-function/matrix3d/index.md | 4 +- .../transform-function/perspective/index.md | 6 +- .../css/transform-function/rotate/index.md | 2 +- .../css/transform-function/rotate3d/index.md | 2 +- .../css/transform-function/rotatex/index.md | 2 +- .../css/transform-function/rotatey/index.md | 2 +- .../css/transform-function/rotatez/index.md | 2 +- .../web/css/transform-function/skew/index.md | 2 +- files/zh-cn/web/css/word-break/index.md | 11 ++- files/zh-cn/web/http/caching/index.md | 4 +- .../corsalloworiginnotmatchingorigin/index.md | 4 +- .../errors/corsmissingalloworigin/index.md | 8 +- files/zh-cn/web/http/headers/cookie/index.md | 4 +- .../zh-cn/web/http/headers/expect-ct/index.md | 4 +- files/zh-cn/web/http/headers/origin/index.md | 2 +- .../permissions-policy/camera/index.md | 4 +- files/zh-cn/web/http/status/404/index.md | 4 +- .../guide/indexed_collections/index.md | 2 +- .../guide/loops_and_iteration/index.md | 2 +- .../deprecated_and_obsolete_features/index.md | 2 +- .../errors/not_a_valid_code_point/index.md | 2 +- .../object/constructor/index.md | 2 +- .../global_objects/regexp/exec/index.md | 2 +- .../reference/iteration_protocols/index.md | 2 +- files/zh-cn/web/uri/schemes/data/index.md | 2 +- 59 files changed, 405 insertions(+), 261 deletions(-) diff --git a/files/zh-cn/.markdownlint.jsonc b/files/zh-cn/.markdownlint.jsonc index cb48f009c18eba..6ef149968c88f4 100644 --- a/files/zh-cn/.markdownlint.jsonc +++ b/files/zh-cn/.markdownlint.jsonc @@ -3,6 +3,7 @@ "no-trailing-punctuation": { "punctuation": ".,;:。，", }, + "fenced-code-language": true, "search-replace": { "rules": [ { @@ -73,6 +74,26 @@ "searchPattern": "/您/g", "searchScope": "text", }, + { + "name": "text-code-fence", + "message": "Use 'plain' tag", + "searchPattern": "/(^ *`{3,})(text|none|unix)/gm", + "replace": "$1plain", + "searchScope": "text", + }, + { + "name": "gfm-alert", + "message": "Use the GFM syntax: https://developer.mozilla.org/zh-CN/docs/MDN/Writing_guidelines/Howto/Markdown_in_MDN#备注、警告和标注", + "searchPattern": "/^ *> \\*\\*(Note|Warning|Callout):\\*\\*(?! [[{`_*])/gm", + "searchScope": "text", + }, + { + "name": "bad-gfm-alert", + "message": "Use the correct GFM syntax: `> [!NOTE]`", + // TODO this should use the modifier syntax; until it has better Node support + "searchPattern": "/^ *> !?\\[!?((?!NOTE)[Nn][Oo][Tt][Ee]|(?!WARNING)[Ww][Aa][Rr][Nn][Ii][Nn][Gg]|(?!CALLOUT)[Cc][Aa][Ll][Ll][Oo][Uu][Tt])\\]\\n|^ *> (?!\\[!)!?\\[!?(NOTE|WARNING|CALLOUT)\\]\\n/gm", + "searchScope": "text", + }, ], }, } diff --git a/files/zh-cn/web/api/mediaquerylist/index.md b/files/zh-cn/web/api/mediaquerylist/index.md index 58d6416be5841b..56229f85642473 100644 --- a/files/zh-cn/web/api/mediaquerylist/index.md +++ b/files/zh-cn/web/api/mediaquerylist/index.md @@ -9,13 +9,6 @@ slug: Web/API/MediaQueryList 如果你需要以编程方式来检测一个 document 上的媒体查询的值的变化，这个 `MediaQueryList` 对象使得通过观察其 document 而检测它的媒体查询的值的变化成为可能，而不是周期性地对这些媒体查询的值进行检查。 -## 方法概述 - -``` -void addListener(MediaQueryListListener listener); -void removeListener(MediaQueryListListener listener); -``` - ## 实例属性 _`MediaQueryList` 接口从它的父接口 {{DOMxRef("EventTarget")}} 继承了属性。_ @@ -31,12 +24,6 @@ _`MediaQueryList` 接口从它的父接口 {{DOMxRef("EventTarget")}} 继承了 在媒体查询列表上增加一个新的监听器，如果列表中已经存在了这个指定的监听器，这个方法将失去作用。 -``` -void addListener( - MediaQueryListListener listener -); -``` - #### 参数 ( 针对 addListener 方法) - `listener` @@ -46,12 +33,6 @@ void addListener( 从媒体查询列表中移除一个监听器，如果列表中不存在这个指定的监听器，则这个方法将失去作用。 -``` -void removeListener( - MediaQueryListListener listener -); -``` - #### 参数 (针对 removeListener 方法) - `listener` diff --git a/files/zh-cn/web/api/node/index.md b/files/zh-cn/web/api/node/index.md index 54bbf394d102b2..956f114e8a6e2a 100644 --- a/files/zh-cn/web/api/node/index.md +++ b/files/zh-cn/web/api/node/index.md @@ -182,12 +182,6 @@ function eachNode(rootNode, callback) { } ``` -#### 语法 - -``` -eachNode(rootNode, callback); -``` - #### 描述 使用递归的方式对 `rootNode` 的所有后代节点执行回调函数（包括 `rootNode` 自身） diff --git a/files/zh-cn/web/api/uievent/which/index.md b/files/zh-cn/web/api/uievent/which/index.md index 50395809cd8078..492969a520ded6 100644 --- a/files/zh-cn/web/api/uievent/which/index.md +++ b/files/zh-cn/web/api/uievent/which/index.md @@ -7,13 +7,7 @@ slug: Web/API/UIEvent/which {{domxref("KeyboardEvent")}} 接口的 **`which`** 只读属性返回所按下键的数字 `keyCode` 或所按下字母数字键的字符代码 (`charCode`) 。 -## 语法 - -``` -var keyResult = event.which; -``` - -### 返回值 +## 值 - `keyResult` contains the numeric code for a particular key pressed, depending on whether an alphanumeric or non-alphanumeric key was pressed. Please see {{domxref("KeyboardEvent.charCode")}} and {{domxref("KeyboardEvent.keyCode")}} for more details. diff --git a/files/zh-cn/web/css/-webkit-touch-callout/index.md b/files/zh-cn/web/css/-webkit-touch-callout/index.md index c1565508e3de90..29ac876d2f0f89 100644 --- a/files/zh-cn/web/css/-webkit-touch-callout/index.md +++ b/files/zh-cn/web/css/-webkit-touch-callout/index.md @@ -13,16 +13,16 @@ slug: Web/CSS/-webkit-touch-callout ## 语法 -``` -Formal syntax: default | none -``` - ```css --webkit-touch-callout: default; /* displays the callout */ --webkit-touch-callout: none; /* disables the callout */ +/* 关键字值 */ +-webkit-touch-callout: default; +-webkit-touch-callout: none; +/* 全局值 */ -webkit-touch-callout: initial; -webkit-touch-callout: inherit; +-webkit-touch-callout: revert; +-webkit-touch-callout: revert-layer; -webkit-touch-callout: unset; ``` diff --git a/files/zh-cn/web/css/_colon_target/index.md b/files/zh-cn/web/css/_colon_target/index.md index 79b3a0d5dd1f7f..c5cb03ece4a580 100644 --- a/files/zh-cn/web/css/_colon_target/index.md +++ b/files/zh-cn/web/css/_colon_target/index.md @@ -16,7 +16,7 @@ slug: Web/CSS/:target 例如，以下 URL 具有一个片段（由 # 符号表示），指向名为 `section2` 的元素： -``` +```url http://www.example.com/index.html#section2 ``` diff --git a/files/zh-cn/web/css/_colon_where/index.md b/files/zh-cn/web/css/_colon_where/index.md index 3a1d63517a956d..f7d4951a3e97a1 100644 --- a/files/zh-cn/web/css/_colon_where/index.md +++ b/files/zh-cn/web/css/_colon_where/index.md @@ -26,6 +26,14 @@ footer p:hover { `:where()` 和 {{CSSxRef(":is", ":is()")}} 的不同之处在于，`:where()` 的[优先级](/zh-CN/docs/Web/CSS/Specificity)总是为 0，但是 `:is()` 的优先级是由它的选择器列表中优先级最高的[选择器](/zh-CN/docs/Glossary/CSS_Selector)决定的。 +## 语法 + +```css-nolint +:where() { + /* ... */ +} +``` + ### 可容错选择器解析 规范将 `:is()` 和 `:where()` 定义为接受一个[可容错选择器列表](https://drafts.csswg.org/selectors-4/#typedef-forgiving-selector-list)。 @@ -143,12 +151,6 @@ footer a { {{EmbedLiveSample('示例', '100%', 600)}} -## 语法 - -``` -:where( ) -``` - ## 规范 {{Specifications}} diff --git a/files/zh-cn/web/css/_doublecolon_backdrop/index.md b/files/zh-cn/web/css/_doublecolon_backdrop/index.md index e28d1c9d9a79da..9108da5cf1b992 100644 --- a/files/zh-cn/web/css/_doublecolon_backdrop/index.md +++ b/files/zh-cn/web/css/_doublecolon_backdrop/index.md @@ -20,8 +20,10 @@ dialog::backdrop { ## 语法 -``` -::backdrop +```css +::backdrop { + /* ... */ +} ``` ## 示例 diff --git a/files/zh-cn/web/css/_doublecolon_cue/index.md b/files/zh-cn/web/css/_doublecolon_cue/index.md index 19c2873ab6f4c0..d9848efe9cbb1c 100644 --- a/files/zh-cn/web/css/_doublecolon_cue/index.md +++ b/files/zh-cn/web/css/_doublecolon_cue/index.md @@ -26,8 +26,10 @@ slug: Web/CSS/::cue ## 语法 -``` -::cue | ::cue( ) +```css-nolint +::cue | ::cue() { + /* ... */ +} ``` ## 示例 diff --git a/files/zh-cn/web/css/_doublecolon_selection/index.md b/files/zh-cn/web/css/_doublecolon_selection/index.md index f2b32e411f6b5b..2a7303899e6081 100644 --- a/files/zh-cn/web/css/_doublecolon_selection/index.md +++ b/files/zh-cn/web/css/_doublecolon_selection/index.md @@ -31,11 +31,10 @@ slug: Web/CSS/::selection ## 语法 -``` -/* Legacy Firefox syntax (version 61 and below) */ -::-moz-selection - -{{CSSSyntax}} +```css +::selection { + /* ... */ +} ``` ## 示例 diff --git a/files/zh-cn/web/css/attr/index.md b/files/zh-cn/web/css/attr/index.md index 58d61216bef0bb..9257cdcb5801ae 100644 --- a/files/zh-cn/web/css/attr/index.md +++ b/files/zh-cn/web/css/attr/index.md @@ -17,8 +17,17 @@ CSS 表达式 `attr()` 用来获取选择到的元素的某一 HTML 属性值， ## 语法 -``` -语法：attr( attribute-name ? [, ]? ) +```css +/* 关键字值 */ +-webkit-touch-callout: default; +-webkit-touch-callout: none; + +/* 全局值 */ +-webkit-touch-callout: initial; +-webkit-touch-callout: inherit; +-webkit-touch-callout: revert; +-webkit-touch-callout: revert-layer; +-webkit-touch-callout: unset; ``` ### 解释 diff --git a/files/zh-cn/web/css/background-blend-mode/index.md b/files/zh-cn/web/css/background-blend-mode/index.md index 066ac355cbc7dc..55a2bf6c3b1a06 100644 --- a/files/zh-cn/web/css/background-blend-mode/index.md +++ b/files/zh-cn/web/css/background-blend-mode/index.md @@ -15,19 +15,18 @@ slug: Web/CSS/background-blend-mode ## 语法 -``` -Formal syntax: {{csssyntax("background-blend-mode")}} -``` - -``` +```css /* 单值 */ background-blend-mode: normal; -/* 双值，每个背景一个值 */ +/* 双值，一个值对应一个背景 */ background-blend-mode: darken, luminosity; -background-blend-mode: initial; +/* 全局值 */ background-blend-mode: inherit; +background-blend-mode: initial; +background-blend-mode: revert; +background-blend-mode: revert-layer; background-blend-mode: unset; ``` @@ -36,6 +35,14 @@ background-blend-mode: unset; - {{cssxref("<blend-mode>")}} - : 一个定义混合的模式，可以有多个值，用逗号间隔。 +## 形式定义 + +{{cssinfo}} + +## 形式语法 + +{{csssyntax}} + ## 示例 ```html hidden diff --git a/files/zh-cn/web/css/background-origin/index.md b/files/zh-cn/web/css/background-origin/index.md index dde1de731b09d5..80edbbd1e18061 100644 --- a/files/zh-cn/web/css/background-origin/index.md +++ b/files/zh-cn/web/css/background-origin/index.md @@ -14,20 +14,20 @@ slug: Web/CSS/background-origin > [!NOTE] > 假如{{cssxref("background")}}简写中没有设置该值，那么在 background 简写值后指定 background-origin，那么后面的值就会覆盖简写值，其实说白了，就是后出现的值会覆盖前面的值。 -{{cssinfo}} - ## 语法 -``` -Formal syntax: {{csssyntax("background-origin")}} -``` - -``` -background-origin: border-box -background-origin: padding-box -background-origin: content-box - -background-origin: inherit +```css +/* 关键字值 */ +background-origin: border-box; +background-origin: padding-box; +background-origin: content-box; + +/* 全局值 */ +background-origin: inherit; +background-origin: initial; +background-origin: revert; +background-origin: revert-layer; +background-origin: unset; ``` ### 属性值 @@ -39,12 +39,15 @@ background-origin: inherit - `content-box` - : 背景图片的摆放以 content 区域为参考 -### 形式化语法 +## 形式语法 + +{{cssinfo}} + +## 形式定义 -[How to read CSS syntax.](/zh-CN/docs/Web/CSS/Value_definition_syntax) -{{csssyntax("background-origin")}} +{{csssyntax}} -## 例子 +## 示例 ```css .example { diff --git a/files/zh-cn/web/css/background-position/index.md b/files/zh-cn/web/css/background-position/index.md index 4e3a127c8f50d7..96f78e5b3e3990 100644 --- a/files/zh-cn/web/css/background-position/index.md +++ b/files/zh-cn/web/css/background-position/index.md @@ -84,20 +84,20 @@ background-position: unset; 基本上发生的情况是从相应的容器尺寸中*减去*背景图像尺寸，然后将结果值的百分比用作从左（或顶部）边界的直接偏移量。 -``` +```plain (container width - image width) * (position x%) = (x offset value) (container height - image height) * (position y%) = (y offset value) ``` 以 X 轴为例，假设我们有一个 300px 宽的图像，我们在一个 100px 宽的容器中使用它，`background-size` 设置为 `auto`： -``` +```plain 100px - 300px = -200px (container & image difference) ``` 因此，位置百分比为 -25%、0%、50%、100%、125%，我们得到这些图像到容器边界偏移值： -``` +```plain -200px * -25% = 50px -200px * 0% = 0px -200px * 50% = -100px diff --git a/files/zh-cn/web/css/border-image-outset/index.md b/files/zh-cn/web/css/border-image-outset/index.md index b148d0fbfcc705..8e28dca7620e77 100644 --- a/files/zh-cn/web/css/border-image-outset/index.md +++ b/files/zh-cn/web/css/border-image-outset/index.md @@ -9,28 +9,30 @@ slug: Web/CSS/border-image-outset `border-image-outset` 属性定义边框图像可超出边框盒的大小。 -{{cssinfo}} - ## 语法 -``` -Formal syntax: {{csssyntax("border-image-outset")}} -``` +```css +/* 值 */ +border-image-outset: 1rem; -``` -/* border-image-outset: sides */ -border-image-outset: 30%; +/* 值 */ +border-image-outset: 1.5; -/* border-image-outset:垂直 水平 */ -border-image-outset: 10% 30%; +/* 上、下 | 左、右 */ +border-image-outset: 1 1.2; -/* border-image-outset: 顶 水平 底 */ -border-image-outset: 30px 30% 45px; +/* 上 | 左、右 | 下 */ +border-image-outset: 30px 2 45px; -/* border-image-outset:顶 右 底 左 */ +/* 上 | 右 | 下 | 左 */ border-image-outset: 7px 12px 14px 5px; -border-image-repeat: inherit; +/* 全局值值 */ +border-image-outset: inherit; +border-image-outset: initial; +border-image-outset: revert; +border-image-outset: revert-layer; +border-image-outset: unset; ``` ### 值 @@ -52,6 +54,14 @@ border-image-repeat: inherit; - `inherit` - : 四个方向的值都继承于父元素的该属性计算后值。 +## 形式定义 + +{{CSSInfo}} + +## 形式语法 + +{{csssyntax}} + ## 规范 {{Specifications}} diff --git a/files/zh-cn/web/css/border-image-repeat/index.md b/files/zh-cn/web/css/border-image-repeat/index.md index 4a90f193cfa7e5..d8e753384ffe79 100644 --- a/files/zh-cn/web/css/border-image-repeat/index.md +++ b/files/zh-cn/web/css/border-image-repeat/index.md @@ -7,22 +7,27 @@ slug: Web/CSS/border-image-repeat `border-image-repeat` 定义图片如何填充边框。或为单个值，设置所有的边框；或为两个值，分别设置水平与垂直的边框。 -{{cssinfo}} +## 语法 -## Syntax +```css +/* 关键字值 */ +border-image-repeat: stretch; +border-image-repeat: repeat; +border-image-repeat: round; +border-image-repeat: space; -``` -Formal syntax: {{csssyntax("border-image-repeat")}} -``` - -``` -border-image-repeat: type /* One-value syntax */ E.g. border-image-value: stretch; -border-image-repeat: horizontal vertical /* Two-value syntax */ E.g. border-image-width: round space; +/* 上、下 | 左、右 */ +border-image-repeat: round stretch; -border-image-repeat: inherit +/* 全局值 */ +border-image-repeat: inherit; +border-image-repeat: initial; +border-image-repeat: revert; +border-image-repeat: revert-layer; +border-image-repeat: unset; ``` -### Values +### 值 - _type_ - : `stretch`, `repeat`, `round`, `space` 选一。属于单个值的情况。 @@ -41,14 +46,22 @@ border-image-repeat: inherit - `inherit` - : 继承父级元素的计算值。 -## Examples +## 形式定义 + +{{CSSInfo}} + +## 形式语法 + +{{csssyntax}} + +## 示例 不同的取值，查看 {{cssxref("border-image")}} 的示例。 -## Specifications +## 规范 {{Specifications}} -## Browser compatibility +## 浏览器兼容性 {{Compat}} diff --git a/files/zh-cn/web/css/clear/index.md b/files/zh-cn/web/css/clear/index.md index 33a593cb61469d..525febe434d436 100644 --- a/files/zh-cn/web/css/clear/index.md +++ b/files/zh-cn/web/css/clear/index.md @@ -28,8 +28,8 @@ slug: Web/CSS/clear ## 语法 -``` -/* Keyword values */ +```css +/* 关键字值 */ clear: none; clear: left; clear: right; @@ -37,9 +37,11 @@ clear: both; clear: inline-start; clear: inline-end; -/* Global values */ +/* 全局值 */ clear: inherit; clear: initial; +clear: revert; +clear: revert-layer; clear: unset; ``` diff --git a/files/zh-cn/web/css/clip/index.md b/files/zh-cn/web/css/clip/index.md index 3f0d23b0c58692..6d061e4b7c9d5a 100644 --- a/files/zh-cn/web/css/clip/index.md +++ b/files/zh-cn/web/css/clip/index.md @@ -12,17 +12,21 @@ slug: Web/CSS/clip > [!WARNING] > 这个属性已被废弃。建议使用 {{cssxref("clip-path")}} 。 -{{cssinfo}} - ## 语法 -[形式语法](/zh-CN/docs/CSS/Value_definition_syntax): {{csssyntax("clip")}} - -``` -clip: rect(1px, 10em, 3rem, 2ch) -clip: auto - -clip: inherit +```css +/* 关键字值 */ +clip: auto; + +/* 值 */ +clip: rect(1px, 10em, 3rem, 2ch); + +/* 全局值 */ +clip: inherit; +clip: initial; +clip: revert; +clip: revert-layer; +clip: unset; ``` ### 值 @@ -47,6 +51,14 @@ clip: inherit - `auto` - : 元素不裁剪 (默认值) +## 形式定义 + +{{cssinfo}} + +## 形式语法 + +{{csssyntax}} + ## 示例 ### 裁剪图像 diff --git a/files/zh-cn/web/css/color-interpolation-method/index.md b/files/zh-cn/web/css/color-interpolation-method/index.md index 110efeb50f138b..a4efad8c1093d8 100644 --- a/files/zh-cn/web/css/color-interpolation-method/index.md +++ b/files/zh-cn/web/css/color-interpolation-method/index.md @@ -13,9 +13,9 @@ slug: Web/CSS/color-interpolation-method `` 指定了插值应使用直角坐标颜色空间还是带可选色相插值方法的极坐标颜色空间： -``` +```plain in -/* 或者 */ +// 或者 in [ ] ``` diff --git a/files/zh-cn/web/css/content/index.md b/files/zh-cn/web/css/content/index.md index 2056bdd29ef42a..c3236a92026edd 100644 --- a/files/zh-cn/web/css/content/index.md +++ b/files/zh-cn/web/css/content/index.md @@ -9,30 +9,51 @@ slug: Web/CSS/content CSS 的 `content` CSS 属性用于在元素的 {{ cssxref("::before") }} 和 {{ cssxref("::after") }} 伪元素中插入内容。使用 `content` 属性插入的内容都是匿名的[_可替换元素_](/zh-CN/docs/Web/CSS/Replaced_element)。 -{{cssinfo}} - ## 语法 -``` -Formal syntax: {{csssyntax("content")}} -``` - -``` -content: normal /* Keywords that cannot be combined with other values */ -content: none - -content: 'prefix' /* value, non-latin characters must be encoded e.g. \00A0 for   */ -content: url(http://www.example.com/test.html) /* value */ -content: chapter_counter /* values */ -content: attr(value string) /* attr() value linked to the HTML attribute value */ -content: open-quote /* Language- and position-dependant keywords */ -content: close-quote -content: no-open-quote -content: no-close-quote - -content: open-quote chapter_counter /* Except for normal and none, several values can be used simultaneously */ - -content: inherit +```css +/* 不能与其他值组合的关键字 */ +content: normal; +content: none; + +/* ： 值 */ +content: url("http://www.example.com/test.png"); +content: linear-gradient(#e66465, #9198e5); +content: image-set("image1x.png" 1x, "image2x.png" 2x); + +/* 语音输出：“/”后为替代文本 */ +content: url("../img/test.png") / "这是替代文本"; + +/* 值 */ +content: "unparsed text"; + +/* 值，后跟可选的 */ +content: counter(chapter_counter); +content: counter(chapter_counter, upper-roman); +content: counters(section_counter, "."); +content: counters(section_counter, ".", decimal-leading-zero); + +/* attr() 值会链接到 HTML 属性值 */ +content: attr(href); + +/* 值 */ +content: open-quote; +content: close-quote; +content: no-open-quote; +content: no-close-quote; + +/* ：content 值的列表。 +可以同时使用多个值 */ +content: "prefix" url(http://www.example.com/test.png); +content: "prefix" url("/img/test.png") "suffix" / "Alt text"; +content: open-quote counter(chapter_counter); + +/* 全局值 */ +content: inherit; +content: initial; +content: revert; +content: revert-layer; +content: unset; ``` ### 值 @@ -54,6 +75,14 @@ content: inherit - `no-open-quote` | `no-close-quote` - : 不会生产任何内容，但是会改变（增加或降低）引号层级。 +## 形式定义 + +{{cssinfo}} + +## 形式语法 + +{{csssyntax}} + ## 示例 ### 标题和引号 diff --git a/files/zh-cn/web/css/counter/index.md b/files/zh-cn/web/css/counter/index.md index 6b704b83d6a19a..09dd26a8c5abfe 100644 --- a/files/zh-cn/web/css/counter/index.md +++ b/files/zh-cn/web/css/counter/index.md @@ -23,6 +23,14 @@ counter(countername, upper-roman) ## 语法 +```css +/* 简单的用法 */ +counter(countername); + +/* 改变计数器的显示 */ +counter(countername, upper-roman) +``` + ### 值 - ` 自定义标识` @@ -32,15 +40,7 @@ counter(countername, upper-roman) ### 形式语法 -``` -counter( , ? ) - -where - = | symbols() - -where - = -``` +{{CSSSyntax}} ## 示例 diff --git a/files/zh-cn/web/css/css_counter_styles/using_css_counters/index.md b/files/zh-cn/web/css/css_counter_styles/using_css_counters/index.md index 088b9cc26214a2..2060c240df8264 100644 --- a/files/zh-cn/web/css/css_counter_styles/using_css_counters/index.md +++ b/files/zh-cn/web/css/css_counter_styles/using_css_counters/index.md @@ -58,7 +58,7 @@ h3::before { 当不需要包含父级上下文的编号，而仅需要嵌套内容的编号时，应使用 {{cssxref("counter", "counter()")}} 函数。例如，以下示例的每一个嵌套内容的计数都从 1 开始： -``` +```plain 1 One 1 Nested one 2 Nested two @@ -71,7 +71,7 @@ h3::before { 当需要同时包含父级上下文和嵌套内容的编号时，应使用 {{cssxref("counters", "counters()")}} 函数。例如，以下示例的每一个嵌套内容会包含父级编号： -``` +```plain 1 One 1.1 Nested one 1.2 Nested two diff --git a/files/zh-cn/web/css/css_media_queries/using_media_queries/index.md b/files/zh-cn/web/css/css_media_queries/using_media_queries/index.md index 60fdf894ba7a05..bcddd2bcdc6f40 100644 --- a/files/zh-cn/web/css/css_media_queries/using_media_queries/index.md +++ b/files/zh-cn/web/css/css_media_queries/using_media_queries/index.md @@ -12,7 +12,7 @@ slug: Web/CSS/CSS_media_queries/Using_media_queries - 有条件的通过 {{cssxref("@media")}} 和 {{cssxref("@import")}} [at-rules](/zh-CN/docs/Web/CSS/At-rule) 用[CSS](/zh-CN/docs/Web/CSS) 装饰样式。 - 用 `media=` 属性为{{HTMLElement("style")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}}和其他[HTML](/zh-CN/docs/Web/HTML)元素指定特定的媒体类型。如： -``` +```html ``` diff --git a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md index c899641808b7de..c6f227380db29a 100644 --- a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md +++ b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md @@ -84,40 +84,52 @@ slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context ### HTML -``` +```html

Division Element #1

- position: relative;
- z-index: 5; + position: relative;
+ z-index: 5;

Division Element #2

- position: relative;
- z-index: 2; + position: relative;
+ z-index: 2;

Division Element #4

- position: relative;
- z-index: 6; + position: relative;
+ z-index: 6;

Division Element #3

- position: absolute;
- z-index: 4; + position: absolute;
+ z-index: 4;

Division Element #5

- position: relative;
- z-index: 1; + position: relative;
+ z-index: 1;

Division Element #6

- position: absolute;
- z-index: 3; + position: absolute;
+ z-index: 3;
``` @@ -195,7 +207,7 @@ h1 { } ``` -### Result +### 结果 {{EmbedLiveSample('示例源码', '100%', '396') }} diff --git a/files/zh-cn/web/css/cursor/index.md b/files/zh-cn/web/css/cursor/index.md index 403311433166c0..e80d53d337401b 100644 --- a/files/zh-cn/web/css/cursor/index.md +++ b/files/zh-cn/web/css/cursor/index.md @@ -315,7 +315,7 @@ cursor: ## 示例 -``` +```css .foo { cursor: crosshair; } diff --git a/files/zh-cn/web/css/element/index.md b/files/zh-cn/web/css/element/index.md index 35834668dba06c..01a72d3522b93c 100644 --- a/files/zh-cn/web/css/element/index.md +++ b/files/zh-cn/web/css/element/index.md @@ -13,7 +13,7 @@ slug: Web/CSS/element ## 语法 -``` +```css element(id) ``` diff --git a/files/zh-cn/web/css/filter-function/drop-shadow/index.md b/files/zh-cn/web/css/filter-function/drop-shadow/index.md index 4bed18910567e5..33de1a3e9214d7 100644 --- a/files/zh-cn/web/css/filter-function/drop-shadow/index.md +++ b/files/zh-cn/web/css/filter-function/drop-shadow/index.md @@ -14,10 +14,28 @@ The **`drop-shadow()`** [CSS](/zh-CN/docs/Web/CSS) function applies a drop shado > [!NOTE] > 这个函数有点类似于 {{Cssxref("box-shadow")}} 属性。`box-shadow` 属性在元素的整个框后面创建一个矩形阴影，而 `drop-shadow()` 过滤器则是创建一个符合图像本身形状 (alpha 通道) 的阴影。 -## Syntax +## 语法 -``` -drop-shadow(offset-x offset-y blur-radius spread-radius color) +```css +/* 双长度值 */ +/* drop-shadow( ) */ +drop-shadow(5px 5px) + +/* 三长度值 */ +/* drop-shadow( ) */ +drop-shadow(5px 5px 15px) + +/* 双长度值加一个颜色值 */ +/* drop-shadow( ) */ +drop-shadow(5px 5px red) + +/* 三长度值加一个颜色值 */ +/* drop-shadow( ) */ +drop-shadow(5px 5px 15px red) + +/* 可以改变颜色和长度值的顺序 */ +/* drop-shadow( ) */ +drop-shadow(#e23 0.5rem 0.5rem 1rem) ``` The `drop-shadow()` function accepts a parameter of type `` (defined in the {{cssxref("box-shadow")}} property), with the exception that the `inset` keyword is not allowed. diff --git a/files/zh-cn/web/css/hex-color/index.md b/files/zh-cn/web/css/hex-color/index.md index 70e32a90ada0d9..678b21acf8b779 100644 --- a/files/zh-cn/web/css/hex-color/index.md +++ b/files/zh-cn/web/css/hex-color/index.md @@ -11,7 +11,7 @@ slug: Web/CSS/hex-color ## 语法 -``` +```plain #RGB // 三值语法 #RGBA // 四值语法 #RRGGBB // 六值语法 diff --git a/files/zh-cn/web/css/hue-interpolation-method/index.md b/files/zh-cn/web/css/hue-interpolation-method/index.md index db60244877be39..a29882b461d3bd 100644 --- a/files/zh-cn/web/css/hue-interpolation-method/index.md +++ b/files/zh-cn/web/css/hue-interpolation-method/index.md @@ -13,7 +13,7 @@ slug: Web/CSS/hue-interpolation-method `` 值由色相插值算法的名称后接字面标记 `hue` 所构成： -``` +```plain shorter hue longer hue increasing hue diff --git a/files/zh-cn/web/css/image-orientation/index.md b/files/zh-cn/web/css/image-orientation/index.md index 3e577b8c0897c6..e4f0305a8dcc62 100644 --- a/files/zh-cn/web/css/image-orientation/index.md +++ b/files/zh-cn/web/css/image-orientation/index.md @@ -16,19 +16,17 @@ CSS 属性 **`image-orientation`** 用来修正某些图片的预设方向。 ## 语法 -``` -语法形式: {{csssyntax("image-orientation")}} -``` - -``` -image-orientation: 0deg -image-orientation: 6.4deg /* 非 90 度的整数倍，所以会被四舍五入到 0 度 */ -image-orientation: -90deg /* 相当于 270deg */ -image-orientation: from-image /* 使用图片的 EXIF 数据 */ -image-orientation: 90deg flip /* 旋转 90deg, 再水平翻转 */ -image-orientation: flip /* 不旋转，只进行水平翻转 */ - -image-orientation: inherit +```css +/* 关键字值 */ +image-orientation: none; +image-orientation: from-image; /* 使用图片的 EXIF 数据 */ + +/* 全局值 */ +image-orientation: inherit; +image-orientation: initial; +image-orientation: revert; +image-orientation: revert-layer; +image-orientation: unset; ``` ### 属性值 @@ -40,6 +38,14 @@ image-orientation: inherit - `flip` - : 对图片进行水平翻转，先进行第二个参数执行的旋转，再进行此次翻转。 +## 形式语法 + +{{cssinfo}} + +## 形式定义 + +{{csssyntax}} + ## 示例 ## 规范 diff --git a/files/zh-cn/web/css/image/index.md b/files/zh-cn/web/css/image/index.md index da3899336e15e7..fc871d4539b658 100644 --- a/files/zh-cn/web/css/image/index.md +++ b/files/zh-cn/web/css/image/index.md @@ -47,19 +47,30 @@ CSS 确定一个图像对象实际尺寸的依据有三条：(1) 图像的原始 以下是有效的图像引用值： -```css -url(test.jpg) url() 方法，只要 test.jpg 是图像文件 -linear-gradient(to bottom, blue, red) 一个 标签 -element(#colonne3) 页面的一部分，使用了 element() 方法， - 如果 colonne3 是存在于页面中的一个元素 id 即可 +```css example-good +url(test.jpg) /* 值，只要 test.jpg 是实际的图像 */ +linear-gradient(blue, red) /* 值 */ +element(#realid) /* 网页中的一部分，如果“realid”是页面上现有的元素， + 则会被 element() 函数所引用 */ +image(ltr 'arrow.png#xywh=0,0,16,16', red) + /* 中的一个 16x16 的部分，从原始图像的左上角开始（只要 + arrow.png 是受支持的图像，否则为纯红色的方块）。如果语言为从 + 右到左的（rtl），则图像将水平翻转。 */ +cross-fade(20% url(twenty.png), url(eighty.png)) + /* 半透明叠加的图像，其中 twenty 的不透明度为 20%， + 而 eighty 的不透明度为 80%。 */ +image-set('test.jpg' 1x, 'test-2x.jpg' 2x) + /* 一系列具有不同分辨率的图像 */ ``` 以下是无效的图像引用值： -``` -cervin.jpg 图像文件必须使用 url() 方法定义 -url(report.pdf) url() 方法指向的文件链接必须是一个图像文件 -element(#fakeid) 如果 fakeid 是一个不存在与页面的元素 id +```css example-bad +nourl.jpg /* 图像文件必须使用 url() 函数定义。 */ +url(report.pdf) /* url() 函数指向的文件链接必须是一个图像。 */ +element(#fakeid) /* 元素 ID 必须是当前页面中存在的 ID。 */ +image(z.jpg#xy=0,0) /* 块片段的格式必须为 xywh=#,#,#,# */ +image-set('cat.jpg' 1x, 'dog.jpg' 1x) /* 图像集中的每个图像必须具有不同的分辨率 */ ``` ## 规范 diff --git a/files/zh-cn/web/css/mix-blend-mode/index.md b/files/zh-cn/web/css/mix-blend-mode/index.md index 23325463c36ca7..691913f9580fc9 100644 --- a/files/zh-cn/web/css/mix-blend-mode/index.md +++ b/files/zh-cn/web/css/mix-blend-mode/index.md @@ -11,14 +11,15 @@ slug: Web/CSS/mix-blend-mode ## 语法 -``` +```css +/* 关键字值 */ mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; -mix-blend-mode: color-dodge +mix-blend-mode: color-dodge; mix-blend-mode: color-burn; mix-blend-mode: hard-light; mix-blend-mode: soft-light; @@ -28,9 +29,14 @@ mix-blend-mode: hue; mix-blend-mode: saturation; mix-blend-mode: color; mix-blend-mode: luminosity; +mix-blend-mode: plus-darker; +mix-blend-mode: plus-lighter; -mix-blend-mode: initial; +/* 全局值 */ mix-blend-mode: inherit; +mix-blend-mode: initial; +mix-blend-mode: revert; +mix-blend-mode: revert-layer; mix-blend-mode: unset; ``` diff --git a/files/zh-cn/web/css/outline/index.md b/files/zh-cn/web/css/outline/index.md index 245a1ff46cb269..155945bb6dfbfe 100644 --- a/files/zh-cn/web/css/outline/index.md +++ b/files/zh-cn/web/css/outline/index.md @@ -20,22 +20,24 @@ slug: Web/CSS/outline ## 语法 -``` +```css /* 样式 */ outline: solid; -/* 颜色 | 样式 */ -outline: #f66 dashed; +/* 样式 | 颜色 */ +outline: dashed #f66; -/* 样式 | 宽度 */ -outline: inset thick; +/* 宽度 | 样式 */ +outline: thick inset; -/* 颜色 | 样式 | 宽度 */ -outline: green solid 3px; +/* 宽度 | 样式 | 颜色 */ +outline: 3px solid green; /* 全局值 */ outline: inherit; outline: initial; +outline: revert; +outline: revert-layer; outline: unset; ``` @@ -53,21 +55,27 @@ outline: unset; - `<'outline-width'>` - : 设置轮廓的宽度。没有设置时默认值为 `medium`。参见 {{cssxref("outline-width")}}。 -### 形式语法 +## 形式定义 + +{{cssinfo}} -{{csssyntax("outline")}} +## 形式语法 + +{{csssyntax}} ## 示例 -### HTML +### 使用 outline 设置焦点样式 -``` -This link has a special focus style. +#### HTML + +```html +该链接具有特殊的焦点样式。 ``` ### CSS -``` +```css a { border: 1px solid; border-radius: 3px; @@ -83,7 +91,9 @@ a:focus { } ``` -### 结果 +#### 结果 + +{{EmbedLiveSample("使用 outline 设置焦点样式", "100%", 85)}} ## 无障碍考虑 @@ -96,8 +106,6 @@ a:focus { {{Specifications}} -{{cssinfo}} - ## 浏览器兼容性 {{Compat}} diff --git a/files/zh-cn/web/css/time/index.md b/files/zh-cn/web/css/time/index.md index e82e088b86dc5d..dcd2869e973b25 100644 --- a/files/zh-cn/web/css/time/index.md +++ b/files/zh-cn/web/css/time/index.md @@ -28,7 +28,7 @@ slug: Web/CSS/time ### 有效时间 -``` +```plain example-good 12s 正整数 -456ms 负整数 4.3ms 非整数 diff --git a/files/zh-cn/web/css/transform-function/matrix3d/index.md b/files/zh-cn/web/css/transform-function/matrix3d/index.md index db6cbccc9bf87f..c43451f5e44cde 100644 --- a/files/zh-cn/web/css/transform-function/matrix3d/index.md +++ b/files/zh-cn/web/css/transform-function/matrix3d/index.md @@ -11,11 +11,11 @@ slug: Web/CSS/transform-function/matrix3d `matrix3d()` 函数由 16 个参数指定。这些参数以列为主的顺序进行描述。 -``` +```css matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) ``` -### Values +### 值 - _a1_ _b1_ _c1_ _d1_ _a2_ _b2_ _c2_ _d2_ _a3_ _b3_ _c3_ _d3_ - : Are {{cssxref("<number>")}}s describing the linear transformation. diff --git a/files/zh-cn/web/css/transform-function/perspective/index.md b/files/zh-cn/web/css/transform-function/perspective/index.md index 02bd4d64b0e95a..901070091ccff1 100644 --- a/files/zh-cn/web/css/transform-function/perspective/index.md +++ b/files/zh-cn/web/css/transform-function/perspective/index.md @@ -11,13 +11,13 @@ T 更小，变化的幅度决定于属性值的变化大小 ## 语法 -``` -perspective(l) +```css +perspective(d) ``` ## 参数 -- _l_ +- _d_ - : 这个{{cssxref("<length>")}} 得到的是距离 0 坐标的距离。被用作提供一个透视渐变属性给某个元素。如果这个值是 0 或者不合法的值，将不会产生透视的变化。 diff --git a/files/zh-cn/web/css/transform-function/rotate/index.md b/files/zh-cn/web/css/transform-function/rotate/index.md index 34254c1e1d4e99..bffad77afb1321 100644 --- a/files/zh-cn/web/css/transform-function/rotate/index.md +++ b/files/zh-cn/web/css/transform-function/rotate/index.md @@ -15,7 +15,7 @@ CSS 的 **`rotate()`** 函数定义了一种将元素围绕一个定点（由{{ {{cssxref("<angle>")}} 指定了 `rotate()` 的旋转程度。参数为正时，顺时针旋转；参数为负时，逆时针旋转。180° 旋转称为*点反演*。 -``` +```css rotate(a) ``` diff --git a/files/zh-cn/web/css/transform-function/rotate3d/index.md b/files/zh-cn/web/css/transform-function/rotate3d/index.md index 135247803fe2d9..1ad7f5f7bd50b4 100644 --- a/files/zh-cn/web/css/transform-function/rotate3d/index.md +++ b/files/zh-cn/web/css/transform-function/rotate3d/index.md @@ -16,7 +16,7 @@ slug: Web/CSS/transform-function/rotate3d ## 语法 -``` +```css rotate3d(x, y, z, a) ``` diff --git a/files/zh-cn/web/css/transform-function/rotatex/index.md b/files/zh-cn/web/css/transform-function/rotatex/index.md index 5f2906775955f4..633157b3368526 100644 --- a/files/zh-cn/web/css/transform-function/rotatex/index.md +++ b/files/zh-cn/web/css/transform-function/rotatex/index.md @@ -20,7 +20,7 @@ slug: Web/CSS/transform-function/rotateX **`rotateX()`** 引起的旋转量由{{cssxref("<angle>")}}指定。如果为正，则顺时针方向移动；如果为负，则逆时针方向移动。 -``` +```css rotateX(a) ``` diff --git a/files/zh-cn/web/css/transform-function/rotatey/index.md b/files/zh-cn/web/css/transform-function/rotatey/index.md index 2a146181e6df6f..7172108ad0aed4 100644 --- a/files/zh-cn/web/css/transform-function/rotatey/index.md +++ b/files/zh-cn/web/css/transform-function/rotatey/index.md @@ -20,7 +20,7 @@ slug: Web/CSS/transform-function/rotateY **`rotateY()`** 引起的旋转量由{{cssxref("<angle>")}}指定。如果为正，则顺时针方向移动；如果为负，则逆时针方向移动。 -``` +```css rotateY(a) ``` diff --git a/files/zh-cn/web/css/transform-function/rotatez/index.md b/files/zh-cn/web/css/transform-function/rotatez/index.md index 949720a79d1c57..442510d11fb8b0 100644 --- a/files/zh-cn/web/css/transform-function/rotatez/index.md +++ b/files/zh-cn/web/css/transform-function/rotatez/index.md @@ -20,7 +20,7 @@ slug: Web/CSS/transform-function/rotateZ **`rotateZ()`** 引起的旋转量由{{cssxref("<angle>")}}指定。如果为正，则顺时针方向移动；如果为负，则逆时针方向移动。 -``` +```css rotateZ(a) ``` diff --git a/files/zh-cn/web/css/transform-function/skew/index.md b/files/zh-cn/web/css/transform-function/skew/index.md index 16fd6d1e383245..83a3d6d1872633 100644 --- a/files/zh-cn/web/css/transform-function/skew/index.md +++ b/files/zh-cn/web/css/transform-function/skew/index.md @@ -13,7 +13,7 @@ slug: Web/CSS/transform-function/skew `skew()` 函数指定一个或两个参数，它们表示在每个方向上应用的倾斜量。 -``` +```css skew(ax) skew(ax, ay) diff --git a/files/zh-cn/web/css/word-break/index.md b/files/zh-cn/web/css/word-break/index.md index 40a37253e5eeda..4bd3eef8d6bbb8 100644 --- a/files/zh-cn/web/css/word-break/index.md +++ b/files/zh-cn/web/css/word-break/index.md @@ -11,16 +11,19 @@ CSS 属性 `word-break` 指定了怎样在单词内断行。 ## 语法 -``` -/* Keyword values */ +```css +/* 关键字值 */ word-break: normal; word-break: break-all; word-break: keep-all; -word-break: break-word; /* deprecated */ +word-break: auto-phrase; /* 实验性 */ +word-break: break-word; /* 已弃用 */ -/* Global values */ +/* 全局值 */ word-break: inherit; word-break: initial; +word-break: revert; +word-break: revert-layer; word-break: unset; ``` diff --git a/files/zh-cn/web/http/caching/index.md b/files/zh-cn/web/http/caching/index.md index e6537f5aafb755..41919cabd465f9 100644 --- a/files/zh-cn/web/http/caching/index.md +++ b/files/zh-cn/web/http/caching/index.md @@ -515,7 +515,7 @@ Cache-Control: no-cache, private 因此，你可以使用包含基于版本号或哈希值的更改部分的 URL 来提供 JavaScript 和 CSS。一些方法如下所示。 -``` +```plain # version in filename bundle.v123.js @@ -545,7 +545,7 @@ bundle.js?v=YsAIAAAA-QG4G6kCMAMBAAAAAAAoK 一些常用的缓存头值如下所示。 -``` +```plain 36 cache-control max-age=0 37 cache-control max-age=604800 38 cache-control max-age=2592000 diff --git a/files/zh-cn/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md b/files/zh-cn/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md index 4ff77a86610e2f..77741d806b676e 100644 --- a/files/zh-cn/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md +++ b/files/zh-cn/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md @@ -22,13 +22,13 @@ slug: Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin > [!WARNING] > 你必须将 HTTPS 或 HTTP 协议作为源的一部分。 -``` +```apacheconf Header set Access-Control-Allow-Origin 'origin' ``` 在 Nginx 中，对应的配置为： -``` +```nginx add_header 'Access-Control-Allow-Origin' 'origin' ``` diff --git a/files/zh-cn/web/http/cors/errors/corsmissingalloworigin/index.md b/files/zh-cn/web/http/cors/errors/corsmissingalloworigin/index.md index f4326afbca62ab..952b19baa948f1 100644 --- a/files/zh-cn/web/http/cors/errors/corsmissingalloworigin/index.md +++ b/files/zh-cn/web/http/cors/errors/corsmissingalloworigin/index.md @@ -36,14 +36,14 @@ Access-Control-Allow-Origin: * 设置标头的命令取决于你的 Web 服务器。例如，在 Apache 服务器中，将下面一行添加到服务器的配置中（在相应的 ``、``、`` 或 `` 部分中）。配置通常位于 `.conf` 文件中（`httpd.conf` 和 `apache.conf` 是这些文件的通用名称）或者位于 `.htaccess` 文件中。 -``` -Header set Access-Control-Allow-Origin 'origin-list' +```apacheconf +Header set Access-Control-Allow-Origin 'https://example.com' ``` 对于 Nginx，设置此标头的命令是： -``` -add_header 'Access-Control-Allow-Origin' 'origin-list'; +```nginx +add_header 'Access-Control-Allow-Origin' 'https://example.com' always; ``` ## 参见 diff --git a/files/zh-cn/web/http/headers/cookie/index.md b/files/zh-cn/web/http/headers/cookie/index.md index 3698d647296da2..afbc1f600b1aba 100644 --- a/files/zh-cn/web/http/headers/cookie/index.md +++ b/files/zh-cn/web/http/headers/cookie/index.md @@ -24,7 +24,7 @@ slug: Web/HTTP/Headers/Cookie ## 语法 -``` +```http Cookie: Cookie: name=value Cookie: name=value; name2=value2; name3=value3 @@ -35,7 +35,7 @@ Cookie: name=value; name2=value2; name3=value3 ## 示例 -``` +```http Cookie: PHPSESSID=298zf09hf012fh2; csrftoken=u32t4o3tb3gg43; _gat=1 ``` diff --git a/files/zh-cn/web/http/headers/expect-ct/index.md b/files/zh-cn/web/http/headers/expect-ct/index.md index 62122c4154d745..8c0de1c13324e7 100644 --- a/files/zh-cn/web/http/headers/expect-ct/index.md +++ b/files/zh-cn/web/http/headers/expect-ct/index.md @@ -36,7 +36,7 @@ slug: Web/HTTP/Headers/Expect-CT ## 语法 -``` +```http Expect-CT: report-uri="", enforce, max-age= @@ -66,7 +66,7 @@ Expect-CT: report-uri="", 以下示例指定在 24 小时内遵守证书透明度政策，并向 `foo.example.com` 报告违规行为。 -``` +```http Expect-CT: max-age=86400, enforce, report-uri="https://foo.example.com/report" ``` diff --git a/files/zh-cn/web/http/headers/origin/index.md b/files/zh-cn/web/http/headers/origin/index.md index 6a8e7ada5044b3..bdfc1ec7bf15de 100644 --- a/files/zh-cn/web/http/headers/origin/index.md +++ b/files/zh-cn/web/http/headers/origin/index.md @@ -22,7 +22,7 @@ slug: Web/HTTP/Headers/Origin ## 语法 -``` +```http Origin: null Origin: :// Origin: ://: diff --git a/files/zh-cn/web/http/headers/permissions-policy/camera/index.md b/files/zh-cn/web/http/headers/permissions-policy/camera/index.md index a0fcbc1c0ea3a3..9fac02b878d64c 100644 --- a/files/zh-cn/web/http/headers/permissions-policy/camera/index.md +++ b/files/zh-cn/web/http/headers/permissions-policy/camera/index.md @@ -9,8 +9,8 @@ HTTP {{HTTPHeader("Permissions-Policy")}} 标头当中的 `camera` 指令控制 ## 语法 -``` -Permissions-Policy: camera ; +```http +Permissions-Policy: camera=; ``` - \ diff --git a/files/zh-cn/web/http/status/404/index.md b/files/zh-cn/web/http/status/404/index.md index 50df6f25992e0e..ab523912fdcb07 100644 --- a/files/zh-cn/web/http/status/404/index.md +++ b/files/zh-cn/web/http/status/404/index.md @@ -11,7 +11,7 @@ HTTP 响应状态码 **`404 Not Found`** 指的是服务器无法找到所请求 ## 状态 -``` +```http 404 Not Found ``` @@ -19,7 +19,7 @@ HTTP 响应状态码 **`404 Not Found`** 指的是服务器无法找到所请求 你可以自定义 404 页面，使其对用户更友好，以及提供一些引导。例如，Apache 服务器可以在 `.htaccess` 文件中指定自定义 404 页面的路径，代码片段如下： -``` +```apacheconf ErrorDocument 404 /notfound.html ``` diff --git a/files/zh-cn/web/javascript/guide/indexed_collections/index.md b/files/zh-cn/web/javascript/guide/indexed_collections/index.md index edb3e48841aaee..b24f91bb8a6a5b 100644 --- a/files/zh-cn/web/javascript/guide/indexed_collections/index.md +++ b/files/zh-cn/web/javascript/guide/indexed_collections/index.md @@ -570,7 +570,7 @@ for (i = 0; i < 4; i++) { 这个例子创建的数组拥有以下行数据： -``` +```plain Row 0: [0,0] [0,1] [0,2] [0,3] Row 1: [1,0] [1,1] [1,2] [1,3] Row 2: [2,0] [2,1] [2,2] [2,3] diff --git a/files/zh-cn/web/javascript/guide/loops_and_iteration/index.md b/files/zh-cn/web/javascript/guide/loops_and_iteration/index.md index 3b2294a41bb70e..0349d38e42abe3 100644 --- a/files/zh-cn/web/javascript/guide/loops_and_iteration/index.md +++ b/files/zh-cn/web/javascript/guide/loops_and_iteration/index.md @@ -387,7 +387,7 @@ function dump_props(obj, obj_name) { 对于一个拥有 `make` 和 `model` 属性的 `car` 对象来说，执行结果 `result` 是： -``` +```plain car.make = Ford car.model = Mustang ``` diff --git a/files/zh-cn/web/javascript/reference/deprecated_and_obsolete_features/index.md b/files/zh-cn/web/javascript/reference/deprecated_and_obsolete_features/index.md index 97cbfddc1cf252..a0e451709e2f01 100644 --- a/files/zh-cn/web/javascript/reference/deprecated_and_obsolete_features/index.md +++ b/files/zh-cn/web/javascript/reference/deprecated_and_obsolete_features/index.md @@ -184,7 +184,7 @@ console.log("b"); 数组推导式和生成器推导式已被移除。 -``` +```js-nolint // 遗留的数组推导式 [for (x of iterable) x] [for (x of iterable) if (condition) x] diff --git a/files/zh-cn/web/javascript/reference/errors/not_a_valid_code_point/index.md b/files/zh-cn/web/javascript/reference/errors/not_a_valid_code_point/index.md index 0cb1fb10bde32f..63f01f4559690d 100644 --- a/files/zh-cn/web/javascript/reference/errors/not_a_valid_code_point/index.md +++ b/files/zh-cn/web/javascript/reference/errors/not_a_valid_code_point/index.md @@ -9,7 +9,7 @@ JavaScript 异常“Invalid code point”会在 {{jsxref("String.fromCodePoint() ## 错误信息 -``` +```plain RangeError: Invalid code point -1 (V8-based) RangeError: -1 is not a valid code point (Firefox) RangeError: Arguments contain a value that is out of range of code points (Safari) diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/constructor/index.md b/files/zh-cn/web/javascript/reference/global_objects/object/constructor/index.md index d161e50ff2f978..a31044260eef3b 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/object/constructor/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/object/constructor/index.md @@ -67,7 +67,7 @@ console.log(`theTree.constructor 是 ${theTree.constructor}`); 这个示例会打印以下输出： -``` +```plain theTree.constructor 是 function Tree(name) { this.name = name; } diff --git a/files/zh-cn/web/javascript/reference/global_objects/regexp/exec/index.md b/files/zh-cn/web/javascript/reference/global_objects/regexp/exec/index.md index af59b04ea9d403..7cfb550536d331 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/regexp/exec/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/regexp/exec/index.md @@ -94,7 +94,7 @@ while ((myArray = myRe.exec(str)) !== null) { 脚本运行结果如下： -``` +```plain Found abb. Next match starts at 3 Found ab. Next match starts at 9 ``` diff --git a/files/zh-cn/web/javascript/reference/iteration_protocols/index.md b/files/zh-cn/web/javascript/reference/iteration_protocols/index.md index c6e28f7654dc86..8bcbea1c0f076c 100644 --- a/files/zh-cn/web/javascript/reference/iteration_protocols/index.md +++ b/files/zh-cn/web/javascript/reference/iteration_protocols/index.md @@ -125,7 +125,7 @@ JavaScript 语言指定了产生或使用可迭代对象和迭代器的 API。 从内置迭代返回的迭代器实际上都继承了一个公共类（目前尚未暴露），该类实现了上述 `[Symbol.iterator]() { return this; }` 方法，使它们都是可迭代的迭代器。将来，除了迭代器协议要求的 `next()` 方法外，这些内置迭代器可能还有其他[辅助方法](https://github.com/tc39/proposal-iterator-helpers)。你可以通过在图形控制台中记录迭代器的原型链来检查它。 -``` +```plain console.log([][Symbol.iterator]()); Array Iterator {} diff --git a/files/zh-cn/web/uri/schemes/data/index.md b/files/zh-cn/web/uri/schemes/data/index.md index e87f911488ee23..4512d19c287e7c 100644 --- a/files/zh-cn/web/uri/schemes/data/index.md +++ b/files/zh-cn/web/uri/schemes/data/index.md @@ -77,7 +77,7 @@ bash$ echo -n hello | base64 下文介绍一些在创建和使用 `data` URL 时遇到的常见问题： -``` +```html data:text/html,lots of text…

bottom?arg=val

``` From 1e6e2288add6c3847c055434889854fa799a0bbd Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Wed, 18 Sep 2024 08:31:20 +0800 Subject: [PATCH 004/365] [zh-CN]: sync translation for Badging API & Web Share API (#23626) --- files/zh-cn/web/api/badging_api/index.md | 4 ++-- files/zh-cn/web/api/web_share_api/index.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/files/zh-cn/web/api/badging_api/index.md b/files/zh-cn/web/api/badging_api/index.md index cf017b55948ed2..0be14b10923789 100644 --- a/files/zh-cn/web/api/badging_api/index.md +++ b/files/zh-cn/web/api/badging_api/index.md @@ -2,7 +2,7 @@ title: Badging API slug: Web/API/Badging_API l10n: - sourceCommit: 8a999418acafeb44b4491e37d02721d32607ec3a + sourceCommit: a4675b9077ae32f989c7ecac94f454db2653c4fc --- {{DefaultAPISidebar("Badging API")}}{{securecontext_header}}{{AvailableInWorkers}} @@ -28,7 +28,7 @@ Web 开发人员经常更新文档图标或标题以指示状态。Badging API - : 表示当前未设置徽章。若徽章被应用程序清除或被用户代理重置，徽章可能会处于此状态。 - `flag` - : 表示已设置徽章，但没有具体数据可显示。如果应用程序已设置徽章，但未将任何值传递给该方法，则徽章将处于此状态。 -- `an integer` +- 一个整数 - : 设置徽章时传递的值。该值永远不会是 `0`，设置徽章时传递值 `0` 将导致用户代理通过将其设置为 `nothing` 来清除徽章。 ### 设置徽章 diff --git a/files/zh-cn/web/api/web_share_api/index.md b/files/zh-cn/web/api/web_share_api/index.md index 4f49bb3b258abe..490b9d8c93c1a8 100644 --- a/files/zh-cn/web/api/web_share_api/index.md +++ b/files/zh-cn/web/api/web_share_api/index.md @@ -2,7 +2,7 @@ title: Web 共享 API slug: Web/API/Web_Share_API l10n: - sourceCommit: 91907f1383139ec2bd1d309d02ffac30b4eee757 + sourceCommit: 44c4ec928281dc2d7c5ea42b7d2c74a2013f16ac --- {{DefaultAPISidebar("Web Share API")}}{{securecontext_header}} From 097585d18b1f3c2749d464154e4f0b1b93e95302 Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Wed, 18 Sep 2024 08:35:11 +0800 Subject: [PATCH 005/365] [zh-CN]: sync translation for Local Font Access API (#23627) --- files/zh-cn/web/api/fontdata/blob/index.md | 2 +- files/zh-cn/web/api/fontdata/index.md | 2 +- files/zh-cn/web/api/local_font_access_api/index.md | 4 ++-- files/zh-cn/web/api/window/querylocalfonts/index.md | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/files/zh-cn/web/api/fontdata/blob/index.md b/files/zh-cn/web/api/fontdata/blob/index.md index 61c9974614edac..c7e61f3fdcd1d5 100644 --- a/files/zh-cn/web/api/fontdata/blob/index.md +++ b/files/zh-cn/web/api/fontdata/blob/index.md @@ -2,7 +2,7 @@ title: FontData：blob() 方法 slug: Web/API/FontData/blob l10n: - sourceCommit: 4458494807b6f4898d504b6c0af0a45f8031cbf3 + sourceCommit: d7143e171b5f18fb37a686a7d4947db417fd74f3 --- {{APIRef("Local Font Access API")}}{{SeeCompatTable}} diff --git a/files/zh-cn/web/api/fontdata/index.md b/files/zh-cn/web/api/fontdata/index.md index db2df67131f207..0329185ec8f576 100644 --- a/files/zh-cn/web/api/fontdata/index.md +++ b/files/zh-cn/web/api/fontdata/index.md @@ -2,7 +2,7 @@ title: FontData slug: Web/API/FontData l10n: - sourceCommit: 4458494807b6f4898d504b6c0af0a45f8031cbf3 + sourceCommit: d7143e171b5f18fb37a686a7d4947db417fd74f3 --- {{APIRef("Local Font Access API")}}{{SeeCompatTable}} diff --git a/files/zh-cn/web/api/local_font_access_api/index.md b/files/zh-cn/web/api/local_font_access_api/index.md index d2623d83ca254e..01c9e9aff985f5 100644 --- a/files/zh-cn/web/api/local_font_access_api/index.md +++ b/files/zh-cn/web/api/local_font_access_api/index.md @@ -2,7 +2,7 @@ title: Local Font Access API slug: Web/API/Local_Font_Access_API l10n: - sourceCommit: 4458494807b6f4898d504b6c0af0a45f8031cbf3 + sourceCommit: d7143e171b5f18fb37a686a7d4947db417fd74f3 --- {{SeeCompatTable}}{{DefaultAPISidebar("Local Font Access API")}} @@ -24,7 +24,7 @@ Local Font Access API 的创建就是为了解决这些问题。 在隐私和安全方面： - 本地字体访问 API 旨在仅提供对解决上述问题所需的数据的访问。它既不要求浏览器提供可用本地字体的完整列表，也不要求按照磁盘上出现的顺序提供数据。 -- 当调用 {{domxref("Window.queryLocalFonts()")}} 时，系统会请求用户授予访问其本地字体的权限。此权限的状态可以通过 {{domxref("Permissions API")}}（`local-fonts` 权限）查询。 +- 当调用 {{domxref("Window.queryLocalFonts()")}} 时，系统会请求用户授予访问其本地字体的权限。此权限的状态可以通过 [Permissions API](/zh-CN/docs/Web/API/Permissions_API)（`local-fonts` 权限）查询。 - 你可以使用 {{httpheader("Permissions-Policy/local-fonts", "local-fonts")}} [权限策略](/zh-CN/docs/Web/HTTP/Permissions_Policy)控制对此特性的访问。 ## 接口 diff --git a/files/zh-cn/web/api/window/querylocalfonts/index.md b/files/zh-cn/web/api/window/querylocalfonts/index.md index 3b5c5b66c027c8..c02e010252a96f 100644 --- a/files/zh-cn/web/api/window/querylocalfonts/index.md +++ b/files/zh-cn/web/api/window/querylocalfonts/index.md @@ -2,7 +2,7 @@ title: Window：queryLocalFonts() 方法 slug: Web/API/Window/queryLocalFonts l10n: - sourceCommit: 89c435da452257b944b403cc9e45036fcb22590e + sourceCommit: d7143e171b5f18fb37a686a7d4947db417fd74f3 --- {{APIRef("Local Font Access API")}}{{SeeCompatTable}}{{SecureContext_Header}} From 4042a6e9b041984408d865ed3e47a623607a63f6 Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Wed, 18 Sep 2024 10:37:45 +0800 Subject: [PATCH 006/365] [zh-cn]: create the translation of `aria-colspan` attribute (#23467) Co-authored-by: A1lo --- .../aria/attributes/aria-colspan/index.md | 169 ++++++++++++++++++ 1 file changed, 169 insertions(+) create mode 100644 files/zh-cn/web/accessibility/aria/attributes/aria-colspan/index.md diff --git a/files/zh-cn/web/accessibility/aria/attributes/aria-colspan/index.md b/files/zh-cn/web/accessibility/aria/attributes/aria-colspan/index.md new file mode 100644 index 00000000000000..88e2ef551b54e0 --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/attributes/aria-colspan/index.md @@ -0,0 +1,169 @@ +--- +title: aria-colspan +slug: Web/Accessibility/ARIA/Attributes/aria-colspan +l10n: + sourceCommit: 194bd13942ad0c532c92d364e0d5d0c36732d98c +--- + +{{AccessibilitySidebar}} + +`aria-colspan` 属性定义了在 [`table`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/table_role)、[`grid`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/grid_role) 或 [`treegrid`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/treegrid_role) 中，单元格或网格单元格跨越的列数。 + +## 描述 + +`aria-colspan` 主要用于不包含在原生 HTML {{HTMLElement('table')}} 中的 [`cell`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/cell_role) 和 [`gridcell`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/gridcell_role)，该属性值定义了一个单元格在 ARIA [`table`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/table_role)、[`grid`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/grid_role) 或 [`treegrid`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/treegrid_role) 中跨越的列数。 + +在 HTML 中，{{HTMLElement('th')}} 和 {{HTMLElement('td')}} 元素具有 [`colspan`](/zh-CN/docs/Web/HTML/Element/td#attributes) 属性。当使用语义化的 {{HTMLElement('table')}} 时，按设计使用原生的 `colspan` 属性即可。此 ARIA 属性用于不包含在原生表格中的单元格和网格单元格，如果用于 {{HTMLElement('table')}} 中的单元格，将被忽略。 + +> [!NOTE] +> 使用 ARIA 的首要规则是，如果可以使用具有所需语义和行为的原生特性，而不是重新定义元素并**添加** ARIA 角色、状态或属性使其变得无障碍，那么就这样做。尽可能使用 HTML {{HTMLelement('table')}} 元素（包括 {{HTMLelement('td')}} 和 {{HTMLelement('th')}} 以及 `colspan` 属性），而不是带有 ARIA 角色和属性的非语义元素。 + +`aria-colspan` 的值应为正整数。单元格跨越的默认或假定值为 1。确保所包含的值不会导致单元格或网格单元格与同一行中的下一个单元格重叠，也不会导致单元格跨越超出包含的表格、网格或树网格。 + +## 示例 + +以下是一个保龄球锦标赛联赛计分表的部分示例。每场比赛跨越 10 计分格（frame），每个计分格跨越 3 个分数：两球和当前总分。每场比赛的第 10 个（也是最后一个）计分格跨越 4 列，以防有人记全倒。 + +```html +
+
+
+ + + 队伍 + 玩家 + 第 1 局计分格 + 第 2 局计分格 + 第 3 局计分格 + 合计 +
+
+ 姓 + 名 + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 +
+
+
+
+ 强力短尾矮袋鼠队 + Henderson + Alice + 7 + / + 20 + X + 39 + 9 + - + 48 + X + 76 + X + 96 + 8 + / + 113 + 7 + - + 120 + X + 146 + X + 166 + 6 + / + X + 186 + 7 + 2 + 9 + 6 + - + 15 + X + 35 + 7 + / + … +
+
+ McPherson + Leslie + 9 + - + 9 + 8 + 1 + 18 + … +
+
+
+``` + +如果我们使用 {{HTMLElement('table')}} 和语义化的表格元素，我们的标记将会更简洁，并且默认具有无障碍性。 + +## 值 + +- `` + - : 一个大于或等于默认值 1 的整数，定义单元格跨越的列数。该值必须小于会导致单元格与同一行中的下一个单元格重叠的数值。 + +## 相关接口 + +- {{domxref("Element.ariaColSpan")}} + - : [`ariaColSpan`](/zh-CN/docs/Web/API/Element/ariaColSpan) 属性，作为每个元素接口的一部分，反映了 `aria-colspan` 属性的值，该属性定义了单元格或网格单元格在表格、网格或树网格中跨越的列数。 + +## 相关角色 + +用于角色： + +- [`cell`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/cell_role) + +继承到角色： + +- [`columnheader`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/columnheader_role) +- [`rowheader`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/columnheader_role) + +## 规范 + +{{Specifications}} + +## 参见 + +- {{HTMLElement('th')}} 和 {{HTMLElement('td')}} [`colspan`](/zh-CN/docs/Web/HTML/Element/td#attributes) 属性 +- [`aria-colindex`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-colindex) 属性 +- [`aria-rowspan`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-rowspan) 属性 +- [`cell`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/cell_role) 角色 +- [`columnheader`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/columnheader_role) 角色 +- [`rowheader`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/columnheader_role) 角色 From 05fa4858c52617423370dfa8d8b14ec223dcd2fa Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Wed, 18 Sep 2024 10:40:23 +0800 Subject: [PATCH 007/365] zh-CN: create `extensionTypes.InjectDetails` (#23530) --- .../api/extensiontypes/injectdetails/index.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/extensiontypes/injectdetails/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/extensiontypes/injectdetails/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/extensiontypes/injectdetails/index.md new file mode 100644 index 00000000000000..53a2b96d76f2e2 --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/extensiontypes/injectdetails/index.md @@ -0,0 +1,14 @@ +--- +title: extensionTypes.InjectDetails +slug: Mozilla/Add-ons/WebExtensions/API/extensionTypes/InjectDetails +l10n: + sourceCommit: 2c5465eab20015868a1eeca59c5623d37b105f7c +--- + +{{AddonSidebar}} + +这一类型作为参数传递给 `tabs.executeScript()`、`tabs.insertCSS()` 和 `tabs.removeCSS()` 方法。有关其属性的详细信息以及它们的用途，请参阅这些方法的文档页面： + +- {{WebExtAPIRef("tabs.executeScript()")}} +- {{WebExtAPIRef("tabs.insertCSS()")}} +- {{WebExtAPIRef("tabs.removeCSS()")}} From 61508412c44f3ce7c4fe049a8adfc039e99ec259 Mon Sep 17 00:00:00 2001 From: ikenk <93726321+ikenk@users.noreply.github.com> Date: Wed, 18 Sep 2024 11:17:14 +0800 Subject: [PATCH 008/365] updated the Math.sin() method doc (#23584) Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- .../global_objects/math/sin/index.md | 22 ++++++++++++------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/files/zh-cn/web/javascript/reference/global_objects/math/sin/index.md b/files/zh-cn/web/javascript/reference/global_objects/math/sin/index.md index 07f4c07d685b78..e1877080ce5d30 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/math/sin/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/math/sin/index.md @@ -1,17 +1,19 @@ --- title: Math.sin() slug: Web/JavaScript/Reference/Global_Objects/Math/sin +l10n: + sourceCommit: fcd80ee4c8477b6f73553bfada841781cf74cf46 --- {{JSRef}} -## 概述 +**`Math.sin()`** 静态方法以弧度为单位返回一个数字的正弦值。 -**`Math.sin()`** 函数返回一个数值的正弦值。 +{{EmbedInteractiveExample("pages/js/math-sin.html")}} ## 语法 -```plain +```js-nolint Math.sin(x) ``` @@ -20,21 +22,25 @@ Math.sin(x) - `x` - : 一个数值（以弧度为单位）。 -## 描述 +### 返回值 + +`x` 的正弦值，介于 -1 到 1 之间（包含 -1 和 1）。如果 `x` 为 {{jsxref("Infinity")}}、`-Infinity` 或 {{jsxref("NaN")}}，则返回 {{jsxref("NaN")}}。 -`sin` 方法返回一个 -1 到 1 之间的数值，表示给定角度（单位：弧度）的正弦值。 +## 描述 -由于 `sin` 是 `Math` 的静态方法，所以应该像这样使用：`Math.sin()`，而不是作为你创建的 `Math` 实例的方法。 +由于 `sin()` 是 `Math` 的静态方法，应该总是以 `Math.sin()` 的形式，而不是作为 `Math` 对象的方法来使用它（`Math` 不是构造函数）。 ## 示例 -### 示例：使用 `Math.sin` +### 使用 Math.sin() ```js +Math.sin(-Infinity); // NaN +Math.sin(-0); // -0 Math.sin(0); // 0 Math.sin(1); // 0.8414709848078965 - Math.sin(Math.PI / 2); // 1 +Math.sin(Infinity); // NaN ``` ## 规范 From 68e2195a04edc0e1ad85ee00d77752734ad165ee Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Wed, 18 Sep 2024 11:20:49 +0800 Subject: [PATCH 009/365] [zh-cn]: sync translation for File API (#23412) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Hoarfroster Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- files/zh-cn/web/api/blob/bytes/index.md | 36 +++++++++++++++++++ files/zh-cn/web/api/blob/index.md | 4 ++- files/zh-cn/web/api/blob/type/index.md | 2 +- files/zh-cn/web/api/file/index.md | 4 +-- .../zh-cn/web/api/file/lastmodified/index.md | 12 +++---- .../web/api/file/lastmodifieddate/index.md | 10 +++--- files/zh-cn/web/api/file_api/index.md | 5 +-- .../index.md | 21 +++++------ files/zh-cn/web/api/filelist/index.md | 7 ++-- files/zh-cn/web/api/filereader/index.md | 4 +-- .../api/filereader/readasarraybuffer/index.md | 2 +- .../filereader/readasbinarystring/index.md | 2 +- .../web/api/filereader/readasdataurl/index.md | 2 +- .../web/api/filereader/readastext/index.md | 4 +-- .../web/api/filereader/readystate/index.md | 10 +++--- .../filereadersync/filereadersync/index.md | 2 +- .../readasbinarystring/index.md | 2 +- .../api/url/createobjecturl_static/index.md | 4 +-- .../api/url/revokeobjecturl_static/index.md | 2 +- 19 files changed, 88 insertions(+), 47 deletions(-) create mode 100644 files/zh-cn/web/api/blob/bytes/index.md diff --git a/files/zh-cn/web/api/blob/bytes/index.md b/files/zh-cn/web/api/blob/bytes/index.md new file mode 100644 index 00000000000000..1ac80778ed31e2 --- /dev/null +++ b/files/zh-cn/web/api/blob/bytes/index.md @@ -0,0 +1,36 @@ +--- +title: Blob：bytes() 方法 +slug: Web/API/Blob/bytes +l10n: + sourceCommit: 5ee9d033cacad3a031562be16be43c55a838cc4f +--- + +{{APIRef("File API")}}{{AvailableInWorkers}} + +{{domxref("Blob")}} 接口的 **`bytes()`** 方法返回一个 {{jsxref("Promise")}}，该 {{jsxref("Promise")}} 兑现为一个包含 blob 内容的字节数组的 {{jsxref("Uint8Array")}}。 + +## 语法 + +```js-nolint +bytes() +``` + +### 参数 + +无。 + +### 返回值 + +一个兑现包含 blob 数据的 {{jsxref("Uint8Array")}} 对象的 {{jsxref("Promise")}}。 + +### 异常 + +例如，如果用于获取 Blob 数据的读取器抛出异常，则该方法将拒绝返回的 {{jsxref("Promise")}}。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} diff --git a/files/zh-cn/web/api/blob/index.md b/files/zh-cn/web/api/blob/index.md index ae42dc12817d50..758c1541942451 100644 --- a/files/zh-cn/web/api/blob/index.md +++ b/files/zh-cn/web/api/blob/index.md @@ -2,7 +2,7 @@ title: Blob slug: Web/API/Blob l10n: - sourceCommit: 367b982b93c07f7f99e7bb768a6bf326fa5198e6 + sourceCommit: de2ef1e9950eebbacdd55f072dfe03014d113bbd --- {{APIRef("File API")}}{{AvailableInWorkers}} @@ -33,6 +33,8 @@ Blob 表示的不一定是 JavaScript 原生格式的数据。{{DOMxRef("File")} - {{DOMxRef("Blob.arrayBuffer()")}} - : 返回一个 promise，其会兑现一个包含 `Blob` 所有内容的二进制格式的 {{jsxref("ArrayBuffer")}}。 +- {{DOMxRef("Blob.bytes()")}} + - : 返回一个 promise，其会兑现一个包含 `Blob` 内容的 {{jsxref("Uint8Array")}}。 - {{DOMxRef("Blob.slice()")}} - : 返回一个新的 `Blob` 对象，其中包含调用它的 blob 的指定字节范围内的数据。 - {{DOMxRef("Blob.stream()")}} diff --git a/files/zh-cn/web/api/blob/type/index.md b/files/zh-cn/web/api/blob/type/index.md index a4ba70c965f820..b04ba0cc1597f0 100644 --- a/files/zh-cn/web/api/blob/type/index.md +++ b/files/zh-cn/web/api/blob/type/index.md @@ -2,7 +2,7 @@ title: Blob：type 属性 slug: Web/API/Blob/type l10n: - sourceCommit: 84a9afd94f497d4173bde131731ef6bdf0b6135d + sourceCommit: be8f7f155a48e11b30c240f8731afb1845f85378 --- {{APIRef("File API")}}{{AvailableInWorkers}} diff --git a/files/zh-cn/web/api/file/index.md b/files/zh-cn/web/api/file/index.md index b99d4fe68a0af0..8dbaf7f9afe65e 100644 --- a/files/zh-cn/web/api/file/index.md +++ b/files/zh-cn/web/api/file/index.md @@ -2,7 +2,7 @@ title: File slug: Web/API/File l10n: - sourceCommit: 467508d83e320be0680f334c3455d3cc232bce42 + sourceCommit: 58ad1df59f2ffb9ecab4e27fe1bdf1eb5a55f89b --- {{APIRef("File API")}}{{AvailableInWorkers}} @@ -11,7 +11,7 @@ l10n: `File` 对象通常从用户使用 {{HTMLElement("input")}} 元素选择文件返回的 {{DOMxRef("FileList")}} 对象中检索，或者从拖放操作返回的 {{DOMxRef("DataTransfer")}} 对象中检索。 -`File` 对象是一种特定类型的 {{DOMxRef("Blob")}}，并且可以在 Blob 可以使用的任何上下文中使用。特别是，{{DOMxRef("FileReader")}}、{{DOMxRef("URL.createObjectURL_static", "URL.createObjectURL()")}}、{{DOMxRef("createImageBitmap()")}}、{{domxref("fetch()")}} 方法的 [`body`](/zh-CN/docs/Web/API/fetch#body) 选项和 {{DOMxRef("XMLHttpRequest", "", "send( )")}} 都可以接收 `Blob` 对象和 `File` 对象。 +`File` 对象是一种特定类型的 {{DOMxRef("Blob")}}，并且可以在 Blob 可以使用的任何上下文中使用。特别是，{{DOMxRef("FileReader")}}、{{DOMxRef("URL.createObjectURL_static", "URL.createObjectURL()")}}、{{DOMxRef("createImageBitmap()")}}、{{domxref("Window/fetch", "fetch()")}} 方法的 [`body`](/zh-CN/docs/Web/API/RequestInit#body) 选项和 {{DOMxRef("XMLHttpRequest.send()")}} 都可以接收 `Blob` 对象和 `File` 对象。 参见[在 Web 应用程序使用文件](/zh-CN/docs/Web/API/File_API/Using_files_from_web_applications)了解更多信息和例子。 diff --git a/files/zh-cn/web/api/file/lastmodified/index.md b/files/zh-cn/web/api/file/lastmodified/index.md index 2d1c4791289f39..b0438bd2cb5553 100644 --- a/files/zh-cn/web/api/file/lastmodified/index.md +++ b/files/zh-cn/web/api/file/lastmodified/index.md @@ -2,7 +2,7 @@ title: File：lastModified 属性 slug: Web/API/File/lastModified l10n: - sourceCommit: 8fd2ee72038310e3ecc387df235ffac1cb08775c + sourceCommit: 73b2b6ee411ac094b9fc57dafac6f9c232fc20d9 --- {{APIRef("File API")}}{{AvailableInWorkers}} @@ -59,7 +59,7 @@ filepicker.addEventListener("change", (event) => { ### 动态创建文件 -如果文件是动态创建的，可以在 {{domxref("File.File()", "new File()")}} 构造函数中提供最后修改时间。如果未提供则会继承文件对象被创建时的 {{jsxref("Date.now()")}}。 +如果文件是动态创建的，可以在 {{domxref("File.File()", "File()")}} 构造函数中提供最后修改时间。如果未提供该参数，`lastModified` 将会继承文件对象被创建时的时间（来自 {{jsxref("Date.now()")}}）。 ```js const fileWithDate = new File([], "file.bin", { @@ -73,13 +73,14 @@ console.log(fileWithoutDate.lastModified); // 返回当前时间 ## 时间精度降低 -为了防止计时攻击和{{glossary("fingerprinting", "指纹识别")}}，`someFile.lastModifiedDate.getTime()` 的精度可能会根据浏览器设置进行舍入。 +为了防止计时攻击和[指纹识别](/zh-CN/docs/Glossary/Fingerprinting)，`someFile.lastModified` 的精度可能会根据浏览器设置进行舍入。在 Firefox 中，`privacy.reduceTimerPrecision` 首选项默认启用，默认为 2ms。你还可以启用 `privacy.resistFingerprinting`，在这种情况下精度将为 100ms 或 `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` 的值，以较大者为准。 -在 Firefox 中，`privacy.reduceTimerPrecision` 首选项默认启用，在 Firefox 59 中默认为 20 微秒；Firefox 60 中为 2 毫秒。 +例如，在降低时间精度的情况下，`someFile.lastModified` 的结果将始终是 2 的倍数，或者在启用 `privacy.resistFingerprinting` 的情况下为 100 的倍数（或 `privacy.resistFingerprinting.reduceTimerPrecision.microseconds`）。 ```js // Firefox 60 中的时间精度降低（2 毫秒） someFile.lastModifiedDate.getTime(); +// 可能是： // 1519211809934 // 1519211810362 // 1519211811670 @@ -87,14 +88,13 @@ someFile.lastModifiedDate.getTime(); // 启用 `privacy.resistFingerprinting` 会降低时间精度 someFile.lastModifiedDate.getTime(); +// 可能是： // 1519129853500 // 1519129858900 // 1519129864400 // … ``` -在 Firefox 中，你还可以启用 `privacy.resistFingerprinting`，精度将为 100 毫秒 或 `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` 的值，以较大者为准。 - ## 规范 {{Specifications}} diff --git a/files/zh-cn/web/api/file/lastmodifieddate/index.md b/files/zh-cn/web/api/file/lastmodifieddate/index.md index 4e3304e9c1c333..0bcf0afc686fa1 100644 --- a/files/zh-cn/web/api/file/lastmodifieddate/index.md +++ b/files/zh-cn/web/api/file/lastmodifieddate/index.md @@ -2,7 +2,7 @@ title: File：lastModifiedDate 属性 slug: Web/API/File/lastModifiedDate l10n: - sourceCommit: 367b982b93c07f7f99e7bb768a6bf326fa5198e6 + sourceCommit: 3b5a1c0dfd59257c0a51052a9efa7b0108f8ecca --- {{APIRef("File API")}}{{AvailableInWorkers}}{{Deprecated_Header}}{{Non-standard_Header}} @@ -26,13 +26,14 @@ for (const file of fileInput.files) { ## 时间精度降低 -为了防止计时攻击和{{glossary("fingerprinting", "指纹识别")}}，`someFile.lastModifiedDate.getTime()` 的精度可能会根据浏览器设置进行舍入。 +为了防止计时攻击和[指纹识别](/zh-CN/docs/Glossary/Fingerprinting)，`someFile.lastModifiedDate` 的精度可能会根据浏览器设置进行舍入。在 Firefox 中，`privacy.reduceTimerPrecision` 首选项默认启用，默认为 2ms。你还可以启用 `privacy.resistFingerprinting`，在这种情况下精度将为 100ms 或 `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` 的值，以较大者为准。 -在 Firefox 中，`privacy.reduceTimerPrecision` 首选项默认启用，在 Firefox 59 中默认为 20 微秒；Firefox 60 中为 2 毫秒。 +例如，在降低时间精度的情况下，`someFile.lastModifiedDate.getTime()` 的结果将始终是 2 的倍数，或者在启用 `privacy.resistFingerprinting` 的情况下为 100 的倍数（或 `privacy.resistFingerprinting.reduceTimerPrecision.microseconds`）。 ```js // Firefox 60 中的时间精度降低（2 毫秒） someFile.lastModifiedDate.getTime(); +// 可能是： // 1519211809934 // 1519211810362 // 1519211811670 @@ -40,14 +41,13 @@ someFile.lastModifiedDate.getTime(); // 启用 `privacy.resistFingerprinting` 会降低时间精度 someFile.lastModifiedDate.getTime(); +// 可能是： // 1519129853500 // 1519129858900 // 1519129864400 // … ``` -在 Firefox 中，你还可以启用 `privacy.resistFingerprinting`，精度将为 100 毫秒或 `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` 的值，以较大者为准。 - ## 规范 _尽管存在于文件 API 规范的早期草案中，但此属性已从中删除，并且此属性现在是非标准的。使用 {{domxref("File.lastModified")}} 代替。_ diff --git a/files/zh-cn/web/api/file_api/index.md b/files/zh-cn/web/api/file_api/index.md index e0c90ace5fc95a..1a107cd676f2ef 100644 --- a/files/zh-cn/web/api/file_api/index.md +++ b/files/zh-cn/web/api/file_api/index.md @@ -2,7 +2,7 @@ title: 文件 API slug: Web/API/File_API l10n: - sourceCommit: 497d322c61511b11e4877a77660f8d7b394a8277 + sourceCommit: 73b2b6ee411ac094b9fc57dafac6f9c232fc20d9 --- {{DefaultAPISidebar("File API")}}{{AvailableInWorkers}} @@ -78,7 +78,7 @@ fileInput.addEventListener("change", () => { }); ``` -### 运行结果 +### 结果 {{EmbedLiveSample("读取文件", "", "300")}} @@ -89,4 +89,5 @@ fileInput.addEventListener("change", () => { ## 参见 - [``](/zh-CN/docs/Web/HTML/Element/input/file)：文件 input 元素 +- {{domxref("Blob.text()")}} - {{domxref("DataTransfer")}} 接口 diff --git a/files/zh-cn/web/api/file_api/using_files_from_web_applications/index.md b/files/zh-cn/web/api/file_api/using_files_from_web_applications/index.md index 8d9a4d26b50f73..4d12ad024c540f 100644 --- a/files/zh-cn/web/api/file_api/using_files_from_web_applications/index.md +++ b/files/zh-cn/web/api/file_api/using_files_from_web_applications/index.md @@ -2,7 +2,7 @@ title: 在 web 应用程序中使用文件 slug: Web/API/File_API/Using_files_from_web_applications l10n: - sourceCommit: 94ef07a7b073c2663cbace0667bdb717a40bfa28 + sourceCommit: 88467d31d2ad7bdfade8b38ec69f6702fee080d1 --- {{DefaultAPISidebar("File API")}}{{AvailableInWorkers}} @@ -335,16 +335,17 @@ fileSelect.addEventListener( fileElem.addEventListener("change", handleFiles, false); function handleFiles() { + fileList.textContent = ""; if (!this.files.length) { - fileList.innerHTML = "

没有选择任何文件！

"; + const p = document.createElement("p"); + p.textContent = "没有选择任何文件！"; + fileList.appendChild(p); } else { - fileList.innerHTML = ""; const list = document.createElement("ul"); fileList.appendChild(list); for (let i = 0; i < this.files.length; i++) { const li = document.createElement("li"); list.appendChild(li); - const img = document.createElement("img"); img.src = URL.createObjectURL(this.files[i]); img.height = 60; @@ -353,7 +354,7 @@ function handleFiles() { }; li.appendChild(img); const info = document.createElement("span"); - info.innerHTML = `${this.files[i].name}: ${this.files[i].size} bytes`; + info.textContent = `${this.files[i].name}：${this.files[i].size} 字节`; li.appendChild(info); } } @@ -400,7 +401,7 @@ function sendFiles() { } ``` -第 2 行获取了文档中所有 CSS 类为 `obj` 的元素的 {{DOMxRef("NodeList")}}，命名为 `imgs`。在我们的例子中，这些是包含所有图像缩略图的列表。有了这个列表，遍历并为每一项创建一个新的 `FileUpload` 实例就很简单了。每个实例都可以处理相应文件的上传。 +`document.querySelectorAll` 获取了文档中所有 CSS 类为 `obj` 的元素的 {{DOMxRef("NodeList")}}，命名为 `imgs`。在我们的例子中，这些是包含所有图像缩略图的列表。有了这个列表，遍历并为每一项创建一个新的 `FileUpload` 实例就很简单了。每个实例都可以处理相应文件的上传。 ### 处理文件的上传过程 @@ -486,14 +487,14 @@ function createThrobber(img) { 这个例子演示了如何异步上传文件，在服务器端使用了 PHP，在客户端使用了 JavaScript。 -```js +```php +?> @@ -544,7 +545,7 @@ if (isset($_FILES['myFile'])) { 对象 URL 可以用于图像之外的其他东西！它可以用于显示嵌入的 PDF 文件或任何其他浏览器能显示的资源。 -在 Firefox 中，要让 PDF 嵌入式地显示在 iframe 中（而不是作为下载的文件弹出），必须将 `pdfjs.disabled` 设为 `false` {{non-standard_inline()}}. +在 Firefox 中，要让 PDF 嵌入式地显示在 iframe 中（而不是作为下载的文件弹出），必须将 `pdfjs.disabled` 设为 `false`。 ```html diff --git a/files/zh-cn/web/api/filelist/index.md b/files/zh-cn/web/api/filelist/index.md index a8823ac45d943a..e1c2f781e54b83 100644 --- a/files/zh-cn/web/api/filelist/index.md +++ b/files/zh-cn/web/api/filelist/index.md @@ -2,7 +2,7 @@ title: FileList slug: Web/API/FileList l10n: - sourceCommit: 8fd2ee72038310e3ecc387df235ffac1cb08775c + sourceCommit: cfa628aedb53a83b315943ef19fa6c73298fb7d5 --- {{APIRef("File API")}}{{AvailableInWorkers}} @@ -21,8 +21,9 @@ l10n: const file = document.getElementById("fileItem").files[0]; ``` -> [!NOTE] -> 此接口的出现是[对创建不可修改列表的一次尝试](https://stackoverflow.com/questions/74630989/why-use-domstringlist-rather-than-an-array/74641156#74641156)，并且仅是出于避免破坏已经在使用它的代码而继续受到支持。现代 API 使用围绕 ECMAScript 数组类型的类型，因此你可以像 ECMAScript 数组一样对待它们，同时对其使用施加额外的语义（例如使其项目只读）。 +此接口[试图创建不可修改的列表](https://stackoverflow.com/questions/74630989/why-use-domstringlist-rather-than-an-array/74641156#74641156)，为了不破坏已经使用该接口的代码，才继续支持该接口。现代 API 使用基于 JavaScript [数组](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array)的类型来表示列表结构，从而提供许多数组方法，同时对其使用施加额外的语义（例如使其项目为只读）。 + +这些历史原因并不意味着你作为开发人员应该避免使用 `FileList`。你不会自己创建 `FileList` 对象，而是从诸如 {{domxref("HTMLInputElement.files")}} 之类的 API 获取它们，并且这些 API 并未弃用。但是，请注意与真实数组的语义差异。 ## 实例属性 diff --git a/files/zh-cn/web/api/filereader/index.md b/files/zh-cn/web/api/filereader/index.md index ff1d520f9c9182..d61b20668636d9 100644 --- a/files/zh-cn/web/api/filereader/index.md +++ b/files/zh-cn/web/api/filereader/index.md @@ -2,7 +2,7 @@ title: FileReader slug: Web/API/FileReader l10n: - sourceCommit: c2f4a396c85a8f875b592913279e6f116072f622 + sourceCommit: 58ad1df59f2ffb9ecab4e27fe1bdf1eb5a55f89b --- {{APIRef("File API")}}{{AvailableInWorkers}} @@ -11,7 +11,7 @@ l10n: 文件对象可以从用户使用 {{HTMLElement("input")}} 元素选择文件而返回的 {{domxref("FileList")}} 对象中获取，或者从拖放操作的 {{ domxref("DataTransfer")}} 对象中获取。 -`FileReader` 只能访问用户明确选择的文件内容，无论是使用 HTML `` 元素还是通过拖放。它不能用于从用户的文件系统中按路径名读取文件。要按路径名读取客户端文件系统上的文件，请使用[文件系统访问 API](/zh-CN/docs/Web/API/File_System_API)。要读取服务器端文件，请使用 {{domxref("fetch()")}}，如果跨源读取，则需要 [CORS](/zh-CN/docs/Web/HTTP/CORS) 权限。 +`FileReader` 只能访问用户明确选择的文件内容，无论是使用 HTML `` 元素还是通过拖放。它不能用于从用户的文件系统中按路径名读取文件。要按路径名读取客户端文件系统上的文件，请使用[文件系统访问 API](/zh-CN/docs/Web/API/File_System_API)。要读取服务器端文件，请使用 {{domxref("Window/fetch", "fetch()")}}，如果跨源读取，则需要 [CORS](/zh-CN/docs/Web/HTTP/CORS) 权限。 {{InheritanceDiagram}} diff --git a/files/zh-cn/web/api/filereader/readasarraybuffer/index.md b/files/zh-cn/web/api/filereader/readasarraybuffer/index.md index b6d264b839ab52..183193fd22ecdd 100644 --- a/files/zh-cn/web/api/filereader/readasarraybuffer/index.md +++ b/files/zh-cn/web/api/filereader/readasarraybuffer/index.md @@ -2,7 +2,7 @@ title: FileReader：readAsArrayBuffer() 方法 slug: Web/API/FileReader/readAsArrayBuffer l10n: - sourceCommit: e43bfd9b4a6c363a4ba7ef6ffa64c09b38fd111b + sourceCommit: d8f04d843dd81ab8cea1cfc0577ae3c5c9b77d5c --- {{APIRef("File API")}}{{AvailableInWorkers}} diff --git a/files/zh-cn/web/api/filereader/readasbinarystring/index.md b/files/zh-cn/web/api/filereader/readasbinarystring/index.md index f40eda5fcff1dd..925df2d339d3cb 100644 --- a/files/zh-cn/web/api/filereader/readasbinarystring/index.md +++ b/files/zh-cn/web/api/filereader/readasbinarystring/index.md @@ -2,7 +2,7 @@ title: FileReader：readAsBinaryString() 方法 slug: Web/API/FileReader/readAsBinaryString l10n: - sourceCommit: e43bfd9b4a6c363a4ba7ef6ffa64c09b38fd111b + sourceCommit: d8f04d843dd81ab8cea1cfc0577ae3c5c9b77d5c --- {{APIRef("File API")}}{{AvailableInWorkers}}{{Deprecated_Header}} diff --git a/files/zh-cn/web/api/filereader/readasdataurl/index.md b/files/zh-cn/web/api/filereader/readasdataurl/index.md index da312c621f1ee0..2d6589fa07bb62 100644 --- a/files/zh-cn/web/api/filereader/readasdataurl/index.md +++ b/files/zh-cn/web/api/filereader/readasdataurl/index.md @@ -2,7 +2,7 @@ title: FileReader：readAsDataURL() 方法 slug: Web/API/FileReader/readAsDataURL l10n: - sourceCommit: e43bfd9b4a6c363a4ba7ef6ffa64c09b38fd111b + sourceCommit: 6b730e3cfdf0f51940b44efa71bd59c84ce76e71 --- {{APIRef("File API")}}{{AvailableInWorkers}} diff --git a/files/zh-cn/web/api/filereader/readastext/index.md b/files/zh-cn/web/api/filereader/readastext/index.md index c3fdb02a71cfc3..68f819e1de52ef 100644 --- a/files/zh-cn/web/api/filereader/readastext/index.md +++ b/files/zh-cn/web/api/filereader/readastext/index.md @@ -2,10 +2,10 @@ title: FileReader：readAsText() 方法 slug: Web/API/FileReader/readAsText l10n: - sourceCommit: e43bfd9b4a6c363a4ba7ef6ffa64c09b38fd111b + sourceCommit: d8f04d843dd81ab8cea1cfc0577ae3c5c9b77d5c --- -{{APIRef("File API")}} +{{APIRef("File API")}}{{AvailableInWorkers}} {{domxref("FileReader")}} 接口的 **`readAsText()`** 方法用于读取指定的 {{domxref("Blob")}} 或 {{domxref("File")}} 对象的内容。当读操作完成时，{{domxref("FileReader.readyState","readyState")}} 属性更改为 `DONE`，并触发 {{domxref("FileReader/loadend_event", "loadend")}} 事件，并且 {{domxref("FileReader.result","result")}} 属性包含表示文件内容的文本字符串。 diff --git a/files/zh-cn/web/api/filereader/readystate/index.md b/files/zh-cn/web/api/filereader/readystate/index.md index bd2535294a109a..e5094178fa29fb 100644 --- a/files/zh-cn/web/api/filereader/readystate/index.md +++ b/files/zh-cn/web/api/filereader/readystate/index.md @@ -2,7 +2,7 @@ title: FileReader：readyState 属性 slug: Web/API/FileReader/readyState l10n: - sourceCommit: 541c4d10b9a1fb1c3400087f2514cd7358f4298f + sourceCommit: e932acf254c5dd06e26798b9d8fe01ce8dab1fb7 --- {{APIRef("File API")}}{{AvailableInWorkers}} @@ -11,13 +11,13 @@ l10n: ## 值 -一个数值，是 {{domxref("FileReader")}} API 定义的三个可能状态的常量之一。 +一个数字，它是 {{domxref("FileReader")}} 接口上定义的三个可能的状态常量之一： -- `FileReader.EMPTY` +- `FileReader.EMPTY`（0） - : Reader 已创建，但尚未调用任何读取方法。 -- `FileReader.LOADING` +- `FileReader.LOADING`（1） - : 已调用读取方法。正在读取 {{domxref("File")}} 或 {{domxref("Blob")}}，尚未发生错误。 -- `FileReader.DONE` +- `FileReader.DONE`（2） - : 读取操作完成。这可能意味着：整个 {{domxref("File")}} 或 {{domxref("Blob")}} 已读入内存，发生文件读取错误，或 {{domxref("FileReader.abort()", "abort()")}} 被调用并且读取被取消。 ## 示例 diff --git a/files/zh-cn/web/api/filereadersync/filereadersync/index.md b/files/zh-cn/web/api/filereadersync/filereadersync/index.md index d12c078843cc9d..dc8bcd2e5c5511 100644 --- a/files/zh-cn/web/api/filereadersync/filereadersync/index.md +++ b/files/zh-cn/web/api/filereadersync/filereadersync/index.md @@ -2,7 +2,7 @@ title: FileReaderSync：FileReaderSync() 构造函数 slug: Web/API/FileReaderSync/FileReaderSync l10n: - sourceCommit: 1dad49fff047729e8dcca313a45ccb4cc2d2526f + sourceCommit: d8f04d843dd81ab8cea1cfc0577ae3c5c9b77d5c --- {{APIRef("File API")}} {{AvailableInWorkers("worker_except_service")}} diff --git a/files/zh-cn/web/api/filereadersync/readasbinarystring/index.md b/files/zh-cn/web/api/filereadersync/readasbinarystring/index.md index aedb8012f63891..228921e907ef21 100644 --- a/files/zh-cn/web/api/filereadersync/readasbinarystring/index.md +++ b/files/zh-cn/web/api/filereadersync/readasbinarystring/index.md @@ -2,7 +2,7 @@ title: FileReaderSync：readAsBinaryString() 方法 slug: Web/API/FileReaderSync/readAsBinaryString l10n: - sourceCommit: 502e8c3f0be95c6f42afe6a72113b029b290b9e8 + sourceCommit: d8f04d843dd81ab8cea1cfc0577ae3c5c9b77d5c --- {{APIRef("File API")}}{{deprecated_header}} {{AvailableInWorkers("worker_except_service")}} diff --git a/files/zh-cn/web/api/url/createobjecturl_static/index.md b/files/zh-cn/web/api/url/createobjecturl_static/index.md index fcc6117f9fa9d8..83ca33fa5f1226 100644 --- a/files/zh-cn/web/api/url/createobjecturl_static/index.md +++ b/files/zh-cn/web/api/url/createobjecturl_static/index.md @@ -2,7 +2,7 @@ title: URL：createObjectURL() 静态方法 slug: Web/API/URL/createObjectURL_static l10n: - sourceCommit: 367b982b93c07f7f99e7bb768a6bf326fa5198e6 + sourceCommit: 22080a7cc403f7f45c8e85065b182c9f0d4d383c --- {{APIRef("File API")}} {{AvailableInWorkers("window_and_worker_except_service")}} @@ -48,7 +48,7 @@ URL.createObjectURL(object) 在较早版本的媒体源规范中，需要为 {{domxref("MediaStream")}} 创建一个对象 URL 才能将流附加到 {{HTMLElement("video")}} 元素。这已不再必要，浏览器正在逐步取消对此的支持。 > [!WARNING] -> 如果你还有依赖于 {{domxref("URL.createObjectURL_static", "createObjectURL()")}} 将流附加到媒体元素的代码，你需要更新代码并将 {{domxref("HTMLMediaElement.srcObject", "srcObject")}} 设置为 `MediaStream`。 +> 如果你还有依赖于 `createObjectURL()` 将流附加到媒体元素的代码，你需要更新代码并将 {{domxref("HTMLMediaElement.srcObject", "srcObject")}} 设置为 `MediaStream`。 ## 规范 diff --git a/files/zh-cn/web/api/url/revokeobjecturl_static/index.md b/files/zh-cn/web/api/url/revokeobjecturl_static/index.md index 7d0f9b64c068c6..202e356d902520 100644 --- a/files/zh-cn/web/api/url/revokeobjecturl_static/index.md +++ b/files/zh-cn/web/api/url/revokeobjecturl_static/index.md @@ -2,7 +2,7 @@ title: URL：revokeObjectURL() 静态方法 slug: Web/API/URL/revokeObjectURL_static l10n: - sourceCommit: 367b982b93c07f7f99e7bb768a6bf326fa5198e6 + sourceCommit: 216794e76611c18e53222bb8efa570e898e990de --- {{APIRef("File API")}} {{AvailableInWorkers("window_and_worker_except_service")}} From 0155042c142fa0a729f554da5fa3efc93eadc34d Mon Sep 17 00:00:00 2001 From: A1lo Date: Wed, 18 Sep 2024 12:04:44 +0800 Subject: [PATCH 010/365] zh-cn: update the translation of the `HTMLElement.click()` method (#23634) Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- .../zh-cn/web/api/htmlelement/click/index.md | 29 ++++++++++++------- 1 file changed, 18 insertions(+), 11 deletions(-) diff --git a/files/zh-cn/web/api/htmlelement/click/index.md b/files/zh-cn/web/api/htmlelement/click/index.md index 0ff7eb1e5a003e..03f032fd385dce 100644 --- a/files/zh-cn/web/api/htmlelement/click/index.md +++ b/files/zh-cn/web/api/htmlelement/click/index.md @@ -1,14 +1,13 @@ --- -title: HTMLElement.click() +title: HTMLElement：click() 方法 slug: Web/API/HTMLElement/click +l10n: + sourceCommit: bf0b6c9ae5845fdfca1398541ed26d9946db2495 --- {{ APIRef("HTML DOM") }} -**`HTMLElement.click()`** 方法可以用来模拟鼠标左键单击一个元素。 - -当在支持 `click()` 方法的元素上使用该方法（例如 -{{HTMLElement("input")}}) ，将会产生该元素的一个点击事件。这个事件会冒泡上升到文档树（或事件链）中更高的元素，并触发它们的点击事件。 +**`HTMLElement.click()`** 方法模拟鼠标单击元素。当在某个元素上调用时，会触发元素的 {{domxref("Element/click_event", "click")}} 事件（除非该元素设置了 [`disabled`](/zh-CN/docs/Web/HTML/Attributes/disabled) 属性）。 ## 语法 @@ -16,9 +15,17 @@ slug: Web/API/HTMLElement/click click() ``` +### 参数 + +无。 + +### 返回值 + +无（{{jsxref("undefined")}}）。 + ## 示例 -当鼠标移动过复选框时模拟一个点击事件： +当鼠标移动过复选框时模拟鼠标点击事件： ### HTML @@ -28,7 +35,7 @@ click() type="checkbox" id="myCheck" onmouseover="myFunction()" - onclick="alert('click event occurred')" /> + onclick="alert('发生点击事件')" /> ``` @@ -51,8 +58,8 @@ function myFunction() { ## 参见 -- 有关的事件处理 +- 有关的事件处理器 - - {{domxref("GlobalEventHandlers.onclick")}} - - {{domxref("GlobalEventHandlers.ondblclick")}} - - {{domxref("GlobalEventHandlers.onauxclick")}} + - {{domxref("Element.click_event", "Element.onclick")}} + - {{domxref("Element.dblclick_event", "Element.ondblclick")}} + - {{domxref("Element.auxclick_event", "Element.onauxclick")}} From 072cee95e558966167c7aa18703ea047d888fe53 Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Wed, 18 Sep 2024 15:36:05 +0800 Subject: [PATCH 011/365] [zh-CN]: update translation for Broadcast Channel API - part II (#23375) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- .../web/api/broadcastchannel/close/index.md | 20 ++--- .../broadcastchannel/message_event/index.md | 26 ++++--- .../messageerror_event/index.md | 73 ++++++++++--------- .../api/broadcastchannel/postmessage/index.md | 30 ++++++-- 4 files changed, 86 insertions(+), 63 deletions(-) diff --git a/files/zh-cn/web/api/broadcastchannel/close/index.md b/files/zh-cn/web/api/broadcastchannel/close/index.md index 720574f2abe9eb..f2dc336436482e 100644 --- a/files/zh-cn/web/api/broadcastchannel/close/index.md +++ b/files/zh-cn/web/api/broadcastchannel/close/index.md @@ -1,27 +1,27 @@ --- -title: BroadcastChannel.close() +title: BroadcastChannel：close() 方法 slug: Web/API/BroadcastChannel/close +l10n: + sourceCommit: 50a45d52fd9f45f1ca30b546af5920d0ccda82dc --- -{{APIRef("BroadCastChannel API")}} +{{APIRef("BroadCastChannel API")}} {{AvailableInWorkers}} -通过调用 **`BroadcastChannel.close()`** 方法，可以马上断开其与对应频道的关联，并让其被垃圾回收。这是必要的步骤，因为浏览器没有其他方式知道频道不再被需要。 - -{{AvailableInWorkers}} +{{domxref("BroadcastChannel")}} 接口的 **`close()`** 方法终止与底层频道的连接，从而允许对对象进行垃圾回收。这是必须执行的步骤，因为浏览器没有其他方法可以知道不再需要此频道。 ## 语法 -```plain -var str = channel.close(); +```js-nolint +close() ``` ## 示例 ```js // 连接到指定频道 -var bc = new BroadcastChannel("test_channel"); +const bc = new BroadcastChannel("test_channel"); -// 其他操作 (如：postMessage, …) +// 其他操作（如：postMessage、……） // 当完成后，断开与频道的连接 bc.close(); @@ -37,4 +37,4 @@ bc.close(); ## 参见 -- {{domxref("BroadcastChannel")}}, the interface it belongs to. +- 所属接口：{{domxref("BroadcastChannel")}} diff --git a/files/zh-cn/web/api/broadcastchannel/message_event/index.md b/files/zh-cn/web/api/broadcastchannel/message_event/index.md index b5c2b3e1bb252b..38888d824afffd 100644 --- a/files/zh-cn/web/api/broadcastchannel/message_event/index.md +++ b/files/zh-cn/web/api/broadcastchannel/message_event/index.md @@ -1,19 +1,21 @@ --- title: BroadcastChannel：message 事件 slug: Web/API/BroadcastChannel/message_event +l10n: + sourceCommit: 50a45d52fd9f45f1ca30b546af5920d0ccda82dc --- -{{APIRef}} +{{APIRef("BroadCastChannel API")}}{{AvailableInWorkers}} -当频道收到一条消息时，会在关联的 {{domxref('BroadcastChannel')}} 对象上触发 `message` 事件。 +{{domxref("BroadcastChannel")}} 接口的 **`message`** 事件在频道收到一条消息时触发。 ## 语法 在 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等方法中使用事件名称，或设置事件处理器属性。 -```js -addEventListener("message", (event) => {}); -onmessage = (event) => {}; +```js-nolint +addEventListener("message", (event) => { }) +onmessage = (event) => { } ``` ## 事件类型 @@ -26,20 +28,20 @@ onmessage = (event) => {}; _除了下面列出的属性之外，还可以使用父接口 {{domxref("Event")}} 的属性。_ -- {{domxref("MessageEvent.data", "data")}} {{readonlyInline}} +- {{domxref("MessageEvent.data", "data")}} {{ReadOnlyInline}} - : 由消息发送者发送的数据。 -- {{domxref("MessageEvent.origin", "origin")}} {{readonlyInline}} +- {{domxref("MessageEvent.origin", "origin")}} {{ReadOnlyInline}} - : 一个表示消息发送者来源的字符串。 -- {{domxref("MessageEvent.lastEventId", "lastEventId")}} {{readonlyInline}} +- {{domxref("MessageEvent.lastEventId", "lastEventId")}} {{ReadOnlyInline}} - : 一个表示事件唯一 ID 的字符串。 -- {{domxref("MessageEvent.source", "source")}} {{readonlyInline}} +- {{domxref("MessageEvent.source", "source")}} {{ReadOnlyInline}} - : 一个*消息事件源*，可以是一个用于表示消息发送者的 {{glossary("WindowProxy")}}、{{domxref("MessagePort")}} 或 {{domxref("ServiceWorker")}} 对象。 -- {{domxref("MessageEvent.ports", "ports")}} {{readonlyInline}} +- {{domxref("MessageEvent.ports", "ports")}} {{ReadOnlyInline}} - : 一个与发送消息（通过频道发送消息或向 SharedWorker 发送消息）的频道相关联的 {{domxref("MessagePort")}} 对象的数组。 ## 示例 -在这个示例中，有一个 [` +``` + +この title がないと、埋め込みコンテンツが何であるかを特定するために ` +`srcdoc` を使用する場合、埋め込みコンテンツ内の相対 URL は埋め込みページの URL からの相対 URL で解決することに注意してください。埋め込みコンテンツ内の場所を指すアンカーリンクを使用したい場合は、ベース URL として `about:srcdoc` を明示的に指定する必要があります。 + +#### HTML + +```html-nolint +
+
9 分前の jc の投稿
+ +
``` -この title がないと、埋め込みコンテンツが何であるかを特定するために ` + ``` -既定の許可リストは `self` で、文書内の任意のコンテンツに画面キャプチャを使用させることができます。 - -機能ポリシーをどのように使うかについてのより深い解説については、[機能ポリシーの使用](/ja/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy)を参照してください。 +既定の許可リストは `self` で、同一オリジン内のあらゆるコンテンツに画面キャプチャを使用させることができます。 ## 仕様書 -| 仕様書 | -| ------------------------------------------------------------------ | -| [Screen Capture](https://w3c.github.io/mediacapture-screen-share/) | +{{Specifications}} ## ブラウザーの互換性 From e2cd0ab39df8acf834a7c60361cba80751b9d7c5 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 18 Sep 2024 05:51:53 +0900 Subject: [PATCH 106/365] =?UTF-8?q?2024/07/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=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../using_screen_capture/index.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/files/ja/web/api/screen_capture_api/using_screen_capture/index.md b/files/ja/web/api/screen_capture_api/using_screen_capture/index.md index cf13b8e9664403..db9c5033fced72 100644 --- a/files/ja/web/api/screen_capture_api/using_screen_capture/index.md +++ b/files/ja/web/api/screen_capture_api/using_screen_capture/index.md @@ -2,7 +2,7 @@ title: 画面キャプチャ API の使用 slug: Web/API/Screen_Capture_API/Using_Screen_Capture l10n: - sourceCommit: 0f445d840bbe4361685121828e67413901705d21 + sourceCommit: 4f35a8237ee0842beb9cfef3354e05464ad7ce1a --- {{DefaultAPISidebar("Screen Capture API")}} @@ -63,13 +63,13 @@ function startCapture(displayMediaOptions) { } ``` -いずれにせよ、{{Glossary("user agent", "ユーザーエージェント")}}は、共有する画面領域を選択するようユーザーに促すユーザーインタフェースを提示して応答します。これらの `startCapture()` の実装はどちらも、キャプチャされた表示画像を含む {{domxref("MediaStream")}} を返します。 +いずれにせよ、{{Glossary("user agent", "ユーザーエージェント")}}は、共有する画面領域を選択するようユーザーに促すユーザーインターフェイスを提示して応答します。これらの `startCapture()` の実装はどちらも、キャプチャされた表示画像を含む {{domxref("MediaStream")}} を返します。 必要な画面の種類を指定する方法と、結果として得られるストリームを調整する他の方法については、以下の[オプションと制約](#オプションと制約)を参照してください。 ### キャプチャする表示面を選択するウィンドウの例 -[![Chrome のソース面を選ぶウィンドウの画面ショット](chrome-screen-capture-window.png)](Chrome-Screen-Capture-Window.png) +![Chrome のソース面を選ぶウィンドウの画面ショット](chrome-screen-capture-window.png) そして、キャプチャしたストリーム `captureStream` を、ストリームを入力として受け付けるあらゆるものに使用することができます。以下の[例](#例)は、ストリームを利用するためのいくつかの方法を示しています。 @@ -220,7 +220,7 @@ console.error = (msg) => (logElem.textContent = `${logElem.textContent}\nError: ${msg}`); ``` -これにより、おなじみの {{domxref("console/log_static", "console/log()")}} や {{domxref("console.error_static", "console.error()")}} などを使って、ドキュメント内のログボックスに情報を記録することができるようになります。 +これにより、おなじみの {{domxref("console/log_static", "console.log()")}} や {{domxref("console.error_static", "console.error()")}} などを使って、ドキュメント内のログボックスに情報を記録することができるようになります。 ##### 画面キャプチャの開始 @@ -228,7 +228,7 @@ console.error = (msg) => ```js async function startCapture() { - logElem.innerHTML = ""; + logElem.textContent = ""; try { videoElem.srcObject = @@ -284,13 +284,13 @@ HTML は簡単な紹介文から始まり、本題に入ります。 ```html

- This example shows you the contents of the selected part of your display. - Click the Start Capture button to begin. + この例では、ディスプレイの選択した部分の内容を表示します。 + キャプチャ開始ボタンをクリックすると開始します。

-   

@@ -333,7 +333,7 @@ HTML の主要な部分は以下の通りです。 最終的にはこのようになります。ブラウザーが画面キャプチャ API に対応している場合、"Start Capture" をクリックすると、共有する画面、ウィンドウ、タブを選択するための{{Glossary("user agent", "ユーザーエージェント")}}のインターフェイスが表示されます。 -{{EmbedLiveSample("単純な画面キャプチャ", 640, 800, "", "", "", "display-capture")}} +{{EmbedLiveSample("Streaming screen capture", 640, 800, "", "", "", "display-capture")}} ## セキュリティ From 6128cef52048c8447347045f15c9ecfee39d38ae Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 18 Sep 2024 06:15:06 +0900 Subject: [PATCH 107/365] =?UTF-8?q?2024/07/01=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/screenorientation/lock/index.md | 51 ++++++++++++------- 1 file changed, 33 insertions(+), 18 deletions(-) diff --git a/files/ja/web/api/screenorientation/lock/index.md b/files/ja/web/api/screenorientation/lock/index.md index de82674e34d23c..ef3ca5a8e64ab0 100644 --- a/files/ja/web/api/screenorientation/lock/index.md +++ b/files/ja/web/api/screenorientation/lock/index.md @@ -1,5 +1,6 @@ --- -title: ScreenOrientation.lock() +title: "ScreenOrientation: lock() メソッド" +short-title: lock() slug: Web/API/ScreenOrientation/lock l10n: sourceCommit: 84fc68f1674c9b2d1708fb38dc2824e228f9bb3f @@ -7,9 +8,9 @@ l10n: {{APIRef("Screen Orientation")}} -{{domxref("ScreenOrientation")}} インターフェイスの **`lock()`** プロパティは、含んでいる文書の向きを指定された向きに固定します。 +**`lock()`** は {{domxref("ScreenOrientation")}} インターフェイスのメソッドで、含んでいる文書の向きを指定された向きに固定します。 -通常、向きの固定はモバイルデバイスで、かつブラウザーがフルスクリーン表示になっているときのみ有効です。向きの固定に対応している場合、以下で挙げる引数の値全てで動作しなければなりません。 +通常、向きの固定はモバイル端末で、かつブラウザーが全画面表示になっているときのみ有効です。向きの固定に対応している場合、以下で挙げる引数の値全てで動作しなければなりません。 ## 構文 @@ -26,19 +27,27 @@ lock(orientation) - `"any"` - : `portrait-primary`、`portrait-secondary`、`landscape-primary`、`landscape-secondary` のいずれかです。 - `"natural"` - - : OS が定義する画面の自然な向きで、`portrait-primary` または `landscape-primary` のいずれかです。 + - : OS が定義する画面の自然な向きで、`portrait-primary` または `landscape-primary` のどちらかです。 - `"landscape"` - : 画面の幅が画面の高さより長い向きです。プラットフォームの仕様により、`landscape-primary` か、`landscape-secondary` か、またはその両方です。 - `"portrait"` - : 画面の高さが画面の幅より長い向きです。プラットフォームの仕様により、`portrait-primary` か、`portrait-secondary` か、またはその両方です。 - `"portrait-primary"` - - : 1 番目のポートレートモードです。自然な向きがポートレートモード (画面の高さが画面の幅より長い) のときは、これは自然な向きと同じであり、角度は 0 度に対応します。自然な向きがランドスケープモードのときは、どっちのポートレートの向きが `portrait-primary` でどっちが `portrait-secondary` かはユーザーエージェントが決めることができ、どっちかが 90 度、もう一方が270 度に対応します。 + - : 主ポートレートモードです。 + 自然な向きがポートレートモード (画面の高さが画面の幅より長い) のときは、これは自然な向きと同じであり、角度は 0 度に対応します。 + 自然な向きがランドスケープモードのときは、ユーザーエージェントがポートレートの向きを `portrait-primary` と `portrait-secondary` のどちらかで選択することができます。一方が 90 度、もう一方が 270 度に対応します。 - `"portrait-secondary"` - - : 2 番目のポートレートの向きです。自然な向きがポートレートモードのときは、これは角度 180 度に対応します。(すなわち、デバイスは自然な向きから上下逆さまになっています) 自然な向きがランドスケープモードのときは、これはユーザーエージェントが決めることができ、`portrait-primary` として選ばれなかったほうの向きです。 + - : 副ポートレート方向です。 + 自然な向きがポートレートモードのときは、これは角度 180 度に対応します（すなわち、端末は自然な向きから上下逆さまになっています）。 + 自然な向きがランドスケープモードのときは、これはユーザーエージェントが決めることができ、`portrait-primary` として選ばれなかったほうの向きです。 - `"landscape-primary"` - - : 1 番目のランドスケープモードです。自然な向きがランドスケープモード (画面の幅が画面の高さより長い) のときは、これは自然な向きと同じであり、角度は 0 度に対応します。自然な向きがポートレートモードのときは、どっちのランドスケープの向きを `landscape-primary` とし、角度を 90 度とするか 270 度とするかはユーザーエージェントが決めることができます。(`landscape-secondary` がもう一方の向きと角度になります) + - : 主ランドスケープモードです。 + 自然な向きがランドスケープモード（画面の幅が画面の高さより長い）のときは、これは自然な向きと同じであり、角度は 0 度に対応します。 + 自然な向きがポートレートモードのときは、`landscape-primary` とするランドスケープの向きを、90 度または 270 度のどちらかでユーザーエージェントが決めることができます（`landscape-secondary` がもう一方の角度の向きになります）。 - `"landscape-secondary"` - - : 2 番目のランドスケープモードです。自然な向きがランドスケープモードのときは、自然な向きから上下逆さまであり、角度は 180 度です。自然な向きがポートレートモードのときは、これはユーザーエージェントが決めることができ、`landscape-primary` として選ばれなかったほうです。 + - : 副ランドスケープモードです。 + 自然な向きがランドスケープモードのときは、自然な向きから上下逆さまであり、角度は 180 度です。 + 自然な向きがポートレートモードのときは、これはユーザーエージェントが決めることができ、`landscape-primary` として選ばれなかったほうです。 ### 返値 @@ -48,24 +57,30 @@ lock(orientation) プロミスが以下の例外により拒否されることがあります。 -- `NotSupportedError` {{domxref("DOMException")}} +- `InvalidStateError` {{domxref("DOMException")}} - - : ユーザーエージェントが画面の向きの固定に対応していません。 + - : 文書が完全にはアクティブでなかった場合に発生します。 - `SecurityError` {{domxref("DOMException")}} - - : ユーザーエージェント定義の固定前の条件を満たしていません。例えば、ブラウザーがトップレベルのブラウジングコンテキストの `Document` がフルスクリーンになっていることを要求するかもしれません。文書でブラウジングコンテキストの画面の向きの固定のサンドボックス化フラグが立っている場合も、プロミスがこのエラーで拒否されることがあります。 + - : 文書の表示状態が非表示の場合、または文書がその機能の使用を禁止されている場合(例えば、 `iframe` 要素の `sandbox` 属性のキーワード `allow-orientation-lock` を省略した場合)に発生します。 + +- `NotSupportedError` {{domxref("DOMException")}} + + - : ユーザーエージェントが特定の画面の向きに固定できない場合に発生します。 + +- `AbortError` {{domxref("DOMException")}} -- {{jsxref("TypeError")}} - - : 引数 `orientation` がありません。 + - : 他の `lock()` メソッドが呼び出されている場合に発生します。 ## 例 -この例は、画面の向きを現在の向きの反対に固定する方法を示します。なお、この例はモバイルデバイスおよび向きの変更に対応したその他のデバイスでのみ動作するでしょう。 +この例は、画面の向きを現在の向きの反対に固定する方法を示します。 +なお、この例はモバイル端末および向きの変更に対応したその他の端末でのみ動作するでしょう。 ```html
- + @@ -100,10 +115,10 @@ unlock_btn.addEventListener("click", () => { screen.orientation.unlock(); }); -// フルスクリーンボタン: 例をフルスクリーンにします +// 全画面ボタン: 例を全画面にします const fullscreen_btn = document.querySelector("#fullscreen_button"); fullscreen_btn.addEventListener("click", () => { - log.textContent += "フルスクリーンボタンが押されました\n"; + log.textContent += "全画面ボタンが押されました\n"; const container = document.querySelector("#example_container"); container.requestFullscreen().catch((error) => { log.textContent += `${error}\n`; @@ -111,7 +126,7 @@ fullscreen_btn.addEventListener("click", () => { }); ``` -この例を試すには、まずフルスクリーンボタンを押してください。例がフルスクリーンになったら、固定ボタンを押すと向きを切り替えることができ、固定解除ボタンを押すと自然な向きに戻すことができます。 +この例を試すには、まず全画面ボタンを押してください。例が全画面になったら、固定ボタンを押すと向きを切り替えることができ、固定解除ボタンを押すと自然な向きに戻すことができます。 {{EmbedLiveSample('Examples')}} From da606e3f936f59af0aa1675d9616b84a8f69cded Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 18 Sep 2024 06:16:34 +0900 Subject: [PATCH 108/365] =?UTF-8?q?2023/02/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/screen_orientation_api/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/ja/web/api/screen_orientation_api/index.md b/files/ja/web/api/screen_orientation_api/index.md index b811162a3fadbe..731104b25b219d 100644 --- a/files/ja/web/api/screen_orientation_api/index.md +++ b/files/ja/web/api/screen_orientation_api/index.md @@ -1,13 +1,13 @@ --- -title: Screen Orientation API +title: 画面方向 API slug: Web/API/Screen_Orientation_API l10n: - sourceCommit: e0e09b1df51489867f2e74c18586d168ba5e00d1 + sourceCommit: 6d194a9afcce7beef0082c1dc50644bd0fcda635 --- {{DefaultAPISidebar("Screen Orientation API")}} -**Screen Orientation API** は、画面の向きに関する情報を提供します。 +**画面方向 API** (Screen Orientation API) は、画面の向きに関する情報を提供します。 ## インターフェイス From d21887cacd88ea0807953eb28e6d7ed1ac04357c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 18 Sep 2024 06:21:54 +0900 Subject: [PATCH 109/365] =?UTF-8?q?2024/07/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=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/scriptprocessornode/index.md | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/files/ja/web/api/scriptprocessornode/index.md b/files/ja/web/api/scriptprocessornode/index.md index b65b08f8bce607..a2894574cf5f80 100644 --- a/files/ja/web/api/scriptprocessornode/index.md +++ b/files/ja/web/api/scriptprocessornode/index.md @@ -1,9 +1,11 @@ --- title: ScriptProcessorNode slug: Web/API/ScriptProcessorNode +l10n: + sourceCommit: 4f35a8237ee0842beb9cfef3354e05464ad7ce1a --- -{{APIRef("Web Audio API")}}{{deprecated_header}} +{{APIRef("Web Audio API")}}{{Deprecated_Header}} `ScriptProcessorNode` インターフェイスは、JavaScript を使って音声を生成、処理、または分析することを可能にします。 @@ -16,7 +18,7 @@ slug: Web/API/ScriptProcessorNode ![ScriptProcessorNode は、入力をバッファーに格納し、 audioprocess イベントを送信します。 EventHandler は入力バッファーを受け取り、出力バッファーを満たし、 ScriptProcessorNode によって出力に送信されます。](webaudioscriptprocessingnode.png) -入力バッファーと出力バッファーのサイズは {{domxref("BaseAudioContext.createScriptProcessor")}} メソッドが呼び出されたときの作成時に定義します（どちらも {{domxref("BaseAudioContext.createScriptProcessor")}} の `bufferSize` 引数で定義されます）。バッファサイズは `256` から `16384` までの 2 の累乗、つまり `256`、`512`、`1024`、`2048`、`4096`、`8192`、`16384` のいずれかでなければなりません。小さい数値のほうが遅延を低減させますが、音声の途切れやグリッチを避けるために大きな値が必要な場合もあります。 +入力バッファーと出力バッファーのサイズは {{domxref("BaseAudioContext.createScriptProcessor")}} メソッドが呼び出されたときの作成時に定義します（どちらも {{domxref("BaseAudioContext.createScriptProcessor")}} の `bufferSize` 引数で定義されます）。バッファーサイズは `256` から `16384` までの 2 の累乗、つまり `256`、`512`、`1024`、`2048`、`4096`、`8192`、`16384` のいずれかでなければなりません。小さい数値のほうが遅延を低減させますが、音声の途切れやグリッチを避けるために大きな値が必要な場合もあります。 もしバッファーサイズが定義されていない場合、これが推奨ですが、ブラウザーは経験則的に適切と思われるものを選びます。 @@ -45,28 +47,28 @@ slug: Web/API/ScriptProcessorNode
-## プロパティ +## インスタンスプロパティ -_親である {{domxref("AudioNode")}} からプロパティを継承しています_。 +_親である {{domxref("AudioNode")}} から継承したプロパティがあります_。 -- {{domxref("ScriptProcessorNode.bufferSize")}} {{readonlyInline}} +- {{domxref("ScriptProcessorNode.bufferSize")}} {{ReadOnlyInline}} {{Deprecated_Inline}} - : 入力と出力の両方のバッファーサイズを表す整数を返します。この値は、 `256` から `16384` までの範囲の 2 のべき乗の値です。 -## メソッド +## インスタンスメソッド -_固有のメソッドはありません。親である {{domxref("AudioNode")}} からメソッドを継承しています_。 +_固有のメソッドはありません。親である {{domxref("AudioNode")}} から継承したプロパティがあります_。 ## イベント これらのイベントは [`addEventListener()`](/ja/docs/Web/API/EventTarget/addEventListener) を使って、あるいはこのインターフェイスの `onイベント名` プロパティにイベントリスナーを割り当てることで待ち受けます。 -- [`audioprocess`](/ja/docs/Web/API/ScriptProcessorNode/audioprocess_event) +- [`audioprocess`](/ja/docs/Web/API/ScriptProcessorNode/audioprocess_event) {{Deprecated_Inline}} - : `ScriptProcessorNode` の入力バッファーが処理可能な状態になったときに発行されます。 また、`onaudioprocess` イベントハンドラープロパティでも利用可能です。 ## 例 -コード例については [`BaseAudioContext.createScriptProcessor()`](/ja/docs/Web/API/BaseAudioContext/createScriptProcessor#example) を参照してください。 +コード例については [`BaseAudioContext.createScriptProcessor()`](/ja/docs/Web/API/BaseAudioContext/createScriptProcessor#例) を参照してください。 ## 仕様書 From ce6bbb2d2a3fda96d73a5c682981523d0a623f9b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 18 Sep 2024 06:23:48 +0900 Subject: [PATCH 110/365] =?UTF-8?q?2024/09/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?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/api/scriptprocessornode/buffersize/index.md | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/files/ja/web/api/scriptprocessornode/buffersize/index.md b/files/ja/web/api/scriptprocessornode/buffersize/index.md index 3660cbe556e12d..e7d2db32f1010d 100644 --- a/files/ja/web/api/scriptprocessornode/buffersize/index.md +++ b/files/ja/web/api/scriptprocessornode/buffersize/index.md @@ -1,8 +1,9 @@ --- -title: ScriptProcessorNode.bufferSize +title: "ScriptProcessorNode: bufferSize プロパティ" +short-title: bufferSize slug: Web/API/ScriptProcessorNode/bufferSize l10n: - sourceCommit: 6d194a9afcce7beef0082c1dc50644bd0fcda635 + sourceCommit: b25d8774aa7bcc6a053e26cf804ad454f51e134b --- {{APIRef("Web Audio API")}}{{Deprecated_Header}} @@ -22,9 +23,7 @@ l10n: ## 仕様書 -2014 年 8 月 29 日の [Web Audio API specification](https://www.w3.org/TR/webaudio/#ScriptProcessorNode) の発行以降、この機能は非推奨になりました。この機能は標準化を検討されていません。 - -この機能は [AudioWorklets](/ja/docs/Web/API/AudioWorklet) および {{domxref("AudioWorkletNode")}} インターフェイスに置き換えられました。 +{{Specifications}} ## ブラウザーの互換性 @@ -32,4 +31,4 @@ l10n: ## 関連情報 -- [Web Audio API の使用](/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) +- [ウェブオーディオ API の使用](/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) From 61a9410821234f0886411b7559f6e07babe9ca7b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 18 Sep 2024 07:04:52 +0900 Subject: [PATCH 111/365] =?UTF-8?q?2024/07/10=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/sensor_apis/index.md | 60 +++++++++++++-------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/files/ja/web/api/sensor_apis/index.md b/files/ja/web/api/sensor_apis/index.md index 11d55aaaf72e0a..32996a4d0518fa 100644 --- a/files/ja/web/api/sensor_apis/index.md +++ b/files/ja/web/api/sensor_apis/index.md @@ -1,23 +1,23 @@ --- -title: Sensor APIs +title: センサー API 群 slug: Web/API/Sensor_APIs l10n: sourceCommit: 8899f400df312bb5d49ef426173c19f3922029b4 --- -{{DefaultAPISidebar("Sensor API")}} +{{securecontext_header}}{{DefaultAPISidebar("Sensor API")}} -**Sensor APIs** は、デバイスのセンサーを一貫した形でウェブプラットフォームから利用可能にする、共通の設計で作られたインターフェイスの集合です。 +**センサー API 群** (Sensor APIs) は、端末のセンサー群を一貫した形でウェブプラットフォームから利用可能にする、共通の設計で作られたインターフェイスの集合です。 -## Sensor APIs の概念と使用法 +## 概念と使用法 -Generic Sensor API の仕様では {{domxref('Sensor')}} インターフェイスが定義されていますが、ウェブ開発者がこれを用いることはないでしょう。かわりに、特定の種類のセンサーからデータを取得するために、そのサブクラスを用いることになります。たとえば、{{domxref('Accelerometer')}} インターフェイスは取得時にデバイスの 3 軸それぞれにかかっている加速度を返します。 +一般センサー API (Generic Sensor API) の仕様では {{domxref('Sensor')}} インターフェイスが定義されていますが、ウェブ開発者がこれを用いることはないでしょう。かわりに、特定の種類のセンサーからデータを取得するために、そのサブクラスを用いることになります。たとえば、{{domxref('Accelerometer')}} インターフェイスは取得時に端末の 3 軸それぞれにかかっている加速度を返します。 -センサーは、デバイスの物理的なセンサーに完全に対応していることも、対応していないこともあります。たとえば、{{domxref('Gyroscope')}} インターフェイスはデバイスの物理的なインターフェイスに完全に対応しています。一方、{{domxref('AbsoluteOrientationSensor')}} インターフェイスは 2 個以上のデバイスセンサーの情報をアルゴリズムにより組み合わせた情報を提供します。これらのセンサーの種類は、それぞれ _低レベル_ および _高レベル_ と呼ばれます。後者の種類のセンサーは、フュージョンセンサー (または、仮想センサー、合成センサー) とも呼ばれます。 +センサーは、端末の物理的なセンサーに完全に対応していることも、対応していないこともあります。たとえば、{{domxref('Gyroscope')}} インターフェイスは端末の物理的なインターフェイスに完全に対応しています。一方、{{domxref('AbsoluteOrientationSensor')}} インターフェイスは 2 個以上の端末センサーの情報をアルゴリズムにより組み合わせた情報を提供します。これらのセンサーの種類は、それぞれ _低レベル_ および _高レベル_ と呼ばれます。後者の種類のセンサーは、フュージョンセンサー (または、仮想センサー、合成センサー) とも呼ばれます。 ### 機能の検出 -センサーインターフェイスは、対応するデバイスセンサーのプロキシーでしかありません。そのため、センサーの機能の検出は他の API より複雑になります。センサー API が存在するからといって、API が実際のハードウェアセンサーに接続されているか、センサーが動作するか、センサーの接続が維持されているか、ユーザーがセンサーへのアクセスを許可したかはわかりません。これらすべての情報を常に利用可能にしておくことは、パフォーマンスと電池の持ちに負担をかけます。 +センサーインターフェイスは、対応する端末センサーのプロキシーでしかありません。そのため、センサーの機能の検出は他の API より複雑になります。センサー API が存在するからといって、API が実際のハードウェアセンサーに接続されているか、センサーが動作するか、センサーの接続が維持されているか、ユーザーがセンサーへのアクセスを許可したかはわかりません。これらすべての情報を常に利用可能にしておくと、パフォーマンスと電池の持ちに負担をかけます。 そのため、センサー API の機能を検出するには、API そのものを検出した上で、[防衛的プログラミングの戦略 (後述)](#防衛的プログラミング) をとらなければいけません。 @@ -45,9 +45,9 @@ if (window.AmbientLightSensor) { - 使用時に投げられるエラーを監視する。 - エラーをきれいに処理し、ユーザー体験が損なわれず拡充されるようにする。 -以下のコード例で、これらの原則を説明します。{{jsxref('statements/try...catch', 'try...catch')}} ブロックにより、センサーの生成時に投げられるエラーをキャッチします。{{domxref('Sensor.error_event', 'error')}} イベントを監視することで、使用時に投げられるエラーをキャッチします。ユーザーに何かが提示されるのは、[許可](/ja/docs/Web/API/Permissions_API)の要求が必要なときと、デバイスがこのセンサーの種類に対応していないときだけです。 +以下のコード例で、これらの原則を説明します。{{jsxref('statements/try...catch', 'try...catch')}} ブロックにより、センサーの生成時に投げられるエラーをキャッチします。{{domxref('Sensor.error_event', 'error')}} イベントを監視することで、使用時に投げられるエラーをキャッチします。ユーザーに何かが提示されるのは、[許可](/ja/docs/Web/API/Permissions_API)の要求が必要なときと、端末がこのセンサーの種類に対応していないときだけです。 -さらに、この機能はサーバーで設定された [Permissions Policy](/ja/docs/Web/HTTP/Permissions_Policy) によりブロックされる可能性があります。 +さらに、この機能はサーバーで設定された [権限ポリシー](/ja/docs/Web/HTTP/Permissions_Policy) によりブロックされる可能性があります。 ```js let accelerometer = null; @@ -80,7 +80,7 @@ try { ### 許可と Permissions Policy -センサーの計測値は、[Permissions API](/ja/docs/Web/API/Permissions_API) によりユーザーが特定のセンサーの種類を用いる許可を与え、かつサーバーの {{httpheader('Permissions-Policy')}} でブロックされていない場合のみ参照できます。 +センサーの計測値は、[権限 API](/ja/docs/Web/API/Permissions_API) によりユーザーが特定のセンサーの種類を用いる許可を与え、かつサーバーの {{httpheader('Permissions-Policy')}} でブロックされていない場合のみ参照できます。 以下の例では、センサーを使用しようとする前にユーザーに許可を要求する方法を示します。 @@ -120,7 +120,7 @@ sensor.addEventListener("error", (error) => { ### 計測値 -センサーの計測値は、すべてのセンサーの種類で継承されている {{domxref('Sensor.reading_event', 'reading')}} イベントコールバックを通じて取得できます。取得の頻度はセンサーのコンストラクターに渡すオプションで使用者が設定します。このオプションは、1 秒あたり何回取得するかを表す数値です。整数または小数を使用することができ、小数は 1 秒に 1 回未満の頻度を設定するとき用います。実際の取得頻度はデバイスのハードウェアに依存し、設定より少なくなる可能性があります。 +センサーの計測値は、すべてのセンサーの種類で継承されている {{domxref('Sensor.reading_event', 'reading')}} イベントコールバックを通じて取得できます。取得の頻度はセンサーのコンストラクターに渡すオプションで使用者が設定します。このオプションは、1 秒あたり何回取得するかを表す数値です。整数または小数を使用することができ、小数は 1 秒に 1 回未満の頻度を設定するとき用います。実際の取得頻度は端末のハードウェアに依存し、設定より少なくなる可能性があります。 以下の例では、{{domxref('Magnetometer')}} センサーを用いてこれを説明します。 @@ -140,27 +140,27 @@ magSensor.start(); ## インターフェイス -- {{domxref('AbsoluteOrientationSensor')}} {{securecontext_inline}} - - : 地球の参照用座標系に対するデバイスの物理的な向きを表します。 -- {{domxref('Accelerometer')}} {{securecontext_inline}} - - : デバイスの 3 軸それぞれにかかっている加速度を提供します。 -- {{domxref('AmbientLightSensor')}} {{securecontext_inline}} - - : 現在の光レベル、すなわちホストデバイスの周囲の環境光の照度を返します。 -- {{domxref('GravitySensor')}} {{securecontext_inline}} - - : デバイスの 3 軸それぞれにかかっている重力を提供します。 -- {{domxref('Gyroscope')}} {{securecontext_inline}} - - : デバイスの 3 軸それぞれの角速度を提供します。 -- {{domxref('LinearAccelerationSensor')}} {{securecontext_inline}} - - : デバイスの 3 軸それぞれにかかっている加速度を、重力の影響を除いて提供します。 -- {{domxref('Magnetometer')}} {{securecontext_inline}} - - : デバイスのプライマリー磁気センサーで検出される磁場の情報を提供します。 -- {{domxref('OrientationSensor')}} {{securecontext_inline}} +- {{domxref('AbsoluteOrientationSensor')}} + - : 地球の参照用座標系に対する端末の物理的な向きを表します。 +- {{domxref('Accelerometer')}} + - : 端末の 3 軸それぞれにかかっている加速度を提供します。 +- {{domxref('AmbientLightSensor')}} + - : 現在の光レベル、すなわちホスト端末の周囲の環境光の照度を返します。 +- {{domxref('GravitySensor')}} + - : 端末の 3 軸それぞれにかかっている重力を提供します。 +- {{domxref('Gyroscope')}} + - : 端末の 3 軸それぞれの角速度を提供します。 +- {{domxref('LinearAccelerationSensor')}} + - : 端末の 3 軸それぞれにかかっている加速度を、重力の影響を除いて提供します。 +- {{domxref('Magnetometer')}} + - : 端末のプライマリー磁気センサーで検出される磁場の情報を提供します。 +- {{domxref('OrientationSensor')}} - : {{domxref('AbsoluteOrientationSensor')}} のベースクラスです。このインターフェイスを直接用いることはできませんが、継承するインターフェイスがアクセスするプロパティとメソッドを提供します。 -- {{domxref('RelativeOrientationSensor')}} {{securecontext_inline}} - - : 地球の参照用座標系は考慮せず、デバイスの物理的な向きを表します。 -- {{domxref('Sensor')}} {{securecontext_inline}} +- {{domxref('RelativeOrientationSensor')}} + - : 地球の参照用座標系は考慮せず、端末の物理的な向きを表します。 +- {{domxref('Sensor')}} - : 他のセンサーインターフェイスすべてのベースクラスです。このインターフェイスを直接用いることはできませんが、継承するインターフェイスがアクセスするプロパティ・イベントハンドラー・メソッドを提供します。 -- {{domxref('SensorErrorEvent')}} {{securecontext_inline}} +- {{domxref('SensorErrorEvent')}} - : {{domxref('Sensor')}} や関連するインターフェイスから投げられたエラーの情報を提供します。 ## 仕様書 From d0f8e65fc7e27175a9fa2c03c18e779edb0346b6 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 18 Sep 2024 07:08:53 +0900 Subject: [PATCH 112/365] =?UTF-8?q?2024/02/01=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/sensor/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/files/ja/web/api/sensor/index.md b/files/ja/web/api/sensor/index.md index 723176db2184b4..62c86344af5db6 100644 --- a/files/ja/web/api/sensor/index.md +++ b/files/ja/web/api/sensor/index.md @@ -2,14 +2,14 @@ title: Sensor slug: Web/API/Sensor l10n: - sourceCommit: 6d194a9afcce7beef0082c1dc50644bd0fcda635 + sourceCommit: 4ea748e5f025c2a00a8ca8babd7c505e73ad9def --- -{{APIRef("Sensor API")}} +{{securecontext_header}}{{APIRef("Sensor API")}} -[Sensor APIs](/ja/docs/Web/API/Sensor_APIs) の **`Sensor`** インターフェイスは、ほかのすべてのセンサーインターフェイスのベースクラスです。このインターフェイスを直接使うことはできません。ですが、このインターフェイスは継承するインターフェイスがアクセスするプロパティ・イベントハンドラー・メソッドを提供します。 +**`Sensor`** は[センサー API 群](/ja/docs/Web/API/Sensor_APIs)のインターフェイスで、ほかのすべてのセンサーインターフェイスのベースクラスです。このインターフェイスを直接使うことはできません。ですが、このインターフェイスは継承するインターフェイスがアクセスするプロパティ・イベントハンドラー・メソッドを提供します。 -この機能はサーバーで設定された [Permissions Policy](/ja/docs/Web/HTTP/Permissions_Policy) によりブロックされる可能性があります。 +この機能はサーバーで設定された [権限ポリシー](/ja/docs/Web/HTTP/Permissions_Policy) によりブロックされる可能性があります。 {{InheritanceDiagram}} From fca932e807ff0cda45fc8cf3557489b8eba6faea Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 18 Sep 2024 07:13:27 +0900 Subject: [PATCH 113/365] =?UTF-8?q?2024/07/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/web/api/serialport/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/files/ja/web/api/serialport/index.md b/files/ja/web/api/serialport/index.md index eafa26155bb121..301d115b7718ff 100644 --- a/files/ja/web/api/serialport/index.md +++ b/files/ja/web/api/serialport/index.md @@ -2,12 +2,12 @@ title: SerialPort slug: Web/API/SerialPort l10n: - sourceCommit: f7fe5c73572eb10466583d275c20cd6e55867455 + sourceCommit: c29cee3dcb0d0e66093dd0c18aa82e0eab9d6d14 --- -{{securecontext_header}}{{APIRef("Serial API")}}{{SeeCompatTable}} +{{securecontext_header}}{{APIRef("Web Serial API")}}{{SeeCompatTable}}{{AvailableInWorkers("window_and_dedicated")}} -{{domxref("Web_Serial_API", "Web Serial API")}} の `SerialPort` インターフェイスは、ホストデバイスのシリアルポートへのアクセスを提供します。 +`SerialPort` は [ウェブシリアル API](/ja/docs/Web/API/Web_Serial_API) のインターフェイスで、ホスト機器のシリアルポートへのアクセスを提供します。 {{InheritanceDiagram}} @@ -48,7 +48,7 @@ l10n: ### ポートを開く -シリアルポートで通信を行う前に、ポートを開く必要があります。ポートを開くことで、サイトはデータがどのように送受信されるかを決めるために必要なパラメータを設定できます。開発者は、適切なパラメータを決めるために接続するデバイスのドキュメントを参照するべきです。 +シリアルポートで通信を行う前に、ポートを開く必要があります。ポートを開くことで、サイトはデータがどのように送受信されるかを決めるために必要なパラメーターを設定できます。開発者は、適切なパラメーターを決めるために接続するデバイスのドキュメントを参照するべきです。 ```js await port.open({ baudRate: 9600 /* ボーレートを決める */ }); From 83558d12cebc159ffe09533ccf0169b9b294b35d Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 18 Sep 2024 05:56:33 +0900 Subject: [PATCH 114/365] =?UTF-8?q?=E7=94=BB=E9=9D=A2=E3=82=AD=E3=83=A3?= =?UTF-8?q?=E3=83=97=E3=83=81=E3=83=A3API=E3=80=81WebVTTAPI=E3=82=92?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/index.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/files/ja/web/api/index.md b/files/ja/web/api/index.md index 09fc63ecdcc4c7..28a427a5d02226 100644 --- a/files/ja/web/api/index.md +++ b/files/ja/web/api/index.md @@ -25,6 +25,7 @@ Web API は通常 JavaScript とともに使用されますが、常にそうと - [CSS カウンタースタイル](/ja/docs/Web/API/CSS_Counter_Styles) - [画面起動ロック API](/ja/docs/Web/API/Screen_Wake_Lock_API) +- [画面キャプチャ API](/ja/docs/Web/API/Screen_Capture_API) - [ウェブ共有 API](/ja/docs/Web/API/Web_Share_API) - [決済ハンドラー API](/ja/docs/Web/API/Payment_Handler_API) - [決済リクエスト API](/ja/docs/Web/API/Payment_Request_API) @@ -53,7 +54,8 @@ Web API は通常 JavaScript とともに使用されますが、常にそうと - [バックグラウンドフェッチ API](/ja/docs/Web/API/Background_Fetch_API) - [バッジ API](/ja/docs/Web/API/Badging_API) - [パフォーマンス API](/ja/docs/Web/API/Performance_API) -- [ビュー遷移 API](Web/API/View_Transitions_API) +- [ビュー遷移 API](/ja/docs/Web/API/View_Transitions_API) +- [WebVTT API](/ja/docs/Web/API/WebVTT_API) - [フェッチ API](/ja/docs/Web/API/Fetch_API) - [プッシュ通知 API](/ja/docs/Web/API/Push_API) - [プレゼンテーション API](/ja/docs/Web/API/Presentation_API) From cde818d5a88aa1e78991e885280d608ed3250f7e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 18 Sep 2024 06:17:25 +0900 Subject: [PATCH 115/365] =?UTF-8?q?=E7=94=BB=E9=9D=A2=E6=96=B9=E5=90=91=20?= =?UTF-8?q?API=20=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/index.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/files/ja/web/api/index.md b/files/ja/web/api/index.md index 28a427a5d02226..91fa3812528b23 100644 --- a/files/ja/web/api/index.md +++ b/files/ja/web/api/index.md @@ -26,6 +26,7 @@ Web API は通常 JavaScript とともに使用されますが、常にそうと - [CSS カウンタースタイル](/ja/docs/Web/API/CSS_Counter_Styles) - [画面起動ロック API](/ja/docs/Web/API/Screen_Wake_Lock_API) - [画面キャプチャ API](/ja/docs/Web/API/Screen_Capture_API) +- [画面方向 API](/ja/docs/Web/API/Screen_Orientation_API) - [ウェブ共有 API](/ja/docs/Web/API/Web_Share_API) - [決済ハンドラー API](/ja/docs/Web/API/Payment_Handler_API) - [決済リクエスト API](/ja/docs/Web/API/Payment_Request_API) @@ -65,7 +66,7 @@ Web API は通常 JavaScript とともに使用されますが、常にそうと - [ウェブ MIDI API](/ja/docs/Web/API/Web_MIDI_API) - [メディアキャプチャとストリーム API](/ja/docs/Web/API/Media_Capture_and_Streams_API) -## 仕様書 +## API 仕様書英語索引 利用可能なすべての API の一覧です。 From 1cc66c20200acb83bdf9e2d2777c3bc738b811bb Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 18 Sep 2024 22:30:05 +0900 Subject: [PATCH 116/365] =?UTF-8?q?=E6=97=A5=E6=9C=AC=E8=AA=9E=E7=B4=A2?= =?UTF-8?q?=E5=BC=95=E3=81=AE=E6=9D=A1=E4=BB=B6=E4=BB=98=E3=81=8D=E4=B8=A6?= =?UTF-8?q?=E3=81=B9=E6=9B=BF=E3=81=88=E3=82=92=E8=A7=A3=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/index.md | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/files/ja/web/api/index.md b/files/ja/web/api/index.md index 91fa3812528b23..cc96df4d6ccfab 100644 --- a/files/ja/web/api/index.md +++ b/files/ja/web/api/index.md @@ -11,8 +11,6 @@ Web API は通常 JavaScript とともに使用されますが、常にそうと ## API 仕様書日本語索引 - - ### ア - [位置情報 API](/ja/docs/Web/API/Geolocation_API) @@ -20,14 +18,17 @@ Web API は通常 JavaScript とともに使用されますが、常にそうと - [ウィンドウ制御 API](/ja/docs/Web/API/Window_Management_API) - [ウィンドウ制御オーバーレイ API](/ja/docs/Web/API/Window_Controls_Overlay_API) - [ウェブ音声 API](/ja/docs/Web/API/Web_Speech_API) +- [ウェブ共有 API](/ja/docs/Web/API/Web_Share_API) +- [ウェブシリアル API](/ja/docs/Web/API/Web_Serial_API) +- [ウェブ定期バックグラウンド同期 API](/ja/docs/Web/API/Web_Periodic_Background_Synchronization_API) +- [WebVTT API](/ja/docs/Web/API/WebVTT_API) +- [ウェブ MIDI API](/ja/docs/Web/API/Web_MIDI_API) ### カ -- [CSS カウンタースタイル](/ja/docs/Web/API/CSS_Counter_Styles) - [画面起動ロック API](/ja/docs/Web/API/Screen_Wake_Lock_API) - [画面キャプチャ API](/ja/docs/Web/API/Screen_Capture_API) - [画面方向 API](/ja/docs/Web/API/Screen_Orientation_API) -- [ウェブ共有 API](/ja/docs/Web/API/Web_Share_API) - [決済ハンドラー API](/ja/docs/Web/API/Payment_Handler_API) - [決済リクエスト API](/ja/docs/Web/API/Payment_Request_API) - [権限 API](/ja/docs/Web/API/Permissions_API) @@ -35,14 +36,14 @@ Web API は通常 JavaScript とともに使用されますが、常にそうと ### サ +- [CSS カウンタースタイル](/ja/docs/Web/API/CSS_Counter_Styles) - [ストレージ API](/ja/docs/Web/API/Storage_API) - [ストレージアクセス API](/ja/docs/Web/API/Storage_Access_API) -- [センサー API](/ja/docs/Web/API/Sensor_APIs) +- [センサー API 群](/ja/docs/Web/API/Sensor_APIs) ### タ - [通知 API](/ja/docs/Web/API/Notifications_API) -- [ウェブ定期バックグラウンド同期 API](/ja/docs/Web/API/Web_Periodic_Background_Synchronization_API) - [DOM](/ja/docs/Web/API/Document_Object_Model) ### ナ @@ -56,14 +57,12 @@ Web API は通常 JavaScript とともに使用されますが、常にそうと - [バッジ API](/ja/docs/Web/API/Badging_API) - [パフォーマンス API](/ja/docs/Web/API/Performance_API) - [ビュー遷移 API](/ja/docs/Web/API/View_Transitions_API) -- [WebVTT API](/ja/docs/Web/API/WebVTT_API) - [フェッチ API](/ja/docs/Web/API/Fetch_API) - [プッシュ通知 API](/ja/docs/Web/API/Push_API) - [プレゼンテーション API](/ja/docs/Web/API/Presentation_API) ### マ -- [ウェブ MIDI API](/ja/docs/Web/API/Web_MIDI_API) - [メディアキャプチャとストリーム API](/ja/docs/Web/API/Media_Capture_and_Streams_API) ## API 仕様書英語索引 From e91f7cca5e081776012b453961d0d7aaa8ae3017 Mon Sep 17 00:00:00 2001 From: MikeCAT Date: Wed, 18 Sep 2024 08:01:20 +0900 Subject: [PATCH 117/365] Translate GPUError --- files/ja/web/api/gpuerror/index.md | 38 ++++++++++++++++++++++ files/ja/web/api/gpuerror/message/index.md | 35 ++++++++++++++++++++ 2 files changed, 73 insertions(+) create mode 100644 files/ja/web/api/gpuerror/index.md create mode 100644 files/ja/web/api/gpuerror/message/index.md diff --git a/files/ja/web/api/gpuerror/index.md b/files/ja/web/api/gpuerror/index.md new file mode 100644 index 00000000000000..639f682495c306 --- /dev/null +++ b/files/ja/web/api/gpuerror/index.md @@ -0,0 +1,38 @@ +--- +title: GPUError +slug: Web/API/GPUError +l10n: + sourceCommit: 89c435da452257b944b403cc9e45036fcb22590e +--- + +{{APIRef("WebGPU API")}}{{SeeCompatTable}}{{SecureContext_Header}} + +{{domxref("WebGPU API", "WebGPU API", "", "nocode")}} の **`GPUError`** インターフェイスは、{{domxref("GPUDevice.popErrorScope")}} および {{domxref("GPUDevice.uncapturederror_event", "uncapturederror")}} イベントで浮かび上がったエラー用のベースインターフェイスです。 + +{{InheritanceDiagram}} + +## インスタンスプロパティ + +- {{domxref("GPUError.message", "message")}} {{Experimental_Inline}} {{ReadOnlyInline}} + - : なぜエラーが発生したかを説明する人間向けのメッセージを提供する文字列です。 + +## 例 + +`GPUError` をベースとするエラーオブジェクトの使い方の例は、以下を参照してください。 + +- [`GPUDevice.popErrorScope`](/ja/docs/Web/API/GPUDevice/popErrorScope#例) +- [`GPUDevice uncapturederror` イベント](/ja/docs/Web/API/GPUDevice/uncapturederror_event#例) +- {{domxref("GPUInternalError")}}・{{domxref("GPUOutOfMemoryError")}}・{{domxref("GPUValidationError")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebGPU API](/ja/docs/Web/API/WebGPU_API) +- [WebGPU Error Handling best practices](https://toji.dev/webgpu-best-practices/error-handling) diff --git a/files/ja/web/api/gpuerror/message/index.md b/files/ja/web/api/gpuerror/message/index.md new file mode 100644 index 00000000000000..497a9ac7911a96 --- /dev/null +++ b/files/ja/web/api/gpuerror/message/index.md @@ -0,0 +1,35 @@ +--- +title: "GPUError: message プロパティ" +slug: Web/API/GPUError/message +l10n: + sourceCommit: 89c435da452257b944b403cc9e45036fcb22590e +--- + +{{APIRef("WebGPU API")}}{{SeeCompatTable}}{{SecureContext_Header}} + +{{domxref("GPUError")}} インターフェイスの読み取り専用プロパティ **`message`** は、なぜエラーが発生したかを説明する人間向けのメッセージを提供します。 + +## 値 + +文字列です。 + +## 例 + +`GPUError` をベースとするエラーオブジェクトの使い方の例は、以下を参照してください。 + +- [`GPUDevice.popErrorScope`](/ja/docs/Web/API/GPUDevice/popErrorScope#例) +- [`GPUDevice uncapturederror` イベント](/ja/docs/Web/API/GPUDevice/uncapturederror_event#例) +- {{domxref("GPUInternalError")}}・{{domxref("GPUOutOfMemoryError")}}・{{domxref("GPUValidationError")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebGPU API](/ja/docs/Web/API/WebGPU_API) +- [WebGPU Error Handling best practices](https://toji.dev/webgpu-best-practices/error-handling) From 0e2bda80ff27b9225dbecbfdd388a6ea70bf8f06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=BF=E3=81=91CAT?= Date: Sun, 22 Sep 2024 18:13:03 +0900 Subject: [PATCH 118/365] [ja] Translate GPUOutOfMemoryError (#23660) * Translate GPUOutOfMemoryError * Untranslate log message to avoid mdn-linter warning --- .../gpuoutofmemoryerror/index.md | 40 ++++++++++++ files/ja/web/api/gpuoutofmemoryerror/index.md | 62 +++++++++++++++++++ 2 files changed, 102 insertions(+) create mode 100644 files/ja/web/api/gpuoutofmemoryerror/gpuoutofmemoryerror/index.md create mode 100644 files/ja/web/api/gpuoutofmemoryerror/index.md diff --git a/files/ja/web/api/gpuoutofmemoryerror/gpuoutofmemoryerror/index.md b/files/ja/web/api/gpuoutofmemoryerror/gpuoutofmemoryerror/index.md new file mode 100644 index 00000000000000..7be8cc8c88557b --- /dev/null +++ b/files/ja/web/api/gpuoutofmemoryerror/gpuoutofmemoryerror/index.md @@ -0,0 +1,40 @@ +--- +title: "GPUOutOfMemoryError: GPUOutOfMemoryError() コンストラクター" +slug: Web/API/GPUOutOfMemoryError/GPUOutOfMemoryError +l10n: + sourceCommit: 89c435da452257b944b403cc9e45036fcb22590e +--- + +{{APIRef("WebGPU API")}}{{SeeCompatTable}}{{SecureContext_Header}} + +**`GPUOutOfMemoryError()`** コンストラクターは、新しい {{domxref("GPUOutOfMemoryError")}} オブジェクトのインスタンスを生成します。 + +## 構文 + +```js-nolint +new GPUOutOfMemoryError(message) +``` + +### 引数 + +- `message` + - : なぜエラーが発生したかを説明する人間向けのメッセージを提供する文字列です。 + +## 例 + +開発者は、自分でこのコンストラクターを用いて `GPUOutOfMemoryError` オブジェクトを生成することはないでしょう。ユーザーエージェントは、{{domxref("GPUDevice.popErrorScope")}} または {{domxref("GPUDevice.uncapturederror_event", "uncapturederror")}} イベントでアウトオブメモリーエラーが浮かび上がってきた際、適切なオブジェクトを生成するためにこのコンストラクターを用います。 + +`GPUOutOfMemoryError` オブジェクトのインスタンスを扱う具体的な例は、メインの [`GPUOutOfMemoryError`](/ja/docs/Web/API/GPUOutOfMemoryError#例) のページを参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebGPU API](/ja/docs/Web/API/WebGPU_API) +- [WebGPU Error Handling best practices](https://toji.dev/webgpu-best-practices/error-handling) diff --git a/files/ja/web/api/gpuoutofmemoryerror/index.md b/files/ja/web/api/gpuoutofmemoryerror/index.md new file mode 100644 index 00000000000000..8950882c83820f --- /dev/null +++ b/files/ja/web/api/gpuoutofmemoryerror/index.md @@ -0,0 +1,62 @@ +--- +title: GPUOutOfMemoryError +slug: Web/API/GPUOutOfMemoryError +l10n: + sourceCommit: 6c592023efa1f762eaa1eb1f36241750626be51c +--- + +{{APIRef("WebGPU API")}}{{SeeCompatTable}}{{SecureContext_Header}} + +{{domxref("WebGPU API", "WebGPU API", "", "nocode")}} の **`GPUOutOfMemoryError`** インターフェイスは、要求された処理を完了するのに十分な空きメモリが無かったことを表すアウトオブメモリー (OOM) エラーを表現します。 + +これは、{{domxref("GPUDevice.popErrorScope")}} および {{domxref("GPUDevice.uncapturederror_event", "uncapturederror")}} イベントで浮かび上がったエラーの型の一つを表します。 + +アウトオブメモリーエラーは行儀がいいアプリケーションでは比較的まれですが、{{domxref("GPUValidationError")}} より予測が難しいです。これは、このようなエラーはアプリケーションを実行しているデバイスに依存するとともに、同時に GPU リソースを使用しているほかのアプリケーションにも依存するからです。 + +{{InheritanceDiagram}} + +## コンストラクター + +- {{domxref("GPUOutOfMemoryError.GPUOutOfMemoryError", "GPUOutOfMemoryError()")}} {{Experimental_Inline}} + - : 新しい `GPUOutOfMemoryError` オブジェクトのインスタンスを生成します。 + +## インスタンスプロパティ + +親の {{domxref("GPUError")}} から `message` プロパティを継承しています。 + +- {{domxref("GPUError.message", "message")}} {{Experimental_Inline}} {{ReadOnlyInline}} + - : なぜエラーが起きたのかを説明する人間向けのメッセージを提供する文字列です。 + +## 例 + +以下の例では、エラースコープを用いてアウトオブメモリーエラーをキャプチャし、コンソールに記録します。 + +```js +device.pushErrorScope("out-of-memory"); + +let buffer = device.createBuffer({ + size: 100_000_000_000, // 100GB; かなり大きすぎる + usage: GPUBufferUsage.COPY_SRC | GPUBufferUsage.MAP_WRITE, +}); + +device.popErrorScope().then((error) => { + if (error) { + // error は GPUOutOfMemoryError のオブジェクトインスタンス + buffer = null; + console.error(`Out of memory, buffer too large. Error: ${error.message}`); + } +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebGPU API](/ja/docs/Web/API/WebGPU_API) +- [WebGPU Error Handling best practices](https://toji.dev/webgpu-best-practices/error-handling) From eae9be6379c5cbe02ff30187b9ab9d48820cec85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=BF=E3=81=91CAT?= Date: Sun, 22 Sep 2024 18:13:40 +0900 Subject: [PATCH 119/365] [ja] Translate GPUInternalError (#23662) Translate GPUInternalError --- .../gpuinternalerror/index.md | 40 ++++++++++++ files/ja/web/api/gpuinternalerror/index.md | 61 +++++++++++++++++++ 2 files changed, 101 insertions(+) create mode 100644 files/ja/web/api/gpuinternalerror/gpuinternalerror/index.md create mode 100644 files/ja/web/api/gpuinternalerror/index.md diff --git a/files/ja/web/api/gpuinternalerror/gpuinternalerror/index.md b/files/ja/web/api/gpuinternalerror/gpuinternalerror/index.md new file mode 100644 index 00000000000000..5ebbad893a070a --- /dev/null +++ b/files/ja/web/api/gpuinternalerror/gpuinternalerror/index.md @@ -0,0 +1,40 @@ +--- +title: "GPUInternalError: GPUInternalError() コンストラクター" +slug: Web/API/GPUInternalError/GPUInternalError +l10n: + sourceCommit: 89c435da452257b944b403cc9e45036fcb22590e +--- + +{{APIRef("WebGPU API")}}{{SeeCompatTable}}{{SecureContext_Header}} + +**`GPUInternalError()`** コンストラクターは、新しい {{domxref("GPUInternalError")}} オブジェクトのインスタンスを生成します。 + +## 構文 + +```js-nolint +new GPUInternalError(message) +``` + +### 引数 + +- `message` + - : なぜエラーが発生したかを説明する人間向けのメッセージを提供する文字列です。 + +## 例 + +開発者は、自分でこのコンストラクターを用いて `GPUInternalError` オブジェクトを生成することはないでしょう。ユーザーエージェントは、内部エラーが {{domxref("GPUDevice.popErrorScope")}} または {{domxref("GPUDevice.uncapturederror_event", "uncapturederror")}} イベントで浮かび上がってきた際、適切なオブジェクトを生成するためにこのコンストラクターを用います。 + +`GPUInternalError` オブジェクトのインスタンスを扱う例は、メインの [`GPUInternalError`](/ja/docs/Web/API/GPUInternalError#例) のページを参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebGPU API](/ja/docs/Web/API/WebGPU_API) +- [WebGPU Error Handling best practices](https://toji.dev/webgpu-best-practices/error-handling) diff --git a/files/ja/web/api/gpuinternalerror/index.md b/files/ja/web/api/gpuinternalerror/index.md new file mode 100644 index 00000000000000..941cd41f83378a --- /dev/null +++ b/files/ja/web/api/gpuinternalerror/index.md @@ -0,0 +1,61 @@ +--- +title: GPUInternalError +slug: Web/API/GPUInternalError +l10n: + sourceCommit: 779045977059a6809ba82548352ce1b00d70dfc7 +--- + +{{APIRef("WebGPU API")}}{{SeeCompatTable}}{{SecureContext_Header}} + +{{domxref("WebGPU API", "WebGPU API", "", "nocode")}} の **`GPUInternalError`** インターフェイスは、バリデーションの要求がすべて満たされたにもかかわらずシステムまたは実装に固有の理由で処理に失敗したことを表すアプリケーションエラーを表します。 + +これは、{{domxref("GPUDevice.popErrorScope")}} および {{domxref("GPUDevice.uncapturederror_event", "uncapturederror")}} イベントで浮かび上がったエラーの型の一つを表します。 + +内部エラーは、バリデーションに引っかからず、アウトオブメモリーエラーであると明確に特定できない何かが WebGPU の実装で起きたとき発生します。これは、一般的に、コードが実行しようとした処理が WebGPU で[対応している制限](/ja/docs/Web/API/GPUSupportedLimits)で表すのが難しい点でシステムの制限に引っかかったことを示します。同じ処理は、他のデバイスでは成功するかもしれません。このようなエラーはパイプラインの生成でのみ発生し、通常はシェーダーがデバイスにとって複雑すぎるとき発生します。 + +{{InheritanceDiagram}} + +## コンストラクター + +- {{domxref("GPUInternalError.GPUInternalError", "GPUInternalError()")}} {{Experimental_Inline}} + - : 新しい `GPUInternalError` オブジェクトのインスタンスを生成します。 + +## インスタンスプロパティ + +親の {{domxref("GPUError")}} から `message` プロパティを継承しています。 + +- {{domxref("GPUError.message", "message")}} {{Experimental_Inline}} {{ReadOnlyInline}} + - : なぜエラーが発生したかを説明する人間向けのメッセージを提供する文字列です。 + +## 例 + +以下の例では、エラースコープを用いてバリデーションエラーだと疑われるものをキャプチャし、コンソールに記録します。 + +```js +device.pushErrorScope("internal"); + +const module = device.createShaderModule({ + code: shader, // **非常に**複雑なシェーダー +}); + +device.popErrorScope().then((error) => { + if (error) { + // error は GPUInternalError オブジェクトのインスタンス + module = null; + console.error(`シェーダーの作成時にエラー発生: ${error.message}`); + } +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebGPU API](/ja/docs/Web/API/WebGPU_API) +- [WebGPU Error Handling best practices](https://toji.dev/webgpu-best-practices/error-handling) From eaa5e0c22846b864c9532d0fc59610b107be9394 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 18 Sep 2024 22:27:09 +0900 Subject: [PATCH 120/365] =?UTF-8?q?2024/04/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=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/serialport/open/index.md | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/files/ja/web/api/serialport/open/index.md b/files/ja/web/api/serialport/open/index.md index 3b73e9192df462..6d3fb832584715 100644 --- a/files/ja/web/api/serialport/open/index.md +++ b/files/ja/web/api/serialport/open/index.md @@ -1,13 +1,14 @@ --- -title: SerialPort.open() +title: "SerialPort: open() メソッド" +short-title: open() slug: Web/API/SerialPort/open l10n: - sourceCommit: de73dc7280b2b84ce58d2a93b241bd8a93e8096d + sourceCommit: 2de8605cc697ca93b02f0b7109082b694f8950ec --- -{{SecureContext_Header}}{{APIRef("Serial API")}}{{SeeCompatTable}} +{{SecureContext_Header}}{{APIRef("Web Serial API")}}{{SeeCompatTable}}{{AvailableInWorkers("window_and_dedicated")}} -{{domxref("SerialPort")}} インターフェイスの **`open()`** メソッドは、ポートを開く処理が完了したら解決する {{jsxref("Promise")}} を返します。デフォルトでは、ポートは 8 ビットのデータ、1 ビットのストップビット、パリティチェックなしで開かれます。パラメータ `baudRate` は必須です。 +**`open()`** は {{domxref("SerialPort")}} インターフェイスのメソッドで、ポートを開く処理が完了したら解決する {{jsxref("Promise")}} を返します。既定では、ポートは 8 ビットのデータ、1 ビットのストップビット、パリティチェックなしで開かれます。`baudRate` 引数は必須です。 ## 構文 @@ -24,15 +25,15 @@ open(options) - `baudRate` - : シリアル通信を確立するボーレートを表す正の値です。 - `bufferSize` {{Optional_Inline}} - - : 確保する送信用と受信用のバッファーのサイズを表す `unsigned long` の整数です。指定されない場合のデフォルト値は 255 です。 + - : 確保する送信用と受信用のバッファーのサイズを表す `unsigned long` の整数です。指定されない場合の既定値は 255 です。 - `dataBits` {{Optional_Inline}} - - : 1 フレームのデータビット数を表す、7 または 8 の整数です。指定されない場合のデフォルト値は 8 です。 + - : 1 フレームのデータビット数を表す、7 または 8 の整数です。指定されない場合の既定値は 8 です。 - `flowControl` {{Optional_Inline}} - - : `"none"` または `"hardware"` のいずれかで、フロー制御の種類を表します。デフォルト値は `"none"` です。 + - : `"none"` または `"hardware"` のいずれかで、フロー制御の種類を表します。既定値は `"none"` です。 - `parity` {{Optional_Inline}} - - : `"none"`, `"even"`, `"odd"` のいずれかで、パリティの種類を表します。デフォルト値は `"none"` です。 + - : `"none"`, `"even"`, `"odd"` のいずれかで、パリティの種類を表します。既定値は `"none"` です。 - `stopBits` {{Optional_Inline}} - - : フレームの最後のストップビットの数を表す、1 または 2の整数です。指定されない場合のデフォルト値は 1 です。 + - : フレームの最後のストップビットの数を表す、1 または 2の整数です。指定されない場合の既定値は 1 です。 ### 返値 @@ -47,7 +48,7 @@ open(options) ## 例 -シリアルポートで通信を行う前に、ポートを開く必要があります。ポートを開くことで、サイトはデータがどのように送受信されるかを決めるために必要なパラメータを設定できます。開発者は、適切なパラメータを決めるために接続するデバイスのドキュメントを参照するべきです。 +シリアルポートで通信を行う前に、ポートを開く必要があります。ポートを開くことで、サイトはデータがどのように送受信されるかを決めるために必要なパラメーターを設定できます。開発者は、適切なパラメーターを決めるために接続するデバイスのドキュメントを参照するべきです。 ```js await port.open({ baudRate: 9600 /* ボーレートを決める */ }); From 9d6dc790fd2bfa28b591c45340af3e1e590c48d0 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 18 Sep 2024 22:43:30 +0900 Subject: [PATCH 121/365] =?UTF-8?q?2024/07/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=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../using_server-sent_events/index.md | 45 ++++++++++++------- 1 file changed, 29 insertions(+), 16 deletions(-) diff --git a/files/ja/web/api/server-sent_events/using_server-sent_events/index.md b/files/ja/web/api/server-sent_events/using_server-sent_events/index.md index 37c5188b3893f7..ca592c9ffbf227 100644 --- a/files/ja/web/api/server-sent_events/using_server-sent_events/index.md +++ b/files/ja/web/api/server-sent_events/using_server-sent_events/index.md @@ -1,15 +1,21 @@ --- title: サーバー送信イベントの使用 slug: Web/API/Server-sent_events/Using_server-sent_events +l10n: + sourceCommit: 4f35a8237ee0842beb9cfef3354e05464ad7ce1a --- {{DefaultAPISidebar("Server Sent Events")}} [サーバー送信イベント](/ja/docs/Web/API/Server-sent_events) (Server-Sent Events) を使用するウェブアプリケーションの開発は簡単です。サーバー上でフロントエンドへイベントを流すために必要になるコードはわずかですが、クライアント側のコードは[ウェブソケット](/ja/docs/Web/API/WebSockets_API)で入ってくるイベントを扱う部分とほぼ同じ動作をします。これは単方向の接続ですので、クライアントからサーバーへイベントを送信することはできません。 -## サーバからのイベントの受信 +## サーバーからのイベントの受信 -サーバー送信イベント API は {{domxref("EventSource")}} インターフェイスに含まれています。イベントを受け取るためにサーバへの接続を開始するには、新たな `EventSource` オブジェクトを作成し、イベントを生成するスクリプトの URI を指定します。例を挙げます。 +サーバー送信イベント API は {{domxref("EventSource")}} インターフェイスに含まれています。 + +### `EventSource` インスタンスの作成 + +イベントを受け取るためにサーバーへの接続を開始するには、新たな `EventSource` オブジェクトを作成し、イベントを生成するスクリプトの URI を指定します。例を挙げます。 ```js const evtSource = new EventSource("ssedemo.php"); @@ -23,37 +29,41 @@ const evtSource = new EventSource("//api.example.com/ssedemo.php", { }); ``` +### `message` イベントの待ち受け + イベントソースのインスタンスを起動したら、 {{domxref("EventSource.message_event", "message")}} イベントのハンドラーを取り付けて、サーバーからのメッセージを待ち受けすることができます。 ```js -evtSource.onmessage = function (event) { +evtSource.onmessage = (event) => { const newElement = document.createElement("li"); const eventList = document.getElementById("list"); - newElement.textContent = "message: " + event.data; + newElement.textContent = `message: ${event.data}`; eventList.appendChild(newElement); }; ``` -このコードは入力メッセージ（すなわち `event` フィールドを持たない、サーバーからの通知）を受信して、メッセージのテキストを文書の HTML にあるリストへ追加します。 +このコードは入力メッセージを受信して、メッセージのテキストを文書の HTML にあるリストへ追加します。 -`addEventListener()` を使用してイベントを待ち受けすることもできます。 +### カスタムイベントの待ち受け + +`event` フィールドが定義されているサーバーからのメッセージは、`event` で指定された名前のイベントとして受信されます。例を示します。 ```js -evtSource.addEventListener("ping", function (event) { +evtSource.addEventListener("ping", (event) => { const newElement = document.createElement("li"); const eventList = document.getElementById("list"); const time = JSON.parse(event.data).time; - newElement.textContent = "ping at " + time; + newElement.textContent = `ping at ${time}`; eventList.appendChild(newElement); }); ``` -前のコードと似ていますが、`event` フィールドに "ping" が設定されたメッセージがサーバーから送られたときに、自動的に呼び出されることが異なります。こちらは `data` フィールドの JSON を解釈して、情報を出力します。 +このコードは、サーバーが `event` フィールドを `ping` に設定したメッセージを送信するたびに呼び出されます。こちらは `data` フィールドの JSON を解釈して、情報を出力します。 -> **警告:** **HTTP/2 上で使用されていない**場合、 SSE は開くことができる接続の最大数に制限を受けます。この制限は*ブラウザー単位*で設定されており、非常に小さい数 (6) に設定されているため、複数のタブを開くと特に痛みを伴う場合があります。この問題は、 [Chrome](https://bugs.chromium.org/p/chromium/issues/detail?id=275955) と [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=906896) で「修正予定なし」と示されています。この制限はブラウザー + ドメインごとに設定されており、`www.example1.com` への SSE 接続をすべてのタブで 6 つ、 `www.example2.com` への SSE 接続をさらに 6 つ開くことができることを意味します（[Stackoverflow](https://stackoverflow.com/questions/5195452/websockets-vs-server-sent-events-eventsource/5326159) によれば）。 HTTP/2 を使用する場合、同時に使用することができる *HTTP ストリーム*の最大数は、サーバーとクライアントの間で交渉が行われます（既定値は 100 です）。 +> **警告:** **HTTP/2 上で使用されていない**場合、 SSE は開くことができる接続の最大数に制限を受けます。この制限は*ブラウザー単位*で設定されており、非常に小さい数 (6) に設定されているため、複数のタブを開くと特に痛みを伴う場合があります。この問題は、 [Chrome](https://crbug.com/275955) と [Firefox](https://bugzil.la/906896) で「修正予定なし」と示されています。この制限はブラウザー + ドメインごとに設定されており、`www.example1.com` への SSE 接続をすべてのタブで 6 つ、 `www.example2.com` への SSE 接続をさらに 6 つ開くことができることを意味します（[Stackoverflow](https://stackoverflow.com/questions/5195452/websockets-vs-server-sent-events-eventsource/5326159) によれば）。 HTTP/2 を使用する場合、同時に使用することができる *HTTP ストリーム*の最大数は、サーバーとクライアントの間で交渉が行われます（既定値は 100 です）。 -## サーバからのイベントの送信 +## サーバーからのイベントの送信 イベントを送信するサーバー側のスクリプトは、 MIME タイプ `text/event-stream` で応答する必要があります。個々の通知は、 2 つの改行で終わるテキストのブロックとして送信されます。イベントストリームの形式について、詳しくは[イベントストリーム形式](#イベントストリーム形式)をご覧ください。 @@ -61,8 +71,9 @@ evtSource.addEventListener("ping", function (event) { ```php date_default_timezone_set("America/New_York"); -header("Cache-Control: no-store"); +header("X-Accel-Buffering: no"); header("Content-Type: text/event-stream"); +header("Cache-Control: no-cache"); $counter = rand(1, 10); while (true) { @@ -82,12 +93,14 @@ while (true) { $counter = rand(1, 10); } + if (ob_get_contents()) { ob_end_flush(); + } flush(); // クライアントが接続を中止したら（ページを閉じたら）ループから抜ける - if ( connection_aborted() ) break; + if (connection_aborted()) break; sleep(1); } @@ -97,14 +110,14 @@ while (true) { ループは接続状態にかかわらず実行し続けられますので、接続が閉じられたとき（例えばクライアントがページを閉じたとき）にループから脱出するためのチェックが含まれています。 > [!NOTE] -> この記事にあるコードを使用した完全な例が GitHub にあります。 [Simple SSE demo using PHP](https://github.com/mdn/dom-examples/tree/master/server-sent-events) を参照してください。 +> この記事にあるコードを使用した完全な例が GitHub にあります。 [Simple SSE demo using PHP](https://github.com/mdn/dom-examples/tree/main/server-sent-events) を参照してください。 ## エラー処理 問題が発生した場合（ネットワークのタイムアウトや[アクセス制御](/ja/docs/Web/HTTP/CORS)に関する問題など）は、エラーイベントが生成されます。これをプログラムで処理するには、 `onerror` コールバックを `EventSource` に実装してください。 ```js -evtSource.onerror = function (err) { +evtSource.onerror = (err) => { console.error("EventSource failed:", err); }; ``` @@ -135,7 +148,7 @@ evtSource.close(); - `data` - : メッセージのデータフィールドです。 `EventSource` が `data:` で始まる、複数の連続した行を受け取ったときは、[それらを連結して](https://html.spec.whatwg.org/multipage/#dispatchMessage)各項目の間に改行文字を挿入します。末尾の改行は取り除かれます。 - `id` - - : [`EventSource`](/ja/docs/Server-sent_events/EventSource) オブジェクトの最後のイベント ID の値に設定するイベント ID です。 + - : [`EventSource`](/ja/docs/Web/API/EventSource) オブジェクトの最後のイベント ID の値に設定するイベント ID です。 - `retry` - : 再接続時間です。サーバーへの接続が切れた場合、ブラウザーは指定した時間だけ待ってから再接続を試みます。これは整数値でなければならず、再接続時間をミリ秒単位で指定します。整数値以外が指定された場合は、このフィールドは無視されます。 From 9a9af9b0a1b25b7d08ae07099eeb0f58dd873a2e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 18 Sep 2024 23:05:27 +0900 Subject: [PATCH 122/365] =?UTF-8?q?2024/07/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=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/service_worker_api/index.md | 65 ++++++++++++-------- 1 file changed, 38 insertions(+), 27 deletions(-) diff --git a/files/ja/web/api/service_worker_api/index.md b/files/ja/web/api/service_worker_api/index.md index e7f647c44c201a..535b4746991482 100644 --- a/files/ja/web/api/service_worker_api/index.md +++ b/files/ja/web/api/service_worker_api/index.md @@ -2,10 +2,10 @@ title: サービスワーカー API slug: Web/API/Service_Worker_API l10n: - sourceCommit: 58af4d9f65d5cef3ea6b212aaf6644bd7f00ab62 + sourceCommit: 4f35a8237ee0842beb9cfef3354e05464ad7ce1a --- -{{DefaultAPISidebar("Service Workers API")}} +{{DefaultAPISidebar("Service Workers API")}}{{AvailableInWorkers}} サービスワーカーは、基本的にウェブアプリケーション、ブラウザー、そして（もし繋がっていれば）ネットワークの間に介在するプロキシサーバーのように振る舞います。これは、よりよいオフラインの操作性を可能にするように意図されており、ネットワークのリクエストに介在してネットワークの使用可否の状況に基づいて適切な対応を取ったり、サーバー上にある資産を更新したりします。また、プッシュ通知やバックグラウンド同期の API 群へのアクセスもできるようになります。 @@ -21,7 +21,7 @@ l10n: サービスワーカーはセキュリティ上の理由から、 HTTPS 通信でのみ動作します。最も重要なことは、HTTP 接続は{{Glossary("MitM", "中間者")}}攻撃による悪意のあるコード注入の影響を受けやすく、こうした強力な API へのアクセスを許可されると、その攻撃はより悪いものになる可能性があるということです。Firefox では[プライベートブラウジングモード](https://support.mozilla.org/ja/kb/private-browsing-use-firefox-without-history)でサービスワーカー API を利用することはできません。 > [!NOTE] -> Firefox では、テストのためにサービスワーカーを HTTP (安全ではない) 上で実行することができます。これは、 **HTTP による サービスワーカー を有効化 (ツールボックスを開いたとき)** オプションを Firefox Devtools 設定メニューでチェックするだけです。 +> Firefox では、テストのためにサービスワーカーを HTTP (安全ではない) 上で実行することができます。これは、 **HTTP によるサービスワーカーを有効化 (ツールボックスを開いたとき)** オプションを Firefox Devtools 設定メニューでチェックするだけです。 > [!NOTE] > サービスワーカーは [AppCache](https://alistapart.com/article/application-cache-is-a-douchebag/) のような、この分野における以前の試みより勝っています。以前のものは、あなたがしようとしていることを想定していなかったり、想定が正しくなかったときに壊れたりしていたのに対して、サービスワーカーはあなたがすべてを細かく制御することができるためです。 @@ -64,17 +64,24 @@ l10n: 最初の基本的な例をどのように構築するかについての完全なチュートリアルは、[サービスワーカーの使用](/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers)を読んでください。 +### 静的ルーティングを使用して、リソースの取得方法を制御 + +サービスワーカーは、不要なパフォーマンスコストが発生する可能性があります。しばらくぶりにページが初めて読み込まれる場合、ブラウザはサービスワーカーが起動して実行されるのを待たなければ、どのコンテンツを読み込むべきか、また、キャッシュまたはネットワークのどちらから取得すべきかを判断できません。 + +特定のコンテンツがどこから取得されるべきか事前に分かっている場合は、サービスワーカーを完全にバイパスして、リソースを即座に取得することができます。{{domxref("InstallEvent.addRoutes()")}} メソッドは、この使用事例やその他の実装にも使用できます。 + ## その他の使用例 サービスワーカーは次のような用途も想定しています。 -- バックグラウンドのデータ同期 -- 他のオリジンからのリソースのリクエストに対する応答 -- 位置情報やジャイロスコープのような計算コストの高いデータの更新を集中的に受信して、複数のページがデータの一部を利用できるようにすること -- CoffeeScript, less, CJS/AMD モジュールなどの開発用途で、クライアント側のコンパイルや依存性管理 -- バックグラウンドサービスのフック -- 特定の URL パターンに基づくテンプレートカスタマイズ -- パフォーマンスの改善、例えばユーザーが近く必要とするであろう、写真アルバムの次の数枚の写真などの先読み +- バックグラウンドのデータ同期。 +- 他のオリジンからのリソースのリクエストに対する応答。 +- 位置情報やジャイロスコープのような計算コストの高いデータの更新を集中的に受信して、複数のページがデータの一部を利用できるようにすること。 +- CoffeeScript, less, CJS/AMD モジュールなどの開発用途で、クライアント側のコンパイルや依存性管理。 +- バックグラウンドサービスのフック。 +- 特定の URL パターンに基づくテンプレートカスタマイズ。 +- パフォーマンスの向上、例えば、ユーザーが次に必要とする可能性が高いリソース（例えば、フォトアルバムの次の数枚の写真）を事前に取得するなど。 +- API のモックアップ。 近い将来、サービスワーカーはネイティブアプリで実現できることに近い、その他いくつもの便利なことを、ウェブプラットフォーム上でも実現する事ができるようになるでしょう。興味深いことに、次のような他の仕様書でも、サービスワーカーのコンテキストを利用できるようになってきています。 @@ -90,7 +97,7 @@ l10n: - {{DOMxRef("CacheStorage")}} - : {{DOMxRef("Cache")}} オブジェクトのストレージです。これは {{DOMxRef("ServiceWorker")}} がアクセスできるすべての名前付きキャッシュのへの目録を提供し、文字列の名前から対応する {{DOMxRef("Cache")}} へのマップを保持します。 - {{DOMxRef("Client")}} - - : サービスワーカークライアントのスコープを表します。サービスワーカークライアントは、ブラウザーコンテキスト内の文書または {{DOMxRef("SharedWorker")}} であり、アクティブワーカーによって制御されています。 + - : サービスワーカークライアントのスコープを表します。サービスワーカークライアントは、閲覧コンテキスト内の文書または {{DOMxRef("SharedWorker")}} であり、アクティブワーカーによって制御されています。 - {{DOMxRef("Clients")}} - : {{DOMxRef("Client")}} オブジェクトのリストのためのコンテナーであり、現在のオリジンにある有効化されたサービスワーカークライアントにアクセスする主な方法です。 - {{DOMxRef("ExtendableEvent")}} @@ -99,30 +106,27 @@ l10n: - : サービスワーカーで発生する {{domxref("ServiceWorkerGlobalScope/message_event", "message")}} イベントのイベントオブジェクト（別のコンテキストから {{DOMxRef("ServiceWorkerGlobalScope")}} でチャンネルメッセージを受信した時）の有効期限を延長します。 - {{DOMxRef("FetchEvent")}} - : ハンドラー {{DOMxRef("ServiceWorkerGlobalScope.fetch_event", "onfetch")}} に渡される引数、 `FetchEvent` は {{DOMxRef("ServiceWorkerGlobalScope")}} で配信される読み取りアクションを表現しています。これは、リクエストと結果のレスポンスに関する情報を含み、{{DOMxRef("FetchEvent.respondWith", "FetchEvent.respondWith()")}} メソッドを提供して、制御されたページに任意のレスポンスを返すことができます。 -- {{DOMxRef("InstallEvent")}} {{Deprecated_Inline}} {{Non-standard_Inline}} - - : {{DOMxRef("ServiceWorkerGlobalScope.install_event", "oninstall")}} ハンドラーに渡される引数で、 `InstallEvent` インターフェースは {{DOMxRef("ServiceWorker")}} の {{DOMxRef("ServiceWorkerGlobalScope")}} に配信されるインストールアクションを表現します。 {{DOMxRef("ExtendableEvent")}} の子として、{{DOMxRef("FetchEvent")}} のような機能イベントがインストール中に配信されないことを保証しています。 +- {{DOMxRef("InstallEvent")}} + - : {{DOMxRef("ServiceWorkerGlobalScope.install_event", "oninstall")}} ハンドラーに渡される引数で、 `InstallEvent` インターフェイスは {{DOMxRef("ServiceWorker")}} の {{DOMxRef("ServiceWorkerGlobalScope")}} に配信されるインストールアクションを表現します。 {{DOMxRef("ExtendableEvent")}} の子として、{{DOMxRef("FetchEvent")}} のような機能イベントがインストール中に配信されないことを保証しています。 - {{DOMxRef("NavigationPreloadManager")}} - : サービスワーカーによるリソースの先読みを管理するためのメソッドを提供します。 -- {{DOMxRef("Navigator.serviceWorker")}} - - : {{DOMxRef("ServiceWorker")}} オブジェクトを返します。これにより、[関連ドキュメント](https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window)に対する登録、削除、アップグレード、通信へのアクセスを提供します。 -- {{DOMxRef("NotificationEvent")}} - - : {{DOMxRef("ServiceWorkerGlobalScope.notificationclick_event", "onnotificationclick")}} ハンドラーに渡される引数で、`NotificationEvent` インターフェースは {{DOMxRef("ServiceWorker")}} で通知クリックイベントを表現します。 - {{DOMxRef("ServiceWorker")}} - : サービスワーカーを表します。複数の閲覧コンテキスト（例：ページ、ワーカーなど）を同じ `ServiceWorker` オブジェクトに関連付けることができます。 - {{DOMxRef("ServiceWorkerContainer")}} - : サービスワーカーの登録、登録解除、更新、サービスワーカーとその登録の状態へのアクセスなどの機能を含む、ネットワークエコシステムの全体ユニットとしてのサービスワーカーを表すオブジェクトを提供します。 - {{DOMxRef("ServiceWorkerGlobalScope")}} - : サービスワーカーのグローバル実行コンテキストを表します。 -- {{DOMxRef("MessageEvent")}} - - : {{DOMxRef("ServiceWorkerGlobalScope")}} に送られるメッセージを表します。 - {{DOMxRef("ServiceWorkerRegistration")}} - : サービスワーカーの登録を表します。 -- {{DOMxRef("SyncEvent")}} {{Experimental_Inline}} - - : SyncEvent インターフェイスはサービスワーカーの {{DOMxRef("ServiceWorkerGlobalScope")}} で配信された同期アクションを表します。 -- {{DOMxRef("SyncManager")}} {{Experimental_Inline}} - - : 同期登録を登録、およびリストするためのインターフェイスを提供します。 - {{DOMxRef("WindowClient")}} - - : アクティブなワーカーによって制御されるブラウザーコンテキスト内の文書であるサービスワーカークライアントのスコープを表します。 + - : アクティブなワーカーによって制御される閲覧コンテキスト内の文書であるサービスワーカークライアントのスコープを表します。これは特別な種類の {{DOMxRef("Client")}} オブジェクトで、いくつかの追加メソッドとプロパティが利用可能です。 + +### 他のインターフェイスへの拡張 + +- {{DOMxRef("Window.caches")}} and {{domxref("WorkerGlobalScope.caches")}} + - : 現在のkンテキストに関連付けられた {{domxref("CacheStorage")}} オブジェクトです。 +- {{DOMxRef("Navigator.serviceWorker")}} および {{DOMxRef("WorkerNavigator.serviceWorker")}} + - : {{DOMxRef("ServiceWorkerContainer")}} オブジェクトを返します。このオブジェクトは、[関連付けられた文書](https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window)の {{DOMxRef("ServiceWorker")}} オブジェクトの登録、削除、アップグレード、通信へのアクセスを提供します。 ## 仕様書 @@ -130,8 +134,15 @@ l10n: ## 関連情報 -- [ServiceWorker Cookbook](https://github.com/mdn/serviceworker-cookbook) (英語) - [サービスワーカーの使用](/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- [Service Worker Lifecycle](https://web.dev/articles/service-worker-lifecycle) (英語) - [Service workers basic code example](https://github.com/mdn/dom-examples/tree/main/service-worker/simple-service-worker) (英語) -- [Is ServiceWorker ready?](https://jakearchibald.github.io/isserviceworkerready/) (英語) -- {{jsxref("Promise")}} +- サービスワーカー APIに関連する Web API: + - {{domxref("Background Fetch API", "バックグラウンドフェッチ API", "", "nocode")}} + - {{domxref("Background Synchronization API", "バックグラウンド同期 API", "", "nocode")}} + - {{domxref("Content Index API", "コンテンツインデックス API", "", "nocode")}} + - {{domxref("Cookie Store API", "クッキーストア API", "", "nocode")}} + - {{domxref("Notifications API", "通知 API", "", "nocode")}} + - {{domxref("Payment Handler API", "決済ハンドラー API", "", "nocode")}} + - {{domxref("Push API", "プッシュ API", "", "nocode")}} + - {{domxref("Web Periodic Background Synchronization API", "ウェブ定期バックグラウンド同意 API", "", "nocode")}} From 6ad48e2ba164aa961d4d9bebea93a2bf2534611e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 18 Sep 2024 23:08:17 +0900 Subject: [PATCH 123/365] =?UTF-8?q?2024/07/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=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/service_worker_api/using_service_workers/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/files/ja/web/api/service_worker_api/using_service_workers/index.md b/files/ja/web/api/service_worker_api/using_service_workers/index.md index 8beec5751e8403..6821cf709af549 100644 --- a/files/ja/web/api/service_worker_api/using_service_workers/index.md +++ b/files/ja/web/api/service_worker_api/using_service_workers/index.md @@ -2,7 +2,7 @@ title: サービスワーカーの使用 slug: Web/API/Service_Worker_API/Using_Service_Workers l10n: - sourceCommit: ac3a9701390bedd2544895fda96fd0be488e4fad + sourceCommit: 4f35a8237ee0842beb9cfef3354e05464ad7ce1a --- {{DefaultAPISidebar("Service Workers API")}} @@ -97,12 +97,12 @@ registerServiceWorker(); 次の可能性が考えられます。 - HTTPS を使用してアプリケーションを実行していない。 -- サービスワーカーファイルへのパスが正しく書かれていない。 — アプリのルートディレクトリではなく、アプリのオリジンからの相対パスで書く必要があります。上記の例では、ワーカーが `https://bncb2v.csb.app/sw.js` にあり、アプリのルートは `https://bncb2v.csb.app/` です。しかし、パスは `/sw.js` と書く必要があります。 +- サービスワーカーファイルへのパスが正しく書かれていない。 — アプリのルートディレクトリーではなく、アプリのオリジンからの相対パスで書く必要があります。上記の例では、ワーカーが `https://bncb2v.csb.app/sw.js` にあり、アプリのルートは `https://bncb2v.csb.app/` です。しかし、パスは `/sw.js` と書く必要があります。 - 指定されているサービスワーカーがアプリとは異なるオリジンにある。これは許可されていません。 - サービスワーカーはサービスワーカーのスコープ内にあるクライアントからのリクエストのみを取得します。 - サービスワーカーの最大スコープは、ワーカーのある場所です。 -- サービスワーカーの最大スコープはワーカーの位置です（言い換えれば、スクリプト `sw.js` が `/js/sw.js` にある場合、 既定では `/js/` 以下の URL しか制御できません）。サービスワーカーの最大スコープのリストは [`Service-Worker-Allowed`](/ja/docs/Web/HTTP/Header/Service-Worker-Allowed) ヘッダーで指定することができます。 -- Firefoxでは、ユーザーが[プライベートブラウジングモード](https://bugzil.la/1320796)である場合、履歴が無効である場合、Firefox を閉じたときに Cookie がクリアされる場合、サービスワーカーの API は隠され使用することができません。 +- サービスワーカーの最大スコープはワーカーの位置です（言い換えれば、スクリプト `sw.js` が `/js/sw.js` にある場合、 既定では `/js/` 以下の URL しか制御できません）。サービスワーカーの最大スコープのリストは `Service-Worker-Allowed` ヘッダーで指定することができます。 +- Firefox では、ユーザーが[プライベートブラウジングモード](https://bugzil.la/1320796)である場合、履歴が無効である場合、Firefox を閉じたときに Cookie がクリアされる場合、サービスワーカーの API は隠され使用することができません。 - Chrome の場合、「すべての Cookie をブロックする（推奨しない）」オプションが有効になっていると、登録に失敗します。 ### インストールとアクティブ化: キャッシュの作成 From 77195f6ea9019f24f69904b6bcb0cfdefcdf91f6 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 19 Sep 2024 00:02:25 +0900 Subject: [PATCH 124/365] =?UTF-8?q?ServiceWorkerGlobalScope=20=E3=83=9A?= =?UTF-8?q?=E3=83=BC=E3=82=B8=E3=81=AE=E7=B4=B0=E9=83=A8=E3=81=AE=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/serviceworkerglobalscope/index.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/files/ja/web/api/serviceworkerglobalscope/index.md b/files/ja/web/api/serviceworkerglobalscope/index.md index ce27c90087d0ae..91538d2f6e4c05 100644 --- a/files/ja/web/api/serviceworkerglobalscope/index.md +++ b/files/ja/web/api/serviceworkerglobalscope/index.md @@ -23,8 +23,6 @@ l10n: _このインターフェイスには {{domxref("WorkerGlobalScope")}} インターフェイス、およびその親である {{domxref("EventTarget")}} から継承したプロパティがあります。_ -- {{domxref("caches")}} {{ReadOnlyInline}} - - : サービスワーカーに関連づけられた {{domxref("CacheStorage")}} オブジェクトを保持します。 - {{domxref("ServiceWorkerGlobalScope.clients")}} {{ReadOnlyInline}} - : サービスワーカーに関連付けられた {{domxref("Clients")}} オブジェクトを保持します。 - {{domxref("ServiceWorkerGlobalScope.cookieStore")}} {{ReadOnlyInline}} {{Experimental_Inline}} @@ -50,7 +48,7 @@ _このインターフェイスには {{domxref("WorkerGlobalScope")}} インタ - {{domxref("ServiceWorkerGlobalScope/backgroundfetchabort_event", "backgroundfetchabort")}} {{Experimental_Inline}} - : ユーザーまたはアプリによって[バックグラウンドフェッチ](/ja/docs/Web/API/Background_Fetch_API)処理が中止された場合に発生します。 - {{domxref("ServiceWorkerGlobalScope/backgroundfetchclick_event", "backgroundfetchclick")}} {{Experimental_Inline}} - - : ユーザーがUIをクリックして[バックグラウンドフェッチ](/ja/docs/Web/API/Background_Fetch_API)処理を実行したときに発生します。 + - : ユーザーが UI をクリックして[バックグラウンドフェッチ](/ja/docs/Web/API/Background_Fetch_API)処理を実行したときに発生します。 - {{domxref("ServiceWorkerGlobalScope/backgroundfetchfail_event", "backgroundfetchfail")}} {{Experimental_Inline}} - : [バックグラウンドフェッチ](/ja/docs/Web/API/Background_Fetch_API)処理で、リクエストの少なくとも 1 つが失敗したときに発生します。 - {{domxref("ServiceWorkerGlobalScope/backgroundfetchsuccess_event", "backgroundfetchsuccess")}} {{Experimental_Inline}} From 875b80728e368cef9a12ae44f017e38152c52db2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 19 Sep 2024 00:05:25 +0900 Subject: [PATCH 125/365] =?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=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/api/serviceworkerglobalscope/clients/index.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/files/ja/web/api/serviceworkerglobalscope/clients/index.md b/files/ja/web/api/serviceworkerglobalscope/clients/index.md index 8012335eec837e..1f64196579d0a7 100644 --- a/files/ja/web/api/serviceworkerglobalscope/clients/index.md +++ b/files/ja/web/api/serviceworkerglobalscope/clients/index.md @@ -1,11 +1,12 @@ --- -title: ServiceWorkerGlobalScope.clients +title: "ServiceWorkerGlobalScope: clients プロパティ" +short-title: clients slug: Web/API/ServiceWorkerGlobalScope/clients l10n: - sourceCommit: c7aeb96dac3e0ac2864cffe45c02d214ae1a5219 + sourceCommit: 2ef36a6d6f380e79c88bc3a80033e1d3c4629994 --- -{{APIRef("Service Workers API")}} +{{APIRef("Service Workers API")}}{{SecureContext_Header}}{{AvailableInWorkers("service")}} **`clients`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスの読み取り専用プロパティで、サービスワーカーに関連付けられた [`Clients`](/ja/docs/Web/API/Clients) オブジェクトを返します。 @@ -25,6 +26,4 @@ l10n: - [サービスワーカーの使用](/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers) - [サービスワーカーの基本的なコード例](https://github.com/mdn/dom-examples/tree/main/service-worker/simple-service-worker) -- [Is ServiceWorker ready?](https://jakearchibald.github.io/isserviceworkerready/) -- {{jsxref("Promise")}} - [ウェブワーカーの使用](/ja/docs/Web/API/Web_Workers_API/Using_web_workers) From 461270ff6a017ff50c7c29e0a209bd0f9b74829f Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Sun, 22 Sep 2024 12:00:54 +0200 Subject: [PATCH 126/365] Markdownlint auto-cleanup for ja (#23722) * ja: auto-fix Markdownlint issues * Update index.md --------- Co-authored-by: Masahiro FUJIMOTO --- files/ja/web/html/element/source/index.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/files/ja/web/html/element/source/index.md b/files/ja/web/html/element/source/index.md index 26fdaef4db7f9e..ffb93aeee59761 100644 --- a/files/ja/web/html/element/source/index.md +++ b/files/ja/web/html/element/source/index.md @@ -43,7 +43,7 @@ l10n: - `media` - リソースの志向するメディアの[メディアクエリー](/ja/docs/Web/CSS/Media_Queries)です。 + - : リソースの志向するメディアの[メディアクエリー](/ja/docs/Web/CSS/Media_Queries)です。 - `height` @@ -145,6 +145,7 @@ l10n: height="400" /> ``` + ## 技術的な詳細 From 3094da9c8210d2598a55afbfde1aa988e280bb05 Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Sun, 22 Sep 2024 20:25:49 +0800 Subject: [PATCH 127/365] [zh-cn]: update the translation of "Client-side storage" (#23488) Co-authored-by: Hoarfroster Co-authored-by: A1lo --- .../client-side_storage/cookies-notice.png | Bin 20289 -> 0 bytes .../client-side_storage/index.md | 688 +++++++++--------- 2 files changed, 334 insertions(+), 354 deletions(-) delete mode 100644 files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/cookies-notice.png diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/cookies-notice.png b/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/cookies-notice.png deleted file mode 100644 index 8109d4777df92b973714718816aa53e660b91d39..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 20289 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 YA8Eo>H!+BcOaK4?07*qoM6N<$f@ebvz5oCK diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/index.md index ce17fdaafacff0..626deffb063828 100644 --- a/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/index.md +++ b/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/index.md @@ -1,30 +1,31 @@ --- title: 客户端存储 slug: Learn/JavaScript/Client-side_web_APIs/Client-side_storage +l10n: + sourceCommit: bc0d0d1ef796435e969f6d65c7e5d3c08f4023aa --- {{LearnSidebar}} {{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}} -现代 web 浏览器提供了很多在用户电脑 web 客户端存放数据的方法 — 只要用户的允许 — 可以在它需要的时候被重新获得。这样能让你存留的数据长时间保存，保存站点和文档在离线情况下使用，保留你对其站点的个性化配置等等。本篇文章只解释它们工作的一些很基础的部分。 +现代 Web 浏览器提供了很多在用户电脑上存放数据的方法——只要用户的允许——然后在需要时检索数据。这样能让你存留的数据长时间保存，保存站点和文档在离线情况下使用，保留对站点的个性化配置等等。本篇文章只解释它们工作的一些很基础的部分。
- + - + @@ -32,93 +33,88 @@ slug: Learn/JavaScript/Client-side_web_APIs/Client-side_storage ## 客户端存储？ -在其他的 MDN 学习中我们已经讨论过 静态网站（[static sites](/zh-CN/docs/Learn/Server-side/First_steps/Client-Server_overview#Static_sites)）和动态网站（ [dynamic sites](/zh-CN/docs/Learn/Server-side/First_steps/Client-Server_overview#Dynamic_sites)）的区别。大多数现代的 web 站点是动态的— 它们在服务端使用各种类型的数据库来存储数据 (服务端存储), 之后通过运行服务端（ [server-side](/zh-CN/docs/Learn/Server-side)）代码来重新获取需要的数据，把其数据插入到静态页面的模板中，并且生成出 HTML 渲染到用户浏览上。 +在其他的 MDN 学习中我们已经讨论过[静态网站](/zh-CN/docs/Learn/Server-side/First_steps/Client-Server_overview#静态网站)和[动态网站](/zh-CN/docs/Learn/Server-side/First_steps/Client-Server_overview#动态网站)的区别。大多数现代的网站是动态的——它们在服务端使用各种类型的数据库（服务端存储）来存储数据，之后通过运行[服务端](/zh-CN/docs/Learn/Server-side)代码来查询需要的数据，把其数据插入到静态页面的模板中，并将生成的 HTML 提供给客户端，以在用户的浏览器中显示。 -客户端存储以相同的原理工作，但是在使用上有一些不同。它是由 JavaScript APIs 组成的因此允许你在客户端存储数据 (比如在用户的机器上)，而且可以在需要的时候重新取得需要的数据。这有很多明显的用处，比如： +客户端存储以相同的原理工作，但是在使用上有一些不同。它是由 JavaScript API 组成的因此允许你在客户端存储数据（比如在用户的机器上），而且可以在需要的时候查询相关的数据。这有很多明显的用处，比如： -- 个性化网站偏好（比如显示一个用户选择的窗口小部件，颜色主题，或者字体）。 -- 保存之前的站点行为 (比如从先前的 session 中获取购物车中的内容，记住用户是否之前已经登陆过)。 -- 本地化保存数据和静态资源可以使一个站点更快（至少让资源变少）的下载，甚至可以在网络失去链接的时候变得暂时可用。 -- 保存 web 已经生产的文档可以在离线状态下访问。 +- 个性化网站偏好（比如显示一个用户选择的自定义微件、颜色主题或字体大小）。 +- 保存之前的站点行为（比如从先前的 session 中获取购物车中的内容，记住用户是否之前已经登陆过）。 +- 本地化保存数据和静态资源可以使一个站点更快（至少让资源变少）的下载，甚至可以在失去网络连接的情况下可用。 +- 将 Web 应用生成的文档保存在本地以供离线使用。 -通常客户端和服务端存储是结合在一起使用的。例如，你可以从数据库中下载一个由网络游戏或音乐播放器应用程序使用的音乐文件，将它们存储在客户端数据库中，并按需要播放它们。用户只需下载音乐文件一次——在随后的访问中，它们将从数据库中检索。 +通常客户端和服务端存储是结合在一起使用的。例如，你可以从数据库中下载一个由 Web 游戏或音乐播放器应用程序使用的音乐文件，将它们存储在客户端数据库中，并按需要播放它们。用户只需下载音乐文件一次——在随后的访问中，它们将从数据库中检索。 > [!NOTE] -> 使用客户端存储 API 可以存储的数据量是有限的（可能是每个 API 单独的和累积的总量）;具体的数量限制取决于浏览器，也可能基于用户设置。有关更多信息，获取更多信息，请参考[浏览器存储限制和清理标准](/zh-CN/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria)。 +> 使用客户端存储 API 可以存储的数据量是有限的（可能是每个 API 单独的和累积的总量）；具体的限制取决于浏览器，也可能基于用户设置。参见[浏览器存储限制和清理标准](/zh-CN/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria)以了解更多信息。 -### 传统方法：cookies +### 老做派：cookie -客户端存储的概念已经存在很长一段时间了。从早期的网络时代开始，网站就使用 [cookies](/zh-CN/docs/Web/HTTP/Cookies) 来存储信息，以在网站上提供个性化的用户体验。它们是网络上最早最常用的客户端存储形式。 -因为在那个年代，有许多问题——无论是从技术上的还是用户体验的角度——都是困扰着 cookies 的问题。这些问题非常重要，以至于当第一次访问一个网站时，欧洲居民会收到消息，告诉他们是否会使用 cookies 来存储关于他们的数据，而这是由一项被称为[欧盟 Cookie 条例](/zh-CN/docs/Web/HTTP/Cookies#%E6%AC%A7%E7%9B%9FCookie%E6%8C%87%E4%BB%A4)的欧盟法律导致的。 +客户端存储的概念已经存在很长一段时间了。从 Web 的早期时代开始，网站就使用 [cookie](/zh-CN/docs/Web/HTTP/Cookies) 来存储信息，以在网站上提供个性化的用户体验。它们是 Web 中最早、最常用的客户端存储形式。 -![](cookies-notice.png) +如今，有更简单的机制可用于存储客户端数据，因此我们在本文中不会教授如何使用 cookie。然而，这并不意味着 cookie 在现代 Web 上完全没有用处——它们仍然被广泛用于存储与用户个性化和状态相关的数据，例如会话 ID 和访问令牌。有关 cookie 的更多信息，请参见我们的[使用 HTTP cookie](/zh-CN/docs/Web/HTTP/Cookies) 文章。 -由于这些原因，我们不会在本文中教你如何使用 cookie。毕竟它过时、存在各种[安全问题](/zh-CN/docs/Web/HTTP/Cookies#安全)，而且无法存储复杂数据，而且有更好的、更现代的方法可以在用户的计算机上存储种类更广泛的数据。 -cookie 的唯一优势是它们得到了非常旧的浏览器的支持，所以如果你的项目需要支持已经过时的浏览器（比如 Internet Explorer 8 或更早的浏览器），cookie 可能仍然有用，但是对于大多数项目（很明显不包括本站）来说，你不需要再使用它们了。其实 cookie 也没什么好说的，[`document.cookie`](/zh-CN/docs/Web/API/Document/cookie)一把梭就完事了。 +### 新流派：Web 存储和 IndexedDB -> [!NOTE] -> 为什么仍然有新创建的站点使用 cookies？这主要是因为开发人员的习惯，使用了仍然使用 cookies 的旧库，以及存在许多 web 站点，提供了过时的参考和培训材料来学习如何存储数据。 - -### 新流派：Web Storage 和 IndexedDB - -现代浏览器有比使用 cookies 更简单、更有效的存储客户端数据的 API。 +我们在上面所提到的“更简单”的特性如下： -- [Web Storage API](/zh-CN/docs/Web/API/Web_Storage_API) 提供了一种非常简单的语法，用于存储和检索较小的、由名称和相应值组成的数据项。当你只需要存储一些简单的数据时，比如用户的名字，用户是否登录，屏幕背景使用了什么颜色等等，这是非常有用的。 +- [Web 存储 API](/zh-CN/docs/Web/API/Web_Storage_API) 提供了一种非常简单的语法，用于存储和检索较小的、由名称和相应值组成的数据项。当你只需要存储一些简单的数据时，比如用户的名字、用户是否登录、屏幕背景使用了什么颜色等等，这是非常有用的。 - [IndexedDB API](/zh-CN/docs/Web/API/IndexedDB_API) 为浏览器提供了一个完整的数据库系统来存储复杂的数据。这可以用于存储从完整的用户记录到甚至是复杂的数据类型，如音频或视频文件。 你将在下面了解更多关于这些 API 的信息。 -### 未来：Cache API +### Cache API -一些现代浏览器支持新的 {{domxref("Cache")}} API。这个 API 是为存储特定 HTTP 请求的响应文件而设计的，它对于像存储离线网站文件这样的事情非常有用，这样网站就可以在没有网络连接的情况下使用。缓存通常与 [Service Worker API](/zh-CN/docs/Web/API/Service_Worker_API) 组合使用，尽管不一定非要这么做。 -Cache 和 Service Workers 的使用是一个高级主题，我们不会在本文中详细讨论它，尽管我们将在下面的 [离线文件存储](#离线文件存储) 一节中展示一个简单的例子。 +{{domxref("Cache")}} API 是为存储特定 HTTP 请求的响应文件而设计的，它对于像存储离线网站文件这样的事情非常有用，这样网站就可以在没有网络连接的情况下使用。缓存通常与 [Service Worker API](/zh-CN/docs/Web/API/Service_Worker_API) 组合使用，尽管不一定非要这么做。 -## 存储简单数据 — web storage +Cache 和 Service Worker 的使用是一个高级主题，我们不会在本文中详细讨论它，尽管我们将在下面的[离线文件存储](#离线文件存储)小节中展示一个简单的例子。 -[Web Storage API](/zh-CN/docs/Web/API/Web_Storage_API) 非常容易使用 — 你只需存储简单的 键名/键值 对数据 (限制为字符串、数字等类型) 并在需要的时候检索其值。 +## 存储简单数据——Web 存储 + +[Web 存储 API](/zh-CN/docs/Web/API/Web_Storage_API) 非常容易使用——你只需存储简单的键名/键值对数据（限制为字符串、数字等类型）并在需要的时候检索其值。 ### 基本语法 让我们来告诉你怎么做： -1. 第一步，访问 GitHub 上的 [web storage blank template](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/index.html) (在新标签页打开此[模板](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/index.html))。 +1. 第一步，访问 GitHub 上的 [Web 存储空白模板](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/index.html)（在新标签页打开它）。 2. 打开你浏览器开发者工具的 JavaScript 控制台。 -3. 你所有的 web storage 数据都包含在浏览器内两个类似于对象的结构中： {{domxref("Window.sessionStorage", "sessionStorage")}} 和 {{domxref("Window.localStorage", "localStorage")}}。第一种方法，只要浏览器开着，数据就会一直保存 (关闭浏览器时数据会丢失) ，而第二种会一直保存数据，甚至到浏览器关闭又开启后也是这样。我们将在本文中使用第二种方法，因为它通常更有用。 -4. {{domxref("Storage.setItem()")}} 方法允许你在存储中保存一个数据项——它接受两个参数：数据项的名字及其值。试着把它输入到你的 JavaScript 控制台（如果你愿意的话，可以把它的值改为你自己的名字！） +3. 你所有的 Web 存储数据都包含在浏览器内两个类似于对象的结构中：{{domxref("Window.sessionStorage", "sessionStorage")}} 和 {{domxref("Window.localStorage", "localStorage")}}。第一种方法，只要浏览器开着，数据就会一直保存（关闭浏览器时数据会丢失），而第二种会一直保存数据，甚至到浏览器关闭又开启后也是这样。我们将在本文中使用第二种方法，因为它通常更有用。 + + {{domxref("Storage.setItem()")}} 方法允许你在存储中保存一个数据项——它接受两个参数：数据项的名字及其值。试着把它输入到你的 JavaScript 控制台（如果你愿意的话，可以把它的值改为你自己的名字！） ```js localStorage.setItem("name", "Chris"); ``` -5. {{domxref("Storage.getItem()")}} 方法接受一个参数——你想要检索的数据项的名称——并返回数据项的值。现在将这些代码输入到你的 JavaScript 控制台： +4. {{domxref("Storage.getItem()")}} 方法接受一个参数——你想要检索的数据项的名称——并返回数据项的值。现在将这些代码输入到你的 JavaScript 控制台： ```js - var myName = localStorage.getItem("name"); + let myName = localStorage.getItem("name"); myName; ``` - 在输入第二行时，你应该会看到 `myName`变量现在包含`name`数据项的值。 + 在输入第二行时，你应该会看到 `myName` 变量现在包含 `name` 数据项的值。 -6. {{domxref("Storage.removeItem()")}} 方法接受一个参数——你想要删除的数据项的名称——并从 web storage 中删除该数据项。在你的 JavaScript 控制台中输入以下几行： +5. {{domxref("Storage.removeItem()")}} 方法接受一个参数——你想要删除的数据项的名称——并从 Web 存储中删除该数据项。在你的 JavaScript 控制台中输入以下几行： - ```js - localStorage.removeItem("name"); - var myName = localStorage.getItem("name"); - myName; - ``` +```js +localStorage.removeItem("name"); +myName = localStorage.getItem("name"); +myName; +``` - 第三行现在应该返回 `null` — `name` 项已经不存在于 web storage 中。 +第三行现在应该返回 `null`——`name` 项已经不存在于 Web 存储中。 ### 数据会一直存在！ -web storage 的一个关键特性是，数据在不同页面加载时都存在（甚至是当浏览器关闭后，对 localStorage 的而言）。让我们来看看这个： +Web 存储的一个关键特性是，数据在不同页面加载时都存在（甚至是当浏览器关闭后，对 `localStorage` 而言）。让我们来看看这个： -1. 再次打开我们的 Web Storage 空白模板，但是这次你要在不同的浏览器中打开这个教程！这样可以更容易处理。 +1. 再次打开我们的 Web 存储空白模板，但是这次你要在不同的浏览器中打开这个教程！这样可以更容易处理。 2. 在浏览器的 JavaScript 控制台中输入这几行： ```js localStorage.setItem("name", "Chris"); - var myName = localStorage.getItem("name"); + let myName = localStorage.getItem("name"); myName; ``` @@ -128,7 +124,7 @@ web storage 的一个关键特性是，数据在不同页面加载时都存在 4. 再次输入下面几行： ```js - var myName = localStorage.getItem("name"); + let myName = localStorage.getItem("name"); myName; ``` @@ -136,23 +132,23 @@ web storage 的一个关键特性是，数据在不同页面加载时都存在 ### 为每个域名分离储存 -每个域都有一个单独的数据存储区 (每个单独的网址都在浏览器中加载). 你 会看到，如果你加载两个网站（例如 google.com 和 amazon.com）并尝试将某个项目存储在一个网站上，该数据项将无法从另一个网站获取。 +每个域都有一个单独的数据存储区（每个单独的网址都在浏览器中加载）。你会看到，如果你加载两个网站（例如 google.com 和 amazon.com）并尝试将某个项目存储在一个网站上，该数据项将无法从另一个网站获取。 -这是有道理的 - 你可以想象如果网站能够查看彼此的数据，就会出现安全问题！ +这是有道理的——你可以想象如果网站能够查看彼此的数据，就会出现安全问题！ ### 更复杂的例子 -让我们通过编写一个简单的工作示例来应用这些新发现的知识，让你了解如何使用网络存储。我们的示例将允许你输入一个名称，然后该页面将刷新，以提供个性化问候。这种状态也会页面/浏览器重新加载期间保持，因为这个名称存储在 Web Storage 中。 +让我们通过编写一个简单的工作示例来应用这些新发现的知识，让你了解如何使用网络存储。我们的示例将允许你输入一个名称，然后该页面将刷新，以提供个性化问候。这种状态也会页面/浏览器重新加载期间保持，因为这个名称存储在 Web 存储中。 -你可以在 [personal-greeting.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/client-side-storage/web-storage/personal-greeting.html) 中找到示例文件——这包含一个具有标题，内容和页脚，以及用于输入你的姓名的表单的简单网站。 +你可以在 [personal-greeting.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/client-side-storage/web-storage/personal-greeting.html) 中找到示例 HTML——这包含一个具有标题、内容和页脚，以及用于输入你的姓名的表单的简单网站。 -![](web-storage-demo.png) +![一张网站的截图，包含了页头、内容和页脚部分。页头的左侧有一段欢迎文本，右侧有一个标记为“忘记”的按钮。内容部分包括一个标题，接着是两段占位文本。页脚显示“版权归任何人所有。随意使用代码。”](web-storage-demo.png) 让我们来构建示例，以便了解它的工作原理。 1. 首先，在你的计算机上的新目录中创建一个 [personal-greeting.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/client-side-storage/web-storage/personal-greeting.html) 文件的副本。 -2. 接下来，请注意我们的 HTML 如何引用一个名为`index.js`的 JavaScript 文件（请参见第 40 行）。我们需要创建它并将 JavaScript 代码写入其中。在与 HTML 文件相同的目录中创建一个`index.js`文件。 -3. 我们首先创建对所有需要在此示例中操作的 HTML 功能的引用 - 我们将它们全部创建为常量，因为这些引用在应用程序的生命周期中不需要更改。将以下几行添加到你的 JavaScript 文件中： +2. 接下来，请注意我们的 HTML 如何引用一个名为 `index.js` 的 JavaScript 文件（就像 ``）。我们需要创建它并将 JavaScript 代码写入其中。在与 HTML 文件相同的目录中创建一个 `index.js` 文件。 +3. 我们首先创建对所有需要在此示例中操作的 HTML 特性的引用——我们将它们全部创建为常量，因为这些引用在应用程序的生命周期中不需要更改。将以下几行添加到你的 JavaScript 文件中： ```js // 创建所需的常量 @@ -171,85 +167,80 @@ web storage 的一个关键特性是，数据在不同页面加载时都存在 ```js // 当按钮按下时阻止表单提交 - form.addEventListener("submit", function (e) { - e.preventDefault(); - }); + form.addEventListener("submit", (e) => e.preventDefault()); ``` -5. 现在我们需要添加一个事件监听器，当单击“Say hello”按钮时，它的处理函数将会运行。这些注释详细解释了每一处都做了什么，但实际上我们在这里获取用户输入到文本输入框中的名字并使用`setItem()`将它保存在网络存储中，然后运行一个名为`nameDisplayCheck()`的函数来处理实际的网站文本的更新。将此添加到代码的底部： +5. 现在我们需要添加一个事件监听器，当单击“Say hello”按钮时，它的处理函数将会运行。这些注释详细解释了每一处都做了什么，但实际上我们在这里获取用户输入到文本输入框中的名字并使用 `setItem()` 将它保存在网络存储中，然后运行一个名为 `nameDisplayCheck()` 的函数来处理实际的网站文本的更新。将此添加到代码的底部： ```js - // run function when the 'Say hello' button is clicked - submitBtn.addEventListener("click", function () { - // store the entered name in web storage + // 当点击“Say hello”按钮时运行函数 + submitBtn.addEventListener("click", () => { + // 将输入的名字存储到网页存储中 localStorage.setItem("name", nameInput.value); - // run nameDisplayCheck() to sort out displaying the - // personalized greetings and updating the form display + // 运行 nameDisplayCheck() 来处理显示个性化问候语和更新表单显示 nameDisplayCheck(); }); ``` -6. 此时，我们还需要一个事件处理程序，以便在单击“Forget”按钮时运行一个函数——且仅在单击“Say hello”按钮（两种表单状态来回切换）后才显示。在这个功能中，我们使用`removeItem()`从网络存储中删除项目`name`，然后再次运行`nameDisplayCheck()`以更新显示。将其添加到底部： +6. 此时，我们还需要一个事件处理器，以便在单击“Forget”按钮时运行一个函数——且仅在单击“Say hello”按钮（两种表单状态来回切换）后才显示。在这个函数中，我们使用 `removeItem()` 从 Web 存储中删除项目 `name`，然后再次运行 `nameDisplayCheck()` 以更新显示。将其添加到底部： ```js - // run function when the 'Forget' button is clicked - forgetBtn.addEventListener("click", function () { - // Remove the stored name from web storage + // 当点击“Forget”按钮时运行函数 + forgetBtn.addEventListener("click", () => { + // 从网页存储中移除存储的名字 localStorage.removeItem("name"); - // run nameDisplayCheck() to sort out displaying the - // generic greeting again and updating the form display + // 运行 nameDisplayCheck() 来重新显示通用问候语并更新表单显示 nameDisplayCheck(); }); ``` -7. 现在是时候定义`nameDisplayCheck()`函数本身了。在这里，我们通过使用`localStorage.getItem('name')`作为测试条件来检查 name 数据项是否已经存储在 Web Storage 中。如果它已被存储，则该调用的返回值为`true`; 如果没有，它会是`false`。如果是`true`，我们会显示个性化问候语，显示表格的“forget”部分，并隐藏表格的“Say hello”部分。如果是`false`，我们会显示一个通用问候语，并做相反的事。再次将下面的代码添到底部： +7. 现在是时候定义 `nameDisplayCheck()` 函数本身了。在这里，我们通过使用 `localStorage.getItem('name')` 作为测试条件来检查 name 数据项是否已经存储在 Web 存储中。如果它已被存储，则该调用的返回值为 `true`；果没有，它会是 `false`。如果是 `true`，我们会显示个性化问候语，显示表格的“forget”部分，并隐藏表格的“Say hello”部分。如果是 `false`，我们会显示一个通用问候语，并做相反的事。再次将下面的代码添到底部： ```js - // define the nameDisplayCheck() function + // 定义 nameDisplayCheck() 函数 function nameDisplayCheck() { - // check whether the 'name' data item is stored in web Storage + // 检查 'name' 数据项是否存储在网页存储中 if (localStorage.getItem("name")) { - // If it is, display personalized greeting - let name = localStorage.getItem("name"); - h1.textContent = "Welcome, " + name; - personalGreeting.textContent = - "Welcome to our website, " + - name + - "! We hope you have fun while you are here."; - // hide the 'remember' part of the form and show the 'forget' part + // 如果存在，显示个性化问候语 + const name = localStorage.getItem("name"); + h1.textContent = `欢迎，${name}`; + personalGreeting.textContent = `欢迎来到我们的网站，${name}！希望您在这里玩得开心。`; + // 隐藏表单中的 'remember' 部分，显示 'forget' 部分 forgetDiv.style.display = "block"; rememberDiv.style.display = "none"; } else { - // if not, display generic greeting - h1.textContent = "Welcome to our website "; + // 如果不存在，显示通用问候语 + h1.textContent = "欢迎来到我们的网站"; personalGreeting.textContent = - "Welcome to our website. We hope you have fun while you are here."; - // hide the 'forget' part of the form and show the 'remember' part + "欢迎来到我们的网站。希望您在这里玩得开心。"; + // 隐藏表单中的 'forget' 部分，显示 'remember' 部分 forgetDiv.style.display = "none"; rememberDiv.style.display = "block"; } } ``` -8. 最后但同样重要的是，我们需要在每次加载页面时运行`nameDisplayCheck()`函数。如果我们不这样做，那么个性化问候不会在页面重新加载后保持。将以下代码添加到代码的底部： +8. 最后但同样重要的是，我们需要在每次加载页面时运行 `nameDisplayCheck()` 函数。如果我们不这样做，那么个性化问候不会在页面重新加载后保持。将以下代码添加到代码的底部： ```js - document.body.onload = nameDisplayCheck; + nameDisplayCheck(); ``` -你的例子完成了 - 做得好！现在剩下的就是保存你的代码并在浏览器中测试你的 HTML 页面。你可以在这里看到我们的[完成版本并在线运行](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/personal-greeting.html)。 +你的例子完成了——做得好！现在剩下的就是保存你的代码并在浏览器中测试你的 HTML 页面。你可以在这里看到我们的[完成版本并在线运行](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/personal-greeting.html)。 > [!NOTE] -> 在 [Using the Web Storage API](/zh-CN/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) 中还有一个稍微复杂点儿的示例。 +> 在[使用 Web 存储 API](/zh-CN/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) 中还有一个稍微复杂点儿的示例。 > [!NOTE] -> 在完成版本的源代码中， `` 一行里， `defer` 属性指明在页面加载完成之前，{{htmlelement("script")}}元素的内容不会执行。 +> 在完成版本的源代码中，`` 一行里，`defer` 属性指明在页面加载完成之前，{{htmlelement("script")}} 元素的内容不会执行。 -## 存储复杂数据 — IndexedDB +## 存储复杂数据——IndexedDB [IndexedDB API](/zh-CN/docs/Web/API/IndexedDB_API)（有时简称 IDB）是可以在浏览器中访问的一个完整的数据库系统，在这里，你可以存储复杂的关系数据。其种类不限于像字符串和数字这样的简单值。你可以在一个 IndexedDB 中存储视频，图像和许多其他的内容。 -但是，这确实是有代价的：使用 IndexedDB 要比 Web Storage API 复杂得多。在本节中，我们仅仅只能浅尝辄止地一提它的能力，不过我们会给你足够基础知识以帮助你开始。 +IndexedDB API 允许你创建一个数据库，然后在该数据库中创建对象存储。对象存储类似于关系型数据库中的表，每个对象存储可以包含多个对象。要了解有关 IndexedDB API 的更多信息，请参见[使用 IndexedDB](/zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB)。 + +但是，这确实是有代价的：使用 IndexedDB 要比 Web 存储 API 复杂得多。在本节中，我们仅仅只能浅尝辄止地一提它的能力，不过我们会给你足够基础知识以帮助你开始。 ### 通过一个笔记存储示例演示 @@ -257,17 +248,17 @@ web storage 的一个关键特性是，数据在不同页面加载时都存在 这个应用看起来像这样： -![](idb-demo.png) +![IndexDB 笔记演示的截图包含四个部分。第一部分是页头。第二部分列出了所有已创建的笔记，包括两条笔记，每条笔记都有一个删除按钮。第三部分是一个表单，包含两个输入字段用于“笔记标题”和“笔记内容”，以及一个标记为“创建新笔记”的按钮。底部部分的页脚显示“版权归任何人所有。随意使用代码。”](idb-demo.png) 每个笔记都有一个标题和一些正文，每个都可以单独编辑。我们将在下面通过的 JavaScript 代码提供详细的笔记，以帮助你了解正在发生的事情。 ### 开始 -1、首先，将 [`index.html`](https://github.com/mdn/learning-area/blob/main/javascript/apis/client-side-storage/indexeddb/notes/index.html), [`style.css`](https://github.com/mdn/learning-area/blob/main/javascript/apis/client-side-storage/indexeddb/notes/style.css), 和 [`index-start.js`](https://github.com/mdn/learning-area/blob/main/javascript/apis/client-side-storage/indexeddb/notes/index-start.js) 文件的本地副本放入本地计算机上的新目录中。 +1、首先，将 [`index.html`](https://github.com/mdn/learning-area/blob/main/javascript/apis/client-side-storage/indexeddb/notes/index.html)、[`style.css`](https://github.com/mdn/learning-area/blob/main/javascript/apis/client-side-storage/indexeddb/notes/style.css) 和 [`index-start.js`](https://github.com/mdn/learning-area/blob/main/javascript/apis/client-side-storage/indexeddb/notes/index-start.js) 文件的本地副本放入本地计算机上的新目录中。 -2、浏览这些文件。你将看到 HTML 非常简单：具有页眉和页脚的网站，以及包含显示笔记的位置的主内容区域，以及用于在数据库中输入新笔记的表单。CSS 提供了一些简单的样式，使其更清晰。JavaScript 文件包含五个声明的常量，其中包含对将显示笔记的 {{htmlelement("ul")}} 元素的引用，标题和正文 {{htmlelement("input")}} 元素，{{htmlelement("form")}} 本身，以及{{htmlelement("button")}}。 +2、浏览这些文件。你将看到 HTML 非常简单：具有页眉和页脚的网站，以及包含显示笔记的位置的主内容区域，以及用于在数据库中输入新笔记的表单。CSS 提供了一些简单的样式，使其更清晰。JavaScript 文件包含五个声明的常量，其中包含对将显示笔记的 {{htmlelement("ul")}} 元素的引用、标题和正文 {{htmlelement("input")}} 元素、{{htmlelement("form")}} 本身，以及 {{htmlelement("button")}}。 -3、将你的 JavaScript 文件重命名为 `index.js` 。你现在可以开始向其添加代码了。 +3、将你的 JavaScript 文件重命名为 `index.js`。你现在可以开始向其添加代码了。 ### 数据库初始设置 @@ -276,145 +267,136 @@ web storage 的一个关键特性是，数据在不同页面加载时都存在 1. 在常量声明下，加入这几行： ```js - // Create an instance of a db object for us to store the open database in + // 创建一个 db 对象的实例，用于存储打开的数据库 let db; ``` - 这里我们声明了一个叫 `db` 的变量 — 这将在之后被用来存储一个代表数据库的对象。我们将在几个地方使用它，所以我们为了方便使用而在这里把它声明为全局的。 + 这里我们声明了一个叫 `db` 的变量——这将在之后被用来存储一个代表数据库的对象。我们将在几个地方使用它，所以我们为了方便使用而在这里把它声明为全局的。 -2. 接着，在你的代码最后添加如下代码： +2. 接着，添加如下代码： ```js - window.onload = function () {}; + // 打开我们的数据库；如果数据库不存在，将会创建它 + // （请参见下面的 upgradeneeded 处理器） + const openRequest = window.indexedDB.open("notes_db", 1); ``` - 我们将把所有的后续代码写在这个 `window.onload` 事件处理函数内，这个函数将在 window 的 [`load`](/zh-CN/docs/Web/API/Window/load_event) 事件被触发时调用，为了确保我们没有在应用完整加载前试图使用 IndexedDB 功能（如果我们不这么做，它会失败）。 - -3. 在`window.onload`处理程序内，添加以下内容： - - ```js - // Open our database; it is created if it doesn't already exist - // (see onupgradeneeded below) - let request = window.indexedDB.open("notes", 1); - ``` + 这一行代码创建了一个请求，用于打开名为 `notes_db` 的版本 `1` 的数据库。如果该数据库尚不存在，它将由后续代码创建。你会在 IndexedDB 中经常看到这种请求模式。数据库操作需要时间。你不希望在等待结果时使浏览器卡死，因此数据库操作是{{Glossary("asynchronous", "异步")}}的，意味着操作不会立即发生，而是在未来的某个时间发生，并且你会在操作完成时收到通知。 - 此行创建一个 `request` 变量，目的是打开 `notes`数据库的 `1`版本。如果`notes`数据库不存在，则后续代码将为你创建。你将在 IndexedDB 中经常看到此请求模式。数据库操作需要时间。你不希望在等待结果时挂起浏览器，因此数据库操作是[异步的](/zh-CN/docs/Glossary/asynchronous)，这意味着它们不会立即发生，而是在将来的某个时刻发生，并且在完成后会收到通知。 - - 要在 IndexedDB 中处理此问题，你需要创建一个请求对象（可以随意命名 - 命名为`request`，可以表明它的用途）。然后，在请求完成或者失败时，使用事件处理程序来运行代码，你将在下面看到这些代码。 + 在 IndexedDB 中处理这一点的方法是创建一个请求对象（可以随意命名——我们在这里称之为 `openRequest`，这样它的用途就很明显）。然后，你可以使用事件处理器来运行代码，当请求完成、失败等时，你可以看到下面的用法。 > [!NOTE] - > 版本号很重要。如果要升级数据库（例如：更改表结构），则必须使用增加的版本号或者`onupgradeneeded`处理程序内指定的不同模式（请参阅下文）等再次运行代码。在这个简单教程中，我们不讨论数据库升级。 + > 版本号很重要。如果你想升级数据库（例如，通过更改表结构），你需要再次运行代码，增加版本号，并在 `upgradeneeded` 处理器中指定不同的模式等。我们在本教程中不会涉及数据库的升级。 - 1. 在之前添加的事件处理程序下方添加以下代码 - 在`window.onload`处理程序内： +3. 现在，在你之前添加的代码下面添加以下事件处理器： - ```js - // onerror handler signifies that the database didn't open successfully - request.onerror = function () { - console.log("Database failed to open"); - }; + ```js + // 错误处理器表示数据库未成功打开 + openRequest.addEventListener("error", () => console.error("数据库打开失败")); - // onsuccess handler signifies that the database opened successfully - request.onsuccess = function () { - console.log("Database opened successfully"); + // 成功处理器表示数据库成功打开 + openRequest.addEventListener("success", () => { + console.log("数据库成功打开"); - // Store the opened database object in the db variable. This is used a lot below - db = request.result; + // 将打开的数据库对象存储在 db 变量中。下面会多次使用 + db = openRequest.result; - // Run the displayData() function to display the notes already in the IDB - displayData(); - }; - ``` + // 运行 displayData() 函数以显示已存在于 IDB 中的笔记 + displayData(); + }); + ``` - 如果系统返回：请求失败，[`request.onerror`](/zh-CN/docs/Web/API/IDBRequest/onerror)将会运行。这将允许你对这个问题做出响应。在我们的简单示例中，只是将消息打印到 JavaScript 控制台。 + {{domxref("IDBRequest/error_event", "error")}} 事件处理器会在系统返回请求失败的消息时运行。这允许你对这个问题做出响应。在我们的示例中，我们只是将一条消息打印到 JavaScript 控制台。 - 如果系统返回：请求成功，表明成功打开数据库，[`request.onsuccess`](/zh-CN/docs/Web/API/IDBRequest/onsuccess)将会运行。如果是这种情况，则表示已打开数据库的对象在[`request.result`](/zh-CN/docs/Web/API/IDBRequest/result)属性中变为可用，从而允许我们操作数据库。我们将它存储在`db`我们之前创建的变量中供以后使用。我们还运行了一个名为 `displayData()` 的函数，它在 {{HTMLElement("ul")}} 内显示数据库中的数据。我们现在运行它，以便在页面加载时立即显示已经在数据库中的笔记。你将在后面看到 `displayData()` 的定义。 + {{domxref("IDBRequest/success_event", "success")}} 事件处理器会在请求成功返回时运行，意味着数据库已成功打开。如果是这种情况，表示打开的数据库的对象会在 {{domxref("IDBRequest.result", "openRequest.result")}} 属性中提供，允许我们操作数据库。我们将其存储在之前创建的 `db` 变量中以供后续使用。我们还会运行一个名为 `displayData()` 的函数，用于在 HTML 中的 `ul` 元素内显示数据库中的数据。我们现在运行它，以便在页面加载时立即显示数据库中已经存在的笔记。你会在稍后看到 `displayData()` 的定义。 -4. 最后，对于本节，我们可能会添加最重要的事件处理程序来设置数据库：[`request.onupgradeneeded`](/zh-CN/docs/Web/API/IDBOpenDBRequest/onupgradeneeded)。如果尚未设置数据库，或者使用比现有存储数据库更大的版本号打开数据库（执行升级时），则运行此处理程序。在上一个处理程序下面添加以下代码： +4. 最后，为了完成这一部分，我们将添加可能是设置数据库时最重要的事件处理器：{{domxref("IDBOpenDBRequest/upgradeneeded_event", "upgradeneeded")}}。如果数据库尚未设置，或数据库以比现有存储的数据库更大的版本号打开（进行升级时），该处理器会运行。在你之前的处理器下面添加以下代码： ```js - // Setup the database tables if this has not already been done - request.onupgradeneeded = function (e) { - // Grab a reference to the opened database - let db = e.target.result; - - // Create an objectStore to store our notes in (basically like a single table) - // including a auto-incrementing key - let objectStore = db.createObjectStore("notes", { + // 如果尚未设置数据库表，则进行设置 + openRequest.addEventListener("upgradeneeded", (e) => { + // 获取已打开的数据库的引用 + db = e.target.result; + + // 在我们的数据库中创建一个用于存储笔记和自增键的 objectStore + // objectStore 类似于关系数据库中的“表” + const objectStore = db.createObjectStore("notes_os", { keyPath: "id", autoIncrement: true, }); - // Define what data items the objectStore will contain + // 定义 objectStore 将包含的数据项 objectStore.createIndex("title", "title", { unique: false }); objectStore.createIndex("body", "body", { unique: false }); - console.log("Database setup complete"); - }; + console.log("数据库设置完成"); + }); ``` - 这是我们定义数据库的模式（结构）的地方; 也就是说，它包含的列（或字段）集。这里我们首先从`e.target.result`（事件目标的`result`属性）中获取对现有数据库的引用，该引用是`request`对象。这相当于处理程序`db = request.result;`内部的行`onsuccess`，但我们需要在此单独执行此操作，因为`onupgradeneeded`处理程序（如果需要）将在`onsuccess`处理程序之前运行，这意味着`db`如果我们不这样做，该值将不可用。 + 在这里我们定义了数据库的模式（结构）；即它包含的列（或字段）集合。首先，我们从事件的目标 (`e.target.result`) 的 `result` 属性中获取现有数据库的引用，这就是 `request` 对象。这等同于在`成功`事件处理器中的 `db = openRequest.result;`，但我们需要在这里单独进行，因为 `upgradeneeded` 事件处理器（如果需要的话）会在`成功`事件处理器之前运行，这意味着如果我们不这样做，`db` 值将不可用。 - 然后，我们使用 [`IDBDatabase.createObjectStore()`](/zh-CN/docs/Web/API/IDBDatabase/createObjectStore) 在打开的数据库中创建一个新的对象库。这相当于传统数据库系统中的单个表。我们将其命名为 notes，并且还指定了一个名为 `id` 的 `autoIncrement` 关键字段——在每个新记录中，这将自动赋予增量值——开发人员不需要明确地设置它。作为密钥，`id` 字段将用于唯一标识记录，例如删除或显示记录时。 + 然后，我们使用 {{domxref("IDBDatabase.createObjectStore()")}} 在打开的数据库中创建一个名为 `notes_os` 的新 objectStore。这相当于传统数据库系统中的一个表。我们给它指定了名称 `notes`，并指定了一个 `autoIncrement` 键字段 `id`——在每条新记录中，这个字段会自动分配递增的值——开发者不需要显式设置它。作为键，`id` 字段将用于唯一标识记录，例如在删除或显示记录时。 - 我们还使用以下[`IDBObjectStore.createIndex()`](/zh-CN/docs/Web/API/IDBObjectStore/createIndex)方法创建另外两个索引（字段）:( `title`每个音符将包含一个标题），以及`body`（包含音符的正文）。 + 我们还使用 {{domxref("IDBObjectStore.createIndex()")}} 方法创建了两个其他索引（字段）：`title`（包含每条笔记的标题）和 `body`（包含笔记的正文内容）。 -因此，通过设置这个简单的数据库模式，当我们开始向数据库添加记录时，每个记录都会沿着这些行表示为一个对象： + 设置好这个数据库模式后，当我们开始向数据库中添加记录时，每条记录将表示为类似于以下格式的对象： -```js -{ - title: "Buy milk", - body: "Need both cows milk and soya.", - id: 8 -} -``` + ```json + { + "title": "Buy milk", + "body": "Need both cows milk and soy.", + "id": 8 + } + ``` ### 添加数据到数据库 现在让我们看一下如何将记录添加到数据库中。这将使用我们页面上的表单完成。 -在你之前的事件处理程序下面，添加以下一行，它设置了一个 `submit` 事件处理程序，当表单被提交时（当提交 {{htmlelement("button")}} 元素被按下导致表单成功提交），运行一个叫做 `addData()` 的函数： +在你之前的事件处理器下面，添加以下一行，它设置了一个 `submit` 事件处理器，当表单被提交时（当提交 {{htmlelement("button")}} 元素被按下导致表单成功提交），运行一个叫做 `addData()` 的函数： ```js -// Create an onsubmit handler so that when the form is submitted the addData() function is run -form.onsubmit = addData; +// 创建一个提交事件处理器，当表单提交时运行 addData() 函数 +form.addEventListener("submit", addData); ``` -现在让我们定义一下这个`addData()`功能。在上一行下面添加： +现在让我们定义 `addData()` 函数。在你之前的代码下面添加以下内容： ```js -// Define the addData() function +// 定义 addData() 函数 function addData(e) { - // prevent default - we don't want the form to submit in the conventional way + // 阻止默认行为——我们不希望表单以传统方式提交 e.preventDefault(); - // grab the values entered into the form fields and store them in an object ready for being inserted into the DB - let newItem = { title: titleInput.value, body: bodyInput.value }; + // 获取输入字段中输入的值，并将它们存储在一个对象中，准备插入到数据库中 + const newItem = { title: titleInput.value, body: bodyInput.value }; + + // 打开一个读/写事务，准备添加数据 + const transaction = db.transaction(["notes_os"], "readwrite"); - // open a read/write db transaction, ready for adding the data - let transaction = db.transaction(["notes"], "readwrite"); + // 调用已添加到数据库中的 objectStore + const objectStore = transaction.objectStore("notes_os"); - // call an object store that's already been added to the database - let objectStore = transaction.objectStore("notes"); + // 发起请求，将我们的 newItem 对象添加到 objectStore 中 + const addRequest = objectStore.add(newItem); - // Make a request to add our newItem object to the object store - var request = objectStore.add(newItem); - request.onsuccess = function () { - // Clear the form, ready for adding the next entry + addRequest.addEventListener("success", () => { + // 清空表单，为添加下一个条目做好准备 titleInput.value = ""; bodyInput.value = ""; - }; + }); - // Report on the success of the transaction completing, when everything is done - transaction.oncomplete = function () { - console.log("Transaction completed: database modification finished."); + // 在事务完成时报告成功，当所有操作完成后 + transaction.addEventListener("complete", () => { + console.log("事务完成：数据库修改结束。"); - // update the display of data to show the newly added item, by running displayData() again. + // 通过再次运行 displayData() 来更新数据的显示，以显示新添加的条目 displayData(); - }; + }); - transaction.onerror = function () { - console.log("Transaction not opened due to error"); - }; + transaction.addEventListener("error", () => + console.log("事务未成功打开，出现错误"), + ); } ``` @@ -425,119 +407,116 @@ function addData(e) { - 使用 {{domxref("IDBDatabase.transaction()")}} 方法打开 `notes` 对象存储的 `readwrite` 事务。此事务对象允许我们访问对象存储，以便我们可以对其执行某些操作，例如添加新记录。 - 使用 {{domxref("IDBTransaction.objectStore()")}} 方法访问对象库，将结果保存在 `objectStore` 变量中。 - 使用 {{domxref("IDBObjectStore.add()")}} 添加新记录到数据库。这创建了一个请求对象，与我们之前看到的方式相同。 -- 在生命周期的关键点为 `request` 以及 `transaction` 对象添加事件处理程序以运行代码。请求成功后，我们会清除表单输入，以便输入下一个笔记。交易完成后，我们再次运行 `displayData()` 函数以更新页面上的笔记显示。 +- 在生命周期的关键点为 `request` 以及 `transaction` 对象添加事件处理器以运行代码。请求成功后，我们会清除表单输入，以便输入下一个笔记。交易完成后，我们再次运行 `displayData()` 函数以更新页面上的笔记显示。 ### 显示数据 我们已经在代码中引用了 `displayData()` 两次，所以我们可能更好地定义它。将其添加到你的代码中，位于上一个函数定义之下： ```js -// Define the displayData() function +// 定义 displayData() 函数 function displayData() { - // Here we empty the contents of the list element each time the display is updated - // If you ddn't do this, you'd get duplicates listed each time a new note is added + // 每次更新显示时，我们都清空列表元素的内容 + // 如果不这样做，每次添加新笔记时列表中会出现重复项 while (list.firstChild) { list.removeChild(list.firstChild); } - // Open our object store and then get a cursor - which iterates through all the - // different data items in the store - let objectStore = db.transaction("notes").objectStore("notes"); - objectStore.openCursor().onsuccess = function (e) { - // Get a reference to the cursor - let cursor = e.target.result; + // 打开我们的对象存储，然后获取游标——它会迭代存储中的所有数据项 + const objectStore = db.transaction("notes_os").objectStore("notes_os"); + objectStore.openCursor().addEventListener("success", (e) => { + // 获取游标的引用 + const cursor = e.target.result; - // If there is still another data item to iterate through, keep running this code + // 如果还有数据项需要迭代，则继续运行此代码 if (cursor) { - // Create a list item, h3, and p to put each data item inside when displaying it - // structure the HTML fragment, and append it inside the list - let listItem = document.createElement("li"); - let h3 = document.createElement("h3"); - let para = document.createElement("p"); + // 创建一个列表项、h3 和 p 元素，用于在显示数据项时放置它们 + // 构建 HTML 片段，并将其附加到列表中 + const listItem = document.createElement("li"); + const h3 = document.createElement("h3"); + const para = document.createElement("p"); listItem.appendChild(h3); listItem.appendChild(para); list.appendChild(listItem); - // Put the data from the cursor inside the h3 and para + // 将游标中的数据放入 h3 和 para 中 h3.textContent = cursor.value.title; para.textContent = cursor.value.body; - // Store the ID of the data item inside an attribute on the listItem, so we know - // which item it corresponds to. This will be useful later when we want to delete items + // 将数据项的 ID 存储在 listItem 的一个属性中，以便我们知道 + // 这项数据对应哪个条目。这在稍后删除条目时会很有用 listItem.setAttribute("data-note-id", cursor.value.id); - // Create a button and place it inside each listItem - let deleteBtn = document.createElement("button"); + // 创建一个按钮，并将其放置在每个 listItem 中 + const deleteBtn = document.createElement("button"); listItem.appendChild(deleteBtn); - deleteBtn.textContent = "Delete"; + deleteBtn.textContent = "删除"; - // Set an event handler so that when the button is clicked, the deleteItem() - // function is run - deleteBtn.onclick = deleteItem; + // 设置事件处理器，当按钮被点击时，运行 deleteItem() 函数 + deleteBtn.addEventListener("click", deleteItem); - // Iterate to the next item in the cursor + // 迭代到游标中的下一个项 cursor.continue(); } else { - // Again, if list item is empty, display a 'No notes stored' message + // 如果列表为空，则显示“没有存储的笔记”消息 if (!list.firstChild) { - let listItem = document.createElement("li"); - listItem.textContent = "No notes stored."; + const listItem = document.createElement("li"); + listItem.textContent = "没有存储的笔记。"; list.appendChild(listItem); } - // if there are no more cursor items to iterate through, say so - console.log("Notes all displayed"); + // 如果没有更多的游标项需要迭代，说明所有笔记都已显示 + console.log("所有笔记已显示"); } - }; + }); } ``` 再次，让我们打破这个： - 首先，我们清空 [`
    `](/zh-CN/docs/Web/HTML/Element/ul) 元素的内容，然后填充更新的内容。如果你不这样做，那么每次更新时都会添加大量重复内容。 -- 接下来，我们`notes`使用[`IDBDatabase.transaction()`](/zh-CN/docs/Web/API/IDBDatabase/transaction)和[`IDBTransaction.objectStore()`](/zh-CN/docs/Web/API/IDBTransaction/objectStore)我们一样得到对象存储的引用`addData()`，除了这里我们将它们链接在一行中。 -- 下一步是使用[`IDBObjectStore.openCursor()`](/zh-CN/docs/Web/API/IDBObjectStore/openCursor)方法打开对游标的请求 - 这是一个可用于迭代对象存储中的记录的构造。我们将一个`onsuccess`处理程序链接到该行的末尾以使代码更简洁 - 当成功返回游标时，运行处理程序。 -- 我们[`IDBCursor`](/zh-CN/docs/Web/API/IDBCursor)使用 let 获取对游标本身（对象）的引用`cursor = e.target.result`。 -- 接下来，我们检查光标是否包含来自数据存储区（`if(cursor){ ... }`）的记录——如果包含，我们创建一个 DOM 片段，用记录中的数据填充它，然后将其插入页面（`
      `元素内部）。我们还包括一个删除按钮，当单击该按钮时，将通过运行 `deleteItem()` 函数删除该笔记（我们将在下一节中查看）。 -- 在`if`块结束时，我们使用该[`IDBCursor.continue()`](/zh-CN/docs/Web/API/IDBCursor/continue)方法将光标前进到数据存储区中的下一条记录，然后`if`再次运行块的内容。如果有另一个要迭代的记录，这会导致它被插入到页面中，然后`continue()`再次运行，依此类推。 -- 当没有更多记录要迭代时，`cursor` 将返回 `undefined`，因此 `else` 块将运行（而不是 `if` 块）。此块检查是否有任何笔记被插入`
        `——如果没有，它会插入一条消息，说没有存储的笔记。 +- 接下来，我们 `notes` 使用 [`IDBDatabase.transaction()`](/zh-CN/docs/Web/API/IDBDatabase/transaction) 和 [`IDBTransaction.objectStore()`](/zh-CN/docs/Web/API/IDBTransaction/objectStore) 我们一样得到对象存储的引用 `addData()`，除了这里我们将它们链接在一行中。 +- 下一步是使用 [`IDBObjectStore.openCursor()`](/zh-CN/docs/Web/API/IDBObjectStore/openCursor) 方法打开对游标的请求——这是一个可用于迭代对象存储中的记录的构造。我们将一个 `onsuccess` 处理器链接到该行的末尾以使代码更简洁——当成功返回游标时，运行处理器。 +- 我们 [`IDBCursor`](/zh-CN/docs/Web/API/IDBCursor) 使用 let 获取对游标本身（对象）的引用 `cursor = e.target.result`。 +- 接下来，我们检查光标是否包含来自数据存储区（`if(cursor){ ... }`）的记录——如果包含，我们创建一个 DOM 片段，用记录中的数据填充它，然后将其插入页面（`
          ` 元素内部）。我们还包括一个删除按钮，当单击该按钮时，将通过运行 `deleteItem()` 函数删除该笔记（我们将在下一节中查看）。 +- 在 `if` 块结束时，我们使用该 [`IDBCursor.continue()`](/zh-CN/docs/Web/API/IDBCursor/continue) 方法将光标前进到数据存储区中的下一条记录，然后`if`再次运行块的内容。如果有另一个要迭代的记录，这会导致它被插入到页面中，然后 `continue()` 再次运行，依此类推。 +- 当没有更多记录要迭代时，`cursor` 将返回 `undefined`，因此 `else` 块将运行（而不是 `if` 块）。此块检查是否有任何笔记被插入 `
            `——如果没有，它会插入一条消息，说没有存储的笔记。 ### 删除一条笔记 -如上所述，当按下笔记的删除按钮时，笔记将被删除。这是通过`deleteItem()`函数实现的，如下所示： +如上所述，当按下笔记的删除按钮时，笔记将被删除。这是通过 `deleteItem()` 函数实现的，如下所示： ```js -// Define the deleteItem() function +// 定义 deleteItem() 函数 function deleteItem(e) { - // retrieve the name of the task we want to delete. We need - // to convert it to a number before trying it use it with IDB; IDB key - // values are type-sensitive. - let noteId = Number(e.target.parentNode.getAttribute("data-note-id")); - - // open a database transaction and delete the task, finding it using the id we retrieved above - let transaction = db.transaction(["notes"], "readwrite"); - let objectStore = transaction.objectStore("notes"); - let request = objectStore.delete(noteId); - - // report that the data item has been deleted - transaction.oncomplete = function () { - // delete the parent of the button - // which is the list item, so it is no longer displayed + // 获取要删除的任务的 ID。我们需要将其转换为数字，因为在 IDB 中使用时 + // IDB 键值对对类型敏感。 + const noteId = Number(e.target.parentNode.getAttribute("data-note-id")); + + // 打开一个数据库事务并删除任务，使用我们上面检索到的 ID 查找它 + const transaction = db.transaction(["notes_os"], "readwrite"); + const objectStore = transaction.objectStore("notes_os"); + const deleteRequest = objectStore.delete(noteId); + + // 报告数据项已被删除 + transaction.addEventListener("complete", () => { + // 删除按钮的父元素 + // 也就是列表项，使其不再显示 e.target.parentNode.parentNode.removeChild(e.target.parentNode); - console.log("Note " + noteId + " deleted."); + console.log(`笔记 ${noteId} 已删除。`); - // Again, if list item is empty, display a 'No notes stored' message + // 如果列表为空，则显示“没有存储的笔记”消息 if (!list.firstChild) { - let listItem = document.createElement("li"); - listItem.textContent = "No notes stored."; + const listItem = document.createElement("li"); + listItem.textContent = "没有存储的笔记。"; list.appendChild(listItem); } - }; + }); } ``` -- 第一部分可以使用一些解释 - 我们检索要删除`Number(e.target.parentNode.getAttribute('data-note-id'))`的记录的 ID - 回想一下记录的 ID 是在第一次显示时保存在`data-note-id`属性中的`
          • `。但是，我们需要通过全局内置的[Number（）](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number)对象传递属性，因为它当前是一个字符串，否则将无法被数据库识别。 -- 然后，我们使用我们之前看到的相同模式获取对对象存储的引用，并使用该[`IDBObjectStore.delete()`](/zh-CN/docs/Web/API/IDBObjectStore/delete)方法从数据库中删除记录，并将 ID 传递给它。 +- 第一部分可以使用一些解释——我们检索要删除 `Number(e.target.parentNode.getAttribute('data-note-id'))` 的记录的 ID——回想一下记录的 ID 是在第一次显示时保存在 `data-note-id` 属性中的 `
          • `。但是，我们需要通过全局内置的 [`Number()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number) 对象传递属性，因为它当前是一个字符串，否则将无法被数据库识别。 +- 然后，我们使用我们之前看到的相同模式获取对对象存储的引用，并使用该 [`IDBObjectStore.delete()`](/zh-CN/docs/Web/API/IDBObjectStore/delete) 方法从数据库中删除记录，并将 ID 传递给它。 - 当数据库事务完成后，我们从 DOM 中删除笔记的 `
          • `，然后再次检查以查看 `
              ` 是否为空，并根据需要插入笔记。 就是这样了！你的例子现在应该有效。 @@ -548,11 +527,11 @@ function deleteItem(e) { 如上所述，IndexedDB 可用于存储不仅仅是简单的文本字符串。你可以存储任何你想要的东西，包括复杂的对象，如视频或图像 blob。并且它比任何其他类型的数据更难实现。 -为了演示如何操作，我们编写了另一个名为[IndexedDB 视频存储的](https://github.com/mdn/learning-area/tree/main/javascript/apis/client-side-storage/indexeddb/video-store)示例（请参阅[此处也可以在此处运行](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/video-store/)）。首次运行示例时，它会从网络下载所有视频，将它们存储在 IndexedDB 数据库中，然后在 UI 内部 [`
Prerequisites:前提： - JavaScript 基础 (查看 - 第一步, - 构建的块, - JavaScript 对象), - 第一步、构建代码块、JavaScript 对象）、基础的客户端 API
Objective:目标： 学习如何使用客户端存储 API 来存储应用数据。
@@ -18,13 +20,13 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environm >和自动化测试的理解。 + >有基本理解。 @@ -32,37 +34,37 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environm ## Selenium -[Selenium](https://www.selenium.dev/) 是最流行的浏览器自动化测试工具。最易使用的方法是使用基于 Selenium 的 WebDriver API，它通过调用浏览器接口实现自动化，执行诸如“打开网页”、“移动网页上的元素”、“点击链接”、“查看链接是否打开 URL”等。对于运行自动化测试来说是一个十分理想的方法。 +[Selenium](https://www.selenium.dev/) 是最流行的浏览器自动化测试工具。使用 Selenium 有很多种方式，但最佳方式是通过其强大的 WebDriver API，它建立在 Selenium 的基础上，通过调用浏览器接口实现自动化，执行诸如“打开网页”、“移动网页上的元素”、“点击链接”、“查看链接是否打开 URL”等操作。这是运行自动化测试的理想选择。 -安装和使用 WebDriver 的方式取决于你的编程环境。常见的环境都提供有安装 WebDriver 的包或框架，并且支持与 WebDriver 通信的多语言绑定，如 Java、C#、Ruby、Python、JavaScript（Node）等。查看[建立一个 Selenium-WebDriver 的工程](https://www.selenium.dev/zh-cn/documentation/webdriver/getting_started/)来了解 Selenium 在不同语言下建立的更多细节。 +安装和使用 WebDriver 的方式取决于你的编程环境。常见的环境都提供安装 WebDriver 的包或框架，并且支持与 WebDriver 通信的多语言绑定，如 Java、C#、Ruby、Python、JavaScript（Node）等。查看[建立一个 Selenium-WebDriver 的工程](https://www.selenium.dev/zh-cn/documentation/webdriver/getting_started/)以了解 Selenium 在不同语言下的具体配置。 -不同的浏览器需要使用不同的驱动，来使 WebDriver 能够与浏览器交互并控制浏览器。查看[支持 Selenium 的平台](https://www.selenium.dev/downloads/)来了解获取浏览器驱动的信息。 +不同的浏览器需要使用不同的驱动程序，使 WebDriver 能够与浏览器交互并控制它们。查看[支持 Selenium 的平台](https://www.selenium.dev/downloads/)以获取浏览器驱动程序的信息。 -我们将使用 Node.js 来编写和运行 Selenium 测试用例。Node.js 是一个前端开发者都很熟悉，并且容易上手的开发环境。 +我们将使用 Node.js 来编写和运行 Selenium 测试用例。Node.js 是一个前端开发者熟悉且易于上手的开发环境。 > [!NOTE] > 如果你需要了解在其他服务器端环境下使用 WebDriver 的方式，也可以点击[支持 Selenium 的平台](https://www.selenium.dev/downloads/)来获取更多有用的链接。 -### 在 Node 下建立 Selenium +### 在 Node 下搭建 Selenium 环境 -1. 参考上一个章节[创建 Node 和 npm](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#Setting_up_Node_and_npm) 创建一个新的 npm 工程，取一个不同的名字，如 `selenium-test`。 -2. 接下来，我们需要安装一个框架来允许我们从 Node 中运行 Selenium。我们选择 selenium 官方提供的 [selenium-webdriver](https://www.npmjs.com/package/selenium-webdriver)，它的文档更新得很好，维护得也很好。如果你想要其他的选择，[webdriver.io](http://webdriver.io/) 和 [nightwatch.js](http://nightwatchjs.org/) 也都不错。要安装 selenium-webdriver，在你的工程目录下运行如下命令： +1. 参考上一个章节[配置 Node 和 npm 环境](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#配置_Node_和_npm_环境)，创建一个新的 npm 工程，并取一个不同的名字，如 `selenium-test`。 +2. 接下来，我们需要安装一个框架从而能够在 Node 中运行 Selenium。我们选择 Selenium 官方提供的 [selenium-webdriver](https://www.npmjs.com/package/selenium-webdriver)，它的文档更新及时，维护良好。如果你想要其他选择，[webdriver.io](https://webdriver.io/) 和 [nightwatch.js](https://nightwatchjs.org/) 也都是不错的选择。要安装 selenium-webdriver，在你的工程目录下运行以下命令： ```bash npm install selenium-webdriver ``` > [!NOTE] -> 即使你已经安装过 selenium-webdriver 并下载了浏览器驱动，我们仍然建议你按照步骤再来一遍，确保所有东西都是最新的。 +> 即使你已经安装过 selenium-webdriver 并下载了浏览器驱动，我们仍然建议你按照步骤再来一遍，以确保所有内容都是最新的。 -接下来，你需要下载相应的驱动，使 WebDriver 能控制你需要测试的浏览器。在 [selenium-webdriver](https://www.npmjs.com/package/selenium-webdriver)（第一部分的表格）页面查看如何下载。显然，有些浏览器是操作系统特定的，我们将坚持使用 Firefox 和 Chrome，因为它们可以在所有主要的操作系统上使用。 +接下来，你需要下载相应的驱动，使 WebDriver 能控制你需要测试的浏览器。在 [selenium-webdriver](https://www.npmjs.com/package/selenium-webdriver) 页面（参见第一部分的表格）查看如何下载。显然，有些浏览器是操作系统特定的，我们将坚持使用 Firefox 和 Chrome，因为它们可以在所有主要的操作系统上使用。 -1. 下载最新版本的 [GeckoDriver](https://github.com/mozilla/geckodriver/releases/)（为 Firefox 使用）和 [ChromeDriver](http://chromedriver.storage.googleapis.com/index.html) 驱动。 -2. 将它们解压到相当容易浏览的地方，比如你的主用户目录的根部。 -3. 把 `chromedriver` 和 `geckodriver` 驱动的目录添加到你的系统 `PATH` 变量，这应该是从你的硬盘根目录开始的一个绝对路径。举个例子，如果我们使用的是一个 macOS 机器，用户名为 bob, 我们把驱动放到了用户的根目录下，那这个路径就是 `/Users/bob`。 +1. 下载最新版本的 [GeckoDriver](https://github.com/mozilla/geckodriver/releases/)（用于 Firefox）和 [ChromeDriver](https://developer.chrome.com/docs/chromedriver/downloads?hl=zh-cn) 驱动。 +2. 将它们解压到一个容易访问的地方，比如你的主用户目录的根目录。 +3. 将 `chromedriver` 和 `geckodriver` 驱动的目录添加到你的系统 `PATH` 变量中，这应该是从你的硬盘根目录开始的一个绝对路径。举个例子，如果我们使用的是 macOS 机器，用户名为 bob，并且将驱动放在用户的根目录下，那么路径就是 `/Users/bob`。 > [!NOTE] -> 重申一下，添加到 `PATH` 的路径是到包含驱动的那一级目录，而不是驱动目录自身！这是一个常犯的错误。 +> 重申一下，添加到 `PATH` 的路径是到包含驱动的目录，而不是驱动自身！这是一个常见的错误。 在 macOS 或大多数 Linux 系统中设置 `PATH` 变量的操作如下： @@ -81,8 +83,8 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environm export PATH=$PATH:/Users/bob ``` -4. 保存并关闭文件，然后重启命令终端以生效 Bash 的配置。 -5. 在命令终端上敲下面命令，查看新的路径是否已经添加到 `PATH` 变量中： +4. 保存并关闭文件，然后重启命令终端以使 Bash 的配置生效。 +5. 在命令终端上输入以下命令，查看新的路径是否已经添加到 `PATH` 变量中： ```bash echo $PATH @@ -95,139 +97,121 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environm OK，现在我们来做一个快速的测试来验证一下一切是否正常。 1. 在你的工程目录下创建一个新的文件 `google_test.js`： -2. 将下面代码复制到文件中保存： +2. 将以下内容复制到上述文件中，然后保存： ```js - const webdriver = require("selenium-webdriver"); - const By = webdriver.By; - const until = webdriver.until; - - const driver = new webdriver.Builder().forBrowser("firefox").build(); - - driver.get("http://www.google.com"); - - driver.findElement(By.name("q")).sendKeys("webdriver"); - - driver.sleep(1000).then(() => { - driver.findElement(By.name("q")).sendKeys(webdriver.Key.TAB); - }); - - driver.findElement(By.name("btnK")).click(); - - driver.sleep(2000).then(() => { - driver.getTitle().then((title) => { - if (title === "webdriver - Google Search") { - console.log("Test passed"); - } else { - console.log("Test failed"); - } - driver.quit(); - }); - }); + const { Builder, Browser, By, Key, until } = require("selenium-webdriver"); + + (async function example() { + const driver = await new Builder().forBrowser(Browser.FIREFOX).build(); + try { + await driver.get("https://www.google.com/ncr"); + await driver.findElement(By.name("q")).sendKeys("webdriver", Key.RETURN); + await driver.wait(until.titleIs("webdriver - Google Search"), 1000); + } finally { + await driver.sleep(2000); // 延迟足够长的时间以看到搜索页面！ + await driver.quit(); + } + })(); ``` -3. 在终端上，确保在你的工程目录下输入如下命令： + > [!NOTE] + > 此函数是一个 {{glossary("IIFE")}}（立即调用函数表达式）。 + +3. 在终端上，确保在你的项目目录下输入如下命令： ```bash node google_test ``` -你会看到 Firefox 自动打开了一个窗口！Google 自动加载到标签页中，“webdriver”被输入到搜索框，然后搜索按钮被点击。然后，WebDriver 等待 2 秒，然后获取文本标题，如果标题是“webdriver - Google Search”, 将返回测试成功的消息。然后 WebDriver 关闭 Firefox 窗口并结束。 +你会看到 Firefox 自动打开一个窗口！Google 会自动加载到标签页中，并在搜索框中输入“webdriver”，然后点击搜索按钮。接着，WebDriver 会等待 1 秒钟，然后获取页面标题。如果标题是“webdriver - Google Search”，我们将返回一条消息，表示测试通过。然后我们再等待四秒钟，之后 WebDriver 会关闭 Firefox 窗口并停止。 ## 一次测试多个浏览器 -接下来，让我们来试一下同时在多个浏览器上进行测试。这也是你经常碰到的情况！ +接下来，让我们来试一下同时在多个浏览器上进行测试。 -1. 在你的工程目录下创建另外一个新文件 `google_test_multiple.js`。你可以根据实际需要测试的浏览器情况，对我们添加的浏览器进行修改或删除等操作。但确保系统安装了正确的浏览器驱动。关于如何填写 `.forBrowser()` 方法中对浏览器描述的字符串，请参考 [Browser enum](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_Browser.html)。 +1. 在你的工程目录下创建另外一个新文件 `google_test_multiple.js`。你可以根据实际需要测试的浏览器情况，对我们添加的浏览器进行修改或删除等操作。但确保系统安装了正确的浏览器驱动。关于如何填写 `.forBrowser()` 方法中对浏览器描述的字符串，请参考 [Browser 枚举值](https://www.selenium.dev/selenium/docs/api/javascript/global.html#Browser)页面。 2. 将下面代码复制到文件中保存： ```js - const webdriver = require("selenium-webdriver"); - const By = webdriver.By; - const until = webdriver.until; - - let driver_fx = new webdriver.Builder().forBrowser("firefox").build(); - - let driver_chr = new webdriver.Builder().forBrowser("chrome").build(); + const { Builder, Browser, By, Key } = require("selenium-webdriver"); + + const driver_fx = new Builder().forBrowser(Browser.FIREFOX).build(); + + const driver_chr = new Builder().forBrowser(Browser.CHROME).build(); + + async function searchTest(driver) { + try { + await driver.get("http://www.google.com"); + await driver.findElement(By.name("q")).sendKeys("webdriver", Key.RETURN); + await driver.sleep(2000).then(async () => { + await driver.getTitle().then(async (title) => { + if (title === "webdriver - Google Search") { + console.log("Test passed"); + } else { + console.log("Test failed"); + } + }); + }); + } finally { + driver.quit(); + } + } searchTest(driver_fx); searchTest(driver_chr); - - function searchTest(driver) { - driver.get("http://www.google.com"); - driver.findElement(By.name("q")).sendKeys("webdriver"); - - driver.sleep(1000).then(() => { - driver.findElement(By.name("q")).sendKeys(webdriver.Key.TAB); - }); - - driver.findElement(By.name("btnK")).click(); - - driver.sleep(2000).then(() => { - driver.getTitle().then((title) => { - if (title === "webdriver - Google Search") { - console.log("Test passed"); - } else { - console.log("Test failed"); - } - driver.quit(); - }); - }); - } ``` -3. 在终端上，确保在你的工程目录下输入如下命令： +3. 在终端上，确保在你的项目目录下输入如下命令： ```bash node google_test_multiple ``` -4. 如果你用的是 Mac，并决定测试 Safari 浏览器，可能会产生一个错误信息：“Could not create a session: You must enable the 'Allow Remote Automation' option in Safari's Develop menu to control Safari via WebDriver.”如果是这样，根据指示重新尝试一遍。 +4. 如果你用的是 Mac，并决定测试 Safari 浏览器，可能会产生一个错误信息：“Could not create a session: You must enable the 'Allow Remote Automation' option in Safari's Develop menu to control Safari via WebDriver.”（无法创建会话：你必须启用 Safari 的“开发”菜单中的“允许远程自动化”选项，才能通过 WebDriver 控制 Safari）。如果是这样，请根据指示操作并重新尝试一遍。 -现在，我们像上次一样完成了测试，这一次浏览器的测试代码放到了 `searchTest()` 函数中。我们对多个浏览器创建了新的浏览器实例，然后将每一个实例传递给函数，这样就可以在 3 个浏览器下执行测试！ +现在，我们像上次一样完成了测试，这一次浏览器的测试代码放到了 `searchTest()` 函数中。我们对多个浏览器创建了新的浏览器实例，然后将每一个实例传递给函数，这样就可以在全部 3 个浏览器下执行测试！ 有意思吧？接下来我们继续，来了解一下 WebDriver 的语法基础。 ## WebDriver 语法速成课程 -现在我们来看一下 webdriver 的一些关键语法。更完整的细节，可以参考 [selenium-webdriver JavaScript API 参考](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/)以及 Selenium 主要的文档 [Selenium WebDriver](https://www.selenium.dev/documentation/webdriver/)，里面有用不同语言编写的丰富的学习示例。 +现在我们来看一下 webdriver 的一些关键语法。更完整的细节，可以参考 [selenium-webdriver JavaScript API 参考](https://www.selenium.dev/selenium/docs/api/javascript/)以及 Selenium 主要的文档 [Selenium WebDriver](https://www.selenium.dev/zh-cn/documentation/webdriver/)，里面有用不同语言编写的丰富的学习示例。 -### 启动一个新的测试 +### 启动新的测试 -要启动一次新的测试，你需要包含如下的 `selenium-webdriver` 代码模块： +要启动一个新的测试，你需要包含 `selenium-webdriver` 模块，并导入 `Builder` 构造函数和 `Browser` 接口： ```js -const webdriver = require("selenium-webdriver"); -const By = webdriver.By; -const until = webdriver.until; +const { Builder, Browser } = require("selenium-webdriver"); ``` -接下来，通过 `new webdriver.Builder()` 构造器来创建一个新的驱动实例，通过 `forBrowser()` 方法指定测试的浏览器类型，最后调用 `build()` 来实际创建它。（关于这些功能的详细信息，请参见 [Builder 类参考资料](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_Builder.html)）。 +你可以使用 `Builder()` 构造函数创建一个新的驱动实例，并链式调用 `forBrowser()` 方法来指定你希望使用的浏览器。`build()` 方法在链式调用的末尾用于实际构建驱动实例（有关这些功能的详细信息，请参阅 [Builder 类参考](https://www.selenium.dev/selenium/docs/api/javascript/Builder.html)）。 ```js -let driver = new webdriver.Builder().forBrowser("firefox").build(); +let driver = new Builder().forBrowser(Browser.FIREFOX).build(); ``` -注意，可以为要测试的浏览器设置特定的配置选项，例如，你可以在 `forBrowser()` 方法中设置一个特定的版本和操作系统来测试： +请注意，你可以为要测试的浏览器设置特定的配置选项。例如，你可以在 `forBrowser()` 方法中设置特定的版本和操作系统： ```js -let driver = new webdriver.Builder().forBrowser("firefox", "46", "MAC").build(); +let driver = new Builder().forBrowser(Browser.FIREFOX, "46", "MAC").build(); ``` -你还可以通过设置环境变量的方式来配置这些选项，如： +你也可以使用环境变量来设置这些选项，例如： ```bash SELENIUM_BROWSER=firefox:46:MAC ``` -让我们来创建一个新的测试验证一下。在你的 selenium 测试工程目录下，新建一个文件 `quick_test.js`, 将下面代码复制进去： +让我们创建一个新测试，以便在讨论这些代码时进行探索。在你的 Selenium 测试项目目录中，创建一个名为 `quick_test.js` 的新文件，并添加以下代码： ```js -const webdriver = require("selenium-webdriver"); -const By = webdriver.By; -const until = webdriver.until; +const { Builder, Browser } = require("selenium-webdriver"); -const driver = new webdriver.Builder().forBrowser("firefox").build(); +(async function example() { + const driver = await new Builder().forBrowser(Browser.FIREFOX).build(); +})(); ``` ### 获取测试的文档 @@ -239,7 +223,7 @@ driver.get("http://www.google.com"); ``` > [!NOTE] -> 可以查看 [WebDriver class reference](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/lib/webdriver_exports_WebDriver.html) 了解这一部分提到内容的详情。 +> 可以查看 [WebDriver 类参考](https://www.selenium.dev/selenium/docs/api/javascript/WebDriver.html)了解这一部分和下面提到的内容的详情。 你可以使用包含 `file://` 的 URL 来指向需要测试的本地文件： @@ -257,88 +241,170 @@ driver.get("http://localhost:8888/fake-div-buttons.html"); 使用一个远程的服务器地址代码会更灵活——当你启用远程服务器运行测试时，如果企图使用本地路径，代码会中断。 -现在添加下面代码到 `quick_test.js` 的最后： +更新 `example()` 函数如下： ```js -driver.get( - "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html", -); +const { Builder, Browser } = require("selenium-webdriver"); + +(async function example() { + const driver = await new Builder().forBrowser(Browser.FIREFOX).build(); + driver.get( + "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html", + ); +})(); ``` ### 同文档交互 -得到测试的文档后，我们就需要同它进行交互操作了，比如获取特定的元素对它进行某种测试。WebDriver 提供了[通过多种方法选择 UI 元素](https://www.selenium.dev/zh-cn/documentation/webdriver/elements/)，比如通过 ID、class、元素名称等。具体的选择通过 `findElement()` 方法完成，只需要将选择的元素作为参数传给它即可。举例来说，通过 ID 选择一个元素： +得到测试的文档后，我们就需要同它进行交互操作了，比如获取特定的元素对它进行某种测试。WebDriver 提供了[多种方法来选择 UI 元素](https://www.selenium.dev/zh-cn/documentation/webdriver/elements/)，比如通过 ID、class、元素名称等。具体的选择通过 `findElement()` 方法完成，只需要将选择的元素作为参数传给它即可。举例来说，通过 ID 选择元素： ```js const element = driver.findElement(By.id("myElementId")); ``` -通过 CSS 查找一个元素的最常用方法是使用 By.css 方法，它可以通过 CSS 选择器的方式来选择元素。把下面代码敲到 `quick_test.js` 的最后面： +通过 CSS 查找元素的最常用方法是使用 `By.css()` 方法，它可以通过 CSS 选择器的方式来选择元素。 + +现在更新 `example()` 函数如下： ```js -const button = driver.findElement(By.css("button:nth-of-type(1)")); +const { Builder, Browser, By } = require("selenium-webdriver"); + +(async function example() { + const driver = await new Builder().forBrowser(Browser.FIREFOX).build(); + driver.get( + "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html", + ); + const button = driver.findElement(By.css("button:nth-of-type(1)")); +})(); ``` ### 测试元素 -同 web 文档和元素交互的方式很多。在 WebDriver 的文档中有很多常用的例子，你可以从[获取文本值](https://www.selenium.dev/documentation/webdriver/elements/information/#text-content)开始。 +同 web 文档和元素交互的方式很多。在 WebDriver 的文档中有很多常用的例子，你可以从[获取文本值](https://www.selenium.dev/zh-cn/documentation/webdriver/elements/information/#文本内容)开始。 如果需要获取按钮中的文本，可以这样操作： ```js button.getText().then((text) => { - console.log(`Button text is '${text}'`); + console.log(`按钮中的文本是 '${text}'`); }); ``` -把这段代码也添加到 `quick_test.js` 中。 +如下所示，将此添加到 `example()` 函数的底部： + +```js +const { Builder, Browser, By } = require("selenium-webdriver"); + +(async function example() { + const driver = await new Builder().forBrowser(Browser.FIREFOX).build(); + + driver.get( + "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html", + ); -在你的工程目录下，运行测试： + const button = driver.findElement(By.css("button:nth-of-type(1)")); + + button.getText().then((text) => { + console.log(`按钮中的文本是 '${text}'`); + }); +})(); +``` + +在你的项目目录下，运行测试： ```bash node quick_test.js ``` -你可以看到按钮的文本标签打印到控制台。 +你应该可以看到控制台打印出按钮的文本内容。 -现在进一步尝试一下。将上面输入的代码删除，然后添加下面的这行代码： +让我们做点更有用的事情吧。如下所示，用代码 `button.click();` 替换前面的代码： ```js -button.click(); +const { Builder, Browser, By } = require("selenium-webdriver"); + +(async function example() { + const driver = await new Builder().forBrowser(Browser.FIREFOX).build(); + driver.get( + "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html", + ); + + const button = driver.findElement(By.css("button:nth-of-type(1)")); + + button.click(); +})(); ``` -重新运行测试；按钮被点击，你会看到 `alert()` 框弹出来，这样就知道按钮是正常工作的。 +重新运行测试；按钮被点击，你会看到 `alert()` 框弹出来，这样就知道按钮是正常工作的了！ -你还可以与弹出框进行交互。将下面代码添加到代码最后，再运行一下测试： +你还可以与弹出框进行交互。更新 `example()` 函数如下，再运行一下测试： ```js -const alert = driver.switchTo().alert(); +const { Builder, Browser, By, until } = require("selenium-webdriver"); -alert.getText().then((text) => { - console.log(`Alert text is '${text}'`); -}); +(async function example() { + const driver = await new Builder().forBrowser(Browser.FIREFOX).build(); + + driver.get( + "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html", + ); + + const button = driver.findElement(By.css("button:nth-of-type(1)")); + + button.click(); + + await driver.wait(until.alertIsPresent()); + + const alert = driver.switchTo().alert(); -alert.accept(); + alert.getText().then((text) => { + console.log(`提示文本是 '${text}'`); + }); + + alert.accept(); +})(); ``` -接下来，我们试一下在表单的一个元素中输入文本。添加如下代码并运行测试： +接下来，我们试一下在表单元素中输入文本。更新 `example()` 函数如下并运行测试： ```js -const input = driver.findElement(By.id("name")); -input.sendKeys("Filling in my form"); +const { Builder, Browser, By, until } = require("selenium-webdriver"); + +(async function example() { + const driver = await new Builder().forBrowser(Browser.FIREFOX).build(); + driver.get( + "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html", + ); + + const input = driver.findElement(By.id("name")); + input.sendKeys("填充表单"); + + const button = driver.findElement(By.css("button:nth-of-type(1)")); + + button.click(); + await driver.wait(until.alertIsPresent()); + + const alert = driver.switchTo().alert(); + + alert.getText().then((text) => { + console.log(`提示文本是 '${text}'`); + }); + + alert.accept(); +})(); ``` -你可以提交一些使用常规 `webdriver.Key` 属性不能代表的按键操作。举个例子，下面我们使用指令在提交前将 tab 从 input 移走： +你可以使用 `Key` 对象的属性提交无法用普通字符表示的按键。例如，我们在上面使用了这种代码，以便在提交表单输入之前按下 Tab 键： ```js driver.sleep(1000).then(() => { - driver.findElement(By.name("q")).sendKeys(webdriver.Key.TAB); + driver.findElement(By.name("q")).sendKeys(Key.TAB); }); ``` ### 等待操作完成 -有时候，在进行下一步处理之前我们需要 WebDriver 等待一些操作完成。比如装载一个新的页面，在与页面元素交互之前，需要等待 DOM 完成加载，否则测试有可能会失败。 +有时候，在进行下一步处理之前我们需要 WebDriver 等待一些操作完成。比如加载一个新的页面，在与页面元素交互之前，需要等待 DOM 完成加载，否则测试有可能会失败。 在 `google_test.js` 示例中，有这样一段代码块： @@ -356,40 +422,71 @@ driver.sleep(2000).then(() => { `sleep()` 方法的参数指明需要等待的毫秒时间。该方法返回在时间完成时兑现的 promise，那时将调用 `then()` 内的代码块。在这里的示例中，我们通过 `getTitle()` 方法获得当前页面的标题，然后根据标题的值返回成功或失败的消息。 -添加一个 `sleep()` 方法到我们的 `quick_test.js` 中，将最后的代码修改成如下代码块： +同样添加 `sleep()` 方法到我们的 `quick_test.js` 中，将 `example()` 函数更新如下： ```js -driver.sleep(2000).then(() => { - input.sendKeys("Filling in my form"); - input.getAttribute("value").then((value) => { - if (value !== "") { - console.log("Form input editable"); - } - }); -}); +const { Builder, Browser, By, until } = require("selenium-webdriver"); + +const driver = new Builder().forBrowser("firefox").build(); + +(async function example() { + try { + driver.get( + "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html", + ); + + driver.sleep(2000).then(() => { + const input = driver.findElement(By.id("name")); + + input.sendKeys("填充表单"); + input.getAttribute("value").then((value) => { + if (value !== "") { + console.log("表单输入可编辑"); + } + }); + }); + + const button = driver.findElement(By.css("button:nth-of-type(1)")); + + button.click(); + + await driver.wait(until.alertIsPresent()); + + const alert = driver.switchTo().alert(); + + alert.getText().then((text) => { + console.log(`提示文本是 '${text}'`); + }); + + alert.accept(); + } finally { + await driver.sleep(4000); // 延迟足够长的时间以看到搜索页面！ + driver.quit(); + } +})(); ``` -WebDriver 等待 2 秒然后填充表单的文本框。接下来我们使用 `getAttribute()` 获取它的 `value` 属性值，并对它进行测试（如是否为空），最后将测试结果打印出来。 +WebDriver 会等待 2 秒然后填充表单的文本框。接下来我们使用 `getAttribute()` 获取它的 `value` 属性值，并对它进行测试（如是否为空），最后将测试结果打印出来。 > [!NOTE] -> 还有一个方法叫 [`wait()`](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/lib/webdriver_exports_WebDriver.html#wait), 它是在一定的时间内对某个条件进行反复测试，然后再继续执行代码，它也使用了 [util 库](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/lib/until.html)，其中定义了使用 `wait()` 的常见条件。 +> 还有一个方法叫 [`wait()`](https://www.selenium.dev/selenium/docs/api/javascript/WebDriver.html#wait)，它是在一定的时间内对某个条件进行反复测试，然后再继续执行代码，它也使用了 [util 库](https://www.selenium.dev/selenium/docs/api/javascript/lib_until.js.html)，其中定义了使用 `wait()` 的常见条件。 ### 使用后关闭驱动 -完成一次测试后，需要关闭所有打开的驱动实例，确保你的机器上不会出现一堆泛滥的浏览器实例。只需要调用驱动实例的 `quit()` 方法即可。现在将下面这行代码添加到你的 `quick_test.js` 最后： +完成一次测试后，你需要关闭所有已打开的驱动实例，以确保你的机器上不会运行一大堆浏览器实例。只需要调用驱动实例的 `quit()` 方法即可。现在将下面这行代码添加到你的 `quick_test.js` 最后： ```js driver.quit(); ``` -当你运行它时，应该看到测试在执行，并且在测试完成后浏览器实例关闭。这对于不使你的计算机被大量的浏览器实例弄得杂乱无章是很有用的，特别是浏览器实例太多，导致计算机速度减慢。 +运行该程序时，你应该会看到测试正在执行，并且在测试完成后，浏览器实例会自动关闭。这有助于防止计算机因过多的浏览器实例而变得杂乱无章，特别是在浏览器实例过多导致计算机速度减慢的情况下。 ## 测试最佳实践 有很多编写最佳测试的实践方法，你可以参考[测试设计考虑](https://www.selenium.dev/zh-cn/documentation/test_practices/)来了解一些背景。总的来说，测试应该遵循如下几点： 1. 使用好的定位策略：当你[同文档交互](#同文档交互)时，确保你使用的定位器和页面对象是不变的。如对元素进行测试，确保这个元素有固定的 ID 或页面位置，这样可以通过 CSS 选择器定位到它，不至于在下一个迭代就发生变化。尽可能让你的测试稳健，而不是有一点改动就会崩溃。 -2. 写原子测试：一个测试只测一件事，这样有利于跟踪哪一个测试文件执行的是哪种测试。举例来说，前面的`google_test.js` 就只测试了一个简单的用例——页面的搜索结果标题是否正确。我们可以给它改一个名字，这样当我们添加更多的测试文件时它的作用会更直观，比如改为 `results_page_title_set_correctly.js`。 +2. 写原子测试：一个测试只测一件事，这样有利于跟踪哪一个测试文件执行的是哪种测试。举例来说，前面的 `google_test.js` 就只测试了一个简单的用例——页面的搜索结果标题是否正确。我们可以给它改一个名字，比如改为 `results_page_title_set_correctly.js`，这样当我们添加更多的测试文件时它的作用会更直观。 3. 写独立的测试：每一个测试只需要自己执行，不需要依赖其他的测试。 除此之外，我们还要提一下测试结果/测试报告——在前面的例子中，我们只是简单的把测试结果通过 `console.log()` 语句打印出来，这个完全只在 JavaScript 中完成，你可以使用任何你想要的测试运行和报告系统，如 [Mocha](https://mochajs.org/)、[Chai](https://www.chaijs.com/) 或其他的工具。 @@ -409,15 +506,15 @@ driver.quit(); 4. 使用 `--no-timeouts` 参数确保测试不会因 Mocha 的 3 秒超时时限而中途失败退出。 -> **备注：** [saucelabs-sample-test-frameworks](https://github.com/saucelabs-sample-test-frameworks) 中包含了一些关于如何设置不同测试/断言工具组合的有用示例。 +> **备注：** [saucelabs-sample-test-frameworks](https://github.com/saucelabs-sample-test-frameworks) 中包含了一些关于如何配置不同测试/断言工具组合的有用示例。 ## 运行远程测试 -在远端服务器上运行测试并不比在本地执行测试要困难多少，只需要在创建驱动实例的时候多配置几个特征参数，如测试的浏览器类型、服务器地址和用户权限（如果需要）就可以。 +在远端服务器上运行测试并不比在本地执行测试要困难多少，只需要在创建驱动实例的时候多配置几个特征参数，如要测试的浏览器的功能、服务器地址以及访问服务器所需的用户凭据（如果有的话）。 ### LambdaTest -让 Selenium 测试在 LambdaTest 上远程运行是非常简单的。你需要的代码应该遵循下面的模式。 +让 Selenium 测试在 LambdaTest 上远程运行非常简单。你需要的代码应该遵循下面的模式。 我们来写个示例： @@ -425,21 +522,19 @@ driver.quit(); 2. 将下列内容复制到文件中： ```js - const webdriver = require("selenium-webdriver"); - const By = webdriver.By; - const until = webdriver.until; + const { By, Builder } = require("selenium-webdriver"); - // username: Username can be found at automation dashboard + // 用户名：用户名可以在自动化仪表板上找到 const USERNAME = "{username}"; - // AccessKey: AccessKey can be generated from automation dashboard or profile section + // 访问密钥：访问密钥可以从自动化仪表板或个人资料部分生成 const KEY = "{accessKey}"; - // gridUrl: gridUrl can be found at automation dashboard + // 网格 URL：网格 URL 可以在自动化仪表板上找到 const GRID_HOST = "hub.lambdatest.com/wd/hub"; function searchTextOnGoogle() { - // Setup Input capabilities + // 配置功能 const capabilities = { platform: "windows 10", browserName: "chrome", @@ -449,28 +544,32 @@ driver.quit(); visual: true, console: true, video: true, - name: "Test 1", // name of the test - build: "NodeJS build", // name of the build + name: "Test 1", // 测试名称 + build: "NodeJS build", // 构建名称 }; // URL: https://{username}:{accessToken}@hub.lambdatest.com/wd/hub const gridUrl = `https://${USERNAME}:${KEY}@${GRID_HOST}`; - // setup and build selenium driver object - const driver = new webdriver.Builder() + // 设置并构建 Selenium 驱动对象 + const driver = new Builder() .usingServer(gridUrl) .withCapabilities(capabilities) .build(); - // navigate to a URL, search for a text and get title of page + // 导航到 URL，搜索文本并获取页面标题 driver.get("https://www.google.com/ncr").then(function () { driver - .findElement(webdriver.By.name("q")) + .findElement(By.name("q")) .sendKeys("LambdaTest\n") .then(function () { driver.getTitle().then((title) => { setTimeout(() => { - console.log(title); + if (title === "LambdaTest - Google Search") { + driver.executeScript("lambda-status=passed"); + } else { + driver.executeScript("lambda-status=failed"); + } driver.quit(); }, 5000); }); @@ -481,7 +580,8 @@ driver.quit(); searchTextOnGoogle(); ``` -3. 访问你的 [LambdaTest 自动测试仪表板](https://www.lambdatest.com/selenium-automation)，通过点击右上方的 **key** 图标来获取你的 LambdaTest 的用户名和访问密钥（见*Username and Access Keys*）。将代码中的 `{username}` 和 `{accessKey}` 占位符替换为你的实际用户名和访问密钥值（并确保它们是安全的）。 +3. 访问你的 [LambdaTest 自动测试仪表板](https://www.lambdatest.com/selenium-automation)，通过点击右上方的 **key** 图标来获取你的 LambdaTest 的用户名和访问密钥（见 _Username and Access Keys_）。将代码中的 `{username}` 和 `{accessKey}` 占位符替换为你的实际用户名和访问密钥值（并确保它们不泄露）。 + 4. 在终端中运行以下命令，以执行测试： ```bash @@ -491,7 +591,7 @@ driver.quit(); 测试将发送到 LambdaTest，其输出将反馈在 LambdaTest 控制台中。 如果你希望从 LambdaTest 平台提取这些结果用于报告，那么你可以通过使用 [LambdaTest restful API](https://www.lambdatest.com/blog/lambdatest-launches-api-for-selenium-automation/) 来实现。 -5. 现在，如果访问你的 [LambdaTest 自动测试仪表板](https://www.lambdatest.com/selenium-automation)，你会看到你的测试被列出；从这里你可以看到视频、屏幕截图和其他此类数据。 +5. 现在，如果访问你的 [LambdaTest 自动测试仪表板](https://accounts.lambdatest.com/dashboard)，你会看到你的测试被列出；从这里你可以看到视频、屏幕截图和其他此类数据。你还会看到 **passed** 或 **failed** 的状态，而不是 **completed**，因为有 `if` 或 `else` 代码块。 [![LambdaTest 自动测试仪表板](automation-logs-1.jpg)](https://www.lambdatest.com/blog/wp-content/uploads/2019/02/Automation-logs-1.jpg) @@ -503,93 +603,75 @@ driver.quit(); > [!NOTE] > 如果你不想手写测试的 capability 对象，你可以用 [Selenium Desired Capabilities Generator](https://www.lambdatest.com/capabilities-generator/) 来生成它们。 -#### 编程填充 LambdaTest 的测试详情 - -当执行许多自动化测试时，将它们的状态标记为通过或失败，使任务变得更加容易。 - -1. 使用下面的命令将 LambdaTest 的状态标记为**通过**。 - - ```bash - driver.executeScript("lambda-status=passed"); - ``` - -2. 使用以下命令将 LambdaTest 的状态标记为**失败**。 - - ```bash - driver.executeScript("lambda-status=failed"); - ``` - ### BrowserStack -在 BrowserStack 进行 Selenium 远程测试很简单，参考下面的代码示例： +在 BrowserStack 进行 Selenium 远程测试很简单，你需要的代码应遵循以下模式。 -1. 在你的工程目录下，新建一个文件 `bstack_google_test.js`. +我们来写一个例子： + +1. 在你的工程目录下，新建一个文件 `bstack_google_test.js`。 2. 复制下面内容： ```js - const webdriver = require("selenium-webdriver"); - const By = webdriver.By; - const until = webdriver.until; + const { Builder, By, Key } = require("selenium-webdriver"); + const request = require("request"); - // Input capabilities + // 输入能力 const capabilities = { - browserName: "Firefox", - browser_version: "56.0 beta", - os: "OS X", - os_version: "Sierra", - resolution: "1280x1024", - "browserstack.user": "YOUR-USER-NAME", - "browserstack.key": "YOUR-ACCESS-KEY", - "browserstack.debug": "true", - build: "First build", + "bstack:options": { + os: "OS X", + osVersion: "Sonoma", + browserVersion: "17.0", + local: "false", + seleniumVersion: "3.14.0", + userName: "YOUR-USER-NAME", + accessKey: "YOUR-ACCESS-KEY", + }, + browserName: "Safari", }; - const driver = new webdriver.Builder() + const driver = new Builder() .usingServer("http://hub-cloud.browserstack.com/wd/hub") .withCapabilities(capabilities) .build(); - driver.get("http://www.google.com"); - driver.findElement(By.name("q")).sendKeys("webdriver"); - - driver.sleep(1000).then(() => { - driver.findElement(By.name("q")).sendKeys(webdriver.Key.TAB); - }); - - driver.findElement(By.name("btnK")).click(); - - driver.sleep(2000).then(() => { - driver.getTitle().then((title) => { + (async function bStackGoogleTest() { + try { + await driver.get("https://www.google.com/"); + await driver.findElement(By.name("q")).sendKeys("webdriver", Key.RETURN); + await driver.sleep(2000); + const title = await driver.getTitle(); if (title === "webdriver - Google Search") { - console.log("Test passed"); + console.log("测试通过"); } else { - console.log("Test failed"); + console.log("测试失败"); } - }); - }); - - driver.quit(); + } finally { + await driver.sleep(4000); // 延迟足够长的时间以看到搜索页面！ + await driver.quit(); + } + })(); ``` -3. 在 [BrowserStack automation dashboard](https://www.browserstack.com/automate) 中获取你的用户名和访问密钥（查看 _Username and Access Keys_），替换代码中 `YOUR-USER-NAME` 和 `YOUR-ACCESS-KEY` 的对应值（并确保它们安全存放）。 +3. 从 [BrowserStack Account - Summary](https://www.browserstack.com/accounts/profile/details) 获取用户名和访问密钥（请参阅*用户名和访问密钥*）。用实际用户名和访问密钥值替换代码中的 `YOUR-USER-NAME` 和 `YOUR-ACCESS-KEY` 占位符（并确保它们不泄露）。 4. 执行下面命令： ```bash node bstack_google_test ``` - 测试被发送给 BrowserStackces, 测试结果会返回到你的控制台。这体现了包含报告机制的重要性！ + 测试被发送给 BrowserStack，测试结果会返回到你的控制台。这体现了包含报告机制的重要性！ -5. 现在回到 [BrowserStack automation dashboard](https://www.browserstack.com/automate) 页面，你会看到测试列出来的结果： +5. 现在回到 [BrowserStack 自动化仪表板](https://www.browserstack.com/automate)页面，你会看到测试列出来的结果： ![BrowserStack 自动测试结果](bstack_automated_results.png) -点击测试链接，会打开一个播放记录了测试视频的屏幕和在测试过程中相关的日志详情。 +如果你点击了测试链接，就会进入一个新的屏幕，在那里可以看到测试的视频记录，以及与测试相关的多个详细信息记录。 > [!NOTE] > Browserstack 自动化仪表盘的 _Resources_ 菜单选项上提供了许多运行自动化测试的有用信息。查看[使用 Node JS 编写自动化测试的文档](https://www.browserstack.com/docs/automate/selenium/getting-started/nodejs)获取相关信息，研究一下使用 BrowserStack 可以帮你做到哪些事情。 > [!NOTE] -> 如果你不想自己写测试用例，可以使用文档中嵌入的生成器，参见[运行你的首个测试](https://www.browserstack.com/docs/automate/selenium/getting-started/nodejs#run-your-first-test)）。 +> 如果你不想手写 capability 对象，可以使用文档中嵌入的生成器，参见[运行你的首个测试](https://www.browserstack.com/docs/automate/selenium/getting-started/nodejs#run-your-first-test)）。 #### 编程填充 BrowserStack 的测试详情 @@ -597,19 +679,25 @@ driver.quit(); 让我们来更新一下 `bstack_google_test.js` 示例，看看它们是怎样运作的： -1. 首先，导入 node 需要的模块，用来给 REST API 发送请求。在代码的顶端添加如下语句： +1. 在项目目录下运行以下命令，安装请求模块： + + ```js + npm install request + ``` + +2. 之后，导入 node 需要的模块，用来给 REST API 发送请求。在代码的顶端添加如下语句： ```js const request = require("request"); ``` -2. 现在更新一下 `capabilities` 对象，添加工程名——在右大括号前添加下面代码，记得要在上一行末增加一个逗号（在 BrowserStack 自动化仪表盘上，你可以修改 build 和 project 名称来组织不同窗口下的测试）： +3. 现在更新一下 `capabilities` 对象，添加工程名——在右大括号前添加下面代码，记得要在上一行末增加一个逗号（在 BrowserStack 自动化仪表盘上，你可以修改 build 和 project 名称来组织不同窗口下的测试）： ```js 'project' : 'Google test 2' ``` -3. 接下来获取当前会话的 `sessionId` , 就知道往哪儿发送请求（后面你会看到，ID 包含在请求的 URL 中）。将下面代码添加到创建 `driver` 对象（`var driver ...`）的代码块下面： +4. 接下来获取当前会话的 `sessionId`，从而知道往哪儿发送请求（后面你会看到，ID 包含在请求的 URL 中）。将下面代码添加到创建 `driver` 对象（`let driver …`）的代码块下面： ```js let sessionId; @@ -619,13 +707,13 @@ driver.quit(); }); ``` -4. 最后，修改下面 `driver.sleep(2000)` 的代码，添加 REST API 调用（同样，使用你的真实用户名和访问密钥替换 `YOUR-USER-NAME` 和 `YOUR-ACCESS-KEY` 的值）： +5. 最后，修改下面 `driver.sleep(2000)` 的代码，添加 REST API 调用（同样，使用你的真实用户名和访问密钥替换 `YOUR-USER-NAME` 和 `YOUR-ACCESS-KEY` 的值）： ```js driver.sleep(2000).then(() => { driver.getTitle().then((title) => { if (title === "webdriver - Google Search") { - console.log("Test passed"); + console.log("测试通过"); request({ uri: `https://YOUR-USER-NAME:YOUR-ACCESS-KEY@www.browserstack.com/automate/sessions/${sessionId}.json`, method: "PUT", @@ -635,7 +723,7 @@ driver.quit(); }, }); } else { - console.log("Test failed"); + console.log("测试失败"); request({ uri: `https://YOUR-USER-NAME:YOUR-ACCESS-KEY@www.browserstack.com/automate/sessions/${sessionId}.json`, method: "PUT", @@ -651,13 +739,13 @@ driver.quit(); 代码很直观——测试一完成，就会发送一个 API 调用到 BrowserStack 来更新测试状态是通过还是完成，并且给出相关的原因。 -现在回到 [BrowserStack 自动化仪表盘](https://www.browserstack.com/automate)页面，你会看到测试会话如之前一样正常运行，并且增加了更新的数据： +现在回到 [BrowserStack 自动化仪表盘](https://live.browserstack.com/dashboard)页面，你会看到测试会话如之前一样正常运行，并且增加了更新的数据： ![BrowserStack 自定义结果](bstack_custom_results.png) ### Sauce Labs -在 Sauce Labs 远程运行 Selenium 测试与在 BrowserStack 一样简单，尽管它们有一些语法的差异。所需的代码应该满足以下样式。 +在 Sauce Labs 远程运行 Selenium 测试与在 BrowserStack 一样简单，尽管它们有一些语法的差异。所需的代码应该遵循以下模式。 我们来撰写一个示例： @@ -665,13 +753,11 @@ driver.quit(); 2. 复制下面内容： ```js - const webdriver = require("selenium-webdriver"); - const By = webdriver.By; - const until = webdriver.until; + const { Builder, By, Key } = require("selenium-webdriver"); const username = "YOUR-USER-NAME"; const accessKey = "YOUR-ACCESS-KEY"; - const driver = new webdriver.Builder() + const driver = new Builder() .withCapabilities({ browserName: "chrome", platform: "Windows XP", @@ -689,7 +775,7 @@ driver.quit(); driver.findElement(By.name("q")).sendKeys("webdriver"); driver.sleep(1000).then(() => { - driver.findElement(By.name("q")).sendKeys(webdriver.Key.TAB); + driver.findElement(By.name("q")).sendKeys(Key.TAB); }); driver.findElement(By.name("btnK")).click(); @@ -697,9 +783,9 @@ driver.quit(); driver.sleep(2000).then(() => { driver.getTitle().then((title) => { if (title === "webdriver - Google Search") { - console.log("Test passed"); + console.log("测试成功"); } else { - console.log("Test failed"); + console.log("测试失败"); } }); }); @@ -707,7 +793,7 @@ driver.quit(); driver.quit(); ``` -3. 从你的 [Sauce Labs 用户设置](https://app.saucelabs.com/user-settings), 获取你的用户名和访问密钥，并替换代码中对于 `YOUR-USER-NAME` 和 `YOUR-ACCESS-KEY` 的值（确保它们依然安全）。 +3. 从你的 [Sauce Labs 用户设置](https://app.saucelabs.com/user-settings)，获取你的用户名和访问密钥，并替换代码中 `YOUR-USER-NAME` 和 `YOUR-ACCESS-KEY` 的值（确保它们依然不泄露）。 4. 执行如下命令运行测试： ```bash @@ -716,7 +802,7 @@ driver.quit(); 测试会被发送到 Sauce Labs，并返回相应的测试结果到你的控制台。这体现了包含报告机制的重要性！ -5. 现在访问你的 [Sauce Labs 自动化测试仪表盘](https://app.saucelabs.com/dashboard/tests) 页面，会看到列出的测试; 同样你也可以看到视频、截屏和其他类似的数据。 +5. 现在访问你的 [Sauce Labs 自动化测试仪表盘](https://app.saucelabs.com/dashboard/tests) 页面，会看到列出的测试；同样你也可以看到视频、截屏和其他类似的数据。 ![Sauce Labs 自动化测试](sauce_labs_automated_test.png) > [!NOTE] @@ -729,7 +815,7 @@ driver.quit(); 使用 Sauce Labs API 可以给测试添加更多详情，如测试是否通过、测试名称等等，Sauce Labs 默认并没有这些细节！ -示例如下： +为此，你需要： 1. 安装 Node Sauce Labs 套件（如果你之前没有运行过）： @@ -752,7 +838,7 @@ driver.quit(); }); ``` - 同样，用真实的用户名和访问密钥来替换 `YOUR-USER-NAME` 和 `YOUR-ACCESS-KEY` 的值（注意，saucelabs 的 npm 包使用的是 `password`，而不是 `accessKey`）。由于你现在正在使用这些东西两次，你可能需要创建几个辅助变量来存储它们。 + 同样，用真实的用户名和访问密钥来替换 `YOUR-USER-NAME` 和 `YOUR-ACCESS-KEY` 的值（注意，saucelabs 的 npm 包使用的是 `password`，而不是 `accessKey`）。由于你现在使用这些东西两次了，建议你创建几个辅助变量来存储它们。 4. 在 `driver` 变量定义的下方（就在 `build()` 行后面）添加下面代码块，它将获取正确的驱动 `sessionID` 来将数据写入进程（你可以在下一个代码块中看到它的动作）： @@ -769,10 +855,10 @@ driver.quit(); driver.getTitle().then((title) => { let testPassed = false; if (title === "webdriver - Google Search") { - console.log("Test passed"); + console.log("测试通过"); testPassed = true; } else { - console.error("Test failed"); + console.error("测试失败"); } saucelabs.updateJob(driver.sessionID, { @@ -791,11 +877,11 @@ driver.quit(); ### 自己的远程服务器 -如果你不想使用 Sauce Labs 或 BrowserStack 之类的服务，你也可以设置自己的远程测试服务器。具体操作如下： +如果你不想使用 Sauce Labs 或 BrowserStack 之类的服务，你也可以配置自己的远程测试服务器。具体操作如下： 1. Selenium 的远端服务器要求运行 Java，从 [Java SE 下载页面](https://www.oracle.com/java/technologies/downloads/)下载适合你平台的最新 JDK 并安装。 -2. 接着，下载最新的 [Selenium 单机服务器](http://selenium-release.storage.googleapis.com/index.html)，它作为你的脚本和浏览器驱动之间的一个代理。选择最新的稳定版本（最好不要选 beta 版本），从列表中选择以“selenium-server-standalone”开头的文件。下载完成后，放到一个靠谱的地方，比如家目录下。如果你还没有将位置添加到 `PATH`，现在就需要添加了（查看[在 Node 中创建 Selenium](#在_node_下建立_selenium) 小节）。 -3. 在作为服务器的电脑终端上执行如下代码，安装单机版服务器 +2. 接着，下载最新的 [Selenium 单机服务器](http://selenium-release.storage.googleapis.com/index.html)，它作为你的脚本和浏览器驱动之间的一个代理。选择最新的稳定版本（最好不要选 beta 版本），从列表中选择以“selenium-server-standalone”开头的文件。下载完成后，放到一个靠谱的地方，比如主目录下。如果你还没有将位置添加到 `PATH`，现在就需要添加了（查看[在 Node 中搭建 Selenium 环境](#在_node_下搭建_selenium_环境)小节）。 +3. 在作为服务器的电脑终端上执行如下代码，安装独立服务器。 ```bash java -jar selenium-server-standalone-3.0.0.jar @@ -805,7 +891,7 @@ driver.quit(); 4. 服务会运行在 `http://localhost:4444/wd/hub`，你可以去试试看是什么效果。 -现在服务器运行起来了，让我们在 selenium 服务器上来创建一个 demo 测试。 +现在服务器运行起来了，让我们在 selenium 服务器上来创建一个示例测试。 1. 复制 `google_test.js` 文件，改名为 `google_test_remote.js`，放到项目目录下。 2. 将第二段代码（以 `let driver = …` 开头的代码段）修改如下： @@ -827,7 +913,7 @@ driver.quit(); ## 将 selenium 和 CI 工具集成 -另外，将 Selenium 同 Sauce Labs 之类的其他工具集成到持续集成（CI）工具中是很有用的，这意味着你可以通过 CI 工具来运行测试，只有测试通过才允许提交代码的修改。 +另外，建议将 Selenium 同 Sauce Labs 之类的其他工具集成到持续集成（CI）工具中，这意味着你可以通过 CI 工具来运行测试，只有测试通过才允许提交代码的修改。 在这里不对这个话题进行深入探讨，但是我们建议你从 Travis CI 开始——这大概是最容易入门的 CI 工具了，它与 GitHub 和 Node 等 web 工具都有很好的集成。 @@ -845,6 +931,6 @@ driver.quit(); ## 总结 -这个模块应该是有趣的，并且应该给你足够的洞察力来编写和运行自动化测试，以便你开始编写自己的自动化测试。 +这个模块应该很有趣，并且应该让你对编写和运行自动化测试有足够的了解，以便你开始编写自己的自动化测试。 {{PreviousMenu("Learn/Tools_and_testing/Cross_browser_testing/Automated_testing", "Learn/Tools_and_testing/Cross_browser_testing")}} From 371b10399d124adc1b809eb213086b027fdbe654 Mon Sep 17 00:00:00 2001 From: xion <65892539+xionkq@users.noreply.github.com> Date: Tue, 24 Sep 2024 14:06:55 +0800 Subject: [PATCH 161/365] [zh-CN]: fix the broken link to the `path()` CSS function (#23764) --- files/zh-cn/web/css/clip-path/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/css/clip-path/index.md b/files/zh-cn/web/css/clip-path/index.md index 319eed3ec9a8f6..1731fb64e1e4f3 100644 --- a/files/zh-cn/web/css/clip-path/index.md +++ b/files/zh-cn/web/css/clip-path/index.md @@ -65,7 +65,7 @@ clip-path: unset; - : 定义一个椭圆（使用两个半径和一个圆心位置）。 - {{cssxref("basic-shape/polygon","polygon()")}} - : 定义一个多边形（使用一个 SVG 填充规则和一组顶点）。 - - {{cssxref("path","path()")}} + - {{cssxref("basic-shape/path","path()")}} - : 定义一个任意形状（使用一个可选的 SVG 填充规则和一个 SVG 路径定义）。 - `` From 16e00f6a1b6f66d4cad2e763159fe9218e500189 Mon Sep 17 00:00:00 2001 From: ikenk <93726321+ikenk@users.noreply.github.com> Date: Tue, 24 Sep 2024 20:10:04 +0800 Subject: [PATCH 162/365] zh-cn: updated Author detail page (#23734) Co-authored-by: A1lo --- .../author_detail_page/index.md | 101 ++++++++---------- 1 file changed, 47 insertions(+), 54 deletions(-) diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md index d357fd54a6e3e2..cc87121b853c2b 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md +++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md @@ -1,63 +1,57 @@ --- -title: 作者细节页面 +title: 作者详情页面 slug: Learn/Server-side/Express_Nodejs/Displaying_data/Author_detail_page +l10n: + sourceCommit: 8d5440dbd259fd6eea32b4f4a200f25257d1bf41 --- -作者细节页面需要呈现指定作者`Author`的信息，使用 `_id` 字段的值（自动产生）识别，接着是这个作者的所有书本物件`Book`的列表。 +{{LearnSidebar}} + +作者详情页面需要呈现指定作者（`Author`）的信息，使用（自动生成的）`_id` 字段值进行标识，接着是这个作者的所有书本（`Book`）对象的列表。 ## 控制器 打开 **/controllers/authorController.js**。 -在档案最上方，加入底下几行，引入 async 和 Book 模组 (作者细节页面需要它们)。 +在文件顶部添加以下代码，以此来引入（`require()`）作者详情页所需的 `Book` 模块（其他模块，例如“express-async-handler”应该已经存在）。 ```js -var async = require("async"); -var Book = require("../models/book"); +const Book = require("../models/book"); ``` -找到 exported `author_detail()` 控制器方法，并用底下代码置换。 +找到被导出的 `author_detail()` 控制器方法，并用以下代码替换。 ```js -// Display detail page for a specific Author. -exports.author_detail = function (req, res, next) { - async.parallel( - { - author: function (callback) { - Author.findById(req.params.id).exec(callback); - }, - authors_books: function (callback) { - Book.find({ author: req.params.id }, "title summary").exec(callback); - }, - }, - function (err, results) { - if (err) { - return next(err); - } // Error in API usage. - if (results.author == null) { - // No results. - var err = new Error("Author not found"); - err.status = 404; - return next(err); - } - // Successful, so render. - res.render("author_detail", { - title: "Author Detail", - author: results.author, - author_books: results.authors_books, - }); - }, - ); -}; +// 呈现指定作者的详情页。 +exports.author_detail = asyncHandler(async (req, res, next) => { + // （并行地）获取作者的详细信息及其所有作品 + const [author, allBooksByAuthor] = await Promise.all([ + Author.findById(req.params.id).exec(), + Book.find({ author: req.params.id }, "title summary").exec(), + ]); + + if (author === null) { + // 没有结果。 + const err = new Error("Author not found"); + err.status = 404; + return next(err); + } + + res.render("author_detail", { + title: "Author Detail", + author: author, + author_books: allBooksByAuthor, + }); +}); ``` -此处的控制器方法使用 `async.parallel()`，用平行的方式，查询作者 `Author`和相应的书本实例，并附加上绘制本页面的回调，如果 2 个要求都成功完成，就运行回调。这个方式，就跟前面的种类细节页面所说明的完全相同。 +该方法与[种类详情页面](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page)中描述的方法完全相同。路由控制器函数使用 `Promise.all()` 并行地查询指定的作者（`Author`）及其关联的 `Book` 实例。如果没有找到匹配的作者，则会将错误（Error）对象发送到 Express 错误处理中间件。如果找到作者，则使用“author_detail”模板呈现检索到的数据库信息。 ## 视图 -创建 **/views/author_detail.pug** ，並複制貼上底下的文字。 +创建 **/views/author_detail.pug** 并复制以下文本。 -```js +```pug extends layout block content @@ -67,30 +61,29 @@ block content div(style='margin-left:20px;margin-top:20px') - h4 Books - - dl - each book in author_books - dt - a(href=book.url) #{book.title} - dd #{book.summary} - - else - p This author has no books. + h2(style='font-size: 1.5rem;') Books + if author_books.length + dl + each book in author_books + dt + a(href=book.url) #{book.title} + dd #{book.summary} + else + p This author has no books. ``` 本模板里的所有事物，都在先前的章节演示过了。 ## 它看起來像是？ -运行本应用，并打开浏览器访问 。选择 All Authors 连结，然后选择一个作者。如果每个东西都设定正确了，你的网站看起来应该会像底下的截图。 +运行本应用并打开浏览器访问 `http://localhost:3000/`。选择 _All Authors_ 链接，然后选择一个作者。如果每个配置都设定正确了，你的网站应该类似于下方的截图。 -![Author Detail Page - Express Local Library site](locallibary_express_author_detail.png) +![作者详情页面——Express 本地图书馆网站](locallibary_express_author_detail.png) > [!NOTE] -> 作者的出生与死亡日期的外观很丑！我们将在本文最后的自我挑战处理它。 +> 作者的出生与死亡日期的外观很丑！我们将在本文最后的自我挑战中处理它。 ## 下一步 -- 回到 [Express 教程 5: 呈现图书馆数据](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data) -- 继续教程 5 的下一个部分 : [书本实例细节页面和自我挑战](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_detail_page_and_challenge) +- 回到 [Express 教程 5：呈现图书馆数据](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data) +- 继续教程 5 的下一个部分：[书本实例细节页面和自我挑战](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_detail_page_and_challenge) From 16145fef74aec6b9c9b503082e42be4f57d78afc Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 20 Sep 2024 08:10:04 +0900 Subject: [PATCH 163/365] =?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=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../serviceworkerglobalscope/message_event/index.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/files/ja/web/api/serviceworkerglobalscope/message_event/index.md b/files/ja/web/api/serviceworkerglobalscope/message_event/index.md index 165bc7b2f8727d..06c3b65e4e3237 100644 --- a/files/ja/web/api/serviceworkerglobalscope/message_event/index.md +++ b/files/ja/web/api/serviceworkerglobalscope/message_event/index.md @@ -1,13 +1,14 @@ --- title: "ServiceWorkerGlobalScope: message イベント" +short-title: message slug: Web/API/ServiceWorkerGlobalScope/message_event l10n: - sourceCommit: c7aeb96dac3e0ac2864cffe45c02d214ae1a5219 + sourceCommit: 2ef36a6d6f380e79c88bc3a80033e1d3c4629994 --- -{{APIRef("Service Workers API")}} +{{APIRef("Service Workers API")}}{{SecureContext_Header}}{{AvailableInWorkers("service")}} -**`message`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、着信メッセージを受信したときに発生します。 制御されたページは、 {{domxref("Worker.postMessage()", "ServiceWorker.postMessage()")}} メソッドを使用して、サービスワーカーにメッセージを送信することができます。 +**`message`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、着信メッセージを受信したときに発生します。 制御されたページは、{{domxref("ServiceWorker.postMessage()")}} メソッドを使用して、サービスワーカーにメッセージを送信することができます。 サービスワーカーは、任意で、制御されたページに対応する {{domxref("Client.postMessage()")}} を介して返信することができます。 このイベントはキャンセル不可で、バブリングしません。 @@ -33,11 +34,11 @@ onmessage = (event) => {}; _親である {{domxref("ExtendableEvent")}} からプロパティを継承しています_。 - {{domxref("ExtendableMessageEvent.data")}} {{ReadOnlyInline}} - - : イベントのデータを返します。任意のデータ型にすることができます。 + - : イベントのデータを返します。任意のデータ型にすることができます。`messageerror` イベントで配信された場合、プロパティは `null` になります。 - {{domxref("ExtendableMessageEvent.origin")}} {{ReadOnlyInline}} - : メッセージを送信した {{domxref("Client")}} のオリジンを返します。 - {{domxref("ExtendableMessageEvent.lastEventId")}} {{ReadOnlyInline}} - - : [サーバー送信イベント](/ja/docs/Web/API/Server-sent_events/Using_server-sent_events)において、イベントソースの最後のイベント ID を表します。これは空文字列です。 + - : [サーバー送信イベント](/ja/docs/Web/API/Server-sent_events/Using_server-sent_events)において、イベントソースの最後のイベント ID を表します。 - {{domxref("ExtendableMessageEvent.source")}} {{ReadOnlyInline}} - : メッセージを送信した {{domxref("Client")}} オブジェクトへの参照を返します。 - {{domxref("ExtendableMessageEvent.ports")}} {{ReadOnlyInline}} @@ -99,5 +100,4 @@ self.onmessage = (event) => { - [サービスワーカーの使用](/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers) - [サービスワーカーの基本的なコード例](https://github.com/mdn/dom-examples/tree/main/service-worker/simple-service-worker)（英語） -- [ServiceWorker の準備はできていますか？](https://jakearchibald.github.io/isserviceworkerready/)（英語） - [ウェブワーカーの使用](/ja/docs/Web/API/Web_Workers_API/Using_web_workers) From b5d92998c3b20d3beed1f17291ca4c7346cc50ac Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 20 Sep 2024 08:13:58 +0900 Subject: [PATCH 164/365] =?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 --- .../messageerror_event/index.md | 100 ++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 files/ja/web/api/serviceworkerglobalscope/messageerror_event/index.md diff --git a/files/ja/web/api/serviceworkerglobalscope/messageerror_event/index.md b/files/ja/web/api/serviceworkerglobalscope/messageerror_event/index.md new file mode 100644 index 00000000000000..050ff9942cfb5b --- /dev/null +++ b/files/ja/web/api/serviceworkerglobalscope/messageerror_event/index.md @@ -0,0 +1,100 @@ +--- +title: "ServiceWorkerGlobalScope: messageerror イベント" +short-title: messageerror +slug: Web/API/ServiceWorkerGlobalScope/messageerror_event +l10n: + sourceCommit: 2ef36a6d6f380e79c88bc3a80033e1d3c4629994 +--- + +{{APIRef("Service Workers API")}}{{SecureContext_Header}}{{AvailableInWorkers("service")}} + +**`messageerror`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、受信メッセージがデシリアライズできない場合に発生します。 + +このイベントはキャンセル不可で、バブリングしません。 + +## 構文 + +このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。 + +```js +addEventListener("messageerror", (event) => {}); + +onmessageerror = (event) => {}; +``` + +## イベント型 + +{{domxref("ExtendableMessageEvent")}} です。 {{domxref("ExtendableEvent")}} を継承しています。 + +{{InheritanceDiagram("ExtendableMessageEvent")}} + +## イベントプロパティ + +_親である {{domxref("ExtendableEvent")}} からプロパティを継承しています_。 + +- {{domxref("ExtendableMessageEvent.data")}} {{ReadOnlyInline}} + - : イベントのデータを返します。任意のデータ型にすることができます。`messageerror` イベントで配信された場合、プロパティは `null` になります。 +- {{domxref("ExtendableMessageEvent.origin")}} {{ReadOnlyInline}} + - : メッセージを送信した {{domxref("Client")}} のオリジンを返します。 +- {{domxref("ExtendableMessageEvent.lastEventId")}} {{ReadOnlyInline}} + - : [サーバー送信イベント](/ja/docs/Web/API/Server-sent_events/Using_server-sent_events)において、イベントソースの最後のイベント ID を表します。 +- {{domxref("ExtendableMessageEvent.source")}} {{ReadOnlyInline}} + - : メッセージを送信した {{domxref("Client")}} オブジェクトへの参照を返します。 +- {{domxref("ExtendableMessageEvent.ports")}} {{ReadOnlyInline}} + - : 関連するメッセージチャネルのポートを表す {{domxref("MessagePort")}} オブジェクトを含む配列を返します。 + +## 例 + +以下の例では、ページが {{domxref("ServiceWorkerRegistration.active")}} を介して {{domxref("ServiceWorker")}} オブジェクトへのハンドルを取得し、その `postMessage()` 関数を呼び出します。 + +```js +// main.js +if (navigator.serviceWorker) { + navigator.serviceWorker.register("service-worker.js"); + + navigator.serviceWorker.addEventListener("message", (event) => { + // event は MessageEvent オブジェクトです + console.log(`The service worker sent me a message: ${event.data}`); + }); + + navigator.serviceWorker.ready.then((registration) => { + registration.active.postMessage("Hi service worker"); + }); +} +``` + +サービスワーカーは、次のようにして "message" イベントを待ち受けすることでメッセージを受け取ることができます。 + +```js +// service-worker.js +self.addEventListener("messageerror", (event) => { + // event は ExtendableMessageEvent オブジェクトです + console.error("Message deserialization failed"); +}); +``` + +また、スクリプトは `onmessageerror` を使用してメッセージを待ち受けすることもできます。 + +```js +// service-worker.js +self.onmessageerror = (event) => { + // event は ExtendableMessageEvent オブジェクトです + console.error("Message deserialization failed"); +}; +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("ServiceWorkerGlobalScope/message_event", "message")}} +- {{domxref("ServiceWorker.postMessage()")}} +- [ウェブワーカーの使用](/ja/docs/Web/API/Web_Workers_API/Using_web_workers) +- [Service workers basic code example](https://github.com/mdn/dom-examples/tree/main/service-worker/simple-service-worker) +- [Using web workers](/ja/docs/Web/API/Web_Workers_API/Using_web_workers) From 5257a8f436dc5f685fe1f5257dc5f879a6cf2775 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 20 Sep 2024 08:18:52 +0900 Subject: [PATCH 165/365] =?UTF-8?q?2024/04/12=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../notificationclick_event/index.md | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/files/ja/web/api/serviceworkerglobalscope/notificationclick_event/index.md b/files/ja/web/api/serviceworkerglobalscope/notificationclick_event/index.md index 14c228d27bd68c..a71109dd9e9b07 100644 --- a/files/ja/web/api/serviceworkerglobalscope/notificationclick_event/index.md +++ b/files/ja/web/api/serviceworkerglobalscope/notificationclick_event/index.md @@ -1,13 +1,16 @@ --- title: "ServiceWorkerGlobalScope: notificationclick イベント" +short-title: notificationclick slug: Web/API/ServiceWorkerGlobalScope/notificationclick_event l10n: - sourceCommit: e0e09b1df51489867f2e74c18586d168ba5e00d1 + sourceCommit: 28848ba41c082db2a8c55e85c804bd06363afb57 --- -{{APIRef}} +{{APIRef("Web Notifications")}}{{SecureContext_Header}}{{AvailableInWorkers("service")}} -**`notificationclick`** イベントは、 {{domxref("ServiceWorkerRegistration.showNotification()")}} によって生み出されたシステム通知がクリックされたことを示すために発生します。 +**`notificationclick`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、 {{domxref("ServiceWorkerRegistration.showNotification()")}} によって生み出されたシステム通知がクリックされたことを示すために発生します。 + +メインスレッドまたは {{domxref("Notification.Notification","Notification()")}} コンストラクターを使用するサービスワーカーではないワーカーで作成された通知は、{{domxref("Notification/click_event", "click")}} イベントを代わりに {{domxref("Notification")}} オブジェクト自体で受け取ります。 このイベントはキャンセル不可で、バブリングしません。 @@ -23,13 +26,13 @@ onnotificationclick = (event) => {}; ## イベント型 -{{domxref("NotificationEvent")}} です。 {{domxref("Event")}} を継承しています。 +{{domxref("NotificationEvent")}} です。{{domxref("ExtendableEvent")}} および {{domxref("Event")}} を継承しています。 {{InheritanceDiagram("NotificationEvent")}} ## イベントプロパティ -_親である {{domxref("Event")}} からプロパティを継承しています_。 +_祖先である {{domxref("ExtendableEvent")}} および {{domxref("Event")}} からプロパティを継承しています_。 - {{domxref("NotificationEvent.notification")}} {{ReadOnlyInline}} - : クリックされイベントが発行された通知を表す {{domxref("Notification")}} オブジェクトを返します。 @@ -86,11 +89,11 @@ self.onnotificationclick = (event) => { }; ``` -イベントのアクションは `event.action` を使って {{domxref("ServiceWorkerGlobalScope.notificationclick_event", "notificationclick")}} イベントハンドラーの中で処理することができます。 +イベントのアクションは `event.action` を使って `notificationclick` イベントハンドラーの中で処理することができます。 ```js navigator.serviceWorker.register("sw.js"); -Notification.requestPermission((result) => { +Notification.requestPermission().then((result) => { if (result === "granted") { navigator.serviceWorker.ready.then((registration) => { // Archive というタイトルのアクションを含んだ通知を表示します。 From e13e2f26fdfc8d4309f8a5717cf0974e8a610d28 Mon Sep 17 00:00:00 2001 From: Nistek <61591806+Nistek@users.noreply.github.com> Date: Tue, 24 Sep 2024 18:14:46 +0200 Subject: [PATCH 166/365] index.md finished samples fix (#23680) * index.md finished samples fix Fixed missing finished samples lines --- .../index.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/files/es/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.md b/files/es/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.md index 5cabfcf8c6735e..7c5a0e24cc4b5a 100644 --- a/files/es/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.md +++ b/files/es/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.md @@ -14,7 +14,13 @@ El objetivo de esta prueba de habilidad es evaluar si has comprendido el artícu ## Texto básico HTML 1 -En esta tarea queremos que etiquetes el HTML entregado utilizando elementos semánticos de encabezado y párrafo. Intenta actualizando el código más abajo para recrear el ejemplo terminado: +En esta tarea queremos que etiquetes el HTML entregado utilizando elementos semánticos de encabezado y párrafo. + +El ejemplo terminado debería de tener este aspecto: + +{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text1-finished.html", '100%', 300)}} + +Intenta actualizando el código más abajo para recrear el ejemplo terminado: {{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text1.html", '100%', 700)}} @@ -24,6 +30,10 @@ En esta tarea queremos que etiquetes el HTML entregado utilizando elementos sem En esta tarea necesitamos que cambies la primera lista no marcada en una lista no ordenada, y la segunda en una lista ordenada. +El ejemplo terminado debería de tener este aspecto: + +{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text2-finished.html", '100%', 400)}} + Intenta actualizando el código más abajo para recrear el ejemplo terminado: {{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text2.html", '100%', 700)}} @@ -34,6 +44,10 @@ Intenta actualizando el código más abajo para recrear el ejemplo terminado: En esta tarea se te entrega un párrafo, y tu objetivo es usar algunos elementos en línea para marcar algunas palabras con importancia, y otras con énfasis +El ejemplo terminado debería de tener este aspecto: + +{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text3-finished.html", '100%', 120)}} + Intenta actualizando el código más abajo para recrear el ejemplo terminado: {{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text3.html", '100%', 700)}} From cd60d9377bf93ab346f6d0f5ea0e7e949d692534 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Wed, 25 Sep 2024 00:30:18 +0800 Subject: [PATCH 167/365] chore(es): handling redirects of chrome.com (#23709) * chore(es): handling redirects of chrome.com * Apply suggestions from code review * fix: remove language query --- .../what_are_browser_developer_tools/index.md | 2 +- .../add-ons/webextensions/api/i18n/index.md | 2 +- .../add-ons/webextensions/api/storage/index.md | 2 +- .../webextensions/api/storage/local/index.md | 2 +- .../webextensions/api/storage/sync/index.md | 2 +- .../chrome_incompatibilities/index.md | 14 +++++++------- files/es/mozilla/add-ons/webextensions/index.md | 2 +- .../webextensions/what_are_webextensions/index.md | 2 +- files/es/web/api/console/assert_static/index.md | 2 +- files/es/web/api/console/index.md | 2 +- files/es/web/api/navigationpreloadmanager/index.md | 6 +++--- .../inheritance_and_the_prototype_chain/index.md | 2 +- 12 files changed, 20 insertions(+), 20 deletions(-) diff --git a/files/es/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md b/files/es/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md index 636f1e1d72f122..a85ab0474f4bfe 100644 --- a/files/es/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md +++ b/files/es/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md @@ -227,7 +227,7 @@ Obtén más información sobre la consola de JavaScript en diferentes navegadore - [Consola Web de Firefox.](/es/docs/Tools/Web_Console) - [Consola de JavaScript Edge.](https://docs.microsoft.com/es-es/microsoft-edge/devtools-guide-chromium) -- [Consola JavaScript de Chrome.](https://developer.chrome.com/devtools/docs/console) (el inspector de Opera funciona de la misma manera) +- [Consola JavaScript de Chrome.](https://developer.chrome.com/docs/devtools/console/) (el inspector de Opera funciona de la misma manera) - [Consola en Safari.](https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1) ## Ve también diff --git a/files/es/mozilla/add-ons/webextensions/api/i18n/index.md b/files/es/mozilla/add-ons/webextensions/api/i18n/index.md index 4698c256bf0cbd..266920f6fad0f6 100644 --- a/files/es/mozilla/add-ons/webextensions/api/i18n/index.md +++ b/files/es/mozilla/add-ons/webextensions/api/i18n/index.md @@ -38,7 +38,7 @@ Para obtener más información sobre el uso de i18n en su extensión, consulte: > **Nota:** **Reconocimientos** > -> Esta API se basa en la API [`chrome.i18n`](https://developer.chrome.com/extensions/i18n) de Chromium. Esta documentación deriva del archivo [`i18n.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/i18n.json) en el código fuente de Chromium. +> Esta API se basa en la API [`chrome.i18n`](https://developer.chrome.com/docs/extensions/reference/api/i18n) de Chromium. Esta documentación deriva del archivo [`i18n.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/i18n.json) en el código fuente de Chromium. > > Los datos de compatibilidad de Microsoft Edge son suministrados por Microsoft Corporation y se incluyen aquí según los términos de la licencia Creative Commons Atribución 3.0, versión estadounidense. diff --git a/files/es/mozilla/add-ons/webextensions/api/storage/index.md b/files/es/mozilla/add-ons/webextensions/api/storage/index.md index eeac133e349e9c..aac3e9e40ce5c6 100644 --- a/files/es/mozilla/add-ons/webextensions/api/storage/index.md +++ b/files/es/mozilla/add-ons/webextensions/api/storage/index.md @@ -54,7 +54,7 @@ El almacenamiento tiene tres propiedades, que representan los diferentes tipos d > **Nota:** **Agradecimientos** > -> Esta API se basa en la API [`chrome.storage`](https://developer.chrome.com/extensions/storage) de Chromium. Esta documentación se deriva de [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) en el código de Chromium. +> Esta API se basa en la API [`chrome.storage`](https://developer.chrome.com/docs/extensions/reference/api/storage) de Chromium. Esta documentación se deriva de [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) en el código de Chromium. > > Los datos de compatibilidad de Microsoft Edge son proporcionados por Microsoft Corporation y se incluyen aquí bajo la Licencia de Estados Unidos Creative Commons Attribution 3.0. diff --git a/files/es/mozilla/add-ons/webextensions/api/storage/local/index.md b/files/es/mozilla/add-ons/webextensions/api/storage/local/index.md index 4f8a0e65b44a18..66bedab7ed52d6 100644 --- a/files/es/mozilla/add-ons/webextensions/api/storage/local/index.md +++ b/files/es/mozilla/add-ons/webextensions/api/storage/local/index.md @@ -41,7 +41,7 @@ El objeto local implementa los métodos definidos en el{{WebExtAPIRef("storage.S > **Nota:** **Agradecimientos** > -> Esta API se basa en la API [`chrome.storage`](https://developer.chrome.com/extensions/storage#property-local) de Chromium. Esta documentación se deriva de [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) en el código de Chromium. +> Esta API se basa en la API [`chrome.storage`](https://developer.chrome.com/docs/extensions/reference/api/storage#property-local) de Chromium. Esta documentación se deriva de [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) en el código de Chromium. > > Los datos de compatibilidad de Microsoft Edge son proporcionados por Microsoft Corporation y se incluyen aquí bajo la Licencia de Estados Unidos Creative Commons Attribution 3.0. diff --git a/files/es/mozilla/add-ons/webextensions/api/storage/sync/index.md b/files/es/mozilla/add-ons/webextensions/api/storage/sync/index.md index 85a395760d9fc7..31a097f5010217 100644 --- a/files/es/mozilla/add-ons/webextensions/api/storage/sync/index.md +++ b/files/es/mozilla/add-ons/webextensions/api/storage/sync/index.md @@ -36,7 +36,7 @@ El objeto de sincronización implementa los métodos definidos en el {{WebExtAPI > **Nota:** **Agradecimientos** > -> Esta API está basada en la API de Chromium's [`chrome.storage`](https://developer.chrome.com/extensions/storage#property-sync) API. Esta documentación se deriva de [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) en el código de Chromium. +> Esta API está basada en la API de Chromium's [`chrome.storage`](https://developer.chrome.com/docs/extensions/reference/api/storage#property-sync) API. Esta documentación se deriva de [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) en el código de Chromium. > > Los datos de compatibilidad de Microsoft Edge son proporcionados por Microsoft Corporation y se incluyen aquí bajo la Licencia de Estados Unidos Creative Commons Attribution 3.0. diff --git a/files/es/mozilla/add-ons/webextensions/chrome_incompatibilities/index.md b/files/es/mozilla/add-ons/webextensions/chrome_incompatibilities/index.md index 07e44cbcda6c54..7e5aaa27d4325b 100644 --- a/files/es/mozilla/add-ons/webextensions/chrome_incompatibilities/index.md +++ b/files/es/mozilla/add-ons/webextensions/chrome_incompatibilities/index.md @@ -213,14 +213,14 @@ Firefox doesn't yet support the `callback` argument to `executeScript()`. We don't yet support the following APIs, but plan to, soon: -- [commands](https://developer.chrome.com/extensions/commands) +- [commands](https://developer.chrome.com/docs/extensions/reference/api/commands) - [Devtools (mostly panels)](https://developer.chrome.com/extensions/devtools) -- [downloads](https://developer.chrome.com/extensions/downloads) -- [history](https://developer.chrome.com/extensions/history) -- [idle](https://developer.chrome.com/extensions/idle) -- [omnibox](https://developer.chrome.com/extensions/omnibox) -- [permissions](https://developer.chrome.com/extensions/permissions) -- [Native messaging (runtime.connectNative)](https://developer.chrome.com/extensions/runtime#method-connectNative) +- [downloads](https://developer.chrome.com/docs/extensions/reference/api/downloads) +- [history](https://developer.chrome.com/docs/extensions/reference/api/history) +- [idle](https://developer.chrome.com/docs/extensions/reference/api/idle) +- [omnibox](https://developer.chrome.com/docs/extensions/reference/api/omnibox) +- [permissions](https://developer.chrome.com/docs/extensions/reference/api/permissions) +- [Native messaging (runtime.connectNative)](https://developer.chrome.com/docs/extensions/reference/api/runtime#method-connectNative) ### CSS diff --git a/files/es/mozilla/add-ons/webextensions/index.md b/files/es/mozilla/add-ons/webextensions/index.md index 34b89d4d55f218..c61b85af201abe 100644 --- a/files/es/mozilla/add-ons/webextensions/index.md +++ b/files/es/mozilla/add-ons/webextensions/index.md @@ -5,7 +5,7 @@ slug: Mozilla/Add-ons/WebExtensions {{AddonSidebar}} -Las extensiones pueden extender y modificar la capacidad de un navegador. Las extensiones para Firefox son construidas utilizando las APIs de WebExtension, un sistema para el desarrollo de extensiones multi-navegador. En gran medida, el sistema es compatible con la [API de extensión](https://developer.chrome.com/extensions) soportada por Google Chrome, Opera y el [borrador del grupo de la comunidad del W3C](https://browserext.github.io/browserext/). +Las extensiones pueden extender y modificar la capacidad de un navegador. Las extensiones para Firefox son construidas utilizando las APIs de WebExtension, un sistema para el desarrollo de extensiones multi-navegador. En gran medida, el sistema es compatible con la [API de extensión](https://developer.chrome.com/docs/extensions) soportada por Google Chrome, Opera y el [borrador del grupo de la comunidad del W3C](https://browserext.github.io/browserext/). Las extensiones escritas para estos navegadores se ejecutarán en la mayoría de los casos en Firefox o [Microsoft Edge](https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/) con sólo [unos pocos cambios](/es/Add-ons/WebExtensions/Porting_from_Google_Chrome). La API también es totalmente compatible con [multiprocesos de Firefox](/es/Firefox/Multiprocess_Firefox). diff --git a/files/es/mozilla/add-ons/webextensions/what_are_webextensions/index.md b/files/es/mozilla/add-ons/webextensions/what_are_webextensions/index.md index 6481621a896f67..b157b8f2afe40d 100644 --- a/files/es/mozilla/add-ons/webextensions/what_are_webextensions/index.md +++ b/files/es/mozilla/add-ons/webextensions/what_are_webextensions/index.md @@ -43,7 +43,7 @@ Ejemplos: [Asteroids in Popup](https://addons.mozilla.org/en-US/firefox/addon/as **Ejemplos:** [Web Developer](https://addons.mozilla.org/en-US/firefox/addon/web-developer/), [Web React Developer Tools](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/), and [aXe Developer Tools](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/) -Las extensiones para Firefox se construyen utilizando las [APIs de WebExtensions](/es/docs/Mozilla/Add-ons/WebExtensions), un sistema multi-navegador para desarrollar extensiones. En gran medida, la API es compatible con la [extension API](https://developer.chrome.com/extensions) soportada por Google Chrome y Opera. Extensiones escritas para estos navegadores en la mayoría de los casos se ejecutan en Firefox o Microsoft Edge con sólo unos pocos [cambios](/es/docs/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension). La API es también totalmente compatible con los [multiprocesos de Firefox](/es/Firefox/Multiprocess_Firefox). +Las extensiones para Firefox se construyen utilizando las [APIs de WebExtensions](/es/docs/Mozilla/Add-ons/WebExtensions), un sistema multi-navegador para desarrollar extensiones. En gran medida, la API es compatible con la [extension API](https://developer.chrome.com/docs/extensions) soportada por Google Chrome y Opera. Extensiones escritas para estos navegadores en la mayoría de los casos se ejecutan en Firefox o Microsoft Edge con sólo unos pocos [cambios](/es/docs/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension). La API es también totalmente compatible con los [multiprocesos de Firefox](/es/Firefox/Multiprocess_Firefox). Si tiene ideas o preguntas, o necesita ayuda para migrar un Add-on heredado a las APIs de WebExtensions, puede comunicarse con nosotros en el [Discourse de Add-ons](https://discourse.mozilla.org/c/add-ons/35) o en [#extdev](irc://irc.mozilla.org/extdev) en [IRC](https://wiki.mozilla.org/IRC). diff --git a/files/es/web/api/console/assert_static/index.md b/files/es/web/api/console/assert_static/index.md index 956f9f92f7a4ed..2fb3afb7f71e70 100644 --- a/files/es/web/api/console/assert_static/index.md +++ b/files/es/web/api/console/assert_static/index.md @@ -46,4 +46,4 @@ Para más detalles ver [Salida de texto a la consola](/es/docs/Web/API/console#O - [Opera Dragonfly documentación: Consola](http://www.opera.com/dragonfly/documentation/console/) - [MSDN: Usando F12 Herramientas de Consola para ver Errores y Estados](http://msdn.microsoft.com/library/gg589530) -- [Herramientas de Desarrollo de Chrome: Usando la Consola](https://developer.chrome.com/devtools/docs/console#assertions) +- [Herramientas de Desarrollo de Chrome: Usando la Consola](https://developer.chrome.com/docs/devtools/console/) diff --git a/files/es/web/api/console/index.md b/files/es/web/api/console/index.md index e0de3e2a958ec0..6a3391b62bf4f7 100644 --- a/files/es/web/api/console/index.md +++ b/files/es/web/api/console/index.md @@ -60,7 +60,7 @@ Esta página documenta los [Métodos](#métodos) disponibles en el objeto `conso - {{domxref("console.timeLog()")}} - : Muestra el valor del [temporizador](#temporizadores) especificado en la consola. - {{domxref("console.timeStamp()")}} {{Non-standard_inline}} - - : Agrega un marcador a las herramientas del navegador [Chrome](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/) o [Firefox](https://profiler.firefox.com/docs/#/./guide-ui-tour-timeline). + - : Agrega un marcador a las herramientas del navegador [Chrome](https://developer.chrome.com/docs/devtools/performance/reference) o [Firefox](https://profiler.firefox.com/docs/#/./guide-ui-tour-timeline). - {{domxref("console.trace()")}} - : Muestra una [traza de pila](#trazas_de_pila). - {{domxref("console.warn()")}} diff --git a/files/es/web/api/navigationpreloadmanager/index.md b/files/es/web/api/navigationpreloadmanager/index.md index 6c3ed3b84392c3..5e21e7f0d9c5c2 100644 --- a/files/es/web/api/navigationpreloadmanager/index.md +++ b/files/es/web/api/navigationpreloadmanager/index.md @@ -41,7 +41,7 @@ Esto se podría usar, por ejemplo, para reducir los datos enviados a solo una pa ## Ejemplos -Los ejemplos aquí son de [Acelera el _Service Worker_ con precargas de navegación](https://developer.chrome.com/blog/navigation-preload/) (developer.chrome.com). +Los ejemplos aquí son de [Acelera el _Service Worker_ con precargas de navegación](https://web.dev/navigation-preload/?hl=es-419) (developer.chrome.com). ### Detectar características y habilitar precarga de navegación @@ -114,7 +114,7 @@ navigator.serviceWorker.ready }); ``` -[Acelera el _Service Worker_ con precargas de navegación > Respuestas personalizadas para precargas](https://developer.chrome.com/blog/navigation-preload/) proporciona un ejemplo más completo de un sitio donde se construye la respuesta para una página web de artículo desde un encabezado y pie de página en caché, de modo que solo devuelva el contenido del artículo para una precarga. +[Acelera el _Service Worker_ con precargas de navegación > Respuestas personalizadas para precargas](https://web.dev/navigation-preload/?hl=es-419) proporciona un ejemplo más completo de un sitio donde se construye la respuesta para una página web de artículo desde un encabezado y pie de página en caché, de modo que solo devuelva el contenido del artículo para una precarga. ### Obtener el estado @@ -142,4 +142,4 @@ navigator.serviceWorker.ready ## Véase también -- [Acelera el _Service Worker_ con precargas de navegación](https://developer.chrome.com/blog/navigation-preload/) (developer.chrome.com) +- [Acelera el _Service Worker_ con precargas de navegación](https://web.dev/navigation-preload/?hl=es-419) (developer.chrome.com) diff --git a/files/es/web/javascript/inheritance_and_the_prototype_chain/index.md b/files/es/web/javascript/inheritance_and_the_prototype_chain/index.md index 5ea1bcb2363dbe..e69960bdbffb63 100644 --- a/files/es/web/javascript/inheritance_and_the_prototype_chain/index.md +++ b/files/es/web/javascript/inheritance_and_the_prototype_chain/index.md @@ -252,7 +252,7 @@ Por ejemplo, los "métodos de array" como [`map()`](/es/docs/Web/JavaScript/Refe > [!WARNING] > Hay un error que solía ser frecuente: extender `Object.prototype` o uno de los otros prototipos integrados. Un ejemplo de esta característica errónea es definir `Array.prototype.myMethod = function () {...}` y luego usar `myMethod` en todas las instancias de matriz. > -> Esta característica errónea se llama _parche de mono_/_monkey patching_. Hacer parche de mono/monkey patching arriesga la compatibilidad futura, porque si el lenguaje agrega este método en el futuro pero con una firma diferente, su código se romperá. Ha provocado incidentes como el [SmooshGate](https://developer.chrome.com/blog/smooshgate?hl=es-419), y puede ser una gran molestia para que el lenguaje avance ya que JavaScript intenta "no romper la web". +> Esta característica errónea se llama _parche de mono_/_monkey patching_. Hacer parche de mono/monkey patching arriesga la compatibilidad futura, porque si el lenguaje agrega este método en el futuro pero con una firma diferente, su código se romperá. Ha provocado incidentes como el [SmooshGate](https://developer.chrome.com/blog/smooshgate), y puede ser una gran molestia para que el lenguaje avance ya que JavaScript intenta "no romper la web". > > La **única** buena razón para extender un prototipo integrado es respaldar las características de los motores JavaScript más nuevos, como `Array.prototype.forEach`. From b2dc4706b4fb501102a05f94c11244aa1475a317 Mon Sep 17 00:00:00 2001 From: Manu de Frutos Vila Date: Tue, 24 Sep 2024 18:52:51 +0200 Subject: [PATCH 168/365] Update arial-label with aria-labelledby links (#23754) * Update arial-label with aria-labelledby links --- .../es/web/accessibility/aria/attributes/aria-label/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/es/web/accessibility/aria/attributes/aria-label/index.md b/files/es/web/accessibility/aria/attributes/aria-label/index.md index 424f5720700e72..e1c7e9a9bd7a93 100644 --- a/files/es/web/accessibility/aria/attributes/aria-label/index.md +++ b/files/es/web/accessibility/aria/attributes/aria-label/index.md @@ -5,7 +5,7 @@ slug: Web/Accessibility/ARIA/Attributes/aria-label {{AccessibilitySidebar}} -El atributo [`aria-label`](https://www.w3.org/TR/wai-aria/#aria-label) se utiliza para definir una cadena que etiqueta el elemento actual. Úselo en los casos en que no haya una etiqueta de texto visible en pantalla. Si hay texto visible etiquetando el elemento, utilice [aria-labelledby](/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) en su lugar. +El atributo [`aria-label`](https://www.w3.org/TR/wai-aria/#aria-label) se utiliza para definir una cadena que etiqueta el elemento actual. Úselo en los casos en que no haya una etiqueta de texto visible en pantalla. Si hay texto visible etiquetando el elemento, utilice [aria-labelledby](/es/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) en su lugar. Este atributo puede ser utilizado con cualquier elemento HTML típico; no se limita a los elementos que tienen un papel ARIA asignado. @@ -39,7 +39,7 @@ Todos los elementos del DOM ### Técnicas ARIA relacionadas -- [Usando el atributo aria-labelledby](/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) +- [Usando el atributo aria-labelledby](/es/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) ### Compatibilidad From cf4e218a9794ed5f406bb244a8291d9fe8d6c52c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8A=B1=E5=BC=80=E8=8A=B1=E8=90=BD?= Date: Wed, 25 Sep 2024 10:05:29 +0800 Subject: [PATCH 169/365] chore(zh-cn): fix broken links and clean up the translation (#23766) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Allo --- files/zh-cn/web/html/element/form/index.md | 150 +++++++++++---------- 1 file changed, 82 insertions(+), 68 deletions(-) diff --git a/files/zh-cn/web/html/element/form/index.md b/files/zh-cn/web/html/element/form/index.md index ebf4effa48b3f7..27a966af6e40e0 100644 --- a/files/zh-cn/web/html/element/form/index.md +++ b/files/zh-cn/web/html/element/form/index.md @@ -11,42 +11,9 @@ slug: Web/HTML/Element/form 可以用 {{cssxref(':valid')}} 和 {{cssxref(':invalid')}} CSS 伪类来设置 `
` 元素的样式，此时样式的表现取决于表单中的 {{domxref("HTMLFormElement.elements", "elements")}} 是否有效。 -
目标： - 展示如何在本地建立一个 Selenium 测试环境并运行测试，以及如何将其与 LambdaTest、Sauce Labs 和 BrowserStack 等工具集成。 + 展示如何在本地建立 Selenium 测试环境并运行测试，以及如何将其与 LambdaTest、Sauce Labs 和 BrowserStack 等工具集成。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
内容类别Flow content, palpable content
可包含内容Flow content, but not containing <form> elements
标签省略不允许，开始标签和结束标签都不能省略。
允许的父级元素可以是 HTML 的任何标签
Implicit ARIA roleform if the form has an accessible name, otherwise no corresponding role
Permitted ARIA rolessearch, group, presentation
DOM 接口{{domxref("HTMLFormElement")}}
- ## 属性 -此元素拥有 [全局属性](/zh-CN/docs/HTML/Global_attributes)。 +此元素拥有[全局属性](/zh-CN/docs/Web/HTML/Global_attributes)。 - `accept`{{Deprecated_Inline}} @@ -70,13 +37,13 @@ slug: Web/HTML/Element/form - : 用于指示 input 元素是否能够拥有一个默认值，此默认值是由浏览器自动补全的。此设定可以被属于此表单的子元素的 `autocomplete` 属性覆盖。可能的值有： - - `off`：浏览器可能不会自动补全条目（在疑似登录表单中，浏览器倾向于忽略该值，而提供密码自动填充功能，参见 [自动填充属性和登录](/zh-CN/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#禁用自动填充)） + - `off`：浏览器可能不会自动补全条目（在疑似登录表单中，浏览器倾向于忽略该值，而提供密码自动填充功能，参见[自动填充属性和登录](/zh-CN/docs/Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion#autocomplete_属性和登录字段)） - `on`：浏览器可自动补全条目 - `name` - - : 表单的名称。HTML 4 中不推荐（应使用 `id`）。在 HTML 5 中，该值必须是所有表单中独一无二的，而且不能是空字符串。 -- `rel` - - : 根据 value 创建一个超链接或 Creates a hyperlink or annotation depending on the value, see the [`rel`](/zh-CN/docs/Web/HTML/Attributes/rel) attribute for details. + - : 表单的名称。该值不能是空字符串，而且在其所在的表单集合中的所有表单（`form`）元素之中必须是独一无二的（如果有的话）。 +- [`rel`](/zh-CN/docs/Web/HTML/Attributes/rel) + - : 控制注释和表单创建的链接类型。注释包括 [`external`](/zh-CN/docs/Web/HTML/Attributes/rel#external)、[`nofollow`](/zh-CN/docs/Web/HTML/Attributes/rel#nofollow)、[`opener`](/zh-CN/docs/Web/HTML/Attributes/rel#opener)、[`noopener`](/zh-CN/docs/Web/HTML/Attributes/rel#noopener) 和 [`noreferrer`](/zh-CN/docs/Web/HTML/Attributes/rel#noreferrer)。链接类型包括 [`help`](/zh-CN/docs/Web/HTML/Attributes/rel#help)、[`prev`](/zh-CN/docs/Web/HTML/Attributes/rel#prev)、[`next`](/zh-CN/docs/Web/HTML/Attributes/rel#next)、[`search`](/zh-CN/docs/Web/HTML/Attributes/rel#search) 和 [`license`](/zh-CN/docs/Web/HTML/Attributes/rel#license)。[`rel`](/zh-CN/docs/Web/HTML/Attributes/rel) 值是这些枚举值的空格分隔列表。 ### 关于提交表单的属性 @@ -86,7 +53,7 @@ slug: Web/HTML/Element/form - : 处理表单提交的 URL。这个值可被 {{HTMLElement("button")}}、[``](/zh-CN/docs/Web/HTML/Element/input/submit) 或 [``](/zh-CN/docs/Web/HTML/Element/input/image) 元素上的 [`formaction`](/zh-CN/docs/Web/HTML/Element/button#formaction) 属性覆盖。 - `enctype` - - : 当 `method` 属性值为 `post` 时，`enctype` 就是将表单的内容提交给服务器的 [MIME 类型](http://en.wikipedia.org/wiki/Mime_type) 。可能的取值有： + - : 当 `method` 属性值为 `post` 时，`enctype` 就是将表单的内容提交给服务器的 [MIME 类型](https://zh.wikipedia.org/wiki/互联网媒体类型)。可能的取值有： - `application/x-www-form-urlencoded`：未指定属性时的默认值。 - `multipart/form-data`：当表单包含 `type=file` 的 {{HTMLElement("input")}} 元素时使用此值。 @@ -94,56 +61,103 @@ slug: Web/HTML/Element/form - `method` - - : 浏览器使用这种 [HTTP](/zh-CN/docs/HTTP) 方式来提交 表单。可能的值有： + - : 浏览器使用这种 [HTTP](/zh-CN/docs/Web/HTTP) 方法来提交 表单。可能的值有： - - `post`：指的是 HTTP [POST 方法](http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5)；表单数据会包含在表单体内然后发送给服务器。 - - `get`：指的是 HTTP [GET 方法](http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3)；表单数据会附加在 `action` 属性的 URL 中，并以 '?' 作为分隔符，[没有副作用](/zh-CN/docs/Glossary/Idempotent) 时使用这个方法。 + - `post`：{{HTTPMethod("POST")}} 方法；表单数据会包含在表单体内然后发送给服务器。 + - `get`（默认）：{{HTTPMethod("GET")}} 方法；表单数据会附加在 `action` 属性的 URL 中，并以 `?` 作为分隔符，[没有副作用](/zh-CN/docs/Glossary/Idempotent)时使用这个方法。 - `dialog`：如果表单在 {{HTMLElement("dialog")}} 元素中，提交时关闭对话框。此值可以被 {{HTMLElement("button")}}、[``](/zh-CN/docs/Web/HTML/Element/input/submit) 或 [``](/zh-CN/docs/Web/HTML/Element/input/image) 元素中的 [`formmethod`](/zh-CN/docs/Web/HTML/Element/button#formmethod) 属性覆盖。 - `novalidate` - : 此布尔值属性表示提交表单时不需要验证表单。如果没有声明该属性（因此表单需要通过验证）。该属性可以被表单中的 {{HTMLElement("button")}}、[``](/zh-CN/docs/Web/HTML/Element/input/submit) 或 [``](/zh-CN/docs/Web/HTML/Element/input/image) 元素中的 [`formnovalidate`](/zh-CN/docs/Web/HTML/Element/button#formnovalidate) 属性覆盖。 - `target` - - : 表示在提交表单之后，在哪里显示响应信息。在 HTML 4 中，这是一个 frame 的名字/关键字对。在 HTML5 里，这是一个*浏览上下文* 的名字/关键字（如标签页、窗口或 iframe）。下述关键字有特别含义： + - : 表示在提交表单之后，在哪里显示响应信息。这是一个*浏览上下文*的名字/关键字（如标签页、窗口或 iframe）。下述关键字有特别含义： - - `_self`：默认值。在相同浏览上下文中加载。 + - `_self`（默认）：在相同浏览上下文中加载。 - `_blank`：在新的未命名的浏览上下文中加载。 - - `_parent`：在当前上下文的父级浏览上下文中加载，如果没有父级，则与 \_self 表现一致。 - - `_top`：在最顶级的浏览上下文中（即当前上下文的一个没有父级的祖先浏览上下文），如果没有父级，则与 \_self 表现一致。此值可以被 {{HTMLElement("button")}}、[``](/zh-CN/docs/Web/HTML/Element/input/submit) 或 [``](/zh-CN/docs/Web/HTML/Element/input/image) 元素中的 [`formtarget`](/zh-CN/docs/Web/HTML/Element/button#formtarget) 属性覆盖。 + - `_parent`：在当前上下文的父级浏览上下文中加载，如果没有父级，则与 `_self` 表现一致。 + - `_top`：在最顶级的浏览上下文中（即当前上下文的一个没有父级的祖先浏览上下文），如果没有父级，则与 `_self` 表现一致。此值可以被 {{HTMLElement("button")}}、[``](/zh-CN/docs/Web/HTML/Element/input/submit) 或 [``](/zh-CN/docs/Web/HTML/Element/input/image) 元素中的 [`formtarget`](/zh-CN/docs/Web/HTML/Element/button#formtarget) 属性覆盖。 ## 示例 ### HTML ```html - - - - + + + + - +
- - + +
- +
- Title - + 是否同意该条款？ + +
``` -{{ EmbedLiveSample('示例', '100%', 110) }} +{{ EmbedLiveSample('示例') }} + +## 技术概要 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ 内容分类 + + 流式内容、可感知内容 +
允许的内容 + 流式内容，但不能包含 <form> 元素 +
标签省略不允许，开始标签和结束标签都不能省略。
允许的父元素 + 任何接受流式内容的元素 +
隐含的 ARIA 角色 + form +
允许的 ARIA 角色 + search、none 或 presentation +
DOM 接口{{domxref("HTMLFormElement")}}
## 规范 @@ -155,8 +169,8 @@ slug: Web/HTML/Element/form ## 参见 -- [HTML 表单指南](/zh-CN/docs/Web/Guide/HTML/Forms) -- 还有其他的一些元素也用于创建表单：{{HTMLElement("button")}}、{{HTMLElement("datalist")}}、{{HTMLElement("fieldset")}}、{{HTMLElement("input")}}、{{HTMLElement("label")}}、{{HTMLElement("legend")}}、{{HTMLElement("meter")}}、{{HTMLElement("optgroup")}}、{{HTMLElement("option")}}、{{HTMLElement("output")}}、{{HTMLElement("progress")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}} -- Getting a list of the elements in the form: {{domxref("HTMLFormElement.elements")}} -- [ARIA: Form role](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Form_Role) -- [ARIA: Search role](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Search_role) +- [HTML 表单指南](/zh-CN/docs/Learn/Forms) +- 还有其他的一些元素也用于创建表单：{{HTMLElement("button")}}、{{HTMLElement("datalist")}}、{{HTMLElement("fieldset")}}、{{HTMLElement("input")}}、{{HTMLElement("label")}}、{{HTMLElement("legend")}}、{{HTMLElement("meter")}}、{{HTMLElement("optgroup")}}、{{HTMLElement("option")}}、{{HTMLElement("output")}}、{{HTMLElement("progress")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}}。 +- 获取表单中的元素列表：{{domxref("HTMLFormElement.elements")}} +- [ARIA：Form 角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Form_Role) +- [ARIA：Search 角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Search_role) From e728a61f15c05465a2fe1b5a3c94ab948c367f9c Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Wed, 25 Sep 2024 04:07:41 +0200 Subject: [PATCH 170/365] Markdownlint auto-cleanup for zh-cn (#23771) Co-authored-by: A1lo --- .../your_own_automation_environment/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md index 1f83988be50461..2ab7dc0dd3048a 100644 --- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md +++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md @@ -59,7 +59,7 @@ l10n: 接下来，你需要下载相应的驱动，使 WebDriver 能控制你需要测试的浏览器。在 [selenium-webdriver](https://www.npmjs.com/package/selenium-webdriver) 页面（参见第一部分的表格）查看如何下载。显然，有些浏览器是操作系统特定的，我们将坚持使用 Firefox 和 Chrome，因为它们可以在所有主要的操作系统上使用。 -1. 下载最新版本的 [GeckoDriver](https://github.com/mozilla/geckodriver/releases/)（用于 Firefox）和 [ChromeDriver](https://developer.chrome.com/docs/chromedriver/downloads?hl=zh-cn) 驱动。 +1. 下载最新版本的 [GeckoDriver](https://github.com/mozilla/geckodriver/releases/)（用于 Firefox）和 [ChromeDriver](https://developer.chrome.google.cn/docs/chromedriver/downloads) 驱动。 2. 将它们解压到一个容易访问的地方，比如你的主用户目录的根目录。 3. 将 `chromedriver` 和 `geckodriver` 驱动的目录添加到你的系统 `PATH` 变量中，这应该是从你的硬盘根目录开始的一个绝对路径。举个例子，如果我们使用的是 macOS 机器，用户名为 bob，并且将驱动放在用户的根目录下，那么路径就是 `/Users/bob`。 From 607d0c33bba6bc09618859ae2881a5a7a75af51b Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Wed, 25 Sep 2024 10:20:55 +0800 Subject: [PATCH 171/365] [zh-CN]: add translation for Document Picture-in-Picture API (#23735) Co-authored-by: A1lo --- .../document_picture-in-picture_api/index.md | 71 +++++++++++++++++++ 1 file changed, 71 insertions(+) create mode 100644 files/zh-cn/web/api/document_picture-in-picture_api/index.md diff --git a/files/zh-cn/web/api/document_picture-in-picture_api/index.md b/files/zh-cn/web/api/document_picture-in-picture_api/index.md new file mode 100644 index 00000000000000..f5a4a9d27f6990 --- /dev/null +++ b/files/zh-cn/web/api/document_picture-in-picture_api/index.md @@ -0,0 +1,71 @@ +--- +title: Document Picture-in-Picture API +slug: Web/API/Document_Picture-in-Picture_API +l10n: + sourceCommit: ac80d4deda2b072a4fc7e866b5edb14a91226319 +--- + +{{SeeCompatTable}}{{DefaultAPISidebar("Document Picture-in-Picture API")}}{{securecontext_header}} + +**Document Picture-in-Picture API** 可以打开一个始终在顶层的窗口，该窗口可以填充任意 HTML 内容——例如带有自定义控件的视频或一组显示视频会议参与者的串流。它扩展了早期的 [`