diff --git a/.github/workflows/pr-check_redirects.yml b/.github/workflows/pr-check_redirects.yml index 090e956c7e5c97..e7d8a06664de92 100644 --- a/.github/workflows/pr-check_redirects.yml +++ b/.github/workflows/pr-check_redirects.yml @@ -4,10 +4,6 @@ on: pull_request: branches: - main - paths: - - .nvmrc - - files/** - - .github/workflows/pr-check_redirects.yml jobs: check_redirects: @@ -18,12 +14,27 @@ jobs: steps: - uses: actions/checkout@v4 + # This is a "required" workflow so path filtering can not be used: + # https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/collaborating-on-repositories-with-code-quality-features/troubleshooting-required-status-checks#handling-skipped-but-required-checks + # We have to rely on a custom filtering mechanism to run the checks only if required files are modified. + - uses: dorny/paths-filter@v2 + name: See if any file needs checking + id: filter + with: + filters: | + required_files: + - ".nvmrc" + - "files/**" + - ".github/workflows/pr-check_redirects.yml" + - uses: actions/checkout@v4 + if: steps.filter.outputs.required_files == 'true' with: repository: mdn/content path: mdn/content - name: Setup Node.js environment + if: steps.filter.outputs.required_files == 'true' uses: actions/setup-node@v4 with: node-version-file: ".nvmrc" @@ -31,6 +42,7 @@ jobs: cache-dependency-path: mdn/content/yarn.lock - name: Install all yarn packages + if: steps.filter.outputs.required_files == 'true' working-directory: ${{ github.workspace }}/mdn/content run: | yarn --frozen-lockfile @@ -39,6 +51,7 @@ jobs: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - name: Check redirects file(s) + if: steps.filter.outputs.required_files == 'true' env: CONTENT_ROOT: ${{ github.workspace }}/mdn/content/files CONTENT_TRANSLATED_ROOT: ${{ github.workspace }}/files diff --git a/docs/zh-cn/translation-guide.md b/docs/zh-cn/translation-guide.md index 0bcdb886bde7a2..bc8b60aef1501f 100644 --- a/docs/zh-cn/translation-guide.md +++ b/docs/zh-cn/translation-guide.md @@ -8,33 +8,20 @@ ## 元数据 -每个文档的开头都会有元数据，大致的结构如下： +每个文档的开头都会有元数据，但在翻译本地化文档时，我们不需要将上游文档中的所有元数据字段都复制到本地化文档中。对于 `page-type`、`browser-compat` 和 `spec-urls` 等元数据被用于站点管理和自动化数据处理，本地化文档中无需包含它们。此外，出于追踪文档同步情况的目的，我们在基本的元数据类别的基础上引入了 `l10n.sourceCommit`，用于记录对应英文文档的最新提交。本地化文档中应该使用的元数据说明如下： -```yaml ---- -title: atob() global function -short-title: atob() -slug: Web/API/atob -page-type: web-api-global-function -browser-compat: api.atob ---- -``` - -其中： - -- `title` 为文档的大标题 -- `short-title` 为显示在侧边栏和面包屑中的短标题 -- `slug` 为与网页 URL 相关的元数据（URL path 部分的规则为：`//docs/`） -- `page-type` 为页面的类型，将被用于站点管理和自动化数据处理 -- `browser-compat` 为[**浏览器兼容性表**][]对应的宏所使用的元数据 - -在简体中文文档翻译中，请适当翻译 `title` 元数据，以方便他人根据标题检索内容，`slug` 元数据则应与翻译对应的英文文档保持不变。对于 `page-type`、`browser-compat` 以及部分文档中使用的 `spec-urls` 元数据，它们被用于站点管理和自动化数据处理，而 yari 平台会自动将这些元数据由英文文档合并到本地化文档中。若没有特殊的需要，请将这些元数据从简体中文文档中移除。对于 `short-title`，如果简体中文文档采用的短标题与英文文档相同，则无需添加（仅在使用与英文文档*不同*的短标题时添加该元数据）。 +- `title`（必须）：为文档的大标题 +- `short-title`（可选）：为显示在侧边栏和面包屑中的短标题，若本地化文档采用的短标题与英文文档相同，则无需添加该元数据 +- `slug`（必须）：为与网页 URL 相关的元数据（URL path 部分的规则为：`//docs/`），请与对应的英文文档保持一致 +- `l10n.sourceCommit`（可选）：为对应英文文档的最新提交的 SHA 值，请在完整同步英文文档翻译后更新或添加该元数据 最终在简体中文文档中呈现的元数据如下所示： ```yaml -title: atob() 全局函数 -slug: Web/API/atob +title: HTMLAnchorElement：hash 属性 +slug: Web/API/HTMLAnchorElement/hash +l10n: + sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 ``` ## 翻译标题和 ID @@ -80,13 +67,13 @@ If you are new to HTML, CSS, JavaScript, etc., try our [Learn web development](/ 例如，对于以下链接： ```md -Reference to [Live sample macros](/en-US/docs/MDN/Structures/Live_samples#live_sample_macros). +Reference to [Live sample macros](/en-US/docs/MDN/Writing_guidelines/Page_structures/Live_samples#live_sample_macros). ``` 请对应中文文档，更新其片段标识： ```md -参考：[运行实例宏](/zh-CN/docs/MDN/Structures/Live_samples#运行实例宏)。 +参考：[运行实例宏](/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Live_samples#运行实例宏)。 ``` > 请注意，无论指向的本地化文档是否存在，都请让链接指向本地化文档。yari 平台可以在指向本地化文档的链接不存在的情况下，自动将其回落到对应英文版本的链接。 @@ -129,7 +116,7 @@ Reference to [Live sample macros](/en-US/docs/MDN/Structures/Live_samples#live_s 简体中文标点符号参考资源： -- [教育部《标点符号用法》](https://www.moe.gov.cn/ewebeditor/uploadfile/2015/01/13/20150113091548267.pdf) +- [GB/T 15834―2011 标点符号用法]() - [维基百科：标点符号](https://zh.wikipedia.org/zh-cn/标点符号) ### 中文和拉丁语系文字间加空格 @@ -208,5 +195,4 @@ Like this. 英文文档中使用了一些常见标题，为了保持简体中文文档的一致性，请在翻译时参考术语表中的[标题和表格的翻译](glossary.md#标题表格)。 [如何使用 markdown 来撰写文档]: https://developer.mozilla.org/zh-CN/docs/MDN/Writing_guidelines/Howto/Markdown_in_MDN -[**浏览器兼容性表**]: https://developer.mozilla.org/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Compatibility_tables [运行实例]: https://developer.mozilla.org/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Live_samples diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index 6146d150cd5dde..9a54b79d9a2615 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -1612,7 +1612,7 @@ /es/docs/Web/API/Canvas_API/A_basic_ray-caster /es/docs/orphaned/Web/API/Canvas_API/A_basic_ray-caster /es/docs/Web/API/Canvas_API/Tutorial/Compositing/Ejemplo /es/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation /es/docs/Web/API/Canvas_API/Tutorial/Compositing/Example /es/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation -/es/docs/Web/API/Console/tabla /es/docs/Web/API/console/table +/es/docs/Web/API/Console/tabla /es/docs/Web/API/console/table_static /es/docs/Web/API/Constraint_validation/invalid_event /es/docs/Web/API/HTMLInputElement/invalid_event /es/docs/Web/API/Coordinates /es/docs/Web/API/GeolocationCoordinates /es/docs/Web/API/Coordinates/latitude /es/docs/Web/API/GeolocationCoordinates/latitude @@ -1648,6 +1648,7 @@ /es/docs/Web/API/File/Using_files_from_web_applications /es/docs/Web/API/File_API/Using_files_from_web_applications /es/docs/Web/API/File/fileName /es/docs/web/api/file/name /es/docs/Web/API/FileReader/onload /es/docs/Web/API/FileReader/load_event +/es/docs/Web/API/FormData/Using_FormData_Objects /es/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects /es/docs/Web/API/Geolocalización /es/docs/Web/API/Geolocation /es/docs/Web/API/Geolocation.clearWatch /es/docs/Web/API/Geolocation/clearWatch /es/docs/Web/API/Geolocation.getCurrentPosition /es/docs/Web/API/Geolocation/getCurrentPosition @@ -1748,7 +1749,20 @@ /es/docs/Web/API/WindowTimers/setTimeout /es/docs/Web/API/setTimeout /es/docs/Web/API/XMLDocument/async /es/docs/Web/API/XMLDocument /es/docs/Web/API/XMLHttpRequest/FormData /es/docs/Web/API/FormData +/es/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest /es/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest /es/docs/Web/API/XMLHttpRequest/onreadystatechange /es/docs/Web/API/XMLHttpRequest/readystatechange_event +/es/docs/Web/API/console/assert /es/docs/Web/API/console/assert_static +/es/docs/Web/API/console/count /es/docs/Web/API/console/count_static +/es/docs/Web/API/console/dir /es/docs/Web/API/console/dir_static +/es/docs/Web/API/console/dirxml /es/docs/Web/API/console/dirxml_static +/es/docs/Web/API/console/error /es/docs/Web/API/console/error_static +/es/docs/Web/API/console/info /es/docs/Web/API/console/info_static +/es/docs/Web/API/console/log /es/docs/Web/API/console/log_static +/es/docs/Web/API/console/table /es/docs/Web/API/console/table_static +/es/docs/Web/API/console/time /es/docs/Web/API/console/time_static +/es/docs/Web/API/console/timeEnd /es/docs/Web/API/console/timeend_static +/es/docs/Web/API/console/trace /es/docs/Web/API/console/trace_static +/es/docs/Web/API/console/warn /es/docs/Web/API/console/warn_static /es/docs/Web/API/event.defaultPrevented /es/docs/Web/API/Event/defaultPrevented /es/docs/Web/API/event.which /es/docs/Web/API/UIEvent/which /es/docs/Web/Accesibilidad /es/docs/Web/Accessibility @@ -1968,7 +1982,7 @@ /es/docs/Web/Guide/HTML/categorias_de_contenido /es/docs/Web/HTML/Content_categories /es/docs/Web/Guide/Movil /es/docs/Web/Guide/Mobile /es/docs/Web/Guide/Performance/Usando_web_workers /es/docs/Web/API/Web_Workers_API/Using_web_workers -/es/docs/Web/Guide/Usando_Objetos_FormData /es/docs/Web/API/FormData/Using_FormData_Objects +/es/docs/Web/Guide/Usando_Objetos_FormData /es/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects /es/docs/Web/HTML/Atributos /es/docs/Web/HTML/Attributes /es/docs/Web/HTML/Atributos/accept /es/docs/Web/HTML/Attributes/accept /es/docs/Web/HTML/Atributos/min /es/docs/Web/HTML/Attributes/min @@ -2288,6 +2302,7 @@ /es/docs/Web/JavaScript/Language_Resources /es/docs/conflicting/Web/JavaScript/JavaScript_technologies_overview /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/Indicador_regexp_no-val /es/docs/Web/JavaScript/Reference/Errors/Bad_regexp_flag @@ -2314,7 +2329,7 @@ /es/docs/Web/JavaScript/Referencia/Características_Despreciadas /es/docs/web/javascript/reference/deprecated_and_obsolete_features /es/docs/Web/JavaScript/Referencia/Classes /es/docs/Web/JavaScript/Reference/Classes /es/docs/Web/JavaScript/Referencia/Classes/Class_fields /es/docs/Web/JavaScript/Reference/Classes/Public_class_fields -/es/docs/Web/JavaScript/Referencia/Classes/Private_class_fields /es/docs/Web/JavaScript/Reference/Classes/Private_class_fields +/es/docs/Web/JavaScript/Referencia/Classes/Private_class_fields /es/docs/Web/JavaScript/Reference/Classes/Private_properties /es/docs/Web/JavaScript/Referencia/Classes/constructor /es/docs/Web/JavaScript/Reference/Classes/constructor /es/docs/Web/JavaScript/Referencia/Classes/extends /es/docs/Web/JavaScript/Reference/Classes/extends /es/docs/Web/JavaScript/Referencia/Classes/static /es/docs/Web/JavaScript/Reference/Classes/static @@ -2850,7 +2865,7 @@ /es/docs/XHTML /es/docs/Glossary/XHTML /es/docs/XMLHttpRequest /es/docs/Web/API/XMLHttpRequest /es/docs/XMLHttpRequest/FormData /es/docs/Web/API/FormData -/es/docs/XMLHttpRequest/Using_XMLHttpRequest /es/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest +/es/docs/XMLHttpRequest/Using_XMLHttpRequest /es/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest /es/docs/XMLHttpRequest/abort /es/docs/Web/API/XMLHttpRequest/abort /es/docs/XMLHttpRequest/onreadystatechange /es/docs/Web/API/XMLHttpRequest/readystatechange_event /es/docs/XPath /es/docs/Web/XPath diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index 18bb85dfc674b2..844778e50bca95 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -4251,10 +4251,6 @@ "marco_mucino" ] }, - "Web/API/FormData/Using_FormData_Objects": { - "modified": "2019-03-23T23:19:26.530Z", - "contributors": ["ramingar", "Siro_Diaz", "wilo"] - }, "Web/API/Fullscreen_API": { "modified": "2019-03-23T22:19:43.566Z", "contributors": ["wbamberg", "israel-munoz"] @@ -5646,22 +5642,6 @@ "Jorolo" ] }, - "Web/API/XMLHttpRequest/Using_XMLHttpRequest": { - "modified": "2020-03-17T04:09:47.273Z", - "contributors": [ - "jccuevas", - "camsa", - "david_ru", - "cesaruve", - "Sheppy", - "Sebastianz", - "iiegor", - "javierdp", - "bardackx", - "teoli", - "inma_610" - ] - }, "Web/API/XMLHttpRequest/abort": { "modified": "2019-03-23T22:12:16.683Z", "contributors": ["Sheppy", "todomagichere"] @@ -5678,6 +5658,26 @@ "modified": "2020-10-15T22:26:49.508Z", "contributors": ["mmednik"] }, + "Web/API/XMLHttpRequest_API/Using_FormData_Objects": { + "modified": "2019-03-23T23:19:26.530Z", + "contributors": ["ramingar", "Siro_Diaz", "wilo"] + }, + "Web/API/XMLHttpRequest_API/Using_XMLHttpRequest": { + "modified": "2020-03-17T04:09:47.273Z", + "contributors": [ + "jccuevas", + "camsa", + "david_ru", + "cesaruve", + "Sheppy", + "Sebastianz", + "iiegor", + "javierdp", + "bardackx", + "teoli", + "inma_610" + ] + }, "Web/API/atob": { "modified": "2019-03-23T23:03:12.715Z", "contributors": ["fscholz", "sathyasanles"] @@ -5702,51 +5702,51 @@ "modified": "2019-08-30T08:42:12.082Z", "contributors": ["ajuanjojjj", "fcanellas", "vlguerrero", "chrisdavidmills"] }, - "Web/API/console/assert": { + "Web/API/console/assert_static": { "modified": "2019-03-23T22:47:53.587Z", "contributors": ["Takumakun", "AlePerez92", "danycoro"] }, - "Web/API/console/count": { + "Web/API/console/count_static": { "modified": "2019-03-23T22:07:26.644Z", "contributors": ["deluxury", "roberbnd"] }, - "Web/API/console/dir": { + "Web/API/console/dir_static": { "modified": "2020-11-11T11:46:41.122Z", "contributors": ["jomoji", "laloptk"] }, - "Web/API/console/dirxml": { + "Web/API/console/dirxml_static": { "modified": "2019-03-23T22:18:03.809Z", "contributors": ["aeroxmotion"] }, - "Web/API/console/error": { + "Web/API/console/error_static": { "modified": "2019-03-23T22:06:32.134Z", "contributors": ["BrodaNoel"] }, - "Web/API/console/info": { + "Web/API/console/info_static": { "modified": "2019-03-23T22:12:32.604Z", "contributors": ["Lwissitoon"] }, - "Web/API/console/log": { + "Web/API/console/log_static": { "modified": "2019-03-23T22:19:48.741Z", "contributors": ["BrodaNoel", "fcanellas"] }, - "Web/API/console/table": { + "Web/API/console/table_static": { "modified": "2019-03-23T22:20:30.589Z", "contributors": ["AlePerez92"] }, - "Web/API/console/time": { + "Web/API/console/time_static": { "modified": "2019-03-18T21:42:22.745Z", "contributors": ["jotaoncode"] }, - "Web/API/console/timeEnd": { + "Web/API/console/timeend_static": { "modified": "2020-10-15T22:13:11.825Z", "contributors": ["xlhector10"] }, - "Web/API/console/trace": { + "Web/API/console/trace_static": { "modified": "2019-03-23T22:22:51.545Z", "contributors": ["Axl-Nolasco"] }, - "Web/API/console/warn": { + "Web/API/console/warn_static": { "modified": "2020-10-15T21:53:36.780Z", "contributors": ["juanluisrp", "oderflaj"] }, @@ -10575,7 +10575,7 @@ "GoToLoop" ] }, - "Web/JavaScript/Reference/Classes/Private_class_fields": { + "Web/JavaScript/Reference/Classes/Private_properties": { "modified": "2020-10-15T22:33:54.045Z", "contributors": ["aronvx"] }, diff --git a/files/es/glossary/abstraction/index.md b/files/es/glossary/abstraction/index.md index 655ab0771c27b7..922c9175e81507 100644 --- a/files/es/glossary/abstraction/index.md +++ b/files/es/glossary/abstraction/index.md @@ -3,6 +3,8 @@ title: Abstracción slug: Glossary/Abstraction --- +{{GlossarySidebar}} + En {{Glossary("computer programming", "programación")}}, una abstracción es una manera de reducir la complejidad y permitir un diseño e implementación más eficientes en sistemas de software complejos. Oculta la dificultad técnica de los sistemas detrás de {{Glossary("API", "APIs")}} más simples. ## Ventajas de la Abstracción diff --git a/files/es/glossary/accessibility/index.md b/files/es/glossary/accessibility/index.md index 2cf8cc25e493d8..64f15856c5d92f 100644 --- a/files/es/glossary/accessibility/index.md +++ b/files/es/glossary/accessibility/index.md @@ -3,6 +3,8 @@ title: Accesibilidad slug: Glossary/Accessibility --- +{{GlossarySidebar}} + _La accesibilidad web_ (**A11Y**) hace referencia a las buenas prácticas para mantener la usabilidad de un sitio web a pesar de las restricciones físicas y técnicas. La accesibilidad web se define formalmente y es discutida en el {{Glossary("W3C")}} a través del {{Glossary("WAI","Web Accessibility Initiative")}} (WAI). ## Saber más diff --git a/files/es/glossary/accessibility_tree/index.md b/files/es/glossary/accessibility_tree/index.md index cd992b005732fd..6dfbe2e59b7e0c 100644 --- a/files/es/glossary/accessibility_tree/index.md +++ b/files/es/glossary/accessibility_tree/index.md @@ -3,6 +3,8 @@ title: Árbol de accesibilidad (AOM) slug: Glossary/Accessibility_tree --- +{{GlossarySidebar}} + El **árbol de accesibilidad** o **modelo de objeto de accesibillidad (AOM)**, contiene información relacionada con {{Glossary("accessibility")}} para la mayoría de los elementos HTML. Los navegadores convierten el lenguaje markup en una representación interna denominada _[DOM tree](/es/docs/Web/API/Document_object_model/How_to_create_a_DOM_tree)_ (árbol DOM). El árbol DOM contiene objetos para todos los elementos de markup, atributos y nodos de texto. Luego, los navegadores crean un árbol de accesibilidad basado en el árbol de DOM, el cual es usado por Accessibility APIs de plataformas específicas para las tecnologías asistenciales como los lectores de pantalla. @@ -20,13 +22,8 @@ Hay cuatro elementos en un árbol de objeto de accesibilidad: Además, el árbol de accesibilidad usualmente contiene información sobre lo que se puede hacer con un elemento: _seguir_ un enlace, _completar_ un cuadro de texto, etc. - +## Véase también + +- [Glosario de MDN Web Docs](/es/docs/Glossary) + - {{Glossary("Accessibility")}} + - {{Glossary("ARIA")}} diff --git a/files/es/glossary/adobe_flash/index.md b/files/es/glossary/adobe_flash/index.md index 89c4a94bd00bf5..0856c9c59c51ae 100644 --- a/files/es/glossary/adobe_flash/index.md +++ b/files/es/glossary/adobe_flash/index.md @@ -3,6 +3,8 @@ title: Adobe Flash slug: Glossary/Adobe_Flash --- +{{GlossarySidebar}} + Flash es una tecnología obsolescente desarrollada por Adobe que hace posible crear aplicaciones Web ricas, gráficos vectoriales y multimedia. Para utilizar Flash dentro de un {{Glossary("Browser","web browser")}} es necesario instalar el complemento adecuado. ## Aprende más diff --git a/files/es/glossary/ajax/index.md b/files/es/glossary/ajax/index.md index b1fca848dbf064..4e8651b1768b50 100644 --- a/files/es/glossary/ajax/index.md +++ b/files/es/glossary/ajax/index.md @@ -3,6 +3,8 @@ title: AJAX slug: Glossary/AJAX --- +{{GlossarySidebar}} + AJAX (de las siglas en Inglés **A**synchronous {{glossary("JavaScript")}} **A**nd {{glossary("XML")}} ) es una práctica de programación utilizada para construir páginas web más complejas y dinámicas, utilizando una tecnología conocida como {{Glossary("XHR_(XMLHttpRequest)","XMLHttpRequest")}}. Lo que AJAX nos permite hacer, es modificar partes específicas del {{Glossary("DOM")}} de una página {{Glossary("HTML")}} sin la necesidad de refrescar la página entera. AJAX tambien nos permite trabajar asincrónicamente; esto significa que tu código seguirá corriendo mientras esa parte de la página de tu sitio web intenta recargarse (en comparación, una carga síncrona bloquearía tu código hasta que esa parte de la página web terminara de recargarse) diff --git a/files/es/glossary/algorithm/index.md b/files/es/glossary/algorithm/index.md index 91b34885bed6af..5b9f20f4b4dc02 100644 --- a/files/es/glossary/algorithm/index.md +++ b/files/es/glossary/algorithm/index.md @@ -3,4 +3,6 @@ title: Algoritmo slug: Glossary/Algorithm --- +{{GlossarySidebar}} + Un algoritmo es un conjunto de instrucciones autocontenidas que realiza una función. diff --git a/files/es/glossary/api/index.md b/files/es/glossary/api/index.md index c5052b6b914d3b..ef41c890907a69 100644 --- a/files/es/glossary/api/index.md +++ b/files/es/glossary/api/index.md @@ -3,6 +3,8 @@ title: API slug: Glossary/API --- +{{GlossarySidebar}} + ## Resumen Una **_Interfaz de Programación de Aplicaciones_** (API, por sus siglas en inglés) define un conjunto de directivas que pueden ser usadas para tener una pieza de software funcionando con algunas otras. diff --git a/files/es/glossary/apple_safari/index.md b/files/es/glossary/apple_safari/index.md index 5b90a6df5bd6b0..458d0e1e2b8d5b 100644 --- a/files/es/glossary/apple_safari/index.md +++ b/files/es/glossary/apple_safari/index.md @@ -3,6 +3,8 @@ title: Apple Safari slug: Glossary/Apple_Safari --- +{{GlossarySidebar}} + [Safari](http://www.apple.com/safari/) es un {{Glossary("Browser","navegador web")}} desarrollado por Apple y ligado a Mac OS X y iOS. Está basado en el motor de código abierto [WebKit](http://www.webkit.org/). ## Saber más diff --git a/files/es/glossary/application_context/index.md b/files/es/glossary/application_context/index.md index d276962368513e..f3f994374f2723 100644 --- a/files/es/glossary/application_context/index.md +++ b/files/es/glossary/application_context/index.md @@ -3,6 +3,8 @@ title: Contexto de aplicación slug: Glossary/Application_context --- +{{GlossarySidebar}} + Un contexto de aplicación es un [contexto de navegación](/es/docs/Glossary/Browsing_context) de nivel superior que tiene aplicado un [manifiesto](/es/docs/Web/Manifest). Si un contexto de aplicación es creado como resultado de una petición al agente usuario para que navegue a un enlace profundo, el agente usuario debe navegar inmediatamente hacia al enlace profundo con sustitución habilitada. De otra manera, cuando se crea el contexto de aplicación, el agente usuario debe navegar inmediatamente a la URL de inicio con sustitución habilitada. diff --git a/files/es/glossary/argument/index.md b/files/es/glossary/argument/index.md index 7ceef4ff0c034e..b47e6422708af4 100644 --- a/files/es/glossary/argument/index.md +++ b/files/es/glossary/argument/index.md @@ -3,6 +3,8 @@ title: Argumento slug: Glossary/Argument --- +{{GlossarySidebar}} + Un argumento es un valor (primitivo u objeto) (Véase {{glossary("value")}}, {{Glossary("primitive")}}, {{Glossary("object")}}) pasado como valor de entrada a una función ({{Glossary("function")}}). ## Saber más diff --git a/files/es/glossary/aria/index.md b/files/es/glossary/aria/index.md index 179b3781c288fc..352466c17c9e58 100644 --- a/files/es/glossary/aria/index.md +++ b/files/es/glossary/aria/index.md @@ -3,6 +3,8 @@ title: ARIA slug: Glossary/ARIA --- +{{GlossarySidebar}} + **ARIA** (_Accessible Rich {{glossary("Internet")}} Applications_) es una especificación de la {{Glossary("W3C")}} para agregar semantica y otros metadatos a {{Glossary("HTML")}} para ayudar a los usuarios con tecnologia de apoyo. Por ejemplo, puedes agregar el atributo `role="alert"` a un {{HTMLElement("p")}} {{glossary("tag")}} para notificar a un usuario con discapacidad visual que una información es importante . diff --git a/files/es/glossary/arpa/index.md b/files/es/glossary/arpa/index.md index 8ecaeac409145d..681def4cf98468 100644 --- a/files/es/glossary/arpa/index.md +++ b/files/es/glossary/arpa/index.md @@ -3,6 +3,8 @@ title: ARPA slug: Glossary/ARPA --- +{{GlossarySidebar}} + **.arpa** (parametros de dirección y enrutamiento) es un {{glossary("TLD","dominio de alto nivel")}} usado para propositos de infraestructura de Internet, especialmente busqueda inversa de DNS (ej., encontrar el {{glossary('nombre de dominio')}} para una {{glossary("dirección IP")}}) suministrada. ## Learn more diff --git a/files/es/glossary/arpanet/index.md b/files/es/glossary/arpanet/index.md index c5fb60913c0683..433011f14a5b85 100644 --- a/files/es/glossary/arpanet/index.md +++ b/files/es/glossary/arpanet/index.md @@ -3,6 +3,8 @@ title: Arpanet slug: Glossary/Arpanet --- +{{GlossarySidebar}} + La **ARPAnet** (advanced research projects agency network) o Red de Angencias de Proyectos de Investigación Avanzada en español, era una red de computadoras construida en 1969 como un medio resistente para enviar datos militares y conectar principales grupos de investigación a través de los Estados Unidos. ARPAnet ejecutó NCP (network control protocol/protocolo de control de red) y subsequentemente la primera versión del protocolo de Internet o la suite {{glossary("TCP")}}/{{glossary("IPv6","IP")}}, teniendo la ARPAnet una descatada parte en la naciente {{glossary("Internet")}}. ARPAnet finalizó a comienzos de 1990. ## Saber más diff --git a/files/es/glossary/array/index.md b/files/es/glossary/array/index.md index 994d50d905942f..6d2e83447beb98 100644 --- a/files/es/glossary/array/index.md +++ b/files/es/glossary/array/index.md @@ -3,6 +3,8 @@ title: Arreglos (Matrices) slug: Glossary/Array --- +{{GlossarySidebar}} + Un arreglo (matriz) es una colección ordenada de datos (tanto {{glossary("Primitivo", "primitivos")}} u {{glossary("Object", "objetos")}} dependiendo del lenguaje). Los arreglos (matrices) se emplean para almacenar multiples valores en una sola variable, frente a las variables que sólo pueden almacenar un valor (por cada variable). Cada elemento del arreglo (matriz) tiene un número al que está asociado, llamado **"índice numérico"** (numeric index), que permite acceder a él. diff --git a/files/es/glossary/ascii/index.md b/files/es/glossary/ascii/index.md index 6b6a74d094b569..a5c274de6ffbd8 100644 --- a/files/es/glossary/ascii/index.md +++ b/files/es/glossary/ascii/index.md @@ -3,6 +3,8 @@ title: ASCII slug: Glossary/ASCII --- +{{GlossarySidebar}} + **ASCII** (_American Standard Code for Information Interchange_) es uno de los métodos de codificación más utilizados por las computadoras para convertir letras, números, signos de puntuación y códigos de control en formato digital. Desde 2007, {{Glossary("UTF-8")}} lo reemplazó en la Web. ## Aprender más diff --git a/files/es/glossary/asynchronous/index.md b/files/es/glossary/asynchronous/index.md index 7eb6157cc8675f..a9b3f354463bcc 100644 --- a/files/es/glossary/asynchronous/index.md +++ b/files/es/glossary/asynchronous/index.md @@ -3,6 +3,8 @@ title: Asíncrono slug: Glossary/Asynchronous --- +{{GlossarySidebar}} + El término **asíncrono** se refiere al concepto de que más de una cosa ocurre al mismo tiempo, o múltiples cosas relacionadas ocurren sin esperar a que la previa se haya completado. En informática, la palabra "asíncrono" se usa en los siguientes contextos: - Redes y comunicaciones diff --git a/files/es/glossary/atag/index.md b/files/es/glossary/atag/index.md index e2d4f7c66fa310..0aeb9af962cc15 100644 --- a/files/es/glossary/atag/index.md +++ b/files/es/glossary/atag/index.md @@ -3,6 +3,8 @@ title: ATAG slug: Glossary/ATAG --- +{{GlossarySidebar}} + ATAG (Authoring Tool {{glossary("Accessibility")}} Guidelines/Pautas de accesibilidad de herramientas de autor) es una recomendación de la {{Glossary("W3C")}} para la construcción de herramientas de autor y producir contenido accesible. ## Saber más diff --git a/files/es/glossary/attribute/index.md b/files/es/glossary/attribute/index.md index e4fb71042f4787..8dfbd702064d89 100644 --- a/files/es/glossary/attribute/index.md +++ b/files/es/glossary/attribute/index.md @@ -3,6 +3,8 @@ title: Atributo slug: Glossary/Attribute --- +{{GlossarySidebar}} + Un atributo amplía una etiqueta ({{Glossary("tag")}}), cambiando su comportamiento o proporcionando metadatos. Un atributo tiene la forma nombre=valor (especificando el identificador del atributo y el valor asociado al atributo). ## Saber más diff --git a/files/es/glossary/bandwidth/index.md b/files/es/glossary/bandwidth/index.md index 7aa4ee76ed76c8..9e8bae52ab53d3 100644 --- a/files/es/glossary/bandwidth/index.md +++ b/files/es/glossary/bandwidth/index.md @@ -3,6 +3,8 @@ title: Ancho de banda slug: Glossary/Bandwidth --- +{{GlossarySidebar}} + El ancho de banda es la medida de cuanta información puede pasar a través de una conexión de datos en un momento dado. El ancho de banda suele medirse en múltipos de bits-por-segundo (bps), por ejemplo, megabits-por-segundo (Mbps) o gigabits-por-segundo (Gbps). ## Saber más diff --git a/files/es/glossary/base64/index.md b/files/es/glossary/base64/index.md index 97735c0b727521..35b9c38b10467c 100644 --- a/files/es/glossary/base64/index.md +++ b/files/es/glossary/base64/index.md @@ -3,6 +3,8 @@ title: Base64 codificando y decodificando slug: Glossary/Base64 --- +{{GlossarySidebar}} + **Base64** es un grupo de esquemas de [codificación de binario a texto](https://es.wikipedia.org/wiki/Codificaci%C3%B3n_de_binario_a_texto) que representa los datos binarios mediante una cadena ASCII, traduciéndolos en una representación radix-64. El término _Base64_ se origina de un [sistema de codificación de transmisión de contenido MIME](https://es.wikipedia.org/wiki/Multipurpose_Internet_Mail_Extensions#Content-Transfer-Encoding) específico. Los esquemas de codificación Base64 son comúnmente usados cuando se necesita codificar datos binarios para que sean almacenados y transferidos sobre un medio diseñado para tratar con datos textuales. Esto es para asegurar que los datos se mantienen intactos y sin modificaciones durante la transmisión. Base64 es comúnmente usado en muchas aplicaciones, incluyendo la escritura de emails vía [MIME](https://es.wikipedia.org/wiki/Multipurpose_Internet_Mail_Extensions) y el almacenamiento de datos complejos en [XML](/es/docs/XML). @@ -125,14 +127,14 @@ function b64ToUint6(nChr) { return nChr > 64 && nChr < 91 ? nChr - 65 : nChr > 96 && nChr < 123 - ? nChr - 71 - : nChr > 47 && nChr < 58 - ? nChr + 4 - : nChr === 43 - ? 62 - : nChr === 47 - ? 63 - : 0; + ? nChr - 71 + : nChr > 47 && nChr < 58 + ? nChr + 4 + : nChr === 43 + ? 62 + : nChr === 47 + ? 63 + : 0; } function base64DecToArr(sBase64, nBlocksSize) { @@ -167,14 +169,14 @@ function uint6ToB64(nUint6) { return nUint6 < 26 ? nUint6 + 65 : nUint6 < 52 - ? nUint6 + 71 - : nUint6 < 62 - ? nUint6 - 4 - : nUint6 === 62 - ? 43 - : nUint6 === 63 - ? 47 - : 65; + ? nUint6 + 71 + : nUint6 < 62 + ? nUint6 - 4 + : nUint6 === 62 + ? 43 + : nUint6 === 63 + ? 47 + : 65; } function base64EncArr(aBytes) { @@ -222,27 +224,27 @@ function UTF8ArrToStr(aBytes) { aBytes[++nIdx] - 128 : nPart > 247 && nPart < 252 && nIdx + 4 < nLen /* five bytes */ - ? ((nPart - 248) << 24) + - ((aBytes[++nIdx] - 128) << 18) + - ((aBytes[++nIdx] - 128) << 12) + - ((aBytes[++nIdx] - 128) << 6) + - aBytes[++nIdx] - - 128 - : nPart > 239 && nPart < 248 && nIdx + 3 < nLen /* four bytes */ - ? ((nPart - 240) << 18) + - ((aBytes[++nIdx] - 128) << 12) + - ((aBytes[++nIdx] - 128) << 6) + - aBytes[++nIdx] - - 128 - : nPart > 223 && nPart < 240 && nIdx + 2 < nLen /* three bytes */ - ? ((nPart - 224) << 12) + - ((aBytes[++nIdx] - 128) << 6) + - aBytes[++nIdx] - - 128 - : nPart > 191 && nPart < 224 && nIdx + 1 < nLen /* two bytes */ - ? ((nPart - 192) << 6) + aBytes[++nIdx] - 128 - : /* nPart < 127 ? */ /* one byte */ - nPart, + ? ((nPart - 248) << 24) + + ((aBytes[++nIdx] - 128) << 18) + + ((aBytes[++nIdx] - 128) << 12) + + ((aBytes[++nIdx] - 128) << 6) + + aBytes[++nIdx] - + 128 + : nPart > 239 && nPart < 248 && nIdx + 3 < nLen /* four bytes */ + ? ((nPart - 240) << 18) + + ((aBytes[++nIdx] - 128) << 12) + + ((aBytes[++nIdx] - 128) << 6) + + aBytes[++nIdx] - + 128 + : nPart > 223 && nPart < 240 && nIdx + 2 < nLen /* three bytes */ + ? ((nPart - 224) << 12) + + ((aBytes[++nIdx] - 128) << 6) + + aBytes[++nIdx] - + 128 + : nPart > 191 && nPart < 224 && nIdx + 1 < nLen /* two bytes */ + ? ((nPart - 192) << 6) + aBytes[++nIdx] - 128 + : /* nPart < 127 ? */ /* one byte */ + nPart, ); } @@ -263,14 +265,14 @@ function strToUTF8Arr(sDOMStr) { nChr < 0x80 ? 1 : nChr < 0x800 - ? 2 - : nChr < 0x10000 - ? 3 - : nChr < 0x200000 - ? 4 - : nChr < 0x4000000 - ? 5 - : 6; + ? 2 + : nChr < 0x10000 + ? 3 + : nChr < 0x200000 + ? 4 + : nChr < 0x4000000 + ? 5 + : 6; } aBytes = new Uint8Array(nArrLen); diff --git a/files/es/glossary/bigint/index.md b/files/es/glossary/bigint/index.md index 8a114a08b62669..aa0a7c03fbd2f3 100644 --- a/files/es/glossary/bigint/index.md +++ b/files/es/glossary/bigint/index.md @@ -3,6 +3,8 @@ title: BigInt slug: Glossary/BigInt --- +{{GlossarySidebar}} + En {{Glossary("JavaScript")}}, **BigInt** es un tipo de dato numerico que puede representar números enteros en el [formato de precision arbitrario](https://en.wikipedia.org/wiki/Arbitrary-precision_arithmetic). En otros lenguajes de programación pueden existir diferentes tipos numéricos, por ejemplo: enteros, flotantes, dobles o bignums (numeros grandes). ## Aprende más diff --git a/files/es/glossary/blink/index.md b/files/es/glossary/blink/index.md index f19100504cc623..2c8c770eddefa3 100644 --- a/files/es/glossary/blink/index.md +++ b/files/es/glossary/blink/index.md @@ -3,6 +3,8 @@ title: Blink slug: Glossary/Blink --- +{{GlossarySidebar}} + Blink es un motor de renderizado para [navegadores](/es/docs/Glossary/Browser) de código abierto desarrollado por Google, que forma parte de Chromium (y por lo tanto también de [Chrome](/es/docs/Glossary/Google_Chrome)). Concretamente, Blink es una copia de la librería WebCore de [WebKit](/es/docs/Glossary/WebKit), que se encarga del diseño, renderizado, y del [DOM](/es/docs/Glossary/DOM). ## Para saber más diff --git a/files/es/glossary/block-level_content/index.md b/files/es/glossary/block-level_content/index.md index 21ca3c8833ab8e..388e3602b39a18 100644 --- a/files/es/glossary/block-level_content/index.md +++ b/files/es/glossary/block-level_content/index.md @@ -3,6 +3,8 @@ title: Elementos en bloque slug: Glossary/Block-level_content --- +{{GlossarySidebar}} + Los elementos, en HTML (lenguaje de marcas de hipertexto - **Hypertext Markup Language**) usualmente son elementos "en bloque" o [elementos "en línea"](/es/docs/Web/HTML/Elementos_en_línea). Un elemento en bloque ocupa todo el espacio de su elemento padre (contenedor), creando así un "bloque". Este artículo ayuda a explicar lo que esto significa. Los navegadores suelen mostrar el elemento a nivel de bloque con un salto de línea antes y después del elemento. El siguiente ejemplo demuestra la influencia elementos en bloque: diff --git a/files/es/glossary/block/css/index.md b/files/es/glossary/block/css/index.md index 34346786a2e42a..8fc2905678784c 100644 --- a/files/es/glossary/block/css/index.md +++ b/files/es/glossary/block/css/index.md @@ -3,6 +3,8 @@ title: Block (CSS) slug: Glossary/Block/CSS --- +{{GlossarySidebar}} + Un **bloque** en una página web es un {{glossary("elemento")}} {{glossary("HTML")}} que aparece en una nueva línea, por ejemplo debajo del elemento precedente y encima del siguiente elemento (comúnmente conocido como _block-level element)_. Por ejemplo, visto que {{htmlelement("a")}} es un _elemento en línea_ — puedes colocar varios enlaces uno al lado del otro en el código HTML y no se posicionarán en la misma línea como uno al otro en la salida representada. Usando la propiedad {{cssxref("display")}} puedes cambiar si un elemento se muestre en línea o en bloque (entre muchas otras opciones); los **bloques** también están sujetos a los efectos de posicionaresquemas y usar la propiedad {{cssxref("position")}}. diff --git a/files/es/glossary/block/index.md b/files/es/glossary/block/index.md index 82164961ed2461..129ca7b5059070 100644 --- a/files/es/glossary/block/index.md +++ b/files/es/glossary/block/index.md @@ -3,6 +3,8 @@ title: Block slug: Glossary/Block --- +{{GlossarySidebar}} + El término **bloque** puede tener diferentes significados dependiendo del conexto. Puede referirse a: {{GlossaryDisambiguation}} diff --git a/files/es/glossary/boolean/index.md b/files/es/glossary/boolean/index.md index 1e2bd71b398f35..a3a36fd20c02ab 100644 --- a/files/es/glossary/boolean/index.md +++ b/files/es/glossary/boolean/index.md @@ -3,6 +3,8 @@ title: Boolean slug: Glossary/Boolean --- +{{GlossarySidebar}} + En ciencias de informática, un **boolean** es un dato lógico que solo puede tener los valores true o false. ## Aprender más diff --git a/files/es/glossary/breadcrumb/index.md b/files/es/glossary/breadcrumb/index.md index 6312ebb472cb90..3d88b781e65665 100644 --- a/files/es/glossary/breadcrumb/index.md +++ b/files/es/glossary/breadcrumb/index.md @@ -3,6 +3,8 @@ title: Miga de pan slug: Glossary/Breadcrumb --- +{{GlossarySidebar}} + Una **miga de pan**, o rastro de migas de pan, es una ayuda a la navegación que se sitúa normalmente entre la cabecera del sitio y el contenido principal y muestra, bien la jerarquía de la página actual en relación con la estructura del sitio desde el nivel superior o bien una lista de los enlaces utilizados para llegar a la página actual en el orden en que se han visitado. Una miga de pan para este documento se vería más o menos así: diff --git a/files/es/glossary/browser/index.md b/files/es/glossary/browser/index.md index fd84394820becc..05cc41df45a28c 100644 --- a/files/es/glossary/browser/index.md +++ b/files/es/glossary/browser/index.md @@ -3,6 +3,8 @@ title: Navegador slug: Glossary/Browser --- +{{GlossarySidebar}} + Un _Navegador web_ es un programa o aplicación que da acceso a la [Web](/es/docs/Glossary/World_Wide_Web), y permite a los usuarios el acceso a más páginas a través de [hipervínculos](/es/docs/Glossary/Hyperlink). ## Para saber más diff --git a/files/es/glossary/browsing_context/index.md b/files/es/glossary/browsing_context/index.md index 6e3aa791975725..bf9a7e49b0f0aa 100644 --- a/files/es/glossary/browsing_context/index.md +++ b/files/es/glossary/browsing_context/index.md @@ -3,6 +3,8 @@ title: Contexto de navegación slug: Glossary/Browsing_context --- +{{GlossarySidebar}} + Un **contexto de navegación** es el entorno en el que un {{glossary("navegador")}} muestra un {{domxref("Documento")}} (normalmente una pestaña, pero posiblemente también una ventana o un marco (_frame_) dentro de una página). Cada contexto de navegación tiene un {{glossary("origen")}} específico, el origen del documento activo y un historial que enumera todos los documentos mostrados en orden. @@ -15,5 +17,3 @@ La comunicación entre contextos de navegación está severamente restringida. E - [Browsing context on WHATWG](https://html.spec.whatwg.org/multipage/browsers.html#windows) - [Browsing context on W3C](http://w3c.github.io/html/browsers.html#sec-browsing-contexts) - -{{QuickLinksWithSubpages("/es/docs/Glossary")}} diff --git a/files/es/glossary/buffer/index.md b/files/es/glossary/buffer/index.md index 4cbb674418093a..67f329f3ef98db 100644 --- a/files/es/glossary/buffer/index.md +++ b/files/es/glossary/buffer/index.md @@ -3,6 +3,8 @@ title: Buffer slug: Glossary/Buffer --- +{{GlossarySidebar}} + Un búfer es un espacio de memoria en el que se almacenan datos de forma temporal mientras se están transfiriendo de un sitio a otro. ## Saber más diff --git a/files/es/glossary/cache/index.md b/files/es/glossary/cache/index.md index 3cfc37587c304a..e5041ae4ead929 100644 --- a/files/es/glossary/cache/index.md +++ b/files/es/glossary/cache/index.md @@ -3,6 +3,8 @@ title: Caché slug: Glossary/Cache --- +{{GlossarySidebar}} + La **caché** (o caché web) es un componente que almacena temporalmente respuestas HTTP para que puedan ser usadas por peticiones HTTP posteriores mientras cumplan ciertas condiciones. ## Saber más diff --git a/files/es/glossary/cacheable/index.md b/files/es/glossary/cacheable/index.md index da4d5a2d6f539b..7eb0e0aee017b0 100644 --- a/files/es/glossary/cacheable/index.md +++ b/files/es/glossary/cacheable/index.md @@ -3,6 +3,8 @@ title: Cacheable slug: Glossary/Cacheable --- +{{GlossarySidebar}} + Una respuesta **_cacheable_** es una respuesta HTTP que se puede almacenar en caché, que se almacena para recuperarla y usarla más tarde, guardando una nueva solicitud en el servidor. No todas las respuestas HTTP se pueden almacenar en caché, estas son las siguientes restricciones para que una respuesta HTTP se almacene en caché: - El método utilizado en la solicitud se puede almacenar en caché, es decir, un método {{HTTPMethod("GET")}} o {{HTTPMethod("HEAD")}}. Una respuesta a una solicitud {{HTTPMethod("POST")}} o {{HTTPMethod("PATCH")}} también se puede almacenar en caché si se indica frescura y el encabezado {{HTTPHeader("Content-Location")}} es establecido, pero esto rara vez se implementa. (Por ejemplo, Firefox no lo admite según .) Otros métodos, como {{HTTPMethod("PUT")}} o {{HTTPMethod("DELETE")}} no se pueden almacenar en caché y su resultado no se puede almacenar en caché. diff --git a/files/es/glossary/call_stack/index.md b/files/es/glossary/call_stack/index.md index d1cfd68424db78..41aba057817826 100644 --- a/files/es/glossary/call_stack/index.md +++ b/files/es/glossary/call_stack/index.md @@ -3,6 +3,8 @@ title: Pila de llamadas slug: Glossary/Call_stack --- +{{GlossarySidebar}} + Una **pila de llamadas** es un mecanismo para que un intérprete (como el intérprete de JavaScript en un navegador web) realice un seguimiento de en que lugar se llama a múltiples {{glossary("function","funciones")}}, qué función se esta ejecutando actualmente y qué funciones son llamadas desde esa función, etc. - Cuando un script llama a una función, el intérprete la añade a la pila de llamadas y luego empieza a ejecutar la función. @@ -59,13 +61,7 @@ El código del ejemplo se ejecutaría de la siguiente manera: En resumen, empezamos con una lista de la pila llamadas vacía. Cuando invocamos una función, ésta es automáticamente añadida a la pila de llamadas. Una vez ha ejecutado todo su código, también de manera automática es eliminada de la pila de llamadas. Finalmente, la pila de llamadas vuelve a estar vacía. - +## Véase también + +- [Glosario de MDN Web Docs](/es/docs/Glossary) + - {{Glossary("function", "Función")}} diff --git a/files/es/glossary/callback_function/index.md b/files/es/glossary/callback_function/index.md index 54aa1c5566dfa5..03400de9fda186 100644 --- a/files/es/glossary/callback_function/index.md +++ b/files/es/glossary/callback_function/index.md @@ -3,6 +3,8 @@ title: Función Callback slug: Glossary/Callback_function --- +{{GlossarySidebar}} + Una función de callback es una función que se pasa a otra función como un argumento, que luego se invoca dentro de la función externa para completar algún tipo de rutina o acción. Ejemplo: diff --git a/files/es/glossary/canvas/index.md b/files/es/glossary/canvas/index.md index 4ce0ac36a26586..0e766c37e7f6be 100644 --- a/files/es/glossary/canvas/index.md +++ b/files/es/glossary/canvas/index.md @@ -3,6 +3,8 @@ title: Canvas slug: Glossary/Canvas --- +{{GlossarySidebar}} + El **elemento canvas** forma parte de [HTML5](https://es.wikipedia.org/wiki/HTML5) y habilita la [representación (rendering)](https://es.wikipedia.org/wiki/Renderizaci%C3%B3n) dinámica y en [scripts](https://es.wikipedia.org/wiki/Script) de figuras en 2D y 3D de imágenes de [mapas de Bits](https://es.wikipedia.org/wiki/Bitmap). Es a un bajo nivel, un modelo procedimental que actualiza un [mapa de bits](https://es.wikipedia.org/wiki/Bitmap) y no tiene un [grafo de escena](https://en.wikipedia.org/wiki/Scene_graph) integrado. Proporciona una zona gráfica vacía en la cual {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} específicas pueden dibujar (como Canvas 2D o {{Glossary("WebGL")}}). diff --git a/files/es/glossary/card_sorting/index.md b/files/es/glossary/card_sorting/index.md index 31b7c5affd9faf..bdf8f34b0991e3 100644 --- a/files/es/glossary/card_sorting/index.md +++ b/files/es/glossary/card_sorting/index.md @@ -3,6 +3,8 @@ title: Clasificación por tarjetas (card sorting) slug: Glossary/Card_sorting --- +{{GlossarySidebar}} + La clasificación por tarjetas (card sorting) es una técnica simple utilizada en la {{glossary("Information architecture", "arquitectura de la información")}} en la cual las personas involucradas en el diseño de una página web (u otro tipo de producto) están invitadas a describir el contenido / servicios / características que creen que el producto debería contener, para luego organizar estas características dentro de categorías o grupos. Esto se puede usar, por ejemplo, para determinar qué debe aparecer en cada página de una aplicación web. El nombre proviene del hecho de que a menudo la clasificación de las cartas se lleva a cabo literalmente escribiendo los elementos que se van a clasificar en tarjetas, y luego apilando las tarjetas. ## Saber más diff --git a/files/es/glossary/cdn/index.md b/files/es/glossary/cdn/index.md index 2cbc6d840b8ac4..4394f25d636c3c 100644 --- a/files/es/glossary/cdn/index.md +++ b/files/es/glossary/cdn/index.md @@ -3,6 +3,8 @@ title: CDN slug: Glossary/CDN --- +{{GlossarySidebar}} + Una **Red de distribución de contenidos** (_CDN en inglés_) es un grupo de servidores distribuidos en muchas ubicaciones. Estos servidores almacenan copias duplicadas de datos para que los servidores puedan cumplir con las solicitudes de datos en función de qué servidores están más cerca de los respectivos usuarios finales. Las CDN hacen que el servicio rápido se vea menos afectado por el alto tráfico. Los CDN se usan ampliamente para entregar hojas de estilo y archivos Javascript (activos estáticos) de bibliotecas como Bootstrap, jQuery, etc. Es preferible usar CDN para esos archivos de biblioteca por varias razones: diff --git a/files/es/glossary/challenge/index.md b/files/es/glossary/challenge/index.md index b163b8102d42c9..8123531126a461 100644 --- a/files/es/glossary/challenge/index.md +++ b/files/es/glossary/challenge/index.md @@ -3,6 +3,8 @@ title: Protocolos desafío-respuesta slug: Glossary/Challenge --- +{{GlossarySidebar}} + En protocolos de seguridad, un _desafío_ es una información enviada al cliente por el servidor con el fin de generar una respuesta diferente cada vez . Los protocolos desafío-respuesta son una forma de batallar contra los [ataques de REPLAY](https://es.wikipedia.org/wiki/Ataque_de_REPLAY) donde un atacante escucha los mensajes previos y los reenvía en un momento posterior para obtener las mismas credenciales que el mensaje original. El [protocolo de autenticación HTTP](/es/docs/Web/HTTP/Authentication) está basado en los protocolos desafío-respuesta, aunque la autenticación "Basic" no usa un desafío real (el _realm_ siempre es el mismo). diff --git a/files/es/glossary/character/index.md b/files/es/glossary/character/index.md index 01eb08e1239513..e7f83f9ed295b2 100644 --- a/files/es/glossary/character/index.md +++ b/files/es/glossary/character/index.md @@ -3,6 +3,8 @@ title: Caracter slug: Glossary/Character --- +{{GlossarySidebar}} + Un _caracter_ es un símbolo (letras, números, puntuación) o un caracter de "control" que no se imprime (p. ej., Retorno de carro o guión suave — `soft hypen`). {{Glossary("UTF-8")}} es el conjunto de caracteres más común e incluye los grafemas de los lenguajes humanos más populares. ## Aprende más diff --git a/files/es/glossary/character_encoding/index.md b/files/es/glossary/character_encoding/index.md index 95f26ebad4693f..db0d8cf03e2136 100644 --- a/files/es/glossary/character_encoding/index.md +++ b/files/es/glossary/character_encoding/index.md @@ -3,6 +3,8 @@ title: Codificación de caracteres slug: Glossary/Character_encoding --- +{{GlossarySidebar}} + Una codificación define cómo se traducen los bytes a texto y viceversa. Una secuencia de bytes se pueden interpretar de diferentes formas. Eligiendo una codificación en particular (como UTF-8), decimos como la secuencia de bytes debe ser interpretada. Por ejemplo, en HTML normalmente especificamos que la codificiación va a ser UTF-8 con la siguiente linea: diff --git a/files/es/glossary/character_set/index.md b/files/es/glossary/character_set/index.md index 810d6f179c9631..3f5a47e7f98fb8 100644 --- a/files/es/glossary/character_set/index.md +++ b/files/es/glossary/character_set/index.md @@ -3,25 +3,18 @@ title: Conjunto de caracteres slug: Glossary/Character_set --- +{{GlossarySidebar}} + Un **conjunto de caracteres** es un sistema de codificación para que las computadoras sepan cómo reconocer un {{Glossary("Character", "caracter")}}, incluidas letras, números, signos de puntuación y espacios en blanco. En épocas anteriores, los países desarrollaron sus propios conjuntos de caracteres debido a los diferentes idiomas utilizados, como los códigos Kanji JIS (por ejemplo, Shift-JIS, EUC-JP, etc.) para japonés, Big5 para chino tradicional y KOI8-R para ruso. Sin embargo, {{Glossary("Unicode")}} se convirtió gradualmente en el conjunto de caracteres más aceptable por su soporte de idiomas universal. Si un conjunto de caracteres se usa incorrectamente (por ejemplo, Unicode para un artículo codificado en Big5), es posible que no vean más que caracteres rotos, que se llaman [Mojibake](https://es.wikipedia.org/wiki/Mojibake). - +## Véase también + +- [Codificación de caracteres](https://es.wikipedia.org/wiki/Codificación_de_caracteres) en Wikipedia +- [Mojibake](https://es.wikipedia.org/wiki/Mojibake) en Wikipedia +- [Glosario de MDN Web Docs](/es/docs/Glossary) + - {{Glossary("Character", "Caracter")}} + - {{Glossary("Unicode")}} diff --git a/files/es/glossary/chrome/index.md b/files/es/glossary/chrome/index.md index 9cc77380906c02..7f5f6a4761a7ad 100644 --- a/files/es/glossary/chrome/index.md +++ b/files/es/glossary/chrome/index.md @@ -3,6 +3,8 @@ title: Chrome slug: Glossary/Chrome --- +{{GlossarySidebar}} + En un navegador, Chrome es cualquier aspecto visible de un navegador aparte de las páginas web en sí (por ejemplo, barras de herramientas, barra de menús, pestañas). Esto no debe confundirse con el navegador {{glossary("Google Chrome")}}. ## Leer más diff --git a/files/es/glossary/cia/index.md b/files/es/glossary/cia/index.md index ce6e005273c9d6..413a99824b78f7 100644 --- a/files/es/glossary/cia/index.md +++ b/files/es/glossary/cia/index.md @@ -3,6 +3,8 @@ title: CID slug: Glossary/CIA --- +{{GlossarySidebar}} + CID (Confidencialidad, Integridad, Disponibilidad) (también llamado la triada CID o la triada DIC) es un modelo que guía las políticas de una organización para la seguridad de la información. ## Saber más diff --git a/files/es/glossary/cipher/index.md b/files/es/glossary/cipher/index.md index 70c06531dcec75..72bb0faf582ba6 100644 --- a/files/es/glossary/cipher/index.md +++ b/files/es/glossary/cipher/index.md @@ -3,6 +3,8 @@ title: Algoritmo criptográfico slug: Glossary/Cipher --- +{{GlossarySidebar}} + En {{glossary("cryptography", "criptografía")}}, un algoritmo criptográfico es un algoritmo que puede {{glossary("encryption", "encriptar")}} {{glossary("cleartext", "texto en lenguaje natural")}} para hacerlo ilegible, y para que sea {{glossary("decryption", "desencriptado")}} con el fin de recuperar el texto original. Los algoritmos de cifrado eran muy comunes mucho antes de la era de la información (e.g., [cifrados por sustitucion](https://es.wikipedia.org/wiki/Cifrado_por_sustituci%C3%B3n) y [cifrados por transposición](https://es.wikipedia.org/wiki/Cifrado_por_transposici%C3%B3n)), pero ninguno de ellos era criptográficamente seguros excepto [one-time pad](https://es.wikipedia.org/wiki/Libreta_de_un_solo_uso). diff --git a/files/es/glossary/ciphertext/index.md b/files/es/glossary/ciphertext/index.md index 064fd19685d175..e9e42dadff67a0 100644 --- a/files/es/glossary/ciphertext/index.md +++ b/files/es/glossary/ciphertext/index.md @@ -3,6 +3,8 @@ title: Texto Cifrado slug: Glossary/Ciphertext --- +{{GlossarySidebar}} + En {{glossary("Cryptography", "Criptografía")}}, un texto cifrado es un mensaje codificado que transmite información pero no es legible a menos que se {{glossary("decryption","descifre")}} con el {{glossary("cipher", "algoritmo criptográfico")}} correcto y el secreto correcto (generalmente una {{glossary("key","clave")}}), reproduciendo el {{glossary("cleartext", "texto simple")}} original. La seguridad de un texto cifrado, y por lo tanto el secreto de la información contenida, depende de usar un cifrado seguro y mantener la clave en secreto. ## Saber más diff --git a/files/es/glossary/class/index.md b/files/es/glossary/class/index.md index 781671379a7d22..3c29bb38f8a555 100644 --- a/files/es/glossary/class/index.md +++ b/files/es/glossary/class/index.md @@ -3,6 +3,8 @@ title: Clase slug: Glossary/Class --- +{{GlossarySidebar}} + En {{glossary("OOP","programación orientada a objetos")}}, una clase define las características de un {{glossary("object","objeto")}}. Una clase es una plantilla que define {{glossary("property","propiedades")}} y {{glossary("method","métodos")}}, es un modelo abstracto a partir del cual se pueden crear instancias más específicas. ## Saber más diff --git a/files/es/glossary/clickjacking/index.md b/files/es/glossary/clickjacking/index.md index 6d178689a78393..ddc0a97b9af4b8 100644 --- a/files/es/glossary/clickjacking/index.md +++ b/files/es/glossary/clickjacking/index.md @@ -3,6 +3,8 @@ title: Clickjacking slug: Glossary/Clickjacking --- +{{GlossarySidebar}} + Clickjacking es un ataque basado en la interfaz que engaña a los usuarios de un sitio web para que sin saberlo hagan clic en enlaces maliciosos. En clickjacking, los atacantes incrustan sus enlaces maliciosos en botones o páginas legítimas en un sitio web. En un {{glossary("Site")}} infectado, cada vez que un usuario hace clic en un enlace legítimo, el atacante obtiene información confidencial de ese usuario, lo que finalmente compromete la privacidad del usuario en Internet. El clickjacking puede ser evitado implementando una [Política de Seguridad de Contenido (frame-ancestors)](/es/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors) e implementando [atributos de Set-Cookie](/es/docs/Web/HTTP/Headers/Set-Cookie#attributes). diff --git a/files/es/glossary/closure/index.md b/files/es/glossary/closure/index.md index a7fed93a5529cc..a114e60d55aa52 100644 --- a/files/es/glossary/closure/index.md +++ b/files/es/glossary/closure/index.md @@ -3,6 +3,8 @@ title: Clausura slug: Glossary/Closure --- +{{GlossarySidebar}} + Una clausura o _closure_ es una función que guarda referencias del estado adyacente (**{{glossary("scope", "ámbito léxico")}}**). En otras palabras, una clausura permite acceder al ámbito de una función exterior desde una función interior. En {{glossary("JavaScript")}}, las clausuras se crean cada vez que una **{{glossary("function","función")}}** es creada. ## Saber más diff --git a/files/es/glossary/cms/index.md b/files/es/glossary/cms/index.md index 21520a9d4601be..dbe83c4cc4356e 100644 --- a/files/es/glossary/cms/index.md +++ b/files/es/glossary/cms/index.md @@ -3,6 +3,8 @@ title: Sistema de gestión de contenidos slug: Glossary/CMS --- +{{GlossarySidebar}} + Un sistema de gestión de contenidos o CMS es un programa informático que permite a los usuarios publicar, organizar, cambiar o eliminar diferentes tipos de contenido como texto, imágenes incrustadas, video, audio y código interactivo. ## Saber más diff --git a/files/es/glossary/codec/index.md b/files/es/glossary/codec/index.md index 2f11863ab65265..b96f35ca1a14ba 100644 --- a/files/es/glossary/codec/index.md +++ b/files/es/glossary/codec/index.md @@ -3,6 +3,8 @@ title: Códec slug: Glossary/Codec --- +{{GlossarySidebar}} + Un _códec_ (acrónimo de "**_co_**dificador-**_dec_**odificador") es un programa, algoritmo, o dispositivo que codifica o decodifica un flujo de datos. Cada códec sabe cómo tratar un estándar específico de codificado o compresión. ## Saber más diff --git a/files/es/glossary/compile/index.md b/files/es/glossary/compile/index.md index 4aca4e6c3569de..cf894d511f81cc 100644 --- a/files/es/glossary/compile/index.md +++ b/files/es/glossary/compile/index.md @@ -5,6 +5,8 @@ l10n: sourceCommit: ed947b2c608428b62a60f07d09dc543f732dc09b --- +{{GlossarySidebar}} + Compilar es el proceso de transformar un programa informático escrito en un {{Glossary("computer programming", "lenguaje")}} en un conjunto de instrucciones en otro formato o lenguaje. Un **compilador** es un programa de computadora que realiza dicha tarea. Normalmente, un compilador transforma código escrito en un lenguaje de alto nivel como [C++](https://es.wikipedia.org/wiki/C++), [Rust]() o [Java]() en código ejecutable — llamado **código binario** o **código máquina**. [WebAssembly](/es/docs/WebAssembly), por ejemplo, es una forma de código binario ejecutable que [puede ser compilado desde código escrito en C++, Rust, C#, Go, Swift y muchos otros lenguajes](https://webassembly.org/getting-started/developers-guide/) y luego puede ser ejecutado en cualquier página web de cualquier navegador. diff --git a/files/es/glossary/compile_time/index.md b/files/es/glossary/compile_time/index.md index 5d5941482444a9..2c09d7feadec02 100644 --- a/files/es/glossary/compile_time/index.md +++ b/files/es/glossary/compile_time/index.md @@ -3,6 +3,8 @@ title: Tiempo de compilación slug: Glossary/Compile_time --- +{{GlossarySidebar}} + El _tiempo de compilación_ es el tiempo desde que el programa es cargado por primera vez hasta que el programa es {{Glossary("parse","parsed")}}. ## Aprende más diff --git a/files/es/glossary/computer_programming/index.md b/files/es/glossary/computer_programming/index.md index 7b9cb908f9bd19..99075f073e6537 100644 --- a/files/es/glossary/computer_programming/index.md +++ b/files/es/glossary/computer_programming/index.md @@ -3,6 +3,8 @@ title: Programación de computadoras slug: Glossary/Computer_Programming --- +{{GlossarySidebar}} + Programación de computadoras es un proceso de componer y organizar un conjunto de instrucciones. Éstas le indican a una computadora/software qué hacer en un lenguaje comprensible para la computadora. Estas instrucciones pueden presentarse en diferentes lenguajes, tales como C++, Java, JavaScript, HTML, Python, Ruby y Rust. Usando un lenguaje apropiado, puedes programar/crear todo tipo de software. Por ejemplo, un programa que ayude a científicos con cálculos complejos; una base de datos que almacene grandes cantidades de datos; un sitio web que permita a la gente descargar música, o un software de animación que permita a la gente crear películas animadas. diff --git a/files/es/glossary/constant/index.md b/files/es/glossary/constant/index.md index 30b02274cf12e2..89d39660dbc73e 100644 --- a/files/es/glossary/constant/index.md +++ b/files/es/glossary/constant/index.md @@ -3,6 +3,8 @@ title: Constante slug: Glossary/Constant --- +{{GlossarySidebar}} + Una constante es un valor que el programador no puede cambiar, por ejemplo números (1, 2, 42). Con {{glossary("variable","variables")}}, por otra parte, el programador puede asignar un nuevo {{glossary("value", "valor")}} a una variable cuyo nombre ya esté en uso. Al igual que las variables, algunas constantes están unidas a identificadores. Por ejemplo, el identificador `pi` podría estar vinculado al valor 3.14... . diff --git a/files/es/glossary/constructor/index.md b/files/es/glossary/constructor/index.md index 7265487fd7fb69..229fba451dcc23 100644 --- a/files/es/glossary/constructor/index.md +++ b/files/es/glossary/constructor/index.md @@ -3,6 +3,8 @@ title: Constructor slug: Glossary/Constructor --- +{{GlossarySidebar}} + Un **constructor** pertenece a una clase objeto ({{glossary("object")}}) particular la cual es instanciada. El constructor inicializa este objeto y puede otorgar acceso a su información privada. El concepto de objeto puede ser aplicado a la mayoría de los lenguajes orientados a objetos ({{glossary("OOP","object-oriented programming")}}). En esencia, un constructor en {{glossary("JavaScript")}} suele ser declarado al comienzo de una instancia de una clase ({{glossary("class")}}). ## Sintaxis diff --git a/files/es/glossary/cookie/index.md b/files/es/glossary/cookie/index.md index e2eba010c7cb7f..602f161134384e 100644 --- a/files/es/glossary/cookie/index.md +++ b/files/es/glossary/cookie/index.md @@ -3,6 +3,8 @@ title: Cookie slug: Glossary/Cookie --- +{{GlossarySidebar}} + Una cookie es una pequeña información enviada por un sitio web que se almacena en el navegador del ordenador del usuario. Las cookies sirven para personalizar la experiencia que tiene el usuario al navegar por un sitio web. Pueden contener las preferencias del usuario o entradas de información al acceder a dicha web. El usuario puede personalizar su navegador para aceptar, rechazar, o borrar las cookies. diff --git a/files/es/glossary/copyleft/index.md b/files/es/glossary/copyleft/index.md index 3a4c499a941a29..36f93d443969b3 100644 --- a/files/es/glossary/copyleft/index.md +++ b/files/es/glossary/copyleft/index.md @@ -3,6 +3,8 @@ title: Copyleft slug: Glossary/Copyleft --- +{{GlossarySidebar}} + _Copyleft_ es un término, que normalmente se refiere a una licencia, y que se utiliza para indicar que toda redistribución de un trabajo bajo esta licencia **es obligatorio** que esté sujeta a la **misma licencia** **que el original**. Un buen ejemplo de copyleft es la licencia GNU [GPL](/es/docs/Glossary/GPL) (para aplicaciones software) y la licencia _Creative Commons SA_ (_Share Alike_ en español Compartir Igual) (para trabajos y obras de arte). ## Para saber más diff --git a/files/es/glossary/cors-safelisted_request_header/index.md b/files/es/glossary/cors-safelisted_request_header/index.md index ec2509608d22ba..e2d034e4b02614 100644 --- a/files/es/glossary/cors-safelisted_request_header/index.md +++ b/files/es/glossary/cors-safelisted_request_header/index.md @@ -3,6 +3,8 @@ title: Encabezado de solicitud incluido en la lista segura de CORS slug: Glossary/CORS-safelisted_request_header --- +{{GlossarySidebar}} + Un [encabezado de solicitud incluido en la lista segura de CORS](https://fetch.spec.whatwg.org/#cors-safelisted-request-header) es uno de los siguientes [encabezados HTTP](/es/docs/Web/HTTP/Headers): diff --git a/files/es/glossary/cors/index.md b/files/es/glossary/cors/index.md index 382bcd46ef3798..60f2afafbdc757 100644 --- a/files/es/glossary/cors/index.md +++ b/files/es/glossary/cors/index.md @@ -3,6 +3,8 @@ title: CORS slug: Glossary/CORS --- +{{GlossarySidebar}} + **CORS** (_Cross-Origin Resource Sharing_ o en español Intercambio de recursos de origen cruzado) es un sistema que consiste en transmitir {{Glossary("HTTP_header", "HTTP headers")}}, que determina si los navegadores bloquean el acceso del código JavaScript frontend a las respuestas de peticiones de origen cruzado. La [política de seguridad del mismo origen](/es/docs/Web/Security/Same-origin_policy) prohíbe el acceso a los recursos de orígenes cruzados. Pero CORS brinda a los servidores web la capacidad de decir que desean optar por permitir el acceso de origen cruzado a sus recursos. diff --git a/files/es/glossary/cross-site_scripting/index.md b/files/es/glossary/cross-site_scripting/index.md index 02bf80a33ee3e7..53a6b2f76896b2 100644 --- a/files/es/glossary/cross-site_scripting/index.md +++ b/files/es/glossary/cross-site_scripting/index.md @@ -3,6 +3,8 @@ title: Cross-site scripting slug: Glossary/Cross-site_scripting --- +{{GlossarySidebar}} + Cross-site scripting (XSS) es una vulnerabilidad de seguridad que permite a un atacante inyectar en un sitio web código malicioso del lado del cliente. Este código es ejecutado por las víctimas y permite a los atacante eludir los controles de acceso y hacerse pasar por usuarios. Según el Open Web Application Security Project, XSS fue la [séptima vulnerabilidad más común de las aplicaciones web](https://www.owasp.org/images/7/72/OWASP_Top_10-2017_%28en%29.pdf.pdf) en 2017. Estos ataques tienen éxito si la aplicación web no emplea suficiente validación o codificación. El navegador del usuario no puede detectar que el script malicioso no es confiable, por lo que da acceso a cookies, tokens de sesión u otra información sensible específica del sitio, o permite que el escript reescriba contenido {{glossary("HTML")}}. diff --git a/files/es/glossary/crud/index.md b/files/es/glossary/crud/index.md index 176b388a28cc33..90745ebd2492bb 100644 --- a/files/es/glossary/crud/index.md +++ b/files/es/glossary/crud/index.md @@ -3,6 +3,8 @@ title: CRUD slug: Glossary/CRUD --- +{{GlossarySidebar}} + **CRUD** (Create, Read, Update, Delete) es un acrónimo para las maneras en las que se puede operar sobre información almacenada. Es un nemónico para las cuatro funciones del almacenamiento persistente. CRUD usualmente se refiere a operaciones llevadas a cabo en una base de datos o un almácen de datos, pero también pude aplicar a funciones de un nivel superior de una aplicación como soft deletes donde la información no es realmente eliminada, sino es marcada como eliminada a tráves de un estatus. ## Aprende más diff --git a/files/es/glossary/cryptanalysis/index.md b/files/es/glossary/cryptanalysis/index.md index fa322f44710f03..162b75efbf2119 100644 --- a/files/es/glossary/cryptanalysis/index.md +++ b/files/es/glossary/cryptanalysis/index.md @@ -3,6 +3,8 @@ title: Criptoanálisis slug: Glossary/Cryptanalysis --- +{{GlossarySidebar}} + El criptoanálisis es la rama de {{glossary ("cryptography","criptografía")}} que estudia cómo romper códigos y criptosistemas. El criptoanálisis crea técnicas para romper {{glossary ("cipher", "cifrados")}}, en particular por métodos más eficientes que una búsqueda por fuerza bruta. Además de los métodos tradicionales como el análisis de frecuencia y el índice de coincidencia, el criptoanálisis incluye métodos más recientes, como el criptoanálisis lineal o el criptoanálisis diferencial, que puede romper cifrados más avanzados. ## Saber más diff --git a/files/es/glossary/cryptography/index.md b/files/es/glossary/cryptography/index.md index d87acd1e5d67af..5307e6c130c88e 100644 --- a/files/es/glossary/cryptography/index.md +++ b/files/es/glossary/cryptography/index.md @@ -3,6 +3,8 @@ title: Criptografía slug: Glossary/Cryptography --- +{{GlossarySidebar}} + Criptografía, o criptología, es la ciencia que estudia como codificar y transmitir mensajes de manera segura. La criptografía diseña y estudia algoritmos que son usados para la codificación y decoficación de mensajes en un entorno inseguro y sus aplicaciones. Más que confidencialidad de información, la criptografía también aborda la identificación, autenticación, el no repudio y la integridad de la información. Para ello tambien estudia el uso de métodos criptográficos en contexto, criptosistemas. ## Aprende más diff --git a/files/es/glossary/csrf/index.md b/files/es/glossary/csrf/index.md index 56192284e35632..5840d75bc004a2 100644 --- a/files/es/glossary/csrf/index.md +++ b/files/es/glossary/csrf/index.md @@ -3,6 +3,8 @@ title: CSRF slug: Glossary/CSRF --- +{{GlossarySidebar}} + **CSRF** (Cross-Site Request Forgery) es un ataque que falsifica una petición a un servidor web haciéndose pasar por un usuario de confianza. Esto se puede hacer, por ejemplo, incluyendo parámetros maliciosos en una {{glossary("URL")}} después de un enlace que pretende redirigir a otro sitio. ## Saber más diff --git a/files/es/glossary/css/index.md b/files/es/glossary/css/index.md index aea2256e8efdf2..5c93cee2569aa5 100644 --- a/files/es/glossary/css/index.md +++ b/files/es/glossary/css/index.md @@ -3,6 +3,8 @@ title: CSS slug: Glossary/CSS --- +{{GlossarySidebar}} + **CSS,** de las siglas en inglés **C**ascading **S**tyle **S**heets (Hojas de Estilo en Cascada), es un lenguaje declarativo que controla el aspecto de las páginas web en el {{glossary("browser","navegador")}}. El navegador aplica declaraciones de estilo CSS a los elementos seleccionados para exhibirlos correctamente. Una declaración de estilos contiene las propiedades y sus respectivos valores, los cuales determinan cómo se verá una página web. CSS es una de las tres principales tecnologias web, junto con {{Glossary("HTML")}} y {{Glossary("JavaScript")}}. CSS usualmente le da estilo a los ({{Glossary("Element","elementos HTML")}}), pero también puede ser utilizado con otros lenguajes de marcado como {{Glossary("SVG")}} o {{Glossary("XML")}}. diff --git a/files/es/glossary/css_preprocessor/index.md b/files/es/glossary/css_preprocessor/index.md index 43bf349593df66..ab30e3397c7a09 100644 --- a/files/es/glossary/css_preprocessor/index.md +++ b/files/es/glossary/css_preprocessor/index.md @@ -3,6 +3,8 @@ title: Preprocesador CSS slug: Glossary/CSS_preprocessor --- +{{GlossarySidebar}} + Un preprocesador CSS es un programa que te permite generar {{Glossary("CSS")}} a partir de la {{Glossary("syntax")}} única del preprocesador. Existen varios preprocesadores CSS de los cuales escoger, sin embargo la mayoría de preprocesadores CSS añadiran algunas características que no existen en CSS puro, como {{Glossary("variable")}}, mixins, selectores anidados, entre otros. Estas características hacen la estructura de CSS más legible y fácil de mantener. Para utilizar un preprocesador CSS debes instalar un compilador CSS en tu web {{Glossary("server")}}. diff --git a/files/es/glossary/data_structure/index.md b/files/es/glossary/data_structure/index.md index d1ee1b834e77d2..ddc8ba98e09f9b 100644 --- a/files/es/glossary/data_structure/index.md +++ b/files/es/glossary/data_structure/index.md @@ -3,6 +3,8 @@ title: Estructura de datos slug: Glossary/Data_structure --- +{{GlossarySidebar}} + **Estructura de datos** es una forma particular de organizar datos para que puedan ser usados eficientemente. ## Aprende más diff --git a/files/es/glossary/decryption/index.md b/files/es/glossary/decryption/index.md index be56a79dfefebb..eb03c0fec3b4e9 100644 --- a/files/es/glossary/decryption/index.md +++ b/files/es/glossary/decryption/index.md @@ -3,6 +3,8 @@ title: Descifrado slug: Glossary/Decryption --- +{{GlossarySidebar}} + En {{glossary("cryptography" ,"criptografía")}}, el descifrado es la conversión de {{glossary("Ciphertext", "texto cifrado")}} en {{glossary("Plaintext", "texto simple")}}. El descifrado es una primitiva criptográfica: transforma un mensaje de texto cifrado en texto simple utilizando un algoritmo criptográfico llamado {{glossary("cipher", "cifrado")}}. Al igual que el cifrado, el descifrado en cifrados modernos se realiza mediante un algoritmo específico y una {{glossary("Key", "clave")}}. Dado que el algoritmo suele ser público, la clave debe permanecer secreta si el cifrado se mantiene seguro. diff --git a/files/es/glossary/doctype/index.md b/files/es/glossary/doctype/index.md index d01154ba5dd130..634a72cef2c701 100644 --- a/files/es/glossary/doctype/index.md +++ b/files/es/glossary/doctype/index.md @@ -3,6 +3,8 @@ title: Doctype slug: Glossary/Doctype --- +{{GlossarySidebar}} + `` informa al {{Glossary("navegador")}} qué versión de {{Glossary("HTML")}} (o {{glossary("XML")}}) se usó para escribir el documento. Doctype es una declaración no una {{Glossary("etiqueta")}}. Además, podemos referirnos a ella como "document type declaration" o por las siglas "DTD". ## Saber más diff --git a/files/es/glossary/dom/index.md b/files/es/glossary/dom/index.md index 0e87561df8e8dd..9ecf7b38fd62ee 100644 --- a/files/es/glossary/dom/index.md +++ b/files/es/glossary/dom/index.md @@ -3,6 +3,8 @@ title: DOM slug: Glossary/DOM --- +{{GlossarySidebar}} + El _DOM_ (Document Object Model, en español **Modelo de Objetos del Documento**) es una [API](/es/docs/Glossary/API) definida para representar e interactuar con cualquier documento [HTML](/es/docs/Glossary/HTML) o [XML](/es/docs/Glossary/XML). El DOM es un modelo de documento que se carga en el [navegador web](/es/docs/Glossary/Browser) y que representa el documento como un árbol de nodos, en donde cada nodo representa una parte del documento (puede tratarse de un [elemento](/es/docs/Glossary/element), una cadena de texto o un comentario). El DOM es una de las APIs más usadas en la [Web](/es/docs/Glossary/World_Wide_Web), pues permite ejecutar código en el navegador para acceder e interactuar con cualquier nodo del documento. Estos nodos pueden crearse, moverse o modificarse. Pueden añadirse a estos nodos manejadores de eventos (_event listeners_ en inglés) que se ejecutarán/activarán cuando ocurra el evento indicado en este manejador. diff --git a/files/es/glossary/domain/index.md b/files/es/glossary/domain/index.md index 10f2f508ec8211..a3a98cd3f31d52 100644 --- a/files/es/glossary/domain/index.md +++ b/files/es/glossary/domain/index.md @@ -3,6 +3,8 @@ title: Dominio slug: Glossary/Domain --- +{{GlossarySidebar}} + Un dominio es una autoridad dentro de internet que controla sus propios recursos. Su "nombre de dominio" es una forma de dirigirse a esta autoridad como parte de la jerarquía en una {{Glossary("URL")}}, que generalmente es la parte más significativa de la misma, por ejemplo, un nombre de marca. Un nombre de dominio completo (FQDN, por sus siglas en inglés) contiene todas las partes necesarias para buscar esta autoridad por su nombre sin ambigüedades utilizando el sistema {{Glossary("DNS")}} de Internet. diff --git a/files/es/glossary/domain_name/index.md b/files/es/glossary/domain_name/index.md index 2cb5dbe8680b9c..6ad6013042abea 100644 --- a/files/es/glossary/domain_name/index.md +++ b/files/es/glossary/domain_name/index.md @@ -3,6 +3,8 @@ title: Nombre de dominio slug: Glossary/Domain_name --- +{{GlossarySidebar}} + Un nombre de dominio es la dirección de un sitio web en {{Glossary("Internet")}}. Los nombres de dominio se utilizan en {{Glossary("URL","URLs")}} para identificar a qué servidor pertenece una página web específica. El nombre de dominio consiste en una secuencia jerárquica de nombres (etiquetas) separados por puntos y que terminan con una {{glossary("TLD","extensión")}}. ## Saber más diff --git a/files/es/glossary/dynamic_typing/index.md b/files/es/glossary/dynamic_typing/index.md index b551733119d8e0..df1896523821cf 100644 --- a/files/es/glossary/dynamic_typing/index.md +++ b/files/es/glossary/dynamic_typing/index.md @@ -3,6 +3,8 @@ title: Tipado Dinámico slug: Glossary/Dynamic_typing --- +{{GlossarySidebar}} + **Los lenguajes de tipado dinámico** son aquellos (como {{glossary("JavaScript")}}) donde el intérprete asigna a las {{glossary("variable","variables")}} un {{glossary("tipo")}} durante el tiempo de ejecución basado en su {{glossary("valor")}} en ese momento. ## Ver más diff --git a/files/es/glossary/ecmascript/index.md b/files/es/glossary/ecmascript/index.md index 8509e311c178d9..571eaa1762a4d3 100644 --- a/files/es/glossary/ecmascript/index.md +++ b/files/es/glossary/ecmascript/index.md @@ -3,6 +3,8 @@ title: ECMAScript slug: Glossary/ECMAScript --- +{{GlossarySidebar}} + **ECMAScript** es una especificación de lenguaje de scripting en la que se basa {{Glossary("JavaScript")}}. [Ecma International](http://www.ecma-international.org) está a cargo de estandarizar ECMAScript. ## Aprende más diff --git a/files/es/glossary/element/index.md b/files/es/glossary/element/index.md index 924b1597e89a06..7906f5c89b7ea5 100644 --- a/files/es/glossary/element/index.md +++ b/files/es/glossary/element/index.md @@ -3,6 +3,8 @@ title: Elemento slug: Glossary/Element --- +{{GlossarySidebar}} + Un elemento es parte de una página web. En XML y HTML, un elemento puede contener un elemento de datos o un fragmento de texto o una imagen, o tal vez nada. Un elemento típico incluye una etiqueta de apertura con algunos atributos, contenido de texto cerrado y una etiqueta de cierre. ![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) diff --git a/files/es/glossary/encapsulation/index.md b/files/es/glossary/encapsulation/index.md index a5e117353705a3..6e7ced7f3923a6 100644 --- a/files/es/glossary/encapsulation/index.md +++ b/files/es/glossary/encapsulation/index.md @@ -3,6 +3,8 @@ title: Encapsulación slug: Glossary/Encapsulation --- +{{GlossarySidebar}} + La encapsulación es el empaquetamiento de datos y {{glossary("function","funciones")}} en un componente (por ejemplo, una {{glossary("class", "clase")}}) y para luego controlar el acceso a ese componente para hacer un ejecto de "caja negra" fuera del {{glossary("object", "objeto")}}. Debido a esto, un usuario de esa clase solo necesita conocer su interfaz (es decir, los datos y las funciones expuestas fuera de la clase), no la implementación oculta. ## Saber más diff --git a/files/es/glossary/encryption/index.md b/files/es/glossary/encryption/index.md index 14ef2048460762..bd91872eb27680 100644 --- a/files/es/glossary/encryption/index.md +++ b/files/es/glossary/encryption/index.md @@ -3,6 +3,8 @@ title: Encriptación slug: Glossary/Encryption --- +{{GlossarySidebar}} + En {{glossary("cryptography", "criptografía")}}, la **encriptación** es la conversión del {{glossary("cleartext", "lenguaje natural")}} en un texto codificado o {{glossary("ciphertext", "cifrado")}}. Un texto cifrado es utilizado para ser ilegible por lectores no autorizados. La encriptación es una primitiva criptográfica: transforma un mensaje en texto plano en un texto cifrado usando un {{glossary("cipher", "algoritmo criptográfico")}}. La encriptación en los algoritmos modernos se lleva a cabo usando un algoritmo específico y un secreto, llamado la {{glossary("key", "clave")}}. Ya que la mayoría de los algoritmos son públicos, la clave debe ser secreta para que la encriptación sea segura. diff --git a/files/es/glossary/entity/index.md b/files/es/glossary/entity/index.md index c43d7da6ca575c..300736916b34ce 100644 --- a/files/es/glossary/entity/index.md +++ b/files/es/glossary/entity/index.md @@ -3,6 +3,8 @@ title: Entidad slug: Glossary/Entity --- +{{GlossarySidebar}} + Una **entidad** {{glossary("HTML")}} es un conjunto de caracteres ("string") que comienza con un ampersand (`&`) y termina con un punto y coma (`;`) . Las entidades son utilizadas frecuentemente para imprimir en pantalla caracteres reservados (aquellos que serían interpretados como HTML por el navegador) o invisibles (cómo tabulaciones). También pueden usarse para representar caracteres que no existan en algunos teclados, por ejemplo caracterés con tilde o diéresis. > **Nota:** Muchos caracteres tienen entidades con nombres fáciles de recordar, como las vocales con tilde (`á`) es `á`, (`é`) es `é` y así sucesivamente. Otro ejempo es el simbolo de copyright, (`©`) representado por la entidad `©`. Al lidiar con entidades menos representativas de los caracteres que representan, es de gran ayuda utilizar una [tabla de referencia](https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references) o un [decodificador](https://mothereff.in/html-entities). diff --git a/files/es/glossary/event/index.md b/files/es/glossary/event/index.md index 53ee85e2897c7b..eb757dba579229 100644 --- a/files/es/glossary/event/index.md +++ b/files/es/glossary/event/index.md @@ -3,6 +3,8 @@ title: Evento slug: Glossary/Event --- +{{GlossarySidebar}} + Los eventos son sucesos generados por elementos del [DOM](/es/docs/Glossary/DOM), que pueden ser manipulados por un código Javascript ## Saber más diff --git a/files/es/glossary/first-class_function/index.md b/files/es/glossary/first-class_function/index.md index dc70d95d5f4770..db2dab1d9fea8c 100644 --- a/files/es/glossary/first-class_function/index.md +++ b/files/es/glossary/first-class_function/index.md @@ -3,6 +3,8 @@ title: Funcion de primera clase slug: Glossary/First-class_Function --- +{{GlossarySidebar}} + Un lenguaje de programación se dice que tiene **Funciones de primera clase** cuando las funciones en ese lenguaje son tratadas como cualquier otra variable. Por ejemplo, en ese lenguaje, una función puede ser pasada como argumento a otras funciones, puede ser retornada por otra función y puede ser asignada a una variable. ## Ejemplo | Asignar función a una variable @@ -87,19 +89,8 @@ diHola()(); Usamos paréntesis doble `()()` para invocar también a la función retornada. -## Aprender más - -### Conocimiento general - - +- [First-class functions](ttps://es.wikipedia.org/wiki/First-class_function) en Wikipedia +- [Glosario de MDN Web Docs](/es/docs/Glossary) + - {{Glossary("Callback function")}} + - {{Glossary("Function")}} + - {{Glossary("Variable")}} diff --git a/files/es/glossary/flex/index.md b/files/es/glossary/flex/index.md index af8bd9d603f4ab..863d0b4b419a41 100644 --- a/files/es/glossary/flex/index.md +++ b/files/es/glossary/flex/index.md @@ -3,6 +3,8 @@ title: Flex slug: Glossary/Flex --- +{{GlossarySidebar}} + flex es una nueva herramienta agregada a la propiedad CSS {{cssxref ("display")}}. Junto con inline-flex, hace que el elemento al que se aplica se convierta en un {{glossary("flex container")}}, y los hijos del elemento se conviertan cada uno en un {{glossary("flex item")}}. Luego, los elementos participan en el diseño flexible y se pueden aplicar todas las propiedades definidas en el módulo de diseño de caja flexible CSS (CSS Flexible Box). diff --git a/files/es/glossary/flex_container/index.md b/files/es/glossary/flex_container/index.md index 08c2afa593e99e..0301194d53eba7 100644 --- a/files/es/glossary/flex_container/index.md +++ b/files/es/glossary/flex_container/index.md @@ -3,6 +3,8 @@ title: Flex Container slug: Glossary/Flex_Container --- +{{GlossarySidebar}} + Una plantilla con {{glossary("flexbox")}} puede ser definida usando los valores `flex` o `inline-flex` en las propiedades de `display`. Este elemento es un **contenedor flex**, y cada uno de los contenedores que heredan propiedades de este, son conocidos como {{glossary("flex item")}}. El valor asignado a la variable `flex` ocasiona que este tipo de elementos sean un bloque de elementos del tipo (Flex Container), y la variable `inline-flex` genera un Contenedor Flex de nivel Inline (Interno. Estos Valores crean un Contexto de formato Flex para los elementos que es similar a un bloque flotante no introducido en el contenedor, y los margenes del contenedor no chocaran con otros items. diff --git a/files/es/glossary/flexbox/index.md b/files/es/glossary/flexbox/index.md index 4d4e9e88bee8a3..18a315de5de67f 100644 --- a/files/es/glossary/flexbox/index.md +++ b/files/es/glossary/flexbox/index.md @@ -3,6 +3,8 @@ title: Flexbox slug: Glossary/Flexbox --- +{{GlossarySidebar}} + Flexbox es como se llama comúnmente a [Módulo de diseño de caja flexible CSS](https://www.w3.org/TR/css-flexbox-1/), un modelo de diseño para mostrar elementos en una sola dimensión, como una fila o como una columna. En la especificación, flexbox se describe como un modelo de diseño para la interfaz de usuario. La característica clave de Flexbox es el hecho de que los elementos en un diseño flexible pueden crecer y reducirse. El espacio se puede asignar a los mismos elementos, o distribuidos entre o alrededor de los elementos. diff --git a/files/es/glossary/forbidden_header_name/index.md b/files/es/glossary/forbidden_header_name/index.md index 98157be778bef4..c377a24c029ded 100644 --- a/files/es/glossary/forbidden_header_name/index.md +++ b/files/es/glossary/forbidden_header_name/index.md @@ -3,6 +3,8 @@ title: Nombre de encabezado prohibido slug: Glossary/Forbidden_header_name --- +{{GlossarySidebar}} + Un nombre de encabezado prohibido es un nombre de [encabezado HTTP](/es/docs/Web/HTTP/Headers) que no se puede modificar mediante programación; específicamente, un nombre de encabezado de HTTP **solicitud** HTTP. Contrasta con el {{Glossary("Forbidden response header name")}}. diff --git a/files/es/glossary/fps/index.md b/files/es/glossary/fps/index.md index e5a75e834e2782..57a6dbfe724088 100644 --- a/files/es/glossary/fps/index.md +++ b/files/es/glossary/fps/index.md @@ -3,6 +3,8 @@ title: frame rate (FPS) slug: Glossary/FPS --- +{{GlossarySidebar}} + Un **cuadro por segundo** es la velocidad en la cual el navegador web, es capaz de recalcular la disposición y dibujar el contenido de la pantalla. **FPS (frames per second)**, refiere a la cantidad de cuadros que pueden ser redibujados en un segundo. El ideal de esta metrica para un sitio web es de **60fps** diff --git a/files/es/glossary/ftp/index.md b/files/es/glossary/ftp/index.md index 88fd7ec40ae3b1..0c8b1a7c6bc3ac 100644 --- a/files/es/glossary/ftp/index.md +++ b/files/es/glossary/ftp/index.md @@ -3,6 +3,8 @@ title: FTP slug: Glossary/FTP --- +{{GlossarySidebar}} + FTP (del inglés _File Transfer Protocol_, Protocolo de transferencia de archivos) fue el [protocolo](/es/docs/Glossary/Protocol) estándar durante muchos años para transferir archivos entre equipos a través de Internet. Sin embargo, cada vez más los equipos y las cuentas de alojamiento no permiten el FTP y en su lugar dependen de un sistema de control de versiones como Git. Se encuentra todavía en funcionamiento en las cuentas de alojamiento más antiguas, pero no es exagerado decir que el FTP ya no es considerada la mejor práctica. ## Aprenda más diff --git a/files/es/glossary/function/index.md b/files/es/glossary/function/index.md index d0612438a457f6..f0e109340b417d 100644 --- a/files/es/glossary/function/index.md +++ b/files/es/glossary/function/index.md @@ -3,6 +3,8 @@ title: Función slug: Glossary/Function --- +{{GlossarySidebar}} + Una **función** es un fragmento de código que puede ser llamado por otro código o por sí mismo, o por una {{Glossary("variable")}} que haga referencia a la función. Cuando se llama a una función, los {{Glossary("Argument", "argumentos")}} se pasan a la función como entrada, y la función puede devolver opcionalmente una salida. Una función en {{glossary("JavaScript")}} es también un {{glossary("object", "objeto")}}. El nombre de la función es un {{Glossary("identifier", "identificador")}} declarado como parte de una declaración de función o expresión de función. El {{Glossary("scope", "ámbito")}} de la función depende de si el nombre de la función es una declaración o una expresión. diff --git a/files/es/glossary/general_header/index.md b/files/es/glossary/general_header/index.md index 1e85d68771ac0e..7bd6b5ffed9aee 100644 --- a/files/es/glossary/general_header/index.md +++ b/files/es/glossary/general_header/index.md @@ -3,6 +3,8 @@ title: Cabecera general slug: Glossary/General_header --- +{{GlossarySidebar}} + Una **cabecera general** es una {{glossary('Header', 'cabecera HTTP')}} que puede ser utilizada tanto en mensajes de consultas como de respuestas pero que no se aplican al contenido en sí mismo. Dependiendo del contexto en que son usadas, las cabeceras generales pueden ser de {{glossary("Response header", "respuesta")}} o de {{glossary("request header", "consulta")}}. Sin embargo, no son {{glossary("entity header", "cabeceras de entidad.")}}. Las cabeceras generales más comunes son {{HTTPHeader('Date')}}, {{HTTPheader("Cache-Control")}} y {{HTTPHeader("Connection")}}. diff --git a/files/es/glossary/gif/index.md b/files/es/glossary/gif/index.md index 0eba34291b6ae8..cb8f3fb9041552 100644 --- a/files/es/glossary/gif/index.md +++ b/files/es/glossary/gif/index.md @@ -3,6 +3,8 @@ title: GIF slug: Glossary/GIF --- +{{GlossarySidebar}} + **GIF** (**G**raphics **I**nterchange **F**ormat en español **Formato de Intercambio de Gráficos**) es un formato de imagen con una baja compresión y se puede usar para animaciones. Un GIF usa hasta 8 bits por pixel y contiene un máximo de 256 colores con un rango de 24-bit. ## Aprender más diff --git a/files/es/glossary/git/index.md b/files/es/glossary/git/index.md index 5fa74a0b2ad74f..072ee154a692d5 100644 --- a/files/es/glossary/git/index.md +++ b/files/es/glossary/git/index.md @@ -3,6 +3,8 @@ title: Git slug: Glossary/Git --- +{{GlossarySidebar}} + **Git** es un software de control de versiones ({{Glossary("SCM", "SCV", 1)}}) distribuido, libre y de código abierto. Facilita el manejo de código fuente con equipos de desarrollo distribuidos. La principal diferencia con SCV previos es la habilidad para hacer operaciones comunes (branching, committing, etc.) en el equipo de desarrollo local, sin tener que modificar el repositorio master o tener de acceso de escritura a él. ## Saber más diff --git a/files/es/glossary/google_chrome/index.md b/files/es/glossary/google_chrome/index.md index 1635a2d2aff928..069b61d2153209 100644 --- a/files/es/glossary/google_chrome/index.md +++ b/files/es/glossary/google_chrome/index.md @@ -3,6 +3,8 @@ title: Google Chrome slug: Glossary/Google_Chrome --- +{{GlossarySidebar}} + _Google Chrome_ es un [navegador](/es/docs/Glossary/Browser) web gratuito desarrollado por Google. Está basado en el proyecto open source (código abierto / software libre) [Chromium](http://www.chromium.org/). Algunas de las principales diferencias se encuentran en [Chromium wiki](https://code.google.com/p/chromium/wiki/ChromiumBrowserVsGoogleChrome). El motor de diseño que utilizan ambos es una copia del motor [Blink](/es/docs/Glossary/Blink) de [WebKit](/es/docs/Glossary/WebKit). Cabe señalar que en la versión de Chrome en iOS se utiliza WebKit y no Blink. ## Para saber más diff --git a/files/es/glossary/gpl/index.md b/files/es/glossary/gpl/index.md index 769faab5b4edb8..7557dc7fa9f6ed 100644 --- a/files/es/glossary/gpl/index.md +++ b/files/es/glossary/gpl/index.md @@ -3,6 +3,8 @@ title: GPL slug: Glossary/GPL --- +{{GlossarySidebar}} + La lincencia GNU _GPL_ (GNU General Public License en español **Licencia Pública General de GNU**) es una licencia de software libre [copyleft](/es/docs/Glossary/copyleft) publicada por la _Free Software Foundation_. Los usuarios de un programa con licencia GPL son libres para usarlo, acceder al código fuente, modificarlo y distribuir los cambios; siempre que redistribuyan el programa completo (modificado o no modificado) bajo la misma licencia. ## Para saber más diff --git a/files/es/glossary/grid/index.md b/files/es/glossary/grid/index.md index ca3a5d3ea634e8..8b5cc01d000db8 100644 --- a/files/es/glossary/grid/index.md +++ b/files/es/glossary/grid/index.md @@ -3,6 +3,8 @@ title: Grid slug: Glossary/Grid --- +{{GlossarySidebar}} + _CSS grid_ es definido usando el valor grid en la propiedad `display`; puedes definir columnas y filas en tu diseño grid, con las propiedades {{cssxref("grid-template-rows")}} y {{cssxref("grid-template-columns")}} . El grid que configures usando estas propiedades es definido como la grilla explícita (_explicit grid_). diff --git a/files/es/glossary/grid_areas/index.md b/files/es/glossary/grid_areas/index.md index 50345a4f0f5733..ef95b0098d381f 100644 --- a/files/es/glossary/grid_areas/index.md +++ b/files/es/glossary/grid_areas/index.md @@ -3,6 +3,8 @@ title: Grid Areas slug: Glossary/Grid_Areas --- +{{GlossarySidebar}} + Un **grid area** es una o más {{glossary("grid cell", "grid cells")}} que forman un área rectangular en la cuadrícula. Los grid areas se crean cuando se coloca un elemento usando [disposición basada en líneas](/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid) o cuando se definen áreas usando [grid areas con nombre](/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas). ![Imagen mostrando una grid area resaltada](1_grid_area.png) diff --git a/files/es/glossary/grid_column/index.md b/files/es/glossary/grid_column/index.md index 2d101c391a3e8d..e53eafaccae547 100644 --- a/files/es/glossary/grid_column/index.md +++ b/files/es/glossary/grid_column/index.md @@ -3,6 +3,8 @@ title: Grid Column slug: Glossary/Grid_Column --- +{{GlossarySidebar}} + Una **columna de grid** es una pista vertical en un [CSS Grid Layout](/es/docs/Web/CSS/CSS_Grid_Layout), y es el espacio entre dos líneas verticales de cuadrícula. Está definido por la propiedad {{cssxref("grid-template-columns")}} o por las propiedades abreviadas {{cssxref("grid")}} o {{cssxref("grid-template")}}. Además, se pueden crear columnas en la _cuadrícula implícita_ cuando los elementos se colocan fuera de las columnas creadas en la _cuadrícula explícita_. Estas columnas serán de tamaño automático por defecto, o pueden tener un tamaño especificado con la propiedad {{cssxref("grid-auto-columns")}}. diff --git a/files/es/glossary/grid_lines/index.md b/files/es/glossary/grid_lines/index.md index adba952c02d7db..ef4204e19ad434 100644 --- a/files/es/glossary/grid_lines/index.md +++ b/files/es/glossary/grid_lines/index.md @@ -3,6 +3,8 @@ title: Líneas de Cuadrícula slug: Glossary/Grid_Lines --- +{{GlossarySidebar}} + Las **Líneas de Cuadrícula** se crean cuando defines las {{glossary("tracks", "Pistas de Cuadrícula")}} esto sucede dentro de un contenedor que este usando [CSS Grid Layout](/es/docs/Web/CSS/CSS_Grid_Layout). En el siguiente ejemplo hay una cuadrícula con tres pistas de columna y dos pistas de filas. Esto nos da **4 Líneas de Columnas** y **3 Líneas de Fila**. diff --git a/files/es/glossary/grid_row/index.md b/files/es/glossary/grid_row/index.md index c61c43d584c3cb..5de493f0138c8f 100644 --- a/files/es/glossary/grid_row/index.md +++ b/files/es/glossary/grid_row/index.md @@ -3,6 +3,8 @@ title: Grid Row slug: Glossary/Grid_Row --- +{{GlossarySidebar}} + Una **grid row** es una pista horizontal en un [CSS Grid Layout](/es/docs/Web/CSS/CSS_Grid_Layout), es el espacio entre dos líneas de cuadrícula horizontales. Se define por la propiedad {{cssxref("grid-template-rows")}} o con la propiedad shorthand {{cssxref("grid")}} o {{cssxref("grid-template")}}. Además, se pueden crear filas en la _cuadrícula implícita_ cuando los elementos se colocan fuera de las filas creadas en la _cuadrícula explícita_. Estas filas serán de tamaño automático por defecto, o pueden tener un tamaño especificado con la propiedad {{cssxref("grid-auto-rows")}}. diff --git a/files/es/glossary/head/index.md b/files/es/glossary/head/index.md index 543279810dd901..0ab51f930cc59b 100644 --- a/files/es/glossary/head/index.md +++ b/files/es/glossary/head/index.md @@ -3,6 +3,8 @@ title: Head slug: Glossary/Head --- +{{GlossarySidebar}} + La cabecera (en inglés _Head_) es la parte de un documento [HTML](/es/docs/Glossary/Head) que contiene [metadatos](/es/docs/Glossary/Metadato) sobre ese documento, como el autor, la descripción y los enlaces a los archivos [CSS](/es/docs/Glossary/CSS) o [JavaScript](/es/docs/Glossary/JavaScript) que se deben aplicar al documento HTML. Es la parte del documento web que no es visible al usuario. ## Aprenda más diff --git a/files/es/glossary/hoisting/index.md b/files/es/glossary/hoisting/index.md index 67237452dcb67d..aacb44a7b96d00 100644 --- a/files/es/glossary/hoisting/index.md +++ b/files/es/glossary/hoisting/index.md @@ -3,6 +3,8 @@ title: Hoisting slug: Glossary/Hoisting --- +{{GlossarySidebar}} + Hoisting es un término que _no_ encontrará utilizado en ninguna especificación previa a la [Especificación del Lenguaje ECMAScript® 2015](http://www.ecma-international.org/ecma-262/6.0/index.html). El concepto de Hoisting fue pensado como una manera general de referirse a cómo funcionan los contextos de ejecución en JavaScript (específicamente las fases de creación y ejecución). Sin embargo, el concepto puede ser un poco confuso al principio. Conceptualmente, por ejemplo, una estricta definición de hoisting sugiere que las declaraciones de variables y funciones son físicamente movidas al comienzo del código, pero esto no es lo que ocurre en realidad. Lo que sucede es que las declaraciones de variables y funciones son **asignadas en memoria** durante la fase de **compilación**, pero quedan exactamente en dónde las has escrito en el código. diff --git a/files/es/glossary/host/index.md b/files/es/glossary/host/index.md index 2470f2aa610142..97640a54332eeb 100644 --- a/files/es/glossary/host/index.md +++ b/files/es/glossary/host/index.md @@ -3,6 +3,8 @@ title: Anfitrión slug: Glossary/Host --- +{{GlossarySidebar}} + Un anfitrión (del ingles _host_) es un dispositivo conectado a {{glossary("Internet")}} (o una red de área local). Algunos anfitriones denominados {{glossary("server","servidores")}} ofrecen servicios adicionales como servir páginas web o alojar archivos y correos electrónicos. El anfitrión no es necesariamente un elemento hardware. Pueden ser generado como máquinas virtuales. El anfitrión generado en una máquina virtual se suele denominar "Alojamiento virtual". diff --git a/files/es/glossary/html/index.md b/files/es/glossary/html/index.md index 53957906bdabec..133ab76e6662ae 100644 --- a/files/es/glossary/html/index.md +++ b/files/es/glossary/html/index.md @@ -3,6 +3,8 @@ title: HTML slug: Glossary/HTML --- +{{GlossarySidebar}} + HTML (Lenguaje de marcado de hipertexto o HyperText Markup Language por sus siglas en inglés) es un lenguaje descriptivo que especifica la estructura de las páginas web. ## Breve historia diff --git a/files/es/glossary/html5/index.md b/files/es/glossary/html5/index.md index 7889a91697919d..5825c9930d35d8 100644 --- a/files/es/glossary/html5/index.md +++ b/files/es/glossary/html5/index.md @@ -3,6 +3,8 @@ title: HTML5 slug: Glossary/HTML5 --- +{{GlossarySidebar}} + La última versión estable de [HTML](/es/docs/Glossary/HTML), HTML5 convierte a HTML de un simple formato de marcado para estructurar documentos en una plataforma completa de desarrollo de aplicaciones. Entre otras características, HTML5 incluye nuevos elementos y [API](/es/docs/Glossary/API) de [JavaScript](/es/docs/Glossary/JavaScript) para mejorar el almacenamiento, la multimedia y el acceso al hardware. ## Aprenda más diff --git a/files/es/glossary/http/index.md b/files/es/glossary/http/index.md index b0a4f228bdeede..a592c0f1d824b3 100644 --- a/files/es/glossary/http/index.md +++ b/files/es/glossary/http/index.md @@ -3,6 +3,8 @@ title: HTTP slug: Glossary/HTTP --- +{{GlossarySidebar}} + El protocolo de transferencia de hipertexto o HTTP (HyperText Transfer Protocol) es el protocolo de red que permite la transferencia de documentos de hipermedia en la red, generalmente entre un navegador y un servidor, para que los humanos puedan leerlos. La versión actual de la especificación se llama HTTP/2. En un {{glossary("URI")}}, como por ejemplo , se indica en el esquema y puede tomar los valores: 'http:' o 'https:'. 'https:' se refiere a la versión segura del protocolo. diff --git a/files/es/glossary/https/index.md b/files/es/glossary/https/index.md index 1aecb8c075f3d7..9629bdef8f6a8e 100644 --- a/files/es/glossary/https/index.md +++ b/files/es/glossary/https/index.md @@ -3,6 +3,8 @@ title: HTTPS slug: Glossary/HTTPS --- +{{GlossarySidebar}} + HTTPS (HTTP Secure) es una versión encriptada del protocolo {{Glossary("HTTP")}}. Normalmente utiliza {{Glossary("SSL")}} o {{Glossary("TLS")}} para cifrar toda la comunicación entre un cliente y un servidor. Esta conexión segura permite a los clientes intercambiar datos confidenciales de forma segura con un servidor, por ejemplo, para actividades bancarias o compras en línea. ## Aprender más diff --git a/files/es/glossary/hyperlink/index.md b/files/es/glossary/hyperlink/index.md index b9f988b7ae0918..b6acf817f69980 100644 --- a/files/es/glossary/hyperlink/index.md +++ b/files/es/glossary/hyperlink/index.md @@ -3,6 +3,8 @@ title: Hipervínculo slug: Glossary/Hyperlink --- +{{GlossarySidebar}} + Los _Hipervínculos_ ó _enlaces_ permiten conectar entre sí datos ó páginas web. En [HTML](/es/docs/Glossary/HTML), los elementos {{HTMLElement("a")}} representan hipervínculos que tienen como origen un elemento de la página web (por ejemplo cadenas de texto o imágenes), y que pueden tener como destino un elemento de otro sitio web (incluso pueden enlazar a otro punto de la misma página). ## Para saber más diff --git a/files/es/glossary/hypertext/index.md b/files/es/glossary/hypertext/index.md index 7f34aa363134ff..d11913947fb0c7 100644 --- a/files/es/glossary/hypertext/index.md +++ b/files/es/glossary/hypertext/index.md @@ -3,6 +3,8 @@ title: Hipertexto slug: Glossary/Hypertext --- +{{GlossarySidebar}} + El hipertexto es texto que contiene enlaces a otros textos, y no un flujo único y lineal como el de una novela. El término fue acuñado por Ted Nelson alrededor del año 1965. diff --git a/files/es/glossary/ide/index.md b/files/es/glossary/ide/index.md index daf1120efb0db6..732a9e735af7ff 100644 --- a/files/es/glossary/ide/index.md +++ b/files/es/glossary/ide/index.md @@ -3,6 +3,8 @@ title: IDE slug: Glossary/IDE --- +{{GlossarySidebar}} + Un entorno de desarrollo integrado (**IDE**) o entorno de desarrollo interactivo es una aplicación que proporciona facilidades a los programadores para el desarrollo de software. Un IDE normalmente consta de un editor de código, herramientas automatizadas para producir el proyecto y un depurador. ## Saber más diff --git a/files/es/glossary/identifier/index.md b/files/es/glossary/identifier/index.md index 060462c69c3ebf..6c1cae2194c61a 100644 --- a/files/es/glossary/identifier/index.md +++ b/files/es/glossary/identifier/index.md @@ -3,28 +3,18 @@ title: Identificador slug: Glossary/Identifier --- +{{GlossarySidebar}} + Un **Identificador** es una secuencia de caracteres en el código que identifica una {{Glossary("Variable")}}, {{Glossary("Function", "función")}} o {{Glossary("Property", "propiedad")}}. En {{Glossary("JavaScript")}}, los identificadores distinguen entre mayúsculas y minúsculas y pueden contener letras {{Glossary("Unicode")}}, `$`, `_`, y dígitos (0-9), pero no puede comenzar con un dígito. Un identificador se diferencia de una cadena en que una {{Glossary("String", "cadena")}} son datos, mientras que un identificador es parte del código. En JavaScript, no hay forma de convertir identificadores en cadenas, pero a veces es posible procesar cadenas como identificadores. -## Aprende más - -### Conocimientos generales +## Véase también - [Identificador](https://es.wikipedia.org/wiki/Identificador#Identificadores_en_lenguajes_informáticos) en Wikipedia - - +- [Glosario de MDN Web Docs](/es/docs/Glossary) + - {{Glossary("Scope", "Alcance")}} + - {{Glossary("String", "Cadena")}} + - {{Glossary("Unicode")}} diff --git a/files/es/glossary/iife/index.md b/files/es/glossary/iife/index.md index 920d19f1a023cc..4765581bce4ba1 100644 --- a/files/es/glossary/iife/index.md +++ b/files/es/glossary/iife/index.md @@ -3,6 +3,8 @@ title: "IIFE: Expresión de función ejecutada inmediatamente" slug: Glossary/IIFE --- +{{GlossarySidebar}} + Las expresiones de función ejecutadas inmediatamente (**IIFE** por su sigla en inglés) son funciones que se ejecutan tan pronto como se definen. ```js diff --git a/files/es/glossary/immutable/index.md b/files/es/glossary/immutable/index.md index df8edc8d5b45f3..c7aba81f421e1a 100644 --- a/files/es/glossary/immutable/index.md +++ b/files/es/glossary/immutable/index.md @@ -3,6 +3,8 @@ title: Inmutable slug: Glossary/Immutable --- +{{GlossarySidebar}} + Un {{glossary("object", "objeto")}} inmutable es aquel cuyo contenido no se puede cambiar.Un objeto puede ser inmutable por varias razones, por ejemplo: - Para mejorar el rendimiento (al no haber planificados cambios futuros del objeto) diff --git a/files/es/glossary/index.md b/files/es/glossary/index.md index 0c6467f4a1d9b7..2239ed9b26457b 100644 --- a/files/es/glossary/index.md +++ b/files/es/glossary/index.md @@ -1,18 +1,17 @@ --- title: "Glosario de MDN Web Docs: Definiciones de términos relacionados con la Web" +short-title: Glosario de MDN Web Docs slug: Glossary l10n: sourceCommit: ed947b2c608428b62a60f07d09dc543f732dc09b --- +{{GlossarySidebar}} + +{{GlossarySidebar}} + Las tecnologías web contienen largas listas de jerga y abreviaturas que se utilizan en la documentación y la codificación. Este glosario proporciona definiciones de palabras y abreviaturas que necesita saber para comprender y crear correctamente para la web. Los términos del glosario se pueden seleccionar en la barra lateral. -> **Nota:** Este glosario es un trabajo en progreso interminable. Puede ayudar a mejorarlo [escribiendo nuevas entradas](/es/docs/MDN/Writing_guidelines/Howto/Write_a_new_entry_in_the_Glossary) o mejorando las existentes. - - +> **Nota:** Este glosario es un trabajo en progreso interminable. Puede ayudar a mejorarlo [escribiendo nuevas entradas](/es/docs/MDN/Writing_guidelines/Howto/Write_a_new_entry_in_the_glossary) o mejorando las existentes. diff --git a/files/es/glossary/indexeddb/index.md b/files/es/glossary/indexeddb/index.md index 3dc9165a6c3d67..84c81a6f59b78b 100644 --- a/files/es/glossary/indexeddb/index.md +++ b/files/es/glossary/indexeddb/index.md @@ -3,6 +3,8 @@ title: IndexedDB slug: Glossary/IndexedDB --- +{{GlossarySidebar}} + IndexedDB es una {{glossary("API")}} Web diseñada para almacenar estructuras de datos grandes en los navegadores e indexarlas para realizar búsquedas de alto rendimiento. Al igual que los sistemas [RDBMS](https://es.wikipedia.org/wiki/Sistema_de_gesti%C3%B3n_de_bases_de_datos_relacionales) basados en {{glossary("SQL")}}, IndexedDB es un sistema de base de datos transaccional. Sin embargo, usa objetos de {{glossary("JavaScript")}} en vez de columnas fijas para almacenar los datos. ## Conoce más diff --git a/files/es/glossary/information_architecture/index.md b/files/es/glossary/information_architecture/index.md index 0a13b2af67dd51..8395a52c1f70e0 100644 --- a/files/es/glossary/information_architecture/index.md +++ b/files/es/glossary/information_architecture/index.md @@ -3,6 +3,8 @@ title: Arquitectura de la información slug: Glossary/Information_architecture --- +{{GlossarySidebar}} + La arquitectura de la información, aplicada al diseño y desarrollo web, es la práctica de organizar la información, contenido y funcionalidad de un sitio web para que presente la mejor experiencia de usuario posible, con información y servicios fáciles de usar y encontrar. ## Aprende más diff --git a/files/es/glossary/internet/index.md b/files/es/glossary/internet/index.md index 4e47e72889b47a..2cec0a026172fd 100644 --- a/files/es/glossary/internet/index.md +++ b/files/es/glossary/internet/index.md @@ -3,6 +3,8 @@ title: Internet slug: Glossary/Internet --- +{{GlossarySidebar}} + La Internet es una red mundial de redes que utiliza el conjunto de protocolos de Internet (tambien conocidos como {{glossary("TCP")}}/{{glossary("IPv6","IP")}} (art. en ingles) siendo sus dos mas importantes {{glossary("protocol","protocolos")}}). ## Aprender más diff --git a/files/es/glossary/ip_address/index.md b/files/es/glossary/ip_address/index.md index addbce837cfaff..0a06cdd4d5d49a 100644 --- a/files/es/glossary/ip_address/index.md +++ b/files/es/glossary/ip_address/index.md @@ -3,6 +3,8 @@ title: Dirección IP slug: Glossary/IP_Address --- +{{GlossarySidebar}} + Una dirección IP es un número asignado a cada dispositivo conectado a una red que utiliza el protocolo de Internet. La «dirección IP» normalmente se sigue refiriendo a las direcciones IPv4 de 32 bits hasta que el IPv6 se despliegue más ampliamente. diff --git a/files/es/glossary/ipv6/index.md b/files/es/glossary/ipv6/index.md index f32e6541758ea7..ab40f5cae446fe 100644 --- a/files/es/glossary/ipv6/index.md +++ b/files/es/glossary/ipv6/index.md @@ -3,6 +3,8 @@ title: IPv6 slug: Glossary/IPv6 --- +{{GlossarySidebar}} + **IPv6** es la versión actual del protocolo de comunicación subyacente a Internet. Lentamente, IPv6 está reemplazando a IPv4, entre otras razones porque IPv6 permite muchas direcciones de IP diferentes. ## Aprende más diff --git a/files/es/glossary/irc/index.md b/files/es/glossary/irc/index.md index 538878b94c9530..76334d452d0dbb 100644 --- a/files/es/glossary/irc/index.md +++ b/files/es/glossary/irc/index.md @@ -3,6 +3,8 @@ title: IRC slug: Glossary/IRC --- +{{GlossarySidebar}} + **IRC** (_Internet Relay Chat_) es un sistema de chat mundial que requiere una conexión a Internet y un cliente IRC, que envía y recibe mensajes atravéz del servidor IRC. Diseñado a finales de la década de 1980 por Jarrko Oikarinen, IRC usa {{glossary("TCP")}} y es un protocolo abierto. El servidor IRC transmite mensajes a todos los que están conectados a uno de los muchos canales de IRC (cada uno con su propio ID). diff --git a/files/es/glossary/isp/index.md b/files/es/glossary/isp/index.md index e414d2748aebe4..4d456490f4be07 100644 --- a/files/es/glossary/isp/index.md +++ b/files/es/glossary/isp/index.md @@ -3,6 +3,8 @@ title: ISP slug: Glossary/ISP --- +{{GlossarySidebar}} + Un ISP (del inglés _Internet Service Provider_, Proveedor de servicios de Internet) es una empresa (en su mayoría compañías telefónicas) que vende acceso a Internet y, a veces, correo electrónico, alojamiento de páginas web y voz sobre IP, ya sea mediante una conexión de marcación a través de una línea telefónica (antes más común), o a través de una conexión de banda ancha como un módem de cable o un servicio DSL. ## Aprenda más diff --git a/files/es/glossary/java/index.md b/files/es/glossary/java/index.md index cae85195a644d7..43ab999843e8a1 100644 --- a/files/es/glossary/java/index.md +++ b/files/es/glossary/java/index.md @@ -3,15 +3,14 @@ title: Java slug: Glossary/Java --- +{{GlossarySidebar}} + Java es un lenguaje de {{Glossary("computer programming", "programación")}} semi-compilado, {{glossary("OOP", "orientado a objetos")}} y portable. Java está tipado estáticamente y tiene una sintaxis parecida a la de C. Tiene una gran librería de funciones fáciles de usar, el Java Software Development Kit (SDK). Los programas son {{glossary("Compile", "compilados")}} primero una única vez a byte code y empaquetados en un formato que puede ser ejecutado por la Máquina Virtual de Java (JVM). La JVM está disponible para multiples plataformas, lo que permite que los programas en Java funcionen en casi todos los sistemas sin tener que volver a compilar y empaquetar el proyecto cada vez. Esto hace que sea el lenguaje preferido de muchas empresas con distintos propósitos, aunque puede ser considerado como muy "pesado". -## Saber más - -### Conocimientos generales +## Véase también - [Java]() en Wikipedia -- {{QuickLinksWithSubpages("/es/docs/Glossary")}} diff --git a/files/es/glossary/javascript/index.md b/files/es/glossary/javascript/index.md index 2cb4edcddfcd80..75c909d3cb6d4d 100644 --- a/files/es/glossary/javascript/index.md +++ b/files/es/glossary/javascript/index.md @@ -3,6 +3,8 @@ title: JavaScript slug: Glossary/JavaScript --- +{{GlossarySidebar}} + {{jsSidebar}} ## Resumen diff --git a/files/es/glossary/jpeg/index.md b/files/es/glossary/jpeg/index.md index 08b19985b7678c..ceaf288b639f52 100644 --- a/files/es/glossary/jpeg/index.md +++ b/files/es/glossary/jpeg/index.md @@ -3,6 +3,8 @@ title: JPEG slug: Glossary/JPEG --- +{{GlossarySidebar}} + **JPEG** (_Joint Photographic Experts Group_) es un método comúnmente utilizado en la compresión con pérdida de información en imágenes digitales. ## Saber más diff --git a/files/es/glossary/json/index.md b/files/es/glossary/json/index.md index 9f4c0d7aefe90f..dd3e99896a9307 100644 --- a/files/es/glossary/json/index.md +++ b/files/es/glossary/json/index.md @@ -3,6 +3,8 @@ title: JSON slug: Glossary/JSON --- +{{GlossarySidebar}} + **JSON (notación de objetos javascript)** es un formato de intercambio de datos. Es muy parecido a un subconjunto de sintaxis JavaScript, aunque no es un subconjunto en sentido estricto. (Ver JSON en la Referencia JavaScript para más detalles.) Aunque muchos lenguajes de programación lo soportan, JSON es especialmente útil al escribir cualquier tipo de aplicación basada en JavaScript, incluyendo sitios web y extensiones del navegador. Por ejemplo, es posible almacenar la información del usuario en formato JSON en una cookie o almacenar las preferencias de extensión en JSON en una cadena de valores de preferencias del navegador. JSON es capaz de representar números, valores lógicos, cadenas, valores nulos, arreglos y matrices (secuencias ordenadas de valores) y objetos (mapas de cadena de valores) compuestos de estos valores (o de otras matrices y objetos). JSON no representa de manera nativa tipos de datos más complejos como funciones, expresiones regulares, fechas, y así sucesivamente (en objetos de fecha serializados por defecto como una cadena que contiene la fecha en formato ISO, al no hacerlo de ida y vuelta, la información no se pierde por completo). Si se necesita que JSON represente tipos de datos adicionales, se puede transformar los valores, ya que son serializados, o antes de su deserialización. diff --git a/files/es/glossary/key/index.md b/files/es/glossary/key/index.md index 54f712cba5de72..5c28ae2bd99e4e 100644 --- a/files/es/glossary/key/index.md +++ b/files/es/glossary/key/index.md @@ -3,6 +3,8 @@ title: Clave slug: Glossary/Key --- +{{GlossarySidebar}} + Una clave es una pieza de información utilizada por un algoritmo criptográfico para el {{Glossary("encryption", "cifrado")}} y/o {{Glossary("decryption", "descifrado")}}. Los mensajes cifrados deben permanecer seguros incluso si todo lo relacionado con el {{Glossary("cryptosystem","sistema de cifrado")}}, excepto la clave, es de conocimiento público. En la {{Glossary("symmetric-key cryptography", "criptografía de clave simétrica")}}, la misma clave se utiliza tanto para el cifrado como para el descifrado. En la criptografía de clave pública, existen un par de claves relacionadas conocidas como _clave pública_ y _clave privada_. La clave pública está disponible libremente, mientras que la clave privada se mantiene secreta. La clave pública puede cifrar mensajes que sólo la clave privada correspondiente puede descifrar, y viceversa. diff --git a/files/es/glossary/keyword/index.md b/files/es/glossary/keyword/index.md index 665f324ffd1e35..6559944bc094f1 100644 --- a/files/es/glossary/keyword/index.md +++ b/files/es/glossary/keyword/index.md @@ -3,6 +3,8 @@ title: Palabra clave slug: Glossary/Keyword --- +{{GlossarySidebar}} + Una **palabra clave** es una palabra o frase que describe contenido. Las palabras clave en línea se utilizan como consultas para los motores de búsqueda o como palabras que identifican el contenido de los sitios web. Cuando usas un motor de búsqueda, utilizas palabras clave para especificar lo que estás buscando y el motor de búsqueda devuelve páginas web relevantes. Para obtener resultados más precisos, prueba con palabras clave más específicas, como "Mustang GTO azul" en lugar de simplemente "Mustang". Las páginas web también utilizan palabras clave en una etiqueta `` (en la sección {{htmlelement("head")}}) para describir el contenido de la página, de manera que los motores de búsqueda puedan identificar y organizar mejor las páginas web. diff --git a/files/es/glossary/lgpl/index.md b/files/es/glossary/lgpl/index.md index 72703da3fdc1e2..2d0727b10635f7 100644 --- a/files/es/glossary/lgpl/index.md +++ b/files/es/glossary/lgpl/index.md @@ -3,6 +3,8 @@ title: LGPL slug: Glossary/LGPL --- +{{GlossarySidebar}} + _LGPL_ (GNU Lesser General Public License en español **Licencia Pública General Reducida de GNU**) es una licencia de software libre publicada por la _Free Software Foundation_. LGPL es una alternativa más permisiva que la estricta licencia [copyleft](/es/docs/Glossary/copyleft) [GPL](/es/docs/Glossary/GPL). Esto supone que cualquier trabajo que use un elemento con licencia GPL **tiene la obligación** de ser publicado bajo las mismas condiciones (libre de usar, compartir, estudiar, y modificar). Por otro lado, LGPL solo requiere que los componentes derivados del elemento bajo LGPL continuen con esta licencia, y no el programa al completo. diff --git a/files/es/glossary/long_task/index.md b/files/es/glossary/long_task/index.md index e3e6e323dafaaf..9cf714c03321e1 100644 --- a/files/es/glossary/long_task/index.md +++ b/files/es/glossary/long_task/index.md @@ -3,6 +3,8 @@ title: Long task slug: Glossary/Long_task --- +{{GlossarySidebar}} + Una '**long task'** (tarea larga) es una tarea que tarda más de 50 ms en completarse. Es un período ininterrumpido en el que el subproceso de la interfaz de usuario principal está ocupado durante 50 ms o más. Los ejemplos comunes incluyen controladores de eventos de ejecución prolongada, [reflujos](/es/docs/Glossary/Reflow) costosos y otras representaciones, y el trabajo que realiza el navegador entre diferentes turnos del bucle de eventos que supera los 50 ms. Ver también diff --git a/files/es/glossary/main_thread/index.md b/files/es/glossary/main_thread/index.md index 8ca31315911244..1a829aafb416d6 100644 --- a/files/es/glossary/main_thread/index.md +++ b/files/es/glossary/main_thread/index.md @@ -3,23 +3,16 @@ title: Hilo principal slug: Glossary/Main_thread --- +{{GlossarySidebar}} + El hilo principal es donde un navegador procesa eventos y pinturas del usuario. De manera predeterminada, el navegador usa un solo hilo para ejecutar todo el JavaScript en su página, así como para realizar el diseño, los reflujos y la recolección de basura. Esto significa que las funciones de JavaScript de larga duración pueden bloquear el hilo, lo que lleva a una página que no responde y a una mala experiencia del usuario. A menos que use intencionalmente un trabajador web, como un trabajador de servicio, JavaScript se ejecuta en el hilo principal, por lo que es fácil que un script provoque retrasos en el procesamiento o la pintura de eventos. Cuanto menos trabajo se requiera del hilo principal, más puede responder ese hilo a los eventos del usuario, pintar y, en general, responder al usuario. - +## Véase también + +- [Asynchronous JavaScript](/es/docs/Learn/JavaScript/Asynchronous) +- [Web worker API](/es/docs/Web/API/Web_Workers_API) +- [Service worker API](/es/docs/Web/API/Service_Worker_API) +- [Glosario de MDN Web Docs](/es/docs/Glossary) + - {{Glossary("Thread")}} diff --git a/files/es/glossary/metadata/index.md b/files/es/glossary/metadata/index.md index 01e59b9b2c3e9d..f6bc360c69df92 100644 --- a/files/es/glossary/metadata/index.md +++ b/files/es/glossary/metadata/index.md @@ -3,6 +3,8 @@ title: Metadatos slug: Glossary/Metadata --- +{{GlossarySidebar}} + Los **metadatos** son, en su definición más simple, datos que describen otros datos. Por ejemplo, un documento {{glossary("HTML")}} son datos, pero HTML también puede contener metadatos en su elemento {{htmlelement("head")}} que describe el documento, como por ejemplo, quién lo escribió y su resumen. ## Saber más diff --git a/files/es/glossary/method/index.md b/files/es/glossary/method/index.md index cf80b674cae9ef..03948717783369 100644 --- a/files/es/glossary/method/index.md +++ b/files/es/glossary/method/index.md @@ -3,6 +3,8 @@ title: Método slug: Glossary/Method --- +{{GlossarySidebar}} + Un **metodo** es una {{glossary("function", "función")}} la cual es {{glossary("property", "propiedad")}} de un {{glossary("Objecto", "Objeto")}}. Existen dos tipos de métodos: _Métodos de Instancia_ los cuales son tareas integradas realizadas por la instacia de un objeto, y los _Métodos Estáticos_ que son tareas que pueden ser llamadas directamente en el constructor de un objeto. > **Nota:** en JavaScript las funciones en si son objetos, asi que, en ese contexto, un método es de hecho un {{glossary("Object Reference", "objeto de referencia")}} a una función. diff --git a/files/es/glossary/mitm/index.md b/files/es/glossary/mitm/index.md index b5aaf602d2d9b5..3b6d458a34d72b 100644 --- a/files/es/glossary/mitm/index.md +++ b/files/es/glossary/mitm/index.md @@ -3,6 +3,8 @@ title: MitM slug: Glossary/MitM --- +{{GlossarySidebar}} + Un ataque de Intermediario \[**Man-in-the-middle attack** (MitM)] intercepta una comunicación entre dos sistemas. Por ejemplo, un router Wi-Fi puede estar en peligro. Comparémoslo con un correo físico: si usted está escribiendo una carta a una persona, el cartero puede interceptar cada carta que envíe. Ellos la abren, la leen y finalmente la modifican, y entonces la reempaquetan y solamente entonces la envían a los destinatarios que usted pretendió. El receptor original podría entonces contestarle y el cartero abriría de nuevo la carta, la leería y finalmente la modificaria, la reempaquetaría y se la da. Usted ignoraría que hay un hombre en medio de su canal de comunicación – el cartero es invisible para usted y para su destinatario. diff --git a/files/es/glossary/mixin/index.md b/files/es/glossary/mixin/index.md index d64e748f2d87a0..93ba5f5fffbc4b 100644 --- a/files/es/glossary/mixin/index.md +++ b/files/es/glossary/mixin/index.md @@ -3,6 +3,8 @@ title: Mixin slug: Glossary/Mixin --- +{{GlossarySidebar}} + Un _mixin_ es un conjunto coherente de {{glossary("method","métodos")}} y {{glossary("property","propiedades")}} implementadas por otras interfaces y {{glossary("class","clases")}}. Ejemplo diff --git a/files/es/glossary/mobile_first/index.md b/files/es/glossary/mobile_first/index.md index a24f4c9be160d2..a8694501fd09c1 100644 --- a/files/es/glossary/mobile_first/index.md +++ b/files/es/glossary/mobile_first/index.md @@ -3,4 +3,6 @@ title: Mobile First slug: Glossary/Mobile_First --- +{{GlossarySidebar}} + **Mobile first**, una forma de {{Glossary("progressive enhancement", "mejora progresiva")}}, es un enfoque de desarrollo y diseño web que se enfoca en la priorización del diseño y el desarrollo para dispositivos móviles por encima del diseño y desarrollo para pantallas de escritorio. El fundamento detrás del enfoque "mobile-first" es proveer al usuario una buena experiencia para todos los tamaños de pantalla—empezando por una experiencia de usuario que funcione bien para dispositivos pequeños, para posteriormente, basada en dicha experiencia, continuar desarrollando para enriquecer la experiencia de usuario conforme el tamaño de pantalla es mayor. El enfoque "mobile-first" contrasta con el antiguo enfoque de diseño para escritorio en el que se pensaba primero en el diseño/desarrollo para tamaños de pantalla de escritorio y posteriormente se realizaban ajustes para conseguir que dichos diseños y desarrollos funcionases correctamente en dispositivos móbilies. diff --git a/files/es/glossary/mozilla_firefox/index.md b/files/es/glossary/mozilla_firefox/index.md index 6117ed0d2a43cc..bb871c6bcb1681 100644 --- a/files/es/glossary/mozilla_firefox/index.md +++ b/files/es/glossary/mozilla_firefox/index.md @@ -3,6 +3,8 @@ title: Mozilla Firefox slug: Glossary/Mozilla_Firefox --- +{{GlossarySidebar}} + Mozilla Firefox es un {{Glossary("navegador")}} gratuito de codigo abierto cuyo desarrollo es supervisado por Mozilla Corporation. Firefox functiona sobre Windows, OS X, Linus y Android. Lanzado en Noviembre del 2004, Firefox es completamente personalizable con temas y [complementos](/es/Add-ons). Firefox usa {{glossary("Gecko")}} para renderizar paginas webs, e implementa tanto actuales como próximos estandares Web. diff --git a/files/es/glossary/mvc/index.md b/files/es/glossary/mvc/index.md index c483cfb270dd41..d5ca89413fdcda 100644 --- a/files/es/glossary/mvc/index.md +++ b/files/es/glossary/mvc/index.md @@ -3,6 +3,8 @@ title: MVC slug: Glossary/MVC --- +{{GlossarySidebar}} + **MVC** (Modelo-Vista-Controlador) es un patrón en el diseño de software comúnmente utilizado para implementar interfaces de usuario, datos y lógica de control. Enfatiza una separación entre la lógica de negocios y su visualización. Esta "separación de preocupaciones" proporciona una mejor división del trabajo y una mejora de mantenimiento. Algunos otros patrones de diseño se basan en MVC, como MVVM (Modelo-Vista-modelo de vista), MVP (Modelo-Vista-Presentador) y MVW (Modelo-Vista-Whatever). Las tres partes del patrón de diseño de software MVC se pueden describir de la siguiente manera: diff --git a/files/es/glossary/namespace/index.md b/files/es/glossary/namespace/index.md index a087f481be5659..bdd0cfc9dcc034 100644 --- a/files/es/glossary/namespace/index.md +++ b/files/es/glossary/namespace/index.md @@ -5,6 +5,8 @@ l10n: sourceCommit: 4bd65a01204446af2254bb8864bd22ad87bc86b0 --- +{{GlossarySidebar}} + Un Espacio de Nombres es un contexto para identificadores, un agrupamiento lógico de nombres usado en un programa. Dentro del mismo contexto, y el mismo ámbito, un identificator debe reconocer una entidad de forma única. En un sistema operativo, un directorio es un espacio de nombre. Cada archivo o subdirectorio tiene un nombre único, pero un archivo puede usar el mismo nombre múltiples veces. diff --git a/files/es/glossary/node.js/index.md b/files/es/glossary/node.js/index.md index 8b93f8ea6403fd..563aae29d590e1 100644 --- a/files/es/glossary/node.js/index.md +++ b/files/es/glossary/node.js/index.md @@ -3,6 +3,8 @@ title: Node.js slug: Glossary/Node.js --- +{{GlossarySidebar}} + Node.js es un entorno de ejecucion multiplataforma en {{Glossary("JavaScript")}} que permite a los desarrolladores construir aplicaciones del lado del servidor y de red con JavaScript. ## Saber más diff --git a/files/es/glossary/node/dom/index.md b/files/es/glossary/node/dom/index.md index 982241924fdbd3..8a75da1fe61c92 100644 --- a/files/es/glossary/node/dom/index.md +++ b/files/es/glossary/node/dom/index.md @@ -3,6 +3,8 @@ title: Node (DOM) slug: Glossary/Node/DOM --- +{{GlossarySidebar}} + En el contexto del {{Glossary("DOM")}}, un **nodo** es un único punto en el arbol de nodos. Los nodos pueden ser varias cosas el documento mismo, elementos, texto y comentarios. ## Saber más diff --git a/files/es/glossary/node/index.md b/files/es/glossary/node/index.md index ce0ad55e92b30b..9a9b33351ab013 100644 --- a/files/es/glossary/node/index.md +++ b/files/es/glossary/node/index.md @@ -3,6 +3,8 @@ title: Node slug: Glossary/Node --- +{{GlossarySidebar}} + El término **nodo** puede tener varios significados según el contexto. Puede referirse a: {{GlossaryDisambiguation}} diff --git a/files/es/glossary/null/index.md b/files/es/glossary/null/index.md index ebe4bda4db4405..f3b04a4f4afe5b 100644 --- a/files/es/glossary/null/index.md +++ b/files/es/glossary/null/index.md @@ -3,6 +3,8 @@ title: "Null" slug: Glossary/Null --- +{{GlossarySidebar}} + En ciencias informáticas, un valor **null** representa una referencia que apunta, generalmente intencionadamente, a una inexistente o inválido {{glossary("objecto","objeto")}} o dirección. El significado de una referencia null varía entre las implementaciones de lenguajes. En {{Glossary("JavaScript")}}, null es uno de los {{Glossary("Primitivo", "valores primitivos")}}. diff --git a/files/es/glossary/number/index.md b/files/es/glossary/number/index.md index 8043dc678f44b6..870363676c8dc6 100644 --- a/files/es/glossary/number/index.md +++ b/files/es/glossary/number/index.md @@ -3,6 +3,8 @@ title: Number slug: Glossary/Number --- +{{GlossarySidebar}} + En {{Glossary("JavaScript")}}, **Number** es un tipo de datos numérico ([double-precision 64-bit floating point format (IEEE 754)](https://es.wikipedia.org/wiki/Formato_en_coma_flotante_de_doble_precisi%C3%B3n)). En otros lenguajes de programación puede existir diferentes tipos numéricos, por ejemplo: Integers, Floats, Doubles, or Bignums. ## Aprende más diff --git a/files/es/glossary/object/index.md b/files/es/glossary/object/index.md index 7b9781d6287023..1fc0a9d8309d9a 100644 --- a/files/es/glossary/object/index.md +++ b/files/es/glossary/object/index.md @@ -3,6 +3,8 @@ title: Object slug: Glossary/Object --- +{{GlossarySidebar}} + El [Object](/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object) se refiere a una estructura de datos que contiene datos e instrucciones para trabajar con los datos. Algunas veces los Objects se refieren a cosas del mundo real, por ejemplo, un object de un coche o mapa en un juego de carreras. {{glossary("JavaScript")}}, Java, C++, y Python son ejemplos de {{glossary("OOP","programación orientada a objetos")}}. ## Aprender más diff --git a/files/es/glossary/oop/index.md b/files/es/glossary/oop/index.md index 021e04ffc30e01..9ab579a267e070 100644 --- a/files/es/glossary/oop/index.md +++ b/files/es/glossary/oop/index.md @@ -3,6 +3,8 @@ title: Programación orientada a objetos slug: Glossary/OOP --- +{{GlossarySidebar}} + **OOP** (Programación orientada a objetos) es un paradigma de programación en el que los datos son encapsulados en **{{glossary("object","objetos")}},** los cuales tienen su propio comportamiento. {{glossary("JavaScript")}} esta altamente orientado a objetos. Sigue el modelo basado en prototipado (en oposición al modelo basado en **{{glossary("Class","clases")}}**). diff --git a/files/es/glossary/operand/index.md b/files/es/glossary/operand/index.md index f1e0b230bd1a50..cf67bb556fedf5 100644 --- a/files/es/glossary/operand/index.md +++ b/files/es/glossary/operand/index.md @@ -3,6 +3,8 @@ title: Operando slug: Glossary/Operand --- +{{GlossarySidebar}} + **Un operando** es la parte de una instruccion que representa los datos manipulados por el {{glossary("Operator")}}. por ejemplo, cuando sumas dos numeros, los numeros son el operando y "+" es el operador. ## Aprende mas diff --git a/files/es/glossary/operator/index.md b/files/es/glossary/operator/index.md index 77c41fbbf48510..58866d1313ffe4 100644 --- a/files/es/glossary/operator/index.md +++ b/files/es/glossary/operator/index.md @@ -3,6 +3,8 @@ title: Operador slug: Glossary/Operator --- +{{GlossarySidebar}} + Parte de la sintaxis reservada consistente en signos de puntuación o carácteres alfanuméricos que tienen funcionalidades incorporadas. Por ejemplo, "+" indica el operador suma y "!" indica el operador "not" (negación). ## Aprende más diff --git a/files/es/glossary/parse/index.md b/files/es/glossary/parse/index.md index 0275e2effe2cab..fff94c68ab9985 100644 --- a/files/es/glossary/parse/index.md +++ b/files/es/glossary/parse/index.md @@ -3,6 +3,8 @@ title: Parse (análisis sintáctico) slug: Glossary/Parse --- +{{GlossarySidebar}} + "Parsing" significa analizar y convertir un programa en un formato interno que un entorno de ejecución pueda realmente ejecutar, por ejemplo el motor {{glossary("JavaScript")}} dentro de los navegadores. El [navegador analiza el HTML](/docs/Web/Guide/HTML/HTML5/HTML5_Parser) en un árbol {{glossary('DOM')}}. El análisis de HTML implica la "[tokenización](/docs/Web/API/DOMTokenList)" (dividir en fragmentos) y en la construcción del árbol. Los "tokens" HTML incluyen etiquetas de inicio y final, así como nombres de atributos y valores. Si el documento está bien formado, el análisis sintáctico es más sencillo y rápido. El "parser" analiza la entrada simbólica en el documento, construyendo el árbol del documento. diff --git a/files/es/glossary/php/index.md b/files/es/glossary/php/index.md index dcf0f6d71e44e5..a31a1b28ffe3be 100644 --- a/files/es/glossary/php/index.md +++ b/files/es/glossary/php/index.md @@ -5,6 +5,8 @@ l10n: sourceCommit: 4bd65a01204446af2254bb8864bd22ad87bc86b0 --- +{{GlossarySidebar}} + PHP (una inicialización recursiva para PHP: preprocesador de hipertexto) es un lenguaje de script de código abierto del lado del servidor que puede integrarse en HTML para crear aplicaciones web y sitios web dinámicos. ## Ejemplos @@ -51,7 +53,6 @@ PHP (una inicialización recursiva para PHP: preprocesador de hipertexto) es un - [PHP](https://es.wikipedia.org/wiki/PHP) en Wikipedia - [Programación PHP](https://en.wikibooks.org/wiki/PHP_Programming) en Wikibooks - [Glosario de documentos web de MDN](/es/docs/Glossary) - - {{Glossary("Java")}} - {{Glossary("JavaScript")}} - {{Glossary("Python")}} diff --git a/files/es/glossary/plaintext/index.md b/files/es/glossary/plaintext/index.md index 3213bea9666434..227f3b8a8ebfd2 100644 --- a/files/es/glossary/plaintext/index.md +++ b/files/es/glossary/plaintext/index.md @@ -3,6 +3,8 @@ title: Texto Simple slug: Glossary/Plaintext --- +{{GlossarySidebar}} + Texto simple se refiere a la información que se está utilizando como entrada para un {{Glossary("algorithm", "algoritmo")}} de {{Glossary("encryption","cifrado")}}, o para el {{Glossary("ciphertext", "texto cifrado")}} que se ha descifrado. Con frecuencia se usa indistintamente con el término texto claro, que se refiere de manera más general a cualquier información, como un documento de texto, una imagen, etc., que no se haya cifrado y que un humano o una computadora puedan leer sin procesamiento adicional. diff --git a/files/es/glossary/polyfill/index.md b/files/es/glossary/polyfill/index.md index feb4ec1a3cc910..038110bcaada54 100644 --- a/files/es/glossary/polyfill/index.md +++ b/files/es/glossary/polyfill/index.md @@ -3,6 +3,8 @@ title: Polyfill slug: Glossary/Polyfill --- +{{GlossarySidebar}} + Un polyfill es un fragmento de código (generalmente JavaScript en la Web) que se utiliza para proporcionar una funcionalidad moderna en navegadores antiguos que no lo admiten de forma nativa. Por ejemplo, se podría usar un polyfill para imitar la funcionalidad de un elemento HTML Canvas en Microsoft Internet Explorer 7 usando un complemento de Silverlight, o un soporte mímico para las unidades rem CSS, o {{cssxref("text-shadow")}}, o lo que tu quieras. diff --git a/files/es/glossary/pop/index.md b/files/es/glossary/pop/index.md index 22fd27a0a45324..bd7eabb45b58ec 100644 --- a/files/es/glossary/pop/index.md +++ b/files/es/glossary/pop/index.md @@ -3,20 +3,17 @@ title: POP3 slug: Glossary/POP --- +{{GlossarySidebar}} + **POP3** (Protocolo de Oficina de Correo por sus siglas en inglés) es un [protocolo](/es/docs/Glossary/Protocol) muy común para obtener correos desde un servidor de correos por medio de una conexión [TCP](/es/docs/Glossary/TCP). POP3 no soporta directorios, a diferencia del más reciente [IMAP4](/es/docs/Glossary/IMAP), el cual es más difícil de implementar dada su extructura más compleja. Los clientes usualmente recuperan todos los mensajes y luego los eliminan del servidor, pero POP3 permite retener una copia en el servidor. Casi todos los servidores y clientes de correo actualmente soportan POP3. - +## Véase también + +- [POP](https://es.wikipedia.org/wiki/Protocolo_de_oficina_de_correo) en Wikipedia +- [RFC 1734](https://tools.ietf.org/html/rfc1734) (Especificación del mecanismo de autenticación de POP3) +- [RFC 1939](https://tools.ietf.org/html/rfc1939) (Especificación de POP3) +- [RFC 2449](https://tools.ietf.org/html/rfc2449) (Especificación del mecanismo de extensión de POP3) +- [Glosario de MDN Web Docs](/es/docs/Glossary) + - {{Glossary("IMAP", "IMAP4")}} diff --git a/files/es/glossary/port/index.md b/files/es/glossary/port/index.md index d600dd71bf5ded..cfc62adf08c07c 100644 --- a/files/es/glossary/port/index.md +++ b/files/es/glossary/port/index.md @@ -3,6 +3,8 @@ title: Puerto slug: Glossary/Port --- +{{GlossarySidebar}} + Para un ordenador conectado a una red con una [dirección IP](/es/docs/Glossary/IP_address), un **puerto** es el destino de la comunicación. Los puertos están designados por números, por debajo de 1024 cada puerto está asociado por defecto con un [protocolo](/es/docs/Glossary/Protocol) específico. Por ejemplo, el puerto por defecto para el protocolo [HTTP](/es/docs/Glossary/HTTP) es 80 y el puerto por defecto para el protocolo [HTTPS](/es/docs/Glossary/https) es 443, por lo tanto un servidor HTTP espera peticiones en esos puertos. Cada protocolo de internet está asociado con un puerto por defecto: [SMTP](/es/docs/Glossary/SMTP) (25), [POP3](/es/docs/Glossary/POP) (110), [IMAP](/es/docs/Glossary/IMAP) (143), [IRC](/es/docs/Glossary/IRC) (194), y así sucesivamente. diff --git a/files/es/glossary/preflight_request/index.md b/files/es/glossary/preflight_request/index.md index 8bd99a88c24286..7dc987c1d3ec0f 100644 --- a/files/es/glossary/preflight_request/index.md +++ b/files/es/glossary/preflight_request/index.md @@ -3,6 +3,8 @@ title: Preflight petición slug: Glossary/Preflight_request --- +{{GlossarySidebar}} + Una petición preflight CORS es una petición [CORS](/es/docs/Glossary/CORS) realizada para comprobar si el protocolo {{Glossary("CORS")}} es comprendido. Es una petición {{HTTPMethod("OPTIONS")}}, que emplea tres cabeceras HTTP: {{HTTPHeader("Access-Control-Request-Method")}}, {{HTTPHeader("Access-Control-Request-Headers")}}, y la cabecera {{HTTPHeader("Origin")}} . @@ -29,7 +31,7 @@ Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE Access-Control-Max-Age: 86400 ``` -## See also +## Véase también - [CORS](/es/docs/Glossary/CORS) - {{HTTPMethod("OPTIONS")}} diff --git a/files/es/glossary/primitive/index.md b/files/es/glossary/primitive/index.md index 8ab69587d4a412..03ef9b55054678 100644 --- a/files/es/glossary/primitive/index.md +++ b/files/es/glossary/primitive/index.md @@ -3,6 +3,8 @@ title: Primitivo slug: Glossary/Primitive --- +{{GlossarySidebar}} + En {{Glossary("JavaScript")}}, un **primitive** (valor primitivo, tipo de dato primitivo) son datos que no son un {{Glossary("object", "objeto")}} y no tienen {{Glossary("method", "métodos")}}. Hay 6 tipos de datos primitivos: {{Glossary("string")}}, {{Glossary("number")}}, {{Glossary("bigint")}}, {{Glossary("boolean")}}, {{Glossary("undefined")}} y {{Glossary("symbol")}}. También hay {{Glossary("null")}}, que aparentemente es primitivo, pero de hecho es un caso especial para cada {{JSxRef("Object")}}: y cualquier tipo estructurado se deriva de `null` por la [Cadena de prototipos](/es/docs/Learn/JavaScript/Objects/Inheritance). La mayoría de las veces, un valor primitivo se representa directamente en el nivel más bajo de la implementación del lenguaje. @@ -89,27 +91,16 @@ A excepción de `null` y `undefined`, todos los valores primitivos tienen objeto El método {{JSxRef("Objetos_globales/Object/valueOf"," valueOf()")}} del contenedor devuelve el valor primitivo. -## Aprende más - -### Conocimientos generales +## Véase también -- {{JSxRef("Data_structures", "Introducción a los tipos de datos de JavaScript")}} +- [Tipos de datos JavaScript](/es/docs/Web/JavaScript/Data_structures) - [Tipo de dato primitivo](https://es.wikipedia.org/wiki/Tipo_de_dato_primitivo) en Wikipedia - - +- [Glosario de MDN Web Docs](/es/docs/Glossary) + - {{Glossary("JavaScript")}} + - {{Glossary("string")}} + - {{Glossary("number")}} + - {{Glossary("bigint")}} + - {{Glossary("boolean")}} + - {{Glossary("null")}} + - {{Glossary("undefined")}} + - {{Glossary("symbol")}} diff --git a/files/es/glossary/progressive_enhancement/index.md b/files/es/glossary/progressive_enhancement/index.md index c877ed7c653d57..5aeee2c4e17010 100644 --- a/files/es/glossary/progressive_enhancement/index.md +++ b/files/es/glossary/progressive_enhancement/index.md @@ -3,6 +3,8 @@ title: Mejora Progresiva slug: Glossary/Progressive_Enhancement --- +{{GlossarySidebar}} + **Mejora progresiva** es una filosofía de diseño que se centra en proporcionar una base de contenido y funcionalidad esenciales para la mayor cantidad de usuarios posible. Al mismo tiempo va más allá y trata de ofrecer la mejor experiencia posible sólo a los usuarios de los navegadores más modernos los cuales pueden ejecutar todo código requerido. La [detección de características](/es/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection) se usa generalmente para determinar si los navegadores pueden manejar todo el contenido de alto nivel o no. Habitualmente se usan los [polyfills](/es/docs/Glossary/Polyfill) para incorporar las características faltantes con JavaScript. diff --git a/files/es/glossary/promise/index.md b/files/es/glossary/promise/index.md index 21925faa63a839..6692ef62a10a54 100644 --- a/files/es/glossary/promise/index.md +++ b/files/es/glossary/promise/index.md @@ -3,6 +3,8 @@ title: Promesa slug: Glossary/Promise --- +{{GlossarySidebar}} + Una **{{jsxref("Promesa")}}** es un {{Glossary("objeto")}} devuelto por una {{Glossary("función")}} que no ha completado su tarea. La promesa representa literalmente una promesa creada por una función a la que le llegará un resultado en un futuro. Cuando la función termina su tarea {{Glossary("asynchronous", "de forma asíncrona")}}, una función del objeto "promesa" será ejecutada. diff --git a/files/es/glossary/property/index.md b/files/es/glossary/property/index.md index 8ce1ae445687a4..bf04ccc2584c4b 100644 --- a/files/es/glossary/property/index.md +++ b/files/es/glossary/property/index.md @@ -3,6 +3,8 @@ title: Propiedad slug: Glossary/Property --- +{{GlossarySidebar}} + El término **propiedad** puede tener varios significados según el contexto. Se puede referir a: {{GlossaryDisambiguation}} diff --git a/files/es/glossary/protocol/index.md b/files/es/glossary/protocol/index.md index df1bc6e212b489..fef49f9c398bcd 100644 --- a/files/es/glossary/protocol/index.md +++ b/files/es/glossary/protocol/index.md @@ -3,6 +3,8 @@ title: Protocolo slug: Glossary/Protocol --- +{{GlossarySidebar}} + Un **protocolo** es un conjunto de reglas que definen cómo se intercambian los datos dentro o entre ordenadores. La comunicación entre dispositivos requiere que estos estén de acuerdo con el formato de los datos que están siendo intercambiados. Al conjunto de reglas que definen este formato se le llama protocolo. ## Saber más diff --git a/files/es/glossary/prototype-based_programming/index.md b/files/es/glossary/prototype-based_programming/index.md index b556906ac2ab5e..c184191d44aaff 100644 --- a/files/es/glossary/prototype-based_programming/index.md +++ b/files/es/glossary/prototype-based_programming/index.md @@ -3,6 +3,8 @@ title: Prototype-based programming slug: Glossary/Prototype-based_programming --- +{{GlossarySidebar}} + **La programación basada en prototipos** es un estilo de {{Glossary("OOP", "programación orientada a objetos")}} en el que las {{Glossary('Clase', 'clases')}} no se definen explícitamente, sino que se derivan de agregar propiedades y métodos a una instancia de otra clase o, con menos frecuencia, agregarlos a un objeto vacío. En palabras simples: este tipo de estilo permite la creación de un {{Glossary('Objeto', 'objeto')}} sin definir primero su {{Glossary('Clase', 'clase')}}. diff --git a/files/es/glossary/prototype/index.md b/files/es/glossary/prototype/index.md index 6021b77461be22..569ba50038332f 100644 --- a/files/es/glossary/prototype/index.md +++ b/files/es/glossary/prototype/index.md @@ -3,6 +3,8 @@ title: Prototipo slug: Glossary/Prototype --- +{{GlossarySidebar}} + Un prototipo es un modelo que muestra pronto en el ciclo de desarrollo la apariencia y el comportamiento de una aplicación o producto. Mira [La herencia y la cadena de prototipado.](/es/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) diff --git a/files/es/glossary/pseudo-class/index.md b/files/es/glossary/pseudo-class/index.md index 5b13093908d554..2e186d6485d51f 100644 --- a/files/es/glossary/pseudo-class/index.md +++ b/files/es/glossary/pseudo-class/index.md @@ -3,6 +3,8 @@ title: Pseudo-clase slug: Glossary/Pseudo-class --- +{{GlossarySidebar}} + En CSS, un selector de **pseudo-clase** apunta a elementos dependiendo de su estado en lugar de en su información en el arbol del documento. Por ejemplo, el selector `a` {{cssxref(":visited")}} aplica estilos solamente a los links que el usuario ha visitado. ## Aprender más diff --git a/files/es/glossary/pseudocode/index.md b/files/es/glossary/pseudocode/index.md index a0c974cfb025bc..6ce585d7aad1ec 100644 --- a/files/es/glossary/pseudocode/index.md +++ b/files/es/glossary/pseudocode/index.md @@ -3,6 +3,8 @@ title: Pseudocódigo slug: Glossary/Pseudocode --- +{{GlossarySidebar}} + El pseudocódigo se refiere a la sintaxis del código que generalmente se usa para indicar a los humanos cómo funciona dicho código, o para ilustrar el diseño de un elemento. No funcionará si intentas ejecutarlo como código. ## Saber más diff --git a/files/es/glossary/public-key_cryptography/index.md b/files/es/glossary/public-key_cryptography/index.md index f8f792f5f8eec9..dbdf894d8aae80 100644 --- a/files/es/glossary/public-key_cryptography/index.md +++ b/files/es/glossary/public-key_cryptography/index.md @@ -3,6 +3,8 @@ title: Criptografía de clave pública slug: Glossary/Public-key_cryptography --- +{{GlossarySidebar}} + La criptografía de clave pública es un sistema criptográfico en el que las claves vienen en pares. La transformación realizada por una de las claves solo se puede deshacer con la otra clave. Una clave (la clave privada) se mantiene secreta mientras que la otra se hace pública. Cuando se usa para firmas digitales, la clave privada se usa para firmar y la clave pública para verificar. Esto significa que cualquier persona puede verificar una firma, pero solo el propietario de la clave privada correspondiente podría haberla generado. diff --git a/files/es/glossary/python/index.md b/files/es/glossary/python/index.md index c32ceb97be2e62..09963f773b9dfc 100644 --- a/files/es/glossary/python/index.md +++ b/files/es/glossary/python/index.md @@ -3,6 +3,8 @@ title: Python slug: Glossary/Python --- +{{GlossarySidebar}} + **Python** es un leguaje de programación de alto nivel y de propósito general. Utiliza un enfoque multiparadigma, lo que significa que soporta programación orientada a objetos, procedural y en menor medida, programación funcional. Fue creado por Guido van Rossun como sucesor a otro lenguaje (llamado ABC) entre 1985 y 1990, y es usado actualmente en una gran variedad de campos, como el desarrollo web, en la creación de aplicaciones actuales y para la construcción de archivos de procesamiento por lotes (Scripts). diff --git a/files/es/glossary/recursion/index.md b/files/es/glossary/recursion/index.md index 12c646928a4596..88aefdeb9beb50 100644 --- a/files/es/glossary/recursion/index.md +++ b/files/es/glossary/recursion/index.md @@ -3,6 +3,8 @@ title: Recursión slug: Glossary/Recursion --- +{{GlossarySidebar}} + Es el acto de una función llamándose a sí misma. La recursión es utilizada para resolver problemas que contienen subproblemas más pequeños. Una función recursiva puede recibir 2 entradas: un caso base (finaliza la recursión) o un un caso recursivo (continúa la recursión). ## Saber más diff --git a/files/es/glossary/reflow/index.md b/files/es/glossary/reflow/index.md index 7dd987021b09d3..18fd172220f296 100644 --- a/files/es/glossary/reflow/index.md +++ b/files/es/glossary/reflow/index.md @@ -3,6 +3,8 @@ title: Reflow slug: Glossary/Reflow --- +{{GlossarySidebar}} + **Un Reflow** sucede cuando un {{glossary("navegador")}} debe procesar y pintar parte de, o toda una pagina web nuevamente, Como despues de actualizar un sitio web interactivo ## Aprende más diff --git a/files/es/glossary/regular_expression/index.md b/files/es/glossary/regular_expression/index.md index bf24de4d6d14bf..e10e19d542eb39 100644 --- a/files/es/glossary/regular_expression/index.md +++ b/files/es/glossary/regular_expression/index.md @@ -3,6 +3,8 @@ title: Expresiones regulares slug: Glossary/Regular_expression --- +{{GlossarySidebar}} + **Expresiones regulares** (o _regex_) son reglas que definen las secuencias de caracteres obtenidas en una busqueda. Las expresiones regulares están incluidas en varios lenguages, pero las más conocida es la de Perl, que ha dado lugar a su propio ecosistema llamado PCRE (_Perl Compatible Regular Expression_). En la web, {{glossary("JavaScript")}} proporciona otra implementación de expresiones regulares a través del objeto {{jsxref("RegExp")}}. diff --git a/files/es/glossary/response_header/index.md b/files/es/glossary/response_header/index.md index 3003d63dcb7d08..d6a7c739a7cde3 100644 --- a/files/es/glossary/response_header/index.md +++ b/files/es/glossary/response_header/index.md @@ -3,6 +3,8 @@ title: Cabecera de respuesta slug: Glossary/Response_header --- +{{GlossarySidebar}} + Una **cabecera de respuesta** (en inglés _response header_) es una {{Glossary("HTTP header")}} que puede ser usada en una respuesta HTTP y que no tiene que ver con el contenido del mensaje. Las cabeceras de respuesta, como {{HTTPHeader("Age")}}, {{HTTPHeader("Location")}} o {{HTTPHeader("Server")}} son usadas para dar un contexto más detallado de la respuesta. No todas las cabeceras que aparecen en una respuesta son categorizada como _cabeceras de respuesta_ por la especificación. Por ejemplo, la cabecera {{HTTPHeader("Content-Type")}} es una {{glossary("representation header")}} indicando el tipo original de datos en el cuerpo del mensaje de respuesta (previo a que la codificación en la cabecera de representación {{HTTPHeader("Content-Encoding")}} sea aplicada). Sin embargo, en un mensaje de respuesta, "conversacionalmente" todas las cabeceras son usualmente llamadas como cabeceras de respuesta. diff --git a/files/es/glossary/responsive_web_design/index.md b/files/es/glossary/responsive_web_design/index.md index b79ab157ad3dab..c0afaa0339628e 100644 --- a/files/es/glossary/responsive_web_design/index.md +++ b/files/es/glossary/responsive_web_design/index.md @@ -3,6 +3,8 @@ title: Diseño web responsivo slug: Glossary/Responsive_web_design --- +{{GlossarySidebar}} + Diseño web responsivo (del inglés _**R**esponsive **W**eb **D**esign_) o **RWD** es un concepto de desarrollo web que se centra en hacer que los sitios se vean y se comporten de manera óptima en todos los dispositivos informáticos personales, desde el escritorio hasta el móvil. ## Aprender más diff --git a/files/es/glossary/rest/index.md b/files/es/glossary/rest/index.md index b4ee5e729735d9..3fe514278c0fd9 100644 --- a/files/es/glossary/rest/index.md +++ b/files/es/glossary/rest/index.md @@ -3,6 +3,8 @@ title: REST slug: Glossary/REST --- +{{GlossarySidebar}} + El término "Transferencia de Estado Representacional" (**REST**) representa un conjunto de características de diseño de arquitecturas software que aportan confiabilidad, eficiencia y escalibilidad a los sistemas distribuidos. Un sistema es llamado RESTful cuando se ajusta a estas características. La idea básica de REST es que un recurso, e.j. un documento, es transferido con su estado y su relaciones (hipertexto) mediante formatos y operaciones estandarizadas bien definidas. diff --git a/files/es/glossary/rgb/index.md b/files/es/glossary/rgb/index.md index 21fe1bab2957c1..3fd78168138568 100644 --- a/files/es/glossary/rgb/index.md +++ b/files/es/glossary/rgb/index.md @@ -3,6 +3,8 @@ title: RGB slug: Glossary/RGB --- +{{GlossarySidebar}} + Red Green Blue (RGB) es un modelo de color que representa los colores como mezclas de tres componentes subyacentes (o canales), rojo, verde y azul. Cada color se describe mediante una secuencia de tres números (normalmente entre 0.0 y 1.0, o entre 0 y 255) que representan las diferentes intensidades (o contribuciones) de rojo, verde y azul para determinar el color final. Hay muchas formas de describir los componentes RGB de un color. En {{Glossary("CSS")}} se pueden representar como un solo entero de 24 bits en notación hexadecimal (por ejemplo, `#ADD8E6` is azul claro), o en notación funcional como tres enteros de 8 bits separados (por ejemplo , rgb (46, 139, 87) es verde mar). En {{Glossary("OpenGL")}}, {{Glossary("WebGL")}}, y {{Glossary("GLSL")}} los componentes rojo-verde-azul son fracciones (números en coma flotante entre 0.0 y 1.0), aunque en el búfer de color real normalmente se almacenan como enteros de 8 bits. Gráficamente, un color se puede representar como un punto en una cuadrícula o cubo tridimensional, donde cada dimensión (o eje) corresponde a un canal diferente. diff --git a/files/es/glossary/rss/index.md b/files/es/glossary/rss/index.md index 20d4eb485b4314..76efb895219af8 100644 --- a/files/es/glossary/rss/index.md +++ b/files/es/glossary/rss/index.md @@ -3,6 +3,8 @@ title: RSS slug: Glossary/RSS --- +{{GlossarySidebar}} + _RSS_ (Really Simple Syndication en español Sindicación Realmente Simple) hace referencia a los diferentes formatos de [XML](/es/docs/Glossary/XML) diseñados para sitios web de noticias. Cuando te subscribes a un _feed_ RSS (boletín de noticias de servicios web), éste te envía información y actualizaciones al _feed_ de tu lector RSS, y de esta manera no es necesario que el usuario busque manuelmente en cada sitio web. diff --git a/files/es/glossary/ruby/index.md b/files/es/glossary/ruby/index.md index 0484028fdd64ea..0dd4d0f1961d80 100644 --- a/files/es/glossary/ruby/index.md +++ b/files/es/glossary/ruby/index.md @@ -5,6 +5,8 @@ l10n: sourceCommit: 4bd65a01204446af2254bb8864bd22ad87bc86b0 --- +{{GlossarySidebar}} + **Ruby** es un lenguaje de programación de código abierto. En el contexto {{glossary("world wide web", "Web")}}, Ruby se suele usar en el lado del servidor con el framework **Ruby On Rails** (ROR) para producir sitios web y aplicaciones. Ruby también es un método para anotar texto de Asia oriental en documentos HTML para proporcionar información de pronunciación; consulte el elemento {{HTMLElement("ruby")}}. diff --git a/files/es/glossary/safe/index.md b/files/es/glossary/safe/index.md index b2185464b84473..5675bce4348a96 100644 --- a/files/es/glossary/safe/index.md +++ b/files/es/glossary/safe/index.md @@ -3,6 +3,8 @@ title: Seguro slug: Glossary/Safe --- +{{GlossarySidebar}} + Un método HTTP es **seguro** cuando no altera el estado del servidor. En otras palabras, un método HTTP es seguro solo cuando ejecuta una operación de lectura. Todos los métodos seguros también son {{glossary("idempotent")}} así como algunos, pero no todos, métodos inseguros como {{HTTPMethod("PUT")}}, o {{HTTPMethod("DELETE")}}. Incluso si los métodos seguros tienen una semántica de solo lectura, los servidores pueden alterar su estado: por ejemplo, pueden registrar o mantener estadísticas. Lo importante aquí es que al llamar a un método seguro, el cliente no solicita ningún cambio en el servidor y, por lo tanto, no creará una carga o carga innecesaria para el servidor. Los navegadores pueden llamar a métodos seguros sin temor a causar ningún daño al servidor: esto les permite realizar actividades como la búsqueda previa sin riesgos. Los rastreadores web también confían en llamar a métodos seguros. diff --git a/files/es/glossary/scm/index.md b/files/es/glossary/scm/index.md index 9edf543849b1fb..44f1f1a72f174a 100644 --- a/files/es/glossary/scm/index.md +++ b/files/es/glossary/scm/index.md @@ -3,6 +3,8 @@ title: SCV slug: Glossary/SCM --- +{{GlossarySidebar}} + Un SCV (sistema de control de versiones) es un sistema para gestionar código fuente. Normalmente se refiere al uso de software para manejar versiones de ficheros fuente. Un programador puede modificar ficheros de código fuente sin miedo a eliminar código que funciona, porque un SCV realiza un seguimiento de cómo el código fuente ha cambiado y quién ha realizado los cambios. Algunos sistemas SCV son CVS, SVN y Git. diff --git a/files/es/glossary/scope/index.md b/files/es/glossary/scope/index.md index 6a5308d0f72e40..9beb750425665a 100644 --- a/files/es/glossary/scope/index.md +++ b/files/es/glossary/scope/index.md @@ -3,6 +3,8 @@ title: Scope slug: Glossary/Scope --- +{{GlossarySidebar}} + El contexto actual de ejecución. El contexto en el que los valores y las expresiones son "visibles" o pueden ser referenciados. Si una variable u otra expresión no está "en el Scope- alcance actual", entonces no está disponible para su uso. Los Scope también se pueden superponer en una jerarquía, de modo que los Scope secundarios tengan acceso a los ámbitos primarios, pero no al revés. Una función sirve como un cierre en JavaScript y, por lo tanto, crea un ámbito, de modo que (por ejemplo) no se puede acceder a una variable definida exclusivamente dentro de la función desde fuera de la función o dentro de otras funciones. Por ejemplo, lo siguiente no es válido: diff --git a/files/es/glossary/seo/index.md b/files/es/glossary/seo/index.md index 68d3a599fb212a..9f800217bc3c98 100644 --- a/files/es/glossary/seo/index.md +++ b/files/es/glossary/seo/index.md @@ -3,6 +3,8 @@ title: SEO slug: Glossary/SEO --- +{{GlossarySidebar}} + **SEO** (Search Engine Optimization) también conocido como posicionamiento web, es el proceso de hacer un sitio web más visible en los resultados de búsqueda o mejorar el ranking de búsqueda. Los motores de búsqueda siguen los enlaces de una página a otra, y el índice del contenido encontrado. Al realizar una búsqueda, el motor de búsqueda muestra el contenido indexado en base a su tabla de contenidos organizándolos guiados por las reglas de su algoritmo. El cumplimiento de las directrices de los buscadores con exactitud no implica el correcto posicionamiento del proyecto asociado en los mejores resultados, pero sí la ausencia de una penalización por parte del algoritmo del buscador. diff --git a/files/es/glossary/sgml/index.md b/files/es/glossary/sgml/index.md index 7bdfe33cfc221e..c1dd82e311f021 100644 --- a/files/es/glossary/sgml/index.md +++ b/files/es/glossary/sgml/index.md @@ -3,6 +3,8 @@ title: SGML slug: Glossary/SGML --- +{{GlossarySidebar}} + El _Lenguaje de marcado generalizado estándar_ (**SGML**) es una especificación {{Glossary("ISO")}} para definir lenguajes de marcado declarativos. En la Web, {{Glossary("HTML")}} 4, {{Glossary("XHTML")}}, y {{Glossary("XML")}} son lenguajes populares basados en SGML. Vale la pena señalar que desde la quinta edición, HTML ya no está basado en SGML y tiene sus propias reglas de análisis. diff --git a/files/es/glossary/simd/index.md b/files/es/glossary/simd/index.md index 7c41a476055cf4..4aa43f1241a1ea 100644 --- a/files/es/glossary/simd/index.md +++ b/files/es/glossary/simd/index.md @@ -3,6 +3,8 @@ title: SIMD slug: Glossary/SIMD --- +{{GlossarySidebar}} + SIMD (pronunciado "sim-dee" en inglés) son las siglas de **Single Instruction/Multiple Data**, el cual es un tipo de [clasificación de arquitecturas de computadores](https://es.wikipedia.org/wiki/Taxonomía_de_Flynn). SIMD permite realizar la misma operación en distintos datos lo que permite paralelismo mejorando el rendimiento — por ejemplo, en la compresión de gráficos 3D y videos, simulaciones físicas, criptografía y otros entornos. En contraposición, {{Glossary("SISD")}} es una arquitectura que funciona de forma secuencial tanto para datos como para instrucciones. diff --git a/files/es/glossary/sisd/index.md b/files/es/glossary/sisd/index.md index 9d3057efbe3229..40d461a447bf7b 100644 --- a/files/es/glossary/sisd/index.md +++ b/files/es/glossary/sisd/index.md @@ -3,6 +3,8 @@ title: SISD slug: Glossary/SISD --- +{{GlossarySidebar}} + SISD son las siglas de **Single Instruction/Single Data** la cual es una [clasificación de arquitecturas](https://es.wikipedia.org/wiki/Flynn%27s_taxonomy). En las arquitecturas SISD, un único procesador ejecuta una única instrucción sobre un único punto de la memoria. En contraposición {{Glossary("SIMD")}} es una arquitectura que permite realizar una operación sobre distintos puntos de memoria. diff --git a/files/es/glossary/sld/index.md b/files/es/glossary/sld/index.md index 44d2da547bb022..b7e0df6ec3b2d2 100644 --- a/files/es/glossary/sld/index.md +++ b/files/es/glossary/sld/index.md @@ -3,6 +3,8 @@ title: SLD slug: Glossary/SLD --- +{{GlossarySidebar}} + Un dominio de nivel secundario, o SLD (Second Level Domain) es el nombre que se encuentra antes del dominio de nivel primario, o TLD (Top Level Domain). Por ejemplo, en el dominio `mozilla.org`, `mozilla` es el dominio de nivel secundario del TLD `.org`. diff --git a/files/es/glossary/sloppy_mode/index.md b/files/es/glossary/sloppy_mode/index.md index 82afc4014b2b32..5ca6cd261034e9 100644 --- a/files/es/glossary/sloppy_mode/index.md +++ b/files/es/glossary/sloppy_mode/index.md @@ -3,6 +3,8 @@ title: Modo poco riguroso — Sloppy slug: Glossary/Sloppy_mode --- +{{GlossarySidebar}} + {{Glossary("ECMAScript")}} 5 y versiones posteriores permiten que los scripts opten por un nuevo {{jsxref("Strict_mode", "Modo estricto", "", 1)}}, que modifica la semántica de JavaScript de varias formas para mejorar su capacidad de recuperación y facilitar la comprensión de lo que sucede cuando hay problemas. El modo normal, no estricto de JavaScript a veces se denomina **sloppy mode — modo poco riguroso**. Esta no es una designación oficial, pero es probable que la encuentres si pasas tiempo haciendo código JavaScript serio. diff --git a/files/es/glossary/slug/index.md b/files/es/glossary/slug/index.md index d362c40a5c0689..ec8c7ba0b10abc 100644 --- a/files/es/glossary/slug/index.md +++ b/files/es/glossary/slug/index.md @@ -3,6 +3,8 @@ title: Slug slug: Glossary/Slug --- +{{GlossarySidebar}} + Un "slug" es un identificador único parte de una dirección web, típicamente al final de una "URL". por ejemplo, en el contexto de MDN (página actual), el "slug" es la parte del url después de "\/docs/" es decir "Glossary/Slug" Ver también diff --git a/files/es/glossary/smtp/index.md b/files/es/glossary/smtp/index.md index 639ac1f4662a96..cb77634b5a2375 100644 --- a/files/es/glossary/smtp/index.md +++ b/files/es/glossary/smtp/index.md @@ -3,24 +3,17 @@ title: SMTP slug: Glossary/SMTP --- +{{GlossarySidebar}} + **SMTP** (Protocolo de Transferencia de Correo Simple por sus siglas en inglés) es un [protocolo](/es/docs/Glossary/Protocol) utilizado para enviar un nuevo correo. Como [POP3](/es/docs/Glossary/POP) y [NNTP](/es/docs/Glossary/NNTP), es un protocolo dirigido por [estado de máquina](/es/docs/Glossary/State_machine). El protocolo es relativamente simple. Las complicaciones principales incluyen soportar varios mecanismos de autenticación ([GSSAPI](http://en.wikipedia.org/wiki/Generic_Security_Services_Application_Program_Interface), [CRAM-MD5](http://en.wikipedia.org/wiki/CRAM-MD5), [NTLM](http://en.wikipedia.org/wiki/NTLM), MSN, AUTH LOGIN, AUTH PLAIN, etc.), manejo de respuestas de error, y retroceder cuando los mecanismos de autenticación fallan (p. ej., el servidor asegura que soporta un mecanismo, pero no). - +## Véase también + +- [SMTP](https://es.wikipedia.org/wiki/Protocolo_para_transferencia_simple_de_correo) en Wikipedia +- [Glosario de MDN Web Docs](/es/docs/Glossary) + - {{Glossary("NNTP")}} + - {{Glossary("POP", "POP3")}} + - {{Glossary("Protocol", "protocolo")}} + - {{Glossary("State_machine", "estado de máquina")}} diff --git a/files/es/glossary/speculative_parsing/index.md b/files/es/glossary/speculative_parsing/index.md index a63432ede4ac83..74553a3ca108ea 100644 --- a/files/es/glossary/speculative_parsing/index.md +++ b/files/es/glossary/speculative_parsing/index.md @@ -3,6 +3,8 @@ title: Optimizar sus páginas para análisis especulativo slug: Glossary/Speculative_parsing --- +{{GlossarySidebar}} + Tradicionalmente en los navegadores el analizador de HTML corre en el hilo de ejecución principal y se queda bloqueado después de una etiqueta \ hasta que el código se haya recuperado y ejecutado. El analizador de HTML de Firefox 4 y posteriores soporta análisis especulativo fuera del hilo de ejecución principal. Este analiza anticipadamente mientras el codigo está siendo descargado y ejecutado. Como en Firefox 3.5 y 3.6, el analizador de HTML es el que inicia la carga especulativa de código, las hojas de estilos y las imagenes que va encontrando en el flujo de la página. Sin embargo en Firefox 4 y posteriores el analizador de HTML también ejecuta el algoritmo especulativo de la construcción del árbol HTML. La ventaja es que cuando lo especulado tiene exito, no hay necesidad de reanalizar la parte del archivo de entrada que ya fue analizada junto la descarga de código, hojas de estilo y las imágenes. La desventaja es que se ha realizado un trabajo inútil cuando la especulación fracasa. Este documento le ayuda a evitar este tipo de situaciones que hacen que la especulación falle y ralentize la carga de la página. diff --git a/files/es/glossary/sql/index.md b/files/es/glossary/sql/index.md index d676c8c60f4b4c..38cab7ecf416b5 100644 --- a/files/es/glossary/sql/index.md +++ b/files/es/glossary/sql/index.md @@ -5,6 +5,8 @@ l10n: sourceCommit: d2a9f2e26a8139d4bb270d7dc3cddd8b848719fe --- +{{GlossarySidebar}} + **SQL** por sus siglas en inglés significa Lenguaje de Consulta Estructurada (Structured Query Language), es un lenguaje de programación diseñado para actualizar, obtener, y calcular información en bases de datos relacionales. ## Véase también diff --git a/files/es/glossary/statement/index.md b/files/es/glossary/statement/index.md index 9f721bb4fc1f38..9f63e8bc4595f9 100644 --- a/files/es/glossary/statement/index.md +++ b/files/es/glossary/statement/index.md @@ -3,6 +3,8 @@ title: Sentencias slug: Glossary/Statement --- +{{GlossarySidebar}} + En un lenguaje de programación, una **sentencia** es una línea de código al mando de una tarea Cada programa consiste en una secuencia de sentencias. ## Aprender más diff --git a/files/es/glossary/static_typing/index.md b/files/es/glossary/static_typing/index.md index 00c3b3306d7a5a..2c379470ab6155 100644 --- a/files/es/glossary/static_typing/index.md +++ b/files/es/glossary/static_typing/index.md @@ -3,6 +3,8 @@ title: Tipificación estática slug: Glossary/Static_typing --- +{{GlossarySidebar}} + Un lenguaje de **tipo estático** es un lenguaje (como Java, C, o C++) en donde los tipos de variables se conocen en tiempo de compilación. En la mayoria de estos lenguajes, los tipos deben ser expresamente indicados por el programador; en otros casos (como en OCaml), la inferencia de tipos permite al programador no indicar sus tipos de variables. ## Learn more diff --git a/files/es/glossary/string/index.md b/files/es/glossary/string/index.md index b13a840a98647b..23b2387c4786dd 100644 --- a/files/es/glossary/string/index.md +++ b/files/es/glossary/string/index.md @@ -3,6 +3,8 @@ title: String slug: Glossary/String --- +{{GlossarySidebar}} + En cualquier lenguaje de programación, un string es una secuencia de {{Glossary("character","caracteres")}} usado para representar el texto. En {{Glossary("JavaScript","JavaScript")}}, un String es uno de los {{Glossary("Primitivo", "valores primitivos")}} y el objeto {{jsxref("String")}} es un {{Glossary("wrapper","envoltorio")}} alrededor de un String primitivo. diff --git a/files/es/glossary/svg/index.md b/files/es/glossary/svg/index.md index 00dfc989574140..89aa19e87e1f68 100644 --- a/files/es/glossary/svg/index.md +++ b/files/es/glossary/svg/index.md @@ -3,6 +3,8 @@ title: SVG slug: Glossary/SVG --- +{{GlossarySidebar}} + Gráficos vectoriales escalables (del inglés _**S**calable **V**ector **G**raphics_) o **SVG** es un formato de imagen vectorial 2D basado en una sintaxis de {{Glossary("XML")}} . {{Glossary("W3C")}} comenzó a trabajar en SVG a finales de la década de 1990, pero SVG solo se hizo popular cuando {{Glossary("Microsoft Internet Explorer", "Internet Explorer")}} 9 salió con soporte para SVG. Todos los principales {{Glossary("browser","navegadores")}} ahora son compatibles con SVG. diff --git a/files/es/glossary/svn/index.md b/files/es/glossary/svn/index.md index d86450ac85794a..b85ff0321786de 100644 --- a/files/es/glossary/svn/index.md +++ b/files/es/glossary/svn/index.md @@ -3,6 +3,8 @@ title: SVN slug: Glossary/SVN --- +{{GlossarySidebar}} + Apache Subversion (**SVN**) es un sistema ({{Glossary("SCM")}}) de código abierto de control de almacenamiento. Permite a los desarrolladores mantener un historial de modificaciones de texto y código. Aunque SVN también puede manejar archivos binarios, no recomendamos su utilización para tales archivos. ## Saber más diff --git a/files/es/glossary/symmetric-key_cryptography/index.md b/files/es/glossary/symmetric-key_cryptography/index.md index 077474268b435b..0ba8ca2bfc2faf 100644 --- a/files/es/glossary/symmetric-key_cryptography/index.md +++ b/files/es/glossary/symmetric-key_cryptography/index.md @@ -3,6 +3,8 @@ title: Criptografía de clave simétrica slug: Glossary/Symmetric-key_cryptography --- +{{GlossarySidebar}} + La criptografía de clave simétrica es un término utilizado para los algoritmos criptográficos que utilizan la misma clave para el cifrado y el descifrado. La clave se suele llamar "clave simétrica" o "clave secreta". Esto generalmente se contrasta con {{Glossary ("public-key cryptography","criptografía de clave pública")}} en el que las claves se generan en pares, y la transformación realizada por una clave solo se puede revertir utilizando la otra clave. diff --git a/files/es/glossary/synchronous/index.md b/files/es/glossary/synchronous/index.md index 0d91d55520fa29..1a833237b9f8dd 100644 --- a/files/es/glossary/synchronous/index.md +++ b/files/es/glossary/synchronous/index.md @@ -3,6 +3,8 @@ title: Sincrónico slug: Glossary/Synchronous --- +{{GlossarySidebar}} + Sincrónico _se_ refiere a la comunicación en tiempo real donde cada lado recibe (y si es necesario, procesa y responde) mensajes instantáneamente (o lo más cerca posible a instantáneamente). Un ejemplo humano es el teléfono — durante una llamada telefónica tiendes a responder a la otra persona inmediatamente. diff --git a/files/es/glossary/tag/index.md b/files/es/glossary/tag/index.md index d1442312b1df4a..acfcf8cfa15c3c 100644 --- a/files/es/glossary/tag/index.md +++ b/files/es/glossary/tag/index.md @@ -3,6 +3,8 @@ title: Etiqueta slug: Glossary/Tag --- +{{GlossarySidebar}} + En {{Glossary("HTML")}} una etiqueta es usada para crear un {{Glossary("elemento")}}. El **nombre** de un elemento HTML es el **nombre** utilizado entre paréntesis angulares así como la etiqueta `

` para el párrafo. Tenga en cuenta que el nombre de la etiqueta de cierre está precedido por un carácter de barra inclinada, `

`, y que en los elementos vacíos la etiqueta final no es necesaria ni permitida. Si no se mencionan atributos, se utilizan valores por defecto en cada caso. ## Aprende más diff --git a/files/es/glossary/tcp/index.md b/files/es/glossary/tcp/index.md index bff628ee0aef84..86e4f3482438b5 100644 --- a/files/es/glossary/tcp/index.md +++ b/files/es/glossary/tcp/index.md @@ -3,6 +3,8 @@ title: TCP slug: Glossary/TCP --- +{{GlossarySidebar}} + **TCP** (**Protocolo de Control de Transmisión**, por sus siglas en inglés _Transmission Control Protocol_) es {{Glossary("protocol","protocolo")}} de red importante que permite que dos anfitriones (_hosts_) se conecten e intercambien flujos de datos. TCP garantiza la entrega de datos y {{Glossary("Packet","paquetes")}} en el mismo orden en que se enviaron. Vint Cerf y Bob Kahn, científicos de DARPA por aquél entonces, diseñaron TCP en la década de los 70. El rol de TCP es garantizar que los paquetes se entreguen de forma confiable y sin errores. TCP tiene control de concurrencia, lo que significa que las solicitudes iniciales serán pequeñas, aumentando de tamaño a los niveles de ancho de banda que los ordenadores, servidores y redes puedan soportar. diff --git a/files/es/glossary/three_js/index.md b/files/es/glossary/three_js/index.md index 2645097c67e67c..2014330031a0bd 100644 --- a/files/es/glossary/three_js/index.md +++ b/files/es/glossary/three_js/index.md @@ -3,6 +3,8 @@ title: Three js slug: Glossary/Three_js --- +{{GlossarySidebar}} + three.js es un motor {{Glossary("WebGL")}} basado en {{Glossary("JavaScript")}} que puede ejecutar juegos con GPU y otras aplicaciones con gráficos directamente desde el {{Glossary("browser")}} La biblioteca three.js proporciona muchas funciones y {{Glossary("API","APIs")}} para dibujar escenas 3D en su navegador. diff --git a/files/es/glossary/truthy/index.md b/files/es/glossary/truthy/index.md index 2cca02ca269717..67c9e45a63cd15 100644 --- a/files/es/glossary/truthy/index.md +++ b/files/es/glossary/truthy/index.md @@ -3,6 +3,8 @@ title: Truthy slug: Glossary/Truthy --- +{{GlossarySidebar}} + En {{Glossary("JavaScript")}}, un **valor verdadero** es un valor que se considera `true/verdadero` cuando es evaluado en un contexto {{Glossary("Booleano")}}. Todos los valores son verdaderos a menos que se definan como {{Glossary("Falso", "falso")}} (es decir, excepto `false`, `0`, `""`, `null`, `undefined`, y `NaN`). {{Glossary("JavaScript")}} usa {{Glossary("Type_Conversion", "coerción")}} en los contextos Booleanos. @@ -28,5 +30,3 @@ if (-Infinity) - {{Glossary("Falsy")}} - {{Glossary("Type_Conversion", "Coercion")}} - {{Glossary("Boolean")}} - -{{QuickLinksWithSubpages("/es/docs/Glossary")}} diff --git a/files/es/glossary/type/index.md b/files/es/glossary/type/index.md index 9be84acf9fa66c..1162100fbac4b3 100644 --- a/files/es/glossary/type/index.md +++ b/files/es/glossary/type/index.md @@ -3,6 +3,8 @@ title: Type slug: Glossary/Type --- +{{GlossarySidebar}} + El **tipo** (_type_ o _data type_) es una característica of una {{glossary("value", "valor")}} que afecta al tipo de datos que puede almacenar; por ejemplo, en JavaScript un {{domxref("Boolean")}} solo tiene valores `true`/`false`, mientras que un {{domxref("String")}} contiene cadenas de texto, un {{domxref("Number")}} contiene números de cualquier tipo, y así sucesivamente. El tipo de datos de un valor también afecta a qué operaciones son válidas en ese valor. Por ejemplo, un entero puede multiplicarse por un entero, pero no por una cadena. diff --git a/files/es/glossary/type_coercion/index.md b/files/es/glossary/type_coercion/index.md index e428798af5d628..29344c2cfa8371 100644 --- a/files/es/glossary/type_coercion/index.md +++ b/files/es/glossary/type_coercion/index.md @@ -3,6 +3,8 @@ title: Coerción slug: Glossary/Type_coercion --- +{{GlossarySidebar}} + La coerción es la conversión automática o implicita de valores de un tipo de dato a otro (Ejemplo: de cadena de texto a número). La conversión es similar a la coerción porque ambas convierten valores de un tipo de dato a otro pero con una diferencia clave - la coerción es implícita mientras que la conversión puede ser implícita o explícita. ## Examples diff --git a/files/es/glossary/ui/index.md b/files/es/glossary/ui/index.md index 94d60f76642c70..a4fc1217cc978f 100644 --- a/files/es/glossary/ui/index.md +++ b/files/es/glossary/ui/index.md @@ -3,6 +3,8 @@ title: IU slug: Glossary/UI --- +{{GlossarySidebar}} + La _Interfaz de Usuario_ (IU) es el medio que facilita la interacción entre el usuario y la máquina. En el campo de la informática, puede ser un teclado, un joystick, una pantalla, o un programa. En el caso del software, puede ser una entrada de línea de comandos, una página web, un formulario, o el front-end de cualquier aplicación. ## Saber más diff --git a/files/es/glossary/undefined/index.md b/files/es/glossary/undefined/index.md index 6089352be220b0..546144df0c38fe 100644 --- a/files/es/glossary/undefined/index.md +++ b/files/es/glossary/undefined/index.md @@ -3,6 +3,8 @@ title: undefined slug: Glossary/Undefined --- +{{GlossarySidebar}} + Un valor **{{Glossary("primitivo")}}** automáticamente asignado a las **variables** que solo han sido declarados o a los **{{Glossary("Argument","argumentos")}}** formales para los cuales no existe argumentos reales. ## Aprender más diff --git a/files/es/glossary/unicode/index.md b/files/es/glossary/unicode/index.md index 14db453ebe2874..c7fd72b4395c10 100644 --- a/files/es/glossary/unicode/index.md +++ b/files/es/glossary/unicode/index.md @@ -3,6 +3,8 @@ title: Unicode slug: Glossary/Unicode --- +{{GlossarySidebar}} + Unicode es un {{Glossary("Character set", "conjunto de caracteres")}} estándar que numera y define {{Glossary("Character", "caracteres")}} de diferentes idiomas, sistemas de escritura y símbolos. Al asignar un número a cada caracter, los programadores pueden crear {{Glossary("Character encoding", "codificaciones de caracteres")}}, para permitir que las computadoras almacenen, procesen y transmitan cualquier combinación de idiomas en el mismo archivo o programa. Antes de Unicode, era difícil y propenso a errores mezclar idiomas en los mismos datos. Por ejemplo, un juego de caracteres almacenaría caracteres japoneses y otro almacenaría el alfabeto árabe. Si no estuviera claramente marcado qué partes de los datos estaban en qué juego de caracteres, otros programas y computadoras mostrarían el texto incorrectamente o lo dañarían durante el procesamiento. Si alguna vez has visto texto en el que caracteres como comillas entrecruzadas (`“”`) fueron reemplazadas por un galimatías como `£`, entonces has visto este problema, conocido como [Mojibake](https://es.wikipedia.org/wiki/Mojibake). diff --git a/files/es/glossary/uri/index.md b/files/es/glossary/uri/index.md index f732705ed18f53..b726276a5f72d6 100644 --- a/files/es/glossary/uri/index.md +++ b/files/es/glossary/uri/index.md @@ -3,6 +3,8 @@ title: URI slug: Glossary/URI --- +{{GlossarySidebar}} + Un **URI** _(Identificador Uniforme de Recursos de sus siglas en inglés: Uniform Resource Identifier)_ es una cadena que se refiere a un recurso. Los más comunes son {{Glossary("URL","URLs")}}, que identifican el recurso dando su ubicación en la Web. {{Glossary("URN","URNs")}}, por el contrario, se refiere a un recurso por un nombre, en un espacio de nombres determinados, como el ISBN(International Standard Book Number) de un libro. ## Aprende más diff --git a/files/es/glossary/url/index.md b/files/es/glossary/url/index.md index 1f8d93f3e33537..02cbe942d156dd 100644 --- a/files/es/glossary/url/index.md +++ b/files/es/glossary/url/index.md @@ -3,6 +3,8 @@ title: URL slug: Glossary/URL --- +{{GlossarySidebar}} + La «**_Uniform Resource Locator_**» (**URL** o _Localizadora Uniforme de Recursos_ en Español) es una cadena de texto que especifica dónde se puede encontrar un recurso (como una página web, una imagen o un video) en Internet. En el contexto de {{Glossary("HTTP")}}, las URLs se denominan "dirección web" o "enlace". Tu {{Glossary("browser", "navegador")}} muestra las URLs en su barra de direcciones, por ejemplo: `https://developer.mozilla.org` — Algunos navegadores muestran solo la parte de una URL después de "//", es decir, el {{Glossary("Domain name", "Nombre de dominio")}}. diff --git a/files/es/glossary/utf-8/index.md b/files/es/glossary/utf-8/index.md index 97567fa1460c74..cc335f0779dd28 100644 --- a/files/es/glossary/utf-8/index.md +++ b/files/es/glossary/utf-8/index.md @@ -3,6 +3,8 @@ title: UTF-8 slug: Glossary/UTF-8 --- +{{GlossarySidebar}} + UTF-8 (UCS Transformation Format 8) es la {{Glossary("Character encoding", "Codificación de caracteres")}} más común en la red. El número de bytes que representan un carácter pueden ser desde uno hasta cuatro. UTF-8 es retrocompatible con {{Glossary("ASCII")}} y puede representar cualquier carácter Unicode estandar. Los primeros 128 carácteres UTF-8 se ajustan a los 128 primeros carácteres ASCII, lo cual significa que los textos escritos en ASCII son válidos en UTF-8. El resto de caracteres usan de dos a cuatro bytes. Cada byte reserva unos bits para albergar información sobre la codificación. Como los caracteres que no son ASCII necesitan más de un byte cuando son almacenados, corren el riesgo de corromperse si estos bytes son separados y no se vuelven a juntar. diff --git a/files/es/glossary/ux/index.md b/files/es/glossary/ux/index.md index 540a0a3c0546b9..75e5339f23cff1 100644 --- a/files/es/glossary/ux/index.md +++ b/files/es/glossary/ux/index.md @@ -3,6 +3,8 @@ title: UX slug: Glossary/UX --- +{{GlossarySidebar}} + **UX** es un acrónimo de User eXperience. Es el estudio de la interacción entre usuarios y un sistema. Su objetivo es hacer que un sistema sea fácil de interactuar desde el punto de vista del usuario. El sistema puede ser cualquier tipo de producto o aplicación con el que un usuario final deba interactuar. Los estudios de UX realizados en una página web, por ejemplo, pueden demostrar si es fácil para los usuarios entender la página, navegar a diferentes áreas y completar tareas comunes, y dónde dichos procesos podrían tener menos fricciones. diff --git a/files/es/glossary/validator/index.md b/files/es/glossary/validator/index.md index f05b9846c136ae..62370b8083de3e 100644 --- a/files/es/glossary/validator/index.md +++ b/files/es/glossary/validator/index.md @@ -3,6 +3,8 @@ title: Validador slug: Glossary/Validator --- +{{GlossarySidebar}} + Un validador es un programa que comprueba errores de sintaxis en el código. Las validadores pueden ser creados para cualquier formato o lenguaje, pero en este contexto se habla de herramientas que comprueban {{Glossary("HTML")}}, {{Glossary("CSS")}}, y {{Glossary("XML")}}. ## Saber más diff --git a/files/es/glossary/value/index.md b/files/es/glossary/value/index.md index 68fa8699db409f..36e8b2e4634ce6 100644 --- a/files/es/glossary/value/index.md +++ b/files/es/glossary/value/index.md @@ -3,6 +3,8 @@ title: Valor slug: Glossary/Value --- +{{GlossarySidebar}} + {{jsSidebar}} En el contexto de datos o un objeto **{{Glossary("Wrapper", "wrapper")}}** alrededor de esos datos, el valor es el **{{Glossary("Primitive", "valor primitivo")}}** que contiene el contenedor de objetos. En el contexto de una **{{Glossary("Variable", "variable")}}** o **{{Glossary("Property", "property")}}**, el El valor puede ser primitivo o **{{Glossary("Object reference", "Referencia de objeto")}}**. diff --git a/files/es/glossary/variable/index.md b/files/es/glossary/variable/index.md index 5241abd86c2d9b..3ea7f03395f432 100644 --- a/files/es/glossary/variable/index.md +++ b/files/es/glossary/variable/index.md @@ -3,6 +3,8 @@ title: Variable slug: Glossary/Variable --- +{{GlossarySidebar}} + {{jsSidebar}} Una variable es una ubicación nombrada para almacenar un {{Glossary("Value", "valor")}}. De esta manera se puede acceder a un valor impredecible por medio de un nombre predeterminado. diff --git a/files/es/glossary/vendor_prefix/index.md b/files/es/glossary/vendor_prefix/index.md index 670133d188f901..0477266bf5ea66 100644 --- a/files/es/glossary/vendor_prefix/index.md +++ b/files/es/glossary/vendor_prefix/index.md @@ -3,6 +3,8 @@ title: Vendor Prefix slug: Glossary/Vendor_Prefix --- +{{GlossarySidebar}} + Los proveedores de navegadores a veces agregan prefijos a las propiedades de CSS experimentales o no estándar y las API de JavaScript, por lo que los desarrolladores pueden experimentar con nuevas ideas mientras que, en teoría, evitan que se confíe en sus experimentos y luego rompan el código de los desarrolladores web durante el proceso de estandarización. Los desarrolladores deben esperar para incluir la propiedad sin prefijar hasta que se estandarice el comportamiento del navegador. > **Nota:** Los proveedores de navegadores están trabajando para dejar de usar los prefijos de proveedores para funciones experimentales. Los desarrolladores web los han estado utilizando en sitios web de producción, a pesar de su naturaleza experimental. Esto ha hecho que sea más difícil para los proveedores de navegadores garantizar la compatibilidad y trabajar en nuevas características; También ha sido perjudicial para los navegadores más pequeños que terminan obligados a agregar prefijos de otros navegadores para cargar sitios web populares. @@ -45,5 +47,3 @@ Los prefijos para propiedades y métodos son minúsculas: ### Conocimientos generales - [Vendor prefix](https://es.wikipedia.org/wiki/CSS_hack#Browser_prefixes) on Wikipedia - -{{QuickLinksWithSubpages("/es/docs/Glossary")}} diff --git a/files/es/glossary/viewport/index.md b/files/es/glossary/viewport/index.md index 7f2cca0b359d7b..22c54220feb1f9 100644 --- a/files/es/glossary/viewport/index.md +++ b/files/es/glossary/viewport/index.md @@ -3,6 +3,8 @@ title: Viewport slug: Glossary/Viewport --- +{{GlossarySidebar}} + Un viewport representa la región poligonal (normalmente rectangular) en gráficas de computación que está siendo visualizada en ese instante. En términos de navegadores web, se refiere a la parte del documento que usted está viendo, la cual es actualmente visible en su ventana (o la pantalla, si el documento está siendo visto en modo pantalla completa). El contenido fuera del viewport no es visible en la pantalla hasta que sea desplazado dentro de él. La porción del viewport que se encuentra visible en ese momento se denomina **visual viewport**. Este puede ser más pequeño que el viewport de diseño, por ejemplo, cuando el usuario hace uso del zoom. El viewport de diseño (**layout viewport**), sigue siendo el mismo, pero el visual viewport se empequeñeció. diff --git a/files/es/glossary/void_element/index.md b/files/es/glossary/void_element/index.md index ca804baf11f9db..3ed5963467e0aa 100644 --- a/files/es/glossary/void_element/index.md +++ b/files/es/glossary/void_element/index.md @@ -3,6 +3,8 @@ title: Elemento vacío slug: Glossary/Void_element --- +{{GlossarySidebar}} + Un **elemento vacío** es un {{Glossary("elemento")}} de HTML, SVG, o MathML que **no puede** tener nodos secundarios (es decir, elementos anidados o nodos de texto). Las especificaciones [HTML](https://html.spec.whatwg.org/multipage/), [SVG](https://www.w3.org/TR/SVG2/), y [MathML](https://www.w3.org/TR/MathML3/) definen con precisión lo que cada elemento puede contener. Muchas combinaciones no tienen sentido semántico, por ejemplo un elemento {{HTMLElement("audio")}} anidado dentro de un elemento {{HTMLElement("hr")}}. diff --git a/files/es/glossary/wcag/index.md b/files/es/glossary/wcag/index.md index a0ffdea04dc5d0..d394af61fce6c9 100644 --- a/files/es/glossary/wcag/index.md +++ b/files/es/glossary/wcag/index.md @@ -3,6 +3,8 @@ title: WCAG slug: Glossary/WCAG --- +{{GlossarySidebar}} + Las _Pautas de Accesibilidad para el Contenido Web_ (**WCAG**, por us siglas en inglés) son una recomendación publicada por el grupo {{Glossary("WAI","Web Accessibility Initiative")}} en el {{Glossary("W3C")}}. Describen un conjunto de pautas para hacer que el contenido sea accesible principalmente para personas con discapacidades, pero también para dispositivos de recursos limitados, como los teléfonos móviles. WCAG 2.0, que reemplazó a WCAG 1.0, se publicó como una recomendación del W3C el 11 de diciembre de 2008. Consta de 12 directrices organizadas en 4 principios (perceptibles, operables, comprensibles y robustos) y cada guía tiene criterios de éxito comprobables. diff --git a/files/es/glossary/webkit/index.md b/files/es/glossary/webkit/index.md index dae0362dfb089a..7f92d7e985626a 100644 --- a/files/es/glossary/webkit/index.md +++ b/files/es/glossary/webkit/index.md @@ -3,6 +3,8 @@ title: WebKit slug: Glossary/WebKit --- +{{GlossarySidebar}} + _WebKit_ es un _framework_ (marco o interfaz) que proporciona páginas web "bien formadas" basadas es su lenguaje de marcado. El principal navegador que utiliza este framework es [Safari](/es/docs/Glossary/Apple_Safari), aunque también lo hacen muchos otros navegadores web para dispositivos móviles (debido a que WebKit es muy portable y customizable). WebKit comenzó como una copia del KHTML de KDE y sus librerías KJS, pero desde entonces ha habido una gran multitud de particulares y empresas que han contribuido en su desarrollo (incluyendo KDE, Apple, Google, y Nokia). diff --git a/files/es/glossary/websockets/index.md b/files/es/glossary/websockets/index.md index e7f5e704cf3caa..ec57a004750840 100644 --- a/files/es/glossary/websockets/index.md +++ b/files/es/glossary/websockets/index.md @@ -3,6 +3,8 @@ title: WebSockets slug: Glossary/WebSockets --- +{{GlossarySidebar}} + _WebSocket_ es un {{Glossary("protocolo")}} que permite establecer conexiones {{Glossary("TCP")}} entre el {{Glossary("Server", "servidor")}} y el cliente, permitiendo así el transporte de datos en cualquier momento. Cualquier cliente o servidor de aplicaciones puede usar WebSockets, pero principalmente es usado por {{Glossary("Navegador", "browsers")}} y el servidor web. WebScoket permite enviar datos al cliente sin la necesidad de recibir ningún tipo de notificación, permitiendo la actualización dinámica del contenido. diff --git a/files/es/glossary/webvtt/index.md b/files/es/glossary/webvtt/index.md index 6838af00c93aae..0f22ea77434882 100644 --- a/files/es/glossary/webvtt/index.md +++ b/files/es/glossary/webvtt/index.md @@ -5,6 +5,8 @@ l10n: sourceCommit: 4bd65a01204446af2254bb8864bd22ad87bc86b0 --- +{{GlossarySidebar}} + WebVTT (Pistas de Texto para Videos Web) es una especificación del {{Glossary("W3C")}} para un formato de archivo para crear pistas de texto en combinación con el elemento HTML {{HTMLElement("track")}}. Los archivos WebVTT proporcionan metadatos alineados en el tiempo con contenido de audio o video, como subtítulos para contenido de video, descripciones de video de texto, capítulos para navegación de contenido y más. diff --git a/files/es/glossary/whatwg/index.md b/files/es/glossary/whatwg/index.md index 022b56283025f5..3e36a0b96b36dd 100644 --- a/files/es/glossary/whatwg/index.md +++ b/files/es/glossary/whatwg/index.md @@ -3,6 +3,8 @@ title: WHATWG slug: Glossary/WHATWG --- +{{GlossarySidebar}} + EL ( Grupo de trabajo de tecnología de aplicaciones de hipertexto web) por sus siglas en inglés WHATWG es una organización que mantinene y desarrolla {{Glossary("HTML")}} y {{Glossary("API", "APIs")}} para las aplicaciones Web. Antiguos empleados de Apple, Mozilla y Opera establecieron el WHATWG en el 2004. Los editores de especificación en el WHATWG investigan y recopilan comentarios para los documentos de especificación. El grupo también tiene un pequeño comité de miembros invitados y autorizados para anular o reemplazar editores de especificación. Puedes unirte como un colaborador registrándote en la [lista de correo](https://whatwg.org/mailing-list). diff --git a/files/es/glossary/whitespace/index.md b/files/es/glossary/whitespace/index.md index 11667e45a6c7f0..78d798a021ad54 100644 --- a/files/es/glossary/whitespace/index.md +++ b/files/es/glossary/whitespace/index.md @@ -3,6 +3,8 @@ title: Espacio en blanco slug: Glossary/Whitespace --- +{{GlossarySidebar}} + El **espacio en blanco** es un conjunto de {{Glossary("Caracter", "caracteres")}} que se utiliza para mostrar espacios horizontales o verticales entre otros caracteres. A menudo se utilizan para separar fragmentos en {{Glossary("HTML")}}, {{Glossary("CSS")}}, {{Glossary("JavaScript")}} y otros lenguajes informáticos.Los caracteres de espacio en blanco y su uso varía de un lenguaje a otro. ## En HTML @@ -13,29 +15,11 @@ La [_HTML Living Standard_](https://html.spec.whatwg.org/) especifica 5 caracter La [especificación del lenguaje ECMAScript® 2015](https://www.ecma-international.org/ecma-262/6.0/#sec-white-space) establece varios puntos de código Unicode como espacio en blanco: `U+0009` CARACTERES de TABULACIÓN \, `U+000B` TABULACIÓN DE LÍNEA \, `U+000C` FORM FEED \, `U+0020` ESPACIO \, `U+00A0` ESPACIO SIN ROTURA \, `U+FEFF` ANCHO CERO NO -BREAK SPACE \ y otra categoría "Zs" Cualquier otro punto de código Unicode "Separador, espacio" \. Estos caracteres suelen ser innecesarios para la funcionalidad del código. - +## Véase también + +- [Espacio en blanco ASCII](https://infra.spec.whatwg.org/#ascii-whitespace) +- [Especificación del lenguaje ECMAScript® 2015](https://www.ecma-international.org/ecma-262/6.0/#sec-white-space) +- [Cómo se manejan los espacios en blanco mediante HTML, CSS y el DOM](/es/docs/Web/API/Document_Object_Model/Whitespace) +- [El caracter de espacio en blanco](https://es.wikipedia.org/wiki/El_caracter_de_espacio_en_blanco) en Wikipedia +- [Glosario de MDN Web Docs](/es/docs/Glossary) + - {{Glossary("Character", "Caracter")}} diff --git a/files/es/glossary/world_wide_web/index.md b/files/es/glossary/world_wide_web/index.md index 2f2a83394c1fb2..a22a3691e4b192 100644 --- a/files/es/glossary/world_wide_web/index.md +++ b/files/es/glossary/world_wide_web/index.md @@ -3,6 +3,8 @@ title: World Wide Web slug: Glossary/World_Wide_Web --- +{{GlossarySidebar}} + La _World Wide Web_ —comúnmente conocida como **WWW**, **W3**, o **la Web**— es un sistema interconectado de páginas web públicas accesibles a través de {{Glossary("Internet")}}. La Web no es lo mismo que el Internet: la Web es una de las muchas aplicaciones construidas sobre Internet. Tim Berners-Lee propuso la arquitectura de lo que es conocido como la World Wide Web. Él creó el primer servidor web ({{Glossary("Server","server")}}), el primer navegador de internet ({{Glossary("Browser","browser")}}), y la primera página web, en su computadora del laboratorio de investigación de física del CERN en 1990. En 1991, anunció su creación en el grupo de noticias alt.hypertext, marcando con esto el momento en que la Web se hizo pública. diff --git a/files/es/glossary/wrapper/index.md b/files/es/glossary/wrapper/index.md index c9f7e599fab215..a49ab3d524ec5f 100644 --- a/files/es/glossary/wrapper/index.md +++ b/files/es/glossary/wrapper/index.md @@ -3,24 +3,16 @@ title: Wrapper slug: Glossary/Wrapper --- +{{GlossarySidebar}} + En lenguajes de programación como JavaScript, un wrapper o envoltorio es una función que llama a una o varias funciones, unas veces únicamente por convenio y otras para adaptarlas con el objetivo de hacer una tarea ligeramente diferente. Por ejemplo, las librerías SDK de AWS son un ejemplo de wrappers. -## Saber más - -### Conocimientos generales - -[Wrapper function](https://es.wikipedia.org/wiki/Wrapper_function) on Wikipedia +## Véase también - +- [Wrapper function](https://es.wikipedia.org/wiki/Wrapper_function) on Wikipedia +- [Glosario de MDN Web Docs](/es/docs/Glossary) + - {{Glossary("API")}} + - {{Glossary("Class")}} + - {{Glossary("Function")}} diff --git a/files/es/glossary/xforms/index.md b/files/es/glossary/xforms/index.md index 16adf704bb6a12..88cfcfdde714b4 100644 --- a/files/es/glossary/xforms/index.md +++ b/files/es/glossary/xforms/index.md @@ -3,6 +3,8 @@ title: XForm slug: Glossary/XForms --- +{{GlossarySidebar}} + **XForms** es una norma para la creación de formularios web y el procesamiento de datos de formulario en formato {{glossary("XML")}}. Actualmente ningún navegador soporta Xforms—sugerimos en su lugar utilizar los formularios en [HTML5 forms](/es/docs/Web/Guide/HTML/Forms). ## Saber más diff --git a/files/es/glossary/xhtml/index.md b/files/es/glossary/xhtml/index.md index 475a80025a25ec..c61f0983ad019b 100644 --- a/files/es/glossary/xhtml/index.md +++ b/files/es/glossary/xhtml/index.md @@ -3,6 +3,8 @@ title: XHTML slug: Glossary/XHTML --- +{{GlossarySidebar}} + **XHTML** es a [XML](/es/XML) como [HTML](/es/HTML) es a [SGML](/es/SGML). Es decir, XHTML es un lenguaje de marcado que es similar al HTML, pero con un sintaxis más estricta. Dos versiones de XHTML han sido terminadas por el [W3C](http://www.w3.org/): - [XHTML 1.0](http://www.sidar.org/recur/desdi/traduc/es/xhtml/xhtml11.htm) es HTML4 reformulado como una aplicación XML, y es compatible con versiones anteriores de HTML en casos limitados. diff --git a/files/es/glossary/xml/index.md b/files/es/glossary/xml/index.md index c09e82a9f6930c..559147f3257827 100644 --- a/files/es/glossary/xml/index.md +++ b/files/es/glossary/xml/index.md @@ -3,6 +3,8 @@ title: XML slug: Glossary/XML --- +{{GlossarySidebar}} + _XML_ (eXtensible Markup Language en español **Lenguaje de Marcado eXtensible**) es un lenguaje de marcado genérico especificado por la W3C. La industria de tecnologías de la información (_IT Industry_) utiliza muchos lenguajes de descripción de datos (_data-description language_) que están basados en XML. Las etiquetas XML ó _tags_ son muy similares a las de [HTML](/es/docs/Glossary/HTML), pero en el caso de XML, es mucho más flexible debido a que permite a los usuarios definir sus propias etiquetas. En este sentido XML actúa como un metalenguaje (debido a esto, puede ser usado para definir otros lenguajes como por ejemplo [RSS](/es/docs/Glossary/RSS)). Además de esto, cabe señalar que HTML es un lenguaje de presentación, miestras que XML es un lenguaje descripción de datos. diff --git a/files/es/mdn/writing_guidelines/writing_style_guide/code_style_guide/html/index.md b/files/es/mdn/writing_guidelines/writing_style_guide/code_style_guide/html/index.md new file mode 100644 index 00000000000000..f9b10e71cb2d2b --- /dev/null +++ b/files/es/mdn/writing_guidelines/writing_style_guide/code_style_guide/html/index.md @@ -0,0 +1,143 @@ +--- +title: Pautas para escribir ejemplos de código HTML +slug: MDN/Writing_guidelines/Writing_style_guide/Code_style_guide/HTML +l10n: + sourceCommit: 6aa664dc5ccb5edf0897f99ad5feb59325dff831 +--- + +{{MDNSidebar}} + +Las siguiente pautas cubren cómo escribir ejemplos de código HTML para los documentos web de MDN. + +## Pautas generales para ejemplos de código HTML + +### Eligiendo un formato + +Opiniones sobre la sangría correcta, espacio en blanco, y las longitudes de línea siempre han sido controvertidas. +Las discusiones sobre estos temas son una distracción para la creación y mantenimiento de contenido. + +En documentos web de MDN, usamos [Prettier](https://prettier.io/) como formateador de código para mantener la consistencia del estilo del código (y para evitar discusiones fuera del tema). +Puedes consultar nuestro [Archivo de configuración](https://github.com/mdn/content/blob/main/.prettierrc.json) para conocer las normas vigentes, y leer la [Documentación Prettier](https://prettier.io/docs/en/index.html). + +Prettier formatea todo el código y mantiene el estilo consistente. Sin embargo, hay algunas reglas adicionales que usted debe seguir. + +## Documento HTML completo + +> **Nota:** Las pautas de esta sección solo se aplican cuando necesita mostrar un documento HTML completo. Por lo general, un fragmento es suficiente para demostrar una función. Cuando utilice la [macro EmbedLiveSample](/es/docs/MDN/Writing_guidelines/Page_structures/Code_examples#traditional_live_samples), simplemente incluya el fragmento HTML se insertará automáticamente en un documento HTML completo cuando se muestre. + +### Tipo de documento + +Debes utilizar el doctype HTML5. Es corto, fácil de recordar y compatible con versiones anteriores. + +```html example-good + +``` + +### Idioma del documento + +Establece el idioma del documento usando el atributo [`lang`](/es/docs/Web/HTML/Global_attributes#lang) en tu elemento {{htmlelement("html")}}: + +```html example-good + +``` + +Esto es bueno para la accesibilidad y los motores de búsqueda, ayuda a localizar contenido y recuerda a las personas que deben utilizar las mejores prácticas. + +### Conjunto de caracteres del documento + +También debes definir el conjunto de caracteres de esta manera: + +```html example-good + +``` + +Utilice UTF-8 a menos que tenga una muy buena razón para no hacerlo; Cubrirá todas las necesidades de los caracteres prácticamente independientemente del idioma que esté utilizando en su documento. + +### Metaetiqueta viewport + +Finalmente, siempre debes agregar la metaetiqueta viewport en tu HTML {{HTMLElement("head")}} para que el ejemplo de código tenga más posibilidades de funcionar en dispositivos móviles. Debes incluir al menos lo siguiente en su documento, que podrá modificarse más adelante según sea necesario: + +```html example-good + +``` + +Para mas detalles ver: [Uso de la metaetiqueta viewport para controlar el diseño en navegadores móviles](/es/docs/Web/HTML/Viewport_meta_tag). + +## Atributos + +Debes colocar todos los valores de los atributos en comillas dobles. Es tentador omitir las comillas ya que HTML5 lo permite, pero el marcado es más claro y fácil de leer si las incluye. Por ejemplo, esto es mejor: + +```html example-good +A circular globe icon +``` + +...que esto: + +```html-nolint example-bad +A +``` + +Omitir comillas también puede causar problemas. En el ejemplo anterior, el atributo alt se interpretará como atributos múltiples porque no hay comillas para especificar que "Un icono de globo circular" es un valor de atributo único. + +## Atributos booleanos + +No incluyas valores para atributos booleanos (pero incluye valores para atributos {{glossary("enumerated", "enumerados")}}); simplemente puedes escribir el nombre del atributo para establecerlo. Por ejemplo, puedes escribir: + +```html example-good + +``` + +Este es perfectamente entendible y trabaja bien. Si hay un atributo HTML booleano, el valor es verdadero. Si bien incluir un valor funcionará, no es necesario ni incorrecto: + +```html example-bad + +``` + +## Mayúsculas y minúsculas + +Utilice minúsculas para todos los nombres de elementos y nombres/valores de atributos porque se ve más ordenado y significa que puede escribir el marcado más rápido. Por ejemplo: + +```html example-good +

This looks nice and neat

+``` + +```html-nolint example-bad +

Why is my markup shouting?

+``` + +## Nombres de clases e ID + +Utilice nombres de clase/ID semánticos, y separe multiples palabras con guiones ({{Glossary("kebab_case", "kebab case")}}), No use {{Glossary("camel_case", "camel case")}}. Por ejemplo: + +```html example-good +

Blah blah blah

+``` + +```html example-bad +

Blah blah blah

+``` + +## Referencias de entidades + +No utilice referencias de entidades innecesariamente, utilice el carácter literal siempre que sea posible (aún necesitará caracteres de escape como corchetes y comillas). + +Como ejemplo, podrías simplemente escribir: + +```html example-good +

© 2018 Me

+``` + +En lugar de: + +```html example-bad +

© 2018 Me

+``` + +## Elementos HTML + +Existen algunas reglas para escribir sobre elementos HTML en documentos web de MDN. El cumplimiento de estas reglas produce descripciones coherentes de los elementos y sus componentes y también garantiza la vinculación correcta a la documentación detallada. + +- **Nombres de elementos**: Utilice la macro [`HTMLElement`](https://github.com/mdn/yari/blob/main/kumascript/macros/HTMLElement.ejs), que crea un enlace a los documentos web de MDN. Por ejemplo escribiendo `\{{HTMLElement("title")}}` produce "{{HTMLElement("title")}}". + Si no desea crear un vínculo, **incluya el nombre entre corchetes** y utilice el estilo "Código en línea" (por ejemplo, ``). +- **Nombres de atributos**: Utilice el estilo "Código en línea" para colocar los nombres de los atributos en la `fuente del código`. Además, colóquelos en **negrita** cuando el atributo se mencione junto con una explicación de lo que hace o cuando se use por primera vez en la página. +- **Valores de atributos**: Utilice el estilo "Código en línea" para aplicar código a valores de atributos y no utilice comillas alrededor de valores de cadena. Por ejemplo, "Cuando el atributo `type` de un elemento `input` se establece en `email` o `tel` ...". diff --git a/files/es/orphaned/web/css/ime-mode/index.md b/files/es/orphaned/web/css/ime-mode/index.md index 2308e5cbc99df6..eae75016a49e59 100644 --- a/files/es/orphaned/web/css/ime-mode/index.md +++ b/files/es/orphaned/web/css/ime-mode/index.md @@ -14,7 +14,7 @@ La propiedad `ime-mode` controla el estado del método de entrada del editor par - Se aplica a: campos de texto. - {{ Cssxref("inheritance", "Valor heredado") }}: no - Porcentajes: N/A -- Media: {{ Xref_cssvisual() }} +- Media: {{cssxref("Media/Visual", "visual")}} - {{ Cssxref("computed value", "Valor calculado") }}: ### Sintaxis diff --git a/files/es/orphaned/web/html/element/keygen/index.md b/files/es/orphaned/web/html/element/keygen/index.md index cffc3edf8198a2..1611ed5cfa4457 100644 --- a/files/es/orphaned/web/html/element/keygen/index.md +++ b/files/es/orphaned/web/html/element/keygen/index.md @@ -78,12 +78,3 @@ He aquí un ejemplo de envío de formularios, como sería entregado a un program - [Sample form with DSA KEYGEN element and PQG Parameters](https://bugzilla.mozilla.org/attachment.cgi?id=380750) - [Sample form with DSA KEYGEN element but no PQG Parameters](https://bugzilla.mozilla.org/attachment.cgi?id=380751) - [Sample form with EC KEYGEN element](https://bugzilla.mozilla.org/attachment.cgi?id=380752) - -## Compatibilidad del navegador - -| Navegador | Versión más baja | -| ----------------- | ---------------- | -| Internet Explorer | --- | -| Firefox (Gecko) | 1.0 (1.0) | -| Opera | 3.0 | -| Safari (WebKit) | 1.2 (125) | diff --git a/files/es/web/api/console/assert/index.md b/files/es/web/api/console/assert_static/index.md similarity index 96% rename from files/es/web/api/console/assert/index.md rename to files/es/web/api/console/assert_static/index.md index 42e325c3058add..254c28ed795cbd 100644 --- a/files/es/web/api/console/assert/index.md +++ b/files/es/web/api/console/assert_static/index.md @@ -1,6 +1,7 @@ --- title: Console.assert() -slug: Web/API/console/assert +slug: Web/API/console/assert_static +original_slug: Web/API/console/assert --- {{APIRef("Console API")}}{{Non-standard_header}} diff --git a/files/es/web/api/console/count/index.md b/files/es/web/api/console/count_static/index.md similarity index 96% rename from files/es/web/api/console/count/index.md rename to files/es/web/api/console/count_static/index.md index 8cb95fe560d771..bc46a5e8495ffa 100644 --- a/files/es/web/api/console/count/index.md +++ b/files/es/web/api/console/count_static/index.md @@ -1,6 +1,7 @@ --- title: Console.count() -slug: Web/API/console/count +slug: Web/API/console/count_static +original_slug: Web/API/console/count --- {{APIRef("Console API")}} diff --git a/files/es/web/api/console/dir/index.md b/files/es/web/api/console/dir_static/index.md similarity index 94% rename from files/es/web/api/console/dir/index.md rename to files/es/web/api/console/dir_static/index.md index ab80b51b68f34a..2e85aac10e55d5 100644 --- a/files/es/web/api/console/dir/index.md +++ b/files/es/web/api/console/dir_static/index.md @@ -1,6 +1,7 @@ --- title: Console.dir() -slug: Web/API/console/dir +slug: Web/API/console/dir_static +original_slug: Web/API/console/dir --- {{APIRef("Console API")}} diff --git a/files/es/web/api/console/dirxml/index.md b/files/es/web/api/console/dirxml_static/index.md similarity index 90% rename from files/es/web/api/console/dirxml/index.md rename to files/es/web/api/console/dirxml_static/index.md index f6510638d514d7..3127bc990e5b40 100644 --- a/files/es/web/api/console/dirxml/index.md +++ b/files/es/web/api/console/dirxml_static/index.md @@ -1,6 +1,7 @@ --- title: Console.dirxml() -slug: Web/API/console/dirxml +slug: Web/API/console/dirxml_static +original_slug: Web/API/console/dirxml --- {{APIRef("Console API")}}{{Non-standard_header}} diff --git a/files/es/web/api/console/error/index.md b/files/es/web/api/console/error_static/index.md similarity index 95% rename from files/es/web/api/console/error/index.md rename to files/es/web/api/console/error_static/index.md index 0f59aaa751a714..05ccff54026c3a 100644 --- a/files/es/web/api/console/error/index.md +++ b/files/es/web/api/console/error_static/index.md @@ -1,6 +1,7 @@ --- title: console.error() -slug: Web/API/console/error +slug: Web/API/console/error_static +original_slug: Web/API/console/error --- {{APIRef("Console API")}} diff --git a/files/es/web/api/console/info/index.md b/files/es/web/api/console/info_static/index.md similarity index 94% rename from files/es/web/api/console/info/index.md rename to files/es/web/api/console/info_static/index.md index 717bcd674535ce..6b7d687dd5c829 100644 --- a/files/es/web/api/console/info/index.md +++ b/files/es/web/api/console/info_static/index.md @@ -1,6 +1,7 @@ --- title: Console.info() -slug: Web/API/console/info +slug: Web/API/console/info_static +original_slug: Web/API/console/info --- {{APIRef("Console API")}}Emite un mensaje informativo a la Consola Web. En Firefox y Chrome, se muestra un pequeño ícono "i" junto a estos elementos en el registro de la Consola Web. diff --git a/files/es/web/api/console/log/index.md b/files/es/web/api/console/log_static/index.md similarity index 95% rename from files/es/web/api/console/log/index.md rename to files/es/web/api/console/log_static/index.md index c7f71c07f986c2..77689bb06dc5f0 100644 --- a/files/es/web/api/console/log/index.md +++ b/files/es/web/api/console/log_static/index.md @@ -1,6 +1,7 @@ --- title: Console.log() -slug: Web/API/console/log +slug: Web/API/console/log_static +original_slug: Web/API/console/log --- {{APIRef("Console API")}}Muestra un mensaje en la consola web (o del intérprete JavaScript). diff --git a/files/es/web/api/console/table/index.md b/files/es/web/api/console/table_static/index.md similarity index 98% rename from files/es/web/api/console/table/index.md rename to files/es/web/api/console/table_static/index.md index cfae27c2285596..38c385b286ce63 100644 --- a/files/es/web/api/console/table/index.md +++ b/files/es/web/api/console/table_static/index.md @@ -1,6 +1,7 @@ --- title: Console.table() -slug: Web/API/console/table +slug: Web/API/console/table_static +original_slug: Web/API/console/table --- {{APIRef("Console API")}} diff --git a/files/es/web/api/console/time/index.md b/files/es/web/api/console/time_static/index.md similarity index 94% rename from files/es/web/api/console/time/index.md rename to files/es/web/api/console/time_static/index.md index ff07f69a525929..26cba992028832 100644 --- a/files/es/web/api/console/time/index.md +++ b/files/es/web/api/console/time_static/index.md @@ -1,6 +1,7 @@ --- title: Console.time() -slug: Web/API/console/time +slug: Web/API/console/time_static +original_slug: Web/API/console/time --- {{APIRef("Console API")}} diff --git a/files/es/web/api/console/timeend/index.md b/files/es/web/api/console/timeend_static/index.md similarity index 90% rename from files/es/web/api/console/timeend/index.md rename to files/es/web/api/console/timeend_static/index.md index 20229cb5ad2a1f..0aeea0e1b8a1f1 100644 --- a/files/es/web/api/console/timeend/index.md +++ b/files/es/web/api/console/timeend_static/index.md @@ -1,6 +1,7 @@ --- title: Console.timeEnd() -slug: Web/API/console/timeEnd +slug: Web/API/console/timeend_static +original_slug: Web/API/console/timeEnd --- {{APIRef("Console API")}} diff --git a/files/es/web/api/console/trace/index.md b/files/es/web/api/console/trace_static/index.md similarity index 91% rename from files/es/web/api/console/trace/index.md rename to files/es/web/api/console/trace_static/index.md index 98436744711696..38e0b13f365f06 100644 --- a/files/es/web/api/console/trace/index.md +++ b/files/es/web/api/console/trace_static/index.md @@ -1,6 +1,7 @@ --- title: Console.trace() -slug: Web/API/console/trace +slug: Web/API/console/trace_static +original_slug: Web/API/console/trace --- {{APIRef("Console API")}}{{Non-standard_header}} diff --git a/files/es/web/api/console/warn/index.md b/files/es/web/api/console/warn_static/index.md similarity index 95% rename from files/es/web/api/console/warn/index.md rename to files/es/web/api/console/warn_static/index.md index 322c086b11c827..6f4d94c550d396 100644 --- a/files/es/web/api/console/warn/index.md +++ b/files/es/web/api/console/warn_static/index.md @@ -1,6 +1,7 @@ --- title: Console.warn() -slug: Web/API/console/warn +slug: Web/API/console/warn_static +original_slug: Web/API/console/warn --- {{APIRef("Console API")}} diff --git a/files/es/web/api/fullscreen_api/index.md b/files/es/web/api/fullscreen_api/index.md index cd80e4016a047a..315cba8f082106 100644 --- a/files/es/web/api/fullscreen_api/index.md +++ b/files/es/web/api/fullscreen_api/index.md @@ -115,20 +115,6 @@ En este código, primero se observa si el atributo `fullscreenElement` de {{ dom Si el modo de pantalla completa está activado (`fullscreenElement` no es `null`), llamamos a la función {{ domxref("document.exitFullscreen()") }}. -## Prefijado - -De momento, no todos los navegadores están implementando la versión sin prefijo de la API. Aquí está la tabla que resume los prefijos y diferencias de nombres entre ellos: - -| Estándar | Blink (Chrome y Opera) | Gecko (Firefox) | Internet Explorer 11 | Edge | Safari (WebKit) | -| ------------------------------------------ | --------------------------- | ------------------------ | ----------------------- | --------------------------- | --------------------------- | -| {{domxref("Document.fullscreen")}} | `webkitIsFullScreen` | `mozFullScreen` | _-_ | `webkitIsFullScreen` | `webkitIsFullScreen` | -| {{domxref("Document.fullscreenEnabled")}} | `webkitFullscreenEnabled` | `mozFullScreenEnabled` | `msFullscreenEnabled` | `webkitFullscreenEnabled` | `webkitFullscreenEnabled` | -| {{domxref("Document.fullscreenElement")}} | `webkitFullscreenElement` | `mozFullScreenElement` | `msFullscreenElement` | `webkitFullscreenElement` | `webkitFullscreenElement` | -| {{domxref("Document.onfullscreenchange")}} | `onwebkitfullscreenchange` | `onmozfullscreenchange` | `onmsfullscreenchange` | `onwebkitfullscreenchange` | `onwebkitfullscreenchange` | -| {{domxref("Document.onfullscreenerror")}} | `onwebkitfullscreenerror` | `onmozfullscreenerror` | `onmsfullscreenerror` | `onwebkitfullscreenerror` | `onwebkitfullscreenerror` | -| {{domxref("Document.exitFullscreen()")}} | `webkitExitFullscreen()` | `mozCancelFullScreen()` | `msExitFullscreen()` | `webkitExitFullscreen()` | `webkitExitFullscreen()` | -| {{domxref("Element.requestFullscreen()")}} | `webkitRequestFullscreen()` | `mozRequestFullScreen()` | `msRequestFullscreen()` | `webkitRequestFullscreen()` | `webkitRequestFullscreen()` | - ## Especificaciones {{Specifications}} diff --git a/files/es/web/api/webgl_api/index.md b/files/es/web/api/webgl_api/index.md index f4fb883881bcbb..00475e24516a6c 100644 --- a/files/es/web/api/webgl_api/index.md +++ b/files/es/web/api/webgl_api/index.md @@ -43,12 +43,6 @@ WebGL trae gráficos en 3D para la Web mediante la introducción de una API que - [Planeta WebGL](http://planet-webgl.org/) - : Un agregador de RSS para las personas que pertenecen a la comunidad WebGL. -## Compatibilidad de los navegadores - -| Navegador | Compatibilidad básica | `.getContext(context)` | -| ----------------- | ----------------------- | ---------------------- | -| Internet Explorer | --- | --- | -| Firefox (Gecko) | 4.0 (2) | experimental-webgl | -| Opera | --- | --- | -| Chrome | 9 | experimental-webgl | -| Safari | 6 (en Safari nightlies) | experimental-webgl | +## Compatibilidad con navegadores + +{{Compat}} diff --git a/files/es/web/api/window/scrolly/index.md b/files/es/web/api/window/scrolly/index.md index 68ea9aa5d44a2d..260371baa8c5a9 100644 --- a/files/es/web/api/window/scrolly/index.md +++ b/files/es/web/api/window/scrolly/index.md @@ -47,13 +47,13 @@ var isCSS1Compat = (document.compatMode || "") === "CSS1Compat"; var x = supportPageOffset ? window.pageXOffset : isCSS1Compat - ? document.documentElement.scrollLeft - : document.body.scrollLeft; + ? document.documentElement.scrollLeft + : document.body.scrollLeft; var y = supportPageOffset ? window.pageYOffset : isCSS1Compat - ? document.documentElement.scrollTop - : document.body.scrollTop; + ? document.documentElement.scrollTop + : document.body.scrollTop; ``` ## Especificación diff --git a/files/es/web/api/formdata/using_formdata_objects/index.md b/files/es/web/api/xmlhttprequest_api/using_formdata_objects/index.md similarity index 98% rename from files/es/web/api/formdata/using_formdata_objects/index.md rename to files/es/web/api/xmlhttprequest_api/using_formdata_objects/index.md index 13b24d39b176e7..6e21d20896adfd 100644 --- a/files/es/web/api/formdata/using_formdata_objects/index.md +++ b/files/es/web/api/xmlhttprequest_api/using_formdata_objects/index.md @@ -1,6 +1,7 @@ --- title: Usando Objetos FormData -slug: Web/API/FormData/Using_FormData_Objects +slug: Web/API/XMLHttpRequest_API/Using_FormData_Objects +original_slug: Web/API/FormData/Using_FormData_Objects --- Los objetos `FormData` le permiten compilar un conjunto de pares clave/valor para enviar mediante `XMLHttpRequest`. Están destinados principalmente para el envío de los datos del formulario, pero se pueden utilizar de forma independiente con el fin de transmitir los datos tecleados. Los datos transmitidos estarán en el mismo formato que usa el método `submit()` del formulario para enviar los datos si el tipo de codificación del formulario se establece en "multipart/form-data". diff --git a/files/es/web/api/xmlhttprequest/using_xmlhttprequest/index.md b/files/es/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md similarity index 99% rename from files/es/web/api/xmlhttprequest/using_xmlhttprequest/index.md rename to files/es/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md index 2ed4765d297368..1d640e85746f19 100644 --- a/files/es/web/api/xmlhttprequest/using_xmlhttprequest/index.md +++ b/files/es/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md @@ -1,6 +1,7 @@ --- title: Utilizando XMLHttpRequest -slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest +slug: Web/API/XMLHttpRequest_API/Using_XMLHttpRequest +original_slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest --- {{APIRef("XMLHttpRequest")}} @@ -474,8 +475,8 @@ formas de _enviar_, y de **subir archivos**: ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" - ? 2 - : 1 + ? 2 + : 1 : 0; this.receiver = oTarget.action; this.status = 0; diff --git a/files/es/web/css/-webkit-mask-box-image/index.md b/files/es/web/css/-webkit-mask-box-image/index.md index 120fb7a5b677b5..1b023fdd960a9a 100644 --- a/files/es/web/css/-webkit-mask-box-image/index.md +++ b/files/es/web/css/-webkit-mask-box-image/index.md @@ -14,7 +14,7 @@ slug: Web/CSS/-webkit-mask-box-image - {{ Xref_cssinitial() }}: none - Se aplica a : Todos los elementos - {{ Xref_cssinherited() }}: no -- Media: {{ Xref_cssvisual() }} +- Media: {{cssxref("Media/Visual", "visual")}} - {{ Xref_csscomputed() }}: tal y como se especfica ## Síntaxis diff --git a/files/es/web/css/-webkit-mask-composite/index.md b/files/es/web/css/-webkit-mask-composite/index.md index 0f0d3752800452..a49f30d74b2c48 100644 --- a/files/es/web/css/-webkit-mask-composite/index.md +++ b/files/es/web/css/-webkit-mask-composite/index.md @@ -12,7 +12,7 @@ La propiedad `-webkit-mask-composite` especifica la forma en la que múltiples i - {{ Xref_cssinitial() }}: source-over - Se aplica a : todos los elementos - {{ Xref_cssinherited() }}: no -- Media: {{ Xref_cssvisual() }} +- Media: {{cssxref("Media/Visual", "visual")}} - {{ Xref_csscomputed() }}: tal y como se especifica. ## Síntaxis diff --git a/files/es/web/css/background-attachment/index.md b/files/es/web/css/background-attachment/index.md index b7919c2365c264..5d72518efd80e0 100644 --- a/files/es/web/css/background-attachment/index.md +++ b/files/es/web/css/background-attachment/index.md @@ -94,18 +94,11 @@ p { ### Especificaciones -- [CSS 1](http://www.w3.org/TR/CSS1#background-attachment) -- [CSS 2.1](http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment) -- [CSS 3](http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-attachment) - -### Compatibilidad de navegadores - -| Navegador | Versión mínima | -| ----------------- | -------------- | -| Internet Explorer | 4 | -| Firefox | 1 | -| Netscape | 6 | -| Opera | 3.5 | +{{Specifications}} + +### Compatibilidad con navegadores + +{{Compat}} ### Ver también diff --git a/files/es/web/css/background-color/index.md b/files/es/web/css/background-color/index.md index 2cb88701c1f546..cf507963661e7d 100644 --- a/files/es/web/css/background-color/index.md +++ b/files/es/web/css/background-color/index.md @@ -65,30 +65,13 @@ background-color: color | transparent | inherit {{EmbedLiveSample("Ejemplos","200","150")}} -### Notas - -(Add links to good colour reference sites here.) - ### Especificaciones -- [CSS 1 (en)](http://www.w3.org/TR/CSS1#background-color) -- [CSS 2.1 (en)](http://www.w3.org/TR/CSS21/colors.html#propdef-background-color) -- [CSS 3 (en)](http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-color) - -### Compatibilidad de navegadores +{{Specifications}} -TBD: This may be removed in favour of a centralized compatibility chart. +### Compatibilidad con navegadores -| Navegador | soporta background-color | -| ------------------- | ------------------------ | -| Internet Explorer 6 | parcialmente | -| Internet Explorer 7 | parcialmente | -| Firefox 1.5 | Sí | -| Firefox 2 | Sí | -| Opera 8.5 | parcialmente | -| Opera 9 | parcialmente | -| Konqueror 3.5 | Sí | -| Safari 2 | Sí | +{{Compat}} ### Ver también diff --git a/files/es/web/css/background-origin/index.md b/files/es/web/css/background-origin/index.md index be98c1d8df4e43..42465d8ee6eb51 100644 --- a/files/es/web/css/background-origin/index.md +++ b/files/es/web/css/background-origin/index.md @@ -54,15 +54,13 @@ div{ - La propiedad background-origin es ignorada si la propiedad background-attachment tiene un valor de fixed. - Si el valor de esta propiedad no es establecido en la propiedad abreviada (shorthand) [background](/es/CSS/background) que es aplicada a el elemento despues de la propiedad background-origin, el valor de esta propiedad sera restablecido a su valor inicial por la propiedad abreviada background. -## Compatibilidad de navegadores +### Especificaciones -| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari | -| -------------- | ------ | --------------- | ----------------- | ----- | --------- | -| Soporte básico | 1.0 | 4.0 (2.0) | 9.0 | 10.5 | 3.0 (522) | +{{Specifications}} -## Especificaciones +### Compatibilidad con navegadores -- [Css fondos y bordes modulo nivel 3](http://dev.w3.org/csswg/css3-background/#the-background-origin)(candidato a recomendación] +{{Compat}} ## Relacionado diff --git a/files/es/web/css/background-position/index.md b/files/es/web/css/background-position/index.md index 1e489df85ca058..34045eb6c8a5da 100644 --- a/files/es/web/css/background-position/index.md +++ b/files/es/web/css/background-position/index.md @@ -87,20 +87,13 @@ Si solo se especifica un valor, se entenderá que es la posición horizontal con } ``` -## Especificaciones +### Especificaciones -- [CSS 1](http://www.w3.org/TR/CSS1#background-position) -- [CSS 2.1](http://www.w3.org/TR/CSS21/colors.html#propdef-background-position) -- [CSS 3](http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-position) +{{Specifications}} -### Compatibilidad +### Compatibilidad con navegadores -| Navegador | Versión mínima | -| ----------------- | -------------- | -| Internet Explorer | 4 | -| Firefox | 1 | -| Netscape | 6 | -| Opera | 3.5 | +{{Compat}} ### Ver también diff --git a/files/es/web/css/background/index.md b/files/es/web/css/background/index.md index 1715c66a83f0ae..46ae0c625d9478 100644 --- a/files/es/web/css/background/index.md +++ b/files/es/web/css/background/index.md @@ -92,20 +92,13 @@ La sintaxis de cada capa es la siguiente: Tomando una declaración válida, la propiedad `background` inicia las propiedades individuales a sus valores iniciales para después asignarles los valores especificadas explícitamente en la declaración. No hay que definir un valor por cada propiedad individual, se cambia solo las que necesitamos en relación al valor por defecto. -## Especificaciones +### Especificaciones -- [CSS 1](http://www.w3.org/TR/CSS1#background) -- [CSS 2.1](http://www.w3.org/TR/CSS21/colors.html#propdef-background) -- [CSS 3](http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background) +{{Specifications}} -## Compatibilidad de navegadores +### Compatibilidad con navegadores -| Navegador | Mínima versión | -| ----------------- | -------------- | -| Internet Explorer | 4 | -| Firefox | 1 | -| Netscape | 6 | -| Opera | 3.5 | +{{Compat}} ## Ver también diff --git a/files/es/web/css/border-bottom-color/index.md b/files/es/web/css/border-bottom-color/index.md index eebbd621ec2a93..4931dd614aded2 100644 --- a/files/es/web/css/border-bottom-color/index.md +++ b/files/es/web/css/border-bottom-color/index.md @@ -3,8 +3,6 @@ title: border-bottom-color slug: Web/CSS/border-bottom-color --- -<< [Volver](/es/Guía_de_referencia_de_CSS) - ### Resumen La propiedad `border-bottom-color` define el color del borde inferior de un elemento, con la ayuda de un valor de color o con la palabra clave `transparent`. @@ -13,7 +11,7 @@ La propiedad `border-bottom-color` define el color del borde inferior de un elem - Se aplica a: todos los elementos - {{ Cssxref("inheritance", "Valor heredado") }}: non - Porcentajes: N/A -- Medio : {{ Xref_cssvisual() }} +- Medio : {{cssxref("Media/Visual", "visual")}} - {{ Cssxref("computed value", "Valor calculado") }}: como se especifique o si proviene de la propiedad {{ Cssxref("color") }}, será el valor {{ Cssxref("color") }}. ### Sintaxis @@ -60,22 +58,12 @@ element { ### Especificaciones -- [CSS 2.1 (en)](http://www.w3.org/TR/CSS21/box.html#propdef-border-bottom-color) -- [CSS 3 (en)](http://www.w3.org/TR/css3-background/#border-bottom) +{{Specifications}} -### Compatibilidades +### Compatibilidad con navegadores -| Navegador | Versión mínima | -| ----------------- | -------------- | -| Internet Explorer | 4 | -| Firefox | 1 | -| Netscape | 6 | -| Opera | 3.5 | +{{Compat}} ### Ver también {{ Cssxref("border-bottom") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-width") }} - -Categorías - -Interwiki Languages diff --git a/files/es/web/css/border-bottom-style/index.md b/files/es/web/css/border-bottom-style/index.md index d778fdbd8e75ec..2abc09363a76ef 100644 --- a/files/es/web/css/border-bottom-style/index.md +++ b/files/es/web/css/border-bottom-style/index.md @@ -13,7 +13,7 @@ slug: Web/CSS/border-bottom-style - Se aplica a: todos los elementos - {{ Cssxref("inheritance", "Valor heredado") }}: no - Porcentajes: N/A -- Medio: {{ Xref_cssvisual() }} +- Medio: {{cssxref("Media/Visual", "visual")}} - {{ Cssxref("computed value", "Valor calculado") }}: como se especificó ### Sintaxis diff --git a/files/es/web/css/border-bottom-width/index.md b/files/es/web/css/border-bottom-width/index.md index 03441000df4de4..bd6ac751b48228 100644 --- a/files/es/web/css/border-bottom-width/index.md +++ b/files/es/web/css/border-bottom-width/index.md @@ -3,8 +3,6 @@ title: border-bottom-width slug: Web/CSS/border-bottom-width --- -<< [Volver](/es/Guía_de_referencia_de_CSS) - ### Resumen `border-bottom-width` define el ancho del borde inferior de una caja. @@ -13,7 +11,7 @@ slug: Web/CSS/border-bottom-width - Se aplica a : todos los elementos - {{ Cssxref("inheritance", "Valor heredado") }}: no - Porcentajes: N/A -- Medio: {{ Xref_cssvisual() }} +- Medio: {{cssxref("Media/Visual", "visual")}} - {{ Cssxref("computed value", "Valor calculado") }}: largo absoluto o '0' si el estilo es `none` o `hidden`. ### Sintaxis @@ -55,25 +53,14 @@ element { } ``` -### Especificacions +### Especificaciones -- [CSS 1](http://www.w3.org/TR/CSS1#border-width) -- [CSS 2.1](http://www.w3.org/TR/CSS21/box.html#border-width-properties) -- [CSS 3](http://www.w3.org/TR/css3-background/#border-width) +{{Specifications}} -### Compatibilidades +### Compatibilidad con navegadores -| Navegador | Versión mínima | -| ----------------- | -------------- | -| Internet Explorer | | -| Firefox | | -| Netscape | | -| Opera | | +{{Compat}} ### Ver también {{ Cssxref("border-bottom") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-width") }} - -Categorías - -Interwiki Languages diff --git a/files/es/web/css/border-bottom/index.md b/files/es/web/css/border-bottom/index.md index 323caeb7cb4b94..cc514f070be6b1 100644 --- a/files/es/web/css/border-bottom/index.md +++ b/files/es/web/css/border-bottom/index.md @@ -3,8 +3,6 @@ title: border-bottom slug: Web/CSS/border-bottom --- -<< [Volver](/es/Guía_de_referencia_de_CSS) - ### Resumen La propiedad `border-bottom` permite de definir de una vez todas las propiedades individuales {{ Cssxref("border-bottom-color") }}, {{ Cssxref("border-bottom-style") }}, y {{ Cssxref("border-bottom-width") }}, las cuales describen el color, estilo y ancho del borde inferior de un elementos. @@ -13,7 +11,7 @@ La propiedad `border-bottom` permite de definir de una vez todas las propiedades - Se aplica a : todos los elementos - {{ Cssxref("inheritance", "Valor heredado") }}: no - Porcentajes: N/A -- Medio: {{ Xref_cssvisual() }} +- Medio: {{cssxref("Media/Visual", "visual")}} - {{ Cssxref("computed value", "Valor calculado") }}: ver propiedades individuales ### Sintaxis @@ -69,23 +67,12 @@ Como el valor por defecto de {{ Cssxref("border-bottom-style") }} es `none`, el ### Especificaciones -- [CSS 1](http://www.w3.org/TR/CSS1#border-bottom) -- [CSS 2.1](http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties) -- [CSS 3](http://www.w3.org/TR/css3-background/#the-border-shorthands) +{{Specifications}} -### Compatibilidades +### Compatibilidad con navegadores -| Navegador | Versión mínima | -| ----------------- | -------------- | -| Internet Explorer | 4 | -| Firefox | 1 | -| Netscape | 4 | -| Opera | 3.5 | +{{Compat}} ### Ver también {{ Cssxref("border") }}, {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-width") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-color") }}, - -Categorías - -Interwiki Languages diff --git a/files/es/web/css/border-collapse/index.md b/files/es/web/css/border-collapse/index.md index 19e25a97dbd107..7b4f7ecf07e8b9 100644 --- a/files/es/web/css/border-collapse/index.md +++ b/files/es/web/css/border-collapse/index.md @@ -3,8 +3,6 @@ title: border-collapse slug: Web/CSS/border-collapse --- -<< [Volver](/es/Gu%c3%ada_de_referencia_de_CSS) - ### Resumen La propiedad `border-collapse` se utiliza para fusionar los bordes. Ésto tiene una gran influencia sobre la presentación y el estilo de las celdas de tabla. La representación de los bordes de tabla es dividida en dos categorías en CSS2 - "fusión" y "separación" (collapsed - separated). Esta propiedad especifica que modo de presentación de borde hay que usar. @@ -15,7 +13,7 @@ En el modelo de separación, cada celda adyacente tiene su propio borde (la dist - {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("separate", "separado") }} - {{ Cssxref("inheritance", "Valor heredado") }}: Yes -- Media: {{ Xref_cssvisual() }} +- Media: {{cssxref("Media/Visual", "visual")}} - {{ Cssxref("computed value", "Valor calculado") }}: ### Sintaxis @@ -50,21 +48,12 @@ CSS 2 especifica que el valor inicial para esta propiedad es `collapse`, pero CS ### Especificaciones -- [CSS 2.1](http://www.w3.org/TR/CSS21/tables.html#collapsing-borders) -- [CSS 3](http://www.w3.org/TR/REC-CSS2/tables.html#borders) +{{Specifications}} -### Compatibilidades +### Compatibilidad con navegadores -| Navegador | Versión mínima | -| ----------------- | -------------- | -| Internet Explorer | 5.5 | -| Netscape | 7 | -| Opera | 5 | +{{Compat}} ### Ver también {{ Cssxref("border-spacing") }} - -Categorías - -Interwiki Languages diff --git a/files/es/web/css/border-color/index.md b/files/es/web/css/border-color/index.md index 0fa437c877bd90..53a9f0e768313e 100644 --- a/files/es/web/css/border-color/index.md +++ b/files/es/web/css/border-color/index.md @@ -57,18 +57,11 @@ Para poder ver el/los bordes también hay que definir {{ Cssxref("border-width", ### Especificaciones -- [CSS 1](http://www.w3.org/TR/CSS1#border-color) -- [CSS 2.1](http://www.w3.org/TR/CSS21/box.html#border-color-properties) -- [CSS 3](http://www.w3.org/TR/css3-background/#the-border-color) - -### Compatibilidad - -| Navegadores | Versión mínima | -| ----------------- | -------------- | -| Internet Explorer | 4 | -| Firefox | 1 | -| Netscape | 4 | -| Opera | 3.5 | +{{Specifications}} + +### Compatibilidad con navegadores + +{{Compat}} ### Extensiones Mozilla diff --git a/files/es/web/css/border-left-color/index.md b/files/es/web/css/border-left-color/index.md index 648c7c26669c86..9f7fbd9bb05209 100644 --- a/files/es/web/css/border-left-color/index.md +++ b/files/es/web/css/border-left-color/index.md @@ -11,7 +11,7 @@ slug: Web/CSS/border-left-color - Se aplica a : todos los elementos - {{ Xref_cssinherited() }}: no - Porcentajes: N/A -- Media: {{ Xref_cssvisual() }} +- Media: {{cssxref("Media/Visual", "visual")}} - {{ Xref_csscomputed() }}: cuando son tomados de la propiedad 'color',los valores computarizados de 'color'; de otra manera como sean especificados. ### Sintaxis diff --git a/files/es/web/css/border-spacing/index.md b/files/es/web/css/border-spacing/index.md index 45428294ddb3be..1f39c922da2273 100644 --- a/files/es/web/css/border-spacing/index.md +++ b/files/es/web/css/border-spacing/index.md @@ -3,8 +3,6 @@ title: border-spacing slug: Web/CSS/border-spacing --- -<< [Volver](/es/Gu%c3%ada_de_referencia_de_CSS) - ### Resumen La propiedad de {{ Cssxref("border-spacing", "espaciado de borde") }} especifica la distancia entre los bordes de celdas adyacentes (sólo para el modelo de [separación de borde](/es/CSS/border-collapse)). Es el equivalente al atributo `cellspacing` en HTML. @@ -12,7 +10,7 @@ La propiedad de {{ Cssxref("border-spacing", "espaciado de borde") }} especifica - {{ Cssxref("initial", "Valor inicial") }}: 0 - Se aplica a: tablas y elementos con la propiedad `inline-table` - {{ Cssxref("inheritance", "Valor heredado") }}: sí -- Medio: {{ Xref_cssvisual() }} +- Medio: {{cssxref("Media/Visual", "visual")}} - {{ Cssxref("computed value", "Valor calculado") }}: dos largos absolutos. ### Sintaxis @@ -43,23 +41,12 @@ El espaciado de borde también se utiliza en los bordes exteriores de las tablas ### Especificaciones -- [CSS 2.1](http://www.w3.org/TR/CSS21/tables.html#propdef-border-spacing) +{{Specifications}} -### Compatibilidades +### Compatibilidad con navegadores -| Navegador | Versión mínima | -| ----------------- | -------------- | -| Netscape | 6 | -| Internet Explorer | 7 | -| Firefox | 1 | -| Mozilla | 1 | -| Safari | 1 | -| Opera | 6 | +{{Compat}} ### Ver también {{ Cssxref("border-collapse") }} - -Categorías - -Interwiki Languages diff --git a/files/es/web/css/border-width/index.md b/files/es/web/css/border-width/index.md index c0b3a838bfcdbd..c539c00a421d41 100644 --- a/files/es/web/css/border-width/index.md +++ b/files/es/web/css/border-width/index.md @@ -55,18 +55,11 @@ element { ### Especificaciones -- [CSS 1](http://www.w3.org/TR/CSS1#border-width) -- [CSS 2.1](http://www.w3.org/TR/CSS21/box.html#border-width-properties) -- [CSS 3](http://www.w3.org/TR/css3-background/#border-width) - -### Compatibilidad - -| Navegador | Versión mínima | -| ----------------- | -------------- | -| Internet Explorer | 4.0 | -| Firefox | 1.0 | -| Netscape | | -| Opera | 3.5 | +{{Specifications}} + +### Compatibilidad con navegadores + +{{Compat}} ### Ver también diff --git a/files/es/web/css/border/index.md b/files/es/web/css/border/index.md index cd39c3e7b244ce..16ec8fe40d445f 100644 --- a/files/es/web/css/border/index.md +++ b/files/es/web/css/border/index.md @@ -54,18 +54,11 @@ Mientras que las propiedades {{ Cssxref("border-width") }}, {{ Cssxref("border-s ### Especificaciones -- [CSS 1](http://www.w3.org/TR/CSS1#border) -- [CSS 2.1](http://www.w3.org/TR/CSS21/box.html#box-border-area) -- [CSS 3](http://www.w3.org/TR/css3-background/#the-border-shorthands) - -### Compatibilidad - -| Navegador | Versión mínima | -| ----------------- | -------------- | -| Internet Explorer | 4 | -| Firefox | 1 | -| Netscape | 4 | -| Opera | 3.5 | +{{Specifications}} + +### Compatibilidad con navegadores + +{{Compat}} ### Ver también diff --git a/files/es/web/css/bottom/index.md b/files/es/web/css/bottom/index.md index 7c81519fdf1dff..36656ab7593335 100644 --- a/files/es/web/css/bottom/index.md +++ b/files/es/web/css/bottom/index.md @@ -1,106 +1,136 @@ --- title: bottom slug: Web/CSS/bottom +l10n: + sourceCommit: e9a39cf29e4d40513b19c79abfe10b6338dde8dd --- -<< [Volver](/es/Gu%c3%ada_de_referencia_de_CSS) +{{CSSRef}} -### Resumen +La propiedad **`bottom`** de [CSS](/es/docs/Web/CSS) establece la posición vertical de un [elemento posicionado](/es/docs/Web/CSS/position). No tiene efecto en elementos no posicionados. -La propiedad `bottom` especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código). +{{EmbedInteractiveExample("pages/css/bottom.html")}} -Para los elementos con una posición absoluta (aquellos que tienen la propiedad `position: absolute` o `position: fixed`), la propiedad bottom determina la distancia entre el borde inferior del elemento y el borde inferior de su bloque contenedor. +El efecto de la propiedad `bottom` depende de cómo esté posicionado el elemento (es decir, del valor de la propiedad {{cssxref("position")}}): -Para los elementos con una posición relativa (los que tienen la propiedad `position: relative`), la propiedad bottom determina la distancia que el elemento se mueve hacia arriba desde su posición normal. Sin embargo, la propiedad {{ Cssxref("top") }} se antepone a la propiedad bottom, por lo que si `top` no es `auto`, el valor computado de `bottom` es el valor negativo del valor computado de `top`. +- Cuando `position` se establece como `absolute` o `fixed`, la propiedad `bottom` especifica la distancia entre el borde exterior del [margen inferior](/es/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) del elemento y el borde exterior del relleno inferior del bloque contenedor. -- {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("auto", "automático") }} -- Se aplica a: {{ Cssxref("position", "la posición de los elementos") }} -- {{ Cssxref("inheritance", "Heredado") }}: no -- Porcentajes: se refieren a la altura del bloque contenedor. -- Medio: {{ Cssxref("Media:Visual", "visual") }} -- {{ Cssxref("computed value", "Valor calculada") }}: valor absoluto, porcentaje o auto. +- Cuando `position` se establece en `relative`, la propiedad `bottom` especifica la distancia a la que se mueve el borde inferior del elemento con respecto a su posición normal. -### Sintaxis +- Cuando `position` se establece como `sticky`, la propiedad `bottom` se utiliza para calcular el modelo de restricción pegajosa. -``` - bottom: <length> | <percentage> | auto | inherit +- Cuando `position` se establece como `static`, la propiedad `bottom` no tiene _efecto_. + +Cuando se especifican tanto {{cssxref("top")}} como `bottom`, `position` se establece como `absolute` o `fixed`, _y_ la {{cssxref("height", "altura")}} no está especificada (ya sea como `auto` o `100%`), se respetan tanto las distancias de `top` como de `bottom`. En todas las demás situaciones, si la {{cssxref("height", "altura")}} está restringida de alguna manera o `position` se establece como `relative`, la propiedad `top` tiene prioridad y la propiedad `bottom` se ignora. + +## Sintaxis + +```css +/* <longitud> valores */ +bottom: 3px; +bottom: 2.4em; + +/* <porcentaje>s de la altura del bloque contenedor */ +bottom: 10%; + +/* valor de palabra clave */ +bottom: auto; + +/* Valores globales */ +bottom: inherit; +bottom: initial; +bottom: revert; +bottom: revert-layer; +bottom: unset; ``` ### Valores -- \<length> - - : Una longitud, usada como se describe en el [resumen](#Resumen). Puede ser un valor negativo, cero o un valor positivo. -- \<percentage> - - : Un porcentaje de la altura del bloque contenedor, usado como se describe en el [resumen](#Resumen). +- {{cssxref("<length>")}} + + - : Una {{cssxref("<length>", "longitud")}} negativa, nula o positiva que representa: + + - para _elementos posicionados absolutamente_, la distancia hasta el borde inferior del bloque contenedor.. + - para _elementos posicionados relativamente_, la distancia que el elemento se mueve por encima de su posición normal.. + +- {{cssxref("<percentage>")}} + - : Un {{cssxref("<percentage>", "porcentaje")}} de la altura del bloque contenedor. - `auto` - - : Para los elementos con posición absoluta, el elemento se posiciona en base a la propiedad {{ Cssxref("top") }} y por tanto se trata `height: auto` como una altura basada en el contenido del elemento. Para los elementos posicionados como relativos, especifica un desplazamiento desde su posición normal basada en la propiedad {{ Cssxref("top") }} o si, `top` es también `auto`, no se produce desplazamiento alguno. + + - : Especifica que: + + - para _elementos posicionados absolutamente_, la posición del elemento esta basado en la propiedad {{Cssxref("top")}}, mientras que `height: auto` se trata como una altura según el contenido; o si `top` es también `auto`, el elemento se coloca donde debería ubicarse verticalmente si fuera un elemento estático. + - para _elementos posicionados relativamente_, la distancia del elemento de su posición normal se basa en la propiedad {{Cssxref("top")}}; o si `top` tambièn es `auto`, el elemento no se mueve verticalmente. + - `inherit` - - : Recoge el valor que tenga el elemento padre (que puede no ser el bloque contenedor). Este valor calculado es tratado como si fuera un valor \<length>, \<percentage> o `auto`. + - : Especifica que el valor es el mismo que el valor calculado de su elemento padre (que podría no ser su bloque contenedor). Este valor calculado se maneja entonces como si fuera un {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, o `auto`. -### Ejemplos +## Definición formal -``` -element { - position: absolute; - bottom: 20px; - height: 200px; - border: 1px solid #000; -} -``` +{{cssinfo}} -El siguiente ejemplo permite contrastar entre `position:absolute` y `position:fixed`. Cuando el texto ocupa un espacio más alto que la porción visible de la página (la porción visible en la ventana del navegador) los bloques posicionados con `position:absolute` se desplazarán junto con la página, mientras que los bloques posicionados con `position:fixed`, no lo harán. +## Sintaxis formal -- **Atención**: IE6 **no** soporta el código `position:fixed`. +{{csssyntax}} -``` -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" - "http://www.w3.org/TR/html4/strict.dtd"> -<html> -<head> -<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> -<title>Position at bottom, absolute or fixed - - - -

Esto
es
un texto
alto,
alto, -
alto,
alto,
alto
de prueba.

-

Fixed

-

Absolute

- - +## Ejemplos + +### Posicionamiento absoluto y fijo + +Este ejemplo demuestra la diferencia en el comportamiento de la propiedad `bottom`, cuando la {{cssxref("position")}} es `absolute` versus `fixed`. + +#### HTML + +```html +

+ This
is
some
tall,
tall,
tall,
tall,
tall
content. +

+

Fixed

+

Absolute

``` -### Notas +#### CSS -Para los elementos posicionados de forma absoluta cuyo bloque contenedor sea un elemento de tipo bloque, esta propiedad es un desplazamiento a partir del borde de relleno (padding) de dicho elemento. +```css +p { + font-size: 30px; + line-height: 2em; +} + +div { + width: 48%; + text-align: center; + background: rgba(55, 55, 55, 0.2); + border: 1px solid blue; +} -Para los elementos posicionados de forma absoluta, la propiedad `bottom` no tiene efectos visibles cuando los valores {{ Cssxref("top") }}, {{ Cssxref("height") }}, y {{ Cssxref("margin-top") }} _no_ son `auto` (que es el valor por defecto para `top` y `height`). +.absolute { + position: absolute; + bottom: 0; + left: 0; +} -### Especificaciones +.fixed { + position: fixed; + bottom: 0; + right: 0; +} +``` -- [CSS 2.1 (en)](http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom) -- [CSS 3 (en)](http://www.w3.org/Style/CSS/current-work#positioning) +#### Resultado -### Compatibilidad entre navegadores +{{EmbedLiveSample('Absolute_and_fixed_positioning','500','250')}} -This is as far back as the documentaion goes. +## Especificaciones -| Navegador | Versión mínima | -| ----------------- | -------------- | -| Internet Explorer | 5 | -| Firefox | 1 | -| Netscape | 6 | -| Opera | 6 | +{{Specifications}} -### Ver también +## Compatibilidad con navegadores -{{ Cssxref("position") }}, {{ Cssxref("top") }}, {{ Cssxref("right") }}, {{ Cssxref("left") }} +{{Compat}} -Categorías +## Véase también -Interwiki Languages +- {{cssxref("inset")}}, abreviatura de todas las propiedades relacionadas: {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, y {{cssxref("right")}} +- Las propiedades lógicas: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, e {{cssxref("inset-inline-end")}} y las abreviaturas {{cssxref("inset-block")}} e {{cssxref("inset-inline")}} +- {{cssxref("position")}} diff --git a/files/es/web/css/cursor/index.md b/files/es/web/css/cursor/index.md index 439caf9b77dc48..d8824f893eb2e0 100644 --- a/files/es/web/css/cursor/index.md +++ b/files/es/web/css/cursor/index.md @@ -229,23 +229,10 @@ External: } ``` -### Notes +### Especificaciones -While this property works on older browsers, not all values are fully supported. +{{Specifications}} -### Specifications +### Compatibilidad con navegadores -- [CSS 2.1](http://www.w3.org/TR/CSS21/ui.html#propdef-cursor) -- [css3-ui](http://www.w3.org/TR/css3-ui/#cursor) - -### Browser compatibility - -| Browser | Lowest Version (``) | Lowest Version (``) | -| ----------------- | ------------------------------------ | ------------------------ | -| Internet Explorer | 4 | 6 (only `.cur` files) | -| Firefox | 1.0 | 1.5 | -| Netscape | 6 | 8 | -| Opera | 7 | - | -| Konqueror | 3.1 | 3.1 | -| Safari | 1.2 | 1.2 | -| Safari (Win) | 3.0 | 3.0 | +{{Compat}} diff --git a/files/es/web/css/float/index.md b/files/es/web/css/float/index.md index 8fb58557826342..25b0c40701f154 100644 --- a/files/es/web/css/float/index.md +++ b/files/es/web/css/float/index.md @@ -144,21 +144,12 @@ A veces querrás forzar un item a moverse por debajo de elementos flotantes. Por ### Especificaciones -- [CSS 1](http://www.w3.org/TR/CSS1#float) -- [CSS 2.1](http://www.w3.org/TR/CSS21/visuren.html#propdef-float) +{{Specifications}} -### Compatibilidad de navegadores +### Compatibilidad con navegadores -| Navegador | Versión mínima | -| ----------------- | -------------- | -| Internet Explorer | 4 | -| Netscape | 4 | -| Opera | 3.5 | +{{Compat}} ### Ver también {{ Cssxref("clear") }}, {{ Cssxref("display") }}, {{ Cssxref("position") }} - -Categorías - -Interwiki Language diff --git a/files/es/web/css/font/index.md b/files/es/web/css/font/index.md index bf10edd4da89b9..4441fd9f1c2b42 100644 --- a/files/es/web/css/font/index.md +++ b/files/es/web/css/font/index.md @@ -69,17 +69,10 @@ Si no se establece un valor concreto, las propiedades tomarán el valor por defe La propiedad {{ Cssxref("font-size-adjust") }} también se establece a su valor inicial (`none`) cuando se usa la propiedad general {{ Cssxref("font") }}. -## Especificaciones +### Especificaciones -- [CSS 1](http://www.w3.org/TR/CSS1#font) -- [CSS 2](http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#propdef-font) (para {{ Cssxref("font-size-adjust") }}) -- [CSS 2.1](http://www.w3.org/TR/CSS21/fonts.html#propdef-font) -- [css3-ui](http://www.w3.org/TR/css3-ui/#font) (para los nuevos valores de fuentes de sistema]) +{{Specifications}} -## Compatibilidades +### Compatibilidad con navegadores -| Navegador | Versión mínima | -| ----------------- | -------------- | -| Internet Explorer | 3 | -| Netscape | 4 | -| Opera | 3.5 | +{{Compat}} diff --git a/files/es/web/css/line-height/index.md b/files/es/web/css/line-height/index.md index 313538201c49ca..3274422d283446 100644 --- a/files/es/web/css/line-height/index.md +++ b/files/es/web/css/line-height/index.md @@ -13,7 +13,7 @@ La propiedad [CSS](/es/docs/Web/CSS) `line-height` establece la altura de una ca - Aplicable a: todos los elementos. - {{ Cssxref("inheritance", "Valor heredado") }}: sí - Porcentajes: se refieren a tamaño de la fuente del elemento mismo. -- Medio: {{ Xref_cssvisual() }} +- Medio: {{cssxref("Media/Visual", "visual")}} - {{ Cssxref("computed value", "Valor calculado") }}: para los valores \ y \, el valor absoluto, en otro caso, como se especifica. ## Syntax diff --git a/files/es/web/css/max-height/index.md b/files/es/web/css/max-height/index.md index b647c35c957588..b5bb2fffdcf29f 100644 --- a/files/es/web/css/max-height/index.md +++ b/files/es/web/css/max-height/index.md @@ -3,8 +3,6 @@ title: max-height slug: Web/CSS/max-height --- -<< [Volver](/es/Gu%c3%ada_de_referencia_de_CSS) - ### Resumen La propiedad `max-height` se utiliza para definir la altura máxima de un elemento dado. Impide que el valor de la {{ Cssxref("height", "altura") }} pueda llegar a ser más grande que la de `max-height`. @@ -13,7 +11,7 @@ La propiedad `max-height` se utiliza para definir la altura máxima de un elemen - Se aplica a : elementos de bloque o remplazados - {{ Cssxref("inheritance", "Valor heredado") }}: no - Porcentajes: se refiere a la altura del bloque contenedor. -- Medio: {{ Xref_cssvisual() }} +- Medio: {{cssxref("Media/Visual", "visual")}} - {{ Cssxref("computed value", "Valor calculado") }}: ### Sintaxis @@ -42,20 +40,12 @@ form { max-width: none; } ### Especificaciones -- [CSS 2.1](http://www.w3.org/TR/CSS2/visudet.html#min-max-heights) +{{Specifications}} -### Compatibilidades +### Compatibilidad con navegadores -| Navegador | Versión mínima | -| ----------------- | -------------- | -| Internet Explorer | 6 | -| Netscape | 6 | -| Opera | 3.5 | +{{Compat}} ### Ver también {{ Cssxref("Modelo de caja", "modelo de caja") }}, {{ Cssxref("width", "ancho") }}, {{ Cssxref("-moz-box-sizing", "tamaño de cajas -Mozilla") }}, {{ Cssxref("min-height", "altura mínima") }}, {{ Cssxref("max-height", "altura máxima") }} - -Categorías - -Interwiki Languages diff --git a/files/es/web/css/min-height/index.md b/files/es/web/css/min-height/index.md index f04447a93c7464..60d7eba7f84e51 100644 --- a/files/es/web/css/min-height/index.md +++ b/files/es/web/css/min-height/index.md @@ -32,17 +32,13 @@ form {min-height: 0;} {{ Cssxref("min-height") }} tiene prioridad sobre los valores {{ Cssxref("max-height") }} y {{ Cssxref("height") }}. -### Esdpecificaciones +### Especificaciones -- [CSS 2.1](http://www.w3.org/TR/CSS2/visudet.html#min-max-heights) +{{Specifications}} -### Compatibilidades +### Compatibilidad con navegadores -| Navegador | Versión mínima | -| ----------------- | -------------- | -| Internet Explorer | 6 | -| Netscape | 6 | -| Opera | 3.5 | +{{Compat}} ### Ver también diff --git a/files/es/web/css/min-width/index.md b/files/es/web/css/min-width/index.md index d4573f2b43981c..4f558969354b6d 100644 --- a/files/es/web/css/min-width/index.md +++ b/files/es/web/css/min-width/index.md @@ -13,7 +13,7 @@ La propiedad `min-width` se usa para determinar la anchura mínima de un element - Aplicable a: elementos de tipo bloque. - {{ Xref_cssinherited() }}: no - Porcentajes: se refieren a la anchura del bloque contenedor. -- Media: {{ Xref_cssvisual() }} +- Media: {{cssxref("Media/Visual", "visual")}} - {{ Xref_csscomputed() }}: ### Sintaxis @@ -43,15 +43,11 @@ form{min-width: 0;} ### Especificaciones -- [CSS 2.1](http://www.w3.org/TR/CSS2/visudet.html#min-max-widths) +{{Specifications}} -### Compatibilidad entre navegadores +### Compatibilidad con navegadores -| Navegador | Versión mínima | -| ----------------- | -------------- | -| Internet Explorer | 6 | -| Netscape | 6 | -| Opera | 3.5 | +{{Compat}} ### Ver también diff --git a/files/es/web/css/right/index.md b/files/es/web/css/right/index.md index f7b5ae4be0d971..e8469c6aff32d9 100644 --- a/files/es/web/css/right/index.md +++ b/files/es/web/css/right/index.md @@ -15,7 +15,7 @@ Para los elementos con una posición absoluta (aquellos que tienen la propiedad - Se aplica a: [positioned elements](/es/CSS/position) - {{ Xref_cssinherited() }}: no - Porcentajes: se refiere al ancho del bloque contenedor. -- Media: {{ Xref_cssvisual() }} +- Media: {{cssxref("Media/Visual", "visual")}} - {{ Xref_csscomputed() }}: valor absoluto, porcentaje ó auto. ### Sintaxis @@ -42,22 +42,13 @@ div { } ``` -### Notas - ### Especificaciones -- [CSS 2.1](http://www.w3.org/TR/CSS21/visuren.html#propdef-right) -- [CSS 3](http://www.w3.org/Style/CSS/current-work#positioning) +{{Specifications}} -### Compatibilidad entre navegadores +### Compatibilidad con navegadores -| Navegador | Versión mínima | -| ----------------- | -------------- | -| Internet Explorer | ? | -| Firefox | 1 | -| Netscape | ? | -| Opera | ? | -| Safari | ? | +{{Compat}} ### Ver también diff --git a/files/es/web/css/top/index.md b/files/es/web/css/top/index.md index e52cf1067b2b21..4ff329ae0ebfd9 100644 --- a/files/es/web/css/top/index.md +++ b/files/es/web/css/top/index.md @@ -19,7 +19,7 @@ Cuando se define tanto la propiedad `top` como {{cssxref("bottom")}} para un ele - Aplicable a: [Posicionar Elementos](/es/CSS/position) - {{ Xref_cssinherited() }}: no - Porcentajes: se refieren a la altura del bloque contenedor. -- Medio: {{ Xref_cssvisual() }} +- Medio: {{cssxref("Media/Visual", "visual")}} - {{ Xref_csscomputed() }}: valor absoluto, porcentaje ó auto. ### Sintaxis @@ -30,77 +30,66 @@ Cuando se define tanto la propiedad `top` como {{cssxref("bottom")}} para un ele ### Ejemplos -``` - /* se puede también usar unidades px para posicionar body para luego operar con el div */ - body{ - width: 100%; - height: 100%; - } - /* ahora podemos operar con unidades de porcentajes (con al 100% respecto de body) */ - div{ - position:absolute; - left:15%; - top:30%; - bottom:30%; - width:70%; - height:40%; - text-align:left; - border: 3px rgb(0,0,0) solid; - } +```css +/* se puede también usar unidades px para posicionar body para luego operar con el div */ +body { + width: 100%; + height: 100%; +} +/* ahora podemos operar con unidades de porcentajes (con al 100% respecto de body) */ +div { + position: absolute; + left: 15%; + top: 30%; + bottom: 30%; + width: 70%; + height: 40%; + text-align: left; + border: 3px rgb(0, 0, 0) solid; +} ``` -``` - - - - - - Mozzila.org height top left width porcentaje CSS - - - -
-
- ...Contenido... -
-
- - - +```html + + + + + + Mozzila.org height top left width porcentaje CSS + + + +
+
...Contenido...
+
+ + ``` ### Especificaciones -- [CSS 2.1](http://www.w3.org/TR/CSS21/visuren.html#propdef-top) -- [CSS 3](http://www.w3.org/Style/CSS/current-work#positioning) +{{Specifications}} -### Compatibilidad entre navegadores +### Compatibilidad con navegadores -| Navegador | Versión mínima | -| ----------------- | -------------- | -| Internet Explorer | ? | -| Firefox | 1 | -| Netscape | ? | -| Opera | ? | -| Safari | ? | +{{Compat}} ### Ver también diff --git a/files/es/web/css/visibility/index.md b/files/es/web/css/visibility/index.md index b4ac5374afbe97..834f9baf33f338 100644 --- a/files/es/web/css/visibility/index.md +++ b/files/es/web/css/visibility/index.md @@ -16,7 +16,7 @@ La propiedad `visibility` se usa para dos efectos: - Se aplica a: Todos los elementos. - {{ Cssxref("inheritance", "Valor heredado") }}: Sí - Porcentajes: N/A -- Medio: {{ Xref_cssvisual() }} +- Medio: {{cssxref("Media/Visual", "visual")}} - {{ Cssxref("computed value", "Valor calculado") }}: Como se especifica. ### Sintaxis diff --git a/files/es/web/html/element/a/index.md b/files/es/web/html/element/a/index.md index 46433ea0056bc0..b1d15962fad250 100644 --- a/files/es/web/html/element/a/index.md +++ b/files/es/web/html/element/a/index.md @@ -229,27 +229,6 @@ HTML 3.2 define sólo los atributos `name`, `href`, `rel`, `rev`, y `title`. Se abusa frecuntemente de las etiquetas de ancla (_anchor tags_) con el uso de los eventos `onclick` para crear pseudo-botones ajustando **href** a `"#"` o `"javascript:void(0)"` para prevenir la recarga de la página. Estos valores provocan comportamientos inesperados con los enlaces de copiado/dibujado, la apertura de enlaces en nuevas pestañas/ventanas, el guardado de enlaces (_bookmarking_), y cuando JavaScript está aún descargando, esto arroja errores, o es deshabilitado. Esto tambíen lleva a semánticas (_semantics_) incorrectas para tecnologías de asistencia (p.ej., lectores de pantalla). En estos casos, se recomienda utilizar un {{HTMLElement("button")}} en su lugar. En general, sólo se debe utilizar una ancla (_anchor_) para navegación utilizando una URL adecuada. -### Cliceo y enfoque - -Cuando se clicea sobre un {{HTMLElement("a")}} las consecuencias varían de acuerdo al navegador y el sistema operativo. - -¿Al hacer un clic en un [``](/es/docs/Web/HTML/Element/a) se enfoca? - -| Navegadores de escritorio | Windows 8.1 | OS X 10.9 | -| ---------------------------------------------------------------------------------------------- | ----------- | ------------------------------- | -| Firefox 30.0 | Si | Si | -| Chrome ≥39 ([Chromium bug 388666](https://code.google.com/p/chromium/issues/detail?id=388666)) | Si | Si | -| Safari 7.0.5 | N/A | Sólo cuando tiene un `tabindex` | -| Internet Explorer 11 | Si | N/A | -| Presto (Opera 12) | Si | Si | - -¿Al hacer un clic en un [``](/es/docs/Web/HTML/Element/a) se enfoca? - -| Navegadores móviles | iOS 7.1.2 | Android 4.4.4 | -| ------------------- | ------------------------------- | ------------------------------- | -| Safari Mobile | Sólo cuando tiene un `tabindex` | N/A | -| Chrome 35 | ??? | Sólo cuando tiene un `tabindex` | - ## Especificaciones {{Specifications}} diff --git a/files/es/web/javascript/reference/classes/private_class_fields/index.md b/files/es/web/javascript/reference/classes/private_properties/index.md similarity index 97% rename from files/es/web/javascript/reference/classes/private_class_fields/index.md rename to files/es/web/javascript/reference/classes/private_properties/index.md index 469a59e40029d6..6d32598c3a6460 100644 --- a/files/es/web/javascript/reference/classes/private_class_fields/index.md +++ b/files/es/web/javascript/reference/classes/private_properties/index.md @@ -1,6 +1,7 @@ --- title: Private class fields -slug: Web/JavaScript/Reference/Classes/Private_class_fields +slug: Web/JavaScript/Reference/Classes/Private_properties +original_slug: Web/JavaScript/Reference/Classes/Private_class_fields --- Las propiedades de la clase son públicas de forma predeterminada y se pueden examinar o modificar fuera de la clase. Sin embargo, existe [una propuesta experimental](https://github.com/tc39/proposal-class-fields) para permitir la definición de campos de clase privados utilizando un `#` prefijo hash . diff --git a/files/es/web/javascript/reference/global_objects/array/copywithin/index.md b/files/es/web/javascript/reference/global_objects/array/copywithin/index.md index 30fd135af8edb0..30157019569f9e 100644 --- a/files/es/web/javascript/reference/global_objects/array/copywithin/index.md +++ b/files/es/web/javascript/reference/global_objects/array/copywithin/index.md @@ -127,8 +127,8 @@ if (!Array.prototype.copyWithin) { positiveT ? [target, stop - start, hold] : positiveS - ? [target, stop, hold] - : [target, start, hold], + ? [target, stop, hold] + : [target, start, hold], ), this.join(delimiter).split(delimiter).slice(zero, length) ); diff --git a/files/es/web/javascript/reference/global_objects/error/linenumber/index.md b/files/es/web/javascript/reference/global_objects/error/linenumber/index.md index 817f7b97613642..f3318186662609 100644 --- a/files/es/web/javascript/reference/global_objects/error/linenumber/index.md +++ b/files/es/web/javascript/reference/global_objects/error/linenumber/index.md @@ -35,19 +35,9 @@ Esta es una norma soportada por Chrome, Firefox entre otros. No forma parte de ninguna especificación. No es una norma. -## Navegadores compatibles +## Compatibilidad con navegadores -Tabla de compatibilidad - -| Caracteristica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari | -| -------------- | --------------- | --------------- | ----------------- | ------------- | ------------- | -| Soporte básico | Compatible \[1] | Compatible | No compatible | No compatible | No compatible | - -\[1] Objeto error en errores manejados. - -| Caracteristica | Android | Chorme para Android | Firefox Móvil (Gecko) | IE Móvil | Opera Móvil | Safari Móvil | -| -------------- | ------------- | ------------------- | --------------------- | ------------- | ------------- | ------------- | -| Soporte básico | No compatible | No compatible | Compatible | No compatible | No compatible | No compatible | +{{Compat}} ## Vea también diff --git a/files/es/web/javascript/reference/global_objects/proxy/index.md b/files/es/web/javascript/reference/global_objects/proxy/index.md index 684055041c00f0..0a18712ec74e72 100644 --- a/files/es/web/javascript/reference/global_objects/proxy/index.md +++ b/files/es/web/javascript/reference/global_objects/proxy/index.md @@ -422,7 +422,7 @@ var docCookies = new Proxy(docCookies, { return oTarget.setItem(sKey, vValue); }, deleteProperty: function (oTarget, sKey) { - if (!sKey in oTarget) { + if ((!sKey) in oTarget) { return false; } return oTarget.removeItem(sKey); diff --git a/files/es/web/javascript/reference/operators/conditional_operator/index.md b/files/es/web/javascript/reference/operators/conditional_operator/index.md index 97e861addccbf5..e0cf6e5aea7353 100644 --- a/files/es/web/javascript/reference/operators/conditional_operator/index.md +++ b/files/es/web/javascript/reference/operators/conditional_operator/index.md @@ -40,8 +40,8 @@ var firstCheck = false, access = firstCheck ? "Acceso Denegado" : secondCheck - ? "Acceso Denegado" - : "Acceso Permitido"; + ? "Acceso Denegado" + : "Acceso Permitido"; console.log(access); // muestra "Acceso Permitido" ``` diff --git a/files/es/web/javascript/reference/template_literals/index.md b/files/es/web/javascript/reference/template_literals/index.md index 2848f6cb4e9e43..51ff68a0e63951 100644 --- a/files/es/web/javascript/reference/template_literals/index.md +++ b/files/es/web/javascript/reference/template_literals/index.md @@ -93,8 +93,8 @@ let classes = "header"; classes += isLargeScreen() ? "" : item.isCollapsed - ? " icon-expander" - : " icon-collapser"; + ? " icon-expander" + : " icon-collapser"; ``` En ES2015 con plantillas literales y sin anidamiento: diff --git a/files/es/web/svg/tutorial/getting_started/index.md b/files/es/web/svg/tutorial/getting_started/index.md index 3bec001b07f475..c4b0ce868cc9c8 100644 --- a/files/es/web/svg/tutorial/getting_started/index.md +++ b/files/es/web/svg/tutorial/getting_started/index.md @@ -33,62 +33,62 @@ El proceso de renderizado incluye lo siguiente : 1. Comenzamos con el elemento raiz del `svg`: - La declaracion de tipo de documento (doctype) usual en (X)HTML debería dejarse de lado debido a que la validación DTD based SVG conduce a mas problemas que soluciones. - - En cambio, los atributos `version` y `baseProfile` deberian ser usados siempre para identificar la version de SVG para otro tipo de validaciones. + - Antes de SVG 2, para identificar la versión del SVG para otros tipos de validación se debían utilizar siempre los atributos `version` y `baseProfile` en su lugar. Los atributos `version` y `baseProfile` están obsoletos en SVG 2. - Debido a SVG es una especie de dialecto de XML, SVG debe unir siempre los namespaces correctamente (en el atributo xmlns). Para mayor información, vea [Namespaces Crash Course](/es/docs/Web/SVG/Namespaces_Crash_Course). -2. El fondo esta puesto en rojo dibujando un rectangulo [``](/en/SVG/Element/rect) que cubre el area de la imagen. -3. Un circulo verde [``](/en/SVG/Element/circle) con un radio de 80px y se dibuja en el centro del rectangulo rojo(offset 30+120px inward, and 50+50px upward). +2. El fondo esta puesto en rojo dibujando un rectangulo `` que cubre el area de la imagen. +3. Un círculo verde `` con un radio de 80px se dibuja encima del centro del rectángulo rojo (el centro del círculo es desplazado 150px a la derecha, y 100px hacia abajo desde la esquina superior izquierda). 4. El texto "SVG" esta dibujado. El interior de cada letra esta relleno con blanco.El texto se coloca mediante el establecimiento de un ancla en donde queremos que el punto medio sea: en este caso, el punto medio debe corresponder al centro del circulo verde. Los ajustes finos se pueden hacer con el tamaño de la fuente y la posición vertical para garantizar que el resultado final sea estéticamente agradable. -### Basic properties of SVG files +### Propiedades básicas de los archivos SVG -- The first important thing to notice is the order of rendering of elements. The globally valid rule for SVG files is, that _later_ elements are rendered _atop previous_ elements. The further down an element is the more will be visible. -- SVG files on the web can be displayed directly in the browser or embedded in HTML files via several methods: +- Lo primero que hay que tener en cuenta es el orden de representación de los elementos. La regla globalmente válida para los archivos SVG es que los elementos posteriores se renderizan encima de los anteriores. Cuanto más abajo esté un elemento, más visible será. +- En la web, los archivos SVG pueden mostrarse directamente en el navegador o incrustarse en archivos HTML mediante varios métodos: - - If the HTML is XHTML and is delivered as type `application/xhtml+xml`, the SVG can be directly embedded in the XML source. - - If the HTML is HTML5, and the browser is a conforming HTML5 browser, the SVG can be directly embedded, too. However, there may be syntax changes necessary to conform to the HTML5 specification - - The SVG file can be referenced with an `object` element: + - Si el HTML es XHTML y se entrega como tipo application/xhtml+xml, el SVG puede incrustarse directamente en la fuente XML. + - El SVG también puede incrustarse directamente en HTML. + - Se puede utilizar con el elemento [``](/es/docs/Web/HTML/Element/img) + - Se puede hacer referencia al archivo SVG con un elemento `object`: ```html ``` - - Likewise an `iframe` element can be used: + - También pueden utilizarse con un elemento `iframe`: ```html ``` - - An `img` element can be used theoretically, too. However this technique doesn't work in Firefox before 4.0. - - Finally SVG can be created dynamically with JavaScript and injected into the HTML DOM. This has the advantage, that replacement technologies for browsers, that can't process SVG, can be implemented. + - Por último, SVG puede crearse dinámicamente con JavaScript e inyectarse en el DOM de HTML. - See [this dedicated article](/en/SVG_In_HTML_Introduction) for an in-depth dealing with the topic. +- El manejo de tamaños y unidades en SVG va a ser explicado en la próxima página -- How SVG handles sizes and units will be explained [on the next page](/en/SVG/Tutorial/Positions). +### Tipos de archivos SVG -### SVG File Types +Los archivos SVG son de dos tipos. Los archivos SVG normales, que son simples archivos de texto que contienen marcas SVG y tienen como extensión recomendada ".svg" (todo en minúsculas). -SVG files come in two flavors. Normal SVG files are simple text files containing SVG markup. The recommended filename extension for these files is ".svg" (all lowercase). +Debido al enorme tamaño que pueden alcanzar los archivos SVG cuando se utilizan para algunas aplicaciones (por ejemplo, aplicaciones geográficas), la especificación SVG también permite archivos SVG comprimidos con gzip. La extensión recomendada para estos archivos es ".svgz" (todo en minúsculas). Desafortunadamente, es muy problemático conseguir que los archivos SVG comprimidos con gzip funcionen de forma fiable en todos los agentes de usuario con capacidad SVG cuando se sirven desde un servidor Microsoft IIS, y Firefox no puede cargar SVG comprimidos con gzip desde el ordenador local. Evite los archivos SVG comprimidos con gzip excepto cuando los publique en un servidor web que sepa que los servirá correctamente (véase más abajo). -Due to the potentially massive size SVG files can reach when used for some applications (e.g., geographical applications), the SVG specification also allows for gzip-compressed SVG files. The recommended filename extension for these files is ".svgz" (all lowercase). Unfortunately it is very problematic to get gzip-compressed SVG files to work reliably across all SVG capable user agents when served from Microsofts IIS server, and Firefox can not load gzip-compressed SVG from the local computer. Avoid gzip-compressed SVG except when you are publishing to a webserver that you know will serve it correctly (see below). +### Unas palabras sobre los servidores web para archivos .svgz -### A Word on Webservers +Ahora que ya sabemos cómo crear archivos SVG básicos, lo siguiente es subirlos a un servidor web. Sin embargo, hay algunos problemas en esta etapa. Para los archivos SVG normales, los servidores deben enviar el encabezado HTTP: -Now that you have an idea of how to create basic SVG files, the next stage is to upload them to a Webserver. There are some gotchas at this stage though. For normal SVG files, servers should send the HTTP header: - -``` +```http Content-Type: image/svg+xml +Vary: Accept-Encoding ``` -For gzip-compressed SVG files, servers should send the HTTP headers: +Para los archivos SVG comprimidos con gzip, los servidores deben enviar las cabeceras HTTP: -``` +```http Content-Type: image/svg+xml Content-Encoding: gzip +Vary: Accept-Encoding ``` -You can check that your server is sending the correct HTTP headers with your SVG files by using a site such as [web-sniffer.net](http://web-sniffer.net/). Submit the URL of one of your SVG files and look at the HTTP response headers. If you find that your server is not sending the headers with the values given above, then you should contact your Web host. If you have problems convincing them to correctly configure their servers for SVG, there may be ways to do it yourself. See the [server configuration page](http://svg-whiz.com/wiki/index.php?title=Server_Configuration) on the SVG wiki for a range of simple solutions. +Puede comprobar que su servidor envía las cabeceras HTTP correctas con sus archivos SVG utilizando el [panel de monitoreo de red](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html#headers) o un sitio como [websniffer.cc](https://websniffer.cc/). Coloque la URL de uno de sus archivos SVG y observe las cabeceras de la respuesta HTTP. Si comprueba que su servidor no envía las cabeceras con los valores indicados anteriormente, póngase en contacto con su proveedor de alojamiento web. Si tiene problemas para convencerles de que configuren correctamente sus servidores para SVG, puede que haya formas de hacerlo usted mismo. Consulte la [página de configuración del servidor](https://www.w3.org/services/svg-server/) en w3.org para ver una serie de soluciones sencillas. -Server misconfiguration is a very common reason for SVG failing to load, so make sure you check yours. If your server is not configured to send the correct headers with the SVG files it serves, then Firefox will most likely show the markup of the files as text or encoded garbage, or even ask the viewer to choose an application to open them. +La configuración incorrecta del servidor es una razón muy común para que SVG no se cargue, así que asegúrese de comprobar la suya. Si su servidor no está configurado para enviar las cabeceras correctas con los archivos SVG que esta sirviendo, lo más probable es que Firefox muestre el marcado de los archivos como texto o basura codificada, o incluso que pida al usuario que elija una aplicación para abrirlos. {{ PreviousNext("SVG/Tutorial/Introduction", "SVG/Tutorial/Positions") }} diff --git a/files/fr/glossary/base64/index.md b/files/fr/glossary/base64/index.md index 82caf543ab9146..5cf95352509959 100644 --- a/files/fr/glossary/base64/index.md +++ b/files/fr/glossary/base64/index.md @@ -85,14 +85,14 @@ function b64ToUint6(nChr) { return nChr > 64 && nChr < 91 ? nChr - 65 : nChr > 96 && nChr < 123 - ? nChr - 71 - : nChr > 47 && nChr < 58 - ? nChr + 4 - : nChr === 43 - ? 62 - : nChr === 47 - ? 63 - : 0; + ? nChr - 71 + : nChr > 47 && nChr < 58 + ? nChr + 4 + : nChr === 43 + ? 62 + : nChr === 47 + ? 63 + : 0; } function base64DecToArr(sBase64, nBlocksSize) { @@ -130,14 +130,14 @@ function uint6ToB64(nUint6) { return nUint6 < 26 ? nUint6 + 65 : nUint6 < 52 - ? nUint6 + 71 - : nUint6 < 62 - ? nUint6 - 4 - : nUint6 === 62 - ? 43 - : nUint6 === 63 - ? 47 - : 65; + ? nUint6 + 71 + : nUint6 < 62 + ? nUint6 - 4 + : nUint6 === 62 + ? 43 + : nUint6 === 63 + ? 47 + : 65; } function base64EncArr(aBytes) { @@ -187,27 +187,27 @@ function UTF8ArrToStr(aBytes) { aBytes[++nIdx] - 128 : nPart > 247 && nPart < 252 && nIdx + 4 < nLen /* cinq octets */ - ? ((nPart - 248) << 24) + - ((aBytes[++nIdx] - 128) << 18) + - ((aBytes[++nIdx] - 128) << 12) + - ((aBytes[++nIdx] - 128) << 6) + - aBytes[++nIdx] - - 128 - : nPart > 239 && nPart < 248 && nIdx + 3 < nLen /* quatre octets */ - ? ((nPart - 240) << 18) + - ((aBytes[++nIdx] - 128) << 12) + - ((aBytes[++nIdx] - 128) << 6) + - aBytes[++nIdx] - - 128 - : nPart > 223 && nPart < 240 && nIdx + 2 < nLen /* trois octets */ - ? ((nPart - 224) << 12) + - ((aBytes[++nIdx] - 128) << 6) + - aBytes[++nIdx] - - 128 - : nPart > 191 && nPart < 224 && nIdx + 1 < nLen /* deux octets */ - ? ((nPart - 192) << 6) + aBytes[++nIdx] - 128 - : /* nPart < 127 ? */ /* un octet */ - nPart, + ? ((nPart - 248) << 24) + + ((aBytes[++nIdx] - 128) << 18) + + ((aBytes[++nIdx] - 128) << 12) + + ((aBytes[++nIdx] - 128) << 6) + + aBytes[++nIdx] - + 128 + : nPart > 239 && nPart < 248 && nIdx + 3 < nLen /* quatre octets */ + ? ((nPart - 240) << 18) + + ((aBytes[++nIdx] - 128) << 12) + + ((aBytes[++nIdx] - 128) << 6) + + aBytes[++nIdx] - + 128 + : nPart > 223 && nPart < 240 && nIdx + 2 < nLen /* trois octets */ + ? ((nPart - 224) << 12) + + ((aBytes[++nIdx] - 128) << 6) + + aBytes[++nIdx] - + 128 + : nPart > 191 && nPart < 224 && nIdx + 1 < nLen /* deux octets */ + ? ((nPart - 192) << 6) + aBytes[++nIdx] - 128 + : /* nPart < 127 ? */ /* un octet */ + nPart, ); } return sView; @@ -229,14 +229,14 @@ function strToUTF8Arr(sDOMStr) { nChr < 0x80 ? 1 : nChr < 0x800 - ? 2 - : nChr < 0x10000 - ? 3 - : nChr < 0x200000 - ? 4 - : nChr < 0x4000000 - ? 5 - : 6; + ? 2 + : nChr < 0x10000 + ? 3 + : nChr < 0x200000 + ? 4 + : nChr < 0x4000000 + ? 5 + : 6; } aBytes = new Uint8Array(nArrLen); diff --git a/files/fr/glossary/baseline/compatibility/index.md b/files/fr/glossary/baseline/compatibility/index.md new file mode 100644 index 00000000000000..9e1912d0108d1c --- /dev/null +++ b/files/fr/glossary/baseline/compatibility/index.md @@ -0,0 +1,33 @@ +--- +title: Baseline (compatibilité) +slug: Glossary/Baseline/Compatibility +l10n: + sourceCommit: 36527a8af0f396e8b84de3cda578d9e0fe1860f4 +--- + +{{GlossarySidebar}} + +**Baseline** identifie les fonctionnalités prises en charge par l'ensemble des navigateurs. Les développeuses et développeurs web peuvent partir du principe que les fonctionnalités Baseline fonctionnent sans problème dans les navigateurs récents. + +Une fonctionnalité Baseline, comme une API, un ensemble de propriétés CSS ou une syntaxce JavaScript, fonctionnera de façon homogène depuis au moins la version antérieure à la version actuelle pour l'ensemble des navigateurs connus (Chrome, Edge, Firefox, et Safari). + +## Badges + +🟢 Sur une page MDN, si vous voyez un bandeau Baseline vert, vous pouvez partir du principe que la fonctionnalité correspondante est implémentée dans la version actuelle et précédente des navigateurs. + +🟡 Si vous voyez un bandeau jaune indiquant que la fonctionnalité ne fait pas encore partie de Baseline, il vous faudra vérifier les données de compatibilité et tester la fonctionnalité. Vous pouvez également attendre qu'elle soit ajoutée à Baseline. + +## Considérations supplémentaires + +Baseline doit être vu comme un guide général, qui ne couvre pas l'ensemble des situations. Si votre site ou application doit fonctionner dans un navigateur pour une version à support à long terme, ou dans un navigateur ou appareil plus ancien (éventuellement non couvert par Baseline), il vous appartiendra de tester et de consulter les données de compatibilité détaillées sur MDN ou [caniuse.com](https://caniuse.com/) avant de déployer une fonctionnalité donnée. + +## Contribuer + +Baseline est un projet participatif, mené par le groupe communautaire W3C WebDX, qui base ses données sur les données de compatibilité des navigateurs fournies par MDN. Si vous avez des questions, souhaitez mettre à jour ou étendre les données de Baseline, n'hésitez pas à vous rendre sur [web-platform-dx/web-features (en anglais)](https://github.com/web-platform-dx/web-features) pour participer. + +## Voir aussi + +- [Tester sur plusieurs navigateurs](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing) +- [Le dépôt GitHub web-platform-dx/web-features](https://github.com/web-platform-dx/web-features) +- [Le groupe communautaire W3C WebDX](https://www.w3.org/community/webdx/) +- [Le dépôt GitHub mdn/browser-compat-data](https://github.com/mdn/browser-compat-data) diff --git a/files/fr/glossary/baseline/typography/index.md b/files/fr/glossary/baseline/typography/index.md new file mode 100644 index 00000000000000..f2bbfb8108bd6c --- /dev/null +++ b/files/fr/glossary/baseline/typography/index.md @@ -0,0 +1,17 @@ +--- +title: Ligne de base (typographie) +slug: Glossary/Baseline/Typography +l10n: + sourceCommit: 36527a8af0f396e8b84de3cda578d9e0fe1860f4 +--- + +{{GlossarySidebar}} + +La **ligne de base** est une notion utilisée en typographie qui représente la ligne imaginaire sur laquelle repose les différents caractères d'un texte. + +{{GlossaryDisambiguation}} + +## Voir aussi + +- [La page Wikipédia sur la ligne de base]() +- [Alignement des boîtes CSS](/fr/docs/Web/CSS/CSS_box_alignment#types_dalignement) diff --git a/files/fr/glossary/binding/index.md b/files/fr/glossary/binding/index.md new file mode 100644 index 00000000000000..17fd0af4cf266c --- /dev/null +++ b/files/fr/glossary/binding/index.md @@ -0,0 +1,22 @@ +--- +title: Name binding (liaison de nom) +slug: Glossary/Binding +l10n: + sourceCommit: 36527a8af0f396e8b84de3cda578d9e0fe1860f4 +--- + +{{GlossarySidebar}} + +En programmation, la **liaison de nom** (name binding en anglais) correspond à l'association d'un [identifiant](/fr/docs/Glossary/Identifier) avec une valeur. C'est le cas pour les [variables](/fr/docs/Glossary/Variable), mais aussi pour les [paramètres](/fr/docs/Glossary/Parameter) des fonctions et celles créées par les blocs [`try…catch`](/fr/docs/Web/JavaScript/Reference/Statements/try...catch). Certaines liaisons de nom sont implicitement créées par le langage, comme [`this`](/fr/docs/Web/JavaScript/Reference/Operators/this) et [`new.target`](/fr/docs/Web/JavaScript/Reference/Operators/new.target) en JavaScript. + +On dit d'une liaison qu'elle est [muable](/fr/docs/Glossary/Mutable) si elle peut être réaffectée et [immuable](/fr/docs/Glossary/Immutable) sinon (cela ne signifie pas que la valeur correspondante est immuable). + +Une liaison est généralement associée à une [portée](/fr/docs/Glossary/Scope). Certains langages de programmation permettent de recréer des liaisons au sein d'une même portée (on parle parfois de redéclaration), et d'autres non. En JavaScript, une liaison pourra être redéclarée selon l'instruction utilisée pour créer la liaison. + +## Voir aussi + +- [`var`](/fr/docs/Web/JavaScript/Reference/Statements/var) +- [`let`](/fr/docs/Web/JavaScript/Reference/Statements/let) +- [`const`](/fr/docs/Web/JavaScript/Reference/Statements/const) +- [`function`](/fr/docs/Web/JavaScript/Reference/Statements/function) +- [`class`](/fr/docs/Web/JavaScript/Reference/Statements/class) diff --git a/files/fr/glossary/bitwise_flags/index.md b/files/fr/glossary/bitwise_flags/index.md new file mode 100644 index 00000000000000..a3ebf358e8a0b2 --- /dev/null +++ b/files/fr/glossary/bitwise_flags/index.md @@ -0,0 +1,50 @@ +--- +title: Marqueurs binaires +slug: Glossary/Bitwise_flags +l10n: + sourceCommit: 36527a8af0f396e8b84de3cda578d9e0fe1860f4 +--- + +{{GlossarySidebar}} + +Les **marqueurs binaires** sont un ensemble de variables, généralement des valeurs numériques, qui permettent d'activer ou désactiver des fonctionnalités d'une méthode ou autre. Ces opérations sont rapides, car elles s'appliquent au niveau binaire. Les marqueurs associés sont généralement des valeurs complémentaires, représentés par des bits différents d'une même valeur (généralement un nombre hexadécimal), afin qu'une même valeur numérique permette de combiner et représenter différents marqueurs. + +Par exemple, quand on crée un objet [`GPUBuffer`](/fr/docs/Web/API/GPUBuffer) avec la méthode [`GPUDevice.createBuffer()`](/fr/docs/Web/API/GPUDevice/createBuffer) de [l'API WebGPU](/fr/docs/Web/API/WebGPU_API), on fournit une propriété `usage` dans le descripteur qui contient un ou plusieurs marqueurs pour activer certaines utilisation du tampon. + +```js +usage: GPUBufferUsage.COPY_SRC | GPUBufferUsage.MAP_WRITE; +``` + +Ces valeurs sont définies dans le même espace de nom et chacune prend une valeur hexadécimale différente : + +| Marqueur | Représentation hexadécimale | Équivalent décimal | +| ------------------------------ | --------------------------- | ------------------ | +| `GPUBufferUsage.MAP_READ` | 0x0001 | 1 | +| `GPUBufferUsage.MAP_WRITE` | 0x0002 | 2 | +| `GPUBufferUsage.COPY_SRC` | 0x0004 | 4 | +| `GPUBufferUsage.COPY_DST` | 0x0008 | 8 | +| `GPUBufferUsage.INDEX` | 0x0010 | 16 | +| `GPUBufferUsage.VERTEX` | 0x0020 | 32 | +| `GPUBufferUsage.UNIFORM` | 0x0040 | 64 | +| `GPUBufferUsage.STORAGE` | 0x0080 | 128 | +| `GPUBufferUsage.INDIRECT` | 0x0100 | 256 | +| `GPUBufferUsage.QUERY_RESOLVE` | 0x0200 | 512 | + +Quand on consulte la propriété [`GPUBuffer.usage`](/fr/docs/Web/API/GPUBuffer/usage) d'un tampon, on obtient un seul nombre qui est la somme des différents marqueurs binaires. Si on récupère `GPUBuffer.usage` à partir de celui créé dans l'exemple précédent, on obtiendra la valeur décimale 6, car : + +- La valeur décimale équivalente de `GPUBufferUsage.COPY_SRC` vaut 4 +- La valeur décimale équivalente de `GPUBufferUsage.MAP_WRITE` vaut 2 +- La somme de 4 et 2 donne 6. + +Comme les valeurs de chaque marqueur se situent sur des bits différents de la valeur composite, chaque combinaison fournira une valeur unique. Le programme peut alors déterminer quels marqueurs sont actifs à partir d'une unique valeur. Il est aussi possible de tester les marqueurs présents sur une valeur composite à l'aide des opérateurs binaires : + +```js +if (buffer.usage & GPUBufferUsage.MAP_WRITE) { + // Buffer possède le marqueur MAP_WRITE usage +} +``` + +## Voir aussi + +- [La beauté des marqueurs binaires (en anglais)](https://www.hendrik-erz.de/post/bitwise-flags-are-beautiful-and-heres-why) +- [La page sur les opérations binaires sur Wikipédia](https://fr.wikipedia.org/wiki/Op%C3%A9ration_bit_%C3%A0_bit) diff --git a/files/fr/glossary/boolean/aria/index.md b/files/fr/glossary/boolean/aria/index.md new file mode 100644 index 00000000000000..bdd463660a3076 --- /dev/null +++ b/files/fr/glossary/boolean/aria/index.md @@ -0,0 +1,16 @@ +--- +title: Attribut booléen (ARIA) +slug: Glossary/Boolean/ARIA +l10n: + sourceCommit: 36527a8af0f396e8b84de3cda578d9e0fe1860f4 +--- + +{{GlossarySidebar}} + +Un **attribut booléen** ARIA est un [attribut à valeur contrainte](/fr/docs/Glossary/Enumerated) qui inclut `true` ou `false` dans la liste des valeurs qu'il peut prendre. + +En ARIA, les attributs booléens sont uniquement des chaînes de caractères `"true"` et `"false"`. + +## Voir aussi + +- [L'entrée du glossaire pour les listes énumérées](/fr/docs/Glossary/Enumerated), qui contient plus de détails et d'exemples, notamment pour les attributs booléens ARIA. diff --git a/files/fr/glossary/boolean/html/index.md b/files/fr/glossary/boolean/html/index.md new file mode 100644 index 00000000000000..c742a4743366a8 --- /dev/null +++ b/files/fr/glossary/boolean/html/index.md @@ -0,0 +1,30 @@ +--- +title: Attribut booléen (HTML) +slug: Glossary/Boolean/HTML +l10n: + sourceCommit: 36527a8af0f396e8b84de3cda578d9e0fe1860f4 +--- + +{{GlossarySidebar}} + +En HTML, un **attribut booléen** est un attribut qui peut valoir `true` ou `false`. + +On notera qu'un attribut booléen vaut `true` s'il est présent et `false` s'il est absent. + +Voici un exemple pour l'attribut booléen HTML `checked` : + +```html + + + + + + + + + +``` + +## Voir aussi + +- [Liste énumérée](/fr/docs/Glossary/Enumerated) diff --git a/files/fr/glossary/boolean/javascript/index.md b/files/fr/glossary/boolean/javascript/index.md new file mode 100644 index 00000000000000..eb6c8379099c2c --- /dev/null +++ b/files/fr/glossary/boolean/javascript/index.md @@ -0,0 +1,17 @@ +--- +title: Booléen (JavaScript) +slug: Glossary/Boolean/JavaScript +l10n: + sourceCommit: 36527a8af0f396e8b84de3cda578d9e0fe1860f4 +--- + +{{GlossarySidebar}} + +En JavaScript, un **booléen** est une [valeur primitive](/fr/docs/Glossary/Primitive) qui peut être `true` ou `false`. + +Un objet [`Boolean`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean) est une [enveloppe (wrapper)](/fr/docs/Glossary/Wrapper) pour les valeurs booléennes primitives. + +## Voir aussi + +- [L'objet global JavaScript `Boolean`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean) +- [Les types et structures de données en JavaScript](/fr/docs/Web/JavaScript/Data_structures) diff --git a/files/fr/glossary/camel_case/index.md b/files/fr/glossary/camel_case/index.md new file mode 100644 index 00000000000000..c22f12b3357cc0 --- /dev/null +++ b/files/fr/glossary/camel_case/index.md @@ -0,0 +1,30 @@ +--- +title: Camel case +slug: Glossary/Camel_case +l10n: + sourceCommit: 4e8db9b4072e90e349f3c18b2c6edfe898cfe6a2 +--- + +{{GlossarySidebar}} + +Le **camel case** (généralement utilisé en anglais, qu'on pourrait traduire en « casse de chameau ») est une façon d'écrire des suites de mots sans espace, en mettant en majuscule la première lettre de chaque mot en majuscule (à l'exception de la toute première lettre de la séquence qui pourra être en minuscule ou en majuscule). Le nom de cette notation provient de la ressemblance entre la graphie de CamelCase et le dos d'un chameau (où les deux bosses reprennent la forme des C majuscules). + +Cette notation est généralement utilisée comme convention pour le nommage des variables et est par exemple utilisée en JavaScript. Voici des exemples de noms écrits en camel case : + +- [`console`](/fr/docs/Web/API/console) +- [`crossOriginIsolated`](/fr/docs/Web/API/crossOriginIsolated) +- [`encodeURIComponent`](/fr/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) +- [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) +- [`HTMLElement`](/fr/docs/Web/API/HTMLElement) + +Si la séquence de mots contient des acronymes (comme `URI` et `HTML`), les pratiques peuvent varier. Parfois, on garde l'ensemble de l'acronyme en majuscules (voir `encodeURIComponent` ci-avant). Si plusieurs acronymes se suivent, cela peut réduire la lisibilité et être source de confusion, par exemple avec `XMLHTTPRequest` et certains préfèrent n'écrire que la première lettre de chaque mot en majuscule (`XmlHttpRequest`). Pour cet exemple, la variable globale actuelle, [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest), utilise une combinaison des deux. + +Lorsque la première lettre de la séquence est toujours écrite en majuscule, on parlera de Pascal case (également utilisé tel quel en français). + +Le camel case est utilisé par convention en JavaScript, Java et dans d'autres langages de programmation. + +## Voir aussi + +- [Le snake case qui consiste à utiliser des tirets bas comme séparateurs (`snake_case`)](/fr/docs/Glossary/Snake_case) +- [Le kebab case qui consiste à utiliser des tirets comme séparateurs (`kebab-case`)](/fr/docs/Glossary/Kebab_case) +- [La règle `naming-convention` de typescript-eslint](https://typescript-eslint.io/rules/naming-convention/) diff --git a/files/fr/glossary/code_unit/index.md b/files/fr/glossary/code_unit/index.md new file mode 100644 index 00000000000000..0894092682b378 --- /dev/null +++ b/files/fr/glossary/code_unit/index.md @@ -0,0 +1,39 @@ +--- +title: Codet (code unit) +slug: Glossary/Code_unit +l10n: + sourceCommit: 4e8db9b4072e90e349f3c18b2c6edfe898cfe6a2 +--- + +{{GlossarySidebar}} + +Un **codet** (code unit en anglais) correspond au composant élémentaire utilisé par un système d'encodage des caractères (comme UTF-8 ou UTF-16). Un système d'encodage des caractères utilise un ou plusieurs codets pour encoder un [point de code](/fr/docs/Glossary/Code_point) Unicode. + +En UTF-16 (le système d'encodage utilisé pour les chaînes de caractères en JavaScript), les codets sont des valeurs sur 16 bits. Cela signifie que les opérations pour manipuler les index ou obtenir la longueur d'une chaîne de caractères manipulent ces codets de 16 bits. Toutefois, ces unités ne correspondent pas toujours exactement à ce que nous interprétons comme étant des caractères. + +Par exemple, certains caractères avec des diacritiques comme des accents peuvent être représentés en UTF-16 à l'aide de deux codets : + +```js +const maChaine = "\u006E\u0303"; +console.log(maChaine); // ñ +console.log(maChaine.length); // 2 +``` + +De plus, 16 bits ne suffisent pas à exprimer tous les points de code définis par Unicode. De nombreux points de code Unicode sont encodés à l'aide d'une paire de deux codets UTF-16 (parfois appelés demi-codets ou surrogate pair en anglais) : + +```js +const visage = "🥵"; +console.log(visage.length); // 2 +``` + +La méthode JavaScript [`codePointAt()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/codePointAt) de l'objet [`String`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String) permet de récupérer les codets Unicode à partir de la forme encodée : + +```js +const visage = "🥵"; +console.log(visage.codePointAt(0)); // 129397 soit 0x1F975 en hexadécimal +``` + +## Voir aussi + +- [Gestion des caractères UTF-16, points de code Unicode et groupes de graphèmes](/fr/docs/Web/JavaScript/Reference/Global_Objects/String#caractères_utf-16_points_de_code_Unicode_et_groupes_de_graphèmes) +- [La FAQ sur l'encodage Unicode (en anglais)](https://www.unicode.org/faq/utf_bom.html) diff --git a/files/fr/glossary/composite_operation/index.md b/files/fr/glossary/composite_operation/index.md new file mode 100644 index 00000000000000..b11419f7f08c15 --- /dev/null +++ b/files/fr/glossary/composite_operation/index.md @@ -0,0 +1,26 @@ +--- +title: Opération composite +slug: Glossary/Composite_operation +l10n: + sourceCommit: 4e8db9b4072e90e349f3c18b2c6edfe898cfe6a2 +--- + +{{GlossarySidebar}} + +En CSS, la valeur d'une propriété dans une règle CSS est la _valeur sous-jacente_ de cette propriété, pour cette même propriété, la valeur dans [une étape d'animation (keyframe)](/fr/docs/Web/CSS/@keyframes) est sa _valeur effective_. + +L'_opération composite_ est l'opération qui permet de combiner la valeur effective et la valeur sous-jacente pour produire la valeur effective finale pour l'étape d'animation. Il existe trois types d'opérations composites : + +- Remplacement + - : La valeur effective remplace la valeur sous-jacente. La valeur effective finale correspond à la valeur effective originelle. +- Ajout + - : La valeur effective est ajoutée à la valeur sous-jacente. +- Accumulation + - : La valeur effective est combinée à la valeur sous-jacente. + +> **Note :** En CSS, l'opération composite s'applique uniquement aux opérations. + +## Voir aussi + +- [`animation-composition`](/fr/docs/Web/CSS/animation-composition) +- [`KeyframeEffect.composite`](/fr/docs/Web/API/KeyframeEffect/composite) diff --git a/files/fr/glossary/cors-safelisted_request_header/index.md b/files/fr/glossary/cors-safelisted_request_header/index.md new file mode 100644 index 00000000000000..082281d1dc32cd --- /dev/null +++ b/files/fr/glossary/cors-safelisted_request_header/index.md @@ -0,0 +1,36 @@ +--- +title: En-tête de requête sûr pour le CORS +slug: Glossary/CORS-safelisted_request_header +l10n: + sourceCommit: 4e8db9b4072e90e349f3c18b2c6edfe898cfe6a2 +--- + +{{GlossarySidebar}} + +Un [en-tête de requêtes sûr pour le CORS (CORS-safelisted request header)](https://fetch.spec.whatwg.org/#cors-safelisted-request-header) est l'un des [en-têtes HTTP](/fr/docs/Web/HTTP/Headers) suivants : + +- [`Accept`](/fr/docs/Web/HTTP/Headers/Accept) +- [`Accept-Language`](/fr/docs/Web/HTTP/Headers/Accept-Language) +- [`Content-Language`](/fr/docs/Web/HTTP/Headers/Content-Language) +- [`Content-Type`](/fr/docs/Web/HTTP/Headers/Content-Type) +- [`Range`](/fr/docs/Web/HTTP/Headers/Range) + +Lorsqu'une requête ne contient que ces en-têtes (et répond aux critères indiqués après), il n'y a pas besoin d'une [requête préalable (preflight request)](/fr/docs/Glossary/Preflight_request) dans le contexte du [CORS](/fr/docs/Glossary/CORS). + +Il est possible d'indiquer d'autres en-têtes comme sûrs à l'aide de l'en-tête [`Access-Control-Allow-Headers`](/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Headers). `Access-Control-Allow-Headers` permet également de lister les en-têtes précédents pour contourner les restrictions supplémentaires décrites ensuite. + +## Restrictions supplémentaires + +Les en-têtes sûr pour le CORS doivent également respecter ces critères : + +- Les valeurs pour [`Accept-Language`](/fr/docs/Web/HTTP/Headers/Accept-Language) et [`Content-Language`](/fr/docs/Web/HTTP/Headers/Content-Language) ne peuvent contenir que les caractères `0-9`, `A-Z`, `a-z`, espace ou `*,-.;=`. +- [`Accept`](/fr/docs/Web/HTTP/Headers/Accept) et [`Content-Type`](/fr/docs/Web/HTTP/Headers/Content-Type) ne peuvent pas contenir un octet d'en-tête non-sûr : `0x00-0x1F` (exception faite de `0x09 (HT)` qui est autorisé), `"():<>?@[\]{}`, et `0x7F (DEL)`. +- [`Content-Type`](/fr/docs/Web/HTTP/Headers/Content-Type) doit être un type MIME qui (lorsqu'on ignore les paramètres) vaut `application/x-www-form-urlencoded`, ou `multipart/form-data`, ou `text/plain`. +- La valeur de [`Range`](/fr/docs/Web/HTTP/Headers/Range) doit être un seul intervalle d'octets sous la forme `bytes=[0-9]+-[0-9]*`. Voir la documentation de [`Range`](/fr/docs/Web/HTTP/Headers/Range) pour plus de détails. +- Pour n'importe quel en-tête, la longueur de la valeur ne peut excéder 128. + +## Voir aussi + +- [En-tête de réponse sûr pour le CORS](/fr/docs/Glossary/CORS-safelisted_response_header) +- [Nom d'en-tête interdit](/fr/docs/Glossary/Forbidden_header_name) +- [En-tête de requête](/fr/docs/Glossary/Request_header) diff --git a/files/fr/glossary/cors-safelisted_response_header/index.md b/files/fr/glossary/cors-safelisted_response_header/index.md new file mode 100644 index 00000000000000..6e823b4ed51629 --- /dev/null +++ b/files/fr/glossary/cors-safelisted_response_header/index.md @@ -0,0 +1,45 @@ +--- +title: En-tête de réponse sûr pour le CORS +slug: Glossary/CORS-safelisted_response_header +l10n: + sourceCommit: 4e8db9b4072e90e349f3c18b2c6edfe898cfe6a2 +--- + +{{GlossarySidebar}} + +Un _en-tête de réponse sûr pour le CORS_ est un [en-tête HTTP](/fr/docs/Web/HTTP/Headers) d'une réponse [CORS](/fr/docs/Web/HTTP/CORS) dont on considère qu'il est sûr et peut être exposé aux scripts côté client. Seuls les en-têtes de réponse sûrs sont disponibles pour les pages web. + +Par défaut, la liste des en-têtes de réponse sûrs contient : + +- [`Cache-Control`](/fr/docs/Web/HTTP/Headers/Cache-Control) +- [`Content-Language`](/fr/docs/Web/HTTP/Headers/Content-Language) +- [`Content-Length`](/fr/docs/Web/HTTP/Headers/Content-Length) +- [`Content-Type`](/fr/docs/Web/HTTP/Headers/Content-Type) +- [`Expires`](/fr/docs/Web/HTTP/Headers/Expires) +- [`Last-Modified`](/fr/docs/Web/HTTP/Headers/Last-Modified) +- [`Pragma`](/fr/docs/Web/HTTP/Headers/Pragma) + +Des en-têtes supplémentaires peuvent être indiqués comme sûr à l'aide de l'en-tête [`Access-Control-Expose-Headers`](/fr/docs/Web/HTTP/Headers/Access-Control-Expose-Headers). + +> **Note :** Initialement, [`Content-Length`](/fr/docs/Web/HTTP/Headers/Content-Length) ne faisait pas partie de la liste par défaut des en-têtes de réponse sûrs (voir [la pull request 626 du dépôt Fetch](https://github.com/whatwg/fetch/pull/626)). + +## Exemples + +### Étendre la liste sûre + +La liste des en-têtes de réponse sûrs pour le CORS peut être étendue à l'aide de l'en-tête [`Access-Control-Expose-Headers`](/fr/docs/Web/HTTP/Headers/Access-Control-Expose-Headers) : + +```http +Access-Control-Expose-Headers: X-Custom-Header, Content-Encoding +``` + +## Voir aussi + +- [HTTP](/fr/docs/Web/HTTP) +- [En-têtes HTTP](/fr/docs/Web/HTTP/Headers) +- [`Access-Control-Expose-Headers`](/fr/docs/Web/HTTP/Headers/Access-Control-Expose-Headers) +- Entrées du [glossaire](/fr/docs/Glossary) + - [CORS](/fr/docs/Glossary/CORS) + - [En-tête de requête sûr pour le CORS](/fr/docs/Glossary/CORS-safelisted_request_header) + - [Nom d'en-tête interdit](/fr/docs/Glossary/Forbidden_header_name) + - [En-tête de requête](/fr/docs/Glossary/Request_header) diff --git a/files/fr/glossary/enumerated/index.md b/files/fr/glossary/enumerated/index.md new file mode 100644 index 00000000000000..92476705188865 --- /dev/null +++ b/files/fr/glossary/enumerated/index.md @@ -0,0 +1,32 @@ +--- +title: Type énuméré +slug: Glossary/Enumerated +l10n: + sourceCommit: cdb0dad4aeabda32b85c397f5e45304f95edc0d1 +--- + +{{GlossarySidebar}} + +En informatique, un type **énuméré** est un type de données qui consiste en un ensemble restreint de valeurs nommées. + +## Les attributs HTML énumérés + +En HTML, [les attributs énumérés (parfois appelés à valeur contrainte)](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#enumerated-attribute) sont des attributs dont les valeurs possibles sont un ensemble prédéfini de chaînes de caractères. Ainsi, l'attribut HTML universel [`dir`](/fr/docs/Web/HTML/Global_attributes/dir) possède trois valeurs valides : `ltr`, `rtl`, et `auto`. + +Chaque attribut énuméré possède une valeur par défaut lorsque l'attribut est présent sans sa valeur et une valeur par défaut lorsqu'une valeur invalide lui est associée. À la différence des attributs HTML [booléens](/fr/docs/Glossary/Boolean) qui valent toujours vrai que la valeur soit présente, omise ou invalide, les attributs HTML énumérés peuvent avoir une valeur par défaut différente en fonction que la valeur est omise ou invalide. Par exemple, l'attribut HTML universel [`contenteditable`](/fr/docs/Web/HTML/Global_attributes/contenteditable) n'a que deux valeurs valides : `true` et `false`. Si l'attribut est présent, mais qu'aucune valeur n'est indiquée, la valeur par défaut sera `true`. En revanche, si une valeur invalide est utilisée (par exemple `contenteditable="contenteditable"`), la valeur utilisée effectivement correspondra à un troisième état, `inherit`. + +## Les attributs ARIA énumérés + +Les états et propriétés ARIA font partie de HTML et ont également des attributs énumérés. Si un attribut ARIA peut prendre la valeur `true` ou `false`, on considèrera généralement qu'un attribut omis vaut `false` et qu'une valeur invalide vaut `true` (la valeur par défaut pour l'utilisation d'une valeur omise ou d'une chaîne de caractères vide comme valeur dépendra de l'attribut). + +L'attribut `aria-current` accepte par exemple une liste de valeurs limitée qui contient `page`, `step`, `location`, `date`, `time`, `true`, et `false`. Dans ce cas, si l'attribut est absent, vaut la chaîne de caractères vide, est présent sans valeur ou est paramétré avec `aria-current="false"`, l'attribut sera considéré comme faux et ne sera pas exposé. Toute valeur qui est une chaîne de caractères non vide et qui ne fait pas partie de la liste indiquée sera considérée comme équivalente à l'utilisation de `aria-current="true"`. + +## Les propriétés JavaScript énumérables + +En JavaScript, les propriétés énumérables sont les propriétés dont le marqueur interne `enumerable` est vrai (ce qui est le comportement par défaut pour les propriétés créées avec une affectation simple ou un initialisateur de propriétés. La plupart des mécanismes d'itération (comme les boucles [`for…in`](/fr/docs/Web/JavaScript/Reference/Statements/for...in) ou la méthode [`Object.keys()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/keys)) ne parcourent que les clés énumérables. + +## Voir aussi + +- [Booléen](/fr/docs/Glossary/Boolean) +- [Les types et structures de données en JavaScript](/fr/docs/Web/JavaScript/Data_structures) +- [Les attributs énumérés HTML dans le standard HTML (en anglais)](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#enumerated-attribute) diff --git a/files/fr/glossary/etld/index.md b/files/fr/glossary/etld/index.md new file mode 100644 index 00000000000000..891da76428f4d0 --- /dev/null +++ b/files/fr/glossary/etld/index.md @@ -0,0 +1,50 @@ +--- +title: eTLD +slug: Glossary/eTLD +l10n: + sourceCommit: cdb0dad4aeabda32b85c397f5e45304f95edc0d1 +--- + +{{GlossarySidebar}} + +L'acronyme **eTLD** signifie « effective top-level domain  (soit « domaine de plus haut niveau effectif » en français) et correspond au domaine sous lequel d'autres domaines peuvent être par une organisation. + +Un domaine de plus haut niveau (top level domain, ou TLD) correspond au domaine qui suit le point final. Ainsi, le domaine de de plus haut niveau pour `crookedtimber.org` est `org`. + +Si tous les domaines situés juste en dessous des domaines de plus haut niveau pouvaient être enregistrés par des organisations, on pourra avoir les domaines suivants, appartenant à la même organisation : + +```plain + xyz.org +abc.xyz.org +def.xyz.org +``` + +Toutfois, cela ne fonctionne pas toujours ainsi et certains bureaux d'enregistrement permettent aux organisations d'enregistrer des domaines en dessous du niveau le plus haut. Par exemple, `sussex.ac.uk` et `aber.ac.uk` sont enregistrés par des organisations différentes. + +Cette gestion des niveaux dépend des règles de gestion du bureau d'enregistrement et il est donc impossible d'utiliser un algorithme pour déterminer si un suffixe donné (comme `ac.uk`) permet un enregistrement de domaine public ou non. La [liste des suffixes publics](https://publicsuffix.org/) est une liste maintenue de l'ensemble des suffixes sous lesquels des organisations peuvent enregistrer des noms de domaines. Autrement dit, il s'agit d'une liste d'eTLD. + +La notion associée **eTLD+1** signifie l'eTLD associée à la partie inférieure du nom de domaine. Tous les domaines d'un même eTLD+1 appartiennent à une même organisation. + +Les domaines qui suivent sont des exemples de domaines eTLD+1 : + +- `crookedtimber.org` +- `theguardian.com` +- `sussex.ac.uk` +- `aber.ac.uk` + +Cela signifie que tous les domaines sous chacun de ces domaines appartiennent à la même organisation. Par exemple : + +```plain + film.theguardian.com +music.theguardian.com +``` + +```plain + news.sussex.ac.uk + blog.sussex.ac.uk +admissions.sussex.ac.uk +``` + +## Voir aussi + +- [La liste des suffixes publics (en anglais)](https://publicsuffix.org/) diff --git a/files/fr/glossary/rtcp/index.md b/files/fr/glossary/rtcp/index.md new file mode 100644 index 00000000000000..b499d89e84d3dc --- /dev/null +++ b/files/fr/glossary/rtcp/index.md @@ -0,0 +1,20 @@ +--- +title: RTCP (RTP Control Protocol) +slug: Glossary/RTCP +l10n: + sourceCommit: 5abb200b37e5b6fe5f85132bb3d6dcc3aa4a6f4c +--- + +{{GlossarySidebar}} + +Le **protocole de contrôle RTP** (ou RTP Control Protocol en anglais, qui donne l'acronyme **RTCP**) est un protocole partenaire du protocole [RTP](/fr/docs/Glossary/RTP). RTCP est utilisé pour la collecte d'informations statistiques et le contrôle d'une session de diffusion média RTP. + +Ces deux protocoles permettent de séparer, sur le plan logique et fonctionnel, les paquets de contrôle et de statistiques du flux média, tout en utilisant la couche de transmission des paquets sous-jacente pour transmettre les signaux RTCP ainsi que le contenu média et RTP. + +RTCP transmet des paquets de contrôle à intervalle régulier à l'ensemble des participants d'une session RTP en utilisant le même mécanisme que celui utilisé pour la transmission des paquets de données. C'est le protocole sous-jacent qui gère le multiplexage des paquets de données et de contrôle, il pourra éventuellement utiliser des ports réseau distincts pour chaque type de paquet. + +## Voir aussi + +- [Introduction au protocole de transport en temps réel](/fr/docs/Web/API/WebRTC_API/Intro_to_RTP) +- [La page Wikipédia sur RTCP](https://fr.wikipedia.org/wiki/Real-time_Transport_Control_Protocol) +- [La section 6 de la RFC 3550 qui définit ce protocole (en anglais)](https://datatracker.ietf.org/doc/html/rfc3550#section-6) diff --git a/files/fr/glossary/rtp/index.md b/files/fr/glossary/rtp/index.md index f98e8ad2c0775e..27899b3ccb035f 100644 --- a/files/fr/glossary/rtp/index.md +++ b/files/fr/glossary/rtp/index.md @@ -1,20 +1,20 @@ --- -title: RTP (Real-time Transport Protocol) and SRTP (Secure RTP) +title: RTP (Real-time Transport Protocol) et SRTP (Secure RTP) slug: Glossary/RTP +l10n: + sourceCommit: 5abb200b37e5b6fe5f85132bb3d6dcc3aa4a6f4c --- {{GlossarySidebar}} -Le **Real-time Transport Protocol** (**RTP**) est un protocole réseau qui décrit comment transmettre divers médias (audio, vidéo) d'un point de terminaison à un autre en temps réel. RTP convient aux applications de streaming vidéo, à la téléphonie sur {{glossary ("IP")}} comme Skype et aux technologies de conférence. +Le **Real-time Transport Protocol** (abrégé en **RTP**, et qu'on pourrait traduire en français par « protocole de transport en temps réel ») est un protocole réseau qui décrit comment transmettre divers médias (audio, vidéo) d'un point de terminaison à un autre en temps réel. RTP convient aux applications de diffusion vidéo, à la téléphonie [VoIP](/fr/docs/Glossary/VoIP) comme Skype et aux outils de visioconférence. -La version sécurisée de RTP, **SRTP**, est utilisé par [WebRTC](/fr/docs/Web/API/WebRTC_API), et utilise le cryptage et l'authentification pour minimiser le risque d'attaques par déni de service et de failles de sécurité. +La version sécurisée de RTP, **SRTP**, est utilisé par [WebRTC](/fr/docs/Web/API/WebRTC_API), et utilise le chiffrement et l'authentification pour minimiser le risque d'attaques par déni de service et certaines failles de sécurité. -RTP est rarement utilisé seul; à la place, il est utilisé en conjonction avec d'autres protocoles comme {{glossary("RTSP")}} et {{glossary("SDP")}}. +RTP est rarement utilisé seul. Il est plus généralement utilisé en conjonction avec d'autres protocoles comme [RTSP](/fr/docs/Glossary/RTSP) et [SDP](/fr/docs/Glossary/SDP). -## Apprendre plus +## Voir aussi -### Culture générale - -- [Introduction au Real-time Transport Protocol](/fr/docs/Web/API/WebRTC_API/Intro_to_RTP) +- [Introduction au protocole de transport en temps réel](/fr/docs/Web/API/WebRTC_API/Intro_to_RTP) - [RTP](https://fr.wikipedia.org/wiki/Real-time_Transport_Protocol) sur Wikipédia -- {{RFC(3550)}} (l'un des documents qui spécifie précisément le fonctionnement du protocole) +- La [RFC 3550 (en anglais)](https://datatracker.ietf.org/doc/html/rfc3550) qui est un des documents spécifiant le protocole diff --git a/files/fr/glossary/uuid/index.md b/files/fr/glossary/uuid/index.md new file mode 100644 index 00000000000000..cd1c6929ab3175 --- /dev/null +++ b/files/fr/glossary/uuid/index.md @@ -0,0 +1,21 @@ +--- +title: UUID +slug: Glossary/UUID +l10n: + sourceCommit: 59adb56b83da91ee1744b723f2f7a37195c2ec82 +--- + +{{GlossarySidebar}} + +Un **identifiant universel unique** (dont l'acronyme anglais est **UUID** pour Universally Unique Identifier) est un libellé utilisé pour identifier de façon unique une ressource parmi toutes les autres ressources du même type. + +Les systèmes informatiques génèrent des UUID localement en utilisant de très grands nombres aléatoires. En théorie, ces identifiants n'ont pas à être globalement uniques, même si la probabilité d'obtenir des doublons est très faible. Si un ou des systèmes ont besoin d'identifiants absolument uniques, ceux-ci doivent alors être émis par une autorité centrale. + +Les UUID sont des valeurs sur 128 bits qui sont représentées généralement comme une chaîne de 36 caractères au format `123e4567-e89b-12d3-a456-426614174000` (soit 5 chaînes de chiffres hexadécimaux, séparées par des tirets). Il existe plusieurs versions et formats qui dépendent du mode de calcul, certains UUID incluent par exemple une information temporelle. + +La définition formelle d'un UUID peut être trouvée dans [la RFC4122](https://www.rfc-editor.org/rfc/rfc4122). + +## Voir aussi + +- [UUID](https://fr.wikipedia.org/wiki/Universally_unique_identifier) sur Wikipédia +- [`Crypto.randomUUID()`](/fr/docs/Web/API/Crypto/randomUUID) diff --git a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md index 8f2305745abf99..75b64d4c89e9ff 100644 --- a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md +++ b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md @@ -65,7 +65,7 @@ Les pages web peuvent sembler assez différentes les unes des autres, mais elles L'exemple simple affiché ci-dessus n'est pas très beau, mais il est parfaitement correct pour illustrer un exemple typique de mise en page d'un site web. Certains sites Web ont plus de colonnes, d'autres sont beaucoup plus complexes, mais vous voyez l'idée. Avec le bon CSS, vous pouvez utiliser à peu près n'importe quel élément pour envelopper les différentes sections et obtenir l'apparence que vous voulez, mais comme nous l'avons déjà dit, nous devons respecter la sémantique et **utiliser le bon élément pour le bon travail**. -C'est parce que le visuel ne raconte pas toute l'histoire. Nous utilisons la couleur et la taille des caractères pour attirer l'attention des utilisateurs malvoyants sur les parties les plus utiles du contenu, comme le menu de navigation et les liens connexes, mais qu'en est-il des personnes malvoyantes par exemple, qui pourraient ne pas trouver très utiles des concepts tels que le « rose » et la « grande police » ? +C'est parce que le visuel ne raconte pas toute l'histoire. Nous utilisons la couleur et la taille des caractères pour attirer l'attention des utilisateurs sur les parties les plus utiles du contenu, comme le menu de navigation et les liens connexes, mais qu'en est-il des personnes malvoyantes par exemple, qui pourraient ne pas trouver très utiles des concepts tels que le « rose » et la « grande police » ? > **Note :** Les daltoniens représentent environ [8% de la population mondiale](http://www.color-blindness.com/2006/04/28/colorblind-population/) ou, en d'autres termes, environ 1 homme sur 12 et 1 femme sur 200 sont daltoniens. Les personnes aveugles et malvoyantes représentent environ 4 à 5 % de la population mondiale (en 2012, il y avait [285 millions de personnes aveugles et malvoyantes](https://fr.wikipedia.org/wiki/Déficience_visuelle) dans le monde, alors que la population totale était [d'environ 7 milliards](https://fr.wikipedia.org/wiki/Population_mondiale) d'habitants). diff --git a/files/fr/learn/javascript/asynchronous/introducing/index.md b/files/fr/learn/javascript/asynchronous/introducing/index.md index 3342e96a33e36f..6e8573a40104e4 100644 --- a/files/fr/learn/javascript/asynchronous/introducing/index.md +++ b/files/fr/learn/javascript/asynchronous/introducing/index.md @@ -109,9 +109,8 @@ function genererNbPremiers(quota) { document.querySelector("#generer").addEventListener("click", () => { const quota = document.querySelector("#quota").value; const nbPremiers = genererNbPremiers(quota); - document.querySelector( - "#output", - ).textContent = `Génération de ${quota} nombres premiers terminée !`; + document.querySelector("#output").textContent = + `Génération de ${quota} nombres premiers terminée !`; }); document.querySelector("#recharger").addEventListener("click", () => { @@ -177,9 +176,8 @@ function genererNbPremiers(quota) { document.querySelector("#generer").addEventListener("click", () => { const quota = document.querySelector("#quota").value; const nbPremiers = genererNbPremiers(quota); - document.querySelector( - "#output", - ).textContent = `Génération de ${quota} nombres premiers terminée !`; + document.querySelector("#output").textContent = + `Génération de ${quota} nombres premiers terminée !`; }); document.querySelector("#recharger").addEventListener("click", () => { diff --git a/files/fr/learn/javascript/asynchronous/introducing_workers/index.md b/files/fr/learn/javascript/asynchronous/introducing_workers/index.md index ce7db56390a489..22e9ff263ec540 100644 --- a/files/fr/learn/javascript/asynchronous/introducing_workers/index.md +++ b/files/fr/learn/javascript/asynchronous/introducing_workers/index.md @@ -75,9 +75,8 @@ function generatePrimes(quota) { document.querySelector("#generate").addEventListener("click", () => { const quota = document.querySelector("#quota").value; const primes = generatePrimes(quota); - document.querySelector( - "#output", - ).textContent = `Génération de ${quota} nombres premiers terminée !`; + document.querySelector("#output").textContent = + `Génération de ${quota} nombres premiers terminée !`; }); document.querySelector("#reload").addEventListener("click", () => { @@ -159,9 +158,8 @@ document.querySelector("#generate").addEventListener("click", () => { // du message, on met à jour la zone de sortie avec un texte, indiquant aussi // le quantité de nombres premiers générés. worker.addEventListener("message", (message) => { - document.querySelector( - "#output", - ).textContent = `Génération de ${message.data} nombres premiers terminée !`; + document.querySelector("#output").textContent = + `Génération de ${message.data} nombres premiers terminée !`; }); document.querySelector("#reload").addEventListener("click", () => { diff --git a/files/fr/web/api/console/table/index.md b/files/fr/web/api/console/table/index.md index af5ebc98def65e..1f00bae34d0f5e 100644 --- a/files/fr/web/api/console/table/index.md +++ b/files/fr/web/api/console/table/index.md @@ -1,135 +1,167 @@ --- -title: Console.table +title: "console : méthode table()" slug: Web/API/console/table +l10n: + sourceCommit: 59adb56b83da91ee1744b723f2f7a37195c2ec82 --- {{APIRef("Console API")}} -Affiche des données tabulaires sous la forme d'un tableau. +La méthode **`console.table()`** permet d'afficher des données tabulaires sous la forme d'un tableau. -Cette fonction prend un argument obligatoire `data`, qui doit être un tableau (Array) ou un objet, et un argument facultatif `columns`. +Cette fonction prend un argument obligatoire, `data`, qui doit être un tableau ([`Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array)) ou un objet, et un argument facultatif `columns`. -Il affiche `data` sous la forme d'un tableau. Chaque élément dans le tableau fourni (Array) sera affiché comme une ligne dans le tableau. (ou les propriétés énumérables s'il s'agit d'un objet) +La fonction affiche `data` sous la forme d'un tableau. Chaque élément du tableau fourni (ou chaque propriété énumérable dans le cas d'un objet) sera affiché comme une ligne dans le tableau dans la console. -La première colonne dans le tableau sera intitulé `(index)`. Si `data` est un tableau (Array), alors les valeurs de cette colonne seront les index du tableau (Array). Si `data` est un objet, alors ses valeurs seront les noms des propriétés.À noter (dans Firefox) : `console.table` est limité à l'affichage de 1000 lignes (la première ligne est l'index étiqueté) +La première colonne dans le tableau sera intitulée `(index)`. Si `data` est un tableau ([`Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array)), alors les valeurs de cette colonne seront les indices du tableau JavaScript. Si `data` est un objet, ce seront les noms des propriétés qui seront affichés dans cette colonne `(index)`. + +> **Note :** Dans Firefox, `console.table()` limite l'affichage aux 1000 premières lignes. {{AvailableInWorkers}} ### Collections de données primitives -`data` peut contenir un tableau ou un objet. +L'argument `data` peut être un tableau ou un objet. ```js // un tableau de chaînes de caractères -console.table(["apples", "oranges", "bananas"]); +console.table(["pommes", "oranges", "bananes"]); ``` -![](console-table-array.png) +| (index) | Valeurs | +| ------- | --------- | +| 0 | 'pommes' | +| 1 | 'oranges' | +| 2 | 'bananes' | ```js // un objet dont les propriétés sont des chaînes de caractères -function Person(firstName, lastName) { - this.firstName = firstName; - this.lastName = lastName; +function Personne(prenom, nomFamille) { + this.prenom = prenom; + this.nomFamille = nomFamille; } -var me = new Person("John", "Smith"); +const moi = new Personne("Jean", "Biche"); -console.table(me); +console.table(moi); ``` -![](console-table-simple-object.png) +| (index) | Valeurs | +| ---------- | ------- | +| prenom | 'Jean' | +| nomFamille | 'Biche' | -### Collections de données composées +### Collections de données composites -Si les éléments d'un tableau, ou les propriétés d'un objet, sont eux-mêmes des tableaux ou des objets, alors ces éléments ou propriétés sont énumérés dans chaque ligne, un élément par colonne : +Si les éléments d'un tableau ou les propriétés d'un objet sont eux-mêmes des tableaux ou des objets, alors ces éléments ou propriétés sont énumérés dans chaque ligne, avec un élément par colonne : ```js // un tableau de tableaux -var people = [ - ["John", "Smith"], - ["Jane", "Doe"], - ["Emily", "Jones"], +const personnes = [ + ["Tyrone", "Dupont"], + ["Janet", "Martin"], + ["Maria", "Cruz"], ]; -console.table(people); +console.table(personnes); ``` -![Un tableau qui affiche un tableau de tableaux](console-table-array-of-array.png) +| (index) | 0 | 1 | +| ------- | -------- | -------- | +| 0 | 'Tyrone' | 'Dupont' | +| 1 | 'Janet' | 'Martin' | +| 2 | 'Maria' | 'Cruz' | ```js // un tableau d'objets -function Person(firstName, lastName) { - this.firstName = firstName; - this.lastName = lastName; +function Personne(prenom, nomFamille) { + this.prenom = prenom; + this.nomFamille = nomFamille; } -var john = new Person("John", "Smith"); -var jane = new Person("Jane", "Doe"); -var emily = new Person("Emily", "Jones"); +const tyrone = new Personne("Tyrone", "Dupont"); +const janet = new Personne("Janet", "Martin"); +const maria = new Personne("Maria", "Cruz"); -console.table([john, jane, emily]); +console.table([tyrone, janet, maria]); ``` Notez que si le tableau contient des objets, alors les colonnes seront nommées avec les noms des propriétés. -![Un tableau qui affiche un tableau d'objets](console-table-array-of-objects.png) +| (index) | prenom | nomFamille | +| ------- | -------- | ---------- | +| 0 | 'Tyrone' | 'Dupont' | +| 1 | 'Janet' | 'Martin' | +| 2 | 'Maria' | 'Cruz' | ```js // un objet contenant des propriétés qui sont des objets -var family = {}; +const famille = {}; -family.mother = new Person("Jane", "Smith"); -family.father = new Person("John", "Smith"); -family.daughter = new Person("Emily", "Smith"); +famille.mere = new Personne("Janet", "Dupont"); +famille.pere = new Personne("Tyrone", "Dupont"); +famille.fille = new Personne("Maria", "Dupont"); -console.table(family); +console.table(famille); ``` -![Un tableau affichant des objets composés d'objets](console-table-object-of-objects.png) +| (index) | prenom | nomFamille | +| ------- | -------- | ---------- | +| fille | 'Maria' | 'Dupont' | +| pere | 'Tyrone' | 'Dupont' | +| mere | 'Janet' | 'Dupont' | ### Restreindre les colonnes affichées -Par défaut, `console.table()` liste tous les éléments pour chaque ligne. Vous pouvez utiliser le paramètre facultatif `columns` pour sélectionner un sous-ensemble de colonnes à afficher : +Par défaut, `console.table()` liste tous les éléments pour chaque ligne. Vous pouvez utiliser le paramètre facultatif `columns` pour sélectionner un sous-ensemble de colonnes à afficher : ```js -// un tableau d'objets, affichant seulement firstName +// un tableau d'objets, affichant seulement prenom -function Person(firstName, lastName) { - this.firstName = firstName; - this.lastName = lastName; +function Personne(prenom, nomFamille) { + this.prenom = prenom; + this.nomFamille = nomFamille; } -var john = new Person("John", "Smith"); -var jane = new Person("Jane", "Doe"); -var emily = new Person("Emily", "Jones"); +const tyrone = new Personne("Tyrone", "Dupont"); +const janet = new Personne("Janet", "Martin"); +const maria = new Personne("Maria", "Cruz"); -console.table([john, jane, emily], ["firstName"]); +console.table([tyrone, janet, maria], ["prenom"]); ``` -![Un tableau affichant un tableau d'objets dont la sortie est filtrée](console-table-array-of-objects-firstname-only.png) +| (index) | prenom | +| ------- | -------- | +| 0 | 'Tyrone' | +| 1 | 'Janet' | +| 2 | 'Maria' | -### Ordonner les colonnes +### Trier les colonnes -Vous pouvez ordonner les colonnes en cliquant sur l'intitulé de la colonne. +Vous pouvez trier les colonnes en cliquant sur l'intitulé de la colonne. ## Syntaxe -```js -console.table(data [, columns]); +```js-nolint +table(data) +table(data, columns) ``` ### Paramètres - `data` - - : La donnée à afficher. Doit être un tableau ou un objet. + - : Les données à afficher. Doit être un tableau ou un objet. - `columns` - : Un tableau contenant les noms des colonnes à inclure dans la sortie. +### Valeur de retour + +Aucune ([`undefined`](/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined)). + ## Spécifications {{Specifications}} diff --git a/files/fr/web/api/crypto/randomuuid/index.md b/files/fr/web/api/crypto/randomuuid/index.md new file mode 100644 index 00000000000000..0811d8b5f538ca --- /dev/null +++ b/files/fr/web/api/crypto/randomuuid/index.md @@ -0,0 +1,49 @@ +--- +title: "Crypto : méthode randomUUID()" +slug: Web/API/Crypto/randomUUID +l10n: + sourceCommit: 59adb56b83da91ee1744b723f2f7a37195c2ec82 +--- + +{{APIRef("Web Crypto API")}}{{SecureContext_header}} + +La méthode **`randomUUID()`**, rattachée à l'interface [`Crypto`](/fr/docs/Web/API/Crypto), est utilisée pour générer un [UUID](/fr/docs/Glossary/UUID) v4 en utilisant un générateur de nombres aléatoires sécurisé. + +## Syntaxe + +```js-nolint +randomUUID() +``` + +### Paramètres + +Aucun. + +### Valeur de retour + +Une chaîne de caractères générées aléatoirement et qui est un UUID au format v4 sur 36 caractères. + +## Exemples + +On accède à cette méthode à l'aide de la propriété globale [`crypto`](/fr/docs/Web/API/crypto_property). + +```js +/* Si self.crypto.randomUUID() est bien disponible : */ + +const uuid = self.crypto.randomUUID(); +console.log(uuid); // par exemple "36b8f84d-df4e-4d49-b662-bcde71a8764f" +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [L'API Web Crypto](/fr/docs/Web/API/Web_Crypto_API) +- La propriété globale [`crypto`](/fr/docs/Web/API/crypto_property) qui permet d'obtenir un objet [`Crypto`](/fr/docs/Web/API/Crypto). +- [`Crypto.getRandomValues()`](/fr/docs/Web/API/Crypto/getRandomValues) qui permet d'obtenir des valeurs aléatoires sécurisées sur autant d'octets que souhaité. diff --git a/files/fr/web/api/event/eventphase/index.md b/files/fr/web/api/event/eventphase/index.md index fc8cf355431362..7d99b98fdfc4ba 100644 --- a/files/fr/web/api/event/eventphase/index.md +++ b/files/fr/web/api/event/eventphase/index.md @@ -122,12 +122,12 @@ function onDivClick(e) { e.eventPhase == 0 ? "none" : e.eventPhase == 1 - ? "capturing" - : e.eventPhase == 2 - ? "target" - : e.eventPhase == 3 - ? "bubbling" - : "error"; + ? "capturing" + : e.eventPhase == 2 + ? "target" + : e.eventPhase == 3 + ? "bubbling" + : "error"; const para = document.createElement("p"); para.textContent = `${e.currentTarget.id}; eventPhase: ${level}`; divInfo.appendChild(para); diff --git a/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md b/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md index 2a496bc0126567..42c79ff71c4a41 100644 --- a/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md +++ b/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md @@ -190,8 +190,8 @@ function pollGamepads() { let gamepads = navigator.getGamepads ? navigator.getGamepads() : navigator.webkitGetGamepads - ? navigator.webkitGetGamepads - : []; + ? navigator.webkitGetGamepads + : []; for (let i = 0; i < gamepads.length; i++) { let gp = gamepads[i]; if (gp) { @@ -228,8 +228,8 @@ function gameLoop() { let gamepads = navigator.getGamepads ? navigator.getGamepads() : navigator.webkitGetGamepads - ? navigator.webkitGetGamepads() - : []; + ? navigator.webkitGetGamepads() + : []; if (!gamepads) { return; } @@ -369,8 +369,8 @@ function scangamepads() { let gamepads = navigator.getGamepads ? navigator.getGamepads() : navigator.webkitGetGamepads - ? navigator.webkitGetGamepads() - : []; + ? navigator.webkitGetGamepads() + : []; for (let i = 0; i < gamepads.length; i++) { if (gamepads[i]) { if (gamepads[i].index in controllers) { diff --git a/files/fr/web/api/history_api/example/index.md b/files/fr/web/api/history_api/example/index.md index be61758c27f430..654cea4fc2cab7 100644 --- a/files/fr/web/api/history_api/example/index.md +++ b/files/fr/web/api/history_api/example/index.md @@ -417,8 +417,8 @@ const ajaxRequest = new (function () { window.addEventListener ? addEventListener("load", init, false) : window.attachEvent - ? attachEvent("onload", init) - : (onload = init); + ? attachEvent("onload", init) + : (onload = init); // Public methods diff --git a/files/fr/web/api/window/scrolly/index.md b/files/fr/web/api/window/scrolly/index.md index 1ddb553a2ea472..a9590b81cc8455 100644 --- a/files/fr/web/api/window/scrolly/index.md +++ b/files/fr/web/api/window/scrolly/index.md @@ -45,13 +45,13 @@ var isCSS1Compat = (document.compatMode || "") === "CSS1Compat"; var x = supportPageOffset ? window.pageXOffset : isCSS1Compat - ? document.documentElement.scrollLeft - : document.body.scrollLeft; + ? document.documentElement.scrollLeft + : document.body.scrollLeft; var y = supportPageOffset ? window.pageYOffset : isCSS1Compat - ? document.documentElement.scrollTop - : document.body.scrollTop; + ? document.documentElement.scrollTop + : document.body.scrollTop; ``` ## Spécifications diff --git a/files/fr/web/html/element/marquee/index.md b/files/fr/web/html/element/marquee/index.md index 9b4aa68add2e20..795580e28a2392 100644 --- a/files/fr/web/html/element/marquee/index.md +++ b/files/fr/web/html/element/marquee/index.md @@ -63,7 +63,7 @@ L'élément HTML **``** est utilisé pour insérer une zone de texte d height="200" behavior="alternate" style="border:solid"> - Ce texte va rebondir + Ce texte va rebondir ``` diff --git a/files/fr/web/http/status/418/index.md b/files/fr/web/http/status/418/index.md index 37aadbfcc47129..fd293313c7210b 100644 --- a/files/fr/web/http/status/418/index.md +++ b/files/fr/web/http/status/418/index.md @@ -5,7 +5,7 @@ slug: Web/HTTP/Status/418 {{HTTPSidebar}} -Le statut erreur client HTTP **`418 I'm a teapot`** qui signifie « Je suis une théière » informe que le serveur refuse de préparer du café, car il s'agit d'une théière. Cette erreur est une référence au protocole « Hyper Text Coffee Pot Control Protocol » qui est le poisson d'avril des RFCs en 1998. +Le statut erreur client HTTP **`418 I'm a teapot`** qui signifie « Je suis une théière » informe que le serveur refuse de préparer du café, car il s'agit d'une théière. Une cafetière/théière combinée qui serait temporairement à court de café devrait retourner le code 503. Cette erreur est une référence au protocole « Hyper Text Coffee Pot Control Protocol » qui est le poisson d'avril des RFCs en 1998. Certains sites web utilisent ce code de réponse pour les requêtes qu'ils ne souhaitent pas traiter (par exemple des requêtes automatiques). diff --git a/files/fr/web/javascript/reference/global_objects/proxy/index.md b/files/fr/web/javascript/reference/global_objects/proxy/index.md index 83636295749d1f..e4051941b824fb 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/index.md @@ -426,7 +426,7 @@ var docCookies = new Proxy(docCookies, { return oTarget.setItem(sKey, vValue); }, deleteProperty: function (oTarget, sKey) { - if (!sKey in oTarget) { + if ((!sKey) in oTarget) { return false; } return oTarget.removeItem(sKey); diff --git a/files/fr/web/javascript/reference/operators/conditional_operator/index.md b/files/fr/web/javascript/reference/operators/conditional_operator/index.md index 921414a28f201f..29d1d3e538a3ae 100644 --- a/files/fr/web/javascript/reference/operators/conditional_operator/index.md +++ b/files/fr/web/javascript/reference/operators/conditional_operator/index.md @@ -46,8 +46,8 @@ var premierControle = false, acces = premierControle ? "Accès refusé" : secondControle - ? "Accès refusé" - : "Accès autorisé"; + ? "Accès refusé" + : "Accès autorisé"; console.log(acces); // "Accès autorisé" ``` diff --git a/files/fr/web/javascript/reference/operators/import/index.md b/files/fr/web/javascript/reference/operators/import/index.md index afc7878051fabe..5391e13fac3fc8 100644 --- a/files/fr/web/javascript/reference/operators/import/index.md +++ b/files/fr/web/javascript/reference/operators/import/index.md @@ -117,8 +117,8 @@ Ici, on charge 10 modules, `/modules/module-0.js`, `/modules/module-1.js`, etc., ```js Promise.all( - Array.from({ length: 10 }).map((_, index) => - import(`/modules/module-${index}.js`), + Array.from({ length: 10 }).map( + (_, index) => import(`/modules/module-${index}.js`), ), ).then((modules) => modules.forEach((module) => module.load())); ``` diff --git a/files/fr/web/javascript/reference/template_literals/index.md b/files/fr/web/javascript/reference/template_literals/index.md index bf9d8c477e2a13..9c3c54aa8c983f 100644 --- a/files/fr/web/javascript/reference/template_literals/index.md +++ b/files/fr/web/javascript/reference/template_literals/index.md @@ -100,8 +100,8 @@ let classes = "header"; classes += isLargeScreen() ? "" : item.isCollapsed - ? " icon-expander" - : " icon-collapser"; + ? " icon-expander" + : " icon-collapser"; ``` En ES2015 avec des gabarits et sans imbrication : diff --git a/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/circle.svg b/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/circle.svg new file mode 100644 index 00000000000000..ca1480bfa478fe --- /dev/null +++ b/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/circle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/debugger_devtools.png b/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/debugger_devtools.png new file mode 100644 index 00000000000000..346be7eccc59a5 Binary files /dev/null and b/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/debugger_devtools.png differ diff --git a/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md b/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md new file mode 100644 index 00000000000000..27cc833fdac2bb --- /dev/null +++ b/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md @@ -0,0 +1,270 @@ +--- +title: "CycleTracker : manifeste et iconographie" +short-title: Manifeste et iconographie +slug: Web/Progressive_web_apps/Tutorials/CycleTracker/Manifest_file +l10n: + sourceCommit: fb87bd19f165cf4d743c0959c556c2f6d8bec676 +--- + +{{PreviousMenuNext("Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality", "Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers", "Web/Progressive_web_apps/Tutorials/CycleTracker")}} + +{{PWASidebar}} + +Le manifeste d'une PWA est un fichier JSON qui fournit des informations à propos des caractéristiques de l'application afin qu'elle puisse ressembler et se comporter comme une application native une fois installée sur un appareil. Le manifeste contient des métadonnées à propos de l'application comme son nom, ses icônes, ainsi que des directives d'affichage. + +Bien que la spécification considère l'ensemble des champs du manifeste comme facultatifs, certains navigateurs, systèmes d'exploitation ou outils de distribution imposent [certains champs obligatoires](/fr/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable#required_manifest_members) pour qu'une application web soit une PWA. En incluant un nom ou un nom court, l'URL initiale, une icône respectant certains critères, le type de zone d'affichage dans laquelle l'application devrait être vue, votre application respectera les critères liés au manifeste pour être une PWA. + +Voici un exemple de manifeste minimaliste pour notre application de suivi des cycles menstruels : + +```js +{ + "short_name": "CT", + "start_url" : "/", + "icons": [ + { + "src": "icon-512.png", + "sizes": "512x512" + } + ], + "display": "standalone" +} +``` + +Avant d'enregistrer le fichier du manifeste et d'inclure un pointeur vers celui-ci depuis notre document HTML, nous allons enrichir cet objet JSON afin qu'il reste concis, mais fournisse plus d'informations sur l'identité, la présentation et l'iconographie de la PWA. La version minimale ci-avant peut tout à fait fonctionner, mais voyons quelques autres propriétés qui aideront à mieux définir l'apparence de notre PWA CycleTracker. + +## Identité de l'application + +Pour identifier notre PWA, le document JSON doit inclure les propriétés `name` (nom) ou `short_name` (nom court), ou les deux. On peut également inclure un champ `description`. + +- [`name`](/fr/docs/Web/Manifest/name) + - : Le nom de la PWA. Il s'agit du nom utilisé lorsque le système d'exploitation liste les applications, comme le libellé situé à côté de l'icône de l'application, etc. +- [`short_name`](/fr/docs/Web/Manifest/short_name) + - : Le nom de la PWA qui est affiché s'il n'y a pas suffisamment d'espace pour `name`. Cette valeur est utilisée comme libellé pour les icônes sur les écrans de smartphones, et, par exemple, dans la boîte de dialogue « Ajouter à l'écran d'accueil » sur iOS. + +Lorsque `name` et `short_name` sont tous les deux renseignés, la valeur de `name` est utilisée dans la plupart des cas, tandis que `short_name` est utilisé lorsque l'espace d'affichage est limité. + +- [`description`](/fr/docs/Web/Manifest/description) + - : Une explication de ce que fait l'application. Elle fournit [une description accessible](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-description) de l'objectif et des fonctionnalités de l'application. + +### Tâche + +Écrivez les premières lignes de votre fichier de manifeste. Vous pouvez utiliser le texte qui suit ou utiliser des valeurs plus descriptives ou discrètes, et une description de votre choix. + +### Exemple de solution + +```js +{ + "name": "CycleTracker : application de suivi menstruel", + "short_name": "CT", + "description": "Enregistrez de façon sécurisée et confidentielle vos cycles menstruels. Saisissez les dates de début et de fin de vos cycles, et enregistrez vos données privées dans votre navigateur sur votre appareil, sans qu'elles soient divulguées par ailleurs." +} +``` + +## Présentation de l'application + +L'apparence de la PWA lors de son installation ou de son utilisation hors-ligne est définie dans le manifeste. Les champs du manifeste relatifs à cette apparence incluent notamment `start_url` et `display`, ainsi que d'autres champs permettant de [personnaliser les couleurs de votre application](/fr/docs/Web/Progressive_web_apps/How_to/Customize_your_app_colors), comme `theme_color` et `background_color`. + +- [`start_url`](/fr/docs/Web/Manifest/start_url) + - : La page de démarrage lorsque la PWA est lancée. +- [`display`](/fr/docs/Web/Manifest/display) + - : Contrôle le mode d'affichage de l'application. Ce champ peut valoir `fullscreen`, `standalone` ([la PWA est alors affichée dans une fenêtre dédiée](/fr/docs/Web/Progressive_web_apps/How_to/Create_a_standalone_app)), `minimal-ui` (semblable à la vue `standalone`, mais avec certains éléments d'interface pour la navigation), et `browser`, qui ouvre l'application dans une fenêtre de navigateur classique. + +Il existe également un champ [`orientation`](/fr/docs/Web/Manifest/orientation) qui définit l'orientation par défaut de la PWA et qui peut valoir `portrait` ou `landscape` (paysage). Comme notre application fonctionne dans les deux orientations, nous n'inclurons pas cette propriété. + +### Couleurs + +- [`theme_color`](/fr/docs/Web/Manifest/theme_color) + - : [La couleur par défaut des éléments d'interface du système d'exploitation ou du navigateur](/fr/docs/Web/Progressive_web_apps/How_to/Customize_your_app_colors#define_a_theme_color) comme la barre d'état sur certains mobiles et la barre du titre d'application sur les systèmes d'exploitation de bureau. +- [`background_color`](/fr/docs/Web/Manifest/background_color) + - : Une couleur de substitution qui peut être affichée [comme arrière-plan de l'application](/fr/docs/Web/Progressive_web_apps/How_to/Customize_your_app_colors#customize_the_app_window_background_color) jusqu'à ce que le CSS soit chargé. Pour créer une transition fluide entre le lancement de l'application et la fin du chargement, mieux vaudra utiliser [la couleur](/fr/docs/Web/CSS/color_value) déclarée pour [l'arrière-plan (propriété CSS `background-color`)](/fr/docs/Web/CSS/background-color) de l'application. + +### Tâche + +Ajouter les définitions de présentation au fichier de manifeste que vous avez initié lors de l'exercice précédent. + +### Exemple de solution + +Comme notre application d'exemple fonctionne sur une seule page, on pourra utiliser `"/"` comme valeur pour `start_url`, voire omettre ce champ. De même, nous pouvons afficher l'application sans l'interface utilisateur du navigateur en utilisant `standalone` comme valeur pour `display`. + +Dans [notre fichier CSS](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/HTML_and_CSS#contenu_css), nous appliquons `background-color: #efe;` sur le sélecteur de l'élément `body`. Aussi, nous utilisons ici `#eeffee` pour `background_color` afin d'obtenir une transition fluide lors du chargement de l'application. + +```js +{ + "name": "…", + "short_name": "…", + "description": "…", + "start_url": "/", + "theme_color": "#eeffee", + "background_color": "#eeffee", + "display": "standalone" +} +``` + +## Iconographie de l'application + +Les icônes d'une PWA aident à identifier l'application parmi les autres, aident à la rendre visuellement attractive et plus facilement découvrable. L'icône d'une PWA apparaît sur les écrans d'accueil, lanceurs d'application ou dans les résultats des magasins d'application. La taille de l'image affichée et les contraintes sur les fichiers utilisés varient selon le système et le contexte d'affichage. C'est dans le manifeste qu'on définit les images des différentes icônes. + +Dans l'objet JSON qui représente le manifeste, le champ `icons` est un tableau d'un ou plusieurs objets représentant des icônes, chacun avec les propriétés `src` et `sizes`, et pouvant également inclure les propriétés optionnelles `type` et `purpose`. La propriété `src` de chaque objet icône indique la source d'un seul fichier image. La propriété `sizes` fournit une liste de tailles prises en charge pour cette image, séparées par des espaces, ou le mot-clé `any` (la valeur est analogue à l'attribut [`sizes`](/fr/docs/Web/HTML/Element/link#sizes) de l'élément HTML [``](/fr/docs/Web/HTML/Element/link)). La propriété `type` indique le type MIME de l'image. + +```js +{ + "name": "MonAppli", + "icons": [ + { + "src": "icones/minuscule.webp", + "sizes": "48x48" + }, + { + "src": "icones/petite.png", + "sizes": "72x72 96x96 128x128 256x256", + "purpose": "maskable" + }, + { + "src": "icones/grande.png", + "sizes": "512x512" + }, + { + "src": "icones/vectorielle.svg", + "sizes": "any" + } + ] +} +``` + +Toutes les icônes devraient avoir le même aspect afin que votre application soit reconnaissable quelle que soit la taille utilisée. Plus l'icône est grande, plus elle pourra contenir de détails. Bien que tous les fichiers d'icônes soient des images carrées, certains systèmes d'exploitation pourront les afficher avec une autre forme, en coupant certaines sections ou en appliquant un masque sur l'icône pour obtenir une homogénéité entre les applications, voire en les réduisant, en les centrant et en ajoutant un arrière-plan si l'icône n'est pas masquable. La [zone sûre](/fr/docs/Web/Progressive_web_apps/How_to/Define_app_icons#support-masking), celle qui sera affichée sans perte comme un cercle correspond aux 80% intérieurs de l'image. Les icônes qui peuvent recevoir un masque sans problème peuvent être identifiées avec la propriété `purpose` dotée de la valeur `maskable` (voir [les icônes adaptatives sur web.dev (en anglais)](https://web.dev/articles/maskable-icon)). + +Dans Safari (et donc sur iOS et iPadOS), si vous incluez des éléments [``](/fr/docs/Web/HTML/Element/link) pour [les ressources non-standards `apple-touch-icon`](/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#ajouter_des_icônes_personnalisées_à_un_site) dans l'élément [``](/fr/docs/Web/HTML/Element/head), ces icônes remplaceront celles déclarées dans le manifeste. + +### Tâche + +Ajoutez des icônes au manifeste construit dans les exercices précédents. + +En jouant sur le mot « cycle » de CycleTracker et la couleur verte choisie comme thème, nos icônes peuvent être des carrés vert clair avec un cercle vert. Notre icône la plus petite, `circle.ico`, est un simple cercle représentant un point sur un carré utilisant la couleur du thème. Les images intermédiaires `circle.svg`, `tire.svg`, et `wheel.svg`, ajoutent progressivement plus de détails pour passer d'un cercle simple à une roue de plus en plus complexe, avec des rayons et un moyeu. Ceci étant écrit, la conception d'icônes est un sujet à part entière, que nous ne pouvons détailler pleinement dans ce tutoriel. + +```html hidden +
+ un cercle vert + une roue simple + une roue plus élaborée +
+``` + +```css hidden +div { + display: flex; + gap: 5px; +} +img { + width: 33%; +} +``` + +{{EmbedLiveSample("", 600, 250)}} + +### Exemple de solution + +```js +{ + "name": "...", + "short_name": "...", + "description": "...", + "start_url": "...", + "theme_color": "...", + "background_color": "...", + "display": "...", + "icons": [ + { + "src": "circle.ico", + "sizes": "48x48" + }, + { + "src": "icons/circle.svg", + "sizes": "72x72 96x96", + "purpose": "maskable" + }, + { + "src": "icons/tire.svg", + "sizes": "128x128 256x256" + }, + { + "src": "icons/wheel.svg", + "sizes": "512x512" + } + ] +} +``` + +## Ajouter le manifeste à l'application + +Nous avons désormais un fichier de manifeste utilisable. Il est temps de l'enregistrer et d'y faire référence depuis notre fichier HTML. + +L'extension utilisée pour le fichier du manifeste peut être `.webappmanifest`, comme indiqué dans la spécification. Comme il s'agit d'un fichier JSON, on peut également l'enregistrer avec l'extension `.json`. + +Pour une PWA, le manifeste doit être référencé dans le document HTML de l'application. Nous avons une application web fonctionnelle, mais ce n'est pas encore une PWA, car il n'y a pas encore de référence à notre manifeste JSON. Pour inclure la ressource JSON externe, on utilise un élément `` avec l'attribut `rel="manifest"`, et on renseigne l'attribut `href` pour qu'il pointe vers le manifeste. + +```html + +``` + +L'élément `` sert généralement à référencer les feuilles de style, et dans le cas des PWA, le manifeste. On l'utilise aussi, entre autres, pour [les icônes d'un site](/fr/docs/Web/HTML/Attributes/rel#icon) (qu'il s'agisse des « favicons » et des icônes pour les écrans d'accueil sur mobile). + +```html + +``` + +Si vous utilisez l'extension `.webmanifest`, il faut préciser `type="application/manifest+json"` si votre serveur ne gère pas automatiquement cette extension et son type MIME. + +#### Tâche + +Enregistrez le fichier de manifeste que vous avez créé jusqu'à présent, puis reliez-le depuis le fichier `index.html`. + +Comme exercice facultatif, vous pouvez également ajouter un lien vers une icône depuis le document HTML. + +#### Exemple de solution + +L'élément [``](/fr/docs/Web/HTML/Element/head) de votre fichier `index.html` pourra ressembler à : + +```html + + + + Cycle Tracker + + + + +``` + +Vous pouvez voir [le fichier `cycletracker.json` (en anglais)](https://mdn.github.io/pwa-examples/cycletracker/manifest_file/cycletracker.json) et [le code source du projet à ce stade](https://github.com/mdn/pwa-examples/tree/main/cycletracker/manifest_file) sur GitHub. + +Lorsqu'un fichier manifeste est présent, Safari reconnaîtra votre site comme une application web. Toutefois, pour que l'application soit pleinement une PWA, il faut lui ajouter un service worker. + +## Déboguer des fichiers manifeste + +Certains outils de développement dans les navigateurs permettent d'inspecter les manifestes. Pour Edge, Firefox, et Chrome, les propriétés du manifeste et leur valeur sont visibles dans le panneau « Application ». + +![Capture d'écran des outils de développement, où on voit le panneau gauche incluant un lien vers le manifeste. Sur la partie droite, on peut lire Manifeste d'application et voir le nom du fichier sous forme d'un lien vers le fichier JSON.](debugger_devtools.png) + +Le panneau relatif au manifeste fournit un lien vers le fichier, et des sections sur l'identité, la présentation et les icônes. + +![Les propriétés relatives à l'identité et à la présentation, avec leurs valeurs si elles sont présentes.](manifest_identity_and_presentation.png) + +Les propriétés du manifeste qui sont prises en charge sont affichées avec leur valeur. Dans cette capture d'écran, on peut voir les propriétés `orientation` et `id` apparaître, même si elles ne font pas partie de notre manifeste. Le panneau Applications peut être utilisé pour voir les propriétés et même apprendre certaines informations. Dans cet exemple, on peut voir que pour indiquer un identifiant d'application qui correspond à l'identité actuelle, il faut que la propriété `id` soit renseignée avec "/". + +Chrome et Edge fournissent également des erreurs et des avertissements, les gestionnaires de protocole et des informations pour améliorer le manifeste et les icônes. + +Notre application ne dispose pas de gestionnaires de protocole et nous n'aborderons pas ce sujet dans ce tutoriel. S'il y en avait eu d'inclus, ils auraient été listés dans la section correspondante. Cette section étant vide, les outils de développement fournissent des liens pour des informations à ce sujet. + +![Les quatre icônes incluses dans le manifeste, avec l'arrière-plan retiré car l'option « Affichez (sic) uniquement la zone de sécurité minimale pour les icônes masquables » est cochée.](manifest_icons.png) + +Le panneau relatif au manifeste inclut également des informations sur les zones sûres des icônes masquables et un lien vers [un billet de blog (en anglais) sur ce sujet](https://web.dev/articles/maskable-icon). Pour créer des icônes, vous pouvez utiliser l'outil [imageGenerator (en anglais)](https://www.pwabuilder.com/imageGenerator) qui crée plus de 100 images carrées en PNG pour Android, Apple, et Windows, ainsi qu'un fichier JSON contenant l'ensemble des chemins des images avec leur taille. Celles-ci pourront ne pas toutes vous servir, mais cet outil vous permettra de voir la diversité des configurations utilisées pour servir une PWA. + +Les outils de développement sont utiles pour identifier les champs de manifeste pris en charge. On notera par exemple que les outils de développement de Firefox affichent `dir`, `lang`, `orientation`, `scope`, et `id`, même si notre fichier de manifeste ne contient pas ces champs. Firefox inclut également la valeur de la propriété `purpose` pour chaque icône, en affichant `any` par défaut. + +![Le panneau du manifeste dans les outils de développement de Firefox, affichant des valeurs pour les propriétés qui ne sont pas incluses dans notre manifeste comme dir, scope, et id members, ainsi que les propriétés lang et orientation sans leur valeur associée.](manifest_firefox.png) + +## Pour la suite + +Pour que notre application bénéficie des avantages d'une PWA pour l'ensemble des navigateurs et des systèmes d'exploitation, nous devons lui [ajouter un service worker](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers). Dans le prochain article, nous verrons comment faire, sans utiliser de framework. + +{{PreviousMenuNext("Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality", "Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers", "Web/Progressive_web_apps/Tutorials/CycleTracker")}} diff --git a/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/manifest_firefox.png b/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/manifest_firefox.png new file mode 100644 index 00000000000000..37d47703f8b9ed Binary files /dev/null and b/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/manifest_firefox.png differ diff --git a/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/manifest_icons.png b/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/manifest_icons.png new file mode 100644 index 00000000000000..ec9e9529318f47 Binary files /dev/null and b/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/manifest_icons.png differ diff --git a/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/manifest_identity_and_presentation.png b/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/manifest_identity_and_presentation.png new file mode 100644 index 00000000000000..4a8da196d91409 Binary files /dev/null and b/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/manifest_identity_and_presentation.png differ diff --git a/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/tire.svg b/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/tire.svg new file mode 100644 index 00000000000000..a69dfdcbb0a309 --- /dev/null +++ b/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/tire.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/wheel.svg b/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/wheel.svg new file mode 100644 index 00000000000000..e6270fa640da6c --- /dev/null +++ b/files/fr/web/progressive_web_apps/tutorials/cycletracker/manifest_file/wheel.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/files/fr/web/progressive_web_apps/tutorials/cycletracker/secure_connection/index.md b/files/fr/web/progressive_web_apps/tutorials/cycletracker/secure_connection/index.md new file mode 100644 index 00000000000000..10d0f2c8a9b465 --- /dev/null +++ b/files/fr/web/progressive_web_apps/tutorials/cycletracker/secure_connection/index.md @@ -0,0 +1,97 @@ +--- +title: "CycleTracker : connexion sécurisée" +short-title: Connexion sécurisée +slug: Web/Progressive_web_apps/Tutorials/CycleTracker/Secure_connection +l10n: + sourceCommit: 633b73367768588e7c2e93f35b470c503aede19e +--- + +{{PreviousMenuNext("Web/Progressive_web_apps/Tutorials/CycleTracker/HTML_and_CSS", "Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality", "Web/Progressive_web_apps/Tutorials/CycleTracker")}} + +{{PWASidebar}} + +Les service workers, et par extension les PWA, sont [restreints aux contextes sécurisés](/fr/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts). Les contextes sécurisés incluent notamment les contextes TLS servis avec le protocole `https://` et les ressources servies localement (par exemple les URL avec l'hôte `127.0.0.1` ou `localhost`, servies avec le protocole `http://`). Dans cette section, nous aborderons les façons de servir une application localement et à distance avec une connexion sécurisée. + +Dans l'article précédent, nous avons utilisé HTML et CSS pour créer le squelette de notre application. Dans ce chapitre, nous ouvrirons le contenu statique de CycleTracker dans un navigateur, nous en verrons le contenu depuis un environnement de développement local, mais aussi depuis un serveur distant, avec une connexion sécurisée. + +## Voir l'application avec le protocole `file://` + +N'importe quel navigateur peut afficher du contenu HTML. Pour voir le fichier HTML avec le CSS correspondant appliqué, par exemple ce que nous avons créé dans le chapitre précédent, ouvrez le fichier `index.html` en navigant dans l'explorateur de fichier de votre ordinateur ou depuis votre navigateur en utilisant l'option de menu « Ouvrir un fichier… ». + +Avec le fichier `index.html` mis à jour et le fichier `style.css` dans le même répertoire, si vous consultez le fichier dans un navigateur, vous devriez obtenir quelque chose ressemblant à cette capture d'écran : + +![Une page web verte avec un grand titre, un formulaire avec une légende, deux sélecteurs de date et un bouton.](filefile.jpg) + +Ici, on voit la page à l'aide du protocole `file://`. Cela fonctionne bien pour notre projet dans l'état actuel, et suffira encore lorsque [nous ajouterons des fonctionnalités à l'aide de JavaScript](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality). Toutefois, les fichiers de manifeste et les service workers, qui sont des composants clés d'une PWA, ne fonctionnent qu'avec une connexion sécurisée (comme d'autres API). Une PWA doit donc être servie depuis un serveur web en HTTPS ou dans un environnement de développement local avec un hôte comme `localhost` ou `127.0.0.1` (avec ou sans numéro de port). Si nous consultons l'application finalisée avec le protocole `file://`, notre [manifeste](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Manifest_file) sera ignoré et [les service workers](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers) ajoutés échoueront. + +> **Note :** Servir l'application avec HTTPS est une bonne chose, qu'il s'agisse d'une PWA ou d'un site web. Cela permet que l'information qui transite entre le serveur web et le navigateur de la personne soit chiffrée de bout en bout. [Plusieurs API web ne fonctionnent qu'avec un contexte sécurisé](/fr/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts). Autrement dit, même si on ne crée par de PWA installable, on pourra avoir besoin d'un contexte sécurisé lorsqu'on ajoute des fonctionnalités. + +Il nous faut un environnement de développement local pour suivre ce tutoriel. Pour que [notre PWA soit installable](/fr/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable), il nous faut un serveur sécurisé. Les fichiers nécessaires devront être servis via une connexion sécurisée sur le Web pour tirer parti des avantages d'une PWA et pour distribuer l'application comme telle. + +## `localhost` + +La méthode par défaut pour mettre en place un environnement de développement local varie d'un système d'exploitation à un autre. L'emplacement par défaut de la page de départ (l'indexe) et des fichiers de configuration peut changer d'un système à l'autre, mais la plupart fournissent une configuration serveur accessible pour le développement. + +Ainsi, sur macOS Sierra ou Monterey, saisir `sudo apachectl start` dans une invite de commande démarrera un serveur web HTTP Apache. Lorsque le serveur est démarré, si vous saisissez l'URL `http://localhost` dans votre navigateur, vous pourrez voir une page web basique qui indique « It works! ». Par défaut, le fichier HTML qui s'affiche est situé dans le répertoire `Library/WebServer/Documents/index.html.en`. Pour activer d'autres extensions de fichier que `.html.en` ou pour changer le répertoire racine, vous devrez éditer le fichier de configuration situé à l'emplacement `/etc/apache2/httpd.conf`. Le serveur peut être arrêté avec la commande `sudo apachectl stop`. + +Le serveur web par défaut du système d'exploitation fournit certes un nom d'hôte simple à retenir, `localhost`, mais il faut connaître l'emplacement racine du serveur et savoir comment le configurer. Il peut aussi être limité à un seul serveur, situé à un emplacement donné. Heureusement, il existe d'autres méthodes, plus intuitives, pour créer un ou plusieurs environnements de développement, accessibles sur différents ports. + +## `localhost`, avec un numéro de port + +Il existe plusieurs extensions d'[IDE](/fr/docs/Glossary/IDE) et paquets propres à certains langages de programmation qui vous permettent de démarrer un environnement de développement à l'aide d'un clic ou d'une commande. Vous pouvez même démarrer plusieurs serveurs locaux, chacun ayant un numéro de port différent. + +Vous pouvez lancer un serveur HTTP local à [l'aide d'une extension Visual Studio Code plugin](/fr/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server#using_an_extension_in_your_code_editor), qui permet d'exécuter un serveur local sur un port donné.[L'extension Preview on Web Server](https://marketplace.visualstudio.com/items?itemName=yuichinukiyama.vscode-preview-server) de l'IDE [Visual Studio Code](https://code.visualstudio.com/download) permet de créer un serveur à la racine du répertoire ouvert dans l'éditeur, en utilisant le port `8080` oar défaut. Les extensions peuvent être configurées et on pourra donc changer le paramètre `previewServer.port` pour utiliser un autre port. Par défaut, si on saisit `localhost:8080` dans la barre d'URL du navigateur, on pourra voir la page. + +> **Note :** L'extension Preview on Web Server utilise [Browsersync](https://browsersync.io/). Lorsque vous avez un environnement de développement démarré avec cette extension, l'adresse `localhost:3001` vous permet d'accéder à l'interface utilisateur de Browsersync. + +Vous pouvez également créer [un serveur local avec l'IDE IntelliJ](https://www.jetbrains.com/help/idea/creating-local-server-configuration.html), qui intègre un [serveur web PHP configurable](https://www.jetbrains.com/help/idea/php-built-in-web-server.html#configuring-built-in-web-server). + +Sur MDN, vous pouvez consulter d'autres guides pour apprendre à [mettre en place un serveur de test local](/fr/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server) avec [Python](/fr/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server#using_python) ou avec [un langage de programmation serveur](/fr/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server#running_server-side_languages_locally) comme PHP. + +## `localhost` avec npx + +Si vous avez installé Node.js, vous avez probablement installé npm et npx avec. Dans une invite de commande, saisissez `npx -v`. Si vous voyez un numéro de version, cela signifie que vous pouvez utiliser le paquet [http-server](https://www.npmjs.com/package/http-server). Il s'agit d'un serveur HTTP sans configuration qui peut être installé sans prérequis particulier. Pour démarrer le serveur, saisissez `npx http-server [chemin]` dans votre invite de commande, avec `[chemin]` correspondant au répertoire où se situe votre fichier d'index. + +Par défaut, si vous saisissez `localhost:8080` dans la barre d'URL de votre navigateur, la page sera chargée. Si vous avez déjà un serveur démarré sur le port `8080`, http-server choisira automatiquement un autre port disponible pour servir l'environnement de développement, comme `8081`. + +Vous pouvez aussi choisir un autre numéro de port au démarrage. Par exemple, en saisissant `npx http-server /user/votreNom/CycleTracker -p 8787`, cela démarrera un serveur local sur le port `8787` si ce dernier est disponible. Si vous avez sélectionné un port déjà utilisé, vous aurez une erreur `address already in use` (adresse déjà utilisée) ou un message similaire. Si cela fonctionne, vous pourrez saisir `localhost:8787` dans la barre d'URL de votre navigateur pour afficher le fichier d'index situé à l'emplacement `~/user/votreNom/CycleTracker/index.html`. Si aucun fichier d'index n'est présent, le serveur affichera le contenu du répertoire `~/user/votreNom/CycleTracker/`. + +Ce serveur HTTP statique sans configuration suffira pour notre application. Les applications servies sur `localhost` et `127.0.0.1`, même servies sans HTTPS, sont considérées comme sécurisées. Si les navigateurs affichent des avertissements de sécurité, ceux-ci peuvent être ignorés _pour ces adresses_. Bien que ça ne soit pas nécessaire, vous pouvez configurer votre serveur web local pour utiliser HTTPS, en [ajoutant un certificat TLS intégré](https://github.com/lwsjs/local-web-server/wiki/How-to-get-the-%22green-padlock%22-using-the-built-in-certificate). Avec le certificat, vous pourrez installer et exécuter [local-web-server]() en ligne de commande pour servir votre projet en HTTPS et éviter tout avertissement de sécurité. + +```bash +npm install -g local-web-server +cd ~/user/votreNom/CycleTracker/ +ws --https +``` + +Vous devrez peut-être utiliser `sudo` pour la commande d'installation globale précédente. + +> **Note :** Si vous faites attention à la confidentialité et à la vie privée, vous verrez ici que vous pouvez construire votre PWA vous-même et l'installer sur votre machine depuis votre propre environnement de développement, sans jamais avoir besoin d'Internet. Cette application ne contient aucun pistage et aussi respectueuse de la vie privée que possible. + +## Serveurs externes sécurisés + +Les options précédentes sont acceptables et nécessaires pour tester une application lorsqu'on la développe (que ce soit celle de ce tutoriel ou une autre). Toutefois, même s'il est parfois possible d'héberger soi-même l'application sur un de ses appareils pour la rendre disponible sur Internet, ce n'est pas l'approche recommandée. + +Pour bénéficier des fonctionnalités propres aux PWA comme l'installation rapide, une interface utilisateur dédiée et une éventuelle publication sur un magasin d'application, l'application doit être une PWA, ce qui signifie qu'elle doit utiliser un service worker, ce qui implique d'utiliser une connexion sécurisée. Pour distribuer votre application et permettre à d'autres de la voir, de l'utiliser et de l'installer, vous aurez besoin que votre contenu soit hébergé et disponible sur un serveur _distant_. + +Pour publier officiellement une PWA, vous souhaiterez peut-être investir dans [un nom de domaine et un hébergement web](/fr/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost#hébergement). Pour les projets open source, où le code est disponible publiquement pour que toutes et tous puissent l'étudier et y contribuer, vous pouvez héberger votre projet sur [GitHub Pages](https://pages.github.com/). + +## GitHub Pages + +L'application CycleTracker actuelle peut être vue sur GitHub de façon sécurisée à l'URL [https://mdn.github.io/pwa-examples/cycletracker/html_and_css](https://mdn.github.io/pwa-examples/cycletracker/html_and_css). Nous avons mis en place les fichiers grâce à un dépôt GitHub de MDN. De même, si vous avez un compte [GitHub](https://github.com), vous pouvez mettre en place votre projet ainsi. On notera toutefois que, même si le contenu est servi de façon sécurisée avec TLS, tout ce qui est sur GitHub Pages est public. Si vous vivez dans une région où votre gouvernement peut vous poursuivre si vous suivez vos cycles menstruels, n'hésitez pas à copier-coller le code plutôt que de faire un fork du dépôt sur GitHub. + +Pour créer un site disponible publiquement et servi de façon sécurisée, créez un [site GitHub Pages](https://docs.github.com/fr/pages/getting-started-with-github-pages/creating-a-github-pages-site). Créez un dépôt intitulé `.github.io`, où `` est votre nom de compte GitHub. Créez ensuite une branche `gh-pages`. Le contenu de cette branche sera alors disponible publiquement à l'adresse `https://.github.io`. + +Comme nous l'avons indiqué, les sites hébergés sur GitHub Pages sont disponibles publiquement sur Internet, même si le dépôt est privé. Pour notre application, les données relatives aux cycles sont stockées dans le stockage local. Aussi, même si l'application est disponible via une URL GitHub, les données des utilisatrices et utilisateurs seront uniquement stockées dans le navigateur de l'appareil où les données auront été saisies. Supprimer le contenu du stockage local via l'interface du navigateur suffira à supprimer toutes les données enregistrées. + +Si vous ne souhaitez pas que votre PWA soit disponible à la racine de votre page, vous pouvez créer un sous-répertoire au sein du dépôt `.github.io` ou publier votre PWA dans un dépôt séparé. En [configurant une source de publication](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) au sein du dépôt de votre PWA, votre application sera visible à l'URL `https://.github.io/`, où `` est le nom du dépôt Git. Vous pouvez configurer GitHub pour publier automatiquement une nouvelle version de votre site quand vous [publiez des changements sur une branche donnée](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-from-a-branch) du dépôt (qui peut être la branche `main`). + +Pour le cas de l'application de démonstration CycleTracker au fur et à mesure des différentes étapes du développement, `` sera `mdn` et le dépôt est `pwa-examples`. Comme ce dépôt contient plusieurs exemples de PWA, chacune avec le code correspondant à différentes étapes du processus de développement, les fichiers (et donc les PWA correspondantes) sont disponibles avec des URL ayant plusieurs niveaux de profondeur. + +> **Note :** [Vous pouvez configurer un domaine personnalisé pour les sites GitHub Pages](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site). + +## Pour la suite + +Nous voici capables de voir la version statique du squelette de notre application CycleTracker dans un navigateur de façon sécurisée. Nous pouvons désormais passer à la construction de cette application. Dans le chapitre suivant, nous créerons le fichier `app.js` qui contiendra le code JavaScript qui permettra de passer de cet état statique à une application web fonctionnelle, qui stocke les données localement. + +{{PreviousMenuNext("Web/Progressive_web_apps/Tutorials/CycleTracker/HTML_and_CSS", "Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality", "Web/Progressive_web_apps/Tutorials/CycleTracker")}} diff --git a/files/fr/web/progressive_web_apps/tutorials/js13kgames/re-engageable_notifications_push/index.md b/files/fr/web/progressive_web_apps/tutorials/js13kgames/re-engageable_notifications_push/index.md index 17ccedc3c40fcc..a3155ae6c2851b 100644 --- a/files/fr/web/progressive_web_apps/tutorials/js13kgames/re-engageable_notifications_push/index.md +++ b/files/fr/web/progressive_web_apps/tutorials/js13kgames/re-engageable_notifications_push/index.md @@ -69,7 +69,7 @@ Une nouvelle notification est créée au hasard toutes les 30 secondes, jusqu'à Les messages poussés (push messages ou push) sont plus compliqués à mettre en œuvre que les notifications. Nous avons besoin de nous abonner à un serveur qui enverra ensuite les données à l'application. Le service worker de l'application recevra les données du serveur qui les a poussées et pourra ensuite les afficher en utilisant le système de notifications (ou tout autre mécanisme). -La technologie en est à ses débuts. Certains exemples fonctionnels utilisent la plateforme Cloud de messagerie de Google, mais elles sont en cours de réécriture pour prendre en charge [VAPID](https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/) (Voluntary Application Identification) qui offre une couche de sécurité supplémentaire. Vous pouvez étudier [les exemples du livre de recettes des service workers](https://github.com/mdn/serviceworker-cookbook/push-payload.html), essayer de mettre en place un serveur d'émission de messages utilisant [Firebase](https://firebase.google.com/) ou construire votre propre serveur (en utilisant Node.js par exemple). +La technologie en est à ses débuts. Certains exemples fonctionnels utilisent la plateforme Cloud de messagerie de Google, mais elles sont en cours de réécriture pour prendre en charge [VAPID](https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/) (Voluntary Application Identification) qui offre une couche de sécurité supplémentaire. Vous pouvez étudier [les exemples du livre de recettes des service workers](https://github.com/mdn/serviceworker-cookbook/tree/master/push-payload), essayer de mettre en place un serveur d'émission de messages utilisant [Firebase](https://firebase.google.com/) ou construire votre propre serveur (en utilisant Node.js par exemple). Comme mentionné précédemment, pour être capable de recevoir des messages poussés, vous devez avoir un service worker (voir les fondamentaux expliqués dans l'article [Fonctionnement hors connexion des PWA grâce aux service workers](/fr/docs/Web/Apps/Progressive/Offline_Service_workers)). Au sein du service worker, on peut créer un mécanisme d'abonnement au service push en appelant la méthode [`getSubscription()`](/fr/docs/Web/API/PushManager/getSubscription) de l'interface [`PushManager`](/fr/docs/Web/API/PushManager). diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index d119cae958c550..e72b4b491ce860 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -697,10 +697,10 @@ /ja/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects /ja/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects /ja/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest /ja/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest /ja/docs/DOM/console /ja/docs/Web/API/console -/ja/docs/DOM/console.dir /ja/docs/Web/API/Console/dir -/ja/docs/DOM/console.log /ja/docs/Web/API/Console/log -/ja/docs/DOM/console.time /ja/docs/Web/API/Console/time -/ja/docs/DOM/console.timeEnd /ja/docs/Web/API/Console/timeEnd +/ja/docs/DOM/console.dir /ja/docs/Web/API/console/dir_static +/ja/docs/DOM/console.log /ja/docs/Web/API/console/log_static +/ja/docs/DOM/console.time /ja/docs/Web/API/console/time_static +/ja/docs/DOM/console.timeEnd /ja/docs/Web/API/console/timeend_static /ja/docs/DOM/dispatchEvent_example /ja/docs/Web/Events/Creating_and_triggering_events /ja/docs/DOM/document /ja/docs/Web/API/Document /ja/docs/DOM/document.URL /ja/docs/Web/API/Document/URL @@ -2650,7 +2650,12 @@ /ja/docs/Web/API/Canvas_API/Tutorial/Compositing/Example /ja/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation /ja/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility /ja/docs/orphaned/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility /ja/docs/Web/API/CloseEvent/initCloseEvent /ja/docs/conflicting/Web/API/CloseEvent -/ja/docs/Web/API/Console.error /ja/docs/Web/API/Console/error +/ja/docs/Web/API/Console.error /ja/docs/Web/API/console/error_static +/ja/docs/Web/API/Console/dir /ja/docs/Web/API/console/dir_static +/ja/docs/Web/API/Console/error /ja/docs/Web/API/console/error_static +/ja/docs/Web/API/Console/log /ja/docs/Web/API/console/log_static +/ja/docs/Web/API/Console/time /ja/docs/Web/API/console/time_static +/ja/docs/Web/API/Console/timeEnd /ja/docs/Web/API/console/timeend_static /ja/docs/Web/API/Constraint_validation /ja/docs/Learn/Forms/Form_validation /ja/docs/Web/API/Coordinates /ja/docs/Web/API/GeolocationCoordinates /ja/docs/Web/API/DOMPoint/fromPoint /ja/docs/Web/API/DOMPoint/fromPoint_static @@ -3237,10 +3242,27 @@ /ja/docs/Web/API/XRTargetRayMode /ja/docs/Web/API/XRInputSource/targetRayMode /ja/docs/Web/API/XSLTProcessor/Browser_Differences /ja/docs/orphaned/Web/API/XSLTProcessor/Browser_Differences /ja/docs/Web/API/XSLTProcessor/Resources /ja/docs/Web/API/XSLTProcessor -/ja/docs/Web/API/console.dir /ja/docs/Web/API/Console/dir -/ja/docs/Web/API/console.log /ja/docs/Web/API/Console/log -/ja/docs/Web/API/console.time /ja/docs/Web/API/Console/time -/ja/docs/Web/API/console.timeEnd /ja/docs/Web/API/Console/timeEnd +/ja/docs/Web/API/console.dir /ja/docs/Web/API/console/dir_static +/ja/docs/Web/API/console.log /ja/docs/Web/API/console/log_static +/ja/docs/Web/API/console.time /ja/docs/Web/API/console/time_static +/ja/docs/Web/API/console.timeEnd /ja/docs/Web/API/console/timeend_static +/ja/docs/Web/API/console/assert /ja/docs/Web/API/console/assert_static +/ja/docs/Web/API/console/clear /ja/docs/Web/API/console/clear_static +/ja/docs/Web/API/console/count /ja/docs/Web/API/console/count_static +/ja/docs/Web/API/console/countReset /ja/docs/Web/API/console/countreset_static +/ja/docs/Web/API/console/debug /ja/docs/Web/API/console/debug_static +/ja/docs/Web/API/console/dirxml /ja/docs/Web/API/console/dirxml_static +/ja/docs/Web/API/console/group /ja/docs/Web/API/console/group_static +/ja/docs/Web/API/console/groupCollapsed /ja/docs/Web/API/console/groupcollapsed_static +/ja/docs/Web/API/console/groupEnd /ja/docs/Web/API/console/groupend_static +/ja/docs/Web/API/console/info /ja/docs/Web/API/console/info_static +/ja/docs/Web/API/console/profile /ja/docs/Web/API/console/profile_static +/ja/docs/Web/API/console/profileEnd /ja/docs/Web/API/console/profileend_static +/ja/docs/Web/API/console/table /ja/docs/Web/API/console/table_static +/ja/docs/Web/API/console/timeLog /ja/docs/Web/API/console/timelog_static +/ja/docs/Web/API/console/timeStamp /ja/docs/Web/API/console/timestamp_static +/ja/docs/Web/API/console/trace /ja/docs/Web/API/console/trace_static +/ja/docs/Web/API/console/warn /ja/docs/Web/API/console/warn_static /ja/docs/Web/API/document.URL /ja/docs/Web/API/Document/URL /ja/docs/Web/API/document.activeElement /ja/docs/Web/API/Document/activeElement /ja/docs/Web/API/document.adoptNode /ja/docs/Web/API/Document/adoptNode diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 808aeaafee5102..91c724afa8e6fd 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -15100,67 +15100,67 @@ "saneyuki_s" ] }, - "Web/API/console/assert": { + "Web/API/console/assert_static": { "modified": "2020-11-27T14:41:08.119Z", "contributors": ["yumetodo", "takamin", "yyss"] }, - "Web/API/console/clear": { + "Web/API/console/clear_static": { "modified": "2020-11-27T13:49:44.683Z", "contributors": ["yumetodo", "853419196", "yyss"] }, - "Web/API/console/count": { + "Web/API/console/count_static": { "modified": "2020-11-27T14:24:35.469Z", "contributors": ["yumetodo", "yyss"] }, - "Web/API/console/countReset": { + "Web/API/console/countreset_static": { "modified": "2020-11-27T14:37:31.289Z", "contributors": ["yumetodo"] }, - "Web/API/console/debug": { + "Web/API/console/debug_static": { "modified": "2020-11-27T14:40:02.073Z", "contributors": ["yumetodo", "silverskyvicto"] }, - "Web/API/console/dirxml": { + "Web/API/console/dirxml_static": { "modified": "2019-03-23T22:34:53.031Z", "contributors": ["yyss"] }, - "Web/API/console/group": { + "Web/API/console/group_static": { "modified": "2020-10-15T21:45:35.788Z", "contributors": ["munieru_jp", "dskmori", "yyss"] }, - "Web/API/console/groupCollapsed": { + "Web/API/console/groupcollapsed_static": { "modified": "2019-03-23T22:34:55.714Z", "contributors": ["yyss"] }, - "Web/API/console/groupEnd": { + "Web/API/console/groupend_static": { "modified": "2019-03-23T22:34:56.119Z", "contributors": ["yyss"] }, - "Web/API/console/info": { + "Web/API/console/info_static": { "modified": "2020-10-15T21:45:37.023Z", "contributors": ["u_7cc", "yyss"] }, - "Web/API/console/profile": { + "Web/API/console/profile_static": { "modified": "2019-03-23T22:34:55.973Z", "contributors": ["yyss"] }, - "Web/API/console/profileEnd": { + "Web/API/console/profileend_static": { "modified": "2019-03-23T22:34:42.618Z", "contributors": ["yyss"] }, - "Web/API/console/table": { + "Web/API/console/table_static": { "modified": "2019-03-23T22:34:44.337Z", "contributors": ["yyss"] }, - "Web/API/console/timeStamp": { + "Web/API/console/timestamp_static": { "modified": "2019-03-23T22:34:51.368Z", "contributors": ["yyss"] }, - "Web/API/console/trace": { + "Web/API/console/trace_static": { "modified": "2020-10-15T21:45:37.860Z", "contributors": ["YujiSoftware", "woodmix", "yyss"] }, - "Web/API/console/warn": { + "Web/API/console/warn_static": { "modified": "2019-03-23T22:34:47.743Z", "contributors": ["yyss"] }, diff --git a/files/ja/glossary/base64/index.md b/files/ja/glossary/base64/index.md index 42cec2fb3ee344..2e361de101017a 100644 --- a/files/ja/glossary/base64/index.md +++ b/files/ja/glossary/base64/index.md @@ -82,14 +82,14 @@ function b64ToUint6(nChr) { return nChr > 64 && nChr < 91 ? nChr - 65 : nChr > 96 && nChr < 123 - ? nChr - 71 - : nChr > 47 && nChr < 58 - ? nChr + 4 - : nChr === 43 - ? 62 - : nChr === 47 - ? 63 - : 0; + ? nChr - 71 + : nChr > 47 && nChr < 58 + ? nChr + 4 + : nChr === 43 + ? 62 + : nChr === 47 + ? 63 + : 0; } function base64DecToArr(sBase64, nBlocksSize) { @@ -126,14 +126,14 @@ function uint6ToB64(nUint6) { return nUint6 < 26 ? nUint6 + 65 : nUint6 < 52 - ? nUint6 + 71 - : nUint6 < 62 - ? nUint6 - 4 - : nUint6 === 62 - ? 43 - : nUint6 === 63 - ? 47 - : 65; + ? nUint6 + 71 + : nUint6 < 62 + ? nUint6 - 4 + : nUint6 === 62 + ? 43 + : nUint6 === 63 + ? 47 + : 65; } function base64EncArr(aBytes) { @@ -184,27 +184,27 @@ function UTF8ArrToStr(aBytes) { aBytes[++nIdx] - 128 : nPart > 247 && nPart < 252 && nIdx + 4 < nLen /* five bytes */ - ? ((nPart - 248) << 24) + - ((aBytes[++nIdx] - 128) << 18) + - ((aBytes[++nIdx] - 128) << 12) + - ((aBytes[++nIdx] - 128) << 6) + - aBytes[++nIdx] - - 128 - : nPart > 239 && nPart < 248 && nIdx + 3 < nLen /* four bytes */ - ? ((nPart - 240) << 18) + - ((aBytes[++nIdx] - 128) << 12) + - ((aBytes[++nIdx] - 128) << 6) + - aBytes[++nIdx] - - 128 - : nPart > 223 && nPart < 240 && nIdx + 2 < nLen /* three bytes */ - ? ((nPart - 224) << 12) + - ((aBytes[++nIdx] - 128) << 6) + - aBytes[++nIdx] - - 128 - : nPart > 191 && nPart < 224 && nIdx + 1 < nLen /* two bytes */ - ? ((nPart - 192) << 6) + aBytes[++nIdx] - 128 - : /* nPart < 127 ? */ /* one byte */ - nPart, + ? ((nPart - 248) << 24) + + ((aBytes[++nIdx] - 128) << 18) + + ((aBytes[++nIdx] - 128) << 12) + + ((aBytes[++nIdx] - 128) << 6) + + aBytes[++nIdx] - + 128 + : nPart > 239 && nPart < 248 && nIdx + 3 < nLen /* four bytes */ + ? ((nPart - 240) << 18) + + ((aBytes[++nIdx] - 128) << 12) + + ((aBytes[++nIdx] - 128) << 6) + + aBytes[++nIdx] - + 128 + : nPart > 223 && nPart < 240 && nIdx + 2 < nLen /* three bytes */ + ? ((nPart - 224) << 12) + + ((aBytes[++nIdx] - 128) << 6) + + aBytes[++nIdx] - + 128 + : nPart > 191 && nPart < 224 && nIdx + 1 < nLen /* two bytes */ + ? ((nPart - 192) << 6) + aBytes[++nIdx] - 128 + : /* nPart < 127 ? */ /* one byte */ + nPart, ); } return sView; @@ -228,14 +228,14 @@ function strToUTF8Arr(sDOMStr) { nChr < 0x80 ? 1 : nChr < 0x800 - ? 2 - : nChr < 0x10000 - ? 3 - : nChr < 0x200000 - ? 4 - : nChr < 0x4000000 - ? 5 - : 6; + ? 2 + : nChr < 0x10000 + ? 3 + : nChr < 0x200000 + ? 4 + : nChr < 0x4000000 + ? 5 + : 6; } aBytes = new Uint8Array(nArrLen); diff --git a/files/ja/learn/javascript/asynchronous/introducing_workers/index.md b/files/ja/learn/javascript/asynchronous/introducing_workers/index.md index b76bd82b4abe99..ea29447f095df1 100644 --- a/files/ja/learn/javascript/asynchronous/introducing_workers/index.md +++ b/files/ja/learn/javascript/asynchronous/introducing_workers/index.md @@ -75,9 +75,8 @@ function generatePrimes(quota) { document.querySelector("#generate").addEventListener("click", () => { const quota = document.querySelector("#quota").value; const primes = generatePrimes(quota); - document.querySelector( - "#output", - ).textContent = `Finished generating ${quota} primes!`; + document.querySelector("#output").textContent = + `Finished generating ${quota} primes!`; }); document.querySelector("#reload").addEventListener("click", () => { @@ -160,9 +159,8 @@ document.querySelector("#generate").addEventListener("click", () => { // データから受け取った生成された素数の個数を含むユーザーへの // メッセージで出力ボックスを更新します。 worker.addEventListener("message", (message) => { - document.querySelector( - "#output", - ).textContent = `${message.data} 個の素数を生成しました。`; + document.querySelector("#output").textContent = + `${message.data} 個の素数を生成しました。`; }); document.querySelector("#reload").addEventListener("click", () => { diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/browser_specific_settings/index.md b/files/ja/mozilla/add-ons/webextensions/manifest.json/browser_specific_settings/index.md index 912d87cd8d30e6..cfe3e415af02c9 100644 --- a/files/ja/mozilla/add-ons/webextensions/manifest.json/browser_specific_settings/index.md +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/browser_specific_settings/index.md @@ -77,7 +77,7 @@ slug: Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings 使用可能なキーをすべて使用した例です。たいていの拡張機能では `strict_max_version` と `update_url` は省略するのに注意してください。 ```json -"applications": { +"browser_specific_settings": { "gecko": { "id": "addon@example.com", "strict_min_version": "42.0", diff --git a/files/ja/web/accessibility/aria/attributes/aria-atomic/index.md b/files/ja/web/accessibility/aria/attributes/aria-atomic/index.md new file mode 100644 index 00000000000000..ea081ec4d26043 --- /dev/null +++ b/files/ja/web/accessibility/aria/attributes/aria-atomic/index.md @@ -0,0 +1,43 @@ +--- +title: aria-atomic +slug: Web/Accessibility/ARIA/Attributes/aria-atomic +l10n: + sourceCommit: f6d04a43eadf5ab26a3488942dfb318b58234eb5 +--- + +ARIA ライブリージョンにおいて、グローバルな `aria-atomic` 属性は、[`aria-relevant`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-relevant) 属性で定義された変更通知に基づいて、スクリーンリーダーなどの支援技術が変更された領域をすべて表示するのか、一部だけを表示するのかを示します。 + +## 解説 + +ライブリージョンとは、ユーザーの操作の有無にかかわらず、ユーザーのフォーカスが他の場所にあるときに更新されるウェブページの部分のことです。ユーザーのフォーカスの外側で更新されるため、スクリーンリーダーなどの支援技術は、ユーザーに更新を報告するために更新を「見る」ことができません。 WAI-ARIA には、開発者がこれらのライブ領域を識別し、支援技術に処理方法を指示するためのプロパティとして、 [`aria-live`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-live)、[`aria-relevant`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-relevant)、[`aria-busy`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-busy)、`aria-atomic` の 4 つがあります。 + +ライブリージョンのコンテンツが変更されると、 DOM は変更された要素からその祖先を走査し、 `aria-atomic` が設定された最初の要素を探します。これがユーザーに表示するコンテンツを決定します。 + +祖先が明示的に `aria-atomic` を設定していない場合、更新されたライブリージョンのコンテンツのノードのみが読み取られます。 `aria-atomic` を完全に除外することと、 ARIA ライブリージョンの祖先ノードを明示的に `aria-atomic="false"` で設定することの違いは、明示的に `aria-atomic="false"` を設定すると、スクリーンリーダーが祖先の連鎖を上がらなくなることです。どちらも更新されたノードだけが読み取られます。 `aria-atomic="true"` に設定すると、更新されたノードの `label` がある場合はそれを含めるために、変更されたリージョン全体が表示されます。 + +## 値 + +- `false` (既定値) + - : 変更されたノードのみを表示します。 +- `true` + - : 作者が定義したラベルが存在する場合はそれを含め、変更されたリージョン全体を全体として表示します。 + +## 関連付けられたロール + +**すべての**[ロール](/ja/docs/Web/Accessibility/ARIA/Roles)で使用されます。 + +## 仕様書 + +{{Specifications}} + +## 関連情報 + +- [Event.ariaAtomic](/ja/docs/Web/API/Element/ariaAtomic) + + diff --git a/files/ja/web/api/console/assert/index.md b/files/ja/web/api/console/assert_static/index.md similarity index 95% rename from files/ja/web/api/console/assert/index.md rename to files/ja/web/api/console/assert_static/index.md index 617e8a91e0a318..f3779cd4f8b089 100644 --- a/files/ja/web/api/console/assert/index.md +++ b/files/ja/web/api/console/assert_static/index.md @@ -1,8 +1,7 @@ --- title: console.assert() -slug: Web/API/console/assert -l10n: - sourceCommit: b40b71d87ab041f2f36a4675bc09af983b22422a +slug: Web/API/console/assert_static +original_slug: Web/API/console/assert --- {{APIRef("Console API")}} diff --git a/files/ja/web/api/console/clear/index.md b/files/ja/web/api/console/clear_static/index.md similarity index 87% rename from files/ja/web/api/console/clear/index.md rename to files/ja/web/api/console/clear_static/index.md index 78acbc190624f9..e3aa3a99b200a1 100644 --- a/files/ja/web/api/console/clear/index.md +++ b/files/ja/web/api/console/clear_static/index.md @@ -1,8 +1,7 @@ --- title: console.clear() -slug: Web/API/console/clear -l10n: - sourceCommit: 2de88eb1e77c52ea86d46b003e913a8a5337c5d2 +slug: Web/API/console/clear_static +original_slug: Web/API/console/clear --- {{APIRef("Console API")}} diff --git a/files/ja/web/api/console/count/index.md b/files/ja/web/api/console/count_static/index.md similarity index 94% rename from files/ja/web/api/console/count/index.md rename to files/ja/web/api/console/count_static/index.md index 3ba4c000d1b11a..09941b3cb6516b 100644 --- a/files/ja/web/api/console/count/index.md +++ b/files/ja/web/api/console/count_static/index.md @@ -1,8 +1,7 @@ --- title: console.count() -slug: Web/API/console/count -l10n: - sourceCommit: 710132ffea066697d23e1978478d36090fb448d7 +slug: Web/API/console/count_static +original_slug: Web/API/console/count --- {{APIRef("Console API")}} diff --git a/files/ja/web/api/console/countreset/index.md b/files/ja/web/api/console/countreset_static/index.md similarity index 95% rename from files/ja/web/api/console/countreset/index.md rename to files/ja/web/api/console/countreset_static/index.md index a886ea93569d7e..b9877ad3ae550e 100644 --- a/files/ja/web/api/console/countreset/index.md +++ b/files/ja/web/api/console/countreset_static/index.md @@ -1,8 +1,7 @@ --- title: console.countReset() -slug: Web/API/console/countReset -l10n: - sourceCommit: 710132ffea066697d23e1978478d36090fb448d7 +slug: Web/API/console/countreset_static +original_slug: Web/API/console/countReset --- {{APIRef("Console API")}} diff --git a/files/ja/web/api/console/debug/index.md b/files/ja/web/api/console/debug_static/index.md similarity index 95% rename from files/ja/web/api/console/debug/index.md rename to files/ja/web/api/console/debug_static/index.md index f53d2774652639..f7bf601dae74cf 100644 --- a/files/ja/web/api/console/debug/index.md +++ b/files/ja/web/api/console/debug_static/index.md @@ -1,8 +1,7 @@ --- title: console.debug() -slug: Web/API/console/debug -l10n: - sourceCommit: d19d68bf6078c23d527b6e1355925795e745d124 +slug: Web/API/console/debug_static +original_slug: Web/API/console/debug --- {{APIRef("Console API")}} diff --git a/files/ja/web/api/console/dir/index.md b/files/ja/web/api/console/dir_static/index.md similarity index 93% rename from files/ja/web/api/console/dir/index.md rename to files/ja/web/api/console/dir_static/index.md index 853fa16fbb1ee9..a0c47dbcfcc5b6 100644 --- a/files/ja/web/api/console/dir/index.md +++ b/files/ja/web/api/console/dir_static/index.md @@ -1,8 +1,7 @@ --- title: console.dir() -slug: Web/API/console/dir -l10n: - sourceCommit: 4fd581de2e31ac303a4628354c80f476ba9fd0e2 +slug: Web/API/console/dir_static +original_slug: Web/API/console/dir --- {{APIRef("Console API")}} diff --git a/files/ja/web/api/console/dirxml/index.md b/files/ja/web/api/console/dirxml_static/index.md similarity index 88% rename from files/ja/web/api/console/dirxml/index.md rename to files/ja/web/api/console/dirxml_static/index.md index 3de221f6cb0072..ba28803a6414ed 100644 --- a/files/ja/web/api/console/dirxml/index.md +++ b/files/ja/web/api/console/dirxml_static/index.md @@ -1,8 +1,7 @@ --- title: console.dirxml() -slug: Web/API/console/dirxml -l10n: - sourceCommit: 4fd581de2e31ac303a4628354c80f476ba9fd0e2 +slug: Web/API/console/dirxml_static +original_slug: Web/API/console/dirxml --- {{APIRef("Console API")}} diff --git a/files/ja/web/api/console/error/index.md b/files/ja/web/api/console/error_static/index.md similarity index 94% rename from files/ja/web/api/console/error/index.md rename to files/ja/web/api/console/error_static/index.md index 47461b5cb66bb2..8304557863d26e 100644 --- a/files/ja/web/api/console/error/index.md +++ b/files/ja/web/api/console/error_static/index.md @@ -1,8 +1,7 @@ --- title: console.error() -slug: Web/API/console/error -l10n: - sourceCommit: d19d68bf6078c23d527b6e1355925795e745d124 +slug: Web/API/console/error_static +original_slug: Web/API/console/error --- {{APIRef("Console API")}} diff --git a/files/ja/web/api/console/group/index.md b/files/ja/web/api/console/group_static/index.md similarity index 95% rename from files/ja/web/api/console/group/index.md rename to files/ja/web/api/console/group_static/index.md index f4004842cce88d..2546bc3bfc6eeb 100644 --- a/files/ja/web/api/console/group/index.md +++ b/files/ja/web/api/console/group_static/index.md @@ -1,8 +1,7 @@ --- title: console.group() -slug: Web/API/console/group -l10n: - sourceCommit: 4fd581de2e31ac303a4628354c80f476ba9fd0e2 +slug: Web/API/console/group_static +original_slug: Web/API/console/group --- {{APIRef("Console API")}} diff --git a/files/ja/web/api/console/groupcollapsed/index.md b/files/ja/web/api/console/groupcollapsed_static/index.md similarity index 91% rename from files/ja/web/api/console/groupcollapsed/index.md rename to files/ja/web/api/console/groupcollapsed_static/index.md index ee12de3a114416..e14630748cf5a4 100644 --- a/files/ja/web/api/console/groupcollapsed/index.md +++ b/files/ja/web/api/console/groupcollapsed_static/index.md @@ -1,8 +1,7 @@ --- title: console.groupCollapsed() -slug: Web/API/console/groupCollapsed -l10n: - sourceCommit: 4fd581de2e31ac303a4628354c80f476ba9fd0e2 +slug: Web/API/console/groupcollapsed_static +original_slug: Web/API/console/groupCollapsed --- {{APIRef("Console API")}} diff --git a/files/ja/web/api/console/groupend/index.md b/files/ja/web/api/console/groupend_static/index.md similarity index 88% rename from files/ja/web/api/console/groupend/index.md rename to files/ja/web/api/console/groupend_static/index.md index 18a7c17f329c2b..6985af2858db28 100644 --- a/files/ja/web/api/console/groupend/index.md +++ b/files/ja/web/api/console/groupend_static/index.md @@ -1,8 +1,7 @@ --- title: console.groupEnd() -slug: Web/API/console/groupEnd -l10n: - sourceCommit: 4fd581de2e31ac303a4628354c80f476ba9fd0e2 +slug: Web/API/console/groupend_static +original_slug: Web/API/console/groupEnd --- {{APIRef("Console API")}} diff --git a/files/ja/web/api/console/info/index.md b/files/ja/web/api/console/info_static/index.md similarity index 94% rename from files/ja/web/api/console/info/index.md rename to files/ja/web/api/console/info_static/index.md index d4923de2ef7f49..6dd6cbc4d34448 100644 --- a/files/ja/web/api/console/info/index.md +++ b/files/ja/web/api/console/info_static/index.md @@ -1,8 +1,7 @@ --- title: console.info() -slug: Web/API/console/info -l10n: - sourceCommit: d19d68bf6078c23d527b6e1355925795e745d124 +slug: Web/API/console/info_static +original_slug: Web/API/console/info --- {{APIRef("Console API")}} diff --git a/files/ja/web/api/console/log/index.md b/files/ja/web/api/console/log_static/index.md similarity index 97% rename from files/ja/web/api/console/log/index.md rename to files/ja/web/api/console/log_static/index.md index 1086671d3e643b..9cd3e296604f5f 100644 --- a/files/ja/web/api/console/log/index.md +++ b/files/ja/web/api/console/log_static/index.md @@ -1,6 +1,7 @@ --- title: console.log() -slug: Web/API/console/log +slug: Web/API/console/log_static +original_slug: Web/API/console/log --- {{APIRef("Console API")}} diff --git a/files/ja/web/api/console/profile/index.md b/files/ja/web/api/console/profile_static/index.md similarity index 91% rename from files/ja/web/api/console/profile/index.md rename to files/ja/web/api/console/profile_static/index.md index c3279602df1a41..2ca922070b3f52 100644 --- a/files/ja/web/api/console/profile/index.md +++ b/files/ja/web/api/console/profile_static/index.md @@ -1,8 +1,7 @@ --- title: console.profile() -slug: Web/API/console/profile -l10n: - sourceCommit: 6c498a447fb5e776a67af7f9801a3aa407fc4d1c +slug: Web/API/console/profile_static +original_slug: Web/API/console/profile --- {{APIRef("Console API")}}{{Non-standard_header}} diff --git a/files/ja/web/api/console/profileend/index.md b/files/ja/web/api/console/profileend_static/index.md similarity index 94% rename from files/ja/web/api/console/profileend/index.md rename to files/ja/web/api/console/profileend_static/index.md index 84a2e3469e86e2..a598fd0b3c16e4 100644 --- a/files/ja/web/api/console/profileend/index.md +++ b/files/ja/web/api/console/profileend_static/index.md @@ -1,8 +1,7 @@ --- title: console.profileEnd() -slug: Web/API/console/profileEnd -l10n: - sourceCommit: 6c498a447fb5e776a67af7f9801a3aa407fc4d1c +slug: Web/API/console/profileend_static +original_slug: Web/API/console/profileEnd --- {{APIRef("Console API")}}{{Non-standard_header}} diff --git a/files/ja/web/api/console/table/console-table-array-of-array.png b/files/ja/web/api/console/table_static/console-table-array-of-array.png similarity index 100% rename from files/ja/web/api/console/table/console-table-array-of-array.png rename to files/ja/web/api/console/table_static/console-table-array-of-array.png diff --git a/files/ja/web/api/console/table/console-table-array-of-objects-firstname-only.png b/files/ja/web/api/console/table_static/console-table-array-of-objects-firstname-only.png similarity index 100% rename from files/ja/web/api/console/table/console-table-array-of-objects-firstname-only.png rename to files/ja/web/api/console/table_static/console-table-array-of-objects-firstname-only.png diff --git a/files/ja/web/api/console/table/console-table-array-of-objects.png b/files/ja/web/api/console/table_static/console-table-array-of-objects.png similarity index 100% rename from files/ja/web/api/console/table/console-table-array-of-objects.png rename to files/ja/web/api/console/table_static/console-table-array-of-objects.png diff --git a/files/ja/web/api/console/table/console-table-array.png b/files/ja/web/api/console/table_static/console-table-array.png similarity index 100% rename from files/ja/web/api/console/table/console-table-array.png rename to files/ja/web/api/console/table_static/console-table-array.png diff --git a/files/ja/web/api/console/table/console-table-object-of-objects.png b/files/ja/web/api/console/table_static/console-table-object-of-objects.png similarity index 100% rename from files/ja/web/api/console/table/console-table-object-of-objects.png rename to files/ja/web/api/console/table_static/console-table-object-of-objects.png diff --git a/files/ja/web/api/console/table/console-table-simple-object.png b/files/ja/web/api/console/table_static/console-table-simple-object.png similarity index 100% rename from files/ja/web/api/console/table/console-table-simple-object.png rename to files/ja/web/api/console/table_static/console-table-simple-object.png diff --git a/files/ja/web/api/console/table/index.md b/files/ja/web/api/console/table_static/index.md similarity index 97% rename from files/ja/web/api/console/table/index.md rename to files/ja/web/api/console/table_static/index.md index a983b406b20a39..bbf5c864bd9594 100644 --- a/files/ja/web/api/console/table/index.md +++ b/files/ja/web/api/console/table_static/index.md @@ -1,8 +1,7 @@ --- title: console.table() -slug: Web/API/console/table -l10n: - sourceCommit: 49b07e57dba92be3982e3c0035bc48e7a5036f97 +slug: Web/API/console/table_static +original_slug: Web/API/console/table --- {{APIRef("Console API")}} diff --git a/files/ja/web/api/console/time/index.md b/files/ja/web/api/console/time_static/index.md similarity index 93% rename from files/ja/web/api/console/time/index.md rename to files/ja/web/api/console/time_static/index.md index 84ef80ecde0c55..e78295d3a214e0 100644 --- a/files/ja/web/api/console/time/index.md +++ b/files/ja/web/api/console/time_static/index.md @@ -1,8 +1,7 @@ --- title: console.time() -slug: Web/API/console/time -l10n: - sourceCommit: 6c498a447fb5e776a67af7f9801a3aa407fc4d1c +slug: Web/API/console/time_static +original_slug: Web/API/console/time --- {{APIRef("Console API")}} diff --git a/files/ja/web/api/console/timeend/index.md b/files/ja/web/api/console/timeend_static/index.md similarity index 94% rename from files/ja/web/api/console/timeend/index.md rename to files/ja/web/api/console/timeend_static/index.md index 6dccdeeb8037b3..843f52fe9a787f 100644 --- a/files/ja/web/api/console/timeend/index.md +++ b/files/ja/web/api/console/timeend_static/index.md @@ -1,8 +1,7 @@ --- title: console.timeEnd() -slug: Web/API/console/timeEnd -l10n: - sourceCommit: 71aac3e50b8bc5afea791d69d232dab98e1c5c0d +slug: Web/API/console/timeend_static +original_slug: Web/API/console/timeEnd --- {{APIRef("Console API")}} diff --git a/files/ja/web/api/console/timelog/index.md b/files/ja/web/api/console/timelog_static/index.md similarity index 95% rename from files/ja/web/api/console/timelog/index.md rename to files/ja/web/api/console/timelog_static/index.md index af47a8ebdd681a..27ea03f7406c78 100644 --- a/files/ja/web/api/console/timelog/index.md +++ b/files/ja/web/api/console/timelog_static/index.md @@ -1,8 +1,7 @@ --- title: console.timeLog() -slug: Web/API/console/timeLog -l10n: - sourceCommit: 71aac3e50b8bc5afea791d69d232dab98e1c5c0d +slug: Web/API/console/timelog_static +original_slug: Web/API/console/timeLog --- {{APIRef("Console API")}} diff --git a/files/ja/web/api/console/timestamp/index.md b/files/ja/web/api/console/timestamp_static/index.md similarity index 93% rename from files/ja/web/api/console/timestamp/index.md rename to files/ja/web/api/console/timestamp_static/index.md index 6d2f5788a1ed08..ff0506d753e347 100644 --- a/files/ja/web/api/console/timestamp/index.md +++ b/files/ja/web/api/console/timestamp_static/index.md @@ -1,8 +1,7 @@ --- title: console.timeStamp() -slug: Web/API/console/timeStamp -l10n: - sourceCommit: a6c0c23f7972d85c4bdba384f79c9c6a79f07c13 +slug: Web/API/console/timestamp_static +original_slug: Web/API/console/timeStamp --- {{APIRef("Console API")}}{{Non-standard_header}} diff --git a/files/ja/web/api/console/trace/index.md b/files/ja/web/api/console/trace_static/index.md similarity index 92% rename from files/ja/web/api/console/trace/index.md rename to files/ja/web/api/console/trace_static/index.md index 52e2312790722f..55c0b09cf209fc 100644 --- a/files/ja/web/api/console/trace/index.md +++ b/files/ja/web/api/console/trace_static/index.md @@ -1,8 +1,7 @@ --- title: console.trace() -slug: Web/API/console/trace -l10n: - sourceCommit: 71aac3e50b8bc5afea791d69d232dab98e1c5c0d +slug: Web/API/console/trace_static +original_slug: Web/API/console/trace --- {{APIRef("Console API")}} diff --git a/files/ja/web/api/console/warn/index.md b/files/ja/web/api/console/warn_static/index.md similarity index 94% rename from files/ja/web/api/console/warn/index.md rename to files/ja/web/api/console/warn_static/index.md index c94a118c4db556..c94baa426bb374 100644 --- a/files/ja/web/api/console/warn/index.md +++ b/files/ja/web/api/console/warn_static/index.md @@ -1,8 +1,7 @@ --- title: console.warn() -slug: Web/API/console/warn -l10n: - sourceCommit: d19d68bf6078c23d527b6e1355925795e745d124 +slug: Web/API/console/warn_static +original_slug: Web/API/console/warn --- {{APIRef("Console API")}} diff --git a/files/ja/web/api/fetch_api/using_fetch/index.md b/files/ja/web/api/fetch_api/using_fetch/index.md index 0a85b975bbd22a..b4cca6a909246e 100644 --- a/files/ja/web/api/fetch_api/using_fetch/index.md +++ b/files/ja/web/api/fetch_api/using_fetch/index.md @@ -2,32 +2,26 @@ title: フェッチ API の使用 slug: Web/API/Fetch_API/Using_Fetch l10n: - sourceCommit: 1511e914c6b1ce6f88056bfefd48a6aa585cebce + sourceCommit: aae16b81e18d13dd006d418983558578563e9746 --- {{DefaultAPISidebar("Fetch API")}} [フェッチ API](/ja/docs/Web/API/Fetch_API) は、リクエストやレスポンスといった[プロトコル](/ja/docs/Glossary/Protocol)を操作する要素にアクセスするための JavaScript インターフェイスです。グローバルの {{domxref("fetch()")}} メソッドも提供しており、簡単で論理的な方法で、非同期にネットワーク越しでリソースを取得することができます。 -従来、このような機能は {{domxref("XMLHttpRequest")}} を使用して実現されてきました。フェッチはそれのより良い代替となるもので、{{domxref("Service_Worker_API", "サービスワーカー", "", 1)}}のような他の技術から簡単に利用することができます。フェッチは [CORS](/ja/docs/Web/HTTP/CORS) や HTTP への拡張のような HTTP に関連する概念をまとめて定義する場所でもあります。 +コールバックベースの API である {{domxref("XMLHttpRequest")}} とは異なり、Fetch は Promise ベースであり、[サービスワーカー](/ja/docs/Web/API/Service_Worker_API) で簡単に使用できる優れた代替手段を提供します。Fetch は、[CORS](/ja/docs/Web/HTTP/CORS) やその他の HTTP 拡張機能などの高度な HTTP 概念も統合します。 -`fetch` の仕様は、 `jQuery.ajax()` とは特に以下の点で異なっています。 - -- `fetch()` から返されるプロミスは、レスポンスが HTTP 404 や 500 を返す **HTTP エラーステータスの場合でも拒否されません**。サーバーがヘッダーで応答すると、プロミスは直ちに正常に解決します（レスポンスが 200-299 の範囲にない場合は、レスポンスの {{domxref("Response/ok", "ok")}} プロパティが false に設定されます）。拒否されるのは、ネットワーク障害があった場合や、何かがリクエストの完了を妨げた場合のみです。 -- [`credentials`](/ja/docs/Web/API/fetch#credentials) オプションを `include` に設定しない限り、`fetch()` は次のように動作します。 - - オリジン間リクエストではクッキーを送信しません。 - - オリジン間のレスポンスでは、送り返されたクッキーを設定しません。 - - 2018 年 8 月現在、既定の資格情報ポリシーは same-origin に変更されています。 Firefox もバージョン 61.0b13 で変更されました）。 - -基本的なフェッチリクエストは、本当に簡単に設定できます。以下のコードを見てください。 +基本的なフェッチリクエストは、以下のコードを見てください。 ```js -fetch("http://example.com/movies.json") - .then((response) => response.json()) - .then((data) => console.log(data)); +async function logMovies() { + const response = await fetch("http://example.com/movies.json"); + const movies = await response.json(); + console.log(movies); +} ``` -これはネットワーク越しに JSON ファイルを取得してコンソールに出力するスクリプトです。 `fetch()` の最も簡単な使い方は 1 つの引数 — fetch で取得したいリソースへのパス — のみをとり、 {{domxref("Response")}} オブジェクトで解決するプロミスを返します。 +これはネットワーク越しに JSON ファイルを取得してパースし、コンソールにデータを出力するスクリプトです。 `fetch()` の最も簡単な使い方は 1 つの引数 — fetch で取得したいリソースへのパス — のみをとり、 {{domxref("Response")}} オブジェクトで解決するプロミスを返します。 {{domxref("Response")}} は、実際の JSON レスポンス本体を直接持っているのではなく、 HTTP レスポンス全体を表現するものです。 {{domxref("Response")}} オブジェクトから JSON の本体の内容を抽出するには、 {{domxref("Response.json()", "json()")}} メソッドを使用します。これはレスポンス本体のテキストを JSON として解釈した結果で解決する第 2 のプロミスを返します。 @@ -73,6 +67,33 @@ postData("https://example.com/answer", { answer: 42 }).then((data) => { - `Content-Language` - `Content-Type` のうち、値が `application/x-www-form-urlencoded`, `multipart/form-data`, `text/plain` のいずれかのもの +## fetch の中止 + +未完了の `fetch()` 操作を中止するには、{{DOMxRef("AbortController")}} および {{DOMxRef("AbortSignal")}} インターフェイスを使用します。 + +```js +const controller = new AbortController(); +const signal = controller.signal; +const url = "video.mp4"; + +const downloadBtn = document.querySelector("#download"); +const abortBtn = document.querySelector("#abort"); + +downloadBtn.addEventListener("click", async () => { + try { + const response = await fetch(url, { signal }); + console.log("Download complete", response); + } catch (error) { + console.error(`Download error: ${error.message}`); + } +}); + +abortBtn.addEventListener("click", () => { + controller.abort(); + console.log("Download aborted"); +}); +``` + ## 資格情報つきのリクエストの送信 ブラウザーに資格情報のついたリクエストを送るようにするには、同一オリジンの場合もオリジン間の呼び出しの場合も、 `credentials: 'include'` を `init` オブジェクトに追加して `fetch()` メソッドに渡してください。 @@ -85,7 +106,7 @@ fetch("https://example.com", { > **メモ:** `Access-Control-Allow-Origin` は `credentials: 'include'` を含むリクエストでは、ワイルドカードを使用することを禁止しています。このような場合、正確なオリジンを提供する必要があります。 CORS unblocker 拡張機能を使用している場合でも、リクエストは失敗します。 -> **メモ:** この設定に関係なく、ブラウザーはプリフライトリクエストで資格情報を送信しないようにしてください。詳細については、 [CORS > 資格情報を含むリクエスト](/ja/docs/Web/HTTP/CORS#資格情報を含むリクエスト)を参照してください。 +> **メモ:** この設定に関係なく、ブラウザーはプリフライトリクエストで資格情報を送信しないようにしてください。詳細については、 [CORS 資格情報を含むリクエスト](/ja/docs/Web/HTTP/CORS#資格情報を含むリクエスト)を参照してください。 リクエスト URL が呼び出しスクリプトと同一オリジンの場合だけ資格情報を送りたい場合、 `credentials: 'same-origin'` を追加します。 @@ -110,22 +131,25 @@ fetch("https://example.com", { {{domxref("fetch()")}} を使って JSON エンコードしたデータを POST します。 ```js -const data = { username: "example" }; - -fetch("https://example.com/profile", { - method: "POST", // or 'PUT' - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify(data), -}) - .then((response) => response.json()) - .then((data) => { - console.log("Success:", data); - }) - .catch((error) => { +async function postJSON(data) { + try { + const response = await fetch("https://example.com/profile", { + method: "POST", // or 'PUT' + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(data), + }); + + const result = await response.json(); + console.log("Success:", result); + } catch (error) { console.error("Error:", error); - }); + } +} + +const data = { username: "example" }; +postJSON(data); ``` ## ファイルのアップロード @@ -133,23 +157,26 @@ fetch("https://example.com/profile", { ファイルは HTML の `` input 要素と、{{domxref("FormData.FormData","FormData()")}} と {{domxref("fetch()")}} を使ってアップロードできます。 ```js +async function upload(formData) { + try { + const response = await fetch("https://example.com/profile/avatar", { + method: "PUT", + body: formData, + }); + const result = await response.json(); + console.log("Success:", result); + } catch (error) { + console.error("Error:", error); + } +} + const formData = new FormData(); const fileField = document.querySelector('input[type="file"]'); formData.append("username", "abc123"); formData.append("avatar", fileField.files[0]); -fetch("https://example.com/profile/avatar", { - method: "PUT", - body: formData, -}) - .then((response) => response.json()) - .then((result) => { - console.log("Success:", result); - }) - .catch((error) => { - console.error("Error:", error); - }); +upload(formData); ``` ## 複数のファイルのアップロード @@ -157,27 +184,29 @@ fetch("https://example.com/profile/avatar", { ファイルのアップロードは、 HTML の `` 入力要素と {{domxref("FormData.FormData","FormData()")}} と {{domxref("fetch()")}} を使用して行うことができます。 ```js -const formData = new FormData(); +async function uploadMultiple(formData) { + try { + const response = await fetch("https://example.com/posts", { + method: "POST", + body: formData, + }); + const result = await response.json(); + console.log("Success:", result); + } catch (error) { + console.error("Error:", error); + } +} + const photos = document.querySelector('input[type="file"][multiple]'); +const formData = new FormData(); formData.append("title", "My Vegas Vacation"); -let i = 0; -for (const photo of photos.files) { + +for (const [i, photo] of Array.from(photos.files).entries()) { formData.append(`photos_${i}`, photo); - i++; } -fetch("https://example.com/posts", { - method: "POST", - body: formData, -}) - .then((response) => response.json()) - .then((result) => { - console.log("Success:", result); - }) - .catch((error) => { - console.error("Error:", error); - }); +uploadMultiple(formData); ``` ### テキストファイルの 1 行ずつの処理 @@ -192,22 +221,22 @@ async function* makeTextFileLineIterator(fileURL) { let { value: chunk, done: readerDone } = await reader.read(); chunk = chunk ? utf8Decoder.decode(chunk) : ""; - const re = /\n|\r|\r\n/gm; + const newline = /\r?\n/gm; let startIndex = 0; let result; while (true) { - let result = re.exec(chunk); + const result = newline.exec(chunk); if (!result) { if (readerDone) break; - let remainder = chunk.substr(startIndex); + const remainder = chunk.substr(startIndex); ({ value: chunk, done: readerDone } = await reader.read()); chunk = remainder + (chunk ? utf8Decoder.decode(chunk) : ""); - startIndex = re.lastIndex = 0; + startIndex = newline.lastIndex = 0; continue; } yield chunk.substring(startIndex, result.index); - startIndex = re.lastIndex; + startIndex = newline.lastIndex; } if (startIndex < chunk.length) { @@ -230,19 +259,18 @@ run(); {{domxref("fetch()")}} のプロミスは、ネットワークエラーに遭遇したりサーバー側の CORS の設定（通常はアクセス権の問題など）が間違っていたりすると、 {{jsxref("TypeError")}} で拒否されます。例えば、 404 はネットワークエラーにはなりません。 `fetch()` が成功したかどうかを正確に判定するには、プロミスが解決された後で、 {{domxref("Response.ok")}} プロパティが true になっているかを確認してください。次のようなコードになるでしょう。 ```js -fetch("flowers.jpg") - .then((response) => { +async function fetchImage() { + try { + const response = await fetch("flowers.jpg"); if (!response.ok) { throw new Error("Network response was not OK"); } - return response.blob(); - }) - .then((myBlob) => { + const myBlob = await response.blob(); myImage.src = URL.createObjectURL(myBlob); - }) - .catch((error) => { + } catch (error) { console.error("There has been a problem with your fetch operation:", error); - }); + } +} ``` ## 独自のリクエストオブジェクトの提供 @@ -250,6 +278,19 @@ fetch("flowers.jpg") `fetch()` の呼び出しに、リクエストしたいリソースへのパスを渡す代わりに、{{domxref("Request.Request","Request()")}} コンストラクターを使用して Request オブジェクトを作成し、 `fetch()` メソッドの引数として渡すこともできます。 ```js +async function fetchImage(request) { + try { + const response = await fetch(request); + if (!response.ok) { + throw new Error("Network response was not OK"); + } + const myBlob = await response.blob(); + myImage.src = URL.createObjectURL(myBlob); + } catch (error) { + console.error("Error:", error); + } +} + const myHeaders = new Headers(); const myRequest = new Request("flowers.jpg", { @@ -259,11 +300,7 @@ const myRequest = new Request("flowers.jpg", { cache: "default", }); -fetch(myRequest) - .then((response) => response.blob()) - .then((myBlob) => { - myImage.src = URL.createObjectURL(myBlob); - }); +fetchImage(myRequest); ``` `Request()` は、 `fetch()` メソッドとまったく同じ引数を受け入れます。既存のリクエストオブジェクトを渡して、コピーを作成することもできます。 @@ -331,18 +368,19 @@ try { ヘッダーの良い使用方法としては、以下のように、処理を行う前に、コンテンツタイプが正しいかどうか判定する等の使い方があります。 ```js -fetch(myRequest) - .then((response) => { +async function fetchJSON(request) { + try { + const response = await fetch(request); const contentType = response.headers.get("content-type"); if (!contentType || !contentType.includes("application/json")) { throw new TypeError("Oops, we haven't got JSON!"); } - return response.json(); - }) - .then((data) => { - /* process your data further */ - }) - .catch((error) => console.error(error)); + const jsonData = await response.json(); + // process your data further + } catch (error) { + console.error("Error:", error); + } +} ``` ### ガード @@ -386,7 +424,7 @@ addEventListener("fetch", (event) => { {{domxref("Response.Response","Response()")}} コンストラクターは、オプションとして 2 つの引数をとることができます。レスポンス本体と初期化オブジェクトです。 ({{domxref("Request.Request","Request()")}} が受け取れるものと似ています。) -> **メモ:** 静的メソッド {{domxref("Response.error","error()")}} は単純にエラーレスポンスを返します。同様に {{domxref("Response.redirect","redirect()")}} メソッドも 指定した URL にリダイレクトするレスポンスを返します。これらはサービスワーカーにのみ関連しています。 +> **メモ:** 静的メソッド {{domxref("Response/error_static","error()")}} は単純にエラーレスポンスを返します。同様に {{domxref("Response/redirect_static","redirect()")}} メソッドも 指定した URL にリダイレクトするレスポンスを返します。これらはサービスワーカーにのみ関連しています。 ## 本体 @@ -435,13 +473,15 @@ if (window.fetch) { } ``` -## 仕様書 - -{{Specifications}} +## `jQuery.ajax()` との差異 -## ブラウザーの互換性 +`fetch` の仕様は、 `jQuery.ajax()` とは特に以下の点で異なっています。 -{{Compat}} +- `fetch()` から返されるプロミスは、レスポンスが HTTP 404 や 500 を返す HTTP エラーステータスの場合でも拒否されません。サーバーがヘッダーで応答すると、プロミスは直ちに正常に解決します（レスポンスが 200-299 の範囲にない場合は、レスポンスの {{domxref("Response/ok", "ok")}} プロパティが `false` に設定されます）。拒否されるのは、ネットワーク障害があった場合や、何かがリクエストの完了を妨げた場合のみです。 +- [`credentials`](/ja/docs/Web/API/fetch#credentials) オプションを `include` に設定しない限り、`fetch()` は次のように動作します。 + - オリジン間リクエストではクッキーを送信しません。 + - オリジン間のレスポンスでは、送り返されたクッキーを設定しません。 + - 2018 年 8 月現在、既定の資格情報ポリシーは same-origin に変更されています。 ## 関連情報 diff --git a/files/ja/web/api/fragmentdirective/index.md b/files/ja/web/api/fragmentdirective/index.md index da5548d2b54329..31cac988df82e4 100644 --- a/files/ja/web/api/fragmentdirective/index.md +++ b/files/ja/web/api/fragmentdirective/index.md @@ -7,7 +7,7 @@ l10n: {{SeeCompatTable}} -**`FragmentDirective`** インターフェイスは、現在の文書で強調表示されているテキストフラグメントを表すお武衛j句とです。 +**`FragmentDirective`** インターフェイスは、現在の文書で強調表示されているテキストフラグメントを表すオブジェクトです。 これは {{domxref("Document.fragmentDirective")}} プロパティでアクセスできます。 diff --git a/files/ja/web/api/htmlelement/drag_event/index.md b/files/ja/web/api/htmlelement/drag_event/index.md index 7a2c3999bec9bc..76fd959f19d9f5 100644 --- a/files/ja/web/api/htmlelement/drag_event/index.md +++ b/files/ja/web/api/htmlelement/drag_event/index.md @@ -136,7 +136,7 @@ target.addEventListener("drop", (event) => { #### 結果 -{{EmbedLiveSample('Drag and drop example')}} +{{EmbedLiveSample('ドラッグ＆ドロップの例')}} ## 仕様書 diff --git a/files/ja/web/api/keyboardevent/metakey/index.md b/files/ja/web/api/keyboardevent/metakey/index.md index a56adecfc2a356..cbbfe08ce929e7 100644 --- a/files/ja/web/api/keyboardevent/metakey/index.md +++ b/files/ja/web/api/keyboardevent/metakey/index.md @@ -27,9 +27,8 @@ l10n: ```js function ismetaKey(e) { - document.querySelector( - "#output", - ).textContent = `metaKey pressed? ${e.metaKey}`; + document.querySelector("#output").textContent = + `metaKey pressed? ${e.metaKey}`; } ``` diff --git a/files/ja/web/api/response/json/index.md b/files/ja/web/api/response/json/index.md index 4c2c7ae1ff80fd..73cc73da1199d2 100644 --- a/files/ja/web/api/response/json/index.md +++ b/files/ja/web/api/response/json/index.md @@ -41,9 +41,8 @@ fetch(myRequest) listItem.appendChild(document.createElement("strong")).textContent = product.Name; listItem.append(` can be found in ${product.Location}. Cost: `); - listItem.appendChild( - document.createElement("strong"), - ).textContent = `£${product.Price}`; + listItem.appendChild(document.createElement("strong")).textContent = + `£${product.Price}`; myList.appendChild(listItem); } }) diff --git a/files/ja/web/api/window/scrolly/index.md b/files/ja/web/api/window/scrolly/index.md index c96888cc46622b..3d41a8e28f911f 100644 --- a/files/ja/web/api/window/scrolly/index.md +++ b/files/ja/web/api/window/scrolly/index.md @@ -51,13 +51,13 @@ var isCSS1Compat = (document.compatMode || "") === "CSS1Compat"; var x = supportPageOffset ? window.pageXOffset : isCSS1Compat - ? document.documentElement.scrollLeft - : document.body.scrollLeft; + ? document.documentElement.scrollLeft + : document.body.scrollLeft; var y = supportPageOffset ? window.pageYOffset : isCSS1Compat - ? document.documentElement.scrollTop - : document.body.scrollTop; + ? document.documentElement.scrollTop + : document.body.scrollTop; ``` ## 仕様書 diff --git a/files/ja/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md b/files/ja/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md index 9dc34cab9069ee..0ec763ffda31df 100644 --- a/files/ja/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md +++ b/files/ja/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md @@ -336,8 +336,8 @@ html {{ HTMLElement("form") }} は、次の４つの方法で送ることがで ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" - ? 2 - : 1 + ? 2 + : 1 : 0; this.receiver = target.action; this.status = 0; diff --git a/files/ja/web/css/-webkit-mask-box-image/index.md b/files/ja/web/css/-webkit-mask-box-image/index.md index bb0071eeb18ec7..22d6aa9a2e0cbe 100644 --- a/files/ja/web/css/-webkit-mask-box-image/index.md +++ b/files/ja/web/css/-webkit-mask-box-image/index.md @@ -10,7 +10,7 @@ slug: Web/CSS/-webkit-mask-box-image - {{ Xref_cssinitial() }}: なし - 適用先: すべての要素 - {{ Xref_cssinherited() }}: なし -- メディア: {{ Xref_cssvisual() }} +- メディア: {{cssxref("Media/Visual", "visual")}} - {{ Xref_csscomputed() }}: 指定通り ## 構文 diff --git a/files/ja/web/css/subsequent-sibling_combinator/index.md b/files/ja/web/css/subsequent-sibling_combinator/index.md index 9fe9c45180ae53..408909bbef2dc9 100644 --- a/files/ja/web/css/subsequent-sibling_combinator/index.md +++ b/files/ja/web/css/subsequent-sibling_combinator/index.md @@ -7,7 +7,7 @@ l10n: {{CSSRef("Selectors")}} -**後続兄弟結合子** (subsequent-sibling combinator, `~`) は 2 個のセレクターを結びつけ、 1 つ目の要素の後に 2 つ目の要素のがあり（直後である必要はない）、かつ両者が同じ親要素の子であるすべてのパターンに一致します。 +**後続兄弟結合子** (subsequent-sibling combinator, `~`) は 2 個のセレクターを結びつけ、 1 つ目の要素の後に 2 つ目の要素があり（直後である必要はない）、かつ両者が同じ親要素の子であるすべてのパターンに一致します。 次の例では、後続兄弟結合子 (`~`) は、画像の兄弟であり、画像の後に現れる段落を選択し、スタイル設定するのに便利です。 diff --git a/files/ja/web/html/element/marquee/index.md b/files/ja/web/html/element/marquee/index.md index 72965fad2a8a75..95487c33b90faa 100644 --- a/files/ja/web/html/element/marquee/index.md +++ b/files/ja/web/html/element/marquee/index.md @@ -63,7 +63,7 @@ l10n: height="200" behavior="alternate" style="border:solid"> - This text will bounce + This text will bounce ``` diff --git a/files/ja/web/javascript/reference/global_objects/array/entries/index.md b/files/ja/web/javascript/reference/global_objects/array/entries/index.md index c96f54948f38da..91f9fb2c07387e 100644 --- a/files/ja/web/javascript/reference/global_objects/array/entries/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/entries/index.md @@ -2,28 +2,38 @@ title: Array.prototype.entries() slug: Web/JavaScript/Reference/Global_Objects/Array/entries l10n: - sourceCommit: c66bfef4fbe37744579bfed6dcecd7c7b73741c2 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`entries()`** メソッドは、配列内の各要素に対するキー/値のペアを含む新しい **Array イテレーター**オブジェクトを返します。 +**`entries()`** は {{jsxref("Array")}} インスタンスのメソッドで、配列内の各要素に対するキー/値のペアを含む新しい[配列イテレーター](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)オブジェクトを返します。 {{EmbedInteractiveExample("pages/js/array-entries.html")}} ## 構文 -```js -entries(); +```js-nolint +entries() ``` +### 引数 + +なし。 + ### 返値 -新しい {{jsxref("Array")}} イテレーターオブジェクトを返します。 +新しい[反復可能イテレーターオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)です。 + +## 解説 + +[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)で使用された場合、 `entries()` メソッドは空のスロットを `undefined` の値が設定されているかのように反復処理します。 + +`entries()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。このメソッドは `this` の値に `length` プロパティと整数のキーを持ったプロパティがあることだけを求めます。 ## 例 -### 添字と要素の反復処理 +### インデックスと要素の反復処理 ```js const a = ["a", "b", "c"]; @@ -52,6 +62,38 @@ for (const element of arrayEntries) { // [2, 'c'] ``` +### 疎配列を反復処理 + +`entries()` は空のスロットを `undefined` であるかのように処理します。 + +```js +for (const element of [, "a"].entries()) { + console.log(element); +} +// [0, undefined] +// [1, 'a'] +``` + +### 配列でないオブジェクトに対する entries() の呼び出し + +`entries()` メソッドは `this` の `length` プロパティを読み込み、そのキーが `length` よりも小さい非負の整数である各プロパティにアクセスします。 + +```js +const arrayLike = { + length: 3, + 0: "a", + 1: "b", + 2: "c", + 3: "d", // length が 3 なので entries() からは無視される +}; +for (const entry of Array.prototype.entries.call(arrayLike)) { + console.log(entry); +} +// [ 0, 'a' ] +// [ 1, 'b' ] +// [ 2, 'c' ] +``` + ## 仕様書 {{Specifications}} @@ -63,11 +105,10 @@ for (const element of arrayEntries) { ## 関連情報 - [`Array.prototype.entries` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)ガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.keys()")}} - {{jsxref("Array.prototype.values()")}} -- {{jsxref("Array.prototype.forEach()")}} -- {{jsxref("Array.prototype.every()")}} -- {{jsxref("Array.prototype.some()")}} -- [for...of](/ja/docs/Web/JavaScript/Reference/Statements/for...of) +- [`Array.prototype[@@iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator) +- {{jsxref("TypedArray.prototype.entries()")}} - [反復処理プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols) -- [ポリフィル](https://github.com/behnammodi/polyfill/blob/master/array.polyfill.js) diff --git a/files/ja/web/javascript/reference/global_objects/array/every/index.md b/files/ja/web/javascript/reference/global_objects/array/every/index.md index 174fec1ca638f7..65897cef334e2b 100644 --- a/files/ja/web/javascript/reference/global_objects/array/every/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/every/index.md @@ -7,88 +7,57 @@ l10n: {{JSRef}} -**`every()`** メソッドは、列内のすべての要素が指定された関数で実装されたテストに合格するかどうかをテストします。これは論理値を返します。 +**`every()`** は {{jsxref("Array")}} インスタンスのメソッドは、列内のすべての要素が指定された関数で実装されたテストに合格するかどうかをテストします。これは論理値を返します。 -{{EmbedInteractiveExample("pages/js/array-every.html","shorter")}} +{{EmbedInteractiveExample("pages/js/array-every.html", "shorter")}} ## 構文 -```js -// アロー関数 -every((element) => { - /* … */ -}); -every((element, index) => { - /* … */ -}); -every((element, index, array) => { - /* … */ -}); - -// コールバック関数 -every(callbackFn); -every(callbackFn, thisArg); - -// インラインコールバック関数 -every(function (element) { - /* … */ -}); -every(function (element, index) { - /* … */ -}); -every(function (element, index, array) { - /* … */ -}); -every(function (element, index, array) { - /* … */ -}, thisArg); +```js-nolint +every(callbackFn) +every(callbackFn, thisArg) ``` ### 引数 - `callbackFn` - - - : 各要素に対してテストを実行する関数です。 - - この関数は、以下の引数を伴って呼び出されます。 - + - : 配列のそれぞれの要素に対して実行する関数です。要素がテストに合格した場合は[真値](/ja/docs/Glossary/Truthy)を返し、そうでなければ[偽値](/ja/docs/Glossary/Falsy)を返す必要があります。この関数は以下の引数で呼び出されます。 - `element` - - : 現在処理されている要素です。 + - : 配列内で現在処理されている要素です。 - `index` - - : 現在処理されている要素の添字です。 + - : 配列内で現在処理されている要素のインデックスです。 - `array` - - : `every` が実行されている配列です。 - -- `thisArg` {{Optional_inline}} - - : `callbackFn` を実行するときに `this` として使用すされる値です。 + - : `every()` が実行されている配列です。 +- `thisArg` {{optional_inline}} + - : `callbackFn` を実行するときに `this` として使用される値です。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。 ### 返値 -`callbackFn` 関数が配列のすべての要素について{{Glossary("truthy", "真値")}}を返した場合は **`true`**。それ以外は **`false`**。 +`callbackFn` 関数がいずれかの要素で{{Glossary("falsy", "偽値")}}を返した場合は、すぐに `false` を返します。それ以外は `true` です。 ## 解説 -`every` は、与えられた `callbackFn` 関数を、配列に含まれる各要素に対して一度ずつ、`callbackFn` が{{Glossary("falsy", "偽値")}}を返す要素が見つかるまで呼び出します。そのような要素が見つかると、`every` メソッドはただちに `false` を返します。`callbackFn` がすべての要素に対して{{Glossary("truthy", "真値")}}を返した場合、`every` は `true` を返します。 +`every()` メソッドは[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)です。配列のそれぞれの要素に対して、指定された `callbackFn` 関数が[偽値](/ja/docs/Glossary/Falsy)を返すまで一度ずつ呼び出します。 そのような要素が見つかった場合、 `every()` は直ちに `false` を返し、配列の反復処理を中止します。そうでない場合、 `callbackFn` がすべての要素に対して[真値](/ja/docs/Glossary/Truthy)を返すと、 `every()` は `true` を返します。 -> **メモ:** このメソッドを空の配列に対して呼び出すと、無条件に `true` を返します。 +`every` は数学における「∀ （すべての / for all）」記号と同様のふるまいをします。特に、空の配列に対しては `true` を返します。（[空集合](https://ja.wikipedia.org/wiki/空集合#性質)のすべての要素が与えられた任意の条件を満たすことは[空虚に真](https://en.wikipedia.org/wiki/Vacuous_truth)です。） -`callbackFn` は値が代入されている配列の要素に対してのみ呼び出されます。つまり、すでに削除された要素や、まだ値が代入されていない要素に対しては呼び出されません。 +`callbackFn` は値が代入されている配列の要素に対してのみ呼び出されます。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)の空のスロットに対しては呼び出されません。 -`callbackFn` は、要素の値、要素の添字、走査されている Array オブジェクトという 3 つの引数をともなって呼び出されます。 +`every()` は呼び出された配列を変更しませんが、 `callbackFn` として指定された関数は変更することができます。ただし、配列の長さは `callbackFn` を最初に呼び出す前に保存されることに注意してください。したがって、 -`thisArg` 引数が `every` に与えられると、それがコールバックの `this` として使用されます。それ以外の場合は `undefined` が `this` の値として使われます。`callbackFn` が最終的に監視できる `this` の値は、[関数から見た `this` の決定に関する一般的なルール](/ja/docs/Web/JavaScript/Reference/Operators/this)によって決定されます。 +- `callbackFn` は、 `every()` の呼び出しを始めたときの配列の長さを超えて追加された要素にはアクセスしません。 +- 既に処理したインデックスを変更しても、 `callbackFn` が再度呼び出されることはありません。 +- まだ処理していない既存の配列要素が `callbackFn` によって変更された場合、`callbackFn` に渡される値はその要素が取得された時点での値になります。[削除](/ja/docs/Web/JavaScript/Reference/Operators/delete)された要素は処理されません。 -`every` は呼び出された配列を変化させません。 +> **警告:** 上記のように進行中の配列に対して変更を行うと、理解しにくいコードになることが多いので、（特別な場合を除いて）避けるのが一般的です。 -`every` によって処理される要素の範囲は、`callbackFn` が最初に呼び出される前に設定されます。`callbackFn` は、`every` の呼び出しが開始された後に追加された要素に対しては、実行されません。既存の配列要素が変更されたり、削除された場合、`callbackFn` に渡される値は `every` がそれらを訪れた時点での値になり、`every` が削除された要素を訪問することはありません。 - -`every` は数学における「∀ （すべての / for all）」記号と同様のふるまいをします。具体的に言うと、空の配列に対しては `true` を返します。([空集合](https://ja.wikipedia.org/wiki/空集合#性質)のすべての要素が与えられた任意の条件を満たすことは[空虚に真](https://en.wikipedia.org/wiki/Vacuous_truth)です。) +`every()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。このメソッドは `this` の値に `length` プロパティと整数のキーを持ったプロパティがあることだけを求めます。 ## 例 ### すべての配列要素の大きさをテストする -次の例は、配列内のすべての要素が 10 よりも大きいかどうかテストします。 +次の例は、配列内のすべての要素が 10 以上であるかどうかテストします。 ```js function isBigEnough(element, index, array) { @@ -110,13 +79,13 @@ console.log(isSubset([1, 2, 3, 4, 5, 6, 7], [5, 7, 6])); // true console.log(isSubset([1, 2, 3, 4, 5, 6, 7], [5, 8, 7])); // false ``` -### アロー関数の使用 +### 疎配列に対する every() の使用 -[アロー関数](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)はより短い構文で同じテストを提供します。 +`every()` は空のスロットに対して関数を実行しません。 ```js -[12, 5, 8, 130, 44].every((x) => x >= 10); // false -[12, 54, 18, 130, 44].every((x) => x >= 10); // true +console.log([1, , 3].every((x) => x !== undefined)); // true +console.log([2, , 2].every((x) => x === 2)); // true ``` ### 初期配列への影響（変更、追加、削除） @@ -125,7 +94,7 @@ console.log(isSubset([1, 2, 3, 4, 5, 6, 7], [5, 8, 7])); // false ```js // --------------- -// Modifying items +// アイテムの変更 // --------------- let arr = [1, 2, 3, 4]; arr.every((elem, index, arr) => { @@ -134,15 +103,15 @@ arr.every((elem, index, arr) => { return elem < 2; }); -// Loop runs for 3 iterations, but would -// have run 2 iterations without any modification +// ループは 3 回反復処理されるが、 +// 何も変更しなければ 2 回実行される // // 1st iteration: [1,1,3,4][0] -> 1 // 2nd iteration: [1,1,2,4][1] -> 1 // 3rd iteration: [1,1,2,3][2] -> 2 // --------------- -// Appending items +// アイテムの追加 // --------------- arr = [1, 2, 3]; arr.every((elem, index, arr) => { @@ -151,14 +120,14 @@ arr.every((elem, index, arr) => { return elem < 4; }); -// Loop runs for 3 iterations, even after appending new items +// 新しい項目を追加しても、ループは 3 回反復処理する // // 1st iteration: [1, 2, 3, new][0] -> 1 // 2nd iteration: [1, 2, 3, new, new][1] -> 2 // 3rd iteration: [1, 2, 3, new, new, new][2] -> 3 // --------------- -// Deleting items +// アイテムの削除 // --------------- arr = [1, 2, 3, 4]; arr.every((elem, index, arr) => { @@ -167,13 +136,29 @@ arr.every((elem, index, arr) => { return elem < 4; }); -// Loop runs for 2 iterations only, as the remaining -// items are `pop()`ed off +// 残りのアイテムは `pop()` して取り除かれるため、ループは 2 回だけ反復処理される // // 1st iteration: [1,2,3][0] -> 1 // 2nd iteration: [1,2][1] -> 2 ``` +### 配列でないオブジェクトに対する every() の呼び出し + +`every()` メソッドは `this` の `length` プロパティを読み込み、すべてアクセスするか `callbackFn` が `false` を返すまで `length` より小さい非負の整数キーを持つ各プロパティにアクセスします。 + +```js +const arrayLike = { + length: 3, + 0: "a", + 1: "b", + 2: "c", + 3: 345, // length が 3 なので every() からは無視される +}; +console.log( + Array.prototype.every.call(arrayLike, (x) => typeof x === "string"), +); // true +``` + ## 仕様書 {{Specifications}} @@ -185,6 +170,8 @@ arr.every((elem, index, arr) => { ## 関連情報 - [`Array.prototype.every` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)ガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.forEach()")}} - {{jsxref("Array.prototype.some()")}} - {{jsxref("Array.prototype.find()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/fill/index.md b/files/ja/web/javascript/reference/global_objects/array/fill/index.md index e56ca6611f7aa0..0607add5eaba13 100644 --- a/files/ja/web/javascript/reference/global_objects/array/fill/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/fill/index.md @@ -2,31 +2,37 @@ title: Array.prototype.fill() slug: Web/JavaScript/Reference/Global_Objects/Array/fill l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`fill()`** メソッドは、開始位置（既定値は `0`）から終了位置（既定値は `array.length`）までのすべての要素を、静的な値に変更した配列を返します。 +**`fill()`** は {{jsxref("Array")}} インスタンスのメソッドで、インデックスの範囲内にある配列のすべての要素を一定の値に変更します。これは変更した配列を返します。 {{EmbedInteractiveExample("pages/js/array-fill.html")}} ## 構文 -```js -fill(value); -fill(value, start); -fill(value, start, end); +```js-nolint +fill(value) +fill(value, start) +fill(value, start, end) ``` ### 引数 - `value` - - : 配列に設定する値です。 + - : 配列を埋める値。もし `value` がオブジェクトであれば、配列のそれぞれの要素はそのオブジェクトを参照します。 - `start` {{optional_inline}} - - : 開始する位置です。既定値は `0` です。 + - : 埋め始める位置のゼロから始まるインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 + - インデックスが負の場合、配列の末尾からさかのぼって数えます。 `start < 0` の場合、 `start + array.length` が使用されます。 + - `start < -array.length` または `start` が省略された場合は `0` が使用されます。 + - `start >= array.length` の場合、埋められるインデックスはありません。 - `end` {{optional_inline}} - - : 終了する位置です。既定値は `arr.length` です。 + - : 埋め終える位置のゼロから始まるインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 `fill()` は `end` を含まず、その直前までを埋めます。 + - インデックスが負の場合、配列の末尾からさかのぼって数えます。 `end < 0` の場合、 `end + array.length` が使用されます。 + - `end < -array.length` の場合は `0` が使用されます。 + - `end >= array.length` または `end` が省略された場合、 ### 返値 @@ -34,11 +40,11 @@ fill(value, start, end); ## 解説 -- `start` が負の場合 `array.length + start` として扱われます。 -- `end` が負の場合 `array.length + end` として扱われます。 -- `fill` は意図的に一般化されています。 `this` が `Array` オブジェクトである必要はありません。 -- `fill` は変更を行うメソッドです。配列そのものを変更して返します。コピーを返すのではありません。 -- 最初の引数がオブジェクトの場合、配列の各スロットはそのオブジェクトを参照します。 +`fill()` メソッドは[変更メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#コピーメソッドと変更メソッド)です。これは `this` の長さは変更しませんが、 `this` のコンテンツは変更します。 + +`fill()` メソッドは[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)の空のスロットを、 `value` で埋めます。 + +`every()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。このメソッドは `this` の値に `length` プロパティと整数のキーを持ったプロパティがあることだけを求めます。文字列も配列風のものですが、文字列は不変なので、このメソッドを適用するのは適していません。 > **メモ:** `Array.prototype.fill()` を空の配列に対して使用すると、配列に変更するものがないので何も変更されません。 > 配列を宣言する際に `Array.prototype.fill()` を使用する場合は、スロットを配列に割り当てるようにしてください。 @@ -58,7 +64,6 @@ console.log([1, 2, 3].fill(4, -3, -2)); // [4, 2, 3] console.log([1, 2, 3].fill(4, NaN, NaN)); // [1, 2, 3] console.log([1, 2, 3].fill(4, 3, 5)); // [1, 2, 3] console.log(Array(3).fill(4)); // [4, 4, 4] -console.log([].fill.call({ length: 3 }, 4)); // {0: 4, 1: 4, 2: 4, length: 3} // 配列の各スロットから参照される、単一のオブジェクト。 const arr = Array(3).fill({}); // [{}, {}, {}] @@ -89,6 +94,18 @@ console.log(arr[2][0]); // 1 const tempGirls = Array(5).fill("girl", 0); ``` +配列は最初はインデックスが割り当てられていない[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)であることに注意してください。 `fill()` でこの配列を埋めることができます。 + +### 配列でないオブジェクトに対する fill() の呼び出し + +`fill()` メソッドは `this` の `length` プロパティを読み取り、 `start` から `end` までの各整数キーのプロパティの値を設定します。 + +```js +const arrayLike = { length: 2 }; +console.log(Array.prototype.fill.call(arrayLike, 1)); +// { '0': 1, '1': 1, length: 2 } +``` + ## 仕様書 {{Specifications}} @@ -100,5 +117,6 @@ const tempGirls = Array(5).fill("girl", 0); ## 関連情報 - [`Array.prototype.fill` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)ガイド - {{jsxref("Array")}} - {{jsxref("TypedArray.prototype.fill()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/filter/index.md b/files/ja/web/javascript/reference/global_objects/array/filter/index.md index 143f1829c40006..bc1b17ca749d96 100644 --- a/files/ja/web/javascript/reference/global_objects/array/filter/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/filter/index.md @@ -2,51 +2,36 @@ title: Array.prototype.filter() slug: Web/JavaScript/Reference/Global_Objects/Array/filter l10n: - sourceCommit: d0e961d9a7368356b5d26efaaa7191b4f56a425a + sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f --- {{JSRef}} -**`filter()`** メソッドは、この配列の中から、提供された関数で実装されたテストに合格した要素のみを抽出した[シャローコピー](/ja/docs/Glossary/Shallow_copy)を作成します。 +**`filter()`** は {{jsxref("Array")}} インスタンスのメソッドで、指定された配列の中から指定された関数で実装されているテストに合格した要素だけを抽出した[シャローコピー](/ja/docs/Glossary/Shallow_copy)を作成します。 -{{EmbedInteractiveExample("pages/js/array-filter.html","shorter")}} +{{EmbedInteractiveExample("pages/js/array-filter.html", "shorter")}} ## 構文 ```js-nolint -// アロー関数 -filter((element) => { /* … */ } ) -filter((element, index) => { /* … */ } ) -filter((element, index, array) => { /* … */ } ) - -// コールバック関数 filter(callbackFn) filter(callbackFn, thisArg) - -// インラインコールバック関数 -filter(function(element) { /* … */ }) -filter(function(element, index) { /* … */ }) -filter(function(element, index, array){ /* … */ }) -filter(function(element, index, array) { /* … */ }, thisArg) ``` ### 引数 - `callbackFn` - - : 配列の各要素に対して実行するテスト関数です。この関数が `true` を返した要素は残され、`false` を返した要素は取り除かれます。 - - この関数は以下の引数と共に呼び出されます。 - + - : 配列のそれぞれの要素に対して実行する関数です。この関数は、配列の要素を保持する場合は[真値](/ja/docs/Glossary/Truthy)、保持しない場合は[偽値](/ja/docs/Glossary/Falsy)を返します。この関数は以下の引数で呼び出されます。 - `element` - : 配列内で処理中の現在の要素です。 - `index` - - : 配列内で処理中の現在の要素の位置です。 + - : 配列内で処理中の現在の要素のインデックスです。 - `array` - : `filter()` が呼び出された配列です。 - `thisArg` {{optional_inline}} - - : `callbackFn` を実行するときに `this` として使用する値です。 + - : `callbackFn` を実行する際に `this` として使用される値。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。 ### 返値 @@ -54,27 +39,25 @@ filter(function(element, index, array) { /* … */ }, thisArg) ## 解説 -`filter()` は、与えられた `callbackFn` 関数を配列の各要素に対して一度ずつ呼び出し、`callbackFn` が [`true` に評価される値](/ja/docs/Glossary/Truthy)を返したすべての要素からなる新しい配列を生成します。 `callbackFn` は値が代入されている配列の添字に対してのみ呼び出されます。つまり、すでに削除された添字や、まだ値が代入されていない添字に対しては呼び出されません。`callbackFn` によるテストに合格しなかった配列要素は単純にスキップされ、新しい配列には含まれないだけです。 +`filter()` メソッドは[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)です。指定された `callbackFn` 関数を配列の各要素に対して一度ずつ呼び出し、 `callbackFn` が[真値](/ja/docs/Glossary/Truthy)を返したすべての要素からなる新しい配列を生成します。 `callbackFn` は値が代入されている配列の添字に対してのみ呼び出されます。 -`callbackFn` は 3 つの引数と共に呼び出されます。 +`callbackFn` は値が割り当てられている配列インデックスに対してのみ呼び出されます。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)の空のスロットに対しては呼び出されません。 -1. 要素の値 -2. 要素の添字 -3. 走査されている配列オブジェクト +`filter()` メソッドは[コピーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#コピーメソッドと変更メソッド)です。これは `this` を変更するのではなく、元の配列と同じ要素を格納した[シャローコピー](/ja/docs/Glossary/Shallow_copy)を返します。しかし、 `callbackFn` として指定された関数は配列を変更することができます。ただし、配列の長さは `callbackFn` を最初に呼び出す前に保存されることに注意してください。したがって、 -`filter` に引数 `thisArg` が与えられた場合、そのオブジェクトは `callbackFn` 関数内の `this` 値として使われます。そうでない場合、 `undefined` が `this` 値として使われます。`callbackFn` 関数内の最終的な `this` 値は[関数内の `this` を決定する一般的ルール](/ja/docs/Web/JavaScript/Reference/Operators/this)に従って決められます。 +- `callbackFn` は、 `every()` の呼び出しを始めたときの配列の長さを超えて追加された要素にはアクセスしません。 +- 既に処理したインデックスを変更しても、 `callbackFn` が再度呼び出されることはありません。 +- まだ処理していない既存の配列要素が `callbackFn` によって変更された場合、`callbackFn` に渡される値はその要素が取得された時点での値になります。[削除](/ja/docs/Web/JavaScript/Reference/Operators/delete)された要素は処理されません。 -`filter()` は呼び出された配列を変化させません。 +> **警告:** 上記のように進行中の配列に対して変更を行うと、理解しにくいコードになることが多いので、（特別な場合を除いて）避けるのが一般的です。 -`filter()` によって処理される配列要素の範囲は、`callbackFn` が最初に呼び出される前に設定されます。既に訪問した位置にある要素や範囲外のインデックスに割り当てられた要素に対しては、 `callbackFn` は実行されません。既存の配列要素が削除された場合は、同様にそれらの要素は処理されません。 - -> **警告:** 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。 +`filter()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。このメソッドは `this` の値に `length` プロパティと整数のキーを持ったプロパティがあることだけを求めます。 ## 例 ### 小さい値をすべて取り除く -次の例では、`filter()` を使って `10` 未満の値を持つ要素をすべて取り除いた配列を生成します。 +次の例では、`filter()` を使って 10 未満の値を持つ要素をすべて取り除いた配列を生成します。 ```js function isBigEnough(value) { @@ -137,7 +120,7 @@ console.log("Filtered Array\n", arrByID); // Filtered Array // [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }] -console.log("Number of Invalid Entries = ", invalidEntries); +console.log("Number of Invalid Entries =", invalidEntries); // Number of Invalid Entries = 5 ``` @@ -159,12 +142,37 @@ console.log(filterItems(fruits, "ap")); // ['apple', 'grapes'] console.log(filterItems(fruits, "an")); // ['banana', 'mango', 'orange'] ``` +### 疎配列に対する filter() の使用 + +`filter()` は空のスロットをスキップします。 + +```js +console.log([1, , undefined].filter((x) => x === undefined)); // [undefined] +console.log([1, , undefined].filter((x) => x !== 2)); // [1, undefined] +``` + +### 配列でないオブジェクトに対する filter() の呼び出し + +`filter()` メソッドは `this` の `length` プロパティを読み取り、 `length` 未満の非負の整数のキーを持つすべてのプロパティにアクセスします。 + +```js +const arrayLike = { + length: 3, + 0: "a", + 1: "b", + 2: "c", + 3: "a", // length が 3 であるため filter() は無視する +}; +console.log(Array.prototype.filter.call(arrayLike, (x) => x <= "b")); +// [ 'a', 'b' ] +``` + ### 初期の配列への影響（変更、追加、削除） 以下の例は、配列が変更された時の `filter` の動作をテストするものです。 ```js -// Modifying each word +// それぞれの単語を変更 let words = ["spray", "limit", "exuberant", "destruction", "elite", "present"]; const modifiedWords = words.filter((word, index, arr) => { @@ -173,10 +181,10 @@ const modifiedWords = words.filter((word, index, arr) => { }); console.log(modifiedWords); -// Notice there are three words below length 6, but since they've been modified one is returned +// 6 文字未満の語は 3 つあるが、変更されているので 1 つしか返されない // ["spray"] -// Appending new words +// new の単語を追加 words = ["spray", "limit", "exuberant", "destruction", "elite", "present"]; const appendedWords = words.filter((word, index, arr) => { arr.push("new"); @@ -184,10 +192,10 @@ const appendedWords = words.filter((word, index, arr) => { }); console.log(appendedWords); -// Only three fits the condition even though the `words` itself now has a lot more words with character length less than 6 +// `words` 自体には 6 文字未満の単語がたくさん増えたが、条件に合うのは 3 つだけ // ["spray" ,"limit" ,"elite"] -// Deleting words +// 単語の削除 words = ["spray", "limit", "exuberant", "destruction", "elite", "present"]; const deleteWords = words.filter((word, index, arr) => { arr.pop(); @@ -195,7 +203,7 @@ const deleteWords = words.filter((word, index, arr) => { }); console.log(deleteWords); -// Notice 'elite' is not even obtained as it's been popped off 'words' before filter can even get there +// 'elite' はフィルターが取得する前に 'words' から取り出されているので、取得されていないことに注意 // ["spray" ,"limit"] ``` @@ -210,8 +218,10 @@ console.log(deleteWords); ## 関連情報 - [`Array.prototype.filter` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)ガイド - {{jsxref("Array.prototype.forEach()")}} - {{jsxref("Array.prototype.every()")}} +- {{jsxref("Array.prototype.map()")}} - {{jsxref("Array.prototype.some()")}} - {{jsxref("Array.prototype.reduce()")}} -- {{jsxref("Array.prototype.find()")}} +- {{jsxref("TypedArray.prototype.filter()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/find/index.md b/files/ja/web/javascript/reference/global_objects/array/find/index.md index 063a6f4668a304..ada3b1ea3d1e44 100644 --- a/files/ja/web/javascript/reference/global_objects/array/find/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/find/index.md @@ -10,8 +10,8 @@ l10n: **`find()`** は {{jsxref("Array")}} インスタンスのメソッドで、提供されたテスト関数を満たす配列内の最初の要素を返します。 テスト関数を満たす値がない場合は、 {{jsxref("undefined")}} を返します。 -- 配列内で見つかった要素の**添字**が必要な場合は、{{jsxref("Array/findIndex", "findIndex()")}} を使用してください。 -- **値の添字**を検索する必要がある場合は、{{jsxref("Array/indexOf", "indexOf()")}} を使用してください。({{jsxref("Array/findIndex", "findIndex()")}} と似ていますが、それぞれの要素の等価性はテスト関数ではなく値でチェックします。) +- 配列内で見つかった要素の**インデックス**が必要な場合は、{{jsxref("Array/findIndex", "findIndex()")}} を使用してください。 +- **値のインデックス**を検索する必要がある場合は、{{jsxref("Array/indexOf", "indexOf()")}} を使用してください。({{jsxref("Array/findIndex", "findIndex()")}} と似ていますが、それぞれの要素の等価性はテスト関数ではなく値でチェックします。) - 配列内に値が**存在する**かどうかを調べる必要がある場合は、 {{jsxref("Array/includes", "includes()")}} を使用してください。 - 指定したテスト関数を満たす要素があるかどうかを調べる必要がある場合は、 {{jsxref("Array/some", "some()")}} を使用してください。 @@ -31,7 +31,7 @@ find(callbackFn, thisArg) - `element` - : 配列内で現在処理されている要素です。 - `index` - - : 配列内で現在処理されている要素の添字（位置）です。 + - : 配列内で現在処理されている要素のインデックス（位置）です。 - `array` - : `find()` を呼び出した元の配列です。 - `thisArg` {{optional_inline}} @@ -44,9 +44,9 @@ find(callbackFn, thisArg) ## 解説 -`find()` メソッドは[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)です。配列の要素のそれぞれに対して、添字の昇順に一度ずつ `callbackFn` 関数を実行し、`callbackFn` 関数が[真値](/ja/docs/Glossary/Truthy)を返すまで繰り返します。 `find()` はその要素を返し、配列の反復処理を停止します。もし `callbackFn` が真値を返さない場合、 `find()` は {{jsxref("undefined")}} を返します。 +`find()` メソッドは[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)です。配列の要素のそれぞれに対して、インデックスの昇順に一度ずつ `callbackFn` 関数を実行し、`callbackFn` 関数が[真値](/ja/docs/Glossary/Truthy)を返すまで繰り返します。 `find()` はその要素を返し、配列の反復処理を停止します。もし `callbackFn` が真値を返さない場合、 `find()` は {{jsxref("undefined")}} を返します。 -`callbackFn` は、値が割り当てられているものに限らず、配列中の*すべて*の添字に対して呼び出されます。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)では、空のスロットは `undefined` と同じ動作をします。 +`callbackFn` は、値が割り当てられているものに限らず、配列中の*すべて*のインデックスに対して呼び出されます。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)では、空のスロットは `undefined` と同じ動作をします。 `find()` は、呼び出した配列を変更 (mutate) しませんが、`callbackFn` で提供された関数は変更する可能性があります。しかし、配列の長さは最初に `callbackFn` が呼び出される*前に*設定されます。したがって、 @@ -56,7 +56,7 @@ find(callbackFn, thisArg) > **警告:** 上で説明したような同時進行の変更は、理解しにくいコードになることが多いので、（特別な場合を除いて）避けるのが一般的です。 -`find()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#generic_array_methods)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 +`find()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 ## 例 @@ -115,10 +115,10 @@ console.log([4, 5, 8, 12].find(isPrime)); // 5 疎配列の空のスロットは処理され、 `undefined` と同じように扱われます。 ```js -// 添字が 2, 3, 4 の位置に要素がない配列を宣言 +// インデックスが 2, 3, 4 の位置に要素がない配列を宣言 const array = [0, 1, , , , 5, 6]; -// 値が割り当てられているものに限らず、すべての添字を表示 +// 値が割り当てられているものに限らず、すべてのインデックスを表示 array.find((value, index) => { console.log("Visited index", index, "with value", value); }); @@ -130,7 +130,7 @@ array.find((value, index) => { // Visited index 5 with value 5 // Visited index 6 with value 6 -// 削除されたものを含め、すべての添字を表示 +// 削除されたものを含め、すべてのインデックスを表示 array.find((value, index) => { // 最初の反復処理で要素 5 を削除 if (index === 0) { diff --git a/files/ja/web/javascript/reference/global_objects/array/findindex/index.md b/files/ja/web/javascript/reference/global_objects/array/findindex/index.md index c1cfab4f500bed..4e5edaca85a707 100644 --- a/files/ja/web/javascript/reference/global_objects/array/findindex/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/findindex/index.md @@ -2,70 +2,37 @@ title: Array.prototype.findIndex() slug: Web/JavaScript/Reference/Global_Objects/Array/findIndex l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: 5c3c25fd4f2fbd7a5f01727a65c2f70d73f1880a --- {{JSRef}} -**`findIndex()`** メソッドは、配列内の**指定されたテスト関数に合格する**最初の要素の**位置**を返します。テスト関数に合格する要素がない場合を含め、それ以外の場合は `-1` を返します。 +**`findIndex()`** は {{jsxref("Array")}} インスタンスのメソッドで、配列内の指定されたテスト関数に合格する最初の要素のインデックスを返します。 +テスト関数に合格する要素がなかった場合は `-1` を返します。 -{{EmbedInteractiveExample("pages/js/array-findindex.html","shorter")}} +{{jsxref("Array/find", "find()")}} メソッドも参照してください。こちらのメソッドは、配列内で見つかった要素の位置ではなく、値を返します。 -{{jsxref("Array/find", "find()")}} メソッドも参照してください。このメソッドは、配列内で見つかった要素の位置ではなく、**値**を返します。 +{{EmbedInteractiveExample("pages/js/array-findindex.html", "shorter")}} ## 構文 -```js -// アロー関数 -findIndex((element) => { - /* … */ -}); -findIndex((element, index) => { - /* … */ -}); -findIndex((element, index, array) => { - /* … */ -}); - -// コールバック関数 -findIndex(callbackFn); -findIndex(callbackFn, thisArg); - -// インラインコールバック関数 -findIndex(function (element) { - /* … */ -}); -findIndex(function (element, index) { - /* … */ -}); -findIndex(function (element, index, array) { - /* … */ -}); -findIndex(function (element, index, array) { - /* … */ -}, thisArg); +```js-nolint +findIndex(callbackFn) +findIndex(callbackFn, thisArg) ``` ### 引数 - `callbackFn` - - - : 配列内のそれぞれの値に対して実行される関数で、条件を満たす要素が発見されたことを示す `true` が返るまで続けられます。 - - この関数は以下の引数と共に呼び出されます。 - + - : 配列のそれぞれの要素に対して実行する関数です。一致する要素が得られたことを示すには[真値](/ja/docs/Glossary/Truthy)を返し、そうでなければ[偽値](/ja/docs/Glossary/Falsy)を返してください。この関数は以下の引数で呼び出されます。 - `element` - - : 配列内で現在処理されている要素。 + - : 配列内で現在処理されている要素です。 - `index` - - : 配列内で現在処理されている要素の位置。 + - : 配列内で現在処理されている要素のインデックス（位置）です。 - `array` - - : `findIndex()` を呼び出した元の配列。 - - コールバックは適切な要素が見つかったときに、[真値](/ja/docs/Glossary/Truthy)を返す必要があります。 - この要素の位置が `findIndex()` から返されます。 - + - : `findIndex()` を呼び出した元の配列です。 - `thisArg` {{optional_inline}} - - : 任意で、 `callbackFn` を実行する時に `this` として使うオブジェクト。 + - : `callbackFn` 内で `this` として使われるオブジェクトです。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。 ### 返値 @@ -73,23 +40,19 @@ findIndex(function (element, index, array) { ## 解説 -`findIndex()` メソッドは、配列のそれぞれの位置に対して `callbackFn` を 1 回ずつ呼び出し、 `callbackFn` が{{Glossary("truthy", "真値")}}を返すものを見つけるまで繰り返します。 +`findIndex()` メソッドは[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)です。配列の要素のそれぞれに対して、インデックスの昇順に一度ずつ `callbackFn` 関数を実行し、`callbackFn` 関数が[真値](/ja/docs/Glossary/Truthy)を返すまで繰り返します。 `findIndex()` はその要素を返し、配列の反復処理を停止します。もし `callbackFn` が真値を返さない場合、 `findIndex()` は `-1` を返します。 -そのような要素が見つかったら、 `findIndex()` はすぐにその要素の位置を返します。 `callbackFn` が真値を返すものがなかった場合（または配列の `length` が `0` であった場合）、 `findIndex()` は `-1` を返します。 +`callbackFn` は、値が割り当てられているものに限らず、配列中の*すべて*のインデックスに対して呼び出されます。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)では、空のスロットは `undefined` と同じ動作をします。 -> **メモ:** {{jsxref("Array/some", "some()")}} などの他の配列メソッドとは異なり、 `callbackFn` は値が割り当てられていない位置でも実行されます。 +`findIndex()` は、呼び出した配列を変更 (mutate) しませんが、`callbackFn` で提供された関数は変更する可能性があります。しかし、配列の長さは最初に `callbackFn` が呼び出される*前に*設定されます。したがって、 -`callbackFn` は 3 つの引数で呼び出されます。 +- `callbackFn` は `findIndex()` の呼び出しを始めたときの配列の長さを超えて追加された要素にはアクセスしません。 +- 既に訪問した位置を変更しても、 `callbackFn` が再度呼び出されることはありません。 +- まだ訪問していない既存の配列要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値はその要素が取得される時点の値になります。[削除された](/ja/docs/Web/JavaScript/Reference/Operators/delete) 要素は `undefined` であるかのように処理されます。 -1. その要素の値 -2. その要素の位置 -3. 走査されている配列オブジェクト +> **警告:** 上で説明したような同時進行の変更は、理解しにくいコードになることが多いので、（特別な場合を除いて）避けるのが一般的です。 -`thisArg` 引数を `findIndex()` に与えた場合、それぞれの `callbackFn` の呼び出し時に、その与えたオブジェクトが `this` として使用されます。この引数を省略した場合は {{jsxref("undefined")}} になります。 - -`findIndex()` で処理される要素の範囲は、 `callbackFn` が最初に呼び出される前に設定されます。既に処理済みの位置に割り当てられた要素や、その範囲を超えた要素に対しては、 `callbackFn` が実行されません。 `callbackFn` は最初の `findIndex()` の呼び出し以降に配列に追加された要素は処理しません。配列内で未処理の既存の要素が `callbackFn` によって変更された場合、 `callbackFn` へ渡される値は `findIndex()` がその要素の位置を処理する時点での値になります。{{jsxref("Operators/delete", "削除", "", 1)}}された値も処理対象になります。 - -> **警告:** 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。 +`findIndex()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 ## 例 @@ -114,17 +77,29 @@ console.log([4, 6, 8, 9, 12].findIndex(isPrime)); // -1, not found console.log([4, 6, 7, 9, 12].findIndex(isPrime)); // 2 (array[2] is 7) ``` -### アロー関数を使用して位置を検索する +### 疎配列における find() の使用 -次の例では、アロー関数を使用してフルーツの位置を検索しています。 +疎配列で `undefined` を検索することで、空スロットのインデックスを取得することができます。 ```js -const fruits = ["apple", "banana", "cantaloupe", "blueberries", "grapefruit"]; +console.log([1, , 3].findIndex((x) => x === undefined)); // 1 +``` -const index = fruits.findIndex((fruit) => fruit === "blueberries"); +### 配列でないオブジェクトに対する find() の呼び出し -console.log(index); // 3 -console.log(fruits[index]); // blueberries +`findIndex()` メソッドは `this` の `length` プロパティを読み込み、そのキーが `length` よりも小さい非負の整数である各プロパティにアクセスします。 + +```js +const arrayLike = { + length: 3, + "-1": 0.1, // -1 < 0 なので findIndex() 空は無視される + 0: 2, + 1: 7.3, + 2: 4, +}; +console.log( + Array.prototype.findIndex.call(arrayLike, (x) => !Number.isInteger(x)), +); // 1 ``` ## 仕様書 @@ -138,5 +113,11 @@ console.log(fruits[index]); // blueberries ## 関連情報 - [`Array.prototype.findIndex` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.find()")}} +- {{jsxref("Array.prototype.findLast()")}} +- {{jsxref("Array.prototype.findLastIndex()")}} - {{jsxref("Array.prototype.indexOf()")}} +- {{jsxref("Array.prototype.lastIndexOf()")}} +- {{jsxref("TypedArray.prototype.findIndex()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/findlast/index.md b/files/ja/web/javascript/reference/global_objects/array/findlast/index.md index 52252704522708..41a7a85b7628a5 100644 --- a/files/ja/web/javascript/reference/global_objects/array/findlast/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/findlast/index.md @@ -2,17 +2,15 @@ title: Array.prototype.findLast() slug: Web/JavaScript/Reference/Global_Objects/Array/findLast l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f --- {{JSRef}} -**`findLast()`** メソッドは、指定されたテスト関数を満たす配列の最後の要素の値を返します。 +**`findLast()`** は {{jsxref("Array")}} インスタンスのメソッドで、配列を逆順に反復処理し、指定されたテスト関数を満たす最初の要素の値を返します。 テスト関数を満たす要素がない場合は {{jsxref("undefined")}} が返されます。 -{{EmbedInteractiveExample("pages/js/array-findlast.html","shorter")}} - -検索する必要がある場合、以下のメソッドがあります。 +検索を行う場合は以下のメソッドが必要です。 - 一致する最初の要素を得るには、 {{jsxref("Array/find", "find()")}} を使用してください。 - 配列内で一致する最後の位置を得るには、 {{jsxref("Array/findLastIndex", "findLastIndex()")}} を使用してください。 @@ -22,88 +20,48 @@ l10n: こちらも、テスト関数を使用する代わりに、各要素が値と等しいかどうかを調べます。 - 指定されたテスト関数を満たす要素を得るには {{jsxref("Array/some", "some()")}} を使用してください。 -## 構文 - -```js -// アロー関数 -findLast((element) => { - /* … */ -}); -findLast((element, index) => { - /* … */ -}); -findLast((element, index, array) => { - /* … */ -}); +{{EmbedInteractiveExample("pages/js/array-findlast.html", "shorter")}} -// コールバック関数 -findLast(callbackFn); -findLast(callbackFn, thisArg); +## 構文 -// インラインコールバック関数 -findLast(function (element) { - /* … */ -}); -findLast(function (element, index) { - /* … */ -}); -findLast(function (element, index, array) { - /* … */ -}); -findLast(function (element, index, array) { - /* … */ -}, thisArg); +```js-nolint +findLast(callbackFn) +findLast(callbackFn, thisArg) ``` ### 引数 - `callbackFn` - - - : 配列の要素をテストするために使用する関数です。 - - この関数は以下の引数で呼び出されます。 - + - : 配列のそれぞれの要素に対して実行する関数です。一致する要素が得られたことを示すには[真値](/ja/docs/Glossary/Truthy)を返し、そうでなければ[偽値](/ja/docs/Glossary/Falsy)を返してください。この関数は以下の引数で呼び出されます。 - `element` - - : 配列の現在の要素。 + - : 配列内で現在処理されている要素です。 - `index` - - : 配列内の現在の要素の添字（位置）。 + - : 配列内で現在処理されている要素のインデックス（位置）です。 - `array` - - : `findLast()` が呼び出された配列。 - - コールバックは適切な要素が得られたことを示すために、[真値](/ja/docs/Glossary/Truthy)を返さなければなりません。 - この要素の値が `findLast()` によって返されます。 - + - : `findLast()` を呼び出した元の配列です。 - `thisArg` {{optional_inline}} - - : `callbackFn` の実行時に {{jsxref("Operators/this", "this")}} として使用するオブジェクト。 + - : `callbackFn` 内で `this` として使われるオブジェクトです。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。 ### 返値 -指定されたテスト関数を満たす、配列中の最も大きい添字の値を持つ要素の値。一致する要素が見つからない場合は {{jsxref("undefined")}} となります。 +指定されたテスト関数を満たす、配列中の最も大きいインデックス値を持つ要素の値。一致する要素が見つからない場合は {{jsxref("undefined")}} となります。 ## 解説 -`findLast()` メソッドは `callbackFn` が[真値](/ja/docs/Glossary/Truthy)を返すまで、配列のそれぞれの要素に対して、添字の降順で `callbackFn` 関数を一度ずつ実行します。 -その後、 `findLast()` はその要素の値を返し、配列の反復処理を停止します。 -もし `callbackFn` が真値を返さなかった場合、 `findLast()` は {{jsxref("undefined")}} を返します。 - -`callbackFn` は、値が割り当てられている添字だけでなく、配列のすべての添字に対して呼び出されます。 -これは、代入された値のみを参照するメソッドと比較して、不連続の配列では効率が悪くなることを意味しています。 +`findLast()` メソッドは[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)です。配列の要素のそれぞれに対して、インデックスの降順に一度ずつ `callbackFn` 関数を実行し、`callbackFn` 関数が[真値](/ja/docs/Glossary/Truthy)を返すまで繰り返します。 `findLast()` はその要素を返し、配列の反復処理を停止します。もし `callbackFn` が真値を返さない場合、 `find()` は {{jsxref("undefined")}} を返します。 -`findLast()` に `thisArg` 引数が指定された場合は、 `callbackFn` を呼び出すたびに `this` の値として使用されます。 -指定されなかった場合は、{{jsxref("undefined")}} が使用されます。 +`callbackFn` は、値が割り当てられているものに限らず、配列中の*すべて*のインデックスに対して呼び出されます。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)では、空のスロットは `undefined` と同じ動作をします。 -`findLast()` メソッドは呼び出された配列を変更しませんが、 `callbackFn` に指定された関数は変更することができます。 -`findLast()` が処理する要素は、 `callbackFn` の最初の呼び出しの前に設定されます。 -したがって、 +`findLast()` は、呼び出した配列を変更 (mutate) しませんが、`callbackFn` で提供された関数は変更する可能性があります。しかし、配列の長さは最初に `callbackFn` が呼び出される*前に*設定されます。したがって、 -- `callbackFn` は、 `findLast()` の呼び出しが始まった後に配列に追加された要素に対しては呼び出されません。 -- 既に呼び出されたことのある添字に割り当てられた要素に対して、再び `callbackFn` が呼び出されることはありません。 -- 範囲外の添字に割り当てられた要素に対しては、 `callbackFn` は呼び出されません。 -- 既存の、まだ呼び出されていない配列の要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値は、 `findLast()` がその要素の添字を呼び出したときの値になります。 -- {{jsxref("Operators/delete", "削除", "", 1)}}された要素に対しても呼び出されます。 +- `callbackFn` は `findLast()` の呼び出しを始めたときの配列の長さを超えて追加された要素にはアクセスしません。 +- 既に訪問した位置を変更しても、 `callbackFn` が再度呼び出されることはありません。 +- まだ訪問していない既存の配列要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値はその要素が取得される時点の値になります。[削除された](/ja/docs/Web/JavaScript/Reference/Operators/delete) 要素は `undefined` であるかのように処理されます。 > **警告:** 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。 +`findLast()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 + ## 例 ### 要素のプロパティに一致する配列の最後のオブジェクトを探す @@ -147,7 +105,7 @@ console.log(result); ### 配列中の最後の素数を探す -以下の例では、配列の最後の要素で素数を探します（素数がない場合は {{jsxref("undefined")}} を返しています）。 +以下の例では、配列の最後の要素で素数の最後の要素を返します。素数がない場合は {{jsxref("undefined")}} を返しています。 ```js function isPrime(element) { @@ -168,43 +126,59 @@ console.log([4, 5, 7, 8, 9, 11, 12].findLast(isPrime)); // 11 ### 存在しない要素や削除された要素に対しても呼び出される -以下の例では、存在しない要素や削除された要素に対してもコールバックが呼び出され、渡された値が訪問時の値であることを示しています。 +疎配列の空のスロットは処理され、 `undefined` と同じように扱われます。 ```js -// Declare array with no elements at indexes 2, 3, and 4 +// インデックス 2、3、4 に要素がない配列の宣言 const array = [0, 1, , , , 5, 6]; -// Shows all indexes, not just those with assigned values +// 値が割り当てられているインデックスだけでなく、すべてのインデックスを表示 array.findLast((value, index) => { console.log(`Visited index ${index} with value ${value}`); }); - -// Shows all indexes, including deleted +// Visited index 6 with value 6 +// Visited index 5 with value 5 +// Visited index 4 with value undefined +// Visited index 3 with value undefined +// Visited index 2 with value undefined +// Visited index 1 with value 1 +// Visited index 0 with value 0 + +// 削除されたインデックスを含め、すべてのインデックスを表示 array.findLast((value, index) => { // Delete element 5 on first iteration if (index === 6) { console.log(`Deleting array[5] with value ${array[5]}`); delete array[5]; } - // Element 5 is still visited even though deleted + // 要素 5 は削除されたにもかかわらず、処理される console.log(`Visited index ${index} with value ${value}`); }); -// expected output: -// > "Visited index 6 with value 6" -// > "Visited index 5 with value 5" -// > "Visited index 4 with value undefined" -// > "Visited index 3 with value undefined" -// > "Visited index 2 with value undefined" -// > "Visited index 1 with value 1" -// > "Visited index 0 with value 0" -// > "Deleting array[5] with value 5" -// > "Visited index 6 with value 6" -// > "Visited index 5 with value undefined" -// > "Visited index 4 with value undefined" -// > "Visited index 3 with value undefined" -// > "Visited index 2 with value undefined" -// > "Visited index 1 with value 1" -// > "Visited index 0 with value 0" +// Deleting array[5] with value 5 +// Visited index 6 with value 6 +// Visited index 5 with value undefined +// Visited index 4 with value undefined +// Visited index 3 with value undefined +// Visited index 2 with value undefined +// Visited index 1 with value 1 +// Visited index 0 with value 0 +``` + +### 配列でないオブジェクトに対する findLast() の呼び出し + +`findLast()` メソッドは `this` の `length` プロパティを読み込み、次にキーが `length` より小さい非負の整数である各プロパティにアクセスします。 + +```js +const arrayLike = { + length: 3, + 0: 2, + 1: 7.3, + 2: 4, + 3: 3, // length が 3 なので findLast() は無視される +}; +console.log( + Array.prototype.findLast.call(arrayLike, (x) => Number.isInteger(x)), +); // 4 ``` ## 仕様書 @@ -217,9 +191,14 @@ array.findLast((value, index) => { ## 関連情報 -- [`Array.prototype.findLast` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) -- {{jsxref("Array.prototype.findIndex()")}} – 最後の要素を見つけて位置を返す -- {{jsxref("Array.prototype.includes()")}} – 配列内に値が存在するかどうかをテストする -- {{jsxref("Array.prototype.filter()")}} – 一致しない要素をすべて除外する -- {{jsxref("Array.prototype.every()")}} – すべての要素をテストする -- {{jsxref("Array.prototype.some()")}} – 1 つの要素が一致するまでテストする +- [`Array.prototype.findLast` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#array-find-from-last) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} +- {{jsxref("Array.prototype.find()")}} +- {{jsxref("Array.prototype.findIndex()")}} +- {{jsxref("Array.prototype.findLastIndex()")}} +- {{jsxref("Array.prototype.includes()")}} +- {{jsxref("Array.prototype.filter()")}} +- {{jsxref("Array.prototype.every()")}} +- {{jsxref("Array.prototype.some()")}} +- {{jsxref("TypedArray.prototype.findLast()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/findlastindex/index.md b/files/ja/web/javascript/reference/global_objects/array/findlastindex/index.md index defff0d880322d..c9083b3f38ee32 100644 --- a/files/ja/web/javascript/reference/global_objects/array/findlastindex/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/findlastindex/index.md @@ -2,106 +2,64 @@ title: Array.prototype.findLastIndex() slug: Web/JavaScript/Reference/Global_Objects/Array/findLastIndex l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f --- {{JSRef}} -**`findLastIndex()`** メソッドは、指定されたテスト関数を満たす配列の最後の要素の添字を返します。 +**`findLastIndex()`** は {{jsxref("Array")}} のメソッドで、この配列を逆順に反復処理し、指定されたテスト関数を満たす配列の最後の要素のインデックスを返します。 テスト関数を満たす要素がなかった場合は、 -1 を返します。 -{{EmbedInteractiveExample("pages/js/array-findlastindex.html","shorter")}} - {{jsxref("Array/findLast", "findLast()")}} メソッドも参照してください。こちらはテスト関数を満たす最後の要素の（位置ではなく）値を返します。 +{{EmbedInteractiveExample("pages/js/array-findlastindex.html", "shorter")}} + ## 構文 -```js -// アロー関数 -findLastIndex((element) => { - /* … */ -}); -findLastIndex((element, index) => { - /* … */ -}); -findLastIndex((element, index, array) => { - /* … */ -}); - -// コールバック関数 -findLastIndex(callbackFn); -findLastIndex(callbackFn, thisArg); - -// インラインコールバック関数 -findLastIndex(function (element) { - /* … */ -}); -findLastIndex(function (element, index) { - /* … */ -}); -findLastIndex(function (element, index, array) { - /* … */ -}); -findLastIndex(function (element, index, array) { - /* … */ -}, thisArg); +```js-nolint +findLastIndex(callbackFn) +findLastIndex(callbackFn, thisArg) ``` ### 引数 - `callbackFn` - - - : 配列内の要素をテストするのに使用される関数。 - - この関数は以下の引数で呼び出されます。 - + - : 配列のそれぞれの要素に対して実行する関数です。一致する要素が得られたことを示すには[真値](/ja/docs/Glossary/Truthy)を返し、そうでなければ[偽値](/ja/docs/Glossary/Falsy)を返してください。この関数は以下の引数で呼び出されます。 - `element` - - : 配列内で現在処理されている要素。 + - : 配列内で現在処理されている要素です。 - `index` - - : 配列内で現在処理されている要素の位置。 + - : 配列内で現在処理されている要素のインデックス（位置）です。 - `array` - - : `findLastIndex()` を呼び出した元の配列。 - - コールバックは適切な要素が見つかったときに、[真値](/ja/docs/Glossary/Truthy)を返す必要があります。 - この要素の位置が `findLastIndex()` から返されます。 - + - : `findLastIndex()` を呼び出した元の配列です。 - `thisArg` {{optional_inline}} - - : `callbackFn` の実行時に `this` として使用するオブジェクト。 + - : `callbackFn` 内で `this` として使われるオブジェクトです。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。 ### 返値 -配列内で、テストを満たした最後の（最も大きな）要素の添字。 -それ以外の場合は，一致する要素が見つからなければ -1 となります。 +配列内で、テストを満たした最後の（最も大きな）要素のインデックス。 +それ以外の場合は，一致する要素が見つからなければ `-1` となります。 ## 解説 -`findLastIndex()` メソッドは、配列のそれぞれの要素に対して、添字の降順に一度ずつ `callbackFn` 関数を実行し、 `callbackFn` が[真値](/ja/docs/Glossary/Truthy)を返すまで続けます。 -そして、 `findLastIndex()` がその要素の添字を返し、配列のイテレーターを停止します。 -もし `callbackFn` が真値を返さなかった場合、 `findLastIndex()` は `-1` を返します。 +`findLastIndex()` メソッドは[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)です。配列のそれぞれの要素に対して、インデックスの降順に一度ずつ指定された `callbackFn` 関数を実行し、 `callbackFn` が[真値](/ja/docs/Glossary/Truthy)を返すまで続けます。そして、 `findLastIndex()` がその要素のインデックスを返し、配列のイテレーターを停止します。もし `callbackFn` が真値を返さなかった場合、 `findLastIndex()` は `-1` を返します。 -`callbackFn` は値が割り当てられている要素だけではなく、配列の「すべての」添字に対して呼び出されます。 -すなわち、不連続な配列では、割り当てられた値のみを参照するメソッドと比較して、効率が悪くなります。 +`callbackFn` は値が割り当てられている要素だけではなく、配列の「すべての」インデックスに対して呼び出されます。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)で空のスロットは `undefined` と同じ動作をします。 -`thisArg` 引数が `findLastIndex()` に指定された場合、これを `this` の値として `callbackFn` のそれぞれの呼び出しが行われます。 -指定されなかった場合は、 {{jsxref("undefined")}} が使用されます。 +`findLastIndex()` メソッドは呼び出し元の配列を変更しませんが、 `callbackFn` に指定された関数は変更することがあります。ただし、配列の長さは `callbackFn` を最初に呼び出す前に保存されることに注意してください。したがって、 -`findLastIndex()` メソッドは呼び出し元の配列を変更しませんが、 `callbackFn` に指定された関数は変更することがあります。 -`findLastIndex()` が処理する要素は、 `callbackFn` の最初の呼び出しの「前」に設定されます。 -したがって、 - -- `callbackFn` は、 `findLastIndex()` の呼び出しが始まった後に配列に追加された要素に対しては呼び出されません。 -- 既に呼び出されたことのある添字に割り当てられた要素に対して、再び `callbackFn` が呼び出されることはありません。 -- 範囲外の添字に割り当てられた要素に対しては、 `callbackFn` は呼び出されません。 -- 既存の、まだ呼び出されていない配列の要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値は、 `findLastIndex()` がその要素の添字を呼び出したときの値になります。 -- {{jsxref("Operators/delete", "削除", "", 1)}}された要素に対しても呼び出されます。 +- `callbackFn` は `findLastIndex()` の呼び出しを始めたときの配列の長さを超えて追加された要素にはアクセスしません。 +- 既に訪問した位置を変更しても、 `callbackFn` が再度呼び出されることはありません。 +- まだ訪問していない既存の配列要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値はその要素が取得される時点の値になります。[削除された](/ja/docs/Web/JavaScript/Reference/Operators/delete) 要素は `undefined` であるかのように処理されます。 > **警告:** 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。 +`findLastIndex()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 + ## 例 ### 配列内の最後の素数の位置を探す -以下の例では、配列の最後の要素が素数である場合の添字を返します。は素数が存在しない場合は `-1` を返します。 +以下の例では、配列の最後の要素が素数である場合のインデックスを返します。素数が存在しない場合は `-1` を返します。 ```js function isPrime(element) { @@ -116,22 +74,33 @@ function isPrime(element) { return true; } -console.log([4, 6, 8, 12].findLast(isPrime)); // undefined, not found -console.log([4, 5, 7, 8, 9, 11, 12].findLast(isPrime)); // 11 +console.log([4, 6, 8, 12].findLastIndex(isPrime)); // -1, not found +console.log([4, 5, 7, 8, 9, 11, 12].findLastIndex(isPrime)); // 5 ``` -### アロー関数を使用した添字の検索 +### 疎配列に対する findLastIndex() の使用 -以下の例では、アロー関数を使用して果物の添字を探します。 -結果は {{jsxref("Array/findIndex", "findIndex()")}} を使用した場合と同じになることに注意してください。 +疎配列から `undefined` を検索し、空のスロットのインデックスを取得することができます。 ```js -const fruits = ["apple", "banana", "cantaloupe", "blueberries", "grapefruit"]; +console.log([1, , 3].findLastIndex((x) => x === undefined)); // 1 +``` + +### 配列でないオブジェクトに対する findLastIndex() の呼び出し -const index = fruits.findLastIndex((fruit) => fruit === "blueberries"); +`findLastIndex()` メソッドは `this` の `length` プロパティを読み込み、次にキーが `length` より小さい非負の整数である各プロパティにアクセスします。 -console.log(index); // 3 -console.log(fruits[index]); // blueberries +```js +const arrayLike = { + length: 3, + 0: 2, + 1: 7.3, + 2: 4, + 3: 3, // length が 3 であるため findLastIndex() から無視される +}; +console.log( + Array.prototype.findLastIndex.call(arrayLike, (x) => Number.isInteger(x)), +); // 2 ``` ## 仕様書 @@ -144,7 +113,12 @@ console.log(fruits[index]); // blueberries ## 関連情報 -- [`Array.prototype.findIndex` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) -- {{jsxref("Array.prototype.findLast()")}} +- [`Array.prototype.findLastIndex` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#array-find-from-last) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.find()")}} +- {{jsxref("Array.prototype.findIndex()")}} +- {{jsxref("Array.prototype.findLast()")}} - {{jsxref("Array.prototype.indexOf()")}} +- {{jsxref("Array.prototype.lastIndexOf()")}} +- {{jsxref("TypedArray.prototype.findLastIndex()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/flat/index.md b/files/ja/web/javascript/reference/global_objects/array/flat/index.md index bf2a732c540694..bf7d5037d317af 100644 --- a/files/ja/web/javascript/reference/global_objects/array/flat/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/flat/index.md @@ -2,115 +2,39 @@ title: Array.prototype.flat() slug: Web/JavaScript/Reference/Global_Objects/Array/flat l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`flat()`** メソッドは、すべてのサブ配列の要素を指定した深さで再帰的に結合した新しい配列を生成します。 +**`flat()`** は {{jsxref("Array")}} インスタンスのメソッドで、すべてのサブ配列の要素を指定した深さで再帰的に結合した新しい配列を生成します。 {{EmbedInteractiveExample("pages/js/array-flat.html")}} ## 構文 -``` -var newArray = arr.flat([depth]); +```js-nolint +flat() +flat(depth) ``` ### 引数 - `depth` {{optional_inline}} - - : ネストされた配列構造で、どの程度の深さをフラット化するか指定する深さレベルです。既定値は 1 です。 + - : ネストされた配列構造で、どの程度の深さをフラット化するか指定する深さレベルです。 + 既定値は 1 です。 ### 返値 サブ配列の要素を結合した新しい配列。 -## 代替手段 - -### reduce と concat - -```js -const arr = [1, 2, [3, 4]]; - -// 単一レベルの配列にする -arr.flat(); -// 次のものと同様 -arr.reduce((acc, val) => acc.concat(val), []); -// [1, 2, 3, 4] +## 解説 -// または、分割代入の構文を使用して -const flattened = (arr) => [].concat(...arr); -``` +`flat()` メソッドは[コピーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#コピーメソッドと変更メソッド)です。これは `this` を変更するのではなく、元の配列と同じ要素を格納した[シャローコピー](/ja/docs/Glossary/Shallow_copy)を返します。 -### reduce + concat + isArray + 再帰 +`flat()` メソッドは、フラット化される配列が[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)の場合、空のスロットを無視します。例えば、 `depth` が 1 の場合、ルート配列と最初の入れ子配列の空のスロットは無視されますが、それ以上の入れ子配列の空のスロットは配列自体に保持されます。 -```js -const arr = [1, 2, [3, 4, [5, 6]]]; - -// reduce と concat の再帰によって深いレベルを平坦化することができる -function flatDeep(arr, d = 1) { - if (!Array.isArray(arr)) { - return arr; - } - return d > 0 - ? arr.reduce((acc, val) => acc.concat(flatDeep(val, d - 1)), []) - : arr.slice(); -} - -flatDeep(arr, Infinity); -// [1, 2, 3, 4, 5, 6] -``` - -### スタックの使用 - -```js -// 再帰を使わずにスタックを使用して平坦化 -// note that depth control is hard/inefficient as we will need to tag EACH value with its own depth -// also possible w/o reversing on shift/unshift, but array OPs on the end tends to be faster -function flatten(input) { - const stack = [...input]; - const res = []; - while (stack.length) { - // pop value from stack - const next = stack.pop(); - if (Array.isArray(next)) { - // push back array items, won't modify the original input - stack.push(...next); - } else { - res.push(next); - } - } - // reverse to restore input order - return res.reverse(); -} - -const arr = [1, 2, [3, 4, [5, 6]]]; -flatten(arr); -// [1, 2, 3, 4, 5, 6] -``` - -### Generator 関数の使用 - -```js -function* flatten(array, depth) { - if (depth === undefined) { - depth = 1; - } - - for (const item of array) { - if (Array.isArray(item) && depth > 0) { - yield* flatten(item, depth - 1); - } else { - yield item; - } - } -} - -const arr = [1, 2, [3, 4, [5, 6]]]; -const flattened = [...flatten(arr, Infinity)]; -// [1, 2, 3, 4, 5, 6] -``` +`flat()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。しかし、その要素を平坦化するには配列でなければなりません。 ## 例 @@ -136,12 +60,35 @@ arr4.flat(Infinity); ### 平坦化と配列の穴 -flat メソッドは配列内の空要素を削除します。 +`flat()` メソッドは配列内の空要素を削除します。 ```js const arr5 = [1, 2, , 4, 5]; -arr5.flat(); -// [1, 2, 4, 5] +console.log(arr5.flat()); // [1, 2, 4, 5] + +const array = [1, , 3, ["a", , "c"]]; +console.log(array.flat()); // [ 1, 3, "a", "c" ] + +const array2 = [1, , 3, ["a", , ["d", , "e"]]]; +console.log(array2.flat()); // [ 1, 3, "a", ["d", empty, "e"] ] +console.log(array2.flat(2)); // [ 1, 3, "a", "d", "e"] +``` + +### 配列でないオブジェクトに対する flat() の呼び出し + +`flat()` メソッドは `this` の `length` プロパティを読み込み、キーが `length` より小さい非負の整数である各プロパティにアクセスします。要素が配列でない場合は、結果に直接追加されます。要素が配列の場合は、引数 `depth` に従って平坦化されます。 + +```js +const arrayLike = { + length: 3, + 0: [1, 2], + // 配列風オブジェクトは平坦化されない + 1: { length: 2, 0: 3, 1: 4 }, + 2: 5, + 3: 3, // length が 3 なので flat() から無視される +}; +console.log(Array.prototype.flat.call(arrayLike)); +// [ 1, 2, { '0': 3, '1': 4, length: 2 }, 5 ] ``` ## 仕様書 @@ -155,8 +102,9 @@ arr5.flat(); ## 関連情報 - [`Array.prototype.flat` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} +- {{jsxref("Array.prototype.concat()")}} - {{jsxref("Array.prototype.flatMap()")}} - {{jsxref("Array.prototype.map()")}} - {{jsxref("Array.prototype.reduce()")}} -- {{jsxref("Array.prototype.concat()")}} -- [A polyfill](https://github.com/behnammodi/polyfill/blob/master/array.polyfill.js) diff --git a/files/ja/web/javascript/reference/global_objects/array/flatmap/index.md b/files/ja/web/javascript/reference/global_objects/array/flatmap/index.md index 53f4a0e5da450a..bcba8a650167c6 100644 --- a/files/ja/web/javascript/reference/global_objects/array/flatmap/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/flatmap/index.md @@ -2,73 +2,46 @@ title: Array.prototype.flatMap() slug: Web/JavaScript/Reference/Global_Objects/Array/flatMap l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a --- {{JSRef}} -**`flatMap()`** メソッドは、最初にマッピング関数を使用してそれぞれの要素をマップした後、結果を新しい配列内にフラット化します。これは、{{jsxref("Array.prototype.map","map()")}} の後に深さ 1 の {{jsxref("Array.prototype.flat","flat()")}} を行うのと同じですが (`arr.map(...args).flat()`)、これら 2 つのメソッドを別々に呼び出すよりもわずかに効率的です。 +**`flatMap()`** は {{jsxref("Array")}} インスタンスのメソッドで、最初にマッピング関数を使用してそれぞれの要素をマップした後、結果を新しい配列内に平坦化します。これは、 {{jsxref("Array/map", "map()")}} の後に深さ 1 の {{jsxref("Array/flat","flat()")}} を行うのと同じですが (`arr.map(...args).flat()`)、これら 2 つのメソッドを別々に呼び出すよりもわずかに効率的です。 -{{EmbedInteractiveExample("pages/js/array-flatmap.html","shorter")}} +{{EmbedInteractiveExample("pages/js/array-flatmap.html", "shorter")}} ## 構文 -```js -// アロー関数 -flatMap((currentValue) => { - /* … */ -}); -flatMap((currentValue, index) => { - /* … */ -}); -flatMap((currentValue, index, array) => { - /* … */ -}); - -// コールバック関数 -flatMap(callbackFn); -flatMap(callbackFn, thisArg); - -// インラインコールバック関数 -flatMap(function (currentValue) { - /* … */ -}); -flatMap(function (currentValue, index) { - /* … */ -}); -flatMap(function (currentValue, index, array) { - /* … */ -}); -flatMap(function (currentValue, index, array) { - /* … */ -}, thisArg); +```js-nolint +flatMap(callbackFn) +flatMap(callbackFn, thisArg) ``` ### 引数 - `callbackFn` - - : 新しい配列の要素を生成する関数。 - - この関数は以下の引数と共に呼び出されます。 - - - `currentValue` - - : 配列で現在処理されている要素です。 + - : 配列のそれぞれの要素に対して実行する関数。この関数は、新しい配列の要素を格納した配列を返すか、新しい配列に追加する 1 つの配列以外の値を返します。この関数は、以下の引数で呼び出されます。 + - `element` + - : 配列で現在処理中の要素です。 - `index` - - : 配列で現在処理されている要素の添字です。 + - : 配列で現在処理中の要素のインデックスです。 - `array` - - : `flatMap` が呼び出された配列です。 + - : `flatMap()` が呼び出された配列です。 - `thisArg` {{optional_inline}} - - : `callbackFn` を実行するときに `this` として使用する値です。 + - : `callbackFn` を実行するときに `this` として使用する値です。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。 ### 返値 -各要素がコールバック関数の結果であり、深さが 1 にフラット化された新しい配列です。 +各要素がコールバック関数の結果であり、深さが 1 に平坦化された新しい配列です。 ## 解説 -コールバック関数の詳細な説明は {{jsxref("Array.prototype.map()")}} を参照してください。`flatMap` メソッドは、[`map`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map) の後に深さ 1 の [`flat`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/flat) を呼び出すのと同じです。 +`flatMap()` メソッドは[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)です。コールバック関数の詳細な説明は {{jsxref("Array.prototype.map()")}} を参照してください。`flatMap()` メソッドは、[`map(callbackFn, thisArg)`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map) の後にの [`flat(1)`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/flat) を呼び出すのと同じです。要素ごとに、新しい要素の配列を生成し、できた配列を連結して新しい配列を形成します。 + +`flatMap()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。ただし、 `callbackFn` から返される値は、平坦化する場合は配列でなければなりません。 ### 代替手段 @@ -109,7 +82,7 @@ arr1.flatMap((x) => [[x * 2]]); // [[2], [4], [6], [8]] ``` -上記は map を使用することでも実現できますが、ここでは `flatMap` の使用方法をよりよく示す例を紹介します。 +上記は map を使用することでも実現できますが、ここでは `flatMap()` の使用方法をよりよく示す例を紹介します。 文章のリストから単語のリストを生成してみましょう。 @@ -125,9 +98,12 @@ arr1.flatMap((x) => x.split(" ")); 出力リストの長さは入力リストの長さとは異なる場合があることに注意してください。 -### `map()` のアイテムの追加と削除 +### map() のアイテムの追加と削除 -`flatMap` は、`map` 中にアイテムの追加と削除（アイテムの数を変更）を行う方法として利用できます。つまり、常に*一対一*ではなく、_多くのアイテムを多くのアイテムに_（入力されたアイテムを個別に扱うことで）マップできるようになります。この意味では、 [filter](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) の逆のような働きをします。単純に、アイテムを保持するには 1 要素の配列を返し、アイテムを追加するには複数要素の配列を返し、アイテムを削除するには 0 要素の配列を返します。 +`flatMap` は、`map` 中にアイテムの追加と削除（アイテムの数を変更）を行う方法として利用できます。 +つまり、常に*一対一*ではなく、_多くのアイテムを多くのアイテムに_（入力されたアイテムを個別に扱うことで）マップできるようになります。 +この意味では、 [filter](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) の逆のような働きをします。 +単純に、アイテムを保持するには 1 要素の配列を返し、アイテムを追加するには複数要素の配列を返し、アイテムを削除するには 0 要素の配列を返します。 ```js // 例えば、すべての負の数を取り除き、 @@ -142,7 +118,41 @@ const result = a.flatMap((n) => { } return n % 2 === 0 ? [n] : [n - 1, 1]; }); -// expected output: [4, 1, 4, 20, 16, 1, 18] +console.log(result); // [4, 1, 4, 20, 16, 1, 18] +``` + +### 疎配列に対する flatMap() の使用 + +`map()` は呼び出されず、 `flat()` は返す配列の空のスロットを無視するので、 `callbackFn` は元の配列の空のスロットに対しては呼び出されません。 + +```js +console.log([1, 2, , 4, 5].flatMap((x) => [x, x * 2])); // [1, 2, 2, 4, 4, 8, 5, 10] +console.log([1, 2, 3, 4].flatMap((x) => [, x * 2])); // [2, 4, 6, 8] +``` + +### 配列以外のオブジェクトに対する flatMap() の呼び出し + +`flatMap()` メソッドは `this` の `length` プロパティを読み込み、次にキーが `length` より小さい非負の整数である各プロパティにアクセスします。コールバック関数の返り値が配列でない場合は、常に結果の配列に直接追加されます。 + +```js +const arrayLike = { + length: 3, + 0: 1, + 1: 2, + 2: 3, + 3: 4, // length が 3 であるため flatMap() から無視される +}; +console.log(Array.prototype.flatMap.call(arrayLike, (x) => [x, x * 2])); +// [1, 2, 2, 4, 3, 6] + +// コールバックから返された配列風のオブジェクトは平坦化されない +console.log( + Array.prototype.flatMap.call(arrayLike, (x) => ({ + length: 1, + 0: x, + })), +); +// [ { '0': 1, length: 1 }, { '0': 2, length: 1 }, { '0': 3, length: 1 } ] ``` ## 仕様書 @@ -156,8 +166,9 @@ const result = a.flatMap((n) => { ## 関連情報 - [`Array.prototype.flatMap` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} +- {{jsxref("Array.prototype.concat()")}} - {{jsxref("Array.prototype.flat()")}} - {{jsxref("Array.prototype.map()")}} - {{jsxref("Array.prototype.reduce()")}} -- {{jsxref("Array.prototype.concat()")}} -- [ポリフィル](https://github.com/behnammodi/polyfill/blob/master/array.polyfill.js) diff --git a/files/ja/web/javascript/reference/global_objects/array/foreach/index.md b/files/ja/web/javascript/reference/global_objects/array/foreach/index.md index e0e71d85da731d..9ccfc5a2de788f 100644 --- a/files/ja/web/javascript/reference/global_objects/array/foreach/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/foreach/index.md @@ -2,7 +2,7 @@ title: Array.prototype.forEach() slug: Web/JavaScript/Reference/Global_Objects/Array/forEach l10n: - sourceCommit: 9b38f886d21c5d0a428f58acb20c4d0fc6c2e098 + sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a --- {{JSRef}} @@ -13,116 +13,70 @@ l10n: ## 構文 -```js -// アロー関数 -forEach((element) => { - /* … */ -}); -forEach((element, index) => { - /* … */ -}); -forEach((element, index, array) => { - /* … */ -}); - -// コールバック関数 -forEach(callbackFn); -forEach(callbackFn, thisArg); - -// インラインコールバック関数 -forEach(function (element) { - /* … */ -}); -forEach(function (element, index) { - /* … */ -}); -forEach(function (element, index, array) { - /* … */ -}); -forEach(function (element, index, array) { - /* … */ -}, thisArg); +```js-nolint +forEach(callbackFn) +forEach(callbackFn, thisArg) ``` ### 引数 - `callbackFn` - - - : 各要素に対して実行されるコールバック関数です。 - - この関数は、以下の引数と共に呼び出されます。 - + - : 配列のそれぞれの要素に対して実行する関数。返値は破棄されます。この関数は以下の引数で呼び出されます。 - `element` - - : 現在処理されている配列の要素です。 + - : 現在処理中の配列の要素です。 - `index` - - : 配列内の `element` の添字です。 + - : 現在処理中の配列の要素のインデックスです。 - `array` - : `forEach()` が呼び出されている配列です。 - - `thisArg` {{optional_inline}} - - : `callbackFn` 内で `this` として使用する値です。 + - : `callbackFn` を実行するときに `this` として使用する値です。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。 ### 返値 -`undefined` です。 +なし ({{jsxref("undefined")}})。 ## 解説 -`forEach()` は、与えられた関数 `callbackFn` を配列に含まれる各要素に対して一度ずつ、昇順で呼び出します。インデックスプロパティが削除されていたり、初期化されていなかったりした場合は呼び出されません。（不連続な配列については、[下記の例を参照](#初期化されていない値については何もしない（不連続な配列）)。） - -`callbackFn` は次の 3 つの引数で呼び出されます。 +`forEach()` メソッドは[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)です。指定された関数 `callbackFn` を配列に含まれる各要素に対して一度ずつ、昇順で呼び出します。 {{jsxref("Array/map", "map()")}} と異なり、 `forEach()` は常に {{jsxref("undefined")}} を返し、連鎖させることはできません。典型的な使用する用途は、チェーンの終わりで副次効果を実行することです。 -1. 要素の値 -2. 要素のインデックス -3. 走査されている配列 +`callbackFn` は値が割り当てられている配列インデックスに対してのみ呼び出されます。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)で空のスロットに対しては呼び出されません。 -`thisArg` 引数が `forEach()` に与えられると、それがコールバックの `this` 値になります。 -最終的に `callbackFn` から見える `thisArg` の値は、[関数が見る `this` を決める通常のルール](/ja/docs/Web/JavaScript/Reference/Operators/this) に従って決定されます。 +`forEach()` メソッドは呼び出し元の配列を変更しませんが、 `callbackFn` に指定された関数は変更することがあります。ただし、配列の長さは `callbackFn` を最初に呼び出す前に保存されることに注意してください。したがって、 -`forEach()` によって処理される配列要素の範囲は、`callbackFn` が最初に呼び出される前に設定されます。訪問済みの添字、または範囲を外れた添字に割り当てられている要素については `callbackFn` が実行されません。既存の配列要素が変更または削除された場合、`callbackFn` に渡される値は `forEach()` がそれらを参照した時点での値になります。削除された配列要素を参照することはありません。既に参照された配列要素が反復処理の間に（例えば {{jsxref("Array.prototype.shift()", "shift()")}} を使用して）削除された場合、後の要素は飛ばされます。([下記の例を参照してください](#反復処理中の配列の変更)。) +- `callbackFn` は `forEach()` の呼び出しを始めたときの配列の長さを超えて追加された要素にはアクセスしません。 +- 既に訪問した位置を変更しても、 `callbackFn` が再度呼び出されることはありません。 +- まだ訪問していない既存の配列要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値はその要素が取得される時点の値になります。[削除](/ja/docs/Web/JavaScript/Reference/Operators/delete)された要素は `undefined` であるかのように処理されます。 > **警告:** 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。 -`forEach()` は配列の各要素に対して `callbackFn` 関数を一度ずつ実行します。{{jsxref("Array.prototype.map()", "map()")}} や {{jsxref("Array.prototype.reduce()", "reduce()")}} と異なり、返値は常に {{jsxref("undefined")}} であり、チェーンできません。チェーンの最後に副作用を生じさせるのが典型的な使用法です。 +`forEach()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 -`forEach()` は呼び出された配列を変化させません。(ただし `callbackFn` が変化させる可能性があります) +例外を発生する以外の方法で、 `forEach()` ループを止めたり脱出したりする方法はありません。そのような動作を行う場合、 `forEach()` メソッドは適切な方法ではありません。 -> **メモ:** 例外を発生する以外の方法で、`forEach()` ループを止めることはできません。ループ中に中断する必要がある場合、`forEach()` メソッドは適切な方法ではありません。 -> -> 早期終了を行うには下記のような手段が適しています。 -> -> - 単純な [for](/ja/docs/Web/JavaScript/Reference/Statements/for) ループ -> - [for...of](/ja/docs/Web/JavaScript/Reference/Statements/for...of) -> / [for...in](/ja/docs/Web/JavaScript/Reference/Statements/for...in) ループ -> - {{jsxref("Array.prototype.every()")}} -> - {{jsxref("Array.prototype.some()")}} -> - {{jsxref("Array.prototype.find()")}} -> - {{jsxref("Array.prototype.findIndex()")}} -> -> 他の Array のメソッドである {{jsxref("Array.prototype.every()", "every()")}}, {{jsxref("Array.prototype.some()", "some()")}}, {{jsxref("Array.prototype.find()", "find()")}}, {{jsxref("Array.prototype.findIndex()", "findIndex()")}} は、配列の要素を検査する際、truthy の値を返すことで以降の繰り返しが必要であるかどうかを決めます。 +早期終了は [`for`](/ja/docs/Web/JavaScript/Reference/Statements/for), [`for...of`](/ja/docs/Web/JavaScript/Reference/Statements/for...of), [`for...in`](/ja/docs/Web/JavaScript/Reference/Statements/for...in) のようなループ文で行うことができます。また、{{jsxref("Array/every", "every()")}}, {{jsxref("Array/some", "some()")}}, {{jsxref("Array/find", "find()")}}, {{jsxref("Array/findIndex", "findIndex()")}} のような配列メソッドも、それ以上の反復処理が不要な場合は、直ちに反復処理を停止します。 -> **メモ:** forEach は同期関数を期待します。 -> -> `forEach` はプロミスを待ちません。`forEach` のコールバックとしてプロミス (または非同期関数) を使用する場合は、その意味合いを理解しておくようにしてください。 -> -> ```js -> const ratings = [5, 4, 5]; -> let sum = 0; -> -> const sumFunction = async (a, b) => a + b; -> -> ratings.forEach(async (rating) => { -> sum = await sumFunction(sum, rating); -> }); -> -> console.log(sum); -> // 本来期待される出力: 14 -> // 実際の出力: 0 -> ``` +`forEach()` は同期関数を期待します。プロミスを待ちません。`forEach` のコールバックとしてプロミス（または非同期関数）を使用する場合は、その意味合いを理解しておくようにしてください。 + +```js +const ratings = [5, 4, 5]; +let sum = 0; + +const sumFunction = async (a, b) => a + b; + +ratings.forEach(async (rating) => { + sum = await sumFunction(sum, rating); +}); + +console.log(sum); +// 本来期待される出力: 14 +// 実際の出力: 0 +``` + +一連の非同期処理を順次または並列に実行するには、[プロミスの合成](/ja/docs/Web/JavaScript/Guide/Using_promises#合成)を参照してください。 ## 例 -### 初期化されていない値については何もしない（不連続な配列） +### 不連続な配列に対する forEach() の使用 ```js-nolint const arraySparse = [1, 3, /* 空 */, 7]; @@ -215,7 +169,8 @@ console.log(obj.sum); // 16 次のコードは与えられたオブジェクトのコピーを生成します。 -オブジェクトのコピーを作成するには様々な方法があります。以下のものは一つの方法で、`Array.prototype.forEach()` が `Object.*` ユーティリティ関数を使用して、どのように動作するかを説明しています。 +オブジェクトのコピーを作成するには様々な方法があります。 +以下のものは一つの方法で、`Array.prototype.forEach()` が `Object.*` ユーティリティ関数を使用して、どのように動作するかを説明しています。 ```js const copy = (obj) => { @@ -253,9 +208,10 @@ words.forEach((word) => { console.log(words); // ['two', 'three', 'four'] ``` -### 配列の平板化 +### 配列の平坦化 -次の例は学習目的だけのものです。組み込みメソッドを使用して配列を平板化したい場合は、{{jsxref("Array.prototype.flat()")}} を使用することができます。 +次の例は学習目的だけのものです。 +組み込みメソッドを使用して配列を平坦化したい場合は、{{jsxref("Array.prototype.flat()")}} を使用することができます。 ```js const flatten = (arr) => { @@ -275,6 +231,24 @@ const nested = [1, 2, 3, [4, 5, [6, 7], 8, 9]]; console.log(flatten(nested)); // [1, 2, 3, 4, 5, 6, 7, 8, 9] ``` +### 配列以外のオブジェクトに対する forEach() の呼び出し + +`forEach()` メソッドは `this` の `length` プロパティを読み込み、次にキーが `length` より小さい非負の整数である各プロパティにアクセスします。 + +```js +const arrayLike = { + length: 3, + 0: 2, + 1: 3, + 2: 4, + 3: 5, // length が 3 であるため forEach() からは無視される +}; +Array.prototype.forEach.call(arrayLike, (x) => console.log(x)); +// 2 +// 3 +// 4 +``` + ## 仕様書 {{Specifications}} @@ -286,11 +260,13 @@ console.log(flatten(nested)); // [1, 2, 3, 4, 5, 6, 7, 8, 9] ## 関連情報 - [`Array.prototype.forEach` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.find()")}} -- {{jsxref("Array.prototype.findIndex()")}} - {{jsxref("Array.prototype.map()")}} - {{jsxref("Array.prototype.filter()")}} - {{jsxref("Array.prototype.every()")}} - {{jsxref("Array.prototype.some()")}} +- {{jsxref("TypedArray.prototype.forEach()")}} - {{jsxref("Map.prototype.forEach()")}} - {{jsxref("Set.prototype.forEach()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/from/index.md b/files/ja/web/javascript/reference/global_objects/array/from/index.md index 806d7f4ec42ad9..5b92523a3c1570 100644 --- a/files/ja/web/javascript/reference/global_objects/array/from/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/from/index.md @@ -2,61 +2,35 @@ title: Array.from() slug: Web/JavaScript/Reference/Global_Objects/Array/from l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a --- {{JSRef}} -**`Array.from()`** メソッドは、反復可能オブジェクトや配列風オブジェクトからシャローコピーされた、新しい `Array` インスタンスを生成します。 +**`Array.from()`** 静的メソッドは、[反復可能オブジェクト](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol)や[配列風オブジェクト](/ja/docs/Web/JavaScript/Guide/Indexed_collections#working_with_array-like_objects)からシャローコピーされた、新しい `Array` インスタンスを生成します。 -{{EmbedInteractiveExample("pages/js/array-from.html","shorter")}} +{{EmbedInteractiveExample("pages/js/array-from.html", "shorter")}} ## 構文 -```js -// アロー関数 -Array.from(arrayLike, (element) => { - /* … */ -}); -Array.from(arrayLike, (element, index) => { - /* … */ -}); - -// マッピング関数 -Array.from(arrayLike, mapFn); -Array.from(arrayLike, mapFn, thisArg); - -// インラインマッピング関数 -Array.from(arrayLike, function mapFn(element) { - /* … */ -}); -Array.from(arrayLike, function mapFn(element, index) { - /* … */ -}); -Array.from( - arrayLike, - function mapFn(element) { - /* … */ - }, - thisArg, -); -Array.from( - arrayLike, - function mapFn(element, index) { - /* … */ - }, - thisArg, -); +```js-nolint +Array.from(arrayLike) +Array.from(arrayLike, mapFn) +Array.from(arrayLike, mapFn, thisArg) ``` ### 引数 - `arrayLike` - : 配列に変換する反復可能オブジェクトまたは配列風オブジェクト。 -- `mapFn` {{Optional_inline}} - - : 配列のすべての要素に対して呼び出される マッピング関数。 -- `thisArg` {{Optional_inline}} - - : `mapFn` を実行する時に `this` として使用する値。 +- `mapFn` {{optional_inline}} + - : 配列の各要素に対して呼び出す関数です。指定された場合、配列に追加されるすべての値は最初にこの関数に渡され、代わりに `mapFn` の返値が配列に追加されます。この関数は以下の引数で呼び出されます。 + - `element` + - : 配列内で現在処理中の要素です。 + - `index` + - : 配列内で現在処理中の要素のインデックスです。 +- `thisArg` {{optional_inline}} + - : `mapFn` を実行する時に `this` として使用する値です。 ### 返値 @@ -69,15 +43,15 @@ Array.from( - [反復可能オブジェクト](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)（{{jsxref("Map")}} や {{jsxref("Set")}} のような要素を取得するオブジェクト） - オブジェクトが反復可能でない場合は、配列風オブジェクト（`length` プロパティおよび添字の付いた要素を持つオブジェクト） -`Array.from()` にはオプションの引数 `mapFn` があります。これにより作成中の配列のすべての要素に対して {{jsxref("Array.prototype.map()", "map()")}} 関数を実行することができます。 +反復可能オブジェクトでも配列風でもない普通のオブジェクトを配列に変換するには（プロパティのキー、値、またはその両方を列挙して） {{jsxref("Object.keys()")}}、{{jsxref("Object.values()")}}、{{jsxref("Object.entries()")}} のいずれかを使用してください。[非同期反復可能オブジェクト](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#非同期イテレーターと非同期反復可能プロトコル)を配列に変換するには、{{jsxref("Array.fromAsync()")}}を使用します。 -より明確に言うと、中間配列を生成しないことを除いて、`Array.from(obj, mapFn, thisArg)` は `Array.from(obj).map(mapFn, thisArg)` と同じ結果です。 _mapFn_ は配列全体ではなく 2 つの引数 (_element_, _index_) のみを取るため、配列は構築途中になります。 +`Array.from()` は疎配列を作成しません。 `arrayLike` オブジェクトのインデックスプロパティが欠けている場合、新しい配列では `undefined` になります。 -> **メモ:** これは、[型付き配列](/ja/docs/Web/JavaScript/Typed_arrays)のような特定の配列のサブクラスでは特に重要です。なぜなら、中間配列の値は適切な型に収まるように切り捨てられている必要があるからです。 +`Array.from()` にはオプションで `mapFn` という引数があり、 {{jsxref("Array/map", "map()")}} と同様に、作成する配列のそれぞれの要素に対して関数を実行することができます。より明確には、`Array.from(obj, mapFn, thisArg)` は `Array.from(obj).map(mapFn, thisArg)` と同じ結果を保有します。ただし、`Array.from(obj).map(mapFn, thisArg)` は中間配列を作成せず、`mapFn` は配列全体を持たずに 2 つの引数 (`element`, `index`) を受け取るだけです。 -`from()` メソッドの `length` プロパティは 1 です。 +> **メモ:** この動作は[型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)にとってより重要です。なぜなら、中間の配列は適切な型を入力するために必然的に値が切り捨てられるからです。 `Array.from()` は {{jsxref("TypedArray.from()")}} と同じシグネチャを持つために実装します。 -ES2015 では、 [class](/ja/docs/Web/JavaScript/Reference/Classes) 構文により定義済みクラスとユーザー定義クラスの両方をサブクラス化することができます。結果として、`Array.from` のような静的メソッドは `Array` のサブクラスに「継承」され、`Array` ではなくサブクラスのインスタンスを生成します。 `Array.from()` メソッドも汎用的に定義されており、単一の数値の引数を受け入れる任意のコンストラクターに定義することができます。 +`Array.from()` メソッドは汎用ファクトリーメソッドです。例えば、 `Array` のサブクラスが `from()` メソッドを継承した場合、継承した `from()` メソッドは `Array` インスタンスではなく、サブクラスの新しいインスタンスを返します。実際には、新しい配列の長さを表す単一の引数を受け入れるコンストラクター関数を `this` 値として指定することができます。反復可能オブジェクトが `arrayLike` として渡された場合、コンストラクターは引数なしで呼び出されます。配列風のオブジェクトが渡された場合、コンストラクターは配列風オブジェクトの[正規化された長さ](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#length_プロパティの正規化)で呼び出されます。最終的な `length` は反復処理が完了したときに再び設定されます。もし `this` の値がコンストラクター関数でない場合、代わりにプレーンな `Array` コンストラクターが使用されます。 ## 例 @@ -122,7 +96,7 @@ Array.from(mapper.keys()); ```js // DOM 要素のプロパティに基づく配列を作成します。 -const images = document.getElementsByTagName("img"); +const images = document.querySelectorAll("img"); const sources = Array.from(images, (image) => image.src); const insecureSources = sources.filter((link) => link.startsWith("http://")); ``` @@ -165,7 +139,7 @@ const range = (start, stop, step) => range(0, 4, 1); // [0, 1, 2, 3, 4] -// 1..10 の範囲の数値を 2 ごとに生成 +// 1..10 の範囲の数値を 2 ごとに生成 range(1, 10, 2); // [1, 3, 5, 7, 9] @@ -176,6 +150,32 @@ range("A".charCodeAt(0), "Z".charCodeAt(0), 1).map((x) => // ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"] ``` +### 配列でないコンストラクターにおける from() の呼び出し + +`from()` メソッドは、新しい配列の長さを表す単一の引数を受け入れるコンストラクター関数で呼び出すことができます。 + +```js +function NotArray(len) { + console.log("NotArray called with length", len); +} + +// 反復可能 +console.log(Array.from.call(NotArray, new Set(["foo", "bar", "baz"]))); +// NotArray を length が undefined のままで呼び出し +// NotArray { '0': 'foo', '1': 'bar', '2': 'baz', length: 3 } + +// 配列風 +console.log(Array.from.call(NotArray, { length: 1, 0: "foo" })); +// NotArray called with length 1 +// NotArray { '0': 'foo', length: 1 } +``` + +`this` の値がコンストラクタでない場合は、プレーンな `Array` オブジェクトを返します。 + +```js +console.log(Array.from.call({}, { length: 1, 0: "foo" })); // [ 'foo' ] +``` + ## 仕様書 {{Specifications}} @@ -187,7 +187,10 @@ range("A".charCodeAt(0), "Z".charCodeAt(0), 1).map((x) => ## 関連情報 - [`Array.from` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド - {{jsxref("Array")}} +- {{jsxref("Array/Array", "Array()")}} - {{jsxref("Array.of()")}} +- {{jsxref("Array.fromAsync()")}} - {{jsxref("Array.prototype.map()")}} - {{jsxref("TypedArray.from()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/includes/index.md b/files/ja/web/javascript/reference/global_objects/array/includes/index.md index 2554fa7793a3f4..0f7b144d6d5374 100644 --- a/files/ja/web/javascript/reference/global_objects/array/includes/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/includes/index.md @@ -2,56 +2,55 @@ title: Array.prototype.includes() slug: Web/JavaScript/Reference/Global_Objects/Array/includes l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`includes()`** メソッドは、特定の要素が配列に含まれているかどうかを `true` または `false` で返します。 +**`includes()`** は {{jsxref("Array")}} インスタンスのメソッドで、特定の要素が配列に含まれているかどうかを `true` または `false` で返します。 {{EmbedInteractiveExample("pages/js/array-includes.html")}} ## 構文 -```js -includes(searchElement); -includes(searchElement, fromIndex); +```js-nolint +includes(searchElement) +includes(searchElement, fromIndex) ``` ### 引数 - `searchElement` - - : 検索する値です。 - - > **メモ:** 文字列や文字を比較する場合、`includes()` は*大文字と小文字を区別します*。 - - `fromIndex` {{optional_inline}} + - : 検索し始める位置のゼロから始まるインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 + - インデックスが負の場合、配列の末尾からさかのぼって数えます。 `fromIndex < 0` の場合、 `fromIndex + array.length` が使用されます。ただし、この場合でも配列は前から後ろに向けて検索されます。 + - `fromIndex < -array.length` または `fromIndex` が省略された場合は `0` が使用され、配列全体に対して検索が行われます。 + - `fromIndex >= array.length` の場合、配列の検索は行われず、 `false` が返されます。 - - : `searchElement` の検索を始める配列内の位置です。 - - 検索される最初の要素は、`fromIndex` が正の値の場合は `fromIndex` の位置に、`fromIndex` が負の値の場合は `arr.length + fromIndex` の位置になります（検索を開始する配列の端からの要素数として fromIndex の[絶対値](https://ja.wikipedia.org/wiki/絶対値)を使用します）。 +### 返値 - 既定値は `0` です。 +論理値で、`searchElement` の値が配列内（`fromIndex` が指定されていた場合は、配列のその位置以降の部分）にあった場合は `true` を返します。 -### 返値 +## 解説 -論理値で、`searchElement` の値が配列内 (`fromIndex` が指定されていた場合は、配列のその位置以降の部分) にあった場合は `true` を返します。 +`includes()` は `searchElement` を [SameValueZero](/ja/docs/Web/JavaScript/Equality_comparisons_and_sameness#同値ゼロ等価性) アルゴリズムを使用して比較します。ゼロの値は符号に関わらず、すべて等しい（すなわち、`-0` は `0` と等しい）とみなされますが、`false` は `0` と同じとはみなされ*ません*。 [`NaN`](/ja/docs/Web/JavaScript/Reference/Global_Objects/NaN) は正しく検索することができます。 -ゼロの値は符号に関わらず、すべて等しいとみなされます（すなわち、`-0` は `0` とも `+0` とも等しいとみなされます）が、`false` は `0` と同じとはみなされ*ません*。 [`NaN`](/ja/docs/Web/JavaScript/Reference/Global_Objects/NaN) は正しく検索することができます。 +[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)で使用する場合、 `includes()` メソッドは空のスロットを `undefined` という値があるかのように反復処理します。 -> **メモ:** 技術的に言えば、`includes()` は [SameValueZero](/ja/docs/Web/JavaScript/Equality_comparisons_and_sameness#同値ゼロ等価性) アルゴリズムを使用して、指定された要素が見つかったかどうかを確認しています。 +`includes()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 ## 例 +### includes() の使用 + ```js -[1, 2, 3] - .includes(2) // true - [(1, 2, 3)].includes(4) // false - [(1, 2, 3)].includes(3, 3) // false - [(1, 2, 3)].includes(3, -1) // true - [(1, 2, NaN)].includes(NaN) // true - [("1", "2", "3")].includes(3); // false +[1, 2, 3].includes(2); // true +[1, 2, 3].includes(4); // false +[1, 2, 3].includes(3, 3); // false +[1, 2, 3].includes(3, -1); // true +[1, 2, NaN].includes(NaN); // true +["1", "2", "3"].includes(3); // false ``` ### fromIndex が配列の長さと同じか大きい場合 @@ -82,17 +81,30 @@ arr.includes("c", -100); // true arr.includes("a", -2); // false ``` -### 一般化メソッドとして使用される includes() +### 疎配列に対する includes() の使用 -`includes()` メソッドは意図的に一般化されています。`this` が Array オブジェクトであることは必須ではないので、他の種類のオブジェクト（例えば配列風オブジェクト）にも適用することができます。 +疎配列で `undefined` を検索して `true` を取得することができます。 -以下の例は、`includes()` メソッドが関数の [arguments](/ja/docs/Web/JavaScript/Reference/Functions/arguments) オブジェクトに対して使用される様子を示しています。 +```js +console.log([1, , 3].includes(undefined)); // true +``` + +### 配列でないオブジェクトに対する includes() の呼び出し + +`includes()` メソッドは `this` の `length` プロパティを読み込み、次にキーが `length` より小さい非負の整数であるそれぞれのプロパティにアクセスします。 ```js -(function () { - console.log(Array.prototype.includes.call(arguments, "a")); // true - console.log(Array.prototype.includes.call(arguments, "d")); // false -})("a", "b", "c"); +const arrayLike = { + length: 3, + 0: 2, + 1: 3, + 2: 4, + 3: 1, // length が 3 なので includes() からは無視される +}; +console.log(Array.prototype.includes.call(arrayLike, 2)); +// true +console.log(Array.prototype.includes.call(arrayLike, 1)); +// false ``` ## 仕様書 @@ -106,8 +118,10 @@ arr.includes("a", -2); // false ## 関連情報 - [`Array.prototype.includes` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) -- {{jsxref("TypedArray.prototype.includes()")}} -- {{jsxref("String.prototype.includes()")}} +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.indexOf()")}} - {{jsxref("Array.prototype.find()")}} - {{jsxref("Array.prototype.findIndex()")}} +- {{jsxref("TypedArray.prototype.includes()")}} +- {{jsxref("String.prototype.includes()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/indexof/index.md b/files/ja/web/javascript/reference/global_objects/array/indexof/index.md index 1b51ebe57bd829..600e3ee1d05a35 100644 --- a/files/ja/web/javascript/reference/global_objects/array/indexof/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/indexof/index.md @@ -2,20 +2,20 @@ title: Array.prototype.indexOf() slug: Web/JavaScript/Reference/Global_Objects/Array/indexOf l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f --- {{JSRef}} -**`indexOf()`** メソッドは引数に与えられた内容と同じ内容を持つ最初の配列要素の添字を返します。存在しない場合は -1 を返します。 +**`indexOf()`** は {{jsxref("Array")}} インスタンスのメソッドで、引数に与えられた内容と同じ内容を持つ最初の配列要素の添字を返します。存在しない場合は -1 を返します。 {{EmbedInteractiveExample("pages/js/array-indexof.html")}} ## 構文 -```js -indexOf(searchElement); -indexOf(searchElement, fromIndex); +```js-nolint +indexOf(searchElement) +indexOf(searchElement, fromIndex) ``` ### 引数 @@ -23,17 +23,22 @@ indexOf(searchElement, fromIndex); - `searchElement` - : 検索する配列要素です。 - `fromIndex` {{optional_inline}} - - : 検索を始める位置です。もしこの位置が配列の長さ以上の場合は、-1 が返され、配列は検索されません。負の数の場合、これは配列の末尾からのオフセットとみなされます。なお、この位置が負の数であっても、配列は前から後ろに検索されることに注意してください。指定された位置が 0 であれば、配列全体が検索されます。既定値は 0 （配列全体を検索）です。 + - : 検索し始める位置のゼロから始まるインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 + - インデックスが負の場合、配列の末尾からさかのぼって数えます。 `fromIndex < 0` の場合、 `fromIndex + array.length` が使用されます。ただし、この場合でも配列は前から後ろに向けて検索されます。 + - `fromIndex < -array.length` または `fromIndex` が省略された場合は `0` が使用され、配列全体に対して検索が行われます。 + - `fromIndex >= array.length` の場合、配列の検索は行われず、 `false` が返されます。 ### 返値 -見つかった最初の配列要素の添字です。見つからなかった場合は **-1** です。 +配列内にある最初の `searchElement` のインデックスです。見つからなかった場合は `-1`` です。 ## 解説 -`indexOf()` は `searchElement` と配列の要素を [厳密等価](/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality) （三重イコール演算子 `===` で使われるのと同じ方法）を使って比較します。 +`indexOf()` メソッドは `searchElement` と配列の要素を[厳密等価](/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality)（三重イコール演算子 `===` で使われるのと同じ方法）を使って比較します。 [`NaN`](/ja/docs/Web/JavaScript/Reference/Global_Objects/NaN) の値は等しい値として比較されることはないので、`indexOf()` は `searchElement` が `NaN` のときには常に `-1` を返します。 + +`indexOf()` メソッドは[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)の空スロットをスキップします。 -> **メモ:** String のメソッドについては、{{jsxref("String.prototype.indexOf()")}} を参照してください。 +`indexOf()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 ## 例 @@ -50,6 +55,13 @@ array.indexOf(2, -1); // -1 array.indexOf(2, -3); // 0 ``` +`indexOf()` を使って `NaN` を検索することはできません。 + +```js +const array = [NaN]; +array.indexOf(NaN); // -1 +``` + ### ある要素の存在をすべて見つける ```js @@ -85,6 +97,32 @@ updateVegetablesCollection(veggies, "spinach"); // spinach already exists in the veggies collection. ``` +### 疎配列での indexOf() の使用 + +疎配列の空のスロットを検索するために `indexOf()` を使用することはできません。 + +```js +console.log([1, , 3].indexOf(undefined)); // -1 +``` + +### 配列ではないオブジェクトに対する indexOf() の呼び出し + +`indexOf()` メソッドは `this` の `length` プロパティを読み込み、次にキーが `length` より小さい非負の整数である各プロパティにアクセスします。 + +```js +const arrayLike = { + length: 3, + 0: 2, + 1: 3, + 2: 4, + 3: 5, // length が 3 であるため indexOf() から無視される +}; +console.log(Array.prototype.indexOf.call(arrayLike, 2)); +// 0 +console.log(Array.prototype.indexOf.call(arrayLike, 5)); +// -1 +``` + ## 仕様書 {{Specifications}} @@ -96,6 +134,10 @@ updateVegetablesCollection(veggies, "spinach"); ## 関連情報 - [`Array.prototype.indexOf` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} +- {{jsxref("Array.prototype.findIndex()")}} +- {{jsxref("Array.prototype.findLastIndex()")}} - {{jsxref("Array.prototype.lastIndexOf()")}} - {{jsxref("TypedArray.prototype.indexOf()")}} - {{jsxref("String.prototype.indexOf()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/isarray/index.md b/files/ja/web/javascript/reference/global_objects/array/isarray/index.md index 9f19b36a47ccb0..f3991e51353a9c 100644 --- a/files/ja/web/javascript/reference/global_objects/array/isarray/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/isarray/index.md @@ -2,24 +2,19 @@ title: Array.isArray() slug: Web/JavaScript/Reference/Global_Objects/Array/isArray l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`Array.isArray()`** メソッドは、渡された値が {{jsxref("Array")}} かどうかを判断します。 +**`Array.isArray()`** 静的メソッドは、渡された値が {{jsxref("Array")}} かどうかを判断します。 -```js -Array.isArray([1, 2, 3]); // true -Array.isArray({ foo: 123 }); // false -Array.isArray("foobar"); // false -Array.isArray(undefined); // false -``` +{{EmbedInteractiveExample("pages/js/array-isarray.html")}} ## 構文 -```js -Array.isArray(value); +```js-nolint +Array.isArray(value) ``` ### 引数 @@ -29,18 +24,19 @@ Array.isArray(value); ### 返値 -この値が {{jsxref("Array")}} の場合は `true` です。そうでなければ `false` を返します。 +`value` が {{jsxref("Array")}} の場合は `true` です。そうでなければ `false` を返します。 `value` が {{jsxref("TypedArray")}} インスタンスであった場合は常に `false` を返します。 ## 解説 -値が {{jsxref("Array")}} の場合は `true` が返ります。それ以外の場合は `false` が返ります。 +`Array.isArray()` は、渡された値が {{jsxref("Array")}} であるかどうかを調べます。値のプロトタイプチェーンを調べたり、 `Array` コンストラクターに頼っているわけではありません。配列リテラル構文または `Array` コンストラクターを使用して作成した値に対しては `true` を返します。このため、 `Array` コンストラクターの ID が異なり、[`instanceof Array`](/ja/docs/Web/JavaScript/Reference/Operators/instanceof) が失敗してしまうような領域を超えるオブジェクトでも安全に使用することができます。 詳しくは、 ["Determining with absolute accuracy whether or not a JavaScript object is an array"](https://web.mit.edu/jwalden/www/isArray.html) を参照してください。 -{{jsxref("TypedArray")}} のインスタンスが与えられると、常に `false` が返されます。 + +また、 `Array.isArray()` は `Array.prototype` をプロトタイプチェーンに持つオブジェクトも拒否しますが、 `instanceof Array` が受け入れる実際の配列ではありません。 ## 例 -### Array.isArray の使用 +### Array.isArray() の使用 ```js // 以下の呼び出しはすべて true を返します @@ -62,22 +58,25 @@ Array.isArray("Array"); Array.isArray(true); Array.isArray(false); Array.isArray(new Uint8Array(32)); +// これは配列ではありません。配列リテラルを使用した構文でも、 +// Array コンストラクターでもないからです。 Array.isArray({ __proto__: Array.prototype }); ``` -### `instanceof` と `isArray` +### instanceof と Array.isArray() -`Array` のインスタンスをチェックする際、`Array.isArray` は `iframes` で動作するので、`instanceof` よりも推奨されます。 +`Array` のインスタンスをチェックする際、 `Array.isArray` は領域を超えても動作するので、 `instanceof` よりも推奨されます。 ```js const iframe = document.createElement("iframe"); document.body.appendChild(iframe); -xArray = window.frames[window.frames.length - 1].Array; -const arr = new xArray(1, 2, 3); // [1,2,3] +const xArray = window.frames[window.frames.length - 1].Array; +const arr = new xArray(1, 2, 3); // [1, 2, 3] // 配列を正しくチェックできます Array.isArray(arr); // true -// iframe を介して配列を正しくチェックできません +// arr のプロトタイプは xArray.prototype であり、 +// Array.prototype とは異なるオブジェクトです。 arr instanceof Array; // false ``` @@ -92,5 +91,5 @@ arr instanceof Array; // false ## 関連情報 - [`Array.isArray` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) -- [ポリフィル](https://github.com/behnammodi/polyfill/blob/master/array.polyfill.js) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド - {{jsxref("Array")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/join/index.md b/files/ja/web/javascript/reference/global_objects/array/join/index.md index 1db055abdb7eac..11dfed9a95bac0 100644 --- a/files/ja/web/javascript/reference/global_objects/array/join/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/join/index.md @@ -2,39 +2,62 @@ title: Array.prototype.join() slug: Web/JavaScript/Reference/Global_Objects/Array/join l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f --- {{JSRef}} -**`join()`** メソッドは、配列（または[配列風オブジェクト](/ja/docs/Web/JavaScript/Guide/Indexed_collections#配列風オブジェクトの扱い)）の全要素を順に連結した文字列を新たに作成して返します。区切り文字はカンマ、または指定された文字列です。配列にアイテムが一つしかない場合は、区切り文字を使用せずにアイテムが返されます。 +**`join()`** は {{jsxref("Array")}} インスタンスのメソッドで、配列の全要素を順に連結した新しい文字列を返します。区切り文字はカンマ、または指定された文字列です。配列にアイテムが一つしかない場合は、区切り文字を使用せずにアイテムが返されます。 {{EmbedInteractiveExample("pages/js/array-join.html")}} ## 構文 -```js -join(); -join(separator); +```js-nolint +join() +join(separator) ``` ### 引数 - `separator` {{optional_inline}} - - : 配列の各要素を区切る文字列を指定します。 separator は、必要であれば文字列に変換されます。省略した場合、配列の要素はカンマ (",") で区切られます。 `separator` に空文字列を渡した場合、すべての要素の間が区切り文字無しで繋がれます。 + - : 配列の各要素を区切る文字列です。省略した場合、配列の要素はカンマ (",") で区切られます。 ### 返値 -配列の全要素が連結された文字列です。 `arr.length` が `0` だった場合、空の文字列が返されます。 +配列の全要素が連結された文字列です。 `array.length` が `0` であった場合、空の文字列が返されます。 ## 解説 -配列のすべての要素を文字列に変換したものが、1 個の文字列に繋がれます。 - -> **警告:** 要素が `undefined` または `null` または空配列 `[]` であった場合は、空の文字列に変換されます。 +配列のすべての要素を文字列に変換したものが、1 個の文字列に繋がれます。要素が `undefined` または `null` であった場合、 `"null"` や `"undefined"` ではなく空文字列に変換されます。 `join` メソッドは、内部的には [`Array.prototype.toString()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/toString) によって引数なしでアクセスすることができます。配列インスタンスの `join` をオーバーライドすると、その `toString` の動作もオーバーライドされます。 +`Array.prototype.join` は他の配列も含めて、再帰的にそれぞれの要素を文字列に変換します。 `Array.prototype.toString` が返す文字列（これは `join()` を呼び出すのと同じです）には区切り文字がないので、入れ子配列は平坦化されたように見えます。区切り文字を制御できるのは最初のレベルだけで、それ以上のレベルでは常に既定のカンマを使用します。 + +```js +const matrix = [ + [1, 2, 3], + [4, 5, 6], + [7, 8, 9], +]; + +console.log(matrix.join()); // 1,2,3,4,5,6,7,8,9 +console.log(matrix.join(";")); // 1,2,3;4,5,6;7,8,9 +``` + +配列が循環している（コンテナーそのものである要素を格納している）場合、ブラウザーは循環参照を無視することで無限再帰を避けます。 + +```js +const arr = []; +arr.push(1, [3, arr, 4], 2); +console.log(arr.join(";")); // 1;3,,4;2 +``` + +[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)で使用した場合、 `join()` メソッドは空のスロットを `undefined` という値があるかのように反復処理します。 + +`join()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 + ## 例 ### 3 通りの異なる形で配列をつなぐ @@ -49,17 +72,31 @@ a.join(" + "); // '風 + 水 + 火' a.join(""); // '風水火' ``` -### 配列風オブジェクトを連結する +### 疎配列に対する join() の使用 -次の例は、配列風オブジェクト （ [`arguments`](/ja/docs/Web/JavaScript/Reference/Functions/arguments) ）を連結するために、 `Array.prototype.join` を {{jsxref("Function.prototype.call")}} を使用して呼び出します。 +`join()` は空のスロットを `undefined` と同じように扱い、余分な区切り文字を生成します。 ```js -function f(a, b, c) { - const s = Array.prototype.join.call(arguments); - console.log(s); // '1,a,true' -} -f(1, "a", true); -//expected output: "1,a,true" +console.log([1, , 3].join()); // '1,,3' +console.log([1, undefined, 3].join()); // '1,,3' +``` + +### 配列以外のオブジェクトに対する join() の呼び出し + +`join()` メソッドは `this` の `length` プロパティを読み込み、次にキーが `length` より小さい非負の整数である各プロパティにアクセスします。 + +```js +const arrayLike = { + length: 3, + 0: 2, + 1: 3, + 2: 4, + 3: 5, // ignored by join() since length is 3 +}; +console.log(Array.prototype.join.call(arrayLike)); +// 2,3,4 +console.log(Array.prototype.join.call(arrayLike, ".")); +// 2.3.4 ``` ## 仕様書 @@ -72,6 +109,9 @@ f(1, "a", true); ## 関連情報 -- {{jsxref("String.prototype.split()")}} +- [`Array.prototype.join` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.toString()")}} - {{jsxref("TypedArray.prototype.join()")}} +- {{jsxref("String.prototype.split()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/keys/index.md b/files/ja/web/javascript/reference/global_objects/array/keys/index.md index 2bb10c22c7495e..240bc760bee8ec 100644 --- a/files/ja/web/javascript/reference/global_objects/array/keys/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/keys/index.md @@ -2,28 +2,40 @@ title: Array.prototype.keys() slug: Web/JavaScript/Reference/Global_Objects/Array/keys l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`keys()`** メソッドは、配列内の各インデックスのキーを含む、新しい**配列イテレーター**オブジェクトを返します。 +**`keys()`** は {{jsxref("Array")}} インスタンスのメソッドで、配列内の各インデックスのキーを含む、新しい[配列イテレーター](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)オブジェクトを返します。 {{EmbedInteractiveExample("pages/js/array-keys.html")}} ## 構文 -```js -keys(); +```js-nolint +keys() ``` +### 引数 + +なし。 + ### 返値 -新しい {{jsxref("Array")}} のイテレーターオブジェクトです。 +新しい[反復可能なイテレーターオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)です。 + +## 解説 + +[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)で使用した場合、 `keys()` メソッドは空のスロットを `undefined` という値があるかのように反復処理します。 + +`keys()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 ## 例 -### 不連続を無視しないキーイテレーター +### 疎配列に対する keys() の呼び出し + +配列に実際に存在するキーだけを処理する {{jsxref("Object.keys()")}} とは異なり、 `keys()` イテレーターは見つからないプロパティを表す穴を無視しません。 ```js const arr = ["a", , "c"]; @@ -33,6 +45,22 @@ console.log(sparseKeys); // ['0', '2'] console.log(denseKeys); // [0, 1, 2] ``` +### 配列以外のオブジェクトに対する keys() の呼び出し + +`keys()`メソッドは `this` の `length` プロパティを読み込み、 0 から `length - 1` までのすべての整数インデックスを返します。実際にはインデックスアクセスは行われません。 + +```js +const arrayLike = { + length: 3, +}; +for (const entry of Array.prototype.keys.call(arrayLike)) { + console.log(entry); +} +// 0 +// 1 +// 2 +``` + ## 仕様書 {{Specifications}} @@ -44,6 +72,10 @@ console.log(denseKeys); // [0, 1, 2] ## 関連情報 - [`Array.prototype.keys` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) -- {{jsxref("Array.prototype.values()")}} +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.entries()")}} -- [反復処理プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols) +- {{jsxref("Array.prototype.values()")}} +- [`Array.prototype[@@iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator) +- {{jsxref("TypedArray.prototype.keys()")}} +- [Iteration protocols](/ja/docs/Web/JavaScript/Reference/Iteration_protocols) diff --git a/files/ja/web/javascript/reference/global_objects/array/lastindexof/index.md b/files/ja/web/javascript/reference/global_objects/array/lastindexof/index.md index 86c717baa6d049..be096cc36cf551 100644 --- a/files/ja/web/javascript/reference/global_objects/array/lastindexof/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/lastindexof/index.md @@ -2,19 +2,20 @@ title: Array.prototype.lastIndexOf() slug: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf l10n: - sourceCommit: 9b38f886d21c5d0a428f58acb20c4d0fc6c2e098 + sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a --- {{JSRef}} -**`lastIndexOf()`** メソッドは、配列中で与えられた要素が見つかった最後の添字を返します。もし存在しなければ -1 を返します。配列は `fromIndex` から逆向きに検索されます。 +**`lastIndexOf()`** は {{jsxref("Array")}} インスタンスのメソッドで、配列中で与えられた要素が見つかった最後の添字を返します。もし存在しなければ -1 を返します。配列は `fromIndex` から逆向きに検索されます。 {{EmbedInteractiveExample("pages/js/array-lastindexof.html")}} ## 構文 -``` -arr.lastIndexOf(searchElement[, fromIndex]) +```js-nolint +lastIndexOf(searchElement) +lastIndexOf(searchElement, fromIndex) ``` ### 引数 @@ -22,28 +23,28 @@ arr.lastIndexOf(searchElement[, fromIndex]) - `searchElement` - : 検索する配列要素です。 - `fromIndex` {{optional_inline}} - - - : 逆向きに検索し始める添字です。既定値は配列の長さ に 1 を引いた値 (`arr.length - 1`) で、つまり配列全体が検索されます。 - - `fromIndex` の値が配列の長さ以上であれば、配列全体を検索します。（この場合、概念的には、配列の末尾から先の存在しない位置からメソッドの検索を開始させ、そこから配列の実際の末尾の位置を探して、実在する配列の要素を逆方向に検索し始めると考えることができます。） - - `fromIndex` の値が 0 より大きい場合は、配列の先頭からのオフセットとして受け取られます。 - -`fromIndex` に 0 よりも小さい値を指定すると、配列の末尾からのオフセットとして受け取られます。言い換えると、 `array.length + fromIndex` の位置を指定したものとみなされます。したがって、 `array.length + fromIndex` が 0 よりも小さい場合、配列の探索は行われず、メソッドは -1 を返します（この場合、 `fromIndex` は配列の先頭の存在しない位置を指定しているので、概念的には、メソッドがその存在しない位置から探索して、そこから配列要素を探すと考えることができますが、決して見つかることはありません）。 + - : 検索し始める位置のゼロから始まるインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 + - インデックスが負の場合、配列の末尾からさかのぼって数えます。 `fromIndex < 0` の場合、 `fromIndex + array.length` が使用されます。 + - `fromIndex < -array.length` の場合、配列は検索が行われず、 `-1` が返されます。概念的には、配列の先頭より前の存在しない位置から始めて、そこから逆方向に進むと考えることができます。途中には配列要素はないので、 `searchElement` は決して見つかりません。 + - `fromIndex >= array.length` または `fromIndex` が省略された場合、 `array.length - 1` が使用され、配列全体が検索されます。概念的には、配列の末尾の先にある存在しない位置から始めて、そこから後方に進むと考えることができます。最終的に配列の本当の末尾に到達し、この点から実在する配列要素を逆探索し始めます。 ### 返値 -配列内の一致した要素の最後の位置です。見つからなかった場合は **-1** です。 +配列内の最後の `searchElement` のインデックスです。見つからなかった場合は `-1` です。 ## 解説 -`lastIndexOf` は `searchElement` と配列の要素を[厳密等価](/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality)（三重イコール演算子 `===` で使われるのと同じ方法）によって比較します。 +`lastIndexOf()` メソッドは `searchElement` と配列の要素を[厳密な等価性](/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality)（`===` 演算子を使用するアルゴリズムと同じ）を使用して比較します。 [`NaN`](/ja/docs/Web/JavaScript/Reference/Global_Objects/NaN) 値が等しいものとして比較されることはないので、 `searchElement` が `NaN` の場合、`lastIndexOf()` は常に `-1` を返します。 + +`lastIndexOf()` メソッドは[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)の空スロットをスキップします。 + +`lastIndexOf()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 ## 例 -### `lastIndexOf` の使用 +### lastIndexOf() の使用 -`lastIndexOf` を使って配列中のある値の位置を探す例を以下に示します。 +`lastIndexOf()` を使って配列中のある値の位置を探す例を以下に示します。 ```js const numbers = [2, 5, 9, 2]; @@ -55,9 +56,16 @@ numbers.lastIndexOf(2, -2); // 0 numbers.lastIndexOf(2, -1); // 3 ``` +`lastIndexOf()` を使用して `NaN` を検索することはできません。 + +```js +const array = [NaN]; +array.lastIndexOf(NaN); // -1 +``` + ### ある要素の存在をすべて見つける -以下の例は `lastIndexOf` を使って、与えられた配列中のある値の添字すべてを探しています。{{jsxref("Array.prototype.push", "push")}} を使って、値が見つかる度に別の配列にその添字を追加しています。 +以下の例は `lastIndexOf` を使って、与えられた配列中のある値の添字すべてを探しています。{{jsxref("Array/push", "push")}} を使って、値が見つかる度に別の配列にその添字を追加しています。 ```js const indices = []; @@ -73,7 +81,35 @@ console.log(indices); // [4, 2, 0] ``` -ここで `idx == 0` の場合を分けて扱わないといけないことに注意してください。なぜなら、もし検索する値が配列の最初の要素にあると、その値は `fromIndex` パラメータにかかわらずいつもヒットしてしまうのです。これは {{jsxref("Array.prototype.indexOf", "indexOf")}} メソッドとは異なります。 +ここで `idx == 0` の場合を分けて扱わないといけないことに注意してください。 +なぜなら、もし検索する値が配列の最初の要素にあると、その値は `fromIndex` パラメータにかかわらずいつもヒットしてしまうのです。 +これは {{jsxref("Array/indexOf", "indexOf()")}} メソッドとは異なります。 + +### 疎配列に対する lastIndexOf() の使用 + +疎配列の空のスロットを検索するために `lastIndexOf()` を使用することはできません。 + +```js +console.log([1, , 3].lastIndexOf(undefined)); // -1 +``` + +### 配列以外のオブジェクトに対する lastIndexOf() の呼び出し + +`lastIndexOf()` メソッドは `this` の `length` プロパティを読み込み、次にキーが `length` より小さい非負の整数である各プロパティにアクセスします。 + +```js +const arrayLike = { + length: 3, + 0: 2, + 1: 3, + 2: 2, + 3: 5, // length が 3 なので lastIndexOf() からは無視される +}; +console.log(Array.prototype.lastIndexOf.call(arrayLike, 2)); +// 2 +console.log(Array.prototype.lastIndexOf.call(arrayLike, 5)); +// -1 +``` ## 仕様書 @@ -86,5 +122,10 @@ console.log(indices); ## 関連情報 - [`Array.prototype.lastIndexOf` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} +- {{jsxref("Array.prototype.findIndex()")}} +- {{jsxref("Array.prototype.findLastIndex()")}} - {{jsxref("Array.prototype.indexOf()")}} - {{jsxref("TypedArray.prototype.lastIndexOf()")}} +- {{jsxref("String.prototype.lastIndexOf()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/map/index.md b/files/ja/web/javascript/reference/global_objects/array/map/index.md index 9ac367b1a0c0b5..11cd3f3cd058ce 100644 --- a/files/ja/web/javascript/reference/global_objects/array/map/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/map/index.md @@ -2,51 +2,34 @@ title: Array.prototype.map() slug: Web/JavaScript/Reference/Global_Objects/Array/map l10n: - sourceCommit: f1b0423793182c7025b15815bb2a70defea39c2b + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`map()`** メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる**新しい配列を生成します**。 +**`map()`** は {{jsxref("Array")}} インスタンスのメソッドで、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。 {{EmbedInteractiveExample("pages/js/array-map.html")}} ## 構文 ```js-nolint -// アロー関数 -map((element) => { /* … */ }) -map((element, index) => { /* … */ }) -map((element, index, array) => { /* … */ }) - -// コールバック関数 map(callbackFn) map(callbackFn, thisArg) - -// インラインコールバック関数 -map(function(element) { /* … */ }) -map(function(element, index) { /* … */ }) -map(function(element, index, array){ /* … */ }) -map(function(element, index, array) { /* … */ }, thisArg) ``` ### 引数 - `callbackFn` - - - : `arr` の要素ごとに呼び出される関数です。 `callbackFn` が実行されるたびに、返された値が `newArray` に追加されます。 - - この関数は以下の引数と共に呼び出されます。 - + - : 配列のそれぞれの要素に対して実行する関数。その返値は、新しい配列の単一の要素として追加されます。この関数は、以下の引数で呼び出されます。 - `element` - : 配列内で現在処理中の要素です。 - `index` - : 現在処理中の要素の配列内における添字です。 - `array` - - : `map` が呼び出された配列です。 - + - : `map()` が呼び出された配列です。 - `thisArg` {{optional_inline}} - - : `callbackFn` を実行するときに `this` として使う値です。 + - : `callbackFn` を実行するときに `this` として使う値です。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。 ### 返値 @@ -54,37 +37,21 @@ map(function(element, index, array) { /* … */ }, thisArg) ## 解説 -`map` は、与えられた `callbackFn` 関数を配列の順番通りに、**各要素に対して一度ずつ呼び出し**、その結果から新しい配列を生成します。 `callbackFn` は、値が代入されている配列の要素に対してのみ呼び出されます ({{jsxref("undefined")}} が代入されているものも含みます)。 - -これは配列の中で存在しない要素、すなわち以下の要素に対しては呼び出し*ません*。 - -- 設定されたことがない添字 -- 削除された要素 -- 値を割り当てられたことがない要素 - -### map() を使用すべきではない場合 - -`map` は新しい配列を作成するので、返された配列を使わない場合、map を使うのはパターンに合いません。代わりに {{jsxref("Array/forEach", "forEach")}} または {{jsxref("Statements/for...of", "for...of")}} を使用してください。 - -`map` を使用するべきでないのは以下の場合です。 - -- 返された配列を使用しない場合 -- コールバックから値を返さない場合 +`map()` メソッドは[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)です。指定された関数 `callbackFn` を配列に含まれる各要素に対して一度ずつ呼び出し、その結果から新しい配列を構築します。 -### 引数の詳細 +`callbackFn` は値が割り当てられている配列インデックスに対してのみ呼び出されます。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)で空のスロットに対しては呼び出されません。 -`callbackFn` は、要素の値、要素の添字、走査されている Array オブジェクトという 3 つの引数をともなって呼び出されます。 +`map()` メソッドは[コピーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#コピーメソッドと変更メソッド)です。これは `this` を変更しません。しかし、 `callbackFn` に指定された関数は変更することがあります。ただし、配列の長さは `callbackFn` を最初に呼び出す前に保存されることに注意してください。したがって、 -`thisArg` 引数が与えられた場合は、それがコールバックの `this` として使用されます。引数が省略された場合は、 {{jsxref("undefined")}} が `this` の値として使用されます。 `callbackFn` によって最終的に識別できる `this` の値は、[関数における通常の `this` を決定するルール](/ja/docs/Web/JavaScript/Reference/Operators/this)に従って決まります。 - -`map` は呼び出された配列を変化させません (ただし、呼び出された `callbackFn` が配列を変更する可能性はあります)。 - -`map` によって処理される要素の範囲は、最初に `callbackFn` が呼び出される前に設定されます。既に訪問した位置に割り当てられている要素や、範囲外の位置に割り当てられている要素に対しては、`callbackFn` が呼び出されることはありません。 -既存の配列要素が変更されたり、削除された場合、 `callbackFn` に渡される値は `map` がそれらを訪れた時点での値になり、 `map` が削除された要素を訪問することはありません。 +- `callbackFn` は `map()` の呼び出しを始めたときの配列の長さを超えて追加された要素にはアクセスしません。 +- 既に処理したインデックスを変更しても、 `callbackFn` が再度呼び出されることはありません。 +- まだ処理していない既存の配列要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値はその要素が取得される時点の値になります。[削除](/ja/docs/Web/JavaScript/Reference/Operators/delete)された要素は処理されません。 > **警告:** 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。 -仕様書で定義されているアルゴリズムによって、 `map` が呼び出された配列がまばらである場合、結果の配列もまばらとなり、要素を空欄のままにします。 +`map()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 + +`map` は新しい配列を作成するので、返された配列を使わない場合、map を使うのはパターンに合いません。代わりに {{jsxref("Array/forEach", "forEach")}} または {{jsxref("Statements/for...of", "for...of")}} を使用してください。 ## 例 @@ -113,12 +80,13 @@ const kvArray = [ const reformattedArray = kvArray.map(({ key, value }) => ({ [key]: value })); -// フォーマットされた配列の内容は [{1: 10}, {2: 20}, {3: 30}]となる - -// kvArray は以下のまま -// [{key: 1, value: 10}, -// {key: 2, value: 20}, -// {key: 3, value: 30}] +console.log(reformattedArray); // [{ 1: 10 }, { 2: 20 }, { 3: 30 }] +console.log(kvArray); +// [ +// { key: 1, value: 10 }, +// { key: 2, value: 20 }, +// { key: 3, value: 30 } +// ] ``` ### 引数を含む関数を使用して数値配列を対応付ける @@ -129,22 +97,80 @@ const reformattedArray = kvArray.map(({ key, value }) => ({ [key]: value })); const numbers = [1, 4, 9]; const doubles = numbers.map((num) => num * 2); -// doubles is now [2, 8, 18] -// numbers is still [1, 4, 9] +console.log(doubles); // [2, 8, 18] +console.log(numbers); // [1, 4, 9] +``` + +### 副作用のある対応付け + +コールバックには副作用があります。 + +```js +const cart = [5, 15, 25]; +let total = 0; +const withTax = cart.map((cost) => { + total += cost; + return cost * 1.2; +}); +console.log(withTax); // [6, 18, 30] +console.log(total); // 45 +``` + +なぜなら、コピーメソッドは純粋関数とともに使用するのが最適だからです。この場合、配列を 2 回反復処理することを選べます。 + +```js +const cart = [5, 15, 25]; +const total = cart.reduce((acc, cost) => acc + cost, 0); +const withTax = cart.map((cost) => cost * 1.2); ``` -### 汎用的な map の使用 +このパターンが極端になり、 `map()` が行う有益なことが副作用を発生させることだけになってしまうことがあります。 -次の例は、 {{jsxref("String")}} に対して map を使用することで、文字列内の文字を UTF-16 コードユニットので表す数値の配列を取得します。 +```js +const products = [ + { name: "sports car" }, + { name: "laptop" }, + { name: "phone" }, +]; + +products.map((product) => { + product.price = 100; +}); +``` + +前回述べたように、これはパターンに反します。 `map()` の返値を使用しない場合は、代わりに `forEach()` または `for...of` ループを使用してください。 ```js -const map = Array.prototype.map; -const charCodes = map.call("Hello World", (x) => x.charCodeAt(0)); +products.forEach((product) => { + product.price = 100; +}); +``` + +あるいは、代わりに新しい配列を作成することもできます。 -// a の内容は [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100] となる +```js +const productsWithPrice = products.map((product) => { + return { ...product, price: 100 }; +}); +``` + +### 配列以外のオブジェクトに対する map() の呼び出し + +`map()` メソッドは `this` の `length` プロパティを読み込み、次にキーが `length` より小さい非負の整数である各プロパティにアクセスします。 + +```js +const arrayLike = { + length: 3, + 0: 2, + 1: 3, + 2: 4, + 3: 5, // length が 3 なので map() 空は無視される +}; +console.log(Array.prototype.map.call(arrayLike, (x) => x ** 2)); +// [ 4, 9, 16 ] ``` -### 汎用的な map の使用: querySelectorAll +### map() を汎用的に NodeList で使用 この例では、 `querySelectorAll` によって収集されたオブジェクトのコレクションを反復処理する方法を示します。これは `querySelectorAll` が `NodeList` （オブジェクトの集合）を返すためです。 @@ -157,11 +183,28 @@ const values = Array.prototype.map.call(elems, ({ value }) => value); もっと簡単な方法は {{jsxref("Array.from()")}} メソッドを使用することです。 -### トリッキーな使用例 +### 疎配列に対する map() の使用 + +疎配列は `map()` の後も疎配列のままです。空のスロットのインデックスは返された配列においても空のままであり、コールバック関数が呼び出されることはありません。 + +```js +console.log( + [1, , 3].map((x, index) => { + console.log(`Visit ${index}`); + return x * 2; + }), +); +// Visit 0 +// Visit 2 +// [2, empty, 6] +``` + +### parseInt() を map() で使用 ([このブログの記事に創発されました](https://wirfs-brock.com/allen/posts/166)) -コールバック関数は第一引数（変換するべき要素）だけを意識して指定するケースがほとんどだと思います。しかし一般的に第一引数しか使わないような関数でも、実は追加のオプション引数を受け取っている場合があります。これは混乱につながる可能性があります。 +コールバック関数は第一引数（変換するべき要素）だけを意識して指定するケースがほとんどだと思います。 +しかし一般的に第一引数しか使わないような関数でも、実は追加のオプション引数を受け取っている場合があります。これは混乱につながる可能性があります。 まずこの例をご覧ください。 @@ -183,9 +226,9 @@ const values = Array.prototype.map.call(elems, ({ value }) => value); ```js // parseInt(string, radix) -> map(parseInt(value, index)) -/* first iteration (index is 0): */ parseInt("1", 0); // 1 -/* second iteration (index is 1): */ parseInt("2", 1); // NaN -/* third iteration (index is 2): */ parseInt("3", 2); // NaN +/* first iteration (index is 0): */ parseInt("1", 0); // 1 +/* second iteration (index is 1): */ parseInt("2", 1); // NaN +/* third iteration (index is 2): */ parseInt("3", 2); // NaN ``` 解決策を考えてみましょう。 @@ -230,6 +273,7 @@ const filteredNumbers = numbers.map((num, index) => { return num; } }); + // index は 0 から始まるので、 filterNumbers は 1,2,3 および undefined になります。 // filteredNumbers は [1, 2, undefined, undefined] // numbers は [1, 2, 3, 4] のまま @@ -246,6 +290,9 @@ const filteredNumbers = numbers.map((num, index) => { ## 関連情報 - [`Array.prototype.map` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.forEach()")}} -- {{jsxref("Map")}} object - {{jsxref("Array.from()")}} +- {{jsxref("TypedArray.prototype.map()")}} +- {{jsxref("Map")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/of/index.md b/files/ja/web/javascript/reference/global_objects/array/of/index.md index e2ec1a16c38641..ca32caf1644953 100644 --- a/files/ja/web/javascript/reference/global_objects/array/of/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/of/index.md @@ -7,38 +7,45 @@ l10n: {{JSRef}} -**`Array.of()`** メソッドは、引数の数や型にかかわらず、可変長引数から、新しい `Array` インスタンスを生成します。 +**`Array.of()`** 静的メソッドは、引数の数や型にかかわらず、可変長引数から、新しい `Array` インスタンスを生成します。 -**`Array.of()`** と `Array` コンストラクタの違いは整数引数の扱いにあります。**`Array.of(7)`** は単一の要素、`7` を持つ配列を作成しますが、**`Array(7)`** は `length` プロパティが 7 の空の配列を作成します（これは {{jsxref("undefined")}} の値を持つ実在のスロットではなく、7 つの空のスロットの配列を意味します）。 - -```js -Array.of(7); // [7] -Array(7); // array of 7 empty slots - -Array.of(1, 2, 3); // [1, 2, 3] -Array(1, 2, 3); // [1, 2, 3] -``` +{{EmbedInteractiveExample("pages/js/array-of.html", "shorter")}} ## 構文 -```js -Array.of(element0); -Array.of(element0, element1); -Array.of(element0, element1, /* … ,*/ elementN); +```js-nolint +Array.of() +Array.of(element1) +Array.of(element1, element2) +Array.of(element1, element2, /* …, */ elementN) ``` ### 引数 -- `elementN` +- `element1`, …, `elementN` - : 生成する配列の要素。 ### 返値 新しい {{jsxref("Array")}} インスタンス。 +## 解説 + +`Array.of()` と [`Array()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/Array) コンストラクターの違いは整数引数の扱いにあります。 `Array.of(7)` は単一の要素、`7` を持つ配列を作成しますが、 `Array(7)` は `length` プロパティが 7 の空の配列を作成します（これは {{jsxref("undefined")}} の値を持つ実在のスロットではなく、7 つの空のスロットの配列を意味します）。 + +```js +Array.of(7); // [7] +Array(7); // 7 つの空スロットの配列 + +Array.of(1, 2, 3); // [1, 2, 3] +Array(1, 2, 3); // [1, 2, 3] +``` + +`Array.of()` メソッドは汎用ファクトリーメソッドです。例えば、 `Array` のサブクラスが `of()` メソッドを継承した場合、継承した `of()` メソッドは `Array` インスタンスではなく、サブクラスの新しいインスタンスを返します。実際には、 `this` 値には新しい配列の長さを表す単一の引数を受け入れる任意のコンストラクタ関数を指定することができ、コンストラクタは `of()` に渡された引数の数だけ呼び出されます。最終的な `length` は、すべての要素が代入されたときに再度設定されます。もし `this` の値がコンストラクター関数でない場合、代わりにプレーンな `Array` コンストラクターが使用されます。 + ## 例 -### Array.of の使用 +### Array.of() の使用 ```js Array.of(1); // [1] @@ -46,6 +53,28 @@ Array.of(1, 2, 3); // [1, 2, 3] Array.of(undefined); // [undefined] ``` +### 配列以外のコンストラクターに対する of() の呼び出し + +`of()` メソッドは、新しい配列の長さを表す単一の引数を受け入れるコンストラクター関数で呼び出すことができます。 + +```js +function NotArray(len) { + console.log("NotArray called with length", len); +} + +console.log(Array.of.call(NotArray, 1, 2, 3)); +// NotArray called with length 3 +// NotArray { '0': 1, '1': 2, '2': 3, length: 3 } + +console.log(Array.of.call(Object)); // [Number: 0] { length: 0 } +``` + +`this` の値がコンストラクターでない場合は、プレーンな `Array` オブジェクトを返します。 + +```js +console.log(Array.of.call({}, 1)); // [ 1 ] +``` + ## 仕様書 {{Specifications}} @@ -57,9 +86,8 @@ Array.of(undefined); // [undefined] ## 関連情報 - [`Array.of` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) -- [ポリフィル](https://github.com/behnammodi/polyfill/blob/master/array.polyfill.js) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド - {{jsxref("Array")}} +- {{jsxref("Array/Array", "Array()")}} - {{jsxref("Array.from()")}} - {{jsxref("TypedArray.of()")}} -- [`Array.of()` と `Array.from()` の提案](https://gist.github.com/rwaldron/1074126) -- [`Array.of()` のポリフィル](https://gist.github.com/rwaldron/3186576) diff --git a/files/ja/web/javascript/reference/global_objects/array/pop/index.md b/files/ja/web/javascript/reference/global_objects/array/pop/index.md index e6c0ac65ac3298..9596f44ad17a21 100644 --- a/files/ja/web/javascript/reference/global_objects/array/pop/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/pop/index.md @@ -2,7 +2,7 @@ title: Array.prototype.pop() slug: Web/JavaScript/Reference/Global_Objects/Array/pop l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} @@ -13,9 +13,13 @@ l10n: ## 構文 +```js-nolint +pop() ``` -arrName.pop() -``` + +### 引数 + +なし。 ### 返値 @@ -25,11 +29,11 @@ arrName.pop() `pop()` メソッドは配列の最後の要素を取り除き、呼び出し元にその値を返します。 `pop()` を空の配列に対して呼び出すと、 {{jsxref("undefined")}} を返します。 -{{jsxref("Array.prototype.shift()")}} は `pop` と同様の動作をしますが、配列の最初の要素に適用されます。 +{{jsxref("Array.prototype.shift()")}} は `pop()` と同様の動作をしますが、配列の最初の要素に適用されます。 `pop()` は変更を行うメソッドです。 `this` の長さと内容を変更します。 `this` の値は変更せずに、最後の要素を取り除いた新しい配列を返したい場合は、代わりに [`arr.slice(0, -1)`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) を使用することができます。 -`pop` は意図的に汎用性を持たせています。つまり、このメソッドは配列に類似したオブジェクトに対して呼び出すことができます。オブジェクトが、連続したゼロベースの数値プロパティの最後のものを反映した `length` プロパティを含んでいない場合、意味のある動作をしないことがあります。 +`pop()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。文字列も配列風ですが、文字列は不変であるため、このメソッドを適用するのは適切ではありません。 ## 例 @@ -47,22 +51,26 @@ console.log(myFish); // ['angel', 'clown', 'mandarin' ] console.log(popped); // 'sturgeon' ``` -### 配列風のオブジェクトでの apply() や call () の使用 +### 配列以外のオブジェクトに対する pop() の呼び出し -以下のコードは、4 つの要素と長さの値を含む配列風の `myFish` オブジェクトを作成し、最後の要素を削除して長さの値をデクリメントします。 +`pop()` メソッドは `this` の `length` プロパティを読み込みます。[正規化された長さ](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#length_プロパティの正規化)が 0 の場合、`length` は再び `0` に設定されます（以前は負の値または `undefined` であった可能性があります）。そうでない場合は、`length - 1` のプロパティが返され、[削除](/ja/docs/Web/JavaScript/Reference/Operators/delete)されます。 ```js -const myFish = { - 0: "angel", - 1: "clown", - 2: "mandarin", - 3: "sturgeon", - length: 4, +const arrayLike = { + length: 3, + unrelated: "foo", + 2: 4, }; - -const popped = Array.prototype.pop.call(myFish); // same syntax when using apply() -console.log(myFish); // { 0: 'angel', 1: 'clown', 2: 'mandarin', length: 3 } -console.log(popped); // 'sturgeon' +console.log(Array.prototype.pop.call(arrayLike)); +// 4 +console.log(arrayLike); +// { length: 2, unrelated: 'foo' } + +const plainObj = {}; +// length プロパティがないので、長さは 0 +Array.prototype.pop.call(plainObj); +console.log(plainObj); +// { length: 0 } ``` ### 配列風のオブジェクトの使用 @@ -108,6 +116,7 @@ console.log(collection.length); // 2 ## 関連情報 +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド - {{jsxref("Array.prototype.push()")}} - {{jsxref("Array.prototype.shift()")}} - {{jsxref("Array.prototype.unshift()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/push/index.md b/files/ja/web/javascript/reference/global_objects/array/push/index.md index b2b1b4d82d3464..a4a7bb96afbc36 100644 --- a/files/ja/web/javascript/reference/global_objects/array/push/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/push/index.md @@ -2,26 +2,27 @@ title: Array.prototype.push() slug: Web/JavaScript/Reference/Global_Objects/Array/push l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a --- {{JSRef}} -**`push()`** メソッドは、配列の末尾に 1 つ以上の要素を追加することができます。また戻り値として新しい配列の要素数を返します。 +**`push()`** は {{jsxref("Array")}} インスタンスのメソッドで、配列の末尾に指定された要素を追加します。また返値として配列の新しい長さを返します。 {{EmbedInteractiveExample("pages/js/array-push.html")}} ## 構文 -```js -push(element0); -push(element0, element1); -push(element0, element1, /* … ,*/ elementN); +```js-nolint +push() +push(element1) +push(element1, element2) +push(element1, element2, /* …, */ elementN) ``` ### 引数 -- `elementN` +- `element1`, …, `elementN` - : 配列の末尾に追加する要素。 ### 返値 @@ -34,11 +35,9 @@ push(element0, element1, /* … ,*/ elementN); {{jsxref("Array.prototype.unshift()")}} は `push()` と同様の動作ですが、配列の先頭に適用されます。 -`push()` メソッドは変更を行うメソッドです。これは、 `this` の長さとコンテンツを変更します。 `this` の値はそのままで、最後に要素を追加した新しい配列を返したい場合は、代わりに [`arr.concat([element0, element1, /* ... ,*/ elementN])`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) を使用することができます。要素が余分な配列に包まれていることに注意してください。そうでなければ、要素が配列そのものである場合、 `concat()` の動作により、単一の要素として挿入されるのではなく、分散されてしまうでしょう。 - -`Array.prototype.push()` は意図的に汎用性を持たせています。このメソッドは配列に似たオブジェクトに対して呼び出すことができます。 `push` は配列の末尾から要素を挿入する必要性があるため、 `length` プロパティに依存しています。`length` が数値に変換できない場合、0 が用いられます。また、 `length` が存在しない場合は `length` も作成されることになります。 +`push()` メソッドは[変更メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#コピーメソッドと変更メソッド)です。これは、 `this` の長さとコンテンツを変更します。 `this` の値はそのままで、最後に要素を追加した新しい配列を返したい場合は、代わりに [`arr.concat([element0, element1, /* ... ,*/ elementN])`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) を使用することができます。要素が余分な配列に包まれていることに注意してください。そうでなければ、要素が配列そのものである場合、 `concat()` の動作により、単一の要素として挿入されるのではなく、分散されてしまうでしょう。 -ネイティブの配列風オブジェクトは{{jsxref("Global_Objects/String", "文字列", "", 1)}}ですが、文字列は変化しないので、このメソッドの効果を受けるには相応しくありません。 +`pop()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。文字列も配列風ですが、文字列は不変であるため、このメソッドを適用するのは適切ではありません。 ## 例 @@ -70,9 +69,30 @@ console.log(vegetables); // ['parsnip', 'potato', 'celery', 'beetroot'] 2 つの配列の結合は、 {{jsxref("Array.prototype.concat()", "concat()")}} メソッドでも行うことができます。 +### 配列以外のオブジェクトに対する push() の呼び出し + +`push()` メソッドは `this` の `length` プロパティを読み込みます。そして、 `length` から始まる `this` の各インデックスを `push()` に渡された引数で設定します。最後に、`length` に直前の長さにプッシュされた要素数を加えた値を設定します。 + +```js +const arrayLike = { + length: 3, + unrelated: "foo", + 2: 4, +}; +Array.prototype.push.call(arrayLike, 1, 2); +console.log(arrayLike); +// { '2': 4, '3': 1, '4': 2, length: 5, unrelated: 'foo' } + +const plainObj = {}; +// length プロパティがないので、長さは 0 +Array.prototype.push.call(plainObj, 1, 2); +console.log(plainObj); +// { '0': 1, '1': 2, length: 2 } +``` + ### オブジェクトを配列のように使用する -上述したように、`push` は内部的には汎用的なので、その利点を活かすことができます。この例が示しているように、オブジェクト上で `Array.prototype.push` は正しく動作します。 +前述したように、`push` は内部的には汎用的なので、その利点を活かすことができます。この例が示しているように、オブジェクト上で `Array.prototype.push` は正しく動作します。 オブジェクトの集合を保存するために、配列を生成していないことに注意してください。代わりに、集合をオブジェクト自体に保存して、配列を扱っているかのように見せかけるために `Array.prototype.push` 上で `call` を使用しています。そして、JavaScript は実行コンテキストの確立を許可しているおかげで、これは動作します。 @@ -90,8 +110,7 @@ const obj = { // 例示のために空のオブジェクトを追加する。 obj.addElem({}); obj.addElem({}); -console.log(obj.length); -// → 2 +console.log(obj.length); // 2 ``` `obj` は配列ではありませんが、本当の配列を扱っているかのように `push` メソッドは `obj` の `length` プロパティを増加させできていることに注意してください。 @@ -107,7 +126,9 @@ console.log(obj.length); ## 関連情報 - [このメソッドの修正を含んだ `Array.prototype.push` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド - {{jsxref("Array.prototype.pop()")}} - {{jsxref("Array.prototype.shift()")}} - {{jsxref("Array.prototype.unshift()")}} - {{jsxref("Array.prototype.concat()")}} +- {{jsxref("Array.prototype.splice()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/reduce/index.md b/files/ja/web/javascript/reference/global_objects/array/reduce/index.md index 3c5bb33b15783f..70c989e5f4fbde 100644 --- a/files/ja/web/javascript/reference/global_objects/array/reduce/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/reduce/index.md @@ -2,12 +2,12 @@ title: Array.prototype.reduce() slug: Web/JavaScript/Reference/Global_Objects/Array/reduce l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f --- {{JSRef}} -**`reduce()`** メソッドは、配列のそれぞれの要素に対して、ユーザーが提供した「縮小」コールバック関数を呼び出します。その際、直前の要素における計算結果の返値を渡します。配列のすべての要素に対して縮小関数を実行した結果が単一の値が最終結果になります。 +**`reduce()`** は {{jsxref("Array")}} インターフェイスのメソッドで、配列のそれぞれの要素に対して、ユーザーが提供した「縮小」コールバック関数を呼び出します。その際、直前の要素における計算結果の返値を渡します。配列のすべての要素に対して縮小関数を実行した結果が単一の値が最終結果になります。 コールバックの初回実行時には「直前の計算の返値」は存在しません。 初期値が与えらえた場合は、代わりに使用されることがあります。 @@ -22,45 +22,26 @@ l10n: ## 構文 ```js-nolint -// アロー関数 -reduce((previousValue, currentValue) => { /* … */ } ) -reduce((previousValue, currentValue, currentIndex) => { /* … */ } ) -reduce((previousValue, currentValue, currentIndex, array) => { /* … */ } ) - -reduce((previousValue, currentValue) => { /* … */ } , initialValue) -reduce((previousValue, currentValue, currentIndex) => { /* … */ } , initialValue) -reduce((previousValue, currentValue, currentIndex, array) => { /* … */ }, initialValue) - -// コールバック関数 reduce(callbackFn) reduce(callbackFn, initialValue) - -// インラインコールバック関数 -reduce(function(previousValue, currentValue) { /* … */ }) -reduce(function(previousValue, currentValue, currentIndex) { /* … */ }) -reduce(function(previousValue, currentValue, currentIndex, array) { /* … */ }) - -reduce(function(previousValue, currentValue) { /* … */ }, initialValue) -reduce(function(previousValue, currentValue, currentIndex) { /* … */ }, initialValue) -reduce(function(previousValue, currentValue, currentIndex, array) { /* … */ }, initialValue) ``` ### 引数 - `callbackFn` - - : 以下の引数を取る「縮小」関数です。 - - `previousValue` + - : 配列の各要素に対して実行される関数です。その返値は、次に `callbackFn` を呼び出す際の `accumulator` 引数の値になります。最後の呼び出しでは、返値は `reduce()` の返値となります。この関数は以下の引数で呼び出されます。 + - `accumulator` - : 前回の `callbackFn` の呼び出し結果の値です。初回の呼び出しでは `initialValue` が指定されていた場合はその値、そうでない場合は `array[0]` の値です。 - `currentValue` - : 現在の要素の値です。初回の呼び出しでは `initialValue` が指定された場合は `array[0]` の値であり、そうでない場合は `array[1]` の値です。 - `currentIndex` - : `currentValue` の位置です。初回の呼び出しでは、 `initialValue` が指定された場合は `0`、そうでない場合は `1` です。 - `array` - - : 走査する配列です。 + - : `reduce()` が呼び出された配列です。 - `initialValue` {{optional_inline}} - - : コールバックが初めて呼び出されたときの `previousValue` の初期値です。 - `initialValue` が指定された場合は、 `currentValue` も配列の最初の値に初期化されます。 - `initialValue` が指定され*なかった*場合、 `previousValue` は配列の最初の値で初期化され、 `currentValue` は配列の 2 番目の値で初期化されます。 + - : コールバックが最初に呼び出された時に `accumulator` が初期化される値です。 + `initialValue` が指定された場合、`callbackFn` は配列の最初の値を `currentValue` として実行を開始します。 + もし `initialValue` が指定されなかった場合、`accumulator` は配列の最初の値に初期化され、`callbackFn` は配列の 2 つ目の値を `currentValue` として実行を開始します。この場合、配列が空であれば（`accumulator`として返す最初の値がなければ）エラーが発生します。 ### 返値 @@ -69,35 +50,33 @@ reduce(function(previousValue, currentValue, currentIndex, array) { /* … */ }, ### 例外 - {{jsxref("TypeError")}} - - : 配列に要素がなく、かつ `initialValue` が提供されなかった場合に発生します。 ## 解説 -`reduce()` メソッドは 2 つの引数をとります。コールバック関数と、オプションで初期値を指定することができます。 -初期値が指定された場合、 `reduce()` は配列のそれぞれの要素に対して順に「縮小」コールバック関数を呼び出します。初期値が指定されなかった場合、 `reduce()` は配列の最初の要素の後にあるそれぞれの要素に対してコールバック関数を呼び出します。 +`reduce()` メソッドは[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)です。「縮小」コールバック関数を配列に含まれる各要素に対して昇順に一度ずつ呼び出し、その結果を単一の値に積算します。毎回、 `callbackFn` の返値は次回の `callbackFn` の呼び出しで `accumulator` として渡されます。最終的な `accumulator` の値（配列の最終反復処理において `callbackFn` から返される値）が `reduce()` の返値となります。 -`reduce()` は、配列の反復処理の最後にコールバック関数から返される値を返します。 +`callbackFn` は値が割り当てられている配列インデックスに対してのみ呼び出されます。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)の空のスロットに対しては呼び出されません。 -`reduce()` は[関数型プログラミング](https://ja.wikipedia.org/wiki/関数型プログラミング)の中心的な概念です。ここでは、どの値も変異させることができないので、配列のすべての値を積算するには、反復処理のたびに新しい積算値を返さなければなりません。この約束事は JavaScript の `reduce()` にも当てはまります。[スプレッド構文](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)や他の可能な限りコピーする方法を使用して、既存のものを変更せずに、アキュームレーターとして新しい配列やオブジェクトを作成すべきなのです。もし、アキュームレーターをコピーする代わりに変化させることにした場合、コールバックで変更したオブジェクトを返すことを忘れないでください、さもなければ、次の反復処理で undefined を受け取ることになります。 +他の[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)とは異なり、 `reduce()` は `thisArg` 引数を受け入れません。 `callbackFn` は常に `undefined` を `this` として呼び出され、 `callbackFn` が厳格モードでない場合は `globalThis` に置き換えられます。 -### reduce() を使用しない場合 +`reduce()` は[関数型プログラミング](https://ja.wikipedia.org/wiki/関数型プログラミング)の中心的な概念です。ここでは、どの値も変異させることができないので、配列のすべての値を積算するには、反復処理のたびに新しい積算値を返さなければなりません。この約束事は JavaScript の `reduce()` にも当てはまります。[スプレッド構文](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)や他の可能な限りコピーする方法を使用して、既存のものを変更せずに、アキュームレーターとして新しい配列やオブジェクトを作成すべきなのです。もし、アキュームレーターをコピーする代わりに変化させることにした場合、コールバックで変更したオブジェクトを返すことを忘れないでください、さもなければ、次の反復処理で undefined を受け取ることになります。 -`reduce()` のような再帰的な関数は強力ですが、特に経験の浅い JavaScript 開発者にとっては理解するのが難しい場合があります。他の配列メソッドを使用した場合にコードが明確になるなら、開発者は `reduce()` を使用する他の利点と可読性をトレードオフで比較検討する必要があります。 `reduce()` が最適な選択である場合は、文書化と意味的な変数名を使用することが可読性の欠点を軽減するのに役立ちます。 +`reduce()` メソッドは呼び出し元の配列を変更しませんが、 `callbackFn` に指定された関数は変更することがあります。ただし、配列の長さは `callbackFn` を最初に呼び出す前に保存されることに注意してください。したがって、 -### 配列変更時の動作について +- `callbackFn` は `reduce()` の呼び出しを始めたときの配列の長さを超えて追加された要素にはアクセスしません。 +- 既に処理したインデックスを変更しても、 `callbackFn` が再度呼び出されることはありません。 +- まだ処理していない既存の配列要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値はその要素が取得される時点の値になります。[削除](/ja/docs/Web/JavaScript/Reference/Operators/delete)された要素は `undefined` であるかのように処理されます。 -`reduce()` メソッド自身は、使用する配列を変更することはありません。しかし、コールバック関数内のコードが配列を変更することは可能です。以下は、配列の改変が起こる可能性のあるシナリオと、そのシナリオにおける `reduce()` の動作です。 +> **警告:** 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。 -- もし `reduce()` が配列に対して反復処理を始めた後に配列に要素が追加された場合、コールバック関数は追加された要素に対して反復処理を行いません。 -- 配列の既存の要素が変更された場合、コールバック関数に渡される値は、reduce()が配列に対して最初に呼び出された時点の値になります。 -- `reduce()` の呼び出しが始まった後、反復処理される前に削除された配列要素は `reduce()` の処理が行われません。 +`reduce()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 ### 稀な場合 -配列が（位置に関わらず）1 つの要素しか持たず、 `initialValue` が指定されなかった場合、または `initialValue` が指定されていても配列が空だった場合、 `callbackfn` は*実行されずに*要素が返却されます。 +配列が（位置に関わらず） 1 つの要素しか持たず、 `initialValue` が指定されなかった場合、または `initialValue` が指定されていても配列が空だった場合、 `callbackFn` は*実行されずに*要素が返却されます。 -`initialValue` が提供され、配列が空でない場合、 reduce メソッドは常に 0 の位置コールバック関数を呼び出し始めます。 +`initialValue` が提供され、配列が空でない場合、 reduce メソッドは常に 0 の位置からコールバック関数を呼び出し始めます。 `initialValue` が提供されなかった場合、 reduce メソッドは、次の例に示すように、長さが 1 より大きい配列、長さが 1 の配列、長さが 0 の配列に対して異なる動作をします。 @@ -127,10 +106,10 @@ const getMax = (a, b) => Math.max(a, b); ```js const array = [15, 16, 17, 18, 19]; -function reducer(previousValue, currentValue, index) { - const returns = previousValue + currentValue; +function reducer(accumulator, currentValue, index) { + const returns = accumulator + currentValue; console.log( - `previousValue: ${previousValue}, currentValue: ${currentValue}, index: ${index}, returns: ${returns}`, + `accumulator: ${accumulator}, currentValue: ${currentValue}, index: ${index}, returns: ${returns}`, ); return returns; } @@ -140,12 +119,12 @@ array.reduce(reducer); コールバック関数は 4 回呼び出され、各回の引数の内容は以下のようになります。 -| | `previousValue` | `currentValue` | `index` | 返値 | -| ---------------- | --------------- | -------------- | ------- | ---- | -| 最初の呼び出し | `15` | `16` | `1` | `31` | -| 2 番目の呼び出し | `31` | `17` | `2` | `48` | -| 3 番目の呼び出し | `48` | `18` | `3` | `66` | -| 4 番目の呼び出し | `66` | `19` | `4` | `85` | +| | `accumulator` | `currentValue` | `index` | 返値 | +| ---------------- | ------------- | -------------- | ------- | ---- | +| 最初の呼び出し | `15` | `16` | `1` | `31` | +| 2 番目の呼び出し | `31` | `17` | `2` | `48` | +| 3 番目の呼び出し | `48` | `18` | `3` | `66` | +| 4 番目の呼び出し | `66` | `19` | `4` | `85` | `array` の要素は処理中に変化しません。常に `[15, 16, 17, 18, 19]` です。 `reduce()` の返値は、コールバック呼び出しの最後の返値である (`85`) となるでしょう。 @@ -155,43 +134,23 @@ array.reduce(reducer); ```js [15, 16, 17, 18, 19].reduce( - (previousValue, currentValue) => previousValue + currentValue, + (accumulator, currentValue) => accumulator + currentValue, 10, ); ``` コールバックは 5 回呼び出され、それぞれの呼び出しにおける引数と返値は次のようになります。 -| | `previousValue` | `currentValue` | `index` | 返値 | -| ---------------- | --------------- | -------------- | ------- | ---- | -| 最初の呼び出し | `10` | `15` | `0` | `25` | -| 2 番目の呼び出し | `25` | `16` | `1` | `41` | -| 3 番目の呼び出し | `41` | `17` | `2` | `58` | -| 4 番目の呼び出し | `58` | `18` | `3` | `76` | -| 5 番目の呼び出し | `76` | `19` | `4` | `95` | +| | `accumulator` | `currentValue` | `index` | 返値 | +| ---------------- | ------------- | -------------- | ------- | ---- | +| 最初の呼び出し | `10` | `15` | `0` | `25` | +| 2 番目の呼び出し | `25` | `16` | `1` | `41` | +| 3 番目の呼び出し | `41` | `17` | `2` | `58` | +| 4 番目の呼び出し | `58` | `18` | `3` | `76` | +| 5 番目の呼び出し | `76` | `19` | `4` | `95` | この場合の `reduce()` の返値は `95` となります。 -## 例 - -### 配列内の値の合計値を出す - -```js -let sum = [0, 1, 2, 3].reduce(function (previousValue, currentValue) { - return previousValue + currentValue; -}, 0); -// sum is 6 -``` - -また、アロー関数を用いて書くこともできます。 - -```js -let total = [0, 1, 2, 3].reduce( - (previousValue, currentValue) => previousValue + currentValue, - 0, -); -``` - ### オブジェクト配列の値の合計値 オブジェクトの配列に含まれた値の合計値を出すには、すべての項目を関数内で取得できるようにするために `initialValue` を指定する**必要があります**。 @@ -199,220 +158,240 @@ let total = [0, 1, 2, 3].reduce( ```js const objects = [{ x: 1 }, { x: 2 }, { x: 3 }]; const sum = objects.reduce( - (previousValue, currentValue) => previousValue + currentValue.x, + (accumulator, currentValue) => accumulator + currentValue.x, 0, ); console.log(sum); // logs 6 ``` -### 二次元配列を一次元配列にする +### 関数を直列にパイプ接続 + +`pipe` 関数は一連の関数を受け取り、新しい関数を返します。新しい関数が引数で呼び出されると、一連の関数が順番に呼び出され、それぞれが前回関数の返値を受け取ります。 ```js -const flattened = [ - [0, 1], - [2, 3], - [4, 5], -].reduce( - (previousValue, currentValue) => previousValue.concat(currentValue), - [], -); -// flattened is [0, 1, 2, 3, 4, 5] -``` +const pipe = + (...functions) => + (initialValue) => + functions.reduce((acc, fn) => fn(acc), initialValue); -### オブジェクトの値のインスタンスを数える +// 合成に使用する素材 +const double = (x) => 2 * x; +const triple = (x) => 3 * x; +const quadruple = (x) => 4 * x; -```js -const names = ["Alice", "Bob", "Tiff", "Bruce", "Alice"]; +// 特定の値の乗算のための合成関数 +const multiply6 = pipe(double, triple); +const multiply9 = pipe(triple, triple); +const multiply16 = pipe(quadruple, quadruple); +const multiply24 = pipe(double, triple, quadruple); -const countedNames = names.reduce((allNames, name) => { - const currCount = allNames[name] ?? 0; - return { - ...allNames, - [name]: currCount + 1, - }; -}, {}); -// countedNames is: -// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 } +// 使用方法 +multiply6(6); // 36 +multiply9(9); // 81 +multiply16(16); // 256 +multiply24(10); // 240 ``` -### プロパティによってオブジェクトをグループ化 +### プロミスを直列に実行 + +[プロミスシーケンス](/ja/docs/Web/JavaScript/Guide/Using_promises#composition)は、非同期で行われることを除けば、基本的に前回の節で示された関数のパイプ接続です。 ```js -const people = [ - { name: "Alice", age: 21 }, - { name: "Max", age: 20 }, - { name: "Jane", age: 20 }, -]; - -function groupBy(objectArray, property) { - return objectArray.reduce((acc, obj) => { - const key = obj[property]; - const curGroup = acc[key] ?? []; +// パイプと比較すると、 fn(acc) は acc.then(fn) に変更され、 +// initialValue はプロミスであることが保証されます。 +const asyncPipe = + (...functions) => + (initialValue) => + functions.reduce((acc, fn) => acc.then(fn), Promise.resolve(initialValue)); - return { ...acc, [key]: [...curGroup, obj] }; - }, {}); -} +// 合成に使用する構成要素 +const p1 = async (a) => a * 5; +const p2 = async (a) => a * 2; +// 構成された関数は、最終的にすべてプロミスで包まれるため、 +// プロミス以外を返すこともできます。 +const f3 = (a) => a * 3; +const p4 = async (a) => a * 4; -const groupedPeople = groupBy(people, "age"); -// groupedPeople is: -// { -// 20: [ -// { name: 'Max', age: 20 }, -// { name: 'Jane', age: 20 } -// ], -// 21: [{ name: 'Alice', age: 21 }] -// } +asyncPipe(p1, p2, f3, p4)(10).then(console.log); // 1200 ``` -### スプレッド演算子と initialValue を使ってオブジェクトの配列に含まれる配列を結合させる +`asyncPipe` は `async`/`await` を使用して実装することもでき、 `pipe` との類似性をよりよく示しています。 ```js -// friends - an array of objects -// where object field "books" is a list of favorite books -const friends = [ - { - name: "Anna", - books: ["Bible", "Harry Potter"], - age: 21, - }, - { - name: "Bob", - books: ["War and peace", "Romeo and Juliet"], - age: 26, - }, - { - name: "Alice", - books: ["The Lord of the Rings", "The Shining"], - age: 18, - }, -]; - -// allbooks - list which will contain all friends' books + -// additional list contained in initialValue -const allbooks = friends.reduce( - (previousValue, currentValue) => [...previousValue, ...currentValue.books], - ["Alphabet"], -); - -// allbooks = [ -// 'Alphabet', 'Bible', 'Harry Potter', 'War and peace', -// 'Romeo and Juliet', 'The Lord of the Rings', -// 'The Shining' -// ] +const asyncPipe = + (...functions) => + (initialValue) => + functions.reduce(async (acc, fn) => fn(await acc), initialValue); ``` -### 配列内の重複要素を除去する +### reduce() を疎配列で使用 -> **メモ:** {{jsxref("Set")}} と {{jsxref("Array.from()")}} に対応している環境を使っている場合は、`const arrayWithNoDuplicates = Array.from(new Set(myArray))` を使うことで重複要素を除去された配列を取得することができます。 +`reduce()` は疎配列の欠落している要素をスキップしますが、値が `undefined` の場合はスキップしません。 ```js -const myArray = ["a", "b", "a", "b", "c", "e", "e", "c", "d", "d", "d", "d"]; -const myArrayWithNoDuplicates = myArray.reduce( - (previousValue, currentValue) => { - if (!previousValue.includes(currentValue)) { - return [...previousValue, currentValue]; - } - return previousValue; - }, - [], -); - -console.log(myArrayWithNoDuplicates); +console.log([1, 2, , 4].reduce((a, b) => a + b)); // 7 +console.log([1, 2, undefined, 4].reduce((a, b) => a + b)); // NaN ``` -### .filter().map() を .reduce() で置き換える +### 配列以外のオブジェクトに対する reduce() の呼び出し -{{jsxref("Array/filter", "filter()")}} を使用した後で {{jsxref("Array/map", "map()")}} を使用すると配列を二度走査しますが、{{jsxref("Array/reduce", "reduce()")}} では同じ効果を一度の操作で実現することができ、もっと効率的です。(`for` ループが好きなのであれば、{{jsxref("Array/forEach", "forEach()")}} で一度の操作で filter と map を行うことができます)。 +`reduce()` メソッドは `this` の `length` プロパティを読み込み、次にキーが `length` より小さい非負の整数である各プロパティにアクセスします。 ```js -const numbers = [-5, 6, 2, 0]; +const arrayLike = { + length: 3, + 0: 2, + 1: 3, + 2: 4, + 3: 99, // length が 3 であるため reduce() からは無視される +}; +console.log(Array.prototype.reduce.call(arrayLike, (x, y) => x + y)); +// 9 +``` -const doubledPositiveNumbers = numbers.reduce((previousValue, currentValue) => { - if (currentValue > 0) { - const doubled = currentValue * 2; - return [...previousValue, doubled]; - } - return previousValue; -}, []); +### reduce() を使用すべきでない場合 -console.log(doubledPositiveNumbers); // [12, 4] -``` +`reduce()` のような多目的の高次関数は強力ですが、特に経験の浅い JavaScript の開発者にとっては理解しにくい場合があります。他の配列メソッドを使用した方がコードが明快になる場合、開発者は `reduce()` を使用する他の利点と読み取り可能性のトレードオフを比較検討する必要があります。 -### 直列のプロミスの実行 +`reduce()` は常に `for...of` ループと同等ですが、上位スコープの変数を変更する代わりに、各反復処理で新しい値を返すことに注意してください。 ```js -/** - * 一連のプロミスハンドラーを連鎖させる。 - * - * @param {array} arr - プロミスハンドラーのリストで、各ハンドラーは前のハンドラーの - * 解決した結果を受け取り、別のプロミスを返します。 - * @param {*} input プロミスチェーンを開始するための初期値 - * @return {Object} ハンドラーの連鎖を伴う最終プロミス - */ -function runPromiseInSequence(arr, input) { - return arr.reduce( - (promiseChain, currentFunction) => promiseChain.then(currentFunction), - Promise.resolve(input), - ); -} +const val = array.reduce((acc, cur) => update(acc, cur), initialValue); -// promise function 1 -function p1(a) { - return new Promise((resolve, reject) => { - resolve(a * 5); - }); +// これは、次のものと同等です +let val = initialValue; +for (const cur of array) { + val = update(val, cur); } +``` -// promise function 2 -function p2(a) { - return new Promise((resolve, reject) => { - resolve(a * 2); - }); -} +前述のように、人々が `reduce()` を使用したいと思う理由は、データを不変とする関数型プログラミングの手法を模倣するためです。したがって、アキュムレーターの不変性を支持する開発者は、次のように反復処理ごとにアキュムレーター全体をコピーする傾向があります。 -// function 3 - will be wrapped in a resolved promise by .then() -function f3(a) { - return a * 3; -} +```js example-bad +const names = ["Alice", "Bob", "Tiff", "Bruce", "Alice"]; +const countedNames = names.reduce((allNames, name) => { + const currCount = Object.hasOwn(allNames, name) ? allNames[name] : 0; + return { + ...allNames, + [name]: currCount + 1, + }; +}, {}); +``` -// promise function 4 -function p4(a) { - return new Promise((resolve, reject) => { - resolve(a * 4); - }); -} +このコードは非効率的です。というのも、各イテレーターは `allNames` オブジェクト全体をコピーする必要があり、これは固有の名前がいくつあるかによってサイズが大きくなってしまうからです。このコードは最悪の場合、 `N` が `names` の長さだとすると `O(N^2)` のパフォーマンスになります。 + +各反復処理で `allNames` オブジェクトを変更したほうがよりよいでしょう。しかし、 `allNames` がいずれにせよ変更されるのであれば、 `reduce()` を単純な `for` ループに変換した方がより明確です。 -const promiseArr = [p1, p2, f3, p4]; -runPromiseInSequence(promiseArr, 10).then(console.log); // 1200 +```js example-bad +const names = ["Alice", "Bob", "Tiff", "Bruce", "Alice"]; +const countedNames = names.reduce((allNames, name) => { + const currCount = allNames[name] ?? 0; + allNames[name] = currCount + 1; + // allNames を返さないと、次の反復処理で undefined を受け取る + return allNames; +}, Object.create(null)); ``` -### パイプによって関数を合成する +```js example-good +const names = ["Alice", "Bob", "Tiff", "Bruce", "Alice"]; +const countedNames = Object.create(null); +for (const name of names) { + const currCount = countedNames[name] ?? 0; + countedNames[name] = currCount + 1; +} +``` -```js -// 合成に使用する素材 -const double = (x) => 2 * x; -const triple = (x) => 3 * x; -const quadruple = (x) => 4 * x; +したがって、アキュムレーターが配列やオブジェクトで、反復処理ごとに配列やオブジェクトをコピーしている場合、誤ってコードに 2 次的な複雑さを導入してしまい、大きなデータですぐにパフォーマンスが低下してしまう可能性があります。 -// パイプ機能を実現する関数の合成 -const pipe = - (...functions) => - (initialValue) => - functions.reduce((acc, fn) => fn(acc), initialValue); +`reduce()` の受け入れられる用途のいくつかは上で指定されたものです（特に、配列の合計、プロミスの順序付け、関数のパイプ処理）。他にも `reduce()` よりも優れた代替手段が存在する場合があります。 -// 詳細な値の乗算のための合成関数 -const multiply6 = pipe(double, triple); -const multiply9 = pipe(triple, triple); -const multiply16 = pipe(quadruple, quadruple); -const multiply24 = pipe(double, triple, quadruple); +- 配列の平坦化。代わりに {{jsxref("Array/flat", "flat()")}} を使用してください。 -// 使用方法 -multiply6(6); // 36 -multiply9(9); // 81 -multiply16(16); // 256 -multiply24(10); // 240 -``` + ```js example-bad + const flattened = array.reduce((acc, cur) => acc.concat(cur), []); + ``` + + ```js example-good + const flattened = array.flat(); + ``` + +- プロパティによるオブジェクトのグループ化。代わりに {{jsxref("Object.groupBy()")}} を使用してください。 + + ```js example-bad + const groups = array.reduce((acc, obj) => { + const key = obj.name; + const curGroup = acc[key] ?? []; + return { ...acc, [key]: [...curGroup, obj] }; + }, {}); + ``` + + ```js example-good + const groups = Object.groupBy(array, (obj) => obj.name); + ``` + +- オブジェクトの配列に格納されている配列の連結。代わりに {{jsxref("Array/flatMap", "flatMap()")}} を使用してください。 + + ```js example-bad + const friends = [ + { name: "Anna", books: ["Bible", "Harry Potter"] }, + { name: "Bob", books: ["War and peace", "Romeo and Juliet"] }, + { name: "Alice", books: ["The Lord of the Rings", "The Shining"] }, + ]; + const allBooks = friends.reduce((acc, cur) => [...acc, ...cur.books], []); + ``` + + ```js example-good + const allBooks = friends.flatMap((person) => person.books); + ``` + +- 配列内の重複項目の除去。代わりに {{jsxref("Set")}} と {{jsxref("Array.from()")}} を使用してください。 + + ```js example-bad + const uniqArray = array.reduce( + (acc, cur) => (acc.includes(cur) ? acc : [...acc, cur]), + [], + ); + ``` + + ```js example-good + const uniqArray = Array.from(new Set(array)); + ``` + +- 配列の要素の削除や追加。代わりに {{jsxref("Array/flatMap", "flatMap()")}} を使用してください。 + + ```js example-bad + // 数値の配列を受け取り、完全二乗を平方根に分割します。 + const roots = array.reduce((acc, cur) => { + if (cur < 0) return acc; + const root = Math.sqrt(cur); + if (Number.isInteger(root)) return [...acc, root, root]; + return [...acc, cur]; + }, []); + ``` + + ```js example-good + const roots = array.flatMap((val) => { + if (val < 0) return []; + const root = Math.sqrt(val); + if (Number.isInteger(root)) return [root, root]; + return [val]; + }); + ``` + + 配列から要素を取り除くだけなら {{jsxref("Array/filter", "filter()")}} も使用できます。 + +- 要素の検索、または要素が条件を満たすかどうかのテスト。代わりに {{jsxref("Array/find", "find()")}} と {{jsxref("Array/find", "findIndex()")}} または {{jsxref("Array/some", "some()")}} と {{jsxref("Array/every", "every()")}} を使用してください。これらのメソッドには、配列全体を反復処理することなく、結果が確定したらすぐに返すという好ましいこともあります。 + + ```js example-bad + const allEven = array.reduce((acc, cur) => acc && cur % 2 === 0, true); + ``` + + ```js example-good + const allEven = array.every((val) => val % 2 === 0); + ``` + +`reduce()` が最良の選択である場合は、ドキュメント化と変数名の意味づけをすることで、可読性の欠点を軽減する手助けになります。 ## 仕様書 @@ -425,4 +404,12 @@ multiply24(10); // 240 ## 関連情報 - [`Array.prototype.reduce` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} +- {{jsxref("Array.prototype.map()")}} +- {{jsxref("Array.prototype.flat()")}} +- {{jsxref("Array.prototype.flatMap()")}} - {{jsxref("Array.prototype.reduceRight()")}} +- {{jsxref("TypedArray.prototype.reduce()")}} +- {{jsxref("Object.groupBy()")}} +- {{jsxref("Map.groupBy()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/reduceright/index.md b/files/ja/web/javascript/reference/global_objects/array/reduceright/index.md index 43deb38862ba74..f8dae97d248627 100644 --- a/files/ja/web/javascript/reference/global_objects/array/reduceright/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/reduceright/index.md @@ -2,72 +2,39 @@ title: Array.prototype.reduceRight() slug: Web/JavaScript/Reference/Global_Objects/Array/reduceRight l10n: - sourceCommit: 9b38f886d21c5d0a428f58acb20c4d0fc6c2e098 + sourceCommit: c607c483fe079c61de5e32fba1a6cce61896e97d --- {{JSRef}} -**`reduceRight()`** メソッドは、アキュームレーターと配列のそれぞれの値に対して (右から左へ) 関数を適用して、単一の値にします。 +**`reduceRight()`** は {{jsxref("Array")}} インスタンスのメソッドで、アキュームレーターと配列のそれぞれの値に対して（右から左へ）関数を適用して、単一の値にします。 -{{EmbedInteractiveExample("pages/js/array-reduce-right.html","shorter")}} +左から右へ適用する場合は {{jsxref("Array.prototype.reduce()")}} を参照してください。 -左から右へ適用する際は {{jsxref("Array.prototype.reduce()")}} を参照してください。 +{{EmbedInteractiveExample("pages/js/array-reduce-right.html")}} ## 構文 -```js -// アロー関数 -reduceRight((accumulator, currentValue) => { - /* … */ -}); -reduceRight((accumulator, currentValue, index) => { - /* … */ -}); -reduceRight((accumulator, currentValue, index, array) => { - /* … */ -}); -reduceRight((accumulator, currentValue, index, array) => { - /* … */ -}, initialValue); - -// コールバック関数 -reduceRight(callbackFn); -reduceRight(callbackFn, initialValue); - -// コールバック畳み込み関数 -reduceRight(function (accumulator, currentValue) { - /* … */ -}); -reduceRight(function (accumulator, currentValue, index) { - /* … */ -}); -reduceRight(function (accumulator, currentValue, index, array) { - /* … */ -}); -reduceRight(function (accumulator, currentValue, index, array) { - /* … */ -}, initialValue); +```js-nolint +reduceRight(callbackFn) +reduceRight(callbackFn, initialValue) ``` ### 引数 - `callbackFn` - - : 配列内のそれぞれの値に対して実行される関数です。 - - この関数は、以下の引数と共に呼び出されます。 - + - : 配列の各要素に対して実行される関数です。その返値は、次に `callbackFn` を呼び出す際の `accumulator` 引数の値になります。最後の呼び出しでは、返値は `reduceRight()` の返値となります。この関数は以下の引数で呼び出されます。 - `accumulator` - - : コールバック関数の前回の呼び出しで返された値、もしくは、指定されていれば `initialValue` です。（下記参照） + - : 前回の `callbackFn` の呼び出し結果の値です。初回の呼び出しでは `initialValue` が指定されていた場合はその値、そうでない場合はこの配列の末尾の要素の値です。 - `currentValue` - - : 配列内で現在処理中の要素です。 - - `index` - - : 配列内で現在処理中の要素の位置です。 - - `array` + - : 現在の要素の値です。初回の呼び出しでは `initialValue` が指定された場合は末尾の要素の値であり、そうでない場合は末尾から 2 番目の要素の値です。 + - `currentIndex` + - : `currentValue` のインデックス位置です。初回の呼び出しでは、 `initialValue` が指定された場合は `array.length - 1`、そうでない場合は `array.length - 2` です。 - : `reduceRight()` が呼び出された配列です。 - `initialValue` {{optional_inline}} - - : `callbackFn` の最初の呼び出しのときに、アキュームレーターとして使用する値です。初期値がが渡されなかった場合は、配列の最後の要素が適用され、その要素が飛ばされます。また、 reduce または reduceRight を空の配列に対して初期値なしで呼び出すと `TypeError` になります。 + - : `callbackFn` の最初の呼び出しのときに、アキュームレーターとして使用する値です。初期値がが渡されなかった場合は、配列の最後の要素が適用され、その要素が飛ばされます。また、 `reduceRight()` を空の配列に対して初期値なしで呼び出すと `TypeError` になります。 ### 返値 @@ -75,9 +42,27 @@ reduceRight(function (accumulator, currentValue, index, array) { ## 解説 -`reduceRight` は、配列内に存在するそれぞれの要素に対してコールバック関数を一度ずつ実行します。配列内の穴は対象外です。初期値 (あるいは直前のコールバックの呼び出し結果)、現在の要素の値、現在の位置、繰り返しが行われる配列の 4 つの引数を受け取ります。 +`reduceRight()` メソッドは[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)です。「縮小」コールバック関数を配列に含まれる各要素に対して昇順に一度ずつ呼び出し、その結果を単一の値に積算します。 + +`callbackFn` は値が割り当てられている配列インデックスに対してのみ呼び出されます。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)の空のスロットに対しては呼び出されません。 + +他の[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)とは異なり、 `reduceRight()` は `thisArg` 引数を受け入れません。 `callbackFn` は常に `undefined` を `this` として呼び出され、 `callbackFn` が厳格モードでない場合は `globalThis` に置き換えられます。 + +`reduceRight()` メソッドは呼び出し元の配列を変更しませんが、 `callbackFn` に指定された関数は変更することがあります。ただし、配列の長さは `callbackFn` を最初に呼び出す前に保存されることに注意してください。したがって、 + +- `callbackFn` は `reduceRight()` の呼び出しを始めたときの配列の長さを超えて追加された要素にはアクセスしません。 +- 既に処理したインデックスを変更しても、 `callbackFn` が再度呼び出されることはありません。 +- まだ処理していない既存の配列要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値はその要素が取得される時点の値になります。[削除](/ja/docs/Web/JavaScript/Reference/Operators/delete)された要素は `undefined` であるかのように処理されます。 + +> **警告:** 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。 + +`reduceRight()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 + +## 例 + +### 初期値がない場合の reduceRight() の動作 -reduceRight の `callbackFn` の呼び出しは、以下のように見えるでしょう。 +reduceRight の `callbackFn` の呼び出しは次のようになります： ```js arr.reduceRight((accumulator, currentValue, index, array) => { @@ -108,7 +93,9 @@ arr.reduceRight((accumulator, currentValue, index, array) => { `reduceRight` の返値は、コールバック呼び出しの最後の返値である (`10`) になります。 -`initialValue` を渡した場合、結果は次のようになります。 +### 初期値がある場合の reduceRight() の動作 + +ここでは、同じアルゴリズムを使用して同じ配列を縮小しますが、 `reduceRight()` の 2 つ目の引数である `initialValue` として `10` を使用します。 ```js [0, 1, 2, 3, 4].reduceRight( @@ -127,8 +114,6 @@ arr.reduceRight((accumulator, currentValue, index, array) => { `reduceRight` から返される値はこのときのもので、もちろん `20` です。 -## 例 - ### 配列内のすべての値を合計する ```js @@ -136,18 +121,6 @@ const sum = [0, 1, 2, 3].reduceRight((a, b) => a + b); // sum is 6 ``` -### 配列中の配列を平坦化する - -```js -const arrays = [ - [0, 1], - [2, 3], - [4, 5], -]; -const flattened = arrays.reduceRight((a, b) => a.concat(b), []); -// flattened is [4, 5, 2, 3, 0, 1] -``` - ### 一連のコールバックを使用して非同期関数のリストを実行し、それぞれの結果を次のコールバックに渡す ```js @@ -233,6 +206,31 @@ console.log(compose(double, inc)(2)); // 6 console.log(compose(inc, double)(2)); // 5 ``` +### reduceRight() を疎配列で使用 + +`reduceRight()` は疎配列の欠落している要素をスキップしますが、値が `undefined` の場合はスキップしません。 + +```js +console.log([1, 2, , 4].reduceRight((a, b) => a + b)); // 7 +console.log([1, 2, undefined, 4].reduceRight((a, b) => a + b)); // NaN +``` + +### 配列以外のオブジェクトに対する reduceRight() の呼び出し + +`reduceRight()` メソッドは `this` の `length` プロパティを読み込み、次にキーが `length` より小さい非負の整数である各プロパティにアクセスします。 + +```js +const arrayLike = { + length: 3, + 0: 2, + 1: 3, + 2: 4, + 3: 99, // length が 3 であるため reduceRight() からは無視される +}; +console.log(Array.prototype.reduceRight.call(arrayLike, (x, y) => x - y)); +// -1 すなわち 4 - 3 - 2 +``` + ## 仕様書 {{Specifications}} @@ -244,4 +242,12 @@ console.log(compose(inc, double)(2)); // 5 ## 関連情報 - [`Array.prototype.reduceRight` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} +- {{jsxref("Array.prototype.map()")}} +- {{jsxref("Array.prototype.flat()")}} +- {{jsxref("Array.prototype.flatMap()")}} - {{jsxref("Array.prototype.reduce()")}} +- {{jsxref("TypedArray.prototype.reduceRight()")}} +- {{jsxref("Object.groupBy()")}} +- {{jsxref("Map.groupBy()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/reverse/index.md b/files/ja/web/javascript/reference/global_objects/array/reverse/index.md index 39f5a599b1e5bc..ef38b0e1a06504 100644 --- a/files/ja/web/javascript/reference/global_objects/array/reverse/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/reverse/index.md @@ -2,30 +2,38 @@ title: Array.prototype.reverse() slug: Web/JavaScript/Reference/Global_Objects/Array/reverse l10n: - sourceCommit: cf607d68522cd35ee7670782d3ee3a361eaef2e4 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`reverse()`** メソッドは、配列の要素を [in-place(その場)](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0) で反転させ、その配列への参照を返します。最初の要素が最後の要素に、最後の要素が最初の要素になります。言い換えれば、配列内の要素順序を、先に述べた方向とは逆に向かわせます。 +**`reverse()`** は {{jsxref("Array")}} のメソッドで、配列の要素を[その場 (in-place)](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0) で反転させ、その配列への参照を返します。最初の要素が最後の要素に、最後の要素が最初の要素になります。言い換えれば、配列内の要素順序を、先に述べた方向とは逆に向かわせます。 + +元の配列を変更せずに配列の要素を反転させるには {{jsxref("Array/toReversed", "toReversed()")}} を使用してください。 {{EmbedInteractiveExample("pages/js/array-reverse.html")}} ## 構文 -```js -reverse(); +```js-nolint +reverse() ``` +### 引数 + +なし。 + ### 返値 -元の配列を反転されたものへの参照です。なお、配列は [in-place(その場)](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0) で反転され、コピーは作られません。 +元の配列を反転されたものへの参照です。なお、配列は[その場 (in-place)](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0) で反転され、コピーは作られません。 ## 解説 -`reverse` メソッドは、呼び出した配列オブジェクトの要素を反転し、書き換えられた配列の参照を返します。 +`reverse()` メソッドは、呼び出した配列オブジェクトの要素を反転し、書き換えられた配列の参照を返します。 + +`reverse()` メソッドは空のスロットを維持します。元の配列が[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)である場合、空のスロットに対応する新しいインデックスは[削除され](/ja/docs/Web/JavaScript/Reference/Operators/delete)、空のスロットになります。 -`reverse` は意図的に汎用性を持たせています。つまり、このメソッドは配列に類似したオブジェクトに対して呼び出すこともできます。ゼロから始まる数値プロパティであり、連続した連なりの最後を反映している `length` プロパティを含まないオブジェクトでは効果がないかもしれません。 +`reverse()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。文字列も配列風ですが、文字列は不変であるため、このメソッドを適用するのは適切ではありません。 ## 例 @@ -41,18 +49,6 @@ items.reverse(); console.log(items); // [3, 2, 1] ``` -### 配列風オブジェクトの要素を反転させる - -次の例は、3 つの要素と length プロパティを含む配列風オブジェクト `obj` を作成し、その配列風オブジェクトを反転させます。`reverse()` の呼び出しは、反転した配列風オブジェクト `obj` への参照を返します。 - -```js -const obj = { 0: 1, 1: 2, 2: 3, length: 3 }; -console.log(obj); // {0: 1, 1: 2, 2: 3, length: 3} - -Array.prototype.reverse.call(obj); //apply() を使用するのと同じ構文 -console.log(obj); // {0: 3, 1: 2, 2: 1, length: 3} -``` - ### reverse() メソッドは同じ配列への参照を返す `reverse()` メソッドは元の配列への参照を返すので、返された配列を変更すると、元の配列も変更されます。 @@ -65,7 +61,7 @@ reversed[0] = 5; console.log(numbers[0]); // 5 ``` -`reverse()` で元の配列を変更せず、他の配列メソッド（[`map()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map) など）が行うように[シャローコピーした](/ja/docs/Glossary/Shallow_copy)配列を返すようにするには、 `reverse()` を呼び出す前に[スプレッド構文](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)か [`Array.from()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from) を使用してシャローコピーを行ってください。 +`reverse()` で元の配列を変更せず、他の配列メソッド（[`map()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map) など）が行うように[シャローコピーした](/ja/docs/Glossary/Shallow_copy)配列を返すようにするには、 {{jsxref("Array/toReversed", "toReversed()")}} メソッドを使用してください。他にも、 `reverse()` を呼び出す前に[スプレッド構文](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)か [`Array.from()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from) を使用してシャローコピーを行っておくこともできます。 ```js const numbers = [3, 2, 4, 1, 5]; @@ -75,6 +71,32 @@ reverted[0] = 5; console.log(numbers[0]); // 3 ``` +### 疎配列に対する reverse() の使用 + +疎配列は `reverse()` を呼び出しても疎配列のままです。空のスロットは空のスロットとしてそれぞれの新しいインデックスにコピーされます。 + +```js +console.log([1, , 3].reverse()); // [3, empty, 1] +console.log([1, , 3, 4].reverse()); // [4, 3, empty, 1] +``` + +### 配列以外のオブジェクトに対する reverse() の呼び出し + +`reverse()` メソッドは `this` の `length` プロパティを読み込みます。そして、 `0` から `length / 2` までの整数のキーを持つ各プロパティを参照し、両端の対応する 2 つのインデックスを入れ替えます。出力先のプロパティで、参照元のプロパティが存在しないものは[削除](/ja/docs/Web/JavaScript/Reference/Operators/delete)します。 + +```js +const arrayLike = { + length: 3, + unrelated: "foo", + 2: 4, + 3: 33, // length が 3 であるため reverse() 空は無視される +}; +console.log(Array.prototype.reverse.call(arrayLike)); +// { 0: 4, 3: 33, length: 3, unrelated: 'foo' } +// 元々インデックス 0 が存在しなかったため、インデックス 2 は削除される +// 長さが 3 であるため、インデックス 3 は変更されない +``` + ## 仕様書 {{Specifications}} @@ -85,6 +107,10 @@ console.log(numbers[0]); // 3 ## 関連情報 +- [`Array.prototype.reverse` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.join()")}} - {{jsxref("Array.prototype.sort()")}} +- {{jsxref("Array.prototype.toReversed()")}} - {{jsxref("TypedArray.prototype.reverse()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/shift/index.md b/files/ja/web/javascript/reference/global_objects/array/shift/index.md index e28fd0262a6476..56903b7137d028 100644 --- a/files/ja/web/javascript/reference/global_objects/array/shift/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/shift/index.md @@ -2,34 +2,39 @@ title: Array.prototype.shift() slug: Web/JavaScript/Reference/Global_Objects/Array/shift l10n: - sourceCommit: cf607d68522cd35ee7670782d3ee3a361eaef2e4 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`shift()`** メソッドは、配列から**最初**の要素を取り除き、その要素を返します。このメソッドは配列の長さを変えます。 +**`shift()`** は {{jsxref("Array")}} インスタンスのメソッドで、配列から**最初**の要素を取り除き、その要素を返します。このメソッドは配列の長さを変えます。 {{EmbedInteractiveExample("pages/js/array-shift.html")}} ## 構文 -```js -shift(); +```js-nolint +shift() ``` +### 引数 + +なし。 + ### 返値 配列から取り除かれた要素を返します。配列が空の場合は、{{jsxref("undefined")}} を返します。 ## 解説 -`shift()` メソッドは 0 番目の位置の要素を取り除き、続く位置の値を小さい方向にずらします。そして、削除された値を返します。{{jsxref("Array/length", "length")}} プロパティが 0 の場合、{{jsxref("undefined")}} を返します。 +`shift()` メソッドは 0 番目の位置の要素を取り除き、続く位置の値を小さい方向にずらします。 +そして、削除された値を返します。{{jsxref("Array/length", "length")}} プロパティが 0 の場合、{{jsxref("undefined")}} を返します。 {{jsxref("Array/pop", "pop()")}} メソッドは `shift()` と似た動作をしますが、こちらは配列の末尾の要素に適用されます。 -`shift()` メソッドは変更を行うメソッドです。長さと `this` の内容を変更します。 `this` の値を変化させず、最初の要素を取り除いた新しい配列を返したい場合は、代わりに [`arr.slice(1)`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) を使用することができます。 +`shift()` メソッドは[変更メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#コピーメソッドと変更メソッド)です。長さと `this` の内容を変更します。 `this` の値を変化させず、最初の要素を取り除いた新しい配列を返したい場合は、代わりに [`arr.slice(1)`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) を使用することができます。 -`Array.prototype.shift()` は意図的に汎用性を持たせています。つまり、このメソッドは配列に類似したオブジェクトに対して呼び出すこともできます。ゼロから始まる数値プロパティであり、連続した連なりの最後を反映している `length` プロパティを含まないオブジェクトでは効果がないかもしれません。 +`shift()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。文字列も配列風ですが、文字列は不変であるため、このメソッドを適用するのは適切ではありません。 ## 例 @@ -40,7 +45,7 @@ shift(); ```js const myFish = ["angel", "clown", "mandarin", "surgeon"]; -console.log("myFish before:", JSON.stringify(myFish)); +console.log("myFish 処理前:", myFish); // myFish 処理前: ['angel', 'clown', 'mandarin', 'surgeon'] const shifted = myFish.shift(); @@ -52,17 +57,39 @@ console.log("取り除いた要素:", shifted); // 取り除いた要素: angel ``` -### shift() メソッドの while ループ内での使用する +### shift() メソッドの while ループ内での使用 shift() メソッドは時に、 while 文の条件内において用いられます。以下のコードでは、要素がすべて無くなるまで、反復処理のたびにその配列内の次の要素を取り除きます。 ```js -const names = ["Andrew", "Edward", "Paul", "Chris", "John"]; +const names = ["Andrew", "Tyrone", "Paul", "Maria", "Gayatri"]; while (typeof (i = names.shift()) !== "undefined") { console.log(i); } -// Andrew, Edward, Paul, Chris, John +// Andrew, Tyrone, Paul, Maria, Gayatri +``` + +### 配列以外のオブジェクトに対する shift() の呼び出し + +`shift()` メソッドは `this` の `length` プロパティを読み込みます。[正規化された長さ](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#length_プロパティの正規化)が 0 の場合、`length` は再び `0` に設定されます（以前は負の値または `undefined` であった可能性があります）。そうでない場合は、 `0` のプロパティを返し、残りのプロパティは左に 1 つシフトされます。 `length` プロパティは 1 つデクリメントされます。 + +```js +const arrayLike = { + length: 3, + unrelated: "foo", + 2: 4, +}; +console.log(Array.prototype.shift.call(arrayLike)); +// undefined。空のスロットであるため +console.log(arrayLike); +// { '1': 4, length: 2, unrelated: 'foo' } + +const plainObj = {}; +// length プロパティがないため、 length は 0 +Array.prototype.shift.call(plainObj); +console.log(plainObj); +// { length: 0 } ``` ## 仕様書 @@ -75,7 +102,10 @@ while (typeof (i = names.shift()) !== "undefined") { ## 関連情報 +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.push()")}} - {{jsxref("Array.prototype.pop()")}} - {{jsxref("Array.prototype.unshift()")}} - {{jsxref("Array.prototype.concat()")}} +- {{jsxref("Array.prototype.splice()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/slice/index.md b/files/ja/web/javascript/reference/global_objects/array/slice/index.md index a74770f029a5cc..412751f427e3bf 100644 --- a/files/ja/web/javascript/reference/global_objects/array/slice/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/slice/index.md @@ -2,44 +2,37 @@ title: Array.prototype.slice() slug: Web/JavaScript/Reference/Global_Objects/Array/slice l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a --- {{JSRef}} -**`slice()`** メソッドは、配列の一部を `start` から `end` （`end` は含まれない）までの範囲で、選択した新しい配列オブジェクトに[シャローコピー](/ja/docs/Glossary/Shallow_copy)して返します。ここで `start` と `end` はその配列に含まれる項目の添字を表します。元の配列は変更されません。 +**`slice()`** は {{jsxref("Array")}} インスタンスのメソッドで、配列の一部を `start` から `end` （`end` は含まれない）までの範囲で、選択した新しい配列オブジェクトに[シャローコピー](/ja/docs/Glossary/Shallow_copy)して返します。 +ここで `start` と `end` はその配列に含まれる項目のインデックスを表します。元の配列は変更されません。 {{EmbedInteractiveExample("pages/js/array-slice.html", "taller")}} ## 構文 -```js -slice(); -slice(start); -slice(start, end); +```js-nolint +slice() +slice(start) +slice(start, end) ``` ### 引数 - `start` {{optional_inline}} - - - : 取り出しの開始位置を示す 0 から始まる位置です。 - - 負の位置を使って、列の末尾からのオフセットを指定することができます。`slice(-2)` は列の最後の 2 つの要素を取り出します。 - - `start` が指定されなかった場合、 `slice` は位置 `0` から開始します。 - - `start` が列の位置の範囲よりも大きい場合は、空の配列が返されます。 - + - : 抽出を始める位置のゼロから始まるインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 + - インデックスが負の場合、配列の末尾からさかのぼって数えます。 `start < 0` の場合、 `start + array.length` が使用されます。 + - `start < -array.length` または `start` が省略された場合は `0` が使用されます。 + - `start >= array.length` の場合、何も抽出されません。 - `end` {{optional_inline}} - - - : 返される配列から除外される最初の要素の位置です。 `slice` は `end` 自体は含めず、その直前まで取り出します。例えば、 `slice(1,4)` は 2 番目から 4 番目までの要素 (位置がそれぞれ 1, 2, 3 番目の要素) を取り出します。 - - 負の位置を使って、列の終わりからのオフセットとして指定することができます。 `slice(2,-1)` は列の 3 番目から、最後から 2 番目までの要素を取り出します。 - - `end` が省略された場合、 `slice` は列の最後 (`arr.length`) までを取り出します。 - - `end` がシーケンスの長さを超えた場合も、`slice` はシーケンスの最後 (`arr.length`) までを取り出します。 + - : 抽出し終える位置のゼロから始まるインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 `slice()` は `end` を含まず、その直前までを抽出します。 + - インデックスが負の場合、配列の末尾からさかのぼって数えます。 `end < 0` の場合、 `end + array.length` が使用されます。 + - `end < -array.length` の場合は `0` が使用されます。 + - `end >= array.length` または `end` が省略された場合は `array.length` が使用され、最後まですべての要素が抽出されます。 + - 正規化後に `end` が `start` より前か同じ位置になった場合、何も抽出されません。 ### 返値 @@ -47,12 +40,11 @@ slice(start, end); ## 解説 -`slice` は元の配列を変更せず、元の配列から要素を[シャローコピー](/ja/docs/Glossary/Shallow_copy)した新しい配列を返します。元の配列の要素は以下のように返される配列にコピーされます。 +`slice()` メソッドは[コピーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#copying_methods_and_mutating_methods)です。これは `this` を変更するのではなく、元の配列と同じ要素を格納した[シャローコピー](/ja/docs/Glossary/Shallow_copy)を返します。 -- (実際のオブジェクトではない) オブジェクトの参照については、`slice` はオブジェクトの参照を新しい配列にコピーします。元の配列も新しい配列も同じオブジェクトを参照します。参照されたオブジェクトが修正された場合、その変更は新しい配列と元の配列の両方に現れます。 -- ({{jsxref("String")}}, {{jsxref("Number")}}, {{jsxref("Boolean")}} オブジェクトではなく) 文字列、数値、論理値では、`slice` は値を新しい配列にコピーします。一方の配列の文字列や数値に変更を加えても、他の配列に影響はしません。 +`slice()` メソッドは空のスロットを保持します。スライスされた部分が[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)の場合、返す配列も疎配列になります。 -一方の配列に新しい要素が追加されても、他方の配列に影響はしません。 +`slice()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 ## 例 @@ -62,8 +54,8 @@ slice(start, end); const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; const citrus = fruits.slice(1, 3); -// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] -// citrus contains ['Orange','Lemon'] +// fruits には ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] が含まれる +// citrus には ['Orange','Lemon'] が含まれる ``` ### slice の使用 @@ -80,32 +72,29 @@ const myHonda = { const myCar = [myHonda, 2, "cherry condition", "purchased 1997"]; const newCar = myCar.slice(0, 2); -// myCar, newCar と両方の要素から参照されている myHonda の color の -// 値を書きだす。 -console.log("myCar = ", myCar); -console.log("newCar = ", newCar); -console.log("myCar[0].color = ", myCar[0].color); -console.log("newCar[0].color = ", newCar[0].color); +console.log("myCar =", myCar); +console.log("newCar =", newCar); +console.log("myCar[0].color =", myCar[0].color); +console.log("newCar[0].color =", newCar[0].color); // myHonda の色を変える。 myHonda.color = "purple"; -console.log("The new color of my Honda is ", myHonda.color); +console.log("The new color of my Honda is", myHonda.color); -// 両方の要素から参照されている myHonda の color を書き出す。 -console.log("myCar[0].color = ", myCar[0].color); -console.log("newCar[0].color = ", newCar[0].color); +console.log("myCar[0].color =", myCar[0].color); +console.log("newCar[0].color =", newCar[0].color); ``` このスクリプトの出力は次の様になります。 -``` +```plain myCar = [ { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } }, 2, 'cherry condition', 'purchased 1997' ] -newCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2] +newCar = [ { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } }, 2 ] myCar[0].color = red newCar[0].color = red The new color of my Honda is purple @@ -113,25 +102,29 @@ myCar[0].color = purple newCar[0].color = purple ``` -### 配列風オブジェクト +### 配列以外のオブジェクトに対する slice() の呼び出し -`slice` メソッドを呼び出すことで、配列風オブジェクトやコレクションを新しい配列に変換することができます。メソッドをオブジェクトに {{jsxref("Function.prototype.bind", "bind")}} するだけです。配列風オブジェクトの一例として、{{jsxref("Functions/arguments", "arguments")}} が挙げられます。以下に例を示します。 +`slice()` メソッドは `this` の `length` プロパティを読み込みます。そして、 `start` から `end` までの整数キーのプロパティを読み込み、新しく作成した配列に定義します。 ```js -function list() { - return Array.prototype.slice.call(arguments); -} - -const list1 = list(1, 2, 3); // [1, 2, 3] +const arrayLike = { + length: 3, + 0: 2, + 1: 3, + 2: 4, + 3: 33, // length が 3 であるので slice() から無視される +}; +console.log(Array.prototype.slice.call(arrayLike, 1, 3)); +// [ 3, 4 ] ``` -結合 (Binding) は {{jsxref("Function")}} の {{jsxref("Function.prototype.call", "call()")}} メソッドを用いて行うことができますし、`[].slice.call(arguments)` を `Array.prototype.slice.call` の代わりに使って減らすこともできます。 +### slice() を用いて配列風オブジェクトを配列に変換 -いずれにせよ、{{jsxref("Function.prototype.bind", "bind")}} を使用することで簡略化することができます。 +`slice()` メソッドは {{jsxref("Function/bind", "bind()")}} や {{jsxref("Function/call", "call()")}} と共に、配列風オブジェクトを配列に変換するユーティリティメソッドを作成するためによく使われます。 ```js -const unboundSlice = Array.prototype.slice; -const slice = Function.prototype.call.bind(unboundSlice); +// slice() は第 1 引数として `this` が渡されて呼び出される +const slice = Function.prototype.call.bind(Array.prototype.slice); function list() { return slice(arguments); @@ -140,6 +133,14 @@ function list() { const list1 = list(1, 2, 3); // [1, 2, 3] ``` +### 疎配列に対する slice() の使用 + +`slice()` から返される配列は、元の配列が疎配列であれば疎配列になります。 + +```js +console.log([1, 2, , 4, 5].slice(1, 4)); // [2, empty, 4] +``` + ## 仕様書 {{Specifications}} @@ -150,6 +151,12 @@ const list1 = list(1, 2, 3); // [1, 2, 3] ## 関連情報 +- [`Array.prototype.slice` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} +- {{jsxref("Array.prototype.pop()")}} +- {{jsxref("Array.prototype.shift()")}} +- {{jsxref("Array.prototype.concat()")}} - {{jsxref("Array.prototype.splice()")}} -- {{jsxref("Function.prototype.call()")}} -- {{jsxref("Function.prototype.bind()")}} +- {{jsxref("TypedArray.prototype.slice()")}} +- {{jsxref("String.prototype.slice()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/some/index.md b/files/ja/web/javascript/reference/global_objects/array/some/index.md index 8e77fcd1219d12..37f88952c2622c 100644 --- a/files/ja/web/javascript/reference/global_objects/array/some/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/some/index.md @@ -2,85 +2,58 @@ title: Array.prototype.some() slug: Web/JavaScript/Reference/Global_Objects/Array/some l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: 28232983aa91026e50ec4300ddcb1b1d894a93b9 --- {{JSRef}} -**`some()`** メソッドは、指定された関数で実装されているテストに、配列の中の少なくとも 1 つの要素が 合格するかどうかを判定します。配列の中で指定された関数が true を返す要素を見つけた場合は true を返し、そうでない場合は false を返します。それ以外の場合は false を返します。配列は変更しません。 +**`some()`** は {{jsxref("Array")}} インスタンスのメソッドで、指定された関数で実装されているテストに、配列の中の少なくとも 1 つの要素が合格するかどうかを判定します。配列の中で指定された関数が true を返す要素を見つけた場合は true を返し、そうでない場合は false を返します。それ以外の場合は false を返します。配列は変更しません。 {{EmbedInteractiveExample("pages/js/array-some.html")}} ## 構文 -```js -// アロー関数 -some((element) => { - /* … */ -}); -some((element, index) => { - /* … */ -}); -some((element, index, array) => { - /* … */ -}); - -// コールバック関数 -some(callbackFn); -some(callbackFn, thisArg); - -// インラインコールバック関数 -some(function (element) { - /* … */ -}); -some(function (element, index) { - /* … */ -}); -some(function (element, index, array) { - /* … */ -}); -some(function (element, index, array) { - /* … */ -}, thisArg); +```js-nolint +some(callbackFn) +some(callbackFn, thisArg) ``` ### 引数 - `callbackFn` - - : 各要素に対してテストを実行する関数です。 - - この関数は以下の引数と共に呼び出されます。 - + - : 配列のそれぞれの要素に対して実行する関数です。この関数は、要素がテストに合格したことを示すには[真値](/ja/docs/Glossary/Truthy)を、そうでない場合は[偽値](/ja/docs/Glossary/Falsy)を返します。この関数は以下の引数で呼び出されます。 - `element` - - : 配列内で現在処理されている要素です。 + - : 配列内で処理中の現在の要素です。 - `index` - - : 現在処理されている要素の添字です。 + - : 配列内で処理中の現在の要素のインデックスです。 - `array` - : `some()` が呼び出された配列です。 - `thisArg` {{optional_inline}} - - : `callbackFn` を実行するときに `this` として使用するオブジェクトです。 + - : `callbackFn` を実行する際に `this` として使用される値。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。 ### 返値 -配列内の少なくとも 1 つの要素でコールバック関数が{{Glossary("truthy", "真値")}}を返した場合は **`true`** です。それ以外は **`false`** です。 +配列の要素のいずれかで `callbackFn` が{{Glossary("truthy", "真値")}}を返した場合は、直ちに `true` を返します。それ以外の場合は `false` です。 ## 解説 -`some()` は、与えられた `callbackFn` 関数を、配列に含まれる各要素に対して一度ずつ、`callbackFn` が「真値」（論理型に変換した際に真となる値）を返す要素が見つかるまで呼び出します。そのような要素が見つかると、 `some()` はただちに `true` を返します。見つからなかった場合、`some()` は `false` を返します。`callbackFn` は値が代入されている配列の要素に対してのみ呼び出されます。つまり、すでに削除された要素や、まだ値が代入されていない要素に対しては呼び出されません。 +`some()` メソッドは[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)です。指定された `callbackFn` 関数を配列の各要素に対して一度ずつ、 `callbackFn` が[真値](/ja/docs/Glossary/Truthy)を返すまで呼び出します。該当する要素が見つかった場合は、 `some()` は直ちに `true` を返し、配列の反復処理を中止します。一方、 `callbackFn` がすべての要素に対して[偽値](/ja/docs/Glossary/Falsy)を返した場合、 `some()` は `false` を返します。 -`callbackFn` は、要素の値、要素のインデックス、走査されている Array オブジェクトという 3 つの引数を伴って呼び出されます。 +`some()` は数学の量化子 "there exists" のような働きをします。特に、空配列の場合、どのような条件でも `false` を返します。 -`thisArg` 引数が `some()` に与えられた場合は、それがコールバックのの `this` として使用されます。そうでない場合は 、{{jsxref("undefined")}} 値が `this` として使用されます。 `callbackFn` から最終的に見られる `this` の値は、[関数から見た `this` の決定に関する一般的なルール](/ja/docs/Web/JavaScript/Reference/Operators/this)によって決定されます。 +`callbackFn` は値が割り当てられている配列インデックスに対してのみ呼び出されます。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)の空のスロットに対しては呼び出されません。 -`some()` は呼び出された配列を変化させません。 +`some()` は呼び出し元の配列を変更しませんが、 `callbackFn` として指定された関数は配列を変更することができます。ただし、配列の長さは `callbackFn` を最初に呼び出す前に保存されることに注意してください。したがって、 -`some()` によって処理される要素の範囲は、 `callbackFn` が最初に呼び出される前に設定されます。`some()` の呼び出しが開始された後に追加された要素に対しては、`callbackFn` は呼び出されません。既存の配列要素が変更されたり、削除されたりした場合、`callbackFn` に渡される値は `some()` がそれらを訪れた時点での値になり、削除された要素に対して呼び出されることはありません。 +- `callbackFn` は、 `some()` の呼び出しを始めたときの配列の長さを超えて追加された要素にはアクセスしません。 +- 既に処理したインデックスを変更しても、 `callbackFn` が再度呼び出されることはありません。 +- まだ処理していない既存の配列要素が `callbackFn` によって変更された場合、`callbackFn` に渡される値はその要素が取得された時点での値になります。[削除](/ja/docs/Web/JavaScript/Reference/Operators/delete)された要素は処理されません。 -> **警告:** 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。 +> **警告:** 上記のように進行中の配列に対して変更を行うと、理解しにくいコードになることが多いので、（特別な場合を除いて）避けるのが一般的です。 -> **メモ:** このメソッドは空の配列ではあらゆる条件式に対して `false` を返します。 +`some()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 ## 例 @@ -121,19 +94,6 @@ checkAvailability(fruits, "kela"); // false checkAvailability(fruits, "banana"); // true ``` -### アロー関数を使ったある値が存在するかどうかのチェック - -```js -const fruits = ["apple", "banana", "mango", "guava"]; - -function checkAvailability(arr, val) { - return arr.some((arrVal) => val === arrVal); -} - -checkAvailability(fruits, "kela"); // false -checkAvailability(fruits, "banana"); // true -``` - ### 任意の値の論理値への変換 ```js @@ -153,6 +113,32 @@ getBoolean(1); // true getBoolean("true"); // true ``` +### 疎配列に対する some() の使用 + +`some()` は空のスロットでは処理を実行しません。 + +```js +console.log([1, , 3].some((x) => x === undefined)); // false +console.log([1, , 1].some((x) => x !== 1)); // false +console.log([1, undefined, 1].some((x) => x !== 1)); // true +``` + +### 配列以外のオブジェクトに対する some() の呼び出し + +`some()` メソッドは `this` の `length` プロパティを読み込み、キーが `length` より小さい非負の整数である各プロパティに、すべてアクセスするか `callbackFn` が `true` を返すまでアクセスします。 + +```js +const arrayLike = { + length: 3, + 0: "a", + 1: "b", + 2: "c", + 3: 3, // length が 3 .なので some() 空は無視される +}; +console.log(Array.prototype.some.call(arrayLike, (x) => typeof x === "number")); +// false +``` + ## 仕様書 {{Specifications}} @@ -164,7 +150,10 @@ getBoolean("true"); // true ## 関連情報 - [`Array.prototype.some` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.every()")}} - {{jsxref("Array.prototype.forEach()")}} - {{jsxref("Array.prototype.find()")}} +- {{jsxref("Array.prototype.includes()")}} - {{jsxref("TypedArray.prototype.some()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/sort/index.md b/files/ja/web/javascript/reference/global_objects/array/sort/index.md index a5ac8853e0c3d1..66d3b866c6631b 100644 --- a/files/ja/web/javascript/reference/global_objects/array/sort/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/sort/index.md @@ -7,7 +7,7 @@ l10n: {{JSRef}} -**`sort()`** は {{jsxref("Array")}} のメソッドで、配列の要素を[その場](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0)でソートし、ソートされた同じ配列の参照を返します。既定のソート順は昇順で、要素を文字列に変換してから、 UTF-16 コード単位の値の並びとして比較します。 +**`sort()`** は {{jsxref("Array")}} のメソッドで、配列の要素を[その場 (in-place)](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0) でソートし、ソートされた同じ配列の参照を返します。既定のソート順は昇順で、要素を文字列に変換してから、 UTF-16 コード単位の値の並びとして比較します。 ソートの時間的・空間的予測値は実装に依存するため、保証はできません。 @@ -89,7 +89,7 @@ function compareNumbers(a, b) { } ``` -`sort()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#generic_array_methods)です。このメソッドは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。文字列も配列風ですが、文字列は不変なので、このメソッドを適用するのには適していません。 +`sort()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。このメソッドは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。文字列も配列風ですが、文字列は不変なので、このメソッドを適用するのには適していません。 ## 例 diff --git a/files/ja/web/javascript/reference/global_objects/array/splice/index.md b/files/ja/web/javascript/reference/global_objects/array/splice/index.md index a7976586c48672..3f06118401d6a4 100644 --- a/files/ja/web/javascript/reference/global_objects/array/splice/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/splice/index.md @@ -2,44 +2,44 @@ title: Array.prototype.splice() slug: Web/JavaScript/Reference/Global_Objects/Array/splice l10n: - sourceCommit: 9b38f886d21c5d0a428f58acb20c4d0fc6c2e098 + sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a --- {{JSRef}} -**`splice()`** メソッドは、[その場](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0)で既存の要素を取り除いたり、置き換えたり、新しい要素を追加したりすることで、配列の内容を変更します。 +**`splice()`** は {{jsxref("Array")}} インスタンスのメソッドは、[その場 (in-place)](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0) で既存の要素を取り除いたり、置き換えたり、新しい要素を追加したりすることで、配列の内容を変更します。 + +元の配列を変更せずに、ある部分を除去したり置き換えたりした新しい配列を作成するには {{jsxref("Array/toSpliced", "toSpliced()")}} を使用してください。配列を変更せずに配列の一部にアクセスするには {{jsxref("Array/slice", "slice()")}} を参照してください。 {{EmbedInteractiveExample("pages/js/array-splice.html")}} ## 構文 -```js -splice(start); -splice(start, deleteCount); -splice(start, deleteCount, item1); -splice(start, deleteCount, item1, item2, itemN); +```js-nolint +splice(start) +splice(start, deleteCount) +splice(start, deleteCount, item1) +splice(start, deleteCount, item1, item2) +splice(start, deleteCount, item1, item2, /* …, */ itemN) ``` ### 引数 - `start` - - : 配列を変更する先頭の位置です。 - - 配列の長さより大きい場合、`start` は配列の長さに設定されます。 - この場合、削除される要素はありませんが、このメソッドは追加関数として動作し、提供された項目の数だけ要素を追加します。 - - 値が負の数の場合は、配列の末尾から要素数だけ戻ったところから始まります。 - （`-1` が原点で、`-n` は最後の要素から `n` 番目であることを意味し、したがって位置が `array.length - n` であるのと同等です）。 - `start` が `-Infinity` であった場合は、 `0` の位置から始まります。 + - : 配列の変更を始める位置のゼロから始まるインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 + - インデックスが負の場合、配列の末尾からさかのぼって数えます。 `start < 0` の場合、 `start + array.length` が使用されます。 + - `start < -array.length` の場合は `0` が使用されます。 + - `start >= array.length` の場合、要素は削除されませんが、メソッドは追加関数として動作し、指定された数だけ要素を追加します。 + - `start` が省略された場合（そして `splice()` が引数なしで呼び出された場合）、何も削除されません。これは `undefined` を渡すと `0` に変換されるのとは異なります。 - `deleteCount` {{optional_inline}} - : 配列の `start` の位置から取り除く古い要素の個数を示す整数です。 - `deleteCount` 引数が省略された場合、または `array.length - start` 以上 (つまり、`start` から始めて配列に残っている要素の数以上) の場合、`start` 以降のすべての要素が取り除かれます。ただし、 `item1` 引数が存在する場合は省略できません。 + `deleteCount` が省略された場合、または `deleteCount` の値が `start` で指定した位置より後の要素数以上の場合、 `start` から配列の末尾までのすべての要素が削除されます。ただし、任意の `itemN` 引数を渡したい場合は、 `start` より後の要素をすべて削除するために `deleteCount` として `Infinity` を渡す必要があります。明示的に `undefined` を渡すと、[変換](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#integer_conversion)されて `0` になるからです。 - `deleteCount` が `0` または負の数の場合、どの要素も取り除かれません。この場合、少なくとも 1 つの新しい要素を指定する必要があります (以下参照)。 + `deleteCount` が `0` または負の数の場合、どの要素も取り除かれません。この場合、少なくとも 1 つの新しい要素を指定する必要があります（以下参照）。 - `item1`, …, `itemN` {{optional_inline}} @@ -57,7 +57,11 @@ splice(start, deleteCount, item1, item2, itemN); ## 解説 -取り除こうとする要素数と異なる数の要素を挿入するように指定した場合、配列の `length` は変更されます。 +`splice()` メソッドは[変更メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#コピーメソッドと変更メソッド)です。 `this` の内容を変更します。指定した挿入する要素数と除去される要素数が異なる場合、配列の `length` も変更されます。同時に、 [`@@species`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/@@species) を使用して、返す新しい配列インスタンスを作成します。 + +削除された部分が[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)の場合、 `splice()` が返す配列も疎配列になり、対応するインデックスは空のスロットになります。 + +`splice()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。このメソッドは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。文字列も配列風ですが、文字列は不変なので、このメソッドを適用するのには適していません。 ## 例 @@ -87,8 +91,8 @@ const removed = myFish.splice(2, 0, "drum", "guitar"); const myFish = ["angel", "clown", "drum", "mandarin", "sturgeon"]; const removed = myFish.splice(3, 1); -// removed は ["mandarin"] // myFish は ["angel", "clown", "drum", "sturgeon"] +// removed は ["mandarin"] ``` ### 2 の位置から 1 つ取り除いて "trumpet" を挿入 @@ -141,6 +145,33 @@ const removed = myFish.splice(2); // removed は ["mandarin", "sturgeon"] ``` +### 疎配列に対する splice() の使用 + +`splice()` メソッドは疎配列であることを維持します。 + +```js +const arr = [1, , 3, 4, , 6]; +console.log(arr.splice(1, 2)); // [empty, 3] +console.log(arr); // [1, 4, empty, 6] +``` + +### 配列以外のオブジェクトに対する splice() の呼び出し + +`splice()` メソッドは `this` の `length` プロパティを読み込みます。そして、必要に応じて整数キーのプロパティと `length` プロパティを更新します。 + +```js +const arrayLike = { + length: 3, + unrelated: "foo", + 0: 5, + 2: 4, +}; +console.log(Array.prototype.splice.call(arrayLike, 0, 1, 2, 3)); +// [ 5 ] +console.log(arrayLike); +// { '0': 2, '1': 3, '3': 4, length: 4, unrelated: 'foo' } +``` + ## 仕様書 {{Specifications}} @@ -151,6 +182,12 @@ const removed = myFish.splice(2); ## 関連情報 -- {{jsxref("Array.prototype.push()", "push()")}} / {{jsxref("Array.prototype.pop()", "pop()")}}— 配列の末尾の要素の追加/削除 -- {{jsxref("Array.prototype.unshift()", "unshift()")}} / {{jsxref("Array.prototype.shift()", "shift()")}}— 配列の先頭の要素の追加/削除 -- {{jsxref("Array.prototype.concat()", "concat()")}}— 配列に他の配列や値をつないでできた新しい配列を返す +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} +- {{jsxref("Array.prototype.concat()")}} +- {{jsxref("Array.prototype.push()")}} +- {{jsxref("Array.prototype.pop()")}} +- {{jsxref("Array.prototype.shift()")}} +- {{jsxref("Array.prototype.slice()")}} +- {{jsxref("Array.prototype.toSpliced()")}} +- {{jsxref("Array.prototype.unshift()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/tosorted/index.md b/files/ja/web/javascript/reference/global_objects/array/tosorted/index.md index 5c70e982ddce1c..c9ac6b5767d552 100644 --- a/files/ja/web/javascript/reference/global_objects/array/tosorted/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/tosorted/index.md @@ -35,7 +35,7 @@ toSorted(compareFn) `compareFn` 引数の情報については {{jsxref("Array/sort", "sort()")}} を参照してください。 -[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)が使用された場合、 `toSorted()` メソッドは空のスロットを `undefined` という値があるものとして反復処理します。 +[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)が使用された場合、 `toSorted()` メソッドは空のスロットを `undefined` という値があるものとして反復処理します。 `toSorted()` メソッドは[汎用](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。 `this` の値が `length` プロパティを持っており、整数のキーのプロパティがあることのみを期待します。 diff --git a/files/ja/web/javascript/reference/global_objects/array/tospliced/index.md b/files/ja/web/javascript/reference/global_objects/array/tospliced/index.md index fa89f7bce19d5b..2c190656f87d6d 100644 --- a/files/ja/web/javascript/reference/global_objects/array/tospliced/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/tospliced/index.md @@ -51,7 +51,7 @@ toSpliced(start, deleteCount, item1, item2, /* …, */ itemN) `toSpliced()` メソッドは `splice()` と同様に、一度に複数のことを行います。指定されたインデックスの位置から、指定された数の要素を配列から除去し、同じインデックスの位置に指定された要素を挿入します。しかし、元の配列を変更するのではなく、新しい配列を返します。したがって、削除された要素はこのメソッドからは返されません。 -`toSpliced()` メソッドは決して[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)を生成しません。疎配列の場合、空のスロットは新しい配列の `undefined` に置き換わります。 +`toSpliced()` メソッドは決して[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)を生成しません。疎配列の場合、空のスロットは新しい配列の `undefined` に置き換わります。 `toSpliced()` メソッドは[汎用](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。 `this` の値が `length` プロパティを持っており、整数のキーのプロパティがあることのみを期待します。 diff --git a/files/ja/web/javascript/reference/global_objects/array/tostring/index.md b/files/ja/web/javascript/reference/global_objects/array/tostring/index.md index 353ebd1008ad07..013d6b50ec9d6d 100644 --- a/files/ja/web/javascript/reference/global_objects/array/tostring/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/tostring/index.md @@ -2,21 +2,25 @@ title: Array.prototype.toString() slug: Web/JavaScript/Reference/Global_Objects/Array/toString l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: 5c3c25fd4f2fbd7a5f01727a65c2f70d73f1880a --- {{JSRef}} -**`toString()`** メソッドは、指定された配列とその要素を表す文字列を返します。 +**`toString()`** は {{jsxref("Array")}} インスタンスのメソッドで、指定された配列とその要素を表す文字列を返します。 -{{EmbedInteractiveExample("pages/js/array-tostring.html","shorter")}} +{{EmbedInteractiveExample("pages/js/array-tostring.html", "shorter")}} ## 構文 -```js -toString(); +```js-nolint +toString() ``` +### 引数 + +なし。 + ### 返値 配列の要素の文字列表現です。 @@ -35,15 +39,55 @@ console.log(Array.prototype.toString.call({ join: () => 1 })); // 1 と出力 配列を文字列値として表す必要がある場合や、配列が文字列の結合として参照されるとき、 JavaScript は `toString` メソッドを自動的に呼び出します。 +`Array.prototype.toString` は他の配列も含めて、再帰的にそれぞれの要素を文字列に変換します。Array.prototype.toString` が返す文字列には区切り文字がないので、入れ子配列は平坦化されたように見えます。 + +```js +const matrix = [ + [1, 2, 3], + [4, 5, 6], + [7, 8, 9], +]; + +console.log(matrix.toString()); // 1,2,3,4,5,6,7,8,9 +``` + +配列が循環している（コンテナーそのものである要素を格納している）場合、ブラウザーは循環参照を無視することで無限の再帰を避けます。 + +```js +const arr = []; +arr.push(1, [3, arr, 4], 2); +console.log(arr.toString()); // 1,3,,4,2 +``` + ## 例 -### toString の使用 +### toString() の使用 ```js const array1 = [1, 2, "a", "1a"]; -console.log(array1.toString()); -// 期待される出力: "1,2,a,1a" +console.log(array1.toString()); // "1,2,a,1a" +``` + +### 疎配列における toString() の使用 + +`join()` の動作に従い、 `toString()` は空のスロットを `undefined` と同じように扱い、余分な区切り文字を生成します： + +```js +console.log([1, , 3].toString()); // '1,,3' +``` + +### 配列以外のオブジェクトに対する toString() の呼び出し + +`toString()` は[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#generic_array_methods)です。このメソッドは `this` が `join()` メソッドを持っていることを期待します。ない場合は、代わりに `Object.prototype.toString()` を使用します。 + +```js +console.log(Array.prototype.toString.call({ join: () => 1 })); +// 1; a number +console.log(Array.prototype.toString.call({ join: () => undefined })); +// undefined +console.log(Array.prototype.toString.call({ join: "not function" })); +// "[object Object]" ``` ## 仕様書 @@ -56,4 +100,9 @@ console.log(array1.toString()); ## 関連情報 +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.join()")}} +- {{jsxref("Array.prototype.toLocaleString()")}} +- {{jsxref("TypedArray.prototype.toString()")}} +- {{jsxref("String.prototype.toString()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/unshift/index.md b/files/ja/web/javascript/reference/global_objects/array/unshift/index.md index 1a2858c73db647..204dd52a0021a4 100644 --- a/files/ja/web/javascript/reference/global_objects/array/unshift/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/unshift/index.md @@ -2,26 +2,27 @@ title: Array.prototype.unshift() slug: Web/JavaScript/Reference/Global_Objects/Array/unshift l10n: - sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`unshift()`** メソッドは、配列の最初に 1 つ以上の要素を追加し、新しい配列の長さを返します。 +**`unshift()`** は {{jsxref("Array")}} インスタンスのメソッドで、指定された要素を配列の先頭に追加し、新しい配列の長さを返します。 {{EmbedInteractiveExample("pages/js/array-unshift.html")}} ## 構文 -```js -unshift(element0); -unshift(element0, element1); -unshift(element0, element1, /* … ,*/ elementN); +```js-nolint +unshift() +unshift(element1) +unshift(element1, element2) +unshift(element1, element2, /* …, */ elementN) ``` ### 引数 -- `elementN` +- `element1`, …, `elementN` - : `arr` の先頭に追加する要素。 ### 返値 @@ -34,9 +35,7 @@ unshift(element0, element1, /* … ,*/ elementN); {{jsxref("Array.prototype.push()")}} は `unshift()` と似た動作をしますが、配列の末尾に対して行う点が異なります。 -`Array.prototype.unshift()` は意図的に汎用化されています。このメソッドは，配列に類似したオブジェクトに対して呼び出すことができます。 `length` プロパティ、すなわち連続の最後を示すゼロベースの数値プロパティがないオブジェクトでは、意味のある動作ができない可能性があります。 - -複数の要素が引数として渡された場合、引数として渡されたものと全く同じ順番で、オブジェクトの最初のチャンクに挿入されることに注意してください。したがって、 `unshift` を `n` 個の引数で 1 回呼び出すのと、1 個の引数で `n` 回（例えばループを使って）呼び出すのとでは同じ結果にはなりません。 +複数の要素が引数として渡された場合、引数として渡されたものと全く同じ順番で、オブジェクトの最初のチャンクに挿入されることに注意してください。したがって、 `unshift` を `n` 個の引数で **1 回**呼び出すのと、**1 個**の引数で `n` 回（例えばループを使って）呼び出すのとでは同じ結果にはなりません。 例をご覧ください。 @@ -57,6 +56,8 @@ console.log(arr); // [3, 2, 1, 4, 5, 6] ``` +`unshift()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。このメソッドは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。文字列も配列風ですが、文字列は不変なので、このメソッドを適用するのには適していません。 + ## 例 ### unshift の使用 @@ -77,6 +78,27 @@ arr.unshift([-7, -6], [-5]); // 新しい配列の長さは 8 // arr is [ [-7, -6], [-5], [-4, -3], -2, -1, 0, 1, 2 ] ``` +### 配列以外のオブジェクトに対する unshift() の呼び出し + +`unshift()` メソッドは `this` の `length` プロパティを読み込みます。 `0` から `length - 1` までの範囲にあるすべてのインデックスを、引数の数だけ右にシフトします（この数だけ値を増加します）。次に、 `0` から始めるには、各インデックスを `unshift()` に渡した引数で設定します。最後に、`length` を前回の長さに、前に追加した要素の数を加えた値に設定します。 + +```js +const arrayLike = { + length: 3, + unrelated: "foo", + 2: 4, +}; +Array.prototype.unshift.call(arrayLike, 1, 2); +console.log(arrayLike); +// { '0': 1, '1': 2, '4': 4, length: 5, unrelated: 'foo' } + +const plainObj = {}; +// length プロパティがないため、 length は 0 +Array.prototype.unshift.call(plainObj, 1, 2); +console.log(plainObj); +// { '0': 1, '1': 2, length: 2 } +``` + ## 仕様書 {{Specifications}} @@ -88,7 +110,10 @@ arr.unshift([-7, -6], [-5]); // 新しい配列の長さは 8 ## 関連情報 - [`Array.prototype.unshift` の修正を含むポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.push()")}} - {{jsxref("Array.prototype.pop()")}} - {{jsxref("Array.prototype.shift()")}} - {{jsxref("Array.prototype.concat()")}} +- {{jsxref("Array.prototype.splice()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/values/index.md b/files/ja/web/javascript/reference/global_objects/array/values/index.md index cc3bf5c18db9f6..2023096afd9a1a 100644 --- a/files/ja/web/javascript/reference/global_objects/array/values/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/values/index.md @@ -2,24 +2,28 @@ title: Array.prototype.values() slug: Web/JavaScript/Reference/Global_Objects/Array/values l10n: - sourceCommit: dadaa03da92fc616814454b761a6c783100f7e3b + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`values()`** メソッドは、配列の各インデックスの値を含む新しい「配列[イテレーター](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#イテレータープロトコル)」オブジェクトを返します。 +**`values()`** は {{jsxref("Array")}} インスタンスのメソッドで、配列の各インデックスの値を含む新しい「[配列イテレーター](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#イテレータープロトコル)」オブジェクトを返します。 {{EmbedInteractiveExample("pages/js/array-values.html")}} ## 構文 -```js -values(); +```js-nolint +values() ``` +### 引数 + +なし。 + ### 返値 -新しい反復可能なイテレーターオブジェクトです。 +新しい[反復可能なイテレーターオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)です。 ## 解説 @@ -29,6 +33,10 @@ values(); Array.prototype.values === Array.prototype[Symbol.iterator]; // true ``` +[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)に使用された場合、 `values()` メソッドは空のスロットを `undefined` の値である可能用に反復処理します。 + +`values()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。このメソッドは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 + ## 例 ### for...of ループを用いた反復処理 @@ -64,7 +72,7 @@ console.log(iterator.next().value); // undefined > **警告:** 配列イテレーターオブジェクトは、一回のみ使用可能なオブジェクトになります。再利用しないでください。 -`values()` で返される反復可能オブジェクトは再利用できません。 `next().done = true` または `currentIndex > length` になった場合、 [`for...of` ループは終了](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#interactions_between_the_language_and_iteration_protocols)し、それ以降の反復処理は効果がありません。 +`values()` で返される反復可能オブジェクトは再利用できません。 `next().done = true` または `currentIndex > length` になった場合、 [`for...of` ループは終了](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#言語と反復処理プロトコルの対話)し、それ以降の反復処理は効果がありません。 ```js const arr = ["a", "b", "c", "d", "e"]; @@ -111,6 +119,38 @@ arr[1] = "n"; console.log(iterator.next().value); // "n" ``` +### 疎配列の反復処理 + +`values()` は空のスロットを `undefined` であるかのように処理します。 + +```js +for (const element of [, "a"].values()) { + console.log(element); +} +// undefined +// 'a' +``` + +### 配列以外のオブジェクトに対する values() の呼び出し + +`values()` メソッドは `this` の `length` プロパティを読み込み、そのキーが `length` より小さい非負の整数である各プロパティにアクセスします。 + +```js +const arrayLike = { + length: 3, + 0: "a", + 1: "b", + 2: "c", + 3: "d", // length が 3 であるため values() からは無視される +}; +for (const entry of Array.prototype.values.call(arrayLike)) { + console.log(entry); +} +// a +// b +// c +``` + ## 仕様書 {{Specifications}} @@ -122,9 +162,10 @@ console.log(iterator.next().value); // "n" ## 関連情報 - [`Array.prototype.values` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) -- {{jsxref("Array.prototype.keys()")}} +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.entries()")}} -- {{jsxref("Array.prototype.forEach()")}} -- {{jsxref("Array.prototype.every()")}} -- {{jsxref("Array.prototype.some()")}} -- [ポリフィル](https://github.com/behnammodi/polyfill/blob/master/array.polyfill.js) +- {{jsxref("Array.prototype.keys()")}} +- [`Array.prototype[@@iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator) +- {{jsxref("TypedArray.prototype.values()")}} +- [反復処理プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols) diff --git a/files/ja/web/javascript/reference/global_objects/array/with/index.md b/files/ja/web/javascript/reference/global_objects/array/with/index.md index aaad58aa16e975..e44a809998dde5 100644 --- a/files/ja/web/javascript/reference/global_objects/array/with/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/with/index.md @@ -2,7 +2,7 @@ title: Array.prototype.with() slug: Web/JavaScript/Reference/Global_Objects/Array/with l10n: - sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de + sourceCommit: d78e56f238d41d5f1e050ed7b04179d2b657d573 --- {{JSRef}} @@ -35,11 +35,13 @@ arrayInstance.with(index, value) ## 解説 -with()` メソッドは、配列の指定された位置の値を変更し、指定されたインデックスの要素を指定された値で置き換えた新しい配列を返します。元の配列は変更しません。これにより、配列メソッドを連鎖させながら操作を行うことができます。 +`with()` メソッドは、配列の指定された位置の値を変更し、指定されたインデックスの要素を指定された値で置き換えた新しい配列を返します。元の配列は変更しません。これにより、配列メソッドを連鎖させながら操作を行うことができます。 -`with()` メソッドは決して[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)を生成しません。疎配列の場合、空のスロットは新しい配列の `undefined` に置き換わります。 +`with()` と {{jsxref("Array/at", "at()")}} を組み合わせることで、負のインデックスを用いた配列の書き込みと読み込み（それぞれ）ができます。 -`with()` メソッドは[汎用](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。 `this` の値が `length` プロパティを持っており、整数のキーのプロパティがあることのみを期待します。 +`with()` メソッドは決して[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)を生成しません。疎配列の場合、空のスロットは新しい配列の `undefined` に置き換わります。 + +`with()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。このメソッドは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。 ## 例 @@ -100,4 +102,5 @@ console.log(Array.prototype.with.call(arrayLike, 0, 1)); - {{jsxref("Array.prototype.toReversed()")}} - {{jsxref("Array.prototype.toSorted()")}} - {{jsxref("Array.prototype.toSpliced()")}} +- {{jsxref("Array.prototype.at()")}} - {{jsxref("TypedArray.prototype.with()")}} diff --git a/files/ja/web/javascript/reference/global_objects/function/@@hasinstance/index.md b/files/ja/web/javascript/reference/global_objects/function/@@hasinstance/index.md new file mode 100644 index 00000000000000..2ba650f7b9027f --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/function/@@hasinstance/index.md @@ -0,0 +1,76 @@ +--- +title: Function.prototype[@@hasInstance]() +slug: Web/JavaScript/Reference/Global_Objects/Function/@@hasInstance +l10n: + sourceCommit: 0891bd2199fabb1ec00dfe4765019d54f21d965c +--- + +{{JSRef}} + +{{jsxref("Function")}} インスタンスの **`[@@hasInstance]()`** メソッドは、コンストラクター関数がオブジェクトをそのコンストラクターのインスタンスの一つであると認識するかどうかを決定するデフォルトの手続きを定義します。これは、[`instanceof`](/ja/docs/Web/JavaScript/Reference/Operators/instanceof) 演算子から呼ばれます。 + +## 構文 + +```js-nolint +func[Symbol.hasInstance](value) +``` + +### 引数 + +- `value` + - : 判定を行うオブジェクトです。プリミティブ値に対しては常に `false` を返します。 + +### 返値 + +`func.prototype` が `value` のプロトタイプチェーン内に存在する場合は `true` を返し、そうでない場合は `false` を返します。`value` がオブジェクトではないか、`this` が関数でない場合は、常に `false` を返します。`this` が[バインド済み関数](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)である場合は、`value` およびもとになったターゲット関数における `instanceof` 判定の結果を返します。 + +### 例外 + +- {{jsxref("TypeError")}} + - : `this` がバインド済み関数ではなく、かつ `this.prototype` がオブジェクトではないとき投げられます。 + +## 説明 + +[`instanceof`](/ja/docs/Web/JavaScript/Reference/Operators/instanceof) 演算子は、右辺の値に [`[@@hasInstance]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance) メソッドが存在する場合は、常にこのメソッドを呼びます。すべての関数はデフォルトで `Function.prototype` を継承しているので、それらはすべてこの `[@@hasInstance]()` メソッドを持ちます。そのため、ほとんどの場合、右辺が関数であれば `Function.prototype[@@hasInstance]` メソッドが `instanceof` の挙動を定義します。このメソッドは、`instanceof` 演算子のデフォルトの挙動 (`constructor` が `@@hasInstance` を持たないときと同じアルゴリズム) を実装します。 + +ほとんどのメソッドと違い、`Function.prototype[@@hasInstance]()` プロパティは設定不可能で、書込不可能です。これは、バインド済み関数のもとになったターゲット関数を取得されるのを防ぐためのセキュリティ機能です。例として、[この StackOverflow での回答](https://stackoverflow.com/questions/38215027/trying-to-understand-the-official-es6-spec-regarding-symbol-hasinstance/38215392#38215392)を参照してください。 + +## 例 + +### デフォルトの instanceof の挙動に戻す + +このメソッドを直接呼ぶ必要が生じることはほとんどないでしょう。かわりに、このメソッドは `instanceof` 演算子から呼ばれます。以下の 2 種類の結果は通常等価であることを期待するべきです。 + +```js +class Foo {} +const foo = new Foo(); +console.log(foo instanceof Foo === Foo[Symbol.hasInstance](foo)); // true +``` + +デフォルトの `instanceof` の挙動を呼び出したいが、コンストラクターにオーバーライドされた `[@@hasInstance]()` メソッドがあるかわからないとき、このメソッドを使いたくなるかもしれません。 + +```js +class Foo { + static [Symbol.hasInstance](value) { + // 独自の実装 + return false; + } +} + +const foo = new Foo(); +console.log(foo instanceof Foo); // false +console.log(Function.prototype[Symbol.hasInstance].call(Foo, foo)); // true +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`instanceof`](/ja/docs/Web/JavaScript/Reference/Operators/instanceof) +- {{jsxref("Symbol.hasInstance")}} diff --git a/files/ja/web/javascript/reference/global_objects/math/hypot/index.md b/files/ja/web/javascript/reference/global_objects/math/hypot/index.md index 61113d78ff533b..96fdd60de97c19 100644 --- a/files/ja/web/javascript/reference/global_objects/math/hypot/index.md +++ b/files/ja/web/javascript/reference/global_objects/math/hypot/index.md @@ -94,8 +94,8 @@ if (!Math.hypot) return containsInfinity ? Infinity : max === 1 / 0 - ? 1 / 0 - : max * Math.sqrt(s); + ? 1 / 0 + : max * Math.sqrt(s); }; ``` diff --git a/files/ja/web/javascript/reference/global_objects/number/index.md b/files/ja/web/javascript/reference/global_objects/number/index.md index fa97a3fffc0a73..34b3e3fd0d9b05 100644 --- a/files/ja/web/javascript/reference/global_objects/number/index.md +++ b/files/ja/web/javascript/reference/global_objects/number/index.md @@ -64,7 +64,7 @@ JavaScript の数値 (`Number`) 型は [IEEE 754 の倍精度 64ビットバイ - [`undefined`](/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined) は [`NaN`](/ja/docs/Web/JavaScript/Reference/Global_Objects/NaN) になります。 - [`null`](/ja/docs/Web/JavaScript/Reference/Operators/null) は `0` になります。 - `true` は `1` に、`false` は `0` になります。 -- 文字列は、[数値リテラル](/ja/docs/Web/JavaScript/Reference/Lexical_grammar#数値リテラル)が入っている可能用に解釈して変換されます。解釈に失敗した場合は `NaN` が返されます。実際の数値リテラルと比較すると、いくつかの異なる点があります。 +- 文字列は、[数値リテラル](/ja/docs/Web/JavaScript/Reference/Lexical_grammar#数値リテラル)が入っているかのように解釈して変換されます。解釈に失敗した場合は `NaN` が返されます。実際の数値リテラルと比較すると、いくつかの異なる点があります。 - 先頭および末尾のホワイトスペース/改行文字は無視されます。 - 先頭が数字 `0` である場合、数値が 8 進数のリテラルとなる（または厳格モードで拒否される）ことはありません。 - 文字列の始めには、符号を示すために `+` と `-` を置くことができます。（実際のコードでは、これらはリテラルの一部に「見える」のですが、実際には別個の単項演算子です。）ただし、符号は一度しか現れず、空白が続いてはいけません。 diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/@@iterator/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/@@iterator/index.md index e124f56981117d..06213d28646554 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/@@iterator/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/@@iterator/index.md @@ -2,30 +2,36 @@ title: TypedArray.prototype[@@iterator]() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`@@iterator`** は `TypedArray` オブジェクトのプロパティで、[反復可能プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)を実装し、型付き配列を[スプレッド構文](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)や [`for...of`](/ja/docs/Web/JavaScript/Reference/Statements/for...of) ループのような反復可能オブジェクトを想定するほとんどの構文で利用できるようにするためのものです。配列の各要素の値を返すイテレーターを返します。 +**`[@@iterator]()`** は {{jsxref("TypedArray")}} インスタンスのプロパティで、[反復可能プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)を実装し、型付き配列を[スプレッド構文](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)や {{jsxref("Statements/for...of", "for...of")}} ループのような反復可能オブジェクトを想定するほとんどの構文で利用できるようにするためのものです。この型付き配列の各要素の値を返す[配列イテレーターオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)を返します。 このプロパティの初期値は {{jsxref("TypedArray.prototype.values")}} プロパティの初期値と同じ関数オブジェクトです。 +{{EmbedInteractiveExample("pages/js/typedarray-prototype-@@iterator.html")}} + ## 構文 ```js-nolint typedArray[Symbol.iterator]() ``` +### 引数 + +なし。 + ### 返値 -{{jsxref("TypedArray.prototype.values()")}} と同じ返値で、この型付き配列のすべての要素の値を返す、新しい反復可能イテレーターオブジェクトを返します。 +{{jsxref("TypedArray.prototype.values()")}} と同じ返値で、この型付き配列のすべての要素の値を返す、新しい[反復可能イテレーターオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)を返します。 ## 例 ### for...of ループを使用した反復処理 -このメソッドを直接呼び出す必要はめったにないことに注意してください。`@@iterator` メソッドの存在により、型付き配列は[反復可能] (/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)となり、 `for...of` ループのような反復処理構文は、ループするために自動的にこのメソッドを呼び出し、イテレータを取得します。 +このメソッドを直接呼び出す必要はめったにないことに注意してください。`@@iterator` メソッドの存在により、型付き配列は[反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)となり、 `for...of` ループのような反復処理構文は、ループするために自動的にこのメソッドを呼び出し、イテレータを取得します。 ```js const arr = new Uint8Array([10, 20, 30, 40, 50]); @@ -59,8 +65,10 @@ console.log(arrIter.next().value); // 50 ## 関連情報 - [`TypedArray.prototype[@@iterator]` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) -- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays) - {{jsxref("TypedArray")}} - {{jsxref("TypedArray.prototype.entries()")}} - {{jsxref("TypedArray.prototype.keys()")}} - {{jsxref("TypedArray.prototype.values()")}} +- {{jsxref("Symbol.iterator")}} +- [反復処理プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols) diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/@@species/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/@@species/index.md index 659cac07a26c8a..ba94573921d3a7 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/@@species/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/@@species/index.md @@ -1,8 +1,8 @@ --- -title: get TypedArray[@@species] +title: TypedArray[@@species] slug: Web/JavaScript/Reference/Global_Objects/TypedArray/@@species l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: bf81c9ed7de8cfd94cf1fc7f77e23b987f753a8b --- {{JSRef}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/at/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/at/index.md index ffd02c2b6fe227..7f7ed929f6ddd0 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/at/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/at/index.md @@ -7,9 +7,7 @@ l10n: {{JSRef}} -**`at()`** メソッドは整数値を受け取り、その位置にある項目を返します。正の整数値と負の整数値が使用できます。負の整数は、配列の最後の項目から前へ数えます。 - -これは、角括弧記法を使用することに何らかの問題があることを示唆しているわけではありません。例えば、 `array[0]` は最初の項目を返します。しかし、後方の項目、例えば最後の項目には {{jsxref('Array.prototype.length','array.length')}} を使用する代わりに、 `array.at(-1)` を呼び出すことで取得することができます。[（下記の例を参照してください）](#例) +**`at()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで整数値を受け取り、そのインデックスにある項目を返します。整数値には正の整数と負の整数が使用できます。負の整数の場合は、この型付き配列の末尾の項目から前に数えます。このメソッドは {{jsxref("Array.prototype.at()")}} と同じアルゴリズムです。 {{EmbedInteractiveExample("pages/js/typedarray-at.html")}} @@ -22,11 +20,15 @@ at(index) ### 引数 - `index` - - : 返される配列要素の添字（位置）。負の添字を使用した場合は、配列の末尾からの相対位置指定に対応しています。つまり、負の数を使用した場合は、配列の末尾から数えて返される要素を見つけることになります。 + - : 返される配列要素のゼロ基点のインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。負の添字を使用した場合は、配列の末尾から逆に数えた位置です。 `index < 0` であれば、 `index + array.length` がアクセスされます。 ### 返値 -指定された位置に一致する配列の要素です。指定された位置が見つからない場合は {{jsxref('undefined')}} を返します。 +指定されたインデックスに一致する型付き配列の要素です。 `index < -array.length` または `index >= array.length` の場合は、対応するプロパティにアクセスしようとせずに常に {{jsxref("undefined")}} を返します。 + +## 解説 + +詳細は {{jsxref("Array.prototype.at()")}} を参照してください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 ## 例 @@ -48,7 +50,7 @@ console.log(lastItem); // 18 ### メソッドの比較 -ここでは、{{jsxref('TypedArray')}} の最後から 2 番目の項目を選択するさまざまな方法を比較しています。以下に示すどの方法も有効ですが、`at()` メソッドの簡潔さと読みやすさが際立っています。 +ここでは、 {{jsxref("TypedArray")}} の最後から 2 番目の項目を選択するさまざまな方法を比較しています。以下に示すどの方法も有効ですが、`at()` メソッドの簡潔さと読みやすさが際立っています。 ```js // Our typed array with values @@ -78,7 +80,10 @@ console.log(atWay); // 11 ## 関連情報 - [`TypedArray.prototype.at` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#relative-indexing-method) -- [at() メソッドのポリフィル](https://github.com/tc39/proposal-relative-indexing-method#polyfill). -- {{jsxref("TypedArray.prototype.find()")}} – 指定されたテストに基づき値を返す。 -- {{jsxref("TypedArray.prototype.includes()")}} – 値が配列内にあるかどうかを調べて返す。 -- {{jsxref("TypedArray.prototype.indexOf()")}} – 指定された要素のインデックスを返す。 +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド +- {{jsxref("TypedArray")}} +- {{jsxref("TypedArray.prototype.findIndex()")}} +- {{jsxref("TypedArray.prototype.indexOf()")}} +- {{jsxref("TypedArray.prototype.with()")}} +- {{jsxref("Array.prototype.at()")}} +- {{jsxref("String.prototype.at()")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/buffer/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/buffer/index.md index 34943ec4576760..291f48d9d01a01 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/buffer/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/buffer/index.md @@ -7,9 +7,9 @@ l10n: {{JSRef}} -**`buffer`** アクセサープロパティは、構築時に _TypedArray_ から参照されるようになった {{jsxref("ArrayBuffer")}} を表します。 +**`buffer`** は {{jsxref("TypedArray")}} インスタンスのアクセサープロパティで、構築時点にこの型付き配列が参照する {{jsxref("ArrayBuffer")}} または {{jsxref("SharedArrayBuffer")}} を返します。 -{{EmbedInteractiveExample("pages/js/typedarray-buffer.html","shorter")}} +{{EmbedInteractiveExample("pages/js/typedarray-buffer.html", "shorter")}} ## 解説 @@ -47,5 +47,5 @@ console.log(arr.buffer === buffer); // true ## 関連情報 -- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays) - {{jsxref("TypedArray")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/bytelength/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/bytelength/index.md index db6508ffdf7657..17b8e7f81d1ad3 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/bytelength/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/bytelength/index.md @@ -2,14 +2,14 @@ title: TypedArray.prototype.byteLength slug: Web/JavaScript/Reference/Global_Objects/TypedArray/byteLength l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: c2445ce1dc3a0170e2fbfdbee10e18a7455c2282 --- {{JSRef}} -**`byteLength`** アクセサープロパティは、型付き配列の長さを（バイト単位で）表します。 +**`byteLength`** は {{jsxref("TypedArray")}} のアクセサープロパティで、この型付き配列の長さを（バイト単位で）返します。 -{{EmbedInteractiveExample("pages/js/typedarray-bytelength.html","shorter")}} +{{EmbedInteractiveExample("pages/js/typedarray-bytelength.html", "shorter")}} ## 解説 @@ -42,5 +42,5 @@ uint8offSet.byteLength; // 6 (due to the offset of the constructed Uint8Array) ## 関連情報 -- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays) - {{jsxref("TypedArray")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/byteoffset/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/byteoffset/index.md index 853dd04643b563..e42136a6a5ff19 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/byteoffset/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/byteoffset/index.md @@ -7,7 +7,7 @@ l10n: {{JSRef}} -**`byteOffset`** アクセサープロパティは、 {{jsxref("ArrayBuffer")}} の開始位置からの型付き配列の (バイト単位の) オフセットを表します。 +**`byteOffset`** は {{jsxref("TypedArray")}} インスタンスのアクセサープロパティで、この型付き配列の {{jsxref("ArrayBuffer")}} または {{jsxref("SharedArrayBuffer")}} の開始位置からの（バイト単位の）オフセットを返します。 ## 解説 @@ -37,5 +37,5 @@ uint8array2.byteOffset; // 3 (as specified when constructing Uint8Array) ## 関連情報 -- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays) - {{jsxref("TypedArray")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.md index 5467f40c234121..d5daae34d738f5 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.md @@ -2,14 +2,14 @@ title: TypedArray.BYTES_PER_ELEMENT slug: Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: c2445ce1dc3a0170e2fbfdbee10e18a7455c2282 --- {{JSRef}} **`TypedArray.BYTES_PER_ELEMENT`** プロパティは、型付き配列内の各要素の大きさをバイト単位で表します。 -{{EmbedInteractiveExample("pages/js/typedarray-bytes-per-element.html","shorter")}} +{{EmbedInteractiveExample("pages/js/typedarray-bytes-per-element.html", "shorter")}} ## 値 @@ -75,5 +75,5 @@ new BigUint64Array([]).BYTES_PER_ELEMENT; // 8 ## 関連情報 -- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays) - {{jsxref("TypedArray")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/copywithin/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/copywithin/index.md index 444b56461d796b..1132f0ca24e347 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/copywithin/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/copywithin/index.md @@ -7,7 +7,7 @@ l10n: {{JSRef}} -**`copyWithin()`** メソッドは、配列内の一連の配列の要素を `target` から始まる位置にコピーします。コピーは第 2、第 3の引数、 `start` と `end` の位置から実施されます。 `end` 引数はオプションで、既定では配列の長さです。このメソッドは {{jsxref("Array.prototype.copyWithin")}} と同じアルゴリズムです。 _TypedArray_ は、ここでは [型付き配列型](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)のうちの一つです。 +**`copyWithin()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、この型付き配列の一部を同じ型付き配列の別の場所にシャローコピーし、この型付き配列の長さを変更せずに返します。このメソッドは {{jsxref("Array.prototype.copyWithin()")}} と同じアルゴリズムです。 {{EmbedInteractiveExample("pages/js/typedarray-copywithin.html")}} @@ -21,23 +21,23 @@ copyWithin(target, start, end) ### 引数 - `target` - - : 要素をコピーする対象の開始インデックス位置。 + - : 並びのコピー先となるゼロ基点のインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。これは `start` にある要素がコピーされる場所に対応し、`start` から `end` までのすべての要素が後続のインデックスにコピーされます。 - `start` - - : 要素をコピーし始める元の開始インデックス位置。 + - : コピー元でコピーを始める位置のゼロ基点のインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 - `end` {{optional_inline}} - - : オプション。要素をコピーし終わる元の終了インデックス位置。 + - : コピー元でコピーを終える位置のゼロ基点のインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 `copyWithin()` はここまでをコピーしますが、 `end` は含みません。 ### 返値 -変更された配列です。 +変更された型付き配列です。 ## 解説 -詳細については、 {{jsxref("Array.prototype.copyWithin")}} をご覧ください +詳細については、 {{jsxref("Array.prototype.copyWithin()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 ## 例 -### copyWithin の使用 +### copyWithin() の使用 ```js const buffer = new ArrayBuffer(8); @@ -59,4 +59,6 @@ console.log(uint8); // Uint8Array [ 1, 2, 3, 1, 2, 3, 0, 0 ] ## 関連情報 - [`TypedArray.prototype.copyWithin` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド - {{jsxref("TypedArray")}} +- {{jsxref("Array.prototype.copyWithin()")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/entries/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/entries/index.md index 6f085a3a2d1b7a..bca42477071d12 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/entries/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/entries/index.md @@ -2,12 +2,12 @@ title: TypedArray.prototype.entries() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/entries l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`entries()`** メソッドは、配列内の各インデックスのキーと値のペアを含む新しい配列イテレーターオブジェクトを返します。 +**`entries()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、型付き配列の各インデックスのキーと値を含む新しい[配列のイテレーター](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)オブジェクトを返します。このメソッドは {{jsxref("Array.prototype.entries()")}} と同じアルゴリズムです。 {{EmbedInteractiveExample("pages/js/typedarray-entries.html")}} @@ -17,9 +17,17 @@ l10n: entries() ``` +### 引数 + +なし。 + ### 返値 -新しい配列イテレーターオブジェクトです。 +新しい[配列イテレーターオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)です。 + +## 解説 + +詳細については、 {{jsxref("Array.prototype.entries()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 ## 例 @@ -57,8 +65,10 @@ console.log(arrayEntries.next().value); // [4, 50] ## 関連情報 - [`TypedArray.prototype.entries` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) -- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド - {{jsxref("TypedArray")}} - {{jsxref("TypedArray.prototype.keys()")}} - {{jsxref("TypedArray.prototype.values()")}} -- {{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}} +- [`TypedArray.prototype[@@iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator) +- {{jsxref("Array.prototype.entries()")}} +- [Iteration protocols](/ja/docs/Web/JavaScript/Reference/Iteration_protocols) diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/every/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/every/index.md index e1a746352a5696..b72ddb75028bdb 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/every/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/every/index.md @@ -2,65 +2,42 @@ title: TypedArray.prototype.every() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/every l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: 4e32a881872958fdf928d8b4d42189fba2e11459 --- {{JSRef}} -**`every()`** メソッドは、提供された関数で実装されたテストに、型付き配列内のすべての要素が合格するかどうかをテストします。このメソッドのアルゴリズムは {{jsxref("Array.prototype.every()")}} と同じです。ここで _TypedArray_ は、[型付き配列型](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)のうちの 1 つです。 +**`every()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、提供された関数で実装されたテストに、型付き配列内のすべての要素が合格するかどうかをテストします。これは論理値を返します。このメソッドのアルゴリズムは {{jsxref("Array.prototype.every()")}} と同じです。 {{EmbedInteractiveExample("pages/js/typedarray-every.html")}} ## 構文 ```js-nolint -// アロー関数 -every((element) => { /* ... */ } ) -every((element, index) => { /* ... */ } ) -every((element, index, array) => { /* ... */ } ) - -// コールバック関数 every(callbackFn) every(callbackFn, thisArg) - -// インラインコールバック関数 -every(function(element) { /* ... */ }) -every(function(element, index) { /* ... */ }) -every(function(element, index, array){ /* ... */ }) -every(function(element, index, array) { /* ... */ }, thisArg) ``` ### 引数 - `callbackFn` - - - : 各要素をテストする関数です。 - - この関数は、次の引数を伴って呼び出されます。 - + - : 配列のそれぞれの要素に対して実行する関数です。要素がテストに合格した場合は[真値](/ja/docs/Glossary/Truthy)を返し、そうでなければ[偽値](/ja/docs/Glossary/Falsy)を返す必要があります。この関数は以下の引数で呼び出されます。 - `element` - : 現在処理されている型付き配列の要素です。 - `index` - : 現在処理されている型付き配列の要素の添字です。 - `array` - - : `every` が実行されている型付き配列です。 - -- `thisArg` {{Optional_inline}} - - : `callbackFn` を実行するときに `this` として使用すされる値です。 + - : `every()` が実行されている型付き配列です。 +- `thisArg` {{optional_inline}} + - : `callbackFn` を実行する際に `this` として使用する値。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。 ### 返値 -コールバック関数が型付き配列のすべての要素について{{Glossary("truthy", "真値")}}を返した場合は `true`。それ以外は `false`。 +`callbackFn` 関数がいずれかの要素で{{Glossary("falsy", "偽値")}}を返した場合は、すぐに `false` を返します。それ以外は `true` です。 ## 解説 -`every` は、与えられた `callbackFn` 関数を、配列に含まれる各要素に対して一度ずつ、 `callbackFn` が{{Glossary("falsy", "偽値")}}を返す要素が見つかるまで呼び出します。そのような要素が見つかると、`every` メソッドはただちに `false` を返します。 `callbackFn` がすべての要素に対して{{Glossary("truthy", "真値")}}を返した場合、 `every` は `true` を返します。 - -`callbackFn` は、要素の値、要素の添字、走査中の型付き配列オブジェクトという 3 つの引数を伴って呼び出されます。 - -`thisArg` 引数が `every` に与えられると、それがコールバックの `this` として使用されます。それ以外の場合は `undefined` が `this` の値として使われます。 `callbackFn` が最終的に監視できる `this` の値は、[関数から見た `this` の決定に関する一般的なルール](/ja/docs/Web/JavaScript/Reference/Operators/this)によって決定されます。 - -`every` は呼び出された型付き配列を変更しません。 +詳細については、 {{jsxref("Array.prototype.every()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 ## 例 @@ -76,15 +53,6 @@ new Uint8Array([12, 5, 8, 130, 44]).every(isBigEnough); // false new Uint8Array([12, 54, 18, 130, 44]).every(isBigEnough); // true ``` -### アロー関数を使用して型付き配列の要素をテストする - -[アロー関数](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)によって、同じテストをより短い構文で実現できます。 - -```js -new Uint8Array([12, 5, 8, 130, 44]).every((elem) => elem >= 10); // false -new Uint8Array([12, 54, 18, 130, 44]).every((elem) => elem >= 10); // true -``` - ## 仕様書 {{Specifications}} @@ -96,5 +64,9 @@ new Uint8Array([12, 54, 18, 130, 44]).every((elem) => elem >= 10); // true ## 関連情報 - [`TypedArray.prototype.every` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド +- {{jsxref("TypedArray")}} +- {{jsxref("TypedArray.prototype.forEach()")}} - {{jsxref("TypedArray.prototype.some()")}} +- {{jsxref("TypedArray.prototype.find()")}} - {{jsxref("Array.prototype.every()")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/fill/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/fill/index.md index bca49f685b9941..733e2b7d1b2ee3 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/fill/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/fill/index.md @@ -2,14 +2,14 @@ title: TypedArray.prototype.fill() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/fill l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f --- {{JSRef}} -**`fill()`** メソッドは、型付き配列の開始位置から終了位置までのすべての要素を固定値で埋めます。このメソッドのアルゴリズムは {{jsxref("Array.prototype.fill()")}} と同じです。ここで _TypedArray_ は、[型付き配列型](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)のうちの 1 つです。 +**`fill()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、型付き配列のある範囲のインデックスにあるすべての要素を固定値で埋めます。これは変更された型付き配列を返します。このメソッドのアルゴリズムは {{jsxref("Array.prototype.fill()")}} と同じです。 -{{EmbedInteractiveExample("pages/js/typedarray-fill.html","shorter")}} +{{EmbedInteractiveExample("pages/js/typedarray-fill.html", "shorter")}} ## 構文 @@ -24,9 +24,9 @@ fill(value, start, end) - `value` - : 型付き配列を埋める値です。 - `start` {{optional_inline}} - - : 開始位置です。既定値は 0 です。 + - : 埋まる範囲の開始点を表すゼロ基点のインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 - `end` {{optional_inline}} - - : 終了位置（の次の位置）です既定値は `this.length` です。 + - : 埋まる範囲の終了点を表すゼロ基点のインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 `fill()` は `end` の手前までを埋めます。 ### 返値 @@ -34,11 +34,7 @@ fill(value, start, end) ## 解説 -埋める区間は \[`start`, `end`) です。 - -**`fill()`** メソッドは `value`, `start`, `end` の 3 つまでの引数を取ります。 `start` と `end` の各引数は省略可能で、既定値はそれぞれ `0` と、 `this` オブジェクトの `length` です。 - -`start` が負の数であった場合は、 `length+start` (`length` は配列の長さ) として扱われます。 `end` が負の数であった場合は、 `length+end` として扱われます。 +詳細については、 {{jsxref("Array.prototype.fill()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 ## 例 @@ -63,4 +59,6 @@ new Uint8Array([1, 2, 3]).fill(4, -3, -2); // Uint8Array [4, 2, 3] ## 関連情報 - [`TypedArray.prototype.fill` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド +- {{jsxref("TypedArray")}} - {{jsxref("Array.prototype.fill()")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/filter/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/filter/index.md index 738e6ec4beea85..3d11e9b955a41d 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/filter/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/filter/index.md @@ -2,65 +2,42 @@ title: TypedArray.prototype.filter() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/filter l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f --- {{JSRef}} -**`filter()`** メソッドは、提供された関数によって実装されたテストに合格したすべての要素を含む新しい型付き配列を生成します。このメソッドのアルゴリズムは {{jsxref("Array.prototype.filter()")}} と同じです。ここで _TypedArray_ は、[型付き配列型](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)のうちの 1 つです。 +**`filter()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、指定された関数で実装されているテストに合格した要素だけにフィルタリングされた、指定された型付き配列の一部のコピーを作成します。このメソッドのアルゴリズムは {{jsxref("Array.prototype.filter()")}} と同じです。 {{EmbedInteractiveExample("pages/js/typedarray-filter.html")}} ## 構文 ```js-nolint -// アロー関数 -filter((element) => { /* ... */ } ) -filter((element, index) => { /* ... */ } ) -filter((element, index, array) => { /* ... */ } ) - -// コールバック関数 filter(callbackFn) filter(callbackFn, thisArg) - -// インラインコールバック関数 -filter(function(element) { /* ... */ }) -filter(function(element, index) { /* ... */ }) -filter(function(element, index, array){ /* ... */ }) -filter(function(element, index, array) { /* ... */ }, thisArg) ``` ### 引数 - `callbackFn` - - - : 型付き配列の各要素をテストする関数です。 - - `(element, index, array)` の引数で呼び出されます。 - `true` を返すと要素を維持し、それでなければ `false` を返します。 - + - : 配列のそれぞれの要素に対して実行する関数です。要素がテストに合格した場合は[真値](/ja/docs/Glossary/Truthy)を返し、そうでなければ[偽値](/ja/docs/Glossary/Falsy)を返す必要があります。この関数は以下の引数で呼び出されます。 + - `element` + - : 現在処理されている型付き配列の要素です。 + - `index` + - : 現在処理されている型付き配列の要素のインデックスです。 + - `array` + - : `filter()` が実行されている型付き配列です。 - `thisArg` {{optional_inline}} - - : `callbackFn` を実行するときに `this` として使用する値です。 + - : `callbackFn` を実行する際に `this` として使用する値。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。 ### 返値 -テストに合格した要素を持つ新しい型付き配列。 +テストに合格した要素だけを格納した、指定された型付き配列のコピー。テストに合格する要素がない場合は、空の型付き配列を返します。 ## 解説 -`filter()` は、与えられた `callbackFn` 関数を型付き配列の各要素に対して一度ずつ呼び出し、`callbackFn` が[真値](/ja/docs/Glossary/Truthy)を返したすべての要素からなる新しい型付き配列を生成します。`callbackFn` は値が代入されている型付き配列の添字に対してのみ呼び出されます。つまり、すでに削除された添字や、まだ値が代入されていない添字に対しては呼び出されません。`callbackFn` によるテストに合格しなかった型付き配列の要素は単純にスキップされ、新しい型付き配列には含まれません。 - -`callbackFn` は 3 つの引数で呼び出されます。 - -1. 要素の値 -2. 要素の添字 -3. 走査中の型付き配列オブジェクト - -引数 `thisArg` が `filter()` に与えられた場合、そのオブジェクトは `callbackFn` が呼び出された際に `this` 値として使われます。そうでない場合、 `undefined` が `this` 値として使われます。`callbackFn` 関数内の最終的な `this` 値は[関数内の `this` を決定する一般的ルール](/ja/docs/Web/JavaScript/Reference/Operators/this)に従って決められます。 - -`filter()` は呼び出された型付き配列を変化させません。 - -`filter()` によって処理される要素の範囲は `callbackFn` が最初の呼び出し前に設定されます。 `filter()` の呼び出しが始まった後で型付き配列に追加された要素は `callbackFn` によって処理されません。型付き配列の存在している要素が変更されたり、削除された場合、 `callbackFn` に渡される値は、 `filter()` が処理する直前の値になります。 +詳細については、 {{jsxref("Array.prototype.filter()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 ## 例 @@ -76,15 +53,6 @@ new Uint8Array([12, 5, 8, 130, 44]).filter(isBigEnough); // Uint8Array [ 12, 130, 44 ] ``` -### アロー関数を使用して型付き配列の要素をフィルターする - -[アロー関数](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)によって、同じテストをより短い構文で実現できます。 - -```js -new Uint8Array([12, 5, 8, 130, 44]).filter((elem) => elem >= 10); -// Uint8Array [ 12, 130, 44 ] -``` - ## 仕様書 {{Specifications}} @@ -96,6 +64,11 @@ new Uint8Array([12, 5, 8, 130, 44]).filter((elem) => elem >= 10); ## 関連情報 - [`TypedArray.prototype.filter` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド +- {{jsxref("TypedArray")}} +- {{jsxref("TypedArray.prototype.forEach()")}} - {{jsxref("TypedArray.prototype.every()")}} +- {{jsxref("TypedArray.prototype.map()")}} - {{jsxref("TypedArray.prototype.some()")}} +- {{jsxref("TypedArray.prototype.reduce()")}} - {{jsxref("Array.prototype.filter()")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/find/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/find/index.md index dc5e1c5ce5204a..8fc41333b93b37 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/find/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/find/index.md @@ -2,53 +2,34 @@ title: TypedArray.prototype.find() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/find l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`find()`** メソッドは、型付き配列のある要素の値が与えられたテスト関数を満たした場合、その値を返します。そうでなければ {{jsxref("undefined")}} を返します。ここで _TypedArray_ は[型付き配列型](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)のうちの一つです。 - -{{jsxref("TypedArray.findIndex", "findIndex()")}} メソッドも参照してください。こちらはそのメソッドは値のかわりに型付き配列で見つかった要素の**添字**を返します。 +**`find()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、型付き配列のある要素の値が与えられたテスト関数を満たした場合、その値を返します。そうでなければ {{jsxref("undefined")}} を返します。このメソッドのアルゴリズムは {{jsxref("Array.prototype.find()")}} と同じです。 {{EmbedInteractiveExample("pages/js/typedarray-find.html")}} ## 構文 ```js-nolint -// アロー関数 -find((element) => { /* ... */ } ) -find((element, index) => { /* ... */ } ) -find((element, index, array) => { /* ... */ } ) - -// コールバック関数 find(callbackFn) find(callbackFn, thisArg) - -// インラインコールバック関数 -find(function(element) { /* ... */ }) -find(function(element, index) { /* ... */ }) -find(function(element, index, array){ /* ... */ }) -find(function(element, index, array) { /* ... */ }, thisArg) ``` ### 引数 - `callbackFn` - - - : 型付き配列の要素に対するテストに使用する関数です。 - - この関数は以下の引数で呼び出されます。 - + - : 配列のそれぞれの要素に対して実行する関数です。要素がテストに合格した場合は[真値](/ja/docs/Glossary/Truthy)を返し、そうでなければ[偽値](/ja/docs/Glossary/Falsy)を返す必要があります。この関数は以下の引数で呼び出されます。 - `element` - - : 型付き配列内で現在処理されている要素。 + - : 現在処理されている型付き配列の要素です。 - `index` - - : 型付き配列内で現在処理されている要素の位置。 + - : 現在処理されている型付き配列の要素のインデックスです。 - `array` - - : `find()` が呼び出された配列。 - + - : `find()` が実行されている型付き配列です。 - `thisArg` {{optional_inline}} - - : `callbackFn` を実行するときに `this` として使用するオブジェクト。 + - : `callbackFn` を実行する際に `this` として使用する値。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。 ### 返値 @@ -56,21 +37,13 @@ find(function(element, index, array) { /* ... */ }, thisArg) ## 解説 -`find()` メソッドは `callbackFn` 関数が true 値を返す要素を見つけるまで、型付き配列内に存在している各要素に対して一度ずつ `callbackFn` 関数を実行します。そのような要素が見つかったら、 `find()` はすぐに要素の値を返します。さもなければ、 `find()` は {{jsxref("undefined")}} を返します。 `callbackFn` は型付き配列の値を割り当てた位置に対してのみ呼び出されます。つまり、削除されたり、値が割り当てられて位置に対しては呼び出されません。 - -`callbackFn` は、要素の値、要素の添字、走査中の型付き配列の 3 つの引数とともに呼び出されます。 - -`thisArg` 引数が `find()` に与えられた場合、 `callbackFn` の各呼び出しで `this` として使用されます。与えられなかった場合は、 {{jsxref("undefined")}}が使用されます。 - -`find()` は呼び出されている型付き配列を変更しません。 - -`find()` によって処理される要素の範囲は、最初に `callbackFn` が呼び出される前に設定されます。 `find()` の呼び出しが始まったあとで型付き配列に追加された要素は、 `callbackFn` メソッドによって処理されません。存在していて、処理されていない型付き配列の要素が `callbackFn` によって変更された場合、処理している `callbackFn` 関数に渡される値は、 `find()` が要素の位置を処理する直前の値です。削除された要素は処理されません。 +詳細については、 {{jsxref("Array.prototype.find()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 ## 例 ### 型付き配列内の素数を探す -次の例では、型付き配列内で素数である要素を探します (または、素数がない場合は {{jsxref("undefined")}} を返します)。 +次の例では、型付き配列内で素数である要素を探します（または、素数がない場合は {{jsxref("undefined")}} を返します）。 ```js function isPrime(element, index, array) { @@ -98,5 +71,13 @@ console.log(uint8.find(isPrime)); // 5 ## 関連情報 - [`TypedArray.prototype.find` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) +- [JavaScript の型付き配列](/ja/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()")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/findindex/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/findindex/index.md index bd4762447f6ef4..b7706d0dd65c75 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/findindex/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/findindex/index.md @@ -2,67 +2,42 @@ title: TypedArray.prototype.findIndex() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/findIndex l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f --- {{JSRef}} -**`findIndex()`** メソッドは、型付き配列内の要素が与えられたテスト関数を満たす場合、型付き配列内の**添字**を返します。さもなければ、 -1 が返されます。 - -{{jsxref("TypedArray.find", "find()")}} メソッドも参照してください。これは型付き配列内の見つかった要素の添字の代わりに**値**を返します。 +**`findIndex()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、指定されたテスト関数を満たす型付き配列の最初の要素のインデックスを返します。テスト関数を満たす要素がない場合、 -1 を返します。このメソッドのアルゴリズムは {{jsxref("Array.prototype.findIndex()")}} と同じです。 {{EmbedInteractiveExample("pages/js/typedarray-findindex.html")}} ## 構文 ```js-nolint -// アロー関数 -findIndex((element) => { /* ... */ } ) -findIndex((element, index) => { /* ... */ } ) -findIndex((element, index, array) => { /* ... */ } ) - -// コールバック関数 findIndex(callbackFn) findIndex(callbackFn, thisArg) - -// インラインコールバック関数 -findIndex(function(element) { /* ... */ }) -findIndex(function(element, index) { /* ... */ }) -findIndex(function(element, index, array){ /* ... */ }) -findIndex(function(element, index, array) { /* ... */ }, thisArg) ``` ### 引数 - `callbackFn` - - - : 型付き配列の各要素で実行する関数。3 つの引数を取ります。 - + - : 配列のそれぞれの要素に対して実行する関数です。要素がテストに合格した場合は[真値](/ja/docs/Glossary/Truthy)を返し、そうでなければ[偽値](/ja/docs/Glossary/Falsy)を返す必要があります。この関数は以下の引数で呼び出されます。 - `element` - - : 型付き配列内で現在処理されている要素。 + - : 現在処理されている型付き配列の要素です。 - `index` - - : 型付き配列内で現在処理されている要素の位置。 + - : 現在処理されている型付き配列の要素のインデックスです。 - `array` - - : `findIndex()` を呼び出した元の配列。 - + - : `findIndex()` が実行されている型付き配列です。 - `thisArg` {{optional_inline}} - - : `callbackFn` を実行するときに `this` として使用するオブジェクト。 + - : `callbackFn` を実行する際に `this` として使用する値。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。 ### 返値 -テストを満たした配列の要素の位置を返します。それ以外の場合は、 `-1` を返します。 +テストを通った配列の要素の位置を返します。それ以外の場合は、 `-1` を返します。 ## 解説 -`findIndex()` メソッドは、 `callbackFn` 関数が true 値を返す要素を見つけるまで、型付き配列内に存在している各要素に対して一度ずつ `callbackFn` 関数を実行します。そのような要素が見つかったら、 `findIndex()` はすぐに要素の添字を返します。さもなければ、 `findIndex()` メソッドは -1 を返します。 `callbackFn` は型付き配列の値を割り当てた位置に対してのみ呼び出されます。つまり、削除されたり、値が割り当てられていない位置に対しては呼び出されません。 - -`callbackFn` は、要素の値、要素の添字、走査中の型付き配列の 3 つの引数とともに呼び出されます。 - -`thisArg` 引数が `findIndex()` に与えられた場合、 `callbackFn` の各呼び出しで `this` として使用されます。`thisArg` 引数が与えられなかった場合は、 {{jsxref("undefined")}} が使用されます。 - -`findIndex()` メソッドは呼び出される型付き配列を変更しません。 - -`findIndex()` によって処理される要素の範囲は、最初に `callbackFn` が呼び出される前に設定されます。 `findIndex()` の呼び出しが始まったあとで型付き配列に追加された要素は、 `callbackFn` メソッドによって処理されません。存在していて、処理されていない型付き配列の要素が `callbackFn` によって変更された場合、処理している `callbackFn` 関数に渡される値は、 `findIndex()` が要素の位置を処理する直前の値です。削除された要素は処理されません。 +詳細については、 {{jsxref("Array.prototype.findIndex()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 ## 例 @@ -99,5 +74,11 @@ console.log(uint16.findIndex(isPrime)); // 2 ## 関連情報 - [`TypedArray.prototype.findIndex` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド +- {{jsxref("TypedArray")}} - {{jsxref("TypedArray.prototype.find()")}} +- {{jsxref("TypedArray.prototype.findLast()")}} +- {{jsxref("TypedArray.prototype.findLastIndex()")}} - {{jsxref("TypedArray.prototype.indexOf()")}} +- {{jsxref("TypedArray.prototype.lastIndexOf()")}} +- {{jsxref("Array.prototype.findIndex()")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/findlast/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/findlast/index.md index 798c8746dda7d3..f3744b4a9b9023 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/findlast/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/findlast/index.md @@ -2,86 +2,48 @@ title: TypedArray.prototype.findLast() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/findLast l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f --- {{JSRef}} -**`findLast()`** メソッドは、[型付き配列](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)を逆順で反復処理し、指定したテスト関数を満たす最初の要素の値を返します。 -テスト関数を満たす値がなかった場合は、{{jsxref("undefined")}} を返します。 - -{{jsxref("TypedArray.findLastIndex()", "findLastIndex()")}} メソッドも参照してください。こちらは見つかった要素の値ではなく添字を返します。 +**`findLast()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、型付き配列を逆順に反復処理し、指定されたテスト関数を満たす最初の要素の値を返します。テスト関数を満たす要素がない場合は {{jsxref("undefined")}} を返します。このメソッドのアルゴリズムは {{jsxref("Array.prototype.findLast()")}} と同じです。 {{EmbedInteractiveExample("pages/js/typedarray-findlast.html")}} ## 構文 ```js-nolint -// アロー関数 -findLast((element) => { /* ... */ } ) -findLast((element, index) => { /* ... */ } ) -findLast((element, index, array) => { /* ... */ } ) - -// コールバック関数 findLast(callbackFn) findLast(callbackFn, thisArg) - -// インラインコールバック関数 -findLast(function(element) { /* ... */ }) -findLast(function(element, index) { /* ... */ }) -findLast(function(element, index, array){ /* ... */ }) -findLast(function(element, index, array) { /* ... */ }, thisArg) ``` ### 引数 - `callbackFn` - - - : 型付き配列の要素に対するテストに使用する関数です。 - - この関数は以下の引数で呼び出されます。 - + - : 配列のそれぞれの要素に対して実行する関数です。要素がテストに合格した場合は[真値](/ja/docs/Glossary/Truthy)を返し、そうでなければ[偽値](/ja/docs/Glossary/Falsy)を返す必要があります。この関数は以下の引数で呼び出されます。 - `element` - - : 型付き配列内で処理されている現在の要素。 + - : 現在処理されている型付き配列の要素です。 - `index` - - : 型付き配列内で処理されている現在の要素の添字（位置）。 + - : 現在処理されている型付き配列の要素のインデックスです。 - `array` - - : `findLast()` が呼び出されている型付き配列。 - - コールバック関数は、適切な要素が見つかった際には[真値](/ja/docs/Glossary/Truthy)を返す必要があります。 - この要素の値が `findLast()` から返されます。 - + - : `findLast()` が実行されている型付き配列です。 - `thisArg` {{optional_inline}} - - : オプション。 `callbackFn` を実行するときに {{jsxref("Operators/this", "this")}} として使用する値。 + - : `callbackFn` を実行する際に `this` として使用する値。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。 ### 返値 -指定されたテスト関数を満たす、最も大きな添字を持つ型付き配列の要素です。一致する値が見つからない場合は {{jsxref("undefined")}} です。 +指定されたテスト関数を満たす、最後の（最も大きなインデックスを持つ）型付き配列の要素です。一致する値が見つからない場合は {{jsxref("undefined")}} です。 ## 解説 -`findLast()` メソッドは、`callbackFn` が[真値](/ja/docs/Glossary/Truthy)を返すまで、型付き配列の各要素に対して、添字の降順に 1 回ずつ `callbackFn` 関数を実行します。 -`findLast()` はその要素の添字を返し、配列のイテレーターを反復処理するのを止めます。 -もし `callbackFn` が真値を返さなかった場合、 `findLast()` は {{jsxref("undefined")}} を返します。 - -`callbackFn` は、要素の値、要素の添字、走査されている型付き配列の 3 つの引数で呼び出されます。 - -`thisArg` 引数が `findLast()` に指定された場合、それが `callbackFn` を呼び出すたびに `this` として使用されます。 -指定されなかった場合は、{{jsxref("undefined")}}が使用されます。 - -`findLast()` メソッドは呼び出された型付き配列を変更しませんが、`callbackFn` に指定された関数からは変更することができます。 - -`findLast()` が処理する要素の範囲は、`callbackFn` が最初に呼び出される前に設定されています。 -`findLast()` の呼び出しを始めた後に型付き配列に追加された要素は、`callbackFn` が処理する対象にはなりません。 -型付き配列に存在する未処理の要素が `callbackFn` によって変更された場合、処理する `callbackFn` に渡されるその値は、`findLast()` がその要素の要素を処理した時点の値になります。 - -> **警告:** 上記のように変更を同時進行で行うと、理解しにくいコードになることが多いので、（特別な場合を除き）一般的には避けるべきです。 +詳細については、 {{jsxref("Array.prototype.findLast()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 ## 例 -### 型付き配列から素数の添字を探す +### 型付き配列から素数のインデックスを探す -以下の例では、型付き配列から素数である値のうち、最後の値を探します（素数がない場合は{{jsxref("undefined")}}を返します）。 +以下の例では、型付き配列から素数である値のうち、最後の値を返します（素数がない場合は {{jsxref("undefined")}} を返します）。 ```js function isPrime(element) { @@ -97,7 +59,7 @@ function isPrime(element) { } let uint8 = new Uint8Array([4, 6, 8, 12]); -console.log(uint8.findLast(isPrime)); // undefined (no primes in array) +console.log(uint8.findLast(isPrime)); // undefined （配列に素数がない） uint8 = new Uint8Array([4, 5, 7, 8, 9, 11, 12]); console.log(uint8.findLast(isPrime)); // 11 ``` @@ -107,7 +69,7 @@ console.log(uint8.findLast(isPrime)); // 11 以下は、すべての要素が処理され、コールバック値に渡された値が処理時の値であることを示す例です。 ```js -// 添字 2, 3, 4 に要素のない配列を宣言。 +// インデックス 2, 3, 4 に要素のない配列を宣言。 // 欠落した要素はゼロに初期化されます。 const uint8 = new Uint8Array([0, 1, , , , 5, 6]); @@ -134,7 +96,7 @@ uint8.findLast((value, index) => { // Visited index 2 with value 0 // Visited index 1 with value 1 // Visited index 0 with value 0 -// Deleting uint8[5] with value 5 +// Set uint8[3] to 44 // Visited index 6 with value 6 // Visited index 5 with value 5 // Visited index 4 with value 0 @@ -154,7 +116,14 @@ uint8.findLast((value, index) => { ## 関連情報 -- [`TypedArray.prototype.findLast()` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) -- {{jsxref("TypedArray.prototype.findLastIndex()")}} +- [`TypedArray.prototype.findLast` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#array-find-from-last) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド +- {{jsxref("TypedArray")}} - {{jsxref("TypedArray.prototype.find()")}} +- {{jsxref("TypedArray.prototype.findIndex()")}} +- {{jsxref("TypedArray.prototype.findLastIndex()")}} +- {{jsxref("TypedArray.prototype.includes()")}} +- {{jsxref("TypedArray.prototype.filter()")}} - {{jsxref("TypedArray.prototype.every()")}} +- {{jsxref("TypedArray.prototype.some()")}} +- {{jsxref("Array.prototype.findLast()")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/findlastindex/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/findlastindex/index.md index 63c1c11a1c00ba..6956689e24d9f2 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/findlastindex/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/findlastindex/index.md @@ -2,87 +2,49 @@ title: TypedArray.prototype.findLastIndex() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/findLastIndex l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f --- {{JSRef}} -**`findLastIndex()`** メソッドは、[型付き配列](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)を逆順で反復処理し、指定したテスト関数を満たす最初の要素の添字を返します。 -テスト関数を満たす値がなかった場合は、-1 を返します。 - -{{jsxref("TypedArray.findLast()", "findLast()")}} メソッドも参照してください。こちらは見つかった要素の添字ではなく値を返します。 +**`findLastIndex()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、型付き配列を逆順で反復処理し、指定したテスト関数を満たす最初の要素のインデックスを返します。テスト関数を満たす値がなかった場合は、-1 を返します。このメソッドのアルゴリズムは {{jsxref("Array.prototype.findLastIndex()")}} と同じです。 {{EmbedInteractiveExample("pages/js/typedarray-findlastindex.html")}} ## 構文 ```js-nolint -// アロー関数 -findLastIndex((element) => { /* ... */ } ) -findLastIndex((element, index) => { /* ... */ } ) -findLastIndex((element, index, array) => { /* ... */ } ) - -// コールバック関数 findLastIndex(callbackFn) findLastIndex(callbackFn, thisArg) - -// インラインコールバック関数 -findLastIndex(function(element) { /* ... */ }) -findLastIndex(function(element, index) { /* ... */ }) -findLastIndex(function(element, index, array){ /* ... */ }) -findLastIndex(function(element, index, array) { /* ... */ }, thisArg) ``` ### 引数 - `callbackFn` - - - : 型付き配列の要素に対するテストに使用する関数です。 - - この関数は以下の引数で呼び出されます。 - + - : 配列のそれぞれの要素に対して実行する関数です。要素がテストに合格した場合は[真値](/ja/docs/Glossary/Truthy)を返し、そうでなければ[偽値](/ja/docs/Glossary/Falsy)を返す必要があります。この関数は以下の引数で呼び出されます。 - `element` - - : 型付き配列内で処理されている現在の要素。 + - : 現在処理されている型付き配列の要素です。 - `index` - - : 型付き配列内で処理されている現在の要素の添字（位置）。 + - : 現在処理されている型付き配列の要素のインデックスです。 - `array` - - : `findLastIndex()` が呼び出されている型付き配列。 - - コールバック関数は、適切な要素が見つかった際には[真値](/ja/docs/Glossary/Truthy)を返す必要があります。 - この要素の添字が `findLastIndex()` から返されます。 - + - : `findLastIndex()` が実行されている型付き配列です。 - `thisArg` {{optional_inline}} - - : オプション。 `callbackFn` を実行するときに {{jsxref("Operators/this", "this")}} として使用する値。 + - : `callbackFn` を実行する際に `this` として使用する値。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。 ### 返値 -テストに合格した要素のうち、配列の最後（最も大きな添字）の要素の添字。 +テストに合格した要素のうち、配列の最後（最も大きなインデックス）の要素のインデックス。 一致する要素が見つからなかった場合に -1 を返します。 ## 解説 -`findLastIndex()` メソッドは、`callbackFn` が[真値](/ja/docs/Glossary/Truthy)を返すまで、型付き配列の各要素に対して、添字の降順に 1 回ずつ `callbackFn` 関数を実行します。 -`findLastIndex()` はその要素の添字を返し、配列のイテレーターを反復処理するのを止めます。 -もし `callbackFn` が真値を返さなかった場合、 `findLastIndex()` は {{jsxref("undefined")}} を返します。 - -`callbackFn` は、要素の値、要素の添字、走査されている型付き配列の 3 つの引数で呼び出されます。 - -`thisArg` 引数が `findLastIndex()` に指定された場合、それが `callbackFn` を呼び出すたびに `this` として使用されます。 -指定されなかった場合は、{{jsxref("undefined")}}が使用されます。 - -`findLastIndex()` メソッドは呼び出された型付き配列を変更しませんが、`callbackFn` に指定された関数からは変更することができます。 - -`findLastIndex()` が処理する要素の範囲は、`callbackFn` が最初に呼び出される前に設定されています。 -`findLastIndex()` の呼び出しを始めた後に型付き配列に追加された要素は、`callbackFn` が処理する対象にはなりません。 -型付き配列に存在する未処理の要素が `callbackFn` によって変更された場合、処理する `callbackFn` に渡されるその値は、`findLastIndex()` がその要素の要素を処理した時点の値になります。 - -> **警告:** 上記のように変更を同時進行で行うと、理解しにくいコードになることが多いので、（特別な場合を除き）一般的には避けるべきです。 +詳細については、 {{jsxref("Array.prototype.findLastIndex()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 ## 例 -### 型付き配列から素数の添字を探す +### 型付き配列から素数のインデックスを探す -以下の例では、配列の中で素数である最後の要素の添字を探します（素数がない場合は `-1` を返します）。 +以下の例では、配列の中で素数である最後の要素のインデックスを探します。素数がない場合は `-1` を返します。 ```js function isPrime(element) { @@ -99,10 +61,10 @@ function isPrime(element) { let uint8 = new Uint8Array([4, 6, 8, 12]); console.log(uint8.findLastIndex(isPrime)); -// -1 (no primes in array) +// -1 （配列に素数がない） uint8 = new Uint8Array([4, 5, 7, 8, 9, 11, 12]); console.log(uint8.findLastIndex(isPrime)); -// 11 +// 5 ``` ## 仕様書 @@ -115,7 +77,12 @@ console.log(uint8.findLastIndex(isPrime)); ## 関連情報 -- [`TypedArray.prototype.findLastIndex` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) -- {{jsxref("TypedArray.prototype.findLast()")}} +- [`TypedArray.prototype.findLastIndex` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#array-find-from-last) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド +- {{jsxref("TypedArray")}} +- {{jsxref("TypedArray.prototype.find()")}} - {{jsxref("TypedArray.prototype.findIndex()")}} +- {{jsxref("TypedArray.prototype.findLast()")}} - {{jsxref("TypedArray.prototype.indexOf()")}} +- {{jsxref("TypedArray.prototype.lastIndexOf()")}} +- {{jsxref("Array.prototype.findLastIndex()")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/foreach/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/foreach/index.md index 3f722853eec903..b67d81e2d1fc01 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/foreach/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/foreach/index.md @@ -2,71 +2,42 @@ title: TypedArray.prototype.forEach() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/forEach l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`forEach()`** メソッドは、配列の要素ごとに一度与えられた関数を実行します。このメソッドは {{jsxref("Array.prototype.forEach()")}} と同じアルゴリズムを持っています。ここで _TypedArray_ は[型付き配列型](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)の一つです。 +**`forEach()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、型付き配列の要素ごとに一度与えられた関数を実行します。このメソッドのアルゴリズムは {{jsxref("Array.prototype.forEach()")}} と同じです。 {{EmbedInteractiveExample("pages/js/typedarray-foreach.html")}} ## 構文 ```js-nolint -// アロー関数 -forEach((element) => { /* ... */ } ) -forEach((element, index) => { /* ... */ } ) -forEach((element, index, array) => { /* ... */ } ) - -// コールバック関数 forEach(callbackFn) forEach(callbackFn, thisArg) - -// インラインコールバック関数 -forEach(function(element) { /* ... */ }) -forEach(function(element, index) { /* ... */ }) -forEach(function(element, index, array){ /* ... */ }) -forEach(function(element, index, array) { /* ... */ }, thisArg) ``` ### 引数 - `callbackFn` - - - : 新しい型付き配列の要素を生成する関数。 - - 関数は以下の引数で呼び出されます。 - + - : 型付き配列のそれぞれの要素に対して実行する関数です。返値は破棄されます。この関数は以下の引数で呼び出されます。 - `element` - - : 型付き配列内で処理される現在の要素。 + - : 現在処理されている型付き配列の要素です。 - `index` - - : 配列内で処理される現在の要素の添字。 + - : 現在処理されている型付き配列の要素のインデックスです。 - `array` - - : `forEach()` が呼び出される配列。 - + - : `forEach()` が呼び出されている型付き配列です。 - `thisArg` {{optional_inline}} - - : `callbackFn` を実行するとき `this` として使用する値。 + - : `callbackFn` を実行する際に `this` として使用する値。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。 ### 返値 -{{jsxref("undefined")}} です。 +なし ({{jsxref("undefined")}})。 ## 解説 -`forEach()` メソッドは与えられた `callbackFn` を、型付き配列内に存在するそれぞれの要素に一度ずつ昇順に実行します。削除されたり、省略されたりしたインデックスに対しては呼び出されません。ただし、存在していて {{jsxref("undefined")}} の値を持つ要素に対しては実行されます。 - -`callbackFn` は次の **3 つの引数**で呼び出されます。 - -- **要素の値** -- **要素の添字** -- **走査中の型付き配列** - -`thisArg` 引数が `forEach()` に与えられた場合は、 `callbackFn` の呼び出し時にそのオブジェクトが `this` の値として使用されます。与えられなかった場合は、 {{jsxref("undefined")}} が `this` の値として使用するために渡されます。 `callbackFn` によって最終的に観測可能な `this` 値は[関数から見える `this` を特定する一般規則](/ja/docs/Web/JavaScript/Reference/Operators/this)に従います。 - -`forEach()` によって処理される要素の範囲は `callbackFn` の最初の呼び出し前に設定されます。 `forEach()` の呼び出しが始まったあとで型付き配列に追加される要素は、 `callbackFn` によって処理されます。型付き配列内に存在している要素の値が変更されたら、 `callbackFn` に渡される値は、`forEach()`メソッドが処理する直前の値です。つまり、処理される前に削除されている要素は処理されません。 - -`forEach()` は型付き配列の各要素ごとに一度 `callbackFn` 関数を実行します。 {{jsxref("TypedArray.prototype.every()", "every()")}} や {{jsxref("TypedArray.prototype.some()", "some()")}} とは異なり、常に、{{jsxref("undefined")}} 値を返します。 +詳細については、 {{jsxref("Array.prototype.forEach()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 ## 例 @@ -98,7 +69,13 @@ new Uint8Array([0, 1, 2, 3]).forEach(logArrayElements); ## 関連情報 - [`TypedArray.prototype.forEach` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド +- {{jsxref("TypedArray")}} +- {{jsxref("TypedArray.prototype.find()")}} - {{jsxref("TypedArray.prototype.map()")}} +- {{jsxref("TypedArray.prototype.filter()")}} - {{jsxref("TypedArray.prototype.every()")}} - {{jsxref("TypedArray.prototype.some()")}} - {{jsxref("Array.prototype.forEach()")}} +- {{jsxref("Map.prototype.forEach()")}} +- {{jsxref("Set.prototype.forEach()")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/from/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/from/index.md index 2cee02ea561a7c..15629e9d329357 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/from/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/from/index.md @@ -2,31 +2,20 @@ title: TypedArray.from() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/from l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: c2445ce1dc3a0170e2fbfdbee10e18a7455c2282 --- {{JSRef}} **`TypedArray.from()`** メソッドは、配列風オブジェクトや反復可能オブジェクトから新しい[型付き配列](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)を生成します。このメソッドは {{jsxref("Array.from()")}} とほぼ同じです。 -{{EmbedInteractiveExample("pages/js/typedarray-from.html","shorter")}} +{{EmbedInteractiveExample("pages/js/typedarray-from.html", "shorter")}} ## 構文 ```js-nolint -// アロー関数 -TypedArray.from(arrayLike, (element) => { /* ... */ } ) -TypedArray.from(arrayLike, (element, index) => { /* ... */ } ) - -// マッピング関数 TypedArray.from(arrayLike, mapFn) TypedArray.from(arrayLike, mapFn, thisArg) - -// インラインマッピング関数 -TypedArray.from(arrayLike, function mapFn(element) { /* ... */ }) -TypedArray.from(arrayLike, function mapFn(element, index) { /* ... */ }) -TypedArray.from(arrayLike, function mapFn(element) { /* ... */ }, thisArg) -TypedArray.from(arrayLike, function mapFn(element, index) { /* ... */ }, thisArg) ``` ここで `TypedArray` は次のいずれかです。 @@ -46,37 +35,30 @@ TypedArray.from(arrayLike, function mapFn(element, index) { /* ... */ }, thisArg ### 引数 - `arrayLike` - - : 型付き配列に変換する配列風オブジェクトまたは反復可能オブジェクトです。 + - : 型付き配列に変換する反復可能または配列風オブジェクトです。 - `mapFn` {{optional_inline}} - - : 型付き配列のすべての要素に適用されるマッピング関数。 + - : 型付き配列の各要素に対して呼び出す関数です。指定された場合、配列に追加するすべての値は最初にこの関数に渡され、代わりに `mapFn` の返値が型付き配列に追加されます。この関数は以下の引数で呼び出されます。 + - `element` + - : 現在処理されている型付き配列の要素です。 + - `index` + - : 現在処理されている型付き配列の要素のインデックスです。 - `thisArg` {{optional_inline}} - - : `mapFn` を実行するときに `this` として使う値。 + - : `mapFn` を実行するときに `this` として使う値です。 ### 返値 -新しい {{jsxref("TypedArray")}} インスタンス。 +新しい {{jsxref("TypedArray")}} インスタンスです。 ## 解説 -`TypedArray.from()` によって下記から型付き配列を生成できます: - -- 配列風オブジェクト (`length` プロパティと、番号の振られた要素をもつオブジェクト) -- [反復可能オブジェクト](/ja/docs/Web/JavaScript/Reference/Iteration_protocols) ({{jsxref("Map")}} や {{jsxref("Set")}} のように要素が取得できるオブジェクト) - -`TypedArray.from()` は省略可能な引数 `mapFn` を持ち、これは生成中の型付き配列 (またはサブクラスのオブジェクト) のそれぞれの要素に対して {{jsxref("Array.prototype.map", "map()")}} 関数を実行することができます。すなわち、以下のものと同等です。 +詳しくは {{jsxref("Array.from()")}} を娯楽んだ歳。 -- `TypedArray.from(obj, mapFn, thisArg)` -- `TypedArray.from(Array.prototype.map.call(obj, mapFn, thisArg))`. +{{jsxref("Array.from()")}} と `TypedArray.from()` の間には微妙な違いがあります（メモ: 下記で言及する `this` 値は `TypedArray.from()` が呼び出された `this` 値であり、 `mapFn` を呼び出すために用いた `thisArg` 引数ではありません）。 -`from()` メソッドの `length` プロパティは `1` です。 - -### Array.from() との違い - -{{jsxref("Array.from()")}} と `TypedArray.from()` の間には、いくつかの微妙な違いがあります。 - -- `TypedArray.from()` に渡された `thisArg` の値がコンストラクターではなかった場合、 `TypedArray.from()` で {{jsxref("TypeError")}} が発生します。これは `Array.from()` が既定で新しい {{jsxref("Array")}} を生成するためです。 +- `TypedArray.from()` に渡された `this` の値がコンストラクターではなかった場合、 `TypedArray.from()` で {{jsxref("TypeError")}} が発生します。それに対して `Array.from()` が既定で新しい {{jsxref("Array")}} を生成します。 +- `this` で構築されるオブジェクトは `TypedArray` インスタンスでなければなりませんが、 `Array.from()` は `this` の値を任意のオブジェクトに構築することができます。 +- 引数 `source` がイテレーターの場合、 `TypedArray.from()` は最初にイテレーターからすべての値を収集し、次にそのカウントを使用して `this` のインスタンスを作成し、最後にそのインスタンスに値を設定します。 `Array.from()` はイテレーターから値を受け取るとそれぞれの値を設定し、最後に `length` を設定します。 - `TypedArray.from()` は `[[Set]]` を使用します。 `Array.from()` は `[[DefineOwnProperty]]` を使用します。 従って {{jsxref("Proxy")}} オブジェクトを使っている場合は、新しい要素を追加するときに [`handler.set()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set) が [`handler.defineProperty()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/defineProperty) の代わりに呼び出されます。 -- `arrayLike` 引数がイテレーターであった場合、 `TypedArray.from()` は最初にイテレーターからすべての値を集め、その数の大きさを持つ `thisArg` のインスタンスを生成し、そのインスタンスに値を設定します。 `Array.from()` はイテレーターから取得して各値を設定し、最後に `length` を設定します。 - `Array.from()` がイテレーターではない配列風オブジェクトを受け取ったときは、穴をそのまま残します。 `TypedArray.from()` は必ず密配列 (dense array) を生成します。 ## 例 @@ -112,6 +94,31 @@ Uint8Array.from({ length: 5 }, (v, k) => k); // Uint8Array [ 0, 1, 2, 3, 4 ] ``` +### TypedArray 以外のコンストラクターに対する from() の呼び出し + +`from()` の `this` 値は `TypedArray` インスタンスを返すコンストラクターでなければなりません。 + +```js +function NotArray(len) { + console.log("NotArray called with length", len); +} + +Int8Array.from.call({}, []); // TypeError: # is not a constructor +Int8Array.from.call(NotArray, []); +// NotArray called with length 0 +// TypeError: Method %TypedArray%.from called on incompatible receiver # +``` + +```js +function NotArray2(len) { + console.log("NotArray2 called with length", len); + return new Uint8Array(len); +} +console.log(Int8Array.from.call(NotArray2, [1, 2, 3])); +// NotArray2 called with length 3 +// Uint8Array(3) [ 1, 2, 3 ] +``` + ## 仕様書 {{Specifications}} @@ -123,6 +130,8 @@ Uint8Array.from({ length: 5 }, (v, k) => k); ## 関連情報 - [`TypedArray.from` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド +- {{jsxref("TypedArray")}} - {{jsxref("TypedArray.of()")}} +- {{jsxref("TypedArray.prototype.map()")}} - {{jsxref("Array.from()")}} -- {{jsxref("Array.prototype.map()")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/includes/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/includes/index.md index 31860907fc4a4f..61872ee18ec68f 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/includes/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/includes/index.md @@ -2,12 +2,12 @@ title: TypedArray.prototype.includes() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/includes l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f --- {{JSRef}} -**`includes()`** メソッドは、型付き配列が特定の要素を含んでいるかどうかを判断し、その結果に応じて `true` か `false` を返します。このメソッドは {{jsxref("Array.prototype.includes()")}} と同じアルゴリズムです。 _TypedArray_ は、ここでは [型付き配列型](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)のうちの一つです。 +**`includes()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、型付き配列の項目内に特定の値が含まれているかどうかを判断し、その結果に応じて `true` か `false` を返します。このメソッドは {{jsxref("Array.prototype.includes()")}} と同じアルゴリズムです。 {{EmbedInteractiveExample("pages/js/typedarray-includes.html")}} @@ -23,11 +23,15 @@ includes(searchElement, fromIndex) - `searchElement` - : 探す対象の要素 - `fromIndex` {{optional_inline}} - - : オプション。`searchElement`を探し始める配列内の位置。既定では 0 です。 + - : 検索を始める位置を示すゼロ基点のインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 ### 返値 -論理値です。 +論理値で、型付き配列（指定する場合はインデックス `fromIndex` で示される型付き配列の一部）内で値 `searchElement` が見つかった場合に `true` なります。 + +## 解説 + +詳細については、 {{jsxref("Array.prototype.includes()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 ## 例 @@ -56,6 +60,10 @@ new Float64Array([NaN]).includes(NaN); // true; ## 関連情報 - [`TypedArray.prototype.includes` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド +- {{jsxref("TypedArray")}} +- {{jsxref("TypedArray.prototype.indexOf()")}} +- {{jsxref("TypedArray.prototype.find()")}} +- {{jsxref("TypedArray.prototype.findIndex()")}} - {{jsxref("Array.prototype.includes()")}} - {{jsxref("String.prototype.includes()")}} -- {{jsxref("TypedArray.prototype.indexOf()")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/index.md index a445441dad3233..1809da1b8d07e8 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/index.md @@ -2,12 +2,12 @@ title: TypedArray slug: Web/JavaScript/Reference/Global_Objects/TypedArray l10n: - sourceCommit: d42c4bd039f84d228a339a4a15c8abf9e67cf608 + sourceCommit: c2445ce1dc3a0170e2fbfdbee10e18a7455c2282 --- {{JSRef}} -**_TypedArray_** オブジェクトは、背後にある[バイナリーデータバッファー](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)の、配列風のビューを表します。 `TypedArray` という名称のグローバルプロパティは存在せず、また直接 `TypedArray` コンストラクターが見えるわけではありません。代わりに、さまざまなグローバルプロパティがあり、それらの値は後述するように特定の要素の型における型付き配列のコンストラクターになります。下記のページで、それぞれの要素を持つ片引き配列で使用できる共通のプロパティやメソッドを確認できます。 +**_TypedArray_** オブジェクトは、背後にある[バイナリーデータバッファー](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)の、配列風のビューを表します。 `TypedArray` という名称のグローバルプロパティがあるわけではなく、また直接 `TypedArray` コンストラクターが見えるわけではありません。代わりに、さまざまなグローバルプロパティがあり、それらの値は後述するように特定の要素の型における型付き配列のコンストラクターになります。下記のページで、それぞれの要素を持つ片引き配列で使用できる共通のプロパティやメソッドを確認できます。 {{EmbedInteractiveExample("pages/js/typedarray-constructor.html")}} @@ -19,19 +19,36 @@ l10n: ### TypedArray オブジェクト -| 型 | 値の範囲 | サイズ (バイト数) | 説明 | Web IDL 型 | 同等の C 型 | -| ------------------------------- | ---------------------------------------------------------- | ----------------- | ---------------------------------------------------------------------------- | --------------------- | ------------------------------- | -| {{jsxref("Int8Array")}} | -128 から 127 | 1 | 8 ビット長、2 の補数方式の符号付き整数値 | `byte` | `int8_t` | -| {{jsxref("Uint8Array")}} | 0 から 255 | 1 | 8 ビット長、符号なし整数値 | `octet` | `uint8_t` | -| {{jsxref("Uint8ClampedArray")}} | 0 から 255 | 1 | 8 ビット長、符号なし整数値 (切り詰め) | `octet` | `uint8_t` | -| {{jsxref("Int16Array")}} | -32768 から 32767 | 2 | 16 ビット長、2 の補数方式の符号付き整数値 | `short` | `int16_t` | -| {{jsxref("Uint16Array")}} | 0 から 65535 | 2 | 16 ビット長、符号なし整数値 | `unsigned short` | `uint16_t` | -| {{jsxref("Int32Array")}} | -2147483648 から 2147483647 | 4 | 32 ビット長、2 の補数方式の符号付き整数値 | `long` | `int32_t` | -| {{jsxref("Uint32Array")}} | 0 から 4294967295 | 4 | 32 ビット長、符号なし整数値 | `unsigned long` | `uint32_t` | -| {{jsxref("Float32Array")}} | `-3.4E38` から `3.4E38` および `1.2E-38` （最小の正の数） | 4 | 32 ビット長 IEEE 方式浮動小数点数 (有効桁数 7 桁、例えば `1.234567`) | `unrestricted float` | `float` | -| {{jsxref("Float64Array")}} | `-1.8E308` から `1.8E308` および `5E-324` （最小の正の数） | 8 | 64 ビット長 IEEE 方式浮動小数点数 (有効桁数 16 桁、例えば`1.23456789012345`) | `unrestricted double` | `double` | -| {{jsxref("BigInt64Array")}} | -263 to 263 - 1 | 8 | 64 ビット長、2 の補数方式の符号付き整数値 | `bigint` | `int64_t (signed long long)` | -| {{jsxref("BigUint64Array")}} | 0 to 264 - 1 | 8 | 64 ビット長、符号なし整数値 | `bigint` | `uint64_t (unsigned long long)` | +| 型 | 値の範囲 | サイズ (バイト数) | Web IDL 型 | +| ------------------------------- | ---------------------------------------------------------- | ----------------- | --------------------- | +| {{jsxref("Int8Array")}} | -128 から 127 | 1 | `byte` | +| {{jsxref("Uint8Array")}} | 0 から 255 | 1 | `octet` | +| {{jsxref("Uint8ClampedArray")}} | 0 から 255 | 1 | `octet` | +| {{jsxref("Int16Array")}} | -32768 から 32767 | 2 | `short` | +| {{jsxref("Uint16Array")}} | 0 から 65535 | 2 | `unsigned short` | +| {{jsxref("Int32Array")}} | -2147483648 から 2147483647 | 4 | `long` | +| {{jsxref("Uint32Array")}} | 0 から 4294967295 | 4 | `unsigned long` | +| {{jsxref("Float32Array")}} | `-3.4E38` から `3.4E38` および `1.2E-38` （最小の正の数） | 4 | `unrestricted float` | +| {{jsxref("Float64Array")}} | `-1.8E308` から `1.8E308` および `5E-324` （最小の正の数） | 8 | `unrestricted double` | +| {{jsxref("BigInt64Array")}} | -263 to 263 - 1 | 8 | `bigint` | +| {{jsxref("BigUint64Array")}} | 0 to 264 - 1 | 8 | `bigint` | + +### 値のエンコード方式と正規化 + +すべての型付き配列は `ArrayBuffer` を操作して、各要素の正確なバイト表現を見ることができますので、数値がバイナリー形式でどのようにエンコードされているかが重要です。 + +- 符号なし整数の配列 (`Uint8Array`, `Uint16Array`, `Uint32Array`, `BigUint64Array`) は、数値を直接バイナリーで格納します。 +- 符号付き整数の配列 (`Int8Array`, `Int16Array`, `Int32Array`, `BigInt64Array`) は、数値を [2 の補数](https://ja.wikipedia.org/wiki/2の補数)を用いて格納します。 +- 浮動小数点の配列 (`Float32Array`, `Float64Array`) は [IEEE 754](https://ja.wikipedia.org/wiki/IEEE_754) 浮動小数点形式を使用して数値を格納します。 [`Number`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#number_encoding) のリファレンスには、正確な形式についての詳細情報があります。 JavaScript の数値は既定では倍精度浮動小数点数で、 `Float64Array` と同じ形式を使用します。 `Float32Array` で仮数に（52 ビットの代わりに）23 ビット、指数に（11 ビットの代わりに） 8 ビットを使用します。仕様では、すべての {{jsxref("NaN")}} 値が同じビットエンコーダ方式を使用することが要求されていますが、正確なビットパターンは実装に依存することに注意してください。 +- `Uint8ClampedArray` は特殊なケースです。これは `Uint8Array` と同じようにバイナリーで格納されますが、範囲外の数値を格納した場合、最上位ビットを切り捨てるのではなく、数学的な値で 0 から 255 の範囲に数値を丸めます。 + +`Int8Array`、`Uint8Array`、`Uint8ClampedArray` を除くすべての型付き配列は、各要素を複数のバイトを使用して格納します。これらのバイトは、最上位から最下位（ビッグエンディアン）、または最下位から最上位（リトルエンディアン）の順に並べられます。詳しい説明は[エンディアン](/ja/docs/Glossary/Endianness)を参照してください。型付き配列は常にプラットフォームネイティブのバイト順を使用します。バッファーから読み書きする際にエンディアンを指定したい場合は、代わりに {{jsxref("DataView")}} を使用してください。 + +これらの型付き配列に書き込む場合、表現可能な範囲外の値は正規化されます。 + +- すべての整数配列（`Uint8ClampedArray`を除く）は[固定幅の数値変換](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#固定長数値への変換)を使用します。 +- `Uint8ClampedArray` は、最初に数値を 0 から 255 の範囲に収めます（255 より大きい値は 255 になり、0 より小さい値は 0 になります）。そして、（切り捨てるのではなく）最も近い整数に丸めます。つまり、 2 つの整数のちょうど中間にある場合は、最も近い偶数の整数に丸めます。例えば、`0.5` は `0`、`1.5` は `2`、`2.5` は `2` となります。 +- `Float32Array` では "round to even" を行い、 64 ビット浮動小数点数を 32 ビットに変換します。これは {{jsxref("Math.fround()")}} で指定されたアルゴリズムと同じです。 ### サイズ変更可能なバッファー表示時の動作について @@ -133,13 +150,13 @@ new TypedArray(buffer, byteOffset, length) ### 引数 - `typedArray` - - : `TypedArray` のサブクラスのインスタンスを指定して呼び出されると、`typedArray` が新しい型付き配列にコピーされます。[長整数](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt)以外の `TypedArray` コンストラクターでは、`typedArray` 引数には[長整数](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt)以外の型付き配列のうちのいずれか（{{JSxRef("Int32Array")}} など）を指定します。同様に、[長整数](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt)の `TypedArray` コンストラクター（{{JSxRef("BigInt64Array")}} または {{JSxRef("BigUint64Array")}}）では、`typedArray` 引数には[長整数](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt)型のいずれかしか指定できません。`typedArray` の各値は、新しい配列にコピーされる前にコンストラクターの対応する型に変換される。新しい型付き配列の長さは `typedArray` の引数の長さと同じになります。 + - : `TypedArray` のサブクラスのインスタンスを指定して呼び出されると、`typedArray` が新しい型付き配列にコピーされます。[長整数](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt)以外の `TypedArray` コンストラクターでは、`typedArray` 引数には[長整数](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt)以外の型付き配列のうちのいずれか（{{jsxref("Int32Array")}} など）を指定します。同様に、[長整数](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt)の `TypedArray` コンストラクター（{{jsxref("BigInt64Array")}} または {{jsxref("BigUint64Array")}}）では、`typedArray` 引数には[長整数](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt)型のいずれかしか指定できません。`typedArray` の各値は、新しい配列にコピーされる前にコンストラクターの対応する型に変換される。新しい型付き配列の長さは `typedArray` の引数の長さと同じになります。 - `object` - : `TypedArray` インスタンスでないオブジェクトで呼び出された場合、[`TypedArray.from()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/from) メソッドと同じ方法で、新しい型付き配列を生成します。 - `length` {{optional_inline}} - : オブジェクト以外で呼び出された場合、引数は型付き配列の長さを指定する数値として扱われます。内部配列バッファーがメモリー内に作成され、サイズは `length` に [`BYTES_PER_ELEMENT`](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT) バイトを乗じたものとなり、0 で満たされます。すべての引数を除外すると、`0` を `length` として使用することと同じになります。 - `buffer`, `byteOffset` {{optional_inline}}, `length` {{optional_inline}} - - : [`ArrayBuffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) または [`SharedArrayBuffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer) インスタンスを指定し、さらに `byteOffset` および `length` 引数を付けて呼び出すと、指定したバッファーを参照する型付き配列ビューを新たに作成することができます。`byteOffset` と `length` の引数は、型付き配列ビューが参照するメモリー範囲を指定します。両方とも省略した場合、`buffer` の全体が参照されます。`length` のみが省略された場合、`buffer` の `byteOffset` 以降の部分が表示されます。`length` が省略された場合、型付き配列は[長さ追跡](#behavior_when_viewing_a_resizable_buffer)となります。 + - : [`ArrayBuffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) または [`SharedArrayBuffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer) インスタンスを指定し、さらに `byteOffset` および `length` 引数を付けて呼び出すと、指定したバッファーを参照する型付き配列ビューを新たに作成することができます。`byteOffset` （バイト単位）と `length` （要素数で、それぞれが [`BYTES_PER_ELEMENT`](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT) バイトを占めます）の引数は、型付き配列ビューが参照するメモリー範囲を指定します。両方とも省略した場合、`buffer` の全体が参照されます。`length` のみが省略された場合、`buffer` の `byteOffset` 以降の部分が表示されます。`length` が省略された場合、型付き配列は[長さ追跡](#behavior_when_viewing_a_resizable_buffer)となります。 ### 例外 @@ -160,15 +177,13 @@ new TypedArray(buffer, byteOffset, length) これらのプロパティは `TypedArray` コンストラクターオブジェクトで定義されており、したがってすべての `TypedArray` サブクラスのコンストラクターで共有されます。 -- {{jsxref("TypedArray.@@species", "get TypedArray[@@species]")}} +- {{jsxref("TypedArray/@@species", "TypedArray[@@species]")}} - : 派生オブジェクトを作成するために使用されるコンストラクター関数です。 すべての `TypedArray` サブクラスには以下の静的プロパティもあります。 - {{jsxref("TypedArray.BYTES_PER_ELEMENT")}} - - : さまざまな `TypedArray` オブジェクトの要素のサイズを数値で返します。 -- {{jsxref("TypedArray.name")}} - - : コンストラクターの[名前](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/name)を文字列値で返します（例: `"Int8Array"`）。 + - : さまざまな {{jsxref("TypedArray")}} インスタンスの要素のサイズを数値で返します。 ## 静的メソッド @@ -181,7 +196,7 @@ new TypedArray(buffer, byteOffset, length) ## インスタンスプロパティ -これらのプロパティは `TypedArray` のプロトタイプオブジェクトで定義されており、すべての `TypedArray` のサブクラスインスタンスで共有されています。 +これらのプロパティは `TypedArray.prototype` オブジェクトで定義されており、すべての `TypedArray` のサブクラスインスタンスで共有されています。 - {{jsxref("TypedArray.prototype.buffer")}} - : この型付き配列によって参照さている {{jsxref("ArrayBuffer")}} を返します。 @@ -194,12 +209,12 @@ new TypedArray(buffer, byteOffset, length) - {{jsxref("TypedArray.prototype.length")}} - : 型付き配列内に保持された要素の数を返します。 - `TypedArray.prototype[@@toStringTag]` - - : [`TypedArray.prototype[@@toStringTag]`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) プロパティの初期値はゲッターで、型付き配列の[名前](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/name)と同じ文字列を返します。このプロパティは `this` の値が型付き配列のサブクラスのいずれでもない場合、 `undefined` を返します。このプロパティは {{jsxref("Object.prototype.toString()")}} で使用されます。ただし、`TypedArray` は独自の [`toString()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/toString) メソッドを持っているので、このプロパティは[`Object.prototype.toString.call()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call)を `thisArg` に型付き配列を設定して呼び出差ない限り、このプロパティの使用されません。 + - : [`TypedArray.prototype[@@toStringTag]`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) プロパティの初期値はゲッターで、型付き配列ののコンストラクター名と同じ文字列を返します。このプロパティは `this` の値が型付き配列のサブクラスのいずれでもない場合、 `undefined` を返します。このプロパティは {{jsxref("Object.prototype.toString()")}} で使用されます。ただし、`TypedArray` は独自の [`toString()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/toString) メソッドを持っているので、このプロパティは[`Object.prototype.toString.call()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call)を `thisArg` に型付き配列を設定して呼び出差ない限り、このプロパティの使用されません。 すべての `TypedArray` のサブクラスには、以下のインスタンスプロパティもあります。 - {{jsxref("TypedArray.prototype.BYTES_PER_ELEMENT")}} - - : 様々な `TypedArray` オブジェクトの要素の大きさを数値で返します。 + - : 様々な {{jsxref("TypedArray")}} インスタンスの要素の大きさを数値で返します。 ## インスタンスメソッド @@ -224,7 +239,7 @@ new TypedArray(buffer, byteOffset, length) - {{jsxref("TypedArray.prototype.findLast()")}} - : 指定されたテスト関数を満たす配列の最後の要素の値を返し、適切な要素が得られなかった場合は `undefined` を返します。{{jsxref("Array.prototype.findLast()")}} も参照してください。 - {{jsxref("TypedArray.prototype.findLastIndex()")}} - - : 指定されたテスト関数を満たす配列の最後の要素の添字を返し、適切な要素が見つからなかった場合は `-1` を返します。{{jsxref("Array.prototype.findLastIndex()")}} も参照してください。 + - : 指定されたテスト関数を満たす配列の最後の要素のインデックスを返し、適切な要素が見つからなかった場合は `-1` を返します。{{jsxref("Array.prototype.findLastIndex()")}} も参照してください。 - {{jsxref("TypedArray.prototype.forEach()")}} - : 配列内の各要素に対する関数を呼び出します。 {{jsxref("Array.prototype.forEach()")}} も参照してください。 - {{jsxref("TypedArray.prototype.includes()")}} @@ -255,20 +270,26 @@ new TypedArray(buffer, byteOffset, length) - : 配列の要素をソートし、その結果を返します。 {{jsxref("Array.prototype.sort()")}} も参照してください。 - {{jsxref("TypedArray.prototype.subarray()")}} - : 与えられた開始位置と終了位置の要素インデックスから、新しい `TypedArray` を返します。 -- {{jsxref("TypedArray.prototype.values()")}} - - : 配列内のそれぞれの位置に対する値を含む新しい配列イテレーターオブジェクトを返します。 {{jsxref("Array.prototype.values()")}} も参照してください。 - {{jsxref("TypedArray.prototype.toLocaleString()")}} - : 配列と要素を表すローカライズされた文字列を返します。 {{jsxref("Array.prototype.toLocaleString()")}} も参照してください。 +- {{jsxref("TypedArray.prototype.toReversed()")}} + - : 元の配列を変更せずに、要素を逆順に並べた新しい配列を返します。 +- {{jsxref("TypedArray.prototype.toSorted()")}} + - : 元の配列を変更せずに、要素を昇順に並べた新しい配列を返します。 - {{jsxref("TypedArray.prototype.toString()")}} - : 配列と要素を表す文字列を返します。 {{jsxref("Array.prototype.toString()")}} も参照してください。 -- {{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}} +- {{jsxref("TypedArray.prototype.values()")}} + - : 配列内のそれぞれの位置に対する値を含む新しい配列イテレーターオブジェクトを返します。 {{jsxref("Array.prototype.values()")}} も参照してください。 +- {{jsxref("TypedArray.prototype.with()")}} + - : 指定された位置の要素を指定された値で置き換えた新しい配列を、元の配列に変更を加えることなく返します。 +- [`TypedArray.prototype[@@iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator) - : 配列内でそれぞれの位置に対する値を含む新しい配列イテレーターオブジェクトを返します。 ## 例 ### プロパティへのアクセス -配列内の要素は、標準の配列の添字構文 (すなわち、かぎ括弧を使用する表記) を使用して参照することができます。しかし、型付き配列で添字付きプロパティで取得または設定するときは、範囲外の添字でもプロパティのプロトタイプチェーンを探索しません。添字付きプロパティは {{jsxref("ArrayBuffer")}} を調べるのであり、オブジェクトのプロパティは探索しません。他のオブジェクト同様に、名前付きプロパティは使用できます。 +配列内の要素は、標準の配列の添字構文 (すなわち、かぎ括弧を使用する表記) を使用して参照することができます。しかし、型付き配列でインデックス付きプロパティで取得または設定するときは、範囲外のインデックスでもプロパティのプロトタイプチェーンを探索しません。インデックス付きプロパティは {{jsxref("ArrayBuffer")}} を調べるのであり、オブジェクトのプロパティは探索しません。他のオブジェクト同様に、名前付きプロパティは使用できます。 ```js // 標準的な配列構文を使用して設定および取得 @@ -276,7 +297,7 @@ const int16 = new Int16Array(2); int16[0] = 42; console.log(int16[0]); // 42 -// プロトタイプで添字付き配列を使用しても探索しない (Fx 25) +// プロトタイプでインデックス付き配列を使用しても探索しない (Fx 25) Int8Array.prototype[20] = "foo"; new Int8Array(32)[20]; // 0 // even when out of bound @@ -338,7 +359,7 @@ const i32 = new Int32Array(new ArrayBuffer(4)); ## 関連情報 - [型付き配列のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) -- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド - {{jsxref("ArrayBuffer")}} - {{jsxref("DataView")}} -- [TextDecoder](/ja/docs/Web/API/TextDecoder) — 数値データから文字列をデコードするヘルパー +- {{domxref("TextDecoder")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/indexof/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/indexof/index.md index 55fad6bdebd700..147a6711481fc9 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/indexof/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/indexof/index.md @@ -2,12 +2,12 @@ title: TypedArray.prototype.indexOf() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/indexOf l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f --- {{JSRef}} -**`indexOf()`** メソッドは、指定された要素が型付き配列内で見つかった最初の添字を返し、存在しなければ -1 を返します。このメソッドは {{jsxref("Array.prototype.indexOf()")}} と同じアルゴリズムです。 _TypedArray_ は、ここでは[型付き配列型](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)のうちの一つです。 +**`indexOf()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、指定された要素が型付き配列内で見つかった最初のインデックスを返し、存在しなければ -1 を返します。このメソッドは {{jsxref("Array.prototype.indexOf()")}} と同じアルゴリズムです。 {{EmbedInteractiveExample("pages/js/typedarray-indexof.html")}} @@ -23,19 +23,19 @@ indexOf(searchElement, fromIndex) - `searchElement` - : 型付き配列内を検索する要素。 - `fromIndex` {{optional_inline}} - - : 検索開始位置の添字。添字が型付き配列の長さ以上なら、 -1 が返り、これは型付き配列が検索されなかったことを意味します。与えられた添字が負の数の場合、型付き配列の最後からのオフセット値として扱われます。注意: 指定された添字が負の数であっても、型付き配列は前から後ろに向けて検索されます。計算された添字が 0 未満になった場合は、型付き配列の全体が検索されます。既定値: 0 （型付き配列全体が検索されます）。 + - : 検索を始める位置を示すゼロ基点のインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 ### 返値 -配列内の要素の最初の添字です。見つからなかったら `-1` になります。 +型付き配列内の最初の `searchElement` のインデックスです。見つからなかったら `-1` になります。 ## 解説 -`indexOf` は `searchElement` と型付き配列の要素を、[厳密等価](/ja/docs/Web/JavaScript/Equality_comparisons_and_sameness#_による厳密な等価性) (===、イコール 3 つの演算子と同じ方法) を使用して比較します。 +詳細については、 {{jsxref("Array.prototype.indexOf()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 ## 例 -### indexOf の使用 +### indexOf() の使用 ```js const uint8 = new Uint8Array([2, 5, 9]); @@ -57,5 +57,10 @@ uint8.indexOf(2, -3); // 0 ## 関連情報 - [`TypedArray.prototype.indexOf` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド +- {{jsxref("TypedArray")}} +- {{jsxref("TypedArray.prototype.findIndex()")}} +- {{jsxref("TypedArray.prototype.findLastIndex()")}} - {{jsxref("TypedArray.prototype.lastIndexOf()")}} - {{jsxref("Array.prototype.indexOf()")}} +- {{jsxref("String.prototype.indexOf()")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/join/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/join/index.md index 6ba5aa519fbdae..4a6872b7c958f1 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/join/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/join/index.md @@ -2,12 +2,12 @@ title: TypedArray.prototype.join() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/join l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f --- {{JSRef}} -**`join()`** メソッドは、配列のすべての要素を 1 本の文字列に結合します。このメソッドのアルゴリズムは {{jsxref("Array.prototype.join()")}} と同じです。ここで _TypedArray_ は、[型付き配列型](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)のうちの 1 つです。 +**`join()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、この型付き配列のすべての要素を、カンマまたは指定する区切り文字で連結して新しい文字列を作成して返します。型付き配列に 1 つの項目しかない場合、その項目は区切り文字を使用せずに返します。このメソッドのアルゴリズムは {{jsxref("Array.prototype.join()")}} と同じです。 {{EmbedInteractiveExample("pages/js/typedarray-join.html")}} @@ -25,7 +25,11 @@ join(separator) ### 返値 -配列のすべての要素が結合された文字列です。 +型付き配列の要素をすべて連結した文字列です。 `array.length` が `0` の場合は空文字列を返します。 + +## 解説 + +詳細については、 {{jsxref("Array.prototype.join()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 ## 例 @@ -49,5 +53,8 @@ uint8.join(""); // '123' ## 関連情報 - [`TypedArray.prototype.join` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド - {{jsxref("TypedArray")}} +- {{jsxref("TypedArray.prototype.toString()")}} - {{jsxref("Array.prototype.join()")}} +- {{jsxref("String.prototype.split()")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/keys/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/keys/index.md index 08967301d497ac..72b581fff0e7c4 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/keys/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/keys/index.md @@ -2,12 +2,12 @@ title: TypedArray.prototype.keys() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/keys l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`keys()`** メソッドは、配列内の各添字に対するキーを含む新しい配列イテレーターオブジェクトを返します。 +**`keys()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、配列内の各インデックスに対するキーを含む新しい[配列イテレーター](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)オブジェクトを返します。このメソッドのアルゴリズムは {{jsxref("Array.prototype.keys()")}} と同じです。 {{EmbedInteractiveExample("pages/js/typedarray-keys.html")}} @@ -17,9 +17,17 @@ l10n: keys() ``` +### 引数 + +なし。 + ### 返値 -新しい配列イテレーターオブジェクトです。 +新しい[配列イテレーターオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)です。 + +## 解説 + +詳細については、 {{jsxref("Array.prototype.keys()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 ## 例 @@ -56,10 +64,10 @@ console.log(arrKeys.next().value); // 4 ## 関連情報 - [`TypedArray.prototype.keys` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) -- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays) - {{jsxref("TypedArray")}} - {{jsxref("TypedArray.prototype.entries()")}} - {{jsxref("TypedArray.prototype.values()")}} -- {{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}} -- [for...of](/ja/docs/Web/JavaScript/Reference/Statements/for...of) +- [`TypedArray.prototype[@@iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator) +- {{jsxref("Array.prototype.keys()")}} - [反復処理プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols) diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/lastindexof/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/lastindexof/index.md index c6861ad34ccdaa..31c0a4e79b5b75 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/lastindexof/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/lastindexof/index.md @@ -2,12 +2,12 @@ title: TypedArray.prototype.lastIndexOf() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/lastIndexOf l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f --- {{JSRef}} -**`lastIndexOf()`** メソッドは、指定された要素が型付き配列内で見つかった最後の位置の添字を返し、存在しなければ -1 を返します。型付き配列は `fromIndex` で始まる位置から逆方向に検索されます。 このメソッドは {{jsxref("Array.prototype.lastIndexOf()")}} と同じアルゴリズムです。 _TypedArray_ は、ここでは[型付き配列型](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)のうちの一つです。 +**`lastIndexOf()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、指定された要素が型付き配列内で見つかった最後の位置のインデックスを返し、存在しなければ -1 を返します。型付き配列は `fromIndex` で始まる位置から逆方向に検索されます。 このメソッドは {{jsxref("Array.prototype.lastIndexOf()")}} と同じアルゴリズムです。 {{EmbedInteractiveExample("pages/js/typedarray-lastindexof.html")}} @@ -22,20 +22,20 @@ lastIndexOf(searchElement, fromIndex) - `searchElement` - : 型付き配列内で検索する要素。 -- `fromIndex` - - : オプション。逆方向に検索を開始する位置の添字。既定値は型付き配列の長さで、すなわち型付き配列全体が検索されます。添字が型付き配列の長さ以上の場合、型付き配列全体が検索されます。添字が負の数の場合、型付き配列の末尾からのオフセットとして扱われます。添字が負の数であっても、型付き配列は末尾から先頭に向けて検索されます。計算された添字が 0 未満になった場合は、 -1 が返され、すなわち型付き配列は検索されません。 +- `fromIndex` {{optional_inline}} + - : 検索を始める位置を示すゼロ基点のインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 ### 返値 -配列内の要素の最後の添字です。見つからなかったら `-1` になります。 +型付き配列内における最後の `searchElement` のインデックスです。見つからなかったら `-1` になります。 ## 解説 -`lastIndexOf` は `searchElement` と型付き配列の要素を、[厳密等価](/ja/docs/Web/JavaScript/Equality_comparisons_and_sameness#_による厳密な等価性) (===、イコール 3 つの演算子と同じ方法) を使用して比較します。 +詳細については、 {{jsxref("Array.prototype.lastIndexOf()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 ## 例 -### lastIndexOf の使用 +### lastIndexOf() の使用 ```js const uint8 = new Uint8Array([2, 5, 9, 2]); @@ -58,5 +58,10 @@ uint8.lastIndexOf(2, -1); // 3 ## 関連情報 - [`TypedArray.prototype.lastIndexOf` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays) +- {{jsxref("TypedArray")}} +- {{jsxref("TypedArray.prototype.findIndex()")}} +- {{jsxref("TypedArray.prototype.findLastIndex()")}} - {{jsxref("TypedArray.prototype.indexOf()")}} - {{jsxref("Array.prototype.lastIndexOf()")}} +- {{jsxref("String.prototype.lastIndexOf()")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/length/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/length/index.md index bd4c5e76eb2c2a..677a891aa29e38 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/length/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/length/index.md @@ -2,14 +2,14 @@ title: TypedArray.prototype.length slug: Web/JavaScript/Reference/Global_Objects/TypedArray/length l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: c2445ce1dc3a0170e2fbfdbee10e18a7455c2282 --- {{JSRef}} -**`length`** アクセサープロパティは、型付き配列の長さを（要素数で）表します。 +**`length`** は {{jsxref("TypedArray")}} インスタンスのアクセサープロパティで、型付き配列の長さを（要素数で）返します。 -{{EmbedInteractiveExample("pages/js/typedarray-length.html","shorter")}} +{{EmbedInteractiveExample("pages/js/typedarray-length.html", "shorter")}} ## 解説 @@ -42,5 +42,5 @@ uint8.length; // 6 （構築された Uint8Array のオフセットによる） ## 関連情報 -- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays) - {{jsxref("TypedArray")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/map/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/map/index.md index b95a37b5c5fd0a..062ed309515bb4 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/map/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/map/index.md @@ -2,69 +2,44 @@ title: TypedArray.prototype.map() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/map l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`map()`** メソッドは、与えられた関数を型付き配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。このメソッドは、{{jsxref("Array.prototype.map()")}} と同じアルゴリズムです。 _TypedArray_ は、ここでは[型付き配列型](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)の一つです。 +**`map()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、与えられた関数を呼び出された型付き配列のすべての要素に対して呼び出し、その結果からなる新しい型付き配列を生成します。このメソッドは、 {{jsxref("Array.prototype.map()")}} と同じアルゴリズムです。 {{EmbedInteractiveExample("pages/js/typedarray-map.html", "shorter")}} ## 構文 ```js-nolint -// アロー関数 -map((currentValue) => { /* ... */ } ) -map((currentValue, index) => { /* ... */ } ) -map((currentValue, index, array) => { /* ... */ } ) - -// コールバック関数 map(callbackFn) map(callbackFn, thisArg) - -// インラインコールバック関数 -map(function(currentValue) { /* ... */ }) -map(function(currentValue, index) { /* ... */ }) -map(function(currentValue, index, array){ /* ... */ }) -map(function(currentValue, index, array) { /* ... */ }, thisArg) ``` ### 引数 - `callbackFn` - - : 新しい型付き配列の要素を生み出すコールバック関数です。 - - この関数は、以下の引数で呼び出されます。 - - - `currentValue` - - : 現在処理中の要素の値です。 + - : 型付き配列のそれぞれの要素に対して実行する関数。その返値は、新しい型付き配列の単一の要素として追加されます。この関数は以下の引数で呼び出されます。 + - `element` + - : 型付き配列で現在処理されている要素です。 - `index` - - : 現在処理中の要素の型付き配列内における添字です。 + - : 現在処理中の要素の型付き配列内におけるインデックスです。 - `array` - - : `map()` が実行されている型付き配列です。 + - : `map()` が呼び出されてた型付き配列です。 - `thisArg` {{optional_inline}} - - : `callbackFn` を実行するときに `this` として使う値です。 + - : `callbackFn` を実行する際に `this` として使用する値。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。 ### 返値 -新しい型付き配列です。 +各要素がコールバック関数の結果である新しい型付き配列です。 ## 解説 -`map()` は、与えられたコールバック関数 (`callbackFn`) を型付き配列の各要素に対して、順番通りに一度ずつ呼び出し、その結果から新しい配列を生成します。 - -`callbackFn` は型付き配列のインデックスのうち、値が割り当てられているものにのみ呼び出しす。 `undefined` であるインデックス、すなわち削除されたか値が割り当てられたことがないインデックスには呼び出しません。 - -`callbackFn` は、要素の値、要素の添字、走査中の型付き配列オブジェクトという 3 つの引数をともなって呼び出されます。 - -`thisArg` 引数が `map()` に与えられた場合は、それが `callbackFn` の呼び出し時に渡され、 `this` として使用されます。そうでない場合は、 {{jsxref("undefined")}} が `this` の値として使用されます。 `callbackFn` から最終的に見える `this` の値は、[関数における通常の `this` を決定するルール](/ja/docs/Web/JavaScript/Reference/Operators/this)に従って決まります。 - -`map()` は呼び出された型付き配列を変化させません（ただし、 `callbackFn` が呼び出されたあ愛は、変更する可能性はあります）。 - -`map()` によって処理される要素の範囲は、 `callbackFn` が最初に呼び出される前に設定されます。 `map()` の呼び出しが開始された後に追加された要素に対しては、 `callbackFn` は実行されません。既存の配列要素が変更されたり、削除された場合、 `callbackFn` に渡される値は `map()` がそれらを訪れた時点での値になり、削除された要素を訪問することはありません。 +詳細については、 {{jsxref("Array.prototype.map()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 ## 例 @@ -101,5 +76,9 @@ const doubles = numbers.map((num) => num * 2); ## 関連情報 - [`TypedArray.prototype.map` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) -- {{jsxref("TypedArray.prototype.filter()")}} +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド +- {{jsxref("TypedArray")}} +- {{jsxref("TypedArray.prototype.forEach()")}} +- {{jsxref("TypedArray.from()")}} - {{jsxref("Array.prototype.map()")}} +- {{jsxref("Map")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/of/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/of/index.md index f1952c02dde1a3..87f71340d1ff8d 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/of/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/of/index.md @@ -2,21 +2,22 @@ title: TypedArray.of() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/of l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: c2445ce1dc3a0170e2fbfdbee10e18a7455c2282 --- {{JSRef}} **`TypedArray.of()`** メソッドは、引数の変数番号から新しい[型付き配列](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)を生成します。このメソッドは {{jsxref("Array.of()")}} とほぼ同じです。 -{{EmbedInteractiveExample("pages/js/typedarray-of.html","shorter")}} +{{EmbedInteractiveExample("pages/js/typedarray-of.html", "shorter")}} ## 構文 ```js-nolint -TypedArray.of(element0) -TypedArray.of(element0, element1) -TypedArray.of(element0, element1, /* ... ,*/ elementN) +TypedArray.of() +TypedArray.of(element1) +TypedArray.of(element1, element2) +TypedArray.of(element1, element2, /* …, */ elementN) ``` ここで `TypedArray` は次のいずれかです。 @@ -35,8 +36,8 @@ TypedArray.of(element0, element1, /* ... ,*/ elementN) ### 引数 -- `elementN` - - : 型付き配列を生成するときの構成する要素。 +- `element1`, …, `elementN` + - : 型付き配列を作成するのに使われる要素です。 ### 返値 @@ -44,9 +45,9 @@ TypedArray.of(element0, element1, /* ... ,*/ elementN) ## 解説 -{{jsxref("Array.of()")}} と `TypedArray.of()` との間にいくつかの微妙な違いがあります。 +詳細については、 {{jsxref("Array.of()")}} をご覧ください。 {{jsxref("Array.of()")}} と `TypedArray.of()` との間にはいくつか微妙な違いがあります。 -- `TypedArray.of()` に渡された `this` の値がコンストラクターではなかった場合、 `TypedArray.of()` で {{jsxref("TypeError")}} が発生します。これは `Array.of()` が既定で新しい {{jsxref("Array")}} を生成するためです。 +- `TypedArray.of()` に渡された `this` の値がコンストラクターではなかった場合、 `TypedArray.of()` では {{jsxref("TypeError")}} が発生します。一方、 `Array.of()` は既定で新しい {{jsxref("Array")}} を生成します。 - `TypedArray.of()` は `[[Set]]` を使用するのに対し、 `Array.of()` は `[[DefineProperty]]` を使用します。従って {{jsxref("Proxy")}} オブジェクトを使っている場合は、新しい要素を追加するときに [`handler.set()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set) が [`handler.defineProperty()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/defineProperty) の代わりに呼び出されます。 ## 例 @@ -71,5 +72,7 @@ Int16Array.of(undefined); // Int16Array [ 0 ] ## 関連情報 - [`TypedArray.of` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド +- {{jsxref("TypedArray")}} - {{jsxref("TypedArray.from()")}} - {{jsxref("Array.of()")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/reduce/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/reduce/index.md index 32835b150dd1cf..c724bd4fc9967c 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/reduce/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/reduce/index.md @@ -2,66 +2,53 @@ title: TypedArray.prototype.reduce() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/reduce l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f --- {{JSRef}} -**`reduce()`** メソッドは、アキュームレーターと型付き配列のそれぞれの値に対して (左から右へ) 関数を適用していき、単一の値にまとめます。このメソッドは、{{jsxref("Array.prototype.reduce()")}}と同じアルゴリズムです。 _TypedArray_ は、ここでは[型付き配列型](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)の一つです。 +**`reduce()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、型付き配列のそれぞれの要素に対して、ユーザーが提供した「縮小」コールバック関数を呼び出します。その際、直前の要素における計算結果の返値を渡します。型付き配列のすべての要素に対して縮小関数を実行した結果が単一の値が最終結果になります。このメソッドは、{{jsxref("Array.prototype.reduce()")}}と同じアルゴリズムです。 {{EmbedInteractiveExample("pages/js/typedarray-reduce.html")}} ## 構文 ```js-nolint -// アロー関数 -reduce((accumulator, currentValue) => { /* ... */ } ) -reduce((accumulator, currentValue, index) => { /* ... */ } ) -reduce((accumulator, currentValue, index, array) => { /* ... */ } ) -reduce((accumulator, currentValue, index, array) => { /* ... */ }, initialValue) - -// コールバック関数 reduce(callbackFn) reduce(callbackFn, initialValue) - -// インラインコールバック関数 -reduce(function(accumulator, currentValue) { /* ... */ }) -reduce(function(accumulator, currentValue, index) { /* ... */ }) -reduce(function(accumulator, currentValue, index, array){ /* ... */ }) -reduce(function(accumulator, currentValue, index, array) { /* ... */ }, initialValue) ``` ### 引数 - `callbackFn` - - : 型付き配列内の各値に対して実行する関数です。 - - この関数は以下の引数で呼び出されます。 - + - : 型付き配列の各要素に対して実行される関数です。その返値は、次に `callbackFn` を呼び出す際の `accumulator` 引数の値になります。最後の呼び出しでは、返値は `reduce()` の返値となります。この関数は以下の引数で呼び出されます。 - `accumulator` - - : 前回のコールバック関数の呼び出しで返された値。または、提供された場合は `initialValue`（下記参照）。 + - : 前回 `callbackFn` を呼び出した結果の値。最初の呼び出しでは、後で `initialValue` を指定した場合はその値になり、指定されなかった場合は `array[0]` になります。 - `currentValue` - - : 現在処理されている型付き配列の要素。 - - `index` - - : 現在処理されている型付き配列要素の添字。 + - : 現在の要素の値。最初の呼び出しでは、 `initialValue` を指定した場合は `array[0]` となり、指定しなかった場合は `array[1]` となります。 + - `currentIndex` + - : 型付き配列の `currentValue` を入力するインデックスの位置。最初の呼び出しで `initialValue` を指定した場合は `0`、そうでない場合は `1` となります。 - `array` - : `reduce()` が呼び出された型付き配列。 -- `initialValue` - - : 任意。 `callbackFn` 関数の最初の呼び出しの最初の引数として使用するオブジェクト。 +- `initialValue` {{optional_inline}} + - : コールバックが最初に呼び出された時に `accumulator` が初期化される値です。 + `initialValue` が指定された場合、`callbackFn` は配列の最初の値を `currentValue` として実行を開始します。 + もし `initialValue` が指定されなかった場合、`accumulator` は配列の最初の値に初期化され、`callbackFn` は配列の 2 つ目の値を `currentValue` として実行を開始します。この場合、配列が空であれば（`accumulator`として返す最初の値がなければ）エラーが発生します。 ### 返値 -畳み込みによって得られた 1 つの値です。 +型付き配列全体にわたって「縮小」コールバック関数を実行した結果の値です。 -## 解説 +### 例外 -`reduce` メソッドは、型付き配列に存在するそれぞれの要素に対して（型付き配列の中の穴は除く）`callbackFn` 関数を一度ずつ実行します。この関数は、初期値（または直前の `callbackFn` 呼び出し）、現在の要素の値、現在の添字、反復処理中の型付き配列の 4 つの引数を受け取ります。 +- {{jsxref("TypeError")}} + - : 型付き配列に要素がなく、かつ `initialValue` が提供されなかった場合に発生します。 -最初にコールバック関数が呼び出されたときは、 `accumulator` と `currentValue` は、二つの値を一つにまとめます。 `reduce` の呼び出し時に `initialValue` が与えられた場合、 `accumulator` は `initialValue` に等しくなり、 `currentValue` は、型付き配列の最初の値と等しくなります。 `initialValue` が与えられなかった場合、 `accumulator` は、型付き配列の最初の値と等しくなり、 `currentValue` は 2 番目の値と等しくなります。 +## 解説 -型付き配列が空で、 `initialValue` が与えられなかった場合、 {{jsxref("TypeError")}} が発生します。型付き配列が (位置に関係なく) 一つの要素しか持たず、 `initialValue` が与えられなかった場合、もしくは、 `initialValue` が与えられたが型付き配列が空の場合、 `callbackFn` 関数の呼び出しなしで、単独の値が返されることになります。 +詳細については、 {{jsxref("Array.prototype.reduce()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 ## 例 @@ -83,5 +70,10 @@ const total = new Uint8Array([0, 1, 2, 3]).reduce((a, b) => a + b); ## 関連情報 - [`TypedArray.prototype.reduce` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド +- {{jsxref("TypedArray")}} +- {{jsxref("TypedArray.prototype.map()")}} - {{jsxref("TypedArray.prototype.reduceRight()")}} - {{jsxref("Array.prototype.reduce()")}} +- {{jsxref("Object.groupBy()")}} +- {{jsxref("Map.groupBy()")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/reduceright/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/reduceright/index.md index cd1b7ce3b31200..89d1411fdc3b5e 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/reduceright/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/reduceright/index.md @@ -2,54 +2,38 @@ title: TypedArray.prototype.reduceRight() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/reduceRight l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f --- {{JSRef}} -**`reduceRight()`** メソッドは、アキュームレーターと型付き配列のそれぞれの値に対して（右から左へ）関数を適用していき、単一の値にまとめます。このメソッドは、{{jsxref("Array.prototype.reduceRight()")}}と同じアルゴリズムです。 _TypedArray_ は、ここでは[型付き配列型](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)の一つです。 +**`reduceRight()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、アキュームレーターと型付き配列のそれぞれの値に対して（右から左へ）関数を適用していき、単一の値にまとめます。このメソッドは、{{jsxref("Array.prototype.reduceRight()")}}と同じアルゴリズムです。 {{EmbedInteractiveExample("pages/js/typedarray-reduceright.html")}} ## 構文 ```js-nolint -// アロー関数 -reduceRight((accumulator, currentValue) => { /* ... */ } ) -reduceRight((accumulator, currentValue, index) => { /* ... */ } ) -reduceRight((accumulator, currentValue, index, array) => { /* ... */ } ) -reduceRight((accumulator, currentValue, index, array) => { /* ... */ }, initialValue) - -// コールバック関数 reduceRight(callbackFn) reduceRight(callbackFn, initialValue) - -// インラインコールバック関数 -reduceRight(function(accumulator, currentValue) { /* ... */ }) -reduceRight(function(accumulator, currentValue, index) { /* ... */ }) -reduceRight(function(accumulator, currentValue, index, array){ /* ... */ }) -reduceRight(function(accumulator, currentValue, index, array) { /* ... */ }, initialValue) ``` ### 引数 - `callbackFn` - - : 型付き配列内の各値に対して実行する関数です。 - - この関数は以下の引数で呼びされます。 - + - : 型付き配列の各要素に対して実行される関数です。その返値は、次に `callbackFn` を呼び出す際の `accumulator` 引数の値になります。最後の呼び出しでは、返値は `reduce()` の返値となります。この関数は以下の引数で呼び出されます。 - `accumulator` - - : 前回のコールバック関数の呼び出しで返された値。または、提供された場合は `initialValue`（下記参照）。 + - : 前回 `callbackFn` を呼び出した結果の値。最初の呼び出しでは、後で `initialValue` を指定した場合はその値になり、指定されなかった場合は型付き配列の最後の要素になります。 - `currentValue` - - : 現在処理されている型付き配列の要素。 - - `index` - - : 現在処理されている型付き配列要素の添字。 + - : 現在の要素の値。最初の呼び出しでは、 `initialValue` を指定した場合は最後の要素となり、指定しなかった場合は最後から 2 番目の要素となります。 + - `currentIndex` + - : 型付き配列の `currentValue` を入力するインデックスの位置。最初の呼び出しで `initialValue` を指定した場合は `array.length - 1`、そうでない場合は `array.length - 2` となります。 - `array` - - : `reduceRight()` が呼び出された型付き配列 + - : `reduceRight()` が呼び出された型付き配列。 -- `initialValue` - - : 任意。 `callbackFn` 関数の最初の呼び出しの最初の引数として使用するオブジェクト。 +- `initialValue` {{optional_inline}} + - : `callbackFn` を最初に呼び出す際の `accumulator` として使用される値。初期値が与えられなかった場合は、型付き配列の最後の要素が使用され、その値はスキップされます。初期値のない空の型付き配列に対して `reduceRight()` を呼び出すと `TypeError` が発生します。 ### 返値 @@ -57,19 +41,7 @@ reduceRight(function(accumulator, currentValue, index, array) { /* ... */ }, ini ## 解説 -`reduceRight` メソッドは、型付き配列に存在するそれぞれの要素に対して（型付き配列の中の穴は除く）`callbackFn` 関数を一度ずつ実行します。この関数は、初期値（または直前の `callbackFn` 呼び出し）、現在の要素の値、現在の添字、反復処理中の型付き配列の 4 つの引数を受け取ります。 - -`reduceRight` のコールバックの呼び出しは、下記のようになります。 - -```js -typedarray.reduceRight((accumulator, currentValue, index, typedarray) => { - // ... -}); -``` - -最初にコールバック関数が呼び出されたときは、 `accumulator` と `currentValue` は、2 つの値を一つにまとめます。 `reduceRight` の呼び出し時に `initialValue` が与えられた場合、 `accumulator` は `initialValue` に等しくなり、 `currentValue` は、型付き配列の最後の値と等しくなります。 `initialValue` が与えられなかった場合、 `accumulator` は、型付き配列の最後の値と等しくなり、 `currentValue` は最後から数えて 2 番目の値と等しくなります。 - -型付き配列が空で、 `initialValue` が与えられなかった場合、 {{jsxref("TypeError")}} が発生します。型付き配列が (位置に関係なく) 一つの要素しか持たず、 `initialValue` が与えられなかった場合、もしくは、 `initialValue` が与えられたが型付き配列が空の場合、 `callbackFn` 関数の呼び出しなしで、単独の値が返されることになります。 +詳細については、 {{jsxref("Array.prototype.reduceRight()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 ## 例 @@ -91,5 +63,10 @@ const total = new Uint8Array([0, 1, 2, 3]).reduceRight((a, b) => a + b); ## 関連情報 - [`TypedArray.prototype.reduceRight` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド +- {{jsxref("TypedArray")}} +- {{jsxref("TypedArray.prototype.map()")}} - {{jsxref("TypedArray.prototype.reduce()")}} - {{jsxref("Array.prototype.reduceRight()")}} +- {{jsxref("Object.groupBy()")}} +- {{jsxref("Map.groupBy()")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/reverse/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/reverse/index.md index eb71839622fcfb..f1028c9e50efdc 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/reverse/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/reverse/index.md @@ -2,14 +2,14 @@ title: TypedArray.prototype.reverse() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/reverse l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: c2445ce1dc3a0170e2fbfdbee10e18a7455c2282 --- {{JSRef}} -**`reverse()`** メソッドは、その場で型付き配列を反転します。型付き配列の先頭の要素は末尾になり、末尾の要素は先頭になります。このメソッドは {{jsxref("Array.prototype.reverse()")}} と同じアルゴリズムです。 _TypedArray_ は、ここでは [型付き配列型](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)のうちの一つです。 +**`reverse()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、型付き配列を[その場 (in-place)](https://en.wikipedia.org/wiki/In-place_algorithm) で反転し、同じ型付き配列への参照を返します。型付き配列の最初の要素は最後になり、型付き配列の最後の要素は最初になります。言い換えれば，型付き配列の他の要素の順序は，以前とは逆の順序になります。このメソッドは {{jsxref("Array.prototype.reverse()")}} と同じアルゴリズムです。 -{{EmbedInteractiveExample("pages/js/typedarray-reverse.html","shorter")}} +{{EmbedInteractiveExample("pages/js/typedarray-reverse.html", "shorter")}} ## 構文 @@ -17,13 +17,21 @@ l10n: reverse() ``` +### 引数 + +なし。 + ### 返値 -反転された配列です。 +反転された元の型付き配列への参照です。型付き配列は[その場 (in-place)](https://en.wikipedia.org/wiki/In-place_algorithm) で反転され，コピーは行われないことに注意してください。 + +## 解説 + +詳細については、 {{jsxref("Array.prototype.reverse()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 ## 例 -### reverse の使用 +### reverse() の使用 ```js const uint8 = new Uint8Array([1, 2, 3]); @@ -43,4 +51,9 @@ console.log(uint8); // Uint8Array [3, 2, 1] ## 関連情報 - [`TypedArray.prototype.reverse` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド +- {{jsxref("TypedArray")}} +- {{jsxref("TypedArray.prototype.join()")}} +- {{jsxref("TypedArray.prototype.sort()")}} +- {{jsxref("TypedArray.prototype.toReversed()")}} - {{jsxref("Array.prototype.reverse()")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/set/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/set/index.md index 4c2f9319958550..1cdae28498a9f4 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/set/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/set/index.md @@ -2,12 +2,12 @@ title: TypedArray.prototype.set() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/set l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`set()`** メソッドは、複数の値を指定した配列から入力値を読み込み、型付き配列に格納します。 +**`set()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、複数の値を指定した配列から入力値を読み込み、型付き配列に格納します。 {{EmbedInteractiveExample("pages/js/typedarray-set.html")}} @@ -32,12 +32,12 @@ set(typedarray, targetOffset) ### 返値 -{{jsxref("undefined")}} です。 +なし ({{jsxref("undefined")}})。 ### 例外 - {{jsxref("RangeError")}} - - : 2 つの条件のいずれかが満たされた場合に発生します。 + - : 以下の条件のいずれかで発生します。 - `targetOffset` が大きすぎるか、`array` または `typedarray` が大きすぎるために、要素が配列の末尾を越えて格納されることになる。 - `targetOffset` が負の数である。 @@ -65,6 +65,6 @@ console.log(uint8); // Uint8Array [ 0, 0, 0, 1, 2, 3, 0, 0 ] ## 関連情報 - [`TypedArray.prototype.set` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) -- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド - {{jsxref("TypedArray")}} - {{jsxref("ArrayBuffer")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/slice/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/slice/index.md index f53160e1a04a54..d0e9cd59eb7039 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/slice/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/slice/index.md @@ -2,14 +2,14 @@ title: TypedArray.prototype.slice() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/slice l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f --- {{JSRef}} -**`slice()`** メソッドは、元の型付き配列の部分的なコピーを含む新しい型付き配列（新しいバッファーによる）を返します。このメソッドは {{jsxref("Array.prototype.slice()")}} と同じアルゴリズムを持ちます。 _TypedArray_ は、ここでは[型付き配列型](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)の一つです。 +**`slice()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、型付き配列の一部を `start` から `end` （`end` は含まれない）まで選択された新しい型付き配列オブジェクトにコピーして返します。元の型付き配列は変更されません。このメソッドは {{jsxref("Array.prototype.reverse()")}} と同じアルゴリズムです。 -{{EmbedInteractiveExample("pages/js/typedarray-slice.html","shorter")}} +{{EmbedInteractiveExample("pages/js/typedarray-slice.html", "shorter")}} ## 構文 @@ -22,34 +22,17 @@ slice(start, end) ### 引数 - `start` {{optional_inline}} - - - : 抽出範囲の先頭の位置を示す 0 から始まる添字です。 - - 負の添字を使って、配列の末尾からの相対位置を表すことができます。 - `slice(-2)` は配列の最後から 2 番目の要素と最後の要素を抽出します。 - - `start` を省略した場合、 `slice` は `0` 番目の要素から開始します。 - + - : 抽出を始める位置を示すゼロ基点のインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 - `end` {{optional_inline}} - - - : 抽出範囲の末尾の _直前_ の位置を示す 0 から始まる添字です。 `slice` は - `end` 自体は含めず、その直前まで抽出します。 - - `slice(1,4)` は 2 番目の要素から 4 番目の要素まで（添字が 1, 2, 3 の要素）を取り出します。 - - 負の添字を使って、配列の末尾からの相対位置を表すことができます。 `slice(2,-1)` は配列の 3 番目の要素から、最後から 2 番目の要素まで取り出します。 - - `end` が省略された場合、 `slice` は配列の最後 (`typedarray.length`) まで取り出します。 + - : 抽出を終了する位置を示すゼロ基点のインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 `slice()` はここまでを抽出しますが、 `end` は含みません。 ### 返値 -抽出された要素が入った新しい型付き配列。 +抽出された要素が入った新しい型付き配列です。 ## 解説 -`slice` メソッドは元の型付き配列を変更せず、代わりに元の型付き配列の一部のコピーを返します。型付き配列はプリミティブ値しか格納しないので、`slice` メソッドが返すコピーは常に[ディープコピー](/ja/docs/Glossary/Deep_copy) である。 - -一方の型付き配列に新しい要素が追加されても、他方の型付き配列に影響はしません。 +詳細については、 {{jsxref("Array.prototype.slice()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 ## 例 @@ -74,4 +57,7 @@ uint8.slice(0, 1); // Uint8Array [ 1 ] ## 関連情報 - [`TypedArray.prototype.slice` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド +- {{jsxref("TypedArray")}} - {{jsxref("Array.prototype.slice()")}} +- {{jsxref("String.prototype.slice()")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/some/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/some/index.md index 275d2ea2daa07a..fe4df0a3cba982 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/some/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/some/index.md @@ -2,65 +2,44 @@ title: TypedArray.prototype.some() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/some l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f --- {{JSRef}} -**`some()`** メソッドは、与えられた関数によって実行されるテストに合格する要素が型付き配列の中にあるかどうかをテストします。このメソッドは、{{jsxref("Array.prototype.some()")}} と同じアルゴリズムです。ここで _TypedArray_ は[型付き配列](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)のうちの一つです。 +**`some()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、型付き配列の中に指定された関数で実装されているテストに合格する要素が 1 つでもあるかどうかをテストします。型付き配列の中に指定された関数が true を返す要素があれば true を返し、なければ false を返します。型付き配列を変更することはありません。このメソッドは {{jsxref("Array.prototype.some()")}} と同じアルゴリズムです。 {{EmbedInteractiveExample("pages/js/typedarray-some.html")}} ## 構文 ```js-nolint -// アロー関数 -some((element) => { /* ... */ } ) -some((element, index) => { /* ... */ } ) -some((element, index, array) => { /* ... */ } ) - -// コールバック関数 some(callbackFn) some(callbackFn, thisArg) - -// インラインコールバック関数 -some(function(element) { /* ... */ }) -some(function(element, index) { /* ... */ }) -some(function(element, index, array){ /* ... */ }) -some(function(element, index, array) { /* ... */ }, thisArg) ``` ### 引数 - `callbackFn` - - : 各要素に対してテストを実行する関数です。 - - この関数は以下の引数で呼び出されます。 - + - : 配列のそれぞれの要素に対して実行する関数です。要素がテストに合格した場合は[真値](/ja/docs/Glossary/Truthy)を返し、そうでなければ[偽値](/ja/docs/Glossary/Falsy)を返す必要があります。この関数は以下の引数で呼び出されます。 - `element` - - : 型付き配列内で処理されている現在の要素。 + - : 現在処理されている型付き配列の要素です。 - `index` - - : 型付き配列内で処理されている現在の要素のインデックス。 + - : 現在処理されている型付き配列の要素のインデックスです。 - `array` - - : `some` が呼び出されている型付き配列。 + - : `some()` が実行されている型付き配列です。 -- `thisArg` - - : オプション。 `callbackFn` を実行するときに `this` として使用する値。 +- `thisArg` {{optional_inline}} + - : `callbackFn` を実行する際に `this` として使用する値。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。 ### 返値 -配列内のいずれかの要素でコールバック関数が[真値](/ja/docs/Glossary/Truthy)を返した場合は **`true`** です。それ以外は **`false`** です。 +型付き配列の要素に対して `callbackFn` が{{Glossary("truthy", "真値")}}を返した場合は `true` を即座に返します。それ以外は `false` を返します。 ## 解説 -`some`メソッドは、 `callbackFn` 関数を、型付き配列に含まれる各要素に対して一度ずつ、 `callbackFn` が真の値を返す要素が見つかるまで呼び出します。真の値を返す要素が見つかると、 `some` メソッドはただちに `true` を返します。見つからなかった場合、 `false` を返します。 - -`callbackFn` は、要素の値、要素の添字、走査中の配列オブジェクトの 3 つの引数で呼び出されます。 - -`thisArg` 引数が `some` に与えられると、 `callbackFn` が呼び出される際に `this` として使用されます。さもなければ、 `undefined` 値が `this` として使用されるために渡されます。最終的に `callbackFn` によって観測される `this` の値は、[関数から見える `this` を特定するための通常のルール](/ja/docs/Web/JavaScript/Reference/Operators/this)に応じて決定されます。 - -`some` は呼び出された型付き配列を変更しません。 +詳細については、 {{jsxref("Array.prototype.some()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 ## 例 @@ -76,15 +55,6 @@ new Uint8Array([2, 5, 8, 1, 4]).some(isBiggerThan10); // false new Uint8Array([12, 5, 8, 1, 4]).some(isBiggerThan10); // true ``` -### アロー関数を使用して型付き配列をテストする - -[アロー関数](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)は同じテストを短い構文で行うことができます。 - -```js -new Uint8Array([2, 5, 8, 1, 4]).some((elem) => elem > 10); // false -new Uint8Array([12, 5, 8, 1, 4]).some((elem) => elem > 10); // true -``` - ## 仕様書 {{Specifications}} @@ -96,5 +66,10 @@ new Uint8Array([12, 5, 8, 1, 4]).some((elem) => elem > 10); // true ## 関連情報 - [`TypedArray.prototype.some` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド +- {{jsxref("TypedArray")}} - {{jsxref("TypedArray.prototype.every()")}} +- {{jsxref("TypedArray.prototype.forEach()")}} +- {{jsxref("TypedArray.prototype.find()")}} +- {{jsxref("TypedArray.prototype.includes()")}} - {{jsxref("Array.prototype.some()")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/sort/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/sort/index.md index 665696e3ad9acc..fc045a2c70e652 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/sort/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/sort/index.md @@ -2,43 +2,46 @@ title: TypedArray.prototype.sort() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/sort l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f --- {{JSRef}} -**`sort()`** メソッドは、型付き配列の要素を*その場で*数値的に並べ替え、その型付き配列を返します。このメソッドは {{jsxref("Array.prototype.sort()")}} と同じアルゴリズムです。 _TypedArray_ は、ここでは[型付き配列型](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)のうちの一つです。 +**`sort()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、型付き配列の要素を[その場 (in-place)](https://en.wikipedia.org/wiki/In-place_algorithm) でソートし、その型付き配列を返します。このメソッドは {{jsxref("Array.prototype.sort()")}} と同じアルゴリズムですが、既定で文字列としてではなく数値として値をソートする点が異なります。 -{{EmbedInteractiveExample("pages/js/typedarray-sort.html","shorter")}} +{{EmbedInteractiveExample("pages/js/typedarray-sort.html", "shorter")}} ## 構文 ```js-nolint -// 関数なし sort() - -// アロー関数 -sort((a, b) => { /* ... */ } ) - -// 比較関数 sort(compareFn) - -// インライン比較関数 -sort(function compareFn(a, b) { /* ... */ }) ``` ### 引数 -- `compareFunction` {{optional_inline}} - - : ソート順を定義する関数を指定します。 +- `compareFn` {{optional_inline}} + + - : ソート順を定義する関数です。返値は、 2 つの要素の相対順序を示す符号を持つ数値でなければなりません。 `a` が `b` より小さい場合は負の値、`a` が `b` より大きい場合は正の値、等しい場合は 0 です。 `NaN` は `0` として扱われます。この関数は以下の引数で呼び出されます。 + + - `a` + - : 比較のための最初の要素。決して `undefined` にはなりません。 + - `b` + - : 比較のための2つ目の要素。決して `undefined` にはなりません。 + + 省略した場合、型付き配列の要素は数値順にソートされます。 ### 返値 -並べ替えた型付き配列です。 +ソートされた型付き配列の元配列への参照です。型付き配列は[その場 (in-place)](https://en.wikipedia.org/wiki/In-place_algorithm) でソートされ，コピーは行われないことに注意してください。 + +## 解説 + +詳細については、 {{jsxref("Array.prototype.sort()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 ## 例 -### sort の使用 +### sort() の使用 他の例は、 {{jsxref("Array.prototype.sort()")}} メソッドです。 @@ -69,4 +72,8 @@ numbers.sort((a, b) => a - b); // 数値を比較 ## 関連情報 - [`TypedArray.prototype.sort` の現代の動作の安定したソートのポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド +- {{jsxref("TypedArray")}} +- {{jsxref("TypedArray.prototype.reverse()")}} +- {{jsxref("TypedArray.prototype.toSorted()")}} - {{jsxref("Array.prototype.sort()")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/subarray/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/subarray/index.md index 570eb27b0e5c4e..3e052f0cc7edf4 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/subarray/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/subarray/index.md @@ -2,12 +2,12 @@ title: TypedArray.prototype.subarray() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/subarray l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`subarray()`** メソッドは、同じ {{jsxref("ArrayBuffer")}} ストアで、この _TypedArray_ オブジェクトと同じ要素の型をもつ新しい _TypedArray_ を返します。先頭のオフセットは**含み**、末尾のオフセットは**含みません**。 _TypedArray_ は[型付き配列型](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)の一つです。 +**`subarray()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、同じ {{jsxref("ArrayBuffer")}} ストアにおいて、この型付き配列オブジェクトと同じ要素の型をもつ新しい型付き配列を返します。先頭のオフセットは**含み**、末尾のオフセットは**含みません**。 {{EmbedInteractiveExample("pages/js/typedarray-subarray.html")}} @@ -34,7 +34,7 @@ subarray(begin, end) `begin` と `end` によって指定される範囲は、現在の配列に対して有効なインデックスの範囲に丸められます。すなわち、新しい範囲の計算された長さがマイナスなら、ゼロになります。 `begin` か `end` のどちらかがマイナスなら、配列の最初からではなく、最後からインデックスを参照します。 -既存のバッファ上に新しいビューを作っていることにも注意して下さい。すなわち、新しいオブジェクトの内容への変更は、元のオブジェクトに強い影響を与えます。逆もまた同様です。 +既存のバッファー上に新しいビューを作っていることにも注意して下さい。すなわち、新しいオブジェクトの内容への変更は、元のオブジェクトに強い影響を与えます。逆もまた同様です。 ## 例 @@ -63,6 +63,6 @@ console.log(sub); // Uint8Array [ 1, 2, 3, 0 ] ## 関連情報 - [`TypedArray.prototype.subarray` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) -- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays) - {{jsxref("TypedArray")}} - {{jsxref("ArrayBuffer")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/tolocalestring/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/tolocalestring/index.md index 7b43c0369760de..94f0d02779afbf 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/tolocalestring/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/tolocalestring/index.md @@ -2,12 +2,12 @@ title: TypedArray.prototype.toLocaleString() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/toLocaleString l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`toLocaleString()`** メソッドは、型付き配列の要素を表す文字列を返します。要素は文字列に変換され、ロケール依存の文字列（カンマ "," など）で区切られます。このメソッドは {{jsxref("Array.prototype.toLocaleString()")}} と同じアルゴリズムを持ち、型付き配列の要素は数値なので、各要素に対して {{jsxref("Number.prototype.toLocaleString()")}} と同じアルゴリズムが適用されます。ここで _TypedArray_ は[型付き配列型](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)の 1 つです。 +**`toLocaleString()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、型付き配列の要素を表す文字列を返します。要素は `toLocaleString` メソッドを使用して文字列に変換され、これらの文字列はロケール依存の文字列（カンマ "," など）で区切られます。このメソッドは {{jsxref("Array.prototype.toLocaleString()")}} と同じアルゴリズムです。 {{EmbedInteractiveExample("pages/js/typedarray-tolocalestring.html")}} @@ -21,17 +21,22 @@ toLocaleString(locales, options) ### 引数 -`locales` と `options` の引数は、関数の動作をカスタマイズし、アプリケーションが整形規則を使用する言語を指定できるようにします。 `locales` と `options` の引数を無視する実装では、使用されるロケールと返される文字列の形式は完全に実装に依存します。 - -これらの引数の詳細および使用方法については、 {{jsxref("Intl/NumberFormat/NumberFormat", "Intl.NumberFormat()")}} コンストラクターを参照してください。 +- `locales` {{optional_inline}} + - : BCP 47 言語タグの文字列か、その配列です。 `locales` 引数の一般的な形式と解釈については、 [`Intl` メインページの引数の説明](/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_引数)を参照してください。 +- `options` {{optional_inline}} + - : 構成プロパティを持つオブジェクトです。 {{jsxref("Number.prototype.toLocaleString()")}} を参照してください。 ### 返値 -型付き配列の要素を表す文字列。 +型付き配列の要素を表す文字列です。 + +## 解説 + +詳細については、 {{jsxref("Array.prototype.toLocaleString()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 ## 例 -### toLocaleString の使用 +### toLocaleString() の使用 ```js const uint = new Uint32Array([2000, 500, 8123, 12, 4212]); @@ -57,5 +62,10 @@ uint.toLocaleString("ja-JP", { style: "currency", currency: "JPY" }); ## 関連情報 +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド +- {{jsxref("TypedArray")}} +- {{jsxref("TypedArray.prototype.toString()")}} - {{jsxref("Array.prototype.toLocaleString()")}} +- {{jsxref("Intl")}} +- {{jsxref("Intl.ListFormat")}} - {{jsxref("Number.prototype.toLocaleString()")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/toreversed/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/toreversed/index.md new file mode 100644 index 00000000000000..12614317ad4e41 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/typedarray/toreversed/index.md @@ -0,0 +1,56 @@ +--- +title: TypedArray.prototype.toReversed() +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/toReversed +l10n: + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de +--- + +{{JSRef}} + +**`toReversed()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、 {{jsxref("TypedArray/reverse", "reverse()")}} メソッドに対応する[コピーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#コピーメソッドと変更メソッド)です。このメソッドは、要素を逆順にした新しい型付き配列を返します。このメソッドは {{jsxref("Array.prototype.toReversed()")}} と同じアルゴリズムです。 + +## 構文 + +```js-nolint +toReversed() +``` + +### 引数 + +なし。 + +### 返値 + +要素を逆順に格納した新しい型付き配列です。 + +## 解説 + +詳細については、 {{jsxref("Array.prototype.toReversed()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 + +## 例 + +### toReversed() の使用 + +```js +const uint8 = new Uint8Array([1, 2, 3]); +const reversedUint8 = uint8.toReversed(); +console.log(reversedUint8); // Uint8Array [3, 2, 1] +console.log(uint8); // Uint8Array [1, 2, 3] +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`TypedArray.prototype.toReversed` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#change-array-by-copy) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド +- {{jsxref("TypedArray.prototype.reverse()")}} +- {{jsxref("TypedArray.prototype.toSorted()")}} +- {{jsxref("TypedArray.prototype.with()")}} +- {{jsxref("Array.prototype.toReversed()")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/tosorted/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/tosorted/index.md new file mode 100644 index 00000000000000..b7fa5d554d89e2 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/typedarray/tosorted/index.md @@ -0,0 +1,68 @@ +--- +title: TypedArray.prototype.toSorted() +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/toSorted +l10n: + sourceCommit: d9e66eca59d82c65166c65e7946332650da8f48f +--- + +{{JSRef}} + +**`toSorted()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、 {{jsxref("TypedArray/sort", "sort()")}} メソッドの[コピーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#コピーメソッドと変更メソッド)版です。これは、要素を昇順にソートした新しい型付き配列を返します。このメソッドは {{jsxref("Array.prototype.toSorted()")}} と同じアルゴリズムですが、既定で文字列としてではなく数値として値をソートする点が異なります。 + +## 構文 + +```js-nolint +toSorted() +toSorted(compareFn) +``` + +### 引数 + +- `compareFn` {{optional_inline}} + + - : ソート順を定義する関数です。返値は、 2 つの要素の相対順序を示す符号を持つ数値でなければなりません。 + + - `a` + - : 比較のための最初の要素です。 + - `b` + - : 比較のための 2 つ目の要素です。 + +### 返値 + +要素を昇順にソートした新しい型付き配列です。 + +## 解説 + +詳細については、 {{jsxref("Array.prototype.toSorted()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 + +## 例 + +### 配列のソート + +その他の例については、 {{jsxref("Array.prototype.sort()")}} メソッドもご覧ください。 + +```js +const numbers = new Uint8Array([40, 1, 5, 200]); +const numberSorted = numbers.toSorted(); +console.log(numberSorted); // Uint8Array [ 1, 5, 40, 200 ] +// 通常の配列とは異なり、数値の並べ替えでは比較関数が +// 要求されません。 +console.log(numbers); // Uint8Array [ 40, 1, 5, 200 ] +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`TypedArray.prototype.toSorted` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#change-array-by-copy) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド +- {{jsxref("TypedArray.prototype.sort()")}} +- {{jsxref("TypedArray.prototype.toReversed()")}} +- {{jsxref("TypedArray.prototype.with()")}} +- {{jsxref("Array.prototype.toSorted()")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/tostring/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/tostring/index.md index 8687e73f4b939c..18300f00d28599 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/tostring/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/tostring/index.md @@ -2,14 +2,14 @@ title: TypedArray.prototype.toString() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/toString l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: c2445ce1dc3a0170e2fbfdbee10e18a7455c2282 --- {{JSRef}} -**`toString()`** メソッドは、指定された配列とその要素を表す文字列を返します。このメソッドは、{{jsxref("Array.prototype.toString()")}} と同じアルゴリズムです。ここで _TypedArray_ は [型付き配列オブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_オブジェクト)の何れかです。 +**`toString()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、指定された配列とその要素を表す文字列を返します。このメソッドは {{jsxref("Array.prototype.toString()")}} と同じアルゴリズムです。 -{{EmbedInteractiveExample("pages/js/typedarray-tostring.html","shorter")}} +{{EmbedInteractiveExample("pages/js/typedarray-tostring.html", "shorter")}} ## 構文 @@ -17,28 +17,28 @@ l10n: toString() ``` +### 引数 + +なし。 + ### 返値 型付き配列の要素を表す文字列です。 ## 解説 -{{jsxref("TypedArray")}} オブジェクトは {{jsxref("Object")}} の `toString` メソッドをオーバーライドしています。 `TypedArray` オブジェクトでは、`toString` メソッドは配列をつないで、配列のそれぞれの要素がカンマで区切られた 1 つの文字列を返します。たとえば、次のコードは型付き配列を生成した後、 `toString` を使用して配列を文字列に変換しています。 - -```js -const numbers = new Uint8Array([2, 5, 8, 1, 4]); -numbers.toString(); // "2,5,8,1,4" -``` - -型付き配列が文字列値として表される必要がある場合や、配列が文字列の結合の中で参照された時、 JavaScript は `toString` メソッドを自動的に呼び出します。 +詳細については、 {{jsxref("Array.prototype.toString()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 -### 互換性 +## 例 -ブラウザーが `TypedArray.prototype.toString()` メソッドに対応していない場合は、 JavaScript は {{jsxref("Object")}} の `toString` メソッドを呼び出します。 +### 型付き配列を文字列へ変換 ```js -const numbers = new Uint8Array([2, 5, 8, 1, 4]); -numbers.toString(); // "[object Uint8Array]" +const uint8 = new Uint8Array([1, 2, 3]); +// 明示的な変換 +console.log(uint8.toString()); // 1,2,3 +// 暗黙の変換 +console.log(`${uint8}`); // 1,2,3 ``` ## 仕様書 @@ -51,4 +51,9 @@ numbers.toString(); // "[object Uint8Array]" ## 関連情報 +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド +- {{jsxref("TypedArray")}} - {{jsxref("TypedArray.prototype.join()")}} +- {{jsxref("TypedArray.prototype.toLocaleString()")}} +- {{jsxref("Array.prototype.toString()")}} +- {{jsxref("String.prototype.toString()")}} diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/values/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/values/index.md index cc047fe1450556..dc08656719ee29 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/values/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/values/index.md @@ -2,12 +2,12 @@ title: TypedArray.prototype.values() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/values l10n: - sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`values()`** メソッドは、配列の各インデックスの値を持つ新しい配列イテレーターオブジェクトを返します。 +**`values()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、配列内の各インデックスに対する値を持つ新しい[配列イテレーター](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)オブジェクトを返します。このメソッドのアルゴリズムは {{jsxref("Array.prototype.values()")}} と同じです。 {{EmbedInteractiveExample("pages/js/typedarray-values.html")}} @@ -17,9 +17,17 @@ l10n: values() ``` +### 引数 + +なし。 + ### 返値 -新しい配列イテレーターオブジェクトです。 +新しい[配列イテレーター](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)オブジェクトです。 + +## 解説 + +詳細については、 {{jsxref("Array.prototype.values()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 ## 例 @@ -56,8 +64,10 @@ console.log(values.next().value); // 50 ## 関連情報 - [`TypedArray.prototype.values` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-typed-arrays) -- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド - {{jsxref("TypedArray")}} - {{jsxref("TypedArray.prototype.entries()")}} - {{jsxref("TypedArray.prototype.keys()")}} -- {{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}} +- [`TypedArray.prototype[@@iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator) +- {{jsxref("Array.prototype.values()")}} +- [反復処理プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols) diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/with/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/with/index.md new file mode 100644 index 00000000000000..6ad35465f3643d --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/typedarray/with/index.md @@ -0,0 +1,63 @@ +--- +title: TypedArray.prototype.with() +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/with +l10n: + sourceCommit: a815a95e4ab4adf391d8a7bc66a3abbce1a686d8 +--- + +{{JSRef}} + +**`with()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、[ブラケット記法](/ja/docs/Web/JavaScript/Reference/Operators/Property_accessors#ブラケット記法)を使用して指定された位置の値を変更することの[コピーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#コピーメソッドと変更メソッド)版です。これは指定されたインデックスの要素を指定された値で置き換えた新しい配列の添字を返します。このメソッドのアルゴリズムは {{jsxref("Array.prototype.with()")}} と同じです。 + +## 構文 + +```js-nolint +arrayInstance.with(index, value) +``` + +### 引数 + +- `index` + - : 型付き配列を変更する場所を示すゼロ基点のインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 +- `value` + - : 指定された位置に割り当てる値です。 + +### 返値 + +`index` の要素を `value` に置き換えた新しい型付き配列。 + +### 例外 + +- {{jsxref("RangeError")}} + - : `index >= array.length` または `index < -array.length` の場合に発生します。 + +## 解説 + +詳細については、 {{jsxref("Array.prototype.with()")}} をご覧ください。このメソッドは汎用的ではなく、型付き配列インスタンスに対してのみ呼び出すことができます。 + +## 例 + +### with() の使用 + +```js +const arr = new Uint8Array([1, 2, 3, 4, 5]); +console.log(arr.with(2, 6)); // Uint8Array [1, 2, 6, 4, 5] +console.log(arr); // Uint8Array [1, 2, 3, 4, 5] +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`TypedArray.prototype.with` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#change-array-by-copy) +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)ガイド +- {{jsxref("TypedArray.prototype.toReversed()")}} +- {{jsxref("TypedArray.prototype.toSorted()")}} +- {{jsxref("TypedArray.prototype.at()")}} +- {{jsxref("Array.prototype.with()")}} diff --git a/files/ja/web/javascript/reference/operators/import/index.md b/files/ja/web/javascript/reference/operators/import/index.md index a5333ba46400f4..8e92e5d37b9264 100644 --- a/files/ja/web/javascript/reference/operators/import/index.md +++ b/files/ja/web/javascript/reference/operators/import/index.md @@ -156,8 +156,8 @@ if (typeof window === "undefined") { ```js Promise.all( - Array.from({ length: 10 }).map((_, index) => - import(`/modules/module-${index}.js`), + Array.from({ length: 10 }).map( + (_, index) => import(`/modules/module-${index}.js`), ), ).then((modules) => modules.forEach((module) => module.load())); ``` diff --git a/files/ja/web/javascript/reference/operators/typeof/index.md b/files/ja/web/javascript/reference/operators/typeof/index.md index 9063f7a280a48e..5e52782e3ef742 100644 --- a/files/ja/web/javascript/reference/operators/typeof/index.md +++ b/files/ja/web/javascript/reference/operators/typeof/index.md @@ -210,8 +210,8 @@ function type(obj, fullClass) { ) ? deepType : typeof obj === "object" || typeof obj === "function" - ? "object" - : typeof obj; + ? "object" + : typeof obj; } ``` diff --git a/files/ja/web/javascript/reference/template_literals/index.md b/files/ja/web/javascript/reference/template_literals/index.md index 2f6232593dd0dd..69c635d7ef9199 100644 --- a/files/ja/web/javascript/reference/template_literals/index.md +++ b/files/ja/web/javascript/reference/template_literals/index.md @@ -99,8 +99,8 @@ let classes = "header"; classes += isLargeScreen() ? "" : item.isCollapsed - ? " icon-expander" - : " icon-collapser"; + ? " icon-expander" + : " icon-collapser"; ``` ES2015 で入れ子なしのテンプレートリテラルの場合: diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt index 8993f549c92ae5..85ad0646925ff1 100644 --- a/files/ko/_redirects.txt +++ b/files/ko/_redirects.txt @@ -500,6 +500,7 @@ /ko/docs/Web/API/WebGL_API/Using_shaders_to_apply_color_in_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL /ko/docs/Web/API/WebGL_API/Using_textures_in_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL /ko/docs/Web/API/WebRTC_API/adapter.js /ko/docs/Web/API/WebRTC_API#상호_운용성 +/ko/docs/Web/API/Web_Audio_API/Migrating_from_webkitAudioContext /ko/docs/conflicting/Web/API/Web_Audio_API /ko/docs/Web/API/Window/DOMContentLoaded_event /ko/docs/Web/API/Document/DOMContentLoaded_event /ko/docs/Web/API/Window/crypto /ko/docs/Web/API/crypto_property /ko/docs/Web/API/WindowEventHandlers/onhashchange /ko/docs/Web/API/Window/hashchange_event @@ -701,6 +702,7 @@ /ko/docs/Web/JavaScript/Reference/About /ko/docs/Web/JavaScript/Reference /ko/docs/Web/JavaScript/Reference/About/Formatting_Conventions /ko/docs/Web/JavaScript/Reference /ko/docs/Web/JavaScript/Reference/Classes/Class_static_initialization_blocks /ko/docs/Web/JavaScript/Reference/Classes/Static_initialization_blocks +/ko/docs/Web/JavaScript/Reference/Classes/Private_class_fields /ko/docs/Web/JavaScript/Reference/Classes/Private_properties /ko/docs/Web/JavaScript/Reference/Errors/Bad_return_or_yield /ko/docs/Web/JavaScript/Reference/Errors/Bad_return /ko/docs/Web/JavaScript/Reference/Errors/Malformed_formal_parameter /ko/docs/Web/JavaScript/Reference/Errors/Missing_formal_parameter /ko/docs/Web/JavaScript/Reference/Errors/Not_a_codepoint /ko/docs/Web/JavaScript/Reference/Errors/Not_a_valid_code_point diff --git a/files/ko/_wikihistory.json b/files/ko/_wikihistory.json index 5bbfa7ec2b7b13..6068fc5ebe41d8 100644 --- a/files/ko/_wikihistory.json +++ b/files/ko/_wikihistory.json @@ -7887,7 +7887,7 @@ "maytree" ] }, - "Web/JavaScript/Reference/Classes/Private_class_fields": { + "Web/JavaScript/Reference/Classes/Private_properties": { "modified": "2020-11-08T09:14:41.975Z", "contributors": ["seong7"] }, diff --git a/files/ko/web/api/web_audio_api/migrating_from_webkitaudiocontext/index.md b/files/ko/conflicting/web/api/web_audio_api/index.md similarity index 99% rename from files/ko/web/api/web_audio_api/migrating_from_webkitaudiocontext/index.md rename to files/ko/conflicting/web/api/web_audio_api/index.md index 5ce2dd8dcba6e0..a3e464f249e891 100644 --- a/files/ko/web/api/web_audio_api/migrating_from_webkitaudiocontext/index.md +++ b/files/ko/conflicting/web/api/web_audio_api/index.md @@ -1,6 +1,7 @@ --- title: webkitAudioContext에서 이주하기 -slug: Web/API/Web_Audio_API/Migrating_from_webkitAudioContext +slug: conflicting/Web/API/Web_Audio_API +original_slug: Web/API/Web_Audio_API/Migrating_from_webkitAudioContext --- Web Audio API는 현 상태에 이르기까지 많은 반복을 거쳤습니다. 이것은 처음에 WebKit에서 구현되었고, 이것의 낡은 부분들의 일부는 그것들이 명세에서 대체되는 동안 즉시 제거되지 않았는데, 이는 많은 사이트들이 비호환되는 코드를 사용하는 것으로 이어졌습니다. 이 글에서, 우리는 Web Audio API가 WebKit에서 처음 구현된 이후로의 Web Audio API에서의 차이를 다루고 현대 Web Audio API를 사용하기 위해 어떻게 코드를 업데이트해야 되는지를 다룹니다. diff --git a/files/ko/learn/javascript/asynchronous/introducing/index.md b/files/ko/learn/javascript/asynchronous/introducing/index.md index 05b6ae3dc2d329..5796eb3bebdb87 100644 --- a/files/ko/learn/javascript/asynchronous/introducing/index.md +++ b/files/ko/learn/javascript/asynchronous/introducing/index.md @@ -115,9 +115,8 @@ function generatePrimes(quota) { document.querySelector("#generate").addEventListener("click", () => { const quota = document.querySelector("#quota").value; const primes = generatePrimes(quota); - document.querySelector( - "#output", - ).textContent = `Finished generating ${quota} primes!`; + document.querySelector("#output").textContent = + `Finished generating ${quota} primes!`; }); document.querySelector("#reload").addEventListener("click", () => { @@ -183,9 +182,8 @@ function generatePrimes(quota) { document.querySelector("#generate").addEventListener("click", () => { const quota = document.querySelector("#quota").value; const primes = generatePrimes(quota); - document.querySelector( - "#output", - ).textContent = `Finished generating ${quota} primes!`; + document.querySelector("#output").textContent = + `Finished generating ${quota} primes!`; }); document.querySelector("#reload").addEventListener("click", () => { diff --git a/files/ko/learn/javascript/asynchronous/introducing_workers/index.md b/files/ko/learn/javascript/asynchronous/introducing_workers/index.md index bbd79fb51dc0b2..c9b1e44ca599d0 100644 --- a/files/ko/learn/javascript/asynchronous/introducing_workers/index.md +++ b/files/ko/learn/javascript/asynchronous/introducing_workers/index.md @@ -73,9 +73,8 @@ function generatePrimes(quota) { document.querySelector("#generate").addEventListener("click", () => { const quota = document.querySelector("#quota").value; const primes = generatePrimes(quota); - document.querySelector( - "#output", - ).textContent = `Finished generating ${quota} primes!`; + document.querySelector("#output").textContent = + `Finished generating ${quota} primes!`; }); document.querySelector("#reload").addEventListener("click", () => { @@ -155,9 +154,8 @@ document.querySelector("#generate").addEventListener("click", () => { // update the output box with a message for the user, including the number of // primes that were generated, taken from the message data. worker.addEventListener("message", (message) => { - document.querySelector( - "#output", - ).textContent = `Finished generating ${message.data} primes!`; + document.querySelector("#output").textContent = + `Finished generating ${message.data} primes!`; }); document.querySelector("#reload").addEventListener("click", () => { diff --git a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/svelte_variables_props/index.md b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/svelte_variables_props/index.md index c795d2bbdac4b8..590445f3c08a36 100644 --- a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/svelte_variables_props/index.md +++ b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/svelte_variables_props/index.md @@ -389,8 +389,8 @@ Svelte 컴파일러는 배후에서 종속성 트리를 만들기 위해 코드 filter === "active" ? todos.filter((t) => !t.completed) : filter === "completed" - ? todos.filter((t) => t.completed) - : todos; + ? todos.filter((t) => t.completed) + : todos; ``` 활성 필터(_all_, _active_ 또는 _completed_)를 제어하기 위해 `filter` 변수를 사용합니다. 이 값 중 하나를 필터 변수에 할당하기만 하면 필터가 활성화되고 할 일 목록이 업데이트됩니다. 이를 달성하는 방법을 살펴보겠습니다. diff --git a/files/ko/mozilla/add-ons/webextensions/api/menus/contexttype/index.md b/files/ko/mozilla/add-ons/webextensions/api/menus/contexttype/index.md index afce573ed37e47..c48ae7ac3d1682 100644 --- a/files/ko/mozilla/add-ons/webextensions/api/menus/contexttype/index.md +++ b/files/ko/mozilla/add-ons/webextensions/api/menus/contexttype/index.md @@ -1,48 +1,58 @@ --- title: menus.ContextType slug: Mozilla/Add-ons/WebExtensions/API/menus/ContextType +l10n: + sourceCommit: 2c5465eab20015868a1eeca59c5623d37b105f7c --- {{AddonSidebar()}} -메뉴 항목이 나타나게 하는 콘텍스트들. +메뉴 항목이 표시될 수 있는 컨텍스트들입니다. -## 자료형 +## 타입 -이 자료형의 값은 문자열이다. 항목은 주어진 콘텍스트일 때 표시된다. 가능한 값은: +이 타입의 값은 문자열입니다. 지정된 컨텍스트가 적용될 때 항목이 나타납니다. `menus.ContextType`에서 사용 가능한 값은 다음과 같습니다. - all - - : 'all'은 'bookmark', 'tab' 그리고 'tools_menu'를 뺀 나머지 모든 콘텍스트를 다 나열한 것과 같다. + - : 'all'을 지정하면 'bookmark', 'tab', 'tools_menu'를 제외한 모든 컨텍스트의 조합과 동일하게 동작합니다. +- action + - : 사용자가 Manifest V3 확장의 브라우저 액션을 컨텍스트 클릭할 때 적용됩니다. 최상위 브라우저 액션 컨텍스트 메뉴에 추가할 수 있는 최대 항목수는 {{WebExtAPIRef("menus.ACTION_MENU_TOP_LEVEL_LIMIT")}}이지만, 서브 메뉴에는 얼마든지 추가할 수 있습니다. - audio - - : [audio](/ko/docs/Web/HTML/Element/audio) 요소를 콘텍스트-클릭할 때 적용된다. (역주: 콘텍스트-클릭은 보통 마우스 오른쪽 버튼을 클릭하는 것이다) + - : 사용자가 [audio](/ko/docs/Web/HTML/Element/audio) 요소를 컨텍스트 클릭할 때 적용됩니다. - bookmark - - : 툴바나 메뉴에서 북마크 항목을 콘텍스트-클릭할 때 적용된다. 현재 북마크 사이드바나 라이브러리 윈도우 항목에서는 동작하지 않는다. manifest에 "bookmarks" [API 권한](/en-US/Add-ons/WebExtensions/manifest.json/permissions#API_permissions)이 있어야 한다. + + - : 사용자가 북마크 툴바나 북마크 메뉴, 북마크 사이드바(Ctrl+B)나 라이브러리 윈도우(Ctrl+Shift+B)에서 북마크 항목을 컨텍스트 클릭할 때 적용됩니다. 북마크 사이드바와 라이브러리 윈도우에서의 적용은 Firefox 66부터 지원됩니다. 매니페스트에 "bookmarks" [API 권한](/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#api_permissions)이 요구됩니다. + - browser_action - - : 브라우저 액션에서 콘텍스트-클릭을 할 때 적용된다. 최대로 추가할 수 있는 최상위 브라우저 액션 콘텍스트 매뉴 항목의 수는 {{WebExtAPIRef("menus.ACTION_MENU_TOP_LEVEL_LIMIT")}}지만 서버메뉴에는 얼마든지 추가할 수 있다. + - : 사용자가 Manifest V2 확장의 브라우저 액션을 컨텍스트 클릭할 때 적용됩니다. 최상위 브라우저 액션 컨텍스트 메뉴에 추가할 수 있는 최대 항목수는 {{WebExtAPIRef("menus.ACTION_MENU_TOP_LEVEL_LIMIT")}}이지만, 서브 메뉴에는 얼마든지 추가할 수 있습니다. - editable - - : 편집 가능한 요소, 가령은 [textarea](/ko/docs/Web/HTML/Element/textarea)를 콘텍스트-클릭할 때 적용된다. + - : [textarea](/ko/docs/Web/HTML/Element/textarea)처럼 편집 가능한 요소를 컨텍스트 클릭할 때 적용됩니다. - frame - - : 내포된 [iframe](/ko/docs/Web/HTML/Element/iframe)을 콘텍스트-클릭할 때 적용된다. + - : 중첩된 [iframe](/ko/docs/Web/HTML/Element/iframe)을 컨텍스트 클릭할 때 적용됩니다. - image - - : 이미지를 콘텍스트-클릭할 때 적용된다. + - : 사용자가 이미지를 컨텍스트 클릭할 때 적용됩니다. - link - - : 링크를 콘텍스트-클릭할 때 적용된다. + - : 사용자가 링크를 컨텍스트 클릭할 때 적용됩니다. - page - - : 페이지를 콘텍스트-클릭할 때 적용된다. 단, 페이지의 다른 콘텍스트가 적용되지 않을 때만이다(예를 들면, 클릭이 이미지나 내포된 iframe 또는 링크가 아니여야 한다). + - : 사용자가 페이지를 컨텍스트 클릭했지만 다른 페이지 컨텍스트가 적용되지 않는 경우에 적용됩니다(예: 클릭이 이미지나 중첩된 iframe, 혹은 링크에서 발생하지 않은 경우). - page_action - - : 페이지 액션을 콘텍스트-클릭할 때 적용된다. 최대로 추가할 수 있는 최상위 페이지 액션 콘텍스트 메뉴 항목의 수는 {{WebExtAPIRef("menus.ACTION_MENU_TOP_LEVEL_LIMIT")}}지만 서버메뉴에는 얼마든지 추가할 수 있다. + - : 사용자가 페이지 액션을 컨텍스트 클릭할 때 적용됩니다. 최상위 페이지 액션 컨텍스트 메뉴에 추가할 수 있는 최대 항목수는 {{WebExtAPIRef("menus.ACTION_MENU_TOP_LEVEL_LIMIT")}}이지만, 서브 메뉴에는 얼마든지 추가할 수 있습니다. - password - - : [password 입력 요소](/ko/docs/Web/HTML/Element/input/password)를 콘텍스트-클릭할 때 적용된다. + - : 사용자가 [password 입력 요소](/ko/docs/Web/HTML/Element/input/password)를 컨텍스트 클릭할 때 적용됩니다. - selection - - : 페이지 일부가 선택되었을 때 적용된다. + - : 페이지 일부가 선택되어 있을 때 적용됩니다. - tab - - : 탭을 콘텍스트-클릭할 때 적용된다(specifically, this refers to the tab-strip or other user interface element enabling the user to switch from one browser tab to another, not to the page itself). Firefox 63부터, 탭에서 메뉴 항목을 클릭하면 그것이 설사 현재탭이 아니더라도 클릭한 탭에 대해 [activeTab](/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission) 권한이 승인된다. + + - : 사용자가 탭을 컨텍스트 클릭할 때 적용됩니다. 구체적으로 페이지 자체가 아니라, 사용자가 한 브라우저 탭에서 다른 탭으로 전환할 수 있도록 하는 탭 스트립 또는 기타 사용자 인터페이스 요소를 의미합니다. + + Firefox 63부터는 탭의 메뉴 항목을 클릭하면 현재 활성 탭이 아닌 경우에도 클릭한 탭에 대해 [activeTab](/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#activetab_permission) 권한이 부여됩니다. + - tools_menu - - : 항목은 브라우저 툴바의 메뉴로 추가된다. 주의해야 할 것은 `menus` 이름공간을 통해 `ContextType`에 접근해야지 `contextMenus` 이름공간으로 하면 안된다. + - : 항목이 브라우저의 도구 메뉴에 추가됩니다. 이 기능은 `menus` 네임스페이스를 통해 `ContextType`에 접근하는 경우에만 사용할 수 있다는 것을 참고하십시오. `contextMenus` 네임스페이스를 통해 접근하는 경우에는 사용할 수 없습니다. - video - - : [video](/ko/docs/Web/HTML/Element/video) 요소에 콘텍스트-클릭을 할 때 적용된다. + - : [video](/ko/docs/Web/HTML/Element/video) 요소에 컨텍스트 클릭을 할 때 적용됩니다. -"launcher"는 지원되지 않는다. +참고: "launcher"는 지원되지 않습니다. ## 브라우저 호환성 @@ -50,9 +60,9 @@ slug: Mozilla/Add-ons/WebExtensions/API/menus/ContextType {{WebExtExamples}} -> **참고:** **Acknowledgements**This API is based on Chromium's [`chrome.contextMenus`](https://developer.chrome.com/extensions/contextMenus#type-ContextType) API. This documentation is derived from [`context_menus.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/context_menus.json) in the Chromium code. +> **참고:** 이 API는 Chromium의 [`chrome.contextMenus`](https://developer.chrome.com/docs/extensions/reference/contextMenus/#type-ContextType) API를 기반으로 합니다. 이 문서는 Chromium 코드의 [`context_menus.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/context_menus.json)에서 파생되었습니다. -``` + diff --git a/files/ko/mozilla/add-ons/webextensions/api/tabs/create/index.md b/files/ko/mozilla/add-ons/webextensions/api/tabs/create/index.md index ea04c4a8b403ee..6663448c9b55bb 100644 --- a/files/ko/mozilla/add-ons/webextensions/api/tabs/create/index.md +++ b/files/ko/mozilla/add-ons/webextensions/api/tabs/create/index.md @@ -1,87 +1,95 @@ --- title: tabs.create() slug: Mozilla/Add-ons/WebExtensions/API/tabs/create +l10n: + sourceCommit: 8d4f5dfc253d1d0181d72ce5debaf1bcc26112ef --- {{AddonSidebar()}} -새 탭을 만든다. +새 탭을 만듭니다. -이것은 비동기 함수로 [`Promise`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise)를 돌려준다. +`tabs.create()`는 [`Promise`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise)를 반환하는 비동기 함수입니다. -## 문법 +## 구문 -```js -var creating = browser.tabs.create( - createProperties, // object -); +```js-nolint +let creating = browser.tabs.create( + createProperties // object +) ``` ### 매개변수 - `createProperties` - - : `object`. 새 탭에 대한 속성들. 속성들에 대해 더 배우려면 {{WebExtAPIRef("tabs.Tab")}} 문서를 보라. + - : `object`. 새 탭에 줄 속성들입니다. 이 속성들에 대해 더 알아보려면 {{WebExtAPIRef("tabs.Tab")}} 문서를 확인하십시오. - `active`{{optional_inline}} - - : `boolean`. 활성탭이 되는지를 정한다. 윈도우의 포커스에는 영향이 없다({{WebExtAPIRef('windows.update')}} 참조). 기본값은 `true`. + - : `boolean`. 탭을 창의 활성 탭으로 변경할지에 대한 여부입니다. `false`인 경우에는 효과가 없습니다. 창에 포커스가 맞춰져 있는지 여부에는 영향을 주지 않습니다({{WebExtAPIRef('windows.update')}}를 참조하십시오). 기본 값은 `true`입니다. - `cookieStoreId` {{optional_inline}} - - : `string`. 탭의 쿠키 저장 ID를 `cookieStoreId`로 지정한다. 이 옵션은 확장이 `"cookies"` [권한](/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)을 가져야 쓸 수 있다. + - : `string`. 쿠키 저장소 ID가 `cookieStoreId`인 탭을 생성하기 위해 사용합니다. 이 옵션은 확장이 `"cookies"` [권한](/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)을 가져야만 사용할 수 있습니다. [상황별 신원을 사용해 작업하기](/ko/docs/Mozilla/Add-ons/WebExtensions/Work_with_contextual_identities)에서 더 많은 정보를 확인하세요. + - `discarded` {{optional_inline}} + - : `boolean`. 탭이 생성된 뒤 메모리에 로드된 콘텐츠 없이 탭 표시줄에 표시되는 상태인지에 대한 여부입니다. 탭이 활성화되면 탭의 콘텐츠가 로드됩니다. - `index`{{optional_inline}} - - : `integer`. 윈도우에서 탭의 위치를 지정한다. 쓸 수 있는 값은 0에서 윈도에 있는 탭의 수까지다. + - : `integer`. 창에서 탭이 차지할 위치입니다. 제공되는 값은 0부터 창의 탭 개수 사이로 고정됩니다. + - `muted` {{optional_inline}} + - : `boolean`. 탭의 음소거 여부입니다. 기본 값은 `false`입니다. - `openerTabId`{{optional_inline}} - - : `integer`. The ID of the tab that opened this tab. If specified, the opener tab must be in the same window as the newly created tab. + - : `integer`. 이 탭을 연 탭의 ID입니다. 이 값이 지정된 경우, 새로운 탭을 연 탭은 반드시 새로 생성한 탭과 같은 창에 있어야 합니다. - `openInReaderMode`{{optional_inline}} - - : `boolean`. If `true`, open this tab in [Reader Mode](/en-US/Add-ons/WebExtensions/API/tabs/toggleReaderMode). Defaults to `false`. + - : `boolean`. `true`일 경우, 이 탭을 [읽기 모드](/ko/docs/Mozilla/Add-ons/WebExtensions/API/tabs/toggleReaderMode)로 엽니다. 기본 값은 `false`입니다. - `pinned`{{optional_inline}} - - : `boolean`. Whether the tab should be pinned. Defaults to `false`. + - : `boolean`. 탭의 고정 여부입니다. 기본 값은 `false`입니다. - `selected`{{optional_inline}} - - : `boolean`. 윈도우에서 탭이 선택되는지를 지정한다. 기본값은 `true`. + - : `boolean`. 창에서 선택된 탭이 되는지에 대한 여부입니다. 기본 값은 `true`입니다. - > **경고:** 이 속성은 사용이 중단되었다. Firefox에서는 지원하지 않는다. `active`가 대신한다. + > **경고:** 이 속성은 폐기되었으며, Firefox에서는 지원되지 않습니다. 대신 `active`를 사용하십시오. + - `title` {{optional_inline}} + - : `string`. 탭의 제목입니다. `discarded` 속성이 `true`로 생성된 탭에서만 사용할 수 있습니다. - `url` {{optional_inline}} - - : `string`. 최초 표시될 URL. 기본값은 새 탭 페이지다. - URL은 반드시 scheme를 포함해야 한다 (가령은 'http://www.google.com'은 되지만, 'www.google.com'은 안된다). - 보안상 Firefox에서 특권이 있는 URL은 안된다. 그래서 아래와 같은 URL을 주면 실패할 것이다: + - : `string`. 탭이 초기에 이동할 URL입니다. 기본 값은 새 탭 페이지입니다. - - chrome: URL - - javascript: URL - - data: URL - - file: URL (예, 파일시스템의 파일들. 단, 확장 안에 포함된 파일의 사용은 아래를 보라) - - 특권이 있는 about: URL (예, `about:config`, `about:addons`, `about:debugging`). 특권이 없는 URL은 된다 (예, `about:blank`). - - 새 탭 페이지 ( `about:newtab`)는 URL 값이 주어지지 않으면 열린다. + 정규화된 URL에는 반드시 스킴이 포함되어야 합니다. 예를 들어, 'www.google.com' 이 아닌 'http://www.google.com' 을 사용해야 합니다. - 확장에 포함된 페이지의 로딩은 확장의 manifest.json 파일이 있는데서 시작하는 절대 경로를 써라. 예를 들면: '/path/to/my-page.html'. 만약 첫 '/'를 빼면 URL은 상대 경로로 취급되고, 다른 브라우저들은 다른 절대 경로를 생성해낼 것이다. + 보안상의 이유로 Firefox에서는 특수한 권한을 가진 URL은 사용할 수 없습니다. 따라서 다음과 같은 URL을 전달하면 실패하게 됩니다. - - `windowId`{{optional_inline}} - - : `integer`. 새 탭이 만들어질 윈도우. 기본값은 현재 윈도우. + - chrome: URLs + - javascript: URLs + - data: URLs + - file: URLs (예: 파일시스템의 파일들. 단, 확장 안에 패키지된 파일을 사용하려면 아래를 참조하십시오.) + - 특수한 권한을 가지는 about: URLs (예: `about:config`, `about:addons`, `about:debugging`). 권한이 없는 URL(예: `about:blank`)은 허용됩니다. + - URL 값이 주어지지 않으면 새 탭 페이지 (`about:newtab`)가 열립니다. -### Return value + 확장 프로그램과 함께 패키지된 페이지를 로드하려면, 확장 프로그램의 manifest.json 파일에서부터 시작하는 절대 URL을 지정하십시오. 예를 들어 '/path/to/my-page.html' 앞의 '/'를 생략하면, URL이 상대 URL로 취급되어 브라우저마다 다른 절대 URL을 생성할 수 있습니다. -A [`Promise`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise) that will be fulfilled with a {{WebExtAPIRef('tabs.Tab')}} object containing details about the created tab. If the tab could not be created (for example, because `url` used a privileged scheme) the promise will be rejected with an error message. + - `windowId`{{optional_inline}} + - : `integer`. 새 탭을 생성할 창입니다. 기본 값은 현재 창입니다. -## 브라우저 호환성 +### 반환 값 -{{Compat}} +생성된 탭에 대한 세부 정보가 포함된 {{WebExtAPIRef('tabs.Tab')}} 객체로 이행되는 [`Promise`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise)입니다. 탭을 만들 수 없는 경우(예: `url`에 권한이 있는 스킴을 사용한 경우) 오류 메시지와 함께 프로미스가 거부됩니다. + +`browser.tabs.create()`가 반환한 프로미스는 탭이 생성되는 즉시 리졸브됩니다. 탭은 아직 로드 중일 수 있습니다. 탭 로딩이 완료되었는지 확인하려면, `tabs.create`를 호출하기 전에 {{WebExtAPIRef('tabs.onUpdated')}} 또는 {{WebExtAPIRef('webNavigation.onCompleted')}} 이벤트를 수신하십시오. ## 예제 -Open "https\://example.org" in a new tab: +새 탭에서 "https\://example.org" 열기. -```js +```js-nolint function onCreated(tab) { - console.log(`Created new tab: ${tab.id}`); + console.log(`새 탭 생성: ${tab.id}`); } function onError(error) { - console.log(`Error: ${error}`); + console.log(`오류: ${error}`); } -browser.browserAction.onClicked.addListener(function () { - var creating = browser.tabs.create({ +browser.browserAction.onClicked.addListener(() => { + let creating = browser.tabs.create({ url: "https://example.org", }); creating.then(onCreated, onError); @@ -90,7 +98,11 @@ browser.browserAction.onClicked.addListener(function () { {{WebExtExamples}} -> **참고:** **Acknowledgements**This API is based on Chromium's [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#method-create) API. This documentation is derived from [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) in the Chromium code.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License. +## 브라우저 호환성 + +{{Compat}} + +> **참고:** 이 API는 Chromium의 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#method-create) API를 기반으로 합니다. 이 문서는 Chromium 코드의 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)에서 파생되었습니다. + ``` -{{EmbedLiveSample('topExample', '100%', 200)}} +{{EmbedLiveSample("Пример", '100%', 200)}} ## Примечания по использованию -| Значение | `nonzero` \| `evenodd` | -| --------------------- | ---------------------- | -| Значение по умолчанию | `nonzero` | -| Анимируемый | Да | - -The `fill-rule` attribute provides two options for how the inside (that is, the area to be filled) of a shape is determined: + + + + + + + + + + + + + + + +
Значениеnonzero | evenodd
Значение по умолчаниюnonzero
Поддержка анимацииdiscrete
+ +Атрибут `fill-rule` предоставляет два варианта определения внутренней части фигуры (то есть области, подлежащей заливке): ### nonzero -The value `nonzero` determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction, and then examining the places where a segment of the shape crosses the ray. Starting with a count of zero, add one each time a path segment crosses the ray from left to right and subtract one each time a path segment crosses the ray from right to left. After counting the crossings, if the result is zero then the point is outside the path. Otherwise, it is inside. +Значение `nonzero` определяет принадлежность точки фигуры к внутренней части с помощью рисования луча от этой точки до бесконечности в любом направлении, а затем проверки мест, где сегмент фигуры пересекает луч. Начиная с нуля, каждый раз, когда луч пересекает сегмент фигуры слева направо, происходит увеличение счётчика на единицу, а когда справа налево, то уменьшение. Если после подсчёта пересечений результат равен нулю, то точка находится за пределами фигуры, в противном случае — внутри. -#### Example +#### Пример ```css hidden html, @@ -67,33 +86,32 @@ svg { ```html - + + d="M110,0 h90 v90 h-90 z M130,20 h50 v50 h-50 z" /> + d="M210,0 h90 v90 h-90 z M230,20 v50 h50 v-50 z" /> ``` @@ -101,9 +119,9 @@ svg { ### evenodd -The value `evenodd` determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses. If this number is odd, the point is inside; if even, the point is outside. +Значение `evenodd` определяет принадлежность точки фигуры к внутренней части с помощью рисования луча от этой точки до бесконечности в любом направлении и подсчёта количества сегментов фигуры, которые этот луч пересекает. Если это число нечётное, точка находится внутри, если чётное, то точка снаружи. -#### Example +#### Пример ```css hidden html, @@ -115,42 +133,41 @@ svg { ```html - + + d="M110,0 h90 v90 h-90 z M130,20 h50 v50 h-50 z" /> + d="M210,0 h90 v90 h-90 z M230,20 v50 h50 v-50 z" /> ``` {{EmbedLiveSample('evenodd', '100%', 200)}} -## Browser compatibility +## Спецификации -{{Compat}} +{{Specifications}} -## Specification +## Совместимость с браузерами -{{Specifications}} +{{Compat}} diff --git a/files/ru/web/svg/attribute/id/index.md b/files/ru/web/svg/attribute/id/index.md index 6aeffd0a35cb4c..8f5c42a2688570 100644 --- a/files/ru/web/svg/attribute/id/index.md +++ b/files/ru/web/svg/attribute/id/index.md @@ -9,6 +9,8 @@ slug: Web/SVG/Attribute/id Этот атрибут используется всеми элементами. +## Пример + ```html ``` -{{EmbedLiveSample("topExample", "120", "120")}} +{{EmbedLiveSample("Пример", 120, 120)}} ## Примечания по использованию diff --git a/files/ru/web/svg/attribute/r/index.md b/files/ru/web/svg/attribute/r/index.md index 452f2c80992371..c1d51f06bcd141 100644 --- a/files/ru/web/svg/attribute/r/index.md +++ b/files/ru/web/svg/attribute/r/index.md @@ -7,6 +7,8 @@ slug: Web/SVG/Attribute/r Этот атрибут используют два элемента: {{SVGElement("circle")}}, и {{SVGElement("radialGradient")}} +## Пример + ```css hidden html, body, @@ -40,7 +42,7 @@ svg { ``` -{{EmbedLiveSample('topExample', '100%', 200)}} +{{EmbedLiveSample("Пример", '100%', 200)}} ## circle diff --git a/files/ru/web/svg/attribute/rx/index.md b/files/ru/web/svg/attribute/rx/index.md index b5af6333d683ce..8373e170ba2889 100644 --- a/files/ru/web/svg/attribute/rx/index.md +++ b/files/ru/web/svg/attribute/rx/index.md @@ -9,6 +9,8 @@ slug: Web/SVG/Attribute/rx Два элемента используют этот атрибут: {{SVGElement("ellipse")}} и {{SVGElement("rect")}} +## Пример + ```css hidden html, body, @@ -29,7 +31,7 @@ svg { ``` -{{EmbedLiveSample('topExample', '100%', 200)}} +{{EmbedLiveSample("Пример", '100%', 200)}} ## ellipse diff --git a/files/ru/web/svg/attribute/ry/index.md b/files/ru/web/svg/attribute/ry/index.md index 24ef563a7919c1..1342e2cbdc8b9e 100644 --- a/files/ru/web/svg/attribute/ry/index.md +++ b/files/ru/web/svg/attribute/ry/index.md @@ -9,6 +9,8 @@ slug: Web/SVG/Attribute/ry Два элемента используют этот атрибут: [``](/ru/docs/Web/SVG/Element/ellipse) и [``](/ru/docs/Web/SVG/Element/rect) +## Пример + ```css hidden html, body, @@ -29,7 +31,7 @@ svg { ``` -{{EmbedLiveSample('topExample', '100%', 200)}} +{{EmbedLiveSample("Пример", '100%', 200)}} ## ellipse diff --git a/files/ru/web/svg/attribute/stroke-dashoffset/index.md b/files/ru/web/svg/attribute/stroke-dashoffset/index.md index 6110d13f5795cb..7294fecd7611f9 100644 --- a/files/ru/web/svg/attribute/stroke-dashoffset/index.md +++ b/files/ru/web/svg/attribute/stroke-dashoffset/index.md @@ -5,7 +5,7 @@ slug: Web/SVG/Attribute/stroke-dashoffset > **Примечание:** **Прежняя редакция:** « [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute) > Этот атрибут определяет смещение обводки относительно начального положения. -> При использовании [\](/ru/SVG/Content_type#Percentage), значение будет вычисляться от текущего viewport. +> При использовании [\](/ru/docs/SVG/Content_type#percentage), значение будет вычисляться от текущего viewport. > Значение может быть отрицательным. {{SVGRef}} @@ -15,6 +15,8 @@ slug: Web/SVG/Attribute/stroke-dashoffset Как атрибут представления, он может применяться к любому элементу, но влияет только на следующие одиннадцать элементов: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}} +## Пример + ```css hidden html, body, @@ -75,120 +77,20 @@ svg { ``` -{{EmbedLiveSample('topExample', '100%', 200)}} +{{EmbedLiveSample("Пример", '100%', 200)}} ## Usage context -| Категория | Атрибут оформления | -| ----------------- | ------------------------------------------------------------------------------------------------------- | -| Значение | [\](/en/SVG/Content_type#Percentage) \| [\](/en/SVG/Content_type#Length) \| inherit | -| Исходное значение | 0 | -| Анимируемый | Да | -| Спецификация | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/painting.html#StrokeDashoffsetProperty) | - -## Пример - -### HTML - -```html - - - - - - - - - - - - - - - - - - - - -``` - -### Результат - -{{EmbedLiveSample('Пример', '220', '240')}} +| Категория | Атрибут оформления | +| ----------------- | ----------------------------------------------------------------------------------------------- | +| Значение | [\](/ru/docs/Web/SVG#percentage) \| [\](/ru/docs/Web/SVG#length) \| inherit | +| Исходное значение | 0 | +| Анимируемый | Да | +| Спецификация | [SVG 1.1 (2nd Edition)](https://www.w3.org/TR/SVG11/painting.html#StrokeDashoffsetProperty) | ## Элементы Следующие элементы могут использовать атрибут `stroke-dashoffset` -- [Элементы форм](/ru/SVG/Element#Shape) -- [Текстовые элементы](/ru/SVG/Element#TextContent) +- [Элементы форм](/ru/docs/SVG/Element#shape) +- [Текстовые элементы](/ru/docs/SVG/Element#textcontent) diff --git a/files/ru/web/svg/attribute/stroke-linecap/index.md b/files/ru/web/svg/attribute/stroke-linecap/index.md index d9b5295cce0afd..cbf2b7cc1ed4d4 100644 --- a/files/ru/web/svg/attribute/stroke-linecap/index.md +++ b/files/ru/web/svg/attribute/stroke-linecap/index.md @@ -11,6 +11,8 @@ slug: Web/SVG/Attribute/stroke-linecap В качестве атрибута представления он может применяться к любому элементу, но он влияет только на следующие семь элементов: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}} +## Пример + ```css hidden html, body, @@ -38,7 +40,7 @@ svg { ``` -{{EmbedLiveSample('topExample', '100%', 200)}} +{{EmbedLiveSample("Пример", '100%', 200)}} ## Нотации diff --git a/files/ru/web/svg/attribute/viewbox/index.md b/files/ru/web/svg/attribute/viewbox/index.md index 71ec305a252096..6c487592ddc332 100644 --- a/files/ru/web/svg/attribute/viewbox/index.md +++ b/files/ru/web/svg/attribute/viewbox/index.md @@ -3,12 +3,14 @@ title: viewBox slug: Web/SVG/Attribute/viewBox --- -« [SVG Attribute reference home](/en/SVG/Attribute) +{{SVGRef}} -`Аттрибут viewBox` определяет расположение и размеры окна отображения SVG. +Аттрибут `viewBox` определяет расположение и размеры окна отображения SVG. Значение атрибута `viewBox` — это набор четырёх чисел: `min-x`, `min-y`, `width` и `height`, — разделённых пробелами и/или запятой, которые задают прямоугольник в пользовательском пространстве, стороны которого определяют границы окна отображения элемента SVG (не [браузера](/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Viewport)). +## Пример + ``` html, body, svg { height:100% @@ -68,7 +70,7 @@ svg:not(:root) { ``` -{{EmbedLiveSample('topExample', '100%', 200)}} +{{EmbedLiveSample("Пример", '100%', 200)}} На отображение с `viewBox` также влияет атрибут {{ SVGAttr("preserveAspectRatio") }}. @@ -123,4 +125,4 @@ svg:not(:root) { ## Смотрите также -- [SVG Getting Started: Positions](/en/SVG/Tutorial/Positions) +- [SVG Getting Started: Positions](/ru/docs/Web/SVG/Tutorial/Positions) diff --git a/files/ru/web/svg/attribute/width/index.md b/files/ru/web/svg/attribute/width/index.md index c6df802c6d892b..8be336d23c922a 100644 --- a/files/ru/web/svg/attribute/width/index.md +++ b/files/ru/web/svg/attribute/width/index.md @@ -9,6 +9,8 @@ slug: Web/SVG/Attribute/width Двадцать пять элементов используют эти атрибуты: {{SVGElement('feBlend')}}, {{SVGElement('feColorMatrix')}}, {{SVGElement('feComponentTransfer')}}, {{SVGElement('feComposite')}}, {{SVGElement('feConvolveMatrix')}}, {{SVGElement('feDiffuseLighting')}}, {{SVGElement('feDisplacementMap')}}, {{SVGElement('feDropShadow')}}, {{SVGElement('feFlood')}}, {{SVGElement('feGaussianBlur')}}, {{SVGElement('feImage')}}, {{SVGElement('feMerge')}}, {{SVGElement('feMorphology')}}, {{SVGElement('feOffset')}}, {{SVGElement('feSpecularLighting')}}, {{SVGElement('feTile')}}, {{SVGElement('feTurbulence')}}, {{SVGElement('filter')}}, {{SVGElement('foreignObject')}}, {{SVGElement('image')}}, {{SVGElement('mask')}}, {{SVGElement('pattern')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, and {{SVGElement('use')}} +## Пример + ```css hidden html, body, @@ -26,7 +28,7 @@ svg { ``` -{{EmbedLiveSample('topExample', '100%', 200)}} +{{EmbedLiveSample("Пример", '100%', 200)}} ## feBlend diff --git a/files/ru/web/svg/element/a/index.md b/files/ru/web/svg/element/a/index.md index b89ddf829ce41c..19424f026d606e 100644 --- a/files/ru/web/svg/element/a/index.md +++ b/files/ru/web/svg/element/a/index.md @@ -9,6 +9,8 @@ SVG элемент **\** создаёт гиперссылку на друг Элемент `` является контейнером. Это означает, что вы можете обернуть текст в ссылку (как в HTML). Таким же образом можно обернуть фигуру. +## Пример + ```css hidden @namespace svg url(http://www.w3.org/2000/svg); html, @@ -55,9 +57,9 @@ svg|a:hover, svg|a:active { } ``` -{{EmbedLiveSample('Exemple', 100, 100)}} +{{EmbedLiveSample("Пример", 100, 100)}} -> **Предупреждение:** Поскольку этот элемент разделяет своё имя с [элементом HTML ``](/ru/docs/Web/HTML/Element/A), выбор `a` через CSS или [`querySelector`](/ru/docs/Web/API/Document/querySelector) может выбрать не тот тип элемента. Попробуйте [правило `@namespace`](/ru/docs/Web/CSS/@namespace), чтобы разделять их. +> **Предупреждение:** Поскольку этот элемент разделяет своё имя с [элементом HTML ``](/ru/docs/Web/HTML/Element/a), выбор `a` через CSS или [`querySelector`](/ru/docs/Web/API/Document/querySelector) может выбрать не тот тип элемента. Попробуйте [правило `@namespace`](/ru/docs/Web/CSS/@namespace), чтобы разделять их. ## Атрибуты @@ -74,7 +76,7 @@ svg|a:hover, svg|a:active { - : Разделённый пробелами список URL при переходе по которым браузер будет отправлять [`POST`](/ru/docs/Web/HTTP/Methods/POST) запросы с телом `PING` (в фоне). Обычно используется для трекинга. _Тип_: **[\](/docs/Web/SVG/Content_type#List-of-Ts)**; _Значение по умолчанию_: _none_; _Анимируем_: **нет** - [`referrerpolicy`](/ru/docs/Web/HTML/Element/a#referrerpolicy) {{experimental_inline}} - - : Какой [referrer](/ru/docs/Web/HTTP/Заголовки/Referer) отправить при получении {{Glossary("URL")}}. + - : Какой [referrer](/ru/docs/Web/HTTP/Headers/Referer) отправить при получении {{Glossary("URL")}}. _Тип_: `no-referrer`|`no-referrer-when-downgrade`|`same-origin`|`origin`|`strict-origin`|`origin-when-cross-origin`|`strict-origin-when-cross-origin`|`unsafe-url` ; _Значение по умолчанию_: _none_; _Анимируем_: **нет** - [`rel`](/ru/docs/Web/HTML/Element/a#rel) {{experimental_inline}} - : Отношение между целевым объектом и объектом link. @@ -91,7 +93,7 @@ svg|a:hover, svg|a:active { ### Глобальные атрибуты -- [Core Attributes](/docs/Web/SVG/Attribute/Core) +- [Core Attributes](/ru/docs/Web/SVG/Attribute/Core) - : Наиболее используемые: {{SVGAttr('id')}}, {{SVGAttr('lang')}}, {{SVGAttr('tabindex')}} - [Styling Attributes](/docs/Web/SVG/Attribute/Styling) - : {{SVGAttr('class')}}, {{SVGAttr('style')}} diff --git a/files/ru/web/svg/element/ellipse/index.md b/files/ru/web/svg/element/ellipse/index.md index 2664417aad1dbe..fe739703cffe76 100644 --- a/files/ru/web/svg/element/ellipse/index.md +++ b/files/ru/web/svg/element/ellipse/index.md @@ -9,6 +9,8 @@ slug: Web/SVG/Element/ellipse > **Примечание:** Сам по себе элемент `ellipse` не позволяет задать точное его расположение (например, нельзя сразу отобразить эллипс, повёрнутый на 45**°**), однако его можно повернуть с помощью атрибута {{SVGAttr("transform")}}. +## Пример + ```css hidden html, body, @@ -23,7 +25,7 @@ svg { ``` -{{EmbedLiveSample('LiveSample', 100, '100%')}} +{{EmbedLiveSample("Пример", 100, '100%')}} ## Атрибуты @@ -49,7 +51,7 @@ svg { ### Глобальные Атрибуты -- [Основные атрибуты](/docs/Web/SVG/Attribute/Core) +- [Основные атрибуты](/ru/docs/Web/SVG/Attribute/Core) - : Самые важные: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}} - [Атрибуты стиля](/docs/Web/SVG/Attribute/Styling) - : {{SVGAttr('class')}}, {{SVGAttr('style')}} diff --git a/files/ru/web/svg/element/foreignobject/index.md b/files/ru/web/svg/element/foreignobject/index.md index 83a8da486b4bd0..fe93cef1fc88c1 100644 --- a/files/ru/web/svg/element/foreignobject/index.md +++ b/files/ru/web/svg/element/foreignobject/index.md @@ -7,6 +7,8 @@ slug: Web/SVG/Element/foreignObject Элемент **``** [SVG](/ru/docs/Web/SVG) позволяет включать другое пространство имён XML. В контексте браузера это, скорее всего, XHTML / HTML. +## Пример + ```css hidden html, body, @@ -47,7 +49,7 @@ svg { ``` -{{EmbedLiveSample('Exemple', 150, '100%')}} +{{EmbedLiveSample("Пример", 150, '100%')}} ## Атрибуты @@ -70,7 +72,7 @@ svg { ### Глобальные атрибуты -- [Core Attributes](/docs/Web/SVG/Attribute/Core) +- [Core Attributes](/ru/docs/Web/SVG/Attribute/Core) - : Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}} - [Styling Attributes](/docs/Web/SVG/Attribute/Styling) - : {{SVGAttr('class')}}, {{SVGAttr('style')}} diff --git a/files/ru/web/svg/element/line/index.md b/files/ru/web/svg/element/line/index.md index 0ad92c33b2c98a..ab49e9914f4904 100644 --- a/files/ru/web/svg/element/line/index.md +++ b/files/ru/web/svg/element/line/index.md @@ -7,6 +7,8 @@ slug: Web/SVG/Element/line Элемент **``** одна из базовых фигур SVG, используемая для создания линии, связывающей две точки. +## Пример + ```css hidden html, body, @@ -24,7 +26,7 @@ svg { ``` -{{EmbedLiveSample('Example', 100, 100)}} +{{EmbedLiveSample("Пример", 100, 100)}} ## Атрибуты @@ -46,7 +48,7 @@ svg { ### Глобальные атрибуты -- [Основные атрибуты](/docs/Web/SVG/Attribute/Core) +- [Основные атрибуты](/ru/docs/Web/SVG/Attribute/Core) - : В первую очередь: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}} - [Атрибуты оформления (стилей)](/docs/Web/SVG/Attribute/Styling) - : {{SVGAttr('class')}}, {{SVGAttr('style')}} diff --git a/files/ru/web/svg/element/lineargradient/index.md b/files/ru/web/svg/element/lineargradient/index.md index b3f69455cf5bdd..7fa69b21cc36eb 100644 --- a/files/ru/web/svg/element/lineargradient/index.md +++ b/files/ru/web/svg/element/lineargradient/index.md @@ -9,6 +9,8 @@ slug: Web/SVG/Element/linearGradient > **Примечание:** Не путайте с CSS {{cssxref('linear-gradient()')}}, CSS-градиенты могут быть применены только к HTML-элементам, тогда как SVG-градиент применим только к SVG-элементам. +## Пример + ```css hidden html, body, @@ -34,7 +36,7 @@ svg { ``` -{{EmbedLiveSample('Example', 150, '100%')}} +{{EmbedLiveSample("Пример", 150, '100%')}} ## Атрибуты diff --git a/files/ru/web/svg/element/path/index.md b/files/ru/web/svg/element/path/index.md index 4778d028e45806..62294ec20b8ba7 100644 --- a/files/ru/web/svg/element/path/index.md +++ b/files/ru/web/svg/element/path/index.md @@ -7,6 +7,8 @@ slug: Web/SVG/Element/path Элемент **``** является общим элементом для описания фигуры. Все базовые фигуры могут быть созданы с помощью элемента path. +## Пример + ```css hidden html, body, @@ -26,7 +28,7 @@ svg { ``` -{{EmbedLiveSample('Example', 100, 100)}} +{{EmbedLiveSample("Пример", 100, 100)}} ## Атрибуты @@ -39,7 +41,7 @@ svg { ### Глобальные атрибуты -- [Атрибуты ядра](/docs/Web/SVG/Attribute/Core) +- [Атрибуты ядра](/ru/docs/Web/SVG/Attribute/Core) - : Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}} - [Атрибуты стиля](/docs/Web/SVG/Attribute/Styling) - : {{SVGAttr('class')}}, {{SVGAttr('style')}} diff --git a/files/ru/web/svg/element/pattern/index.md b/files/ru/web/svg/element/pattern/index.md index 8113651313c2b9..b38b7ef5f57eaa 100644 --- a/files/ru/web/svg/element/pattern/index.md +++ b/files/ru/web/svg/element/pattern/index.md @@ -7,6 +7,8 @@ slug: Web/SVG/Element/pattern Элемент **``** определяет графический объект, который может быть перерисован с повторяющимися координатами **x** и **y** («мозаичным»), чтобы покрыть область. На ссылку `` ссылаются атрибуты {{SVGAttr("fill")}} и / или {{SVGAttr("stroke")}} на других [графических элементах](/ru/docs/Web/SVG/Tutorial/Basic_Shapes) , чтобы заполнить или обвести эти элементы указанным шаблоном. +## Пример + ```css hidden html, body, @@ -34,7 +36,7 @@ svg { ``` -{{EmbedLiveSample('Exemple', 150, '100%')}} +{{EmbedLiveSample("Пример", 150, '100%')}} ## Атрибуты @@ -82,7 +84,7 @@ svg { ### Глобальные атрибуты -- [Core Attributes](/docs/Web/SVG/Attribute/Core) +- [Core Attributes](/ru/docs/Web/SVG/Attribute/Core) - : Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}} - [Styling Attributes](/docs/Web/SVG/Attribute/Styling) - : {{SVGAttr('class')}}, {{SVGAttr('style')}} diff --git a/files/ru/web/svg/element/polygon/index.md b/files/ru/web/svg/element/polygon/index.md index e4aa50a4423231..25423ee4d775fe 100644 --- a/files/ru/web/svg/element/polygon/index.md +++ b/files/ru/web/svg/element/polygon/index.md @@ -7,6 +7,8 @@ slug: Web/SVG/Element/polygon Элемент **``** описывает замкнутую фигуру, состоящую из набора последовательно соединённых между собой прямых линий. Для создания незамкнутых фигур используется элемент {{SVGElement("polyline")}}. +## Пример + ```css hidden html, body, @@ -25,7 +27,7 @@ svg { ``` -{{EmbedLiveSample('Exemple', 100, 100)}} +{{EmbedLiveSample("Пример", 100, 100)}} ## Атрибуты @@ -38,7 +40,7 @@ svg { ### Global attributes -- [Основные атрибуты](/docs/Web/SVG/Attribute/Core) +- [Основные атрибуты](/ru/docs/Web/SVG/Attribute/Core) - : Самые важные: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}} - [Атрибуты стилизации](/docs/Web/SVG/Attribute/Styling) - : {{SVGAttr('class')}}, {{SVGAttr('style')}} diff --git a/files/ru/web/svg/element/use/index.md b/files/ru/web/svg/element/use/index.md index 01cf42c10787ff..761f13c435c34d 100644 --- a/files/ru/web/svg/element/use/index.md +++ b/files/ru/web/svg/element/use/index.md @@ -7,6 +7,8 @@ slug: Web/SVG/Element/use Элемент **``** берёт элементы из SVG-документа и дублирует их где-то ещё. +## Пример + ```css hidden html, body, @@ -30,13 +32,13 @@ svg { ``` -{{EmbedLiveSample('Exemple', 100, 100)}} +{{EmbedLiveSample("Пример", 100, 100)}} Эффект такой же, как если бы элементы были полностью склонированы в DOM, а затем расположены в месте, где находится элемент `use`, подобно элементам `