From b999b27e3bf12993cc31c0d90258abe121ce9171 Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Thu, 4 Jul 2024 23:41:29 +0200 Subject: [PATCH 001/698] [pt-br] sync translated content (#22058) pt-br: sync translated content --- files/pt-br/_redirects.txt | 8 +++- files/pt-br/_wikihistory.json | 44 +++++++++---------- .../web/api/fetch_api/using_fetch}/index.md | 3 +- .../index.md | 3 +- .../building_blocks/event_bubbling}/index.md | 3 +- .../css/-webkit-overflow-scrolling/index.md | 3 +- 6 files changed, 36 insertions(+), 28 deletions(-) rename files/pt-br/{web/api/fetch_api/basic_concepts => conflicting/web/api/fetch_api/using_fetch}/index.md (97%) rename files/pt-br/{web/api/fetch_api/cross-global_fetch_usage => conflicting/web/api/fetch_api/using_fetch_76a0f6f382ec36bfa1bf0b4e0ef87c0c}/index.md (92%) rename files/pt-br/{web/api/event/comparison_of_event_targets => learn/javascript/building_blocks/event_bubbling}/index.md (98%) rename files/pt-br/{ => orphaned}/web/css/-webkit-overflow-scrolling/index.md (93%) diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt index 515cc4eb7887c0..b2cc18090a3363 100644 --- a/files/pt-br/_redirects.txt +++ b/files/pt-br/_redirects.txt @@ -569,10 +569,13 @@ /pt-BR/docs/Web/API/Element.removeAttribute /pt-BR/docs/Web/API/Element/removeAttribute /pt-BR/docs/Web/API/Element/accessKey /pt-BR/docs/Web/API/HTMLElement/accessKey /pt-BR/docs/Web/API/Element/addEventListener /pt-BR/docs/Web/API/EventTarget/addEventListener -/pt-BR/docs/Web/API/Event/Comparativo_entre_Event_Targets /pt-BR/docs/Web/API/Event/Comparison_of_Event_Targets +/pt-BR/docs/Web/API/Event/Comparativo_entre_Event_Targets /pt-BR/docs/Learn/JavaScript/Building_blocks/Event_bubbling +/pt-BR/docs/Web/API/Event/Comparison_of_Event_Targets /pt-BR/docs/Learn/JavaScript/Building_blocks/Event_bubbling /pt-BR/docs/Web/API/EventListener /pt-BR/docs/conflicting/Web/API/EventTarget/addEventListener /pt-BR/docs/Web/API/EventSource/onerror /pt-BR/docs/Web/API/EventSource/error_event -/pt-BR/docs/Web/API/Fetch_API/Uso_de_busca_Cross-global /pt-BR/docs/Web/API/Fetch_API/Cross-global_fetch_usage +/pt-BR/docs/Web/API/Fetch_API/Basic_concepts /pt-BR/docs/conflicting/Web/API/Fetch_API/Using_Fetch +/pt-BR/docs/Web/API/Fetch_API/Cross-global_fetch_usage /pt-BR/docs/conflicting/Web/API/Fetch_API/Using_Fetch_76a0f6f382ec36bfa1bf0b4e0ef87c0c +/pt-BR/docs/Web/API/Fetch_API/Uso_de_busca_Cross-global /pt-BR/docs/conflicting/Web/API/Fetch_API/Using_Fetch_76a0f6f382ec36bfa1bf0b4e0ef87c0c /pt-BR/docs/Web/API/FileReader/onload /pt-BR/docs/Web/API/FileReader/load_event /pt-BR/docs/Web/API/GlobalEventHandlers/onabort /pt-BR/docs/conflicting/Web/API/HTMLMediaElement/abort_event /pt-BR/docs/Web/API/GlobalEventHandlers/onblur /pt-BR/docs/Web/API/Window/blur_event @@ -681,6 +684,7 @@ /pt-BR/docs/Web/Acessibilidade/Entendendo_WCAG /pt-BR/docs/Web/Accessibility/Understanding_WCAG /pt-BR/docs/Web/Apps/Progressive/Introdução /pt-BR/docs/Web/Progressive_web_apps/Tutorials/js13kGames /pt-BR/docs/Web/CSS/-moz-box-ordinal-group /pt-BR/docs/Web/CSS/box-ordinal-group +/pt-BR/docs/Web/CSS/-webkit-overflow-scrolling /pt-BR/docs/orphaned/Web/CSS/-webkit-overflow-scrolling /pt-BR/docs/Web/CSS/CSS_Animations/Usando_animações_CSS /pt-BR/docs/Web/CSS/CSS_animations/Using_CSS_animations /pt-BR/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator /pt-BR/docs/Web/CSS/CSS_backgrounds_and_borders/Border-image_generator /pt-BR/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator /pt-BR/docs/Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator diff --git a/files/pt-br/_wikihistory.json b/files/pt-br/_wikihistory.json index 3292765ce649ad..5b43d7cee4f17d 100644 --- a/files/pt-br/_wikihistory.json +++ b/files/pt-br/_wikihistory.json @@ -1420,6 +1420,10 @@ "modified": "2020-07-20T16:29:20.448Z", "contributors": ["eziotristao", "gabriel_cadu", "artphil", "greysonf"] }, + "Learn/JavaScript/Building_blocks/Event_bubbling": { + "modified": "2019-11-03T21:25:56.066Z", + "contributors": ["rayonnunes"] + }, "Learn/JavaScript/Building_blocks/Events": { "modified": "2020-07-16T22:31:39.504Z", "contributors": [ @@ -2991,10 +2995,6 @@ "modified": "2019-03-23T23:01:39.950Z", "contributors": ["ralfting", "gregori", "juliocarneiro", "fscholz"] }, - "Web/API/Event/Comparison_of_Event_Targets": { - "modified": "2019-11-03T21:25:56.066Z", - "contributors": ["rayonnunes"] - }, "Web/API/Event/Event": { "modified": "2020-10-15T21:42:53.584Z", "contributors": ["fscholz", "juliocarneiro"] @@ -3088,14 +3088,6 @@ "modified": "2020-10-15T21:42:57.080Z", "contributors": ["mateusvelleda", "BrunoLucas", "fapbatista", "tcelestino"] }, - "Web/API/Fetch_API/Basic_concepts": { - "modified": "2020-02-17T13:24:31.887Z", - "contributors": ["diezan", "LincePotiguara"] - }, - "Web/API/Fetch_API/Cross-global_fetch_usage": { - "modified": "2019-03-18T20:48:56.041Z", - "contributors": ["matluz"] - }, "Web/API/Fetch_API/Using_Fetch": { "modified": "2020-10-15T21:51:06.123Z", "contributors": [ @@ -4330,16 +4322,6 @@ "modified": "2019-03-23T22:04:16.687Z", "contributors": ["filipetorres"] }, - "Web/CSS/-webkit-overflow-scrolling": { - "modified": "2019-03-23T22:49:05.514Z", - "contributors": [ - "teoli", - "otaviogui", - "rafaelcavalcante", - "fcard", - "alexanmtz" - ] - }, "Web/CSS/-webkit-text-security": { "modified": "2020-07-18T11:21:00.057Z", "contributors": ["alexalannunes"] @@ -10523,6 +10505,14 @@ "modified": "2019-03-23T22:20:33.890Z", "contributors": ["cezaraugusto"] }, + "conflicting/Web/API/Fetch_API/Using_Fetch": { + "modified": "2020-02-17T13:24:31.887Z", + "contributors": ["diezan", "LincePotiguara"] + }, + "conflicting/Web/API/Fetch_API/Using_Fetch_76a0f6f382ec36bfa1bf0b4e0ef87c0c": { + "modified": "2019-03-18T20:48:56.041Z", + "contributors": ["matluz"] + }, "conflicting/Web/API/Geolocation/getCurrentPosition": { "modified": "2019-03-23T22:47:40.708Z", "contributors": ["victorkurauchi"] @@ -11224,6 +11214,16 @@ "modified": "2020-10-15T22:12:51.330Z", "contributors": ["dekxside"] }, + "orphaned/Web/CSS/-webkit-overflow-scrolling": { + "modified": "2019-03-23T22:49:05.514Z", + "contributors": [ + "teoli", + "otaviogui", + "rafaelcavalcante", + "fcard", + "alexanmtz" + ] + }, "orphaned/Web/CSS/CSS_Animations/Detecting_CSS_animation_support": { "modified": "2019-03-18T21:31:28.635Z", "contributors": ["wbamberg", "eyglys"] diff --git a/files/pt-br/web/api/fetch_api/basic_concepts/index.md b/files/pt-br/conflicting/web/api/fetch_api/using_fetch/index.md similarity index 97% rename from files/pt-br/web/api/fetch_api/basic_concepts/index.md rename to files/pt-br/conflicting/web/api/fetch_api/using_fetch/index.md index 6f0c89efc12b1c..e3ef792145d2dd 100644 --- a/files/pt-br/web/api/fetch_api/basic_concepts/index.md +++ b/files/pt-br/conflicting/web/api/fetch_api/using_fetch/index.md @@ -1,6 +1,7 @@ --- title: Conceitos básicos de Fetch -slug: Web/API/Fetch_API/Basic_concepts +slug: conflicting/Web/API/Fetch_API/Using_Fetch +original_slug: Web/API/Fetch_API/Basic_concepts --- {{DefaultAPISidebar("Fetch API")}} diff --git a/files/pt-br/web/api/fetch_api/cross-global_fetch_usage/index.md b/files/pt-br/conflicting/web/api/fetch_api/using_fetch_76a0f6f382ec36bfa1bf0b4e0ef87c0c/index.md similarity index 92% rename from files/pt-br/web/api/fetch_api/cross-global_fetch_usage/index.md rename to files/pt-br/conflicting/web/api/fetch_api/using_fetch_76a0f6f382ec36bfa1bf0b4e0ef87c0c/index.md index b9fd2ded544584..ab1dd4e4f425dd 100644 --- a/files/pt-br/web/api/fetch_api/cross-global_fetch_usage/index.md +++ b/files/pt-br/conflicting/web/api/fetch_api/using_fetch_76a0f6f382ec36bfa1bf0b4e0ef87c0c/index.md @@ -1,6 +1,7 @@ --- title: Uso de busca Cross-global -slug: Web/API/Fetch_API/Cross-global_fetch_usage +slug: conflicting/Web/API/Fetch_API/Using_Fetch_76a0f6f382ec36bfa1bf0b4e0ef87c0c +original_slug: Web/API/Fetch_API/Cross-global_fetch_usage --- Este artigo explica um "edge case" (um problema ou situação que ocorre apenas em um parâmetro operacional extremo) que ocorre ao utilizar fetch (e potencialmente outras APIs que exibem o mesmo tipo de comportamento de recuperação de recurso). Quando uma busca de cross-origin envolvendo uma URL relativa é iniciada a partir de um {{htmlelement ("iframe")}}, a URL relativa costumava ser resolvida na localização global atual, em vez da localização do iframe. diff --git a/files/pt-br/web/api/event/comparison_of_event_targets/index.md b/files/pt-br/learn/javascript/building_blocks/event_bubbling/index.md similarity index 98% rename from files/pt-br/web/api/event/comparison_of_event_targets/index.md rename to files/pt-br/learn/javascript/building_blocks/event_bubbling/index.md index d3da61a431f0a4..e9fa9d3aa93881 100644 --- a/files/pt-br/web/api/event/comparison_of_event_targets/index.md +++ b/files/pt-br/learn/javascript/building_blocks/event_bubbling/index.md @@ -1,6 +1,7 @@ --- title: Comparativo entre Event Targets -slug: Web/API/Event/Comparison_of_Event_Targets +slug: Learn/JavaScript/Building_blocks/Event_bubbling +original_slug: Web/API/Event/Comparison_of_Event_Targets --- {{ ApiRef() }} diff --git a/files/pt-br/web/css/-webkit-overflow-scrolling/index.md b/files/pt-br/orphaned/web/css/-webkit-overflow-scrolling/index.md similarity index 93% rename from files/pt-br/web/css/-webkit-overflow-scrolling/index.md rename to files/pt-br/orphaned/web/css/-webkit-overflow-scrolling/index.md index 66418f2f2711ee..4ff3704aae4ce4 100644 --- a/files/pt-br/web/css/-webkit-overflow-scrolling/index.md +++ b/files/pt-br/orphaned/web/css/-webkit-overflow-scrolling/index.md @@ -1,6 +1,7 @@ --- title: "-webkit-overflow-scrolling" -slug: Web/CSS/-webkit-overflow-scrolling +slug: orphaned/Web/CSS/-webkit-overflow-scrolling +original_slug: Web/CSS/-webkit-overflow-scrolling --- {{CSSRef}}{{Non-standard_header}} From c424f8cff9c58e8310f84b5ea239e3bb9d343dc3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nat=C3=A3=20Vitor=20Vaguel=20Reis?= <59771238+NVPanda@users.noreply.github.com> Date: Thu, 4 Jul 2024 18:45:50 -0300 Subject: [PATCH 002/698] [pt-br] fix typos in `Learn/Server-side/Express_Nodejs/development_environment` (#21972) Update index.md I am reading the MDN documentation in Brazilian Portuguese, I noticed that there was an error in the text, the error was ESLING (referring to ESLINT), I changed it to ESLINT, if it was a wrong change, please correct me so I can continue reading the documentation and learning and bringing knowledge to my students and friends who study through this wonderful documentation. I love you all MDN S2 - Ass:. NVPanda --- .../express_nodejs/development_environment/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/pt-br/learn/server-side/express_nodejs/development_environment/index.md b/files/pt-br/learn/server-side/express_nodejs/development_environment/index.md index 3ff33878a9ef96..4bee0ed724dc8e 100644 --- a/files/pt-br/learn/server-side/express_nodejs/development_environment/index.md +++ b/files/pt-br/learn/server-side/express_nodejs/development_environment/index.md @@ -237,13 +237,13 @@ Os passos seguintes mostram como baixar pacotes via NPM, salvá-los nas dependê ### Desenvolvendo dependências -Se você utilizar uma dependência apenas durante o desenvolvimento da aplicação, é recomendado que você a salve como uma "development dependency". Dessa forma, o pacote não será utilizado no ambiente de produção. Por exemplo: caso utilizar o pacote [esling](http://eslint.org/) (JavaScript Linting), você faria a instalação via NPM da seguinte forma. +Se você utilizar uma dependência apenas durante o desenvolvimento da aplicação, é recomendado que você a salve como uma "development dependency". Dessa forma, o pacote não será utilizado no ambiente de produção. Por exemplo: caso utilizar o pacote [eslint](http://eslint.org/) (JavaScript Linting), você faria a instalação via NPM da seguinte forma. ```bash npm install eslint --save-dev ``` -Assim, a esling vai aparecer da seguinte forma na lista de dependências do **package.json**. +Assim, a eslint vai aparecer da seguinte forma na lista de dependências do **package.json**. ```json "devDependencies": { @@ -259,7 +259,7 @@ Além de definir e buscar dependências, você também pode nomear scripts dentr > **Nota:** Ferramentas de automação de tarefas como o [Gulp](http://gulpjs.com/) e o [Grunt](http://gruntjs.com/) também podem ser utilizados, além de outros pacotes externos. -Para definir o script que roda o _esling_, citado na seção acima, nós precisamos adicionar o seguinte bloco no nosso **package.json** (importante: sua aplicação precisa ter como source está na pasta /src/js): +Para definir o script que roda o _eslint_, citado na seção acima, nós precisamos adicionar o seguinte bloco no nosso **package.json** (importante: sua aplicação precisa ter como source está na pasta /src/js): ```json "scripts": { From fdbfe570134f8a58322f89e4216fedf938c54bcb Mon Sep 17 00:00:00 2001 From: Maksim Golubkov <83296524+BAD8OY@users.noreply.github.com> Date: Fri, 5 Jul 2024 01:01:34 +0300 Subject: [PATCH 003/698] [ru] fix typos in `Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals` (#22158) * [ru] use HTML table and improve translation in 'Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals' --------- Co-authored-by: Leonid Vinogradov --- .../html_text_fundamentals/index.md | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.md b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.md index 440c751f8db1c0..4c2ed253226d80 100644 --- a/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.md +++ b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.md @@ -7,13 +7,22 @@ slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals Одна из основных задач HTML — придавать тексту структуру и смысл, {{glossary("семантику")}}, так, чтобы браузер смог отобразить текст корректно. Эта статья покажет, как можно использовать {{glossary("HTML")}}, чтобы упорядочить текст на странице путём добавления заголовков и абзацев, выделения слов, создания списков и многое другое. -| Предварительные требования: | Базовое знакомство с HTML , описанное в [Начало работы с HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B). | -| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Задача: | Изучить базовые способы разметки текста путём добавлением на страницу структуры и значения — создать абзацы, заголовки, списки, акценты и цитаты.. | + + + + + + + + + + + +
Необходимые знания:Базовое знакомство с HTML , описанное в Начало работы с HTML.
Цель:Узнать, как разметить базовую страницу текста, чтобы придать ей смысл и структуру, включая абзацы, заголовки, списки, выделение и цитаты.
## Основы: Заголовки и абзацы / параграфы -Большинство структурированных текстов состоят из параграфов и заголовков, независимо от того, читаете ли вы рассказ, или газету, или учебник, журнал и т.д. +Большинство структурированных текстов состоят из параграфов и заголовков, независимо от того, читаете ли вы рассказ, газету, учебник или журнал. ![An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.](newspaper_small.jpg) From 3046d608f0c27893ef68513cde5aa617dd6c2347 Mon Sep 17 00:00:00 2001 From: Kim Sung Hyun Date: Fri, 5 Jul 2024 10:06:54 +0900 Subject: [PATCH 004/698] =?UTF-8?q?[ko]=20Symbol.unscopables=20=EB=AC=B8?= =?UTF-8?q?=EC=84=9C=20=EC=8B=A0=EA=B7=9C=20=EB=B2=88=EC=97=AD=20(#22078)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../symbol/unscopables/index.md | 165 ++++++++++++++++++ 1 file changed, 165 insertions(+) create mode 100644 files/ko/web/javascript/reference/global_objects/symbol/unscopables/index.md diff --git a/files/ko/web/javascript/reference/global_objects/symbol/unscopables/index.md b/files/ko/web/javascript/reference/global_objects/symbol/unscopables/index.md new file mode 100644 index 00000000000000..0c67143f9ec90f --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/symbol/unscopables/index.md @@ -0,0 +1,165 @@ +--- +title: Symbol.unscopables +slug: Web/JavaScript/Reference/Global_Objects/Symbol/unscopables +l10n: + sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a +--- + +{{JSRef}} + +`Symbol.unscopables` 정적 데이터 속성은 [잘 알려진 심볼](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol#잘_알려진_심볼) `@@unscopables`를 나타냅니다. {{jsxref("Statements/with", "with")}} 문은 범위 객체에서 이 심볼을 조회하여 `with` 환경 내에서 바인딩되지 않아야 하는 속성들의 집합을 포함하는 속성을 찾습니다. + +{{EmbedInteractiveExample("pages/js/symbol-unscopables.html")}} + +## 값 + +잘 알려진 심볼 `@@unscopables`. + +{{js_property_attributes(0, 0, 0)}} + +## 설명 + +`@@unscopables` 심볼(`Symbol.unscopables`를 통해 접근)은 [`with`](/ko/docs/Web/JavaScript/Reference/Statements/with) 환경 바인딩에서 특정 속성 이름이 렉시컬 변수로 노출되지 않도록 하기 위해 어떤 객체에도 정의될 수 있습니다. [엄격 모드](/ko/docs/Web/JavaScript/Reference/Strict_mode)를 사용할 때는 `with`문을 사용할 수 없기 때문에 이 심볼이 필요하지 않을 가능성이 큽니다. + +`@@unscopables` 객체의 속성을 `true`(또는 [참 같은 값](/ko/docs/Glossary/Truthy))로 설정하면 해당 속성이 `with` 범위 객체에서 '범위 지정 불가능'이 되어서 `with` 본문의 범위에 도입되지 않습니다. 속성을 `false`(또는 [거짓 같은 값](/ko/docs/Glossary/Falsy))로 설정하면 해당 속성이 '범위 지정 가능'이 되어 렉시컬 범위 변수로 나타나게 됩니다. + +`x`가 범위 지정 불가능인지 여부를 결정할 때는 `@@unscopables` 속성의 전체 프로토타입 체인에서 `x`라는 속성을 검색합니다. 이는 `@@unscopables`를 단순한 객체로 선언했을 경우 `Object.prototype`의 [`toString`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/toString) 등의 속성들 또한 범위 지정 불가능하게 되어서 이러한 속성들이 일반적으로 범위 내에 있다고 가정하는 레거시 코드에 대한 하위 호환성 문제가 발생할 수 있음을 의미합니다([아래의 예제](#프로토타입이_null이_아닌_객체를_unscopables로_사용하지_않기)를 보세요). 따라서 사용자 정의 `@@unscopables` 속성의 프로토타입을 `null`로 설정하는 것이 좋습니다. `Array.prototype[@@unscopables]`처럼 말입니다. + +이 프로토콜은 [`Element.prototype.append()`](/ko/docs/Web/API/Element/append)와 같은 DOM API에서도 활용됩니다. + +## 예시 + +### with 문에서 범위 지정하기 + +다음 코드는 ES5 및 그 이전 버전에서는 잘 작동합니다. 하지만 ECMAScript 2015 이후부터 {{jsxref("Array.prototype.keys()")}} 메서드가 도입되었습니다. 이는 `with` 환경 내에서 "keys"가 변수가 아니라 메서드가 된다는 것을 의미합니다. 이게 바로 `@@unscopables` 심볼이 도입된 이유입니다. 내장 `@@unscopables` 설정은 `with` 문의 범위에 일부 배열 메서드가 들어가는 것을 방지하기 위해 {{jsxref("Array/@@unscopables", "Array.prototype[@@unscopables]")}}로 구현되었습니다. + +```js +var keys = []; + +with (Array.prototype) { + keys.push("something"); +} +``` + +### 객체에서의 범위 지정 불가능 + +`@@unscopables`를 사용자 정의 객체에 설정할 수도 있습니다. + +```js +const obj = { + foo: 1, + bar: 2, + baz: 3, +}; + +obj[Symbol.unscopables] = { + // `Object.prototype`의 메서드가 범위 지정 불가능하게 되는 것을 + // 방지하기 위해 객체의 프로토타입을 `null`로 설정합니다. + __proto__: null, + // `foo` 는 범위 지정 가능해집니다. + foo: false, + // `bar` 는 범위 지정 불가능해집니다. + bar: true, + // `baz` 는 생략되었습니다. `undefined`는 거짓 같은 값이므로 baz도 범위 지정 가능합니다 (기본값). +}; + +with (obj) { + console.log(foo); // 1 + console.log(bar); // ReferenceError: bar is not defined + console.log(baz); // 3 +} +``` + +### 프로토타입이 null이 아닌 객체를 @@unscopables로 사용하지 않기 + +프로토타입을 제거하지 않은 단순한 객체를 `@@unscopables`로 선언하면 미묘한 버그가 발생할 수 있습니다. `@@unscopables` 가 나오기 이전에 작동하고 있던 다음과 같은 코드를 고려해 볼 수 있습니다. + +```js +const character = { + name: "Yoda", + toString: function () { + return "Use with statements, you must not"; + }, +}; + +with (character) { + console.log(name + ' says: "' + toString() + '"'); // Yoda says: "Use with statements, you must not" +} +``` + +하위 호환성을 유지하기 위해, `character`에 더 많은 속성을 추가할 때 `@@unscopables` 속성을 추가하기로 결정했다고 가정합니다. 그러면 단순하게 생각해서 다음과 같이 할 수 있을 것입니다. + +```js example-bad +const character = { + name: "Yoda", + toString: function () { + return "Use with statements, you must not"; + }, + student: "Luke", + [Symbol.unscopables]: { + // `student`를 범위 지정 불가능하게 만듭니다. + student: true, + }, +}; +``` + +그러나, 위의 코드는 이제 작동하지 않습니다. + +```js +with (character) { + console.log(name + ' says: "' + toString() + '"'); // Yoda says: "[object Undefined]" +} +``` + +이는 `character[Symbol.unscopables].toString`을 조회하면 [`Object.prototype.toString()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/toString)을 반환하기 때문입니다. 그리고 이는 참 같은 값입니다. 따라서 `with()` 문에서 `toString()`을 호출하면 `globalThis.toString()`을 호출하게 됩니다. 그리고 이는 [`this`](/ko/docs/Web/JavaScript/Reference/Operators/this) 없이 호출되기 때문에 `this`는 `undefined`가 되고 그래서 `[object Undefined]`를 반환하게 됩니다. + +메서드가 `character`에 의해 재정의되지 않더라도, 메서드를 범위 지정 불가능하게 설정하면 `this`의 값이 변경됩니다. + +```js +const proto = {}; +const obj = { __proto__: proto }; + +with (proto) { + console.log(isPrototypeOf(obj)); // true; `isPrototypeOf` 은 범위 지정되어 있고 `this`는 `proto`입니다. +} + +proto[Symbol.unscopables] = {}; + +with (proto) { + console.log(isPrototypeOf(obj)); // TypeError: Cannot convert undefined or null to object + // `isPrototypeOf`은 범위 지정되어 있지 않고 `this`는 undefined입니다. +} +``` + +이를 해결하기 위해서는 `@@unscopables`은 `Object.prototype` 속성 없이, 범위 지정 불가능하게 만들고자 하는 속성들만 포함한다는 것을 확실하게 해야 합니다. + +```js example-good +const character = { + name: "Yoda", + toString: function () { + return "Use with statements, you must not"; + }, + student: "Luke", + [Symbol.unscopables]: { + // `Object.prototype`의 메서드가 범위 지정 불가능하게 되는 것을 + // 방지하기 위해 객체의 프로토타입을 `null`로 설정합니다. + __proto__: null, + // `student` 는 범위 지정 불가능해집니다. + student: true, + }, +}; +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{jsxref("Array/@@unscopables", "Array.prototype[@@unscopables]")}} +- [`with`](/ko/docs/Web/JavaScript/Reference/Statements/with) +- [`Element.prototype.append()`](/ko/docs/Web/API/Element/append) From 727f8adc7bf5a1fea831de59d50bf00154bd2c9c Mon Sep 17 00:00:00 2001 From: 1ilsang <1ilsang@naver.com> Date: Fri, 5 Jul 2024 10:07:20 +0900 Subject: [PATCH 005/698] feat(glossary): Add term (#22139) --- docs/ko/guides/glossary-guide.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/ko/guides/glossary-guide.md b/docs/ko/guides/glossary-guide.md index 5e6cff005f467c..b3a7706cc4df67 100644 --- a/docs/ko/guides/glossary-guide.md +++ b/docs/ko/guides/glossary-guide.md @@ -1,6 +1,6 @@ # 용어 안내서 -새로운 용어를 추가할 때, 기존 문서의 레거시와 [국립 국어원 한국어 어문 규범](https://kornorms.korean.go.kr/main/main.do)을 고려해 추가할 것을 권장합니다. [국립 국어원 온라인가나다](https://www.korean.go.kr/front/onlineQna/onlineQnaList.do?mn_id=216)에서 어문 규범, 어법, 표준국어대사전 내용 등에 대하여 문의할 수 있습니다. +새로운 용어를 추가할 때, 기존 문서의 레거시와 [국립 국어원 한국어 어문 규범](https://korean.go.kr/kornorms/main/main.do)을 고려해 추가할 것을 권장합니다. [국립 국어원 온라인가나다](https://www.korean.go.kr/front/onlineQna/onlineQnaList.do?mn_id=216)에서 어문 규범, 어법, 표준국어대사전 내용 등에 대하여 문의할 수 있습니다. ## 공통 @@ -155,6 +155,8 @@ | User agent | 사용자 에이전트 | | | Update | 갱신 | | | Workflow | 워크플로우 | | +| Truthy | 참 같은 | | +| Falsy | 거짓 같은 | | ## CSS From bf57152193ff692739b5c4a7a25421d980d14f12 Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Fri, 5 Jul 2024 09:27:27 +0800 Subject: [PATCH 006/698] [zh-cn]: update the translation of `CanvasGradient` interface (#21938) Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- files/zh-cn/web/api/canvasgradient/index.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/files/zh-cn/web/api/canvasgradient/index.md b/files/zh-cn/web/api/canvasgradient/index.md index fb4833b3a5a43c..b44921fd307077 100644 --- a/files/zh-cn/web/api/canvasgradient/index.md +++ b/files/zh-cn/web/api/canvasgradient/index.md @@ -1,22 +1,22 @@ --- title: CanvasGradient slug: Web/API/CanvasGradient +l10n: + sourceCommit: daeff1a2efaae366bcc8b6d911d86985646e665e --- -{{APIRef("Canvas")}} +{{APIRef("Canvas API")}}{{AvailableInWorkers}} -**`CanvasGradient`** 接口表示描述渐变的不透明对象。通过 {{domxref("CanvasRenderingContext2D.createLinearGradient()")}} 或 {{domxref("CanvasRenderingContext2D.createRadialGradient()")}} 的返回值得到。 +**`CanvasGradient`** 接口表示描述渐变的[不透明对象](https://en.wikipedia.org/wiki/Opaque_data_type)。该接口通过 {{domxref("CanvasRenderingContext2D.createLinearGradient()")}}、{{domxref("CanvasRenderingContext2D.createConicGradient()")}} 或 {{domxref("CanvasRenderingContext2D.createRadialGradient()")}} 方法返回。 -## 属性 +## 实例属性 _不透明对象，没有暴露的属性。_ -## 方法 - -_没有继承的方法。_ +## 实例方法 - {{domxref("CanvasGradient.addColorStop()")}} - - : 添加一个由偏移（`offset`）和颜色（`color`）定义的断点到渐变中。如果偏移值不在 0 到 1 之间，将抛出`INDEX_SIZE_ERR 错误，如果颜色值不能被解析为有效的 CSS 颜色值 {{cssxref("<color>")}}，将抛出 SYNTAX_ERR`错误。 + - : 添加一个由偏移（`offset`）和颜色（`color`）定义的断点到渐变中。 ## 规范 @@ -28,5 +28,5 @@ _没有继承的方法。_ ## 参见 -- 创建方法在 {{domxref("CanvasRenderingContext2D")}}。 -- {{HTMLElement("canvas")}} 元素及其有关接口 {{domxref("HTMLCanvasElement")}}。 +- {{domxref("CanvasRenderingContext2D")}} 中的创建方法。 +- {{HTMLElement("canvas")}} 元素及其相关接口 {{domxref("HTMLCanvasElement")}}。 From 24210a81fd13e34a74ca70206e8336cbe54df072 Mon Sep 17 00:00:00 2001 From: Vivi Date: Fri, 5 Jul 2024 10:47:43 +0900 Subject: [PATCH 007/698] =?UTF-8?q?[ko]=20css=20doublecolon=20marker=20?= =?UTF-8?q?=EB=B2=88=EC=97=AD=20(#22127)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: [ko] css doublecolon marker 번역 * fix: word --- files/ko/web/css/_doublecolon_marker/index.md | 73 +++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 files/ko/web/css/_doublecolon_marker/index.md diff --git a/files/ko/web/css/_doublecolon_marker/index.md b/files/ko/web/css/_doublecolon_marker/index.md new file mode 100644 index 00000000000000..081d148a6664e2 --- /dev/null +++ b/files/ko/web/css/_doublecolon_marker/index.md @@ -0,0 +1,73 @@ +--- +title: "::marker" +slug: Web/CSS/::marker +l10n: + sourceCommit: 679f5893a4734fd136b80140e13262422d76b123 +--- + +{{CSSRef}} + +**`::marker`** [CSS](/ko/docs/Web/CSS) [의사 요소](/ko/docs/Web/CSS/Pseudo-elements)는 일반적으로 불릿 혹은 숫자를 포함하는 목록 요소의 마커 상자를 선택합니다. 이는 {{HTMLElement("li")}}와 {{HTMLElement("summary")}}처럼 [`display: list-item`](/ko/docs/Web/CSS/display)이 설정된 의사 요소나 일반 요소에서 동작합니다. + +{{EmbedInteractiveExample("pages/tabbed/pseudo-element-marker.html", "tabbed-shorter")}} + +## 허용되는 속성 + +`::marker` 의사 요소는 다음을 포함한 한정적인 수의 CSS 속성을 지원합니다. + +- 모든 [폰트 속성](/ko/docs/Web/CSS/CSS_fonts) +- {{CSSxRef("white-space")}} 속성 +- {{CSSxRef("color")}} +- {{CSSxRef("text-combine-upright")}}, {{CSSxRef("unicode-bidi")}}, 와 {{CSSxRef("direction")}} 속성 +- {{CSSxRef("content")}} 속성 +- 모든 [애니메이션](/ko/docs/Web/CSS/CSS_animations#properties) 과 [트랜지션](/ko/docs/Web/CSS/CSS_transitions#properties) 속성 + +> **참고:** 추가적인 CSS 속성에 대한 명세서가 추후 지원될 수 있습니다. + +## 구문 + +```css +::marker { + /* ... */ +} +``` + +## 예제 + +### HTML + +```html +
    +
  • 복숭아
    • +
  • 사과
    • +
  • 자두
    • +
+``` + +### CSS + +```css +ul li::marker { + color: red; + font-size: 1.5em; +} +``` + +### 결과 + +{{EmbedLiveSample('Examples')}} + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- 마커 박스를 기본적으로 가지고 있는 HTML 요소들: {{HTMLElement("ol")}}, {{HTMLElement("li")}}, {{HTMLElement("summary")}} +- [CSS 생성된 콘텐츠](/ko/docs/Web/CSS/CSS_generated_content) 모듈 +- [CSS 목록과 카운터](/ko/docs/Web/CSS/CSS_lists) 모듈 +- [CSS 카운터 스타일](/ko/docs/Web/CSS/CSS_counter_styles) 모듈 From c943225993bd1a6b6df5533cf48a92856bba97d0 Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Fri, 5 Jul 2024 10:54:34 +0800 Subject: [PATCH 008/698] [zh-cn]: create the translation of `tabs.move()` method (#21797) Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- .../webextensions/api/tabs/move/index.md | 160 ++++++++++++++++++ 1 file changed, 160 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/tabs/move/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/move/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/move/index.md new file mode 100644 index 00000000000000..085d435cc8ebd6 --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/move/index.md @@ -0,0 +1,160 @@ +--- +title: tabs.move() +slug: Mozilla/Add-ons/WebExtensions/API/tabs/move +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c +--- + +{{AddonSidebar}} + +移动一个或多个标签页到同一窗口中的新位置或不同窗口中。 + +只能将标签页移动到 {{WebExtAPIRef('windows.WindowType', 'WindowType')}} 属性为 `"normal"` 的窗口，或在 {{WebExtAPIRef('windows.WindowType', 'WindowType')}} 属性为 `"normal"` 的窗口中移动标签页。 + +这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。 + +## 语法 + +```js +let moving = browser.tabs.move( + tabIds, // 整数或整数数组 + moveProperties, // 对象 +); +``` + +### 参数 + +- `tabIds` + - : 整数或整数数组。要移动的{{WebExtAPIRef('tabs.Tab', '标签页', '', 'nocode')}}的 ID，或标签页 ID 数组。 +- `moveProperties` + + - : `object`。指定标签页移动目标的对象。 + + - `windowId` {{optional_inline}} + - : `integer`。要将标签页移动到的窗口的 ID。如果省略此参数，则每个在 `tabIds` 中的标签页将会移动到其当前窗口的 `index` 位置。如果包含此参数，并且 `tabIds` 包含多个标签页，则第一个标签页将移动到 `index` 位置，其他标签页将按照给定的顺序依次跟随。 + - `index` + + - : `integer`。要移动到的索引位置，从 0 开始计数。值为 -1 将标签页放置在窗口的末尾。 + + 如果传递一个小于 -1 的值，函数将抛出错误。 + + 注意，不能将固定标签页移动到未固定标签页之后的位置，也不能将任何未固定标签页移动到固定标签页之前的位置。例如，如果目标窗口中有一个或多个固定标签页，并且 `tabIds` 引用的是一个未固定标签页，则不能在此处传递 0。如果尝试这样做，函数将静默失败（不会抛出错误）。 + +### 返回值 + +一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，在所有移动的标签页都完成移动时其会兑现为一个 `{{WebExtAPIRef('tabs.Tab')}}` 对象或包含多个 `{{WebExtAPIRef('tabs.Tab')}}` 对象的数组，其中每个 `{{WebExtAPIRef('tabs.Tab')}}` 对象包含了已进行移动的标签页的详情。如果没有标签页被移动（例如，因为尝试将一个未固定标签页移动到一个固定标签页之前），则返回一个空数组。如果发生任何错误，promise 将会以错误信息拒绝。 + +## 示例 + +将当前窗口中的第一个标签页移动到当前窗口的最后位置： + +```js +function onMoved(tab) { + console.log(`已移动：${tab}`); +} + +function onError(error) { + console.log(`发生错误：${error}`); +} + +function firstToLast(windowInfo) { + if (windowInfo.tabs.length === 0) { + return; + } + let moving = browser.tabs.move(windowInfo.tabs[0].id, { index: -1 }); + moving.then(onMoved, onError); +} + +browser.browserAction.onClicked.addListener(() => { + let gettingCurrent = browser.windows.getCurrent({ populate: true }); + gettingCurrent.then(firstToLast, onError); +}); +``` + +将所有通过 HTTP 或 HTTPS 提供的来自 \*.mozilla.org 的标签页移动到它们所在窗口的末尾： + +```js +function onMoved(tab) { + console.log(`已移动：${tab}`); +} + +function onError(error) { + console.log(`发生错误：${error}`); +} + +function moveMoz(tabs) { + let mozTabIds = tabs.map((tabInfo) => tabInfo.id); + let moving = browser.tabs.move(mozTabIds, { index: -1 }); + moving.then(onMoved, onError); +} + +browser.browserAction.onClicked.addListener(() => { + let gettingMozTabs = browser.tabs.query({ url: "*://*.mozilla.org/*" }); + gettingMozTabs.then(moveMoz, onError); +}); +``` + +将所有通过 HTTP 或 HTTPS 提供的来自 \*.mozilla.org 的标签页移动到第一个这样的标签页所在窗口，从 0 号位置开始： + +```js +function onMoved(tab) { + console.log(`已移动：${tab}`); +} + +function onError(error) { + console.log(`发生错误：${error}`); +} + +function moveMoz(tabs) { + let mozTabIds = tabs.map((tabInfo) => tabInfo.id); + let targetWindow = tabs[0].windowId; + let moving = browser.tabs.move(mozTabIds, { + windowId: targetWindow, + index: 0, + }); + moving.then(onMoved, onError); +} + +browser.browserAction.onClicked.addListener(() => { + let gettingMozTabs = browser.tabs.query({ url: "*://*.mozilla.org/*" }); + gettingMozTabs.then(moveMoz, onError); +}); +``` + +{{WebExtExamples}} + +## 浏览器兼容性 + +{{Compat}} + +> **备注：** 此 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#method-move) API。此文档来源于 Chromium 代码库中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。 + + From efbfb20e60f3d57827bd84e137f7e7dc1be9393b Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Fri, 5 Jul 2024 14:42:45 +0800 Subject: [PATCH 009/698] [zh-cn]: create the translation of `tabs.remove()` method (#21806) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: A1lo --- .../webextensions/api/tabs/remove/index.md | 99 +++++++++++++++++++ 1 file changed, 99 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/tabs/remove/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/remove/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/remove/index.md new file mode 100644 index 00000000000000..090fcc63afb2b2 --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/remove/index.md @@ -0,0 +1,99 @@ +--- +title: tabs.remove() +slug: Mozilla/Add-ons/WebExtensions/API/tabs/remove +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c +--- + +{{AddonSidebar}} + +关闭一个或多个标签页。 + +这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。 + +## 语法 + +```js +let removing = browser.tabs.remove( + tabIds, // 整数或整数数组 +); +``` + +### 参数 + +- `tabIds` + - : `integer` 或 `integer` 数组。要关闭的标签页的 ID。 + +### 返回值 + +一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，当所有指定的标签页已被关闭或其 `beforeunload` 提示已被处理时其会被兑现且不带有参数。如果发生任何错误，promise 会以错误信息拒绝。 + +## 示例 + +关闭单个标签页： + +```js +function onRemoved() { + console.log(`已移除`); +} + +function onError(error) { + console.log(`发生错误：${error}`); +} + +let removing = browser.tabs.remove(2); +removing.then(onRemoved, onError); +``` + +关闭多个标签页： + +```js +function onRemoved() { + console.log(`已移除`); +} + +function onError(error) { + console.log(`发生错误：${error}`); +} + +let removing = browser.tabs.remove([15, 14, 1]); +removing.then(onRemoved, onError); +``` + +{{WebExtExamples}} + +## 浏览器兼容性 + +{{Compat}} + +> **备注：** 此 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#method-remove) API。本文档源自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。 + + From d8cc9865c7f9e0e9a1d152a9d5d49e1c35451c07 Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Fri, 5 Jul 2024 14:43:27 +0800 Subject: [PATCH 010/698] [zh-cn]: create the translation of `tabs.setZoomSettings()` method (#21822) Co-authored-by: A1lo --- .../api/tabs/setzoomsettings/index.md | 87 +++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/tabs/setzoomsettings/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/setzoomsettings/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/setzoomsettings/index.md new file mode 100644 index 00000000000000..c1c33155905875 --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/setzoomsettings/index.md @@ -0,0 +1,87 @@ +--- +title: tabs.setZoomSettings() +slug: Mozilla/Add-ons/WebExtensions/API/tabs/setZoomSettings +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c +--- + +{{AddonSidebar}} + +设定指定标签页的缩放设置。这些设置在标签页进行导航后被重置为默认设置。 + +这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。 + +## 语法 + +```js-nolint +let settingZoomSettings = browser.tabs.setZoomSettings( + tabId, // 可选的整型 + zoomSettings, // ZoomSettings +); +``` + +### 参数 + +- `tabId` {{optional_inline}} + - : `integer`。要更改缩放设置的标签页的 ID。默认为当前窗口中的活动标签页。 +- `zoomSettings` + - : {{WebExtAPIRef('tabs.ZoomSettings')}}。定义如何处理缩放更改及其作用范围。 + +### 返回值 + +一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，在更改缩放设置后其会被兑现且不带有参数。如果找不到标签页或发生其他错误，promise 会以错误消息拒绝。 + +## 示例 + +禁用当前标签页的缩放： + +```js +function onSet() { + console.log(`已设置缩放因子`); +} + +function onError(error) { + console.log(`发生错误：${error}`); +} + +let setting = browser.tabs.setZoomSettings({ mode: "disabled" }); +setting.then(onSet, onError); +``` + +{{WebExtExamples}} + +## 浏览器兼容性 + +{{Compat}} + +> **备注：** 此 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#method-setZoomSettings) API。此文档来源于 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。 + + From 46f1b22fbff2546971f9b55c5f55428320a40480 Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Fri, 5 Jul 2024 14:44:14 +0800 Subject: [PATCH 011/698] [zh-cn]: create the translation of `tabs.update()` method (#21827) Co-authored-by: A1lo --- .../webextensions/api/tabs/update/index.md | 155 ++++++++++++++++++ 1 file changed, 155 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/tabs/update/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/update/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/update/index.md new file mode 100644 index 00000000000000..b3c55d4d770446 --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/update/index.md @@ -0,0 +1,155 @@ +--- +title: tabs.update() +slug: Mozilla/Add-ons/WebExtensions/API/tabs/update +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c +--- + +{{AddonSidebar}} + +导航到一个新的 URL 或修改标签页的其他属性。 + +要使用此函数，传递要更新的标签页的 ID，以及一个包含要更新的属性的 `updateProperties` 对象。未在 `updateProperties` 中指定的属性不会被修改。 + +这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。 + +## 语法 + +```js-nolint +let updating = browser.tabs.update( + tabId, // 可选的整数 + updateProperties // 对象 +) +``` + +### 参数 + +- `tabId` {{optional_inline}} + - : `integer`。默认为当前窗口中选定的标签页。 +- `updateProperties` + + - : `object`。标签页中要更新的一组属性。要了解更多有关这些属性的信息，请查看 {{WebExtAPIRef("tabs.Tab")}} 的文档。 + + - `active` {{optional_inline}} + - : `boolean`。标签页是否应该变为活动状态。不影响窗口是否被聚焦（参见 {{WebExtAPIRef('windows.update')}}）。如果设置为 `true`，非活动的突出显示的标签页将停止被突出显示。如果设置为 `false`，则不做任何操作。 + - `autoDiscardable` {{optional_inline}} + - : `boolean`。标签页是否可以被浏览器丢弃。默认值为 `true`。当设置为 `false` 时，浏览器无法自动丢弃该标签页。但是，可以通过 {{WebExtAPIRef("tabs.discard")}} 丢弃该标签页。 + - `highlighted` {{optional_inline}} + + - : `boolean`。将标签页添加到当前的选择中，或从中移除。如果设置为 `true` 并且标签页未被突出显示，则默认情况下它将变为活动状态。 + + 如果只想突出显示标签页而不激活它，在 Firefox 中可以将 `highlighted` 设置为 `true`，并将 `active` 设置为 `false`。其他浏览器可能即使在这种情况下也会激活标签页。 + + - `loadReplace` {{optional_inline}} + + - : `boolean`。新的 URL 是否应该替换标签页导航历史中的旧 URL（可通过“返回”按钮访问）。 + + 例如，用户使用 Ctrl+T 创建一个新的标签页。默认情况下，在 Firefox 中，这会加载“about:newtab”。然后，如果你的扩展使用 {{WebExtAPIRef("tabs.update")}} 更新此页面且没有使用 `loadReplace`，则“返回”按钮将启用，并且用户可以返回到“about:newtab”。如果扩展设置了 `loadReplace`，则“返回”按钮将被禁用，并且就像扩展提供的 URL 是该标签页访问的第一个页面一样。 + + 请注意，原始 URL 仍将出现在浏览器的全局历史记录中。 + + - `muted` {{optional_inline}} + - : `boolean`。标签页是否应该静音。 + - `openerTabId` {{optional_inline}} + - : `integer`。打开该标签页的标签页的 ID。如果指定，则打开者标签页必须与此标签页位于同一窗口。 + - `pinned` {{optional_inline}} + - : `boolean`。标签页是否应该被固定。 + - `selected` {{deprecated_inline}} {{optional_inline}} + - : `boolean`。标签页是否应该被选择。此属性已被 `active` 和 `highlighted` 替代。 + - `successorTabId` {{optional_inline}} + - : `integer`。标签页的后继标签页的 ID。 + - `url` {{optional_inline}} + + - : `string`。要导航标签页到的 URL。 + + 由于安全原因，在 Firefox 中，这不能是特权 URL。因此，传递以下任何 URL 将失败，并设置 {{WebExtAPIRef("runtime.lastError")}} 为错误消息： + + - chrome: 类型的 URL + - javascript: 类型的 URL + - data: 类型的 URL + - file: 类型的 URL（即文件系统上的文件。但是，要使用打包在扩展中的文件，请参见下文） + - 特权 about: 类型的 URL（例如 `about:config`、`about:addons`、`about:debugging`、`about:newtab`）。非特权的 URL（例如 `about:blank`）是允许的。 + + 要加载打包在你的扩展中的页面，请指定从扩展的 `manifest.json` 文件开始的绝对 URL。例如：“/path/to/my-page.html”。如果省略前导的“/”，则 URL 被视为相对 URL，不同的浏览器可能会构造不同的绝对 URL。 + +### 返回值 + +一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个包含有关更新的标签页的 {{WebExtAPIRef('tabs.Tab')}} 对象。{{WebExtAPIRef('tabs.Tab')}} 对象不包含 `url`、`title` 和 `favIconUrl`，除非匹配的[主机权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#主机权限)或已请求 `"tabs"` 权限。如果找不到标签页或发生其他错误，promise 将以错误消息拒绝。 + +## 示例 + +将当前窗口中的活动标签页导航到 `https://developer.mozilla.org`： + +```js +function onUpdated(tab) { + console.log(`更新的标签页：${tab.id}`); +} + +function onError(error) { + console.log(`发生错误：${error}`); +} + +let updating = browser.tabs.update({ url: "https://developer.mozilla.org" }); +updating.then(onUpdated, onError); +``` + +激活当前窗口中的第一个标签页，并将其导航到 `https://developer.mozilla.org`： + +```js +function onUpdated(tab) { + console.log(`更新的标签页：${tab.id}`); +} + +function onError(error) { + console.log(`发生错误：${error}`); +} + +function updateFirstTab(tabs) { + let updating = browser.tabs.update(tabs[0].id, { + active: true, + url: "https://developer.mozilla.org", + }); + updating.then(onUpdated, onError); +} + +let querying = browser.tabs.query({ currentWindow: true }); +querying.then(updateFirstTab, onError); +``` + +{{WebExtExamples}} + +## 浏览器兼容性 + +{{Compat}} + +> **备注：** 此 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#method-update) API。该文档源自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。 + + From 8698b9926099a8657fbb58dea53dd5730f5ad901 Mon Sep 17 00:00:00 2001 From: NekoCharm <34984380+AlPha5130@users.noreply.github.com> Date: Fri, 5 Jul 2024 14:59:56 +0800 Subject: [PATCH 012/698] [zh-cn]: create translation of `set.union` method (#22165) Co-authored-by: A1lo Co-authored-by: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> --- .../global_objects/set/union/index.md | 69 +++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 files/zh-cn/web/javascript/reference/global_objects/set/union/index.md diff --git a/files/zh-cn/web/javascript/reference/global_objects/set/union/index.md b/files/zh-cn/web/javascript/reference/global_objects/set/union/index.md new file mode 100644 index 00000000000000..8759d5457f8e61 --- /dev/null +++ b/files/zh-cn/web/javascript/reference/global_objects/set/union/index.md @@ -0,0 +1,69 @@ +--- +title: Set.prototype.union() +slug: Web/JavaScript/Reference/Global_Objects/Set/union +l10n: + sourceCommit: 32e8292195c8e87ea114607cc447386aaccb8b71 +--- + +{{JSRef}} + +{{jsxref("Set")}} 实例的 **`union()`** 方法接受一个集合并返回包含当前集合与给定集合中存在的所有元素的新集合。 + +## 语法 + +```js-nolint +union(other) +``` + +### 参数 + +- `other` + - : 一个 {{jsxref("Set")}} 或[类集合](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set#类_set_浏览器_api)对象。 + +### 返回值 + +一个新的 {{jsxref("Set")}} 对象，包含当前集合与 `other` 中存在的所有元素。 + +## 描述 + +使用数学记号，*并集*的定义如下： + +A∪B={x∣x∊A or x∊B}A\cup B = \{x\midx\in A\text{ or }x\in B\} + +使用维恩图表示： + +![有部分重叠的两个圆的维恩图。A 和 B 的并集是被任意一个圆包含的区域。](diagram.svg) + +`union()` 接受[类集合](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set#类_set_浏览器_api)对象作为 `other` 参数。方法要求 {{jsxref("Operators/this", "this")}} 是一个 {{jsxref("Set")}} 的实例，因为它不调用任何用户代码而直接获取 `this` 中存储的数据。然后，它通过调用 `other` 的 `keys()` 方法迭代 `other`，并构造一个新的集合。这个集合首先包含所有来自 `this` 的元素，然后是所有在 `other` 里但不在 `this` 里的元素。 + +返回的集合里的元素的顺序首先是 `this` 中的元素，其次是 `other` 中的元素。 + +## 示例 + +### 使用 union() + +下面的代码展示了如何得到小于 10 的偶数集和小于 10 的完全平方数集的并集。返回的并集其中的元素是偶数或者是完全平方数。 + +```js +const evens = new Set([2, 4, 6, 8]); +const squares = new Set([1, 4, 9]); +console.log(evens.union(squares)); // Set(6) { 2, 4, 6, 8, 1, 9 } +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- [`core-js` 中 `Set.prototype.union` 的 polyfill](https://github.com/zloirock/core-js#new-set-methods) +- {{jsxref("Set.prototype.difference()")}} +- {{jsxref("Set.prototype.intersection()")}} +- {{jsxref("Set.prototype.isDisjointFrom()")}} +- {{jsxref("Set.prototype.isSubsetOf()")}} +- {{jsxref("Set.prototype.isSupersetOf()")}} +- {{jsxref("Set.prototype.symmetricDifference()")}} From fb6420cdb84287f43abbbc92e416a59530ba9415 Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Fri, 5 Jul 2024 15:04:03 +0800 Subject: [PATCH 013/698] [zh-cn]: create the translation of `tabs.reload()` method (#21805) Co-authored-by: A1lo --- .../webextensions/api/tabs/reload/index.md | 102 ++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/tabs/reload/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/reload/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/reload/index.md new file mode 100644 index 00000000000000..441f585a9d6177 --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/reload/index.md @@ -0,0 +1,102 @@ +--- +title: tabs.reload() +slug: Mozilla/Add-ons/WebExtensions/API/tabs/reload +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c +--- + +{{AddonSidebar}} + +重新加载一个标签页，可选择是否绕过本地 web 缓存。 + +这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。 + +## 语法 + +```js-nolint +let reloading = browser.tabs.reload( + tabId, // 可选的整数 + reloadProperties // 可选的对象 +) +``` + +### 参数 + +- `tabId` {{optional_inline}} + - : `integer`。要重新加载的标签页的 ID。默认为当前窗口中选定的标签页。 +- `reloadProperties` {{optional_inline}} + + - : 一个包含以下属性的对象： + - `bypassCache` {{optional_inline}} + - : `boolean`。是否绕过本地 web 缓存。默认为 `false`。 + +### 返回值 + +一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，当标签页重新加载完成时其会被兑现且不带有参数。如果发生任何错误，promise 会错误信息拒绝。 + +## 示例 + +重新加载当前窗口中的活动标签页： + +```js +browser.tabs.reload(); +``` + +重新加载当前窗口中的活动标签页，并绕过缓存： + +```js +browser.tabs.reload({ bypassCache: true }); +``` + +重新加载 ID 为 2 的标签页，并绕过缓存，完成后调用回调函数： + +```js +function onReloaded() { + console.log(`已重新加载`); +} + +function onError(error) { + console.log(`发生错误：${error}`); +} + +let reloading = browser.tabs.reload(2, { bypassCache: true }); +reloading.then(onReloaded, onError); +``` + +{{WebExtExamples}} + +## 浏览器兼容性 + +{{Compat}} + +> **备注：** 此 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#method-reload) API。本文档源自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。 + + From f641b72d6e8acd4412e232aa3a3bc00ae7614dcb Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Fri, 5 Jul 2024 19:17:49 +0800 Subject: [PATCH 014/698] [zh-cn]: create the translation of `tabs.highlight()` method (#21795) Co-authored-by: A1lo --- .../webextensions/api/tabs/highlight/index.md | 79 +++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/tabs/highlight/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/highlight/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/highlight/index.md new file mode 100644 index 00000000000000..4814831a05269c --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/highlight/index.md @@ -0,0 +1,79 @@ +--- +title: tabs.highlight() +slug: Mozilla/Add-ons/WebExtensions/API/tabs/highlight +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c +--- + +{{AddonSidebar}} + +突出显示（选择）一个或多个标签页。通过窗口 ID 和一系列标签索引来指定标签页。 + +这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。 + +## 语法 + +```js +let highlighting = browser.tabs.highlight( + highlightInfo, // 对象 +); +``` + +### 参数 + +- `highlightInfo` + + - : `object`。 + + - `windowId` {{optional_inline}} + - : `integer`。包含要突出显示标签页的窗口的 ID。 + - `populate` {{optional_inline}} + + - : `boolean`。默认为 `true`。如果设置为 `false`，则 {{WebExtAPIRef('windows.Window')}} 对象不会包含 `tabs` 属性，该属性包含表示窗口中打开的标签页的 {{WebExtAPIRef('tabs.Tab')}} 对象列表。 + + > **备注：** 在标签页很多的情况下，对窗口进行填充（默认行为）可能会消耗大量资源。为了更好的性能，如果不需要标签页详情，建议手动将 `populate` 设置为 `false`。 + + - `tabs` + - : `integer` 数组，指定要突出显示的一个或多个标签页索引。之前突出显示的但未包含在 `tabs` 中的标签页将停止被突出显示。`tabs` 中的第一个标签页将成为活动标签页。 + +### 返回值 + +一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个包含突出显示的标签页信息的 {{WebExtAPIRef('windows.Window')}} 对象。如果无法找到窗口或发生其他错误，promise 会以错误信息拒绝。 + +## 浏览器兼容性 + +{{Compat}} + +{{WebExtExamples}} + +> **备注：** 此 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#method-highlight) API。此文档源自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。 + + From 16ef7081b06484131c807798e24c060f44a54e5f Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Fri, 5 Jul 2024 19:18:23 +0800 Subject: [PATCH 015/698] [zh-cn]: create the translation of `tabs.print()` method (#21802) --- .../webextensions/api/tabs/print/index.md | 40 +++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/tabs/print/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/print/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/print/index.md new file mode 100644 index 00000000000000..f3e0816a86e0a5 --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/print/index.md @@ -0,0 +1,40 @@ +--- +title: tabs.print() +slug: Mozilla/Add-ons/WebExtensions/API/tabs/print +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c +--- + +{{AddonSidebar}} + +调用此函数以打印当前活动标签页的内容。如果调用了此函数，用户将会看到来自底层平台的打印对话框，可以更改打印设置，然后打印当前活动的标签页。 + +## 语法 + +```js-nolint +browser.tabs.print() +``` + +### 参数 + +无。 + +### 返回值 + +无。 + +## 示例 + +在这个示例中，一个后台脚本监听[浏览器操作](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#browser_actions_2)按钮点击事件，然后尝试打印当前活动的标签页： + +```js +browser.browserAction.onClicked.addListener(() => { + browser.tabs.print(); +}); +``` + +{{WebExtExamples}} + +## 浏览器兼容性 + +{{Compat}} From a7a9a7e85ade720d5dc9ef77abcbf1b8a9abe230 Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Fri, 5 Jul 2024 19:18:51 +0800 Subject: [PATCH 016/698] [zh-cn]: update the translation of `tabs.insertCSS()` method (#21796) Co-authored-by: A1lo --- .../webextensions/api/tabs/insertcss/index.md | 84 +++++++++++-------- 1 file changed, 47 insertions(+), 37 deletions(-) diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/insertcss/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/insertcss/index.md index 730f7e2571cbc9..27a8cdc2897669 100644 --- a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/insertcss/index.md +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/insertcss/index.md @@ -1,76 +1,84 @@ --- title: tabs.insertCSS() slug: Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c --- {{AddonSidebar}} -向一个页面注入 CSS +向一个页面注入 CSS。 -使用该 API 前你必须拥有目标页面的权限，可以是 [主机权限](/zh-CN/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions), 或者使用 [activeTab 权限](/zh-CN/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission). +> **备注：** 当使用 Manifest V3 或更高版本时，请使用 {{WebExtAPIRef("scripting.insertCSS()")}} 和 {{WebExtAPIRef("scripting.removeCSS()")}} 来插入和移除 CSS。 -你只能向符合 [match pattern](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Match_patterns) 的网页注入 CSS: 其形式必定是 "http", "https", "file", "ftp" 之一。你不能向任何浏览器内置页面注入 CSS，比如 about:debugging, about:addons, 或者你打开的一个新的空白页。 +使用该 API 前你必须拥有目标页面 URL 的权限，可以是[主机权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#主机权限), 或者使用 [activeTab 权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#活动标签权限)。 -当再次调用{{WebExtAPIRef("tabs.removeCSS()")}} 时，已经注入的 CSS 可能会被清除。 +你只能向 URL 符合[匹配模式](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Match_patterns)的网页注入 CSS——其方案必须是“http”、“https”、“file”和“ftp”之一。你不能向任何浏览器内置页面注入 CSS，比如 about:debugging、about:addons 或者你打开的一个新的空白页。 -这是一个返回[`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。 +> **备注：** Firefox 在注入的 CSS 文件中解析 URL 时是相对于 CSS 文件本身的位置，而不是相对于它被注入到的页面的位置。 -## Syntax +当再次调用 {{WebExtAPIRef("tabs.removeCSS()")}} 时，已经注入的 CSS 可能会被移除。 -```js -var inserting = browser.tabs.insertCSS( - tabId, // optional integer - details, // extensionTypes.InjectDetails -); +这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。 + +## 语法 + +```js-nolint +let inserting = browser.tabs.insertCSS( + tabId, // 可选的整型 + details // 对象 +) ``` ### 参数 - `tabId` {{optional_inline}} - - : `integer`，将要注入 css 的标签 ID。默认为当前窗口的活动标签。 + - : `integer`。要插入 CSS 的选项卡 ID。默认为当前窗口的活动选项卡。 - `details` - - : {{WebExtAPIRef('extensionTypes.InjectDetails')}}. 对注入的描述，包含以下属性： + - : 描述要插入的 CSS 的对象。包含以下属性： - - `allFrames`{{optional_inline}} - - : `boolean`. 如果为真，该 CSS 会被注入到该页面的所有框架，如果为假，Css 只会注入到最顶层框架，默认为假。 - - `code`{{optional_inline}} - - : `string`. 将要注入的代码。 - - `file`{{optional_inline}} - - : `string`. 包含将要注入代码的文件路径，在 Firefox 中，相对 URLs 决定于当前页面的 URL，在 Chrome 中，决定于扩展的基础 URL。为了跨浏览器工作，你应该使用一个从扩展根目录开始的绝对路径，比如 : `"/path/to/stylesheet.css"`. - - `frameId`{{optional_inline}} - - : `integer`. CSS 应该被注入的框架。默认为 `0` (顶层框架). - - `matchAboutBlank`{{optional_inline}} - - : `boolean`. If `true`, the code will be injected into embedded "about:blank" and "about:srcdoc" frames if your add-on has access to their parent document. The code cannot be inserted in top-level about: frames. Defaults to `false`. - - `runAt`{{optional_inline}} - - : {{WebExtAPIRef('extensionTypes.RunAt')}}. The soonest that the code will be injected into the tab. Defaults to "document_idle". + - `allFrames` {{optional_inline}} + - : `boolean`。如果为 `true`，则将 CSS 注入到当前页面的所有框架中。如果为 `false`，则仅将 CSS 注入到顶层框架。默认为 `false`。 + - `code` {{optional_inline}} + - : `string`。要注入的代码（文本字符串形式）。 + - `cssOrigin` {{optional_inline}} -### Return value + - : `string`。可以取以下两个值之一：“user”，表示将 CSS 添加为用户样式表；“author”，表示将其添加为作者样式表。如果省略此选项，则 CSS 将作为作者样式表添加。 + - “user”允许你防止网站覆盖你插入的 CSS。参见[层叠顺序](/zh-CN/docs/Web/CSS/Cascade#层叠顺序)。 + - “author”样式表的行为就像它们出现在页面指定的所有作者规则之后一样。这种行为包括页面脚本动态添加的任何作者样式表，即使此添加发生在 `insertCSS` 调用完成之后。 -[`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 将会在 CSS 成功注入时 被填充，如果有任何错误发生，promise 将会被注入一个错误消息。 + - `file` {{optional_inline}} + - : `string`。包含要插入代码的文件路径。在 Firefox 中，相对 URL 是相对于当前页面 URL 解析的。在 Chrome 中，这些 URL 是相对于扩展的基础 URL 解析的。为了跨浏览器工作，你可以将路径指定为绝对 URL，从扩展的根目录开始，例如 `"/path/to/stylesheet.css"`。 + - `frameId` {{optional_inline}} + - : `integer`。应该插入 CSS 的框架 ID。默认为 `0`（顶层框架）。 + - `matchAboutBlank` {{optional_inline}} + - : `boolean`。如果为 `true`，则代码将被注入到嵌入的“about:blank”和“about:srcdoc”框架中，如果你的扩展具有访问其父文档的权限。不能在顶级 about: 框架中插入代码。默认为 `false`。 + - `runAt` {{optional_inline}} + - : {{WebExtAPIRef('extensionTypes.RunAt')}}。代码将被注入到选项卡中的最早时间。默认为“document_idle”。 -## Browser compatibility +### 返回值 -{{Compat}} +一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，在所有 CSS 都插入完成时其会被兑现且不带有参数。如果发生任何错误，promise 会以错误信息拒绝。 ## 示例 -下面例子将通过字符串变量形式向当前活动标签注入一段 CSS 代码 +这个示例将来自字符串的 CSS 插入到当前活动标签页中。 ```js -var css = "body { border: 20px dotted pink; }"; +let css = "body { border: 20px dotted pink; }"; browser.browserAction.onClicked.addListener(() => { function onError(error) { console.log(`Error: ${error}`); } - var insertingCSS = browser.tabs.insertCSS({ code: css }); + let insertingCSS = browser.tabs.insertCSS({ code: css }); insertingCSS.then(null, onError); }); ``` -下面例子将以通过加载文件形式向页面注入 CSS。CSS 被注入在 ID 为 2 的 tab 中。 +这个示例从扩展中打包的文件中加载 CSS，并将其插入到 ID 为 2 的标签页中： ```js browser.browserAction.onClicked.addListener(() => { @@ -78,16 +86,18 @@ browser.browserAction.onClicked.addListener(() => { console.log(`Error: ${error}`); } - var insertingCSS = browser.tabs.insertCSS(2, { file: "content-style.css" }); + let insertingCSS = browser.tabs.insertCSS(2, { file: "content-style.css" }); insertingCSS.then(null, onError); }); ``` {{WebExtExamples}} -> **备注：** 本页 API 以谷歌 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-insertCSS) API 为基础。该篇文档由 Chromium 代码 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)衍变而来。 -> -> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License. +## 浏览器兼容性 + +{{Compat}} + +> **备注：** 此 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#method-insertCSS) API。此文档来源于 Chromium 代码库中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。
- + Cherry -
    From fbddcfef13c3cb4c5657eb95a35dbcce4f977f8c Mon Sep 17 00:00:00 2001 From: NekoCharm <34984380+AlPha5130@users.noreply.github.com> Date: Sat, 6 Jul 2024 16:37:16 +0800 Subject: [PATCH 052/698] [zh-cn]: create `set.isDisjointFrom` translation (#22167) --- .../set/isdisjointfrom/index.md | 80 +++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 files/zh-cn/web/javascript/reference/global_objects/set/isdisjointfrom/index.md diff --git a/files/zh-cn/web/javascript/reference/global_objects/set/isdisjointfrom/index.md b/files/zh-cn/web/javascript/reference/global_objects/set/isdisjointfrom/index.md new file mode 100644 index 00000000000000..69f3c113cb53ef --- /dev/null +++ b/files/zh-cn/web/javascript/reference/global_objects/set/isdisjointfrom/index.md @@ -0,0 +1,80 @@ +--- +title: Set.prototype.isDisjointFrom() +slug: Web/JavaScript/Reference/Global_Objects/Set/isDisjointFrom +l10n: + sourceCommit: 74206b3f81736bac558470f36222544cc67ba9e2 +--- + +{{JSRef}} + +{{jsxref("Set")}} 实例的 **`isDisjointFrom()`** 方法接受一个集合并返回一个布尔值来指示当前集合与给定集合是否不存在公共元素。 + +## 语法 + +```js-nolint +isDisjointFrom(other) +``` + +### 参数 + +- `other` + - : 一个 {{jsxref("Set")}} 或[类集合](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set#类_set_浏览器_api)对象。 + +### 返回值 + +如果当前集合与 `other` 集合没有公共元素，则返回 `true`；否则返回 `false`。 + +## 描述 + +如果两个集合没有公共元素，那么它们是*不相交*的。使用数学记号： + +A 与 B 不相交 ⇔A∩B=∅A\text{ 与 }B \text{ 不相交 } \Leftrightarrow A\cap B = \empty + +使用维恩图表示： + +![有两个圆的维恩图。因为 A 和 B 没有重叠的部分，所以它们是不相交的。](diagram.svg) + +`isDisjointFrom()` 接受[类集合](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set#类_set_浏览器_api)对象作为 `other` 参数。方法要求 {{jsxref("Operators/this", "this")}} 是一个 {{jsxref("Set")}} 的实例，因为它不调用任何用户代码而直接获取 `this` 中存储的数据。然后，方法的行为取决于 `this` 和 `other` 的元素数量： + +- 如果 `this` 中的元素数量比 `other.size` 大，那么它将调用 `other` 的 `keys()` 方法遍历 `other`。如果 `other` 中有任何元素出现在 `this` 中，方法返回 `false`（并且通过调用 `keys()` 迭代器的 `return()` 方法关闭迭代器）；否则，返回 `true`。 +- 否则，它将遍历 `this`。如果有任何元素 `e` 使得 `other.has(e)` 返回[真值](/zh-CN/docs/Glossary/Truthy)，方法返回 `false`；否则，返回 `true`。 + +由于这种实现，`isDisjointFrom()` 的效率主要取决于 `this` 和 `other` 中数量较少的集合（假定两个集合都能以次线性时间复杂度访问）。 + +## 示例 + +### 使用 isDisjointFrom() + +小于 20 的完全平方数集和小于 20 的质数集是不相交的，因为按定义完全平方数可分解为两个整数的乘积，而且 1 不是质数： + +```js +const primes = new Set([2, 3, 5, 7, 11, 13, 17, 19]); +const squares = new Set([1, 4, 9, 16]); +console.log(primes.isDisjointFrom(squares)); // true +``` + +而小于 20 的完全平方数集和小于 20 的合数集是相交的，因为按定义除 1 以外的完全平方数都是合数： + +```js +const composites = new Set([4, 6, 8, 9, 10, 12, 14, 15, 16, 18]); +const squares = new Set([1, 4, 9, 16]); +console.log(composites.isDisjointFrom(squares)); // false +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- [`core-js` 中 `Set.prototype.isDisjointFrom` 的 polyfill](https://github.com/zloirock/core-js#new-set-methods) +- {{jsxref("Set.prototype.difference()")}} +- {{jsxref("Set.prototype.intersection()")}} +- {{jsxref("Set.prototype.isSubsetOf()")}} +- {{jsxref("Set.prototype.isSupersetOf()")}} +- {{jsxref("Set.prototype.symmetricDifference()")}} +- {{jsxref("Set.prototype.union()")}} From 9b84ffe0f777d3971901808254a51d62d4d8821e Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Sat, 6 Jul 2024 19:03:15 +0800 Subject: [PATCH 053/698] [zh-cn]: update the translation of `CanvasRenderingContext2D.shadowBlur` property (#21963) Co-authored-by: A1lo --- .../shadowblur/index.md | 35 ++++++++++++------- 1 file changed, 23 insertions(+), 12 deletions(-) diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowblur/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowblur/index.md index 1171a83589df50..995e062cb77e2f 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowblur/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowblur/index.md @@ -1,26 +1,25 @@ --- -title: CanvasRenderingContext2D.shadowBlur +title: CanvasRenderingContext2D：shadowBlur 属性 slug: Web/API/CanvasRenderingContext2D/shadowBlur +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 --- {{APIRef}} -**`CanvasRenderingContext2D.shadowBlur`** 是 Canvas 2D API 描述模糊效果程度的属性；它既不对应像素值也不受当前转换矩阵的影响。默认值是 0。 +Canvas 2D API 的 **`CanvasRenderingContext2D.shadowBlur`** 属性用于描述模糊效果程度。默认值是 `0`（没有模糊）。 -## 语法 +> **备注：** 只有当 {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}} 属性设置为非透明值时，阴影才会被绘制。其中的 `shadowBlur`、{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}} 或 {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}} 属性中至少有一个必须是非零的。 -``` -ctx.shadowBlur = level; -``` +## 值 -- `level` - - : 描述模糊效果程度的，float 类型的值。默认值是 0。负数、 {{jsxref("Infinity")}} 或者 {{jsxref("NaN")}} 都会被忽略。 +一个非负浮点数，指定阴影模糊的级别，其中 `0` 表示没有模糊，数字越大表示模糊程度越高。这个值不对应于像素数量，并且不受当前变换矩阵的影响。默认值为 `0`。负数、{{jsxref("Infinity")}} 和 {{jsxref("NaN")}} 将被忽略。 ## 示例 ### 为形状添加阴影 -这是一段简单的代码片段，使用 `shadowblur` 属性设置模糊阴影。注意：只有设置 shadowColor 属性值为不透明，阴影才会被绘制。 +这个例子向一个矩形添加了模糊的阴影。`shadowColor` 属性设置阴影的颜色，而 `shadowBlur` 设置阴影的模糊程度。 #### HTML @@ -34,11 +33,11 @@ ctx.shadowBlur = level; const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); -// Shadow +// 阴影 ctx.shadowColor = "red"; ctx.shadowBlur = 15; -// Rectangle +// 矩形 ctx.fillStyle = "blue"; ctx.fillRect(20, 20, 150, 100); ``` @@ -55,6 +54,18 @@ ctx.fillRect(20, 20, 150, 100); {{Compat}} +### WebKit/Blink 特定注意事项 + +在基于 WebKit 和 Blink 的浏览器中，除了这个属性外，还实现了一个非标准且已弃用的方法 `ctx.setShadow()`。 + +```js +setShadow(width, height, blur, color, alpha); +setShadow(width, height, blur, graylevel, alpha); +setShadow(width, height, blur, r, g, b, a); +setShadow(width, height, blur, c, m, y, k, a); +``` + ## 参见 -- 接口定义， {{domxref("CanvasRenderingContext2D")}}. +- 定义该属性的接口：{{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.shadowColor")}} From af9a4d4f2e80331598e0c9ea079009ee1fe89db0 Mon Sep 17 00:00:00 2001 From: custs21113 Date: Sat, 6 Jul 2024 19:04:44 +0800 Subject: [PATCH 054/698] [zh-CN]: create translation for `Set.prototype.difference` (#22168) Co-authored-by: A1lo --- .../global_objects/set/difference/index.md | 72 +++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 files/zh-cn/web/javascript/reference/global_objects/set/difference/index.md diff --git a/files/zh-cn/web/javascript/reference/global_objects/set/difference/index.md b/files/zh-cn/web/javascript/reference/global_objects/set/difference/index.md new file mode 100644 index 00000000000000..1116ef410af6b1 --- /dev/null +++ b/files/zh-cn/web/javascript/reference/global_objects/set/difference/index.md @@ -0,0 +1,72 @@ +--- +title: Set.prototype.difference() +slug: Web/JavaScript/Reference/Global_Objects/Set/difference +l10n: + sourceCommit: 74206b3f81736bac558470f36222544cc67ba9e2 +--- + +{{JSRef}} + +{{jsxref("Set")}} 实例的 **`difference()`** 方法接受一个集合并返回一个新的集合，其中包含当前集合中存在但给定集合中不存在的所有元素。 + +## 语法 + +```js-nolint +difference(other) +``` + +### 参数 + +- `other` + - : 一个 {{jsxref("Set")}} 对象，或者[类集合](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set#类_set_浏览器_api)对象。 + +### 返回值 + +一个新的 {{jsxref("Set")}} 对象，包含存在于当前集合但不存在于 `other` 中的所有元素。 + +## 描述 + +使用数学记号，*差集*的定义如下： + +A∖B={x∊A∣x∉B}A\setminus B = \{x\in A\mid x\notin B\} + +使用维恩图表示： + +![两个圆重叠的维恩图。A 不与 B 重叠的区域是 A 和 B 的差集。](diagram.svg) + +`difference()` 接受[类集合](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set#类_set_浏览器_api)对象作为 `other` 参数。方法要求 {{jsxref("Operators/this", "this")}} 是一个 {{jsxref("Set")}} 实例，因为它直接检索存储在其中的底层数据，而不调用任何用户代码。然后，它的行为取决于 `this` 和 `other` 的大小： + +- 如果 `this` 的元素数量大于 `other.size`，则通过调用 `keys()` 方法遍历 `other`，并使用 `this` 中所有在 `other` 中未见过的元素构造一个新的集合。 +- 否则，它会遍历 `this` 中的元素，并使用 `this` 中的所有使 `other.has(e)` 返回[假值](/zh-CN/docs/Glossary/Falsy)的元素 `e` 构造一个新集合。 + +返回的集合的元素的顺序与 `this` 相同。 + +## 示例 + +### 使用 difference() + +以下示例计算奇数集（<10）和完全平方集（<10）的差集。其结果是一组不是完全平方数的奇数。 + +```js +const odds = new Set([1, 3, 5, 7, 9]); +const squares = new Set([1, 4, 9]); +console.log(odds.difference(squares)); // Set(3) { 3, 5, 7 } +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- [`core-js` 中 `Set.prototype.difference` 的 polyfill](https://github.com/zloirock/core-js#new-set-methods) +- {{jsxref("Set.prototype.intersection()")}} +- {{jsxref("Set.prototype.isDisjointFrom()")}} +- {{jsxref("Set.prototype.isSubsetOf()")}} +- {{jsxref("Set.prototype.isSupersetOf()")}} +- {{jsxref("Set.prototype.symmetricDifference()")}} +- {{jsxref("Set.prototype.union()")}} From 52fcf59a6d31104fc8708e0908ff2ddaaff1a10d Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Sat, 6 Jul 2024 20:04:06 +0800 Subject: [PATCH 055/698] zh-CN: update Glossary/ECMA (#22192) Co-authored-by: A1lo --- files/zh-cn/glossary/ecma/index.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/files/zh-cn/glossary/ecma/index.md b/files/zh-cn/glossary/ecma/index.md index 3542e2f07cfb5d..706921aaa9efbe 100644 --- a/files/zh-cn/glossary/ecma/index.md +++ b/files/zh-cn/glossary/ecma/index.md @@ -1,15 +1,17 @@ --- title: ECMA slug: Glossary/ECMA +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -**Ecma International**（正式名称是 _European Computer Manufacturers Association，欧洲计算机制造商协会_）是一个开发计算机硬件、通信和程序语言标准的非盈利组织。 +**Ecma 国际**（正式名称为*欧洲计算机制造商协会*）是一个开发计算机硬件、通信和程序设计语言标准的非盈利组织。 -在网络上该组织因维护 {{Glossary("JavaScript")}} 语言的核心规范 [the ECMA-262 specification](https://www.ecma-international.org/publications/standards/Ecma-262.htm)（即 {{Glossary("ECMAScript")}}）而为人所知。 +在 Web 上，该组织因维护 {{Glossary("JavaScript")}} 语言的核心规范 [ECMA-262 规范](https://www.ecma-international.org/publications/standards/Ecma-262.htm)（即 {{Glossary("ECMAScript")}}）而为人所知。 ## 参见 -- Wikipedia 页面 [Ecma International](https://zh.wikipedia.org/wiki/Ecma_International) -- [The Ecma International web site](https://www.ecma-international.org/) +- 维基百科上的 [Ecma 国际](https://zh.wikipedia.org/wiki/Ecma国际) +- [Ecma 国际的网站](https://www.ecma-international.org/) From e841449e600d31842364300a7c0a8ca15eb1a848 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Sat, 6 Jul 2024 20:07:43 +0800 Subject: [PATCH 056/698] zh-CN: update Glossary/Firewall (#22196) --- files/zh-cn/glossary/firewall/index.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/files/zh-cn/glossary/firewall/index.md b/files/zh-cn/glossary/firewall/index.md index e6121c7d4db21c..f9237498bdb8f6 100644 --- a/files/zh-cn/glossary/firewall/index.md +++ b/files/zh-cn/glossary/firewall/index.md @@ -1,14 +1,16 @@ --- title: 防火墙 slug: Glossary/Firewall +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -**防火墙**（firewall）是一个过滤网络流量的系统。根据一些指定的规则，它可以让网络流量通过，也可以阻止网络流量通过。例如，它可以阻止针对某个端口的入站连接或针对某个 IP 地址的出站连接。 +**防火墙**是一个过滤网络流量的系统。根据一些指定的规则，它可以让网络流量通过，也可以阻止网络流量通过。例如，它可以阻止针对某个端口的入站连接或针对某个 IP 地址的出站连接。 -防火墙可以是简单的单一软件，也可以是更复杂的，比如一台专门的机器，其唯一的功能就是充当防火墙。 +防火墙可以是简单的单一软件，也可以是更复杂的，比如一台专门充当防火墙角色的机器。 ## 参见 -- 维基百科上的[防火墙](https://zh.wikipedia.org/wiki/防火墙)词条 +- 维基百科上的[防火墙](https://zh.wikipedia.org/wiki/防火墙) From b2481ba5ec2e08776ff8803ed193c0763bca39f0 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 2 Jul 2024 01:08:11 +0900 Subject: [PATCH 057/698] =?UTF-8?q?2024/03/12=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/audioscheduledsourcenode/start/index.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/files/ja/web/api/audioscheduledsourcenode/start/index.md b/files/ja/web/api/audioscheduledsourcenode/start/index.md index 78dce977446049..bfa5dc8b8a5475 100644 --- a/files/ja/web/api/audioscheduledsourcenode/start/index.md +++ b/files/ja/web/api/audioscheduledsourcenode/start/index.md @@ -1,13 +1,15 @@ --- -title: AudioScheduledSourceNode.start() +title: "AudioScheduledSourceNode: start() メソッド" +short-title: start() slug: Web/API/AudioScheduledSourceNode/start l10n: - sourceCommit: 9ad07c43f42e14278a4040fd554af33699aea632 + sourceCommit: 0a881eea07f0cec6ca4ed85a24af43b367a9f80d --- {{APIRef("Web Audio API")}} -`start()` は {{domxref("AudioScheduledSourceNode")}} のメソッドで、指定した時刻に再生が始まるように、音をスケジュールします。時刻を指定しなかった場合は、すぐに音を再生し始めます。 +`start()` は {{domxref("AudioScheduledSourceNode")}} のメソッドで、指定した時刻に再生が始まるように、音をスケジュールします。 +時刻を指定しなかった場合は、すぐに音を再生し始めます。 ## 構文 @@ -19,7 +21,7 @@ start(when) ### 引数 - `when` {{optional_inline}} - - : 音の再生を始めるべき時刻を、秒単位で指定します。この値は {{domxref("AudioContext")}} がその {{domxref("BaseAudioContext/currentTime", "currentTime")}} 属性で使用しているのと同じ時間座標系で指定します。 0 の値を指定する（または`when`引数を完全に除外する）と、音の再生をすぐに始めるようにします。 + - : 音の再生を始めるべき時刻を、秒単位で指定します。この値は {{domxref("AudioContext")}} がその {{domxref("BaseAudioContext/currentTime", "currentTime")}} 属性で使用しているのと同じ時間座標系で指定します。0 の値を指定する（または `when` 引数を完全に除外する）と、音の再生をすぐに始めるようにします。 ### 返値 @@ -30,11 +32,11 @@ start(when) - `InvalidStateNode` {{domxref("DOMException")}} - : ノードが既に開始されている場合に発生します。このエラーは {{domxref("AudioScheduledSourceNode.stop", "stop()")}} を事前に呼び出したためにノードがもう実行されていない場合でも発生します。 - {{jsxref("RangeError")}} - - : when` に指定した値が負である場合に発生します。 + - : `when` に指定した値が負である場合に発生します。 ## 例 -この例では、2秒後に再生を始め、その1秒後に再生を停止するようにスケジュールされた {{domxref("OscillatorNode")}} を作成する方法を示します。時刻は {{domxref("BaseAudioContext/currentTime", "AudioContext.currentTime")}} が返すコンテキストの現在のタイムスタンプに希望の秒数を加えることで計算されます。 +この例では、2 秒後に再生を始め、その1秒後に再生を停止するようにスケジュールされた {{domxref("OscillatorNode")}} を作成する方法を示します。時刻は {{domxref("BaseAudioContext/currentTime", "AudioContext.currentTime")}} が返すコンテキストの現在のタイムスタンプに希望の秒数を加えることで計算されます。 ```js context = new AudioContext(); From 3d025ae3b9718745b70be8e2c85dc90bfa4e0000 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 2 Jul 2024 01:10:32 +0900 Subject: [PATCH 058/698] =?UTF-8?q?2024/03/12=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/audioscheduledsourcenode/stop/index.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/files/ja/web/api/audioscheduledsourcenode/stop/index.md b/files/ja/web/api/audioscheduledsourcenode/stop/index.md index b55c4a3f30afe3..34a0fce46a69d5 100644 --- a/files/ja/web/api/audioscheduledsourcenode/stop/index.md +++ b/files/ja/web/api/audioscheduledsourcenode/stop/index.md @@ -1,8 +1,9 @@ --- -title: AudioScheduledSourceNode.stop() +title: "AudioScheduledSourceNode: stop() メソッド" +short-title: stop() slug: Web/API/AudioScheduledSourceNode/stop l10n: - sourceCommit: 9ad07c43f42e14278a4040fd554af33699aea632 + sourceCommit: 0a881eea07f0cec6ca4ed85a24af43b367a9f80d --- {{ APIRef("Web Audio API") }} From f2c3b7619a6fe826f104bb913bb91c6ce3cb04e0 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 2 Jul 2024 01:12:59 +0900 Subject: [PATCH 059/698] =?UTF-8?q?2023/04/06=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/audioscheduledsourcenode/ended_event/index.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/files/ja/web/api/audioscheduledsourcenode/ended_event/index.md b/files/ja/web/api/audioscheduledsourcenode/ended_event/index.md index ef7f7bd7bcbb5c..b87cd88336091d 100644 --- a/files/ja/web/api/audioscheduledsourcenode/ended_event/index.md +++ b/files/ja/web/api/audioscheduledsourcenode/ended_event/index.md @@ -1,15 +1,16 @@ --- title: "AudioScheduledSourceNode: ended イベント" +short-title: ended slug: Web/API/AudioScheduledSourceNode/ended_event l10n: - sourceCommit: 418f9cf461de0c7845665c0c677ad0667740f52a + sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8 --- {{DefaultAPISidebar("Web Audio API")}} `ended` は {{domxref("AudioScheduledSourceNode")}} インターフェイスのイベントで、ソースノードの再生が停止したときに発生します。 -このイベントは、{{domxref("AudioScheduledSourceNode")}}の再生が停止したときに発生します。理由は、所定の停止時刻に達したか、音声の全時間が再生されたか、またはバッファーの全体が再生されたかのいずれかです。 +このイベントは、{{domxref("AudioScheduledSourceNode")}} の再生が停止したときに発生します。理由は、所定の停止時刻に達したか、音声の全時間が再生されたか、またはバッファーの全体が再生されたかのいずれかです。 このイベントはキャンセル不可で、バブリングしません。 @@ -47,11 +48,11 @@ node.onended = () => { ended イベントの使用例は、 [audio-buffer の例 (GitHub)](https://mdn.github.io/webaudio-examples/audio-buffer/) を参照してください。 -## 仕様 +## 仕様書 {{Specifications}} -## ブラウザー互換性 +## ブラウザーの互換性 {{Compat}} From 5d9f0bc36a9975ba9c2bc0cc6d8c941a9289b9cf Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 2 Jul 2024 22:59:32 +0900 Subject: [PATCH 060/698] =?UTF-8?q?2023/02/18=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/audioscheduledsourcenode/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/ja/web/api/audioscheduledsourcenode/index.md b/files/ja/web/api/audioscheduledsourcenode/index.md index 15defa2837e8ed..85eacc4dbb888b 100644 --- a/files/ja/web/api/audioscheduledsourcenode/index.md +++ b/files/ja/web/api/audioscheduledsourcenode/index.md @@ -2,7 +2,7 @@ title: AudioScheduledSourceNode slug: Web/API/AudioScheduledSourceNode l10n: - sourceCommit: 6b8b53f565c67eb22fd78f8dec036c4694ad18d4 + sourceCommit: bca8d1ab2bc4f5a1ef6b39c454b0229539178e98 --- {{APIRef("Web Audio API")}} @@ -34,7 +34,7 @@ _親インターフェイスである {{domxref("AudioNode")}} からメソッ これらのイベントは [`addEventListener()`](/ja/docs/Web/API/EventTarget/addEventListener) を使用するか、このインターフェイス `onイベント名` プロパティにイベントリスナーを代入することで待ち受けすることができます。 - [`ended`](/ja/docs/Web/API/AudioScheduledSourceNode/ended_event) - - : ソースノードが、所定の停止時間に達した、音声の全時間が演奏された、あるいはバッファの全体が演奏されたなどの理由で、再生を停止したときに発行されます。 + - : ソースノードが、所定の停止時間に達した、音声の全時間が演奏された、あるいはバッファーの全体が演奏されたなどの理由で、再生を停止したときに発行されます。 ## 仕様書 From dfda2fb70e0c1fadb2e3f4298ed997c145e09716 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 2 Jul 2024 23:40:48 +0900 Subject: [PATCH 061/698] =?UTF-8?q?2023/04/06=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/baseaudiocontext/audioworklet/index.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/files/ja/web/api/baseaudiocontext/audioworklet/index.md b/files/ja/web/api/baseaudiocontext/audioworklet/index.md index fbdcee6e526155..7ba77a4e298122 100644 --- a/files/ja/web/api/baseaudiocontext/audioworklet/index.md +++ b/files/ja/web/api/baseaudiocontext/audioworklet/index.md @@ -1,6 +1,9 @@ --- -title: BaseAudioContext.audioWorklet +title: "BaseAudioContext: audioWorklet プロパティ" +short-title: audioWorklet slug: Web/API/BaseAudioContext/audioWorklet +l10n: + sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8 --- {{ APIRef("Web Audio API") }}{{securecontext_header}} From 593256c293d46ccab81430d7a88f8dc8f11921ee Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 3 Jul 2024 00:32:51 +0900 Subject: [PATCH 062/698] =?UTF-8?q?2023/04/06=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/baseaudiocontext/currenttime/index.md | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/files/ja/web/api/baseaudiocontext/currenttime/index.md b/files/ja/web/api/baseaudiocontext/currenttime/index.md index 9e09632789b81e..1a68e04779af86 100644 --- a/files/ja/web/api/baseaudiocontext/currenttime/index.md +++ b/files/ja/web/api/baseaudiocontext/currenttime/index.md @@ -1,6 +1,9 @@ --- -title: BaseAudioContext.currentTime +title: "BaseAudioContext: currentTime プロパティ" +short-title: currentTime slug: Web/API/BaseAudioContext/currentTime +l10n: + sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8 --- {{ APIRef("Web Audio API") }} @@ -14,18 +17,17 @@ slug: Web/API/BaseAudioContext/currentTime ## 例 ```js -var AudioContext = window.AudioContext || window.webkitAudioContext; -var audioCtx = new AudioContext(); +const audioCtx = new AudioContext(); // 古い webkit/blink ブラウザーでは接頭辞が必要です -... +// … console.log(audioCtx.currentTime); ``` ## 時刻の精度の縮小 -タイミング攻撃やフィンガープリントに対する保護を提供するために、ブラウザーの設定によっては `audioCtx.currentTime` の値が丸められることがあります。 +タイミング攻撃や[フィンガープリント](/ja/docs/Glossary/Fingerprinting)に対する保護を提供するために、ブラウザーの設定によっては `audioCtx.currentTime` の値が丸められることがあります。 Firefox では、環境設定の `privacy.reduceTimerPrecision` が既定で有効になっており、 Firefox 59 では 20us、60 では 2ms になっています。 ```js @@ -34,14 +36,14 @@ audioCtx.currentTime; // 23.404 // 24.192 // 25.514 -// ... +// … // reduced time precision with `privacy.resistFingerprinting` enabled audioCtx.currentTime; // 49.8 // 50.6 // 51.7 -// ... +// … ``` Firefox では、 `privacy.resistFingerprinting` を有効にすると、精度は 100ms または `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` の値のどちらか大きいほうになります。 From 85e16308050ebde1e9da0a526d540dda4ae727a8 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 3 Jul 2024 00:36:41 +0900 Subject: [PATCH 063/698] =?UTF-8?q?2023/04/06=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/api/baseaudiocontext/destination/index.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/files/ja/web/api/baseaudiocontext/destination/index.md b/files/ja/web/api/baseaudiocontext/destination/index.md index d3d063f20e5b9e..33f87c7c47766b 100644 --- a/files/ja/web/api/baseaudiocontext/destination/index.md +++ b/files/ja/web/api/baseaudiocontext/destination/index.md @@ -1,6 +1,9 @@ --- -title: BaseAudioContext.destination +title: "BaseAudioContext: destination プロパティ" +short-title: destination slug: Web/API/BaseAudioContext/destination +l10n: + sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8 --- {{ APIRef("Web Audio API") }} @@ -13,15 +16,14 @@ slug: Web/API/BaseAudioContext/destination ## 例 -> **メモ:** 完全な実装の例は、 [MDN GitHub リポジトリー](https://github.com/mdn/)の [voice-change-o-matic](https://github.com/mdn/voice-change-o-matic) などを参照してください。 +> **メモ:** より完全な応用例や情報については、[Voice-change-O-matic](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic) のデモをご覧ください（関連するコードは [app.js の 108 - 193 行目](https://github.com/mdn/webaudio-examples/blob/main/voice-change-o-matic/scripts/app.js#L108-L193)を参照）。 ```js -var AudioContext = window.AudioContext || window.webkitAudioContext; -var audioCtx = new AudioContext(); +const audioCtx = new AudioContext(); // 古い webkit/blink のブラウザーでは接頭辞が必要です -var oscillatorNode = audioCtx.createOscillator(); -var gainNode = audioCtx.createGain(); +const oscillatorNode = audioCtx.createOscillator(); +const gainNode = audioCtx.createGain(); oscillatorNode.connect(gainNode); gainNode.connect(audioCtx.destination); From c2d0e15c65f5a5cf64106116bea534c4a494be1f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 3 Jul 2024 00:55:01 +0900 Subject: [PATCH 064/698] =?UTF-8?q?2023/11/29=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/baseaudiocontext/listener/index.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/files/ja/web/api/baseaudiocontext/listener/index.md b/files/ja/web/api/baseaudiocontext/listener/index.md index 0231b98ee82397..38823966e97ec7 100644 --- a/files/ja/web/api/baseaudiocontext/listener/index.md +++ b/files/ja/web/api/baseaudiocontext/listener/index.md @@ -1,8 +1,9 @@ --- -title: BaseAudioContext.listener +title: "BaseAudioContext: listener プロパティ" +short-title: listener slug: Web/API/BaseAudioContext/listener l10n: - sourceCommit: bf30e32f3b51f59080f2c76795beadb247a551eb + sourceCommit: 10b342385644e822d123694ad3bc8c2ca9abb2dc --- {{ APIRef("Web Audio API") }} @@ -15,7 +16,7 @@ l10n: ## 例 -> **メモ:** 完全な三次元音声空間処理の例は、 [panner-node](https://github.com/mdn/webaudio-examples/tree/master/panner-node) のデモを参照してください。 +> **メモ:** 完全な三次元音声空間処理の例は、 [panner-node](https://github.com/mdn/webaudio-examples/tree/main/panner-node) のデモを参照してください。 ```js const audioCtx = new AudioContext(); From fb5ba51b84634b559fe084c2111e3ff731b32cc1 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 3 Jul 2024 00:56:55 +0900 Subject: [PATCH 065/698] =?UTF-8?q?2024/03/12=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/baseaudiocontext/samplerate/index.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/files/ja/web/api/baseaudiocontext/samplerate/index.md b/files/ja/web/api/baseaudiocontext/samplerate/index.md index 2036a78b8b3381..ff0a0a632dfdf7 100644 --- a/files/ja/web/api/baseaudiocontext/samplerate/index.md +++ b/files/ja/web/api/baseaudiocontext/samplerate/index.md @@ -1,13 +1,15 @@ --- -title: BaseAudioContext.sampleRate +title: "BaseAudioContext: sampleRate プロパティ" +short-title: sampleRate slug: Web/API/BaseAudioContext/sampleRate l10n: - sourceCommit: bf30e32f3b51f59080f2c76795beadb247a551eb + sourceCommit: 0a881eea07f0cec6ca4ed85a24af43b367a9f80d --- {{ APIRef("Web Audio API") }} -`sampleRate` は {{domxref("BaseAudioContext") }} インターフェイスのプロパティで、この音声コンテキスト内のすべてのノードが使用するサンプリングレートを、1 秒あたりのサンプル数で表した浮動小数点数を返すものです。この制限は、サンプリングレートコンバーターに対応していないことを意味します。 +`sampleRate` は {{domxref("BaseAudioContext")}} インターフェイスのプロパティで、この音声コンテキスト内のすべてのノードが使用するサンプリングレートを、1 秒あたりのサンプル数で表した浮動小数点数を返すものです。 +この制限は、サンプリングレートコンバーターに対応していないことを意味します。 ## 値 From de84f4696f80d1fd874b8dc64622918a62dd0d73 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Sat, 6 Jul 2024 22:48:33 +0800 Subject: [PATCH 066/698] zh-CN: create Glossary/Firefox_OS (#22195) Co-authored-by: A1lo --- files/zh-cn/glossary/firefox_os/index.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 files/zh-cn/glossary/firefox_os/index.md diff --git a/files/zh-cn/glossary/firefox_os/index.md b/files/zh-cn/glossary/firefox_os/index.md new file mode 100644 index 00000000000000..2c9e0d9321c590 --- /dev/null +++ b/files/zh-cn/glossary/firefox_os/index.md @@ -0,0 +1,12 @@ +--- +title: Firefox OS +slug: Glossary/Firefox_OS +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +Firefox OS 是一个已停止开发的开源移动操作系统，由 Mozilla 开发。详情请参见 [Firefox OS](https://zh.wikipedia.org/wiki/Firefox_OS)。 + +在项目有正式名称之前，Firefox OS 也常被称为 Boot2Gecko。 From f114381c02c0965dd1776d50ba7e543ab4eabdbf Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Sat, 6 Jul 2024 22:53:42 +0800 Subject: [PATCH 067/698] zh-CN: create Glossary/Static_typing (#22200) --- files/zh-cn/glossary/static_typing/index.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 files/zh-cn/glossary/static_typing/index.md diff --git a/files/zh-cn/glossary/static_typing/index.md b/files/zh-cn/glossary/static_typing/index.md new file mode 100644 index 00000000000000..0420e60a899fa8 --- /dev/null +++ b/files/zh-cn/glossary/static_typing/index.md @@ -0,0 +1,14 @@ +--- +title: 静态类型 +slug: Glossary/Static_typing +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**静态类型**语言是在编译时已知变量类型的语言，例如 Java、C 或 C++。在大多数这类语言中，类型必须由程序员明确指定；在其他情况下（例如 OCaml），类型推断允许程序员不指定其变量类型。 + +## 参见 + +- 维基百科上的[类型系统](https://zh.wikipedia.org/wiki/類型系統) From aa87d1d684197d0beb0ba6d7fb2857b1c55a8219 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Sun, 7 Jul 2024 09:53:39 +0800 Subject: [PATCH 068/698] zh-CN: update Glossary/Element (#22193) --- files/zh-cn/glossary/element/index.md | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/files/zh-cn/glossary/element/index.md b/files/zh-cn/glossary/element/index.md index bf8e55b48d1d87..7f9f078ab80794 100644 --- a/files/zh-cn/glossary/element/index.md +++ b/files/zh-cn/glossary/element/index.md @@ -1,17 +1,20 @@ --- -title: Element（元素） +title: 元素 slug: Glossary/Element +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -**元素**是网页的一部分，在 {{glossary("XML")}} 和 {{glossary("HTML")}} 中，一个元素可以包含一个数据项，或是一块文本，或是一张照片，亦或是什么也不包含。一个典型的元素包括一个具有一些{{glossary("attribute", "属性")}}的开始标签，中间的文本内容和一个结束标签。 -![Example: in

    Hello world!

    , '

    ' is an opening tag, 'class="nice"' is an attribute and its value, 'Hello world!' is enclosed text content, and '

    ' is a closing tag.](anatomy-of-an-html-element.png) +**元素**是网页的一部分。在 {{glossary("XML")}} 和 {{glossary("HTML")}} 中，一个元素可以包含一个数据项，或是一块文本，或是一张照片，亦或是什么也不包含。一个典型的元素包括一个具有一些{{glossary("attribute", "属性")}}的开始标签，中间的文本内容和一个结束标签。 -元素和{{glossary("tag", "标签")}}不是同一种概念。源代码中的标签用来标识元素的开始或结束，而元素是文档对象模型（{{Glossary("DOM")}}）中的一部分，文档对象模型会被{{glossary("browser", "浏览器")}}渲染、展示为页面。 +![例子：在

    Hello world!

    中，“

    ”是开始标签，“class="nice"”是一个属性及其赋值，“Hello world!”是所包含的文本内容，“

    ”是结束标签。](anatomy-of-an-html-element.png) -## 相关信息 +元素和{{glossary("tag", "标签")}}*不是*同一种概念。源代码中的标签用来标识元素的开始或结束，而元素是文档对象模型（{{Glossary("DOM")}}）——一个会在{{glossary("browser", "浏览器")}}中显示为页面——的一部分。 + +## 参见 - [开始学习 HTML](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started) -- [自定义元素（Custom element）](/zh-CN/docs/Web/API/Web_components/Using_custom_elements) +- [自定义元素](/zh-CN/docs/Web/API/Web_components/Using_custom_elements) - {{domxref("Element")}} 接口，在 DOM 中表示一个元素 From b3b885363f18e3440c695334823d9d293a63742d Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Sun, 7 Jul 2024 09:53:55 +0800 Subject: [PATCH 069/698] zh-CN: update Glossary/STUN (#22209) Co-authored-by: A1lo Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/zh-cn/glossary/stun/index.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/files/zh-cn/glossary/stun/index.md b/files/zh-cn/glossary/stun/index.md index 8325c0aa699d9e..4de5897ee229d8 100644 --- a/files/zh-cn/glossary/stun/index.md +++ b/files/zh-cn/glossary/stun/index.md @@ -1,15 +1,17 @@ --- title: STUN slug: Glossary/STUN +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -**STUN** (NAT 会话穿越工具) 是一个{{glossary("NAT")}} (网络地址转换器) 传递数据的辅助协议。STUN 会返回一台位于 NAT 背后的已接入网络的主机的{{glossary("IP address")}}(IP 地址)、{{glossary("port")}}(端口号) 和连通状态。 +**STUN**（NAT 会话穿越应用程序）是一个用于绕过 {{glossary("NAT")}}（网络地址转换器）传递数据的辅助协议。STUN 会返回一台位于 NAT 背后的已接入网络的计算机的 {{glossary("IP address", "IP 地址")}}、{{glossary("port", "端口")}}和连通状态。 ## 参见 -- [STUN](https://zh.wikipedia.org/wiki/STUN) 在 维基百科 +- 维基百科上的 [STUN](https://zh.wikipedia.org/wiki/STUN) - [WebRTC 协议](/zh-CN/docs/Web/API/WebRTC_API/Protocols) ### 技术参考 From 36218ee2801060f5ae5821110600234f9ae6ae2c Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Sun, 7 Jul 2024 10:16:34 +0800 Subject: [PATCH 070/698] zh-CN: update Glossary/Statement (#22199) Co-authored-by: A1lo --- files/zh-cn/glossary/statement/index.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/files/zh-cn/glossary/statement/index.md b/files/zh-cn/glossary/statement/index.md index fb3223f7a4762d..686865c7e03c5d 100644 --- a/files/zh-cn/glossary/statement/index.md +++ b/files/zh-cn/glossary/statement/index.md @@ -1,15 +1,15 @@ --- -title: Statement +title: 语句 slug: Glossary/Statement +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -在计算机编程语言中，**语句** 是一行任务指令的代码。每个程序都包含若干语句。 +在计算机编程语言中，**语句**是一行任务指令的代码。每个程序都包含若干语句。 -## 更多 - -### 一般知识 +## 参见 - 维基百科上的[语句（程序设计）](https://zh.wikipedia.org/wiki/陳述式) - [JavaScript 语句和声明](/zh-CN/docs/Web/JavaScript/Reference/Statements) From 83afb0b24c437f7b9eba7088e4892d06281309aa Mon Sep 17 00:00:00 2001 From: A1lo Date: Sun, 7 Jul 2024 11:35:30 +0800 Subject: [PATCH 071/698] docs(zh-cn): add two headings which is related to the ARIA topic (#21710) --- docs/zh-cn/glossary.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/zh-cn/glossary.md b/docs/zh-cn/glossary.md index e9e346db765b4d..3bb943afe0379b 100644 --- a/docs/zh-cn/glossary.md +++ b/docs/zh-cn/glossary.md @@ -62,6 +62,8 @@ | ---------------------- | ------------ | ------------------ | --------------------------------------------------------------------------- | | Accessibility concerns | 无障碍考虑 | | https://github.com/mdn/translated-content/issues/11456 | | Active learning | 动手练习 | | https://github.com/mdn/translated-content/pull/12696#discussion_r1164859935 | +| Associated interfaces | 相关接口 | | | +| Associated roles | 相关角色 | | | | Browser compatibility | 浏览器兼容性 | | | | Conclusion | 总结 | | https://github.com/mdn/translated-content/pull/13329#discussion_r1199677894 | | Examples | 示例 | | | From cd314d5f649f25c9ad487b8e7bfe118abdac129c Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Sun, 7 Jul 2024 11:40:27 +0800 Subject: [PATCH 072/698] zh-CN: create Glossary/Fingerprinting (#22194) --- files/zh-cn/glossary/fingerprinting/index.md | 26 ++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 files/zh-cn/glossary/fingerprinting/index.md diff --git a/files/zh-cn/glossary/fingerprinting/index.md b/files/zh-cn/glossary/fingerprinting/index.md new file mode 100644 index 00000000000000..4fb36e6f27cf84 --- /dev/null +++ b/files/zh-cn/glossary/fingerprinting/index.md @@ -0,0 +1,26 @@ +--- +title: 指纹识别 +slug: Glossary/Fingerprinting +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**指纹识别**是一种通过收集和组合浏览器和底层操作系统的不同特征来识别特定浏览器（进而识别特定用户）的网站实践。指纹的元素可能包括，例如： + +- 浏览器版本 +- 时区和首选语言 +- 系统上可用的视频或音频编解码器 +- 系统上安装的字体 +- 浏览器设置的状态 +- 计算机的显示尺寸和分辨率 + +网站可以通过在设备上执行 JavaScript 和 CSS 来检索这些信息，并通过组合这些数据，通常可以为浏览器创建一个唯一的指纹，然后可以用于跨网站跟踪用户。 + +Web 标准的设计旨在尽量减少网站收集识别信息的能力，浏览器通常也会添加自己的保护措施。 + +## 参见 + +- [覆盖你的所有浏览痕迹](https://coveryourtracks.eff.org)：一个展示网站可以用来指纹识别你浏览器数据的工具。 +- [缓和浏览器指纹识别的 Web 规范](https://www.w3.org/TR/fingerprinting-guidance/)：为规范作者提供的防止指纹识别的最佳实践。 From ffc6000f5f1020d572f02e002d1da628adeec4e6 Mon Sep 17 00:00:00 2001 From: A1lo Date: Sun, 7 Jul 2024 12:00:53 +0800 Subject: [PATCH 073/698] fix: update the description of the `ToggleEvent` interface (#22190) --- files/zh-cn/web/api/toggleevent/index.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/files/zh-cn/web/api/toggleevent/index.md b/files/zh-cn/web/api/toggleevent/index.md index 40b19f611e7cea..688cecf307958a 100644 --- a/files/zh-cn/web/api/toggleevent/index.md +++ b/files/zh-cn/web/api/toggleevent/index.md @@ -2,19 +2,17 @@ title: ToggleEvent slug: Web/API/ToggleEvent l10n: - sourceCommit: a4e0df90868c274842b083ad034eb60f57b76aae + sourceCommit: 672033be010ddec986fd7e12fd01297995ecc9b0 --- {{APIRef("Popover API")}} -**`ToggleEvent`** 接口表示当[弹出框元素](/zh-CN/docs/Web/API/Popover_API)的状态在显示和隐藏之间切换时通知用户的事件。 +**`ToggleEvent`** 接口表示当元素的状态发生改变时通知用户的事件。 -它为 `HTMLElement` 的 {{domxref("HTMLElement.beforetoggle_event", "beforetoggle")}} 和 {{domxref("HTMLElement.toggle_event", "toggle")}} 事件提供事件对象，这两个事件会在弹出框元素在显示与隐藏状态间切换时（分别在切换前与切换后）触发。 +它为 `HTMLElement` 的 {{domxref("HTMLElement.beforetoggle_event", "beforetoggle")}} 和 {{domxref("HTMLElement.toggle_event", "toggle")}} 事件提供事件对象，这两个事件会在弹出框元素在显示与隐藏状态间切换时（分别在切换前与切换后）触发。它也为 `HTMLDetailsElement` 的 {{domxref("HTMLDetailsElement.toggle_event", "toggle")}} 事件提供事件对象，这一事件会在 {{htmlelement("details")}} 元素在展开和收起之间切换时触发。 {{InheritanceDiagram}} -> **备注：** `ToggleEvent` 与 `HTMLDetailsElement` 的 {{domxref("HTMLDetailsElement.toggle_event", "toggle")}} 事件无关，后者在 {{htmlelement("details")}} 元素的 `open`/`closed` 状态被切换时触发。其事件对象是一个通用的 {{domxref("Event")}}。 - ## 构造函数 - {{DOMxRef("ToggleEvent.ToggleEvent", "ToggleEvent()")}} From 6ec433a75e13ae2a712ac663a1033e6512e35aa7 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Sun, 7 Jul 2024 12:16:15 +0800 Subject: [PATCH 074/698] zh-CN: create Glossary/Symbol (#22205) Co-authored-by: A1lo --- files/zh-cn/_redirects.txt | 1 - files/zh-cn/glossary/symbol/index.md | 22 ++++++++++++++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 files/zh-cn/glossary/symbol/index.md diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index 706c66f65a27ad..10880690a5d6aa 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -530,7 +530,6 @@ /zh-CN/docs/Glossary/Serialize /zh-CN/docs/Glossary/Serialization /zh-CN/docs/Glossary/Simple_header /zh-CN/docs/Glossary/CORS-safelisted_request_header /zh-CN/docs/Glossary/Simple_response_header /zh-CN/docs/Glossary/CORS-safelisted_response_header -/zh-CN/docs/Glossary/Symbol /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol /zh-CN/docs/Glossary/Transferable_objects /zh-CN/docs/Web/API/Web_Workers_API/Transferable_objects /zh-CN/docs/Glossary/XHR_(XMLHttpRequest) /zh-CN/docs/Glossary/XMLHttpRequest /zh-CN/docs/Glossary/主轴 /zh-CN/docs/Glossary/Main_Axis diff --git a/files/zh-cn/glossary/symbol/index.md b/files/zh-cn/glossary/symbol/index.md new file mode 100644 index 00000000000000..c86137bcdc472f --- /dev/null +++ b/files/zh-cn/glossary/symbol/index.md @@ -0,0 +1,22 @@ +--- +title: 符号 +slug: Glossary/Symbol +l10n: + sourceCommit: 3cfbf63f7a2779fddf992863a96cb8947d407cf2 +--- + +{{GlossarySidebar}} + +**符号**是表示唯一、不可伪造标识的数据类型。它们有时被称为*原子*。 + +由于符号是唯一且不可伪造的，因此只有当你拥有原始标识的引用时，才能读取与符号关联的属性值。 + +在 JavaScript 中，`symbol` 是[原始类型](/zh-CN/docs/Glossary/Primitive)之一，可以使用 [`Symbol()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol) 工厂方法创建。该方法每次返回一个不同的符号，可以用作对象的键，而永远不会与其他属性发生意外冲突。 + +JavaScript 还定义了两种其他类别的符号：内置通用符号和注册符号。有关更多信息，参见 {{jsxref("Symbol")}} 参考。 + +## 参见 + +- 维基百科上的[数据类型](https://zh.wikipedia.org/wiki/資料類型) +- 维基百科上的[符号]() +- JavaScript 全局对象 {{jsxref("Symbol")}} From b985351943ac7c0a752f46f1a31d1571ff662026 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Sun, 7 Jul 2024 12:16:56 +0800 Subject: [PATCH 075/698] zh-CN: update Glossary/ECMAScript (#22197) Co-authored-by: A1lo --- files/zh-cn/glossary/ecmascript/index.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/files/zh-cn/glossary/ecmascript/index.md b/files/zh-cn/glossary/ecmascript/index.md index 1f0b3edef3b860..b96be0213cd682 100644 --- a/files/zh-cn/glossary/ecmascript/index.md +++ b/files/zh-cn/glossary/ecmascript/index.md @@ -1,11 +1,13 @@ --- title: ECMAScript slug: Glossary/ECMAScript +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -**ECMAScript** 是 {{glossary("JavaScript")}} 所基于的脚本语言。[Ecma 国际组织](https://www.ecma-international.org) 负责将 ECMAScript 标准化。 +**ECMAScript** 是 {{glossary("JavaScript")}} 所基于的脚本语言规范。[Ecma 国际](https://www.ecma-international.org)负责将 ECMAScript 标准化。 ## 参见 From 12f7a0822e319a6e41685634f419d9b21c02708d Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Sun, 7 Jul 2024 12:17:42 +0800 Subject: [PATCH 076/698] zh-CN: update Glossary/SVN (#22203) Co-authored-by: A1lo --- files/zh-cn/glossary/svn/index.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/files/zh-cn/glossary/svn/index.md b/files/zh-cn/glossary/svn/index.md index 658e9cfb2a9a6c..b245495e7deb91 100644 --- a/files/zh-cn/glossary/svn/index.md +++ b/files/zh-cn/glossary/svn/index.md @@ -1,13 +1,15 @@ --- title: SVN slug: Glossary/SVN +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -Apache Subversion (**SVN**) 是一个开源免费的源代码控制管理（{{Glossary("SCM")}}）系统。它允许开发者们保留文本和代码修改历史。虽然 SVN 可以操作二进制文件，但是我们不推荐这些文件使用 SVN。 +Apache Subversion（**SVN**）是一个开源免费的源代码控制管理（{{Glossary("SCM")}}）系统。它允许开发者保留文本和代码修改历史。虽然 SVN 可以处理二进制文件，但是我们不推荐将 SVN 用于这些文件。 ## 参见 -- 在维基百科上的 [Apache Subversion](https://zh.wikipedia.org/wiki/Subversion) +- 维基百科上的 [Apache Subversion](https://zh.wikipedia.org/wiki/Subversion) - [官方网站](https://subversion.apache.org/) From 432f2987abf9c668175c480f494baa5ace5f818f Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Sun, 7 Jul 2024 14:20:33 +0800 Subject: [PATCH 077/698] [zh-cn]: update the translation of `CanvasRenderingContext2D.canvas` property (#21943) Co-authored-by: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Co-authored-by: A1lo --- .../canvasrenderingcontext2d/canvas/index.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/canvas/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/canvas/index.md index 0864cbaa109a5d..23a94c23ffbf87 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/canvas/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/canvas/index.md @@ -1,17 +1,17 @@ --- -title: CanvasRenderingContext2D.canvas +title: CanvasRenderingContext2D：canvas 属性 slug: Web/API/CanvasRenderingContext2D/canvas +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 --- {{APIRef}} -**`CanvasRenderingContext2D.canvas`** 属性是 [Canvas API](/zh-CN/docs/Web/API/Canvas_API) 的一部分，是对与给定上下文关联的{{domxref("HTMLCanvasElement")}}对象的只读引用。如果没有 {{HTMLElement("canvas")}} 元素与之对应，对象值为{{jsxref("null")}} 。 +[Canvas API](/zh-CN/docs/Web/API/Canvas_API) 的 **`CanvasRenderingContext2D.canvas`** 属性是对与给定上下文关联的 {{domxref("HTMLCanvasElement")}} 对象的只读引用。如果没有与之关联的 {{HTMLElement("canvas")}} 元素，对象值为 {{jsxref("null")}}。 -## 语法 +## 值 -```plain -ctx.canvas; -``` +一个 {{domxref("HTMLCanvasElement")}} 对象。 ## 示例 @@ -21,15 +21,15 @@ ctx.canvas; ``` -你可以通过 CanvasRenderingContext2D 调用内部的 canvas 属性，获取 canvas 的一个反向引用： +你可以通过 `CanvasRenderingContext2D` 调用内部的 `canvas` 属性，获取 canvas 元素的引用： ```js -var canvas = document.getElementById("canvas"); -var ctx = canvas.getContext("2d"); +const canvas = document.getElementById("canvas"); +const ctx = canvas.getContext("2d"); ctx.canvas; // HTMLCanvasElement ``` -## 规范描述 +## 规范 {{Specifications}} From 243abb3609348667d369379d54fcc1cf3ceda651 Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Sun, 7 Jul 2024 14:21:02 +0800 Subject: [PATCH 078/698] [zh-cn]: update the tranlation of `CanvasRenderingContext2D.imageSmoothingEnabled` property (#21954) Co-authored-by: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Co-authored-by: A1lo --- .../imagesmoothingenabled/index.md | 26 ++++++++----------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md index 97d1f62812b865..9e42d49ec3523c 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md @@ -1,26 +1,21 @@ --- -title: CanvasRenderingContext2D.imageSmoothingEnabled +title: CanvasRenderingContext2D：imageSmoothingEnabled 属性 slug: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 --- {{APIRef}} -**`CanvasRenderingContext2D.imageSmoothingEnabled`** 是 Canvas 2D API 用来设置图片是否平滑的属性，true 表示图片平滑（默认值），false 表示图片不平滑。当我们获取 `imageSmoothingEnabled` 属性值时，它会返回最新设置的值。 +[Canvas API](/zh-CN/docs/Web/API/Canvas_API) 的 {{domxref("CanvasRenderingContext2D")}} 接口的 **`imageSmoothingEnabled`** 属性用于设置是否对缩放后的图片进行平滑处理，`true` 表示进行平滑处理（默认值），`false` 表示不进行。当我们获取 `imageSmoothingEnabled` 属性值时，它会返回最新设置的值。 -以缩放画布为例，这个属性对像素为主的游戏很有用。默认的改变大小的算法会造成图片模糊并且破坏图片原有的像素。如果那样的话，设置属性值为 false。参见 CSS {{cssxref("image-rendering")}} 属性。 +这个属性对像素为主的游戏或其他应用很有用。放大图像时，默认的调整大小的算法会使得像素变模糊。可以将此属性设为 `false` 来保证像素的清晰度。 -> **备注：** 你可以使用{{domxref("CanvasRenderingContext2D.imageSmoothingQuality", "imageSmoothingQuality")}}属性来调整平滑质量。 +> **备注：** 你可以使用 {{domxref("CanvasRenderingContext2D.imageSmoothingQuality", "imageSmoothingQuality")}} 属性来调整平滑质量。 -## 语法 +## 值 -``` -ctx.imageSmoothingEnabled = value; -``` - -### 选项 - -- `value` - - : 一个{{jsxref("Boolean")}} 类型的值，表示图片是否平滑。 +一个布尔值，指示是否对缩放的图像进行平滑处理。默认值是 `true`。 ## 示例 @@ -50,7 +45,7 @@ img.onload = () => { const w = img.width, h = img.height; - ctx.fillText("Source", w * 0.5, 20); + ctx.fillText("源文件", w * 0.5, 20); ctx.drawImage(img, 0, 24, w, h); ctx.fillText("Smoothing = TRUE", w * 2.5, 20); @@ -77,5 +72,6 @@ img.onload = () => { ## 参见 -- 接口定义， {{domxref("CanvasRenderingContext2D")}} +- 定义此属性的接口：{{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.imageSmoothingQuality")}} - {{cssxref("image-rendering")}} From 241aad65a0f73b259ee3e361c42ae3d474fcf8b2 Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Sun, 7 Jul 2024 15:43:07 +0800 Subject: [PATCH 079/698] [zh-cn]: update the translation of `tabs.query()` method (#21804) Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- .../webextensions/api/tabs/query/index.md | 26 +++++++++++-------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/query/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/query/index.md index b8e087ce853b9c..cec7ed159c81d8 100644 --- a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/query/index.md +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/query/index.md @@ -1,6 +1,8 @@ --- title: tabs.query() slug: Mozilla/Add-ons/WebExtensions/API/tabs/query +l10n: + sourceCommit: a6313e45a6ae4c356325f06d0e7e8919bab251a8 --- {{AddonSidebar}} @@ -12,12 +14,12 @@ slug: Mozilla/Add-ons/WebExtensions/API/tabs/query ## 语法 ```js-nolint -let querying = browser.tabs.query(queryObj) +let querying = browser.tabs.query(queryInfo) ``` ### 参数 -- `queryObj` +- `queryInfo` - : `object`。`query()` 函数将仅获取其属性与此处包含的属性相匹配的标签页。 @@ -25,12 +27,14 @@ let querying = browser.tabs.query(queryObj) - `active` {{optional_inline}} - : `boolean`。标签页是否在窗口中处于活动状态。 + - `attention` {{optional_inline}} + - : `boolean`。指示标签页是否正在吸引注意力。 - `audible` {{optional_inline}} - : `boolean`。标签页是否在播放声音。 - `autoDiscardable` {{optional_inline}} - : `boolean`。浏览器是否可以自动丢弃该标签页。默认值为 `true`。若设置为 `false`，则浏览器将不会自动丢弃该标签页。但是，标签页仍可使用 {{WebExtAPIRef("tabs.discard")}} 来丢弃。 - `cookieStoreId` {{optional_inline}} - - : `string` 或 `string` 数组。使用它来返回 `tab.cookieStoreId` 与指定的任何 `cookieStoreId` 字符串相匹配的标签页。此选项仅在附加组件具有 `"cookies"` [权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)时才可用。 + - : `string` 或 `string` 数组。使用它来返回 `tab.cookieStoreId` 与指定的任何 `cookieStoreId` 字符串相匹配的标签页。此选项仅在附加组件具有 `"cookies"` [权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)时才可用。有关详细信息，请参见[使用场景身份](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Work_with_contextual_identities)。 - `currentWindow` {{optional_inline}} - : `boolean`。标签页是否在当前窗口中。 - `discarded` {{optional_inline}} @@ -44,7 +48,7 @@ let querying = browser.tabs.query(queryObj) - `muted` {{optional_inline}} - : `boolean`。标签页是否静音。 - `lastFocusedWindow` {{optional_inline}} - - : `boolean`。标签页是否在最近聚焦的（last focused）窗口中。 + - : `boolean`。标签页是否在最近聚焦的窗口中。 - `pinned` {{optional_inline}} - : `boolean`。标签页是否固定。 - `status` {{optional_inline}} @@ -54,15 +58,15 @@ let querying = browser.tabs.query(queryObj) - `url` {{optional_inline}} - : `string` 或 `string` 数组。将标签页与一个或多个[匹配模式](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Match_patterns)进行匹配。请注意，不会匹配片段标识符。需要“tabs”权限或匹配标签的[主机权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#主机权限)。 - `windowId` {{optional_inline}} - - : `integer`。父窗口的 ID，或 {{WebExtAPIRef('windows.WINDOW_ID_CURRENT')}}（用于当前窗口）。 + - : `integer`。父窗口的 `id`，或 {{WebExtAPIRef('windows.WINDOW_ID_CURRENT')}}（用于当前窗口）。 - `windowType` {{optional_inline}} - : {{WebExtAPIRef('tabs.WindowType')}}。标签页所在窗口的类型。 ### 返回值 -一个将兑现为包含 {{WebExtAPIRef('tabs.Tab')}} 对象（其中包含有关每个匹配的标签页的信息）的数组的 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 对象。 +一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现为包含 {{WebExtAPIRef('tabs.Tab')}} 对象（其中包含有关每个匹配的标签页的信息）的数组。 -如果发生任何错误，promise 将以一条错误消息被拒绝。 +如果发生任何错误，promise 将以错误消息拒绝。 ## 示例 @@ -71,13 +75,13 @@ let querying = browser.tabs.query(queryObj) ```js function logTabs(tabs) { for (const tab of tabs) { - // tab.url 需要 `tabs` 权限或匹配的主机（host）权限。 + // tab.url 需要 `tabs` 权限或匹配的主机权限。 console.log(tab.url); } } function onError(error) { - console.error(`错误：${error}`); + console.error(`发生错误：${error}`); } browser.tabs.query({}).then(logTabs, onError); @@ -94,7 +98,7 @@ function logTabs(tabs) { } function onError(error) { - console.log(`错误：${error}`); + console.log(`发生错误：${error}`); } browser.tabs.query({ currentWindow: true }).then(logTabs, onError); @@ -128,7 +132,7 @@ function logTabs(tabs) { } function onError(error) { - console.error(`错误：${error}`); + console.error(`发生错误：${error}`); } browser.tabs.query({ url: "*://*.mozilla.org/*" }).then(logTabs, onError); From e37b05df9c382d601451a1e0c288740beb9c4576 Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Sun, 7 Jul 2024 15:50:59 +0800 Subject: [PATCH 080/698] [zh-cn]: update the translation of `CanvasPattern` interface (#21940) Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- files/zh-cn/web/api/canvaspattern/index.md | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/files/zh-cn/web/api/canvaspattern/index.md b/files/zh-cn/web/api/canvaspattern/index.md index e47d3d53f9447b..f22384f5ad7216 100644 --- a/files/zh-cn/web/api/canvaspattern/index.md +++ b/files/zh-cn/web/api/canvaspattern/index.md @@ -1,17 +1,21 @@ --- title: CanvasPattern slug: Web/API/CanvasPattern +l10n: + sourceCommit: daeff1a2efaae366bcc8b6d911d86985646e665e --- -{{APIRef("Canvas")}} +{{APIRef("Canvas API")}}{{AvailableInWorkers}} -**`CanvasPattern`** 接口表示描述一个模板（基于 image、canvas 或 video）的不透明对象，通过 {{domxref("CanvasRenderingContext2D.createPattern()")}} 方法创建。 +**`CanvasPattern`** 接口表示一个[不透明对象](https://en.wikipedia.org/wiki/Opaque_data_type)，描述了一个基于图像、画布或视频的模板，该模板通过 {{domxref("CanvasRenderingContext2D.createPattern()")}} 方法创建。 -## 属性 +它可以用作 {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} 或 {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}。 + +## 实例属性 _非透明对象，没有暴露的属性。_ -## 方法 +## 实例方法 _没有继承来的方法。_ @@ -29,4 +33,4 @@ _没有继承来的方法。_ ## 参见 - {{domxref("CanvasRenderingContext2D.createPattern()")}} -- {{HTMLElement("canvas")}} 元素及和 canvas 相关接口 {{domxref("HTMLCanvasElement")}} +- {{HTMLElement("canvas")}} 元素及其相关接口{{domxref("HTMLCanvasElement")}} From f3f0154df7f2737e5533036d382ead8601b895f4 Mon Sep 17 00:00:00 2001 From: Jongha Kim Date: Sun, 7 Jul 2024 17:17:18 +0900 Subject: [PATCH 081/698] =?UTF-8?q?[ko]=20Intl.Locale.prototype.getTimeZon?= =?UTF-8?q?es()=20=EC=8B=A0=EA=B7=9C=20=EB=B2=88=EC=97=AD=20=EC=99=B8=20(#?= =?UTF-8?q?22189)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Intl.Locale.prototype.getTimeZones() 신규 번역 - RangeError 설명 최신화 - RangeError 생성자 설명 최신화 --- .../intl/locale/gettimezones/index.md | 60 +++++++++++++++++++ .../global_objects/rangeerror/index.md | 44 +++++++------- .../rangeerror/rangeerror/index.md | 11 ++-- 3 files changed, 88 insertions(+), 27 deletions(-) create mode 100644 files/ko/web/javascript/reference/global_objects/intl/locale/gettimezones/index.md diff --git a/files/ko/web/javascript/reference/global_objects/intl/locale/gettimezones/index.md b/files/ko/web/javascript/reference/global_objects/intl/locale/gettimezones/index.md new file mode 100644 index 00000000000000..f8741a408fd16e --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/intl/locale/gettimezones/index.md @@ -0,0 +1,60 @@ +--- +title: Intl.Locale.prototype.getTimeZones() +slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/getTimeZones +l10n: + sourceCommit: 27180875516cc311342e74b596bfb589b7211e0c +--- + +{{JSRef}} + +{{jsxref("Intl.Locale")}} 인스턴스의 **`getTimeZones()`** 메서드는 이 로케일에 지원되는 시간대 목록을 반환합니다. + +> **참고:** 일부 브라우저의 일부 버전에서는 이 메서드가 `timeZones`라는 접근자 속성으로 구현되었습니다. 그러나 이 메서드는 접근할 때마다 새로운 배열을 반환하기 때문에 `locale.timeZones === locale.timeZones`가 `false`를 반환하는 상황을 방지하기 위해 이제 메서드로 구현되었습니다. 자세한 내용은 [브라우저 호환성 표](#브라우저_호환성)를 참조하세요. + +## 구문 + +```js-nolint +getTimeZones() +``` + +### 매개변수 + +없음. + +### 반환 값 + +연결된 `Locale`에 대해 지원되는 시간대를 나타내는 문자열 배열로, 각 값은 알파벳 순서로 정렬된 [IANA 표준 시간대 이름](https://en.wikipedia.org/wiki/Daylight_saving_time#IANA_time_zone_database)입니다. 로케일 식별자에 지역 하위 태그가 포함되지 않은 경우 반환되는 값은 `undefined`입니다. + +## 예제 + +### 지원되는 시간대 얻기 + +주어진 `Locale`을 지원하는 시간대 목록. + +```js +const arEG = new Intl.Locale("ar-EG"); +console.log(arEG.getTimeZones()); // ["Africa/Cairo"] +``` + +```js +const jaJP = new Intl.Locale("ja-JP"); +console.log(jaJP.getTimeZones()); // ["Asia/Tokyo"] +``` + +```js +const ar = new Intl.Locale("ar"); +console.log(ar.getTimeZones()); // undefined +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{jsxref("Intl.Locale")}} +- Wikipedia의 [IANA 시간대 데이터베이스](https://en.wikipedia.org/wiki/Daylight_saving_time#IANA_time_zone_database) diff --git a/files/ko/web/javascript/reference/global_objects/rangeerror/index.md b/files/ko/web/javascript/reference/global_objects/rangeerror/index.md index 63dc71ed9ba12b..e4b622ee40af8d 100644 --- a/files/ko/web/javascript/reference/global_objects/rangeerror/index.md +++ b/files/ko/web/javascript/reference/global_objects/rangeerror/index.md @@ -1,6 +1,8 @@ --- title: RangeError slug: Web/JavaScript/Reference/Global_Objects/RangeError +l10n: + sourceCommit: d19dc31570f62196a5837be38bd0b11c45e67b05 --- {{JSRef}} @@ -15,14 +17,11 @@ slug: Web/JavaScript/Reference/Global_Objects/RangeError - 허용되는 문자열이 아닌 값을 {{jsxref("String.prototype.normalize()")}}에 전달하거나, - {{jsxref("Array")}} 생성자를 통해 잘못된 길이의 배열을 만드려고 시도하거나, -- 숫자 메서드 {{jsxref("Number.prototype.toExponential()")}}, - {{jsxref("Number.prototype.toFixed()")}} 혹은 {{jsxref("Number.prototype.toPrecision()")}}에 - 나쁜 값을 전달하는 경우. +- 숫자 메서드 {{jsxref("Number.prototype.toExponential()")}}, {{jsxref("Number.prototype.toFixed()")}} 혹은 {{jsxref("Number.prototype.toPrecision()")}}에 나쁜 값을 전달하는 경우. -`RangeError`는 {{Glossary("serializable object", "직렬화 가능한 객체")}}이기 때문에, -{{domxref("structuredClone()")}}로 복제하거나 -{{domxref("Worker/postMessage()", "postMessage()")}}를 사용하여 -[Workers](/ko/docs/Web/API/Worker) 간에 복사할 수 있습니다. +`RangeError`는 {{Glossary("serializable object", "직렬화 가능한 객체")}}이기 때문에, {{domxref("structuredClone()")}}로 복제하거나 {{domxref("Worker/postMessage()", "postMessage()")}}를 사용하여 [Worker](/ko/docs/Web/API/Worker) 간에 복사할 수 있습니다. + +`RangeError`는 {{jsxref("Error")}}의 하위 클래스입니다. ## 생성자 @@ -31,20 +30,19 @@ slug: Web/JavaScript/Reference/Global_Objects/RangeError ## 인스턴스 속성 -- {{jsxref("Error.prototype.message", "RangeError.prototype.message")}} - - : 오류 메시지. {{jsxref("Error.prototype.message")}}를 상속되었습니다. -- {{jsxref("Error.prototype.name", "RangeError.prototype.name")}} - - : 오류 이름. {{jsxref("Error")}}로부터 상속되었습니다. -- {{jsxref("Error.prototype.cause", "RangeError.prototype.cause")}} - - : 에러 원인. {{jsxref("Error")}}로부터 상속되었습니다.. -- {{jsxref("Error.prototype.fileName", "RangeError.prototype.fileName")}} - - : 오류가 발생한 파일 경로. {{jsxref("Error")}}로부터 상속되었습니다. -- {{jsxref("Error.prototype.lineNumber", "RangeError.prototype.lineNumber")}} - - : 오류가 발생한 곳의 줄 위치. {{jsxref("Error")}}로부터 상속되었습니다. -- {{jsxref("Error.prototype.columnNumber", "RangeError.prototype.columnNumber")}} - - : 오류가 발생한 곳의 열 위치. {{jsxref("Error")}}로부터 상속되었습니다. -- {{jsxref("Error.prototype.stack", "RangeError.prototype.stack")}} - - : 스택 추적. {{jsxref("Error")}}로부터 상속되었습니다. +인스턴스 속성은 부모인 {{jsxref("Error")}}로부터 상속받습니다. + +아래 속성은 `RangeError.prototype`에 정의되어 있으며 모든 `RangeError` 인스턴스 객체와 공유합니다. + +- {{jsxref("Object/constructor", "RangeError.prototype.constructor")}} + - : 인스턴스 객체를 생성하는 생성자 함수입니다. `RangeError` 인스턴스에서 초기 값은 + {{jsxref("RangeError/RangeError", "RangeError")}} 생성자입니다. +- {{jsxref("Error/name", "RangeError.prototype.name")}} + - : 오류의 유형에 대한 이름을 나타냅니다. `RangeError.prototype.name`의 초기 값은 `"RangeError"`입니다. + +## 인스턴스 메서드 + +인스턴스 메서드는 부모인 {{jsxref("Error")}}로부터 상속받습니다. ## 예제 @@ -60,7 +58,7 @@ try { check(2000); } catch (error) { if (error instanceof RangeError) { - // Handle the error + // 오류 처리 } } ``` @@ -79,7 +77,7 @@ try { check("cabbage"); } catch (error) { if (error instanceof RangeError) { - // Handle the error + // 오류 처리 } } ``` diff --git a/files/ko/web/javascript/reference/global_objects/rangeerror/rangeerror/index.md b/files/ko/web/javascript/reference/global_objects/rangeerror/rangeerror/index.md index 37d4ddb94fbc20..4885bed5241b4e 100644 --- a/files/ko/web/javascript/reference/global_objects/rangeerror/rangeerror/index.md +++ b/files/ko/web/javascript/reference/global_objects/rangeerror/rangeerror/index.md @@ -1,11 +1,14 @@ --- title: RangeError() 생성자 slug: Web/JavaScript/Reference/Global_Objects/RangeError/RangeError +l10n: + sourceCommit: f3df52530f974e26dd3b14f9e8d42061826dea20 --- {{JSRef}} -**`RangeError()`** 생성자는 어떤 값이 집합에 없거나 허용되는 범위가 아닐 때 발생하는 오류를 생성합니다 +**`RangeError()`** 생성자는 어떤 값이 집합에 없거나 +허용되는 범위가 아닐 때 발생하는 오류를 생성합니다 ## 구문 @@ -37,7 +40,7 @@ RangeError(message, fileName, lineNumber) - `fileName` {{optional_inline}} {{non-standard_inline}} - : 예외가 발생한 코드를 담고 있는 파일 이름 - `lineNumber` {{optional_inline}} {{non-standard_inline}} - - : 예외가 발상한 코드의 줄 수 + - : 예외가 발생한 코드의 줄 수 ## 예제 @@ -53,7 +56,7 @@ try { check(2000); } catch (error) { if (error instanceof RangeError) { - // Handle the error + // 오류 처리 } } ``` @@ -72,7 +75,7 @@ try { check("cabbage"); } catch (error) { if (error instanceof RangeError) { - // Handle the error + // 오류 처리 } } ``` From 9a004a7bfa5ad3648bd9fb2c6aee2446f6897fd1 Mon Sep 17 00:00:00 2001 From: Jongha Kim Date: Sun, 7 Jul 2024 17:20:35 +0900 Subject: [PATCH 082/698] =?UTF-8?q?[ko]=20Intl.ListFormat=20=EC=84=A4?= =?UTF-8?q?=EB=AA=85=EA=B8=80=20=EC=8B=A0=EA=B7=9C=20=EB=B2=88=EC=97=AD=20?= =?UTF-8?q?(#22178)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Intl.ListFormat 설명글 신규 번역 --- .../global_objects/intl/listformat/index.md | 102 ++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 files/ko/web/javascript/reference/global_objects/intl/listformat/index.md diff --git a/files/ko/web/javascript/reference/global_objects/intl/listformat/index.md b/files/ko/web/javascript/reference/global_objects/intl/listformat/index.md new file mode 100644 index 00000000000000..d7e4e20cfc03d6 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/intl/listformat/index.md @@ -0,0 +1,102 @@ +--- +title: Intl.ListFormat +slug: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat +l10n: + sourceCommit: 70f09675ddcfc75a3bb66d2dce4cf82738948a37 +--- + +{{JSRef}} + +**`Intl.ListFormat`** 객체는 언어별 목록 서식을 가능하게 합니다. + +{{EmbedInteractiveExample("pages/js/intl-listformat.html", "taller")}} + +## 생성자 + +- {{jsxref("Intl/ListFormat/ListFormat", "Intl.ListFormat()")}} + - : `Intl.ListFormat` 객체를 생성합니다. + +## 정적 메서드 + +- {{jsxref("Intl/ListFormat/supportedLocalesOf", "Intl.ListFormat.supportedLocalesOf()")}} + - : 런타임의 기본 로케일로 돌아가지 않고 지원되는 제공된 로케일이 포함된 배열을 반환합니다. + +## 인스턴스 속성 + +다음 속성은 `Intl.ListFormat.prototype`에 정의되어 있으며, 모든 `Intl.ListFormat` 인스턴스에 공유됩니다. + +- {{jsxref("Object/constructor", "Intl.ListFormat.prototype.constructor")}} + - : 인스턴스 객체를 생성한 생성자 함수입니다. `Intl.ListFormat` 인스턴스의 경우, 초기 값은 {{jsxref("Intl/ListFormat/ListFormat", "Intl.ListFormat")}} 생성자입니다. +- `Intl.ListFormat.prototype[@@toStringTag]` + - : [`@@toStringTag`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) 속성의 초기 값은 문자열 `"Intl.ListFormat"` 입니다. 이 속성은 {{jsxref("Object.prototype.toString()")}}에서 사용합니다. + +## 인스턴스 메서드 + +- {{jsxref("Intl/ListFormat/format", "Intl.ListFormat.prototype.format()")}} + - : 목록의 요소를 표현하는 언어별 형식의 문자열을 반환합니다. +- {{jsxref("Intl/ListFormat/formatToParts", "Intl.ListFormat.prototype.formatToParts()")}} + - : 로케일 인식 방식으로 값 목록의 형식을 맞추는 데 사용할 수 있는 컴포넌트를 의미하는 객체 배열을 반환합니다. +- {{jsxref("Intl/ListFormat/resolvedOptions", "Intl.ListFormat.prototype.resolvedOptions()")}} + - : 현재 {{jsxref("Intl.ListFormat")}} 객체를 구성하는 동안 계산된 로케일 및 스타일 서식 지정 옵션을 반영하는 속성을 가진 새 객체를 반환합니다. + +## 예제 + +### format 사용하기 + +다음 예제는 영어를 사용하여 목록 형식기를 만드는 방법을 보여줍니다. + +```js +const list = ["Motorcycle", "Bus", "Car"]; + +console.log( + new Intl.ListFormat("en-GB", { style: "long", type: "conjunction" }).format( + list, + ), +); +// Motorcycle, Bus and Car + +console.log( + new Intl.ListFormat("en-GB", { style: "short", type: "disjunction" }).format( + list, + ), +); +// Motorcycle, Bus or Car + +console.log( + new Intl.ListFormat("en-GB", { style: "narrow", type: "unit" }).format(list), +); +// Motorcycle Bus Car +``` + +### formatToParts 사용하기 + +다음 예제는 형식이 맞춰진 부분을 반환하는 목록 형식기를 만드는 방법을 보여줍니다. + +```js +const list = ["Motorcycle", "Bus", "Car"]; +console.log( + new Intl.ListFormat("en-GB", { + style: "long", + type: "conjunction", + }).formatToParts(list), +); + +// [ { "type": "element", "value": "Motorcycle" }, +// { "type": "literal", "value": ", " }, +// { "type": "element", "value": "Bus" }, +// { "type": "literal", "value": ", and " }, +// { "type": "element", "value": "Car" } ]; +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [FormatJS에서 `Intl.ListFormat`의 폴리필](https://formatjs.io/docs/polyfills/intl-listformat/) +- {{jsxref("Intl")}} From 1eef75bd4e7840db88aa31b4b5fb8149f0973ee8 Mon Sep 17 00:00:00 2001 From: Jongha Kim Date: Sun, 7 Jul 2024 19:17:42 +0900 Subject: [PATCH 083/698] =?UTF-8?q?[ko]=20TypedArray.prototype.find()=20?= =?UTF-8?q?=EC=8B=A0=EA=B7=9C=20=EB=B2=88=EC=97=AD=20=EC=99=B8=20(#22098)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [ko] TypedArray.prototype.find() 신규 번역 외 - TypedArray.prototype.find() 신규 번역 - Array.prototype.find() 최신화 * 리뷰사항 수정 --- .../global_objects/array/find/index.md | 33 +++++--- .../global_objects/typedarray/find/index.md | 84 +++++++++++++++++++ 2 files changed, 106 insertions(+), 11 deletions(-) create mode 100644 files/ko/web/javascript/reference/global_objects/typedarray/find/index.md diff --git a/files/ko/web/javascript/reference/global_objects/array/find/index.md b/files/ko/web/javascript/reference/global_objects/array/find/index.md index b64b2c36c28807..af745cb8d15151 100644 --- a/files/ko/web/javascript/reference/global_objects/array/find/index.md +++ b/files/ko/web/javascript/reference/global_objects/array/find/index.md @@ -2,7 +2,7 @@ title: Array.prototype.find() slug: Web/JavaScript/Reference/Global_Objects/Array/find l10n: - sourceCommit: b7ca46c94631967ecd9ce0fe36579be334a01275 + sourceCommit: 6589a6a25a5d2e9a359c3f02f37c670fb7c74259 --- {{JSRef}} @@ -14,6 +14,7 @@ l10n: - 배열에 값이 **존재**하는지 찾아야 하는 경우, {{jsxref("Array/includes", "includes()")}}를 사용하세요. 이 역시 테스트 함수를 사용하는 것 대신 각 요소가 값과 동일한지 확인합니다. - 제공된 테스트 함수를 만족하는 요소가 있는지 찾아야 하는 경우, {{jsxref("Array/some", "some()")}}을 사용하세요. +- 만약 주어진 테스트 함수를 만족하는 모든 요소를 찾고 싶으면 {{jsxref("Array/filter", "filter()")}}을 사용하세요. {{EmbedInteractiveExample("pages/js/array-find.html","shorter")}} @@ -43,18 +44,10 @@ find(callbackFn, thisArg) ## 설명 -`find()` 메서드는 [순회 메서드](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#순회_메서드)입니다. 이 메서드는 `callbackFn`이 [참](/ko/docs/Glossary/Truthy) 값을 반환할 때까지, 오름차순 인덱스로 순서로 배열의 각 요소에 대해 제공된 `callbackFn` 함수를 한 번씩 호출합니다. 그런 다음 `find()`는 해당 요소를 반환하고 배열 순회를 중지합니다. `callbackFn`이 [참](/ko/docs/Glossary/Truthy) 값을 반환하지 않으면, `find()`는 {{jsxref("undefined")}}를 반환합니다. +`find()` 메서드는 [순회 메서드](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#순회_메서드)입니다. 이 메서드는 `callbackFn`이 [참 같은](/ko/docs/Glossary/Truthy) 값을 반환할 때까지, 오름차순 인덱스로 순서로 배열의 각 요소에 대해 제공된 `callbackFn` 함수를 한 번씩 호출합니다. 그런 다음 `find()`는 해당 요소를 반환하고 배열 순회를 중지합니다. `callbackFn`이 [참 같은](/ko/docs/Glossary/Truthy) 값을 반환하지 않으면, `find()`는 {{jsxref("undefined")}}를 반환합니다. 더 자세한 정보는 [순회 메서드](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#순회_메서드) 섹션을 보시기 바랍니다. 이 섹션에는 이러한 메서드가 일반적으로 어떻게 동작하는지 설명하고 있습니다. `callbackFn`은 값이 할당된 인덱스뿐만 아니라 배열의 모든 인덱스에 대해 호출됩니다. [희소 배열](/ko/docs/Web/JavaScript/Guide/Indexed_collections#희소_배열)의 빈 슬롯은 `undefined`와 동일하게 동작합니다. -`find()`는 호출되는 배열을 변경하지 않지만, `callbackFn`으로 제공된 함수는 변경할 수 있습니다. 그러나 배열의 length는 `callbackFn`을 처음 호출하기 전에 저장된다는 점에 유의하세요. 따라서, - -- `callbackFn`은 `find()` 호출이 시작되었을 때 배열의 초기 length 값을 초과하여 추가된 요소는 방문하지 않습니다. -- 이미 방문한 인덱스를 변경해도 `callbackFn`이 해당 인덱스에 대해 다시 호출되지 않습니다. -- 배열의 아직 방문하지 않은 기존 요소가 `callbackFn`에 의해 변경되는 경우, `callbackFn`에 전달된 값은 해당 요소가 방문될 당시의 값이 됩니다. [삭제된](/ko/docs/Web/JavaScript/Reference/Operators/delete) 요소는 `undefined`가 있는것 처럼 방문됩니다. - -> **경고:** 위에서 설명한 종류의 동시 수정은 이해하기 어려운 코드를 만드는 경우가 많으므로 일반적으로 지양해야 합니다(특별한 경우 제외). - `find()` 메서드는 [범용](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#범용_배열_메서드)입니다. `this` 값에는 `length` 속성과 정수 키 속성만 있을 것으로 예상합니다. ## 예제 @@ -109,6 +102,24 @@ console.log([4, 6, 8, 12].find(isPrime)); // undefined, 소수 없음 console.log([4, 5, 8, 12].find(isPrime)); // 5 ``` +### callbackFn의 세 번째 인수 사용하기 + +`array` 인수는 배열의 다른 요소에 접근하려는 경우, 특히 배열을 참조하는 기존 변수가 없는 경우에 유용합니다. 다음 예제에서는 먼저 `filter()`를 사용하여 양수 값을 추출한 다음 `find()`를 사용하여 이웃 요소보다 작은 첫 번째 요소를 찾습니다. + +```js +const numbers = [3, -1, 1, 4, 1, 5, 9, 2, 6]; +const firstTrough = numbers + .filter((num) => num > 0) + .find((num, idx, arr) => { + // arr 인수가 없으면 변수에 저장하지 않고는 + // 중간 배열에 쉽게 접근할 수 없습니다. + if (idx > 0 && num >= arr[idx - 1]) return false; + if (idx < arr.length - 1 && num >= arr[idx + 1]) return false; + return true; + }); +console.log(firstTrough); // 1 +``` + ### 희소 배열에서 find() 사용하기 희소 배열의 빈 슬롯은 `undefined`와 동일하게 동작합니다. @@ -176,7 +187,7 @@ console.log(Array.prototype.find.call(arrayLike, (x) => !Number.isInteger(x))); ## 같이 보기 - [`core-js`의 `Array.prototype.find` 폴리필](https://github.com/zloirock/core-js#ecmascript-array) -- [인덱스 기반 컬렉션](/ko/docs/Web/JavaScript/Guide/Indexed_collections) +- [인덱스 기반 컬렉션](/ko/docs/Web/JavaScript/Guide/Indexed_collections) 안내서 - {{jsxref("Array")}} - {{jsxref("Array.prototype.findIndex()")}} - {{jsxref("Array.prototype.findLast()")}} diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/find/index.md b/files/ko/web/javascript/reference/global_objects/typedarray/find/index.md new file mode 100644 index 00000000000000..4b02bd6f8fa7c8 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/typedarray/find/index.md @@ -0,0 +1,84 @@ +--- +title: TypedArray.prototype.find() +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/find +l10n: + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de +--- + +{{JSRef}} + +{{jsxref("Array")}} 인스턴스의 **`find()`** 메서드는 제공된 형식화 배열에서 제공된 테스트 함수를 만족하는 첫 번째 요소를 반환합니다. 테스트 함수를 만족하는 값이 없으면 {{jsxref("undefined")}}가 반환됩니다. 이 메서드는 {{jsxref("Array.prototype.find()")}}와 동일한 알고리즘을 가집니다. + +{{EmbedInteractiveExample("pages/js/typedarray-find.html")}} + +## 구문 + +```js-nolint +find(callbackFn) +find(callbackFn, thisArg) +``` + +### 매개변수 + +- `callback` + - : 형식화 배열의 각 요소에 대해 실행할 함수입니다. 일치하는 요소를 찾았으면 [참 같은](/ko/docs/Glossary/Truthy) 값을 반환하고, 그렇지 않으면 [거짓 같은](/ko/docs/Glossary/Falsy) 값을 반환해야 합니다. 함수는 다음 인수를 사용하여 호출됩니다. + - `element` + - : 형식화 배열에서 현재 처리되고 있는 요소. + - `index` + - : 형식화 배열에서 현재 처리되고 있는 요소의 인덱스. + - `array` + - : `find()`가 호출된 형식화 배열. +- `thisArg` {{optional_inline}} + - : `callbackFn`을 실행할 때 `this`로 사용할 값입니다. [순회 메서드](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#순회_메서드)를 참고하시기 바랍니다. + +### 반환 값 + +제공된 테스트 함수를 만족하는 형식화 배열의 첫 번째 요소입니다. +테스트 함수를 만족하는 요소가 없으면, {{jsxref("undefined")}}가 반환됩니다. + +## 설명 + +보다 자세한 정보는 {{jsxref("Array.prototype.find()")}}를 참고하시기 바랍니다. 이 메서드는 범용적이지 않으며 오직 형식화 배열 인스턴스에서만 호출할 수 있습니다. + +## 예제 + +### 형식화 배열에서 소수 찾기 + +다음 예제는 형식화 배열의 요소 중 소수인 요소를 찾습니다(소수가 없는 경우에는 {{jsxref("undefined")}}를 반환합니다). + +```js +function isPrime(element, index, array) { + let start = 2; + while (start <= Math.sqrt(element)) { + if (element % start++ < 1) { + return false; + } + } + return element > 1; +} + +const uint8 = new Uint8Array([4, 5, 8, 12]); +console.log(uint8.find(isPrime)); // 5 +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [`core-js`에서 `TypedArray.prototype.find` 폴리필](https://github.com/zloirock/core-js#ecmascript-typed-arrays) +- [JavaScript 형식화 배열](/ko/docs/Web/JavaScript/Guide/Typed_arrays) 안내서 +- {{jsxref("TypedArray")}} +- {{jsxref("TypedArray.prototype.findIndex()")}} +- {{jsxref("TypedArray.prototype.findLast()")}} +- {{jsxref("TypedArray.prototype.findLastIndex()")}} +- {{jsxref("TypedArray.prototype.includes()")}} +- {{jsxref("TypedArray.prototype.filter()")}} +- {{jsxref("TypedArray.prototype.every()")}} +- {{jsxref("TypedArray.prototype.some()")}} +- {{jsxref("Array.prototype.find()")}} From 0f8d233f51a235151ef10ecff63f701409fd1b25 Mon Sep 17 00:00:00 2001 From: Hwajin Lee <55270881+sqaurelu@users.noreply.github.com> Date: Sun, 7 Jul 2024 19:21:07 +0900 Subject: [PATCH 084/698] [ko] translate /ko/learn/accessibility/css_and_javascript/index.md (#20993) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [ko] translate /ko/learn/accessibility/css_and_javascript/index.md * fix: l10n 태그를 추가한다. * fix: 리뷰를 반영한다. * fix: 린트 에러를 수정한다. --- .../accessibility/css_and_javascript/index.md | 362 ++++++++++++++++++ 1 file changed, 362 insertions(+) create mode 100644 files/ko/learn/accessibility/css_and_javascript/index.md diff --git a/files/ko/learn/accessibility/css_and_javascript/index.md b/files/ko/learn/accessibility/css_and_javascript/index.md new file mode 100644 index 00000000000000..92e64f85739393 --- /dev/null +++ b/files/ko/learn/accessibility/css_and_javascript/index.md @@ -0,0 +1,362 @@ +--- +title: CSS와 JavaScript의 접근성 모범 사례 +slug: Learn/Accessibility/CSS_and_JavaScript +l10n: + sourceCommit: 4bddde3e2b86234eb4594809082873fc5bf00ee3 +--- + +{{LearnSidebar}}{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}} + +CSS와 JavaScript는 적절하게 사용될 때 접근성 높은 웹 경험을 제공할 수 있지만, 잘못 사용될 경우 접근성에 심각한 영향을 줄 수 있습니다. 이 문서에서는 복잡한 콘텐츠라도 가능한 한 접근성을 보장하기 위해 고려해야 할 몇 가지 CSS와 JavaScript 모범 사례를 설명합니다. + + + + + + + + + + + + +
    필요한 사전 지식: + HTML, CSS, JavaScript에 대한 + 기본적인 이해와 + + 접근성이 무엇인지에 + 대한 이해. +
    목표: + 웹 문서에 CSS와 JavaScript를 적절하게 사용하여 접근성을 최대화하고 + 접근성을 저하시키지 않는 방법에 익숙해집니다. +
    + +## CSS와 JavaScript는 접근 가능한가요? + +CSS와 JavaScript는 HTML만큼 접근성에 중요하지는 않지만, 사용 방법에 따라 접근성에 도움이 되게 하거나 손상시킬 수 있습니다. 다시 말해, CSS와 JavaScript의 사용이 문서의 접근성을 망치지 않도록 몇 가지 모범 사례를 고려하는 것은 중요합니다. + +## CSS + +CSS부터 살펴봅시다. + +### 올바른 의미론적 표현과 사용자 경험 + +CSS를 사용하여 HTML 요소를 원하는 대로 보이게 만들 수 있지만, 항상 그렇게 해야 하는 것은 아닙니다. [HTML: 접근성을 위한 좋은 기초](/ko/docs/Learn/Accessibility/HTML) 문서에서 자주 말했듯이, 가능한 경우 적절한 의미론적 요소를 사용해야 합니다. 그렇지 않으면 모두에게 혼란과 사용성 문제가 발생할 수 있으며, 특히 장애를 가진 사용자에게는 더 큰 문제가 될 수 있습니다. 올바른 의미론적 요소를 사용하는 것은 사용자 경험과 많은 관련이 있습니다. 요소는 기능에 따라 특정한 방식으로 보이고 동작하며, 이러한 일반적인 규칙은 사용자에게 기대됩니다. + +예를 들어, 스크린 리더 사용자는 개발자가 콘텐츠를 마크업할 때 적절한 제목 요소를 사용하지 않으면 페이지를 제목 요소를 통해 탐색할 수 없습니다. 마찬가지로, 제목은 제목처럼 보이지 않도록 스타일을 변경하면 시각적인 목적을 읽게 됩니다. + +요약하면, 페이지 기능의 스타일을 업데이트하여 디자인에 맞게 조정할 수 있지만, 너무 많이 기대와 다르게 보이거나 동작하지 않도록 변경하지는 마십시오. 다음 섹션에서는 고려해야 할 주요 HTML 기능을 요약합니다. + +#### "표준" 텍스트 콘텐츠 구조 + +제목, 단락, 목록 — 페이지의 핵심 텍스트 콘텐츠 + +```html +

    Heading

    + +

    Paragraph

    + +
      +
    • My list
      • +
    • has two items.
      • +
    +``` + +일반적인 CSS는 다음과 같습니다. + +```css +h1 { + font-size: 5rem; +} + +p, +li { + line-height: 1.5; + font-size: 1.6rem; +} +``` + +다음을 지켜야 합니다. + +- 텍스트를 논리적이고 가독성 좋고 읽기 편안하게 만들기 위해 합리적인 글꼴 크기, 줄 간격, 글자 간격 등을 선택하세요. +- 제목은 본문 텍스트와 구분되도록 일반적으로 기본 스타일과 같이 크고 굵게 보이도록 해야 합니다. 목록은 목록처럼 보여야 합니다. +- 텍스트 색상은 배경 색상과 잘 대비되어야 합니다. + +자세한 내용은 [HTML 텍스트 기본 사항](/ko/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals)와 [텍스트 스타일링](/ko/docs/Learn/CSS/Styling_text)을 참고하세요. + +#### 텍스트 강조 + +래핑되는 텍스트의 특정 강조점을 부여하는 인라인 마크업은 다음과 같습니다. + +```html +

    The water is very hot.

    + +

    + Water droplets collecting on surfaces is called condensation. +

    +``` + +강조된 텍스트에 간단한 색상을 추가할 수 있습니다. + +```css +strong, +em { + color: #a60000; +} +``` + +그러나 강조할 요소를 의미 있는 방식으로 스타일을 지정할 경우는 거의 없을 것입니다. 굵은 글꼴과 기울임 꼴 텍스트의 표준 규칙은 쉽게 알아볼 수 있으며 스타일을 변경하면 혼란이 발생할 수 있습니다. 강조에 대한 자세한 내용은 [강조 및 중요성](/ko/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#emphasis_and_importance)를 참고하세요. + +#### 약어 + +확장과 연관되는 약어, 두문자어 또는 초기화를 허용하는 요소입니다. + +```html +

    + Web content is marked up using Hypertext Markup Language, or + HTML. +

    +``` + +다시 말하지만, 간단한 방법으로 스타일을 지정할 수 있습니다. + +```css +abbr { + color: #a60000; +} +``` + +약어에 대해 인정된 스타일링 규칙은 점선 밑줄이며, 이에 크게 벗어나는 것은 현명하지 않습니다. 약어에 대한 더 많은 것은 [약어](/ko/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#약어)를 참고하세요. + +#### 링크 + +웹에서 새로운 곳으로 이동하는 방법인 하이퍼링크입니다. + +```html +

    Visit the Mozilla homepage.

    +``` + +매우 간단한 링크 스타일은 아래와 같습니다. + +```css +a { + color: #ff0000; +} + +a:hover, +a:visited, +a:focus { + color: #a60000; + text-decoration: none; +} + +a:active { + color: #000000; + background-color: #a60000; +} +``` + +표준 링크 규칙은 밑줄이 그어져 있으며 표준 상태에서는 다른 색상(기본값: 파랑색), 이전에 링크를 방문했을 때는 다른 색상(기본값: 빨간색)으로 표시됩니다. 또한, 링크 위에 마우스를 올리면 마우스 포인터가 포인터 아이콘으로 바뀌고, 링크에 초점을 맞추거나(예: 탭 이동을 통해) 활성화되면 강조 표시됩니다. 다음 이미지는 Firefox(점선 윤곽선)와 Chrome(파란색 윤곽선) 모두 강조 표시를 보여줍니다. + +![Firefox 브라우저에 있는 링크 목록의 스크린샷. 목록에는 4개의 항목이 포함되어 있습니다. 두 번째 목록 항목은 탭을 통해 초점이 맞춰질 때 파란색 점선 윤곽선을 사용하여 강조 표시됩니다.](focus-highlight-firefox.png) + +![Chrome 브라우저에 있는 링크 목록의 스크린샷. 목록에는 4개의 항목이 포함되어 있습니다. 세 번째 목록 항목은 탭을 통해 초점이 맞춰질 때 파란색 외곽선을 사용하여 강조 표시됩니다.](focus-highlight-chrome.png) + +사용자가 링크와 상호작용을 할 때 계속 피드백을 제공하는 한 링크 스타일을 창의적으로 사용할 수 있습니다. 상태가 변경되면 반드시 어떤 일이 발생해야 하며 포인터 커서나 윤곽선을 제거해서는 안 됩니다. 둘 다 키보드 컨트롤을 사용하는 사람들에게 매우 중요한 접근성 도구입니다. + +#### 양식 요소 + +사용자가 웹 사이트에 데이터를 입력할 수 있도록 하는 요소입니다. + +```html +
    + + +
    +``` + +[form-css.html](https://github.com/mdn/learning-area/blob/main/accessibility/css/form-css.html) 예시에서 CSS의 좋은 예시를 볼 수 있습니다. ([라이브 보기](https://mdn.github.io/learning-area/accessibility/css/form-css.html)도 있습니다.) + +양식을 위해 작성할 대부분의 CSS는 요소의 크기를 조정하고, 레이블과 입력을 정렬하고, 깔끔하고 단정하게 보이기 위한 것입니다. + +그러나 양식 요소에 초점이 맞춰졌을 때 받을 것으로 예상되는 시각적인 피드백에서 너무 많이 벗어나서는 안 됩니다. 이는 기본적으로 링크와 동일합니다(위 참고). 양식 포커스/호버 상태의 스타일을 지정하여 브라우저 전체에서 이 동작을 보다 일관되게 만들거나 페이지 디자인에 더 잘 맞도록 할 수 있지만 완전히 제거하지는 마십시오. 다시 말하지만 사람들은 이러한 단서에 의존하여 무슨 일이 일어나고 있는지 알 수 있습니다. + +#### 테이블 + +표 형식의 데이터를 표현하기 위한 표입니다. + +[table-css.html](https://github.com/mdn/learning-area/blob/main/accessibility/css/table-css.html) 예제에서 표 HTML 및 CSS의 훌륭하고 간단한 예를 볼 수 있습니다. ([라이브 보기](https://mdn.github.io/learning-area/accessibility/css/table-css.html)도 있습니다.) + +표 CSS는 일반적으로 표를 디자인에 더 잘 어울리게 하고 보기 좋게 만드는 역할을 합니다. 표 헤더가 눈에 띄도록 하고(일반적으로 굵게 표시), 얼룩말 줄무늬를 사용하여 여러 행을 구문 분석하기 쉽게 하는 것이 좋습니다. + +### 색상 및 색상 대비 + +웹 사이트의 색 구성표를 선택할 때 텍스트 색상이 배경 색상과 잘 대비되는지 확인하세요. 디자인은 멋져 보일 수 있지만 색맹과 같은 시각 장애가 있는 사람이 콘텐츠를 읽을 수 없다면 좋지 않습니다. + +대비가 문제를 일으키지 않을 정도로 큰지 확인하는 쉬운 방법이 있습니다. 전경색과 배경색을 입력하여 확인할 수 있는 온라인 배디 검사 도구가 많이 있습니다. 예를 들어 [색상 대비 검사기](https://webaim.org/resources/contrastchecker/)는 사용이 간편하며 색상 대비와 관련된 WCAG 기준을 준수하는 데 필요한 사항에 대한 설명을 제공합니다. + +> **참고:** 명암 대비가 높으면 광택 화면이 있는 스마트폰이나 태블릿을 사용하는 사람은 햇빛과 같은 밝은 환경에서 페이지를 더 잘 읽을 수 있도록 해줍니다. + +또 다른 팁은 표지판/정보를 색상에만 의존하지 않는 것입니다. 이는 색상을 볼 수 없는 사람들에게는 좋지 않기 때문입니다. 예를 들어, 필수 양식 필드를 빨간색으로 표시하는 대신 별표와 빨간색으로 표시하세요. + +### 요소 숨기기 + +시각적 디자인에서 모든 콘텐츠가 한 번에 표시되지 않도록 요구하는 경우가 많이 있습니다. 예를 들어, [탭 정보 상자 예시](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) ([소스 코드](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/info-box.html))에는 세가지 정보 패널이 있지만, 우리는 그것들을 서로의 위에 [배치](/ko/docs/Learn/CSS/CSS_layout/Positioning)하고 클릭하여 각각을 표시할 수 있는 탭을 제공하고 있습니다. (Tab 키와 Enter/Return을 사용하여 키보드로 액세스할 수도 있습니다.) + +![탭 1이 선택된 3개의 탭 인터페이스는 해당 탭의 내용만 표시됩니다. 다른 탭의 내용은 숨깁니다. 탭을 선택하면 텍스트 색상이 검은색에서 흰색으로 바뀌고 배경 색상이 주황색에서 빨간색으로 바뀝니다.](tabbed-info-box.png) + +스크린 리더 사용자는 이 중 어떤 것도 신경 쓰지 않습니다. 소스 순서가 적절하고 모든 내용을 읽을 수 있다면 만족합니다. 이 예에서 사용된 절대 위치 지정은 일반적으로 스크린 리더가 콘텐츠에 접근하는 것을 방해하지 않기 때문에 시각적 효과를 위해 콘텐츠를 숨기는 가장 좋은 메커니즘 중 하나로 간주됩니다. + +반면에 {{cssxref("visibility")}}`:hidden` 또는 {{cssxref("display")}}`:none`은 스크린 리더에서 콘텐츠를 숨기기 때문에 사용하면 안 됩니다. 물론, 이 콘텐츠를 스크린 리더에서 숨기려는 타당한 이유가 있는 경우는 예외입니다. + +> **참고:** [스크린 리더 사용자만을 위한 보이지 않는 콘텐츠](https://webaim.org/techniques/css/invisiblecontent/)에는 이 주제와 관련된 훨씬 더 유용한 세부 정보가 있습니다. + +### 사용자가 스타일을 재정의하는 것을 허용 + +사용자가 자신만의 맞춤 스타일로 스타일을 재정의할 수 있습니다. 예를 들면 다음과 같습니다. + +- Sarah Maddox의 [Firefox에서 사용자 정의 스타일 시트(CSS)를 사용하는 방법](https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-firefox/)을 참고하세요. Firefox에서 이 작업을 수동으로 수행하는 방법을 다루는 유용한 가이드입니다. +- 확장 프로그램을 사용하는 것이 더 쉬울 수도 있습니다. 예를 들어, Stylus 확장 프로그램은 [Firefox](https://addons.mozilla.org/en-US/firefox/addon/styl-us/)에서 사용할 수 있으며 Stylish는 [Chrome](https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe)과 동일합니다. + +사용자는 다양한 이유로 이 작업을 수행할 수 있다. 시각 장애가 있는 사용자는 방문하는 모든 웹 사이트에서 텍스트를 더 크게 표시하고 싶을 수도 있고, 심각한 색맹이 있는 사용자는 모든 웹 사이트를 쉽게 볼 수 있도록 고대비 색상으로 표시할 수도 있습니다. 필요가 무엇이든, 이에 익숙해져야 하며 그러한 변경 사항이 디자인에 적용될 수 있도록 디자인을 충분히 유연하게 만들어야 합니다. 예를 들어, 기본 콘텐츠 영역이 더 큰 텍스트를 처리할 수 있는지(모든 내용이 표시되도록 스크롤되기 시작할 수도 있음) 단순히 숨기거나 완전히 깨지지 않도록 할 수 있습니다. + +## JavaScript + +JavaScript는 어떻게 사용하냐에 따라 접근성을 깨뜨릴 수 있습니다. + +최신 JavaScript는 강력한 언어이며, 오늘날 간단한 콘텐츠 및 UI 업데이트부터 완전한 2D 및 3D 게임까지 많은 작업을 수행할 수 있습니다. 모든 콘텐츠가 모든 사람에게 100% 접근 가능해야 한다는 규칙은 없습니다. 단지 할 수 있는 일을 하고 앱을 가능한 한 접근 가능하게 만들기만 하면 됩니다. + +간단한 콘텐츠와 기능은 쉽게 액세스할 수 있습니다. 예를 들어, 텍스트, 이미지, 표, 양식, 기능을 활성화하는 푸시 버튼 등이 있습니다. [HTML: 접근성을 위한 좋은 기반](/ko/docs/Learn/Accessibility/HTML) 문서에서 살펴본 것처럼 주요 고려 사항은 다음과 같습니다. + +- 좋은 의미론: 올바른 작업에 적합한 요소를 사용합니다. 예를 들어, 제목과 단락, {{htmlelement("button")}} 및 {{htmlelement("a")}} 요소를 사용하는지 확인하세요. +- 콘텐츠가 직접 텍스트 콘텐츠, 양식 요소에 적합한 텍스트 레이블 또는 [대체 텍스트](/ko/docs/Learn/Accessibility/HTML#대체_텍스트)(예: 이미지 대체 텍스트)로 제공되는지 확인하세요. + +또한 JavaScript를 사용하여 누락된 기능을 구축하는 방법에 대한 예도 살펴보았습니다. [키보드 접근성 다시 구축](/ko/docs/Learn/Accessibility/HTML#키보드_접근성_다시_구축하기)을 참조하세요. 이는 이상적이지는 않지만, 어떤 이유로 사용되는 마크업을 제어할 수 없는 상황에서는 가능하다는 것을 보여줍니다. 비의미론적 JavaScript 기반 위젯에 대한 접근성을 향상시키는 또 다른 방법은 WAI-ARIA를 사용하여 스크린 리더 사용자에게 추가적인 의미론을 제공하는 것입니다. 다음 문서에서도 이 문제를 자세히 다룰 것입니다. + +3D 게임과 같은 복잡한 기능은 접근하기 쉽지 않습니다. [WebGL](/ko/docs/Web/API/WebGL_API)을 사용하여 만든 복잡한 3D 게임은 현재로서는 중증 시각 장애인이 활용할 수 있는 정보인 대체 텍스트나 다른 정보를 제공할 수 있는 기능이 없는 {{htmlelement("canvas")}} 요소에서 렌더링됩니다. 이러한 게임에는 실제로 중증 시각 장애인 그룹의 사람들이 주요 대상 청중의 일부로 포함되어 있지 않으며 시각 장애인이 100% 접근할 수 있도록 기대하는 것은 비합리적입니다. 그러나, [키보드 제어](/ko/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard)를 구현하여 마우스가 아닌 사용자도 사용할 수 있도록 하고 색약이 있는 사용자도 사용할 수 있을 만큼 색 구성표를 충분히 대비되게 만들 수 있습니다. + +### 너무 많은 JavaScript의 문제 + +문제는 종종 사람들이 JavaScript에 너무 많이 의존할 때 발생합니다. 때로는 모든 것이 JavaScript로 이루어진 웹 사이트를 보게 될 것입니다. HTML, CSS는 JavaScript로 생성되었습니다. 이것은 모든 종류의 접근성 및 그와 관련된 다른 문제들을 가지고 있으므로 권장되지 않습니다. + +올바른 작업에 적합한 요소를 사용할 뿐만 아니라 올바른 작업에 적합한 기술을 사용하고 있는지도 확인해야 합니다! 빛나는 JavaScript 기반 3D 정보 상자가 필요한지, 아니면 평범한 오래된 텍스트가 필요한지 신중하게 생각해 보세요. 복잡한 비표준 양식 위젯이 필요한지, 아니면 텍스트 입력이 필요한지 신중하게 생각해 보세요. 그리고 가능하다면 JavaScript를 사용하여 모든 HTML 콘텐츠를 생성하지 마세요. + +### 눈에 띄지 않게 유지하기 + +콘텐츠를 만들 때 **눈에 띄지 않는 JavaScript**를 염두에 두어야 합니다. 눈에 띄지 않는 JavaScript의 개념은 가능한 한 기능을 향상시키는 데 사용되어야 하며, 전체를 구축하는 데 사용되어선 안 됩니다. 기본 기능은 JavaScript 없이도 이상적으로 작동해야 하지만 이것이 항상 가능한 것은 아니라는 점은 잘 알고 있습니다. 하지만 다시 말해, 가능한 한 내장된 브라우저 기능을 사용하는 것이 중요합니다. + +눈에 띄지 않는 JavaScript의 좋은 예는 다음과 같습니다. + +- 서버가 데이터를 확인할 때까지 기다리지 않고도 사용자에게 양식 항목에 대한 문제를 빠르게 알려주는 클라이언트 측 양식 검증을 제공합니다. 사용할 수 없는 경우 양식은 여전히 작동하지만 검증은 더 느릴 수 있습니다. +- JavaScript를 사용할 수 없는 경우 사용할 수 있는 동영상에 대한 직접 링크와 함께 키보드 사용자가 엑세스할 수 있는 HTML `
"); node.addClass(data.className); -node.text("Your favorite color is now " + data.color); +node.text(`你最喜欢的颜色现在是${data.color}`); ``` ## 处理 HTML 内容 -当你知道处理外部源的内容是 HTML 的时候，添加到页面之前净化 HTML 是很关键的。净化 HTML 的最好办法是使用 HTML 净化的库或者一个带有 HTML 净化特性的模板引擎。在这一节，我们来看一些合适的工具以及使用方法。 +当你知道处理外部源的内容是 HTML 的时候，添加到页面之前净化 HTML 是很关键的。净化 HTML 的最好办法是使用 HTML 净化库或具有 HTML 净化特性的模板引擎。在这一节，我们将介绍一些合适的工具以及它们的使用方法。 ### HTML 净化 -An HTML sanitization library strips anything that could lead to script execution from HTML, so you can safely inject complete sets of HTML nodes from a remote source into your DOM. [DOMPurify](https://github.com/cure53/DOMPurify),是一个 HTML 净化的库，可以脱离任意会导致脚本执行的元素，以便安全注入远端源到 HTML 节点，这个库被很多不同的安全专家评估过，是很适合这种任务扩展的库。 +HTML 净化库会从 HTML 中删除任何可能导致脚本执行的内容，因此可以安全地将来自远程源的整套 HTML 节点注入 DOM。[DOMPurify](https://github.com/cure53/DOMPurify) 已通过多位安全专家的审查，是一个适合在扩展程序中执行此任务的库。 -[DOMPurify](https://github.com/cure53/DOMPurify) 有一个简约版用于生产环境，purify.min.js. 你可以使用这个版本来适配你的扩展，例如你可以这样添加： +为便于生产使用，[DOMPurify](https://github.com/cure53/DOMPurify) 提供了极简化版本：purify.min.js。你可以用最适合扩展的方式使用该脚本。例如，可以将其添加为内容脚本： ```json "content_scripts": [ @@ -78,31 +75,29 @@ An HTML sanitization library strips anything that could lead to script execution 之后，在 myinjectionscript.js 中你可以读取外部 HTML 并净化，之后添加到页面的 DOM 中： ```js -var elem = document.createElement("div"); -var cleanHTML = DOMPurify.sanitize(externalHTML); +let elem = document.createElement("div"); +let cleanHTML = DOMPurify.sanitize(externalHTML); elem.innerHTML = cleanHTML; ``` -你可以使用任何方法添加净化后的 HTML 到 DOM，例如 jQuery’s `.html()` 方法。注意这种情况需要使用 Remember though that the `SAFE_FOR_JQUERY` 标记： +你可以使用任何方法添加净化后的 HTML 到 DOM，例如 jQuery 的 `.html()` 函数。注意，这种情况下需要使用 `SAFE_FOR_JQUERY` 标志： ```js -var elem = $("
"); -var cleanHTML = DOMPurify.sanitize(externalHTML, { SAFE_FOR_JQUERY: true }); +let elem = $("
"); +let cleanHTML = DOMPurify.sanitize(externalHTML, { SAFE_FOR_JQUERY: true }); elem.html(cleanHTML); ``` ### 模板引擎 -另一个常见的模式是对一个页面创建本地 HTML 模板并通过远端的值来填空。这种方法被广泛应用，应该注意去避免构造函数的使用，可能会导致执行代码的注入。当模板引擎使用构造函数插入 HTML 到文档的时候会发生这种情况，如果用来注入原始 HTML 的变量是远端代码，这就属于上面介绍中的安全风险。 +另一个常见的模式是对一个页面创建本地 HTML 模板并通过远端的值来填空。这种方法被广泛应用，应该注意去避免构建函数的使用，可能会导致执行代码的注入。当模板引擎使用构建函数插入未处理的 HTML 到文档的时候会发生这种情况。如果用来注入原始 HTML 的变量是远端代码，则会面临引言中提到的同样的安全风险。 -例如，当使用[mustache templates](https://mustache.github.io/) 你必须使用两个花括号`\{{variable}}`,来去掉任何 HTML。使用三个花括号`\{\{{variable}}}` 必须避免注入原始 HTML 字符串到模板。 +例如，在使用 [mustache 模板](https://mustache.github.io/)时，必须使用双大括号，即 `\{{variable}}`，它可以转义任何 HTML。必须避免使用三重大括号（`\{\{{variable}}}`），因为这会注入原始 HTML 字符串，并可能在模板中添加可执行代码。[Handlebars](https://handlebarsjs.com/) 的工作方式与此类似，双大括号中的变量（`\{{variable}}`）会被转义。而三重大括号中的变量则是原始变量，必须避免使用。此外，如果你使用 `Handlebars.SafeString` 创建了一个 Handlebars 辅助函数，请使用 `Handlebars.escapeExpression()` 来转义传递给辅助函数的任何动态参数。之所以需要这样做，是因为 `Handlebars.SafeString` 产生的变量被认为是安全的，而且在插入双大括号中时不会转义。 -[Handlebars](http://handlebarsjs.com/) 工作原理也是类似，`\{{variable}}` 。同时，如果创造了 Handlebars helper 使用 `Handlebars.SafeString` 使用`Handlebars.escapeExpression()` 来消除任何传给 helper 的动态参数。`Handlebars.SafeString` 的结果被认为是安全的，当插入到双 handlebars 的时候就不会做消除动作。 +在其他模板系统中也有类似的构建函数，需要有同样的考虑。 -在其他模板系统中也有类似的构造函数，需要有同样的考虑。 +## 扩展阅读 -## 其他参考 +关于这个主题更多的信息，可以查看以下文章： -关于这个主题更多的信息，可以查看下面的文章 - -- [XSS (Cross Site Scripting) Prevention Cheat Sheet](https://owasp.org/www-community/xss-filter-evasion-cheatsheet) +- [XSS（跨站脚本攻击）防御小窍门](https://owasp.org/www-community/xss-filter-evasion-cheatsheet) From 532e86529ecaa1caab8600df6e3233581f0bea9e Mon Sep 17 00:00:00 2001 From: Jongha Kim Date: Wed, 10 Jul 2024 14:00:46 +0900 Subject: [PATCH 154/698] =?UTF-8?q?[ko]=20String()=20=EC=83=9D=EC=84=B1?= =?UTF-8?q?=EC=9E=90=20=EC=8B=A0=EA=B7=9C=20=EB=B2=88=EC=97=AD=20(#21771)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [ko] String() 생성자 신규 번역 - String() 생성자 신규 번역 * 사소한 부분 수정 * 리뷰사항 수정 --- .../global_objects/string/string/index.md | 79 +++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 files/ko/web/javascript/reference/global_objects/string/string/index.md diff --git a/files/ko/web/javascript/reference/global_objects/string/string/index.md b/files/ko/web/javascript/reference/global_objects/string/string/index.md new file mode 100644 index 00000000000000..c97f601fcf54f6 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/string/index.md @@ -0,0 +1,79 @@ +--- +title: String() 생성자 +slug: Web/JavaScript/Reference/Global_Objects/String/String +l10n: + sourceCommit: cca8713f0b26c8fbba765b9ccb8c3619ca5a6645 +--- + +{{JSRef}} + +**`String()`** 생성자는 {{jsxref("String")}} 객체를 생성합니다. 함수로 호출될 경우 String 형의 원시 값을 반환합니다. + +## 구문 + +```js-nolint +new String(thing) +String(thing) +``` + +> **참고:** `String()`은 [`new`](/ko/docs/Web/JavaScript/Reference/Operators/new)와 함께 호출하거나 아니면 단독으로 호출할 수 있습니다. 하지만 효과는 다릅니다. [반환 값](#반환_값)을 참고하시기 바랍니다. + +### 매개변수 + +- `thing` + - : 문자로 바꿀 모든 것. + +### 반환 값 + +`String()`이 함수로 호출되면 ([`new`](/ko/docs/Web/JavaScript/Reference/Operators/new) 없이) [문자열 원시형](/ko/docs/Web/JavaScript/Reference/Global_Objects/String#string_coercion)으로 강제로 변환된 `값`을 반환합니다. 특히 [Symbol](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol) 값은 `"Symbol(description)"`으로 변환되며, 여기서 `description`은 심볼의 [description](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/description)입니다. + +`String()`이 생성자로 호출되면(`new`와 함께) 특별한 기호 심볼처리 없이 `value`을 문자열 원시형으로 강제로 변환하고 원시형이 아닌 {{jsxref("String")}} 객체로 감싸서 반환합니다. + +> **경고:** `String` 생성자를 사용하는 경우는 거의 없습니다. + +## 예제 + +### String 생성자와 String 함수 + +String 함수와 String 생성자는 다른 결과를 생성합니다. + +```js +const a = new String("Hello world"); // a === "Hello world" 는 false입니다 +const b = String("Hello world"); // b === "Hello world" 는 true 입니다 +a instanceof String; // true +b instanceof String; // false +typeof a; // "object" +typeof b; // "string" +``` + +여기서 함수는 약속한 대로 문자열({{Glossary("primitive", "원시 값")}} 유형)을 생성합니다. +그러나 생성자는 문자열(객체 래퍼) 유형의 인스턴스를 생성하므로 +문자열 생성자를 사용하는 경우는 거의 없습니다. + +### 심볼을 문자열화 시키기 위해 String() 사용 + +`String()`은 심볼을 어떠한 에러 발생 없이 변환을 할 수 있는 유일한 방법입니다. 매우 명시적이기 때문이지요. + +```js example-bad +const sym = Symbol("example"); +`${sym}`; // TypeError: Cannot convert a Symbol value to a string +"" + sym; // TypeError: Cannot convert a Symbol value to a string +"".concat(sym); // TypeError: Cannot convert a Symbol value to a string +``` + +```js example-good +const sym = Symbol("example"); +String(sym); // "Symbol(example)" +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [텍스트 서식](/ko/docs/Web/JavaScript/Guide/Text_formatting) 안내서 From c19cf79f28bab1acd2929f30db071b8ec4e1480f Mon Sep 17 00:00:00 2001 From: Jongha Kim Date: Wed, 10 Jul 2024 14:02:13 +0900 Subject: [PATCH 155/698] =?UTF-8?q?[ko]=20Intl.Segmenter=20=EC=84=A4?= =?UTF-8?q?=EB=AA=85=20=EC=8B=A0=EA=B7=9C=20=EB=B2=88=EC=97=AD=20=EC=99=B8?= =?UTF-8?q?=20(#22309)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [ko] Intl.Segmenter 설명 신규 번역 외 - Intl.Segmenter 설명 신규 번역 - Array.length 최신화 * 리뷰사항 수정 * 추가 수정 사항 반영 --- .../global_objects/array/length/index.md | 112 +++++++++++------- .../global_objects/intl/segmenter/index.md | 70 +++++++++++ 2 files changed, 141 insertions(+), 41 deletions(-) create mode 100644 files/ko/web/javascript/reference/global_objects/intl/segmenter/index.md diff --git a/files/ko/web/javascript/reference/global_objects/array/length/index.md b/files/ko/web/javascript/reference/global_objects/array/length/index.md index 2ca045bbc0b6f9..c17a12d0711a5d 100644 --- a/files/ko/web/javascript/reference/global_objects/array/length/index.md +++ b/files/ko/web/javascript/reference/global_objects/array/length/index.md @@ -1,64 +1,66 @@ --- title: Array.length slug: Web/JavaScript/Reference/Global_Objects/Array/length +l10n: + sourceCommit: 5c3c25fd4f2fbd7a5f01727a65c2f70d73f1880a --- {{JSRef}} -`Array` 인스턴스의 **`length`** 속성은 배열의 길이를 반환합니다. 반환값은 부호 없는 32비트 정수형이며, 배열의 최대 인덱스보다 항상 큽니다. **`length`** 속성에 값을 설정할 경우 배열의 길이를 변경합니다. +{{jsxref("Array")}} 인스턴스의 **`length`** 데이터 속성은 해당 배열의 요소 수를 나타냅니다. 해당 값은 부호 없는 32비트 정수이며 배열의 최대 인덱스 보다 항상 큽니다. -{{EmbedInteractiveExample("pages/js/array-length.html")}} +{{EmbedInteractiveExample("pages/js/array-length.html", "shorter")}} + +## 값 + +232보다 작은 음수가 아닌 정수. + +{{js_property_attributes(1, 0, 0)}} ## 설명 -`length` 속성의 값은 양의 정수이며 2^32 미만의 값을 가집니다. +`length` 속성의 값은 양의 정수이며 232 미만의 값을 가집니다. ```js -var namelistA = new Array(4294967296); // 2의 32제곱 = 4294967296 -var namelistC = new Array(-100); // 음수 +const listA = [1, 2, 3]; +const listB = new Array(6); -console.log(namelistA.length); // RangeError: Invalid array length -console.log(namelistC.length); // RangeError: Invalid array length +console.log(listA.length); +// 3 + +console.log(listB.length); +// 6 -var namelistB = []; -namelistB.length = Math.pow(2, 32) - 1; // 길이를 2의 32제곱 미만으로 설정 -console.log(namelistB.length); +listB.length = 2 ** 32; // 4294967296 +// RangeError: Invalid array length -// 4294967295 +const listC = new Array(-100); // 음수 값은 허용되지 않습니다 +// RangeError: Invalid array length ``` -아무 때나 `length` 속성에 값을 설정해 배열을 절단할 수 있습니다. `length` 속성으로 배열의 길이를 늘리면 실제 원소의 수가 증가합니다. 예를 들어 길이가 2인 배열의 `length`를 3으로 설정한다면 마지막에 `undefined`가 추가돼 총 3개의 요소를 갖게 됩니다. +배열 객체는 `length` 속성을 주시하여, `length` 값을 배열의 내용과 자동으로 동기화합니다. 이것은 다음을 의미합니다. + +- `length`를 현재 길이보다 작은 값으로 설정하면 배열이 잘립니다. 새 `length`를 초과하는 요소는 삭제됩니다. +- 배열 인덱스(232보다 작은, 음이 아닌 정수)를 현재 `length` 이상으로 설정하면 배열이 확장됩니다. 새로운 가장 큰 인덱스를 반영하도록 `length` 속성이 증가합니다. +- `length`를 잘못된 값(예: 음수 또는 정수가 아닌 값)으로 설정하면 `RangeError` 예외가 발생합니다. + +`length`가 현재 길이보다 큰 값으로 설정되면 실제 `undefined` 값이 아닌 [빈 슬롯](/ko/docs/Web/JavaScript/Guide/Indexed_collections#희소_배열)을 추가하여 배열을 확장합니다. 빈 슬롯은 배열 방법과 몇 가지 특별한 상호 작용을 합니다. [배열 방법과 빈 슬롯](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#배열_메서드와_빈_슬롯)을 참조하십시오. ```js -var arr = [1, 2, 3]; -printEntries(arr); - -arr.length = 5; // set array length to 5 while currently 3. -printEntries(arr); - -function printEntries(arr) { - var length = arr.length; - for (var i = 0; i < length; i++) { - console.log(arr[i]); - } - console.log("=== printed ==="); -} +const arr = [1, 2]; +console.log(arr); +// [ 1, 2 ] +arr.length = 5; // 현재 길이가 2이지만 배열의 길이를 5로 설정합니다. +console.log(arr); +// [ 1, 2, <3 empty items> ] + +arr.forEach((element) => console.log(element)); // 1 // 2 -// 3 -// === printed === -// 1 -// 2 -// 3 -// undefined -// undefined -// === printed === ``` -그러나 `length` 속성의 값이 꼭 배열에 정의된 원소의 수를 나타내진 않습니다. [`length`와 숫자형 속성의 관계](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#length_%EC%99%80_%EC%88%AB%EC%9E%90%ED%98%95_%EC%86%8D%EC%84%B1%EC%9D%98_%EA%B4%80%EA%B3%84)를 참고하세요. - -{{js_property_attributes(1, 0, 0)}} +[length와 숫자 속성의 관계](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#length와_숫자_속성의_관계)를 참고하시기 바랍니다. ## 예제 @@ -67,9 +69,9 @@ function printEntries(arr) { 다음 예제는 `numbers` 배열을 length 속성의 크기만큼 순회합니다. 각 원소의 값은 두 배가 됩니다. ```js -var numbers = [1, 2, 3, 4, 5]; -var length = numbers.length; -for (var i = 0; i < length; i++) { +const numbers = [1, 2, 3, 4, 5]; +const length = numbers.length; +for (let i = 0; i < length; i++) { numbers[i] *= 2; } // numbers is now [2, 4, 6, 8, 10] @@ -80,7 +82,7 @@ for (var i = 0; i < length; i++) { 다음 예제는 `numbers` 배열의 현재 길이가 3보다 클 경우 3으로 줄입니다. ```js -var numbers = [1, 2, 3, 4, 5]; +const numbers = [1, 2, 3, 4, 5]; if (numbers.length > 3) { numbers.length = 3; @@ -88,9 +90,33 @@ if (numbers.length > 3) { console.log(numbers); // [1, 2, 3] console.log(numbers.length); // 3 +console.log(numbers[3]); // undefined; 추가 요소는 삭제되었습니다. +``` + +### 고정 길이의 빈 배열 생성하기 + +`length`를 현재 크기보다 더 크게 설정하면 [희소 배열](/ko/docs/Web/JavaScript/Guide/Indexed_collections#희소_배열)을 생성합니다. + +```js +const numbers = []; +numbers.length = 3; +console.log(numbers); // [empty x 3] +``` + +### length 쓰기 불가능한 배열 + +`length` 속성은 현재 길이를 넘어 요소가 추가되면 Array에 의해 자동으로 업데이트됩니다. `length` 속성이 쓰기 불가능한 경우 Array는 이를 업데이트할 수 없습니다. 이로 인해 [엄격 모드](/ko/docs/Web/JavaScript/Reference/Strict_mode)에서 오류가 발생합니다. + +```js +"use strict"; + +const numbers = [1, 2, 3, 4, 5]; +Object.defineProperty(numbers, "length", { writable: false }); +numbers[5] = 6; // TypeError: Cannot assign to read only property 'length' of object '[object Array]' +numbers.push(5); // // TypeError: Cannot assign to read only property 'length' of object '[object Array]' ``` -## 명세 +## 명세서 {{Specifications}} @@ -100,4 +126,8 @@ console.log(numbers.length); // 3 ## 같이 보기 +- [인덱스 기반 컬렉션](/ko/docs/Web/JavaScript/Guide/Indexed_collections) 안내서 - {{jsxref("Array")}} +- [`TypedArray.prototype.length`](/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/length) +- [`String`: `length`](/ko/docs/Web/JavaScript/Reference/Global_Objects/String/length) +- [RangeError: invalid array length](/ko/docs/Web/JavaScript/Reference/Errors/Invalid_array_length) diff --git a/files/ko/web/javascript/reference/global_objects/intl/segmenter/index.md b/files/ko/web/javascript/reference/global_objects/intl/segmenter/index.md new file mode 100644 index 00000000000000..3b004fc73c2495 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/intl/segmenter/index.md @@ -0,0 +1,70 @@ +--- +title: Intl.Segmenter +slug: Web/JavaScript/Reference/Global_Objects/Intl/Segmenter +l10n: + sourceCommit: 01bf58c144237c1fc75cf7135491346778591f09 +--- + +{{JSRef}} + +**`Intl.Segmenter`** 객체를 사용하면 로케일에 따른 텍스트 분할이 가능하므로 문자열에서 의미 있는 항목(문자소, 단어 또는 문장)을 가져올 수 있습니다. + +{{EmbedInteractiveExample("pages/js/intl-segmenter.html")}} + +## 생성자 + +- {{jsxref("Intl/Segmenter/Segmenter", "Intl.Segmenter()")}} + - : 새로운 `Intl.Segmenter` 객체를 생성합니다. + +## 정적 메서드 + +- {{jsxref("Intl/Segmenter/supportedLocalesOf", "Intl.Segmenter.supportedLocalesOf()")}} + - : 런타임의 기본 로케일로 되돌아가지 않고 지원되는 제공된 로케일을 포함하는 배열을 반환합니다. + +## 인스턴스 속성 + +아래 속성은 `Intl.Segmenter.prototype`에 정의되어 있으며, 모든 `Intl.Segmenter` 인스턴스가 공유합니다. + +- : {{jsxref("Object/constructor", "Intl.Segmenter.prototype.constructor")}} + - 인스턴스 객체를 생성한 생성자 함수입니다. `Intl.Segmenter` 인스턴스의 경우, 초기 값은 {{jsxref("Intl/Segmenter/Segmenter", "Intl.Segmenter")}} 생성자입니다. +- : `Intl.Segmenter.prototype[@@toStringTag]` + - [`@@toStringTag`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) 속성의 초기 값은 문자열 `"Intl.Segmenter"`입니다. 이 속성은 {{jsxref("Object.prototype.toString()")}}에서 사용됩니다. + +## 인스턴스 매서드 + +- {{jsxref("Intl/Segmenter/resolvedOptions", "Intl.Segmenter.prototype.resolvedOptions()")}} + - : 이 `Intl.Segmenter` 객체를 초기화하는 동안 계산된 로케일 및 세부화된 옵션을 반영하는 속성이 포함된 새 객체를 반환합니다. +- {{jsxref("Intl/Segmenter/segment", "Intl.Segmenter.prototype.segment()")}} + - : 문자열의 세그먼트를 나타내는 새로운 이터러블 [`Segments`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter/segment/Segments) 인스턴스를 이 `Intl.Segmenter` 인스턴스의 로케일과 세분성에 따라 반환합니다. + +## 예제 + +### 기본적인 사용법과 String.prototype.split()과의 차이 + +문자열을 단어로 분할하기 위해 [`String.prototype.split(" ")`](/ko/docs/Web/JavaScript/Reference/Global_Objects/String/split)을 사용하면 텍스트의 로케일이 단어 사이에 공백을 사용하지 않는 경우(일본어, 중국어, 태국어, 라오스어, 크메르어, 미얀마어 등의 경우) 올바른 결과를 얻지 못할 수 있습니다. + +```js example-bad +const str = "吾輩は猫である。名前はたぬき。"; +console.table(str.split(" ")); +// ['吾輩は猫である。名前はたぬき。'] +// 두 문장이 올바르게 분할되지 않았습니다. +``` + +```js example-good +const str = "吾輩は猫である。名前はたぬき。"; +const segmenterJa = new Intl.Segmenter("ja-JP", { granularity: "word" }); + +const segments = segmenterJa.segment(str); +console.table(Array.from(segments)); +// [{segment: '吾輩', index: 0, input: '吾輩は猫である。名前はたぬき。', isWordLike: true}, +// 기타 등등. +// ] +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} From 7ad4623004d405eb9d9e10b8fcd0312e81f618da Mon Sep 17 00:00:00 2001 From: Chunhui Fu Date: Wed, 10 Jul 2024 16:19:06 +0800 Subject: [PATCH 156/698] [zh-cn]: remove experimental_inline (#22345) --- .../reference/global_objects/arraybuffer/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/files/zh-cn/web/javascript/reference/global_objects/arraybuffer/index.md b/files/zh-cn/web/javascript/reference/global_objects/arraybuffer/index.md index 142ced68419751..4948c9828e3221 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/arraybuffer/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/arraybuffer/index.md @@ -2,7 +2,7 @@ title: ArrayBuffer slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer l10n: - sourceCommit: 5c3c25fd4f2fbd7a5f01727a65c2f70d73f1880a + sourceCommit: c9f7361807d9b0fbf0fcf0ccc5cc166bf33d307d --- {{JSRef}} @@ -57,7 +57,7 @@ l10n: - : `ArrayBuffer` 的大小，以字节为单位。它在构造时确定，并且只有在 `ArrayBuffer` 可调整大小的情况下才能通过 {{jsxref("ArrayBuffer.prototype.resize()")}} 方法进行改变。 - {{jsxref("Object/constructor", "ArrayBuffer.prototype.constructor")}} - : 创建实例对象的构造函数。对于 `ArrayBuffer` 实例，初始值为 {{jsxref("ArrayBuffer/ArrayBuffer", "ArrayBuffer")}} 构造函数。 -- {{jsxref("ArrayBuffer.prototype.detached")}} {{experimental_inline}} +- {{jsxref("ArrayBuffer.prototype.detached")}} - : 只读。如果 `ArrayBuffer` 已分离（传输），则返回 `true`，否则返回 `false`。 - {{jsxref("ArrayBuffer.prototype.maxByteLength")}} - : 只读，`ArrayBuffer` 可以调整到的最大字节长度。它在构造时确定，并且无法更改。 @@ -72,9 +72,9 @@ l10n: - : 将 `ArrayBuffer` 调整为指定大小，以字节为单位。 - {{jsxref("ArrayBuffer.prototype.slice()")}} - : 返回一个新的 `ArrayBuffer` 对象，其内容是从 `begin`（包含）到 `end`（不包含）的 `ArrayBuffer` 的字节内容的副本。如果 `begin` 或 `end` 为负数，则它将从数组的末尾开始计算索引，而非从数组的开头。 -- {{jsxref("ArrayBuffer.prototype.transfer()")}} {{experimental_inline}} +- {{jsxref("ArrayBuffer.prototype.transfer()")}} - : 创建一个新的 `ArrayBuffer` 对象，其内容是与此缓冲区相同的字节内容，然后分离此缓冲区。 -- {{jsxref("ArrayBuffer.prototype.transferToFixedLength()")}} {{experimental_inline}} +- {{jsxref("ArrayBuffer.prototype.transferToFixedLength()")}} - : 创建一个新的不可调整大小的 `ArrayBuffer` 对象，其内容与此缓冲区相同，然后分离此缓冲区。 ## 示例 From 1fc12102cbf6e1af7aac1495b9cf828b7be4c138 Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Wed, 10 Jul 2024 16:20:03 +0800 Subject: [PATCH 157/698] [zh-cn]: update the translation of `CanvasGradient.addColorStop()` method (#21939) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Co-authored-by: A1lo --- .../api/canvasgradient/addcolorstop/index.md | 91 +++++++------------ 1 file changed, 32 insertions(+), 59 deletions(-) diff --git a/files/zh-cn/web/api/canvasgradient/addcolorstop/index.md b/files/zh-cn/web/api/canvasgradient/addcolorstop/index.md index 1d957d70e2da0b..afdcbe1751080b 100644 --- a/files/zh-cn/web/api/canvasgradient/addcolorstop/index.md +++ b/files/zh-cn/web/api/canvasgradient/addcolorstop/index.md @@ -1,30 +1,43 @@ --- -title: CanvasGradient.addColorStop() +title: CanvasGradient：addColorStop() 方法 slug: Web/API/CanvasGradient/addColorStop +l10n: + sourceCommit: daeff1a2efaae366bcc8b6d911d86985646e665e --- -{{APIRef("Canvas")}} +{{APIRef("Canvas API")}}{{AvailableInWorkers}} -**`CanvasGradient.addColorStop()`** 方法添加一个由**偏移值**和**颜色值**指定的断点到渐变。如果偏移值不在`0`到`1`之间，将抛出`INDEX_SIZE_ERR`错误，如果颜色值不能被解析为有效的 CSS 颜色值 {{cssxref("<color>")}}，将抛出`SYNTAX_ERR`错误。 +**`CanvasGradient.addColorStop()`** 方法为给定的 canvas 渐变添加一个由偏移值（`offset`）和颜色值（`color`）指定的色标。 ## 语法 -```js -void gradient.addColorStop(offset, color); +```js-nolint +addColorStop(offset, color) ``` ### 参数 -- offset - - : `0`到`1`之间的值，超出范围将抛出`INDEX_SIZE_ERR`错误 -- color - - : CSS 颜色值 {{cssxref("<color>")}}。如果颜色值不能被解析为有效的 CSS 颜色值 ``，将抛出`SYNTAX_ERR`错误。 +- `offset` + - : 一个在 `0` 到 `1` 之间（包含边界）的数字，表示色标的位置。`0` 表示渐变的起始位置，`1` 表示渐变的结束位置。 +- `color` + - : 一个 [CSS](/zh-CN/docs/Web/CSS) {{cssxref("<color>")}} 值，表示色标的颜色。 + +### 返回值 + +无（{{jsxref("undefined")}}）。 + +### 异常 + +- `IndexSizeError` {{domxref("DOMException")}} + - : 如果 `offset` 不在 0 和 1 之间（包括边界），则抛出此异常。 +- `SyntaxError` {{domxref("DOMException")}} + - : 如果 `color` 无法解析为 CSS {{cssxref("<color>")}} 值，则抛出此异常。 ## 示例 -### 使用 `addColorStop` 方法 +### 向渐变中添加色标 -一个使用{{domxref("CanvasGradient")}}对象的`addColorStop` 方法的简单例子 +此示例使用 `addColorStop` 方法向线性 {{domxref("CanvasGradient")}} 对象中添加色标。然后使用该渐变填充矩形。 #### HTML @@ -35,62 +48,22 @@ void gradient.addColorStop(offset, color); #### JavaScript ```js -var canvas = document.getElementById("canvas"); -var ctx = canvas.getContext("2d"); +const canvas = document.getElementById("canvas"); +const ctx = canvas.getContext("2d"); -var gradient = ctx.createLinearGradient(0, 0, 200, 0); +let gradient = ctx.createLinearGradient(0, 0, 200, 0); gradient.addColorStop(0, "green"); -gradient.addColorStop(1, "white"); +gradient.addColorStop(0.7, "white"); +gradient.addColorStop(1, "pink"); ctx.fillStyle = gradient; ctx.fillRect(10, 10, 200, 100); ``` -编辑以下代码可看到画布变化： - -```html hidden - -
- - -
- -``` - -```js hidden -var canvas = document.getElementById("canvas"); -var ctx = canvas.getContext("2d"); -var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var edit = document.getElementById("edit"); -var code = textarea.value; - -function drawCanvas() { - ctx.clearRect(0, 0, canvas.width, canvas.height); - eval(textarea.value); -} - -reset.addEventListener("click", function () { - textarea.value = code; - drawCanvas(); -}); - -edit.addEventListener("click", function () { - textarea.focus(); -}); - -textarea.addEventListener("input", drawCanvas); -window.addEventListener("load", drawCanvas); -``` +#### 结果 -{{ EmbedLiveSample('使用 addColorStop 方法', 700, 360) }} +{{ EmbedLiveSample('向渐变中添加色标', 700, 180) }} -## 标准 +## 规范 {{Specifications}} From ab4d68f468dbe5be11388ad1edf6321a2c18a1c9 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Wed, 10 Jul 2024 18:55:23 +0800 Subject: [PATCH 158/698] zh-CN: create Glossary/Telnet (#22223) feat: update translation --- files/zh-cn/glossary/telnet/index.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 files/zh-cn/glossary/telnet/index.md diff --git a/files/zh-cn/glossary/telnet/index.md b/files/zh-cn/glossary/telnet/index.md new file mode 100644 index 00000000000000..70e658cbc1a438 --- /dev/null +++ b/files/zh-cn/glossary/telnet/index.md @@ -0,0 +1,14 @@ +--- +title: Telnet +slug: Glossary/Telnet +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**Telnet** 是一个用于访问远程计算机的命令行工具和底层 TCP/IP 协议。 + +## 参见 + +- 维基百科上的 [Telnet](https://zh.wikipedia.org/wiki/Telnet) From c2a2454a163fd228f8cb02b2f41f0f3442ed910d Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Wed, 10 Jul 2024 19:00:51 +0800 Subject: [PATCH 159/698] zh-CN: create Glossary/Stringifier (#22212) Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- files/zh-cn/glossary/stringifier/index.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 files/zh-cn/glossary/stringifier/index.md diff --git a/files/zh-cn/glossary/stringifier/index.md b/files/zh-cn/glossary/stringifier/index.md new file mode 100644 index 00000000000000..ddefd270f732b2 --- /dev/null +++ b/files/zh-cn/glossary/stringifier/index.md @@ -0,0 +1,14 @@ +--- +title: 字符串化器 +slug: Glossary/Stringifier +l10n: + sourceCommit: e099e74fe5c09c46f0dfe044894692721a713d29 +--- + +{{GlossarySidebar}} + +{{Glossary("object", "对象")}}的字符串化器是任何被定义为在需要{{Glossary("string", "字符串")}}的情况下提供对象的文本表示的{{Glossary("attribute", "属性")}}或{{Glossary("method", "方法")}}。 + +## 参见 + +- [WebIDL 文件中包含的信息](/zh-CN/docs/MDN/Writing_guidelines/Howto/Write_an_api_reference/Information_contained_in_a_WebIDL_file#字符串化器)中的字符串化器 From 1315b3112cdf133bb030018ea396590e990f5c7b Mon Sep 17 00:00:00 2001 From: JinMokai <59952672+JinMokai@users.noreply.github.com> Date: Wed, 10 Jul 2024 21:06:46 +0800 Subject: [PATCH 160/698] zh-cn: translate `URL.canParse()` static method (#22215) Co-authored-by: A1lo --- .../web/api/url/canparse_static/index.md | 101 ++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 files/zh-cn/web/api/url/canparse_static/index.md diff --git a/files/zh-cn/web/api/url/canparse_static/index.md b/files/zh-cn/web/api/url/canparse_static/index.md new file mode 100644 index 00000000000000..c8ad227d753d16 --- /dev/null +++ b/files/zh-cn/web/api/url/canparse_static/index.md @@ -0,0 +1,101 @@ +--- +title: URL：canParse() 静态方法 +slug: Web/API/URL/canParse_static +l10n: + sourceCommit: 1145d9748b094cf9bfd42b7ea8847ce8f647f002 +--- + +{{ApiRef("URL API")}} + +{{domxref("URL")}} 接口的 **`URL.canParse()`** 静态方法返回一个布尔值，表示绝对 URL 或与基本 URL 结合的相对地址是否可解析和有效。 + +这是在 [try...catch](/zh-CN/docs/Web/JavaScript/Reference/Statements/try...catch) 代码块中构造 `URL` 的快速而简单的替代方法。对于会使得 [`URL()` 构造函数](/zh-CN/docs/Web/API/URL/URL)成功的相同值，它将返回 `true`，而对于会导致构造函数抛出的错误的值，它返回 `false`。 + +## 语法 + +```js-nolint +URL.canParse(url) +URL.canParse(url, base) +``` + +### 参数 + +- `url` + - : 字符串或其他任何带有 {{Glossary("stringifier")}} 的对象（例如，包括 {{htmlelement("a")}} 或 {{htmlelement("area")}} 元素），表示绝对或相对 URL。如果 `url` 是相对 URL，则 `base` 为必填项，并将用作基本 URL。如果 `url` 是绝对 URL，给定的 `base` 将被忽略。 +- `base` {{optional_inline}} + - : 字符串，表示在 `url` 是相对 URL 的情况下使用的基本 URL。如果未指定，则默认为 `undefined`。 + +> **备注：** `url` 和 `base` 参数将根据你传递的任何值进行字符串化，就像其他接受字符串的 Web API 一样。特别是，你可以使用一个现有的 {{domxref("URL")}} 对象作为任一参数，它将被字符串化为该对象的 {{domxref("URL.href", "href")}} 属性。 + +### 返回值 + +如果 URL 可以解析且有效，则为 `true`；否则为 `false`。 + +## 示例 + +本示例演示了如何使用 `URL.canParse()` 静态方法来处理一些不同的绝对和相对 URL 的值。 + +示例的第一部分定义了记录日志的 HTML `
` 元素和日志方法 `log()`。
+
+```html
+

+```
+
+```js
+const logElement = document.getElementById("log");
+function log(text) {
+  logElement.innerText += `${text}\n`;
+}
+```
+
+接下来，我们使用 `"canParse" in URL` 条件检查是否支持 `URL.canParse()` 方法。如果支持该方法，我们会记录检查绝对 URL、无基本 URL 的相对 URL 和有效基本 URL 的相对 URL 的结果。我们还记录了不支持 `URL.canParse()` 的情况。
+
+```js
+if ("canParse" in URL) {
+  log("测试有效绝对 URL");
+  let url = "https://developer.mozilla.org/";
+  let result = URL.canParse(url);
+  log(` URL.canParse("${url}"): ${result}`);
+
+  log("\n测试无基本 URL 的相对 URL");
+  url = "/zh-CN/docs";
+  result = URL.canParse(url);
+  log(` URL.canParse("${url}"): ${result}`);
+
+  log("\n测试具有有效基本 URL 的相对 URL");
+  let baseUrl = "https://developer.mozilla.org/";
+  result = URL.canParse(url, baseUrl);
+  log(` URL.canParse("${url}","${baseUrl}"): ${result}`);
+} else {
+  log("不支持 URL.canParse()");
+}
+```
+
+最后，下面的代码表明，`baseUrl` 不一定是字符串。这里我们传递的是一个 `URL` 对象。
+
+```js
+if ("canParse" in URL) {
+  log("\n测试以 URL 对象为基本 URL 的相对 URL");
+  let baseUrl = new URL("https://developer.mozilla.org/");
+  let url = "/zh-CN/docs";
+  result = URL.canParse(url, baseUrl);
+  log(` URL.canParse("${url}","${baseUrl}"): ${result}`);
+}
+```
+
+各项检查结果如下。
+
+{{EmbedLiveSample('示例', '100%', '200')}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("URL.URL", "URL()")}}
+- [`core-js`](https://github.com/zloirock/core-js) 中可用的 [`URL.canParse()` 的 polyfill](https://github.com/zloirock/core-js#url-and-urlsearchparams)

From faf6f9a2d8283547a1733757f1470b6dbe2b1298 Mon Sep 17 00:00:00 2001
From: Pedro Simon 
Date: Wed, 10 Jul 2024 16:25:21 -0300
Subject: [PATCH 161/698] Fix typo (#22354)

seridor -> servidor
---
 files/es/learn/javascript/client-side_web_apis/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/es/learn/javascript/client-side_web_apis/index.md b/files/es/learn/javascript/client-side_web_apis/index.md
index f6b9a0b55ca9a2..8f3d188434fa96 100644
--- a/files/es/learn/javascript/client-side_web_apis/index.md
+++ b/files/es/learn/javascript/client-side_web_apis/index.md
@@ -22,7 +22,7 @@ Conocimiento basico de [HTML](/es/docs/Learn/HTML) y [CSS](/es/docs/Learn/CSS) t
 - [Manipulacion de documentos](/es/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)
   - : Al escribir páginas web y aplicaciones, una de las cosas más comunes que querrás hacer es manipular los documentos web de alguna manera. Esto generalmente se hace usando el Document Object Model (DOM), un conjunto de APIs para controlar el HTML y la información de sus estilos que hace un uso intensivo del objeto {{domxref("Document")}} . En este artículo, veremos cómo usar el DOM en detalle, junto con algunas otras API que pueden alterar su entorno de maneras interesantes.
 - [Obteniendo data desde el servidor](/es/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)
-  - : Otra tarea frecuente en las en las aplicaciones y los sitios web modernos, es recuperar los datos individuales de un elemento del seridor para actualizar solo una seccion de la pagina sin tener que cargar una pagina web completamente nueva. Este detalle, aparentemente pequeño, ha tenido un gran impacto en el rendimiento y el comportamiento de los sitios, En este artículo, explicaremos el concepto y veremos las tecnologías que hacen esto posible, como {{domxref("XMLHttpRequest")}} y el [Fetch API](/es/docs/Web/API/Fetch_API).
+  - : Otra tarea frecuente en las en las aplicaciones y los sitios web modernos, es recuperar los datos individuales de un elemento del servidor para actualizar solo una seccion de la pagina sin tener que cargar una pagina web completamente nueva. Este detalle, aparentemente pequeño, ha tenido un gran impacto en el rendimiento y el comportamiento de los sitios, En este artículo, explicaremos el concepto y veremos las tecnologías que hacen esto posible, como {{domxref("XMLHttpRequest")}} y el [Fetch API](/es/docs/Web/API/Fetch_API).
 - [APIs de terceros](/es/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs)
   - : Las APIs que hemos cubierto hasta ahora están integradas en el navegador, pero no todas las APIs lo estan. Muchos grandes sitios web y servicios tales como Google Maps, Twitter, Facebook, PayPal, etc. proporcionan APIs que permiten a los desarrolladores hacer uso de sus datos (p.ej. mostrando tu actividad en twitter dentro de tu blog) o sus servicios (p.ej. mostrar una ubicacion personalizada porGoogle Maps en tu sitio, o usar el inicio de sesión de Facebook para que inicien sesión tus usuarios). Este artículo analiza la diferencia entre las API del navegador y las API de terceros y muestra algunos usos típicos de este último.
 - [Dibujar gráficos](/es/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics)

From 23c96d3c55079d3f04085f9280095499071ceed5 Mon Sep 17 00:00:00 2001
From: Leonid Vinogradov 
Date: Thu, 11 Jul 2024 02:42:01 +0300
Subject: [PATCH 162/698] [fr] fix images and links in `Web/HTTP/Overview`
 (#22305)

* [fr] fix images and flaws in 'Web/HTTP/Overview'

* [fr] improve glossary term usage

Co-authored-by: Carolyn Wu <87150472+cw118@users.noreply.github.com>

* [fr] improve picture description

Co-authored-by: Carolyn Wu <87150472+cw118@users.noreply.github.com>

* [fr] improve picture description

Co-authored-by: Carolyn Wu <87150472+cw118@users.noreply.github.com>

---------

Co-authored-by: Carolyn Wu <87150472+cw118@users.noreply.github.com>
---
 files/fr/web/http/overview/index.md | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/files/fr/web/http/overview/index.md b/files/fr/web/http/overview/index.md
index 258a05b5edf766..2c55fe4bdc9d28 100644
--- a/files/fr/web/http/overview/index.md
+++ b/files/fr/web/http/overview/index.md
@@ -5,13 +5,15 @@ slug: Web/HTTP/Overview
 
 {{HTTPSidebar}}
 
-**HTTP** est un {{glossary("protocole")}} qui permet de récupérer des ressources telles que des documents HTML. Il est à la base de tout échange de données sur le Web. C'est un protocole de type client-serveur, ce qui signifie que les requêtes sont initiées par le destinataire (qui est généralement un navigateur web). Un document complet est construit à partir de différents sous-documents qui sont récupérés, par exemple du texte, des descriptions de mise en page, des images, des vidéos, des scripts et bien plus.
+**HTTP** est un {{glossary("protocol", "protocole")}} qui permet de récupérer des ressources telles que des documents HTML. Il est à la base de tout échange de données sur le Web. C'est un protocole de type client-serveur, ce qui signifie que les requêtes sont initiées par le destinataire (qui est généralement un navigateur web). Un document complet est construit à partir de différents sous-documents qui sont récupérés, par exemple du texte, des descriptions de mise en page, des images, des vidéos, des scripts et bien plus.
 
-![Un document web se compose de différentes ressources](fetching_a_page.png)
+![Un document web se compose de différentes ressources](https://mdn.github.io/shared-assets/images/diagrams/http/overview/fetching-a-page.svg)
 
 Les clients et serveurs communiquent par l'échange de messages individuels (en opposition à un flux de données). Les messages envoyés par le client, généralement un navigateur web, sont appelés des _requêtes_ et les messages renvoyés par le serveur sont appelés _réponses_.
 
-![HTTP est un protocole de la couche d'application fonctionnant au-dessus de TCP (pour la couche de transport) et IP (pour la couche réseau). HTTP est en dessous de la couche de présentation.](http-layers.png) Conçu au début des années 1990, HTTP est un protocole extensible qui a évolué au cours du temps. C'est un protocole de [la couche application](https://fr.wikipedia.org/wiki/Couche_application) dont les données transitent via {{glossary("TCP")}} ou à travers une connexion TCP chiffrée avec {{glossary("TLS")}}. En théorie, tout protocole de transport fiable pourrait être utilisé. En raison de son extensibilité, il n'est pas seulement utilisé pour récupérer des documents, mais aussi pour des images, des vidéos ou bien pour renvoyer des contenus vers des serveurs, comme des résultats de formulaires HTML. HTTP peut aussi être utilisé pour récupérer des parties de documents pour mettre à jour à la demande des pages web.
+![HTTP est un protocole de la couche d'application fonctionnant au-dessus de TCP (pour la couche de transport) et IP (pour la couche réseau). HTTP est en dessous de la couche de présentation.](https://mdn.github.io/shared-assets/images/diagrams/http/overview/http-layers.svg)
+
+Conçu au début des années 1990, HTTP est un protocole extensible qui a évolué au cours du temps. C'est un protocole de [la couche application](https://fr.wikipedia.org/wiki/Couche_application) dont les données transitent via {{glossary("TCP")}} ou à travers une connexion TCP chiffrée avec {{glossary("TLS")}}. En théorie, tout protocole de transport fiable pourrait être utilisé. En raison de son extensibilité, il n'est pas seulement utilisé pour récupérer des documents, mais aussi pour des images, des vidéos ou bien pour renvoyer des contenus vers des serveurs, comme des résultats de formulaires HTML. HTTP peut aussi être utilisé pour récupérer des parties de documents pour mettre à jour à la demande des pages web.
 
 ## Composants des systèmes basés sur HTTP
 
@@ -19,7 +21,7 @@ HTTP est un protocole client-serveur : les requêtes sont envoyées par une enti
 
 Chaque requête individuelle est envoyée au serveur, qui la traite et fournit une _réponse_. Entre cette requête et la réponse se trouve de nombreuses entités qu'on désignera de façon générique sous le terme {{glossary("Proxy", "proxies")}}. Celles-ci exécutent différentes opérations et agissent comme passerelles ou comme {{glossary("Cache", "caches")}} par exemple.
 
-![chaîne client serveur](client-server-chain.png)
+![chaîne client serveur](https://mdn.github.io/shared-assets/images/diagrams/http/overview/client-server-chain.svg)
 
 En réalité, il y a plus d'un ordinateur entre un navigateur et le serveur qui traite la requête : il y a les routeurs, les modems et bien plus. Grâce à la construction en couche du Web, ces intermédiaires sont cachés dans les couches réseau et transport. HTTP est bâti sur la couche applicative. Bien qu'elles puissent s'avérer importantes lorsqu'il s'agit de diagnostiquer des problèmes réseau, les couches inférieures ne sont pas pertinentes ici pour décrire HTTP.
 
@@ -57,7 +59,7 @@ Même s'il est devenu plus complexe avec l'arrivée d'HTTP/2 et l'encapsulation
 
 ### HTTP est extensible
 
-À partir de HTTP/1.0, les [en-têtes HTTP](/fr/docs/HTTP/Headers) permettent d'étendre facilement le protocole et de mener des expérimentations avec celui-ci. De nouvelles fonctionnalités peuvent même être introduites par un simple accord entre le client et le serveur à propos de la sémantique des nouveaux en-têtes.
+À partir de HTTP/1.0, les [en-têtes HTTP](/fr/docs/Web/HTTP/Headers) permettent d'étendre facilement le protocole et de mener des expérimentations avec celui-ci. De nouvelles fonctionnalités peuvent même être introduites par un simple accord entre le client et le serveur à propos de la sémantique des nouveaux en-têtes.
 
 ### HTTP est sans état, mais pas sans session
 
@@ -82,7 +84,7 @@ Voici une liste de fonctionnalités courantes, qui peuvent être contrôlées gr
 - _[Cache](/fr/docs/Web/HTTP/Caching)_
   La façon dont les documents sont mis en cache peut être contrôlée par HTTP. Le serveur peut indiquer aux proxys et aux clients ce qu'ils doivent mettre en cache et pour combien de temps. Le client peut indiquer aux proxys de cache intermédiaires d'ignorer le document qui est stocké.
 - _Lever la contrainte d'origine unique_
-  Pour éviter l'espionnage et d'autres invasions dans la vie privée, les navigateurs web imposent une séparation stricte entre les sites web. Seules les pages de la **même {{Glossary("origine")}}** peuvent accéder à toutes les informations d'une page web. Bien que cette contrainte soit un fardeau pour le serveur, les en-têtes HTTP peuvent assouplir cette séparation stricte du côté serveur, en permettant à un document de devenir un patchwork d'informations en provenance de différents domaines (il existe même des raisons de sécurité de procéder ainsi).
+  Pour éviter l'espionnage et d'autres invasions dans la vie privée, les navigateurs web imposent une séparation stricte entre les sites web. Seules les pages de la **même [origine](/fr/docs/Glossary/Origin)** peuvent accéder à toutes les informations d'une page web. Bien que cette contrainte soit un fardeau pour le serveur, les en-têtes HTTP peuvent assouplir cette séparation stricte du côté serveur, en permettant à un document de devenir un patchwork d'informations en provenance de différents domaines (il existe même des raisons de sécurité de procéder ainsi).
 - _Authentification_
   Certaines pages peuvent être protégées de sorte que seuls certains utilisateurs puissent y accéder. Une authentification simple peut être fournie par HTTP, soit en utilisant l'en-tête {{HTTPHeader ("WWW-Authenticate")}} et des en-têtes similaires, soit en définissant une session spécifique grâce à des [cookies HTTP](/fr/docs/Web/HTTP/Cookies).
 - [Proxys et tunnels](/fr/docs/Web/HTTP/Proxy_servers_and_tunneling)
@@ -132,21 +134,21 @@ Il existe deux types de messages HTTP, les requêtes et les réponses, chacun ay
 
 Un exemple de requête HTTP :
 
-![Une requête HTTP basique](http_request.png)
+![Une requête HTTP GET et ses en-têtes](https://mdn.github.io/shared-assets/images/diagrams/http/overview/http-request.svg)
 
 Une requête comprend les éléments suivants :
 
-- Une [méthode](/fr/docs/Web/HTTP/Methods) HTTP : généralement un verbe tel que {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}} ou un nom comme {{HTTPMethod("OPTIONS")}} ou {{HTTPMethod("HEAD")}} qui définit l'opération que le client souhaite effectuer. Par exemple, un client souhaite accéder à une ressource (en utilisant GET) ou téléverser le résultat d'un [formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires) (en utilisant `POST`), bien que d'autres opérations puissent être nécessaires dans d'autres cas.
+- Une [méthode](/fr/docs/Web/HTTP/Methods) HTTP : généralement un verbe tel que {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}} ou un nom comme {{HTTPMethod("OPTIONS")}} ou {{HTTPMethod("HEAD")}} qui définit l'opération que le client souhaite effectuer. Par exemple, un client souhaite accéder à une ressource (en utilisant GET) ou téléverser le résultat d'un [formulaire HTML](/fr/docs/Learn/Forms) (en utilisant `POST`), bien que d'autres opérations puissent être nécessaires dans d'autres cas.
 - Le chemin de la ressource à extraire : l'URL de la ressource à laquelle on a retiré les éléments déductibles du contexte, par exemple le {{glossary ("protocole")}} (http\://), le {{glossary ("domaine")}} (ici .mozilla.org), ou le {{glossary ("port")}} TCP (ici 80).
 - La version du protocole HTTP.
-- Les [en-têtes](/fr/docs/HTTP/Headers) optionnels qui transmettent des informations supplémentaires pour les serveurs.
+- Les [en-têtes](/fr/docs/Web/HTTP/Headers) optionnels qui transmettent des informations supplémentaires pour les serveurs.
 - Ou un corps, pour certaines méthodes comme POST, semblable à ceux dans les réponses, qui contiennent la ressource envoyée.
 
 ### Réponses
 
 Un exemple de réponse :
 
-![une réponse HTTP](http_response.png)
+![Une réponse HTTP « 200 OK » à une requête GET et les en-têtes de réponse.](https://mdn.github.io/shared-assets/images/diagrams/http/overview/http-response.svg)
 
 Une réponse comprend les éléments suivants:
 
@@ -166,4 +168,4 @@ Une autre API, [server-sent events](/fr/docs/Web/API/Server-sent_events), est un
 
 HTTP est un protocole extensible, facile d'utilisation. La structure client-serveur, combinée avec la possibilité d'ajouter simplement des en-têtes, permet à HTTP de progresser au fur et mesure de l'ajout de nouvelles fonctionnalités sur le Web.
 
-Bien que HTTP/2 ajoute de la complexité, en englobant les messages HTTP dans des trames pour améliorer les performances, la structure de base des messages est restée la même depuis HTTP/1.0. Le flux de session reste simple, ce qui lui permet d'être étudié et débogué avec un simple [moniteur de message HTTP](/fr/docs/Outils/Moniteur_réseau).
+Bien que HTTP/2 ajoute de la complexité, en englobant les messages HTTP dans des trames pour améliorer les performances, la structure de base des messages est restée la même depuis HTTP/1.0. Le flux de session reste simple, ce qui lui permet d'être étudié et débogué avec un simple [moniteur de message HTTP](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html).

From 5d2cfbda4bddd62ee6c4f399242ea16205f6154b Mon Sep 17 00:00:00 2001
From: InkoHX 
Date: Wed, 10 Jul 2024 00:52:22 +0900
Subject: [PATCH 163/698] fix typo

---
 files/ja/web/api/htmlelement/load_event/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ja/web/api/htmlelement/load_event/index.md b/files/ja/web/api/htmlelement/load_event/index.md
index d430d21f960501..6b19fc989bff93 100644
--- a/files/ja/web/api/htmlelement/load_event/index.md
+++ b/files/ja/web/api/htmlelement/load_event/index.md
@@ -12,7 +12,7 @@ l10n:
 
 > **メモ:** 実際には `load` イベントは、{{domxref("HTMLBodyElement#event_handlers", "HTMLBodyElement")}} においては、 {{domxref("Window/load_event", "window.onload")}} イベントの別名です。従って、`load` イベントは `` 要素においては、その文書のすべてのリソースが読み込まれたかエラーになったときに、一度だけ発生します。しかし、わかりやすくするために、イベントハンドラーは `HTMLBodyElement` ではなく、`window` オブジェクトに直接取り付けることが推奨されます。
 
-このイベtのはキャンセル不可で、バブリングしません。
+このイベントはキャンセル不可で、バブリングしません。
 
 ## 構文
 

From 6bbe6d0ad2b63e59ff0cc2168ed6affdfce2f3ed Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sat, 6 Jul 2024 10:35:12 +0900
Subject: [PATCH 164/698] =?UTF-8?q?2024/03/07=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E4=BD=9C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas_api/tutorial/basic_usage/index.md  | 67 ++++++++++---------
 1 file changed, 36 insertions(+), 31 deletions(-)

diff --git a/files/ja/web/api/canvas_api/tutorial/basic_usage/index.md b/files/ja/web/api/canvas_api/tutorial/basic_usage/index.md
index b37431b9e48a97..1774a9bcd05730 100644
--- a/files/ja/web/api/canvas_api/tutorial/basic_usage/index.md
+++ b/files/ja/web/api/canvas_api/tutorial/basic_usage/index.md
@@ -1,6 +1,8 @@
 ---
 title: キャンバスの基本的な使い方
 slug: Web/API/Canvas_API/Tutorial/Basic_usage
+l10n:
+  sourceCommit: c8b447485fd893d5511d88f592f5f3aec29a725b
 ---
 
 {{DefaultAPISidebar("Canvas API")}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}
@@ -21,11 +23,11 @@ slug: Web/API/Canvas_API/Tutorial/Basic_usage
 
 `` 要素は通常の画像と同じようにスタイル付けすることができます（{{cssxref("margin")}}、{{cssxref("border")}}、{{cssxref("background")}} など）。しかし、これらのルールは、実際にキャンバス上に描画されるものには影響しません。これをどう扱うかについては、このチュートリアルの[専用の章](/ja/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors)で紹介します。スタイルのルールが何も適用されていない場合、キャンバスは完全に透明なものとして描画されます。
 
-### 代替コンテンツ
+### アクセシブルコンテンツ
 
-`` 要素は {{HTMLElement("img")}} タグとは異なり、 {{HTMLElement("video")}}、{{HTMLElement("audio")}}、{{HTMLElement("picture")}} 要素のように、未対応の古いブラウザー（Internet Explorer 9 以前など）やテキストのブラウザーで表示される代替コンテンツを設定するのは簡単です。これらのブラウザーで表示される代替コンテンツを常に設定してください。
+`` 要素は、{{HTMLElement("img")}}、{{HTMLElement("video")}}、{{HTMLElement("audio")}}、{{HTMLElement("picture")}} 要素と同様に、メディアが読み込まれなかったり、ユーザーが意図通りに使いこなすことができなかったりした場合に表示される代替テキストを提供することで、アクセシビリティを確保しなければなりません。その種類のメディアに合った代替コンテンツ、キャプション、代替テキストを常に提供しなければなりません。
 
-代替コンテンツを提供する方法はとても直観的です。代替コンテンツを `` の中に入れるだけです。 `` に対応していないブラウザーはこのコンテナーを無視し、内部の代替コンテンツを表示します。 `` に対応しているブラウザーは、ふつうコンテナー内のコンテンツを無視し、通常通りキャンバスを描画します。
+代替コンテンツを提供する方法はとても直観的です。`` 要素の中にコンテンツを挿入するだけで、画面リーダーやスパイダー、他にも自動化されたボットがアクセスします。既定では、ブラウザーはコンテナーの中にあるコンテンツを無視し、`` が対応していない場合を除き、キャンバスを正常にレンダリングします。
 
 例えば、キャンバスの内容を説明するテキストを提供したり、動的に描画されるコンテンツの静的な画像を提供したりすることができます。次のようになります。
 
@@ -35,17 +37,17 @@ slug: Web/API/Canvas_API/Tutorial/Basic_usage
 
 
 
-  
+  時計
 
 ```
 
-キャンバスに対応した別なブラウザーを使用するようにユーザーに指示することは、例えばキャンバスを見ることができないユーザーにとって助けになりません。有用な代替テキストやサブ DOM を提供することは、キャンバスのアクセシビリティを向上させます。
+キャンバスに対応しているさまざまなブラウザーで使用するように指示しても、キャンバスをまったく読めないユーザーの助けにはなりません。有益な代替テキストまたは部分 DOM を使用することで、アクセスできない要素にアクセシビリティが追加されます。
 
 ### `` タグが必要
 
 代替コンテンツを内部に持つ関係上、 {{HTMLElement("img")}} 要素と異なって {{HTMLElement("canvas")}} 要素は閉じタグ (``) が**必須**です。タグを閉じなかった場合は、残りのページ全てが代替コンテンツと見なされ、結果として表示されなくなります。
 
-代替コンテンツが必要でない場合は、単に `` とすれば対応するブラウザーですべて利用することができます。
+代替コンテンツが必要でない場合は、単に `` とすれば対応するブラウザーですべて利用することができます。これはキャンバスが純粋に表現目的である場合にのみ使用しましょう。
 
 ## 描画コンテキスト
 
@@ -54,8 +56,8 @@ slug: Web/API/Canvas_API/Tutorial/Basic_usage
 初期状態ではキャンバスは空です。何かを表示するには、まずスクリプトで描画コンテキストを取得する必要があります。 {{HTMLElement("canvas")}} 要素には {{domxref("HTMLCanvasElement.getContext", "getContext()")}} というメソッドがあり、描画コンテキストを取得したり描画機能を呼び出したりするのに使います。 `getContext()` には 1 つの引数があり、コンテキストの種類を指定します。このチュートリアルで扱っているような二次元のグラフィックでは、 `"2d"` を指定すると {{domxref("CanvasRenderingContext2D")}} を取得することができます。
 
 ```js
-var canvas = document.getElementById("tutorial");
-var ctx = canvas.getContext("2d");
+const canvas = document.getElementById("tutorial");
+const ctx = canvas.getContext("2d");
 ```
 
 スクリプトの最初の行では、 DOM 内から {{HTMLElement("canvas")}} 要素を表すノードを取得するために {{domxref("document.getElementById()")}} メソッドを呼び出しています。要素のノードを取得したら、 `getContext()` メソッドを使用して描画コンテキストにアクセスすることができます。
@@ -65,10 +67,10 @@ var ctx = canvas.getContext("2d");
 {{HTMLElement("canvas")}} 要素に対応していないブラウザーでは、代替コンテンツが表示されます。スクリプトからは、 `getContext()` メソッドの有無を調べることで、ブラウザーが対応しているかどうかを確認することができます。確認するためのコードは以下のようになります。
 
 ```js
-var canvas = document.getElementById("tutorial");
+const canvas = document.getElementById("tutorial");
 
 if (canvas.getContext) {
-  var ctx = canvas.getContext("2d");
+  const ctx = canvas.getContext("2d");
   // 描画するコードをここに
 } else {
   // キャンバスに未対応の場合のコードをここに
@@ -83,26 +85,27 @@ if (canvas.getContext) {
 
 ```html
 
-
+
   
     
     Canvas tutorial
-    
     
   
-  
+  
     
+    
   
 
 ```
@@ -111,7 +114,7 @@ if (canvas.getContext) {
 
 ここでは、テンプレートが実際にどのように見えるかを説明します。このように、最初は白紙の状態です。
 
-{{EmbedLiveSample("A_skeleton_template", 160, 160)}}
+{{EmbedLiveSample("A_skeleton_template", "", "160")}}
 
 ## 単純な描画
 
@@ -119,32 +122,34 @@ if (canvas.getContext) {
 
 ```html
 
-
+
   
-    
+    
+    キャンバスの実験
+  
+  
+    
     
-  
-  
-    
   
 
 ```
 
 この例は次のように動作します。
 
-{{EmbedLiveSample("A_simple_example", 160, 160, "canvas_ex1.png")}}
+{{EmbedLiveSample("A_simple_example", "", "160")}}
 
 {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}

From e20065908ee8ca82ae0da12135c76fa1597225ee Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sat, 6 Jul 2024 10:41:04 +0900
Subject: [PATCH 165/698] =?UTF-8?q?2024/06/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

---
 .../tutorial/drawing_shapes/index.md          | 40 +++++++++----------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/files/ja/web/api/canvas_api/tutorial/drawing_shapes/index.md b/files/ja/web/api/canvas_api/tutorial/drawing_shapes/index.md
index d765a97b25ed74..08455db8fb7eb4 100644
--- a/files/ja/web/api/canvas_api/tutorial/drawing_shapes/index.md
+++ b/files/ja/web/api/canvas_api/tutorial/drawing_shapes/index.md
@@ -2,12 +2,12 @@
 title: キャンバスでの図形の描画
 slug: Web/API/Canvas_API/Tutorial/Drawing_shapes
 l10n:
-  sourceCommit: e1f9a5e968d4933e2f6a76cec7915254316482a5
+  sourceCommit: 2acd54ab1a18f86cc4a193a0df017185a1de2e40
 ---
 
 {{DefaultAPISidebar("Canvas API")}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
 
-[キャンバスの環境](/ja/docs/Web/API/Canvas_API/Tutorial/Basic_usage)をセットアップしましたので、キャンバスに描画する方法の詳細に入ることができます。この記事の終わりまでに、矩形、三角形、直線、円弧、曲線を描く方法を学び、基本的な図形について理解できます。キャンバスにオブジェクトを描く際はパスを扱うことが不可欠ですので、その方法を見ていきます。
+[キャンバスの環境](/ja/docs/Web/API/Canvas_API/Tutorial/Basic_usage)をセットアップしましたので、キャンバスに描画する方法の詳細に入ることができます。この記事の終わりまでに、長方形、三角形、直線、円弧、曲線を描く方法を学び、基本的な図形について理解できます。キャンバスにオブジェクトを描く際はパスを扱うことが不可欠ですので、その方法を見ていきます。
 
 ## グリッド
 
@@ -17,24 +17,24 @@ l10n:
 
 普通、グリッド上の 1 単位はキャンバス上の 1 ピクセルに相当します。このグリッドの原点は、*左上*の角に (0,0) の座標が配置されています。すべての要素がこの原点から相対的に配置されます。よって青い正方形の左上の場所は左から x ピクセル、上から y ピクセルの、 (x,y) の位置になります。このチュートリアルの後半では、原点を別の位置に移動したり、グリッドを回転させたり、拡大縮小したりする方法を紹介しますが、今は既定のままにしておきましょう。
 
-## 矩形の描画
+## 長方形の描画
 
-{{Glossary("SVG")}} とは異なり、 {{HTMLElement("canvas")}} は 2 つの基本的な図形、矩形とパス（直線で結んだ点のリスト）のみに対応しています。他の全ての図形は 1 つ以上のパスの組み合わせで作らなくてはなりません。幸いなことに、パスを描く一連の関数があり、とても複雑な図形を作ることができます。
+{{Glossary("SVG")}} とは異なり、 {{HTMLElement("canvas")}} は 2 つの基本的な図形、長方形とパス（直線で結んだ点のリスト）のみに対応しています。他の全ての図形は 1 つ以上のパスの組み合わせで作らなくてはなりません。幸いなことに、パスを描く一連の関数があり、とても複雑な図形を作ることができます。
 
-最初に矩形を見ていきましょう。キャンバスに矩形を描く関数が 3 つあります。
+最初に長方形を見ていきましょう。キャンバスに長方形を描く関数が 3 つあります。
 
 - {{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, width, height)")}}
-  - : 塗りつぶされた矩形を描きます。
+  - : 塗りつぶされた長方形を描きます。
 - {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, width, height)")}}
-  - : 矩形の輪郭を描きます。
+  - : 長方形の輪郭を描きます。
 - {{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, width, height)")}}
   - : 指定された領域を消去し、完全な透明にします。
 
-3 つの関数は同じ引数を取ります。 `x` と `y` はキャンバスにおける矩形の左上の角の位置（原点からの相対位置）を指定します。 `width` と `height` は矩形の大きさを指定します。
+3 つの関数は同じ引数を取ります。 `x` と `y` はキャンバスにおける長方形の左上の角の位置（原点からの相対位置）を指定します。 `width` と `height` は長方形の大きさを指定します。
 
 以下のものは前ページの `draw()` 関数ですが、ここではこれら 3 つの関数を使用しています。
 
-### 矩形の例
+### 長方形の例
 
 ```html hidden
 
@@ -65,11 +65,11 @@ draw();
 
 {{EmbedLiveSample("Rectangular_shape_example", "", "160")}}
 
-`fillRect()` 関数は 100 ピクセル各の大きな黒い正方形を描きます。 `clearRect()` 関数は中心から 60x60 ピクセルの正方形を取り除き、最後に `strokeRect()` が消去された正方形の中に 50x50 ピクセルの矩形の輪郭を描きます。
+`fillRect()` 関数は 100 ピクセル各の大きな黒い正方形を描きます。 `clearRect()` 関数は中心から 60x60 ピクセルの正方形を取り除き、最後に `strokeRect()` が消去された正方形の中に 50x50 ピクセルの長方形の輪郭を描きます。
 
 後のページでは、 `clearRect()` に代わる 2 つのメソッドを紹介し、描画された図形の色と輪郭のスタイルを変更する方法について説明します。
 
-次の節で見るパス関数とは異なり、 3 つの矩形関数はすべてキャンバスに即座に描画されます。
+次の節で見るパス関数とは異なり、 3 つの長方形関数はすべてキャンバスに即座に描画されます。
 
 ## パスを描く
 
@@ -400,12 +400,12 @@ draw();
 
 {{EmbedLiveSample("Cubic_Bezier_curves", "", "160")}}
 
-### 矩形
+### 長方形
 
-[矩形の描画](#矩形の描画)で見た、キャンバスに直接矩形を描く 3つ のメソッドに加え、現在開いているパスに矩形のパスを追加する `rect()` メソッドも用意されています。
+[長方形の描画](#長方形の描画)で見た、キャンバスに直接長方形を描く 3つ のメソッドに加え、現在開いているパスに長方形のパスを追加する `rect()` メソッドも用意されています。
 
 - {{domxref("CanvasRenderingContext2D.rect", "rect(x, y, width, height)")}}
-  - : (`x`, `y`) で指定した位置を左上の角にして、 `width` および `height` で指定した幅および高さの矩形を描きます。
+  - : (`x`, `y`) で指定した位置を左上の角にして、 `width` および `height` で指定した幅および高さの長方形を描きます。
 
 このメソッドが実行される前に、引数に (x,y) を持った `moveTo()` メソッドが自動的に呼ばれます。すなわち、始点が標準の位置に置かれます。
 
@@ -416,7 +416,7 @@ draw();
 ```html hidden
 
   
-    
+    
   
 
 ```
@@ -427,8 +427,8 @@ function draw() {
   if (canvas.getContext) {
     const ctx = canvas.getContext("2d");
 
-    roundedRect(ctx, 12, 12, 150, 150, 15);
-    roundedRect(ctx, 19, 19, 150, 150, 9);
+    roundedRect(ctx, 12, 12, 184, 168, 15);
+    roundedRect(ctx, 19, 19, 170, 154, 9);
     roundedRect(ctx, 53, 53, 49, 33, 10);
     roundedRect(ctx, 53, 119, 49, 16, 6);
     roundedRect(ctx, 135, 53, 49, 33, 10);
@@ -509,7 +509,7 @@ draw();
 
 以下の様な表示結果となります。
 
-{{EmbedLiveSample("Making_combinations", "", "160")}}
+{{EmbedLiveSample("Making_combinations", "", "200")}}
 
 実際には驚くほど簡単なので、ここでは詳しく説明しません。最も重要なことは、描画コンテキストで `fillStyle` プロパティを使用することと、ユーティリティ関数（この場合は `roundedRect()`）を使用することです。ユーティリティ関数を使用すると、必要なコードの量や複雑さを減らすことができ、とても便利です。
 
@@ -556,7 +556,7 @@ draw();
 
 {{EmbedLiveSample("Shapes_with_holes", "", "160")}}
 
-上の例では、外側の三角形は時計回り（左上隅に移動し、次に右上隅に線を描き、一番下で完了）、内側の三角形は反時計回り（一番上に移動し、次に左下隅に線を描き、そして右下で完了）。
+上の例では、外側の三角形は時計回り（左上隅に移動し、次に右上隅まで線を描き、一番下で完了）、内側の三角形は反時計回り（一番上に移動し、次に左下隅に線を描き、そして右下で完了）。
 
 ## Path2D オブジェクト
 
@@ -580,7 +580,7 @@ new Path2D(d); // SVG パスデータからパスを作成する
 
 ### Path2D の例
 
-この例では、矩形と円を作成します。どちらも `Path2D` オブジェクトとして保存しており、後で使用することができます。新たな `Path2D` API に合わせて、いくつかのメソッドが現在のパスに代わり任意で `Path2D` を受け入れられるように更新されました。ここでは、キャンバスに両方のオブジェクトを描くため、 1 つの path 引数を `stroke` および `fill` で使用しています。
+この例では、長方形と円を作成します。どちらも `Path2D` オブジェクトとして保存しており、後で使用することができます。新たな `Path2D` API に合わせて、いくつかのメソッドが現在のパスに代わり任意で `Path2D` を受け入れられるように更新されました。ここでは、キャンバスに両方のオブジェクトを描くため、 1 つの path 引数を `stroke` および `fill` で使用しています。
 
 ```html hidden
 

From 1881466c5bc1de0c48710d2e42acdfdc0bedc9b1 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sat, 6 Jul 2024 11:14:40 +0900
Subject: [PATCH 166/698] =?UTF-8?q?2024/06/03=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../applying_styles_and_colors/index.md       | 253 +++++++++---------
 1 file changed, 126 insertions(+), 127 deletions(-)

diff --git a/files/ja/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md b/files/ja/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md
index 150907cc112e82..47d0607d7e5520 100644
--- a/files/ja/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md
+++ b/files/ja/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md
@@ -1,12 +1,16 @@
 ---
 title: スタイルと色の適用
 slug: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors
+l10n:
+  sourceCommit: b69fdf97888b1332a18b34812b3478ce87248c0f
 ---
 
 {{DefaultAPISidebar("Canvas API")}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}
 
 [図形の描画](/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)についての章では、既定の線と塗りつぶしのスタイルのみを使用しました。ここでは、私たちの絵を少しでも魅力的にするために、自由に使えるキャンバスのオプションについて探っていきます。色、線のスタイル、グラデーション、パターン、影を追加する方法を学びます。
 
+> **メモ:** キャンバスのコンテンツはスクリーンリーダーにはアクセシビリティがありません。キャンバスが純粋に装飾的な場合は、 `role="presentation"` を `` の開始タグに記載してください。そうでない場合は、キャンバス要素自体に直接 [`aria-label`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-label) 属性の値として説明テキストを入れるか、開始タグと閉じタグの中に代替コンテンツを入れてください。キャンバスのコンテンツは DOM の一部ではありませんが、中の代替コンテンツは DOM の一部です。
+
 ## 色
 
 今までは、描画コンテキストのメソッドだけを見てきました。もし、図形に色をつけたいのであれば、 2 つの重要なプロパティを使用することができます。 `fillStyle` と `strokeStyle` です。
@@ -27,8 +31,8 @@ slug: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors
 
 ctx.fillStyle = "orange";
 ctx.fillStyle = "#FFA500";
-ctx.fillStyle = "rgb(255, 165, 0)";
-ctx.fillStyle = "rgba(255, 165, 0, 1)";
+ctx.fillStyle = "rgb(255 165 0)";
+ctx.fillStyle = "rgb(255 165 0 / 100%)";
 ```
 
 ### `fillStyle` の例
@@ -37,15 +41,12 @@ ctx.fillStyle = "rgba(255, 165, 0, 1)";
 
 ```js
 function draw() {
-  var ctx = document.getElementById("canvas").getContext("2d");
-  for (var i = 0; i < 6; i++) {
-    for (var j = 0; j < 6; j++) {
-      ctx.fillStyle =
-        "rgb(" +
-        Math.floor(255 - 42.5 * i) +
-        ", " +
-        Math.floor(255 - 42.5 * j) +
-        ", 0)";
+  const ctx = document.getElementById("canvas").getContext("2d");
+  for (let i = 0; i < 6; i++) {
+    for (let j = 0; j < 6; j++) {
+      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)} ${Math.floor(
+        255 - 42.5 * j,
+      )} 0)`;
       ctx.fillRect(j * 25, i * 25, 25, 25);
     }
   }
@@ -53,7 +54,9 @@ function draw() {
 ```
 
 ```html hidden
-
+6×6 の正方形のグリッドで、36 の色が表示されています。
 ```
 
 ```js hidden
@@ -62,7 +65,7 @@ draw();
 
 結果は次のようになります。
 
-{{EmbedLiveSample("A_fillStyle_example", 160, 160, "canvas_fillstyle.png")}}
+{{EmbedLiveSample("A_fillStyle_example", "", "160")}}
 
 ### `strokeStyle` の例
 
@@ -70,17 +73,14 @@ draw();
 
 ```js
 function draw() {
-  var ctx = document.getElementById("canvas").getContext("2d");
-  for (var i = 0; i < 6; i++) {
-    for (var j = 0; j < 6; j++) {
-      ctx.strokeStyle =
-        "rgb(0, " +
-        Math.floor(255 - 42.5 * i) +
-        ", " +
-        Math.floor(255 - 42.5 * j) +
-        ")";
+  const ctx = document.getElementById("canvas").getContext("2d");
+  for (let i = 0; i < 6; i++) {
+    for (let j = 0; j < 6; j++) {
+      ctx.strokeStyle = `rgb(0 ${Math.floor(255 - 42.5 * i)} ${Math.floor(
+        255 - 42.5 * j,
+      )})`;
       ctx.beginPath();
-      ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
+      ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, 2 * Math.PI, true);
       ctx.stroke();
     }
   }
@@ -88,7 +88,7 @@ function draw() {
 ```
 
 ```html hidden
-
+
 ```
 
 ```js hidden
@@ -97,7 +97,7 @@ draw();
 
 結果は次のようになります。
 
-{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}}
+{{EmbedLiveSample("A_strokeStyle_example", "", "160")}}
 
 ## 透明度
 
@@ -108,16 +108,16 @@ draw();
 
 `globalAlpha` プロパティは、同様の透明度でキャンバスにいくつもの図形を描画する場合に役に立ちますが、それ以外の場合は、色を設定するときにそれぞれの図形に透明度を設定する方が一般的に便利です。
 
-`strokeStyle` プロパティと `fillStyle` プロパティは CSS の rgba 表現を利用できるため、次のような表記を使用して透明な色を割り当てることもできます。
+`strokeStyle` プロパティと `fillStyle` プロパティは CSS の rgb 表現が利用できるため、次のような表記を使用して透明な色を割り当てることもできます。
 
 ```js
 // 輪郭線と塗りつぶしの色に透明色を割り当てる
 
-ctx.strokeStyle = "rgba(255, 0, 0, 0.5)";
-ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
+ctx.strokeStyle = "rgb(255 0 0 / 50%)";
+ctx.fillStyle = "rgb(255 0 0 / 50%)";
 ```
 
-`rgba()` 関数は `rgb()` 関数によく似ていますが、 1 つ引数が増えます。最後の引数には、この色の透明度の値を設定します。有効な値の範囲は、 0.0 （完全に透明）から 1.0 （完全に不透明）です。
+`rgb()` 関数にはオプションの引数があります。最後の引数は、特定の色の透過率を設定します。有効な範囲は `0%`（完全に透明）から `100%`（完全に不透明）までのパーセント値、または `0.0`（`0%` と同じ）から `1.0`（`100%` と同じ）までの数値で指定します。
 
 ### `globalAlpha` の例
 
@@ -125,7 +125,7 @@ ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
 
 ```js
 function draw() {
-  var ctx = document.getElementById("canvas").getContext("2d");
+  const ctx = document.getElementById("canvas").getContext("2d");
   // draw background
   ctx.fillStyle = "#FD0";
   ctx.fillRect(0, 0, 75, 75);
@@ -141,7 +141,7 @@ function draw() {
   ctx.globalAlpha = 0.2;
 
   // Draw semi transparent circles
-  for (var i = 0; i < 7; i++) {
+  for (let i = 0; i < 7; i++) {
     ctx.beginPath();
     ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
     ctx.fill();
@@ -150,37 +150,37 @@ function draw() {
 ```
 
 ```html hidden
-
+
 ```
 
 ```js hidden
 draw();
 ```
 
-{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "canvas_globalalpha.png")}}
+{{EmbedLiveSample("A_globalAlpha_example", "", "160")}}
 
-### `rgba()` の使用例
+### アルファ透過率のついた `rgb()` の使用例
 
-この 2 つ目の例では、上の例と似たようなことをしていますが、円を重ねて描くのではなく、小さな長方形を不透明度を上げながら描いています。 `rgba()` を使うと、塗りつぶしと輪郭線のスタイルを個別に設定できるので、もう少し制御と柔軟性が増します。
+この 2 つ目の例では、上の例と似たようなことをしていますが、円を重ねて描くのではなく、小さな長方形を不透明度を上げながら描いています。 `rgb()` を使うと、塗りつぶしと輪郭線のスタイルを個別に設定できるので、もう少し制御と柔軟性が増します。
 
 ```js
 function draw() {
-  var ctx = document.getElementById("canvas").getContext("2d");
+  const ctx = document.getElementById("canvas").getContext("2d");
 
   // Draw background
-  ctx.fillStyle = "rgb(255, 221, 0)";
+  ctx.fillStyle = "rgb(255 221 0)";
   ctx.fillRect(0, 0, 150, 37.5);
-  ctx.fillStyle = "rgb(102, 204, 0)";
+  ctx.fillStyle = "rgb(102 204 0)";
   ctx.fillRect(0, 37.5, 150, 37.5);
-  ctx.fillStyle = "rgb(0, 153, 255)";
+  ctx.fillStyle = "rgb(0 153 255)";
   ctx.fillRect(0, 75, 150, 37.5);
-  ctx.fillStyle = "rgb(255, 51, 0)";
+  ctx.fillStyle = "rgb(255 51 0)";
   ctx.fillRect(0, 112.5, 150, 37.5);
 
-  // Draw semi transparent rectangles
-  for (var i = 0; i < 10; i++) {
-    ctx.fillStyle = "rgba(255, 255, 255, " + (i + 1) / 10 + ")";
-    for (var j = 0; j < 4; j++) {
+  // 半透明の長方形を描画
+  for (let i = 0; i < 10; i++) {
+    ctx.fillStyle = `rgb(255 255 255 / ${(i + 1) / 10})`;
+    for (let j = 0; j < 4; j++) {
       ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
     }
   }
@@ -188,14 +188,14 @@ function draw() {
 ```
 
 ```html hidden
-
+
 ```
 
 ```js hidden
 draw();
 ```
 
-{{EmbedLiveSample("An_example_using_rgba", "180", "180", "canvas_rgba.png")}}
+{{EmbedLiveSample("An_example_using_rgb_with_alpha_transparency", "", "160")}}
 
 ## 線のスタイル
 
@@ -228,8 +228,8 @@ draw();
 
 ```js
 function draw() {
-  var ctx = document.getElementById("canvas").getContext("2d");
-  for (var i = 0; i < 10; i++) {
+  const ctx = document.getElementById("canvas").getContext("2d");
+  for (let i = 0; i < 10; i++) {
     ctx.lineWidth = 1 + i;
     ctx.beginPath();
     ctx.moveTo(5 + i * 14, 5);
@@ -240,18 +240,18 @@ function draw() {
 ```
 
 ```html hidden
-
+
 ```
 
 ```js hidden
 draw();
 ```
 
-{{EmbedLiveSample("A_lineWidth_example", "180", "180", "canvas_linewidth.png")}}
+{{EmbedLiveSample("A_lineWidth_example", "", "160")}}
 
 鮮明な線を得るには、パスがどのように描かれるかを理解する必要があります。下の画像で、グリッドはキャンバスの座標グリッドを表しています。グリッド線とグリッド線の間の矩形は、画面上の実際のピクセルです。下の最初のグリッド画像では、 (2,1) から (5,5) までの矩形が塗りつぶされています。その間の領域（薄赤色）はすべてピクセルの境界線に当たるので、塗りつぶされた矩形は鮮明なエッジを持つことになります。
 
-![](canvas-grid.png)
+![3 つの座標グリッド。グリッド行は画面上の実際のピクセル。各グリッドの左上隅は (0,0) とラベル付けされています。最初のグリッドでは、(2,1) から (5,5) までの長方形が薄い赤色で塗りつぶされています。2 つ目のグリッドでは、(3,1) から (3,5) までを太さ1ピクセルのロイヤルブルーの線で結びます。ロイヤルブルーの線はグリッド線の中央にあり、x の垂線上にある 2.5 から 3.5 まで、グラフ線の両側のピクセルの半分まで伸びており、両側の水色の背景は x の垂線上にある 2 から 4 まで伸びています。2 つ目の座標グリッドの行の水色の不鮮明さを避けるために、3 つ目の座標グリッドのパスは、行 (3.5,1) から (3.5,5) までのロイヤルブルーです。1 ピクセルの線幅は、単一のピクセルの縦線を完全に正確に埋めて終わります。](canvas-grid.png)
 
 (3,1) から (3,5) までのパスを線の太さを `1.0` にして考えてみると、 2 番目の画像のような状況になります。実際に塗りつぶされる領域（濃い青色）は、パスの両側のピクセルの半分までしか届きません。この近似値をレンダリングしなければならないので、これらのピクセルは部分的にしかシェーディングされず、その結果、領域全体（水色と濃紺）が実際のストローク色の半分の濃さでしか塗りつぶされないことになります。これは、前の例のコードで `1.0` の幅の行で起こることです。
 
@@ -282,8 +282,7 @@ draw();
 
 ```js
 function draw() {
-  var ctx = document.getElementById("canvas").getContext("2d");
-  var lineCap = ["butt", "round", "square"];
+  const ctx = document.getElementById("canvas").getContext("2d");
 
   // ガイドを描画
   ctx.strokeStyle = "#09f";
@@ -296,26 +295,26 @@ function draw() {
 
   // 線を描画
   ctx.strokeStyle = "black";
-  for (var i = 0; i < lineCap.length; i++) {
+  ["butt", "round", "square"].forEach((lineCap, i) => {
     ctx.lineWidth = 15;
-    ctx.lineCap = lineCap[i];
+    ctx.lineCap = lineCap;
     ctx.beginPath();
     ctx.moveTo(25 + i * 50, 10);
     ctx.lineTo(25 + i * 50, 140);
     ctx.stroke();
-  }
+  });
 }
 ```
 
 ```html hidden
-
+
 ```
 
 ```js hidden
 draw();
 ```
 
-{{EmbedLiveSample("A_lineCap_example", "180", "180", "Canvas_linecap.png")}}
+{{EmbedLiveSample("A_lineCap_example", "", "160")}}
 
 ### `lineJoin` の例
 
@@ -334,11 +333,10 @@ draw();
 
 ```js
 function draw() {
-  var ctx = document.getElementById("canvas").getContext("2d");
-  var lineJoin = ["round", "bevel", "miter"];
+  const ctx = document.getElementById("canvas").getContext("2d");
   ctx.lineWidth = 10;
-  for (var i = 0; i < lineJoin.length; i++) {
-    ctx.lineJoin = lineJoin[i];
+  ["round", "bevel", "miter"].forEach((lineJoin, i) => {
+    ctx.lineJoin = lineJoin;
     ctx.beginPath();
     ctx.moveTo(-5, 5 + i * 40);
     ctx.lineTo(35, 45 + i * 40);
@@ -346,19 +344,19 @@ function draw() {
     ctx.lineTo(115, 45 + i * 40);
     ctx.lineTo(155, 5 + i * 40);
     ctx.stroke();
-  }
+  });
 }
 ```
 
 ```html hidden
-
+
 ```
 
 ```js hidden
 draw();
 ```
 
-{{EmbedLiveSample("A_lineJoin_example", "180", "180", "Canvas_linejoin.png")}}
+{{EmbedLiveSample("A_lineJoin_example", "", "160")}}
 
 ### `miterLimit` プロパティのデモ
 
@@ -376,11 +374,11 @@ draw();
 
 ここでは、 `miterLimit` を動的に設定し、それがキャンバス上の図形にどのように影響するかを見るための小さなデモを紹介します。青い線は、ジグザグ模様の各線の始点と終点を示しています。
 
-もし `miterLimit` の値を 4 以下で指定した場合。 10 以上の `miterLimit` を指定すると、このデモのほとんどのコーナーは青い線から遠く離れたところでマイターで結合し、左から右へ角度を大きくして接続するため、コーナーの高さが減少するはずです。中間の値では、左側のコーナーは青い線の近くでベベルで結合し、右側のコーナーはマイターを延長（これも高さが減少する）するだけです。
+このデモでは `miterLimit` の値を 4.2 以下に指定すると、どのコーナーもマイター延長で結合されず、青い線の近くに小さな面取りが行われます。`miterLimit` を 10 以上にすると、このデモではほとんどのコーナーが青い線から遠く離れたマイターで接続されることになり、左から右へと角度が大きくなるにつれて高さが低くなっていきます。中間の値では、左側の角は青線付近の面取りでのみ接合し、右側の角はマイター拡張（高さも減少）で接合します。
 
 ```js
 function draw() {
-  var ctx = document.getElementById("canvas").getContext("2d");
+  const ctx = document.getElementById("canvas").getContext("2d");
 
   // キャンバスを消去
   ctx.clearRect(0, 0, 150, 150);
@@ -404,8 +402,8 @@ function draw() {
   // 線を描画
   ctx.beginPath();
   ctx.moveTo(0, 100);
-  for (i = 0; i < 24; i++) {
-    var dy = i % 2 == 0 ? 25 : -25;
+  for (let i = 0; i < 24; i++) {
+    const dy = i % 2 === 0 ? 25 : -25;
     ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
   }
   ctx.stroke();
@@ -413,15 +411,16 @@ function draw() {
 }
 ```
 
-```html hidden
+```html-nolint hidden
 
-    
+    
-      
+      

From 60cb98e650447ad8adc3e2575d821a4ce4c2775c Mon Sep 17 00:00:00 2001
From: Tianyi Tao 
Date: Sat, 13 Jul 2024 11:35:05 +0800
Subject: [PATCH 198/698] [zh-cn]: update the translation of
 `CanvasPattern.setTransform()` method (#21941)

Co-authored-by: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com>
Co-authored-by: A1lo 
---
 .../api/canvaspattern/settransform/index.md   | 69 ++++++++++---------
 1 file changed, 37 insertions(+), 32 deletions(-)

diff --git a/files/zh-cn/web/api/canvaspattern/settransform/index.md b/files/zh-cn/web/api/canvaspattern/settransform/index.md
index bd8e8d3be192eb..fb2e9bfa6d9d65 100644
--- a/files/zh-cn/web/api/canvaspattern/settransform/index.md
+++ b/files/zh-cn/web/api/canvaspattern/settransform/index.md
@@ -1,11 +1,13 @@
 ---
-title: CanvasPattern.setTransform()
+title: CanvasPattern：setTransform() 方法
 slug: Web/API/CanvasPattern/setTransform
+l10n:
+  sourceCommit: daeff1a2efaae366bcc8b6d911d86985646e665e
 ---
 
-{{APIRef("Canvas API")}} {{SeeCompatTable}}
+{{APIRef("Canvas API")}}{{AvailableInWorkers}}
 
-**`CanvasPattern.setTransform()`** 方法使用 {{domxref("DOMMatrix")}} 对象作为图案的变换矩阵，并在此图案上调用它。
+**`CanvasPattern.setTransform()`** 方法使用 {{domxref("DOMMatrix")}} 对象作为图案的变换矩阵，并在当前图案上调用它。
 
 ## 语法
 
@@ -18,81 +20,84 @@ setTransform(matrix)
 - `matrix`
   - : {{domxref("DOMMatrix")}}，被用作图案的变换矩阵。
 
+### 返回值
+
+无（{{jsxref("undefined")}}）。
+
 ## 示例
 
 ### 使用 `setTransform` 方法
 
-这是一段简单的代码片段，使用 `setTransform` 方法创建一个来自 {{domxref("DOMMatrix")}} 具有指定图案变化的{{domxref("CanvasPattern")}}。如例子所示，如果你把图案赋值给当前的 {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}，当你使用 {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} 方法时，图案会被应用到 canvas 上绘制出效果。
+这是一段简单的代码片段，使用 `setTransform` 方法创建一个来自 {{domxref("DOMMatrix")}} 具有指定图案变化的 {{domxref("CanvasPattern")}}。如例子所示，图案会在其被设置为当前的 {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} 时应用；并在使用 {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} 方法时会被绘制到 canvas 上。
 
 #### HTML
 
 ```html
- 
+
 ```
 
 #### JavaScript
 
 ```js
-var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
-var svg1 = document.getElementById("svg1");
-var matrix = svg1.createSVGMatrix();
+const matrix = new DOMMatrix([1, 0.2, 0.8, 1, 0, 0]);
 
-var img = new Image();
+const img = new Image();
 img.src = "canvas_createpattern.png";
 
-img.onload = function () {
-  var pattern = ctx.createPattern(img, "repeat");
+img.onload = () => {
+  const pattern = ctx.createPattern(img, "repeat");
   pattern.setTransform(matrix.rotate(-45).scale(1.5));
   ctx.fillStyle = pattern;
   ctx.fillRect(0, 0, 400, 400);
 };
 ```
 
-修改下面的代码并在线查看 canvas 的变化：
+#### 可编辑演示
+
+以下是上述代码片段的可编辑演示。尝试更改 `SetTransform()` 的参数，看看它产生的效果。
 
 ```html hidden
 
-
 

   
   
 

 
+  ctx.fillRect(0, 0, 400, 400);
+};
+
 ```
 
 ```js hidden
-var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-var textarea = document.getElementById("code");
-var reset = document.getElementById("reset");
-var edit = document.getElementById("edit");
-var code = textarea.value;
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+const textarea = document.getElementById("code");
+const reset = document.getElementById("reset");
+const edit = document.getElementById("edit");
+const code = textarea.value;
 
-var svg1 = document.getElementById("svg1");
-var matrix = svg1.createSVGMatrix();
+const matrix = new DOMMatrix([1, 0.2, 0.8, 1, 0, 0]);
 
 function drawCanvas() {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   eval(textarea.value);
 }
 
-reset.addEventListener("click", function () {
+reset.addEventListener("click", () => {
   textarea.value = code;
   drawCanvas();
 });
 
-edit.addEventListener("click", function () {
+edit.addEventListener("click", () => {
   textarea.focus();
 });
 
@@ -100,7 +105,7 @@ textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
 ```
 
-{{ EmbedLiveSample('使用 setTransform 方法', 700, 380) }}
+{{ EmbedLiveSample('可编辑演示', 700, 400) }}
 
 ## 规范
 
@@ -112,5 +117,5 @@ window.addEventListener("load", drawCanvas);
 
 ## 参见
 
-- 接口定义，{{domxref("CanvasPattern")}}
+- 定义此方法的接口：{{domxref("CanvasPattern")}}
 - {{domxref("DOMMatrix")}}

From f2e6492ae8b6a937b880f629ab3ffe8c0d6f6d45 Mon Sep 17 00:00:00 2001
From: Hoarfroster 
Date: Sat, 13 Jul 2024 12:16:50 +0800
Subject: [PATCH 199/698] zh-CN: update Glossary/Value (#22255)

Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
---
 files/zh-cn/glossary/value/index.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/files/zh-cn/glossary/value/index.md b/files/zh-cn/glossary/value/index.md
index 57100d7152c9b1..fb622e883cb1f2 100644
--- a/files/zh-cn/glossary/value/index.md
+++ b/files/zh-cn/glossary/value/index.md
@@ -1,11 +1,13 @@
 ---
 title: 值
 slug: Glossary/Value
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
 ---
 
 {{GlossarySidebar}}
 
-在数据或对象{{Glossary("Wrapper", "包装器")}}的概念下，值是对象包装器包含的{{Glossary("Primitive", "原始值")}}。在{{Glossary("Variable", "变量")}}或{{Glossary("Property", "属性")}}的概念下，值可以是原始类型或{{Glossary("Object reference", "对象引用")}}。
+在数据或对象[**包装器**](/zh-CN/docs/Glossary/Wrapper)的概念下，值是对象包装器包含的[**原始值**](/zh-CN/docs/Glossary/Primitive)。在[**变量**](/zh-CN/docs/Glossary/Variable)或[**属性**](/zh-CN/docs/Glossary/Property)的概念下，值可以是原始类型或[**对象引用**](/zh-CN/docs/Glossary/Object_reference)。
 
 在 CSS 属性值的概念下，存在指定值、计算值和实际值，应用于每个元素和伪元素的每个 CSS 属性的最终值是一个四步计算的结果：值由定义决定（[指定值](/zh-CN/docs/Web/CSS/specified_value)），然后解析成一个用于继承的值（[计算值](/zh-CN/docs/Web/CSS/computed_value)），然后在必要时转换为绝对的值（[应用值](/zh-CN/docs/Web/CSS/used_value)），最终根据本地环境的限制进行转化（[实际值](/zh-CN/docs/Web/CSS/actual_value)）。
 
@@ -13,4 +15,4 @@ slug: Glossary/Value
 
 ## 参见
 
-- 维基百科上的[原始值包装类](https://en.wikipedia.org/wiki/Primitive_wrapper_class)词条
+- 维基百科上的[原始值包装类](https://en.wikipedia.org/wiki/Primitive_wrapper_class)

From cfb2adc7d654da3377b1eda8710fce5ebca19147 Mon Sep 17 00:00:00 2001
From: Hoarfroster 
Date: Sat, 13 Jul 2024 12:20:04 +0800
Subject: [PATCH 200/698] zh-CN: update Glossary/WebSockets (#22287)

Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
---
 files/zh-cn/glossary/websockets/index.md | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/files/zh-cn/glossary/websockets/index.md b/files/zh-cn/glossary/websockets/index.md
index 2e72a256873fbe..6a5b81dc6ea820 100644
--- a/files/zh-cn/glossary/websockets/index.md
+++ b/files/zh-cn/glossary/websockets/index.md
@@ -1,17 +1,19 @@
 ---
-title: WebSockets
+title: WebSocket
 slug: Glossary/WebSockets
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
 ---
 
 {{GlossarySidebar}}
 
-WebSocket 是一种在客户端与{{Glossary("Server", "服务器")}}之间保持{{Glossary("TCP")}}长连接的{{Glossary("protocol","网络协议")}}，这样它们就可以随时进行信息交换。
+_WebSocket_ 是一种在客户端与{{Glossary("Server", "服务器")}}之间保持 {{Glossary("TCP")}} 长连接的{{Glossary("protocol", "协议")}}，这样它们就可以随时进行信息交换。
 
-虽然任何客户端或服务器上的应用都可以使用 WebSocket，但原则上还是指{{Glossary("Browser", "浏览器")}}与服务器之间使用。通过 WebSocket，服务器可以直接向客户端发送数据，而无须客户端周期性的请求服务器，以动态更新数据内容。
+虽然任何客户端或服务器上的应用都可以使用 WebSocket，但原则上还是指{{Glossary("Browser", "浏览器")}}与服务器之间使用。通过 WebSocket，服务器无需客户端预先请求就可以直接向客户端发送数据，从而能动态地更新数据内容。
 
 ## 参见
 
-- [Websocket](https://zh.wikipedia.org/wiki/Websocket) 维基百科
-- [WebSocket 的 MDN 参考](/zh-CN/docs/Web/API/WebSocket)
+- 维基百科上的 [Websocket](https://zh.wikipedia.org/wiki/WebSocket)
+- [MDN 上的 WebSocket 参考](/zh-CN/docs/Web/API/WebSocket)
 - [编写 WebSocket 客户端应用](/zh-CN/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications)
 - [编写 WebSocket 服务器应用](/zh-CN/docs/Web/API/WebSockets_API/Writing_WebSocket_servers)

From c6ea8c060e457c0c5e028f25a0f8857db6691aeb Mon Sep 17 00:00:00 2001
From: Hoarfroster 
Date: Sat, 13 Jul 2024 12:21:14 +0800
Subject: [PATCH 201/698] zh-CN: create Glossary/XInclude (#22239)

Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
---
 files/zh-cn/glossary/xinclude/index.md | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 files/zh-cn/glossary/xinclude/index.md

diff --git a/files/zh-cn/glossary/xinclude/index.md b/files/zh-cn/glossary/xinclude/index.md
new file mode 100644
index 00000000000000..727aa87880626d
--- /dev/null
+++ b/files/zh-cn/glossary/xinclude/index.md
@@ -0,0 +1,17 @@
+---
+title: XInclude
+slug: Glossary/XInclude
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+XInclude 是 W3C 推荐标准之一，它定义了包含标签，使文档能够包含其他文档或其他文档的部分。内容可以从其他 XML 文件或文本文件中包含。
+
+XInclude 机制在任何主流浏览器中都不受支持。
+
+## 参见
+
+- [XInclude 标准](https://www.w3.org/TR/xinclude-11/)
+- [`XPath`](/zh-CN/docs/Web/XPath)

From d778bc47f324398f5f9dda53c5d6415ba08a54ef Mon Sep 17 00:00:00 2001
From: Hoarfroster 
Date: Sat, 13 Jul 2024 12:25:45 +0800
Subject: [PATCH 202/698] zh-CN: create Glossary/Web_server (#22247)

Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
---
 files/zh-cn/glossary/web_server/index.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 files/zh-cn/glossary/web_server/index.md

diff --git a/files/zh-cn/glossary/web_server/index.md b/files/zh-cn/glossary/web_server/index.md
new file mode 100644
index 00000000000000..cfad14bdfa957c
--- /dev/null
+++ b/files/zh-cn/glossary/web_server/index.md
@@ -0,0 +1,15 @@
+---
+title: Web 服务器
+slug: Glossary/Web_server
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+Web 服务器是一种通常运行在硬件服务器上的软件，为用户（通常称为客户端）提供服务。服务器则是指位于一个全是计算机的房间（通常称为数据中心）内的其中一台计算机。
+
+## 参见
+
+- [介绍服务器](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server)
+- 维基百科上的[服务器](https://zh.wikipedia.org/wiki/服务器)

From f2230b4ff0b684230e52856702326e174df4295a Mon Sep 17 00:00:00 2001
From: Hoarfroster 
Date: Sat, 13 Jul 2024 12:28:15 +0800
Subject: [PATCH 203/698] zh-CN: create Glossary/Syntax (#22231)

Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
---
 files/zh-cn/glossary/syntax/index.md | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 files/zh-cn/glossary/syntax/index.md

diff --git a/files/zh-cn/glossary/syntax/index.md b/files/zh-cn/glossary/syntax/index.md
new file mode 100644
index 00000000000000..ce05ba34cdff2b
--- /dev/null
+++ b/files/zh-cn/glossary/syntax/index.md
@@ -0,0 +1,24 @@
+---
+title: 语法
+slug: Glossary/Syntax
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+语法指定了组成正确结构代码所需的{{Glossary("character", "字符")}}的组合和顺序。语法通常包括语法规则和适用于书写的规则，例如 Python 中的缩进要求。
+
+语法因语言而异（例如，{{Glossary("HTML")}} 和 {{Glossary("JavaScript")}} 的语法不同）。尽管语言在语法方面可能有一些相似之处，比如 JavaScript 和 Python 语言都有一条“操作数 运算符 操作数”语法规则，但这并不意味着两种语言的语法相似。
+
+语法既适用于编程语言（对计算机的命令），也适用于标记语言（文档结构信息）。
+
+语法只管顺序和结构；指令还必须*有意义*，这就是{{Glossary("semantics", "语义")}}的范畴。
+
+代码必须符合正确的语法才能正确{{Glossary("compile", "编译")}}，否则会出现{{Glossary("syntax error", "语法错误")}}。即使是小错误，比如缺少一个括号，也会导致源代码无法成功编译。
+
+如果框架具有“干净”的语法，则表示它们生成简单、可读、简洁的结果。如果代码库使用“很多语法”，则意味着它需要更多字符来实现相同的功能。
+
+## 参见
+
+- 维基百科上的[语法]()

From 924fc02d942a51449e7363553b2a78518e3fd8e8 Mon Sep 17 00:00:00 2001
From: Hoarfroster 
Date: Sat, 13 Jul 2024 12:29:10 +0800
Subject: [PATCH 204/698] zh-CN: create Glossary/Validator (#22259)

Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
---
 files/zh-cn/glossary/validator/index.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 files/zh-cn/glossary/validator/index.md

diff --git a/files/zh-cn/glossary/validator/index.md b/files/zh-cn/glossary/validator/index.md
new file mode 100644
index 00000000000000..301bcb6349020f
--- /dev/null
+++ b/files/zh-cn/glossary/validator/index.md
@@ -0,0 +1,15 @@
+---
+title: 验证器
+slug: Glossary/Validator
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+验证器是检查代码中的语法错误的程序。验证器可以为任何格式或语言创建，但在我们的上下文中，指的是检查 {{Glossary("HTML")}}、{{Glossary("CSS")}} 和 {{Glossary("XML")}} 的工具。
+
+## 参见
+
+- 维基百科上的[验证器](https://zh.wikipedia.org/wiki/验证器)
+- [验证器的简短列表](https://firefox-source-docs.mozilla.org/devtools-user/validators/index.html)

From ee69383ed77f202e6fa405d66fc6666fb4b6dc03 Mon Sep 17 00:00:00 2001
From: Ivan Hanloth 
Date: Sat, 13 Jul 2024 13:34:46 +0800
Subject: [PATCH 205/698] [zh-CN] create some media-related docs (#22312)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: A1lo 
---
 .../baseaudiocontext/audioworklet/index.md    | 31 ++++++++++++
 .../htmlmediaelement/defaultmuted/index.md    | 36 ++++++++++++++
 .../api/htmlmediaelement/readystate/index.md  | 47 +++++++++----------
 3 files changed, 90 insertions(+), 24 deletions(-)
 create mode 100644 files/zh-cn/web/api/baseaudiocontext/audioworklet/index.md
 create mode 100644 files/zh-cn/web/api/htmlmediaelement/defaultmuted/index.md

diff --git a/files/zh-cn/web/api/baseaudiocontext/audioworklet/index.md b/files/zh-cn/web/api/baseaudiocontext/audioworklet/index.md
new file mode 100644
index 00000000000000..0b05f142af07e4
--- /dev/null
+++ b/files/zh-cn/web/api/baseaudiocontext/audioworklet/index.md
@@ -0,0 +1,31 @@
+---
+title: BaseAudioContext：audioWorklet 属性
+slug: Web/API/BaseAudioContext/audioWorklet
+l10n:
+  sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8
+---
+
+{{ APIRef("Web Audio API") }}{{securecontext_header}}
+
+{{domxref("BaseAudioContext")}} 接口的只读属性 `audioWorklet` 返回一个 {{domxref("AudioWorklet")}} 实例，该实例可用于添加实现自定义音频处理的 {{domxref("AudioWorkletProcessor")}} 的派生类。
+
+## 值
+
+{{domxref("AudioWorklet")}} 实例。
+
+## 示例
+
+_参见 {{domxref("AudioWorkletNode")}} 页面，以获取完整的用户自定义音频处理示例。_
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [使用 Web 音频 API](/zh-CN/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
+- {{domxref("AudioWorkletNode")}}
diff --git a/files/zh-cn/web/api/htmlmediaelement/defaultmuted/index.md b/files/zh-cn/web/api/htmlmediaelement/defaultmuted/index.md
new file mode 100644
index 00000000000000..85af6630e37bfb
--- /dev/null
+++ b/files/zh-cn/web/api/htmlmediaelement/defaultmuted/index.md
@@ -0,0 +1,36 @@
+---
+title: HTMLMediaElement：defaultMuted 属性
+slug: Web/API/HTMLMediaElement/defaultMuted
+l10n:
+  sourceCommit: 595cba0e07c70eda7f08a12890e00ea0281933d3
+---
+
+{{APIRef("HTML DOM")}}
+
+**`HTMLMediaElement.defaultMuted`** 属性反映了 HTML 属性 [`muted`](/zh-CN/docs/Web/HTML/Element/video#muted)。该属性用于表明媒体元素的音频输出是否默认为静音。此属性没有动态效果，使用 {{domxref("HTMLMediaElement.muted", "muted")}} 属性来静音和取消静音。
+
+## 返回值
+
+布尔值。`true` 值表明音频输出默认为静音。
+
+## 示例
+
+```js
+const videoEle = document.createElement("video");
+videoEle.defaultMuted = true;
+console.log(videoEle.outerHTML); // 
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("HTMLMediaElement")}}：用于定义 `HTMLMediaElement.defaultMuted` 属性的接口
+- {{domxref("HTMLMediaElement.muted")}}
+- {{domxref("HTMLMediaElement.volume")}}
diff --git a/files/zh-cn/web/api/htmlmediaelement/readystate/index.md b/files/zh-cn/web/api/htmlmediaelement/readystate/index.md
index 3e8490dc12cc87..aa478aad004faa 100644
--- a/files/zh-cn/web/api/htmlmediaelement/readystate/index.md
+++ b/files/zh-cn/web/api/htmlmediaelement/readystate/index.md
@@ -1,33 +1,32 @@
 ---
-title: HTMLMediaElement.readyState
+title: HTMLMediaElement：readyState 属性
 slug: Web/API/HTMLMediaElement/readyState
+l10n:
+  sourceCommit: e932acf254c5dd06e26798b9d8fe01ce8dab1fb7
 ---
 
 {{APIRef("HTML DOM")}}
 
-**`HTMLMediaElement.readyState`** 属性返回音频/视频的当前就绪状态。
+**`HTMLMediaElement.readyState`** 属性返回媒体的就绪状态。
 
-## 语法
+## 返回值
 
-```plain
-var readyState = audioOrVideo.readyState;
-```
-
-### 返回值
-
-无符号整型 An `unsigned short`.
+一个数字，为 {{domxref("HTMLMediaElement")}} 接口上定义的五个可能的状态常量之一：
 
-| Constant          | Value | Description                                                      |
-| ----------------- | ----- | ---------------------------------------------------------------- |
-| HAVE_NOTHING      | 0     | 没有关于音频/视频是否就绪的信息                                  |
-| HAVE_METADATA     | 1     | 音频/视频已初始化                                                |
-| HAVE_CURRENT_DATA | 2     | 数据已经可以播放 (当前位置已经加载) 但没有数据能播放下一帧的内容 |
-| HAVE_FUTURE_DATA  | 3     | 当前及至少下一帧的数据是可用的 (换句话来说至少有两帧的数据)      |
-| HAVE_ENOUGH_DATA  | 4     | 可用数据足以开始播放 - 如果网速得到保障 那么视频可以一直播放到底 |
+- `HTMLMediaElement.HAVE_NOTHING`（0）
+  - : 没有可用的关于媒体资源的信息。
+- `HTMLMediaElement.HAVE_METADATA`（1）
+  - : 已检索到足够的媒体资源，元数据属性已经初始化。查询操作将不再引发异常。
+- `HTMLMediaElement.HAVE_CURRENT_DATA`（2）
+  - : 当前播放位置的数据已经可用，但不足以实际播放多个帧。
+- `HTMLMediaElement.HAVE_FUTURE_DATA`（3）
+  - : 当前播放位置和提供至少一小段时间的数据已经可用（换句话说，至少有两个视频帧）。
+- `HTMLMediaElement.HAVE_ENOUGH_DATA`（4）
+  - : 有足够的数据可用，并且下载速度足够高，因此媒体可以不间断地播放到最后。
 
-## 实例
+## 示例
 
-这个例子会监听 id 为 example 的 audio 的数据。他会检查当前位置是否可以播放，会的话执行播放。
+这个示例将会监听一个 id 为 `example` 的音频数据的加载。它会检查当前播放位置是否已加载。如果是，则会播放音频。
 
 ```html
 

   

     
-      miterLimit
-      を変更するには、下に新しい値を入力し、再描画ボタンをクリックしてください。


+      
+    		
+      miterLimit を変更するには、下に新しい値を入力し、再描画ボタンをクリックしてください。


       

-        
+        
         
         
       

@@ -437,21 +436,21 @@ document.getElementById("miterLimit").value = document
 draw();
 ```
 
-{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "canvas_miterlimit.png")}}
+{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "", "180")}}
 
 ### 線ダッシュの使用
 
 `setLineDash` メソッドと `lineDashOffset` プロパティは直線のダッシュパターンを指定します。`setLineDash` メソッドは、線と隙間を交互に描く距離を指定する数値のリストを受け取り、`lineDashOffset` プロパティはパターンを開始するオフセットを設定します。
 
-この例では、蟻の行進のような効果を作成しています。これは、コンピュータグラフィックスプログラムの選択ツールでよく見られるアニメーション技術です。境界線をアニメーション化することで、ユーザーが画像の背景と選択範囲の境界線を区別するのに役立ちます。このチュートリアルの後半では、この方法とその他の[基本的なアニメーション](/ja/docs/Web/API/Canvas_API/Tutorial/Basic_animations)を行う方法を学習することができます。
+この例では、蟻の行進のような効果を作成しています。これは、コンピューターグラフィックスプログラムの選択ツールでよく見られるアニメーション技術です。境界線をアニメーション化することで、ユーザーが画像の背景と選択範囲の境界線を区別するのに役立ちます。このチュートリアルの後半では、この方法とその他の[基本的なアニメーション](/ja/docs/Web/API/Canvas_API/Tutorial/Basic_animations)を行う方法を学習することができます。
 
 ```html hidden
-
+
 ```
 
 ```js
-var ctx = document.getElementById("canvas").getContext("2d");
-var offset = 0;
+const ctx = document.getElementById("canvas").getContext("2d");
+let offset = 0;
 
 function draw() {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -462,7 +461,7 @@ function draw() {
 
 function march() {
   offset++;
-  if (offset > 16) {
+  if (offset > 5) {
     offset = 0;
   }
   draw();
@@ -472,7 +471,7 @@ function march() {
 march();
 ```
 
-{{EmbedLiveSample("Using_line_dashes", "120", "120", "marching-ants.png")}}
+{{EmbedLiveSample("Using_line_dashes")}}
 
 ## グラデーション
 
@@ -488,8 +487,8 @@ march();
 例を示します。
 
 ```js
-var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
-var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
+const lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+const radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
 ```
 
 `CanvasGradient` オブジェクトを作成したら、 `addColorStop()` メソッドを使って色を割り当てることができます。
@@ -500,7 +499,7 @@ var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
 グラデーションには、必要なだけ色経由点を追加することができます。以下は、白から黒へ非常にシンプルな線形グラデーションです。
 
 ```js
-var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+const lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
 lineargradient.addColorStop(0, "white");
 lineargradient.addColorStop(1, "black");
 ```
@@ -511,18 +510,18 @@ lineargradient.addColorStop(1, "black");
 
 ```js
 function draw() {
-  var ctx = document.getElementById("canvas").getContext("2d");
+  const ctx = document.getElementById("canvas").getContext("2d");
 
   // グラデーションを生成
-  var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
+  const lingrad = ctx.createLinearGradient(0, 0, 0, 150);
   lingrad.addColorStop(0, "#00ABEB");
   lingrad.addColorStop(0.5, "#fff");
   lingrad.addColorStop(0.5, "#26C000");
   lingrad.addColorStop(1, "#fff");
 
-  var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
+  const lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
   lingrad2.addColorStop(0.5, "#000");
-  lingrad2.addColorStop(1, "rgba(0, 0, 0, 0)");
+  lingrad2.addColorStop(1, "rgb(0 0 0 / 0%)");
 
   // グラデーションに塗りつぶしと輪郭のスタイルを割り当てる
   ctx.fillStyle = lingrad;
@@ -535,7 +534,7 @@ function draw() {
 ```
 
 ```html hidden
-
+
 ```
 
 ```js hidden
@@ -546,7 +545,7 @@ draw();
 
 2 つ目のグラデーションでは、開始色（位置 0.0）を割り当てませんでした。なぜなら、次の色経由点の色を自動的に仮定するため、厳密には必要ないからです。したがって、位置 0.5 に黒を割り当てると、グラデーションの開始からこの停止位置までが自動的に黒になります。
 
-{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "canvas_lineargradient.png")}}
+{{EmbedLiveSample("A_createLinearGradient_example", "", "160")}}
 
 ### `createRadialGradient` の例
 
@@ -554,28 +553,28 @@ draw();
 
 ```js
 function draw() {
-  var ctx = document.getElementById("canvas").getContext("2d");
+  const ctx = document.getElementById("canvas").getContext("2d");
 
   // グラデーションを作成
-  var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
+  const radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
   radgrad.addColorStop(0, "#A7D30C");
   radgrad.addColorStop(0.9, "#019F62");
-  radgrad.addColorStop(1, "rgba(1, 159, 98, 0)");
+  radgrad.addColorStop(1, "rgb(1 159 98 / 0%)");
 
-  var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
+  const radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
   radgrad2.addColorStop(0, "#FF5F98");
   radgrad2.addColorStop(0.75, "#FF0188");
-  radgrad2.addColorStop(1, "rgba(255, 1, 136, 0)");
+  radgrad2.addColorStop(1, "rgb(255 1 136 / 0%)");
 
-  var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
+  const radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
   radgrad3.addColorStop(0, "#00C9FF");
   radgrad3.addColorStop(0.8, "#00B5E2");
-  radgrad3.addColorStop(1, "rgba(0, 201, 255, 0)");
+  radgrad3.addColorStop(1, "rgb(0 201 255 / 0%)");
 
-  var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
+  const radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
   radgrad4.addColorStop(0, "#F4F201");
   radgrad4.addColorStop(0.8, "#E4C700");
-  radgrad4.addColorStop(1, "rgba(228, 199, 0, 0)");
+  radgrad4.addColorStop(1, "rgb(228 199 0 / 0%)");
 
   // 図形を描画
   ctx.fillStyle = radgrad4;
@@ -590,7 +589,7 @@ function draw() {
 ```
 
 ```html hidden
-
+
 ```
 
 ```js hidden
@@ -599,11 +598,9 @@ draw();
 
 この場合、始点と終点を少しずらして、球状の三次元効果を出しています。内円と外円が重ならないようにすると、予測しにくい不思議な効果が得られます。
 
-4 つのグラデーションの最後の色経由点は、完全に透明な色を使っています。この色から前の色への移行を美しくしたい場合は、両方の色を同じにする必要があります。このコードでは、 2 つの異なる CSS カラーメソッドをデモンストレーションとして使用しているので、これはあまり明らかではありませんが、最初のグラデーションでは `#019F62 = rgba(1,159,98,1)` です。
+4 つのグラデーションの最後の色経由点は、完全に透明な色を使っています。この色から前の色への移行を美しくしたい場合は、両方の色を同じにする必要があります。このコードでは、 2 つの異なる CSS カラーメソッドをデモンストレーションとして使用しているので、これはあまり明らかではありませんが、最初のグラデーションでは `#019F62 = rgb(1 159 98 / 100%)` です。
 
-{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "canvas_radialgradient.png")}}
-
-
+{{EmbedLiveSample("A_createRadialGradient_example", "", "160")}}
 
 ### `createConicGradient` 例
 
@@ -611,15 +608,15 @@ draw();
 
 ```js
 function draw() {
-  var ctx = document.getElementById("canvas").getContext("2d");
+  const ctx = document.getElementById("canvas").getContext("2d");
 
   // グラデーションの作成
-  var conicGrad1 = ctx.createConicGradient(2, 62, 75);
+  const conicGrad1 = ctx.createConicGradient(2, 62, 75);
   conicGrad1.addColorStop(0, "#A7D30C");
   conicGrad1.addColorStop(1, "#fff");
 
-  var conicGrad2 = ctx.createConicGradient(0, 187, 75);
-  // we multiple our values by Math.PI/180 to convert degrees to radians
+  const conicGrad2 = ctx.createConicGradient(0, 187, 75);
+  // 値に Math.PI/180 を掛けて度数をラジアンに変換する
   conicGrad2.addColorStop(0, "black");
   conicGrad2.addColorStop(0.25, "black");
   conicGrad2.addColorStop(0.25, "white");
@@ -638,7 +635,9 @@ function draw() {
 ```
 
 ```html hidden
-
+扇形グラデーション
 ```
 
 ```js hidden
@@ -649,14 +648,14 @@ draw();
 
 2 つ目のグラデーションも、 2 つ目の矩形の中心に配置されています。こちらは複数の色経由点があり、回転の 1/4 ごとに黒から白に交互に変化します。これにより、市松模様のような効果が得られます。
 
-{{EmbedLiveSample("A_createConicGradient_example", "180", "180", "canvas_conicgrad.png")}}
+{{EmbedLiveSample("A_createConicGradient_example", "", "160")}}
 
 ## パターン
 
 前ページの例では、一連のループを使って画像のパターンを作成しました。しかし、もっと簡単な方法があります。 `createPattern()` メソッドです。
 
 - {{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}
-  - : 新しいキャンバスパターンオブジェクトを作成し、返します。 `image` は {{domxref("CanvasImageSource")}} です（つまり、{{domxref("HTMLImageElement")}}、他のキャンバス、 {{HTMLElement("video")}} 要素などです）。`type` は、画像の利用方法を示す文字列です。
+  - : 新しいキャンバスパターンオブジェクトを作成し、返します。`image` は画像のソース（つまり、{{domxref("HTMLImageElement")}}、{{domxref("SVGImageElement")}}、{{domxref("HTMLCanvasElement")}}、{{domxref("OffscreenCanvas")}}、{{domxref("HTMLVideoElement")}}、{{domxref("VideoFrame")}}、{{domxref("ImageBitmap")}} のいずれか）。`type` は、画像の利用方法を示す文字列です。
 
 type は、パターンを作成するための画像の使用方法を指定し、以下の文字列値のいずれかでなければなりません。
 
@@ -672,9 +671,9 @@ type は、パターンを作成するための画像の使用方法を指定し
 このメソッドを使って {{domxref("CanvasPattern")}} オブジェクトを作成します。これは上で見たグラデーションのメソッドと非常によく似ています。パターンを作成したら、それを `fillStyle` または `strokeStyle` プロパティに代入します。例えば次のようにします。
 
 ```js
-var img = new Image();
+const img = new Image();
 img.src = "someimage.png";
-var ptrn = ctx.createPattern(img, "repeat");
+const ptrn = ctx.createPattern(img, "repeat");
 ```
 
 > **メモ:** `drawImage()` メソッドと同様に、このメソッドを呼び出す前に使用する画像が読み込まれていることを確認する必要があります。そうしないと、パターンが正しく描画されない可能性があります。
@@ -685,14 +684,14 @@ var ptrn = ctx.createPattern(img, "repeat");
 
 ```js
 function draw() {
-  var ctx = document.getElementById("canvas").getContext("2d");
+  const ctx = document.getElementById("canvas").getContext("2d");
 
   // 新しい画像オブジェクトを生成して、パターンとして使用する
-  var img = new Image();
+  const img = new Image();
   img.src = "canvas_createpattern.png";
-  img.onload = function () {
+  img.onload = () => {
     // パターンを作成
-    var ptrn = ctx.createPattern(img, "repeat");
+    const ptrn = ctx.createPattern(img, "repeat");
     ctx.fillStyle = ptrn;
     ctx.fillRect(0, 0, 150, 150);
   };
@@ -700,14 +699,14 @@ function draw() {
 ```
 
 ```html hidden
-
+
 ```
 
 ```js hidden
 draw();
 ```
 
-{{EmbedLiveSample("A_createPattern_example", "180", "180", "canvas_createpattern.png")}}
+{{EmbedLiveSample("A_createPattern_example", "", "160")}}
 
 ## 影
 
@@ -722,7 +721,7 @@ draw();
 - {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}
   - : 影の効果の色を示す CSS 標準の色の値です。は、既定では完全透過の黒です。
 
-プロパティ `shadowOffsetX` と `shadowOffsetY` は、影がオブジェクトから X と Y 方向にどれだけ伸びるかを示します。これらの値は、現在の変換行列には影響されません。影を上または左に伸ばすには負の値を使用し、影を下または右に伸ばすには正の値を使用します。既定値はどちらも 0 です。
+プロパティ `shadowOffsetX` と `shadowOffsetY` は、影がオブジェクトから X と Y 方向にどれだけ伸びるかを示します。これらの値は、現在の座標変換行列には影響されません。影を上または左に伸ばすには負の値を使用し、影を下または右に伸ばすには正の値を使用してください。既定値はどちらも 0 です。
 
 `shadowBlur` プロパティはぼかし効果の大きさを示します。この値はピクセル数には対応せず、現在の変換行列の影響を受けません。既定値は 0 です。
 
@@ -736,12 +735,12 @@ draw();
 
 ```js
 function draw() {
-  var ctx = document.getElementById("canvas").getContext("2d");
+  const ctx = document.getElementById("canvas").getContext("2d");
 
   ctx.shadowOffsetX = 2;
   ctx.shadowOffsetY = 2;
   ctx.shadowBlur = 2;
-  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
+  ctx.shadowColor = "rgb(0 0 0 / 50%)";
 
   ctx.font = "20px Times New Roman";
   ctx.fillStyle = "Black";
@@ -750,14 +749,14 @@ function draw() {
 ```
 
 ```html hidden
-
+
 ```
 
 ```js hidden
 draw();
 ```
 
-{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "shadowed-string.png")}}
+{{EmbedLiveSample("A_shadowed_text_example")}}
 
 `font` プロパティと `fillText` メソッドについては、次の章の [テキストの描画](/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_text)で見ていくことにしましょう。
 
@@ -776,7 +775,7 @@ draw();
 
 ```js
 function draw() {
-  var ctx = document.getElementById("canvas").getContext("2d");
+  const ctx = document.getElementById("canvas").getContext("2d");
   ctx.beginPath();
   ctx.arc(50, 50, 30, 0, Math.PI * 2, true);
   ctx.arc(50, 50, 15, 0, Math.PI * 2, true);
@@ -785,13 +784,13 @@ function draw() {
 ```
 
 ```html hidden
-
+
 ```
 
 ```js hidden
 draw();
 ```
 
-{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "fill-rule.png")}}
+{{EmbedLiveSample("Canvas_fill_rules")}}
 
 {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}

From 1d09e7e0d4b25f3dc18d8784cb74c21530c02758 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sat, 6 Jul 2024 11:22:15 +0900
Subject: [PATCH 167/698] =?UTF-8?q?2024/07/02=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas_api/tutorial/drawing_text/index.md | 36 ++++++++++---------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/files/ja/web/api/canvas_api/tutorial/drawing_text/index.md b/files/ja/web/api/canvas_api/tutorial/drawing_text/index.md
index ee07082d0141ae..c86811ff1e43d9 100644
--- a/files/ja/web/api/canvas_api/tutorial/drawing_text/index.md
+++ b/files/ja/web/api/canvas_api/tutorial/drawing_text/index.md
@@ -1,6 +1,8 @@
 ---
 title: テキストの描画
 slug: Web/API/Canvas_API/Tutorial/Drawing_text
+l10n:
+  sourceCommit: f9f48866f02963e752717310b76a70d5bdaf554c
 ---
 
 {{DefaultAPISidebar("Canvas API")}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}
@@ -22,7 +24,7 @@ slug: Web/API/Canvas_API/Tutorial/Drawing_text
 
 ```js
 function draw() {
-  var ctx = document.getElementById("canvas").getContext("2d");
+  const ctx = document.getElementById("canvas").getContext("2d");
   ctx.font = "48px serif";
   ctx.fillText("Hello world", 10, 50);
 }
@@ -44,7 +46,7 @@ draw();
 
 ```js
 function draw() {
-  var ctx = document.getElementById("canvas").getContext("2d");
+  const ctx = document.getElementById("canvas").getContext("2d");
   ctx.font = "48px serif";
   ctx.strokeText("Hello world", 10, 50);
 }
@@ -90,29 +92,29 @@ draw();
 
+ctx.strokeText("Hello world", 0, 100);
+
 ```
 
 ```js hidden
-var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-var textarea = document.getElementById("code");
-var reset = document.getElementById("reset");
-var edit = document.getElementById("edit");
-var code = textarea.value;
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+const textarea = document.getElementById("code");
+const reset = document.getElementById("reset");
+const edit = document.getElementById("edit");
+const code = textarea.value;
 
 function drawCanvas() {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   eval(textarea.value);
 }
 
-reset.addEventListener("click", function () {
+reset.addEventListener("click", () => {
   textarea.value = code;
   drawCanvas();
 });
 
-edit.addEventListener("click", function () {
+edit.addEventListener("click", () => {
   textarea.focus();
 });
 
@@ -133,14 +135,16 @@ window.addEventListener("load", drawCanvas);
 
 ```js
 function draw() {
-  var ctx = document.getElementById("canvas").getContext("2d");
-  var text = ctx.measureText("foo"); // TextMetrics object
+  const ctx = document.getElementById("canvas").getContext("2d");
+  const text = ctx.measureText("foo"); // TextMetrics object
   text.width; // 16;
 }
 ```
 
-## Gecko 固有の注意事項
+## アクセシビリティの考慮
 
-Gecko (Firefox、Firefox OS および他の Mozilla ベースアプリケーション) では一部の[接頭辞付き API](/ja/docs/Web/API/CanvasRenderingContext2D#prefixed_apis) で、早期バージョンのテキスト描画法を実装しています。これらは非推奨になり削除されており、動作が保証されていません。
+`` 要素は単なるビットマップであり、描画するオブジェクトの情報は提供しません。キャンバス上に書かれたテキストは、画面の拡大を頼りにしているユーザーにとって、読みやすさの問題を発生させる可能性があります。キャンバス要素内のピクセルは変倍しないので、拡大するとぼやけてしまいます。これは、ピクセルがベクターではなく、文字の形をしたピクセルの集合であるためです。拡大するとピクセルが大きくなります。
+
+キャンバスのコンテンツは、意味づけされた HTML のようにアクセシビリティツールに公開されることはありません。一般的に、アクセシビリティのあるウェブサイトやアプリでキャンバスを使用することは避けましょう。キャンバスの代わりに HTML 要素や SVG を使用することもできます。
 
 {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}

From ac21ea26efa08a2486349d78d304bff258bc597c Mon Sep 17 00:00:00 2001
From: ken7253 <57705206+ken7253@users.noreply.github.com>
Date: Thu, 11 Jul 2024 21:59:58 +0900
Subject: [PATCH 168/698] =?UTF-8?q?[ja]=20Error.cause=E3=81=AE=E6=97=A5?=
 =?UTF-8?q?=E6=9C=AC=E8=AA=9E=E8=A8=B3=E3=82=92=E8=BF=BD=E5=8A=A0=20(#2220?=
 =?UTF-8?q?2)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 英語版から記述をコピー

* ざっくりと翻訳

* #22163 に合わせて見出し名を修正

* 更新し忘れていた見出しを修正

* 英単語と日本語の間に半角スペースを挿入

* Update files/ja/web/javascript/reference/global_objects/error/cause/index.md

Co-authored-by: Masahiro FUJIMOTO 

* Update files/ja/web/javascript/reference/global_objects/error/cause/index.md

Co-authored-by: Masahiro FUJIMOTO 

* レビューの指摘箇所と同様のミスを修正

---------

Co-authored-by: Masahiro FUJIMOTO 
---
 .../global_objects/error/cause/index.md       | 77 +++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 files/ja/web/javascript/reference/global_objects/error/cause/index.md

diff --git a/files/ja/web/javascript/reference/global_objects/error/cause/index.md b/files/ja/web/javascript/reference/global_objects/error/cause/index.md
new file mode 100644
index 00000000000000..f11bffc310f016
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/error/cause/index.md
@@ -0,0 +1,77 @@
+---
+title: "Error: cause"
+slug: Web/JavaScript/Reference/Global_Objects/Error/cause
+l10n:
+  sourceCommit: 17b9bcb5be24a5b7cbb8954c906e1392ac8e4f56
+---
+
+{{JSRef}}
+
+{{jsxref("Error")}} インスタンスの **`cause`** データプロパティはエラーの元の原因を示します。
+
+これはエラーをキャッチし、より具体的もしくは有用なエラーメッセージを再スローする際に、元のエラーにアクセスできるようにするために使用されます。
+
+## 値
+
+[`Error()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Error/Error) コンストラクター内で、引数 `options.cause` に渡された値。存在しない場合もあります。
+
+{{js_property_attributes(1, 0, 1)}}
+
+## 概要
+
+`cause` の値はどのような型でもかまいません。`catch` 文でバインドされる変数が `Error` であると確定しないのと同様に、キャッチしたエラーの原因が `Error` であると仮定してはいけません。
+
+以下の「構造化データをエラーの原因として提供する」例では、エラーでないものを意図的に原因として提供しています。
+
+## 例
+
+### cause によるエラーの再スロー
+
+エラーをキャッチし、新しいメッセージで再スローすると便利なことがあります。
+この例では、元のエラーを新しい `Error` のコンストラクターに渡しています。
+
+```js
+try {
+  connectToDatabase();
+} catch (err) {
+  throw new Error("Connecting to database failed.", { cause: err });
+}
+```
+
+より詳細な例については、[Error > 類似するエラーと区別する](/ja/docs/Web/JavaScript/Reference/Global_Objects/Error#類似するエラーと区別する) を参照してください。
+
+### 構造化データをエラーの原因として提供する
+
+人間が読むために書かれたエラーメッセージは、機械が解析するには不適切があります。
+
+エラーメッセージは語句の言い換えや句読点の変更に影響されるため、それらを処理するために書かれた既存の構文解析を壊してしまう可能性があるからです。
+そのため関数からエラーをスローする場合、人間が読めるエラーメッセージと共に機械が解析できるように構造化データとして原因を提供することができます。
+
+```js
+function makeRSA(p, q) {
+  if (!Number.isInteger(p) || !Number.isInteger(q)) {
+    throw new Error("RSA key generation requires integer inputs.", {
+      cause: { code: "NonInteger", values: [p, q] },
+    });
+  }
+  if (!areCoprime(p, q)) {
+    throw new Error("RSA key generation requires two co-prime integers.", {
+      cause: { code: "NonCoprime", values: [p, q] },
+    });
+  }
+  // rsa algorithm…
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{jsxref("Error.prototype.message")}}
+- {{jsxref("Error.prototype.toString()")}}

From 33cab0b976c5b4923af41b20ad96606ad64befb8 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sat, 6 Jul 2024 22:53:53 +0900
Subject: [PATCH 169/698] =?UTF-8?q?2024/03/06=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tutorial/transformations/index.md         | 114 ++++++++++--------
 1 file changed, 66 insertions(+), 48 deletions(-)

diff --git a/files/ja/web/api/canvas_api/tutorial/transformations/index.md b/files/ja/web/api/canvas_api/tutorial/transformations/index.md
index f25b947a08792f..9c9aca463124fd 100644
--- a/files/ja/web/api/canvas_api/tutorial/transformations/index.md
+++ b/files/ja/web/api/canvas_api/tutorial/transformations/index.md
@@ -1,6 +1,8 @@
 ---
 title: 座標変換
 slug: Web/API/Canvas_API/Tutorial/Transformations
+l10n:
+  sourceCommit: 6ecd7270275030fac931e168d987d209b7237351
 ---
 
 {{DefaultAPISidebar("Canvas API")}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}
@@ -18,36 +20,52 @@ slug: Web/API/Canvas_API/Tutorial/Transformations
 
 キャンバスの状態は、スタックに保存されます。 `save()` メソッドを呼び出すたびに、現在の描画状態をスタックにプッシュします。描画状態は以下の情報で構成されます。
 
-- 適用された座標変換操作 (すなわち、後述する `translate`、`rotate`、`scale`)。
-- {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}、{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}、{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}、{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}、{{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}、{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}、{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}、{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}、{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}、{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}、{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}、{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}、{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}、{{domxref("CanvasRenderingContext2D.font", "font")}}、{{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}、{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}、{{domxref("CanvasRenderingContext2D.direction", "direction")}}、{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} 属性の現在の値。
-- 現在の[クリッピングパス](/ja/docs/Web/API/Canvas_API/Tutorial/Compositing#Clipping_paths)。これは次の章で説明します。
+- 適用される座標変換（すなわち、後述する `translate`、`rotate`、`scale`）。
+- 以下の属性の現在の値。
+  - {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}
+  - {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}
+  - {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}
+  - {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}
+  - {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}
+  - {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}
+  - {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}
+  - {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}
+  - {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}
+  - {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}
+  - {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}
+  - {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}
+  - {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}
+  - {{domxref("CanvasRenderingContext2D.font", "font")}}
+  - {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}
+  - {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}
+  - {{domxref("CanvasRenderingContext2D.direction", "direction")}}
+  - {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}.
+- 現在の[クリッピングパス](/ja/docs/Web/API/Canvas_API/Tutorial/Compositing#クリッピングパス)。これは次の章で説明します。
 
 `save()` メソッドは、何回でも呼び出すことができます。`restore()` メソッドを呼び出すたびに、最後に保存された状態をスタックからポップして、すべての保存済み設定を復元します。
 
 ### `save` および `restore` の例
 
-この例は、連続した一連の矩形を描画するときに、描画状態のスタックがどのように機能するかを示します。
-
 ```js
 function draw() {
-  var ctx = document.getElementById("canvas").getContext("2d");
-
-  ctx.fillRect(0, 0, 150, 150); // 既定の設定で矩形を描画
-  ctx.save(); // 既定の状態を保存
+  const ctx = document.getElementById("canvas").getContext("2d");
 
-  ctx.fillStyle = "#09F"; // 設定変更
-  ctx.fillRect(15, 15, 120, 120); // 新たな設定で矩形を描画
+  ctx.fillRect(0, 0, 150, 150); // 既定の設定で黒い長方形を描画
+  ctx.save(); // 当初の既定の状態を保存
 
+  ctx.fillStyle = "#09F"; // 保存した設定を変更
+  ctx.fillRect(15, 15, 120, 120); // 新たな設定で青い長方形を描画
   ctx.save(); // 現在の状態を保存
-  ctx.fillStyle = "#FFF"; // 設定変更
+
+  ctx.fillStyle = "#FFF"; // 保存した設定を変更
   ctx.globalAlpha = 0.5;
-  ctx.fillRect(30, 30, 90, 90); // 新たな設定で矩形を描画
+  ctx.fillRect(30, 30, 90, 90); // 新たな設定で 50% 白の長方形を描画
 
   ctx.restore(); // 以前の状態を復元
-  ctx.fillRect(45, 45, 60, 60); // 復元した設定で矩形を描画
+  ctx.fillRect(45, 45, 60, 60); // 復元した青の設定で長方形を描画
 
   ctx.restore(); // 以前の状態を復元
-  ctx.fillRect(60, 60, 30, 30); // 復元した設定で矩形を描画
+  ctx.fillRect(60, 60, 30, 30); // 復元した黒の設定で長方形を描画
 }
 ```
 
@@ -59,13 +77,13 @@ function draw() {
 draw();
 ```
 
-最初のステップで、大きな矩形を既定の設定で描きます。次にこの状態を保存して、塗りつぶし色を変更します。そして、 2 番目のやや小さい青色の矩形を描いて、状態を保存します。もう一度描画設定を変更して、 3 番目の半透明な白色の矩形を描きます。
+最初のステップで、大きな長方形を既定の設定で描きます。次にこの状態を保存して、塗りつぶし色を変更します。そして、 2 番目のやや小さい青色の長方形を描いて、状態を保存します。もう一度描画設定を変更して、 3 番目の半透明な白色の長方形を描きます。
 
 ここまでは、これまでの章で行ってきたことによく似ています。しかし最初に `restore()` 文を呼び出したとき、スタックの先頭の描画状態が削除されて、その設定が復元されます。`save()` を使用して状態を保存しなければ、前の状態に戻すために塗りつぶし色や透過性を手動で変更しなければなりません。ここではプロパティが 2 つであり容易ですが、プロパティが多ければコードが一気にとても長くなります。
 
-2 番目の `restore()` 文を呼び出すと、元の状態（1 番目の `save` を呼び出す前に設定した状態）を復元して、最後の矩形を再び黒色で描きます。
+2 番目の `restore()` 文を呼び出すと、元の状態（1 番目の `save` を呼び出す前に設定した状態）を復元して、最後の長方形を再び黒色で描きます。
 
-{{EmbedLiveSample("A_save_and_restore_canvas_state_example", "180", "180", "canvas_savestate.png")}}
+{{EmbedLiveSample("A_save_and_restore_canvas_state_example", "", "160")}}
 
 ## 移動
 
@@ -74,23 +92,23 @@ draw();
 - {{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}
   - : キャンバスやその原点をグリッド上で移動します。`x` は水平方向の移動距離、`y` はグリッドを垂直方向の移動距離を示します。
 
-![](canvas_grid_translate.png)
+![キャンバスはグリッド上の元点から水平方向に `x` 単位、垂直方向に `y` 単位だけ押し下げられ、右に移動します。](canvas_grid_translate.png)
 
 座標変換を行う前にキャンバスの状態を保存しておくことは、よいアイデアです。ほとんどの場合、元の状態に戻すためには逆の座標変換を行うよりも `restore` メソッドを呼び出すほうが簡単です。また、ループ内で座標変換を行っているときにキャンバスの状態の保存や復元を行わなければ、キャンバスの端の外側に描画することになり、描いたものの一部を失ってしまうかもしれません。
 
 ### `translate` の例
 
-この例は、キャンバスの原点を移動する利点をいくつか示しています。 `translate()` メソッドを使用しなければ、すべての矩形が同じ位置 (0,0) に描かれます。また `translate()` によって、 `fillRect()` 関数で座標を手動で調整する必要なく、どこにでも自由に矩形を置くことができます。これにより若干理解しやすく、また使いやすくなります。
+この例は、キャンバスの原点を移動する利点をいくつか示しています。 `translate()` メソッドを使用しなければ、すべての長方形が同じ位置 (0,0) に描かれます。また `translate()` によって、 `fillRect()` 関数で座標を手動で調整する必要なく、どこにでも自由に長方形を置くことができます。これにより若干理解しやすく、また使いやすくなります。
 
-`draw()` 関数で、`for` ループを使用して `fillRect()` 関数を 9 回呼び出しています。それぞれのループで canvas を移動して矩形を描き、その後に元の状態を復元します。描画位置を調節する `translate()` を頼って、`fillRect()` は毎回同じ座標を使用していることに注目してください。
+`draw()` 関数で、`for` ループを使用して `fillRect()` 関数を 9 回呼び出しています。それぞれのループで canvas を移動して長方形を描き、その後に元の状態を復元します。描画位置を調節する `translate()` を頼って、`fillRect()` は毎回同じ座標を使用していることに注目してください。
 
 ```js
 function draw() {
-  var ctx = document.getElementById("canvas").getContext("2d");
-  for (var i = 0; i < 3; i++) {
-    for (var j = 0; j < 3; j++) {
+  const ctx = document.getElementById("canvas").getContext("2d");
+  for (let i = 0; i < 3; i++) {
+    for (let j = 0; j < 3; j++) {
       ctx.save();
-      ctx.fillStyle = "rgb(" + 51 * i + ", " + (255 - 51 * i) + ", 255)";
+      ctx.fillStyle = `rgb(${51 * i} ${255 - 51 * i} 255)`;
       ctx.translate(10 + j * 50, 10 + i * 50);
       ctx.fillRect(0, 0, 25, 25);
       ctx.restore();
@@ -107,7 +125,7 @@ function draw() {
 draw();
 ```
 
-{{EmbedLiveSample("A_translate_example", "160", "160", "translate.png")}}
+{{EmbedLiveSample("A_translate_example", "", "160")}}
 
 ## 回転
 
@@ -116,49 +134,49 @@ draw();
 - {{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}
   - : 現在の原点を中心にしてラジアンで示した `angle` の分、キャンバスを時計回りに回転します。
 
-![](canvas_grid_rotate.png)
+![既定で原点は左上、0 度は水平で右方向です。回転点は原点から時計回りに始めます。](canvas_grid_rotate.png)
 
 回転の中心は、常にキャンバスの原点です。中心を変更するには、`translate()` メソッドを使用してキャンバスを移動しなければなりません。
 
 ### `rotate` の例
 
-この例は、まずはキャンバスの原点で矩形を回転するために `rotate()` メソッドを使用して、次に矩形自身の中心で回転するために `translate()` の助けを借りています。
+この例は、まずはキャンバスの原点で長方形を回転するために `rotate()` メソッドを使用して、次に長方形自身の中心で回転するために `translate()` の助けを借りています。
 
 > **メモ:** 角度はラジアン (radians) で表しており、度数 (degrees) ではありません。これは `radians = (Math.PI/180)*degrees` のようにすると変換できます。
 
 ```js
 function draw() {
-  var ctx = document.getElementById("canvas").getContext("2d");
+  const ctx = document.getElementById("canvas").getContext("2d");
 
-  // 左の矩形を canvas の原点で回転する
+  // 左の長方形を canvas の原点で回転する
   ctx.save();
-  // 青い矩形
+  // 青い長方形
   ctx.fillStyle = "#0095DD";
   ctx.fillRect(30, 30, 100, 100);
   ctx.rotate((Math.PI / 180) * 25);
-  // 灰色の矩形
+  // 灰色の長方形
   ctx.fillStyle = "#4D4E53";
   ctx.fillRect(30, 30, 100, 100);
   ctx.restore();
 
-  // 右の矩形を矩形の中心で回転する
+  // 右の長方形を長方形の中心で回転する
   // draw blue rect
   ctx.fillStyle = "#0095DD";
   ctx.fillRect(150, 30, 100, 100);
 
-  ctx.translate(200, 80); // 矩形の中心に移動する
+  ctx.translate(200, 80); // 長方形の中心に移動する
   // x = x + 0.5 * 幅
   // y = y + 0.5 * 高さ
   ctx.rotate((Math.PI / 180) * 25); // 回転する
   ctx.translate(-200, -80); // 元の位置に移動する
 
-  // 灰色の矩形を描く
+  // 灰色の長方形を描く
   ctx.fillStyle = "#4D4E53";
   ctx.fillRect(150, 30, 100, 100);
 }
 ```
 
-矩形を中心で回転するために、キャンバスを矩形の中心へ移動した後にキャンバスを回転しています。そして canvas を 0,0 へ移動した後に矩形を描きます。
+長方形を中心で回転するために、キャンバスを長方形の中心へ移動した後にキャンバスを回転しています。そして canvas を 0,0 へ移動した後に長方形を描きます。
 
 ```html hidden
 
@@ -168,7 +186,7 @@ function draw() {
 draw();
 ```
 
-{{EmbedLiveSample("A_rotate_example", "310", "210", "rotate.png")}}
+{{EmbedLiveSample("A_rotate_example", "", "220")}}
 
 ## 拡大縮小
 
@@ -187,7 +205,7 @@ draw();
 
 ```js
 function draw() {
-  var ctx = document.getElementById("canvas").getContext("2d");
+  const ctx = document.getElementById("canvas").getContext("2d");
 
   // シンプルな図形を描いて、拡大する
   ctx.save();
@@ -210,7 +228,7 @@ function draw() {
 draw();
 ```
 
-{{EmbedLiveSample("A_scale_example", "160", "160", "scale.png")}}
+{{EmbedLiveSample("A_scale_example", "", "160")}}
 
 ## 座標変換
 
@@ -228,7 +246,7 @@ draw();
 
 - `a (m11)`
   - : 水平方向の拡大。
-- _`b (m12)`_
+- `b (m12)`
   - : 水平方向の歪み。
 - `c (m21)`
   - : 垂直方向の歪み。
@@ -247,21 +265,21 @@ draw();
 
 ```js
 function draw() {
-  var ctx = document.getElementById("canvas").getContext("2d");
+  const ctx = document.getElementById("canvas").getContext("2d");
 
-  var sin = Math.sin(Math.PI / 6);
-  var cos = Math.cos(Math.PI / 6);
+  const sin = Math.sin(Math.PI / 6);
+  const cos = Math.cos(Math.PI / 6);
   ctx.translate(100, 100);
-  var c = 0;
-  for (var i = 0; i <= 12; i++) {
+  let c = 0;
+  for (let i = 0; i <= 12; i++) {
     c = Math.floor((255 / 12) * i);
-    ctx.fillStyle = "rgb(" + c + ", " + c + ", " + c + ")";
+    ctx.fillStyle = `rgb(${c} ${c} ${c})`;
     ctx.fillRect(0, 0, 100, 10);
     ctx.transform(cos, sin, -sin, cos, 0, 0);
   }
 
   ctx.setTransform(-1, 0, 0, 1, 100, 100);
-  ctx.fillStyle = "rgba(255, 128, 255, 0.5)";
+  ctx.fillStyle = "rgb(255 128 255 / 50%)";
   ctx.fillRect(0, 50, 100, 100);
 }
 ```
@@ -274,6 +292,6 @@ function draw() {
 draw();
 ```
 
-{{EmbedLiveSample("Example_for_transform_and_setTransform", "230", "280", "canvas_transform.png")}}
+{{EmbedLiveSample("Example_for_transform_and_setTransform", "", "260")}}
 
 {{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}

From 476b73f639eb27ce5410e97797f51a10119ac96f Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sat, 6 Jul 2024 23:03:57 +0900
Subject: [PATCH 170/698] =?UTF-8?q?2024/03/02=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas_api/tutorial/compositing/index.md  | 101 +++++++++++++++---
 1 file changed, 89 insertions(+), 12 deletions(-)

diff --git a/files/ja/web/api/canvas_api/tutorial/compositing/index.md b/files/ja/web/api/canvas_api/tutorial/compositing/index.md
index 56d6fcf6937346..d66bba578d45a2 100644
--- a/files/ja/web/api/canvas_api/tutorial/compositing/index.md
+++ b/files/ja/web/api/canvas_api/tutorial/compositing/index.md
@@ -1,6 +1,8 @@
 ---
 title: 合成とクリッピング
 slug: Web/API/Canvas_API/Tutorial/Compositing
+l10n:
+  sourceCommit: 34d979bdb5bf27aa3662ac72c87a4dbe76cf0ce1
 ---
 
 {{DefaultAPISidebar("Canvas API")}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}
@@ -14,17 +16,13 @@ slug: Web/API/Canvas_API/Tutorial/Compositing
 - {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}
   - : これは、新しい図形を描くときに適用する合成処理の種類を設定します。 type は、 12 種類の合成処理から使用するものを特定する文字列です。
 
-以下の例のコードについては、[合成の例](/ja/docs/Web/API/Canvas_API/Tutorial/Compositing/Example)をご覧ください。
-
-{{EmbedLiveSample("Compositing_example", 750, 6750, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}
-
 ## クリッピングパス
 
 クリッピングパスは通常のキャンバスの図形に似ていますが、図形の不要な部分を隠すマスクとして作用します。これを以下の画像で視覚化しました。赤い星型の図形は、クリッピングパスです。このパスの外側にあるものはすべて、キャンバスで描画されません。
 
-![](canvas_clipping_path.png)
+![赤い輪郭線で星を描いたキャンバス。星の内側は透明で、星の内側にあるマス目ははっきりと見えますが、星の外側にあるマス目は不鮮明です。](canvas_clipping_path.png)
 
-クリッピングパスと先ほどの `globalCompositeOperation` プロパティを比較すると、おおむね同じ効果をもたらす合成モードとして `source-in` と `source-atop` の 2 つがあることがわかります。これら 2 つとのもっとも重要な違いは、クリッピングパスは実際にキャンバスに描かれるものではないことと、クリッピングパスは新しい図形による影響を受けないことです。これは制限された領域に複数の図形を描くという、クリッピングパスの目標を表しています。
+クリッピングパスと先ほどの `globalCompositeOperation` プロパティを比較すると、おおむね同じ効果をもたらすブレンドモードとして `source-in` と `source-atop` の 2 つがあることがわかります。これら 2 つとのもっとも重要な違いは、クリッピングパスは実際にキャンバスに描かれるものではないことと、クリッピングパスは新しい図形による影響を受けないことです。これは制限された領域に複数の図形を描くという、クリッピングパスの目標を表しています。
 
 [図形の描画](/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)の章では `stroke()` および `fill()` メソッドのみに言及しましたが、パスを扱う第 3 のメソッドとして `clip()` があります。
 
@@ -41,7 +39,7 @@ slug: Web/API/Canvas_API/Tutorial/Compositing
 
 ```js
 function draw() {
-  var ctx = document.getElementById("canvas").getContext("2d");
+  const ctx = document.getElementById("canvas").getContext("2d");
   ctx.fillRect(0, 0, 150, 150);
   ctx.translate(75, 75);
 
@@ -51,15 +49,18 @@ function draw() {
   ctx.clip();
 
   // 背景を描く
-  var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
+  const lingrad = ctx.createLinearGradient(0, -75, 0, 75);
   lingrad.addColorStop(0, "#232256");
   lingrad.addColorStop(1, "#143778");
 
   ctx.fillStyle = lingrad;
   ctx.fillRect(-75, -75, 150, 150);
 
-  // 星を描く
-  for (var j = 1; j < 50; j++) {
+  generateStars(ctx);
+}
+
+function generateStars(ctx) {
+  for (let j = 1; j < 50; j++) {
     ctx.save();
     ctx.fillStyle = "#fff";
     ctx.translate(
@@ -75,7 +76,7 @@ function drawStar(ctx, r) {
   ctx.save();
   ctx.beginPath();
   ctx.moveTo(r, 0);
-  for (var i = 0; i < 9; i++) {
+  for (let i = 0; i < 9; i++) {
     ctx.rotate(Math.PI / 5);
     if (i % 2 === 0) {
       ctx.lineTo((r / 0.525731) * 0.200811, 0);
@@ -101,6 +102,82 @@ draw();
 
 クリッピングパスを作成した後に描いたものはすべて、パスの内部にあるものだけが見える状態になります。これは、次に描いている線形グラデーションで明らかです。この後に独自の `drawStar()` 関数を使用して、位置や大きさがランダムな星を 50 個描きます。星もまた、クリッピングパスの内部で定義されたものしか見えません。
 
-{{EmbedLiveSample("A_clip_example", "180", "180", "canvas_clip.png")}}
+{{EmbedLiveSample("A_clip_example", "", "160")}}
+
+### クリッピングパスの反転
+
+逆クリッピングマスクというものはありません。しかし、キャンバス全体を長方形で埋め、スキップしたい部分に穴をあけたマスクを定義することはできます。[穴のある図形を描画する](/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#shapes_with_holes) 場合は、外側の図形と逆方向に穴を描画する必要があります。下記の例では、空に穴を開けています。
+
+長方形は描画方向を持ちませんが、あたかも時計回りに描画したかのように動作します。既定では arc コマンドも時計回りに描きますが、最後の引数で方向を変えることができます。
+
+```html hidden
+
+  
+    
+  
+
+```
+
+```js
+function draw() {
+  const canvas = document.getElementById("canvas");
+  if (canvas.getContext) {
+    const ctx = canvas.getContext("2d");
+    ctx.translate(75, 75);
+
+    // クリッピングパス
+    ctx.beginPath();
+    ctx.rect(-75, -75, 150, 150); // 外側の長方形
+    ctx.arc(0, 0, 60, 0, Math.PI * 2, true); // 反時計回りの穴
+    ctx.clip();
+
+    // 背景を描画
+    const lingrad = ctx.createLinearGradient(0, -75, 0, 75);
+    lingrad.addColorStop(0, "#232256");
+    lingrad.addColorStop(1, "#143778");
+
+    ctx.fillStyle = lingrad;
+    ctx.fillRect(-75, -75, 150, 150);
+
+    generateStars(ctx);
+  }
+}
+```
+
+```js hidden
+function generateStars(ctx) {
+  for (let j = 1; j < 50; j++) {
+    ctx.save();
+    ctx.fillStyle = "#fff";
+    ctx.translate(
+      75 - Math.floor(Math.random() * 150),
+      75 - Math.floor(Math.random() * 150),
+    );
+    drawStar(ctx, Math.floor(Math.random() * 4) + 2);
+    ctx.restore();
+  }
+}
+
+function drawStar(ctx, r) {
+  ctx.save();
+  ctx.beginPath();
+  ctx.moveTo(r, 0);
+  for (let i = 0; i < 9; i++) {
+    ctx.rotate(Math.PI / 5);
+    if (i % 2 === 0) {
+      ctx.lineTo((r / 0.525731) * 0.200811, 0);
+    } else {
+      ctx.lineTo(r, 0);
+    }
+  }
+  ctx.closePath();
+  ctx.fill();
+  ctx.restore();
+}
+
+draw();
+```
+
+{{EmbedLiveSample("Hole_in_rectangle", "", "160")}}
 
 {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}

From 8eea2bca60f8ed1e902c3857523aed6770bc98a7 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sun, 7 Jul 2024 23:04:48 +0900
Subject: [PATCH 171/698] =?UTF-8?q?2024/01/16=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

---
 .../tutorial/basic_animations/index.md        | 162 +++++++++---------
 1 file changed, 84 insertions(+), 78 deletions(-)

diff --git a/files/ja/web/api/canvas_api/tutorial/basic_animations/index.md b/files/ja/web/api/canvas_api/tutorial/basic_animations/index.md
index ebbb73a84e0d80..1fb2347ee12083 100644
--- a/files/ja/web/api/canvas_api/tutorial/basic_animations/index.md
+++ b/files/ja/web/api/canvas_api/tutorial/basic_animations/index.md
@@ -1,6 +1,8 @@
 ---
 title: 基本的なアニメーション
 slug: Web/API/Canvas_API/Tutorial/Basic_animations
+l10n:
+  sourceCommit: 005cc1fd55aadcdcbd9aabbed7d648a275f8f23a
 ---
 
 {{DefaultAPISidebar("Canvas API")}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}
@@ -39,7 +41,7 @@ slug: Web/API/Canvas_API/Tutorial/Basic_animations
 - {{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}
   - : アニメーションを実行することをブラウザーに通知し、次の再描画の前にアニメーションを更新するため、ブラウザーが指定の関数を呼び出すように要求します。
 
-ユーザーの操作が必要ない場合は、提供されたコードを繰り返し実行する `setInterval()` 関数が利用できます。ゲームを作成したい場合、キーボードまたはマウスのイベントを使用したアニメーションを制御するためには `setTimeout()` が利用できます。イベントリスナー ({{domxref("EventListener")}}) を設定することで、ユーザーの操作を取得し、アニメーション関数を実行します。
+ユーザーの操作が必要ない場合は、提供されたコードを繰り返し実行する `setInterval()` 関数が利用できます。ゲームを作成したい場合、キーボードまたはマウスのイベントを使用したアニメーションを制御するためには `setTimeout()` が利用できます。{{domxref("EventTarget/addEventListener", "addEventListener()")}} を用いてイベントリスナーを設定することで、ユーザーの操作を取得し、アニメーション関数を実行します。
 
 > **メモ:** 以下の例では、{{domxref("window.requestAnimationFrame()")}} メソッドを使用してアニメーションを制御します。`requestAnimationFrame` メソッドは、フレームを描画する準備ができた時にシステムがアニメーションフレームを呼び出すことで、よりスムーズで効率的な方法でアニメーションを提供します。通常、コールバック回数は 1 秒あたり 60 回となり、バックグラウンドタブで実行している場合は、レートが低くなることがあります。特にゲームのアニメーションループの詳細については、[ゲーム開発](/ja/docs/Games)の[ビデオゲームの解剖学](/ja/docs/Games/Anatomy)を参照してください。
 
@@ -56,9 +58,9 @@ slug: Web/API/Canvas_API/Tutorial/Basic_animations
 ### JavaScript
 
 ```js
-var sun = new Image();
-var moon = new Image();
-var earth = new Image();
+const sun = new Image();
+const moon = new Image();
+const earth = new Image();
 function init() {
   sun.src = "canvas_sun.png";
   moon.src = "canvas_moon.png";
@@ -67,18 +69,18 @@ function init() {
 }
 
 function draw() {
-  var ctx = document.getElementById("canvas").getContext("2d");
+  const ctx = document.getElementById("canvas").getContext("2d");
 
   ctx.globalCompositeOperation = "destination-over";
   ctx.clearRect(0, 0, 300, 300); // clear canvas
 
-  ctx.fillStyle = "rgba(0, 0, 0, 0.4)";
-  ctx.strokeStyle = "rgba(0, 153, 255, 0.4)";
+  ctx.fillStyle = "rgb(0 0 0 / 40%)";
+  ctx.strokeStyle = "rgb(0 153 255 / 40%)";
   ctx.save();
   ctx.translate(150, 150);
 
   // 地球
-  var time = new Date();
+  const time = new Date();
   ctx.rotate(
     ((2 * Math.PI) / 60) * time.getSeconds() +
       ((2 * Math.PI) / 60000) * time.getMilliseconds(),
@@ -122,15 +124,16 @@ init();
 ### HTML
 
 ```html
-
+現在時刻
 ```
 
 ### JavaScript
 
 ```js
 function clock() {
-  var now = new Date();
-  var ctx = document.getElementById("canvas").getContext("2d");
+  const now = new Date();
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext("2d");
   ctx.save();
   ctx.clearRect(0, 0, 150, 150);
   ctx.translate(75, 75);
@@ -143,7 +146,7 @@ function clock() {
 
   // 文字盤の時
   ctx.save();
-  for (var i = 0; i < 12; i++) {
+  for (let i = 0; i < 12; i++) {
     ctx.beginPath();
     ctx.rotate(Math.PI / 6);
     ctx.moveTo(100, 0);
@@ -155,8 +158,8 @@ function clock() {
   // 文字盤の分
   ctx.save();
   ctx.lineWidth = 5;
-  for (i = 0; i < 60; i++) {
-    if (i % 5 != 0) {
+  for (let i = 0; i < 60; i++) {
+    if (i % 5 !== 0) {
       ctx.beginPath();
       ctx.moveTo(117, 0);
       ctx.lineTo(120, 0);
@@ -166,17 +169,21 @@ function clock() {
   }
   ctx.restore();
 
-  var sec = now.getSeconds();
-  var min = now.getMinutes();
-  var hr = now.getHours();
-  hr = hr >= 12 ? hr - 12 : hr;
+  const sec = now.getSeconds();
+  // スイープ秒針の時計を表示するには、次のようにしてください。
+  // const sec = now.getSeconds() + now.getMilliseconds() / 1000;
+  const min = now.getMinutes();
+  const hr = now.getHours() % 12;
 
   ctx.fillStyle = "black";
 
-  // 時針
+  // 画像の説明を書きこむ
+  canvas.innerText = `現在時刻: ${hr}:${min}`;
+
+  // Write Hours
   ctx.save();
   ctx.rotate(
-    hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec,
+    (Math.PI / 6) * hr + (Math.PI / 360) * min + (Math.PI / 21600) * sec,
   );
   ctx.lineWidth = 14;
   ctx.beginPath();
@@ -211,7 +218,7 @@ function clock() {
   ctx.beginPath();
   ctx.arc(95, 0, 10, 0, Math.PI * 2, true);
   ctx.stroke();
-  ctx.fillStyle = "rgba(0, 0, 0, 0)";
+  ctx.fillStyle = "rgb(0 0 0 / 0%)";
   ctx.arc(0, 0, 3, 0, Math.PI * 2, true);
   ctx.fill();
   ctx.restore();
@@ -232,6 +239,9 @@ window.requestAnimationFrame(clock);
 
 ### 結果
 
+> **メモ:** 時計は 1 秒に 1 回しか更新されませんが、アニメーション画像は 1 秒間に 60 フレーム（またはウェブブラウザーの表示リフレッシュレート）で更新されます。
+> 秒針をスイープさせて時計を表示するには、上記の `const sec` の定義をコメントアウトされたバージョンと置き換えてください。
+
 {{EmbedLiveSample("An_animated_clock", "180", "200")}}
 
 ## ループする風景
@@ -240,97 +250,92 @@ window.requestAnimationFrame(clock);
 
 ### HTML
 
-この HTML には、画像がスクロール表示される {{HTMLElement("canvas")}} が含まれます。ここで指定する幅と高さは、 JavaScript のコードにある変数 `CanvasXZSize` と `CanvasYSize` の値と一致する必要があることに注意してください。
+この HTML には、画像がスクロール表示される {{HTMLElement("canvas")}} が含まれます。ここで指定する幅と高さは、 JavaScript のコードにある変数 `canvasXSize` と `canvasYSize` の値と一致する必要があることに注意してください。
 
 ```html
-
+ヨセミテ国立公園、エル・キャピタンの麓の草原
 ```
 
 ### JavaScript
 
 ```js
-var img = new Image();
+const img = new Image();
 
 // ユーザー変数。これらをカスタマイズすると、スクロールする画像、方向、速度を
 // 変更することができます。
-
 img.src = "capitan_meadows_yosemite_national_park.jpg";
-var CanvasXSize = 800;
-var CanvasYSize = 200;
-var speed = 30; // 小さくすると速くなる
-var scale = 1.05;
-var y = -4.5; // 垂直オフセット
+const canvasXSize = 800;
+const canvasYSize = 200;
+const speed = 30; // 小さくすると速くなる
+const scale = 1.05;
+const y = -4.5; // 垂直オフセット
 
 // メインプログラム
-
-var dx = 0.75;
-var imgW;
-var imgH;
-var x = 0;
-var clearX;
-var clearY;
-var ctx;
-
-img.onload = function () {
+const dx = 0.75;
+let imgW;
+let imgH;
+let x = 0;
+let clearX;
+let clearY;
+let ctx;
+
+img.onload = () => {
   imgW = img.width * scale;
   imgH = img.height * scale;
 
-  if (imgW > CanvasXSize) {
-    // image larger than canvas
-    x = CanvasXSize - imgW;
-  }
-  if (imgW > CanvasXSize) {
-    // image width larger than canvas
-    clearX = imgW;
-  } else {
-    clearX = CanvasXSize;
-  }
-  if (imgH > CanvasYSize) {
-    // image height larger than canvas
-    clearY = imgH;
-  } else {
-    clearY = CanvasYSize;
+  if (imgW > canvasXSize) {
+    // キャンバスより大きな画像
+    x = canvasXSize - imgW;
   }
 
-  // get canvas context
+  // 画像の寸法がキャンバスより大きいかどうか調べる
+  clearX = Math.max(imgW, canvasXSize);
+  clearY = Math.max(imgH, canvasYSize);
+
+  // キャンバスコンテキストの取得
   ctx = document.getElementById("canvas").getContext("2d");
 
-  // set refresh rate
+  // リフレッシュレートの設定
   return setInterval(draw, speed);
 };
 
 function draw() {
-  ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
+  ctx.clearRect(0, 0, clearX, clearY); // キャンバスをクリア
 
-  // if image is <= Canvas Size
-  if (imgW <= CanvasXSize) {
-    // reset, start from beginning
-    if (x > CanvasXSize) {
+  // 画像がキャンバスの大きさ以下の場合
+  if (imgW <= canvasXSize) {
+    // リセット、最初から始める
+    if (x > canvasXSize) {
       x = -imgW + x;
     }
-    // draw additional image1
+
+    // 追加の画像 1 を描画
     if (x > 0) {
       ctx.drawImage(img, -imgW + x, y, imgW, imgH);
     }
-    // draw additional image2
+
+    // 追加の画像 2 を描画
     if (x - imgW > 0) {
       ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH);
     }
-  }
-
-  // image is > Canvas Size
-  else {
-    // reset, start from beginning
-    if (x > CanvasXSize) {
-      x = CanvasXSize - imgW;
+  } else {
+    // 画像がキャンバスの大きさより大きい
+    // リセット、最初から始める
+    if (x > canvasXSize) {
+      x = canvasXSize - imgW;
     }
-    // draw additional image
-    if (x > CanvasXSize - imgW) {
+
+    // 追加の画像を描画
+    if (x > canvasXSize - imgW) {
       ctx.drawImage(img, x - imgW + 1, y, imgW, imgH);
     }
   }
+
   // 画像を描画
   ctx.drawImage(img, x, y, imgW, imgH);
+
   // 移動量
   x += dx;
 }
@@ -345,7 +350,10 @@ function draw() {
 ### HTML
 
 ```html
-
+画像上を移動するカーソルに続く、多色の消える光の流れを作成するアニメーション。
+  画像上を移動されるカーソルに追従する多色の光の流れ
+
 ```
 
 ### CSS
@@ -359,7 +367,7 @@ function draw() {
 body {
   margin: 0;
   padding: 0;
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: rgb(0 0 0 / 5%);
 }
 ```
 
@@ -453,7 +461,7 @@ function Particle(x, y, particleTrailWidth, strokeColor, rotateSpeed) {
 function anim() {
   requestAnimationFrame(anim);
 
-  context.fillStyle = "rgba(0,0,0,0.05)";
+  context.fillStyle = "rgb(0 0 0 / 5%)";
   context.fillRect(0, 0, canvas.width, canvas.height);
 
   particlesArray.forEach((particle) => particle.rotate());
@@ -466,8 +474,6 @@ function anim() {
 
 ## その他の例
 
-- [基本的なレイキャスター](/ja/docs/Web/API/Canvas_API/A_basic_ray-caster)
-  - : キーボードを使ってアニメーションをどのように制御するか説明した良いサンプルです。
 - [高度なアニメーション](/ja/docs/Web/API/Canvas_API/Tutorial/Advanced_animations)
   - : 高度なアニメーション技術と物の動きについて見ていきます。
 

From 2e8992474f66c9072931df310228e22e28599c6a Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sun, 7 Jul 2024 23:26:50 +0900
Subject: [PATCH 172/698] =?UTF-8?q?2024/01/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

---
 .../tutorial/advanced_animations/index.md     | 151 +++++++++++-------
 1 file changed, 91 insertions(+), 60 deletions(-)

diff --git a/files/ja/web/api/canvas_api/tutorial/advanced_animations/index.md b/files/ja/web/api/canvas_api/tutorial/advanced_animations/index.md
index 3fb9e2ea562cda..24ef97c068dfc5 100644
--- a/files/ja/web/api/canvas_api/tutorial/advanced_animations/index.md
+++ b/files/ja/web/api/canvas_api/tutorial/advanced_animations/index.md
@@ -1,6 +1,8 @@
 ---
 title: 高度なアニメーション
 slug: Web/API/Canvas_API/Tutorial/Advanced_animations
+l10n:
+  sourceCommit: 02724e050873ff160217f3980e6eb8c2d356fdc9
 ---
 
 {{DefaultAPISidebar("Canvas API")}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}
@@ -18,15 +20,15 @@ slug: Web/API/Canvas_API/Tutorial/Advanced_animations
 普通通り、まず描画コンテキストが必要になります。ボールを描くため、 `ball` オブジェクトを作成して、プロパティと、キャンバスにボールを描くための `draw()` メソッドを持つようにします。
 
 ```js
-var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
-var ball = {
+const ball = {
   x: 100,
   y: 100,
   radius: 25,
   color: "blue",
-  draw: function () {
+  draw() {
     ctx.beginPath();
     ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
     ctx.closePath();
@@ -45,18 +47,18 @@ ball.draw();
 ボールができたので、このチュートリアルの[前の章](/ja/docs/Web/API/Canvas_API/Tutorial/Basic_animations)で学んだような、基本的なアニメーションを追加する準備ができたことになります。ここでも {{domxref("window.requestAnimationFrame()")}} がアニメーションを制御するのに役立っています。ボールは、位置に速度ベクトルを追加することで移動します。また、フレームごとに {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} キャンバスに以前のフレームから古い円を削除しています。
 
 ```js
-var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-var raf;
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+let raf;
 
-var ball = {
+const ball = {
   x: 100,
   y: 100,
   vx: 5,
   vy: 2,
   radius: 25,
   color: "blue",
-  draw: function () {
+  draw() {
     ctx.beginPath();
     ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
     ctx.closePath();
@@ -73,11 +75,11 @@ function draw() {
   raf = window.requestAnimationFrame(draw);
 }
 
-canvas.addEventListener("mouseover", function (e) {
+canvas.addEventListener("mouseover", (e) => {
   raf = window.requestAnimationFrame(draw);
 });
 
-canvas.addEventListener("mouseout", function (e) {
+canvas.addEventListener("mouseout", (e) => {
   window.cancelAnimationFrame(raf);
 });
 
@@ -89,10 +91,16 @@ ball.draw();
 境界で衝突テストを行わないと、ボールはすぐにキャンバスから飛び出してしまいます。ボールの `x` と `y` の位置がキャンバスの寸法から外れているかどうかをチェックし、速度ベクトルの向きを反転させる必要があります。そのために、`draw` メソッドに次のようなチェックを追加します。
 
 ```js
-if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+if (
+  ball.y + ball.vy > canvas.height - ball.radius ||
+  ball.y + ball.vy < ball.radius
+) {
   ball.vy = -ball.vy;
 }
-if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+if (
+  ball.x + ball.vx > canvas.width - ball.radius ||
+  ball.x + ball.vx < ball.radius
+) {
   ball.vx = -ball.vx;
 }
 ```
@@ -110,18 +118,18 @@ if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
 #### JavaScript
 
 ```js
-var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-var raf;
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+let raf;
 
-var ball = {
+const ball = {
   x: 100,
   y: 100,
   vx: 5,
   vy: 2,
   radius: 25,
   color: "blue",
-  draw: function () {
+  draw() {
     ctx.beginPath();
     ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
     ctx.closePath();
@@ -136,21 +144,27 @@ function draw() {
   ball.x += ball.vx;
   ball.y += ball.vy;
 
-  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+  if (
+    ball.y + ball.vy > canvas.height - ball.radius ||
+    ball.y + ball.vy < ball.radius
+  ) {
     ball.vy = -ball.vy;
   }
-  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+  if (
+    ball.x + ball.vx > canvas.width - ball.radius ||
+    ball.x + ball.vx < ball.radius
+  ) {
     ball.vx = -ball.vx;
   }
 
   raf = window.requestAnimationFrame(draw);
 }
 
-canvas.addEventListener("mouseover", function (e) {
+canvas.addEventListener("mouseover", (e) => {
   raf = window.requestAnimationFrame(draw);
 });
 
-canvas.addEventListener("mouseout", function (e) {
+canvas.addEventListener("mouseout", (e) => {
   window.cancelAnimationFrame(raf);
 });
 
@@ -161,7 +175,7 @@ ball.draw();
 
 キャンバスにマウスを移動するとアニメーションを開始します。
 
-{{EmbedLiveSample("First_demo", "610", "340")}}
+{{EmbedLiveSample("最初のデモ", "610", "340")}}
 
 ## 加速
 
@@ -185,18 +199,18 @@ ball.vy += 0.25;
 #### JavaScript
 
 ```js
-var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-var raf;
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+let raf;
 
-var ball = {
+const ball = {
   x: 100,
   y: 100,
   vx: 5,
   vy: 2,
   radius: 25,
   color: "blue",
-  draw: function () {
+  draw() {
     ctx.beginPath();
     ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
     ctx.closePath();
@@ -213,21 +227,27 @@ function draw() {
   ball.vy *= 0.99;
   ball.vy += 0.25;
 
-  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+  if (
+    ball.y + ball.vy > canvas.height - ball.radius ||
+    ball.y + ball.vy < ball.radius
+  ) {
     ball.vy = -ball.vy;
   }
-  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+  if (
+    ball.x + ball.vx > canvas.width - ball.radius ||
+    ball.x + ball.vx < ball.radius
+  ) {
     ball.vx = -ball.vx;
   }
 
   raf = window.requestAnimationFrame(draw);
 }
 
-canvas.addEventListener("mouseover", function (e) {
+canvas.addEventListener("mouseover", (e) => {
   raf = window.requestAnimationFrame(draw);
 });
 
-canvas.addEventListener("mouseout", function (e) {
+canvas.addEventListener("mouseout", (e) => {
   window.cancelAnimationFrame(raf);
 });
 
@@ -236,14 +256,14 @@ ball.draw();
 
 #### 結果
 
-{{EmbedLiveSample("Second_demo", "610", "340")}}
+{{EmbedLiveSample("第 2 のデモ", "610", "340")}}
 
 ## 後引き効果
 
 これまで、前のフレームをクリアするときは {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} メソッドを使用していました。このメソッドを半透明の {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} に置き換えると、簡単に後引き効果を作ることができます。
 
 ```js
-ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
+ctx.fillStyle = "rgb(255 255 255 / 30%)";
 ctx.fillRect(0, 0, canvas.width, canvas.height);
 ```
 
@@ -258,18 +278,18 @@ ctx.fillRect(0, 0, canvas.width, canvas.height);
 #### JavaScript
 
 ```js
-var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-var raf;
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+let raf;
 
-var ball = {
+const ball = {
   x: 100,
   y: 100,
   vx: 5,
   vy: 2,
   radius: 25,
   color: "blue",
-  draw: function () {
+  draw() {
     ctx.beginPath();
     ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
     ctx.closePath();
@@ -279,7 +299,7 @@ var ball = {
 };
 
 function draw() {
-  ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
+  ctx.fillStyle = "rgb(255 255 255 / 30%)";
   ctx.fillRect(0, 0, canvas.width, canvas.height);
   ball.draw();
   ball.x += ball.vx;
@@ -287,21 +307,27 @@ function draw() {
   ball.vy *= 0.99;
   ball.vy += 0.25;
 
-  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+  if (
+    ball.y + ball.vy > canvas.height - ball.radius ||
+    ball.y + ball.vy < ball.radius
+  ) {
     ball.vy = -ball.vy;
   }
-  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+  if (
+    ball.x + ball.vx > canvas.width - ball.radius ||
+    ball.x + ball.vx < ball.radius
+  ) {
     ball.vx = -ball.vx;
   }
 
   raf = window.requestAnimationFrame(draw);
 }
 
-canvas.addEventListener("mouseover", function (e) {
+canvas.addEventListener("mouseover", (e) => {
   raf = window.requestAnimationFrame(draw);
 });
 
-canvas.addEventListener("mouseout", function (e) {
+canvas.addEventListener("mouseout", (e) => {
   window.cancelAnimationFrame(raf);
 });
 
@@ -310,7 +336,7 @@ ball.draw();
 
 #### 結果
 
-{{EmbedLiveSample("Third_demo", "610", "340")}}
+{{EmbedLiveSample("第 3 のデモ", "610", "340")}}
 
 ## マウス制御の追加
 
@@ -327,19 +353,19 @@ ball.draw();
 #### JavaScript
 
 ```js
-var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-var raf;
-var running = false;
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+let raf;
+let running = false;
 
-var ball = {
+const ball = {
   x: 100,
   y: 100,
   vx: 5,
   vy: 1,
   radius: 25,
   color: "blue",
-  draw: function () {
+  draw() {
     ctx.beginPath();
     ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
     ctx.closePath();
@@ -349,7 +375,7 @@ var ball = {
 };
 
 function clear() {
-  ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
+  ctx.fillStyle = "rgb(255 255 255 / 30%)";
   ctx.fillRect(0, 0, canvas.width, canvas.height);
 }
 
@@ -359,17 +385,23 @@ function draw() {
   ball.x += ball.vx;
   ball.y += ball.vy;
 
-  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+  if (
+    ball.y + ball.vy > canvas.height - ball.radius ||
+    ball.y + ball.vy < ball.radius
+  ) {
     ball.vy = -ball.vy;
   }
-  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+  if (
+    ball.x + ball.vx > canvas.width - ball.radius ||
+    ball.x + ball.vx < ball.radius
+  ) {
     ball.vx = -ball.vx;
   }
 
   raf = window.requestAnimationFrame(draw);
 }
 
-canvas.addEventListener("mousemove", function (e) {
+canvas.addEventListener("mousemove", (e) => {
   if (!running) {
     clear();
     ball.x = e.clientX;
@@ -378,14 +410,14 @@ canvas.addEventListener("mousemove", function (e) {
   }
 });
 
-canvas.addEventListener("click", function (e) {
+canvas.addEventListener("click", (e) => {
   if (!running) {
     raf = window.requestAnimationFrame(draw);
     running = true;
   }
 });
 
-canvas.addEventListener("mouseout", function (e) {
+canvas.addEventListener("mouseout", (e) => {
   window.cancelAnimationFrame(raf);
   running = false;
 });
@@ -397,15 +429,14 @@ ball.draw();
 
 マウスでボールを動かし、クリックでボールを放します。
 
-{{EmbedLiveSample("Fourth_demo", "610", "340")}}
+{{EmbedLiveSample("第 4 のデモ", "610", "340")}}
 
 ## ブロック崩し
 
-この短い章では、より高度なアニメーションを作成するためのテクニックをいくつか説明するだけです。他にもたくさんあります。パドルやレンガを追加して、このデモを [Breakout](https://en.wikipedia.org/wiki/Breakout_%28video_game%29) ゲームにするのはどうでしょうか？[ゲーム開発](/ja/docs/Games)エリアでは、ゲーム関連の記事を多数掲載しています。
+この短い章では、より高度なアニメーションを作成するためのテクニックをいくつか説明するだけです。他にもたくさんあります。パドルやレンガを追加して、このデモを[ブロック崩し](https://ja.wikipedia.org/wiki/ブロックくずし)ゲームにするのはどうでしょうか？[ゲーム開発](/ja/docs/Games)領域では、ゲーム関連の記事を多数掲載しています。
 
 ## 関連情報
 
 - {{domxref("window.requestAnimationFrame()")}}
-- [ウェブゲームのための効率的なアニメーション](/ja/docs/Games/Techniques/Efficient_animation_for_web_games)
 
 {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}

From 6b264af9ccc9a8eba772d2fafadfd39cac8367c8 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Thu, 11 Jul 2024 22:02:05 +0900
Subject: [PATCH 173/698] =?UTF-8?q?2024/04/09=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0=20(#22302)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 2024/04/09 時点の英語版に基づき更新

* Update files/ja/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .../pixel_manipulation_with_canvas/index.md   | 145 +++++++-----------
 1 file changed, 57 insertions(+), 88 deletions(-)

diff --git a/files/ja/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md b/files/ja/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md
index 396c9fb2e76c0d..c85fecc0619b14 100644
--- a/files/ja/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md
+++ b/files/ja/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md
@@ -1,6 +1,8 @@
 ---
 title: キャンバスとピクセル操作
 slug: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
+l10n:
+  sourceCommit: ec83af3d3b8879673fcdc49c2ed81b0ed73397fa
 ---
 
 {{DefaultAPISidebar("Canvas API")}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}
@@ -25,35 +27,10 @@ slug: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
 例えば画像の 50 行目の 200 列目にあるピクセルから青色成分の値を読み取るには、以下のようにします。
 
 ```js
-blueComponent = imageData.data[50 * (imageData.width * 4) + 200 * 4 + 2];
+const blueComponent = imageData.data[50 * (imageData.width * 4) + 200 * 4 + 2];
 ```
 
-座標（X と Y）が与えられると、次のようなことをすることになるかもしれません。
-
-```js
-var xCoord = 50;
-var yCoord = 100;
-var canvasWidth = 1024;
-
-function getColorIndicesForCoord(x, y, width) {
-  var red = y * (width * 4) + x * 4;
-  return [red, red + 1, red + 2, red + 3];
-}
-
-var colorIndices = getColorIndicesForCoord(xCoord, yCoord, canvasWidth);
-
-var redIndex = colorIndices[0];
-var greenIndex = colorIndices[1];
-var blueIndex = colorIndices[2];
-var alphaIndex = colorIndices[3];
-
-var redForCoord = imageData.data[redIndex];
-var greenForCoord = imageData.data[greenIndex];
-var blueForCoord = imageData.data[blueIndex];
-var alphaForCoord = imageData.data[alphaIndex];
-```
-
-または ES2015 では次のようになります。
+指定された座標 (X と Y) を設定すると、次のようになります。
 
 ```js
 const xCoord = 50;
@@ -73,7 +50,7 @@ const [redIndex, greenIndex, blueIndex, alphaIndex] = colorIndices;
 `Uint8ClampedArray.length` 属性を読み取ると、ピクセル配列のサイズをバイト数で知ることができます。
 
 ```js
-var numBytes = imageData.data.length;
+const numBytes = imageData.data.length;
 ```
 
 ## ImageData オブジェクトの作成
@@ -81,15 +58,15 @@ var numBytes = imageData.data.length;
 新たに空の `ImageData` オブジェクトを作成するには、{{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} メソッドを使用します。`createImageData()` メソッドは 2 種類の形式があります。
 
 ```js
-var myImageData = ctx.createImageData(width, height);
+const myImageData = ctx.createImageData(width, height);
 ```
 
-これは、特定の寸法の新たな `ImageData` オブジェクトを作成します。すべてのピクセルは透明な黒色（すべてがゼロ、すなわち rgba(0,0,0,0)）に設定されます。
+これは、特定の寸法の新たな `ImageData` オブジェクトを作成します。すべてのピクセルは透明な黒色（すべてがゼロ、すなわち rgb(0 0 0 / 0%)）に設定されます。
 
 新たな `ImageData` オブジェクトを、　`anotherImageData` で指定したオブジェクトと同じ寸法で作成することもできます。新しいオブジェクトのピクセルは、すべて透明な黒色に設定されます。**画像データはコピーされません!**
 
 ```js
-var myImageData = ctx.createImageData(anotherImageData);
+const myImageData = ctx.createImageData(anotherImageData);
 ```
 
 ## コンテキストのピクセルデータの取得
@@ -97,7 +74,7 @@ var myImageData = ctx.createImageData(anotherImageData);
 キャンバスのコンテキストのピクセルデータの複製を持つ `ImageData` オブジェクトを取得するには、`getImageData()` メソッドを使用します。
 
 ```js
-var myImageData = ctx.getImageData(left, top, width, height);
+const myImageData = ctx.getImageData(left, top, width, height);
 ```
 
 このメソッドは (`left`,`top`)、(`left+width`, `top`)、(`left`, `top+height`)、(`left+width`, `top+height`) の点で四隅を表したキャンバスの領域のピクセルデータを表す `ImageData` オブジェクトを返します。点の座標は、キャンバスの座標空間の単位で指定します。
@@ -108,51 +85,48 @@ var myImageData = ctx.getImageData(left, top, width, height);
 
 ### カラーピッカー
 
-この例では、マウスカーソルの下にある色を表示するために [getImageData()](/ja/docs/Web/API/CanvasRenderingContext2D/getImageData) メソッドを使用しています。ここでは現在のマウスカーソルの位置を `layerX` と `layerY` で求めて、[getImageData()](/ja/docs/Web/API/CanvasRenderingContext2D/getImageData) が提供するピクセル配列で該当位置のピクセルデータを探します。最後に、色を表示するための `
` で背景色とテキストを設定するために、配列データを使用します。
+この例では、マウスカーソルの下にある色を表示するために [`getImageData()`](/ja/docs/Web/API/CanvasRenderingContext2D/getImageData) メソッドを使用しています。ここでは現在のマウスカーソルの位置を求めて、[`getImageData()`](/ja/docs/Web/API/CanvasRenderingContext2D/getImageData) が提供するピクセル配列で該当位置のピクセルデータを探します。最後に、色を表示するための `
` で背景色とテキストを設定するために、配列データを使用します。
 
 ```js
-var img = new Image();
+const img = new Image();
 img.crossOrigin = "anonymous";
 img.src = "./assets/rhino.jpg";
-var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-img.onload = function () {
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+img.addEventListener("load", () => {
   ctx.drawImage(img, 0, 0);
   img.style.display = "none";
-};
-var hoveredColor = document.getElementById("hovered-color");
-var selectedColor = document.getElementById("selected-color");
+});
+const hoveredColor = document.getElementById("hovered-color");
+const selectedColor = document.getElementById("selected-color");
 
 function pick(event, destination) {
-  var x = event.layerX;
-  var y = event.layerY;
-  var pixel = ctx.getImageData(x, y, 1, 1);
-  var data = pixel.data;
+  const bounding = canvas.getBoundingClientRect();
+  const x = event.clientX - bounding.left;
+  const y = event.clientY - bounding.top;
+  const pixel = ctx.getImageData(x, y, 1, 1);
+  const data = pixel.data;
 
-  const rgba = `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${data[3] / 255})`;
-  destination.style.background = rgba;
-  destination.textContent = rgba;
+  const rgbColor = `rgb(${data[0]} ${data[1]} ${data[2]} / ${data[3] / 255})`;
+  destination.style.background = rgbColor;
+  destination.textContent = rgbColor;
 
-  return rgba;
+  return rgbColor;
 }
 
-canvas.addEventListener("mousemove", function (event) {
-  pick(event, hoveredColor);
-});
-canvas.addEventListener("click", function (event) {
-  pick(event, selectedColor);
-});
+canvas.addEventListener("mousemove", (event) => pick(event, hoveredColor));
+canvas.addEventListener("click", (event) => pick(event, selectedColor));
 ```
 
 このコードの使い方は、次のライブ例で紹介します。
 
 {{EmbedGHLiveSample("dom-examples/canvas/pixel-manipulation/color-picker.html", '100%', 300)}}
 
-ソースコードもご覧ください。 [HTML](https://github.com/mdn/dom-examples/blob/master/canvas/pixel-manipulation/color-picker.html), [JavaScript](https://github.com/mdn/dom-examples/blob/master/canvas/pixel-manipulation/color-picker.js) です。
+ソースコードもご覧ください。 [HTML](https://github.com/mdn/dom-examples/blob/main/canvas/pixel-manipulation/color-picker.html), [JavaScript](https://github.com/mdn/dom-examples/blob/main/canvas/pixel-manipulation/color-picker.js) です。
 
 ## コンテキストへのピクセルデータの描画
 
-{{domxref("CanvasRenderingContext2D.putImageData", "putImageData()")}} メソッドを使用して、コンテキストにピクセルデータを描くことができます。
+[putImageData()](/ja/docs/Web/API/CanvasRenderingContext2D/putImageData) メソッドを使用して、コンテキストにピクセルデータを描くことができます。
 
 ```js
 ctx.putImageData(myImageData, dx, dy);
@@ -171,26 +145,26 @@ ctx.putImageData(myImageData, 0, 0);
 この例では、すべてのピクセルに対して繰り返し処理を行い、値を変更したピクセル配列を {{domxref("CanvasRenderingContext2D.putImageData", "putImageData()")}} を使ってキャンバスに戻しています。反転機能は、最大値 255 から各色を減算します。グレースケール関数は、赤、緑、青の平均値を使用します。また、例えば `x = 0.299r + 0.587g + 0.114b` という式で与えられる加重平均を使用することもできます。詳しくは Wikipedia の[グレースケール](https://ja.wikipedia.org/wiki/%E3%82%B0%E3%83%AC%E3%83%BC%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%AB)をご覧ください。
 
 ```js
-var img = new Image();
+const img = new Image();
 img.crossOrigin = "anonymous";
 img.src = "./assets/rhino.jpg";
 
-var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
-img.onload = function () {
+img.onload = () => {
   ctx.drawImage(img, 0, 0);
 };
 
-var original = function () {
+const original = () => {
   ctx.drawImage(img, 0, 0);
 };
 
-var invert = function () {
+const invert = () => {
   ctx.drawImage(img, 0, 0);
   const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
   const data = imageData.data;
-  for (var i = 0; i < data.length; i += 4) {
+  for (let i = 0; i < data.length; i += 4) {
     data[i] = 255 - data[i]; // red
     data[i + 1] = 255 - data[i + 1]; // green
     data[i + 2] = 255 - data[i + 2]; // blue
@@ -198,12 +172,12 @@ var invert = function () {
   ctx.putImageData(imageData, 0, 0);
 };
 
-var grayscale = function () {
+const grayscale = () => {
   ctx.drawImage(img, 0, 0);
   const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
   const data = imageData.data;
-  for (var i = 0; i < data.length; i += 4) {
-    var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
+  for (let i = 0; i < data.length; i += 4) {
+    const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
     data[i] = avg; // red
     data[i + 1] = avg; // green
     data[i + 2] = avg; // blue
@@ -213,7 +187,7 @@ var grayscale = function () {
 
 const inputs = document.querySelectorAll("[name=color]");
 for (const input of inputs) {
-  input.addEventListener("change", function (evt) {
+  input.addEventListener("change", (evt) => {
     switch (evt.target.value) {
       case "inverted":
         return invert();
@@ -230,9 +204,9 @@ for (const input of inputs) {
 
 {{EmbedGHLiveSample("dom-examples/canvas/pixel-manipulation/color-manipulation.html", '100%', 300)}}
 
-ソースコードも利用できます。 — [HTML](https://github.com/mdn/dom-examples/blob/master/canvas/pixel-manipulation/color-manipulation.html), [JavaScript](https://github.com/mdn/dom-examples/blob/master/canvas/pixel-manipulation/color-manipulation.js)
+ソースコードも利用できます。 — [HTML](https://github.com/mdn/dom-examples/blob/main/canvas/pixel-manipulation/color-manipulation.html), [JavaScript](https://github.com/mdn/dom-examples/blob/main/canvas/pixel-manipulation/color-manipulation.js)
 
-## ズームとアンチエイリアシング
+## ズームとアンチエイリアス
 
 {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} メソッド、第 2 の canvas、{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} プロパティの力を借りて、画像をズームアップして詳しく見ることができます。また、{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} のない 3 番目のキャンバスも描画し、左右に並べて比較できるようにします。
 
@@ -255,35 +229,29 @@ zoomctx.drawImage(
 ズームの例です。
 
 ```js
-var img = new Image();
+const img = new Image();
 img.crossOrigin = "anonymous";
 img.src = "./assets/rhino.jpg";
-img.onload = function () {
+img.onload = () => {
   draw(this);
 };
 
 function draw(img) {
-  var canvas = document.getElementById("canvas");
-  var ctx = canvas.getContext("2d");
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext("2d");
   ctx.drawImage(img, 0, 0);
 
-  var smoothedZoomCtx = document
+  const smoothedZoomCtx = document
     .getElementById("smoothed-zoom")
     .getContext("2d");
   smoothedZoomCtx.imageSmoothingEnabled = true;
-  smoothedZoomCtx.mozImageSmoothingEnabled = true;
-  smoothedZoomCtx.webkitImageSmoothingEnabled = true;
-  smoothedZoomCtx.msImageSmoothingEnabled = true;
 
-  var pixelatedZoomCtx = document
+  const pixelatedZoomCtx = document
     .getElementById("pixelated-zoom")
     .getContext("2d");
   pixelatedZoomCtx.imageSmoothingEnabled = false;
-  pixelatedZoomCtx.mozImageSmoothingEnabled = false;
-  pixelatedZoomCtx.webkitImageSmoothingEnabled = false;
-  pixelatedZoomCtx.msImageSmoothingEnabled = false;
 
-  var zoom = function (ctx, x, y) {
+  const zoom = (ctx, x, y) => {
     ctx.drawImage(
       canvas,
       Math.min(Math.max(0, x - 5), img.width - 10),
@@ -297,7 +265,7 @@ function draw(img) {
     );
   };
 
-  canvas.addEventListener("mousemove", function (event) {
+  canvas.addEventListener("mousemove", (event) => {
     const x = event.layerX;
     const y = event.layerY;
     zoom(smoothedZoomCtx, x, y);
@@ -310,21 +278,21 @@ function draw(img) {
 
 {{EmbedGHLiveSample("dom-examples/canvas/pixel-manipulation/image-smoothing.html", '100%', 300)}}
 
-ソースコードも見ることができます。 — [HTML](https://github.com/mdn/dom-examples/blob/master/canvas/pixel-manipulation/image-smoothing.html), [JavaScript](https://github.com/mdn/dom-examples/blob/master/canvas/pixel-manipulation/image-smoothing.js)
+ソースコードも見ることができます。 — [HTML](https://github.com/mdn/dom-examples/blob/main/canvas/pixel-manipulation/image-smoothing.html), [JavaScript](https://github.com/mdn/dom-examples/blob/main/canvas/pixel-manipulation/image-smoothing.js)
 
 ## 画像の保存
 
-{{domxref("HTMLCanvasElement")}} は、画像を保存する際に役に立つ `toDataURL()` メソッドを提供します。これは、 [data URI](/ja/docs/Web/HTTP/data_URIs) として引数 `type` で指定した形式（既定値は [PNG](https://en.wikipedia.org/wiki/Portable_Network_Graphics)）で表した画像を返します。返される画像の解像度は 96 dpi です。
+{{domxref("HTMLCanvasElement")}} は、画像を保存する際に役に立つ `toDataURL()` メソッドを提供します。これは、[データ URL](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) として引数 `type` で指定した形式（既定値は [PNG](https://ja.wikipedia.org/wiki/Portable_Network_Graphics)）で表した画像を返します。返される画像の解像度は 96 dpi です。
 
 > **メモ:** CORS を使用せずに他の {{Glossary("origin")}} から取得したピクセルがキャンバスに含まれている場合、キャンバスは**汚染**され、その内容を読み取ったり保存したりできなくなることに注意してください。
-> [セキュリティと汚染されたキャンバス](/ja/docs/Web/HTML/CORS_enabled_image#security_and_tainted_canvases)を参照してください。
+> [セキュリティと汚染されたキャンバス](/ja/docs/Web/HTML/CORS_enabled_image#セキュリティと汚染されたキャンバス)を参照してください。
 
 - {{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}}
   - : 既定の設定。PNG 画像を作成します。
 - {{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/jpeg', quality)")}}
   - : JPG 画像を作成します。オプションで、品質を 0 から 1 の範囲で指定できます。1 は最高品質、0 はほとんど見分けがつかなくなりますがファイルサイズを小さくできます。
 
-キャンバスから生成した data URI は、例えば任意の {{HTMLElement("image")}} のソースとして使用したり、ディスクに保存するために [download 属性](/ja/docs/Web/HTML/Element/a#attr-download)を持つハイパーリンクに投入することができます。
+キャンバスから生成したデータ URL は、例えば任意の {{HTMLElement("img")}} のソースとして使用したり、ディスクに保存するために [download 属性](/ja/docs/Web/HTML/Element/a#download)を持つハイパーリンクに投入したりすることができます。
 
 また、キャンバスから {{domxref("Blob")}} を生成することもできます。
 
@@ -335,6 +303,7 @@ function draw(img) {
 
 - {{domxref("ImageData")}}
 - [キャンバスを使用した動画の操作](/ja/docs/Web/API/Canvas_API/Manipulating_video_using_canvas)
-- [Canvas, images and pixels – by Christian Heilmann](https://codepo8.github.io/canvas-images-and-pixels/)
+- [Download Canvas API-Generated Images Using toBlob](https://www.digitalocean.com/community/tutorials/js-canvas-toblob)
+- [HTML5 Canvas Tutorials](https://www.html5canvastutorials.com/)
 
 {{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}

From 8000fc626482652b85d8745cc6ad208181a9575f Mon Sep 17 00:00:00 2001
From: Leonid Vinogradov 
Date: Thu, 11 Jul 2024 16:05:58 +0300
Subject: [PATCH 174/698] [ja] fix images in `Web/HTTP/Overview` (#22306)

[ja] fix images in 'Web/HTTP/Overview'
---
 files/ja/web/http/overview/index.md | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/files/ja/web/http/overview/index.md b/files/ja/web/http/overview/index.md
index 95f2c2f88acb6a..32e3fec92b4ea5 100644
--- a/files/ja/web/http/overview/index.md
+++ b/files/ja/web/http/overview/index.md
@@ -11,12 +11,14 @@ l10n:
 これはウェブにおけるデータ交換の基礎をなし、クライアントサーバープロトコルであり、リクエストは受け取り者（一般にはウェブブラウザー）が生成します。
 文書全体は、テキスト、レイアウトの定義、画像、動画、スクリプトなど、取り込まれたさまざまなサブ文書から再構成されます。
 
-![ウェブの文書は複数のリソースの組み合わせ](fetching_a_page.png)
+![ウェブの文書は複数のリソースの組み合わせ](https://mdn.github.io/shared-assets/images/diagrams/http/overview/fetching-a-page.svg)
 
 クライアントとサーバーは、（データの流れとは対照的に）個々のメッセージを交換することによって通信します。
 クライアント（通常はウェブブラウザー）が送信するメッセージは*リクエスト*と呼ばれます。また、サーバーが回答として送信するメッセージは*レスポンス*と呼ばれます。
 
-![HTTP はアプリケーション層のプロトコルであり、 TCP （トランスポート層）や IP （ネットワーク層）やプレゼンテーション層以下の上の階層に当たります。](http-layers.png)1990 年代初頭に設計された HTTP は、時間をかけて進化した拡張可能なプロトコルです。
+![HTTP はアプリケーション層のプロトコルであり、 TCP （トランスポート層）や IP （ネットワーク層）やプレゼンテーション層以下の上の階層に当たります。](https://mdn.github.io/shared-assets/images/diagrams/http/overview/http-layers.svg)
+
+1990 年代初頭に設計された HTTP は、時間をかけて進化した拡張可能なプロトコルです。
 HTTP は、 {{Glossary("TCP")}} または {{Glossary("TLS")}} （暗号化された TCP 接続）を使用して送信されるアプリケーション層のプロトコルですが、理論上は信頼性のある任意のトランスポート層プロトコルを使用できます。
 HTTP は拡張性があるため、ハイパーテキスト文書だけでなく画像や動画の取り込みや、 HTML フォームの入力結果などをクライアントからサーバーへ送信することもできます。
 また、リクエストに応じてウェブページを更新するために、文書の一部を取り込むこともできます。
@@ -29,7 +31,7 @@ HTTP はクライアントサーバープロトコルであり、リクエスト
 個々のリクエストはサーバーに送信され、処理した後に*レスポンス*と呼ばれる回答を提供します。
 クライアントとサーバーとの間には、例えばゲートウェイや{{Glossary("Cache", "キャッシュ")}}などの様々な操作を行う、まとめて{{Glossary("Proxy_server", "プロキシーサーバー")}}と呼ばれるいくつもの実体が存在しています。
 
-![クライアントとサーバーの連鎖](client-server-chain.png)
+![クライアントとサーバーの連鎖](https://mdn.github.io/shared-assets/images/diagrams/http/overview/client-server-chain.svg)
 
 実際はブラウザーとサーバーの間に、ルーターやモデムなどリクエストを扱うコンピューターがさらに存在します。
 ウェブが階層構造で設計されたおかげで、これらはネットワークやトランスポート層の中に隠されています。
@@ -190,7 +192,7 @@ HTTP メッセージはリクエストとレスポンスの 2 種類あり、そ
 
 HTTP リクエストの例です。
 
-![基本的な HTTP リクエスト](http_request.png)
+![基本的な HTTP リクエスト](https://mdn.github.io/shared-assets/images/diagrams/http/overview/http-request.svg)
 
 リクエストは以下の要素で構成されます。
 
@@ -205,7 +207,7 @@ HTTP リクエストの例です。
 
 レスポンスの例です。
 
-![HTTP レスポンスの画像](http_response.png)
+![HTTP レスポンスの画像](https://mdn.github.io/shared-assets/images/diagrams/http/overview/http-response.svg)
 
 レスポンスは以下の要素で構成されます。
 

From a1f06d4bf502b928d58e677b81151d887267447e Mon Sep 17 00:00:00 2001
From: SaekiTominaga 
Date: Thu, 11 Jul 2024 22:08:51 +0900
Subject: [PATCH 175/698] =?UTF-8?q?CSS:=20`@property`=20=E3=81=AE=E3=82=B3?=
 =?UTF-8?q?=E3=83=BC=E3=83=89=E4=BE=8B=E3=81=AE=E8=AA=A4=E3=82=8A=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3=20(#22329)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 誤訳修正

* 引用符付け忘れの修正
---
 files/ja/web/css/@property/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ja/web/css/@property/index.md b/files/ja/web/css/@property/index.md
index b205cfaae78fbf..702aa61c1e38fb 100644
--- a/files/ja/web/css/@property/index.md
+++ b/files/ja/web/css/@property/index.md
@@ -37,7 +37,7 @@ l10n:
   - : プロパティの初期値を設定します。
 
 `@property` ルールには {{cssxref("@property/syntax","syntax")}} および {{cssxref("@property/inherits","inherits")}} 記述子を含める必要があります。どちらかがない場合は、 `@property` ルール全体が無効となり、無視されます。
-{{cssxref("@property/initial-value","initial-value")}} 記述子は構文が [`*` 全称構文定義](https://drafts.css-houdini.org/css-properties-values-api/#universal-syntax-definition)（例えば `initial-value: *`）である場合のみ省略可能で、それ以外の場合は必須です。
+{{cssxref("@property/initial-value","initial-value")}} 記述子は構文が [`*` 全称構文定義](https://drafts.css-houdini.org/css-properties-values-api/#universal-syntax-definition)（例えば `syntax: "*"`）である場合のみ省略可能で、それ以外の場合は必須です。
 `initial-vaue` 記述子が必須である場合にこれが省略されると、ルール全体が無効となって無視されます。
 
 未知の記述子は無効で無視されますが、 `@property` ルールは無効になりません。

From 0eafedad6cdf4755bf8ff6c328805aa8c95df98b Mon Sep 17 00:00:00 2001
From: yassh 
Date: Thu, 11 Jul 2024 10:29:10 +0900
Subject: [PATCH 176/698] =?UTF-8?q?2024/07/11=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/html/element/hgroup/index.md | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/files/ja/web/html/element/hgroup/index.md b/files/ja/web/html/element/hgroup/index.md
index 8ba848edc6b6dc..e27913eec14d50 100644
--- a/files/ja/web/html/element/hgroup/index.md
+++ b/files/ja/web/html/element/hgroup/index.md
@@ -1,5 +1,5 @@
 ---
-title: 

+title: "
: 見出しグループ要素"
 slug: Web/HTML/Element/hgroup
 l10n:
   sourceCommit: ca65963b93e69591b9362bb2bfde56f93128e2cb
@@ -45,10 +45,6 @@ l10n:
 
 {{EmbedLiveSample('Examples')}}
 
-## アクセシビリティの考慮
-
-現在のところ、 `
` 要素に強いアクセシビリティの意味はありません。要素内のコンテンツ（見出しと、任意の段落）は、ブラウザーのアクセシビリティ API によって公開されます。
-
 ## 技術的概要
 
 
@@ -88,8 +84,10 @@ l10n:
     

From e22b625a78e267e1137272510a7871e07e91f44a Mon Sep 17 00:00:00 2001
From: Leonid Vinogradov 
Date: Fri, 12 Jul 2024 01:24:35 +0300
Subject: [PATCH 177/698] [ru] update
 `Web/HTTP/Content_negotiation/List_of_default_Accept_values` translation
 (#22121)

[ru] update 'Web/HTTP/Content_negotiation/List_of_default_Accept_values' translation
---
 .../list_of_default_accept_values/index.md    | 112 ++++++++++--------
 1 file changed, 64 insertions(+), 48 deletions(-)

diff --git a/files/ru/web/http/content_negotiation/list_of_default_accept_values/index.md b/files/ru/web/http/content_negotiation/list_of_default_accept_values/index.md
index 40358512c58b21..dd64d8dc367742 100644
--- a/files/ru/web/http/content_negotiation/list_of_default_accept_values/index.md
+++ b/files/ru/web/http/content_negotiation/list_of_default_accept_values/index.md
@@ -1,6 +1,8 @@
 ---
 title: Используемые по умолчанию значения заголовка Accept
 slug: Web/HTTP/Content_negotiation/List_of_default_Accept_values
+l10n:
+  sourceCommit: e843500803b73cbf179b84864cd9c159c7d4d81c
 ---
 
 {{HTTPSidebar}}
@@ -9,71 +11,85 @@ slug: Web/HTTP/Content_negotiation/List_of_default_Accept_values
 
 ## Значения по умолчанию
 
-Здесь приведены значения, которые отправляются, когда нет никакой уточняющей информации. Обратите внимание, что все браузеры добавляют MIME-тип `*/*`, чтобы были охвачены все возможные варианты. Обычно значения имеют такой вид, когда запросы выполняются через адресную строку или через HTML-элемент {{HTMLElement("a")}}.
+Здесь приведены значения, которые отправляются, когда нет никакой уточняющей информации. Обратите внимание, что все браузеры добавляют MIME-тип `*/*`, чтобы были охвачены все возможные варианты. Обычно значения имеют такой вид, когда запросы выполняются через адресную строку или с помощью HTML-элемента {{HTMLElement("a")}}.
 
-| Агент пользователя  | Значение                                                                                                                                                                                                                                                                        | Комментарий                                                                                                                                                                                                                                                                     |
-| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Firefox             | `text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8` (начиная с Firefox 66) `text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8` (в Firefox 65) `text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8` (в более ранних версиях) | В Firefox до версии 65 включительно значение можно изменить с помощью параметра [`network.http.accept.default`](http://kb.mozillazine.org/Network.http.accept.default) (см. [исходный код](https://hg.mozilla.org/mozilla-central/file/tip/modules/libpref/init/all.js#l1750)). |
-| Safari, Chrome      | `text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8`                                                                                                                                                                                         | [исходный код](https://chromium.googlesource.com/chromium/src.git/+/master/services/network/loader_util.cc#24)                                                                                                                                                                  |
-| Safari 5            | `text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8`                                                                                                                                                                                                               | Значение улучшено по сравнению с прежними вариантами заголовка `Accept`: MIME-тип `image/png` уже не указывается как более приоритетный, чем `text/html`.                                                                                                                       |
-| Internet Explorer 8 | `image/jpeg, application/x-ms-application, image/gif, application/xaml+xml, image/pjpeg, application/x-ms-xbap, application/x-shockwave-flash, application/msword, */*`                                                                                                         | См. запись [IE and the Accept Header](https://docs.microsoft.com/en-us/archive/blogs/ieinternals/ie-and-the-accept-header) в блоге MSDN под названием IEInternals.                                                                                                              |
-| Edge                | `text/html, application/xhtml+xml, image/jxr, */*`                                                                                                                                                                                                                              |                                                                                                                                                                                                                                                                                 |
-| Opera               | `text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/webp, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1`                                                                                                                                             |                                                                                                                                                                                                                                                                                 |
+| Агент пользователя         | Значение                                                                                                                            |
+| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| Firefox 128 and later [1]  | `text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/png,image/svg+xml,*/*;q=0.8`                     |
+| Firefox 92 to 127 [1]      | `text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8`                                             |
+| Firefox 72 to 91 [2]       | `text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8`                                                        |
+| Firefox 66 to 71 [2]       | `text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8`                                                                   |
+| Firefox 65 [2]             | `text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8`                                                        |
+| Firefox 64 and earlier [2] | `text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8`                                                                   |
+| Safari, Chrome             | `text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8`                                             |
+| Safari 5 [3]               | `text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8`                                                                   |
+| Edge                       | `text/html, application/xhtml+xml, image/jxr, */*`                                                                                  |
+| Opera                      | `text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/webp, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1` |
+
+\[1] В качестве значения может быть установлена произвольная строка с помощью настройки `network.http.accept` (`about:config`).
+
+\[2] В качестве значения может быть установлена произвольная строка с помощью настройки [`network.http.accept.default`](https://kb.mozillazine.org/Network.http.accept.default) (`about:config`).
+
+\[3] Улучшение более ранних версий заголовков `Accept`, которое не располагает `image/png` выше `text/html`.
 
 ## Значения для изображений
 
-Если запрашивается изображение, например через HTML-элемент {{HTMLElement("img")}}, агент пользователя часто задаёт уточнённый список подходящих MIME-типов.
+При запросе изображения, например с помощью HTML-элемента {{HTMLElement("img")}}, агент пользователя часто указывает уточнённый список подходящих медиа-типов.
+
+| Агент пользователя             | Значение                                                                   |
+| ------------------------------ | -------------------------------------------------------------------------- |
+| Firefox 128 and later [1]      | `image/avif,image/webp,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5`    |
+| Firefox 92 to 127 [1]          | `image/avif,image/webp,*/*`                                                |
+| Firefox 65 to 91 [1]           | `image/webp,*/*`                                                           |
+| Firefox 47 to 63 [1]           | `*/*`                                                                      |
+| Firefox prior to 47 [1]        | `image/png,image/*;q=0.8,*/*;q=0.5`                                        |
+| Safari (since Mac OS Big Sur)  | `image/webp,image/png,image/svg+xml,image/*;q=0.8,video/*;q=0.8,*/*;q=0.5` |
+| Safari (before Mac OS Big Sur) | `image/png,image/svg+xml,image/*;q=0.8,video/*;q=0.8,*/*;q=0.5`            |
+| Chrome and Edge 121 and later  | `image/avif,image/webp,image/apng,image/*,*/*;q=0.8`                       |
 
-| Агент пользователя                         | Значение                                                                                                                          | Комментарий                                                                                                                                                                                   |
-| ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Firefox                                    | `image/webp,*/*` (начиная с Firefox 65) `*/*` (начиная с Firefox 47) `image/png,image/*;q=0.8,*/*;q=0.5` (в более ранних версиях) | Значение можно изменить с помощью параметра `image.http.accept`. [исходный код](https://hg.mozilla.org/mozilla-central/file/tip/modules/libpref/init/all.js#l4735)                            |
-| Safari                                     | `*/*`                                                                                                                             |                                                                                                                                                                                               |
-| Chrome                                     | `image/webp,image/apng,image/*,*/*;q=0.8`                                                                                         | [исходный код](https://chromium.googlesource.com/chromium/src.git/+/master/content/renderer/loader/web_url_loader_impl.cc#99)                                                                 |
-| Internet Explorer до версии 8 включительно | `*/*`                                                                                                                             | См. запись [IE and the Accept Header](https://docs.microsoft.com/en-us/archive/blogs/ieinternals/ie-and-the-accept-header) в блоге MSDN под названием IEInternals.                            |
-| Internet Explorer 9                        | `image/png,image/svg+xml,image/*;q=0.8, */*;q=0.5`                                                                                | См. запись [Fiddler is better with Internet Explorer 9](https://docs.microsoft.com/en-us/archive/blogs/fiddler/fiddler-and-the-ie9-release-candidate) в блоге MSDN под названием IEInternals. |
+\[1] В качестве значения может быть установлена произвольная строка с помощью параметра `image.http.accept` (_[source](https://searchfox.org/mozilla-central/search?q=image.http.accept)_).
 
 ## Значения для видео
 
-Если запрашивается видео через HTML-элемент {{HTMLElement("video")}}, в большинстве браузеров используется уточнённое значение.
+При запросе видео через HTML-элемент {{HTMLElement("video")}} большинство браузеров используют специфичные значения.
 
-| Агент пользователя                         | Значение                                                                           | Комментарий                                                                                                                                                                           |
-| ------------------------------------------ | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Firefox до версии 3.6                      | _Не поддерживается для элемента {{HTMLElement("video")}}._                         |                                                                                                                                                                                       |
-| Firefox начиная с версии 3.6               | `video/webm,video/ogg,video/*;q=0.9,application/ogg;q=0.7,audio/*;q=0.6,*/*;q=0.5` | См. [страницу ошибки 489071](https://bugzilla.mozilla.org/show_bug.cgi?id=489071). [исходный код](https://hg.mozilla.org/mozilla-central/file/tip/dom/html/HTMLVideoElement.cpp#l136) |
-| Chrome                                     | `*/*`                                                                              | [исходный код](https://chromium.googlesource.com/chromium/src.git/+/master/services/network/loader_util.cc#27)                                                                        |
-| Internet Explorer до версии 8 включительно | _Не поддерживается для элемента {{HTMLElement("video")}}_.                         |                                                                                                                                                                                       |
+| Агент пользователя       | Значение                                                                           |
+| ------------------------ | ---------------------------------------------------------------------------------- |
+| Firefox 3.6 and later    | `video/webm,video/ogg,video/*;q=0.9,application/ogg;q=0.7,audio/*;q=0.6,*/*;q=0.5` |
+| Firefox earlier than 3.6 | _no support for {{HTMLElement("video")}}_                                          |
+| Chrome                   | `*/*`                                                                              |
 
-## Значения для аудиофайлов
+## Значения для аудио
 
-Если запрашивается аудиофайл, например через HTML-элемент {{HTMLElement("audio")}}, в большинстве браузеров используется уточнённое значение.
+При запросе аудиофайла, например с помощью HTML-элемента {{HTMLElement("audio")}}, некоторые браузеры используют специфичные значения.
 
-| Агент пользователя                         | Значение                                                                                     | Комментарий                                                                                                                                                                          |
-| ------------------------------------------ | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| Firefox начиная с версии 3.6               | `audio/webm,audio/ogg,audio/wav,audio/*;q=0.9,application/ogg;q=0.7,video/*;q=0.6,*/*;q=0.5` | См. [страницу ошибки 489071](https://bugzilla.mozilla.org/show_bug.cgi?id=489071). [исходный код](https://hg.mozilla.org/mozilla-central/file/tip/dom/html/HTMLAudioElement.cpp#l81) |
-| Safari, Chrome                             | `*/*`                                                                                        | [исходный код](https://chromium.googlesource.com/chromium/src.git/+/master/services/network/loader_util.cc#27)                                                                       |
-| Internet Explorer до версии 8 включительно | _Не поддерживается для элемента {{HTMLElement("audio")}}._                                   |                                                                                                                                                                                      |
-| Internet Explorer 9                        | ?                                                                                            |                                                                                                                                                                                      |
+| Агент пользователя        | Значение                                                                                     |
+| ------------------------- | -------------------------------------------------------------------------------------------- |
+| Firefox 3.6 and later [1] | `audio/webm,audio/ogg,audio/wav,audio/*;q=0.9,application/ogg;q=0.7,video/*;q=0.6,*/*;q=0.5` |
+| Safari, Chrome            | `*/*`                                                                                        |
+
+\[1] Смотрите [ошибку 489071](https://bugzil.la/489071).
 
 ## Значения для скриптов
 
-Если запрашивается скрипт, например через HTML-элемент {{HTMLElement("script")}}, в некоторых браузерах используется уточнённое значение.
+При запросе скрипта, например с помощью HTML-элемента {{HTMLElement("script")}}, некоторые браузеры используют специфичные значения.
+
+| Агент пользователя | Значение |
+| ------------------ | -------- |
+| Firefox [1]        | `*/*`    |
+| Safari, Chrome     | `*/*`    |
 
-| Агент пользователя                         | Значение                            | Комментарий                                                                                                                                                                                   |
-| ------------------------------------------ | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Firefox                                    | `*/*`                               | См. [страницу ошибки 170789](https://bugzilla.mozilla.org/show_bug.cgi?id=170789).                                                                                                            |
-| Safari, Chrome                             | `*/*`                               | [исходный код](https://chromium.googlesource.com/chromium/src.git/+/master/services/network/loader_util.cc#27)                                                                                |
-| Internet Explorer до версии 8 включительно | `*/*`                               | См. запись [IE and the Accept Header](https://docs.microsoft.com/en-us/archive/blogs/ieinternals/ie-and-the-accept-header) в блоге MSDN под названием IEInternals.                            |
-| Internet Explorer 9                        | `application/javascript, */*;q=0.8` | См. запись [Fiddler is better with Internet Explorer 9](https://docs.microsoft.com/en-us/archive/blogs/fiddler/fiddler-and-the-ie9-release-candidate) в блоге MSDN под названием IEInternals. |
+\[1] Смотрите [ошибку 170789](https://bugzil.la/170789).
 
 ## Значения для таблиц стилей CSS
 
-Если запрашивается таблица стилей CSS через HTML-элемент ``, в большинстве браузеров используется уточнённое значение.
+При запросе таблицы стилей CSS с помощью HTML-элемента `` большинство браузеров используют специфичные значения.
+
+| Агент пользователя | Значение                                                                                                                            |
+| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------- |
+| Firefox 4 [1]      | `text/css,*/*;q=0.1`                                                                                                                |
+| Safari, Chrome     | `text/css,*/*;q=0.1`                                                                                                                |
+| Opera 11.10        | `text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/webp, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1` |
+| Konqueror 4.6      | `text/css,*/*;q=0.1`                                                                                                                |
 
-| Агент пользователя                         | Значение                                                                                                                            | Комментарий                                                                                                                                                                                   |
-| ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Firefox 4                                  | `text/css,*/*;q=0.1`                                                                                                                | См. [страницу ошибки 170789](https://bugzilla.mozilla.org/show_bug.cgi?id=170789). [исходный код](https://hg.mozilla.org/mozilla-central/file/tip/layout/style/Loader.cpp#l1548)              |
-| Internet Explorer до версии 8 включительно | `*/*`                                                                                                                               | См. запись [IE and the Accept Header](https://docs.microsoft.com/en-us/archive/blogs/ieinternals/ie-and-the-accept-header) в блоге MSDN под названием IEInternals.                            |
-| Internet Explorer 9                        | `text/css`                                                                                                                          | См. запись [Fiddler is better with Internet Explorer 9](https://docs.microsoft.com/en-us/archive/blogs/fiddler/fiddler-and-the-ie9-release-candidate) в блоге MSDN под названием IEInternals. |
-| Safari, Chrome                             | `text/css,*/*;q=0.1`                                                                                                                | [исходный код](https://chromium.googlesource.com/chromium/src.git/+/master/content/renderer/loader/web_url_loader_impl.cc#98)                                                                 |
-| Opera 11.10                                | `text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/webp, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1` |                                                                                                                                                                                               |
-| Konqueror 4.6                              | `text/css,*/*;q=0.1`                                                                                                                |                                                                                                                                                                                               |
+\[1] Смотрите [ошибку 170789](https://bugzil.la/170789).

From 6150e0dbd8d69b8438f2e1fe2a1da950a68e5bc8 Mon Sep 17 00:00:00 2001
From: NekoCharm <34984380+AlPha5130@users.noreply.github.com>
Date: Fri, 12 Jul 2024 11:34:22 +0800
Subject: [PATCH 178/698] [zh-CN]: update `import.meta` (#22357)

---
 .../reference/operators/import.meta/index.md  | 80 ++++++++++++-------
 1 file changed, 49 insertions(+), 31 deletions(-)

diff --git a/files/zh-cn/web/javascript/reference/operators/import.meta/index.md b/files/zh-cn/web/javascript/reference/operators/import.meta/index.md
index b4e7826621d658..25fa790515c0ba 100644
--- a/files/zh-cn/web/javascript/reference/operators/import.meta/index.md
+++ b/files/zh-cn/web/javascript/reference/operators/import.meta/index.md
@@ -1,70 +1,88 @@
 ---
 title: import.meta
 slug: Web/JavaScript/Reference/Operators/import.meta
+l10n:
+  sourceCommit: 4f86aad2b0b66c0d2041354ec81400c574ab56ca
 ---
 
-{{JSSidebar("Statements")}}
+{{JSSidebar("Operators")}}
 
-`import.meta`是一个给 JavaScript 模块暴露特定上下文的元数据属性的对象。它包含了这个模块的信息，比如说这个模块的 URL。
+**`import.meta`** 元属性将特定上下文的元数据暴露给 JavaScript 模块。它包含了这个模块的信息，例如这个模块的 URL。
 
 ## 语法
 
-```plain
+```js-nolint
 import.meta
 ```
 
-## 描述
-
-`import.meta`对象由一个关键字`"import"`,一个点符号和一个`meta`属性名组成。通常情况下`"import."`是作为一个属性访问的上下文，但是在这里`"import"`不是一个真正的对象。
-
-`import.meta`对象是由 ECMAScript 实现的，它带有一个{{jsxref("null")}}的原型对象。这个对象可以扩展，并且它的属性都是可写，可配置和可枚举的。
+### 值
 
-## 示例
+`import.meta` 是一个宿主环境创建的可扩展的 [`null` 原型](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object#null_原型对象)对象，其所有属性均可写、可配置、可枚举。规范没有在对象上明确定义任何属性，但是宿主环境通常会定义以下属性：
 
-这里有一个 `my-module.mjs 模块`
+- `url`
+  - : 到此模块的完整 URL，包括查询参数和片段标识符（在 `?` 和 `#` 之后）。在浏览器中，它是可获取此脚本的 URL（对外部脚本）或者是包含此脚本的文档的 URL（对内联脚本）。在 Node.js 中，它是文件路径（包括 `file://` 协议部分）。
+- [`resolve`](/zh-CN/docs/Web/JavaScript/Reference/Operators/import.meta/resolve)
+  - : 将一个模块的标识符解析为相对于当前模块的 URL。
 
-```html
-
-```
+## 描述
 
-你可以通过 `import.meta` 对象获取这个模块的元数据信息。
+`import.meta` 语法由关键字 `import`、一个点符号和 `meta` 标识符组成。因为 `import` 是[保留字](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#保留字)而不是标识符，其并不是[属性访问器](/zh-CN/docs/Web/JavaScript/Reference/Operators/Property_accessors)而是特殊的表达式语法。
 
-```js
-console.log(import.meta); // { url: "file:///home/user/my-module.mjs" }
-```
+`import.meta` 元属性在 JavaScript 模块中可用；在模块之外（包括在模块中[直接调用 `eval()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/eval#直接和间接_eval)）使用 `import.meta` 是语法错误。
 
-它返回一个带有`url`属性的对象，指明模块的基本 URL。也可以是外部脚本的 URL，还可以是内联脚本所属文档的 URL。
+## 示例
 
-注意，url 也可能包含参数或者哈希（比如后缀`?`或`#`）
+### 传递查询参数
 
-以下面的 HTML 为例：
+在 `import` 声明中使用查询参数允许为特定模块传递参数，可作为应用程序内从 [`window.location`](/zh-CN/docs/Web/API/Window/location)（或在 Node.js 中从 `process.env`）读取参数的补充方式。例如下面的 HTML：
 
-```plain
+```html
 
 ```
 
-...下面的 JavaScript 会打印`someURLInfo`这个参数：
+`index.mjs` 模块可以通过 `import.meta` 获取 `someURLInfo` 参数：
 
-```plain
+```js
 // index.mjs
-new URL(import.meta.url).searchParams.get('someURLInfo'); // 5
+new URL(import.meta.url).searchParams.get("someURLInfo"); // 5
 ```
 
 在脚本中引入别的脚本同样生效：
 
-```plain
+```js
 // index.mjs
-import './index2.mjs?someURLInfo=5';
+import "./index2.mjs?someURLInfo=5";
 
 // index2.mjs
-new URL(import.meta.url).searchParams.get('someURLInfo'); // 5
+new URL(import.meta.url).searchParams.get("someURLInfo"); // 5
+```
+
+Node.js 中 ES 模块的实现支持在解析模块的标识符中含有查询参数和片段标识符，如上述示例所示。然而，从命令行指定模块标识符时无法使用查询参数和片段标识符（例如 `node index.mjs?someURLInfo=5`），因为命令行的入口点使用了类似于 CommonJS 的解析模式，将整个路径视为文件而非 URL。要将参数传递给入口点模块，需要改用命令行参数，并从 `precess.argv` 读取（如 `node index.mjs --someURLInfo=5`）。
+
+### 相对当前文件解析文件路径
+
+在 Node.js 的 CommonJS 模块中，有专门的 `__dirname` 变量，值为包含当前文件的文件夹的绝对路径，可以用来解析相对路径。但是，ES 模块除了 `import.meta` 之外没有上下文变量。因此，要解析相对路径的文件，可以使用 `import.meta.url`。注意这个属性使用的是 URL 而非文件系统的路径。
+
+之前（CommonJS）：
+
+```js
+const fs = require("fs/promises");
+const path = require("path");
+
+const filePath = path.join(__dirname, "someFile.txt");
+fs.readFile(filePath, "utf8").then(console.log);
 ```
 
-虽然在上述例子中，Node.js 允许携带参数（或哈希），但以 Node 14.1.0 为例，使用`node --experimental-modules index.mjs?someURLInfo=5` 执行脚本，查询 URL 参数将会报错（该环境下`index.mjs?someURLInfo=5` 被视作一个文件而不是 URL）
+之后（ES 模块）：
 
-像这种特定于文件的参数传递可能是对应用范围内`location.href`（ps: 通过在 HTML 路径添加参数或哈希）（而在 Node.js 中是`process.env`）的补充
+```js
+import fs from "node:fs/promises";
+
+const fileURL = new URL("./someFile.txt", import.meta.url);
+fs.readFile(fileURL, "utf8").then(console.log);
+```
 
 ## 规范
 
@@ -76,5 +94,5 @@ new URL(import.meta.url).searchParams.get('someURLInfo'); // 5
 
 ## 参见
 
-- [import](/zh-CN/docs/Web/JavaScript/Reference/Statements/import)
+- [`import`](/zh-CN/docs/Web/JavaScript/Reference/Statements/import)
 - [`export`](/zh-CN/docs/Web/JavaScript/Reference/Statements/export)

From 11b719eca36ed33549187131a3d2ba9bf18c36ba Mon Sep 17 00:00:00 2001
From: Hoarfroster 
Date: Fri, 12 Jul 2024 14:21:55 +0800
Subject: [PATCH 179/698] zh-CN: update Glossary/XHTML (#22243)

---
 files/zh-cn/glossary/xhtml/index.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/files/zh-cn/glossary/xhtml/index.md b/files/zh-cn/glossary/xhtml/index.md
index e402a4bdfb5180..317f725b3692ad 100644
--- a/files/zh-cn/glossary/xhtml/index.md
+++ b/files/zh-cn/glossary/xhtml/index.md
@@ -1,11 +1,13 @@
 ---
 title: XHTML
 slug: Glossary/XHTML
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
 {{GlossarySidebar}}
 
-**XHTML**（eXtensible HyperText Markup Language，可扩展超文本标记语言）是在历史上被用来描述 [HTML](/zh-CN/docs/Web/HTML)文档的术语，这些文档是按照 {{Glossary("XML")}} 语法规则编写的。
+**XHTML**（可扩展超文本标记语言）是曾经被用来描述按照 {{Glossary("XML")}} 语法规则编写的 [HTML](/zh-CN/docs/Web/HTML) 文档的术语。
 
 下面的例子显示了一个 HTML 文档和相应的“XHTML”文档，以及应当搭配使用的 {{Glossary("HTTP")}} {{HTTPHeader("Content-Type")}} 标头。
 

From 68c69f1904416d82d1015bde043695978614be7c Mon Sep 17 00:00:00 2001
From: Hoarfroster 
Date: Fri, 12 Jul 2024 14:26:19 +0800
Subject: [PATCH 180/698] zh-CN: update Glossary/Unix_time (#22267)

---
 files/zh-cn/glossary/unix_time/index.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/files/zh-cn/glossary/unix_time/index.md b/files/zh-cn/glossary/unix_time/index.md
index 00b94b6648cde2..705388e894ae0e 100644
--- a/files/zh-cn/glossary/unix_time/index.md
+++ b/files/zh-cn/glossary/unix_time/index.md
@@ -1,13 +1,15 @@
 ---
 title: Unix 时间
 slug: Glossary/Unix_time
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
 ---
 
 {{GlossarySidebar}}
 
-Unix 时间是一种表示时间戳的方法，通常定义为自 Unix 纪元（UTC 时间 1970 年 1 月 1 日午夜）开始以来的总秒数，不考虑闰秒。
+Unix 时间是一种表示时间戳的方法，通常定义为自 Unix 纪元（UTC 时间 1970 年 1 月 1 日午夜）经过的总秒数（不考虑闰秒）。
 
-在 web 平台上，Unix 时间用于时间戳，并以自 Unix 纪元开始以来的总毫秒数给出。
+在 Web 平台上，Unix 时间用于时间戳，并以自 Unix 纪元开始以来的总毫秒数给出。
 
 ## 参见
 

From c688c431136c7292bfa504b691c70a5c698ff9a6 Mon Sep 17 00:00:00 2001
From: Shintaro Mukai 
Date: Fri, 12 Jul 2024 15:50:22 +0900
Subject: [PATCH 181/698] =?UTF-8?q?[ja]=20adhere=20to=E3=81=AE=E8=AA=A4?=
 =?UTF-8?q?=E8=A8=B3=E3=81=AE=E4=BF=AE=E6=AD=A3=20(#22157)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* adhere toの誤訳の修正

「adhere to」を「吸着」と訳しているが、この文脈では「遵守」とするのが適切に思われる。

* Update files/ja/web/html/element/input/date/index.md

Co-authored-by: Masahiro FUJIMOTO 

---------

Co-authored-by: Masahiro FUJIMOTO 
---
 files/ja/web/html/element/input/date/index.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/files/ja/web/html/element/input/date/index.md b/files/ja/web/html/element/input/date/index.md
index 04e8aafeff13a9..ad037b85859a54 100644
--- a/files/ja/web/html/element/input/date/index.md
+++ b/files/ja/web/html/element/input/date/index.md
@@ -58,11 +58,11 @@ console.log(dateControl.valueAsNumber); // 1496275200000 と JavaScript タイ
 
 ### step
 
-`step` 属性は値を吸着する粒度を指定する数値、または後述する特殊な値 `any` です。刻みの基準値（指定されていれば [`min`](#min)、そうでなければ [`value`](/ja/docs/Web/HTML/Element/input#value)、どちらも提供されていなければ適切な既定値）に等しい値のみが妥当となります。
+`step` 属性は値が遵守する粒度を指定する数値、または後述する特殊な値 `any` です。刻みの基準値（指定されていれば [`min`](#min)、そうでなければ [`value`](/ja/docs/Web/HTML/Element/input#value)、どちらも提供されていなければ適切な既定値）に等しい値のみが有効となります。
 
-文字列値の `any` は刻みがなく、どの値でも許可されることを意味します（[`min`](#min) や [`max`](#max) など、他の制約には制限されます）。
+文字列値の `any` は刻みがないことを意味し、（[`min`](#min) や [`max`](#max) のようなほかの制約を除けば）どの値でも許可されます。
 
-> **メモ:** ユーザーがデータを入力したときには刻みの設定には吸着せず、{{Glossary("user agent", "ユーザーエージェント")}}は直近の妥当な値、同じ距離の値の選択肢が 2 つあった場合は、正の方向の推奨値に丸められます。
+> **メモ:** ユーザーによって入力されたデータが step 設定に従っていない場合、{{Glossary("user agent", "ユーザーエージェント")}}は最も近い有効な値に丸める可能性があり、同じ距離の値が 2 つあった場合は、正の方向の値を優先します。
 
 `date` 入力欄では、 `step` の値は日単位で指定します。また、 86,400,000 に `step` を乗じた値に等しいミリ秒数として扱われます（数値はミリ秒単位であるため）。 `step` の既定値は `1` であり、 1 日を表します。
 

From be970aa6182313de16aeb8fc63dbb88e5aa561db Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Mon, 8 Jul 2024 00:32:43 +0900
Subject: [PATCH 182/698] =?UTF-8?q?2023/07/18=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

---
 .../tutorial/optimizing_canvas/index.md       | 43 ++++++++++---------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/files/ja/web/api/canvas_api/tutorial/optimizing_canvas/index.md b/files/ja/web/api/canvas_api/tutorial/optimizing_canvas/index.md
index 5be108ca4f1b52..f0d65d91d50046 100644
--- a/files/ja/web/api/canvas_api/tutorial/optimizing_canvas/index.md
+++ b/files/ja/web/api/canvas_api/tutorial/optimizing_canvas/index.md
@@ -1,11 +1,13 @@
 ---
 title: キャンバスの最適化
 slug: Web/API/Canvas_API/Tutorial/Optimizing_canvas
+l10n:
+  sourceCommit: 76717f752447b6eef25bf29c12272e407ee5cb6b
 ---
 
 {{DefaultAPISidebar("Canvas API")}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Finale")}}
 
-{{HTMLElement("canvas")}} 要素は、ウェブで二次元グラフィックを描画するためにもっとも広く使用されているツールのひとつです。しかし、ウェブサイトやアプリがキャンバス API の限界付近まで使用するようになって、パフォーマンスが悪化するようになりました。この記事では、キャンバス要素の使用を最適化して、グラフィックを確実に改善するための提案を行います。
+{{HTMLElement("canvas")}} 要素は、ウェブで 2 次元グラフィックを描画するためにもっとも広く使用されているツールのひとつです。しかし、ウェブサイトやアプリがキャンバス API の限界付近まで使用するようになって、パフォーマンスが悪化するようになりました。この記事では、キャンバス要素の使用を最適化して、グラフィックを確実に改善するための提案を行います。
 
 ## パフォーマンスに関する TIPS
 
@@ -79,17 +81,17 @@ ctx.drawImage(myImage, 0.3, 0.5);
 
 ### CSS 座標変換を使用してキャンバスを拡大縮小する
 
-[CSS 座標変換](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)は、 GPU を使用しますのでより高速です。もっともよいのは拡大縮小しないことですが、そうでなければ大きなキャンバスを縮小するよりも小さなキャンバスを拡大したほうが良好です。
+[CSS 座標変換](/ja/docs/Web/CSS/CSS_transforms/Using_CSS_transforms)は、 GPU を使用しますのでより高速です。もっともよいのは拡大縮小しないことですが、そうでなければ大きなキャンバスを縮小するよりも小さなキャンバスを拡大したほうが良好です。
 
 ```js
-var scaleX = window.innerWidth / canvas.width;
-var scaleY = window.innerHeight / canvas.height;
+const scaleX = window.innerWidth / canvas.width;
+const scaleY = window.innerHeight / canvas.height;
 
-var scaleToFit = Math.min(scaleX, scaleY);
-var scaleToCover = Math.max(scaleX, scaleY);
+const scaleToFit = Math.min(scaleX, scaleY);
+const scaleToCover = Math.max(scaleX, scaleY);
 
-stage.style.transformOrigin = "0 0"; //scale from top left
-stage.style.transform = "scale(" + scaleToFit + ")";
+stage.style.transformOrigin = "0 0"; // 左上から拡大
+stage.style.transform = `scale(${scaleToFit})`;
 ```
 
 ### 透過をやめる
@@ -97,28 +99,28 @@ stage.style.transform = "scale(" + scaleToFit + ")";
 アプリケーションがキャンバスを使用していて背後のものを透過させる必要がない場合は、 {{domxref("HTMLCanvasElement.getContext()")}} で描画コンテキストを生成する際に `alpha` オプションを `false` に設定しましょう。この情報を使用してブラウザーが描画を最適化する可能性があります。
 
 ```js
-var ctx = canvas.getContext("2d", { alpha: false });
+const ctx = canvas.getContext("2d", { alpha: false });
 ```
 
-### 高解像度のディスプレイでの拡大縮小
+### 高解像度のディスプレイでの変倍
 
-高解像度のディスプレイでは、キャンバスのアイテムがぼやけて見えることがあります。多くの解決策がありますが、まず簡単な方法は、キャンバスの属性、スタイル、およびコンテキストのスケールを使用してキャンバスのサイズを同時に拡大/縮小することです。
+高解像度のディスプレイでは、キャンバスのアイテムがぼやけて見えることがあります。多くの解決策がありますが、まず簡単な方法は、キャンバスの属性、スタイル、およびコンテキストのスケールを使用してキャンバスのサイズを同時に変倍することです。
 
 ```js
-// Get the DPR and size of the canvas
-var dpr = window.devicePixelRatio;
-var rect = canvas.getBoundingClientRect();
+// DPR とキャンバスの大きさを取得
+const dpr = window.devicePixelRatio;
+const rect = canvas.getBoundingClientRect();
 
-// Set the "actual" size of the canvas
+// キャンバスの「実際の」大きさを設定
 canvas.width = rect.width * dpr;
 canvas.height = rect.height * dpr;
 
-// Scale the context to ensure correct drawing operations
+// 正しい描画操作を保証するためにコンテキストの変倍
 ctx.scale(dpr, dpr);
 
-// Set the "drawn" size of the canvas
-canvas.style.width = rect.width + "px";
-canvas.style.height = rect.height + "px";
+// キャンバスの「描画される」大きさを設定
+canvas.style.width = `${rect.width}px`;
+canvas.style.height = `${rect.height}px`;
 ```
 
 ### その他の TIPS
@@ -129,12 +131,11 @@ canvas.style.height = rect.height + "px";
 - 可能な限り {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} プロパティを避けます。
 - 可能な限り[テキストレンダリング](/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_text)を避けます。
 - キャンバスをクリアーする別の方法を試します ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} 対 {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} 対キャンバスのリサイズ)
-- アニメーションで {{domxref("window.setInterval()")}} の代わりに {{domxref("window.requestAnimationFrame()")}} を使用します。
+- アニメーションで {{domxref("setInterval")}} の代わりに {{domxref("window.requestAnimationFrame()")}} を使用します。
 - 高負荷な物理演算ライブラリーに注意してください。
 
 ## 関連情報
 
-- [Improving HTML5 Canvas Performance – HTML5 Rocks](https://www.html5rocks.com/en/tutorials/canvas/performance/#toc-ref)
 - [Optimizing your JavaScript game for Firefox OS – Mozilla Hacks](https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/)
 
 {{PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Finale")}}

From f65ecd963c79065bb081a83276cd7c48d10e6db8 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Mon, 8 Jul 2024 00:40:05 +0900
Subject: [PATCH 183/698] =?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/canvas_api/index.md          | 22 +++++++++----------
 .../api/canvas_api/tutorial/finale/index.md   | 20 +++++++++--------
 files/ja/web/api/canvas_api/tutorial/index.md |  6 +++--
 3 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/files/ja/web/api/canvas_api/index.md b/files/ja/web/api/canvas_api/index.md
index daae8779334051..b95e1ca78ca08b 100644
--- a/files/ja/web/api/canvas_api/index.md
+++ b/files/ja/web/api/canvas_api/index.md
@@ -1,6 +1,8 @@
 ---
 title: キャンバス API
 slug: Web/API/Canvas_API
+l10n:
+  sourceCommit: e811fc31b67e145c5882e8e3f128d1938c627a51
 ---
 
 {{DefaultAPISidebar("Canvas API")}}
@@ -42,12 +44,11 @@ ctx.fillRect(10, 10, 150, 100);
 - {{domxref("HTMLCanvasElement")}}
 - {{domxref("CanvasRenderingContext2D")}}
 - {{domxref("CanvasGradient")}}
-- {{domxref("CanvasImageSource")}}
 - {{domxref("CanvasPattern")}}
 - {{domxref("ImageBitmap")}}
 - {{domxref("ImageData")}}
 - {{domxref("TextMetrics")}}
-- {{domxref("OffscreenCanvas")}} {{experimental_inline}}
+- {{domxref("OffscreenCanvas")}}
 - {{domxref("Path2D")}} {{experimental_inline}}
 - {{domxref("ImageBitmapRenderingContext")}} {{experimental_inline}}
 
@@ -57,16 +58,14 @@ ctx.fillRect(10, 10, 150, 100);
 
 {{domxref("CanvasCaptureMediaStreamTrack")}} は関連するインターフェイスです。
 
-
ガイドとチュートリアル

+## ガイドとチュートリアル
 
-- [Canvas チュートリアル](/ja/docs/Web/API/Canvas_API/Tutorial)
+- [キャンバスのチュートリアル](/ja/docs/Web/API/Canvas_API/Tutorial)
   - : キャンバス API の基本的な使いかたと高度な機能の両方をカバーする網羅的なチュートリアル。
 - [HTML5 Canvas Deep Dive](https://joshondesign.com/p/books/canvasdeepdive/title.html)
   - : キャンバス API および WebGL の実践的な書籍規模の入門です。
 - [Canvas Handbook](https://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html)
   - : キャンバス API の手軽なリファレンス。
-- [デモ: 簡単な ray-caster](/ja/docs/Web/API/Canvas_API/A_basic_ray-caster)
-  - : キャンバスを用いたレイトレーシングアニメーションのデモです。
 - [キャンバスを使用した動画の操作](/ja/docs/Web/API/Canvas_API/Manipulating_video_using_canvas)
   - : {{HTMLElement("video")}} と {{HTMLElement("canvas")}} を組み合わせて、動画データをリアルタイムに操作します。
 
@@ -77,25 +76,26 @@ ctx.fillRect(10, 10, 150, 100);
 - [EaselJS](https://www.createjs.com/easeljs): ゲームやアート作品、その他の高度なグラフィック操作を容易にする、オープンソースのキャンバスライブラリー
 - [Fabric.js](http://fabricjs.com): SVG のパース機能を持つ、オープンソースのキャンバスライブラリー
 - [heatmap.js](https://www.patrick-wied.at/static/heatmapjs/): キャンバスベースのデータヒートマップを生成するためのオープンソースライブラリー
-- [JavaScript InfoVis Toolkit](https://thejit.org/): 対話的なデータの可視化を実現
-- [Konva.js](https://konvajs.github.io/): デスクトップおよびモバイルアプリケーション向けの 2D キャンバスライブラリー
+- [JavaScript InfoVis Toolkit](https://philogb.github.io/jit/): 対話的なデータの可視化を実現
+- [Konva.js](https://konvajs.org/): デスクトップおよびモバイルアプリケーション向けの 2D キャンバスライブラリー
 - [p5.js](https://p5js.org/): アーティスト、デザイナー、教育者、初心者のためのフル機能を持ったキャンバス描画機能
-- [Paper.js](http://paperjs.org/): HTML5 キャンバス上で動作する、オープンソースのベクターグラフィック向けスクリプトフレームワーク
+- [Paper.js](http://paperjs.org/): HTML キャンバス上で動作する、オープンソースのベクターグラフィック向けスクリプトフレームワーク
 - [Phaser](https://phaser.io/): ブラウザーゲームを強力にするキャンバスと WebGL の軽量、フリーで楽しいオープンソースフレームワーク
 - [Pts.js](https://ptsjs.org): キャンバスと SVG の創造的なコーディングや視覚化のためのライブラリー
 - [Rekapi](https://github.com/jeremyckahn/rekapi): キャンバス用のアニメーションキーフレーム API
 - [Scrawl-canvas](https://scrawl.rikweb.org.uk/): 2D キャンバス要素を作成したり操作したりするためのオープンソースの JavaScript ライブラリーです。
 - [ZIM](https://zimjs.com): 便利でキャンバス上のコンポーネントとコーディングの創造性の制御を提供し、アクセシビリティと数百のカラフルなチュートリアルがあります。
+- [Sprig](https://github.com/hackclub/sprig) は、キャンバスを使用する、初心者に優しいオープンソースのタイルベースのゲーム開発ライブラリです。
 
 > **メモ:** WebGL を使用する 2D および 3D のライブラリーについては [WebGL API](/ja/docs/Web/API/WebGL_API) を参照してください。
 
 ## 仕様書
 
-{{Specifications("html.elements.canvas")}}
+{{Specifications}}
 
 ## ブラウザーの互換性
 
-Mozilla アプリケーションは `` の対応を Gecko 1.8 ([Firefox 1.5](/ja/docs/Mozilla/Firefox/Releases/1.5)) から始めました。この要素はもともと Apple が OS X Dashboard や Safari のために導入したものでした。 Internet Explorer は `` をバージョン 9 から対応しており、それ以前のバージョンの IE では、ページに効率的に `` の対応を追加するために Google の [Explorer Canvas](https://github.com/arv/explorercanvas) プロジェクトによるスクリプトを利用することができます。 Google Chrome や Opera 9 も `` に対応しています。
+{{Compat}}
 
 ## 関連情報
 
diff --git a/files/ja/web/api/canvas_api/tutorial/finale/index.md b/files/ja/web/api/canvas_api/tutorial/finale/index.md
index 57884dd6967e19..949e84af451bfb 100644
--- a/files/ja/web/api/canvas_api/tutorial/finale/index.md
+++ b/files/ja/web/api/canvas_api/tutorial/finale/index.md
@@ -1,21 +1,23 @@
 ---
 title: おわりに
 slug: Web/API/Canvas_API/Tutorial/Finale
+l10n:
+  sourceCommit: b280ea1234452ff553caa466bf532a66ba51db01
 ---
 
 {{DefaultAPISidebar("Canvas API")}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}
 
-おめでとうございます。[キャンバスのチュートリアル](/ja/docs/Web/API/Canvas_API/Tutorial)は終了です。この知識は、ウェブ上で素晴らしい二次元グラフィックを作るのに役立ちます。
+おめでとうございます。[キャンバスのチュートリアル](/ja/docs/Web/API/Canvas_API/Tutorial)は終了です。この知識は、ウェブ上で素晴らしい 2 次元グラフィックを作るのに役立ちます。
 
 ## 他の例とチュートリアル
 
 ここでは様々なデモや、更なるキャンバスについての例を紹介します。
 
-- [Codepen.io](https://codepen.io/search/pens?q=canvas)
+- [Canvas Codepens](https://codepen.io/search/pens?q=canvas)
   - : ブラウザー上のフロントエンド開発者向けのプレイグラウンドとコードエディターです。
-- [HTML5 Canvas Tutorials](https://www.html5canvastutorials.com/)
+- [Canvas Tutorials](https://www.html5canvastutorials.com/)
   - : キャンバス API の例です。
-- [Game development](/ja/docs/Games)
+- [ゲーム開発](/ja/docs/Games)
   - : ゲームは最も人気な活動の一つです。標準に準拠したウェブブラウザーで実行できる、より良くより強力なゲームを開発するための新しい技術が定期的に登場しています。
 
 ## その他の Web API
@@ -23,16 +25,16 @@ slug: Web/API/Canvas_API/Tutorial/Finale
 これらの API は、キャンバスやグラフィックをさらに扱う際に役立つかもしれません。
 
 - [WebGL](/ja/docs/Web/API/WebGL_API)
-  - : 複雑なグラフィックや三次元を含んだレンダリングのための高度な API です。
+  - : 複雑なグラフィックや 3 次元を含んだレンダリングのための高度な API です。
 - [SVG](/ja/docs/Web/SVG)
   - : Scalable Vector Graphics は、画像をベクター（線）と図形の集合で表現することで、描画サイズに関わらず滑らかに拡大縮小できるようにしたものです。
-- [Web Audio](/ja/docs/Web/API/Web_Audio_API)
-  - : Web Audio API は、ウェブ上の音声を制御するための強力で多用途なシステムを提供し、開発者は音声ソースの選択、音声へのエフェクトの追加、音声視覚化の作成、空間効果（パンニングなど）の適用などを行うことができるようになります。
+- [ウェブオーディオ](/ja/docs/Web/API/Web_Audio_API)
+  - : ウェブオーディオ API は、ウェブ上の音声を制御するための強力で多用途なシステムを提供し、開発者は音声ソースの選択、音声へのエフェクトの追加、音声視覚化の作成、空間効果（パンニングなど）の適用などを行うことができるようになります。
 
 ## 質問
 
-- [Stack Overflow](https://stackoverflow.com/questions/tagged/html5-canvas)
-  - : "html5-canvas" とタグ付けされた質問です。
+- [Stack Overflow](https://stackoverflow.com/questions/tagged/canvas)
+  - : "canvas" とタグ付けされた質問です。
 - [Comments about this tutorial – the MDN documentation community](/ja/docs/MDN)
   - : このチュートリアルについて何かコメントや感謝の言葉がありましたら、お気軽にご連絡ください。
 
diff --git a/files/ja/web/api/canvas_api/tutorial/index.md b/files/ja/web/api/canvas_api/tutorial/index.md
index 5c8f1f402a9f6e..3dea48c5320a0f 100644
--- a/files/ja/web/api/canvas_api/tutorial/index.md
+++ b/files/ja/web/api/canvas_api/tutorial/index.md
@@ -1,13 +1,15 @@
 ---
-title: Canvas チュートリアル
+title: キャンバスのチュートリアル
 slug: Web/API/Canvas_API/Tutorial
+l10n:
+  sourceCommit: b280ea1234452ff553caa466bf532a66ba51db01
 ---
 
 {{DefaultAPISidebar("Canvas API")}}
 
 このチュートリアルは、 [**``**](/ja/docs/Web/HTML/Element/canvas) 要素を使用して二次元のグラフィックを描画する方法を、基本から説明します。ここでの例は、キャンバスで何ができるかを明確に示すものであり、独自のコンテンツを作成するためのコードスニペットも提供しています。
 
-`` は [HTML](/ja/docs/Web/HTML) の要素であり、スクリプト（ふつうは [JavaScript](/ja/docs/Glossary/JavaScript)）を使ってグラフィックを描くことができます。これは例えば、グラフを描いたり、写真を合成する、または簡単なアニメーションを（[あまり簡単ではない](/ja/docs/Web/API/Canvas_API/A_basic_ray-caster)ものも）作成したりすることができます。このページにある画像は、このチュートリアルで作成する [**``**](/ja/docs/Web/HTML/Element/canvas) の実装の例を示しています。
+`` は [HTML](/ja/docs/Web/HTML) の要素であり、スクリプト（ふつうは [JavaScript](/ja/docs/Glossary/JavaScript)）を使ってグラフィックを描くことができます。これは例えば、グラフを描いたり、写真を合成したり、簡単なアニメーションを作成したりすることができます。
 
 `` は Apple が macOS Dashboard のために WebKit に初めて導入した後、ブラウザーに実装されました。現在は、あらゆる主要ブラウザーが対応しています。
 

From e05055578c9722846e91bef7a5b8b0627109acb4 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Tue, 9 Jul 2024 00:39:20 +0900
Subject: [PATCH 184/698] =?UTF-8?q?2024/01/31=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/clipboard_api/index.md | 98 ++++++++++++++++++++-----
 1 file changed, 79 insertions(+), 19 deletions(-)

diff --git a/files/ja/web/api/clipboard_api/index.md b/files/ja/web/api/clipboard_api/index.md
index c382aef2208b76..40ddc8e75956b6 100644
--- a/files/ja/web/api/clipboard_api/index.md
+++ b/files/ja/web/api/clipboard_api/index.md
@@ -1,24 +1,96 @@
 ---
 title: クリップボード API
 slug: Web/API/Clipboard_API
+l10n:
+  sourceCommit: aa02c85428e4ebdf2df8a84f97f0a6cabefdf813
 ---
 
 {{DefaultAPISidebar("Clipboard API")}}
 
 **クリップボード API** は、クリップボードのコマンド (切り取り、コピー、貼り付け) に応答する機能や、システムクリップボードの非同期の読み取りや書き込みを行う機能を提供します。
 
+> **メモ:** クリップボードにアクセスするには、非推奨の {{domxref("document.execCommand()")}} メソッドよりもこの API を優先して使用してください。
+
 > **メモ:** この API は[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)では利用できません。（{{domxref("WorkerNavigator")}} に公開されていません）。
 
-この API は、 {{domxref("document.execCommand()")}} を使用したクリップボードへのアクセスを置き換えるように設計されています。
+## 概念と使用法
+
+システムクリップボードは、ブラウザーが動作しているオペレーティングシステムに属するデータバッファーであり、短期間のデータ保存や文書またはアプリケーション間のデータ転送に使用します。
+通常、無名で一時的な[データバッファー](https://ja.wikipedia.org/wiki/バッファ)として実装されており、ペーストバッファーと呼ばれることもあります。環境内のほとんどまたはすべてのプログラムから定義されたプログラミングインターフェイスを通じてアクセス可能です。
+
+クリップボード API を使うと、ユーザーは[安全なコンテキスト](/ja/docs/Web/Security/Secure_Contexts)の中で、[セキュリティに関する考慮事項](#セキュリティの考慮)で指定された条件が成立する限り、テキストや他にも様々な種類のデータをクリップボードにプログラムで読み書きすることができます。
+
+イベントは切り取り ({{domxref("Element/cut_event", "cut")}})、コピー ({{domxref("Element/copy_event", "copy")}})、貼り付け ({{domxref("Element/paste_event", "paste")}}) 操作がクリップボードを変更した結果として発行されます。
+イベントには既定のアクションがあり、例えば `copy` アクションは既定では現在の選択部分をシステムクリップボードにコピーします。
+既定のアクションはイベントハンドラーで上書きすることができます。詳細は各イベントを参照してください。
+
+## インターフェイス
+
+- {{domxref("Clipboard")}} {{securecontext_inline}}
+  - : システムクリップボードに対してテキストやデータを読み書きするインターフェイスを提供します。
+    これは仕様書では「非同期クリップボード API」と呼ばれています。
+- {{domxref("ClipboardEvent")}}
+  - : クリップボードの変更に関する情報を提供するイベント、すなわち {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/copy_event", "copy")}}, {{domxref("Element/paste_event", "paste")}} イベントを表します。これは仕様書では「クリップボードイベント API」と呼ばれています。
+- {{domxref("ClipboardItem")}} {{securecontext_inline}}
+  - : データの読み書きの際に使用する単一項目形式を表します。
+
+### 他のインターフェイスへの拡張
+
+クリップボード API は以下の API を拡張し、掲載されている機能を追加しています。
+
+- {{domxref("Navigator.clipboard")}} {{readonlyinline}} {{securecontext_inline}}
+  - : システムクリップボードへの読み書きアクセスを提供する {{domxref("Clipboard")}} オブジェクトを返します。
+- [`Element: copy`](/ja/docs/Web/API/Element/copy_event) イベント
+  - : ユーザーがコピー操作を行うたびに発行されるイベントです。
+- [`Element: cut`](/ja/docs/Web/API/Element/cut_event) イベント
+  - : ユーザーが切り取り操作を行うたびに発行されるイベントです。
+- [`Element: paste`](/ja/docs/Web/API/Element/paste_event) イベント
+  - : ユーザーが貼り付け操作を行うたびに発行されるイベントです。
+
+
+
+## セキュリティの考慮
+
+クリップボード API は、ユーザーが[安全なコンテキスト](/ja/docs/Web/Security/Secure_Contexts)のシステムクリップボードとの間で、テキストや他の種類のデータをプログラムで読み書きすることをできるようにします。
 
-> **メモ:** **クリップボード**は、短期間のデータ保存やデータ転送に使用されるデータバッファで、文書間やアプリケーション間で使用することができます。
-> 通常、無名で一時的な[データバッファー](https://ja.wikipedia.org/wiki/バッファ)として実装されており、ペーストバッファーと呼ばれることもあります。環境内のほとんどまたはすべてのプログラムから定義された[プログラミングインターフェイス](https://ja.wikipedia.org/wiki/アプリケーションプログラミングインタフェース)を通じてアクセス可能です。
->
-> 一般的なアプリケーションでは、これらのインターフェイスに対して、[キーバインド](https://ja.wikipedia.org/wiki/ショートカットキー)、[メニュー選択]()などの[ユーザー入力](https://ja.wikipedia.org/wiki/入力)を対応付けることでクリップボード機能にアクセスします。
+この仕様では、クリップボードから読み取るために、ユーザーが最近ページを操作したことが要求されます（[単発のユーザーの活性化](/ja/docs/Web/Security/User_activation)が必要です）。
+読み取り処理がブラウザーやOSの「貼り付け要素」（コンテキストメニューなど）とのユーザー対話によって発生した場合、ブラウザーはユーザーに確認を促すことが期待されます。
+クリップボードに書き込む場合、詳細度はページが[権限 API](/ja/docs/Web/API/Permissions_API) の `clipboard-write` 権限を持つことを期待し、ブラウザーは[単発のユーザー活性化](/ja/docs/Web/Security/User_activation)も要求されるかもしれません。
+ブラウザーはクリップボードにアクセスするメソッドを使用する際に、さらに制限を加えるかもしれません。
+
+ブラウザーの実装は仕様から乖離しています。
+その違いは[ブラウザーの互換性](#ブラウザーの互換性)の節にまとめられており、現在の状態の概要は下記の通りです。
+
+Chromium 系のブラウザー:
+
+- 読み取りには[権限 API](/ja/docs/Web/API/Permissions_API) の `clipboard-read` 権限が要求されます。
+  単発の活性化は要求されません。
+- 書き込みには `clipboard-read` 権限または単発の活性化が要求されます。
+  権限が付与された場合、その権限は維持され、それ以上の単発の活性化は要求されません。
+- クリップボードにアクセスする {{HTMLElement("iframe")}} 要素には、HTTP の[Permissions-Policy](/ja/docs/Web/HTTP/Headers/Permissions-Policy) の `clipboard-read` と `clipboard-write` の権限を許可しなければなりません。
+- ブラウザーや OS の「貼り付け要素」によって読み取り処理が発生した場合、持続的な貼り付けプロンプトは表示されません。
+
+Firefox および Safari:
+
+- 読み書きには単発の活性化が要求されます。
+- 同じオリジンのクリップボードのコンテンツを読み込む場合、paste-prompt は抑制されますが、オリジン間のコンテンツは抑制されません。
+- `clipboard-read` と `clipboard-write` 権限は Firefox や Safari では対応していません（対応する予定もありません）。
+
+Firefox の [Web Extensions](/ja/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard):
+
+- テキストの読み込みは、Web Extension [`clipboardRead`](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#clipboardread) 権限を持つ拡張機能でのみ利用できます。
+  その権限があれば、拡張機能は単発の活性化や貼り付けのプロンプトを要求されません。
+- テキストの書き込みは、安全なコンテキストと単発の活性化で利用できます。
+  Web Extension の [`clipboardWrite`](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#clipboardwrite) 権限では、単発の活性化は要求されません。
+
+## 例
 
 ## クリップボードへのアクセス
 
-`Clipboard` オブジェクトをインスタンス化して生成するのではなく、グローバル変数の {{domxref("Navigator.clipboard")}} を通してシステムクリップボードにアクセスすることができます。
+システムクリップボードには、グローバルの {{domxref("Navigator.clipboard")}} を通してアクセスします。
+
+このスニペットはクリップボードからテキストを読み取り、最初に見つかった `editor` クラスを持つ要素に追加します。
+{{domxref("Clipboard.readText", "readText()")}} (および場合によっては {{domxref("Clipboard.read", "read()")}}) はクリップボードにテキストがないときには空文字列を返すので、このコードは安全です。
 
 ```js
 navigator.clipboard
@@ -28,17 +100,6 @@ navigator.clipboard
   );
 ```
 
-このスニペットはクリップボードからテキストを読み取り、最初に見つかった `editor` クラスを持つ要素に追加します。 {{domxref("Clipboard.readText", "readText()")}} (および場合によっては {{domxref("Clipboard.read", "read()")}}) はクリップボードにテキストがないときには空文字列を返すので、このコードは安全です。
-
-## インターフェイス
-
-- {{domxref("Clipboard")}} {{securecontext_inline}}
-  - : システムクリップボードに対してテキストやデータを読み書きするインターフェイスを提供します。これは仕様書では「非同期クリップボード API」と呼ばれています。
-- {{domxref("ClipboardEvent")}} {{securecontext_inline}}
-  - : クリップボードの変更に関する情報を提供するイベント、すなわち {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/copy_event", "copy")}}, {{domxref("Element/paste_event", "paste")}} イベントを表します。これは仕様書では「クリップボードイベント API」と呼ばれています。
-- {{domxref("ClipboardItem")}} {{securecontext_inline}}
-  - : データの読み書きの際に使用する単一項目形式を表します。
-
 ## 仕様書
 
 {{Specifications}}
@@ -49,5 +110,4 @@ navigator.clipboard
 
 ## 関連情報
 
-- [Async Clipboard API demo on Glitch](https://async-clipboard-api.glitch.me/)
-- [Image support for Async Clipboard article](https://web.dev/async-clipboard/)
+- [Image support for Async Clipboard article](https://web.dev/articles/async-clipboard)

From 1da45eaf26d49ad8d454a46db1d709ef0080fcc9 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Tue, 9 Jul 2024 00:49:55 +0900
Subject: [PATCH 185/698] =?UTF-8?q?2024/03/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/closeevent/code/index.md | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/files/ja/web/api/closeevent/code/index.md b/files/ja/web/api/closeevent/code/index.md
index e8dcb32c488c63..e4aff9fb6fba51 100644
--- a/files/ja/web/api/closeevent/code/index.md
+++ b/files/ja/web/api/closeevent/code/index.md
@@ -1,8 +1,9 @@
 ---
 title: "CloseEvent: code プロパティ"
+short-title: code
 slug: Web/API/CloseEvent/code
 l10n:
-  sourceCommit: d76defab4ca13261e9de81ae1df125345f847b0a
+  sourceCommit: 829db137a01feb14af7beaec178a3ea0118b4777
 ---
 
 {{APIRef("Websockets API")}}
@@ -52,7 +53,7 @@ l10n:
       
@@ -113,14 +114,14 @@ l10n:
     
-      
+      
-      
+      

From 380cf1849e2ad0d6ab878d5a67c89d2830cb91d0 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Tue, 9 Jul 2024 01:07:12 +0900
Subject: [PATCH 186/698] =?UTF-8?q?2024/07/02=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/console/index.md | 71 ++++++++++++++++++++-----------
 1 file changed, 45 insertions(+), 26 deletions(-)

diff --git a/files/ja/web/api/console/index.md b/files/ja/web/api/console/index.md
index 92feb9bb55f538..8325135894f44f 100644
--- a/files/ja/web/api/console/index.md
+++ b/files/ja/web/api/console/index.md
@@ -2,12 +2,14 @@
 title: console
 slug: Web/API/console
 l10n:
-  sourceCommit: 2ceee44bc3cc48e2a005734761a1abed7abdf57b
+  sourceCommit: f9f48866f02963e752717310b76a70d5bdaf554c
 ---
 
 {{APIRef("Console API")}} {{AvailableInWorkers}}
 
-**`console`** オブジェクトは、ブラウザーのデバッグコンソール（例えば Firefox の[ウェブコンソール](https://firefox-source-docs.mozilla.org/devtools-user/web_console/index.html)）へのアクセスを提供します。このオブジェクトの詳細な動作はブラウザーによって異なりますが、一般的に共通の機能セットが提供されています。
+**`console`** オブジェクトは、ブラウザーのデバッグコンソール（例えば Firefox の[ウェブコンソール](https://firefox-source-docs.mozilla.org/devtools-user/web_console/index.html)）へのアクセスを提供します。
+
+コンソール API の実装はランタイムによって異なる場合があります。具体的な例として、いくつかのコンソールメソッドはオンラインエディターや IDE によっては動作が異なったり、まったく動作しなかったりすることがあります。この記事で記述された動作を確認するには、ブラウザーの開発者ツールでメソッドを試してください。
 
 `console` オブジェクトには任意のグローバルオブジェクトからアクセスできます。閲覧スコープの {{domxref("Window")}} や、特定の種類のワーカーを表す {{domxref("WorkerGlobalScope")}} の console プロパティを通してアクセスできます。これは {{domxref("Window.console")}} として公開されていますが、単に `console` として参照できます。
 
@@ -15,10 +17,6 @@ l10n:
 console.log("Failed to open the specified link");
 ```
 
-このページでは、 `console` オブジェクトで使用できる[メソッド](#メソッド)やいくらかの[使用例](#使用例)を提供します。
-
-> **メモ:** 一部のオンライン IDE やエディターでは、コンソール API の実装がブラウザーと異なる場合があります。その結果、コンソール API の特定の機能（タイマーメソッドなど）がオンライン IDE やエディターのコンソールに出力されないことがあります。このドキュメント内のようにログを表示させるためには、常にブラウザーの開発者ツールコンソールを開いてください。
-
 ## メソッド
 
 - {{domxref("console/assert_static", "console.assert()")}}
@@ -30,13 +28,13 @@ console.log("Failed to open the specified link");
 - {{domxref("console/countReset_static", "console.countReset()")}}
   - : 指定されたラベルのカウンターの値をリセットします。
 - {{domxref("console/debug_static", "console.debug()")}}
-  - : ログレベルが `debug` のコンソールへメッセージを出力します。
+  - : コンソールへデバッグログレベルでメッセージを出力します。
 - {{domxref("console/dir_static", "console.dir()")}}
   - : 指定した JavaScript オブジェクトのプロパティの、対話型リストを表示します。このリスト内の三角印をクリックすると、子オブジェクトの内容を調査して表示させることができます。
 - {{domxref("console/dirxml_static", "console.dirxml()")}}
   - : 指定したオブジェクトを XML/HTML 要素で表現したものを表示します。表現できない場合は、JavaScript オブジェクトビューを表示します。
 - {{domxref("console/error_static", "console.error()")}}
-  - : エラーメッセージを出力します。このメソッドでは、[文字列置換](#文字列置換の使用)および追加の引数を使用することができます。
+  - : コンソールへエラーログレベルでメッセージを出力します。
 - `console.exception()` {{Non-standard_inline}} {{deprecated_inline}}
   - : `console.error()` の別名です。
 - {{domxref("console/group_static", "console.group()")}}
@@ -46,9 +44,9 @@ console.log("Failed to open the specified link");
 - {{domxref("console/groupEnd_static", "console.groupEnd()")}}
   - : 現在のインライン[グループ](#コンソールでのグループの使用)から抜けます。
 - {{domxref("console/info_static", "console.info()")}}
-  - : メッセージタイプのログ情報を出力します。このメソッドでは、[文字列置換](#文字列置換の使用)および追加の引数を使用することができます。
+  - : コンソールへ情報ログレベルでメッセージを出力します。
 - {{domxref("console/log_static", "console.log()")}}
-  - : 一般タイプのログ情報を出力します。このメソッドでは、[文字列置換](#文字列置換の使用)および追加の引数を使用することができます。
+  - : コンソールへメッセージを出力します。
 - {{domxref("console/profile_static", "console.profile()")}} {{Non-standard_inline}}
   - : ブラウザー内蔵のプロファイラー (例えば [Firefox のパフォーマンスツール](https://firefox-source-docs.mozilla.org/devtools-user/performance/index.html)) を開始します。プロファイルの名称を指定することができます。
 - {{domxref("console/profileEnd_static", "console.profileEnd()")}} {{Non-standard_inline}}
@@ -66,13 +64,13 @@ console.log("Failed to open the specified link");
 - {{domxref("console/trace_static", "console.trace()")}}
   - : [スタックトレース](#スタックトレース)を出力します。
 - {{domxref("console/warn_static", "console.warn()")}}
-  - : 警告メッセージを出力します。このメソッドでは、[文字列置換](#文字列置換の使用)および追加の引数を使用することができます。
+  - : コンソールへ警告ログレベルでメッセージを出力します。
 
 ## 例
 
 ### コンソールへのテキストの出力
 
-コンソールでもっとも頻繁に使用される機能は、テキストやその他のデータをログ出力することです。生成することができる出力のカテゴリーはいくつかあり、{{domxref("console/log_static", "console.log()")}}、{{domxref("console/info_static", "console.info()")}}、{{domxref("console/warn_static", "console.warn()")}}、{{domxref("console/error_static", "console.error()")}}、{{domxref("console/debug_static", "console.debug()")}} の各メソッドを使用します。これらメソッドの出力結果はログ上でそれぞれ異なるスタイルがつけられ、また関心がある種類の出力だけを参照するためにブラウザーが提供するフィルタ機能を使用することもできます。
+コンソールでもっとも頻繁に使用される機能は、テキストやその他のデータをログ出力することです。生成することができる出力のカテゴリーはいくつかあり、{{domxref("console/log_static", "console.log()")}}、{{domxref("console/info_static", "console.info()")}}、{{domxref("console/warn_static", "console.warn()")}}、{{domxref("console/error_static", "console.error()")}}、{{domxref("console/debug_static", "console.debug()")}} の各メソッドを使用します。これらメソッドの出力結果はログ上でそれぞれ異なるスタイルがつけられ、また関心がある種類の出力だけを参照するためにブラウザーが提供するフィルター機能を使用することもできます。
 
 各出力メソッドを使用する方法は 2 つあります。
 
@@ -94,6 +92,28 @@ console.log(someObject);
 {str:"Some text", id:5}
 ```
 
+ブラウザーは、オブジェクトに関する情報を可能な限り表示します。例えば、オブジェクトのプライベートな状態も表示されるかもしれません。DOM 要素や関数のようなある種のオブジェクトは、特別な方法で表示されることもあります。
+
+#### オブジェクトのスナップショット
+
+オブジェクトに関する情報は、遅延して取得されます。これは、ログメッセージはオブジェクトがログ出力された時点ではなく、最初に表示された時点のオブジェクトのコンテンツを表示させるということです。例えば、次のようになります。
+
+```js
+const obj = {};
+console.log(obj);
+obj.prop = 123;
+```
+
+これは `{}` を出力します。しかし、オブジェクトの詳細を展開すると、`prop: 123` と表示されます。
+
+オブジェクトを変更しようとしていて、ログ出力した情報が更新されないようにしたい場合は、ログ出力する前にオブジェクトを[ディープクローン](/ja/docs/Glossary/Deep_copy)することができます。一般的な方法は、{{jsxref("JSON.stringify()")}} してから {{jsxref("JSON.parse()")}} することです。
+
+```js
+console.log(JSON.parse(JSON.stringify(obj)));
+```
+
+ブラウザーで動作する他の選択肢として、[`structuredClone()`](/ja/docs/Web/API/structuredClone) があり、これはさまざまな種類のオブジェクトを複製するのに有効です。
+
 #### 複数のオブジェクトの出力
 
 ログ出力のメソッドを呼び出すときにオブジェクトを羅列することで、複数のオブジェクトを出力することもできます。
@@ -112,18 +132,22 @@ My first car was a Dodge Charger. The object is: {str:"Some text", id:5}
 
 #### 文字列置換の使用
 
-文字列を取る `console` オブジェクトのメソッドの一つ (`log()` など) に文字列を渡すと、以下の置換文字列を使用することができます。
+ログ出力メソッドの最初の引数は、0 個以上の置換文字列の入った文字列とすることができます。各置換文字列は、対応する引数値で置き換えられます。
 
-- `%o` または `%O`
-  - : JavaScript オブジェクトを出力します。オブジェクト名をクリックすると、調査ツールで詳細情報を表示します。
+- `%o`
+  - : JavaScript オブジェクトを「最適に有益な書式設定」スタイルで出力します。例えば、DOM 要素は要素インスペクターに現れるのと同じ方法で表示されます。
+- `%O`
+  - : 「一般的な JavaScript オブジェクト書式化」スタイルで、通常は展開されたツリーの形で JavaScript オブジェクトを出力します。これは {{domxref("console/dir_static", "console.dir()")}} に似ています。
 - `%d` または `%i`
-  - : 整数値を出力します。数値の書式設定をサポートしています。例えば `console.log("Foo %.2d", 1.1)` は、先頭に 0 を補った有効数字 2 桁の数値として `Foo 01` のように出力します。
+  - : 整数値を出力します。
 - `%s`
   - : 文字列を出力します。
 - `%f`
-  - : 浮動小数点数値を出力します。数値の書式設定に対応しています。例えば `console.log("Foo %.2f", 1.1)` は、小数部分が 2 桁の数値として出力し、 `Foo 1.10` となります。
+  - : 浮動小数点数値を出力します。
+- `%c`
+  - : 以下のテキストすべてに CSS スタイルルールを適用します。[コンソール出力のスタイル設定](#styling_console_output)を参照してください。
 
-> **メモ:** 精度の書式は Chrome では動作しません。
+ブラウザーによっては追加の書式を指定します。例えば、Safari と Firefox は C スタイルの精度書式 `%.<精度>f` に対応しています。例えば、`console.log("Foo %.2f", 1.1)` は小数点以下 2 桁の数値を出力し、`Foo 1.10` となります。`console.log("Foo %.2d", 1.1)` は有効数字 2 桁に先頭の 0 を加えた数値を出力し、 `Foo 01` となります。
 
 これらは引数リストの書式化文字列の後にある引数を引用します。例えば次のようになります。
 
@@ -190,7 +214,9 @@ console.log(
 - {{cssxref("word-spacing")}} および {{cssxref("word-break")}}
 - {{cssxref("writing-mode")}}
 
-> **メモ:** コンソールメッセージは、既定ではインライン要素と同様に動作します。 `padding`, `margin` などの効果を得たい場合は、例えば `display: inline-block` のように設定してください。
+> **メモ:** 既定では、各コンソールメッセージはインライン要素のように動作します。`padding` や `margin` などのプロパティに何らかの効果を持たせたい場合は、`display` プロパティを `display: inline-block` に設定します。
+
+> **メモ:** 明るい配色と暗い配色の両方に対応するために、色を指定するときに {{cssxref("color_value/light-dark")}} を使用することができます。例えば `color: light-dark(#D00000, #FF4040);` とします。
 
 ### コンソールでのグループの使用
 
@@ -262,18 +288,11 @@ foo();
 
 {{Compat}}
 
-## メモ
-
-- 少なくとも Firefox では、ページで `console` オブジェクトを定義すると、 Firefox が内蔵している console オブジェクトをオーバーライドします。
-
 ## 関連情報
 
 - [Firefox 開発者ツール](https://firefox-source-docs.mozilla.org/devtools-user/index.html)
 - [ウェブコンソール](https://firefox-source-docs.mozilla.org/devtools-user/web_console/index.html) — Firefox のウェブコンソールがコンソール API の呼び出しを処理する方法
 - [about:debugging](https://firefox-source-docs.mozilla.org/devtools-user/about_colon_debugging/index.html) — モバイル端末がデバッグ対象である場合に、コンソールの出力を確認する方法
-
-### その他の実装
-
 - [Google Chrome DevTools](https://developer.chrome.com/docs/devtools/console/api/)
 - [Microsoft Edge DevTools](https://docs.microsoft.com/archive/microsoft-edge/legacy/developer/)
 - [Safari Web Inspector](https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html)

From 09cdbcad0448397d2760b5029c555ae4e85fab51 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Tue, 9 Jul 2024 01:15:53 +0900
Subject: [PATCH 187/698] =?UTF-8?q?=E8=A1=A8=E8=A8=98=E3=82=86=E3=82=8C?=
 =?UTF-8?q?=E3=81=AE=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/csscontainerrule/containerquery/index.md | 2 +-
 files/ja/web/api/csscontainerrule/index.md                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/ja/web/api/csscontainerrule/containerquery/index.md b/files/ja/web/api/csscontainerrule/containerquery/index.md
index 043ead8a386a71..98df59822eeed5 100644
--- a/files/ja/web/api/csscontainerrule/containerquery/index.md
+++ b/files/ja/web/api/csscontainerrule/containerquery/index.md
@@ -22,7 +22,7 @@ l10n:
 
 ## 値
 
-コンテナクエリーの入った文字列です。
+コンテナークエリーの入った文字列です。
 
 ホワイトスペースの除去などの正規化が行われるため、値が元の文字列と同じになるとは限らないことに注意してください。
 
diff --git a/files/ja/web/api/csscontainerrule/index.md b/files/ja/web/api/csscontainerrule/index.md
index a0368949b55ab1..61b9e41e5b5938 100644
--- a/files/ja/web/api/csscontainerrule/index.md
+++ b/files/ja/web/api/csscontainerrule/index.md
@@ -10,7 +10,7 @@ l10n:
 **`CSSContainerRule`** インターフェイスは、単一の CSS の {{cssxref("@container")}} ルールを表します。
 
 この型のオブジェクトを使用して、 {{cssxref("@container")}} のクエリー条件と、コンテナー名が定義されている場合はコンテナー名を取得することができます。
-なお、コンテナ名とクエリーを合わせて「条件テキスト」を定義し、 {{domxref("CSSConditionRule.conditionText")}} を使用して取得することができます。
+なお、コンテナー名とクエリーを合わせて「条件テキスト」を定義し、 {{domxref("CSSConditionRule.conditionText")}} を使用して取得することができます。
 
 {{InheritanceDiagram}}
 

From 27cd1cab0478706cf321ee67a976d335a8c77b8b Mon Sep 17 00:00:00 2001
From: Kota 
Date: Fri, 12 Jul 2024 12:16:26 +0900
Subject: [PATCH 188/698] =?UTF-8?q?VideoFrame:=20timestamp=E3=83=97?=
 =?UTF-8?q?=E3=83=AD=E3=83=91=E3=83=86=E3=82=A3=E3=81=AE=E5=8D=98=E4=BD=8D?=
 =?UTF-8?q?=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/videoframe/timestamp/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ja/web/api/videoframe/timestamp/index.md b/files/ja/web/api/videoframe/timestamp/index.md
index 5e04b5291155e3..c6ac5cc1385ce3 100644
--- a/files/ja/web/api/videoframe/timestamp/index.md
+++ b/files/ja/web/api/videoframe/timestamp/index.md
@@ -8,7 +8,7 @@ l10n:
 
 {{APIRef("Web Codecs API")}}
 
-**`timestamp`** は {{domxref("VideoFrame")}} インターフェイスのプロパティで、動画のタイムスタンプをミリ秒単位で表す整数を返します。
+**`timestamp`** は {{domxref("VideoFrame")}} インターフェイスのプロパティで、動画のタイムスタンプをマイクロ秒単位で表す整数を返します。
 
 ## 値
 

From eefb2c3e5c164753d439120a9a97a125644a9d1d Mon Sep 17 00:00:00 2001
From: Hoarfroster 
Date: Fri, 12 Jul 2024 15:04:41 +0800
Subject: [PATCH 189/698] zh-CN: create Glossary/Table_Wrapper_Box (#22227)

feat: update translation
---
 files/zh-cn/glossary/table_wrapper_box/index.md | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 files/zh-cn/glossary/table_wrapper_box/index.md

diff --git a/files/zh-cn/glossary/table_wrapper_box/index.md b/files/zh-cn/glossary/table_wrapper_box/index.md
new file mode 100644
index 00000000000000..7449b39f911614
--- /dev/null
+++ b/files/zh-cn/glossary/table_wrapper_box/index.md
@@ -0,0 +1,10 @@
+---
+title: 表格包装盒子
+slug: Glossary/Table_Wrapper_Box
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**表格包装盒子**是围绕[表格网格盒子](/zh-CN/docs/Glossary/Table_Grid_Box)生成的盒子，用于显示表格的任何标题所需的空间。当表格是包含块时，这个盒子将成为所有绝对定位项目的包含块。

From 41bd7131a3879c5c343be70e10c22bb6d326d107 Mon Sep 17 00:00:00 2001
From: Hoarfroster 
Date: Fri, 12 Jul 2024 15:23:47 +0800
Subject: [PATCH 190/698] zh-CN: create Glossary/WebM (#22235)

Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
---
 files/zh-cn/glossary/webm/index.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 files/zh-cn/glossary/webm/index.md

diff --git a/files/zh-cn/glossary/webm/index.md b/files/zh-cn/glossary/webm/index.md
new file mode 100644
index 00000000000000..c925c6201ba61d
--- /dev/null
+++ b/files/zh-cn/glossary/webm/index.md
@@ -0,0 +1,14 @@
+---
+title: WebM
+slug: Glossary/WebM
+l10n:
+  sourceCommit: c37495e96f08b19a47b38a43cebb5c3489b9279b
+---
+
+{{GlossarySidebar}}
+
+**[WebM](/zh-CN/docs/Web/Media/Formats/Containers#webm)** 是一个免版税和开放的 web 视频格式，所有现代浏览器都原生支持它。
+
+## 参见
+
+- 维基百科上的 [WebM](https://zh.wikipedia.org/wiki/WebM)

From 0ba7a2f5ee461f483c27c86b2903e786395bd248 Mon Sep 17 00:00:00 2001
From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com>
Date: Fri, 12 Jul 2024 16:38:57 +0200
Subject: [PATCH 191/698] [es] sync translated content (#22375)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* es: sync translated content

* Apply suggestions from code review

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: Juan Vásquez 
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 files/es/_redirects.txt                        |  7 +++++--
 files/es/_wikihistory.json                     | 18 +++++++++---------
 .../errors/unexpected_token}/index.md          |  3 ++-
 .../reference/errors/undefined_prop/index.md   |  3 ++-
 .../index.md                                   |  3 ++-
 5 files changed, 20 insertions(+), 14 deletions(-)
 rename files/es/{web/javascript/reference/errors/missing_semicolon_before_statement => conflicting/web/javascript/reference/errors/unexpected_token}/index.md (93%)
 rename files/es/{ => orphaned}/web/javascript/reference/errors/undefined_prop/index.md (93%)
 rename files/es/web/javascript/reference/errors/{deprecated_octal => deprecated_octal_literal}/index.md (92%)

diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt
index 3d1771fbdb2dd5..a33be45ebd35dc 100644
--- a/files/es/_redirects.txt
+++ b/files/es/_redirects.txt
@@ -2318,12 +2318,15 @@
 /es/docs/Web/JavaScript/Primeros_Pasos	/es/docs/Learn/Getting_started_with_the_web/JavaScript_basics
 /es/docs/Web/JavaScript/Reference/About	/es/docs/conflicting/Web/JavaScript/Reference
 /es/docs/Web/JavaScript/Reference/Classes/Private_class_fields	/es/docs/Web/JavaScript/Reference/Classes/Private_properties
-/es/docs/Web/JavaScript/Reference/Errors/Bad_octal	/es/docs/Web/JavaScript/Reference/Errors/Deprecated_octal
-/es/docs/Web/JavaScript/Reference/Errors/Falta_puntoycoma_antes_de_declaracion	/es/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement
+/es/docs/Web/JavaScript/Reference/Errors/Bad_octal	/es/docs/Web/JavaScript/Reference/Errors/Deprecated_octal_literal
+/es/docs/Web/JavaScript/Reference/Errors/Deprecated_octal	/es/docs/Web/JavaScript/Reference/Errors/Deprecated_octal_literal
+/es/docs/Web/JavaScript/Reference/Errors/Falta_puntoycoma_antes_de_declaracion	/es/docs/conflicting/Web/JavaScript/Reference/Errors/Unexpected_token
 /es/docs/Web/JavaScript/Reference/Errors/Indicador_regexp_no-val	/es/docs/Web/JavaScript/Reference/Errors/Bad_regexp_flag
 /es/docs/Web/JavaScript/Reference/Errors/Malformed_formal_parameter	/es/docs/conflicting/Web/JavaScript/Reference/Errors/Missing_formal_parameter
+/es/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement	/es/docs/conflicting/Web/JavaScript/Reference/Errors/Unexpected_token
 /es/docs/Web/JavaScript/Reference/Errors/Not_a_codepoint	/es/docs/Web/JavaScript/Reference/Errors/Not_a_valid_code_point
 /es/docs/Web/JavaScript/Reference/Errors/Strict_y_parámetros_complejos	/es/docs/Web/JavaScript/Reference/Errors/Strict_non_simple_params
+/es/docs/Web/JavaScript/Reference/Errors/Undefined_prop	/es/docs/orphaned/Web/JavaScript/Reference/Errors/Undefined_prop
 /es/docs/Web/JavaScript/Reference/Errors/caracter_ilegal	/es/docs/Web/JavaScript/Reference/Errors/Illegal_character
 /es/docs/Web/JavaScript/Reference/Global_Objects/Array/toSource	/es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Array/toString
 /es/docs/Web/JavaScript/Reference/Global_Objects/Boolean/toSource	/es/docs/Web/JavaScript/Reference/Global_Objects/Boolean/toString
diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json
index 42b3a9faf91bd3..d0500f15b67518 100644
--- a/files/es/_wikihistory.json
+++ b/files/es/_wikihistory.json
@@ -10532,7 +10532,7 @@
     "modified": "2020-09-01T13:12:41.234Z",
     "contributors": ["Nachec"]
   },
-  "Web/JavaScript/Reference/Errors/Deprecated_octal": {
+  "Web/JavaScript/Reference/Errors/Deprecated_octal_literal": {
     "modified": "2020-03-12T19:45:41.442Z",
     "contributors": ["HaroldV"]
   },
@@ -10569,10 +10569,6 @@
     "modified": "2020-03-12T19:46:54.683Z",
     "contributors": ["hiuxmaycry", "ivandevp"]
   },
-  "Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement": {
-    "modified": "2020-03-12T19:46:13.102Z",
-    "contributors": ["jonatanroot", "Lunacye"]
-  },
   "Web/JavaScript/Reference/Errors/More_arguments_needed": {
     "modified": "2020-03-12T19:49:21.407Z",
     "contributors": ["dragonmenorka"]
@@ -10617,10 +10613,6 @@
     "modified": "2020-03-12T19:45:04.878Z",
     "contributors": ["josegarciaclm95"]
   },
-  "Web/JavaScript/Reference/Errors/Undefined_prop": {
-    "modified": "2020-03-12T19:47:46.684Z",
-    "contributors": ["antixsuperstar"]
-  },
   "Web/JavaScript/Reference/Errors/Unexpected_token": {
     "modified": "2020-03-12T19:46:40.968Z",
     "contributors": ["dariomaim"]
@@ -14378,6 +14370,10 @@
     "modified": "2019-10-12T12:26:22.919Z",
     "contributors": ["JGmr5"]
   },
+  "conflicting/Web/JavaScript/Reference/Errors/Unexpected_token": {
+    "modified": "2020-03-12T19:46:13.102Z",
+    "contributors": ["jonatanroot", "Lunacye"]
+  },
   "conflicting/Web/JavaScript/Reference/Global_Objects/Array/toString": {
     "modified": "2019-03-23T22:08:25.338Z",
     "contributors": ["teoli", "pedro-otero"]
@@ -15334,6 +15330,10 @@
     "modified": "2019-03-23T22:46:15.359Z",
     "contributors": ["juanbrujo", "raecillacastellana", "vltamara"]
   },
+  "orphaned/Web/JavaScript/Reference/Errors/Undefined_prop": {
+    "modified": "2020-03-12T19:47:46.684Z",
+    "contributors": ["antixsuperstar"]
+  },
   "orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype": {
     "modified": "2020-10-15T21:35:31.913Z",
     "contributors": ["lajaso", "humbertaco"]
diff --git a/files/es/web/javascript/reference/errors/missing_semicolon_before_statement/index.md b/files/es/conflicting/web/javascript/reference/errors/unexpected_token/index.md
similarity index 93%
rename from files/es/web/javascript/reference/errors/missing_semicolon_before_statement/index.md
rename to files/es/conflicting/web/javascript/reference/errors/unexpected_token/index.md
index 967151d0c9ff97..74e78030a53090 100644
--- a/files/es/web/javascript/reference/errors/missing_semicolon_before_statement/index.md
+++ b/files/es/conflicting/web/javascript/reference/errors/unexpected_token/index.md
@@ -1,6 +1,7 @@
 ---
 title: "SyntaxError: missing ; before statement"
-slug: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement
+slug: conflicting/Web/JavaScript/Reference/Errors/Unexpected_token
+original_slug: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement
 ---
 
 {{jsSidebar("Errores")}}
diff --git a/files/es/web/javascript/reference/errors/undefined_prop/index.md b/files/es/orphaned/web/javascript/reference/errors/undefined_prop/index.md
similarity index 93%
rename from files/es/web/javascript/reference/errors/undefined_prop/index.md
rename to files/es/orphaned/web/javascript/reference/errors/undefined_prop/index.md
index edea22c6c2d42d..a9c1177d902878 100644
--- a/files/es/web/javascript/reference/errors/undefined_prop/index.md
+++ b/files/es/orphaned/web/javascript/reference/errors/undefined_prop/index.md
@@ -1,6 +1,7 @@
 ---
 title: 'ReferenceError: reference to undefined property "x"'
-slug: Web/JavaScript/Reference/Errors/Undefined_prop
+slug: orphaned/Web/JavaScript/Reference/Errors/Undefined_prop
+original_slug: Web/JavaScript/Reference/Errors/Undefined_prop
 ---
 
 {{jsSidebar("Errors")}}
diff --git a/files/es/web/javascript/reference/errors/deprecated_octal/index.md b/files/es/web/javascript/reference/errors/deprecated_octal_literal/index.md
similarity index 92%
rename from files/es/web/javascript/reference/errors/deprecated_octal/index.md
rename to files/es/web/javascript/reference/errors/deprecated_octal_literal/index.md
index 53528701fbde0a..073e13d99b9595 100644
--- a/files/es/web/javascript/reference/errors/deprecated_octal/index.md
+++ b/files/es/web/javascript/reference/errors/deprecated_octal_literal/index.md
@@ -1,6 +1,7 @@
 ---
 title: 'SyntaxError: "x" is not a legal ECMA-262 octal constant'
-slug: Web/JavaScript/Reference/Errors/Deprecated_octal
+slug: Web/JavaScript/Reference/Errors/Deprecated_octal_literal
+original_slug: Web/JavaScript/Reference/Errors/Deprecated_octal
 ---
 
 {{jsSidebar("Errors")}}

From 868c1d34c30345d17be4bdd14f3922042a4870b3 Mon Sep 17 00:00:00 2001
From: Chunhui Fu 
Date: Sat, 13 Jul 2024 10:08:11 +0800
Subject: [PATCH 192/698] [zh-cn]: create docs for HTMLOListElement (#22348)

Co-authored-by: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com>
Co-authored-by: A1lo 
---
 files/zh-cn/web/api/htmlolistelement/index.md | 49 +++++++++++++++++
 .../api/htmlolistelement/reversed/index.md    | 50 +++++++++++++++++
 .../web/api/htmlolistelement/start/index.md   | 52 ++++++++++++++++++
 .../web/api/htmlolistelement/type/index.md    | 55 +++++++++++++++++++
 4 files changed, 206 insertions(+)
 create mode 100644 files/zh-cn/web/api/htmlolistelement/index.md
 create mode 100644 files/zh-cn/web/api/htmlolistelement/reversed/index.md
 create mode 100644 files/zh-cn/web/api/htmlolistelement/start/index.md
 create mode 100644 files/zh-cn/web/api/htmlolistelement/type/index.md

diff --git a/files/zh-cn/web/api/htmlolistelement/index.md b/files/zh-cn/web/api/htmlolistelement/index.md
new file mode 100644
index 00000000000000..0d8aac1aac5d83
--- /dev/null
+++ b/files/zh-cn/web/api/htmlolistelement/index.md
@@ -0,0 +1,49 @@
+---
+title: HTMLOListElement
+slug: Web/API/HTMLOListElement
+l10n:
+  sourceCommit: 7e6e5f5d4c1c984af3d4ebf9399042d19eccea1e
+---
+
+{{ APIRef("HTML DOM") }}
+
+**`HTMLOListElement`** 接口提供特定的属性（除了常规 {{domxref("HTMLElement")}} 接口之外，它还可以通过继承来使用），用于操作有序列表元素。
+
+{{InheritanceDiagram}}
+
+## 实例属性
+
+_从其父接口 {{domxref("HTMLElement")}} 继承属性。_
+
+- {{domxref("HTMLOListElement.reversed")}}
+  - : 一个布尔值，反映 [`reversed`](/zh-CN/docs/Web/HTML/Element/ol#reversed) 并定义是否序号是递减（即它的值是 `true`），还是递增（`false`）。
+- {{domxref("HTMLOListElement.start")}}
+  - : 一个 `long` 值，反映 [`start`](/zh-CN/docs/Web/HTML/Element/ol#start) 并定义列表第一个元素的开始序号的值。
+- {{domxref("HTMLOListElement.type")}}
+
+  - : 一个字符串，反映 [`type`](/zh-CN/docs/Web/HTML/Element/ol#type) 并定义要用于显示的标记种类，它可以具有以下的值：
+
+    - `'1'` 意味着使用十进制数字：`1`、`2`、`3`、`4`、`5`、…
+    - `'a'` 意味着使用小写拉丁字母：`a`、`b`、`c`、`d`、`e`、…
+    - `'A'` 意味着使用大写拉丁字母：`A`、`B`、`C`、`D`、`E`、…
+    - `'i'` 意味着使用小写拉丁数字：`i`、`ii`、`iii`、`iv`、`v`、…
+    - `'I'` 意味着使用大写拉丁数字：`I`、`II`、`III`、`IV`、`V`、…
+
+- {{domxref("HTMLOListElement.compact")}} {{deprecated_inline}}
+  - : 一个布尔值，指示应减小列表项之间的间距，此属性仅反映 [`compact`](/zh-CN/docs/Web/HTML/Element/ol#compact) 属性，不考虑现代页面中用于该行为的 {{cssxref("line-height")}} CSS 属性。
+
+## 实例方法
+
+_没有特定的方法，从其父接口 {{domxref("HTMLElement")}} 继承方法。_
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- 实现此接口的 HTML 元素：{{ HTMLElement("ol") }}
diff --git a/files/zh-cn/web/api/htmlolistelement/reversed/index.md b/files/zh-cn/web/api/htmlolistelement/reversed/index.md
new file mode 100644
index 00000000000000..4343e7619d351a
--- /dev/null
+++ b/files/zh-cn/web/api/htmlolistelement/reversed/index.md
@@ -0,0 +1,50 @@
+---
+title: HTMLOListElement：reversed 属性
+slug: Web/API/HTMLOListElement/reversed
+l10n:
+  sourceCommit: 23ad4d2736b06fcd07a102ea4719ecfe590c33f5
+---
+
+{{ApiRef("HTML DOM")}}
+
+{{domxref("HTMLOListElement")}} 接口的 **`reversed`** 属性表示列表的顺序。
+
+它反映了 {{HTMLElement("ol")}} 元素的 [`reversed`](/zh-CN/docs/Web/HTML/Element/ol#reversed) 属性。
+
+## 值
+
+`boolean` 值。如果是 `true`，表示列表是降序列表（……、3、2、1）。
+
+## 示例
+
+### HTML
+
+```html
+
    
+  
  1. Fee
    2. 
+  
  2. Fi
    3. 
+  
  3. Fo
    4. 
+  
  4. Fum
    5. 
+

+```
+
+### JavaScript
+
+```js
+const olElement = document.querySelector("#order-list");
+console.log(olElement.reversed); // 输出：“false”
+olElement.reversed = "true";
+console.log(olElement.reversed); // 输出：“true”
+```
+
+### 结果
+
+{{EmbedLiveSample("示例", 400, 100)}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/web/api/htmlolistelement/start/index.md b/files/zh-cn/web/api/htmlolistelement/start/index.md
new file mode 100644
index 00000000000000..646cd7418c5a54
--- /dev/null
+++ b/files/zh-cn/web/api/htmlolistelement/start/index.md
@@ -0,0 +1,52 @@
+---
+title: HTMLOListElement：start 属性
+slug: Web/API/HTMLOListElement/start
+l10n:
+  sourceCommit: 23ad4d2736b06fcd07a102ea4719ecfe590c33f5
+---
+
+{{ApiRef("HTML DOM")}}
+
+{{domxref("HTMLOListElement")}} 接口的 **`start`** 属性表示有序列表的起始值，默认值是 1。
+
+它反映了 {{HTMLElement("ol")}} 元素的 [`start`](/zh-CN/docs/Web/HTML/Element/ol#start) 属性。
+
+> **备注：** `start` 属性值独立于 {{domxref("HTMLOListElement.type")}} 属性；它总是数字，即使当类型是字母或罗马数字。
+
+## 值
+
+`long` 值。
+
+## 示例
+
+### HTML
+
+```html
+
    
+  
  1. Fee
    2. 
+  
  2. Fi
    3. 
+  
  3. Fo
    4. 
+  
  4. Fum
    5. 
+

+```
+
+### JavaScript
+
+```js
+const olElement = document.querySelector("#order-list");
+console.log(olElement.start); // 输出：“1”
+olElement.start = "11";
+console.log(olElement.start); // 输出：“11”
+```
+
+### 结果
+
+{{EmbedLiveSample("示例", 400, 100)}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/web/api/htmlolistelement/type/index.md b/files/zh-cn/web/api/htmlolistelement/type/index.md
new file mode 100644
index 00000000000000..76b8fad5b1404f
--- /dev/null
+++ b/files/zh-cn/web/api/htmlolistelement/type/index.md
@@ -0,0 +1,55 @@
+---
+title: HTMLOListElement：type 属性
+slug: Web/API/HTMLOListElement/type
+l10n:
+  sourceCommit: 23ad4d2736b06fcd07a102ea4719ecfe590c33f5
+---
+
+{{ApiRef("HTML DOM")}}
+
+{{domxref("HTMLOListElement")}} 接口的 **`type`** 属性用于显示排序列表标记的类型。
+
+它反映了 {{HTMLElement("ol")}} 元素的 [`type`](/zh-CN/docs/Web/HTML/Element/ol#type) 属性。
+
+> **备注：** `type` 可以在 CSS 中使用 {{CSSxRef("list-style-type")}} 属性定义。 `list-style-type` 属性提供更多的值。
+
+## 值
+
+表示类型的字符串。
+
+其可能的值列在属性[标记类型](/zh-CN/docs/Web/HTML/Element/ol#type)部分。
+
+## 示例
+
+### HTML
+
+```html
+
    
+  
  1. Fee
    2. 
+  
  2. Fi
    3. 
+  
  3. Fo
    4. 
+  
  4. Fum
    5. 
+

+```
+
+### JavaScript
+
+```js
+const olElement = document.querySelector("#order-list");
+// 如果没有指定类型，则返回空字符串
+console.log(olElement.type); // 输出：""
+olElement.type = "i"; // 使用罗马数字类型
+console.log(olElement.type); // 输出："i"
+```
+
+### 结果
+
+{{EmbedLiveSample("示例", 400, 100)}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}

From 7469a2cfb4f0a5adb3fc705b5d16b9964db6e862 Mon Sep 17 00:00:00 2001
From: Tianyi Tao 
Date: Sat, 13 Jul 2024 10:08:46 +0800
Subject: [PATCH 193/698] [zh-cn]: create the translation of
 `VirtualKeyboard.overlaysContent` property (#22042)

Co-authored-by: Hoarfroster 
Co-authored-by: A1lo 
---
 .../virtualkeyboard/overlayscontent/index.md  | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 files/zh-cn/web/api/virtualkeyboard/overlayscontent/index.md

diff --git a/files/zh-cn/web/api/virtualkeyboard/overlayscontent/index.md b/files/zh-cn/web/api/virtualkeyboard/overlayscontent/index.md
new file mode 100644
index 00000000000000..13ced193914f13
--- /dev/null
+++ b/files/zh-cn/web/api/virtualkeyboard/overlayscontent/index.md
@@ -0,0 +1,38 @@
+---
+title: VirtualKeyboard：overlaysContent 属性
+slug: Web/API/VirtualKeyboard/overlaysContent
+l10n:
+  sourceCommit: 5cdb341c723de0edb273769555d9124266d9c851
+---
+
+{{APIRef("VirtualKeyboard API")}}{{SeeCompatTable}}{{securecontext_header}}
+
+VirtualKeyboard 接口的 **`overlaysContent`** 属性用于选择不使用浏览器自动处理屏幕虚拟键盘的方式（减小视窗大小来为屏幕虚拟键盘腾出空间）。
+
+如果将 `overlaysContent` 属性设置为 `true`，则浏览器在虚拟键盘出现时不再调整视口大小，而是让虚拟键盘覆盖在网页内容上。从而，你可以使用{{domxref("VirtualKeyboard_API", "虚拟键盘 API", "", "nocode")}}、自定义 CSS 和 JavaScript 适应页面布局。
+
+## 值
+
+一个布尔值。默认为 `false`，设置为 `true` 可选择不使用浏览器对屏幕虚拟键盘的自动处理。
+
+## 示例
+
+```js
+if ("virtualKeyboard" in navigator) {
+  console.log(navigator.virtualKeyboard.overlaysContent); // false
+  navigator.virtualKeyboard.overlaysContent = true; // 选择不使用自动处理。
+}
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("VirtualKeyboard_API", "VirtualKeyboard API", "", "nocode")}}
+- [使用 VirtualKeyboard API 实现完全控制](https://developer.chrome.com/docs/web-platform/virtual-keyboard/)

From 7bd80e3d1406c6f52c0be29566d90f56c03a7b80 Mon Sep 17 00:00:00 2001
From: Chunhui Fu 
Date: Sat, 13 Jul 2024 10:10:19 +0800
Subject: [PATCH 194/698] [zh-cn]: sync with Array (#22316)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: A1lo 
---
 .../reference/global_objects/array/index.md   | 297 +++++++++++++-----
 1 file changed, 217 insertions(+), 80 deletions(-)

diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/index.md
index c98d00c947be1e..10bc1837f93f54 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/array/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/array/index.md
@@ -1,6 +1,8 @@
 ---
 title: Array
 slug: Web/JavaScript/Reference/Global_Objects/Array
+l10n:
+  sourceCommit: c4a47058862708136e2818a5d3d21c4a1645d89a
 ---
 
 {{JSRef}}
@@ -9,24 +11,24 @@ slug: Web/JavaScript/Reference/Global_Objects/Array
 
 ## 描述
 
-在 JavaScript 中，数组不是[基本类型](/zh-CN/docs/Glossary/Primitive)，而是具有以下核心特征的 `Array` 对象：
+在 JavaScript 中，数组不是[原始类型](/zh-CN/docs/Glossary/Primitive)，而是具有以下核心特征的 `Array` 对象：
 
 - **JavaScript 数组是可调整大小的，并且可以包含不同的[数据类型](/zh-CN/docs/Web/JavaScript/Data_structures)**。（当不需要这些特征时，可以使用[类型化数组](/zh-CN/docs/Web/JavaScript/Guide/Typed_arrays)。）
 - **JavaScript 数组不是关联数组**，因此，不能使用任意字符串作为索引访问数组元素，但必须使用非负整数（或它们各自的字符串形式）作为索引访问。
 - **JavaScript 数组的[索引从 0 开始](https://zh.wikipedia.org/zh-cn/從零開始的編號)**：数组的第一个元素在索引 `0` 处，第二个在索引 `1` 处，以此类推，最后一个元素是数组的 {{jsxref("Array/length", "length")}} 属性减去 `1` 的值。
 - **JavaScript [数组复制操作](#复制数组)创建[浅拷贝](/zh-CN/docs/Glossary/Shallow_copy)**。（_所有_ JavaScript 对象的标准内置复制操作都会创建浅拷贝，而不是[深拷贝](/zh-CN/docs/Glossary/Deep_copy)）。
 
-### 数组下标
+### 数组索引
 
-`Array` 对象不能使用任意字符串作为元素索引（如[关联数组](https://zh.wikipedia.org/wiki/关联数组)），必须使用非负整数（或它们的字符串形式）。通过非整数设置或访问不会设置或从数组列表本身检索元素，但会设置或访问与该数组的[对象属性集合](/zh-CN/docs/Web/JavaScript/Data_structures#属性)相关的变量。数组的对象属性和数组元素列表是分开的，数组的[遍历和修改操作](/zh-CN/docs/Web/JavaScript/Guide/Indexed_collections#数组方法)不能应用于这些命名属性。
+`Array` 对象不能使用任意字符串作为元素索引（如[关联数组](https://zh.wikipedia.org/wiki/关联数组)），必须使用非负整数（或它们的字符串形式）。通过非整数设置或访问不会设置或从数组列表本身检索元素，但会设置或访问与该数组的[对象属性集合](/zh-CN/docs/Web/JavaScript/Data_structures#属性)相关的变量。数组的对象属性和数组元素列表是分开的，数组的[遍历和修改操作](/zh-CN/docs/Web/JavaScript/Guide/Indexed_collections#数组方法)不能应用于这些具名属性。
 
 数组元素是对象属性，就像 `toString` 是属性一样（具体来说，`toString()` 是一种方法）。然而，尝试按以下方式访问数组的元素会抛出语法错误，因为属性名无效：
 
 ```js example-bad
-console.log(arr.0); // 语法错误
+arr.0; // 语法错误
 ```
 
-JavaScript 语法要求使用[方括号表示法](/zh-CN/docs/Web/JavaScript/Guide/Working_with_objects#对象和属性)而不是[点号表示法](/zh-CN/docs/Web/JavaScript/Reference/Operators/Property_accessors)来访问以数字开头的属性。也可以用引号包裹数组下标（例如，`years['2']` 而不是 `years[2]`），尽管通常没有必要。
+JavaScript 语法要求使用[方括号表示法](/zh-CN/docs/Web/JavaScript/Guide/Working_with_objects#对象和属性)而不是[点号表示法](/zh-CN/docs/Web/JavaScript/Reference/Operators/Property_accessors)来访问以数字开头的属性。也可以用引号包裹数组索引（例如，`years['2']` 而不是 `years[2]`），尽管通常没有必要。
 
 JavaScript 引擎通过隐式的 `toString`，将 `years[2]` 中的 `2` 强制转换为字符串。因此，`'2'` 和 `'02'` 将指向 `years` 对象上的两个不同的槽位，下面的例子可能是 `true`：
 
@@ -59,7 +61,7 @@ console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
 console.log(fruits.length); // 6
 ```
 
-增加 {{jsxref("Array/length", "length")}}。
+增加 {{jsxref("Array/length", "length")}} 会通过添加空槽来扩展数组，而不是创建任何新元素——甚至不会是 `undefined`。
 
 ```js
 fruits.length = 10;
@@ -77,73 +79,61 @@ console.log(Object.keys(fruits)); // ['0', '1']
 console.log(fruits.length); // 2
 ```
 
-这将在 {{jsxref("Array/length")}} 页中进一步解释。
+这将在 {{jsxref("Array/length", "length")}} 页中进一步解释。
 
 ### 数组方法和空槽
 
-[稀疏数组](/zh-CN/docs/Web/JavaScript/Guide/Indexed_collections#稀疏数组)中的空槽在数组方法之间的行为不一致。通常，旧方法会跳过空槽，而新方法将它们视为 `undefined`。
-
-在遍历多个元素的方法中，下面的方法在访问索引之前执行 [`in`](/zh-CN/docs/Web/JavaScript/Reference/Operators/in) 检查，并且不将空槽与 `undefined` 合并：
-
-- {{jsxref("Array/concat", "concat()")}}
-- {{jsxref("Array/copyWithin", "copyWithin()")}}
-- {{jsxref("Array/every", "every()")}}
-- {{jsxref("Array/filter", "filter()")}}
-- {{jsxref("Array/flat", "flat()")}}
-- {{jsxref("Array/flatMap", "flatMap()")}}
-- {{jsxref("Array/forEach", "forEach()")}}
-- {{jsxref("Array/indexOf", "indexOf()")}}
-- {{jsxref("Array/lastIndexOf", "lastIndexOf()")}}
-- {{jsxref("Array/map", "map()")}}
-- {{jsxref("Array/reduce", "reduce()")}}
-- {{jsxref("Array/reduceRight", "reduceRight()")}}
-- {{jsxref("Array/reverse", "reverse()")}}
-- {{jsxref("Array/slice", "slice()")}}
-- {{jsxref("Array/some", "some()")}}
-- {{jsxref("Array/sort", "sort()")}}
-- {{jsxref("Array/splice", "splice()")}}
-
-关于它们是如何处理空槽的，请参阅每个方法的页面。
-
-这些方法将空槽视为 `undefined`：
-
-- {{jsxref("Array/entries", "entries()")}}
-- {{jsxref("Array/fill", "fill()")}}
-- {{jsxref("Array/find", "find()")}}
-- {{jsxref("Array/findIndex", "findIndex()")}}
-- {{jsxref("Array/findLast", "findLast()")}}
-- {{jsxref("Array/findLastIndex", "findLastIndex()")}}
-- {{jsxref("Array/includes", "includes()")}}
-- {{jsxref("Array/join", "join()")}}
-- {{jsxref("Array/keys", "keys()")}}
-- {{jsxref("Array/toLocaleString", "toLocaleString()")}}
-- {{jsxref("Array/values", "values()")}}
+数组方法在遇到空槽时有不同的行为，在[稀疏数组](/zh-CN/docs/Web/JavaScript/Guide/Indexed_collections#稀疏数组)中数组方法遇到空槽时有不同的行为。通常，较旧的方法（例如 `forEach`）处理空槽的方式与处理包含 `undefined` 索引的方式不同。
+
+对空槽进行特殊处理的方法包括：{{jsxref("Array/concat", "concat()")}}、{{jsxref("Array/copyWithin", "copyWithin()")}}、{{jsxref("Array/every", "every()")}}、{{jsxref("Array/filter", "filter()")}}、{{jsxref("Array/flat", "flat()")}}、{{jsxref("Array/flatMap", "flatMap()")}}、{{jsxref("Array/forEach", "forEach()")}}、{{jsxref("Array/indexOf", "indexOf()")}}、{{jsxref("Array/lastIndexOf", "lastIndexOf()")}}、{{jsxref("Array/map", "map()")}}、{{jsxref("Array/reduce", "reduce()")}}、{{jsxref("Array/reduceRight", "reduceRight()")}}、{{jsxref("Array/reverse", "reverse()")}}、{{jsxref("Array/slice", "slice()")}}、{{jsxref("Array/some", "some()")}}、{{jsxref("Array/sort", "sort()")}} 和 {{jsxref("Array/splice", "splice()")}}。诸如 `forEach` 之类的迭代方法根本不会访问空槽。其他方法，如 `concat`、`copyWithin` 等，在进行复制时会保留空槽，因此最终数组依然是稀疏的。
+
+```js
+const colors = ["红", "黄", "蓝"];
+colors[5] = "紫";
+colors.forEach((item, index) => {
+  console.log(`${index}：${item}`);
+});
+// 输出：
+// 0：红
+// 1：黄
+// 2：蓝
+// 5：蓝
+
+colors.reverse(); // ['紫', 空槽 × 2, '蓝', '黄', '红']
+```
+
+较新的方法（例如 `keys`）不会对空槽进行特殊处理，而是将它们视为包含 `undefined`。将空槽合并为 `undefined` 元素方法有：{{jsxref("Array/entries", "entries()")}}、{{jsxref("Array/fill", "fill()")}}、{{jsxref("Array/find", "find()")}}、{{jsxref("Array/findIndex", "findIndex()")}}、{{jsxref("Array/findLast", "findLast()")}}、{{jsxref("Array/findLastIndex", "findLastIndex()")}}、{{jsxref("Array/includes", "includes()")}}、{{jsxref("Array/join", "join()")}}、{{jsxref("Array/keys", "keys()")}}、{{jsxref("Array/toLocaleString", "toLocaleString()")}}、{{jsxref("Array/values", "values()")}} 和 {{jsxref("Array/with", "with()")}}。
+
+```js
+const colors = ["红", "黄", "蓝"];
+colors[5] = "紫";
+const iterator = colors.keys();
+for (const key of iterator) {
+  console.log(`${key}：${colors[key]}`);
+}
+// 输出
+// 0：红
+// 1：黄
+// 2：蓝
+// 3：undefined
+// 4：undefined
+// 5：紫
+
+const newColors = colors.toReversed(); // ['紫', undefined, undefined, '蓝', '黄', '红']
+```
 
 ### 复制方法和修改方法
 
 有些方法不会修改调用该方法的现有数组，而是返回一个新的数组。它们通过首先构造一个新数组，然后填充元素来实现。复制始终是[_浅层次的_](/zh-CN/docs/Glossary/Shallow_copy)——该方法从不复制一开始创建的数组之外的任何内容。原始数组的元素将按以下方式复制到新数组中：
 
 - 对象：对象引用被复制到新数组中。原数组和新数组都引用同一个对象。也就是说，如果一个被引用的对象被修改，新数组和原数组都可以看到更改。
-- 基本类型，如字符串、数字和布尔值（不是 {{jsxref("Global_Objects/String", "String")}}、{{jsxref("Global_Objects/Number", "Number")}} 和 {{jsxref("Global_Objects/Boolean", "Boolean")}} 对象）：它们的值被复制到新数组中。
+- 原始类型，如字符串、数字和布尔值（不是 {{jsxref("String")}}、{{jsxref("Number")}} 和 {{jsxref("Boolean")}} 对象）：它们的值被复制到新数组中。
 
 其他方法会改变调用该方法的数组，在这种情况下，它们的返回值根据方法的不同而不同：有时是对相同数组的引用，有时是新数组的长度。
 
-以下方法通过访问 [`this.constructor[Symbol.species]`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/@@species) 来创建新数组，以确定要使用的构造函数：
-
-- {{jsxref("Array/concat", "concat()")}}
-- {{jsxref("Array/filter", "filter()")}}
-- {{jsxref("Array/flat", "flat()")}}
-- {{jsxref("Array/flatMap", "flatMap()")}}
-- {{jsxref("Array/map", "map()")}}
-- {{jsxref("Array/slice", "slice()")}}
-- {{jsxref("Array/splice", "splice()")}}（构造返回的已删除元素数组）
-
-以下方法总是使用 `Array` 基础构造函数创建新数组：
+以下方法通过访问 [`this.constructor[Symbol.species]`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/@@species) 来创建新数组，以确定要使用的构造函数：{{jsxref("Array/concat", "concat()")}}、{{jsxref("Array/filter", "filter()")}}、{{jsxref("Array/flat", "flat()")}}、{{jsxref("Array/flatMap", "flatMap()")}}、{{jsxref("Array/map", "map()")}}、{{jsxref("Array/slice", "slice()")}} 和 {{jsxref("Array/splice", "splice()")}}（返回构造的已删除元素数组）
 
-- {{jsxref("Array/toReversed", "toReversed()")}}
-- {{jsxref("Array/toSorted", "toSorted()")}}
-- {{jsxref("Array/toSpliced", "toSpliced()")}}
-- {{jsxref("Array/with", "with()")}}
+以下方法总是使用 `Array` 基础构造函数创建新数组：{{jsxref("Array/toReversed", "toReversed()")}}、{{jsxref("Array/toSorted", "toSorted()")}}、{{jsxref("Array/toSpliced", "toSpliced()")}} 和 {{jsxref("Array/with", "with()")}}。
 
 下表列出了会修改原始数组的方法，以及相应的非修改方法：
 
@@ -186,32 +176,42 @@ method(callbackFn, thisArg)
 
 `callbackFn` 的返回值取决于调用的数组方法。
 
-`thisArg` 参数（默认为 `undefined`）将在调用 `callbackFn` 时用作 `this` 值。最终由 `callbackFn` 观察到的 `this` 值根据[通常的规则](/zh-CN/docs/Web/JavaScript/Reference/Operators/this) 确定：如果 `callbackFn` 是[非严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)（译注：[正常模式/马虎模式](/zh-CN/docs/Glossary/Sloppy_mode)），原始 `this` 值将被包装为对象，并将 `undefined`/`null` 替换为 [`globalThis`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/globalThis)。对于使用 [箭头函数](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions) 定义的任何 `callbackFn` 来说，`thisArg` 参数都是无关紧要的，因为箭头函数没有自己的 `this` 绑定。
+`thisArg` 参数（默认为 `undefined`）将在调用 `callbackFn` 时用作 `this` 值。最终由 `callbackFn` 观察到的 `this` 值根据[通常的规则](/zh-CN/docs/Web/JavaScript/Reference/Operators/this)确定：如果 `callbackFn` 是[非严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)，原始 `this` 值将被包装为对象，并将 `undefined`/`null` 替换为 [`globalThis`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/globalThis)。对于使用[箭头函数](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions) 定义的任何 `callbackFn` 来说，`thisArg` 参数都是无关紧要的，因为箭头函数没有自己的 `this` {{Glossary("binding", "绑定")}}。
 
-所有迭代方法都是[复制方法](#复制方法和修改方法)和[通用方法](#通用数组方法)，尽管它们在处理[空槽](#数组方法和空槽)时的行为不同。
+如果想要在迭代期间读取另一个索引值的话，传递给 `callbackFn` 的 `array` 参数是有用的，因为可能并不总是有一个引用当前数据的现有变量。在迭代过程中，通常不应更改数组（参见 [迭代方法中的改变初始数组](#迭代方法中的改变初始数组)），但可以使用这个参数这样做。`array` 参数*不是*正在构建的数组，在类似 `map()`、`filter()` 和 `flatMap()` 方法的情况下——无法通过回调函数访问正在构建的数组。
 
-以下方法是迭代方法：
+所有迭代方法都是[复制方法](#复制方法和修改方法)和[通用方法](#通用数组方法)，尽管它们在处理[空槽](#数组方法和空槽)时的行为不同。
 
-- {{jsxref("Array/every", "every()")}}
-- {{jsxref("Array/filter", "filter()")}}
-- {{jsxref("Array/find", "find()")}}
-- {{jsxref("Array/findIndex", "findIndex()")}}
-- {{jsxref("Array/findLast", "findLast()")}}
-- {{jsxref("Array/findLastIndex", "findLastIndex()")}}
-- {{jsxref("Array/flatMap", "flatMap()")}}
-- {{jsxref("Array/forEach", "forEach()")}}
-- {{jsxref("Array/map", "map()")}}
-- {{jsxref("Array/some", "some()")}}
+以下方法是迭代方法：{{jsxref("Array/every", "every()")}}、{{jsxref("Array/filter", "filter()")}}、{{jsxref("Array/find", "find()")}}、{{jsxref("Array/findIndex", "findIndex()")}}、{{jsxref("Array/findLast", "findLast()")}}、{{jsxref("Array/findLastIndex", "findLastIndex()")}}、{{jsxref("Array/flatMap", "flatMap()")}}、{{jsxref("Array/forEach", "forEach()")}}、{{jsxref("Array/map", "map()")}} 和 {{jsxref("Array/some", "some()")}}。
 
 特别地，{{jsxref("Array/every", "every()")}}、{{jsxref("Array/find", "find()")}}、{{jsxref("Array/findIndex", "findIndex()")}}、{{jsxref("Array/findLast", "findLast()")}}、{{jsxref("Array/findLastIndex", "findLastIndex()")}} 和 {{jsxref("Array/some", "some()")}} 并不总是在每个元素上调用 `callbackFn`——它们在确定返回值后立即停止迭代。
 
-还有两个方法接受一个回调函数，并对数组中的每个元素最多运行一次，但它们的方法签名与典型的迭代方法略有不同（例如，它们不接受 `thisArg`）：
-
-- {{jsxref("Array/reduce", "reduce()")}}
-- {{jsxref("Array/reduceRight", "reduceRight()")}}
+{{jsxref("Array/reduce", "reduce()")}} 和 {{jsxref("Array/reduceRight", "reduceRight()")}} 方法也接受一个回调函数，并对数组中的每个元素最多运行一次，但它们的方法签名与典型的迭代方法略有不同（例如，它们不接受 `thisArg`）。
 
 {{jsxref("Array/sort", "sort()")}} 方法也接受一个回调函数，但它不是一个迭代方法。它会就地修改数组，不接受 `thisArg`，并且可能在索引上多次调用回调函数。
 
+迭代方法迭代数组，如下所示（省略许多技术细节）：
+
+```js
+function method(callbackFn, thisArg) {
+  const length = this.length;
+  for (let i = 0; i < length; i++) {
+    if (i in this) {
+      const result = callbackFn.call(thisArg, this[i], i, this);
+      // 使用 result 做一些事，也许更早地返回
+    }
+  }
+}
+```
+
+备注如下内容：
+
+1. 不是所有的方法都执行 `i in this` 验证，`find`、`findIndex`、`findLast` 和 `findLastIndex` 方法不执行，其他的会。
+2. `length` 变量在循环开始前存储。这会影响迭代过程中插入和删除的处理方式（参见[迭代方法中的改变初始数组](#迭代方法中的改变初始数组)）。
+3. `method` 方法不会存储数组内容，因此如果迭代期间，有任何索引发生更改，可以观察到新的值。
+4. 上面的代码按索引的升序迭代数组，有一些方法按索引降序迭代（`for (let i = length - 1; i >= 0; i--)`）：`reduceRight()`、`findLast()` 和 `findLastIndex()`。
+5. `reduce` 和 `reduceRight` 具有略微不同的签名，并不总是从第一个/最后一个元素开始。
+
 ### 通用数组方法
 
 数组方法总是通用的——它们不访问数组对象的任何内部数据。它们只通过 `length` 属性和索引访问数组元素。这意味着它们也可以在类数组对象上调用。
@@ -271,8 +271,8 @@ f("a", "b"); // 'a+b'
 
 - {{jsxref("Array.from()")}}
   - : 从数组类对象或可迭代对象创建一个新的 `Array` 实例。
-- {{jsxref("Array.fromAsync()")}} {{Experimental_Inline}}
-  - 从异步可迭代、可迭代或类数组对象创建新的 `Array` 实例。
+- {{jsxref("Array.fromAsync()")}}
+  - : 从异步可迭代、可迭代或类数组对象创建新的 `Array` 实例。
 - {{jsxref("Array.isArray()")}}
   - : 如果参数是数组则返回 `true` ，否则返回 `false` 。
 - {{jsxref("Array.of()")}}
@@ -786,6 +786,143 @@ console.log(execResult); // [ "dbBd", "bB", "d" ]
 
 有关匹配结果的更多信息，请参见 {{jsxref("RegExp.prototype.exec()")}} 和 {{jsxref("String.prototype.match()")}} 页。
 
+### 迭代方法中的改变初始数组
+
+[迭代方法](#迭代方法)不会改变调用它的数组，但作为 `callbackFn` 提供的函数可以。要记住关键原则是只有 0 和 `arrayLength - 1` 之间的索引可访问，`arrayLength` 是数组方法第一次被调用时的长度值，但传递给回调的元素是访问索引时的值。因此：
+
+- `callbackFn` 不会访问任何添加到超出数组的初始化长度之外的元素，当开始调用迭代方法时。
+- 对已访问索引的变更不会导致再次对其调用 `callbackFn`。
+- 如果数组中存在但未访问的元素被 `callbackFn` 更改，则传递给 `callbackFn` 的值将是访问该元素时的值。删除的元素不会被访问。
+
+> **警告：** 上述类型的并发修改通常会导致代码难以理解，需要避免（特殊情况除外）。
+
+下面的示例使用 `forEach` 方法作为一个例子，但以升序访问索引的其他的方法以相同的方式工作。我们将先定义一个帮助函数：
+
+```js
+function testSideEffect(effect) {
+  const arr = ["e1", "e2", "e3", "e4"];
+  arr.forEach((elem, index, arr) => {
+    console.log(`数组：[${arr.join(", ")}]，索引：${index}，元素：${elem}`);
+    effect(arr, index);
+  });
+  console.log(`最终数组：[${arr.join(", ")}]`);
+}
+```
+
+一旦达到索引，对尚未访问索引的修改将可见：
+
+```js
+testSideEffect((arr, index) => {
+  if (index + 1 < arr.length) arr[index + 1] += "*";
+});
+// 数组：[e1, e2, e3, e4]，索引：0，元素：e1
+// 数组：[e1, e2*, e3, e4]，索引：1，元素：e2*
+// 数组：[e1, e2*, e3*, e4]，索引：2，元素：e3*
+// 数组：[e1, e2*, e3*, e4*]，索引：3，元素：e4*
+// 最终数组：[e1, e2*, e3*, e4*]
+```
+
+对已访问索引的修改不会改变迭代行为，尽管之后数据会有所不同：
+
+```js
+testSideEffect((arr, index) => {
+  if (index > 0) arr[index - 1] += "*";
+});
+// 数组：[e1, e2, e3, e4]，索引：0，元素：e1
+// 数组：[e1, e2, e3, e4]，索引：1，元素：e2
+// 数组：[e1*, e2, e3, e4]，索引：2，元素：e3
+// 数组：[e1*, e2*, e3, e4]，索引：3，元素：e4
+// 最终数组：[e1*, e2*, e3*, e4]
+```
+
+在小于初始数组长度的未访问索引处插入 _n_ 元素将使它们被访问。原始数组中大于初始长度的最后 _n_ 元素将不会被访问：
+
+```js
+testSideEffect((arr, index) => {
+  if (index === 1) arr.splice(2, 0, "new");
+});
+// 数组：[e1, e2, e3, e4]，索引：0，元素：e1
+// 数组：[e1, e2, e3, e4]，索引：1，元素：e2
+// 数组：[e1, e2, new, e3, e4]，索引：2，元素：new
+// 数组：[e1, e2, new, e3, e4]，索引：3，元素：e3
+// 最终数组：[e1, e2, new, e3, e4]
+// e4 不会被访问因为它的索引是 4
+```
+
+在大于初始数组长度处插入 _n_ 元素将不会使它们被访问：
+
+```js
+testSideEffect((arr) => arr.push("new"));
+// 数组：[e1, e2, e3, e4]，索引：0，元素：e1
+// 数组：[e1, e2, e3, e4, new]，索引：1，元素：e2
+// 数组：[e1, e2, e3, e4, new, new]，索引：2，元素：e3
+// 数组：[e1, e2, e3, e4, new, new, new]，索引：3，元素：e4
+// 最终数组：[e1, e2, e3, e4, new, new, new, new]
+```
+
+对已经访问过的索引插入 _n_ 元素将不会使它们被访问，但它会将剩余元素向后移动 _n_，因此当前索引和它之前的 _n - 1_ 元素会再次被访问。
+
+```js
+testSideEffect((arr, index) => arr.splice(index, 0, "new"));
+// 数组：[e1, e2, e3, e4]，索引：0，元素：e1
+// 数组：[new, e1, e2, e3, e4]，索引：1，元素：e1
+// 数组：[new, new, e1, e2, e3, e4]，索引：2，元素：e1
+// 数组：[new, new, new, e1, e2, e3, e4]，索引：3，元素：e1
+// 最终数组：[new, new, new, new, e1, e2, e3, e4]
+// e1 不断被访问，因为它不断被移回
+```
+
+删除未访问索引处的 _n_ 元素将使它们不再被访问。因为数组已经缩小，最后 _n_ 迭代将访问越界索引。如果此方法忽略不存在的索引（参见[数组方法和空槽](#数组方法和空槽)），最后的 _n_ 次迭代将会被跳过；否则，它们将收到 `undefined`：
+
+```js
+testSideEffect((arr, index) => {
+  if (index === 1) arr.splice(2, 1);
+});
+// 数组：[e1, e2, e3, e4]，索引：0，元素：e1
+// 数组：[e1, e2, e3, e4]，索引：1，元素：e2
+// 数组：[e1, e2, e4]，索引：2，元素：e4
+// 最终数组：[e1, e2, e4]
+// 不会访问索引 3 因为它越界
+
+// 与 find() 比较，后者将不存在的索引视为未定义：
+const arr2 = ["e1", "e2", "e3", "e4"];
+arr2.find((elem, index, arr) => {
+  console.log(`数组：[${arr.join(", ")}]，索引：${index}，元素：${elem}`);
+  if (index === 1) arr.splice(2, 1);
+  return false;
+});
+// 数组：[e1, e2, e3, e4]，索引：0，元素：e1
+// 数组：[e1, e2, e3, e4]，索引：1，元素：e2
+// 数组：[e1, e2, e4]，索引：2，元素：e4
+// 数组：[e1, e2, e4]，索引：3，元素：undefined
+```
+
+删除已访问索引处的 _n_ 元素不会改变它们在删除之前被访问的事实。因为数据已经缩小，在当前索引后的下 _n_ 元素被跳过。如果此方法忽略不存在索引，最后的 _n_ 次迭代将会被跳过；否则，它们将收到 `undefined`：
+
+```js
+testSideEffect((arr, index) => arr.splice(index, 1));
+// 数组：[e1, e2, e3, e4]，索引：0，元素：e1
+// 不会范围内 e2 因为 e2 现在的索引是 0，索引 0 已经被访问过
+// 数组：[e2, e3, e4]，索引：1，元素：e3
+// 不会范围内 e4 因为 e4 现在的索引是 1，索引 1 已经被访问过
+// 最终数组：[e2, e4]
+// 索引 2 越界，索引它不会被访问
+
+// 与 find() 比较，后者将不存在的索引视为未定义：
+const arr2 = ["e1", "e2", "e3", "e4"];
+arr2.find((elem, index, arr) => {
+  console.log(`数组：[${arr.join(", ")}]，索引：${index}，元素：${elem}`);
+  arr.splice(index, 1);
+  return false;
+});
+// 数组：[e1, e2, e3, e4]，索引：0，元素：e1
+// 数组：[e2, e3, e4]，索引：1，元素：e3
+// 数组：[e2, e4]，索引：2，元素：undefined
+// 数组：[e2, e4]，索引：3，元素：undefined
+```
+
+对于按索引降序迭代的方法，插入会导致元素被跳过，删除会导致元素被多次访问，调整上面的代码以查看效果。
+
 ## 规范
 
 {{Specifications}}
@@ -796,6 +933,6 @@ console.log(execResult); // [ "dbBd", "bB", "d" ]
 
 ## 参见
 
-- [索引集合类](/zh-CN/docs/Web/JavaScript/Guide/Indexed_collections)
+- [索引集合类](/zh-CN/docs/Web/JavaScript/Guide/Indexed_collections)指南
 - {{jsxref("TypedArray")}}
 - {{jsxref("ArrayBuffer")}}

From 62262aeda884629e47cb2d62315d6d353d27f0f5 Mon Sep 17 00:00:00 2001
From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com>
Date: Sat, 13 Jul 2024 04:56:59 +0200
Subject: [PATCH 195/698] [zh-cn] sync translated content (#22373)

Co-authored-by: Allo 
---
 files/zh-cn/_redirects.txt                    |  5 +-
 files/zh-cn/_wikihistory.json                 | 26 ++----
 .../first_steps/what_went_wrong/index.md      | 32 ++-----
 files/zh-cn/web/http/headers/index.md         |  2 -
 .../http/headers/large-allocation/index.md    | 77 ----------------
 .../errors/deprecated_octal/index.md          | 64 --------------
 .../errors/deprecated_octal_literal/index.md  | 54 ++++++++++++
 .../reference/errors/equal_as_assign/index.md | 54 ------------
 .../index.md                                  | 87 -------------------
 .../index.md                                  |  8 +-
 .../reference/errors/undefined_prop/index.md  | 58 -------------
 .../errors/unexpected_token/index.md          | 25 ++++--
 12 files changed, 90 insertions(+), 402 deletions(-)
 delete mode 100644 files/zh-cn/web/http/headers/large-allocation/index.md
 delete mode 100644 files/zh-cn/web/javascript/reference/errors/deprecated_octal/index.md
 create mode 100644 files/zh-cn/web/javascript/reference/errors/deprecated_octal_literal/index.md
 delete mode 100644 files/zh-cn/web/javascript/reference/errors/equal_as_assign/index.md
 delete mode 100644 files/zh-cn/web/javascript/reference/errors/missing_semicolon_before_statement/index.md
 rename files/zh-cn/web/javascript/reference/errors/{unterminated_string_literal => string_literal_eol}/index.md (88%)
 delete mode 100644 files/zh-cn/web/javascript/reference/errors/undefined_prop/index.md

diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt
index 10880690a5d6aa..9b26dc2a3b426f 100644
--- a/files/zh-cn/_redirects.txt
+++ b/files/zh-cn/_redirects.txt
@@ -2525,14 +2525,17 @@
 /zh-CN/docs/Web/JavaScript/Reference/Date/toJSON	/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/toJSON
 /zh-CN/docs/Web/JavaScript/Reference/Date/valueOf	/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/valueOf
 /zh-CN/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol	/zh-CN/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features
-/zh-CN/docs/Web/JavaScript/Reference/Errors/Bad_octal	/zh-CN/docs/Web/JavaScript/Reference/Errors/Deprecated_octal
+/zh-CN/docs/Web/JavaScript/Reference/Errors/Bad_octal	/zh-CN/docs/Web/JavaScript/Reference/Errors/Deprecated_octal_literal
 /zh-CN/docs/Web/JavaScript/Reference/Errors/Bad_return_or_yield	/zh-CN/docs/Web/JavaScript/Reference/Errors/Bad_return
 /zh-CN/docs/Web/JavaScript/Reference/Errors/Cant_access_property	/zh-CN/docs/Web/JavaScript/Reference/Errors/Unexpected_type
 /zh-CN/docs/Web/JavaScript/Reference/Errors/Deprecated_String_generics	/zh-CN/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features
 /zh-CN/docs/Web/JavaScript/Reference/Errors/Deprecated_expression_closures	/zh-CN/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features
+/zh-CN/docs/Web/JavaScript/Reference/Errors/Deprecated_octal	/zh-CN/docs/Web/JavaScript/Reference/Errors/Deprecated_octal_literal
 /zh-CN/docs/Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat	/zh-CN/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features
 /zh-CN/docs/Web/JavaScript/Reference/Errors/Malformed_formal_parameter	/zh-CN/docs/Web/JavaScript/Reference/Errors/Missing_formal_parameter
+/zh-CN/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement	/zh-CN/docs/Web/JavaScript/Reference/Errors/Unexpected_token
 /zh-CN/docs/Web/JavaScript/Reference/Errors/Not_a_codepoint	/zh-CN/docs/Web/JavaScript/Reference/Errors/Not_a_valid_code_point
+/zh-CN/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal	/zh-CN/docs/Web/JavaScript/Reference/Errors/String_literal_EOL
 /zh-CN/docs/Web/JavaScript/Reference/Errors/不能添加属性	/zh-CN/docs/Web/JavaScript/Reference/Errors/Cant_assign_to_property
 /zh-CN/docs/Web/JavaScript/Reference/Function	/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function
 /zh-CN/docs/Web/JavaScript/Reference/Function/apply	/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json
index 6ef710dc7aeca6..b24619f86166a3 100644
--- a/files/zh-cn/_wikihistory.json
+++ b/files/zh-cn/_wikihistory.json
@@ -23067,10 +23067,6 @@
     "modified": "2020-10-15T21:55:00.550Z",
     "contributors": ["zhangchen", "WayneCui"]
   },
-  "Web/HTTP/Headers/Large-Allocation": {
-    "modified": "2020-10-15T21:56:09.177Z",
-    "contributors": ["wyapx", "crper", "shevacjs"]
-  },
   "Web/HTTP/Headers/Last-Modified": {
     "modified": "2020-10-15T21:55:00.234Z",
     "contributors": ["WayneCui"]
@@ -24991,7 +24987,7 @@
     "modified": "2020-03-12T19:45:21.241Z",
     "contributors": ["Ende93"]
   },
-  "Web/JavaScript/Reference/Errors/Deprecated_octal": {
+  "Web/JavaScript/Reference/Errors/Deprecated_octal_literal": {
     "modified": "2020-03-12T19:46:39.086Z",
     "contributors": ["WayneCui"]
   },
@@ -24999,10 +24995,6 @@
     "modified": "2020-03-12T19:45:31.617Z",
     "contributors": ["Kaede_Shinoda", "Ende93"]
   },
-  "Web/JavaScript/Reference/Errors/Equal_as_assign": {
-    "modified": "2020-03-12T19:44:21.268Z",
-    "contributors": ["niaodan2b"]
-  },
   "Web/JavaScript/Reference/Errors/Getter_only": {
     "modified": "2020-03-12T19:46:35.397Z",
     "contributors": ["WayneCui"]
@@ -25083,10 +25075,6 @@
     "modified": "2020-03-12T19:46:25.852Z",
     "contributors": ["WayneCui"]
   },
-  "Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement": {
-    "modified": "2020-03-12T19:44:58.615Z",
-    "contributors": ["Davont", "jitingsun"]
-  },
   "Web/JavaScript/Reference/Errors/More_arguments_needed": {
     "modified": "2020-03-12T19:45:18.099Z",
     "contributors": ["Ende93"]
@@ -25163,6 +25151,10 @@
     "modified": "2020-03-12T19:45:16.824Z",
     "contributors": ["xgqfrms-GitHub", "Ende93"]
   },
+  "Web/JavaScript/Reference/Errors/String_literal_EOL": {
+    "modified": "2020-03-12T19:45:03.493Z",
+    "contributors": ["Ende93", "luckyG0429"]
+  },
   "Web/JavaScript/Reference/Errors/Too_much_recursion": {
     "modified": "2020-03-12T19:43:57.558Z",
     "contributors": ["Jack-Q"]
@@ -25171,10 +25163,6 @@
     "modified": "2020-03-12T19:45:21.644Z",
     "contributors": ["Ende93"]
   },
-  "Web/JavaScript/Reference/Errors/Undefined_prop": {
-    "modified": "2020-03-12T19:45:16.927Z",
-    "contributors": ["Ende93"]
-  },
   "Web/JavaScript/Reference/Errors/Unexpected_token": {
     "modified": "2020-03-12T19:45:18.592Z",
     "contributors": ["Ende93"]
@@ -25187,10 +25175,6 @@
     "modified": "2020-03-12T19:46:23.117Z",
     "contributors": ["Lxio", "WayneCui"]
   },
-  "Web/JavaScript/Reference/Errors/Unterminated_string_literal": {
-    "modified": "2020-03-12T19:45:03.493Z",
-    "contributors": ["Ende93", "luckyG0429"]
-  },
   "Web/JavaScript/Reference/Errors/in_operator_no_object": {
     "modified": "2020-03-12T19:46:27.485Z",
     "contributors": ["WayneCui"]
diff --git a/files/zh-cn/learn/javascript/first_steps/what_went_wrong/index.md b/files/zh-cn/learn/javascript/first_steps/what_went_wrong/index.md
index 183b2ba3a31810..ded0c71ba65456 100644
--- a/files/zh-cn/learn/javascript/first_steps/what_went_wrong/index.md
+++ b/files/zh-cn/learn/javascript/first_steps/what_went_wrong/index.md
@@ -173,24 +173,6 @@ Math.floor(Math.random() * 100) + 1;
 
 代码中还会遇到其他常见错误。本节将指出其中的大部分。
 
-### SyntaxError: missing ; before statement
（语法错误：语句缺少分号）
-
-这个错误通常意味着你漏写了一行代码最后的分号，但是此类错误有时候会更加隐蔽。例如如果我们把 `checkGuess()` 函数中的这一行 :
-
-```js
-let userGuess = Number(guessField.value);
-```
-
-改成
-
-```js
-let userGuess === Number(guessField.value);
-```
-
-将抛出一个错误。因为系统认为你在做其他事情。请不要把赋值运算符（`=`，为一个变量赋值）和严格等于运算符（`===`，比较两个值是否相等，返回 `true`/`false`）弄混淆。
-
-> **备注：** 此错误的更多详细信息请参考 [SyntaxError: missing ; before statement](/zh-CN/docs/Web/JavaScript/Reference/Statements) 。
-
 ### 不管输入什么程序总说“你猜对了！”
 
 这是混淆赋值和严格等于运算符的又一症状。例如我们把 `checkGuess()` 里的：
@@ -207,13 +189,13 @@ if (userGuess = randomNumber) {
 
 因为条件永远返回 `true`，使得程序报告你猜对了。小心哦！
 
-### SyntaxError: missing ) after argument list
（语法错误：参数表末尾缺少括号）
+### SyntaxError: missing ) after argument list
 
 这个很简单。通常意味着函数/方法调用后的结束括号忘写了。
 
 > **备注：** 有关此错误的更多详细信息请参考： [SyntaxError: missing ) after argument list](/zh-CN/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list)。
 
-### SyntaxError: missing : after property id
（语法错误：属性 ID 后缺少冒号）
+### SyntaxError: missing : after property id
 
 JavaScript 对象的形式有错时通常会导致此类错误，如果把
 
@@ -229,21 +211,17 @@ function checkGuess( {
 
 浏览器会认为我们试图将函数的内容当作参数传回函数。写圆括号时要小心！
 
-### SystaxError: missing } after function body
（语法错误：函数体末尾缺少花括号）
+### SystaxError: missing } after function body
 
 这个简单。通常意味着函数或条件结构中丢失了一个花括号。如果我们将 `checkGuess()` 函数末尾的花括号删除，就会得到这个错误。
 
-### SyntaxError: expected expression, got '_string_'
（语法错误：得到一个 '_string_' 而非表达式）
-
-或者
-
-### SyntaxError: unterminated string literal
（语法错误：字符串字面量未正常结束）
+### SyntaxError: expected expression, got '_string_' 或 SyntaxError: string literal contains an unescaped line break
 
 这个错误通常意味着字符串两端的引号漏写了一个。如果你漏写了字符串开始的引号，将得到第一条出错信息，这里的 '_string'_ 将被替换为浏览器发现的意外字符。如果漏写了末尾的引号将得到第二条。
 
 对于所有的这些错误，想想我们在实例中是如何逐步解决的。错误出现时，转到错误所在的行观察是否能发现问题所在。记住，错误不一定在那一行，错误的原因也可能和我们在上面所说的不同！
 
-> **备注：** 有关这些错误的更多详细信息请参考：[SyntaxError: Unexpected token](/zh-CN/docs/Web/JavaScript/Reference/Errors/Unexpected_token) 以及 [SyntaxError: unterminated string literal](/zh-CN/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal)。
+> **备注：** 有关这些错误的更多详细信息请参考：[SyntaxError: Unexpected token](/zh-CN/docs/Web/JavaScript/Reference/Errors/Unexpected_token) 以及 [SyntaxError: string literal contains an unescaped line break](/zh-CN/docs/Web/JavaScript/Reference/Errors/String_literal_EOL)。
 
 ## 小结
 
diff --git a/files/zh-cn/web/http/headers/index.md b/files/zh-cn/web/http/headers/index.md
index 0a25c6d1221f73..6168a7dc58ee16 100644
--- a/files/zh-cn/web/http/headers/index.md
+++ b/files/zh-cn/web/http/headers/index.md
@@ -364,8 +364,6 @@ _[在此处](/zh-CN/docs/Glossary/CORS)了解更多关于 CORS。_
   - : 包含消息发出的日期和时间。
 - {{HTTPHeader("Early-Data")}} {{experimental_inline}}
   - : 指示请求已在 TLS 早期数据中传送。
-- {{HTTPHeader("Large-Allocation")}} {{deprecated_inline}}
-  - : 告诉浏览器正在加载的页面将要执行大量分配。
 - {{HTTPHeader("Link")}}
   - : [`Link`](https://datatracker.ietf.org/doc/html/rfc5988#section-5) 实体标头字段提供了一种在 HTTP 标头中序列化一个或多个链接的方法。它在语义上等同于 HTML 的 {{HTMLElement("link")}} 元素。
 - {{HTTPHeader("Push-Policy")}} {{experimental_inline}}
diff --git a/files/zh-cn/web/http/headers/large-allocation/index.md b/files/zh-cn/web/http/headers/large-allocation/index.md
deleted file mode 100644
index c36836c761f2d6..00000000000000
--- a/files/zh-cn/web/http/headers/large-allocation/index.md
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: Large-Allocation
-slug: Web/HTTP/Headers/Large-Allocation
-l10n:
-  sourceCommit: 0880a90f3811475d78bc4b2c344eb4146f25f66c
----
-
-{{HTTPSidebar}}{{Deprecated_Header}}{{Non-standard_header}}
-
-非标准的 **`Large-Allocation`** 响应标头用于告知浏览器加载该页面可能需要申请大内存块。它没有被任何当前版本的浏览器实现，但将它发送到任何浏览器都是安全的。
-
-[WebAssembly](/zh-CN/docs/WebAssembly) 或者 asm.js 应用会使用大量连续的已分配内存块。例如，对于一些复杂的游戏，其申请的空间将会非常大，有时甚至会达到 1GB。`Large-Allocation` 告知浏览器其将要加载的页面可能需要申请一个大的连续内存空间，浏览器依据该标头可能会单独启动一个专有的进程用于处理该页面。
-
-

       暗黙の ARIA ロール
       
-        対応するロールなしgroup
       
     
1003
       未対応のデータ
       
-        エンドポイントが受け付けない種類のデータを受信したため、接続を終了した。（例えば、テキストのみのエンドポイントがバイナリデータを受信した場合など。）
+        エンドポイントが受け付けない種類のデータを受信したため、接続を終了した。（例えば、テキストのみのエンドポイントがバイナリーデータを受信した場合など。）
       
     

     

     

       1012サービス再起動サービス再起動
       
         サーバーが再起動するため、接続を終了しようとしている。
       
     

     

       1013後で再試行後で再試行
       
         サーバーが過負荷のため、一部のクライアントを切断するなど、一時的な状態により接続を終了している。
       

-  
-    
-      
-      
-    
-    
-      
-      
-    
-  
-
标头类型{{Glossary("Response header", "响应标头")}}
{{Glossary("Forbidden header name", "禁止修改的标头")}}否

-
-## 语法
-
-```http
-Large-Allocation: 0
-Large-Allocation: 
-```
-
-## 指令
-
-- `0`
-  - : 0 是一个特殊的值，代表分配的大小是不确定的。
-- ``
-  - : 预期需要申请的内存大小，以兆字节为单位。
-
-## 示例
-
-```http
-Large-Allocation: 0
-Large-Allocation: 500
-```
-
-## 排除错误
-
-如果使用不当，`Large-Allocation` 标头会抛出警告或者错误信息，你可以在 [web 控制台](https://firefox-source-docs.mozilla.org/devtools-user/web_console/index.html)中查看它们。
-
-- 由于存在 `Large-Allocation` 标头，当前页面会在一个新的进程加载。
-  - : 该消息意味着浏览器遇到了 `Large-Allocation` 标头，并且能够在一个新的进程中重新加载页面，这个进程应该有更多的可用连续内存。
-- `Large-Allocation` 标头由非 GET 请求触发而被直接忽略。
-  - : 当使用 {{HTTPMethod("POST")}} 请求加载文档时，加载目前无法被重定向到新的进程中。这个错误会在使用非 GET HTTP 方法加载带有 `Large-Allocation` 标头的文档时显示。例如，这可能是由于当前文档是通过表单提交加载的。
-- 由于存在通过框架层级或者 {{domxref("window.opener")}} 引用当前浏览上下文的窗口，`Large-Allocation` 标头被直接忽略。
-
-  - : 该错误意味着文档不是在用户打开的或者 noopener 打开的标签或窗口的顶层加载的。它可能在以下情况下出现：
-
-    - 带有 `Large-Allocation` 标头的文档是在 {{HTMLElement("iframe")}} 中加载的。Firefox 目前无法将 iframe 移动到新的进程中，所以文档必须在当前进程中加载。
-    - 带有 `Large-Allocation` 标头的文档是在由 {{domxref("window.open()")}}、`` 或者其他类似方法在没有设置 `rel="noopener"` 或者 `"noopener"` 特性的情况下打开的窗口中加载的。这些窗口必须与其打开的窗口保持在同一进程中，因为它们可以相互通信，这意味着我们不能允许它们切换进程。
-    - 带有 `Large-Allocation` 标头的文档已经使用 {{domxref("window.open()")}}、`` 或其他类似方法在没有设置 `rel="noopener"` 或者 `"noopener"` 特性的情况下打开了另一个窗口。这与上面的原因相同，即它们可以相互通信，因此我们不能允许它们切换进程。
-
-- 由于存在 `Large-Allocation` 标头，当前页面会在一个新的进程加载，然而 `Large-Allocation` 进程创建在非 Win32 平台上被禁用了。
-  - : Firefox 目前仅在 32 位 Windows 构建中支持 `Large-Allocation` 标头，因为内存碎片化在 64 位构建中不是问题。如果你正在运行非 win32 版本的 Firefox，这个错误会出现。你可以在 about:config 中使用 `dom.largeAllocation.forceEnable` 布尔首选项来禁用该检查。
-
-## 规范
-
-现还不属于任何规范，可以通过[这篇文档](https://gist.github.com/mystor/5739e222e398efc6c29108be55eb6fe3)了解该标头的背后思想。
-
-## 浏览器兼容性
-
-{{Compat}}
-
-## 参见
-
-- [WebAssembly](/zh-CN/docs/WebAssembly)
diff --git a/files/zh-cn/web/javascript/reference/errors/deprecated_octal/index.md b/files/zh-cn/web/javascript/reference/errors/deprecated_octal/index.md
deleted file mode 100644
index 072c2019f823a0..00000000000000
--- a/files/zh-cn/web/javascript/reference/errors/deprecated_octal/index.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: 'SyntaxError: "0"-prefixed octal literals and octal escape seq. are deprecated'
-slug: Web/JavaScript/Reference/Errors/Deprecated_octal
----
-
-{{jsSidebar("Errors")}}
-
-## 错误提示
-
-```plain
-SyntaxError:
-"0"-prefixed octal literals and octal escape sequences are deprecated;
-for octal literals use the \"0o\" prefix instead
-```
-
-## 错误类型
-
-语法错误（{{jsxref("SyntaxError")}} ），只出现于[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)下。
-
-## 哪里出错了？
-
-八进制字面量与八进制转义序列语法已经被废弃，在严格模式下会报语法错误（{{jsxref("SyntaxError")}}）。在 ECMAScript 2015 及以后的规范中，标准语法是前导 0 后面跟一个大写或小写的拉丁文字母 "O" (`0o` 或 `0O)`。
-
-## 示例
-
-### 前导"0"形式的八进制字面量
-
-```js example-bad
-"use strict";
-
-03;
-
-// SyntaxError: "0"-prefixed octal literals and octal escape sequences
-// are deprecated
-```
-
-### 八进制转义序列
-
-```js example-bad
-"use strict";
-
-"\251";
-
-// SyntaxError: "0"-prefixed octal literals and octal escape sequences
-// are deprecated
-```
-
-### 合法的八进制数字
-
-使用前导 0 后面跟字母 "o" 或 "O" 的形式：
-
-```js example-good
-0o3;
-```
-
-至于八进制转义序列，你可以使用十六进制转义序列来代替：
-
-```js example-good
-"\xA9";
-```
-
-## 参见
-
-- [Lexical grammar](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#Octal)
diff --git a/files/zh-cn/web/javascript/reference/errors/deprecated_octal_literal/index.md b/files/zh-cn/web/javascript/reference/errors/deprecated_octal_literal/index.md
new file mode 100644
index 00000000000000..577d6093efaecf
--- /dev/null
+++ b/files/zh-cn/web/javascript/reference/errors/deprecated_octal_literal/index.md
@@ -0,0 +1,54 @@
+---
+title: 'SyntaxError: "0"-prefixed octal literals are deprecated'
+slug: Web/JavaScript/Reference/Errors/Deprecated_octal_literal
+l10n:
+  sourceCommit: 4e0349ec31c38bebd56e56782170666e11ae5ad3
+---
+
+{{jsSidebar("Errors")}}
+
+仅在 JavaScript [严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)下出现的异常“0-prefixed octal literals are deprecated; use the "0o" prefix instead”在使用了已被弃用的八进制字面量（`0` 后跟数字）时出现。
+
+## 错误提示
+
+```plain
+SyntaxError: Octal literals are not allowed in strict mode. (V8-based)
+SyntaxError: Decimals with leading zeros are not allowed in strict mode. (V8-based)
+SyntaxError: Unexpected number (V8-based)
+SyntaxError: "0"-prefixed octal literals are deprecated; use the "0o" prefix instead (Firefox)
+SyntaxError: Decimal integer literals with a leading zero are forbidden in strict mode (Safari)
+```
+
+## 错误类型
+
+语法错误（{{jsxref("SyntaxError")}}），只出现于[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)下。
+
+## 哪里出错了？
+
+八进制字面量已被弃用。在十进制整数前加上 `0` 时，实际上会将其转换为八进制字面量，这可能会令人感到惊讶。标准化的语法使用前导零后跟一个小写或大写的拉丁字母“O”（`0o` 或 `0O`）。
+
+前导零总是被禁止的，即使字面量不是有效的八进制字面量语法（例如字面量包含数字 `8` 或 `9`，或者有小数点）。数字字面量仅在其值为 0 时才能以 `0` 开头。
+
+## 示例
+
+### 前导“0”形式的八进制字面量
+
+```js example-bad
+"use strict";
+
+03;
+
+// SyntaxError: "0"-prefixed octal literals are deprecated; use the "0o" prefix instead
+```
+
+### 有效的八进制数字
+
+使用前导零后跟字母“o”或“O”：
+
+```js example-good
+0o3;
+```
+
+## 参见
+
+- [词法文法](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#八进制)
diff --git a/files/zh-cn/web/javascript/reference/errors/equal_as_assign/index.md b/files/zh-cn/web/javascript/reference/errors/equal_as_assign/index.md
deleted file mode 100644
index 20d07acaf719bf..00000000000000
--- a/files/zh-cn/web/javascript/reference/errors/equal_as_assign/index.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: "SyntaxError: test for equality (==) mistyped as assignment (=)?"
-slug: Web/JavaScript/Reference/Errors/Equal_as_assign
----
-
-{{jsSidebar("Errors")}}
-
-## 消息
-
-```plain
-Warning: SyntaxError: test for equality (==) mistyped as assignment (=)?
-```
-
-## 错误类型
-
-{{jsxref("SyntaxError")}} 只在[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)下会出现的警告。
-
-## 什么地方出错了？
-
-在通常期望进行相等判定（`==`）的地方出现了赋值`（=`）。为了帮助调试，JavaScript（在开启严格模式的情况下）会对这种情况进行警告。
-
-## 示例
-
-### 条件表达式内的赋值
-
-不建议在条件表达式中（例如 [`if...else`](/zh-CN/docs/Web/JavaScript/Reference/Statements/if...else)）使用简单赋值语句，因为在扫视代码的时候赋值操作与相等判定容易产生混淆。例如，不要使用以下写法：
-
-```js-nolint example-bad
-if (x = y) {
-  // do the right thing
-}
-```
-
-如果你需要在条件表达式中使用赋值语句，通常的做法是用一对括号把赋值语句包起来。例如：
-
-```js
-if ((x = y)) {
-  // do the right thing
-}
-```
-
-否则，你的本意可能是想用比较操作符（如 `==` 或 `===`）：
-
-```js
-if (x == y) {
-  // do the right thing
-}
-```
-
-## 相关页面
-
-- [Strict mode](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)
-- [`if...else`](/zh-CN/docs/Web/JavaScript/Reference/Statements/if...else)
-- [Comparison operators](/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators)
diff --git a/files/zh-cn/web/javascript/reference/errors/missing_semicolon_before_statement/index.md b/files/zh-cn/web/javascript/reference/errors/missing_semicolon_before_statement/index.md
deleted file mode 100644
index 1b93d2eb9b3e17..00000000000000
--- a/files/zh-cn/web/javascript/reference/errors/missing_semicolon_before_statement/index.md
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: "SyntaxError: missing ; before statement"
-slug: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement
----
-
-{{jsSidebar("Errors")}}
-
-## 信息
-
-```plain
-SyntaxError: Expected ';' (Edge)
-```
-
-```plain
- SyntaxError: missing ; before statement (Firefox)
-```
-
-## 错误类型
-
-{{jsxref("SyntaxError")}}.
-
-## 哪里出错了？
-
-某个地方丢失了一个 (`;`)。 [JavaScript 语句](/zh-CN/docs/Web/JavaScript/Reference/Statements)必须以分号结束。有一些是由 [自动分号插入 (ASI)](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion) 的使用所影响到的，但在这种情况下，你需要提供一个分号，以便于 JavaScript 可以将源代码解析正确。然而，通常情况下，这个错误只是另一个错误一个导致的，如不正确转义字符串，使用 var 的错误。你也可能有太多的括号的地方。当出现此错误时，仔细检查语法。
-
-## 示例
-
-转义字符串
-
-这个错误可能发生不正确时容易转义字符串 JavaScript 引擎是希望你的字符串的末尾已经。例如：
-
-```js example-bad
-var foo = 'Tom's bar';
-// SyntaxError: missing ; before statement
-```
-
-你可以用双引号，或者用\转义：
-
-```js-nolint example-good
-var foo = "Tom's bar";
-var foo = 'Tom\'s bar';
-```
-
-### 用 var 声明属性
-
-你不能将带有变量声明的对象或数组的属性用`var`来声明。
-
-```js example-bad
-var obj = {};
-var obj.foo = "hi"; // SyntaxError missing ; before statement
-
-var array = [];
-var array[0] = "there"; // SyntaxError missing ; before statement
-```
-
-而是省略掉`var`关键词：
-
-```js example-good
-var obj = {};
-obj.foo = "hi";
-
-var array = [];
-array[0] = "there";
-```
-
-### 不推荐使用的关键字
-
-如果你用的是另一种编程语言，那么在 javaScript 中使用不具有相同或完全没有意义的关键字也是很常见的：
-
-```js example-bad
-def print(info){
-  console.log(info);
-}; // SyntaxError missing ; before statement
-```
-
-因此，建议使用`function`而不是`def`：
-
-```js example-good
-function print(info) {
-  console.log(info);
-}
-```
-
-## 参考
-
-- [自动分号插入 (ASI)](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion)
-- [JavaScript 语句](/zh-CN/docs/Web/JavaScript/Reference/Statements)
diff --git a/files/zh-cn/web/javascript/reference/errors/unterminated_string_literal/index.md b/files/zh-cn/web/javascript/reference/errors/string_literal_eol/index.md
similarity index 88%
rename from files/zh-cn/web/javascript/reference/errors/unterminated_string_literal/index.md
rename to files/zh-cn/web/javascript/reference/errors/string_literal_eol/index.md
index 6eeaf33fecba4f..6871229a49b915 100644
--- a/files/zh-cn/web/javascript/reference/errors/unterminated_string_literal/index.md
+++ b/files/zh-cn/web/javascript/reference/errors/string_literal_eol/index.md
@@ -1,6 +1,6 @@
 ---
-title: "SyntaxError: unterminated string literal"
-slug: Web/JavaScript/Reference/Errors/Unterminated_string_literal
+title: "SyntaxError: string literal contains an unescaped line break"
+slug: Web/JavaScript/Reference/Errors/String_literal_EOL
 ---
 
 {{jsSidebar("Errors")}}
@@ -8,7 +8,9 @@ slug: Web/JavaScript/Reference/Errors/Unterminated_string_literal
 ## 信息
 
 ```plain
-SyntaxError: unterminated string literal
+SyntaxError: Invalid or unexpected token (V8-based)
+SyntaxError: '' string literal contains an unescaped line break (Firefox)
+SyntaxError: Unexpected EOF (Safari)
 ```
 
 ## 错误类型
diff --git a/files/zh-cn/web/javascript/reference/errors/undefined_prop/index.md b/files/zh-cn/web/javascript/reference/errors/undefined_prop/index.md
deleted file mode 100644
index 68dd5317d442a9..00000000000000
--- a/files/zh-cn/web/javascript/reference/errors/undefined_prop/index.md
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: 'ReferenceError: reference to undefined property "x"'
-slug: Web/JavaScript/Reference/Errors/Undefined_prop
-l10n:
-  sourceCommit: 6d606174faaedaa5dee7b7ebd87602cd51e5dd7e
----
-
-{{jsSidebar("Errors")}}
-
-当脚本尝试去访问一个不存在的对象属性时，就会出现 JavaScript 警告“reference to undefined property”。
-
-## 消息
-
-```plain
-ReferenceError: reference to undefined property "x" (Firefox)
-```
-
-## 错误类型
-
-（仅限 Firefox）仅在 `javascript.options.strict` 首选项设置为 `true` 的情况下会出现 {{jsxref("ReferenceError")}} 警告。
-
-## 哪里出错了？
-
-脚本尝试去访问一个不存在的对象属性。有两种方法可以访问属性，请参阅[属性访问器](/zh-CN/docs/Web/JavaScript/Reference/Operators/Property_accessors)参考页以获取更多信息。
-
-## 示例
-
-### 无效的
-
-本例中，`bar` 属性是未定义的，因此会出现 `ReferenceError`。
-
-```js example-bad
-const foo = {};
-foo.bar; // ReferenceError: reference to undefined property "bar"
-```
-
-### 有效的
-
-为了避免错误，你需要向对象添加 `bar` 的定义或在尝试访问 `bar` 属性之前检查 `bar` 属性是否存在；可以使用 {{jsxref("Operators/in", "in")}} 运算符或 {{jsxref("Object.hasOwn()")}} 方法来实现，如下所示：
-
-```js example-good
-const foo = {};
-
-// 定义 bar 属性
-
-foo.bar = "moon";
-console.log(foo.bar); // "moon"
-
-// 在访问 bar 属性之前测试其是否存在
-
-if (Object.hasOwn(foo, "bar")) {
-  console.log(foo.bar);
-}
-```
-
-## 参见
-
-- [属性访问器](/zh-CN/docs/Web/JavaScript/Reference/Operators/Property_accessors)
diff --git a/files/zh-cn/web/javascript/reference/errors/unexpected_token/index.md b/files/zh-cn/web/javascript/reference/errors/unexpected_token/index.md
index 674baa6a92a3e0..3ec6b4275a4382 100644
--- a/files/zh-cn/web/javascript/reference/errors/unexpected_token/index.md
+++ b/files/zh-cn/web/javascript/reference/errors/unexpected_token/index.md
@@ -5,15 +5,24 @@ slug: Web/JavaScript/Reference/Errors/Unexpected_token
 
 {{jsSidebar("Errors")}}
 
+JavaScript 异常“unexpected token”会在解析器在给定位置没有识别到它可以理解的标记（而无法理解程序的结构）时发生。这可能只是一个简单的拼写错误。
+
 ## 信息
 
 ```plain
-SyntaxError: expected expression, got "x"
-SyntaxError: expected property name, got "x"
-SyntaxError: expected target, got "x"
-SyntaxError: expected rest argument name, got "x"
-SyntaxError: expected closing parenthesis, got "x"
-SyntaxError: expected '=>' after argument list, got "x"
+SyntaxError: Unexpected token ';' (V8-based)
+SyntaxError: Unexpected identifier 'x' (V8-based)
+SyntaxError: Unexpected number (V8-based)
+SyntaxError: Unexpected string (V8-based)
+SyntaxError: Unexpected regular expression (V8-based)
+SyntaxError: Unexpected template string (V8-based)
+SyntaxError: unexpected token: identifier (Firefox)
+SyntaxError: expected expression, got "x" (Firefox)
+SyntaxError: expected property name, got "x" (Firefox)
+SyntaxError: expected target, got "x" (Firefox)
+SyntaxError: expected meta, got "x" (Firefox)
+SyntaxError: expected rest argument name, got "x" (Firefox)
+SyntaxError: expected closing parenthesis, got "x" (Firefox)
 ```
 
 ## 错误类型
@@ -42,6 +51,6 @@ Math.max(2, 42);
 Math.max(2, 42, 13 + 37);
 ```
 
-## 相关
+## 参见
 
-- {{jsxref("Math.max()")}}
+- {{jsxref("SyntaxError")}}

From a47dde89bff09ca15500812245132f848758bf07 Mon Sep 17 00:00:00 2001
From: Hoarfroster 
Date: Sat, 13 Jul 2024 11:03:43 +0800
Subject: [PATCH 196/698] zh-CN: update the translation of the "Client-side web
 APIs" article (#22369)

Co-authored-by: A1lo 
---
 .../javascript/client-side_web_apis/index.md  | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/index.md
index 51ddff5158209c..6e2e830ceb5068 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/index.md
@@ -1,33 +1,35 @@
 ---
 title: 客户端 Web API
 slug: Learn/JavaScript/Client-side_web_APIs
+l10n:
+  sourceCommit: 26e2f9883e0e73def04c0e86fec6da3ec42e66b3
 ---
 
 {{LearnSidebar}}
 
-当你给网页或者网页应用编写客户端的 JavaScript 时，你很快会遇上应用程序接口（API）——这些编程特性可用来操控网站所基于的浏览器与操作系统的不同方面，或是操控由其他网站或服务端传来的数据。在这个单元里，我们将一同探索什么是 API，以及如何使用一些在你开发中将经常遇见的 API。
+当你给网页或者应用编写客户端的 JavaScript 时，你很快会碰上**应用程序接口**（**API**）。API 是一些用于操控网站所基于的浏览器与操作系统的不同方面，或是操控由其他网站或服务端传来的数据的编程特性。在这个单元里，我们将一同探索什么是 API，以及如何使用一些在你开发中将经常遇见的 API。
 
 ## 预备知识
 
-若想深入理解这个单元的内容，你必须能够以自己的能力较好地学完之前的几个章节 ([JavaScript 第一步](/zh-CN/docs/Learn/JavaScript/First_steps), [JavaScript](/zh-CN/docs/Learn/JavaScript/First_steps)[基础要件](/zh-CN/docs/Learn/JavaScript/Building_blocks), 和[JavaScript](/zh-CN/docs/Learn/JavaScript/First_steps)[对象介绍](/zh-CN/docs/Learn/JavaScript/Objects)). 这几部分涉及到了许多简单的 API 的使用，如果没有它们我们将很难做一些实际的事情。在这个教程中，我们会认为你懂得 JavaScript 的核心知识，而且我们将更深入地探索常见的网页 API。
+若想深入理解这个单元的内容，你必须能够以自己的能力较好地学完之前的几个章节（[JavaScript 第一步](/zh-CN/docs/Learn/JavaScript/First_steps)、[创建 JavaScript 代码块](/zh-CN/docs/Learn/JavaScript/Building_blocks) 和 [JavaScript 对象介绍](/zh-CN/docs/Learn/JavaScript/Objects)）。这几部分涉及到了许多简单的 API 的使用，如果没有它们我们将很难做一些实际的事情。在这个教程中，我们默认你已经掌握了 JavaScript 的核心知识，然后我们将更深入地探索常见的 Web API。
 
-若你知道 [HTML](/zh-CN/docs/Learn/HTML) 和 [CSS](/zh-CN/docs/Learn/CSS) 的基本知识，也会对理解这个单元的内容大有裨益。
+了解 [HTML](/zh-CN/docs/Learn/HTML) 和 [CSS](/zh-CN/docs/Learn/CSS) 的基本知识，也会对理解这个单元的内容大有裨益。
 
-> **备注：** 如果你正在使用一台无法创建你自身文件的电脑、平板或其他设备，你可以尝试使用一些在线网页编辑器如[JSBin](https://jsbin.com/)或者[Glitch](https://glitch.com/)，来尝试编辑一些代码示例。
+> **备注：** 如果你正在使用一台无法创建你自己的文件的电脑、平板或其他设备，你可以尝试使用一些在线网页编辑器如 [JSBin](https://jsbin.com/) 或者 [Glitch](https://glitch.com/) 来尝试编辑一些代码示例。
 
-## 向导
+## 指南
 
 - [Web API 简介](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Introduction)
-  - : 首先，我们将从一个更高的角度来看这些 API —它们是什么，它们怎么起作用的，你该怎么在自己的代码中使用它们以及他们是怎么构成的？我们依旧会再来看一看这些 API 有哪些主要的种类和他们会有哪些用处。
+  - : 首先，我们将从一个更高的角度来看这些 API：它们是什么，它们怎么起作用的，你该怎么在自己的代码中使用它们以及他们是怎么构成的？我们也会看看不同的主要 API 类别是什么，以及它们有什么样的用途。
 - [操作文档](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)
-  - : 当你在制作 WEB 页面和 APP 时，一个你最经常想要做的事就是通过一些方法来操作 WEB 文档。这其中最常见的方法就是使用文档对象模型 Document Object Model (DOM)，它是一系列大量使用了 {{domxref("Document")}} object 的 API 来控制 HTML 和样式信息。通过这篇文章，我们来看看使用 DOM 方面的一些细节，以及其他一些有趣的 API 能够通过一些有趣的方式改变你的环境。
+  - : 当你编写网页和应用时，你最常见的任务之一就是以某种方式操作网页中的文档。这通常是通过使用文档对象模型（DOM）来完成的——DOM 是一组用于控制 HTML 和样式信息的 API，其使用了大量的 {{domxref("Document")}} 对象。在这篇文章中，我们将详细讨论如何使用 DOM 以及一些其他有趣的 API。它们可以以有趣的方式改变你的环境。
 - [从服务器获取数据](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)
-  - : 在现代网页及其 APP 中另外一个很常见的任务就是与服务器进行数据交互时不再刷新整个页面，这看起来微不足道，但却对一个网页的展现和交互上起到了很大的作用，在这篇文章里，我们将阐述这个概念，然后来了解实现这个功能的技术，例如 {{domxref("XMLHttpRequest")}} 和 [Fetch API](/zh-CN/docs/Web/API/Fetch_API).（抓取 API）。
+  - : 在现代网页及其 APP 中另外一个很常见的任务就是与服务器进行数据交互时不再刷新整个页面，这看起来微不足道，但却对一个网页的展现和交互上起到了很大的作用，在这篇文章里，我们将阐述这个概念，然后来了解实现这个功能的技术，例如 {{domxref("XMLHttpRequest")}} 和 [Fetch API](/zh-CN/docs/Web/API/Fetch_API)。
 - [第三方 API](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs)
-  - : 到目前为止我们所涉及的 API 都是浏览器内置的，但并不代表所有。许多大网站如 Google Maps, Twitter, Facebook, PayPal 等，都提供他们的 API 给开发者们去使用他们的数据（比如在你的博客里展示你分享的推特内容）或者服务（如在你的网页里展示定制的谷歌地图或接入 Facebook 登录功能）。这篇文章介绍了浏览器 API 和第三方 API 的差别以及一些最新的典型应用。
+  - : 到目前为止我们所涉及的 API 都是浏览器内置的，但并不代表所有。许多大网站如 Google Maps、Facebook、PayPal 等，都提供它们的 API 给开发者们去使用他们的数据（比如在你的博客里展示你分享的推特内容）或者服务（如在你的网页里展示定制的谷歌地图或接入 Facebook 登录功能）。这篇文章介绍了浏览器 API 和第三方 API 的差别以及一些最新的典型应用。
 - [绘制图形](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics)
-  - : 浏览器包含多种强大的图形编程工具，从可缩放矢量图形语言 Scalable Vector Graphics ([SVG](/zh-CN/docs/Web/SVG)) language，到 HTML 绘制元素 {{htmlelement("canvas")}} 元素 ([The Canvas API](/zh-CN/docs/Web/API/Canvas_API) and [WebGL](/zh-CN/docs/Web/API/WebGL_API)). 这篇文章提供了部分 canvas 的简介，以及让你更深入学习的资源。
+  - : 浏览器包含多种强大的图形编程工具，从可缩放矢量图形语言 [SVG](/zh-CN/docs/Web/SVG)，到 HTML 绘制元素 {{htmlelement("canvas")}} 元素（[Canvas API](/zh-CN/docs/Web/API/Canvas_API) 以及 [WebGL](/zh-CN/docs/Web/API/WebGL_API)）。这篇文章提供了部分 Canvas 的简介，以及让你更深入学习的资源。
 - [视频和音频 API](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs)
-  - : HTML5 能够通过元素标签嵌入富媒体——{{htmlelement("video")}} and {{htmlelement("audio")}}——而将有自己的 API 来控制回放，搜索等功能。本文向你展示了如何创建自定义播放控制等常见的任务。
+  - : HTML5 能够通过元素标签嵌入富媒体：{{htmlelement("video")}}、{{htmlelement("audio")}}。这些元素同时带来了它们的一些 API 用于控制回放，搜索等功能。本文向你展示了如何创建自定义播放控制等常见的任务。
 - [客户端存储](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage)
-  - : 现代 web 浏览器拥有很多不同的技术，能够让你存储与网站相关的数据，并在需要时调用它们，能够让你长期保存数据、保存离线网站及其他实现其他功能。本文解释了这些功能的基本原理。
+  - : 现代 Web 浏览器拥有很多不同的技术，能够让你存储与网站相关的数据，并在需要时调用它们，能够让你长期保存数据、保存离线网站及其他实现其他功能。本文解释了这些功能的基本原理。

From 6b8a93ff5a3c2b6c84b08431bd607f54c0295f0e Mon Sep 17 00:00:00 2001
From: yuqqs <175424616+yuqqs@users.noreply.github.com>
Date: Sat, 13 Jul 2024 12:25:13 +0900
Subject: [PATCH 197/698] zh-CN: correct the presence of response body of HTTP
 TRACE method (#22382)

---
 files/zh-cn/web/http/methods/trace/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/zh-cn/web/http/methods/trace/index.md b/files/zh-cn/web/http/methods/trace/index.md
index 56d6a8de516196..c7842dc0815bad 100644
--- a/files/zh-cn/web/http/methods/trace/index.md
+++ b/files/zh-cn/web/http/methods/trace/index.md
@@ -17,7 +17,7 @@ slug: Web/HTTP/Methods/TRACE
     

     

       成功的响应是否有主体否是
     

     

       {{Glossary("Safe/HTTP", "安全")}}

@@ -38,13 +40,13 @@ slug: Learn/JavaScript/Client-side_web_APIs/Fetching_data
 
 ![传统页面加载流程](traditional-loading.svg)
 
-这个模型适用于许多站点。但请考虑一个几乎是以数据驱动的网站。例如，[温哥华图书馆](https://www.vpl.ca/)这样的图书馆网站。你可以将此类网站视作数据库的用户界面。它可能会允许你搜索特定类型的书籍，或者根据你之前借过的书籍向你推荐你可能喜欢的书籍。在你这样操作时，它需要使用新的书集来更新用于显示的页面。但请注意，大部分的页面内容（包括页眉、侧边栏和页脚等元素）将保持不变。
+这个模型适用于许多站点。但请考虑一个几乎是以数据驱动的网站，例如[温哥华图书馆](https://www.vpl.ca/)这样的图书馆网站。你可以将此类网站视作数据库的用户界面。它可能会允许你搜索特定类型的书籍，或者根据你之前借过的书籍向你推荐你可能喜欢的书籍。在你这样操作时，它需要使用新的书集来更新用于显示的页面。但请注意，大部分的页面内容（包括页眉、侧边栏和页脚等元素）将保持不变。
 
 传统模型的问题在于我们必须获取并加载整个页面，即使我们只需要更新页面的一部分也是如此。这是低效的，而且会带来糟糕的用户体验。
 
 因此，与传统模型不同，许多网站使用 JavaScript API 从服务器请求数据，并在不重新加载页面的情况下更新页面。因此，当用户搜索新产品时，浏览器仅请求更新页面所需的数据——例如要显示的新书集。
 
-![使用 fetch 来更新页面](fetch-update.svg)
+![使用 Fetch 来更新页面](fetch-update.svg)
 
 这里主要的 API 是 [Fetch API](/zh-CN/docs/Web/API/Fetch_API)。它允许页面中运行的 JavaScript 向服务器发起 [HTTP](/zh-CN/docs/Web/HTTP) 请求来获取特定的资源。当服务器提供了这些资源时，JavaScript 可以使用这些数据更新页面（通常是通过使用 [DOM 操作 API](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)）。请求的数据通常是 [JSON](/zh-CN/docs/Learn/JavaScript/Objects/JSON)，这是一种很好的传输结构化的格式，但也可以是 HTML 或纯文本。
 
@@ -53,7 +55,7 @@ slug: Learn/JavaScript/Client-side_web_APIs/Fetching_data
 - 页面更新更加迅速，你不必等待页面刷新，这意味这网站的体验更加流畅、响应更加迅速。
 - 每次更新时下载的数据更少，这意味着浪费的带宽更少。这在使用宽带连接的台式机上可能不是什么问题，但在移动设备或没有高速互联网连接的国家/地区则是一个主要问题。
 
-> **备注：** 在早期，这种通用技术被称为[异步](/zh-CN/docs/Glossary/Asynchronous)的 JavaScript 与 XML 技术（[Ajax](/zh-CN/docs/Glossary/AJAX)），因为倾向于请求 XML 数据。但现在通常不是这种情况（你更有可能请求 JSON），但结果依然相同，并通常依旧使用术语“Ajax”来描述该技术。
+> **备注：** 在早期，这种通用技术被称为[异步](/zh-CN/docs/Glossary/Asynchronous)的 JavaScript 与 XML（[Ajax](/zh-CN/docs/Glossary/AJAX)）。但现在通常不是这种情况，相反你更有可能请求 JSON，不过由于结果依然相同，我们通常依旧使用术语“Ajax”来描述该技术。
 
 为了进一步加快速度，某些网站还会在首次请求时将资源和数据存储在用户的计算机上，这意味这在后续的访问中，会使用这些内容的本地版本，而不是在每次重新加载页面时都下载新的副本。内容仅在更新后才会从服务器重新加载。
 
@@ -83,8 +85,10 @@ verseChoose.addEventListener("change", () => {
 
 下面让我们定义 `updateDisplay()` 函数。首先，将以下内容放在你之前的代码块下方——这是该函数的空壳。
 
-```js
-function updateDisplay(verse) {}
+```js-nolint
+function updateDisplay(verse) {
+
+}
 ```
 
 让我们将通过构造一个指向我们要加载的文本文件的相对 URL 来开始编写函数，因为我们稍后需要它。任何时候 {{htmlelement("select")}} 元素的值都与所选的 {{htmlelement("option")}} 内的文本相同（除非在值属性中指定了不同的值）——例如“Verse 1”。相应的诗歌文本文件是“verse1.txt”，并与 HTML 文件位于同一目录中，因此只需要文件名即可。
@@ -127,9 +131,9 @@ fetch(url)
 
 接下来，`fetch()` 是一个异步 API，会返回一个 {{jsxref("Promise")}}。如果你不知道什么是 Promise，请参阅[异步 JavaScript](/zh-CN/docs/Learn/JavaScript/Asynchronous) 章节，然后再回到这里。你会发现那篇文章也介绍了 `fetch()` API！
 
-因为 `fetch()` 返回一个 promise，所以我们将一个函数传递给它返回的 promise 的 {{jsxref("Promise/then", "then()")}} 方法。此方法会在 HTTP 请求收到服务器的响应时被调用。在它的处理器中，我们检查请求是否成功，并在请求失败时抛出一个错误。否则，我们调用 {{domxref("Response/text", "response.text()")}} 以获取文本形式的响应正文。
+因为 `fetch()` 返回一个 Promise，所以我们将一个函数传递给它返回的 Promise 的 {{jsxref("Promise/then", "then()")}} 方法。此方法会在 HTTP 请求收到服务器的响应时被调用。在它的处理器中，我们检查请求是否成功，并在请求失败时抛出一个错误。否则，我们调用 {{domxref("Response/text", "response.text()")}} 以获取文本形式的响应正文。
 
-`response.text()` *也*是异步的，所以我们返回它返回的 promise，并向新的 promise 的 `then()` 方法传递一个函数。这个函数会在响应文本可用时被调用，在这个函数中，我们会使用该文本更新 `
` 块。
+`response.text()` *也*是异步的，所以我们返回它返回的 Promise，并向新的 Promise 的 `then()` 方法传递一个函数。这个函数会在响应文本可用时被调用，在这个函数中，我们会使用该文本更新 `
` 块。
 
 最后，我们在最后链式调用 {{jsxref("Promise/catch", "catch()")}} 处理器，以捕获我们调用的异步函数或其他处理器中抛出的任何错误。
 
@@ -142,9 +146,9 @@ verseChoose.value = "Verse 1";
 
 ### 在服务端运行示例
 
-如果只是使用本地文件运行示例，现代浏览器将不会执行 HTTP 请求。这是因为安全限制（更多关于 web 安全性的限制，请参阅[网站安全](/zh-CN/docs/Learn/Server-side/First_steps/Website_security)）。
+如果只是使用本地文件运行示例，现代浏览器将不会执行 HTTP 请求。这是因为安全限制（更多关于 Web 安全性的限制，请参阅[网站安全](/zh-CN/docs/Learn/Server-side/First_steps/Website_security)）。
 
-为了解决这个问题，我们需要通过在本地 web 服务器上运行它来测试这个示例。要了解如何实现这一点，请阅读[我们的设置本地测试服务器指南](/zh-CN/docs/Learn/Common_questions/set_up_a_local_testing_server)。
+为了解决这个问题，我们需要通过在本地 Web 服务器上运行它来测试这个示例。要了解如何实现这一点，请阅读[我们的设置本地测试服务器指南](/zh-CN/docs/Learn/Common_questions/set_up_a_local_testing_server)。
 
 ### 罐头商店
 
@@ -172,23 +176,23 @@ fetch("products.json")
   .catch((err) => console.error(`Fetch 错误：${err.message}`));
 ```
 
-`fetch()` 函数返回一个 promise。如果成功完成，第一个 `.then()` 代码块中的函数包含通过网络返回的响应（`response`）。
+`fetch()` 函数返回一个 Promise。如果成功完成，第一个 `.then()` 代码块中的函数包含通过网络返回的响应（`response`）。
 
 在此函数中，我们：
 
 - 检查服务器是否返回错误（例如 [`404 Not Found`](/zh-CN/docs/Web/HTTP/Status/404)）。如果返回了错误，我们抛出一个错误。
 - 对响应调用 {{domxref("Response.json","json()")}}。它会将数据检索为 [JSON 对象](/zh-CN/docs/Learn/JavaScript/Objects/JSON)。然后我们返回 `response.json()` 返回的 promise。
 
-接着，我们将一个函数传递给返回的 promise 的 `then()` 方法。该函数会被传入一个包含 JSON 格式的响应数据的对象，我们将这个对象传递给 `initialize()` 函数。该函数会开始在用户界面中显示所有产品的过程。
+接着，我们将一个函数传递给返回的 Promise 的 `then()` 方法。该函数会被传入一个包含 JSON 格式的响应数据的对象，我们将这个对象传递给 `initialize()` 函数。该函数会开始在用户界面中显示所有产品的过程。
 
-为了处理错误，我们将一个 `.catch()` 代码块串联到 promise 链的末尾。如果 promise 由于某种原因失败了，它就会被运行。在该代码块中，我们包含一个接收 `err` 对象的函数。该 `err` 对象可用于报告已发生错误的性质，在本例中，我们仅使用了 `console.log()`。
+为了处理错误，我们将一个 `.catch()` 代码块串联到 Promise 链的末尾。如果 Promise 由于某种原因失败了，它就会被运行。在该代码块中，我们包含一个接收 `err` 对象的函数。该 `err` 对象可用于报告已发生错误的性质，在本例中，我们仅使用了 `console.log()`。
 
 然而，一个完整的网站会通过在用户屏幕上显示一条消息，可能还会提供这种情况的补救选项来更优雅地处理此类错误，但我们在这里不需要比 `console.error()` 更复杂的东西。
 
 你可以自己测试失败的情况：
 
 1. 创建示例文件的本地副本。
-2. 通过 web 服务器运行代码（如上所述，[在服务端运行示例](#在服务端运行示例)）。
+2. 通过 Web 服务器运行代码（如上所述，[在服务端运行示例](#在服务端运行示例)）。
 3. 修改要获取的文件的路径，比如“produc.json”（确保你拼写的是错误的）。
 4. 现在在你的浏览器上加载索引文件（通过 `localhost:8000`）然后查看你浏览器的开发者控制台。你将看到一条类似于“Fetch 错误：HTTP 错误：404”的消息。
 

From b0c49796956376b98588b7b01a11d3ae16457c7b Mon Sep 17 00:00:00 2001
From: Tianyi Tao 
Date: Sun, 14 Jul 2024 10:11:34 +0800
Subject: [PATCH 220/698] [zh-cn]: create the translation of
 `HTMLElement.virtualKeyboardPolicy` property (#22046)

Co-authored-by: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com>
Co-authored-by: A1lo 
---
 .../virtualkeyboardpolicy/index.md            | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 files/zh-cn/web/api/htmlelement/virtualkeyboardpolicy/index.md

diff --git a/files/zh-cn/web/api/htmlelement/virtualkeyboardpolicy/index.md b/files/zh-cn/web/api/htmlelement/virtualkeyboardpolicy/index.md
new file mode 100644
index 00000000000000..46a482b65a1cea
--- /dev/null
+++ b/files/zh-cn/web/api/htmlelement/virtualkeyboardpolicy/index.md
@@ -0,0 +1,44 @@
+---
+title: HTMLElement：virtualKeyboardPolicy 属性
+slug: Web/API/HTMLElement/virtualKeyboardPolicy
+l10n:
+  sourceCommit: c7e432ec4c970b0b63741101bacce148804138e4
+---
+
+{{APIRef("VirtualKeyboard API")}}{{SeeCompatTable}}
+
+{{domxref("HTMLElement")}} 接口的 **`virtualKeyboardPolicy`** 属性用于在元素的内容可编辑（例如是一个 {{htmlelement("input")}} 或 {{htmlelement("textarea")}} 元素，或者元素设置了 [`contenteditable`](/zh-CN/docs/Web/HTML/Global_attributes/contenteditable) 属性）时获取和设置一个字符串，指示在设备上（如平板电脑、手机或其他没有硬件键盘的设备）上屏幕虚拟键盘的行为。
+
+它反映了 [`virtualkeyboardpolicy`](/zh-CN/docs/Web/HTML/Global_attributes/virtualkeyboardpolicy) HTML 全局属性的值。
+
+## 值
+
+一个枚举值；可能的取值包括：
+
+- `"auto"` 或空字符串（`""`）
+  - : 当用户点击或聚焦元素时，浏览器自动显示虚拟键盘。
+- `"manual"`
+  - : 浏览器不会自动显示虚拟键盘：显示/隐藏虚拟键盘由脚本手动处理。
+
+## 示例
+
+以下示例展示了如何通过脚本控制屏幕虚拟键盘的行为：
+
+```js
+const element = document.querySelector("input");
+
+// 通过脚本手动控制屏幕虚拟键盘的行为
+element.virtualKeyboardPolicy = "manual";
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [`virtualkeyboardpolicy`](/zh-CN/docs/Web/HTML/Global_attributes#virtualkeyboardpolicy) HTML 全局属性

From 59b0c1ac105230277ca3ada06f0cf047f0f1e415 Mon Sep 17 00:00:00 2001
From: Hoarfroster 
Date: Sun, 14 Jul 2024 10:15:15 +0800
Subject: [PATCH 221/698] zh-CN: update the translation of the "Manipulating
 documents" article (#22379)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: A1lo 
---
 .../manipulating_documents/index.md            | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/manipulating_documents/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/manipulating_documents/index.md
index 8f708e56666a24..7442ff9acf4b45 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/manipulating_documents/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/manipulating_documents/index.md
@@ -1,16 +1,18 @@
 ---
 title: 操作文档
 slug: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
+l10n:
+  sourceCommit: 7e97f3c5ada65b6638909bde92881a4b8d46a2b8
 ---
 
 {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}
 
-在编写网页和应用程序时，你最想做的事情之一是以某种方式操纵文档结构。这通常是通过使用文档对象模型（DOM）来实现的，这是一套用于控制 HTML 和样式信息的 API，大量使用了 {{domxref("Document")}} 对象。在这篇文章中，我们将详细了解如何使用 DOM，以及其他一些有趣的 API，它们可以以有趣的方式改变你的环境。
+在编写网页和应用程序时，你最想做的事情之一是以某种方式操纵文档结构。这通常是通过使用文档对象模型（DOM）来实现的。这是一套大量使用了 {{domxref("Document")}} 对象，用于控制 HTML 和样式信息的 API。在这篇文章中，我们将详细了解如何使用 DOM，以及其他一些有趣的 API，它们可以以有趣的方式改变你的环境。
 
 

   

-      
+      
@@ -22,13 +24,13 @@ slug: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
   

   
     
预备条件：前提：
       
         基础的计算机常识，基本了解 HTML、CSS 和 JavaScript，包括 JavaScript 对象。
       

 

 
-## web 浏览器的重要部分
+## Web 浏览器的重要部分
 
-web 浏览器是非常复杂的软件，有许多活动部件，其中许多部件不能由 web 开发者用 JavaScript 控制或操纵。你可能认为这种限制是件坏事，但浏览器作出这些限制是有原因的，主要是围绕安全问题。想象一下，如果网站可以访问你存储的密码或其他敏感信息，且像你本人一样登录那些网站，会发生什么？
+Web 浏览器是非常复杂的软件，有许多活动部件，其中许多部件不能由 Web 开发者用 JavaScript 控制或操纵。你可能认为这种限制是件坏事，但浏览器作出这些限制是有原因的，主要是围绕安全问题。想象一下，如果网站可以访问你存储的密码或其他敏感信息，且像你本人一样登录那些网站，会发生什么？
 
 尽管有这些限制，Web API 仍然给我们提供了大量的功能，使我们能够用网页做很多事情。在你的代码中，有几个非常明显的部分你会经常参考。考虑下图，它代表了浏览器中直接参与浏览网页的主要部分：
 
-![web 浏览器的重要部分；文档就是网页。窗口包括整个文档，也包括标签。导航器是浏览器，它包括窗口（包括文档）和所有其他窗口](document-window-navigator.png)
+![Web 浏览器的重要部分；文档就是网页。窗口包括整个文档，也包括标签。导航器是浏览器，它包括窗口（包括文档）和所有其他窗口](document-window-navigator.png)
 
 - 窗口（window）是载入网页的浏览器标签；在 JavaScript 中，它由 {{domxref("Window")}} 对象表示。使用这个对象上的方法，你可以做一些事情，比如返回窗口的大小（见 {{domxref("Window.innerWidth")}} 和 {{domxref("Window.innerHeight")}}），操作加载到窗口的文档，在客户端存储该文档的特定数据（例如使用本地数据库或其他存储机制），为当前窗口附加一个[事件处理器](/zh-CN/docs/Learn/JavaScript/Building_blocks/Events#一系列事件)等。
 - 导航器（navigator）在网络上出现时，代表浏览器的状态和身份（即用户代理）。在 JavaScript 中，它由 {{domxref("Navigator")}} 对象表示。你可以用这个对象来检索用户的首选语言、用户网络摄像头的媒体流等信息。
@@ -67,7 +69,7 @@ web 浏览器是非常复杂的软件，有许多活动部件，其中许多部
 
 ![文档对象模型的树状结构表示：顶部节点是 doctype 和 HTML 元素。HTML 的子节点包括 head 和 body。每个子元素都是一个分支。所有的文本，甚至是空白处，也都被显示出来](dom-screenshot.png)
 
-> **备注：** 这个 DOM 树状图是用 Ian Hickson 的 [Live DOM viewer](https://software.hixie.ch/utilities/js/live-dom-viewer/) 生成的。
+> **备注：** 这个 DOM 树状图是用 Ian Hickson 的[在线 DOM 查看器](https://software.hixie.ch/utilities/js/live-dom-viewer/)生成的。
 
 树上的每个条目都被称为**节点**。你可以在上图中看到，一些节点代表元素（标识为 `HTML`、`HEAD`、`META` 等），另一些代表文本（标识为 `#text`）。还有[其他类型的节点](/zh-CN/docs/Web/API/Node/nodeType)，但这些是你会遇到的主要类型。
 
@@ -105,7 +107,7 @@ web 浏览器是非常复杂的软件，有许多活动部件，其中许多部
    link.href = "https://developer.mozilla.org";
    ```
 
-请注意，就像 JavaScript 中所做的那样，有许多方法可以选择一个元素并将其引用存储在一个变量中。{{domxref("Document.querySelector()")}} 是推荐的现代方法。它很方便，因为它允许你使用 CSS 选择器来选择元素。上面的 `querySelector()` 调用将匹配文档中出现的第一个 {{htmlelement("a")}} 元素。如果你想对多个元素进行匹配和操作，你可以使用 {{domxref("Document.querySelectorAll()")}}，它可以匹配文档中与选择器相匹配的每个元素，并将它们的引用存储在一个叫做 {{domxref("NodeList")}} 的[数组](/zh-CN/docs/Learn/JavaScript/First_steps/Arrays)对象中。
+请注意，就像 JavaScript 中所做的那样，有许多方法可以选择一个元素并将其引用存储在一个变量中。{{domxref("Document.querySelector()")}} 是推荐的现代方法。它很方便，因为它允许你使用 CSS 选择器来选择元素。上面的 `querySelector()` 调用将匹配文档中出现的第一个 {{htmlelement("a")}} 元素。如果你想对多个元素进行匹配和操作，你可以使用 {{domxref("Document.querySelectorAll()")}}，它可以匹配文档中与选择器相匹配的每个元素，并将它们的引用存储在一个叫做 {{domxref("NodeList")}} 的类[数组](/zh-CN/docs/Learn/JavaScript/First_steps/Arrays)对象中。
 
 对于获取元素引用，还有一些更旧的方法，如：
 
@@ -213,7 +215,7 @@ linkPara.parentNode.removeChild(linkPara);
    

    ```
 
-> **备注：** 请注意，CSS 样式的 JavaScript 属性版本是用小驼峰命名法书写的，而 CSS 版本是连字符的（例如，`backgroundColor` 对 `background-color`）。确保你不要把这些混为一谈，否则将无法工作。
+> **备注：** 请注意，CSS 样式的 JavaScript 属性版本是用{{Glossary("camel_case", "小驼峰命名法")}}书写的，而 CSS 版本采用连字符（{{Glossary("kebab_case", "烤串命名法")}}）（例如，`backgroundColor` 对 `background-color`）。确保你不要把这些混为一谈，否则将无法工作。
 
 还有一种在你的文档上动态操作样式的常见方法，我们现在就来看看。
 

From 0d17f8b4faae4ebe1f114b44839e05492e2ec797 Mon Sep 17 00:00:00 2001
From: Hoarfroster 
Date: Sun, 14 Jul 2024 10:53:24 +0800
Subject: [PATCH 222/698] zh-CN: update Glossary/XMLHttpRequest (#22286)

Co-authored-by: A1lo 
---
 files/zh-cn/glossary/xmlhttprequest/index.md | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/files/zh-cn/glossary/xmlhttprequest/index.md b/files/zh-cn/glossary/xmlhttprequest/index.md
index b44bf9d3f8a620..40dc284c3fae8a 100644
--- a/files/zh-cn/glossary/xmlhttprequest/index.md
+++ b/files/zh-cn/glossary/xmlhttprequest/index.md
@@ -1,15 +1,16 @@
 ---
-title: XHR (XMLHttpRequest)
+title: XMLHttpRequest (XHR)
 slug: Glossary/XMLHttpRequest
+l10n:
+  sourceCommit: 409978ee3d2edd2b045adfbe39769b2dae6f31ea
 ---
 
 {{GlossarySidebar}}
 
-{{domxref("XMLHttpRequest")}} (XHR) 是一种创建 {{Glossary("AJAX")}} 请求的 {{Glossary("JavaScript")}} {{Glossary("API")}} 。它的方法提供了在{{Glossary("browser","浏览器")}}和{{Glossary("server","服务器")}}之间发送请求的能力。
+{{domxref("XMLHttpRequest")}}（XHR）是一种创建 {{Glossary("HTTP")}} 请求的 {{Glossary("JavaScript")}} {{Glossary("API")}}。它的方法提供了在{{Glossary("browser", "浏览器")}}和{{Glossary("server", "服务器")}}之间发送请求的能力。
+
+[Fetch API](/zh-CN/docs/Web/API/Fetch_API) 是 {{domxref("XMLHttpRequest")}} 的现代替代品。
 
 ## 参见
 
-- 维基百科上的 [XMLHttpRequest](https://zh.wikipedia.org/wiki/XMLHttpRequest)
-- [异步通信 vs. 同步通信](https://peoplesofttutorial.com/difference-between-synchronous-and-asynchronous-messaging/)
-- {{domxref("XMLHttpRequest")}} 对象
-- [MDN 上关于如何使用 XMLHttpRequest 的文档](/zh-CN/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest)
+- [XMLHttpRequest API](/zh-CN/docs/Web/API/XMLHttpRequest_API) 文档。

From 8694ed811a0e2dc40207bfbe25329ff947516515 Mon Sep 17 00:00:00 2001
From: Tianyi Tao 
Date: Sun, 14 Jul 2024 15:22:38 +0800
Subject: [PATCH 223/698] [zh-cn]: update the translation of
 `CanvasRenderingContext2D.getLineDash()` method (#22004)

Co-authored-by: A1lo 
---
 .../getlinedash/index.md                      | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/getlinedash/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/getlinedash/index.md
index 90996e10446ab5..008a08d1e29d65 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/getlinedash/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/getlinedash/index.md
@@ -1,27 +1,33 @@
 ---
-title: CanvasRenderingContext2D.getLineDash()
+title: CanvasRenderingContext2D：getLineDash() 方法
 slug: Web/API/CanvasRenderingContext2D/getLineDash
+l10n:
+  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
 ---
 
 {{APIRef}}
 
-**`CanvasRenderingContext2D.getLineDash()`** 是 Canvas 2D API 获取当前线段样式的方法。
+Canvas 2D API 的 {{domxref("CanvasRenderingContext2D")}} 接口的 **`getLineDash()`** 方法用于获取当前的虚线样式。
 
 ## 语法
 
+```js-nolint
+getLineDash()
 ```
-ctx.getLineDash();
-```
+
+### 参数
+
+无。
 
 ### 返回值
 
-一个 {{jsxref("Array")}}数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。如果数组元素的数量是奇数，数组元素会被复制并重复。例如，设置线段为 `[5, 15, 25]` 将会得到以下返回值 `[5, 15, 25, 5, 15, 25]`。
+一个由数字组成的 {{jsxref("Array")}}，用于指定绘制虚线和空隙的距离（以坐标空间单位计算）。如果在设置数组元素时数组长度为奇数，则数组元素会被复制并连接起来。例如，将虚线设置为 `[5, 15, 25]` 将得到 `[5, 15, 25, 5, 15, 25]`。
 
 ## 示例
 
-### 获取当前的划线设置
+### 获取当前的虚线设置
 
-这是一段使用 `getLineDash` 方法的简单的代码片段。
+此示例演示了 `getLineDash` 方法。
 
 #### HTML
 
@@ -38,7 +44,7 @@ const ctx = canvas.getContext("2d");
 ctx.setLineDash([10, 20]);
 console.log(ctx.getLineDash()); // [10, 20]
 
-// Draw a dashed line
+// 画一条虚线
 ctx.beginPath();
 ctx.moveTo(0, 50);
 ctx.lineTo(300, 50);
@@ -59,6 +65,6 @@ ctx.stroke();
 
 ## 参见
 
-- 接口定义， {{domxref("CanvasRenderingContext2D")}}
+- 定义此方法的接口：{{domxref("CanvasRenderingContext2D")}}
 - {{domxref("CanvasRenderingContext2D.setLineDash()")}}
 - {{domxref("CanvasRenderingContext2D.lineDashOffset")}}

From c2e2ad0a79e0fb6556721ecc363c303ebd65a6d6 Mon Sep 17 00:00:00 2001
From: Tianyi Tao 
Date: Sun, 14 Jul 2024 15:35:48 +0800
Subject: [PATCH 224/698] [zh-cn]: create the translation of
 `CanvasRenderingContext2D.isContextLost()` method (#22006)

---
 .../iscontextlost/index.md                    | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/iscontextlost/index.md

diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/iscontextlost/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/iscontextlost/index.md
new file mode 100644
index 00000000000000..cee2da9eb8d325
--- /dev/null
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/iscontextlost/index.md
@@ -0,0 +1,50 @@
+---
+title: CanvasRenderingContext2D：isContextLost() 方法
+slug: Web/API/CanvasRenderingContext2D/isContextLost
+l10n:
+  sourceCommit: 16ddaba6073a5e4022aecd2aca8893905a9dd5d0
+---
+
+{{APIRef}}
+
+Canvas 2D API 的 **`CanvasRenderingContext2D.isContextLost()`** 方法用于检查渲染上下文是否丢失（且尚未重置）。这可能由于驱动程序崩溃、内存耗尽等原因发生。
+
+如果用户代理检测到画布后备存储丢失，它会在相关的 [`HTMLCanvasElement`](/zh-CN/docs/Web/API/HTMLCanvasElement) 上触发 [`contextlost` 事件](/zh-CN/docs/Web/API/HTMLCanvasElement/contextlost_event)。如果这个事件没有被取消，用户代理将尝试将后备存储重置为默认状态（相当于调用 {{domxref("CanvasRenderingContext2D.reset()")}}）。成功后，它会触发 [`contextrestored` 事件](/zh-CN/docs/Web/API/HTMLCanvasElement/contextrestored_event)，表示上下文已准备好重新初始化和重绘。
+
+## 语法
+
+```js-nolint
+isContextLost()
+```
+
+### 参数
+
+无。
+
+### 返回值
+
+如果渲染上下文已丢失，则返回 `true`；否则返回 `false`。
+
+### 示例
+
+```js
+const ctx = canvas.getContext("2d");
+
+if (ctx.isContextLost()) {
+  console.log("上下文已丢失");
+}
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- 定义此方法的接口：{{domxref("CanvasRenderingContext2D")}}
+- [`HTMLCanvasElement: contextlost` 事件](/zh-CN/docs/Web/API/HTMLCanvasElement/contextlost_event)
+- [`HTMLCanvasElement: contextrestored` 事件](/zh-CN/docs/Web/API/HTMLCanvasElement/contextrestored_event)

From a0bec049fbeb6032e887e1541169a52ff06dbe4c Mon Sep 17 00:00:00 2001
From: Jongha Kim 
Date: Sun, 14 Jul 2024 17:11:21 +0900
Subject: [PATCH 225/698] =?UTF-8?q?[ko]=20Intl.Locale.prototype.numberingS?=
 =?UTF-8?q?ystem=20=EC=8B=A0=EA=B7=9C=20=EB=B2=88=EC=97=AD=20=EC=99=B8=20(?=
 =?UTF-8?q?#22325)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* [ko] Intl.Locale.prototype.numberingSystem 신규 번역 외

- Intl.Locale.prototype.numberingSystem 신규 번역
- Map.prototype.forEach() 최신 동기화
- Map.prototype.has() 최신 동기화
- Map.prototype.keys() 최신 동기화
- Map 생성자 최신 동기화

* 린트 에러 수정
---
 .../intl/locale/numberingsystem/index.md      | 52 +++++++++++++++++++
 .../global_objects/map/foreach/index.md       | 10 ++--
 .../reference/global_objects/map/has/index.md |  4 +-
 .../global_objects/map/keys/index.md          |  8 ++-
 .../reference/global_objects/map/map/index.md |  5 +-
 5 files changed, 67 insertions(+), 12 deletions(-)
 create mode 100644 files/ko/web/javascript/reference/global_objects/intl/locale/numberingsystem/index.md

diff --git a/files/ko/web/javascript/reference/global_objects/intl/locale/numberingsystem/index.md b/files/ko/web/javascript/reference/global_objects/intl/locale/numberingsystem/index.md
new file mode 100644
index 00000000000000..b3ec2819d45cc9
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/intl/locale/numberingsystem/index.md
@@ -0,0 +1,52 @@
+---
+title: Intl.Locale.prototype.numberingSystem
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/numberingSystem
+l10n:
+  sourceCommit: 00ed80cdebab5bc6a382686f22f52207a7897ea9
+---
+
+{{JSRef}}
+
+{{jsxref("Intl.Locale")}} 인스턴스의 **`numberingSystem`** 접근자 속성은 이 로케일에 대한 [숫자 체계](https://en.wikipedia.org/wiki/Numeral_system)를 반환합니다.
+
+## 설명
+
+숫자 체계는 숫자를 표현하는 체계입니다. `numberingSystem` 속성의 값은 로케일 식별자의 `nu` 키 또는 {{jsxref("Intl/Locale/Locale", "Intl.Locale()")}} 생성자의 `numberingSystem` 옵션을 통해 구성 시 설정됩니다. 둘 다 존재하면 후자가 우선권을 가지며, 둘 다 존재하지 않으면 속성의 값은 `undefined`가 됩니다.
+
+지원하는 숫자 체계의 유형 목록은 [`Intl.Locale.prototype.getNumberingSystems()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getNumberingSystems#supported_numbering_system_types)을 참고하시기 바랍니다.
+
+## 예제
+
+다른 로케일 하위 태그와 마찬가지로 숫자 체계 유형은 로케일 문자열 또는 생성자에 대한 구성 객체 인수를 통해 {{jsxref("Intl.Locale")}} 객체에 추가할 수 있습니다.
+
+### 로케일 문자열을 통한 숫자 체계 추가하기
+
+[유니코드 로케일 문자열 명세](https://www.unicode.org/reports/tr35/)에서 숫자 체계 유형은 로케일 키 "확장 하위 태그"입니다. 이러한 하위 태그는 로케일에 대한 추가 데이터를 더하며, `-u` 확장자를 사용하여 로케일 식별자에 추가됩니다. 따라서 숫자 체계 유형은 {{jsxref("Intl/Locale/Locale", "Intl.Locale()")}} 생성자에 전달되는 초기 로케일 식별자 문자열에 추가할 수 있습니다. 숫자 체계 유형을 추가하려면 먼저 문자열에 `-u` 확장 키를 추가합니다. 그런 다음 `-nu` 확장자를 추가하여 숫자 체계를 추가하고 있음을 나타냅니다. 마지막으로 문자열에 숫자 체계 유형을 추가합니다.
+
+```js
+const locale = new Intl.Locale("fr-Latn-FR-u-nu-mong");
+console.log(locale.numberingSystem); // "mong"
+```
+
+### 설정 객체 인수를 통한 숫자 체계 추가하기
+
+{{jsxref("Intl/Locale/Locale", "Intl.Locale()")}} 생성자에는 숫자 체계 유형을 비롯한 여러 확장 유형 중 하나를 포함할 수 있는 선택적 구성 객체 인수가 있습니다. 구성 객체의 `numberingSystem` 속성을 원하는 숫자 체계 유형으로 설정한 다음, 생성자에 전달합니다.
+
+```js
+const locale = new Intl.Locale("en-Latn-US", { numberingSystem: "latn" });
+console.log(locale.numberingSystem); // "latn"
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{jsxref("Intl.Locale")}}
+- [`Intl.Locale.prototype.getNumberingSystems()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getNumberingSystems)
+- [표준 유니코드 숫자 체계의 상세 내용](https://github.com/unicode-org/cldr/blob/main/common/supplemental/numberingSystems.xml)
diff --git a/files/ko/web/javascript/reference/global_objects/map/foreach/index.md b/files/ko/web/javascript/reference/global_objects/map/foreach/index.md
index 493f2d0d00f772..33ea0beeda350c 100644
--- a/files/ko/web/javascript/reference/global_objects/map/foreach/index.md
+++ b/files/ko/web/javascript/reference/global_objects/map/foreach/index.md
@@ -2,12 +2,12 @@
 title: Map.prototype.forEach()
 slug: Web/JavaScript/Reference/Global_Objects/Map/forEach
 l10n:
-  sourceCommit: 6a0f9553932823cd0c4dcf695d4b4813474964fb
+  sourceCommit: 27180875516cc311342e74b596bfb589b7211e0c
 ---
 
 {{JSRef}}
 
-**`forEach()`** 메서드는 삽입 순서에 따라 `Map` 객체의 각 키/값 쌍마다 한 번씩 제공된 함수를 실행합니다.
+{{jsxref("Map")}} 인스턴스의 **`forEach()`** 메서드는 이 Map 객체의 키/값 쌍마다 각각 제공된 함수를 삽입되었던 순서대로 실행합니다.
 
 {{EmbedInteractiveExample("pages/js/map-prototype-foreach.html")}}
 
@@ -21,19 +21,19 @@ forEach(callbackFn, thisArg)
 ### 매개변수
 
 - `callbackFn`
-  - : 맵의 각 항목에 대해 실행할 함수입니다. 이 함수는 다음 인수를 사용하여 호출됩니다:
+  - : 맵의 각 항목에 대해 실행할 함수입니다. 이 함수는 다음 인수를 사용하여 호출됩니다.
     - `value`
       - : 각 반복의 값입니다.
     - `key`
       - : 각 반복의 키입니다.
     - `map`
-      - : 반복되는 map입니다.
+      - : 반복되는 Map 입니다.
 - `thisArg` {{optional_inline}}
   - : `callbackFn`을 실행하고 있을 때 `this`로 사용하는 값.
 
 ### 반환 값
 
-{{jsxref("undefined")}}.
+없음 ({{jsxref("undefined")}}).
 
 ## 설명
 
diff --git a/files/ko/web/javascript/reference/global_objects/map/has/index.md b/files/ko/web/javascript/reference/global_objects/map/has/index.md
index 968000a02ad950..ff3d4392a0a8c3 100644
--- a/files/ko/web/javascript/reference/global_objects/map/has/index.md
+++ b/files/ko/web/javascript/reference/global_objects/map/has/index.md
@@ -2,12 +2,12 @@
 title: Map.prototype.has()
 slug: Web/JavaScript/Reference/Global_Objects/Map/has
 l10n:
-  sourceCommit: fcd80ee4c8477b6f73553bfada841781cf74cf46
+  sourceCommit: 3cfd663738e9963157d90f359789d675a6662ec2
 ---
 
 {{JSRef}}
 
-**`has()`** 메서드는 주어진 키에 해당하는 요소가 존재 여부를 가리키는 불리언 값을 반환합니다.
+{{jsxref("Map")}} 인스턴스의 **`has()`** 메서드는 주어진 키에 해당하는 요소의 존재 여부를 가리키는 불리언 값을 반환합니다.
 
 {{EmbedInteractiveExample("pages/js/map-prototype-has.html")}}
 
diff --git a/files/ko/web/javascript/reference/global_objects/map/keys/index.md b/files/ko/web/javascript/reference/global_objects/map/keys/index.md
index c64c2f73fde104..375a300003b959 100644
--- a/files/ko/web/javascript/reference/global_objects/map/keys/index.md
+++ b/files/ko/web/javascript/reference/global_objects/map/keys/index.md
@@ -2,12 +2,12 @@
 title: Map.prototype.keys()
 slug: Web/JavaScript/Reference/Global_Objects/Map/keys
 l10n:
-  sourceCommit: ab97df6ce8865569507bcfc884206a1ed297a690
+  sourceCommit: 27180875516cc311342e74b596bfb589b7211e0c
 ---
 
 {{JSRef}}
 
-**`keys()`** 메서드는 배열에서 각 인덱스의 키를 포함하는 새로운 [맵 반복자](/ko/docs/Web/JavaScript/Reference/Global_Objects/Iterator) 객체를 반환합니다.
+{{jsxref("Map")}} 인스턴스의 **`keys()`** 메서드는 맵에서 각 요소의 키를 삽입 순서대로 가지는 새로운 [맵 반복자](/ko/docs/Web/JavaScript/Reference/Global_Objects/Iterator) 객체를 반환합니다.
 
 {{EmbedInteractiveExample("pages/js/map-prototype-keys.html")}}
 
@@ -17,6 +17,10 @@ l10n:
 keys()
 ```
 
+### 매개변수
+
+없음.
+
 ### 반환 값
 
 새로운 [순회 가능한 반복자 객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/Iterator).
diff --git a/files/ko/web/javascript/reference/global_objects/map/map/index.md b/files/ko/web/javascript/reference/global_objects/map/map/index.md
index e1b4e584a7cce7..912bb0768eab71 100644
--- a/files/ko/web/javascript/reference/global_objects/map/map/index.md
+++ b/files/ko/web/javascript/reference/global_objects/map/map/index.md
@@ -2,7 +2,7 @@
 title: Map() 생성자
 slug: Web/JavaScript/Reference/Global_Objects/Map/Map
 l10n:
-  sourceCommit: 6a0f9553932823cd0c4dcf695d4b4813474964fb
+  sourceCommit: 70f09675ddcfc75a3bb66d2dce4cf82738948a37
 ---
 
 {{JSRef}}
@@ -48,8 +48,7 @@ const myMap = new Map([
 
 ## 같이 보기
 
-- A polyfill of `Map` is available in
-  [`core-js`](https://github.com/zloirock/core-js#map)
+- [`core-js`에서의 `Map` 폴리필](https://github.com/zloirock/core-js#map)
 - {{jsxref("Set")}}
 - {{jsxref("WeakMap")}}
 - {{jsxref("WeakSet")}}

From a1cd598264aeeedf5a8fd6f474788bb078bb3138 Mon Sep 17 00:00:00 2001
From: Kuesung Park 
Date: Sun, 14 Jul 2024 17:12:34 +0900
Subject: [PATCH 226/698] =?UTF-8?q?[ko]=20=EC=98=A4=ED=83=80=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20(#22399)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix: fix the typo

Co-authored-by: guesung 
---
 .../reference/global_objects/date/toutcstring/index.md          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ko/web/javascript/reference/global_objects/date/toutcstring/index.md b/files/ko/web/javascript/reference/global_objects/date/toutcstring/index.md
index 1bc2db18e1c32e..afcc8cf243ccfe 100644
--- a/files/ko/web/javascript/reference/global_objects/date/toutcstring/index.md
+++ b/files/ko/web/javascript/reference/global_objects/date/toutcstring/index.md
@@ -5,7 +5,7 @@ slug: Web/JavaScript/Reference/Global_Objects/Date/toUTCString
 
 {{JSRef}}
 
-**`toUTCString()`** 메서드는 날짜를 문자열로 변환하여 UTC 시단대로 해석합니다. `toGMTString()`은 이 메서드의 별칭입니다.
+**`toUTCString()`** 메서드는 날짜를 문자열로 변환하여 UTC 시간대로 해석합니다. `toGMTString()`은 이 메서드의 별칭입니다.
 
 [rfc7231](https://datatracker.ietf.org/doc/html/rfc7231#section-7.1.1.1)에 기반하고 [ECMA-262 toUTCString](https://tc39.es/ecma262/#sec-date.prototype.toutcstring)에 따라 음수 값을 가질 수 있습니다.
 

From 2911c08d67025c6d86af07f164877508e52eede3 Mon Sep 17 00:00:00 2001
From: Hoarfroster 
Date: Sun, 14 Jul 2024 17:08:27 +0800
Subject: [PATCH 227/698] zh-CN: update the translation of "Introduction to web
 APIs" (#22380)

Co-authored-by: Allo 
---
 .../introduction/index.md                     | 290 +++++++++---------
 1 file changed, 150 insertions(+), 140 deletions(-)

diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.md
index c8b0551f2364e8..6d4036e3959adb 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.md
@@ -1,92 +1,96 @@
 ---
 title: Web API 简介
 slug: Learn/JavaScript/Client-side_web_APIs/Introduction
+l10n:
+  sourceCommit: 7e97f3c5ada65b6638909bde92881a4b8d46a2b8
 ---
 
-{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Client-side_Web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}
+{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}
 
-首先，我们将从一个高层次看看 API - 它们是什么；他们如何工作；如何在代码中使用它们，以及它们是如何组织的。我们也将看看不同主要类别的 API 以及它们的用途。
+首先，我们将从一个高层次看看 API——它们是什么、它们如何工作、如何在代码中使用它们，以及它们是如何组织的。我们也将看看不同主要类别的 API 以及它们的用途。
 
 
-      
+      

   
     

       前提：
       
-        基本计算机知识，对于 HTML 和 CSS 的基本理解（见JavaScript 第一步，、创建 JavaScript 代码块，JavaScript 对象入门、JavaScript 对象入门）。
       
     

     

       目标：熟悉 API，他们可以做什么，以及如何在代码中使用它们。熟悉 API，它们可以做什么，以及如何在代码中使用它们。
     

   
 

 
 ## 什么是 API?
 
-应用程序接口（API，Application Programming Interface）是基于编程语言构建的结构，使开发人员更容易地创建复杂的功能。它们抽象了复杂的代码，并提供一些简单的接口规则直接使用。
+应用程序接口（API）是基于编程语言构建的结构，让开发者更容易地创建复杂的功能。它们抽象了复杂的代码，并提供一些简单的接口规则直接使用。
 
 来看一个现实中的例子：想想你的房子、公寓或其他住宅的供电方式，如果你想在你的房子里用电，只要把电器的插头插入插座就可以，而不是直接把它连接到电线上——这样做非常低效，而且对于不是电工的人会是困难和危险的。
 
-![](plug-socket.png)
+![两个多插头支架分别插入两个不同的插座插口。每个多插头座的顶部和前侧都有一个插头槽。每个多路插头座可插入两个插头。](plug-socket.png)
 
-_图片来自：[Overloaded plug socket](https://www.flickr.com/photos/easy-pics/9518184890/in/photostream/lightbox/) 提供者： [The Clear Communication People](https://www.flickr.com/photos/easy-pics/)于 Flickr。_
+_图片来自：[过载的插头接口](https://www.flickr.com/photos/easy-pics/9518184890/in/photostream/lightbox/)，由 Flickr 上的 [The Clear Communication People](https://www.flickr.com/photos/easy-pics/) 提供。_
 
 同样，比如说，编程来显示一些 3D 图形，使用以更高级语言编写的 API（例如 JavaScript 或 Python）将会比直接编写直接控制计算机的 GPU 或其他图形功能的低级代码（比如 C 或 C++）来执行操作要容易得多。
 
-> **备注：** 详细说明请见[API - Glossary](/zh-CN/docs/Glossary/API)。
+> **备注：** 详细说明请见 [API 术语条目](/zh-CN/docs/Glossary/API)。
 
 ### 客户端 JavaScript 中的 API
 
-客户端 JavaScript 中有很多可用的 API — 他们本身并不是 JavaScript 语言的一部分，却建立在 JavaScript 语言核心的顶部，为使用 JavaScript 代码提供额外的超强能力。他们通常分为两类：
+客户端 JavaScript 中有很多可用的 API。它们本身并属于 JavaScript 语言，却建立在核心 JavaScript 语言之上，为使用 JavaScript 代码提供额外的超强能力。它们通常分为两类：
 
-- **浏览器 API**内置于 Web 浏览器中，能从浏览器和电脑周边环境中提取数据，并用来做有用的复杂的事情。例如[Geolocation API](/zh-CN/docs/Web/API/Geolocation/Using_geolocation)提供了一些简单的 JavaScript 结构以获得位置数据，因此你可以在 Google 地图上标示你的位置。在后台，浏览器确实使用一些复杂的低级代码（例如 C++）与设备的 GPS 硬件（或可以决定位置数据的任何设施）通信来获取位置数据并把这些数据返回给你的代码中使用浏览器环境；但是，这种复杂性通过 API 抽象出来，因而与你无关。
-- **第三方 API**缺省情况下不会内置于浏览器中，通常必须在 Web 中的某个地方获取代码和信息。例如[Twitter API](https://dev.twitter.com/overview/documentation) 使你能做一些显示最新推文这样的事情，它提供一系列特殊的结构，可以用来请求 Twitter 服务并返回特殊的信息。
+- **浏览器 API** 内置于 Web 浏览器中，能从浏览器和电脑周边环境中提取数据，并用来做有用的复杂的事情。例如，[Web 音频 API](/zh-CN/docs/Web/API/Web_Audio_API) 为在浏览器中处理音频提供了 JavaScript 结构——获取音轨、改变音量、应用特效等。在后台，浏览器实际上使用了一些复杂的低级代码（如 C++ 或 Rust）来进行实际的音频处理。但同样，这种复杂性已被应用程序接口抽象化。
+- **第三方 API** 缺省情况下不会内置于浏览器中，通常必须在 Web 中的某个地方获取代码和信息。例如，[Google Maps API](https://developers.google.com/maps/documentation/javascript) 使你能够执行诸如在网站上显示办公室的交互式地图之类的操作。它提供一系列特殊的结构，可以用来查询 Google 地图服务并返回特定信息。
 
-![](browser.png)
+![打开 Firefox 浏览器主页时的浏览器截图。默认情况下，浏览器内置了应用程序接口。第三方应用程序接口并非默认内置在浏览器中。要使用它们，必须从网络上的某个地方获取它们的代码和信息。](browser.png)
 
-### JavaScript，API 和其他 JavaScript 工具之间的关系
+### JavaScript、API 和其他 JavaScript 工具之间的关系
 
-如上所述，我们讨论了什么是客户端 JavaScript API，以及它们与 JavaScript 语言的关系。让我们回顾一下，使其更清晰，并提及其他 JavaScript 工具的适用位置：
+如上所述，我们讨论了什么是客户端 JavaScript API，以及它们与 JavaScript 语言的关系。让我们回顾一下，使其更清晰，并提及其他 JavaScript 工具的所适用的地方：
 
-- JavaScript——一种内置于浏览器的高级脚本语言，你可以用来实现 Web 页面/应用中的功能。注意 JavaScript 也可用于其他像 [Node](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Introduction) 这样的编程环境。但现在你不必考虑这些。
-- 客户端 API — 内置于浏览器的结构程序，位于 JavaScript 语言顶部，使你可以更容易的实现功能。
-- 第三方 API — 置于第三方普通的结构程序（例如 Twitter，Facebook），使你可以在自己的 Web 页面中使用那些平台的某些功能（例如在你的 Web 页面显示最新的 Tweets）。
-- JavaScript 库 — 通常是包含具有[特定功能](/zh-CN/docs/Learn/JavaScript/Building_blocks/Functions#Custom_functions)的一个或多个 JavaScript 文件，把这些文件关联到你的 Web 页以快速或授权编写常见的功能。例如包含 jQuery 和 Mootools
-- JavaScript 框架 — 从库开始的下一步，JavaScript 框架视图把 HTML、CSS、JavaScript 和其他安装的技术打包在一起，然后用来从头编写一个完整的 Web 应用。
+- JavaScript——一种内置于浏览器的高级脚本语言，你可以用来实现 Web 页面/应用中的功能。注意 JavaScript 也可用于其他像 [Node](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Introduction) 这样的编程环境。
+- 客户端 API——内置于浏览器的结构程序，位于 JavaScript 语言之上，使你可以更容易的实现功能。
+- 第三方 API——置于第三方普通的结构程序（例如 Disqus、Facebook），使你可以在自己的 Web 页面中使用这些平台的某些功能（例如在你的 Web 页面显示 Disqus 评论）。
+- JavaScript 库——通常是包含具有[自定义函数](/zh-CN/docs/Learn/JavaScript/Building_blocks/Functions)的一个或多个 JavaScript 文件，把这些文件关联到你的 Web 页以加快或启用常见的功能的编码。示例包括 jQuery、Mootools 和 React。
+- JavaScript 框架——从库开始的下一步，JavaScript 框架（例如 Angular 和 Ember）视图把 HTML、CSS、JavaScript 和其他安装的技术打包在一起，然后用来从头编写一个完整的 Web 应用。库和框架的主要区别在于“控制反转”。调用库中的方法时，开发人员处于控制地位。而框架的控制权则相反：框架调用开发人员的代码。
 
 ## API 可以做什么？
 
-在主流浏览器中有大量的可用 API，你可以在代码中做许多的事情，对此可以查看[MDN API index page](/zh-CN/docs/Web/API)。
+在主流浏览器中有大量的可用 API，你可以在代码中做许多的事情。参见 [MDN API 索引页](/zh-CN/docs/Web/API)。
 
 ### 常见浏览器 API
 
-特别地，你将使用的最常见的浏览器 API 类别（以及我们将更详细地介绍的）是：
+特别地，你将使用的最常见的浏览器 API 类别（以及我们将在本模块中更详细地介绍的）有：
 
-- **操作文档的 API**内置于浏览器中。最明显的例子是[DOM（文档对象模型）](/zh-CN/docs/Web/API/Document_Object_Model)API，它允许你操作 HTML 和 CSS — 创建、移除以及修改 HTML，动态地将新样式应用到你的页面，等等。每当你看到一个弹出窗口出现在一个页面上，或者显示一些新的内容时，这都是 DOM 的行为。你可以在在[Manipulating documents](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)中找到关于这些类型的 API 的更多信息。
-- **从服务器获取数据的 API** 用于更新网页的一小部分是相当好用的。这个看似很小的细节能对网站的性能和行为产生巨大的影响 — 如果你只是更新一个股票列表或者一些可用的新故事而不需要从服务器重新加载整个页面将使网站或应用程序感觉更加敏感和“活泼”。使这成为可能的 API 包括[`XMLHttpRequest`](/zh-CN/docs/Web/API/XMLHttpRequest)和[Fetch API](/zh-CN/docs/Web/API/Fetch_API)。你也可能会遇到描述这种技术的术语**Ajax**。你可以在[Fetching data from the server](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)找到关于类似的 API 的更多信息。
-- **用于绘制和操作图形的 API**目前已被浏览器广泛支持 — 最流行的是允许你以编程方式更新包含在 HTML {{htmlelement("canvas")}} 元素中的像素数据以创建 2D 和 3D 场景的[Canvas](/zh-CN/docs/Web/API/Canvas_API)和[WebGL](/zh-CN/docs/Web/API/WebGL_API)。例如，你可以绘制矩形或圆形等形状，将图像导入到画布上，然后使用 Canvas API 对其应用滤镜（如棕褐色滤镜或灰度滤镜），或使用 WebGL 创建具有光照和纹理的复杂 3D 场景。这些 API 经常与用于创建动画循环的 API（例如{{domxref("window.requestAnimationFrame()")}}）和其他 API 一起不断更新诸如动画和游戏之类的场景。
-- **音频和视频 API** 例如 {{domxref("HTMLMediaElement")}}、[Web Audio API](/zh-CN/docs/Web/API/Web_Audio_API) 和 [WebRTC](/zh-CN/docs/Web/API/WebRTC_API) 允许你使用多媒体来做一些非常有趣的事情，比如创建用于播放音频和视频的自定义 UI 控件，显示字幕字幕和你的视频，从网络摄像机抓取视频，通过画布操纵（见上），或在网络会议中显示在别人的电脑上，或者添加效果到音轨（如增益、失真、平移等） 。
-- **设备 API**基本上是以对网络应用程序有用的方式操作和检索现代设备硬件中的数据的 API。我们已经讨论过访问设备位置数据的地理定位 API，因此你可以在地图上标注你的位置。其他示例还包括通过系统通知（参见[Notifications API](/zh-CN/docs/Web/API/Notifications_API)）或振动硬件（参见[Vibration API](/zh-CN/docs/Web/API/Vibration_API)）告诉用户 Web 应用程序有用的更新可用。
-- **客户端存储 API**在 Web 浏览器中的使用变得越来越普遍 - 如果你想创建一个应用程序来保存页面加载之间的状态，甚至让设备在处于脱机状态时可用，那么在客户端存储数据将会是非常有用的。例如使用[Web Storage API](/zh-CN/docs/Web/API/Web_Storage_API)的简单的键 - 值存储以及使用[IndexedDB API](/zh-CN/docs/Web/API/IndexedDB_API)的更复杂的表格数据存储。
+- **操作文档的 API** 内置于浏览器中。最明显的例子是 [DOM（文档对象模型）API](/zh-CN/docs/Web/API/Document_Object_Model)，它允许你操作 HTML 和 CSS——创建、移除以及修改 HTML，动态地将新样式应用到你的页面，等等。每当你看到一个弹出窗口出现在一个页面上，或者显示一些新的内容时，这都是 DOM 的行为。你可以在[操控文档](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)一文中找到关于这些类型的 API 的更多信息。
+- **从服务器获取数据的 API** 用于更新网页的一小部分，其非常常用。这个看似很小的细节可以对网站的性能和行为产生巨大的影响——如果你只是更新一个股票列表或者一些可用的新故事而不需要从服务器重新加载整个页面将使网站或应用程序的响应感觉更快、更“敏捷”。主要用于此目的的 API 是 [Fetch API](/zh-CN/docs/Web/API/Fetch_API)，虽然旧的代码可能仍然会使用 [`XMLHttpRequest`](/zh-CN/docs/Web/API/XMLHttpRequest) API。你也可能会同时遇到描述这项技术的术语 **Ajax**）。你可以在[从服务器中获取数据](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)一文找到关于此类 API 的更多信息。
+- **用于绘制和操作图形的 API** 目前已被浏览器广泛支持。最流行的是允许你以编程方式更新包含在 HTML {{htmlelement("canvas")}} 元素中的像素数据以创建 2D 和 3D 场景的 [Canvas](/zh-CN/docs/Web/API/Canvas_API) 和 [WebGL](/zh-CN/docs/Web/API/WebGL_API)。例如，你可以绘制矩形或圆形等形状，将图像导入到画布上，然后使用 Canvas API 对其应用滤镜（如棕褐色滤镜或灰度滤镜），或使用 WebGL 创建具有光照和纹理的复杂 3D 场景。这些 API 经常与用于创建动画循环的 API（例如 {{domxref("window.requestAnimationFrame()")}}）和其他 API 一起不断更新诸如动画和游戏之类的场景。
+- **[音频和视频 API](/zh-CN/docs/Web/Media/Audio_and_video_delivery)** 例如 {{domxref("HTMLMediaElement")}}、[Web 音频 API](/zh-CN/docs/Web/API/Web_Audio_API) 和 [WebRTC](/zh-CN/docs/Web/API/WebRTC_API) 允许你使用多媒体来做一些非常有趣的事情，比如创建用于播放音频和视频的自定义 UI 控件、显示字幕字幕和你的视频、从网络摄像机抓取视频、通过画布操纵（见上），或在网络会议中显示在别人的电脑上，或者添加效果到音轨（如增益、失真、平移等） 。
+- **设备 API** 使得你可以与设备的硬件进行交互：例如，使用[地理位置 API](/zh-CN/docs/Web/API/Geolocation_API)来访问设备的 GPS，从而查找用户的位置。
+- **客户端存储 API** 使得你可以在客户端存储数据，因此你可以创建一个保存页面加载状态的应用，甚至让设备在处于离线状态时可用。有多种选项可供选择，例如使用 [Web 存储 API](/zh-CN/docs/Web/API/Web_Storage_API) 的简单的键/值存储以及使用 [IndexedDB API](/zh-CN/docs/Web/API/IndexedDB_API) 的更复杂的数据库存储。
 
 ### 常见第三方 API
 
 第三方 API 种类繁多; 下列是一些比较流行的你可能迟早会用到的第三方 API:
 
-- The [Twitter API](https://dev.twitter.com/overview/documentation), 允许你在你的网站上展示你最近的推文等。
-- The [Google Maps API](https://developers.google.com/maps/) 允许你在网页上对地图进行很多操作（这很有趣，它也是 Google 地图的驱动器）。现在它是一整套完整的，能够胜任广泛任务的 API。其能力已经被[Google Maps API Picker](https://developers.google.com/maps/documentation/api-picker)见证。
-- The [Facebook suite of API](https://developers.facebook.com/docs/) 允许你将很多 Facebook 生态系统中的功能应用到你的 app，使之受益，比如说它提供了通过 Facebook 账户登录、接受应用内支付、推送有针对性的广告活动等功能。
-- The [YouTube API](https://developers.google.com/youtube/), 允许你将 Youtube 上的视频嵌入到网站中去，同时提供搜索 Youtube，创建播放列表等众多功能。
-- The [Twilio API](https://www.twilio.com/), 其为你的 app 提供了针对语音通话和视频聊天的框架，以及从你的 app 发送短信息或多媒体信息等诸多功能。
-
-> **备注：** 你可以在 [Programmable Web API directory](http://www.programmableweb.com/category/all/apis).上发现更多关于第三方 API 的信息。
+- 地图 API（例如 [Mapquest](https://developer.mapquest.com/) 和 [Google Maps API](https://developers.google.com/maps/)），允许你在网页上对地图执行多种操作。
+- [Facebook API 套件](https://developers.facebook.com/docs/)，允许你将 Facebook 生态系统中的各个部分应用到你的应用并使之受益，比如说它提供了通过 Facebook 账户登录、接受应用内支付、推送有针对性的广告活动等功能。
+- [Telegram API](https://core.telegram.org/api)，允许你在网站中潜入来自 Telegram 频道的内容，此外还提供了对机器人的支持。
+- [YouTube API](https://developers.google.com/youtube/)，允许你将 Youtube 上的视频嵌入到网站中去，同时提供搜索 Youtube、创建播放列表等众多功能。
+- [Pinterest API](https://developers.pinterest.com/)，提供了管理 Pinterest 图板和图钉的工具，以便将它们纳入你的网站。
+- [Twilio API](https://www.twilio.com/docs)，为你的应用提供了针对语音通话和视频聊天的框架，以及从你的 app 发送短信息或多媒体信息等诸多功能。
+- [Disqus API](https://disqus.com/api/docs/)，提供了一个可集成到网站中的评论平台。
+- [Mastodon API](https://docs.joinmastodon.org/api/)，让你以编程方式操作 Mastodon 社交网络的特性。
+- [IFTTT API](https://ifttt.com/developers)，允许你通过一个平台集成多个 API。
 
 ## API 如何工作？
 
@@ -94,122 +98,119 @@ _图片来自：[Overloaded plug socket](https://www.flickr.com/photos/easy-pics
 
 ### 它们是基于对象的
 
-API 使用一个或多个 [JavaScript objects](/zh-CN/docs/Learn/JavaScript/Objects) 在你的代码中进行交互，这些对象用作 API 使用的数据（包含在对象属性中）的容器以及 API 提供的功能（包含在对象方法中）。
-
-> **备注：** 如果你不熟悉对象如何工作，则应继续学习 [JavaScript objects](/zh-CN/docs/Learn/JavaScript/Objects) 模块。
+API 使用一个或多个 [JavaScript 对象](/zh-CN/docs/Learn/JavaScript/Objects)在你的代码中进行交互，这些对象用作 API 使用的数据（包含在对象属性中）的容器以及 API 提供的功能（包含在对象方法中）。
 
-让我们回到 Geolocation API 的例子 - 这是一个非常简单的 API，由几个简单的对象组成：
+> **备注：** 如果你不熟悉对象如何工作，则应在继续之前学习 [JavaScript 对象](/zh-CN/docs/Learn/JavaScript/Objects)模块。
 
-- {{domxref("Geolocation")}}, 其中包含三种控制地理数据检索的方法
-- {{domxref("Position")}}, 表示在给定的时间的相关设备的位置。 — 它包含一个当前位置的 {{domxref("Coordinates")}} 对象。还包含了一个时间戳，这个时间戳表示获取到位置的时间。
-- {{domxref("Coordinates")}}, 其中包含有关设备位置的大量有用数据，包括经纬度，高度，运动速度和运动方向等。
-
-```js
-navigator.geolocation.getCurrentPosition(function (position) {
-  var latlng = new google.maps.LatLng(
-    position.coords.latitude,
-    position.coords.longitude,
-  );
-  var myOptions = {
-    zoom: 8,
-    center: latlng,
-    mapTypeId: google.maps.MapTypeId.TERRAIN,
-    disableDefaultUI: true,
-  };
-  var map = new google.maps.Map(
-    document.querySelector("#map_canvas"),
-    myOptions,
-  );
-});
-```
+让我们回到 Web 音频 API 的例子——这是一个相当复杂的 API，它由多个对象组成。最重要的包括：
 
-> **备注：** 当你第一次加载上述实例，应当出现一个对话框询问你是否乐意对此应用共享位置信息（参见 [它们在适当的地方有额外的安全机制](#它们在适当的地方有额外的安全机制) 这一稍后将会提到的部分）。你需要同意这项询问以将你的位置于地图上绘制。如果你始终无法看见地图，你可能需要手动修改许可项。修改许可项的方法取决于你使用何种浏览器，对于 Firefox 浏览器来说，在页面信息 > 权限 中修改位置权限，在 Chrome 浏览器中则进入 设置 > 隐私 > 显示高级设置 > 内容设置，其后修改位置设定。
+- {{domxref("AudioContext")}}，表示一个可以用于操控浏览器中播放音频的[音频图](/zh-CN/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#音频图)，并且拥有许多可用于操作音频的方法和属性。
+- {{domxref("MediaElementAudioSourceNode")}}，表示一个包含你想要在音频上下文中播放和操控的声音的 {{htmlelement("audio")}} 元素。
+- {{domxref("AudioDestinationNode")}}，表示音频的输出目的地，也就是你电脑上的实际输出设备——通常是你的扬声器或耳机。
 
-我们首先要使用 {{domxref("Geolocation.getCurrentPosition()")}} 方法返回设备的当前位置。浏览器的 {{domxref("Geolocation")}} 对象通过调用 {{domxref("Navigator.geolocation")}} 属性来访问。
+那么这些对象是如何交互的呢？如果你查看我们的[简单 Web 音频示例](https://github.com/mdn/learning-area/blob/main/javascript/apis/introduction/web-audio/index.html)（[也可以在线查看](https://mdn.github.io/learning-area/javascript/apis/introduction/web-audio/)），首先会看到如下的 HTML 代码：
 
-```js
-navigator.geolocation.getCurrentPosition(function(position) { ... });
-```
-
-这相当于做同样的事情
+```html
+
 
-```js
-var myGeo = navigator.geolocation;
-myGeo.getCurrentPosition(function(position) { ... });
+
+

+
 ```
 
-但是我们可以使用 "点运算符" 将我们的属性和方法的访问链接在一起，减少了我们必须写的行数。
-
-{{domxref("Geolocation.getCurrentPosition()")}} 方法只有一个必须的参数，这个参数是一个匿名函数，当设备的当前位置被成功取到时，这个函数会运行。这个函数本身有一个参数，它包含一个表示当前位置数据的 {{domxref("Position")}} 对象。
+首先，我们包含一个 `