diff --git a/docs/ko/guides/glossary-guide.md b/docs/ko/guides/glossary-guide.md index ae5f787b6a28a6..b3a7706cc4df67 100644 --- a/docs/ko/guides/glossary-guide.md +++ b/docs/ko/guides/glossary-guide.md @@ -1,6 +1,6 @@ # 용어 안내서 -새로운 용어를 추가할 때, 기존 문서의 레거시와 [국립 국어원 한국어 어문 규범](https://kornorms.korean.go.kr/main/main.do)을 고려해 추가할 것을 권장합니다. [국립 국어원 온라인가나다](https://www.korean.go.kr/front/onlineQna/onlineQnaList.do?mn_id=216)에서 어문 규범, 어법, 표준국어대사전 내용 등에 대하여 문의할 수 있습니다. +새로운 용어를 추가할 때, 기존 문서의 레거시와 [국립 국어원 한국어 어문 규범](https://korean.go.kr/kornorms/main/main.do)을 고려해 추가할 것을 권장합니다. [국립 국어원 온라인가나다](https://www.korean.go.kr/front/onlineQna/onlineQnaList.do?mn_id=216)에서 어문 규범, 어법, 표준국어대사전 내용 등에 대하여 문의할 수 있습니다. ## 공통 @@ -59,6 +59,7 @@ | Polyfill | 폴리필 | [링크](https://github.com/mdn/translated-content/pull/1779/files) | | Recommendations | 권장 사항 | | | Reference | 참고서 | | +| Return Value | 반환 값 | | | See also | 같이 보기 | [링크][target] | | Specifications | 명세서 | [링크](https://github.com/mdn/translated-content/pull/1779/files) | | Static properties | 정적 속성 | | @@ -154,6 +155,8 @@ | User agent | 사용자 에이전트 | | | Update | 갱신 | | | Workflow | 워크플로우 | | +| Truthy | 참 같은 | | +| Falsy | 거짓 같은 | | ## CSS diff --git a/docs/zh-cn/glossary.md b/docs/zh-cn/glossary.md index e9e346db765b4d..3bb943afe0379b 100644 --- a/docs/zh-cn/glossary.md +++ b/docs/zh-cn/glossary.md @@ -62,6 +62,8 @@ | ---------------------- | ------------ | ------------------ | --------------------------------------------------------------------------- | | Accessibility concerns | 无障碍考虑 | | https://github.com/mdn/translated-content/issues/11456 | | Active learning | 动手练习 | | https://github.com/mdn/translated-content/pull/12696#discussion_r1164859935 | +| Associated interfaces | 相关接口 | | | +| Associated roles | 相关角色 | | | | Browser compatibility | 浏览器兼容性 | | | | Conclusion | 总结 | | https://github.com/mdn/translated-content/pull/13329#discussion_r1199677894 | | Examples | 示例 | | | diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index 02144621903b65..3d1771fbdb2dd5 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -1642,7 +1642,8 @@ /es/docs/Web/API/Event/createEvent /es/docs/Web/API/Document/createEvent /es/docs/Web/API/EventListener /es/docs/conflicting/Web/API/EventTarget/addEventListener /es/docs/Web/API/EventSource/onopen /es/docs/Web/API/EventSource/open_event -/es/docs/Web/API/Fetch_API/Conceptos_basicos /es/docs/Web/API/Fetch_API/Basic_concepts +/es/docs/Web/API/Fetch_API/Basic_concepts /es/docs/conflicting/Web/API/Fetch_API/Using_Fetch +/es/docs/Web/API/Fetch_API/Conceptos_basicos /es/docs/conflicting/Web/API/Fetch_API/Using_Fetch /es/docs/Web/API/Fetch_API/Utilizando_Fetch /es/docs/Web/API/Fetch_API/Using_Fetch /es/docs/Web/API/File/Using_files_from_web_applications /es/docs/Web/API/File_API/Using_files_from_web_applications /es/docs/Web/API/File/fileName /es/docs/web/api/file/name @@ -1812,6 +1813,7 @@ /es/docs/Web/CSS/-webkit-mask-origin /es/docs/Web/CSS/mask-origin /es/docs/Web/CSS/-webkit-mask-position /es/docs/Web/CSS/mask-position /es/docs/Web/CSS/-webkit-mask-repeat /es/docs/Web/CSS/mask-repeat +/es/docs/Web/CSS/-webkit-overflow-scrolling /es/docs/orphaned/Web/CSS/-webkit-overflow-scrolling /es/docs/Web/CSS/-webkit-print-color-adjust /es/docs/Web/CSS/print-color-adjust /es/docs/Web/CSS/:-moz-focusring /es/docs/conflicting/Web/CSS/:focus-visible /es/docs/Web/CSS/:-moz-list-bullet /es/docs/Web/CSS/::-moz-list-bullet @@ -1820,6 +1822,9 @@ /es/docs/Web/CSS/:-moz-locale-dir(rtl) /es/docs/Web/CSS/:-moz-locale-dir_rtl /es/docs/Web/CSS/:-moz-ui-invalid /es/docs/Web/CSS/:user-invalid /es/docs/Web/CSS/:-webkit-autofill /es/docs/Web/CSS/:autofill +/es/docs/Web/CSS/::-moz-page /es/docs/orphaned/Web/CSS/::-moz-page +/es/docs/Web/CSS/::-moz-page-sequence /es/docs/orphaned/Web/CSS/::-moz-page-sequence +/es/docs/Web/CSS/::-moz-scrolled-page-sequence /es/docs/orphaned/Web/CSS/::-moz-scrolled-page-sequence /es/docs/Web/CSS/::-webkit-file-upload-button /es/docs/Web/CSS/::file-selector-button /es/docs/Web/CSS/::-webkit-outer-spin-button /es/docs/conflicting/Web/CSS/::-webkit-inner-spin-button /es/docs/Web/CSS/:any /es/docs/Web/CSS/:is diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index 772f7a76032218..42b3a9faf91bd3 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -4161,10 +4161,6 @@ "enlinea777" ] }, - "Web/API/Fetch_API/Basic_concepts": { - "modified": "2019-03-18T21:24:00.327Z", - "contributors": ["IsraelFloresDGA"] - }, "Web/API/Fetch_API/Using_Fetch": { "modified": "2020-12-08T11:29:15.934Z", "contributors": [ @@ -5978,10 +5974,6 @@ "modified": "2019-03-23T22:34:06.535Z", "contributors": ["pekechis"] }, - "Web/CSS/-webkit-overflow-scrolling": { - "modified": "2020-10-15T21:44:50.401Z", - "contributors": ["AlePerez92", "teoli", "natav", "pekechis"] - }, "Web/CSS/-webkit-tap-highlight-color": { "modified": "2019-03-23T22:35:33.059Z", "contributors": ["pekechis"] @@ -6078,14 +6070,6 @@ "modified": "2019-03-23T22:29:22.603Z", "contributors": ["pekechis"] }, - "Web/CSS/::-moz-page": { - "modified": "2019-03-23T22:29:23.000Z", - "contributors": ["teoli", "pekechis"] - }, - "Web/CSS/::-moz-page-sequence": { - "modified": "2019-03-23T22:29:18.734Z", - "contributors": ["teoli", "pekechis"] - }, "Web/CSS/::-moz-progress-bar": { "modified": "2019-03-23T22:29:21.640Z", "contributors": ["lajaso", "pekechis"] @@ -6102,10 +6086,6 @@ "modified": "2019-03-23T22:27:41.835Z", "contributors": ["teoli", "pekechis"] }, - "Web/CSS/::-moz-scrolled-page-sequence": { - "modified": "2019-03-23T22:27:47.385Z", - "contributors": ["teoli", "pekechis"] - }, "Web/CSS/::-webkit-inner-spin-button": { "modified": "2019-03-18T21:17:13.569Z", "contributors": ["teoli", "pekechis"] @@ -14050,6 +14030,10 @@ "modified": "2019-03-23T22:49:37.176Z", "contributors": ["gdlm91", "japho"] }, + "conflicting/Web/API/Fetch_API/Using_Fetch": { + "modified": "2019-03-18T21:24:00.327Z", + "contributors": ["IsraelFloresDGA"] + }, "conflicting/Web/API/Geolocation": { "modified": "2019-03-23T23:01:31.642Z", "contributors": ["fscholz"] @@ -15153,10 +15137,26 @@ "modified": "2020-10-15T22:13:14.061Z", "contributors": ["Adorta4"] }, + "orphaned/Web/CSS/-webkit-overflow-scrolling": { + "modified": "2020-10-15T21:44:50.401Z", + "contributors": ["AlePerez92", "teoli", "natav", "pekechis"] + }, "orphaned/Web/CSS/:-moz-ui-valid": { "modified": "2019-03-23T22:29:23.305Z", "contributors": ["teoli", "pekechis"] }, + "orphaned/Web/CSS/::-moz-page": { + "modified": "2019-03-23T22:29:23.000Z", + "contributors": ["teoli", "pekechis"] + }, + "orphaned/Web/CSS/::-moz-page-sequence": { + "modified": "2019-03-23T22:29:18.734Z", + "contributors": ["teoli", "pekechis"] + }, + "orphaned/Web/CSS/::-moz-scrolled-page-sequence": { + "modified": "2019-03-23T22:27:47.385Z", + "contributors": ["teoli", "pekechis"] + }, "orphaned/Web/CSS/CSS_Animations/Detecting_CSS_animation_support": { "modified": "2019-03-23T22:41:48.122Z", "contributors": ["wbamberg", "CristhianLora1", "DracotMolver"] diff --git a/files/es/web/api/fetch_api/basic_concepts/index.md b/files/es/conflicting/web/api/fetch_api/using_fetch/index.md similarity index 97% rename from files/es/web/api/fetch_api/basic_concepts/index.md rename to files/es/conflicting/web/api/fetch_api/using_fetch/index.md index 1542bf81cc3e20..f66feea8981e06 100644 --- a/files/es/web/api/fetch_api/basic_concepts/index.md +++ b/files/es/conflicting/web/api/fetch_api/using_fetch/index.md @@ -1,6 +1,7 @@ --- title: Conceptos básicos de Fetch -slug: Web/API/Fetch_API/Basic_concepts +slug: conflicting/Web/API/Fetch_API/Using_Fetch +original_slug: Web/API/Fetch_API/Basic_concepts --- {{DefaultAPISidebar("Fetch API")}} diff --git a/files/es/learn/javascript/client-side_web_apis/index.md b/files/es/learn/javascript/client-side_web_apis/index.md index f6b9a0b55ca9a2..8f3d188434fa96 100644 --- a/files/es/learn/javascript/client-side_web_apis/index.md +++ b/files/es/learn/javascript/client-side_web_apis/index.md @@ -22,7 +22,7 @@ Conocimiento basico de [HTML](/es/docs/Learn/HTML) y [CSS](/es/docs/Learn/CSS) t - [Manipulacion de documentos](/es/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents) - : Al escribir páginas web y aplicaciones, una de las cosas más comunes que querrás hacer es manipular los documentos web de alguna manera. Esto generalmente se hace usando el Document Object Model (DOM), un conjunto de APIs para controlar el HTML y la información de sus estilos que hace un uso intensivo del objeto {{domxref("Document")}} . En este artículo, veremos cómo usar el DOM en detalle, junto con algunas otras API que pueden alterar su entorno de maneras interesantes. - [Obteniendo data desde el servidor](/es/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data) - - : Otra tarea frecuente en las en las aplicaciones y los sitios web modernos, es recuperar los datos individuales de un elemento del seridor para actualizar solo una seccion de la pagina sin tener que cargar una pagina web completamente nueva. Este detalle, aparentemente pequeño, ha tenido un gran impacto en el rendimiento y el comportamiento de los sitios, En este artículo, explicaremos el concepto y veremos las tecnologías que hacen esto posible, como {{domxref("XMLHttpRequest")}} y el [Fetch API](/es/docs/Web/API/Fetch_API). + - : Otra tarea frecuente en las en las aplicaciones y los sitios web modernos, es recuperar los datos individuales de un elemento del servidor para actualizar solo una seccion de la pagina sin tener que cargar una pagina web completamente nueva. Este detalle, aparentemente pequeño, ha tenido un gran impacto en el rendimiento y el comportamiento de los sitios, En este artículo, explicaremos el concepto y veremos las tecnologías que hacen esto posible, como {{domxref("XMLHttpRequest")}} y el [Fetch API](/es/docs/Web/API/Fetch_API). - [APIs de terceros](/es/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs) - : Las APIs que hemos cubierto hasta ahora están integradas en el navegador, pero no todas las APIs lo estan. Muchos grandes sitios web y servicios tales como Google Maps, Twitter, Facebook, PayPal, etc. proporcionan APIs que permiten a los desarrolladores hacer uso de sus datos (p.ej. mostrando tu actividad en twitter dentro de tu blog) o sus servicios (p.ej. mostrar una ubicacion personalizada porGoogle Maps en tu sitio, o usar el inicio de sesión de Facebook para que inicien sesión tus usuarios). Este artículo analiza la diferencia entre las API del navegador y las API de terceros y muestra algunos usos típicos de este último. - [Dibujar gráficos](/es/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) diff --git a/files/es/learn/javascript/objects/adding_bouncing_balls_features/index.md b/files/es/learn/javascript/objects/adding_bouncing_balls_features/index.md index 1f0d68d7281813..b4b8217907527f 100644 --- a/files/es/learn/javascript/objects/adding_bouncing_balls_features/index.md +++ b/files/es/learn/javascript/objects/adding_bouncing_balls_features/index.md @@ -51,16 +51,15 @@ En este punto, intente volver a cargar el código; debería funcionar igual que Ahora es el momento de conocer al chico malo: ¡el `EvilCircle()`! Nuestro juego solo involucrará un círculo malvado, pero lo vamos a seguir definiendo usando un constructor que hereda de `Shape()` para que tengas algo de práctica. Es posible que desee agregar otro círculo a la aplicación más adelante que pueda ser controlado por otro jugador o tener varios círculos malvados controlados por computadora. Probablemente no vas a dominar el mundo con un solo círculo maligno, pero servirá para esta evaluación. -El constructor `EvilCircle()` debe heredar `x`, `y`, `velX`, `velY`, y `exists` from `Shape()`, pero `velX` y `velY` debe ser igual a 20. - -Debería hacer algo como `Shape.call(this, x, y, 20, 20, exists);` +#### El constructor EvilCircle Debe definir también sus propias propiedades, como las siguientes: -- `color` — `'white'` -- `size` — `10` +- Pasarle solo `x`, `y` como argumentos +- Pase los argumentos `x`, `y` a la superclase `Shape` junto con los valores para `velX` y `velY` iguales a 20. Debe hacer esto con código como `super(x, y, 20, 20);` +- Debe establecer `color` en `'white'` y `size` en `10` -Otra vez, recuerda definir tus propiedades heredadas como parámetros en el constructor, y configura las propiedades `prototype` y `constructor` properties correc.tamente +Otra vez, recuerda definir tus propiedades heredadas como parámetros en el constructor, y configura las propiedades `prototype` y `constructor` properties correctamente ### Definiendo los métodos de EvilCircle() diff --git a/files/es/mdn/community/contributing/translated_content/index.md b/files/es/mdn/community/contributing/translated_content/index.md index 43025f0cd43f12..bc2dd3ba9209dd 100644 --- a/files/es/mdn/community/contributing/translated_content/index.md +++ b/files/es/mdn/community/contributing/translated_content/index.md @@ -47,7 +47,7 @@ Hemos _congelado_ todo el contenido localizado (lo que significa que no aceptare ### Español (es) -- Discusiones: [Matrix (canal #mdn-l10n-es)](https://chat.mozilla.org/#/room/#mdn-l10n-es:mozilla.org), [Telegram (canal MDN l10n ES)](https://t.me/+Dr6qKQCAepw4MjFj), [Discord (MDN Web Docs Community ,canal #spanish)](/discord) +- Discusiones: [Matrix (`#mdn-l10n-es`)](https://chat.mozilla.org/#/room/#mdn-l10n-es:mozilla.org), [Telegram (`MDN l10n ES`)](https://t.me/+Dr6qKQCAepw4MjFj), [Discord (`#spanish`)](/discord) - Colaboradores actuales: [Graywolf9](https://github.com/Graywolf9), [JuanVqz](https://github.com/JuanVqz), [Jalkhov](https://github.com/Jalkhov), [marcelozarate](https://github.com/marcelozarate), [davbrito](https://github.com/davbrito), [Vallejoanderson](https://github.com/Vallejoanderson). > **Nota:** Si quiere hablar sobre la posibilidad de _descongelar_ una localización, las [directrices sobre lo que se requiere se pueden encontrar aquí](https://github.com/mdn/translated-content/blob/main/PEERS_GUIDELINES.md#activating-a-locale) diff --git a/files/es/web/css/-webkit-overflow-scrolling/index.md b/files/es/orphaned/web/css/-webkit-overflow-scrolling/index.md similarity index 95% rename from files/es/web/css/-webkit-overflow-scrolling/index.md rename to files/es/orphaned/web/css/-webkit-overflow-scrolling/index.md index 2c4db44c4da6bf..e63951a56efaaa 100644 --- a/files/es/web/css/-webkit-overflow-scrolling/index.md +++ b/files/es/orphaned/web/css/-webkit-overflow-scrolling/index.md @@ -1,6 +1,7 @@ --- title: "-webkit-overflow-scrolling" -slug: Web/CSS/-webkit-overflow-scrolling +slug: orphaned/Web/CSS/-webkit-overflow-scrolling +original_slug: Web/CSS/-webkit-overflow-scrolling --- {{CSSRef}}{{Non-standard_header}} diff --git a/files/es/web/css/_doublecolon_-moz-page-sequence/index.md b/files/es/orphaned/web/css/_doublecolon_-moz-page-sequence/index.md similarity index 84% rename from files/es/web/css/_doublecolon_-moz-page-sequence/index.md rename to files/es/orphaned/web/css/_doublecolon_-moz-page-sequence/index.md index 50f20fb4a3bc38..504f06eba37a23 100644 --- a/files/es/web/css/_doublecolon_-moz-page-sequence/index.md +++ b/files/es/orphaned/web/css/_doublecolon_-moz-page-sequence/index.md @@ -1,6 +1,7 @@ --- title: "::-moz-page-sequence" -slug: Web/CSS/::-moz-page-sequence +slug: orphaned/Web/CSS/::-moz-page-sequence +original_slug: Web/CSS/::-moz-page-sequence --- {{CSSRef}}{{non-standard_header}} diff --git a/files/es/web/css/_doublecolon_-moz-page/index.md b/files/es/orphaned/web/css/_doublecolon_-moz-page/index.md similarity index 85% rename from files/es/web/css/_doublecolon_-moz-page/index.md rename to files/es/orphaned/web/css/_doublecolon_-moz-page/index.md index 4f1f6cf96664b7..b72b14d45f9e3a 100644 --- a/files/es/web/css/_doublecolon_-moz-page/index.md +++ b/files/es/orphaned/web/css/_doublecolon_-moz-page/index.md @@ -1,6 +1,7 @@ --- title: "::-moz-page" -slug: Web/CSS/::-moz-page +slug: orphaned/Web/CSS/::-moz-page +original_slug: Web/CSS/::-moz-page --- {{Non-standard_header}}{{CSSRef}} diff --git a/files/es/web/css/_doublecolon_-moz-scrolled-page-sequence/index.md b/files/es/orphaned/web/css/_doublecolon_-moz-scrolled-page-sequence/index.md similarity index 80% rename from files/es/web/css/_doublecolon_-moz-scrolled-page-sequence/index.md rename to files/es/orphaned/web/css/_doublecolon_-moz-scrolled-page-sequence/index.md index 56c91435cd395f..f0a613a7b3281a 100644 --- a/files/es/web/css/_doublecolon_-moz-scrolled-page-sequence/index.md +++ b/files/es/orphaned/web/css/_doublecolon_-moz-scrolled-page-sequence/index.md @@ -1,6 +1,7 @@ --- title: "::-moz-scrolled-page-sequence" -slug: Web/CSS/::-moz-scrolled-page-sequence +slug: orphaned/Web/CSS/::-moz-scrolled-page-sequence +original_slug: Web/CSS/::-moz-scrolled-page-sequence --- {{CSSRef}}{{non-standard_header}} diff --git a/files/es/web/api/element/getattribute/index.md b/files/es/web/api/element/getattribute/index.md index 2002c2bdb37b4f..cfcb146faf54eb 100644 --- a/files/es/web/api/element/getattribute/index.md +++ b/files/es/web/api/element/getattribute/index.md @@ -29,14 +29,6 @@ var align = div1.getAttribute("align"); alert(align); // Muestra el valor de la alineación(align) del elemento con id="div1" ``` -## Notas - -Cuando es invocado en un elemento HTML desde un DOM marcado como documento HTML, `getAttribute()` convierte a minúsculas el argumento antes de proceder. - -Esencialmente todos los navegadores (Firefox, Internet Explorer, versiones recientes de Opera, Safari, Konqueror, y iCab, siendo una lista no exhaustiva) devuelven `null` cuando el atributo especificado no existe en el elemento especificado y esto es lo que establece [el actual borrador de la especificación del DOM](http://dom.spec.whatwg.org/#dom-element-getattribute). Por otra parte, la antigua especificación del DOM 3 Core dice que el valor correcto de retorno es de hecho una _cadena vacía_, y algunas implementaciones de DOM aplican este comportamiento. La implementación de getAttribute en XUL (Gecko) sigue la especificación de DOM 3 Core y retorna una cadena vacía. Por consiguiente, es recomendable usar {{domxref("element.hasAttribute()")}} para verificar la existencia de un atributo previo a la utilización de `getAttribute()` si es posible que el atributo requerido no exista en el elemento especificado. - -{{DOMAttributeMethods}} - ## Especificaciones {{Specifications}} diff --git a/files/es/web/api/element/hasattribute/index.md b/files/es/web/api/element/hasattribute/index.md index 5951414692617b..0a0d3c58322be2 100644 --- a/files/es/web/api/element/hasattribute/index.md +++ b/files/es/web/api/element/hasattribute/index.md @@ -39,10 +39,6 @@ if (foo.hasAttribute("bar")) { })(Element.prototype); ``` -## Notas - -{{DOMAttributeMethods}} - ## Especificaciones {{Specifications}} diff --git a/files/es/web/api/element/setattribute/index.md b/files/es/web/api/element/setattribute/index.md index 3aea40c7727b12..57f0d526f0d185 100644 --- a/files/es/web/api/element/setattribute/index.md +++ b/files/es/web/api/element/setattribute/index.md @@ -61,8 +61,6 @@ Esto demuestra dos cosas: {{ EmbedLiveSample('Example', '300', '50') }} -{{DOMAttributeMethods}} - ## Especificaciones {{Specifications}} diff --git a/files/es/web/api/web_storage_api/index.md b/files/es/web/api/web_storage_api/index.md index 7d88e7eb0401bd..32241c74133db5 100644 --- a/files/es/web/api/web_storage_api/index.md +++ b/files/es/web/api/web_storage_api/index.md @@ -18,8 +18,6 @@ Estos mecanismos están disponibles mediante las propiedades [`Window.sessionSto > **Nota:** Acceder al Almacenamiento web desde IFrames de terceros está prohibido si el usuario tiene [deshabilitadas las cookies de terceros](https://support.mozilla.org/en-US/kb/disable-third-party-cookies) (Firefox implementa este comportamiento a partir de la [versión 43](/es/docs/Mozilla/Firefox/Releases/43)). -> **Nota:** El almacenamiento web no es lo mismo que [mozStorage](/es/docs/Storage) (interfaces Mozilla's XPCOM para SQLite) o la [Session store API](/es/docs/Session_store_API) (una utilidad de almacenamiento [XPCOM](/es/docs/XPCOM) usada por extensiones). - ## Interfaces de almacenamiento web - {{domxref("Storage")}} @@ -31,9 +29,9 @@ Estos mecanismos están disponibles mediante las propiedades [`Window.sessionSto ## Ejemplos -Para ilustrar algunos usos típicos del almacenamiento web, hemos creado un ejemplo simple, llamado [Demo de almacenamiento web](https://github.com/mdn/web-storage-demo). La [página de inicio](http://mdn.github.io/web-storage-demo/) proporciona controles que puedes utilizar para personalizar el color, la tipografía y la imagen decorativa. Cuando seleccionas una opción diferente, la página se actualiza instantáneamente; además, tus opciones se almacenan en `localStorage`, de forma que si abandonas la página y la vuelves a cargar, tus opciones son recordadas. +Para ilustrar algunos usos típicos del almacenamiento web, hemos creado un ejemplo simple, llamado [Demo de almacenamiento web](https://github.com/mdn/dom-examples/tree/main/web-storage). La [página de inicio](https://mdn.github.io/dom-examples/web-storage/) proporciona controles que puedes utilizar para personalizar el color, la tipografía y la imagen decorativa. Cuando seleccionas una opción diferente, la página se actualiza instantáneamente; además, tus opciones se almacenan en `localStorage`, de forma que si abandonas la página y la vuelves a cargar, tus opciones son recordadas. -También creamos una[página de salida del evento](http://mdn.github.io/web-storage-demo/event.html) — si cargas esta página en otra pestaña y luego haces cambios a tus opciones en la página de inicio, verás que se muestra la información almacenada actualizada puesto que se dispara un evento [`StorageEvent`](/es/docs/Web/Reference/Events/StorageEvent). +También creamos una[página de salida del evento](https://mdn.github.io/dom-examples/web-storage/event.html) — si cargas esta página en otra pestaña y luego haces cambios a tus opciones en la página de inicio, verás que se muestra la información almacenada actualizada puesto que se dispara un evento [`StorageEvent`](/es/docs/Web/API/StorageEvent). ## Especificaciones diff --git a/files/es/web/api/window/localstorage/index.md b/files/es/web/api/window/localstorage/index.md index fc986589f24870..c6c7c674873c15 100644 --- a/files/es/web/api/window/localstorage/index.md +++ b/files/es/web/api/window/localstorage/index.md @@ -5,7 +5,7 @@ slug: Web/API/Window/localStorage {{APIRef()}} -La propiedad de sólo lectura **`localStorage`** te permite acceder al objeto local {{DOMxRef("Storage")}}; los datos persisten almacenados entre de las diferentes sesiones de navegación. localStorage es similar a [`sessionStorage`](/es/docs/Web/API/Window.sessionStorage). La única diferencia es que, mientras los datos almacenados en localStorage no tienen fecha de expiración, los datos almacenados en sessionStorage son eliminados cuando finaliza la sesion de navegación - lo cual ocurre cuando se cierra la página. +La propiedad de sólo lectura **`localStorage`** te permite acceder al objeto local {{DOMxRef("Storage")}}; los datos persisten almacenados entre las diferentes sesiones de navegación. localStorage es similar a [`sessionStorage`](/es/docs/Web/API/Window.sessionStorage). La única diferencia es que, mientras los datos almacenados en localStorage no tienen fecha de expiración, los datos almacenados en sessionStorage son eliminados cuando finaliza la sesion de navegación - lo cual ocurre cuando se cierra la página. Con [`sessionStorage`](/es/docs/Web/API/Window.sessionStorage) los datos persisten sólo en la ventana/tab que los creó, mientras que con `localStorage` los datos persisten entre ventanas/tabs con el mismo origen. diff --git a/files/es/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md b/files/es/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md index f79422e18669d9..200abf30e1ba4c 100644 --- a/files/es/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md +++ b/files/es/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md @@ -7,7 +7,7 @@ slug: Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox El Módulo de Caja Flexible, comúnmente llamado flexbox, fue diseñado como un modelo unidimensional de layout, y como un método que pueda ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación. Este artículo hace un repaso de las principales características de flexbox, las que exploraremos con mayor detalle en el resto de estas guías. -Cuando describimos a flexbox como unidimensional destacamos el hecho que flexbox maneja el layout en una sola dimensión a la vez — ya sea como fila o como columna. Esto contrasta con el modelo bidimensional del [Grid Layout de CSS](/es/docs/Web/CSS/CSS_Grid_Layout), el cual controla columnas y filas a la vez. +Cuando describimos a flexbox como unidimensional destacamos el hecho que flexbox maneja el layout en una sola dimensión a la vez — ya sea como fila o como columna. Esto contrasta con el modelo bidimensional del [Grid Layout de CSS](/es/docs/Web/CSS/CSS_grid_layout), el cual controla columnas y filas a la vez. Los dos ejes de flexbox @@ -24,21 +24,21 @@ El eje principal está definido por `flex-direction`, que posee cuatro posibles Si elegimos `row` o `row-reverse`, el eje principal correrá a lo largo de la fila según la **dirección de la línea** . -![If flex-direction is set to row the main axis runs along the row in the inline direction.](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox/basics1.png) +![If flex-direction is set to row the main axis runs along the row in the inline direction.](basics1.svg) Al elegir `column` o `column-reverse` el eje principal correrá desde el borde superior de la página hasta el final — según la **dirección del bloque**. -![If flex-direction is set to column the main axis runs in the block direction.](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox/basics2.png) +![If flex-direction is set to column the main axis runs in the block direction.](basics2.svg) ### El eje cruzado El eje cruzado va perpendicular al eje principal, y por lo tanto si `flex-direction` (del eje principal) es `row` o `row-reverse` el eje cruzado irá por las columnas. -![If flex-direction is set to row then the cross axis runs in the block direction.](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox/basics3.png) +![If flex-direction is set to row then the cross axis runs in the block direction.](basics3.svg) Si el eje principal es `column` o `column-reverse` entonces el eje cruzado corre a lo largo de las filas. -![If flex-direction is set to column then the cross axis runs in the inline direction.](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox/basics4.png) +![If flex-direction is set to column then the cross axis runs in the inline direction.](basics4.svg) Entender cuál eje es cuál es importante cuando empezamos a mirar la alineación y justificación flexible de los ítems; flexbox posee propiedades que permiten alinear y justificar el contenido sobre un eje o el otro. @@ -50,11 +50,11 @@ Puede leer más acerca de la relación que hay entre flexbox y la especificació Si `flex-direction` es `row` y estoy trabajando en español, entonces el margen inicial del eje principal quedará a la izquierda, y el margen final a la derecha. -![Working in English the start edge is on the left.](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox/basics5.png) +![Working in English the start edge is on the left.](basics5.svg) Si fuera a trabajar en árabe, entonces el margen inicial de mi eje principal quedaría a la derecha y el margen final a la izquierda. -![The start edge in a RTL language is on the right.](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox/basics6.png) +![The start edge in a RTL language is on the right.](basics6.svg) En ambos casos el margen inicial del eje cruzado estará en el extremo superior del contenedor flex y el margen final en el extremo inferior, ya que ambos idiomas tiene un modo de escritura horizontal. @@ -117,7 +117,7 @@ Antes de darle sentido a estas propiedades debemos considerar el concepto de **e Si tenemos tres ítems con un ancho de 100 pixeles en un contenedor de 500 pixeles de ancho, entonces el espacio que se necesita para colocar nuestros ítems es de 300 pixeles. Esto deja 200 pixeles de espacio disponible. Si no cambiamos los valores iniciales entonces flexbox colocará ese espacio después del último ítem. -![This flex container has available space after laying out the items.](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox/basics7.png) +![This flex container has available space after laying out the items.](basics7.svg) Si en cambio quisiéramos que los ítems crecieran para llenar ese espacio, entonces necesitaremos un método para distribuir el espacio sobrante entre los ítems. Es justo lo que harán las propiedades `flex` que aplicaremos a dichos ítems. diff --git a/files/es/web/http/overview/index.md b/files/es/web/http/overview/index.md index f43a18caa7ecd1..c8affff525a672 100644 --- a/files/es/web/http/overview/index.md +++ b/files/es/web/http/overview/index.md @@ -5,13 +5,15 @@ slug: Web/HTTP/Overview {{HTTPSidebar}} -HTTP, de sus siglas en inglés: "Hypertext Transfer Protocol", es el nombre de un protocolo el cual nos permite realizar una petición de datos y recursos, como pueden ser documentos {{glossary("HTML")}}. Es la base de cualquier intercambio de datos en la Web, y un protocolo de estructura cliente-servidor, esto quiere decir que una petición de datos es iniciada por el elemento que recibirá los datos (el cliente), normalmente un navegador Web. Así, una página web completa resulta de la unión de distintos sub-documentos recibidos, como, por ejemplo: un documento que especifique el estilo de maquetación de la página web ({{glossary("CSS")}}), el texto, las imágenes, vídeos, scripts, etc... +HTTP, de sus siglas en inglés: "Hypertext Transfer Protocol", es el nombre de un {{glossary("protocol", "protocolo")}} el cual nos permite realizar una petición de datos y recursos, como pueden ser documentos HTML. Es la base de cualquier intercambio de datos en la Web, y un protocolo de estructura cliente-servidor, esto quiere decir que una petición de datos es iniciada por el elemento que recibirá los datos (el cliente), normalmente un navegador Web. Así, una página web completa resulta de la unión de distintos sub-documentos recibidos, como, por ejemplo: un documento que especifique el estilo de maquetación de la página web ({{glossary("CSS")}}), el texto, las imágenes, vídeos, scripts, etc... -![A Web document is the composition of different resources](fetching_a_page.png) +![Un único documento web compuesto por múltiples recursos de diferentes servidores.](https://mdn.github.io/shared-assets/images/diagrams/http/overview/fetching-a-page.svg) Clientes y servidores se comunican intercambiando mensajes individuales (en contraposición a las comunicaciones que utilizan flujos continuos de datos). Los mensajes que envía el cliente, normalmente un navegador Web, se llaman _peticiones_, y los mensajes enviados por el servidor se llaman _respuestas_. -![HTTP as an application layer protocol, on top of TCP (transport layer) and IP (network layer) and below the presentation layer.](http-layers.png)Diseñado a principios de la década de 1990, {{glossary("HTTP")}} es un protocolo ampliable, que ha ido evolucionando con el tiempo. Es lo que se conoce como un protocolo de la capa de aplicación, y se transmite sobre el protocolo {{glossary("TCP")}}, o el protocolo encriptado {{glossary("TLS")}}, aunque teóricamente podría usarse cualquier otro protocolo fiable. Gracias a que es un protocolo capaz de ampliarse, se usa no solo para transmitir documentos de hipertexto ({{glossary("HTML")}}), si no que además, se usa para transmitir imágenes o vídeos, o enviar datos o contenido a los servidores, como en el caso de los formularios de datos. {{glossary("HTTP")}} puede incluso ser utilizado para transmitir partes de documentos, y actualizar páginas Web en el acto. +![HTTP como protocolo de capa de aplicación, por encima de TCP (capa de transporte) e IP (capa de red) y por debajo de la capa de presentación.](https://mdn.github.io/shared-assets/images/diagrams/http/overview/http-layers.svg) + +Diseñado a principios de la década de 1990, {{glossary("HTTP")}} es un protocolo ampliable, que ha ido evolucionando con el tiempo. Es lo que se conoce como un protocolo de la capa de aplicación, y se transmite sobre el protocolo {{glossary("TCP")}}, o el protocolo encriptado {{glossary("TLS")}}, aunque teóricamente podría usarse cualquier otro protocolo fiable. Gracias a que es un protocolo capaz de ampliarse, se usa no solo para transmitir documentos de hipertexto ({{glossary("HTML")}}), si no que además, se usa para transmitir imágenes o vídeos, o enviar datos o contenido a los servidores, como en el caso de los formularios de datos. {{glossary("HTTP")}} puede incluso ser utilizado para transmitir partes de documentos, y actualizar páginas Web en el acto. ## Arquitectura de los sistemas basados en HTTP @@ -19,7 +21,7 @@ Clientes y servidores se comunican intercambiando mensajes individuales (en cont Cada petición individual se envía a un servidor, el cuál la gestiona y responde. Entre cada _petición_ y _respuesta_, hay varios intermediarios, normalmente denominados {{glossary("Proxy_server", "proxies")}}, los cuales realizan distintas funciones, como: gateways o {{glossary("Cache", "caches")}}. -![Client server chain](client-server-chain.png) +![Una solicitud HTTP de un cliente reenviada por varios servidores proxy a un servidor y una respuesta que toma la misma ruta de regreso al cliente.](https://mdn.github.io/shared-assets/images/diagrams/http/overview/client-server-chain.svg) En realidad, hay más elementos intermedios, entre un navegador y el servidor que gestiona su petición: hay otros tipos de dispositivos: como _routers_, _modems_ ... Es gracias a la arquitectura en capas de la Web, que estos intermediarios, son transparentes al navegador y al servidor, ya que {{glossary("HTTP")}} se apoya en los protocolos de red y transporte. {{glossary("HTTP")}} es un protocolo de aplicación, y por tanto se apoya sobre los anteriores. Aunque para diagnosticar problemas en redes de comunicación, las capas inferiores son irrelevantes para la definición del protocolo {{glossary("HTTP")}} . @@ -130,11 +132,11 @@ Existen dos tipos de mensajes HTTP: peticiones y respuestas, cada uno sigue su p Un ejemplo de petición HTTP: -![A basic HTTP request](http_request.png) +![Descripción general de una solicitud GET HTTP con encabezados](https://mdn.github.io/shared-assets/images/diagrams/http/overview/http-request.svg) Una petición de HTTP, está formado por los siguientes campos: -- Un [método](/es/docs/Web/HTTP/Methods) HTTP, normalmente pueden ser un verbo, como: {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}} o un nombre como: {{HTTPMethod("OPTIONS")}} o {{HTTPMethod("HEAD")}}, que defina la operación que el cliente quiera realizar. El objetivo de un cliente, suele ser una petición de recursos, usando GET, o presentar un valor de un [formulario HTML](/es/docs/Web/Guide/HTML/Forms), usando POST, aunque en otras ocasiones puede hacer otros tipos de peticiones. +- Un [método](/es/docs/Web/HTTP/Methods) HTTP, normalmente pueden ser un verbo, como: {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}} o un nombre como: {{HTTPMethod("OPTIONS")}} o {{HTTPMethod("HEAD")}}, que defina la operación que el cliente quiera realizar. El objetivo de un cliente, suele ser una petición de recursos, usando GET, o presentar un valor de un [formulario HTML](/es/docs/Learn/Forms), usando POST, aunque en otras ocasiones puede hacer otros tipos de peticiones. - La dirección del recurso pedido; la URL del recurso, sin los elementos obvios por el contexto, como pueden ser: sin el {{glossary("protocol","protocolo")}} (`http://`), el {{glossary("domain","dominio")}} (aquí `developer.mozilla.org`), o el {{glossary("port","puerto")}} TCP (aquí el 80). - La versión del protocolo HTTP. - Cabeceras HTTP opcionales, que pueden aportar información adicional a los servidores. @@ -144,7 +146,7 @@ Una petición de HTTP, está formado por los siguientes campos: Un ejemplo de repuesta: -![](http_response.png) +![Descripción general de una respuesta HTTP '200 OK' a una solicitud GET, incluidos los encabezados de respuesta.](https://mdn.github.io/shared-assets/images/diagrams/http/overview/http-response.svg) Las respuestas están formadas por los siguientes campos: @@ -158,4 +160,4 @@ Las respuestas están formadas por los siguientes campos: El protocolo HTTP es un protocolo ampliable y fácil de usar. Su estructura cliente-servidor, junto con la capacidad para usar cabeceras, permite a este protocolo evolucionar con las nuevas y futuras aplicaciones en Internet. -Aunque la versión del protocolo HTTP/2 añade algo de complejidad, al utilizar un formato en binario, esto aumenta su rendimiento, y la estructura y semantica de los mensajes es la misma desde la versión HTTP/1.0. El flujo de comunicaciones en una sesión es sencillo y puede ser fácilmente estudiado e investigado con un simple [monitor de mensajes HTTP](/es/docs/Tools/Network_Monitor). +Aunque la versión del protocolo HTTP/2 añade algo de complejidad, al utilizar un formato en binario, esto aumenta su rendimiento, y la estructura y semantica de los mensajes es la misma desde la versión HTTP/1.0. El flujo de comunicaciones en una sesión es sencillo y puede ser fácilmente estudiado e investigado con un simple [monitor de mensajes HTTP](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html). diff --git a/files/es/web/javascript/reference/global_objects/array/every/index.md b/files/es/web/javascript/reference/global_objects/array/every/index.md index b57eba0b7147f2..69a527efd982df 100644 --- a/files/es/web/javascript/reference/global_objects/array/every/index.md +++ b/files/es/web/javascript/reference/global_objects/array/every/index.md @@ -1,147 +1,117 @@ --- title: Array.prototype.every() slug: Web/JavaScript/Reference/Global_Objects/Array/every +l10n: + sourceCommit: 57375b77984037c614982a9327bc96101824db89 --- {{JSRef}} -Determina si todos los elementos en el array satisfacen una condición. +El método **`every()`** de las instancias de {{jsxref("Array")}} prueba si todos los elementos del arreglo pasan la prueba implementada por la función proporcionada. Devuelve un valor booleano. -> **Advertencia:** ¡Llamar este método en un array vacío devuelve `true` para cualquier condición! - -{{EmbedInteractiveExample("pages/js/array-every.html")}} - -La fuente de este ejemplo interactivo se encuentra en GitHub. Si desea contribuir con el proyecto de ejemplos interactivos, clone y envíenos un*pull* _request_. +{{EmbedInteractiveExample("pages/js/array-every.html", "shorter")}} ## Sintaxis -``` -arr.every(callback(element[, index[, array]])[, thisArg]) +```js-nolint +every(callbackFn) +every(callbackFn, thisArg) ``` ### Parámetros -- `callback` +- `callbackFn` + - : Una función que se ejecuta para cada elemento del arreglo. Debe devolver un valor [_truthy_](/es/docs/Glossary/Truthy) para indicar que el elemento pasa la prueba y un valor [_falsy_](/es/docs/Glossary/Falsy) en caso contrario. La función se llama con los siguientes argumentos: + - `element` + - : El elemento actual que se está procesando en el arreglo. + - `index` + - : El índice del elemento actual que se está procesando en el arreglo. + - `array` + - : El arreglo `every()` desde el que fue llamada. +- `thisArg` {{optional_inline}} + - : Un valor para usar como `this` al ejecutar `callbackFn`. Ver [métodos iterativos](/es/docs/Web/JavaScript/Reference/Global_Objects/Array#iterative_methods). - - : Una función para probar cada elemento; recibe tres argumentos: +### Valor de retorno - - `currentValue` (required) - - : El elemento actual del arreglo que está siendo procesado. - - `index` {{Optional_inline}} - - : El índice del elemento actual del arreglo que está siendo procesado. - - `array` {{Optional_inline}} - - : El arreglo sobre el cual fue llamado `every`. +`true` a menos que `callbackFn` devuelva un valor {{Glossary("falsy")}} para un elemento del arreglo, en cuyo caso se devuelve `false` inmediatamente. -- `thisArg` {{Optional_inline}} - - : Valor por usar como `this` cuando se ejecute `callback`. +## Descripción -### Valor de retorno +El método `every()` es un [método iterativo](/es/docs/Web/JavaScript/Reference/Global_Objects/Array#iterative_methods). Llama a una función `callbackFn` proporcionada una vez por cada elemento de un arreglo, hasta que `callbackFn` devuelva un valor [_falsy_](/es/docs/Glossary/Falsy). Si se encuentra dicho elemento, `every()` devuelve inmediatamente `false` y deja de iterar por el arreglo. De lo contrario, si `callbackFn` devuelve un valor [_truthy_](/es/docs/Glossary/Truthy) para todos los elementos, `every()` devuelve `true`. Lea la sección [métodos iterativos](/es/docs/Web/JavaScript/Reference/Global_Objects/Array#iterative_methods) para obtener más información sobre cómo funcionan estos métodos en general. -`true` si la función de devolución de llamada devuelve un valor de {{Glossary("truthy")}} para cada elemento de matriz; de lo contrario, `false`. +`every` actúa como el cuantificador "para todos" en matemáticas. En particular, para un arreglo vacío, devuelve `true`. (Es [vaciamente cierto](https://es.wikipedia.org/wiki/Verdad_vacua) que todos los elementos del [conjunto vacío](https://es.wikipedia.org/wiki/Conjunto_vac%C3%ADo#Propiedades) satisfacen cualquier condición dada). -## Descripción +`callbackFn` se invoca únicamente para índices de arreglos que tienen valores asignados. No se invoca para espacios vacíos en [arreglos dispersos](/es/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays). + +El método `every()` es [genérico](/es/docs/Web/JavaScript/Reference/Global_Objects/Array#generic_array_methods). Solo espera que el valor `this` tenga una propiedad `length` y propiedades con claves enteras. + +## Ejemplos -El método `every` ejecuta la función `callback` dada una vez por cada elemento presente en el arreglo hasta encontrar uno que haga retornar un valor falso a `callback` (un valor que resulte falso cuando se convierta a booleano). Si no se encuentra tal elemento, el método `every` de inmediato retorna `false`. O si `callback` retorna verdadero para todos los elementos, `every` retornará `true`. `callback` es llamada sólo para índices del arreglo que tengan valores asignados; no se llama para índices que hayan sido eliminados o a los que no se les haya asignado un valor. +### Probar el tamaño de todos los elementos del arreglo -`callback` es llamada con tres argumetos: el valor del elemento, el índice del elemento y el objeto Array que está siendo recorrido. +El siguiente ejemplo prueba si todos los elementos del arreglo son 10 o más. -Si se proporciona un parámetro `thisArg` a `every`, será pasado a la función `callback` cuando sea llamada, usándolo como valor `this`. En otro caso, se pasará el valor `undefined` para que sea usado como valor `this`. El valor `this` observable por parte de `callback` se determina de acuerdo a [las normas usuales para determinar el `this` visto por una función](/es/docs/Web/JavaScript/Reference/Operators/this). +```js +function isBigEnough(element, index, array) { + return element >= 10; +} +[12, 5, 8, 130, 44].every(isBigEnough); // false +[12, 54, 18, 130, 44].every(isBigEnough); // true +``` -`every` no modifica el arreglo sobre el cual es llamado. +### Comprueba si un arreglo es un subconjunto de otro arreglo -El intervalo de elementos procesados por `every` se establece antes de la primera llamada a `callback`. Los elementos que se agreguen al arreglo después de que la función `every` comience no serán vistos por la función `callback`. Si se modifican elementos existentes en el arreglo, su valor cuando sea pasado a `callback` será el valor que tengan cuando sean visitados; los elementos que se eliminen no serán visitados. +El siguiente ejemplo prueba si todos los elementos de un arreglo están presentes en otro arreglo. -`every` opera como el cuantificador "para todo" en matemáticas. En particular con el arreglo vacío retorna true. (es una [verdad vacua](http://en.wikipedia.org/wiki/Vacuous_truth#Vacuous_truths_in_mathematics) que todos los elementos del [conjunto vacío](http://en.wikipedia.org/wiki/Empty_set#Common_problems) satisfacen una condición dada.) +```js +const isSubset = (array1, array2) => + array2.every((element) => array1.includes(element)); -## Ejemplos +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 +``` -### Probando el tamaño de todos los elementos de un arreglo +### Usando el tercer argumento de callbackFn -El siguiente ejemplo prueba si todos los elementos de un arreglo son mayores que 10. +El argumento `array` es útil si desea acceder a otro elemento del arreglo. El siguiente ejemplo primero utiliza `filter()` para extraer los valores positivos y luego utiliza `every()` para verificar si el arreglo es estrictamente creciente. ```js -function esSuficientementeGrande(elemento, indice, arrreglo) { - return elemento >= 10; -} -[12, 5, 8, 130, 44].every(esSuficientementeGrande); // false -[12, 54, 18, 130, 44].every(esSuficientementeGrande); // true +const numbers = [-2, 4, -8, 16, -32]; +const isIncreasing = numbers + .filter((num) => num > 0) + .every((num, idx, arr) => { + // Sin el argumento arr, no hay forma de acceder fácilmente al + // arreglo intermedio sin guardarla en una variable. + if (idx === 0) return true; + return num > arr[idx - 1]; + }); +console.log(isIncreasing); // true ``` -### Usar funciones flecha +### Uso de every() en arreglos dispersos -Las [funciones flecha](/es/docs/Web/JavaScript/Reference/Functions/Arrow_functions) proveen una sintaxis más corta para la misma prueba. +`every()` no ejecutará su predicado en espacios vacíos. ```js -[12, 5, 8, 130, 44].every((elem) => elem >= 10); // false -[12, 54, 18, 130, 44].every((elem) => elem >= 10); // true +console.log([1, , 3].every((x) => x !== undefined)); // true +console.log([2, , 2].every((x) => x === 2)); // true ``` -## Polyfill +### Llamar a every() en objetos que no son arreglos -`every` fue añadida a la norma ECMA-262 en la 5ta edición; por lo que podría no estar presente en otras implementaciones de la norma. Puede sobrellevarlo insertando el siguiente código al comienzo de su programa, permitiendo el uso de `every` en implementación que no lo soporten de manera nativa. Este algoritmo es exactamente el especificado en ECMA-262, 5ta edición, suponiendo que `Object` y `TypeError` tienen sus valores originales y que `callbackfn.call` evalua al valor original de {{jsxref("Function.prototype.call")}} +El método `every()` lee la propiedad `length` de `this` y luego accede a cada propiedad con una clave entera no negativa menor que `length` hasta que se haya accedido a todas o `callbackFn` devuelva `false`. ```js -if (!Array.prototype.every) { - Array.prototype.every = function (callbackfn, thisArg) { - "use strict"; - var T, k; - - if (this == null) { - throw new TypeError("this is null or not defined"); - } - - // 1. Let O be the result of calling ToObject passing the this - // value as the argument. - var O = Object(this); - - // 2. Let lenValue be the result of calling the Get internal method - // of O with the argument "length". - // 3. Let len be ToUint32(lenValue). - var len = O.length >>> 0; - - // 4. If IsCallable(callbackfn) is false, throw a TypeError exception. - if (typeof callbackfn !== "function") { - throw new TypeError(); - } - - // 5. If thisArg was supplied, let T be thisArg; else let T be undefined. - if (arguments.length > 1) { - T = thisArg; - } - - // 6. Let k be 0. - k = 0; - - // 7. Repeat, while k < len - while (k < len) { - var kValue; - - // a. Let Pk be ToString(k). - // This is implicit for LHS operands of the in operator - // b. Let kPresent be the result of calling the HasProperty internal - // method of O with argument Pk. - // This step can be combined with c - // c. If kPresent is true, then - if (k in O) { - // i. Let kValue be the result of calling the Get internal method - // of O with argument Pk. - kValue = O[k]; - - // ii. Let testResult be the result of calling the Call internal method - // of callbackfn with T as the this value and argument list - // containing kValue, k, and O. - var testResult = callbackfn.call(T, kValue, k, O); - - // iii. If ToBoolean(testResult) is false, return false. - if (!testResult) { - return false; - } - } - k++; - } - return true; - }; -} +const arrayLike = { + length: 3, + 0: "a", + 1: "b", + 2: "c", + 3: 345, // ignorado por every() ya que la longitud es 3 +}; +console.log( + Array.prototype.every.call(arrayLike, (x) => typeof x === "string"), +); // true ``` ## Especificaciones @@ -152,8 +122,12 @@ if (!Array.prototype.every) { {{Compat}} -## Ver también +## Véase también +- [Polyfill de `Array.prototype.every` en `core-js`](https://github.com/zloirock/core-js#ecmascript-array) +- Guia de [colecciones indexadas](/es/docs/Web/JavaScript/Guide/Indexed_collections) +- {{jsxref("Array")}} - {{jsxref("Array.prototype.forEach()")}} - {{jsxref("Array.prototype.some()")}} +- {{jsxref("Array.prototype.find()")}} - {{jsxref("TypedArray.prototype.every()")}} diff --git a/files/es/web/javascript/reference/global_objects/string/valueof/index.md b/files/es/web/javascript/reference/global_objects/string/valueof/index.md index 04219eb6aedf7e..297b7f38f65ef0 100644 --- a/files/es/web/javascript/reference/global_objects/string/valueof/index.md +++ b/files/es/web/javascript/reference/global_objects/string/valueof/index.md @@ -12,7 +12,7 @@ The **`valueOf()`** método devuelve el valor primitivo de un objeto String. ## Sintaxis ``` -caneda.valueOf() +cadena.valueOf() ``` ## Descripción diff --git a/files/fr/glossary/http_3/index.md b/files/fr/glossary/http_3/index.md index 5f7a41891a4d08..e163ad4812d573 100644 --- a/files/fr/glossary/http_3/index.md +++ b/files/fr/glossary/http_3/index.md @@ -5,7 +5,7 @@ slug: Glossary/HTTP_3 {{GlossarySidebar}} -**HTTP/3** est la prochaine révision majeure du [protocole réseau HTTP](/fr/docs/Web/HTTP/Basics_of_HTTP), succédant à {{glossary("HTTP 2", "HTTP/2")}}. Le point majeur de HTTP/3 est qu'il utilise un nouveau protocole {{glossary("UDP")}} nommé QUIC, au lieu de {{glossary("TCP")}}. +**HTTP/3** est la prochaine révision majeure du [protocole réseau HTTP](/fr/docs/Web/HTTP/Basics_of_HTTP), succédant à {{glossary("HTTP 2", "HTTP/2")}}. L'intérêt principal de HTTP/3 est qu'il utilise un nouveau protocole {{glossary("UDP")}} nommé QUIC, au lieu de {{glossary("TCP")}}. ## Voir aussi diff --git a/files/fr/mdn/community/contributing/translated_content/index.md b/files/fr/mdn/community/contributing/translated_content/index.md index ffb7045cde96ec..0318b165d6b6f1 100644 --- a/files/fr/mdn/community/contributing/translated_content/index.md +++ b/files/fr/mdn/community/contributing/translated_content/index.md @@ -40,6 +40,11 @@ Nous avons actuellement dégelé les langues suivantes : - Discussions : [Matrix (#mdn-l10n-ru channel)](https://chat.mozilla.org/#/room/#mdn-l10n-ru:mozilla.org) - Contributeurs actuels : [leon-win](https://github.com/leon-win), [sashasushko](https://github.com/sashasushko), [Saionaro](https://github.com/Saionaro), [yanaklose](https://github.com/yanaklose), [myshov](https://github.com/myshov), [lex111](https://github.com/lex111) +### Espagnol (es) + +- Discussions : [Matrix (`#mdn-l10n-es`)](https://chat.mozilla.org/#/room/#mdn-l10n-es:mozilla.org), [Telegram (`MDN l10n ES`)](https://t.me/+Dr6qKQCAepw4MjFj), [Discord (`#spanish`)](/discord) +- Contributeurs actuels : [Graywolf9](https://github.com/Graywolf9), [JuanVqz](https://github.com/JuanVqz), [Jalkhov](https://github.com/Jalkhov), [marcelozarate](https://github.com/marcelozarate), [davbrito](https://github.com/davbrito), [Vallejoanderson](https://github.com/Vallejoanderson) + ## Autres sujets de localisation sur MDN Pour l'instant, la nouvelle interface utilisateur de la plateforme MDN sera uniquement en anglais. C'est un problème que nous aborderons plus tard. diff --git a/files/fr/mdn/writing_guidelines/writing_style_guide/code_style_guide/shell/index.md b/files/fr/mdn/writing_guidelines/writing_style_guide/code_style_guide/shell/index.md index 60edea2828615d..1d4f5fc63db80f 100644 --- a/files/fr/mdn/writing_guidelines/writing_style_guide/code_style_guide/shell/index.md +++ b/files/fr/mdn/writing_guidelines/writing_style_guide/code_style_guide/shell/index.md @@ -13,8 +13,8 @@ Un _shell_ est un programme qui attend que vous tapiez une commande et que vous ```bash example-good # Cela peut prendre un certain temps… -hg clone https://hg.mozilla.org/mozilla-central/ firefox -cd firefox +git clone https://github.com/mdn/content +cd content ``` ## Directives diff --git a/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.md b/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.md index 31f170eda49b8a..afa2d8ae7ca090 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.md @@ -22,7 +22,7 @@ let gettingItem = browser.storage..get( ### Paramètres - `keys` - - : Une clé (chaîne) ou des clés (un tableau de chaînes ou un objet spécifiant des valeurs par défaut) pour identifier le ou les articles à extraire du stockage. Si vous passez une chaîne vide, un objet ou un tableau ici, un objet vide sera récupéré. Si vous passez `null`, ou une valeur indéfinie, le contenu entier du stockage sera récupéré. + - : Une clé (chaîne) ou des clés (un tableau de chaînes ou un objet spécifiant des valeurs par défaut) pour identifier le ou les articles à extraire du stockage. Si vous passez un objet ou un tableau vide ici, un objet vide sera récupéré. Si vous passez `null`, ou une valeur indéfinie, le contenu entier du stockage sera récupéré. ### Valeur retournée diff --git a/files/fr/mozilla/firefox/releases/3/updating_extensions/index.md b/files/fr/mozilla/firefox/releases/3/updating_extensions/index.md index a5cb3385d7a20d..e5217debd6785b 100644 --- a/files/fr/mozilla/firefox/releases/3/updating_extensions/index.md +++ b/files/fr/mozilla/firefox/releases/3/updating_extensions/index.md @@ -176,7 +176,7 @@ Ou utilisez la technique suivante pour que votre overlay fonctionne tant avec Fi _Ajoutez ici les changements simples que vous avez dû faire à vos extensions pour qu'elles fonctionnent avec Firefox 3._ - `chrome://browser/base/utilityOverlay.js` n'est plus géré pour des raisons de sécurité. Si vous l'utilisiez auparavant, vous devriez passer à `chrome://browser/content/utilityOverlay.js`. -- Les implémentations de [`nsIAboutModule`](/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAboutModule) doivent à présent supporter la méthode `getURIFlags`. Consultez [nsIAboutModule.idl](https://dxr.mozilla.org/mozilla-central/source/netwerk/protocol/about/public/nsIAboutModule.idl) pour la documentation. Ceci affecte les extensions qui fournissent de nouvelles URI `about:`. ([bug 337746](https://bugzilla.mozilla.org/show_bug.cgi?id=337746 'FIXED: [FIX]Move "safe about" hardcoding out of security manager')) +- Les implémentations de [`nsIAboutModule`](/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAboutModule) doivent à présent supporter la méthode `getURIFlags`. Consultez [nsIAboutModule.idl](https://searchfox.org/mozilla-central/source/netwerk/protocol/about/nsIAboutModule.idl) pour la documentation. Ceci affecte les extensions qui fournissent de nouvelles URI `about:`. ([bug 337746](https://bugzilla.mozilla.org/show_bug.cgi?id=337746 'FIXED: [FIX]Move "safe about" hardcoding out of security manager')) - L'élément [`tabbrowser`](/fr/docs/Mozilla/Tech/XUL/tabbrowser) ne fait plus partie du « toolkit » ([bug 339964](https://bugzilla.mozilla.org/show_bug.cgi?id=339964)). Cela signifie qu'il n'est plus disponible pour les applications XUL et extensions. Il continue cependant à être utilisé dans la fenêtre principale de Firefox (browser.xul). - Les changements dans les [proxys nsISupports](/fr/Proxys_nsISupports) et éventuellement aux interfaces liées aux threads doivent être documentés. - Si vous utilisez des instructions de traitement XML comme `` dans vos fichiers XUL, tenez compte des changements effectués dans le [bug 319654](https://bugzilla.mozilla.org/show_bug.cgi?id=319654) : diff --git a/files/fr/mozilla/firefox/releases/30/index.md b/files/fr/mozilla/firefox/releases/30/index.md index 61f72f03616487..0f05eec4d43188 100644 --- a/files/fr/mozilla/firefox/releases/30/index.md +++ b/files/fr/mozilla/firefox/releases/30/index.md @@ -43,7 +43,7 @@ _Pas de changement._ - La prise en charge de base des régions Hit sur canvas a été ajouté: les méthodes {{domxref("CanvasRenderingContext2D.addHitRegion()")}} et {{domxref("CanvasRenderingContext2D.removeHitRegion()")}} ont été ajoutées. Ceux-ci sont désactivés par défaut; pour les activer, définissez la préférence `canvas.hitregions.enabled` sur `true` ([bug Firefox 966591](https://bugzil.la/966591)). - Le non standard, et obsolète depuis Firefox 15, {{domxref("Blob.mozSlice")}} n'est plus supporté ([bug Firefox 961804](https://bugzil.la/961804)). - Les non standards {{domxref("ArchiveReader")}} et {{domxref("ArchiveRequest")}} ne sont plus exposés au Web ([bug Firefox 968883](https://bugzil.la/968883)). -- Les [constructeurs WebIDL](http://dxr.mozilla.org/mozilla-central/source/dom/webidl/) ne peuvent plus être appelés en tant que fonctions. Ils doivent être précédés du mot-clé `new` ([bug Firefox 916644](https://bugzil.la/916644)). +- Les [constructeurs WebIDL](https://searchfox.org/mozilla-central/source/dom/webidl/) ne peuvent plus être appelés en tant que fonctions. Ils doivent être précédés du mot-clé `new` ([bug Firefox 916644](https://bugzil.la/916644)). - Ajout du support d'une nouvelle valeur (`alpha`) pour le deuxième paramètre, optionnel, de la méthode {{domxref("HTMLCanvasElement.getContext()")}} permettant de définir si le mélange alpha doit être stocké ou non pour ce contexte. Dans le cas contraire, la valeur alpha par pixel dans ce magasin est toujours de `1.0`. Cela permet au back-end de mettre en œuvre une procédure accélérée ([bug Firefox 982480](https://bugzil.la/982480)). - {{domxref("GlobalWorkerScope.consle")}} renvoie maintenant pour le {{domxref("Console")}} normal ; {{domxref("WorkerConsole")}} a été supprimé ([bug Firefox 965860](https://bugzil.la/965860)). - L'extension {{domxref("WebGL_debug_shaders")}} WebGL a été implémentée ([bug Firefox 968374](https://bugzil.la/968374)). diff --git a/files/fr/web/accessibility/aria/roles/banner_role/index.md b/files/fr/web/accessibility/aria/roles/banner_role/index.md index c4d5522191b907..030c94ef46d105 100644 --- a/files/fr/web/accessibility/aria/roles/banner_role/index.md +++ b/files/fr/web/accessibility/aria/roles/banner_role/index.md @@ -7,7 +7,7 @@ slug: Web/Accessibility/ARIA/Roles/banner_role ### Description -Cette technique présente l'utilisation du rôle [`banner` (en)](https://www.w3.org/TR/wai-aria/roles#banner). +Cette technique présente l'utilisation du rôle [`banner` (en)](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/banner.html). La zone d'entête principale d'un site devrait être structurée avec `
`. Cette zone peut contenir le logo du site, sa description, le moteur de recherche. diff --git a/files/fr/web/api/document/domain/index.md b/files/fr/web/api/document/domain/index.md index 8fbf26b23e27fe..1d3dc06e0d3be2 100644 --- a/files/fr/web/api/document/domain/index.md +++ b/files/fr/web/api/document/domain/index.md @@ -38,13 +38,17 @@ Mozilla vous laissera la définir à un superdomaine de la valeur courante, cont Si cette propriété est définie avec succès, la partie "port" de l'origine est également définie à null. -Mozilla fait la distinction entre la propriété d'un `document.domain` qui n'a jamais été modifiée d'une explicitement définie avec le même domaine que l'URL du document, même si la propriété renvoie la même valeur dans les deux cas. Un document est autorisé à accéder à un autre si il ont tous deux défini `document.domain` à la même valeur, indiquant leur intention de coopérer, ou si aucun des deux n'a défini `document.domain` et que les domaines dans les URLs sont les mêmes ([implementation](https://mxr.mozilla.org/mozilla-central/source/caps/nsPrincipal.cpp?rev=ecb7068b07a1&mark=199-215#199)). Sans cette politique spéciale, chaque site serait sujet au Cross-Site-Scripting (XSS) depuis ses sous-domaines (par exemple, pourrait être attaqué par des pièces jointes de bugs sur ). - ## Spécification -- [DOM Level 2 HTML: document.domain](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2250147) (le décrit comme étant en lecture-seule) -- [HTML5: document.domain](https://html.spec.whatwg.org/multipage/browsers.html#relaxing-the-same-origin-restriction) (décrit un comportement similaire à celui de Mozilla) +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} ## Voir aussi -- [Politique de même origine pour JavaScriptHTML](/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript) +- [Politique de même origine](/fr/docs/Web/Security/Same-origin_policy) +- {{domxref("Location.hostname")}} +- {{domxref("Location.host")}} +- {{domxref("Window.origin")}} diff --git a/files/fr/web/api/fetch/index.md b/files/fr/web/api/fetch/index.md index afa0cf262b9f38..2b54ed77c6b1c7 100644 --- a/files/fr/web/api/fetch/index.md +++ b/files/fr/web/api/fetch/index.md @@ -81,7 +81,7 @@ let maRequete = new Request("fleurs.jpg"); fetch(maRequete) .then(function (reponse) { - if (!response.ok) { + if (!reponse.ok) { throw new Error(`erreur HTTP! statut: ${reponse.status}`); } return reponse.blob(); diff --git a/files/fr/web/api/indexeddb_api/using_indexeddb/index.md b/files/fr/web/api/indexeddb_api/using_indexeddb/index.md index dc933a8da9bb25..a3e850075e056f 100644 --- a/files/fr/web/api/indexeddb_api/using_indexeddb/index.md +++ b/files/fr/web/api/indexeddb_api/using_indexeddb/index.md @@ -1342,7 +1342,7 @@ Référence : - [Indexed Database API Specification](http://www.w3.org/TR/IndexedDB/) - [Using IndexedDB in chrome](/fr/docs/IndexedDB/Using_IndexedDB_in_chrome) - [Using JavaScript generators in Firefox](/fr/docs/Web/API/IndexedDB_API/Using_JavaScript_Generators_in_Firefox) -- IndexedDB [interface files](https://mxr.mozilla.org/mozilla-central/find?text=&string=dom%2FindexedDB%2F.*%5C.idl®exp=1) dans le code source de Firefox +- IndexedDB [interface files](https://searchfox.org/mozilla-central/search?q=dom%2FindexedDB%2F.*%5C.idl&path=&case=false®exp=true) dans le code source de Firefox Tutoriels : diff --git a/files/fr/web/api/webrtc_api/session_lifetime/index.md b/files/fr/web/api/webrtc_api/session_lifetime/index.md index 7ce8b0c43a6bfd..049ac26aab9ccb 100644 --- a/files/fr/web/api/webrtc_api/session_lifetime/index.md +++ b/files/fr/web/api/webrtc_api/session_lifetime/index.md @@ -17,12 +17,4 @@ La signalisation est le mécanisme par lequel les pairs envoient des messages de ## Transmission -### getUserMedia - -Objet LocalMediaStream - ## Reception - -Le support WebRTC dans Firefox est caché derrière une préférence. Allez à about:config et positionnez 'media.navigator.enabled' à 'true'. - -> **Note :** Il y a des fichiers de tests dans les sources pour vous donner une idée sur ce qui fonctionne. Voir: [dom/media/tests/local_video_test.html](http://hg.mozilla.org/projects/alder/file/tip/dom/media/tests/local_video_test.html). Essayez aussi la [demo de service d'appel](http://webrtc-demo.herokuapp.com/mozdemo), sa page source, et son [serveur source](https://github.com/anantn/webrtc-demo/). diff --git a/files/fr/web/http/overview/index.md b/files/fr/web/http/overview/index.md index 258a05b5edf766..2c55fe4bdc9d28 100644 --- a/files/fr/web/http/overview/index.md +++ b/files/fr/web/http/overview/index.md @@ -5,13 +5,15 @@ slug: Web/HTTP/Overview {{HTTPSidebar}} -**HTTP** est un {{glossary("protocole")}} qui permet de récupérer des ressources telles que des documents HTML. Il est à la base de tout échange de données sur le Web. C'est un protocole de type client-serveur, ce qui signifie que les requêtes sont initiées par le destinataire (qui est généralement un navigateur web). Un document complet est construit à partir de différents sous-documents qui sont récupérés, par exemple du texte, des descriptions de mise en page, des images, des vidéos, des scripts et bien plus. +**HTTP** est un {{glossary("protocol", "protocole")}} qui permet de récupérer des ressources telles que des documents HTML. Il est à la base de tout échange de données sur le Web. C'est un protocole de type client-serveur, ce qui signifie que les requêtes sont initiées par le destinataire (qui est généralement un navigateur web). Un document complet est construit à partir de différents sous-documents qui sont récupérés, par exemple du texte, des descriptions de mise en page, des images, des vidéos, des scripts et bien plus. -![Un document web se compose de différentes ressources](fetching_a_page.png) +![Un document web se compose de différentes ressources](https://mdn.github.io/shared-assets/images/diagrams/http/overview/fetching-a-page.svg) Les clients et serveurs communiquent par l'échange de messages individuels (en opposition à un flux de données). Les messages envoyés par le client, généralement un navigateur web, sont appelés des _requêtes_ et les messages renvoyés par le serveur sont appelés _réponses_. -![HTTP est un protocole de la couche d'application fonctionnant au-dessus de TCP (pour la couche de transport) et IP (pour la couche réseau). HTTP est en dessous de la couche de présentation.](http-layers.png) Conçu au début des années 1990, HTTP est un protocole extensible qui a évolué au cours du temps. C'est un protocole de [la couche application](https://fr.wikipedia.org/wiki/Couche_application) dont les données transitent via {{glossary("TCP")}} ou à travers une connexion TCP chiffrée avec {{glossary("TLS")}}. En théorie, tout protocole de transport fiable pourrait être utilisé. En raison de son extensibilité, il n'est pas seulement utilisé pour récupérer des documents, mais aussi pour des images, des vidéos ou bien pour renvoyer des contenus vers des serveurs, comme des résultats de formulaires HTML. HTTP peut aussi être utilisé pour récupérer des parties de documents pour mettre à jour à la demande des pages web. +![HTTP est un protocole de la couche d'application fonctionnant au-dessus de TCP (pour la couche de transport) et IP (pour la couche réseau). HTTP est en dessous de la couche de présentation.](https://mdn.github.io/shared-assets/images/diagrams/http/overview/http-layers.svg) + +Conçu au début des années 1990, HTTP est un protocole extensible qui a évolué au cours du temps. C'est un protocole de [la couche application](https://fr.wikipedia.org/wiki/Couche_application) dont les données transitent via {{glossary("TCP")}} ou à travers une connexion TCP chiffrée avec {{glossary("TLS")}}. En théorie, tout protocole de transport fiable pourrait être utilisé. En raison de son extensibilité, il n'est pas seulement utilisé pour récupérer des documents, mais aussi pour des images, des vidéos ou bien pour renvoyer des contenus vers des serveurs, comme des résultats de formulaires HTML. HTTP peut aussi être utilisé pour récupérer des parties de documents pour mettre à jour à la demande des pages web. ## Composants des systèmes basés sur HTTP @@ -19,7 +21,7 @@ HTTP est un protocole client-serveur : les requêtes sont envoyées par une enti Chaque requête individuelle est envoyée au serveur, qui la traite et fournit une _réponse_. Entre cette requête et la réponse se trouve de nombreuses entités qu'on désignera de façon générique sous le terme {{glossary("Proxy", "proxies")}}. Celles-ci exécutent différentes opérations et agissent comme passerelles ou comme {{glossary("Cache", "caches")}} par exemple. -![chaîne client serveur](client-server-chain.png) +![chaîne client serveur](https://mdn.github.io/shared-assets/images/diagrams/http/overview/client-server-chain.svg) En réalité, il y a plus d'un ordinateur entre un navigateur et le serveur qui traite la requête : il y a les routeurs, les modems et bien plus. Grâce à la construction en couche du Web, ces intermédiaires sont cachés dans les couches réseau et transport. HTTP est bâti sur la couche applicative. Bien qu'elles puissent s'avérer importantes lorsqu'il s'agit de diagnostiquer des problèmes réseau, les couches inférieures ne sont pas pertinentes ici pour décrire HTTP. @@ -57,7 +59,7 @@ Même s'il est devenu plus complexe avec l'arrivée d'HTTP/2 et l'encapsulation ### HTTP est extensible -À partir de HTTP/1.0, les [en-têtes HTTP](/fr/docs/HTTP/Headers) permettent d'étendre facilement le protocole et de mener des expérimentations avec celui-ci. De nouvelles fonctionnalités peuvent même être introduites par un simple accord entre le client et le serveur à propos de la sémantique des nouveaux en-têtes. +À partir de HTTP/1.0, les [en-têtes HTTP](/fr/docs/Web/HTTP/Headers) permettent d'étendre facilement le protocole et de mener des expérimentations avec celui-ci. De nouvelles fonctionnalités peuvent même être introduites par un simple accord entre le client et le serveur à propos de la sémantique des nouveaux en-têtes. ### HTTP est sans état, mais pas sans session @@ -82,7 +84,7 @@ Voici une liste de fonctionnalités courantes, qui peuvent être contrôlées gr - _[Cache](/fr/docs/Web/HTTP/Caching)_ La façon dont les documents sont mis en cache peut être contrôlée par HTTP. Le serveur peut indiquer aux proxys et aux clients ce qu'ils doivent mettre en cache et pour combien de temps. Le client peut indiquer aux proxys de cache intermédiaires d'ignorer le document qui est stocké. - _Lever la contrainte d'origine unique_ - Pour éviter l'espionnage et d'autres invasions dans la vie privée, les navigateurs web imposent une séparation stricte entre les sites web. Seules les pages de la **même {{Glossary("origine")}}** peuvent accéder à toutes les informations d'une page web. Bien que cette contrainte soit un fardeau pour le serveur, les en-têtes HTTP peuvent assouplir cette séparation stricte du côté serveur, en permettant à un document de devenir un patchwork d'informations en provenance de différents domaines (il existe même des raisons de sécurité de procéder ainsi). + Pour éviter l'espionnage et d'autres invasions dans la vie privée, les navigateurs web imposent une séparation stricte entre les sites web. Seules les pages de la **même [origine](/fr/docs/Glossary/Origin)** peuvent accéder à toutes les informations d'une page web. Bien que cette contrainte soit un fardeau pour le serveur, les en-têtes HTTP peuvent assouplir cette séparation stricte du côté serveur, en permettant à un document de devenir un patchwork d'informations en provenance de différents domaines (il existe même des raisons de sécurité de procéder ainsi). - _Authentification_ Certaines pages peuvent être protégées de sorte que seuls certains utilisateurs puissent y accéder. Une authentification simple peut être fournie par HTTP, soit en utilisant l'en-tête {{HTTPHeader ("WWW-Authenticate")}} et des en-têtes similaires, soit en définissant une session spécifique grâce à des [cookies HTTP](/fr/docs/Web/HTTP/Cookies). - [Proxys et tunnels](/fr/docs/Web/HTTP/Proxy_servers_and_tunneling) @@ -132,21 +134,21 @@ Il existe deux types de messages HTTP, les requêtes et les réponses, chacun ay Un exemple de requête HTTP : -![Une requête HTTP basique](http_request.png) +![Une requête HTTP GET et ses en-têtes](https://mdn.github.io/shared-assets/images/diagrams/http/overview/http-request.svg) Une requête comprend les éléments suivants : -- Une [méthode](/fr/docs/Web/HTTP/Methods) HTTP : généralement un verbe tel que {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}} ou un nom comme {{HTTPMethod("OPTIONS")}} ou {{HTTPMethod("HEAD")}} qui définit l'opération que le client souhaite effectuer. Par exemple, un client souhaite accéder à une ressource (en utilisant GET) ou téléverser le résultat d'un [formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires) (en utilisant `POST`), bien que d'autres opérations puissent être nécessaires dans d'autres cas. +- Une [méthode](/fr/docs/Web/HTTP/Methods) HTTP : généralement un verbe tel que {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}} ou un nom comme {{HTTPMethod("OPTIONS")}} ou {{HTTPMethod("HEAD")}} qui définit l'opération que le client souhaite effectuer. Par exemple, un client souhaite accéder à une ressource (en utilisant GET) ou téléverser le résultat d'un [formulaire HTML](/fr/docs/Learn/Forms) (en utilisant `POST`), bien que d'autres opérations puissent être nécessaires dans d'autres cas. - Le chemin de la ressource à extraire : l'URL de la ressource à laquelle on a retiré les éléments déductibles du contexte, par exemple le {{glossary ("protocole")}} (http\://), le {{glossary ("domaine")}} (ici .mozilla.org), ou le {{glossary ("port")}} TCP (ici 80). - La version du protocole HTTP. -- Les [en-têtes](/fr/docs/HTTP/Headers) optionnels qui transmettent des informations supplémentaires pour les serveurs. +- Les [en-têtes](/fr/docs/Web/HTTP/Headers) optionnels qui transmettent des informations supplémentaires pour les serveurs. - Ou un corps, pour certaines méthodes comme POST, semblable à ceux dans les réponses, qui contiennent la ressource envoyée. ### Réponses Un exemple de réponse : -![une réponse HTTP](http_response.png) +![Une réponse HTTP « 200 OK » à une requête GET et les en-têtes de réponse.](https://mdn.github.io/shared-assets/images/diagrams/http/overview/http-response.svg) Une réponse comprend les éléments suivants: @@ -166,4 +168,4 @@ Une autre API, [server-sent events](/fr/docs/Web/API/Server-sent_events), est un HTTP est un protocole extensible, facile d'utilisation. La structure client-serveur, combinée avec la possibilité d'ajouter simplement des en-têtes, permet à HTTP de progresser au fur et mesure de l'ajout de nouvelles fonctionnalités sur le Web. -Bien que HTTP/2 ajoute de la complexité, en englobant les messages HTTP dans des trames pour améliorer les performances, la structure de base des messages est restée la même depuis HTTP/1.0. Le flux de session reste simple, ce qui lui permet d'être étudié et débogué avec un simple [moniteur de message HTTP](/fr/docs/Outils/Moniteur_réseau). +Bien que HTTP/2 ajoute de la complexité, en englobant les messages HTTP dans des trames pour améliorer les performances, la structure de base des messages est restée la même depuis HTTP/1.0. Le flux de session reste simple, ce qui lui permet d'être étudié et débogué avec un simple [moniteur de message HTTP](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html). diff --git a/files/fr/web/javascript/reference/global_objects/date/parse/index.md b/files/fr/web/javascript/reference/global_objects/date/parse/index.md index e318afd9cf320c..461c6c16831ead 100644 --- a/files/fr/web/javascript/reference/global_objects/date/parse/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/parse/index.md @@ -52,40 +52,6 @@ Lorsque des indicateurs de fuseau horaire sont utilisés, la valeur renvoyée co Avec une chaîne comme `"March 7, 2014"`, `parse()` supposera un fuseau horaire local, avec une chaîne au format ISO comme `"2014-03-07"`, la méthode supposera un fuseau horaire UTC en ES5 et un fuseau horaire local pour ECMAScript 2015. Ainsi les objets {{jsxref("Date")}} construits avec ces chaînes représenteront des instants différents, sauf si le fuseau horaire local du système utilisé correspond à UTC. Cela signifie que deux dates représentées de façon textuelles semblables peuvent donner des dates différentes (ce comportement doit être corrigé avec ECMAScript 6 afin que les deux dates soient traitées de façon locale). -### Traitement laissé libre à l'implémentation - -Le standard ECMAScript dicte que si la chaîne utilisée n'est pas conforme au format standard, alors la fonction peut utiliser une heuristique et/ou un algorithme d'analyse de texte propre à l'implémentation. Les chaînes impossibles à décoder et/ou qui contiennent des éléments non-conformes aux formats ISO doivent renvoyer {{jsxref("NaN")}} lors de l'appel à `Date.parse()`. - -Cependant, les valeurs invalides qui ne sont pas reconnues dans un format ISO pris en charge par ECMA-262 peuvent ou non engendrer la valeur {{jsxref("NaN")}} selon le navigateur et les valeurs utilisées. Par exemple : - -```js -// Chaîne non ISO avec des valeurs invalides -new Date("23/25/2014"); -``` - -sera traitée comme la date locale du 25 novembre 2015 avec Firefox 30 et comme invalide avec Safari 7. Cependant, si la chaîne est reconnue dans un format ISO mais contient des valeurs invalides, la méthode renverra {{jsxref("NaN")}} pour tous les navigateurs conformes à ES5 (ou aux versions ultérieures) : - -```js -// Chaîne ISO avec des valeurs invalides new -Date("2014-25-23").toISOString(); -// renvoie "RangeError: invalid date" pour les navigateurs ES5 -``` - -L'implémentation spécifique de SpiderMonkey peut être trouvée dans le fichier [`jsdate.cpp`](https://dxr.mozilla.org/mozilla-central/source/js/src/jsdate.cpp?rev=64553c483cd1#889). La chaîne `"10 06 2014"` est un exemple de chaîne non ISO, utiliser parse() sur cette chaîne entraînera le moteur JavaScript à utiliser son implémentation de recours. Voir ce [bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1023155#c6) pour une explication rapide de la façon dont est faite l'analyse de la chaîne. - -```js -new Date("10 06 2014"); -``` - -sera traitée comme la date locale du 6 octobre 2014 et non comme le 10 juin 2014. D'autres exemples : - -```js -new Date("toto-truc 2014").toString(); -// renvoie : "Invalid Date" -Date.parse("toto-truc 2014"); -// renvoie : NaN -``` - ## Exemples ### Utiliser `Date.parse()` diff --git a/files/fr/web/javascript/reference/global_objects/map/set/index.md b/files/fr/web/javascript/reference/global_objects/map/set/index.md index 87a39c72fd682d..d9f93e8118b7d6 100644 --- a/files/fr/web/javascript/reference/global_objects/map/set/index.md +++ b/files/fr/web/javascript/reference/global_objects/map/set/index.md @@ -1,11 +1,13 @@ --- title: Map.prototype.set() slug: Web/JavaScript/Reference/Global_Objects/Map/set +l10n: + sourceCommit: 3cfd663738e9963157d90f359789d675a6662ec2 --- {{JSRef}} -La méthode **`set()`** ajoute un nouvel élément avec une `clé` et une `valeur` données à un objet `Map`. +La méthode **`set()`** ajoute ou met à jour un élément avec une `clé` et une `valeur` données à un objet `Map`. {{EmbedInteractiveExample("pages/js/map-prototype-set.html")}} @@ -31,7 +33,7 @@ L'objet `Map` courant (auquel l'élément a été ajouté). ### Utiliser la méthode `set()` ```js -var maMap = new Map(); +const maMap = new Map(); // On ajoute de nouveaux éléments à l'objet map maMap.set("truc", "toto"); diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 53e260f4d6a881..11a82340a9e1bf 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -1338,15 +1338,18 @@ /ja/docs/Glossary/First_interactive /ja/docs/Glossary/First_CPU_idle /ja/docs/Glossary/Global_attribute /ja/docs/Web/HTML/Global_attributes /ja/docs/Glossary/Grid_Rows /ja/docs/Glossary/Grid_Row +/ja/docs/Glossary/Guard /ja/docs/Web/API/Fetch_API/Using_Fetch /ja/docs/Glossary/Header /ja/docs/Glossary/HTTP_header /ja/docs/Glossary/I18N /ja/docs/Glossary/Internationalization /ja/docs/Glossary/Index /ja/docs/Glossary /ja/docs/Glossary/Internationalization_and_localization /ja/docs/Glossary/Internationalization /ja/docs/Glossary/POP3 /ja/docs/Glossary/POP /ja/docs/Glossary/Reference /ja/docs/Glossary/Object_reference +/ja/docs/Glossary/Rendering_engine /ja/docs/Glossary/Engine/Rendering /ja/docs/Glossary/Round_Trip_Time_(RTT) /ja/docs/Glossary/Round_Trip_Time /ja/docs/Glossary/SSL_Glossary /ja/docs/Glossary/SSL /ja/docs/Glossary/Scrollport /ja/docs/Glossary/Scroll_container +/ja/docs/Glossary/Second-level_Domain /ja/docs/Glossary/SLD /ja/docs/Glossary/Signature/セキュリティ /ja/docs/Glossary/Signature/Security /ja/docs/Glossary/Signature/関数 /ja/docs/Glossary/Signature/Function /ja/docs/Glossary/Simple_header /ja/docs/Glossary/CORS-safelisted_request_header @@ -2745,6 +2748,7 @@ /ja/docs/Web/API/Element/pointerlockerror_event /ja/docs/Web/API/Document/pointerlockerror_event /ja/docs/Web/API/Element/select_event /ja/docs/Web/API/HTMLInputElement/select_event /ja/docs/Web/API/Element/show_event /ja/docs/orphaned/Web/API/Element/show_event +/ja/docs/Web/API/Event/Comparison_of_Event_Targets /ja/docs/Learn/JavaScript/Building_blocks/Event_bubbling /ja/docs/Web/API/Event/button /ja/docs/Web/API/MouseEvent/button /ja/docs/Web/API/Event/createEvent /ja/docs/Web/API/Document/createEvent /ja/docs/Web/API/EventHandler /ja/docs/Web/Events/Event_handlers @@ -2757,6 +2761,8 @@ /ja/docs/Web/API/EventTarget.removeEventListener /ja/docs/Web/API/EventTarget/removeEventListener /ja/docs/Web/API/EventTarget/attachEvent /ja/docs/Web/API/EventTarget/addEventListener /ja/docs/Web/API/FetchEvent_clone /ja/docs/Web/API/FetchEvent +/ja/docs/Web/API/Fetch_API/Basic_concepts /ja/docs/Web/API/Fetch_API/Using_Fetch +/ja/docs/Web/API/Fetch_API/Cross-global_fetch_usage /ja/docs/Web/API/Fetch_API/Using_Fetch /ja/docs/Web/API/File.name /ja/docs/Web/API/File/name /ja/docs/Web/API/File.size /ja/docs/Web/API/Blob/size /ja/docs/Web/API/File.type /ja/docs/Web/API/Blob/type @@ -3490,7 +3496,7 @@ /ja/docs/Web/API/window.unescape /ja/docs/Web/JavaScript/Reference/Global_Objects/unescape /ja/docs/Web/API/window.updateCommands /ja/docs/Web/API/Window/updateCommands /ja/docs/Web/API/window.window /ja/docs/Web/API/Window/window -/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role /ja/docs/conflicting/Web/Accessibility/ARIA/Roles/alert_role +/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role /ja/docs/Web/Accessibility/ARIA/Roles/alert_role /ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role /ja/docs/Web/Accessibility/ARIA/Roles/alertdialog_role /ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute /ja/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant /ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role /ja/docs/Web/Accessibility/ARIA/Roles/button_role @@ -3726,6 +3732,7 @@ /ja/docs/Web/CSS/border-top-left-radius_|_-moz-border-radius-topleft /ja/docs/Web/CSS/border-top-left-radius /ja/docs/Web/CSS/box_model /ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model /ja/docs/Web/CSS/calc() /ja/docs/Web/CSS/calc +/ja/docs/Web/CSS/calc-constant /ja/docs/Web/CSS/calc-keyword /ja/docs/Web/CSS/clamp() /ja/docs/Web/CSS/clamp /ja/docs/Web/CSS/color-adjust /ja/docs/conflicting/Web/CSS/print-color-adjust /ja/docs/Web/CSS/color_value/hexadecimal_rgb /ja/docs/orphaned/Web/CSS/color_value/hexadecimal_rgb diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index db568772e482bf..cf5420d252399c 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -702,6 +702,10 @@ "modified": "2019-03-23T22:38:34.635Z", "contributors": ["mfuji09", "kubota-aoi"] }, + "Glossary/Engine/Rendering": { + "modified": "2020-09-28T13:40:38.634Z", + "contributors": ["mfuji09", "Uemmra3"] + }, "Glossary/Entity": { "modified": "2020-08-26T12:57:35.570Z", "contributors": ["mfuji09", "Uemmra3", "dskmori", "asuktakahashi"] @@ -898,10 +902,6 @@ "modified": "2020-03-26T14:31:20.417Z", "contributors": ["mfuji09", "dynamis"] }, - "Glossary/Guard": { - "modified": "2020-01-10T08:49:48.628Z", - "contributors": ["Wind1808"] - }, "Glossary/Gutters": { "modified": "2019-03-18T20:48:45.475Z", "contributors": ["shuuji3", "applejam9029", "mfuji09", "dynamis"] @@ -1593,10 +1593,6 @@ "modified": "2020-05-04T13:19:46.805Z", "contributors": ["Uemmra3", "segayuu"] }, - "Glossary/Rendering_engine": { - "modified": "2020-09-28T13:40:38.634Z", - "contributors": ["mfuji09", "Uemmra3"] - }, "Glossary/Repo": { "modified": "2019-03-18T21:21:56.601Z", "contributors": ["Uemmra3", "takaneichinose"] @@ -8438,21 +8434,6 @@ "chikoski" ] }, - "Web/API/Fetch_API/Basic_concepts": { - "modified": "2020-10-01T22:06:38.159Z", - "contributors": [ - "mpcjazz", - "Uemmra3", - "dskmori", - "hamasaki", - "chikoski", - "YuichiNukiyama" - ] - }, - "Web/API/Fetch_API/Cross-global_fetch_usage": { - "modified": "2020-01-07T17:57:37.167Z", - "contributors": ["Wind1808"] - }, "Web/API/Fetch_API/Using_Fetch": { "modified": "2020-10-15T21:47:32.462Z", "contributors": [ @@ -15528,10 +15509,6 @@ "modified": "2020-11-22T08:36:33.464Z", "contributors": ["mixplace", "8845musign"] }, - "Web/CSS/-webkit-overflow-scrolling": { - "modified": "2020-10-15T22:08:24.081Z", - "contributors": ["mfuji09"] - }, "Web/CSS/-webkit-tap-highlight-color": { "modified": "2019-04-25T10:41:36.517Z", "contributors": ["mfuji09"] @@ -18649,10 +18626,6 @@ "modified": "2020-10-16T11:19:53.557Z", "contributors": ["mfuji09"] }, - "Web/CSS/initial-letter-align": { - "modified": "2020-10-15T22:13:14.565Z", - "contributors": ["mfuji09"] - }, "Web/CSS/initial_value": { "modified": "2019-03-23T23:52:49.170Z", "contributors": ["SphinxKnight", "mfuji09", "ethertank", "teoli", "Marsf"] @@ -30351,10 +30324,6 @@ "modified": "2019-03-23T23:28:42.286Z", "contributors": ["yyss", "teoli"] }, - "conflicting/Web/Accessibility/ARIA/Roles/alert_role": { - "modified": "2019-03-18T21:24:32.583Z", - "contributors": ["8845musign"] - }, "conflicting/Web/Accessibility/ARIA_184f054b1090ff5cd518146ac4e09122": { "modified": "2019-03-23T23:28:50.521Z", "contributors": ["yyss", "teoli"] diff --git a/files/ja/conflicting/web/accessibility/aria/roles/alert_role/index.md b/files/ja/conflicting/web/accessibility/aria/roles/alert_role/index.md deleted file mode 100644 index 18c5cb93f91982..00000000000000 --- a/files/ja/conflicting/web/accessibility/aria/roles/alert_role/index.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: alert ロールの使用 -slug: conflicting/Web/Accessibility/ARIA/Roles/alert_role -original_slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role ---- - -### 説明 - -[alert](https://www.w3.org/TR/wai-aria-1.1/#alert) ロールの使用方法についての技術デモとブラウザーおよび支援技術に及ぼす影響の説明。 - -alert ロールは重要かつ一般に時間的制約のあるメッセージをユーザーへ伝えるために使用されます。このロールが要素へ追加されたとき、ブラウザーはアクセシブルなアラートイベントをユーザーに向けて通知可能な支援技術製品へ送信します。 アラートロールはユーザーの注意を即座に必要とする場合において最も便利です、例えば: - -- 不正な値がフォームフィールドに入れられたとき -- ユーザーのログインセッションが切れようとしているとき -- サーバーとの接続が切れ、ローカルの変更が保存されないとき - -その押し付けがましい性質から、アラートロールはユーザーの注意を直ちに引く必要があるときにだけかつ控えめに使用されるべきです。 緊急度の低い動的な変更は、aria-live="polite" や他のライブリージョンロールなどのあまり積極的ではない方法を使うべきです。 - -### ユーザーエージェントと支援技術への影響 - -アラートロールが要素へ追加されたとき、もしくはそのような要素が可視になったときにユーザーエージェントは以下のことを実行する必要があります: - -- オペレーティングシステムのアクセシビリティ API にアラートロールを持った要素を公開します。 -- もしサポートしていればオペレーティングシステムのアクセシビリティ API を使ったアクセシブルなアラートイベントを発火する。 - -支援技術製品はそのようなイベントを監視し、それに応じてユーザーへ通知すべきです: - -- スクリーンリーダーは現在のアウトプット（音声または点字関係なく）を妨害し、直ちにアラートメッセージをアナウンスもしくは表示すことがあります。 -- 画面拡大鏡はアラートが起こったこと、およびアラートテキストが何であるかを視覚的に示すことがあります。 - -> **メモ:** 支援技術がこの技術をどのように処理すべきかについては意見が異なる場合があります。上記の情報は意見の一つで、したがって標準ではありません。 - -### 例 - -#### 例 1: HTML コードへのロールの追加 - -下のスニペットは html ソースコードへどうのようにアラートロールが直接追加されるかを示しています。要素が読み込み完了した瞬間にスクリーンリーダーはアラートの通知をするはずです。ページが読み込み終わったとき、もし要素がすでにオリジナルのソースコードにあったら、スクリーンリーダーはページタイトルをアナウンスした後にすぐにエラーを知らせるでしょう。 - -```html -

Your form could not be submitted because of 3 validation errors.

-``` - -#### 例 2: 動的にアラートロールをもつ要素を追加 - -このスニペットはアラートロールを持つ要素を動的に生成し、ドキュメント構造へ追加します。 - -```js -var myAlert = document.createElement("p"); -myAlert.setAttribute("role", "alert"); -var myAlertText = document.createTextNode("You must agree with our terms of service to create an account."); -myAlert.appendChild(myAlertText); -document.body.appendChild(myAlert); -``` - -**注:** jQuery のようなスクリプトライブラリを使ったときはより少ないコードで同じ結果を実現することができます: - -```js -$("

You must agree with our terms of service to create an account.

").appendTo(document.body); -``` - -#### 例 3: 存在する要素へのアラートロールの追加 - -時々新しい要素を作るよりもすでにページに見えている要素にアラートロールを追加するほうが便利なことがあります。これにより開発者はユーザーへより関連度や緊急性の高い情報を繰り返し表示することができます。例えば、フォームコントロールは期待値についての指示を持っているかもしれません。違う値が入力されたら、スクリーンリーダーがそれを警告としてアナウンスするために `role="alert` を指示文へ追加される場合があります。以下の疑似スニペットコードはこのアプローチを示しています: - -```html -

You must select at least 3 options

-``` - -```js -// When the user tries to submit the form with less than 3 checkboxes selected: -document.getElementById("formInstruction").setAttribute("role", "alert"); -``` - -#### 例 4: アラートロールをもつ要素を表示する - -要素が既に `role="alert"` を持ち、CSS を使用して最初に非表示になっている場合、それを表示することはページにちょうど追加されたかのようにアラートをが発せられます。存在するアラートを何回も "再利用" できるということを意味しています。 - -**注:** ほとんどのケースではこのアプローチは推奨されません、なぜなら現在適応できないエラーやアラート文を隠すことは理想的ではないからです。古い支援技術のユーザーは現在アラートが適応されてないときにもかかわらずアラート文を認識して、ユーザーへ問題があると間違って信じこませてしまうかもしれません。 - -```css -.hidden { - display:none; -} -``` - -```html - -``` - -```js -// removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert: -document.getElementById("expirationWarning").className = ""; -``` - -### 注記 - -- 要素でのアラートロールの使用は要素が `aria-live="assertive"` を持っていることを意味します。 -- アラートロールは静的な文章のためにのみ使用されるべきです。アラートロールが使用された要素はフォーカスを受け取ることができず、スクリーンリーダーはキーボードフォーカスが現在位置している場所にかかわらずに自動的にアラートをアナウンスするかもしれません。 -- もしアラートが双方向のコントロール (ユーザーが問題を修正できるフォームコントロールや、アラートを破棄する "OK" ボタンなど) を提供する場合、[アラートダイアログ](/ja/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role)ロールを代わりに使用するべきです。 - -### 使用される ARIA 属性 - -- [alert](https://www.w3.org/TR/wai-aria-1.1/#alert) - -### 関連 ARIA 技術 - -- [Using the alertdialog role](/ja/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role) -- [Using the aria-invalid property](/ja/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_property) - -### 互換性 - -TBD: Add support information for common UA and AT product combinations - -### その他のリソース - -- ARIA Best Practices - Alert Role: diff --git a/files/ja/games/introduction/index.md b/files/ja/games/introduction/index.md index 778ac4044b6aaf..9244a399a01aa8 100644 --- a/files/ja/games/introduction/index.md +++ b/files/ja/games/introduction/index.md @@ -88,7 +88,7 @@ l10n: 3. 大事な事も管理できます: 支払いの事です。ゲームが他人のエコシステム内にあるだけで、収益の 30% 以上を渡す必要はありません。その代わりに、希望する金額で、気に入った支払い処理サービスを使用できます。 4. もっと管理について、希望するいかなる時にでも、ゲームを更新できます。他の会社の誰だかわからない人が、あなたの重大なバグ修正のリリースが今日になるか明日になるか決めるのを、ハラハラしながら承認待ちする必要はありません。 5. アナリティクスを管理しましょう! あなたがどのアナリティクスを必要とするかについて他人が決めるのに頼るのでなく、自分自身 (や最も気に入ったサードパーティを選んで) で、売上やゲームのリーチを集めることができます。 -6. 顧客との関係 (CR) をより密接に、自分の方法で管理するようになります。アプリストアの限定された仕組みでフィルターリングされた顧客フィードバックはもうたくさんです。望む方法で、中間業者なしに、顧客を引きつけてください。 +6. 顧客との関係 (CR) をより密接に、自分の方法で管理するようになります。アプリストアの限定された仕組みでフィルタリングされた顧客フィードバックはもうたくさんです。望む方法で、中間業者なしに、顧客を引きつけてください。 7. プレイヤーはゲームをいつでも、どこでもプレイできます。ウェブはユビキタスであるため、顧客は電話や、タブレットや、家のノート PC や、職場のデスクトップや、その他何によっても、ゲームの状況をチェック可能です。 ## ゲーム開発者用のウェブテクノロジー diff --git a/files/ja/games/techniques/3d_on_the_web/basic_theory/index.md b/files/ja/games/techniques/3d_on_the_web/basic_theory/index.md index 492091ac2ad051..f4badeec0c907e 100644 --- a/files/ja/games/techniques/3d_on_the_web/basic_theory/index.md +++ b/files/ja/games/techniques/3d_on_the_web/basic_theory/index.md @@ -76,9 +76,9 @@ WebGL は右手系座標系を利用します。上記の図のように `x` 軸 ### テクスチャ -テクスチャは 3D 空間上でより見た目がよく、よりリアルなオブジェクトを作成するために使われる 2D 画像です。テクスチャは texels と呼ばれる単一テクスチャ要素から組み合わされており、texels は写真の要素と同様のピクセルの組み合わせです。レンダリングパイプラインの断片処理の段階でテクスチャをオブジェクトに追加することで必要によってオブジェクトを覆うよう調整したり、フィルターリングをすることができます。 +テクスチャは 3D 空間上でより見た目がよく、よりリアルなオブジェクトを作成するために使われる 2D 画像です。テクスチャは texels と呼ばれる単一テクスチャ要素から組み合わされており、texels は写真の要素と同様のピクセルの組み合わせです。レンダリングパイプラインの断片処理の段階でテクスチャをオブジェクトに追加することで必要によってオブジェクトを覆うよう調整したり、フィルタリングをすることができます。 -テクスチャは 3D オブジェクトの間で繰り返し 2D 画像を覆うことができます。テクスチャのフィルターリングは元の解像度またはテクスチャの画像が表示される断片と異なる場合に適用されます - これは結果的に縮小または拡大となります。 +テクスチャは 3D オブジェクトの間で繰り返し 2D 画像を覆うことができます。テクスチャのフィルタリングは元の解像度またはテクスチャの画像が表示される断片と異なる場合に適用されます - これは結果的に縮小または拡大となります。 ### 照明 diff --git a/files/ja/games/techniques/control_mechanisms/index.md b/files/ja/games/techniques/control_mechanisms/index.md index da5b88a8472d2b..876bc6f1fa5715 100644 --- a/files/ja/games/techniques/control_mechanisms/index.md +++ b/files/ja/games/techniques/control_mechanisms/index.md @@ -37,7 +37,7 @@ create() { } ``` -ゲーム開始時に一度だけ作成され、クリックされるとそれに割り当てられた `this.clickEnclave()` アクションを実行しますが、 `update()` 関数でマウスのポインタの値を使用してアクションを作成することもできます。 +ゲーム開始時に一度だけ作成され、クリックされるとそれに割り当てられた `this.clickEnclave()` アクションを実行しますが、 `update()` 関数でマウスのポインターの値を使用してアクションを作成することもできます。 ```js update() { diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md index 3fbd4217d250f3..29a1700bc47620 100644 --- a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md +++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md @@ -32,7 +32,7 @@ function mouseMoveHandler(e) { } ``` -この値は、ビューポート内のマウスの水平位置 (`e.clientX`) からキャンバスの左端とビューポートの左端間の距離 (`canvas.offsetLeft`) を引いたもので、実質的にこれはキャンバス左端からマウスポインターまでの距離と等しくなっています。ポインタの相対 X 位置が 0 より大きく、キャンバスの幅よりも小さい場合、ポインタはキャンバスの境界内にあり、`paddleX` 位置（パドルの左端に固定）は `relativeX` 値からパドルの幅の半分を引いた値に設定され、実際の移動はパドルの中央に対して相対的に行われることになります。 +この値は、ビューポート内のマウスの水平位置 (`e.clientX`) からキャンバスの左端とビューポートの左端間の距離 (`canvas.offsetLeft`) を引いたもので、実質的にこれはキャンバス左端からマウスポインターまでの距離と等しくなっています。ポインターの相対 X 位置が 0 より大きく、キャンバスの幅よりも小さい場合、ポインターはキャンバスの境界内にあり、`paddleX` 位置（パドルの左端に固定）は `relativeX` 値からパドルの幅の半分を引いた値に設定され、実際の移動はパドルの中央に対して相対的に行われることになります。 パドルはマウスカーソルの位置を追うようになりますが、動きをキャンバスの大きさに制限しているため、両端で消え失せてしまうようなことはありません。 diff --git a/files/ja/glossary/apple_safari/index.md b/files/ja/glossary/apple_safari/index.md index 3a38073f5269fd..82caca848ebe19 100644 --- a/files/ja/glossary/apple_safari/index.md +++ b/files/ja/glossary/apple_safari/index.md @@ -5,17 +5,17 @@ slug: Glossary/Apple_Safari {{GlossarySidebar}} -[Safari](http://www.apple.com/safari/) は{{Glossary("Browser","ウェブブラウザー")}}であり、Apple が開発し、 macOS と iOS の両方に組み込まれています。これは、オープンソースの [WebKit](https://webkit.org/) エンジンに基づいています。 +[**Safari**](https://www.apple.com/jp/safari/) は Apple によって開発された{{Glossary("Browser","ウェブブラウザー")}}で、macOS（Mac コンピューター用）、iPadOS（iPad タブレット用）、iOS（iPhone 用）、visionOS（Apple Vision Pro などの拡張現実デバイス用）を含む Apple のオペレーティングシステムに組み込まれています。 -## 詳細情報 +Safari は、[KHTML](https://ja.wikipedia.org/wiki/KHTML) から派生したオープンソースの {{glossary("WebKit")}} レンダリングエンジンを使用しています。 -### 基礎知識 - -- ウィキペディア上の記事「[Safari](https://ja.wikipedia.org/wiki/Safari)」 -- [apple.com の Safari](https://www.apple.com/safari/) - -### 技術情報 +## 関連情報 +- [Safari](https://ja.wikipedia.org/wiki/Safari) (Wikipedia) +- [Safari](https://www.apple.com/jp/safari/) (apple.com) - [The WebKit project](https://webkit.org/) -- [WebKit nightly build](https://nightly.webkit.org/) +- [WebKit Build Archives](https://webkit.org/build-archives/) - [Reporting a bug for Safari](https://bugs.webkit.org/) +- 用語集 + - {{glossary("Browser", "ブラウザー")}} + - {{glossary("WebKit")}} diff --git a/files/ja/glossary/base64/index.md b/files/ja/glossary/base64/index.md index feab77654f76bd..078f0e04638d20 100644 --- a/files/ja/glossary/base64/index.md +++ b/files/ja/glossary/base64/index.md @@ -2,331 +2,100 @@ title: Base64 slug: Glossary/Base64 l10n: - sourceCommit: 04e75ce1f83a591a576f52b143f195133bfcbe96 + sourceCommit: 3b8be0ad781b128b70ef0d208de84932755eb4d0 --- {{GlossarySidebar}} -**Base64** とは、[バイナリーからテキストへの符号化](https://en.wikipedia.org/wiki/Binary-to-text_encoding)を行う手法のグループであり、バイナリーデータを 64 を基数とする表現に変換することで、 ASCII 文字列で表すことができます。_Base64_ という呼び方は、 [MIME の Content-Transfer-Encoding](https://ja.wikipedia.org/wiki/MIME#Content-Transfer-Encoding) における特定の符号化方式の名前に由来します。 +**Base64** とは、[バイナリーからテキストへの符号化](https://en.wikipedia.org/wiki/Binary-to-text_encoding)を行う手法のグループであり、バイナリーデータを 64 を基数とする表現に変換することで、{{glossary("ASCII")}} 文字列で表すことができます。_Base64_ という用語は、 [MIME の Content-Transfer-Encoding](https://ja.wikipedia.org/wiki/MIME#Content-Transfer-Encoding) における特定の符号化方式の名前に由来します。 -Base64 符号化方式がよく使われるのは、テキストデータを扱うよう設計されたメディア上で、バイナリーデータを格納または転送する必要がある場合です。Base64 符号化により、転送中に変換されることなく、バイナリーデータがそのままであることを保証できます。Base64 は、[MIME](https://ja.wikipedia.org/wiki/MIME) による電子メールや [XML](/ja/docs/Web/XML) における複合型データの格納など、多くのアプリケーションで幅広く使われています。 +"Base64" という用語が自分自身で具体的な{{glossary("algorithm", "アルゴリズム")}}を参照するために使用される場合、それは一般的に [RFC 4648](https://datatracker.ietf.org/doc/html/rfc4648) の第 4 章で概説された Base64 のバージョンを参照します。これは、64 進数を表すための以下のアルファベットと、同時にパディング文字として `=` を使用します。 -ウェブにおける Base64 符号化のよくある用途の一つが、バイナリーデータを符号化することで [data: URL](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) に入れられるようにすることです。 - -JavaScript には、Base64 文字列のエンコードとデコードのそれぞれに対応した、次の 2 つの関数があります。 +```plain +ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/ +``` -- [`btoa()`](/ja/docs/Web/API/btoa): バイナリーデータの「文字列」から Base64 で符号化された ASCII 文字列を生成します ("btoa" は "binary to ASCII" と読んでください)。 -- [`atob()`](/ja/docs/Web/API/atob): Base64 で符号化された文字列をデコードします ("atob" は "ASCII to binary" と読んでください)。 +よくある変化形は "Base64 URL safe" で、{{glossary("URL")}} のパス部分やクエリー引数で問題が発生する可能性のある文字を避けるために、パディングを除外して `+/` を `-_` に置き換えます。パス部分またはクエリー引数にデータを格納しない場合は、このエンコード方式は必要ありません。例えば、[データ URL](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) にはどちらもないので、標準の Base64 エンコードを使用することができます。 -`atob()` と `btoa()` のアルゴリズムは、 [RFC 4648](https://datatracker.ietf.org/doc/html/rfc4648) section 4 で定義されています。 +Base64 エンコード方式は、ASCII テキスト（または任意のバイナリーデータを受け入れるにはまだ不十分な ASCII のスーパーセット）しか扱えないメディア上で保存や送信を行う際に、バイナリーデータをエンコードするために一般的に使用されます。これにより、転送中にデータが変更されることなく、そのままの状態を確実に保持します。Base64 の一般的な用途としては、以下のものがあります。 -なお、 `btoa()` はバイナリーデータを受け取ることを期待しているため、与えられた文字列に UTF-16 表現の 2 バイト以上を占める文字が含まれていると例外が発生します。詳しくは、 [`btoa()`](/ja/docs/Web/API/btoa) のドキュメントを参照してください。 +- [MIME](https://ja.wikipedia.org/wiki/MIME) による電子メールの場合 +- [XML](/ja/docs/Web/XML) に複雑なデータを格納する場合 +- バイナリーデータをエンコードして [`data:` URL](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) に含めることができるようにする場合 -#### 符号化によるサイズの増加 +## 符号化によるサイズの増加 Base64 の 1 文字はデータのちょうど 6 ビット分を表します。そのため、入力される文字列やバイナリーファイルに含まれる 3 バイト（3×8 ビット = 24 ビット）は、4 桁の Base64 で表されます（4×6 = 24 ビット）。 -このことにより、Base64 で表された文字列またはファイルは、元のサイズの 133% の大きさになると言えます（33% の増加）。エンコードされるデータが小さい場合は、さらに増加幅が大きくなります。例えば、`length === 1` である文字列 `"a"` は、エンコードされて `length === 4` の文字列 `"YQ=="` になり、これは 300% の増加です。 - -## 「Unicode 問題」 - -JavaScript の文字列は 16 ビットでエンコードされているので、ほとんどのブラウザーでは、 Unicode 文字列に対して `window.btoa` を呼び出すと、文字が 8 ビット ASCII エンコード文字の範囲を超えた場合に `Character Out Of Range` という例外が発生します。この問題を解決するために、 2 つの使用可能な方法があります。 - -- 最初の方法は、文字列全体をエスケープしてからエンコードする方法です。 -- もう 1 つは、 UTF-16 文字列を UTF-8 文字の配列に変換してからエンコードする方法です。 +つまり、文字列やファイルを Base64 にすると、通常、その文字列のソースよりもおよそ 3 分の 1 大きくなります（正確なサイズの増加は、文字列の絶対長、その長さのモジュロ 3、パディング文字を使用しているかどうかなど、さまざまな要因に依存します）。 -以下に、使用可能な2つの方法を示します。 +## JavaScript の対応 -### 解決策その 1 - 文字列をエンコードする前にエスケープする +ブラウザーは、Base64 文字列をデコードしたりエンコードしたりするための 2 つの JavaScript の関数をネイティブで提供しています。 -```js -function utf8_to_b64(str) { - return window.btoa(unescape(encodeURIComponent(str))); -} +- {{domxref("Window.btoa()")}}（{{domxref("WorkerGlobalScope.btoa()", "ワーカーでも利用可能", "", "nocode")}}）: バイナリーデータの文字列から Base64 エンコード方式の ASCII 文字列を作成します（"btoa" は "binary to ASCII" と読んでください）。 +- {{domxref("Window.atob()")}}（{{domxref("WorkerGlobalScope.atob()", "ワーカーでも利用可能", "", "nocode")}}）: Base64 エンコード方式の文字列をデコードします（"atob" は "ASCII to binary" と読んでください）。 -function b64_to_utf8(str) { - return decodeURIComponent(escape(window.atob(str))); -} +> **メモ:** Base64 はテキストエンコードではなくバイナリーエンコード方式ですが、`btoa` と `atob` はウェブプラットフォームがバイナリーデータ型に対応する前に追加されました。その結果、2 つの関数は文字列を使用してバイナリーデータを表しており、各文字の{{glossary("code point", "コードポイント")}}が各バイトの値を表します。このため、`btoa` は任意のテキストデータをエンコードするために使用することができます。例えば、テキストや HTML 文書の Base64 `data:` URL を作成する場合などです。 +> +> しかし、バイトとコードポイントの対応が確実に成り立つのは `0x7f` までのコードポイントだけです。さらに、`0xff` を超えるコードポイントは、1 バイトの最大値を超えるために `btoa` でエラーが発生します。次の節では、任意の Unicode テキストをエンコードするときに、この制限を回避するためにどのように作業するかについて詳しく説明します。 -// Usage: -utf8_to_b64("✓ à la mode"); // "4pyTIMOgIGxhIG1vZGU=" -b64_to_utf8("4pyTIMOgIGxhIG1vZGU="); // "✓ à la mode" -``` +## 「Unicode 問題」 -この解決策は [Johan Sundström](https://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html) によって提案されたものです。 +`btoa` は入力文字列のコードポイントをバイト値として解釈するため、文字列に対して `btoa` を呼び出すと、文字のコードポイントが `0xff` を超えた場合に "Character Out Of Range" 例外が発生します。任意の Unicode テキストをエンコードする必要がある使用する用途では、まず文字列を {{glossary("UTF-8")}} で構成されるバイト列に変換し、それからバイト列をエンコードする必要があります。 -もう一つの使用可能な解決策は、今では非推奨となっている 'unescape' と 'escape' 関数を使用しないものです。 -しかし、この方法では、入力文字列の base64 エンコーディングは行われません。 -`utf8_to_b64` と `b64EncodeUnicode` の出力の違いに注意してください。 -この代替手段を採用すると、他のアプリケーションとの相互運用性の問題が発生する可能性があります。 +最も単純な解決策は、 `TextEncoder` と `TextDecoder` を使用して文字列の UTF-8 と単一のバイト表現を変換することです。 ```js -function b64EncodeUnicode(str) { - return btoa(encodeURIComponent(str)); +function base64ToBytes(base64) { + const binString = atob(base64); + return Uint8Array.from(binString, (m) => m.codePointAt(0)); } -function UnicodeDecodeB64(str) { - return decodeURIComponent(atob(str)); +function bytesToBase64(bytes) { + const binString = Array.from(bytes, (byte) => + String.fromCodePoint(byte), + ).join(""); + return btoa(binString); } -b64EncodeUnicode("✓ à la mode"); // "JUUyJTlDJTkzJTIwJUMzJUEwJTIwbGElMjBtb2Rl" -UnicodeDecodeB64("JUUyJTlDJTkzJTIwJUMzJUEwJTIwbGElMjBtb2Rl"); // "✓ à la mode" +// 使用方法 +bytesToBase64(new TextEncoder().encode("a Ā 𐀀 文 🦄")); // "YSDEgCDwkICAIOaWhyDwn6aE" +new TextDecoder().decode(base64ToBytes("YSDEgCDwkICAIOaWhyDwn6aE")); // "a Ā 𐀀 文 🦄" ``` -### 解決策その 2 - `atob()` と `btoa()` を `TypedArray` と UTF-8 を使用して書き直す - -> **メモ:** 以下のコードは、 [ArrayBuffer](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) を Base64 文字列から取得する場合、またはその逆の場合にも有用です（[下記参照](#付録_base64_文字列を_uint8array_または_arraybuffer_へデコード)）。 +## 任意のバイナリーデータの変換 -```js -"use strict"; -// Array of bytes to Base64 string decoding -function b64ToUint6(nChr) { - return nChr > 64 && nChr < 91 - ? nChr - 65 - : nChr > 96 && nChr < 123 - ? nChr - 71 - : nChr > 47 && nChr < 58 - ? nChr + 4 - : nChr === 43 - ? 62 - : nChr === 47 - ? 63 - : 0; -} - -function base64DecToArr(sBase64, nBlocksSize) { - const sB64Enc = sBase64.replace(/[^A-Za-z0-9+/]/g, ""); - const nInLen = sB64Enc.length; - const nOutLen = nBlocksSize - ? Math.ceil(((nInLen * 3 + 1) >> 2) / nBlocksSize) * nBlocksSize - : (nInLen * 3 + 1) >> 2; - const taBytes = new Uint8Array(nOutLen); - - let nMod3; - let nMod4; - let nUint24 = 0; - let nOutIdx = 0; - for (let nInIdx = 0; nInIdx < nInLen; nInIdx++) { - nMod4 = nInIdx & 3; - nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << (6 * (3 - nMod4)); - if (nMod4 === 3 || nInLen - nInIdx === 1) { - nMod3 = 0; - while (nMod3 < 3 && nOutIdx < nOutLen) { - taBytes[nOutIdx] = (nUint24 >>> ((16 >>> nMod3) & 24)) & 255; - nMod3++; - nOutIdx++; - } - nUint24 = 0; - } - } - - return taBytes; -} - -/* Base64 string to array encoding */ -function uint6ToB64(nUint6) { - return nUint6 < 26 - ? nUint6 + 65 - : nUint6 < 52 - ? nUint6 + 71 - : nUint6 < 62 - ? nUint6 - 4 - : nUint6 === 62 - ? 43 - : nUint6 === 63 - ? 47 - : 65; -} - -function base64EncArr(aBytes) { - let nMod3 = 2; - let sB64Enc = ""; - - const nLen = aBytes.length; - let nUint24 = 0; - for (let nIdx = 0; nIdx < nLen; nIdx++) { - nMod3 = nIdx % 3; - if (nIdx > 0 && ((nIdx * 4) / 3) % 76 === 0) { - sB64Enc += "\r\n"; - } - - nUint24 |= aBytes[nIdx] << ((16 >>> nMod3) & 24); - if (nMod3 === 2 || aBytes.length - nIdx === 1) { - sB64Enc += String.fromCodePoint( - uint6ToB64((nUint24 >>> 18) & 63), - uint6ToB64((nUint24 >>> 12) & 63), - uint6ToB64((nUint24 >>> 6) & 63), - uint6ToB64(nUint24 & 63), - ); - nUint24 = 0; - } - } - return ( - sB64Enc.substr(0, sB64Enc.length - 2 + nMod3) + - (nMod3 === 2 ? "" : nMod3 === 1 ? "=" : "==") - ); -} +前の節の `bytesToBase64` と `base64ToBytes` 関数を直接使用して、Base64 文字列と [`Uint8Array`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) を変換することができます。 -/* UTF-8 array to JS string and vice versa */ +パフォーマンスを向上させるために、[`FileReader`](/ja/docs/Web/API/FileReader) と [`fetch`](/ja/docs/Web/API/Fetch_API) API を介して、base64 データ URL 同士の非同期変換がウェブプラットフォーム内でネイティブにできます。 -function UTF8ArrToStr(aBytes) { - let sView = ""; - let nPart; - const nLen = aBytes.length; - for (let nIdx = 0; nIdx < nLen; nIdx++) { - nPart = aBytes[nIdx]; - sView += String.fromCodePoint( - nPart > 251 && nPart < 254 && nIdx + 5 < nLen /* six bytes */ - ? /* (nPart - 252 << 30) may be not so safe in ECMAScript! So…: */ - (nPart - 252) * 1073741824 + - ((aBytes[++nIdx] - 128) << 24) + - ((aBytes[++nIdx] - 128) << 18) + - ((aBytes[++nIdx] - 128) << 12) + - ((aBytes[++nIdx] - 128) << 6) + - aBytes[++nIdx] - - 128 - : nPart > 247 && nPart < 252 && nIdx + 4 < nLen /* five bytes */ - ? ((nPart - 248) << 24) + - ((aBytes[++nIdx] - 128) << 18) + - ((aBytes[++nIdx] - 128) << 12) + - ((aBytes[++nIdx] - 128) << 6) + - aBytes[++nIdx] - - 128 - : nPart > 239 && nPart < 248 && nIdx + 3 < nLen /* four bytes */ - ? ((nPart - 240) << 18) + - ((aBytes[++nIdx] - 128) << 12) + - ((aBytes[++nIdx] - 128) << 6) + - aBytes[++nIdx] - - 128 - : nPart > 223 && nPart < 240 && nIdx + 2 < nLen /* three bytes */ - ? ((nPart - 224) << 12) + - ((aBytes[++nIdx] - 128) << 6) + - aBytes[++nIdx] - - 128 - : nPart > 191 && nPart < 224 && nIdx + 1 < nLen /* two bytes */ - ? ((nPart - 192) << 6) + aBytes[++nIdx] - 128 - : /* nPart < 127 ? */ /* one byte */ - nPart, - ); - } - return sView; +```js +async function bytesToBase64DataUrl(bytes, type = "application/octet-stream") { + return await new Promise((resolve, reject) => { + const reader = Object.assign(new FileReader(), { + onload: () => resolve(reader.result), + onerror: () => reject(reader.error), + }); + reader.readAsDataURL(new File([bytes], "", { type })); + }); } -function strToUTF8Arr(sDOMStr) { - let aBytes; - let nChr; - const nStrLen = sDOMStr.length; - let nArrLen = 0; - - /* mapping… */ - for (let nMapIdx = 0; nMapIdx < nStrLen; nMapIdx++) { - nChr = sDOMStr.codePointAt(nMapIdx); - - if (nChr > 65536) { - nMapIdx++; - } - - nArrLen += - nChr < 0x80 - ? 1 - : nChr < 0x800 - ? 2 - : nChr < 0x10000 - ? 3 - : nChr < 0x200000 - ? 4 - : nChr < 0x4000000 - ? 5 - : 6; - } - - aBytes = new Uint8Array(nArrLen); - - /* transcription… */ - let nIdx = 0; - let nChrIdx = 0; - while (nIdx < nArrLen) { - nChr = sDOMStr.codePointAt(nChrIdx); - if (nChr < 128) { - /* one byte */ - aBytes[nIdx++] = nChr; - } else if (nChr < 0x800) { - /* two bytes */ - aBytes[nIdx++] = 192 + (nChr >>> 6); - aBytes[nIdx++] = 128 + (nChr & 63); - } else if (nChr < 0x10000) { - /* three bytes */ - aBytes[nIdx++] = 224 + (nChr >>> 12); - aBytes[nIdx++] = 128 + ((nChr >>> 6) & 63); - aBytes[nIdx++] = 128 + (nChr & 63); - } else if (nChr < 0x200000) { - /* four bytes */ - aBytes[nIdx++] = 240 + (nChr >>> 18); - aBytes[nIdx++] = 128 + ((nChr >>> 12) & 63); - aBytes[nIdx++] = 128 + ((nChr >>> 6) & 63); - aBytes[nIdx++] = 128 + (nChr & 63); - nChrIdx++; - } else if (nChr < 0x4000000) { - /* five bytes */ - aBytes[nIdx++] = 248 + (nChr >>> 24); - aBytes[nIdx++] = 128 + ((nChr >>> 18) & 63); - aBytes[nIdx++] = 128 + ((nChr >>> 12) & 63); - aBytes[nIdx++] = 128 + ((nChr >>> 6) & 63); - aBytes[nIdx++] = 128 + (nChr & 63); - nChrIdx++; - } /* if (nChr <= 0x7fffffff) */ else { - /* six bytes */ - aBytes[nIdx++] = 252 + (nChr >>> 30); - aBytes[nIdx++] = 128 + ((nChr >>> 24) & 63); - aBytes[nIdx++] = 128 + ((nChr >>> 18) & 63); - aBytes[nIdx++] = 128 + ((nChr >>> 12) & 63); - aBytes[nIdx++] = 128 + ((nChr >>> 6) & 63); - aBytes[nIdx++] = 128 + (nChr & 63); - nChrIdx++; - } - nChrIdx++; - } - - return aBytes; +async function dataUrlToBytes(dataUrl) { + const res = await fetch(dataUrl); + return new Uint8Array(await res.arrayBuffer()); } -``` - -### テスト - -```js -/* Tests */ - -const sMyInput = "Base 64 \u2014 Mozilla Developer Network"; -const aMyUTF8Input = strToUTF8Arr(sMyInput); - -const sMyBase64 = base64EncArr(aMyUTF8Input); - -alert(sMyBase64); - -const aMyUTF8Output = base64DecToArr(sMyBase64); - -const sMyOutput = UTF8ArrToStr(aMyUTF8Output); - -alert(sMyOutput); +// 使用方法 +await bytesToBase64DataUrl(new Uint8Array([0, 1, 2])); // "data:application/octet-stream;base64,AAEC" +await dataUrlToBytes("data:application/octet-stream;base64,AAEC"); // Uint8Array [0, 1, 2] ``` -### 付録: Base64 文字列を Uint8Array または ArrayBuffer へデコード - -これらの関数により、 Base64 エンコードされた文字列から [Uint8Array](/ja/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) や [ArrayBuffer](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) を作成することも可能です。 - -```js -// "Base 64 \u2014 Mozilla Developer Network" -const myArray = base64DecToArr( - "QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==", -); - -// "Base 64 \u2014 Mozilla Developer Network" -const myBuffer = base64DecToArr( - "QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==", -).buffer; - -alert(myBuffer.byteLength); -``` +## 関連情報 -> **メモ:** `base64DecToArr(sBase64[, nBlocksSize])` 関数は、バイト列の [`Uint8Array`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) を返します。 16 ビット/ 32 ビット/ 64 ビットの生データのバッファーを構築することを目的とする場合、 `nBlocksSize` 引数を使用します。これは、 `uint8Array.buffer.bytesLength` プロパティの結果が倍数となるべきバイト数（ASCII、バイナリー列（すなわち、列内のそれぞれの文字を 1 バイトのバイナリーデータと見なす列）、 UTF-16 列では `2`、 UTF-32 列では `4`）を表します。 +- JavaScript API: + - {{domxref("Window.atob()")}}（{{domxref("WorkerGlobalScope.atob()", "ワーカーでも利用可能", "", "nocode")}}） + - {{domxref("Window.btoa()")}}（{{domxref("WorkerGlobalScope.btoa()", "ワーカーでも利用可能", "", "nocode")}}） +- [データ URL](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) +- [Base64](https://ja.wikipedia.org/wiki/Base64)（ウィキペディア） +- Base64 のアルゴリズム（[RFC 4648](https://datatracker.ietf.org/doc/html/rfc4648) の説明） diff --git a/files/ja/glossary/rendering_engine/index.md b/files/ja/glossary/engine/rendering/index.md similarity index 92% rename from files/ja/glossary/rendering_engine/index.md rename to files/ja/glossary/engine/rendering/index.md index f55bae782e3e24..ce05035e966592 100644 --- a/files/ja/glossary/rendering_engine/index.md +++ b/files/ja/glossary/engine/rendering/index.md @@ -1,6 +1,7 @@ --- title: Rendering engine (レンダリングエンジン) -slug: Glossary/Rendering_engine +slug: Glossary/Engine/Rendering +original_slug: Glossary/Rendering_engine --- {{GlossarySidebar}} diff --git a/files/ja/glossary/firewall/index.md b/files/ja/glossary/firewall/index.md index b94a996c39b3cd..dae015ee9098e1 100644 --- a/files/ja/glossary/firewall/index.md +++ b/files/ja/glossary/firewall/index.md @@ -1,16 +1,16 @@ --- title: firewall (ファイアウォール) slug: Glossary/Firewall +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -**ファイアウォール**はネットワークトラフィックをフィルタするシステムです。 特定の規則に従ってトラフィックを通過させたりブロックしたりすることができます。たとえば、特定のポートを宛先とする着信接続や、特定の IP アドレスへの発信接続をブロックすることができます。 +**ファイアウォール**は、ネットワークトラフィックをフィルタリングするシステムです。 特定のルールに従って、トラフィックを通過させたりブロックしたりすることができます。たとえば、特定のポートを宛先とする着信接続や、特定の IP アドレスへの発信接続をブロックすることができます。 ファイアウォールは単一のソフトウェアのようなシンプルなものから、ファイアウォールとしてのみ機能する専用マシンのような複雑なものまで存在します。 -## 詳細情報 +## 関連情報 -### 基礎知識 - -- Wikipedia の [ファイアウォール](https://ja.wikipedia.org/wiki/ファイアウォール) +- [ファイアウォール](https://ja.wikipedia.org/wiki/ファイアウォール)（ウィキペディア） diff --git a/files/ja/glossary/flex/index.md b/files/ja/glossary/flex/index.md index b533de1635e8b1..0a13178efec338 100644 --- a/files/ja/glossary/flex/index.md +++ b/files/ja/glossary/flex/index.md @@ -1,19 +1,19 @@ --- title: Flex slug: Glossary/Flex +l10n: + sourceCommit: 333c924622d7ff78253a662f3d9d4e60263a93d9 --- {{GlossarySidebar}} -`flex` は CSS {{cssxref("display")}}のプロパティに新しく追加された値です。`inline-flex` と同じく、使用すると Element(要素)に {{glossary("flex container", "Flex コンテナ")}} が適用されます。また、その Element(要素)の子 Element(要素)それぞれには {{glossary("flex item", "Flex アイテム")}} が適用されます。flex アイテムが適用された Element(要素)は flex layout を構成し、CSS Flexible Box Layout Module で定義されているプロパティの全てが適用されるはずです。 +`flex` は CSS の {{cssxref("display")}} プロパティの値です。`inline-flex` と同じく、要素に適用すると{{glossary("flex container", "フレックスコンテナー")}}になり、その要素の子要素はそれぞれ{{glossary("flex item", "フレックスアイテム")}}になります。アイテムはフレックスレイアウトに参加し、[CSS フレックスボックスレイアウト](/ja/docs/Web/CSS/CSS_flexible_box_layout)で定義されているすべてのプロパティが適用されます。 -`flex` プロパティは flexbox プロパティを縮めて表したプロパティです。`flex-grow` や `flex-shrink`、`flex-basis` 等があります。 +{{cssxref("flex")}} プロパティもあり、これはフレックスボックスの {{cssxref("flex-grow")}}、{{cssxref("flex-shrink")}}、{{cssxref("flex-basis")}} の各プロパティの一括指定です。このプロパティはフレックスコンテナーにのみ適用されます。 -`` については、CSS Grid Layout 内の [flexible length](/ja/docs/Web/CSS/flex_value) にて確認できます。 +加えて、[``](/ja/docs/Web/CSS/flex_value) は CSS グリッドレイアウトにおいて[可変長](/ja/docs/Web/CSS/flex_value)を表すこともあります。 -## 関連項目 - -### プロパティリファレンス +### 関連する CSS プロパティ - {{cssxref("align-content")}} - {{cssxref("align-items")}} @@ -25,16 +25,18 @@ slug: Glossary/Flex - {{cssxref("flex-grow")}} - {{cssxref("flex-shrink")}} - {{cssxref("flex-wrap")}} +- {{cssxref("gap")}} - {{cssxref("justify-content")}} - {{cssxref("order")}} +- {{cssxref("place-items")}} +- {{cssxref("place-self")}} ### 参考文献 -- _[CSS Flexible Box Layout Module Level 1 Specification](https://www.w3.org/TR/css-flexbox-1/)_ -- CSS フレックスボックスガイド: _[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ -- CSS フレックスボックスガイド: _[フレックスボックスと他のレイアウト方法の関係](/ja/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods)_ -- CSS フレックスボックスガイド: _[フレックスコンテナー内のアイテムの配置](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)_ -- CSS フレックスボックスガイド: _[フレックスアイテムの順序](/ja/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items)_ -- CSS フレックスボックスガイド: _[主軸方向のフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)_ -- CSS フレックスボックスガイド: _[フレックスアイテムの折り返しをマスターする](/ja/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items)_ -- CSS フレックスボックスガイド: _[フレックスボックスの典型的な用途](/ja/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox)_ +- [フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [フレックスボックスと他のレイアウト方法の関係](/ja/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods) +- [フレックスコンテナー内のアイテムの配置](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) +- [フレックスアイテムの順序](/ja/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items) +- [主軸方向のフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis) +- [フレックスアイテムの折り返しをマスターする](/ja/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items) +- [フレックスボックスの典型的な用途](/ja/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox) diff --git a/files/ja/glossary/flex_container/index.md b/files/ja/glossary/flex_container/index.md index 809a1713b1f973..7d256d6f3487b1 100644 --- a/files/ja/glossary/flex_container/index.md +++ b/files/ja/glossary/flex_container/index.md @@ -1,15 +1,17 @@ --- -title: Flex コンテナ +title: Flex Container (フレックスコンテナー) slug: Glossary/Flex_Container +l10n: + sourceCommit: 3c5185e55298c2ca14e4e63913a50bb81e3c5609 --- {{GlossarySidebar}} -{{glossary("Flexbox")}} レイアウトは親要素の `display` プロパティの値に `flex` または `inline-flex` を指定することで定義されます。この親要素が**「flex コンテナ」**となり、その子要素が 「flex アイテム」({{glossary("flex item")}}) となります。 +{{glossary("Flexbox", "フレックスボックス")}}レイアウトは、`flex` または `inline-flex` を親要素の `display` プロパティの値に使用することで定義されます。この要素は**フレックスコンテナー**となり、その子要素それぞれは{{glossary("flex item", "フレックスアイテム")}}となります。 -値に `flex` を指定すると、この要素はブロックレベルの flex コンテナとなり、`inline-flex` を指定すると、インラインレベルの flex コンテナとなります。これらの指定は、その要素に対する**「flex 整形文脈 (flex formatting context)」**を作成します。Flex 整形文脈は、フロートがコンテナに侵入せず、コンテナのマージンがアイテムのマージンによって相殺されないという点で、ブロック整形文脈と同様のものです。 +値に `flex` を指定すると、この要素はブロックレベルのフレックスコンテナーとなり、`inline-flex` を指定すると、インラインレベルのフレックスコンテナーとなります。これらの指定は、その要素に対する**フレックス整形コンテキスト**を作成します。これはブロック整形コンテキストと、不動要素がコンテナーの中に侵入せず、コンテナーのマージンがアイテムのマージンとの間で相殺されないという点で似ています。 -## 関連項目 +## 関連情報 ### プロパティリファレンス @@ -23,6 +25,7 @@ slug: Glossary/Flex_Container ### 参考文献 -- CSS フレックスボックスガイド: _[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ -- CSS フレックスボックスガイド: _[フレックスコンテナー内のアイテムの配置](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)_ -- CSS フレックスボックスガイド: _[フレックスアイテムの折り返しをマスターする](/ja/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items)_ +- [フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [フレックスコンテナー内のアイテムの配置](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) +- [フレックスアイテムの折り返しをマスターする](/ja/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items) +- [CSS flexbox inspector: Examine flexbox layouts](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_flexbox_layouts/index.html) diff --git a/files/ja/glossary/flex_item/index.md b/files/ja/glossary/flex_item/index.md index aa84a0581d6715..879f94b256a388 100644 --- a/files/ja/glossary/flex_item/index.md +++ b/files/ja/glossary/flex_item/index.md @@ -1,15 +1,17 @@ --- -title: Flex アイテム +title: Flex Item (フレックスアイテム) slug: Glossary/Flex_Item +l10n: + sourceCommit: 3c5185e55298c2ca14e4e63913a50bb81e3c5609 --- {{GlossarySidebar}} -{{glossary("Flex Container")}} (`display: flex` または `display: inline-flex` が設定された要素) の直下の子要素が**「flex アイテム」**となります。 +{{glossary("Flex Container", "フレックスコンテナー")}}（`display: flex` または `display: inline-flex` が設定された要素）の直下の子要素は**フレックスアイテム**となります。 -Flex コンテナ内で直下に続くテキストも flex アイテムになります。 +フレックスコンテナー内で直下に続くテキストもフレックスアイテムになります。 -## 関連項目 +## 関連情報 ### プロパティリファレンス @@ -21,6 +23,6 @@ Flex コンテナ内で直下に続くテキストも flex アイテムになり ### 参考文献 -- CSS フレックスボックスガイド: _[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ -- CSS フレックスボックスガイド: _[フレックスアイテムの順序](/ja/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items)_ -- CSS フレックスボックスガイド: _[主軸方向のフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)_ +- [フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [フレックスアイテムの順序](/ja/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items) +- [主軸方向のフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis) diff --git a/files/ja/glossary/flexbox/index.md b/files/ja/glossary/flexbox/index.md index 704a0d68c39a2b..1d72979db7bce8 100644 --- a/files/ja/glossary/flexbox/index.md +++ b/files/ja/glossary/flexbox/index.md @@ -1,17 +1,19 @@ --- title: Flexbox (フレックスボックス) slug: Glossary/Flexbox +l10n: + sourceCommit: 52dc11c43d656c48532096f1765b56d05c537711 --- {{GlossarySidebar}} -Flexbox は、アイテムを列方向や行方向など一次元に並べて表示するためのレイアウトモデルである [CSS Flexible Box Layout Module](https://www.w3.org/TR/css-flexbox-1/) に対する一般的な通称です。 +フレックスボックスは、アイテムを列方向や行方向など一次元に並べて表示するためのレイアウトモデルである [CSS flexible box layout module](/ja/docs/Web/CSS/CSS_flexible_box_layout) に対する一般的な通称です。 -この仕様書では、Flexbox はユーザーインターフェイスの設計のためのレイアウトモデルとして説明されています。Flexbox の重要な特徴として、フレックスレイアウト内のアイテムが伸縮することができるという点が挙げられます。余白はアイテム自体に割り当てることも、アイテム間やアイテム周りに配分することも出来ます。 +この仕様書では、フレックスボックスはユーザーインターフェイスの設計のためのレイアウトモデルとして説明されています。フレックスボックスの重要な特徴が、フレックスレイアウト内のアイテムが伸縮することができることです。余白はアイテム自体に割り当てることも、アイテムの間や周囲に配分することもできます。 -また、Flexbox はでは主軸や交差軸にそった位置合わせをすることもでき、アイテムグループのサイズと配置に対する高レベルな制御を提供します。 +また、フレックスボックスはでは主軸や交差軸上の配置を指定することもでき、アイテムグループのサイズと配置に対する高レベルな制御を提供します。 -## 理解を深める +## 関連情報 ### プロパティリファレンス @@ -28,36 +30,14 @@ Flexbox は、アイテムを列方向や行方向など一次元に並べて表 - {{cssxref("justify-content")}} - {{cssxref("order")}} -### 関連情報 +### 参考文献 +- CSS フレックスボックスガイド: + - [フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) + - [フレックスボックスと他のレイアウト方法の関係](/ja/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods) + - [フレックスコンテナー内のアイテムの配置](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) + - [フレックスアイテムの順序](/ja/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items) + - [主軸方向のフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis) + - [フレックスアイテムの折り返しのマスター](/ja/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items) + - [フレックスボックスの典型的な用途](/ja/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox) - _[CSS Flexible Box Layout Module Level 1 Specification](https://www.w3.org/TR/css-flexbox-1/)_ -- CSS フレックスボックスガイド: _[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ -- CSS フレックスボックスガイド: _[フレックスボックスと他のレイアウト方法の関係](/ja/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods)_ -- CSS フレックスボックスガイド: _[フレックスコンテナー内のアイテムの配置](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)_ -- CSS フレックスボックスガイド: _[フレックスアイテムの順序](/ja/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items)_ -- CSS フレックスボックスガイド: _[主軸方向のフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)_ -- CSS フレックスボックスガイド: _[フレックスアイテムの折り返しのマスター](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items)_ -- CSS フレックスボックスガイド: _[フレックスボックスの典型的な用途](/ja/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox)_ - -1. [MDN Web Docs 用語集](/ja/docs/Glossary) - - 1. {{Glossary("Cross Axis", "交差軸")}} - 2. {{Glossary("Flex")}} - 3. {{Glossary("Flex Container", "フレックスコンテナー")}} - 4. {{Glossary("Flex Item", "フレックスアイテム")}} - 5. {{Glossary("Grid", "グリッド")}} - -2. 関連する CSS プロパティ - - 1. {{cssxref("align-content")}} - 2. {{cssxref("align-items")}} - 3. {{cssxref("align-self")}} - 4. {{cssxref("flex")}} - 5. {{cssxref("flex-basis")}} - 6. {{cssxref("flex-direction")}} - 7. {{cssxref("flex-flow")}} - 8. {{cssxref("flex-grow")}} - 9. {{cssxref("flex-shrink")}} - 10. {{cssxref("flex-wrap")}} - 11. {{cssxref("justify-content")}} - 12. {{cssxref("order")}} diff --git a/files/ja/glossary/guard/index.md b/files/ja/glossary/guard/index.md deleted file mode 100644 index e2f100c4c092d4..00000000000000 --- a/files/ja/glossary/guard/index.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Guard (ガード) -slug: Glossary/Guard ---- - -{{GlossarySidebar}} - -ガードは、{{domxref("Fetch_API","Fetch 仕様")}}で定義されている {{domxref("Headers")}} オブジェクトの機能で、{{domxref("Headers.set","set()")}} や {{domxref("Headers.append","append()")}} などのメソッドがヘッダーのコンテンツを変更できるかどうかに影響します。 例えば、`immutable`（不変）ガードは、ヘッダーを変更できないことを意味します。 詳しくは、[Fetch の基本概念: ガード](/ja/docs/Web/API/Fetch_API/Basic_concepts#Guard)を参照してください。 diff --git a/files/ja/glossary/property/css/index.md b/files/ja/glossary/property/css/index.md index 3ae53c9651d54d..1714aaeb33cb09 100644 --- a/files/ja/glossary/property/css/index.md +++ b/files/ja/glossary/property/css/index.md @@ -1,17 +1,19 @@ --- title: Property (プロパティ) (CSS) slug: Glossary/Property/CSS +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -**CSS のプロパティ**は、関連付けられた値によりブラウザーがどのように要素を表示するかを定義する特性です。 +**CSS プロパティ**は、関連付けられた値によりブラウザーがどのように要素を表示するかを定義する特性（色など）です。 -以下に CSS のルールの例を示します： +以下に CSS のルールの例を示します。 ```css /* "div" はドキュメント中の全ての div 要素が */ -/* このルールによってスタイルを整えることを示すセレクタです。*/ +/* このルールによってスタイルを整えることを示すセレクターです。*/ div { /* 値 "black" を持つプロパティ "color" は、*/ /* テキストの色が黒くなることを示します。*/ @@ -23,13 +25,8 @@ div { } ``` -## 詳細情報 - -### 一般知識 - -- [Learn CSS](/ja/Learn/CSS) - -### 技術リファレンス +## 関連情報 +- [Learn CSS](/ja/docs/Learn/CSS) - [MDN 上の CSS リファレンス](/ja/docs/Web/CSS/Reference) -- [CSS ワーキンググループの現在の成果](http://www.w3.org/Style/CSS/current-work) +- [CSS ワーキンググループの現在の成果](https://www.w3.org/Style/CSS/current-work) diff --git a/files/ja/glossary/property/index.md b/files/ja/glossary/property/index.md index 480a28462021ef..4bff9d888a49a4 100644 --- a/files/ja/glossary/property/index.md +++ b/files/ja/glossary/property/index.md @@ -1,10 +1,12 @@ --- title: Property (プロパティ) slug: Glossary/Property +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -**プロパティ**という用語はコンテキストに応じて幾つかの意味を持ちます。以下を参照してください： +**プロパティ**という用語は文脈に応じて幾つかの意味を持ちます。以下を参照してください。 {{GlossaryDisambiguation}} diff --git a/files/ja/glossary/pseudo-element/index.md b/files/ja/glossary/pseudo-element/index.md index 2b026609a0724a..557302557a9f52 100644 --- a/files/ja/glossary/pseudo-element/index.md +++ b/files/ja/glossary/pseudo-element/index.md @@ -1,14 +1,14 @@ --- -title: Pseudo-element +title: Pseudo-element (擬似要素) slug: Glossary/Pseudo-element +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -CSS では**擬似要素**セレクターを使うことで、選択すべき特定の HTML 要素がない状況でも、ドキュメントのコンテンツの一部に、スタイルを適用できます。例えば、各段落の最初の文字を、それぞれの要素の中に置いていくのではなく、`p`{{ Cssxref("::first-letter") }} で、それらのすべてに、スタイルを指定することができます。 +CSS では**擬似要素**セレクターを使うことで、選択すべき特定の HTML 要素がない状況でも、文書コンテンツの一部にスタイルを適用できます。例えば、各段落の最初の文字を、それぞれの要素の中に置いていくのではなく、`p`{{ Cssxref("::first-letter") }} で、それらのすべてに、スタイルを指定することができます。 -## 関連項目 +## 関連情報 -### 技術リファレンス - -- [Pseudo-elements（疑似要素）](/ja/docs/Web/CSS/Pseudo-elements) +- [擬似要素](/ja/docs/Web/CSS/Pseudo-elements) diff --git a/files/ja/glossary/rng/index.md b/files/ja/glossary/rng/index.md index 9189787c4419a7..edb7f990462619 100644 --- a/files/ja/glossary/rng/index.md +++ b/files/ja/glossary/rng/index.md @@ -1,28 +1,25 @@ --- title: Random Number Generator (乱数発生器) slug: Glossary/RNG +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -**PRNG** (擬似乱数発生器) は、複雑で、予測できないように見えるパターンの数字を出力するためのアルゴリズムです。真の乱数 (放射性線源など) はまったく予測できないのに対し、すべてのアルゴリズムは予測可能なので、 PRNG は、開始パラメーターや*シード*が同じときには同じ数値を返します。 +擬似乱数発生器 (**PRNG**) は、複雑で、予測できないように見えるパターンの数字を出力するためのアルゴリズムです。真の乱数（放射性線源など）はまったく予測できないのに対し、すべてのアルゴリズムは予測可能なので、 PRNG は、開始パラメーターや*シード*が同じときには同じ数値を返します。 -疑似乱数はゲームなど、様々な応用分野で使用されています。 +擬似乱数はゲームなど、様々な応用分野で使用されています。 暗号学的に安全な擬似乱数とは、暗号での使用に合うよう追加のプロパティを伴う擬似乱数であり、次のようなものがあります。 -- (シードを知らずに) 攻撃者が計算によって出力を予測することができないもの +- （シードを知らずに）攻撃者が計算によって出力を予測することができないもの - 攻撃者がその現在の状態を解くことができた場合、攻撃者が以前に発行された数を解明することができないもの。 -多くの疑似乱数、は暗号学的に安全ではありません。 +多くの擬似乱数、は暗号学的に安全ではありません。 ## 関連情報 -### 一般知識 - -- Wikipedia の[擬似乱数](https://ja.wikipedia.org/wiki/擬似乱数) +- [擬似乱数](https://ja.wikipedia.org/wiki/擬似乱数)（ウィキペディア） - JavaScript の組み込み PRNG 関数である {{jsxref("Math.random()")}}。これは暗号学的に安全な PRNG ではありません。 - {{domxref("Crypto.getRandomValues()")}}: 暗号学的に安全な数値を提供するためのものです。 -- {{domxref("RandomSource")}} -- {{jsxref("Math.random()")}} -- {{domxref("Crypto.getRandomValues()")}} diff --git a/files/ja/glossary/second-level_domain/index.md b/files/ja/glossary/sld/index.md similarity index 95% rename from files/ja/glossary/second-level_domain/index.md rename to files/ja/glossary/sld/index.md index 07019457e639e4..158cdee06ff0fe 100644 --- a/files/ja/glossary/second-level_domain/index.md +++ b/files/ja/glossary/sld/index.md @@ -1,6 +1,7 @@ --- title: SLD -slug: Glossary/Second-level_Domain +slug: Glossary/SLD +original_slug: Glossary/Second-level_Domain --- {{GlossarySidebar}} diff --git a/files/ja/learn/css/building_blocks/advanced_styling_effects/index.md b/files/ja/learn/css/building_blocks/advanced_styling_effects/index.md index 39743f449e22d9..afff0547b8892b 100644 --- a/files/ja/learn/css/building_blocks/advanced_styling_effects/index.md +++ b/files/ja/learn/css/building_blocks/advanced_styling_effects/index.md @@ -1,31 +1,50 @@ --- -title: ボックスの高度なエフェクト +title: ボックスの高度な効果 slug: Learn/CSS/Building_blocks/Advanced_styling_effects +l10n: + sourceCommit: 289d6314f3368aa3e28524e7d090f6e9c704e3b1 --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}} - -この記事はトリックの箱として機能し、ボックスの影、ブレンドモード、フィルタのようなボックスの装飾に使用できる高度な機能のいくつかを紹介します。 - -| 前提知識: | HTML の基礎（[HTML 入門](/ja/docs/Learn/HTML/Introduction_to_HTML)を学ぶ）、および CSS の機能の考え方（[CSS 入門](/ja/docs/Learn/CSS/Introduction_to_CSS)を学ぶ）。 | -| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| 学習目標: | ボックスの高度なエフェクトの使用方法についてのアイデアを得ることと、CSS 言語に登場しているいくつかの新生のスタイル設定ツールについて知ること。 | +{{LearnSidebar}} + +この記事はトリックの箱として機能し、ボックスの影、ブレンドモード、フィルターのようなボックスの装飾に使用できる高度な機能のいくつかを紹介します。 + + + + + + + + + + + + +
前提知識: + HTML の基礎（HTML 入門で学習）、および CSS の機能の考え方（CSS 第一歩で学習）。 +
目的: + 現行ブラウザーで利用できる高度なスタイル設定の考え方を身につけること。 +
## ボックスの影 -[テキストの装飾](/ja/docs/Learn/CSS/Styling_text)のモジュールに戻って、{{cssxref("text-shadow")}} プロパティを見てみましょう。 これにより、要素のテキストに 1 つ以上のドロップシャドウを適用できます。 ボックスにも同等のプロパティがあります — {{cssxref("box-shadow")}} を使用すると、実際の要素ボックスに 1 つ以上のドロップシャドウを適用できます。 テキストの影と同様に、ボックスの影はブラウザー間で非常によくサポートされていますが、IE9 以降のみです。 古いバージョンの IE を使用しているユーザーは、影なしで対処するしかないかもしれないので、コンテンツがそれらなしで判読可能であることを確かめるためにデザインをテストするだけです。 +{{cssxref("box-shadow")}} を使用すると、実際の要素ボックスに 1 つ以上のドロップシャドウを適用できます。 テキストの影と同様に、ボックスの影は、IE9 以降や Edge を含め、ブラウザー間の対応が良く進んでいます。古いバージョンの IE を使用しているユーザーは、影なしで対処するしかないかもしれないので、コンテンツがそれらなしで判読可能であることを確かめるためにデザインをテストするだけです。 -このセクションの例は [box-shadow.html](http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html) にあります（[ソースコード](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/box-shadow.html)も参照）。 +この節の例は [box-shadow.html](https://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html) にあります（[ソースコード](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/advanced_box_effects/box-shadow.html)も参照）。 ### 簡単なボックスの影 -物事を始めるための簡単な例を見てみましょう。 まず、いくつかの HTML です。 +手始めに、簡単な例を見てみましょう。 まず、いくらかの HTML です。 ```html

- Warning: The thermostat on the cosmic transcender has - reached a critical level. + 警告: + 宇宙のトランスセンダーのサーモスタットは臨界レベルに達しています。

``` @@ -43,13 +62,13 @@ article { background-color: red; background-image: linear-gradient( to bottom, - rgba(0, 0, 0, 0), - rgba(0, 0, 0, 0.25) + rgb(0 0 0 / 0%), + rgb(0 0 0 / 25%) ); } .simple { - box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7); + box-shadow: 5px 5px 5px rgb(0 0 0 / 70%); } ``` @@ -59,27 +78,27 @@ article { `box-shadow` プロパティ値に次の 4 つの項目があることがわかります。 -1. 最初の長さの値は**水平オフセット**（horizontal offset）です — 影が元のボックスから右へオフセットした距離です（値が負の場合は左）。 -2. 2 番目の長さの値は**垂直オフセット**（vertical offset）です — 影が元のボックスから下方向へオフセットした距離です（値が負の場合は上方向）。 -3. 3 番目の長さの値は、**ぼかし半径**（blur radius）です — 影に適用されるぼかしの量です。 +1. 最初の長さの値は**水平オフセット** (horizontal offset) です。影を元のボックスから右へずらす距離です（値が負の場合は左）。 +2. 2 番目の長さの値は**垂直オフセット** (vertical offset) です。影を元のボックスから下へずらす距離です（値が負の場合は上）。 +3. 3 番目の長さの値は、**ぼかし半径** (blur radius) です。影に適用されるぼかしの量です。 4. 色の値は、影の**基本色**（base color）です。 これらの値を定義するために必要な長さと色の単位を使用できます。 ### 複数のボックスの影 -次のように、1 つの `box-shadow` の宣言で、複数のボックスの影をコンマで区切って指定することもできます。 +次のように、1 つの `box-shadow` の宣言で、複数のボックスの影をカンマで区切って指定することもできます。 ```html hidden

- Warning: The thermostat on the cosmic transcender has - reached a critical level. + 警告: + 宇宙のトランスセンダーのサーモスタットは臨界レベルに達しています。

``` -```css +```css-nolint p { margin: 0; } @@ -90,36 +109,35 @@ article { background-color: red; background-image: linear-gradient( to bottom, - rgba(0, 0, 0, 0), - rgba(0, 0, 0, 0.25) + rgb(0 0 0 / 0%), + rgb(0 0 0 / 25%) ); } .multiple { - box-shadow: - 1px 1px 1px black, - 2px 2px 1px black, - 3px 3px 1px red, - 4px 4px 1px red, - 5px 5px 1px black, - 6px 6px 1px black; + box-shadow: 1px 1px 1px black, + 2px 2px 1px black, + 3px 3px 1px red, + 4px 4px 1px red, + 5px 5px 1px black, + 6px 6px 1px black; } ``` -そして、この結果を得ます。 +そして、この結果が得られます。 {{ EmbedLiveSample('Multiple_box_shadows', '100%', 100) }} -ここでは、複数の色付きレイヤーを持つ凸型のボックスを作成することで楽しいことができましたが、例えば複数の光源に基づいて影を付けてよりリアルな外観を作成するなど、好きな方法で使用できます。 +ここでは、複数の色レイヤーで盛り上がったボックスを作成することで楽しみを演出しましたが、例えば、複数の光源に基づく影でよりリアルな見てくれを作成するなど、好きな方法で使用することができます。 ### その他のボックスの影の機能 -{{cssxref("text-shadow")}} とは異なり、{{cssxref("box-shadow")}} には `inset` キーワードがあります — これを影の宣言の最初に置くと、外側の影ではなく内側の影になります。 見て理解してもらいましょう。 +{{cssxref("text-shadow")}} とは異なり、{{cssxref("box-shadow")}} には `inset` キーワードがあります。これを影の宣言の最初に置くと、外側の影ではなく内側の影になります。 見て理解してもらいましょう。 まず、この例では一部異なる HTML を使用します。 ```html - + ``` ```css @@ -132,8 +150,8 @@ button { background-image: linear-gradient(to bottom right, #777, #ddd); box-shadow: 1px 1px 1px black, - inset 2px 3px 5px rgba(0, 0, 0, 0.3), - inset -2px -3px 5px rgba(255, 255, 255, 0.5); + inset 2px 3px 5px rgb(0 0 0 / 30%), + inset -2px -3px 5px rgb(255 255 255 / 50%); } button:focus, @@ -144,8 +162,8 @@ button:hover { button:active { box-shadow: inset 2px 2px 1px black, - inset 2px 3px 5px rgba(0, 0, 0, 0.3), - inset -2px -3px 5px rgba(255, 255, 255, 0.5); + inset 2px 3px 5px rgb(0 0 0 / 30%), + inset -2px -3px 5px rgb(255 255 255 / 50%); } ``` @@ -157,69 +175,38 @@ button:active { ボタンが押されたとき、アクティブ状態は最初のボックスの影を非常に暗い内側の影と交換し、押されているボタンの外観を与えます。 -> **メモ:** `box-shadow` 値に設定できる別の項目があります — 色の値の直前に別の長さの値をオプションで設定できるのが、**広がり半径**（spread radius）です。 設定すると、影が元のボックスよりも大きくなります。 あまり一般的ではありませんが、言及する価値があります。 - -## フィルタ - -CSS フィルタは、Photoshop のようなグラフィックパッケージのレイヤーにフィルタを適用するのと同じ方法で、要素にフィルタを適用する方法を提供します。 利用可能ないくつかの異なるオプションがあり、{{cssxref("filter")}} のリファレンスページでそれらすべてについて詳しく読むことができます。 このセクションでは、構文について説明し、結果がどれほど楽しいものになるかを説明します。 - -基本的に、フィルタは任意の要素、ブロック、インラインに適用することができます — あなたは単に `filter` プロパティを使い、それに特定のフィルタ関数の値を与えるだけです。 利用可能なフィルタオプションの中には他の CSS 機能と非常によく似た機能を持つものがあります。 例えば、`drop-shadow()` は非常によく似た方法で機能し、{{cssxref("box-shadow")}} や {{cssxref("text-shadow")}} と同じエフェクトをもたらします。 しかし、フィルタに関して本当に素晴らしいことは、ボックス自体を 1 つの大きな塊としてではなく、ボックス内のコンテンツの正確な形状に作用することです。 それは常に望んだものではないかもしれませんが、もっときれいに見えます。 簡単な例を使用して、意味を説明しましょう。 - -まず、いくつかの簡単な HTML です。 - -```html -

Filter

- -

Box shadow

-``` - -そして今、いくつかの CSS はドロップシャドウをそれぞれに適用します。 - -```css -p { - margin: 1rem auto; - padding: 20px; - width: 100px; - border: 5px dashed red; -} +> **メモ:** `box-shadow` 値に設定できる別の項目があります — 色の値の直前に別の長さの値をオプションで設定できるのが、**広がり半径** (spread radius) です。 設定すると、影が元のボックスよりも大きくなります。 あまり一般的ではありませんが、言及する価値があります。 -.filter { - -webkit-filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.7)); - filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.7)); -} +## フィルター -.box-shadow { - box-shadow: 5px 5px 1px rgba(0, 0, 0, 0.7); -} -``` +CSS を使って画像の構図を変えることはできませんが、工夫できることはいくつかあります。あなたのデザインに関心を持たせるのに役立つとても素晴らしいプロパティのひとつに、{{cssxref("filter")}} プロパティがあります。このプロパティは、CSS で Photoshop のようなフィルターを実現します。 -これにより、次のような結果が得られます。 +下記の例では、フィルターに 2 つの異なる値を使用しています。最初のものは `blur()` で、この関数には画像をどの程度不鮮明にするかを示す値を渡します。 -{{ EmbedLiveSample('Filters', '100%', 200) }} +2 つ目は `grayscale()` で、パーセント値を用いてどれだけ色を除去するかを設定します。 -ご覧のとおり、フィルタのドロップシャドウは、テキストの正確な形と境界線の破線に従います。 ボックスの影はボックスの四角形にちょうど従っています。 +{{EmbedGHLiveSample("css-examples/learn/images/filter.html", '100%', 900)}} -その他注意すべきこと。 +**ライブサンプルのパーセント値とピクセルパラメーターを変更して、画像がどのように変化するかを確認してください。他にも値を入れ替えることができます。上のライブ例で、`contrast(200%)`、`invert(100%)`、`hue-rotate(20deg)` を試してみてください。他にもいろいろなオプションがあるので、[`filter`](/ja/docs/Web/CSS/filter)の MDN ページを見ていってください。** -- フィルタは非常に新しく、Microsoft Edge を含む最近のほとんどのブラウザーでサポートされていますが、Internet Explorer ではまったくサポートされていません。 デザインにフィルタを使用する場合は、コンテンツがフィルタなしで使用可能であることを確認する必要があります。 -- `-webkit-` 接頭辞が付いたバージョンの `filter` プロパティが含まれていることがわかります。 これは{{glossary("Vendor Prefix","ベンダー接頭辞")}}と呼ばれ、新しい機能の実装を完了する前にブラウザーによって使用され、その機能をサポートし、接頭辞の付かないバージョンと衝突せずにその機能を試すことができます。 ベンダー接頭辞はウェブ開発者によって使われることを意図していませんが、実験的な機能が本当に望まれるならば本番ページで使われることもあります。 この場合、現在のところ Chrome / Safari / Opera のサポートには `-webkit-` バージョンのプロパティが必要ですが、Edge と Firefox は最後の接頭辞の付かないバージョンを使用します。 +フィルターは画像だけでなく、あらゆる要素に適用することができます。利用できるフィルターオプションの中には、他の CSS 機能ととてもよく似たことをするものもあります。例えば `drop-shadow()` はとてもよく似た方法で動作し、[`box-shadow`](/ja/docs/Web/CSS/box-shadow) や [`text-shadow`](/ja/docs/Web/CSS/text-shadow) と似た効果を与えます。しかし、フィルターの実にいいところは、ボックスそのものを一つの大きな塊としてではなく、ボックス内のコンテンツの正確な図形に対して動作することです。 -> **メモ:** コードで接頭辞を使用する場合は、接頭辞が必要なバージョンと接頭辞の付かないバージョンを必ずすべて含めてください。 そうすれば、可能な限り最大数のブラウザーでこの機能を使用できるようになり、後でブラウザーが接頭辞をなくすときに接頭辞の付かないバージョンも使用できます。 また、これらの実験的な機能は変更される可能性があるため、コードが壊れる可能性があります。 接頭辞が削除されるまで、これらの機能を試してみることが本当に最善です。 +この例では、 ボックスにフィルターを適用してボックスシャドウと比較しています。ご覧のように、 ドロップシャドウフィルターは、 テキストと枠線のダッシュの正確な図形に沿って現れます。ボックスシャドウはボックスの四角形沿いにだけ現れます。 -その他のフィルタの例が [filters.html](http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/filters.html) にあります（[ソースコード](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/filters.html)も参照）。 +{{EmbedGHLiveSample("css-examples/learn/images/filter-text.html", '100%', 700)}} ## ブレンドモード -CSS ブレンドモードでは、2 つの要素が重なるときにブレンドエフェクトを指定する要素にブレンドモードを追加できます — 各ピクセルに表示される最終的な色は、元のピクセル色とその下のレイヤーにあるピクセル色を組み合わせた結果になります。 ブレンドモードは、Photoshop のようなグラフィックアプリケーションのユーザーにとっては非常によく知られています。 +CSS ブレンドモードでは、要素にブレンドモードを追加することで、2 つの要素が重なったときのブレンド効果を指定することができます。各ピクセルの最終的な表示色は、元のピクセルの色と、その下のレイヤーのピクセルの色を組み合わせたものになります。ブレンドモードは、Photoshop のようなグラフィックアプリケーションのユーザーにはとてもおなじみのものです。 -CSS でブレンドモードを使用する次の 2 つのプロパティがあります。 +CSS でブレンドモードを使用するプロパティは、次の 2 つがあります。 - {{cssxref("background-blend-mode")}} は、単一の要素に設定された複数の背景画像と色をブレンドします。 -- {{cssxref("mix-blend-mode")}} は、設定されている要素と、それが重なっている要素をブレンドします — 背景とコンテンツの両方です。 +- {{cssxref("mix-blend-mode")}} は、設定されている要素と、それが重なっている要素の背景とコンテンツの両方をブレンドします。 -こちらの [blend-modes.html](http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html) サンプルページ（[ソースコード](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/blend-modes.html)を参照）、および {{cssxref("<blend-mode>")}} リファレンスページには、ここに掲載されている以外にもたくさんの例があります。 +こちらの [blend-modes.html](https://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html) サンプルページ（[ソースコード](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/advanced_box_effects/blend-modes.html)を参照）、および {{cssxref("<blend-mode>")}} リファレンスページには、ここに掲載されている以外にもたくさんの例があります。 -> **メモ:** ブレンドモードもまた非常に新しいもので、フィルタよりもサポートが多少劣ります。 Edge にはまだサポートがありませんし、Safari はブレンドモードオプションのいくつかをサポートするだけです。 +> **メモ:** ブレンドモードもまたとても新しいもので、フィルターよりも対応が進んでいません。Edge はまだ対応していませんし、Safari はブレンドモードオプションのいくつかだけに対応しています。 ### background-blend-mode @@ -248,9 +235,9 @@ div { } ``` -結果はこれです — 左側にオリジナル、右側に乗算ブレンドモードがあります。 +The result we get is this — you can see the original on the left, and the multiply blend mode on the right: -{{ EmbedLiveSample('background-blend-mode', '100%', 200) }} +{{ EmbedLiveSample('background-blend-mode', '100%', 300) }} ### mix-blend-mode @@ -258,19 +245,19 @@ div { ```html
- No mix blend mode + 混合ブレンドモードなし
- Multiply mix + 乗算混合
``` -次がこれをスタイルする CSS です。 +次がこれをスタイル設定する CSS です。 ```css article { @@ -311,111 +298,45 @@ article div:last-child { これにより、次のような結果が得られます。 -{{ EmbedLiveSample('mix-blend-mode', '100%', 200) }} +{{ EmbedLiveSample('mix-blend-mode', '100%', 300) }} -ここでは、乗算混合（multiply mix）ブレンドが 2 つの背景画像だけでなく、その下の `
` からの色もブレンドしていることがわかります。 +ここでは、乗算ブレンドが 2 つの背景画像をブレンドするだけでなく、その下の `
` からの色もブレンドしていることがわかります。 > **メモ:** {{cssxref("position")}}、{{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("z-index")}} など、上記のレイアウトプロパティの一部を理解していなくても心配しないでください。 これらについては、[CSS レイアウト](/ja/docs/Learn/CSS/CSS_layout)のモジュールで詳しく説明します。 -## -webkit-background-clip: text +## CSS シェイプ -先に進む前に、簡単に言及しておきたいと思うもう 1 つの新生機能は、{{cssxref("background-clip")}} の `text` 値です（現在 Chrome、Safari、Opera でサポートされており、Firefox で実装されています）。 独自の `-webkit-text-fill-color: transparent;` 機能とともに使用すると、背景画像を要素のテキストの形に切り取ることができ、いくつかの素晴らしいエフェクトをもたらします。 これは公式の標準ではありませんが、普及しており、開発者によってかなり広く使用されているため、複数のブラウザーにわたって実装されています。 このコンテキストで使用すると、Webkit / Chrome 以外のブラウザーでも、両方のプロパティに `-webkit-` ベンダー接頭辞が必要になります。 +CSSではすべてが長方形のボックスであり、画像は物理的に長方形のボックスであることは事実ですが、[CSS シェイプ](/ja/docs/Web/CSS/CSS_shapes)を使用することで、コンテンツが長方形でないものの周りを流れるように見せることができます。 -```css -.text-clip { - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} -``` +CSS シェイプ仕様により、長方形以外の図形にテキストを回り込ませることができます。特に、テキストを回り込ませることができる余白のある画像で作業するときに有益です。 -では、なぜ他のブラウザーが `-webkit-` 接頭辞を実装したのでしょうか？ 主にブラウザーの互換性のためにです — 非常に多くのウェブ開発者が `-webkit-` 接頭辞を使用してウェブサイトを実装し始めているため、実際には標準に従っているのに、他のブラウザーでは壊れているように見え始めました。 そこで彼らはそのような機能をいくつか実装することを余儀なくされました。 これはあなたの仕事で標準的でなく接頭辞の付いた CSS 機能を使用する危険性を浮き彫りにします — それらはブラウザーの互換性の問題を引き起こすだけでなく、変更される可能性もあるため、コードはいつでも壊れる可能性があります。 標準に固執するほうがはるかに良いです。 +下記画像には、まん丸のバルーンがあります。実際のファイルは長方形ですが、画像を浮動させ（シェイプは浮動要素にのみ適用されます）、{{cssxref("shape-outside")}} プロパティの値を `circle(50%)` として使用することにより、テキストがバルーンの線に沿って流れる効果を与えることができます。 -本番環境でこのような機能を使用したい場合は、ブラウザー間で徹底的なテストを行い、機能が機能しない場合でもサイトが引き続き使用可能であることを確認してください。 +{{EmbedGHLiveSample("css-examples/learn/images/shapes.html", '100%', 1000)}} -> **メモ:** 完全な `-webkit-background-clip: text` のコードの例については、[background-clip-text.html](http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html) を参照してください（[ソースコード](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html)も参照）。 +この例のシェイプは画像ファイルのコンテンツに反応しているわけではありません。代わりに、 circle 関数が画像ファイルの中央を中心点として取り、あたかもファイルの中央にコンパスを置いて、ファイルの中に収まる円を描画したかのようになります。その円の周りをテキストが流れるのです。 -## 能動的学習: いくつかのエフェクトを用いた実験 +> **メモ:** Firefox では、開発者ツールの[シェイプインスペクター](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_css_shapes/index.html)を使用してシェイプを検査することができます。 -今度は、あなたの番です。 この能動的学習のために、下に提供されているコードを使用して、上で読んだエフェクトのいくつかを試してみてください。 +`circle()` 関数はいくつか定義されている基本的なシェイプの一つに過ぎませんが、シェイプを作成する方法はいくつもあります。CSS シェイプの詳細情報とサンプルコードについては、MDN の [CSS シェイプガイド](/ja/docs/Web/CSS/CSS_shapes/Overview_of_shapes)を参照してください。 -間違えた場合は、_Reset_ ボタンを使用して例をいつでもリセットできます。 +## -webkit-background-clip: text -```html hidden -
-

HTML Input

- - -

CSS Input

- - -

Output

-
-
- -
-
-``` +先に進む前に、簡単に言及しておきたいと思うもう 1 つの機能は、{{cssxref("background-clip")}} の `text` 値です（現在 Chrome、Safari、Opera が対応しており、Firefox で実装されています）。 独自の `-webkit-text-fill-color: transparent;` 機能とともに使用すると、背景画像を要素のテキストの形に切り取ることができ、いくつかの素晴らしい効果をもたらします。 これは公式の標準ではありませんが、普及しており、開発者によってかなり広く使用されているため、複数のブラウザーにわたって実装されています。 このコンテキストで使用すると、Webkit / Chrome ベース以外のブラウザーでも、両方のプロパティに `-webkit-` ベンダー接頭辞が必要になります。 -```js hidden -var htmlInput = document.querySelector(".html-input"); -var cssInput = document.querySelector(".css-input"); -var reset = document.getElementById("reset"); -var htmlCode = htmlInput.value; -var cssCode = cssInput.value; -var output = document.querySelector(".output"); - -var styleElem = document.createElement("style"); -var headElem = document.querySelector("head"); -headElem.appendChild(styleElem); - -function drawOutput() { - output.innerHTML = htmlInput.value; - styleElem.textContent = cssInput.value; +```css +.text-clip { + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } +``` -reset.addEventListener("click", function () { - htmlInput.value = htmlCode; - cssInput.value = cssCode; - drawOutput(); -}); +では、なぜ他のブラウザーが `-webkit-` 接頭辞を実装したのでしょうか？ 主にブラウザーの互換性のためにです。とても多くのウェブ開発者が `-webkit-` 接頭辞を使用してウェブサイトを実装し始めているため、実際には標準に従っているのに、他のブラウザーでは壊れているように見え始めました。 そこで彼らはそのような機能をいくつか実装することを余儀なくされました。 これは標準的でない接頭辞の付いた CSS 機能を使用する危険性が浮き彫りになります。ブラウザーの互換性の問題を引き起こすだけでなく、変更される可能性もあるため、コードはいつでも壊れる可能性があります。 標準に固執するほうがはるかに良いことです。 -htmlInput.addEventListener("input", drawOutput); -cssInput.addEventListener("input", drawOutput); -window.addEventListener("load", drawOutput); -``` +本番環境でこのような機能を使用したい場合は、ブラウザー間で徹底的なテストを行い、機能が機能しない場合でもサイトが引き続き使用可能であることを確認してください。 -{{ EmbedLiveSample('Playable_code', 700, 820) }} +> **メモ:** 完全な `-webkit-background-clip: text` のコードの例については、[background-clip-text.html](https://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html) を参照してください（[ソースコード](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/advanced_box_effects/background-clip-text.html)も参照）。 ## まとめ -この記事が楽しかったことを願っています — ぴかぴかのおもちゃで遊ぶのは概してそうで、最先端のブラウザーで、どのような種類のツールが使用可能になりつつあるのかを見るのはいつも面白いです。 [ボックスの装飾](/ja/docs/Learn/CSS/Styling_boxes)の記事の終わりに到達したので、次に私たちの評価であなたのボックスの装飾のスキルをテストします。 - -{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}} +この記事が楽しいものであったことを願います。光り輝くおもちゃで遊ぶことは一般的にそうですし、現行のブラウザーで利用できるようになった高度なスタイル設定ツールの種類を見ることは常に興味深いものです。 diff --git a/files/ja/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md b/files/ja/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md index 9f2fea346d69c5..781bf1f750f40a 100644 --- a/files/ja/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md +++ b/files/ja/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md @@ -59,8 +59,8 @@ l10n: ### ロゴ - {{htmlelement("Heading_Elements", "h1")}} にロゴを背景画像として追加します。 -- ロゴにフィルタを追加して、微妙なドロップシャドウを付けます。 -- 今度はフィルタをコメントアウトし、丸い画像の形に沿った（ややクロスブラウザー互換の）別の方法でドロップシャドウを実装します。 +- ロゴにフィルターを追加して、微妙なドロップシャドウを付けます。 +- 今度はフィルターをコメントアウトし、丸い画像の形に沿った（ややクロスブラウザー互換の）別の方法でドロップシャドウを実装します。 ## ヒントとコツ diff --git a/files/ja/learn/css/building_blocks/index.md b/files/ja/learn/css/building_blocks/index.md index 4bae3d408faabe..3c56838d938ffb 100644 --- a/files/ja/learn/css/building_blocks/index.md +++ b/files/ja/learn/css/building_blocks/index.md @@ -32,7 +32,7 @@ l10n: - [要素、クラス、ID によるセレクター](/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) - [属性によるセレクター](/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) - - [擬似クラスおよび疑似要素](/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [擬似クラスおよび擬似要素](/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) - [結合子](/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators) - [カスケード、詳細度、継承](/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) diff --git a/files/ja/learn/css/building_blocks/values_and_units/index.md b/files/ja/learn/css/building_blocks/values_and_units/index.md index 0d3e31d239a338..8068cae5992bc2 100644 --- a/files/ja/learn/css/building_blocks/values_and_units/index.md +++ b/files/ja/learn/css/building_blocks/values_and_units/index.md @@ -399,7 +399,7 @@ CSS にも[関数](/ja/docs/Web/CSS/CSS_Functions)があり、他の言語の関 CSS は[数学関数](/ja/docs/Web/CSS/CSS_Functions#数学関数)に対応しており、静的な数値に頼ったり JavaScript で計算したりする代わりに計算を行うことができます。 最も一般的な数学関数の一つは [`calc()`](/ja/docs/Web/CSS/calc) で、足し算、引き算、掛け算、割り算のような処理を行うことができます。 -例えば、ある要素の幅を親コンテナの 20% に 100px を加えた値に設定したいとします。 +例えば、ある要素の幅を親コンテナーの 20% に 100px を加えた値に設定したいとします。 この幅を固定値で指定することはできません。親要素がパーセント値の幅 (または `em` や `rem` のような相対単位) を使用している場合、使用するコンテキストや、ユーザーの端末やウィンドウの幅など、他にも要因によって幅が変わります。 しかし、 `calc()` を使用することで、要素の幅を親コンテナーの 20% + 100px に設定することができます。 この 20% は親コンテナー (`.wrapper`) の幅に基づいており、その幅が変更された場合、計算も変更されます。 diff --git a/files/ja/learn/css/css_layout/flexbox/index.md b/files/ja/learn/css/css_layout/flexbox/index.md index af325a831c90ed..b7988ac94d96c0 100644 --- a/files/ja/learn/css/css_layout/flexbox/index.md +++ b/files/ja/learn/css/css_layout/flexbox/index.md @@ -2,7 +2,7 @@ title: フレックスボックス slug: Learn/CSS/CSS_layout/Flexbox l10n: - sourceCommit: 32f666e453bdb8c93d305075453b6e304cae94de + sourceCommit: d6a792e3adce2c8b29a73a3b407e786091363980 --- {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}} @@ -30,15 +30,13 @@ l10n: ## なぜフレックスボックスなのか -長い間、CSS レイアウトを作成するために利用可能な唯一の信頼できるブラウザー間で互換性のあるツールは[浮動要素](/ja/docs/Learn/CSS/CSS_layout/Floats)と[位置指定](/ja/docs/Learn/CSS/CSS_layout/Positioning)などでした。 これらは問題なく機能しますが、いくつかの点ではかなり限定的でイライラするものです。 +CSS フレックスボックスレイアウトでは、以下のことができるようになります。 -次のような単純なレイアウト要件は、このようなツールを使用しても、便利で柔軟な方法で実現するのが困難または不可能です。 +- コンテンツのブロックを、親コンテンツの中で上下中央に配置すること。 +- 利用できる幅や高さに関係なく、コンテナーのすべての子が利用できる幅や高さを等しくすること。 +- 段組みのレイアウトで、コンテンツの量が異なっていても、すべての段の高さが同じになるようにすること。 -- コンテンツのブロックをその親内で垂直方向に中央揃えにする。 -- コンテナーのすべての子が、使用可能な幅や高さに関係なく、使用可能な幅や高さについて等しい量を占めるようにする。 -- 複数列レイアウトのそれぞれの列に含まれているコンテンツの量が異なっても、高さが同じになるようにする。 - -以降のセクションで見るように、フレックスボックスは多くのレイアウト作業をずっと簡単にします。 さあ始めましょう！ +フレックスボックス機能は、1 次元レイアウトのニーズに最適なソリューションでしょう。早速みてみましょう。 ## 簡単な例の紹介 @@ -78,8 +76,8 @@ section { ![左から右に記述された 3 つのフレックスアイテムが、フレックスコンテナーの中に横に並んでいる。主軸（フレックスアイテムが配置される方向のフレックスコンテナーの軸）は水平である。この軸の両端は主始点と主終点と呼ばれ、それぞれ左側と右側にある。交差軸は垂直で、主軸に直交している。交差始点と交差終点はそれぞれ上部と下部にある。主軸に沿ったフレックスアイテムの長さ、この場合は幅を主サイズと呼び、交差軸に沿ったフレックスアイテムの長さ、この場合は高さを交差サイズと呼ぶ。](flex_terms.png) -- 主軸 (**main axis**) は、フレックスアイテムが配置されている方向に走る軸です（例えば、ページを横切る行、またはページを縦に走る列として）。 この軸の始点と終点は、主始点 (**main start**) と主終点 (**main end**) と呼ばれます。 -- 交差軸 (**cross axis**) は、フレックスアイテムが配置されている方向に対して垂直に走る軸です。 この軸の始点と終点は、交差始点 (**cross start**) と交差終点 (**cross end**) と呼ばれます。 +- 主軸 (**main axis**) は、フレックスアイテムが配置されている方向に走る軸です（例えば、ページを横切る行、またはページを縦に走る列として）。この軸の始点と終点は、主始点 (**main start**) および主終点 (**main end**) と呼ばれます。主始点から主終点までの長さは主軸長 (**main size**) です。 +- 交差軸 (**cross axis**) は、フレックスアイテムが配置されている方向に対して垂直に走る軸です。 この軸の始点と終点は、交差始点 (**cross start**) と交差終点 (**cross end**) と呼ばれます。交差始点から交差終点までの長さは交差長 (**corss size**) と呼ばれます。 - `display: flex` が設定されている親要素（この例では {{htmlelement("section")}}）は、フレックスコンテナー (**flex container**) と呼ばれます。 - フレックスコンテナー内の柔軟な箱としてレイアウトされているアイテムは、フレックスアイテム (**flex item**) と呼ばれます（この例では {{htmlelement("article")}} 要素）。 @@ -103,9 +101,9 @@ flex-direction: column; レイアウトの幅や高さが決まっているときに発生する問題の 1 つは、最終的にはフレックスボックスの子がコンテナーをはみ出してレイアウトが壊れることです。 [flexbox-wrap0.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/flexbox/flexbox-wrap0.html) の例を見て、それを[ライブで見て](https://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html)みてください（この例に沿って進めたい場合は、このファイルのローカルコピーを取ってください）。 -![サンプルのフレックスボックスの例では、すべてのフレックスアイテムがフレックスコンテナーの単一の行にレイアウトされています。8 つ目のフレックスアイテムはブラウザーウィンドウからはみ出し、ページには水平方向と垂直方向のスクロールバーが表示されますが、これは前の 7 つのフレックスアイテムがビューポート内で使用できる空間を占めているため、ウィンドウ幅に収まらないためです。既定値では、ブラウザーは、 flex-direction を row に設定した場合はすべてのフレックスアイテムを単一の行に、 column に設定した場合は単一の列に配置しようとします。](flexbox-example3.png) +![サンプルのフレックスボックスの例では、すべてのフレックスアイテムがフレックスコンテナーの単一の行にレイアウトされています。8 つ目のフレックスアイテムはブラウザーウィンドウからはみ出し、ページには水平方向と垂直方向のスクロールバーが表示されますが、これは前の 7 つのフレックスアイテムがビューポート内で使用できる空間を占めているため、ウィンドウ幅に収まらないためです。](flexbox-example3.png) -ここでは、子要素が実際にコンテナーからはみ出してることがわかります。これを修正させる一つの方法は、 {{htmlelement("section")}} ルールに以下のような宣言を追加することです。 +ここでは、子要素が実際にコンテナーからはみ出してることがわかります。ブラウザーは既定では、`flex-direction` が `row` に設定されている場合はすべてのフレックスアイテムを単一の行に、`flex-direction` が `column` に設定されている場合は単一の列に配置しようとします。これを修正する一つの方法は、{{htmlelement("section")}} ルールに以下のような宣言を追加することです。 ```css flex-wrap: wrap; @@ -121,7 +119,7 @@ flex: 200px; ![フレックスアイテムは、フレックスコンテナー内に複数列でレイアウトされます。フレックスコンテナーでは flex-wrap プロパティが 'wrap' に設定されており、前の行のフレックスアイテムがフレックスコンテナーからはみ出した場合、新しい行にフレックスアイテムが表示されます。各フレックスアイテムには 200 ピクセルの幅が指定されました。すべての項目は同じ高さになるように伸張され、最も多くの内容を含むフレックス項目の高さと同じになります。](flexbox-example4.png) -現在、複数の行があります — 多くのフレックスボックスの子が各行に納められているので、オーバーフローは次のラインに移動します。 `article` に設定した `flex: 200px` の宣言は、それぞれが少なくとも 200px 幅になることを意味します。 このプロパティについては後で詳しく説明します。 また、最後の行の最後の数個の子がそれぞれ幅広になっているので、依然として行全体がいっぱいになっていることに気付くかもしれません。 +現在、複数の行があります — 多くのフレックスボックスの子が各行に納められているので、オーバーフローは次のラインに移動します。 `article` に設定した `flex: 200px` の宣言は、それぞれが少なくとも `200px` 幅になることを意味します。 このプロパティについては後で詳しく説明します。 また、最後の行の最後の数個の子がそれぞれ幅広になっているので、依然として行全体がいっぱいになっていることに気付くかもしれません。 しかし、ここでできることは他にもあります。 まず最初に、 {{cssxref("flex-direction")}} プロパティの値を `row-reverse` に変更してみてください。 これで、まだ複数行のレイアウトがあることがわかりますが、ブラウザーウィンドウの反対側の隅から開始して逆方向に流れます。 @@ -142,7 +140,7 @@ flex-flow: row wrap; ## フレックスアイテムの柔軟なサイズ変更 -それでは、最初の例に戻って、フレックスアイテムの占めるスペースの割合を制御する方法を見てみましょう。 ローカルコピーの [flexbox0.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/flexbox/flexbox0.html) を起動するか、新しい出発点として [flexbox1.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/flexbox/flexbox1.html) のコピーを入手してください（[ライブで見る](https://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html)）。 +それでは、最初の例に戻って、フレックスアイテムの占めるスペースの割合を制御する方法を見てみましょう。 ローカルコピーの [flexbox0.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/flexbox/flexbox0.html) を開くか、新しい出発点として [flexbox1.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/flexbox/flexbox1.html) のコピーを入手してください（[ライブで見る](https://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html)）。 まず、CSS の一番下に次のルールを追加します。 @@ -152,7 +150,7 @@ article { } ``` -これは、各フレックスアイテムが主軸に沿って使用可能なスペースのうちどれだけを占めるかを決定する、無単位の割合値です。 この場合、各 {{htmlelement("article")}} 要素に 1 の値を与えています。 つまり、パディングやマージンなどを設定した後の残りの予備スペースのうちから、すべてが同じ量を占めます。 これは割合であり、各フレックスアイテムに 400000 の値を指定してもまったく同じ効果があることを意味します。 +これは、各フレックスアイテムが主軸に沿って使用可能な空間のうちどれだけを占めるかを決定する、無単位の割合値です。 この場合、それぞれの {{htmlelement("article")}} 要素に同じ値（`1` の値）を与えています。 つまり、パディングやマージンなどを設定した後の残りの予備スペースのうちから、すべてが同じ量を占めます。これは割合であり、各フレックスアイテムに `400000` の値を指定してもまったく同じ効果があることを意味します。 それでは、前のルールの下に次のルールを追加します。 @@ -176,9 +174,11 @@ article:nth-of-type(3) { } ``` -これは基本的に「各フレックスアイテムには最初に 200px の使用可能なスペースが与えられます。 その後、残りの使用可能なスペースは割合単位に従って共有されます。」と述べています。 更新してみると、スペースの共有方法に違いが見られます。 +これは基本的に「各フレックスアイテムには最初に `200px` の使用可能な空間が与えられます。 その後、残りの使用可能な空間は割合単位に従って共有されます。」と述べています。 更新してみると、空間の共有方法に違いが見られます。 + +![3 つのフレックスアイテムを持つフレックスコンテナー。3 つ目のフレックスアイテムは最初の 2 つよりも少し大きくなっています。](flexbox-example1.png) -![Sample flexbox の例のフレックスコンテナーには、3 つのフレックスアイテムが保有されています。すべてのフレックスアイテムの最小幅は 200 ピクセルであり、 'flex' を使用して設定されています。最初の 2 つのフレックスアイテムのフレックス値は 1、3 番目のアイテムのフレックス値は 2 です。これにより、フレックスコンテナー内の残りの空間が 4 つの割合の単位に分割されます。最初の 2 つのフレックスアイテムに 1 単位、 3 番目のフレックスアイテムに 2 単位が割り当てられ、 3 番目のフレックスアイテムの幅は、同じ幅の他の 2 つのアイテムよりも広くなります。](flexbox-example1.png) +すべてのフレックスアイテムの最小幅は 200 ピクセルで、'flex' を使用して設定されています。最初の 2 つのフレックスアイテムの flex の値は 1 で、3 つ目のアイテムは 2 です。これはフレックスコンテナーの残りの空間を 4 等分に分割します。最初の 2 つのフレックスアイテムにはそれぞれ 1 単位、3 つ目のフレックスアイテムには 2 単位が割り当てられており、3 つ目のフレックスアイテムの幅は、同じ幅の他の 2 種類よりも広くなっています。 フレックスボックスの真の価値は、その柔軟性/応答性に見ることができます。ブラウザーウィンドウのサイズを変更したり、別の {{htmlelement("article")}} 要素を追加したりしても、レイアウトは問題なく機能します。 @@ -196,7 +196,7 @@ article:nth-of-type(3) { フレックスボックスの機能を使用して、主軸または交差軸に沿ってフレックスアイテムを整列させることもできます。 新しい例である [flex-align0.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/flexbox/flex-align0.html) を見て（[ライブも見る](https://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html)）、これを調べてみましょう。 これは、きちんとした柔軟なボタン/ツールバーに変わります。 現時点では、いくつかのボタンが左上隅に詰まった水平のメニューバーが表示されます。 -![Smile、Laugh、Wink、Shrug、Blushとラベル付けされた 5 つのボタンが、フレックスコンテナの中にずらりと並んでいます。ボタンは左上にぎっしり詰まっていて、見ていてすっきりしません。](flexbox-example5.png) +![5 つのボタンが、フレックスコンテナーの中に並んでいます。ボタンは左上にぎっしり詰まっていて、見ていてすっきりしません。](flexbox-example5.png) まず、この例のローカルコピーを取ります。 @@ -210,15 +210,15 @@ div { } ``` -![Smile, Laugh, Wink, Shrug & Blush というラベルを持つ 5 つのボタンが、フレックスコンテナーの中に一列に並べられています。 align-items プロパティを center に設定することで、フレックスアイテムは交差軸の中心に配置されています。 justify-content プロパティを space-around に設定すると、フレックスアイテムは主軸に沿って等間隔に配置されます。](flexbox_center_space-around.png) +![フレックスコンテナーに 5 つのボタンが並んでいます。フレックスアイテムは上下中央に、左右には等間隔に位置指定されています。](flexbox_center_space-around.png) -ページを更新すると、ボタンが横方向と縦方向に中央揃えになっていることがわかります。 これを 2 つの新しいプロパティを介して行いました。 +ページを更新すると、ボタンが横方向と縦方向に中央揃えになっていることがわかります。 これを 2 つの新しいプロパティを介して行いました。フレックスアイテムは `align-items` プロパティを `center` に設定することで、交差軸の中心に配置されます。`justify-content` プロパティを `space-around` に 設定することで、フレックスアイテムは主軸に沿って等間隔に配置されます。 -{{cssxref("align-items")}} は、フレックスアイテムが交差軸上のどこに配置されるかを制御します。 +{{cssxref("align-items")}} プロパティは、フレックスアイテムが交差軸上のどこに配置されるかを制御します。 -- 既定では、この値は `stretch` です。 これは、すべてのフレックスアイテムを交差軸の方向に親を埋めるように引き伸ばします。 親が交差軸方向に固定幅を持っていない場合、すべてのフレックスアイテムは最長のフレックスアイテムと同じ長さになります。 これが最初の例が既定で同じ高さの列を得た方法です。 -- 上記のコードで使用した `center` の値により、アイテムは固有の寸法を維持しますが、交差軸の中心に配置されます。 これが、この例のボタンが縦方向に中央揃えされている理由です。 -- `flex-start` や `flex-end` のような値を持つこともできます。 これは、すべてのアイテムをそれぞれ交差軸の始点や終点に揃えます。 詳細については {{cssxref("align-items")}} を参照してください。 +- 既定では、この値は `normal` であり、フレックスボックスでは `stretch` として動作します。これは、すべてのフレックスアイテムを親を埋めるように交差軸方向に引き伸ばします。 親が交差軸方向に固定サイズを持っていない場合、すべてのフレックスアイテムが最長のフレックスアイテムと同じ長さになります。 これが最初の例が既定で同じ高さの列を得た方法です。 +- 上記のコードで使用した `center` の値により、アイテムは固有の寸法を維持しますが、交差軸の中心に配置されます。 これが、この例のボタンが縦方向に中央揃えされている理由です。これが、最初の例で既定では同じ高さの列になった理由です。 +- `flex-start`、`self-start`、`start`、`flex-end`、`self-end`、`end` のような値を指定することもでき、それぞれすべてのアイテムを交差軸の先頭と末尾に配置します。`baseeline` を指定すると、フレックスアイテムのベースラインを揃えます。基本的に、各フレックスアイテムの交差始点とベースラインの間の距離が最も大きい要素の最初の行の下端に並べられます。詳細は {{cssxref("align-items")}} を参照してください。 {{cssxref("align-self")}} プロパティを適用することで、個々のフレックスアイテムの {{cssxref("align-items")}} のふるまいを上書きできます。 例えば、CSS に次のコードを追加してみてください。 @@ -228,17 +228,18 @@ button:first-child { } ``` -![Smile, Laugh, Wink, Shrug, Blush というラベルを持つ 5 つのボタンが、フレックスコンテナーの中に一列に並べられています。最初のものを除くすべてのフレックスアイテムは、 align-items プロパティを center に設定することで、交差軸の中心、つまり垂直方向の中心に配置されています。最初のアイテムは、 align-self プロパティを flex-end に設定して、フレックスコンテナーの底面、交差軸の端に面一に配置されています。フレックスコンテナーのアイテムは、コンテナーの主軸（幅）に沿って等間隔に配置されます。](flexbox_first-child_flex-end.png) +![5 つのボタンが、フレックスコンテナーの中に一列に並べられています。最初のものを除くすべてのフレックスアイテムは、交差軸の中心、つまり上下中央に配置されています。最初のアイテムは、フレックスコンテナーの下端、交差軸の端に詰めて配置されています。フレックスコンテナーのアイテムは、コンテナーの主軸（幅）に沿って等間隔に配置されます。](flexbox_first-child_flex-end.png) これがどのような影響を与えるのかを見て、終了したらもう一度削除します。 {{cssxref("justify-content")}} は、フレックスアイテムが主軸上のどこに配置されるかを制御します。 -- 既定値は `flex-start` です。 これにより、すべてのアイテムが主軸の始点に配置されます。 -- それらを終点に配置させるために `flex-end` を使うことができます。 -- `center` は `justify-content` のための値でもあり、フレックスアイテムを主軸の中心に配置します。 -- 上記で使用した値、`space-around` は便利です。 両端に少しのスペースを残して、すべてのアイテムを主軸に沿って均等に配置します。 -- もう 1 つの値、`space-between` があります。 これは、両端にスペースを残さないという点を除けば、`space-around` にってもよく似ています。 +- 既定値は `normal` であり、`start` として動作します。 これにより、すべてのアイテムが主軸の先頭に配置されます。 +- `end` または `flex-end` を使うことで、それらを末尾に配置することができます。 +- `left` および `right` の値は、書字方向に応じて `start` または `end` として動作します。 +- `center` は `justify-content` のための値でもあり、フレックスアイテムを主軸方向の中央に配置します。 +- 上記で使用した値、`space-around` は便利です。 両端に少しの空間を残して、すべてのアイテムを主軸に沿って均等に配置します。 +- もう 1 つの値、`space-between` があります。 これは、両端に空間を残さないという点を除けば、`space-around` にとてもよく似ています。 [`justify-items`](/ja/docs/Web/CSS/justify-items) プロパティはフレックスボックスレイアウトでは無視されます。 @@ -248,7 +249,7 @@ button:first-child { フレックスボックスには、ソース順に影響を与えずにフレックスアイテムのレイアウトの順序を変更する機能もあります。 これも従来のレイアウト方法では不可能なことです。 -このコードは簡単です。 ボタンバーのサンプルコードに次の CSS を追加してみてください。 +ボタンバーのサンプルコードに次の CSS を追加してみてください。 ```css button:first-child { @@ -258,12 +259,12 @@ button:first-child { 更新すると、 "Smile" ボタンが主軸の終点に移動したことがわかります。 これがどのように機能するかについてもう少し詳しく説明しましょう。 -- 既定では、すべてのフレックスアイテムの {{cssxref("order")}} の値は 0 です。 -- 大きな `order` の値が設定されているフレックスアイテムは、小さな `order` の値を持つアイテムよりも表示順序の後半に表示されます。 -- 同じ `order` の値を持つフレックスアイテムは、ソース順で表示されます。 そのため、2、1、1、0 の `order` の値がそれぞれ設定された 4 つのアイテムがある場合、それらの表示順序は 4、2、3、1 となります。 -- 3 番目のアイテムは 2 番目の後に表示されます。 これは、同じ `order` の値を持ち、ソース順でそれより後にあるためです。 +- 既定では、すべてのフレックスアイテムの {{cssxref("order")}} の値は `0` です。 +- 指定された順序の値 (order) が大きいフレックスアイテムの表示順序は、順序の値が小さいアイテムよりも後に表示されます。 +- 順序の値が同じフレックスアイテムは、ソース順で表示されます。そのため、4 つのアイテムがあり、順序の値がそれぞれ `2`、`1`、`1`、`0` と設定されていた場合、表示順序は 4 番目、2 番目、3 番目、1 番目となります。 +- 3 番目のアイテムは 2 番目の後に表示されます。 これは、順序の値が同じであり、ソース順でそれより後にあるためです。 -負の `order` の値を設定して、0 が設定されているアイテムよりも早くアイテムを表示することができます。 例えば、次のルールを使用して、\[Blush] ボタンを主軸の始点に表示させることができます。 +順序に負の値を設定すると、`0` が設定されているアイテムよりも早くアイテムを表示することができます。 例えば、次のルールを使用して、"Blush" ボタンを主軸の始点に表示させることができます。 ```css button:last-child { @@ -271,13 +272,15 @@ button:last-child { } ``` +`order` を使用して順番を変更することができますが、タブの順番はコード順のままです。フォーカス可能な要素の順序を変更すると、キーボードユーザーのユーザビリティに悪影響を与える可能性があります！ + ## ネストしたフレックスボックス フレックスボックスを使ってかなり複雑なレイアウトを作成することは可能です。 フレックスアイテムをフレックスコンテナーとしても設定して、その子も柔軟な箱のようにレイアウトできるようにしてもまったく問題ありません。 [complex-flexbox.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/flexbox/complex-flexbox.html) を見てください（[ライブも見る](https://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html)）。 -![サンプルフレックスボックスの例では、 3 つのフレックスアイテムの子を並べて保有しています。最初の 2 人は同じ幅で、3 人目は少し広くなっています。 3 つ目のフレックスアイテムはフレックスコンテナーでもあります。これには、 2 列に並んだボタンのセットと、それに続くテキストがあります。最初の行には 4 つのボタンがあり、一列に並んでいます。ボタンは同じ幅で、コンテナーの幅いっぱいに保有されています。 2 つ目の行には、単一のボタンがあり、それ自体で行の幅をすべて保有しています。このように、フレックスアイテムがいくつかある複雑なレイアウトは、フレックスコンテナーとして扱われます。](flexbox-example7.png) +![サンプルフレックスボックスの例では、 3 つのフレックスアイテムの子を並べて保有しています。最初の 2 人は同じ幅で、3 人目は少し広くなっています。 3 つ目のフレックスアイテムはフレックスコンテナーでもあります。これには、 2 列に並んだボタンのセットと、それに続くテキストがあります。最初の行には 4 つのボタンがあり、一列に並んでいます。ボタンは同じ幅で、コンテナーの幅いっぱいに保有されています。 2 つ目の行には、単一のボタンがあり、それ自体で行の幅をすべて保有しています。](flexbox-example7.png) -このための HTML はかなり単純です。 3 つの {{htmlelement("article")}} を含む {{htmlelement("section")}} 要素があります。 3 番目の {{htmlelement("article")}} には 3 つの {{htmlelement("div")}} が含まれています。 +このように、フレックスアイテムがいくつかある複雑なレイアウトは、フレックスコンテナーとして扱われます。このための HTML はかなり素直です。 3 つの {{htmlelement("article")}} を含む {{htmlelement("section")}} 要素があります。 3 番目の {{htmlelement("article")}} には 3 つの {{htmlelement("div")}} が含まれています。 ```plain section - article @@ -313,7 +316,7 @@ article:nth-of-type(3) { } ``` -次に、最初の {{htmlelement("div")}} を選択します。 最初に `flex: 1 100px;` を使用して効果的にそれの最小の高さを 100px にしてから、その子（{{htmlelement("button")}} 要素）もフレックスアイテムのように配置されるように設定します。 ここでそれらをラッピングする行にレイアウトし、先ほど見た個々のボタンの例で行ったように、それらを使用可能なスペースの中央に配置します。 +次に、最初の {{htmlelement("div")}} を選択します。 最初に `flex: 1 100px;` を使用して効果的にそれの最小の高さを `100px` にしてから、その子（{{htmlelement("button")}} 要素）もフレックスアイテムのように配置されるように設定します。 ここでそれらをラッピングする行にレイアウトし、先ほど見た個々のボタンの例で行ったように、それらを使用可能なスペースの中央に配置します。 ```css article:nth-of-type(3) div:first-child { @@ -325,7 +328,7 @@ article:nth-of-type(3) div:first-child { } ``` -最後に、ボタンにサイズを設定します。今回は、 flex 値として 1 auto を指定しました。これはとても興味深い効果があり、ブラウザーのウィンドウ幅を変更してみるとわかります。ボタンはできるだけ多くの空間を占有しようとします。できる限り同じ行に配置しようとしますが、それを超えると新しい行に移動します。 +最後に、ボタンにサイズを設定します。今回は、 flex 値として `1 auto` を指定しました。これはとても興味深い効果があり、ブラウザーのウィンドウ幅を変更してみるとわかります。ボタンはできるだけ多くの空間を占有しようとします。できる限り同じ行に配置しようとしますが、それを超えると新しい行に移動します。 ```css button { @@ -342,11 +345,16 @@ button { ## まとめ -これで、フレックスボックスの基本についてのツアーは終了です。 私たちはあなたが楽しみを持って、学習と共に前進するにつれてそれと一緒に良い遊びがあることを願っています。 次に、CSS レイアウトのもう 1 つの重要な側面、CSS グリッドについて見ていきます。 +以上でフレックスボックスの基本についての解説を終わります。これから学習を進めていく中で、フレックスボックスで楽しく遊んでいただけることを期待しています。次は、CSS レイアウトのもう 1 つの重要な側面を見ていきましょう。[CSS グリッド](/ja/docs/Learn/CSS/CSS_layout/Grids)です。 ## 関連情報 -- [CSS-Tricks Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) — フレックスボックスのすべてを視覚的にわかりやすく説明した記事です。 +- [フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [フレックスコンテナー内のアイテムの配置](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) +- [フレックスアイテムの順序](/ja/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items) +- [主軸方向のフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis) +- [CSS フレックスボックスレイアウト](/ja/docs/Web/CSS/CSS_flexible_box_layout)モジュール +- [CSS-Tricks guide to flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) — フレックスボックスのすべてを視覚的にわかりやすく説明した記事です。 - [Flexbox Froggy](https://flexboxfroggy.com/) — フレックスボックスの基本を学び、理解を深めるための教育ゲームです。 {{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}} diff --git a/files/ja/learn/css/css_layout/multiple-column_layout/index.md b/files/ja/learn/css/css_layout/multiple-column_layout/index.md index 5f0db9ec84434e..e5cf3b64309ebc 100644 --- a/files/ja/learn/css/css_layout/multiple-column_layout/index.md +++ b/files/ja/learn/css/css_layout/multiple-column_layout/index.md @@ -372,7 +372,9 @@ body { } ``` -{{ EmbedLiveSample('Fragmented_boxes', '100%', 1000) }} +{{ EmbedLiveSample('断片化されたボックス', '100%', 1000) }} + +### break-inside の設定 このふるまいを制御するために、[CSS 断片化](/ja/docs/Web/CSS/CSS_fragmentation)の仕様のプロパティを使用できます。 この仕様は、段組みとページ付きメディアでのコンテンツの分割を制御するためのプロパティを提供します。 例えば、 {{cssxref("break-inside")}} を `avoid` の値で `.card` のルールに追加することができます。これは見出しとテキストの断片化したくないコンテナーとなります。 @@ -487,7 +489,7 @@ body { } ``` -{{ EmbedLiveSample('Setting_break-inside', '100%', 1100) }} +{{ EmbedLiveSample('break-inside_の設定', '100%', 1100) }} ## スキルテスト diff --git a/files/ja/learn/css/css_layout/practical_positioning_examples/index.md b/files/ja/learn/css/css_layout/practical_positioning_examples/index.md index e931b05485e268..8e644d93c6e63b 100644 --- a/files/ja/learn/css/css_layout/practical_positioning_examples/index.md +++ b/files/ja/learn/css/css_layout/practical_positioning_examples/index.md @@ -2,7 +2,7 @@ title: 実践的な位置指定の例 slug: Learn/CSS/CSS_layout/Practical_positioning_examples l10n: - sourceCommit: 39732dd1621b6bfbddfc6ef8b35a4fefed4d14b3 + sourceCommit: b586b019eda9a3947f169381ce9ffb80747aa98a --- {{LearnSidebar}} @@ -382,7 +382,7 @@ input[type="checkbox"] { - アイコンを見やすく大きくするには、大きい {{cssxref("font-size")}} を設定します。 - それに {{cssxref("position")}}`: absolute` を設定し、それを右上隅にうまく配置するために {{cssxref("top")}} と {{cssxref("right")}} を使用しました。 - それに 1 の {{cssxref("z-index")}} を設定します — これは、情報パネルがスタイル設定されて表示されるときに、アイコンが隠れないようにし、アイコンがその上に表示されるので、もう一度押すと情報パネルを非表示にできます。 -- アイコンが何か面白いことをしていることをユーザーに視覚的に知らせるために、{{cssxref("cursor")}} のプロパティを使用して、マウスポインタをアイコン上に移動したときにマウスポインタをハンドポインタに変更します（リンク上にあるときに表示されるもののように）。 +- アイコンが何か面白いことをしていることをユーザーに視覚的に知らせるために、{{cssxref("cursor")}} のプロパティを使用して、マウスポインターをアイコン上に移動したときにマウスポインターをハンドポインターに変更します（リンク上にあるときに表示されるもののように）。 2 番目の規則は、実際のチェックボックスの `` 要素に {{cssxref("position")}}`: absolute` を設定し、それを画面上部の範囲外に離すことで隠します。 実際の UI でこれを見たくありません。 @@ -427,7 +427,7 @@ input[type="checkbox"]:checked + aside { セレクターはここではかなり複雑です — 私たちは `` 要素に隣接する `
``` ```js hidden -var htmlInput = document.querySelector(".html-input"); -var cssInput = document.querySelector(".css-input"); -var reset = document.getElementById("reset"); -var htmlCode = htmlInput.value; -var cssCode = cssInput.value; -var output = document.querySelector(".output"); -var solution = document.getElementById("solution"); - -var styleElem = document.createElement("style"); -var headElem = document.querySelector("head"); +const htmlInput = document.querySelector(".html-input"); +const cssInput = document.querySelector(".css-input"); +const reset = document.getElementById("reset"); +const htmlCode = htmlInput.value; +const cssCode = cssInput.value; +const output = document.querySelector(".output"); +const solution = document.getElementById("solution"); + +const styleElem = document.createElement("style"); +const headElem = document.querySelector("head"); headElem.appendChild(styleElem); function drawOutput() { @@ -268,16 +282,48 @@ function drawOutput() { styleElem.textContent = cssInput.value; } -reset.addEventListener("click", function () { +reset.addEventListener("click", () => { htmlInput.value = htmlCode; cssInput.value = cssCode; drawOutput(); }); -solution.addEventListener("click", function () { +solution.addEventListener("click", () => { htmlInput.value = htmlCode; - cssInput.value = - "p {\n font-size: 1.2rem;\n font-family: sans-serif;\n line-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #265301;\n}\n\na:visited {\n color: #437A16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #BAE498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #CDFEAA;\n}\n\na:active {\n background: #265301;\n color: #CDFEAA;\n}"; + cssInput.value = `p { + font-size: 1.2rem; + font-family: sans-serif; + line-height: 1.4; +} + +a { + outline-color: transparent; + text-decoration: none; + padding: 2px 1px 0; +} + +a:link { + color: #265301; +} + +a:visited { + color: #437A16; +} + +a:focus { + border-bottom: 1px solid; + background: #BAE498; +} + +a:hover { + border-bottom: 1px solid; + background: #CDFEAA; +} + +a:active { + background: #265301; + color: #CDFEAA; +}`; drawOutput(); }); @@ -286,19 +332,17 @@ cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput); ``` -{{ EmbedLiveSample('Playable_code', 700, 800) }} +{{ EmbedLiveSample('Active_learning_Style_your_own_links', 700, 800) }} ## リンクにアイコンを含める -一般的なやり方は、リンクがどの種類のコンテンツを指しているかに関するより多くの標識を提供するためにリンクにアイコンを含めることです。 外部リンク（他のサイトにつながるリンク）にアイコンを追加する、本当に簡単な例を見てみましょう。 このようなアイコンは、通常、ボックスから出る小さな矢印のように見えます — この例では、[icons8.com からの素晴らしい例](https://icons8.jp/icon/741/external-link)を使います。 +リンクにアイコンを表記することで、リンク先がどのようなコンテンツであるかをより分かりやすく提供するのが一般的です。実に単純な例ですが、外部リンク（他のサイトにつながるリンク）にアイコンを追加する例を見てみましょう。このようなアイコンは、通常、箱から小さな矢印が出ているように見えます。この例では、[icons8.com からの外部リンクアイコン](https://icons8.jp/icon/741/external-link)を使用します。 -欲しい効果が得られる HTML と CSS を見てみましょう。 まず、装飾する簡単な HTML です。 +欲しい効果が得られる HTML と CSS を見てみましょう。 まず、スタイル設定する簡単な HTML です。 -```html +```html-nolint

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

``` @@ -311,70 +355,46 @@ body { font-family: sans-serif; } -p { - line-height: 1.4; -} - -a { - outline: none; - text-decoration: none; - padding: 2px 1px 0; -} - -a:link { - color: blue; -} - -a:visited { - color: purple; -} - -a:focus, -a:hover { - border-bottom: 1px solid; -} - -a:active { - color: red; -} +a[href^="http"]::after { + content: ""; + display: inline-block; + width: 0.8em; + height: 0.8em; + margin-left: 0.25em; -a[href*="http"] { - background: url("external-link-52.png") no-repeat 100% 0; - background-size: 16px 16px; - padding-right: 19px; + background-size: 100%; + background-image: url("external-link-52.png"); } ``` {{ EmbedLiveSample('Including_icons_on_links', '100%', 150) }} -それでは、ここで何が起こっているのでしょうか？ これまで見てきたのと同じ情報なので、CSS の大部分はスキップします。 しかし最後の規則は興味深いです — ここでは前回の記事の[リストアイテムのカスタム行頭記号](/ja/docs/Learn/CSS/Styling_text/Styling_lists#Using_a_custom_bullet_image)を処理したのと同じ方法で外部リンクにカスタム背景画像を挿入しています — 今回は個々のプロパティの代わりに {{cssxref("background")}} の一括指定を使用します。 挿入したい画像へのパスを設定し、`no-repeat` を指定してコピーを 1 つだけ挿入するようにしてから、テキストコンテンツの右側へ 100%、上から 0 ピクセルの位置を指定します。 - -また、{{cssxref("background-size")}} を使用して、背景画像を表示するサイズを指定します。 レスポンシブウェブデザインの目的に合わせて、アイコンを大きくしておいて、このようにサイズを変更すると便利です。 ただし、これは IE 9 以降でのみ機能するため、これらの古いブラウザーをサポートする必要がある場合は、画像のサイズを変更しておいて、それをそのまま挿入する必要があります。 +それでは、ここで何が起こっているのでしょうか？ これまで見てきたのと同じ情報なので、CSS の大部分はスキップします。 しかし最後のルールは興味深いもので、{{cssxref("::after")}} 擬似要素を使用しています。`0.8rem x 0.8rem` の擬似要素が、アンカーテキストの後にインライングロックとして置かれています。アイコンは擬似要素の {{cssxref("background")}} として描画されます。 -最後に、背景画像を表示するスペースを確保するためにリンクに {{cssxref("padding-right")}} を設定しているので、テキストと重なっていません。 +ここでは[相対的な単位](/ja/docs/Learn/CSS/Building_blocks/Values_and_units#相対長の単位)である `em` を使用しています。アイコンのサイズはアンカーのテキストサイズに比例します。アンカーのテキストサイズが変更された場合、アイコンのサイズもそれに応じて調整されます。 -最後の一言 — どのように外部リンクだけを選択したのでしょうか？ あなたが[HTML リンク](/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks)を適切に記述しているのなら、外部リンクには絶対 URL のみを使用しているはずです — 自分のサイトの他の部分にリンクするには（最初のリンクのように）相対リンクを使用するほうが効率的です。 したがって、テキスト "http" は（2 番目と 3 番目のリンクのように）外部リンクにのみ現れ、これを[属性セレクタ](/ja/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors)で選択できます。 `a[href*="http"]` は {{htmlelement("a")}} 要素を選択しますが、"http" を含む値を持つ [`href`](/ja/docs/Web/HTML/Element/a#href) 属性がある場合に限ります。 +最後の一言です。どのように外部リンクだけを選択したのでしょうか？ [HTML のリンク](/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks)を適切に記述しているのなら、絶対 URL を使用しているのは外部リンクだけであるはずです。自分のサイトの他の部分にリンクするには（最初のリンクのように）相対リンクを使用したほうが効率的です。"http" というテキストは（2 番目と 3 番目のリンクのように）外部リンクにのみ現れるので、これを[属性セレクター](/ja/docs/Learn/CSS/Building_blocks/Selectors#属性セレクター)で選択できます。`a[href^="http"]` は {{htmlelement("a")}} 要素のうち、[`href`](/ja/docs/Web/HTML/Element/a#href) 属性が "http" で始まるものに限り選択します。 -それでは、これで全部です — 上の能動的学習セクションを再検討して、この新しいテクニックを試してみてください！ +以上です。上のアクティブラーニングの節を再検討して、この新しいテクニックを試してみてください！ -> **メモ:** [背景](/ja/docs/Learn/CSS/Styling_boxes)や[レスポンシブウェブデザイン](/ja/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks)にまだ慣れていなくても心配しないでください。 これらは他の場所で説明されています。 +> **メモ:** [背景](/ja/docs/Learn/CSS/Building_blocks)や[レスポンシブウェブデザイン](/ja/docs/Learn/CSS/CSS_layout/Responsive_Design)にまだ慣れていなくても心配しないでください。 これらは他の場所で説明します。 -## ボタンとしてのリンクの装飾 +## リンクをボタンとしてスタイル設定 -この記事でこれまでに説明したツールは、他の方法でも使用できます。 例えば、ホバーのような状態は、リンクだけでなく、さまざまな要素を装飾するために使用できます — 段落、リスト項目、またはその他のもののホバー状態を装飾することができます。 +この記事でこれまで説明してきたツールは、他にも使用することができます。例えば、ホバーのような状態は、リンクだけでなく、多くの異なる要素をスタイル設定するために使用することができます。段落やリストアイテムなどのホバー状態をスタイル設定することができます。 -さらに、リンクは特定の状況下ではボタンのように見えて、そうふるまうように装飾されているのが普通です — ウェブサイトのナビゲーションメニューは通常リンクを含むリストとしてマークアップれており、ユーザーがサイトの他の部分にアクセスできるようにする一連のコントロールボタンやタブのように簡単にスタイル設定できます。 その方法を探りましょう。 +さらに、状況によっては、リンクはボタンのような外見になったり動作したりするようスタイル設定することが一般的です。ウェブサイトのナビゲーションメニューは、一連のリンクとしてマークアップすることができ、これはユーザーにサイトの他の一部へのアクセスを提供する一連のコントロールボタンやタブのように見えるようにスタイル設定することができます。それでは、その方法を探ってみましょう。 -まず、いくつかの HTML です。 +まず、いくらかの HTML です。 ```html - + ``` そして CSS です。 @@ -386,34 +406,25 @@ html { font-family: sans-serif; } -ul { - padding: 0; - width: 100%; -} - -li { - display: inline; +.container { + display: flex; + gap: 0.625%; } a { - outline: none; + flex: 1; text-decoration: none; - display: inline-block; - width: 19.5%; - margin-right: 0.625%; + outline-color: transparent; text-align: center; line-height: 3; color: black; } -li:last-child a { - margin-right: 0; -} - a:link, a:visited, a:focus { - background: yellow; + background: palegoldenrod; + color: black; } a:hover { @@ -421,36 +432,29 @@ a:hover { } a:active { - background: red; + background: darkred; color: white; } ``` これにより、次のような結果が得られます。 -{{ EmbedLiveSample('Styling_links_as_buttons', '100%', 100) }} - -最も興味深い部分に焦点を当てて、ここで何が起こっているのかを説明しましょう。 - -- 2 番目の規則は、{{htmlelement("ul")}} 要素からデフォルトの {{cssxref("padding")}} を削除し、その幅を外側のコンテナ（この場合は {{htmlelement("body")}}）の 100% になるように設定します。 -- {{htmlelement("li")}} 要素は通常デフォルトでブロックです（復習のために [CSS ボックスの種類](/ja/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes)を参照してください）。 つまり、要素はそれぞれ自身のラインに配置されます。 この場合、水平方向のリンクのリストを作成しているので、3 番目の規則で {{cssxref("display")}} プロパティを `inline` に設定します。 これにより、リスト項目は互いに同じラインに配置されます — それらはインライン要素のようにふるまいます。 -- {{htmlelement("a")}} 要素を装飾する 4 番目の規則は、ここで最も複雑です。 ステップバイステップで進みましょう。 - - - 前の例と同様に、デフォルトの {{cssxref("text-decoration")}} と {{cssxref("outline")}} をオフにすることから始めます — 見た目を損なうものは欲しくありません。 - - 次に、{{cssxref("display")}} を `inline-block` に設定します — {{htmlelement("a")}} 要素はデフォルトではインラインですが、ブロックのように、要素を自身のラインからこぼさずに、サイズを変更できるようにしたいのです。 `inline-block` はこれを可能にします。 - - これからサイズを設定します！ {{htmlelement("ul")}} の全幅を埋め、各ボタンの間には少しマージンを残して（ただし、右端には隙間はありません）、5 つのボタンを配置します。 それらはすべて同じサイズでなければなりません。 これを行うには、{{cssxref("width")}} を 19.5% に設定し、{{cssxref("margin-right")}} を 0.625% に設定します。この幅の合計が 100.625% になることに気付くでしょう。 これは最後のボタンが `
+ Enable translation +``` + +```js +const label = document.getElementById("translate-label"); +const element = document.getElementById("translate-element"); +const controller = document.getElementById("translate-controller"); + +controller.addEventListener("change", (e) => { + if (controller.checked) { + element.translate = true; + label.innerText = "The content may be translated:"; + } else { + element.translate = false; + label.innerText = "The content may not be translated:"; + } +}); +``` + +{{EmbedLiveSample('Examples', 600, 200)}} + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [`translate`](/ko/docs/Web/HTML/Global_attributes#translate) HTML 전역 특성 diff --git a/files/ko/web/api/htmllabelelement/form/index.md b/files/ko/web/api/htmllabelelement/form/index.md new file mode 100644 index 00000000000000..e5e513f0eb49fb --- /dev/null +++ b/files/ko/web/api/htmllabelelement/form/index.md @@ -0,0 +1,38 @@ +--- +title: "HTMLLabelElement: form 속성" +short-title: form +slug: Web/API/HTMLLabelElement/form +l10n: + sourceCommit: 595cba0e07c70eda7f08a12890e00ea0281933d3 +--- + +{{APIRef("HTML DOM")}} + +읽기 전용인 **`HTMLLabelElement.form`** 속성은 +라벨과 연관된 컨트롤이 속한 폼을 나타내는 {{domxref("HTMLFormElement")}} 객체를 반환하며, +만일 연관된 컨트롤이 없거나, +해당 컨트롤이 폼 내부에 존재하지 않는 경우에 null 을 반환합니다. + +이 속성은 `HTMLLabelElement.control.form` 의 단축 속성입니다. + +## 값 + +{{domxref("HTMLFormElement")}} 은 라벨의 +{{domxref("HTMLLabelElement.control", "control")}} 이 연관된 폼을 나타냅니다. 만일 +{{domxref("HTMLLabelElement.control", "control")}} 이 `null` (라벨이 컨트롤과 연관되지 않은 경우), +혹은 컨트롤이 폼 내부 요소가 아니라면 이 속성은 `null` 을 반환합니다. + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{domxref("HTMLLabelElement")}} +- {{domxref("HTMLElement")}} +- {{HTMLElement("label")}} +- [HTML 폼 안내서](/ko/docs/Learn/Forms) diff --git a/files/ko/web/api/htmllabelelement/htmlfor/index.md b/files/ko/web/api/htmllabelelement/htmlfor/index.md new file mode 100644 index 00000000000000..c59e74c34ad702 --- /dev/null +++ b/files/ko/web/api/htmllabelelement/htmlfor/index.md @@ -0,0 +1,37 @@ +--- +title: "HTMLLabelElement: htmlFor 속성" +short-title: htmlFor +slug: Web/API/HTMLLabelElement/htmlFor +l10n: + sourceCommit: 595cba0e07c70eda7f08a12890e00ea0281933d3 +--- + +{{APIRef("HTML DOM")}} + +**`HTMLLabelElement.htmlFor`** 속성은 +[`for`](/ko/docs/Web/HTML/Element/label#for) 컨텐츠 속성의 값을 반영하는 속성입니다. +이는 스크립트에 접근할 수 있는 해당 속성이 컨텐츠 속성 `for` 의 값을 설정하거나 읽을 수 있다는 것을 의미하며, +라벨과 연결된 컨트롤 요소의 ID 에 해당합니다. + +## 값 + +컨트롤과 연결된 요소의 ID 문자열을 포함하는 문자열입니다. + +> **참고:** 이 속성에 값이 있다면, {{domxref("HTMLLabelElement.control")}} 속성 또한 +> 동일한 컨트롤을 참조해야 합니다. + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{domxref("HTMLLabelElement")}} +- {{domxref("HTMLLabelElement.control")}} +- {{domxref("HTMLElement")}} +- {{HTMLElement("label")}} +- [HTML 폼 안내서](/ko/docs/Learn/Forms) diff --git a/files/ko/web/api/pushsubscriptionoptions/index.md b/files/ko/web/api/pushsubscriptionoptions/index.md new file mode 100644 index 00000000000000..0f4f2a34bd16f8 --- /dev/null +++ b/files/ko/web/api/pushsubscriptionoptions/index.md @@ -0,0 +1,41 @@ +--- +title: PushSubscriptionOptions +slug: Web/API/PushSubscriptionOptions +l10n: + sourceCommit: 3a91caa0ebbc5131ed75afe0e5168cd5bffc0976 +--- + +{{DefaultAPISidebar("Push API")}}{{SecureContext_Header}}{{AvailableInWorkers}} + +{{domxref('Push API','','',' ')}}의 **`PushSubscriptionOptions`** 인터페이스는 푸시 구독과 관련된 옵션을 나타냅니다. + +읽기 전용 `PushSubscriptionOptions` 객체는 {{domxref("PushSubscription")}}의 {{domxref("PushSubscription.options")}}를 호출하면 반환됩니다. +이 인터페이스는 자체 생성자가 없습니다. + +## 인스턴스 속성 + +- {{domxref("PushSubscriptionOptions.userVisibleOnly")}} {{ReadOnlyInline}} + - : 반환된 푸시 구독이 사용자에게 보이는 메시지에만 사용됨을 나타내는 불리언 값. +- {{domxref("PushSubscriptionOptions.applicationServerKey")}} {{ReadOnlyInline}} + - : 푸시 서버가 클라이언트 앱에 메시지를 보내는 데 사용할 공개키. + +## 예제 + +{{domxref("PushSubscription")}}의 {{domxref("PushSubscription.options")}}를 호출하면 `PushSubscriptionOptions` 객체를 반환합니다. 아래 예제에서는 이 객체를 콘솔에 출력합니다. + +```js +navigator.serviceWorker.ready.then((reg) => { + reg.pushManager.getSubscription().then((subscription) => { + const options = subscription.options; + console.log(options); // PushSubscriptionOptions 객체 + }); +}); +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} diff --git a/files/ko/web/css/_doublecolon_marker/index.md b/files/ko/web/css/_doublecolon_marker/index.md new file mode 100644 index 00000000000000..081d148a6664e2 --- /dev/null +++ b/files/ko/web/css/_doublecolon_marker/index.md @@ -0,0 +1,73 @@ +--- +title: "::marker" +slug: Web/CSS/::marker +l10n: + sourceCommit: 679f5893a4734fd136b80140e13262422d76b123 +--- + +{{CSSRef}} + +**`::marker`** [CSS](/ko/docs/Web/CSS) [의사 요소](/ko/docs/Web/CSS/Pseudo-elements)는 일반적으로 불릿 혹은 숫자를 포함하는 목록 요소의 마커 상자를 선택합니다. 이는 {{HTMLElement("li")}}와 {{HTMLElement("summary")}}처럼 [`display: list-item`](/ko/docs/Web/CSS/display)이 설정된 의사 요소나 일반 요소에서 동작합니다. + +{{EmbedInteractiveExample("pages/tabbed/pseudo-element-marker.html", "tabbed-shorter")}} + +## 허용되는 속성 + +`::marker` 의사 요소는 다음을 포함한 한정적인 수의 CSS 속성을 지원합니다. + +- 모든 [폰트 속성](/ko/docs/Web/CSS/CSS_fonts) +- {{CSSxRef("white-space")}} 속성 +- {{CSSxRef("color")}} +- {{CSSxRef("text-combine-upright")}}, {{CSSxRef("unicode-bidi")}}, 와 {{CSSxRef("direction")}} 속성 +- {{CSSxRef("content")}} 속성 +- 모든 [애니메이션](/ko/docs/Web/CSS/CSS_animations#properties) 과 [트랜지션](/ko/docs/Web/CSS/CSS_transitions#properties) 속성 + +> **참고:** 추가적인 CSS 속성에 대한 명세서가 추후 지원될 수 있습니다. + +## 구문 + +```css +::marker { + /* ... */ +} +``` + +## 예제 + +### HTML + +```html +
    +
  • 복숭아
    • +
  • 사과
    • +
  • 자두
    • +
+``` + +### CSS + +```css +ul li::marker { + color: red; + font-size: 1.5em; +} +``` + +### 결과 + +{{EmbedLiveSample('Examples')}} + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- 마커 박스를 기본적으로 가지고 있는 HTML 요소들: {{HTMLElement("ol")}}, {{HTMLElement("li")}}, {{HTMLElement("summary")}} +- [CSS 생성된 콘텐츠](/ko/docs/Web/CSS/CSS_generated_content) 모듈 +- [CSS 목록과 카운터](/ko/docs/Web/CSS/CSS_lists) 모듈 +- [CSS 카운터 스타일](/ko/docs/Web/CSS/CSS_counter_styles) 모듈 diff --git a/files/ko/web/css/_doublecolon_part/index.md b/files/ko/web/css/_doublecolon_part/index.md new file mode 100644 index 00000000000000..bea902276f17c9 --- /dev/null +++ b/files/ko/web/css/_doublecolon_part/index.md @@ -0,0 +1,114 @@ +--- +title: "::part()" +slug: Web/CSS/::part +l10n: + sourceCommit: 5863b9e6635b304b96ef5f70937329e854957f73 +--- + +{{CSSRef}} + +**`::part`** [CSS](/ko/docs/Web/CSS) [의사 요소](/ko/docs/Web/CSS/Pseudo-elements) 는 [shadow tree](/ko/docs/Web/API/Web_components/Using_shadow_DOM) 내에서 일치하는 [`part`](/ko/docs/Web/HTML/Global_attributes#part) 특성을 가진 모든 요소를 나타냅니다. + +```css +custom-element::part(foo) { + /* `foo` part 에 적용할 스타일 */ +} +``` + +## 구문 + +```css +::part(+) { + /* ... */ +} +``` + +## 예제 + +### HTML + +```html + + + +``` + +### CSS + +```css +tabbed-custom-element::part(tab) { + color: #0c0dcc; + border-bottom: transparent solid 2px; +} + +tabbed-custom-element::part(tab):hover { + background-color: #0c0d19; + color: #ffffff; + border-color: #0c0d33; +} + +tabbed-custom-element::part(tab):hover:active { + background-color: #0c0d33; + color: #ffffff; +} + +tabbed-custom-element::part(tab):focus { + box-shadow: + 0 0 0 1px #0a84ff inset, + 0 0 0 1px #0a84ff, + 0 0 0 4px rgb(10 132 255 / 30%); +} + +tabbed-custom-element::part(active) { + color: #0060df; + border-color: #0a84ff !important; +} +``` + +### JavaScript + +```js +let template = document.querySelector("#tabbed-custom-element"); +globalThis.customElements.define( + template.id, + class extends HTMLElement { + constructor() { + super().attachShadow({ mode: "open" }).append(template.content); + } + }, +); +``` + +### 결과 + +{{EmbedLiveSample('Examples')}} + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [`part`](/ko/docs/Web/HTML/Global_attributes#part) 특성 +- {{CSSxRef(":state",":state()")}} 의사 클래스 함수 +- [`exportparts`](/ko/docs/Web/HTML/Global_attributes#exportparts) 특성 +- [CSS shadow parts](/ko/docs/Web/CSS/CSS_shadow_parts) 모듈 diff --git a/files/ko/web/css/_doublecolon_selection/index.md b/files/ko/web/css/_doublecolon_selection/index.md new file mode 100644 index 00000000000000..7f3d595998279b --- /dev/null +++ b/files/ko/web/css/_doublecolon_selection/index.md @@ -0,0 +1,97 @@ +--- +title: "::selection" +slug: Web/CSS/::selection +l10n: + sourceCommit: 5fea7c9593f5e4b4ef13ec65064acf1eabf01e4e +--- + +{{CSSRef}} + +**`::selection`** CSS [의사 요소](/ko/docs/Web/CSS/Pseudo-elements)는 (클릭이나 마우스 드래그처럼) 사용자에 의해 하이라이트된 문서의 일부분에 스타일을 적용합니다. + +{{EmbedInteractiveExample("pages/tabbed/pseudo-element-selection.html", "tabbed-shorter")}} + +## 혀용되는 속성 + +몇 개의 특정한 CSS 속성만이 `::selection` 과 함께 사용될 수 있습니다. + +- {{CSSxRef("color")}} +- {{CSSxRef("background-color")}} +- {{CSSxRef("text-decoration")}} 와 이에 연관된 속성들 +- {{CSSxRef("text-shadow")}} +- {{CSSxRef("-webkit-text-stroke-color")}}, {{CSSxRef("-webkit-text-fill-color")}} 와 {{CSSxRef("-webkit-text-stroke-width")}} + +부분적으로 {{CSSxRef("background-image")}}는 무시됩니다. + +## 구문 + +```css +::selection { + /* ... */ +} +``` + +## 예제 + +### HTML + +```html +이 텍스트를 하이라이트하면 특별한 스타일이 적용됩니다. +

단락에서 텍스트를 선택해 보세요.

+``` + +### CSS + +```css hidden +::-moz-selection { + color: gold; + background-color: red; +} + +p::-moz-selection { + color: white; + background-color: blue; +} +``` + +```css +/* 선택된 텍스트를 빨간색 배경 위 금색으로 만듭니다. */ +::selection { + color: gold; + background-color: red; +} + +/* 단락 안의 선택된 텍스트를 파란색 배경 위 흰색으로 만듭니다. */ +p::selection { + color: white; + background-color: blue; +} +``` + +### 결과 + +{{EmbedLiveSample('Examples')}} + +## 접근성 고려사항 + +**순수하게 미학적인 이유만으로 선택된 텍스트 스타일을 변경하지 않아야 합니다.** 사용자는 필요에 의해 텍스트 스타일을 정의할 수 있습니다. 인지 문제를 겪고 있는 사람들이나 기술적으로 익숙하지 않은 사람들의 경우, 예상치 못한 스타일의 변화는 그들의 기능 이해를 저하시킬 수 있습니다. + +만일 텍스트가 변경되었다면, 선택 영역의 텍스트와 배경 색상 사이의 **대비 비율**이 저시력을 가진 사람들에게도 충분히 읽을 수 있을 정도로 높아야 한다는 것을 중요하게 생각해야 합니다. + +색상 대비 비율은 선택된 텍스트와 선택된 텍스트의 배경 색상의 명도를 비교하여 찾습니다.[웹 콘텐츠 접근성 가이드라인 (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/)을 충족시키기 위해서는, 텍스트 콘텐츠에는 4.5:1의 비율이 요구되고 머릿말 같은 큰 텍스트는 3:1 의 비율이 요구됩니다. 큰 텍스트는 18.66px의 [굵은 글씨체](/ko/docs/Web/CSS/font-weight) 혹은 24px 이상으로 정의됩니다. + +- [WebAIM: 색상 대비 확인](https://webaim.org/resources/contrastchecker/) +- [MDN Understanding WCAG, Guideline 1.4 explanations](/ko/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{cssxref("pointer-events")}} - 요소에 활성화된 이벤트를 제어합니다. diff --git a/files/ko/web/css/css_containment/index.md b/files/ko/web/css/css_containment/index.md index 1a0364d0620beb..5e33c5accaa4fa 100644 --- a/files/ko/web/css/css_containment/index.md +++ b/files/ko/web/css/css_containment/index.md @@ -36,7 +36,7 @@ article { 우리는 `contain` 속성을 통해 각 아티클이 독립적이라고 말했습니다. -`content` 값은 `contain: layout paint`의 약어입니다. 브라주어에 요소의 내부 레이아웃이 페이지의 나머지 부분과 완전히 분리되어 있으며, 요소에 대한 모든 것이 경계 내부에 그려져 있음을 알려줍니다. overflow되어 보이는 것이 없습니다. +`content` 값은 `contain: layout paint`의 약어입니다. 브라우저에 요소의 내부 레이아웃이 페이지의 나머지 부분과 완전히 분리되어 있으며, 요소에 대한 모든 것이 경계 내부에 그려져 있음을 알려줍니다. overflow되어 보이는 것이 없습니다. 이 정보는 페이지를 작성하는 웹 개발자에게 일반적으로 알려져 있으며, 사실 매우 분명합니다. 그러나 브라우저는 귀하의 의도를 추측할 수 없고, 아티클이 완전히 독립적일 것이라고 가정할 수 없습니다. 따라서 이 속성은 브라우저에게 이 사실을 설명하고, 그 정보를 기반으로 성능 최적화를 수행할 수 있는 좋은 방법을 제공합니다. diff --git a/files/ko/web/css/css_images/using_css_gradients/index.md b/files/ko/web/css/css_images/using_css_gradients/index.md new file mode 100644 index 00000000000000..9f20ece6cbfe3c --- /dev/null +++ b/files/ko/web/css/css_images/using_css_gradients/index.md @@ -0,0 +1,1072 @@ +--- +title: CSS 그라디언트 사용하기 +slug: Web/CSS/CSS_images/Using_CSS_gradients +l10n: + sourceCommit: 9c8c461dc350668ad326fa9aad604ce9da800df2 +--- + +{{CSSRef}} + +**CSS 그라디언트**는 두 개 혹은 그 이상의 색상들 사이에서 점진적인 변화를 만들어내는 {{cssxref("<gradient>")}} 데이터 타입, 그 중에서도 {{cssxref("<image>")}} 타입을 대표합니다. {{cssxref("gradient/linear-gradient", "linear-gradient()")}} 함수를 이용한 선형, {{cssxref("gradient/radial-gradient", "radial-gradient()")}} 함수를 이용한 방사형, {{cssxref("gradient/conic-gradient", "conic-gradient()")}} 함수를 이용한 원뿔형, 세 개의 그라디언트 타입 중 하나를 골라 사용할 수 있습니다. 또한 {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}}, 그리고 {{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}} 함수들을 사용하면 반복되는 그라디언트를 만들 수도 있습니다. + +그라디언트는 배경과 같이 `` 를 사용할 수 있는 어디에서나 사용될 수 있습니다. 그라디언트는 동적으로 생성이 되기 때문에, 같은 효과를 내기 위해 사용하던 전통적인 래스터 이미지 파일의 필요성을 없앨 수 있었습니다. 또한, 그라디언트는 브라우저에 의해 생성되므로 이를 확대했을 때 래스터 이미지보다 더 나아 보이고 실시간으로 크기를 조절할 수 있습니다. + +선형 그라디언트부터 소개를 하고, 이와 관련된 예제를 통하여 모든 그라디언트 유형에서 지원되는 기능을 소개한 다음 방사형, 원뿔형, 그리고 반복되는 그라디언트를 소개하도록 하겠습니다. + +## 선형 그라디언트 사용하기 + +선형 그라디언트는 직선으로 뻗는 방향으로 색상의 띠를 생성합니다. + +### 기본 선형 그라디언트 + +기본이 되는 선형 그라디언트를 만들기 위해서는 두 가지 색상을 특정하기만 하면 됩니다. 이들은 색상 정지 지점이라고 불립니다. 최소한 두 가지 색상을 지정해야 하지만, 그 이상도 원하는 만큼 지정할 수 있습니다. + +```html hidden +
+``` + +```css hidden +div { + width: 120px; + height: 120px; +} +``` + +```css +.simple-linear { + background: linear-gradient(blue, pink); +} +``` + +{{ EmbedLiveSample('A_basic_linear_gradient', 120, 120) }} + +### 방향 변경하기 + +기본적으로, 선형 그라디언트는 위에서 아래로 향합니다. 방향을 설정하여 그라디언트의 회전을 변경할 수 있습니다. + +```html hidden +
+``` + +```css hidden +div { + width: 120px; + height: 120px; +} +``` + +```css +.horizontal-gradient { + background: linear-gradient(to right, blue, pink); +} +``` + +{{ EmbedLiveSample('Changing_the_direction', 120, 120) }} + +### 대각선 그라디언트 + +하나의 꼭지점에서 다른 꼭지점으로 향하는 대각선의 그라디언트도 생성할 수 있습니다. + +```html hidden +
+``` + +```css hidden +div { + width: 200px; + height: 100px; +} +``` + +```css +.diagonal-gradient { + background: linear-gradient(to bottom right, blue, pink); +} +``` + +{{ EmbedLiveSample('Diagonal_gradients', 200, 100) }} + +### 각도 이용하기 + +방향에 관한 더 많은 제어를 원한다면 그라디언트에 각도를 부여할 수도 있습니다. + +```html hidden +
+``` + +```css hidden +div { + width: 120px; + height: 120px; +} +``` + +```css +.angled-gradient { + background: linear-gradient(70deg, blue, pink); +} +``` + +{{ EmbedLiveSample('Using_angles', 120, 120) }} + +각도를 이용할 때에는 `0deg` 값은 아래에서 위로 향하는 수직의 그라디언트를 생성하고, `90deg` 값은 왼쪽에서 오른쪽으로 향하는 수평의 그라디언트를 생성하며, 이들은 모두 시계 방향으로 진행됩니다. 음수 각도는 반시계 방향으로 진행됩니다. + +![네 개의 상자의 각도를 나열하고 빨간색에서 흰색으로 변하는 것과 관련된 그라디언트를 보여줍니다. 0deg는 아래쪽에서부터 시작하고 위로 향하며, 90deg는 왼쪽에서 시작하여 오른쪽으로 향합니다. 180deg는 위에서 시작하여 아래로 향하고, -90deg 는 오른쪽에서 시작하야 왼쪽으로 향합니다.](linear_red_angles.png) + +## 색상 선언하기 & 효과 만들기 + +모든 CSS 그라디언트 유형은 위치에 따라 달라지는 색상들의 범위입니다. CSS 그라디언트에 의해 생성된 색상은 위치에 따라 지속적으로 변화될 수 있어 부드러운 색상 전환이 가능합니다. 이는 단색의 띠를 만들거나 두 가지 색상 사이의 전환을 만드는 것도 가능합니다. 다음은 모든 그라디언트 함수들에 사용할 수 있는 것들입니다. + +### 두 가지 이상의 색상 사용하기 + +반드시 두 가지의 색상만 사용할 필요 없이 원하는 만큼 색상을 다양하게 사용할 수 있습니다. 기본적으로 색상은 그라디언트를 따라 균등하게 배치됩니다. + +```html hidden +
+``` + +```css hidden +div { + width: 120px; + height: 120px; +} +``` + +```css +.auto-spaced-linear-gradient { + background: linear-gradient(red, yellow, blue, orange); +} +``` + +{{ EmbedLiveSample('Using_more_than_two_colors', 120, 120) }} + +### 색상 정지 지점 위치 설정하기 + +색상 정지 지점을 기본 위치로만 이용하지 않아도 됩니다. 위치를 미세하기 조정하기 위해 각각의 색상 정지 지점에 0개, 하나, 혹은 두 개의 백분율, 혹은 방사형과 선형의 경우에는 절대 길이를 부여할 수 있습니다. 위치를 백분율로 지정할 경우에는, `0%` 은 시작 지점이 되는 반면 `100%` 는 끝 지점을 표현합니다. 하지만, 의도한대로 효과를 내고 싶다면 범위에서 벗어난 값을 사용할 수도 있습니다. 만일 위치를 지정하지 않을 경우에는 해당 색상 정지 지점의 위치는 자동으로 계산됩니다. 첫번째 색상 정지 지점은 `0%` 에, 마지막 색상 정지 지점은 `100%` 가 되고, 다른 색상 정지 지점은 인접한 다른 색상 정지 지점 사이의 중간에 위치하게 됩니다. + +```html hidden +
+``` + +```css hidden +div { + width: 120px; + height: 120px; +} +``` + +```css +.multicolor-linear { + background: linear-gradient(to left, lime 28px, red 77%, cyan); +} +``` + +{{ EmbedLiveSample('Positioning_color_stops', 120, 120) }} + +### 명확한 선 생성하기 + +두 가지 색상 사이에 점진적인 전환 대신 명확한 선을 만들어 줄무늬를 만들고자 할 때는 인접한 색상 정지 지점을 동일한 위치에 설정할 수 있습니다. 이 예제에서는 색상들이 그라디언트의 중간 지점인 `50%` 에서 색상 정지 지점을 공유합니다. + +```html hidden +
+``` + +```css hidden +div { + width: 120px; + height: 120px; +} +``` + +```css +.striped { + background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%); +} +``` + +{{ EmbedLiveSample('Creating_hard_lines', 120, 120) }} + +### 그라디언트 힌트 + +기본적으로 그라디언트 변형은 하나의 색상에서 다음 색상으로 전환됩니다. 색상 힌트를 포함하면 색상 전환의 중간 지점을 특정한 지점으로 이동할 수 있습니다. 이 예제에서는 중간 지점을 50% 지점에서 10% 지점으로 이동합니다. + +```html hidden +
+
+``` + +```css hidden +div { + width: 120px; + height: 120px; + float: left; + margin-right: 10px; +} +``` + +```css +.color-hint { + background: linear-gradient(blue, 10%, pink); +} +.simple-linear { + background: linear-gradient(blue, pink); +} +``` + +{{ EmbedLiveSample('Gradient_hints', 120, 120) }} + +### 색상 띠와 줄무늬 만들기 + +그라디언트 내부에서 전환이 없는 고체의 색상 영역을 포함하기 위해서는 색상 정지 지점을 위한 두 개의 위치를 포함해야 합니다. 색상 정지 지점은 두 개의 위치값을 가질 수 있는데, 이는 다른 위치에서 같은 색상을 가진 연속적인 두 색상 정지 지점과 동일합니다. 색상은 첫번째 색상 정지 지점에서 완전한 채도에 도달하고, 두번째 색상까지 해당 채도를 그대로 유지한 뒤 인접한 색상 정지 지점의 첫번째 위치를 통해 해당 색상 정지 지점의 색상으로 전환됩니다. + +```html hidden +
+
+``` + +```css hidden +div { + width: 120px; + height: 120px; + float: left; + margin-right: 10px; + box-sizing: border-box; +} +``` + +```css +.multiposition-stops { + background: linear-gradient( + to left, + lime 20%, + red 30%, + red 45%, + cyan 55%, + cyan 70%, + yellow 80% + ); + background: linear-gradient( + to left, + lime 20%, + red 30% 45%, + cyan 55% 70%, + yellow 80% + ); +} +.multiposition-stop2 { + background: linear-gradient( + to left, + lime 25%, + red 25%, + red 50%, + cyan 50%, + cyan 75%, + yellow 75% + ); + background: linear-gradient( + to left, + lime 25%, + red 25% 50%, + cyan 50% 75%, + yellow 75% + ); +} +``` + +{{ EmbedLiveSample('Creating_color_bands_stripes', 120, 120) }} + +위 첫번째 예시에서 라임색 0% 지점에서 시작하여 20% 지점으로 향하고, 그라디언트 너비의 다음 10% 동안 라임색에서 빨간색으로 전환이 됩니다. 그리고 30% 지점에서 완전한 빨간색에 도달하게 되고 그라디언트의 45% 지점까지 이를 유지합니다. 거기서 푸른색으로 점차 변하고, 그라디언트의 15% 동안 완전히 푸른색이 되며 그 후 이를 유지합니다. + +두번째 예시에서는 각각의 색상에서 두번째 색상 정지 지점은 인접한 색상의 첫번째 색상 정지 지점과 같은 위치에 있어 줄무늬를 생성합니다. + +두 가지 예시에서 그라디언트는 두 번 쓰였습니다. 첫번째는 CSS 이미지 레벨 3 방식으로 각 색상 정지 지점마다 색상을 반복하고, 두번째 예시는 CSS 이미지 레벨 4의 방법으로 다중 색상 정지 지점을 사용하여 선형 색상 정지 지점 선언에 두 개의 색상 정지 지점 길이를 포함시킵니다. + +### 그라디언트의 진행 제어하기 + +기본적으로 그라디언트는 두 가지 인접한 색상 사이에서 균등하게 진행이 되며, 그 중간 지점은 두 색상 사이 색상 정지 지점의 중간 색상 값이 됩니다. 두 색상 정지 지점 사이의 {{Glossary("interpolation", "보간법")}}이나 진행은 색상 힌트 위치를 포함시켜 제어할 수 있습니다. 이 예제에서는 라임과 푸른색 사이 그라디언트가 50% 지점이 아닌 20% 지점에서 중간 지점에 도달하게 됩니다. 두번째 예제는 힌트를 포함하지 않기 때문에 색상 힌트가 얼마나 차이를 만들 수 있는지에 대해 강조합니다. + +```html hidden +
+
+``` + +```css hidden +div { + width: 120px; + height: 120px; + float: left; + margin-right: 10px; + box-sizing: border-box; +} +``` + +```css +.colorhint-gradient { + background: linear-gradient(to top, lime, 20%, cyan); +} +.regular-progression { + background: linear-gradient(to top, lime, cyan); +} +``` + +{{ EmbedLiveSample('Controlling_the_progression_of_a_gradient', 120, 120) }} + +### 그라디언트 겹치기 + +그라디언트는 투명도를 지원합니다. 다수의 배경을 중첩하여 심미적인 효과를 달성할 수도 있습니다. 배경은 위에서부터 아래로 중첩되고, 처음으로 정의한 것이 상단에 위치하게 됩니다. + +```html hidden +
+``` + +```css hidden +div { + width: 300px; + height: 150px; +} +``` + +```css +.layered-image { + background: linear-gradient(to right, transparent, mistyrose), + url("critters.png"); +} +``` + +{{ EmbedLiveSample('Overlaying_gradients', 300, 150) }} + +### 중첩된 그라디언트 + +그라디언트를 다른 그라디언트와 중첩시킬 수도 있습니다. 위에 있는 그라디언트가 완전히 불투명해지지 않는 한, 아래쪽에 있는 그라디언트도 여전히 보이는 상태로 있게 됩니다. + +```html hidden +
+``` + +```css hidden +div { + width: 200px; + height: 200px; +} +``` + +```css +.stacked-linear { + background: linear-gradient( + 217deg, + rgb(255 0 0 / 80%), + rgb(255 0 0 / 0%) 70.71% + ), + linear-gradient(127deg, rgb(0 255 0 / 80%), rgb(0 255 0 / 0%) 70.71%), + linear-gradient(336deg, rgb(0 0 255 / 80%), rgb(0 0 255 / 0%) 70.71%); +} +``` + +{{ EmbedLiveSample('Stacked_gradients', 200, 200) }} + +### 그라디언트 혼합하기 + +투명도 외에도 여러 개의 반투명한 그라디언트를 중첩시키거나 래스터 배경 이미지 위에 그라디언트를 겹치는 등 그라디언트는 다른 CSS 효과들과 함께 사용될 수 있습니다. 이 예제에서는 네 개의 {{htmlelement("div")}} 요소에 두 개의 동일한 불투명의 이미지 배경이 사용되고 있습니다. 마지막 세 개의 요소에는 두 개의 배경 이미지를 혼합하여 서로 다른 효과를 생성하는 {{cssxref("background-blend-mode")}} CSS 속성 값을 적용합니다. + +```html hidden +
+
+
+
+``` + +```css hidden +div { + width: 120px; + height: 120px; + float: left; + margin-right: 10px; + box-sizing: border-box; +} +``` + +```css +div { + background: linear-gradient(to top, red, blue), + linear-gradient(to right, #5500ff, #00ff55); +} + +.screen { + background-blend-mode: screen; +} + +.overlay { + background-blend-mode: overlay; +} + +.difference { + background-blend-mode: difference; +} +``` + +{{ EmbedLiveSample('Blending_gradients', 120, 120) }} + +## 방사형 그라디언트 사용하기 + +방사형 그라디언트는 선형 그라디언트와 유사하지만 중심 지점에서 방사향으로 퍼져나간다는 점에 차이가 있습니다. 그 중심 지점의 위치를 지정할 수 있고, 방사형 그라디언트를 원형이나 타원형으로 만들 수도 있습니다. + +### 기본 방사형 그라디언트 + +선형 그라디언트처럼, 방사형 그라디언트를 생성하기 위해 필요한 것은 두 가지 색상입니다. 기본적으로 그라디언트의 중심 지점은 50% 50% 지점에 있으며, 그라디언트는 박스의 {{glossary("aspect ratio")}} 와 일치하는 타원형입니다. + +```html hidden +
+``` + +```css hidden +div { + width: 240px; + height: 120px; +} +``` + +```css +.simple-radial { + background: radial-gradient(red, blue); +} +``` + +{{ EmbedLiveSample('A_basic_radial_gradient', 120, 120) }} + +### 색상 정지 지점 위치 설정하기 + +선형 그라디언트처럼 방사형 색상 정지 지점에도 백분율이나 절대 길이를 부여하여 위치를 설정할 수 있습니다. + +```html hidden +
+``` + +```css hidden +div { + width: 120px; + height: 120px; +} +``` + +```css +.radial-gradient { + background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%); +} +``` + +{{ EmbedLiveSample('Positioning_radial_color_stops', 120, 120) }} + +### 그라디언트의 중심 위치 설정하기 + +그라디언트의 중심을 키워드, 백분율 혹은 절대 길이로 위치시킬 수 있습니다. 길이와 백분율은 하나만 존재할 경우에 반복되고, 그렇지 않으면 왼쪽에서의 위치와 위쪽에서의 위치 순서로 지정됩니다. + +```html hidden +
+``` + +```css hidden +div { + width: 120px; + height: 240px; +} +``` + +```css +.radial-gradient { + background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%); +} +``` + +{{ EmbedLiveSample('Positioning_the_center_of_the_gradient', 120, 120) }} + +### 방사형 그라디언트 크기 조절하기 + +선형 그라디언트와는 다르게 방사형 그라디언트에는 크기를 설정할 수 있습니다. 가능한 값으로는 `closest-corner`, `closest-side`, `farthest-corner`, 그리고 `farthest-side` 가 있으며 `farthest-corner` 가 기본값입니다. 원은 길이로 크기를 조정할 수 있고, 타원은 길이 또는 백분율로 크기를 조정할 수 있습니다. + +#### 예제: 타원형을 위한 `closest-side` + +이 예제는 크기의 값으로 `closest-side` 를 사용하는데, 이는 시작(중심 지점)으로부터의 둘러싸는 상자의 가장 가까운 변까지의 거리로 설정된다는 의미입니다. + +```html hidden +
+``` + +```css hidden +div { + width: 240px; + height: 100px; +} +``` + +```css +.radial-ellipse-side { + background: radial-gradient( + ellipse closest-side, + red, + yellow 10%, + #1e90ff 50%, + beige + ); +} +``` + +{{ EmbedLiveSample('Example_closest-side_for_ellipses', 240, 100) }} + +#### 예제: 타원형을 위한 `farthest-corner` + +이 예제는 방금 전 예제와 유사하지만 크기가 `farthest-corner` 로 특정된다는 데에 차이가 있습니다. 이는 그라디언트의 크기가 시작(중심 지점)으로부터의 둘러싸는 상자의 가장 멀리 위치한 모서리까지의 거리로 설정된다는 의미입니다. + +```html hidden +
+``` + +```css hidden +div { + width: 240px; + height: 100px; +} +``` + +```css +.radial-ellipse-far { + background: radial-gradient( + ellipse farthest-corner at 90% 90%, + red, + yellow 10%, + #1e90ff 50%, + beige + ); +} +``` + +{{ EmbedLiveSample('Example_farthest-corner_for_ellipses', 240, 100) }} + +#### 예제: 원형을 위한 `closest-side` + +이 예제는 `closest-side` 를 사용하고, 이는 원의 반지름이 그라디언트의 중심과 가장 가까운 변 사이의 거리가 되도록 만듭니다. 이 경우에는 그라데이션이 왼쪽에서 25%, 아래쪽에서 25% 떨어진 위치에 배치되고, div 요소의 높이가 너비보다 작기 때문에 반지름은 중심과 아래쪽 변 사이의 거리입니다. + +```html hidden +
+``` + +```css hidden +div { + width: 240px; + height: 120px; +} +``` + +```css +.radial-circle-close { + background: radial-gradient( + circle closest-side at 25% 75%, + red, + yellow 10%, + #1e90ff 50%, + beige + ); +} +``` + +{{ EmbedLiveSample('Example_closest-side_for_circles', 240, 120) }} + +#### 예제: 타원형을 위한 길이나 백분율 + +타원형 한정으로, 타원의 크기를 길이나 백분율을 이용하여 조절할 수 있습니다. 첫번째 값은 가로 반지름을 나타내고 두번째 값은 세로 반지름을 나타내는데, 백분율을 사용하는 경우 이는 해당 차원의 박스 크기에 상응합니다. 아래 예제에서는 가로 반지름에 적용하기 위해 백분율을 사용합니다. + +```html hidden +
+``` + +```css hidden +div { + width: 240px; + height: 120px; +} +``` + +```css +.radial-ellipse-size { + background: radial-gradient( + ellipse 50% 50px, + red, + yellow 10%, + #1e90ff 50%, + beige + ); +} +``` + +{{ EmbedLiveSample('Example_length_or_percentage_for_ellipses', 240, 120) }} + +#### 예제: 원형을 위한 길이 + +원형에서는 크기는 {{cssxref("length")}} 의 값을 이용할 수 있습니다. 이는 원형의 크기에 해당됩니다. + +```html hidden +
+``` + +```css hidden +div { + width: 240px; + height: 120px; +} +``` + +```css +.radial-circle-size { + background: radial-gradient(circle 50px, red, yellow 10%, #1e90ff 50%, beige); +} +``` + +{{ EmbedLiveSample('Example_length_for_circles', 240, 120) }} + +### 중첩 방사형 그라디언트 + +선형 그라디언트와 마찬가지로 방사형 그라디언트도 중첩하여 사용할 수 있습니다. 첫번째 값은 위에 위치하고, 마지막 값은 아래에 위치합니다. + +```html hidden +
+``` + +```css hidden +div { + width: 200px; + height: 200px; +} +``` + +```css +.stacked-radial { + background: + radial-gradient( + circle at 50% 0, + rgb(255 0 0 / 50%), + rgb(255 0 0 / 0%) 70.71% + ), + radial-gradient( + circle at 6.7% 75%, + rgb(0 0 255 / 50%), + rgb(0 0 255 / 0%) 70.71% + ), + radial-gradient( + circle at 93.3% 75%, + rgb(0 255 0 / 50%), + rgb(0 255 0 / 0%) 70.71% + ) + beige; + border-radius: 50%; +} +``` + +{{ EmbedLiveSample('Stacked_radial_gradients', 200, 200) }} + +## 원뿔형 그라디언트 사용하기 + +**`conic-gradient()`** [CSS](/ko/docs/Web/CSS) 함수는 중심 지점 주위를 회전하는 동안 (중심에서 방사되는 형태가 아닌) 이루어지는 색상 전환의 그라디언트를 생성합니다. 원뿔형 그라디언트의 예제로는 파이 차트와 {{glossary("color wheel", "color wheels")}} 이 있지만, 체커 보드나 다른 흥미로운 효과를 만드는 데에도 원뿔형 그라디언트가 사용됩니다. + +원뿔형 그라디언트의 문법은 방사형 그라디언트의 문법과 유사하지만 색상 정지 지점이 중심에서 퍼져나오는 선이 아니라 원의 둘레에 그라디언트가 배치됩니다. 색상 정지 지점은 백분율이나 각도로 지정되고, 절대 길이는 사용할 수 없습니다. + +방사형 그라디언트에서는, 색상이 타원의 중심에서 바깥쪽으로 모든 방향으로 전환됩니다. 원뿔형 그라디언트에서는 색상이 원의 중심 주위를 회전하는 것처럼 전환되며, 위쪽에서 시작하여 시계 방향으로 진행됩니다. 방사형 그라디언트와 마찬가지로 그라디언트의 중심을 위치시킬 수 있으며, 선형 그라디언트와 마찬가지로 그라디언트의 각도를 변경할 수 있습니다. + +### 기본 원뿔형 그라디언트 + +선형과 방사형 그라디언트와 같이, 원뿔형 그라디언트를 생성하기 위해 필요한 것은 두 가지 색상입니다. 기본적으로 그라디언트의 중심은 50% 50% 지점이고, 그라디언트의 시작은 위쪽을 향합니다. + +```html hidden +
+``` + +```css hidden +div { + width: 120px; + height: 120px; +} +``` + +```css +.simple-conic { + background: conic-gradient(red, blue); +} +``` + +{{ EmbedLiveSample('A_basic_conic_gradient', 120, 120) }} + +### 원뿔의 중심 위치 설정하기 + +방사형 그라디언트처럼 원뿔형 그라디언트의 중심 위치를 키워드, 백분율 혹은 절대 길이로 설정이 가능하며, 이는 키워드 "at"과 함께 사용됩니다. + +```html hidden +
+``` + +```css hidden +div { + width: 120px; + height: 120px; +} +``` + +```css +.conic-gradient { + background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%); +} +``` + +{{ EmbedLiveSample('Positioning_the_conic_center', 120, 120) }} + +### 각도 변경하기 + +기본적으로, 지정된 다른 색상 정지 지점은 원을 기준으로 균등하게 위치합니다. 원뿔형 그라디언트의 시작 각도를 "from" 키워드를 사용하여 각도나 길이로 지정할 수 있으며, 색상 정지 지점의 위치를 각도나 길이를 포함하여 다르게 지정할 수도 있습니다. + +```html hidden +
+``` + +```css hidden +div { + width: 120px; + height: 120px; +} +``` + +```css +.conic-gradient { + background: conic-gradient(from 45deg, red, orange 50%, yellow 85%, green); +} +``` + +{{ EmbedLiveSample('Changing_the_angle', 120, 120) }} + +## 반복 그라디언트 사용하기 + +{{cssxref("gradient/linear-gradient", "linear-gradient()")}}, {{cssxref("gradient/radial-gradient", "radial-gradient()")}} 와 {{cssxref("gradient/conic-gradient", "conic-gradient()")}} 함수는 반복된 색상 정지 지점을 자동적으로 지원하지 않습니다. 그러나, {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}}, 그리고 {{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}} 함수는 이를 실행하기에 적합합니다. + +첫번째 색상 중지 지점 값과 마지막 색상 중지 지점 값 사이의 길이가 반복되는 그라디언트 라인의 크기입니다. 첫번째 색상 중지 지점에 색상만 있고 색 중지 길이가 없는 경우 값은 기본적으로 0으로 설정됩니다. 마지막 색상 중지 지점에 색상만 있고 중지 길이가 없는 경우 값은 기본적으로 100%로 설정됩니다. 둘 다 선언되지 않은 경우, 그라디언트 라인은 100%로 간주되며 선형 혹은 원뿔형 그라디언트는 반복되지 않고 방사형 그라디언트는 그라디언트의 반지름이 중심에서 가장 먼 모서리까지의 거리보다 작은 경우에만 반복됩니다. 첫번째 색상 중지가 선언되고 값이 0보다 큰 경우, 그라디언트가 반복됩니다. 이는 첫번째 색상 중지 지점과 마지막 색상 중지 지점 사이의 차이가 100% 또는 360도보다 작은 경우입니다. + +### 반복되는 선형 그라디언트 + +이 예제에서는 {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}를 사용하여 직선으로 반복적으로 진행되는 그라디언트를 생성합니다. 색상은 그라디언트가 반복될 때 다시 순환합니다. 이 경우 그라디언트 선의 길이는 10px입니다. + +```html hidden +
+``` + +```css hidden +div { + width: 120px; + height: 120px; +} +``` + +```css +.repeating-linear { + background: repeating-linear-gradient( + -45deg, + red, + red 5px, + blue 5px, + blue 10px + ); +} +``` + +{{ EmbedLiveSample('Repeating_linear_gradients', 120, 120) }} + +### 다수의 반복되는 선형 그라디언트 + +규칙적인 선형이나 방사형 그라디언트와 마찬가지로 하나 위에 다른 것을 겹쳐 다수의 그라디언트를 포함시킬 수 있습니다. 이는 오직 그라디언트가 다른 그라디언트 이미지에 대해 부분적으로 투명하여 연속된 다른 그라디언트가 투명한 부분을 통해 보이거나, 다른 [background-sizes](/ko/docs/Web/CSS/background-size)를 사용하거나, 선택적으로 다른 [background-position](/ko/docs/Web/CSS/background-position) 속성 값을 상요한 경우에만 유효합니다. + +이 경우에 그라디언트 선은 각각 300px, 230px, 300px 길이입니다. + +```html hidden +
+``` + +```css hidden +div { + width: 600px; + height: 400px; +} +``` + +```css +.multi-repeating-linear { + background: repeating-linear-gradient( + 190deg, + rgb(255 0 0 / 50%) 40px, + rgb(255 153 0 / 50%) 80px, + rgb(255 255 0 / 50%) 120px, + rgb(0 255 0 / 50%) 160px, + rgb(0 0 255 / 50%) 200px, + rgb(75 0 130 / 50%) 240px, + rgb(238 130 238 / 50%) 280px, + rgb(255 0 0 / 50%) 300px + ), + repeating-linear-gradient( + -190deg, + rgb(255 0 0 / 50%) 30px, + rgb(255 153 0 / 50%) 60px, + rgb(255 255 0 / 50%) 90px, + rgb(0 255 0 / 50%) 120px, + rgb(0 0 255 / 50%) 150px, + rgb(75 0 130 / 50%) 180px, + rgb(238 130 238 / 50%) 210px, + rgb(255 0 0 / 50%) 230px + ), + repeating-linear-gradient( + 23deg, + red 50px, + orange 100px, + yellow 150px, + green 200px, + blue 250px, + indigo 300px, + violet 350px, + red 370px + ); +} +``` + +{{ EmbedLiveSample('Multiple_repeating_linear_gradients', 600, 400) }} + +### 격자 그라디언트 + +격자를 만들기 위해서는 투명도가 있는 그라디언트 몇 개를 겹쳐야 합니다. 첫번째 배경 선언에서는 모든 색상 정지 지점을 개별적으로 나열합니다. 두번째 배경 속성 선언에서는 여러 위치의 색상 정지 지점 문법을 사용합니다. + +```html hidden +
+``` + +```css hidden +div { + width: 200px; + height: 200px; +} +``` + +```css +.plaid-gradient { + background: repeating-linear-gradient( + 90deg, + transparent, + transparent 50px, + rgb(255 127 0 / 25%) 50px, + rgb(255 127 0 / 25%) 56px, + transparent 56px, + transparent 63px, + rgb(255 127 0 / 25%) 63px, + rgb(255 127 0 / 25%) 69px, + transparent 69px, + transparent 116px, + rgb(255 206 0 / 25%) 116px, + rgb(255 206 0 / 25%) 166px + ), + repeating-linear-gradient( + 0deg, + transparent, + transparent 50px, + rgb(255 127 0 / 25%) 50px, + rgb(255 127 0 / 25%) 56px, + transparent 56px, + transparent 63px, + rgb(255 127 0 / 25%) 63px, + rgb(255 127 0 / 25%) 69px, + transparent 69px, + transparent 116px, + rgb(255 206 0 / 25%) 116px, + rgb(255 206 0 / 25%) 166px + ), + repeating-linear-gradient( + -45deg, + transparent, + transparent 5px, + rgb(143 77 63 / 25%) 5px, + rgb(143 77 63 / 25%) 10px + ), + repeating-linear-gradient( + 45deg, + transparent, + transparent 5px, + rgb(143 77 63 / 25%) 5px, + rgb(143 77 63 / 25%) 10px + ); + + background: repeating-linear-gradient( + 90deg, + transparent 0 50px, + rgb(255 127 0 / 25%) 50px 56px, + transparent 56px 63px, + rgb(255 127 0 / 25%) 63px 69px, + transparent 69px 116px, + rgb(255 206 0 / 25%) 116px 166px + ), + repeating-linear-gradient( + 0deg, + transparent 0 50px, + rgb(255 127 0 / 25%) 50px 56px, + transparent 56px 63px, + rgb(255 127 0 / 25%) 63px 69px, + transparent 69px 116px, + rgb(255 206 0 / 25%) 116px 166px + ), + repeating-linear-gradient( + -45deg, + transparent 0 5px, + rgb(143 77 63 / 25%) 5px 10px + ), + repeating-linear-gradient( + 45deg, + transparent 0 5px, + rgb(143 77 63 / 25%) 5px 10px + ); +} +``` + +{{ EmbedLiveSample('Plaid_gradient', 200, 200) }} + +### 반복되는 방사형 그라디언트 + +이 예제에서는 {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}}를 사용하여 중심 지점으로부터 반복적으로 방사되는 그라디언트를 생성합니다. 색상은 그라디언트 반복에 따라 순환하게 됩니다. + +```html hidden +
+``` + +```css hidden +div { + width: 120px; + height: 120px; +} +``` + +```css +.repeating-radial { + background: repeating-radial-gradient( + black, + black 5px, + white 5px, + white 10px + ); +} +``` + +{{ EmbedLiveSample('Repeating_radial_gradients', 120, 120) }} + +### 다수의 반복되는 방사형 그라디언트 + +```html hidden +
+``` + +```css hidden +div { + width: 250px; + height: 150px; +} +``` + +```css +.multi-target { + background: + repeating-radial-gradient( + ellipse at 80% 50%, + rgb(0 0 0 / 50%), + rgb(0 0 0 / 50%) 15px, + rgb(255 255 255 / 50%) 15px, + rgb(255 255 255 / 50%) 30px + ) + top left no-repeat, + repeating-radial-gradient( + ellipse at 20% 50%, + rgb(0 0 0 / 50%), + rgb(0 0 0 / 50%) 10px, + rgb(255 255 255 / 50%) 10px, + rgb(255 255 255 / 50%) 20px + ) + top left no-repeat yellow; + background-size: + 200px 200px, + 150px 150px; +} +``` + +{{ EmbedLiveSample('Multiple_repeating_radial_gradients', 250, 150) }} + +### 반복되는 원뿔형 그라디언트 + +이 예제는 {{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}}를 사용하여 중심 지점 주위로 반복적으로 회전하는 그라디언트를 생성합니다. 이 경우에는 선언된 색상 정지 지점이 네 번 반복됩니다. + +```html hidden +
+``` + +```css hidden +div { + width: 120px; + height: 120px; +} +``` + +```css +.repeating-conic { + background: repeating-conic-gradient( + #66ccff 0% 8.25%, + #6633ff 8.25% 16.5%, + #ff3399 16.5% 25% + ); +} +``` + +{{ EmbedLiveSample('Repeating_conic_gradients', 120, 120) }} + +### 다수의 반복되는 원뿔형 그라디언트 + +선형 그라디언트와 방사형으로 반복되는 그라디언트와 마찬가지러 여러 개의 원뿔형 그라디언트를 겹칠 수 있습니다. 서로 다른 `at ` 값을 이용하여 원뿔형 그라디언트가 중심에서 겹치지 않도록 하고 서로 다른 `from ` 값을 이용하여 반복하는 효과가 일치하지 않도록 하는 흥미로운 효과를 만들어낼 수도 있습니다. 이 예제에서는 반투명의 반복되는 방사형 그라디언트가 각각의 색상 구성을 네 차례 반복하며 겹쳐 있습니다. 겹쳐진 그라디언트를 육안으로 확인할 수 있도록 만들어야 한다면 겹쳐진 상태의 가장 위의 그라디언트 색상이 부분적으로 투명하거나, {{cssxref("background-blend-mode")}} CSS 속성을 사용해야 합니다. + +```html hidden +
+``` + +```css hidden +div { + width: 250px; + height: 250px; +} +``` + +```css +.multi-repeating-conic { + background: repeating-conic-gradient( + from 0deg at 80% 50%, + #5691f580 0% 8.25%, + #b338ff80 8.25% 16.5%, + #f8305880 16.5% 25% + ), + repeating-conic-gradient( + from 15deg at 50% 50%, + #e856f580 0% 8.25%, + #ff384c80 8.25% 16.5%, + #e7f83080 16.5% 25% + ), + repeating-conic-gradient( + from 0deg at 20% 50%, + #f58356ff 0% 8.25%, + #caff38ff 8.25% 16.5%, + #30f88aff 16.5% 25% + ); +} +``` + +{{ EmbedLiveSample('Multiple_repeating_conic_gradients', 250, 250) }} + +## 같이 보기 + +- 그라디언트 함수: {{cssxref("gradient/linear-gradient", "linear-gradient()")}}, {{cssxref("gradient/radial-gradient", "radial-gradient()")}}, {{cssxref("gradient/conic-gradient", "conic-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}} +- 그라디언트와 연관된 CSS 데이터 타입: {{cssxref("<gradient>")}}, {{cssxref("<image>")}} +- 그라디언트와 연관된 CSS 속성: {{cssxref("background")}}, {{cssxref("background-image")}} +- [CSS 그라디언트 패턴 갤러리, by Lea Verou](https://projects.verou.me/css3patterns/) +- [CSS 그라디언트 라이브러리, by Estelle Weyl](https://standardista.com/cssgradients/) +- [CSS 그라디언트 생성기](https://cssgenerator.org/gradient-css-generator.html) +- [심화 CSS 그라디언트 생성기](https://colorbeta.com/) diff --git a/files/ko/web/css/css_logical_properties_and_values/index.md b/files/ko/web/css/css_logical_properties_and_values/index.md new file mode 100644 index 00000000000000..c0d5f14d751bb7 --- /dev/null +++ b/files/ko/web/css/css_logical_properties_and_values/index.md @@ -0,0 +1,187 @@ +--- +title: CSS 논리적 속성과 값 +slug: Web/CSS/CSS_logical_properties_and_values +l10n: + sourceCommit: 63249f6b1e89f42e172878c54a2f9674bee50904 +--- + +{{CSSRef}} + +**CSS 논리적 속성과 값** 모듈은 레이아웃을 물리적인 방향과 차원의 매핑이 아닌 논리적인 방식의 매핑으로 제어할 수 있는 논리적 속성들과 값으로 정의합니다. 논리적 속성은 해당하는 물리적 속성의 대응하는 방향 상대성을 정의합니다. + +문장의 시작 부분이 항상 왼쪽 부분인 것은 아닙니다. 다른 쓰기 체계는 다양한 방향성을 가지고 있습니다. 아래 예시들을 확인해 보세요. + +- 영어와 포르투갈어는 왼쪽에서 오른쪽이로 쓰여지고 새로운 문장은 기존 문장 아래에 추가됩니다. +- 히브리어와 아라비아어는 오른쪽에서 왼쪽으로 쓰여지는 언어이고 새로운 문장은 기존 문장 아래에 추가됩니다. +- 몇몇의 쓰기 모드에서, 텍스트로 이루어진 문장은 수직이고, 위에서 아래로 쓰입니다. 중국어, 베트남어, 한국어, 그리고 일본어는 전통적으로 위에서 아래 방향인 수직 방향으로 쓰여지며, 새로운 문장은 기존 문장 왼쪽에 추가됩니다. +- 전통 방식의 몽골어 또한 위에서 아래로 쓰여지지만, 새로운 문장은 기존 문장의 오른쪽에 추가됩니다. + +이 모듈에서 정의된 논리적 속성은 물리적 방향이 아니라 콘텐츠의 쓰기 방향에 따른 속성을 정의할 수 있습니다. 이 의미는 콘텐츠가 다른 쓰기 방식의 언어로 번역되어도 콘텐츠가 의도한대로 렌더링된다는 것을 의미합니다. + +논리적 속성과 값은 흐르는 방향을 설명하기 위해 블록과 인라인이라는 추상적인 용어들을 사용합니다. 이러한 용어들의 물리적 의미는 [쓰기 모드](/ko/docs/Web/CSS/CSS_writing_modes)에 의존합니다. + +**블록 차원**은 문장 내의 흐름에 수직적인 차원입니다. 즉, 가로 방향의 쓰기 모드에서는 수직 차원이고, 세로 방향의 쓰기 모드에서는 수평 차원입니다. 표준 영어 텍스트의 경우에는 수직 차원입니다. + +**인라인 차원**은 문장 내의 흐름과 평행합니다. 즉, 가로 방향의 쓰기 모드에서는 수평 차원이고, 세로 방향의 쓰기 모드에서는 수직 차원입니다. 표준 영어 텍스트의 경우에는 수평 차원입니다. + +CSS 는 본래 물리적인 좌표만을 위해 고안되었습니다. 논리적 속성과 값 모듈은 많은 [값](/ko/docs/Web/CSS/CSS_Values_and_Units)과 [속성](/ko/docs/Glossary/Property/CSS)들에 대응하는 흐름 상대성을 정의합니다. 물리적 값 (`top`, `bottom`, `left`, `right`) 만 수용했던 속성들은 이제 흐름 상대적인 논리적 속성 (`block-start`, `block-end`, `inline-start`, `inline-end`) 들도 허용하게 됩니다. + +## 참고서 + +### 속성 + +- {{cssxref("block-size")}} +- {{cssxref("border-block")}} +- {{cssxref("border-block-color")}} +- {{cssxref("border-block-end")}} +- {{cssxref("border-block-end-color")}} +- {{cssxref("border-block-end-style")}} +- {{cssxref("border-block-end-width")}} +- {{cssxref("border-block-start")}} +- {{cssxref("border-block-start-color")}} +- {{cssxref("border-block-start-style")}} +- {{cssxref("border-block-start-width")}} +- {{cssxref("border-block-style")}} +- {{cssxref("border-block-width")}} +- {{cssxref("border-end-end-radius")}} +- {{cssxref("border-end-start-radius")}} +- {{cssxref("border-inline")}} +- {{cssxref("border-inline-color")}} +- {{cssxref("border-inline-end")}} +- {{cssxref("border-inline-end-color")}} +- {{cssxref("border-inline-end-style")}} +- {{cssxref("border-inline-end-width")}} +- {{cssxref("border-inline-start")}} +- {{cssxref("border-inline-start-color")}} +- {{cssxref("border-inline-start-style")}} +- {{cssxref("border-inline-start-width")}} +- {{cssxref("border-inline-style")}} +- {{cssxref("border-inline-width")}} +- {{cssxref("border-start-end-radius")}} +- {{cssxref("border-start-start-radius")}} +- {{cssxref("inline-size")}} +- {{cssxref("inset")}} +- {{cssxref("inset-block")}} +- {{cssxref("inset-block-end")}} +- {{cssxref("inset-block-start")}} +- {{cssxref("inset-inline")}} +- {{cssxref("inset-inline-end")}} +- {{cssxref("inset-inline-start")}} +- {{cssxref("margin-block")}} +- {{cssxref("margin-block-end")}} +- {{cssxref("margin-block-start")}} +- {{cssxref("margin-inline")}} +- {{cssxref("margin-inline-end")}} +- {{cssxref("margin-inline-start")}} +- {{cssxref("max-block-size")}} +- {{cssxref("max-inline-size")}} +- {{cssxref("min-block-size")}} +- {{cssxref("min-inline-size")}} +- {{cssxref("padding-block")}} +- {{cssxref("padding-block-end")}} +- {{cssxref("padding-block-start")}} +- {{cssxref("padding-inline")}} +- {{cssxref("padding-inline-end")}} +- {{cssxref("padding-inline-start")}} + +### 데이터 타입과 값 + +{{glossary("Flow relative values")}}: + +- `block-start` +- `block-end` +- `inline-start` +- `inline-end` +- `start` +- `end` + +### 용어 사전의 용어들 + +- {{glossary("Flow relative values")}} +- {{glossary("Inset properties")}} +- {{glossary("Logical properties")}} +- {{glossary("Physical properties")}} + +## 안내서 + +- [논리적 속성과 값의 기본 개념](/ko/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values) + + - : 흐름 상대적인 속성과 값들 전반에 대해 다룹니다. + +- [크기 조절을 위한 논리적 속성](/ko/docs/Web/CSS/CSS_logical_properties_and_values/Sizing) + + - : 페이지의 요소의 크기 조절에 사용되는 물리적 속성과 논리적 속성들 사이의 흐름 상대적인 매핑에 대해 다룹니다. + +- [바깥 여백, 테두리, 그리고 안쪽 여백에 관한 논리적 속성들](/ko/docs/Web/CSS/CSS_logical_properties_and_values/Margins_borders_padding) + + - : 바깥 여백, 테두리, 그리고 안쪽 여백에 관한 흐름 상대적인 매핑과 그에 대한 단축 속성들에 대해 다룹니다. + +- [플로팅과 위치 지정을 위한 논리적 속성](/ko/docs/Web/CSS/CSS_logical_properties_and_values/Floating_and_positioning) + + - : `float`, `clear`, [inset 속성](/ko/docs/Glossary/Inset_properties) 그리고 `resize` 에 사용되는 물리적인 값과 논리적인 값들 사이의 상세 매핑에 대해 다룹니다. + +## 연관 개념 + +- {{CSSxRef("caption-side")}} +- {{CSSxRef("clear")}} +- {{CSSxRef("float")}} +- {{CSSxRef("resize")}} +- {{CSSxRef("text-align")}} + +[CSS box model](/ko/docs/Web/CSS/CSS_box_model) + +- {{CSSxRef("margin")}} 단축어 +- {{CSSxRef("padding")}} 단축어 + +[CSS box sizing](/ko/docs/Web/CSS/CSS_box_sizing) + +- {{CSSxRef("max-height")}} +- {{CSSxRef("max-width")}} +- {{CSSxRef("min-height")}} +- {{CSSxRef("min-width")}} + +[CSS backgrounds and borders](/ko/docs/Web/CSS/CSS_backgrounds_and_borders) + +- {{CSSxRef("border-color")}} +- {{CSSxRef("border-style")}} +- {{CSSxRef("border-width")}} +- {{CSSxRef("border")}} 단축어 +- {{CSSxRef("border-radius")}} + +[CSS positioned layout](/ko/docs/Web/CSS/CSS_positioned_layout) + +- {{CSSxRef("top")}} +- {{CSSxRef("right")}} +- {{CSSxRef("bottom")}} +- {{CSSxRef("left")}} + +[CSS writing modes](/ko/docs/Web/CSS/CSS_writing_modes) + +- {{CSSxRef("direction")}} +- {{CSSxRef("text-orientation")}} +- {{CSSxRef("writing-mode")}} + +[CSS containment](/ko/docs/Web/CSS/CSS_containment) + +- {{CSSxRef("contain-intrinsic-block-size")}} +- {{CSSxRef("contain-intrinsic-inline-size")}} + +[CSS overflow](/ko/docs/Web/CSS/CSS_overflow) + +- {{CSSxRef("overflow-block")}} +- {{CSSxRef("overflow-inline")}} + +[CSS overscroll behavior](/ko/docs/Web/CSS/CSS_overscroll_behavior) + +- {{CSSxRef("overscroll-behavior-block")}} +- {{CSSxRef("overscroll-behavior-inline")}} + +## 명세서 + +{{Specifications}} + +## 같이 보기 + +- [플로우 레이아웃과 쓰기 모드](/ko/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_writing_modes) +- [CSS 유연한 박스 레이아웃](/ko/docs/Web/CSS/CSS_flexible_box_layout) 모듈 +- [CSS 그리드 레이아웃](/ko/docs/Web/CSS/CSS_grid_layout) 모듈 diff --git a/files/ko/web/css/css_nesting/using_css_nesting/index.md b/files/ko/web/css/css_nesting/using_css_nesting/index.md index 781b7842d6d393..02f708abb4b10d 100644 --- a/files/ko/web/css/css_nesting/using_css_nesting/index.md +++ b/files/ko/web/css/css_nesting/using_css_nesting/index.md @@ -55,7 +55,7 @@ parent child { > **참고:** 이 예제는 본래의 명세서를 구현하 브라우저와 현재의 중첩 명세를 구현한 브라우저에서의 다른 결과를 보여줍니다. 2023년 8월 이전에 크롬 혹은 사파리에서 구현된 명세에서는 `&` 중첩 선택자를 필요로 했습니다. 현재의 명세를 지원하는 브라우저라면 두 가지 예제 모두에서 두번째 예제와 동일한 결과를 보여줍니다. -#### 중첩 선택자를 사용하는 경우 +#### 중첩 선택자를 사용하지 않는 경우 ##### HTML @@ -100,7 +100,7 @@ label { {{EmbedLiveSample('Without_nesting_selector','100%','120')}} -#### 중첩 선택자를 사용하지 않는 경우 +#### 중첩 선택자를 사용하는 경우 ##### HTML diff --git a/files/ko/web/css/css_text/wrapping_breaking_text/index.md b/files/ko/web/css/css_text/wrapping_breaking_text/index.md new file mode 100644 index 00000000000000..bf1502bfe6498a --- /dev/null +++ b/files/ko/web/css/css_text/wrapping_breaking_text/index.md @@ -0,0 +1,81 @@ +--- +title: 텍스트의 줄 바꾸기 및 끊기 +slug: Web/CSS/CSS_text/Wrapping_breaking_text +l10n: + sourceCommit: 5637472cb47c01ed1fda8bcad41a1244b239b226 +--- + +{{CSSRef}} + +이 안내서는 CSS에서 넘치는 텍스트를 관리하는 다양한 방법에 대해 설명합니다. + +## 넘치는 텍스트가 무엇일까요? + +CSS에서, 매우 긴 단어와 같이 끊을 수 없는 문자열이 있다면, 기본적으로 문자열보다 작은 크기의 컨테이너 밖 인라인 방향으로 넘치게 됩니다. 우리는 이 과정을 다음 예제에서 확인할 수 있습니다. 긴 단어는 그것이 포함된 박스의 경계 밖으로 확장되고 있습니다. + +{{EmbedGHLiveSample("css-examples/css-text/inline-overflow.html", '100%', 420)}} + +CSS는 데이터 손실을 방지하기 위해 넘치는 것을 이러한 방법으로 표현합니다. CSS에서 데이터 손실은 일부 콘텐츠가 사라지는 것을 의미합니다. 그래서 {{cssxref("overflow")}} 의 초기값은 `visible` 인데, 이렇게 하면 텍스트가 넘치는 것을 볼 수 있습니다. 일반적으로는 다소 지저분해 보이더라도 넘치는 내용을 볼 수 있는 것이 나을 겁니다. 만약 내용이 마치 `overflow` 가 `hidden` 인 것처럼 사라지거나 잘리게 된다면 사이트를 볼 때 그것이 있다는 것을 알아차리지 못할 겁니다. 지저분하게 넘치는 것은 최소한 내용이 있다는 것을 알아차릴 수는 있고, 최악의 경우에도 사이트 방문자가 그것이 조금 이상하게 보이더라도 내용을 보고 읽을 수 있을 것입니다. + +다음 예제에서는 만일 `overflow` 값을 `hidden` 으로 설정하면 어떤 일이 일어나는지 확인할 수 있습니다. + +{{EmbedGHLiveSample("css-examples/css-text/inline-overflow-hidden.html", '100%', 420)}} + +## 최소 콘텐츠 크기 찾기 + +콘텐츠가 넘치지 않고 모두 포함하는 박스의 최소 크기를 찾으려면, 박스의 {{cssxref("width")}} 혹은 {{cssxref("inline-size")}} 속성을 {{cssxref("min-content")}} 로 설정합니다. + +{{EmbedGHLiveSample("css-examples/css-text/min-content.html", '100%', 420)}} + +따라서 `min-content` 를 사용하는 것은 넘치는 박스를 처리하는 하나의 방법입니다. 콘텐츠가 요구하는 최소 크기만큼 박스의 크기를 늘이려면, 그렇지만 그 이상으로 커지지 않도록 하려면, 이 키워드를 사용하여 크기를 얻을 수 있습니다. + +## 긴 단어 끊기 + +만일 박스가 고정된 크기를 가져야 한다면, 혹은 긴 단어를 넘치치 않게 해야 한다면 {{cssxref("overflow-wrap")}} 속성이 도움이 될 겁니다. 이 속성은 단어가 한 줄로 표현되기에는 너무 길 때 단어를 끊습니다. + +{{EmbedGHLiveSample("css-examples/css-text/overflow-wrap.html", '100%', 660)}} + +> **참고:** `overflow-wrap` 속성은 비표준 속성인 `word-wrap` 과 같은 방식으로 동작합니다. 이제 브라우저에서는 `word-wrap` 속성을 표준 속성의 별칭처럼 취급합니다. + +다른 대안 속성은 {{cssxref("word-break")}} 를 시도해 보는 것입니다. 이 속성은 단어를 넘치는 지점에서 끊습니다. 이 속성은 단어를 새 줄에 배치하면 끊지 않고 표시할 수 있는 경우에도 단어를 끊습니다. + +다음 예제에서는, 같은 텍스트 문자열의 다른 두 속성에 대해 비교할 수 있습니다. + +{{EmbedGHLiveSample("css-examples/css-text/word-break.html", '100%', 700)}} + +이것은 문자열이 딱 들어맞을 만큼의 공간이 있는 경우 큰 공백이 나타나지 않게끔 하고자 할 때 사용하면 유용할 것입니다. +혹은, 다른 요소 바로 뒤에 즉각적으로 끊김이 발생하지 않아야 할 때도 유용합니다. + +이 예제에서는 체크박스와 라벨이 존재합니다. 라벨이 박스보다 커서 이것을 끊어야 할 때를 가정해 봅시다. 하지만, 체크박스 바로 뒤에서 줄바꿈이 되는 것은 원하지 않습니다. + +{{EmbedGHLiveSample("css-examples/css-text/word-break-checkbox.html", '100%', 660)}} + +## 하이픈(-) 추가하기 + +단어가 끊길 때 하이픈을 추가하려면, CSS {{cssxref("hyphens")}} 속성을 사용하면 됩니다. `auto` 값을 사용하면, 브라우저는 하이픈이 있을 적절한 위치에서 자동으로 단어를 끊을 수 있고, 선택한 규칙을 따르게 됩니다. 과정에 대해 약간의 제어가 필요하다면, `manual` 값을 사용하고, 문자열에 강제로 혹은 선택적으로 줄바꿈 문자를 삽입합니다. 강제 줄바꿈 (`‐`) 은 그것이 필요하지 않을 때에도 항상 줄바꿈을 합니다. 선택적 줄바꿈은 (`­`) 줄바꿈이 필요할 떄에만 줄바꿈을 합니다. + +{{EmbedGHLiveSample("css-examples/css-text/hyphens.html", '100%', 600)}} + +{{cssxref("hyphenate-character")}} 속성을 언어의 기본 하이픈 문자 대신 원하는 문자열을 줄 끝에서 (하이픈으로 줄바꿈을 하기 전) 사용할 수 있습니다. `auto` 값은 현재 콘텐츠 언어의 타이포그래피 관습에 따라 단어 중간의 줄바꿈을 표시하는 올바른 값을 선택합니다. + +CSS 는 추가적인 하이폰 제어도 제공합니다. {{cssxref("hyphenate-limit-chars")}} 속성은 하이픈을 허용할 수 있는 최소 단어의 길이와 하이픈 앞뒤로 최소 문자 수를 설정하는 데에 사용됩니다. + +## `` 요소 + +긴 문자열을 어디서 끊을지 알고 있다면 HTML {{HTMLElement("wbr")}} 요소를 삽입하는 것 또한 가능합니다. 이것은 긴 URL 을 페이지에 표시하는 경우에 유용하게 사용됩니다. 읽기 쉬운 적절한 위치에서 문자열을 끊고자 할 때 이 속성을 추가합니다. + +다음 예제에서는 {{HTMLElement("wbr")}}의 위치에서 텍스트가 끊깁니다. + +{{EmbedGHLiveSample("css-examples/css-text/wbr.html", '100%', 460)}} + +## 같이 보기 + +- HTML {{HTMLElement("wbr")}} 요소 +- CSS {{cssxref("word-break")}} 속성 +- CSS {{cssxref("overflow-wrap")}} 속성 +- CSS {{cssxref("white-space")}} 속성 +- CSS {{cssxref("text-wrap")}} 속성 +- CSS {{cssxref("hyphens")}} 속성 +- CSS {{cssxref("hyphenate-character")}} 속성 +- CSS {{cssxref("hyphenate-limit-chars")}} 속성 +- [CSS에서 넘침과 데이터 손실](https://www.smashingmagazine.com/2019/09/overflow-data-loss-css/) diff --git a/files/ko/web/css/place-self/index.md b/files/ko/web/css/place-self/index.md new file mode 100644 index 00000000000000..0b4256def47827 --- /dev/null +++ b/files/ko/web/css/place-self/index.md @@ -0,0 +1,172 @@ +--- +title: place-self +slug: Web/CSS/place-self +l10n: + sourceCommit: c72b86b3d6818ec6c8df1d52a77513d769f4164e +--- + +{{CSSRef}} + +**`place-self`** [CSS](/ko/docs/Web/CSS) [단축 속성](/ko/docs/Web/CSS/Shorthand_properties) 은 [그리드](/ko/docs/Web/CSS/CSS_grid_layout) 혹은 [플렉스박스](/ko/docs/Web/CSS/CSS_flexible_box_layout) 와 같은 관계형 레이아웃 시스템에서 블록 방향과 인라인 방향에서 한번에 개별 요소를 정렬합니다 (예시. {{CSSxRef("align-items")}} 와 {{CSSxRef("justify-items")}} 속성). 만일 두번째 값이 지정되지 않는다면, 첫번째 값이 두번째 값으로도 사용됩니다. + +{{EmbedInteractiveExample("pages/css/place-self.html")}} + +## 구성 속성 + +이 속성은 다음 CSS의 단축형입니다. + +- [`align-self`](/ko/docs/Web/CSS/align-self) +- [`justify-self`](/ko/docs/Web/CSS/justify-self) + +## 구문 + +```css +/* 키워드 값 */ +place-self: auto center; +place-self: normal start; + +/* 위치 정렬 */ +place-self: center normal; +place-self: start auto; +place-self: end normal; +place-self: self-start auto; +place-self: self-end normal; +place-self: flex-start auto; +place-self: flex-end normal; + +/* 기준선 정렬 */ +place-self: baseline normal; +place-self: first baseline auto; +place-self: last baseline normal; +place-self: stretch auto; + +/* 전역 값 */ +place-self: inherit; +place-self: initial; +place-self: revert; +place-self: revert-layer; +place-self: unset; +``` + +### 값 + +- `auto` + - : 부모 속성의 {{cssxref("align-items")}} 값으로 계산됩니다. +- `normal` + + - : 이 키워드의 효과는 우리가 만든 레이아웃 모드에 따라 달라집니다. + + - 절대 위치로 지정된 레이아웃의 경우, 이 키워드는 대체된 절대 위치 박스에서 `start` 처럼 동작하고, 다른 모든 절대 위치 박스에서는 `stretch` 처럼 동작합니다. + - 플렉스 요소들에서, 이 키워드는 `stretch` 처럼 동작합니다. + - 그리드 요소들에서, 이 키워드는 `stretch` 와 비슷한 동작을 하지만, {{glossary("aspect ratio")}} 박스 형태 혹은 고유한 크기를 가진 박스에서는 `start` 처럼 동작합니다. + - 이 속성은 블록 레벨의 박스나 표 셀에 적용되지 않습니다. + +- `self-start` + - : 요소를 교차 축의 시작 지점에 해당하는 정렬 컨테이너의 가장자리에 맞게 정렬합니다. +- `self-end` + - : 요소를 교차 축의 끝 지점에 해당하는 정렬 컨테이너의 가장자리에 맞게 정렬합니다. +- `flex-start` + - : 플렉스 요소의 교차 시작 마진 가장자리가 선의 교차 시작 가장자리에 맞닿습니다. +- `flex-end` + - : 플렉스 요소의 교차 끝 마진 가장자리가 선의 교차 끝 가장자리에 맞닿습니다. +- `center` + - : 플렉스 요소의 마진 박스가 교차 축의 선 중앙에 위치합니다. 만일 요소의 교차 크기가 플렉스 컨테이너보다 큰 경우, 요소는 양쪽 방향으로 균등하게 넘칩니다. +- `baseline`, `first baseline`. `last baseline` + + - : 첫번째 혹은 마지막 기준선 정렬에 참여를 지정합니다. 박스의 첫번째 혹은 마지막 기준선 세트의 정렬 기준선을 해당 기준선을 공유하는 그룹의 모든 박스의 공유 첫번째 혹은 마지막 기준선 세트에 있는 기준선과 맞추어 정렬합니다. + `first baseline` 의 대체 정렬은 `start` 이며, `last baseline` 의 대체 정렬은 `end` 입니다. + +- `stretch` + - : 교차 축을 따라 결합된 요소들의 크기가 정렬 컨테이너보다 작고 크기가 `auto`로 지정된 경우, 해당 요소의 크기는 동일하게 (비례하지 않게) 증가하는 반면, {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (혹은 동등한 기능)에 의해 발생하는 제약들을 준수하여 모든 `auto` 크기의 요소들의 결합된 크기가 교차 축을 따라 정렬 컨테이너를 정확히 채웁니다. + +## 형식 정의 + +{{cssinfo}} + +## 형식 구문 + +{{csssyntax}} + +## 예제 + +### 간단히 시연해보기 + +다음은 2 x 2 그리드 레이아웃 예제입니다. 초기에 그리드 컨테이너의 [`justify-items`](/ko/docs/Web/CSS/justify-items) 와 [`align-items`](/ko/docs/Web/CSS/align-items)는 기본 값인 `stretch` 로 설정되어 있어 그리드 요소가 해당 셀의 전체 너비만큼 늘어납니다. + +두번째, 세번째, 그리고 네번째 그리드 요소는 기본 각기 다른 `place-self` 값을 부여하여, 이러한 값들이 기본 배치를 어떻게 재정의하는지를 나타냅니다. 이 값들은 그리드 요소가 콘텐츠의 너비/높이에 맞추어 너비/높이를 조정하고, 블록 방향과 인라인 방향에서 셀 내 다른 위치에 정렬될 수 있도록 합니다. + +#### HTML + +```html +
+ 첫번째 + 두번째 + 세번쨰 + 네번째 +
+``` + +#### CSS + +```css +html { + font-family: helvetica, arial, sans-serif; + letter-spacing: 1px; +} + +article { + background-color: red; + display: grid; + grid-template-columns: 1fr 1fr; + grid-auto-rows: 80px; + grid-gap: 10px; + margin: 20px; + width: 300px; +} + +span:nth-child(2) { + place-self: start center; +} + +span:nth-child(3) { + place-self: center start; +} + +span:nth-child(4) { + place-self: end; +} + +article span { + background-color: black; + color: white; + margin: 1px; + text-align: center; +} + +article, +span { + padding: 10px; + border-radius: 7px; +} +``` + +#### 결과 + +{{EmbedLiveSample('Simple_demonstration', '100%', 300)}} + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- CSS 플렉스박스 가이드: [플렉스박스의 기본 개념](/ko/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- CSS 플렉스박스 가이드: [플렉스 컨테이너에서의 요소 정렬](/ko/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) +- CSS 그리드 가이드: [CSS 그리드 레이아웃 에서의 박스 정렬](/ko/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) +- [CSS 박스 정렬](/ko/docs/Web/CSS/CSS_box_alignment) +- {{cssxref("align-self")}} 속성 +- {{cssxref("justify-self")}} 속성 diff --git a/files/ko/web/http/headers/upgrade/index.md b/files/ko/web/http/headers/upgrade/index.md new file mode 100644 index 00000000000000..ab7b5a3180ec6e --- /dev/null +++ b/files/ko/web/http/headers/upgrade/index.md @@ -0,0 +1,110 @@ +--- +title: Upgrade +slug: Web/HTTP/Headers/Upgrade +l10n: + sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8 +--- + +{{HTTPSidebar}} + +HTTP 1.1 전용 `Upgrade` 헤더는 이미 설정된 클라이언트/서버 연결을 다른 프로토콜로 업그레이드하는데 사용할 수 있습니다. 예를 들어서 클라이언트가 HTTP 1.1에서 HTTP 2.0으로 업그레이드하는데 사용하거나, HTTP 또는 HTTPS 연결을 웹소켓으로 업그레이드하는데 사용할 수 있습니다. + +> **경고:** HTTP/2는 이 메커니즘의 사용을 명시적으로 허용하지 않고, HTTP/1.1에서만 명시적으로 허용합니다. + + + + + + + + + + + + +
헤더 타입 + {{Glossary("Request header", "요청 헤더")}}, + {{Glossary("Response header", "응답 헤더")}} +
{{Glossary("Forbidden header name", "금지된 헤더 이름")}}예
+ +## 개요 + +`Upgrade` 헤더 필드는 클라이언트가 서버에게 우선순위가 내림차순으로 나열된 프로토콜 중 하나로 전환할 것을 요청하는데 사용됩니다. + +예를 들어 클라이언트는 전환할 선호 프로토콜(아래는 "example/1"과 "foo/2"인 경우)을 나열하여 다음과 같이 `GET` 요청을 보낼 수 있습니다. + +```http +GET /index.html HTTP/1.1 +Host: www.example.com +Connection: upgrade +Upgrade: example/1, foo/2 +``` + +> **참조:** `Upgrade`를 전송할 때마다 `Connection: upgrade`를 설정해야 합니다. + +서버는 어떤 이유로든 요청을 무시하도록 선택할 수 있으며, 이 경우 {{HTTPStatus(200, "200 OK")}}와 같이 업그레이드 헤더가 전송되지 않은 것처럼 응답해야 합니다. + +만약 서버가 연결을 업그레이드하기로 결정했으면 반드시 업그레이드해야 합니다. + +1. 전환할 프로토콜을 명시하는 `Upgrade` 헤더와 함께 {{HTTPStatus(101, "101 Switching Protocols")}}를 반환합니다. + + ```http + HTTP/1.1 101 Switching Protocols + Upgrade: foo/2 + Connection: Upgrade + ``` + +2. 새로운 프로토콜을 사용하여 원래 요청에 대한 응답을 보냅니다. 서버는 원래 요청을 완료할 수 있는 프로토콜로만 전환할 수 있습니다. + +서버는 {{HTTPStatus("426")}} `Upgrade Required` 응답의 일부로 이 헤더를 보낼 수도 있으며, 이것은 서버가 현재 프로토콜을 사용하여 요청을 수행하지 않지만, 프로토콜이 변경되면 수행할 수 있음을 나타냅니다. 클라이언트는 위 프로세스를 사용하여 프로토콜 변경을 요청할 수 있습니다. + +자세힌 내용과 예제는 [프로토콜 업그레이드 메커니즘](/ko/docs/Web/HTTP/Protocol_upgrade_mechanism) 항목에서 제공합니다. + +## 구문 + +```http +Connection: upgrade +Upgrade: protocol_name[/protocol_version] +``` + +참조 + +- {{HTTPHeader("Connection")}} 헤더의 `upgrade` 유형은 항상 `Upgrade` 헤더와 함께 전송되어야 합니다. +- 프로토콜은 쉼표로 구분하여 선호도 기준 내림차순으로 나열됩니다. 프로토콜 버전은 선택사항입니다. + +```http +Connection: upgrade +Upgrade: a_protocol/1, example, another_protocol/2.2 +``` + +## 지시어 + +- 쉼표로 구분한 프로토콜 이름 목록 (선택적으로 버전 포함) + - : 하나 이상의 프로토콜 이름과 버전(이름과 버전은 "/"로 구분). 프로토콜은 선호도 기준 내림차순으로 나열합니다. + +## 예제 + +```http +Connection: upgrade +Upgrade: HTTP/2.0, SHTTP/1.3, IRC/6.9, RTA/x11 +``` + +```http +Connection: Upgrade +Upgrade: websocket +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [프로토콜 업그레이드 메커니즘](/ko/docs/Web/HTTP/Protocol_upgrade_mechanism) +- {{HTTPStatus("101")}} `Switching Protocol` +- {{HTTPStatus("426")}} `Upgrade Required` +- {{HTTPHeader("Connection")}} diff --git a/files/ko/web/http/overview/index.md b/files/ko/web/http/overview/index.md index 63d976904bc109..d641dc6ed2cb4a 100644 --- a/files/ko/web/http/overview/index.md +++ b/files/ko/web/http/overview/index.md @@ -7,11 +7,11 @@ slug: Web/HTTP/Overview **HTTP는 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는** {{glossary("protocol", "프로토콜")}}입니다. HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트-서버 프로토콜이기도 합니다. 클라이언트-서버 프로토콜이란 (보통 웹브라우저인) 수신자 측에 의해 요청이 초기화되는 프로토콜을 의미합니다. 하나의 완전한 문서는 텍스트, 레이아웃 설명, 이미지, 비디오, 스크립트 등 불러온(fetched) 하위 문서들로 재구성됩니다. -![웹 문서는 다른 리소스들의 구성](fetching_a_page.png) +![웹 문서는 다른 리소스들의 구성](https://mdn.github.io/shared-assets/images/diagrams/http/overview/fetching-a-page.svg) 클라이언트와 서버들은 (데이터 스트림과 대조적으로) 개별적인 메시지 교환에 의해 통신합니다. 보통 브라우저인 클라이언트에 의해 전송되는 메시지를 요청(_requests_)이라고 부르며, 그에 대해 서버에서 응답으로 전송되는 메시지를 응답(_responses_)이라고 부릅니다. -![TCP(전송 계층) 및 IP(네트워크 계층) 위 및 표시 계층 아래의 응용 계층 프로토콜로서의 HTTP.](http-layers.png) +![TCP(전송 계층) 및 IP(네트워크 계층) 위 및 표시 계층 아래의 응용 계층 프로토콜로서의 HTTP.](https://mdn.github.io/shared-assets/images/diagrams/http/overview/http-layers.svg) 1990년대 초에 설계된 HTTP는 거듭하여 진화해온 확장 가능한 프로토콜입니다. HTTP는 애플리케이션 계층의 프로토콜로, 신뢰 가능한 전송 프로토콜이라면 이론상으로는 무엇이든 사용할 수 있으나 {{glossary("TCP")}} 혹은 암호화된 TCP 연결인 {{glossary("TLS")}}를 통해 전송됩니다. HTTP의 확장성 덕분에, 오늘날 하이퍼텍스트 문서 뿐만 아니라 이미지와 비디오 혹은 HTML 폼 결과와 같은 내용을 서버로 포스트(POST)하기 위해서도 사용됩니다. HTTP는 또한 필요할 때마다 웹 페이지를 갱신하기 위해 문서의 일부를 가져오는데 사용될 수도 있습니다. @@ -21,7 +21,7 @@ HTTP는 클라이언트-서버 프로토콜입니다. 요청은 하나의 개체 각각의 개별적인 요청들은 서버로 보내지며, 서버는 요청을 처리하고 *response*라고 불리는 응답을 제공합니다. 이 요청과 응답 사이에는 여러 개체들이 있는데, 예를 들면 다양한 작업을 수행하는 게이트웨이 또는 {{glossary("Cache", "캐시")}} 역할을 하는 {{glossary("Proxy_server", "프록시")}} 등이 있습니다. -![클라이언트 서버 체인](client-server-chain.png) +![클라이언트 서버 체인](https://mdn.github.io/shared-assets/images/diagrams/http/overview/client-server-chain.svg) 실제로는 브라우저와 요청을 처리하는 서버 사이에는 좀 더 많은 컴퓨터들이 존재합니다: 라우터, 모뎀 등이 있죠. 웹의 계층적인 설계 덕분에, 이들은 네트워크와 전송 계층 내로 숨겨집니다. HTTP은 애플리케이션 계층의 최상위에 있습니다. 네트워크 문제를 진단하는 것도 중요하지만, 기본 레이어들은 HTTP의 명세와는 거의 관련이 없습니다. @@ -143,9 +143,9 @@ HTTP 메시지의 두 가지 타입인 요청(requests)과 응답(responses)은 요청은 다음의 요소들로 구성됩니다. -![HTTP 요청](http_request.png) +![HTTP 요청](https://mdn.github.io/shared-assets/images/diagrams/http/overview/http-request.svg) -- HTTP [메서드](/ko/docs/Web/HTTP/Methods), 보통 클라이언트가 수행하고자 하는 동작을 정의한 {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}} 같은 동사나 {{HTTPMethod("OPTIONS")}}나 {{HTTPMethod("HEAD")}}와 같은 명사입니다. 일반적으로, 클라이언트는 리소스를 가져오거나(`GET`을 사용하여) [HTML 폼](/ko/docs/Web/Guide/HTML/Forms)의 데이터를 전송(`POST`를 사용하여)하려고 하지만, 다른 경우에는 다른 동작이 요구될 수도 있습니다. +- HTTP [메서드](/ko/docs/Web/HTTP/Methods), 보통 클라이언트가 수행하고자 하는 동작을 정의한 {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}} 같은 동사나 {{HTTPMethod("OPTIONS")}}나 {{HTTPMethod("HEAD")}}와 같은 명사입니다. 일반적으로, 클라이언트는 리소스를 가져오거나(`GET`을 사용하여) [HTML 폼](/ko/docs/Learn/Forms)의 데이터를 전송(`POST`를 사용하여)하려고 하지만, 다른 경우에는 다른 동작이 요구될 수도 있습니다. - 가져오려는 리소스의 경로; 예를 들면 {{glossary("protocol", "프로토콜")}} (`http://`), {{glossary("domain", "도메인")}} (여기서는 `developer.mozilla.org`), 또는 TCP {{glossary("port", "포트")}} (여기서는 `80`)인 요소들을 제거한 리소스의 URL입니다. - HTTP 프로토콜의 버전. - 서버에 대한 추가 정보를 전달하는 선택적 [헤더들](/ko/docs/Web/HTTP/Headers). @@ -155,7 +155,7 @@ HTTP 메시지의 두 가지 타입인 요청(requests)과 응답(responses)은 응답은 다음의 요소들로 구성됩니다. -![HTTP 응답](http_response.png) +![HTTP 응답](https://mdn.github.io/shared-assets/images/diagrams/http/overview/http-response.svg) - HTTP 프로토콜의 버전 - 요청의 성공 여부와, 그 이유를 나타내는 [상태 코드](/ko/docs/Web/HTTP/Status) diff --git a/files/ko/web/javascript/reference/global_objects/array/at/index.md b/files/ko/web/javascript/reference/global_objects/array/at/index.md index c2764a8b38a1af..469a6156c4f506 100644 --- a/files/ko/web/javascript/reference/global_objects/array/at/index.md +++ b/files/ko/web/javascript/reference/global_objects/array/at/index.md @@ -2,7 +2,7 @@ title: Array.prototype.at() slug: Web/JavaScript/Reference/Global_Objects/Array/at l10n: - sourceCommit: b7ca46c94631967ecd9ce0fe36579be334a01275 + sourceCommit: a815a95e4ab4adf391d8a7bc66a3abbce1a686d8 --- {{JSRef}} @@ -32,6 +32,8 @@ at(index) 일반적인 방법은 {{jsxref("Array/length", "length")}}에 접근하고, 그로부터 인덱스를 계산하는 것입니다(예: `array[array.length - 1]`). `at()` 메서드는 상대 인덱싱을 허용하므로 이를 `array.at(-1)`로 단축할 수 있습니다. +`at()`와 {{jsxref("Array/with", "with()")}}를 결합하면 음수 인덱스를 사용하여 각각 배열을 읽고 쓸 수 있습니다. + `at()` 메서드는 [범용적](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#범용_배열_메서드)입니다. `this` 값에는 `length` 속성과 정수 키 속성만 있을 것으로 예상합니다. ## 예제 diff --git a/files/ko/web/javascript/reference/global_objects/array/find/index.md b/files/ko/web/javascript/reference/global_objects/array/find/index.md index b64b2c36c28807..af745cb8d15151 100644 --- a/files/ko/web/javascript/reference/global_objects/array/find/index.md +++ b/files/ko/web/javascript/reference/global_objects/array/find/index.md @@ -2,7 +2,7 @@ title: Array.prototype.find() slug: Web/JavaScript/Reference/Global_Objects/Array/find l10n: - sourceCommit: b7ca46c94631967ecd9ce0fe36579be334a01275 + sourceCommit: 6589a6a25a5d2e9a359c3f02f37c670fb7c74259 --- {{JSRef}} @@ -14,6 +14,7 @@ l10n: - 배열에 값이 **존재**하는지 찾아야 하는 경우, {{jsxref("Array/includes", "includes()")}}를 사용하세요. 이 역시 테스트 함수를 사용하는 것 대신 각 요소가 값과 동일한지 확인합니다. - 제공된 테스트 함수를 만족하는 요소가 있는지 찾아야 하는 경우, {{jsxref("Array/some", "some()")}}을 사용하세요. +- 만약 주어진 테스트 함수를 만족하는 모든 요소를 찾고 싶으면 {{jsxref("Array/filter", "filter()")}}을 사용하세요. {{EmbedInteractiveExample("pages/js/array-find.html","shorter")}} @@ -43,18 +44,10 @@ find(callbackFn, thisArg) ## 설명 -`find()` 메서드는 [순회 메서드](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#순회_메서드)입니다. 이 메서드는 `callbackFn`이 [참](/ko/docs/Glossary/Truthy) 값을 반환할 때까지, 오름차순 인덱스로 순서로 배열의 각 요소에 대해 제공된 `callbackFn` 함수를 한 번씩 호출합니다. 그런 다음 `find()`는 해당 요소를 반환하고 배열 순회를 중지합니다. `callbackFn`이 [참](/ko/docs/Glossary/Truthy) 값을 반환하지 않으면, `find()`는 {{jsxref("undefined")}}를 반환합니다. +`find()` 메서드는 [순회 메서드](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#순회_메서드)입니다. 이 메서드는 `callbackFn`이 [참 같은](/ko/docs/Glossary/Truthy) 값을 반환할 때까지, 오름차순 인덱스로 순서로 배열의 각 요소에 대해 제공된 `callbackFn` 함수를 한 번씩 호출합니다. 그런 다음 `find()`는 해당 요소를 반환하고 배열 순회를 중지합니다. `callbackFn`이 [참 같은](/ko/docs/Glossary/Truthy) 값을 반환하지 않으면, `find()`는 {{jsxref("undefined")}}를 반환합니다. 더 자세한 정보는 [순회 메서드](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#순회_메서드) 섹션을 보시기 바랍니다. 이 섹션에는 이러한 메서드가 일반적으로 어떻게 동작하는지 설명하고 있습니다. `callbackFn`은 값이 할당된 인덱스뿐만 아니라 배열의 모든 인덱스에 대해 호출됩니다. [희소 배열](/ko/docs/Web/JavaScript/Guide/Indexed_collections#희소_배열)의 빈 슬롯은 `undefined`와 동일하게 동작합니다. -`find()`는 호출되는 배열을 변경하지 않지만, `callbackFn`으로 제공된 함수는 변경할 수 있습니다. 그러나 배열의 length는 `callbackFn`을 처음 호출하기 전에 저장된다는 점에 유의하세요. 따라서, - -- `callbackFn`은 `find()` 호출이 시작되었을 때 배열의 초기 length 값을 초과하여 추가된 요소는 방문하지 않습니다. -- 이미 방문한 인덱스를 변경해도 `callbackFn`이 해당 인덱스에 대해 다시 호출되지 않습니다. -- 배열의 아직 방문하지 않은 기존 요소가 `callbackFn`에 의해 변경되는 경우, `callbackFn`에 전달된 값은 해당 요소가 방문될 당시의 값이 됩니다. [삭제된](/ko/docs/Web/JavaScript/Reference/Operators/delete) 요소는 `undefined`가 있는것 처럼 방문됩니다. - -> **경고:** 위에서 설명한 종류의 동시 수정은 이해하기 어려운 코드를 만드는 경우가 많으므로 일반적으로 지양해야 합니다(특별한 경우 제외). - `find()` 메서드는 [범용](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#범용_배열_메서드)입니다. `this` 값에는 `length` 속성과 정수 키 속성만 있을 것으로 예상합니다. ## 예제 @@ -109,6 +102,24 @@ console.log([4, 6, 8, 12].find(isPrime)); // undefined, 소수 없음 console.log([4, 5, 8, 12].find(isPrime)); // 5 ``` +### callbackFn의 세 번째 인수 사용하기 + +`array` 인수는 배열의 다른 요소에 접근하려는 경우, 특히 배열을 참조하는 기존 변수가 없는 경우에 유용합니다. 다음 예제에서는 먼저 `filter()`를 사용하여 양수 값을 추출한 다음 `find()`를 사용하여 이웃 요소보다 작은 첫 번째 요소를 찾습니다. + +```js +const numbers = [3, -1, 1, 4, 1, 5, 9, 2, 6]; +const firstTrough = numbers + .filter((num) => num > 0) + .find((num, idx, arr) => { + // arr 인수가 없으면 변수에 저장하지 않고는 + // 중간 배열에 쉽게 접근할 수 없습니다. + if (idx > 0 && num >= arr[idx - 1]) return false; + if (idx < arr.length - 1 && num >= arr[idx + 1]) return false; + return true; + }); +console.log(firstTrough); // 1 +``` + ### 희소 배열에서 find() 사용하기 희소 배열의 빈 슬롯은 `undefined`와 동일하게 동작합니다. @@ -176,7 +187,7 @@ console.log(Array.prototype.find.call(arrayLike, (x) => !Number.isInteger(x))); ## 같이 보기 - [`core-js`의 `Array.prototype.find` 폴리필](https://github.com/zloirock/core-js#ecmascript-array) -- [인덱스 기반 컬렉션](/ko/docs/Web/JavaScript/Guide/Indexed_collections) +- [인덱스 기반 컬렉션](/ko/docs/Web/JavaScript/Guide/Indexed_collections) 안내서 - {{jsxref("Array")}} - {{jsxref("Array.prototype.findIndex()")}} - {{jsxref("Array.prototype.findLast()")}} diff --git a/files/ko/web/javascript/reference/global_objects/array/length/index.md b/files/ko/web/javascript/reference/global_objects/array/length/index.md index 2ca045bbc0b6f9..c17a12d0711a5d 100644 --- a/files/ko/web/javascript/reference/global_objects/array/length/index.md +++ b/files/ko/web/javascript/reference/global_objects/array/length/index.md @@ -1,64 +1,66 @@ --- title: Array.length slug: Web/JavaScript/Reference/Global_Objects/Array/length +l10n: + sourceCommit: 5c3c25fd4f2fbd7a5f01727a65c2f70d73f1880a --- {{JSRef}} -`Array` 인스턴스의 **`length`** 속성은 배열의 길이를 반환합니다. 반환값은 부호 없는 32비트 정수형이며, 배열의 최대 인덱스보다 항상 큽니다. **`length`** 속성에 값을 설정할 경우 배열의 길이를 변경합니다. +{{jsxref("Array")}} 인스턴스의 **`length`** 데이터 속성은 해당 배열의 요소 수를 나타냅니다. 해당 값은 부호 없는 32비트 정수이며 배열의 최대 인덱스 보다 항상 큽니다. -{{EmbedInteractiveExample("pages/js/array-length.html")}} +{{EmbedInteractiveExample("pages/js/array-length.html", "shorter")}} + +## 값 + +232보다 작은 음수가 아닌 정수. + +{{js_property_attributes(1, 0, 0)}} ## 설명 -`length` 속성의 값은 양의 정수이며 2^32 미만의 값을 가집니다. +`length` 속성의 값은 양의 정수이며 232 미만의 값을 가집니다. ```js -var namelistA = new Array(4294967296); // 2의 32제곱 = 4294967296 -var namelistC = new Array(-100); // 음수 +const listA = [1, 2, 3]; +const listB = new Array(6); -console.log(namelistA.length); // RangeError: Invalid array length -console.log(namelistC.length); // RangeError: Invalid array length +console.log(listA.length); +// 3 + +console.log(listB.length); +// 6 -var namelistB = []; -namelistB.length = Math.pow(2, 32) - 1; // 길이를 2의 32제곱 미만으로 설정 -console.log(namelistB.length); +listB.length = 2 ** 32; // 4294967296 +// RangeError: Invalid array length -// 4294967295 +const listC = new Array(-100); // 음수 값은 허용되지 않습니다 +// RangeError: Invalid array length ``` -아무 때나 `length` 속성에 값을 설정해 배열을 절단할 수 있습니다. `length` 속성으로 배열의 길이를 늘리면 실제 원소의 수가 증가합니다. 예를 들어 길이가 2인 배열의 `length`를 3으로 설정한다면 마지막에 `undefined`가 추가돼 총 3개의 요소를 갖게 됩니다. +배열 객체는 `length` 속성을 주시하여, `length` 값을 배열의 내용과 자동으로 동기화합니다. 이것은 다음을 의미합니다. + +- `length`를 현재 길이보다 작은 값으로 설정하면 배열이 잘립니다. 새 `length`를 초과하는 요소는 삭제됩니다. +- 배열 인덱스(232보다 작은, 음이 아닌 정수)를 현재 `length` 이상으로 설정하면 배열이 확장됩니다. 새로운 가장 큰 인덱스를 반영하도록 `length` 속성이 증가합니다. +- `length`를 잘못된 값(예: 음수 또는 정수가 아닌 값)으로 설정하면 `RangeError` 예외가 발생합니다. + +`length`가 현재 길이보다 큰 값으로 설정되면 실제 `undefined` 값이 아닌 [빈 슬롯](/ko/docs/Web/JavaScript/Guide/Indexed_collections#희소_배열)을 추가하여 배열을 확장합니다. 빈 슬롯은 배열 방법과 몇 가지 특별한 상호 작용을 합니다. [배열 방법과 빈 슬롯](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#배열_메서드와_빈_슬롯)을 참조하십시오. ```js -var arr = [1, 2, 3]; -printEntries(arr); - -arr.length = 5; // set array length to 5 while currently 3. -printEntries(arr); - -function printEntries(arr) { - var length = arr.length; - for (var i = 0; i < length; i++) { - console.log(arr[i]); - } - console.log("=== printed ==="); -} +const arr = [1, 2]; +console.log(arr); +// [ 1, 2 ] +arr.length = 5; // 현재 길이가 2이지만 배열의 길이를 5로 설정합니다. +console.log(arr); +// [ 1, 2, <3 empty items> ] + +arr.forEach((element) => console.log(element)); // 1 // 2 -// 3 -// === printed === -// 1 -// 2 -// 3 -// undefined -// undefined -// === printed === ``` -그러나 `length` 속성의 값이 꼭 배열에 정의된 원소의 수를 나타내진 않습니다. [`length`와 숫자형 속성의 관계](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#length_%EC%99%80_%EC%88%AB%EC%9E%90%ED%98%95_%EC%86%8D%EC%84%B1%EC%9D%98_%EA%B4%80%EA%B3%84)를 참고하세요. - -{{js_property_attributes(1, 0, 0)}} +[length와 숫자 속성의 관계](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#length와_숫자_속성의_관계)를 참고하시기 바랍니다. ## 예제 @@ -67,9 +69,9 @@ function printEntries(arr) { 다음 예제는 `numbers` 배열을 length 속성의 크기만큼 순회합니다. 각 원소의 값은 두 배가 됩니다. ```js -var numbers = [1, 2, 3, 4, 5]; -var length = numbers.length; -for (var i = 0; i < length; i++) { +const numbers = [1, 2, 3, 4, 5]; +const length = numbers.length; +for (let i = 0; i < length; i++) { numbers[i] *= 2; } // numbers is now [2, 4, 6, 8, 10] @@ -80,7 +82,7 @@ for (var i = 0; i < length; i++) { 다음 예제는 `numbers` 배열의 현재 길이가 3보다 클 경우 3으로 줄입니다. ```js -var numbers = [1, 2, 3, 4, 5]; +const numbers = [1, 2, 3, 4, 5]; if (numbers.length > 3) { numbers.length = 3; @@ -88,9 +90,33 @@ if (numbers.length > 3) { console.log(numbers); // [1, 2, 3] console.log(numbers.length); // 3 +console.log(numbers[3]); // undefined; 추가 요소는 삭제되었습니다. +``` + +### 고정 길이의 빈 배열 생성하기 + +`length`를 현재 크기보다 더 크게 설정하면 [희소 배열](/ko/docs/Web/JavaScript/Guide/Indexed_collections#희소_배열)을 생성합니다. + +```js +const numbers = []; +numbers.length = 3; +console.log(numbers); // [empty x 3] +``` + +### length 쓰기 불가능한 배열 + +`length` 속성은 현재 길이를 넘어 요소가 추가되면 Array에 의해 자동으로 업데이트됩니다. `length` 속성이 쓰기 불가능한 경우 Array는 이를 업데이트할 수 없습니다. 이로 인해 [엄격 모드](/ko/docs/Web/JavaScript/Reference/Strict_mode)에서 오류가 발생합니다. + +```js +"use strict"; + +const numbers = [1, 2, 3, 4, 5]; +Object.defineProperty(numbers, "length", { writable: false }); +numbers[5] = 6; // TypeError: Cannot assign to read only property 'length' of object '[object Array]' +numbers.push(5); // // TypeError: Cannot assign to read only property 'length' of object '[object Array]' ``` -## 명세 +## 명세서 {{Specifications}} @@ -100,4 +126,8 @@ console.log(numbers.length); // 3 ## 같이 보기 +- [인덱스 기반 컬렉션](/ko/docs/Web/JavaScript/Guide/Indexed_collections) 안내서 - {{jsxref("Array")}} +- [`TypedArray.prototype.length`](/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/length) +- [`String`: `length`](/ko/docs/Web/JavaScript/Reference/Global_Objects/String/length) +- [RangeError: invalid array length](/ko/docs/Web/JavaScript/Reference/Errors/Invalid_array_length) diff --git a/files/ko/web/javascript/reference/global_objects/array/of/index.md b/files/ko/web/javascript/reference/global_objects/array/of/index.md index d627e752aabe87..c79732c60174bf 100644 --- a/files/ko/web/javascript/reference/global_objects/array/of/index.md +++ b/files/ko/web/javascript/reference/global_objects/array/of/index.md @@ -1,31 +1,28 @@ --- title: Array.of() slug: Web/JavaScript/Reference/Global_Objects/Array/of +l10n: + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`Array.of()`** 메서드는 인자의 수나 유형에 관계없이 가변 인자를 갖는 새 `Array` 인스턴스를 만듭니다. +**`array.of()`** 정적 메서드는 인자의 수나 유형에 관계없이 가변적인 수의 인자로부터 새로운 `Array` 인스턴스를 생성합니다. -`Array.of()`와 `Array` 생성자의 차이는 정수형 인자의 처리 방법에 있습니다. `Array.of(7)`은 하나의 요소 `7`을 가진 배열을 생성하지만 `Array(7)`은 `length` 속성이 7인 빈 배열을 생성합니다. - -```js -Array.of(7); // [7] -Array.of(1, 2, 3); // [1, 2, 3] - -Array(7); // [ , , , , , , ] -Array(1, 2, 3); // [1, 2, 3] -``` +{{EmbedInteractiveExample("pages/js/array-of.html", "shorter")}} ## 구문 -```js - Array.of(element0[, element1[, ...[, elementN]]]) +```js-nolint +Array.of() +Array.of(element1) +Array.of(element1, element2) +Array.of(element1, element2, /* …, */ elementN) ``` ### 매개변수 -- `elementN` +- `element1`, …, `elementN` - : 배열을 생성할 때 사용할 요소. ### 반환 값 @@ -34,29 +31,51 @@ Array(1, 2, 3); // [1, 2, 3] ## 설명 -이 함수는 ECMAScript 2015 표준 일부입니다. 자세한 정보는 [`Array.of`, `Array.from` 제안 사항](https://gist.github.com/rwaldron/1074126)과 [`Array.of` 폴리필](https://gist.github.com/rwaldron/3186576)에서 확인하실 수 있습니다. +`Array.of()`와 [`Array()`](/ko/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); // array of 7 empty slots + +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() 사용하기 + ```js Array.of(1); // [1] Array.of(1, 2, 3); // [1, 2, 3] Array.of(undefined); // [undefined] ``` -## 폴리필 +### 배열이 아닌 생성자에서 of() 호출하기 -아래 코드를 다른 코드 이전에 포함하면 `Array.of`를 지원하지 않는 환경에서도 사용할 수 있습니다. +`of()` 메서드는 새 배열의 길이를 나타내는 단일 인수를 받는 모든 생성자 함수에서 호출할 수 있습니다. ```js -if (!Array.of) { - Array.of = function () { - return Array.prototype.slice.call(arguments); - }; +function NotArray(len) { + console.log("NotArray called with length", len); } + +console.log(Array.of.call(NotArray, 1, 2, 3)); +// NotArray 길이를 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}} @@ -66,6 +85,9 @@ if (!Array.of) { ## 같이 보기 +- [`core-js`에서의 `Array.of`의 폴리필](https://github.com/zloirock/core-js#ecmascript-array) +- [인덱스 기반 컬렉션](/ko/docs/Web/JavaScript/Guide/Indexed_collections) 안내서 - {{jsxref("Array")}} +- {{jsxref("Array/Array", "Array()")}} - {{jsxref("Array.from()")}} - {{jsxref("TypedArray.of()")}} diff --git a/files/ko/web/javascript/reference/global_objects/array/with/index.md b/files/ko/web/javascript/reference/global_objects/array/with/index.md index 54c845eaeb0c31..7d9d549c79600a 100644 --- a/files/ko/web/javascript/reference/global_objects/array/with/index.md +++ b/files/ko/web/javascript/reference/global_objects/array/with/index.md @@ -2,7 +2,7 @@ title: Array.prototype.with() slug: Web/JavaScript/Reference/Global_Objects/Array/with l10n: - sourceCommit: 6bd17cb9cbc2d11163617b9f71706e93fdd743c8 + sourceCommit: 85d7482697cc2bf407c58e809a2a754180d6714c --- {{JSRef}} @@ -19,7 +19,7 @@ array.with(index, value) - `index` - : 배열을 변경할 0 기반 인덱스이며 [정수로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#integer_conversion)되는 값입니다. - - 음수 인덱스는 배열의 끝부터 역산합니다 — `index < 0`인 경우 `index + array.length`가 사용됩니다. + - 음수 인덱스는 배열의 끝부터 역산합니다 — `-array.length <= index < 0`인 경우 `index + array.length`가 사용됩니다. - 정규화 후 인덱스가 범위를 벗어나면, {{jsxref("RangeError")}}가 발생합니다. - `value` - : 주어진 인덱스에 할당할 값입니다. @@ -37,6 +37,8 @@ array.with(index, value) `with()` 메서드는 배열에서 주어진 인덱스의 값을 변경하여, 주어진 인덱스에 있는 요소가 주어진 값으로 대체된 새 배열을 반환합니다. 원래 배열은 수정되지 않습니다. 이를 통해 조작을 수행하는 동안 배열 메서드를 연속으로 이어서 호출 할 수 있습니다. +`with()`를 {{jsxref("Array/at", "at()")}}와 결합하면, 음수 인덱스를 사용하여 배열을 각각 읽고 쓸 수 있습니다. + `with()` 메서드는 [희소 배열](/ko/docs/Web/JavaScript/Guide/Indexed_collections#희소배열)을 생성하지 않습니다. 만약 원래 배열이 희소 배열인 경우 빈 슬롯은 새로운 배열에서 `undefined`으로 대체됩니다. `with()` 메서드는 [제네릭](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#generic_array_methods) 메서드입니다. 이 메서드는 `this` 값에 `length` 속성과 정수 키 속성 만을 필요로 합니다. @@ -71,8 +73,7 @@ console.log(arr.with(0, 2)); // [2, undefined, 3, 4, undefined, 6] ### 배열이 아닌 객체에서 with() 호출하기 -`with()` 메서드는 `this`의 `length` 속성을 읽습니다. 그리고 `this`의 정수 키 속성을 읽어서 새 배열에 쓰고, -`value`는 주어진 `index`에 씁니다. +`with()` 메서드는 새로운 배열을 생성하고 반환합니다. 이 메서드는 `this`의 `length` 속성을 읽은 다음 키가 `length`보다 작은, 음수가 아닌 정수인 각 속성에 접근합니다. `this`의 각 속성에 접근하면 속성의 키와 동일한 인덱스를 갖는 배열 요소가 속성의 값으로 설정됩니다. 마지막으로 `index`의 배열 값은 `value`로 설정됩니다. ```js const arrayLike = { @@ -80,6 +81,7 @@ const arrayLike = { unrelated: "foo", 0: 5, 2: 4, + 3: 3, // length가 3이기 때문에 with()메서드는 이를 무시합니다. }; console.log(Array.prototype.with.call(arrayLike, 0, 1)); // [ 1, undefined, 4 ] @@ -96,7 +98,9 @@ console.log(Array.prototype.with.call(arrayLike, 0, 1)); ## 같이 보기 - [Polyfill of `Array.prototype.with` in `core-js`](https://github.com/zloirock/core-js#change-array-by-copy) +- [인덱스 기반 컬렉션](/ko/docs/Web/JavaScript/Guide/Indexed_collections) 가이드 - {{jsxref("Array.prototype.toReversed()")}} - {{jsxref("Array.prototype.toSorted()")}} - {{jsxref("Array.prototype.toSpliced()")}} +- {{jsxref("Array.prototype.at()")}} - {{jsxref("TypedArray.prototype.with()")}} diff --git a/files/ko/web/javascript/reference/global_objects/internalerror/index.md b/files/ko/web/javascript/reference/global_objects/internalerror/index.md index 727b176d3f4a33..a571feb71f0d3d 100644 --- a/files/ko/web/javascript/reference/global_objects/internalerror/index.md +++ b/files/ko/web/javascript/reference/global_objects/internalerror/index.md @@ -1,6 +1,8 @@ --- title: InternalError slug: Web/JavaScript/Reference/Global_Objects/InternalError +l10n: + sourceCommit: 5c3c25fd4f2fbd7a5f01727a65c2f70d73f1880a --- {{JSRef}} {{non-standard_header}} @@ -14,25 +16,27 @@ slug: Web/JavaScript/Reference/Global_Objects/InternalError - "array initializer too large", (배열 초기화 값이 너무 큼) - "too much recursion". (너무 많은 재귀 호출) +`InternalError`는 {{jsxref("Error")}}의 하위 클래스입니다. + ## 생성자 -- {{jsxref("InternalError/InternalError", "InternalError()")}} +- {{jsxref("InternalError/InternalError", "InternalError()")}} {{non-standard_inline}} - : 새로운 `InternalError` 객체를 만듭니다. ## 인스턴스 속성 -- {{jsxref("Error.prototype.message", "InternalError.prototype.message")}} - - : 오류 메시지. {{jsxref("Error")}}로부터 상속되었습니다. -- {{jsxref("Error.prototype.name", "InternalError.prototype.name")}} - - : 오류 이름. {{jsxref("Error")}}로부터 상속되었습니다. -- {{jsxref("Error.prototype.fileName", "InternalError.prototype.fileName")}} - - : 오류가 발생한 파일 경로. {{jsxref("Error")}}로부터 상속되었습니다. -- {{jsxref("Error.prototype.lineNumber", "InternalError.prototype.lineNumber")}} - - : 오류가 발생한 곳의 줄 번호. {{jsxref("Error")}}로부터 상속되었습니다. -- {{jsxref("Error.prototype.columnNumber", "InternalError.prototype.columnNumber")}} - - : 오류가 발생한 행의 열 번호. {{jsxref("Error")}}로부터 상속되었습니다. -- {{jsxref("Error.prototype.stack", "InternalError.prototype.stack")}} - - : 스택 추적. {{jsxref("Error")}}로부터 상속되었습니다. +또한 부모 {{jsxref("Error")}}에서 인스턴스 속성을 상속합니다. + +아래 속성은 `InternalError.prototype`에서 정의되었고, 모든 `InternalError` 인스턴스애서 공유됩니다. + +- {{jsxref("Object/constructor", "InternalError.prototype.constructor")}} + - : 인스턴스 객체를 생성하는 생성자 함수입니다. `InternalError` 인스턴스의 경우 초기 값은 {{jsxref("InternalError/InternalError", "InternalError")}} 생성자입니다. +- {{jsxref("Error/name", "InternalError.prototype.name")}} + - : 오류 유형의 이름을 나타냅니다. `InternalError.prototype.name`의 경우 초기 값은 `"InternalError"`입니다. + +## 인스턴스 메서드 + +부모인 {{jsxref("Error")}}로부터 인스턴스 메서드를 상속합니다. ## 예제 @@ -52,11 +56,12 @@ function loop(x) { loop(0); ``` -이 조건을 매우 높은 값으로 설정하면 작동하지 않습니다: +이 조건을 매우 높은 값으로 설정하면 작동하지 않습니다. ```js example-bad function loop(x) { if (x >= 1000000000000) return; + // 어떤 코드 loop(x + 1); } @@ -67,7 +72,7 @@ loop(0); 더 많은 정보를 보려면 [InternalError: too much recursion(너무 많은 재귀 호출)](/ko/docs/Web/JavaScript/Reference/Errors/Too_much_recursion)를 보시길 바랍니다. -## 명세 +## 명세서 어떤 표준에도 속하지 않습니다. diff --git a/files/ko/web/javascript/reference/global_objects/internalerror/internalerror/index.md b/files/ko/web/javascript/reference/global_objects/internalerror/internalerror/index.md new file mode 100644 index 00000000000000..13bb70996bfc6d --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/internalerror/internalerror/index.md @@ -0,0 +1,62 @@ +--- +title: InternalError() 생성자 +slug: Web/JavaScript/Reference/Global_Objects/InternalError/InternalError +l10n: + sourceCommit: 5c3c25fd4f2fbd7a5f01727a65c2f70d73f1880a +--- + +{{JSRef}}{{Non-standard_Header}} + +**`InternalError()`** 생성자는 {{jsxref("InternalError")}} 객체를 생성합니다. + +## 구문 + +```js-nolint +new InternalError() +new InternalError(message) +new InternalError(message, options) +new InternalError(message, fileName) +new InternalError(message, fileName, lineNumber) + +InternalError() +InternalError(message) +InternalError(message, options) +InternalError(message, fileName) +InternalError(message, fileName, lineNumber) +``` + +> **참고:** `InternalError()`는 [`new`](/ko/docs/Web/JavaScript/Reference/Operators/new)와 함께 호출하거나 혹은 `new` 없이 호출할 수 있습니다. 두 방법 모두 새로운 `InternalError` 인스턴스를 생성합니다. + +### 매개변수 + +- `message` {{optional_inline}} + - : 사람이 읽을 수 있는 오류에 대한 설명 +- `options` {{optional_inline}} + - : 다음의 속성을 가지는 객체 + - `cause` {{optional_inline}} + - : 오류의 구체적인 원인을 나타내는 속성입니다. + 보다 구체적이거나 유용한 오류 메시지가 포함된 오류를 처리 및 다시 예외를 발생시킬 때 이 속성을 사용하여 원래 오류를 전달할 수 있습니다. +- `fileName` {{optional_inline}} {{non-standard_inline}} + - : 이 예외가 발생한 코드가 초함된 파일의 이름 +- `lineNumber` {{optional_inline}} {{non-standard_inline}} + - : 이 예외가 발생한 코드의 라인 수 + +## 예제 + +### 새로운 InternalError 생성하기 + +```js +new InternalError("Engine failure"); +``` + +## 명세서 + +어떤 표준에도 속하지 않습니다. + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{jsxref("Error")}} diff --git a/files/ko/web/javascript/reference/global_objects/intl/index.md b/files/ko/web/javascript/reference/global_objects/intl/index.md new file mode 100644 index 00000000000000..c7e43e44854725 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/intl/index.md @@ -0,0 +1,162 @@ +--- +title: Intl +slug: Web/JavaScript/Reference/Global_Objects/Intl +l10n: + sourceCommit: 165d921f6f96711117be2b6513944ce36c70703f +--- + +{{JSRef}} + +**`Intl`** 네임스페이스 객체에는 여러 생성자와 국제화 생성자 및 기타 언어에 민감한 함수에 공통된 기능이 포함되어 있습니다. 이를 종합하여 언어에 민감한 문자열 비교, 숫자 서식, 날짜 및 시간 서식 등을 제공하는 ECMAScript 국제화 API를 구성합니다. + +## 설명 + +대부분의 전역 객체와 달리 `Intl`은 생성자가 아닙니다. [`new` 연산자](/ko/docs/Web/JavaScript/Reference/Operators/new)와 함께 사용하거나 `Intl` 객체를 함수로 호출할 수 없습니다. {{jsxref("Math")}} 객체와 마찬가지로 `Intl`의 모든 프로퍼티와 메서드는 정적입니다. + +국제화 생성자뿐만 아니라 다른 생성자의 여러 언어에 민감한 메서드([같이 보기](#같이_보기)에 나열되어 있습니다)는 로케일을 식별하고 실제로 사용할 로케일을 결정하는 데 공통 패턴을 사용합니다. 모두 `locales` 및 `options` 인수를 받아들이고 `options.localeMatcher` 속성에 지정된 알고리즘을 사용하여 지원되는 로케일에 대해 요청된 로케일을 협상하는 방식입니다. + +### locales 인수 + +`locales` 인수는 주어진 연산에 사용되는 로케일을 정하는 데 사용됩니다. JavaScript 구현체는 `locales`을 검사하고 표현된 기본 설정을 충족하기 위해 가장 근접한 로케일을 계산합니다. 아래 항목이 `locales`이 될 수 있습니다. + +- `undefined` (흑은 생략): 구현체의 기본 로케일을 사용합니다. +- 하나의 로케일: 하나의 로케일 식별자 혹은 로케일 식별자를 감싸는 [`Intl.Locale`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) 객체 +- 로케일 리스트: 다른 값은 객체로 변환된 다음 로케일 배열로 처리됩니다. + +후자의 두 경우에서 사용되는 실제 로케일은 [로케일 협상](#로케일_식별_및_협상)을 통해 결정된, 가장 잘 지원되는 로케일입니다. 로케일 식별자가 문자열이나 객체가 아닌 경우 {{jsxref("TypeError")}}가 발생합니다. 로케일 식별자가 구문상 유효하지 않은 문자열인 경우 {{jsxref("RangeError")}}가 발생합니다. 로케일 식별자가 제대로 형성되었지만 구현체가 이를 인식하지 못하면 무시되고 목록의 다음 로케일이 고려되어 결국 시스템의 로케일로 되돌아갑니다. 그러나 구현체가 향후 모든 로케일에 대한 데이터를 추가할 수 있으므로 특정 로케일 이름이 무시되는 것에 의존해서는 안 됩니다. 예를 들어 `new Intl.DateTimeFormat("default")`는 `"default"`가 구문상으로는 유효하지만 어떤 로케일로도 인식되지 않기 때문에 구현체의 기본 로케일만 사용하게 됩니다. + +로케일 식별자는 다음으로 구성된 문자열입니다. + +1. 2~3자 또는 5~8자로 구성된 언어 하위 태그 +2. 4글자로 구성된 스크립트 하위 태그 {{optional_inline}} +3. 2글자 또는 3자리로 구성된 지역 하위 태그 {{optional_inline}} +4. 각각 5~8개의 영숫자 또는 숫자 한 자리 뒤에 영숫자 3개가 포함된 하나 이상의 변형 하위 태그(반드시 모두 고유해야 함) {{optional_inline}} +5. 하나 이상의 BCP 47 확장 시퀀스 {{optional_inline}} +6. 개인용 확장 시퀀스 {{optional_inline}} + +각 하위 태그와 시퀀스는 하이픈으로 구분됩니다. 로케일 식별자는 대소문자를 구분하지 않는 {{Glossary("ASCII")}}입니다. 그러나 스크립트 하위 태그에는 제목 대문자(첫 글자는 대문자, 이어지는 글자는 소문자)를, 지역 하위 태그에는 대문자를, 그 외에는 모두 소문자를 사용하는 것이 일반적입니다. 예를 들어 + +- `"hi"`: 힌두어(언어) +- `"de-AT"`: 오스트리아(지역)에서 사용하는 독일어(언어) +- `"zh-Hans-CN"`: 중국(지역)에서 사용하는 간체(스크립트)로 쓰인 중국어(언어) +- `"en-emodeng"`: "초기 현대 영어" 방언(변형)의 영어(언어) + +언어, 스크립트, 지역(국가 포함) 및 변형(드물게 사용)을 식별하는 하위 태그는 [IANA 언어 하위 태그 레지스트리](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)에 등록되어 있습니다. 이 레지스트리는 시간이 지남에 따라 주기적으로 업데이트되며 구현이 항상 최신 상태가 아닐 수도 있으므로 하위 태그가 널리 지원될 것이라는데 너무 의존하지 마시기 바랍니다. + +BCP 47 확장 시퀀스는 한 자리 숫자 또는 문자(`"x"` 제외)와 하이픈으로 구분된 하나 이상의 2~8자리 숫자 또는 숫자 하위 태그로 구성됩니다. 각 숫자 또는 문자당 하나의 시퀀스만 허용됩니다 `"de-a-foo-a-foo"`는 유효하지 않습니다. BCP 47 확장자 하위태그는 [유니코드 CLDR 프로젝트](https://github.com/unicode-org/cldr/tree/main/common/bcp47)에 정의되어 있습니다. 현재 두 개의 확장자만 의미가 정의되어 있습니다. + +- `"u"`(유니코드) 확장자는 `Intl` API 객체의 추가 사용자 지정을 요청하는 데 사용할 수 있습니다. 아래는 예시입니다. + + - `"de-DE-u-co-phonebk"`: 독일어 정렬 순서의 전화번호부 변형을 사용하여 다음과 같이 움라우트 모음을 해당 문자 쌍으로 해석합니다. ä → ae, ö → oe, ü → ue. + - `"th-TH-u-nu-thai"`: 숫자 형식에 태국 숫자(๐, ๑, ๒, ๓, ๔, ๕, ๖, ๗, ๘, ๙)를 사용합니다. + - `"ja-JP-u-ca-japanese"`: 날짜 및 시간 서식에서 일본 달력을 사용하여 2013년을 헤이세이 시대 25년, 즉 平成 25로 표시합니다. + - `"en-GB-u-ca-islamic"`: 영국식 영어와 이슬람(회교) 달력을 사용하며, 2017년 10월 14일 그레고리력은 1439년 무하람 24일 회교력입니다. + +- `"t"`(변환됨) 확장자는 변환된 콘텐츠(예: 다른 로케일에서 번역된 텍스트)를 나타냅니다. 현재 `Intl` 기능은 `"t"` 확장자를 고려하지 않습니다. 그러나 이 확장자는 때때로 확장자가 없는 중첩 로케일을 포함합니다. 예를 들어 `"de-t-en"`의 변환된 확장자는 영어에 대한 로케일 식별자를 포함합니다. 중첩 로케일이 있는 경우 유효한 로케일 식별자이어야 합니다. 예를 들어 `"en-emodeng-emodeng"`은 중복된 `emodeng` 변형 하위 태그가 포함되어 있으므로 유효하지 않으므로 `"de-t-en-emodeng-emodeng"`도 유효하지 않습니다. + +마지막으로 문자 `"x"`를 사용하는 비공개 확장자 시퀀스 뒤에 하이픈으로 구분된 하나 이상의 1~8자 또는 숫자 하위 태그가 나타날 수 있습니다. 이를 통해 애플리케이션은 자체적으로 비공개로 사용할 정보를 인코딩할 수 있으며, 모든 `Intl` 연산에서 무시됩니다. + +### options 인수 + +`options` 인수는 생성자와 함수마다 다른 속성을 가진 객체여야 합니다. `options` 인수가 제공되지 않거나 정의되지 않은 경우 모든 속성에 기본값이 사용됩니다. + +`localeMatcher` 속성은 모든 언어에 민감한 생성자 및 함수에서 지원됩니다. 이 속성의 값은 문자열 `"lookup"` 또는 `"best fit"`이어야 하며 아래에 설명된 로케일 일치 알고리즘 중 하나를 선택해야 합니다. + +### 로케일 식별 및 협상 + +`locales` 인수로 지정된 로케일 목록은 유니코드 확장이 제거된 후 애플리케이션에서 우선순위가 지정된 요청으로 해석됩니다. 런타임은 이를 사용 가능한 로케일과 비교하여 사용 가능한 최상의 로케일을 선택합니다. 여기엔 두 가지 매칭 알고리즘이 존재합니다. `"lookup"` 매칭은 [BCP 47](https://datatracker.ietf.org/doc/html/rfc4647#section-3.4)에 명시된 Lookup 알고리즘을 따르고, `"best fit"` 매칭은 런타임이 Lookup 알고리즘의 결과보다 최소한 요청에 더 적합한 로케일을 제공할 수 있도록 합니다. 만약 애플리케이션에서 `locales` 인수를 제공하지 않거나 런타임에 요청과 일치하는 로케일이 없는 경우 런타임의 기본 로케일이 사용됩니다. 일치 여부 검사기는 `options` 인수의 속성을 사용하여 선택할 수 있습니다(아래를 참조하시기 바랍니다). + +선택한 로케일 식별자에 유니코드 확장 순서가 있는 경우 이제 해당 확장을 사용하여 생성된 객체 또는 함수의 동작을 사용자 맞춤 사용할 수 있습니다. 각 생성자 또는 함수는 유니코드 확장에 대해 정의된 키의 하위 집합만 지원하며, 지원되는 값은 로케일 식별자에 따라 달라지는 경우가 많습니다. 예를 들어 `"co"` 키(콜레이션)는 {{jsxref("Intl.Collator")}}에서만 지원되며, `"phonebk"` 값은 독일어에서만 지원됩니다. + +## 정적 속성 + +- {{jsxref("Intl.Collator")}} + - : 언어별 문자열 비교를 가능하게 하는 객체인 콜레이터의 생성자입니다. +- {{jsxref("Intl.DateTimeFormat")}} + - : 언어별 날짜와 시간 형식을 정할 수 있는 객체의 생성자입니다. +- {{jsxref("Intl.DisplayNames")}} + - : 언어, 지역 및 스크립트 표시 이름을 일관되게 번역할 수 있는 객체의 생성자입니다. +- {{jsxref("Intl.DurationFormat")}} {{experimental_inline}} + - : 로케일별로 기간 형식을 지정할 수 있는 객체의 생성자입니다. +- {{jsxref("Intl.ListFormat")}} + - : 언어별 리스트 형식을 정할 수 있는 객체의 생성자입니다. +- {{jsxref("Intl.Locale")}} + - : 유니코드 식별자를 표현할 수 있는 객체의 생성자입니다. +- {{jsxref("Intl.NumberFormat")}} + - : 언어별 숫자 형식을 정할 수 있는 객체의 생성자입니다. +- {{jsxref("Intl.PluralRules")}} + - : 복수형을 구분하는 형식과 언어별 규칙을 활성화하는 객체의 생성자입니다. +- {{jsxref("Intl.RelativeTimeFormat")}} + - : 상대 시간 형식을 정할 수 있는 객체의 생성자입니다. +- {{jsxref("Intl.Segmenter")}} + - : 로케일에 따른 텍스트 세그먼트를 정할 수 있는 객체의 생성자입니다. +- `Intl[@@toStringTag]` + - : [`@@toStringTag`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag)속성의 초기값은 문자열 `"Intl"`입니다. 이 속성은 {{jsxref("Object.prototype.toString()")}}에서 사용합니다. + +## 정적 메서드 + +- {{jsxref("Intl.getCanonicalLocales()")}} + - : 표준 로케일 이름을 반환합니다. +- {{jsxref("Intl.supportedValuesOf()")}} + - : 구현체에서 지원하는 지원되는 고유한 달력, 콜레이션, 통화, 숫자 체계 또는 단위 값이 포함된, 정렬된 배열을 반환합니다. + +## 예제 + +### 날짜와 숫자 서식 지정 + +`Intl`를 사용하여 특정 언어 및 지역의 일반적인 형식으로 날짜 및 숫자 형식을 지정할 수 있습니다. + +```js +const count = 26254.39; +const date = new Date("2012-05-24"); + +function log(locale) { + console.log( + `${new Intl.DateTimeFormat(locale).format(date)} ${new Intl.NumberFormat( + locale, + ).format(count)}`, + ); +} + +log("en-US"); // 5/24/2012 26,254.39 + +log("de-DE"); // 24.5.2012 26.254,39 +``` + +### 브라우저의 선호 언어 사용하기 + +`Intl` 메서드에 하드코딩된 로케일 이름을 전달하는 대신 {{domxref("navigator.language")}}에서 제공하는 사용자가 선호하는 언어를 사용할 수 있습니다. + +```js +const date = new Date("2012-05-24"); + +const formattedDate = new Intl.DateTimeFormat(navigator.language).format(date); +``` + +또는 {{domxref("navigator.languages")}} 속성은 사용자가 선호하는 언어의 정렬된 목록을 제공합니다. 이 목록을 `Intl` 생성자에 직접 전달하여 기본 설정 기반 로케일 대체 선택을 구현할 수 있습니다. [로케일 협상](#로케일_식별_및_협상) 프로세스는 사용 가능한 가장 적합한 로케일을 선택하는 데 사용됩니다. + +```js +const count = 26254.39; + +const formattedCount = new Intl.NumberFormat(navigator.languages).format(count); +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{jsxref("String.prototype.localeCompare()")}} +- {{jsxref("Number.prototype.toLocaleString()")}} +- {{jsxref("Date.prototype.toLocaleString()")}} +- {{jsxref("Date.prototype.toLocaleDateString()")}} +- {{jsxref("Date.prototype.toLocaleTimeString()")}} +- {{domxref("Keyboard.getLayoutMap()")}} +- {{domxref("navigator.language")}} +- {{domxref("navigator.languages")}} +- [The ECMAScript Internationalization API](https://norbertlindenberg.com/2012/12/ecmascript-internationalization-api/index.html) by Norbert Lindenberg (2012) diff --git a/files/ko/web/javascript/reference/global_objects/intl/listformat/index.md b/files/ko/web/javascript/reference/global_objects/intl/listformat/index.md new file mode 100644 index 00000000000000..d7e4e20cfc03d6 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/intl/listformat/index.md @@ -0,0 +1,102 @@ +--- +title: Intl.ListFormat +slug: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat +l10n: + sourceCommit: 70f09675ddcfc75a3bb66d2dce4cf82738948a37 +--- + +{{JSRef}} + +**`Intl.ListFormat`** 객체는 언어별 목록 서식을 가능하게 합니다. + +{{EmbedInteractiveExample("pages/js/intl-listformat.html", "taller")}} + +## 생성자 + +- {{jsxref("Intl/ListFormat/ListFormat", "Intl.ListFormat()")}} + - : `Intl.ListFormat` 객체를 생성합니다. + +## 정적 메서드 + +- {{jsxref("Intl/ListFormat/supportedLocalesOf", "Intl.ListFormat.supportedLocalesOf()")}} + - : 런타임의 기본 로케일로 돌아가지 않고 지원되는 제공된 로케일이 포함된 배열을 반환합니다. + +## 인스턴스 속성 + +다음 속성은 `Intl.ListFormat.prototype`에 정의되어 있으며, 모든 `Intl.ListFormat` 인스턴스에 공유됩니다. + +- {{jsxref("Object/constructor", "Intl.ListFormat.prototype.constructor")}} + - : 인스턴스 객체를 생성한 생성자 함수입니다. `Intl.ListFormat` 인스턴스의 경우, 초기 값은 {{jsxref("Intl/ListFormat/ListFormat", "Intl.ListFormat")}} 생성자입니다. +- `Intl.ListFormat.prototype[@@toStringTag]` + - : [`@@toStringTag`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) 속성의 초기 값은 문자열 `"Intl.ListFormat"` 입니다. 이 속성은 {{jsxref("Object.prototype.toString()")}}에서 사용합니다. + +## 인스턴스 메서드 + +- {{jsxref("Intl/ListFormat/format", "Intl.ListFormat.prototype.format()")}} + - : 목록의 요소를 표현하는 언어별 형식의 문자열을 반환합니다. +- {{jsxref("Intl/ListFormat/formatToParts", "Intl.ListFormat.prototype.formatToParts()")}} + - : 로케일 인식 방식으로 값 목록의 형식을 맞추는 데 사용할 수 있는 컴포넌트를 의미하는 객체 배열을 반환합니다. +- {{jsxref("Intl/ListFormat/resolvedOptions", "Intl.ListFormat.prototype.resolvedOptions()")}} + - : 현재 {{jsxref("Intl.ListFormat")}} 객체를 구성하는 동안 계산된 로케일 및 스타일 서식 지정 옵션을 반영하는 속성을 가진 새 객체를 반환합니다. + +## 예제 + +### format 사용하기 + +다음 예제는 영어를 사용하여 목록 형식기를 만드는 방법을 보여줍니다. + +```js +const list = ["Motorcycle", "Bus", "Car"]; + +console.log( + new Intl.ListFormat("en-GB", { style: "long", type: "conjunction" }).format( + list, + ), +); +// Motorcycle, Bus and Car + +console.log( + new Intl.ListFormat("en-GB", { style: "short", type: "disjunction" }).format( + list, + ), +); +// Motorcycle, Bus or Car + +console.log( + new Intl.ListFormat("en-GB", { style: "narrow", type: "unit" }).format(list), +); +// Motorcycle Bus Car +``` + +### formatToParts 사용하기 + +다음 예제는 형식이 맞춰진 부분을 반환하는 목록 형식기를 만드는 방법을 보여줍니다. + +```js +const list = ["Motorcycle", "Bus", "Car"]; +console.log( + new Intl.ListFormat("en-GB", { + style: "long", + type: "conjunction", + }).formatToParts(list), +); + +// [ { "type": "element", "value": "Motorcycle" }, +// { "type": "literal", "value": ", " }, +// { "type": "element", "value": "Bus" }, +// { "type": "literal", "value": ", and " }, +// { "type": "element", "value": "Car" } ]; +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [FormatJS에서 `Intl.ListFormat`의 폴리필](https://formatjs.io/docs/polyfills/intl-listformat/) +- {{jsxref("Intl")}} diff --git a/files/ko/web/javascript/reference/global_objects/intl/locale/casefirst/index.md b/files/ko/web/javascript/reference/global_objects/intl/locale/casefirst/index.md new file mode 100644 index 00000000000000..823ffb7a38cca7 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/intl/locale/casefirst/index.md @@ -0,0 +1,57 @@ +--- +title: Intl.Locale.prototype.caseFirst +slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/caseFirst +l10n: + sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a +--- + +{{JSRef}} + +{{jsxref("Intl.Locale")}} 인스턴스의 **`caseFirst`** 접근자 속성은 이 로케일의 데이터 정렬 규칙에 대/소문자가 고려되는지 여부를 반환합니다. + +## 설명 + +로케일의 데이터 정렬 규칙은 해당 로케일에서 문자열이 정렬되는 방식을 결정하는 데 사용됩니다. 특정 로케일은 데이터 정렬 과정에서 문자의 대소문자를 사용합니다. 이 추가 규칙은 {{jsxref("Intl.Locale")}} 객체의 `caseFirst` 속성으로 표현할 수 있습니다. + +아래 요약된 표와 같이 `caseFirst` 속성에는 3가지 값이 있습니다. + +### `caseFirst` 값 + +| 값 | 설명 | +| ------- | --------------------------------- | +| `upper` | 소문자보다 대문자를 앞서 정렬. | +| `lower` | 대문자보다 소문자를 앞서 정렬. | +| `false` | 정렬에 특별한 대소문자 구분 없음. | + +## 예제 + +### 로케일 문자열을 통한 caseFirst 값 설정하기 + +[유니코드 로케일 문자열 명세](https://www.unicode.org/reports/tr35/)에서 `caseFirst`가 나타내는 값은 키 `kf`에 해당합니다. `kf`는 로케일 문자열 "확장 하위 태그"로 취급됩니다. 이러한 하위 태그는 로케일에 대한 추가 데이터를 더하며, `-u` 확장 키를 사용하여 로케일 식별자에 추가됩니다. 따라서 `caseFirst` 값을 `Locale` 생성자에 전달되는 초기 로케일 식별자 문자열에 추가할 수 있습니다. `caseFirst` 값을 추가하려면 먼저 문자열에 `-u` 확장 키를 추가합니다. 다음으로 `caseFirst` 값을 추가하고 있음을 나타내는 `-kf` 확장 키를 추가합니다. 마지막으로 `caseFirst` 값을 문자열에 추가합니다. + +```js +const locale = new Intl.Locale("fr-Latn-FR-u-kf-upper"); +console.log(locale.caseFirst); // Prints "upper" +``` + +### 구성 객체 인수를 통한 caseFirst 값 설정하기 + +{{jsxref("Intl/Locale/Locale", "Intl.Locale()")}} 생성자에는 확장 유형을 전달하는 데 사용할 수 있는 선택적 구성 객체 인수가 있습니다. 구성 객체의 `caseFirst` 속성을 원하는 `caseFirst` 값으로 설정한 다음 생성자에 전달합니다. + +```js +const locale = new Intl.Locale("en-Latn-US", { caseFirst: "lower" }); +console.log(locale.caseFirst); // Prints "lower" +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{jsxref("Intl.Locale")}} +- [유니코드 Unicode case first collation spec](https://github.com/unicode-org/cldr/blob/main/common/bcp47/collation.xml#L49) diff --git a/files/ko/web/javascript/reference/global_objects/intl/locale/gettimezones/index.md b/files/ko/web/javascript/reference/global_objects/intl/locale/gettimezones/index.md new file mode 100644 index 00000000000000..f8741a408fd16e --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/intl/locale/gettimezones/index.md @@ -0,0 +1,60 @@ +--- +title: Intl.Locale.prototype.getTimeZones() +slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/getTimeZones +l10n: + sourceCommit: 27180875516cc311342e74b596bfb589b7211e0c +--- + +{{JSRef}} + +{{jsxref("Intl.Locale")}} 인스턴스의 **`getTimeZones()`** 메서드는 이 로케일에 지원되는 시간대 목록을 반환합니다. + +> **참고:** 일부 브라우저의 일부 버전에서는 이 메서드가 `timeZones`라는 접근자 속성으로 구현되었습니다. 그러나 이 메서드는 접근할 때마다 새로운 배열을 반환하기 때문에 `locale.timeZones === locale.timeZones`가 `false`를 반환하는 상황을 방지하기 위해 이제 메서드로 구현되었습니다. 자세한 내용은 [브라우저 호환성 표](#브라우저_호환성)를 참조하세요. + +## 구문 + +```js-nolint +getTimeZones() +``` + +### 매개변수 + +없음. + +### 반환 값 + +연결된 `Locale`에 대해 지원되는 시간대를 나타내는 문자열 배열로, 각 값은 알파벳 순서로 정렬된 [IANA 표준 시간대 이름](https://en.wikipedia.org/wiki/Daylight_saving_time#IANA_time_zone_database)입니다. 로케일 식별자에 지역 하위 태그가 포함되지 않은 경우 반환되는 값은 `undefined`입니다. + +## 예제 + +### 지원되는 시간대 얻기 + +주어진 `Locale`을 지원하는 시간대 목록. + +```js +const arEG = new Intl.Locale("ar-EG"); +console.log(arEG.getTimeZones()); // ["Africa/Cairo"] +``` + +```js +const jaJP = new Intl.Locale("ja-JP"); +console.log(jaJP.getTimeZones()); // ["Asia/Tokyo"] +``` + +```js +const ar = new Intl.Locale("ar"); +console.log(ar.getTimeZones()); // undefined +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{jsxref("Intl.Locale")}} +- Wikipedia의 [IANA 시간대 데이터베이스](https://en.wikipedia.org/wiki/Daylight_saving_time#IANA_time_zone_database) diff --git a/files/ko/web/javascript/reference/global_objects/intl/locale/index.md b/files/ko/web/javascript/reference/global_objects/intl/locale/index.md new file mode 100644 index 00000000000000..e6cb10665f931d --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/intl/locale/index.md @@ -0,0 +1,122 @@ +--- +title: Intl.Locale +slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale +l10n: + sourceCommit: de0a002dfe7b125c2c94e5d2e89e2c5e3a7f969b +--- + +{{JSRef}} + +**`Intl.Locale`** 객체는 유니코드 로케일 식별자를 나타내는 Intl 객체의 표준 내장 속성입니다. + +{{EmbedInteractiveExample("pages/js/intl-locale.html")}} + +## 설명 + +**`Intl.Locale`** 객체는 유니코드 로케일을 더 쉽게 조작할 수 있도록 하기 위해 탄생했습니다. 유니코드는 "로케일 식별자"라는 문자열로 로케일을 나타냅니다. 로케일 식별자는 "언어 식별자"와 "확장 태그"로 구성됩니다. 언어 식별자는 로케일의 핵심으로 언어, 스크립트 및 지역 하위 태그로 구성됩니다. 로케일에 대한 추가 정보는 선택 사항인 확장 태그에 저장됩니다. 확장 태그에는 달력 유형, 시계 유형, 숫자 체계 유형과 같은 로케일 측면에 대한 정보가 저장됩니다. + +전통적으로 Intl API는 유니코드와 마찬가지로 문자열을 사용하여 로케일을 표현했습니다. 이는 간단하고 가벼운 솔루션으로 잘 작동합니다. 하지만 로케일 클래스를 추가하면 언어, 스크립트, 지역, 확장 태그의 구문 분석 및 조작이 더 쉬워집니다. `Intl.Locale`의 다음 속성은 유니코드 로케일 식별자 하위 태그에 해당합니다. + +| 하위 태그와 | 대응되는 속성 | +| ------------------------------------------------------------ | ------------------------------ | +| {{jsxref("Intl/Locale/language", "language")}} | `language` (첫 번째 부분) | +| {{jsxref("Intl/Locale/script", "script")}} | `script` (두 번째 부분) | +| {{jsxref("Intl/Locale/region", "region")}} | `region` (두 번째/세번째 부분) | +| {{jsxref("Intl/Locale/calendar", "calendar")}} | `ca` (확장) | +| {{jsxref("Intl/Locale/caseFirst", "caseFirst")}} | `kf` (확장) | +| {{jsxref("Intl/Locale/collation", "collation")}} | `co` (확장) | +| {{jsxref("Intl/Locale/hourCycle", "hourCycle")}} | `hc` (확장) | +| {{jsxref("Intl/Locale/numberingSystem", "numberingSystem")}} | `nu` (확장) | +| {{jsxref("Intl/Locale/numeric", "numeric")}} | `kn` (확장) | + +위 정보는 외부 데이터베이스를 참조하지 않고 `Locale` 객체가 생성될 때 그대로 제공됩니다. `Intl.Locale` 객체는 사용 가능한 달력, 정렬 방식(collations) 및 숫자 체계와 같은 로케일의 실제 정보에 대한 정보를 반환하는 몇 가지 메서드를 추가로 제공합니다. + +## 생성자 + +- {{jsxref("Intl/Locale/Locale", "Intl.Locale()")}} + - : 새로운 `Locale` 객체를 생성합니다. + +## 인스턴스 속성 + +아래 속성은 `Intl.Locale.prototype`에 정의되어 있으며 모든 `Intl.Locale` 객체가 이를 공유합니다. + +- {{jsxref("Intl/Locale/baseName", "Intl.Locale.prototype.baseName")}} + - : 전체 데이터 문자열의 하위 문자열 형태로 `Locale`에 대한 기본 핵심 정보를 반환합니다. +- {{jsxref("Intl/Locale/calendar", "Intl.Locale.prototype.calendar")}} + - : 로케일의 달력 시대를 가리키는 `Locale`의 부분을 반환합니다. +- {{jsxref("Intl/Locale/caseFirst", "Intl.Locale.prototype.caseFirst")}} + - : 로케일의 데이터 정렬 규칙에 대/소문자를 고려할지 여부를 반환합니다. +- {{jsxref("Intl/Locale/collation", "Intl.Locale.prototype.collation")}} + - : 로케일의 규칙에 따라 문자열을 정렬하는 데 사용되는 `Locale`에 대한 콜레이션 타입을 반환합니다. +- {{jsxref("Object/constructor", "Intl.Locale.prototype.constructor")}} + - : 인스턴스 객체를 생성한 생성자 함수입니다. `Intl.Locale` 인스턴스의 경우 초기 값은 {{jsxref("Intl/Locale/Locale", "Intl.Locale")}} 생성자입니다. +- {{jsxref("Intl/Locale/hourCycle", "Intl.Locale.prototype.hourCycle")}} + - : 로케일에서 사용하는 시간 유지 형식 규칙을 반환합니다. +- {{jsxref("Intl/Locale/language", "Intl.Locale.prototype.language")}} + - : 로케일과 연관된 언어를 반환합니다. +- {{jsxref("Intl/Locale/numberingSystem", "Intl.Locale.prototype.numberingSystem")}} + - : 로케일에서 사용하는 숫자 체계를 반환합니다. +- {{jsxref("Intl/Locale/numeric", "Intl.Locale.prototype.numeric")}} + - : 로케일에 숫자 문자에 대한 특수 콜레이션 처리 기능이 있는지 여부를 반환합니다. +- {{jsxref("Intl/Locale/region", "Intl.Locale.prototype.region")}} + - : 로케일과 관련된 세상의 지역(보통 국가)를 반환합니다. +- {{jsxref("Intl/Locale/script", "Intl.Locale.prototype.script")}} + - : 로케일에서 사용되는 특정 언어를 작성하기 위해 사용되는 스크립트를 반환합니다. +- `Intl.Locale.prototype[@@toStringTag]` + - : [`@@toStringTag`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) 속성의 초기값은 문자열 `"Intl.Locale"`입니다. 이 속성은 {{jsxref("Object.prototype.toString()")}}에서 사용합니다.. + +## 인스턴스 메서드 + +- {{jsxref("Intl/Locale/getCalendars", "Intl.Locale.prototype.getCalendars()")}} + - : 로케일 규칙에 따라 이용 가능한 달력 식별자 배열을 반환합니다. +- {{jsxref("Intl/Locale/getCollations", "Intl.Locale.prototype.getCollations()")}} + - : `Locale`에 대한 데이터 정렬 유형의 {{jsxref("Array")}}을 반환합니다. +- {{jsxref("Intl/Locale/getHourCycles", "Intl.Locale.prototype.getHourCycles()")}} + - : 12시간 시계("h12"), 일본식 12시간 시계("h11"), 24시간 시계("h23") 또는 사용되지 않는 형식 "h24"를 나타내는 시간 주기 식별자의 {{jsxref("Array")}}를 반환합니다. +- {{jsxref("Intl/Locale/getNumberingSystems", "Intl.Locale.prototype.getNumberingSystems()")}} + - : 로케일의 규칙에 따른 가능한 숫자 체계 식별자의 {{jsxref("Array")}}를 반환합니다. +- {{jsxref("Intl/Locale/getTextInfo", "Intl.Locale.prototype.getTextInfo()")}} + - : 문자 `ltr`(왼쪽에서 오른쪽) 또는 `rtl`(오른쪽에서 왼쪽)의 순서를 나타내는 부분을 반환합니다. +- {{jsxref("Intl/Locale/getTimeZones", "Intl.Locale.prototype.getTimeZones()")}} + - : `Locale`과 연관된 시간대 식별자의 {{jsxref("Array")}}을 반환합니다. +- {{jsxref("Intl/Locale/getWeekInfo", "Intl.Locale.prototype.getWeekInfo()")}} + - : 로케일 규칙에 따라 [UTS 35's Week Elements](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Patterns_Week_Elements)를 반환합니다. +- {{jsxref("Intl/Locale/maximize", "Intl.Locale.prototype.maximize()")}} + - : 기존 값을 기반으로 로케일의 언어, 스크립트 및 지역에 대해 가장 가능성이 높은 값을 가져옵니다. +- {{jsxref("Intl/Locale/minimize", "Intl.Locale.prototype.minimize()")}} + - : {{jsxref("Intl/Locale/maximize", "maximize()")}}을 호출하여 추가될 로케일에 대한 정보 제거를 시도합니다. +- {{jsxref("Intl/Locale/toString", "Intl.Locale.prototype.toString()")}} + - : Locale의 완전한 로케일 식별자 문자열을 반환합니다. + +## 예제 + +### 기본적인 사용법 + +가장 간단한 방법으로는 {{jsxref("Intl/Locale/Locale", "Intl.Locale()")}} 생성자가 로케일 식별자를 인수로 받습니다. + +```js +const us = new Intl.Locale("en-US"); +``` + +### options 객체와 함께 Locale 생성자를 사용 + +생성자는 또한 선택적으로 구성 객체 인수를 받을 수 있으며, 이 객체에는 여러 확장 유형 중의 하나가 포함될 수 있습니다. 예를 들어, 구성 객체의 {{jsxref("Intl/Locale/hourCycle", "hourCycle")}} 속성을 원하는 시간 주기 유형으로 설정한 다음 생성자에 전달합니다. + +```js +const us12hour = new Intl.Locale("en-US", { hourCycle: "h12" }); +console.log(us12hour.hourCycle); // Prints "h12" +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [Polyfill of `Intl.Locale` in FormatJS](https://formatjs.io/docs/polyfills/intl-locale/) +- {{jsxref("Intl")}} +- [정규 유니코드 로케일 식별자](https://www.unicode.org/reports/tr35/#Canonical_Unicode_Locale_Identifiers) in the Unicode locale data markup language spec diff --git a/files/ko/web/javascript/reference/global_objects/intl/locale/region/index.md b/files/ko/web/javascript/reference/global_objects/intl/locale/region/index.md new file mode 100644 index 00000000000000..d5370f6aae8741 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/intl/locale/region/index.md @@ -0,0 +1,51 @@ +--- +title: Intl.Locale.prototype.region +slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/region +l10n: + sourceCommit: b68d6456477c19b1fed8fc6bc99eff8972b1af29 +--- + +{{JSRef}} + +{{jsxref("Intl.Locale")}} 인스턴스의 **`region`** 접근자 속성은 이 로케일과 연관된 세계의 지역(보통은 국가)를 반환합니다. + +## 설명 + +지역은 로케일의 핵심 속성 중 하나입니다. 예를 들어 여러 국가에서 같은 언어를 사용하지만 서로 다른 언어 사이의 차이점을 선택할 수 있습니다. 예를 들어, 영국과 미국에서는 영어를 사용하지만 두 국가 간에는 철자법 및 기타 언어 규칙에 차이가 있습니다. 로케일의 지역을 알면 JavaScript 프로그래머는 사이트 및 애플리케이션 콘텐츠가 전 세계 다른 지역에서 볼 때 올바르게 표시되는지 확인할 수 있습니다. `region` 속성 값은 로케일 식별자의 `region` 하위 태그(`script`가 있는 경우 세 번째 부분, 그렇지 않으면 두 번째 부분)를 통해 또는 {{jsxref("Intl/Locale/Locale", "Intl.Locale()")}} 생성자의 `region` 옵션을 통해 구성 시점에 설정됩니다. 둘 다 있는 경우 후자가 우선권을 가지며, 둘 다 없는 경우 속성의 값은 `undefined`입니다. + +`region`의 설정 접근자는 `undefined`입ㄴ디ㅏ. 이 속성을 직접 변경할 수 없습니다. + +## 예제 + +다른 로케일 하위 태그와 마찬가지로 로케일 문자열 또는 생성자에 대한 구성 객체 인수를 통해 {{jsxref("Intl.Locale")}} 객체에 지역을 추가할 수 있습니다. + +### 로케일 문자열을 통한 지역 추가하기 + +지역은 (존재할 경우)유효한 유니코드 언어 식별자 문자열의 세 번째 부분(`script`가 있는 경우, 그렇지 않은 경우 두 번째 부분)이며 {{jsxref("Intl/Locale/Locale", "Intl.Locale()")}} 생성자에 전달되는 초기 로케일 식별자 문자열에 추가할 수 있습니다. 지역은 로케일 식별자의 필수 부분이 아니라는 점을 명심하시기 바랍니다. + +```js +const locale = new Intl.Locale("en-Latn-US"); +console.log(locale.region); // Prints "US" +``` + +### 설정 객체 인수를 통한 지역 추가하기 + +{{jsxref("Intl/Locale/Locale", "Intl.Locale()")}} 생성자는 선택적 구성 객체 인수를 가집니다. 원하는 지역을 구성 객체의 `region`속성에 설정한 후 생성자에 전달합니다. + +```js +const locale = new Intl.Locale("fr-Latn", { region: "FR" }); +console.log(locale.region); // Prints "FR" +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{jsxref("Intl.Locale")}} +- [유니코드 지역 차트](https://unicode-org.github.io/cldr-staging/charts/latest/supplemental/territory_containment_un_m_49.html) diff --git a/files/ko/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.md b/files/ko/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.md new file mode 100644 index 00000000000000..199bb751998c30 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.md @@ -0,0 +1,57 @@ +--- +title: Intl.RelativeTimeFormat.supportedLocalesOf() +slug: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/supportedLocalesOf +l10n: + sourceCommit: 5c3c25fd4f2fbd7a5f01727a65c2f70d73f1880a +--- + +{{JSRef}} + +**`Intl.RelativeTimeFormat.supportedLocalesOf()`** 정적 메서드는 런타임의 기본 로케일로 돌아갈 필요 없이 상대 시간 형식으로 지원되는 제공된 로케일이 포함된 배열을 반환합니다. + +{{EmbedInteractiveExample("pages/js/intl-relativetimeformat-supportedlocalesof.html", "shorter")}} + +## 구문 + +```js-nolint +Intl.RelativeTimeFormat.supportedLocalesOf(locales) +Intl.RelativeTimeFormat.supportedLocalesOf(locales, options) +``` + +### 매개변수 + +- `locales` + - : BCP 47 언어 태그가 포함된 문자열 또는 이러한 로케일 식별자의 배열입니다. `locales` 인수의 일반적인 형식과 해석에 대해서는 [`Intl` 메인 페이지의 매개변수 설명](/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument)을 참조하세요. +- `options` {{optional_inline}} + - : 다음의 속성을 가질 수 있는 객체 + - `localeMatcher` + - : 사용할 로케일 일치 알고리즘입니다. 가능한 값은 `"lookup"` 및 `"best fit"`이며, 기본값은 `"best fit"`입니다. 이 옵션에 대해 더 알고 싶으시다면 {{jsxref("Intl", "Intl", "#locale_identification_and_negotiation", 1)}} 페이지를 참고하시기 바랍니다. + +### 반환 값 + +런타임의 기본 로케일로 되돌아가지 않고 상대 시간 형식으로 지원되는 지정된 로케일 태그의 하위 집합을 나타내는 문자열 배열입니다. + +## 예제 + +### supportedLocalesOf() 사용하기 + +인도네시아어와 독일어는 지원하지만 인도네시아어는 상대 시간 형식을 지원하지 않는 런타임을 가정해보면, `supportedLocalesOf`는 인도네시아어와 독일어 언어 태그를 변경 없이 반환하지만 `pinyin` 콜레이션은 상대 시간 형식과 관련이 없거나 인도네시아어와 함께 사용되지 않으며 인도네시아에 특화된 독일어는 지원되지 않을 가능성이 높습니다. 여기서 `"lookup"` 알고리즘의 명세에 유의하세요. 대부분의 인도네시아어 사용자도 인도네시아어를 이해하므로 `"best fit"` 매처는 인도네시아어가 인도네시아어와 적절히 일치한다고 판단하여 인도네시아어 태그도 반환할 수 있습니다. + +```js +const locales = ["ban", "id-u-co-pinyin", "de-ID"]; +const options = { localeMatcher: "lookup" }; +console.log(Intl.RelativeTimeFormat.supportedLocalesOf(locales, options)); +// ["id-u-co-pinyin", "de-ID"] +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{jsxref("Intl.RelativeTimeFormat")}} diff --git a/files/ko/web/javascript/reference/global_objects/intl/segmenter/index.md b/files/ko/web/javascript/reference/global_objects/intl/segmenter/index.md new file mode 100644 index 00000000000000..3b004fc73c2495 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/intl/segmenter/index.md @@ -0,0 +1,70 @@ +--- +title: Intl.Segmenter +slug: Web/JavaScript/Reference/Global_Objects/Intl/Segmenter +l10n: + sourceCommit: 01bf58c144237c1fc75cf7135491346778591f09 +--- + +{{JSRef}} + +**`Intl.Segmenter`** 객체를 사용하면 로케일에 따른 텍스트 분할이 가능하므로 문자열에서 의미 있는 항목(문자소, 단어 또는 문장)을 가져올 수 있습니다. + +{{EmbedInteractiveExample("pages/js/intl-segmenter.html")}} + +## 생성자 + +- {{jsxref("Intl/Segmenter/Segmenter", "Intl.Segmenter()")}} + - : 새로운 `Intl.Segmenter` 객체를 생성합니다. + +## 정적 메서드 + +- {{jsxref("Intl/Segmenter/supportedLocalesOf", "Intl.Segmenter.supportedLocalesOf()")}} + - : 런타임의 기본 로케일로 되돌아가지 않고 지원되는 제공된 로케일을 포함하는 배열을 반환합니다. + +## 인스턴스 속성 + +아래 속성은 `Intl.Segmenter.prototype`에 정의되어 있으며, 모든 `Intl.Segmenter` 인스턴스가 공유합니다. + +- : {{jsxref("Object/constructor", "Intl.Segmenter.prototype.constructor")}} + - 인스턴스 객체를 생성한 생성자 함수입니다. `Intl.Segmenter` 인스턴스의 경우, 초기 값은 {{jsxref("Intl/Segmenter/Segmenter", "Intl.Segmenter")}} 생성자입니다. +- : `Intl.Segmenter.prototype[@@toStringTag]` + - [`@@toStringTag`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) 속성의 초기 값은 문자열 `"Intl.Segmenter"`입니다. 이 속성은 {{jsxref("Object.prototype.toString()")}}에서 사용됩니다. + +## 인스턴스 매서드 + +- {{jsxref("Intl/Segmenter/resolvedOptions", "Intl.Segmenter.prototype.resolvedOptions()")}} + - : 이 `Intl.Segmenter` 객체를 초기화하는 동안 계산된 로케일 및 세부화된 옵션을 반영하는 속성이 포함된 새 객체를 반환합니다. +- {{jsxref("Intl/Segmenter/segment", "Intl.Segmenter.prototype.segment()")}} + - : 문자열의 세그먼트를 나타내는 새로운 이터러블 [`Segments`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter/segment/Segments) 인스턴스를 이 `Intl.Segmenter` 인스턴스의 로케일과 세분성에 따라 반환합니다. + +## 예제 + +### 기본적인 사용법과 String.prototype.split()과의 차이 + +문자열을 단어로 분할하기 위해 [`String.prototype.split(" ")`](/ko/docs/Web/JavaScript/Reference/Global_Objects/String/split)을 사용하면 텍스트의 로케일이 단어 사이에 공백을 사용하지 않는 경우(일본어, 중국어, 태국어, 라오스어, 크메르어, 미얀마어 등의 경우) 올바른 결과를 얻지 못할 수 있습니다. + +```js example-bad +const str = "吾輩は猫である。名前はたぬき。"; +console.table(str.split(" ")); +// ['吾輩は猫である。名前はたぬき。'] +// 두 문장이 올바르게 분할되지 않았습니다. +``` + +```js example-good +const str = "吾輩は猫である。名前はたぬき。"; +const segmenterJa = new Intl.Segmenter("ja-JP", { granularity: "word" }); + +const segments = segmenterJa.segment(str); +console.table(Array.from(segments)); +// [{segment: '吾輩', index: 0, input: '吾輩は猫である。名前はたぬき。', isWordLike: true}, +// 기타 등등. +// ] +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} diff --git a/files/ko/web/javascript/reference/global_objects/object/__definesetter__/index.md b/files/ko/web/javascript/reference/global_objects/object/__definesetter__/index.md new file mode 100644 index 00000000000000..b6eaf170263111 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/__definesetter__/index.md @@ -0,0 +1,106 @@ +--- +title: Object.prototype.__defineSetter__() +slug: Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__ +l10n: + sourceCommit: fd326b574aadcd78924a5a223f15e289e45a7f1d +--- + +{{JSRef}}{{Deprecated_Header}} + +> **참고:** 이 기능은 [객체 초기자 구문](/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer) 또는 {{jsxref("Object.defineProperty()")}} API를 사용하여 [설정자](/ko/docs/Web/JavaScript/Reference/Functions/set) 정의하는 것을 권장하기 때문에 이 기능은 더 이상 사용되지 않습니다. 이 메서드의 동작은 웹 호환성을 위해서만 명시되며 모든 플랫폼에서 구현할 필요는 없습니다.모든 환경에서 작동하지 않을 수도 있습니다. + +{{jsxref("Object")}} 인스턴스의 **`__defineSetter__()`** 메서드는 해당 속성을 설정하려고 시도할 때 호출될 함수에 객체의 속성을 바인딩합니다. + +## 구문 + +```js-nolint +__defineSetter__(prop, func) +``` + +### 매개변수 + +- `prop` + - : 설정자 `func`가 바인딩된 속성의 이름이 포함된 문자열입니다. +- `func` + - : 지정된 속성을 설정하려고 할 때 호출되는 함수입니다. 이 함수는 다음 매개변수를 받습니다. + - `val` + - : `prop`에 할당하려고 한 값입니다. + +### 반환 값 + +없음 ({{jsxref("undefined")}}). + +### 예외 + +- {{jsxref("TypeError")}} + - : `func`가 함수가 아닐 경우 발생합니다. + +## 설명 + +`Object.prototype`에서 상속하는 모든 객체(즉, [`null`-프로토타입 객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects)를 제외한 모든 객체)는 `__defineSetter__()` 메서드를 상속합니다. 이 메서드를 사용하면 기존 객체에 [설정자](/ko/docs/Web/JavaScript/Reference/Functions/set)를 정의할 수 있습니다. 이는 [`Object.defineProperty(obj, prop, { set: func, configurable: true, enumerable: true })`]와 동일하며, 이는 속성이 열거 가능하고 구성 가능하며 기존 접근자가 있는 경우 보존됨을 의미합니다. + +`__defineSetter__()`는 명세서에서 "권장 선택 사항"으로 정의되어 있으므로 반드시 구현할 필요가 없습니다. 그러나 모든 주요 브라우저에서 구현하고 있으며 계속 사용되고 있기 때문에 제거될 가능성은 낮습니다. 브라우저가 `__defineSetter__()`를 구현했다면, [`__lookupGetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__), [`__lookupSetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__), [`__defineGetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__) 구현이 필요합니다. + +## 예제 + +### \_\_defineSetter\_\_() 사용하기 + +```js +const o = {}; +o.__defineSetter__("value", function (val) { + this.anotherValue = val; +}); +o.value = 5; +console.log(o.value); // undefined +console.log(o.anotherValue); // 5 +``` + +### 표준 방식으로 설정자 속성 정의하기 + +객체가 처음 초기화될 때 `set` 구문을 사용하여 설정자를 정의할 수 있습니다. + +```js +const o = { + set value(val) { + this.anotherValue = val; + }, +}; +o.value = 5; +console.log(o.value); // undefined +console.log(o.anotherValue); // 5 +``` + +객체가 생성된 후 {{jsxref("Object.defineProperty()")}}를 사용하여 객체에 설정자를 정의할 수도 있습니다. 이 메서드는 `__defineSetter__()`와 비교하여 설정자의 열거 가능성과 구성 가능성을 제어할 수 있을 뿐만 아니라 [심볼](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol) 속성을 정의할 수 있습니다. `Object.defineProperty()` 메서드는 `Object.prototype`에서 상속되지 않으므로 `__defineSetter__()` 메서드가 없는 [`null`-프로토타입 객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects)에서도 작동합니다. + +```js +const o = {}; +Object.defineProperty(o, "value", { + set(val) { + this.anotherValue = val; + }, + configurable: true, + enumerable: true, +}); +o.value = 5; +console.log(o.value); // undefined +console.log(o.anotherValue); // 5 +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [`core-js`에서의 `Object.prototype.__defineSetter__` 폴리필](https://github.com/zloirock/core-js#ecmascript-object) +- [`Object.prototype.__defineGetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__) +- {{jsxref("Functions/set", "set")}} +- {{jsxref("Object.defineProperty()")}} +- [`Object.prototype.__lookupGetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__) +- [`Object.prototype.__lookupSetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__) +- [JS 안내서: 접근자와 설정자 정의하기](/ko/docs/Web/JavaScript/Guide/Working_with_objects#defining_getters_and_setters) +- [Firefox bug 647423](https://bugzil.la/647423) diff --git a/files/ko/web/javascript/reference/global_objects/object/__lookupgetter__/index.md b/files/ko/web/javascript/reference/global_objects/object/__lookupgetter__/index.md new file mode 100644 index 00000000000000..baa5fb02102d3e --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/object/__lookupgetter__/index.md @@ -0,0 +1,105 @@ +--- +title: Object.prototype.__lookupGetter__() +slug: Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__ +l10n: + sourceCommit: fd326b574aadcd78924a5a223f15e289e45a7f1d +--- + +{{JSRef}} {{Deprecated_Header}} + +> **참고:** 이 기능은 {{jsxref("Object.getOwnPropertyDescriptor()")}} API 사용을 선호하기 때문에 더 이상 사용되지 않습니다. 이 메서드의 동작은 웹 호환성을 위해서만 명시되며 모든 플랫폼에서 구현할 필요는 없습니다. 모든 곳에서 작동하지 않을 수도 있습니다. + +{{jsxref("Object")}} 인스턴스의 **`__lookupGetter__()`** 메서드는 지정된 속성에 접근자로 바인딩된 함수를 반환합니다. + +## 구문 + +```js-nolint +__lookupGetter__(prop) +``` + +### 매개변수 + +- `prop` + - : 접근자가 반환해야 하는 속성의 이름이 담긴 문자열 + +### 반환 값 + +지정된 속성에 접근자로 바인딩된 함수입니다. 해당 속성을 찾을 수 없거나 속성이 [데이터 속성](/ko/docs/Web/JavaScript/Data_structures#data_property)인 경우 `undefined`를 반환합니다. + +## 설명 + +`Object.prototype`을 상속한 모든 객체(즉, [`null`-프로토타입 객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects)를 제외한 모든 객체)는 `__lookupGetter__()`를 상속합니다. 만약 [접근자](/ko/docs/Web/JavaScript/Reference/Functions/get)가 객체의 속성으로 정의되었다면 해당 속성은 해당 함수의 반환값을 참조하므로 해당 속성을 통해 접근자 함수를 참조할 수 없습니다. `__lookupGetter__()`를 사용하여 접근자 함수에 대한 참조를 얻을 수 있습니다. + +`__lookupGetter__()`는 [프로토타입 체인](/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)을 따라 올라가서 지정된 속성을 찾습니다. 프로토타입 체인에 있는 객체에 지정된 [자체 속성](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn)이 있는 경우 해당 속성에 대한 [속성 설명자](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor)의 `get` 속성이 반환됩니다. 해당 속성이 데이터 속성인 경우 `undefined`이 반환됩니다. 전체 프로토타입 체인에서 해당 속성을 찾을 수 없는 경우 역시 `undefined`이 반환됩니다. + +`lookupGetter__()`는 명세에서 "권장 선택 사항"으로 정의되어 있으므로 구현체는 이를 구현할 필요는 없습니다. 그러나 모든 주요 브라우저에서 구현하고 있으며, 계속 사용되고 있기 때문에 제거될 가능성은 낮습니다. 브라우저가 `__lookupGetter__()`를 구현하는 경우 [`__lookupSetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__), [`__defineGetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__), 그리고 [`__defineSetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__) 메서드도 구현해야 합니다. + +## 예제 + +### \_\_lookupGetter\_\_() 사용하기 + +```js +const obj = { + get foo() { + return Math.random() > 0.5 ? "foo" : "bar"; + }, +}; + +obj.__lookupGetter__("foo"); +// [Function: get foo] +``` + +### 표준 방식으로 속성의 접근자 조회하기 + +{{jsxref("Object.getOwnPropertyDescriptor()")}} API를 사용하여 속성의 접근자를 조회해야 합니다. 이 메서드는 `__lookupGetter__()`와 비교하여 [심볼](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol) 속성을 조회할 수 있습니다. `Object.getOwnPropertyDescriptor()` 메서드는 `Object.prototype`에서 상속하지 않으므로 `__lookupGetter__()` 메서드가 없는 [`null`-프로토타입 객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects)에도 작동합니다. `__lookupGetter__()`가 프로토타입 체인을 거슬러 올라가는 동작이 중요한 경우 {{jsxref("Object.getPrototypeOf()")}}를 사용하여 직접 구현할 수 있습니다. + +```js +const obj = { + get foo() { + return Math.random() > 0.5 ? "foo" : "bar"; + }, +}; + +Object.getOwnPropertyDescriptor(obj, "foo").get; +// [Function: get foo] +``` + +```js +const obj2 = { + __proto__: { + get foo() { + return Math.random() > 0.5 ? "foo" : "bar"; + }, + }, +}; + +function findGetter(obj, prop) { + while (obj) { + const desc = Object.getOwnPropertyDescriptor(obj, prop); + if (desc) { + return desc.get; + } + obj = Object.getPrototypeOf(obj); + } +} + +console.log(findGetter(obj2, "foo")); // [Function: get foo] +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [`core-js`에서의 `Object.prototype.__lookupGetter__` 폴리필](https://github.com/zloirock/core-js#ecmascript-object) +- [`Object.prototype.__lookupSetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__) +- {{jsxref("Functions/get", "get")}} +- {{jsxref("Object.getOwnPropertyDescriptor()")}} +- [`Object.prototype.__defineGetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__) +- [`Object.prototype.__defineSetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__) +- [JS 가이드: 접근자와 설정자 정의하기](/ko/docs/Web/JavaScript/Guide/Working_with_objects#defining_getters_and_setters) diff --git a/files/ko/web/javascript/reference/global_objects/rangeerror/index.md b/files/ko/web/javascript/reference/global_objects/rangeerror/index.md index 63dc71ed9ba12b..e4b622ee40af8d 100644 --- a/files/ko/web/javascript/reference/global_objects/rangeerror/index.md +++ b/files/ko/web/javascript/reference/global_objects/rangeerror/index.md @@ -1,6 +1,8 @@ --- title: RangeError slug: Web/JavaScript/Reference/Global_Objects/RangeError +l10n: + sourceCommit: d19dc31570f62196a5837be38bd0b11c45e67b05 --- {{JSRef}} @@ -15,14 +17,11 @@ slug: Web/JavaScript/Reference/Global_Objects/RangeError - 허용되는 문자열이 아닌 값을 {{jsxref("String.prototype.normalize()")}}에 전달하거나, - {{jsxref("Array")}} 생성자를 통해 잘못된 길이의 배열을 만드려고 시도하거나, -- 숫자 메서드 {{jsxref("Number.prototype.toExponential()")}}, - {{jsxref("Number.prototype.toFixed()")}} 혹은 {{jsxref("Number.prototype.toPrecision()")}}에 - 나쁜 값을 전달하는 경우. +- 숫자 메서드 {{jsxref("Number.prototype.toExponential()")}}, {{jsxref("Number.prototype.toFixed()")}} 혹은 {{jsxref("Number.prototype.toPrecision()")}}에 나쁜 값을 전달하는 경우. -`RangeError`는 {{Glossary("serializable object", "직렬화 가능한 객체")}}이기 때문에, -{{domxref("structuredClone()")}}로 복제하거나 -{{domxref("Worker/postMessage()", "postMessage()")}}를 사용하여 -[Workers](/ko/docs/Web/API/Worker) 간에 복사할 수 있습니다. +`RangeError`는 {{Glossary("serializable object", "직렬화 가능한 객체")}}이기 때문에, {{domxref("structuredClone()")}}로 복제하거나 {{domxref("Worker/postMessage()", "postMessage()")}}를 사용하여 [Worker](/ko/docs/Web/API/Worker) 간에 복사할 수 있습니다. + +`RangeError`는 {{jsxref("Error")}}의 하위 클래스입니다. ## 생성자 @@ -31,20 +30,19 @@ slug: Web/JavaScript/Reference/Global_Objects/RangeError ## 인스턴스 속성 -- {{jsxref("Error.prototype.message", "RangeError.prototype.message")}} - - : 오류 메시지. {{jsxref("Error.prototype.message")}}를 상속되었습니다. -- {{jsxref("Error.prototype.name", "RangeError.prototype.name")}} - - : 오류 이름. {{jsxref("Error")}}로부터 상속되었습니다. -- {{jsxref("Error.prototype.cause", "RangeError.prototype.cause")}} - - : 에러 원인. {{jsxref("Error")}}로부터 상속되었습니다.. -- {{jsxref("Error.prototype.fileName", "RangeError.prototype.fileName")}} - - : 오류가 발생한 파일 경로. {{jsxref("Error")}}로부터 상속되었습니다. -- {{jsxref("Error.prototype.lineNumber", "RangeError.prototype.lineNumber")}} - - : 오류가 발생한 곳의 줄 위치. {{jsxref("Error")}}로부터 상속되었습니다. -- {{jsxref("Error.prototype.columnNumber", "RangeError.prototype.columnNumber")}} - - : 오류가 발생한 곳의 열 위치. {{jsxref("Error")}}로부터 상속되었습니다. -- {{jsxref("Error.prototype.stack", "RangeError.prototype.stack")}} - - : 스택 추적. {{jsxref("Error")}}로부터 상속되었습니다. +인스턴스 속성은 부모인 {{jsxref("Error")}}로부터 상속받습니다. + +아래 속성은 `RangeError.prototype`에 정의되어 있으며 모든 `RangeError` 인스턴스 객체와 공유합니다. + +- {{jsxref("Object/constructor", "RangeError.prototype.constructor")}} + - : 인스턴스 객체를 생성하는 생성자 함수입니다. `RangeError` 인스턴스에서 초기 값은 + {{jsxref("RangeError/RangeError", "RangeError")}} 생성자입니다. +- {{jsxref("Error/name", "RangeError.prototype.name")}} + - : 오류의 유형에 대한 이름을 나타냅니다. `RangeError.prototype.name`의 초기 값은 `"RangeError"`입니다. + +## 인스턴스 메서드 + +인스턴스 메서드는 부모인 {{jsxref("Error")}}로부터 상속받습니다. ## 예제 @@ -60,7 +58,7 @@ try { check(2000); } catch (error) { if (error instanceof RangeError) { - // Handle the error + // 오류 처리 } } ``` @@ -79,7 +77,7 @@ try { check("cabbage"); } catch (error) { if (error instanceof RangeError) { - // Handle the error + // 오류 처리 } } ``` diff --git a/files/ko/web/javascript/reference/global_objects/rangeerror/rangeerror/index.md b/files/ko/web/javascript/reference/global_objects/rangeerror/rangeerror/index.md index 37d4ddb94fbc20..4885bed5241b4e 100644 --- a/files/ko/web/javascript/reference/global_objects/rangeerror/rangeerror/index.md +++ b/files/ko/web/javascript/reference/global_objects/rangeerror/rangeerror/index.md @@ -1,11 +1,14 @@ --- title: RangeError() 생성자 slug: Web/JavaScript/Reference/Global_Objects/RangeError/RangeError +l10n: + sourceCommit: f3df52530f974e26dd3b14f9e8d42061826dea20 --- {{JSRef}} -**`RangeError()`** 생성자는 어떤 값이 집합에 없거나 허용되는 범위가 아닐 때 발생하는 오류를 생성합니다 +**`RangeError()`** 생성자는 어떤 값이 집합에 없거나 +허용되는 범위가 아닐 때 발생하는 오류를 생성합니다 ## 구문 @@ -37,7 +40,7 @@ RangeError(message, fileName, lineNumber) - `fileName` {{optional_inline}} {{non-standard_inline}} - : 예외가 발생한 코드를 담고 있는 파일 이름 - `lineNumber` {{optional_inline}} {{non-standard_inline}} - - : 예외가 발상한 코드의 줄 수 + - : 예외가 발생한 코드의 줄 수 ## 예제 @@ -53,7 +56,7 @@ try { check(2000); } catch (error) { if (error instanceof RangeError) { - // Handle the error + // 오류 처리 } } ``` @@ -72,7 +75,7 @@ try { check("cabbage"); } catch (error) { if (error instanceof RangeError) { - // Handle the error + // 오류 처리 } } ``` diff --git a/files/ko/web/javascript/reference/global_objects/regexp/index.md b/files/ko/web/javascript/reference/global_objects/regexp/index.md index f23af8dbfc0a90..347cb1e2dcf815 100644 --- a/files/ko/web/javascript/reference/global_objects/regexp/index.md +++ b/files/ko/web/javascript/reference/global_objects/regexp/index.md @@ -7,7 +7,7 @@ slug: Web/JavaScript/Reference/Global_Objects/RegExp **`RegExp`** 생성자는 패턴을 사용해 텍스트를 판별할 때 사용합니다. -정규 표현식에 대한 소개는 [JavaScript 안내서의 정규 표현식 장](/ko/docs/Web/JavaScript/Guide/Regular_Expressions)을 참고하세요. +정규 표현식에 대한 소개는 JavaScript 안내서의 [정규 표현식 장](/ko/docs/Web/JavaScript/Guide/Regular_Expressions)을 참고하세요. 정규 표현식 구문에 대한 더 자세한 정보는 [정규 표현식 참고서](/ko/docs/Web/JavaScript/Reference/Regular_expressions)를 참고하시기 바랍니다. ## 설명 @@ -15,32 +15,37 @@ slug: Web/JavaScript/Reference/Global_Objects/RegExp `RegExp` 객체는 리터럴 표기법과 생성자로써 생성할 수 있습니다. -- **리터럴 표기법**의 매개변수는 두 빗금으로 감싸야 하며 따옴표를 사용하지 않습니다. -- **생성자 함수**의 매개변수는 빗금으로 감싸지 않으나 따옴표를 사용합니다. +- **리터럴 표기법**은 두 빗금 사이에 패턴을 사용하며, 두 번째 빗금 뒤에 선택적으로 [플래그](/ko/docs/Web/JavaScript/Guide/Regular_expressions#advanced_searching_with_flags)가 올 수 있습니다. +- **생성자 함수**은 첫 번째 매개변수로 문자열이나 `RegExp` 객체 중 하나를 받고 두 번째 매개변수로 선택적 [플래그](/ko/docs/Web/JavaScript/Guide/Regular_expressions#advanced_searching_with_flags) 문자열을 받습니다. 다음의 세 표현식은 모두 같은 정규 표현식을 생성합니다. ```js -/ab+c/i; -new RegExp(/ab+c/, "i"); // 리터럴 -new RegExp("ab+c", "i"); // 생성자 +const re = /ab+c/i; // 리터럴 표기법 +// 혹은 +const re = new RegExp("ab+c", "i"); // 첫 번째 인수로 문자열 패턴과 함께 생성자 사용 +// 혹은 +const re = new RegExp(/ab+c/, "i"); // 첫 번째 인수로 정규 표현식 리터럴과 함께 생성자 사용 ``` -리터럴 표기법은 표현식을 평가할 때 정규 표현식을 컴파일합니다. 정규 표현식이 변하지 않으면 리터럴 표기법을 사용하세요. 예를 들어, 반복문 안에서 사용할 정규 표현식을 리터럴 표기법으로 생성하면 정규 표현식을 매번 다시 컴파일하지 않습니다. +정규 표현식을 사용하려면 먼저 정규 표현식을 컴파일해야 합니다. 이 과정을 통해 보다 효율적으로 매칭을 수행할 수 있습니다. 이 프로세스에 대한 보다 자세한 내용은 [dotnet 문서](https://docs.microsoft.com/dotnet/standard/base-types/compilation-and-reuse-in-regular-expressions)에서 확인할 수 있습니다. -정규 표현식 객체의 생성자(`new RegExp('ab+c')`)를 사용하면 정규 표현식이 런타임에 컴파일됩니다. 패턴이 변할 가능성이 있거나, 사용자 입력과 같이 알 수 없는 외부 소스에서 가져오는 정규 표현식의 경우 생성자 함수를 사용하세요. +리터럴 표기법은 표현식이 평가될 때 정규 표현식이 컴파일됩니다. 반면에 `RegExp` 객체의 생성자 `new RegExp('ab+c')`는 정규 표현식을 런타임에 컴파일합니다. + +[동적 입력에서 정규식을 빌드](#building_a_regular_expression_from_dynamic_inputs)하려면 `RegExp()` 생성자의 첫 번째 인수로 문자열을 사용합니다. ### 생성자의 플래그 -ECMAScript 6부터는 `new RegExp(/ab+c/, 'i')`처럼, 첫 매개변수가 `RegExp`이면서 `flags`를 지정해도 {{jsxref("TypeError")}} (`"can't supply flags when constructing one RegExp from another"`)가 발생하지 않고, 매개변수로부터 새로운 정규 표현식을 생성합니다. +표현식 `new RegExp(/ab+c/, flags)`은 첫 번째 매개변수의 소스와 두 번째 매개변수의 [플래그](/ko/docs/Web/JavaScript/Guide/Regular_expressions#advanced_searching_with_flags)를 사용하여 새로운 `RegExp`를 생성합니다. -생성자 함수를 사용할 경우 보통의 문자열 이스케이프 규칙(특수 문자를 문자열에 사용할 때 앞에 역빗금(`\`)을 붙이는 것)을 준수해야 합니다. +생성자 함수를 사용할 경우, 일반 문자열 이스케이프 규칙(문자열에 포함될 때 특수 문자 앞에 `\` 추가)이 필요합니다. 예를 들어 다음 두 줄은 동일한 정규 표현식을 생성합니다. ```js -let re = /\w+/; -let re = new RegExp("\\w+"); +const re = /\w+/; +// 혹은 +const re = new RegExp("\\w+"); ``` ### Perl 형태의 `RegExp` 속성 diff --git a/files/ko/web/javascript/reference/global_objects/regexp/source/index.md b/files/ko/web/javascript/reference/global_objects/regexp/source/index.md new file mode 100644 index 00000000000000..aeee1081f14b9c --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/regexp/source/index.md @@ -0,0 +1,46 @@ +--- +title: RegExp.prototype.source +slug: Web/JavaScript/Reference/Global_Objects/RegExp/source +l10n: + sourceCommit: 16bacf2194dc9e9ff6ee5bcc65316547cf88a8d9 +--- + +{{JSRef}} + +{{jsxref("RegExp")}} 인스턴스의 **`source`** 접근자 속성은 양쪽 슬래시 2개나 플래그 없이 이 정규 표현식의 소스 텍스트가 포함된 문자열을 반환합니다. + +{{EmbedInteractiveExample("pages/js/regexp-prototype-source.html")}} + +## 설명 + +개념적으로 `source` 속성은 정규식 리터럴의 두 슬래시 사이의 텍스트입니다. 이 언어는 반환된 문자열이 올바르게 이스케이프 되어야 하기에 `source`가 양쪽 끝에 슬래시로 연결될 때 구문 분석 가능한 정규식 리터럴이 형성됩니다. 예를 들어, `new RegExp("/")`의 경우 `source`가 `/`를 생성하면 결과 리터럴이 줄 주석인 `//`가 되기 때문에 `\\/`가 됩니다. 마찬가지로 모든 [줄 종결자](/ko/docs/Web/JavaScript/Reference/Lexical_grammar#line_terminators)는 이스케이프 처리됩니다. 줄 종결자 문자는 정규 표현식 리터럴을 분리하기 때문입니다. 결과가 파싱 가능하기만 하다면 다른 문자에 대한 요구 사항은 없습니다. 빈 정규 표현식의 경우 문자열 `(?:)`이 반환됩니다. + +## 예제 + +### source 사용하기 + +```js +const regex = /fooBar/gi; + +console.log(regex.source); // "fooBar", /.../ 과 "gi" 가 포함되지 않음. +``` + +### 빈 정규 표현식과 이스케이핑 + +```js +new RegExp().source; // "(?:)" + +new RegExp("\n").source === "\\n"; // true, ES5부터 시작됨 +``` + +## 명새서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{jsxref("RegExp.prototype.flags")}} diff --git a/files/ko/web/javascript/reference/global_objects/set/index.md b/files/ko/web/javascript/reference/global_objects/set/index.md index be2a239d23764e..978f18642d9883 100644 --- a/files/ko/web/javascript/reference/global_objects/set/index.md +++ b/files/ko/web/javascript/reference/global_objects/set/index.md @@ -23,6 +23,67 @@ l10n: [`has`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Set/has) 메서드는 이전에 Set에 추가된 대부분의 요소를 시험하는 것보다 평균적으로 빠른 접근 방식을 사용하여 값이 Set에 있는지 여부를 확인합니다. 특히 배열의 `length`가 Set의 `size`와 같을 때 [`Array.prototype.includes`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) 메서드보다 평균적으로 더 빠릅니다. +### Set 구성 + +`Set` 객체는 수학 연산과 같이 집합을 구성할 수 있는 몇 가지 메서드를 제공합니다. 이러한 메서드는 다음과 같습니다. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
메서드반환 유형수학적 동치벤 다이어그램
{{jsxref("Set/difference", "A.difference(B)")}}SetA∖BA\setminus B두 개의 원이 겹치는 벤 다이어그램입니다. A와 B의 차집합은 A에서 B와 겹치지 않는 부분입니다.
{{jsxref("Set/intersection", "A.intersection(B)")}}SetA∩BA\cap B두 개의 원이 겹치는 벤 다이어그램입니다. A와 B의 교집합은 두 원이 겹치는 부분입니다.
{{jsxref("Set/symmetricDifference", "A.symmetricDifference(B)")}}Set(A∖B)∪(B∖A)(A\setminus B)\cup(B\setminus A)두 개의 원이 겹치는 벤 다이어그램입니다. A와 B의 대칭차 집합은 두 원 중 어느 한 원이 포함하지만 둘 다 포함하지 않는 영역입니다.
{{jsxref("Set/union", "A.union(B)")}}SetA∪BA\cup B두 개의 원이 겹치는 벤 다이어그램입니다. A와 B의 대칭 차이는 두 원 중 하나 또는 두 원이 포함하는 영역입니다.
{{jsxref("Set/isDisjointFrom", "A.isDisjointFrom(B)")}}BooleanA∩B=∅A\cap B = \empty두 개의 원이 있는 벤 다이어그램입니다. 원이 겹치는 영역이 없기 때문에 A와 B는 분리소 집합입니다.
{{jsxref("Set/isSubsetOf", "A.isSubsetOf(B)")}}BooleanA⊆BA\subseteq B두 개의 원이 있는 벤 다이어그램입니다. A는 B에 완전히 포함되므로 A는 B의 부분 집합입니다.
{{jsxref("Set/isSupersetOf", "A.isSupersetOf(B)")}}BooleanA⊇BA\supseteq B두 개의 원이 있는 벤 다이어그램입니다. B가 A에 완전히 포함되어 있기 때문에 A는 B의 상위 집합입니다.
+ +이 메서드들은 일반화 가능성을 높이기 위해 `Set` 객체뿐만 아니라 [유사 Set](#set-like_objects)인 모든 객체를 허용합니다. + ### 유사 Set 객체(Set-like objects) 모든 [Set 구성 메서드](#set_composition)는 {{jsxref("Operators/this", "this")}}가 실제 `Set` 인스턴스여야 하지만, 인자는 Set과 유사하면 됩니다. 유사 Set 객체는 다음을 제공하는 객체입니다. diff --git a/files/ko/web/javascript/reference/global_objects/set/set/index.md b/files/ko/web/javascript/reference/global_objects/set/set/index.md new file mode 100644 index 00000000000000..d5065e73f8a6b8 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/set/set/index.md @@ -0,0 +1,61 @@ +--- +title: Set() 생성자 +slug: Web/JavaScript/Reference/Global_Objects/Set/Set +l10n: + sourceCommit: 84aaeee9a64e1bfe002837468eb798e5d5eb2bbe +--- + +{{JSRef}} + +**`Set()`** 생성자는 {{jsxref("Set")}} 객체를 생성합니다. + +{{EmbedInteractiveExample("pages/js/set-prototype-constructor.html")}} + +## 구문 + +```js-nolint +new Set() +new Set(iterable) +``` + +> **참고:** `Set()`은 오직 [`new`](/ko/docs/Web/JavaScript/Reference/Operators/new)와 함께 생성할 수 있습니다. `new` 없이 생성을 시도하면 {{jsxref("TypeError")}}가 발생합니다. + +### 매개변수 + +- `iterable` {{optional_inline}} + + - : [순회 가능한 객체](/ko/docs/Web/JavaScript/Reference/Statements/for...of)가 전달되면 모든 요소가 새로운 `Set`에 추가됩니다. + + 이 매개변수를 지정하지 않거나 값이 `null`일 경우 새로운 `Set`은 비어있게 됩니다. + +### 반환 값 + +새로운 `Set` 객체. + +## 예제 + +### `Set` 객체 사용하기 + +```js +const mySet = new Set(); + +mySet.add(1); // Set [ 1 ] +mySet.add(5); // Set [ 1, 5 ] +mySet.add(5); // Set [ 1, 5 ] +mySet.add("some text"); // Set [ 1, 5, 'some text' ] +const o = { a: 1, b: 2 }; +mySet.add(o); +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [`core-js`에서의 `Set` 폴리필](https://github.com/zloirock/core-js#set) +- {{jsxref("Set")}} diff --git a/files/ko/web/javascript/reference/global_objects/string/iswellformed/index.md b/files/ko/web/javascript/reference/global_objects/string/iswellformed/index.md new file mode 100644 index 00000000000000..403ec5a8db92c5 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/iswellformed/index.md @@ -0,0 +1,93 @@ +--- +title: String.prototype.isWellFormed() +slug: Web/JavaScript/Reference/Global_Objects/String/isWellFormed +l10n: + sourceCommit: 27180875516cc311342e74b596bfb589b7211e0c +--- + +{{JSRef}} + +{{jsxref("String")}} 값의 **`isWellFormed()`** 메서드는 이 문자열에 [론 서로게이트](/ko/docs/Web/JavaScript/Reference/Global_Objects/String#utf-16_characters_unicode_code_points_and_grapheme_clusters) 포함 여부를 나타내는 불리언을 반환합니다. + +## 구문 + +```js-nolint +isWellFormed() +``` + +### 매개변수 + +없음. + +### 반환 값 + +문자열이 론 서로게이트를 포함하고 있지 않으면 `true`를 반환하고 그렇지 않다면 `false`를 반환합니다. + +## 설명 + +JavaScript의 문자열은 UTF-16으로 인코딩됩니다. UTF-16 인코딩에는 서로게이트 쌍이라는 개념이 있으며, 이는 [UTF-16 문자, 유니코드 코드 포인트 및 문자소 클러스터](/ko/docs/Web/JavaScript/Reference/Global_Objects/String#utf-16_characters_unicode_code_points_and_graphheme_clusters) 섹션에 자세히 소개되어 있습니다. + +`isWellFormed()`를 사용하면 문자열이 잘 형성되었는지(즉, 론 서로게이트를 포함하지 않는지) 테스트할 수 있습니다. 사용자 정의 구현과 비교할 때 `isWellFormed()`는 엔진이 문자열의 내부 표현에 직접 접근할 수 있으므로 더 효율적입니다. 문자열을 잘 형성된 문자열로 변환해야 하는 경우 {{jsxref("String/toWellFormed", "toWellFormed()")}} 메서드를 사용하세요. `isWellFormed()`를 사용하면 오류를 발생시키거나 유효하지 않은 것으로 표시하는 등 잘못된 형식의 문자열을 올바른 형식의 문자열과 다르게 처리할 수 있습니다. + +## 예제 + +### isWellFormed() 사용하기 + +```js +const strings = [ + // Lone leading surrogate + "ab\uD800", + "ab\uD800c", + // Lone trailing surrogate + "\uDFFFab", + "c\uDFFFab", + // Well-formed + "abc", + "ab\uD83D\uDE04c", +]; + +for (const str of strings) { + console.log(str.isWellFormed()); +} +// Logs: +// false +// false +// false +// false +// true +// true +``` + +### encodeURI()에서 오류 피하기 + +전달된 문자열이 제대로 형태를 갖추지 못한 경우 {{jsxref("encodeURI")}}는 오류가 발생합니다. 문자열을 `encodeURI()`로 전달하기 전에 `isWellFormed()`를 사용하여 문자열을 테스트하면 이 문제를 피할 수 있습니다. + +```js +const illFormed = "https://example.com/search?q=\uD800"; + +try { + encodeURI(illFormed); +} catch (e) { + console.log(e); // URIError: URI malformed +} + +if (illFormed.isWellFormed()) { + console.log(encodeURI(illFormed)); +} else { + console.warn("Ill-formed strings encountered."); // Ill-formed strings encountered. +} +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [Polyfill of `String.prototype.isWellFormed` in `core-js`](https://github.com/zloirock/core-js#well-formed-unicode-strings) +- {{jsxref("String.prototype.toWellFormed()")}} +- {{jsxref("String.prototype.normalize()")}} diff --git a/files/ko/web/javascript/reference/global_objects/string/slice/index.md b/files/ko/web/javascript/reference/global_objects/string/slice/index.md index 2f4b3871f0cdf5..955f93d1122ec1 100644 --- a/files/ko/web/javascript/reference/global_objects/string/slice/index.md +++ b/files/ko/web/javascript/reference/global_objects/string/slice/index.md @@ -1,23 +1,29 @@ --- title: String.prototype.slice() slug: Web/JavaScript/Reference/Global_Objects/String/slice +l10n: + sourceCommit: 4406757f6bb4404b5309756bac2acb994c169e40 --- {{JSRef}} -**`slice()`** 메소드는 문자열의 일부를 추출하면서 새로운 문자열을 반환합니다. +{{jsxref("String")}} 값의 **`slice()`** 메서드는 이 문자열의 일부를 추출하여 이를 새로운 문자열로 반환합니다. 원본 문자열은 수정하지 않습니다. -{{EmbedInteractiveExample("pages/js/string-slice.html")}} +{{EmbedInteractiveExample("pages/js/string-slice.html", "taller")}} ## 문법 -```js -str.slice(beginIndex[, endIndex]) +```js-nolint +slice(indexStart) +slice(indexStart, indexEnd) ``` ### 매개변수 -
beginIndex
추출 시작점인 0부터 시작하는 인덱스입니다. 만약 음수라면, beginIndex는 strLength(문자열 길이) + beginIndex로 취급됩니다. (예를 들어 beginIndex가 -3이면 시작점은 strLength - 3).
만약 beginIndex가 strLength 보다 크거나 같은 경우, slice()는 빈 문자열을 반환합니다.
endIndex{{optional_inline}}
0부터 시작하는 추출 종료점 인덱스로 그 직전까지 추출됩니다. 인덱스 위치의 문자는 추출에 포함되지 않습니다.
만약 endIndex가 생략된다면, slice()는 문자열 마지막까지 추출합니다. 만약 음수라면, endIndex는 strLength(문자열 길이) + endIndex 로 취급됩니다(예를 들어 endIndex가 -3이면 종료점은 strLength - 3).
+- `indexStart` + - : 반환될 부분 문자열에 포함될 첫 번째 문자의 인덱스. +- `indexEnd` {{optional_inline}} + - : 반환될 부분 문자열에서 제외될 첫 번째 문자열의 인덱스. ### 반환 값 @@ -25,28 +31,45 @@ str.slice(beginIndex[, endIndex]) ## 설명 -`slice()`는 문자열로부터 텍스트를 추출하고 새 문자열을 반환합니다. 문자열의 변경은 다른 문자열에 영향을 미치지 않습니다. +`slice()`는 하나의 문자열로부터 텍스트를 추출하고 새 문자열을 반환합니다. + +`slice()`는 `indexEnd`를 포함하지 않고 추출합니다. 예를 들어 `str.slice(4, 8)`는 다섯 번째 문자부터 여덟 번째 문자까지 추출합니다(인덱스 `4`, `5`, `6`, `7`에 해당하는 문자). -`slice()`는 `endIndex`를 포함하지 않고 추출합니다. `str.slice(1, 4)`는 두 번째 문자부터 네 번째 문자까지 추출합니다 (1, 2, 3 인덱스 문자). +```plain + indexStart indexEnd + ↓ ↓ +| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | +| T | h | e | | m | i | r | r | o | r | + + m i r r + _______________ + ↑ + Result +``` -`str.slice(2, -1)`는 세 번째 문자부터 문자열의 마지막에서 두 번째 문자까지 추출합니다. +- `indexStart >= str.length`이라면, 빈 문자열이 반환됩니다. +- `indexStart < 0`이라면, 문자열의 끝부터 인덱스를 셉니다. 보다 공식적으로 말하자면 이 경우, 하위 문자열은 `max(indexStart + str.length, 0)`에서 시작합니다. +- `indexStart`가 생략되었거나 정의되지 않았거나 [숫자로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#number_coercion)할 수 없는 경우, `0`으로 처리됩니다. +- `indexEnd`가 생략되었거나, 정의되지 않았거나, [숫자로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#number_coercion)할 수 없는 경우 또는 `indexEnd >= str.length`이면 `slice()`는 문자열 끝으로 추출합니다. +- `indexEnd < 0`이면 문자열의 끝부터 인덱스를 셉니다. 보다 공식적으로 말하자면 이 경우, 하위 문자열은 `max(indexEnd + str.length, 0)`에서 끝납니다. +- 음수 값을 정규화한 후 (즉, `indexEnd`가 `indexStart` 앞에 있는 문자를 나타내는 경우) `indexEnd <= indexStart`인 경우 빈 문자열이 반환됩니다. -## 예시 +## 예제 ### `slice()`를 사용하여 새 문자열 생성하기 -아래 예시는 새 문자열을 생성하기 위해 `slice()`를 사용합니다. +아래 예제는 새 문자열을 생성하기 위해 `slice()`를 사용합니다. ```js -var str1 = "The morning is upon us.", // the length of str1 is 23. - str2 = str1.slice(1, 8), - str3 = str1.slice(4, -2), - str4 = str1.slice(12), - str5 = str1.slice(30); -console.log(str2); // OUTPUT: he morn -console.log(str3); // OUTPUT: morning is upon u -console.log(str4); // OUTPUT: is upon us. -console.log(str5); // OUTPUT: "" +const str1 = "The morning is upon us."; // str1의 길이는 23입니다. +const str2 = str1.slice(1, 8); +const str3 = str1.slice(4, -2); +const str4 = str1.slice(12); +const str5 = str1.slice(30); +console.log(str2); // he morn +console.log(str3); // morning is upon u +console.log(str4); // is upon us. +console.log(str5); // "" ``` ### 음수 인덱스로 `slice()` 사용하기 @@ -54,28 +77,29 @@ console.log(str5); // OUTPUT: "" 아래 예시는 `slice()`에 음수 인덱스를 사용합니다. ```js -var str = "The morning is upon us."; -str.slice(-3); // returns 'us.' -str.slice(-3, -1); // returns 'us' -str.slice(0, -1); // returns 'The morning is upon us' +const str = "The morning is upon us."; +str.slice(-3); // 'us.' +str.slice(-3, -1); // 'us' +str.slice(0, -1); // 'The morning is upon us' +str.slice(4, -1); // 'morning is upon us' ``` 아래의 예시는 시작 인덱스를 찾기 위해 문자열의 끝에서부터 역방향으로 `11`개를 세고 끝 인덱스를 찾기 위해 문자열의 시작에서부터 정방향으로 `16`개를 셉니다. ```js -console.log(str.slice(-11, 16)); // => "is u"; +console.log(str.slice(-11, 16)); // "is u" ``` 아래에서는 시작 인덱스를 찾기 위해 문자열의 처음부터 정방향으로 `11`개를 세고 끝 인덱스를 찾기 위해 끝에서부터 `7`개를 셉니다. ```js -console.log(str.slice(11, -7)); // => "is u"; +console.log(str.slice(11, -7)); // " is u" ``` 이 인수는 끝에서부터 5로 역순으로 계산하여 시작 인덱스를 찾은 다음 끝에서부터 1을 거쳐 끝 인덱스를 찾습니다. ```js -console.log(str.slice(-5, -1)); // => "n us"; +console.log(str.slice(-5, -1)); // "n us" ``` ## 명세서 @@ -86,7 +110,7 @@ console.log(str.slice(-5, -1)); // => "n us"; {{Compat}} -## See also +## 같이 보기 - {{jsxref("String.prototype.substr()")}} - {{jsxref("String.prototype.substring()")}} diff --git a/files/ko/web/javascript/reference/global_objects/string/string/index.md b/files/ko/web/javascript/reference/global_objects/string/string/index.md new file mode 100644 index 00000000000000..c97f601fcf54f6 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/string/string/index.md @@ -0,0 +1,79 @@ +--- +title: String() 생성자 +slug: Web/JavaScript/Reference/Global_Objects/String/String +l10n: + sourceCommit: cca8713f0b26c8fbba765b9ccb8c3619ca5a6645 +--- + +{{JSRef}} + +**`String()`** 생성자는 {{jsxref("String")}} 객체를 생성합니다. 함수로 호출될 경우 String 형의 원시 값을 반환합니다. + +## 구문 + +```js-nolint +new String(thing) +String(thing) +``` + +> **참고:** `String()`은 [`new`](/ko/docs/Web/JavaScript/Reference/Operators/new)와 함께 호출하거나 아니면 단독으로 호출할 수 있습니다. 하지만 효과는 다릅니다. [반환 값](#반환_값)을 참고하시기 바랍니다. + +### 매개변수 + +- `thing` + - : 문자로 바꿀 모든 것. + +### 반환 값 + +`String()`이 함수로 호출되면 ([`new`](/ko/docs/Web/JavaScript/Reference/Operators/new) 없이) [문자열 원시형](/ko/docs/Web/JavaScript/Reference/Global_Objects/String#string_coercion)으로 강제로 변환된 `값`을 반환합니다. 특히 [Symbol](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol) 값은 `"Symbol(description)"`으로 변환되며, 여기서 `description`은 심볼의 [description](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/description)입니다. + +`String()`이 생성자로 호출되면(`new`와 함께) 특별한 기호 심볼처리 없이 `value`을 문자열 원시형으로 강제로 변환하고 원시형이 아닌 {{jsxref("String")}} 객체로 감싸서 반환합니다. + +> **경고:** `String` 생성자를 사용하는 경우는 거의 없습니다. + +## 예제 + +### String 생성자와 String 함수 + +String 함수와 String 생성자는 다른 결과를 생성합니다. + +```js +const a = new String("Hello world"); // a === "Hello world" 는 false입니다 +const b = String("Hello world"); // b === "Hello world" 는 true 입니다 +a instanceof String; // true +b instanceof String; // false +typeof a; // "object" +typeof b; // "string" +``` + +여기서 함수는 약속한 대로 문자열({{Glossary("primitive", "원시 값")}} 유형)을 생성합니다. +그러나 생성자는 문자열(객체 래퍼) 유형의 인스턴스를 생성하므로 +문자열 생성자를 사용하는 경우는 거의 없습니다. + +### 심볼을 문자열화 시키기 위해 String() 사용 + +`String()`은 심볼을 어떠한 에러 발생 없이 변환을 할 수 있는 유일한 방법입니다. 매우 명시적이기 때문이지요. + +```js example-bad +const sym = Symbol("example"); +`${sym}`; // TypeError: Cannot convert a Symbol value to a string +"" + sym; // TypeError: Cannot convert a Symbol value to a string +"".concat(sym); // TypeError: Cannot convert a Symbol value to a string +``` + +```js example-good +const sym = Symbol("example"); +String(sym); // "Symbol(example)" +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [텍스트 서식](/ko/docs/Web/JavaScript/Guide/Text_formatting) 안내서 diff --git a/files/ko/web/javascript/reference/global_objects/symbol/unscopables/index.md b/files/ko/web/javascript/reference/global_objects/symbol/unscopables/index.md new file mode 100644 index 00000000000000..0c67143f9ec90f --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/symbol/unscopables/index.md @@ -0,0 +1,165 @@ +--- +title: Symbol.unscopables +slug: Web/JavaScript/Reference/Global_Objects/Symbol/unscopables +l10n: + sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a +--- + +{{JSRef}} + +`Symbol.unscopables` 정적 데이터 속성은 [잘 알려진 심볼](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol#잘_알려진_심볼) `@@unscopables`를 나타냅니다. {{jsxref("Statements/with", "with")}} 문은 범위 객체에서 이 심볼을 조회하여 `with` 환경 내에서 바인딩되지 않아야 하는 속성들의 집합을 포함하는 속성을 찾습니다. + +{{EmbedInteractiveExample("pages/js/symbol-unscopables.html")}} + +## 값 + +잘 알려진 심볼 `@@unscopables`. + +{{js_property_attributes(0, 0, 0)}} + +## 설명 + +`@@unscopables` 심볼(`Symbol.unscopables`를 통해 접근)은 [`with`](/ko/docs/Web/JavaScript/Reference/Statements/with) 환경 바인딩에서 특정 속성 이름이 렉시컬 변수로 노출되지 않도록 하기 위해 어떤 객체에도 정의될 수 있습니다. [엄격 모드](/ko/docs/Web/JavaScript/Reference/Strict_mode)를 사용할 때는 `with`문을 사용할 수 없기 때문에 이 심볼이 필요하지 않을 가능성이 큽니다. + +`@@unscopables` 객체의 속성을 `true`(또는 [참 같은 값](/ko/docs/Glossary/Truthy))로 설정하면 해당 속성이 `with` 범위 객체에서 '범위 지정 불가능'이 되어서 `with` 본문의 범위에 도입되지 않습니다. 속성을 `false`(또는 [거짓 같은 값](/ko/docs/Glossary/Falsy))로 설정하면 해당 속성이 '범위 지정 가능'이 되어 렉시컬 범위 변수로 나타나게 됩니다. + +`x`가 범위 지정 불가능인지 여부를 결정할 때는 `@@unscopables` 속성의 전체 프로토타입 체인에서 `x`라는 속성을 검색합니다. 이는 `@@unscopables`를 단순한 객체로 선언했을 경우 `Object.prototype`의 [`toString`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/toString) 등의 속성들 또한 범위 지정 불가능하게 되어서 이러한 속성들이 일반적으로 범위 내에 있다고 가정하는 레거시 코드에 대한 하위 호환성 문제가 발생할 수 있음을 의미합니다([아래의 예제](#프로토타입이_null이_아닌_객체를_unscopables로_사용하지_않기)를 보세요). 따라서 사용자 정의 `@@unscopables` 속성의 프로토타입을 `null`로 설정하는 것이 좋습니다. `Array.prototype[@@unscopables]`처럼 말입니다. + +이 프로토콜은 [`Element.prototype.append()`](/ko/docs/Web/API/Element/append)와 같은 DOM API에서도 활용됩니다. + +## 예시 + +### with 문에서 범위 지정하기 + +다음 코드는 ES5 및 그 이전 버전에서는 잘 작동합니다. 하지만 ECMAScript 2015 이후부터 {{jsxref("Array.prototype.keys()")}} 메서드가 도입되었습니다. 이는 `with` 환경 내에서 "keys"가 변수가 아니라 메서드가 된다는 것을 의미합니다. 이게 바로 `@@unscopables` 심볼이 도입된 이유입니다. 내장 `@@unscopables` 설정은 `with` 문의 범위에 일부 배열 메서드가 들어가는 것을 방지하기 위해 {{jsxref("Array/@@unscopables", "Array.prototype[@@unscopables]")}}로 구현되었습니다. + +```js +var keys = []; + +with (Array.prototype) { + keys.push("something"); +} +``` + +### 객체에서의 범위 지정 불가능 + +`@@unscopables`를 사용자 정의 객체에 설정할 수도 있습니다. + +```js +const obj = { + foo: 1, + bar: 2, + baz: 3, +}; + +obj[Symbol.unscopables] = { + // `Object.prototype`의 메서드가 범위 지정 불가능하게 되는 것을 + // 방지하기 위해 객체의 프로토타입을 `null`로 설정합니다. + __proto__: null, + // `foo` 는 범위 지정 가능해집니다. + foo: false, + // `bar` 는 범위 지정 불가능해집니다. + bar: true, + // `baz` 는 생략되었습니다. `undefined`는 거짓 같은 값이므로 baz도 범위 지정 가능합니다 (기본값). +}; + +with (obj) { + console.log(foo); // 1 + console.log(bar); // ReferenceError: bar is not defined + console.log(baz); // 3 +} +``` + +### 프로토타입이 null이 아닌 객체를 @@unscopables로 사용하지 않기 + +프로토타입을 제거하지 않은 단순한 객체를 `@@unscopables`로 선언하면 미묘한 버그가 발생할 수 있습니다. `@@unscopables` 가 나오기 이전에 작동하고 있던 다음과 같은 코드를 고려해 볼 수 있습니다. + +```js +const character = { + name: "Yoda", + toString: function () { + return "Use with statements, you must not"; + }, +}; + +with (character) { + console.log(name + ' says: "' + toString() + '"'); // Yoda says: "Use with statements, you must not" +} +``` + +하위 호환성을 유지하기 위해, `character`에 더 많은 속성을 추가할 때 `@@unscopables` 속성을 추가하기로 결정했다고 가정합니다. 그러면 단순하게 생각해서 다음과 같이 할 수 있을 것입니다. + +```js example-bad +const character = { + name: "Yoda", + toString: function () { + return "Use with statements, you must not"; + }, + student: "Luke", + [Symbol.unscopables]: { + // `student`를 범위 지정 불가능하게 만듭니다. + student: true, + }, +}; +``` + +그러나, 위의 코드는 이제 작동하지 않습니다. + +```js +with (character) { + console.log(name + ' says: "' + toString() + '"'); // Yoda says: "[object Undefined]" +} +``` + +이는 `character[Symbol.unscopables].toString`을 조회하면 [`Object.prototype.toString()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/toString)을 반환하기 때문입니다. 그리고 이는 참 같은 값입니다. 따라서 `with()` 문에서 `toString()`을 호출하면 `globalThis.toString()`을 호출하게 됩니다. 그리고 이는 [`this`](/ko/docs/Web/JavaScript/Reference/Operators/this) 없이 호출되기 때문에 `this`는 `undefined`가 되고 그래서 `[object Undefined]`를 반환하게 됩니다. + +메서드가 `character`에 의해 재정의되지 않더라도, 메서드를 범위 지정 불가능하게 설정하면 `this`의 값이 변경됩니다. + +```js +const proto = {}; +const obj = { __proto__: proto }; + +with (proto) { + console.log(isPrototypeOf(obj)); // true; `isPrototypeOf` 은 범위 지정되어 있고 `this`는 `proto`입니다. +} + +proto[Symbol.unscopables] = {}; + +with (proto) { + console.log(isPrototypeOf(obj)); // TypeError: Cannot convert undefined or null to object + // `isPrototypeOf`은 범위 지정되어 있지 않고 `this`는 undefined입니다. +} +``` + +이를 해결하기 위해서는 `@@unscopables`은 `Object.prototype` 속성 없이, 범위 지정 불가능하게 만들고자 하는 속성들만 포함한다는 것을 확실하게 해야 합니다. + +```js example-good +const character = { + name: "Yoda", + toString: function () { + return "Use with statements, you must not"; + }, + student: "Luke", + [Symbol.unscopables]: { + // `Object.prototype`의 메서드가 범위 지정 불가능하게 되는 것을 + // 방지하기 위해 객체의 프로토타입을 `null`로 설정합니다. + __proto__: null, + // `student` 는 범위 지정 불가능해집니다. + student: true, + }, +}; +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{jsxref("Array/@@unscopables", "Array.prototype[@@unscopables]")}} +- [`with`](/ko/docs/Web/JavaScript/Reference/Statements/with) +- [`Element.prototype.append()`](/ko/docs/Web/API/Element/append) diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/at/index.md b/files/ko/web/javascript/reference/global_objects/typedarray/at/index.md new file mode 100644 index 00000000000000..f304cd40b83d3d --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/typedarray/at/index.md @@ -0,0 +1,89 @@ +--- +title: TypedArray.prototype.at() +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/at +l10n: + sourceCommit: a815a95e4ab4adf391d8a7bc66a3abbce1a686d8 +--- + +{{JSRef}} + +{{jsxref("TypedArray")}} 인스턴스의 **`at()`** 메서드는 정수 값을 받아 해당 인덱스에 있는 항목을 반환하며, 양의 정수와 음의 정수를 모두 허용합니다. 음의 정수는 배열의 마지막 항목에서부터 역순으로 셉니다. 이 메서드는 {{jsxref("Array.prototype.at()")}}와 동일한 알고리즘을 가집니다. + +{{EmbedInteractiveExample("pages/js/typedarray-at.html")}} + +## 구문 + +```js-nolint +at(index) +``` + +### 매개변수 + +- `index` + - : 반환할 배열 요소의 0부터 시작하는 인덱스로, [정수로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#정수_변환)됩니다. 음수 인덱스는 형식화 배열 끝부터 역순으로 셉니다. `index < 0`인 경우, `index + array.length`로 접근합니다. + +### 반환 값 + +주어진 인덱스와 일치하는 형식화 배열의 요소입니다. `index < -array.length` 또는 `index >= array.length`인 경우, 해당 속성에 접근하지 않고 항상 {{jsxref("undefined")}}를 반환합니다. + +## 설명 + +보다 자세한 정보는 {{jsxref("Array.prototype.at()")}}를 참고하시기 바랍니다. 이 메서드는 범용적이지 않으며, 형식화 배열 인스턴스에서만 호출할 수 있습니다. + +## 예제 + +### 배열의 끝 값 반환 + +아래 예제는 주어진 배열에서 맨 마지막에 위치한 값을 반환하는 함수입니다. + +```js +const uint8 = new Uint8Array([1, 2, 4, 7, 11, 18]); + +// 주어진 배열에서 마지막 요소를 반환하는 함수 +function returnLast(arr) { + return arr.at(-1); +} + +const lastItem = returnLast(uint8); +console.log(lastItem); // 18 +``` + +### 비교 메서드 + +아래 예제에서는 {{jsxref("TypedArray")}}의 뒤에서 두 번째 요소를 선택하는 다양한 방법을 비교합니다. 아래의 모든 방법이 유효하지만, `at()` 메서드의 간결성과 가독성을 강조합니다. + +```js +// 몇 가지 값이 있는 형식화 배열 +const uint8 = new Uint8Array([1, 2, 4, 7, 11, 18]); + +// length 속성 사용하기 +const lengthWay = uint8[uint8.length - 2]; +console.log(lengthWay); // 11 + +// slice() 메서드 사용하기. 배열이 반환되는걸 명심하세요 +const sliceWay = uint8.slice(-2, -1); +console.log(sliceWay[0]); // 11 + +// at() 메서드 사용하기 +const atWay = uint8.at(-2); +console.log(atWay); // 11 +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [Polyfill of `TypedArray.prototype.at` in `core-js`](https://github.com/zloirock/core-js#relative-indexing-method) +- [JavaScript 형식화 배열](/ko/docs/Web/JavaScript/Guide/Typed_arrays) guide +- {{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/ko/web/javascript/reference/global_objects/typedarray/find/index.md b/files/ko/web/javascript/reference/global_objects/typedarray/find/index.md new file mode 100644 index 00000000000000..4b02bd6f8fa7c8 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/typedarray/find/index.md @@ -0,0 +1,84 @@ +--- +title: TypedArray.prototype.find() +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/find +l10n: + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de +--- + +{{JSRef}} + +{{jsxref("Array")}} 인스턴스의 **`find()`** 메서드는 제공된 형식화 배열에서 제공된 테스트 함수를 만족하는 첫 번째 요소를 반환합니다. 테스트 함수를 만족하는 값이 없으면 {{jsxref("undefined")}}가 반환됩니다. 이 메서드는 {{jsxref("Array.prototype.find()")}}와 동일한 알고리즘을 가집니다. + +{{EmbedInteractiveExample("pages/js/typedarray-find.html")}} + +## 구문 + +```js-nolint +find(callbackFn) +find(callbackFn, thisArg) +``` + +### 매개변수 + +- `callback` + - : 형식화 배열의 각 요소에 대해 실행할 함수입니다. 일치하는 요소를 찾았으면 [참 같은](/ko/docs/Glossary/Truthy) 값을 반환하고, 그렇지 않으면 [거짓 같은](/ko/docs/Glossary/Falsy) 값을 반환해야 합니다. 함수는 다음 인수를 사용하여 호출됩니다. + - `element` + - : 형식화 배열에서 현재 처리되고 있는 요소. + - `index` + - : 형식화 배열에서 현재 처리되고 있는 요소의 인덱스. + - `array` + - : `find()`가 호출된 형식화 배열. +- `thisArg` {{optional_inline}} + - : `callbackFn`을 실행할 때 `this`로 사용할 값입니다. [순회 메서드](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#순회_메서드)를 참고하시기 바랍니다. + +### 반환 값 + +제공된 테스트 함수를 만족하는 형식화 배열의 첫 번째 요소입니다. +테스트 함수를 만족하는 요소가 없으면, {{jsxref("undefined")}}가 반환됩니다. + +## 설명 + +보다 자세한 정보는 {{jsxref("Array.prototype.find()")}}를 참고하시기 바랍니다. 이 메서드는 범용적이지 않으며 오직 형식화 배열 인스턴스에서만 호출할 수 있습니다. + +## 예제 + +### 형식화 배열에서 소수 찾기 + +다음 예제는 형식화 배열의 요소 중 소수인 요소를 찾습니다(소수가 없는 경우에는 {{jsxref("undefined")}}를 반환합니다). + +```js +function isPrime(element, index, array) { + let start = 2; + while (start <= Math.sqrt(element)) { + if (element % start++ < 1) { + return false; + } + } + return element > 1; +} + +const uint8 = new Uint8Array([4, 5, 8, 12]); +console.log(uint8.find(isPrime)); // 5 +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [`core-js`에서 `TypedArray.prototype.find` 폴리필](https://github.com/zloirock/core-js#ecmascript-typed-arrays) +- [JavaScript 형식화 배열](/ko/docs/Web/JavaScript/Guide/Typed_arrays) 안내서 +- {{jsxref("TypedArray")}} +- {{jsxref("TypedArray.prototype.findIndex()")}} +- {{jsxref("TypedArray.prototype.findLast()")}} +- {{jsxref("TypedArray.prototype.findLastIndex()")}} +- {{jsxref("TypedArray.prototype.includes()")}} +- {{jsxref("TypedArray.prototype.filter()")}} +- {{jsxref("TypedArray.prototype.every()")}} +- {{jsxref("TypedArray.prototype.some()")}} +- {{jsxref("Array.prototype.find()")}} diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/with/index.md b/files/ko/web/javascript/reference/global_objects/typedarray/with/index.md new file mode 100644 index 00000000000000..291374b949c929 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/typedarray/with/index.md @@ -0,0 +1,63 @@ +--- +title: TypedArray.prototype.with() +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/with +l10n: + sourceCommit: a815a95e4ab4adf391d8a7bc66a3abbce1a686d8 +--- + +{{JSRef}} + +{{jsxref("TypedArray")}} 인스턴스의 **`with()`** 메서드는 [대괄호 표기법](/ko/docs/Web/JavaScript/Reference/Operators/Property_accessors#bracket_notation)을 사용하여 주어진 인덱스의 값을 변경하는 [복사](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#복사_메서드와_변경_메서드mutating_method) 버전입니다. 이 메서드는 주어진 인덱스의 요소가 주어진 값으로 대체된 새로운 형식화 배열을 반환합니다. 이 메서드는 {{jsxref("Array.prototype.with()")}} 메서드와 같은 알고리즘을 가지고 있습니다. + +## 구문 + +```js-nolint +arrayInstance.with(index, value) +``` + +### 매개변수 + +- `index` + - : 형식화 배열을 변경할 0 기반 인덱스이며 [정수로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#integer_conversion)되는 값입니다. +- `value` + - : 주어진 인덱스에 할당할 모든 값. + +### 반환 값 + +`index`의 요소 값이 `value`로 대체된 새로운 형식화 배열. + +### 예외 + +- {{jsxref("RangeError")}} + - : `index >= array.length` 혹은 `index < -array.length`일때 발생합니다. + +## 설명 + +보다 상세한 설명은 {{jsxref("Array.prototype.with()")}}를 참고하시기 바랍니다. 이 메서드는 제네릭이 아니며 형식화 배열 인스턴스에서만 호출할 수 있습니다. + +## 예제 + +### with() 사용하기 + +```js +const arr = new Uint8Array([1, 2, 3, 4, 5]); +console.log(arr.with(2, 6)); // Uint8Array [1, 2, 6, 4, 5] +console.log(arr); // Uint8Array [1, 2, 3, 4, 5] +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [Polyfill of `TypedArray.prototype.with` in `core-js`](https://github.com/zloirock/core-js#change-array-by-copy) +- [JavaScript 형식화 배열](/ko/docs/Web/JavaScript/Guide/Typed_arrays) guide +- {{jsxref("TypedArray.prototype.toReversed()")}} +- {{jsxref("TypedArray.prototype.toSorted()")}} +- {{jsxref("TypedArray.prototype.at()")}} +- {{jsxref("Array.prototype.with()")}} diff --git a/files/ko/web/javascript/reference/statements/with/index.md b/files/ko/web/javascript/reference/statements/with/index.md new file mode 100644 index 00000000000000..f17184dae8c7ea --- /dev/null +++ b/files/ko/web/javascript/reference/statements/with/index.md @@ -0,0 +1,176 @@ +--- +title: with +slug: Web/JavaScript/Reference/Statements/with +l10n: + sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a +--- + +{{jsSidebar("Statements")}}{{Deprecated_Header}} + +> **참고:** `with`문의 사용은 권장되지 않습니다. 혼란스러운 버그와 호환성 문제의 원인이 될 수 있고 최적화를 불가능하게 만들며 [엄격 모드](/ko/docs/Web/JavaScript/Reference/Strict_mode)에서 금지되어 있기 때문입니다. 속성에 접근하고자 하는 객체를 임시 변수에 할당하는 것이 대안으로 권장됩니다. + +`with`문은 문의 스코프 체인을 확장합니다. + +## 구문 + +```js-nolint +with (expression) + statement +``` + +- `expression` + - : 문을 평가할 때 사용되는 스코프 체인에 주어진 표현식을 추가합니다. 표현식 주위의 괄호는 필수입니다. +- `statement` + - : 임의의 문. 여러 개의 문을 실행하려면 [블록](/ko/docs/Web/JavaScript/Reference/Statements/block) 문(`{ ... }`)을 사용하여 문들을 묶습니다. + +## 설명 + +식별자에는 두 가지 유형이 있습니다. '제한된' 식별자와 '제한되지 않은' 식별자입니다. 제한되지 않은 식별자는 해당 식별자가 어디서 왔는지 나타내지 않는 식별자입니다. + +```js +foo; // 제한되지 않은 식별자 +foo.bar; // bar는 제한된 식별자 +``` + +일반적으로 제한되지 않은 식별자는 그 이름을 가진 변수를 찾기 위해 스코프 체인을 검색함으로써 이행됩니다. 반면에 제한된 식별자는 그 이름을 가진 속성을 찾기 위해 객체의 프로토타입 체인을 검색하여 이행됩니다. + +```js +const foo = { bar: 1 }; +console.log(foo.bar); +// foo는 스코프 체인에서 변수로 발견된다. +// bar는 foo에서 속성으로 발견된다. +``` + +이 규칙의 예외는 [전역 객체](/ko/docs/Glossary/Global_object)로, 이는 스코프 체인의 최상위에 위치하여 전역 객체의 속성들은 자동적으로 제한자 없이 참조할 수 있는 전역 변수가 됩니다. + +```js +console.log(globalThis.Math === Math); // true +``` + +`with` 문은 문의 본문이 평가되는 동안 주어진 객체를 스코프 체인의 맨 앞에 추가합니다. 모든 제한되지 않은 이름은 상위 스코프 체인을 검색하기 전에 먼저 주어진 객체 내에서 ([in](/ko/docs/Web/JavaScript/Reference/Operators/in)으로 확인하여) 검색됩니다. + +참고로 제한되지 않은 참조가 객체의 메서드를 조회하는 경우 그 메서드는 `with`문에 주어진 객체를 `this` 값으로 하여 호출됩니다. + +```js +with ([1, 2, 3]) { + console.log(toString()); // 1,2,3 +} +``` + +객체는 [`@@unscopables`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/unscopables) 속성을 가질 수 있으며, 이 속성은 (하위 호환성을 위해) 스코프 체인에 추가되지 않아야 하는 속성의 목록을 정의합니다. 자세한 내용은 [Symbol.unscopables](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/unscopables) 문서를 참고하십시오. + +`with` 문을 사용하는 이유는 임시 변수를 하나 줄이는 것과 긴 객체 참조를 반복하는 걸 피함으로써 파일 크기를 줄이는 것입니다. 그러나 `with`문이 바람직하지 않은 이유들은 훨씬 더 많고 다음과 같습니다. + +- 성능: `with` 문은 모든 이름 조회시에 지정된 객체를 첫번째로 검색하게 합니다. 따라서 지정된 객체의 속성이 아닌 모든 식별자는 `with` 블록 내에서 더 느리게 검색됩니다. 게다가 최적화 도구가 제한되지 않은 식별자 각각이 무엇을 참조하는지에 대해 어떤 가정도 할 수 없으므로, 식별자가 사용될 때마다 동일한 속성 조회를 반복해야 합니다. +- 가독성: `with` 문은 인간 독자나 JavaScript 컴파일러가 제한되지 않은 이름이 스코프 체인에서 발견될지, 만약 그렇다면 어떤 객체에서 발견될지를 판단하기 어렵게 만듭니다. 다음은 그 예시입니다. + + ```js + function f(x, o) { + with (o) { + console.log(x); + } + } + ``` + + `f`의 정의만 보면 `with` 본문 내의 `x`가 무엇을 참조하는지 알 수 없습니다. `x`가 `o.x`인지 `f`의 첫 번째 형식 매개변수인지는 `f`가 호출될 때만 알 수 있습니다. 두 번째 매개변수로 전달하는 객체에 `x`를 정의하는 것을 잊어도 오류가 발생하지 않습니다. 대신 예상치 못한 결과가 나올 뿐입니다. 또한 이러한 코드는 실제 의도가 무엇인지도 불분명합니다. + +- 향후 호환성: `with`를 사용하는 코드는 특히 단순한 객체가 아닌 대상과 함께 사용될 때 향후 호환되지 않는 코드가 될 수 있습니다. 이는 해당 대상이 미래에 더 많은 속성을 갖게 될 수 있기 때문입니다. 다음 예시를 살펴보겠습니다. + + ```js + function f(foo, values) { + with (foo) { + console.log(values); + } + } + ``` + + ECMAScript 5 환경에서 `f([1, 2, 3], obj)`를 호출하면, `with` 문 내의 `values` 참조는 `obj`로 이행됩니다. 그러나 ECMAScript 2015는 `Array.prototype`에 [`values`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/values) 속성을 도입합니다(따라서 모든 배열에서 `values` 속성을 사용할 수 있게 됩니다). 따라서 환경을 업그레이드하면 `with` 문 내의 `values` 참조는 `[1, 2, 3].values`로 이행되며, 이는 버그를 일으킬 가능성이 큽니다. + + 이 특정 예제에서는 `values`가 [`Array.prototype[@@unscopables]`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/@@unscopables)에 의해 스코프 지정 불가능하게 정의되어 있어 해당 코드의 `values`는 여전히 `values` 매개변수로 올바르게 이행됩니다. 만약 `values`가 스코프 지정 불가능으로 정의되지 않았다면, 이는 디버깅하기 어려운 문제가 될 수 있습니다. + +## 예제 + +### with문 사용하기 + +다음 `with` 문은 {{jsxref("Math")}} 객체를 기본 객체로 지정합니다. `with` 문 다음의 문장들은 객체를 명시하지 않고 {{jsxref("Math/PI", "PI")}} 속성과 {{jsxref("Math/cos", "cos")}} 및 {{jsxref("Math/sin", "sin")}} 메서드를 참조합니다. JavaScript는 이러한 참조에 대해 Math 객체를 가정합니다. + +```js +let a, x, y; +const r = 10; + +with (Math) { + a = PI * r * r; + x = r * cos(PI); + y = r * sin(PI / 2); +} +``` + +### 현재 스코프에서 속성 구조 분해 할당을 사용하여 with문 피하기 + +대부분의 경우 [속성 구조 분해 할당](/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)을 통해서 `with` 사용을 피할 수 있습니다. 여기서는 `with`가 추가 스코프를 생성하는 동작을 모방하기 위해 추가 블록을 만들었지만 실제 사용에서는 이 블록을 보통 생략할 수 있습니다. + +```js +let a, x, y; +const r = 10; + +{ + const { PI, cos, sin } = Math; + a = PI * r * r; + x = r * cos(PI); + y = r * sin(PI / 2); +} +``` + +### IIFE를 사용하여 with문 피하기 + +만약 긴 이름의 참조를 여러 번 재사용해야 하는 표현식을 만들고 있으며 그 긴 이름을 표현식 내에서 제거하려고 한다면 [IIFE](/ko/docs/Glossary/IIFE)로 표현식을 감싸고 긴 이름을 인수로 제공할 수 있습니다. + +```js +const objectHavingAnEspeciallyLengthyName = { foo: true, bar: false }; + +if (((o) => o.foo && !o.bar)(objectHavingAnEspeciallyLengthyName)) { + // 이 분기가 실행됩니다. +} +``` + +### with문과 프록시를 사용해서 동적 네임스페이스 생성하기 + +`with`는 모든 변수 조회를 속성 조회로 변환하는 반면 [프록시](/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy)는 모든 속성 조회 호출을 가로챌 수 있게 합니다. 이를 결합하여 동적 네임스페이스를 생성할 수 있습니다. + +```js +const namespace = new Proxy( + {}, + { + has(target, key) { + // `console`과 같은 전역 속성을 가로채는 걸 피하십시오. + if (key in globalThis) { + return false; + } + // 모든 속성 조회를 가로챕니다. + return true; + }, + get(target, key) { + return key; + }, + }, +); + +with (namespace) { + console.log(a, b, c); // "a" "b" "c" +} +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{jsxref("Statements/block", "block", "", 1)}} +- [Strict mode](/ko/docs/Web/JavaScript/Reference/Strict_mode) +- {{jsxref("Symbol.unscopables")}} +- {{jsxref("Array/@@unscopables", "Array.prototype[@@unscopables]")}} diff --git a/files/ko/web/svg/attribute/additive/index.md b/files/ko/web/svg/attribute/additive/index.md new file mode 100644 index 00000000000000..9ec929ee4082fc --- /dev/null +++ b/files/ko/web/svg/attribute/additive/index.md @@ -0,0 +1,50 @@ +--- +title: additive +slug: Web/SVG/Attribute/additive +l10n: + sourceCommit: 54eb3a678b4d4cbc94588d2234103e74dfa063a0 +--- + +{{SVGRef}} + +**`additive`** 특성은 애니메이션을 추가될지의 여부를 제어합니다. + +특성 값은 절대값보다 오프셋 혹은 델타 값으로 애니메이션에 정의하는 것이 자주 유용하게 사용됩니다. + +이 특성은 다음 SVG 요소들과 함께 사용할 수 있습니다. + +- {{SVGElement("animate")}} +- {{SVGElement("animateMotion")}} +- {{SVGElement("animateTransform")}} + +## 사용 일람 + + + + + + + + + + + + + + + + +
Valuereplace | sum
Default valuereplace
AnimatableNo
+ +- sum + - : 애니메이션이 특성의 원래 값과 다른 낮은 우선 순위를 가진 애니메이션 값에 더해질 것임을 지정합니다. +- replace + - : 애니메이션이 특성의 원래 값과 다른 낮은 우선 순위를 가진 애니메이션 값을 덮어쓸 것임을 지정합니다. 이는 기본값이지만, [SMIL 애니메이션: 어떻게 from, to 그리고 가 additive 동작에 어떻게 영향을 미치는가](https://www.w3.org/TR/2001/REC-smil-animation-20010904/#FromToByAndAdditive) 에 기술된대로 {{SVGAttr("by")}} 그리고 {{SVGAttr("to")}} 애니메이션 특성 값에 영향을 받아 동작합니다. + +## 명세서 + +{{Specifications}} + +## 같이 보기 + +- [SMIL 애니메이션 정의서](https://www.w3.org/TR/2001/REC-smil-animation-20010904/#AdditiveAttribute) diff --git a/files/ko/web/svg/attribute/data-_star_/index.md b/files/ko/web/svg/attribute/data-_star_/index.md new file mode 100644 index 00000000000000..57a9f0d14e7970 --- /dev/null +++ b/files/ko/web/svg/attribute/data-_star_/index.md @@ -0,0 +1,34 @@ +--- +title: data-* +slug: Web/SVG/Attribute/data-* +l10n: + sourceCommit: 335dda2e9a42f5e9257ee398437cd984f6cabb45 +--- + +{{SVGRef}} + +**`data-*`** SVG 특성은 사용자 정의 데이터 특성이라고 불립니다. 이 특성은 스크립팅 목적으로 사용되며, 표준 특성으로는 공유할 수 없는 정보를 SVG 마크업과 그 결과로 출력된 DOM 공유할 수 있게 합니다. 사용자 정의 데이터는 특성이 속한 요소의 {{domxref("SVGElement")}} 인터페이스를 통해 가능하며 {{domxref("SVGElement.dataset")}} 속성을 통해 사용할 수 있습니다. + +`*` 는 [명명을 위한 XML 규칙들](https://www.w3.org/TR/REC-xml/#NT-Name) 에서 허용하는 어떠한 문자열로도 대체가 가능하지만, 아래와 같은 제한 사항들이 있습니다. + +- `xml` 로 시작할 수 없습니다. +- 세미콜론 (`;`, `U+003A`) 이 허용되지 않습니다. +- 대문자 `A` 부터 `Z` 는 사용하지 않습니다. + +> **참고:** {{domxref("SVGElement.dataset")}} 속성은 `SVGElement.dataset.testValue` 를 통해 `data-test-value` 특성을 제공하는 {{domxref("DOMStringMap")}} 속성입니다. 하이픈 문자 (`-`, `U+002D`) 는 제거되고 다음 문자는 대문자로 변환되며, {{Glossary("camel_case", "카멜 케이스")}} 형식이 됩니다. + +이 특성은 어느 SVG 요소에도 적용 가능합니다. + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{domxref("SVGElement")}} +- {{domxref("SVGElement.dataset")}} 속성은 스크립트에서 이러한 특성들로 접근할 때 사용됩니다. +- [데이터 특성 사용하기](/ko/docs/Learn/HTML/Howto/Use_data_attributes) diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt index 515cc4eb7887c0..b2cc18090a3363 100644 --- a/files/pt-br/_redirects.txt +++ b/files/pt-br/_redirects.txt @@ -569,10 +569,13 @@ /pt-BR/docs/Web/API/Element.removeAttribute /pt-BR/docs/Web/API/Element/removeAttribute /pt-BR/docs/Web/API/Element/accessKey /pt-BR/docs/Web/API/HTMLElement/accessKey /pt-BR/docs/Web/API/Element/addEventListener /pt-BR/docs/Web/API/EventTarget/addEventListener -/pt-BR/docs/Web/API/Event/Comparativo_entre_Event_Targets /pt-BR/docs/Web/API/Event/Comparison_of_Event_Targets +/pt-BR/docs/Web/API/Event/Comparativo_entre_Event_Targets /pt-BR/docs/Learn/JavaScript/Building_blocks/Event_bubbling +/pt-BR/docs/Web/API/Event/Comparison_of_Event_Targets /pt-BR/docs/Learn/JavaScript/Building_blocks/Event_bubbling /pt-BR/docs/Web/API/EventListener /pt-BR/docs/conflicting/Web/API/EventTarget/addEventListener /pt-BR/docs/Web/API/EventSource/onerror /pt-BR/docs/Web/API/EventSource/error_event -/pt-BR/docs/Web/API/Fetch_API/Uso_de_busca_Cross-global /pt-BR/docs/Web/API/Fetch_API/Cross-global_fetch_usage +/pt-BR/docs/Web/API/Fetch_API/Basic_concepts /pt-BR/docs/conflicting/Web/API/Fetch_API/Using_Fetch +/pt-BR/docs/Web/API/Fetch_API/Cross-global_fetch_usage /pt-BR/docs/conflicting/Web/API/Fetch_API/Using_Fetch_76a0f6f382ec36bfa1bf0b4e0ef87c0c +/pt-BR/docs/Web/API/Fetch_API/Uso_de_busca_Cross-global /pt-BR/docs/conflicting/Web/API/Fetch_API/Using_Fetch_76a0f6f382ec36bfa1bf0b4e0ef87c0c /pt-BR/docs/Web/API/FileReader/onload /pt-BR/docs/Web/API/FileReader/load_event /pt-BR/docs/Web/API/GlobalEventHandlers/onabort /pt-BR/docs/conflicting/Web/API/HTMLMediaElement/abort_event /pt-BR/docs/Web/API/GlobalEventHandlers/onblur /pt-BR/docs/Web/API/Window/blur_event @@ -681,6 +684,7 @@ /pt-BR/docs/Web/Acessibilidade/Entendendo_WCAG /pt-BR/docs/Web/Accessibility/Understanding_WCAG /pt-BR/docs/Web/Apps/Progressive/Introdução /pt-BR/docs/Web/Progressive_web_apps/Tutorials/js13kGames /pt-BR/docs/Web/CSS/-moz-box-ordinal-group /pt-BR/docs/Web/CSS/box-ordinal-group +/pt-BR/docs/Web/CSS/-webkit-overflow-scrolling /pt-BR/docs/orphaned/Web/CSS/-webkit-overflow-scrolling /pt-BR/docs/Web/CSS/CSS_Animations/Usando_animações_CSS /pt-BR/docs/Web/CSS/CSS_animations/Using_CSS_animations /pt-BR/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator /pt-BR/docs/Web/CSS/CSS_backgrounds_and_borders/Border-image_generator /pt-BR/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator /pt-BR/docs/Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator diff --git a/files/pt-br/_wikihistory.json b/files/pt-br/_wikihistory.json index 3292765ce649ad..5b43d7cee4f17d 100644 --- a/files/pt-br/_wikihistory.json +++ b/files/pt-br/_wikihistory.json @@ -1420,6 +1420,10 @@ "modified": "2020-07-20T16:29:20.448Z", "contributors": ["eziotristao", "gabriel_cadu", "artphil", "greysonf"] }, + "Learn/JavaScript/Building_blocks/Event_bubbling": { + "modified": "2019-11-03T21:25:56.066Z", + "contributors": ["rayonnunes"] + }, "Learn/JavaScript/Building_blocks/Events": { "modified": "2020-07-16T22:31:39.504Z", "contributors": [ @@ -2991,10 +2995,6 @@ "modified": "2019-03-23T23:01:39.950Z", "contributors": ["ralfting", "gregori", "juliocarneiro", "fscholz"] }, - "Web/API/Event/Comparison_of_Event_Targets": { - "modified": "2019-11-03T21:25:56.066Z", - "contributors": ["rayonnunes"] - }, "Web/API/Event/Event": { "modified": "2020-10-15T21:42:53.584Z", "contributors": ["fscholz", "juliocarneiro"] @@ -3088,14 +3088,6 @@ "modified": "2020-10-15T21:42:57.080Z", "contributors": ["mateusvelleda", "BrunoLucas", "fapbatista", "tcelestino"] }, - "Web/API/Fetch_API/Basic_concepts": { - "modified": "2020-02-17T13:24:31.887Z", - "contributors": ["diezan", "LincePotiguara"] - }, - "Web/API/Fetch_API/Cross-global_fetch_usage": { - "modified": "2019-03-18T20:48:56.041Z", - "contributors": ["matluz"] - }, "Web/API/Fetch_API/Using_Fetch": { "modified": "2020-10-15T21:51:06.123Z", "contributors": [ @@ -4330,16 +4322,6 @@ "modified": "2019-03-23T22:04:16.687Z", "contributors": ["filipetorres"] }, - "Web/CSS/-webkit-overflow-scrolling": { - "modified": "2019-03-23T22:49:05.514Z", - "contributors": [ - "teoli", - "otaviogui", - "rafaelcavalcante", - "fcard", - "alexanmtz" - ] - }, "Web/CSS/-webkit-text-security": { "modified": "2020-07-18T11:21:00.057Z", "contributors": ["alexalannunes"] @@ -10523,6 +10505,14 @@ "modified": "2019-03-23T22:20:33.890Z", "contributors": ["cezaraugusto"] }, + "conflicting/Web/API/Fetch_API/Using_Fetch": { + "modified": "2020-02-17T13:24:31.887Z", + "contributors": ["diezan", "LincePotiguara"] + }, + "conflicting/Web/API/Fetch_API/Using_Fetch_76a0f6f382ec36bfa1bf0b4e0ef87c0c": { + "modified": "2019-03-18T20:48:56.041Z", + "contributors": ["matluz"] + }, "conflicting/Web/API/Geolocation/getCurrentPosition": { "modified": "2019-03-23T22:47:40.708Z", "contributors": ["victorkurauchi"] @@ -11224,6 +11214,16 @@ "modified": "2020-10-15T22:12:51.330Z", "contributors": ["dekxside"] }, + "orphaned/Web/CSS/-webkit-overflow-scrolling": { + "modified": "2019-03-23T22:49:05.514Z", + "contributors": [ + "teoli", + "otaviogui", + "rafaelcavalcante", + "fcard", + "alexanmtz" + ] + }, "orphaned/Web/CSS/CSS_Animations/Detecting_CSS_animation_support": { "modified": "2019-03-18T21:31:28.635Z", "contributors": ["wbamberg", "eyglys"] diff --git a/files/pt-br/web/api/fetch_api/basic_concepts/index.md b/files/pt-br/conflicting/web/api/fetch_api/using_fetch/index.md similarity index 97% rename from files/pt-br/web/api/fetch_api/basic_concepts/index.md rename to files/pt-br/conflicting/web/api/fetch_api/using_fetch/index.md index 6f0c89efc12b1c..e3ef792145d2dd 100644 --- a/files/pt-br/web/api/fetch_api/basic_concepts/index.md +++ b/files/pt-br/conflicting/web/api/fetch_api/using_fetch/index.md @@ -1,6 +1,7 @@ --- title: Conceitos básicos de Fetch -slug: Web/API/Fetch_API/Basic_concepts +slug: conflicting/Web/API/Fetch_API/Using_Fetch +original_slug: Web/API/Fetch_API/Basic_concepts --- {{DefaultAPISidebar("Fetch API")}} diff --git a/files/pt-br/web/api/fetch_api/cross-global_fetch_usage/index.md b/files/pt-br/conflicting/web/api/fetch_api/using_fetch_76a0f6f382ec36bfa1bf0b4e0ef87c0c/index.md similarity index 92% rename from files/pt-br/web/api/fetch_api/cross-global_fetch_usage/index.md rename to files/pt-br/conflicting/web/api/fetch_api/using_fetch_76a0f6f382ec36bfa1bf0b4e0ef87c0c/index.md index b9fd2ded544584..ab1dd4e4f425dd 100644 --- a/files/pt-br/web/api/fetch_api/cross-global_fetch_usage/index.md +++ b/files/pt-br/conflicting/web/api/fetch_api/using_fetch_76a0f6f382ec36bfa1bf0b4e0ef87c0c/index.md @@ -1,6 +1,7 @@ --- title: Uso de busca Cross-global -slug: Web/API/Fetch_API/Cross-global_fetch_usage +slug: conflicting/Web/API/Fetch_API/Using_Fetch_76a0f6f382ec36bfa1bf0b4e0ef87c0c +original_slug: Web/API/Fetch_API/Cross-global_fetch_usage --- Este artigo explica um "edge case" (um problema ou situação que ocorre apenas em um parâmetro operacional extremo) que ocorre ao utilizar fetch (e potencialmente outras APIs que exibem o mesmo tipo de comportamento de recuperação de recurso). Quando uma busca de cross-origin envolvendo uma URL relativa é iniciada a partir de um {{htmlelement ("iframe")}}, a URL relativa costumava ser resolvida na localização global atual, em vez da localização do iframe. diff --git a/files/pt-br/web/api/event/comparison_of_event_targets/index.md b/files/pt-br/learn/javascript/building_blocks/event_bubbling/index.md similarity index 98% rename from files/pt-br/web/api/event/comparison_of_event_targets/index.md rename to files/pt-br/learn/javascript/building_blocks/event_bubbling/index.md index d3da61a431f0a4..e9fa9d3aa93881 100644 --- a/files/pt-br/web/api/event/comparison_of_event_targets/index.md +++ b/files/pt-br/learn/javascript/building_blocks/event_bubbling/index.md @@ -1,6 +1,7 @@ --- title: Comparativo entre Event Targets -slug: Web/API/Event/Comparison_of_Event_Targets +slug: Learn/JavaScript/Building_blocks/Event_bubbling +original_slug: Web/API/Event/Comparison_of_Event_Targets --- {{ ApiRef() }} diff --git a/files/pt-br/learn/server-side/express_nodejs/development_environment/index.md b/files/pt-br/learn/server-side/express_nodejs/development_environment/index.md index 3ff33878a9ef96..4bee0ed724dc8e 100644 --- a/files/pt-br/learn/server-side/express_nodejs/development_environment/index.md +++ b/files/pt-br/learn/server-side/express_nodejs/development_environment/index.md @@ -237,13 +237,13 @@ Os passos seguintes mostram como baixar pacotes via NPM, salvá-los nas dependê ### Desenvolvendo dependências -Se você utilizar uma dependência apenas durante o desenvolvimento da aplicação, é recomendado que você a salve como uma "development dependency". Dessa forma, o pacote não será utilizado no ambiente de produção. Por exemplo: caso utilizar o pacote [esling](http://eslint.org/) (JavaScript Linting), você faria a instalação via NPM da seguinte forma. +Se você utilizar uma dependência apenas durante o desenvolvimento da aplicação, é recomendado que você a salve como uma "development dependency". Dessa forma, o pacote não será utilizado no ambiente de produção. Por exemplo: caso utilizar o pacote [eslint](http://eslint.org/) (JavaScript Linting), você faria a instalação via NPM da seguinte forma. ```bash npm install eslint --save-dev ``` -Assim, a esling vai aparecer da seguinte forma na lista de dependências do **package.json**. +Assim, a eslint vai aparecer da seguinte forma na lista de dependências do **package.json**. ```json "devDependencies": { @@ -259,7 +259,7 @@ Além de definir e buscar dependências, você também pode nomear scripts dentr > **Nota:** Ferramentas de automação de tarefas como o [Gulp](http://gulpjs.com/) e o [Grunt](http://gruntjs.com/) também podem ser utilizados, além de outros pacotes externos. -Para definir o script que roda o _esling_, citado na seção acima, nós precisamos adicionar o seguinte bloco no nosso **package.json** (importante: sua aplicação precisa ter como source está na pasta /src/js): +Para definir o script que roda o _eslint_, citado na seção acima, nós precisamos adicionar o seguinte bloco no nosso **package.json** (importante: sua aplicação precisa ter como source está na pasta /src/js): ```json "scripts": { diff --git a/files/pt-br/web/css/-webkit-overflow-scrolling/index.md b/files/pt-br/orphaned/web/css/-webkit-overflow-scrolling/index.md similarity index 93% rename from files/pt-br/web/css/-webkit-overflow-scrolling/index.md rename to files/pt-br/orphaned/web/css/-webkit-overflow-scrolling/index.md index 66418f2f2711ee..4ff3704aae4ce4 100644 --- a/files/pt-br/web/css/-webkit-overflow-scrolling/index.md +++ b/files/pt-br/orphaned/web/css/-webkit-overflow-scrolling/index.md @@ -1,6 +1,7 @@ --- title: "-webkit-overflow-scrolling" -slug: Web/CSS/-webkit-overflow-scrolling +slug: orphaned/Web/CSS/-webkit-overflow-scrolling +original_slug: Web/CSS/-webkit-overflow-scrolling --- {{CSSRef}}{{Non-standard_header}} diff --git a/files/ru/_redirects.txt b/files/ru/_redirects.txt index 955b332b22b3a4..edb1130806ac9e 100644 --- a/files/ru/_redirects.txt +++ b/files/ru/_redirects.txt @@ -395,7 +395,9 @@ /ru/docs/Web/API/Element/accessKey /ru/docs/Web/API/HTMLElement/accessKey /ru/docs/Web/API/Element/createShadowRoot /ru/docs/Web/API/Element/shadowRoot /ru/docs/Web/API/Element/error_event /ru/docs/Web/API/HTMLElement/error_event +/ru/docs/Web/API/Event/Comparison_of_Event_Targets /ru/docs/Learn/JavaScript/Building_blocks/Event_bubbling /ru/docs/Web/API/EventTarget.addEventListener /ru/docs/Web/API/EventTarget/addEventListener +/ru/docs/Web/API/Fetch_API/Cross-global_fetch_usage /ru/docs/conflicting/Web/API/Fetch_API/Using_Fetch /ru/docs/Web/API/File/Using_files_from_web_applications /ru/docs/Web/API/File_API/Using_files_from_web_applications /ru/docs/Web/API/FileReader/onabort /ru/docs/Web/API/FileReader/abort_event /ru/docs/Web/API/File_and_Directory_Entries_API/Введение /ru/docs/Web/API/File_and_Directory_Entries_API/Introduction @@ -859,6 +861,7 @@ /ru/docs/Web/SVG/Элемент/rect /ru/docs/Web/SVG/Element/rect /ru/docs/Web/SVG/Элемент/svg /ru/docs/Web/SVG/Element/svg /ru/docs/Web/SVG/Элемент/use /ru/docs/Web/SVG/Element/use +/ru/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion /ru/docs/Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion /ru/docs/Web/WebGL /ru/docs/Web/API/WebGL_API /ru/docs/Web/WebGL/Adding_2D_content_to_a_WebGL_context /ru/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context /ru/docs/Web/WebGL/Animating_objects_with_WebGL /ru/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL diff --git a/files/ru/_wikihistory.json b/files/ru/_wikihistory.json index ca90b24750f2ca..2cab33d2522ae9 100644 --- a/files/ru/_wikihistory.json +++ b/files/ru/_wikihistory.json @@ -2252,6 +2252,10 @@ "modified": "2020-07-16T22:31:31.342Z", "contributors": ["chergav", "ConstantineZz", "slychai85"] }, + "Learn/JavaScript/Building_blocks/Event_bubbling": { + "modified": "2019-03-18T21:46:09.700Z", + "contributors": ["ademaro"] + }, "Learn/JavaScript/Building_blocks/Events": { "modified": "2020-08-14T06:15:51.092Z", "contributors": [ @@ -4954,10 +4958,6 @@ "modified": "2019-08-14T12:21:25.951Z", "contributors": ["pk.prog", "emil4", "Sasha4ever"] }, - "Web/API/Event/Comparison_of_Event_Targets": { - "modified": "2019-03-18T21:46:09.700Z", - "contributors": ["ademaro"] - }, "Web/API/Event/Event": { "modified": "2020-10-15T21:57:32.652Z", "contributors": ["zardo96", "fscholz", "Lazy_Den", "ilyacuc"] @@ -5153,10 +5153,6 @@ "savelevcorr" ] }, - "Web/API/Fetch_API/Cross-global_fetch_usage": { - "modified": "2019-03-18T21:00:16.677Z", - "contributors": ["Akh-rman", "qqwweeaassdd"] - }, "Web/API/Fetch_API/Using_Fetch": { "modified": "2020-03-12T12:40:18.070Z", "contributors": [ @@ -15853,6 +15849,10 @@ "Sheppy" ] }, + "Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion": { + "modified": "2019-12-18T06:44:21.121Z", + "contributors": ["KolesnikovR"] + }, "Web/Security/Same-origin_policy": { "modified": "2020-10-20T11:28:42.439Z", "contributors": [ @@ -15864,10 +15864,6 @@ "ZVanoZ" ] }, - "Web/Security/Securing_your_site/Turning_off_form_autocompletion": { - "modified": "2019-12-18T06:44:21.121Z", - "contributors": ["KolesnikovR"] - }, "Web/Tutorials": { "modified": "2019-10-02T16:11:49.043Z", "contributors": [ @@ -15966,6 +15962,10 @@ "modified": "2019-03-18T21:32:57.580Z", "contributors": ["Skinny-Hunter"] }, + "conflicting/Web/API/Fetch_API/Using_Fetch": { + "modified": "2019-03-18T21:00:16.677Z", + "contributors": ["Akh-rman", "qqwweeaassdd"] + }, "conflicting/Web/HTML/Element/img": { "modified": "2019-03-18T20:41:47.756Z", "contributors": ["Dozorengel", "KishiTako"] diff --git a/files/ru/web/api/fetch_api/cross-global_fetch_usage/index.md b/files/ru/conflicting/web/api/fetch_api/using_fetch/index.md similarity index 96% rename from files/ru/web/api/fetch_api/cross-global_fetch_usage/index.md rename to files/ru/conflicting/web/api/fetch_api/using_fetch/index.md index b1bf93d1108480..ada39c9256e2ee 100644 --- a/files/ru/web/api/fetch_api/cross-global_fetch_usage/index.md +++ b/files/ru/conflicting/web/api/fetch_api/using_fetch/index.md @@ -1,6 +1,7 @@ --- title: Cross-global fetch usage -slug: Web/API/Fetch_API/Cross-global_fetch_usage +slug: conflicting/Web/API/Fetch_API/Using_Fetch +original_slug: Web/API/Fetch_API/Cross-global_fetch_usage --- {{DefaultAPISidebar("Fetch API")}} diff --git a/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.md b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.md index 440c751f8db1c0..4c2ed253226d80 100644 --- a/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.md +++ b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.md @@ -7,13 +7,22 @@ slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals Одна из основных задач HTML — придавать тексту структуру и смысл, {{glossary("семантику")}}, так, чтобы браузер смог отобразить текст корректно. Эта статья покажет, как можно использовать {{glossary("HTML")}}, чтобы упорядочить текст на странице путём добавления заголовков и абзацев, выделения слов, создания списков и многое другое. -| Предварительные требования: | Базовое знакомство с HTML , описанное в [Начало работы с HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B). | -| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Задача: | Изучить базовые способы разметки текста путём добавлением на страницу структуры и значения — создать абзацы, заголовки, списки, акценты и цитаты.. | + + + + + + + + + + + +
Необходимые знания:Базовое знакомство с HTML , описанное в Начало работы с HTML.
Цель:Узнать, как разметить базовую страницу текста, чтобы придать ей смысл и структуру, включая абзацы, заголовки, списки, выделение и цитаты.
## Основы: Заголовки и абзацы / параграфы -Большинство структурированных текстов состоят из параграфов и заголовков, независимо от того, читаете ли вы рассказ, или газету, или учебник, журнал и т.д. +Большинство структурированных текстов состоят из параграфов и заголовков, независимо от того, читаете ли вы рассказ, газету, учебник или журнал. ![An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.](newspaper_small.jpg) diff --git a/files/ru/web/api/event/comparison_of_event_targets/index.md b/files/ru/learn/javascript/building_blocks/event_bubbling/index.md similarity index 98% rename from files/ru/web/api/event/comparison_of_event_targets/index.md rename to files/ru/learn/javascript/building_blocks/event_bubbling/index.md index a277383ce811d6..9c386ffe105db3 100644 --- a/files/ru/web/api/event/comparison_of_event_targets/index.md +++ b/files/ru/learn/javascript/building_blocks/event_bubbling/index.md @@ -1,6 +1,7 @@ --- title: Сравнение разных Event Targets -slug: Web/API/Event/Comparison_of_Event_Targets +slug: Learn/JavaScript/Building_blocks/Event_bubbling +original_slug: Web/API/Event/Comparison_of_Event_Targets --- {{ ApiRef() }} diff --git a/files/ru/mdn/community/contributing/translated_content/index.md b/files/ru/mdn/community/contributing/translated_content/index.md index e0f31283b26938..8ea4aa7f6bc731 100644 --- a/files/ru/mdn/community/contributing/translated_content/index.md +++ b/files/ru/mdn/community/contributing/translated_content/index.md @@ -24,7 +24,7 @@ slug: MDN/Community/Contributing/Translated_content ### Испанский (`es`) -- Обсуждения: [Matrix (`#mdn-l10n-es`)](https://chat.mozilla.org/#/room/#mdn-l10n-es:mozilla.org), [Telegram (`MDN l10n ES`)](https://t.me/+Dr6qKQCAepw4MjFj) +- Обсуждения: [Matrix (`#mdn-l10n-es`)](https://chat.mozilla.org/#/room/#mdn-l10n-es:mozilla.org), [Telegram (`MDN l10n ES`)](https://t.me/+Dr6qKQCAepw4MjFj), [Discord (`#spanish`)](/discord) - Активные участники: [JuanVqz](https://github.com/JuanVqz), [davbrito](https://github.com/davbrito), [Graywolf9](https://github.com/Graywolf9), [Vallejoanderson](https://github.com/Vallejoanderson), [marcelozarate](https://github.com/marcelozarate), [Jalkhov](https://github.com/Jalkhov) ### Китайский (`zh-CN`, `zh-TW`) diff --git a/files/ru/web/api/web_workers_api/using_web_workers/index.md b/files/ru/web/api/web_workers_api/using_web_workers/index.md index 4819a985117c4f..6a0f5668933acc 100644 --- a/files/ru/web/api/web_workers_api/using_web_workers/index.md +++ b/files/ru/web/api/web_workers_api/using_web_workers/index.md @@ -801,13 +801,9 @@ Worker устанавливает свойство `onmessage` для функц {{Specifications}} -## Совместимость с браузерами - -{{Compat}} - ## Смотрите также -- [`Worker`](/ru/docs/Web/API/Worker) интерфейс -- [`SharedWorker`](/ru/docs/Web/API/SharedWorker) интерфейс -- [Функции доступные для worker-ов](/ru/docs/Web/API/Worker/Functions_and_classes_available_to_workers) -- [Продвинутые концепции и примеры](/ru/docs/Web/API/Web_Workers_API/Using_web_workers) +- Интерфейс [`Worker`](/ru/docs/Web/API/Worker) +- Интерфейс [`SharedWorker`](/ru/docs/Web/API/SharedWorker) +- [Доступные для воркеров функции](/ru/docs/Web/API/Worker/Functions_and_classes_available_to_workers) +- Интерфейс [`OffscreenCanvas`](/ru/docs/Web/API/OffscreenCanvas) diff --git a/files/ru/web/css/z-index/index.md b/files/ru/web/css/z-index/index.md index 3e648af7ad96f3..99b7b52e08fdf0 100644 --- a/files/ru/web/css/z-index/index.md +++ b/files/ru/web/css/z-index/index.md @@ -102,7 +102,7 @@ z-index: unset; #### Результат -{{ EmbedLiveSample('Visually_layering_elements', '550', '200', '') }} +{{ EmbedLiveSample('Визуальное наложение элементов', '550', '200', '') }} ## Спецификации diff --git a/files/ru/web/javascript/reference/global_objects/string/indexof/index.md b/files/ru/web/javascript/reference/global_objects/string/indexof/index.md index b6a8bd6cd3fd99..3454c9679e4b7f 100644 --- a/files/ru/web/javascript/reference/global_objects/string/indexof/index.md +++ b/files/ru/web/javascript/reference/global_objects/string/indexof/index.md @@ -9,10 +9,13 @@ slug: Web/JavaScript/Reference/Global_Objects/String/indexOf Метод **`indexOf()`** возвращает индекс первого вхождения указанного значения в строковый объект {{jsxref("Global_Objects/String", "String")}}, на котором он был вызван, начиная с индекса `fromIndex`. Возвращает -1, если значение не найдено. +{{EmbedInteractiveExample("pages/js/string-indexof.html", "taller")}} + ## Синтаксис -``` -str.indexOf(searchValue, [fromIndex]) +```js-nolint +indexOf(searchString) +indexOf(searchString, position) ``` ### Параметры diff --git a/files/ru/web/javascript/reference/operators/in/index.md b/files/ru/web/javascript/reference/operators/in/index.md index fe029342b09646..141a6e37048491 100644 --- a/files/ru/web/javascript/reference/operators/in/index.md +++ b/files/ru/web/javascript/reference/operators/in/index.md @@ -1,97 +1,276 @@ --- -title: in operator +title: in slug: Web/JavaScript/Reference/Operators/in +l10n: + sourceCommit: 13b2fe46243beed6dc29f5d3defa716abe79c1f9 --- {{jsSidebar("Operators")}} -**Оператор `in`** возвращает `true`, если свойство содержится в указанном объекте или в его цепочке прототипов. +Оператор `in` возвращает `true`, если свойство содержится в указанном объекте или в его цепочке прототипов. + +Оператор `in` не может быть использован для поиска значений в других видах коллекций. Чтобы проверить, существует ли определённое значение в массиве, можно использовать {{jsxref("Array.prototype.includes()")}}. А у наборов есть метод {{jsxref("Set.prototype.has()")}}. + +{{EmbedInteractiveExample("pages/js/expressions-inoperator.html")}} ## Синтаксис -``` +```js-nolint prop in object +#prop in object ``` ### Параметры - `prop` - - : Строка или symbol, представляющий название свойства или индекс массива (non-symbols будут конвертированы в строки). - + - : Строковое или символьное значение, представляющее название свойства (несимвольные значения будут [преобразованы в строки](/ru/docs/Web/JavaScript/Reference/Global_Objects/String#приведение_к_строке)). Также может быть [именем приватного свойства](/ru/docs/Web/JavaScript/Reference/Classes/Private_properties). - `object` - - : Объект, в котором нужно проверить содержание свойства с заданным именем. + - : Объект, для которого будет производится проверка, содержит ли он (или его цепочка прототипов) свойство с указанным именем (`prop`). + +### Исключения + +- {{jsxref("TypeError")}}: + - : Возникает, если `object` не является объектом (например, является примитивом). ## Описание +Оператор `in` проверяет, существует ли указанное свойство в объекте или его цепочке прототипов. Для проверки наличия только собственных свойств следует использовать {{jsxref("Object.hasOwn()")}}. + +Свойство может существовать в объекте, но иметь значение `undefined`. Поэтому `x in obj` не то же самое, что `obj.x !== undefined`. Для того, чтобы оператор `in` возвращал значение `false`, используйте оператор [`delete`](/ru/docs/Web/JavaScript/Reference/Operators/delete) вместо присваивания свойству значения `undefined`. + +Также можно использовать оператор `in`, чтобы проверить, существует ли в объекте [приватное поле класса или метод](/ru/docs/Web/JavaScript/Reference/Classes/Private_properties). Оператор `in` возвращает `true`, если свойство определено и `false` в противном случае. Такая проверка называется _бренд-чек_, потому что `in` возвращает `true` только в том случае, когда объект был создан с помощью конструктора класса и имеет доступ к приватным свойствам. + +В этом случае используется особый синтаксис: левая сторона оператора `in` является идентификатором свойства, а не выражением, но без кавычек (иначе это будет свойством с типом строка, а не приватным свойством). + +Поскольку обращение к приватным свойствам объекта не связанного с текущим классом приводит к появлению {{jsxref("TypeError")}} вместо возвращения `undefined`, то оператор `in` позволяет сократить запись такой проверки: + +```js +class C { + #x; + static isC(obj) { + try { + obj.#x; + return true; + } catch { + return false; + } + } +} +``` + +До более короткой: + +```js +class C { + #x; + static isC(obj) { + return #x in obj; + } +} +``` + +Оператор `in` также позволяет избежать необходимости обрабатывать ошибки доступа к несуществующим приватным свойствам. + +Однако, оператор `in` по-прежнему требует предварительно объявлять приватные свойства заранее в окружающем классе, иначе будет выброшена ошибка {{jsxref("SyntaxError")}} ("Private field '#x' must be declared in an enclosing class") такая же, как и когда вы пытаетесь получить доступ к необъявленному приватному свойству. + +```js-nolint example-bad +class C { + foo() { + #x in this; + } +} + +new C().foo(); // SyntaxError: Private field '#x' must be declared in an enclosing class +``` + +## Примеры + +### Обычное использование + В примере ниже показаны некоторые способы использования оператора `in`. ```js // Массивы -var trees = new Array("redwood", "bay", "cedar", "oak", "maple"); +const trees = ["redwood", "bay", "cedar", "oak", "maple"]; 0 in trees; // true 3 in trees; // true 6 in trees; // false -"bay" in trees; // false (вы должны указать индекс элемента в массиве, а не значение в этом индексе) +"bay" in trees; // false (необходимо указать индекс элемента в массиве, а не значение) "length" in trees; // true (length является свойством Array) +Symbol.iterator in trees; // true // Уже существующие объекты "PI" in Math; // true // Пользовательские объекты -var mycar = { make: "Honda", model: "Accord", year: 1998 }; +const mycar = { make: "Honda", model: "Accord", year: 1998 }; "make" in mycar; // true "model" in mycar; // true ``` -Вы должны указать объект справа от оператора `in`. Например, вы можете указать строку, созданную через конструктор объекта `String`, но вы не можете указать строковый литерал. +Необходимо указать объект справа от оператора `in`. Например, можно указать строку, созданную с помощью конструктора `String`, но нельзя использовать строковый литерал. ```js -var color1 = new String("green"); -"length" in color1; // returns true +const color1 = new String("green"); +"length" in color1; // true -var color2 = "coral"; -// сгенерирует ошибку (color2 is not a String object) +const color2 = "coral"; +// сгенерирует ошибку (color2 не является объектом String) "length" in color2; ``` ### Использование оператора `in` с неопределёнными или с уже удалёнными свойствами -Если вы удалили свойство при помощи оператора [`delete`](/ru/docs/Web/JavaScript/Reference/Operators/delete), то оператор `in` возвратит `false` для этого свойства. +Если удалить свойство при помощи оператора [`delete`](/ru/docs/Web/JavaScript/Reference/Operators/delete), то оператор `in` возвратит `false` для этого свойства. ```js -var mycar = { make: "Honda", model: "Accord", year: 1998 }; +const mycar = { make: "Honda", model: "Accord", year: 1998 }; delete mycar.make; "make" in mycar; // false -var trees = new Array("redwood", "bay", "cedar", "oak", "maple"); +const trees = ["redwood", "bay", "cedar", "oak", "maple"]; delete trees[3]; 3 in trees; // false ``` -Если вы зададите свойству значение {{jsxref("Global_Objects/undefined", "undefined")}}, но не удалите его, то для этого свойства оператор `in` вернёт значение `true`. +Если задать свойству значение {{jsxref("undefined")}}, а не удалять его, то для этого свойства оператор `in` вернёт значение `true`. ```js -var mycar = { make: "Honda", model: "Accord", year: 1998 }; +const mycar = { make: "Honda", model: "Accord", year: 1998 }; mycar.make = undefined; "make" in mycar; // true ``` ```js -var trees = new Array("redwood", "bay", "cedar", "oak", "maple"); +const trees = ["redwood", "bay", "cedar", "oak", "maple"]; trees[3] = undefined; -3 in trees; // returns true +3 in trees; // true +``` + +Оператор `in` вернёт `false` для [пустых слотов в массиве](/ru/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays), несмотря на то, что прямой доступ к свойству вернёт `undefined`. + +```js +const empties = new Array(3); +empties[2]; // undefined +2 in empties; // false +``` + +Чтобы избежать подобного, следует заполнять новый массив непустыми значениями и не записывать значения по индексам, превышающим длину массива. + +```js +const empties = new Array(3).fill(undefined); +2 in empties; // true ``` ### Наследуемые свойства -Оператор `in` возвратит `true` для свойств, которые унаследованы по цепочке прототипов. (Если вы хотите проверить только не наследованные свойства, используйте {{jsxref("Object.prototype.hasOwnProperty()")}}.) +Оператор `in` возвратит `true` для свойств, которые унаследованы по цепочке прототипов. Это может быть нежелательно при использовании объектов для хранения произвольных пар ключ-значение. + +```js example-bad +const ages = { alice: 18, bob: 27 }; + +function hasPerson(name) { + return name in ages; +} + +hasPerson("hasOwnProperty"); // true +``` + +Можно использовать {{jsxref("Object.hasOwn()")}}, чтобы проверить, существует ли в объекте данный ключ. + +```js +const ages = { alice: 18, bob: 27 }; + +function hasPerson(name) { + return Object.hasOwn(ages, name); +} + +hasPerson("hasOwnProperty"); // false +``` + +Также можно использовать [объект с прототипом null](/ru/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects) или {{jsxref("Map")}}, чтобы избежать других ошибок. + +```js example-good +const ages = new Map([ + ["alice", 18], + ["bob", 27], +]); + +function hasPerson(name) { + return ages.has(name); +} + +hasPerson("hasOwnProperty"); // false +``` + +### Использование оператора `in` для реализации _бренд-чека_ + +Фрагмент кода ниже демонстрирует статическую функцию, которая проверяет, был ли объект создан конструктором класса `Person`, и следовательно безопасно ли использовать методы этого класса. ```js -"toString" in {}; // true +class Person { + #age; + constructor(age) { + this.#age = age; + } + static isPerson(o) { + return #age in o; + } + ageDifference(other) { + return this.#age - other.#age; + } +} + +const p1 = new Person(20); +const p2 = new Person(30); +console.log(p1.ageDifference(p2)); // -10 +console.log(Person.isPerson(p1)); // true + +if (Person.isPerson(p1) && Person.isPerson(p2)) { + console.log(p1.ageDifference(p2)); // -10 +} ``` +Это помогает предотвратить следующую ошибку: + +```js +const p2 = {}; + +p1.ageDifference(p2); // TypeError: Cannot read private member #age from an object whose class did not declare it +``` + +Без оператора `in` пришлось бы использовать блок `try...catch`, чтобы проверить, есть ли в объекте приватное свойство. + +Также это можно реализовать с помощью метода класса [`@@hasInstance`](/ru/docs/Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance), и в дальнейшем использовать оператор [`instanceof`](/ru/docs/Web/JavaScript/Reference/Operators/instanceof) для выполнения такой же проверки (которая по умолчанию проверяет только наличие `Person.prototype` в цепочке прототипов объекта). + +```js +class Person { + #age; + constructor(age) { + this.#age = age; + } + static [Symbol.hasInstance](o) { + // Проверяем `this` для предотвращения ложно-положительных + // результатов при вызове `instanceof SubclassOfPerson` + return this === Person && #age in o; + } + ageDifference(other) { + return this.#age - other.#age; + } +} + +const p1 = new Person(20); +const p2 = new Person(30); + +if (p1 instanceof Person && p2 instanceof Person) { + console.log(p1.ageDifference(p2)); // -10 +} +``` + +Дополнительные примеры есть в разделе «[Приватные свойства](/ru/docs/Web/JavaScript/Reference/Classes/Private_properties)» и в [руководстве по классам](/ru/docs/Web/JavaScript/Guide/Using_classes#private_fields). + ## Спецификации {{Specifications}} @@ -102,7 +281,8 @@ trees[3] = undefined; ## Смотрите также +- [`for...in`](/ru/docs/Web/JavaScript/Reference/Statements/for...in) - [`delete`](/ru/docs/Web/JavaScript/Reference/Operators/delete) -- {{jsxref("Object.prototype.hasOwnProperty()")}} +- {{jsxref("Object.hasOwn()")}} - {{jsxref("Reflect.has()")}} -- [Enumerability and ownership of properties](/ru/docs/Enumerability_and_ownership_of_properties) +- [Перечисляемость и владение свойствами](/ru/docs/Web/JavaScript/Enumerability_and_ownership_of_properties) diff --git a/files/ru/web/security/securing_your_site/turning_off_form_autocompletion/index.md b/files/ru/web/security/practical_implementation_guides/turning_off_form_autocompletion/index.md similarity index 98% rename from files/ru/web/security/securing_your_site/turning_off_form_autocompletion/index.md rename to files/ru/web/security/practical_implementation_guides/turning_off_form_autocompletion/index.md index 428748b4890f81..a4be30039ecffc 100644 --- a/files/ru/web/security/securing_your_site/turning_off_form_autocompletion/index.md +++ b/files/ru/web/security/practical_implementation_guides/turning_off_form_autocompletion/index.md @@ -1,6 +1,6 @@ --- title: How to turn off form autocompletion -slug: Web/Security/Securing_your_site/Turning_off_form_autocompletion +slug: Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion --- В этой статье объясняется как можно отключить автозаполнение полей на сайте. diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index 4b68b975eb16f1..10880690a5d6aa 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -521,13 +521,15 @@ /zh-CN/docs/Glossary/Descriptor_(CSS) /zh-CN/docs/Glossary/CSS_Descriptor /zh-CN/docs/Glossary/Empty_element /zh-CN/docs/Glossary/Void_element /zh-CN/docs/Glossary/Grid_Rows /zh-CN/docs/Glossary/Grid_Row +/zh-CN/docs/Glossary/Guard /zh-CN/docs/Web/API/Fetch_API/Using_Fetch /zh-CN/docs/Glossary/Header /zh-CN/docs/Glossary/HTTP_header /zh-CN/docs/Glossary/I18N /zh-CN/docs/Glossary/Internationalization /zh-CN/docs/Glossary/IP地址 /zh-CN/docs/Glossary/IP_Address +/zh-CN/docs/Glossary/Rendering_engine /zh-CN/docs/Glossary/Engine/Rendering +/zh-CN/docs/Glossary/Second-level_Domain /zh-CN/docs/Glossary/SLD /zh-CN/docs/Glossary/Serialize /zh-CN/docs/Glossary/Serialization /zh-CN/docs/Glossary/Simple_header /zh-CN/docs/Glossary/CORS-safelisted_request_header /zh-CN/docs/Glossary/Simple_response_header /zh-CN/docs/Glossary/CORS-safelisted_response_header -/zh-CN/docs/Glossary/Symbol /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol /zh-CN/docs/Glossary/Transferable_objects /zh-CN/docs/Web/API/Web_Workers_API/Transferable_objects /zh-CN/docs/Glossary/XHR_(XMLHttpRequest) /zh-CN/docs/Glossary/XMLHttpRequest /zh-CN/docs/Glossary/主轴 /zh-CN/docs/Glossary/Main_Axis @@ -1468,6 +1470,7 @@ /zh-CN/docs/Web/API/Element/pointerlockchange_event /zh-CN/docs/Web/API/Document/pointerlockchange_event /zh-CN/docs/Web/API/Element/removeAttributre /zh-CN/docs/Web/API/Element/removeAttribute /zh-CN/docs/Web/API/Element/select_event /zh-CN/docs/Web/API/HTMLInputElement/select_event +/zh-CN/docs/Web/API/Event/Comparison_of_Event_Targets /zh-CN/docs/Learn/JavaScript/Building_blocks/Event_bubbling /zh-CN/docs/Web/API/Event/CustomEvent /zh-CN/docs/Web/API/CustomEvent /zh-CN/docs/Web/API/Event/pageY /zh-CN/docs/Web/API/MouseEvent/pageY /zh-CN/docs/Web/API/Event/禁用时间冒泡 /zh-CN/docs/Web/API/Event/cancelBubble @@ -1480,7 +1483,9 @@ /zh-CN/docs/Web/API/FetchController /zh-CN/docs/Web/API/AbortController /zh-CN/docs/Web/API/FetchController/AbortController /zh-CN/docs/Web/API/AbortController/AbortController /zh-CN/docs/Web/API/FetchController/abort /zh-CN/docs/Web/API/AbortController/abort -/zh-CN/docs/Web/API/Fetch_API/基本概念 /zh-CN/docs/Web/API/Fetch_API/Basic_concepts +/zh-CN/docs/Web/API/Fetch_API/Basic_concepts /zh-CN/docs/Web/API/Fetch_API/Using_Fetch +/zh-CN/docs/Web/API/Fetch_API/Cross-global_fetch_usage /zh-CN/docs/Web/API/Fetch_API/Using_Fetch +/zh-CN/docs/Web/API/Fetch_API/基本概念 /zh-CN/docs/Web/API/Fetch_API/Using_Fetch /zh-CN/docs/Web/API/File.fileName /zh-CN/docs/Web/API/File/name /zh-CN/docs/Web/API/File.fileSize /zh-CN/docs/Web/API/Blob/size /zh-CN/docs/Web/API/File.lastModifiedDate /zh-CN/docs/Web/API/File/lastModifiedDate diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index 16a3b4eff34f47..6ef710dc7aeca6 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -903,10 +903,6 @@ "modified": "2019-03-18T21:34:38.990Z", "contributors": ["yshenhua"] }, - "Glossary/Guard": { - "modified": "2019-03-18T20:37:40.179Z", - "contributors": ["aximario"] - }, "Glossary/Gutters": { "modified": "2020-06-14T12:16:58.334Z", "contributors": ["lmx-Hexagram", "yshenhua"] @@ -3561,6 +3557,10 @@ "ppphp" ] }, + "Learn/JavaScript/Building_blocks/Event_bubbling": { + "modified": "2019-03-18T21:17:15.255Z", + "contributors": ["zhuangyin"] + }, "Learn/JavaScript/Building_blocks/Events": { "modified": "2020-08-04T06:06:58.173Z", "contributors": [ @@ -9181,10 +9181,6 @@ "TigerSoldier" ] }, - "Web/API/Event/Comparison_of_Event_Targets": { - "modified": "2019-03-18T21:17:15.255Z", - "contributors": ["zhuangyin"] - }, "Web/API/Event/Event": { "modified": "2020-10-15T21:37:04.498Z", "contributors": [ @@ -9500,21 +9496,6 @@ "xcatliu" ] }, - "Web/API/Fetch_API/Basic_concepts": { - "modified": "2019-03-23T22:45:38.912Z", - "contributors": [ - "zhuangyin", - "jswisher", - "xgqfrms-GitHub", - "Jeff-Kook", - "xcatliu", - "ziyunfei" - ] - }, - "Web/API/Fetch_API/Cross-global_fetch_usage": { - "modified": "2019-03-18T21:35:40.335Z", - "contributors": ["DuckSoft", "wynejan"] - }, "Web/API/Fetch_API/Using_Fetch": { "modified": "2020-10-15T21:39:39.542Z", "contributors": [ @@ -16516,10 +16497,6 @@ "modified": "2020-10-15T22:24:06.241Z", "contributors": ["liuruiqi1993", "herotangabc", "litaoAurora"] }, - "Web/CSS/-webkit-overflow-scrolling": { - "modified": "2019-03-23T23:02:52.440Z", - "contributors": ["teoli", "Ende93", "FrontENG", "limichange", "ccforward"] - }, "Web/CSS/-webkit-tap-highlight-color": { "modified": "2019-03-23T22:22:56.346Z", "contributors": ["smilewalker"] @@ -31505,10 +31482,6 @@ "modified": "2019-03-23T22:46:21.766Z", "contributors": ["fanxiaojie"] }, - "Web/SVG/Attribute/enable-background": { - "modified": "2020-10-15T22:34:25.447Z", - "contributors": ["SphinxKnight", "SoMuchTo"] - }, "Web/SVG/Attribute/end": { "modified": "2019-03-23T22:46:42.288Z", "contributors": ["fanxiaojie"] diff --git a/files/zh-cn/games/introduction/index.md b/files/zh-cn/games/introduction/index.md index a85b1b2023b1a5..b71db0c4d2ec20 100644 --- a/files/zh-cn/games/introduction/index.md +++ b/files/zh-cn/games/introduction/index.md @@ -1,71 +1,128 @@ --- title: Web 游戏开发简介 slug: Games/Introduction +l10n: + sourceCommit: e72890bafe775a38620def9a74beda8cf9c47411 --- {{GamesSidebar}} -现代的 web 已经高速发展成为一个可行可靠的平台，它不仅能够用来创建高质量的酷炫游戏，同时也能够用来发布和传播这些游戏。 +现代 web 已经高速发展成为一个不仅能够用来创建高质量的酷炫游戏，同时也能够用来分发这些游戏的平台。 -采用现代网页技术和较新的浏览器，完全有可能做出令人印象深刻的顶级页面游戏。它能够制作的游戏种类可以和桌面端以及原生系统相当。我们这里所说的，并不是很久之前就采用 Flash® 制作出的简单卡牌游戏或者多人社交游戏。而是牛逼的 3D 动作射击游戏，RPG 游戏等等。得益于 [JavaScript](/zh-CN/docs/JavaScript) 实时编译技术性能的大幅提升，以及新开放的 API。在制作运行在浏览器（或者是基于类似 [Firefox OS](/zh-CN/docs/Mozilla/Firefox_OS) 的 [HTML5](/zh-CN/docs/HTML/HTML5)技术支持的设备）上的游戏时，我们不用妥协。 +它能够制作的游戏种类可以和桌面端以及原生系统相当。采用现代 web 技术和较新的浏览器，完全有可能做出令人印象深刻的顶级页面游戏。我们这里所说的，并不是很久之前就采用 Flash® 制作出的简单卡牌游戏或者多人社交游戏，而是 3D 动作射击游戏、RPG 游戏等等。得益于 [JavaScript](/zh-CN/docs/Web/JavaScript) 实时编译技术性能的大幅提升，以及新开放的 API。在制作运行在浏览器（或者是基于 [HTML5](/zh-CN/docs/Glossary/HTML5) 技术支持的设备）上的游戏时，我们不用妥协。 -## HTML5 游戏平台 +## HTML 游戏平台 -你可以真正地为你的游戏考虑下 Web 来作为更好的目标平台。我们总是喜欢说，"the Web is the platform." 让我们浏览下 Web 平台的核心部分： +你可以真正地为你的游戏考虑下 web 来作为更好的目标平台。我们总是喜欢说，“web 即平台。”让我们来浏览下 web 平台的核心部分： -| 功能 | 技术 | -| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **音频** | [Web Audio API](/zh-CN/docs/Web/API/Web_Audio_API) | -| **图形** | [WebGL](/zh-CN/docs/WebGL) ([OpenGL ES](http://www.khronos.org/opengles/) 2.0) | -| **输入** | [Touch events](/zh-CN/docs/DOM/Touch_events), [Gamepad API](/zh-CN/docs/Web/API/Gamepad_API/Using_the_Gamepad_API), 设备传感器，[WebRTC](/zh-CN/docs/WebRTC), [Full Screen API](/zh-CN/docs/Web/API/Fullscreen_API), [Pointer Lock API](/zh-CN/docs/API/Pointer_Lock_API) | -| **语言** | [JavaScript](/zh-CN/docs/JavaScript) (或是 C/C++ 使用 [Emscripten](https://github.com/kripken/emscripten/wiki) 来编译成 JavaScript) | -| **网络** | [WebRTC](/zh-CN/docs/WebRTC) 和/或 [WebSockets](/zh-CN/docs/Web/API/WebSockets_API) | -| **存储** | [IndexedDB](/zh-CN/docs/IndexedDB) 或是 "云 (存储)" | -| **Web** | [HTML](/zh-CN/docs/HTML), [CSS](/zh-CN/docs/CSS), [SVG](/zh-CN/docs/SVG), [Social API](/zh-CN/docs/Mozilla/Projects/Social_API) (还有其他很多很多东西！) | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
功能技术
音频Web Audio API
图形 + WebGL（OpenGL ES + 2.0） +
输入 + 触摸事件、Gamepad API、设备传感器、WebRTC、全屏 API、指针锁定 API +
语言 + JavaScript（或使用 + Emscripten 将 C/C++ 编译为 JavaScript） +
网络 + WebRTC 或 + WebSocket +
存储 + IndexedDB 或“云存储” +
web + HTML、CSS、SVG（以及更多！） +
## 商业案例 -作为一名游戏开发者，无论你是独立的个人还是大型游戏工作室，你想知道你的下一个游戏项目瞄准 Web 是有意义的。让我们看看 Web 是如何帮到你的。 +作为一名游戏开发者，无论你是独立的个人还是大型游戏工作室，你想知道你的下一个游戏项目瞄准 web 是有意义的。让我们看看 web 是如何帮到你的。 -1. Web 触手可及；它无处不在。如今可以看到，用 HTML5 构建的游戏运行在智能手机，平板，个人电脑和智能电视。 -2. 提高营销和曝光度。你不限于在某商店推广你的游戏。相反，你可以像其他媒体一样在 Web 宣传和推广你的游戏，利用网络的固有性和共享性接触新客户。 -3. 你可以掌握最重要的事项：支付。你不必交付超过收入的 30% 给他人，仅仅就因为你的游戏在他们的生态系统。相反，你可以管理任何你想要的和使用任何你喜欢的付款处理服务。 -4. 拥有更多控制权的是，只要你愿意，你可以随时更新游戏。不必着急等待审核通过，仅当其他公司的某某人决定你的关键 bug 修复是否会在今天或明天交付。 -5. 掌握你的数据分析！不必依靠别人作出所有决定，你需要什么分析，你可以收集自己的——或选择你最喜欢的第三方平台，来收集有关你的销售和游戏产生的信息。 -6. 你可以用你的方式更密切地管理你的客户关系。再也不用苦苦等待只能通过应用商店有限的机制来过滤客户的反馈。用你想要的方式与客户交流，没有中间人。 -7. 你的玩家可以随时随地玩你的游戏。因为 Web 是无处不在的，你的顾客可以在手机，平板，家庭手提，个人电脑或其他设备上关注游戏动态。 +1. web 触手可及；它无处不在。如今可以看到，用 HTML 构建的游戏运行在智能手机、平板、个人电脑和智能电视。 +2. 提高营销和曝光度。你不限于在某商店推广你的游戏。相反，你可以像其他媒体一样在 web 宣传和推广你的游戏，利用 web 的固有性和共享性接触新客户。 +3. 你可以掌握最重要的事项：支付。你不必将 30% 的收入交给其他人，仅仅就因为你的游戏在他们的生态系统。相反，你可以管理任何你想要的和使用任何你喜欢的付款处理服务。 +4. 拥有更多控制权，你可以随时更新游戏。不必着急等待审核通过，仅当其他公司的某人决定你的关键 bug 修复是否会在今天或明天交付。 +5. 掌握你的数据分析！不必依靠别人来决定你需要哪些分析，你可以自行收集数据（或选择你最喜欢的第三方平台），来获得有关你的销售和游戏产生的信息。 +6. 你可以用自己的方式更密切地管理你的客户关系。再也不用苦苦等待只能通过应用商店有限的机制来过滤客户的反馈。用你想要的方式与客户交流，没有中间人。 +7. 你的玩家可以随时随地玩你的游戏。因为 web 是无处不在的，你的顾客可以在手机、平板、家用笔记本电脑、工作电脑或其他设备上关注游戏动态。 -## 针对游戏开发者的 Web 技术 +## 针对游戏开发者的 web 技术 -技术同行们，让我们发掘出所有关于 Web 的 APIs，将它们呈现给所有的游戏开发者们。下面是一个比较完整的列表，可以一窥 Web 究竟能够做些什么： +技术同行们，让我们深入研究 web 为游戏开发者提供的 API。下面是一个比较完整的列表，可以一窥 web 究竟能够做些什么： -- [Full Screen API](/zh-CN/docs/Web/API/Fullscreen_API) - - : 这个简单的 API 能够让你的游戏占据整个屏幕，从而使玩家沉浸在动作中 +- [Fetch API](/zh-CN/docs/Web/API/Fetch_API) + - : 从 web 服务器发送和接收任何类型的数据，比如下载新的游戏关卡和艺术资源，或者传输非实时的游戏状态信息。 +- [全屏 API](/zh-CN/docs/Web/API/Fullscreen_API) + - : 这个简单的 API 能够让你的游戏占据整个屏幕，从而使玩家沉浸在动作中。 - [Gamepad API](/zh-CN/docs/Web/API/Gamepad_API/Using_the_Gamepad_API) - - : 如果你想你的用户能够使用游戏手柄或其他游戏控制器来控制游戏，你需要这个 API -- [HTML](/zh-CN/docs/HTML) and [CSS](/zh-CN/docs/CSS) - - : 二者合璧，可以构建，设计并对你的游戏界面布局，HTML 有一个提供 2D 图形的元素，即{{HTMLElement("canvas")}} -- [HTML audio](/zh-CN/docs/HTML/Element/audio) - - : {{HTMLElement("audio")}} 元素可以用来播放一些简单的音效和音乐。如果你想要更多的参与，可以学习[Web Audio API](/zh-CN/docs/Web/API/Web_Audio_API) 来深入了解音频处理的力量！ -- [IndexedDB](/zh-CN/docs/IndexedDB) - - : 一个强大的数据存储 API，用来在电脑或者设备上保存用户自己的数据。一个很好的方法用来保存游戏的状态和其他最近的信息，这样在需要的时候不用每次重新下载。也可以用来让你的游戏即使用户没有链接到网络也能继续玩（例如在飞机上的数小时）。 -- [JavaScript](/zh-CN/docs/JavaScript) - - : JavaScript 是网络上使用的编程语言，在现代浏览器中正在快速发展，而且一直在快速发展。使用它的力量为你的游戏编写代码，或者使用[Emscripten](https://github.com/kripken/emscripten/wiki)或[Asm.js](http://asmjs.org/spec/latest/)等技术轻松移植你现有的游戏。 -- [Pointer Lock API](/zh-CN/docs/API/Pointer_Lock_API) + - : 如果你想你的用户能够使用游戏手柄或其他游戏控制器来控制游戏，你需要这个 API。 +- [HTML](/zh-CN/docs/Web/HTML) 和 [CSS](/zh-CN/docs/Web/CSS) + - : 二者合璧，可以构建、设计并对你的游戏界面进行布局。HTML 有一个提供 2D 图形的元素，即 {{HTMLElement("canvas")}}。 +- [HTML audio](/zh-CN/docs/Web/HTML/Element/audio) + - : {{HTMLElement("audio")}} 元素可以用来播放一些简单的音效和音乐。如果你想要更多的参与，可以学习 [Web 音频 API](/zh-CN/docs/Web/API/Web_Audio_API) 来深入了解音频处理的力量！ +- [IndexedDB](/zh-CN/docs/Web/API/IndexedDB_API) + - : 一个强大的数据存储 API，用来在电脑或者设备上保存用户自己的数据。这是用来保存游戏的状态和其他最近的信息的好方法，这样在需要的时候不用每次重新下载。也可以用来让你的游戏在用户没有连接到网络的情况下也能继续玩（例如在飞机上的数小时）。 +- [JavaScript](/zh-CN/docs/Web/JavaScript) + - : JavaScript 是 web 所使用的编程语言，在现代浏览器中正在快速发展，而且一直在快速发展。使用它的力量为你的游戏编写代码，或者使用 [Emscripten](https://github.com/kripken/emscripten/wiki) 或 [Asm.js](http://asmjs.org/spec/latest/) 等技术轻松移植你现有的游戏。 +- [指针锁定 API](/zh-CN/docs/Web/API/Pointer_Lock_API) - : 指针锁定 API 允许你在游戏界面中锁定鼠标或其他指针设备，以便你不用绝对定位光标就可以获得坐标变化值，从而准确地判断用户正在做什么，并且还可以防止用户意外地进入另一块屏幕或别的什么地方，从而导致误操作。 -- [SVG](/zh-CN/docs/SVG) (可缩放矢量图形) +- [SVG](/zh-CN/docs/Web/SVG)（可缩放矢量图形） - : 无论用户显示器的大小或分辨率如何，都可以构建平滑缩放的矢量图形。 -- [Typed Arrays](/zh-CN/docs/JavaScript/Typed_arrays) - - : JavaScript 中的类型数组可以让你访问原始二进制数据；这使你可以操纵 GL 纹理，游戏数据或其他任何东西，即使它不是原生 JavaScript 数据格式。 -- [Web Audio API](/zh-CN/docs/Web/API/Web_Audio_API) - - : 这个 API 用于控制 JavaScript 代码中的音频的回放，合成和处理，使你可以创建出色的音效，以及实时播放和操作音乐。 -- [WebGL](/zh-CN/docs/WebGL) - - : 允许你从 Web 内容创建高性能，硬件加速的 3D（和 2D）图形。这是一个 Web 支持的[OpenGL ES](https://www.khronos.org/opengles/) 2.0 实现。 -- [WebRTC](/zh-CN/docs/WebRTC) - - : WebRTC（实时通信）API 使你能够控制音频和视频数据，包括远程会议以及两个用户之间来回传输其他应用程序数据。希望你的玩家能够在殴打怪物的同时互相交流？这是你的 API，快使用它吧。 -- [WebSockets](/zh-CN/docs/Web/API/WebSockets_API) - - : WebSocket API 使你可以将你的应用程序或站点连接到服务器，实时传输数据。构建完美的多人游戏动作，聊天服务等必备。 -- [Web Workers](/zh-CN/docs/DOM/Using_web_workers) - - : Workers API 能够让你生成运行 JavaScript 代码的后台线程，以充分利用现代的多核 CPU。 -- [XMLHttpRequest](/zh-CN/docs/DOM/XMLHttpRequest) 和 [File API](/zh-CN/docs/Web/API/File_and_Directory_Entries_API) - - : XMLHttpRequest 和 File API 的组合使你可以从 Web 服务器发送和接收任何类型的数据。比如下载新的游戏关卡，文件，以及传递非实时游戏状态信息等。 +- [类型化数组](/zh-CN/docs/Web/JavaScript/Guide/Typed_arrays) + - : JavaScript 中的类型化数组可以让你访问原始二进制数据；这使你可以操纵 GL 纹理、游戏数据或其他任何东西，即使它不是原生 JavaScript 数据格式。 +- [Web 音频 API](/zh-CN/docs/Web/API/Web_Audio_API) + - : 这个 API 用于控制 JavaScript 代码中的音频的播放、合成和处理，使你可以创建出色的音效，以及实时播放和操控音乐。 +- [WebGL](/zh-CN/docs/Web/API/WebGL_API) + - : 允许你从 Web 内容创建高性能、硬件加速的 3D（和 2D）图形。这是一个 web 支持的 [OpenGL ES](https://www.khronos.org/opengles/) 2.0 实现。 +- [WebRTC](/zh-CN/docs/Web/API/WebRTC_API) + - : WebRTC（实时通信）API 使你能够控制音频和视频数据，包括远程会议以及两个用户之间来回传输其他应用程序数据。希望你的玩家能够在殴打怪物的同时互相交流？这正是为你所准备的 API，快使用它吧。 +- [WebSocket](/zh-CN/docs/Web/API/WebSockets_API) + - : WebSocket API 使你可以将你的应用程序或站点连接到服务器，实时传输数据。非常适合多人游戏动作、聊天服务等。 +- [Web Worker](/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers) + - : Worker 能够让你生成运行 JavaScript 代码的后台线程，以充分利用现代的多核 CPU。 diff --git a/files/zh-cn/glossary/ecma/index.md b/files/zh-cn/glossary/ecma/index.md index 3542e2f07cfb5d..706921aaa9efbe 100644 --- a/files/zh-cn/glossary/ecma/index.md +++ b/files/zh-cn/glossary/ecma/index.md @@ -1,15 +1,17 @@ --- title: ECMA slug: Glossary/ECMA +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -**Ecma International**（正式名称是 _European Computer Manufacturers Association，欧洲计算机制造商协会_）是一个开发计算机硬件、通信和程序语言标准的非盈利组织。 +**Ecma 国际**（正式名称为*欧洲计算机制造商协会*）是一个开发计算机硬件、通信和程序设计语言标准的非盈利组织。 -在网络上该组织因维护 {{Glossary("JavaScript")}} 语言的核心规范 [the ECMA-262 specification](https://www.ecma-international.org/publications/standards/Ecma-262.htm)（即 {{Glossary("ECMAScript")}}）而为人所知。 +在 Web 上，该组织因维护 {{Glossary("JavaScript")}} 语言的核心规范 [ECMA-262 规范](https://www.ecma-international.org/publications/standards/Ecma-262.htm)（即 {{Glossary("ECMAScript")}}）而为人所知。 ## 参见 -- Wikipedia 页面 [Ecma International](https://zh.wikipedia.org/wiki/Ecma_International) -- [The Ecma International web site](https://www.ecma-international.org/) +- 维基百科上的 [Ecma 国际](https://zh.wikipedia.org/wiki/Ecma国际) +- [Ecma 国际的网站](https://www.ecma-international.org/) diff --git a/files/zh-cn/glossary/ecmascript/index.md b/files/zh-cn/glossary/ecmascript/index.md index 1f0b3edef3b860..b96be0213cd682 100644 --- a/files/zh-cn/glossary/ecmascript/index.md +++ b/files/zh-cn/glossary/ecmascript/index.md @@ -1,11 +1,13 @@ --- title: ECMAScript slug: Glossary/ECMAScript +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -**ECMAScript** 是 {{glossary("JavaScript")}} 所基于的脚本语言。[Ecma 国际组织](https://www.ecma-international.org) 负责将 ECMAScript 标准化。 +**ECMAScript** 是 {{glossary("JavaScript")}} 所基于的脚本语言规范。[Ecma 国际](https://www.ecma-international.org)负责将 ECMAScript 标准化。 ## 参见 diff --git a/files/zh-cn/glossary/element/index.md b/files/zh-cn/glossary/element/index.md index bf8e55b48d1d87..7f9f078ab80794 100644 --- a/files/zh-cn/glossary/element/index.md +++ b/files/zh-cn/glossary/element/index.md @@ -1,17 +1,20 @@ --- -title: Element（元素） +title: 元素 slug: Glossary/Element +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -**元素**是网页的一部分，在 {{glossary("XML")}} 和 {{glossary("HTML")}} 中，一个元素可以包含一个数据项，或是一块文本，或是一张照片，亦或是什么也不包含。一个典型的元素包括一个具有一些{{glossary("attribute", "属性")}}的开始标签，中间的文本内容和一个结束标签。 -![Example: in

Hello world!

, '

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

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

Hello world!

中，“

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

”是结束标签。](anatomy-of-an-html-element.png) -## 相关信息 +元素和{{glossary("tag", "标签")}}*不是*同一种概念。源代码中的标签用来标识元素的开始或结束，而元素是文档对象模型（{{Glossary("DOM")}}）——一个会在{{glossary("browser", "浏览器")}}中显示为页面——的一部分。 + +## 参见 - [开始学习 HTML](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started) -- [自定义元素（Custom element）](/zh-CN/docs/Web/API/Web_components/Using_custom_elements) +- [自定义元素](/zh-CN/docs/Web/API/Web_components/Using_custom_elements) - {{domxref("Element")}} 接口，在 DOM 中表示一个元素 diff --git a/files/zh-cn/glossary/engine/rendering/index.md b/files/zh-cn/glossary/engine/rendering/index.md new file mode 100644 index 00000000000000..58c69f65082642 --- /dev/null +++ b/files/zh-cn/glossary/engine/rendering/index.md @@ -0,0 +1,24 @@ +--- +title: 渲染引擎 +slug: Glossary/Engine/Rendering +l10n: + sourceCommit: b49ed0d28c2cfb0f39be603a62d37bcc1ec407dc +--- + +{{GlossarySidebar}} + +**渲染引擎**（也被称作排版引擎或浏览器引擎）是 {{glossary("Browser", "Web 浏览器")}}用于将网页的 {{glossary("HTML")}}、{{glossary("CSS")}} 和其他资源转换为屏幕上的视觉表示的组件。 + +常见的渲染引擎包括： + +- {{glossary("Blink")}} +- {{glossary("Gecko")}} +- {{glossary("WebKit")}} +- {{glossary("Trident")}} + +## 参见 + +- 维基百科上的 [Web 浏览器引擎](https://zh.wikipedia.org/wiki/浏览器引擎) +- 术语 + - {{Glossary("Engine", "引擎")}} + - {{Glossary("Browser", "Web 浏览器")}} diff --git a/files/zh-cn/glossary/fingerprinting/index.md b/files/zh-cn/glossary/fingerprinting/index.md new file mode 100644 index 00000000000000..4fb36e6f27cf84 --- /dev/null +++ b/files/zh-cn/glossary/fingerprinting/index.md @@ -0,0 +1,26 @@ +--- +title: 指纹识别 +slug: Glossary/Fingerprinting +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**指纹识别**是一种通过收集和组合浏览器和底层操作系统的不同特征来识别特定浏览器（进而识别特定用户）的网站实践。指纹的元素可能包括，例如： + +- 浏览器版本 +- 时区和首选语言 +- 系统上可用的视频或音频编解码器 +- 系统上安装的字体 +- 浏览器设置的状态 +- 计算机的显示尺寸和分辨率 + +网站可以通过在设备上执行 JavaScript 和 CSS 来检索这些信息，并通过组合这些数据，通常可以为浏览器创建一个唯一的指纹，然后可以用于跨网站跟踪用户。 + +Web 标准的设计旨在尽量减少网站收集识别信息的能力，浏览器通常也会添加自己的保护措施。 + +## 参见 + +- [覆盖你的所有浏览痕迹](https://coveryourtracks.eff.org)：一个展示网站可以用来指纹识别你浏览器数据的工具。 +- [缓和浏览器指纹识别的 Web 规范](https://www.w3.org/TR/fingerprinting-guidance/)：为规范作者提供的防止指纹识别的最佳实践。 diff --git a/files/zh-cn/glossary/firefox_os/index.md b/files/zh-cn/glossary/firefox_os/index.md new file mode 100644 index 00000000000000..2c9e0d9321c590 --- /dev/null +++ b/files/zh-cn/glossary/firefox_os/index.md @@ -0,0 +1,12 @@ +--- +title: Firefox OS +slug: Glossary/Firefox_OS +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +Firefox OS 是一个已停止开发的开源移动操作系统，由 Mozilla 开发。详情请参见 [Firefox OS](https://zh.wikipedia.org/wiki/Firefox_OS)。 + +在项目有正式名称之前，Firefox OS 也常被称为 Boot2Gecko。 diff --git a/files/zh-cn/glossary/firewall/index.md b/files/zh-cn/glossary/firewall/index.md index e6121c7d4db21c..f9237498bdb8f6 100644 --- a/files/zh-cn/glossary/firewall/index.md +++ b/files/zh-cn/glossary/firewall/index.md @@ -1,14 +1,16 @@ --- title: 防火墙 slug: Glossary/Firewall +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -**防火墙**（firewall）是一个过滤网络流量的系统。根据一些指定的规则，它可以让网络流量通过，也可以阻止网络流量通过。例如，它可以阻止针对某个端口的入站连接或针对某个 IP 地址的出站连接。 +**防火墙**是一个过滤网络流量的系统。根据一些指定的规则，它可以让网络流量通过，也可以阻止网络流量通过。例如，它可以阻止针对某个端口的入站连接或针对某个 IP 地址的出站连接。 -防火墙可以是简单的单一软件，也可以是更复杂的，比如一台专门的机器，其唯一的功能就是充当防火墙。 +防火墙可以是简单的单一软件，也可以是更复杂的，比如一台专门充当防火墙角色的机器。 ## 参见 -- 维基百科上的[防火墙](https://zh.wikipedia.org/wiki/防火墙)词条 +- 维基百科上的[防火墙](https://zh.wikipedia.org/wiki/防火墙) diff --git a/files/zh-cn/glossary/guard/index.md b/files/zh-cn/glossary/guard/index.md deleted file mode 100644 index 69f09a7a1695e2..00000000000000 --- a/files/zh-cn/glossary/guard/index.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Guard -slug: Glossary/Guard -l10n: - sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 ---- - -{{GlossarySidebar}} - -Guard 是 {{domxref("Headers")}} 对象的新特性 (在 {{domxref("Fetch_API", "Fetch 规范", "", 1)}}中定义），限制像 {{domxref("Headers.set","set()")}} 和 {{domxref("Headers.append","append()")}} 这样的可以修改标头内容的方法。例如，`immutable` guard 意味着标头不能被改变。阅读 [Fetch 基本概念：guard](/zh-CN/docs/Web/API/Fetch_API/Basic_concepts#guard)，以了解更多信息。 diff --git a/files/zh-cn/glossary/node/networking/index.md b/files/zh-cn/glossary/node/networking/index.md index 611ddf258aa2d5..d3486301599c89 100644 --- a/files/zh-cn/glossary/node/networking/index.md +++ b/files/zh-cn/glossary/node/networking/index.md @@ -1,6 +1,8 @@ --- title: 节点（网络） slug: Glossary/Node/networking +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} diff --git a/files/zh-cn/glossary/nullish/index.md b/files/zh-cn/glossary/nullish/index.md index 630653baa86692..111ff188e4f78d 100644 --- a/files/zh-cn/glossary/nullish/index.md +++ b/files/zh-cn/glossary/nullish/index.md @@ -1,6 +1,8 @@ --- title: 空值 slug: Glossary/Nullish +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} diff --git a/files/zh-cn/glossary/png/index.md b/files/zh-cn/glossary/png/index.md index 19744a2bdf177d..33d0d1fec18dae 100644 --- a/files/zh-cn/glossary/png/index.md +++ b/files/zh-cn/glossary/png/index.md @@ -1,6 +1,8 @@ --- title: PNG slug: Glossary/PNG +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} diff --git a/files/zh-cn/glossary/port/index.md b/files/zh-cn/glossary/port/index.md index 484d2e09ab8bb3..7cfb44619ec0e6 100644 --- a/files/zh-cn/glossary/port/index.md +++ b/files/zh-cn/glossary/port/index.md @@ -1,6 +1,8 @@ --- title: 端口 slug: Glossary/Port +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} diff --git a/files/zh-cn/glossary/preflight_request/index.md b/files/zh-cn/glossary/preflight_request/index.md index 0c26ebb6d560cf..66944ad1004ae2 100644 --- a/files/zh-cn/glossary/preflight_request/index.md +++ b/files/zh-cn/glossary/preflight_request/index.md @@ -1,28 +1,30 @@ --- -title: Preflight request +title: 预检请求 slug: Glossary/Preflight_request +l10n: + sourceCommit: 38fb31b12de1019a538e868a90dd4dd4858e4871 --- {{GlossarySidebar}} -一个 CORS 预检请求是用于检查服务器是否支持 {{Glossary("CORS")}} 即跨域资源共享。 +{{glossary("CORS")}} 预检请求用于检查服务器是否支持 CORS 协议，并且是否允许使用特定的方法和标头。 -它一般是用了以下几个 HTTP 请求首部的 {{HTTPMethod("OPTIONS")}} 请求：{{HTTPHeader("Access-Control-Request-Method")}} 和 {{HTTPHeader("Access-Control-Request-Headers")}}，以及一个 {{HTTPHeader("Origin")}} 首部。 +它一般是用了以下几个 HTTP 请求标头的 {{HTTPMethod("OPTIONS")}} 请求：{{HTTPHeader("Access-Control-Request-Method")}} 和 {{HTTPHeader("Access-Control-Request-Headers")}}，以及可选的 {{HTTPHeader("Origin")}} 标头。 -当有必要的时候，浏览器会自动发出一个预检请求；所以在正常情况下，前端开发者不需要自己去发这样的请求。 +当有必要的时候，浏览器会自动发出预检请求；所以在正常情况下，前端开发者不需要自己去发这样的请求。预检请求会在请求被标记为[“需要预检”](/zh-CN/docs/Web/HTTP/CORS#预检请求)时进行，而对于[简单请求](/zh-CN/docs/Web/HTTP/CORS#简单请求)则不会进行。 -举个例子，一个客户端可能会在实际发送一个 `DELETE` 请求之前，先向服务器发起一个预检请求，用于询问是否可以向服务器发起一个 {{HTTPMethod("DELETE")}} 请求： +例如，客户端可能会在实际发送 {{HTTPMethod("DELETE")}} 请求之前，先向服务器发起预检请求，用于询问是否可以向服务器发起 `DELETE` 请求： -``` +```http OPTIONS /resource/foo Access-Control-Request-Method: DELETE Access-Control-Request-Headers: origin, x-requested-with Origin: https://foo.bar.org ``` -如果服务器允许，那么服务器就会响应这个预检请求。并且其响应首部 {{HTTPHeader("Access-Control-Allow-Methods")}} 会将 `DELETE` 包含在其中： +如果服务器允许，那么服务器就会响应这个预检请求。并且其响应标头 {{HTTPHeader("Access-Control-Allow-Methods")}} 会将 `DELETE` 包含在其中： -``` +```http HTTP/1.1 200 OK Content-Length: 0 Connection: keep-alive @@ -31,7 +33,9 @@ Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE Access-Control-Max-Age: 86400 ``` +预检响应可以通过类似上面的例子中的 {{HTTPHeader("Access-Control-Max-Age")}} 标头来缓存，以便在同一个 {{Glossary("URL")}} 下创建的请求中使用。为了缓存预检响应，浏览器使用一个特定的缓存，这个缓存是与浏览器管理的一般 HTTP 缓存分开的。预检响应永远不会被缓存在浏览器的一般 HTTP 缓存中。 + ## 参见 -- [CORS](/zh-CN/docs/Glossary/CORS) +- {{Glossary("CORS")}} - {{HTTPMethod("OPTIONS")}} diff --git a/files/zh-cn/glossary/presto/index.md b/files/zh-cn/glossary/presto/index.md index a333a5cf975019..aa8a91c423aa38 100644 --- a/files/zh-cn/glossary/presto/index.md +++ b/files/zh-cn/glossary/presto/index.md @@ -1,6 +1,8 @@ --- title: Presto slug: Glossary/Presto +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} diff --git a/files/zh-cn/glossary/progressive_web_apps/index.md b/files/zh-cn/glossary/progressive_web_apps/index.md new file mode 100644 index 00000000000000..a268959f4a1d5d --- /dev/null +++ b/files/zh-cn/glossary/progressive_web_apps/index.md @@ -0,0 +1,19 @@ +--- +title: 渐进式 Web 应用程序 +slug: Glossary/Progressive_web_apps +l10n: + sourceCommit: 835d6632d59993861a0458510402787f8a2c3cb3 +--- + +{{GlossarySidebar}} + +渐进式 Web 应用程序（PWA）是使用 Web 平台技术构建的应用程序，但提供的用户体验类似于平台特定的应用程序。 + +这种应用程序享有 Web 的所有优点——例如通过搜索引擎发现、通过 {{Glossary("URL")}} 链接以及跨多个设备工作，但通过现代 API（例如 [Service Worker](/zh-CN/docs/Web/API/Service_Worker_API) 和[推送](/zh-CN/docs/Web/API/Push_API)）逐步增强。 + +这些功能包括可安装、离线工作以及便于与服务器同步和重新吸引用户。 + +## 参见 + +- MDN 上的[渐进式 Web 应用程序](/zh-CN/docs/Web/Progressive_web_apps) +- web.dev 上的[渐进式 Web 应用程序](https://web.dev/explore/progressive-web-apps) diff --git a/files/zh-cn/glossary/property/css/index.md b/files/zh-cn/glossary/property/css/index.md index 6162b36535950f..77ff01c7ae5d6c 100644 --- a/files/zh-cn/glossary/property/css/index.md +++ b/files/zh-cn/glossary/property/css/index.md @@ -1,6 +1,8 @@ --- title: 属性（CSS） slug: Glossary/Property/CSS +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} diff --git a/files/zh-cn/glossary/property/index.md b/files/zh-cn/glossary/property/index.md index e84e0118877001..138a5c96576c8c 100644 --- a/files/zh-cn/glossary/property/index.md +++ b/files/zh-cn/glossary/property/index.md @@ -1,6 +1,8 @@ --- title: 属性 slug: Glossary/Property +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} diff --git a/files/zh-cn/glossary/property/javascript/index.md b/files/zh-cn/glossary/property/javascript/index.md index cecf3b1d05e648..a8ec663b0f9151 100644 --- a/files/zh-cn/glossary/property/javascript/index.md +++ b/files/zh-cn/glossary/property/javascript/index.md @@ -1,6 +1,8 @@ --- title: 属性（JavaScript） slug: Glossary/Property/JavaScript +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} diff --git a/files/zh-cn/glossary/pseudocode/index.md b/files/zh-cn/glossary/pseudocode/index.md index ac28141ff77b92..620e4bafdd9204 100644 --- a/files/zh-cn/glossary/pseudocode/index.md +++ b/files/zh-cn/glossary/pseudocode/index.md @@ -1,6 +1,8 @@ --- title: 伪代码 slug: Glossary/Pseudocode +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} diff --git a/files/zh-cn/glossary/rendering_engine/index.md b/files/zh-cn/glossary/rendering_engine/index.md deleted file mode 100644 index dc806b33f2b4eb..00000000000000 --- a/files/zh-cn/glossary/rendering_engine/index.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: 渲染引擎 -slug: Glossary/Rendering_engine -l10n: - sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 ---- - -{{GlossarySidebar}} - -**渲染引擎**是一种在屏幕上绘制文本和图像的软件。该引擎从文档（通常是 {{glossary("HTML")}}）中绘制结构化文本，并根据给定的样式声明（通常在 {{glossary("CSS")}} 中给出）进行适当的格式化。布局引擎的示例包括：{{glossary("Blink")}}、{{glossary("Gecko")}}、EdgeHTML、{{glossary("WebKit")}}。 - -## 参见 - -- 维基百科上的 [Web 浏览器引擎](https://en.wikipedia.org/wiki/浏览器引擎) -- [Venkatraman.R - 浏览器的背后（第一部分，基础知识）](https://medium.com/@ramsunvtech/behind-browser-basics-part-1-b733e9f3c0e6) diff --git a/files/zh-cn/glossary/reporting_directive/index.md b/files/zh-cn/glossary/reporting_directive/index.md new file mode 100644 index 00000000000000..965f915c625652 --- /dev/null +++ b/files/zh-cn/glossary/reporting_directive/index.md @@ -0,0 +1,28 @@ +--- +title: 报告指令 +slug: Glossary/Reporting_directive +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**{{Glossary("CSP")}} 报告指令**用于 {{HTTPHeader("Content-Security-Policy")}} 标头，控制 CSP 违规报告的过程。 + +详见[报告指令](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy#报告指令)以获取完整列表。 + +## 参见 + +- [术语](/zh-CN/docs/Glossary) + + - {{Glossary("CSP", "内容安全策略")}} + - {{Glossary("Fetch directive", "Fetch 指令")}} + - {{Glossary("Document directive", "文档指令")}} + - {{Glossary("Navigation directive", "导航指令")}} + +- 参考 + + - + - {{HTTPHeader("Content-Security-Policy/upgrade-insecure-requests", "upgrade-insecure-requests")}} + - {{HTTPHeader("Content-Security-Policy/block-all-mixed-content", "block-all-mixed-content")}} + - {{HTTPHeader("Content-Security-Policy")}} diff --git a/files/zh-cn/glossary/response_header/index.md b/files/zh-cn/glossary/response_header/index.md index abf922dae085c4..beb1ac2c85b559 100644 --- a/files/zh-cn/glossary/response_header/index.md +++ b/files/zh-cn/glossary/response_header/index.md @@ -1,13 +1,15 @@ --- -title: 响应标头（Response header） +title: 响应标头 slug: Glossary/Response_header +l10n: + sourceCommit: 659d8ae39e05a7a9f260f1194bb325438cea5d34 --- {{GlossarySidebar}} -**响应标头**（response header）是一种 {{glossary("HTTP header","HTTP 标头")}}，其可以用于 HTTP 响应，且与响应消息主体无关。像 {{HTTPHeader("Age")}}、{{HTTPHeader("Location")}} 或 {{HTTPHeader("Server")}} 都属于响应标头，它们被用于提供更详细的响应上下文。 +**响应标头**是一种与响应消息主体无关的 {{glossary("HTTP header","HTTP 标头")}}，可以用于 HTTP 响应。像 {{HTTPHeader("Age")}}、{{HTTPHeader("Location")}} 或 {{HTTPHeader("Server")}} 都属于响应标头，被用于提供更详细的响应上下文。 -并非所有出现在响应中的标头都根据规范将其归类为*响应标头*。例如，{{HTTPHeader("Content-Type")}} 标头就是一个{{glossary("representation header","表示标头（representation header）")}}，指示响应信息正文中的原始数据类型（在应用 {{HTTPHeader("Content-Encoding")}} 表示标头中的编码前）。然而，“会话式”的所有标头通常在响应消息中称为响应标头。 +并非所有出现在响应中的标头都根据规范将其归类为*响应标头*。例如，{{HTTPHeader("Content-Type")}} 标头就是一个{{glossary("representation header", "表示标头")}}，在应用 {{HTTPHeader("Content-Encoding")}} 表示标头中的编码前指示响应信息正文中的原始数据类型。然而，“会话式”的所有标头通常在响应消息中称为响应标头。 以下展示了 {{HTTPMethod("GET")}} 请求后的一些响应和表示标头。 @@ -34,10 +36,8 @@ x-frame-options: DENY ## 参见 - [所有 HTTP 标头列表](/zh-CN/docs/Web/HTTP/Headers) -- [Glossary](/zh-CN/docs/Glossary) +- [术语](/zh-CN/docs/Glossary) - - {{Glossary("Representation header", "表示标头（Representation header）")}} + - {{Glossary("Representation header", "表示标头")}} - {{Glossary("HTTP header", "HTTP 标头")}} - - {{Glossary("Response header", "响应标头（Response header）")}} - - {{Glossary("Fetch metadata response header", "fetch 元数据响应头")}} - - {{Glossary("Request header", "请求标头（Request header）")}} + - {{Glossary("Request header", "请求标头")}} diff --git a/files/zh-cn/glossary/rest/index.md b/files/zh-cn/glossary/rest/index.md index 0e996fb61d67fb..0bfdd9ca06ace6 100644 --- a/files/zh-cn/glossary/rest/index.md +++ b/files/zh-cn/glossary/rest/index.md @@ -1,19 +1,21 @@ --- title: REST slug: Glossary/REST +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -**REST**（Representational State Transfer，表现层状态转换）是一组软件架构设计规范，可实现高效、可靠和可拓展的分布式系统。 +**REST**（表现层状态转换）是一组软件架构设计规范，可实现高效、可靠和可拓展的分布式系统。 -REST 的基本概念是资源（resource），例如文件能通过明确和标准的操作与格式，转换其状态与超文本的关系。通常在 {{Glossary("API","API's")}} 或服务能直接修改文件的类型，而非触发其他行为时，它们就称自己为 RESTful。 +REST 的基本思想是通过公认的、与语言无关的、可靠标准化的客户端/服务器交互传输资源（例如文档）。当服务遵循这些规范时，称其为 RESTful 服务。 -由于万维网 {{glossary("World Wide Web","Web")}} 背后的 {{Glossary("HTTP")}} 协议也能传输文件和超文本链接，同时又充当了标准，简易的 HTTP API 虽然有时不一定遵守所有的 RESTful 规范，但它们还是会被称为 RESTful API、RESTful 服务，或者直接叫 REST 服务。初学者可以先假设 REST API 代表一个能通过标准 web 库和工具调用的 HTTP 服务。 +通常将 HTTP API 称为 RESTful API、RESTful 服务或 REST 服务，尽管它们不一定遵循所有 REST 规范。初学者可以认为 REST API 意味着可以使用标准 Web 库和工具调用的 HTTP 服务。 ## 参见 - [restapitutorial.com](https://www.restapitutorial.com/) - [restcookbook.com](https://restcookbook.com/) - 维基百科上的[表现层状态转换](https://zh.wikipedia.org/wiki/表现层状态转换) -- [REST Architecture](https://www.service-architecture.com/articles/web-services/representational_state_transfer_rest.html) +- [REST 架构](https://www.service-architecture.com/articles/web-services/representational_state_transfer_rest.html) diff --git a/files/zh-cn/glossary/ril/index.md b/files/zh-cn/glossary/ril/index.md new file mode 100644 index 00000000000000..41069a2546babb --- /dev/null +++ b/files/zh-cn/glossary/ril/index.md @@ -0,0 +1,14 @@ +--- +title: RIL +slug: Glossary/RIL +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +RIL（无线界面层）是一个用于在设备的软件和设备的电话、无线电或调制解调器硬件之间进行通信的移动操作系统组件。 + +## 参见 + +- 维基百科上的[无线界面层](https://zh.wikipedia.org/wiki/無線介面層) diff --git a/files/zh-cn/glossary/round_trip_time/index.md b/files/zh-cn/glossary/round_trip_time/index.md new file mode 100644 index 00000000000000..d1be80cc34f23f --- /dev/null +++ b/files/zh-cn/glossary/round_trip_time/index.md @@ -0,0 +1,35 @@ +--- +title: 来回通信延迟（RTT） +slug: Glossary/Round_Trip_Time +l10n: + sourceCommit: 6b01400b286e8bdfa7060d56af84757dd4b8de48 +--- + +{{GlossarySidebar}} + +**来回通信延迟（RTT）** 是指数据包从发送到目的地再到返回到源站所需的总时间。可以使用 `ping` 命令来确定网络和服务器之间的 RTT。 + +```bash +ping example.com +``` + +这将输出类似以下内容： + +```plain +PING example.com (216.58.194.174): 56 data bytes +64 bytes from 216.58.194.174: icmp_seq=0 ttl=55 time=25.050 ms +64 bytes from 216.58.194.174: icmp_seq=1 ttl=55 time=23.781 ms +64 bytes from 216.58.194.174: icmp_seq=2 ttl=55 time=24.287 ms +64 bytes from 216.58.194.174: icmp_seq=3 ttl=55 time=34.904 ms +64 bytes from 216.58.194.174: icmp_seq=4 ttl=55 time=26.119 ms +--- google.com ping statistics --- +5 packets transmitted, 5 packets received, 0.0% packet loss +round-trip min/avg/max/stddev = 23.781/26.828/34.904/4.114 ms +``` + +在上述示例中，平均来回通信延迟显示在最后一行，为 26.8 毫秒。 + +## 参见 + +- [第一字节时间（TTFB）](/zh-CN/docs/Glossary/Time_to_first_byte) +- [延迟](/zh-CN/docs/Glossary/Latency) diff --git a/files/zh-cn/glossary/routers/index.md b/files/zh-cn/glossary/routers/index.md new file mode 100644 index 00000000000000..5b605417cd7bea --- /dev/null +++ b/files/zh-cn/glossary/routers/index.md @@ -0,0 +1,26 @@ +--- +title: 路由器 +slug: Glossary/Routers +l10n: + sourceCommit: 4ece9c7cb7312506455e34bac94898ed0b6362d8 +--- + +{{GlossarySidebar}} + +Web **路由器**有三种定义： + +1. 对于网络层，路由器是一种网络设备，用于决定将{{Glossary('Packet', '数据包')}}发送到何处。 +2. 对于应用层中的{{Glossary('SPA', '单页应用')}}，路由器是一个库，用于根据给定的 {{Glossary('URL')}} 决定呈现哪个网页。此中间件模块用于所有 URL 函数，因为这些函数会接收一个文件路径，然后渲染以打开下一个页面。 +3. 在服务层中实现 {{Glossary('API')}} 时，路由器是一个软件组件，用于解析请求并将请求定向或路由到程序中的各种处理器。路由器代码通常会接收处理器的响应，并将其返回给请求者。 + +## 参见 + +对于网络层上下文： + +- [路由器](https://zh.wikipedia.org/wiki/路由器) + +对于应用层中的单页应用，大多数流行的单页应用框架都有其路由库： + +- [Angular router](https://angular.io/guide/router) +- [React router](https://reactrouter.com/) +- [Vue router](https://router.vuejs.org) diff --git a/files/zh-cn/glossary/rss/index.md b/files/zh-cn/glossary/rss/index.md index 001b3bc3d90d07..5d3332105fa3ed 100644 --- a/files/zh-cn/glossary/rss/index.md +++ b/files/zh-cn/glossary/rss/index.md @@ -1,11 +1,13 @@ --- title: RSS slug: Glossary/RSS +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -**RSS**（简易信息聚合）指的是用于发布站点更新的数种 XML 文档格式。当你订阅一个网站的 RSS 摘要时，网站会将 RSS 信息和更新信息发送到一个称为资讯（feed）的 RSS 文档中，因此你无需手动查看所有喜爱的网站就可以获取这些网站的更新动态。 +**RSS**（简易信息聚合）指的是用于发布站点更新的数种 XML 文档格式。当你订阅一个网站的 RSS 摘要时，网站会将 RSS 信息和更新信息发送到一个称为*资讯*的 RSS 文档中，因此你无需手动查看所有喜爱的网站就可以获取这些网站的更新动态。 ## 参见 diff --git a/files/zh-cn/glossary/rtcp/index.md b/files/zh-cn/glossary/rtcp/index.md new file mode 100644 index 00000000000000..cc967da8a8b60a --- /dev/null +++ b/files/zh-cn/glossary/rtcp/index.md @@ -0,0 +1,20 @@ +--- +title: RTCP（RTP 控制协议） +slug: Glossary/RTCP +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**RTP 控制协议**（**RTCP**）是 {{Glossary("RTP")}} 协议的伙伴。RTCP 用于提供有关 RTP 媒体流会话的控制和统计信息。 + +这样可以在使用底层数据包传递层传输 RTCP 信号、RTP 和媒体内容的同时，逻辑上和功能上将控制和统计包与媒体流分离。 + +RTCP 定期向 RTP 会话的所有参与者发送控制包，使用与传输数据包相同的机制。底层协议处理数据和控制包的多路复用，可能使用不同的网络端口传输每种类型的包。 + +## 参见 + +- [介绍实时传输协议](/zh-CN/docs/Web/API/WebRTC_API/Intro_to_RTP) +- [RTP 控制协议](https://zh.wikipedia.org/wiki/实时传输控制协议) +- {{RFC(3550, "RFC 3550 第 6 节", 6)}} diff --git a/files/zh-cn/glossary/rtf/index.md b/files/zh-cn/glossary/rtf/index.md new file mode 100644 index 00000000000000..973ef51b1c3091 --- /dev/null +++ b/files/zh-cn/glossary/rtf/index.md @@ -0,0 +1,16 @@ +--- +title: RTF +slug: Glossary/RTF +l10n: + sourceCommit: 97a5c711248e4d49c1dc6d935691ffd64dbdfd17 +--- + +{{GlossarySidebar}} + +RTF（富文本格式）是一种基于纯文本的文件格式，支持格式化指令（如粗体或斜体）。 + +微软 Word 团队的三名程序员在 1980 年代创建了 RTF，微软一直开发该格式直到 2008 年。然而，许多文字处理程序仍然可以读取和写入 RTF。 + +## 参见 + +- 维基百科上的[富文本格式](https://zh.wikipedia.org/wiki/RTF) diff --git a/files/zh-cn/glossary/rtl/index.md b/files/zh-cn/glossary/rtl/index.md index 662bd0ba5fabcc..b20887167c588d 100644 --- a/files/zh-cn/glossary/rtl/index.md +++ b/files/zh-cn/glossary/rtl/index.md @@ -1,6 +1,8 @@ --- title: RTL（从右到左） slug: Glossary/RTL +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} diff --git a/files/zh-cn/glossary/rtsp/index.md b/files/zh-cn/glossary/rtsp/index.md new file mode 100644 index 00000000000000..deb14ab5129d71 --- /dev/null +++ b/files/zh-cn/glossary/rtsp/index.md @@ -0,0 +1,15 @@ +--- +title: RTSP：实时流协议 +slug: Glossary/RTSP +l10n: + sourceCommit: c64e08ff3cecdecae78748de1b94c845a2d7ae85 +--- + +{{GlossarySidebar}} + +实时流协议（RTSP）是一种用于控制媒体流在{{glossary("server", "服务器")}}和{{glossary("client", "客户端")}}之间的传输方式的网络协议。简单来说，RTSP 是描述当你在播放视频时点击“暂停”/“播放”按钮时会发生什么的协议。如果你的计算机是遥控器，而流媒体服务器是电视，那么 RTSP 就是描述遥控器的指令如何影响电视的协议。 + +## 参见 + +- 维基百科上的 [RTSP](https://zh.wikipedia.org/wiki/即時串流協定) +- [RFC 7826](https://datatracker.ietf.org/doc/html/rfc7826)（其中一份具体介绍 RTP 协议如何运作的文档） diff --git a/files/zh-cn/glossary/ruby/index.md b/files/zh-cn/glossary/ruby/index.md new file mode 100644 index 00000000000000..2e2fb24afbf8c5 --- /dev/null +++ b/files/zh-cn/glossary/ruby/index.md @@ -0,0 +1,18 @@ +--- +title: Ruby +slug: Glossary/Ruby +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**Ruby** 是一种开源编程语言。在 {{glossary("world wide web","Web")}} 环境中，Ruby 通常与 _Ruby On Rails_（ROR）框架一起用于服务器端，以生成网站/应用。 + +Ruby 还是一种用于在 HTML 文档中提供发音信息的东亚文本注释方法；请参阅 {{HTMLElement("ruby")}} 元素。 + +## 参见 + +- 维基百科上的 [Ruby](https://zh.wikipedia.org/wiki/Ruby) +- [Ruby 官网](https://www.ruby-lang.org) +- [Ruby On Rails 官网](https://rubyonrails.org/) diff --git a/files/zh-cn/glossary/safe/http/index.md b/files/zh-cn/glossary/safe/http/index.md index 4e0fc8c17cdd44..4fee9d00c01ca0 100644 --- a/files/zh-cn/glossary/safe/http/index.md +++ b/files/zh-cn/glossary/safe/http/index.md @@ -1,6 +1,8 @@ --- title: 安全（HTTP 方法） slug: Glossary/Safe/HTTP +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} diff --git a/files/zh-cn/glossary/salt/index.md b/files/zh-cn/glossary/salt/index.md new file mode 100644 index 00000000000000..85c8c039c45e9c --- /dev/null +++ b/files/zh-cn/glossary/salt/index.md @@ -0,0 +1,26 @@ +--- +title: 盐 +slug: Glossary/Salt +l10n: + sourceCommit: e63979cfb7866a20a546623e6cf736ccf9055f03 +--- + +{{GlossarySidebar}} + +密码学中，**盐**是在密码被{{glossary("hash", "哈希")}}之前添加的随机数据。这使得攻击者无法从哈希值推导出密码，因为攻击者无法使用预先计算的密码和相应哈希的表来推导密码。 + +密码不应以明文形式存储，因为攻击者可能会破解存储密码的数据库。通常，密码会被哈希，然后存储哈希的结果。如果哈希函数是密码学安全的，那么即使攻击者可以访问存储的哈希，也无法逆转这个函数。 + +为了从哈希值推导出密码，攻击者可以在预先计算的表中查找与哈希对应的密码（也称为[彩虹表](https://zh.wikipedia.org/wiki/彩虹表)）： + +| 密码 | 哈希 | +| -------- | ----------- | +| pa55w0rd | 56965E2A... | +| abcdef | BEF57EC7... | +| letmein | 1C8BFE8F... | + +虽然这些表可能非常大，但这种攻击可能会成功，因为表查找是一种快速操作。 + +在对密码进行哈希之前添加随机盐可以阻止这种攻击成功，因为哈希不是仅基于密码计算的，而是基于密码与盐的组合计算的。 + +与密码不同，盐不需要保密：它可以与加盐和哈希的密码一起存储在服务器的数据库中。 diff --git a/files/zh-cn/glossary/same-origin_policy/index.md b/files/zh-cn/glossary/same-origin_policy/index.md index 1b3659810d75bf..92e2cffb594298 100644 --- a/files/zh-cn/glossary/same-origin_policy/index.md +++ b/files/zh-cn/glossary/same-origin_policy/index.md @@ -1,8 +1,20 @@ --- -title: Same-origin policy +title: 同源策略 slug: Glossary/Same-origin_policy +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -同源策略是一种重要的安全机制，用来限制来自某个域的文档或脚本与另一个域的资源的交互行为，能够隔离潜在的恶意文件，减少受攻击的可能性。 +[**同源策略**](/zh-CN/docs/Web/Security/Same-origin_policy)是一种关键的安全机制，限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。 + +它有助于隔离潜在的恶意文档，减少可能的攻击向量。 + +## 参见 + +- [同源策略](/zh-CN/docs/Web/Security/Same-origin_policy) +- [MDN Web 文档术语表](/zh-CN/docs/Glossary): + + - {{Glossary("CORS")}} + - {{Glossary("origin", "源")}} diff --git a/files/zh-cn/glossary/scm/index.md b/files/zh-cn/glossary/scm/index.md new file mode 100644 index 00000000000000..7be573540c7d37 --- /dev/null +++ b/files/zh-cn/glossary/scm/index.md @@ -0,0 +1,16 @@ +--- +title: SCM +slug: Glossary/SCM +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +SCM（源代码管理）是一种管理源代码的系统。通常它指的是使用软件来处理源文件的版本控制。程序员可以修改源代码文件而不用担心编辑掉有用的东西，因为 SCM 会跟踪源代码的更改情况以及谁做了更改。 + +SCM 系统包括 CVS、SVN、GIT。 + +## 参见 + +- 维基百科上的[版本控制](https://zh.wikipedia.org/wiki/版本控制) diff --git a/files/zh-cn/glossary/screen_reader/index.md b/files/zh-cn/glossary/screen_reader/index.md new file mode 100644 index 00000000000000..f530b0d8a385a7 --- /dev/null +++ b/files/zh-cn/glossary/screen_reader/index.md @@ -0,0 +1,43 @@ +--- +title: 屏幕阅读器 +slug: Glossary/Screen_reader +l10n: + sourceCommit: 44037e8c5610426012a3971cfa5c0b3fa719ee54 +--- + +{{GlossarySidebar}} + +屏幕阅读器是尝试以非视觉的形式表达屏幕显示内容的软件应用程序，通常使用文本转语音的方式，但也可以转换为盲文或声音图标。屏幕阅读器对于视力受损、文盲或有学习障碍的人而言至关重要。有一些是浏览器扩展屏幕阅读器，但大多数屏幕阅读器适用于所有的用户应用程序，而非仅局限于浏览器。 + +在 Web {{glossary("accessibility", "无障碍")}}方面，大多数用户代理提供了一个无障碍对象模型，屏幕阅读器与专用的无障碍 API 交互，使用各种操作系统特性并采用钩子编程技术。 + +## 常见的屏幕阅读器 + +### 旁白 + +iOS 和 macOS 自带一个内置的屏幕阅读器——旁白。要在 macOS 上访问旁白（VoiceOver），请转到“系统设置” > “辅助功能” > “旁白实用工具”。你也可以使用 fn + command + F5 来切换旁白的开关。旁白既可以朗读内容，也可以显示内容。朗读的内容会在一个深灰色的框中显示出来。 + +旁白也可以通过快捷键使用。参见 [Mac 上的旁白通用命令](https://support.apple.com/zh-cn/guide/voiceover/cpvokys01/mac)以得到完整列表。 + +更多详情内容，参见[适用于 Mac 的旁白使用手册](https://support.apple.com/zh-cn/guide/voiceover/welcome/mac)以及[在 iPhone 上的 App 中使用旁白](https://support.apple.com/guide/iphone/use-voiceover-in-apps-iphe4ee74be8/ios)。 + +### 讲述人 + +讲述人是内置于 Windows 10 和 Windows 11 中的屏幕阅读器。 + +更多详情内容，参见[讲述人完整指南](https://support.microsoft.com/zh-cn/windows/讲述人完整指南-e4397a0d-ef4f-b386-d8ae-c172f109bdb1)。 + +### ChromeVox + +Chromebook 也有自带的屏幕阅读器 ChromeVox，让视觉受损人士能使用 Chrome 操作系统。 + +更多详情内容，参见 [ChromeVox 屏幕阅读器](https://support.google.com/accessibility/answer/7031755)。 + +## 参见 + +- [无障碍](/zh-CN/docs/Web/Accessibility) +- [学习无障碍](/zh-CN/docs/Learn/Accessibility) +- [ARIA](/zh-CN/docs/Web/Accessibility/ARIA) +- [术语](/zh-CN/docs/Glossary) + - {{Glossary("Accessibility", "无障碍")}} + - {{Glossary("ARIA")}} diff --git a/files/zh-cn/glossary/script-supporting_element/index.md b/files/zh-cn/glossary/script-supporting_element/index.md new file mode 100644 index 00000000000000..27332f5e289a27 --- /dev/null +++ b/files/zh-cn/glossary/script-supporting_element/index.md @@ -0,0 +1,18 @@ +--- +title: 脚本支持元素 +slug: Glossary/Script-supporting_element +l10n: + sourceCommit: d267a8cb862c20277f81bbc223221b36b0c613e6 +--- + +{{GlossarySidebar}} + +在 {{Glossary("HTML")}} 文档中，**脚本支持元素**是那些不直接影响页面的外观或布局的元素；相反，它们要么是脚本，要么包含只有脚本才会使用的信息。 + +这些元素可能很重要，但除非页面的脚本明确让它们这样做，否则它们不会影响显示的页面。 + +只有两个脚本支持元素：{{HTMLElement("script")}} 和 {{HTMLElement("template")}}。 + +## 参见 + +[脚本支持元素](/zh-CN/docs/Web/HTML/Content_categories#script-supporting_elements) diff --git a/files/zh-cn/glossary/scroll_container/index.md b/files/zh-cn/glossary/scroll_container/index.md index 57c0da018bed0b..c6a231cb936988 100644 --- a/files/zh-cn/glossary/scroll_container/index.md +++ b/files/zh-cn/glossary/scroll_container/index.md @@ -1,6 +1,8 @@ --- title: 滚动容器 slug: Glossary/Scroll_container +l10n: + sourceCommit: dfad9eccce7c2f11c195003ec1cbd7b0fd9db577 --- {{GlossarySidebar}} diff --git a/files/zh-cn/glossary/sctp/index.md b/files/zh-cn/glossary/sctp/index.md new file mode 100644 index 00000000000000..2d7f0d246ed0a6 --- /dev/null +++ b/files/zh-cn/glossary/sctp/index.md @@ -0,0 +1,15 @@ +--- +title: SCTP +slug: Glossary/SCTP +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**SCTP**（流控制传输{{glossary("Protocol", "协议")}}）是一项用于传输协议的 {{glossary("IETF")}} 标准，它能够可靠地按顺序传输消息，同时提供拥塞控制、多宿及其他特性，以提高连接的可靠性和稳定性。它用于通过互联网发送传统电话呼叫，但也用于 {{glossary("WebRTC")}} 数据。 + +## 参见 + +- {{RFC(4960, "流控制传输协议")}} +- 维基百科上的[流控制传输协议](https://zh.wikipedia.org/wiki/流控制传输协议) diff --git a/files/zh-cn/glossary/second-level_domain/index.md b/files/zh-cn/glossary/second-level_domain/index.md deleted file mode 100644 index 2a0fed848a3823..00000000000000 --- a/files/zh-cn/glossary/second-level_domain/index.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: 二级域 -slug: Glossary/Second-level_Domain -l10n: - sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 ---- - -{{GlossarySidebar}} - -二级域（{{Glossary("SLD")}}）是位于顶级域（{{Glossary("TLD")}}）之前的域名的一部分。 - -例如，在 `mozilla.org` 中，`mozilla` 是二级域，`org` 是顶级域。 - -域名不仅限于顶级域和二级域。可以创建额外的子域，以提供关于服务器的各种功能的额外信息，或者为同一域名下的区域进行划分。例如，`www` 是一个常用的子域，用于指示该域名指向一个 Web 服务器。 - -另一个例子，在 `developer.mozilla.org` 中，`developer` 子域用于指定该子域包含 Mozilla 网站的开发人员部分。 - -## 参见 - -- 维基百科上的 [SLD](https://en.wikipedia.org/wiki/二级域) -- [术语](/zh-CN/docs/Glossary) - - - {{Glossary("DNS")}} - - {{Glossary("Domain", "域")}} - - {{Glossary("Domain name", "域名")}} - - {{Glossary("TLD", "顶级域")}} diff --git a/files/zh-cn/glossary/self-executing_anonymous_function/index.md b/files/zh-cn/glossary/self-executing_anonymous_function/index.md index 38570b09c4be39..d40779dc2a39fc 100644 --- a/files/zh-cn/glossary/self-executing_anonymous_function/index.md +++ b/files/zh-cn/glossary/self-executing_anonymous_function/index.md @@ -1,10 +1,12 @@ --- title: 自执行匿名函数 slug: Glossary/Self-Executing_Anonymous_Function +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -一个 {{glossary("JavaScript")}} {{glossary("function", "函数")}}在定义后立即执行。也被熟知为 {{glossary("IIFE")}}（立即调用函数表达式）。 +自执行匿名函数是在定义后立即执行的 {{glossary("JavaScript")}} {{glossary("function", "函数")}}，也被称作{{glossary("IIFE", "立即调用函数表达式")}}（IIFE）。 请浏览上面 IIFE 解释页链接获取更多信息。 diff --git a/files/zh-cn/glossary/seo/index.md b/files/zh-cn/glossary/seo/index.md index bcf0aa48b758a1..596ed8ea76ce1f 100644 --- a/files/zh-cn/glossary/seo/index.md +++ b/files/zh-cn/glossary/seo/index.md @@ -1,26 +1,28 @@ --- title: SEO slug: Glossary/SEO +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -**SEO**（搜索引擎优化）是一种让网站在搜索引擎结果中更加清晰，也帮助我们将搜索结果更靠前 +**SEO**（搜索引擎优化）是一种让网站在搜索引擎结果中更加清晰，也帮助我们将搜索结果更靠前的过程。 -搜索引擎{{Glossary("Crawler", "抓取")}}网页，跟随页面之间的链接，并索引找到的内容。搜索时，搜索引擎会显示索引内容。爬行者遵守规则。如果你在为网站进行搜索引擎优化时密切关注这些规则，则会为网站提供最好的机会，以便在首批结果中显示，增加流量和可能的收入（用于电子商务和广告）。 +搜索引擎{{Glossary("Crawler", "爬取")}}网页，跟随页面之间的链接，并索引找到的内容。搜索时，搜索引擎会显示索引内容。爬行者遵守规则。如果你在为网站进行搜索引擎优化时密切关注这些规则，则会为网站提供最好的机会，以便在首批结果中显示，增加流量和可能的收入（用于电子商务和广告）。 搜索引擎为 SEO 提供了一些指导，但大型搜索引擎将结果排名保持为商业秘密。SEO 结合了官方搜索引擎指南，经验知识和科学论文或专利的理论知识。 SEO 方法分为三大类： - 技术 - - : 使用语义标记内容{{Glossary("HTML")}}. 浏览网站时，抓取工具应该只找到你要编入索引的内容。 + - : 使用语义化的 {{Glossary("HTML")}} 标记内容。浏览网站时，爬取工具应该只找到你要编入索引的内容。 - 撰稿 - - : 使用访问者的词汇编写内容。使用文本和图像，以便抓取工具可以理解主题。 + - : 使用访问者的词汇编写内容。使用文本和图像，以便爬取工具可以理解主题。 - 声望 - : 当其他已建立的站点链接到你的站点时，你获得最多流量。 ## 参见 -- [SEO](https://zh.wikipedia.org/wiki/SEO) on 维基百科 -- [Google Webmaster Central](https://www.google.com/webmasters/) +- 维基百科上的 [SEO](https://zh.wikipedia.org/wiki/搜尋引擎最佳化) +- [Google 搜索中心](https://developers.google.com/search/docs) diff --git a/files/zh-cn/glossary/serialization/index.md b/files/zh-cn/glossary/serialization/index.md index 416f50978a4637..2b06c34668cfc0 100644 --- a/files/zh-cn/glossary/serialization/index.md +++ b/files/zh-cn/glossary/serialization/index.md @@ -1,16 +1,18 @@ --- -title: Serialization（序列化） +title: 序列化 slug: Glossary/Serialization +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} 序列化是将一个对象或数据结构转换为适合网络传输或存储的格式（如数组缓冲区或文件格式）的过程。 -例如在 {{Glossary("JavaScript")}} 中，你可以通过调用 {{jsxref("JSON.stringify()")}} {{Glossary("function", "函数")}}将某个值序列化为 {{Glossary("JSON")}} 格式的{{Glossary("string", "字符串")}}。 +在 {{Glossary("JavaScript")}} 中，你可以通过调用 {{jsxref("JSON.stringify()")}} {{Glossary("function", "函数")}}将某个值序列化为 {{Glossary("JSON")}} 格式的{{Glossary("string", "字符串")}}。 {{Glossary("CSS")}} 值可以通过调用 {{domxref("CSSStyleDeclaration.getPropertyValue()")}} 函数来序列化。 ## 参见 -- 维基百科的[序列化](https://zh.wikipedia.org/zh-cn/序列化)词条 +- 维基百科的[序列化](https://zh.wikipedia.org/zh-cn/序列化) diff --git a/files/zh-cn/glossary/server_timing/index.md b/files/zh-cn/glossary/server_timing/index.md new file mode 100644 index 00000000000000..9056053e9405cd --- /dev/null +++ b/files/zh-cn/glossary/server_timing/index.md @@ -0,0 +1,15 @@ +--- +title: 服务器计时 +slug: Glossary/Server_Timing +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +[服务器计时规范](https://www.w3.org/TR/server-timing/)允许服务器将请求—响应周期中的性能指标传递给用户代理，并利用 JavaScript 接口允许应用程序收集、处理和响应这些指标，以优化应用程序交付。 + +## 参见 + +- +- [资源计时](https://www.w3.org/TR/resource-timing/) diff --git a/files/zh-cn/glossary/signature/index.md b/files/zh-cn/glossary/signature/index.md index 58dc58426db04d..81e8122773fc48 100644 --- a/files/zh-cn/glossary/signature/index.md +++ b/files/zh-cn/glossary/signature/index.md @@ -1,6 +1,8 @@ --- title: 签名 slug: Glossary/Signature +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} diff --git a/files/zh-cn/glossary/signature/security/index.md b/files/zh-cn/glossary/signature/security/index.md index e05eeeba3aa07e..c0bb9fa9c228ad 100644 --- a/files/zh-cn/glossary/signature/security/index.md +++ b/files/zh-cn/glossary/signature/security/index.md @@ -1,22 +1,24 @@ --- title: 签名（安全） slug: Glossary/Signature/Security +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -**签名**或*数字签名*是 {{glossary("protocol","协议")}}，表明消息是真实的。 +**签名**（_数字签名_）是一种证明消息真实性的{{glossary("protocol","协议")}}。 -从给定消息的{{glossary("hash")}}，**签名过程**首先使用实体的私有{{glossary("key")}}生成链接到签名实体的数字签名。 +从给定消息的{{glossary("hash", "哈希")}}，**签名过程**首先使用实体的私有{{glossary("key", "密钥")}}生成链接到签名实体的数字签名。 -收到消息后的**验证过程** +收到消息后的**验证过程**： -- _验证发件人_ _-_ 使用发件人的公钥来{{glossary("decryption","解码")}}签名并恢复只能用发件人的私钥创建的哈希 -- _检查消息完整性 -_ 将哈希与接收到的文档中新计算的哈希进行比较（如果文档被篡改，两个哈希将不同） +- _验证发件人_——使用发件人的公钥来{{glossary("decryption", "解密")}}签名并恢复只能用发件人的私钥创建的哈希 +- _检查消息完整性_——将哈希与接收到的文档中新计算的哈希进行比较（如果文档被篡改，两个哈希将会是不同的） 如果私钥被泄密或收件人被欺骗地给出错误的公钥，系统就会失败。 ## 参见 - 维基百科上的[数字签名](https://zh.wikipedia.org/wiki/數位簽章) -- See {{glossary("digest")}}, {{glossary("encryption")}} +- 参见 {{glossary("digest")}}、{{glossary("encryption")}} diff --git a/files/zh-cn/glossary/simd/index.md b/files/zh-cn/glossary/simd/index.md new file mode 100644 index 00000000000000..b0b1f5d9561c1d --- /dev/null +++ b/files/zh-cn/glossary/simd/index.md @@ -0,0 +1,19 @@ +--- +title: SIMD +slug: Glossary/SIMD +l10n: + sourceCommit: c64e08ff3cecdecae78748de1b94c845a2d7ae85 +--- + +{{GlossarySidebar}} + +**单指令流多数据流**（SIMD，读作“sim-dee”）是一种[计算机架构的分类](https://zh.wikipedia.org/wiki/費林分類法)，允许对多个数据点执行相同的操作，实现数据级并行性，从而获得性能提升——例如，用于 3D 图形和视频处理、物理模拟或密码学等领域。 + +参见 {{Glossary("SISD")}}——指令和数据集均无并行性的顺序架构。 + +## 参见 + +- 维基百科上的[单指令流多数据流](https://zh.wikipedia.org/wiki/单指令流多数据流) +- [术语表](/zh-CN/docs/Glossary) + + - {{Glossary("SISD")}} diff --git a/files/zh-cn/glossary/sisd/index.md b/files/zh-cn/glossary/sisd/index.md new file mode 100644 index 00000000000000..537433b9246a9a --- /dev/null +++ b/files/zh-cn/glossary/sisd/index.md @@ -0,0 +1,16 @@ +--- +title: SISD +slug: Glossary/SISD +l10n: + sourceCommit: 60798c7f7cdb86f1c1808a4416386bbfcc794649 +--- + +{{GlossarySidebar}} + +**单指令流单数据流**（SISD）是一种[计算机架构的分类](https://zh.wikipedia.org/wiki/費林分類法)。在 SISD 架构中，单个处理器执行单个指令，并在内存中操作单个数据点。 + +参见 {{Glossary("SIMD")}}——允许对多个数据点执行相同操作的并行架构。 + +## 参见 + +- 维基百科上的 [SISD](https://zh.wikipedia.org/wiki/單指令流單數據流) diff --git a/files/zh-cn/glossary/site/index.md b/files/zh-cn/glossary/site/index.md index 3d4e9c34e8f5c6..1dc174a4aaaf0d 100644 --- a/files/zh-cn/glossary/site/index.md +++ b/files/zh-cn/glossary/site/index.md @@ -1,19 +1,21 @@ --- -title: 站点（Site） +title: 站点 slug: Glossary/Site +l10n: + sourceCommit: 2b0dc5e25a67e7b75845c17797f95230e000bffd --- {{GlossarySidebar}} -并非正式地，*站点*是一个网站，它是一个网页的集合，由同一域提供服务，并且由单一的组织提供维护。 +不正式地说，*站点*是一个网站（一组由同一域提供服务，并且由单一的组织提供维护的网页的集合）。 -浏览器有时需要去精确地区分不同的站点。例如，浏览器必须仅发送[同站（SameSite）](/zh-CN/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value) cookie 给同一站点，然后才能设置它们。 +浏览器有时需要去精确地区分不同的站点。例如，浏览器必须仅发送 [`SameSite`](/zh-CN/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value) cookie 给同一站点，然后才能设置它们。 对于这个更精确的定义，站点由域名的*可注册域*部分确定。可注册域由[公共后缀列表](https://publicsuffix.org/list/)中的一个条目加上它之前的域名部分组成。这意味着，例如 `theguardian.co.uk`、`sussex.ac.uk` 和 `bookshop.org` 都是可注册的域。 根据这个定义，`support.mozilla.org` 和 `developer.mozilla.org` 是同一站点的一部分，因为 `mozilla.org` 是一个可注册域。 -在某些情况下，在区分不同的站点时，也会考虑站点的协议（scheme）。这将使 `http://vpl.ca` 和 `https://vpl.ca` 成为不同的站点。包含协议（scheme）的情况可以防止不安全的（HTTP）站点被视为与安全（HTTPS）站点为相同的站点。考虑协议（scheme）的定义有时被称为 _schemeful same-site_。这个更严格的定义适用于处理 [SameSite](/zh-CN/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value) cookie。 +在某些情况下，在区分不同的站点时，也会考虑站点的方案（scheme）。这将使 `http://vpl.ca` 和 `https://vpl.ca` 成为不同的站点。包含方案的情况可以防止不安全的（HTTP）站点被视为与安全（HTTPS）站点为相同的站点。考虑方案的定义有时被称为*方案同站*。这个更严格的定义适用于处理 [`SameSite`](/zh-CN/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value) cookie。 ## 示例 @@ -32,7 +34,7 @@ slug: Glossary/Site - `https://developer.mozilla.org/zh-CN/docs/` - `https://example.com` -如果考虑协议（scheme），这些可能是相同的站点或不同的站点： +如果考虑方案，这些可能是相同的站点或不同的站点： - `http://example.com` - `https://example.com` @@ -40,5 +42,5 @@ slug: Glossary/Site ## 参见 - [URL 是什么](/zh-CN/docs/Learn/Common_questions/What_is_a_URL) -- {{Glossary("Origin")}} +- {{Glossary("Origin", "来源")}} - [同源策略](/zh-CN/docs/Web/Security/Same-origin_policy) diff --git a/files/zh-cn/glossary/sld/index.md b/files/zh-cn/glossary/sld/index.md index 80801ab932a75d..182fd7addf88cc 100644 --- a/files/zh-cn/glossary/sld/index.md +++ b/files/zh-cn/glossary/sld/index.md @@ -7,6 +7,19 @@ l10n: {{GlossarySidebar}} -SLD（[二级域](/zh-CN/docs/Glossary/Second-level_Domain)）是位于*顶级域*（{{Glossary("TLD")}}）之前的域名的一部分。例如，在 `mozilla.org` 中，SLD 是 `mozilla`，TLD 是 `org`。 +**二级域**（**SLD**）是域名中位于{{Glossary("TLD", "顶级域（TLD）")}}之前的一部分。 -有关更多信息，参见[二级域](/zh-CN/docs/Glossary/Second-level_Domain)。 +例如，在 `mozilla.org` 中，`mozilla` 是二级域，`org` 是顶级域。 + +域名不仅限于顶级域和二级域。可以创建额外的子域，以提供关于服务器的各种功能的额外信息，或者为同一域名下的区域进行划分。例如，`www` 是一个常用的子域，用于指示该域名指向一个 Web 服务器。 + +另一个例子，在 `developer.mozilla.org` 中，`developer` 子域用于指定该子域包含 Mozilla 网站的开发人员部分。 + +## 参见 + +- 维基百科上的 [SLD](ttps://zh.wikipedia.org/wiki/二级域) +- 相关术语： + - {{Glossary("DNS")}} + - {{Glossary("Domain", "域")}} + - {{Glossary("Domain name", "域名")}} + - {{Glossary("TLD", "顶级域")}} diff --git a/files/zh-cn/glossary/sloppy_mode/index.md b/files/zh-cn/glossary/sloppy_mode/index.md index 98df968f1b7962..465840b8fd0689 100644 --- a/files/zh-cn/glossary/sloppy_mode/index.md +++ b/files/zh-cn/glossary/sloppy_mode/index.md @@ -1,16 +1,16 @@ --- title: 正常模式 slug: Glossary/Sloppy_mode +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -因为翻译原因，正常模式也被翻译为——马虎模式/稀松模式/懒散模式 +{{Glossary("ECMAScript")}} 5 及更高版本允许脚本选择进入新的[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)，其会以多种方式改变 JavaScript 的语义，以提高其弹性，并使在出现问题时更容易理解发生了什么。 -{{Glossary("ECMAScript")}} 5 以及其后续的版本可以选择性的使用一种新模式——严格模式 ([strict mode](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode))，这种严格模式在多个方面改变了 JavaScript 的语义，从而使得当出现问题时我们更好的理解到底发生了什么。 - -常见的，非严格模式——平时我们会称之为正常模式 (**sloppy mode)，**这并不是一个官方说法，但是你会经常见到如上的一些说法，其意义就是指代非严格模式，即正常模式。 +JavaScript 的正常、非严格模式有时被称为**正常模式**（sloppy mode）。这不是一个官方的称呼，但如果你花时间编写严格的 JavaScript 代码，你可能会遇到这个术语。 ## 参见 -- "[Strict Mode](http://speakingjs.com/es5/ch07.html#strict_mode)"，第七章 ("JavaScript Syntax")，《Speaking _JavaScript》_ +- [“严格模式”](http://speakingjs.com/es5/ch07.html#strict_mode)，《Speaking _JavaScript_》的第七章（“JavaScript 语法”） diff --git a/files/zh-cn/glossary/smtp/index.md b/files/zh-cn/glossary/smtp/index.md index 5bb4d8e903f94f..4454b537047682 100644 --- a/files/zh-cn/glossary/smtp/index.md +++ b/files/zh-cn/glossary/smtp/index.md @@ -1,23 +1,22 @@ --- title: SMTP slug: Glossary/SMTP +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -**SMTP**（Simple Mail Transfer Protocol，简单邮件传输协议）是用于发送的邮件的[协议](/zh-CN/docs/Glossary/Protocol)。类似于[POP3](/zh-CN/docs/Glossary/POP)和[NNTP](/zh-CN/docs/Glossary/NNTP)，它是一个[状态机](/zh-CN/docs/Glossary/State_machine)驱动的协议 +**SMTP**（简单邮件传输协议）是用于发送的邮件的{{glossary("protocol", "协议")}}。与{{glossary("POP", "邮局协议")}}和{{glossary("NNTP", "网络新闻传输协议")}}一样，它是一个{{Glossary("state machine", "状态机")}}驱动的协议。 -该协议相对简单。最复杂的部分在于添加支持不同的验证机制（[GSSAPI](https://en.wikipedia.org/wiki/Generic_Security_Services_Application_Program_Interface)， [CRAM-MD5](https://en.wikipedia.org/wiki/CRAM-MD5)，[NTLM](https://en.wikipedia.org/wiki/NTLM)，MSN，AUTH LOGIN，AUTH PLAIN 等），处理错误响应以及在验证机制错误时进行状态回退（如服务器声明其支持某种机制但其实并不）。 +该协议相对简单。最复杂的部分在于添加对不同的验证机制（[GSSAPI](https://en.wikipedia.org/wiki/Generic_Security_Services_Application_Program_Interface)、[CRAM-MD5](https://en.wikipedia.org/wiki/CRAM-MD5)、[NTLM](https://en.wikipedia.org/wiki/NTLM)、MSN、AUTH LOGIN、AUTH PLAIN 等）的支持、处理错误响应以及在验证机制错误时进行状态回退（如服务器声明其支持某种机制但其实并不）。 ## 参见 +- 维基百科上的 [SMTP](https://zh.wikipedia.org/wiki/SMTP) - [术语表](/zh-CN/docs/Glossary) - - [NNTP](/zh-CN/docs/Glossary/NNTP) - - [POP3](/zh-CN/docs/Glossary/POP) - - [协议](/zh-CN/docs/Glossary/Protocol) - - [状态机](/zh-CN/docs/Glossary/State_machine) - -- 维基百科 - - - [SMTP](https://zh.wikipedia.org/wiki/SMTP) + - {{glossary("NNTP", "网络新闻传输协议")}} + - {{glossary("POP", "邮局协议")}} + - {{glossary("protocol", "协议")}} + - {{Glossary("state machine", "状态机")}} diff --git a/files/zh-cn/glossary/snap_positions/index.md b/files/zh-cn/glossary/snap_positions/index.md new file mode 100644 index 00000000000000..c911b08be5bb1b --- /dev/null +++ b/files/zh-cn/glossary/snap_positions/index.md @@ -0,0 +1,12 @@ +--- +title: 吸附位置 +slug: Glossary/Snap_positions +l10n: + sourceCommit: d267a8cb862c20277f81bbc223221b36b0c613e6 +--- + +{{GlossarySidebar}} + +吸附位置是滚动操作完成后[滚动口](/zh-CN/docs/Glossary/Scroll_container)停止移动的点。设置吸附位置可以创建一个浏览内容的滚动体验，而不需要将内容拖动到视图中。 + +吸附位置设置在[滚动容器](/zh-CN/docs/Glossary/Scroll_container)上。参见 [CSS 滚动吸附](/zh-CN/docs/Web/CSS/CSS_scroll_snap)属性。 diff --git a/files/zh-cn/glossary/speed_index/index.md b/files/zh-cn/glossary/speed_index/index.md new file mode 100644 index 00000000000000..4e5d35ad94cc26 --- /dev/null +++ b/files/zh-cn/glossary/speed_index/index.md @@ -0,0 +1,22 @@ +--- +title: 速度指数 +slug: Glossary/Speed_index +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**速度指数**（SI）页面加载性能指标用于衡量页面可见内容的加载速度。速度指数取决于视口的大小，以毫秒为单位表示：时间越短，得分越高。 + +速度指数是为了解决其他里程碑和指标的问题，提供真实用户体验的度量。速度指数已经在几个常见的审核中实现，包括 [WebPageTest](https://github.com/WPO-Foundation/webpagetest-docs/blob/main/src/metrics/SpeedIndex.md) 和 [Lighthouse](https://github.com/paulirish/speedline)。 + +速度指数的计算方式是：在页面可视内容完全加载之前，每隔 100 毫秒计算一次页面可视内容加载完成的百分比。指数的总分则是同样间隔内未完全显示的屏幕百分比之和。 + +_显示了页面加载事件之前的首屏内容如何加载和由速度指数测量所得的图表_： + +![速度指数的计算](speedindex.png) + +## 参见 + +- [了解 Web 性能](/zh-CN/docs/Learn/Performance) diff --git a/files/zh-cn/glossary/sri/index.md b/files/zh-cn/glossary/sri/index.md new file mode 100644 index 00000000000000..3f259ea275581c --- /dev/null +++ b/files/zh-cn/glossary/sri/index.md @@ -0,0 +1,14 @@ +--- +title: SRI +slug: Glossary/SRI +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**子资源完整性**（Subresource Integrity，SRI）安全特性使浏览器能够验证它们获取的文件（比如来自 {{Glossary("CDN")}} 的文件）是否未经意外篡改。这是通过允许你提供一个获取的文件必须匹配的密码学哈希来运作的。 + +## 参见 + +- [子资源完整性](/zh-CN/docs/Web/Security/Subresource_Integrity) diff --git a/files/zh-cn/glossary/state_machine/index.md b/files/zh-cn/glossary/state_machine/index.md new file mode 100644 index 00000000000000..6a656a4550bdf1 --- /dev/null +++ b/files/zh-cn/glossary/state_machine/index.md @@ -0,0 +1,42 @@ +--- +title: 状态机 +slug: Glossary/State_machine +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +状态机是一种用于设计算法的数学抽象概念。它可以读取一组输入，并根据这些输入转换为不同的状态。 + +状态是系统等待执行转换时的进展的状况的描述，其中转换是当条件满足或接收到事件时执行的一组动作。在状态图中，圆圈表示每个可能的状态，箭头表示状态之间的转换。 + +通过观察最终状态，你可以推测出导致该状态的一系列输入。 + +基本状态机有两种类型： + +- 确定有限状态机 + - : 这种类型的状态机对于任何允许的输入只允许一种可能的转换。这就像“if”语句中的 `if x then doThis else doThat`，计算机必须执行两者之*一*。 +- 非确定有限状态机 + - : 在某些状态下，一个输入可以导致多个不同的状态。 + +_图 1：确定有限状态机。_ + +![这个状态机在输入 X 时从状态 1 转换为状态 2，在输入 Y 时从状态 1 转换为状态 3](statemachine1.png) + +在*图 1* 中，状态从状态 1 开始；给定输入“X”，状态变为状态 2；给定输入“Y”，状态变为状态 3。 + +_图 2：非确定有限状态机。_ + +![这个状态机在给定输入 X 时，或维持现有状态（状态 1），或转换为状态 2](statemachine2.png) + +在*图 2* 中，给定输入“X”，状态可以保持不变或者变为状态 2。 + +值得一提的是，任何{{Glossary("regular expression", "正则表达式")}}都可以由状态机表示。 + +## 参见 + +- 维基百科上的[有限状态机](https://zh.wikipedia.org/wiki/有限状态机) +- 维基百科上的 [UML 状态机](https://en.wikipedia.org/wiki/UML_state_machine) +- 维基百科上的[摩尔型有限状态机](https://zh.wikipedia.org/wiki/摩尔型有限状态机) +- 维基百科上的[米利型有限状态机](https://zh.wikipedia.org/wiki/米利型有限状态机) diff --git a/files/zh-cn/glossary/statement/index.md b/files/zh-cn/glossary/statement/index.md index fb3223f7a4762d..686865c7e03c5d 100644 --- a/files/zh-cn/glossary/statement/index.md +++ b/files/zh-cn/glossary/statement/index.md @@ -1,15 +1,15 @@ --- -title: Statement +title: 语句 slug: Glossary/Statement +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -在计算机编程语言中，**语句** 是一行任务指令的代码。每个程序都包含若干语句。 +在计算机编程语言中，**语句**是一行任务指令的代码。每个程序都包含若干语句。 -## 更多 - -### 一般知识 +## 参见 - 维基百科上的[语句（程序设计）](https://zh.wikipedia.org/wiki/陳述式) - [JavaScript 语句和声明](/zh-CN/docs/Web/JavaScript/Reference/Statements) diff --git a/files/zh-cn/glossary/static_typing/index.md b/files/zh-cn/glossary/static_typing/index.md new file mode 100644 index 00000000000000..0420e60a899fa8 --- /dev/null +++ b/files/zh-cn/glossary/static_typing/index.md @@ -0,0 +1,14 @@ +--- +title: 静态类型 +slug: Glossary/Static_typing +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**静态类型**语言是在编译时已知变量类型的语言，例如 Java、C 或 C++。在大多数这类语言中，类型必须由程序员明确指定；在其他情况下（例如 OCaml），类型推断允许程序员不指定其变量类型。 + +## 参见 + +- 维基百科上的[类型系统](https://zh.wikipedia.org/wiki/類型系統) diff --git a/files/zh-cn/glossary/stringifier/index.md b/files/zh-cn/glossary/stringifier/index.md new file mode 100644 index 00000000000000..ddefd270f732b2 --- /dev/null +++ b/files/zh-cn/glossary/stringifier/index.md @@ -0,0 +1,14 @@ +--- +title: 字符串化器 +slug: Glossary/Stringifier +l10n: + sourceCommit: e099e74fe5c09c46f0dfe044894692721a713d29 +--- + +{{GlossarySidebar}} + +{{Glossary("object", "对象")}}的字符串化器是任何被定义为在需要{{Glossary("string", "字符串")}}的情况下提供对象的文本表示的{{Glossary("attribute", "属性")}}或{{Glossary("method", "方法")}}。 + +## 参见 + +- [WebIDL 文件中包含的信息](/zh-CN/docs/MDN/Writing_guidelines/Howto/Write_an_api_reference/Information_contained_in_a_WebIDL_file#字符串化器)中的字符串化器 diff --git a/files/zh-cn/glossary/stun/index.md b/files/zh-cn/glossary/stun/index.md index 8325c0aa699d9e..4de5897ee229d8 100644 --- a/files/zh-cn/glossary/stun/index.md +++ b/files/zh-cn/glossary/stun/index.md @@ -1,15 +1,17 @@ --- title: STUN slug: Glossary/STUN +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -**STUN** (NAT 会话穿越工具) 是一个{{glossary("NAT")}} (网络地址转换器) 传递数据的辅助协议。STUN 会返回一台位于 NAT 背后的已接入网络的主机的{{glossary("IP address")}}(IP 地址)、{{glossary("port")}}(端口号) 和连通状态。 +**STUN**（NAT 会话穿越应用程序）是一个用于绕过 {{glossary("NAT")}}（网络地址转换器）传递数据的辅助协议。STUN 会返回一台位于 NAT 背后的已接入网络的计算机的 {{glossary("IP address", "IP 地址")}}、{{glossary("port", "端口")}}和连通状态。 ## 参见 -- [STUN](https://zh.wikipedia.org/wiki/STUN) 在 维基百科 +- 维基百科上的 [STUN](https://zh.wikipedia.org/wiki/STUN) - [WebRTC 协议](/zh-CN/docs/Web/API/WebRTC_API/Protocols) ### 技术参考 diff --git a/files/zh-cn/glossary/style_origin/index.md b/files/zh-cn/glossary/style_origin/index.md new file mode 100644 index 00000000000000..9e882a52f8bf40 --- /dev/null +++ b/files/zh-cn/glossary/style_origin/index.md @@ -0,0 +1,23 @@ +--- +title: 样式来源 +slug: Glossary/Style_origin +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +在 {{Glossary("CSS")}} 中，有三类样式变化的来源，其类别统称为**样式来源**，分别是**用户代理来源**、**用户来源**和**作者来源**。 + +- 用户代理来源 + - : 用户代理来源是由用户的网页浏览器使用的默认样式组成的样式来源。如果没有其他应用于内容的样式，则在渲染元素时使用用户代理来源的样式。 +- 用户来源 + - : 用户来源是包含网页浏览器的用户添加的任何 CSS 的样式来源。这些可能是通过开发者工具添加的样式，或者是通过自动将自定义样式应用于内容的浏览器扩展程序（如 [Stylus](https://add0n.com/stylus.html) 或 [Stylish](https://userstyles.org/)）添加的样式。 +- 作者来源 + - : 作者来源是文档中包含的所有样式的样式来源，无论是嵌入在 {{Glossary("HTML")}} 中还是从外部样式表文件加载的。 + +当移除样式时（如使用 {{cssxref("unset")}} 或 {{cssxref("revert")}} 关键字时），样式来源用于确定在样式层叠回溯过程中停止的地方。 + +## 参见 + +- [CSS 层叠与继承：层叠来源](https://drafts.csswg.org/css-cascade-4/#cascading-origins) diff --git a/files/zh-cn/glossary/svn/index.md b/files/zh-cn/glossary/svn/index.md index 658e9cfb2a9a6c..b245495e7deb91 100644 --- a/files/zh-cn/glossary/svn/index.md +++ b/files/zh-cn/glossary/svn/index.md @@ -1,13 +1,15 @@ --- title: SVN slug: Glossary/SVN +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -Apache Subversion (**SVN**) 是一个开源免费的源代码控制管理（{{Glossary("SCM")}}）系统。它允许开发者们保留文本和代码修改历史。虽然 SVN 可以操作二进制文件，但是我们不推荐这些文件使用 SVN。 +Apache Subversion（**SVN**）是一个开源免费的源代码控制管理（{{Glossary("SCM")}}）系统。它允许开发者保留文本和代码修改历史。虽然 SVN 可以处理二进制文件，但是我们不推荐将 SVN 用于这些文件。 ## 参见 -- 在维基百科上的 [Apache Subversion](https://zh.wikipedia.org/wiki/Subversion) +- 维基百科上的 [Apache Subversion](https://zh.wikipedia.org/wiki/Subversion) - [官方网站](https://subversion.apache.org/) diff --git a/files/zh-cn/glossary/symbol/index.md b/files/zh-cn/glossary/symbol/index.md new file mode 100644 index 00000000000000..c86137bcdc472f --- /dev/null +++ b/files/zh-cn/glossary/symbol/index.md @@ -0,0 +1,22 @@ +--- +title: 符号 +slug: Glossary/Symbol +l10n: + sourceCommit: 3cfbf63f7a2779fddf992863a96cb8947d407cf2 +--- + +{{GlossarySidebar}} + +**符号**是表示唯一、不可伪造标识的数据类型。它们有时被称为*原子*。 + +由于符号是唯一且不可伪造的，因此只有当你拥有原始标识的引用时，才能读取与符号关联的属性值。 + +在 JavaScript 中，`symbol` 是[原始类型](/zh-CN/docs/Glossary/Primitive)之一，可以使用 [`Symbol()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol) 工厂方法创建。该方法每次返回一个不同的符号，可以用作对象的键，而永远不会与其他属性发生意外冲突。 + +JavaScript 还定义了两种其他类别的符号：内置通用符号和注册符号。有关更多信息，参见 {{jsxref("Symbol")}} 参考。 + +## 参见 + +- 维基百科上的[数据类型](https://zh.wikipedia.org/wiki/資料類型) +- 维基百科上的[符号]() +- JavaScript 全局对象 {{jsxref("Symbol")}} diff --git a/files/zh-cn/glossary/symmetric-key_cryptography/index.md b/files/zh-cn/glossary/symmetric-key_cryptography/index.md new file mode 100644 index 00000000000000..47eac996263316 --- /dev/null +++ b/files/zh-cn/glossary/symmetric-key_cryptography/index.md @@ -0,0 +1,26 @@ +--- +title: 对称密钥密码 +slug: Glossary/Symmetric-key_cryptography +l10n: + sourceCommit: aabd56c814d580e577199239fb27e54cc168cf55 +--- + +{{GlossarySidebar}} + +对称密钥密码指使用相同密钥进行密码和解密的密码算法。该密钥通常称为“对称密钥”或“秘密密钥”。 + +这通常与{{Glossary("public-key cryptography", "非对称密钥密码")}}形成对比——在非对称密钥密码中，密钥成对生成，一个密钥进行的转换只能通过另一个密钥来逆转。 + +对称密钥算法在正确使用时应该是安全的，并且效率很高，因此可以在不影响性能的情况下密码大量数据。 + +目前使用的大多数对称密钥算法是分组{{Glossary("Cipher", "密码")}}：这意味着它们一次密码一个块的数据。每个块的大小是固定的，由算法确定：例如 AES 使用 16 字节的块。分组密码总是与一个指定了如何安全地密码超过块大小的消息的[模式](/zh-CN/docs/Glossary/Block_cipher_mode_of_operation)一起使用。例如，AES 是一种密码，而 CTR、CBC 和 GCM 都是模式。使用不适当的模式或错误地使用模式，可能会完全破坏底层密码提供的安全性。 + +## 参见 + +- [Web Crypto API](/zh-CN/docs/Web/API/Web_Crypto_API) +- [SubtleCrypto 支持的算法](/zh-CN/docs/Web/API/SubtleCrypto#supported_algorithms) +- 术语 + + - {{Glossary("Block cipher mode of operation", "分组密码工作模式")}} + - {{Glossary("Cryptography", "密码学")}} + - {{Glossary("Cryptographic hash function", "密码散列函数")}} diff --git a/files/zh-cn/glossary/telnet/index.md b/files/zh-cn/glossary/telnet/index.md new file mode 100644 index 00000000000000..70e658cbc1a438 --- /dev/null +++ b/files/zh-cn/glossary/telnet/index.md @@ -0,0 +1,14 @@ +--- +title: Telnet +slug: Glossary/Telnet +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**Telnet** 是一个用于访问远程计算机的命令行工具和底层 TCP/IP 协议。 + +## 参见 + +- 维基百科上的 [Telnet](https://zh.wikipedia.org/wiki/Telnet) diff --git a/files/zh-cn/glossary/thread/index.md b/files/zh-cn/glossary/thread/index.md index a8da3eab52e787..04a69ddddf6256 100644 --- a/files/zh-cn/glossary/thread/index.md +++ b/files/zh-cn/glossary/thread/index.md @@ -1,19 +1,21 @@ --- title: 线程 slug: Glossary/Thread +l10n: + sourceCommit: 3734941b8a491f3d95741669d68b827602f83954 --- {{GlossarySidebar}} 计算机科学中的线程是同时运行多个任务或程序的执行。每个能够执行代码的单元称为**线程**。 -**{{Glossary("Main_thread", "主线程")}}** 是浏览器用来处理用户事件、渲染和绘制显示以及运行组成典型网页或应用程序的大部分代码的线程。因为这些事情都发生在一个线程中，一个缓慢的网站或者应用程序脚本会减低整个浏览器的速度；更糟糕的是，如果一个网站或者应用程序脚本进入无限循环，整个浏览器将会挂起。这导致了令人沮丧、迟缓（或更糟）的用户体验。 +[**主线程**](/zh-CN/docs/Glossary/Main_thread)是浏览器用来处理用户事件、渲染和绘制显示以及运行组成典型网页或应用程序的大部分代码的线程。因为这些事情都发生在一个线程中，一个缓慢的网站或者应用程序脚本会减低整个浏览器的速度；更糟糕的是，如果一个网站或者应用程序脚本进入无限循环，整个浏览器将会挂起。这导致了令人沮丧、迟缓（或更糟）的用户体验。 -然而，现代 {{Glossary("JavaScript")}} 提供了创建额外线程的方式，每个线程独立执行，同时可能相互通信。这是使用例如 **{{DOMxRef("Web_Workers_API", "web workers")}}** 等技术实现的，这些技术可以用来衍生出一个在自己的线程中与主线程同时运行的子程序。这允许缓慢、复杂或者长时间运行的任务独立于主线程执行，以保护网站或者应用程序的整体性能，以及浏览器的整体性能。这也允许个人利用现代多核处理器。 +然而，现代 {{Glossary("JavaScript")}} 提供了创建额外线程的方式，每个线程独立执行，同时可能相互通信。这是使用如 [Web Worker](/zh-CN/docs/Web/API/Web_Workers_API) 等技术实现的，这些技术可以用来衍生出一个在自己的线程中与主线程同时运行的子程序。这允许缓慢、复杂或者长时间运行的任务独立于主线程执行，以保护网站或者应用程序的整体性能，以及浏览器的整体性能。这也允许 Web 应用利用现代多核处理器：提供在甚至比单核上运行的多线程应用更好的性能。 -可以创建一种称为 **{{DOMxRef("Service_Worker_API", "service worker")}}** 的特殊类型的 `worker`，可以在即使用户当前不使用该网站的情况下在网站背后运行（在用户许可的情况下）。这用于创建在用户与网站交互不活跃的情况下当发生事情时能够通知用户的网站。例如通知用户收到了电子邮件，即使他们当前没有登录邮箱服务。 +一种特殊类型的 worker 被称为 **[Service Worker](/zh-CN/docs/Web/API/Service_Worker_API)**，可以被网站留下，以便在用户当前不使用该网站的情况下（在用户许可的情况下）运行。这用于创建能够在用户不活跃地与网站交互时通知用户发生事情的网站。例如，即使用户当前没有登录邮箱服务，也可以通知用户收到了新的电子邮件。 -总体而言，可以观察到，我们的操作系统中的这些线程非常有帮助。它们有助于最大限度地减少上下文切换时间，实现更高效的通信，并允许进一步使用多处理器体系结构。 +总的来说，可以观察到，我们的操作系统中的这些线程非常有帮助。它们有助于最大限度地减少上下文切换时间，实现更高效的通信，并允许进一步使用多处理器体系结构。 ## 参见 @@ -21,5 +23,4 @@ slug: Glossary/Thread - [Web worker API](/zh-CN/docs/Web/API/Web_Workers_API) - [Service worker API](/zh-CN/docs/Web/API/Service_Worker_API) - [术语表](/zh-CN/docs/Glossary) - - {{Glossary("Main_thread", "主线程")}} diff --git a/files/zh-cn/glossary/time_to_interactive/index.md b/files/zh-cn/glossary/time_to_interactive/index.md new file mode 100644 index 00000000000000..e5cf5ec35dc597 --- /dev/null +++ b/files/zh-cn/glossary/time_to_interactive/index.md @@ -0,0 +1,22 @@ +--- +title: 可交互时间 +slug: Glossary/Time_to_interactive +l10n: + sourceCommit: 835d6632d59993861a0458510402787f8a2c3cb3 +--- + +{{GlossarySidebar}} + +**可交互时间**（TTI）是一种非标准的 Web 性能“进度”指标，定义为最后一个[长任务](/zh-CN/docs/Web/API/PerformanceLongTaskTiming)完成后，经过 5 秒的网络和主线程空闲时间。 + +TTI 由 Web 孵化器社区组于 2018 年提出。它旨在提供一个描述页面或应用程序何时包含有用的内容、主线程何时处于空闲状态并可以响应用户交互（包括注册事件处理器）的指标。 + +#### 注意 + +TTI 是通过利用[长任务 API](/zh-CN/docs/Web/API/PerformanceLongTaskTiming) 中的信息推导出来的。尽管某些性能监控工具中提供了 TTI，但在撰写本文时，TTI 并不是属于任何官方 Web 规范。 + +## 参见 + +- Web 孵化器社区组关于 [TTI 的定义](https://github.com/WICG/time-to-interactive) +- Radimir Bitsov 写的[可交互时间——以人为本的单位](https://calibreapp.com/blog/time-to-interactive) +- [计算 TTI](https://web.dev/articles/user-centric-performance-metrics#tracking_tti) diff --git a/files/zh-cn/glossary/tofu/index.md b/files/zh-cn/glossary/tofu/index.md new file mode 100644 index 00000000000000..637b4e49cefed2 --- /dev/null +++ b/files/zh-cn/glossary/tofu/index.md @@ -0,0 +1,16 @@ +--- +title: 首次使用时信任 +slug: Glossary/TOFU +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**TOFU**（首次使用时信任）是一种客户端需要与未知服务器建立信任关系的安全模型。为了做到这一点，客户端将查找本地存储的标识符（例如公钥）。如果找到标识符，客户端可以建立连接。如果没有找到标识符，客户端可以提示用户确定是否应该信任标识符。 + +TOFU 被用于 SSH 协议和 {{HTTPHeader("Strict-Transport-Security")}}（{{Glossary("HSTS")}}）——浏览器将遵守重定向规则。 + +## 参见 + +- 维基百科上的 [TOFU](https://en.wikipedia.org/wiki/Trust_on_first_use) diff --git a/files/zh-cn/glossary/trident/index.md b/files/zh-cn/glossary/trident/index.md new file mode 100644 index 00000000000000..7cd5c214796b28 --- /dev/null +++ b/files/zh-cn/glossary/trident/index.md @@ -0,0 +1,20 @@ +--- +title: Trident +slug: Glossary/Trident +l10n: + sourceCommit: f401c6d8aeb1f79b072e7e8296386f17b61e8ac1 +--- + +{{GlossarySidebar}} + +**Trident**（或 _MSHTML_）是一个用于驱动 {{Glossary("Microsoft Internet Explorer", "Internet Explorer")}} 的专有{{Glossary("Engine/Rendering", "渲染引擎")}}。一个名为 _EdgeHTML_ 的{{Glossary("fork", "分叉")}}取代了 Trident，成为 Internet Explorer 的继任者——{{Glossary("Microsoft Edge", "Edge")}}（后来被称为“Microsoft Edge Legacy”）。 + +Trident 也在 Microsoft Edge 中“IE 模式”打开时使用。这是一个允许 Edge 使用 Trident 渲染网页的特性，以为旧版网站提供兼容性。Trident 会继续接受安全更新直至 2029 年，以支持 IE 模式的使用。 + +## 参见 + +- 维基百科上的 [Trident]() +- 术语 + - {{Glossary("Microsoft Internet Explorer")}} + - {{Glossary("Microsoft Edge")}} + - {{Glossary("Engine/Rendering", "渲染引擎")}} diff --git a/files/zh-cn/glossary/truthy/index.md b/files/zh-cn/glossary/truthy/index.md index fed435f62ea0b3..1dc741f97db2ae 100644 --- a/files/zh-cn/glossary/truthy/index.md +++ b/files/zh-cn/glossary/truthy/index.md @@ -1,17 +1,19 @@ --- -title: Truthy（真值） +title: 真值 slug: Glossary/Truthy +l10n: + sourceCommit: be1fe9c7a0f93bab48958f8da3c520ab9bcf6de1 --- {{GlossarySidebar}} -在 {{Glossary("JavaScript")}} 中，**truthy**（真值）指的是在{{Glossary("Boolean", "布尔值")}}上下文中，转换后的值为 `true` 的值。被定义为{{Glossary("Falsy", "假值")}}以外的任何值都为真值。（即所有除 `false`、`0`、`-0`、`0n`、`""`、`null`、`undefined` 和 `NaN` 以外的皆为真值）。 +在 {{Glossary("JavaScript")}} 中，**真值**是在{{Glossary("Boolean", "布尔值")}}上下文中，转换后的值为 `true` 的值。被定义为{{Glossary("Falsy", "假值")}}以外的任何值都为真值。（即所有除 `false`、`0`、`-0`、`0n`、`""`、`null`、`undefined` 和 `NaN` 以外的皆为真值）。 {{Glossary("JavaScript")}} 在布尔值上下文中使用{{Glossary("Type_Coercion", "强制类型转换")}}。 -JavaScript 中的*真值*示例如下（将被转换为 `true`，因此 `if` 后的代码段将被执行）： +JavaScript 中的*真值*示例如下（这些值会被强制转换为 `true`，因此 `if` 后的代码段将被执行）： -```js +```js-nolint if (true) if ({}) if ([]) @@ -31,12 +33,12 @@ if (-Infinity) 如果第一个对象为真值，则[逻辑与运算](/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_AND)返回第二个操作数。 -```js -true && "dog" -// returns "dog" +```js-nolint +true && "狗狗" +// 返回“狗狗” -[] && "dog" -// returns "dog" +[] && "狗狗" +// 返回“狗狗” ``` ## 参见 @@ -44,3 +46,4 @@ true && "dog" - {{Glossary("Falsy", "假值")}} - {{Glossary("Type_Coercion", "强制类型转换")}} - {{Glossary("Boolean", "布尔值")}} +- [布尔值强制转换](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean#布尔值强制转换) diff --git a/files/zh-cn/glossary/ui/index.md b/files/zh-cn/glossary/ui/index.md index 7309d10611d5af..53961d1f4eb857 100644 --- a/files/zh-cn/glossary/ui/index.md +++ b/files/zh-cn/glossary/ui/index.md @@ -1,11 +1,13 @@ --- title: UI slug: Glossary/UI +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -_用户界面_ (UI) 是实现人机交互的一类事物的总称。在计算机世界中，UI 可以是来自键盘、摇杆、屏幕或程序中的任何东西。在计算机软件中，UI 可以是命令行、网页、用户、用户输入的表格或是任何应用的前端。 +_用户界面_（UI）是实现人机交互的一类事物的总称。在计算机世界中，UI 可以是来自键盘、摇杆、屏幕或程序中的任何东西。在计算机软件中，UI 可以是命令行、网页、用户、用户输入的表格或是任何应用的前端。 ## 参见 diff --git a/files/zh-cn/glossary/utf-8/index.md b/files/zh-cn/glossary/utf-8/index.md index f3e6d4b5dcd870..1df7a455029aa4 100644 --- a/files/zh-cn/glossary/utf-8/index.md +++ b/files/zh-cn/glossary/utf-8/index.md @@ -1,15 +1,17 @@ --- title: UTF-8 slug: Glossary/UTF-8 +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -UTF-8 (UCS Transformation Format 8) 是万维网上最常用的{{Glossary("Character encoding", "字符编码")}}。每个字符由 1 到 4 个字节表示。UTF-8 与 {{Glossary("ASCII")}} 向后兼容，可以表示任何标准的 Unicode 字符。 +UTF-8 (UCS 转换格式 8) 是万维网上最常用的{{Glossary("Character encoding", "字符编码")}}。每个字符由 1 到 4 个字节表示。UTF-8 与 {{Glossary("ASCII")}} 向后兼容，可以表示任何标准的 Unicode 字符。 -前 128 个 UTF-8 字符与前 128 个 ASCII 字符 (编号为 0-127) 精确匹配，这意味着现有的 ASCII 文本已经是有效的 UTF-8。所有其他字符都使用 2 到 4 个字节。每个字节都有一些用于编码目的的保留位。由于非 ASCII 字符需要一个以上的字节来存储，如果字节被分隔而不重组，那么它们就会有损坏的风险。 +前 128 个 UTF-8 字符会与前 128 个 ASCII 字符（编号为 0-127）精确匹配，意味着现有的 ASCII 文本已经是有效的 UTF-8。所有其他字符都使用 2 到 4 个字节。每个字节都有一些用于编码目的的保留位。由于非 ASCII 字符需要一个以上的字节来存储，如果字节被分隔而不重组，那么它们就会有损坏的风险。 ## 参见 -- [UTF-8](https://zh.wikipedia.org/wiki/UTF-8) on Wikipedia -- [FAQ about UTF-8 on Unicode website](https://www.unicode.org/faq/utf_bom.html#UTF8) +- 维基百科上的 [UTF-8](https://zh.wikipedia.org/wiki/UTF-8) +- [Unicode 网站上关于 UTF-8 的常见问答](https://www.unicode.org/faq/utf_bom.html#UTF8) diff --git a/files/zh-cn/learn/javascript/building_blocks/event_bubbling/index.md b/files/zh-cn/learn/javascript/building_blocks/event_bubbling/index.md new file mode 100644 index 00000000000000..5c6311e9a2771f --- /dev/null +++ b/files/zh-cn/learn/javascript/building_blocks/event_bubbling/index.md @@ -0,0 +1,364 @@ +--- +title: 事件冒泡 +slug: Learn/JavaScript/Building_blocks/Event_bubbling +--- + +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Events","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}} + +## 事件冒泡 + +事件冒泡描述了浏览器如何处理针对嵌套元素的事件。 + +### 在父元素上设置监听器 + +考虑像这样的网页： + +```html +
+ +
+

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

+    
+  

+  

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

+    
+  

+  

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

-

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

-    
-  

-  

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

-    
-  

-  

-
-```
-
-```js
-const output = document.querySelector("#output");
-function handleClick(e) {
-  output.textContent += `你在 ${e.currentTarget.tagName} 元素上进行了点击\n`;
-}
-
-const container = document.querySelector("#container");
-const button = document.querySelector("button");
-
-document.body.addEventListener("click", handleClick, { capture: true });
-container.addEventListener("click", handleClick, { capture: true });
-button.addEventListener("click", handleClick);
-```
-
-{{ EmbedLiveSample('事件捕获', '100%', 200, "", "") }}
-
-在这种情况下，消息出现的顺序发生了颠倒：`` 事件处理器首先触发，然后是 `
` 的，最后是 `
");
+let node = $("
");
 node.addClass(data.className);
-node.text("Your favorite color is now " + data.color);
+node.text(`你最喜欢的颜色现在是${data.color}`);
 ```
 
 ## 处理 HTML 内容
 
-当你知道处理外部源的内容是 HTML 的时候，添加到页面之前净化 HTML 是很关键的。净化 HTML 的最好办法是使用 HTML 净化的库或者一个带有 HTML 净化特性的模板引擎。在这一节，我们来看一些合适的工具以及使用方法。
+当你知道处理外部源的内容是 HTML 的时候，添加到页面之前净化 HTML 是很关键的。净化 HTML 的最好办法是使用 HTML 净化库或具有 HTML 净化特性的模板引擎。在这一节，我们将介绍一些合适的工具以及它们的使用方法。
 
 ### HTML 净化
 
-An HTML sanitization library strips anything that could lead to script execution from HTML, so you can safely inject complete sets of HTML nodes from a remote source into your DOM. [DOMPurify](https://github.com/cure53/DOMPurify),是一个 HTML 净化的库，可以脱离任意会导致脚本执行的元素，以便安全注入远端源到 HTML 节点，这个库被很多不同的安全专家评估过，是很适合这种任务扩展的库。
+HTML 净化库会从 HTML 中删除任何可能导致脚本执行的内容，因此可以安全地将来自远程源的整套 HTML 节点注入 DOM。[DOMPurify](https://github.com/cure53/DOMPurify) 已通过多位安全专家的审查，是一个适合在扩展程序中执行此任务的库。
 
-[DOMPurify](https://github.com/cure53/DOMPurify) 有一个简约版用于生产环境，purify.min.js. 你可以使用这个版本来适配你的扩展，例如你可以这样添加：
+为便于生产使用，[DOMPurify](https://github.com/cure53/DOMPurify) 提供了极简化版本：purify.min.js。你可以用最适合扩展的方式使用该脚本。例如，可以将其添加为内容脚本：
 
 ```json
 "content_scripts": [
@@ -78,31 +75,29 @@ An HTML sanitization library strips anything that could lead to script execution
 之后，在 myinjectionscript.js 中你可以读取外部 HTML 并净化，之后添加到页面的 DOM 中：
 
 ```js
-var elem = document.createElement("div");
-var cleanHTML = DOMPurify.sanitize(externalHTML);
+let elem = document.createElement("div");
+let cleanHTML = DOMPurify.sanitize(externalHTML);
 elem.innerHTML = cleanHTML;
 ```
 
-你可以使用任何方法添加净化后的 HTML 到 DOM，例如 jQuery’s `.html()` 方法。注意这种情况需要使用 Remember though that the `SAFE_FOR_JQUERY` 标记：
+你可以使用任何方法添加净化后的 HTML 到 DOM，例如 jQuery 的 `.html()` 函数。注意，这种情况下需要使用 `SAFE_FOR_JQUERY` 标志：
 
 ```js
-var elem = $("
");
-var cleanHTML = DOMPurify.sanitize(externalHTML, { SAFE_FOR_JQUERY: true });
+let elem = $("
");
+let cleanHTML = DOMPurify.sanitize(externalHTML, { SAFE_FOR_JQUERY: true });
 elem.html(cleanHTML);
 ```
 
 ### 模板引擎
 
-另一个常见的模式是对一个页面创建本地 HTML 模板并通过远端的值来填空。这种方法被广泛应用，应该注意去避免构造函数的使用，可能会导致执行代码的注入。当模板引擎使用构造函数插入 HTML 到文档的时候会发生这种情况，如果用来注入原始 HTML 的变量是远端代码，这就属于上面介绍中的安全风险。
+另一个常见的模式是对一个页面创建本地 HTML 模板并通过远端的值来填空。这种方法被广泛应用，应该注意去避免构建函数的使用，可能会导致执行代码的注入。当模板引擎使用构建函数插入未处理的 HTML 到文档的时候会发生这种情况。如果用来注入原始 HTML 的变量是远端代码，则会面临引言中提到的同样的安全风险。
 
-例如，当使用[mustache templates](https://mustache.github.io/) 你必须使用两个花括号`\{{variable}}`,来去掉任何 HTML。使用三个花括号`\{\{{variable}}}` 必须避免注入原始 HTML 字符串到模板。
+例如，在使用 [mustache 模板](https://mustache.github.io/)时，必须使用双大括号，即 `\{{variable}}`，它可以转义任何 HTML。必须避免使用三重大括号（`\{\{{variable}}}`），因为这会注入原始 HTML 字符串，并可能在模板中添加可执行代码。[Handlebars](https://handlebarsjs.com/) 的工作方式与此类似，双大括号中的变量（`\{{variable}}`）会被转义。而三重大括号中的变量则是原始变量，必须避免使用。此外，如果你使用 `Handlebars.SafeString` 创建了一个 Handlebars 辅助函数，请使用 `Handlebars.escapeExpression()` 来转义传递给辅助函数的任何动态参数。之所以需要这样做，是因为 `Handlebars.SafeString` 产生的变量被认为是安全的，而且在插入双大括号中时不会转义。
 
-[Handlebars](http://handlebarsjs.com/) 工作原理也是类似，`\{{variable}}` 。同时，如果创造了 Handlebars helper 使用 `Handlebars.SafeString` 使用`Handlebars.escapeExpression()` 来消除任何传给 helper 的动态参数。`Handlebars.SafeString` 的结果被认为是安全的，当插入到双 handlebars 的时候就不会做消除动作。
+在其他模板系统中也有类似的构建函数，需要有同样的考虑。
 
-在其他模板系统中也有类似的构造函数，需要有同样的考虑。
+## 扩展阅读
 
-## 其他参考
+关于这个主题更多的信息，可以查看以下文章：
 
-关于这个主题更多的信息，可以查看下面的文章
-
-- [XSS (Cross Site Scripting) Prevention Cheat Sheet](https://owasp.org/www-community/xss-filter-evasion-cheatsheet)
+- [XSS（跨站脚本攻击）防御小窍门](https://owasp.org/www-community/xss-filter-evasion-cheatsheet)
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/what_are_webextensions/index.md b/files/zh-cn/mozilla/add-ons/webextensions/what_are_webextensions/index.md
index b1e7d099002ec1..c9485de25d38ba 100644
--- a/files/zh-cn/mozilla/add-ons/webextensions/what_are_webextensions/index.md
+++ b/files/zh-cn/mozilla/add-ons/webextensions/what_are_webextensions/index.md
@@ -1,53 +1,55 @@
 ---
 title: 扩展是什么？
 slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions
+l10n:
+  sourceCommit: 01c27dc307a32e92e489349cf0ff67961083c8c7
 ---
 
 {{AddonSidebar}}
 
-> **备注：** 如果你对浏览器扩展的基础概念已经熟悉，跳过这个部分去学习[扩展文件是如何组织在一起的](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension)。然后，利用[参考文档](/zh-CN/docs/Mozilla/Add-ons/WebExtensions#reference)去构建你的扩展。访问[扩展工作坊](https://extensionworkshop.com/?utm_source=developer.mozilla.org&utm_medium=documentation&utm_campaign=your-first-extension)学习关于浏览器扩展工作流，测试，发布的更多内容。
+> **备注：** 如果你对浏览器扩展的基础概念已经熟悉，跳过这个部分去学习[扩展文件是如何组织在一起的](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension)。然后，利用[参考资料](/zh-CN/docs/Mozilla/Add-ons/WebExtensions#参考资料)去构建你的扩展。访问[扩展工作坊](https://extensionworkshop.com/?utm_source=developer.mozilla.org&utm_medium=documentation&utm_campaign=your-first-extension)学习关于浏览器扩展工作流，测试，发布的更多内容。
 
-扩展为浏览器添加了特性与功能。它通过我们所熟悉的 Web 技术-HTML，CSS 还有 JavaScript 来创建。扩展可以利用与 JavaScript 相同的网页 API，但是扩展也可以访问它自己专有的 JavaScript API。这意味着，和在网页里编码相比，在扩展中你可以做到更多的事情。以下是其中你可以做到的一些事情：
+扩展为浏览器添加了特性与功能。它通过我们所熟悉的 Web 技术——HTML、CSS 和 JavaScript 来创建。扩展可以利用与网页中的 JavaScript 相同的 Web API，但是扩展也可以访问它自己专有的 JavaScript API。这意味着，和在网页里编码相比，在扩展中你可以做到更多的事情。以下是其中你可以做到的一些事情：
 
-**提升或者补充网站功能**: 利用扩展来实现额外的浏览器内特性或者来自你网站的信息。允许用户搜集他们访问过的页面细节来提升你所提供的服务。
+**增强或者完善网站功能**：利用扩展来实现额外的浏览器内特性或者来自你网站的信息。允许用户搜集他们访问过的页面细节来增强你所提供的服务。
 
-![Amazon 附加组件示例提供比价功能](amazon_add_on.png)
+示例：[Grammarly for Firefox](https://addons.mozilla.org/firefox/addon/grammarly-1/)、[Enhancer for YouTube](https://addons.mozilla.org/firefox/addon/enhancer-for-youtube/) 和 [Control Panel for Twitter](https://addons.mozilla.org/firefox/addon/control-panel-for-twitter/)。
 
-示例：[亚马逊助手](https://addons.mozilla.org/zh-CN/firefox/addon/amazon-browser-bar/)，[OneNote Web Clipper](https://addons.mozilla.org/zh-CN/firefox/addon/onenote-clipper/)，[Grammarly for Firefox](https://addons.mozilla.org/zh-CN/firefox/addon/grammarly-1/)
+![Grammarly 扩展在 GitHub 编辑器中提供编辑提示。](grammarly-in-github-editor.png)
 
-**让用户展现他们的个性**: 浏览器扩展可以操控网页的内容；例如，让用户在每个他们访问的页面上添加最喜欢的 logo 或者图片作为背景。扩展也可以让用户更新 Firefox 的界面，就像独立的[主题扩展](https://extensionworkshop.com/documentation/themes/)一样。
+**让用户展现他们的个性**：浏览器扩展可以操控网页的内容；例如，让用户在每个他们访问的页面上添加最喜欢的 logo 或者图片作为背景。扩展也可以让用户更新 Firefox 的界面，就像独立的[主题扩展](https://extensionworkshop.com/documentation/themes/)一样。
 
-![My Web New Tab 附加组件展现蝙蝠侠主题](myweb_new_tab_add_on.png)
+示例：[Tabliss](https://addons.mozilla.org/firefox/addon/tabliss/)、[Stylus](https://addons.mozilla.org/firefox/addon/styl-us/) 和 [Emoji](https://addons.mozilla.org/firefox/addon/emoji-sav/)。
 
-示例：[MyWeb New Tab](https://addons.mozilla.org/zh-CN/firefox/addon/myweb-new-tab/), [Tabliss](https://addons.mozilla.org/zh-CN/firefox/addon/tabliss/), 和 [VivaldiFox](https://addons.mozilla.org/zh-CN/firefox/addon/vivaldifox/)
+![由 Tabliss 扩展设计的新标签页，显示带有时间和问候信息的林地图片。](tabliss_new_tab.png)
 
-**从网页中添加或者删除内容**: 你可能想要帮助用户从网页中阻止一些侵扰的广告，当网页中提到一个国家或者城市的时候提供旅游指南，或者重组页面的内容来提供一个连续的阅读体验。利用可以访问和更新一个页面里的 HTML 和 CSS 的能力，扩展可以帮助用户以他们想要的形式来查看网页。
+**在网页中添加或者删除内容**：你可能想要帮助用户从网页中阻止一些侵扰的广告、在网页中提到一个国家或者城市的时候提供旅游指南，或者重组页面的内容来提供一致的阅读体验。利用可以访问和更新页面中的 HTML 和 CSS 的能力，扩展可以帮助用户以他们想要的形式来浏览网页。
 
-![uBlock origin 附加组件示例和拦截跟踪器统计](ublock_origin_add_on.png)
+示例：[uBlock Origin](https://addons.mozilla.org/zh-CN/firefox/addon/ublock-origin/)、[Reader](https://addons.mozilla.org/firefox/addon/reader/) 和 [Toolbox for Google Play Store™](https://addons.mozilla.org/firefox/addon/toolbox-google-play-store/)
 
-示例：[uBlock Origin](https://addons.mozilla.org/zh-CN/firefox/addon/ublock-origin/), [Reader](https://addons.mozilla.org/zh-CN/firefox/addon/reader/), 和 [Toolbox for Google Play Store™](https://addons.mozilla.org/zh-CN/firefox/addon/toolbox-google-play-store/)
+![uBlock Origin 弹出窗口显示了被阻止的跟踪器统计信息。](ublock_origin_add_on.png)
 
-**添加工具和新的浏览特性**: 给任务面板添加新特性，或者从 URL 地址，超链接，或者页面文字生成二维码。有了灵活的界面选项和 [WebExtensions APIs](/zh-CN/docs/Mozilla/Add-ons/WebExtensions) 的能力，你可以很容易的向浏览器添加新的特性。并且，你可以改善几乎任何网站的特性和功能，而不必是你自己的网站。
+**添加工具和新的浏览特性**：给任务面板添加新特性，或者从 URL 地址、超链接或者页面文字生成二维码。借助灵活的用户界面选项和 [WebExtensions API](/zh-CN/docs/Mozilla/Add-ons/WebExtensions) 的能力，你可以很容易的向浏览器添加新的特性。并且，你可以增强几乎任何网站的特性和功能，而不必是你自己的网站。
 
-![二维码生成器附加组件示例](qr_code_image_generator_add_on.png)
+示例：[Worldwide Radio](https://addons.mozilla.org/firefox/addon/worldwide-radio/)、[Flagfox](https://addons.mozilla.org/firefox/addon/flagfox/) 和 [Tomato Clock](https://addons.mozilla.org/firefox/addon/tomato-clock/)。
 
-示例：[Swimlanes for Trello](https://addons.mozilla.org/zh-CN/firefox/addon/swimlanes-for-trello/) and [Tomato Clock](https://addons.mozilla.org/zh-CN/firefox/addon/tomato-clock/)
+![Worldwide Radio 扩展显示了加拿大的广播电台列表，并选择了 RadioOne 进行播放。](worldwide_radio_extension.png)
 
-**游戏**: 通过离线游玩的特性或者探索新游戏的可能性来提供传统计算机游戏的功能；例如，把游戏性融入到每天的网页浏览中。
+**游戏**：通过离线游玩的特性或者探索新游戏的可能性来提供传统计算机游戏；例如，把游戏融入到每天的网页浏览中。
 
-![](asteroids_in_popup_add_on_.png)
+示例：[RPG Game - Dedalium by Loycom Games](https://addons.mozilla.org/firefox/addon/rpg-game-online-dedalium/)、[Solitaire Card Game](https://addons.mozilla.org/firefox/addon/solitaire-spider-freecell/) 和 [2048 Prime](https://addons.mozilla.org/firefox/addon/2048-prime/)。
 
-示例：[Asteroids in Popup](https://addons.mozilla.org/zh-CN/firefox/addon/asteroids-in-popup/), [Solitaire Card Game New Tab](https://addons.mozilla.org/zh-CN/firefox/addon/solitaire-card-game-new-tab/), 和 [2048 Prime](https://addons.mozilla.org/zh-CN/firefox/addon/2048-prime/).
+![Dedalium 弹出窗口显示播放状态，并提供开始战斗或冒险的选项。](dedalium_popup.png)
 
-**添加开发工具**: 你可以为你的业务提供网站开发工具或者开发一个有用的技术或者你想分享的网站开发方法。无论如何，你可以通过在开发者工具栏上添加一个新的标签来增强内置的 Firefox 开发者工具。
+**添加开发工具**：你可以为你的业务提供网站开发工具或者开发一个有用的技术或者你想分享的网站开发方法。无论如何，你可以通过在开发者工具栏上添加一个新的标签来增强内置的 Firefox 开发者工具。
 
-![axe 无障碍功能测试附加组件示例](axe_developer_tools_add_on.png)
+示例：[aXe Developer Tools](https://addons.mozilla.org/firefox/addon/axe-devtools/)、[Web Developer](https://addons.mozilla.org/firefox/addon/web-developer/) 和 [Web React Developer Tools](https://addons.mozilla.org/firefox/addon/react-devtools/)。
 
-示例：[Web Developer](https://addons.mozilla.org/zh-CN/firefox/addon/web-developer/), [Web React Developer Tools](https://addons.mozilla.org/zh-CN/firefox/addon/react-devtools/), 和 [aXe Developer Tools](https://addons.mozilla.org/zh-CN/firefox/addon/axe-devtools/)
+![Axe 辅助功能测试扩展显示在网页中发现的辅助功能问题。](axe_developer_tools_add_on.png)
 
-Firefox 扩展使用 [WebExtensions APIs](/zh-CN/docs/Mozilla/Add-ons/WebExtensions)来构建，这是一种用以开发扩展的跨浏览器系统。在很大程度上，它与 Google Chrome 和 Opera 所支持的[扩展 API](https://developer.chrome.com/extensions) 兼容。在大多数情况下，为这些浏览器所写的扩展只需要少量[修改](https://extensionworkshop.com/documentation/develop/porting-a-google-chrome-extension/)就可以在 Firefox 和 Microsoft Edge 上运行。这些 API 也完全兼容[多进程 Firefox](/zh-CN/docs/Mozilla/Firefox/Multiprocess_Firefox)。
+Firefox 扩展使用 [WebExtensions API](/zh-CN/docs/Mozilla/Add-ons/WebExtensions) 来构建，这是一种用以开发扩展的跨浏览器系统。在很大程度上，它与 Google Chrome 和 Opera 所支持的[扩展 API](https://developer.chrome.com/extensions) 兼容。在大多数情况下，为这些浏览器所写的扩展只需要少量[修改](https://extensionworkshop.com/documentation/develop/porting-a-google-chrome-extension/)就可以在 Firefox 和 Microsoft Edge 上运行。
 
-如果你有想法或者问题，或者在[迁移旧的附加组件到 WebExtensions API](https://extensionworkshop.com/documentation/develop/porting-a-legacy-firefox-extension)时需要帮助，可以在 [dev-addons 讨论版块](https://discourse.mozilla.org/c/add-ons/35)或者 [Matrix](https://chat.mozilla.org/#/room/#addons:mozilla.org) 上的 [Add-ones room](https://wiki.mozilla.org/Matrix) 与我们联系。
+如果你有想法或者问题，可以在 [dev-addons 讨论版块](https://discourse.mozilla.org/c/add-ons/35)或者 [Matrix](https://chat.mozilla.org/#/room/#addons:mozilla.org) 上的 [Add-ones room](https://wiki.mozilla.org/Matrix) 与我们联系。
 
 ## 接下来呢？
 
diff --git a/files/zh-cn/mozilla/firefox/releases/126/index.md b/files/zh-cn/mozilla/firefox/releases/126/index.md
new file mode 100644
index 00000000000000..64ad596f87cfc8
--- /dev/null
+++ b/files/zh-cn/mozilla/firefox/releases/126/index.md
@@ -0,0 +1,100 @@
+---
+title: Firefox 126 的开发者说明
+slug: Mozilla/Firefox/Releases/126
+l10n:
+  sourceCommit: e6fcda9d35359bbfec32ddb42086468701f57ee5
+---
+
+{{FirefoxSidebar}}
+
+本文提供了有关 Firefox 126 中影响开发者的变更信息。Firefox 126 于 [2024 年 5 月 14 日](https://whattrainisitnow.com/release/?version=126)发布。
+
+## 为 Web 开发者带来的变化
+
+### 开发者工具
+
+- 添加了用于禁用拆分控制台的选项（[Firefox bug 1731635](https://bugzil.la/1731635)）。
+
+### HTML
+
+没有值得注意的变化。
+
+### MathML
+
+#### 移除
+
+- 垂直居中运算符（+、=、< 等）的自动调整已默认禁用。这种行为并未在 MathML Core 中定义，这只是为非数学字体的问题提供的一种解决方案。仍可以通过将 `mathml.centered_operators.disabled` 配置设为 `false` 来启用此特性。（[Firefox bug 1890531](https://bugzil.la/1890531)）。
+
+### CSS
+
+- 现已支持 {{cssxref("zoom")}} 属性。其可用于增加或减小元素及其内容的大小（[Firefox bug 390936](https://bugzil.la/390936)）。
+
+### JavaScript
+
+没有值得注意的变化。
+
+### HTTP
+
+- 现已支持新的 `Content-Encoding` HTTP 标头的指令 [`zstd`](/zh-CN/docs/Web/HTTP/Headers/Content-Encoding#zstd)，允许解码服务器发送的、使用 {{glossary("Zstandard compression", "Zstandard 压缩")}}算法编码的内容（[Firefox bug 1871963](https://bugzil.la/1871963)）。
+
+### API
+
+- 现已支持 [`IDBFactory.databases()`](/zh-CN/docs/Web/API/IDBFactory/databases)，其用于枚举可用的 [IndexedDB API](/zh-CN/docs/Web/API/IndexedDB_API) 数据库（[Firefox bug 934640](https://bugzil.la/934640)）。
+- 现在支持使用 [`IDBTransaction.durability`](/zh-CN/docs/Web/API/IDBTransaction/durability) 来查询用于创建特定事务的持久性提示（[Firefox bug 1878143](https://bugzil.la/1878143)）。
+- [`URL.parse()`](/zh-CN/docs/Web/API/URL/parse_static) 静态方法现已支持创建 [`URL`](/zh-CN/docs/Web/API/URL) 对象。如果传递的参数未定义有效的 `URL`，则返回 `null`，因此可以作为使用 [`URL` 构造函数](/zh-CN/docs/Web/API/URL/URL)创建 `URL` 对象的不抛出异常的替代方法（[Firefox bug 1823354](https://bugzil.la/1823354)）。
+- 现已支持[屏幕唤醒锁 API](/zh-CN/docs/Web/API/Screen_Wake_Lock_API)，其用于请求在应用程序处于活动状态时不要使屏幕变暗或锁定。这对于导航和阅读应用程序以及其他的因为在使用时屏幕可能不会接收到通常会使其保持唤醒状态的常规触摸输入的应用程序特别有用。在安全上下文中，可以通过 {{domxref("Navigator.wakeLock")}}（会返回一个 {{domxref("WakeLock")}}）访问 API。其允许你请求一个用于监视唤醒锁的状态并手动释放它的 {{domxref("WakeLockSentinel")}}（[Firefox bug 1589554](https://bugzil.la/1589554)、[Firefox bug 1874849](https://bugzil.la/1874849)）。
+- 现已支持所有的 [`RTCIceCandidate`](/zh-CN/docs/Web/API/RTCIceCandidate) 属性和方法（除了未实现的 `relayProtocol` 和 `url` 属性），并与规范相匹配。已对 `RTCIceCandidate` 的属性进行了以下更改：
+
+  - 已将以下属性变为只读：[`candidate`](/zh-CN/docs/Web/API/RTCIceCandidate/candidate)、[`sdpMid`](/zh-CN/docs/Web/API/RTCIceCandidate/sdpMid)、[`sdpMLineIndex`](/zh-CN/docs/Web/API/RTCIceCandidate/sdpMLineIndex) 和 [`usernameFragment`](/zh-CN/docs/Web/API/RTCIceCandidate/usernameFragment)。
+  - 已添加以下属性：[`foundation`](/zh-CN/docs/Web/API/RTCIceCandidate/foundation)、[`component`](/zh-CN/docs/Web/API/RTCIceCandidate/component)、[`priority`](/zh-CN/docs/Web/API/RTCIceCandidate/priority)、[`address`](/zh-CN/docs/Web/API/RTCIceCandidate/address)、[`protocol`](/zh-CN/docs/Web/API/RTCIceCandidate/protocol)、[`port`](/zh-CN/docs/Web/API/RTCIceCandidate/port)、[`type`](/zh-CN/docs/Web/API/RTCIceCandidate/type)、[`tcpType`](/zh-CN/docs/Web/API/RTCIceCandidate/tcpType)、[`relatedAddress`](/zh-CN/docs/Web/API/RTCIceCandidate/relatedAddress)、[`relatedPort`](/zh-CN/docs/Web/API/RTCIceCandidate/relatedPort) 和 [`usernameFragment`](/zh-CN/docs/Web/API/RTCIceCandidate/usernameFragment)。
+
+  （[Firefox bug 1322186](https://bugzil.la/1322186)）。
+
+- 现已支持 {{domxref("Element.currentCSSZoom")}} 只读属性，其用于获取元素的实际 CSS [zoom](/zh-CN/docs/Web/CSS/zoom)（[Firefox bug 1880189](https://bugzil.la/1880189)）。
+
+#### DOM
+
+- 定义自定义元素的状态并使用 CSS 选择器进行匹配的特性现已默认可用。自定义状态被表示为可以添加到或从元素的 {{domxref("ElementInternals.states")}} 属性（{{domxref("CustomStateSet")}}）中移除的自定义标识符。CSS [`:state()`](/zh-CN/docs/Web/CSS/:state) 伪类以自定义标识符为参数，并在自定义元素的状态集中存在该标识符时匹配该元素（[Firefox bug 1887543](https://bugzil.la/1887543)）。
+- 现已支持 {{domxref("Selection.direction")}} 属性，其用于指示范围的方向（[Firefox bug 1867058](https://bugzil.la/1867058)）。
+
+#### 媒体、WebRTC 和 Web 音频
+
+#### 移除
+
+- 现已从 [`HTMLMarqueeElement`](/zh-CN/docs/Web/API/HTMLMarqueeElement) 中删除字幕事件 [`bounce`](/zh-CN/docs/Web/API/HTMLMarqueeElement#bounce)、[`finish`](/zh-CN/docs/Web/API/HTMLMarqueeElement#finish) 和 [`start`](/zh-CN/docs/Web/API/HTMLMarqueeElement#start)，同时删除的还有在 [`` HTML 元素](/zh-CN/docs/Web/HTML/Element/marquee)上定义的相应的[事件处理器属性](/zh-CN/docs/Web/HTML/Element/marquee#事件处理器)（[Firefox bug 1689705](https://bugzil.la/1689705)）。
+
+### WebDriver 一致性（WebDriver BiDi、Marionette）
+
+#### WebDriver BiDi
+
+- 已为 `network.addIntercept` 命令添加了 `contexts` 参数，其用于限制对特定顶级浏览上下文的网络请求拦截（[Firefox bug 1884935](https://bugzil.la/1882260)）。
+- `session.subscribe` 和 `session.unsubscribe` 现在都会在参数 `events` 或 `contexts` 的值为空数组时引发 `invalid argument` 错误（[Firefox bug 1884935](https://bugzil.la/1887871)）。
+- 已更新对 `storage.getCookies` 命令的实现，以与 Gecko 默认的 cookie 行为保持一致。这允许删除用户的 `network.cookie.cookieBehavior` 偏好设置（预期仅会用于我们的 CDP 实现）（[Firefox bug 1884935](https://bugzil.la/1879503)）。
+- 已移除 `browsingContext.locateNodes` 命令的 `ownership` 和 `sandbox` 参数，因为它们不再被需要（[Firefox bug 1884935](https://bugzil.la/1838152)）。
+- 已改进 `session.new` 命令在未指定任何能力时的错误消息（[Firefox bug 1885495](https://bugzil.la/1838152)）。
+
+## 为附加组件开发者带来的变化
+
+- {{WebExtAPIRef("commands.onCommand")}} 事件现在将 `tab` 参数传递给事件监听器。这使得扩展可以将触发的快捷键应用于发出该事件的页面，而无需调用 `tabs.query()` 方法（[Firefox bug 1843866](https://bugzil.la/1843866)）。
+- {{WebExtAPIRef("runtime.MessageSender")}} 类型现在包含 `origin` 属性。这使得消息或连接请求可以查看打开连接的页面或框架。这对于在 URL 中未明确显示来源的情况下确定来源是否可信非常有用（[Firefox bug 1787379](https://bugzil.la/1787379)）。
+- 现已支持 `"webRequestAuthProvider"` 权限。这为 Manifest V3 中用于 {{WebExtAPIRef("webRequest.onAuthRequired")}} 的请求权限提供了与 Chrome 的兼容性（[Firefox bug 1820569](https://bugzil.la/1820569)）。
+- 现在提供 [`options_page` 清单键](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_page)来作为 [`options_ui`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui) 键的别名。这是为了使扩展更好地与 Chrome 兼容（[Firefox bug 1816960](https://bugzil.la/1816960)）。
+- {{WebExtAPIRef("tabs.captureVisibleTab")}} 方法现在也可以通过 `activeTab` [权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)启用，这提供了与 Chrome 和 Safari 的兼容性（[Firefox bug 1784920](https://bugzil.la/1784920)）。
+
+### 其他
+
+## 实验性 Web 特性
+
+这些特性是 Firefox 126 中新添加的，但在默认情况下是禁用的。要尝试这些特性，请在 `about:config` 页面上搜索相应的首选项，并将其设置为 `true`。你可以在[实验性特性](/zh-CN/docs/Mozilla/Firefox/Experimental_features)页面上找到更多这样的特性。
+
+- **可跨越影子 DOM 边界的选择**：`dom.shadowdom.selection_across_boundary.enabled`。
+
+  {{domxref("Selection.getComposedRanges()")}} 方法现在可用于获取影子 DOM 中具有锚点或焦点的节点的选择范围——前提是传递了包含这些节点的 {{domxref("ShadowRoot")}} 对象。`Selection` 的 {{domxref("Selection.setBaseAndExtent()","setBaseAndExtent()")}}、{{domxref("Selection.collapse()","collapse()")}} 和 {{domxref("Selection.extend()","extend()")}} 方法也已修改，以接受影子根中的节点（[Firefox bug 1867058](https://bugzil.la/1867058)）。
+
+- **CSS `shape()` 函数**：`layout.css.basic-shape-shape.enabled`。
+
+  你可以在 {{cssxref("clip-path")}} 和 {{cssxref("offset-path")}} 属性中使用 [`shape()`](/zh-CN/docs/Web/CSS/basic-shape/shape) 函数来定义形状。此函数使你可以更精细地控制可被定义的形状，并提供了比 {{cssxref("path","path()")}} 函数更多的优点（参见 [Firefox bug 1823463](https://bugzil.la/1823463) 以了解 `shape()` 函数在 `clip-path` 中的支持；参见 [Firefox bug 1884424](https://bugzil.la/1884424) 以了解 `shape()` 函数在 `offset-path` 中的支持；参见 [Firefox bug 1884425](https://bugzil.la/1884425) 以了解 `shape()` 的插值支持）。
+
+## 更早期的版本
+
+{{Firefox_for_developers}}
diff --git a/files/zh-cn/web/api/canvasgradient/addcolorstop/index.md b/files/zh-cn/web/api/canvasgradient/addcolorstop/index.md
index 1d957d70e2da0b..afdcbe1751080b 100644
--- a/files/zh-cn/web/api/canvasgradient/addcolorstop/index.md
+++ b/files/zh-cn/web/api/canvasgradient/addcolorstop/index.md
@@ -1,30 +1,43 @@
 ---
-title: CanvasGradient.addColorStop()
+title: CanvasGradient：addColorStop() 方法
 slug: Web/API/CanvasGradient/addColorStop
+l10n:
+  sourceCommit: daeff1a2efaae366bcc8b6d911d86985646e665e
 ---
 
-{{APIRef("Canvas")}}
+{{APIRef("Canvas API")}}{{AvailableInWorkers}}
 
-**`CanvasGradient.addColorStop()`** 方法添加一个由**偏移值**和**颜色值**指定的断点到渐变。如果偏移值不在`0`到`1`之间，将抛出`INDEX_SIZE_ERR`错误，如果颜色值不能被解析为有效的 CSS 颜色值 {{cssxref("<color>")}}，将抛出`SYNTAX_ERR`错误。
+**`CanvasGradient.addColorStop()`** 方法为给定的 canvas 渐变添加一个由偏移值（`offset`）和颜色值（`color`）指定的色标。
 
 ## 语法
 
-```js
-void gradient.addColorStop(offset, color);
+```js-nolint
+addColorStop(offset, color)
 ```
 
 ### 参数
 
-- offset
-  - : `0`到`1`之间的值，超出范围将抛出`INDEX_SIZE_ERR`错误
-- color
-  - : CSS 颜色值 {{cssxref("<color>")}}。如果颜色值不能被解析为有效的 CSS 颜色值 ``，将抛出`SYNTAX_ERR`错误。
+- `offset`
+  - : 一个在 `0` 到 `1` 之间（包含边界）的数字，表示色标的位置。`0` 表示渐变的起始位置，`1` 表示渐变的结束位置。
+- `color`
+  - : 一个 [CSS](/zh-CN/docs/Web/CSS) {{cssxref("<color>")}} 值，表示色标的颜色。
+
+### 返回值
+
+无（{{jsxref("undefined")}}）。
+
+### 异常
+
+- `IndexSizeError` {{domxref("DOMException")}}
+  - : 如果 `offset` 不在 0 和 1 之间（包括边界），则抛出此异常。
+- `SyntaxError` {{domxref("DOMException")}}
+  - : 如果 `color` 无法解析为 CSS {{cssxref("<color>")}} 值，则抛出此异常。
 
 ## 示例
 
-### 使用 `addColorStop` 方法
+### 向渐变中添加色标
 
-一个使用{{domxref("CanvasGradient")}}对象的`addColorStop` 方法的简单例子
+此示例使用 `addColorStop` 方法向线性 {{domxref("CanvasGradient")}} 对象中添加色标。然后使用该渐变填充矩形。
 
 #### HTML
 
@@ -35,62 +48,22 @@ void gradient.addColorStop(offset, color);
 #### JavaScript
 
 ```js
-var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
-var gradient = ctx.createLinearGradient(0, 0, 200, 0);
+let gradient = ctx.createLinearGradient(0, 0, 200, 0);
 gradient.addColorStop(0, "green");
-gradient.addColorStop(1, "white");
+gradient.addColorStop(0.7, "white");
+gradient.addColorStop(1, "pink");
 ctx.fillStyle = gradient;
 ctx.fillRect(10, 10, 200, 100);
 ```
 
-编辑以下代码可看到画布变化：
-
-```html hidden
-
-

-  
-  
-

-
-```
-
-```js hidden
-var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-var textarea = document.getElementById("code");
-var reset = document.getElementById("reset");
-var edit = document.getElementById("edit");
-var code = textarea.value;
-
-function drawCanvas() {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  eval(textarea.value);
-}
-
-reset.addEventListener("click", function () {
-  textarea.value = code;
-  drawCanvas();
-});
-
-edit.addEventListener("click", function () {
-  textarea.focus();
-});
-
-textarea.addEventListener("input", drawCanvas);
-window.addEventListener("load", drawCanvas);
-```
+#### 结果
 
-{{ EmbedLiveSample('使用 addColorStop 方法', 700, 360) }}
+{{ EmbedLiveSample('向渐变中添加色标', 700, 180) }}
 
-## 标准
+## 规范
 
 {{Specifications}}
 
diff --git a/files/zh-cn/web/api/canvasgradient/index.md b/files/zh-cn/web/api/canvasgradient/index.md
index fb4833b3a5a43c..b44921fd307077 100644
--- a/files/zh-cn/web/api/canvasgradient/index.md
+++ b/files/zh-cn/web/api/canvasgradient/index.md
@@ -1,22 +1,22 @@
 ---
 title: CanvasGradient
 slug: Web/API/CanvasGradient
+l10n:
+  sourceCommit: daeff1a2efaae366bcc8b6d911d86985646e665e
 ---
 
-{{APIRef("Canvas")}}
+{{APIRef("Canvas API")}}{{AvailableInWorkers}}
 
-**`CanvasGradient`** 接口表示描述渐变的不透明对象。通过 {{domxref("CanvasRenderingContext2D.createLinearGradient()")}} 或 {{domxref("CanvasRenderingContext2D.createRadialGradient()")}} 的返回值得到。
+**`CanvasGradient`** 接口表示描述渐变的[不透明对象](https://en.wikipedia.org/wiki/Opaque_data_type)。该接口通过 {{domxref("CanvasRenderingContext2D.createLinearGradient()")}}、{{domxref("CanvasRenderingContext2D.createConicGradient()")}} 或 {{domxref("CanvasRenderingContext2D.createRadialGradient()")}} 方法返回。
 
-## 属性
+## 实例属性
 
 _不透明对象，没有暴露的属性。_
 
-## 方法
-
-_没有继承的方法。_
+## 实例方法
 
 - {{domxref("CanvasGradient.addColorStop()")}}
-  - : 添加一个由偏移（`offset`）和颜色（`color`）定义的断点到渐变中。如果偏移值不在 0 到 1 之间，将抛出`INDEX_SIZE_ERR 错误，如果颜色值不能被解析为有效的 CSS 颜色值 {{cssxref("<color>")}}，将抛出 SYNTAX_ERR`错误。
+  - : 添加一个由偏移（`offset`）和颜色（`color`）定义的断点到渐变中。
 
 ## 规范
 
@@ -28,5 +28,5 @@ _没有继承的方法。_
 
 ## 参见
 
-- 创建方法在 {{domxref("CanvasRenderingContext2D")}}。
-- {{HTMLElement("canvas")}} 元素及其有关接口 {{domxref("HTMLCanvasElement")}}。
+- {{domxref("CanvasRenderingContext2D")}} 中的创建方法。
+- {{HTMLElement("canvas")}} 元素及其相关接口 {{domxref("HTMLCanvasElement")}}。
diff --git a/files/zh-cn/web/api/canvaspattern/index.md b/files/zh-cn/web/api/canvaspattern/index.md
index e47d3d53f9447b..f22384f5ad7216 100644
--- a/files/zh-cn/web/api/canvaspattern/index.md
+++ b/files/zh-cn/web/api/canvaspattern/index.md
@@ -1,17 +1,21 @@
 ---
 title: CanvasPattern
 slug: Web/API/CanvasPattern
+l10n:
+  sourceCommit: daeff1a2efaae366bcc8b6d911d86985646e665e
 ---
 
-{{APIRef("Canvas")}}
+{{APIRef("Canvas API")}}{{AvailableInWorkers}}
 
-**`CanvasPattern`** 接口表示描述一个模板（基于 image、canvas 或 video）的不透明对象，通过 {{domxref("CanvasRenderingContext2D.createPattern()")}} 方法创建。
+**`CanvasPattern`** 接口表示一个[不透明对象](https://en.wikipedia.org/wiki/Opaque_data_type)，描述了一个基于图像、画布或视频的模板，该模板通过 {{domxref("CanvasRenderingContext2D.createPattern()")}} 方法创建。
 
-## 属性
+它可以用作 {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} 或 {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}。
+
+## 实例属性
 
 _非透明对象，没有暴露的属性。_
 
-## 方法
+## 实例方法
 
 _没有继承来的方法。_
 
@@ -29,4 +33,4 @@ _没有继承来的方法。_
 ## 参见
 
 - {{domxref("CanvasRenderingContext2D.createPattern()")}}
-- {{HTMLElement("canvas")}} 元素及和 canvas 相关接口 {{domxref("HTMLCanvasElement")}}
+- {{HTMLElement("canvas")}} 元素及其相关接口{{domxref("HTMLCanvasElement")}}
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/canvas/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/canvas/index.md
index 0864cbaa109a5d..23a94c23ffbf87 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/canvas/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/canvas/index.md
@@ -1,17 +1,17 @@
 ---
-title: CanvasRenderingContext2D.canvas
+title: CanvasRenderingContext2D：canvas 属性
 slug: Web/API/CanvasRenderingContext2D/canvas
+l10n:
+  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
 ---
 
 {{APIRef}}
 
-**`CanvasRenderingContext2D.canvas`** 属性是 [Canvas API](/zh-CN/docs/Web/API/Canvas_API) 的一部分，是对与给定上下文关联的{{domxref("HTMLCanvasElement")}}对象的只读引用。如果没有 {{HTMLElement("canvas")}} 元素与之对应，对象值为{{jsxref("null")}} 。
+[Canvas API](/zh-CN/docs/Web/API/Canvas_API) 的 **`CanvasRenderingContext2D.canvas`** 属性是对与给定上下文关联的 {{domxref("HTMLCanvasElement")}} 对象的只读引用。如果没有与之关联的 {{HTMLElement("canvas")}} 元素，对象值为 {{jsxref("null")}}。
 
-## 语法
+## 值
 
-```plain
-ctx.canvas;
-```
+一个 {{domxref("HTMLCanvasElement")}} 对象。
 
 ## 示例
 
@@ -21,15 +21,15 @@ ctx.canvas;
 
 ```
 
-你可以通过 CanvasRenderingContext2D 调用内部的 canvas 属性，获取 canvas 的一个反向引用：
+你可以通过 `CanvasRenderingContext2D` 调用内部的 `canvas` 属性，获取 canvas 元素的引用：
 
 ```js
-var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 ctx.canvas; // HTMLCanvasElement
 ```
 
-## 规范描述
+## 规范
 
 {{Specifications}}
 
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/clip/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/clip/index.md
index 87f679de6be9ac..9522344ed121d9 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/clip/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/clip/index.md
@@ -1,42 +1,55 @@
 ---
-title: CanvasRenderingContext2D.clip()
+title: CanvasRenderingContext2D：clip() 方法
 slug: Web/API/CanvasRenderingContext2D/clip
+l10n:
+  sourceCommit: 882679ef575f519ddb80095398a1235415ac01f1
 ---
 
 {{APIRef}}
 
-**`CanvasRenderingContext2D.clip()`** 是 Canvas 2D API 将当前创建的路径设置为当前剪切路径的方法。
+Canvas 2D API 的 **`CanvasRenderingContext2D.clip()`** 方法用于将当前或给定路径转换为当前裁剪区域。前面的裁剪区域（如果有的话）将与当前路径或给定路径相交，从而创建新的裁剪区域。
+
+在下面的图像中，红色轮廓表示一个星形的裁剪区域。只有在裁剪区域内的棋盘格模式的部分才会被绘制出来。
+
+![星形裁剪区域](canvas_clipping_path.png)
+
+> **备注：** 请注意，裁剪区域仅由添加到路径中的形状构成。它不适用于直接绘制到画布上的形状基元，比如 {{domxref("CanvasRenderingContext2D.fillRect()","fillRect()")}}。相反，在调用 `clip()` 前，你需要使用 {{domxref("CanvasRenderingContext2D.rect()","rect()")}} 将一个矩形形状添加到路径中。
+
+> **备注：** 裁剪路径不能直接撤销。在调用 `clip()` 前，你必须使用 {{domxref("CanvasRenderingContext2D/save", "save()")}} 保存画布状态，并在裁剪区域完成绘制后使用 {{domxref("CanvasRenderingContext2D/restore", "restore()")}} 还原。
 
 ## 语法
 
-```
-void ctx.clip();
-void ctx.clip(fillRule);
-void ctx.clip(path, fillRule);
+```js-nolint
+clip()
+clip(path)
+clip(fillRule)
+clip(path, fillRule)
 ```
 
 ### 参数
 
-![](canvas_clipping_path.png)
-
 - `fillRule`
 
-  - : 这个算法判断一个点是在路径内还是在路径外。
+  - : 这个算法判断一个点是在裁剪区域内还是在此之外。
     允许的值：
 
     - `nonzero`
-      - : [非零环绕原则](http://en.wikipedia.org/wiki/Nonzero-rule)，默认的原则。
+      - : [非零环绕规则](https://en.wikipedia.org/wiki/Nonzero-rule)，默认的规则。
     - `evenodd`
-      - : [奇偶环绕原则](http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule)。
+      - : [非零环绕规则](https://en.wikipedia.org/wiki/Even%E2%80%93odd_rule)。
 
 - `path`
-  - : 需要剪切的 {{domxref("Path2D")}} 路径。
+  - : 需要用作裁剪区域的 {{domxref("Path2D")}} 路径。
+
+### 返回值
+
+无（{{jsxref("undefined")}}）。
 
 ## 示例
 
 ### 一个简单的裁剪区域
 
-这是一段简单的代码片段，使用 `clip` 方法创建剪切区域。
+此示例使用 `clip()` 方法根据圆弧的形状创建一个裁剪区域。然后绘制了两个矩形；只有在裁剪区域内的部分才会被渲染。
 
 #### HTML
 
@@ -46,16 +59,18 @@ void ctx.clip(path, fillRule);
 
 #### JavaScript
 
+裁剪区域是一个以 (100, 75) 为中心点、以 50 为半径的完整圆。
+
 ```js
 const canvas = document.getElementById("canvas");
 const ctx = canvas.getContext("2d");
 
-// Create circular clipping region
+// 创建圆形裁剪区域
 ctx.beginPath();
 ctx.arc(100, 75, 50, 0, Math.PI * 2);
 ctx.clip();
 
-// Draw stuff that gets clipped
+// 绘制被裁剪的内容
 ctx.fillStyle = "blue";
 ctx.fillRect(0, 0, canvas.width, canvas.height);
 ctx.fillStyle = "orange";
@@ -66,6 +81,73 @@ ctx.fillRect(0, 0, 100, 100);
 
 {{ EmbedLiveSample('一个简单的裁剪区域', 700, 180) }}
 
+### 指定路径和填充规则
+
+此示例将两个矩形保存到一个 Path2D 对象中，然后使用 `clip()` 方法将其作为当前的裁剪区域。使用 `"evenodd"` 规则在裁剪矩形交集处创建一个孔洞；默认情况下（使用 `"nonzero"` 规则），不会有孔洞。
+
+#### HTML
+
+```html
+
+```
+
+#### JavaScript
+
+```js
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+
+// 创建裁剪路径
+let region = new Path2D();
+region.rect(80, 10, 20, 130);
+region.rect(40, 50, 100, 50);
+ctx.clip(region, "evenodd");
+
+// 绘制被裁剪的内容
+ctx.fillStyle = "blue";
+ctx.fillRect(0, 0, canvas.width, canvas.height);
+```
+
+#### 结果
+
+{{ EmbedLiveSample('指定路径和填充规则', 700, 180) }}
+
+### 创建复杂的裁剪区域
+
+此示例使用了两个路径，一个矩形和一个正方形，来创建一个复杂的裁剪区域。`clip()` 方法被调用两次，第一次使用 `Path2D` 对象将当前裁剪区域设置为圆形，然后再次调用以将圆形裁剪区域与一个正方形相交。最终的裁剪区域是圆形和正方形的交集形状。
+
+#### HTML
+
+```html
+
+```
+
+#### JavaScript
+
+```js
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+
+// 创建两个裁剪路径
+let circlePath = new Path2D();
+circlePath.arc(150, 75, 75, 0, 2 * Math.PI);
+let squarePath = new Path2D();
+squarePath.rect(85, 10, 130, 130);
+
+// 将裁剪区域设置为圆形
+ctx.clip(circlePath);
+// 将裁剪区域设置为圆形和正方形的交集
+ctx.clip(squarePath);
+
+// 绘制被裁剪的内容
+ctx.fillStyle = "blue";
+ctx.fillRect(0, 0, canvas.width, canvas.height);
+```
+
+#### 结果
+
+{{ EmbedLiveSample('创建复杂的裁剪区域', 300, 150) }}
+
 ## 规范
 
 {{Specifications}}
@@ -76,4 +158,4 @@ ctx.fillRect(0, 0, 100, 100);
 
 ## 参见
 
-- 接口定义， {{domxref("CanvasRenderingContext2D")}}.
+- 定义此方法的接口：{{domxref("CanvasRenderingContext2D")}}
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/createimagedata/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/createimagedata/index.md
index 6b4d0a2a3747aa..54e445aeac3b34 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/createimagedata/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/createimagedata/index.md
@@ -1,61 +1,100 @@
 ---
 title: CanvasRenderingContext2D.createImageData()
 slug: Web/API/CanvasRenderingContext2D/createImageData
+l10n:
+  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
 ---
 
 {{APIRef}}
 
-**`CanvasRenderingContext2D.createImageData()`** 是 Canvas 2D API 创建一个新的、空白的、指定大小的 {{domxref("ImageData")}} 对象。所有的像素在新对象中都是透明的。
+Canvas 2D API 的 **`CanvasRenderingContext2D.createImageData()`** 方法用于创建一个新的、空白的、指定大小的 {{domxref("ImageData")}} 对象。所有的像素在新对象中都是透明的黑色。
 
 ## 语法
 
-```plain
-ImageData ctx.createImageData(width, height);
-ImageData ctx.createImageData(imagedata);
+```js-nolint
+createImageData(width, height)
+createImageData(width, height, settings)
+createImageData(imagedata)
 ```
 
 ### 参数
 
 - `width`
-  - : {{domxref("ImageData")}} 新对象的宽度。
+  - : 新 `ImageData` 对象的宽度。如果是负值，将围绕垂直轴翻转矩形。
 - `height`
-  - : {{domxref("ImageData")}} 新对象的高度。
+  - : 新 `ImageData` 对象的高度。如果是负值，将围绕水平轴翻转矩形。
+- `settings` {{optional_inline}}
+  - : 一个包含以下属性的对象：
+    - `colorSpace`：指定图像数据的色彩空间。可以设置为 `"srgb"` 表示 [sRGB 色彩空间](https://zh.wikipedia.org/wiki/SRGB色彩空间)，或 `"display-p3"` 表示 [display-p3 色彩空间](https://zh.wikipedia.org/wiki/DCI-P3)。
 - `imagedata`
-  - : 从现有的 {{domxref("ImageData")}} 对象中，复制一个和其宽度和高度相同的对象。图像自身不允许被复制。
+  - : 要复制宽度和高度的现有 `ImageData` 对象。**不**会复制图像本身。
 
 ### 返回值
 
-指定了宽度和高度的，新的 {{domxref("ImageData")}} 对象。新对象使用透明的像素进行填充。
+指定了宽度和高度的，新的 {{domxref("ImageData")}} 对象。新对象使用透明的黑色像素进行填充。
 
-### 抛出错误
+### 错误
 
 - `IndexSizeError`
-  - : 如果宽度或者高度变量值为零，会抛出此异常。
+  - : 如果参数 `width` 或者 `height` 为零，会抛出此异常。
 
 ## 示例
 
-### 使用 `createImageData` 方法
+### 创建空的 ImageData 对象
 
-这是一段简单地使用 `createImageData` 方法的代码片段。获取更多信息，请看 [canvas 像素控制](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas) 和 {{domxref("ImageData")}} 对象。
-
-#### HTML
+这段代码使用 `createImageData()` 方法创建一个空的 `ImageData` 对象。
 
 ```html
 
 ```
 
-#### JavaScript
+生成的对象宽度为 100 像素，高度为 50 像素，总共包含 5,000 个像素点。每个像素点在 `ImageData` 对象中由四个数组值表示，因此对象的 {{domxref("ImageData.data", "data")}} 属性的长度为 4 × 5,000，即 20,000。
 
 ```js
-var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-ctx.rect(10, 10, 100, 100);
-ctx.fill();
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+
+const imageData = ctx.createImageData(100, 50);
+console.log(imageData);
+// ImageData { width: 100, height: 50, data: Uint8ClampedArray[20000] }
+```
+
+### 填充空的 ImageData 对象
+
+这个示例创建了一个新的 `ImageData` 对象，并使用紫色像素填充。
+
+```html
+
+```
 
-console.log(ctx.createImageData(100, 100));
-// ImageData { width: 100, height: 100, data: Uint8ClampedArray[40000] }
+由于每个像素点由四个值表示，`for` 循环每次迭代增加四个值。与每个像素相关联的数组值分别是 R（红色）、G（绿色）、B（蓝色）和 A（透明度），顺序如上。
+
+```js
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+const imageData = ctx.createImageData(100, 100);
+
+// 遍历每个像素点
+for (let i = 0; i < imageData.data.length; i += 4) {
+  // 修改像素数据
+  imageData.data[i + 0] = 190; // R 值
+  imageData.data[i + 1] = 0; // G 值
+  imageData.data[i + 2] = 210; // B 值
+  imageData.data[i + 3] = 255; // A 值
+}
+
+// 将图像数据绘制到画布上
+ctx.putImageData(imageData, 20, 20);
 ```
 
+#### 结果
+
+{{EmbedLiveSample("创建空的_ImageData_对象", 700, 180)}}
+
+### 更多示例
+
+关于使用 `createImageData()` 和 `ImageData` 对象的更多示例，请参阅[使用 Canvas 进行像素操作](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas) 和 {{domxref("ImageData.data")}}。
+
 ## 规范
 
 {{Specifications}}
@@ -64,16 +103,8 @@ console.log(ctx.createImageData(100, 100));
 
 {{Compat}}
 
-### 兼容性注解
-
-- 从 Gecko 5.0 开始：
-
-  - 如果矩形小于指定的 1 个像素，`createImageData()` 会返回图像数据至少 1 个像素值。
-  - 当调用 `createImageData()` 指定非限制值时，会抛出`NOT_SUPPORTED_ERR` exception 异常。
-  - `createImageData()` 根据规定处理负数变量，会围绕对称轴翻转矩形区域。
-
 ## 参见
 
-- 接口定义，{{domxref("CanvasRenderingContext2D")}}.
+- 定义此方法的接口：{{domxref("CanvasRenderingContext2D")}}
 - {{domxref("ImageData")}}
-- [canvas 像素控制](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas)
+- [使用 Canvas 进行像素操作](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas)
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/direction/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/direction/index.md
index 8bb374ae15523e..599f7f0af063e1 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/direction/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/direction/index.md
@@ -1,36 +1,32 @@
 ---
-title: CanvasRenderingContext2D.direction
+title: CanvasRenderingContext2D：direction 属性
 slug: Web/API/CanvasRenderingContext2D/direction
+l10n:
+  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
 ---
 
-{{APIRef}} {{SeeCompatTable}}
+{{APIRef}}
 
-**`CanvasRenderingContext2D.direction`** 是 Canvas 2D API 用来在绘制文本时，描述当前文本方向的属性。
+Canvas 2D API 的 **`CanvasRenderingContext2D.direction`** 属性用来在绘制文本时，描述当前文本方向。
 
-## 语法
+## 值
 
-```
-ctx.direction = "ltr" || "rtl" || "inherit";
-```
-
-### 选项
-
-有效值：
+可能的取值：
 
-- ltr
-  - : 文本方向从左向右。
-- rtl
-  - : 文本方向从右向左。
-- inherit
-  - : 根据情况继承 {{HTMLElement("canvas")}} 元素或者 {{domxref("Document")}} 。
+- `"ltr"`
+  - : 文字方向为从左到右。
+- `"rtl"`
+  - : 文字方向为从右到左。
+- `"inherit"`
+  - : 文字方向从相应的 {{HTMLElement("canvas")}} 元素或 {{domxref("Document")}} 继承。
 
-默认值是 `inherit`。
+默认值为 `"inherit"`。
 
 ## 示例
 
-### 使用 `direction` 属性
+### 改变文字方向
 
-这是一段简单的代码片段，对文本设置不同的 direction 数值。
+这个示例绘制了两段文字。第一段是从左到右的，第二段是从右到左的。注意在 `ltr` 中的“Hi!”变成了在 `rtl` 中的“!Hi”。
 
 #### HTML
 
@@ -41,22 +37,8 @@ ctx.direction = "ltr" || "rtl" || "inherit";
 #### JavaScript
 
 ```js
-var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-
-ctx.font = "48px serif";
-ctx.fillText("Hi!", 150, 50);
-ctx.direction = "rtl";
-ctx.fillText("Hi!", 150, 130);
-```
-
-```html hidden
-
-```
-
-```js hidden
-var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
 ctx.font = "48px serif";
 ctx.fillText("Hi!", 150, 50);
@@ -66,7 +48,7 @@ ctx.fillText("Hi!", 150, 130);
 
 #### 结果
 
-{{ EmbedLiveSample('使用 direction 属性', 700, 180) }}
+{{ EmbedLiveSample('改变文字方向', 700, 180) }}
 
 ## 规范
 
@@ -78,4 +60,4 @@ ctx.fillText("Hi!", 150, 130);
 
 ## 参见
 
-- 接口定义， {{domxref("CanvasRenderingContext2D")}}.
+- 定义此属性的接口：{{domxref("CanvasRenderingContext2D")}}
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.md
index 0cdee1b82ec2d8..d91e60ddf4a423 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.md
@@ -1,38 +1,44 @@
 ---
-title: CanvasRenderingContext2D.drawFocusIfNeeded()
+title: CanvasRenderingContext2D：drawFocusIfNeeded() 方法
 slug: Web/API/CanvasRenderingContext2D/drawFocusIfNeeded
+l10n:
+  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
 ---
 
 {{APIRef}}
 
-**`CanvasRenderingContext2D.drawFocusIfNeeded()`** 是 Canvas 2D API 用来给当前路径或特定路径绘制焦点的方法，如果给定的元素获取了焦点。
+Canvas 2D API 的 **`CanvasRenderingContext2D.drawFocusIfNeeded()`** 方法用于当指定的元素处于焦点状态时在当前或指定路径周围绘制焦点环。
 
 ## 语法
 
-```
-void ctx.drawFocusIfNeeded(element);
-void ctx.drawFocusIfNeeded(path, element);
+```js-nolint
+drawFocusIfNeeded(element)
+drawFocusIfNeeded(path, element)
 ```
 
 ### 参数
 
-- element
-  - : 是否需要设置焦点的元素。
+- `element`
+  - : 要检查是否处于焦点状态的元素。
 - `path`
   - : {{domxref("Path2D")}} 路径。
 
+### 返回值
+
+无（{{jsxref("undefined")}}）。
+
 ## 示例
 
-### 控制按钮焦点
+### 管理按钮焦点
 
-这是一段使用 `drawFocusIfNeeded` 方法的简单的代码片段。
+这个例子在画布上绘制了两个按钮。使用 `drawFocusIfNeeded()` 方法在适当的时候绘制焦点环。
 
 #### HTML
 
 ```html
 
-  
-  
+  
+  
 
 ```
 
@@ -56,17 +62,17 @@ function redraw() {
 }
 
 function handleClick(e) {
-  // Calculate click coordinates
+  // 计算点击坐标
   const x = e.clientX - canvas.offsetLeft;
   const y = e.clientY - canvas.offsetTop;
 
-  // Focus button1, if appropriate
+  // 如果合适，聚焦 button1
   drawButton(button1, 20, 20);
   if (ctx.isPointInPath(x, y)) {
     button1.focus();
   }
 
-  // Focus button2, if appropriate
+  // 如果合适，聚焦 button2
   drawButton(button2, 20, 80);
   if (ctx.isPointInPath(x, y)) {
     button2.focus();
@@ -78,29 +84,29 @@ function drawButton(el, x, y) {
   const width = 150;
   const height = 40;
 
-  // Button background
+  // 按钮背景
   ctx.fillStyle = active ? "pink" : "lightgray";
   ctx.fillRect(x, y, width, height);
 
-  // Button text
+  // 按钮文本
   ctx.font = "15px sans-serif";
   ctx.textAlign = "center";
   ctx.textBaseline = "middle";
   ctx.fillStyle = active ? "blue" : "black";
   ctx.fillText(el.textContent, x + width / 2, y + height / 2);
 
-  // Define clickable area
+  // 定义可点击区域
   ctx.beginPath();
   ctx.rect(x, y, width, height);
 
-  // Draw focus ring, if appropriate
+  // 如果合适，绘制焦点环
   ctx.drawFocusIfNeeded(el);
 }
 ```
 
 #### 结果
 
-{{EmbedLiveSample('控制按钮焦点', 700, 180)}}
+{{EmbedLiveSample('管理按钮焦点', 700, 180)}}
 
 ## 规范
 
@@ -112,4 +118,4 @@ function drawButton(el, x, y) {
 
 ## 参见
 
-- 接口定义， {{domxref("CanvasRenderingContext2D")}}.
+- 定义此方法的接口：{{domxref("CanvasRenderingContext2D")}}
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/fill/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/fill/index.md
index 4ca57fa8d10b79..e0f46054593ae7 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/fill/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/fill/index.md
@@ -1,40 +1,47 @@
 ---
-title: CanvasRenderingContext2D.fill()
+title: CanvasRenderingContext2D：fill() 方法
 slug: Web/API/CanvasRenderingContext2D/fill
+l10n:
+  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
 ---
 
 {{APIRef}}
 
-**`CanvasRenderingContext2D.fill()`** 是 Canvas 2D API 根据当前的填充样式，填充当前或已存在的路径的方法。采取非零环绕或者奇偶环绕规则。
+Canvas 2D API 的 **`CanvasRenderingContext2D.fill()`** 方法用于根据当前的 {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}，填充当前或给定的路径。
 
 ## 语法
 
-```
-void ctx.fill();
-void ctx.fill(fillRule);
-void ctx.fill(path, fillRule);
+```js-nolint
+fill()
+fill(path)
+fill(fillRule)
+fill(path, fillRule)
 ```
 
 ### 参数
 
 - `fillRule`
 
-  - : 一种算法，决定点是在路径内还是在路径外。
+  - : 一种算法，确定点是在路径内还是在路径外。
     允许的值：
 
     - `nonzero`
-      - : [非零环绕规则](http://en.wikipedia.org/wiki/Nonzero-rule)，默认的规则。
+      - : [非零环绕规则](https://en.wikipedia.org/wiki/Nonzero-rule)，默认的规则。
     - `evenodd`
-      - : [奇偶环绕规则](http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule)。
+      - : [奇偶环绕规则](https://en.wikipedia.org/wiki/Even%E2%80%93odd_rule)。
 
 - `path`
-  - : 需要填充的{{domxref("Path2D")}} 路径。
+  - : 需要填充的 {{domxref("Path2D")}} 路径。
+
+### 返回值
+
+无（{{jsxref("undefined")}}）。
 
 ## 示例
 
 ### 填充矩形
 
-这是一段简单的代码片段，使用 `fill` 方法填充路径。
+该示例使用 `fill()` 方法填充矩形。
 
 #### HTML
 
@@ -55,6 +62,41 @@ ctx.fill();
 
 {{ EmbedLiveSample('填充矩形', 700, 180) }}
 
+### 指定路径和填充规则
+
+该示例将一些相交的线条保存到一个 `Path2D` 对象中。然后使用 `fill()` 方法将对象渲染到画布上。通过使用 `"evenodd"` 规则，在对象中心留下一个未填充的孔；默认情况下（使用 `"nonzero"` 规则），这个孔也会被填充。
+
+#### HTML
+
+```html
+
+```
+
+#### JavaScript
+
+```js
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+
+// 创建路径
+let region = new Path2D();
+region.moveTo(30, 90);
+region.lineTo(110, 20);
+region.lineTo(240, 130);
+region.lineTo(60, 130);
+region.lineTo(190, 20);
+region.lineTo(270, 90);
+region.closePath();
+
+// 填充路径
+ctx.fillStyle = "green";
+ctx.fill(region, "evenodd");
+```
+
+#### 结果
+
+{{ EmbedLiveSample('指定路径和填充规则', 700, 180) }}
+
 ## 规范
 
 {{Specifications}}
@@ -65,4 +107,5 @@ ctx.fill();
 
 ## 参见
 
-- 接口定义， {{domxref("CanvasRenderingContext2D")}}.
+- 定义该方法的接口：{{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasRenderingContext2D.fillStyle")}}
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/fontstretch/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/fontstretch/index.md
new file mode 100644
index 00000000000000..130384367a5db7
--- /dev/null
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/fontstretch/index.md
@@ -0,0 +1,104 @@
+---
+title: CanvasRenderingContext2D：fontStretch 属性
+slug: Web/API/CanvasRenderingContext2D/fontStretch
+l10n:
+  sourceCommit: 44cf523714745d626317192bfbe849b47144f3ab
+---
+
+{{APIRef}}
+
+[Canvas API](/zh-CN/docs/Web/API/Canvas_API) 的 **`CanvasRenderingContext2D.fontStretch`** 属性指定绘制文本时字体如何被扩展或压缩。
+
+该属性对应于 CSS 中的 [`font-stretch`](/zh-CN/docs/Web/CSS/font-stretch) 属性，当使用关键字时（百分比值不支持）。
+
+## 值
+
+字体的伸展值作为字符串。支持的值包括：`ultra-condensed`、`extra-condensed`、`condensed`、`semi-condensed`、`normal`（默认）、`semi-expanded`、`expanded`、`extra-expanded`、`ultra-expanded`。
+
+该属性可以用于获取或设置字体的伸展值。
+
+## 示例
+
+以下示例演示了如何使用 `fontStretch` 属性在 Canvas 中显示文本“Hello World”，并展示了每种支持的 `fontStretch` 值的效果。每个情况下，都会显示相应的伸展值。
+
+### HTML
+
+```html
+
+```
+
+### JavaScript
+
+首先获取 HTML 文件中声明的 canvas，并获取其 `CanvasRenderingContext2D` 对象，以便后续用于绘制文本。
+
+```js
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+```
+
+接下来，在示例中加载一个变宽度的变量字体。这是必要的，因为 `fontStretch` 只能拉伸具有拉伸信息的字体，否则文本将使用最接近的可用字体拉伸值（通常是正常宽度）。
+
+在这个示例中，我们使用 [`FontFace`](/zh-CN/docs/Web/API/FontFace) 定义了一个字体，这个字体是谷歌的 [Inconsolata](https://fonts.google.com/specimen/Inconsolata/tester) 字体，支持从 50% 到 200% 的字体宽度（允许我们展示 `ultra-condensed` 到 `ultra-expanded` 的 `fontStretch` 值）。然后将这个字体添加到文档的 [`FontFaceSet`](/zh-CN/docs/Web/API/FontFaceSet)（[`document.fonts`](/zh-CN/docs/Web/API/Document/fonts)）中，以便用于绘制。
+
+```js
+const fontFile = new FontFace(
+  "Inconsolata",
+  'url(https://fonts.gstatic.com/s/inconsolata/v31/QlddNThLqRwH-OJ1UHjlKENVzlm-WkL3GZQmAwPyya15.woff2) format("woff2")',
+  { stretch: "50% 200%" },
+);
+
+document.fonts.add(fontFile);
+```
+
+然后调用 [`FontFaceSet.load()`](/zh-CN/docs/Web/API/FontFaceSet/load) 来获取并加载谷歌字体。注意，这个调用设置了所需的字体大小，并返回一个在字体加载完成后兑现的 promise。
+
+接着，将下载的字体应用到上下文，并使用上下文根据每个关键字的伸展级别绘制文本。请注意，再次指定了所需字体的大小（这不必与加载的字体大小匹配）。
+
+```js
+document.fonts.load("30px Inconsolata").then(
+  () => {
+    ctx.font = "30px 'Inconsolata'";
+    // 默认值（normal）
+    ctx.fillText(`Hello world（默认：${ctx.fontStretch}）`, 5, 20);
+
+    ctx.fontStretch = "ultra-condensed";
+    ctx.fillText(`Hello world（${ctx.fontStretch}）`, 5, 50);
+
+    ctx.fontStretch = "extra-condensed";
+    ctx.fillText(`Hello world（${ctx.fontStretch}）`, 5, 80);
+
+    ctx.fontStretch = "condensed";
+    ctx.fillText(`Hello world（${ctx.fontStretch}）`, 5, 110);
+
+    ctx.fontStretch = "semi-condensed";
+    ctx.fillText(`Hello world（${ctx.fontStretch}）`, 5, 140);
+
+    ctx.fontStretch = "semi-expanded";
+    ctx.fillText(`Hello world（${ctx.fontStretch}）`, 5, 170);
+
+    ctx.fontStretch = "expanded";
+    ctx.fillText(`Hello world（${ctx.fontStretch}）`, 5, 200);
+
+    ctx.fontStretch = "extra-expanded";
+    ctx.fillText(`Hello world（${ctx.fontStretch}）`, 5, 230);
+
+    ctx.fontStretch = "ultra-expanded";
+    ctx.fillText(`Hello world（${ctx.fontStretch}）`, 5, 260);
+  },
+  (err) => {
+    console.error(err);
+  },
+);
+```
+
+### 结果
+
+{{ EmbedLiveSample('示例', 700, 300) }}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md
index 97d1f62812b865..9e42d49ec3523c 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md
@@ -1,26 +1,21 @@
 ---
-title: CanvasRenderingContext2D.imageSmoothingEnabled
+title: CanvasRenderingContext2D：imageSmoothingEnabled 属性
 slug: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled
+l10n:
+  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
 ---
 
 {{APIRef}}
 
-**`CanvasRenderingContext2D.imageSmoothingEnabled`** 是 Canvas 2D API 用来设置图片是否平滑的属性，true 表示图片平滑（默认值），false 表示图片不平滑。当我们获取 `imageSmoothingEnabled` 属性值时，它会返回最新设置的值。
+[Canvas API](/zh-CN/docs/Web/API/Canvas_API) 的 {{domxref("CanvasRenderingContext2D")}} 接口的 **`imageSmoothingEnabled`** 属性用于设置是否对缩放后的图片进行平滑处理，`true` 表示进行平滑处理（默认值），`false` 表示不进行。当我们获取 `imageSmoothingEnabled` 属性值时，它会返回最新设置的值。
 
-以缩放画布为例，这个属性对像素为主的游戏很有用。默认的改变大小的算法会造成图片模糊并且破坏图片原有的像素。如果那样的话，设置属性值为 false。参见 CSS {{cssxref("image-rendering")}} 属性。
+这个属性对像素为主的游戏或其他应用很有用。放大图像时，默认的调整大小的算法会使得像素变模糊。可以将此属性设为 `false` 来保证像素的清晰度。
 
-> **备注：** 你可以使用{{domxref("CanvasRenderingContext2D.imageSmoothingQuality", "imageSmoothingQuality")}}属性来调整平滑质量。
+> **备注：** 你可以使用 {{domxref("CanvasRenderingContext2D.imageSmoothingQuality", "imageSmoothingQuality")}} 属性来调整平滑质量。
 
-## 语法
+## 值
 
-```
-ctx.imageSmoothingEnabled = value;
-```
-
-### 选项
-
-- `value`
-  - : 一个{{jsxref("Boolean")}} 类型的值，表示图片是否平滑。
+一个布尔值，指示是否对缩放的图像进行平滑处理。默认值是 `true`。
 
 ## 示例
 
@@ -50,7 +45,7 @@ img.onload = () => {
   const w = img.width,
     h = img.height;
 
-  ctx.fillText("Source", w * 0.5, 20);
+  ctx.fillText("源文件", w * 0.5, 20);
   ctx.drawImage(img, 0, 24, w, h);
 
   ctx.fillText("Smoothing = TRUE", w * 2.5, 20);
@@ -77,5 +72,6 @@ img.onload = () => {
 
 ## 参见
 
-- 接口定义， {{domxref("CanvasRenderingContext2D")}}
+- 定义此属性的接口：{{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasRenderingContext2D.imageSmoothingQuality")}}
 - {{cssxref("image-rendering")}}
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md
index 4281e62440f0d5..85e277be50933c 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md
@@ -1,16 +1,18 @@
 ---
-title: CanvasRenderingContext2D.quadraticCurveTo()
+title: CanvasRenderingContext2D：quadraticCurveTo() 方法
 slug: Web/API/CanvasRenderingContext2D/quadraticCurveTo
+l10n:
+  sourceCommit: 005cc1fd55aadcdcbd9aabbed7d648a275f8f23a
 ---
 
 {{APIRef}}
 
-**`CanvasRenderingContext2D.quadraticCurveTo()`** 是 Canvas 2D API 新增二次贝塞尔曲线路径的方法。它需要 2 个点。第一个点是控制点，第二个点是终点。起始点是当前路径最新的点，当创建二次贝赛尔曲线之前，可以使用 `moveTo()` 方法进行改变。
+Canvas 2D API 的 **`CanvasRenderingContext2D.quadraticCurveTo()`** 方法用于新增二次[贝塞尔曲线](/zh-CN/docs/Glossary/Bezier_curve)路径。它需要 2 个点。第一个点是控制点，第二个点是终点。起始点是当前路径最新的点——在创建二次贝赛尔曲线之前，可以使用 {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} 方法进行改变。
 
 ## 语法
 
-```
-void ctx.quadraticCurveTo(cpx, cpy, x, y);
+```js-nolint
+quadraticCurveTo(cpx, cpy, x, y)
 ```
 
 ### 参数
@@ -24,11 +26,15 @@ void ctx.quadraticCurveTo(cpx, cpy, x, y);
 - `y`
   - : 终点的 y 轴坐标。
 
+### 返回值
+
+无（{{jsxref("undefined")}}）。
+
 ## 示例
 
-### `quadraticCurveTo` 如何工作
+### quadraticCurveTo 如何工作
 
-这是一段绘制二次贝赛尔曲线的简单的代码片段。控制点是红色，起点和终点是蓝色。
+这个示例展示如何绘制二次贝赛尔曲线。
 
 #### HTML
 
@@ -42,20 +48,20 @@ void ctx.quadraticCurveTo(cpx, cpy, x, y);
 const canvas = document.getElementById("canvas");
 const ctx = canvas.getContext("2d");
 
-// Quadratic Bézier curve
+// 二次贝塞尔曲线
 ctx.beginPath();
 ctx.moveTo(50, 20);
 ctx.quadraticCurveTo(230, 30, 50, 100);
 ctx.stroke();
 
-// Start and end points
+// 起始点和结束点
 ctx.fillStyle = "blue";
 ctx.beginPath();
-ctx.arc(50, 20, 5, 0, 2 * Math.PI); // Start point
-ctx.arc(50, 100, 5, 0, 2 * Math.PI); // End point
+ctx.arc(50, 20, 5, 0, 2 * Math.PI); // 起始点
+ctx.arc(50, 100, 5, 0, 2 * Math.PI); // 结束点
 ctx.fill();
 
-// Control point
+// 控制点
 ctx.fillStyle = "red";
 ctx.beginPath();
 ctx.arc(230, 30, 5, 0, 2 * Math.PI);
@@ -64,11 +70,13 @@ ctx.fill();
 
 #### 结果
 
+在这个示例中，控制点是红色的，起始点和结束点是蓝色的。
+
 {{ EmbedLiveSample('quadraticCurveTo 如何工作', 315, 165) }}
 
 ### 简单的二次曲线
 
-此示例使用`quadraticCurveTo()`绘制了简单的二次 Bézier 曲线。
+此示例使用 `quadraticCurveTo()` 绘制了简单的二次贝塞尔曲线。
 
 #### HTML
 
@@ -78,7 +86,7 @@ ctx.fill();
 
 #### JavaScript
 
-曲线从`moveTo()`指定的点开始：(20, 110)。控制点位于 (230, 150)。曲线在 (250, 20) 处结束。
+曲线从 `moveTo()` 指定的点开始：(20, 110)。控制点位于 (230, 150)。曲线在 (250, 20) 处结束。
 
 ```js
 const canvas = document.getElementById("canvas");
@@ -92,7 +100,7 @@ ctx.stroke();
 
 #### 结果
 
-{{ EmbedLiveSample('简单的二次曲线', 700, 360) }}
+{{ EmbedLiveSample('简单的二次曲线', 700, 180) }}
 
 ## 规范
 
@@ -102,5 +110,5 @@ ctx.stroke();
 
 {{Compat}}
 
-- 接口定义，{{domxref("CanvasRenderingContext2D")}}
-- [WikiPedia article on Bézier curves](http://en.wikipedia.org/wiki/B%C3%A9zier_curve).
+- 定义此方法的接口：{{domxref("CanvasRenderingContext2D")}}
+- [贝塞尔曲线](/zh-CN/docs/Glossary/Bezier_curve)
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/setlinedash/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/setlinedash/index.md
index 72cdbf50da9c79..597ba3b980d4ea 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/setlinedash/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/setlinedash/index.md
@@ -1,34 +1,36 @@
 ---
-title: CanvasRenderingContext2D.setLineDash()
+title: CanvasRenderingContext2D：setLineDash() 方法
 slug: Web/API/CanvasRenderingContext2D/setLineDash
+l10n:
+  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
 ---
 
 {{APIRef}}
 
-Canvas 2D API 的{{domxref("CanvasRenderingContext2D")}}接口的 **`setLineDash()`** 方法在填充线时使用虚线模式。它使用一组值来指定描述模式的线和间隙的交替长度。
+Canvas 2D API 的 {{domxref("CanvasRenderingContext2D")}} 接口的 **`setLineDash()`** 方法用于在描线时使用虚线模式。它使用一组值来指定描述模式的线和间隙的交替长度。
 
-> **备注：** 如果要切换回至实线模式，将 dash list 设置为一个空数组即可。
+> **备注：** 如果要切换回至实线模式，将虚线列表设置为空数组。
 
 ## 语法
 
-```js
-setLineDash(segments);
+```js-nolint
+setLineDash(segments)
 ```
 
 ### 参数
 
 - `segments`
-  - : 一个{{jsxref("Array")}}数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。如果数组元素的数量是奇数，数组的元素会被复制并重复。例如， `[5, 15, 25]` 会变成 `[5, 15, 25, 5, 15, 25]`。
+  - : 一个{{jsxref("Array", "数组", "", 1)}}，包含一组描述交替绘制线段和间隙（坐标空间单位）长度的数字。如果数组元素的数量是奇数，数组的元素会被复制和拼接。例如，`[5, 15, 25]` 会变成 `[5, 15, 25, 5, 15, 25]`。如果数组为空，则虚线列表会被清空，线条描边将恢复为实线。
 
 ### 返回值
 
-{{jsxref("undefined")}}
+无（{{jsxref("undefined")}}）。
 
 ## 示例
 
 ### 基本示例
 
-这是一段简单的代码片段，使用 `setLineDash` 方法绘制一条线段。
+这个示例使用了 `setLineDash()` 方法在一个实线上面绘制虚线。
 
 #### HTML
 
@@ -42,14 +44,14 @@ setLineDash(segments);
 const canvas = document.getElementById("canvas");
 const ctx = canvas.getContext("2d");
 
-// Dashed line
+// 虚线
 ctx.beginPath();
 ctx.setLineDash([5, 15]);
 ctx.moveTo(0, 50);
 ctx.lineTo(300, 50);
 ctx.stroke();
 
-// Solid line
+// 实线
 ctx.beginPath();
 ctx.setLineDash([]);
 ctx.moveTo(0, 100);
@@ -59,47 +61,6 @@ ctx.stroke();
 
 #### 结果
 
-```html hidden
-
-

-  
-  
-

-
-```
-
-```js hidden
-var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-var textarea = document.getElementById("code");
-var reset = document.getElementById("reset");
-var edit = document.getElementById("edit");
-var code = textarea.value;
-
-function drawCanvas() {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  eval(textarea.value);
-}
-
-reset.addEventListener("click", function () {
-  textarea.value = code;
-  drawCanvas();
-});
-
-edit.addEventListener("click", function () {
-  textarea.focus();
-});
-
-textarea.addEventListener("input", drawCanvas);
-window.addEventListener("load", drawCanvas);
-```
-
 {{ EmbedLiveSample('基本示例', 700, 360) }}
 
 ### 一些常见的模式
@@ -114,7 +75,7 @@ window.addEventListener("load", drawCanvas);
 
 #### JavaScript
 
-下面创建的`drawDashedLine()` 函数使得多个虚线的绘制变得简单。它接收模式数组作为其唯一参数。
+下面创建的 `drawDashedLine()` 函数使得多个虚线的绘制变得简单。它接收模式数组作为其唯一参数。
 
 ```js
 function drawDashedLine(pattern) {
@@ -136,10 +97,10 @@ drawDashedLine([10, 10]);
 drawDashedLine([20, 5]);
 drawDashedLine([15, 3, 3, 3]);
 drawDashedLine([20, 3, 3, 3, 3, 3, 3, 3]);
-drawDashedLine([12, 3, 3]); // Equals [12, 3, 3, 12, 3, 3]
+drawDashedLine([12, 3, 3]); // 等于 [12, 3, 3, 12, 3, 3]
 ```
 
-#### Result
+#### 结果
 
 {{ EmbedLiveSample('一些常见的模式', 700, 180) }}
 
@@ -153,6 +114,6 @@ drawDashedLine([12, 3, 3]); // Equals [12, 3, 3, 12, 3, 3]
 
 ## 参见
 
-- 接口定义，{{domxref("CanvasRenderingContext2D")}}
+- 定义此方法的接口：{{domxref("CanvasRenderingContext2D")}}
 - {{domxref("CanvasRenderingContext2D.getLineDash()")}}
 - {{domxref("CanvasRenderingContext2D.lineDashOffset")}}
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowblur/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowblur/index.md
index 1171a83589df50..995e062cb77e2f 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowblur/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowblur/index.md
@@ -1,26 +1,25 @@
 ---
-title: CanvasRenderingContext2D.shadowBlur
+title: CanvasRenderingContext2D：shadowBlur 属性
 slug: Web/API/CanvasRenderingContext2D/shadowBlur
+l10n:
+  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
 ---
 
 {{APIRef}}
 
-**`CanvasRenderingContext2D.shadowBlur`** 是 Canvas 2D API 描述模糊效果程度的属性；它既不对应像素值也不受当前转换矩阵的影响。默认值是 0。
+Canvas 2D API 的 **`CanvasRenderingContext2D.shadowBlur`** 属性用于描述模糊效果程度。默认值是 `0`（没有模糊）。
 
-## 语法
+> **备注：** 只有当 {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}} 属性设置为非透明值时，阴影才会被绘制。其中的 `shadowBlur`、{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}} 或 {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}} 属性中至少有一个必须是非零的。
 
-```
-ctx.shadowBlur = level;
-```
+## 值
 
-- `level`
-  - : 描述模糊效果程度的，float 类型的值。默认值是 0。负数、 {{jsxref("Infinity")}} 或者 {{jsxref("NaN")}} 都会被忽略。
+一个非负浮点数，指定阴影模糊的级别，其中 `0` 表示没有模糊，数字越大表示模糊程度越高。这个值不对应于像素数量，并且不受当前变换矩阵的影响。默认值为 `0`。负数、{{jsxref("Infinity")}} 和 {{jsxref("NaN")}} 将被忽略。
 
 ## 示例
 
 ### 为形状添加阴影
 
-这是一段简单的代码片段，使用 `shadowblur` 属性设置模糊阴影。注意：只有设置 shadowColor 属性值为不透明，阴影才会被绘制。
+这个例子向一个矩形添加了模糊的阴影。`shadowColor` 属性设置阴影的颜色，而 `shadowBlur` 设置阴影的模糊程度。
 
 #### HTML
 
@@ -34,11 +33,11 @@ ctx.shadowBlur = level;
 const canvas = document.getElementById("canvas");
 const ctx = canvas.getContext("2d");
 
-// Shadow
+// 阴影
 ctx.shadowColor = "red";
 ctx.shadowBlur = 15;
 
-// Rectangle
+// 矩形
 ctx.fillStyle = "blue";
 ctx.fillRect(20, 20, 150, 100);
 ```
@@ -55,6 +54,18 @@ ctx.fillRect(20, 20, 150, 100);
 
 {{Compat}}
 
+### WebKit/Blink 特定注意事项
+
+在基于 WebKit 和 Blink 的浏览器中，除了这个属性外，还实现了一个非标准且已弃用的方法 `ctx.setShadow()`。
+
+```js
+setShadow(width, height, blur, color, alpha);
+setShadow(width, height, blur, graylevel, alpha);
+setShadow(width, height, blur, r, g, b, a);
+setShadow(width, height, blur, c, m, y, k, a);
+```
+
 ## 参见
 
-- 接口定义， {{domxref("CanvasRenderingContext2D")}}.
+- 定义该属性的接口：{{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasRenderingContext2D.shadowColor")}}
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsetx/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsetx/index.md
index 8b1a640f9419fb..4eec6d2ef1552d 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsetx/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsetx/index.md
@@ -1,26 +1,25 @@
 ---
-title: CanvasRenderingContext2D.shadowOffsetX
+title: CanvasRenderingContext2D：shadowOffsetX 属性
 slug: Web/API/CanvasRenderingContext2D/shadowOffsetX
+l10n:
+  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
 ---
 
 {{APIRef}}
 
-**`CanvasRenderingContext2D.shadowOffsetX`** 是 Canvas 2D API 描述阴影水平偏移距离的属性。
+Canvas 2D API 的**`CanvasRenderingContext2D.shadowOffsetX`** 属性用于描述阴影水平偏移距离。
 
-## Syntax
+> **备注：** 只有当 `shadowColor` 属性设置为非透明值时，阴影才会被绘制。其中的 {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}、`shadowOffsetX` 或 {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}} 属性中至少有一个必须是非零的。
 
-```
-ctx.shadowOffsetX = offset;
-```
+## 值
 
-- `offset`
-  - : 阴影水平偏移距离的 float 类型的值。默认值是 0。 {{jsxref("Infinity")}} 或者{{jsxref("NaN")}}都会被忽略。
+一个浮点数，指定阴影在水平方向上的偏移距离。正值向右偏移，负值向左偏移。默认值为 `0`（无水平偏移）。{{jsxref("Infinity")}} 和 {{jsxref("NaN")}} 值将被忽略。
 
 ## 示例
 
 ### 水平移动阴影
 
-这是一段简单的代码片段，使用 `shadowOffsetX` 属性设置阴影的水平偏移量。注意：将 shadowColor 属性设置成不透明，阴影才会被绘制。
+这个例子向一个矩形添加了模糊的阴影。{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}} 属性设置阴影的颜色，`shadowOffsetX` 设置阴影向右偏移 25 个单位，而 {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}} 设置阴影的模糊等级为 10。
 
 #### HTML
 
@@ -34,12 +33,12 @@ ctx.shadowOffsetX = offset;
 const canvas = document.getElementById("canvas");
 const ctx = canvas.getContext("2d");
 
-// Shadow
+// 阴影
 ctx.shadowColor = "red";
 ctx.shadowOffsetX = 25;
 ctx.shadowBlur = 10;
 
-// Rectangle
+// 矩形
 ctx.fillStyle = "blue";
 ctx.fillRect(20, 20, 150, 100);
 ```
@@ -58,7 +57,7 @@ ctx.fillRect(20, 20, 150, 100);
 
 ## 参见
 
-- 接口定义，{{domxref("CanvasRenderingContext2D")}}.
+- 定义该属性的接口：{{domxref("CanvasRenderingContext2D")}}
 - {{domxref("CanvasRenderingContext2D.shadowOffsetY")}}
 - {{domxref("CanvasRenderingContext2D.shadowColor")}}
 - {{domxref("CanvasRenderingContext2D.shadowBlur")}}
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsety/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsety/index.md
index a34924fb84b6f2..a2621c183ea38d 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsety/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsety/index.md
@@ -1,26 +1,25 @@
 ---
-title: CanvasRenderingContext2D.shadowOffsetY
+title: CanvasRenderingContext2D：shadowOffsetY 属性
 slug: Web/API/CanvasRenderingContext2D/shadowOffsetY
+l10n:
+  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
 ---
 
 {{APIRef}}
 
-**`CanvasRenderingContext2D.shadowOffsetY`** 是 Canvas 2D API 描述阴影垂直偏移距离的属性。
+Canvas 2D API 的 **`CanvasRenderingContext2D.shadowOffsetY`** 属性用于描述阴影垂直偏移距离。
 
-## 语法
+> **备注：** 只有当 `shadowColor` 属性设置为非透明值时，阴影才会被绘制。其中的 {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}、{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}} 或 `shadowOffsetY` 属性中至少有一个必须是非零的。
 
-```
-ctx.shadowOffsetY = offset;
-```
+## 值
 
-- `offset`
-  - : 阴影垂直偏移距离的 float 类型的值。默认值是 0。 {{jsxref("Infinity")}} 或者{{jsxref("NaN")}} 都会被忽略。
+一个浮点数，指定阴影在垂直方向上的偏移距离。正值向上偏移，负值向下偏移。默认值为 `0`（无垂直偏移）。{{jsxref("Infinity")}} 和 {{jsxref("NaN")}} 值将被忽略。
 
 ## 示例
 
 ### 垂直移动阴影
 
-这是一段简单的代码片段，使用 `shadowOffsetY` 属性绘制阴影垂直偏移量。注意：将 shadowColor 属性设置成不透明，阴影才会被绘制。
+这个例子向一个矩形添加了模糊的阴影。`shadowColor` 属性设置阴影的颜色，`shadowOffsetY` 设置阴影向下偏移 25 个单位，而 `shadowBlur` 设置阴影的模糊等级为 10。
 
 #### HTML
 
@@ -34,12 +33,12 @@ ctx.shadowOffsetY = offset;
 const canvas = document.getElementById("canvas");
 const ctx = canvas.getContext("2d");
 
-// Shadow
+// 阴影
 ctx.shadowColor = "red";
 ctx.shadowOffsetY = 25;
 ctx.shadowBlur = 10;
 
-// Rectangle
+// 矩形
 ctx.fillStyle = "blue";
 ctx.fillRect(20, 20, 150, 80);
 ```
@@ -58,7 +57,7 @@ ctx.fillRect(20, 20, 150, 80);
 
 ## 参见
 
-- 接口定义，{{domxref("CanvasRenderingContext2D")}}.
+- 定义该属性的接口：{{domxref("CanvasRenderingContext2D")}}
 - {{domxref("CanvasRenderingContext2D.shadowOffsetX")}}
 - {{domxref("CanvasRenderingContext2D.shadowColor")}}
 - {{domxref("CanvasRenderingContext2D.shadowBlur")}}
diff --git a/files/zh-cn/web/api/document/elementfrompoint/index.md b/files/zh-cn/web/api/document/elementfrompoint/index.md
index db6aacf1222a64..ea6922478d27f5 100644
--- a/files/zh-cn/web/api/document/elementfrompoint/index.md
+++ b/files/zh-cn/web/api/document/elementfrompoint/index.md
@@ -1,67 +1,78 @@
 ---
-title: DocumentOrShadowRoot.elementFromPoint()
+title: Document：elementFromPoint() 方法
 slug: Web/API/Document/elementFromPoint
+l10n:
+  sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b
 ---
 
-{{APIRef("Shadow DOM")}}{{SeeCompatTable}}
+{{APIRef("DOM")}}
 
-{{domxref("DocumentOrShadowRoot")}} 接口的 **`elementFromPoint()`** 方法返回给定坐标点下最上层的 {{domxref('element')}} 元素。
+{{domxref("Document")}} 对象的 **`elementFromPoint()`** 方法返回给定相对于视口的坐标点下最上层的 {{domxref("Element")}}。
 
-If the element at the specified point belongs to another document (for example, an iframe's subdocument), the subdocument's parent element is returned (the iframe itself). If the element at the given point is anonymous or XBL generated content, such as a textbox's scroll bars, then the first non-anonymous ancestor element (for example, the textbox) is returned.
+如果指定位置的元素属于另一个文档（例如 {{HTMLElement("iframe")}} 的文档），则会返回该文档的父元素（`
+```
+
+`