From eecf64b910896274c6a90dc2304ae0f70682a3b3 Mon Sep 17 00:00:00 2001 From: A1lo Date: Sat, 2 Sep 2023 11:26:34 +0800 Subject: [PATCH 001/600] zh-cn: init the translation of "XPath Axes" (#15582) --- files/zh-cn/web/xpath/axes/index.md | 37 +++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 files/zh-cn/web/xpath/axes/index.md diff --git a/files/zh-cn/web/xpath/axes/index.md b/files/zh-cn/web/xpath/axes/index.md new file mode 100644 index 00000000000000..6af1c2b1728b25 --- /dev/null +++ b/files/zh-cn/web/xpath/axes/index.md @@ -0,0 +1,37 @@ +--- +title: 轴 +slug: Web/XPath/Axes +--- + +{{XsltSidebar}} + +[XPath](/zh-CN/docs/Web/XPath) 规范中定义了 13 种不同的轴（axes）。轴表示与上下文节点的关系，并用于定位树上相对于该节点的节点。 + +有关使用 XPath 表达式的更多信息，请参阅[使用 XSLT 转换 XML](/zh-CN/docs/Web/XSLT/Transforming_XML_with_XSLT)的[扩展阅读](/zh-CN/docs/Web/XSLT/Transforming_XML_with_XSLT#扩展阅读)部分，以及 [xpath 规范的“axes”部分](https://www.w3.org/TR/xpath-30/#axes)。 + +- `ancestor` + - : 表示上下文节点的所有祖先，从父节点开始，一直到根节点。 +- `ancestor-or-self` + - : 表示上下文节点及其所有祖先，包括根节点。 +- `attribute` + - : 表示上下文节点的属性。只有元素有属性。该轴可以用 at 符号（`@`）缩写。 +- `child` + - : 表示上下文节点的子节点。如果 XPath 表达式没有指定轴，则默认情况下会解释为该轴。由于只有根节点或元素节点有子节点，因此任何其他用法都不会选择任何内容。 +- `descendant` + - : 表示上下文节点的所有子节点，以及子节点的所有子节点，依此类推。**不**包括属性和命名空间节点——`attribute` 节点的 `parent` 是一个元素节点，但 `attribute` 节点不是其父节点的子节点。 +- `descendant-or-self` + - : 表示上下文节点及其所有子节点。**不**包括属性和命名空间节点——`attribute` 节点的 `parent` 是一个元素节点，但 `attribute` 节点不是其父节点的子节点。 +- `following` + - : 表示上下文节点之后出现的，除了任何 `descendant`、`attribute` 和 `namespace` 节点之外的所有节点。 +- `following-sibling` + - : 表示与上下文节点具有相同父节点并在源文档中出现在上下文节点之后的所有节点。 +- `namespace`（_不支持_） + - : 表示上下文节点的作用域内的所有节点。对于该轴，上下文节点必须是元素节点。 +- `parent` + - : 表示上下文节点的父节点。它可以缩写为两个句点（`..`）。 +- `preceding` + - : 表示文档中在上下文节点之前的，除了任何 `ancestor`、`attribute` 和 `namespace` 节点之外的所有节点。 +- `preceding-sibling` + - : 表示与上下文节点具有相同父节点并在源文档中出现在上下文节点之前的所有节点。 +- `self` + - : 表示上下文节点本身。它可以缩写为一个句点（`.`）。 From 3a0e073b401157574e92dd71b2b07b672ac32d54 Mon Sep 17 00:00:00 2001 From: bboyeong <63862534+2kkeullim@users.noreply.github.com> Date: Sat, 2 Sep 2023 14:20:11 +0900 Subject: [PATCH 002/600] =?UTF-8?q?[ko]=20Functions/get=20=EC=86=8C?= =?UTF-8?q?=EC=8A=A4=20=EC=BB=A4=EB=B0=8B=20=EC=B6=94=EA=B0=80=20=EB=B0=8F?= =?UTF-8?q?=20=EB=B2=88=EC=97=AD=20=EC=B5=9C=EC=8B=A0=ED=99=94=20(#15547)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [feat] get 문서 최신화 * en-US ko로 변경 * 전체적인 줄바꿈 수정 * 유사 속성을 의사 속성으로 변경 --------- Co-authored-by: boyeong_ban --- .../reference/functions/get/index.md | 130 +++++++++++------- 1 file changed, 80 insertions(+), 50 deletions(-) diff --git a/files/ko/web/javascript/reference/functions/get/index.md b/files/ko/web/javascript/reference/functions/get/index.md index 868883955ffda9..9a6762ba3dd176 100644 --- a/files/ko/web/javascript/reference/functions/get/index.md +++ b/files/ko/web/javascript/reference/functions/get/index.md @@ -1,59 +1,48 @@ --- title: 접근자 slug: Web/JavaScript/Reference/Functions/get +l10n: + sourceCommit: a71b8929628a2187794754c202ad399fe357141b --- {{jsSidebar("Functions")}} -**`get`** 구문은 객체의 속성 접근 시 호출할 함수를 바인딩합니다. +**`get`** 구문은 객체의 속성 접근 시 호출할 함수를 바인딩합니다. 이 구문은 [classes](/ko/docs/Web/JavaScript/Reference/Classes)에서도 사용할 수 있습니다. {{EmbedInteractiveExample("pages/js/functions-getter.html")}} ## 구문 -```js -{get prop() { ... } } -{get [expression]() { ... } } +```js-nolint +{ get prop() { /* … */ } } +{ get [expression]() { /* … */ } } ``` +몇 가지 추가적인 구문의 제한이 있습니다. + +- getter는 매개변수가 정확히 0개여야 합니다. + ### 매개변수 - `prop` - - : 주어진 함수를 바인딩할 속성 이름. + - : 지정된 함수에 바인딩할 속성의 이름입니다. [객체 초기자](/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer)의 다른 속성과 동일한 방식으로 문자열 리터럴, 숫자 리터럴 또는 식별자일 수 있습니다. - `expression` - - : ECMAScript 2015 이후, 주어진 함수를 바인딩할 속성 이름을 구하는 표현식을 사용할 수도 있습니다. + - : 속성 이름에 대한 표현식을 사용하여 지정된 함수에 바인딩할 수도 있습니다. ## 설명 -때로는 동적으로 계산한 값을 반환하는 속성이 필요하거나, 명시적인 함수 호출 없이도 객체의 내부 변수 상태를 반영하는 값을 나타내고 싶은 경우가 있습니다. JavaScript에서는 이런 경우 사용할 수 있도록 접근자(_getter_)라는 기능을 제공합니다. - -어떤 속성에 접근자를 바인딩하는 동시에, 해당 속성이 값도 가지도록 할 수는 없습니다. 그러나 접근자와 설정자(_setter_)를 함께 사용해서, 접근과 할당 모두 되는 '유사 속성'을 만들 수는 있습니다. +동적으로 계산된 값을 반환하는 속성에 대한 접근을 허용하는 것이 바람직한 경우도 있습니다. +명시적인 메서드 호출을 사용하지 않고도 내부 변수의 상태를 반영하고 싶을 수 있습니다. +JavaScript에서는 접근자(_getter_)를 사용하여 이 작업을 수행할 수 있습니다. -`get` 구문을 이용할 때는 다음 사항을 주의하세요. - -- 접근자의 식별자는 숫자나 문자열일 수 있습니다. -- 접근자 함수는 매개변수를 가질 수 없습니다. -- 객체 리터럴에서, 같은 속성 키에 다수의 접근자를 바인딩할 수 없습니다. - - ```js example-bad - { - get x() { }, get x() { } - } - ``` - -- 객체 리터럴에서, 접근자는 데이터 속성과 같은 키를 사용할 수 없습니다. - - ```js example-bad - { - x: ..., get x() { } - } - ``` +접근자와 설정자를 함께 사용하여 일종의 의사 속성을 생성하는 것은 가능하지만 속성에 바인딩된 접근자와 해당 속성이 실제로 값을 보유하도록 하는 것은 동시에 불가능합니다. ## 예제 ### 객체 초기자에서 새로운 객체의 접근자 정의하기 -다음 예제는 객체 `obj`에 유사 속성 `latest`를 생성합니다. `latest`는 배열 `log`의 마지막 요소를 반환합니다. +다음 예제는 객체 `obj`에 의사 속성 `latest`를 생성합니다. +`latest`는 배열 `log`의 마지막 요소를 반환합니다. ```js const obj = { @@ -68,6 +57,32 @@ console.log(obj.latest); // "test" `latest`에 다른 값을 할당하려 해도 아무 변화도 없을 것입니다. +### 클래스에서 접근자 사용 + +똑같은 구문을 사용해 클래스 인스턴스에서 사용할 수 있는 공용 인스턴스 접근자를 정의할 수 있습니다. 클래스에서는 메서드 사이에 쉼표로 구분할 필요가 없습니다. + +```js +class ClassWithGetSet { + #msg = "hello world"; + get msg() { + return this.#msg; + } + set msg(x) { + this.#msg = `hello ${x}`; + } +} + +const instance = new ClassWithGetSet(); +console.log(instance.msg); // "hello world" + +instance.msg = "cake"; +console.log(instance.msg); // "hello cake" +``` + +접근자 속성은 클래스의 `prototype`으로 정의되므로 클래스의 모든 인스턴스에서 공유됩니다. 객체 리터럴의 접근자 속성과 달리 클래스의 접근자 속성은 열거할 수 없습니다. + +Static 설정자와 private 설정자는 유사한 구문을 사용하며, [`static`](/ko/docs/Web/JavaScript/Reference/Classes/static)과 [private class features](/ko/docs/Web/JavaScript/Reference/Classes/Private_class_fields) 페이지에 설명되어 있습니다. + ### `delete` 연산자로 접근자 제거하기 접근자를 삭제하려면 간단히 {{jsxref("Operators/delete", "delete")}} 연산자를 사용하세요. @@ -84,12 +99,12 @@ delete obj.latest; const o = { a: 0 }; Object.defineProperty(o, "b", { - get: function () { + get() { return this.a + 1; }, }); -console.log(o.b); // 접근자 실행, a + 1 반환 (0 + 1 = 1) +console.log(o.b); // 접근자 실행, a + 1 반환 (즉, 1) ``` ### 계산된 속성 이름 사용하기 @@ -120,34 +135,46 @@ MyConstants.foo = "bar"; console.log(MyConstants.foo); // 'foo', 정적 접근자의 값 변경 불가 ``` -### 똑똑한 / 느긋한 접근자 +### 똑똑한 / 자기 덮어쓰기 / 느긋한 접근자 -접근자를 사용하면 객체에 속성을 **정의**하되, 접근하기 전에는 속성의 값을 **계산**하지 않을 수 있습니다. 접근자는 값이 실제로 필요한 상황이 오기 전까지 계산 비용을 미루는 것입니다. 사용하지 않으면 비용을 지불할 일도 없습니다. +접근자를 사용하면 객체에 속성을 **정의**하되, 접근하기 전에는 속성의 값을 **계산**하지 않을 수 있습니다. +접근자는 값이 실제로 필요한 상황이 오기 전까지 계산 비용을 미루는 것입니다. +사용하지 않으면 비용을 지불할 일도 없습니다. -속성 값의 계산을 느긋(_lazy_)하게 만들거나 미루고, 추가 접근에 사용할 수 있도록 캐시에 저장하는 추가 최적화 기법은 **똑똑한(_smart_) 또는 메모화([메모이제이션](https://ko.wikipedia.org/wiki/%EB%A9%94%EB%AA%A8%EC%9D%B4%EC%A0%9C%EC%9D%B4%EC%85%98)) 접근자**라고 합니다. 똑똑한 접근자 속성의 값은 접근자를 처음 호출할 때 계산하는 동시에 캐시에 저장됩니다. 덕분에 속성에 추가 접근 시 캐시에서 값을 즉시 반환하므로 값을 다시 계산하는 수고를 피할 수 있습니다. 똑똑한 접근자는 다음과 같은 상황에 유용합니다. +속성 값의 계산을 느긋하게 만들거나 미루고, 나중에 접근할 수 있도록 캐시에 저장하는 +추가 최적화 기법은 **똑똑한(_smart_) 또는 메모화([메모이제이션](https://ko.wikipedia.org/wiki/%EB%A9%94%EB%AA%A8%EC%9D%B4%EC%A0%9C%EC%9D%B4%EC%85%98)) 접근자**라고 합니다. +똑똑한 접근자 속성의 값은 접근자를 처음 호출할 때 계산하는 동시에 캐시에 저장됩니다. +덕분에 속성에 추가 접근 시 캐시에서 값을 즉시 반환하므로 값을 다시 계산하는 수고를 피할 수 있습니다. +똑똑한 접근자는 다음과 같은 상황에 유용합니다. - 값의 계산 비용이 큰 경우. (RAM이나 CPU 시간을 많이 소모하거나, 워커 스레드를 생성하거나, 원격 파일을 불러오는 등) -- 값이 지금 당장 필요하지 않은 경우. 나중에 사용할 수도 있고, 일부 상황에선 아예 사용하지 않을 수 있는 경우입니다. -- 절대 바뀌지 않는 값이거나 다시 계산해서는 안 되는 값을 여러 번 사용하는 경우. +- 값이 지금 당장 필요하지 않은 경우. 나중에 사용할 수도 있고, 경우에 따라 아예 사용되지 않을 수 있습니다. +- 값을 사용하면 여러 번 접근하게 되므로 변경되지 않거나 다시 계산할 필요가 없는 값은 다시 계산할 필요가 없습니다. -> **참고:** 달리 말하자면, 변화할 수 있는 값에 똑똑한 접근자를 사용해서는 안됩니다. 값이 바뀌어야 하는 상황에서도 접근자의 값은 항상 동일할 것이기 때문입니다. +> **참고:** 즉, 값이 변경될 것으로 예상되는 속성에 대해 게으른 접근자를 작성하면 값을 다시 계산하지 않으므로 게으른 접근자를 작성해서는 안 됩니다. > > 모든 접근자가 처음부터 '느긋'하며 '메모화'되는 것은 아닙니다. 이런 동작이 필요하면 직접 구현해야 합니다. -다음 예제의 접근자 속성은 어느 객체의 자체 속성으로 존재합니다. 이 속성에 접근하는 순간, 접근자는 스스로 자신을 객체에서 제거하는 동시에 같은 이름의 속성을 다시 추가하지만, 이때는 접근자가 아니라 데이터 속성으로 추가합니다. 마지막으로 그 속성의 값을 반환합니다. +다음 예제의 접근자 속성은 어느 객체의 자체 속성으로 존재합니다. +이 속성에 접근하는 순간, 접근자는 스스로 자신을 객체에서 제거하는 동시에 같은 이름의 속성을 다시 추가하지만, 이때는 접근자가 아니라 데이터 속성으로 추가합니다. +마지막으로 그 속성의 값을 반환합니다. ```js -get notifier() { - delete this.notifier; - return this.notifier = document.getElementById("bookmarked-notification-anchor"); -}, +const obj = { + get notifier() { + delete this.notifier; + this.notifier = document.getElementById("bookmarked-notification-anchor"); + return this.notifier; + }, +}; ``` -### `get` Vs. `defineProperty` +### get vs. defineProperty -`get` 키워드와 {{jsxref("Object.defineProperty()")}}는 비슷한 결과를 내지만, {{jsxref("classes", "클래스", "", 1)}}에 사용할 경우 미묘한 차이가 생깁니다. +`get` 키워드와 {{jsxref("Object.defineProperty()")}}는 비슷한 결과를 내지만, {{jsxref("classes")}}에 사용할 경우 미묘한 차이가 생깁니다. -`get`을 사용할 경우, 해당 속성은 인스턴스의 프로토타입에 정의됩니다. 그러나 {{jsxref("Object.defineProperty()")}}를 사용할 경우 속성을 인스턴스 자체에 직접 정의하게 됩니다. +`get`을 사용할 경우, 해당 속성은 인스턴스의 프로토타입에 정의됩니다. +그러나 {{jsxref("Object.defineProperty()")}}를 사용할 경우 속성을 인스턴스 자체에 직접 정의하게 됩니다. ```js class Example { @@ -179,9 +206,12 @@ console.log( ## 같이 보기 -- [설정자](/ko/docs/Web/JavaScript/Reference/Functions/set) -- {{jsxref("Operators/delete", "delete")}} +- [객체로 작업하기](/ko/docs/Web/JavaScript/Guide/Working_with_objects) +- [함수](/ko/docs/Web/JavaScript/Reference/Functions) +- [`설정자`](/ko/docs/Web/JavaScript/Reference/Functions/set) - {{jsxref("Object.defineProperty()")}} -- [`Object.prototype.__defineGetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__) -- [`Object.prototype.__defineSetter__()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__) -- JavaScript 안내서의 [접근자와 설정자 정의하기](/ko/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters) +- [객체 초기자](/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer) +- {{jsxref("Statements/class", "class")}} +- [속성 접근자](/ko/docs/Web/JavaScript/Reference/Operators/Property_accessors) +- Jeff Walden (2010)의 [Incompatible ES5 change: literal getter and setter functions must now have exactly zero or one arguments](https://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/) +- Jeff Walden (2010)의 [More SpiderMonkey changes: ancient, esoteric, very rarely used syntax for creating getters and setters is being removed](https://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/) From e5156ee04f756d55dc248e591f3a737f96766499 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Sat, 2 Sep 2023 14:20:57 +0900 Subject: [PATCH 003/600] [ko]: add index.md in `web/glossary/alpn` (#15567) [add]: add index.md in web/glossary/alpn --- files/ko/glossary/alpn/index.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 files/ko/glossary/alpn/index.md diff --git a/files/ko/glossary/alpn/index.md b/files/ko/glossary/alpn/index.md new file mode 100644 index 00000000000000..bc0051b0417bc4 --- /dev/null +++ b/files/ko/glossary/alpn/index.md @@ -0,0 +1,23 @@ +--- +title: ALPN +slug: Glossary/ALPN +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**애플리케이션 계층 프로토콜 협상** (**ALPN**)은 암호화된 연결을 협상하는 애플리케이션 계층 프로토콜을 식별하기 위한 {{Glossary("TLS")}} 확장 입니다([RFC 7301](https://www.rfc-editor.org/rfc/rfc7301)). + +| 프로토콜 | 인증 시퀀스 | +| --------------------------------------------- | ------------------------------------------------------ | +| {{Glossary("HTTP", "HTTP/1.1")}} | `0x68 0x74 0x74 0x70 0x2F 0x31 0x2E 0x31` ("http/1.1") | +| {{Glossary("HTTP 2", "HTTP/2")}} | `0x68 0x32` ("h2") | +| 일반 텍스트를 통한 HTTP/2 {{Glossary("TCP")}} | `0x68 0x32 0x63` ("h2c") | +| {{Glossary("HTTP 3", "HTTP/3")}} | `0x68 0x33` ("h3") | + +## See also + +- [성능 리소스 타이밍 `nextHopProtocol`](/ko/docs/Web/API/PerformanceResourceTiming/nextHopProtocol) property +- [PerformanceObserver API](/ko/docs/Web/API/PerformanceObserver) +- [IANA 등록 ALPN 식별자](https://www.iana.org/assignments/tls-extensiontype-values/tls-extensiontype-values.xhtml#alpn-protocol-ids) From 6b99148d3fa76f8215c7c03a63edab2e780640ec Mon Sep 17 00:00:00 2001 From: KyeongSang Yu Date: Sat, 2 Sep 2023 14:22:11 +0900 Subject: [PATCH 004/600] [ko] add translation to push api in Web API (#15525) * add translation to push api --- files/ko/web/api/push_api/index.md | 71 ++++++++++++++++++++++++++++++ 1 file changed, 71 insertions(+) create mode 100644 files/ko/web/api/push_api/index.md diff --git a/files/ko/web/api/push_api/index.md b/files/ko/web/api/push_api/index.md new file mode 100644 index 00000000000000..5e869faf0644c4 --- /dev/null +++ b/files/ko/web/api/push_api/index.md @@ -0,0 +1,71 @@ +--- +title: Push API +slug: Web/API/Push_API +l10n: + sourceCommit: 3de6b951c2d3b03c7c4a8d8e92e35ebcb4639af2 +--- + +{{DefaultAPISidebar("Push API")}} + +**Push API**는 웹 애플리케이션이 사용자 에이전트에서 웹 앱이 활성 상태에 있는지 또는 현재 로드 중인지 여부와 관계없이 서버로부터 푸시 메시지를 수신할 수 있는 기능을 제공합니다. 이를 통해 개발자는 미리 동의한 사용자에게 비동기식 알림 및 업데이트를 전달할 수 있으므로 적시에 새로운 콘텐츠에 대한 참여도를 높일 수 있습니다. + +## Push 개념 및 사용법 + +> **경고:** PushManager 구독을 구현할 때는 앱에서 CSRF/XSRF 문제를 방지하는 것이 매우 중요합니다. 자세한 내용은 다음 문서를 참조하세요. +> +> - [Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html) +> - [Preventing CSRF and XSRF Attacks](https://blog.codinghorror.com/preventing-csrf-and-xsrf-attacks/) + +앱이 푸시 메시지를 수신하려면 활성 [서비스 워커](/ko/docs/Web/API/Service_Worker_API)가 있어야 합니다. 서비스 워커가 활성화되면 {{domxref("PushManager.subscribe()")}}를 사용하여 푸시 알림을 구독할 수 있습니다. + +결과 {{domxref("PushSubscription")}}에는 애플리케이션이 푸시 메시지를 보내는 데 필요한 모든 정보(엔드포인트 및 데이터 전송에 필요한 암호화 키)가 포함됩니다. + +서비스 워커는 수신 푸시 메시지를 처리하기 위해 필요에 따라 시작되어 {{domxref("ServiceWorkerGlobalScope.push_event", "onpush")}} 이벤트 핸들러로 전달됩니다. 이를 통해 앱은 알림을 표시하는 등의 방식으로 수신되는 푸시 메시지에 반응할 수 있습니다(예: {{domxref("ServiceWorkerRegistration.showNotification()")}} 사용). + +각 구독은 서비스 워커마다 고유합니다. 구독의 엔드포인트는 고유한 [기능(capability) URL](https://www.w3.org/TR/capability-urls/)입니다. 엔드포인트에 대한 지식만 있으면 애플리케이션에 메시지를 보낼 수 있습니다. 따라서 엔드포인트 URL은 비밀로 유지해야 하며, 그렇지 않으면 다른 애플리케이션이 애플리케이션에 푸시 메시지를 보낼 수 있습니다. + +푸시 메시지를 전달하기 위해 서비스 워커를 활성화하면 리소스 사용량, 특히 배터리 사용량이 증가할 수 있습니다. 브라우저마다 이를 처리하는 방식이 다르며, 현재 표준 메커니즘은 없습니다. Firefox에서는 애플리케이션에 전송할 수 있는 푸시 메시지의 개수(할당량)가 제한되어 있지만 알림을 생성하는 푸시 메시지는 이 제한에서 제외됩니다. 이 제한은 사이트를 방문할 때마다 새로 고쳐집니다. Chrome에서는 제한이 없습니다. + +## 인터페이스 + +- {{domxref("PushEvent")}} + - : {{domxref("ServiceWorker")}}의 [전역 범위(global scope)](/ko/docs/Web/API/ServiceWorkerGlobalScope)로 전송되는 푸시 작업을 나타냅니다. 여기에는 애플리케이션에서 {{domxref("PushSubscription")}}으로 전송된 정보가 포함됩니다. +- {{domxref("PushManager")}} + - : 타사 서버로부터 알림을 수신하고 푸시 알림을 위한 URL을 요청하는 방법을 제공합니다. +- {{domxref("PushMessageData")}} + - : 서버에서 전송한 푸시 데이터에 대한 접근을 제공하고 수신된 데이터를 조작하는 메서드를 포함합니다. +- {{domxref("PushSubscription")}} + - : 구독의 URL 엔드포인트를 제공하고 푸시 서비스에서 구독을 취소할 수 있습니다. +- {{domxref("PushSubscriptionOptions")}} + - : 푸시 구독과 관련된 옵션을 나타냅니다. + +## 서비스 워커 추가 기능 + +푸시 API 사양에는 푸시 메시지를 사용하는 진입점을 제공하고, 푸시 및 구독 변경 이벤트를 모니터하고 응답하기 위해 [Service Worker API](/ko/docs/Web/API/Service_Worker_API)에 대한 다음과 같은 추가 사항들이 명시되어 있습니다. + +- {{domxref("ServiceWorkerRegistration.pushManager")}} {{ReadOnlyInline}} + - : 구독, 활성 구독 가져오기, 푸시 권한 상태 접근 등 푸시 구독을 관리하기 위한 {{domxref("PushManager")}} 인터페이스에 대한 참조를 반환합니다. 푸시 메시징을 사용하기 위한 진입점입니다. +- {{domxref("ServiceWorkerGlobalScope.push_event", "onpush")}} + - : {{domxref("ServiceWorkerGlobalScope/push_event", "push")}} 이벤트가 발생할 때마다, 즉 서버 푸시 메시지가 수신될 때마다 이벤트 핸들러가 실행됩니다. +- {{domxref("ServiceWorkerGlobalScope.pushsubscriptionchange_event", "onpushsubscriptionchange")}} + - : 푸시 구독이 무효화되었거나 곧 무효화될 때(예: 푸시 서비스가 만료 시간을 설정한 경우) 등 {{domxref("ServiceWorkerGlobalScope/pushsubscriptionchange_event", "pushsubscriptionchange")}} 이벤트가 발생할 때마다 이벤트 핸들러가 실행됩니다. + +## 예제 + +Mozilla의 [서비스 워커 쿡북](https://github.com/mdn/serviceworker-cookbook)에는 유용한 푸시 예제가 많이 포함되어 있습니다. + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [Mozilla의 푸시 서비스를 통해 VAPID 식별 웹푸시 알림 보내기](https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/) +- [푸시 알림 개요](https://web.dev/push-notifications-overview/) +- [서비스 워커 API](/ko/docs/Web/API/Service_Worker_API) + +{{DefaultAPISidebar("Push API")}} From aaff5a9577427d5c56f9eaedc4a16dc5a2098b23 Mon Sep 17 00:00:00 2001 From: XcantloadX <3188996979@qq.com> Date: Sat, 2 Sep 2023 20:27:32 +0800 Subject: [PATCH 005/600] zh-cn: fix typo (#15593) --- .../learn/html/introduction_to_html/debugging_html/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/learn/html/introduction_to_html/debugging_html/index.md b/files/zh-cn/learn/html/introduction_to_html/debugging_html/index.md index f39ad0299a964a..63e638cc8519a3 100644 --- a/files/zh-cn/learn/html/introduction_to_html/debugging_html/index.md +++ b/files/zh-cn/learn/html/introduction_to_html/debugging_html/index.md @@ -83,7 +83,7 @@ HTML 本身不容易出现语法错误，因为浏览器是以宽松模式运行 - {{htmlelement("p","段落（Paragraph）")}} 和 {{htmlelement("li","列表项（list item）")}} 元素没有结束标签。但是由于元素的结束和另一个的开始很容易推断出来，因此上图中并没有太严重的渲染错误。 - 第一个 {{htmlelement("strong")}} 元素没有结束标签。这就严重了，因为该元素结束的位置难以确定。事实上所有剩余文本都加粗了。 - - 一下嵌套有问题：`重点（strong）重点强调（strongly emphasised）？这又是什么鬼？`。浏览器很难做出正确解释，理由同上。 + - 以下嵌套有问题：`重点（strong）重点强调（strongly emphasised）？这又是什么鬼？`。浏览器很难做出正确解释，理由同上。 - [`href`](/zh-CN/docs/Web/HTML/Element/a#href) 属性缺少了一个双引号。从而导致了一个最严重的问题：整个链接完全没有渲染出来。 5. 下面暂时忽略源代码中的标记，先看一下浏览器渲染出的标记。打开浏览器的开发者工具。如果不太熟悉，请先阅读 [浏览器开发工具概览](/zh-CN/docs/Learn/Discover_browser_developer_tools)。 From f40e908da24590f74d408e3c7f09626d4370baed Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 28 Aug 2023 22:00:30 +0900 Subject: [PATCH 006/600] =?UTF-8?q?2023/06/08=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/glossary/time_to_first_byte/index.md | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 files/ja/glossary/time_to_first_byte/index.md diff --git a/files/ja/glossary/time_to_first_byte/index.md b/files/ja/glossary/time_to_first_byte/index.md new file mode 100644 index 00000000000000..77f4b74841b891 --- /dev/null +++ b/files/ja/glossary/time_to_first_byte/index.md @@ -0,0 +1,22 @@ +--- +title: Time to first byte （最初のバイトまでの時間） +slug: Glossary/Time_to_first_byte +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**Time to First Byte** (TTFB) とは、ブラウザーがページをリクエストしてから、サーバーから最初の情報を受信するまでの時間を指します。この時間には [DNS](/ja/docs/Glossary/DNS) ルックアップと、 [TCP](/ja/docs/Glossary/TCP) ハンドシェイクと [SSL](/ja/docs/Glossary/SSL) ハンドシェイク（リクエストが[HTTPS](/ja/docs/Glossary/HTTPS)を使用している場合）を使用して接続を確立する時間が含まれます。 + +TTFB は、リクエストの開始からレスポンスの開始までにかかる時間をミリ秒単位で表したものです。 + +```plain +TTFB = responseStart - navigationStart +``` + +## 関連情報 + +- [典型的な HTTP セッション](/ja/docs/Web/HTTP/Session) +- [PerformanceResourceTiming](/ja/docs/Web/API/PerformanceResourceTiming) +- [PerformanceTiming](/ja/docs/Web/API/PerformanceTiming) From 1305b9941824126ccf30b56bf3831af458795a0d Mon Sep 17 00:00:00 2001 From: MikeCAT Date: Mon, 28 Aug 2023 22:07:47 +0900 Subject: [PATCH 007/600] Translate CanvasRenderingContext2D Shadows --- .../shadowblur/index.md | 71 +++++++++++ .../shadowcolor/index.md | 114 ++++++++++++++++++ .../shadowoffsetx/index.md | 63 ++++++++++ .../shadowoffsety/index.md | 63 ++++++++++ 4 files changed, 311 insertions(+) create mode 100644 files/ja/web/api/canvasrenderingcontext2d/shadowblur/index.md create mode 100644 files/ja/web/api/canvasrenderingcontext2d/shadowcolor/index.md create mode 100644 files/ja/web/api/canvasrenderingcontext2d/shadowoffsetx/index.md create mode 100644 files/ja/web/api/canvasrenderingcontext2d/shadowoffsety/index.md diff --git a/files/ja/web/api/canvasrenderingcontext2d/shadowblur/index.md b/files/ja/web/api/canvasrenderingcontext2d/shadowblur/index.md new file mode 100644 index 00000000000000..d81b471f4588ac --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/shadowblur/index.md @@ -0,0 +1,71 @@ +--- +title: "CanvasRenderingContext2D: shadowBlur プロパティ" +slug: Web/API/CanvasRenderingContext2D/shadowBlur +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef}} + +Canvas 2D API の **`CanvasRenderingContext2D.shadowBlur`** プロパティは、影にかかるぼかしの量を設定します。デフォルトは `0` (ぼかしなし) です。 + +> **メモ:** 影はプロパティ {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}} が透明でない値に設定されているときのみ描画されます。さらに、プロパティ `shadowBlur`、{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}、{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}} のいずれかがゼロでない値に設定されていなければなりません。 + +## 値 + +影のぼかしの度合いを設定する非負の浮動小数点数です。`0` がぼかしなしを表し、数を大きくするとぼかしが強くなります。この値はピクセル数には対応せず、現在の変換行列の影響を受けません。デフォルト値は `0` です。負の値、{{jsxref("Infinity")}}、{{jsxref("NaN")}} は無視されます。 + +## 例 + +### 図形に影を加える + +この例では、長方形にぼかしがかかった影を加えます、`shadowColor` プロパティで影の色を設定し、`shadowBlur` でぼかしの度合いを設定します。 + +#### HTML + +```html + +``` + +#### JavaScript + +```js +const canvas = document.getElementById("canvas"); +const ctx = canvas.getContext("2d"); + +// 影 +ctx.shadowColor = "red"; +ctx.shadowBlur = 15; + +// 長方形 +ctx.fillStyle = "blue"; +ctx.fillRect(20, 20, 150, 100); +``` + +#### 結果 + +{{ EmbedLiveSample('Adding_a_shadow_to_a_shape', 700, 180) }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{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.shadowColor")}} diff --git a/files/ja/web/api/canvasrenderingcontext2d/shadowcolor/index.md b/files/ja/web/api/canvasrenderingcontext2d/shadowcolor/index.md new file mode 100644 index 00000000000000..c4de2ef030e52e --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/shadowcolor/index.md @@ -0,0 +1,114 @@ +--- +title: "CanvasRenderingContext2D: shadowColor プロパティ" +slug: Web/API/CanvasRenderingContext2D/shadowColor +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef}} + +Canvas 2D API の **`CanvasRenderingContext2D.shadowColor`** プロパティは、影の色を設定します。 + +描画時の影の不透明度は、塗りつぶしでは {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} の色の、線の描画では {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}} の色の影響を受けることを覚えておいてください。 + +> **メモ:** 影はプロパティ `shadowColor` が透明でない色に設定されているときのみ描画されます。さらに、プロパティ {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}、{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}、{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}} のいずれかがゼロでない値に設定されていなければなりません。 + +## 値 + +[CSS](/ja/docs/Web/CSS) の {{cssxref("<color>")}} の値として解析される文字列です。デフォルト値は完全に透明な黒です。 + +## 例 + +### 図形に影を加える + +この例では、2 個の正方形に影を加えます。正方形のうち 1 個は塗りつぶされ、もう 1 個は線で描かれます。`shadowColor` プロパティで影の色を設定し、`shadowOffsetX` と `shadowOffsetY` で影の図形からの相対位置を設定します。 + +#### HTML + +```html + +``` + +#### JavaScript + +```js +const canvas = document.getElementById("canvas"); +const ctx = canvas.getContext("2d"); + +// 影 +ctx.shadowColor = "red"; +ctx.shadowOffsetX = 10; +ctx.shadowOffsetY = 10; + +// 塗りつぶす長方形 +ctx.fillRect(20, 20, 100, 100); + +// 線で描く長方形 +ctx.lineWidth = 6; +ctx.strokeRect(170, 20, 100, 100); +``` + +#### 結果 + +{{ EmbedLiveSample('Adding_a_shadow_to_shapes', 700, 180) }} + +### 半透明な図形の影 + +影の不透明度は (`shadowColor` では完全に不透明な値を設定していても) 親オブジェクトの透明度の影響を受けます。この例では、半透明の色の長方形を線で描き、塗りつぶしを行います。 + +#### HTML + +```html + +``` + +#### JavaScript + +塗りつぶす影のアルファ値は `.8 * .2` すなわち `.16` になります。線で描く影のアルファ値は `.8 * .6` すなわち `.48` になります。 + +```js +const canvas = document.getElementById("canvas"); +const ctx = canvas.getContext("2d"); + +// 影 +ctx.shadowColor = "rgba(255, 0, 0, .8)"; +ctx.shadowBlur = 8; +ctx.shadowOffsetX = 30; +ctx.shadowOffsetY = 20; + +// 塗りつぶす長方形 +ctx.fillStyle = "rgba(0, 255, 0, .2)"; +ctx.fillRect(10, 10, 150, 100); + +// 線で描く長方形 +ctx.lineWidth = 10; +ctx.strokeStyle = "rgba(0, 0, 255, .6)"; +ctx.strokeRect(10, 10, 150, 100); +``` + +#### 結果 + +{{ EmbedLiveSample('Shadows_on_translucent_shapes', 700, 180) }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{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")}} diff --git a/files/ja/web/api/canvasrenderingcontext2d/shadowoffsetx/index.md b/files/ja/web/api/canvasrenderingcontext2d/shadowoffsetx/index.md new file mode 100644 index 00000000000000..dc4aab5acfd305 --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/shadowoffsetx/index.md @@ -0,0 +1,63 @@ +--- +title: "CanvasRenderingContext2D: shadowOffsetX プロパティ" +slug: Web/API/CanvasRenderingContext2D/shadowOffsetX +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef}} + +Canvas 2D API の **`CanvasRenderingContext2D.shadowOffsetX`** プロパティは、影を横方向にずらす距離を設定します。 + +> **メモ:** 影はプロパティ {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}} が透明でない値に設定されているときのみ描画されます。さらに、プロパティ {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}、`shadowOffsetX`、{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}} のいずれかがゼロでない値に設定されていなければいけません。 + +## 値 + +影を横方向にずらす距離を表す浮動小数点数です。正の値を設定すると右に、負の値を設定すると左にずらします。デフォルト値は `0` (横方向にずらさない) です。{{jsxref("Infinity")}} や {{jsxref("NaN")}} は無視されます。 + +## 例 + +### 影を横方向にずらす + +この例では、長方形にぼかしがかかった影を加えます。プロパティ {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}} で影の色を設定し、`shadowOffsetX` で影のオフセットを右に 25 単位に設定し、{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} で影のぼかしレベルを 10 に設定します。 + +#### HTML + +```html + +``` + +#### JavaScript + +```js +const canvas = document.getElementById("canvas"); +const ctx = canvas.getContext("2d"); + +// 影 +ctx.shadowColor = "red"; +ctx.shadowOffsetX = 25; +ctx.shadowBlur = 10; + +// 長方形 +ctx.fillStyle = "blue"; +ctx.fillRect(20, 20, 150, 100); +``` + +#### 結果 + +{{ EmbedLiveSample('Moving_a_shadow_horizontally', 700, 180) }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティを定義しているインターフェイス: {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.shadowOffsetY")}} +- {{domxref("CanvasRenderingContext2D.shadowColor")}} +- {{domxref("CanvasRenderingContext2D.shadowBlur")}} diff --git a/files/ja/web/api/canvasrenderingcontext2d/shadowoffsety/index.md b/files/ja/web/api/canvasrenderingcontext2d/shadowoffsety/index.md new file mode 100644 index 00000000000000..ab99da16959433 --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/shadowoffsety/index.md @@ -0,0 +1,63 @@ +--- +title: "CanvasRenderingContext2D: shadowOffsetY プロパティ" +slug: Web/API/CanvasRenderingContext2D/shadowOffsetY +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef}} + +Canvas 2D API の **`CanvasRenderingContext2D.shadowOffsetY`** は、影を縦方向にずらす距離を設定します。 + +> **メモ:** 影はプロパティ {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}} が透明でない値に設定されているときのみ描画されます。さらに、プロパティ {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}、{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}、`shadowOffsetY` のいずれかがゼロでない値に設定されていなければいけません。 + +## 値 + +影を縦方向にずらす距離を表す浮動小数点数です。正の値を設定すると下に、負の値を設定すると上にずらします。デフォルト値は `0` (縦方向にずらさない) です。{{jsxref("Infinity")}} や {{jsxref("NaN")}} は無視されます。 + +## 例 + +### 影を縦方向にずらす + +この例では、長方形にぼかしがかかった影を加えます。プロパティ {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}} で影の色を設定し、`shadowOffsetY` で影のオフセットを下に 25 単位に設定し、{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} で影のぼかしレベルを 10 に設定します。 + +#### HTML + +```html + +``` + +#### JavaScript + +```js +const canvas = document.getElementById("canvas"); +const ctx = canvas.getContext("2d"); + +// 影 +ctx.shadowColor = "red"; +ctx.shadowOffsetY = 25; +ctx.shadowBlur = 10; + +// 長方形 +ctx.fillStyle = "blue"; +ctx.fillRect(20, 20, 150, 80); +``` + +#### 結果 + +{{ EmbedLiveSample('Moving_a_shadow_vertically', 700, 180) }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティを定義しているインターフェイス: {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.shadowOffsetX")}} +- {{domxref("CanvasRenderingContext2D.shadowColor")}} +- {{domxref("CanvasRenderingContext2D.shadowBlur")}} From 27ff93d30924989005af586bdf3bae52b24192d7 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 3 Sep 2023 01:57:36 +0900 Subject: [PATCH 008/600] =?UTF-8?q?2023/08/17=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= =?UTF-8?q?=20(#15455)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2023/08/17 時点の英語版に同期 * 引用符の欠落を修正 --- .../first_steps/a_first_splash/index.md | 336 +++++++----------- 1 file changed, 130 insertions(+), 206 deletions(-) diff --git a/files/ja/learn/javascript/first_steps/a_first_splash/index.md b/files/ja/learn/javascript/first_steps/a_first_splash/index.md index 625b2a6a24a070..e05d058d850ad4 100644 --- a/files/ja/learn/javascript/first_steps/a_first_splash/index.md +++ b/files/ja/learn/javascript/first_steps/a_first_splash/index.md @@ -1,142 +1,48 @@ --- -title: JavaScriptへの最初のダイブ +title: JavaScript の最初の一歩 slug: Learn/JavaScript/First_steps/A_first_splash +l10n: + sourceCommit: eab7a9c4c0d4251829e19500fa94865f9b5f56c7 --- {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}} -JavaScript の理論、そしてそれを使ってできることについて学んだところで、完全に実用的なチュートリアルを通じて、JavaScript の基本的な機能についての短期集中コースをお見せします。ここでは、簡単な「数字を当てる」ゲームをステップバイステップで構築します。 +JavaScript の理論や何ができるかを学んだところで、実践的なチュートリアルをガイドすることで、単純な JavaScript プログラムを作成するプロセスがどのようなものなのかを解説します。ここでは単純な「数当てゲーム」を手順を追って作っていきます。 -| 前提条件: | 基本的なコンピューターの知識および HTML と CSS への理解、JavaScript とは何かを知っている。 | -| --------- | ------------------------------------------------------------------------------------------ | -| 目的: | 簡単な JavaScript を書いてみて、JavaScript のプログラムを書くために必要な知識を会得する。 | + + + + + + + + + + + +
前提条件: + 基本的なコンピューターリテラシー、 HTML と CSS の基本的な理解、 JavaScript とは何かを理解していること。 +
目的: + JavaScript を書く最初の経験をし、少なくとも JavaScript プログラムを書くことの基本的な理解を得ること。 +
-ここでは、JavaScript (とその他のプログラミング言語) がどのように動くのかという高度なコンセプトを紹介したいので、一度ですべての詳細を理解する必要はありません。詳細については続く記事にてご紹介しますので！ +ここでは実に明確な目標を設定したいと思います。この記事の終わりまでに JavaScript を習得することや、あなたに依頼するコードをすべて理解することは期待されていません。その代わりに、 JavaScript の機能がどのように連携して動作するのか、 JavaScript を書くことがどのような感じなのか、そのイメージをつかんでもらいたいと思います。この後の記事で、ここで示した機能をすべてさらに詳しく説明しますので、すぐに理解できなくても心配しないでください。 -> **メモ:** JavaScript の機能として紹介する、関数や繰り返しなどの機能は、ほとんどが他のプログラミング言語にもあります。書き方は異なりますが、コンセプトは大体同じです。 +> **メモ:** JavaScript の機能として紹介する、関数や繰り返しなどの機能は、ほとんどが他のプログラミング言語にもあります。書き方は異なりますが、概念は大体同じです。 ## プログラマーのように考える -プログラミングで一番難しいのは、書き方を覚えることではなく、現実の問題にどう適用するかということです。プログラマーのように考え始める必要があります — それは一般的に、そのプログラムが何をしなければならないかという説明を見て、それを満たすためにコードのどんな機能を用いるかを考え、さらにそれを組み合わせていかなければなりません。 +プログラミングで一番難しいのは、書き方を覚えることではなく、現実の問題にどう適用するかということです。プログラマーのように考え始める必要があります。それは一般的に、そのプログラムが何をしなければならないかという説明を見て、それを満たすためにコードのどんな機能を用いるかを考え、さらにそれを組み合わせていかなければなりません。 -これには努力・プログラミング文法の経験・練習に加え、少しの想像力が必要です。たくさんコードを書けばもっと慣れていくでしょう。たったの 5 分で「プログラマー脳」を開発することは約束できませんが、このコースを通じてプログラマーのように考えるたくさんの機会を提供したいと思います。 +これには努力、プログラミング構文の経験、練習に加え、多少の想像力が必要です。たくさんコードを書けばもっと慣れていくでしょう。たったの 5 分で「プログラマー脳」を開発することは約束できませんが、このコースを通じてプログラマーのように考えるたくさんの機会を提供したいと思います。 まずはそれを念頭に置いてから、この記事で作るプログラムの実例を見てみましょう。さらにその後、具体的な手順に落とし込む方法について学習しましょう。 -## 例: 数字当てゲーム +## 例: 数当てゲーム この記事では、以下に示す簡単なゲームを作る方法を紹介します。 -```html hidden - - - - - - 数字当てゲーム - - - - -

数字当てゲーム

-

1 から 100 までの数字を当ててみて！10 回以内に当てられるでしょうか。選んだ数字が大きいか小さいかを表示します。

-
-
-

-

-

-
- - - - - -``` - -{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }} +{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game", 900, 300)}} さあ、ゲームで遊んでみてください。次に進む前にゲームに慣れておきましょう。 @@ -171,11 +77,11 @@ JavaScript の理論、そしてそれを使ってできることについて学 9. ゲームがもう一度始まったら、画面とロジックが完全にリセットされるようにして、1.に戻る。 -さあ、先に進みましょう。この手順をどのようにコードにするのか見て、JavaScript の機能を探求していきましょう。 +さあ、先に進みましょう。この手順をどのようにコードにするのか見て、 JavaScript の機能を探求していきましょう。 -### まず初めに +### 初期設定 -チュートリアルを開始するにあたり、自分のコンピューターに [number-guessing-game-start.html](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html) ファイル ([こちらでデモが見られます](http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html)) をコピーしてください。テキストエディターとブラウザーの両方でそのファイルを開いてください。すると、簡単な見出しと説明の段落、予想を入力するフォームが見えるでしょう。ただし、そのフォームはまだ何もできません。 +チュートリアルを開始するにあたり、自分のコンピューターに [number-guessing-game-start.html](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html) ファイル（[こちらでデモが見られます](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html)）をコピーしてください。テキストエディターとブラウザーの両方でそのファイルを開いてください。すると、簡単な見出しと説明の段落、予想を入力するフォームが見えるでしょう。ただし、そのフォームはまだ何もできません。 コードを入力するのはすべて HTML の一番下にある {{htmlelement("script")}} 要素の中です。 @@ -185,7 +91,7 @@ JavaScript の理論、そしてそれを使ってできることについて学 ``` -### データを保持する変数を追加する +### データを格納する変数を追加する 始めましょう。まず、{{htmlelement("script")}} 要素の中に以下の内容を書いてみてください。 @@ -203,14 +109,18 @@ let guessCount = 1; let resetButton; ``` -上記のコードはプログラムが使用するデータを保持する変数と定数をセットアップしています。変数とは基本的には値 (数字や文字など) の入れ物です。 `let` (か `var`) キーワードに続いて変数の名前を書くことで、変数を作成します (これらのキーワードの違いは[以降の記事](/ja/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let)で見ます) 。定数は変更しない値を保持するのに、 `const` キーワードといっしょに使います。この場合では、定数をユーザーインターフェイスのパーツへの参照を保存するのに使っていて、一部の内部のテキストは変わるかも知れませんが、参照される HTML 要素は同じままです。 +上記の部分のコードは、プログラムが使用するデータを格納する変数と定数をセットアップしています。 + +変数とは基本的には値（数字やテキストの文字列など）の名前です。 `let` キーワードに続いて変数の名前を書くことで、変数を作成します。 + +定数も値に名前を付けるために使用しますが、変数とは異なり、一度設定した値を変更することはできません。この用途では、ユーザーインターフェイスの部品への参照を格納するために定数を使用しています。これらの要素の中のテキストは変わるかもしれませんが、それぞれの定数は常に初期化されたのと同じ HTML 要素を参照しています。定数を作成するには、キーワード `const` の後に定数の名前を続けます。 -等号記号 ( `=` ) に続いて、与えたい値を書いて、変数や定数に値を代入できます。 +変数や定数に値を割り当てるには、等号 (`=`) に続けて与えたい値を指定します。 -この例では: +この例では次のことが行われます。 -- 最初の変数 ( `randomNumber` ) には数学的なアルゴリズムにより計算された 1 から 100 までのランダムな数字が代入されます。 -- 続く 3 つの変数 ( `guesses`、`lastResult`、`lowOrHi` ) には、以下に示す HTML の段落の場所がそれぞれに保持されます。後ほど段落に値を追加するために使用します。 (すべて`
` 要素内にあり、後にゲーム再開時にリセットするのにすべてを選択するのに使われるのに注意してください): +- 最初の変数 (`randomNumber`) には、数学的なアルゴリズムにより計算された 1 から 100 までのランダムな数字が代入されます。 +- 最初の 3 つの定数は、それぞれ HTML の結果の段落への参照を格納するために作られており、後のコードで段落に値を挿入するために使用されます（それらは `
` 要素の中にあることに注意してください。この要素は、後でゲームを再開するときに、 3 つすべてを選択してリセットするために使用します）。 ```html
@@ -223,14 +133,14 @@ let resetButton; - 次の 2 つの定数にはテキスト入力フォームおよび送信ボタンへの参照が保持され、後で予想の送信をコントロールする際に使用されます。 ```html - - + + + ``` -- 最後の 2 つの変数はプレイヤーが予想した回数を記録するため 1 を (プレイヤーが何回予想したかの回数を追跡します) 、そしてまだ存在していない(あとで追加する)リセットボタンへの参照を保持します。 +- 最後の 2 つの変数は、プレイヤーが予想した回数を記録するため 1 を（プレイヤーが何回予想したかの回数を追跡します）、そしてまだ存在していない（あとで追加する）リセットボタンへの参照を保持します。 -> **メモ:** 変数や定数についてはこのコースの間に、[次の記事](/ja/docs/user:chrisdavidmills/variables)を始めとして何度も出てきます。 +> **メモ:** 変数や定数についてはこのコースの間、[次の記事](/ja/docs/Learn/JavaScript/First_steps/Variables)を始めとして何度も出てきます。 ### 関数 @@ -238,7 +148,7 @@ let resetButton; ```js function checkGuess() { - alert("ここはプレースホルダです"); + alert("I am a placeholder"); } ``` @@ -246,7 +156,7 @@ function checkGuess() { 関数を実行したい場合には、関数の名前に続いて括弧を書きます。 -それでは試してみましょう。コードを保存してブラウザーを再読み込みしてみてください。[開発者ツールの JavaScript コンソール](/ja/docs/Learn/Common_questions/What_are_browser_developer_tools)を開いてください。そして次のコードを実行します。 +それでは試してみましょう。コードを保存してブラウザーを再読み込みしてみてください。[開発者ツールの JavaScript コンソール](/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)を開いてください。そして次のコードを実行します。 ```js checkGuess(); @@ -260,7 +170,7 @@ checkGuess(); JavaScript で演算子を使用して値の確認をしたり、計算したり、文字を結合したりなど、いろいろなことができます。 -コードを保存してブラウザーを再読み込みしてみてください。まだ開いていなければ、[開発者ツールの JavaScript コンソール](/ja/docs/Learn/Common_questions/What_are_browser_developer_tools)を開いて、表の「例」の列に書いてある通りに入力してみましょう。例を一つ入力したら、その都度 Return/Enter キーを押してください。結果が表示されるはずです。 +コードを保存してブラウザーを再読み込みしてみてください。まだ開いていなければ、[開発者ツールの JavaScript コンソール](/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)を開いて、表の「例」の列に書いてある通りに入力してみましょう。例を一つ入力したら、その都度 Return/Enter キーを押してください。結果が表示されるはずです。 まずは算術演算子の例を見てください。 @@ -271,30 +181,21 @@ JavaScript で演算子を使用して値の確認をしたり、計算したり | `*` | 乗算 | `3 * 7` | | `/` | 除算 | `10 / 5` | -また、 `+` 演算子は 2 つの文字を繋げて一つにするときにも使います。(プログラミングでは文字列を*結合*すると言います。) 下の例も試してみてください。 - -```js -let name = "ビンゴさん"; -name; -let hello = "が、こんにちは！と言っています。"; -hello; -let greeting = name + hello; -greeting; -``` - -累算[代入演算子](/ja/docs/Web/JavaScript/Reference/Operators/Assignment_Operators)と呼ばれるもっと短い書き方もあります。すでにある文字列に、さらに文字を追加した結果を返したい場合などに使います。例えば、 +[複合代入演算子](/ja/docs/Web/JavaScript/Reference/Operators#代入演算子)と呼ばれるもっと短い書き方もあります。すでにある文字列に、さらに文字を追加した結果を返したい場合などに使います。例えば、 ```js -name += "が、こんにちは！と言っています。"; +let number1 = 1; +number1 += 2; ``` -のように書いたとき、次と同じです: +これは次のものと同等です。 ```js -name = name + "が、こんにちは！と言っています。"; +let number2 = 1; +number2 = number2 + 2; ``` -true/false テスト（例えば条件内 - [below](#conditionals)参照）を実行しているとき、[比較演算子](/ja/docs/Web/JavaScript/Reference/Operators/Comparison_Operators)を使用します。例えば： +true/false テスト（例えば条件内 - [下記](#条件式)参照）を実行しているとき、[比較演算子](/ja/docs/Web/JavaScript/Reference/Operators)を使用します。例えば、 @@ -352,6 +253,28 @@ true/false テスト（例えば条件内 - [below](#conditionals)参照）を
+### テキスト文字列 + +文字列はテキストを表すのに使用します。文字列変数はすでに見てきました。以下のコードでは `"I am a placeholder"` が文字列です。 + +```js +function checkGuess() { + alert("I am a placeholder"); +} +``` + +文字列は二重引用符 (`"`) または一重引用符 (`'`) を用いて宣言することができますが、単一の文字列宣言の先頭と末尾には同じ形式を使用する必要があります: `"I am a placeholder `" と書くことはできません。 + +バックスティック(`` ` ``)を用いて文字列を宣言することもできます。このように宣言された文字列は「テンプレートリテラル」と呼ばれ、いくつかの特別なプロパティがあります。具体的な性質として、文字列の中に他にも変数や発生した式を埋め込むことができます。 + +```js +const name = "Mahalia"; + +const greeting = `Hello ${name}`; +``` + +これは文字列を連結する仕組みを提供します。 + ### 条件式 先ほどの `checkGuess()` 関数に話を戻します。当然ですが、ただ単にプレースホルダメッセージを出したいわけではありませんよね。この関数にはプレイヤーの予想が正しいかどうかを調べて適切に返事をすることを望みます。 @@ -360,27 +283,28 @@ true/false テスト（例えば条件内 - [below](#conditionals)参照）を ```js function checkGuess() { - let userGuess = Number(guessField.value); + const userGuess = Number(guessField.value); if (guessCount === 1) { - guesses.textContent = "前回の予想: "; + guesses.textContent = "Previous guesses:"; } - guesses.textContent += userGuess + " "; + guesses.textContent = `${guesses.textContent} ${userGuess}`; if (userGuess === randomNumber) { - lastResult.textContent = "おめでとう! 正解です!"; + lastResult.textContent = "Congratulations! You got it right!"; lastResult.style.backgroundColor = "green"; lowOrHi.textContent = ""; setGameOver(); } else if (guessCount === 10) { - lastResult.textContent = "!!!ゲームオーバー!!!"; + lastResult.textContent = "!!!GAME OVER!!!"; + lowOrHi.textContent = ""; setGameOver(); } else { - lastResult.textContent = "間違いです!"; + lastResult.textContent = "Wrong!"; lastResult.style.backgroundColor = "red"; if (userGuess < randomNumber) { - lowOrHi.textContent = "今の予想は小さすぎです!"; + lowOrHi.textContent = "Last guess was too low!"; } else if (userGuess > randomNumber) { - lowOrHi.textContent = "今の予想は大きすぎです!"; + lowOrHi.textContent = "Last guess was too high!"; } } @@ -392,17 +316,17 @@ function checkGuess() { たくさん書きましたね！各部分に分割して、それぞれの部分を詳細に見て何をしているか説明しましょう。 -- 関数の最初の行 (上のコードの 2 行目) で、`userGuess` という変数を宣言して、現在のテキストフィールドに入力された値をセットしています。そして、組み込みの `Number()` 関数を呼び出して、テキストフィールドに入力された値が間違いなく数値であることも確認しています。 -- 次に、初めて条件分岐を伴うコードブロックが出てきます (3 行目～ 5 行目)。条件分岐は、条件の判定結果が真 (true) であるかどうかによって、次に実行するコードが変わります。見た目が少しだけ関数に似ていますが、違うものです。条件分岐の最も単純な書き方は `if` キーワードから始まり、括弧が続き、中括弧が続きます。括弧の中には分岐する条件を書きます。条件が `true` となれば、中括弧の中にあるコードが実行されます。条件が `true` にならなければ、中括弧の次のコードまで移動します。今回の条件は `guessCount` 変数が `1` であるかどうかを判定しています。(つまり、プレイヤーの初回の予想かどうかを判定しているのです。) +- 関数の最初の行（上のコードの 2 行目）で、`userGuess` という変数を宣言して、現在のテキストフィールドに入力された値をセットしています。そして、組み込みの `Number()` 関数を呼び出して、テキストフィールドに入力された値が間違いなく数値であることも確認しています。この変数は変更しないので、 `const` を使用して宣言します。 +- 次に、初めて条件分岐を伴うコードブロックが出てきます。条件分岐は、条件の判定結果が真 (true) であるかどうかによって、次に実行するコードが変わります。見た目が少しだけ関数に似ていますが、違うものです。条件分岐の最も単純な書き方は `if` キーワードから始まり、括弧が続き、中括弧が続きます。括弧の中には分岐する条件を書きます。条件が `true` となれば、中括弧の中にあるコードが実行されます。条件が `true` にならなければ、中括弧の次のコードまで移動します。今回の条件は `guessCount` 変数が `1` であるかどうかを判定しています。（つまり、プレイヤーの初回の予想かどうかを判定しているのです。） ```js guessCount === 1; ``` - もしそうなら、`guesses` 段落 ({{htmlelement("p")}}要素) の内容を "`前回の予想:`" に変更します。違うなら、何もしません。 + もしそうなら、guesses の段落（{{htmlelement("p")}} 要素）の内容を `Previous guesses:` に変更します。違うなら、何もしません。 -- 6 行目では、`guesses` 段落の最後にスペースを付けて、現在の `userGuess` 変数の値を追加しています。なので、予想が表示されるときにはスペースで区切られて表示されます。 -- 次の部分 (8 行目～ 24 行目) には、確認すべきことがいくつかあります。 +- 次に、テンプレートリテラルを使用して、現在の `userGuess` 変数の値を空白と共に `guesses` の段落の末尾に追加しています。 +- 次の部分には、確認すべきことがいくつかあります。 - 最初の `if(){ }` は、プレイヤーの予想が、JavaScript のコードの先頭で設定したランダムな数字を格納した `randomNumber` 変数の値と等しいかどうかを調べています。もし等しければ、プレイヤーは正解し勝ちとなるため、祝福のメッセージを素敵な緑色で表示します。さらに、数字の大小を表示する段落をクリアして、後で説明する `setGameOver()` 関数を実行します。 - 今度は `else if(){ }` という部分で、ひとつ前の条件に続けて条件を書いています。この条件はユーザの最後のターンかどうかを調べています。もし最後の回ならば、プログラムは祝福のメッセージの代わりにゲームオーバーメッセージとする以外は、ひとつ前の部分と同じことをします。 @@ -412,7 +336,7 @@ function checkGuess() { ### イベント -ここまでで、`checkGuess()` 関数を上手に実装することができました。しかしまだ何も起きません。なぜなら、まだこの関数を呼び出していないからです。出来れば、"予想を入力"のボタンが押されたときに、この関数が呼ばれるようにしたいです。そのためにはイベントを使います。イベントとは、ボタンが押されたり、ページが読み込まれたり、ビデオを再生したりといったブラウザーで起きることで、それに反応してコードを実行させることができます。イベントが発生したことを聞き取る構成が**イベントリスナー**で、発生したイベントに反応して実行されるコードブロックが**イベントハンドラー**です。 +ここまでで、`checkGuess()` 関数を上手に実装することができました。しかしまだ何も起きません。なぜなら、まだこの関数を呼び出していないからです。出来れば、"予想を入力"のボタンが押されたときに、この関数が呼ばれるようにしたいです。そのためにはイベントを使います。イベントとは、ボタンが押されたり、ページが読み込まれたり、ビデオを再生したりといったブラウザーで起きることで、それに反応してコードを実行させることができます。**イベントリスナー**は特定のイベントを監視し、イベントが発生したことに応答して実行するコードブロックである**イベントハンドラー**を呼び出します。 `checkGuess()` 関数の下に、以下の一文を加えましょう。 @@ -433,8 +357,8 @@ function setGameOver() { guessField.disabled = true; guessSubmit.disabled = true; resetButton = document.createElement("button"); - resetButton.textContent = "新しいゲームを始める"; - document.body.appendChild(resetButton); + resetButton.textContent = "Start new game"; + document.body.append(resetButton); resetButton.addEventListener("click", resetGame); } ``` @@ -450,8 +374,8 @@ function resetGame() { guessCount = 1; const resetParas = document.querySelectorAll(".resultParas p"); - for (let i = 0; i < resetParas.length; i++) { - resetParas[i].textContent = ""; + for (const resetPara of resetParas) { + resetPara.textContent = ""; } resetButton.parentNode.removeChild(resetButton); @@ -470,7 +394,7 @@ function resetGame() { ちょっと長めのこのコードブロックは、プレイヤーが次のゲームができるように、ゲームを起動したときの状態に完全にリセットします。 - `guessCount` に 1 を代入して元に戻します。 -- 情報段落のすべてを消去します。 +- 情報の段落のテキストをすべて空にします。 `
` 内のすべての段落を選択し、それぞれをループして `textContent` を `''` （空文字列）に設定します。 - リセットボタンをページから削除します。 - 入力フォームの要素を使用可能にして、新しい予想が入力できるようにテキストフィールドを空にしてフォーカスを設定します。 - 最終結果を表示している `lastResult` 段落の背景色を消去します。 @@ -480,36 +404,45 @@ function resetGame() { この記事では、あと少し説明しなければならない大事な機能が残っています。既に見ているはずですが気づいたでしょうか。 -### ループ (繰り返し) +### ループ（繰り返し） -上のコードでもう少し詳しく説明しなければならないのは、[for](/ja/docs/Web/JavaScript/Reference/Statements/for) ループです。ループはプログラミングにおいてとても重要な概念です。ある条件に達するまで何度も何度もコードを繰り返し実行することができます。 +上のコードでもう少し詳しく説明しなければならないのは、 [for...of](/ja/docs/Web/JavaScript/Reference/Statements/for...of) ループです。ループはプログラミングにおいてとても重要な概念です。ある条件に達するまで何度も何度もコードを繰り返し実行することができます。 -[ブラウザーの開発者ツールの JavaScript コンソール](/ja/docs/Learn/Common_questions/What_are_browser_developer_tools) をもう一度開いて次のコードを入力してみましょう。 +[ブラウザーの開発者ツールの JavaScript コンソール](/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools) をもう一度開いて次のコードを入力してみましょう。 ```js -for (let i = 1; i < 21; i++) { - console.log(i); +const fruits = ["apples", "bananas", "cherries"]; +for (const fruit of fruits) { + console.log(fruit); } ``` -どうでしょうか。`1` から `20` の数字がコンソールに出力されましたね。これが繰り返しです。`for` ループには 3 つの入力値 (引数) が必要です。 +どうなりましたか。 `'apples', 'bananas', 'cherries'` の文字列がコンソールに出力されましたね。 + +これはループのためです。 `const fruits = ['apples', 'bananas', 'cherries'];` の行は配列を作成します。このモジュールの後半で、[配列の完全ガイド](/ja/docs/Learn/JavaScript/First_steps/Arrays)を読み終えてから作業しますが、とりあえず、配列は項目（この場合は文字列）の集合です。 + +`for...of` ループは配列でそれぞれの項目を取得し、それに対して JavaScript を実行する方法を提供します。 `for (const fruit of fruits)`という行は次のような意味です。 + +1. `fruits` の最初の項目を取得する。 +2. その項目を変数 `fruit` に設定し、中括弧 `{}` の間のコードを実行する。 +3. `fruits` の中の次の項目を取得し、`fruits` の末尾に達するまで 2 を繰り返す。 -1. **初期値**: 上の例では、`i` を 1 からはじめましたが、どんな数字でもかまいません。さらに言えば、`i` という名前でなくともかまいません。ただし、ループでは短くて覚えやすいため、`i` という変数の名前がよく使われることを覚えておいてください。 -2. **条件**: 上の例では `i < 21` をループが継続する条件としました。つまりループは `i` が 21 未満でなくなるまで継続します。`i` が 21 になったらループの実行が終了します。 -3. **増分**: 上の例では増分を `i++` と指定しています。つまり「`i` に 1 を足し」ます。ループは `i` が 21 になるまで(それは 2.の継続条件で説明しましたね) 、`i` の取りうる値について、それぞれ一度ずつ実行されます。今回の例では繰り返しのコードが実行される度に `i` の値を{{domxref("Console.log", "console.log()")}}を使用してコンソールに出力しています。 +この場合、中括弧の中のコードは `fruit` をコンソールに書き出しています。 -さて、それでは数字当てゲームに登場したループを見てみましょう。`resetGame()` 関数に以下の記述がありますね。 +さて、それでは数当てゲームに登場したループを見てみましょう。`resetGame()` 関数に以下の記述がありますね。 ```js const resetParas = document.querySelectorAll(".resultParas p"); -for (let i = 0; i < resetParas.length; i++) { - resetParas[i].textContent = ""; +for (const resetPara of resetParas) { + resetPara.textContent = ""; } ``` -このコードは `
` に含まれるすべての {{htmlelement("p")}} 要素を {{domxref("Document.querySelectorAll", "querySelectorAll()")}} というメソッドを使用して取得しています。そしてループを使用してその一つ一つの要素の中身を消去しています。 +このコードは `
` に含まれるすべての段落を、 {{domxref("Document.querySelectorAll", "querySelectorAll()")}} メソッドを使用して取得しています。そしてループを使用してその一つ一つの要素の中身を消去しています。 -### オブジェクトについて(簡単に) +たとえ `resetPara` が定数であっても、`textContent` のような内部プロパティは変更できることに注意してください。 + +### オブジェクトについての簡単な説明 オブジェクトについて説明する前に、プログラムに対して最後のちょっとした改良を加えてみましょう。JavaScript の書き出しの方にある `let resetButton;` のすぐ下に、以下の行を追記してファイルを保存します。 @@ -527,9 +460,9 @@ guessField.focus(); const guessField = document.querySelector(".guessField"); ``` -この参照を得るため、{{domxref("document")}} オブジェクトの{{domxref("document.querySelector", "querySelector()")}} メソッドを使用しています。`querySelector()` はある情報 (必要な要素を選択する [CSS セレクタ](/ja/docs/Learn/CSS/Introduction_to_CSS/Selectors)) を受け取ります。 +この参照を得るため、{{domxref("document")}} オブジェクトの{{domxref("document.querySelector", "querySelector()")}} メソッドを使用しています。`querySelector()` はある情報 (必要な要素を選択する [CSS セレクタ](/ja/docs/Learn/CSS/Building_blocks/Selectors)) を受け取ります。 -`guessField` に {{htmlelement("input")}} 要素の参照が得られたので、これでたくさんのプロパティ (基本的にはオブジェクトの内部に保持されている変数のことですが、中には値を変えられないものもあります) とメソッド (基本的にはオブジェクトの内部に保持されている関数のこと) にアクセスできるようになりました。ようやく {{htmlelement("input")}} 要素のメソッドの一つである `focus()` メソッドを使ってテキストフィールドにフォーカスを当てられます。 +`guessField` に {{htmlelement("input")}} 要素の参照が得られたので、これでたくさんのプロパティ（基本的にはオブジェクトの内部に保持されている変数のことですが、中には値を変えられないものもあります）とメソッド（基本的にはオブジェクトの内部に保持されている関数のこと）にアクセスできるようになりました。ようやく input 要素のメソッドの一つである `focus()` メソッドを使ってテキストフィールドにフォーカスを当てられます。 ```js guessField.focus(); @@ -542,41 +475,32 @@ guessField.focus(); 少しブラウザーが持っているオブジェクトで遊んでみましょう。 1. まずブラウザーでプログラムを開いてください -2. 次に[開発者ツール](/ja/docs/Learn/Common_questions/What_are_browser_developer_tools)を開き、JavaScript コンソールのタブが開いたのを確認します +2. 次に[開発者ツール](/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)を開き、 JavaScript コンソールのタブが開いたのを確認します 3. `guessField` と入力してみてください。するとコンソールに {{htmlelement("input")}} 要素を含む変数が表示されます。また、気づいたと思いますが、コンソールは実行中の環境にある変数名を含んだオブジェクト名を自動的に補完しました! -4. さらに下のように入力してみてください +4. さらに下のように入力してみてください。 ```js - guessField.value = "Hello"; + guessField.value = 2; ``` `value` プロパティは今のテキストフィールドに入力された値を表しています。コマンドを入力したら、テキストフィールドの値が変わりましたね！ -5. さらに続けて `guesses` と入力して - - Return - - / - - Enter - - を押します。{{htmlelement("p")}} 要素を含む変数がコンソールに表示されますね。 - -6. そして次のコードを入力します +5. さらに続けて `guesses` と入力してリターンを押してみてください。コンソールには {{htmlelement("p")}} 要素を含む変数が表示されますね。 +6. そして次のコードを入力します。 ```js guesses.value; ``` - コンソールには `undefined` (未定義) という文字が返ってきましたね。`value` というプロパティは {{htmlelement("p")}} 要素にはないためです。 + コンソールには `undefined` という文字が返ってきましたね。段落には `value` プロパティがないからです。 -7. パラグラフ内のテキストを変えたい場合には、{{domxref("Node.textContent", "textContent")}} プロパティを使用する必要があります。こうしてみます +7. 段落内のテキストを変えたい場合には、 {{domxref("Node.textContent", "textContent")}} プロパティを使用する必要があります。次のようにしてみてください。 ```js guesses.textContent = "Where is my paragraph?"; ``` -8. ちょっと遊んでみましょう。下のコードをひとつづつ入力してみてください。 +8. ちょっと遊んでみましょう。下のコードを一つずつ入力してみてください。 ```js guesses.style.backgroundColor = "yellow"; @@ -589,6 +513,6 @@ guessField.focus(); ## ここで一息 -これで数字当てゲームができました。最後までついて来れましたね！作ったプログラムを動かしてみてください 。(最後のプログラムは[こちらでも遊べます](http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html)。) もし作ったプログラムが動かなければ、[ソースコード](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html)と見比べてみてください。 +これで数当てゲームができました。最後までついて来れましたね！作ったプログラムを動かしてみてください 。（最後のプログラムは[こちらでも遊べます](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html)。）もし作ったプログラムが動かなければ、[ソースコード](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/first-splash/number-guessing-game.html)と見比べてみてください。 {{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}} From 3e6e45ae405f8500475d685187b27d835d1715c0 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 28 Aug 2023 23:40:03 +0900 Subject: [PATCH 009/600] =?UTF-8?q?2023/04/05=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../javascript/reference/operators/index.md | 142 ++++++++++-------- 1 file changed, 77 insertions(+), 65 deletions(-) diff --git a/files/ja/web/javascript/reference/operators/index.md b/files/ja/web/javascript/reference/operators/index.md index 17180d24bfae88..d8b7fdb6ff553c 100644 --- a/files/ja/web/javascript/reference/operators/index.md +++ b/files/ja/web/javascript/reference/operators/index.md @@ -1,42 +1,44 @@ --- title: 式と演算子 slug: Web/JavaScript/Reference/Operators +l10n: + sourceCommit: d85a7ba8cca98c2f6cf67a0c44f0ffd467532f20 --- {{JSSidebar("Operators")}} この節では、JavaScript 言語のすべての演算子、式、キーワードについて記述しています。 -## 式と演算子 (カテゴリー別) +## 式と演算子（カテゴリー別） アルファベット順の一覧は左側のサイドバーをご覧ください。 ### 基本式 -JavaScript の基本的なキーワードと一般的な式です。 +JavaScript での基本的なキーワードと一般的な式です。これらの式は最も高い優先順位を持ちます（[演算子](/ja/docs/Web/JavaScript/Reference/Operators/Operator_precedence)よりも高い）。 - {{JSxRef("Operators/this", "this")}} - - : `this` キーワードは関数の実行コンテキストを参照します。 + - : `this` キーワードは関数の実行コンテキストを示す特別なプロパティです。 +- [リテラル](/ja/docs/Web/JavaScript/Reference/Lexical_grammar#リテラル) + - : 基本的な `null`、論理値、数値、文字列のリテラルです。 +- {{JSxRef("Global_Objects/Array", "[]")}} + - : 配列初期化子またはリテラル構文です。 +- {{JSxRef("Operators/Object_initializer", "{}")}} + - : オブジェクト初期化子またはリテラル構文です。 - {{JSxRef("Operators/function", "function")}} - : `function` キーワードは関数式を定義します。 - {{JSxRef("Operators/class", "class")}} - : `class` キーワードはクラス式を定義します。 - {{JSxRef("Operators/function*", "function*")}} - : `function*` キーワードはジェネレーター関数式を定義します。 -- {{JSxRef("Operators/yield", "yield")}} - - : ジェネレーター関数の一時停止と再開を行います。 -- {{JSxRef("Operators/yield*", "yield*")}} - - : 別のジェネレーター関数または反復可能オブジェクトを代行します。 - {{JSxRef("Operators/async_function", "async function")}} - - : `async function` は非同期の関数式を定義します。 -- {{JSxRef("Operators/await", "await")}} - - : 非同期関数式の停止/再開と、プロミスの解決/拒否を待ちます。 -- {{JSxRef("Global_Objects/Array", "[]")}} - - : 配列初期化子またはリテラル構文です。 -- {{JSxRef("Operators/Object_initializer", "{}")}} - - : オブジェクト初期化子またはリテラル構文です。 + - : `async function` は非同期関数式を定義します。 +- {{JSxRef("Operators/async_function*", "async function*")}} + - : `async function*` キーワードは非同期ジェネレーター関数式を定義します。 - {{JSxRef("Global_Objects/RegExp", "/ab+c/i")}} - - : 正規表現式のリテラル構文です。 + - : 正規表現リテラル構文です。 +- {{JSxRef("Template_literals", "`string`")}} + - : テンプレートリテラル構文です。 - {{JSxRef("Operators/Grouping", "( )")}} - : グループ化演算子です。 @@ -46,20 +48,22 @@ JavaScript の基本的なキーワードと一般的な式です。 - {{JSxRef("Operators/Property_accessors", "プロパティアクセサー", "", 1)}} - : プロパティアクセス演算子はオブジェクトのプロパティやメソッドへのアクセス (`object.property` や `object["property"]`) を提供します。 +- {{JSxRef("Operators/Optional_chaining", "?.")}} + - : オプショナルチェーン演算子は、参照が [nullish](/ja/docs/Glossary/Nullish)（[`null`](/ja/docs/Web/JavaScript/Reference/Operators/null) または [`undefined`](/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined)）であった場合にエラーを発生させる代わりに `undefined` を返します。 - {{JSxRef("Operators/new", "new")}} - : `new` 演算子はコンストラクターのインスタンスを作成します。 - {{JSxRef("Operators/new%2Etarget", "new.target")}} - : コンストラクター内で `new.target` を使うことで、{{JSxRef("Operators/new", "new")}} によって呼び出されるコンストラクターを参照できます。 -- {{JSxRef("Statements/import%2Emeta", "import.meta")}} +- {{JSxRef("Operators/import%2Emeta", "import.meta")}} - : コンテキストに依存したメタデータを JavaScript モジュールへ公開するオブジェクトです。 - {{JSxRef("Operators/super", "super")}} - - : `super` キーワードは親コンストラクターを呼び出します。 -- {{JSxRef("Operators/Spread_syntax", "...obj")}} - - : 展開記法 (スプレッド記法) は、式を複数の引数または複数の要素に展開して、それぞれ関数呼び出しまたは配列リテラルに渡します。 + - : `super`キーワードは親オブジェクトのコンストラクタを呼び出したり、親オブジェクトのプロパティにアクセスしたりすることができます。 +- {{JSxRef("Operators/import", "import()")}} + - : `import()` 構文を使うと、モジュールを非同期かつ動的に、潜在的にモジュールでない環境に読み込むことができます。 ### インクリメントとデクリメント -接尾/接頭辞のインクリメント演算子と接尾/接頭辞のデクリメント演算子です。 +後置/前置のインクリメント演算子と後置/前置のデクリメント演算子です。 - {{JSxRef("Operators/Increment", "A++")}} - : 後置型インクリメント演算子。 @@ -72,62 +76,64 @@ JavaScript の基本的なキーワードと一般的な式です。 ### 単項演算子 -単項演算は、1 個のオペランドによる演算です。 +単項演算は、単一のオペランドによる演算です。 - {{JSxRef("Operators/delete", "delete")}} - : `delete` 演算子は、オブジェクトからプロパティを削除します。 - {{JSxRef("Operators/void", "void")}} - - : `void` 演算子は、式の戻り値を破棄します。 + - : `void` 演算子は、式の返値を破棄します。 - {{JSxRef("Operators/typeof", "typeof")}} - : `typeof` 演算子は、与えられたオブジェクトの型を判別します。 - {{JSxRef("Operators/Unary_plus", "+")}} - - : 単項正値演算子は、そのオペランドを Number 型に変換します。 + - : 単項正値演算子は、そのオペランドを数値型に変換します。 - {{JSxRef("Operators/Unary_negation", "-")}} - - : 単項負値演算子は、そのオペランドを Number 型に変換して正負を反転します。 + - : 単項負値演算子は、そのオペランドを数値型に変換して正負を反転します。 - {{JSxRef("Operators/Bitwise_NOT", "~")}} - : ビット否定演算子です。 - {{JSxRef("Operators/Logical_NOT", "!")}} - : 論理否定演算子です。 +- {{JSxRef("Operators/await", "await")}} + - : 非同期関数式の停止/再開と、プロミスの履行/拒否を待ちます。 -

算術演算子

+### 算術演算子 -算術演算子は、数値 (リテラルまたは値) をオペランドとして取り、1 個の数値を返します。 +算術演算子は、数値（リテラルまたは値）をオペランドとして取り、1 個の数値を返します。 -- {{JSxRef("Operators/Addition", "+")}} - - : 加算演算子です。 -- {{JSxRef("Operators/Subtraction", "-")}} - - : 減算演算子です。 -- {{JSxRef("Operators/Division", "/")}} - - : 除算演算子です。 +- {{JSxRef("Operators/Exponentiation", "**")}} + - : べき乗演算子です。 - {{JSxRef("Operators/Multiplication", "*")}} - : 乗算演算子です。 +- {{JSxRef("Operators/Division", "/")}} + - : 除算演算子です。 - {{JSxRef("Operators/Remainder", "%")}} - : 剰余演算子です。 -- {{JSxRef("Operators/Exponentiation", "**")}} - - : べき乗演算子です。 +- {{JSxRef("Operators/Addition", "+")}} （プラス） + - : 加算演算子です。 +- {{JSxRef("Operators/Subtraction", "-")}} + - : 減算演算子です。 ### 関係演算子 -比較演算子は、そのオペランドを比較し、その比較が真かどうかに基づいて `Boolean` 値を返します。 +比較演算子はオペランド同士を比較し、その比較結果が真かどうかに基づいて論理値を返します。 -- {{JSxRef("Operators/in", "in")}} - - : `in` 演算子は、与えられたプロパティをオブジェクトが持っているかどうかを判別します。 -- {{JSxRef("Operators/instanceof", "instanceof")}} - - : `instanceof` 演算子は、オブジェクトが別のオブジェクトのインスタンスかどうかを判別します。 -- {{JSxRef("Operators/Less_than", "<")}} +- {{JSxRef("Operators/Less_than", "<")}} (Less than) - : 小なり演算子です。 -- {{JSxRef("Operators/Greater_than", ">")}} +- {{JSxRef("Operators/Greater_than", ">")}} (Greater than) - : 大なり演算子です。 - {{JSxRef("Operators/Less_than_or_equal", "<=")}} - : 小なりイコール演算子です。 - {{JSxRef("Operators/Greater_than_or_equal", ">=")}} - : 大なりイコール演算子です。 +- {{JSxRef("Operators/instanceof", "instanceof")}} + - : `instanceof` 演算子は、オブジェクトが別のオブジェクトのインスタンスかどうかを判別します。 +- {{JSxRef("Operators/in", "in")}} + - : `in` 演算子は、与えられたプロパティをオブジェクトが持っているかどうかを判別します。 > **メモ:** `=>` は演算子ではなく、[アロー関数](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)のための記法です。 -

等値演算子

+### 等値演算子 -等値演算子の評価結果は常に、比較が真かどうかに基づいて `Boolean` 型の値になります。 +等値演算子の評価結果は常に、比較が真かどうかに基づいて論理型の値になります。 - {{JSxRef("Operators/Equality", "==")}} - : 等値演算子です。 @@ -138,7 +144,7 @@ JavaScript の基本的なキーワードと一般的な式です。 - {{JSxRef("Operators/Strict_inequality", "!==")}} - : 非同値演算子です。 -

ビットシフト演算子

+### ビットシフト演算子 オペランドのすべてのビットをシフト演算します。 @@ -151,7 +157,7 @@ JavaScript の基本的なキーワードと一般的な式です。 ### バイナリービット演算子 -ビット演算子は、そのオペランドを 32 ビット (0 と 1) の並びとして扱い、標準の JavaScript 数値を返します。 +ビット演算子は、そのオペランドを 32 ビット（0 と 1）の並びとして扱い、標準の JavaScript 数値を返します。 - {{JSxRef("Operators/Bitwise_AND", "&")}} - : ビット論理積 (AND) です。 @@ -162,26 +168,21 @@ JavaScript の基本的なキーワードと一般的な式です。 ### バイナリー論理演算子 -論理演算には、一般的に (論理) 真偽値が使用され、それが置かれた時に真偽値を返します。 +論理演算子は論理値（ブール値）において実装され、[短絡評価](/ja/docs/Web/JavaScript/Reference/Operators/Operator_precedence#短絡評価)があります。 - {{JSxRef("Operators/Logical_AND", "&&")}} - : 論理積 (AND) です。 - {{JSxRef("Operators/Logical_OR", "||")}} - : 論理和 (OR) です。 -- {{JSxRef("Operators/Nullish_coalescing_operator", "??")}} +- {{JSxRef("Operators/Nullish_coalescing", "??")}} - : Null 合体演算子です。 -### 条件 (三項) 演算子 +### 条件（三項）演算子 -- {{JSxRef("Operators/Conditional_Operator", "(条件 ? 真の場合 : 負の場合)")}} +- {{JSxRef("Operators/Conditional_operator", "(条件 ? 真の場合 : 負の場合)")}} - : この条件演算子は、条件の論理値を基に、2 つの値のいずれか一方を返します。 -

オプショナルチェーン演算子

- -- {{JSxRef("Operators/Optional_chaining", "?.")}} - - : オプショナルチェーン演算子は、参照が [nullish](/ja/docs/Glossary/Nullish) ([`null`](/ja/docs/Web/JavaScript/Reference/Global_Objects/null) または [`undefined`](/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined)) の場合にエラーを発生させるのではなく、`undefined` を返します。 - -

代入演算子

+### 代入演算子 代入演算子は、右辺のオペランドに基づいて、値を左辺のオペランドに代入します。 @@ -189,8 +190,6 @@ JavaScript の基本的なキーワードと一般的な式です。 - : 代入演算子です。 - {{JSxRef("Operators/Multiplication_assignment", "*=")}} - : 乗算値を代入します。 -- {{JSxRef("Operators/Exponentiation_assignment", "**=")}} - - : べき乗値を代入します。 - {{JSxRef("Operators/Division_assignment", "/=")}} - : 除算値を代入します。 - {{JSxRef("Operators/Remainder_assignment", "%=")}} @@ -211,20 +210,33 @@ JavaScript の基本的なキーワードと一般的な式です。 - : ビット排他的論理和 (XOR) の値を代入します。 - {{JSxRef("Operators/Bitwise_OR_assignment", "|=")}} - : ビット論理和 (OR) の値を代入します。 +- {{JSxRef("Operators/Exponentiation_assignment", "**=")}} + - : べき乗値を代入します。 - {{JSxRef("Operators/Logical_AND_assignment", "&&=")}} - : 論理積代入です。 - {{JSxRef("Operators/Logical_OR_assignment", "||=")}} - : 論理和代入です。 -- {{JSxRef("Operators/Logical_nullish_assignment", "??=")}} - - : 論理 Null 代入です。 -- {{JSxRef("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}} - {{JSxRef("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}} +- {{JSxRef("Operators/Nullish_coalescing_assignment", "??=")}} + - : 論理 Null 合体代入です。 +- [`[a, b] = arr`, `{ a, b } = obj`](/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) - : 分割代入は、配列やオブジェクトのプロパティを、配列やオブジェクトリテラルに似た構文を使用して変数に代入します。 -

カンマ演算子

+### yield 演算子 + +- {{JSxRef("Operators/yield", "yield")}} + - : ジェネレーター関数の一時停止と再開を行います。 +- {{JSxRef("Operators/yield*", "yield*")}} + - : 別のジェネレーター関数または反復可能オブジェクトを代行します。 + +### スプレッド構文 + +- {{JSxRef("Operators/Spread_syntax", "...obj")}} + - : スプレッド構文を使用すると、配列や文字列などの反復可能オブジェクトを、 0 個以上の引数（関数呼び出しの場合）や要素（配列リテラルの場合）が予想される配置で展開することができます。オブジェクトリテラルでは、スプレッド構文はオブジェクトのプロパティを列挙し、作成するオブジェクトにキーと値のペアを追加します。 + +### カンマ演算子 -- {{JSxRef("Operators/Comma_Operator", ",")}} - - : カンマ演算子は、複数の式を単一の文で評価し、その最後の式の結果を返します。 +- {{JSxRef("Operators/Comma_operator", ",")}} + - : カンマ演算子は、複数の式を単一の文で評価し、最後の式の結果を返すことができます。 ## 仕様書 @@ -236,4 +248,4 @@ JavaScript の基本的なキーワードと一般的な式です。 ## 関連情報 -- [演算子の優先順位](/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence) +- [演算子の優先順位](/ja/docs/Web/JavaScript/Reference/Operators/Operator_precedence) From 4c4ffb125d0744fe1710852778c749a644dad9ce Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 28 Aug 2023 23:47:35 +0900 Subject: [PATCH 010/600] =?UTF-8?q?Web/JavaScript/Reference/Operators=20?= =?UTF-8?q?=E3=81=B8=E3=81=AE=E3=83=AA=E3=83=B3=E3=82=AF=E3=81=AE=E3=83=95?= =?UTF-8?q?=E3=83=A9=E3=82=B0=E3=83=A1=E3=83=B3=E3=83=88=E3=82=92=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/javascript/language_overview/index.md | 6 +++--- .../javascript/reference/errors/equal_as_assign/index.md | 2 +- .../errors/invalid_assignment_left-hand_side/index.md | 6 +++--- .../reference/operators/operator_precedence/index.md | 2 +- .../reference/statements/expression_statement/index.md | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/files/ja/web/javascript/language_overview/index.md b/files/ja/web/javascript/language_overview/index.md index 4a0420ee4637af..9e789e383c157f 100644 --- a/files/ja/web/javascript/language_overview/index.md +++ b/files/ja/web/javascript/language_overview/index.md @@ -69,7 +69,7 @@ console.log(Math.floor(3 / 2)); // 1 実のところ、整数値は 32 ビット整数として扱われます。また一部の実装では、32 ビット整数値ではなく Number で有効な命令の実行を求められるまでの間、32 ビット整数値として保存します。これはビット演算を行う際に重要なことです。 -標準的な[算術演算子](/ja/docs/Web/JavaScript/Reference/Operators#arithmetic_operators)に対応しています。例えば、足し算、引き算、モジュロ (剰余) などです。さらに、これは前に言及していなかったのですが、より高度な数学関数や定数を扱う {{jsxref("Math")}} という組み込みオブジェクトもあります。 +標準的な[算術演算子](/ja/docs/Web/JavaScript/Reference/Operators#算術演算子)に対応しています。例えば、足し算、引き算、モジュロ (剰余) などです。さらに、これは前に言及していなかったのですが、より高度な数学関数や定数を扱う {{jsxref("Math")}} という組み込みオブジェクトもあります。 ```js Math.sin(3.5); @@ -86,7 +86,7 @@ parseInt("010", 10); // 10 古いブラウザーでは、 "0" から始まる文字列を 8 進数 (基数 8) とみなしますが、これは 2013 年以降のブラウザーにはあてはまりません。文字列の書式を理解していなければ、古いブラウザーは驚くような結果になることがあります。 ```js -parseInt("010"); // 8 +parseInt("010"); // 8 parseInt("0x10"); // 16 ``` @@ -146,7 +146,7 @@ isNaN([1, 2]); // true JavaScript はまた、特別な値 {{jsxref("Infinity")}} と `-Infinity` を持っています。 ```js -1 / 0; // Infinity +1 / 0; // Infinity -1 / 0; // -Infinity ``` diff --git a/files/ja/web/javascript/reference/errors/equal_as_assign/index.md b/files/ja/web/javascript/reference/errors/equal_as_assign/index.md index 9fac1bbe03d9db..b45f90891de5b8 100644 --- a/files/ja/web/javascript/reference/errors/equal_as_assign/index.md +++ b/files/ja/web/javascript/reference/errors/equal_as_assign/index.md @@ -52,4 +52,4 @@ if (x == y) { ## 関連項目 - [`if...else`](/ja/docs/Web/JavaScript/Reference/Statements/if...else) -- [等価演算子](/ja/docs/Web/JavaScript/Reference/Operators#equality_operators) +- [等値演算子](/ja/docs/Web/JavaScript/Reference/Operators#等値演算子) diff --git a/files/ja/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.md b/files/ja/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.md index 1324ffefb1e99f..32e1d374732df9 100644 --- a/files/ja/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.md +++ b/files/ja/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.md @@ -19,7 +19,7 @@ ReferenceError: invalid assignment left-hand side ## エラーの原因 -どこかに予想外の代入があります。たとえば、[代入演算子](/ja/docs/Web/JavaScript/Reference/Operators#assignment_operators)と[等価演算子](/ja/docs/Web/JavaScript/Reference/Operators#equality_operators)が合っていないからかもしれません。 "`=`" 記号が 1 つの場合は変数に値を割り当てる一方、"`==`" か "`===`" 演算子は値を比較します。 +どこかに予想外の代入があります。たとえば、[代入演算子](/ja/docs/Web/JavaScript/Reference/Operators#代入演算子)と[等値演算子](/ja/docs/Web/JavaScript/Reference/Operators#等値演算子)が合っていないからかもしれません。 "`=`" 記号が 1 つの場合は変数に値を割り当てる一方、"`==`" か "`===`" 演算子は値を比較します。 ## 例 @@ -49,5 +49,5 @@ var str = "Hello, " + "from the " + "other side!"; ## 関連項目 -- [代入演算子](/ja/docs/Web/JavaScript/Reference/Operators#assignment_operators) -- [等価演算子](/ja/docs/Web/JavaScript/Reference/Operators#equality_operators) +- [代入演算子](/ja/docs/Web/JavaScript/Reference/Operators#代入演算子) +- [等値演算子](/ja/docs/Web/JavaScript/Reference/Operators#等値演算子) diff --git a/files/ja/web/javascript/reference/operators/operator_precedence/index.md b/files/ja/web/javascript/reference/operators/operator_precedence/index.md index b2db15587384e6..10be524e3a9b51 100644 --- a/files/ja/web/javascript/reference/operators/operator_precedence/index.md +++ b/files/ja/web/javascript/reference/operators/operator_precedence/index.md @@ -492,7 +492,7 @@ a?.b.c; // 最初に `a` を評価し、 `a` が `null` または `undefined` 2 - 代入 + 代入 右から左 … = … diff --git a/files/ja/web/javascript/reference/statements/expression_statement/index.md b/files/ja/web/javascript/reference/statements/expression_statement/index.md index 43fea85a1e96aa..9f421a3a68f2ad 100644 --- a/files/ja/web/javascript/reference/statements/expression_statement/index.md +++ b/files/ja/web/javascript/reference/statements/expression_statement/index.md @@ -27,7 +27,7 @@ expression; - 関数呼び出し (`console.log("Hello");`, `[1, 2, 3].forEach((i) => console.log(i));`) - [タグ付きテンプレートリテラル](/ja/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) - [代入式](/ja/docs/Web/JavaScript/Reference/Operators#代入演算子)（複合演算子を含む） -- [インクリメント／デクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators#increment_and_decrement) +- [インクリメント／デクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators#インクリメントとデクリメント) - [`delete`](/ja/docs/Web/JavaScript/Reference/Operators/delete) - [`import()`](/ja/docs/Web/JavaScript/Reference/Operators/import) - [`yield`](/ja/docs/Web/JavaScript/Reference/Operators/yield) および [`yield*`](/ja/docs/Web/JavaScript/Reference/Operators/yield*) @@ -95,7 +95,7 @@ console.log(let); // [1, 2, 3] ### 制御フロー文の回避 -制御フロー文の使用は、式文を使ってほとんど避けることができます。例えば、`if...else` は[三項演算子](/ja/docs/Web/JavaScript/Reference/Operators/Conditional_operator)や[論理演算子](/ja/docs/Web/JavaScript/Reference/Operators#binary_logical_operators)に置き換えることができます。`for` や `for...of` のような反復処理文は、[配列メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#インスタンスメソッド)に置き換えることができます。 +制御フロー文の使用は、式文を使ってほとんど避けることができます。例えば、`if...else` は[三項演算子](/ja/docs/Web/JavaScript/Reference/Operators/Conditional_operator)や[論理演算子](/ja/docs/Web/JavaScript/Reference/Operators#バイナリー論理演算子)に置き換えることができます。`for` や `for...of` のような反復処理文は、[配列メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#インスタンスメソッド)に置き換えることができます。 ```js // 制御フロー文の使用 From e791e35b626d48a63802b2a5a28ee4a2c7eb2c4c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 29 Aug 2023 00:07:53 +0900 Subject: [PATCH 011/600] =?UTF-8?q?2023/02/19=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/api/taskattributiontiming/index.md | 54 ++++++++++++++----- 1 file changed, 41 insertions(+), 13 deletions(-) diff --git a/files/ja/web/api/taskattributiontiming/index.md b/files/ja/web/api/taskattributiontiming/index.md index 368dc5967e27e1..e236b7db8c560c 100644 --- a/files/ja/web/api/taskattributiontiming/index.md +++ b/files/ja/web/api/taskattributiontiming/index.md @@ -1,29 +1,57 @@ --- title: TaskAttributionTiming slug: Web/API/TaskAttributionTiming +l10n: + sourceCommit: d414c502f3cc1c08d2fb043e98cda4a65621ff08 --- -{{SeeCompatTable}}{{APIRef("Long Tasks")}} +{{SeeCompatTable}}{{APIRef("Performance API")}} -[Long Tasks API](/ja/docs/Web/API/Long_Tasks_API) の **`TaskAttributionTiming`** インターフェイスは、長いタスクに関連する作業とそれに関連するフレームコンテキストに関する情報を返します。 コンテナとも呼ばれるフレームコンテキストは、全体として長いタスクに関係している iframe、embed、object です。 +**`TaskAttributionTiming`** インターフェイスは、長いタスクに関連する作業とそれに関連するフレームコンテキストに関する情報を返します。フレームコンテキストはコンテナーとも呼ばれ、長いタスクに関わる iframe、embed、object のことです。 + +通常、 `TaskAttributionTiming` オブジェクトを使って作業するのは、[長いタスク](/ja/docs/Web/API/PerformanceLongTaskTiming) を監視するときです。 + +`TaskAttributionTiming` は {{domxref("PerformanceEntry")}} を継承しています。 {{InheritanceDiagram}} -## プロパティ +## インスタンスプロパティ + +このインターフェイスは、イベントタイミングパフォーマンス項目の以下の {{domxref("PerformanceEntry")}} プロパティを以下のように修飾して拡張します。 + +- {{domxref("PerformanceEntry.duration")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : このインターフェイスでは `duration` は適用されないので、常に `0` を返します。 +- {{domxref("PerformanceEntry.entryType")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : 常に `taskattribution` を返します。 +- {{domxref("PerformanceEntry.name")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : 常の `"unknown"` を返します。 +- {{domxref("PerformanceEntry.startTime")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : 常の `0` を返します。 + +このインターフェイスは以下のプロパティにも対応しています。 -- {{domxref('TaskAttributionTiming.containerType')}} {{readonlyinline}} - - : フレームコンテナのタイプ（`iframe`、`embed`、`object` のいずれか）を返します。 -- {{domxref('TaskAttributionTiming.containerSrc')}} {{readonlyinline}} - - : コンテナの `src` 属性を返します。 -- {{domxref('TaskAttributionTiming.containerId')}} {{readonlyinline}} - - : コンテナの `id` 属性を返します。 -- {{domxref('TaskAttributionTiming.containerName')}} {{readonlyinline}} - - : コンテナの `name` 属性を返します。 +- {{domxref('TaskAttributionTiming.containerType')}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : フレームコンテナーの種類（`iframe`、`embed`、`object` のいずれか）を返します。 +- {{domxref('TaskAttributionTiming.containerSrc')}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : コンテナーの `src` 属性を返します。 +- {{domxref('TaskAttributionTiming.containerId')}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : コンテナーの `id` 属性を返します。 +- {{domxref('TaskAttributionTiming.containerName')}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : コンテナーの `name` 属性を返します。 -## 仕様 +## インスタンスメソッド + +- {{domxref("TaskAttributionTiming.toJSON()")}} {{Experimental_Inline}} + - : `TaskAttributionTiming` オブジェクトの JSON 表現を返します。 + +## 仕様書 {{Specifications}} ## ブラウザーの互換性 -{{Compat("api.TaskAttributionTiming")}} +{{Compat}} + +## 関連情報 + +- {{domxref("PerformanceLongTaskTiming")}} From b7b8e703476fc614eb6be5c8ba392e47740d3217 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 29 Aug 2023 00:10:36 +0900 Subject: [PATCH 012/600] =?UTF-8?q?2023/04/08=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../containerid/index.md | 23 ++++++++----------- .../containername/index.md | 23 ++++++++----------- .../containersrc/index.md | 23 ++++++++----------- .../containertype/index.md | 23 ++++++++----------- 4 files changed, 40 insertions(+), 52 deletions(-) diff --git a/files/ja/web/api/taskattributiontiming/containerid/index.md b/files/ja/web/api/taskattributiontiming/containerid/index.md index 311e659cf7dd0a..ac2ebdec334ece 100644 --- a/files/ja/web/api/taskattributiontiming/containerid/index.md +++ b/files/ja/web/api/taskattributiontiming/containerid/index.md @@ -1,26 +1,23 @@ --- -title: TaskAttributionTiming.containerId +title: "TaskAttributionTiming: containerId プロパティ" +short-title: containerId slug: Web/API/TaskAttributionTiming/containerId +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 --- -{{SeeCompatTable}}{{APIRef("Long Tasks")}} +{{APIRef("Performance API")}}{{SeeCompatTable}} -{{domxref("TaskAttributionTiming")}} インタフェースの **`containerId`** 読み取り専用プロパティは、コンテナの `id` 属性を返します。 コンテナは、全体として長いタスクに関係している iframe、embed、object などです。 +**`containerId`** は {{domxref("TaskAttributionTiming")}} インターフェイスの読み取り専用プロパティで、コンテナーの `id` 属性を返します。コンテナーは、全体として長いタスクに関係している iframe、embed、object などです。 -## 構文 +## 値 -``` -var containerId = TaskAttributionTiming.containerId; -``` +文字列で、コンテナーの [`id`](/en-US/docs/Web/HTML/Global_attributes/id) 属性が入ります。 -### 値 - -コンテナの `id` 属性を含む {{domxref("DOMString")}}。 - -## 仕様 +## 仕様書 {{Specifications}} ## ブラウザーの互換性 -{{Compat("api.TaskAttributionTiming.containerId")}} +{{Compat}} diff --git a/files/ja/web/api/taskattributiontiming/containername/index.md b/files/ja/web/api/taskattributiontiming/containername/index.md index a98c1c77c34357..76e36898e7a98f 100644 --- a/files/ja/web/api/taskattributiontiming/containername/index.md +++ b/files/ja/web/api/taskattributiontiming/containername/index.md @@ -1,26 +1,23 @@ --- -title: TaskAttributionTiming.containerName +title: "TaskAttributionTiming: containerName プロパティ" +short-title: containerName slug: Web/API/TaskAttributionTiming/containerName +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 --- -{{SeeCompatTable}}{{APIRef("Long Tasks")}} +{{APIRef("Performance API")}}{{SeeCompatTable}} -{{domxref("TaskAttributionTiming")}} インタフェースの **`containerName`** 読み取り専用プロパティは、コンテナの `name` 属性を返します。 コンテナは、全体として長いタスクに関係している iframe、embed、object などです。 +**`containerName`** は {{domxref("TaskAttributionTiming")}} インターフェイスの読み取り専用プロパティで、コンテナーの `name` 属性を返します。コンテナーは、全体として長いタスクに関係している iframe、embed、object などです。 -## 構文 +## 値 -``` -var containerName = TaskAttributionTiming.containerName; -``` +文字列で、コンテナーの HTML における `name` 属性（[` +``` + +이것은 확실히 최선의 방법은 아닙니다. + +#### 단점 + +- 보시다시피 `iframe`에는 대체 메커니즘이 있지만 브라우저는 `iframe`을 전혀 지원하지 않는 경우에만 대체를 표시합니다. +- 또한 SVG와 현재 웹페이지의 {{glossary('origin')}}가 같지 않으면 기본 웹페이지에서 JavaScript를 사용하여 SVG를 조작할 수 없습니다. + +## 능동적 학습: SVG로 놀기 + +이 능동적 학습 섹션에서는 몇 가지 SVG를 재미있게 사용해 보시기 바랍니다. 아래의 입력 섹션에서 시작하는 데 도움이 되는 몇 가지 샘플을 이미 제공한 것을 확인할 수 있습니다. 또한 [SVG 요소 참조](/ko/docs/Web/SVG/Element)로 이동하여 SVG에서 사용할 수 있는 다른 장난감에 대한 자세한 내용을 찾아서 사용해 볼 수도 있습니다. 이 섹션은 여러분의 리서치 기술을 연습하고 재미를 느끼기 위한 것입니다. + +코드가 멈춰서 작동되지 않는 경우 언제든지 재설정 버튼을 사용하여 코드를 재설정할 수 있습니다. + +```html hidden +

Live output

+ +
+ +

Editable code

+

+ Press Esc to move focus away from the code area (Tab inserts a tab character). +

+ + + +
+ + +
+``` + +```css hidden +html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +} +``` + +```js hidden +const textarea = document.getElementById("code"); +const reset = document.getElementById("reset"); +const solution = document.getElementById("solution"); +const output = document.querySelector(".output"); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function () { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = "Show solution"; + updateCode(); +}); + +solution.addEventListener("click", function () { + if (solution.value === "Show solution") { + textarea.value = solutionEntry; + solution.value = "Hide solution"; + } else { + textarea.value = userEntry; + solution.value = "Show solution"; + } + updateCode(); +}); + +const htmlSolution = ""; +let solutionEntry = htmlSolution; + +textarea.addEventListener("input", updateCode); +window.addEventListener("load", updateCode); + +// 텍스트 영역에서 탭 키 사용을 중지하고 +// 대신 캐럿 위치에 탭을 작성하도록 합니다. + +textarea.onkeydown = function (e) { + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret("\t"); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + let caretPos = textarea.selectionStart; + const front = textarea.value.substring(0, caretPos); + const back = textarea.value.substring( + textarea.selectionEnd, + textarea.value.length, + ); + + textarea.value = front + text + back; + caretPos += text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// 사용자가 텍스트 영역 코드를 업데이트할 때마다 저장된 사용자 코드를 업데이트합니다. + +textarea.onkeyup = function () { + // 솔루션이 아닌 사용자 코드가 표시될 때의 상태만 저장하여 사용자 코드 위에 솔루션이 저장되지 않도록 하려는 것입니다. + if (solution.value === "Show solution") { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +}; +``` + +{{ EmbedLiveSample('Active_Learning_Playing_with_SVG', 700, 540) }} + +## 요약 + +이 글에서는 벡터 그래픽과 SVG가 무엇인지, 왜 알아두면 유용한지, 웹페이지에 SVG를 포함하는 방법에 대해 간략하게 살펴보았습니다. 이 글은 SVG를 배우기 위한 완전한 가이드가 아니라 웹을 돌아다니다가 SVG를 만났을 때 어떤 것인지 알 수 있도록 포인터를 제공하기 위한 것입니다. 따라서 아직 SVG 전문가가 아니라고 생각되더라도 걱정하지 마세요. 작동 원리에 대해 자세히 알아보고 싶으시다면 아래에 도움이 될 만한 링크가 포함되어 있습니다. + +이 모듈의 마지막 글에서는 [반응형 이미지](/ko/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)에 대해 자세히 살펴보면서 다양한 기기에서 이미지가 더 잘 작동하도록 하는 HTML의 도구를 살펴봅니다. + +## 같이 보기 + +- MDN의 [SVG 튜토리얼](/ko/docs/Web/SVG/Tutorial/Getting_Started) +- [반응형 SVG를 위한 빠른 팁](https://thenewcode.com/744/Making-SVG-Responsive) +- [Sara Soueidan의 반응형 SVG 이미지 튜토리얼](https://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/) +- [SVG의 접근성 이점](https://www.w3.org/TR/SVG-access/) +- [SVG 속성 및 CSS](https://css-tricks.com/svg-properties-and-css/) +- [SVG 크기를 조정하는 방법](https://css-tricks.com/scale-svg/) (래스터 그래픽만큼 간단하지 않습니다!) + +{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}} diff --git a/files/ko/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/raster-vector-default-size.png b/files/ko/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/raster-vector-default-size.png new file mode 100644 index 0000000000000000000000000000000000000000..c02a383495c446e1048ddc96d33a97d0c1afd12f GIT binary patch literal 3259 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 bZLQ7t9+vo|KKuR8i>j$H(J0rz`O1F*WuL-~ literal 0 HcmV?d00001 diff --git a/files/ko/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/raster-vector-zoomed.png b/files/ko/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/raster-vector-zoomed.png new file mode 100644 index 0000000000000000000000000000000000000000..b168cbf505902646b88768aea8c643cba7f3307e GIT binary patch literal 14002 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 literal 0 HcmV?d00001 From bf57450a19f9b1bce0b83ba41b30aa4b9300b4aa Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 13 Sep 2023 02:16:57 +0900 Subject: [PATCH 224/600] =?UTF-8?q?2022/07/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= =?UTF-8?q?=20(#15715)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2022/07/07 時点の英語版に同期 * Update files/ja/web/api/window/popstate_event/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update index.md --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../ja/web/api/window/popstate_event/index.md | 82 ++++++++++--------- 1 file changed, 44 insertions(+), 38 deletions(-) diff --git a/files/ja/web/api/window/popstate_event/index.md b/files/ja/web/api/window/popstate_event/index.md index abdabd8b7a49cc..d76f3ca3494b90 100644 --- a/files/ja/web/api/window/popstate_event/index.md +++ b/files/ja/web/api/window/popstate_event/index.md @@ -1,40 +1,48 @@ --- title: "Window: popstate イベント" +short-title: popstate slug: Web/API/Window/popstate_event +l10n: + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc --- -{{APIRef}} +{{APIRef("History API")}} **`popstate`** は {{domxref("Window")}} インターフェイスのイベントで、ユーザーがセッション履歴を操作している間にアクティブな履歴項目が変更されたときに発行されます。これは現在の履歴項目をユーザーが最後に訪れたページのものに変更するか、または {{domxref("history.pushState()")}} が履歴項目を履歴スタックに追加するために使用されていた場合、その履歴項目が代わりに使用されます。 - - - - - - - - - - - - - - - - - - - -
バブリングなし
キャンセル不可
インターフェイス{{domxref("PopStateEvent")}}
イベントハンドラープロパティ - {{domxref("WindowEventHandlers.onpopstate", "onpopstate")}} -
+## 構文 + +このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。 + +```js +addEventListener("popstate", (event) => {}); +onpopstate = (event) => {}; +``` + +## イベント型 + +{{domxref("PopStateEvent")}} です。 {{domxref("Event")}} を継承しています。 + +{{InheritanceDiagram("PopStateEvent")}} + +## イベントプロパティ + +- {{domxref("PopStateEvent.state")}} {{ReadOnlyInline}} + - : `pushState()` または `replaceState()` に提供された情報のコピーを返します。 + +## イベントハンドラーの別名 + +`Window` インターフェイスに加えて、イベントハンドラープロパティ `onpopstate` は以下の要素でも利用できます。 + +- {{domxref("HTMLBodyElement")}} +- {{domxref("HTMLFrameSetElement")}} +- {{domxref("SVGSVGElement")}} ## 履歴スタック アクティブ化される履歴項目が [`history.pushState()`](/ja/docs/Web/API/History/pushState) の呼び出しによって作成されたものである場合、または [`history.replaceState()`](/ja/docs/Web/API/History/replaceState) の呼び出しの影響を受けた場合、 `popstate` イベントの `state` プロパティには履歴項目の状態オブジェクトのコピーが格納されます。 -これらのメソッドと対応するイベントは、履歴スタックにデータを追加して、動的に生成されたページを再構築したり、同じ {{domxref("Document")}} にいながら表示されているコンテンツの状態を変更するために使用することができます。 +これらのメソッドと対応するイベントは、履歴スタックにデータを追加するために使用することができ、動的に生成されたページを再構築したり、同じ {{domxref("Document")}} に留まりながら表示するコンテンツの状態を変更したりするために使用することができます。 ただ、 `history.pushState()` や `history.replaceState()` を呼び出すだけでは、 `popstate` イベントが発行されないことに注意してください。 `popstate` イベントは、戻るボタンや進むボタンをクリックする（あるいは JavaScript で `history.back()` や `history.forward()` を呼び出す）など、ブラウザーの操作によって発行されます。 @@ -44,18 +52,22 @@ slug: Web/API/Window/popstate_event ## popstate が送信される場面 -ユーザーがブラウザーの「戻る」ボタンを押すなどして遷移が発生した場合、 `popstate` イベントは新しい場所に遷移するためのプロセスの終了間際に発行されます。新しい場所の読み込み（必要な場合）、表示、可視化などが行われた後に {{domxref("Window.pageshow_event", "pageshow")}} イベントが送信され、持続的なユーザー状態情報が復元されて {{domxref("Window.hashchange_event", "hashchange")}} イベントが送信される前に発行されます。 +ブラウザーは迷惑なポップアップに対抗するために、ページが操作されない限り `popstate` イベントをすべて発行しないことがあります。 + +この節では、ブラウザーが潜在的に `popstate` イベントを発行する場合（つまり、ページが操作された場合）に従う手順を記述します。 + +ユーザーがブラウザーの 戻る ボタンを押すなどして遷移が発生した場合、 `popstate` イベントは新しい場所に遷移するためのプロセスの終了間際に発行されます。新しい場所の読み込み（必要な場合）、表示、可視化などが行われた後に {{domxref("Window.pageshow_event", "pageshow")}} イベントが送信され、持続的なユーザー状態情報が復元されて {{domxref("Window.hashchange_event", "hashchange")}} イベントが送信される前に発行されます。 `popstate` イベントが発行されるタイミングをよりよく理解するために、ユーザーがサイトを移動するか、履歴をプログラムで走査することによって、現在の履歴項目が変更されたときに発行されるイベントのシーケンスを単純化して考えてみましょう。ここでは、現在の履歴項目を**新しい項目**と呼ぶものに変更する遷移を示します。現在のページのセッション履歴スタック項目は**現在の項目**と呼びます。 -1. もし**新しい項目** が現在、既存の {{domxref("Document")}} を含んでいなければ、続行する前にコンテンツを取得し、その `Document` を作成します。これは {{domxref("Window.DOMContentLoaded_event", "DOMContentLoaded")}} や {{domxref("Window.load_event", "load")}} イベントを最終的に文書を含む {{domxref("Window")}} に送信しますが、以下のステップはその間に実行され続けます。 -2. **現在の項目**のタイトルが履歴 API のメソッド、 ({{domxref("History.pushState", "pushState()")}} または {{domxref("History.replaceState", "replaceState()")}} の何れかで設定されなかった場合は、その項目のタイトルが {{domxref("document.title")}} 属性が返す文字列に設定されます。 +1. もし**新しい項目** が現在、既存の {{domxref("Document")}} を含んでいなければ、続行する前にコンテンツを取得し、その `Document` を作成します。これは {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}} や {{domxref("Window.load_event", "load")}} イベントを最終的に文書を含む {{domxref("Window")}} に送信しますが、以下のステップはその間に実行され続けます。 +2. **現在の項目**のタイトルが履歴 API のメソッド、 ({{domxref("History.pushState", "pushState()")}} または {{domxref("History.replaceState", "replaceState()")}}) の何れかで設定されなかった場合は、その項目のタイトルが {{domxref("document.title")}} 属性が返す文字列に設定されます。 3. もし、ブラウザーが**現在の項目**から離れる前に保存したい状態情報を持っている場合は、保存します。このとき、その項目は「ユーザーの状態を保持した」とみなされます。ブラウザーが履歴セッションの項目に追加する可能性のあるこの情報には、たとえば、文書のスクロール位置、フォーム入力の値、および他のそのようなデータが含まれる場合があります。 4. もし、**新しい項目**が**現在の項目**と異なる `Document` オブジェクトを持っている場合は、その閲覧コンテキストは、その {{domxref("Window.document", "document")}} プロパティが**新しい項目**によって参照される文書を参照するように更新され、コンテキストの名前は現在の文書のコンテキスト名と一致するように更新されます。 5. **新しい項目**の {{domxref("Document")}} 内の各フォームコントロールで、自動入力フィールド名が `off` に設定された [`autocomplete`](/ja/docs/Web/HTML/Element/input#autocomplete) が設定されているものは、リセットされます。自動補完されるフィールド名や自動補完の仕組みについては [HTML の自動補完](/ja/docs/Web/HTML/Attributes/autocomplete)を参照してください。 6. **新しい項目**の文書が既に完全に読み込まれ準備されている場合、つまり、その {{domxref("Document.readyState", "readyState")}} が `complete` で、文書がまだ表示されていない場合、文書が表示され、 {{domxref("Window.pageshow_event", "pageshow")}} イベントは {{domxref("PageTransitionEvent")}} の {{domxref("PageTransitionEvent.persisted", "persisted")}} 属性が `true` に設定された状態でその文書で発行されます。 7. この文書の {{domxref("Document.URL", "URL")}} が**新しい項目**のものに設定されます。 -8. 履歴の走査が置換を有効にして行われている場合、（{{domxref("History.go", "go()") }} などのメソッドの `delta` パラメータを考慮して）目的の項目の直前の項目が履歴スタックから削除されます。 +8. 履歴の走査が置換を有効にして行われている場合、（{{domxref("History.go", "go()")}} などのメソッドの `delta` 引数を考慮して）目的の項目の直前の項目が履歴スタックから削除されます。 9. もし**新しい項目**が持続的なユーザーの状態を持っておらず、その URL のフラグメントが `null` でなければ、その文書はそのフラグメントまでスクロールされます。 10. 次に、**現在の項目**が**新しい項目**に設定されます。宛先の項目は現在のものであると認識されます。 11. **新しい項目** にシリアライズされた状態情報が保存されている場合、その情報は {{domxref("History.state")}} にデシリアライズされます。それ以外の場合は `state` は `null` となる。 @@ -72,10 +84,7 @@ slug: Web/API/Window/popstate_event ```js window.addEventListener("popstate", (event) => { console.log( - "location: " + - document.location + - ", state: " + - JSON.stringify(event.state), + `location: ${document.location}, state: ${JSON.stringify(event.state)}`, ); }); history.pushState({ page: 1 }, "title 1", "?page=1"); @@ -89,12 +98,9 @@ history.go(2); // "location: http://example.com/example.html?page=3, state: {"pa 同じ例で、 `onpopstate` イベントハンドラープロパティを使用したものです。 ```js -window.onpopstate = function (event) { +window.onpopstate = (event) => { console.log( - "location: " + - document.location + - ", state: " + - JSON.stringify(event.state), + `location: ${document.location}, state: ${JSON.stringify(event.state)}`, ); }; history.pushState({ page: 1 }, "title 1", "?page=1"); @@ -105,7 +111,7 @@ history.back(); // "location: http://example.com/example.html, state: null" と history.go(2); // "location: http://example.com/example.html?page=3, state: {"page":3}" と出力 ``` -元のの履歴項目（`http://example.com/example.html`）には、状態オブジェクトが関連付けられていませんが、 2 回目の `history.back()` の呼び出しの後にその項目をアクティブにすると、 `popstate` イベントが発生することに注意してください。 +元のの履歴項目 (`http://example.com/example.html`) には、状態オブジェクトが関連付けられていませんが、 2 回目の `history.back()` の呼び出しの後にその項目をアクティブにすると、 `popstate` イベントが発生することに注意してください。 ## 仕様書 From 38786c226c6315c4fd6d2492a8240c8ad0c9af2f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 9 Sep 2023 00:09:58 +0900 Subject: [PATCH 225/600] =?UTF-8?q?2022/03/01=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../global_objects/parseint/index.md | 181 +++++++----------- 1 file changed, 69 insertions(+), 112 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/parseint/index.md b/files/ja/web/javascript/reference/global_objects/parseint/index.md index fe524a932da7b9..449b04491c29ba 100644 --- a/files/ja/web/javascript/reference/global_objects/parseint/index.md +++ b/files/ja/web/javascript/reference/global_objects/parseint/index.md @@ -1,115 +1,77 @@ --- title: parseInt() slug: Web/JavaScript/Reference/Global_Objects/parseInt +l10n: + sourceCommit: 732e4808b512db2bdb3fd0c561323d302a003a0e --- {{jsSidebar("Objects")}} -**`parseInt()`** 関数は、文字列の引数を解析し、指定された[基数](https://ja.wikipedia.org/wiki/%E5%9F%BA%E6%95%B0) (数学的記数法の底) の整数値を返します。 +**`parseInt()`** 関数は、文字列の引数を解釈し、指定された[基数](https://ja.wikipedia.org/wiki/%E5%9F%BA%E6%95%B0) （数学的記数法の底）の整数値を返します。 {{EmbedInteractiveExample("pages/js/globalprops-parseint.html")}} ## 構文 -```js -parseInt(string); -parseInt(string, radix); +```js-nolint +parseInt(string) +parseInt(string, radix) ``` ### 引数 - `string` - - : 解析する値。この引数が文字列でなかった場合は、抽象操作 [`ToString`](https://tc39.es/ecma262/#sec-tostring) を用いて文字列に変換されます。この引数では先頭の{{glossary("whitespace", "ホワイトスペース")}}は無視されます。 + - : 整数で始まる文字列です。この引数では先頭の{{glossary("whitespace", "ホワイトスペース")}}は無視されます。 - `radix` {{optional_inline}} - - : `2` から `36` までの整数で、`string` の*基数* (数学的記数法の底) を表します。既定値が `10` では**ない**ので注意してください。基数の値が `Number` 型でなかった場合は、 `Number` に型変換されます。 - - > **警告:** [下記の解説](#description)では、`radix` が提供されなかった場合に何が起こるかをもっと詳細に説明しています。 + - : `2` から `36` までの整数で、`string` の*基数*（数学的記数法の底）を表します。これは [32 ビット整数](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#fixed-width_number_conversion)に変換されます。変換後にそれが 0 でなく、 \[2, 36] の範囲外であった場合、この関数は常に `NaN` を返します。`0` または指定されなかった場合、基数は `string` の値に基づいて推測されます。既定で常に `10` になるわけではありません。[下記の解説](#解説)では、 `radix` が提供されなかった場合に何が起こるかをもっと詳細に説明しています。 ### 返値 -指定された `string` を解析した整数値です。 - -また、下記の場合は {{jsxref("NaN")}} が返されます。 +指定された `string` を解釈した整数値です。また、次の場合は {{jsxref("NaN")}} が返されます。 - `radix` が `2` よりも小さいか `36` よりも大きい、または -- 最初のホワイトスペース以外の文字が数値に変換できない。 +- ホワイトスペース以外の最初の文字が数値に変換できない。 + +> **メモ:** JavaScript は言語レベルで「浮動小数点数」と「整数」の区別がありません。 `parseInt()` と [`parseFloat()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) は解釈の動作が異なるだけで、必ずしも返値が異なるわけではありません。例えば、 `parseInt("42")` と `parseFloat("42")` は同じ値である数値型の 42 を返します。 ## 解説 -`parseInt` 関数は第 1 引数を文字列に変換し、解析したうえで、整数または `NaN` を返します。 +`parseInt` 関数は[第 1 引数を文字列に変換し](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#string_coercion)、解釈したうえで、整数または `NaN` を返します。 `NaN` でない場合は、返値は第 1 引数を指定された `radix` で数値として解釈した整数値になります。(例えば、`radix` が `10` であれば 10 進数からの変換で、`8` であれば 8 進数からの変換で、`16` であれば 16 進数からの変換、などです。) -`10` 以上の基数については、`9` より大きい数字はアルファベットで示されます。たとえば、 16 進数 (基数 `16`) では `A` から `F` が用いられます。 - -`parseInt` 関数は指定された `radix` における数字ではない文字に出会うと、それ以降の文字を無視し、その時点で解析された整数値を返します。`parseInt` は数値を整数に切り捨てます。前後に空白があっても構いません。 +`radix` 引数は[数値に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#数値への変換)。提供されなかった場合、または値が 0、`NaN`、`Infinity` のいずれかであった場合（`undefined` は `NaN` に強制されます）、 JavaScript は以下のように想定します。 -数値によっては `e` の文字を文字列表現の中で使用しますので (例えば **`6.022E23`** は 6.022 × 10^23 を表します)、`parseInt` を使用して数値を切り捨てると、とても大きな数字やとても小さな数字を使用する際に予期しない結果を生み出すことがあります。`parseInt` を {{jsxref("Math.floor()")}} の代用として使うべきではありません。 +1. 入力された `string` の先頭のホワイトスペースと、存在すれば `+`/`-` 符号が除去され、 `0x` または `0X` （ゼロ、従うこと以下で小文字または大文字の X）で始まっている場合、 `radix` は `16` とみなされ、文字列の残りの部分は 16 進数として解釈されます。 +2. 入力された `string` が他の何らかの値で始まる場合、基数は `10` （10 進数）になります。 -`parseInt` は 2 つの符号を正確に理解します。`+` は正の符号で、`-` は負の符号です (ECMAScript 1 より)。これは解析の最初の段階で、ホワイトスペースを除去した後に行われます。符号が見つからなかった場合は、アルゴリズムは次の段階に移行します。そうでなければ、符号を取り除いて残りの文字列の数値の解析を実行します。 +> **メモ:** 他にも `0b` のような接頭辞は[数値リテラル](/ja/docs/Web/JavaScript/Reference/Lexical_grammar#2_進数)では有効ですが、 `parseInt()` では通常の数字として扱われます。 `parseInt()` は `0` で始まる文字列を 8 進数の値として扱うことはありません。 `parseInt()` が認識できる接頭辞は、16 進数の値に対する `0x` または `0X` だけです。 `radix` がなければ、それ以外はすべて 10 進数として解釈されます。 -引数 radix に渡された値は (必要に応じて) Number に型変換され、それから値が 0、`NaN`、`Infinity` のいずれかの場合 (undefined は `NaN` に型変換されます)、JavaScript は以下のように仮定します。 +基数が `16` の場合、 `parseInt()` では、オプションで符号文字 (`+`/`-`) の後に `0x` または `0X` を接頭辞として文字列を指定することができます。 -1. 入力した `string` が "`0x`" または "`0X`" (ゼロに続いて小文字または大文字の X) で始まった場合は、`radix` は `16` と仮定され、残りの文字列が 16 進数として解釈されます。 -2. 入力した `string` がその他の値で始まるときは、基数は `10` (10 進数) となります。 +（必要に応じて数値に変換された）基数の値が \[2, 36] （両端を含む）の範囲になかった場合は、 `parseInt` は `NaN` を返します。 -それ以外の場合、(必要に応じて型変換した) 基数の値が \[2, 36] の範囲から外れた場合は、`parseInt` は `NaN` を返します。 +`10` 以上の基数については、`9` より大きい数字はアルファベットで示されます。たとえば、 16 進数（基数 `16`）では `A` から `F` が用いられます。文字の大文字小文字は区別しません。 -最初の文字が使用している基数で数字に変換できなかった場合は、`parseInt` は `NaN` を返します。 +`parseInt` は 2 つの符号を正確に理解します。`+` は正の符号で、`-` は負の符号です。これは解釈の最初の段階で、ホワイトスペースを除去した後に行われます。符号が見つからなかった場合は、アルゴリズムは次の段階に移行します。そうでなければ、符号を取り除いて残りの文字列の数値の解釈を実行します。 -数値演算の目的では、`NaN` は基数がいくつであっても数値にはなりません。{{jsxref("isNaN")}} 関数を使うと、`parseInt` の結果が `NaN` であるかどうか確かめられます。数値演算で `NaN` が与えられると、演算結果も `NaN` になります。 +もし `parseInt` が `radix` で指定された基数に含まれる数字以外の文字に遭遇した場合、その文字とそれに続くすべての文字を無視し、この点まで解釈できた整数値を返します。例えば、 `1e3` は技術的には整数をエンコードしたものですが、（そして [`parseFloat()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) では正しく `1000` と解釈されますが）、 `parseInt("1e3", 10)` は `1` を返します。 `e` は基数 10 の有効な数字ではないからです。 `.` も数字ではないので、返値は常に整数になります。 -数値を特定の基数で文字列リテラルに変換したいときは、`thatNumber.toString(radix)` を使用してください。 +最初の文字が使用している基数で数字に変換できなかった場合は、 `parseInt` は `NaN` を返します。 +先頭のホワイトスペースは許容されます。 -> **警告:** `parseInt` は {{jsxref("BigInt")}} を {{jsxref("Number")}} へ変換するので、その処理中に精度が落ちます。これは後に付く数値ではない値が、"`n`" を含めて、切り落とされるからです。 +数値演算の目的では、`NaN` は基数がいくつであっても数値にはなりません。 [`Number.isNaN`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN) 関数を使うと、 `parseInt` の結果が `NaN` であるかどうか確かめられます。数値演算で `NaN` が与えられると、演算結果も `NaN` になります。 -### 基数を指定しない 8 進数の解釈 +巨大な数値では `e` の文字を文字列表現の中で使用しますので（例えば **`6.022E23`** は 6.022 × 10^23 を表します）、`parseInt` を使用して数値を切り捨てると、とても大きな数字やとても小さな数字を使用する際に予期しない結果を生み出すことがあります。 `parseInt` を {{jsxref("Math.trunc()")}} の代用として使うべきではありません。 -以下の情報は 2021 年時点での最新の実装には当てはまらないことに注意してください。 - -ECMAScript 3 で非推奨となったものの、 ECMAScript 3 の多くの実装が `0` で始まる数字の文字列を 8 進数として解釈していました。以下の式は 8 進数とされることもあれば、 10 進数で扱われることもありました。 - -```js -parseInt("0e0"); // 0 -parseInt("08"); // '8' は 8進数では用いられないため、0。 -``` +To convert a number to its string literal in a particular radix, use [`thatNumber.toString(radix)`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/toString). -ECMAScript 5 仕様書において、 `parseInt` 関数は、`0` の文字で始まる文字列を 8 進数として扱うことを実装に認めなくなりました。 2021 年時点では、多くの実装がこの動作を採用しています。 - -```js -parseInt("0e0"); // 0 -parseInt("08"); // 8 -``` - -### より厳密な解析関数 - -場合によっては、値の整数への解析により厳密な方法を採るのも有効でしょう。 - -正規表現が役立ちます。 - -```js -function filterInt(value) { - if (/^[-+]?(\d+|Infinity)$/.test(value)) { - return Number(value); - } else { - return NaN; - } -} - -console.log(filterInt("421")); // 421 -console.log(filterInt("-421")); // -421 -console.log(filterInt("+421")); // 421 -console.log(filterInt("Infinity")); // Infinity -console.log(filterInt("421e+0")); // NaN -console.log(filterInt("421hop")); // NaN -console.log(filterInt("hop1.61803398875")); // NaN -console.log(filterInt("1.61803398875")); // NaN -``` +`parseInt()` は数値を返すので、文字列が表す整数が[安全な範囲の外](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger)の場合、精度が落ちる可能性があります。 [`BigInt()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt/BigInt) 関数は {{jsxref("BigInt")}} を返すことで、任意の長さの整数を正確に解釈することに対応しています。 ## 例 -### parseInt の使用 +### parseInt() の使用 以下の例はいずれも `15` を返します。 @@ -117,9 +79,7 @@ console.log(filterInt("1.61803398875")); // NaN parseInt("0xF", 16); parseInt("F", 16); parseInt("17", 8); -parseInt(021, 8); -parseInt("015", 10); // ただし `parseInt(015, 10)` は 13 を返す -parseInt(15.99, 10); +parseInt("015", 10); // ただし `parseInt('015', 8)` は 13 を返す parseInt("15,123", 10); parseInt("FXX123", 16); parseInt("1111", 2); @@ -142,7 +102,6 @@ parseInt("546", 2); // 2 進数では 0 または 1 以外の数字は無効 parseInt("-F", 16); parseInt("-0F", 16); parseInt("-0XF", 16); -parseInt(-15.1, 10); parseInt("-17", 8); parseInt("-15", 10); parseInt("-1111", 2); @@ -150,64 +109,60 @@ parseInt("-15e1", 10); parseInt("-12", 13); ``` -以下の例はいずれも `4` を返します。 +以下の例は `224` を返します。 ```js -parseInt(4.7, 10); -parseInt(4.7 * 1e22, 10); // 非常に大きな数によって 4 になる -parseInt(0.00000000000434, 10); // 非常に小さな数によって 4 になる +parseInt("0e0", 16); ``` -以下の例は 1e+21 以上か 1e-7 以下の場合は `1` を返します。(基数 10 を使用している場合)。 +`parseInt()` は {{jsxref("BigInt")}} の値を扱いません。 `n` の文字で解釈を停止し、それまでの文字列を通常の整数として扱うため、精度が落ちる可能性があります。 -```js -parseInt(0.0000001, 10); -parseInt(0.000000123, 10); -parseInt(1e-7, 10); -parseInt(1000000000000000000000, 10); -parseInt(123000000000000000000000, 10); -parseInt(1e21, 10); +```js example-bad +parseInt("900719925474099267n"); +// 900719925474099300 ``` -以下の例は `224` を返します。 +代わりに、文字列を末尾の `n` なしで [`BigInt()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt/BigInt) 関数に渡してください。 -```js -parseInt("0e0", 16); +```js example-good +BigInt("900719925474099267"); +// 900719925474099267n ``` -{{jsxref("BigInt")}} の値は精度が落ちます。 +`parseInt` は[数値の区切り文字](/ja/docs/Web/JavaScript/Reference/Lexical_grammar#numeric_separators)を扱うことができません。 -```js -parseInt("900719925474099267n"); -// 900719925474099300 +```js example-bad +parseInt("123_456"); // 123 ``` -`parseInt` は[数字の区切り文字](/ja/docs/Web/JavaScript/Reference/Lexical_grammar#numeric_separators)は機能しません。 +### 文字列でないものに対する parseInt() を使用 + +`parseInt()` は、文字列でないものを大きな基数で扱う場合に興味深い結果をもたらすことがあります。例えば、 `36` の場合です（これはすべての英数字を有効な数字にします）。 ```js -parseInt("123_456"); -// 123 +parseInt(null, 36); // 1112745: "null" の文字列は 36 進数で 1112745 +parseInt(undefined, 36); // 86464843759093: "undefined" の文字列は 36 進数で 86464843759093 ``` -基数は `Number` に型変換されます。 +一般に、 {{jsxref("Math.trunc()")}} の代用として使用するのは良くない考えです。小さな数では使えるかもしれません。 ```js -const obj = { - valueOf() { - return 8; - }, -}; -parseInt("11", obj); // 9 - -obj.valueOf = function () { - return 1; -}; -parseInt("11", obj); // NaN - -obj.valueOf = function () { - return Infinity; -}; -parseInt("11", obj); // 11 +parseInt(15.99, 10); // 15 +parseInt(-15.1, 10); // -15 +``` + +しかし、これはたまたま、この数値の文字列表現が基本的な小数表記 (`"15.99"`, `"-15.1"`) を使用しており、 `parseInt()` が小数点で止まっているためにうまく動作しているだけです。 1e+21 以上または 1e-7 以下の数値は、文字列表現に指数表記 (`"1.5e+22"`, `"1.51e-8"`) を使用するため、 `parseInt()` は常に最初の桁の後に来る `e` の文字または小数点で停止します。つまり、大きな数でも小さな数でも、 `parseInt()` は 1 桁の整数を返すということです。 + +```js example-bad +parseInt(4.7 * 1e22, 10); // 巨大な数値が 4 になる +parseInt(0.00000000000434, 10); // 御苦笑の数値が 4 になる + +parseInt(0.0000001, 10); // 1 +parseInt(0.000000123, 10); // 1 +parseInt(1e-7, 10); // 1 +parseInt(1000000000000000000000, 10); // 1 +parseInt(123000000000000000000000, 10); // 1 +parseInt(1e21, 10); // 1 ``` ## 仕様書 @@ -221,8 +176,10 @@ parseInt("11", obj); // 11 ## 関連情報 - {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} +- [`Number()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/Number) - {{jsxref("Number.parseFloat()")}} - {{jsxref("Number.parseInt()")}} - {{jsxref("Global_Objects/isNaN", "isNaN()")}} -- {{jsxref("Number.toString()")}} -- {{jsxref("Object.valueOf")}} +- {{jsxref("Number.prototype.toString()")}} +- {{jsxref("Object.prototype.valueOf()")}} +- [`BigInt()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt/BigInt) From 850e5e0a73a909c739559512498c0808bdeab958 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 9 Sep 2023 01:03:49 +0900 Subject: [PATCH 226/600] =?UTF-8?q?2022/06/21=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reference/global_objects/weakref/index.md | 66 +++++++++++-------- 1 file changed, 39 insertions(+), 27 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/weakref/index.md b/files/ja/web/javascript/reference/global_objects/weakref/index.md index a5bac8e598945a..4a54266096bbe3 100644 --- a/files/ja/web/javascript/reference/global_objects/weakref/index.md +++ b/files/ja/web/javascript/reference/global_objects/weakref/index.md @@ -1,58 +1,71 @@ --- title: WeakRef slug: Web/JavaScript/Reference/Global_Objects/WeakRef +l10n: + sourceCommit: 270351317fdaa57ba9123a19aa281e9e40bb0baa --- {{JSRef}} -**`WeakRef`** オブジェクトにより、ガベージコレクションが行われることを妨げない他のオブジェクトへの弱い参照を保持します。 +**`WeakRef`** オブジェクトは、ガベージコレクションを受けることを妨げない他のオブジェクトへの弱い参照を保持します。 ## 解説 -`WeakRef` オブジェクトはオブジェクトへの弱い参照を含み、これは*ターゲット*または*リファレント*と呼ばれます。オブジェクトへの弱い参照は、ガベージコレクターによるオブジェクトの回収を妨げない参照です。対照的に、通常の (または*強い*) 参照はオブジェクトをメモリに保持します。オブジェクトが強い参照を持たなくなった場合、 JavaScript エンジンのガベージコレクターはオブジェクトを破棄してメモリを再取得することがあります。そうなると、弱い参照からオブジェクトを取得することはできなくなります。 +`WeakRef` オブジェクトはオブジェクトへの弱い参照を持ち、これは*ターゲット*または*リファレント*と呼ばれます。オブジェクトへの弱い参照は、ガベージコレクターによるオブジェクトの回収を妨げない参照です。対照的に、通常の（または*強い*）参照はオブジェクトをメモリーに保持します。オブジェクトが強い参照を持たなくなった場合、 JavaScript エンジンのガベージコレクターは、オブジェクトを破棄してメモリーを再取得することがあります。そうなると、弱い参照からオブジェクトを取得することはできなくなります。 -> **メモ:** 下記の[できる限り避ける](#Avoid_where_possible)の節をご覧ください。正しい `WeakRef` の使用は注意深く考える必要があり、可能であれば避けるのが最良です。 +[未登録のシンボル](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol#グローバルシンボルレジストリー)もガベージコレクション可能であるため、`WeakRef` オブジェクトの対象として使用することもできます。ただし、使用する用途は限られます。 + +### 可能な限り避ける + +`WeakRef` の正しい使用には慎重な検討が必要であり、可能であれば避けた方が良いでしょう。また、仕様で保証されていない特定の動作に依存しないことも重要です。ガベージコレクションがいつ、どのように、そしてどのように発生するかは、使用している JavaScript エンジンの実装に依存します。あるエンジンで観察した動作が、別のエンジン、同じエンジンの別のバージョン、あるいは同じエンジンの同じバージョンでも少し違う状況では異なる可能性があります。ガベージコレクションは、 JavaScript エンジンの実装者が常に解決策を改良している難しい問題です。 + +ここでは、 `WeakRef` 導入の[提案](https://github.com/tc39/proposal-weakrefs)の著者が盛り込んだ具体的なポイントをいくつか紹介します。 + +> [ガベージコレクション](https://ja.wikipedia.org/wiki/%E3%82%AC%E3%83%99%E3%83%BC%E3%82%B8%E3%82%B3%E3%83%AC%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3)は複雑です。アプリケーションもしくはライブラリーが WeakRef のガベージコレクションの解放処理か、即時にファイナライザー（解放処理のコールバック）の呼び出し処理に依存している場合は、予想した動作とは異なる動作を行うかもしれません。解放処理は予想よりもかなり後に行われるか、もしくは行われないからです。以下に挙げた様々な原因が考えられます。 +> +> - あるオブジェクトは、別のオブジェクトよりずっと早くガベージコレクションされるかもしれません。たとえ、世代集合などによって同じ時点で到達できなくなったとしてもです。 +> - ガベージコレクションの作業は、インクリメンタル技術やコンカレント技術を使用して、時間をかけて分割させることがあります。 +> - メモリー使用量やレスポンスのバランスをとるために、さまざまなランタイムヒューリスティックを使用する可能性があります。 +> - JavaScript エンジンは、到達できないように見えること（例えば、クロージャやインラインキャッシュなど）への参照を保持することがあります。 +> - JavaScript エンジンが異なれば、これらのことは異なる形で行われるかもしれませんし、同じエンジンでもバージョンによってアルゴリズムが変わるかもしれません。 +> - 複雑な要因によって、特定の API を使用している場合など、オブジェクトが予期せぬ時点まで保持されることがあります。 + +## WeakRef における注意 + +- コードがターゲットオブジェクトの `WeakRef` を作成した直後、または `WeakRef` の `deref` メソッドからターゲットオブジェクトを取得した場合、そのターゲットオブジェクトは現在の JavaScript の[ジョブ](https://tc39.es/ecma262/multipage/executable-code-and-execution-contexts.html#job)（スクリプトジョブの終わりに実行するプロミスリアクションジョブを含む）が終わるまで取り戻されません。すなわち、イベントループのターンの間だけ、オブジェクトが再取得されるのを「見る」ことができます。これは主に、指定された JavaScript エンジンのガベージコレクタの挙動をコードで明らかにすることを避けるためです。（ガベージコレクションは難しい問題です。JavaScriptエンジンの実装者は常に、これはうまくいく方法を洗練し、改善しています。） +- 複数の `WeakRef` が同じターゲットを持つ場合、互いに一致します。そのうちの一つで `deref` を呼び出した結果は、そのうちのもう一つで `deref` を呼び出した結果と一致します（同じジョブで）。 +- もし `WeakRef` の対象が {{jsxref("FinalizationRegistry")}} にもある場合、 `WeakRef` の対象はレジストリーに関連するクリーンアップコールバックが呼び出される前に、同時にクリアされます。 +- `WeakRef` の対象を変更することはできず、常に元の対象オブジェクトか、その対象が再取得されたときに `undefined` になるだけです。 +- `WeakRef` は `deref` から `undefined` を返さないかもしれません。たとえ、対象とするオブジェクトが何も強く保持されていなくても、ガベージコレクターがそのオブジェクトを取り戻すことを決定しないかもしれないからです。 ## コンストラクター - {{jsxref("WeakRef/WeakRef", "WeakRef()")}} - : 新しい `WeakRef` オブジェクトを生成します。 -## インスタンスメソッド - -- {{jsxref("WeakRef.deref", "WeakRef.prototype.deref()")}} - - : `WeakRef` オブジェクトの対象オブジェクトを返すか、対象オブジェクトが既に回収されている場合は `undefined` を返します。 +## インスタンスプロパティ -## 可能な限り避ける +これらのプロパティは `WeakRef.prototype` で定義されており、すべての `WeakRef` インスタンスで共有されます。 -`WeakRef` の正しい使用には慎重な検討が必要であり、可能であれば避けた方が良いでしょう。また、仕様で保証されていない特定の動作に依存しないことも重要です。ガベージコレクションがいつ、どのように、そしてどのように発生するかは、使用している JavaScript エンジンの実装に依存します。あるエンジンで観察した動作が、別のエンジン、同じエンジンの別のバージョン、あるいは同じエンジンの同じバージョンでも少し違う状況では異なる可能性があります。ガベージコレクションは、 JavaScript エンジンの実装者が常に解決策を改良している難しい問題です。 +- {{jsxref("Object/constructor", "WeakRef.prototype.constructor")}} {{Optional_Inline}} -ここでは、 WeakRef の提案の著者がその[説明文書](https://github.com/tc39/proposal-weakrefs/blob/master/README.md)に盛り込んだ具体的なポイントをいくつか紹介します。 + - : インスタンスオブジェクトを作成したコンストラクター関数です。 `WeakRef` インスタンスの場合、初期値は {{jsxref("WeakRef/WeakRef", "WeakRef")}} コンストラクターです。 -> [ガベージコレクション](https://ja.wikipedia.org/wiki/%E3%82%AC%E3%83%99%E3%83%BC%E3%82%B8%E3%82%B3%E3%83%AC%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3)は複雑です。アプリケーションもしくはライブラリが WeakRef のガベージコレクションの解放処理か、即時にファイナライザ (解放処理のコールバック) の呼出処理に依存している場合は、予想した動作とは異なる動作を行うかもしれません。解放処理は予想よりもかなり後に行われるか、もしくは行われないからです。以下に挙げた様々な原因が考えられます。 -> -> - One object might be garbage-collected much sooner than another object, even if they become unreachable at the same time, e.g., due to generational collection. -> - Garbage collection work can be split up over time using incremental and concurrent techniques. -> - Various runtime heuristics can be used to balance memory usage, responsiveness. -> - The JavaScript engine may hold references to things which look like they are unreachable (e.g., in closures, or inline caches). -> - Different JavaScript engines may do these things differently, or the same engine may change its algorithms across versions. -> - Complex factors may lead to objects being held alive for unexpected amounts of time, such as use with certain APIs. + > **メモ:** このプロパティは仕様上 "normative optional" とされており、適合性のある実装では `constructor` プロパティを公開しないことを意味しています。これにより、任意のコードが `WeakRef` コンストラクターを取得し、ガベージコレクションを監視することができなくなります。しかし、主要なエンジンはすべて既定では公開しています。 -## WeakRef における注意 +- `WeakRef.prototype[@@toStringTag]` + - : [`@@toStringTag`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) プロパティの初期値は文字列 `"WeakRef"` です。このプロパティは {{jsxref("Object.prototype.toString()")}} で使用されます。 -Some notes on `WeakRef`s: +## インスタンスメソッド -- If your code has just created a `WeakRef` for a target object, or has gotten a target object from a `WeakRef`'s `deref` method, that target object will not be reclaimed until the end of the current JavaScript [job](https://tc39.es/ecma262/#job) (including any promise reaction jobs that run at the end of a script job). That is, you can only "see" an object get reclaimed between turns of the event loop. This is primarily to avoid making the behavior of any given JavaScript engine's garbage collector apparent in code — because if it were, people would write code relying on that behavior, which would break when the garbage collector's behavior changed. (Garbage collection is a hard problem; JavaScript engine implementers are constantly refining and improving how it works.) -- If multiple `WeakRef`s have the same target, they're consistent with one another. The result of calling `deref` on one of them will match the result of calling `deref` on another of them (in the same job), you won't get the target object from one of them but `undefined` from another. -- If the target of a `WeakRef` is also in a {{jsxref("FinalizationRegistry")}}, the `WeakRef`'s target is cleared at the same time or before any cleanup callback associated with the registry is called; if your cleanup callback calls `deref` on a `WeakRef` for the object, it will receive `undefined`. -- You cannot change the target of a `WeakRef`, it will always only ever be the original target object or `undefined` when that target has been reclaimed. -- A `WeakRef` might never return `undefined` from `deref`, even if nothing strongly holds the target, because the garbage collector may never decide to reclaim the object. +- {{jsxref("WeakRef.prototype.deref()")}} + - : `WeakRef` オブジェクトの対象オブジェクトを返すか、対象オブジェクトが既に回収されている場合は `undefined` を返します。 ## 例 ### WeakRef オブジェクトの使用 -This example starts a counter shown in a DOM element, stopping when the element doesn't exist anymore: +この例では、 DOM 要素に表示させるカウンターを開始させ、その要素が存在しなくなったときに停止させます。 ```js class Counter { @@ -95,7 +108,6 @@ class Counter { } const counter = new Counter(document.getElementById("counter")); -counter.start(); setTimeout(() => { document.getElementById("counter").remove(); }, 5000); From 134fac5ecca2415c5be1c757dab769f7d3ffc22f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 9 Sep 2023 01:18:07 +0900 Subject: [PATCH 227/600] =?UTF-8?q?2022/03/30=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../global_objects/weakref/weakref/index.md | 27 ++++++++++++++----- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/weakref/weakref/index.md b/files/ja/web/javascript/reference/global_objects/weakref/weakref/index.md index e495eeb4ca7810..2cc689eeb6d119 100644 --- a/files/ja/web/javascript/reference/global_objects/weakref/weakref/index.md +++ b/files/ja/web/javascript/reference/global_objects/weakref/weakref/index.md @@ -1,28 +1,41 @@ --- title: WeakRef() コンストラクター slug: Web/JavaScript/Reference/Global_Objects/WeakRef/WeakRef +l10n: + sourceCommit: 270351317fdaa57ba9123a19aa281e9e40bb0baa --- {{JSRef}} -**`WeakRef`** コンストラクターは、指定された対象オブジェクトを参照する {{jsxref("WeakRef")}} オブジェクトを生成します。 +**`WeakRef()`** コンストラクターは、 {{jsxref("WeakRef")}} オブジェクトを生成します。 ## 構文 +```js-nolint +new WeakRef(target) ``` -new WeakRef(targetObject); -``` + +> **メモ:** `WeakRef()` は [`new`](/ja/docs/Web/JavaScript/Reference/Operators/new) との組み合わせでのみ構築されます。 `new` 無しで呼び出そうとすると {{jsxref("TypeError")}} が発生します。 ### 引数 -- `targetObject` - - : WeakRef が参照する対象オブジェクト (_referent_ とも呼ばれます)。 +- `target` + - : WeakRef の参照先となるターゲット値（リファレントとも呼ばれます）。オブジェクトまたは[未登録のシンボル](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol#グローバルシンボルレジストリー)でなければなりません。 + +### 返値 + +指定されたターゲット地を参照する `WeakRef` オブジェクトです。 + +### 例外 + +- {{jsxref("TypeError")}} + - : `target` がオブジェクトまたは[未登録のシンボル](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol#グローバルシンボルレジストリー)ではない場合に発生します。 ## 例 ### 新しい WeakRef オブジェクトの生成 -完全な例は中心となる [`WeakRef`](/ja/docs/Web/JavaScript/Reference/Global_Objects/WeakRef#Examples) ページを参照してください。 +完全な例は中心となる [`WeakRef`](/ja/docs/Web/JavaScript/Reference/Global_Objects/WeakRef#例) ページを参照してください。 ```js class Counter { @@ -40,7 +53,7 @@ class Counter { ## ブラウザーの互換性 -{{Compat("javascript.builtins.WeakRef.WeakRef")}} +{{Compat}} ## 関連情報 From 6b964ebe5d1db4704dd3bfe64616205d0088c63f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 9 Sep 2023 01:28:09 +0900 Subject: [PATCH 228/600] =?UTF-8?q?2022/08/25=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../global_objects/weakref/deref/index.md | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/weakref/deref/index.md b/files/ja/web/javascript/reference/global_objects/weakref/deref/index.md index 52ee1c89114f96..dd8c33ab97252e 100644 --- a/files/ja/web/javascript/reference/global_objects/weakref/deref/index.md +++ b/files/ja/web/javascript/reference/global_objects/weakref/deref/index.md @@ -1,6 +1,8 @@ --- title: WeakRef.prototype.deref() slug: Web/JavaScript/Reference/Global_Objects/WeakRef/deref +l10n: + sourceCommit: 270351317fdaa57ba9123a19aa281e9e40bb0baa --- {{JSRef}} @@ -9,23 +11,27 @@ slug: Web/JavaScript/Reference/Global_Objects/WeakRef/deref ## 構文 -```js -deref(); +```js-nolint +deref() ``` +### 引数 + +なし。 + ### 返値 -WeakRef のターゲットオブジェクトです。そのオブジェクトが既にガベージコレクションされている場合は `undefined` です。 +WeakRef の参照先となるターゲット値で、オブジェクトまたは[未登録のシンボル](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol#グローバルシンボルレジストリー)でなければなりません。そのオブジェクトが既にガベージコレクションされている場合は `undefined` です。 -## 注意事項 +## 解説 -重要な注意事項については {{jsxref("WeakRef")}} ページの [WeakRef の注意事項](/ja/docs/Web/JavaScript/Reference/Global_Objects/WeakRef#notes_on_weakrefs)の節を参照してください。 +重要な注意事項については {{jsxref("WeakRef")}} ページの [WeakRef の注意事項](/ja/docs/Web/JavaScript/Reference/Global_Objects/WeakRef#weakref_における注意)の節を参照してください。 ## 例 ### deref の使用 -完全な例については {{jsxref("WeakRef")}} ページ内の[例](/ja/docs/Web/JavaScript/Reference/Global_Objects/WeakRef#examples)の節を参照してください。 +完全な例については {{jsxref("WeakRef")}} ページ内の[例](/ja/docs/Web/JavaScript/Reference/Global_Objects/WeakRef#例)の節を参照してください。 ```js const tick = () => { From 659db94305c355ae3a4ee3fc448b80c967ca9139 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=BF=E3=81=91CAT?= Date: Sat, 9 Sep 2023 08:50:30 +0900 Subject: [PATCH 229/600] Add USBOutTransferResult to WebUSB API --- files/ja/web/api/webusb_api/index.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/files/ja/web/api/webusb_api/index.md b/files/ja/web/api/webusb_api/index.md index 177282907b954e..fada9c168cd2c1 100644 --- a/files/ja/web/api/webusb_api/index.md +++ b/files/ja/web/api/webusb_api/index.md @@ -29,6 +29,8 @@ WebUSB は、これらの標準化されていない USB デバイスサービ - : ペアリングした USB デバイスのメタデータと、制御用のメソッドを提供します。 - {{domxref("USBInTransferResult")}} - : USB デバイスから USB ホストへのデータ転送要求の結果を表します。 +- {{domxref("USBOutTransferResult")}} + - : USB ホストから USB デバイスへのデータ転送要求の結果を表します。 - {{domxref("USBIsochronousInTransferPacket")}} - : アイソクロナス転送用のエンドポイントにおける USB デバイスから USB ホストへのデータ転送要求による個々のパケットの状態を表します。 - {{domxref("USBIsochronousInTransferResult")}} From bfa0e46e499ff84268ec4870a0ae69c0a1f4a231 Mon Sep 17 00:00:00 2001 From: hashrock Date: Sat, 9 Sep 2023 09:35:52 +0900 Subject: [PATCH 230/600] ja: fix link syntax --- files/ja/web/javascript/reference/operators/import/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/javascript/reference/operators/import/index.md b/files/ja/web/javascript/reference/operators/import/index.md index 2aeacff8efb359..91a884e30b27f9 100644 --- a/files/ja/web/javascript/reference/operators/import/index.md +++ b/files/ja/web/javascript/reference/operators/import/index.md @@ -63,7 +63,7 @@ import("/my-module.js").then((mod2) => { }); ``` -ただし、1つだけ奇妙な場合があります。プロミスは決して [thenable] (/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise#thenables) に履行されることはないので、もし `my-module.js` モジュールが `then()` という関数をエクスポートすると、その関数はダイナミックインポートのプロミスが履行されると自動的に呼ばれることになります。 +ただし、1つだけ奇妙な場合があります。プロミスは決して [thenable](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise#thenables) に履行されることはないので、もし `my-module.js` モジュールが `then()` という関数をエクスポートすると、その関数はダイナミックインポートのプロミスが履行されると自動的に呼ばれることになります。 ```js // my-module.js From 43e053ee4f2d353599f308e0ac85675a15885c8a Mon Sep 17 00:00:00 2001 From: hashrock Date: Sat, 9 Sep 2023 11:16:33 +0900 Subject: [PATCH 231/600] Update files/ja/web/javascript/reference/operators/import/index.md Co-authored-by: A1lo --- files/ja/web/javascript/reference/operators/import/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/javascript/reference/operators/import/index.md b/files/ja/web/javascript/reference/operators/import/index.md index 91a884e30b27f9..a5333ba46400f4 100644 --- a/files/ja/web/javascript/reference/operators/import/index.md +++ b/files/ja/web/javascript/reference/operators/import/index.md @@ -63,7 +63,7 @@ import("/my-module.js").then((mod2) => { }); ``` -ただし、1つだけ奇妙な場合があります。プロミスは決して [thenable](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise#thenables) に履行されることはないので、もし `my-module.js` モジュールが `then()` という関数をエクスポートすると、その関数はダイナミックインポートのプロミスが履行されると自動的に呼ばれることになります。 +ただし、1つだけ奇妙な場合があります。プロミスは決して [thenable](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise#thenable) に履行されることはないので、もし `my-module.js` モジュールが `then()` という関数をエクスポートすると、その関数はダイナミックインポートのプロミスが履行されると自動的に呼ばれることになります。 ```js // my-module.js From ff3baab2f0f81e6fbb330ca052fad78415809736 Mon Sep 17 00:00:00 2001 From: MikeCAT Date: Sat, 9 Sep 2023 09:52:01 +0900 Subject: [PATCH 232/600] Translate USB result interfaces --- files/ja/web/api/usbintransferresult/index.md | 35 +++++++++++++++++++ .../usbisochronousintransferpacket/index.md | 35 +++++++++++++++++++ .../usbisochronousintransferresult/index.md | 30 ++++++++++++++++ .../usbisochronousouttransferpacket/index.md | 34 ++++++++++++++++++ .../usbisochronousouttransferresult/index.md | 28 +++++++++++++++ .../ja/web/api/usbouttransferresult/index.md | 34 ++++++++++++++++++ 6 files changed, 196 insertions(+) create mode 100644 files/ja/web/api/usbintransferresult/index.md create mode 100644 files/ja/web/api/usbisochronousintransferpacket/index.md create mode 100644 files/ja/web/api/usbisochronousintransferresult/index.md create mode 100644 files/ja/web/api/usbisochronousouttransferpacket/index.md create mode 100644 files/ja/web/api/usbisochronousouttransferresult/index.md create mode 100644 files/ja/web/api/usbouttransferresult/index.md diff --git a/files/ja/web/api/usbintransferresult/index.md b/files/ja/web/api/usbintransferresult/index.md new file mode 100644 index 00000000000000..c5c9f6f545e08e --- /dev/null +++ b/files/ja/web/api/usbintransferresult/index.md @@ -0,0 +1,35 @@ +--- +title: USBInTransferResult +slug: Web/API/USBInTransferResult +l10n: + sourceCommit: 3ca86db64959ed9dc6c8021dc3eb89e82a6628c7 +--- + +{{securecontext_header}}{{APIRef("WebUSB API")}}{{SeeCompatTable}} + +[WebUSB API](/ja/docs/Web/API/WebUSB_API) の `USBInTransferResult` インターフェイスは、`USBDevice` インターフェイスの `transferIn()` および `controlTransferIn()` メソッドを呼び出した結果を提供します。これは、USB デバイスから USB ホストへのデータ転送の要求の結果を表します。 + +## コンストラクター + +- {{domxref("USBInTransferResult.USBInTransferResult", "USBInTransferResult()")}} {{Experimental_Inline}} + - : 指定の `status` および `data` フィールドを持つ新しい `USBInTransferResult` オブジェクトを生成します。 + +## インスタンスプロパティ + +- {{domxref("USBInTransferResult.data")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : あれば、USB デバイスから受信したデータが格納された `DataView` オブジェクトを返します。 +- {{domxref("USBInTransferResult.status")}} {{ReadOnlyInline}} {{Experimental_Inline}} + + - : 転送要求の状態を返します。以下のいずれかです。 + + - `"ok"` — 転送は成功しました。 + - `"stall"` — デバイスはエンドポイントでストール状態を発生させ、エラーを示しました。コントロールエンドポイントでのストールをクリアする必要はありません。バルクエンドポイントやインタラプトエンドポイントでのストールは、次の `transferIn()` の呼び出しの前に `clearHalt()` を呼び出してクリアする必要があります。 + - `"babble"` — デバイスは想定より多くのデータで応答しました。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbisochronousintransferpacket/index.md b/files/ja/web/api/usbisochronousintransferpacket/index.md new file mode 100644 index 00000000000000..4570093a037abe --- /dev/null +++ b/files/ja/web/api/usbisochronousintransferpacket/index.md @@ -0,0 +1,35 @@ +--- +title: USBIsochronousInTransferPacket +slug: Web/API/USBIsochronousInTransferPacket +l10n: + sourceCommit: 3ca86db64959ed9dc6c8021dc3eb89e82a6628c7 +--- + +{{securecontext_header}}{{APIRef("WebUSB API")}}{{SeeCompatTable}} + +[WebUSB API](/ja/docs/Web/API/WebUSB_API) の `USBIsochronousInTransferPacket` インターフェイスは、`USBDevice` インターフェイスの `isochronousTransferIn()` メソッドの呼び出しに対する応答の一部です。これは、アイソクロナスエンドポイントによる USB デバイスから USB ホストへのデータ転送の要求における個別のパケットの状態を表します。 + +## コンストラクター + +- {{domxref("USBIsochronousInTransferPacket.USBIsochronousInTransferPacket", "USBIsochronousInTransferPacket()")}} {{Experimental_Inline}} + - : 指定の `status` および `data` フィールドを持つ新しい `USBIsochronousInTransferPacket` オブジェクトを生成します。 + +## インスタンスプロパティ + +- {{domxref("USBIsochronousInTransferPacket.data")}} {{ReadOnlyInline}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : あれば、USB デバイスからこのパケットで受信したデータが格納された `DataView` オブジェクトを返します。 +- {{domxref("USBIsochronousInTransferPacket.status")}} {{ReadOnlyInline}} {{ReadOnlyInline}} {{Experimental_Inline}} + + - : 転送要求の状態を返します。以下のいずれかです。 + + - `"ok"` — 転送は成功しました。 + - `"stall"` — デバイスはエンドポイントでストール状態を発生させ、エラーを示しました。アイソクロナスエンドポイントでのストールをクリアする必要はありません。 + - `"babble"` — デバイスは想定より多くのデータで応答しました。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbisochronousintransferresult/index.md b/files/ja/web/api/usbisochronousintransferresult/index.md new file mode 100644 index 00000000000000..bbeeb0b94eaf74 --- /dev/null +++ b/files/ja/web/api/usbisochronousintransferresult/index.md @@ -0,0 +1,30 @@ +--- +title: USBIsochronousInTransferResult +slug: Web/API/USBIsochronousInTransferResult +l10n: + sourceCommit: 3ca86db64959ed9dc6c8021dc3eb89e82a6628c7 +--- + +{{securecontext_header}}{{APIRef("WebUSB API")}}{{SeeCompatTable}} + +[WebUSB API](/ja/docs/Web/API/WebUSB_API) の `USBIsochronousInTransferResult` インターフェイスは、`USBDevice` インターフェイスの `isochronousTransferIn()` メソッドを呼び出した結果を提供します。これは、USB デバイスから USB ホストへのデータ転送の要求の結果を表します。 + +## コンストラクター + +- {{domxref("USBIsochronousInTransferResult.USBIsochronousInTransferResult", "USBIsochronousInTransferResult()")}} {{Experimental_Inline}} + - : 指定の `packets` および `data` フィールドを持つ新しい `USBIsochronousInTransferResult` オブジェクトを生成します。 + +## インスタンスプロパティ + +- {{domxref("USBIsochronousInTransferResult.data")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : デバイスから受信したデータを格納した `DataView` オブジェクトを返します。これはすべてのパケットのデータを合わせたものです。個々のパケットで受信したこのバッファーの部分は、配列 `packets` 内の個別の `DataView` オブジェクトを参照してください。 +- {{domxref("USBIsochronousInTransferResult.packets")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : 個々のデバイスからのパケットを受信する要求の結果が格納された `USBIsochronousInTransferPacket` オブジェクトの配列を返します。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbisochronousouttransferpacket/index.md b/files/ja/web/api/usbisochronousouttransferpacket/index.md new file mode 100644 index 00000000000000..f949ef91164f6f --- /dev/null +++ b/files/ja/web/api/usbisochronousouttransferpacket/index.md @@ -0,0 +1,34 @@ +--- +title: USBIsochronousOutTransferPacket +slug: Web/API/USBIsochronousOutTransferPacket +l10n: + sourceCommit: 3ca86db64959ed9dc6c8021dc3eb89e82a6628c7 +--- + +{{securecontext_header}}{{APIRef("WebUSB API")}}{{SeeCompatTable}} + +[WebUSB API](/ja/docs/Web/API/WebUSB_API) の `USBIsochronousOutTransferPacket` インターフェイスは、`USBDevice` インターフェイスの `isochronousTransferOut()` メソッドの呼び出しに対する応答の一部です。これは、アイソクロナスエンドポイントによる USB ホストから USB デバイスへのデータ転送の要求における個別のパケットの状態を表します。 + +## コンストラクター + +- {{domxref("USBIsochronousOutTransferPacket.USBIsochronousOutTransferPacket", "USBIsochronousOutTransferPacket()")}} {{Experimental_Inline}} + - : 指定の `status` および `bytesWritten` フィールドを持つ新しい `USBIsochronousOutTransferPacket` オブジェクトを生成します。 + +## インスタンスプロパティ + +- {{domxref("USBIsochronousOutTransferPacket.bytesWritten")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : このパケットでデバイスに送信されたバイト数を返します。 +- {{domxref("USBIsochronousOutTransferPacket.status")}} {{ReadOnlyInline}} {{Experimental_Inline}} + + - : 転送要求の状態を返します。以下のいずれかです。 + + - `"ok"` — 転送は成功しました。 + - `"stall"` — デバイスはエンドポイントでストール状態を発生させ、エラーを示しました。アイソクロナスエンドポイントでのストールをクリアする必要はありません。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbisochronousouttransferresult/index.md b/files/ja/web/api/usbisochronousouttransferresult/index.md new file mode 100644 index 00000000000000..578792f8e12546 --- /dev/null +++ b/files/ja/web/api/usbisochronousouttransferresult/index.md @@ -0,0 +1,28 @@ +--- +title: USBIsochronousOutTransferResult +slug: Web/API/USBIsochronousOutTransferResult +l10n: + sourceCommit: 3ca86db64959ed9dc6c8021dc3eb89e82a6628c7 +--- + +{{securecontext_header}}{{APIRef("WebUSB API")}}{{SeeCompatTable}} + +[WebUSB API](/ja/docs/Web/API/WebUSB_API) の `USBIsochronousOutTransferResult` インターフェイスは、`USBDevice` インターフェイスの `isochronousTransferOut()` メソッドの呼び出しの結果を提供します。これは、USB ホストから USB デバイスへのデータ転送の要求の結果を表します。 + +## コンストラクター + +- {{domxref("USBIsochronousOutTransferResult.USBIsochronousOutTransferResult", "USBIsochronousOutTransferResult()")}} {{Experimental_Inline}} + - : 指定の `packet` フィールドを持つ新しい `USBIsochronousOutTransferResult` オブジェクトを生成します。 + +## インスタンスプロパティ + +- {{domxref("USBIsochronousOutTransferResult.packets")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : 個々のデバイスへパケットを送信する要求の結果が格納された `USBIsochronousOutTransferPacket` オブジェクトの配列を返します。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbouttransferresult/index.md b/files/ja/web/api/usbouttransferresult/index.md new file mode 100644 index 00000000000000..e1649e49853e84 --- /dev/null +++ b/files/ja/web/api/usbouttransferresult/index.md @@ -0,0 +1,34 @@ +--- +title: USBOutTransferResult +slug: Web/API/USBOutTransferResult +l10n: + sourceCommit: 3ca86db64959ed9dc6c8021dc3eb89e82a6628c7 +--- + +{{securecontext_header}}{{APIRef("WebUSB API")}}{{SeeCompatTable}} + +[WebUSB API](/ja/docs/Web/API/WebUSB_API) の `USBOutTransferResult` インターフェイスは、`USBDevice` インターフェイスの `transferOut()` および `controlTransferOut()` メソッドを呼び出した結果を提供します。これは、USB ホストから USB デバイスへのデータ転送の要求の結果を表します。 + +## コンストラクター + +- {{domxref("USBOutTransferResult.USBOutTransferResult", "USBOutTransferResult()")}} {{Experimental_Inline}} + - : 指定の `status` および `bytesWritten` フィールドを持つ新しい `USBOutTransferResult` オブジェクトを生成します。 + +## インスタンスプロパティ + +- {{domxref("USBOutTransferResult.bytesWritten")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : 転送要求によりデバイスに送られたバイト数を返します。 +- {{domxref("USBOutTransferResult.status")}} {{ReadOnlyInline}} {{Experimental_Inline}} + + - : 転送要求の状態を返します。以下のいずれかです。 + + - `"ok"` — 転送は成功しました。 + - `"stall"` — デバイスはエンドポイントでストール状態を発生させ、エラーを示しました。バルクエンドポイントやインタラプトエンドポイントでのストールは、次の `transferOut()` の呼び出しの前に `clearHalt()` を呼び出してクリアする必要があります。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} From 141a2f7561e96c119879be8814589702a1b74b4b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 9 Sep 2023 01:59:32 +0900 Subject: [PATCH 233/600] =?UTF-8?q?2023/02/22=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/push_api/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/ja/web/api/push_api/index.md b/files/ja/web/api/push_api/index.md index 2ec41721db60b3..cf8130ef39fa49 100644 --- a/files/ja/web/api/push_api/index.md +++ b/files/ja/web/api/push_api/index.md @@ -2,12 +2,12 @@ title: プッシュ API slug: Web/API/Push_API l10n: - sourceCommit: 3dbc1d7d9a6bbd049dd870fff6a8f58791fad8fd + sourceCommit: 3de6b951c2d3b03c7c4a8d8e92e35ebcb4639af2 --- {{DefaultAPISidebar("Push API")}} -**Push API** は、ウェブアプリケーションがサーバーからメッセージ (プッシュ通知) を受信できるようにします。ウェブアプリケーションがフォアグランド状態かどうか、読み込まれているかどうかに関わらず利用できます。開発者は、オプトインしたユーザーへ非同期の通知と更新を届けることができ、タイムリーな新着コンテンツによってユーザーの関心を得られます +**プッシュ API** は、ウェブアプリケーションがサーバーからメッセージ (プッシュ通知) を受信できるようにします。ウェブアプリケーションがフォアグランド状態かどうか、読み込まれているかどうかに関わらず利用できます。開発者は、オプトインしたユーザーへ非同期の通知と更新を届けることができ、タイムリーな新着コンテンツによってユーザーの関心を得られます ## プッシュ通知の概念と使い方 From 5fbf84f5bf92d32248a033336b7a20f6c38afa14 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 9 Sep 2023 11:10:14 +0900 Subject: [PATCH 234/600] =?UTF-8?q?2023/05/10=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/api/push_api/best_practices/index.md | 62 +++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 files/ja/web/api/push_api/best_practices/index.md diff --git a/files/ja/web/api/push_api/best_practices/index.md b/files/ja/web/api/push_api/best_practices/index.md new file mode 100644 index 00000000000000..54dc54af99da2b --- /dev/null +++ b/files/ja/web/api/push_api/best_practices/index.md @@ -0,0 +1,62 @@ +--- +title: ウェブプッシュ API 通知のベストプラクティス +slug: Web/API/Push_API/Best_Practices +l10n: + sourceCommit: b0870830e4c02596ca6c501f8f8b468a917eafc2 +--- + +{{DefaultAPISidebar("Push API") }} + +この記事では、ユーザーエンゲージメントのためにプッシュ通知を使用するウェブサイトやアプリケーションを開発する際に留意すべき最善の手法について有益な概要を提供します。 + +> 「うまくやれば、あるに越したことはないが、うまくやらないと実に迷惑だ。」 — ブラウザー開発者2人がプッシュ通知の倫理について議論しているときの会話。 + +## ウェブプッシュ通知の概要 + +ウェブプッシュ通知（[通知](/ja/docs/Web/API/Notifications_API)、[プッシュ](/ja/docs/Web/API/Push_API)、[サービスワーカー](/ja/docs/Web/API/Service_Worker_API) APIの組み合わせを使用して作成される）は、製品開発者やマーケティング担当者が自分のサイトの注目を取得するために使用しているノイズの一部です。「ウェブプッシュ通知」でウェブを検索すると、プッシュ通知を使用して、ウェブサイトから離脱した人々が購入を完了したり、最新のニュースを送ったり、おすすめの商品へのリンクを受け取ったりできるように再エンゲージするべきだと考えるマーケティングの専門家の記事を見つけることができます。 + +### 暗黒面 + +その斬新さは、進取の気性に富むサイトが潜在顧客にリーチするための新しい未開拓の機会を提供します。顧客はメールの返信のためにタブを切り替えていませんか？期限つきの送料無料キャンペーンで顧客を取り戻しましょう！ + +しかし実に、これがプッシュ通知の最良の使用方法なのでしょうか？それとも、古くて使い古されたポップアップ広告の新しい反復なのでしょうか？ + +> 「ウェブプッシュはスパムフォルダー内に終わる心配がありません。広告ブロッカーにブロックされることもありません。ウェブサイトを閉じていてもデスクトップに正しく表示されます。モバイルでは、ブラウザーが実行されていなくても、アプリのプッシュ通知のように通知トレイに表示させます。" - 無名のマーケティングサイト + +### プッシュ通知の正の利用方法 + +しかし、プッシュ通知には明るく有益な面もあります。例えば、あなたのチームで通常チャットプログラムを使用してコミュニケーションをとっているとします。プロジェクトマネージャーが承認に問題を見つけ、作業を進める前にあなたの意見が聞きたいとします。 + +あなたに注意を促すために色々やってみた後、彼らがあなたにメールを送ると、使っているウェブメールアプリが開いていなくても、メールアプリがプッシュ通知を生成すれば、ウェブのメールアプリが開いていなくても注意を引くことに成功します。 + +この文書では、ウェブプッシュ通知の倫理的使用について説明します。プッシュ通知は、イライラや煩わしさを解消してくれることもあれば、発生させてしまうこともあります。プッシュ通知を使用する際に賢明な提案（と判断）をできるかどうかは、開発者であるあなた次第です。 + +## このプッシュ通知で何を期待しますか？ + +何事もそうですが、大きな力には大きな責任が伴います。すべてのプッシュ通知は有益で時刻に敏感なものであるべきであり、ユーザーには最初のプッシュ通知を送信する前に必ずその許可を求め、今後プッシュ通知を取得しないようにする簡単な方法を提供する必要があります。 + +プッシュ通知が必要かどうかを判断するには、基本的な質問に答える必要があります。 + +- リアルタイムでレスポンスを待っている人がいますか？上記の例では、プログラムマネージャーがあなたのレスポンスを待っているので、プッシュ通知が適切です。 +- 最新情報の更新は必要でしょうか？私は様々なソーシャルメディアのニュースソースを集約するサービスワーカースクリプトを使用しています。興味深いストーリーがトレンドになったら、通知を取得したいです！ +- タイムリーな新しいニュースはありますか？ここが少し難しいところです。新しいニュースサイトが「見て見て！」とばかりにプッシュ通知をリクエストすることがあります。すべてはユーザーが何を望んでいるかで決まりますが、行動を用いて意図を判断することができます。例えば、ユーザーが複数の記事を閲覧していたり、ページに数分間滞在している場合、更新情報を受け取ることに関心がある可能性があります。 + +プッシュ通知がすべて必要かどうかという問題に加えて、プッシュ通知には、さりげなく消えるものから持続的に対話を求めるものまで、さまざまな種類があります。 + +対話を必要とするものは、とても迷惑になる可能性があるため、控えめに使用するように注意してください。通知は邪魔なものではなく、支援するものであるべきです。 + +## 信頼の構築 + +ある調査によると、プッシュ通知の60％がブロックされていることが示されています。リアルタイムでプッシュ通知を許可するには、信頼が必要です。ユーザーへの敬意を示す良いコンテンツを提供し、プッシュ通知を受け入れることに明確な値を示す、優れたデザインのウェブサイトを持つことで信頼を築くことができます。 + +## ブラウザーによる対策 + +過去にプッシュ通知の悪用があったため、ウェブブラウザー開発者はこの問題を改善するための戦略を実装し始めています。例えば、 Safari 12.1 では、ページがプッシュ通知の実行権限をリクエストする前に、ユーザーが何らかの方法でページを操作することが要求されるようになっています。これにより、少なくとも、ユーザーは繰り返しになりますが、ほとんど見ていないウェブページで、自発的にこの質問をされることを防ぐことができます。 + +Firefox の場合、 [Firefox バグ 1524619](https://bugzil.la/1524619) を参照してください。 Firefox 68 では、環境設定 `dom.webnotifications.requireuserinteraction` に隠され、既定では無効ですが実装していることがわかります。 + +## 関連情報 + +- [通知 API](/ja/docs/Web/API/Notifications_API) +- [通知 API の使用](/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API) +- [プッシュ API](/ja/docs/Web/API/Push_API) From af02d269450c7dd0b5823fe992fe17a758725217 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 10 Sep 2023 17:19:20 +0900 Subject: [PATCH 235/600] =?UTF-8?q?=E8=BF=BD=E5=8A=A0=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/push_api/index.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/files/ja/web/api/push_api/index.md b/files/ja/web/api/push_api/index.md index cf8130ef39fa49..34a174bc131739 100644 --- a/files/ja/web/api/push_api/index.md +++ b/files/ja/web/api/push_api/index.md @@ -7,11 +7,11 @@ l10n: {{DefaultAPISidebar("Push API")}} -**プッシュ API** は、ウェブアプリケーションがサーバーからメッセージ (プッシュ通知) を受信できるようにします。ウェブアプリケーションがフォアグランド状態かどうか、読み込まれているかどうかに関わらず利用できます。開発者は、オプトインしたユーザーへ非同期の通知と更新を届けることができ、タイムリーな新着コンテンツによってユーザーの関心を得られます +**プッシュ API** は、ウェブアプリケーションがサーバーからメッセージ (プッシュ通知) を受信できるようにします。ウェブアプリケーションがフォアグランド状態かどうか、読み込まれているかどうかに関わらず利用できます。開発者は、オプトインしたユーザーへ非同期の通知と更新を届けることができ、タイムリーな新着コンテンツによってユーザーの関心を得られます。 ## プッシュ通知の概念と使い方 -> **警告:** PushManager へのサブスクリプションを実装する場合、アプリで CSRF/XSRF 問題を起こさないように保護することが非常に重要です。詳しくは以下の記事を参照してください。 +> **警告:** PushManager のサブスクリプションを実装する場合、アプリで CSRF/XSRF 問題を起こさないように保護することが非常に重要です。詳しくは以下の記事を参照してください。 > > - [Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html) > - [Preventing CSRF and XSRF Attacks](https://blog.codinghorror.com/preventing-csrf-and-xsrf-attacks/) @@ -20,7 +20,7 @@ l10n: 返値の {{domxref("PushSubscription")}} には、プッシュ通知メッセージの配信に必要な情報であるエンドポイントとデータ送信用の暗号キーがすべて含まれています。 -プッシュ通知メッセージを受信すると、そのメッセージを扱うためのサービスワーカーが起動します。これは、 {{domxref("ServiceWorkerGlobalScope.push_event", "onpush")}} イベントハンドラーへ配信されます。これにより、例えば ({{domxref("ServiceWorkerRegistration.showNotification()")}} を使用して) 受信した通知を表示するなど、アプリケーションがプッシュ通知の受信に応じた動作ができます。 +プッシュ通知メッセージを受信すると、そのメッセージを扱うためのサービスワーカーが起動します。これは、 {{domxref("ServiceWorkerGlobalScope.push_event", "onpush")}} イベントハンドラーへ配信されます。これにより、例えば（{{domxref("ServiceWorkerRegistration.showNotification()")}} を使用して）受信した通知を表示するなど、アプリケーションがプッシュ通知の受信に応じた動作ができます。 各サブスクリプションは、サービスワーカーに対して固有です。サブスクリプションのエンドポイントは、固有の [capability URL](https://www.w3.org/TR/capability-urls/) です。サブスクリプションのエンドポイント URL はアプリケーションにメッセージを送るために不可欠な情報です。エンドポイント URL は秘密にしておく必要があります。さもないと、他のアプリケーションがあなたのアプリケーションにプッシュ通知メッセージを送ることができてしまいます。 @@ -31,11 +31,11 @@ l10n: - {{domxref("PushEvent")}} - : {{domxref("ServiceWorker")}} の[グローバルスコープ](/ja/docs/Web/API/ServiceWorkerGlobalScope) に送られるプッシュアクションを表します。これは、アプリケーションから {{domxref("PushSubscription")}} へ送られる情報を含んでいます。 - {{domxref("PushManager")}} - - : プッシュ通知のリクエスト URL といった、サードパーティのサーバーからプッシュ通知を受け取るための手段を提供します。 + - : プッシュ通知のリクエスト URL など、サードパーティのサーバーからプッシュ通知を受け取るための手段を提供します。 - {{domxref("PushMessageData")}} - : サーバーから送られたプッシュ情報にアクセスする手段を提供し、受信したデータを操作するメソッドを含みます。 - {{domxref("PushSubscription")}} - - : サブスクリプションのエンドポイント URL を提供し、プッシュサービスから購読を解除できるようにします。 + - : サブスクリプションのエンドポイント URL を提供し、プッシュサービスからサブスクリプションを脱退できるようにします。 - {{domxref("PushSubscriptionOptions")}} - : プッシュサブスクリプションに関連付けられたオプションを表します。 @@ -44,11 +44,11 @@ l10n: 以下の[サービスワーカー API](/ja/docs/Web/API/Service_Worker_API) への追加機能は、プッシュ API 仕様に含まれています。これらは、プッシュ通知メッセージを使用するためのエントリーポイントを提供するため、および、プッシュとサブスクリプション変更イベントの監視と応答のための追加です。 - {{domxref("ServiceWorkerRegistration.pushManager")}} {{ReadOnlyInline}} - - : 購読を含むサブスクリプションの管理、アクティブなサブスクリプションの取得、プッシュ権限状態の取得を行う {{domxref("PushManager")}} インターフェイスへの参照を返します。これは、プッシュ通知メッセージを使用するためのエントリーポイントです。 + - : 加入を含むサブスクリプションの管理、アクティブなサブスクリプションの取得、プッシュ権限状態の取得を行う {{domxref("PushManager")}} インターフェイスへの参照を返します。これは、プッシュ通知メッセージを使用するためのエントリーポイントです。 - {{domxref("ServiceWorkerGlobalScope.push_event", "onpush")}} - : {{domxref("ServiceWorkerGlobalScope/push_event", "push")}} イベントが発生する度に発動します。これは、サーバーがプッシュしたメッセージを受信する度に起こります。 - {{domxref("ServiceWorkerGlobalScope.pushsubscriptionchange_event", "onpushsubscriptionchange")}} - - : {{domxref("ServiceWorkerGlobalScope/pushsubscriptionchange_event", "pushsubscriptionchange")}} イベントが発生する度に発動するイベントハンドラーです。例えば、プッシュサブスクリプションが無効になったり、無効になりつつある時 (即ち、プッシュサーバーが有効期限を設定している場合) です。 + - : {{domxref("ServiceWorkerGlobalScope/pushsubscriptionchange_event", "pushsubscriptionchange")}} イベントが発生する度に発動するイベントハンドラーです。例えば、プッシュサブスクリプションが無効になったり、無効になりつつある時（すなわち、プッシュサーバーが有効期限を設定している場合）です。 ## 例 From 3b1a7fa8abfeac619cd4be5b995e285a586b1d01 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 9 Sep 2023 12:33:20 +0900 Subject: [PATCH 236/600] =?UTF-8?q?2023/07/18=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/pushmanager/index.md | 45 +++++++++++++-------------- 1 file changed, 21 insertions(+), 24 deletions(-) diff --git a/files/ja/web/api/pushmanager/index.md b/files/ja/web/api/pushmanager/index.md index 42049a9eaf1f60..89674b754cf3b6 100644 --- a/files/ja/web/api/pushmanager/index.md +++ b/files/ja/web/api/pushmanager/index.md @@ -1,45 +1,45 @@ --- title: PushManager slug: Web/API/PushManager +l10n: + sourceCommit: 76717f752447b6eef25bf29c12272e407ee5cb6b --- -{{SeeCompatTable}}{{ApiRef("Push API")}} +{{ApiRef("Push API")}} -[Push API](/ja/docs/Web/API/Push_API) の `PushManager` インターフェイスは、サードパーティのサーバーからの通知だけではなく、プッシュ通知へのリクエスト URL を取得するための方法を提供します。 +**`PushManager`** は[プッシュ API](/ja/docs/Web/API/Push_API) のインターフェイスで、サードパーティのサーバーからの通知だけではなく、プッシュ通知へのリクエスト URL を取得するための方法を提供します。 このインターフェイスは、{{domxref("ServiceWorkerRegistration.pushManager")}} プロパティを経由してアクセスできます。 -> **メモ:** このインターフェイスは、廃止された {{domxref("PushRegistrationManager")}} で以前に提案されていた機能をリプレースしています。 - ## インスタンスプロパティ -- {{domxref("PushManager.supportedContentEncodings")}} +- [`PushManager.supportedContentEncodings`](/ja/docs/Web/API/PushManager/supportedContentEncodings_static) - : プッシュメッセージのペイロードの暗号化でサポートされているコンテンツエンコーディングの配列を返します。 ## インスタンスメソッド - {{domxref("PushManager.getSubscription()")}} - - : 既存のプッシュサブスクリプションを受け取ります。これは既存のプッシュサブスクリプションの詳細を含む {{domxref("PushSubscription")}} を解決する {{jsxref("Promise")}} を返します。既存のプッシュサブスクリプションが存在しない場合、`null` 値で解決されます。 + - : 既存のプッシュサブスクリプションを受け取ります。これは既存のプッシュサブスクリプションの詳細を含む {{domxref("PushSubscription")}} に解決される {{jsxref("Promise")}} を返します。既存のプッシュサブスクリプションが存在しない場合、`null` 値で解決されます。 - {{domxref("PushManager.permissionState()")}} - : 現在の {{domxref("PushSubscription")}} の許可状況で解決される {{jsxref("Promise")}} を返します。許可状況は `'granted'`、`'denied'`、`'prompt'` のいずれかです。 - {{domxref("PushManager.subscribe()")}} - - : プッシュサービスを提供します。プッシュサブスクリプションの詳細を含む {{domxref("PushSubscription")}} オブジェクトで解決される {{jsxref("Promise")}} を返します。現在の service worker に既存のサブスクリプションがない場合、新しいプッシュサブスクリプションが生成されます。 + - : プッシュサービスに加入します。プッシュサブスクリプションの詳細を含む {{domxref("PushSubscription")}} オブジェクトで解決される {{jsxref("Promise")}} を返します。現在のサービスワーカーに既存のサブスクリプションがない場合、新しいプッシュサブスクリプションが生成されます。 ### 非推奨のメソッド - {{domxref("PushManager.hasPermission()")}} {{deprecated_inline}} - - : リクエストしている Web アプリの`PushPermissionStatus` で解決される {{jsxref("Promise")}} を返します。この値は `granted`、`denied`、`default` のいずれかです。{{domxref("PushManager.permissionState()")}} で置き換えられました。 + - : リクエストしているウェブアプリの `PushPermissionStatus` で解決される {{jsxref("Promise")}} を返します。この値は `granted`、`denied`、`default` のいずれかです。{{domxref("PushManager.permissionState()")}} で置き換えられました。 - {{domxref("PushManager.register()")}} {{deprecated_inline}} - - : プッシュサービスを提供します。 {{domxref("PushManager.subscribe()")}} で置き換えられました。 + - : プッシュサービスに加入します。 {{domxref("PushManager.subscribe()")}} で置き換えられました。 - {{domxref("PushManager.registrations()")}} {{deprecated_inline}} - : 既存のプッシュサブスクリプションを受け取ります。{{domxref("PushManager.getSubscription()")}} で置き換えられました。 - {{domxref("PushManager.unregister()")}} {{deprecated_inline}} - - : 指定のサブスクリプションエンドポイントを解除して削除します。API のアップデートで、サブスクリプションは、{{domxref("PushSubscription.unsubscribe()")}} メソッドを呼び出して解除することになりました。 + - : 指定したサブスクリプションのエンドポイントを登録解除して削除します。API の更新後は、サブスクリプションは {{domxref("PushSubscription.unsubscribe()")}} メソッドを呼び出して登録解除することになりました。 ## 例 ```js -this.onpush = function (event) { +this.onpush = (event) => { console.log(event.data); // ここから、IndexedDB にデータを書き込んだり、いずれかのウィンドウに // それを送信したり、通知を表示したりできます。 @@ -47,19 +47,16 @@ this.onpush = function (event) { navigator.serviceWorker .register("serviceworker.js") - .then(function (serviceWorkerRegistration) { + .then((serviceWorkerRegistration) => { serviceWorkerRegistration.pushManager.subscribe().then( - function (pushSubscription) { - console.log(pushSubscription.subscriptionId); + (pushSubscription) => { console.log(pushSubscription.endpoint); - // ここから、IndexedDB にデータを書き込んだり、いずれかのウィンドウに - // それを送信したり、通知を表示したりできます。 + // これでアプリケーションサーバーが使用できるプッシサブスクリプションの + // 詳細が利用できるようになり、例えば XMLHttpRequest を使用してサーバーに + // 送信することができます。 }, - function (error) { - // 開発中は、コンソールにエラーを表示するのに役立ちます。 - // 本番環境では、アプリケーションサーバにエラー情報を送信 - // するためにも 役立ちます。 - console.log(error); + (error) => { + console.error(error); }, ); }); @@ -71,9 +68,9 @@ navigator.serviceWorker ## ブラウザーの互換性 -{{Compat("api.PushManager")}} +{{Compat}} ## 関連項目 -- [Push API](/ja/docs/Web/API/Push_API) -- [Service Worker API](/ja/docs/Web/API/Service_Worker_API) +- [プッシュ API](/ja/docs/Web/API/Push_API) +- [サービスワーカー API](/ja/docs/Web/API/Service_Worker_API) From a570a703e1832b857564534a0be5f614c45ad0c7 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 9 Sep 2023 12:37:55 +0900 Subject: [PATCH 237/600] =?UTF-8?q?2023/06/12=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../supportedcontentencodings_static/index.md | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 files/ja/web/api/pushmanager/supportedcontentencodings_static/index.md diff --git a/files/ja/web/api/pushmanager/supportedcontentencodings_static/index.md b/files/ja/web/api/pushmanager/supportedcontentencodings_static/index.md new file mode 100644 index 00000000000000..8bb7aa34650396 --- /dev/null +++ b/files/ja/web/api/pushmanager/supportedcontentencodings_static/index.md @@ -0,0 +1,23 @@ +--- +title: "PushManager: supportedContentEncodings 静的プロパティ" +short-title: supportedContentEncodings +slug: Web/API/PushManager/supportedContentEncodings_static +l10n: + sourceCommit: 76717f752447b6eef25bf29c12272e407ee5cb6b +--- + +{{APIRef("Push API")}} + +**`supportedContentEncodings`** は {{domxref("PushManager")}} インターフェイスの静的な読み取り専用プロパティで、プッシュメッセージのペイロードを暗号化するために使用できる、対応しているコンテンツコードの配列を返します。 + +## 値 + +文字列の配列です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} From 54def8a5278d5e6debf4df4ed336d1dc370ff9d2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 9 Sep 2023 16:26:11 +0900 Subject: [PATCH 238/600] =?UTF-8?q?2023/04/08=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/pushmanager/haspermission/index.md | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 files/ja/web/api/pushmanager/haspermission/index.md diff --git a/files/ja/web/api/pushmanager/haspermission/index.md b/files/ja/web/api/pushmanager/haspermission/index.md new file mode 100644 index 00000000000000..a1bf46a7e39035 --- /dev/null +++ b/files/ja/web/api/pushmanager/haspermission/index.md @@ -0,0 +1,41 @@ +--- +title: "PushManager: hasPermission() メソッド" +short-title: hasPermission() +slug: Web/API/PushManager/hasPermission +l10n: + sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e +--- + +{{deprecated_header}}{{ApiRef("Push API")}} + +**`PushManager.hasPermission()`** は {{domxref("PushManager")}} インターフェイスのメソッドで、 {{jsxref("Promise")}} を返します。このプロミスは、ウェブアプリへのリクエストの `PushPermissionStatus` に解決し、 `granted`, `denied`, `default` のいずれかになります。 + +> **メモ:** この機能は {{domxref("PushManager.permissionState()")}} メソッドに置き換えられました。 + +## 構文 + +```js-nolint +hasPermission() +``` + +### 引数 + +なし。 + +### 返値 + +{{jsxref("Promise")}} で、このプロミスは `PushPermissionStatus` に解決します。 + +## 例 + +```js +// TBD +``` + +## 仕様書 + +この機能はもうどの仕様にも属していません。標準化の予定はなくなりました。 + +## ブラウザーの互換性 + +{{Compat}} From 309bdca1f8d8deabf1ec996d4d49a2dade30b5f0 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 9 Sep 2023 17:04:30 +0900 Subject: [PATCH 239/600] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/pushmanager/registrations/index.md | 38 +++++++----- .../ja/web/api/pushmanager/subscribe/index.md | 59 ++++++++++++------- 2 files changed, 60 insertions(+), 37 deletions(-) diff --git a/files/ja/web/api/pushmanager/registrations/index.md b/files/ja/web/api/pushmanager/registrations/index.md index 749170398dfdde..b90596521867e2 100644 --- a/files/ja/web/api/pushmanager/registrations/index.md +++ b/files/ja/web/api/pushmanager/registrations/index.md @@ -1,21 +1,30 @@ --- -title: PushManager.registrations() +title: "PushManager: registrations() メソッド" +short-title: registrations() slug: Web/API/PushManager/registrations +l10n: + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc --- {{deprecated_header}}{{ApiRef("Push API")}} **`registrations`** メソッドは、プッシュ通知の端点登録の存在に関してシステムに問い合わせするために使用します。 +> **メモ:** このメソッドは {{domxref("PushManager.getSubscription()")}} メソッドに置き換えられました。 + ## 構文 ```js-nolint -var request = navigator.push.registrations(); +registrations() ``` +### 引数 + +なし。 + ### 返値 -{{domxref("DOMRequest")}} オブジェクトで、このメソッド呼び出しの成功または失敗を扱います。 +`DOMRequest` オブジェクトで、このメソッド呼び出しの成功または失敗を扱います。 メソッドの呼び出しが成功した場合、リクエストの `result` は [PushRegistration](#pushregistration) オブジェクトの配列になります。 @@ -31,23 +40,21 @@ var request = navigator.push.registrations(); ## 例 ```js -var req = navigator.push.registrations(); +const req = navigator.push.registrations(); -req.onsuccess = function (e) { +req.onsuccess = (e) => { if (req.result.length > 0) { - for (var i = 0, l = req.result.length; i < l; i++) { + req.result.forEach((result) => { console.log( - "Existing registration", - req.result[i].pushEndpoint, - req.result[i].version, + `Existing registration ${result.pushEndpoint} ${result.version}`, ); - } + }); // Reuse existing endpoints. } else { // Register for a new endpoint. - var register = navigator.push.register(); - register.onsuccess = function (e) { - console.log("Registered new endpoint", register.result); + const register = navigator.push.register(); + register.onsuccess = (e) => { + console.log(`Registered new endpoint: ${register.result}`); }; } }; @@ -55,13 +62,12 @@ req.onsuccess = function (e) { ## 仕様書 -{{Specifications}} +この機能はもうどの仕様にも属していません。標準化の予定はなくなりました。 ## ブラウザーの互換性 -{{Compat("api.PushManager.registrations")}} +{{Compat}} ## 関連情報 - {{domxref("PushManager")}} -- {{domxref("DOMRequest")}} diff --git a/files/ja/web/api/pushmanager/subscribe/index.md b/files/ja/web/api/pushmanager/subscribe/index.md index a8420a03485309..ffaf879ade3862 100644 --- a/files/ja/web/api/pushmanager/subscribe/index.md +++ b/files/ja/web/api/pushmanager/subscribe/index.md @@ -1,39 +1,44 @@ --- -title: PushManager.subscribe() +title: "PushManager: subscribe() メソッド" +short-title: subscribe() slug: Web/API/PushManager/subscribe +l10n: + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc --- -{{SeeCompatTable}}{{ApiRef("Push API")}} +{{ApiRef("Push API")}} -{{domxref("PushManager")}} インターフェイスの **`subscribe()`** メソッドは、プッシュサービスを提供します。 +**`subscribe()`** は {{domxref("PushManager")}} インターフェイスのメソッドで、プッシュサービスに加入します。 これは、プッシュサブスクリプションの詳細を含む {{domxref("PushSubscription")}} オブジェクトで解決される {{jsxref("Promise")}} を返します。現在のサービスワーカーに既存のサブスクリプションがない場合、新しいプッシュサブスクリプションが生成されます。 ## 構文 ```js-nolint -PushManager.subscribe(options).then(function(pushSubscription) { ... } ); +subscribe(options) ``` ### 引数 - `options` {{optional_inline}} - - : オプションの設定パラメータを含むオブジェクト。次のプロパティを設定できる： + - : オプションの設定パラメーターを含むオブジェクトです。以下のプロパティを指定することができます。 - - `userVisibleOnly`: 返されたプッシュサブスクリプションの効果がユーザーに表示するメッセージにだけ使われるかを示す boolean 値。 - - `applicationServerKey`: プッシュサーバーがアプリケーションサーバーを認証するために使用する [楕円曲線 DSA](https://ja.wikipedia.org/wiki/%E6%A5%95%E5%86%86%E6%9B%B2%E7%B7%9ADSA) P-256 公開鍵を含む、Base64 でエンコードされた {{domxref("DOMString")}} または {{jsxref("ArrayBuffer")}}。指定した場合は、アプリケーションサーバーから発するすべてのメッセージで [VAPID](https://tools.ietf.org/html/rfc8292) 認証スキームを使用しなければならず、また対応する秘密鍵で署名した JWT を含めなければなりません。この鍵は、データを暗号化するために使用する ECDH 鍵と**_同じではありません_**。詳しくは "[Using VAPID with WebPush](https://blog.mozilla.org/services/2016/04/04/using-vapid-with-webpush/)" をご覧ください。 + - `userVisibleOnly` + - : 論理値で、返されたプッシュサブスクリプションの効果が、ユーザーに表示するメッセージにのみ使われるかを示します。 + - `applicationServerKey` + - : Base64 でエンコードされた文字列または {{jsxref("ArrayBuffer")}} で、プッシュサーバーがアプリケーションサーバーを認証するために使用する[楕円曲線 DSA](https://ja.wikipedia.org/wiki/%E6%A5%95%E5%86%86%E6%9B%B2%E7%B7%9ADSA) P-256 公開鍵が入ります。指定した場合は、アプリケーションサーバーから発するすべてのメッセージで [VAPID](https://tools.ietf.org/html/rfc8292) 認証スキームを使用しなければならず、また対応する秘密鍵で署名した JWT を含めなければなりません。この鍵は、データを暗号化するために使用する ECDH 鍵と**_同じではありません_**。詳しくは "[Using VAPID with WebPush](https://blog.mozilla.org/services/2016/04/04/using-vapid-with-webpush/)" をご覧ください。 - > **メモ:** この引数は Chrome など、一部のブラウザーで必須です。 + > **メモ:** この引数は Chrome や Edge など、一部のブラウザーでは必須です。 ### 返値 -{{domxref("PushSubscription")}} オブジェクトを解決する {{jsxref("Promise")}}。 +{{jsxref("Promise")}} です。これは {{domxref("PushSubscription")}} オブジェクトで解決します。 ## 例 ```js -this.onpush = function (event) { +this.onpush = (event) => { console.log(event.data); // ここから、IndexedDB にデータを書き込んだり、いずれかのウィンドウに // それを送信したり、通知を表示したりできます。 @@ -42,36 +47,48 @@ this.onpush = function (event) { navigator.serviceWorker.register("serviceworker.js"); // serviceWorker.ready を使用して、プッシュの購読ができることを確かめます。 -navigator.serviceWorker.ready.then(function (serviceWorkerRegistration) { - var options = { +navigator.serviceWorker.ready.then((serviceWorkerRegistration) => { + const options = { userVisibleOnly: true, - applicationServerKey: applicationServerKey, + applicationServerKey, }; serviceWorkerRegistration.pushManager.subscribe(options).then( - function (pushSubscription) { + (pushSubscription) => { console.log(pushSubscription.endpoint); // アプリケーションサーバが必要としているプッシュサブスクリプションの // 詳細はここから使用できます。たとえば、XMLHttpRequest を使用して // これを送信できます。 }, - function (error) { + (error) => { // 開発中は、コンソールにエラーを表示するのに役立ちます。 // 本番環境では、アプリケーションサーバにエラー情報を送信 // するためにも 役立ちます。 - console.log(error); + console.error(error); }, ); }); ``` +### ユーザーのジェスチャーへの反応 + +`subscribe()` の呼び出しは、例えばボタンをクリックするようなユーザーのジェスチャーに反応して行うべきです。 + +```js +btn.addEventListener("click", () => { + serviceWorkerRegistration.pushManager + .subscribe(options) + .then((pushSubscription) => { + // handle subscription + }); +}); +``` + +これは最善の手法であるだけでなく、ユーザーが同意していない通知を送りつけるべきではありません。今後、ブラウザーはユーザーのジェスチャーに応答して発生していない通知を明示的に許可しないようになります。例えば、Firefox はバージョン 72 から既にこの例を行っています。 + ## 仕様書 {{Specifications}} ## ブラウザーの互換性 -{{Compat("api.PushManager.subscribe")}} - -## 関連項目 - -- [Using the Push API](/ja/docs/Web/API/Push_API/Using_the_Push_API) +{{Compat}} From 6867be56f55a99de9b3eee62d8bf7dd150d5cfbb Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 9 Sep 2023 12:46:35 +0900 Subject: [PATCH 240/600] =?UTF-8?q?2023/04/08=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/pushmanager/getsubscription/index.md | 86 +++++++++---------- .../api/pushmanager/permissionstate/index.md | 30 ++++--- .../ja/web/api/pushmanager/register/index.md | 38 ++++---- .../web/api/pushmanager/unregister/index.md | 36 ++++---- 4 files changed, 102 insertions(+), 88 deletions(-) diff --git a/files/ja/web/api/pushmanager/getsubscription/index.md b/files/ja/web/api/pushmanager/getsubscription/index.md index 6d519819351e82..be28543c3e18ba 100644 --- a/files/ja/web/api/pushmanager/getsubscription/index.md +++ b/files/ja/web/api/pushmanager/getsubscription/index.md @@ -1,18 +1,21 @@ --- -title: PushManager.getSubscription() +title: "PushManager: getSubscription() メソッド" +short-title: getSubscription() slug: Web/API/PushManager/getSubscription +l10n: + sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e --- -{{SeeCompatTable}}{{ApiRef("Push API")}} +{{ApiRef("Push API")}} -{{domxref("PushManager")}} インターフェイスの **`PushManager.getSubscription()`** メソッドは、既存のプッシュサブスクリプションを取得します。 +**`PushManager.getSubscription()`** は {{domxref("PushManager")}} インターフェイスのメソッドで、既存のプッシュサブスクリプションを取得します。 -これは既存のプッシュサブスクリプションの詳細を含む {{domxref("PushSubscription")}} を解決する {{jsxref("Promise")}} を返します。既存のプッシュサブスクリプションが存在しない場合 `null` 値で解決されます。 +これは既存のプッシュサブスクリプションの詳細を含む {{domxref("PushSubscription")}} で解決する {{jsxref("Promise")}} を返します。既存のプッシュサブスクリプションが存在しない場合 `null` 値で解決します。 ## 構文 -```js -PushManager.getSubscription().then(function(pushSubscription) { ... } ); +```js-nolint +getSubscription() ``` ### 引数 @@ -21,44 +24,43 @@ PushManager.getSubscription().then(function(pushSubscription) { ... } ); ### 返値 -{{domxref("PushSubscription")}} オブジェクトで解決される {{jsxref("Promise")}}。 +{{jsxref("Promise")}} です。これは {{domxref("PushSubscription")}} オブジェクトまたは `null` で解決されます。 ## 例 -このコードスニペットは、[push messaging and notification sample](https://github.com/GoogleChrome/samples/blob/gh-pages/push-messaging-and-notifications) から取ってきました（使用できるライブデモはありません）。 +このコードスニペットは、 [push messaging and notification sample](https://github.com/GoogleChrome/samples/tree/gh-pages/push-messaging-and-notifications) から取得したものです（使用できるライブデモはありません）。 ```js -// サブスクリプションをチェックするために、service worker の登録が必要である。 - navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) { - // 既にプッシュメッセージサブスクリプションがあるか？ - serviceWorkerRegistration.pushManager.getSubscription() - .then(function(subscription) { - // プッシュメッセージからサブスクライブ ／ アンサブスクライブ - // する任意の UI を有効にする - var pushButton = document.querySelector('.js-push-button'); - pushButton.disabled = false; - - if (!subscription) { - // プッシュを購読していない場合、ユーザーがプッシュできるように - // UI を設定する。 - return; - } - - // 最新の subscriptionId でサーバ同期を維持する。 - sendSubscriptionToServer(subscription); - - showCurlCommand(subscription); - - // プッシュメッセージの購読を表示するために - // UI を設定する。 - pushButton.textContent = 'Disable Push Messages'; - isPushEnabled = true; - }) - .catch(function(err) { - window.Demo.debug.log('Error during getSubscription()', err); - }); - }); -} +// サブスクリプションをチェックするためにサービスワーカーの登録が必要 +navigator.serviceWorker.ready.then((serviceWorkerRegistration) => { + // 既にプッシュメッセージのサブスクリプションがあるか？ + serviceWorkerRegistration.pushManager + .getSubscription() + .then((subscription) => { + // プッシュメッセージに加入／脱退する任意の UI を有効にする + const pushButton = document.querySelector(".js-push-button"); + pushButton.disabled = false; + + if (!subscription) { + // プッシュに参加していない場合、ユーザーがプッシュを + // 有効化できるように UI を設定 + return; + } + + // 最新の subscriptionId でサーバー同期を維持 + sendSubscriptionToServer(subscription); + + showCurlCommand(subscription); + + // プッシュメッセージに参加していることを表示するために + // UI を設定 + pushButton.textContent = "Disable Push Messages"; + isPushEnabled = true; + }) + .catch((err) => { + console.error(`Error during getSubscription(): ${err}`); + }); +}); ``` ## 仕様書 @@ -67,8 +69,4 @@ PushManager.getSubscription().then(function(pushSubscription) { ... } ); ## ブラウザーの互換性 -{{Compat("api.PushManager.getSubscription")}} - -## 関連項目 - -- [Using the Push API](/ja/docs/Web/API/Push_API/Using_the_Push_API) +{{Compat}} diff --git a/files/ja/web/api/pushmanager/permissionstate/index.md b/files/ja/web/api/pushmanager/permissionstate/index.md index f537c30ada5eb9..41d902a8ed672b 100644 --- a/files/ja/web/api/pushmanager/permissionstate/index.md +++ b/files/ja/web/api/pushmanager/permissionstate/index.md @@ -1,31 +1,39 @@ --- -title: PushManager.permissionState() +title: "PushManager: permissionState() メソッド" +short-title: permissionState() slug: Web/API/PushManager/permissionState +l10n: + sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e --- -{{SeeCompatTable}}{{ApiRef("Push API")}} +{{ApiRef("Push API")}} -{{domxref("PushManager")}} インターフェイスの **`permissionState()`** メソッドは、プッシュマネージャーの許可状態を示す {{domxref("DOMString")}} で解決される {{jsxref("Promise")}} を返します。許可状態は、`'prompt'` か `'denied'`、`'granted'` です。 +**`permissionState()`** は {{domxref("PushManager")}} インターフェイスのメソッドで、プッシュマネージャーの許可状態を示す文字列で解決される {{jsxref("Promise")}} を返します。許可状態は、`'prompt'` か `'denied'`、`'granted'` のいずれかです。 -> **メモ:** Firefox 44 では、[Notifications](/ja/docs/Web/API/Notifications_API) と [Push](/ja/docs/Web/API/Push_API) の許可は統合されています。notifications が許可された場合、 push も使用できます。 +> **メモ:** Firefox 44 では、[通知](/ja/docs/Web/API/Notifications_API)と[プッシュ](/ja/docs/Web/API/Push_API)の許可が統合されています。 +> 通知が許可された場合、プッシュも利用できます。 ## 構文 ```js-nolint -PushManager.permissionState(options).then(function(PushMessagingState) { ... }); +permissionState() +permissionState(options) ``` ### 引数 - `options` {{optional_inline}} - - : オプションの設定パラメーターを含むオブジェクト。次のプロパティが設定可能： + - : オプションの設定パラメーターを含むオブジェクト。以下のプロパティが利用可能です。 - - `userVisibleOnly`: 返されたプッシュサブスクリプションの効果がユーザーに表示するメッセージにだけ使われるかを示す boolean 値。 + - `userVisibleOnly` + - : 論理値で、返されたプッシュサブスクリプションは、その効果がユーザーに見えるようにされたメッセージに のみ使用することを示します。 + - `applicationServerKey` + - : プッシュサーバー経由でクライアントアプリにメッセージを送信する際に、プッシュサーバーが使用する公開鍵。この値はアプリケーションサーバーが生成する署名鍵ペアの一部であり、 P-256 曲線上の楕円曲線デジタル署名 (ECDSA) で使用できます。 ### 返値 -`'prompt'` か `'denied'`、`'granted'` を持つ {{domxref("DOMString")}} で解決される {{jsxref("Promise")}} 。 +{{jsxref("Promise")}} で、`'prompt'`、`'denied'`、`'granted'` のいずれかの値の文字列に解決します。 ## 仕様書 @@ -33,8 +41,4 @@ PushManager.permissionState(options).then(function(PushMessagingState) { ... }); ## ブラウザーの互換性 -{{Compat("api.PushManager.permissionState")}} - -## 関連項目 - -- [Using the Push API](/ja/docs/Web/API/Push_API/Using_the_Push_API) +{{Compat}} diff --git a/files/ja/web/api/pushmanager/register/index.md b/files/ja/web/api/pushmanager/register/index.md index 822623abe2b1dd..cc802cd02241b8 100644 --- a/files/ja/web/api/pushmanager/register/index.md +++ b/files/ja/web/api/pushmanager/register/index.md @@ -1,50 +1,58 @@ --- -title: PushManager.register() +title: "PushManager: register() メソッド" +short-title: register() slug: Web/API/PushManager/register +l10n: + sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e --- -{{deprecated_header}}{{ ApiRef("Push API")}} +{{deprecated_header}}{{ApiRef("Push API")}} -**`register`** メソッドは、システムにプッシュ通知の新しい端点をリクエストするために使用します。このメソッドは {{domxref("PushManager.subscribe()")}} に置き換えられました。 +**`register`** メソッドは、システムにプッシュ通知の新しい端点をリクエストするために使用します。 + +> **メモ:** このメソッドは {{domxref("PushManager.subscribe()")}} に置き換えられました。 ## 構文 ```js-nolint -var request = navigator.push.register(); +register() ``` +### 引数 + +なし。 + ### 返値 -{{domxref("DOMRequest")}} オブジェクトで、このメソッド呼び出しの成功または失敗を扱います。 +`DOMRequest` オブジェクトで、このメソッド呼び出しの成功または失敗を扱います。 メソッドの呼び出しに成功したら、リクエストの `result` が端点の URL を表す文字列になります。 -> **メモ:** この URL が必要なくなったら、{{domxref("Pushmanager.unregister()")}} を使用して自分自身を掃除してください。 +> **メモ:** この URL が必要なくなったら、 {{domxref("PushManager.unregister()")}} を使用して自分自身を掃除してください。 ## 例 ```js -var req = navigator.push.register(); +const req = navigator.push.register(); -req.onsuccess = function (e) { - var endpoint = req.result; - debug("New endpoint: " + endpoint); +req.onsuccess = (e) => { + const endpoint = req.result; + console.log(`New endpoint: ${endpoint}`); }; -req.onerror = function (e) { - debug("Error getting a new endpoint: " + JSON.stringify(e)); +req.onerror = (e) => { + console.error(`Error getting a new endpoint: ${e.error}`); }; ``` ## 仕様書 -{{Specifications}} +この機能はもうどの仕様にも属していません。標準化の予定はなくなりました。 ## ブラウザーの互換性 -{{Compat("api.PushManager.register")}} +{{Compat}} ## 関連情報 - {{domxref("PushManager")}} -- {{domxref("DOMRequest")}} diff --git a/files/ja/web/api/pushmanager/unregister/index.md b/files/ja/web/api/pushmanager/unregister/index.md index 4675c4cd047062..e8fd1ea19f247c 100644 --- a/files/ja/web/api/pushmanager/unregister/index.md +++ b/files/ja/web/api/pushmanager/unregister/index.md @@ -1,56 +1,61 @@ --- -title: PushManager.unregister() +title: "PushManager: unregister() メソッド" +short-title: unregister() slug: Web/API/PushManager/unregister +l10n: + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc --- {{deprecated_header}}{{ ApiRef("Push API")}} -**`unregister()`** メソッドは、システムに特定の端点の登録を解除して削除するよう依頼するために使用していました。更新された API では、加入は {{domxref("PushSubscription.unsubscribe()")}} メソッドで登録解除することができます。 +**`unregister()`** メソッドは、システムに特定の端点の登録を脱退して削除するよう依頼するために使用していました。 + +> **メモ:** 更新された API では、サブスクリプションは {{domxref("PushSubscription.unsubscribe()")}} メソッドで脱退することができます。 ## 構文 ```js-nolint -var request = navigator.push.unregister(pushEndpoint); +unregister(pushEndpoint) ``` ### 引数 - `pushEndpoint` - - : 登録解除する端点です。 + - : 脱退する端点です。 ### 返値 -{{domxref("DOMRequest")}} オブジェクトで、このメソッド呼び出しの成功または失敗を扱います。 +`DOMRequest` オブジェクトで、このメソッド呼び出しの成功または失敗を扱います。 -メソッドの呼び出しが成功した場合、リクエストの `result` が登録解除された端点を表す [PushRegistration](#pushregistration) オブジェクトになります。 +メソッドの呼び出しが成功した場合、リクエストの `result` は登録解除された端点を表す [PushRegistration](#pushregistration) オブジェクトになります。 ### PushRegistration このオブジェクトは無名の JavaScript オブジェクトで、以下のプロパティがあります。 - `pushEndpoint` - - : 端点の URL を表す文字列です。 + - : 登録解除する端点の URL を表す文字列です。 - `version` - - : プッシュ通知の端点の現在のバージョンです。 + - : `unregister.onsuccess` が呼び出された際には `undefined` です。 ## 例 ```js -var req = navigator.push.unregister(pushEndpoint); +const req = navigator.push.unregister(pushEndpoint); -req.onsuccess = function (e) { - var endpoint = req.result; - debug("Unregistered endpoint: " + endpoint); +req.onsuccess = (e) => { + const endpoint = req.result; + console.log(`Unregistered endpoint: ${endpoint}`); }; -req.onerror = function (e) { - debug("Error unregistering the endpoint: " + JSON.stringify(e)); +req.onerror = (e) => { + console.error(`Error unregistering the endpoint: ${e.error}`); }; ``` ## 仕様書 -{{Specifications}} +この機能はもうどの仕様にも属していません。標準化の予定はなくなりました。 ## ブラウザーの互換性 @@ -59,4 +64,3 @@ req.onerror = function (e) { ## 関連情報 - {{domxref("PushManager")}} -- {{domxref("DOMRequest")}} From 12c65aac1df0a757905cb4983ebb418e412c363a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Isma=C3=ABl=20Maurice?= <55036198+tisma95@users.noreply.github.com> Date: Tue, 12 Sep 2023 22:01:01 +0200 Subject: [PATCH 241/600] Fix(pseudo-class): fix the trailling letter (#15804) --- .../selectors/pseudo-classes_and_pseudo-elements/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md index b5d9434272bf08..2f0d358fbc6464 100644 --- a/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md +++ b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md @@ -117,7 +117,7 @@ Une utilisation plus pertinente de ces pseudo-éléments consiste à insérer un Ces pseudo-éléments sont aussi fréquemment utilisés pour insérer une chaîne vide, qui peut ensuite être stylisée comme n'importe quel élément de la page. -Dans l'exemple suivant, nous avons ajouté une chaîne vide en utilisant le e pseudo-élément `::before` pseudo-element. Nous l'avons défini en `display: block` afin de pouvoir la styliser avec une largeur et une hauteur. Nous utilisons ensuite le CSS pour la styliser comme n'importe quel élément. Vous pouvez jouer avec le CSS et modifier son apparence et son comportement. +Dans l'exemple suivant, nous avons ajouté une chaîne vide en utilisant le pseudo-élément `::before` pseudo-element. Nous l'avons défini en `display: block` afin de pouvoir la styliser avec une largeur et une hauteur. Nous utilisons ensuite le CSS pour la styliser comme n'importe quel élément. Vous pouvez jouer avec le CSS et modifier son apparence et son comportement. {{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}} From db32006c124742967a4f712d9454c3598447e7e1 Mon Sep 17 00:00:00 2001 From: Imken Luo Date: Wed, 13 Sep 2023 08:54:56 +0800 Subject: [PATCH 242/600] zh-cn: fix anchor to the description in `isNaN()` (#15799) --- .../web/javascript/reference/global_objects/isnan/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/zh-cn/web/javascript/reference/global_objects/isnan/index.md b/files/zh-cn/web/javascript/reference/global_objects/isnan/index.md index a8f6256f72fbc8..ffed96efca82bb 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/isnan/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/isnan/index.md @@ -5,13 +5,13 @@ slug: Web/JavaScript/Reference/Global_Objects/isNaN {{jsSidebar("Objects")}} -**`isNaN()`** 函数用来确定一个值是否为{{jsxref("NaN")}} 。注：`isNaN`函数内包含一些非常有趣的[规则](#Description)；你也可以使用 ECMAScript 2015 中定义的 {{jsxref("Number.isNaN()")}} 来判断。 +**`isNaN()`** 函数用来确定一个值是否为 {{jsxref("NaN")}} 。注：`isNaN` 函数内包含一些非常有趣的[规则](#描述)；你也可以使用 ECMAScript 2015 中定义的 {{jsxref("Number.isNaN()")}} 来判断。 {{EmbedInteractiveExample("pages/js/globalprops-isnan.html")}} ## 语法 -```plain +```js-nolint isNaN(value) ``` From 0e59bbd70554a9948975506d17af38268aee0420 Mon Sep 17 00:00:00 2001 From: A1lo Date: Wed, 13 Sep 2023 15:14:21 +0800 Subject: [PATCH 243/600] fix block code indentation inside dls (#15809) --- files/zh-cn/web/css/filter/index.md | 70 ++++++++++++++++------------- 1 file changed, 40 insertions(+), 30 deletions(-) diff --git a/files/zh-cn/web/css/filter/index.md b/files/zh-cn/web/css/filter/index.md index 267a5e55083e1c..7b3e446d3866d5 100644 --- a/files/zh-cn/web/css/filter/index.md +++ b/files/zh-cn/web/css/filter/index.md @@ -63,74 +63,84 @@ filter: url(file.svg#filter-element-id); 当单个 `filter` 属性具有多个函数时，滤镜将按顺序依次应用。 - {{cssxref("filter-function/blur", "blur()")}} + - : 将高斯模糊应用于输入图像。 -```css -filter: blur(5px); -``` + ```css + filter: blur(5px); + ``` - {{cssxref("filter-function/brightness", "brightness()")}} + - : 将线性乘法器应用于输入图像，以调整其亮度。值为 `0%` 将创建全黑图像；值为 `100%` 会使输入保持不变，其他值是该效果的线性乘数。如果值大于 `100%` 将使图像更加明亮。 -```css -filter: brightness(2); -``` + ```css + filter: brightness(2); + ``` - {{cssxref("filter-function/contrast", "contrast()")}} + - : 调整输入图像的对比度。值是 `0%` 将使图像变灰；值是 `100%`，则无影响；若值超过 `100%` 将增强对比度。 -```css -filter: contrast(200%); -``` + ```css + filter: contrast(200%); + ``` - {{cssxref("filter-function/drop-shadow", "drop-shadow()")}} + - : 使用 `` 参数沿图像的轮廓生成阴影效果。阴影语法类似于 ``（在 [CSS 背景和边框模块](/zh-CN/docs/Web/CSS/CSS_backgrounds_and_borders)中定义），但不允许使用 `inset` 关键字以及 `spread` 参数。与所有 `filter` 属性值一样，任何在 `drop-shadow()` 后的滤镜同样会应用在阴影上。 -```css -filter: drop-shadow(16px 16px 10px black); -``` + ```css + filter: drop-shadow(16px 16px 10px black); + ``` - {{cssxref("filter-function/grayscale", "grayscale()")}} + - : 将图像转换为灰度图。值为 `100%` 则完全转为灰度图像，若为初始值 `0%` 则图像无变化。值在 `0%` 到 `100%` 之间，则是该效果的线性乘数。 -```css -filter: grayscale(100%); -``` + ```css + filter: grayscale(100%); + ``` - {{cssxref("filter-function/hue-rotate", "hue-rotate()")}} + - : 应用色相旋转。`` 值设定图像会被调整的色环角度值。值为 `0deg`，则图像无变化。 -```css -filter: hue-rotate(90deg); -``` + ```css + filter: hue-rotate(90deg); + ``` - {{cssxref("filter-function/invert", "invert()")}} + - : 反转输入图像。值为 `100%` 则图像完全反转，值为 `0%` 则图像无变化。值在 `0%` 和 `100%` 之间，则是该效果的线性乘数。 -```css -filter: invert(100%); -``` + ```css + filter: invert(100%); + ``` - {{cssxref("filter-function/opacity", "opacity()")}} + - : 应用透明度。值为 `0%` 则使图像完全透明，值为 `100%` 则图像无变化。 -```css -filter: opacity(50%); -``` + ```css + filter: opacity(50%); + ``` - {{cssxref("filter-function/saturate", "saturate()")}} + - : 改变图像饱和度。值为 `0%` 则是完全不饱和，值为 `100%` 则图像无变化。超过 `100%` 则增加饱和度。 -```css -filter: saturate(200%); -``` + ```css + filter: saturate(200%); + ``` - {{cssxref("filter-function/sepia", "sepia()")}} + - : 将图像转换为深褐色。值为 `100%` 则完全是深褐色的，值为 `0%` 图像无变化。 -```css -filter: sepia(100%); -``` + ```css + filter: sepia(100%); + ``` ## 组合函数 From 5bc45af8eb2f9fffc640c854ef92eb80c2ba5969 Mon Sep 17 00:00:00 2001 From: A1lo Date: Wed, 13 Sep 2023 15:15:27 +0800 Subject: [PATCH 244/600] update the translation of "Getting started with MDN" (#15795) Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- .../contributing/getting_started/index.md | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/files/zh-cn/mdn/community/contributing/getting_started/index.md b/files/zh-cn/mdn/community/contributing/getting_started/index.md index 955d8e29be6883..b8d79c0f751646 100644 --- a/files/zh-cn/mdn/community/contributing/getting_started/index.md +++ b/files/zh-cn/mdn/community/contributing/getting_started/index.md @@ -1,29 +1,29 @@ --- -title: 初识 MDN +title: 初识 MDN Web 文档 slug: MDN/Community/Contributing/Getting_started --- {{MDNSidebar}} -我们是一个开放包容的开发者社区，目标是为更好的互联网提供资源，无关品牌、浏览器或平台。任何人都可以贡献自己的力量，你的每一份贡献都会让我们更强大。与我们一起，持续推动互联网技术向更伟大的方向革新——就在这里，与你一起。 +我们是一个由开发者、技术写作人员和学习者组成的开放社区，目标是为更好的 Web 构建资源，而无关品牌、浏览器或平台。任何人都可以贡献自己的力量，每一个为此做出贡献的人都会让我们更加强大。与我们一起，持续推动 Web 技术向更伟大的方向革新。让我们与你一起从这里开始。 -[加入我们吧！](https://github.com/mdn/mdn-community/) +[加入我们吧！](/zh-CN/docs/MDN/Community/Communication_channels) ## 我能做些什么？ -可以为 MDN 做贡献的方式很多，取决于你的技能和兴趣。对于每一种任务，我们会给出简要的解释和预计完成的大致时间。 +每个人的的技能和兴趣不同，因而为 MDN 做出贡献的方式也不尽相同。因此，对于每一种任务，我们会给出简要的解释和通常需要花费的时间。 -> 如果你不知道该做些什么，欢迎向我们[寻求帮助](https://github.com/mdn/mdn-community/)。也需要注意，我们的文档维护团队人数虽少，但是都十分专业。为了避免分散精力，我们将关闭无关的讨论。 +> 如果你不知道该做些什么，欢迎向我们[寻求帮助](/zh-CN/docs/MDN/Community/Communication_channels)。同时请注意，我们的文档维护团队人数虽少，但是都十分专业。为了避免分散精力，我们将关闭无关的讨论。 -## 首要的贡献类型 +## 主要贡献类型 -我们创建了一个[贡献者任务面板](https://github.com/orgs/mdn/projects/25/views/1)来帮助你寻找为项目做出重大影响的贡献机会，任务面板包含有概述部分和特定贡献类型的分离视图。 +我们创建了一个[贡献者任务面板](https://github.com/orgs/mdn/projects/25/views/1)来帮助你寻找为项目做出重大影响的贡献机会。任务面板包含概述部分和特定贡献类型的分离视图。 ### 做好贡献的准备 -为了做出贡献，你需要拥有一个 GitHub 账号，如果没有，你可以[创建一个](https://github.com/signup)。对于 GitHub 新手，我们鼓励你学习以下由 GitHub 提供的免费课程和阅读资料。当充分补充了这方面的知识后，你可以专心做贡献，而不必同时学习新的技能。 +为了做出贡献，你需要拥有一个 GitHub 账号，如果没有，你可以[创建一个](https://github.com/signup)。如果你是 GitHub 的新手，我们鼓励你学习以下由 GitHub 提供的免费课程和阅读资料。当充分补充了这方面的知识后，你可以专心做贡献，而不必同时学习新的技能。 -> 注意：没必要为完成*所有*的课程任务和阅读资料而不知所措。在了解了“GitHub 简介”课程后，你应该拥有了足够的知识来为我们贡献。 +> 注意：无需为此感到不知所措，或觉得必须阅读和完成*所有*的课程任务。在了解了“GitHub 简介”课程后，你便能够顺利上手。 - [GitHub 简介](https://github.com/skills/introduction-to-github) - [安装并配置 Git](https://docs.github.com/cn/get-started/quickstart/set-up-git) @@ -32,18 +32,18 @@ slug: MDN/Community/Contributing/Getting_started ### 额外的阅读和学习资料 -- [开源项目基本礼节](/zh-CN/docs/MDN/Community/Open_source_etiquette)：如果你还没有为开源项目贡献过，鼓励你首先阅读这篇文档。 -- [学习 Web 开发](/zh-CN/docs/Learn)：如果你是 HTML、CSS 或 JavaScript 新手，我们为你准备了丰富的内容帮你了解这些知识。 +- [开源项目基本礼节](/zh-CN/docs/MDN/Community/Open_source_etiquette)：如果你还没有为开源项目贡献过，我们鼓励你首先阅读这篇文档。 +- [学习 Web 开发](/zh-CN/docs/Learn)：如果你不熟悉 HTML、CSS、JavaScript，我们为你准备了丰富的内容来帮助你入门。 - [协作处理拉取请求](https://docs.github.com/cn/pull-requests/collaborating-with-pull-requests) -某些写作相关的机会需要对英语的足够了解。即使你的语法不够好，也不用担心！我们的团队会保证 MDN 上的内容足够好。也就是说，有人会在一旁确保内容的整洁和行文的正确性。 +某些写作相关的贡献机会需要对英语有一定的理解。也就是说，至善者，善之敌。即使你的语法不够好，也不用担心！我们有团队致力于完善 MDN 上的内容。此外，有人会在一旁确保内容的整洁和行文的正确性。 -一旦你决定了你所做的任务种类，就可以前往[贡献者任务面板](https://github.com/orgs/mdn/projects/25/views/1)中挑选议题，并在评论区中留下评论和提及 `@mdn/mdn-community-engagement` 团队。我们队伍中的成员会回应，且将议题分配给你。 +一旦你决定了你想进行的任务类别，就可以前往[贡献者任务面板](https://github.com/orgs/mdn/projects/25/views/1)中挑选议题，然后在评论区中留下评论并提及 `@mdn/mdn-community-engagement` 团队。我们队伍中的成员会回应，并将议题分配给你。 这保证两个人的工作不会“撞车”，并且可以知道在工作遇到困难的时候，你该联系的人。 ### 贡献 -当贡献时，视为你同意 [Attribution-ShareAlike license](https://creativecommons.org/licenses/by-sa/4.0/)（或在所编辑页面中已经指定的其他许可）许可。另外，代码示例的许可为 [Creative Commons CC-0](https://creativecommons.org/share-your-work/public-domain/cc0/)（专用于公有领域）。 +如若参与贡献，视为你同意[署名—相同方式共享许可](https://creativecommons.org/licenses/by-sa/4.0/deed.zh)（或已经在所编辑页面中指定的其他许可）。此外，代码示例的许可为[知识共享 CC-0](https://creativecommons.org/share-your-work/public-domain/cc0/)（专用于公有领域）。 -> 如果你对这里提到的内容有任何疑问，请在这里[开启一个讨论](https://github.com/mdn/mdn-community/discussions/categories/content)并且让我们知悉。 +> 如果你对这里提到的内容有任何疑问，请[与我们联系](/zh-CN/docs/MDN/Community/Communication_channels)。 From 6620f71ed67aa9cf265acb318db8b8579aaf22fe Mon Sep 17 00:00:00 2001 From: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Date: Wed, 13 Sep 2023 16:12:32 +0800 Subject: [PATCH 245/600] [zh-cn] fix stuck noteblocks (#15810) --- .../css_layout/legacy_layout_methods/index.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/files/zh-cn/learn/css/css_layout/legacy_layout_methods/index.md b/files/zh-cn/learn/css/css_layout/legacy_layout_methods/index.md index 39fd7d8206ec78..07099748142599 100644 --- a/files/zh-cn/learn/css/css_layout/legacy_layout_methods/index.md +++ b/files/zh-cn/learn/css/css_layout/legacy_layout_methods/index.md @@ -123,7 +123,7 @@ div:nth-of-type(2) { 你有没有注意到我们在宽度的表示上都用的是百分比——这是一个很好的策略，这创建了一个**流动布局（liquid layout），**能够适应不同的屏幕大小，在小一些的屏幕上也能使列保持一样的比例。试一试自己来调整浏览器窗口的宽度，这是响应式网页非常有价值的一个工具。 -> **备注：**你可以在 [0_two-column-layout.html](http://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html) 实时查看这个实例（另见[源代码](https://github.com/mdn/learning-area/blob/main/css/css-layout/floats/0_two-column-layout.html)）。 +> **备注：** 你可以在 [0_two-column-layout.html](https://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html) 实时查看这个实例（另见[源代码](https://github.com/mdn/learning-area/blob/main/css/css-layout/floats/0_two-column-layout.html)）。 ## 创建简单的传统网格框架 @@ -137,7 +137,7 @@ div:nth-of-type(2) { 让我们先来创建一个固定列宽度的网格系统吧。 -首先，把 [simple-grid.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/simple-grid.html)下载储存下来，其 body 中包含以下的标记： +首先，把 [simple-grid.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/simple-grid.html) 下载储存下来，其 body 中包含以下的标记： ```html
@@ -212,7 +212,7 @@ body { 单个列的最上面一行现在铺开成为了一个排列整齐的网格。 -> **备注：**我们也已经让每列变成亮红色，这样你就能准确看到每列占据了多少空间。 +> **备注：** 我们也已经让每列变成亮红色，这样你就能准确看到每列占据了多少空间。 如果我们想让布局容器横跨多列，必须要给它设置特殊的类，来适应列的数量的{{cssxref("width")}} 值（加上间隔的值）。我们需要新建额外的类来允许横跨 2-12 列。每个宽度是将该列数的列宽加上间隔宽度相加的结果，这些宽度总是比列数少一个。 @@ -263,7 +263,7 @@ body { 试试修改这些类，甚至添加、删除一些容器，来看看你能怎么改变这个布局。例如，你可以把第二行写成这样： -```css +```html
13
14
@@ -426,7 +426,7 @@ body { } ``` -> **备注：**你能在[fluid-grid-calc.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/fluid-grid-calc.html)里看到我们的完成版（另[见实时版](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html)）。 +> **备注：** 你能在 [fluid-grid-calc.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/fluid-grid-calc.html) 里看到我们的完成版（另[见实时版](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html)）。 > **备注：**如果你不能让这个正常工作，可能是你的浏览器不支持`calc()`函数，尽管各浏览器对它的支持相当好——远至 IE9 那样老。 @@ -486,7 +486,7 @@ body { ![](offset-grid-finished.png) -> **备注：**作为额外练习，你能实现一个`offset-by-two`类吗？ +> **备注：** 作为额外练习，你能实现一个 `offset-by-two` 类吗？ ### 浮动网格的限制 @@ -563,7 +563,7 @@ body { Skeleton 不仅包含了网格系统，它还包含了用于排版和其他能作为起始点的页面元素上的 CSS。我们现在把这些部分留作默认值，我们在这里真正感兴趣的是网格。 -> **备注：**[Normalize](/zh-CN/docs/)是由 Nicolas Gallagher 编写的一个很有用的小 CSS 库，它自动做了一些有用的基础布局修正，让元素默认的样式化在不同浏览器中更加协调。 +> **备注：** [Normalize](https://necolas.github.io/normalize.css/) 是由 Nicolas Gallagher 编写的一个很有用的小 CSS 库，它自动做了一些有用的基础布局修正，让元素默认的样式化在不同浏览器中更加协调。 我们将会使用和在前面的示例中相似的 HTML。将下面的内容加到你的 HTML body 中： @@ -637,7 +637,7 @@ Skeleton 不仅包含了网格系统，它还包含了用于排版和其他能 试着保存你的 HTML，在你的浏览器里面载入，看下效果。 -> **备注：**如果你在实现这个示例的时候遇到麻烦，试着拿它和我们的[html-skeleton-finished.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/html-skeleton-finished.html)文件进行比较（另见[实时运行版](http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html)）。 +> **备注：** 如果你在实现这个示例的时候遇到麻烦，试着拿它和我们的[html-skeleton-finished.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/html-skeleton-finished.html)文件进行比较（另见[实时运行版](https://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html)）。 如果你看下 skeleton.css 文件的内容，你能理解这是如何实现的。例如，Skeleton 有下面的定义内容，用于样式化加入了“three colomns”类的元素。 From 501291ee1c7cbf4dd4407ea714e167b1ecbad7fa Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Wed, 13 Sep 2023 23:54:39 +0800 Subject: [PATCH 246/600] zh-CN: Translate `scroll-snap-*` (#15812) --- .../zh-cn/web/css/scroll-snap-align/index.md | 58 +++++ files/zh-cn/web/css/scroll-snap-stop/index.md | 219 ++++++++++++++++++ files/zh-cn/web/css/scroll-snap-type/index.md | 119 +++++----- 3 files changed, 338 insertions(+), 58 deletions(-) create mode 100644 files/zh-cn/web/css/scroll-snap-align/index.md create mode 100644 files/zh-cn/web/css/scroll-snap-stop/index.md diff --git a/files/zh-cn/web/css/scroll-snap-align/index.md b/files/zh-cn/web/css/scroll-snap-align/index.md new file mode 100644 index 00000000000000..dc8cd66846c8a8 --- /dev/null +++ b/files/zh-cn/web/css/scroll-snap-align/index.md @@ -0,0 +1,58 @@ +--- +title: scroll-snap-align +slug: Web/CSS/scroll-snap-align +--- + +{{CSSRef}} + +**`scroll-snap-align`** 属性将盒子的吸附位置指定为其吸附区域（作为对齐对象）在其吸附容器的吸附口（作为对齐容器）中的对齐方式。其两值分别指定了在块向轴盒行向轴上的吸附对齐方式。若仅指定一值，则第二值默认为同一值。 + +{{EmbedInteractiveExample("pages/css/scroll-snap-align.html")}} + +## 语法 + +```css +/* 关键字值 */ +scroll-snap-align: none; +scroll-snap-align: start end; /* 当设置两值时，第一值为块向，第二值为行向 */ +scroll-snap-align: center; + +/* 全局值 */ +scroll-snap-align: inherit; +scroll-snap-align: initial; +scroll-snap-align: revert; +scroll-snap-align: revert-layer; +scroll-snap-align: unset; +``` + +### 取值 + +- `none` + - : 此盒在此轴上未定义吸附位置。 +- `start` + - : 此盒的滚动吸附区域在滚动容器的吸附口中的首对齐为此轴上的吸附位置。 +- `end` + - : 此盒的滚动吸附区域在滚动容器的吸附口中的末对齐为此轴上的吸附位置。 +- `center` + - : 此盒的滚动吸附区域在滚动容器的吸附口中的居中对齐为此轴上的吸附位置。 + +## 形式定义 + +{{CSSInfo}} + +## 形式语法 + +{{CSSSyntax}} + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- [CSS 滚动吸附](/zh-CN/docs/Web/CSS/CSS_scroll_snap) +- [用 CSS 滚动吸附明确控制滚动](https://web.dev/css-scroll-snap/) diff --git a/files/zh-cn/web/css/scroll-snap-stop/index.md b/files/zh-cn/web/css/scroll-snap-stop/index.md new file mode 100644 index 00000000000000..1e059b9dd42c77 --- /dev/null +++ b/files/zh-cn/web/css/scroll-snap-stop/index.md @@ -0,0 +1,219 @@ +--- +title: scroll-snap-stop +slug: Web/CSS/scroll-snap-stop +--- + +{{CSSRef}} + +[CSS](/zh-CN/docs/Web/CSS) 属性 **`scroll-snap-stop`** 定义了滚动容器是否可“越过”吸附位置。 + +{{EmbedInteractiveExample("pages/css/scroll-snap-stop.html")}} + +## 语法 + +```css +/* 关键字值 */ +scroll-snap-stop: normal; +scroll-snap-stop: always; + +/* 全局值 */ +scroll-snap-stop: inherit; +scroll-snap-stop: initial; +scroll-snap-stop: revert; +scroll-snap-stop: revert-layer; +scroll-snap-stop: unset; +``` + +### 取值 + +- `normal` + - : 在滚动此元素的滚动容器的可见{{Glossary("viewport", "视口")}}时，滚动容器可“越过”吸附位置。 +- `always` + - : 滚动容器不得“越过”吸附位置，必须吸附至此元素的第一个吸附位置。 + +## 形式定义 + +{{CSSInfo}} + +## 形式语法 + +{{CSSSyntax}} + +## 示例 + +### 设置不同的吸附定格 + +下列示例演示了 `scroll-snap-stop` 的值 `always` 和 `normal` 之间的对比。当 `scroll-snap-type` 属性被设置为 `mandatory` 时——即此示例所使用的设置——`scroll-snap-stop` 的两值之间的区别更为明显。 + +#### HTML + +```html +

scroll-snap-stop: always（x 轴强制）

+
+
1
+
2
+
3
+
4
+
5
+
+ +

在奇数位子元素上 scroll-snap-stop: always（x 轴强制）

+
+
1
+
2
+
3
+
4
+
5
+
+ +

在偶数位子元素上 scroll-snap-stop: always（x 轴强制）

+
+
1
+
2
+
3
+
4
+
5
+
+ +

scroll-snap-stop: normal（x 轴强制）

+
+
1
+
2
+
3
+
4
+
5
+
+ +

scroll-snap-stop: always（y 轴强制）

+
+
1
+
2
+
3
+
4
+
5
+
+ +

scroll-snap-stop: normal（y 轴强制）

+
+
1
+
2
+
3
+
4
+
5
+
+``` + +#### CSS + +```css hidden +/* 设定 */ +body { + height: 100%; + display: flex; + align-items: center; + justify-content: space-between; + flex-flow: column nowrap; + font-family: monospace; + text-align: center; +} + +div[class] { + font-size: 3rem; + 0. + display: flex; + overflow: auto; + flex: none; +} + +.x { + width: 50%; + min-width: 15rem; + height: 6rem; + flex-flow: row nowrap; +} + +.y { + width: 30%; + min-width: 12rem; + height: 12rem; + flex-flow: column nowrap; +} + +div > div { + flex: none; + outline: 1px solid #333; +} + +.x > div { + width: 90%; + height: 100%; +} + +.y > div { + width: 100%; + height: 80%; +} + +/* 上色 */ +div > div:nth-child(even) { + background-color: #87ea87; +} + +div > div:nth-child(odd) { + background-color: #87ccea; +} +``` + +```css +/* 在父元素上设定强制滚动吸附 */ +.x.mandatory-scroll-snapping { + scroll-snap-type: x mandatory; +} + +.y.mandatory-scroll-snapping { + scroll-snap-type: y mandatory; +} + +/* 在子元素上定义滚动吸附对齐方式 */ +div > div { + scroll-snap-align: center; +} + +/* 在子元素上定义滚动吸附定格 */ +.always-stop > div { + scroll-snap-stop: always; +} + +.always-stop-odd > div:nth-of-type(odd) { + scroll-snap-stop: always; +} + +.always-stop-even > div:nth-of-type(even) { + scroll-snap-stop: always; +} + +.normal-stop > div { + scroll-snap-stop: normal; +} +``` + +#### 结果 + +在下方的 x 轴盒和 y 轴盒中分别从左往右和从上往下滚动。在 `scroll-snap-stop` 属性被设置为 `always` 的 x 轴盒和 y 轴盒中，即使快速滚动，滚动也将被强制止于吸附点。然而在 `scroll-snap-stop` 属性被设置为 `normal` 的盒子中，吸附点在快速滚动时被跳过。 + +若有要求，则可在滚动容器中选择总是（`always`）止于哪些元素。下列示例通过将奇数位和偶数为的元素设为目标对此进行了演示，可根据要求选择不同的策略。在下列示例中的第二和第三个盒子中，滚动分别不会“越过”奇数位和偶数位的元素。 + +{{EmbedLiveSample("设置不同的吸附定格", "100%", 1080)}} + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- [CSS 滚动吸附](/zh-CN/docs/Web/CSS/CSS_scroll_snap) +- [用 CSS 滚动吸附明确控制滚动](https://web.dev/css-scroll-snap/) diff --git a/files/zh-cn/web/css/scroll-snap-type/index.md b/files/zh-cn/web/css/scroll-snap-type/index.md index 99d3748f019767..ef0cc89e85c44c 100644 --- a/files/zh-cn/web/css/scroll-snap-type/index.md +++ b/files/zh-cn/web/css/scroll-snap-type/index.md @@ -3,129 +3,129 @@ title: scroll-snap-type slug: Web/CSS/scroll-snap-type --- -{{CSSRef}}{{SeeCompatTable}} +{{CSSRef}} -## 摘要 - -**`scroll-snap-type`** [CSS](/zh-CN/docs/Web/CSS) 属性定义在滚动容器中的一个临时点（snap point）如何被严格的执行。 +[CSS](/zh-CN/docs/Web/CSS) 属性 **`scroll-snap-type`** 设置了在有滚动容器的情形下吸附至吸附点的严格程度。 {{EmbedInteractiveExample("pages/css/scroll-snap-type.html")}} -此属性不能用来指定任何精确的动画或者物理运动效果来执行临时点，而是交给用户代理来处理。 +此属性不为吸附至吸附点指定任何确切的动画或运动规律，留待用户代理处理。 ```css -/* 关键值 */ +/* 不吸附 */ scroll-snap-type: none; + +/* 表示吸附轴的关键字 */ scroll-snap-type: x; scroll-snap-type: y; scroll-snap-type: block; scroll-snap-type: inline; scroll-snap-type: both; -/* 可选 mandatory | proximity*/ +/* 表示吸附程度的可选关键字 */ +/* mandatory 或 proximity */ scroll-snap-type: x mandatory; scroll-snap-type: y proximity; scroll-snap-type: both mandatory; -/* etc */ - /* 全局值 */ scroll-snap-type: inherit; scroll-snap-type: initial; +scroll-snap-type: revert; +scroll-snap-type: revert-layer; scroll-snap-type: unset; ``` -{{cssinfo}} - ## 语法 ### 取值 - `none` - - : 当这个滚动容器的可视的 {{Glossary("viewport")}} 是滚动的，它必须忽略临时点。 + - : 在滚动此滚动容器的可见{{Glossary("viewport", "视口")}}时，必须忽略吸附点。 - `x` - - : 滚动容器只捕捉其水平轴上的捕捉位置。 + - : 滚动容器仅在其横轴上吸附至吸附位置。 - `y` - - : 滚动容器只捕捉其垂直轴上的捕捉位置。 + - : 滚动容器仅在其纵轴上吸附至吸附位置。 - `block` - - : 滚动容器仅捕捉到其块轴上的捕捉位置。 + - : 滚动容器仅在其块向轴上吸附至吸附位置。 - `inline` - - : 滚动容器仅捕捉到其内联轴上的捕捉位置。 + - : 滚动容器仅在其行向轴上吸附至吸附位置。 - `both` - - : 滚动容器会独立捕捉到其两个轴上的位置（可能会捕捉到每个轴上的不同元素） + - : 滚动容器在其两轴上独立地吸附至吸附位置（可能在各轴上吸附至不同的元素）。 - `mandatory` - - : 如果它当前没有被滚动，这个滚动容器的可视视图将静止在临时点上。意思是当滚动动作结束，如果可能，它会临时在那个点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在临时点上。 + - : 若滚动容器当前未在滚动，则其可见视口必须吸附至吸附位置。 - `proximity` - - : 如果它当前没有被滚动，这个滚动容器的可视视图将基于基于用户代理滚动的参数去到临时点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在临时点上。 + - : 若滚动容器当前未在滚动，则其可见视口可以吸附至吸附位置。是否吸附由用户代理根据滚动参数决定。若指定了吸附轴，则此为默认的吸附程度。 + +> **备注：** 若吸附口中的内容发生变动（如被添加、移动、删除或改变尺寸）或者与滚动吸附相关的任意属性（如 `scroll-snap-type` 或 `scroll-margin`）的值发生变化，则滚动容器将按照 `scroll-snap-type` 最新的值[重新吸附](https://drafts.csswg.org/css-scroll-snap/#re-snap)。 -### 形式语法 +## 形式定义 -{{csssyntax}} +{{CSSInfo}} + +## 形式语法 + +{{CSSSyntax}} ## 示例 -### HTML +### 不同轴上的吸附 + +#### HTML ```html
-
X Mand. LTR
+
x 轴强制、从左往右
2
3
4
5
-
-
X Prox. LTR
+
x 轴靠近、从左往右
2
3
4
5
-
-
Y Mand. LTR
+
y 轴强制、从左往右
2
3
4
5
-
-
Y Prox. LTR
+
y 轴靠近、从左往右
2
3
4
5
-
-
X Mand. RTL
+
x 轴强制、从右往左
2
3
4
5
-
-
X Prox. RTL
+
x 轴靠近、从右往左
2
3
4
5
-
-
Y Mand. RTL
+
y 轴强制、从右往左
2
3
4
5
-
-
Y Prox. RTL
+
y 轴靠近、从右往左
2
3
4
@@ -134,15 +134,9 @@ scroll-snap-type: unset;
``` -### CSS +#### CSS -```css -/* setup */ -html, -body, -.holster { - height: 100%; -} +```css hidden .holster { display: flex; align-items: center; @@ -150,38 +144,38 @@ body, flex-flow: column nowrap; font-family: monospace; } - .container { display: flex; - overflow: auto; + margin: 1em auto; outline: 1px dashed lightgray; flex: none; + overflow: auto; } - .container.x { width: 100%; height: 128px; flex-flow: row nowrap; + overflow-y: hidden; } - .container.y { width: 256px; height: 256px; flex-flow: column nowrap; + overflow-x: hidden; } -/* scroll-snap */ +``` + +```css +/* 滚动吸附 */ .x.mandatory-scroll-snapping { scroll-snap-type: x mandatory; } - .y.mandatory-scroll-snapping { scroll-snap-type: y mandatory; } - .x.proximity-scroll-snapping { scroll-snap-type: x proximity; } - .y.proximity-scroll-snapping { scroll-snap-type: y proximity; } @@ -191,36 +185,40 @@ body, scroll-snap-align: center; flex: none; } +``` +```css hidden .x.container > div { line-height: 128px; font-size: 64px; width: 100%; height: 128px; } - .y.container > div { line-height: 256px; font-size: 128px; width: 256px; height: 100%; } -/* appearance fixes */ + +/* 修补外观 */ .y.container > div:first-child { line-height: 1.3; font-size: 64px; } -/* coloration */ + +/* 上色 */ .container > div:nth-child(even) { background-color: #87ea87; } - .container > div:nth-child(odd) { background-color: #87ccea; } ``` -{{EmbedLiveSample("示例", "100%", "260")}} +#### 结果 + +{{EmbedLiveSample("不同轴上的吸附", "100%", 1800)}} ## 规范 @@ -229,3 +227,8 @@ body, ## 浏览器兼容性 {{Compat}} + +## 参见 + +- [CSS 滚动吸附](/zh-CN/docs/Web/CSS/CSS_scroll_snap) +- [用 CSS 滚动吸附明确控制滚动](https://web.dev/css-scroll-snap/) From a1487df4cad9e8fe02b0fa4bfab9cca5776d619f Mon Sep 17 00:00:00 2001 From: Kevin Macias <62669157+KevinMaciasA@users.noreply.github.com> Date: Wed, 13 Sep 2023 09:35:35 -0700 Subject: [PATCH 247/600] Fix typo: Replace "conronos" with "contornos" (#15805) --- files/es/web/css/border/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/es/web/css/border/index.md b/files/es/web/css/border/index.md index 02d27579bbd990..cd39c3e7b244ce 100644 --- a/files/es/web/css/border/index.md +++ b/files/es/web/css/border/index.md @@ -81,5 +81,5 @@ La propiedad abreviada `border` es especialmente útil cuando deseas que los cua Los bordes y los [contornos](/es/docs/Web/CSS/outline) son muy parecidos. Sin embargo, los contornos se distinguen de los bordes de la siguiente forma: -- Los conronos nunca toman espacio, ya que se dibujan fuera del contenido de un elemento. +- Los contornos nunca toman espacio, ya que se dibujan fuera del contenido de un elemento. - De conformidad con las especificaciones, si bien los contornos suelen ser rectangulares, no necesitan serlo. From 33cb67bef3a5707cd47cb7913e041c441afc4345 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Thu, 14 Sep 2023 03:40:08 +0900 Subject: [PATCH 248/600] [ko]: add index.md in `web/http/basics_of_http/data_urls` (#15595) [revise]: revise feedback --- .../http/basics_of_http/data_urls/index.md | 119 +++++++++++------- 1 file changed, 72 insertions(+), 47 deletions(-) diff --git a/files/ko/web/http/basics_of_http/data_urls/index.md b/files/ko/web/http/basics_of_http/data_urls/index.md index 65b75701ef7e9b..54c7848b4ecaa2 100644 --- a/files/ko/web/http/basics_of_http/data_urls/index.md +++ b/files/ko/web/http/basics_of_http/data_urls/index.md @@ -1,86 +1,110 @@ --- -title: 데이터 URIs +title: 데이터 URI slug: Web/HTTP/Basics_of_HTTP/Data_URLs +l10n: + sourceCommit: 997a0ec66e1514b7269076195b2419db334e876e --- {{HTTPSidebar}} -**Data URIs**, `data:` 스킴이 접두어로 붙은 URL은 컨텐츠 작성자가 작은 파일을 문서 내에 인라인으로 삽입할 수 있도록 해줍니다. +**데이터 URL**, `data:` 스킴이 접두어로 붙은 URL은 컨텐츠 작성자가 작은 파일을 문서 내에 인라인으로 삽입할 수 있도록 해줍니다. WHATWG에 의해 해당 이름이 없어질 때까지 이전에는 "데이터 URI"로 알려졌습니다. + +> **참고:** 데이터 URL은 탐색을 담당하는 설정 객체의 출처를 상속받지 않고 최신 브라우저에서 고유하고 불투명한 출처로 처리됩니다. ## 구문 -Data URIs는 접두사(`data:`), 데이터의 타입을 가리키는 MIME 타입, 텍스트가 아닌 경우 사용될 부가적인 `base64` 토큰 그리고 데이터 자체 총 네가지 부분으로 구성됩니다. +데이터 URI는 접두사(`data:`), 데이터의 타입을 가리키는 [MIME 타입](/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types), 텍스트가 아닌 경우 사용될 부가적인 `base64` 토큰 그리고 데이터 자체 총 네가지 부분으로 구성됩니다. -``` +```plain data:[][;base64], ``` -`mediatype`이란, MIME 타입을 말합니다(JPEG 이미지의 경우 `'image/jpeg'`). 만약 생략된다면, 기본 값으로 `text/plain;charset=US-ASCII`이 사용됩니다.`` +`mediatype`이란, [MIME type](/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types)을 말합니다(JPEG 이미지의 경우 `'image/jpeg'`). 만약 생략된다면, 기본 값으로 `text/plain;charset=US-ASCII`이 사용됩니다. + +데이터에 [RFC 3986에 예약된 문자로 정의된 문자](https://datatracker.ietf.org/doc/html/rfc3986#section-2.2)가 포함되어 있거나, 공백 문자, 개행 문자 또는 기타 인쇄할 수 없는 문자가 포함되어 있는 경우, 해당 문자는 [URL 인코딩](https://en.wikipedia.org/wiki/URL_encoding)된 문자여야 합니다. -데이터가 텍스트인 경우, 단순히 텍스트를 (포함된 문서 유형에 따라 적합한 엔티티 혹은 이스케이프를 사용하여) 임베드할 수 있습니다. 그게 아니라면, base64로 인코딩된 이진 데이터를 임베드하기 위해 `base64`를 지정할 수 있습니다. +데이터가 텍스트인 경우, 단순히 텍스트를 (포함된 문서 유형에 따라 적합한 엔티티 혹은 이스케이프를 사용하여) 포함할 수 있습니다. 그게 아니라면, base64로 인코딩된 이진 데이터를 포함하기 위해 `base64`를 지정할 수 있습니다. MIME 유형에 대한 자세한 내용은 [여기](/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types) 및 [여기](/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types)에서 확인할 수 있습니다. -몇 가지 예제: +몇 가지 예제입니다. - `data:,Hello%2C%20World!` - - : 간단한 text/plain 데이터 -- `data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D` + - : 간단한 text/plain 데이터 `Hello, World!`, 쉼표는 `%2C`로 [URl 인코딩](https://en.wikipedia.org/wiki/URL_encoding)되고 공백 문자는 `%20`으로 표시됩니다. +- `data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==` - : 위 예제의 base64 인코딩 버전 - `data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E` - - : `

Hello, World!

인 HTML 문서` -- `data:text/html,` - - : 자바스크립트 얼럿을 실행하는 HTML 문서입니다. 닫기 스크립트 태그가 필요하다는 것을 기억하세요. + - : `

Hello, World!

`인 HTML 문서 +- `data:text/html,%3Cscript%3Ealert%28%27hi%27%29%3B%3C%2Fscript%3E` + - : `` 자바스크립트 경고문을 실행하는 HTML 문서입니다. 닫기 스크립트 태그가 필요하다는 것을 기억하세요. ## base64 포맷으로 데이터 인코딩하기 -리눅스와 Mac OS X 시스템의 명령줄에서 `uuencode` 유틸리티를 사용해 쉽게 인코딩할 수 있습니다: +Base64는 이진 데이터를 {{Glossary("ASCII")}} 문자열 형식으로 기수-64 표현으로 변환하여 나타내는 이진-텍스트 인코딩 체계 그룹입니다. ASCII 문자로만 구성되므로 base64 문자열은 일반적으로 URL로부터 안전하므로 데이터 URL에서 데이터를 인코딩하는 데 사용할 수 있습니다. -``` -uuencode -m infile remotename +### JavaScript에 인코딩하기 + +Web API에는 [Base64](/ko/docs/Glossary/Base64)로 인코딩하거나 디코딩하는 기본 메서드가 있습니다. + +### Unix System에 인코딩하기 + +Linux 및 macOS 시스템의 Base64 인코딩은 명령줄 `base64`(또는 대안으로 `-m` 인수가 포함된 `uuencode` 유틸리티)를 사용하여 수행할 수 있습니다. + +```bash +echo -n hello|base64 +# 콘솔에 찍히는 결과: aGVsbG8= + +echo -n hello>a.txt +base64 a.txt +# 콘솔에 찍히는 결과: aGVsbG8= + +base64 a.txt>b.txt +# b.txt에 찍히는 결과: aGVsbG8= ``` -`infile` 파라메터는 base64 포맷으로 인코딩하려는 파일의 이름이며, `remotename`는 파일에 대한 원격지 이름으로 `data` URLs내에서는 실제로 사용되지 않습니다. +### Windows에 인코딩하기 -출력은 다음과 같은 내용일 겁니다: +Windows에서는 PowerShell의 [Convert.ToBase64String](https://docs.microsoft.com/dotnet/api/system.convert.tobase64string?view=net-5.0)을 사용하여 Base64 인코딩을 수행할 수 있습니다. +```plain +[convert]::ToBase64String([Text.Encoding]::UTF8.GetBytes("hello")) +# b.txt에 찍히는 결과: aGVsbG8= ``` -begin-base64 664 test -YSBzbGlnaHRseSBsb25nZXIgdGVzdCBmb3IgdGV2ZXIK -==== + +또는, GNU/Linux 셸(예, [WSL](https://en.wikipedia.org/wiki/Windows_Subsystem_for_Linux))은 `base64` 유틸리티를 제공합니다. + +```bash +bash$ echo -n hello | base64 +# 콘솔에 찍히는 결과: aGVsbG8= ``` -Data URI는 초기 헤더줄 다음의 인코딩된 데이터를 사용하게 됩니다. +## 일반적인 문제점 -### 웹 페이지에서 JavaScript 사용하기 +이 섹션에서는 `데이터` URL를 만들고 사용할 때 일반적으로 발생하는 문제점들에 대해 설명합니다. -웹 API는 base64로 인코딩하거나 디코딩하기 위한 프리미티브를 가지고 있습니다: [Base64 인코딩과 디코딩](/ko/docs/Web/JavaScript/Base64_encoding_and_decoding). +```html +data:text/html,lots of text…

bottom?arg=val

+``` -## 일반적인 문제점 +내용이 다음과 같은 HTML 리소스를 나타냅니다. -이 섹션에서는 `data` URIs를 만들고 사용할 때 일반적으로 발생하는 문제점들에 대해 설명합니다. +```html +lots of text… +

bottom?arg=val

+``` - 구문 - - : `data` URIs를 위한 문법은 매우 간단하지만, "data" 세그먼트 앞에 콤마를 넣는 것을 쉽게 잊거나 데이터를 base64 포맷으로 부정확하게 인코딩하는 경우가 있습니다. + - : `데이터` URL를 위한 문법은 매우 간단하지만, "data" 세그먼트 앞에 콤마를 넣는 것을 쉽게 잊거나 데이터를 base64 형식으로 부정확하게 인코딩하는 경우가 있습니다. - HTML 내에 포맷시키기 - - : `data` URI는 동봉된 문서의 너비에 비례할 가능성이 높은 파일 내에 파일을 제공하게 됩니다. URL로 `data`를 공백 문자(라인 피드, 탭 혹은 스페이스)을 사용해 포맷이 가능해야 하지만 [base64 인코딩을 사용할 때](https://bugzilla.mozilla.org/show_bug.cgi?id=73026#c12) 일어나는 실질적인 문제가 있습니다. + - : `데이터` URL는 동봉된 문서의 너비에 비례할 가능성이 높은 파일 내에 파일을 제공하게 됩니다. URL로 `데이터`를 공백 문자(라인 피드, 탭 혹은 스페이스)을 사용해 포맷이 가능해야 하지만 [base64 인코딩을 사용할 때](hhttps://bugzil.la/73026#c12) 일어나는 실질적인 문제가 있습니다. - 길이 제한 - - : 파이어폭스는 기본적으로 길이 제한이 없는 `data` URIs를 지원하지만, 브라우저들은 데이터의 개별적인 최대 길이를 제공해야 할 의무가 없습니다. 예를 들어, 오페라 11 브라우저는 `data` URL을 65529 문자로 제한하는 65535 개의 character long으로 제한합니다(MIME 타입을 지정하지 않고 plain `data`를 사용한다면, 소스가 아닌 인코딩된 데이터의 길이는 65529자가 됩니다). + - : 브라우저들은 데이터의 개별적인 최대 길이를 제공해야 할 의무가 없습니다. 예를 들어, Opera 11 브라우저는 URL을 65535자로 제한하여, `data` URL을 65529 문자로 제한합니다.(MIME 타입을 지정하지 않고 plain `data`를 사용한다면, 소스가 아닌 인코딩된 데이터의 길이는 65529자가 됩니다). Firefox 버전 97 이상에서는 최대 32MB의 `data` URL을 지원합니다(97 이전에는 한도가 256MB에 비슷했습니다). Chromium 객체는 512MB가 넘는 URL에, Webkit(Safari)은 2048MB가 넘는 URL에 적용됩니다. - 오류 처리의 부족 - - : 미디어 내의 유효하지 않은 파라메터들 또는 '`base64`'를 지정할 때 오타들은 무시되지만 오류가 발생하지는 않습니다. + - : 미디어 내의 유효하지 않은 매개변수들 또는 '`base64`'를 지정할 때 오타들은 무시되지만 오류가 발생하지는 않습니다. - 쿼리 문자열에 대한 미지원 등 + - : 데이터 URL의 데이터 일부는 불명확해서 데이터 URL를 이용해 쿼리 문자열(`?parameter-data` 문법을 이용한 페이지 특정의 파라메터)을 사용하려는 시도는 URL이 나타내는 데이터 내에 쿼리 문자열을 포함하게 됩니다. +- 보안 이슈 + - : 많은 보안 문제(예, 피싱)가 데이터 URL과 연관되어 있으며, 브라우저의 최상위 수준에서 해당 URL로 이동합니다. 이 문제를 완화하기 위해 `data:` URL에 대한 최상위 탐색은 모든 최신 브라우저에서 차단됩니다. 자세한 내용은 [Mozilla 보안 팀의 이 블로그 포스트](https://blog.mozilla.org/security/2017/11/27/blocking-top-level-navigations-data-urls-firefox-59/)를 참조하세요. - - : data URI의 data 일부는 불명확해서 데이터 URI를 이용해 쿼리 문자열(`?parameter-data` 문법을 이용한 페이지 특정의 파라메터)을 사용하려는 시도는 URI가 나타내는 데이터 내에 쿼리 문자열을 포함하게 됩니다. 예를 들어: - - ``` - data:text/html,lots of text...

bottom?arg=val - ``` - - 이는 내용이 다음과 같은 HTML 리소스를 나타냅니다: - - ``` - lots of text...

bottom?arg=val - ``` - -## 명세 +## 명세서 {{Specifications}} @@ -88,10 +112,11 @@ Data URI는 초기 헤더줄 다음의 인코딩된 데이터를 사용하게 {{Compat}} -## 함께 참고할 내용 +## 같이 보기 -- [Base64 인코딩과 디코딩](/ko/docs/Web/JavaScript/Base64_encoding_and_decoding) -- {{domxref("WindowBase64.atob","atob()")}} -- {{domxref("WindowBase64.btoa","btoa()")}} +- [Base64](/ko/docs/Glossary/Base64) +- [URL 인코딩](https://en.wikipedia.org/wiki/URL_encoding) +- {{domxref("atob","atob()")}} +- {{domxref("btoa","btoa()")}} - [CSS `url()`](/ko/docs/Web/CSS/uri) -- [URI](/ko/docs/URI) +- [URI](/ko/docs/Glossary/URI) From bf41df65045c1fb6ca8883376206033b14ee9a9b Mon Sep 17 00:00:00 2001 From: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Date: Thu, 14 Sep 2023 10:24:25 +0800 Subject: [PATCH 249/600] align syntax sections with en-US document in array.unshift() (#15822) --- .../reference/global_objects/array/unshift/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/unshift/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/unshift/index.md index 427a632a865fc0..4175c546146786 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/array/unshift/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/array/unshift/index.md @@ -13,14 +13,14 @@ slug: Web/JavaScript/Reference/Global_Objects/Array/unshift ```js-nolint unshift() -unshift(element0) -unshift(element0, element1) -unshift(element0, element1, /* … ,*/ elementN) +unshift(element1) +unshift(element1, element2) +unshift(element1, element2, /* …, */ elementN) ``` ### 参数 -- `elementN` +- `element1`、…、`elementN` - : 添加到 `arr` 开头的元素。 ### 返回值 From 0a3c99d9f039ca6f80cc3a3caffe34f838b912f2 Mon Sep 17 00:00:00 2001 From: BruinK <1204611723@qq.com> Date: Thu, 14 Sep 2023 10:31:01 +0800 Subject: [PATCH 250/600] [zh-cn]: update translation of arrow functions (#15823) --- .../javascript/reference/functions/arrow_functions/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/zh-cn/web/javascript/reference/functions/arrow_functions/index.md b/files/zh-cn/web/javascript/reference/functions/arrow_functions/index.md index 1490d956360b9b..0bfe23d2ae79d1 100644 --- a/files/zh-cn/web/javascript/reference/functions/arrow_functions/index.md +++ b/files/zh-cn/web/javascript/reference/functions/arrow_functions/index.md @@ -50,7 +50,7 @@ slug: Web/JavaScript/Reference/Functions/Arrow_functions ### 更短的函数 -```js +```js-nolint var elements = ["Hydrogen", "Helium", "Lithium", "Beryllium"]; elements.map(function (element) { @@ -63,7 +63,7 @@ elements.map((element) => { }); // [8, 6, 7, 9] // 当箭头函数只有一个参数时，可以省略参数的圆括号 -elements.map((element) => { +elements.map(element => { return element.length; }); // [8, 6, 7, 9] From 877f03c55f6331a07455b6f1c1fa797094c33dc8 Mon Sep 17 00:00:00 2001 From: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Date: Thu, 14 Sep 2023 10:52:18 +0800 Subject: [PATCH 251/600] [zh-cn]: update 'split navigation' (#15825) --- .../layout_cookbook/split_navigation/index.md | 22 +++++++++---------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/files/zh-cn/web/css/layout_cookbook/split_navigation/index.md b/files/zh-cn/web/css/layout_cookbook/split_navigation/index.md index 2295ee16f2a391..6385e17099dce0 100644 --- a/files/zh-cn/web/css/layout_cookbook/split_navigation/index.md +++ b/files/zh-cn/web/css/layout_cookbook/split_navigation/index.md @@ -1,5 +1,5 @@ --- -title: 分块导航 +title: 分离式导航菜单 slug: Web/CSS/Layout_cookbook/Split_Navigation --- @@ -7,34 +7,32 @@ slug: Web/CSS/Layout_cookbook/Split_Navigation 一种导航样式，其中一个或多个元素与其余导航项之间是分离的。 -![Items separated into two groups.](split-navigation.png) +![分离为两组的项目](split-navigation.png) ## 需求 -一种常见的导航样式是将一个元素推离其他元素。我们可以使用伸缩盒子 (Flexbox) 实现这一点，而不需要将两组项目放入两个单独的伸缩容器 (flex containers) 中。 +一种常见的导航样式是将一个元素推离其他元素。我们可以使用弹性盒（Flexbox）实现这一点，而不需要将两组项目放入两个单独的弹性容器（flex container）中。 ## 指南 {{EmbedGHLiveSample("css-examples/css-cookbook/split-navigation.html", '100%', 520)}} -> **备注：** [下载这份示例](https://github.com/mdn/css-examples/blob/master/css-cookbook/split-navigation--download.html) +> **标注：** +> +> [下载这份示例](https://github.com/mdn/css-examples/blob/main/css-cookbook/split-navigation--download.html) ## 做出选择 -这一样式结合了自动外边距 (auto margins) 与伸缩盒子两种方法来把项目分离开。 +这一样式结合了自动外边距（auto margin）与弹性盒两种方法来把项目分离开。 -自动外边距会吸收其应用方向上的所有可用空间。这就是利用自动外边距实现居中的工作原理—— 块的两侧都有一个试图占用所有空间的空白，从而将块推到了中间。 +自动外边距会吸收其应用方向上的所有可用空间。这就是利用自动外边距实现区块居中的工作原理——区块两侧都有一个试图占用所有空间的空白，从而将区块推到了中间。 -在这种情况下，左侧的自动边距会占用所有可用空间，并将项目推到右侧。你可以将类`push`应用到列表中的任何项目上。 +在这种情况下，左侧的自动边距会占用所有可用空间，并将项目推到右侧。你可以将类 `push` 应用到列表中的任何项目上。 ## 浏览器兼容性 -各种布局方法具有不同的浏览器支持。有关所使用属性的基本支持的详细信息，请参见下表。 - -#### Flexbox - {{Compat}} ## 参见 -- [CSS Flexible Box Layout](/zh-CN/docs/Web/CSS/CSS_flexible_box_layout) +- [CSS 弹性盒布局](/zh-CN/docs/Web/CSS/CSS_flexible_box_layout) From ac16135918b03ed128bcdf63a1de477bdc041646 Mon Sep 17 00:00:00 2001 From: Jason Lam Date: Thu, 14 Sep 2023 11:53:59 +0800 Subject: [PATCH 252/600] [zh-cn]: update the translation of number.overview (#15808) Co-authored-by: A1lo --- .../reference/global_objects/number/index.md | 132 ++++++++++-------- 1 file changed, 74 insertions(+), 58 deletions(-) diff --git a/files/zh-cn/web/javascript/reference/global_objects/number/index.md b/files/zh-cn/web/javascript/reference/global_objects/number/index.md index 4c370bb40d0091..2fc61ce4e1768e 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/number/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/number/index.md @@ -5,26 +5,29 @@ slug: Web/JavaScript/Reference/Global_Objects/Number {{JSRef}} -**`Number`** 值表示像 `37` 或 `-9.25` 这样的浮点数值。 +**`Number`** 值表示像 `37` 或 `-9.25` 这样的浮点数。 -`Number` 构造函数包含常量和处理数值的方法。其他类型的值可以使用 `Number()` 函数转换为数值。 +`Number` 构造函数包含常量和处理数值的方法。其他类型的值可以使用 `Number()` 函数转换为数字。 ## 描述 -数值通常以字面量形式表示。如 `0b101`、`0o13`、`0x0A`。[词法文法](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#字面量)包含更详细的参考。 +数值通常以字面量形式表示。如 `255` 或 `3.14159`。[词法文法](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#字面量)包含更详细的参考。 ```js -123; // one-hundred twenty-three -123.0; // same -123 === 123.0; // true +255; // 二百五十五 +255.0; // 相同的数字 +255 === 255.0; // true +255 === 0xff; // true（十六进制表示） +255 === 0b11111111; // true（二进制表示） +255 === 0.255e3; // true（十进制指数记数法） ``` -在 JavaScript 代码中，像 `37` 这样的数值字面值是一个浮点值，而不是整数。在常见的日常使用中，没有单独的整数类型。（JavaScript 也有 {{jsxref("BigInt")}} 类型，但它不是为取代日常使用的 Number 而设计的。`37` 仍然是一个数值，而不是 BigInt。） +在 JavaScript 代码中，像 `37` 这样的数字字面量是浮点数值，而不是整数。在常见的日常使用中，JavaScript 没有单独的整数类型。（JavaScript 还有一个 {{jsxref("BigInt")}} 类型，但它并不是为了取代 Number 而设计的，`37` 仍然是一个数字，而不是一个 BigInt。） -当作为一个函数使用时，`Number(value)` 将转换字符串或者其他值到 Number 类型。如果该值不能被转换，它会返回 {{jsxref("NaN")}}。 +当作为一个函数使用时，`Number(value)` 将字符串或者其他值转换到 Number 类型。如果该值不能被转换，它会返回 {{jsxref("NaN")}}。 ```js -Number("123"); // returns the number 123 +Number("123"); // 返回数字 123 Number("123") === 123; // true Number("unicorn"); // NaN @@ -33,75 +36,83 @@ Number(undefined); // NaN ### Number 编码 -JavaScript 的 `Number` 类型是一个[双精度 64 位二进制格式 IEEE 754](https://zh.wikipedia.org/wiki/雙精度浮點數) 值，类似于 Java 或者 C# 中的 `double`。这意味着它可以表示小数值，但是存储数值的大小和精度有一些限制。简而言之，IEEE 754 双精度浮点数使用 64 位来表示 3 个部分： +JavaScript 的 `Number` 类型是一个[双精度 64 位二进制格式 IEEE 754](https://zh.wikipedia.org/wiki/雙精度浮點數) 值，类似于 Java 或者 C# 中的 `double`。这意味着它可以表示小数值，但是存储的数字的大小和精度有一些限制。简而言之，IEEE 754 双精度浮点数使用 64 位来表示 3 个部分： -- 1 比特*符号位*（sign）（正数或者负数） -- 11 比特*指数位*（exponent）（-1022 到 1023） -- 52 比特*尾数位*（mantissa）（表示 0 和 1 之间的数值） +- 1 位用于表示*符号（sign）*（正数或者负数） +- 11 位用于表示*指数（exponent）*（-1022 到 1023） +- 52 位用于表示*尾数（mantissa）*（表示 0 和 1 之间的数值） -尾数（也称为*有效位数*）是表示实际值的数值（有效数值）部分。指数是尾数应乘以的 2 的幂。将其视为科学计数法： +尾数（也称为*有效数*）是表示实际值（有效数字）的数值部分。指数是尾数应乘以的 2 的幂次。将其视为科学计数法： Number=(−1)sign⋅(1+mantissa)⋅2exponent\text{Number} = ({-1})^{\text{sign}} \cdot (1 + \text{mantissa}) \cdot 2^{\text{exponent}} -尾数使用 52 比特存储，在二进制小数中解释为 `1.…` 之后的数值。因此，尾数的精度是 2-52（可以通过 {{jsxref("Number.EPSILON")}} 获得），或者十进制小数点后大约 15 到 17 位；高于该精度级别的算术需要[舍入](https://en.wikipedia.org/wiki/Floating-point_arithmetic#Representable_numbers,_conversion_and_rounding)。 +尾数使用 52 比特存储，在二进制小数中解释为 `1.…` 之后的数字。因此，尾数的精度是 2-52（可以通过 {{jsxref("Number.EPSILON")}} 获得），或者十进制数小数点后大约 15 到 17 位；超过这个精度的算术会受到[舍入](https://zh.wikipedia.org/wiki/浮点数#准确性)的影响。 -一个数值可以容纳的最大值是 21024 - 1（基于二进制的指数为 1023，尾数为 0.1111...），这可以通过 {{jsxref("Number.MAX_VALUE")}} 获得。大于该值的数值，被特殊数常数 {{jsxref("Infinity")}} 取代。 +一个数值可以容纳的最大值是 21024 - 1（指数为 1023，尾数为基于二进制的 0.1111…），可以通过 {{jsxref("Number.MAX_VALUE")}} 获得。超过这个值的数会被替换为特殊的数值常量 {{jsxref("Infinity")}}。 -只有在 -253 + 1 到 253 - 1 范围内的整数才能在不丢失精度的情况下被表示（可通过 {{jsxref("Number.MIN_SAFE_INTEGER")}} 和 {{jsxref("Number.MAX_SAFE_INTEGER")}} 获得），因为尾数只能容纳 53 位（包括前导 1）。 +只有在 -253 + 1 到 253 - 1 范围内（闭区间）的整数才能在不丢失精度的情况下被表示（可通过 {{jsxref("Number.MIN_SAFE_INTEGER")}} 和 {{jsxref("Number.MAX_SAFE_INTEGER")}} 获得），因为尾数只能容纳 53 位（包括前导 1）。 -有关这一点的更多详细信息，请参阅 [ECMAScript 标准](https://tc39.es/ecma262/#sec-ecmascript-language-types-number-type)。 +有关这部份的更多详细信息，请参阅 [ECMAScript 标准](https://tc39.es/ecma262/multipage/ecmascript-data-types-and-values.html#sec-ecmascript-language-types-number-type)。 ### Number 强制转换 -许多期望数值的内置操作是将它们的参数转换为数值（这在很大程度上就是为什么 `Number` 对象的行为与数值原始值相似的原因）。该[操作](https://tc39.es/ecma262/#sec-tonumber)可以总结如下： +许多期望数值的内置操作首先将其参数转换为数字（这在很大程度上解释了为什么 `Number` 对象的行为类似于数字原始值）。[该操作](https://tc39.es/ecma262/multipage/abstract-operations.html#sec-tonumber)可以总结如下： -- 对于 Number 则总是返回自己 -- [`undefined`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined) 变成了 [`NaN`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/NaN)。 -- [`null`](/zh-CN/docs/Web/JavaScript/Reference/Operators/null) 变成了 `0`。 -- `true` 变成了 `1`；`false` 变成了 `0`。 -- 如果它们包含[数字字面量](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#数字字面量)，字符串通过解析它们来转换。如果解析失败，返回的结果为 `NaN`。与实际数字字面量相比，它们有一些细微的差别。 - - 忽略前导和尾随空格/行终止符。 - - 前导数值 `0` 不会导致该数值成为八进制文本（或在严格模式下被拒绝）。 - - `+` 和 `-` 允许在字符串的开头指示其符号。（在实际代码中，它们“看起来像”文字的一部分，但实际上是单独的一元运算符。）然而，该标志只能出现一次，不得后跟空格。 +- Number 将按原样返回 +- [`undefined`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined) 转换为 [`NaN`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/NaN)。 +- [`null`](/zh-CN/docs/Web/JavaScript/Reference/Operators/null) 转换为 `0`。 +- `true` 转换为 `1`；`false` 转换为 `0`。 +- 字符串将被假定为包含[数字字面量](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#数字字面量)，并通过解析它们来转换。解析失败会得到 `NaN`。与实际数字字面量相比，它们有一些细微的差别： + - 前导和尾随的空格/换行符会被忽略。 + - 前导的数字 `0` 不会导致该数值成为八进制字面量（或在严格模式下被拒绝）。 + - `+` 和 `-` 允许出现在字符串的开头以指示其符号。（在实际代码中，它们“看起来像”文字的一部分，但实际上是独立的一元运算符。）然而，该标志只能出现一次，并且后面不能跟空格。 - `Infinity` 和 `-Infinity` 被当作是字面量。在实际代码中，它们是全局变量。 - - 空字符串或仅空格字符串转换为 `0`。 - - 不允许使用[数字分隔符](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#numeric_separators)。 -- [BigInt](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/BigInt) 抛出 {{jsxref("TypeError")}}，以防止意外的强制隐式转换损失精度。 + - 空字符串或仅包含空格的字符串转换为 `0`。 + - 不允许使用[数字分隔符](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#数值分隔符)。 +- [BigInt](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/BigInt) 抛出 {{jsxref("TypeError")}}，以防止意外的强制隐式转换导致精度损失。 - [Symbol](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol) 抛出 {{jsxref("TypeError")}}。 -- 对象首先按顺序调用 [`[@@toPrimitive]()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive)（将 `"number"` 作为 hint）、`valueOf()` 和 `toString()` 方法将其[转换为原始值](/zh-CN/docs/Web/JavaScript/Data_structures#强制原始值转换)。然后将生成的原始值转换为数值。 +- 对象首先通过按顺序调用它们的 [`[@@toPrimitive]()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive)（使用 `"number"` 提示）、`valueOf()` 和 `toString()` 方法将其[转换为原始值](/zh-CN/docs/Web/JavaScript/Data_structures#强制原始值转换)。然后将得到的原始值转换为数字。 有两种方法可以在 JavaScript 中实现几乎相同的效果。 - [一元加](/zh-CN/docs/Web/JavaScript/Reference/Operators/Unary_plus)：`+x` 完全按照上面的数值强制转换步骤来转换 `x`。 -- [`Number()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/Number) 函数：`Number(x)` 使用相同的算法转换 `x`，除了 [BigInt](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/BigInt) 不会抛出 {{jsxref("TypeError")}}，而是返回它的 Number 值，并且可能损失精度。 +- [`Number()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/Number) 函数：`Number(x)` 使用相同的算法转换 `x`，除了 [BigInt](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/BigInt) 不会抛出 {{jsxref("TypeError")}}，而是返回其数字值，并且可能导致精度损失。 -{{jsxref("Number.parseFloat()")}} 和 {{jsxref("Number.parseInt()")}} 与 `Number()` 相似，但只转换字符串，并且解析规则略有不同。例如，`parseInt()` 无法识别小数点，`parseFloat()` 无法识别 `0x` 前缀。 +{{jsxref("Number.parseFloat()")}} 和 {{jsxref("Number.parseInt()")}} 与 `Number()` 相似，但只能转换字符串，并且解析规则略有不同。例如，`parseInt()` 无法识别小数点，`parseFloat()` 无法识别 `0x` 前缀。 #### 整数转换 -一些操作需要整数，最值得注意的是那些适用于数组/字符串索引、日期/时间组件和数值基数的整数。执行上述数值强制转换步骤后，结果被[截断](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/trunc)为整数（通过丢弃分数部分）。如果数值为 ±Infinity，则按原样返回。如果数值是 `NaN` 或 `-0`，则返回为 `0`。因此，结果总是整数（不是 `-0`）或 ±Infinity。 +某些操作需要整数作为参数，尤其是那些与数组/字符串索引、日期/时间组件和数字进制相关的操作。在执行上述数值强制转换步骤后，结果将被[截断](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/trunc)为整数（即舍弃小数部份）。如果数值为 ±Infinity，则按原样返回。如果数值是 `NaN` 或 `-0`，则返回为 `0`。因此，结果总是整数（不包括 `-0`）或 ±Infinity。 值得注意的是，当转换到整数时，`undefined` 和 `null` 都会变成 `0`，因为 `undefined` 被转换为 `NaN`，`NaN` 也变成了 `0`。 #### 固定宽度数值转换 -JavaScript 有一些较低级别的函数，用于处理整数的二进制编码，最值得注意的是[按位运算](/zh-CN/docs/Web/JavaScript/Reference/Operators#bitwise_shift_operators)和 {{jsxref("TypedArray")}} 对象。按位运算总是将操作数转换为 32 位整数。在这些情况下，将值转换为数值后，然后首先[截断](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/trunc)小数部分，然后在整数的二进制的补码编码中取最低位，将数值归一化为给定的宽度。 +JavaScript 有一些较低级别的函数，用于处理整数的二进制编码，最值得注意的是[按位运算](/zh-CN/docs/Web/JavaScript/Reference/Operators#位移运算符)和 {{jsxref("TypedArray")}} 对象。按位运算总是将操作数转换为 32 位整数。在这些情况下，将值转换为数字后，数字将首先[截断](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/trunc)小数部分，然后再取整数的二进制的补码编码中的最低几位来将数值标准化为给定的宽度。 ```js new Int32Array([1.1, 1.9, -1.1, -1.9]); // Int32Array(4) [ 1, 1, -1, -1 ] -new Int8Array([257, -257]); // Int8Array(1) [ 1, -1 ] -// 257 = 0001 0000 0001 = 0000 0001 (mod 2^8) = 1 -// -257 = 1110 1111 1111 = 1111 1111 (mod 2^8) = -1 (as signed integer) -new Uint8Array([257, -257]); // Uint8Array(1) [ 1, 255 ] -// -257 = 1110 1111 1111 = 1111 1111 (mod 2^8) = 255 (as unsigned integer) + +new Int8Array([257, -257]); // Int8Array(2) [ 1, -1 ] +// 257 = 0001 0000 0001 +// = 0000 0001（模 2^8） +// = 1 +// -257 = 1110 1111 1111 +// = 1111 1111（模 2^8） +// = -1（带符号整数） + +new Uint8Array([257, -257]); // Uint8Array(2) [ 1, 255 ] +// -257 = 1110 1111 1111 +// = 1111 1111（模 2^8） +// = 255（无符号整数） ``` ## 构造函数 -- [`Number()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/Number) +- {{jsxref("Number/Number", "Number()")}} - : 创建一个新的 `Number` 值。 -当 `Number` 作为一个构造函数（用 `new`）调用时，它会创建一个 {{jsxref("Number")}} 对象，该对象**不是**一个原始值。例如，`typeof new Number(42) === "object"`，并且 `new Number(42) !== 42`（尽管 `new Number(42) == 42`）。 +当 `Number` 作为一个构造函数（用 `new`）被调用时，它会创建一个 {{jsxref("Number")}} 对象，该对象**不是**一个原始值。例如，`typeof new Number(42) === "object"`，并且 `new Number(42) !== 42`（尽管 `new Number(42) == 42`）。 > **警告：** 你应该很少发现自己将 `Number` 作为构造函数使用。 @@ -123,23 +134,28 @@ new Uint8Array([257, -257]); // Uint8Array(1) [ 1, 255 ] - : 特殊的负无穷大值，在溢出时返回该值。 - {{jsxref("Number.POSITIVE_INFINITY")}} - : 特殊的正无穷大值，在溢出时返回该值。 -- {{jsxref("Number.prototype")}} - - : Number 对象上允许的额外属性。 ## 静态方法 -- {{jsxref("Number.isNaN()")}} - - : 确定传递的值是否是 NaN。 - {{jsxref("Number.isFinite()")}} - - : 确定传递的值类型及本身是否是有限数。 + - : 判断传入的值是否是有限数。 - {{jsxref("Number.isInteger()")}} - - : 确定传递的值类型是 number，且是整数。 + - : 判断传入的值是否为整数 +- {{jsxref("Number.isNaN()")}} + - : 判断传入的值是否为 `NaN`。 - {{jsxref("Number.isSafeInteger()")}} - - : 确定传递的值是否为安全整数（数值在 -(253 - 1) 和 253 - 1）之间。 + - : 判断传入的值是否为安全整数（数值在 -(253 - 1) 到 253 - 1 之间）。 - {{jsxref("Number.parseFloat()")}} - - : 和全局对象 {{jsxref("parseFloat", "parseFloat()")}} 一样。 + - : 和全局函数 {{jsxref("parseFloat", "parseFloat()")}} 相同。 - {{jsxref("Number.parseInt()")}} - - : 和全局对象 {{jsxref("parseInt", "parseInt()")}} 一样。 + - : 和全局函数 {{jsxref("parseInt", "parseInt()")}} 相同。 + +## 实例属性 + +这些属性是在 `Number.prototype` 上定义的，并由所有 `Number` 实例共享。 + +- {{jsxref("Object/constructor", "Number.prototype.constructor")}} + - : 创建实例对象的构造函数。对于 `Number` 实例，初始值为 {{jsxref("Number/Number", "Number")}} 构造函数。 ## 实例方法 @@ -148,13 +164,13 @@ new Uint8Array([257, -257]); // Uint8Array(1) [ 1, 255 ] - {{jsxref("Number.prototype.toFixed()")}} - : 返回使用定点表示法表示数值的字符串。 - {{jsxref("Number.prototype.toLocaleString()")}} - - : 返回数值在特定语言环境下表示的字符串。覆盖 {{jsxref("Object.prototype.toLocaleString()")}} 方法。 + - : 返回数值在特定语言环境下表示的字符串。重写了 {{jsxref("Object.prototype.toLocaleString()")}} 方法。 - {{jsxref("Number.prototype.toPrecision()")}} - : 返回数值使用定点表示法或指数表示法至指定精度的字符串。 - {{jsxref("Number.prototype.toString()")}} - - : 返回一个代表给定对象的字符串，基于指定的*基数*（radix）。覆盖 {{jsxref("Object.prototype.toString()")}} 方法。 + - : 返回一个代表给定对象的字符串，基于指定的*基数*（radix）。重写了 {{jsxref("Object.prototype.toString()")}} 方法。 - {{jsxref("Number.prototype.valueOf()")}} - - : 返回指定对象的原始值。覆盖 {{jsxref("Object.prototype.valueOf()")}} 方法。 + - : 返回指定对象的原始值。重写了 {{jsxref("Object.prototype.valueOf()")}} 方法。 ## 示例 @@ -179,7 +195,7 @@ const biggestInt = Number.MAX_SAFE_INTEGER; // (2**53 - 1) => 9007199254740991 const smallestInt = Number.MIN_SAFE_INTEGER; // -(2**53 - 1) => -9007199254740991 ``` -当解析已序列化为 JSON 的数据时，如果 JSON 解析器将它们强制为 `Number` 类型时，超出此范围的整数值可能会被损坏。 +当解析已序列化为 JSON 的数据时，如果 JSON 解析器将它们强制为 `Number` 类型，超出此范围的整数值可能会被损坏。 一个可能的变通办法是使用 {{jsxref("String")}}。 @@ -226,6 +242,6 @@ Number("-Infinity"); // -Infinity - [在 `core-js` 中现代 `Number` 行为的 Polyfill（支持二进制和八进制字面量）](https://github.com/zloirock/core-js#ecmascript-number) - {{jsxref("NaN")}} -- [算术操作符](/zh-CN/docs/Web/JavaScript/Reference/Operators#arithmetic_operators) -- {{jsxref("Math")}} 全局对象 -- 任意精度的整数：{{jsxref("BigInt")}} +- [算术运算符](/zh-CN/docs/Web/JavaScript/Reference/Operators#算术运算符) +- {{jsxref("Math")}} +- {{jsxref("BigInt")}} From 0b1bad6c56fdffdfacf137d91917ff2f6b6ee5e8 Mon Sep 17 00:00:00 2001 From: MikeCAT Date: Sun, 10 Sep 2023 08:35:42 +0900 Subject: [PATCH 253/600] Translate USBDevice --- .../web/api/usbdevice/claiminterface/index.md | 45 ++++++++++ files/ja/web/api/usbdevice/clearhalt/index.md | 58 ++++++++++++ files/ja/web/api/usbdevice/close/index.md | 32 +++++++ .../web/api/usbdevice/configuration/index.md | 34 +++++++ .../web/api/usbdevice/configurations/index.md | 22 +++++ .../api/usbdevice/controltransferin/index.md | 48 ++++++++++ .../api/usbdevice/controltransferout/index.md | 48 ++++++++++ .../ja/web/api/usbdevice/deviceclass/index.md | 22 +++++ .../web/api/usbdevice/deviceprotocol/index.md | 22 +++++ .../web/api/usbdevice/devicesubclass/index.md | 22 +++++ .../api/usbdevice/deviceversionmajor/index.md | 22 +++++ .../api/usbdevice/deviceversionminor/index.md | 22 +++++ .../usbdevice/deviceversionsubminor/index.md | 22 +++++ files/ja/web/api/usbdevice/forget/index.md | 32 +++++++ files/ja/web/api/usbdevice/index.md | 88 +++++++++++++++++++ .../usbdevice/isochronoustransferin/index.md | 35 ++++++++ .../usbdevice/isochronoustransferout/index.md | 37 ++++++++ .../api/usbdevice/manufacturername/index.md | 22 +++++ files/ja/web/api/usbdevice/open/index.md | 32 +++++++ files/ja/web/api/usbdevice/opened/index.md | 48 ++++++++++ files/ja/web/api/usbdevice/productid/index.md | 22 +++++ .../ja/web/api/usbdevice/productname/index.md | 22 +++++ .../api/usbdevice/releaseinterface/index.md | 33 +++++++ files/ja/web/api/usbdevice/reset/index.md | 32 +++++++ .../selectalternateinterface/index.md | 35 ++++++++ .../usbdevice/selectconfiguration/index.md | 33 +++++++ .../web/api/usbdevice/serialnumber/index.md | 22 +++++ .../ja/web/api/usbdevice/transferin/index.md | 35 ++++++++ .../ja/web/api/usbdevice/transferout/index.md | 35 ++++++++ .../api/usbdevice/usbversionmajor/index.md | 22 +++++ .../api/usbdevice/usbversionminor/index.md | 22 +++++ .../api/usbdevice/usbversionsubminor/index.md | 22 +++++ files/ja/web/api/usbdevice/vendorid/index.md | 22 +++++ 33 files changed, 1070 insertions(+) create mode 100644 files/ja/web/api/usbdevice/claiminterface/index.md create mode 100644 files/ja/web/api/usbdevice/clearhalt/index.md create mode 100644 files/ja/web/api/usbdevice/close/index.md create mode 100644 files/ja/web/api/usbdevice/configuration/index.md create mode 100644 files/ja/web/api/usbdevice/configurations/index.md create mode 100644 files/ja/web/api/usbdevice/controltransferin/index.md create mode 100644 files/ja/web/api/usbdevice/controltransferout/index.md create mode 100644 files/ja/web/api/usbdevice/deviceclass/index.md create mode 100644 files/ja/web/api/usbdevice/deviceprotocol/index.md create mode 100644 files/ja/web/api/usbdevice/devicesubclass/index.md create mode 100644 files/ja/web/api/usbdevice/deviceversionmajor/index.md create mode 100644 files/ja/web/api/usbdevice/deviceversionminor/index.md create mode 100644 files/ja/web/api/usbdevice/deviceversionsubminor/index.md create mode 100644 files/ja/web/api/usbdevice/forget/index.md create mode 100644 files/ja/web/api/usbdevice/index.md create mode 100644 files/ja/web/api/usbdevice/isochronoustransferin/index.md create mode 100644 files/ja/web/api/usbdevice/isochronoustransferout/index.md create mode 100644 files/ja/web/api/usbdevice/manufacturername/index.md create mode 100644 files/ja/web/api/usbdevice/open/index.md create mode 100644 files/ja/web/api/usbdevice/opened/index.md create mode 100644 files/ja/web/api/usbdevice/productid/index.md create mode 100644 files/ja/web/api/usbdevice/productname/index.md create mode 100644 files/ja/web/api/usbdevice/releaseinterface/index.md create mode 100644 files/ja/web/api/usbdevice/reset/index.md create mode 100644 files/ja/web/api/usbdevice/selectalternateinterface/index.md create mode 100644 files/ja/web/api/usbdevice/selectconfiguration/index.md create mode 100644 files/ja/web/api/usbdevice/serialnumber/index.md create mode 100644 files/ja/web/api/usbdevice/transferin/index.md create mode 100644 files/ja/web/api/usbdevice/transferout/index.md create mode 100644 files/ja/web/api/usbdevice/usbversionmajor/index.md create mode 100644 files/ja/web/api/usbdevice/usbversionminor/index.md create mode 100644 files/ja/web/api/usbdevice/usbversionsubminor/index.md create mode 100644 files/ja/web/api/usbdevice/vendorid/index.md diff --git a/files/ja/web/api/usbdevice/claiminterface/index.md b/files/ja/web/api/usbdevice/claiminterface/index.md new file mode 100644 index 00000000000000..e1dfac16eec3e0 --- /dev/null +++ b/files/ja/web/api/usbdevice/claiminterface/index.md @@ -0,0 +1,45 @@ +--- +title: "USBDevice: claimInterface() メソッド" +slug: Web/API/USBDevice/claimInterface +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{APIRef("WebUSB API")}}{{SeeCompatTable}} + +{{domxref("USBDevice")}} インターフェイスの **`claimInterface()`** メソッドは、要求したインターフェイスの排他アクセスを獲得したら解決する {{jsxref("Promise")}} を返します。 + +## 構文 + +```js-nolint +claimInterface(interfaceNumber) +``` + +### 引数 + +- `interfaceNumber` + - : デバイスが対応しているインターフェイスのうち 1 個のインデックスです。インターフェイスはデバイス固有です。 + +### 返値 + +{{jsxref("promise")}} です。 + +## 例 + +以下の例では、USB デバイスへの接続時に使用される `claimInterface()` を示します。 + +```js +async function connectDevice(usbDevice) { + await usbDevice.open(); + if (usbDevice.configuration === null) await usbDevice.selectConfiguration(1); + await usbDevice.claimInterface(0); +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/clearhalt/index.md b/files/ja/web/api/usbdevice/clearhalt/index.md new file mode 100644 index 00000000000000..6e685eaf9a4a42 --- /dev/null +++ b/files/ja/web/api/usbdevice/clearhalt/index.md @@ -0,0 +1,58 @@ +--- +title: "USBDevice: clearHalt() メソッド" +slug: Web/API/USBDevice/clearHalt +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{APIRef("WebUSB API")}}{{SeeCompatTable}} + +{{domxref("USBDevice")}} インターフェイスの **`clearHalt()`** メソッドは、停止状態のクリアが完了したら解決する {{jsxref("Promise")}} を返します。停止状態はデバイスへ、またはデバイスからのデータ転送が `'stall'` 状態であるときであり、ウェブページ (USB の用語では _ホスト_ システム) がこの状態をクリアする必要があります。詳細を参照してください。 + +## 構文 + +```js-nolint +clearHalt(direction, endpointNumber) +``` + +### 引数 + +- `direction` + - : デバイスの入力または出力のどっちをクリアするかを表します。有効な値は `'in'` および `'out'` です。 +- `endpointNumber` + - : クリアするエンドポイントの番号を表します。無効なエンドポイントが指定された場合は、プロミスは拒否されます。 + +### 返値 + +{{jsxref("promise")}} です。 + +## 例 + +以下の例は、データ転送の結果の `'stall'` 状態をチェックしてクリアする方法を示します。 + +> **メモ:** USB デバイスにどのようなデータを渡すことができ、それをどのように渡すかは、デバイスに固有で独特です。 + +```js +while (true) { + let result = await data.transferIn(1, 6); + + if (result.data && result.data.byteLength === 6) { + console.log(`チャンネル 1: ${result.data.getUint16(0)}`); + console.log(`チャンネル 2: ${result.data.getUint16(2)}`); + console.log(`チャンネル 5: ${result.data.getUint16(4)}`); + } + + if (result.status === "stall") { + console.warn("エンドポイントがストールしました。クリアします。"); + await device.clearHalt("in", 1); + } +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/close/index.md b/files/ja/web/api/usbdevice/close/index.md new file mode 100644 index 00000000000000..e369a77c28e873 --- /dev/null +++ b/files/ja/web/api/usbdevice/close/index.md @@ -0,0 +1,32 @@ +--- +title: "USBDevice: close() メソッド" +slug: Web/API/USBDevice/close +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{APIRef("WebUSB API")}}{{SeeCompatTable}} + +{{domxref("USBDevice")}} インターフェイスの **`close()`** メソッドは、すべての開いているインターフェイスが解放され、デバイスのセッションが終了したら解決する {{jsxref("Promise")}} を返します。 + +## 構文 + +```js-nolint +close() +``` + +### 引数 + +なし + +### 返値 + +{{jsxref("Promise")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/configuration/index.md b/files/ja/web/api/usbdevice/configuration/index.md new file mode 100644 index 00000000000000..304fae8559f8ef --- /dev/null +++ b/files/ja/web/api/usbdevice/configuration/index.md @@ -0,0 +1,34 @@ +--- +title: "USBDevice: configuration プロパティ" +slug: Web/API/USBDevice/configuration +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{SeeCompatTable}}{{APIRef("WebUSB API")}} + +{{domxref("USBDevice")}} インターフェイスの読み取り専用プロパティ **`configuration`** は、ペアリングした USB デバイスの現在選択されているインターフェイスを表す {{domxref("USBConfiguration")}} オブジェクトを返します。 + +## 値 + +{{domxref("USBConfiguration")}} オブジェクトです。 + +## 例 + +以下の例では、インターフェイスを要求する前にコンフィギュレーションを選択するため、`USBConfiguration` プロパティの存在を確認するためにこのプロパティを使用しています。 + +```js +async function connectDevice(usbDevice) { + await usbDevice.open(); + if (usbDevice.configuration === null) await usbDevice.selectConfiguration(1); + await usbDevice.claimInterface(0); +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/configurations/index.md b/files/ja/web/api/usbdevice/configurations/index.md new file mode 100644 index 00000000000000..526ebb1f692456 --- /dev/null +++ b/files/ja/web/api/usbdevice/configurations/index.md @@ -0,0 +1,22 @@ +--- +title: "USBDevice: configurations プロパティ" +slug: Web/API/USBDevice/configurations +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{SeeCompatTable}}{{APIRef("WebUSB API")}} + +{{domxref("USBDevice")}} インターフェイスの読み取り専用プロパティ **`configurations`** は、ペアリングした USB デバイスの制御用のデバイス固有のインターフェイスの {{jsxref("array")}} を返します。 + +## 値 + +{{domxref("USBConfiguration")}} オブジェクトの {{jsxref("array")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/controltransferin/index.md b/files/ja/web/api/usbdevice/controltransferin/index.md new file mode 100644 index 00000000000000..c66aeb4253a309 --- /dev/null +++ b/files/ja/web/api/usbdevice/controltransferin/index.md @@ -0,0 +1,48 @@ +--- +title: "USBDevice: controlTransferIn() メソッド" +slug: Web/API/USBDevice/controlTransferIn +l10n: + sourceCommit: df1b34262b09c40014b9c18ed41edcd85a37f4df +--- + +{{APIRef("WebUSB API")}}{{SeeCompatTable}} + +{{domxref("USBDevice")}} インターフェイスの **`controlTransferIn()`** メソッドは、コマンドまたは状態の操作の要求の USB デバイスへの送信 (USB デバイスでの受信) が完了したら {{domxref("USBInTransferResult")}} で解決する {{jsxref("Promise")}} を返します。 + +## 構文 + +```js-nolint +controlTransferIn(setup, length) +``` + +### 引数 + +- `setup` + + - : オプションを設定するオブジェクトです。以下のオプションが使用可能です。 + + - `requestType` + - : 転送の性質を示します。`"standard"` (すべての USB デバイスに共通)、`"class"` (業界標準のクラスまたはデバイスに共通)、`"vendor"` のいずれかの値でなければなりません。 + - `recipient` + - : デバイス上の転送の対象を指定します。`"device"`、`"interface"`、`"endpoint"`、`"other"` のいずれかです。 + - `request` + - : ベンダー固有のコマンドです。 + - `value` + - : ベンダー固有のリクエストパラメーターです。 + - `index` + - : 宛先のインターフェイス番号です。 + +- `length` + - : デバイスから読み取る最大のバイト数です。実際のデータは、解決したプロミス内の {{domxref("USBInTransferResult")}} に格納されます。 + +### 返値 + +{{domxref("USBInTransferResult")}} で解決する {{jsxref("promise")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/controltransferout/index.md b/files/ja/web/api/usbdevice/controltransferout/index.md new file mode 100644 index 00000000000000..22c0dfce69e9ce --- /dev/null +++ b/files/ja/web/api/usbdevice/controltransferout/index.md @@ -0,0 +1,48 @@ +--- +title: "USBDevice: controlTransferOut() メソッド" +slug: Web/API/USBDevice/controlTransferOut +l10n: + sourceCommit: 6edc3d2f9ee4296d467b0e2faa3e720fbe6a07e0 +--- + +{{APIRef("WebUSB API")}}{{SeeCompatTable}} + +{{domxref("USBDevice")}} インターフェイスの **`controlTransferOut()`** メソッドは、コマンドまたは状態の操作の USB デバイスからの転送が完了したら {{domxref("USBOutTransferResult")}} で解決する {{jsxref("Promise")}} を返します。 + +## 構文 + +```js-nolint +controlTransferOut(setup, data) +``` + +### 引数 + +- `setup` + + - : オプションを設定するオブジェクトです。以下のオプションが使用可能です。 + + - `requestType` + - : 転送の性質を示します。`"standard"` (すべての USB デバイスに共通)、`"class"` (業界標準のクラスまたはデバイスに共通)、`"vendor"` のいずれかの値でなければなりません。 + - `recipient` + - : デバイス上の転送の対象を指定します。`"device"`、`"interface"`、`"endpoint"`、`"other"` のいずれかです。 + - `request` + - : ベンダー固有のコマンドです。 + - `value` + - : ベンダー固有のリクエストパラメーターです。 + - `index` + - : 宛先のインターフェイス番号です。 + +- `data` + - : デバイスに転送されるデータが格納された {{jsxref("TypedArray")}} です。すべてのコマンドで `data` が必要なわけではありません。引数 `value` だけでデータを送ることができるコマンドもあります。特定の要求に何が必要かは、デバイスを確認してください。 + +### 返値 + +{{domxref("USBOutTransferResult")}} で解決する {{jsxref("Promise")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/deviceclass/index.md b/files/ja/web/api/usbdevice/deviceclass/index.md new file mode 100644 index 00000000000000..993e30d7cd7905 --- /dev/null +++ b/files/ja/web/api/usbdevice/deviceclass/index.md @@ -0,0 +1,22 @@ +--- +title: "USBDevice: deviceClass プロパティ" +slug: Web/API/USBDevice/deviceClass +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{SeeCompatTable}}{{APIRef("WebUSB API")}} + +{{domxref("USBDevice")}} インターフェイスの読み取り専用プロパティ **`deviceClass`** は、デバイスとともに動く USB ドライバーのロード用に USB デバイスを特定する 3 個のプロパティのうちの 1 個です。他の 2 個のプロパティは `USBDevice.deviceSubclass` と `USBDevice.deviceProtocol` です。 + +## 値 + +数値です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/deviceprotocol/index.md b/files/ja/web/api/usbdevice/deviceprotocol/index.md new file mode 100644 index 00000000000000..e866c0945b2bf0 --- /dev/null +++ b/files/ja/web/api/usbdevice/deviceprotocol/index.md @@ -0,0 +1,22 @@ +--- +title: "USBDevice: deviceProtocol プロパティ" +slug: Web/API/USBDevice/deviceProtocol +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{SeeCompatTable}}{{APIRef("WebUSB API")}} + +{{domxref("USBDevice")}} インターフェイスの読み取り専用プロパティ **`deviceProtocol`** は、デバイスとともに動く USB ドライバーのロード用に USB デバイスを特定する 3 個のプロパティのうちの 1 個です。他の 2 個のプロパティは `USBDevice.deviceClass` と `USBDevice.deviceSubclass` です。 + +## 値 + +数値です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/devicesubclass/index.md b/files/ja/web/api/usbdevice/devicesubclass/index.md new file mode 100644 index 00000000000000..eec5b584a0a59c --- /dev/null +++ b/files/ja/web/api/usbdevice/devicesubclass/index.md @@ -0,0 +1,22 @@ +--- +title: "USBDevice: deviceSubclass プロパティ" +slug: Web/API/USBDevice/deviceSubclass +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{SeeCompatTable}}{{APIRef("WebUSB API")}} + +{{domxref("USBDevice")}} インターフェイスの読み取り専用プロパティ **`deviceSubclass`** は、デバイスとともに動く USB ドライバーのロード用に USB デバイスを特定する 3 個のプロパティのうちの 1 個です。他の 2 個のプロパティは `USBDevice.deviceClass` と `USBDevice.deviceProtocol` です。 + +## 値 + +数値です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/deviceversionmajor/index.md b/files/ja/web/api/usbdevice/deviceversionmajor/index.md new file mode 100644 index 00000000000000..079b50c6039dbf --- /dev/null +++ b/files/ja/web/api/usbdevice/deviceversionmajor/index.md @@ -0,0 +1,22 @@ +--- +title: "USBDevice: deviceVersionMajor プロパティ" +slug: Web/API/USBDevice/deviceVersionMajor +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{SeeCompatTable}}{{APIRef("WebUSB API")}} + +{{domxref("USBDevice")}} インターフェイスの読み取り専用プロパティ **`deviceVersionMajor`** は、セマンティックバージョニングスキームによるデバイスのメジャーバージョン番号です。 + +## 値 + +数値です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/deviceversionminor/index.md b/files/ja/web/api/usbdevice/deviceversionminor/index.md new file mode 100644 index 00000000000000..de453d78073527 --- /dev/null +++ b/files/ja/web/api/usbdevice/deviceversionminor/index.md @@ -0,0 +1,22 @@ +--- +title: "USBDevice: deviceVersionMinor プロパティ" +slug: Web/API/USBDevice/deviceVersionMinor +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{SeeCompatTable}}{{APIRef("WebUSB API")}} + +{{domxref("USBDevice")}} インターフェイスの読み取り専用プロパティ **`deviceVersionMinor`** は、セマンティックバージョニングスキームによるデバイスのマイナーバージョン番号です。 + +## 値 + +数値です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/deviceversionsubminor/index.md b/files/ja/web/api/usbdevice/deviceversionsubminor/index.md new file mode 100644 index 00000000000000..8ad9dee39b3dc6 --- /dev/null +++ b/files/ja/web/api/usbdevice/deviceversionsubminor/index.md @@ -0,0 +1,22 @@ +--- +title: "USBDevice: deviceVersionSubminor プロパティ" +slug: Web/API/USBDevice/deviceVersionSubminor +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{SeeCompatTable}}{{APIRef("WebUSB API")}} + +{{domxref("USBDevice")}} インターフェイスの読み取り専用プロパティ **`deviceVersionSubminor`** は、セマンティックバージョニングスキームによるデバイスのパッチバージョン番号です。 + +## 値 + +数値です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/forget/index.md b/files/ja/web/api/usbdevice/forget/index.md new file mode 100644 index 00000000000000..0196afa2ba0532 --- /dev/null +++ b/files/ja/web/api/usbdevice/forget/index.md @@ -0,0 +1,32 @@ +--- +title: "USBDevice: forget() メソッド" +slug: Web/API/USBDevice/forget +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{APIRef("WebUSB API")}}{{SeeCompatTable}} + +{{domxref("USBDevice")}} インターフェイスの **`forget()`** メソッドは、すべての実行中の操作が中止され、すべての開いているインターフェイスが解放され、デバイスのセッションが終了し、許可をリセットしたら解決する {{jsxref("Promise")}} を返します。 + +## 構文 + +```js-nolint +forget() +``` + +### 引数 + +なし + +### 返値 + +デバイスのアクセス許可を取り消したら `undefined` で解決する {{jsxref("Promise")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/index.md b/files/ja/web/api/usbdevice/index.md new file mode 100644 index 00000000000000..fb923aeb08ba52 --- /dev/null +++ b/files/ja/web/api/usbdevice/index.md @@ -0,0 +1,88 @@ +--- +title: USBDevice +slug: Web/API/USBDevice +l10n: + sourceCommit: 3ca86db64959ed9dc6c8021dc3eb89e82a6628c7 +--- + +{{SeeCompatTable}}{{APIRef("WebUSB API")}} + +[WebUSB API](/ja/docs/Web/API/WebUSB_API) の **`USBDevice`** インターフェイスは、ペアリングした USB デバイスのメタデータへのアクセスと、デバイスの制御用のメソッドを提供します。 + +## インスタンスプロパティ + +- {{domxref("USBDevice.configuration")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : ペアリングした USB デバイスの現在選択されているインターフェイスを表す {{domxref("USBConfiguration")}} オブジェクトです。 +- {{domxref("USBDevice.configurations")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : ペアリングした USB デバイスの制御用のデバイス固有のインターフェイスの {{jsxref("array")}} です。 +- {{domxref("USBDevice.deviceClass")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : デバイスとともに動く USB ドライバーのロード用に USB デバイスを特定する 3 個のプロパティのうちの 1 個です。他の 2 個のプロパティは `USBDevice.deviceSubclass` と `USBDevice.deviceProtocol` です。 +- {{domxref("USBDevice.deviceProtocol")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : デバイスとともに動く USB ドライバーのロード用に USB デバイスを特定する 3 個のプロパティのうちの 1 個です。他の 2 個のプロパティは `USBDevice.deviceClass` と `USBDevice.deviceSubclass` です。 +- {{domxref("USBDevice.deviceSubclass")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : デバイスとともに動く USB ドライバーのロード用に USB デバイスを特定する 3 個のプロパティのうちの 1 個です。他の 2 個のプロパティは `USBDevice.deviceClass` と `USBDevice.deviceProtocol` です。 +- {{domxref("USBDevice.deviceVersionMajor")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : セマンティックバージョニングスキームによるデバイスのメジャーバージョン番号です。 +- {{domxref("USBDevice.deviceVersionMinor")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : セマンティックバージョニングスキームによるデバイスのマイナーバージョン番号です。 +- {{domxref("USBDevice.deviceVersionSubminor")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : セマンティックバージョニングスキームによるデバイスのパッチバージョン番号です。 +- {{domxref("USBDevice.manufacturerName")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : この USB デバイスを製造した組織の名前です。 +- {{domxref("USBDevice.opened")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : ペアリングした USB デバイスとのセッションが開始しているかを表します。 +- {{domxref("USBDevice.productId")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : 製造元が定義する、USB デバイスを識別するコードです。 +- {{domxref("USBDevice.productName")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : 製造元が定義する、USB デバイスを識別する名前です。 +- {{domxref("USBDevice.serialNumber")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : 製造元が定義する、特定の USB デバイスのシリアル番号です。 +- {{domxref("USBDevice.usbVersionMajor")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : デバイスが対応している USB のプロトコルバージョンを表す 3 個のプロパティのうちの 1個です。他の 2 個のプロパティは `USBDevice.usbVersionMinor` と `USBDevice.usbVersionSubminor` です。 +- {{domxref("USBDevice.usbVersionMinor")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : デバイスが対応している USB のプロトコルバージョンを表す 3 個のプロパティのうちの 1個です。他の 2 個のプロパティは `USBDevice.usbVersionMajor` と `USBDevice.usbVersionSubminor` です。 +- {{domxref("USBDevice.usbVersionSubminor")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : デバイスが対応している USB のプロトコルバージョンを表す 3 個のプロパティのうちの 1個です。他の 2 個のプロパティは `USBDevice.usbVersionMajor` と `USBDevice.usbVersionMinor` です。 +- {{domxref("USBDevice.vendorId")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : usb.org で割り当てられた公式なベンダー ID です。 + +## インスタンスメソッド + +- {{domxref("USBDevice.claimInterface()")}} {{Experimental_Inline}} + - : 要求したインターフェイスの排他アクセスを獲得したら解決する {{jsxref("Promise")}} を返します。 +- {{domxref("USBDevice.clearHalt()")}} {{Experimental_Inline}} + - : 停止状態のクリアが完了したら解決する {{jsxref("Promise")}} を返します。 +- {{domxref("USBDevice.controlTransferIn()")}} {{Experimental_Inline}} + - : コマンドまたは状態の操作の USB デバイスへの転送が完了したら {{domxref("USBInTransferResult")}} で解決する {{jsxref("Promise")}} を返します。 +- {{domxref("USBDevice.controlTransferOut()")}} {{Experimental_Inline}} + - : コマンドまたは状態の操作の USB デバイスからの転送が完了したら {{domxref("USBOutTransferResult")}} で解決する {{jsxref("Promise")}} を返します。 +- {{domxref("USBDevice.close()")}} {{Experimental_Inline}} + - : すべての開いているインターフェイスが解放され、デバイスのセッションが終了したら解決する {{jsxref("Promise")}} を返します。 +- {{domxref("USBDevice.forget()")}} {{Experimental_Inline}} + - : すべての開いているインターフェイスが解放され、デバイスのセッションが終了し、許可をリセットしたら解決する {{jsxref("Promise")}} を返します。 +- {{domxref("USBDevice.isochronousTransferIn()")}} {{Experimental_Inline}} + - : 時間が重要な情報の USB デバイスへの転送が完了したら {{domxref("USBIsochronousInTransferResult")}} で解決する {{jsxref("Promise")}} を返します。 +- {{domxref("USBDevice.isochronousTransferOut()")}} {{Experimental_Inline}} + - : 時間が重要な情報の USB デバイスからの転送が完了したら {{domxref("USBIsochronousOutTransferResult")}} で解決する {{jsxref("Promise")}} を返します。 +- {{domxref("USBDevice.open()")}} {{Experimental_Inline}} + - : デバイスのセッションが開始したら解決する {{jsxref("Promise")}} を返します。 +- {{domxref("USBDevice.releaseInterface()")}} {{Experimental_Inline}} + - : 要求済みのインターフェイスが排他アクセスから解放されたら解決する {{jsxref("Promise")}} を返します。 +- {{domxref("USBDevice.reset()")}} {{Experimental_Inline}} + - : デバイスがリセットされ、アプリケーションによる操作がすべてキャンセルされ、それらのプロミスが拒否されたら解決する {{jsxref("Promise")}} を返します。 +- {{domxref("USBDevice.selectAlternateInterface()")}} {{Experimental_Inline}} + - : 指定のオルタナティブエンドポイントが選択されたら解決する {{jsxref("Promise")}} を返します。 +- {{domxref("USBDevice.selectConfiguration()")}} {{Experimental_Inline}} + - : 指定のコンフィギュレーションが選択されたら解決する {{jsxref("Promise")}} を返します。 +- {{domxref("USBDevice.transferIn()")}} {{Experimental_Inline}} + - : USB デバイスからバルクまたはインタラプトデータを受信したら {{domxref("USBInTransferResult")}} で解決する {{jsxref("Promise")}} を返します。 +- {{domxref("USBDevice.transferOut()")}} {{Experimental_Inline}} + - : USB デバイスにバルクまたはインタラプトデータを送信したら {{domxref("USBOutTransferResult")}} で解決する {{jsxref("Promise")}} を返します。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/isochronoustransferin/index.md b/files/ja/web/api/usbdevice/isochronoustransferin/index.md new file mode 100644 index 00000000000000..1db94a8c45209a --- /dev/null +++ b/files/ja/web/api/usbdevice/isochronoustransferin/index.md @@ -0,0 +1,35 @@ +--- +title: "USBDevice: isochronousTransferIn() メソッド" +slug: Web/API/USBDevice/isochronousTransferIn +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{APIRef("WebUSB API")}}{{SeeCompatTable}} + +{{domxref("USBDevice")}} インターフェイスの **`isochronousTransferIn()`** メソッドは、時間が重要な情報の USB デバイスへの送信 (USB デバイスによる受信) が完了したら {{domxref("USBIsochronousInTransferResult")}} で解決する {{jsxref("Promise")}} を返します。 + +## 構文 + +```js-nolint +isochronousTransferIn(endpointNumber, packetLengths) +``` + +### 引数 + +- `endpointNumber` + - : デバイス固有のエンドポイント (バッファー) の番号です。 +- `packetLengths` + - : 受信するパケットの長さの配列です。 + +### 返値 + +{{domxref("USBIsochronousInTransferResult")}} で解決する {{jsxref("Promise")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/isochronoustransferout/index.md b/files/ja/web/api/usbdevice/isochronoustransferout/index.md new file mode 100644 index 00000000000000..2f6cf3294a6c1c --- /dev/null +++ b/files/ja/web/api/usbdevice/isochronoustransferout/index.md @@ -0,0 +1,37 @@ +--- +title: "USBDevice: isochronousTransferOut() メソッド" +slug: Web/API/USBDevice/isochronousTransferOut +l10n: + sourceCommit: 2d56200e7f273405a9f97226c503787dfb020d44 +--- + +{{APIRef("WebUSB API")}}{{SeeCompatTable}} + +{{domxref("USBDevice")}} インターフェイスの **`isochronousTransferOut()`** メソッドは、時間が重要な情報の USB デバイスからの転送が完了したら {{domxref("USBIsochronousOutTransferResult")}} で解決する {{jsxref("Promise")}} を返します。 + +## 構文 + +```js-nolint +isochronousTransferOut(endpointNumber, data, packetLengths) +``` + +### 引数 + +- `endpointNumber` + - : デバイス固有のエンドポイント (バッファー) の番号です。 +- `data` + - : デバイスに送信するデータが格納された {{jsxref("TypedArray")}} です。 +- `packetLengths` + - : 送信するパケットの長さの配列です。 + +### 返値 + +{{domxref("USBIsochronousOutTransferResult")}} で解決する {{jsxref("Promise")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/manufacturername/index.md b/files/ja/web/api/usbdevice/manufacturername/index.md new file mode 100644 index 00000000000000..5ec9319bb85858 --- /dev/null +++ b/files/ja/web/api/usbdevice/manufacturername/index.md @@ -0,0 +1,22 @@ +--- +title: "USBDevice: manufacturerName プロパティ" +slug: Web/API/USBDevice/manufacturerName +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{SeeCompatTable}}{{APIRef("WebUSB API")}} + +{{domxref("USBDevice")}} インターフェイスの読み取り専用プロパティ **`manufacturerName`** は、この USB デバイスを製造した組織の名前です。 + +## 値 + +文字列です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/open/index.md b/files/ja/web/api/usbdevice/open/index.md new file mode 100644 index 00000000000000..0e9b3759232a72 --- /dev/null +++ b/files/ja/web/api/usbdevice/open/index.md @@ -0,0 +1,32 @@ +--- +title: "USBDevice: open() メソッド" +slug: Web/API/USBDevice/open +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{APIRef("WebUSB API")}}{{SeeCompatTable}} + +{{domxref("USBDevice")}} インターフェイスの **`open()`** メソッドは、デバイスのセッションが開始したら解決する {{jsxref("Promise")}} を返します。 + +## 構文 + +```js-nolint +open() +``` + +### 引数 + +なし + +### 返値 + +{{jsxref("Promise")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/opened/index.md b/files/ja/web/api/usbdevice/opened/index.md new file mode 100644 index 00000000000000..7bf3295bad7501 --- /dev/null +++ b/files/ja/web/api/usbdevice/opened/index.md @@ -0,0 +1,48 @@ +--- +title: "USBDevice: opened プロパティ" +slug: Web/API/USBDevice/opened +l10n: + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc +--- + +{{SeeCompatTable}}{{APIRef("WebUSB API")}} + +{{domxref("USBDevice")}} インターフェイスの読み取り専用プロパティ **`opened`** は、ペアリングした USB デバイスとのセッションが開始しているかを表します。デバイスは、ウェブページから制御する前に開かれなければなりません。 + +## 値 + +{{jsxref("boolean")}} です。 + +## 例 + +この例では、複数の色がある LED を搭載した仮想の USB デバイスを扱います。この例は、{{domxref("USBDevice.controlTransferOut")}} を呼び出して LED の色を設定する前にデバイスが開かれているかを確認する方法を示します。 + +> **メモ:** USB デバイスにどのようなデータを渡すか、そしてどのようにそれを渡すかは、各デバイスに固有で独特です。 + +```js +async function setDeviceColor(usbDevice, r, g, b) { + if (device.opened) { + // この仮想 USB デバイスに渡すデータは Uint8Array でなければならない + const payload = new Uint8Array([r, g, b]); + + await usbDevice.controlTransferOut( + { + requestType: "vendor", + recipient: "device", + request: 1, + value: 0, + index: 0, + }, + payload, + ); + } +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/productid/index.md b/files/ja/web/api/usbdevice/productid/index.md new file mode 100644 index 00000000000000..bfb40e95b82a6e --- /dev/null +++ b/files/ja/web/api/usbdevice/productid/index.md @@ -0,0 +1,22 @@ +--- +title: "USBDevice: productId プロパティ" +slug: Web/API/USBDevice/productID +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{SeeCompatTable}}{{APIRef("WebUSB API")}} + +{{domxref("USBDevice")}} インターフェイスの読み取り専用プロパティ **`productId`** は、製造元が定義する、USB デバイスを識別するコードです。 + +## 値 + +製造元が定義する、USB デバイスを識別するコードです。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/productname/index.md b/files/ja/web/api/usbdevice/productname/index.md new file mode 100644 index 00000000000000..48a4b0fb150cef --- /dev/null +++ b/files/ja/web/api/usbdevice/productname/index.md @@ -0,0 +1,22 @@ +--- +title: "USBDevice: productName プロパティ" +slug: Web/API/USBDevice/productName +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{SeeCompatTable}}{{APIRef("WebUSB API")}} + +{{domxref("USBDevice")}} インターフェイスの読み取り専用プロパティ **`productName`** は、製造元が定義する、USB デバイスを識別する名前です。 + +## 値 + +製造元が定義する、USB デバイスを識別する名前です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/releaseinterface/index.md b/files/ja/web/api/usbdevice/releaseinterface/index.md new file mode 100644 index 00000000000000..db718b99bb93ef --- /dev/null +++ b/files/ja/web/api/usbdevice/releaseinterface/index.md @@ -0,0 +1,33 @@ +--- +title: "USBDevice: releaseInterface() メソッド" +slug: Web/API/USBDevice/releaseInterface +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{APIRef("WebUSB API")}}{{SeeCompatTable}} + +{{domxref("USBDevice")}} インターフェイスの **`releaseInterface()`** メソッドは、要求済みのインターフェイスが排他アクセスから解放されたら解決する {{jsxref("Promise")}} を返します。 + +## 構文 + +```js-nolint +releaseInterface(interfaceNumber) +``` + +### 引数 + +- `interfaceNumber` + - : 現在要求済みのインターフェイスのデバイス固有のインデックスです。 + +### 返値 + +{{jsxref("Promise")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/reset/index.md b/files/ja/web/api/usbdevice/reset/index.md new file mode 100644 index 00000000000000..3f2fcca97a4645 --- /dev/null +++ b/files/ja/web/api/usbdevice/reset/index.md @@ -0,0 +1,32 @@ +--- +title: "USBDevice: reset() メソッド" +slug: Web/API/USBDevice/reset +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{APIRef("WebUSB API")}}{{SeeCompatTable}} + +{{domxref("USBDevice")}} インターフェイスの **`reset()`** メソッドは、デバイスがリセットされ、アプリケーションによる操作がすべてキャンセルされ、それらのプロミスが拒否されたら解決する {{jsxref("Promise")}} を返します。 + +## 構文 + +```js-nolint +reset() +``` + +### 引数 + +なし + +### 返値 + +{{jsxref("Promise")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/selectalternateinterface/index.md b/files/ja/web/api/usbdevice/selectalternateinterface/index.md new file mode 100644 index 00000000000000..558a7c14e5fa82 --- /dev/null +++ b/files/ja/web/api/usbdevice/selectalternateinterface/index.md @@ -0,0 +1,35 @@ +--- +title: "USBDevice: selectAlternateInterface() メソッド" +slug: Web/API/USBDevice/selectAlternateInterface +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{APIRef("WebUSB API")}}{{SeeCompatTable}} + +{{domxref("USBDevice")}} インターフェイスの **`selectAlternateInterface()`** メソッドは、指定のオルタナティブエンドポイントが選択されたら解決する {{jsxref("Promise")}} を返します。 + +## 構文 + +```js-nolint +selectAlternateInterface(interfaceNumber, alternateSetting) +``` + +### 引数 + +- `interfaceNumber` + - : デバイスが対応しているインターフェイスのうちの 1 個のインデックスです。インターフェイスはデバイス固有です。 +- `alternateSetting` + - : 選択されたインターフェイスのコンフィグレーションです。 + +### 返値 + +{{jsxref("Promise")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/selectconfiguration/index.md b/files/ja/web/api/usbdevice/selectconfiguration/index.md new file mode 100644 index 00000000000000..fc1426530a85fe --- /dev/null +++ b/files/ja/web/api/usbdevice/selectconfiguration/index.md @@ -0,0 +1,33 @@ +--- +title: "USBDevice: selectConfiguration() メソッド" +slug: Web/API/USBDevice/selectConfiguration +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{APIRef("WebUSB API")}}{{SeeCompatTable}} + +{{domxref("USBDevice")}} インターフェイスの **`selectConfiguration()`** メソッドは、指定のコンフィギュレーションが選択されたら解決する {{jsxref("Promise")}} を返します。 + +## 構文 + +```js-nolint +selectConfiguration(configurationValue) +``` + +### 引数 + +- `configurationValue` + - : デバイス固有のコンフィグレーションの番号です。 + +### 返値 + +{{jsxref("Promise")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/serialnumber/index.md b/files/ja/web/api/usbdevice/serialnumber/index.md new file mode 100644 index 00000000000000..fa0366fbc4d13b --- /dev/null +++ b/files/ja/web/api/usbdevice/serialnumber/index.md @@ -0,0 +1,22 @@ +--- +title: "USBDevice: serialNumber プロパティ" +slug: Web/API/USBDevice/serialNumber +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{SeeCompatTable}}{{APIRef("WebUSB API")}} + +{{domxref("USBDevice")}} インターフェイスの読み取り専用プロパティ **`serialNumber`** は、製造元が定義する、特定の USB デバイスのシリアル番号です。 + +## 値 + +特定の USB デバイスのシリアル番号です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/transferin/index.md b/files/ja/web/api/usbdevice/transferin/index.md new file mode 100644 index 00000000000000..d7d75f91c8dbee --- /dev/null +++ b/files/ja/web/api/usbdevice/transferin/index.md @@ -0,0 +1,35 @@ +--- +title: "USBDevice: transferIn() メソッド" +slug: Web/API/USBDevice/transferIn +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{APIRef("WebUSB API")}}{{SeeCompatTable}} + +{{domxref("USBDevice")}} インターフェイスの **`transferIn()`** メソッドは、USB デバイスからバルクまたはインタラプトデータを受信したら {{domxref("USBInTransferResult")}} で解決する {{jsxref("Promise")}} を返します。 + +## 構文 + +```js-nolint +transferIn(endpointNumber, length) +``` + +### 引数 + +- `endpointNumber` + - : デバイス固有のエンドポイント (バッファー) の番号です。 +- `length` + - : デバイスから受信する最大のバイト数です。実際のデータは、解決したプロミス内の {{domxref("USBInTransferResult")}} に格納されています。 + +### 返値 + +{{domxref("USBInTransferResult")}} で解決する {{jsxref("Promise")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/transferout/index.md b/files/ja/web/api/usbdevice/transferout/index.md new file mode 100644 index 00000000000000..e94f2a5dc239d3 --- /dev/null +++ b/files/ja/web/api/usbdevice/transferout/index.md @@ -0,0 +1,35 @@ +--- +title: "USBDevice: transferOut() メソッド" +slug: Web/API/USBDevice/transferOut +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{APIRef("WebUSB API")}}{{SeeCompatTable}} + +{{domxref("USBDevice")}} インターフェイスの **`transferOut()`** メソッドは、USB デバイスにバルクまたはインタラプトデータを送信したら {{domxref("USBOutTransferResult")}} で解決する {{jsxref("Promise")}} を返します。 + +## 構文 + +```js-nolint +transferOut(endpointNumber, data) +``` + +### 引数 + +- `endpointNumber` + - : デバイス固有のエンドポイント (バッファー) の番号です。 +- `data` + - : デバイスに送信するデータが格納された {{jsxref("TypedArray")}} です。 + +### 返値 + +{{domxref("USBOutTransferResult")}} で解決する {{jsxref("Promise")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/usbversionmajor/index.md b/files/ja/web/api/usbdevice/usbversionmajor/index.md new file mode 100644 index 00000000000000..f2757c9da9a422 --- /dev/null +++ b/files/ja/web/api/usbdevice/usbversionmajor/index.md @@ -0,0 +1,22 @@ +--- +title: "USBDevice: usbVersionMajor プロパティ" +slug: Web/API/USBDevice/usbVersionMajor +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{SeeCompatTable}}{{APIRef("WebUSB API")}} + +{{domxref("USBDevice")}} インターフェイスの読み取り専用プロパティ **`usbVersionMajor`** は、デバイスが対応している USB のプロトコルバージョンを表す 3 個のプロパティのうちの 1個です。他の 2 個のプロパティは `USBDevice.usbVersionMinor` と `USBDevice.usbVersionSubminor` です。 + +## 値 + +デバイスが対応している USB のプロトコルバージョンを表す 3 個のプロパティのうちの最後です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/usbversionminor/index.md b/files/ja/web/api/usbdevice/usbversionminor/index.md new file mode 100644 index 00000000000000..f0ca929cfabff3 --- /dev/null +++ b/files/ja/web/api/usbdevice/usbversionminor/index.md @@ -0,0 +1,22 @@ +--- +title: "USBDevice: usbVersionMinor プロパティ" +slug: Web/API/USBDevice/usbVersionMinor +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{SeeCompatTable}}{{APIRef("WebUSB API")}} + +{{domxref("USBDevice")}} インターフェイスの読み取り専用プロパティ **`usbVersionMinor`** は、デバイスが対応している USB のプロトコルバージョンを表す 3 個のプロパティのうちの 1個です。他の 2 個のプロパティは `USBDevice.usbVersionMajor` と `USBDevice.usbVersionSubminor` です。 + +## 値 + +デバイスが対応している USB のプロトコルバージョンを表す 3 個のプロパティのうちの 2 番目です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/usbversionsubminor/index.md b/files/ja/web/api/usbdevice/usbversionsubminor/index.md new file mode 100644 index 00000000000000..3156daf17b92f6 --- /dev/null +++ b/files/ja/web/api/usbdevice/usbversionsubminor/index.md @@ -0,0 +1,22 @@ +--- +title: "USBDevice: usbVersionSubminor プロパティ" +slug: Web/API/USBDevice/usbVersionSubminor +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{SeeCompatTable}}{{APIRef("WebUSB API")}} + +{{domxref("USBDevice")}} インターフェイスの読み取り専用プロパティ **`usbVersionSubminor`** は、デバイスが対応している USB のプロトコルバージョンを表す 3 個のプロパティのうちの 1個です。他の 2 個のプロパティは `USBDevice.usbVersionMajor` と `USBDevice.usbVersionMinor` です。 + +## 値 + +デバイスが対応している USB のプロトコルバージョンを表す 3 個のプロパティのうちの最初です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/usbdevice/vendorid/index.md b/files/ja/web/api/usbdevice/vendorid/index.md new file mode 100644 index 00000000000000..e09e6560eeb9a7 --- /dev/null +++ b/files/ja/web/api/usbdevice/vendorid/index.md @@ -0,0 +1,22 @@ +--- +title: "USBDevice: vendorId プロパティ" +slug: Web/API/USBDevice/vendorID +l10n: + sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6 +--- + +{{SeeCompatTable}}{{APIRef("WebUSB API")}} + +{{domxref("USBDevice")}} インターフェイスの読み取り専用プロパティ **`vendorId`** は、usb.org で割り当てられた公式なベンダー ID です。 + +## 値 + +usb.org で割り当てられた公式なベンダー ID です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} From 21fe088e5fc3e89b6b054e7cd43f68cc1daa8ae8 Mon Sep 17 00:00:00 2001 From: MikeCAT Date: Sun, 10 Sep 2023 09:00:47 +0900 Subject: [PATCH 254/600] Fixes from github-actions --- files/ja/web/api/usbdevice/clearhalt/index.md | 2 +- files/ja/web/api/usbdevice/deviceclass/index.md | 2 +- files/ja/web/api/usbdevice/index.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/files/ja/web/api/usbdevice/clearhalt/index.md b/files/ja/web/api/usbdevice/clearhalt/index.md index 6e685eaf9a4a42..f46d12126062b9 100644 --- a/files/ja/web/api/usbdevice/clearhalt/index.md +++ b/files/ja/web/api/usbdevice/clearhalt/index.md @@ -7,7 +7,7 @@ l10n: {{APIRef("WebUSB API")}}{{SeeCompatTable}} -{{domxref("USBDevice")}} インターフェイスの **`clearHalt()`** メソッドは、停止状態のクリアが完了したら解決する {{jsxref("Promise")}} を返します。停止状態はデバイスへ、またはデバイスからのデータ転送が `'stall'` 状態であるときであり、ウェブページ (USB の用語では _ホスト_ システム) がこの状態をクリアする必要があります。詳細を参照してください。 +{{domxref("USBDevice")}} インターフェイスの **`clearHalt()`** メソッドは、停止状態のクリアが完了したら解決する {{jsxref("Promise")}} を返します。停止状態はデバイスへ、またはデバイスからのデータ転送が `'stall'` 状態であるときであり、ウェブページ (USB の用語では _ホスト_ システム) がこの状態をクリアする必要があります。詳細を参照してください。 ## 構文 diff --git a/files/ja/web/api/usbdevice/deviceclass/index.md b/files/ja/web/api/usbdevice/deviceclass/index.md index 993e30d7cd7905..ed57c1b4c0d8a9 100644 --- a/files/ja/web/api/usbdevice/deviceclass/index.md +++ b/files/ja/web/api/usbdevice/deviceclass/index.md @@ -7,7 +7,7 @@ l10n: {{SeeCompatTable}}{{APIRef("WebUSB API")}} -{{domxref("USBDevice")}} インターフェイスの読み取り専用プロパティ **`deviceClass`** は、デバイスとともに動く USB ドライバーのロード用に USB デバイスを特定する 3 個のプロパティのうちの 1 個です。他の 2 個のプロパティは `USBDevice.deviceSubclass` と `USBDevice.deviceProtocol` です。 +{{domxref("USBDevice")}} インターフェイスの読み取り専用プロパティ **`deviceClass`** は、デバイスとともに動く USB ドライバーのロード用に USB デバイスを特定する 3 個のプロパティのうちの 1 個です。他の 2 個のプロパティは `USBDevice.deviceSubclass` と `USBDevice.deviceProtocol` です。 ## 値 diff --git a/files/ja/web/api/usbdevice/index.md b/files/ja/web/api/usbdevice/index.md index fb923aeb08ba52..4ed6950f30e4ad 100644 --- a/files/ja/web/api/usbdevice/index.md +++ b/files/ja/web/api/usbdevice/index.md @@ -51,7 +51,7 @@ l10n: - {{domxref("USBDevice.claimInterface()")}} {{Experimental_Inline}} - : 要求したインターフェイスの排他アクセスを獲得したら解決する {{jsxref("Promise")}} を返します。 - {{domxref("USBDevice.clearHalt()")}} {{Experimental_Inline}} - - : 停止状態のクリアが完了したら解決する {{jsxref("Promise")}} を返します。 + - : 停止状態のクリアが完了したら解決する {{jsxref("Promise")}} を返します。 - {{domxref("USBDevice.controlTransferIn()")}} {{Experimental_Inline}} - : コマンドまたは状態の操作の USB デバイスへの転送が完了したら {{domxref("USBInTransferResult")}} で解決する {{jsxref("Promise")}} を返します。 - {{domxref("USBDevice.controlTransferOut()")}} {{Experimental_Inline}} From 50513cd4ad0fdea0fad7c5bd2942a116df296fa1 Mon Sep 17 00:00:00 2001 From: MikeCAT Date: Sun, 10 Sep 2023 09:42:17 +0900 Subject: [PATCH 255/600] Translate BluetoothRemoteGATTDescriptor --- .../characteristic/index.md | 22 ++++++++++++ .../bluetoothremotegattdescriptor/index.md | 35 +++++++++++++++++++ .../readvalue/index.md | 32 +++++++++++++++++ .../uuid/index.md | 23 ++++++++++++ .../value/index.md | 22 ++++++++++++ .../writevalue/index.md | 33 +++++++++++++++++ 6 files changed, 167 insertions(+) create mode 100644 files/ja/web/api/bluetoothremotegattdescriptor/characteristic/index.md create mode 100644 files/ja/web/api/bluetoothremotegattdescriptor/index.md create mode 100644 files/ja/web/api/bluetoothremotegattdescriptor/readvalue/index.md create mode 100644 files/ja/web/api/bluetoothremotegattdescriptor/uuid/index.md create mode 100644 files/ja/web/api/bluetoothremotegattdescriptor/value/index.md create mode 100644 files/ja/web/api/bluetoothremotegattdescriptor/writevalue/index.md diff --git a/files/ja/web/api/bluetoothremotegattdescriptor/characteristic/index.md b/files/ja/web/api/bluetoothremotegattdescriptor/characteristic/index.md new file mode 100644 index 00000000000000..e5140bfa2608ec --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattdescriptor/characteristic/index.md @@ -0,0 +1,22 @@ +--- +title: "BluetoothRemoteGATTDescriptor: characteristic プロパティ" +slug: Web/API/BluetoothRemoteGATTDescriptor/characteristic +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +読み取り専用プロパティ **`BluetoothRemoteGATTDescriptor.characteristic`** は、このディスクリプターが属する {{domxref("BluetoothRemoteGATTCharacteristic")}} を返します。 + +## 値 + +{{domxref("BluetoothRemoteGATTCharacteristic")}} のインスタンスです。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/bluetoothremotegattdescriptor/index.md b/files/ja/web/api/bluetoothremotegattdescriptor/index.md new file mode 100644 index 00000000000000..f0356720e1d5b3 --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattdescriptor/index.md @@ -0,0 +1,35 @@ +--- +title: BluetoothRemoteGATTDescriptor +slug: Web/API/BluetoothRemoteGATTDescriptor +l10n: + sourceCommit: 15d7838061736509d08d642611bd26c1251c0500 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +[Web Bluetooth API](/ja/docs/Web/API/Web_Bluetooth_API) の `BluetoothRemoteGATTDescriptor` は、GATT ディスクリプターを提供します。これは、キャラクタリスティックの値に関する詳細情報を提供します。 + +## インスタンスプロパティ + +- {{DOMxRef("BluetoothRemoteGATTDescriptor.characteristic")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : このディスクリプターが属する {{DOMxRef("BluetoothRemoteGATTCharacteristic")}} を返します。 +- {{DOMxRef("BluetoothRemoteGATTDescriptor.uuid")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : このキャラクタリスティックディスクリプターの UUID を返します。たとえば、theClient + Characteristic Configuration descriptor は「`00002902-0000-1000-8000-00805f9b34fb`」です。 +- {{DOMxRef("BluetoothRemoteGATTDescriptor.value")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : 現在キャッシュされているディスクリプターの値を返します。この値はディスクリプターの値が読まれると更新されます。 + +## インスタンスメソッド + +- {{DOMxRef("BluetoothRemoteGATTDescriptor.readValue()")}} {{Experimental_Inline}} + - : 利用可能で対応していれば `value` プロパティの複製が格納された {{JSxRef("ArrayBuffer")}} で解決する {{JSxRef("Promise")}} を返します。そうでない場合、エラーを投げます。 +- {{DOMxRef("BluetoothRemoteGATTDescriptor.writeValue()")}} {{Experimental_Inline}} + - : `value` プロパティを {{JSxRef("ArrayBuffer")}} に格納されたバイト列に設定し、{{JSxRef("Promise")}} を返します。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/bluetoothremotegattdescriptor/readvalue/index.md b/files/ja/web/api/bluetoothremotegattdescriptor/readvalue/index.md new file mode 100644 index 00000000000000..1ee442d61e87e4 --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattdescriptor/readvalue/index.md @@ -0,0 +1,32 @@ +--- +title: "BluetoothRemoteGATTDescriptor: readValue() メソッド" +slug: Web/API/BluetoothRemoteGATTDescriptor/readValue +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +**`BluetoothRemoteGATTDescriptor.readValue()`** メソッドは、利用可能で対応していれば `value` プロパティの複製が格納された {{JSxRef("ArrayBuffer")}} で解決する {{JSxRef("Promise")}} を返します。そうでない場合、エラーを投げます。 + +## 構文 + +```js-nolint +readValue() +``` + +### 引数 + +なし + +### 返値 + +{{jsxref("ArrayBuffer")}} で解決する {{jsxref("Promise")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/bluetoothremotegattdescriptor/uuid/index.md b/files/ja/web/api/bluetoothremotegattdescriptor/uuid/index.md new file mode 100644 index 00000000000000..69060a180b9dab --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattdescriptor/uuid/index.md @@ -0,0 +1,23 @@ +--- +title: "BluetoothRemoteGATTDescriptor: uuid プロパティ" +slug: Web/API/BluetoothRemoteGATTDescriptor/uuid +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +読み取り専用プロパティ **`BluetoothRemoteGATTDescriptor.uuid`** は、このキャラクタリスティックディスクリプターの {{Glossary("UUID")}} を返します。 +たとえば、theClient Characteristic Configuration descriptor は「`00002902-0000-1000-8000-00805f9b34fb`」です。 + +## 値 + +UUID です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/bluetoothremotegattdescriptor/value/index.md b/files/ja/web/api/bluetoothremotegattdescriptor/value/index.md new file mode 100644 index 00000000000000..9d5289c8fb56b5 --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattdescriptor/value/index.md @@ -0,0 +1,22 @@ +--- +title: "BluetoothRemoteGATTDescriptor: value プロパティ" +slug: Web/API/BluetoothRemoteGATTDescriptor/value +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +読み取り専用プロパティ **`BluetoothRemoteGATTDescriptor.value`** は、現在キャッシュされているディスクリプターの値を返します。この値はディスクリプターの値が読まれると更新されます。 + +## 値 + +{{jsxref("ArrayBuffer")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/bluetoothremotegattdescriptor/writevalue/index.md b/files/ja/web/api/bluetoothremotegattdescriptor/writevalue/index.md new file mode 100644 index 00000000000000..f151bfb7f1585c --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattdescriptor/writevalue/index.md @@ -0,0 +1,33 @@ +--- +title: "BluetoothRemoteGATTDescriptor: writeValue() メソッド" +slug: Web/API/BluetoothRemoteGATTDescriptor/writeValue +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +**`BluetoothRemoteGATTDescriptor.writeValue()`** メソッドは、`value` プロパティを {{JSxRef("ArrayBuffer")}} に格納されたバイト列に設定し、{{JSxRef("Promise")}} を返します。 + +## 構文 + +```js-nolint +writeValue(array) +``` + +### 引数 + +- `array` + - : `value` をこの配列に格納されたバイト列に設定します。 + +### 返値 + +{{jsxref("Promise")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} From 6f1eac9a5a450107cce762ccfd650fc7e4948a98 Mon Sep 17 00:00:00 2001 From: MikeCAT Date: Sun, 10 Sep 2023 10:37:57 +0900 Subject: [PATCH 256/600] Translate BluetoothRemoteGATTService --- .../device/index.md | 24 ++++++++++++ .../getcharacteristic/index.md | 35 +++++++++++++++++ .../getcharacteristics/index.md | 35 +++++++++++++++++ .../api/bluetoothremotegattservice/index.md | 38 +++++++++++++++++++ .../isprimary/index.md | 24 ++++++++++++ .../bluetoothremotegattservice/uuid/index.md | 24 ++++++++++++ 6 files changed, 180 insertions(+) create mode 100644 files/ja/web/api/bluetoothremotegattservice/device/index.md create mode 100644 files/ja/web/api/bluetoothremotegattservice/getcharacteristic/index.md create mode 100644 files/ja/web/api/bluetoothremotegattservice/getcharacteristics/index.md create mode 100644 files/ja/web/api/bluetoothremotegattservice/index.md create mode 100644 files/ja/web/api/bluetoothremotegattservice/isprimary/index.md create mode 100644 files/ja/web/api/bluetoothremotegattservice/uuid/index.md diff --git a/files/ja/web/api/bluetoothremotegattservice/device/index.md b/files/ja/web/api/bluetoothremotegattservice/device/index.md new file mode 100644 index 00000000000000..f17283da653ae6 --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattservice/device/index.md @@ -0,0 +1,24 @@ +--- +title: "BluetoothRemoteGATTService: device プロパティ" +slug: Web/API/BluetoothRemoteGATTService/device +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +読み取り専用プロパティ **`BluetoothGATTService.device`** は、{{domxref("BluetoothDevice")}} のインスタンスを通じて、この Bluetooth デバイスの情報を返します。 + +## 値 + +{{domxref("BluetoothDevice")}} のインスタンスです。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +{{APIRef("Web Bluetooth")}} diff --git a/files/ja/web/api/bluetoothremotegattservice/getcharacteristic/index.md b/files/ja/web/api/bluetoothremotegattservice/getcharacteristic/index.md new file mode 100644 index 00000000000000..f00737b9ac1794 --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattservice/getcharacteristic/index.md @@ -0,0 +1,35 @@ +--- +title: "BluetoothRemoteGATTService: getCharacteristic() メソッド" +slug: Web/API/BluetoothRemoteGATTService/getCharacteristic +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +**`BluetoothGATTService.getCharacteristic()`** メソッドは、指定の universally unique identifier (UUID) に対応する {{domxref("BluetoothRemoteGATTCharacteristic")}} のインスタンスで解決する {{jsxref("Promise")}} を返します。 + +## 構文 + +```js-nolint +getCharacteristic(characteristic) +``` + +### 引数 + +- `characteristic` + - : キャラクタリスティックの UUID です。たとえば、Heart Rate Measurement characteristic は `'00002a37-0000-1000-8000-00805f9b34fb'` です。 + +### 返値 + +{{domxref("BluetoothRemoteGATTCharacteristic")}} のインスタンスで解決する {{jsxref("Promise")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +{{APIRef("Web Bluetooth")}} diff --git a/files/ja/web/api/bluetoothremotegattservice/getcharacteristics/index.md b/files/ja/web/api/bluetoothremotegattservice/getcharacteristics/index.md new file mode 100644 index 00000000000000..c884c3c86a3490 --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattservice/getcharacteristics/index.md @@ -0,0 +1,35 @@ +--- +title: "BluetoothRemoteGATTService: getCharacteristics() メソッド" +slug: Web/API/BluetoothRemoteGATTService/getCharacteristics +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +**`BluetoothGATTService.getCharacteristics()`** メソッドは、指定の universally unique identifier (UUID) に対応する {{domxref("BluetoothRemoteGATTCharacteristic")}} のインスタンスのリストで解決する {{jsxref("Promise")}} を返します。 + +## 構文 + +```js-nolint +getCharacteristics(characteristics) +``` + +### 引数 + +- `characteristics` + - : キャラクタリスティックの UUID です。たとえば、Heart Rate Measurement characteristic は `'00002a37-0000-1000-8000-00805f9b34fb'` です。 + +### 返値 + +{{domxref("BluetoothRemoteGATTCharacteristic")}} のインスタンスの {{jsxref("Array")}} で解決する {{jsxref("Promise")}} を返します。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +{{APIRef("Web Bluetooth")}} diff --git a/files/ja/web/api/bluetoothremotegattservice/index.md b/files/ja/web/api/bluetoothremotegattservice/index.md new file mode 100644 index 00000000000000..0738656b91f6ce --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattservice/index.md @@ -0,0 +1,38 @@ +--- +title: BluetoothRemoteGATTService +slug: Web/API/BluetoothRemoteGATTService +l10n: + sourceCommit: 15d7838061736509d08d642611bd26c1251c0500 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +[Web Bluetooth API](/ja/docs/Web/API/Web_Bluetooth_API) の `BluetoothRemoteGATTService` インターフェイスは、GATT サーバーにより提供されるサービスを表します。デバイス、参照されるサービス、このサービスのキャラクタリスティックのリストも含みます。 + +{{InheritanceDiagram}} + +## インスタンスプロパティ + +- {{domxref("BluetoothRemoteGATTService.device")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : {{domxref("BluetoothDevice")}} のインスタンスを通じて、この Bluetooth デバイスの情報を返します。 +- {{domxref("BluetoothRemoteGATTService.isPrimary")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : これがプライマリーサービスなのかセカンダリーサービスなのかを表す論理値を返します。 +- {{domxref("BluetoothRemoteGATTService.uuid")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : このサービスの UUID を表す文字列を返します。 + +## インスタンスメソッド + +- {{domxref("BluetoothRemoteGATTService.getCharacteristic()")}} {{Experimental_Inline}} + - : 指定の universally unique identifier (UUID) に対応する {{domxref("BluetoothRemoteGATTCharacteristic")}} のインスタンスで解決する {{jsxref("Promise")}} を返します。 +- {{domxref("BluetoothRemoteGATTService.getCharacteristics()")}} {{Experimental_Inline}} + - : 省略可能な universally unique identifier (UUID) に対応する {{domxref("BluetoothRemoteGATTCharacteristic")}} のインスタンスの {{jsxref("Array")}} で解決する {{jsxref("Promise")}} を返します。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +{{APIRef("Web Bluetooth")}} diff --git a/files/ja/web/api/bluetoothremotegattservice/isprimary/index.md b/files/ja/web/api/bluetoothremotegattservice/isprimary/index.md new file mode 100644 index 00000000000000..efb109533b3798 --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattservice/isprimary/index.md @@ -0,0 +1,24 @@ +--- +title: "BluetoothRemoteGATTService: isPrimary プロパティ" +slug: Web/API/BluetoothRemoteGATTService/isPrimary +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +読み取り専用プロパティ **`BluetoothGATTService.isPrimary`** は、これがプライマリーサービスかを表す論理値を返します。プライマリーサービスでなければ、セカンダリーサービスです。 + +## 値 + +論理値です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +{{APIRef("Web Bluetooth")}} diff --git a/files/ja/web/api/bluetoothremotegattservice/uuid/index.md b/files/ja/web/api/bluetoothremotegattservice/uuid/index.md new file mode 100644 index 00000000000000..4f397616102a6e --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattservice/uuid/index.md @@ -0,0 +1,24 @@ +--- +title: "BluetoothRemoteGATTService: uuid プロパティ" +slug: Web/API/BluetoothRemoteGATTService/uuid +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +読み取り専用プロパティ **`BluetoothGATTService.uuid`** は、このサービスの UUID を表す文字列を返します。 + +## 値 + +文字列です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +{{APIRef("Web Bluetooth")}} From c30635c8fa8cdef3eaf3490f7749cf2c1f11229c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 9 Sep 2023 19:00:30 +0900 Subject: [PATCH 257/600] =?UTF-8?q?2023/03/01=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/pushsubscription/index.md | 47 +++++++++++----------- 1 file changed, 23 insertions(+), 24 deletions(-) diff --git a/files/ja/web/api/pushsubscription/index.md b/files/ja/web/api/pushsubscription/index.md index c3c52c4d77e085..beae2581680568 100644 --- a/files/ja/web/api/pushsubscription/index.md +++ b/files/ja/web/api/pushsubscription/index.md @@ -1,49 +1,48 @@ --- title: PushSubscription slug: Web/API/PushSubscription +l10n: + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc --- -{{SeeCompatTable}}{{ApiRef("Push API")}} +{{ApiRef("Push API")}} -[Push API](/ja/docs/Web/API/Push_API) の `PushSubscription` インターフェイスは、サブスクリプションの URL エンドポイントを提供するとともに、プッシュサービスの登録を解除できます。 +`PushSubscription` は[プッシュ API](/ja/docs/Web/API/Push_API) のインターフェイスで、サブスクリプションの URL エンドポイントを提供し、ここからプッシュサービスの登録を脱退できます。 このインターフェイスのインスタンスはシリアライズできます。 ## インスタンスプロパティ -- {{domxref("PushSubscription.endpoint")}} {{readonlyinline}} - - : プッシュサービスに関連したエンドポイントを含む {{domxref("USVString")}}。 -- {{domxref("PushSubscription.expirationTime")}} {{readonlyinline}} - - : プッシュサブスクリプションに関連付いたサブスクリプション期限切れ時間を表す {{domxref("DOMHighResTimeStamp")}}。存在しない場合は `null`。 -- {{domxref("PushSubscription.options")}} {{readonlyinline}} +- {{domxref("PushSubscription.endpoint")}} {{ReadOnlyInline}} + - : 文字列で、このプッシュサブスクリプションに関連づけられたエンドポイントが入ります。 +- {{domxref("PushSubscription.expirationTime")}} {{ReadOnlyInline}} + - : {{domxref("DOMHighResTimeStamp")}} で、存在すれば、プッシュサブスクリプションに関連付いたサブスクリプションの期限です。存在しない場合は `null` です。 +- {{domxref("PushSubscription.options")}} {{ReadOnlyInline}} - : サブスクリプションを作成するために用いられるオプションを含むオブジェクト。 - - - -- {{domxref("PushSubscription.subscriptionId")}} {{deprecated_inline}} {{readonlyinline}} - - : プッシュサービスに関連したサブスクリプション ID を含む {{domxref("DOMString")}}。 +- {{domxref("PushSubscription.subscriptionId")}} {{deprecated_inline}} {{ReadOnlyInline}} + - : 文字列で、このプッシュサブスクリプションに関連したサブスクリプション ID が入ります。 ## インスタンスメソッド - {{domxref("PushSubscription.getKey()")}} - - : サーバーに送信されてプッシュメッセージの暗号化に使用される、クライアントのパブリックキーを含む {{jsxref("ArrayBuffer")}} を返します。 + - : サーバーに送信されてプッシュメッセージの暗号化に使用される、クライアントの公開鍵を含む {{jsxref("ArrayBuffer")}} を返します。 - {{domxref("PushSubscription.toJSON()")}} - - : 標準シリアライザー — サブスクリプションプロパティの JSON 記法を返します。 + - : 標準シリアライザーです。サブスクリプションプロパティの JSON 記法を返します。 - {{domxref("PushSubscription.unsubscribe()")}} - - : プッシュサービスの登録を解除する非同期プロセスを開始します。現在のサブスクリプションが成功裏に登録解除できた場合、{{domxref("Boolean")}} で解決される {{jsxref("Promise")}} を返します。 + - : プッシュサービスのサブスクリプションを脱退する非同期プロセスを開始します。現在のサブスクリプションが成功裏に脱退できた場合、論理値で解決される {{jsxref("Promise")}} を返します。 ## 例 ```js -navigator.serviceWorker.ready.then(function (reg) { - reg.pushManager.getSubscription().then(function (subscription) { +navigator.serviceWorker.ready.then((reg) => { + reg.pushManager.getSubscription().then((subscription) => { subscription .unsubscribe() - .then(function (successful) { - // 成功裏に登録解除。 + .then((successful) => { + // 成功裏に脱退。 }) - .catch(function (e) { - // 登録解除失敗。 + .catch((e) => { + // 脱退に失敗。 }); }); }); @@ -55,9 +54,9 @@ navigator.serviceWorker.ready.then(function (reg) { ## ブラウザーの互換性 -{{Compat("api.PushSubscription")}} +{{Compat}} ## 関連項目 -- [Push API](/ja/docs/Web/API/Push_API) -- [Service Worker API](/ja/docs/Web/API/Service_Worker_API) +- [プッシュ API](/ja/docs/Web/API/Push_API) +- [サービスワーカー API](/ja/docs/Web/API/Service_Worker_API) From 095c566c970012254b5c57b84b7b3870e7b69dd5 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 10 Sep 2023 13:33:42 +0900 Subject: [PATCH 258/600] =?UTF-8?q?2023/04/08=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/pushsubscription/endpoint/index.md | 44 +++++++------------ .../pushsubscription/expirationtime/index.md | 7 +-- .../web/api/pushsubscription/getkey/index.md | 43 +++++++++--------- .../web/api/pushsubscription/options/index.md | 9 ++-- .../pushsubscription/subscriptionid/index.md | 9 ++-- .../web/api/pushsubscription/tojson/index.md | 27 ++++++------ .../api/pushsubscription/unsubscribe/index.md | 28 ++++++------ 7 files changed, 81 insertions(+), 86 deletions(-) diff --git a/files/ja/web/api/pushsubscription/endpoint/index.md b/files/ja/web/api/pushsubscription/endpoint/index.md index 43cd457f0a26be..a7b6fa3355e9e5 100644 --- a/files/ja/web/api/pushsubscription/endpoint/index.md +++ b/files/ja/web/api/pushsubscription/endpoint/index.md @@ -1,36 +1,31 @@ --- -title: PushSubscription.endpoint +title: "PushSubscription: endpoint プロパティ" +short-title: endpoint slug: Web/API/PushSubscription/endpoint +l10n: + sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e --- -{{SeeCompatTable}}{{APIRef("Push API")}} +{{APIRef("Push API")}} -{{domxref("PushSubscription")}} インターフェイスの **`endpoint`** 読み取り専用プロパティは、プッシュサブスクリプションに関連するエンドポイントを含む {{domxref("USVString")}} を返します。 +**`endpoint`** は {{domxref("PushSubscription")}} インターフェイスの読み取り専用プロパティで、プッシュサブスクリプションに関連するエンドポイントの入った文字列を返します。 -エンドポイントは、プッシュサービスに加入している特定のサービスワーカーにプッシュメッセージを送信するために使用するプッシュサーバーへのカスタム URL エンドポイントの形式をとります。このため、他者がこれをハイジャックしてプッシュ機能を乱用しないように、エンドポイントを秘匿する方が良いです。 +エンドポイントはカスタム URL の形式を取り、プッシュサービスに加入している特定のサービスワーカーにプッシュメッセージを送信するために使用するプッシュサーバーを指します。このため、他者がこれをハイジャックしてプッシュ機能を乱用しないように、エンドポイントは秘匿しておくことが大切です。 -## 構文 +## 値 -```js-nolint -var myEnd = pushSubscription.endpoint; -``` - -### 値 - -{{domxref("USVString")}}。 +文字列です。 ## 例 ```js -navigator.serviceWorker.ready.then(function (reg) { - reg.pushManager - .subscribe({ userVisibleOnly: true }) - .then(function (subscription) { - console.log(subscription.endpoint); - - // この時点で、サブスクリプションエンドポイントをサーバーに送信し、 - // 保存した後、後でプッシュメッセージを送信するために使用します。 - }); +navigator.serviceWorker.ready.then((reg) => { + reg.pushManager.subscribe({ userVisibleOnly: true }).then((subscription) => { + console.log(subscription.endpoint); + + // この時点で、サブスクリプションエンドポイントをサーバーに送信し、 + // 保存した後、後でプッシュメッセージを送信するために使用します。 + }); }); ``` @@ -40,9 +35,4 @@ navigator.serviceWorker.ready.then(function (reg) { ## ブラウザーの互換性 -{{Compat("api.PushSubscription.endpoint")}} - -## 関連項目 - -- [Using the Push API](/ja/docs/Web/API/Push_API/Using_the_Push_API) -- [Push Notifications on the Open Web](http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web), Matt Gaunt +{{Compat}} diff --git a/files/ja/web/api/pushsubscription/expirationtime/index.md b/files/ja/web/api/pushsubscription/expirationtime/index.md index 46e3d1f0e6c270..d24f6ca46303ed 100644 --- a/files/ja/web/api/pushsubscription/expirationtime/index.md +++ b/files/ja/web/api/pushsubscription/expirationtime/index.md @@ -1,13 +1,14 @@ --- -title: PushSubscription.expirationTime +title: "PushSubscription: expirationTime プロパティ" +short-title: expirationTime slug: Web/API/PushSubscription/expirationTime l10n: - sourceCommit: 4b4638246aad5d39b9a2e5c572b179b4c39c0a84 + sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e --- {{APIRef("Push API")}} -{{domxref("PushSubscription")}} インターフェイスの **`expirationTime`** 読み取り専用プロパティは、プッシュサブスクリプションに関連付いたサブスクリプション期限切れ時間を表す {{domxref("DOMHighResTimeStamp")}} を返します。存在しなければ `null` を返します。 +**`expirationTime`** は {{domxref("PushSubscription")}} インターフェイスの読み取り専用プロパティで、プッシュサブスクリプションに関連付けられたサブスクリプションの有効期限を {{domxref("DOMHighResTimeStamp")}} で返します。存在しなければ `null` を返します。 ## 値 diff --git a/files/ja/web/api/pushsubscription/getkey/index.md b/files/ja/web/api/pushsubscription/getkey/index.md index 673bf59ff6c86d..5ab12cf8067571 100644 --- a/files/ja/web/api/pushsubscription/getkey/index.md +++ b/files/ja/web/api/pushsubscription/getkey/index.md @@ -1,25 +1,31 @@ --- -title: PushSubscription.getKey() +title: "PushSubscription: getKey() メソッド" +short-title: getKey() slug: Web/API/PushSubscription/getKey +l10n: + sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e --- -{{SeeCompatTable}}{{APIRef("Push API")}} +{{APIRef("Push API")}} -{{domxref("PushSubscription")}} インターフェイスの **`getKey()`** メソッドは、サーバーに送信されてプッシュメッセージデータを暗号化するために使用される、クライアントパブリックキーを表す {{jsxref("ArrayBuffer")}} を返します。 +`getKey()` は {{domxref("PushSubscription")}} インターフェイスのメソッドで、サーバーに送信されてプッシュメッセージのデータを暗号化するために使用される、クライアントの公開鍵を表す {{jsxref("ArrayBuffer")}} を返します。 ## 構文 ```js-nolint -var key = subscription.getKey(method); +getKey(name) ``` ### 引数 - `method` - - : クライアントパブリックキーの生成に使用される暗号化メソッドです。現在、`p256dh` のみがオプションです。メソッドには次の値が選べます： + - : クライアントの公開鍵の生成に使用される暗号化方式です。取りうる値は以下の通りです。 - - `p256dh`： P-256 曲線の [楕円曲線ディフィー・ヘルマン鍵共有](https://ja.wikipedia.org/wiki/%E6%A5%95%E5%86%86%E6%9B%B2%E7%B7%9A%E3%83%87%E3%82%A3%E3%83%95%E3%82%A3%E3%83%BC%E3%83%BB%E3%83%98%E3%83%AB%E3%83%9E%E3%83%B3%E9%8D%B5%E5%85%B1%E6%9C%89)（つまり、NIST secp256r1 楕円曲線）。結果として得られるキーは、ANSI X9.62 フォーマットで非圧縮ポイントとなります。 + - `p256dh` + - : P-256 曲線（つまり、NIST secp256r1 楕円曲線）の[楕円曲線ディフィー・ヘルマン](https://ja.wikipedia.org/wiki/%E6%A5%95%E5%86%86%E6%9B%B2%E7%B7%9A%E3%83%87%E3%82%A3%E3%83%95%E3%82%A3%E3%83%BC%E3%83%BB%E3%83%98%E3%83%AB%E3%83%9E%E3%83%B3%E9%8D%B5%E5%85%B1%E6%9C%89)公開鍵です。結果として得られるキーは、ANSI X9.62 フォーマットで非圧縮ポイントとなります。 + - `auth` + - : [Message Encryption for Web Push](https://datatracker.ietf.org/doc/html/draft-ietf-webpush-encryption-08) で記述されている認証秘密です。 ### 返値 @@ -27,18 +33,15 @@ var key = subscription.getKey(method); ## 例 -[Push API デモ](https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js#L51-L116)では、プッシュメッセージデータの暗号化と[サーバー](https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/server.js)から特定のサブスクライバーにプッシュメッセージを送信するために必要な認証を得るために、getKey('p256dh') と {{domxref("PushSubscription.endpoint")}} を呼び出しています。 - -``` -reg.pushManager.getSubscription() - .then(function(subscription) { +```js +reg.pushManager.getSubscription().then((subscription) => { // プッシュメッセージからサブスクライブ / アンサブスクライブ // する任意の UI を有効にする subBtn.disabled = false; if (!subscription) { - console.log('Not yet subscribed to Push') + console.log("Not yet subscribed to Push"); // プッシュを購読していない場合、ユーザーがプッシュできるように // UI を設定する。 return; @@ -46,15 +49,17 @@ reg.pushManager.getSubscription() // プッシュメッセージを購読していることを表示するように // UI を設定する。 - subBtn.textContent = 'Unsubscribe from Push Messaging'; + subBtn.textContent = "Unsubscribe from Push Messaging"; isPushEnabled = true; // 購読ステータスのための UI 要素の設定を含んで状態を初期化し、 // プッシュ経由でサブスクライバーを更新する。 - var endpoint = subscription.endpoint; - var key = subscription.getKey('p256dh'); + const endpoint = subscription.endpoint; + const key = subscription.getKey("p256dh"); + const auth = subscription.getKey("auth"); - ... + // ... +}); ``` ## 仕様書 @@ -63,8 +68,4 @@ reg.pushManager.getSubscription() ## ブラウザーの互換性 -{{Compat("api.PushSubscription.getKey")}} - -## 関連項目 - -- [Using the Push API](/ja/docs/Web/API/Push_API/Using_the_Push_API) +{{Compat}} diff --git a/files/ja/web/api/pushsubscription/options/index.md b/files/ja/web/api/pushsubscription/options/index.md index 51f8c4ec7b4224..69187cac95ddfc 100644 --- a/files/ja/web/api/pushsubscription/options/index.md +++ b/files/ja/web/api/pushsubscription/options/index.md @@ -1,20 +1,21 @@ --- -title: PushSubscription.options +title: "PushSubscription: options プロパティ" +short-title: options slug: Web/API/PushSubscription/options l10n: - sourceCommit: 4b4638246aad5d39b9a2e5c572b179b4c39c0a84 + sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e --- {{APIRef("Push API")}} -{{domxref("PushSubscription")}} インターフェイスの **`options`** 読み取り専用プロパティは、サブスクリプションを作成するために用いられたオプションが入ったオブジェクトです｡ +**`options`** は {{domxref("PushSubscription")}} インターフェイスの読み取り専用プロパティで、サブスクリプションを作成するために用いられたオプションが入ったオブジェクトです｡ ## 値 以下の値が入った読み取り専用の {{domxref("PushSubscriptionOptions")}} オブジェクトです。 - `userVisibleOnly` - - : プッシュサブスクリプションがユーザーに見える効果を持つメッセージのみに使われるかどうかを表す {{jsxref("boolean")}} 値です。 + - : 論理値で、プッシュサブスクリプションがユーザーに見える効果を持つメッセージのみに使われるかどうかを表します。 - `applicationServerKey` - : プッシュサーバーがプッシュサーバーを通じてクライアントアプリケーションにメッセージを送信するのに用いる公開鍵です。この値は、アプリケーションサーバーで生成された署名用鍵ペアの一部であり、P-256 曲線上での楕円曲線デジタル署名 (ECDSA) で利用可能です。 diff --git a/files/ja/web/api/pushsubscription/subscriptionid/index.md b/files/ja/web/api/pushsubscription/subscriptionid/index.md index 4e1b40d8ffb15b..a4ec22f889c996 100644 --- a/files/ja/web/api/pushsubscription/subscriptionid/index.md +++ b/files/ja/web/api/pushsubscription/subscriptionid/index.md @@ -1,13 +1,14 @@ --- -title: PushSubscription.subscriptionId +title: "PushSubscription: subscriptionId プロパティ" +short-title: subscriptionId slug: Web/API/PushSubscription/subscriptionId l10n: - sourceCommit: 4b4638246aad5d39b9a2e5c572b179b4c39c0a84 + sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e --- {{APIRef("Push API")}}{{Deprecated_header}} -{{domxref("PushSubscription")}} インターフェイスの **`subscriptionId`** 読み取り専用プロパティは、プッシュサブスクリプションに関連したサブスクリプション ID が入った文字列を返します。 +**`subscriptionId`** は {{domxref("PushSubscription")}} インターフェイスの読み取り専用プロパティで、このプッシュサブスクリプションに関連するサブスクリプション ID が入った文字列を返します。 > **警告:** この機能の代わりに、同じインターフェイスの {{domxref("PushSubscription.endPoint")}} プロパティを使用してください。 @@ -17,7 +18,7 @@ l10n: ## 仕様書 -この機能は、[Push API](https://w3c.github.io/push-api/#pushsubscription-interface) の仕様書から削除されました。もう標準化を目指していません。 +この機能は、[プッシュ API](https://w3c.github.io/push-api/#pushsubscription-interface) の仕様書から削除されました。もう標準化を目指していません。 ## ブラウザーの互換性 diff --git a/files/ja/web/api/pushsubscription/tojson/index.md b/files/ja/web/api/pushsubscription/tojson/index.md index 2f5cbcc01b5422..d05b13cdffa463 100644 --- a/files/ja/web/api/pushsubscription/tojson/index.md +++ b/files/ja/web/api/pushsubscription/tojson/index.md @@ -1,16 +1,19 @@ --- -title: PushSubscription.toJSON() +title: "PushSubscription: toJSON() メソッド" +short-title: toJSON() slug: Web/API/PushSubscription/toJSON +l10n: + sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e --- -{{SeeCompatTable}}{{APIRef("Push API")}} +{{APIRef("Push API")}} -{{domxref("PushSubscription")}} インターフェイスの **`toJSON()`** メソッドは、スタンダードなシリアライザーです：これは、便利なショートカットを提供するサブスクリプションプロパティの JSON 表記を返します。 +**`toJSON()`** は {{domxref("PushSubscription")}} インターフェイスの メソッドで、標準のシリアライザーです。これは、このサブスクリプションのプロパティの JSON 表現を返す、便利なショートカットを提供します。 ## 構文 ```js-nolint -mySubscription = subscription.toJSON() +toJSON() ``` ### 引数 @@ -19,15 +22,15 @@ mySubscription = subscription.toJSON() ### 返値 -JSON オブジェクト。現在、`endpoint` メンバーとしてサブスクリプションエンドポイントのみを含みます。 +JSON オブジェクトです。現在は、`endpoint` メンバーとしてサブスクリプションエンドポイントのみを含みます。 ## 例 ```js -navigator.serviceWorker.ready.then(function (reg) { - reg.pushManager.getSubscription().then(function (subscription) { - var mySubscription = subscription.toJSON(); - // サブスクリプションの詳細を使用して何かを実行する。 +navigator.serviceWorker.ready.then((reg) => { + reg.pushManager.getSubscription().then((subscription) => { + const mySubscription = subscription.toJSON(); + // サブスクリプションの詳細を使用して何かを実行する }); }); ``` @@ -38,8 +41,4 @@ navigator.serviceWorker.ready.then(function (reg) { ## ブラウザーの互換性 -{{Compat("api.PushSubscription.toJSON")}} - -## 関連項目 - -- [Using the Push API](/ja/docs/Web/API/Push_API/Using_the_Push_API) +{{Compat}} diff --git a/files/ja/web/api/pushsubscription/unsubscribe/index.md b/files/ja/web/api/pushsubscription/unsubscribe/index.md index a8bb841cbbd540..2ead9a05b0d980 100644 --- a/files/ja/web/api/pushsubscription/unsubscribe/index.md +++ b/files/ja/web/api/pushsubscription/unsubscribe/index.md @@ -1,16 +1,19 @@ --- -title: PushSubscription.unsubscribe() +title: "PushSubscription: unsubscribe() メソッド" +short-title: unsubscribe() slug: Web/API/PushSubscription/unsubscribe +l10n: + sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e --- -{{SeeCompatTable}}{{APIRef("Push API")}} +{{APIRef("Push API")}} -{{domxref("PushSubscription")}} インターフェイスの **`unsubscribe()`** メソッドは、現在のサブスクリプションが成功裏に登録解除されたときに {{jsxref("Boolean")}} で解決される{{jsxref("Promise")}} を返します。 +`unsubscribe()` は {{domxref("PushSubscription")}} インターフェイスのメソッドで、現在のサブスクリプションから脱退に成功したときに論理値で解決される {{jsxref("Promise")}} を返します。 ## 構文 ```js-nolint -PushSubscription.unsubscribe().then(function(Boolean) { ... }); +unsubscribe() ``` ### 引数 @@ -19,20 +22,20 @@ PushSubscription.unsubscribe().then(function(Boolean) { ... }); ### 返値 -現在のサブスクリプションが成功裏に登録解除されたときに {{jsxref("Boolean")}} で解決される{{jsxref("Promise")}}。 +現在のサブスクリプションから脱退に成功したときに論理値で解決される {{jsxref("Promise")}} です。 ## 例 ```js -navigator.serviceWorker.ready.then(function (reg) { - reg.pushManager.getSubscription().then(function (subscription) { +navigator.serviceWorker.ready.then((reg) => { + reg.pushManager.getSubscription().then((subscription) => { subscription .unsubscribe() - .then(function (successful) { - // 登録解除が成功 + .then((successful) => { + // 登録脱退が成功 }) - .catch(function (e) { - // 登録解除が失敗 + .catch((e) => { + // 登録脱退が失敗 }); }); }); @@ -44,9 +47,8 @@ navigator.serviceWorker.ready.then(function (reg) { ## ブラウザーの互換性 -{{Compat("api.PushSubscription.unsubscribe")}} +{{Compat}} ## 関連項目 -- [Using the Push API](/ja/docs/Web/API/Push_API/Using_the_Push_API) - {{domxref("PushManager.getSubscription")}} From 3fe081de239042e9f276230793c5f13e5d82a8e8 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 10 Sep 2023 16:57:38 +0900 Subject: [PATCH 259/600] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/pushevent/data/index.md | 5 +++-- files/ja/web/api/pushevent/index.md | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/files/ja/web/api/pushevent/data/index.md b/files/ja/web/api/pushevent/data/index.md index d00b9a81d631a9..9b3e60e6a0ff1f 100644 --- a/files/ja/web/api/pushevent/data/index.md +++ b/files/ja/web/api/pushevent/data/index.md @@ -1,8 +1,9 @@ --- -title: PushEvent.data +title: "PushEvent: data プロパティ" +short-title: data slug: Web/API/PushEvent/data l10n: - sourceCommit: 4b4638246aad5d39b9a2e5c572b179b4c39c0a84 + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc --- {{APIRef("Push API")}} diff --git a/files/ja/web/api/pushevent/index.md b/files/ja/web/api/pushevent/index.md index 25038a22eb57d7..3a89518b19457c 100644 --- a/files/ja/web/api/pushevent/index.md +++ b/files/ja/web/api/pushevent/index.md @@ -2,7 +2,7 @@ title: PushEvent slug: Web/API/PushEvent l10n: - sourceCommit: db72d5612ada1d40cde0de191389dde2fe062c23 + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc --- {{APIRef("Push API")}} From 693ac9f1462fb44104e23963e1c4720ed12001b4 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 10 Sep 2023 17:01:10 +0900 Subject: [PATCH 260/600] =?UTF-8?q?2023/04/08=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/pushevent/pushevent/index.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/files/ja/web/api/pushevent/pushevent/index.md b/files/ja/web/api/pushevent/pushevent/index.md index b214b50c1a1161..115546ba93b0d6 100644 --- a/files/ja/web/api/pushevent/pushevent/index.md +++ b/files/ja/web/api/pushevent/pushevent/index.md @@ -1,8 +1,9 @@ --- -title: PushEvent() +title: "PushEvent: PushEvent() コンストラクター" +short-title: PushEvent() slug: Web/API/PushEvent/PushEvent l10n: - sourceCommit: 2b8f5d9a29f00aea5d2edfa78d1fb90c51752858 + sourceCommit: bb65fd3482d5c3d32d1c56e5880600b1299f7669 --- {{APIRef("Push API")}} From 496d2a8ea6cedf2167d8882b21da42ad1de9f6c5 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 10 Sep 2023 17:10:08 +0900 Subject: [PATCH 261/600] =?UTF-8?q?2023/03/01=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/pushmessagedata/index.md | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/files/ja/web/api/pushmessagedata/index.md b/files/ja/web/api/pushmessagedata/index.md index 09d5810659580e..a983b6a0fe9097 100644 --- a/files/ja/web/api/pushmessagedata/index.md +++ b/files/ja/web/api/pushmessagedata/index.md @@ -1,15 +1,17 @@ --- title: PushMessageData slug: Web/API/PushMessageData +l10n: + sourceCommit: c244d3b2cb6c17e6ba8692e3faec393afd9988ca --- -{{APIRef("Push API")}}{{SeeCompatTable()}} +{{APIRef("Push API")}} -[Push API](/ja/docs/Web/API/Push_API) の **`PushMessageData`** インターフェイスは、さまざまなフォーマットでサーバーから送信されるプッシュテータを取得する方法を提供します。 +**`PushMessageData`** は[プッシュ API](/ja/docs/Web/API/Push_API) のインターフェイスで、さまざまな形式でサーバーから送信されるプッシュテータを取得する方法を提供します。 -[Fetch API](/ja/docs/Web/API/Fetch_API) の同様のメソッドが 1 回しか呼び出せないのと異なり、これらは複数回呼び出せます。 +[フェッチ API](/ja/docs/Web/API/Fetch_API) の同様のメソッドが 1 回しか呼び出せないのと異なり、これらは複数回呼び出せます。 -Push API を通して受け取ったメッセージはプッシュサービスによって暗号化されて送信され、`PushMessageData` インターフェースのメソッドで利用可能になる前にブラウザーによって自動的に 復号化されます。 +プッシュ API を通して受け取ったメッセージはプッシュサービスによって暗号化されて送信され、`PushMessageData` インターフェースのメソッドで利用可能になる前にブラウザーによって自動的に復号されます。 ## インスタンスプロパティ @@ -29,8 +31,8 @@ Push API を通して受け取ったメッセージはプッシュサービス ## 例 ```js -self.addEventListener("push", function (event) { - var obj = event.data.json(); +self.addEventListener("push", (event) => { + const obj = event.data.json(); if (obj.action === "subscribe" || obj.action === "unsubscribe") { fireNotification(obj, event); @@ -47,4 +49,4 @@ self.addEventListener("push", function (event) { ## ブラウザーの互換性 -{{Compat("api.PushMessageData")}} +{{Compat}} From f78386fe64aa9c8099fbaf3cdd08e817571d6fc2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 10 Sep 2023 17:12:05 +0900 Subject: [PATCH 262/600] =?UTF-8?q?2023/04/08=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/pushmessagedata/arraybuffer/index.md | 27 +++++++++---------- .../ja/web/api/pushmessagedata/blob/index.md | 25 +++++++++-------- .../ja/web/api/pushmessagedata/json/index.md | 25 +++++++++-------- .../ja/web/api/pushmessagedata/text/index.md | 25 +++++++++-------- 4 files changed, 49 insertions(+), 53 deletions(-) diff --git a/files/ja/web/api/pushmessagedata/arraybuffer/index.md b/files/ja/web/api/pushmessagedata/arraybuffer/index.md index acac896c6e6583..2c28d07a22a828 100644 --- a/files/ja/web/api/pushmessagedata/arraybuffer/index.md +++ b/files/ja/web/api/pushmessagedata/arraybuffer/index.md @@ -1,16 +1,19 @@ --- -title: PushMessageData.arrayBuffer() +title: "PushMessageData: arrayBuffer() メソッド" +short-title: arrayBuffer() slug: Web/API/PushMessageData/arrayBuffer +l10n: + sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e --- -{{APIRef("Push API")}}{{SeeCompatTable()}} +{{APIRef("Push API")}} -{{domxref("PushMessageData")}} インターフェイスの **`arrayBuffer()`** メソッドは、プッシュメッセージデータを {{jsxref("ArrayBuffer")}} オブジェクトとして抽出します。 +**`arrayBuffer()`** は {{domxref("PushMessageData")}} インターフェイスのメソッドで、プッシュメッセージデータを {{jsxref("ArrayBuffer")}} オブジェクトとして抽出します。 ## 構文 -```js -var myArrayBuffer = PushEvent.data.arrayBuffer(); +```js-nolint +arrayBuffer() ``` ### 引数 @@ -19,15 +22,15 @@ var myArrayBuffer = PushEvent.data.arrayBuffer(); ### 返値 -{{jsxref("ArrayBuffer")}}。 +{{jsxref("ArrayBuffer")}} です。 ## 例 ```js -self.addEventListener("push", function (event) { - var buffer = event.data.arrayBuffer(); +self.addEventListener("push", (event) => { + const buffer = event.data.arrayBuffer(); - // array buffer を使用して何かを実行する。 + // 配列バッファーを使用して何かを実行する。 }); ``` @@ -37,8 +40,4 @@ self.addEventListener("push", function (event) { ## ブラウザーの互換性 -{{Compat("api.PushMessageData.arrayBuffer")}} - -## 関連項目 - -- [Using the Push API](/ja/docs/Web/API/Push_API/Using_the_Push_API) +{{Compat}} diff --git a/files/ja/web/api/pushmessagedata/blob/index.md b/files/ja/web/api/pushmessagedata/blob/index.md index 8c481a480ea12c..0085568c00106b 100644 --- a/files/ja/web/api/pushmessagedata/blob/index.md +++ b/files/ja/web/api/pushmessagedata/blob/index.md @@ -1,16 +1,19 @@ --- -title: PushMessageData.blob() +title: "PushMessageData: blob() メソッド" +short-title: blob() slug: Web/API/PushMessageData/blob +l10n: + sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e --- -{{APIRef("Push API")}}{{SeeCompatTable()}} +{{APIRef("Push API")}} -{{domxref("PushMessageData")}} インターフェイスの **`blob()`** メソッドは、プッシュメッセージデータを {{domxref("Blob")}} オブジェクトとして抽出します。 +**`blob()`** は {{domxref("PushMessageData")}} インターフェイスのメソッドで、プッシュメッセージデータを {{domxref("Blob")}} オブジェクトとして抽出します。 ## 構文 -```js -var myBlob = PushEvent.data.blob(); +```js-nolint +blob() ``` ### 引数 @@ -19,13 +22,13 @@ var myBlob = PushEvent.data.blob(); ### 返値 -{{domxref("Blob")}}。 +{{domxref("Blob")}} です。 ## 例 ```js -self.addEventListener("push", function (event) { - var blob = event.data.blob(); +self.addEventListener("push", (event) => { + const blob = event.data.blob(); // Blob を使用して何かを実行する。 }); @@ -37,8 +40,4 @@ self.addEventListener("push", function (event) { ## ブラウザーの互換性 -{{Compat("api.PushMessageData.blob")}} - -## 関連項目 - -- [Using the Push API](/ja/docs/Web/API/Push_API/Using_the_Push_API) +{{Compat}} diff --git a/files/ja/web/api/pushmessagedata/json/index.md b/files/ja/web/api/pushmessagedata/json/index.md index d1ceefa0ab4800..b15bf9281b76b8 100644 --- a/files/ja/web/api/pushmessagedata/json/index.md +++ b/files/ja/web/api/pushmessagedata/json/index.md @@ -1,16 +1,19 @@ --- -title: PushMessageData.json() +title: "PushMessageData: json() メソッド" +short-title: json() slug: Web/API/PushMessageData/json +l10n: + sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e --- -{{APIRef("Push API")}}{{SeeCompatTable()}} +{{APIRef("Push API")}} -{{domxref("PushMessageData")}} インターフェイスの **`json()`** メソッドは、プッシュメッセージデータを [JSON](/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON) オブジェクトとして抜き出します。 +**`json()`** は {{domxref("PushMessageData")}} インターフェイスのメソッドで、プッシュメッセージのデータを [JSON](/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON) 文字列として解釈し、結果を返します。 ## 構文 -```js -var myJson = PushEvent.data.json(); +```js-nolint +json() ``` ### 引数 @@ -19,13 +22,13 @@ var myJson = PushEvent.data.json(); ### 返値 -[JSON](/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON) オブジェクト。 +プッシュイベントのデータを JSON として解釈した結果です。これは JSON で表現されるあらゆるものになり得ます。オブジェクト、配列、文字列、数値などです。 ## 例 ```js -self.addEventListener("push", function (event) { - var jsonObj = event.data.json(); +self.addEventListener("push", (event) => { + const myData = event.data.json(); // JSON を使って何かを実行する }); @@ -37,8 +40,4 @@ self.addEventListener("push", function (event) { ## ブラウザーの互換性 -{{Compat("api.PushMessageData.json")}} - -## 関連項目 - -- [Using the Push API](/ja/docs/Web/API/Push_API/Using_the_Push_API) +{{Compat}} diff --git a/files/ja/web/api/pushmessagedata/text/index.md b/files/ja/web/api/pushmessagedata/text/index.md index 3887056965da43..9817608239a9d6 100644 --- a/files/ja/web/api/pushmessagedata/text/index.md +++ b/files/ja/web/api/pushmessagedata/text/index.md @@ -1,16 +1,19 @@ --- -title: PushMessageData.text() +title: "PushMessageData: text() メソッド" +short-title: text() slug: Web/API/PushMessageData/text +l10n: + sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e --- -{{APIRef("Push API")}}{{SeeCompatTable()}} +{{APIRef("Push API")}} -{{domxref("PushMessageData")}} インターフェイスの **`text()`** メソッドは、プッシュメッセージデータをプレーンテキスト文字列として抽出します。 +**`text()`** は {{domxref("PushMessageData")}} インターフェイスのメソッドで、プッシュメッセージのデータをプレーンテキスト文字列として抽出します。 ## 構文 -```js -var myText = PushEvent.data.text(); +```js-nolint +text() ``` ### 引数 @@ -19,13 +22,13 @@ var myText = PushEvent.data.text(); ### 返値 -{{domxref("USVString")}}。 +文字列です。 ## 例 ```js -self.addEventListener("push", function (event) { - var textObj = event.data.text(); +self.addEventListener("push", (event) => { + const textObj = event.data.text(); // テキストを使用して何かを実行する }); @@ -37,8 +40,4 @@ self.addEventListener("push", function (event) { ## ブラウザーの互換性 -{{Compat("api.PushMessageData.text")}} - -## 関連項目 - -- [Using the Push API](/ja/docs/Web/API/Push_API/Using_the_Push_API) +{{Compat}} From e791cb25d1e8f3f7a949cebbb0218f8f64fbe0f4 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 10 Sep 2023 17:28:52 +0900 Subject: [PATCH 263/600] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/api/serviceworkerglobalscope/push_event/index.md | 3 ++- .../pushsubscriptionchange_event/index.md | 3 ++- .../api/serviceworkerregistration/pushmanager/index.md | 9 +++++---- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/files/ja/web/api/serviceworkerglobalscope/push_event/index.md b/files/ja/web/api/serviceworkerglobalscope/push_event/index.md index 2a4a9f4c440644..31e31e0d1584d5 100644 --- a/files/ja/web/api/serviceworkerglobalscope/push_event/index.md +++ b/files/ja/web/api/serviceworkerglobalscope/push_event/index.md @@ -1,8 +1,9 @@ --- title: "ServiceWorkerGlobalScope: push イベント" +short-title: push slug: Web/API/ServiceWorkerGlobalScope/push_event l10n: - sourceCommit: e0e09b1df51489867f2e74c18586d168ba5e00d1 + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc --- {{APIRef("Push API")}} diff --git a/files/ja/web/api/serviceworkerglobalscope/pushsubscriptionchange_event/index.md b/files/ja/web/api/serviceworkerglobalscope/pushsubscriptionchange_event/index.md index 577a26c1038e6c..5251dd2d2c5f38 100644 --- a/files/ja/web/api/serviceworkerglobalscope/pushsubscriptionchange_event/index.md +++ b/files/ja/web/api/serviceworkerglobalscope/pushsubscriptionchange_event/index.md @@ -1,8 +1,9 @@ --- title: "ServiceWorkerGlobalScope: pushsubscriptionchange イベント" +short-title: pushsubscriptionchange slug: Web/API/ServiceWorkerGlobalScope/pushsubscriptionchange_event l10n: - sourceCommit: e0e09b1df51489867f2e74c18586d168ba5e00d1 + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc --- {{APIRef("Push API")}} diff --git a/files/ja/web/api/serviceworkerregistration/pushmanager/index.md b/files/ja/web/api/serviceworkerregistration/pushmanager/index.md index dbd5dad3f9d35f..9f1eae2efc4273 100644 --- a/files/ja/web/api/serviceworkerregistration/pushmanager/index.md +++ b/files/ja/web/api/serviceworkerregistration/pushmanager/index.md @@ -1,13 +1,14 @@ --- -title: ServiceWorkerRegistration.pushManager +title: "ServiceWorkerRegistration: pushManager プロパティ" +short-title: pushManager slug: Web/API/ServiceWorkerRegistration/pushManager l10n: - sourceCommit: 6d194a9afcce7beef0082c1dc50644bd0fcda635 + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc --- {{APIRef("Service Workers API")}} -**`pushManager`** は {{domxref("ServiceWorkerRegistration")}} インターフェイスのプロパティで、プッシュ購読を管理するための {{domxref("PushManager")}} インターフェイスへの参照を返します。 これには、購読申し込み、アクティブな購読の取得、プッシュ通知の許可状況へのアクセスの対応が含まれます。 +**`pushManager`** は {{domxref("ServiceWorkerRegistration")}} インターフェイスのプロパティで、プッシュサブスクリプションを管理するための {{domxref("PushManager")}} インターフェイスへの参照を返します。 これには、サブスクリプションへの参加、アクティブなサブスクリプションの取得、プッシュ通知の許可状況へのアクセスの対応が含まれます。 ## 構文 @@ -29,7 +30,7 @@ navigator.serviceWorker (pushSubscription) => { console.log(pushSubscription.subscriptionId); console.log(pushSubscription.endpoint); - // アプリケーションサーバが必要としているプッシュ購読の + // アプリケーションサーバが必要としているプッシュサブスクリプションの // 詳細はここから使用できます。たとえば、XMLHttpRequest を使用して // これを送信できます。 }, From aa89f29fd5a6f70c507667948406fd090e671d4c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 10 Sep 2023 18:14:22 +0900 Subject: [PATCH 264/600] =?UTF-8?q?2023/08/09=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reference/statements/while/index.md | 99 +++++++++++++++++-- 1 file changed, 90 insertions(+), 9 deletions(-) diff --git a/files/ja/web/javascript/reference/statements/while/index.md b/files/ja/web/javascript/reference/statements/while/index.md index 1c4ce0d26146cf..02d26f85e3e7ae 100644 --- a/files/ja/web/javascript/reference/statements/while/index.md +++ b/files/ja/web/javascript/reference/statements/while/index.md @@ -1,28 +1,30 @@ --- title: while slug: Web/JavaScript/Reference/Statements/while +l10n: + sourceCommit: d85a7ba8cca98c2f6cf67a0c44f0ffd467532f20 --- {{jsSidebar("Statements")}} -**while 文**は、テスト条件が true と評価されている間、指定された文を実行するループを作成します。条件はその文を実行する前に評価されます。 +**`while`** 文は、テスト条件が真と評価されている間、指定された文を実行するループを作成します。条件はその文を実行する前に評価されます。 {{EmbedInteractiveExample("pages/js/statement-while.html")}} ## 構文 -``` +```js-nolint while (condition) statement ``` - `condition` - - : ループを通過するごとに、その前に評価される式。この条件が true と評価された場合は、 `statement` が実行されます。条件が false と評価された場合は、実行は `while` ループの後の文に続きます。 + - : ループを通過するごとに、その前に評価される式。この条件が[真と評価された](/ja/docs/Glossary/Truthy)場合は、 `statement` が実行されます。条件が[偽と評価された](/ja/docs/Glossary/Falsy)場合は、実行は `while` ループの後の文に続きます。 - `statement` - - : 条件が true と評価されている間に実行される文。ループ内で複数の文を実行する場合は、 [ブロック](/ja/docs/JavaScript/Reference/Statements/block)文 (`{ ... }`) を使用してそれらの文をグループ化してください。 + - : 条件が真と評価されている間に実行される文。ループ内で複数の文を実行する場合は、{{jsxref("Statements/block", "ブロック", "", 1)}}文 (`{ /* ... */ }`) を使用してそれらの文をグループ化してください。 - メモ: `break` 文を使用すると、条件が true と評価される前にループを停止することができます。 + メモ: {{jsxref("Statements/break", "break")}} 文を使用すると、条件が真と評価される前にループを停止することができます。 ## 例 @@ -31,8 +33,8 @@ while (condition) 次の `while` ループは、 `n` が 3 より小さい間反復します。 ```js -var n = 0; -var x = 0; +let n = 0; +let x = 0; while (n < 3) { n++; @@ -46,7 +48,84 @@ while (n < 3) { - 2 回目の通過の後: `n` = 2 および `x` = 3 - 3 回目の通過の後: `n` = 3 および `x` = 6 -3 回目の通過が完了した後、条件 `n` < 3 はもはや true ではなく、ループは終了します。 +3 回目の通過が完了した後、条件 `n` < 3 は真ではなくなり、ループは終了します。 + +### 代入を条件として使用 + +場合によっては、代入を条件として使用することに意味があることもあります。これは読みやすさとトレードオフの関係にあるので、このパターンを誰にでもわかりやすくするための、ある種の文体上の推奨事項があります。 + +次の例は、文書のコメントを反復処理し、コンソールにログ出力するものです。 + +```js-nolint example-bad +const iterator = document.createNodeIterator(document, NodeFilter.SHOW_COMMENT); +let currentNode; +while (currentNode = iterator.nextNode()) { + console.log(currentNode.textContent.trim()); +} +``` + +これは完全によい例とは言えません。特に次の行があるからです。 + +```js-nolint example-bad +while (currentNode = iterator.nextNode()) { +``` + +その行の動作は、毎回コメントノードが得られるという点では問題ありません。 + +1. `iterator.nextNode()` がコメントノードを返し、それが `currentNode` に代入される。 +2. `currentNode = iterator.nextNode()` の値は、従って[真値](/ja/docs/Glossary/Truthy)となる。 +3. そのため、`console.log()` の呼び出しを実行し、ループが継続される。 + +…そして、文書中にコメントノードがなくなったとき、次のようになります。 + +1. `iterator.nextNode()` は [`null``](/ja/docs/Web/JavaScript/Reference/Operators/null) を返す。 +2. 従って `currentNode = iterator.nextNode()` も `null` になり、これは[偽値](/ja/docs/Glossary/Falsy)である。 +3. そのため、ループを終了する。 + +この行の問題は、条件式にはふつう[比較演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_operators#比較演算子)、例えば `===` を使用するものですが、この行の `=` は比較演算子ではなく、[代入演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_operators#代入演算子)です。そのため、`=` は `===` の間違いのように見えてしまいます（実際には間違いではなくても）。 + +従って、このようにすると、一部の[コードリンティングツール](/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain#code_linting_tools)、例えば ESLint の [`no-cond-assign`](https://eslint.org/docs/latest/rules/no-cond-assign) ルールなどは、誤記の可能性があるものを発見して修正しやすくするために、以下のような警告を報告します。 + +> Expected a conditional expression and instead saw an assignment.（条件式が期待されるところに代入がありました。） + +多くのスタイルガイドでは、条件式に代入式を書くことが意図的であることを、より明確に示すことを推奨しています。それを行うための最小限の方法として、括弧を[グループ化演算子](/ja/docs/Web/JavaScript/Reference/Operators/Grouping)として追加して代入式を囲む方法があります。 + +```js example-good +const iterator = document.createNodeIterator(document, NodeFilter.SHOW_COMMENT); +let currentNode; +while ((currentNode = iterator.nextNode())) { + console.log(currentNode.textContent.trim()); +} +``` + +実際、これは ESLint の `no-cond-assign` の既定値や [Prettier](https://prettier.io/) で強制されているスタイルなので、このパターンをよく見かけるでしょう。 + +条件を明示的な比較に変えるために比較演算子を追加することを勧める人もいます。 + +```js-nolint example-good +while ((currentNode = iterator.nextNode()) !== null) { +``` + +このパターンは他にも書き方があります。 + +```js-nolint example-good +while ((currentNode = iterator.nextNode()) && currentNode) { +``` + +あるいは、`while` ループを使用するアイディアを完全に放棄する方法もあります。 + +```js example-good +const iterator = document.createNodeIterator(document, NodeFilter.SHOW_COMMENT); +for ( + let currentNode = iterator.nextNode(); + currentNode; + currentNode = iterator.nextNode() +) { + console.log(currentNode.textContent.trim()); +} +``` + +読者が条件式のパターンとして代入式を記述することに十分に慣れていれば、これらの読みやすさはすべて同じくらいのはずです。そうでなければ、最も冗長ではありますが、最後の形式が最も読みやすいでしょう。 ## 仕様書 @@ -54,9 +133,11 @@ while (n < 3) { ## ブラウザーの互換性 -{{Compat("javascript.statements.while")}} +{{Compat}} ## 関連情報 - {{jsxref("Statements/do...while", "do...while")}} - {{jsxref("Statements/for", "for")}} +- {{jsxref("Statements/break", "break")}} +- {{jsxref("Statements/continue", "continue")}} From e29e988fa22c53b3a8a2bcc1b83fb2c5d069134c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 10 Sep 2023 18:54:36 +0900 Subject: [PATCH 265/600] =?UTF-8?q?Guide/Working=5Fwith=5FObjects=20?= =?UTF-8?q?=E3=81=B8=E3=81=AE=E3=83=AA=E3=83=B3=E3=82=AF=E3=83=95=E3=83=A9?= =?UTF-8?q?=E3=82=B0=E3=83=A1=E3=83=B3=E3=83=88=E3=82=92=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/_redirects.txt | 52 +++++++++---------- files/ja/mozilla/firefox/releases/58/index.md | 2 +- .../web/javascript/guide/functions/index.md | 2 +- files/ja/web/javascript/guide/index.md | 8 +-- .../guide/working_with_objects/index.md | 2 +- .../reference/functions/get/index.md | 2 +- .../reference/functions/set/index.md | 2 +- .../reference/global_objects/array/index.md | 4 +- .../reference/global_objects/index.md | 2 +- .../object/__definegetter__/index.md | 2 +- .../object/__definesetter__/index.md | 2 +- .../object/__lookupgetter__/index.md | 2 +- .../object/__lookupsetter__/index.md | 2 +- 13 files changed, 42 insertions(+), 42 deletions(-) diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 3dbc32faa7fdc2..adf033222d602e 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -1575,23 +1575,23 @@ /ja/docs/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages /ja/docs/conflicting/Web/JavaScript/Inheritance_and_the_prototype_chain /ja/docs/JavaScript/Guide/Closures /ja/docs/Web/JavaScript/Closures /ja/docs/JavaScript/Guide/Core_Language_Features /ja/docs/Web/JavaScript/Guide -/ja/docs/JavaScript/Guide/Creating_New_Objects /ja/docs/Web/JavaScript/Guide/Working_with_Objects#creating_new_objects -/ja/docs/JavaScript/Guide/Creating_New_Objects-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_Objects#creating_new_objects -/ja/docs/JavaScript/Guide/Creating_New_Objects/Defining_Getters_and_Setters /ja/docs/Web/JavaScript/Guide/Working_with_Objects#defining_getters_and_setters -/ja/docs/JavaScript/Guide/Creating_New_Objects/Defining_Getters_and_Setters-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_Objects#defining_getters_and_setters -/ja/docs/JavaScript/Guide/Creating_New_Objects/Defining_Methods /ja/docs/Web/JavaScript/Guide/Working_with_Objects#defining_methods -/ja/docs/JavaScript/Guide/Creating_New_Objects/Defining_Methods-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_Objects#defining_methods -/ja/docs/JavaScript/Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type /ja/docs/Web/JavaScript/Guide/Working_with_Objects#defining_properties_for_an_object_type -/ja/docs/JavaScript/Guide/Creating_New_Objects/Deleting_Properties /ja/docs/Web/JavaScript/Guide/Working_with_Objects#deleting_properties -/ja/docs/JavaScript/Guide/Creating_New_Objects/Deleting_Properties-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_Objects#deleting_properties -/ja/docs/JavaScript/Guide/Creating_New_Objects/Indexing_Object_Properties /ja/docs/Web/JavaScript/Guide/Working_with_Objects#indexing_object_properties -/ja/docs/JavaScript/Guide/Creating_New_Objects/Indexing_Object_Properties-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_Objects#indexing_object_properties -/ja/docs/JavaScript/Guide/Creating_New_Objects/Using_Object_Initializers /ja/docs/Web/JavaScript/Guide/Working_with_Objects#using_object_initializers -/ja/docs/JavaScript/Guide/Creating_New_Objects/Using_Object_Initializers-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_Objects#using_object_initializers -/ja/docs/JavaScript/Guide/Creating_New_Objects/Using_a_Constructor_Function /ja/docs/Web/JavaScript/Guide/Working_with_Objects#using_a_constructor_function -/ja/docs/JavaScript/Guide/Creating_New_Objects/Using_a_Constructor_Function-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_Objects#using_a_constructor_function -/ja/docs/JavaScript/Guide/Creating_New_Objects/Using_this_for_Object_References /ja/docs/Web/JavaScript/Guide/Working_with_Objects#using_this_for_object_references -/ja/docs/JavaScript/Guide/Creating_New_Objects/Using_this_for_Object_References-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_Objects#using_this_for_object_references +/ja/docs/JavaScript/Guide/Creating_New_Objects /ja/docs/Web/JavaScript/Guide/Working_with_Objects#新しいオブジェクトの作成 +/ja/docs/JavaScript/Guide/Creating_New_Objects-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_Objects#新しいオブジェクトの作成 +/ja/docs/JavaScript/Guide/Creating_New_Objects/Defining_Getters_and_Setters /ja/docs/Web/JavaScript/Guide/Working_with_Objects#ゲッターとセッターの定義 +/ja/docs/JavaScript/Guide/Creating_New_Objects/Defining_Getters_and_Setters-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_Objects#ゲッターとセッターの定義 +/ja/docs/JavaScript/Guide/Creating_New_Objects/Defining_Methods /ja/docs/Web/JavaScript/Guide/Working_with_Objects#メソッドの定義 +/ja/docs/JavaScript/Guide/Creating_New_Objects/Defining_Methods-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_Objects#メソッドの定義 +/ja/docs/JavaScript/Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type /ja/docs/Web/JavaScript/Guide/Working_with_Objects#オブジェクト型に対するプロパティの定義 +/ja/docs/JavaScript/Guide/Creating_New_Objects/Deleting_Properties /ja/docs/Web/JavaScript/Guide/Working_with_Objects#プロパティの削除 +/ja/docs/JavaScript/Guide/Creating_New_Objects/Deleting_Properties-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_Objects#プロパティの削除 +/ja/docs/JavaScript/Guide/Creating_New_Objects/Indexing_Object_Properties /ja/docs/Web/JavaScript/Guide/Working_with_Objects#オブジェクトプロパティのインデックス付け +/ja/docs/JavaScript/Guide/Creating_New_Objects/Indexing_Object_Properties-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_Objects#オブジェクトプロパティのインデックス付け +/ja/docs/JavaScript/Guide/Creating_New_Objects/Using_Object_Initializers /ja/docs/Web/JavaScript/Guide/Working_with_Objects#オブジェクト初期化子の使用 +/ja/docs/JavaScript/Guide/Creating_New_Objects/Using_Object_Initializers-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_Objects#オブジェクト初期化子の使用 +/ja/docs/JavaScript/Guide/Creating_New_Objects/Using_a_Constructor_Function /ja/docs/Web/JavaScript/Guide/Working_with_Objects#コンストラクター関数の使用 +/ja/docs/JavaScript/Guide/Creating_New_Objects/Using_a_Constructor_Function-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_Objects#コンストラクター関数の使用 +/ja/docs/JavaScript/Guide/Creating_New_Objects/Using_this_for_Object_References /ja/docs/Web/JavaScript/Guide/Working_with_Objects#オブジェクト参照のための_this_の使用 +/ja/docs/JavaScript/Guide/Creating_New_Objects/Using_this_for_Object_References-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_Objects#オブジェクト参照のための_this_の使用 /ja/docs/JavaScript/Guide/Details_of_the_Object_Model /ja/docs/conflicting/Web/JavaScript/Inheritance_and_the_prototype_chain /ja/docs/JavaScript/Guide/Expressions_and_Operators /ja/docs/Web/JavaScript/Guide/Expressions_and_operators /ja/docs/JavaScript/Guide/Expressions_and_Operators-redirect-1 /ja/docs/Web/JavaScript/Guide/Expressions_and_operators @@ -4115,15 +4115,15 @@ /ja/docs/Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages /ja/docs/conflicting/Web/JavaScript/Inheritance_and_the_prototype_chain /ja/docs/Web/JavaScript/Guide/Closures /ja/docs/Web/JavaScript/Closures /ja/docs/Web/JavaScript/Guide/Core_Language_Features /ja/docs/Web/JavaScript/Guide -/ja/docs/Web/JavaScript/Guide/Creating_New_Objects /ja/docs/Web/JavaScript/Guide/Working_with_Objects#creating_new_objects -/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Defining_Getters_and_Setters /ja/docs/Web/JavaScript/Guide/Working_with_Objects#defining_getters_and_setters -/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Defining_Methods /ja/docs/Web/JavaScript/Guide/Working_with_Objects#defining_methods -/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type /ja/docs/Web/JavaScript/Guide/Working_with_Objects#defining_properties_for_an_object_type -/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Deleting_Properties /ja/docs/Web/JavaScript/Guide/Working_with_Objects#deleting_properties -/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Indexing_Object_Properties /ja/docs/Web/JavaScript/Guide/Working_with_Objects#indexing_object_properties -/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Using_Object_Initializers /ja/docs/Web/JavaScript/Guide/Working_with_Objects#using_object_initializers -/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Using_a_Constructor_Function /ja/docs/Web/JavaScript/Guide/Working_with_Objects#using_a_constructor_function -/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Using_this_for_Object_References /ja/docs/Web/JavaScript/Guide/Working_with_Objects#using_this_for_object_references +/ja/docs/Web/JavaScript/Guide/Creating_New_Objects /ja/docs/Web/JavaScript/Guide/Working_with_Objects#新しいオブジェクトの作成 +/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Defining_Getters_and_Setters /ja/docs/Web/JavaScript/Guide/Working_with_Objects#ゲッターとセッターの定義 +/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Defining_Methods /ja/docs/Web/JavaScript/Guide/Working_with_Objects#メソッドの定義 +/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type /ja/docs/Web/JavaScript/Guide/Working_with_Objects#オブジェクト型に対するプロパティの定義 +/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Deleting_Properties /ja/docs/Web/JavaScript/Guide/Working_with_Objects#プロパティの削除 +/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Indexing_Object_Properties /ja/docs/Web/JavaScript/Guide/Working_with_Objects#オブジェクトプロパティのインデックス付け +/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Using_Object_Initializers /ja/docs/Web/JavaScript/Guide/Working_with_Objects#オブジェクト初期化子の使用 +/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Using_a_Constructor_Function /ja/docs/Web/JavaScript/Guide/Working_with_Objects#コンストラクター関数の使用 +/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Using_this_for_Object_References /ja/docs/Web/JavaScript/Guide/Working_with_Objects#オブジェクト参照のための_this_の使用 /ja/docs/Web/JavaScript/Guide/Details_of_the_Object_Model /ja/docs/conflicting/Web/JavaScript/Inheritance_and_the_prototype_chain /ja/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain /ja/docs/Web/JavaScript/Inheritance_and_the_prototype_chain /ja/docs/Web/JavaScript/Guide/JavaScript_Overview /ja/docs/Web/JavaScript/Guide/Introduction diff --git a/files/ja/mozilla/firefox/releases/58/index.md b/files/ja/mozilla/firefox/releases/58/index.md index 726449899eb098..915f19e1f80b2f 100644 --- a/files/ja/mozilla/firefox/releases/58/index.md +++ b/files/ja/mozilla/firefox/releases/58/index.md @@ -136,7 +136,7 @@ _変更なし。_ ### JavaScript - 非標準の {{jsxref("Date.prototype.toLocaleFormat()")}} メソッドを削除しました ([Firefox バグ 818634](https://bugzil.la/818634))。詳細および移行方法について、[Warning: Date.prototype.toLocaleFormat is deprecated](/ja/docs/Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat) をご覧ください。 -- 非標準および非推奨の {{jsxref("Object.prototype.watch()")}} および {{jsxref("Object.prototype.unwatch", "unwatch()")}} メソッドを削除しました。今後は動作しません ([Firefox バグ 638054](https://bugzil.la/638054))。代わりに [setters および getters](/ja/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters) または [proxy](/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy) の使用を検討してください。 +- 非標準および非推奨の {{jsxref("Object.prototype.watch()")}} および {{jsxref("Object.prototype.unwatch", "unwatch()")}} メソッドを削除しました。今後は動作しません ([Firefox バグ 638054](https://bugzil.la/638054))。代わりに [setters および getters](/ja/docs/Web/JavaScript/Guide/Working_with_Objects#ゲッターとセッターの定義) または [proxy](/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy) の使用を検討してください。 - [レガシーイテレータープロトコル](/ja/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol)、[`StopIteration`](/ja/docs/Archive/Web/StopIteration) オブジェクト、[レガシージェネレーター関数](/ja/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function)、非標準の {{jsxref("Function.prototype.isGenerator()")}} メソッドを削除しました。代わりに ES2015 の [反復処理プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols) や、標準準拠の [イテレーターとジェネレーター](/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators) を使用してください ([Firefox バグ 1083482](https://bugzil.la/1083482), [Firefox バグ 1413867](https://bugzil.la/1413867), [Firefox バグ 1119777](https://bugzil.la/1119777))。 - 非標準の [配列内包](/ja/docs/Web/JavaScript/Reference/Operators/Array_comprehensions) および [ジェネレーター内包](/ja/docs/Web/JavaScript/Reference/Operators/Generator_comprehensions) を削除しました ([Firefox バグ 1414340](https://bugzil.la/1414340))。 diff --git a/files/ja/web/javascript/guide/functions/index.md b/files/ja/web/javascript/guide/functions/index.md index 4d85489bd85006..3ea6b272bfa039 100644 --- a/files/ja/web/javascript/guide/functions/index.md +++ b/files/ja/web/javascript/guide/functions/index.md @@ -156,7 +156,7 @@ function square(n) { > }; > ``` -関数の引数は、文字列や数値に限られてはいません。オブジェクト全体を関数に渡すこともできます。`show_props` 関数 ([オブジェクトを利用する](/ja/docs/Web/JavaScript/Guide/Working_with_Objects#objects_and_properties)の章で定義) は、オブジェクトを引数にとる関数の例です。 +関数の引数は、文字列や数値に限られてはいません。オブジェクト全体を関数に渡すこともできます。`show_props` 関数 ([オブジェクトを利用する](/ja/docs/Web/JavaScript/Guide/Working_with_Objects#オブジェクトとプロパティ)の章で定義) は、オブジェクトを引数にとる関数の例です。 関数はその関数自身を呼び出すこともできます。例えば、ここに階乗を計算する関数を示します。 diff --git a/files/ja/web/javascript/guide/index.md b/files/ja/web/javascript/guide/index.md index 725c0055b72bcd..3497af30dafa8d 100644 --- a/files/ja/web/javascript/guide/index.md +++ b/files/ja/web/javascript/guide/index.md @@ -85,10 +85,10 @@ slug: Web/JavaScript/Guide

  • オブジェクトを利用する -

    オブジェクトとそのプロパティ
    新しいオブジェクトの作成
    メソッドの定義
    getter と setter

    +

    オブジェクトとそのプロパティ
    新しいオブジェクトの作成
    メソッドの定義
    getter と setter

  • オブジェクトモデルの詳細

    Date: Sun, 10 Sep 2023 19:38:30 +0900 Subject: [PATCH 266/600] =?UTF-8?q?Iteration=5Fprotocols=20=E3=82=84=20Ind?= =?UTF-8?q?exed=5Fcollections=20=E3=81=B8=E3=81=AE=E3=83=AA=E3=83=B3?= =?UTF-8?q?=E3=82=AF=E3=83=95=E3=83=A9=E3=82=B0=E3=83=A1=E3=83=B3=E3=83=88?= =?UTF-8?q?=E3=82=92=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/mozilla/firefox/releases/115/index.md | 2 +- files/ja/web/javascript/reference/global_objects/map/index.md | 2 +- .../web/javascript/reference/global_objects/promise/index.md | 2 +- .../reference/global_objects/set/@@iterator/index.md | 2 +- .../reference/global_objects/string/@@iterator/index.md | 2 +- .../reference/global_objects/typedarray/@@iterator/index.md | 2 +- .../reference/statements/async_function_star_/index.md | 2 +- .../javascript/reference/statements/for-await...of/index.md | 4 ++-- 8 files changed, 9 insertions(+), 9 deletions(-) diff --git a/files/ja/mozilla/firefox/releases/115/index.md b/files/ja/mozilla/firefox/releases/115/index.md index e551ffda32f52b..2cf76298b7e008 100644 --- a/files/ja/mozilla/firefox/releases/115/index.md +++ b/files/ja/mozilla/firefox/releases/115/index.md @@ -24,7 +24,7 @@ l10n: ### JavaScript - {{jsxref("Array.fromAsync()")}} 静的メソッドをサポートしました。 - このメソッドは [非同期反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#the_async_iterator_and_async_iterable_protocols)、[反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol)、あるいは [配列のような](/ja/docs/Web/JavaScript/Guide/Indexed_collections#working_with_array-like_objects) オブジェクトから、新たにシャローコピーした `Array` のインスタンスを非同期に返します ([Firefox bug 1795816](https://bugzil.la/1795816))。 + このメソッドは [非同期反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#非同期イテレーターと非同期反復可能プロトコル)、[反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)、あるいは [配列のような](/ja/docs/Web/JavaScript/Guide/Indexed_collections#配列風オブジェクトの扱い) オブジェクトから、新たにシャローコピーした `Array` のインスタンスを非同期に返します ([Firefox bug 1795816](https://bugzil.la/1795816))。 - `Array` および `TypedArray` メソッドで [`Array.toReversed()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/toReversed)、[`Array.toSorted()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/toSorted)、[`Array.toSpliced()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/toSpliced)、[`Array.with()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/with)、[`TypedArrays.toReversed()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/toReversed)、[`TypedArrays.toSorted()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/toSorted)、[`TypedArrays.with()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/with) をサポートしました。 これらのメソッドは、シャローコピーされた要素を持つ新しい配列を返します (`to` 接頭辞がつかない似た名前のメソッドは、配列の要素を直接変更します) ([Firefox bug 1811057](https://bugzil.la/1811057))。 diff --git a/files/ja/web/javascript/reference/global_objects/map/index.md b/files/ja/web/javascript/reference/global_objects/map/index.md index 4107cf08c574c6..fb6b96e63afd1d 100644 --- a/files/ja/web/javascript/reference/global_objects/map/index.md +++ b/files/ja/web/javascript/reference/global_objects/map/index.md @@ -125,7 +125,7 @@ l10n: では反復処理を行うのに、いくつかの形でキーの一覧を取得して、そのうえで反復処理を行う必要があります。

    Object は 反復処理プロトコルを実装していないので、オブジェクトを JavaScript の for...of Date: Mon, 17 Jul 2023 09:40:56 +0900 Subject: [PATCH 267/600] =?UTF-8?q?2023/08/23=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/html/element/var/index.md | 132 ++++++++++++------------- 1 file changed, 66 insertions(+), 66 deletions(-) diff --git a/files/ja/web/html/element/var/index.md b/files/ja/web/html/element/var/index.md index 52e1fa1b2c6ccc..36734187a7c9ba 100644 --- a/files/ja/web/html/element/var/index.md +++ b/files/ja/web/html/element/var/index.md @@ -1,68 +1,16 @@ --- title: ": 変数要素" slug: Web/HTML/Element/var +l10n: + sourceCommit: 963501cc097343860d8284f911e1b3a303b62d74 --- {{HTMLSidebar}} -HTML の**変数要素** (**``**) は、数式やプログラムコード内の変数の名前を表します。挙動はブラウザーに依存しますが、通常は現在のフォントのイタリック体を使って表示されます。 +**``** は [HTML](/ja/docs/Web/HTML) の要素で、数式やプログラムコード内の変数の名前を表します。挙動はブラウザーに依存しますが、通常は現在のフォントのイタリック体を使って表示されます。 {{EmbedInteractiveExample("pages/tabbed/var.html", "tabbed-shorter")}} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - コンテンツカテゴリ - - フローコンテンツ, - 記述コンテンツ, 知覚可能コンテンツ -
    許可されている内容 - 記述コンテンツ -
    タグの省略{{no_tag_omission}}
    許可されている親要素 - 記述コンテンツを受け入れるすべての要素 -
    暗黙の ARIA ロール - 対応するロールなし -
    許可されている ARIA ロールすべて
    DOM インターフェイス{{domxref("HTMLElement")}}
    - ## 属性 この要素には[グローバル属性](/ja/docs/Web/HTML/Global_attributes)のみがあります。 @@ -77,7 +25,7 @@ HTML の**変数要素** (**``**) は、数式やプログラムコード - {{HTMLElement("kbd")}}: HTML キーボード入力要素 - {{HTMLElement("samp")}}: HTML サンプル出力要素 -もし、意味的な目的ではなくスタイル付けの目的で `` が誤って使用されているのを見かけた場合は、 {{HTMLElement("span")}} と適切な CSS を使用するか、次のような適切な意味の要素を使用するかしてください。 +もし、意味的な目的ではなく装飾目的で `` が誤って使用されているのを見かけた場合は、{{HTMLElement("span")}} と適切な CSS を使用するか、次のような適切な意味の要素を使用するかしてください。 - {{HTMLElement("em")}} - {{HTMLElement("i")}} @@ -85,14 +33,11 @@ HTML の**変数要素** (**``**) は、数式やプログラムコード ### 既定のスタイル -多くのブラウザーは `` の表示時に {{cssxref("font-style")}} に `italic` を適用します。これは次のように CSS で上書きできます。 +多くのブラウザーは `` の表示時に {{cssxref("font-style")}} に `"italic"` を適用します。これは次のように CSS で上書きできます。 ```css var { - font: - bold 15px "Courier", - "Courier New", - monospace; + font-style: normal; } ``` @@ -106,7 +51,7 @@ var {

    単純な数式: x = y + 2

    ``` -出力結果は次の通りです。 +#### 結果 {{EmbedLiveSample("Basic_example", 650,80)}} @@ -129,8 +74,7 @@ var { ```html

    - minSpeed と maxSpeed 変数は、 - 端末の最低速度と最高速度を分当たりの回転数 (RPM) で 制御します。 + minSpeed と maxSpeed 変数は、端末の最低速度と最高速度を分当たりの回転数 (RPM) で制御します。

    ``` @@ -138,7 +82,63 @@ var { #### 結果 -{{EmbedLiveSample("Overriding_the_default_style", 650, 120)}} +{{EmbedLiveSample("Overriding_the_default_style", 650, 140)}} + +## 技術的概要 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + コンテンツカテゴリー + + フローコンテンツ, + 記述コンテンツ, 知覚可能コンテンツ +
    許可されている内容 + 記述コンテンツ +
    タグの省略{{no_tag_omission}}
    許可されている親要素 + 記述コンテンツを受け入れるすべての要素 +
    暗黙の ARIA ロール + 対応するロールなし +
    許可されている ARIA ロールすべて
    DOM インターフェイス{{domxref("HTMLElement")}}
    ## 仕様書 @@ -146,4 +146,4 @@ var { ## ブラウザーの互換性 -{{Compat("html.elements.var")}} +{{Compat}} From bf759a2baf63cc6b3e97b3b42fa4bcebd546b9db Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 10 Sep 2023 22:02:22 +0900 Subject: [PATCH 268/600] Update index.md --- files/ja/web/html/element/var/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/html/element/var/index.md b/files/ja/web/html/element/var/index.md index 36734187a7c9ba..874ba28a826817 100644 --- a/files/ja/web/html/element/var/index.md +++ b/files/ja/web/html/element/var/index.md @@ -72,7 +72,7 @@ var { #### HTML -```html +```html-nolint

    minSpeed と maxSpeed 変数は、端末の最低速度と最高速度を分当たりの回転数 (RPM) で制御します。

    From d3bb040b83b5580f859cfe5bac4c37bcbaa4c834 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 23 May 2023 09:20:54 +0900 Subject: [PATCH 269/600] =?UTF-8?q?2023/03/08=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/css/index.md | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/files/ja/web/api/css/index.md b/files/ja/web/api/css/index.md index 1ae7edffe35932..02490a6bccd379 100644 --- a/files/ja/web/api/css/index.md +++ b/files/ja/web/api/css/index.md @@ -9,10 +9,6 @@ l10n: **`CSS`** インターフェイス は CSS に関連した便利なメソッドを持っています。このインターフェイスにはオブジェクトは実装されていません。静的メソッドのみがあり、実用的なインターフェイスになっています。 -## プロパティ - -_CSS インターフェイスはユーティリティインターフェイスです。この型のオブジェクトは作成できませんん。静的プロパティのみが定義されています。_ - ### 静的プロパティ - {{DOMxRef("CSS.highlights_static", "CSS.highlights")}} {{Experimental_Inline}} @@ -42,6 +38,10 @@ _継承している静的メソッドはありません。_ CSS.em(3); // CSSUnitValue {value: 3, unit: "em"} ``` +## インスタンスメソッド + +_CSS インターフェイスはユーティリティインターフェイスです。この型のオブジェクトは作成できません。静的プロパティのみが定義されています。_ + ## 仕様書 {{Specifications}} @@ -49,7 +49,3 @@ _継承している静的メソッドはありません。_ ## ブラウザーの互換性 {{Compat}} - -## 関連情報 - -- [Components.utils.importGlobalProperties](/ja/docs/Components.utils.importGlobalProperties) From 5885c86233ca3f5eadc67d547d279c04cbf915f0 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 3 Jun 2023 11:13:10 +0900 Subject: [PATCH 270/600] =?UTF-8?q?2023/03/02=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/domstringmap/index.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/files/ja/web/api/domstringmap/index.md b/files/ja/web/api/domstringmap/index.md index e23ace2bc4280b..0cd33e5ef48b01 100644 --- a/files/ja/web/api/domstringmap/index.md +++ b/files/ja/web/api/domstringmap/index.md @@ -1,11 +1,13 @@ --- title: DOMStringMap slug: Web/API/DOMStringMap +l10n: + sourceCommit: 7671d18ab2d141906af448d5bb125eebc16d3994 --- {{ APIRef("HTML DOM") }} -**`DOMStringMap`** インターフェイスは、要素に追加されたカスタム属性のデータを表すために {{ domxref("HTMLElement.dataset") }} 属性で使用されます。 +**`DOMStringMap`** インターフェイスは、要素に追加されたカスタム属性のデータを表すために {{domxref("HTMLElement.dataset")}}/{{domxref("SVGElement.dataset")}} 属性で使用されます。 ## 仕様書 @@ -13,9 +15,9 @@ slug: Web/API/DOMStringMap ## ブラウザーの互換性 -{{Compat("api.DOMStringMap")}} +{{Compat}} ## 関連情報 -- {{ domxref("HTMLElement.dataset") }} -- [グローバル属性 - data-\*](/ja/docs/Web/HTML/Global_attributes#attr-data-*) +- {{domxref("HTMLElement.dataset")}} / {{domxref("SVGElement.dataset")}} +- [グローバル属性 - `data-*`](/ja/docs/Web/HTML/Global_attributes/data-*) From 56c2aff064e387740a971bf4ce3b94ff6ea7ff4a Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 10 Sep 2023 22:41:15 +0900 Subject: [PATCH 271/600] =?UTF-8?q?2023/09/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../global_objects/array/fromasync/index.md | 204 ++++++++++++++++++ .../global_objects/array/toreversed/index.md | 89 ++++++++ .../global_objects/array/tosorted/index.md | 101 +++++++++ .../global_objects/array/with/index.md | 103 +++++++++ 4 files changed, 497 insertions(+) create mode 100644 files/ja/web/javascript/reference/global_objects/array/fromasync/index.md create mode 100644 files/ja/web/javascript/reference/global_objects/array/toreversed/index.md create mode 100644 files/ja/web/javascript/reference/global_objects/array/tosorted/index.md create mode 100644 files/ja/web/javascript/reference/global_objects/array/with/index.md diff --git a/files/ja/web/javascript/reference/global_objects/array/fromasync/index.md b/files/ja/web/javascript/reference/global_objects/array/fromasync/index.md new file mode 100644 index 00000000000000..68d99d5c386e7a --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/fromasync/index.md @@ -0,0 +1,204 @@ +--- +title: Array.fromAsync() +slug: Web/JavaScript/Reference/Global_Objects/Array/fromAsync +l10n: + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de +--- + +{{JSRef}} + +**`Array.fromAsync()`** は静的メソッドで、[非同期反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#非同期イテレーターと非同期反復可能プロトコル)オブジェクト、[反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)オブジェクト、[配列風](/ja/docs/Web/JavaScript/Guide/Indexed_collections#配列風オブジェクトの扱い)のオブジェクトから、シャローコピーされた新しい配列インスタンスを作成します。 + +## 構文 + +```js-nolint +Array.fromAsync(arrayLike) +Array.fromAsync(arrayLike, mapFn) +Array.fromAsync(arrayLike, mapFn, thisArg) +``` + +### 引数 + +- `arrayLike` + - : 配列に変換する非同期反復可能、反復可能、配列風オブジェクトです。 +- `mapFn` {{optional_inline}} + - : 配列の各要素に対して呼び出す関数です。指定された場合は、配列に追加するすべての値が最初にこの関数に渡され、 `mapFn` の返値が（[待機](/ja/docs/Web/JavaScript/Reference/Operators/await)後に）配列に追加されます。この関数は以下の引数で呼び出されます。 + - `element` + - : 配列内で現在処理中の要素です。すべての要素が最初に[待機状態](/ja/docs/Web/JavaScript/Reference/Operators/await)になるため、この値が [thenable](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise#thenables) になることはありません。 + - `index` + - : 配列の、現在処理中の要素のインデックスです。 +- `thisArg` {{optional_inline}} + - : `mapFn` 実行時に `this` として使用する値です。 + +### 返値 + +新しい {{jsxref("Promise")}} で、その履行値は新しい {{jsxref("Array")}} インスタンスです。 + +## 解説 + +`Array.fromAsync()` により、以下のものから配列を作成することができます。 + +- [非同期反復可能オブジェクト](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#非同期イテレーターと非同期反復可能プロトコル)（{{domxref("ReadableStream")}} や {{jsxref("AsyncGenerator")}} などのオブジェクト）、または、オブジェクトが非同期反復可能ではない場合、 +- [反復可能オブジェクト](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)（{{jsxref("Map")}} や {{jsxref("Set")}} 等のオブジェクト）、または、オブジェクトが反復可能ではない場合、 +- 配列風オブジェクト（`length` プロパティとインデックス値による要素を持つオブジェクト）。 + +`Array.fromAsync()` は {{jsxref("Statements/for-await...of", "for await...of")}} にとてもよく似た方法で非同期反復可能オブジェクトを反復処理します。 `Array.fromAsync()` は、以下をの点除いて {{jsxref("Array.from()")}} とほぼ同じ動きをします。 + +- `Array.fromAsync()` は非同期反復可能オブジェクトを扱うことができます。 +- `Array.fromAsync()` は配列インスタンスで履行される {{jsxref("Promise")}} を返します。 +- `Array.fromAsync()` が非同期反復可能オブジェクトを指定して呼び出された場合、配列に追加する各要素が最初に[待機](/ja/docs/Web/JavaScript/Reference/Operators/await)されます。 +- `mapFn` が指定された場合、入出力を内部的に待機します。 + +`Array.fromAsync()` と {{jsxref("Promise.all()")}} はどちらも、反復可能なプロミスを配列のプロミスに変換することができます。しかし、 2 つの重要な違いがあります。 + +- `Array.fromAsync()` はオブジェクトから得られる値を順番に待ちます。 `Promise.all()` はすべての値を同時に待ちます。 +- `Array.fromAsync()` は反復可能オブジェクトを遅延的に反復処理し、現在の値が決定するまで次の値を取得しません。 `Promise.all()` はすべての値を事前に取得し、それを待ちます。 + +## 例 + +### 非同期反復可能オブジェクトから配列を取得 + +```js +const asyncIterable = (async function* () { + for (let i = 0; i < 5; i++) { + await new Promise((resolve) => setTimeout(resolve, 10 * i)); + yield i; + } +})(); + +Array.fromAsync(asyncIterable).then((array) => console.log(array)); +// [0, 1, 2, 3, 4] +``` + +### 同期反復可能オブジェクトから配列を取得 + +```js +Array.fromAsync( + new Map([ + [1, 2], + [3, 4], + ]), +).then((array) => console.log(array)); +// [[1, 2], [3, 4]] +``` + +### プロミスを生成する同期反復可能オブジェクトから配列を取得 + +```js +Array.fromAsync( + new Set([Promise.resolve(1), Promise.resolve(2), Promise.resolve(3)]), +).then((array) => console.log(array)); +// [1, 2, 3] +``` + +### プロミスの配列風オブジェクトから配列を取得 + +```js +Array.fromAsync({ + length: 3, + 0: Promise.resolve(1), + 1: Promise.resolve(2), + 2: Promise.resolve(3), +}).then((array) => console.log(array)); +// [1, 2, 3] +``` + +### mapFn の使用 + +`mapFn` の入力と出力の両方について `Array.fromAsync()` は内部的に待機します。 + +```js +function delayedValue(v) { + return new Promise((resolve) => setTimeout(() => resolve(v), 100)); +} + +Array.fromAsync( + [delayedValue(1), delayedValue(2), delayedValue(3)], + (element) => delayedValue(element * 2), +).then((array) => console.log(array)); +// [2, 4, 6] +``` + +### Promise.all() との比較 + +`Array.fromAsync()` はオブジェクトから得られる値を順番に待ちます。 `Promise.all()` はすべての値を同時に待ちます。 + +```js +function* makeAsyncIterable() { + for (let i = 0; i < 5; i++) { + yield new Promise((resolve) => setTimeout(resolve, 100)); + } +} + +(async () => { + console.time("Array.fromAsync() time"); + await Array.fromAsync(makeAsyncIterable()); + console.timeEnd("Array.fromAsync() time"); + // Array.fromAsync() time: 503.610ms + + console.time("Promise.all() time"); + await Promise.all(makeAsyncIterable()); + console.timeEnd("Promise.all() time"); + // Promise.all() time: 101.728ms +})(); +``` + +### 同期反復可能オブジェクトのエラー処理なし + +[`for await...of`](/ja/docs/Web/JavaScript/Reference/Statements/for-await...of#同期の反復可能オブジェクトおよびジェネレーターの反復処理) と同様に、反復処理されるオブジェクトが同期反復可能オブジェクトで、反復処理中にエラーが発生した場合、基盤となるイテレーターの `return()` メソッドは呼び出されず、イテレーターは閉じられません。 + +```js +function* generatorWithRejectedPromises() { + try { + yield 0; + yield Promise.reject(3); + } finally { + console.log("called finally"); + } +} + +(async () => { + try { + await Array.fromAsync(generatorWithRejectedPromises()); + } catch (e) { + console.log("caught", e); + } +})(); +// caught 3 +// No "called finally" message +``` + +イテレーターを閉じる必要がある場合は、代わりに {{jsxref("Statements/for...of", "for...of")}} ループを使用して、各値を `await` する必要があります。 + +```js +(async () => { + const arr = []; + try { + for (const val of generatorWithRejectedPromises()) { + arr.push(await val); + } + } catch (e) { + console.log("caught", e); + } +})(); +// called finally +// caught 3 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`Array.fromAsync` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#arrayfromasync) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} +- {{jsxref("Array/Array", "Array()")}} +- {{jsxref("Array.of()")}} +- {{jsxref("Array.from()")}} +- {{jsxref("Statements/for-await...of", "for await...of")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/toreversed/index.md b/files/ja/web/javascript/reference/global_objects/array/toreversed/index.md new file mode 100644 index 00000000000000..3c92290dd6df28 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/toreversed/index.md @@ -0,0 +1,89 @@ +--- +title: Array.prototype.toReversed() +slug: Web/JavaScript/Reference/Global_Objects/Array/toReversed +l10n: + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de +--- + +{{JSRef}} + +**`toReversed()`** は {{jsxref("Array")}} インスタンスのメソッドで、 {{jsxref("Array/reverse", "reverse()")}} メソッドに対応する[コピー](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#コピーメソッドと変更メソッド)メソッドです。これは、要素を逆順に並べた新しい配列を返します。 + +## 構文 + +```js-nolint +toReversed() +``` + +### 引数 + +なし。 + +### 返値 + +要素を逆順に格納した新しい配列です。 + +## 解説 + +`toReversed()` メソッドは、呼び出した配列オブジェクトの要素を逆順に並べ替えて新しい配列を返します。 + +[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)に対して使用した場合、 `toReversed()` メソッドは空のスロットを `undefined` という値があるものとして反復処理します。 + +`toReversed()` メソッドは[汎用](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。 `this` の値が `length` プロパティを持っており、整数のキーのプロパティがあることのみを期待します。 + +## 例 + +### 配列内の要素を反転 + +次の例では、 3 つの要素を格納した配列 `items` を作成し、次に `items` の逆の配列を新しく作成します。このとき `items` 配列は変更されません。 + +```js +const items = [1, 2, 3]; +console.log(items); // [1, 2, 3] + +const reversedItems = items.toReversed(); +console.log(reversedItems); // [3, 2, 1] +console.log(items); // [1, 2, 3] +``` + +### 疎配列に対する toReversed() の使用 + +`toReversed()` の返値は決して疎配列にはなりません。空のスロットは返す配列の `undefined` になります。 + +```js +console.log([1, , 3].toReversed()); // [3, undefined, 1] +console.log([1, , 3, 4].toReversed()); // [4, 3, undefined, 1] +``` + +### 配列以外のオブジェクトに対する toReversed() の呼び出し + +`toReversed()` メソッドは `this` の `length` プロパティを読み取ります。そして、`length - 1` から `0` までの整数のキーを持つ各プロパティを降順に訪れ、現在のプロパティの値を配列の末尾に追加して返します。 + +```js +const arrayLike = { + length: 3, + unrelated: "foo", + 2: 4, +}; +console.log(Array.prototype.toReversed.call(arrayLike)); +// [4, undefined, undefined] +// '0' と '1' インデックスは存在しませんので、未定義となります。 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`Array.prototype.toReversed` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#change-array-by-copy) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array.prototype.reverse()")}} +- {{jsxref("Array.prototype.toSorted()")}} +- {{jsxref("Array.prototype.toSpliced()")}} +- {{jsxref("Array.prototype.with()")}} +- {{jsxref("TypedArray.prototype.toReversed()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/tosorted/index.md b/files/ja/web/javascript/reference/global_objects/array/tosorted/index.md new file mode 100644 index 00000000000000..5c70e982ddce1c --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/tosorted/index.md @@ -0,0 +1,101 @@ +--- +title: Array.prototype.toSorted() +slug: Web/JavaScript/Reference/Global_Objects/Array/toSorted +l10n: + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de +--- + +{{JSRef}} + +**`toSorted()`** は {{jsxref("Array")}} インスタンスのメソッドで、 {{jsxref("Array/sort", "sort()")}} メソッドに対応する[コピー](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#コピーメソッドと変更メソッド)メソッドです。これは、要素を昇順にソートした新しい配列を返します。 + +## 構文 + +```js-nolint +toSorted() +toSorted(compareFn) +``` + +### 引数 + +- `compareFn` {{optional_inline}} + + - : ソート順を定義する関数を指定します。省略した場合は、配列の要素を文字列に変換し、 Unicode コードポイントの値に従って並べ替えます。 + + - `a` + - : 比較する最初の要素です。 + - `b` + - : 比較する 2 番目の要素です。 + +### 返値 + +要素を昇順にソートした新しい配列です。 + +## 解説 + +`compareFn` 引数の情報については {{jsxref("Array/sort", "sort()")}} を参照してください。 + +[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)が使用された場合、 `toSorted()` メソッドは空のスロットを `undefined` という値があるものとして反復処理します。 + +`toSorted()` メソッドは[汎用](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。 `this` の値が `length` プロパティを持っており、整数のキーのプロパティがあることのみを期待します。 + +## 例 + +### 配列のソート + +```js +const months = ["Mar", "Jan", "Feb", "Dec"]; +const sortedMonths = months.toSorted(); +console.log(sortedMonths); // ['Dec', 'Feb', 'Jan', 'Mar'] +console.log(months); // ['Mar', 'Jan', 'Feb', 'Dec'] + +const values = [1, 10, 21, 2]; +const sortedValues = values.toSorted((a, b) => a - b); +console.log(sortedValues); // [1, 2, 10, 21] +console.log(values); // [1, 10, 21, 2] +``` + +他の利用例は、 {{jsxref("Array/sort", "sort()")}} を参照してください。 + +### 疎配列における toSorted() の使用 + +空のスロットは値が `undefined` であるかのようにソートされます。これらは常に配列の末尾にソートされ、 `compareFn` は呼び出されません。 + +```js +console.log(["a", "c", , "b"].toSorted()); // ['a', 'b', 'c', undefined] +console.log([, undefined, "a", "b"].toSorted()); // ["a", "b", undefined, undefined] +``` + +### 配列以外のオブジェクトに対する toSorted() の呼び出し + +`toSorted()` メソッドは `this` の `length` プロパティを読み取ります。そして、`length - 1` から `0` までの整数のキーを持つ各プロパティを降順に訪れ、現在のプロパティの値を配列の末尾に追加して返します。 + +```js +const arrayLike = { + length: 3, + unrelated: "foo", + 0: 5, + 2: 4, + 3: 3, // length が 3 なので toSorted() からは無視される +}; +console.log(Array.prototype.toSorted.call(arrayLike)); +// [4, 5, undefined] +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`Array.prototype.toSorted` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#change-array-by-copy) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array.prototype.sort()")}} +- {{jsxref("Array.prototype.toReversed()")}} +- {{jsxref("Array.prototype.toSpliced()")}} +- {{jsxref("Array.prototype.with()")}} +- {{jsxref("TypedArray.prototype.toSorted()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/with/index.md b/files/ja/web/javascript/reference/global_objects/array/with/index.md new file mode 100644 index 00000000000000..aaad58aa16e975 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/with/index.md @@ -0,0 +1,103 @@ +--- +title: Array.prototype.with() +slug: Web/JavaScript/Reference/Global_Objects/Array/with +l10n: + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de +--- + +{{JSRef}} + +**`with()`** は {{jsxref("Array")}} インスタンスのメソッドで、[ブラケット記法](/ja/docs/Web/JavaScript/Reference/Operators/Property_accessors#ブラケット記法)に対応する[コピー](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#コピーメソッドと変更メソッド)メソッドです。これは、指定された位置の要素を指定された値で置き換えた新しい配列を返します。 + +## 構文 + +```js-nolint +arrayInstance.with(index, value) +``` + +### 引数 + +- `index` + - : 配列を変更するゼロ基点のインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#integer_conversion)。 + - インデックスが負の場合は、配列の末尾から逆に数えます。 `index < 0` の場合、 `index + array.length` が使用されます。 + - 正規化後のインデックスが範囲を超えていた場合は、 {{jsxref("RangeError")}} 例外が発生します。 +- `value` + - : 指定された位置に割り当てる値です。 + +### 返値 + +インデックス `index` の要素を `value` に置き換えた新しい配列です。 + +### 例外 + +- {{jsxref("RangeError")}} + - : `index >= array.length` または `index < -array.length` の場合に発生します。 + +## 解説 + +with()` メソッドは、配列の指定された位置の値を変更し、指定されたインデックスの要素を指定された値で置き換えた新しい配列を返します。元の配列は変更しません。これにより、配列メソッドを連鎖させながら操作を行うことができます。 + +`with()` メソッドは決して[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)を生成しません。疎配列の場合、空のスロットは新しい配列の `undefined` に置き換わります。 + +`with()` メソッドは[汎用](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。 `this` の値が `length` プロパティを持っており、整数のキーのプロパティがあることのみを期待します。 + +## 例 + +### 単一の要素を変更した新しい配列を作成 + +```js +const arr = [1, 2, 3, 4, 5]; +console.log(arr.with(2, 6)); // [1, 2, 6, 4, 5] +console.log(arr); // [1, 2, 3, 4, 5] +``` + +### 配列メソッドの連鎖 + +`with()` メソッドを使用すると、配列の単一の要素を更新してから、他の配列メソッドを適用することができます。 + +```js +const arr = [1, 2, 3, 4, 5]; +console.log(arr.with(2, 6).map((x) => x ** 2)); // [1, 4, 36, 16, 25] +``` + +### 疎配列に対する with() の使用 + +`with()` メソッドは常に密配列を生成します。 + +```js +const arr = [1, , 3, 4, , 6]; +console.log(arr.with(0, 2)); // [2, undefined, 3, 4, undefined, 6] +``` + +### 配列以外のオブジェクトに対する with() の呼び出し + +`with()` メソッドは新しい配列を生成して返します。このメソッドは `this` の `length` プロパティを読み込み、次にキーが `length` より小さい非負の整数である各プロパティにアクセスします。`this` の各プロパティにアクセスすると、プロパティのキーに等しいインデックスの配列要素がプロパティの値に設定されます。最後に、配列の `index` の値が `value` に設定されます。 + +```js +const arrayLike = { + length: 3, + unrelated: "foo", + 0: 5, + 2: 4, + 3: 3, // length が 3 なので toSorted() からは無視される +}; +console.log(Array.prototype.with.call(arrayLike, 0, 1)); +// [ 1, undefined, 4 ] +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`Array.prototype.with` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#change-array-by-copy) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array.prototype.toReversed()")}} +- {{jsxref("Array.prototype.toSorted()")}} +- {{jsxref("Array.prototype.toSpliced()")}} +- {{jsxref("TypedArray.prototype.with()")}} From 97b18b4816c0f354fcadc2a5cbc496226b125f99 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 10 Sep 2023 23:27:20 +0900 Subject: [PATCH 272/600] =?UTF-8?q?2023/09/01=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../global_objects/array/tospliced/index.md | 121 ++++++++++++++++++ 1 file changed, 121 insertions(+) create mode 100644 files/ja/web/javascript/reference/global_objects/array/tospliced/index.md diff --git a/files/ja/web/javascript/reference/global_objects/array/tospliced/index.md b/files/ja/web/javascript/reference/global_objects/array/tospliced/index.md new file mode 100644 index 00000000000000..fa89f7bce19d5b --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/tospliced/index.md @@ -0,0 +1,121 @@ +--- +title: Array.prototype.toSpliced() +slug: Web/JavaScript/Reference/Global_Objects/Array/toSpliced +l10n: + sourceCommit: 88d71e500938fa8ca969fe4fe3c80a5abe23d767 +--- + +{{JSRef}} + +**`toSpliced()`** は {{jsxref("Array")}} インスタンスのメソッドで、 {{jsxref("Array/splice", "splice()")}} メソッドに対応する[コピー](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#コピーメソッドと変更メソッド)メソッドです。これは、指定された位置の要素を除去したり置き換えたりした新しい配列を返します。 + +## 構文 + +```js-nolint +toSpliced(start) +toSpliced(start, deleteCount) +toSpliced(start, deleteCount, item1) +toSpliced(start, deleteCount, item1, item2) +toSpliced(start, deleteCount, item1, item2, /* …, */ itemN) +``` + +### 引数 + +- `start` + + - : 配列の変更を始める位置のゼロから始まるインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。 + - 負のインデックスは配列の末尾から数えます。 `start < 0` の場合は `start + array.length` を使用します。 + - `start < -array.length` または `start` が省略された場合は `0` が使用されます。 + - `start >= array.length` である場合、削除される要素はありませんが、このメソッドは追加関数として動作し、提供されただけの要素を追加します。 + +- `deleteCount` {{optional_inline}} + + - : 整数で、配列内で `start` から削除する要素の数を示します。 + + `deleteCount` を省略した場合、またはその値が `start` で指定した位置以降の要素数以上の場合、 `start` から配列の末尾までのすべての要素が削除されます。ただし、もし `itemN` 引数を渡したい場合は、 `Infinity` を `deleteCount` に渡して `start` 以降の要素をすべて削除してください。明示的に `undefined` を指定すると `0` に[変換](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)されてしまうからです。 + + `deleteCount` が `0` または負の場合、要素は除去されません。 + この場合、少なくとも 1 つの新しい要素を指定する必要があります（下記参照）。 + +- `item1`, …, `itemN` {{optional_inline}} + + - : 配列に追加する要素を `start` から始めます。 + + 要素を指定しない場合、 `toSpliced()` は配列から要素を取り除くだけです。 + +### 返値 + +`start`, `item1`, `item2`, …, `itemN` より前のすべての要素と、 `start + deleteCount` より後のすべての要素からなる新しい配列です。 + +## 解説 + +`toSpliced()` メソッドは `splice()` と同様に、一度に複数のことを行います。指定されたインデックスの位置から、指定された数の要素を配列から除去し、同じインデックスの位置に指定された要素を挿入します。しかし、元の配列を変更するのではなく、新しい配列を返します。したがって、削除された要素はこのメソッドからは返されません。 + +`toSpliced()` メソッドは決して[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)を生成しません。疎配列の場合、空のスロットは新しい配列の `undefined` に置き換わります。 + +`toSpliced()` メソッドは[汎用](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。 `this` の値が `length` プロパティを持っており、整数のキーのプロパティがあることのみを期待します。 + +## 例 + +### 要素の削除、追加、置き換え + +`toSpliced()` を使用すると、配列の要素を削除、追加、置き換えることができ、`slice()` や `concat()` を使用するよりも効率的に新しい配列を作成することができます。 + +```js +const months = ["Jan", "Mar", "Apr", "May"]; + +// インデックス 1 の要素の挿入 +const months2 = months.toSpliced(1, 0, "Feb"); +console.log(months2); // ["Jan", "Feb", "Mar", "Apr", "May"] + +// インデックス 2 から始まる 2 つの要素を削除 +const months3 = months2.toSpliced(2, 2); +console.log(months3); // ["Jan", "Feb", "May"] + +// インデックス 1 の要素を 2 つの新しい要素で置き換え +const months4 = months3.toSpliced(1, 1, "Feb", "Mar"); +console.log(months4); // ["Jan", "Feb", "Mar", "May"] + +// 元配列は変更しない +console.log(months); // ["Jan", "Mar", "Apr", "May"] +``` + +### 疎配列に対する toSpliced() の使用 + +`toSpliced()` メソッドは常に密な配列を作成します。 + +```js +const arr = [1, , 3, 4, , 6]; +console.log(arr.toSpliced(1, 2)); // [1, 4, undefined, 6] +``` + +### 配列以外のオブジェクトに対する toSpliced() の呼び出し + +`toSpliced()` メソッドは `this` の `length` プロパティを読み取ります。そして、必要な整数キーのプロパティを読み込み、新しい配列に書き込みます。 + +```js +const arrayLike = { + length: 3, + unrelated: "foo", + 0: 5, + 2: 4, +}; +console.log(Array.prototype.toSpliced.call(arrayLike, 0, 1, 2, 3)); +// [2, 3, undefined, 4] +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`Array.prototype.toSpliced` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#change-array-by-copy) +- {{jsxref("Array.prototype.splice()")}} +- {{jsxref("Array.prototype.toReversed()")}} +- {{jsxref("Array.prototype.toSorted()")}} +- {{jsxref("Array.prototype.with()")}} From f031856a8bb301d1c1c523c79ddca6fb77ffbb90 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 14 Sep 2023 23:30:36 +0900 Subject: [PATCH 273/600] =?UTF-8?q?2023/09/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= =?UTF-8?q?=20(#15760)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2023/09/07 時点の英語版に同期 * 2023/09/07 時点の英語版に同期 * Prettier の結果を反映 --- .../global_objects/array/sort/index.md | 184 +++++++++--------- 1 file changed, 95 insertions(+), 89 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/array/sort/index.md b/files/ja/web/javascript/reference/global_objects/array/sort/index.md index f169c3a05b449b..a5ac8853e0c3d1 100644 --- a/files/ja/web/javascript/reference/global_objects/array/sort/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/sort/index.md @@ -2,47 +2,38 @@ title: Array.prototype.sort() slug: Web/JavaScript/Reference/Global_Objects/Array/sort l10n: - sourceCommit: 9b38f886d21c5d0a428f58acb20c4d0fc6c2e098 + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- {{JSRef}} -**`sort()`** メソッドは、配列の要素を[その場](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0)でソートし、ソートされた同じ配列の参照を返します。既定のソート順は昇順で、要素を文字列に変換してから、 UTF-16 コード単位の値の並びとして比較します。 +**`sort()`** は {{jsxref("Array")}} のメソッドで、配列の要素を[その場](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0)でソートし、ソートされた同じ配列の参照を返します。既定のソート順は昇順で、要素を文字列に変換してから、 UTF-16 コード単位の値の並びとして比較します。 ソートの時間的・空間的予測値は実装に依存するため、保証はできません。 +元の配列を変更せずに配列内の要素をソートするには、 {{jsxref("Array/toSorted", "toSorted()")}} を使用してください。 + {{EmbedInteractiveExample("pages/js/array-sort.html")}} ## 構文 -```js -// 関数なし -sort(); - -// アロー関数 -sort((a, b) => { - /* … */ -}); - -// 比較関数 -sort(compareFn); - -// インライン比較関数 -sort(function compareFn(a, b) { - /* … */ -}); +```js-nolint +sort() +sort(compareFn) ``` ### 引数 - `compareFn` {{optional_inline}} - - : ソート順を定義する関数を指定します。省略された場合、配列の各要素は文字列に変換され、各文字の Unicode コードポイント順に従ってソートされます。 + - : ソート順を定義する関数です。返値は、 2 つの要素の相対順序を示す符号を持つ数値である必要があります。 `a` が `b` より小さい場合は負の値、`a` が `b` より大きい場合は正の値、等しい場合は 0 とします。 `NaN` は `0` として扱われます。この関数は次の引数で呼び出されます。 - `a` - - : 比較する第一要素。 + - : 比較する第一要素。 `undefined` になることはありません。 - `b` - - : 比較する第二要素。 + - : 比較する第二要素。 `undefined` になることはありません。 + + 省略した場合、配列の要素は文字列に変換され、各文字の Unicode コードポイント値に従って並べ替えられます。 ### 返値 @@ -52,27 +43,28 @@ sort(function compareFn(a, b) { `compareFn` が与えられなかった場合、`undefined` 以外のすべての配列要素は文字列に変換され、文字列が UTF-16 コード単位順でソートされます。例えば、"banana" は "cherry" の前に来ます。数値のソートでは、9 が 80 の前に来ますが、数値は文字列に変換されるため、Unicode 順で "80" が "9" の前に来ます。`undefined` の要素はすべて、配列の末尾に並べられます。 -> **メモ:** UTF-16 では、`\uFFFF` を超える Unicode 文字は 2 つのサロゲートコード単位にエンコードされ、`\uD800`-`\uDFFF` の範囲になります。それぞれのコード単位の値は比較では別々に扱われます。したがって、`\uD855\uDE51` というサロゲートペアで形成される文字は、`\uFF3A` の文字よりも前に並べられます。 +`sort()` メソッドは空のスロットを保持します。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)の場合、空のスロットは配列の末尾に移動され、常にすべての `undefined` の後に置かれます。 + +> **メモ:** UTF-16 では、`\uFFFF` を超える Unicode 文字は 2 つのサロゲートコード単位にエンコードされ、`\uD800` - `\uDFFF` の範囲になります。それぞれのコード単位の値は比較では別々に扱われます。したがって、`\uD855\uDE51` というサロゲートペアで形成される文字は、`\uFF3A` の文字よりも前に並べられます。 `compareFn` が与えられた場合、`undefined` 以外のすべての配列要素は比較関数の返値に基づきソートされます（`undefined` の要素はすべて、`compareFn` を呼び出すことなく配列の末尾へ並べられます）。 -| `compareFn(a, b)` の返値 | ソート順 | -| ------------------------ | ------------------------------- | -| > 0 | `a` を `b` の後に並べる | -| < 0 | `a` を `b` の前に並べる | -| === 0 | `a` と `b` の元の順序を維持する | +| `compareFn(a, b)` の返値 | ソート順 | +| ------------------------ | ------------------------------------------ | +| > 0 | `a` を `b` の後に並べる（例えば `[b, a]`） | +| < 0 | `a` を `b` の前に並べる（例えば `[a, b]`） | +| === 0 | `a` と `b` の元の順序を維持する | よって、比較関数は以下のような形式をもちます。 -```js +```js-nolint function compareFn(a, b) { if (ある順序の基準において a は b より小さい) { return -1; - } - if (その順序の基準において a は b より大きい) { + } else if (その順序の基準において a は b より大きい) { return 1; } - // a は b と等しくなければならない + // a は b と等しい return 0; } ``` @@ -82,10 +74,10 @@ function compareFn(a, b) { - _無害_: 比較関数は比較されるオブジェクトや外部の状態を変更しません。（これは重要です。比較関数がいつ、どのように呼び出されるかは保証されていないので、特定の呼び出しが外部に見える影響を及ぼしてはいけません）。 - _安定的_: 比較関数は、同じ組の入力に対して常に同じ結果を返します。 - _反射的_: `compareFn(a, a) === 0` となります。 -- _対称的_: `compareFn(a, b)` と `compareFn(b, a)` はともに `0` であるか、逆の符号でなければなりません。 +- _反対称的_: `compareFn(a, b)` と `compareFn(b, a)` はともに `0` であるか、逆の符号でなければなりません。 - _推移的_: `compareFn(a, b)` と `compareFn(b, c)` がともに正、0、負のいずれかであれば、 `compareFn(a, c)` は前の 2 つと同じ符号になります。 -上記の制約に適合する比較関数は、常に `1`, `0`, `-1` のすべてを返すか、あるいは一貫して `0` を返すことができます。例えば、比較関数が `1` と `0` のみを返す場合、あるいは `0` と `-1` のみを返す場合は、_対称性_ が崩れるので、確実にソートすることはできません。常に `0` を返す比較関数では、配列は全く変更されませんが、それでも信頼できます。 +上記の制約に適合する比較関数は、常に `1`, `0`, `-1` のすべてを返すか、あるいは一貫して `0` を返すことができます。例えば、比較関数が `1` と `0` のみを返す場合、あるいは `0` と `-1` のみを返す場合は、_反対称性_ が崩れるので、確実にソートすることはできません。常に `0` を返す比較関数では、配列は全く変更されませんが、それでも信頼できます。 既定の字句比較関数は、上記の制約をすべて満たしています。 @@ -97,54 +89,7 @@ function compareNumbers(a, b) { } ``` -`sort` メソッドは[関数式](/ja/docs/Web/JavaScript/Reference/Operators/function)や[アロー関数](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)と共に使用すると便利です。 - -```js -const numbers = [4, 2, 5, 1, 3]; -numbers.sort(function (a, b) { - return a - b; -}); -console.log(numbers); -// [1, 2, 3, 4, 5] - -// または - -const numbers2 = [4, 2, 5, 1, 3]; -numbers2.sort((a, b) => a - b); -console.log(numbers2); -// [1, 2, 3, 4, 5] -``` - -オブジェクトはプロパティの値の 1 つを指定して並べ替えることができます。 - -```js -const items = [ - { name: "Edward", value: 21 }, - { name: "Sharpe", value: 37 }, - { name: "And", value: 45 }, - { name: "The", value: -12 }, - { name: "Magnetic", value: 13 }, - { name: "Zeros", value: 37 }, -]; - -// value 順にソート -items.sort((a, b) => a.value - b.value); - -// name 順にソート -items.sort((a, b) => { - const nameA = a.name.toUpperCase(); // 大文字と小文字を無視する - const nameB = b.name.toUpperCase(); // 大文字と小文字を無視する - if (nameA < nameB) { - return -1; - } - if (nameA > nameB) { - return 1; - } - - // 名前が等しい - return 0; -}); -``` +`sort()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#generic_array_methods)です。このメソッドは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。文字列も配列風ですが、文字列は不変なので、このメソッドを適用するのには適していません。 ## 例 @@ -178,9 +123,42 @@ mixedNumericArray.sort(); // [1, 200, 40, 5, '700', '80', '9'] mixedNumericArray.sort(compareNumbers); // [1, 5, '9', 40, '80', 200, '700'] ``` +### オブジェクトの配列のソート + +オブジェクトの配列は、プロパティの値を比較することで並べ替えることができます。 + +```js +const items = [ + { name: "Edward", value: 21 }, + { name: "Sharpe", value: 37 }, + { name: "And", value: 45 }, + { name: "The", value: -12 }, + { name: "Magnetic", value: 13 }, + { name: "Zeros", value: 37 }, +]; + +// value によるソート +items.sort((a, b) => a.value - b.value); + +// name によるソート +items.sort((a, b) => { + const nameA = a.name.toUpperCase(); // 大文字小文字を無視 + const nameB = b.name.toUpperCase(); // 大文字小文字を無視 + if (nameA < nameB) { + return -1; + } + if (nameA > nameB) { + return 1; + } + + // names must be equal + return 0; +}); +``` + ### 非 ASCII 文字のソート -非 ASCII 文字、つまりアクセント記号付き文字（e, é, è, a, ä など）を含む文字列をソートする場合、英語以外の文字列は {{jsxref("String.prototype.localeCompare()")}} を使用してください。この関数は、それらの文字を比較して正しい順序で表示することができます。 +非 {{Glossary("ASCII")}} 文字、つまりアクセント記号付き文字（e, é, è, a, ä など）を含む文字列をソートする場合、英語以外の文字列は {{jsxref("String.prototype.localeCompare()")}} を使用してください。この関数は、それらの文字を比較して正しい順序で表示することができます。（訳注: 日本語をソートする場合も含みます。） ```js const items = ["réservé", "premier", "communiqué", "café", "adieu", "éclair"]; @@ -230,7 +208,7 @@ sorted[0] = 10; console.log(numbers[0]); // 10 ``` -元の配列を変更せずに `sort()` を行いたいが、他の配列のメソッド（[`map()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map) など）のように[シャローコピー](/ja/docs/Glossary/Shallow_copy)を返したい場合、 `sort()` を呼び出す前に[スプレッド構文](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)または [`Array.from()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from) を使用してシャローコピーを行うことができます。 +元の配列を変更せずに `sort()` を行いたいが、他の配列のメソッド（[`map()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map) など）のように[シャローコピー](/ja/docs/Glossary/Shallow_copy)を返したい場合は、 {{jsxref("Array/toSorted", "toSorted()")}} メソッドを使用してください。他にも、 `sort()` を呼び出す前に[スプレッド構文](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)または [`Array.from()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from) を使用してシャローコピーを行うことができます。 ```js const numbers = [3, 1, 4, 1, 5]; @@ -242,7 +220,7 @@ console.log(numbers[0]); // 3 ### ソートの安定性 -バージョン 10 （または ECMAScript 2019）以降、[仕様書](https://tc39.es/ecma262/#sec-array.prototype.sort)では `Array.prototype.sort` が安定していることが決められています。 +バージョン 10 （または ECMAScript 2019）以降、仕様書では `Array.prototype.sort` が安定していることが決められています。 例えば、成績と横に並んだ生徒のリストがあったとします。生徒のリストはすでにアルファベット順の名前でソートされていることに注意してください。 @@ -287,7 +265,7 @@ students.sort((firstItem, secondItem) => firstItem.grade - secondItem.grade); ### 正しくない形の比較関数でのソート -比較関数が[解説](#解説)で説明した無害性、安定性、反射性、対称性、推移性のルールをすべて満たしていない場合、プログラムの動作はうまく定義されません。 +比較関数が[解説](#解説)で説明した無害性、安定性、反射性、反対称性、推移性のルールをすべて満たしていない場合、プログラムの動作はうまく定義されません。 例えば、このコードを考えてください。 @@ -297,7 +275,7 @@ const compareFn = (a, b) => (a > b ? 1 : 0); arr.sort(compareFn); ``` -ここでの `compareFn` 関数は、対称性を満たしていないため、正しい形式ではありません。 `a > b` ならば `1` を返しますが、 `a` と `b` を入れ替えると、負の値ではなく `0` を返すようになります。そのため、生成される配列はエンジンによって異なります。例えば、V8（Chrome、Node.jsなどで使用）やJavaScriptCore（Safariで使用）は配列を全くソートせず、 `[3, 1, 4, 1, 5, 9]` を返しますが、SpiderMonkey（Firefoxで使用）は `[1, 1, 3, 4, 5, 9]` のように昇順に並べた配列を返すことになります。 +ここでの `compareFn` 関数は、反対称性を満たしていないため、正しい形式ではありません。 `a > b` ならば `1` を返しますが、 `a` と `b` を入れ替えると、負の値ではなく `0` を返すようになります。そのため、生成される配列はエンジンによって異なります。例えば、V8（Chrome、Node.js などで使用）や JavaScriptCore（Safari で使用）は配列を全くソートせず、 `[3, 1, 4, 1, 5, 9]` を返しますが、SpiderMonkey（Firefox で使用）は `[1, 1, 3, 4, 5, 9]` のように昇順に並べた配列を返すことになります。 しかし、`compareFn` 関数を少し変更して、`-1` や `0` を返すようにすると、次のようになります。 @@ -311,6 +289,30 @@ arr.sort(compareFn); この実装上の不整合があるため、常に 5 つの制約に従うことで、比較器を正しい形にすることをお勧めします。 +### 疎配列における sort() の使用 + +空のスロットは配列の末尾に移されます。 + +```js +console.log(["a", "c", , "b"].sort()); // ['a', 'b', 'c', empty] +console.log([, undefined, "a", "b"].sort()); // ["a", "b", undefined, empty] +``` + +### 配列以外のオブジェクトに対する sort() の呼び出し + +`sort()` メソッドは `this` の `length` プロパティを読み取ります。そして、`0` から `length - 1` までの範囲にある既存の整数キーのプロパティをすべて集合し、ソートして書き戻します。範囲内に存在しないプロパティがある場合、対応する末尾のプロパティは[削除](/ja/docs/Web/JavaScript/Reference/Operators/delete)され、あたかも存在しないプロパティが末尾にソートされたかのようになります。 + +```js +const arrayLike = { + length: 3, + unrelated: "foo", + 0: 5, + 2: 4, +}; +console.log(Array.prototype.sort.call(arrayLike)); +// { '0': 4, '1': 5, length: 3, unrelated: 'foo' } +``` + ## 仕様書 {{Specifications}} @@ -322,8 +324,12 @@ arr.sort(compareFn); ## 関連情報 - [`Array.prototype.sort` の安定性などを含んだ現代の実装 (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array) +- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド +- {{jsxref("Array")}} - {{jsxref("Array.prototype.reverse()")}} +- {{jsxref("Array.prototype.toSorted()")}} - {{jsxref("String.prototype.localeCompare()")}} -- [About the stability of the algorithm used by V8 engine](https://v8.dev/blog/array-sort) -- [V8 sort stability](https://v8.dev/features/stable-sort) -- [Mathias Bynens' sort stability demo](https://mathiasbynens.be/demo/sort-stability) +- {{jsxref("TypedArray.prototype.sort()")}} +- [Getting things sorted in V8](https://v8.dev/blog/array-sort) on v8.dev (2018) +- [Stable `Array.prototype.sort`](https://v8.dev/features/stable-sort) on v8.dev (2019) +- [`Array.prototype.sort` stability](https://mathiasbynens.be/demo/sort-stability) by Mathias Bynens From cd7311683a63adac440555d38b2bd9258f860b93 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 12 Sep 2023 08:37:20 +0900 Subject: [PATCH 274/600] =?UTF-8?q?2023/09/01=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/navigator/index.md | 166 ++++++++++++++++------------ 1 file changed, 98 insertions(+), 68 deletions(-) diff --git a/files/ja/web/api/navigator/index.md b/files/ja/web/api/navigator/index.md index 01a3f3dcc1e1b2..35e386797f79d8 100644 --- a/files/ja/web/api/navigator/index.md +++ b/files/ja/web/api/navigator/index.md @@ -1,6 +1,8 @@ --- title: Navigator slug: Web/API/Navigator +l10n: + sourceCommit: 074f2292d37c07f6e364830cd6fabc0b41a9db4f --- {{APIRef("DOM")}} @@ -9,104 +11,124 @@ slug: Web/API/Navigator `Navigator` オブジェクトは、読み取り専用の {{domxref("window.navigator")}} プロパティを使用して取得できます。 -## プロパティ +## インスタンスプロパティ _継承しているプロパティはありません。_ ### 標準プロパティ -- {{domxref("Navigator.connection")}} {{readonlyInline}} {{experimental_inline}} +- {{domxref("Navigator.clipboard")}} {{ReadOnlyInline}} + - : システムクリップボードへの読み書きアクセスを提供する {{domxref("Clipboard")}} オブジェクトです。 +- {{domxref("Navigator.connection")}} {{ReadOnlyInline}} {{Experimental_Inline}} - : 端末のネットワーク状態の情報を提供する {{domxref("NetworkInformation")}} オブジェクトを返します。 -- {{domxref("Navigator.cookieEnabled")}} {{readonlyinline}} +- {{domxref("Navigator.cookieEnabled")}} {{ReadOnlyInline}} - : Cookie への設定を無視する場合は false、それ以外は true を返します。 -- {{domxref("Navigator.credentials")}} {{readonlyInline}} +- {{domxref("Navigator.credentials")}} {{ReadOnlyInline}} - : ログインやログアウトの成功といったイベントが発生したときに、資格情報を要求してユーザーエージェントへ通知する手段を提供する {{domxref("CredentialsContainer")}} インターフェイスを返します。 -- {{domxref("Navigator.deviceMemory")}} {{readonlyInline}} {{experimental_inline}} +- {{domxref("Navigator.deviceMemory")}} {{ReadOnlyInline}} {{Experimental_Inline}} - : 端末のメモリーをギガバイト単位で返します。この値は 2 の累乗に最も近い値を 1024 で割った概算値です。 -- {{domxref("Navigator.doNotTrack")}} {{readonlyInline}} {{experimental_inline}} - - : ユーザーの do-not-track 設定の値を返します。この値が "yes" であるとき、ウェブサイトやアプリケーションはユーザーを追跡するべきではありません。 -- {{domxref("Navigator.geolocation")}} {{readonlyInline}} +- {{domxref("Navigator.geolocation")}} {{ReadOnlyInline}} - : 端末の物理的な場所を取得することができる {{domxref("Geolocation")}} オブジェクトを返します。 -- {{domxref("Navigator.hid")}} {{readonlyInline}} +- {{domxref("Navigator.gpu")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : 現在の閲覧コンテキストの {{domxref("GPU")}} オブジェクトを返します。 {{domxref("WebGPU_API", "WebGPU API", "", "nocode")}} のエントリーポイントです。 +- {{domxref("Navigator.hid")}} {{ReadOnlyInline}} - : {{domxref("HID")}} オブジェクトを返します。これは HID 機器の接続、接続されている HID 機器の列挙、接続されている HID 機器のイベントハンドラーなどのメソッドを提供します。 -- {{domxref("Navigator.hardwareConcurrency")}} {{readonlyInline}} +- {{domxref("Navigator.hardwareConcurrency")}} {{ReadOnlyInline}} - : 使用可能な論理プロセッサーコアの数を返します。 -- {{domxref('Navigator.keyboard')}} {{readonlyinline}} {{experimental_inline}} +- {{domxref("Navigator.ink")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : 現在の文書の {{domxref("Ink")}} オブジェクトを返し、 [インク API](/ja/docs/Web/API/Ink_API) の機能へのアクセスを提供します。 +- {{domxref('Navigator.keyboard')}} {{ReadOnlyInline}} {{Experimental_Inline}} - : {{domxref('Keyboard')}} オブジェクトを返し、キーボード配置マップを受け取る関数へのアクセスを提供したり、物理キーボードからキーの押下のキャプチャを有効化・無効化したりできるようにします。 -- {{domxref("Navigator.language")}} {{readonlyInline}} - - : ユーザーにとって一番望ましい言語 (たいていはブラウザー UI の言語) の {{domxref("DOMString")}} を返します。不明な場合には `null` を返します。 -- {{domxref("Navigator.languages")}} {{readonlyInline}} {{experimental_inline}} - - : ユーザーが知っている言語を表す {{domxref("DOMString")}} を、望ましい順に並べた配列を返します。 -- {{domxref("Navigator.locks")}} {{readonlyinline}} {{experimental_inline}} +- {{domxref("Navigator.language")}} {{ReadOnlyInline}} + - : ユーザーにとって一番望ましい言語（たいていはブラウザー UI の言語）の文字列を返します。不明な場合には `null` を返します。 +- {{domxref("Navigator.languages")}} {{ReadOnlyInline}} + - : ユーザーが知っている言語を表す文字列を、望ましい順に並べた配列を返します。 +- {{domxref("Navigator.locks")}} {{ReadOnlyInline}} - : {{domxref("LockManager")}} オブジェクトを返します。これは、新しい {{domxref('Lock')}} オブジェクトを要求したり、既存の {{domxref('Lock')}} オブジェクトをクエリしたりするためのものです。 -- {{domxref("Navigator.maxTouchPoints")}} {{readonlyInline}} +- {{domxref("Navigator.maxTouchPoints")}} {{ReadOnlyInline}} - : 現在の端末で対応している同時タッチ点の最大数を返します。 -- {{domxref("Navigator.mediaCapabilities")}} {{readonlyinline}} {{experimental_inline}} +- {{domxref("Navigator.mediaCapabilities")}} {{ReadOnlyInline}} - : 指定された形式のデコードおよびエンコード能力、それに出力能力についての情報が得られる {{domxref("MediaCapabilities")}} オブジェクトを返します。 -- {{domxref("Navigator.mediaDevices")}} {{readonlyinline}} +- {{domxref("Navigator.mediaDevices")}} {{ReadOnlyInline}} - : {{domxref("MediaDevices")}} オブジェクトへの参照を返します。これにより、使用可能なメディア端末の情報を取得する ({{domxref("MediaDevices.enumerateDevices()")}})、ユーザーのコンピューターやユーザーエージェントで、メディアのどのような特性を制限することができるかを確認する ({{domxref("MediaDevices.getSupportedConstraints()")}})、{{domxref("MediaDevices.getUserMedia()")}} を使用してメディアへのアクセスを要求するといったことができます。 -- {{domxref("Navigator.mediaSession")}} {{readonlyinline}} {{experimental_inline}} +- {{domxref("Navigator.mediaSession")}} {{ReadOnlyInline}} - : {{domxref("MediaSession")}} オブジェクトを返します。このオブジェクトは、グローバルメディア制御の UI などで、現在再生中のメディアに関する情報をブラウザーがユーザーに提示する際に使用できるメタデータを提供するために使用することができます。 -- {{domxref("Navigator.onLine")}} {{readonlyInline}} - - : 現在のブラウザーがオンラインかどうかを示す {{domxref("Boolean")}} を返します。 -- {{domxref("Navigator.permissions")}} {{readonlyinline}} {{experimental_inline}} - - : {{domxref("Permissions")}} オブジェクトを返します。これは、 [Permissions API](/ja/docs/Web/API/Permissions_API) が対応する API の許可状態の問い合わせや更新に使用できます。 -- {{domxref("Navigator.presentation")}} {{readonlyInline}} {{experimental_inline}} +- {{domxref("Navigator.onLine")}} {{ReadOnlyInline}} + - : 現在のブラウザーがオンラインかどうかを示す論理値を返します。 +- {{domxref("Navigator.pdfViewerEnabled")}} {{ReadOnlyInline}} + - : ブラウザーが PDF に移動したときにインラインで表示できるのであれば `true` を、そうでなければ `false` を返します。 +- {{domxref("Navigator.permissions")}} {{ReadOnlyInline}} + - : {{domxref("Permissions")}} オブジェクトを返します。これは、[権限 API](/ja/docs/Web/API/Permissions_API) が対応する API の許可状態の問い合わせや更新に使用できます。 +- {{domxref("Navigator.presentation")}} {{ReadOnlyInline}} - : {{domxref("Presentation")}} API への参照を返します。 -- {{domxref("Navigator.serial")}} {{readonlyInline}} +- {{domxref("Navigator.serial")}} {{ReadOnlyInline}} {{Experimental_Inline}} - : {{domxref("Serial")}} オブジェクトを返します。これは、シリアルポートを制御できるようにする {{domxref("Web Serial API")}} のエントリーポイントを表します。 -- {{domxref("Navigator.serviceWorker")}} {{readonlyInline}} - - : {{domxref("ServiceWorkerContainer")}} オブジェクトを返します。これは、[associated document](https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window) の {{domxref("ServiceWorker")}} オブジェクトの登録、削除、更新、通信の機能を提供します。 -- {{domxref("Navigator.storage")}} {{readonlyinline}} +- {{domxref("Navigator.serviceWorker")}} {{ReadOnlyInline}} + - : {{domxref("ServiceWorkerContainer")}} オブジェクトを返します。これは、[関連付けれた文書](https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window)の {{domxref("ServiceWorker")}} オブジェクトの登録、削除、更新、通信の機能を提供します。 +- {{domxref("Navigator.scheduling")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : 現在の文書の {{domxref("Scheduling")}} オブジェクトを返します。 +- {{domxref("Navigator.storage")}} {{ReadOnlyInline}} - : サイトごとまたはアプリごとに持続的な記憶域の許可の管理や使用可能な記憶域の試算に使用する、シングルトンの {{domxref('StorageManager')}} オブジェクトを返します。 -- {{domxref("Navigator.userAgent")}} {{readonlyInline}} +- {{domxref("Navigator.userActivation")}} {{ReadOnlyInline}} + - : 現在のウィンドウのユーザー起動状態に関する情報を格納した {{domxref("UserActivation")}} オブジェクトを返します。 +- {{domxref("Navigator.userAgent")}} {{ReadOnlyInline}} - : 現在のブラウザーのユーザーエージェントを表す文字列を返します。 -- {{domxref("Navigator.vendor")}} {{readonlyInline}} - - : 現在のブラウザーのベンダー名を返します (例 "Netscape6")。 -- {{domxref("Navigator.webdriver")}} {{readonlyInline}} {{experimental_inline}} +- {{domxref("Navigator.userAgentData")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : ユーザーのブラウザーとオペレーティングシステムに関する情報にアクセスするための {{domxref("NavigatorUAData")}} オブジェクトを返します。 +- {{domxref("Navigator.virtualKeyboard")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : 画面上の仮想キーボードを制御するための {{domxref("VirtualKeyboard")}} API への参照を返します。 +- {{domxref("Navigator.webdriver")}} {{ReadOnlyInline}} - : ユーザーエージェントが自動で制御されているかどうかを示します。 -- {{domxref("Navigator.xr")}} {{readonlyInline}} {{experimental_inline}} +- {{domxref("Navigator.windowControlsOverlay")}} {{ReadOnlyInline}} + - : デスクトッププログレッシブウェブアプリケーションにおけるタイトルバーのジオメトリーに関する情報と、それが変更されるたびに知るためのイベントを公開する {{domxref("WindowControlsOverlay")}} インターフェイスを返します。 +- {{domxref("Navigator.xr")}} {{ReadOnlyInline}} {{Experimental_Inline}} - : {{domxref("XRSystem")}} オブジェクトを返します。これは [WebXR API](/ja/docs/Web/API/WebXR_API) のエントリーポイントを表します。 ### 標準外のプロパティ -- {{domxref("Navigator.buildID")}} {{non-standard_inline}} +- {{domxref("Navigator.buildID")}} {{Non-standard_Inline}} - : ブラウザーのビルド識別子を返します。最近のブラウザーでは、このプロパティはプライバシーの目的で、固定のタイムスタンプを返すようになり、例えば Firefox 64 系列では `20181001000000` となります。 -- {{domxref("Navigator.contacts")}} {{readonlyInline}} {{non-standard_inline}} +- {{domxref("Navigator.contacts")}} {{ReadOnlyInline}} {{Experimental_Inline}} - : {{domxref('ContactsManager')}} インターフェイスを返します。ユーザーが連絡先リストから項目を選択し、選択した項目の限られた詳細情報をウェブサイトやアプリケーションと共有することができます。 -- {{domxref("Navigator.securitypolicy")}} {{non-standard_inline}} - - : 空文字列を返します。Netscape 4.7x では "US & CA domestic policy" または "Export policy" を返していました。 -- {{domxref("Navigator.standalone")}} {{non-standard_inline}} - - : ブラウザーをスタンドアロンモードで実行しているかを示す boolean を返します。Apple の iOS Safari だけで使用できます。 -- {{domxref("Navigator.wakeLock")}} {{readonlyInline}} {{non-standard_inline}} +- {{domxref("Navigator.globalPrivacyControl")}} {{Non-standard_Inline}} {{Experimental_Inline}} + - : ユーザーの情報が共有または販売されることへの同意を示す論理値を返します。 +- {{domxref("Navigator.securitypolicy")}} {{Non-standard_Inline}} + - : 空文字列を返します。 Netscape 4.7x では "US & CA domestic policy" または "Export policy" を返していました。 +- {{domxref("Navigator.standalone")}} {{Non-standard_Inline}} + - : ブラウザーをスタンドアロンモードで実行しているかを示す論理値を返します。 Apple の iOS Safari だけで使用できます。 +- {{domxref("Navigator.wakeLock")}} {{ReadOnlyInline}} - : {{domxref("WakeLock")}} インターフェイスを返します。これは、画面のウェイクロックを要求したり、画面の減光、消灯、スクリーンセーバーの表示を防止したりするために利用できます。 ### 非推奨のプロパティ -- {{domxref("Navigator.appCodeName")}} {{readonlyInline}} {{deprecated_inline}} - - : 現在のブラウザーの内部のコードネームを返します。このプロパティが正確な値を返すことを期待しないで下さい。 -- {{domxref("Navigator.appName")}} {{readonlyInline}} {{deprecated_inline}} - - : このブラウザーの公式な名前の {{domxref("DOMString")}} を返します。このプロパティが正確な値を返すことを期待しないで下さい。 -- {{domxref("Navigator.appVersion")}} {{readonlyInline}} {{deprecated_inline}} - - : ブラウザーのバージョンを {{domxref("DOMString")}} で返します。このプロパティが正確な値を返すことを期待しないで下さい。 -- {{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}} {{deprecated_inline}} - - : 現在表示中である ({{domxref("VRDisplay.ispresenting")}} が `true` である)、すべての {{domxref("VRDisplay")}} オブジェクトを収めた配列を返します。 -- {{domxref("Navigator.battery")}} {{readonlyInline}} {{deprecated_inline}} - - : バッテリー残量などの情報を取得できる {{domxref("BatteryManager")}} オブジェクトを返します。 -- {{domxref("Navigator.oscpu")}} {{readonlyInline}} {{deprecated_inline}} +- {{domxref("Navigator.appCodeName")}} {{ReadOnlyInline}} {{Deprecated_Inline}} + - : どのブラウザーでも `'Mozilla'` を返します。 +- {{domxref("Navigator.appName")}} {{ReadOnlyInline}} {{Deprecated_Inline}} + - : どのブラウザーでも `'Netscape'` を返します。 +- {{domxref("Navigator.appVersion")}} {{ReadOnlyInline}} {{Deprecated_Inline}} + - : ブラウザーのバージョンを文字列で返します。このプロパティが正確な値を返すことを期待しないで下さい。 +- {{domxref("Navigator.activeVRDisplays")}} {{ReadOnlyInline}} {{Deprecated_Inline}} {{Non-standard_Inline}} + - : 現在表示中である（{{domxref("VRDisplay.ispresenting")}} が `true` である）、すべての {{domxref("VRDisplay")}} オブジェクトを収めた配列を返します。 +- {{domxref("Navigator.doNotTrack")}} {{ReadOnlyInline}} {{Deprecated_Inline}} + - : ユーザーの do-not-track 設定の値を返します。この値が "yes" であるとき、ウェブサイトやアプリケーションはユーザーを追跡するべきではありません。 +- {{domxref("Navigator.mimeTypes")}} {{ReadOnlyInline}} {{Deprecated_Inline}} + - : ブラウザーが対応している MIME タイプの一覧を {{domxref("MimeTypeArray")}} で返します。 +- {{domxref("Navigator.oscpu")}} {{ReadOnlyInline}} {{Deprecated_Inline}} - : 現在の OS を表す文字列を返します。 -- {{domxref("Navigator.platform")}} {{readonlyInline}} {{deprecated_inline}} +- {{domxref("Navigator.platform")}} {{ReadOnlyInline}} {{Deprecated_Inline}} - : 現在のブラウザーのプラットフォームを表す文字列を返します。このプロパティが正確な値を返すことを期待しないで下さい。 -- {{domxref("Navigator.plugins")}} {{readonlyInline}}{{deprecated_inline}} - - : {{domxref("PluginArray")}} を返します。これはブラウザーにインストールされたプラグインを列挙します。 -- {{domxref("Navigator.product")}} {{readonlyInline}} {{deprecated_inline}} - - : どのブラウザーも、常に `'Gecko'` を返します。このプロパティは、互換性だけの目的で維持されています。 -- {{domxref("Navigator.productSub")}} {{readonlyInline}} {{deprecated_inline}} - - : ブラウザーのビルド番号を返します (例, "20060909")。 -- {{domxref("Navigator.vendorSub")}} {{readonlyInline}} {{deprecated_inline}} - - : vendor version number を返します (例 "6.1"). - -## メソッド +- {{domxref("Navigator.plugins")}} {{ReadOnlyInline}} {{Deprecated_Inline}} + - : {{domxref("PluginArray")}} を返します。これはブラウザーにインストールされているプラグインを列挙します。 +- {{domxref("Navigator.product")}} {{ReadOnlyInline}} {{Deprecated_Inline}} + - : どのブラウザーも、常に `'Gecko'` を返します。 +- {{domxref("Navigator.productSub")}} {{ReadOnlyInline}} {{Deprecated_Inline}} + - : `'20030107'` または `'"20100101'` の文字列のどちらかを返します。 +- {{domxref("Navigator.vendor")}} {{ReadOnlyInline}} {{Deprecated_Inline}} + - : 空文字列、`'Apple Computer Inc.'`、`'Google Inc.'` のいずれかを返します。 +- {{domxref("Navigator.vendorSub")}} {{ReadOnlyInline}} {{Deprecated_Inline}} + - : 常に空文字列を返します。 + +## インスタンスメソッド _継承するメソッドはありません。_ @@ -114,14 +136,20 @@ _継承するメソッドはありません。_ - : `Navigator.share()` の呼び出しが成功した場合は `true` を返します。 - {{domxref("Navigator.clearAppBadge()")}} - : 現在のアプリのバッジを消去し、 {{jsxref("undefined")}} に解決する {{jsxref("Promise")}} を返します。 +- {{domxref("Navigator.getAutoplayPolicy()")}} {{Experimental_Inline}} + - : 指定したメディア要素、音声コンテキスト、またはメディア機能の "type" が自動再生を許可されているかどうかを示す値を返します。 - {{domxref("Navigator.getBattery()")}} - : {{domxref("BatteryManager")}} オブジェクトで解決するプロミスを返します。このオブジェクトはバッテリーの充電状態についての情報を返します。 -- {{domxref("Navigator.javaEnabled()")}} {{readonlyInline}} - - : false を返します。 +- {{domxref("Navigator.getInstalledRelatedApps()")}} {{Experimental_Inline}} + - : ユーザーがインストールしている、関連するネイティブまたは[プログレッシブウェブアプリ](/ja/docs/Web/Progressive_web_apps)を表すオブジェクトの配列で解決するプロミスを返します。 - {{domxref("Navigator.registerProtocolHandler()")}} - : 自分自身のサイトに URL などのプロトコルに関連づけたハンドラーを可能な限り登録します。 +- {{domxref("Navigator.unregisterProtocolHandler()")}} + - : 指定されたプロトコルのハンドラーであるウェブサイトの登録を解除します。 - {{domxref("Navigator.requestMediaKeySystemAccess()")}} - : MediaKeySystemAccess オブジェクト用の {{jsxref("Promise")}} を返します。 +- {{domxref("Navigator.requestMIDIAccess()")}} + - : ユーザーのシステムにおいて MIDI 機器にアクセスするリクエストを表す {{jsxref('Promise')}} を返します。 - {{domxref("Navigator.sendBeacon()")}} - : ユーザーエージェントからウェブサーバーへ、{{Glossary("HTTP")}} を使用して少量のデータを非同期に転送するために使用します。 - {{domxref("Navigator.setAppBadge()")}} @@ -133,12 +161,14 @@ _継承するメソッドはありません。_ ### 非推奨のメソッド -- {{domxref("Navigator.getVRDisplays()")}} {{deprecated_inline}} +- {{domxref("Navigator.getVRDisplays()")}} {{Deprecated_Inline}} {{Non-standard_Inline}} - : コンピューターに接続されて使用可能な VR 機器を表す {{domxref("VRDisplay")}} の配列に解決されるプロミスを返します。 -- {{domxref("Navigator.getUserMedia()")}} {{deprecated_inline}} +- {{domxref("Navigator.getUserMedia()")}} {{Deprecated_Inline}} - : ユーザーにプロンプトで許可を取った後に、ローカルコンピューターのマイクやカメラからの音声または動画ストリームを返します。 -- {{domxref("Navigator.taintEnabled()")}} {{deprecated_inline}} +- {{domxref("Navigator.taintEnabled()")}} {{Deprecated_Inline}} - : `false` を返します。 JavaScript の taint/untaint 関数は JavaScript 1.2 で削除されました。 +- {{domxref("Navigator.javaEnabled()")}} {{Deprecated_Inline}} + - : 常に false を返します。 ## 仕様書 From b9858eb1f9cb61120532229cefc7c917f2da35d0 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 13 Sep 2023 00:22:22 +0900 Subject: [PATCH 275/600] =?UTF-8?q?2023/05/10=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/navigator/donottrack/index.md | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/files/ja/web/api/navigator/donottrack/index.md b/files/ja/web/api/navigator/donottrack/index.md index 5d240bcc7950e6..0ecae855c2c45d 100644 --- a/files/ja/web/api/navigator/donottrack/index.md +++ b/files/ja/web/api/navigator/donottrack/index.md @@ -1,15 +1,22 @@ --- -title: Navigator.doNotTrack +title: "Navigator: doNotTrack プロパティ" +short-title: doNotTrack slug: Web/API/Navigator/doNotTrack +l10n: + sourceCommit: b0870830e4c02596ca6c501f8f8b468a917eafc2 --- -{{ApiRef("HTML DOM")}} +{{ApiRef("HTML DOM")}}{{Deprecated_header}} **`Navigator.doNotTrack`** プロパティは、ユーザーの Do Not Track 設定を返します。これは、ユーザーがウェブサイトと広告主に対して追跡しないよう要求しているかどうかを示します。 プロパティの値は HTTP の {{httpheader("DNT")}} ヘッダーの値、つまり、 "`1`", "`0`", "`unspecified`" の値を返します。 -## 構文 +## 例 + +文字列または `null` です。 + +## 例 ```js console.log(navigator.doNotTrack); @@ -22,8 +29,8 @@ console.log(navigator.doNotTrack); ## ブラウザーの互換性 -{{Compat("api.Navigator.doNotTrack")}} +{{Compat}} ## 関連情報 -- [Do Not Track フィールドガイド](/ja/docs/Web/Security/Do_not_track_field_guide) +- {{httpheader("DNT")}} HTTP ヘッダー From f66c49658c2be5c82f11ad6fa280e9b980f5c854 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 13 Sep 2023 00:37:06 +0900 Subject: [PATCH 276/600] =?UTF-8?q?2023/04/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../navigator/globalprivacycontrol/index.md | 43 +++++++++++++++++ files/ja/web/api/navigator/gpu/index.md | 46 +++++++++++++++++++ files/ja/web/api/navigator/ink/index.md | 38 +++++++++++++++ 3 files changed, 127 insertions(+) create mode 100644 files/ja/web/api/navigator/globalprivacycontrol/index.md create mode 100644 files/ja/web/api/navigator/gpu/index.md create mode 100644 files/ja/web/api/navigator/ink/index.md diff --git a/files/ja/web/api/navigator/globalprivacycontrol/index.md b/files/ja/web/api/navigator/globalprivacycontrol/index.md new file mode 100644 index 00000000000000..19a5a7af110bde --- /dev/null +++ b/files/ja/web/api/navigator/globalprivacycontrol/index.md @@ -0,0 +1,43 @@ +--- +title: "Navigator: globalPrivacyControl プロパティ" +short-title: globalPrivacyControl +slug: Web/API/Navigator/globalPrivacyControl +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 +--- + +{{APIRef("DOM")}}{{SeeCompatTable}}{{Non-standard_header}} + +**`Navigator.globalPrivacyControl`** プロパティはユーザーのグローバルプライバシー制御設定を返します。この設定は、ウェブサイトやサービスワーカースクリプトがユーザーの個人情報を第三者に販売したり、共有したりすることにユーザーが同意するかどうかを示します。 + +プロパティの値は、 {{httpheader("Sec-GPC")}} HTTP ヘッダーの値を反映します。 + +| Sec-GPC 値 | 意味 | +| ----------- | -------------------------------------------------------------------- | +| 1 | ユーザーは、自分のデータを販売または共有することに同意していません。 | +| 0 | ユーザーは、データの販売または共有に同意しました。 | +| unspecified | ユーザーはデータに関してまだ同意していません。 | + +## 例 + +```js +console.log(navigator.globalPrivacyControl); +// prints "1" indicating user does not want their data shared or sold. +// prints "0" if the user consents to their data being shared or sold. +// prints "unspecified" if Sec-GPC header is not present. +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{HTTPHeader("Sec-GPC")}} ヘッダー +- [globalprivacycontrol.org](https://globalprivacycontrol.org/) +- [Global Privacy Control Spec](https://globalprivacycontrol.github.io/gpc-spec/) +- [Do Not Track on Wikipedia](https://en.wikipedia.org/wiki/Do_Not_Track) diff --git a/files/ja/web/api/navigator/gpu/index.md b/files/ja/web/api/navigator/gpu/index.md new file mode 100644 index 00000000000000..4ec3fcfd4adcfb --- /dev/null +++ b/files/ja/web/api/navigator/gpu/index.md @@ -0,0 +1,46 @@ +--- +title: "Navigator: gpu プロパティ" +short-title: gpu +slug: Web/API/Navigator/gpu +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 +--- + +{{APIRef("WebGPU API")}}{{SeeCompatTable}} + +**`Navigator.gpu`** は読み取り専用のプロパティで、 {{domxref("WebGPU_API", "WebGPU API", "", "nocode")}} のエントリーポイントである現在の閲覧コンテキストの {{domxref("GPU")}} オブジェクトを返します。 + +## 値 + +{{domxref("GPU")}} オブジェクトです。 + +## 例 + +```js +async function init() { + if (!navigator.gpu) { + throw Error("WebGPU not supported."); + } + + const adapter = await navigator.gpu.requestAdapter(); + if (!adapter) { + throw Error("Couldn't request WebGPU adapter."); + } + + const device = await adapter.requestDevice(); + + //... +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("WebGPU_API", "WebGPU API", "", "nocode")}} diff --git a/files/ja/web/api/navigator/ink/index.md b/files/ja/web/api/navigator/ink/index.md new file mode 100644 index 00000000000000..544d33f898bd65 --- /dev/null +++ b/files/ja/web/api/navigator/ink/index.md @@ -0,0 +1,38 @@ +--- +title: "Navigator: ink プロパティ" +short-title: ink +slug: Web/API/Navigator/ink +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 +--- + +{{SeeCompatTable}}{{APIRef("Ink API")}} + +**`ink`** は {{domxref("Navigator")}} インターフェイスの読み取り専用プロパティで、現在の文書の {{domxref("Ink")}} オブジェクトを取得します。これは[インク API](/en-US/docs/Web/API/Ink_API) の機能へのアクセスを提供します。 + +## 値 + +{{domxref('Ink')}} オブジェクトです。 + +## 例 + +```js +async function inkInit() { + const ink = navigator.ink; + let presenter = await ink.requestPresenter({ presentationArea: canvas }); + + //... +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Enhancing Inking on the Web](https://blogs.windows.com/msedgedev/2021/08/18/enhancing-inking-on-the-web/) From c8d70f998f9ab6a2234fbd48b79c07c9e7fa0dff Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 12 Sep 2023 23:50:41 +0900 Subject: [PATCH 277/600] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/navigator/clipboard/index.md | 9 ++++++--- .../web/api/navigator/mediacapabilities/index.md | 15 ++++++++------- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/files/ja/web/api/navigator/clipboard/index.md b/files/ja/web/api/navigator/clipboard/index.md index bb50b1eec1b67a..860e77c5a766a6 100644 --- a/files/ja/web/api/navigator/clipboard/index.md +++ b/files/ja/web/api/navigator/clipboard/index.md @@ -1,8 +1,13 @@ --- -title: Navigator.clipboard +title: "Navigator: clipboard プロパティ" +short-title: clipboard slug: Web/API/Navigator/clipboard +l10n: + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc --- +{{APIRef("Clipboard API")}} + [クリップボード API](/ja/docs/Web/API/Clipboard_API) は **{{domxref("Navigator")}}** インターフェイスに読み取り専用の **`clipboard`** プロパティを追加し、これはクリップボードの内容を読み書きするために使用する {{domxref("Clipboard")}} オブジェクトを返します。 クリップボード API は切り取り、コピー、貼り付け機能をウェブアプリケーションに実装するために使用することができます。 @@ -36,5 +41,3 @@ navigator.clipboard ## ブラウザーの互換性 {{Compat}} - -{{APIRef("Clipboard API")}} diff --git a/files/ja/web/api/navigator/mediacapabilities/index.md b/files/ja/web/api/navigator/mediacapabilities/index.md index 4bad080b3f8514..4a4060ad6e6c3a 100644 --- a/files/ja/web/api/navigator/mediacapabilities/index.md +++ b/files/ja/web/api/navigator/mediacapabilities/index.md @@ -1,11 +1,14 @@ --- title: "Navigator: mediaCapabilities プロパティ" +short-title: mediaCapabilities slug: Web/API/Navigator/mediaCapabilities l10n: - sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc --- -**`Navigator.mediaCapabilities`** プロパティは読み取り専用で、 [Media Capabilities API](/ja/docs/Web/API/Media_Capabilities_API) で定義されています。 +{{APIRef("HTML DOM")}} + +**`Navigator.mediaCapabilities`** プロパティは読み取り専用で、[メディア能力 API](/ja/docs/Web/API/Media_Capabilities_API) で定義されています。 指定された形式のエンコードとデコードおよび出力能力についての情報が取得できる {{domxref("MediaCapabilities")}} オブジェクトを返します。 ## 値 @@ -38,13 +41,11 @@ navigator.mediaCapabilities {{Specifications}} -## ブラウザーの対応 +## ブラウザーの互換性 -{{Compat()}} +{{Compat}} ## 関連情報 -- [Media Capabilities API](/ja/docs/Web/API/Media_Capabilities_API) +- [メディア能力 API](/ja/docs/Web/API/Media_Capabilities_API) - {{domxref("Navigator")}} - -{{APIRef("HTML DOM")}} From 8077a372831ac6b7f65e20c25f8504ab7c6260b6 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 13 Sep 2023 21:34:15 +0900 Subject: [PATCH 278/600] =?UTF-8?q?2023/09/08=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/navigator/platform/index.md | 38 +++++++++++++------- 1 file changed, 25 insertions(+), 13 deletions(-) diff --git a/files/ja/web/api/navigator/platform/index.md b/files/ja/web/api/navigator/platform/index.md index ad15b976b12ab3..eaf9e2f2a536ef 100644 --- a/files/ja/web/api/navigator/platform/index.md +++ b/files/ja/web/api/navigator/platform/index.md @@ -1,33 +1,41 @@ --- -title: Navigator.platform +title: "navigator: platform プロパティ" +short-title: platform slug: Web/API/Navigator/platform +l10n: + sourceCommit: b10df41c21a9b1359ae173cc59d4417f0f3755da --- -{{ APIRef("HTML DOM") }} {{Deprecated_Header}} +{{APIRef("HTML DOM")}}{{Deprecated_Header}} ブラウザーのプラットフォームを表す文字列を返します。仕様書ではブラウザーが常に空文字列を返すことを許可していますので、信頼できる答えを得るためにこのプロパティを頼らないようにしてください。 +**`platform`** は {{domxref("Navigator")}} インターフェイスの読み取り専用プロパティで、ユーザーのブラウザーが動作しているプラットフォームを特定する文字列を返します。 -## 構文 +> **メモ:** 一般的に、このようなメソッドやプロパティを使用してユーザー環境の情報を探そうとするコードを書くことは可能な限り避け、代わりに[機能検出](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection)を行うコードを書くべきです。 -```js -platform = navigator.platform; -``` - -### 値 - -ブラウザーを実行しているプラットフォームを識別する {{domxref("DOMString")}}、あるいはブラウザーがプラットフォームの識別を断わった (または識別できない) 場合は空文字列になります。`platform` は空文字列か、ブラウザーを実行しているプラットフォームを表す文字列でなければなりません。 +## 値 -例: "`MacIntel`", "`Win32`", "`FreeBSD i386`", "`WebTV OS`" +ユーザーのブラウザーを実行しているプラットフォームを識別する文字列です。例えば、 `"MacIntel"`, `"Win32"`, `"Linux x86_64"`, `"Linux armv81"` です。 ## 例 +`navigator.platform` は常に避けて、[機能検出](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection)を使うべきです。しかし、使用できる選択肢の中で、 `navigator.platform` が最悪の選択肢ではない場合があります。キーボードショートカットの修飾キーが（アップル以外のシステムで使用されている） `⌃` コントロールキーではなく、（アップルのシステムで使用されている） `⌘` コマンドキーであるというアドバイスをユーザーに表示させる必要がある場合です。 + ```js -console.log(navigator.platform); +let modifierKeyPrefix = "^"; // コントロールキー +if ( + navigator.platform.indexOf("Mac") === 0 || + navigator.platform === "iPhone" +) { + modifierKeyPrefix = "⌘"; // コマンドキー +} ``` +つまり、 `navigator.platform` が `"Mac"` で始まるか、または `"iPhone"` と完全に一致するかどうかを調べ、そのいずれかが真であるかどうかによって、ウェブアプリケーションの UI がキーボードショートカットでユーザーに押すようにアドバイスする修飾キーを選びます。 + ## 使用上のメモ -Chrome、Edge、Firefox 63 以降を含むほとんどのブラウザーは、64 ビット版の Windows で実行していても `"Win32"` を返します。 Internet Explorer やバージョン 63 より前の Firefox は `"Win64"` を返します。 +Windows では、現代のブラウザーは 64 ビット版の Windows で実行していても `"Win32"` を返します。 ## 仕様書 @@ -36,3 +44,7 @@ Chrome、Edge、Firefox 63 以降を含むほとんどのブラウザーは、64 ## ブラウザーの互換性 {{Compat}} + +## 関連情報 + +- [`navigator.userAgentData.platform`](/ja/docs/Web/API/NavigatorUAData/platform) From 4430bd889fcda06efc98fd8c3238d36c08f9e312 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 14 Sep 2023 00:03:59 +0900 Subject: [PATCH 279/600] =?UTF-8?q?2023/08/03=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/navigator/useragent/index.md | 26 ++++++++----------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/files/ja/web/api/navigator/useragent/index.md b/files/ja/web/api/navigator/useragent/index.md index 76d606628641d5..0885ce3da1c22a 100644 --- a/files/ja/web/api/navigator/useragent/index.md +++ b/files/ja/web/api/navigator/useragent/index.md @@ -1,36 +1,32 @@ --- -title: Navigator.userAgent +title: "Navigator: userAgent プロパティ" +short-title: userAgent slug: Web/API/Navigator/userAgent +l10n: + sourceCommit: 8d0cbeacdc1872f7e4d966177151585c58fb879e --- {{ApiRef("HTML DOM")}} -**`NavigatorID.userAgent`** は読み取り専用のプロパティで、現在のブラウザーのユーザーエージェント文字列を返します。 +**`Navigator.userAgent`** は読み取り専用のプロパティで、現在のブラウザーのユーザーエージェント文字列を返します。 > **メモ:** 仕様書では、ブラウザーがこのフィールドを介して提供する情報をできるだけ少なくすることを求めています。このプロパティの値は、同じブラウザーの将来のバージョンでも同じままであると仮定してはいけません。まったく使用しないようにしたり、ブラウザーの現在のバージョンと過去のバージョンのためだけに使用するようにしてください。新しいブラウザーは、古いブラウザーと同じ UA、またはその一部を使い始めるかもしれません。ブラウザーエージェントが本当にこのプロパティによって広告されたものであるという保証は本当にありません。 > > また、ブラウザーのユーザーはこのフィールドの値を変更することができることを覚えておいてください (UA なりすまし)。 -ユーザーエージェント文字列の検出に基づくブラウザーの識別は**信頼性が低く**、ユーザーエージェント文字列はユーザーが設定可能なので**推奨されません**。例えば、以下のようになります。 +ユーザーエージェント文字列の検出に基づくブラウザーの識別は**信頼できず**、ユーザーエージェント文字列はユーザーが設定可能なので**推奨されません**。例えば、以下のようになります。 -- Firefox では、 about:config の "general.useragent.override" 設定を使うことができます。いくつかの Firefox の拡張や多機能バーでも設定可能です。 +- Firefox では、 about:config の `general.useragent.override` 設定を使って変更することができます。一部の Firefox 拡張機能でも設定可能です。しかし、これは取得する HTTP ヘッダーと `navigator.userAgent` が返す HTTP ヘッダーを変更するだけです。 + 他にも JavaScript コードを利用してブラウザー識別を行うメソッドがあるかもしれません。 - Opera 6 以降では、メニューからブラウザー識別文字列を設定できます。 -- Microsoft Internet Explorer では、 Windows レジストリーを使用します。 -- Safari と iCab は、メニューから、ブラウザーユーザエージェントを定義済みの Internet Explorer、または、 Netscape の文字列に変更できます。 -## 構文 +## 値 -```js -var ua = navigator.userAgent; -``` - -### 値 - -{{domxref("DOMString")}} で、ブラウザーが {{Glossary("HTTP")}} ヘッダーで提供する完全なユーザーエージェント文字列と、 {{domxref("Navigator")}} オブジェクト上のメソッドやその他の関連メソッドへのレスポンスを指定します。 +文字列で、ブラウザーが {{Glossary("HTTP")}} ヘッダーで提供する完全なユーザーエージェント文字列と、 {{domxref("Navigator")}} オブジェクト上のメソッドやその他の関連メソッドへのレスポンスを指定します。 ユーザーエージェント文字列は形式的な構造に基づいて構築されており、いくつかの情報に分解することができます。これらの情報の各部分は、ユーザ－が設定可能な他の Navigator のプロパティから来ています。Gecko ベースのブラウザは以下の一般的な構造に準拠しています。 -```js +```plain userAgent = appCodeName/appVersion number (Platform; Security; OS-or-CPU; Localization; rv: revision-version-number) product/productSub Application-Name Application-Name-version From 4d00710bfc96a9ab718f846fb4fdc75f389d6d5a Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 12 Sep 2023 23:38:23 +0900 Subject: [PATCH 280/600] =?UTF-8?q?2023/04/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/navigator/activevrdisplays/index.md | 11 ++++-- .../ja/web/api/navigator/appcodename/index.md | 13 +++---- files/ja/web/api/navigator/appname/index.md | 11 ++---- .../ja/web/api/navigator/appversion/index.md | 19 +++------- files/ja/web/api/navigator/buildid/index.md | 21 +++++------ .../ja/web/api/navigator/connection/index.md | 7 ++-- files/ja/web/api/navigator/contacts/index.md | 7 ++-- .../web/api/navigator/cookieenabled/index.md | 21 ++++++----- .../ja/web/api/navigator/credentials/index.md | 21 +++++------ .../web/api/navigator/devicememory/index.md | 13 +++---- .../navigator/hardwareconcurrency/index.md | 11 ++---- files/ja/web/api/navigator/hid/index.md | 9 +++-- files/ja/web/api/navigator/keyboard/index.md | 13 +++---- files/ja/web/api/navigator/language/index.md | 15 +++----- files/ja/web/api/navigator/languages/index.md | 5 ++- files/ja/web/api/navigator/locks/index.md | 23 +++++------- .../web/api/navigator/maxtouchpoints/index.md | 5 ++- .../web/api/navigator/mediadevices/index.md | 15 +++++--- .../web/api/navigator/mediasession/index.md | 5 ++- files/ja/web/api/navigator/online/index.md | 35 ++++++------------ files/ja/web/api/navigator/oscpu/index.md | 37 +++++++++---------- .../ja/web/api/navigator/permissions/index.md | 23 +++++------- .../web/api/navigator/presentation/index.md | 15 +++++--- files/ja/web/api/navigator/product/index.md | 11 ++---- .../ja/web/api/navigator/productsub/index.md | 33 +++++++---------- files/ja/web/api/navigator/serial/index.md | 7 ++-- .../web/api/navigator/serviceworker/index.md | 23 +++++------- .../web/api/navigator/useractivation/index.md | 9 +++-- .../web/api/navigator/useragentdata/index.md | 7 ++-- files/ja/web/api/navigator/vendor/index.md | 34 +++++------------ files/ja/web/api/navigator/vendorsub/index.md | 33 +++++------------ files/ja/web/api/navigator/wakelock/index.md | 13 ++++--- files/ja/web/api/navigator/webdriver/index.md | 15 +++----- files/ja/web/api/navigator/xr/index.md | 23 +++++------- 34 files changed, 243 insertions(+), 320 deletions(-) diff --git a/files/ja/web/api/navigator/activevrdisplays/index.md b/files/ja/web/api/navigator/activevrdisplays/index.md index e49ac14e26e1b6..7ceb8ca84ec213 100644 --- a/files/ja/web/api/navigator/activevrdisplays/index.md +++ b/files/ja/web/api/navigator/activevrdisplays/index.md @@ -1,9 +1,12 @@ --- -title: Navigator.activeVRDisplays +title: "Navigator: activeVRDisplays プロパティ" +short-title: activeVRDisplays slug: Web/API/Navigator/activeVRDisplays +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- -{{securecontext_header}}{{DefaultAPISidebar("WebVR API")}}{{deprecated_header}} +{{APIRef("WebVR API")}}{{SecureContext_Header}}{{Deprecated_Header}}{{Non-standard_Header}} **`activeVRDisplays`** は {{domxref("Navigator")}} インターフェイスの読み取り専用プロパティで、すべての {{domxref("VRDisplay")}} オブジェクトのうち、現在表示中 ({{domxref("VRDisplay.ispresenting")}} が `true`) のものを含んだ配列を返します。 @@ -18,8 +21,8 @@ slug: Web/API/Navigator/activeVRDisplays ```js function showActive() { const displays = navigator.activeVRDisplays; - for (let i = 0; i < displays.length; i++) { - console.log("Display " + displays[i].displayId + " is active."); + for (const display of displays) { + console.log(`Display ${display.displayId} is active.`); } } ``` diff --git a/files/ja/web/api/navigator/appcodename/index.md b/files/ja/web/api/navigator/appcodename/index.md index 628fdb82bc5322..6ca564fa434e79 100644 --- a/files/ja/web/api/navigator/appcodename/index.md +++ b/files/ja/web/api/navigator/appcodename/index.md @@ -1,6 +1,9 @@ --- -title: Navigator.appCodeName +title: "Navigator: appCodeName プロパティ" +short-title: appCodeName slug: Web/API/Navigator/appCodeName +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- {{APIRef("HTML DOM")}} {{Deprecated_Header}} @@ -9,13 +12,7 @@ slug: Web/API/Navigator/appCodeName > **メモ:** このプロパティが実際の製品名を返すことを期待しないでください。どのブラウザーもこのプロパティの値として "`Mozilla`" を返します。 -## 構文 - -```js -codeName = navigator.appCodeName; -``` - -### 値 +## 値 "`Mozilla`" という文字列です。 diff --git a/files/ja/web/api/navigator/appname/index.md b/files/ja/web/api/navigator/appname/index.md index cbd24f91a5544c..646f99c94dca3a 100644 --- a/files/ja/web/api/navigator/appname/index.md +++ b/files/ja/web/api/navigator/appname/index.md @@ -1,6 +1,9 @@ --- -title: Navigator.appName +title: "Navigator: appName プロパティ" +short-title: appName slug: Web/API/Navigator/appName +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- {{APIRef("HTML DOM")}} {{Deprecated_Header}} @@ -9,12 +12,6 @@ slug: Web/API/Navigator/appName > **メモ:** このプロパティが実際のブラウザー名を返すことを期待しないでください。どのブラウザーもこのプロパティの値として "`Netscape`" を返します。 -## 構文 - -```js -appName = navigator.appName; -``` - ### 値 文字列 "`Netscape`" です。 diff --git a/files/ja/web/api/navigator/appversion/index.md b/files/ja/web/api/navigator/appversion/index.md index 952fdba8af2bce..6e23440c2d46f6 100644 --- a/files/ja/web/api/navigator/appversion/index.md +++ b/files/ja/web/api/navigator/appversion/index.md @@ -1,6 +1,9 @@ --- -title: Navigator.appVersion +title: "Navigator: appVersion プロパティ" +short-title: appVersion slug: Web/API/Navigator/appVersion +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- {{APIRef("HTML DOM")}} {{Deprecated_Header}} @@ -9,24 +12,14 @@ slug: Web/API/Navigator/appVersion > **メモ:** このプロパティがブラウザーの正しいバージョンを返すことを期待しないでください。 -## 構文 - -```js -window.navigator.appVersion; -``` - -### 値 +## 値 "`4.0`" またはそのブラウザーのバージョン情報を表す文字列のどちらかです。 ## 例 ```js -alert( - "このブラウザーのバージョンは " + - navigator.appVersion + - " と報告されています。", -); +alert(`このブラウザーのバージョンは ${navigator.appVersion} と報告されています。`); ``` ## 注 diff --git a/files/ja/web/api/navigator/buildid/index.md b/files/ja/web/api/navigator/buildid/index.md index db6edce7d7b813..7bedc6d02920f3 100644 --- a/files/ja/web/api/navigator/buildid/index.md +++ b/files/ja/web/api/navigator/buildid/index.md @@ -1,32 +1,29 @@ --- -title: Navigator.buildID +title: "Navigator: buildID プロパティ" +short-title: buildID slug: Web/API/Navigator/buildID +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- -{{ ApiRef("HTML DOM") }} +{{ApiRef("HTML DOM")}}{{Non-standard_Header}} ブラウザーのビルド識別子を返します。最近のブラウザーでは、このプロパティはプライバシーの目的で、固定のタイムスタンプを返すようになり、例えば Firefox 64 系列では `20181001000000` となります。 -## 構文 - -``` -buildID = navigator.buildID; -``` - ### 値 アプリケーションのビルド識別子を表す文字列です。 ビルド識別子は `YYYYMMDDHHMMSS` の形式です。 ## 例 -``` -console.log(window.navigator.buildID); +```js +console.log(navigator.buildID); ``` ## 仕様書 どの公的な標準にも属していません。 -## ブラウザーの対応 +## ブラウザーの互換性 -{{Compat("api.Navigator.buildID")}} +{{Compat}} diff --git a/files/ja/web/api/navigator/connection/index.md b/files/ja/web/api/navigator/connection/index.md index e57288367e78d8..6a3e76b3c7ac50 100644 --- a/files/ja/web/api/navigator/connection/index.md +++ b/files/ja/web/api/navigator/connection/index.md @@ -1,15 +1,16 @@ --- -title: Navigator.connection +title: "Navigator: connection プロパティ" +short-title: connection slug: Web/API/Navigator/connection l10n: - sourceCommit: 4b4638246aad5d39b9a2e5c572b179b4c39c0a84 + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- {{APIRef("Network Information API")}}{{SeeCompatTable}} **`Navigator.connection`** は読み取り専用のプロパティで、ユーザーの端末の現在の帯域幅や、接続が測定されているかどうかなどのシステムの接続に関する情報を含む {{domxref("NetworkInformation")}} を返します。 -ユーザーの接続に基づいて高解像度コンテンツ、または低解像度コンテンツのいずれを使うかの選択に使用できます。 +ユーザーの接続に基づいて、高解像度と低解像度のどちらのコンテンツを使うかの選択に使用できます。 ## 値 diff --git a/files/ja/web/api/navigator/contacts/index.md b/files/ja/web/api/navigator/contacts/index.md index 21f9900b0c7e22..705c88a36446ff 100644 --- a/files/ja/web/api/navigator/contacts/index.md +++ b/files/ja/web/api/navigator/contacts/index.md @@ -1,15 +1,16 @@ --- -title: Navigator.contacts +title: "Navigator: contacts プロパティ" +short-title: contacts slug: Web/API/Navigator/contacts l10n: - sourceCommit: 4b4638246aad5d39b9a2e5c572b179b4c39c0a84 + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- {{APIRef("Contact Picker API")}}{{SeeCompatTable}} **`contacts`** は {{domxref("Navigator")}} インターフェイスの読み取り専用プロパティで、 {{domxref('ContactsManager')}} インターフェイスを返します。ユーザーが連絡先リストから項目を選択し、選択した項目の限定された詳細をウェブサイトやアプリケーションと共有することができます。 -### 値 +## 値 {{domxref('ContactsManager')}} オブジェクトです、 2 回連続して呼び出すと、同じオブジェクトを返します。 diff --git a/files/ja/web/api/navigator/cookieenabled/index.md b/files/ja/web/api/navigator/cookieenabled/index.md index e7fd411f7b687a..03b0b3cf5d8f9e 100644 --- a/files/ja/web/api/navigator/cookieenabled/index.md +++ b/files/ja/web/api/navigator/cookieenabled/index.md @@ -1,29 +1,30 @@ --- -title: Navigator.cookieEnabled +title: "Navigator: cookieEnabled プロパティ" +short-title: cookieEnabled slug: Web/API/Navigator/cookieEnabled +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- {{ApiRef("HTML DOM")}} -`navigator.cookieEnabled` は、クッキーが有効かどうかを示す Boolean 値を返します。このプロパティは読み取り専用です。 +`navigator.cookieEnabled` は、クッキーが有効かどうかを示す論理値を返します。 -## 構文 +このプロパティは読み取り専用です。 -```js -var cookieEnabled = navigator.cookieEnabled; -``` +## 値 -- `cookieEnabled` は [Boolean](/ja/docs/Glossary/Boolean) で、 `true` または `false` のいずれかです。 +論理値です。 > **メモ:** ブラウザーがサードパーティのクッキーをブロックするように構成されていた場合で、 `navigator.cookieEnabled` がサードパーティの iframe の中で呼び出された場合、 Safari, Edge Spartan, IE では `true` を返します (この場合にクッキーを設定しようとしても失敗するにもかかわらず)。 Firefox および Chromium ベースのブラウザーでは `false` を返します。 -> **メモ:** ウェブブラウザーは特定の場面で特定のクッキーを書き込むことを阻止することがあります。例えば、 Chrome 80 以降では [`SameSite=None`](/ja/docs/Web/HTTP/Headers/Set-Cookie/SameSite) 属性の付いたクッキーを作成することを許可しませんが、 [HTTPS 上で生成され `Secure` 属性がある場合は例外です。](https://www.chromestatus.com/feature/5633521622188032) +> **メモ:** ウェブブラウザーは特定の場面で特定のクッキーを書き込むことを阻止することがあります。例えば、 Chrome ベースのブラウザーや、 Firefox の一部の実験的なバージョンでは、 [`SameSite=None`](/ja/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value) 属性の付いたクッキーを作成することを許可しませんが、 HTTPS 上で生成され `Secure` 属性がある場合は例外です。 ## 例 ```js if (!navigator.cookieEnabled) { - // The browser does not support or is blocking cookies from being set. + // ブラウザーが対応していないか、クッキーが設定されることをブロックしています。 } ``` @@ -33,4 +34,4 @@ if (!navigator.cookieEnabled) { ## ブラウザーの互換性 -{{Compat("api.Navigator.cookieEnabled")}} +{{Compat}} diff --git a/files/ja/web/api/navigator/credentials/index.md b/files/ja/web/api/navigator/credentials/index.md index 7712d409f9b095..f59d60dc5b4c58 100644 --- a/files/ja/web/api/navigator/credentials/index.md +++ b/files/ja/web/api/navigator/credentials/index.md @@ -1,19 +1,16 @@ --- -title: Navigator.credentials +title: "Navigator: credentials プロパティ" +short-title: credentials slug: Web/API/Navigator/credentials +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- {{securecontext_header}}{{APIRef("")}} -**`credentials`** は {{domxref("Navigator")}} インターフェイスのプロパティで、リクエストの資格情報のメソッドを公開する {{domxref("CredentialsContainer")}} インターフェイスを返します。 {{domxref("CredentialsContainer")}} インターフェイスはサインインやサインアウトに成功した場合など、興味深いイベントが発生したことをユーザーエージェントに通知したりもします。このインターフェイスは機能検出に使用することができます。 +**`credentials`** は {{domxref("Navigator")}} インターフェイスのプロパティで、リクエストの資格情報のメソッドを公開する {{domxref("CredentialsContainer")}} インターフェイスを返します。 {{domxref("CredentialsContainer")}} インターフェイスはログインやログアウトに成功した場合など、興味深いイベントが発生したことをユーザーエージェントに通知したりもします。このインターフェイスは機能検出に使用することができます。 -## 構文 - -``` -var credentialsContainer = navigator.credentials -``` - -### Value +## 値 {{domxref("CredentialsContainer")}} インターフェイスです。 @@ -21,11 +18,11 @@ var credentialsContainer = navigator.credentials ```js if ("credentials" in navigator) { - navigator.credentials.get({ password: true }).then(function (creds) { + navigator.credentials.get({ password: true }).then((creds) => { //資格情報付きで何かを行う }); } else { - //Handle sign-in the way you did before. + // 以前の方法でログインを扱う } ``` @@ -35,4 +32,4 @@ if ("credentials" in navigator) { ## ブラウザーの互換性 -{{Compat("api.Navigator.credentials")}} +{{Compat}} diff --git a/files/ja/web/api/navigator/devicememory/index.md b/files/ja/web/api/navigator/devicememory/index.md index 076ef25725d580..d530460f4a27d3 100644 --- a/files/ja/web/api/navigator/devicememory/index.md +++ b/files/ja/web/api/navigator/devicememory/index.md @@ -1,19 +1,16 @@ --- -title: Navigator.deviceMemory +title: "Navigator: deviceMemory プロパティ" +short-title: deviceMemory slug: Web/API/Navigator/deviceMemory +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- {{APIRef("Device Memory")}}{{securecontext_header}}{{SeeCompatTable}} **`deviceMemory`** は {{domxref("Navigator")}} インターフェイスの読み取り専用プロパティで、端末のおよそのメモリ量をギガバイト単位で返します。 -報告される値は、フィンガープリントを抑制するために概数になっています。この値は、最も近い 2 の累乗に切り捨て、その値を 1024 で割ることによって概算されています。その後、メモリーが非常に少ない、または非常に多い端末の所有者のプライバシーを保護するため、下限と上限の範囲内に丸められます。 - -## 構文 - -```js -memoryAmount = navigator.deviceMemory; -``` +報告される値は、[フィンガープリント](/ja/docs/Glossary/Fingerprinting)を抑制するために概数になっています。この値は、最も近い 2 の累乗に切り捨て、その値を 1024 で割ることによって概算されています。その後、メモリーが非常に少ない、または非常に多い端末の所有者のプライバシーを保護するため、下限と上限の範囲内に丸められます。 ### 値 diff --git a/files/ja/web/api/navigator/hardwareconcurrency/index.md b/files/ja/web/api/navigator/hardwareconcurrency/index.md index a43d902d7bfc9b..f0c25d9cbf4f0b 100644 --- a/files/ja/web/api/navigator/hardwareconcurrency/index.md +++ b/files/ja/web/api/navigator/hardwareconcurrency/index.md @@ -1,18 +1,15 @@ --- -title: Navigator.hardwareConcurrency +title: "Navigator: hardwareConcurrency プロパティ" +short-title: hardwareConcurrency slug: Web/API/Navigator/hardwareConcurrency +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- {{APIRef("HTML DOM")}} **`navigator.hardwareConcurrency`** は読み取り専用のプロパティで、ユーザーのコンピューター上でスレッドを実行するために使用可能な論理プロセッサー数を返します。 -## 構文 - -```js -logicalProcessors = window.navigator.hardwareConcurrency; -``` - ## 値 論理プロセッサーのコア数を示す数値です。 diff --git a/files/ja/web/api/navigator/hid/index.md b/files/ja/web/api/navigator/hid/index.md index 2cc8a66aee6b53..226d9a7640c3db 100644 --- a/files/ja/web/api/navigator/hid/index.md +++ b/files/ja/web/api/navigator/hid/index.md @@ -1,13 +1,16 @@ --- -title: Navigator.hid +title: "Navigator: hid プロパティ" +short-title: hid slug: Web/API/Navigator/hid l10n: - sourceCommit: 4b4638246aad5d39b9a2e5c572b179b4c39c0a84 + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- {{APIRef("WebHID API")}}{{SeeCompatTable}} -読み取り専用の **`Navigator.hid`** プロパティは、{{domxref("HID")}} オブジェクトを返します。このオブジェクトは、HID デバイスへの接続およびアタッチした HID デバイスのリストアップを行うメソッドと、HID デバイスの接続を扱うイベントハンドラーを提供します。 +**`Navigator.hid`** は読み取り専用のプロパティで、{{domxref("HID")}} オブジェクトを返します。このオブジェクトは、HID デバイスへの接続およびアタッチした HID デバイスのリストアップを行うメソッドと、HID デバイスの接続を扱うイベントハンドラーを提供します。 + +定義されている[権限ポリシー](/ja/docs/Web/HTTP/Permissions_Policy)が WebHID の使用をブロックしている場合、 `Navigator.hid` プロパティは利用できません。 ## 値 diff --git a/files/ja/web/api/navigator/keyboard/index.md b/files/ja/web/api/navigator/keyboard/index.md index 1347193d063d2c..1da3536542b401 100644 --- a/files/ja/web/api/navigator/keyboard/index.md +++ b/files/ja/web/api/navigator/keyboard/index.md @@ -1,19 +1,16 @@ --- -title: Navigator.keyboard +title: "Navigator: keyboard プロパティ" +short-title: keyboard slug: Web/API/Navigator/keyboard +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- {{SeeCompatTable}}{{APIRef("Keyboard API")}} **`keyboard`** は {{domxref("Navigator")}} インターフェイスの読み取り専用プロパティで、物理キーボードのキーボードレイアウトマップを受け取ったり、キー押下のキャプチャの切り替えたりするための {{domxref('Keyboard')}} オブジェクトを返します。 -## 構文 - -``` -var keyboard = navigator.keyboard -``` - -### 値 +## 値 {{domxref('Keyboard')}} オブジェクト。 diff --git a/files/ja/web/api/navigator/language/index.md b/files/ja/web/api/navigator/language/index.md index 4eb5d8e228f1fc..a8b118c904156a 100644 --- a/files/ja/web/api/navigator/language/index.md +++ b/files/ja/web/api/navigator/language/index.md @@ -1,21 +1,18 @@ --- -title: Navigator.language +title: "Navigator: language プロパティ" +short-title: language slug: Web/API/Navigator/language +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- {{APIRef("HTML DOM")}} **`Navigator.language`** は読み取り専用プロパティで、ユーザーの言語を表す文字列を返します。普通、ブラウザー UI の言語が返されます。 -## 構文 +## 値 -```js -const lang = navigator.language; -``` - -### 値 - -{{domxref("DOMString")}} です。`lang` は、[BCP 47](https://tools.ietf.org/rfc/bcp/bcp47.txt) で定義された言語バージョンを表す文字列が格納されます。例えば、"en"、"en-US"、"fr"、"fr-FR"、"es-ES" などが含まれます。 +文字列で、 {{RFC(5646, "Tags for Identifying Languages (also known as BCP 47)")}} で定義された言語バージョンを表します。例えば、"en"、"en-US"、"fr"、"fr-FR"、"es-ES" などが含まれます。 iOS 10.2 以前の Safari では、国コードは "en-us"、"fr-fr" のように小文字で返されます。 diff --git a/files/ja/web/api/navigator/languages/index.md b/files/ja/web/api/navigator/languages/index.md index 82d8d0a1ccc4b8..40352c46350ae7 100644 --- a/files/ja/web/api/navigator/languages/index.md +++ b/files/ja/web/api/navigator/languages/index.md @@ -1,8 +1,9 @@ --- -title: Navigator.languages +title: "Navigator: languages プロパティ" +short-title: languages slug: Web/API/Navigator/languages l10n: - sourceCommit: 4b4638246aad5d39b9a2e5c572b179b4c39c0a84 + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- {{APIRef("HTML DOM")}} diff --git a/files/ja/web/api/navigator/locks/index.md b/files/ja/web/api/navigator/locks/index.md index 46cf64c82a9c45..a89a514a8f827e 100644 --- a/files/ja/web/api/navigator/locks/index.md +++ b/files/ja/web/api/navigator/locks/index.md @@ -1,26 +1,23 @@ --- -title: Navigator.locks +title: "Navigator: locks プロパティ" +short-title: locks slug: Web/API/Navigator/locks +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- -{{SeeCompatTable}}{{APIRef("Web Locks")}} +{{APIRef("Web Locks")}} -{{domxref("Navigator")}} インターフェイスの **`locks`** 読み取り専用プロパティは、新しい{{domxref('Lock')}} オブジェクトを要求するためのメソッドを提供する {{domxref("LockManager")}} オブジェクトを返します。既存の `Lock` オブジェクトを照会します。 +**`locks`** は {{domxref("Navigator")}} インターフェイスの読み取り専用プロパティで、新しい{{domxref('Lock')}} オブジェクトを要求するためのメソッドを提供する {{domxref("LockManager")}} オブジェクトを返します。既存の `Lock` オブジェクトを照会します。 -## 構文 - -``` -var lockManager = Navigator.locks -``` - -### 値 +## 値 {{domxref("LockManager")}} オブジェクト。 -## 仕様 +## 仕様書 {{Specifications}} -## ブラウザー実装状況 +## ブラウザーの互換性 -{{Compat("api.Navigator.locks")}} +{{Compat}} diff --git a/files/ja/web/api/navigator/maxtouchpoints/index.md b/files/ja/web/api/navigator/maxtouchpoints/index.md index 8e65c7c968161f..a3718b54b64484 100644 --- a/files/ja/web/api/navigator/maxtouchpoints/index.md +++ b/files/ja/web/api/navigator/maxtouchpoints/index.md @@ -1,8 +1,9 @@ --- -title: Navigator.maxTouchPoints +title: "Navigator: maxTouchPoints プロパティ" +short-title: maxTouchPoints slug: Web/API/Navigator/maxTouchPoints l10n: - sourceCommit: 4b4638246aad5d39b9a2e5c572b179b4c39c0a84 + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- {{APIRef("HTML DOM")}} diff --git a/files/ja/web/api/navigator/mediadevices/index.md b/files/ja/web/api/navigator/mediadevices/index.md index 8b3fdcd3320c6b..3ee0e73dd4a489 100644 --- a/files/ja/web/api/navigator/mediadevices/index.md +++ b/files/ja/web/api/navigator/mediadevices/index.md @@ -1,16 +1,19 @@ --- -title: Navigator.mediaDevices +title: "Navigator: mediaDevices プロパティ" +short-title: mediaDevices slug: Web/API/Navigator/mediaDevices +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- -{{APIRef("Media Capture and Streams")}} +{{securecontext_header}}{{APIRef("Media Capture and Streams")}} **`Navigator.mediaDevices`** 読み取り専用プロパティは、カメラやマイク、画面共有のような接続されたメディア入力装置へのアクセスを提供する {{domxref("MediaDevices")}} オブジェクトを返します。 ## 構文 -``` -var mediaDevices = navigator.mediaDevices; +```js-nolint +navigator.mediaDevices ``` ### 返値 @@ -23,9 +26,9 @@ var mediaDevices = navigator.mediaDevices; ## ブラウザーの互換性 -{{Compat("api.Navigator.mediaDevices")}} +{{Compat}} ## 関連情報 -- [Media Capture and Streams API](/ja/docs/Web/API/Media_Streams_API): すべての media stream API についてのドキュメントのエントリーポイント。 +- [メディアキャプチャとストリーム API](/ja/docs/Web/API/Media_Capture_and_Streams_API): すべてのメディアストリーム API についてのドキュメントのエントリーポイント。 - [WebRTC API](/ja/docs/Web/API/WebRTC_API): 密接に関連する WebRTC API についてのドキュメント。 diff --git a/files/ja/web/api/navigator/mediasession/index.md b/files/ja/web/api/navigator/mediasession/index.md index 0e76c38e6d2a84..06717fb89454f8 100644 --- a/files/ja/web/api/navigator/mediasession/index.md +++ b/files/ja/web/api/navigator/mediasession/index.md @@ -1,8 +1,9 @@ --- -title: Navigator.mediaSession +title: "Navigator: mediaSession プロパティ" +short-title: mediaSession slug: Web/API/Navigator/mediaSession l10n: - sourceCommit: f3976b4130f066a6114aeb9617924cdcb0f994ce + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- {{APIRef}} diff --git a/files/ja/web/api/navigator/online/index.md b/files/ja/web/api/navigator/online/index.md index cd17a658e20fd4..5a0f36fe91686c 100644 --- a/files/ja/web/api/navigator/online/index.md +++ b/files/ja/web/api/navigator/online/index.md @@ -1,6 +1,9 @@ --- -title: Navigator.onLine +title: "Navigator: onLine プロパティ" +short-title: onLine slug: Web/API/Navigator/onLine +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- {{ApiRef("HTML DOM")}} @@ -9,21 +12,15 @@ slug: Web/API/Navigator/onLine このプロパティの実装は、ブラウザーにより異なります。 -Chrome および Safari は、ブラウザーがローカルエリアネットワーク (LAN) またはルーターに接続できないときにオフライン、それ以外の状況では `true` を返します。従って、`false` 値が返る場合はブラウザーがオフラインであると考えることができますが、`true` 値は必ずインターネットにアクセスできると考えることはできません。仮想イーサネットアダプタを持つ仮想化ソフトウェアを実行しているコンピュータでは常に「接続中」になるなど、誤検出になる可能性があります。よって、本当にブラウザーのオンラインである状態を検出したい場合は、チェックするための追加の手段を開発する必要があります。詳しくは HTML5 Rocks の記事 [Working Off the Grid](https://www.html5rocks.com/en/mobile/workingoffthegrid.html) をご覧ください。 +Chrome および Safari は、ブラウザーがローカルエリアネットワーク (LAN) またはルーターに接続できないときにオフライン、それ以外の状況では `true` を返します。従って、`false` 値が返る場合はブラウザーがオフラインであると考えることができますが、`true` 値は必ずインターネットにアクセスできると考えることはできません。仮想イーサネットアダプタを持つ仮想化ソフトウェアを実行しているコンピュータでは常に「接続中」になるなど、誤検出になる可能性があります。よって、本当にブラウザーのオンラインである状態を検出したい場合は、チェックするための追加の手段を開発する必要があります。 -Firefox と Internet Explorer では、ブラウザーをオフラインモードに切り替えると、 `false` 値が送信されます。 Firefox 41 までは、それ以外の条件では `true` 値が返されます。 Windows の Nightly 68 で実際の動作を確認したところ、 Chrome や Safari のように LAN 接続のみを確認しているため、誤検出が発生していました。 +Firefox では、ブラウザーをオフラインモードに切り替えると、 `false` 値が送信されます。 Firefox 41 までは、それ以外の条件では `true` 値が返されます。 Windows の Nightly 68 で実際の動作を確認したところ、 Chrome や Safari のように LAN 接続のみを確認しているため、誤検出が発生していました。 -[`window.ononline`](/ja/docs/Web/API/document.ononline) および [`window.onoffline`](/ja/docs/Web/API/document.onoffline) イベントを待ち受けすることにより、ネットワーク接続状態の変化を確認することができます。 +[`online`](/ja/docs/Web/API/Window/online_event) および [`offline`](/ja/docs/Web/API/Window/offline_event) イベントを待ち受けすることにより、ネットワーク接続状態の変化を確認することができます。 -## 構文 +## 値 -```js -online = window.navigator.onLine; -``` - -### 値 - -`online` には `true` または `false` の論理値が返されます。 +論理値です。 ## 例 @@ -46,11 +43,11 @@ if (navigator.onLine) { ネットワーク接続状態の変化を確認するには、以下の例のように [`addEventListener`](/ja/docs/Web/API/EventTarget/addEventListener) を使用して、 `window.online` および `window.offline` を待ち受けします。 ```js -window.addEventListener("offline", function (e) { +window.addEventListener("offline", (e) => { console.log("offline"); }); -window.addEventListener("online", function (e) { +window.addEventListener("online", (e) => { console.log("online"); }); ``` @@ -62,13 +59,3 @@ window.addEventListener("online", function (e) { ## ブラウザーの互換性 {{Compat}} - -## 注 - -Firefox 3 で導入された新しいオフライン関連イベントと、このプロパティの詳しい説明は、[Online/Offline Events‎](/ja/docs/Web/API/Navigator/Online_and_offline_events) を参照してください。 - -## 関連情報 - -- [HTML5 Rocks: Working Off the Grid With HTML5 Offline](https://www.html5rocks.com/en/mobile/workingoffthegrid.html) -- [HTML5 Rocks: "Offline": What does it mean and why should I care?](https://www.html5rocks.com/en/tutorials/offline/whats-offline/) -- [Mozilla Blog: Offline Web Applications](https://hacks.mozilla.org/2010/01/offline-web-applications/) diff --git a/files/ja/web/api/navigator/oscpu/index.md b/files/ja/web/api/navigator/oscpu/index.md index d2ede7ce912260..8c7c911485804f 100644 --- a/files/ja/web/api/navigator/oscpu/index.md +++ b/files/ja/web/api/navigator/oscpu/index.md @@ -1,41 +1,38 @@ --- -title: Navigator.oscpu +title: "Navigator: oscpu プロパティ" +short-title: oscpu slug: Web/API/Navigator/oscpu +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- {{ ApiRef("HTML DOM") }} **`Navigator.oscpu`** プロパティは、現在のオペレーティングシステムを識別する文字列を返します。 -## 構文 +## 値 -``` -oscpuInfo = navigator.oscpu -``` - -### 値 - -{{domxref("DOMString")}} はブラウザーが実行されているオペレーティングシステムを識別する文字列を提供します。 +文字列で、ブラウザーが実行されているオペレーティングシステムを識別する文字列を提供します。 | オペレーティングシステム | `oscpuInfo` の文字列形式 | | ----------------------------- | ---------------------------------------------------- | -| OS/2 | OS/2 Warp x (3, 4, 4.5 のいずれか) | -| Windows CE | WindowsCE x.y1 | -| Windows 64-bit (64 ビット版) | Windows NT x.y; Win64; x64 | -| Windows 64-bit (32 ビット版) | Windows NT x.y; WOW64 | -| Windows 32-bit | Windows NT x.y | -| Mac OS X (PPC 版) | PowerPC Mac OS X version x.y | -| Mac OS X (i386/x64 版) | Intel Mac OS X or macOS version x.y | +| OS/2 | `OS/2 Warp x (either 3, 4 or 4.5)` | +| Windows CE | `WindowsCE x.y` | +| Windows 64-bit (64-bit build) | `Windows NT x.y; Win64; x64` | +| Windows 64-bit (32-bit build) | `Windows NT x.y; WOW64` | +| Windows 32-bit | `Windows NT x.y` | +| Mac OS X (PPC build) | `PowerPC Mac OS X version x.y` | +| Mac OS X (i386/x64 build) | `Intel Mac OS X` または `macOS version x.y` | | Linux 64 ビット (32 ビット版) | `uname -s` の出力結果に `i686 on x86_64`を加えたもの | | Linux | `uname -sm` の出力結果 | -1. x.y はオペレーティングシステムのバージョンを参照 +表中の `x.y` はオペレーティングシステムのバージョンを参照 ## 例 ```js function osInfo() { - alert(window.navigator.oscpu); + alert(navigator.oscpu); } osInfo(); // alerts "Windows NT 6.0" for example @@ -43,7 +40,7 @@ osInfo(); // alerts "Windows NT 6.0" for example ## 使用上の注意 -コードが特権 ({{Glossary("Chrome", "クローム")}}であるか、少なくとも UniversalBrowserRead privilege) を持っていない場合は、実際のプラットフォームの代わりに `general.oscpu.override` 設定の値が得られる可能性があります。 +コードが権限（クロームであるか、少なくとも UniversalBrowserRead 権限）を持っていない場合は、実際のプラットフォームの代わりに `general.oscpu.override` 設定の値が得られる可能性があります。 ## 仕様書 @@ -51,4 +48,4 @@ osInfo(); // alerts "Windows NT 6.0" for example ## ブラウザーの互換性 -{{Compat("api.Navigator.oscpu")}} +{{Compat}} diff --git a/files/ja/web/api/navigator/permissions/index.md b/files/ja/web/api/navigator/permissions/index.md index b7e08e5b54cddd..a2b866e6852d21 100644 --- a/files/ja/web/api/navigator/permissions/index.md +++ b/files/ja/web/api/navigator/permissions/index.md @@ -1,26 +1,23 @@ --- -title: Navigator.permissions +title: "Navigator: permissions プロパティ" +short-title: permissions slug: Web/API/Navigator/permissions +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- -{{APIRef("HTML DOM")}}{{SeeCompatTable}} +{{APIRef("HTML DOM")}} -**`Navigator.permissions`** 読み取り専用プロパティは、[Permissions API](/ja/docs/Web/API/Permissions_API) の対象となる API のパーミッションの状態を照会および更新するために使用できる {{domxref("Permissions")}} オブジェクトを返します。 - -## 構文 - -``` -permissionsObj = globalObj.navigator.permissions -``` +**`Navigator.permissions`** は読み取り専用プロパティで、[権限 API](/ja/docs/Web/API/Permissions_API) の対象となる API のパーミッションの状態を照会および更新するために使用できる {{domxref("Permissions")}} オブジェクトを返します。 ## 値 -{{domxref("Permissions")}} オブジェクト。 +{{domxref("Permissions")}} オブジェクトです。 ## 例 ```js -navigator.permissions.query({ name: "geolocation" }).then(function (result) { +navigator.permissions.query({ name: "geolocation" }).then((result) => { if (result.state === "granted") { showMap(); } else if (result.state === "prompt") { @@ -36,9 +33,9 @@ navigator.permissions.query({ name: "geolocation" }).then(function (result) { ## ブラウザーの互換性 -{{Compat("api.Navigator.permissions")}} +{{Compat}} ## 関連情報 -- [Permissions API](/ja/docs/Web/API/Permissions_API) +- [権限 API](/ja/docs/Web/API/Permissions_API) - {{domxref("Navigator")}} diff --git a/files/ja/web/api/navigator/presentation/index.md b/files/ja/web/api/navigator/presentation/index.md index 49537cb47d38cc..50e95b6203579f 100644 --- a/files/ja/web/api/navigator/presentation/index.md +++ b/files/ja/web/api/navigator/presentation/index.md @@ -1,15 +1,18 @@ --- -title: Navigator.presentation +title: "Navigator: presentation プロパティ" +short-title: presentation slug: Web/API/Navigator/presentation +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- -{{SeeCompatTable}}{{securecontext_header}}{{APIRef("Presentation API")}} +{{securecontext_header}}{{APIRef("Presentation API")}} -`presentation` は {{DOMxRef("Navigator")}} のプロパティで、 [Presentation API](/ja/docs/Web/API/Presentation_API) のエントリーポイントを提供し、 {{DOMxRef("Presentation")}} オブジェクトへの参照を返します。 +`presentation` は {{DOMxRef("Navigator")}} のプロパティで、[プレゼンテーション API](/ja/docs/Web/API/Presentation_API) のエントリーポイントを提供し、 {{DOMxRef("Presentation")}} オブジェクトへの参照を返します。 ## 構文 -``` +```js-nolint const presentation = navigator.presentation ``` @@ -23,9 +26,9 @@ const presentation = navigator.presentation ## ブラウザーの互換性 -{{Compat("api.Navigator.presentation")}} +{{Compat}} ## 関連情報 -- [Presentation API](/ja/docs/Web/API/Presentation_API) +- [プレゼンテーション API](/ja/docs/Web/API/Presentation_API) - {{DOMxRef("Presentation")}} diff --git a/files/ja/web/api/navigator/product/index.md b/files/ja/web/api/navigator/product/index.md index 3f421a2c871728..c2ba6b9670df7b 100644 --- a/files/ja/web/api/navigator/product/index.md +++ b/files/ja/web/api/navigator/product/index.md @@ -1,6 +1,9 @@ --- -title: Navigator.product +title: "Navigator: product プロパティ" +short-title: product slug: Web/API/Navigator/product +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- {{APIRef("HTML DOM")}} {{Deprecated_Header}} @@ -9,12 +12,6 @@ slug: Web/API/Navigator/product > **メモ:** このプロパティが実際の製品名を返すことを期待しないでください。どのブラウザーもこのプロパティの値として "`Gecko`" を返します。 -## 構文 - -```js -productName = navigator.product; -``` - ### 値 文字列 "`Gecko`" です。 diff --git a/files/ja/web/api/navigator/productsub/index.md b/files/ja/web/api/navigator/productsub/index.md index fdbd2a75fe76fe..ba0a3677a95169 100644 --- a/files/ja/web/api/navigator/productsub/index.md +++ b/files/ja/web/api/navigator/productsub/index.md @@ -1,44 +1,37 @@ --- -title: Navigator.productSub +title: "Navigator: productSub プロパティ" +short-title: productSub slug: Web/API/Navigator/productSub +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- -{{ ApiRef("HTML DOM") }} +{{ ApiRef("HTML DOM") }} {{Deprecated_Header}} **`Navigator.productSub`** プロパティは読み取り専用で、現在のブラウザーのビルド番号を返します。 -## 構文 +## 値 -``` -prodSub = window.navigator.productSub -``` - -- `prodSub` は、文字列です。 +文字列です。 ## 例 ```js - - - -// 20010725 などを返します。 +document.body.textContent = `productSub: ${navigator.productSub}`; ``` +{{ EmbedLiveSample("Examples") }} + ## メモ IE では、このプロパティは、 `undefined` を返します。 -Google Chrome および Apple Safari では、このプロパティは常に `20030107` を返します。 +Apple Safari および Google Chrome では、このプロパティは常に `20030107` を返します。 ## 仕様書 {{Specifications}} -## ブラウザーの対応 +## ブラウザーの互換性 -{{Compat("api.Navigator.productSub")}} +{{Compat}} diff --git a/files/ja/web/api/navigator/serial/index.md b/files/ja/web/api/navigator/serial/index.md index f077ba12eae74b..a2409aeefbec44 100644 --- a/files/ja/web/api/navigator/serial/index.md +++ b/files/ja/web/api/navigator/serial/index.md @@ -1,13 +1,14 @@ --- -title: Navigator.serial +title: "Navigator: serial プロパティ" +short-title: serial slug: Web/API/Navigator/serial l10n: - sourceCommit: 4b4638246aad5d39b9a2e5c572b179b4c39c0a84 + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- {{APIRef("HTML DOM")}}{{SeeCompatTable}} -{{domxref("Navigator")}} インターフェイスの読み取り専用プロパティ **`serial`** は、{{domxref("Web Serial API")}} のエントリーポイントを表す {{domxref("Serial")}} オブジェクトを返します。 +**`serial`** は {{domxref("Navigator")}} インターフェイスの読み取り専用プロパティで、{{domxref("Web Serial API", "ウェブシリアル API", "", 1)}} のエントリーポイントを表す {{domxref("Serial")}} オブジェクトを返します。 読み取り時、常に同じ {{domxref("Serial")}} オブジェクトのインスタンスが返ります。 diff --git a/files/ja/web/api/navigator/serviceworker/index.md b/files/ja/web/api/navigator/serviceworker/index.md index 2821ab7fc43e7a..b482fcb24b0f50 100644 --- a/files/ja/web/api/navigator/serviceworker/index.md +++ b/files/ja/web/api/navigator/serviceworker/index.md @@ -1,23 +1,20 @@ --- -title: Navigator.serviceWorker +title: "Navigator: serviceWorker プロパティ" +short-title: serviceWorker slug: Web/API/Navigator/serviceWorker +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- {{APIRef("Service Workers API")}} -**`Navigator.serviceWorker`** は読み取り専用のプロパティで、[関連付けられた文書](https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window)で {{domxref("ServiceWorker")}} の登録、削除、更新、通信へのアクセスを提供する {{domxref("ServiceWorkerContainer")}} オブジェクトを返します。 +**`Navigator.serviceWorker`** は読み取り専用のプロパティで、 {{domxref("ServiceWorkerContainer")}} オブジェクトを返します。これは[関連付けられた文書](https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window)で {{domxref("ServiceWorker")}} の登録、削除、更新、通信へのアクセスを提供します。 この機能はプライベートモードでは利用できない可能性があります。 -## 構文 +## 値 -``` -var workerContainerInstance = navigator.serviceWorker; -``` - -### 値 - -{{domxref("ServiceWorkerContainer")}} +{{domxref("ServiceWorkerContainer")}} です。 ## 例 @@ -35,9 +32,9 @@ if ("serviceWorker" in navigator) { ## ブラウザーの互換性 -{{Compat("api.Navigator.serviceWorker")}} +{{Compat}} ## 関連情報 -- [ServiceWorker API](/ja/docs/Web/API/ServiceWorker_API) -- [サービスワーカーの使用](/ja/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- [サービスワーカー API](/ja/docs/Web/API/Service_Worker_API) +- [サービスワーカーの使用](/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers) diff --git a/files/ja/web/api/navigator/useractivation/index.md b/files/ja/web/api/navigator/useractivation/index.md index fa0b45e57be64a..bf91098efd59fd 100644 --- a/files/ja/web/api/navigator/useractivation/index.md +++ b/files/ja/web/api/navigator/useractivation/index.md @@ -1,13 +1,14 @@ --- -title: Navigator.userActivation +title: "Navigator: userActivation プロパティ" +short-title: userActivation slug: Web/API/Navigator/userActivation l10n: - sourceCommit: 165b70e57270af4ba85526d92cce74d51d12c39d + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- -{{APIRef("HTML DOM")}} {{SeeCompatTable}} +{{APIRef("HTML DOM")}} -{{domxref("Navigator")}} インターフェイスの読み取り専用プロパティ **`userActivation`** は、現在のウインドウのユーザーによる有効化の状態についての情報を持つ {{domxref("UserActivation")}} オブジェクトを返します。 +**`userActivation`** は {{domxref("Navigator")}} インターフェイスの読み取り専用プロパティで、現在のウインドウのユーザーによる有効化の状態についての情報を持つ {{domxref("UserActivation")}} オブジェクトを返します。 ## 値 diff --git a/files/ja/web/api/navigator/useragentdata/index.md b/files/ja/web/api/navigator/useragentdata/index.md index 43db60f2bb1bf8..12d4cccf4f6a3e 100644 --- a/files/ja/web/api/navigator/useragentdata/index.md +++ b/files/ja/web/api/navigator/useragentdata/index.md @@ -1,13 +1,14 @@ --- -title: Navigator.userAgentData +title: "Navigator: userAgentData プロパティ" +short-title: userAgentData slug: Web/API/Navigator/userAgentData l10n: - sourceCommit: 4b4638246aad5d39b9a2e5c572b179b4c39c0a84 + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- {{securecontext_header}}{{APIRef("User-Agent Client Hints API")}}{{SeeCompatTable}} -**`userAgentData`** は {{domxref("WorkerNavigator")}} インターフェイスの読み取り専用プロパティで、 {{domxref("NavigatorUAData")}} オブジェクトを返します。これを使用して、{{domxref("User-Agent Client Hints API", "ユーザーエージェントクライアントヒント API", "", 1)}} へアクセスすることができます。 +**`userAgentData`** は {{domxref("Navigator")}} インターフェイスの読み取り専用プロパティで、 {{domxref("NavigatorUAData")}} オブジェクトを返します。これを使用して、{{domxref("User-Agent Client Hints API", "ユーザーエージェントクライアントヒント API", "", 1)}} へアクセスすることができます。 ## 値 diff --git a/files/ja/web/api/navigator/vendor/index.md b/files/ja/web/api/navigator/vendor/index.md index 9efb403786496e..6ceae111b661cc 100644 --- a/files/ja/web/api/navigator/vendor/index.md +++ b/files/ja/web/api/navigator/vendor/index.md @@ -1,37 +1,23 @@ --- -title: Navigator.vendor +title: "Navigator: vendor プロパティ" +short-title: vendor slug: Web/API/Navigator/vendor +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- -{{ APIRef("HTML DOM") }} +{{APIRef("HTML DOM")}}{{Deprecated_Header}} -現在のブラウザーのブラウザーベンダーの名前を返します。 +{{DomXref("Navigator")}} の **`vendor`** プロパティの値は常に "`Google Inc.`"、"`Apple Computer, Inc.`"、（Firefox では）空文字列のいずれかです。 -## 構文 +## 値 -``` -venString = window.navigator.vendor -``` - -### 値 - -- _venString_ は、 {{domxref("DOMString")}} です。 - -## 例 - -``` -window.navigator.vendor -// "Netscape6" などの文字列が返る -``` - -## メモ - -`vendor` は、ユーザエージェントを表す文字列の内の一部分です。 product と vendor は異なる可能性があります。例えば、Netscape 6.1 の場合、レンダリングに Gecko product を利用しています。 [navigator.product](/ja/docs/DOM/window.navigator.product)、[navigator.userAgent](/ja/docs/DOM/window.navigator.userAgent) も参照してください。 +- "`Google Inc.`"、"`Apple Computer, Inc.`"、（Firefox では）空文字列のいずれかです。 ## 仕様書 {{Specifications}} -## ブラウザーの対応 +## ブラウザーの互換性 -{{Compat("api.Navigator.vendor")}} +{{Compat}} diff --git a/files/ja/web/api/navigator/vendorsub/index.md b/files/ja/web/api/navigator/vendorsub/index.md index 9da22e5426c94a..7ec9a50233f91a 100644 --- a/files/ja/web/api/navigator/vendorsub/index.md +++ b/files/ja/web/api/navigator/vendorsub/index.md @@ -1,38 +1,23 @@ --- -title: Navigator.vendorSub +title: "Navigator: vendorSub プロパティ" +short-title: vendorSub slug: Web/API/Navigator/vendorSub +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- -{{ApiRef}}{{deprecated_header}} +{{ApiRef}} {{Deprecated_Header}} -**`Navigator.vendorSub`** プロパティは読み取り専用で、ベンダーバージョン番号が付いたベンダーの部分文字列です。仕様書ではブラウザーが常に空文字列を返して良いことになっているため、このプロパティから頼れる回答を期待しないでください。 - -## 構文 - -``` -venSub = window.navigator.vendorSub -``` +**`Navigator.vendorSub`** プロパティの値は、どのブラウザーでも常に空文字列です。 ### 値 -- _venSub_ は {{domxref("DOMString")}} です。 - -## 例 - -```js -window.navigator.vendorSub; -// "6.1" を返す場合、userAgent のべンダー名は、 -// Netscape6/6.1 などです。 -``` - -## メモ - -`vendorSub` は、ユーザーエージェント文字列全体の一部分です。バージョン番号は、ベンダー自身がそのブラウザーに与えたものです (製品のバージョンとは異なるかもしれません)。 Netscape 6.1 では、 `productSub` は `"5.0"` ですが、 `vendorSub` は `"6.1"` です。 {{domxref("window.navigator.productSub","navigator.productSub")}}, {{domxref("window.navigator.userAgent","navigator.userAgent")}}, {{domxref("window.navigator.vendor","navigator.vendor")}} も参照してください。 +- 空文字列です。 ## 仕様書 {{Specifications}} -## ブラウザーの対応 +## ブラウザーの互換性 -{{Compat("api.Navigator.vendorSub")}} +{{Compat}} diff --git a/files/ja/web/api/navigator/wakelock/index.md b/files/ja/web/api/navigator/wakelock/index.md index 3ce87058e23b4a..e236ccf61b2b40 100644 --- a/files/ja/web/api/navigator/wakelock/index.md +++ b/files/ja/web/api/navigator/wakelock/index.md @@ -1,16 +1,19 @@ --- -title: Navigator.wakeLock +title: "Navigator: wakeLock プロパティ" +short-title: wakeLock slug: Web/API/Navigator/wakeLock +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- -{{ApiRef("Screen Wake Lock API")}}{{SeeCompatTable}}{{securecontext_header}} +{{ApiRef("Screen Wake Lock API")}}{{securecontext_header}} **`wakeLock`** は読み取り専用のプロパティで、 {{DOMxRef("WakeLock")}} インターフェイスを返します。これにより、文書が画面起動ロックを取得することができます。画面起動ロックが有効であれば、ユーザーエージェントは端末が画面を暗くしたり、画面を完全にオフにしたり、スクリーンセーバーを表示したりすることを防ぐよう試みることができます。 ## 構文 -```js -const wakeLock = navigator.wakeLock; +```js-nolint +navigator.wakeLock ``` ## 仕様書 @@ -25,4 +28,4 @@ const wakeLock = navigator.wakeLock; - {{DOMxRef("WakeLock.request","WakeLock.request()")}} - [画面起動ロック API](/ja/docs/Web/API/Screen_Wake_Lock_API) -- [Blog post - Stay awake with the Screen Wake Lock API](https://web.dev/wakelock/) +- [ブログ投稿 - Stay awake with the Screen Wake Lock API](https://web.dev/wake-lock/) diff --git a/files/ja/web/api/navigator/webdriver/index.md b/files/ja/web/api/navigator/webdriver/index.md index 6207aa43cc91f7..ff0fd7f9fa8419 100644 --- a/files/ja/web/api/navigator/webdriver/index.md +++ b/files/ja/web/api/navigator/webdriver/index.md @@ -1,9 +1,12 @@ --- -title: Navigator.webdriver +title: "Navigator: webdriver プロパティ" +short-title: webdriver slug: Web/API/Navigator/webdriver +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- -{{SeeCompatTable}}{{APIRef("WebDriver")}} +{{APIRef("WebDriver")}} **`webdriver`** は {{domxref("navigator")}} インターフェイスの読み取り専用プロパティで、ユーザーエージェントが自動制御されているかどうかを示します。 @@ -16,12 +19,6 @@ slug: Web/API/Navigator/webdriver - Firefox - : 設定の `marionette.enabled` または `--marionette` フラグが渡されたとき。 -## 構文 - -``` -var isAutomated = navigator.webdriver -``` - ### 値 A {{JSxRef("Boolean")}} @@ -32,4 +29,4 @@ A {{JSxRef("Boolean")}} ## ブラウザーの互換性 -{{Compat("api.Navigator.webdriver")}} +{{Compat}} diff --git a/files/ja/web/api/navigator/xr/index.md b/files/ja/web/api/navigator/xr/index.md index 6972b71a17b53c..884454be5f1711 100644 --- a/files/ja/web/api/navigator/xr/index.md +++ b/files/ja/web/api/navigator/xr/index.md @@ -1,25 +1,22 @@ --- -title: Navigator.xr +title: "Navigator: xr プロパティ" +short-title: xr slug: Web/API/Navigator/xr +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- -{{APIRef("WebXR Device API")}} +{{APIRef("WebXR Device API")}}{{SecureContext_Header}}{{SeeCompatTable}} -{{domxref("Navigator")}} インターフェイスまたは {{domxref("WorkerNavigator")}} インターフェイスによって提供される **`xr`** 読み取り専用プロパティは、[WebXR Device API](/ja/docs/Web/API/WebXR_Device_API) へのアクセスに使用できる {{domxref("XRSystem")}} オブジェクトを返します。 +**`xr`** は {{domxref("Navigator")}} インターフェイスによって提供される読み取り専用プロパティで、[WebXR 機器 API](/ja/docs/Web/API/WebXR_Device_API) へのアクセスに使用できる {{domxref("XRSystem")}} オブジェクトを返します。 -## 構文 +## 値 -``` -const xr = navigator.xr -``` - -### 値 - -現在のコンテキストで [WebXR Device API](/ja/docs/Web/API/WebXR_Device_API) とのインターフェイスに使用する {{domxref("XRSystem")}} オブジェクト。 これを使用して、拡張現実や仮想現実の画像をユーザーに提示することができます。 +現在のコンテキストで [WebXR 機器 API](/ja/docs/Web/API/WebXR_Device_API) とのインターフェイスに使用する {{domxref("XRSystem")}} オブジェクト。 これを使用して、拡張現実や仮想現実の画像をユーザーに提示することができます。 ## 使用上の注意 -各 {{domxref("Window")}} には独自の {{domxref("Navigator")}} のインスタンスがあり、{{domxref("Window.navigator","window.navigator")}} または単に {{domxref("Window.navigator", "navigator")}} としてアクセスできます。 同時に、新しい {{domxref("XRSystem")}} インスタンスも作成され、{{domxref("Navigator.xr", "navigator.xr")}} として `navigator` インスタンスにアタッチされます。 `xr` プロパティが存在する場合は、それを使用して [WebXR Device API](/ja/docs/Web/API/WebXR_Device_API) にアクセスできます。 +それぞれの {{domxref("Window")}} には独自の {{domxref("Navigator")}} のインスタンスがあり、{{domxref("Window.navigator","window.navigator")}} または単に {{domxref("Window.navigator", "navigator")}} としてアクセスできます。 同時に、新しい {{domxref("XRSystem")}} インスタンスも作成され、{{domxref("Navigator.xr", "navigator.xr")}} として `navigator` インスタンスにアタッチされます。 `xr` プロパティが存在する場合は、それを使用して [WebXR 機器 API](/ja/docs/Web/API/WebXR_Device_API) にアクセスできます。 WebXR が利用可能かどうかを判断するには、次のようにします。 @@ -37,7 +34,7 @@ if ("xr" in window.navigator) { ## ブラウザーの互換性 -{{Compat("api.Navigator.xr")}} +{{Compat}} ## 関連情報 From 708b5ec5e70e96b05dee7644084fe3f5902582f5 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 11 Sep 2023 00:44:30 +0900 Subject: [PATCH 281/600] =?UTF-8?q?2023/08/12=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../guide/expressions_and_operators/index.md | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/files/ja/web/javascript/guide/expressions_and_operators/index.md b/files/ja/web/javascript/guide/expressions_and_operators/index.md index 4ddbfc2b5b8088..5c0a83c1762981 100644 --- a/files/ja/web/javascript/guide/expressions_and_operators/index.md +++ b/files/ja/web/javascript/guide/expressions_and_operators/index.md @@ -2,7 +2,7 @@ title: 式と演算子 slug: Web/JavaScript/Guide/Expressions_and_operators l10n: - sourceCommit: 9c4fb236cd9ced12b1eb8e7696d8e6fcb8d8bad3 + sourceCommit: d71b141d2d18b96639547856714df19cefacfebf --- {{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}} @@ -122,6 +122,8 @@ console.log(val); // 0 と表示 より複雑な代入方法、[分割代入](/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)構文は、配列やオブジェクトのリテラル構造を反映した構文を用いて、配列やオブジェクトからデータを抽出することができる JavaScript の式です。 +分割代入をしないと、配列やオブジェクトから値を取り出すのに複数の文が必要になります。 + ```js const foo = ["one", "two", "three"]; @@ -129,8 +131,11 @@ const foo = ["one", "two", "three"]; const one = foo[0]; const two = foo[1]; const three = foo[2]; +``` -// 分割代入 +分割代入を使用すると、単一の文で複数の値を別々の変数に抽出することができます。 + +```js const [one, two, three] = foo; ``` @@ -1007,8 +1012,8 @@ a * c + b * c // 9 [`new` 演算子](/ja/docs/Web/JavaScript/Reference/Operators/new)を使用すると、いずれかのユーザー定義オブジェクト型や組み込みオブジェクト型のインスタンスを生成することができます。 `new` の使用法は以下のとおりです。 -```js -const オブジェクト名 = new objectType(引数1, 引数2, /* …, */ 引数N); +```js-nolint +const オブジェクト名 = new オブジェクト型(引数1, 引数2, /* …, */ 引数N); ``` ### super @@ -1016,7 +1021,7 @@ const オブジェクト名 = new objectType(引数1, 引数2, /* …, */ 引数 [`super` キーワード](/ja/docs/Web/JavaScript/Reference/Operators/super)は自分の親のオブジェクトに関数を呼び出すのに使います。 これは下の例のように、[クラス](/ja/docs/Web/JavaScript/Reference/Classes)と共に使って親のコンストラクターを呼び出すのに便利です。 -```js +```js-nolint super(引数); // 親のコンストラクターを呼び出す。 super.親の関数(引数); ``` From cdd803a7854135d855c74acbce76d29377879103 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 11 Sep 2023 01:30:49 +0900 Subject: [PATCH 282/600] =?UTF-8?q?2023/02/20=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/ndefrecord/index.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/files/ja/web/api/ndefrecord/index.md b/files/ja/web/api/ndefrecord/index.md index 61a5a048aef456..a85286fe070c34 100644 --- a/files/ja/web/api/ndefrecord/index.md +++ b/files/ja/web/api/ndefrecord/index.md @@ -1,9 +1,11 @@ --- title: NDEFRecord slug: Web/API/NDEFRecord +l10n: + sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de --- -{{securecontext_header}}{{SeeCompatTable}}{{APIRef()}} +{{SecureContext_Header}}{{SeeCompatTable}}{{APIRef("Web NFC API")}} **`NDEFRecord`** は[ウェブ NFC API](/ja/docs/Web/API/Web_NFC_API) のインターフェイスで、 NDEF に対応する NFC タグなど、互換性のある NFC 機器から読み取ったり、書き込んだりできるデータを提供します。 @@ -12,7 +14,7 @@ slug: Web/API/NDEFRecord - {{DOMxRef("NDEFRecord.NDEFRecord", "NDEFRecord()")}} {{Experimental_Inline}} - : 新しい `NDEFRecord` を返します。 -## プロパティ +## インスタンスプロパティ - {{DOMxRef("NDEFRecord.recordType")}} {{Experimental_Inline}} {{ReadOnlyInline}} - : このレコードのレコード型を返します。レコードは標準のよく知られた型名を持つ必要があります。例えば `"empty"`, `"text"`, `"url"`, `"smart-poster"`, `"absolute-url"`, `"mime"`, `"unknown"` またはそれ以外に、ドメイン名で構成された外部型名や、コロン (":") で区切られたカスタム型名です。 @@ -28,7 +30,7 @@ slug: Web/API/NDEFRecord - {{DOMxRef("NDEFRecord.lang")}} {{Experimental_Inline}} {{ReadOnlyInline}} - : テキストペイロードの言語を返します。提供されていない場合は `null` です。 -## メソッド +## インスタンスメソッド - {{DOMxRef("NDEFRecord.toRecords", "NDEFRecord.toRecords()")}} {{Experimental_Inline}} - : {{DOMxRef("NDEFRecord.data")}} をレコードの並びに変換します。これにより、スマートポスターや外部型レコードなど、ネストしたレコードを含む可能性のあるレコードタイプのペイロードを解釈することができます。 From 4eb39df7ee2d8a3a14e4e69de3047c18dadd3c15 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 11 Sep 2023 01:36:51 +0900 Subject: [PATCH 283/600] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/ndefrecord/data/index.md | 11 +++++++---- files/ja/web/api/ndefrecord/encoding/index.md | 13 ++++++++----- files/ja/web/api/ndefrecord/id/index.md | 13 ++++++++----- files/ja/web/api/ndefrecord/lang/index.md | 13 ++++++++----- .../ja/web/api/ndefrecord/mediatype/index.md | 13 ++++++++----- .../ja/web/api/ndefrecord/ndefrecord/index.md | 13 ++++++++----- .../ja/web/api/ndefrecord/recordtype/index.md | 13 ++++++++----- .../ja/web/api/ndefrecord/torecords/index.md | 19 +++++++++++-------- 8 files changed, 66 insertions(+), 42 deletions(-) diff --git a/files/ja/web/api/ndefrecord/data/index.md b/files/ja/web/api/ndefrecord/data/index.md index 916d2b1e583885..064538a7558370 100644 --- a/files/ja/web/api/ndefrecord/data/index.md +++ b/files/ja/web/api/ndefrecord/data/index.md @@ -1,16 +1,19 @@ --- -title: NDEFRecord.data +title: "NDEFRecord: data プロパティ" +short-title: data slug: Web/API/NDEFRecord/data +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- -{{securecontext_header}}{{SeeCompatTable}}{{APIRef()}} +{{SecureContext_Header}}{{SeeCompatTable}}{{APIRef("Web NFC API")}} **`data`** は {{DOMxRef("NDEFRecord")}} インターフェイスのプロパティで、このレコードのペイロードの生のバイト列が入った {{jsxref("DataView")}} を返します。 ## 構文 -```js -NDEFRecord.data; +```js-nolint +NDEFRecord.data ``` ### 値 diff --git a/files/ja/web/api/ndefrecord/encoding/index.md b/files/ja/web/api/ndefrecord/encoding/index.md index be84d1a60849f9..e199b52014b7ef 100644 --- a/files/ja/web/api/ndefrecord/encoding/index.md +++ b/files/ja/web/api/ndefrecord/encoding/index.md @@ -1,21 +1,24 @@ --- -title: NDEFRecord.encoding +title: "NDEFRecord: encoding プロパティ" +short-title: encoding slug: Web/API/NDEFRecord/encoding +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- -{{securecontext_header}}{{SeeCompatTable}}{{APIRef()}} +{{SecureContext_Header}}{{SeeCompatTable}}{{APIRef("Web NFC API")}} **`encoding`** は {{DOMxRef("NDEFRecord")}} インターフェイスのプロパティで、テキストのペイロードのエンコーディングを返します。それ以外の場合は `null` です。 ## 構文 -```js -NDEFRecord.encoding; +```js-nolint +NDEFRecord.encoding ``` ### 値 -{{DOMxRef("USVString")}} で、 `"utf-8"`, `"utf-16"`, `"utf-16le"`, `"utf-16be"` のうちの何れかです。 +文字列で、 `"utf-8"`, `"utf-16"`, `"utf-16le"`, `"utf-16be"` のうちのいずれかです。 ## 仕様書 diff --git a/files/ja/web/api/ndefrecord/id/index.md b/files/ja/web/api/ndefrecord/id/index.md index d94d722dd23d53..3ec7f83e0ccdc9 100644 --- a/files/ja/web/api/ndefrecord/id/index.md +++ b/files/ja/web/api/ndefrecord/id/index.md @@ -1,9 +1,12 @@ --- -title: NDEFRecord.id +title: "NDEFRecord: id プロパティ" +short-title: id slug: Web/API/NDEFRecord/id +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- -{{securecontext_header}}{{SeeCompatTable}}{{APIRef()}} +{{SecureContext_Header}}{{SeeCompatTable}}{{APIRef("Web NFC API")}} **`id`** は {{DOMxRef("NDEFRecord")}} インターフェイスのプロパティで、このレコードを識別するのに使用される絶対または相対 URL をレコード識別子として返します。 @@ -11,13 +14,13 @@ slug: Web/API/NDEFRecord/id ## 構文 -```js -NDEFRecord.id; +```js-nolint +NDEFRecord.id ``` ### 値 -{{DOMxRef("USVString")}} です。 +文字列です。 ## 仕様書 diff --git a/files/ja/web/api/ndefrecord/lang/index.md b/files/ja/web/api/ndefrecord/lang/index.md index 14d8ec2b4137b2..7639b3f1df4a57 100644 --- a/files/ja/web/api/ndefrecord/lang/index.md +++ b/files/ja/web/api/ndefrecord/lang/index.md @@ -1,9 +1,12 @@ --- -title: NDEFRecord.lang +title: "NDEFRecord: lang プロパティ" +short-title: lang slug: Web/API/NDEFRecord/lang +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- -{{securecontext_header}}{{SeeCompatTable}}{{APIRef()}} +{{SecureContext_Header}}{{SeeCompatTable}}{{APIRef("Web NFC API")}} **`lang`** は {{DOMxRef("NDEFRecord")}} インターフェイスのプロパティで、テキストのペイロードの言語を返します。提供されていない場合は `null` を返します。 @@ -11,13 +14,13 @@ slug: Web/API/NDEFRecord/lang ## 構文 -```js -NDEFRecord.lang; +```js-nolint +NDEFRecord.lang ``` ### 値 -{{DOMxRef("USVString")}} です。 +文字列です。 ## 仕様書 diff --git a/files/ja/web/api/ndefrecord/mediatype/index.md b/files/ja/web/api/ndefrecord/mediatype/index.md index 7ce624c09c2f87..b233683c77b586 100644 --- a/files/ja/web/api/ndefrecord/mediatype/index.md +++ b/files/ja/web/api/ndefrecord/mediatype/index.md @@ -1,21 +1,24 @@ --- -title: NDEFRecord.mediaType +title: "NDEFRecord: mediaType プロパティ" +short-title: mediaType slug: Web/API/NDEFRecord/mediaType +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- -{{securecontext_header}}{{SeeCompatTable}}{{APIRef()}} +{{SecureContext_Header}}{{SeeCompatTable}}{{APIRef("Web NFC API")}} **`mediaType`** は {{DOMxRef("NDEFRecord")}} インターフェイスのプロパティで、このレコードの {{Glossary("MIME type", "MIME タイプ")}}を返します。この値は `recordType` が `"mime"` と等しくない場合は `null` になります。 ## 構文 -```js -NDEFRecord.mediaType; +```js-nolint +NDEFRecord.mediaType ``` ### 値 -{{DOMxRef("USVString")}} で、このレコードのペイロードの {{Glossary("MIME type", "MIME タイプ")}}が入ります。 +文字列で、このレコードのペイロードの {{Glossary("MIME type", "MIME タイプ")}}が入ります。 ## 例 diff --git a/files/ja/web/api/ndefrecord/ndefrecord/index.md b/files/ja/web/api/ndefrecord/ndefrecord/index.md index d4051b70228af7..ca577336907bdf 100644 --- a/files/ja/web/api/ndefrecord/ndefrecord/index.md +++ b/files/ja/web/api/ndefrecord/ndefrecord/index.md @@ -1,16 +1,19 @@ --- -title: NDEFRecord() +title: "NDEFRecord: NDEFRecord() コンストラクター" +short-title: NDEFRecord() slug: Web/API/NDEFRecord/NDEFRecord +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- -{{securecontext_header}}{{SeeCompatTable}}{{APIRef()}} +{{SecureContext_Header}}{{SeeCompatTable}}{{APIRef("Web NFC API")}} **`NDEFRecord()`** は[ウェブ NFC API](/ja/docs/Web/API/Web_NFC_API) のコンストラクターで、新しく構築された {{DOMxRef("NDEFRecord")}} オブジェクトを返します。これは互換性のある NFC 機器（例えば、NDEF に対応している NFC タグ）から読み書きできるデータを表すものです。 ## 構文 -```js -writer = new NDEFRecord(options); +```js-nolint +new NDEFRecord(options) ``` ### 引数 @@ -20,7 +23,7 @@ writer = new NDEFRecord(options); - : 以下のプロパティを持つオブジェクトです。 - `data` {{optional_inline}} - - : 転送されるデータが入ります。文字列、{{domxref("BufferSource")}}、またはネストされたレコードの配列のいずれかです。 + - : 転送されるデータが入ります。文字列のオブジェクトまたはリテラル、{{jsxref("ArrayBuffer")}}、{{jsxref("TypedArray")}}、{{jsxref("DataView")}}、またはネストされたレコードの配列のいずれかです。 - `encoding` {{optional_inline}} - : 文字列で、このレコードのエンコーディングを指定します。 - `id` {{optional_inline}} diff --git a/files/ja/web/api/ndefrecord/recordtype/index.md b/files/ja/web/api/ndefrecord/recordtype/index.md index a3ec91c7a4492a..0340bf1369f11c 100644 --- a/files/ja/web/api/ndefrecord/recordtype/index.md +++ b/files/ja/web/api/ndefrecord/recordtype/index.md @@ -1,21 +1,24 @@ --- -title: NDEFRecord.recordType +title: "NDEFRecord: recordType プロパティ" +short-title: recordType slug: Web/API/NDEFRecord/recordType +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- -{{securecontext_header}}{{SeeCompatTable}}{{APIRef()}} +{{SecureContext_Header}}{{SeeCompatTable}}{{APIRef("Web NFC API")}} **`recordType`** は {{DOMxRef("NDEFRecord")}} インターフェイスのプロパティで、このレコードのレコード型を返します。 ## 構文 -```js -NDEFRecord.recordType; +```js-nolint +NDEFRecord.recordType ``` ### 値 -{{DOMxRef("USVString")}} で、以下のうちのいずれかを取ります。 +文字列で、以下のうちのいずれかを取ります。 - `"empty"` - : 空の NDEF レコードです。 diff --git a/files/ja/web/api/ndefrecord/torecords/index.md b/files/ja/web/api/ndefrecord/torecords/index.md index 43a9bbd55eb672..dc727149504187 100644 --- a/files/ja/web/api/ndefrecord/torecords/index.md +++ b/files/ja/web/api/ndefrecord/torecords/index.md @@ -1,16 +1,19 @@ --- -title: NDEFRecord.toRecords() +title: "NDEFRecord: toRecords() メソッド" +short-title: toRecords() slug: Web/API/NDEFRecord/toRecords +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- -{{securecontext_header}}{{SeeCompatTable}}{{APIRef()}} +{{SecureContext_Header}}{{SeeCompatTable}}{{APIRef("Web NFC API")}} **`toRecords()`** は {{DOMxRef("NDEFRecord")}} インターフェイスのメソッドで、 {{DOMxRef("NDEFRecord.data")}} を {{DOMxRef("NDEFRecord.recordType")}} に基づいた一連のレコードに変換し、その結果を返すものです。これにより、スマートポスターや外部型レコードなど、ネストしたレコードを含む可能性のあるレコード型のペイロードを解釈することができます。 ## 構文 -```js -NDEFRecord.toRecords(); +```js-nolint +toRecords() ``` ### 引数 @@ -23,7 +26,7 @@ NDEFRecord.toRecords(); ## 例外 -- {{domxref("DOMException")}} `"NotSupported"` +- `NotSupported` {{domxref("DOMException")}} - : {{Glossary("User Agent", "ユーザーエージェント")}}が {{DOMxRef("NDEFRecord.data")}} と {{DOMxRef("NDEFRecord.recordType")}} のこの組み合わせを解釈する方法を知らないことを示します。 ## 例 @@ -42,16 +45,16 @@ const ndefReader = new NDEFReader(); await ndefReader.scan(); ndefReader.onreading = (event) => { const externalRecord = event.message.records.find( - (record) => record.type == "example.com:smart-poster", + (record) => record.type === "example.com:smart-poster", ); let action, text; for (const record of externalRecord.toRecords()) { - if (record.recordType == "text") { + if (record.recordType === "text") { const decoder = new TextDecoder(record.encoding); text = decoder.decode(record.data); - } else if (record.recordType == ":act") { + } else if (record.recordType === ":act") { action = record.data.getUint8(0); } } From a0d0bbf938c5dec686f4d4a37ae21c6868368202 Mon Sep 17 00:00:00 2001 From: MikeCAT Date: Mon, 11 Sep 2023 07:38:58 +0900 Subject: [PATCH 284/600] Translate BluetoothRemoteGATTServer --- .../connect/index.md | 34 +++++++++++++++++ .../connected/index.md | 24 ++++++++++++ .../bluetoothremotegattserver/device/index.md | 24 ++++++++++++ .../disconnect/index.md | 34 +++++++++++++++++ .../getprimaryservice/index.md | 35 +++++++++++++++++ .../getprimaryservices/index.md | 35 +++++++++++++++++ .../api/bluetoothremotegattserver/index.md | 38 +++++++++++++++++++ 7 files changed, 224 insertions(+) create mode 100644 files/ja/web/api/bluetoothremotegattserver/connect/index.md create mode 100644 files/ja/web/api/bluetoothremotegattserver/connected/index.md create mode 100644 files/ja/web/api/bluetoothremotegattserver/device/index.md create mode 100644 files/ja/web/api/bluetoothremotegattserver/disconnect/index.md create mode 100644 files/ja/web/api/bluetoothremotegattserver/getprimaryservice/index.md create mode 100644 files/ja/web/api/bluetoothremotegattserver/getprimaryservices/index.md create mode 100644 files/ja/web/api/bluetoothremotegattserver/index.md diff --git a/files/ja/web/api/bluetoothremotegattserver/connect/index.md b/files/ja/web/api/bluetoothremotegattserver/connect/index.md new file mode 100644 index 00000000000000..f304fba03a57d5 --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattserver/connect/index.md @@ -0,0 +1,34 @@ +--- +title: "BluetoothRemoteGATTServer: connect() メソッド" +slug: Web/API/BluetoothRemoteGATTServer/connect +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +**`BluetoothRemoteGATTServer.connect()`** メソッドは、このスクリプト実行環境を `this.device` に接続させます。 + +## 構文 + +```js-nolint +connect() +``` + +### 引数 + +なし + +### 返値 + +{{domxref("BluetoothRemoteGATTServer")}} で解決する {{jsxref("Promise")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +{{APIRef("Web Bluetooth")}} diff --git a/files/ja/web/api/bluetoothremotegattserver/connected/index.md b/files/ja/web/api/bluetoothremotegattserver/connected/index.md new file mode 100644 index 00000000000000..4539160321272b --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattserver/connected/index.md @@ -0,0 +1,24 @@ +--- +title: "BluetoothRemoteGATTServer: connected プロパティ" +slug: Web/API/BluetoothRemoteGATTServer/connected +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +読み取り専用プロパティ **`BluetoothRemoteGATTServer.connected`** は、このスクリプト実行環境が `this.device` に接続されている間 `true` を返す論理値です。ユーザーエージェントが物理的に接続されていても `false` になる可能性があります。 + +## 値 + +`boolean` です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +{{APIRef("Web Bluetooth")}} diff --git a/files/ja/web/api/bluetoothremotegattserver/device/index.md b/files/ja/web/api/bluetoothremotegattserver/device/index.md new file mode 100644 index 00000000000000..5e73b578193b21 --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattserver/device/index.md @@ -0,0 +1,24 @@ +--- +title: "BluetoothRemoteGATTServer: device プロパティ" +slug: Web/API/BluetoothRemoteGATTServer/device +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +読み取り専用プロパティ **`BluetoothRemoteGATTServer.device`** は、このサーバーを動かしている {{DOMxRef("BluetoothDevice")}} への参照を返します。 + +## 値 + +{{domxref("BluetoothDevice")}} への参照です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +{{APIRef("Web Bluetooth")}} diff --git a/files/ja/web/api/bluetoothremotegattserver/disconnect/index.md b/files/ja/web/api/bluetoothremotegattserver/disconnect/index.md new file mode 100644 index 00000000000000..e55ed4078ee0e8 --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattserver/disconnect/index.md @@ -0,0 +1,34 @@ +--- +title: "BluetoothRemoteGATTServer: disconnect() メソッド" +slug: Web/API/BluetoothRemoteGATTServer/disconnect +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +**`BluetoothRemoteGATTServer.disconnect()`** メソッドは、このスクリプト実行環境を `this.device` から切断させます。 + +## 構文 + +```js-nolint +disconnect() +``` + +### 引数 + +なし + +### 返値 + +なし ({{jsxref("undefined")}}) + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +{{APIRef("Web Bluetooth")}} diff --git a/files/ja/web/api/bluetoothremotegattserver/getprimaryservice/index.md b/files/ja/web/api/bluetoothremotegattserver/getprimaryservice/index.md new file mode 100644 index 00000000000000..9a0acffe3677b0 --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattserver/getprimaryservice/index.md @@ -0,0 +1,35 @@ +--- +title: "BluetoothRemoteGATTServer: getPrimaryService() メソッド" +slug: Web/API/BluetoothRemoteGATTServer/getPrimaryService +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +**`BluetoothRemoteGATTServer.getPrimaryService()`** メソッドは、Bluetooth デバイスが提供している指定の Bluetooth サービス UUID に対応するプライマリー {{DOMxRef("BluetoothRemoteGATTService")}} で解決するプロミスを返します。 + +## 構文 + +```js-nolint +getPrimaryService(bluetoothServiceUUID) +``` + +### 引数 + +- `bluetoothServiceUUID` + - : 指定のデバイス用の Bluetooth サービス universally unique identifier です。128 ビットの UUID か、16 ビットまたは 32 ビットの UUID エイリアスか、[GATT で割り当てられるサービス](https://github.com/WebBluetoothCG/registries/blob/master/gatt_assigned_services.txt)のキーのリストにある文字列です。 + +### 返値 + +{{domxref("BluetoothRemoteGATTService")}} オブジェクトで解決する {{jsxref("Promise")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +{{APIRef("Web Bluetooth")}} diff --git a/files/ja/web/api/bluetoothremotegattserver/getprimaryservices/index.md b/files/ja/web/api/bluetoothremotegattserver/getprimaryservices/index.md new file mode 100644 index 00000000000000..6a18d62abd4498 --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattserver/getprimaryservices/index.md @@ -0,0 +1,35 @@ +--- +title: "BluetoothRemoteGATTServer: getPrimaryServices() メソッド" +slug: Web/API/BluetoothRemoteGATTServer/getPrimaryServices +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +**BluetoothRemoteGATTServer.getPrimaryServices()** メソッドは、Bluetooth デバイスが提供している指定の `BluetoothServiceUUID` に対応するプライマリー {{DOMxRef("BluetoothRemoteGATTService")}} オブジェクトのリストで解決するプロミスを返します。 + +## 構文 + +```js-nolint +getPrimaryServices(bluetoothServiceUUID) +``` + +### 引数 + +- `bluetoothServiceUUID` + - : 指定のデバイス用の Bluetooth サービス universally unique identifier です。 + +### 返値 + +{{domxref("BluetoothRemoteGATTService")}} オブジェクトのリストで解決する {{jsxref("Promise")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +{{APIRef("Web Bluetooth")}} diff --git a/files/ja/web/api/bluetoothremotegattserver/index.md b/files/ja/web/api/bluetoothremotegattserver/index.md new file mode 100644 index 00000000000000..2363fcfa5b1b9d --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattserver/index.md @@ -0,0 +1,38 @@ +--- +title: BluetoothRemoteGATTServer +slug: Web/API/BluetoothRemoteGATTServer +l10n: + sourceCommit: 15d7838061736509d08d642611bd26c1251c0500 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +[Web Bluetooth API](/ja/docs/Web/API/Web_Bluetooth_API) の **`BluetoothRemoteGATTServer`** インターフェイスは、リモートデバイス上の GATT サーバーを表します。 + +## インスタンスプロパティ + +- {{DOMxRef("BluetoothRemoteGATTServer.connected")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : このスクリプト実行環境が `this.device` に接続されている間 `true` を返す論理値です。ユーザーエージェントが物理的に接続されていても `false` になる可能性があります。 +- {{DOMxRef("BluetoothRemoteGATTServer.device")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : このサーバーを動かしている {{DOMxRef("BluetoothDevice")}} への参照です。 + +## インスタンスメソッド + +- {{DOMxRef("BluetoothRemoteGATTServer.connect()")}} {{Experimental_Inline}} + - : このスクリプト実行環境を `this.device` に接続させます。 +- {{DOMxRef("BluetoothRemoteGATTServer.disconnect()")}} {{Experimental_Inline}} + - : このスクリプト実行環境を `this.device` から切断させます。 +- {{DOMxRef("BluetoothRemoteGATTServer.getPrimaryService()")}} {{Experimental_Inline}} + - : Bluetooth デバイスが提供している指定の `BluetoothServiceUUID` に対応するプライマリー {{DOMxRef("BluetoothRemoteGATTService")}} で解決するプロミスを返します。 +- {{DOMxRef("BluetoothRemoteGATTServer.getPrimaryServices()")}} {{Experimental_Inline}} + - : Bluetooth デバイスが提供している指定の `BluetoothServiceUUID` に対応するプライマリー {{DOMxRef("BluetoothRemoteGATTService")}} オブジェクトのリストで解決するプロミスを返します。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +{{APIRef("Web Bluetooth")}} From f57e085bcd9d3e7d553a4b0a79618b0798278b28 Mon Sep 17 00:00:00 2001 From: MikeCAT Date: Tue, 12 Sep 2023 08:08:49 +0900 Subject: [PATCH 285/600] Translate BluetoothRemoteGATTCharacteristic --- .../getdescriptor/index.md | 34 ++++++++++++ .../getdescriptors/index.md | 34 ++++++++++++ .../index.md | 55 +++++++++++++++++++ .../properties/index.md | 24 ++++++++ .../readvalue/index.md | 34 ++++++++++++ .../service/index.md | 24 ++++++++ .../startnotifications/index.md | 34 ++++++++++++ .../stopnotifications/index.md | 34 ++++++++++++ .../uuid/index.md | 24 ++++++++ .../value/index.md | 24 ++++++++ .../writevalue/index.md | 37 +++++++++++++ .../writevaluewithoutresponse/index.md | 35 ++++++++++++ .../writevaluewithresponse/index.md | 35 ++++++++++++ 13 files changed, 428 insertions(+) create mode 100644 files/ja/web/api/bluetoothremotegattcharacteristic/getdescriptor/index.md create mode 100644 files/ja/web/api/bluetoothremotegattcharacteristic/getdescriptors/index.md create mode 100644 files/ja/web/api/bluetoothremotegattcharacteristic/index.md create mode 100644 files/ja/web/api/bluetoothremotegattcharacteristic/properties/index.md create mode 100644 files/ja/web/api/bluetoothremotegattcharacteristic/readvalue/index.md create mode 100644 files/ja/web/api/bluetoothremotegattcharacteristic/service/index.md create mode 100644 files/ja/web/api/bluetoothremotegattcharacteristic/startnotifications/index.md create mode 100644 files/ja/web/api/bluetoothremotegattcharacteristic/stopnotifications/index.md create mode 100644 files/ja/web/api/bluetoothremotegattcharacteristic/uuid/index.md create mode 100644 files/ja/web/api/bluetoothremotegattcharacteristic/value/index.md create mode 100644 files/ja/web/api/bluetoothremotegattcharacteristic/writevalue/index.md create mode 100644 files/ja/web/api/bluetoothremotegattcharacteristic/writevaluewithoutresponse/index.md create mode 100644 files/ja/web/api/bluetoothremotegattcharacteristic/writevaluewithresponse/index.md diff --git a/files/ja/web/api/bluetoothremotegattcharacteristic/getdescriptor/index.md b/files/ja/web/api/bluetoothremotegattcharacteristic/getdescriptor/index.md new file mode 100644 index 00000000000000..42bbf577bc329f --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattcharacteristic/getdescriptor/index.md @@ -0,0 +1,34 @@ +--- +title: "BluetoothRemoteGATTCharacteristic: getDescriptor() メソッド" +slug: Web/API/BluetoothRemoteGATTCharacteristic/getDescriptor +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +**`BluetoothRemoteGATTCharacteristic.getDescriptor()`** メソッドは、指定のディスクリプター UUID に対応する最初の {{DOMxRef("BluetoothRemoteGATTDescriptor")}} で解決する {{JSxRef("Promise")}} を返します。 + +## 構文 + +```js-nolint +getDescriptor(bluetoothDescriptorUUID) +``` + +### 引数 + +なし + +### 返値 + +最初の {{domxref("BluetoothRemoteGATTDescriptor")}} で解決する {{jsxref("Promise")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +{{APIRef("Web Bluetooth")}} diff --git a/files/ja/web/api/bluetoothremotegattcharacteristic/getdescriptors/index.md b/files/ja/web/api/bluetoothremotegattcharacteristic/getdescriptors/index.md new file mode 100644 index 00000000000000..3466bccb5c94a4 --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattcharacteristic/getdescriptors/index.md @@ -0,0 +1,34 @@ +--- +title: "BluetoothRemoteGATTCharacteristic: getDescriptors() メソッド" +slug: Web/API/BluetoothRemoteGATTCharacteristic/getDescriptors +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +**`BluetoothRemoteGATTCharacteristic.getDescriptors()`** メソッドは、指定のディスクリプター UUID に対応するすべての {{DOMxRef("BluetoothRemoteGATTDescriptor")}} オブジェクトの {{JSxRef("Array")}} で解決する {{JSxRef("Promise")}} を返します。 + +## 構文 + +```js-nolint +getDescriptors(bluetoothDescriptorUUID) +``` + +### 引数 + +なし + +### 返値 + +{{domxref("BluetoothRemoteGATTDescriptor")}} オブジェクトの {{jsxref("Array")}} で解決する {{jsxref("Promise")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +{{APIRef("Web Bluetooth")}} diff --git a/files/ja/web/api/bluetoothremotegattcharacteristic/index.md b/files/ja/web/api/bluetoothremotegattcharacteristic/index.md new file mode 100644 index 00000000000000..f2652967ec159a --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattcharacteristic/index.md @@ -0,0 +1,55 @@ +--- +title: BluetoothRemoteGATTCharacteristic +slug: Web/API/BluetoothRemoteGATTCharacteristic +l10n: + sourceCommit: 3923ef69d52670cc5da97056689330c495f51cc4 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +[Web Bluetooth API](/ja/docs/Web/API/Web_Bluetooth_API) の `BluetoothRemoteGattCharacteristic` インターフェイスは、GATT キャラクタリスティックを表します。これは、周辺機器のサービスに関する詳細情報を提供する基本的なデータ要素です。 + +{{InheritanceDiagram}} + +## インスタンスプロパティ + +- {{DOMxRef("BluetoothRemoteGATTCharacteristic.service")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : このキャラクタリスティックが属する {{DOMxRef("BluetoothRemoteGATTService")}} を返します。 +- {{DOMxRef("BluetoothRemoteGATTCharacteristic.uuid")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : このキャラクタリスティックの UUID を表す文字列を返します。たとえば、Heart Rate Measurement characteristic は `'00002a37-0000-1000-8000-00805f9b34fb'` です。 +- {{DOMxRef("BluetoothRemoteGATTCharacteristic.properties")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : このキャラクタリスティックのプロパティを返します。 +- {{DOMxRef("BluetoothRemoteGATTCharacteristic.value")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : 現在キャッシュされているキャラクタリスティックの値です。この値は、キャラクタリスティックの値が読まれるか、ノーティフィケーションやインディケーションによって更新されると更新されます。 + +### イベント + +- `oncharacteristicvaluechanged` {{Experimental_Inline}} + - : `characteristicvaluechanged` イベント用のイベントハンドラーです。 + +## インスタンスメソッド + +- {{DOMxRef("BluetoothRemoteGATTCharacteristic.getDescriptor()")}} {{Experimental_Inline}} + - : 指定のディスクリプター UUID に対応する最初の {{DOMxRef("BluetoothRemoteGATTDescriptor")}} で解決する {{JSxRef("Promise")}} を返します。 +- {{DOMxRef("BluetoothRemoteGATTCharacteristic.getDescriptors()")}} {{Experimental_Inline}} + - : 指定のディスクリプター UUID に対応するすべての {{DOMxRef("BluetoothRemoteGATTDescriptor")}} オブジェクトの {{JSxRef("Array")}} で解決する {{JSxRef("Promise")}} を返します。 +- {{DOMxRef("BluetoothRemoteGATTCharacteristic.readValue()")}} {{Experimental_Inline}} + - : 利用可能で対応していれば、`value` プロパティの複製が格納された {{JSxRef("DataView")}} で解決する {{JSxRef("Promise")}} を返します。そうでない場合は、エラーを投げます。 +- {{DOMxRef("BluetoothRemoteGATTCharacteristic.writeValue()", "BluetoothRemoteGATTCharacteristic.writeValue(value)")}} {{Deprecated_Inline}} + - : `value` プロパティを渡された {{JSxRef("ArrayBuffer")}} に格納されたバイト列に設定し、[`WriteCharacteristicValue`(_this_=`this`, _value=value_, _response_=`"optional"`)](https://webbluetoothcg.github.io/web-bluetooth/#writecharacteristicvalue) を呼び出し、結果の {{JSxRef("Promise")}} を返します。 +- {{DOMxRef("BluetoothRemoteGATTCharacteristic.writeValueWithResponse()", "BluetoothRemoteGATTCharacteristic.writeValueWithResponse(value)")}} {{Experimental_Inline}} + - : `value` プロパティを渡された {{JSxRef("ArrayBuffer")}} に格納されたバイト列に設定し、[`WriteCharacteristicValue`(_this_=`this`, _value=value_, _response_=`"required"`)](https://webbluetoothcg.github.io/web-bluetooth/#writecharacteristicvalue) を呼び出し、結果の {{JSxRef("Promise")}} を返します。 +- {{DOMxRef("BluetoothRemoteGATTCharacteristic.writeValueWithoutResponse()", "BluetoothRemoteGATTCharacteristic.writeValueWithoutResponse(value)")}} {{Experimental_Inline}} + - : `value` プロパティを渡された {{JSxRef("ArrayBuffer")}} に格納されたバイト列に設定し、[`WriteCharacteristicValue`(_this_=`this`, _value=value_, _response_=`"never"`)](https://webbluetoothcg.github.io/web-bluetooth/#writecharacteristicvalue) を呼び出し、結果の {{JSxRef("Promise")}} を返します。 +- {{DOMxRef("BluetoothRemoteGATTCharacteristic.startNotifications()")}} {{Experimental_Inline}} + - : `navigator.bluetooth` が活動中のノーティフィケーションコンテキストに追加されたら解決する {{JSxRef("Promise")}} を返します。 +- {{DOMxRef("BluetoothRemoteGATTCharacteristic.stopNotifications()")}} {{Experimental_Inline}} + - : `navigator.bluetooth` が活動中のノーティフィケーションコンテキストから削除されたら解決する {{JSxRef("Promise")}} を返します。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/bluetoothremotegattcharacteristic/properties/index.md b/files/ja/web/api/bluetoothremotegattcharacteristic/properties/index.md new file mode 100644 index 00000000000000..58a5015326317d --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattcharacteristic/properties/index.md @@ -0,0 +1,24 @@ +--- +title: "BluetoothRemoteGATTCharacteristic: properties プロパティ" +slug: Web/API/BluetoothRemoteGATTCharacteristic/properties +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +読み取り専用プロパティ **`BluetoothRemoteGATTCharacteristic.properties`** は、このキャラクタリスティックのプロパティが格納された {{domxref('BluetoothCharacteristicProperties')}} のインスタンスを返します。 + +## 値 + +このキャラクタリスティックのプロパティです。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +{{APIRef("Web Bluetooth")}} diff --git a/files/ja/web/api/bluetoothremotegattcharacteristic/readvalue/index.md b/files/ja/web/api/bluetoothremotegattcharacteristic/readvalue/index.md new file mode 100644 index 00000000000000..ef82753715173b --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattcharacteristic/readvalue/index.md @@ -0,0 +1,34 @@ +--- +title: "BluetoothRemoteGATTCharacteristic: readValue() メソッド" +slug: Web/API/BluetoothRemoteGATTCharacteristic/readValue +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +**`BluetoothRemoteGATTCharacteristic.readValue()`** メソッドは、利用可能で対応していれば、`value` プロパティの複製が格納された {{JSxRef("DataView")}} で解決する {{JSxRef("Promise")}} を返します。そうでない場合は、エラーを投げます。 + +## 構文 + +```js-nolint +readValue() +``` + +### 引数 + +なし + +### 返値 + +{{jsxref("DataView")}} で解決する {{jsxref("Promise")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +{{APIRef("Web Bluetooth")}} diff --git a/files/ja/web/api/bluetoothremotegattcharacteristic/service/index.md b/files/ja/web/api/bluetoothremotegattcharacteristic/service/index.md new file mode 100644 index 00000000000000..a7d71a102b5bd7 --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattcharacteristic/service/index.md @@ -0,0 +1,24 @@ +--- +title: "BluetoothRemoteGATTCharacteristic: service プロパティ" +slug: Web/API/BluetoothRemoteGATTCharacteristic/service +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +読み取り専用プロパティ **`BluetoothRemoteGATTCharacteristic.service`** は、このキャラクタリスティックが属する {{DOMxRef("BluetoothRemoteGATTService")}} を返します。 + +## 値 + +{{domxref("BluetoothRemoteGATTService")}} のインスタンスです。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +{{APIRef("Web Bluetooth")}} diff --git a/files/ja/web/api/bluetoothremotegattcharacteristic/startnotifications/index.md b/files/ja/web/api/bluetoothremotegattcharacteristic/startnotifications/index.md new file mode 100644 index 00000000000000..95f5964845f89a --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattcharacteristic/startnotifications/index.md @@ -0,0 +1,34 @@ +--- +title: "BluetoothRemoteGATTCharacteristic: startNotifications() メソッド" +slug: Web/API/BluetoothRemoteGATTCharacteristic/startNotifications +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +**`BluetoothRemoteGATTCharacteristic.startNotifications()`** メソッドは、それに関する活動中のノーティフィケーションが存在するようになったら `BluetoothRemoteGATTCharacteristic` のインスタンスで解決する {{jsxref("Promise")}} を返します。 + +## 構文 + +```js-nolint +startNotifications() +``` + +### 引数 + +なし + +### 返値 + +`BluetoothRemoteGATTCharacteristic` のインスタンスで解決する {{jsxref("Promise")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +{{APIRef("Web Bluetooth")}} diff --git a/files/ja/web/api/bluetoothremotegattcharacteristic/stopnotifications/index.md b/files/ja/web/api/bluetoothremotegattcharacteristic/stopnotifications/index.md new file mode 100644 index 00000000000000..23a0ee3e7dc7c9 --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattcharacteristic/stopnotifications/index.md @@ -0,0 +1,34 @@ +--- +title: "BluetoothRemoteGATTCharacteristic: stopNotifications() メソッド" +slug: Web/API/BluetoothRemoteGATTCharacteristic/stopNotifications +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +**`BluetoothRemoteGATTCharacteristic.stopNotifications()`** メソッドは、それに関する活動中のノーティフィケーションが存在しなくなったら `BluetoothRemoteGATTCharacteristic` のインスタンスで解決する {{jsxref("Promise")}} を返します。 + +## 構文 + +```js-nolint +stopNotifications() +``` + +### 引数 + +なし + +### 返値 + +{{jsxref("Promise")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +{{APIRef("Web Bluetooth")}} diff --git a/files/ja/web/api/bluetoothremotegattcharacteristic/uuid/index.md b/files/ja/web/api/bluetoothremotegattcharacteristic/uuid/index.md new file mode 100644 index 00000000000000..c965d23fd7ff52 --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattcharacteristic/uuid/index.md @@ -0,0 +1,24 @@ +--- +title: "BluetoothRemoteGATTCharacteristic: uuid プロパティ" +slug: Web/API/BluetoothRemoteGATTCharacteristic/uuid +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +読み取り専用プロパティ **`BluetoothRemoteGATTCharacteristic.uuid`** は、このキャラクタリスティックの UUID を表す文字列を返します。たとえば、Heart Rate Measurement characteristic は `'00002a37-0000-1000-8000-00805f9b34fb'` です。 + +## 値 + +文字列です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +{{APIRef("Web Bluetooth")}} diff --git a/files/ja/web/api/bluetoothremotegattcharacteristic/value/index.md b/files/ja/web/api/bluetoothremotegattcharacteristic/value/index.md new file mode 100644 index 00000000000000..47099e4542889e --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattcharacteristic/value/index.md @@ -0,0 +1,24 @@ +--- +title: "BluetoothRemoteGATTCharacteristic: value プロパティ" +slug: Web/API/BluetoothRemoteGATTCharacteristic/value +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +読み取り専用プロパティ **`BluetoothRemoteGATTCharacteristic.value`** は、現在キャッシュされているキャラクタリスティックの値を返します。この値は、キャラクタリスティックの値が読まれるか、ノーティフィケーションやインディケーションによって更新されると更新されます。 + +## 値 + +現在キャッシュされているキャラクタリスティックの値です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +{{APIRef("Web Bluetooth")}} diff --git a/files/ja/web/api/bluetoothremotegattcharacteristic/writevalue/index.md b/files/ja/web/api/bluetoothremotegattcharacteristic/writevalue/index.md new file mode 100644 index 00000000000000..8b51cda2ba99c6 --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattcharacteristic/writevalue/index.md @@ -0,0 +1,37 @@ +--- +title: "BluetoothRemoteGATTCharacteristic: writeValue() メソッド" +slug: Web/API/BluetoothRemoteGATTCharacteristic/writeValue +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef("Bluetooth API")}}{{Deprecated_header}} + +かわりに {{DOMxRef("BluetoothRemoteGATTCharacteristic.writeValueWithResponse()")}} や {{DOMxRef("BluetoothRemoteGATTCharacteristic.writeValueWithoutResponse()")}} を使用してください。 + +**`BluetoothRemoteGATTCharacteristic.writeValue()`** メソッドは、{{domxref("BluetoothRemoteGATTCharacteristic")}} オブジェクトの `value` プロパティを渡された {{JSxRef("ArrayBuffer")}} に格納されたバイト列に設定し、[`WriteCharacteristicValue`(_this_=`this`, _value=value_, _response_=`"optional"`)](https://webbluetoothcg.github.io/web-bluetooth/#writecharacteristicvalue) を呼び出し、結果の {{JSxRef("Promise")}} を返します。 + +## 構文 + +```js-nolint +writeValue(value) +``` + +### 引数 + +- `value` + - : {{jsxref("ArrayBuffer")}} です。 + +### 返値 + +{{jsxref("Promise")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +{{APIRef("Web Bluetooth")}} diff --git a/files/ja/web/api/bluetoothremotegattcharacteristic/writevaluewithoutresponse/index.md b/files/ja/web/api/bluetoothremotegattcharacteristic/writevaluewithoutresponse/index.md new file mode 100644 index 00000000000000..cde140badeba07 --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattcharacteristic/writevaluewithoutresponse/index.md @@ -0,0 +1,35 @@ +--- +title: "BluetoothRemoteGATTCharacteristic: writeValueWithoutResponse() メソッド" +slug: Web/API/BluetoothRemoteGATTCharacteristic/writeValueWithoutResponse +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +**`BluetoothRemoteGATTCharacteristic.writeValueWithoutResponse()`** メソッドは、{{domxref("BluetoothRemoteGATTCharacteristic")}} オブジェクトの `value` プロパティを渡された {{JSxRef("ArrayBuffer")}} に格納されたバイト列に設定し、[`WriteCharacteristicValue`(_this_=`this`, _value=value_, _response_=`"never"`)](https://webbluetoothcg.github.io/web-bluetooth/#writecharacteristicvalue) を呼び出し、結果の {{JSxRef("Promise")}} を返します。 + +## 構文 + +```js-nolint +writeValueWithoutResponse(value) +``` + +### 引数 + +- `value` + - : {{jsxref("ArrayBuffer")}} です。 + +### 返値 + +{{jsxref("Promise")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +{{APIRef("Web Bluetooth")}} diff --git a/files/ja/web/api/bluetoothremotegattcharacteristic/writevaluewithresponse/index.md b/files/ja/web/api/bluetoothremotegattcharacteristic/writevaluewithresponse/index.md new file mode 100644 index 00000000000000..37aee4221077d1 --- /dev/null +++ b/files/ja/web/api/bluetoothremotegattcharacteristic/writevaluewithresponse/index.md @@ -0,0 +1,35 @@ +--- +title: "BluetoothRemoteGATTCharacteristic: writeValueWithResponse() メソッド" +slug: Web/API/BluetoothRemoteGATTCharacteristic/writeValueWithResponse +l10n: + sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 +--- + +{{APIRef("Bluetooth API")}}{{SeeCompatTable}} + +**`BluetoothRemoteGATTCharacteristic.writeValueWithResponse()`** メソッドは、{{domxref("BluetoothRemoteGATTCharacteristic")}} オブジェクトの `value` プロパティを渡された {{JSxRef("ArrayBuffer")}} に格納されたバイト列に設定し、[`WriteCharacteristicValue`(_this_=`this`, _value=value_, _response_=`"required"`)](https://webbluetoothcg.github.io/web-bluetooth/#writecharacteristicvalue) を呼び出し、結果の {{JSxRef("Promise")}} を返します。 + +## 構文 + +```js-nolint +writeValueWithResponse(value) +``` + +### 引数 + +- `value` + - : {{jsxref("ArrayBuffer")}} です。 + +### 返値 + +{{jsxref("Promise")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +{{APIRef("Web Bluetooth")}} From 20bdc2d22955ec1ed3e5d2202d037e787105c1d0 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 14 Sep 2023 23:44:45 +0900 Subject: [PATCH 286/600] =?UTF-8?q?=E3=83=AA=E3=83=B3=E3=82=AF=20URL=20?= =?UTF-8?q?=E3=81=AE=E5=A4=A7=E6=96=87=E5=AD=97=E3=83=BB=E5=B0=8F=E6=96=87?= =?UTF-8?q?=E5=AD=97=E3=82=92=E4=BF=AE=E6=AD=A3=20(#15763)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/_redirects.txt | 52 +++++++++---------- .../building_blocks/conditionals/index.md | 4 +- .../code_style_guide/javascript/index.md | 2 +- files/ja/mozilla/firefox/releases/58/index.md | 2 +- .../web/javascript/data_structures/index.md | 2 +- .../guide/expressions_and_operators/index.md | 16 +++--- .../web/javascript/guide/functions/index.md | 4 +- files/ja/web/javascript/guide/index.md | 10 ++-- .../index.md | 2 +- .../functions/arrow_functions/index.md | 2 +- .../reference/functions/get/index.md | 2 +- .../reference/functions/set/index.md | 2 +- .../reference/global_objects/array/index.md | 6 +-- .../reference/global_objects/index.md | 2 +- .../object/__definegetter__/index.md | 2 +- .../object/__definesetter__/index.md | 2 +- .../object/__lookupgetter__/index.md | 2 +- .../object/__lookupsetter__/index.md | 2 +- .../operators/comma_operator/index.md | 2 +- .../reference/operators/grouping/index.md | 4 +- .../reference/operators/logical_and/index.md | 2 +- .../reference/operators/logical_or/index.md | 2 +- .../operators/nullish_coalescing/index.md | 2 +- .../operators/operator_precedence/index.md | 4 +- .../reference/operators/void/index.md | 2 +- 25 files changed, 67 insertions(+), 67 deletions(-) diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index adf033222d602e..31e8a42b430f71 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -1575,23 +1575,23 @@ /ja/docs/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages /ja/docs/conflicting/Web/JavaScript/Inheritance_and_the_prototype_chain /ja/docs/JavaScript/Guide/Closures /ja/docs/Web/JavaScript/Closures /ja/docs/JavaScript/Guide/Core_Language_Features /ja/docs/Web/JavaScript/Guide -/ja/docs/JavaScript/Guide/Creating_New_Objects /ja/docs/Web/JavaScript/Guide/Working_with_Objects#新しいオブジェクトの作成 -/ja/docs/JavaScript/Guide/Creating_New_Objects-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_Objects#新しいオブジェクトの作成 -/ja/docs/JavaScript/Guide/Creating_New_Objects/Defining_Getters_and_Setters /ja/docs/Web/JavaScript/Guide/Working_with_Objects#ゲッターとセッターの定義 -/ja/docs/JavaScript/Guide/Creating_New_Objects/Defining_Getters_and_Setters-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_Objects#ゲッターとセッターの定義 -/ja/docs/JavaScript/Guide/Creating_New_Objects/Defining_Methods /ja/docs/Web/JavaScript/Guide/Working_with_Objects#メソッドの定義 -/ja/docs/JavaScript/Guide/Creating_New_Objects/Defining_Methods-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_Objects#メソッドの定義 -/ja/docs/JavaScript/Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type /ja/docs/Web/JavaScript/Guide/Working_with_Objects#オブジェクト型に対するプロパティの定義 -/ja/docs/JavaScript/Guide/Creating_New_Objects/Deleting_Properties /ja/docs/Web/JavaScript/Guide/Working_with_Objects#プロパティの削除 -/ja/docs/JavaScript/Guide/Creating_New_Objects/Deleting_Properties-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_Objects#プロパティの削除 -/ja/docs/JavaScript/Guide/Creating_New_Objects/Indexing_Object_Properties /ja/docs/Web/JavaScript/Guide/Working_with_Objects#オブジェクトプロパティのインデックス付け -/ja/docs/JavaScript/Guide/Creating_New_Objects/Indexing_Object_Properties-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_Objects#オブジェクトプロパティのインデックス付け -/ja/docs/JavaScript/Guide/Creating_New_Objects/Using_Object_Initializers /ja/docs/Web/JavaScript/Guide/Working_with_Objects#オブジェクト初期化子の使用 -/ja/docs/JavaScript/Guide/Creating_New_Objects/Using_Object_Initializers-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_Objects#オブジェクト初期化子の使用 -/ja/docs/JavaScript/Guide/Creating_New_Objects/Using_a_Constructor_Function /ja/docs/Web/JavaScript/Guide/Working_with_Objects#コンストラクター関数の使用 -/ja/docs/JavaScript/Guide/Creating_New_Objects/Using_a_Constructor_Function-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_Objects#コンストラクター関数の使用 -/ja/docs/JavaScript/Guide/Creating_New_Objects/Using_this_for_Object_References /ja/docs/Web/JavaScript/Guide/Working_with_Objects#オブジェクト参照のための_this_の使用 -/ja/docs/JavaScript/Guide/Creating_New_Objects/Using_this_for_Object_References-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_Objects#オブジェクト参照のための_this_の使用 +/ja/docs/JavaScript/Guide/Creating_New_Objects /ja/docs/Web/JavaScript/Guide/Working_with_objects#新しいオブジェクトの作成 +/ja/docs/JavaScript/Guide/Creating_New_Objects-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_objects#新しいオブジェクトの作成 +/ja/docs/JavaScript/Guide/Creating_New_Objects/Defining_Getters_and_Setters /ja/docs/Web/JavaScript/Guide/Working_with_objects#ゲッターとセッターの定義 +/ja/docs/JavaScript/Guide/Creating_New_Objects/Defining_Getters_and_Setters-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_objects#ゲッターとセッターの定義 +/ja/docs/JavaScript/Guide/Creating_New_Objects/Defining_Methods /ja/docs/Web/JavaScript/Guide/Working_with_objects#メソッドの定義 +/ja/docs/JavaScript/Guide/Creating_New_Objects/Defining_Methods-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_objects#メソッドの定義 +/ja/docs/JavaScript/Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type /ja/docs/Web/JavaScript/Guide/Working_with_objects#オブジェクト型に対するプロパティの定義 +/ja/docs/JavaScript/Guide/Creating_New_Objects/Deleting_Properties /ja/docs/Web/JavaScript/Guide/Working_with_objects#プロパティの削除 +/ja/docs/JavaScript/Guide/Creating_New_Objects/Deleting_Properties-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_objects#プロパティの削除 +/ja/docs/JavaScript/Guide/Creating_New_Objects/Indexing_Object_Properties /ja/docs/Web/JavaScript/Guide/Working_with_objects#オブジェクトプロパティのインデックス付け +/ja/docs/JavaScript/Guide/Creating_New_Objects/Indexing_Object_Properties-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_objects#オブジェクトプロパティのインデックス付け +/ja/docs/JavaScript/Guide/Creating_New_Objects/Using_Object_Initializers /ja/docs/Web/JavaScript/Guide/Working_with_objects#オブジェクト初期化子の使用 +/ja/docs/JavaScript/Guide/Creating_New_Objects/Using_Object_Initializers-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_objects#オブジェクト初期化子の使用 +/ja/docs/JavaScript/Guide/Creating_New_Objects/Using_a_Constructor_Function /ja/docs/Web/JavaScript/Guide/Working_with_objects#コンストラクター関数の使用 +/ja/docs/JavaScript/Guide/Creating_New_Objects/Using_a_Constructor_Function-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_objects#コンストラクター関数の使用 +/ja/docs/JavaScript/Guide/Creating_New_Objects/Using_this_for_Object_References /ja/docs/Web/JavaScript/Guide/Working_with_objects#オブジェクト参照のための_this_の使用 +/ja/docs/JavaScript/Guide/Creating_New_Objects/Using_this_for_Object_References-redirect-1 /ja/docs/Web/JavaScript/Guide/Working_with_objects#オブジェクト参照のための_this_の使用 /ja/docs/JavaScript/Guide/Details_of_the_Object_Model /ja/docs/conflicting/Web/JavaScript/Inheritance_and_the_prototype_chain /ja/docs/JavaScript/Guide/Expressions_and_Operators /ja/docs/Web/JavaScript/Guide/Expressions_and_operators /ja/docs/JavaScript/Guide/Expressions_and_Operators-redirect-1 /ja/docs/Web/JavaScript/Guide/Expressions_and_operators @@ -4115,15 +4115,15 @@ /ja/docs/Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages /ja/docs/conflicting/Web/JavaScript/Inheritance_and_the_prototype_chain /ja/docs/Web/JavaScript/Guide/Closures /ja/docs/Web/JavaScript/Closures /ja/docs/Web/JavaScript/Guide/Core_Language_Features /ja/docs/Web/JavaScript/Guide -/ja/docs/Web/JavaScript/Guide/Creating_New_Objects /ja/docs/Web/JavaScript/Guide/Working_with_Objects#新しいオブジェクトの作成 -/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Defining_Getters_and_Setters /ja/docs/Web/JavaScript/Guide/Working_with_Objects#ゲッターとセッターの定義 -/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Defining_Methods /ja/docs/Web/JavaScript/Guide/Working_with_Objects#メソッドの定義 -/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type /ja/docs/Web/JavaScript/Guide/Working_with_Objects#オブジェクト型に対するプロパティの定義 -/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Deleting_Properties /ja/docs/Web/JavaScript/Guide/Working_with_Objects#プロパティの削除 -/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Indexing_Object_Properties /ja/docs/Web/JavaScript/Guide/Working_with_Objects#オブジェクトプロパティのインデックス付け -/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Using_Object_Initializers /ja/docs/Web/JavaScript/Guide/Working_with_Objects#オブジェクト初期化子の使用 -/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Using_a_Constructor_Function /ja/docs/Web/JavaScript/Guide/Working_with_Objects#コンストラクター関数の使用 -/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Using_this_for_Object_References /ja/docs/Web/JavaScript/Guide/Working_with_Objects#オブジェクト参照のための_this_の使用 +/ja/docs/Web/JavaScript/Guide/Creating_New_Objects /ja/docs/Web/JavaScript/Guide/Working_with_objects#新しいオブジェクトの作成 +/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Defining_Getters_and_Setters /ja/docs/Web/JavaScript/Guide/Working_with_objects#ゲッターとセッターの定義 +/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Defining_Methods /ja/docs/Web/JavaScript/Guide/Working_with_objects#メソッドの定義 +/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type /ja/docs/Web/JavaScript/Guide/Working_with_objects#オブジェクト型に対するプロパティの定義 +/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Deleting_Properties /ja/docs/Web/JavaScript/Guide/Working_with_objects#プロパティの削除 +/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Indexing_Object_Properties /ja/docs/Web/JavaScript/Guide/Working_with_objects#オブジェクトプロパティのインデックス付け +/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Using_Object_Initializers /ja/docs/Web/JavaScript/Guide/Working_with_objects#オブジェクト初期化子の使用 +/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Using_a_Constructor_Function /ja/docs/Web/JavaScript/Guide/Working_with_objects#コンストラクター関数の使用 +/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Using_this_for_Object_References /ja/docs/Web/JavaScript/Guide/Working_with_objects#オブジェクト参照のための_this_の使用 /ja/docs/Web/JavaScript/Guide/Details_of_the_Object_Model /ja/docs/conflicting/Web/JavaScript/Inheritance_and_the_prototype_chain /ja/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain /ja/docs/Web/JavaScript/Inheritance_and_the_prototype_chain /ja/docs/Web/JavaScript/Guide/JavaScript_Overview /ja/docs/Web/JavaScript/Guide/Introduction diff --git a/files/ja/learn/javascript/building_blocks/conditionals/index.md b/files/ja/learn/javascript/building_blocks/conditionals/index.md index 35a77389caf230..a18d52a36b545a 100644 --- a/files/ja/learn/javascript/building_blocks/conditionals/index.md +++ b/files/ja/learn/javascript/building_blocks/conditionals/index.md @@ -357,7 +357,7 @@ function setWeather() { ## 三項演算子 -例題に進む前に、ちょっとした構文をご紹介しましょう。[三項演算子 (もしくは条件演算子)](/ja/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) は条件式を判定し、その結果に応じて 2 つの値または式のうち、どちらか一方を返します。これはある状況においてはとても便利です。単純に `true`/`false` で判定可能な 2 つの選択肢のうちより片方を選ぶという場合には、`if...else` ブロックを書くよりも多くのコードを節約できます。この擬似コードは以下のようなものになります。 +例題に進む前に、ちょっとした構文をご紹介しましょう。[三項演算子 (もしくは条件演算子)](/ja/docs/Web/JavaScript/Reference/Operators/Conditional_operator) は条件式を判定し、その結果に応じて 2 つの値または式のうち、どちらか一方を返します。これはある状況においてはとても便利です。単純に `true`/`false` で判定可能な 2 つの選択肢のうちより片方を選ぶという場合には、`if...else` ブロックを書くよりも多くのコードを節約できます。この擬似コードは以下のようなものになります。 ``` ( 条件式 ) ? こちらのコードを実行する : 代わりにこちらのコードを実行する @@ -791,6 +791,6 @@ textarea.onkeyup = function () { - [比較演算子](/ja/Learn/JavaScript/First_steps/Math#Comparison_operators) - [条件式についての詳細](/ja/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Conditional_statements) - [if...else リファレンス](/ja/docs/Web/JavaScript/Reference/Statements/if...else) -- [条件 (三項) 演算子リファレンス](/ja/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) +- [条件 (三項) 演算子リファレンス](/ja/docs/Web/JavaScript/Reference/Operators/Conditional_operator) {{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}} diff --git a/files/ja/mdn/writing_guidelines/writing_style_guide/code_style_guide/javascript/index.md b/files/ja/mdn/writing_guidelines/writing_style_guide/code_style_guide/javascript/index.md index 72541c021ff8c7..f52887b43a2f24 100644 --- a/files/ja/mdn/writing_guidelines/writing_style_guide/code_style_guide/javascript/index.md +++ b/files/ja/mdn/writing_guidelines/writing_style_guide/code_style_guide/javascript/index.md @@ -327,7 +327,7 @@ class Teacher extends Person { ### 条件演算子 -[条件（または三項）演算子](/ja/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)は、以下のように単一の行にまとめて記述してください。 +[条件（または三項）演算子](/ja/docs/Web/JavaScript/Reference/Operators/Conditional_operator)は、以下のように単一の行にまとめて記述してください。 ```js example-good let status = age >= 18 ? "adult" : "minor"; diff --git a/files/ja/mozilla/firefox/releases/58/index.md b/files/ja/mozilla/firefox/releases/58/index.md index 915f19e1f80b2f..30190211fe52da 100644 --- a/files/ja/mozilla/firefox/releases/58/index.md +++ b/files/ja/mozilla/firefox/releases/58/index.md @@ -136,7 +136,7 @@ _変更なし。_ ### JavaScript - 非標準の {{jsxref("Date.prototype.toLocaleFormat()")}} メソッドを削除しました ([Firefox バグ 818634](https://bugzil.la/818634))。詳細および移行方法について、[Warning: Date.prototype.toLocaleFormat is deprecated](/ja/docs/Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat) をご覧ください。 -- 非標準および非推奨の {{jsxref("Object.prototype.watch()")}} および {{jsxref("Object.prototype.unwatch", "unwatch()")}} メソッドを削除しました。今後は動作しません ([Firefox バグ 638054](https://bugzil.la/638054))。代わりに [setters および getters](/ja/docs/Web/JavaScript/Guide/Working_with_Objects#ゲッターとセッターの定義) または [proxy](/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy) の使用を検討してください。 +- 非標準および非推奨の {{jsxref("Object.prototype.watch()")}} および {{jsxref("Object.prototype.unwatch", "unwatch()")}} メソッドを削除しました。今後は動作しません ([Firefox バグ 638054](https://bugzil.la/638054))。代わりに [setters および getters](/ja/docs/Web/JavaScript/Guide/Working_with_objects#ゲッターとセッターの定義) または [proxy](/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy) の使用を検討してください。 - [レガシーイテレータープロトコル](/ja/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol)、[`StopIteration`](/ja/docs/Archive/Web/StopIteration) オブジェクト、[レガシージェネレーター関数](/ja/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function)、非標準の {{jsxref("Function.prototype.isGenerator()")}} メソッドを削除しました。代わりに ES2015 の [反復処理プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols) や、標準準拠の [イテレーターとジェネレーター](/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators) を使用してください ([Firefox バグ 1083482](https://bugzil.la/1083482), [Firefox バグ 1413867](https://bugzil.la/1413867), [Firefox バグ 1119777](https://bugzil.la/1119777))。 - 非標準の [配列内包](/ja/docs/Web/JavaScript/Reference/Operators/Array_comprehensions) および [ジェネレーター内包](/ja/docs/Web/JavaScript/Reference/Operators/Generator_comprehensions) を削除しました ([Firefox バグ 1414340](https://bugzil.la/1414340))。 diff --git a/files/ja/web/javascript/data_structures/index.md b/files/ja/web/javascript/data_structures/index.md index a3b0baba2ce6f7..a048601319814d 100644 --- a/files/ja/web/javascript/data_structures/index.md +++ b/files/ja/web/javascript/data_structures/index.md @@ -74,7 +74,7 @@ Undefined 型には、値が [`undefined`](/ja/docs/Web/JavaScript/Reference/Glo 論理型 ({{jsxref("Boolean")}}) は論理の状態を表すもので、 `true` と `false` の 2 つの値があります。 -論理値は通常、[三項演算子](/ja/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)、[`if...else`](/ja/docs/Web/JavaScript/Reference/Statements/if...else)、[`while`](/ja/docs/Web/JavaScript/Reference/Statements/while) などの条件操作に用いられます。 +論理値は通常、[三項演算子](/ja/docs/Web/JavaScript/Reference/Operators/Conditional_operator)、[`if...else`](/ja/docs/Web/JavaScript/Reference/Statements/if...else)、[`while`](/ja/docs/Web/JavaScript/Reference/Statements/while) などの条件操作に用いられます。 ### 数値型 diff --git a/files/ja/web/javascript/guide/expressions_and_operators/index.md b/files/ja/web/javascript/guide/expressions_and_operators/index.md index 5c0a83c1762981..602245c19c1016 100644 --- a/files/ja/web/javascript/guide/expressions_and_operators/index.md +++ b/files/ja/web/javascript/guide/expressions_and_operators/index.md @@ -38,7 +38,7 @@ const x = 1 + 2 * 3; const y = 2 * 3 + 1; ``` -`*` と `+` の順序が異なるにもかかわらず、どちらの式も `7` という結果になります。なぜなら、 `*` は `+` よりも優先されるので、 `*` と結合された式が常に最初に評価されるからです。演算子の優先順位を上書きするには、括弧を使用します（[グループ化式](#グループ演算子) - 基本的な式を作成します）。演算子の優先順位の完全な表と様々な注意点を見るには、[演算子の優先順位のリファレンス](/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#一覧表)ページを参照してください。 +`*` と `+` の順序が異なるにもかかわらず、どちらの式も `7` という結果になります。なぜなら、 `*` は `+` よりも優先されるので、 `*` と結合された式が常に最初に評価されるからです。演算子の優先順位を上書きするには、括弧を使用します（[グループ化式](#グループ演算子) - 基本的な式を作成します）。演算子の優先順位の完全な表と様々な注意点を見るには、[演算子の優先順位のリファレンス](/ja/docs/Web/JavaScript/Reference/Operators/Operator_precedence#一覧表)ページを参照してください。 JavaScript は _二項演算子_ や _単項演算子_ を実装しており、さらには特殊な三項演算子である条件演算子も実装しています。 二項演算子は次のように、演算子の前と演算子の後に 2 つのオペランド (operand) が必要となります。 @@ -87,7 +87,7 @@ JavaScript は _二項演算子_ や _単項演算子_ を実装しており、 ### プロパティへの代入 -ある式が[オブジェクト](/ja/docs/Web/JavaScript/Guide/Working_with_Objects)として評価される場合、代入式の左辺をその式のプロパティへの代入にすることができます。例えば次のようになります。 +ある式が[オブジェクト](/ja/docs/Web/JavaScript/Guide/Working_with_objects)として評価される場合、代入式の左辺をその式のプロパティへの代入にすることができます。例えば次のようになります。 ```js const obj = {}; @@ -102,7 +102,7 @@ console.log(obj[key]); // 5 と表示 console.log(obj); // { x: 3, y: 5 } と表示 ``` -オブジェクトについて詳しくは、[オブジェクトでの作業](/ja/docs/Web/JavaScript/Guide/Working_with_Objects)を読んでください。 +オブジェクトについて詳しくは、[オブジェクトでの作業](/ja/docs/Web/JavaScript/Guide/Working_with_objects)を読んでください。 式がオブジェクトとして評価されない場合は、その式のプロパティへの代入は行われません。 @@ -259,7 +259,7 @@ x[f()] = g(); `x[f()] = g()` も左から右へ評価されます。 （この例では `x` には既に何らかのオブジェクトが代入されていると想定してください。 -オブジェクトについて詳しくは、[オブジェクトでの作業](/ja/docs/Web/JavaScript/Guide/Working_with_Objects)をお読みください。 +オブジェクトについて詳しくは、[オブジェクトでの作業](/ja/docs/Web/JavaScript/Guide/Working_with_objects)をお読みください。 1. 代入式 `x[f()] = g()` の評価が始まります。 1. この代入における代入の左辺の `x[f()]` プロパティアクセスの評価が始まります。 @@ -269,7 +269,7 @@ x[f()] = g(); 結果は変数プロパティ参照である `x[2]` です。 3. そして、関数呼び出し `g()` でコンソールに "G!" と表示し、次に数値 `3` と評価されます。 4. `3` が `x[2]` に代入されます。 - （この過程は `x` に[オブジェクト](/ja/docs/Web/JavaScript/Guide/Working_with_Objects)が代入されているときのみ成功します。） + （この過程は `x` に[オブジェクト](/ja/docs/Web/JavaScript/Guide/Working_with_objects)が代入されているときのみ成功します。） 2. 代入式 `x[f()] = g()` の評価が終わりました。 返値は `x[2]` の新しい値– ここでは `3` です。 `x[2]` には `3` が代入され、コンソールには "F!" に続いて "G!" が表示されます。 @@ -291,7 +291,7 @@ const z = y = x = f(); ## 比較演算子 比較演算子はオペランドを比較して、その結果が真であるかに基づいて論理値を返します。 -オペランドには数値、文字列、論理値、[オブジェクト](/ja/docs/Web/JavaScript/Guide/Working_with_Objects)を使用できます。 +オペランドには数値、文字列、論理値、[オブジェクト](/ja/docs/Web/JavaScript/Guide/Working_with_objects)を使用できます。 文字列は Unicode の値を用い、標準的な辞書順に基づいて比較されます。 ほとんどの場合、2 つのオペランドが異なる型ならば JavaScript はそのオペランドを比較に適した型に変換しようとします。 こうした挙動により、一般的にオペランドは数値的に比較される結果となります。 @@ -757,7 +757,7 @@ mystring += "bet"; // "alphabet" と評価されて、mystring にその値を ### 条件（三項）演算子 -[条件演算子](/ja/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)は JavaScript で唯一 3 つのオペランドを取る演算子です。条件に基づいて 2 つの値のうちの 1 つを選択します。構文は以下の通りです。 +[条件演算子](/ja/docs/Web/JavaScript/Reference/Operators/Conditional_operator)は JavaScript で唯一 3 つのオペランドを取る演算子です。条件に基づいて 2 つの値のうちの 1 つを選択します。構文は以下の通りです。 ```js-nolint condition ? val1 : val2 @@ -775,7 +775,7 @@ const status = age >= 18 ? "adult" : "minor"; ## カンマ演算子 -[カンマ演算子](/ja/docs/Web/JavaScript/Reference/Operators/Comma_Operator) (`,`) は、オペランドの両方を評価し、最後のオペランドの値を返します。この演算子は、主に `for` ループの中で、繰り返しのたびに複数の変数を更新するために使用されます。 +[カンマ演算子](/ja/docs/Web/JavaScript/Reference/Operators/Comma_operator) (`,`) は、オペランドの両方を評価し、最後のオペランドの値を返します。この演算子は、主に `for` ループの中で、繰り返しのたびに複数の変数を更新するために使用されます。 必要でないのに他の場所で使用するのは、悪いスタイルと見なされます。 多くの場合、独立した 2 つの文を代わりに使用することができ、また使用すべきです。 diff --git a/files/ja/web/javascript/guide/functions/index.md b/files/ja/web/javascript/guide/functions/index.md index 3ea6b272bfa039..e562076c8e089c 100644 --- a/files/ja/web/javascript/guide/functions/index.md +++ b/files/ja/web/javascript/guide/functions/index.md @@ -118,7 +118,7 @@ if (num === 0) { これまで説明してきた関数の定義に加えて、{{jsxref("Function")}} コンストラクターを、{{jsxref("Global_Objects/eval", "eval()")}} のような文字列からの関数作成に用いることができます。 -**メソッド**は、オブジェクトのプロパティである関数のことです。オブジェクトとメソッドについて詳しくは、「[オブジェクトを利用する](/ja/docs/Web/JavaScript/Guide/Working_with_Objects)」の章をご覧ください。 +**メソッド**は、オブジェクトのプロパティである関数のことです。オブジェクトとメソッドについて詳しくは、「[オブジェクトを利用する](/ja/docs/Web/JavaScript/Guide/Working_with_objects)」の章をご覧ください。 ## 関数の呼び出し @@ -156,7 +156,7 @@ function square(n) { > }; > ``` -関数の引数は、文字列や数値に限られてはいません。オブジェクト全体を関数に渡すこともできます。`show_props` 関数 ([オブジェクトを利用する](/ja/docs/Web/JavaScript/Guide/Working_with_Objects#オブジェクトとプロパティ)の章で定義) は、オブジェクトを引数にとる関数の例です。 +関数の引数は、文字列や数値に限られてはいません。オブジェクト全体を関数に渡すこともできます。`show_props` 関数 ([オブジェクトを利用する](/ja/docs/Web/JavaScript/Guide/Working_with_objects#オブジェクトとプロパティ)の章で定義) は、オブジェクトを引数にとる関数の例です。 関数はその関数自身を呼び出すこともできます。例えば、ここに階乗を計算する関数を示します。 diff --git a/files/ja/web/javascript/guide/index.md b/files/ja/web/javascript/guide/index.md index 3497af30dafa8d..3835beffe76b3d 100644 --- a/files/ja/web/javascript/guide/index.md +++ b/files/ja/web/javascript/guide/index.md @@ -84,11 +84,11 @@ slug: Web/JavaScript/Guide Map
    WeakMap
    Set
    WeakSet

    • -
  • オブジェクトを利用する -

    オブジェクトとそのプロパティ
    新しいオブジェクトの作成
    メソッドの定義
    getter と setter

    +
  • オブジェクトを利用する +

    オブジェクトとそのプロパティ
    新しいオブジェクトの作成
    メソッドの定義
    getter と setter

  • オブジェクトモデルの詳細

    1; ### 解釈の順序 -アロー関数のアロー (矢印) は演算子ではありませんが、アロー関数には特別な解釈ルールがあり、通常の関数とは[演算子の優先順位](/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)の扱いが異なります。 +アロー関数のアロー (矢印) は演算子ではありませんが、アロー関数には特別な解釈ルールがあり、通常の関数とは[演算子の優先順位](/ja/docs/Web/JavaScript/Reference/Operators/Operator_precedence)の扱いが異なります。 ```js let callback; diff --git a/files/ja/web/javascript/reference/functions/get/index.md b/files/ja/web/javascript/reference/functions/get/index.md index 3c8253e63bef4d..d0796b6fa67e78 100644 --- a/files/ja/web/javascript/reference/functions/get/index.md +++ b/files/ja/web/javascript/reference/functions/get/index.md @@ -184,4 +184,4 @@ console.log( - {{jsxref("Object.defineProperty()")}} - [`Object.prototype.__defineGetter__()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__) - [`Object.prototype.__defineSetter__()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__) -- [ゲッターとセッターの定義](/ja/docs/Web/JavaScript/Guide/Working_with_Objects#ゲッターとセッターの定義) (JavaScript ガイド) +- [ゲッターとセッターの定義](/ja/docs/Web/JavaScript/Guide/Working_with_objects#ゲッターとセッターの定義) (JavaScript ガイド) diff --git a/files/ja/web/javascript/reference/functions/set/index.md b/files/ja/web/javascript/reference/functions/set/index.md index 88f890374a16d8..a78d554c67b5d2 100644 --- a/files/ja/web/javascript/reference/functions/set/index.md +++ b/files/ja/web/javascript/reference/functions/set/index.md @@ -124,4 +124,4 @@ console.log(obj.baz); - {{jsxref("Object.defineProperty()")}} - [`Object.prototype.__defineGetter__()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__) - [`Object.prototype.__defineSetter__()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__) -- [ゲッターとセッターの定義](/ja/docs/Web/JavaScript/Guide/Working_with_Objects#ゲッターとセッターの定義) (JavaScript ガイド) +- [ゲッターとセッターの定義](/ja/docs/Web/JavaScript/Guide/Working_with_objects#ゲッターとセッターの定義) (JavaScript ガイド) diff --git a/files/ja/web/javascript/reference/global_objects/array/index.md b/files/ja/web/javascript/reference/global_objects/array/index.md index b47a5657ca0859..512c9947fb28ee 100644 --- a/files/ja/web/javascript/reference/global_objects/array/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/index.md @@ -29,7 +29,7 @@ JavaScript では、配列は[プリミティブ](/ja/docs/Glossary/Primitive) console.log(arr.0); // 構文エラー ``` -JavaScript の構文では、数字で始まるプロパティには[ブラケット記法](/ja/docs/Web/JavaScript/Guide/Working_with_Objects#オブジェクトとプロパティ)を使う必要があり、[ドット記法](/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors)を使うことはできません。また、配列の添字を引用符で囲むことができますが（`years[2]` の代わりに `years['2']` のように）、ふつうはそうする必要はありません。 +JavaScript の構文では、数字で始まるプロパティには[ブラケット記法](/ja/docs/Web/JavaScript/Guide/Working_with_objects#オブジェクトとプロパティ)を使う必要があり、[ドット記法](/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors)を使うことはできません。また、配列の添字を引用符で囲むことができますが（`years[2]` の代わりに `years['2']` のように）、ふつうはそうする必要はありません。 `years[2]` の `2` は最終的に、JavaScript エンジンが内部的に `toString` メソッドで型変換することで文字列にされます。これは '2' と '02' が `years` オブジェクトの異なる場所を指すようにするためでです。このため、以下の例は `true` がログ出力されます。 @@ -795,7 +795,7 @@ console.table(values); console.log(arr.0); // 構文エラー ``` -JavaScript の構文では、数字で始まるプロパティには[ブラケット記法](/ja/docs/Web/JavaScript/Guide/Working_with_Objects#オブジェクトとプロパティ)を使う必要があり、[ドット記法](/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors)を使うことはできません。また、配列の添字を引用符で囲むことができますが（`years[2]` の代わりに `years['2']` のように）、ふつうはそうする必要はありません。 +JavaScript の構文では、数字で始まるプロパティには[ブラケット記法](/ja/docs/Web/JavaScript/Guide/Working_with_objects#オブジェクトとプロパティ)を使う必要があり、[ドット記法](/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors)を使うことはできません。また、配列の添字を引用符で囲むことができますが（`years[2]` の代わりに `years['2']` のように）、ふつうはそうする必要はありません。 `years[2]` の `2` は最終的に、JavaScript エンジンが内部的に `toString` メソッドで型変換することで文字列にされます。これは '2' と '02' が `years` オブジェクトの異なる場所を指すようにするためでです。このため、以下の例は `true` がログ出力されます。 @@ -881,7 +881,7 @@ console.log(execResult); // Array(3) [ "dbBd", "bB", "d" ] - JavaScript ガイドより - - [オブジェクトプロパティのインデックス付け](/ja/docs/Web/JavaScript/Guide/Working_with_Objects#オブジェクトプロパティのインデックス付け) + - [オブジェクトプロパティのインデックス付け](/ja/docs/Web/JavaScript/Guide/Working_with_objects#オブジェクトプロパティのインデックス付け) - [インデックス付きコレクション: `Array` オブジェクト](/ja/docs/Web/JavaScript/Guide/Indexed_collections#array_object) - [型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) diff --git a/files/ja/web/javascript/reference/global_objects/index.md b/files/ja/web/javascript/reference/global_objects/index.md index 6dc3fc8a588f9b..2b1320de1c59a3 100644 --- a/files/ja/web/javascript/reference/global_objects/index.md +++ b/files/ja/web/javascript/reference/global_objects/index.md @@ -11,7 +11,7 @@ slug: Web/JavaScript/Reference/Global_Objects 後者の『グローバルオブジェクト』自体は、グローバルスコープ中で {{JSxRef("Operators/this", "this")}} 演算子を使ってアクセスすることができます。実際、グローバルスコープは『グローバルオブジェクト』のプロパティと、もしあれば継承されたプロパティから**構成されています**。 -グローバルスコープ内のその他のオブジェクトは、[ユーザースクリプトによって作られたり](/ja/docs/Web/JavaScript/Guide/Working_with_Objects#新しいオブジェクトの作成)、ホストアプリケーションによって提供されたりします。ブラウザー上で提供されている利用可能なオブジェクトについては、[API リファレンス](/ja/docs/Web/API)で文書化されています。 +グローバルスコープ内のその他のオブジェクトは、[ユーザースクリプトによって作られたり](/ja/docs/Web/JavaScript/Guide/Working_with_objects#新しいオブジェクトの作成)、ホストアプリケーションによって提供されたりします。ブラウザー上で提供されている利用可能なオブジェクトについては、[API リファレンス](/ja/docs/Web/API)で文書化されています。 [DOM](/ja/docs/Web/API/Document_Object_Model) と中核の [JavaScript](/ja/docs/Web/JavaScript) との違いについての詳しい情報は、[JavaScript 技術概説](/ja/docs/Web/JavaScript/JavaScript_technologies_overview)をご覧ください。 diff --git a/files/ja/web/javascript/reference/global_objects/object/__definegetter__/index.md b/files/ja/web/javascript/reference/global_objects/object/__definegetter__/index.md index 74bf2247e90898..a628144666586b 100644 --- a/files/ja/web/javascript/reference/global_objects/object/__definegetter__/index.md +++ b/files/ja/web/javascript/reference/global_objects/object/__definegetter__/index.md @@ -79,7 +79,7 @@ console.log(o.gimmeFive); // 5 - {{jsxref("Object.defineProperty()")}} - [`Object.prototype.__lookupGetter__()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__) - [`Object.prototype.__lookupSetter__()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__) -- [JavaScript ガイド: ゲッターとセッターの定義](/ja/docs/Web/JavaScript/Guide/Working_with_Objects#ゲッターとセッターの定義) +- [JavaScript ガイド: ゲッターとセッターの定義](/ja/docs/Web/JavaScript/Guide/Working_with_objects#ゲッターとセッターの定義) - [\[Blog Post\] Deprecation of \_\_defineGetter\_\_ and \_\_defineSetter\_\_](https://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/) - [Firefox バグ 647423](https://bugzil.la/647423) diff --git a/files/ja/web/javascript/reference/global_objects/object/__definesetter__/index.md b/files/ja/web/javascript/reference/global_objects/object/__definesetter__/index.md index be5103a0a9a812..1b1586b483be41 100644 --- a/files/ja/web/javascript/reference/global_objects/object/__definesetter__/index.md +++ b/files/ja/web/javascript/reference/global_objects/object/__definesetter__/index.md @@ -96,6 +96,6 @@ console.log(o.anotherValue); // 5 - {{jsxref("Object.defineProperty()")}} - [`Object.prototype.__lookupGetter__()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__) - [`Object.prototype.__lookupSetter__()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__) -- [JavaScript ガイド: ゲッターとセッターの定義](/ja/docs/Web/JavaScript/Guide/Working_with_Objects#ゲッターとセッターの定義) +- [JavaScript ガイド: ゲッターとセッターの定義](/ja/docs/Web/JavaScript/Guide/Working_with_objects#ゲッターとセッターの定義) - [\[Blog Post\] Deprecation of \_\_defineGetter\_\_ and \_\_defineSetter\_\_](http://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/) - [Firefox バグ 647423](https://bugzil.la/647423) diff --git a/files/ja/web/javascript/reference/global_objects/object/__lookupgetter__/index.md b/files/ja/web/javascript/reference/global_objects/object/__lookupgetter__/index.md index 5ca09faa636574..7948a52ce3df1f 100644 --- a/files/ja/web/javascript/reference/global_objects/object/__lookupgetter__/index.md +++ b/files/ja/web/javascript/reference/global_objects/object/__lookupgetter__/index.md @@ -65,4 +65,4 @@ Object.getOwnPropertyDescriptor(obj, "foo").get; {{jsxref("Object.getPrototypeOf()")}} - [`Object.prototype.__defineGetter__()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__) - [`Object.prototype.__defineSetter__()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__) -- [JavaScript ガイド: ゲッターとセッターの定義](/ja/docs/Web/JavaScript/Guide/Working_with_Objects#ゲッターとセッターの定義) +- [JavaScript ガイド: ゲッターとセッターの定義](/ja/docs/Web/JavaScript/Guide/Working_with_objects#ゲッターとセッターの定義) diff --git a/files/ja/web/javascript/reference/global_objects/object/__lookupsetter__/index.md b/files/ja/web/javascript/reference/global_objects/object/__lookupsetter__/index.md index 02e81a1372ec9d..4cf99b47c82e32 100644 --- a/files/ja/web/javascript/reference/global_objects/object/__lookupsetter__/index.md +++ b/files/ja/web/javascript/reference/global_objects/object/__lookupsetter__/index.md @@ -65,4 +65,4 @@ Object.getOwnPropertyDescriptor(obj, "foo").set; {{jsxref("Object.getPrototypeOf()")}} - [`Object.prototype.__defineGetter__()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__) - [`Object.prototype.__defineSetter__()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__) -- [JavaScript ガイド: ゲッターとセッターの定義](/ja/docs/Web/JavaScript/Guide/Working_with_Objects#ゲッターとセッターの定義) +- [JavaScript ガイド: ゲッターとセッターの定義](/ja/docs/Web/JavaScript/Guide/Working_with_objects#ゲッターとセッターの定義) diff --git a/files/ja/web/javascript/reference/operators/comma_operator/index.md b/files/ja/web/javascript/reference/operators/comma_operator/index.md index c8bd1d99b753c6..c891f1062cc221 100644 --- a/files/ja/web/javascript/reference/operators/comma_operator/index.md +++ b/files/ja/web/javascript/reference/operators/comma_operator/index.md @@ -37,7 +37,7 @@ for (var i = 0, j = 9; i <= 9; i++, j--) console.log("a[" + i + "][" + j + "] = " + a[i][j]); ``` -代入を行う際にカンマを使うと、カンマ演算子が通常どおりに働いていないかのように見える場合があります (カンマ演算子が式の中にないため)。以下の例では `a` には `b = 3` の値 (すなわち 3) が設定されますが、さらに `c = 4` が評価されて、その結果 (すなわち 4) がコンソールに返されます。これは[演算子の優先順位と結合性](/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)のためです。 +代入を行う際にカンマを使うと、カンマ演算子が通常どおりに働いていないかのように見える場合があります (カンマ演算子が式の中にないため)。以下の例では `a` には `b = 3` の値 (すなわち 3) が設定されますが、さらに `c = 4` が評価されて、その結果 (すなわち 4) がコンソールに返されます。これは[演算子の優先順位と結合性](/ja/docs/Web/JavaScript/Reference/Operators/Operator_precedence)のためです。 ```js var a, b, c; diff --git a/files/ja/web/javascript/reference/operators/grouping/index.md b/files/ja/web/javascript/reference/operators/grouping/index.md index d8c9758bc2e4e5..ef883487ffdd85 100644 --- a/files/ja/web/javascript/reference/operators/grouping/index.md +++ b/files/ja/web/javascript/reference/operators/grouping/index.md @@ -17,7 +17,7 @@ slug: Web/JavaScript/Reference/Operators/Grouping ## 解説 -グループ化演算子は、式または部分式の周りに括弧のペアで構成され、通常の[演算子の優先順位](/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)を上書きし、より低い優先順位の式をより高い優先順位の式の前に評価できるようにします。その名の通り、括弧の中にあるものをグループ化します。 +グループ化演算子は、式または部分式の周りに括弧のペアで構成され、通常の[演算子の優先順位](/ja/docs/Web/JavaScript/Reference/Operators/Operator_precedence)を上書きし、より低い優先順位の式をより高い優先順位の式の前に評価できるようにします。その名の通り、括弧の中にあるものをグループ化します。 ## 例 @@ -62,6 +62,6 @@ a() * (b() + c()); ## 関連情報 -- [演算子の優先順位](/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence) +- [演算子の優先順位](/ja/docs/Web/JavaScript/Reference/Operators/Operator_precedence) - {{jsxref("Operators/delete", "delete")}} - {{jsxref("Operators/typeof", "typeof")}} diff --git a/files/ja/web/javascript/reference/operators/logical_and/index.md b/files/ja/web/javascript/reference/operators/logical_and/index.md index cbc699b1afcf9d..7f36e718f8ddfb 100644 --- a/files/ja/web/javascript/reference/operators/logical_and/index.md +++ b/files/ja/web/javascript/reference/operators/logical_and/index.md @@ -76,7 +76,7 @@ console.log(A() && B()); ### 演算子の優先順位 -以下の式は同じであるように見えるかもしれませんが、異なります。 `&&` 演算子は `||` 演算子よりも先に実行されるからです（[演算子の優先順位](/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)を参照）。 +以下の式は同じであるように見えるかもしれませんが、異なります。 `&&` 演算子は `||` 演算子よりも先に実行されるからです（[演算子の優先順位](/ja/docs/Web/JavaScript/Reference/Operators/Operator_precedence)を参照）。 ```js false || (true && true); // true を返す diff --git a/files/ja/web/javascript/reference/operators/logical_or/index.md b/files/ja/web/javascript/reference/operators/logical_or/index.md index 94633d78ec1ba0..987929ba9279fd 100644 --- a/files/ja/web/javascript/reference/operators/logical_or/index.md +++ b/files/ja/web/javascript/reference/operators/logical_or/index.md @@ -56,7 +56,7 @@ console.log(B() || A()); ### 演算子の優先順位 -以下の式は同じであるように見えるかもしれませんが、異なります。 `&&` 演算子は `||` 演算子よりも先に実行されるからです（[演算子の優先順位](/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)を参照）。 +以下の式は同じであるように見えるかもしれませんが、異なります。 `&&` 演算子は `||` 演算子よりも先に実行されるからです（[演算子の優先順位](/ja/docs/Web/JavaScript/Reference/Operators/Operator_precedence)を参照）。 ```js true || (false && false); // true を返す。 && が先に実行されるため diff --git a/files/ja/web/javascript/reference/operators/nullish_coalescing/index.md b/files/ja/web/javascript/reference/operators/nullish_coalescing/index.md index 9b9dcc4797ac77..9380e39f1827be 100644 --- a/files/ja/web/javascript/reference/operators/nullish_coalescing/index.md +++ b/files/ja/web/javascript/reference/operators/nullish_coalescing/index.md @@ -9,7 +9,7 @@ slug: Web/JavaScript/Reference/Operators/Nullish_coalescing これは[論理 OR 演算子 (`||`)](/ja/docs/Web/JavaScript/Reference/Operators/Logical_OR) の特殊形と見なすことができます。そちらは左辺の値が `null` や `undefined` だけでなく、何らかの{{Glossary("falsy", "偽値")}}であった場合に右辺値を返すものです。つまり、 `||` を使って別の変数 `foo` に何らかの既定値を与える場合、一部の偽値（例えば `''` や `0`）を使用可能とみなすと、予想外の動作に遭遇することがあります。詳しい例は以下を参照してください。 -Null 合体演算子は[演算子の優先順位](/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)が下から 5 番目で、 `||` のすぐ下、[条件（三項）演算子](/ja/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)のすぐ上とします。 +Null 合体演算子は[演算子の優先順位](/ja/docs/Web/JavaScript/Reference/Operators/Operator_precedence)が下から 5 番目で、 `||` のすぐ下、[条件（三項）演算子](/ja/docs/Web/JavaScript/Reference/Operators/Conditional_operator)のすぐ上とします。 {{EmbedInteractiveExample("pages/js/expressions-nullishcoalescingoperator.html")}} diff --git a/files/ja/web/javascript/reference/operators/operator_precedence/index.md b/files/ja/web/javascript/reference/operators/operator_precedence/index.md index 10be524e3a9b51..260d4a144aa3c0 100644 --- a/files/ja/web/javascript/reference/operators/operator_precedence/index.md +++ b/files/ja/web/javascript/reference/operators/operator_precedence/index.md @@ -484,7 +484,7 @@ a?.b.c; // 最初に `a` を評価し、 `a` が `null` または `undefined` 3 - 条件（三項）演算子 + 条件（三項）演算子 右から左 … ? … : … @@ -554,7 +554,7 @@ a?.b.c; // 最初に `a` を評価し、 `a` が `null` または `undefined` 1 - カンマ / シーケンス + カンマ / シーケンス 左から右 … , … diff --git a/files/ja/web/javascript/reference/operators/void/index.md b/files/ja/web/javascript/reference/operators/void/index.md index d4735568323ace..d0d71f16cd9d3d 100644 --- a/files/ja/web/javascript/reference/operators/void/index.md +++ b/files/ja/web/javascript/reference/operators/void/index.md @@ -21,7 +21,7 @@ void expression; `void` 演算子は、よく単にプリミティブ値 `undefined` を得る目的で使われ、一般的に "`void(0)`" と書かれます（これは "`void 0`" と等価です）。この目的であれば、グローバル変数 {{jsxref("undefined")}} を使用することができます。 -なお、`void` 演算子の [優先順位](/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence) を考慮するべきであり、括弧は `void` 演算子に続く式の解決を明確にするのに役立つとされています。 +なお、`void` 演算子の [優先順位](/ja/docs/Web/JavaScript/Reference/Operators/Operator_precedence) を考慮するべきであり、括弧は `void` 演算子に続く式の解決を明確にするのに役立つとされています。 ```js void 2 == "2"; // (void 2) == '2', false を返す From 198234a7cee48ad95c45a5e3f947296388ec0dbe Mon Sep 17 00:00:00 2001 From: "Yuichiro Tachibana (Tsuchiya)" Date: Thu, 14 Sep 2023 22:46:08 +0800 Subject: [PATCH 287/600] Update translated-content/files/ja/web/api/serviceworker/postmessage/index.md (#15801) --- files/ja/web/api/serviceworker/postmessage/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/ja/web/api/serviceworker/postmessage/index.md b/files/ja/web/api/serviceworker/postmessage/index.md index b822516e1182e5..0e961917bc6b8e 100644 --- a/files/ja/web/api/serviceworker/postmessage/index.md +++ b/files/ja/web/api/serviceworker/postmessage/index.md @@ -66,9 +66,9 @@ navigator.serviceWorker.ready.then((registration) => { ```js // これは `service-worker.s`` になる -addEventListener("message", (event) => +addEventListener("message", (event) => { console.log(`Message received: ${event.data}`); -); +}); ``` サービスワーカーは、{{domxref("Client.postMessage()", "postMessage()")}} メソッドを用いてメインスレッドにメッセージを送り返すことができることに注意してください。これを受け取るには、メインスレッドは {{domxref("ServiceWorkerContainer.message_event", "message")}} オブジェクトの {{domxref("ServiceWorkerContainer")}} イベントを待ち受けする必要があります。 From 2d0b994db5a2628d79525e7999c3dddba2b1c1f5 Mon Sep 17 00:00:00 2001 From: OHSAWA Masashi Date: Thu, 14 Sep 2023 10:22:01 +0900 Subject: [PATCH 288/600] "-Infinity" was incorrectly written as "Infinity" MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 英語版： `Infinity` and `-Infinity` are recognized as literals. - 修正後： `Infinity` と `-Infinity` はリテラルとして認識されます。 - 修正前： `Infinity` と `Infinity` はリテラルとして認識されます。 --- .../ja/web/javascript/reference/global_objects/number/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/javascript/reference/global_objects/number/index.md b/files/ja/web/javascript/reference/global_objects/number/index.md index 79e2587bd9cf6c..fa97a3fffc0a73 100644 --- a/files/ja/web/javascript/reference/global_objects/number/index.md +++ b/files/ja/web/javascript/reference/global_objects/number/index.md @@ -68,7 +68,7 @@ JavaScript の数値 (`Number`) 型は [IEEE 754 の倍精度 64ビットバイ - 先頭および末尾のホワイトスペース/改行文字は無視されます。 - 先頭が数字 `0` である場合、数値が 8 進数のリテラルとなる（または厳格モードで拒否される）ことはありません。 - 文字列の始めには、符号を示すために `+` と `-` を置くことができます。（実際のコードでは、これらはリテラルの一部に「見える」のですが、実際には別個の単項演算子です。）ただし、符号は一度しか現れず、空白が続いてはいけません。 - - `Infinity` と `Infinity` はリテラルとして認識されます。実際のコードでは、これらはグローバル変数です。 + - `Infinity` と `-Infinity` はリテラルとして認識されます。実際のコードでは、これらはグローバル変数です。 - 空文字列またはホワイトスペースのみの文字列は `0` に変換されます。 - [数値の区切り文字](/ja/docs/Web/JavaScript/Reference/Lexical_grammar#numeric_separators)は許可されません。 - [長整数](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt)は、意図しない精度の低下を防ぐために {{jsxref("TypeError")}} 例外が発生します。 From debf3cce0fe9b237e1fde4b0128921d5bd239042 Mon Sep 17 00:00:00 2001 From: hanyujie2002 <84226578+hanyujie2002@users.noreply.github.com> Date: Fri, 15 Sep 2023 09:32:36 +0800 Subject: [PATCH 289/600] zh-ch: update the translation of run local testing server (#15842) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Allo --- .../set_up_a_local_testing_server/index.md | 83 ++++++++++++------- 1 file changed, 53 insertions(+), 30 deletions(-) diff --git a/files/zh-cn/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md b/files/zh-cn/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md index dae78258b4bcd4..662adfdb89ee70 100644 --- a/files/zh-cn/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md +++ b/files/zh-cn/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md @@ -7,7 +7,7 @@ slug: Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server 本文将会介绍如何在你的计算机上安装一个简单的本地测试服务器，以及它的基本用法。 - +
    @@ -15,7 +15,7 @@ slug: Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server 你需要知道互联网是怎么工作的，以及什么是网络服务器什么是 web 服务器。 @@ -28,64 +28,87 @@ slug: Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server ## 本地文件与远程文件 -在大多数示例中，我们告诉你只需在浏览器中直接打开你的示例，有很多方法可以实现这一点，你可以通过双击 HTML 文件或将其拖拽到浏览器窗口中，或者在浏览器中选择 `文件 > 打开...` 选择 HTML 文件等。 +在大多数示例中，我们告诉你只需在浏览器中直接打开你的示例，有很多方法可以实现这一点，你可以通过双击 HTML 文件或将其拖拽到浏览器窗口中，或者在浏览器中选择 _文件 > 打开..._ 选择 HTML 文件等。 -如果你打开的是本地示例的话，你可以在地址栏看到这个地址是以 `file://` 开头的，接着本地硬盘上该示例文件的路径。相比之下，如果你查看的是我们在 GitHub 上托管的示例（或其他远程服务器上的示例），Web 地址会以 `http://` 或 `https://` 开头，说明该文件是通过 HTTP 传输的。 +如果你打开的是本地示例的话，你可以在地址栏看到这个地址是以 `file://` 开头的，接着本地硬盘上该示例文件的路径。相比之下，如果你查看的是我们在 GitHub 上托管的示例（或其他远程服务器上的示例），web 地址会以 `http://` 或 `https://` 开头，说明该文件是通过 HTTP 传输的。 ## 测试本地文件存在的问题 -某些示例如果你将其作为本地文件打开的话，它将不会运行。这可能是由于各种原因，最有可能是： +如果你将某些示例作为本地文件打开的话，它将不会运行。这可能是由于各种原因，最有可能是： -- **它们具有异步请求。** 如果你只是从本地文件运行示例，一些浏览器（包括 Chrome）将不会运行异步请求（请参阅 [从服务器获取数据](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)）。这是因为安全限制（更多关于 Web 安全的信息，请参阅 [站点安全](/zh-CN/docs/Learn/Server-side/First_steps/Website_security)）。 -- **它们具有服务端代码。** 服务器端语言（如 PHP 或 Python）需要一个特殊的服务器来解释代码并提供结果。 +- **它们具有异步请求**。如果你只是从本地文件运行示例，一些浏览器（包括 Chrome）将不会运行异步请求（请参阅[从服务器获取数据](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)）。这是因为安全限制（更多关于 Web 安全的信息，请参阅[站点安全](/zh-CN/docs/Learn/Server-side/First_steps/Website_security)）。 +- **它们具有服务端代码**。服务器端语言（如 PHP 或 Python）需要一个特殊的服务器来解释代码并提供结果。 +- **它们引用其他文件**。浏览器通常将使用 `file://` 协议加载资源的请求视为跨域请求。所以，如果你加载了一个引用了其他本地文件的本地文件，就有可能会导致 {{Glossary("CORS", "CORS")}} 的问题。 ## 运行一个简单的本地 HTTP 服务器 -为了解决异步请求的问题，我们需要通过在本地 Web 服务器上运行这些示例来测试这些示例。为我们的目的，最简单的方法之一就是使用 Python 的`SimpleHTTPServer`模块。 +### 在代码编辑器中使用扩展 -我们需要： +如果你只需要 HTML、CSS 和 JavaScript，并且不需要服务器端的语言，那么最简单的方法可能是在你的代码编辑器中查找扩展。除了自动化安装和设置本地 HTTP 服务器之外，它们还能很好地与你的代码编辑器集成。在 HTTP 服务器中测试本地文件可能仅需一键即可。 -1. 安装 Python。如果你正在使用 Linux 或 Mac OS X，则应该已经在你的系统上可用。如果你是 Windows 用户，则可以从 Python 主页获取安装程序，并按照说明进行安装： +对于 VSCode，你可以查看以下免费的扩展： - - 转到[python.org](https://www.python.org/) - - 在“下载”部分下，单击 Python“3.xxx”的链接。 - - 在页面的底部，选择*Windows x86 可执行文件安装程序*并下载它。 - - 当它已经下载，运行它。 - - 在第一个安装程序页面上，确保选中了“将 Python 3.xxx 添加到 PATH”复选框。 - - 单击*安装*，然后在安装完成后单击*关闭*。 +- `vscode-preview-server`。你可以在其[主页](https://marketplace.visualstudio.com/items?itemName=yuichinukiyama.vscode-preview-server)上查看。 -2. 打开你的命令提示符（Windows）/终端（OS X / Linux）。要检查 Python 是否安装，请输入以下命令： +### 使用 Python + +实现这一目标的另一种方法是使用 Python 的 `http.server` 模块。 + +> **备注：** 旧版本的 Python（直到版本 2.7）提供了一个类似的模块，名为 `SimpleHTTPServer`。如果你正在使用 Python 2.x，你可以通过将所有的 `http.server` 替换为 `SimpleHTTPServer` 来遵循这个指南。然而，我们建议你使用 Python 的最新版本。 + +要做到这一点： + +1. 安装 Python。如果你正在使用 Linux 或 macOS，那么它应该已经在你的系统上。如果你是 Windows 用户，你可以从 Python 主页获取安装程序，然后按照说明来安装它： + + - 访问 [python.org](https://www.python.org/) + - 在下载部分，点击 Python“3.xxx”的链接。 + - 在页面底部，点击 *Windows 安装程序*链接来下载安装文件。 + - 下载完成后，运行它。 + - 在第一个安装程序页面，确保你勾选了“Add Python 3.xxx to PATH”（添加 Python 3.xxx 到系统路径）的复选框。 + - 点击*安装*，然后在安装完成后点击*关闭*。 + +2. 打开你的命令提示符（Windows）/终端（macOS/ Linux）。要检查 Python 是否已安装，输入以下命令： ```bash python -V + # 如果以上命令失败，尝试： + python3 -V + # 或者，如果“py”命令可用，尝试： + py -V ``` -3. 下面应该给出你安装的版本号，使用`cd`命令导航到你的示例所在的目录。 +3. 它应该返回版本号。如果运行正常，请使用 `cd` 命令导航到你的示例所在的目录。 ```bash - # 输入你想要进入的目录，举例 + # 包含目录名字以进入它，例如 cd Desktop - # 用两个点来表示进入上一层级的目录 + # 如果需要的话，使用两个点来跳出一个目录级别 cd .. ``` -4. 输入命令在该目录中启动服务器： +4. 在该目录下输入命令启动服务器： ```bash - ＃如果上面返回的 Python 版本是 3.X - python -m http.server - ＃如果上面返回的 Python 版本是 2.X + # 如果上面返回的 Python 版本是 3.X + # 在 Windows 上，尝试“python -m http.server”或“py -3 -m http.server” + python3 -m http.server + # 如果上面返回的 Python 版本是 2.X python -m SimpleHTTPServer ``` -5. 默认情况下，这将在本地 Web 服务器上的端口 8000 上运行目录的内容。你可以通过转到`localhost:8000`Web 浏览器中的 URL 来访问此服务器。在这里你会看到列出的目录的内容 - 点击你想运行的 HTML 文件。 +5. 默认情况下，这会在 8000 端口上启动本地服务器，以提供文件夹中的内容。你可以在浏览器中访问 URL `http://localhost:8000` 来访问服务器。你将在此处看到列出的目录内容——点击你要运行的 HTML 文件即可。 -> **备注：** 如果你已经在端口 8000 上运行了某些东西，则可以通过运行 server 命令，然后选择另一个端口号（例如`python -m http.server 7800` （Python 3.x）或`python -m SimpleHTTPServer 7800` （Python 2.x））来选择另一个端口。然后你可以访问你的内容`localhost:7800`。 +> **备注：** 如果你已经在端口 8000 上运行了一些内容，你可以通过在运行服务器的命令后面加上备用端口号来选择另一个端口，例如 `python3 -m http.server 7800`（Python 3.x）或 `python -m SimpleHTTPServer 7800`（Python 2.x）。然后你可以在 `localhost:7800` 访问你的内容。 ## 在本地运行服务器端语言 -Python 的`SimpleHTTPServer`模块是有用的，但它不知道如何运行用 PHP 或 Python 等语言编写的代码。为了处理这个问题，你需要更多的东西 - 正是你需要的东西取决于你正在运行的服务器端语言。这里有几个例子： +Python 的 `http.server`（或 Python 2 的 `SimpleHTTPServer`）模块很有用，但它仅仅是一个*静态*文件服务器，不知道如何运行用 Python、PHP 或 JavaScript 等语言编写的代码。为了处理这个问题，你需要更多的东西——你需要的东西取决于你尝试运行的服务器端语言。这里有几个例子： + +- 要运行 Python 服务器端代码，你需要使用 Python web 框架。Python 有很多流行的 web 框架，例如 Django（有一个[指南](/zh-CN/docs/Learn/Server-side/Django)可供参考）、[Flask](https://flask.palletsprojects.com/) 和 [Pyramid](https://trypyramid.com)。 +- 要运行 Node.js（JavaScript）服务器端代码，你可以直接使用 Node 或选择构建于其上的框架。Express 是一个不错的选择——请参阅 [Express Web 框架（Node.js/JavaScript）](/zh-CN/docs/Learn/Server-side/Express_Nodejs)。 +- 要运行 PHP 服务器端代码，启动 [PHP 的内置开发服务器](https://www.php.net/manual/zh/features.commandline.webserver.php)： -- 要运行 Python 服务器端代码，你需要使用 Python 网络框架。你可以通过阅读 [Django Web 框架（Python）](/zh-CN/docs/Learn/Server-side/Django)来了解如何使用 Django 框架。[Flask](https://flask.palletsprojects.com/) 也是一个不错的选择（稍微轻量一点）。要运行 Flask，你需要先[安装 Python / PIP](/zh-CN/docs/Learn/Server-side/Django/development_environment#安装_python_3)，然后使用`pip3 install flask` 来安装 Flask。此时，你应该能够运行 Python Flask 示例 `python3 python-example.py`，然后在你的浏览器中打开 `localhost:5000` 查看。 -- 要运行 Node.js（JavaScript）服务器端代码，你可以直接使用 Node 或选择构建于其上的框架。Express 是一个不错的选择 - 请参阅[Express Web Framework（Node.js / JavaScript）](/zh-CN/docs/Learn/Server-side/Express_Nodejs)。 -- 要运行 PHP 服务器端代码，你需要一个可以解释 PHP 的服务器设置。本地 PHP 测试的好选择是[MAMP](https://www.mamp.info/en/downloads/)（Mac 和 Windows）， [AMPPS](http://ampps.com/download)（Mac，Windows，Linux）和[LAMP](https://www.linux.com/learn/easy-lamp-server-installation)（Linux，Apache，MySQL 和 PHP / Python / Perl）。这些是完整的包，创建本地设置，允许你运行 Apache 服务器，PHP 和 MySQL 数据库。 + ```bash + cd path/to/your/php/code + php -S localhost:8000 + ``` From 54ea3ed317d945086b35125645692856630e97e2 Mon Sep 17 00:00:00 2001 From: Shane Date: Fri, 15 Sep 2023 09:42:08 +0800 Subject: [PATCH 290/600] zh-cn: add translation for the "Issue with serializing circular references" section in JSON.stringify() (#15841) --- .../global_objects/json/stringify/index.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/files/zh-cn/web/javascript/reference/global_objects/json/stringify/index.md b/files/zh-cn/web/javascript/reference/global_objects/json/stringify/index.md index cdd3e1c6f0c607..11a23b780930eb 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/json/stringify/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/json/stringify/index.md @@ -169,6 +169,22 @@ JSON.stringify(obj); // '"bar"' JSON.stringify({ x: obj }); // '{"x":"bar"}' ``` +### 关于序列化循环引用的问题 + +由于 [JSON 格式](https://www.json.org/)不支持对象引用（尽管有一个 [IETF 草案存在](https://datatracker.ietf.org/doc/html/draft-pbryan-zyp-json-ref-03)），如果尝试编码带有循环引用的对象，将会抛出 {{jsxref("TypeError")}} 异常。 + +```js example-bad +const circularReference = {}; +circularReference.myself = circularReference; + +// 序列化循环引用会抛出 "TypeError: cyclic object value" 错误 +JSON.stringify(circularReference); +``` + +要序列化循环引用，你可以使用支持循环引用的库（例如 Douglas Crockford 的 [cycle.js](https://github.com/douglascrockford/JSON-js/blob/master/cycle.js)），或者自己实现一个解决方案，这需要找到循环引用，并用可序列化的值替换（或移除）它们。 + +如果你在使用 `JSON.stringify()` 来深拷贝一个对象，你可能想要使用 [`structuredClone()`](/zh-CN/docs/Web/API/structuredClone)，它支持循环引用。JavaScript 引擎的二进制序列化 API，比如 [`v8.serialize()`](https://nodejs.org/api/v8.html#v8serializevalue)，也支持循环引用。 + ### `JSON.stringify`用作 JavaScript 注意 JSON 不是 JavaScript 严格意义上的子集，在 JSON 中不需要省略两条终线（Line separator 和 Paragraph separator），但在 JavaScript 中需要被省略。因此，如果 JSON 被用作 JSONP 时，下面方法可以使用： From e817ee224ae00c21e0c80f957fbea4903592018a Mon Sep 17 00:00:00 2001 From: A1lo Date: Fri, 15 Sep 2023 11:27:47 +0800 Subject: [PATCH 291/600] zh-cn: update the translation of `URL.hash` (#15853) Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- files/zh-cn/web/api/url/hash/index.md | 25 +++++++++---------------- 1 file changed, 9 insertions(+), 16 deletions(-) diff --git a/files/zh-cn/web/api/url/hash/index.md b/files/zh-cn/web/api/url/hash/index.md index 995ac725d14102..9a086be3794aaf 100644 --- a/files/zh-cn/web/api/url/hash/index.md +++ b/files/zh-cn/web/api/url/hash/index.md @@ -1,34 +1,27 @@ --- -title: URL.hash +title: URL：hash 属性 slug: Web/API/URL/hash --- {{ APIRef("URL API") }} -{{domxref("URL")}} 接口的 **`hash`** 属性返回一个 {{domxref("USVString")}}，其中会包含 URL 标识中的 `'#'` 和 fragment 标识符（fragment 即我们通常所说的 URL hash）。 +{{domxref("URL")}} 接口的 **`hash`** 属性是一个包含 URL 标识中的 `'#'` 和片段（fragment）标识符的字符串。 -这里 fragment 不会经过[百分比编码](/zh-CN/docs/Glossary/percent-encoding)（URL 编码）。如果 URL 中没有 fragment，该属性会包含一个空字符串 —— `""`. +片段不会经过 [URL 解码](https://zh.wikipedia.org/wiki/百分号编码)。如果某个 URL 没有片段，该属性会包含一个空字符串——`""`。 {{AvailableInWorkers}} -## 语法 +## 值 -```js -string = object.hash; -object.hash = string; -``` - -### 返回值 - -{{domxref("USVString")}}. +一个字符串。 ## 示例 ```js -var url = new URL( - "https://developer.mozilla.org/zh-CN/docs/Web/API/URL/href#Examples", +const url = new URL( + "https://developer.mozilla.org/zh-CN/docs/Web/API/URL/href#示例", ); -url.hash; // Returns '#Examples' +console.log(url.hash); // 输出：'#%E7%A4%BA%E4%BE%8B' ``` ## 规范 @@ -39,6 +32,6 @@ url.hash; // Returns '#Examples' {{Compat}} -## 参考 +## 参见 - 所属的 {{domxref("URL")}} 接口。 From 6384ba0c6e16072a5392935ba992c59944f766b5 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 20 Jul 2023 09:23:30 +0900 Subject: [PATCH 292/600] =?UTF-8?q?2023/04/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/api/element/nextelementsibling/index.md | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/files/ja/web/api/element/nextelementsibling/index.md b/files/ja/web/api/element/nextelementsibling/index.md index 543b2653efa552..7d5da1d3351858 100644 --- a/files/ja/web/api/element/nextelementsibling/index.md +++ b/files/ja/web/api/element/nextelementsibling/index.md @@ -1,20 +1,18 @@ --- -title: Element.nextElementSibling +title: "Element: nextElementSibling プロパティ" +short-title: nextElementSibling slug: Web/API/Element/nextElementSibling +l10n: + sourceCommit: bbf7f25f9cf95fb154e2740a9fdc9c02818981bf --- {{APIRef("DOM")}} **`Element.nextElementSibling`** は読み取り専用のプロパティで、この要素の親の子リスト内ですぐ次にある要素を返します。このノードがリストの最後のノードであった場合は `null` を返します。 -## 構文 +## 値 -```js -// ゲッター -element = el.nextElementSibling; - -// セッターなし。読み取り専用プロパティ -``` +{{domxref("Element")}} オブジェクト、または `null` です。 ## 例 @@ -22,7 +20,7 @@ element = el.nextElementSibling;
    Here is div-01
    Here is div-02
    - +``` + +> **참고:** `crossorigin` 속성의 용도에 대한 자세한 내용은 [CORS 설정 속성](/ko/docs/Web/HTML/Attributes/crossorigin)을 참조하십시오. + +## 브라우저가 하위 리소스 무결성을 처리하는 방법 + +브라우저는 하위 리소스 무결성을 다음과 같이 처리합니다. + +1. 브라우저가 `integrity` 속성이 있는 {{HTMLElement("script")}}나 {{HTMLElement("link")}} 요소를 발견하면, 브라우저는 스크립트를 실행하거나 {{HTMLElement("link")}} 요소에 지정된 스타일시트를 적용하기 전에 먼저 스크립트 또는 스타일시트를 `integrity` 값에 지정된 기대 해시와 비교해야 합니다. + + 임베드된 문서 이외의 출처에서 제공되는 하위 리소스 무결성을 검증하기 위해, 브라우저는 추가로 [교차 출처 리소스 공유 (CORS)](/ko/docs/Web/HTTP/CORS)를 사용하여 리소스를 제공하는 출처가 요청 출처와 리소스를 공유할 수 있는지 확인합니다. + +2. 스크립트 또는 스타일시트가 관련 `integrity` 값과 일치하지 않는 경우, 브라우저는 스크립트 실행 또는 스타일시트 적용을 거부하고, 해당 스크립트나 스타일시트 가져오기가 실패했음을 나타내는 네트워크 오류를 대신 반환해야 합니다. + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [콘텐츠 보안 정책](/ko/docs/Web/HTTP/CSP) +- {{httpheader("Content-Security-Policy")}} HTTP 헤더 +- [XSS를 할 수 없는 CDN: 하위 리소스 무결성 사용하기](https://frederik-braun.com/using-subresource-integrity.html) +- [W3C의 하위 리소스 무결성 검사](https://w3c-test.org/subresource-integrity/subresource-integrity.html) +- [SRI 해시 생성기](https://www.srihash.org/) From 86fe3ae61146c373bbdb0da13c6e9a4559da85e5 Mon Sep 17 00:00:00 2001 From: Kuesung Park Date: Sun, 20 Aug 2023 15:47:44 +0900 Subject: [PATCH 329/600] translate --- .../basic_native_form_controls/buttons.png | Bin 0 -> 6405 bytes .../basic_native_form_controls/checkboxes.png | Bin 0 -> 2651 bytes .../basic_native_form_controls/disabled.png | Bin 0 -> 9334 bytes .../forms/basic_native_form_controls/index.md | 204 ++++++++++++++++++ .../basic_native_form_controls/radios.png | Bin 0 -> 2161 bytes 5 files changed, 204 insertions(+) create mode 100644 files/ko/learn/forms/basic_native_form_controls/buttons.png create mode 100644 files/ko/learn/forms/basic_native_form_controls/checkboxes.png create mode 100644 files/ko/learn/forms/basic_native_form_controls/disabled.png create mode 100644 files/ko/learn/forms/basic_native_form_controls/index.md create mode 100644 files/ko/learn/forms/basic_native_form_controls/radios.png diff --git a/files/ko/learn/forms/basic_native_form_controls/buttons.png b/files/ko/learn/forms/basic_native_form_controls/buttons.png new file mode 100644 index 0000000000000000000000000000000000000000..9ae8130b7f40be77c3e5cd79c547813fef3ec0b6 GIT binary patch literal 6405 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 kHsP-Hf6ZV0ztj(I-nZ=bFq8N$0Lp{TRsaA1 literal 0 HcmV?d00001 diff --git a/files/ko/learn/forms/basic_native_form_controls/checkboxes.png b/files/ko/learn/forms/basic_native_form_controls/checkboxes.png new file mode 100644 index 0000000000000000000000000000000000000000..83882fa800222382cae366fade89de201cf90ac1 GIT binary patch literal 2651 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 literal 0 HcmV?d00001 diff --git a/files/ko/learn/forms/basic_native_form_controls/disabled.png b/files/ko/learn/forms/basic_native_form_controls/disabled.png new file mode 100644 index 0000000000000000000000000000000000000000..437d3414f8779c5eabcc85d2915f4b8bc30a5e1f GIT binary patch literal 9334 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 +     + + + + + + + + + +
    前提：
    사전 요구 사항 + 기본 컴퓨터 지식과 기본 + HTML 이해가 필요합니다. +
    목표: + 브라우저에서 사용 가능한 원래의 네이티브 양식 위젯 세트에 대해 자세히 이해하고, 이를 HTML로 구현하는 방법을 알아보십시오. +
    + +이미 {{HTMLelement('form')}}, {{HTMLelement('fieldset')}}, {{HTMLelement('legend')}}, {{HTMLelement('textarea')}}, {{HTMLelement('label')}}, {{HTMLelement('button')}}, 그리고 {{HTMLelement('input')}} 같은 몇 가지 양식 요소들을 만나보셨을 것입니다. 이 글에서는 다음을 다룹니다. + +- 일반 입력 유형 {{HTMLelement('input/button', 'button')}}, {{HTMLelement('input/checkbox', 'checkbox')}}, {{HTMLelement('input/file', 'file')}}, {{HTMLelement('input/hidden', 'hidden')}}, {{HTMLelement('input/image', 'image')}}, {{HTMLelement('input/password', 'password')}}, {{HTMLelement('input/radio', 'radio')}}, {{HTMLelement('input/reset', 'reset')}}, {{HTMLelement('input/submit', 'submit')}}, 그리고 {{HTMLelement('input/text', 'text')}}. +- 몇 가지 속성들은 모든 양식 컨트롤에 공통적으로 적용됩니다. + +> **참고:** 다음 두 글에서 더욱 강력한 양식 컨트롤에 대해 다룹니다. 좀 더 고급 참조를 원하시면, [HTML 양식 요소 참조](/ko/docs/Web/HTML/Element#forms)와 특히 [\ 유형](/ko/docs/Web/HTML/Element/input) 참조를 참고하십시오. + +## 텍스트 입력 필드 + +텍스트 {{htmlelement("input")}} 필드는 가장 기본적인 양식 위젯입니다. 이것은 사용자가 어떠한 종류의 데이터라도 입력하는 데 매우 편리한 방법이며, 이미 몇 가지 간단한 예제를 보셨을 것입니다. + +> **참고:** HTML 양식 텍스트 필드는 간단한 일반 텍스트 입력 컨트롤입니다. 이는 풍부한 텍스트 편집(볼드체, 이탤릭체 등)을 수행할 수 없다는 것을 의미합니다. 당신이 마주칠 모든 리치 텍스트 편집기는 HTML, CSS, 그리고 자바스크립트로 만들어진 사용자 정의 위젯입니다. + +모든 기본 텍스트 컨트롤은 몇 가지 공통 행동을 공유합니다. + +- [`readonly`](/ko/docs/Web/HTML/Element/input#readonly)로 표시될 수 있습니다(사용자는 입력 값을 수정할 수 없지만, 나머지 양식 데이터와 함께 전송됩니다) 또는 [`disabled`](/ko/docs/Web/HTML/Element/input#disabled) (입력 값은 수정할 수 없고, 나머지 양식 데이터와 함께 전송되지 않습니다). +- [`placeholder`](/ko/docs/Web/HTML/Element/input#placeholder)를 가질 수 있습니다. 이는 텍스트 입력 상자 안에 나타나는 텍스트로, 텍스트 입력 상자의 목적을 간략하게 설명하는 데 사용되어야 합니다. +- [`size`](/ko/docs/Web/HTML/Attributes/size) (상자의 물리적 크기)와 [`maxlength`](/ko/docs/Web/HTML/Attributes/maxlength) (상자에 입력할 수 있는 최대 문자 수)에서 제한될 수 있습니다. +- 브라우저가 지원하는 경우 철자 검사를 받을 수 있습니다([`spellcheck`](/ko/docs/Web/HTML/Global_attributes/spellcheck) 속성 사용). + +> **참고:** {{htmlelement("input")}} 요소는 입력 유형에 따라 여러 가지 형태를 취할 수 있기 때문에 HTML 요소 중에서 유일합니다. 단일 줄 텍스트 필드, 시간 및 날짜 컨트롤, 텍스트 입력 없는 컨트롤(예: 체크박스, 라디오 버튼, 색상 선택기) 및 버튼을 포함한 대부분의 양식 위젯을 생성하는 데 사용됩니다. + +### 단일 줄 텍스트 필드 + +단일 줄 텍스트 필드는 `type` 속성 값이 `text`로 설정된 {{HTMLElement("input")}} 요소를 사용하여 만들어집니다. 또는 `type` 속성을 전체적으로 생략하여 (`text`는 기본값입니다) 생성할 수 있습니다. `type` 속성에 지정한 값이 브라우저에서 알 수 없는 경우 (`type="color"`를 지정하고 브라우저가 기본 색상 선택기를 지원하지 않는 경우) 이 속성의 값 `text`는 대체 값이 됩니다. + +> **참고:** 모든 단일 줄 텍스트 필드 유형의 예제는 GitHub에서 [single-line-text-fields.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/single-line-text-fields.html)에서 확인할 수 있습니다. ([라이브 데모도 확인하세요](https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html)). + +다음은 기본 단일 줄 텍스트 필드 예제입니다. + +```html + +``` + +단일 줄 텍스트 필드에는 하나의 제약만 있습니다. 줄 바꿈이 있는 텍스트를 입력하면 브라우저는 해당 데이터를 서버로 전송하기 전에 줄 바꿈을 제거합니다. + +### 비밀번호 필드 + +원래의 입력 유형 중 하나는 `password` 텍스트 필드 유형입니다. + +```html + +``` + +`password` 값은 입력된 텍스트에 특별한 제약 조건을 추가하지 않지만, 필드에 입력된 값을 은폐합니다(예: 점 또는 별표로) 다른 사람이 쉽게 읽을 수 없습니다. + +이것은 단순히 사용자 인터페이스 기능일 뿐입니다. 양식을 안전하게 제출하지 않으면 데이터는 일반 텍스트로 전송되므로 보안에 좋지 않습니다. 악의적인 당사자가 데이터를 가로채어 비밀번호, 신용카드 정보 또는 제출한 기타 내용을 훔칠 수 있습니다. 이로부터 사용자를 보호하는 가장 좋은 방법은 보안 연결(즉, `https://` 주소에 위치한)을 통해 양식과 관련된 모든 페이지를 호스팅하는 것입니다. 그러면 데이터가 전송되기 전에 암호화됩니다. + +브라우저는 안전하지 않은 연결을 통해 양식 데이터를 전송하는 것의 보안 문제를 인식하며, 사용자가 안전하지 않은 양식을 사용하지 않도록 경고합니다. Firefox에서 구현하는 내용에 대한 자세한 내용은 [Insecure passwords](/ko/docs/Web/Security/Insecure_passwords)를 참조하세요. + +### 숨겨진 컨텐츠 + +또 다른 원래의 텍스트 컨트롤은 `hidden` 입력 유형입니다. 이것은 사용자에게 보이지 않는 양식 컨트롤을 만드는 데 사용됩니다. 그러나 제출된 양식 데이터와 함께 서버로 전송됩니다. 예를 들어 주문이 접수되었을 때 서버에 타임스탬프를 제출하려고 할 수 있습니다. 숨겨져 있기 때문에 사용자는 값을 볼 수 없고 의도적으로 편집할 수 없으며 포커스를 받지 않으며 스크린 리더도 이를 인식하지 않습니다. + +```html + +``` + +이러한 요소를 만들려면 `name` 및 `value` 속성을 설정해야 합니다. 값은 자바스크립트를 통해 동적으로 설정할 수 있습니다. `hidden` 입력 유형에는 관련 레이블이 없어야 합니다. + +다른 텍스트 입력 유형, 예를 들면 {{HTMLElement("input/search", "search")}}, {{HTMLElement("input/url", "url")}}, 그리고 {{HTMLElement("input/tel", "tel")}}은 다음 자습서인 [HTML5 입력 유형](/ko/docs/Learn/Forms/HTML5_input_types)에서 다룰 것입니다. + +## 체크 가능한 항목: 체크박스와 라디오 버튼 + +체크 가능한 항목은 클릭하여 또는 관련 레이블을 클릭하여 상태를 변경할 수 있는 컨트롤입니다. 체크 가능한 항목에는 체크박스와 라디오 버튼 두 가지 유형이 있습니다. 둘 다 기본적으로 위젯이 체크되어 있는지 여부를 나타내는 [`checked`](/ko/docs/Web/HTML/Element/input/checkbox#checked) 속성을 사용합니다. + +이러한 위젯이 다른 양식 위젯과 정확히 같은 방식으로 동작하지 않는 것은 주목할 만한 사실입니다. 대부분의 양식 위젯의 경우, 양식이 제출되면 [`name`](/ko/docs/Web/HTML/Element/input#name) 속성을 가진 모든 위젯이 전송됩니다. 값을 입력하지 않아도 마찬가지입니다. 체크 가능한 항목의 경우, 체크되어 있으면 값만 전송됩니다. 이름조차도 체크되어 있지 않으면 아무것도 전송되지 않습니다, 값이 없지만 체크되어 있으면 이름이 _on_ 값과 함께 전송됩니다. + +### 체크박스 + +체크박스는 {{HTMLElement("input")}} 요소를 사용하여 생성되며, 그 [`type`](/ko/docs/Web/HTML/Element/input#type) 속성 값은 {{HTMLElement("input/checkbox", "checkbox")}}로 설정됩니다. + +```html + +``` + +관련 체크박스 항목은 동일한 [`name`](/ko/docs/Web/HTML/Element/input#name) 속성을 사용해야 합니다. [`checked`](/ko/docs/Web/HTML/Element/input/checkbox#checked) 속성을 포함하면 페이지가 로드될 때 체크박스가 자동으로 체크됩니다. 체크박스를 클릭하거나 관련 레이블을 클릭하면 체크박스가 켜고 꺼집니다. + +### 라디오 버튼 + +라디오 버튼은 [`type`](/ko/docs/Web/HTML/Element/input#type) 속성 값이 `radio`로 설정된 {{HTMLElement("input")}} 요소를 사용하여 생성됩니다. + +```html + +``` + +여러 라디오 버튼을 함께 연결할 수 있습니다. 그들이 [`name`](/ko/docs/Web/HTML/Element/input#name) 속성의 동일한 값을 공유하면, 그들은 동일한 버튼 그룹에 있다고 간주됩니다. 주어진 그룹의 버튼 중 하나만 한 번에 체크될 수 있습니다. 이는 그 중 하나가 체크되면 다른 모든 것이 자동으로 체크 해제된다는 것을 의미합니다. + +## 실제 버튼 + +라디오 버튼은 이름에도 불구하고 실제 버튼이 아닙니다. 실제 버튼을 살펴보겠습니다! 세 가지 입력 유형이 버튼을 생성합니다. + +- `submit` + - : 양식 데이터를 서버로 전송합니다. {{HTMLElement("button")}} 요소의 경우, `type` 속성을 생략하거나 `type`의 잘못된 값은 제출 버튼으로 간주됩니다. +- `reset` + - : 모든 양식 위젯을 기본 값으로 재설정합니다. +- `button` + - : 자동 효과가 없는 버튼이지만 자바스크립트 코드를 사용하여 사용자 정의할 수 있습니다. + +그리고 우리는 {{htmlelement("button")}} 요소 그 자체를 가지고 있습니다. 이는 위에서 언급한 세 가지 `` 유형의 동작을 흉내내기 위해 `submit`, `reset`, 또는 `button` 값의 `type` 속성을 가질 수 있습니다. 두 요소 사이의 주요 차이점은 실제 ` +

    + + + ``` ## 関連情報 diff --git a/files/ja/web/api/websockets_api/writing_websocket_servers/index.md b/files/ja/web/api/websockets_api/writing_websocket_servers/index.md index d7b081d804908b..99106db78f38b5 100644 --- a/files/ja/web/api/websockets_api/writing_websocket_servers/index.md +++ b/files/ja/web/api/websockets_api/writing_websocket_servers/index.md @@ -1,6 +1,8 @@ --- title: WebSocket サーバーの記述 slug: Web/API/WebSockets_API/Writing_WebSocket_servers +l10n: + sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8 --- {{APIRef("Websockets API")}} @@ -120,12 +122,14 @@ FIN ビットは、これがシリーズ内の最後のメッセージである ### データの読み込みとマスク解除 -MASK ビットがセットされていた場合は（クライアントからサーバーへのメッセージではそうあるべきです）、次の 4 オクテット（32 ビット）を読み込みます。これがマスキングキーです。ペイロード長とマスキングキーがデコードされたら、ソケットからそのバイト数を読み取ることができます。データを **ENCODED**、キーを **MASK** 呼ぶことにします。 **DECODED** を取得するには、**ENCODED** のオクテット（バイト列、すなわちテキストデータの文字の列）をループし、オクテットを MASK の（i モジュロ 4）番目のオクテットを使用して XOR します。擬似コードで表してみます（JavaScript が有効な場合）。 +MASK ビットがセットされていた場合は（クライアントからサーバーへのメッセージではそうあるべきです）、次の 4 オクテット（32 ビット）を読み込みます。これがマスキングキーです。ペイロード長とマスキングキーがデコードされたら、ソケットからそのバイト数を読み取ることができます。データを `ENCODED`、キーを `MASK` 呼ぶことにします。 `DECODED` を取得するには、`ENCODED` のオクテット（バイト列、すなわちテキストデータの文字の列）をループし、オクテットを `MASK` の（i モジュロ 4）番目のオクテットを使用して XOR します。擬似コードで表してみます（JavaScript が有効な場合）。 ```js -var DECODED = ""; -for (var i = 0; i < ENCODED.length; i++) { - DECODED[i] = ENCODED[i] ^ MASK[i % 4]; +const MASK = [1, 2, 3, 4]; // 4 バイトマスク +const ENCODED = [105, 103, 111, 104, 110]; // encoded string "hello" + +// デコードする内容のバイト配列を作成 +const DECODED = Uint8Array.from(ENCODED, (elt, i) => elt ^ MASK[i % 4]); // マスクの XOR を実行 ``` これで、アプリケーションに応じて **DECODED** が何を意味するのかを理解することができます。 @@ -136,7 +140,7 @@ FIN フィールドとオペコードフィールドは連携して、別々の オペコードはフレームの意味を示しています。`0x1` の場合、ペイロードはテキストです。`0x2` の場合、ペイロードはバイナリデータです。ただし、`0x0` の場合、フレームは継続フレームです。つまりサーバーはフレームのペイロードをそのクライアントから受信した最後のフレームに連結する必要があります。ここでは、サーバーがテキストメッセージを送信するクライアントに反応する概略を示します。第 1 のメッセージは単一のフレームで送信され、第 2 のメッセージは3つのフレームにわたって送信されます。FIN とオペコードの詳細は、クライアントに対してのみ表示されます。 -``` +```plain Client: FIN=1, opcode=0x1, msg="hello" Server: (process complete message immediately) Hi. Client: FIN=0, opcode=0x1, msg="and a" From 8fb8313b4831a76be71bb6b7519f87483bbaecbd Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 16 Sep 2023 00:43:02 +0900 Subject: [PATCH 406/600] =?UTF-8?q?2023/09/14=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../index.md | 130 ++++++++++++++++++ 1 file changed, 130 insertions(+) create mode 100644 files/ja/web/api/websockets_api/writing_a_websocket_server_in_javascript_deno/index.md diff --git a/files/ja/web/api/websockets_api/writing_a_websocket_server_in_javascript_deno/index.md b/files/ja/web/api/websockets_api/writing_a_websocket_server_in_javascript_deno/index.md new file mode 100644 index 00000000000000..cf05008b838cec --- /dev/null +++ b/files/ja/web/api/websockets_api/writing_a_websocket_server_in_javascript_deno/index.md @@ -0,0 +1,130 @@ +--- +title: WebSocket サーバーを JavaScript (Deno) で書く +slug: Web/API/WebSockets_API/Writing_a_WebSocket_server_in_JavaScript_Deno +l10n: + sourceCommit: 50e215d730cd173d93b9bf75785c0d8ed2f67cb0 +--- + +{{DefaultAPISidebar("Websockets API")}} + +この例では、 Deno を使用して WebSocket API サーバーを作成する方法を、付随するウェブページと共に示します。 + +Deno は JavaScript ランタイムで、 TypeScript のコンパイルとオンザフライでのキャッシュに対応しています。 Deno はフォーマッター、リンター、テストランナーなどを持ち、また多くのウェブ API も実装しています。ウェブ標準に準拠するために、 Deno 固有の API はすべて `Deno` 名前空間の下に実装されています。 + +[Deno のウェブサイト](https://deno.com/)では、 Deno のインストール方法を提供しています。 + +執筆時点での Deno のバージョンは `1.36` です。 + +## コード + +コードはサーバー用とクライアント用の 2 つのファイルに格納します。 + +### サーバー + +`main.js` ファイルを作成します。このファイルにはクライアントに HTML を提供する単純な HTTP サーバーのコードを格納します。 + +```js +Deno.serve({ + port: 80, + handler: async (request) => { + // If the request is a websocket upgrade, + // we need to use the Deno.upgradeWebSocket helper + if (request.headers.get("upgrade") === "websocket") { + const { socket, response } = Deno.upgradeWebSocket(request); + + socket.onopen = () => { + console.log("CONNECTED"); + }; + socket.onmessage = (event) => { + console.log(`RECEIVED: ${event.data}`); + socket.send("pong"); + }; + socket.onclose = () => console.log("DISCONNECTED"); + socket.onerror = (error) => console.error("ERROR:", error); + + return response; + } else { + // If the request is a normal HTTP request, + // we serve the client HTML file. + const file = await Deno.open("./index.html", { read: true }); + return new Response(file.readable); + } + }, +}); +``` + +`Deno.upgradeWebSocket()` は接続をウェブソケット接続にアップグレードします。これは[プロトコルアップグレードメカニズム](/ja/docs/Web/HTTP/Protocol_upgrade_mechanism)で詳しく説明されています。 + +[`Deno.serve()`](https://deno.land/api@v1.36.4?s=Deno.serve) は、 `Deno.listen()` と `Deno.serveHttp()` を基盤に使用し、 HTTP サーバーを簡単に設定するための上位インターフェイスです。これがなければ、コードは次のように見ていくことになります。 + +```js +for await (const conn of Deno.listen({ port: 80 })) { + for await (const { request, respondWith } of Deno.serveHttp(conn)) { + respondWith(handler(request)); + } +} +``` + +### クライアント + +`index.html` ファイルを作成します。このファイルには、接続が確立してから 5 秒ごとにサーバーに ping を送信するスクリプトがあります。 + +```html + +

    WebSocket Test

    +

    Sends a ping every five seconds

    +
    + +``` + +## コードの実行 + +これら 2 つのファイルを用いて、 Deno を使用してアプリを実行します。 + +```sh +deno run --allow-net=0.0.0.0:80 --allow-read=./index.html main.js +``` + +Deno では、ホストマシン上でアクセスするための明示的な権限を要求します。 + +- `--allow-net=0.0.0.0:80` はアプリが localhost を 80 番ポートで使用することを許可します。 +- `--allow-read=./index.html` はクライアントが HTML ファイルにアクセスできるようにします。 + +## 関連情報 + +- [WebSocket サーバーを書く](/ja/docs/Web/API/WebSockets_API/Writing_WebSocket_servers) From 776d51952cde85b830e7ad561c6861bc5981a8d8 Mon Sep 17 00:00:00 2001 From: Alexander Date: Tue, 19 Sep 2023 11:59:04 -0600 Subject: [PATCH 407/600] es: Update writing_guidelines/experimental_deprecated_obsolete (#15803) * es: Update writing_guidelines/experimental_deprecated_obsolete * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../experimental_deprecated_obsolete/index.md | 198 +++++++----------- 1 file changed, 77 insertions(+), 121 deletions(-) diff --git a/files/es/mdn/writing_guidelines/experimental_deprecated_obsolete/index.md b/files/es/mdn/writing_guidelines/experimental_deprecated_obsolete/index.md index 275121f6bbead7..04ce87dc14b10a 100644 --- a/files/es/mdn/writing_guidelines/experimental_deprecated_obsolete/index.md +++ b/files/es/mdn/writing_guidelines/experimental_deprecated_obsolete/index.md @@ -1,164 +1,120 @@ --- -title: MDN convenciones y definiciones +title: Experimental, desaprobado y obsoleto slug: MDN/Writing_guidelines/Experimental_deprecated_obsolete +l10n: + sourceCommit: 8d0cbeacdc1872f7e4d966177151585c58fb879e --- {{MDNSidebar}} -Este artículo define algunas convenciones y definiciones que se usan comúnmente en MDN, que pueden no ser obvias para algunas personas cuando las encuentran en la documentación. +Estos términos se asocian comúnmente con tecnologías y especificaciones y se utilizan en MDN Web Docs para etiquetar el estado de una tecnología. Para la definición de estos términos, MDN Web Docs se alinea con el repositorio [Browser Compatibility Data (BCD)](https://github.com/mdn/browser-compat-data/blob/main/schemas/compat-data-schema.md#status-information). +Estos términos se describen a continuación en el contexto de su uso en MDN Web Docs. -## Definiciones +## Experimental -### Desaprobado y obsoleto +Cuando una tecnología se describe como experimental en MDN Web Docs, significa que la tecnología es emergente e inmadura y actualmente está _en proceso_ de ser añadida a la plataforma web (o de ser considerada para su adición). +Marcar una tecnología como experimental indica que los lectores deben pensar cuidadosamente antes de usar esa tecnología en cualquier tipo de proyecto en producción (es decir, un proyecto que no sea solo una demostración o un experimento). Se [anima a los lectores a probar funciones experimentales](https://github.com/mdn/browser-compat-data/blob/main/schemas/compat-data-schema.md#status-information) y proporcionar comentarios a los proveedores de navegadores y autores de estándares. -**Desaprobado** y **obsoleto** son términos comunes asociados con tecnologías y especificaciones, pero ¿qué significan? +Para una tecnología marcada como **experimental**, se aplican una o más de las siguientes condiciones: -- Desaprobado - - En MDN, el término **desaprobado** se usa para marcar una API o tecnología que ya no se recomienda, pero que aún está implementada y puede funcionar. Recientemente, la hemos actualizado a la definición utilizada en nuestro [proyecto de datos de compatibilidad del navegador](https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md#status-information), que esa "característica ya no se recomienda. Es posible que se elimine en el futuro o que solo se conserve por motivos de compatibilidad. Evita el uso de esta funcionalidad." -- Obsoleto - - En MDN, el término **obsoleto** se utiliza para marcar una API o tecnología que no solo ya no se recomienda, sino que ya no se implementa en los navegadores. Sin embargo, esto fue confuso — es similar a desaprobado, y la distinción no es muy útil (aún no debes usarlo en un sitio de producción). Por lo tanto, ya no la usamos, y cualquier instancia con la que te encuentres se debe eliminar/reemplazar por desaprobada. +- Se implementa y habilita de forma predeterminada en la compilación de la versión de **solo un** motor de renderizado de los navegadores principales modernos. +- Solo se admite a través de cambios de configuración como preferencias o parámetros, independientemente del número de motores de renderizado admitidos. +- Es probable que su especificación definitiva cambie significativamente en formas incompatibles con versiones anteriores (es decir, puede romper el código existente que se basa en la característica). -### Experimental +> **Nota:** Una función que solo se publica en un motor de renderizado se sigue considerando experimental, incluso si está disponible en compilaciones de vista previa de otros motores de renderizado (o estableciendo una preferencia o indicador). -**Experimental** puede significar diferentes cosas según el contexto en el que lo escuches o lo leas. Cuando una tecnología se describe como experimental en MDN, significa que la tecnología es incipiente e inmadura, y actualmente está en proceso de ser agregada a la plataforma web (o considerada para agregarla). +El estado **experimental** de una tecnología puede caducar si se cumple una o más de las siguientes condiciones: -Uno o ambos de estos serán ciertos: +- Es compatible de forma predeterminada en **dos o más** de los principales motores de renderizado de los navegadores. +- Es compatible de forma predeterminada con un único motor de renderizado de navegador durante dos o más años y no sufre cambios importantes. +- Es poco probable que su especificación definitiva cambie de manera que rompa la compatibilidad. -- Está implementado y habilitado de forma predeterminada en menos de dos de los principales navegadores modernos. -- Su especificación definitoria no es estable y es probable que cambie significativamente. Por lo tanto, su sintaxis y comportamiento están sujetos a cambios en futuras versiones de navegadores a medida que cambie la especificación. +Para ver ejemplos de estas condiciones, consulte la documentación de [bandera experimental](https://github.com/mdn/browser-compat-data/blob/main/docs/data-guidelines/index.md#setting-experimental) de BCD. -Si una o ambas de estas definiciones es cierta, entonces debes pensar detenidamente antes de comenzar a usar esa tecnología en cualquier tipo de proyecto de producción (es decir, no solo en una demostración o experimento). Consulta también la definición de experimental en nuestro [proyecto de datos de compatibilidad del navegador](https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md#status-information). +Usualmente, si una tecnología es soportada a través de varios de los navegadores principales, la especificación será estable, pero este no es siempre el caso. +Por otro lado, algunas tecnologías pueden tener una especificación estable, pero no tienen soporte nativo en los navegadores. [IMSC](/es/docs/Related/IMSC), por ejemplo, se utiliza mediante un polyfill de JavaScript. -Por el contrario, un elemento ya no es experimental cuando: +Una característica o tecnología que forma parte de una especificación activa o un proceso de estandarización y no está marcada como **obsoleta** se dice que está en **vía de estandarización**. -- Está implementado en dos o más navegadores principales; o -- Su especificación definitoria es estable y es poco probable que cambie. +## Desaprobada -El _or_ es importante aquí — por lo general, si una tecnología es compatible con varios navegadores importantes, la especificación será estable, pero no siempre es así. Y algunas tecnologías tendrán una especificación estable y se usarán bien, pero no tendrán soporte nativo en los navegadores ([IMSC](/es/docs/Related/IMSC), por ejemplo). +El término **desaprobado** en MDN Web Docs se utiliza para marcar una API o tecnología que ya no se recomienda. Una API o tecnología obsoleta podría eliminarse en el futuro o podría conservarse solo por motivos de compatibilidad y seguir funcionando. Recomendamos evitar el uso de las funcionalidades marcadas como desaprobadas. -### Páginas archivadas +Para más información en la definición de **desaprobado**, vea la [la bandera desaprobado](https://github.com/mdn/browser-compat-data/blob/main/docs/data-guidelines/index.md#encuadre-deprecated) de la documentación de BCD. -Las páginas archivadas son páginas que se almacenan en el [Archivo de contenido obsoleto](/es/docs/Archive) de MDN. Estas páginas contienen información lo suficientemente desactualizada como para que ya no sea directamente útil para nadie. +## Obsoleto -Por lo general, estas se refieren a proyectos de Mozilla que han sido descontinuados y ya no se debe confiar en ellos. Pero no las eliminamos simplemente porque forman un registro histórico útil, y algunos de los patrones o ideas contenidos en ellos podrían ser útiles para trabajos futuros. Un buen ejemplo es el [proyecto B2G (Firefox OS)](/es/docs/Archive/B2G_OS). +En MDN Web Docs, el término **obsoleto** se usaba históricamente para indicar una API o tecnología que ya no solo ya no se recomienda, sino que ya no se implementa en los navegadores. +Debido a que la distinción entre **obsoleto** y **desaprobado** no es muy útil, ya no usamos el término **obsoleto** en MDN Web Docs. -#### ¿Cuándo se debe archivar una página? +> **Nota:** Si te encuentras con algún caso de **obsoleto**, debes eliminarlo o reemplazarlo con el término **desaprobado**. -Una página se debe archivar si se ajusta a la descripción anterior. Para archivar una página, debes utilizar la "función Mover página" (_Avanzado > Mover este artículo_) para mover la página al árbol de páginas de archivo (/es/docs/Archive). Es posible que no tengas los permisos para usar esta función, y antes de comenzar a archivar páginas, primero debas discutirlo con la comunidad MDN; habla con nosotros en nuestro [Foro de discusión](https://discourse.mozilla.org/c/mdn). +## Pautas para eliminar contenido -### Páginas eliminadas +A veces, durante el desarrollo de una nueva especificación o en el transcurso de la evolución de los estándares, como en HTML, se agregan nuevos elementos, métodos, propiedades, etc., a la especificación, se mantienen allí durante un tiempo y luego se eliminan. A veces esto sucede muy rápidamente, y a veces estos nuevos elementos permanecen en la especificación durante meses o incluso años antes de ser eliminados. Esto puede hacer que sea difícil decidir cómo manejar la eliminación del elemento de la especificación. -Las páginas eliminadas son páginas que se eliminaron explícitamente de MDN — consulta, por ejemplo, la interfaz [`SharedKeyframeList`](/es/docs/Web/API/SharedKeyframeList) y el constructor [`SharedKeyframeList()`](/es/docs/Web/API/SharedKeyframeList/SharedKeyframeList). Estas páginas contienen información que ya no es útil de ninguna manera y/o puede ser incorrecta hasta el punto en que mantenerla disponible puede ser confuso o malo para la gente. +Aquí hay algunas pautas para ayudarlo a decidir qué hacer cuando se elimina algo de la especificación. -Estas pueden ser: +> **Nota:** A los efectos de esta discusión, la palabra "elemento" se utiliza para referirse a cualquier cosa que pueda ser parte de una especificación: un elemento o un atributo de un elemento, una interfaz o cualquier método individual, una propiedad u otro miembro de una interfaz, y así sucesivamente. -- Páginas de referencia para funciones de API que se eliminaron de la especificación antes de que se implementaran en cualquier navegador. -- Artículos que cubren técnicas que luego se demostró que eran malas prácticas y fueron reemplazadas por mejores técnicas. -- Artículos que contienen información que luego fue reemplazada por otros artículos de mejor calidad. -- Artículos que contienen contenido inapropiado para MDN. -- Traducciones antiguas, desactualizadas y difíciles de arreglar, lo que significa que la versión en inglés es preferible y comenzar una nueva traducción sería una opción más fácil. +### Si el elemento nunca se implementó -#### ¿Cuándo se debe eliminar una página? +Si el elemento _nunca_ fue implementado en una versión de _cualquier_ navegador, ni siquiera detrás de una preferencia o un parámetro, elimine cualquier referencia al elemento de la documentación. -Se debe eliminar una página si se ajusta a la descripción anterior. Para eliminar una página, debes utilizar la función "Eliminar esta página" (_Avanzado> Eliminar esta página_) para eliminar la página. Probablemente no tengas los permisos para usar esta función, y cuando pienses en eliminar páginas, primero debes discutirlo con la comunidad de MDN; habla con nosotros en nuestro [Foro de discusión](https://discourse.mozilla.org/c/mdn). +- Si el artículo tiene alguna página de documentación que describa solo ese artículo (como {{domxref("RTCPeerConnection.close()")}}), elimina esa página. + Si el elemento eliminado es una interfaz, esto significa eliminar también cualquier subpágina que describa las propiedades y los métodos en esa interfaz. +- Elimine el elemento de cualquier lista de propiedades, atributos, métodos, etc. Para los métodos de una interfaz, por ejemplo, esto significa eliminarla de la sección "Métodos" en la página de descripción general de la interfaz. +- Busque en el texto de la página de resumen de esa interfaz, elemento, etc., cualquier referencia al elemento eliminado. Elimine esas referencias, asegurándose de no dejar problemas gramaticales extraños u otros problemas con el texto. Esto puede significar no solo eliminar palabras, sino reescribir una oración o párrafo para que tenga más sentido. También puede significar eliminar secciones enteras de contenido si la descripción del uso del artículo es larga. +- Del mismo modo, busca cualquier discusión sobre el tema en las guías y tutoriales sobre la API o tecnología relevante. Elimine esas referencias, asegurándose de no dejar problemas gramaticales extraños u otros problemas con el texto. Esto puede significar no solo eliminar palabras, sino reescribir una oración o párrafo para que tenga más sentido. También puede significar eliminar secciones enteras de contenido si la descripción del uso del artículo es larga. +- Busque en MDN Web Docs referencias al elemento eliminado, en caso de que haya discusiones en otro lugar. Es poco probable que los haya, ya que si nunca se implementó, es poco probable que se discuta ampliamente. Elimina esas menciones también. +- Si los archivos JSON en el [repositorio de datos de compatibilidad del navegador](https://github.com/mdn/browser-compat-data) contienen datos de los elementos eliminados, elimine esos objetos del código JSON y envíe una solicitud de revisión con ese cambio, explicando el motivo en el mensaje de confirmación y la descripción. Tenga cuidado de no romper la sintaxis JSON mientras lo hace. -### Cuando documentar nuevas tecnologías +### Si el elemento se implementó en un navegador detrás de un argumento -En MDN, buscamos constantemente documentar nuevas tecnologías de estándares web según corresponda. Intentamos lograr un equilibrio entre publicar la documentación lo suficientemente temprano para que los desarrolladores puedan aprender sobre las nuevas funciones tan pronto como lo necesiten y publicarla lo suficientemente tarde para que la tecnología sea madura y estable para que los documentos no necesiten actualizaciones constantes o rápida eliminación. +Si el elemento se implementó en cualquier versión de lanzamiento de uno o más navegadores pero _solo_ detrás de una preferencia o un argumento, no lo elimine de la documentación de inmediato. En su lugar, marca el artículo como **desaprobado** de la siguiente manera: -En general, nuestra definición de lo más temprano que consideraremos para documentar una nueva tecnología es: +- Si el artículo tiene alguna página de documentación que describa solo ese artículo (como {{domxref ("RTCPeerConnection.close()")}}), agrega la macro [`deprecated_header`](https://github.com/mdn/yari/blob/main/kumascript/macros/Deprecated_Header.ejs) a la parte superior de la página y agrega la siguiente entrada de metadato `status:`: -_"Cuando la función está en una pista de estándares y se implementa en algún lugar."_ + ```yaml + status: + - deprecated + ``` -Definitivamente deberías considerar documentar una nueva tecnología si: +- En la página de descripción general del elemento, interfaz o API, busca la lista de elementos que incluye el elemento que se ha eliminado de la especificación y agrega la macro [`deprecated_inline`](https://github.com/mdn/yari/blob/main/kumascript/macros/Deprecated_Inline.ejs) después del nombre del elemento en esa lista. +- Buscar en el texto informativo de la página de resumen de esa interfaz, elemento, etc., cualquier referencia al elemento eliminado. Agregue cuadros de advertencia en los lugares apropiados con texto como "\[item] se ha eliminado de la especificación y se eliminará pronto de los navegadores. Consulta \[enlace a página] para obtener una nueva forma de hacerlo." +- Del mismo modo, busca cualquier discusión sobre el tema en las guías y tutoriales sobre la API o tecnología relevante. Añade advertencias similares. +- Busque en MDN Web Docs referencias al elemento eliminado, en caso de que haya discusiones en otro lugar. Añade mensajes de advertencia similares allí también. +- En algún momento en el futuro, se puede tomar la decisión de eliminar el artículo de la documentación; normalmente no lo hacemos, pero si el artículo estaba especialmente inutilizado o no era interesante, podemos decidir hacerlo. +- Actualizar cualquier entrada relevante en el [Repositorio de datos de compatibilidad del navegador](https://github.com/mdn/browser-compat-data) para reflejar la obsolescencia de los artículos afectados. -- Se especifica en un documento de especificación publicado bajo una organización de estándares confiable (como W3C, WHATWG, Khronos, IETF, etc.), que ha alcanzado un nivel razonable de estabilidad (por ejemplo, un borrador de trabajo del W3C o una recomendación candidata, o la especificación está buscando ser bastante estable a juzgar por el flujo de asuntos presentados en su contra). -- Se implementa de manera consistente en al menos un navegador, y otros desarrolladores de navegadores muestran signos de interés (como un boleto activo o un proceso de "intención de implementar" en vigor). +### Si el elemento se implementó en un navegador sin un parámetro -Deberías tener más cuidado al documentar una nueva tecnología (pero deberías considerarla si tiene sentido) si: +Si el elemento se implementó en una o más compilaciones de versiones de navegadores sin requerir una preferencia o un parámetro, marque el elemento como **desaprobado**, de la siguiente manera: -- No tiene una especificación, o la especificación es una nota aproximada que parece estar sujeta a cambios. -- Uno o cero navegadores lo implementan actualmente, y los navegadores que no lo admiten no muestran signos de interés en implementarlo (puedes evaluar esto preguntando a los ingenieros que trabajan en esos navegadores, buscando rastreadores de errores del navegador y listas de correo, etc.). +- Si el artículo tiene alguna página de documentación que describa solo ese artículo (como {{domxref ("RTCPeerConnection.close()")}}), agrega la macro [`deprecated_header`](https://github.com/mdn/yari/blob/main/kumascript/macros/Deprecated_Header.ejs) a la parte superior de la página y agrega la siguiente entrada de metadato `status:`: -No debes considerar documentar una nueva tecnología si: + ```yaml + status: + - deprecated + ``` -- No es una tecnología expuesta a la web y/o es completamente propietaria. -- Ya muestra signos de estar obsoleto o reemplazado por una característica similar. +- En la página de descripción general del elemento, interfaz o API, busca la lista de elementos que incluye el elemento que se ha eliminado de la especificación y agrega la macro [`deprecated_inline`](https://github.com/mdn/yari/blob/main/kumascript/macros/Deprecated_Inline.ejs) después del nombre del elemento en esa lista. +- Buscar en el texto informativo de la página de resumen de esa interfaz, elemento, etc., cualquier referencia al elemento eliminado. Agregue mensajes de advertencia en los lugares apropiados con texto como "\[item] ha sido eliminado de la especificación y está desaprobado. Es posible que se elimine de los navegadores en el futuro, por lo que no debes usarlo. Consulta \[enlace a página] para obtener una nueva forma de hacerlo." +- Del mismo modo, busca cualquier discusión sobre el tema en las guías y tutoriales sobre la API o tecnología relevante. Añade advertencias similares. +- Busque en MDN Web Docs referencias al elemento eliminado, en caso de que haya discusiones en otro lugar. Añade mensajes de advertencia similares allí también. +- Es poco probable que estos artículos se eliminen de la documentación en el corto plazo, si es que se eliminan alguna vez. +- Actualizar cualquier entrada relevante en el [Repositorio de datos de compatibilidad del navegador](https://github.com/mdn/browser-compat-data) para reflejar la caducidad de los artículos afectados. -## Convenciones +Utilice el sentido común con la redacción de los mensajes de advertencia y otros cambios en el texto sugeridos en las pautas anteriores. +Diferentes elementos requerirán una redacción y un manejo diferente de la situación. +En caso de duda, no dudes en pedir consejo en las [salas de chat de MDN Web Docs](/es/docs/MDN/Community/Communication_channels#chat_rooms). -### Cuando se elimina algo de la especificación +## Pautas para documentar un conflicto de especificaciones -A veces, durante el desarrollo de una nueva especificación, o en el transcurso de la evolución de los estándares como HTML, se agregan nuevos elementos, métodos, propiedades, etc. a la especificación, permanecen allí por un tiempo y luego se eliminan nuevamente. A veces, esto sucede muy rápido y, a veces, estos nuevos elementos permanecen en la especificación durante meses o incluso años antes de ser eliminados. Esto puede hacer que sea complicado decidir cómo manejar la eliminación del artículo de la especificación. Aquí hay algunas pautas que te ayudarán a decidir qué hacer. +A veces, pero rara vez, puede haber un conflicto entre diferentes versiones de especificaciones (generalmente W3C versus WHATWG). Por ejemplo, una versión puede tener una función que aparece como obsoleta, mientras que la otra no. +En tales casos, considere cuál es la realidad, es decir, considere qué están haciendo realmente los navegadores y escriba una nota "importante" para resumir ese último estado. +Por ejemplo, a partir de enero de 2019, el atributo global [`inputmode`](/es/docs/Web/HTML/Global_attributes/inputmode) tiene un conflicto, que se resumió así: -> **Nota:** Para los propósitos de esta discusión, la palabra "elemento" se usa para significar cualquier cosa que pueda ser parte de una especificación: un elemento o un atributo de un elemento, una interfaz o cualquier método individual, propiedad u otro miembro de una interfaz, etcétera. - -- Si el elemento _nunca_ se implementó en una versión de lanzamiento de _cualquier_ navegador, incluso detrás de una preferencia o marca, simplemente elimina cualquier referencia al elemento de la documentación. - - - Si el elemento tiene páginas de documentación que describen solo ese elemento (como {{domxref("RTCPeerConnection.close()")}}), elimina esa página. Si el elemento eliminado es una interfaz, esto significa eliminar también las subpáginas que describen las propiedades y los métodos de esa interfaz. - - Elimina el elemento de cualquier lista de propiedades, atributos, métodos, etc. Para los métodos de una interfaz, eso significa eliminarlo de la sección "Métodos" en la página de descripción general de la interfaz, por ejemplo. - - Busca en el texto de la página de descripción general para esa interfaz, elemento, etc., cualquier referencia al elemento eliminado. Elimina esas referencias, asegurándote de no dejar extraños problemas gramaticales u otros problemas con el texto. Esto puede significar no solo borrar palabras, sino reescribir una oración o párrafo para que tenga más sentido. También puede significar eliminar secciones enteras de contenido si la descripción del uso del elemento es extensa. - - Del mismo modo, busca cualquier discusión sobre el tema en las guías y tutoriales sobre la API o tecnología relevante. Elimina esas referencias, asegurándote de no dejar extraños problemas gramaticales u otros problemas con el texto. Esto puede significar no solo borrar palabras, sino reescribir una oración o párrafo para que tenga más sentido. También puede significar eliminar secciones enteras de contenido si la descripción del uso del elemento es extensa. - - Busca en MDN referencias al elemento eliminado, en caso de que haya discusiones en otro lugar. Es poco probable que las haya, ya que si nunca se implementó, es poco probable que se discuta ampliamente. Elimina también esas menciones. - - Si el [repositorio de datos de compatibilidad del navegador](https://github.com/mdn/browser-compat-data) contienen datos de los elementos eliminados, elimina esos objetos del código JSON y envía una SE con ese cambio, explicando por qué en el mensaje de confirmación y la descripción de la SE. Ten cuidado de no romper la sintaxis JSON mientras haces esto. - -- Si el elemento se implementó en cualquier versión de lanzamiento de uno o más navegadores, pero _solo_ detrás de una preferencia o marca, no elimines el elemento de la documentación inmediatamente. En su lugar, marca el artículo como obsoleto de la siguiente manera: - - - Si el elemento tiene páginas de documentación que describen solo ese elemento (como {{domxref("RTCPeerConnection.close()")}}), agrega la macro [`deprecated_header`](https://github.com/mdn/yari/tree/main/kumascript/macros/deprecated_header.ejs) en la parte superior de la página y agrega la etiqueta `Deprecated` a la lista de etiquetas de la página. - - En la página de descripción general del elemento, la interfaz o la API, busca la lista de elementos que incluyan el elemento que se ha eliminado de la especificación y agrega la macro [`deprecated_inline`](https://github.com/mdn/yari/tree/main/kumascript/macros/deprecated_inline.ejs) después del nombre del elemento en esa lista. - - Busca en el texto informativo de la página de descripción general de esa interfaz, elemento, etc., cualquier referencia al elemento eliminado. Agrega cuadros de advertencia en los lugares apropiados con texto del tipo "\[lo que sea] se ha eliminado de la especificación y pronto se eliminará de los navegadores. Consulta \[enlace a la página] para conocer una nueva forma de hacer esto." - - Del mismo modo, busca cualquier discusión sobre el tema en las guías y tutoriales sobre la API o tecnología relevante. Agrega advertencias similares. - - Busca en MDN referencias al elemento eliminado, en caso de que haya discusiones en otro lugar. Agrega también cuadros de advertencia similares allí. - - En algún momento en el futuro, se puede tomar la decisión de eliminar el elemento de la documentación; Normalmente no hacemos esto, pero si el artículo no se utilizó o no fue interesante, podemos decidir hacerlo. - - Actualiza cualquier entrada relevante en el [repositorio de datos de compatibilidad del navegador](https://github.com/mdn/browser-compat-data) para reflejar la obsolescencia de los elementos afectados. - -- Si el elemento se implementó en una o más versiones de publicaciones de navegadores, sin que sea necesario cambiar una preferencia o una marca, marca el elemento como obsoleto, de la siguiente manera: - - - Si el elemento tiene páginas de documentación que describen solo ese elemento (como {{domxref("RTCPeerConnection.close()")}}), agrega la macro [`deprecated_header`](https://github.com/mdn/yari/tree/main/kumascript/macros/deprecated_header.ejs) en la parte superior de la página y agrega la etiqueta `Deprecated` a la lista de etiquetas de la página. - - En la página de descripción general del elemento, la interfaz o la API, busca la lista de elementos que incluyan el elemento que se ha eliminado de la especificación y agrega la macro [`deprecated_inline`](https://github.com/mdn/yari/tree/main/kumascript/macros/deprecated_inline.ejs) después del nombre del elemento en esa lista. - - Busca en el texto informativo de la página de descripción general de esa interfaz, elemento, etc., cualquier referencia al elemento eliminado. Agrega recuadros de advertencia en los lugares apropiados con texto del tipo "\[lo que sea] se ha eliminado de la especificación y está obsoleto. Es posible que se elimine de los navegadores en el futuro, por lo que no debes usarlo. Consulta \[enlace a la página] para conocer una nueva forma de hacer esto." - - Del mismo modo, busca cualquier discusión sobre el tema en las guías y tutoriales sobre la API o tecnología relevante. Agrega advertencias similares. - - Busca en MDN referencias al elemento eliminado, en caso de que haya discusiones en otro lugar. Agrega también cuadros de advertencia similares allí. - - Es poco probable que estos elementos se eliminen de la documentación pronto, si es que alguna vez lo hacen. Sin embargo, es posible que parte o todo el material se mueva a la sección [Archivo](/es/docs/Archive) del sitio. - - Actualiza todas las entradas relevantes en el [repositorio de datos de compatibilidad del navegador](https://github.com/mdn/browser-compat-data) para reflejar la obsolescencia de los elementos afectados. - -Utiliza el sentido común con la redacción de los mensajes de advertencia y otros cambios en el texto sugeridos por las pautas anteriores. Los diferentes elementos requerirán una redacción y un manejo diferentes de la situación. En caso de duda, no dudes en pedir consejo en la [sala del chat de Docs Web de MDN](https://chat.mozilla.org/#/room/#mdn:mozilla.org) en [Matrix](https://wiki.mozilla.org/Matrix), o en el [foro de debate de Docs Web de MDN](https://discourse.mozilla.org/c/mdn). - -### Copiar contenido dentro de MDN - -A veces, necesitas reutilizar el mismo texto en varias páginas (o deseas usar el contenido de una página como plantilla para otra página). Tienes tres opciones: - -- Si deseas copiar una página completa: - - 1. Mientras visualizas la página que deseas copiar, en el menú **Avanzado** (engrane), elige [**Clona esta página**](/es/docs/MDN/Contribute/Creating_and_editing_pages#Clone_of_an_existing_page). Esto abre la interfaz de usuario del editor para una nueva página, con el contenido de la página clonada ya poblada. - 2. Introduce un **título** y un **`slug`** nuevo para la página clonada. - 3. Edita el contenido de la página según sea necesario y guárdalo como usualmente lo haces. - -- Si deseas copiar solo una parte de una página, **no solo visites la página y la copies**. Esto introduce bits adicionales de HTML no deseados en la página destino, y alguien tendrá que limpiar eso, tú u otro editor. Nadie quiere eso. Para copiar parte de una página MDN a otra página: - - 1. En la página fuente, haz clic en el botón **Editar** en la página de fuente. - 2. **Copia el contenido que deseas reutilizar desde la interfaz de usuario del editor.** - 3. Haz clic en **Descartar** para salir de la interfaz de usuario del editor de esa página. - 4. Abre la interfaz de usuario del editor de la página donde deseas pegar. - 5. Pega el contenido del portapapeles. - - > **Nota:** Chrome generalmente no incluye las clases aplicadas al contenido al copiar y pegar documentos en nuestro editor. Debes revisar el contenido después de hacer esto y volver a aplicar los estilos perdidos. Checa las tablas, cuadros de sintaxis, resaltado de sintaxis y secciones ocultas de contenido en particular. - -- A veces, literalmente, deseas utilizar el mismo contenido en muchas páginas. En este caso, es mejor que coloques el contenido en una página y luego uses la macro [`Page`](https://github.com/mdn/yari/tree/main/kumascript/macros/Page.ejs) para trasladar el material de una página a otra. De esta forma, siempre que se actualice el texto de la página fuente, la página de destino también se actualizará (es decir, esto sucederá en una actualización forzada o cuando la página destino pase por una reconstrucción programada). - -#### Copiar contenido de otro lugar - -A menudo, hay contenido útil sobre un tema en algún lugar de la web además de MDN. Sin embargo, copiar dicho contenido puede plantear dificultades, tanto legales como técnicas. - -En el nivel técnico, los motores de búsqueda suelen penalizar a un sitio en su clasificación por reproducir contenido disponible en otros lugares. Por lo tanto, es preferible tener contenido original en MDN, para mejorar la clasificación del contenido de MDN en los motores de búsqueda. Puedes vincular al contenido existente de MDN. - -A nivel legal, debes estar autorizado para contribuir con el contenido, y debes tener licencia y atribución de una manera que sea compatible con [licencia de MDN](/es/docs/MDN/About#Copyrights_and_licenses). - -- **Si creaste el contenido existente** (para tus propios fines y no como trabajo por encargo) y estás dispuesto a contribuir a MDN con la licencia de MDN, este es el caso más fácil y estás libre de contribuir con el contenido. -- **Si los derechos de autor del contenido pertenecen a otra persona**, debes tener licencia y atribuir de manera compatible con la licencia de MDN. A menudo, no es fácil para alguien que no es abogado determinar qué licencias son compatibles. Para estar seguro, comunícate con un miembro del [equipo de personal de MDN](https://wiki.mozilla.org/MDN#Staff_Team), quien puede consultar al equipo legal de Mozilla para obtener orientación si es necesario . - -#### Cómo comunicar un conflicto de especificaciones - -Ten en cuenta que a veces (pero rara vez) hay un conflicto entre diferentes versiones de especificaciones (generalmente W3C versus WHATWG), p. ej. una versión puede tener una característica listada como obsoleta, mientras que la otra no. En tales casos, considera cuál es la realidad, es decir, qué están haciendo los navegadores, y escribe una nota "importante" para resumir ese último estado. Por ejemplo, a enero de 2019, el atributo global [`inputmode`](/es/docs/Web/HTML/Global_attributes/inputmode) tiene un conflicto, que se resumió al igual que: - -> **Advertencia:** **Conflicto de especificaciones**: La [lista de especificaciones de WHATWG `inputmode`](https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode), y los navegadores modernos están trabajando para admitirlo. Sin embargo, la [especificación W3C HTML 5.2](https://www.w3.org/TR/html52/index.html#contents) ya no la incluye (es decir, la marca como desaprobada). Debes considerar que la definición del WHATWG es correcta, hasta que se logre un consenso. +> **Advertencia:** Conflicto de especificación: La especificación WHATWG enumera [`inputmode`](https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode) y los navegadores modernos están trabajando para soportarlo. +> La [especificación HTML 5.2 del W3C](https://html.spec.whatwg.org/multipage/index.html#contents), sin embargo, ya no la enumera (es decir, la marca como obsoleta). +> Debe considerar la definición de WHATWG como correcta, hasta que se llegue a un consenso. From 7b47b10efb42ba405a3673422fdf9fa5d305c1bd Mon Sep 17 00:00:00 2001 From: du33169 <46591250+du33169@users.noreply.github.com> Date: Wed, 20 Sep 2023 12:19:49 +0800 Subject: [PATCH 408/600] fix(typo): scrpit -> script (#15963) --- .../add-ons/webextensions/your_second_webextension/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/mozilla/add-ons/webextensions/your_second_webextension/index.md b/files/zh-cn/mozilla/add-ons/webextensions/your_second_webextension/index.md index 12654a43518381..1f62bfbead99bc 100644 --- a/files/zh-cn/mozilla/add-ons/webextensions/your_second_webextension/index.md +++ b/files/zh-cn/mozilla/add-ons/webextensions/your_second_webextension/index.md @@ -311,7 +311,7 @@ browser.tabs .catch(reportExecuteScriptError); ``` -从 96 行开始。只要弹出窗加载完，popup scrpit 就会使用 [`browser.tabs.executeScript()`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript) API 在活跃标签页执行 content script。如果执行 content scrpit 成功，content script 会在页面中一直保持，直到标签被关闭或者用户导航到其他页面。 +从 96 行开始。只要弹出窗加载完，popup script 就会使用 [`browser.tabs.executeScript()`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript) API 在活跃标签页执行 content script。如果执行 content script 成功，content script 会在页面中一直保持，直到标签被关闭或者用户导航到其他页面。 `browser.tabs.executeScript()`调用失败的常见原因是你不能在所有页面执行 content scripts。例如，你不能在特权浏览器页面执行，像 about:debugging，你也不能在[addons.mozilla.org](https://addons.mozilla.org/)域执行。如果调用失败，`reportExecuteScriptError()`会隐藏`"popup-content"` `
    `，并展示`"error-content"` `
    `, 然后打印一个错误到[控制台](/zh-CN/Add-ons/WebExtensions/Debugging)。 From 3c70ec060c53ccf075fb1d9d1e2b4dd544917de0 Mon Sep 17 00:00:00 2001 From: Fina <42113148+BSPR0002@users.noreply.github.com> Date: Wed, 20 Sep 2023 13:22:04 +0800 Subject: [PATCH 409/600] zh-cn: init the translation of "CycleTracker: Service workers" (#15936) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: A1lo --- .../cycletracker/service_workers/index.md | 401 ++++++++++++++++++ 1 file changed, 401 insertions(+) create mode 100644 files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/service_workers/index.md diff --git a/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/service_workers/index.md b/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/service_workers/index.md new file mode 100644 index 00000000000000..2344b1ca7dcbad --- /dev/null +++ b/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/service_workers/index.md @@ -0,0 +1,401 @@ +--- +title: 经期跟踪器：Service worker +short-title: Service worker +slug: Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers +--- + +{{PWASidebar}} + +{{PreviousMenu("Web/Progressive_web_apps/Tutorials/CycleTracker/Manifest_file", "Web/Progressive_web_apps/Tutorials/CycleTracker")}} + +目前为止，我们已经为经期跟踪器编写了 HTML、CSS 和 JavaScript，添加了清单文件用于定义颜色、图标、URL 以及其他的应用特性。我们已经有了一个能运行的 Web 应用！但它还不是一个 PWA。在这一章节，我们将要编写将我们的功能完整、能够作为独立应用分发并且能无缝地在离线状态下运行的 Web 应用转化为 PWA 所需的 JavaScript 脚本。 + +如果你还没有完成到这一步，请复制这些 [HTML](https://github.com/mdn/pwa-examples/tree/master/cycletracker/manifest_file/index.html)、[CSS](https://github.com/mdn/pwa-examples/tree/master/cycletracker/manifest_file/style.css)、[JavaScript](https://github.com/mdn/pwa-examples/tree/master/cycletracker/manifest_file/app.js)，还有[清单](https://github.com/mdn/pwa-examples/tree/master/cycletracker/manifest_file/cycletracker.json) JSON 文件的内容，并分别按照以下文件名保存：`index.html`、`styles.css`、`app.js` 以及 `cycletracker.json`。 + +在本章节，我们要创建 `sw.js`——service worker 脚本，用于将我们的 Web 应用转化成 PWA。我们已经有了一个 JavaScript 文件——在 HTML 文件的最后一行里名为 `app.js` 的那一个。这个 JavaScript 脚本提供了全部标准 Web 应用特性的功能。我们并不会像使用 `app.js` 那样通过 {{HTMLElement("script")}} 元素的 `src` 属性来调用 `sw.js`，而是通过注册 service worker 来建立它与 Web 应用的联系。 + +在本课程的最后，你将会拥有一个功能完整的 PWA——一个能够被完整安装的、即使用户处于离线状态也能运行的逐步增强的 Web 应用。 + +## Service worker 的职责 + +Service worker 能够让应用离线运行，并且时刻确保应用是最新的。为了能出色地做到这点，service worker 应当包含以下信息： + +- 版本号（或者其他标识）。 +- 缓存资源的列表。 +- 缓存版本的名称。 + +Service worker 还需要负责： + +- 在应用被安装时安装缓存资源。 +- 根据需要更新自身和其他的应用文件。 +- 移除不会再被用到的缓存文件。 + +我们通过响应以下三种 service worker 事件来实现这些任务： + +- [`fetch`](/zh-CN/docs/Web/API/ServiceWorkerGlobalScope/fetch_event) 事件、 +- [`install`](/zh-CN/docs/Web/API/ServiceWorkerGlobalScope/install_event) 事件，以及 +- [`activate`](/zh-CN/docs/Web/API/ServiceWorkerGlobalScope/activate_event) 事件。 + +### 版本号 + +PWA 一但在用户的机器上被安装，唯一通知浏览器有要检索的更新文件的方法就是对 service worker 作出修改。如果 PWA 的其他资源发生了改动——比如 HTML 更新了、CSS 里的 bug 被修复了、`app.js` 添加了新函数、一张图片被压缩了以减少文件体积，等等——你安装的 PWA 的 service worker 是不会知道它需要下载更新资源的。只有 service worker 被改动了，PWA 才会知道它也许该更新缓存了，然后去发起更新的任务。 + +虽然修改任意字符在技术上都足以达成，但 PWA 的最佳做法是创建一个按顺序更新的版本号常量用以指示文件的更新。即使 service worker 本身没有其他任何的改动，也应当以更新版本号（或者日期）这种较为正式的方式对 service worker 做出修改，这也是给开发人员提供一种辨别应用版本的方法。 + +#### 任务 + +新建一个包含版本号的 JavaScript 文件： + +```js +const VERSION = "v1"; +``` + +将文件保存为 `sw.js`。 + +### 离线资源列表 + +为了能有优良的离线体验，缓存文件列表应当包含 PWA 离线时需要使用的所有资源。即使清单文件里可能会罗列出一大堆各种大小的图标，应用缓存也只需要包含应用在离线模式下需要使用的资源。 + +```js +const APP_STATIC_RESOURCES = [ + "/", + "/index.html", + "/styles.css", + "/app.js", + "/icon-512x512.png", +]; +``` + +你不需要把在各个不同操作系统和设备上使用的各个图标都包含进列表里。而是应该把应用使用的所有图片包含进来，包括在应用启动缓慢时用户可能会看见的应用启动页面或者提示用户“你需要连接到互联网以获得完整体验”的页面所使用的素材。 + +不要把 service worker 文件包含到缓存资源列表里。 + +#### 任务 + +向 `sw.js` 添加用于经期跟踪器 PWA 的缓存资源列表。 + +#### 示例方案 + +我们包括了在本教程的其他章节中所创建的经期跟踪器在离线状态下运作所需的静态资源。我们的 `sw.js` 文件目前是这样的： + +```js +const VERSION = "v1"; + +const APP_STATIC_RESOURCES = [ + "/", + "/index.html", + "/styles.css", + "/app.js", + "/cycletrack.json", + "/icons/wheel.svg", +]; +``` + +我们包括了 `wheel.svg` 图标，以备你要增强 PWA 的 UI 时使用，比如在没有经期数据时显示 logo，虽然我们的应用目前并没有使用它。 + +### 应用缓存名称 + +我们有了版本号，也有了需要缓存的文件。在缓存文件之前，我们需要创建一个在存储应用的静态资源时需要使用的缓存名称。这个缓存名称应当被版本化，以确保在应用更新时可以创建新的缓存同时删除旧的缓存。 + +#### 任务 + +使用 `VERSION` 版本号来创建一个版本化的 `CACHE_NAME` 缓存名，作为常量添加到 `sw.js`。 + +#### 示例方案 + +我们将缓存命名为 `period-tracker-` 后跟 `VERSION` 版本号。鉴于我们的常量声明都是单行的，为了方便阅读，我们将其放在了资源数组常量的前面。 + +```js +const VERSION = "v1"; +const CACHE_NAME = `period-tracker-${VERSION}`; + +const APP_STATIC_RESOURCES = [ ... ]; +``` + +我们成功声明了我们的常量：一个唯一的标识符、数组形式的离线资源列表以及随版本号更新的应用缓存名称。现在，让我们把注意力转向安装、更新以及删除无用的缓存资源。 + +### 在 PWA 安装过程中保存缓存 + +当用户安装 PWA 或者只是单纯的访问带有 service worker 的网站时，会在 service worker 的作用域触发一个 `install` 事件。我们想要监听这个事件，在安装期间用 PWA 的静态资源填充缓存。每当 service worker 的版本更新，浏览器都会安装新的 service worker 并触发安装事件。 + +`install` 事件会在应用第一次被安装或者浏览器检测到有新版本的 service worker 时触发。当旧的 service worker 将要被新的替换时，旧的 service worker 仍然会作为 PWA 的 service worker，直到新的 service worker 被激活。 + +全局变量 [`caches`](/zh-CN/docs/Web/API/caches) 只在安全上下文中可用，它会返回一个与当前上下文关联的 {{domxref("CacheStorage")}} 对象。{{domxref("CacheStorage.open()")}} 方法会返回一个 {{jsxref("Promise")}} 对象，可以兑现一个名称与作为参数传递的名称相符的 {{domxref("Cache")}} 对象。 + +{{domxref("Cache.addAll()")}} 方法接收一个 URL 数组作为参数，然后会检索这些 URL，将它们的响应添加到指定的缓存中。[`waitUntil()`](/zh-CN/docs/Web/API/ExtendableEvent/waitUntil) 方法可以告诉浏览器在 Promise 被敲定前，工作仍在进行中，浏览器如果想让工作能够完成就不应该终止 service worker。浏览器负责执行并在必要时终止 service worker，`waitUntil` 方法可用于请求浏览器在任务执行时不要终止 service worker。 + +```js +self.addEventListener("install", (e) => { + e.waitUntil((async () => { + const cache = await caches.open("cacheName_identifier"); + cache.addAll([ + "/", + "/index.html" + "/styles.css" + "/app.js" + ]); + })() + ); +}); +``` + +#### 任务 + +添加一个安装事件监听器，用于检索并存储 `APP_STATIC_RESOURCES` 列表中的文件到名为 `CACHE_NAME` 的缓存中。 + +#### 示例方案 + +```js +self.addEventListener("install", (event) => { + event.waitUntil( + (async () => { + const cache = await caches.open(CACHE_NAME); + cache.addAll(APP_STATIC_RESOURCES); + })(), + ); +}); +``` + +### 更新 PWA 并删除旧缓存 + +正如上文提到的，当现有的 service worker 将要被新的替换时，现有的 service worker 仍然会作为 PWA 的 service worker，直到新的 service worker 被激活。我们使用 `activate` 事件来删除旧的缓存以避免空间被耗尽。我们对被命名的 {{domxref("Cache")}} 对象进行迭代，删除除了目前在使用外的全部缓存，然后将 service worker 设为 PWA 的 [`controller`](/zh-CN/docs/Web/API/ServiceWorkerContainer/controller)。 + +我们监听当前 service worker 全局作用域的 [`activate`](/zh-CN/docs/Web/API/ServiceWorkerGlobalScope/activate_event) 事件。 + +我们获取现有的命名缓存，使用 {{domxref("CacheStorage.keys()")}} 方法（重新通过全局 {{domxref("caches")}} 属性访问 `CacheStorage`），它会返回一个 {{jsxref("Promise")}} 对象，可兑现一个包含对应到按创建顺序排列的命名 {{domxref("Cache")}} 对象的字符串的数组。 + +我们使用 [`Promise.all()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) 方法来迭代命名缓存 Promise 列表。`all()` 方法接收一个可迭代的 Promise 列表，并返回单个 `Promise`。对于列表中的每个命名缓存，检查其是否是当前活动的缓存。如果不是，用 `Cache` 的 [`delete()`](/zh-CN/docs/Web/API/Cache/delete) 方法删除它。 + +最后一行 `await clients.claim()` 使用 [`Clients`](/zh-CN/docs/Web/API/Clients) 接口的 [`claim()`](/zh-CN/docs/Web/API/Clients/claim) 方法来启用我们的 service worker 以将其设为我们客户端的控制器，“客户端”指正在运行的一个 PWA 实例。`claim()` 方法用于使 service worker 接管控制其作用域内的所有客户端。这样，作用域内已加载的客户端就不需要重新加载。 + +```js +self.addEventListener("activate", (event) => { + event.waitUntil( + (async () => { + const names = await caches.keys(); + await Promise.all( + names.map((name) => { + if (name !== CACHE_NAME) { + return caches.delete(name); + } + }), + ); + await clients.claim(); + })(), + ); +}); +``` + +#### 任务 + +将上述 `activate` 事件监听器添加至你的 `sw.js` 文件。 + +### fetch 事件 + +我们可以利用 [`fetch`](/zh-CN/docs/Web/API/ServiceWorkerGlobalScope/fetch_event) 事件的优势，在用户处于在线状态时阻止已安装的 PWA 发起请求。监听 fetch 事件使得拦截所有请求并使用缓存的响应内容进行响应而不流经网络变得可能。大多数的应用不需要这样的行为。事实上，许多商业模式出于跟踪和营销目的都希望用户定期发送服务器请求。所以，尽管拦截请求对于某些应用来说是一种反面模式，但为了提高我们的经期跟踪器应用的隐私性，我们不希望应用发出不必要的网络请求。 + +鉴于我们的 PWA 只由单一的页面构成，对于页面导航请求，我们返回至 `index.html` 主页面，因为没有其他页面，我们也不想请求总是发送到服务器。如果 Fetch API 的 [`Request`](/zh-CN/docs/Web/API/Request) 的只读属性 [`mode`](/zh-CN/docs/Web/API/Request/mode) 值为 `navigate`，意味着它在查找一个 Web 页面，我们使用 FetchEvent 的 [`respondWith()`](/zh-CN/docs/Web/API/FetchEvent/respondWith) 方法来阻止浏览器默认的 fetch 处理，使用 [`caches.match()`](/zh-CN/docs/Web/API/CacheStorage/match) 方法来提供我们自己的响应 Promise。 + +对于其他所有的请求模式，我们则按照在 [install 事件响应](#在_pwa_安装过程中保存缓存)里的那样打开缓存，向同样的 `match()` 方法传递事件请求。它会检查请求是否是已存储的 {{domxref("Response")}} 的键。如果是，我们返回缓存的响应，如果不是，我们返回一个 [404 状态码](/zh-CN/docs/Web/HTTP/Status/404)作为响应。 + +使用 [`Response()`](/zh-CN/docs/Web/API/Response/Response) 构造器，传递为 `null` 的主体以及一个 `404` 的状态码作为选项，并不意味着我们的 PWA 出错了。相反，我们需要的所有东西应该都已经在缓存里了，如果没有，我们也不用去服务器解决这个小问题。 + +```js +self.addEventListener("fetch", (event) => { + // 当在查找 HTML 页面时 + if (event.request.mode === "navigate") { + // 返回到 index.html 页面 + event.respondWith(caches.match("/")); + return; + } + + // 对于其他所有请求模式 + event.respondWith( + (async () => { + const cache = await caches.open(CACHE_NAME); + const cachedResponse = await cache.match(event.request.url); + if (cachedResponse) { + // 如果有缓存的响应可用就将其返回 + return cachedResponse; + } else { + // 响应 HTTP 404 状态码 + return new Response(null, { status: 404 }); + } + })(), + ); +}); +``` + +## 完善 service worker 文件 + +你的 `sw.js` 文件现在应该和下面的 JavaScript 脚本相似。要注意，当 `APP_STATIC_RESOURCES` 数组中的资源列表发生了任何改动，我们唯一需要在这个 service worker 中更新的常量或功能就是 `VERSION` 的值。 + +```js +// 缓存的版本 +const VERSION = "v1"; + +// 缓存的名称 +const CACHE_NAME = `period-tracker-${VERSION}`; + +// 使应用运作所需的静态资源 +const APP_STATIC_RESOURCES = [ + "/", + "/index.html", + "/app.js", + "/styles.css", + "/icons/wheel.svg", +]; + +// 在安装时缓存缓存静态资源 +self.addEventListener("install", (event) => { + event.waitUntil( + (async () => { + const cache = await caches.open(CACHE_NAME); + cache.addAll(APP_STATIC_RESOURCES); + })(), + ); +}); + +// 在被激活时删除旧的缓存 +self.addEventListener("activate", (event) => { + event.waitUntil( + (async () => { + const names = await caches.keys(); + await Promise.all( + names.map((name) => { + if (name !== CACHE_NAME) { + return caches.delete(name); + } + }), + ); + await clients.claim(); + })(), + ); +}); + +// 在 fetch 时，拦截服务器请求并用缓存的响应内容进行响应而不流经网络 +self.addEventListener("fetch", (event) => { + // 作为一个单页应用，总是将应用定向到缓存的主页面 + if (event.request.mode === "navigate") { + event.respondWith(caches.match("/")); + return; + } + + // 对于其他所有请求，先找缓存，再去网络 + event.respondWith( + (async () => { + const cache = await caches.open(CACHE_NAME); + const cachedResponse = await cache.match(event.request.url); + if (cachedResponse) { + // 如果有缓存的响应可用就将其返回 + return cachedResponse; + } else { + // 如果资源不在缓存中，返回 404 + return new Response(null, { status: 404 }); + } + })(), + ); +}); +``` + +当更新 service worker 本身时，不需要更新 VERSION 常量，因为 service worker 脚本内容的任何更改都会触发浏览器去安装新的 service worker。但不论如何，更新版本号是方便开发人员（也包括你自己）的好习惯。可以在浏览器中通过[在应用程序工具中检查缓存的名称](#使用开发者工具)（或在源代码工具）来查看当前正在运行的是哪一个版本的 service worker。 + +**备注**：在对应用的任何资源（包括 CSS、HTML、JS 代码和图像素材）做出更改后更新版本号是非常重要的。版本号或者对 service worker 文件所做的任何更改是唯一为你的用户强制更新应用的方式。 + +## 注册 service worker + +现在我们的 service worker 脚本已经完成了，我们需要注册 service worker。 + +我们先从使用检查全局 [`navigator`](/zh-CN/docs/Web/API/Navigator) 对象上是否存在 [`serviceWorker`](/zh-CN/docs/Web/API/ServiceWorker) 属性的[特性检测](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection#特性检测的概念)手段来检查浏览器是否支持 [Service Worker API](/zh-CN/docs/Web/API/Service_Worker_API) 开始： + +```html + +``` + +如果这个属性受支持，我们就可以使用 service worker API 的 [`ServiceWorkerContainer`](/zh-CN/docs/Web/API/ServiceWorkerContainer) 接口的 [`register()`](/zh-CN/docs/Web/API/ServiceWorkerContainer/register) 方法。 + +```html + +``` + +虽然上述内容已经满足了经期跟踪器应用的需要，但是 `register()` 方法返回的是一个兑现 {{domxref("ServiceWorkerRegistration")}} 对象的 {{jsxref("Promise")}}。为了使应用更加健壮，最好对注册进行错误检查： + +```js +if ("serviceWorker" in navigator) { + navigator.serviceWorker.register("sw.js").then( + (registration) => { + console.log("Service worker registration successful:", registration); + }, + (error) => { + console.error(`Service worker registration failed: ${error}`); + }, + ); +} else { + console.error("Service workers are not supported."); +} +``` + +### 任务 + +打开 `index.html`，在 `app.js` 脚本之后、被 `` 标签闭合之前添加以下 {{HTMLElement("script")}} 元素。 + +```html + + +``` + +你可以体验功能完整的 [CycleTracker 月经周期跟踪 Web 应用](https://mdn.github.io/pwa-examples/cycletracker/service_workers)，并可以在 GitHub 上查看该 [Web 应用的源代码](https://github.com/mdn/pwa-examples/tree/master/cycletracker/service_workers)。是的，它能运行，并且现在正式成为了一个 PWA！ + +## 调试 service worker + +出于我们安装 service worker 的方式的因素，一旦其被注册，所有的请求都将会从缓存中拉取，而不是加载新内容。在开发的时候，你会频繁地编辑你的代码，你可能会希望定期甚至是在每一次保存后在浏览器中测试你的编辑。 + +### 通过更新版本号并进行强重置 + +要获得新的缓存，你可以更改[版本号](#版本号)然后进行一次浏览器强刷新。进行强刷新的方式取决于你的浏览器和操作系统： + +- Windows：Ctrl+F5，Shift+F5 或 Ctrl+Shift+R。 +- MacOS：Shift+Command+R。 +- MacOS 上的 Safari：按 Option+Command+E 清空缓存，然后按 Option+Command+R。 +- 移动设备：前往浏览器（Android）或操作系统（Samsung、iOS）设置，在高级设置下找到浏览器（iOS）或站点数据（Android、Samsung）网站设置，然后删除经期跟踪器的数据，再重新加载页面。 + +### 使用开发者工具 + +你可能会不想每次保存都要更新版本号。在你准备好将你的 PWA 的新版本投入生产并为所有人提供你的 PWA 的新版本前，你可以用注销 service worker 的方法来代替在每次保存时更改版本号。 + +你可以通过在[浏览器开发者工具](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)中点击 `unregister` 按钮来注销一个 service worker。强刷新页面将会重新注册 service worker 并建立新的缓存。 + +![带有停止和注销 service worker 按钮的 Firefox 开发者工具应用程序面板](firefox_sw.jpg) + +在某些开发者工具里，你可以手动注销一个 service worker，或者你可以选择 service worker 的“重新加载时更新”选项来设置当开发者工具打开时，每次重新加载都重置并重新激活 service worker。还有一个选项可以绕过 service worker 从网络加载资源。这个面板包含了本教程中我们未涵盖的特性，但会对你在创建包含[同步](/zh-CN/docs/Web/Progressive_web_apps/Guides/Offline_and_background_operation#周期性后台同步)和[推送消息](/zh-CN/docs/Web/Progressive_web_apps/Guides/Offline_and_background_operation#推送消息)等特性的更高级的 PWA 时有所帮助，这些内容都涵盖在了[离线和后台操作](/zh-CN/docs/Web/Progressive_web_apps/Guides/Offline_and_background_operation)中。 + +![Edge 开发者工具显示针对 service worker 的应用程序面板集](edge_sw.jpg) + +开发者工具的应用程序面板中的 service worker 窗口，提供了访问包含浏览器所有已注册的 service worker 的列表的弹出窗口的链接，不只是在当前标签页中打开的应用的 service worker。列表中的每个 service worker 都有单独的停止、启动或注销按钮。 + +![localhost:8080 存在两个 service worker，它们能在列表中被注销](edge_sw_list.jpg) + +换句话说，当你在处理你的 PWA 时，你不需要更新每个应用视图的版本号。但是，当你做完了所有的改动后，记得在分发你的 PWA 的新版本前更新 VERSION 的值。如果你忘了，那些已经安装了你的应用又或者只是访问了你的线上 PWA 但是没有安装的人，是永远看不到你的改动的！ + +## 我们完成了！ + +PWA 的核心是一种可以被安装并可以被逐步增强至可以离线运行的 Web 应用。我们创建了一个功能完整的 Web 应用，然后添加了两项特性——一个清单文件和一个 service worker——将其转化为 PWA 所需要的东西。如果你想和其他人分享你的应用，请将其通过安全连接提供。或者，如果你只想自己使用经期跟踪器，[创建一个本地部署环境](/zh-CN/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Secure_connection)，[安装 PWA](/zh-CN/docs/Web/Progressive_web_apps/Guides/Installing)，然后尽情享受吧！一经安装，你就不需要再运行 localhost 了。 + +恭喜！ + +{{PreviousMenu("Web/Progressive_web_apps/Tutorials/CycleTracker/Manifest_file", "Web/Progressive_web_apps/Tutorials/CycleTracker")}} From 4d329bcb36f86e51b26d3806eb8a002eb2eec19b Mon Sep 17 00:00:00 2001 From: hanyujie2002 <84226578+hanyujie2002@users.noreply.github.com> Date: Wed, 20 Sep 2023 16:48:12 +0800 Subject: [PATCH 410/600] =?UTF-8?q?zh-cn:=20align=20the=20translation=20of?= =?UTF-8?q?=20"identity"=20to=20"=E6=A0=87=E8=AF=86"=20(#15966)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tutorials/cycletracker/manifest_file/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md b/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md index 31bc88a4411b9f..9f526a40b79774 100644 --- a/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md +++ b/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md @@ -27,7 +27,7 @@ PWA 清单文件是一个 JSON 文件，它提供了关于该应用程序的特 } ``` -在保存清单文件并从我们的 HTML 文件中链接到它之前，我们可以开发一个仍然简洁但具有更多信息的 JSON 对象，以定义 PWA 的身份、展示和图标。是的，上面的内容会起作用，但让我们讨论一下这个示例中的成员以及其他一些成员，这些成员使清单文件能够更好地定义我们的经期跟踪器 PWA 的外观。 +在保存清单文件并从我们的 HTML 文件中链接到它之前，我们可以开发一个仍然简洁但具有更多信息的 JSON 对象，以定义 PWA 的标识、展示和图标。是的，上面的内容会起作用，但让我们讨论一下这个示例中的成员以及其他一些成员，这些成员使清单文件能够更好地定义我们的经期跟踪器 PWA 的外观。 ## 应用标识 @@ -244,11 +244,11 @@ PWA 需要从应用的 HTML 文档中链接到清单文件。我们已经有一 ![在开发者工具中，左侧面板包含指向清单的链接。右侧显示应用清单文件，文件名称是一个指向 JSON 文件的链接。](debugger_devtools.jpg) -Manifest 应用面板提供了清单文件名称作为链接，以及身份、外观和图标部分。 +Manifest 应用面板提供了清单文件名称作为链接，以及标识、外观和图标部分。 -![身份和外观清单成员以及存在的任何值。](manifest_identity_and_presentation.jpg) +![标识和外观清单成员以及存在的任何值。](manifest_identity_and_presentation.jpg) -支持的清单成员将显示出来，以及所有包含的值。在此截图中，虽然我们没有包括 `orientation` 或 `id` 成员，但它们都被列出来了。应用面板可以用来查看清单成员，甚至可以了解：在这个例子中，我们了解到要指定与当前身份匹配的应用 Id，需要将 `id` 字段设置为“/”。 +支持的清单成员将显示出来，以及所有包含的值。在此截图中，虽然我们没有包括 `orientation` 或 `id` 成员，但它们都被列出来了。应用面板可以用来查看清单成员，甚至可以了解：在这个例子中，我们了解到要指定与当前标识匹配的应用 Id，需要将 `id` 字段设置为“/”。 ![由于我们没有 service worker，我们的应用不是可安装的 PWA。](manifest_installability.jpg) From 27a568bbdb06f41d85b907fae41d50cc7b169b59 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Wed, 20 Sep 2023 19:03:00 +0900 Subject: [PATCH 411/600] [ko] revise `web/javascript/inheritance_and_the_prototype_chain` (#15090) --- .../index.md | 937 +++++++++++------- 1 file changed, 560 insertions(+), 377 deletions(-) diff --git a/files/ko/web/javascript/inheritance_and_the_prototype_chain/index.md b/files/ko/web/javascript/inheritance_and_the_prototype_chain/index.md index a41fa55270e3a4..31a08d6836c3e9 100644 --- a/files/ko/web/javascript/inheritance_and_the_prototype_chain/index.md +++ b/files/ko/web/javascript/inheritance_and_the_prototype_chain/index.md @@ -1,552 +1,735 @@ --- title: 상속과 프로토타입 slug: Web/JavaScript/Inheritance_and_the_prototype_chain +l10n: + sourceCommit: 7a58753bcf70d274dfe3a0385e4c3861d0df3dd4 --- {{jsSidebar("Advanced")}} -Java 나 C++ 같이 클래스 기반의 언어를 사용하던 프로그래머는 자바스크립트가 동적인 언어라는 점과 클래스가 없다는 것에서 혼란스러워 한다. (ES2015부터 class 키워드를 지원하기 시작했으나, 문법적인 양념일 뿐이며 자바스크립트는 여전히 프로토타입 기반의 언어다.) +JavaScript는 동적 타입이고 정적 타입이 없기 때문에, (Java 또는 C++와 같은) 클래스 기반 언어에 경험이 있는 개발자에게는 약간 혼란스럽습니다. -상속 관점에서 자바스크립트의 유일한 생성자는 객체뿐이다. 각각의 객체는 \[\[Prototype]]이라는 은닉(private) 속성을 가지는데 자신의 **프로토타입**이 되는 다른 객체를 가리킨다. 그 객체의 프로토타입 또한 프로토타입을 가지고 있고 이것이 반복되다, 결국 `null`을 프로토타입으로 가지는 오브젝트에서 끝난다. null은 더 이상의 프로토타입이 없다고 정의되며, **프로토타입 체인**의 종점 역할을 한다. +상속과 관련하여, JavaScript에는 객체라는 하나의 구조만 있습니다. 각 객체에는 **프로토타입**이라는 다른 객체에 대한 링크를 보유하는 비공개 속성이 있습니다. 그 프로토타입 객체도 자신만의 프로토타입을 가지고 있으며, 프로토타입으로 `null`을 가진 객체에 도달할 때까지 이 연결은 계속됩니다. 정의에 따르면 `null`에는 프로토타입이 없으며, 이 **프로토타입 체인**에서 최종 링크 역할을 합니다. 프로토타입 체인의 모든 구성요소들을 변경하거나 런타임 시 프로토타입을 교체할 수도 있으므로 JavaScript에는 [정적 디스패칭(static dispatching)](https://en.wikipedia.org/wiki/Static_dispatch)과 같은 개념이 없습니다. -종종 이러한 점이 자바스크립트의 약점이라고 지적되지만, 프로토타입적 상속 모델은 사실 고전적인 방법보다 좀 더 강력한 방법이다. 그 말은, 예를 들자면, 프로토타입적 모델에서 고전적인 방식을 구현하는 건 꽤나 사소한 일이지만, 그 반대는 훨씬 더 어려운 일이기 때문이다. +이러한 혼란은 종종 JavaSCript의 약점 중 하나로 생각되어지지만, 프로토타입 상속 모델 자체는 사실 고전적인 모델보다 더 강력합니다. 예를 들어, [classes](/ko/docs/Web/JavaScript/Reference/Classes)가 구현되는 방식인 프로토타입 모델 위에 고전적인 모델을 구축하는 것은 매우 간단합니다. + +클래스는 현재 널리 채택되어 JavaScript의 새로운 패러다임이 되었지만, 클래스는 새로운 상속 패턴을 가져오지 않습니다. 클래스는 대부분의 프로토타입 메커니즘을 추상화하지만, 내부에서 프로토타입이 작동하는 방식을 이해하는 것은 여전히 유용합니다. ## 프로토타입 체인을 이용한 상속 ### 속성 상속 -자바스크립트 객체는 속성을 저장하는 동적인 "가방"과 (**자기만의 속성**이라고 부른다) 프로토타입 객체에 대한 링크를 가진다. 객체의 어떤 속성에 접근하려할 때 그 객체 자체 속성 뿐만 아니라 객체의 프로토타입, 그 프로토타입의 프로토타입 등 프로토타입 체인의 종단에 이를 때까지 그 속성을 탐색한다. +자바스크립트 객체는 속성을 저장하는 동적인 "가방"과 (**자기만의 속성**이라고 부릅니다) 프로토타입 객체에 대한 링크를 가집니다. 객체의 어떤 속성에 접근하려할 때, 그 객체 자체 속성 뿐만 아니라 객체의 프로토타입, 그 프로토타입의 프로토타입 등 프로토타입 체인의 종단에 이를 때까지 그 속성을 탐색합니다. + +> **Note:** ECMAScript 표준은 `someObject.[[Prototype]]`을 객체 `someObject`의 프로토타입을 지시하도록 명시하였습니다. `[[Prototype]]` 내부 슬롯은 각각 {{jsxref("Object.getPrototypeOf()")}}과 {{jsxref("Object.setPrototypeOf()")}} 함수로 접근하고 수정할 수 있습니다. 이것은 자바스크립트의 표준은 아니나 많은 브라우저에 구현되어 사실상의 표준이 된 속성 [`__proto__`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/proto)과 동일합니다. 간결함을 유지하고 혼동을 방지하기 위해 표기법에서 `obj.__proto__`를 사용하지 않고, `obj.[[Prototype]]`을 사용합니다. 이것은 `Object.getPrototypeOf(obj)`에 해당합니다. +> +> 생성자로 사용될 때 주어진 함수에 의해 생성된 객체의 모든 `인스턴스`에 `[[Prototype]]`이 할당되도록 지정하는 함수의 `func.prototype` 속성과 혼동해서는 안 됩니다. [나중 섹션](#constructors)에서 생성자 함수의 `prototype` 속성에 대해 논의할 것입니다. -> **Note:** ECMAScript 표준은 `someObject.[[Prototype]]`을 객체 `someObject`의 프로토타입을 지시하도록 명시하였다. ECMAScript 2015부터 `[[Prototype]]`에 조상 {{jsxref("Object.getPrototypeOf()")}}과 {{jsxref("Object.setPrototypeOf()")}}을 이용하여 접근하기 때문이다. 이것은 자바스크립트의 표준은 아니나 많은 브라우저에 구현되어 사실상의 표준이 된 속성 `__proto__`과 동일하다. +객체의 `[[Prototype]]`을 지정하는 방법에는 여러 가지가 있으며, [나중 섹션](#different_ways_of_creating_and_mutating_prototype_chains)에 나열되어 있습니다. 지금은, 설명을 위해 [`__proto__` 문법](/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer#prototype_setter)을 사용합니다. `{ __proto__: ... }` 구문이 표준이며, 더 이상 사용되지 않는 `obj.__proto__` 접근자와 다르다는 점을 참고해주십시오. +`{ a: 1, b: 2, __proto__: c }`와 같은 객체 리터럴에서, 값 `c`(`null` 또는 다른 객체여야 합니다)는 해당 객체의 `[[Prototype]]`이 됩니다. 반면, `a` 및 `b`와 같은 다른 키는 해당 객체의 *자체 속성*이 됩니다. `[[Prototype]]`은 객체의 "내부 속성"일 뿐이므로, 이 구문은 매우 자연스럽게 읽히는 부분입니다. -아래 코드에는 어떤 속성에 접근 하려할 때 일어나는 상황이다. +다음은 속성에 접근하려고 할 때 발생하는 상황입니다. ```js -// o라는 객체가 있고, 속성 'a' 와 'b'를 갖고 있다고 하자. -let f = function () { - this.a = 1; - this.b = 2; +const o = { + a: 1, + b: 2, + // __proto__는 [[Prototype]]을 설정합니다. + // 여기에 다른 객체 리터럴로 지정되어 있습니다. + __proto__: { + b: 3, + c: 4, + }, }; -let o = new f(); // {a: 1, b: 2} - -// f 함수의 prototype 속성 값들을 추가 하자. -f.prototype.b = 3; -f.prototype.c = 4; -// f.prototype = {b: 3, c: 4}; 라고 하지 마라, 해당 코드는 prototype chain 을 망가뜨린다. -// o.[[Prototype]]은 속성 'b'와 'c'를 가지고 있다. -// o.[[Prototype]].[[Prototype]] 은 Object.prototype 이다. -// 마지막으로 o.[[Prototype]].[[Prototype]].[[Prototype]]은 null이다. -// null은 프로토타입의 종단을 말하며 정의에 의해서 추가 [[Prototype]]은 없다. +// o.[[Prototype]]은 속성 'b'와 'c'를 가지고 있습니다. +// o.[[Prototype]].[[Prototype]] 은 Object.prototype 입니다(무엇을 의미하는지 나중에 설명하겠습니다). +// 마지막으로, o.[[Prototype]].[[Prototype]].[[Prototype]]은 null입니다. +// null은 프로토타입의 종단을 말하며 정의에 의해서 추가 [[Prototype]]은 없습니다. +// 그러면 전체 프로토타입 체인은 다음과 같습니다. // {a: 1, b: 2} ---> {b: 3, c: 4} ---> Object.prototype ---> null console.log(o.a); // 1 -// o는 'a'라는 속성을 가지는가? 그렇다. 속성의 값은 1이다. +// o에 'a' 자체 소유 속성이 있습니까? 네, 그 값은 1입니다. console.log(o.b); // 2 -// o는 'b'라는 속성을 가지는가? 그렇다. 속성의 값은 2이다. -// 프로토타입 역시 'b'라는 속성을 가지지만 이 값은 쓰이지 않는다. 이것을 "속성의 가려짐(property shadowing)" 이라고 부른다. +// o에 'b'라는 자체 소유 속성이 있습니까? 네, 그 값은 2입니다. +// 프로토타입 역시 'b'라는 속성을 가지지만 이 값은 쓰이지 않습니다. 이것을 "속성의 가려짐(property shadowing)" 이라고 부릅니다. console.log(o.c); // 4 -// o는 'c'라는 속성을 가지는가? 아니다. 프로토타입을 확인해보자. -// o.[[Prototype]]은 'c'라는 속성을 가지는가? 가지고 값은 4이다. +// o는 'c'라는 속성을 소유하나요? 아니요, 프로토타입을 확인해보자. +// o.[[Prototype]]은 'c'라는 속성을 소유하나요? 네, 값은 4이다. console.log(o.d); // undefined -// o는 'd'라는 속성을 가지는가? 아니다. 프로토타입을 확인해보자. -// o.[[Prototype]]은 'd'라는 속성을 가지는가? 아니다. 다시 프로토타입을 확인해보자. -// o.[[Prototype]].[[Prototype]]은 null이다. 찾는 것을 그만두자. -// 속성이 발견되지 않았기 때문에 undefined를 반환한다. +// o에 'd' 자체 속성이 있습니까? 아니요, 프로토타입을 확인하세요. +// Is there a 'd' own property on o.[[Prototype]]? No, check its prototype. +// o.[[Prototype]]에 'd' 자체 소유 속성이 있습니까? 아니요, 프로토타입을 확인하세요. +// o.[[Prototype]].[[Prototype]]은 Object.prototype이고, +// 기본적으로 'd' 속성이 없습니다. 프로토타입을 확인하세요. +// o.[[Prototype]].[[Prototype]].[[Prototype]]은 null, 검색을 중지합니다, +// 속성을 찾을 수 없어서, undefined를 반환합니다. ``` -객체의 속성에 값을 지정하면 "자기만의 속성"이 생긴다. 단, [getter or a setter](/en/JavaScript/Guide/Obsolete_Pages/Creating_New_Objects/Defining_Getters_and_Setters)가 적용되는 속성이 상속되는 경우 예외적인 규칙이 적용된다. +객체의 속성에 값을 지정하면 "자기만의 속성"이 생성됩니다. 단, [getter or setter](/ko/docs/Web/JavaScript/Guide/Working_with_objects#defining_getters_and_setters)가 적용되는 속성이 상속되는 경우 예외적인 규칙이 적용됩니다. -### 메소드 상속 - -자바스크립트에 "메소드"라는건 없다. 하지만 자바스크립트는 객체의 속성으로 함수를 지정할 수 있고 속성 값을 사용하듯 쓸 수 있다. 속성 값으로 지정한 함수의 상속 역시 위에서 본 속성의 상속과 동일하다. (단 위에서 언급한 "속성의 가려짐" 대신 "_메소드 오버라이딩, method overriding_" 라는 용어를 사용한다) - -상속된 함수가 실행 될 때, [`this`](/en/JavaScript/Reference/Operators/this) 라는 변수는 상속된 오브젝트를 가르킨다. 그 함수가 프로토타입의 속성으로 지정되었다고 해도 말이다. +마찬가지로, 더 긴 프로토타입 체인을 만들 수 있으며, 모든 체인에서 속성을 찾을 수 있습니다. ```js -var o = { - a: 2, - m: function (b) { - return this.a + 1; +const o = { + a: 1, + b: 2, + // __proto__는 [[Prototype]]을 설정합니다. + // 여기에 다른 객체 리터럴로 지정되어 있습니다. + __proto__: { + b: 3, + c: 4, + __proto__: { + d: 5, + }, }, }; -console.log(o.m()); // 3 -// o.m을 호출하면 'this' 는 o를 가리킨다. - -var p = Object.create(o); -// p 는 프로토타입을 o로 가지는 오브젝트이다. +// { a: 1, b: 2 } ---> { b: 3, c: 4 } ---> { d: 5 } ---> Object.prototype ---> null -p.a = 12; // p 에 'a'라는 새로운 속성을 만들었다. -console.log(p.m()); // 13 -// p.m이 호출 될 때 'this' 는 'p'를 가리킨다. -// 따라서 o의 함수 m을 상속 받으며, -// 'this.a'는 p.a를 나타내며 p의 개인 속성 'a'가 된다. +console.log(o.d); // 5 ``` -## Javascript 에서 프로토타입을 사용하는 방법 +### 메서드 상속 -뒤에서 일어나는 일을 좀 더 자세히 파헤쳐보자. +JavaScript에는 클래스 기반 언어에서 정의하는 형식의 "[메서드](/ko/docs/Glossary/Method)"가 없습니다. JavaScript에서는 모든 함수를 속성의 형태로 객체에 추가할 수 있습니다. +상속된 함수는 위에 표시된 "속성의 가려짐"을 포함하여 다른 모든 속성처럼 작동합니다(단, 위에서 언급한 "속성의 가려짐" 대신 "메소드 오버라이딩, method overriding" 라는 용어를 사용한다). -위에서 언급했듯이, 자바스크립트에서 함수는 속성을 가질 수 있다. 모든 함수에는 `prototype`이라는 특수한 속성이 있다. 아래의 예제 코드는 독립적이라는 것에 유의하자. (아래의 코드 이외에는 웹페이지에 다른 자바스크립트가 없다고 가정하는 것이 좋다.) +상속된 함수가 실행 될 때, [`this`](/ko/docs/Web/JavaScript/Reference/Operators/this) 값은 함수가 자체 속성인 프로토타입 객체가 아니라 상속 객체를 가리킵니다. -최적의 실습을 위해서 콘솔을 열고 "Console" 탭으로 이동하여 아래의 JavaScript 코드를 복사하여 붙여넣은 다음 , 엔터키를 눌러 실행할 것을 적극 권한다. (콘솔은 대부분 웹 브라우저의 Developer Tools에 포함되어있다. 자세한 내용은 [Firefox Developer Tools](/ko/docs/Tools), [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/), [Edge DevTools](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide) 에서 확인할 수 있다. ) +```js +const parent = { + value: 2, + method() { + return this.value + 1; + }, +}; -``` - function doSomething(){} - console.log( doSomething.prototype ); - // It does not matter how you declare the function, a - // function in JavaScript will always have a default - // prototype property. - var doSomething = function(){}; - console.log( doSomething.prototype ); +console.log(parent.method()); // 3 +// 이 경우 parent.method를 호출할 때, 'this'는 부모를 가리킵니다. + +// 자식은 부모로부터 상속받는 객체입니다. +const child = { + __proto__: parent, +}; +console.log(child.method()); // 3 +// child.method가 호출되면, 'this'는 자식을 가리킵니다. +// 자식이 부모의 메서드를 상속받을 때, +// 자식에서 'value' 속성을 찾습니다. 그러나 자식은 'value'라는 자체 속성이 없기 때문에, +// 해당 속성은 [[Prototype]]에서 찾을 수 있으며, 이는 parent.value입니다. + +child.value = 4; // 자식의 속성 'value'에 값 4를 할당합니다. +// 이 코드는 부모의 'value' 속성을 숨깁니다. +// 자식 객체는 이제 다음과 같습니다. +// { value: 4, __proto__: { value: 2, method: [Function] } } +console.log(child.method()); // 5 +// Since child now has the 'value' property, 'this.value' means +// 자식은 이제 'value' 속성을 가지므로 'this.value'는 child.value를 의미합니다. ``` -위 내용을 토대로, 콘솔을 보면 `doSomething()` 은 기본 `prototype` 속성을 가진다. 코드를 실행한 뒤에 콘솔에서는 다음과 유사한 형태의 객체가 표시되어야한다. +## 생성자 -``` -{ - constructor: ƒ doSomething(), - __proto__: { - constructor: ƒ Object(), - hasOwnProperty: ƒ hasOwnProperty(), - isPrototypeOf: ƒ isPrototypeOf(), - propertyIsEnumerable: ƒ propertyIsEnumerable(), - toLocaleString: ƒ toLocaleString(), - toString: ƒ toString(), - valueOf: ƒ valueOf() - } -} +모든 인스턴스가 동일한 몇가지 동일한 속성을 공유하는 경우, 프로토타입의 강점이 드러납니다. 이는 특히 메서드를 공유할 경우 더욱 두드러집니다. 예로, `getValue` 함수를 통해 접근할 수 있는 값을 포함하는 '상자' 객체를 여럿 만드는 경우를 생각해봅시다. 단순한 구현은 다음과 같습니다. + +```js-nolint +const boxes = [ + { value: 1, getValue() { return this.value; } }, + { value: 2, getValue() { return this.value; } }, + { value: 3, getValue() { return this.value; } }, +]; ``` -우리는 아래에 보이는 것과 같이 `doSomething()` 프로토타입에 속성을 추가할 수 있다. +각 인스턴스에는 중복되고 불필요한 작업을 수행하는 고유한 함수 속성이 있기 때문에, 기대에 미치지 못하는 코드가 됩니다. 대신에, `getValue`를 모든 상자의 `[[Prototype]]`으로 이동할 수 있습니다. ```js -function doSomething() {} -doSomething.prototype.foo = "bar"; -console.log(doSomething.prototype); +const boxPrototype = { + getValue() { + return this.value; + }, +}; + +const boxes = [ + { value: 1, __proto__: boxPrototype }, + { value: 2, __proto__: boxPrototype }, + { value: 3, __proto__: boxPrototype }, +]; ``` -결과: +이렇게 하면, 모든 상자의 `getValue` 메서드가 동일한 함수를 참조하므로, 메모리의 사용량이 줄어듭니다. 그러나 모든 객체 생성에 대해 `__proto__`를 수동으로 바인딩하는 것은 여전히 매우 불편합니다. 이것은 생성된 모든 객체에 대해 `[[Prototype]]`을 자동으로 설정하는 constructor 함수를 사용하는 경우입니다. 생성자는 [`new`](/ko/docs/Web/JavaScript/Reference/Operators/new)로 호출되는 함수입니다. -``` -{ - foo: "bar", - constructor: ƒ doSomething(), - __proto__: { - constructor: ƒ Object(), - hasOwnProperty: ƒ hasOwnProperty(), - isPrototypeOf: ƒ isPrototypeOf(), - propertyIsEnumerable: ƒ propertyIsEnumerable(), - toLocaleString: ƒ toLocaleString(), - toString: ƒ toString(), - valueOf: ƒ valueOf() - } +```js +// 생성자 함수 +function Box(value) { + this.value = value; } + +// Box() 생성자에서 생성된 모든 속성 +Box.prototype.getValue = function () { + return this.value; +}; + +const boxes = [new Box(1), new Box(2), new Box(3)]; ``` -이제 `new` 연산자를 사용해서 프로토타입 기반의 `doSomething()` 인스턴스를 생성할 수 있다. new 연산자를 사용하려면 함수 호출 형식에 `new` 접두사를 붙이기만하면 된다. `new` 연산자로 함수를 호출하면 해당 함수의 인스턴스 객체를 반환받는다. 그러면 속성들을 이 객체에 추가할 수 있다. +`new Box(1)`이 `Box` 생성자 함수에서 생성된 "인스턴스"라고 말할 수 있는데, `Box.prototype`은 이전에 생성한 `boxPrototype` 객체와 크게 다르지 않습니다. `Box.prototype`은 그냥 일반 객체입니다. 생성자 함수에서 생성된 모든 인스턴스는 자동으로 생성자의 [`prototype`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype) 속성을 `[[Prototype]]`으로 갖게 됩니다. 즉, `Object.getPrototypeOf(new Box()) === Box.prototype`입니다. 기본적으로 `Constructor.prototype`에는 생성자 함수 자체를 참조하는 [`constructor`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor) 속성이 하나 있습니다. 즉, `Box.prototype.constructor === Box`이기 때문에, 모든 인스턴스에서 원래 생성자에 접근할 수 있게 됩니다. -다음의 코드를 실행해보자. +> **참고:** 생성자 함수에서 반환된 값이 원시 값이 아니라면, 해당 값은 `new` 표현식의 결과가 됩니다. 이 경우, `[[Prototype]]`이 올바르게 바인딩되지 않을 수 있지만, 실제로는 많이 발생하지 않습니다. + +위 생성자 함수는 [classes](/ko/docs/Web/JavaScript/Reference/Classes)에서 다음과 같이 다시 작성할 수 있습니다. ```js -function doSomething() {} -doSomething.prototype.foo = "bar"; // add a property onto the prototype -var doSomeInstancing = new doSomething(); -doSomeInstancing.prop = "some value"; // add a property onto the object -console.log(doSomeInstancing); +class Box { + constructor(value) { + this.value = value; + } + + // 메서드는 Box.prototype에 생성됩니다. + getValue() { + return this.value; + } +} ``` -실행하고나면 결과는 다음과 비슷할 것이다. +클래스는 생성자 함수보다 문법적인 설탕입니다. 즉, 여전히 `Box.prototype`을 조작하여 모든 인스턴스의 동작을 변경할 수 있습니다. 그러나 클래스는 기본 프로토타입 메커니즘에 대한 추상화로 설계되었기 때문에, 이 자습서에서는 더 가벼운 생성자 함수 구문을 사용하여 프로토타입이 작동하는 방식을 보겠습니다. -``` -{ - prop: "some value", - __proto__: { - foo: "bar", - constructor: ƒ doSomething(), - __proto__: { - constructor: ƒ Object(), - hasOwnProperty: ƒ hasOwnProperty(), - isPrototypeOf: ƒ isPrototypeOf(), - propertyIsEnumerable: ƒ propertyIsEnumerable(), - toLocaleString: ƒ toLocaleString(), - toString: ƒ toString(), - valueOf: ƒ valueOf() - } - } +`Box.prototype`은 모든 인스턴스의 `[[Prototype]]`과 동일한 객체를 참조하기 때문에, `Box.prototype`을 변경하여 모든 인스턴스의 동작을 변경할 수 있습니다. + +```js +function Box(value) { + this.value = value; } +Box.prototype.getValue = function () { + return this.value; +}; +const box = new Box(1); + +// 인스턴스가 이미 생성된 후, `Box.prototype`을 변경합니다. +Box.prototype.getValue = function () { + return this.value + 1; +}; +box.getValue(); // 2 ``` -위에서 본 것과 같이, doSomeInstancing 객체의 `__proto__` 는 doSomething.prototype 이다. -그래서 도대체 `__proto__`는 무엇을 하는것인지 알아보자. -우리가 doSomeInstancing의 속성에 접근할때 브라우저는 우선 doSomeInstancing이 그 속성을 갖고있는지 확인한다. -만약 doSomeInstancing이 속성을 갖고있지 않다면, 브라우저는 doSomeInstancing의 `__proto__`(doSomething.prototype)가 그 속성을 갖고있는지 확인한다. -만약 doSomeInstancing의 `__proto__`가 브라우저가 찾던 속성을 갖고 있다면, doSomething의 `__proto__`가 갖고있는 그 속성을 사용한다. +결과적으로, 재할당 (`Constructor.prototype` (`Constructor.prototype = ...`))은 두 가지 이유로 나쁜 생각입니다. -그렇지 않고, doSomeInstancing의 `__proto__`가 그 속성을 갖고있지 않을때에는 -doSomeInstancing의 `__proto__`의 `__proto__`가 그 속성을 갖는지 확인한다. -기본적으로, 어떠한 함수던지 그 함수의 prototype 속성의 `__proto__`는 window\.Object.prototype이다. -그러므로 브라우저는 doSomeInstancing의 `__proto__`의 `__proto__`(doSomething.prototype의 `__proto__`(다시말해, Object.prototype)) 에서 그 속성을 찾아본다. -만약 그 속성을 doSomeInstancing의 `__proto__`의 `__proto__`에서 찾을 수 없다면 그다음엔 doSomeInstancing의 `__proto__`의 `__proto__`의 `__proto__`에서 찾을것이다. -하지만 여기서 문제가 발생한다. -doSomeInstancing의 `__proto__`의 `__proto__`의 `__proto__`는 존재할 수 없다(window\.Object.prototype의 `__proto__`는 null이기 때문). -그제서야, 오직 모든 프로토타입 체인이 검사 되고 브라우저가 더이상 검사할 `__proto__`가 없을때에서야 브라우저는 우리가 찾던 값이 undefined라고 결론짓는다. +- 재할당 전에 생성된 인스턴스의 `[[Prototype]]`은 이제 재할당 후 생성된 인스턴스의 `[[Prototype]]`과 다른 객체를 참조합니다. 하나의 `[[Prototype]]`을 변경해도 더 이상 다른 객체가 변경되지 않습니다. +- `constructor` 속성을 수동으로 재설정하지 않는 한, `instance.contructor`에서 더 이상 생성자 함수를 추적할 수 없어 동작 방식을 예상하기 어려워집니다. 일부 기본 제공 연산은 `constructor` 속성도 읽으며 설정되지 않은 경우, 예상대로 작동하지 않을 수 있습니다. -콘솔에 코드를 조금 더 추가해보자. +`Constructor.prototype`은 인스턴스를 구성할 때만 유용합니다. 이는 `Function.prototype` 생성자 함수의 자체 소유의 프로토타입인 `Constructor.[[Prototype]]`과 아무 관련이 없습니다. 즉, `Object.getPrototypeOf(Constructor) === Function.prototype`입니다. + +### 리터럴의 암시적 생성자 + +JavaScript의 일부 리터럴 구문은 암시적으로 `[[Prototype]]`을 설정하는 인스턴스를 생성합니다. 예를 들어, ```js -function doSomething() {} -doSomething.prototype.foo = "bar"; -var doSomeInstancing = new doSomething(); -doSomeInstancing.prop = "some value"; -console.log("doSomeInstancing.prop: " + doSomeInstancing.prop); -console.log("doSomeInstancing.foo: " + doSomeInstancing.foo); -console.log("doSomething.prop: " + doSomething.prop); -console.log("doSomething.foo: " + doSomething.foo); -console.log("doSomething.prototype.prop: " + doSomething.prototype.prop); -console.log("doSomething.prototype.foo: " + doSomething.prototype.foo); -``` +// 객체 리터럴 (`__proto__` 키 없음)은 자동으로 `[[Prototype]]`으로 `Object.prototype`을 갖습니다. +const object = { a: 1 }; +Object.getPrototypeOf(object) === Object.prototype; // true -이 코드의 결과는 아래와 같다. +// 배열 리터럴은 자동으로 `Array.prototype`을 `[[Prototype]]`으로 갖습니다. +const array = [1, 2, 3]; +Object.getPrototypeOf(array) === Array.prototype; // true +// RegExp 리터럴은 자동으로 `RegExp.prototype`을 `[[Prototype]]`으로 갖습니다. +const regexp = /abc/; +Object.getPrototypeOf(regexp) === RegExp.prototype; // true ``` -doSomeInstancing.prop: some value -doSomeInstancing.foo: bar -doSomething.prop: undefined -doSomething.foo: undefined -doSomething.prototype.prop: undefined -doSomething.prototype.foo: bar -``` - -## 객체를 생성하는 여러 방법과 프로토타입 체인 결과 -### 문법 생성자로 객체 생성 +생성자 형태를 통해, "문법 설탕을 제거"할 수 있습니다. ```js -var o = { a: 1 }; +const array = new Array(1, 2, 3); +const regexp = new RegExp("abc"); +``` -// o 객체는 프로토타입으로 Object.prototype 을 가진다. -// 이로 인해 o.hasOwnProperty('a') 같은 코드를 사용할 수 있다. -// hasOwnProperty 라는 속성은 Object.prototype 의 속성이다. -// Object.prototype 의 프로토타입은 null 이다. -// o ---> Object.prototype ---> null +예를 들어, [`map()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map)과 같은 "배열 메서드"는 단순히 `Array.prototype`에 정의된 메서드입니다. 모든 배열 인스턴스에서 자동으로 사용할 수 있습니다. -var a = ["yo", "whadup", "?"]; +> **경고:** 널리 알려진 한 가지 잘못된 기능이 있습니다. 바로 `Object.prototype` 또는 다른 내장 프로토타입 중 하나를 확장하는 것입니다. 이 잘못된 기능의 예는 `Array.prototype.myMethod = function () {...}`를 정의한 다음 모든 배열 인스턴스에서 `myMethod`를 사용하는 것입니다. +> +> 이러한 잘못된 기능을 원숭이 패칭(monkey patching)이라고 합니다. 원숭이 패칭을 하게 되면, 상위 호환성에 문제가 발생합니다. 언어가 나중에 이 메서드를 추가하지만 다른 서명을 사용하면, 코드가 깨질 수 있기 대문입니다. 이로 인해, [SmooshGate](https://developer.chrome.com/blog/smooshgate/)와 같은 사고가 발생했으며, JavaScript는 "웹을 중단하지 않으려" 시도하므로 언어가 발전하는 데 있어 큰 장애물이 될 수 있습니다. +> +> 내장 제공 프로토타입을 확장해도 좋은 `유일한` 경우는 최신 JavaScript 엔진의 기능을 이전 버전에서도 사용할 수 있게 해줄 때입니다(backport). 예로,`Array.prototype.forEach`가 있습니다. -// Array.prototype을 상속받은 배열도 마찬가지다. -// (이번에는 indexOf, forEach 등의 메소드를 가진다) -// 프로토타입 체인은 다음과 같다. -// a ---> Array.prototype ---> Object.prototype ---> null +흥미롭게도, 일부 내장 생성자의 `prototype` 속성은 역사적인 이유로 해당 인스턴스 자체입니다. 예를 들어, `Number.prototype`은 숫자 0이고, `Array.prototype`은 빈 배열이고, `RegExp.prototype`은 `/(?:)/`입니다. -function f() { - return 2; -} +```js +Number.prototype + 1; // 1 +Array.prototype.map((x) => x + 1); // [] +String.prototype + "a"; // "a" +RegExp.prototype.source; // "(?:)" +Function.prototype(); // Function.prototype은 자체로 프로그램에 아무 작업도 수행하지 말라고 지시하는 (no-operation, no-op) 함수입니다. +``` -// 함수는 Function.prototype 을 상속받는다. -// (이 프로토타입은 call, bind 같은 메소드를 가진다) -// f ---> Function.prototype ---> Object.prototype ---> null +그러나, 이것은 사용자 정의 생성자나 `Map`과 같은 최신 생성자의 경우에는 해당되지 않습니다. + +```js +Map.prototype.get(1); +// Uncaught TypeError: 호환되지 않는 Map.prototype에서 호출된 get 메서드 ``` -### 생성자를 이용 +### 더 긴 상속 체인 구축 -자바스크립트에서 생성자는 단지 [new 연산자](/en/JavaScript/Reference/Operators/new)를 사용해 함수를 호출하면 된다. +`Constructor.prototype` 속성은 `Constructor.prototype`의 자체 `[[Prototype]]`을 포함하여, 생성자 인스턴스의 `[[Prototype]]`이 됩니다. 기본적으로 `Constructor.prototype`은 일반 객체입니다. 즉, `Object.getPrototypeOf(Constructor.prototype) === Object.prototype` 입니다. 유일한 예외는 `Object.prototype` 자체이며, `[[Prototype]]`은 `null`입니다. 즉, `Object.getPrototypeOf(Object.prototype) === null`입니다. 따라서, 일반적인 생성자는 다음 프로토타입 체인을 빌드합니다. ```js -function Graph() { - this.vertexes = []; - this.edges = []; -} - -Graph.prototype = { - addVertex: function (v) { - this.vertexes.push(v); - }, -}; +function Constructor() {} -var g = new Graph(); -// g 'vertexes' 와 'edges'를 속성으로 가지는 객체이다. -// 생성시 g.[[Prototype]]은 Graph.prototype의 값과 같은 값을 가진다. +const obj = new Constructor(); +// obj ---> Constructor.prototype ---> Object.prototype ---> null ``` -### Object.create 이용 +더 긴 프로토타입 체인을 구축하려면, [`Object.setPrototypeOf()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf) 함수를 통해 `Constructor.prototype`의 `[[Prototype]]`을 설정할 수 있습니다. -ECMAScript 5는 새로운 방법을 도입했다. [Object.create](/en/JavaScript/Reference/Global_Objects/Object/create)라는 메소드를 호출하여 새로운 객체를 만들 수 있다. 생성된 객체의 프로토타입은 이 메소드의 첫 번째 인수로 지정된다. +```js +function Base() {} +function Derived() {} +// `Derived.prototype`의 `[[Prototype]]`을 `Base.prototype`으로 설정합니다. +Object.setPrototypeOf(Derived.prototype, Base.prototype); + +const obj = new Derived(); +// obj ---> Derived.prototype ---> Base.prototype ---> Object.prototype ---> null +``` + +클래스 문법 용어로, 이는 [`extends`](/ko/docs/Web/JavaScript/Reference/Classes/extends) 구문을 사용하는 것과 동일합니다. ```js -var a = { a: 1 }; -// a ---> Object.prototype ---> null +class Base {} +class Derived extends Base {} -var b = Object.create(a); -// b ---> a ---> Object.prototype ---> null -console.log(b.a); // 1 (상속됨) +const obj = new Derived(); +// obj ---> Derived.prototype ---> Base.prototype ---> Object.prototype ---> null +``` -var c = Object.create(b); -// c ---> b ---> a ---> Object.prototype ---> null +상속 체인을 구축하기 위해, {{jsxref("Object.create()")}}를 사용하는 일부 레거시 코드를 볼 수도 있습니다. 그러나 이것은 `prototype` 속성을 재할당하고 [`constructor`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor) 속성을 제거하기 때문에, 오류가 더 많이 발생할 수 있습니다. 생성자가 아직 인스턴스를 생성하지 않은 경우에는 성능에서 얻는 이점 또한 체감하기 어렵습니다. + +```js example-bad +function Base() {} +function Derived() {} +// `[[Prototype]]`으로 `Base.prototype`을 사용하여 `Derived.prototype을 새로운 객체에 다시 할당합니다. +// 이렇게 하지 마세요, 대신 `Object.setPrototypeOf`를 사용하여 변경하세요. -var d = Object.create(null); -// d ---> null -console.log(d.hasOwnProperty); // undefined이다. 왜냐하면 d는 Object.prototype을 상속받지 않기 때문이다. +Derived.prototype = Object.create(Base.prototype); ``` -### `class` 키워드 이용 +### 프로토타입 심층 분석 + +뒤에서 어떠한 일이 일어나는지 좀 더 자세히 살펴보겠습니다. -ECMAScript2015에는 몇 가지 키워드가 도입되어 [class](/ko/docs/Web/JavaScript/Reference/Classes)를 구현하였다. 이런 생성 방식은 클래서 기반 언어의 개발자들에게 친숙하게 다가오나 동작 방식이 같지는 않다. 자바스크립트는 여전히 프로토타입 기반으로 남아있다. 새로 도입된 키워드는 {{jsxref("Statements/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}, {{jsxref("Classes/static", "static")}}, {{jsxref("Classes/extends", "extends")}}, 그리고 {{jsxref("Operators/super", "super")}}가 있다. +위에서 언급한 것처럼, JavaScript에서 함수는 속성을 가질 수 있습니다. 모든 함수에는 `prototype`이라는 특수한 속성이 있습니다. 아래의 예제 코드는 독립적이라는 것에 유의하세요(아래의 코드 이외에는 웹페이지에 다른 자바스크립트가 없다고 가정해도 문제 없습니다). + +최적의 실습을 위해, 콘솔을 열고 "console" 탭으로 이동하여 아래의 JavaScript 코드를 복사하여 붙여넣고, 엔터/Return 키를 눌러서 실행하는 것이 좋습니다(콘솔은 대부분 웹 브라우저의 개발자 도구에 포함되어 있습니다. 자세한 내용은 [Firefox Developer Tools](https://firefox-source-docs.mozilla.org/devtools-user/index.html), [Chrome DevTools](https://developer.chrome.com/docs/devtools/) 및 [Edge DevTools](https://docs.microsoft.com/archive/microsoft-edge/legacy/developer/)을 참고하세요). ```js -"use strict"; +function doSomething() {} +console.log(doSomething.prototype); +// 함수 선언 방법은 중요하지 않습니다. JavaScript의 함수는 항상 기본 프로토타입 속성을 갖습니다. +// 한 가지 예외가 있습니다. 화살표 함수에는 기본 프로토타입 속성이 없습니다. +const doSomethingFromArrowFunction = () => {}; +console.log(doSomethingFromArrowFunction.prototype); +``` -class Polygon { - constructor(height, width) { - this.height = height; - this.width = width; - } -} +위 내용을 토대로, 콘솔을 보면 `doSomething()` 은 기본 `prototype` 속성을 가지고 있습니다. 코드를 실행한 뒤에 콘솔에서는 다음과 유사한 형태의 객체가 표시되어야 합니다. -class Square extends Polygon { - constructor(sideLength) { - super(sideLength, sideLength); - } - get area() { - return this.height * this.width; - } - set sideLength(newLength) { - this.height = newLength; - this.width = newLength; +```plain +{ + constructor: ƒ doSomething(), + [[Prototype]]: { + constructor: ƒ Object(), + hasOwnProperty: ƒ hasOwnProperty(), + isPrototypeOf: ƒ isPrototypeOf(), + propertyIsEnumerable: ƒ propertyIsEnumerable(), + toLocaleString: ƒ toLocaleString(), + toString: ƒ toString(), + valueOf: ƒ valueOf() } } - -var square = new Square(2); ``` -### 성능 +> **참고:** Chrome 콘솔은 `[[Prototype]]`을 사용하여, 명세의 용어에 따라 객체의 프로토타입을 나타냅니다. Firefox는 ``을 사용하는데, 일관성을 위해 `[[Prototype]]`을 사용합니다. -프로토타입 체인에 걸친 속성 검색으로 성능에 나쁜 영향을 줄 수 있으며, 때때로 치명적일 수 있다. 또한 존재하지도 않는 속성에 접근하려는 시도는 항상 모든 프로토타입 체인인 전체를 탐색해서 확인하게 만든다. - -객체의 속성에 걸쳐 루프를 수행 하는 경우 프로토타입 체인 전체의 **모든** 열거자 속성에 대하여 적용된다. 객체 개인 속성인지 프로토타입 체인상 어딘가에 있는지 확인하기 위해서는 Object.prototype에서 모든 오브젝트로 상속된 [`hasOwnProperty`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty) 메소드를 이용할 필요가 있다. 다음 코드를 통하여 구체적인 예를 확인하여 보자. +아래와 같이, `doSomething()`의 프로토타입에 속성을 추가할 수 있습니다. ```js -console.log(g.hasOwnProperty("vertices")); -// true - -console.log(g.hasOwnProperty("nope")); -// false +function doSomething() {} +doSomething.prototype.foo = "bar"; +console.log(doSomething.prototype); +``` -console.log(g.hasOwnProperty("addVertex")); -// false +결과: -console.log(g.__proto__.hasOwnProperty("addVertex")); -// true +```plain +{ + foo: "bar", + constructor: ƒ doSomething(), + [[Prototype]]: { + constructor: ƒ Object(), + hasOwnProperty: ƒ hasOwnProperty(), + isPrototypeOf: ƒ isPrototypeOf(), + propertyIsEnumerable: ƒ propertyIsEnumerable(), + toLocaleString: ƒ toLocaleString(), + toString: ƒ toString(), + valueOf: ƒ valueOf() + } +} ``` -[`hasOwnProperty`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty) 메소드만이 속성을 확인하고 프로토타입 체인 전체를 훑지 않게 할 수 있다. - -참고: [`undefined`](/ko/docs/Web/JavaScript/Reference/Global_Objects/undefined)인지 여부만 확인하는 것으로는 충분하지 않다. 여전히 속성이 존재할 수도 있는데 단지 그 값에 `undefined`가 할당되어 있을 수도 있기 때문이다. +이제 `new` 연산자를 사용해서 프로토타입 기반의 `doSomething()` 인스턴스를 생성할 수 있습니다. new 연산자를 사용하려면 `new` 접두어를 제외하고 일반적으로 함수를 호출하세요. `new` 연산자로 함수를 호출하면 해당 함수의 인스턴스 객체를 반환받습니다. 그러면 속성들을 이 객체에 추가할 수 있습니다. -### 좋지 않은 사례: 기본 프로타입의 확장 변형 +다음의 코드를 실행해봅시다. -Object.prototype 혹은 빌트인 프로토타입의 확장은 종종 이용되지만 오용이다. +```js +function doSomething() {} +doSomething.prototype.foo = "bar"; // 프로토타입에 속성 추가 +const doSomeInstancing = new doSomething(); +doSomeInstancing.prop = "some value"; // 객체에 속성 추가 +console.log(doSomeInstancing); +``` -이 기법은 Monkey patching으로 불리며 캡슐화를 망가뜨린다. Prototype.js와 같은 유명한 프레임워크에서도 사용되지만, 빌트인 타입에 비표준 기능을 추가하는 것은 좋은 생각이 아니다. +실행한 후에는 결과는 아래와 비슷할 겁니다. -유일하게 좋은 사용 예라면, 새로운 자바스크립트 엔진에 Array.forEach등의 새로운 기능을 추가하면서 빌트인 프로토타입을 확장하는 것 정도다. +```plain +{ + prop: "some value", + [[Prototype]]: { + foo: "bar", + constructor: ƒ doSomething(), + [[Prototype]]: { + constructor: ƒ Object(), + hasOwnProperty: ƒ hasOwnProperty(), + isPrototypeOf: ƒ isPrototypeOf(), + propertyIsEnumerable: ƒ propertyIsEnumerable(), + toLocaleString: ƒ toLocaleString(), + toString: ƒ toString(), + valueOf: ƒ valueOf() + } + } +} +``` -## 예 +위에서 볼 수 있듯이, `doSomeInstancing`의 `[[Prototype]]`은 `doSomething.prototype`입니다. 그러나 이것은 어떤 역할을 하나요? `doSomeInstancing`의 속성에 접근하면 런타임은 먼저 `doSomeInstancing`에 해당 속성이 있는지 확인합니다. -`B는 A를 상속한다`: +`doSomeInstancing`에 속성이 없으면, 런타임은 `doSomeInstancing.[[Prototype]]` (`doSomething.prototype`)에서 속성을 찾습니다. `doSomeInstancing.[[Prototype]]`에 찾고 있는 속성이 있으면 `doSomeInstancing.[[Prototype]]`의 해당 속성이 사용됩니다. -```js -function A(a) { - this.varA = a; -} +그렇지 않고, `doSomeInstancing.[[Prototype]]`에 속성이 없으면, `doSomeInstancing.[[Prototype]].[[Prototype]]`에서 속성을 확인합니다. 기본적으로, 함수의 `prototype` 속성 중 `[[Prototype]]`은 `Object.prototype`입니다. 따라서, `doSomeInstancing.[[Prototype]].[[Prototype]]` (`doSomething.prototype.[[Prototype]]`(`Object.prototype`)) 은 검색 중인 속성을 찾습니다. -// A의 정의에서 this.varA는 항상 A.prototype.varA가 가려버리는데 -// prototype에 varA를 다시 넣는 이유는 무엇인가? -A.prototype = { - varA: null, // 아무것도 안하면서 varA를 쓰는 이유가 있을까? - // 아마도 숨겨진 클래스의 할당 구조를 최적화 하려는 것인가? - // https://developers.google.com/speed/articles/optimizing-javascript#Initializing-instance-variables - // 모든 객체의 varA가 동일하게 초기화 되어야 상기 링크 내용이 유효할 수 있다. - doSomething: function () { - // ... - }, -}; +속성이 `doSomeInstancing.[[Prototype]].[[Prototype]]`에 없으면, `doSomeInstancing.[[Prototype]].[[Prototype]].[[Prototype]]`을 통해 찾습니다. 그러나, `doSomeInstancing.[[Prototype]].[[Prototype]].[[Prototype]]`이 존재하지 않는 문제가 있는데, 그 이유는 `Object.prototype.[[Prototype]]`이 `null`이기 때문입니다. 그런 다음, `[[Prototype]]`의 전체 프로토타입 체인을 살펴본 후, 런타임은 속성이 존재하지 않는다고 주장하고 속성의 값이 `undefined`이라고 결정합니다. -function B(a, b) { - A.call(this, a); - this.varB = b; -} -B.prototype = Object.create(A.prototype, { - varB: { - value: null, - enumerable: true, - configurable: true, - writable: true, - }, - doSomething: { - value: function () { - // override - A.prototype.doSomething.apply(this, arguments); // call super - // ... - }, - enumerable: true, - configurable: true, - writable: true, - }, -}); -B.prototype.constructor = B; +콘솔에 코드를 추가로 입력해 봅시다. -var b = new B(); -b.doSomething(); +```js +function doSomething() {} +doSomething.prototype.foo = "bar"; +const doSomeInstancing = new doSomething(); +doSomeInstancing.prop = "some value"; +console.log("doSomeInstancing.prop: ", doSomeInstancing.prop); +console.log("doSomeInstancing.foo: ", doSomeInstancing.foo); +console.log("doSomething.prop: ", doSomething.prop); +console.log("doSomething.foo: ", doSomething.foo); +console.log("doSomething.prototype.prop:", doSomething.prototype.prop); +console.log("doSomething.prototype.foo: ", doSomething.prototype.foo); ``` -중요한 점은: +코드의 결과는 아래와 같습니다. -- `.prototype`에 타입이 정의되어 있다. -- `Object.create()`을 이용하여 상속한다. +```plain +doSomeInstancing.prop: some value +doSomeInstancing.foo: bar +doSomething.prop: undefined +doSomething.foo: undefined +doSomething.prototype.prop: undefined +doSomething.prototype.foo: bar +``` -## `prototype` `그리고 Object.getPrototypeOf` +## 프로토타입 체인을 만들고 변경하는 다양한 방법 -Java나 C++에 익숙한 개발자는 클래스라는 것도 없고, 모든 것이 동적이고 실행 시 결정되는 자바스크립트의 특징 때문에 어려움을 겪을 수도 있다. 모든 것은 객체이고, 심지의 "class"를 흉내내는 방식도 단지 함수 오브젝트를 이용하는 것 뿐이다. +객체를 생성하고 프로토타입 체인을 변경하는 다양한 방법을 만나보았습니다. 각 접근 방식의 장단점을 비교하여, 다양한 방식을 체계적으로 요약합니다. -이미 알아챘겠지만 우리의 함수 A도 특별한 속성 prototype를 가지고 있다. 이 특별한 속성은 자바스크립트의 new 연산자와 함께 쓰인다. 프로토타입 객체는 새로 만들어진 인스턴스의 내부 `[[Prototype]]` 속성에 복사되어 참조된다. 가령, `var a1 = new A()`를 수행할 때, this를 포함하고 있는 함수을 수행하기 전, 메모리에 새로 생성된 객체를 생성한 직후 자바스크립트는 a1.`[[Prototype]] = A.prototype`를 수행한다. 그 인스턴스의 속성에 접근하려 할 때 자바스크립트는 그 객체의 개인 속성인지 우선 확인하고 그렇지 않은 경우에 `[[Prototype]]`에서 찾는다. 이것은 prototype에 정의한 모든 것은 모든 인스턴스가 효과적으로 공유한다는 뜻이며, 심지어 프로토타입의 일부를 나중에 변경하다고 해도 이미 생성되어 있는 인스턴스는 필요한 경우 그 변경 사항에 접근할 수 있다. +### 문법 생성자로 객체 생성 -위의 예에서, 만일 `var a1 = new A(); var a2 = new A();` 그 후 `a1.doSomething`이 `Object.getPrototypeOf(a1).doSomething`를 가리키게 되는 것은`A.prototype.doSomething`으로 정의한 것과 같게 된다. 즉, `Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething`. +```js +const o = { a: 1 }; +// 새롭게 만들어진 각체 o는 Object.prototype을 [[Prototype]]으로 가지고 있습니다. +// Object.prototype의 프로토타입은 null 입니다. +// o ---> Object.prototype ---> null -요약 하자면, prototype은 타입 정의를 위한 것이고, `Object.getPrototypeOf()`는 모든 인스턴스가 공유한다. +const b = ["yo", "whadup", "?"]; +// Array.prototype을 상속받은 배열도 마찬가지 입니다. +// (이번에는 indexOf, forEach 등의 메소드를 가집니다) +// 프로토타입 체인은 다음과 같습니다. +// b ---> Array.prototype ---> Object.prototype ---> null -`[[Prototype]]`은 재귀적으로 탐색된다. 즉, `a1.doSomething`, `Object.getPrototypeOf(a1).doSomething`,`Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething` 등등, 이미 발견했거나 `Object.getPrototypeOf`가 `null`을 반환할 때까지 반복된다. +function f() { + return 2; +} +// 함수는 Function.prototype 을 상속받습니다. +// (이 프로토타입은 call, bind 같은 메소드를 가집니다). +// f ---> Function.prototype ---> Object.prototype ---> null -따라서 다음 호출에 대하여 +const p = { b: 2, __proto__: o }; -```js -var o = new Foo(); +// 새로 생성된 객체의 [[Prototype]]이 __proto__ 리터럴 속성을 통해 다른 객체를 가리키도록 할 수 있습니다. +// (Object.prototype.__proto__ 접근자와 혼동하지 마세요). +// p ---> o ---> Object.prototype ---> null ``` -자바스크립트는 실제로 다음 작업을 수행한다. + + + + + + + + + + + + +
    + 객체 초기자에서 __proto__ 키 사용의 장점과 단점 +
    장점 + 모든 최신 엔진에서 지원됩니다. 객체가 아닌 것을 __proto__키로 지정하면 예외를 발생시키지 않고 조용히 실패합니다. {{jsxref("Object/proto", "Object.prototype.__proto__")}} 설정자와 반대로, 객체 리터럴 초기자의 __proto__가 표준화되고 최적화되었으며 {{jsxref("Object.create")}}보다 성능이 더 뛰어날 수 있습니다. 객체 생성 시 추가 자체 속성을 선언하는 것이 {{jsxref("Object.create")}}보다 편리합니다. +
    단점 + IE10 이하에서는 지원하지 않습니다. 차이점을 모르는 사람들이 {{jsxref("Object/proto", "Object.prototype.__proto__")}}와 혼동하기 쉽습니다. +
    + +### 생성자 함수를 이용 + +자바스크립트에서 생성자는 단지 [new 연산자](/en/JavaScript/Reference/Operators/new)를 사용해 함수를 호출하면 된다. ```js -var o = new Object(); -o.[[Prototype]] = Foo.prototype; -Foo.call(o); -``` +function Graph() { + this.vertices = []; + this.edges = []; +} -(혹은 그런 비슷한 작업, 내부 구현은 다를 수 있다) 그리고 나중에 다음을 수행하면 +Graph.prototype.addVertex = function (v) { + this.vertices.push(v); +}; -```js -o.someProp; +const g = new Graph(); +// g는 자체 속성으로 'vertices' 와 'edges'를 가지는 객체이다. +// g.[[Prototype]]은 new Graph()가 실행될 때 Graph.prototype의 값이 됩니다. ``` -자바스크립트는 o가 속성 someProp을 가졌는지 확인하고, 아니면 `Object.getPrototypeOf(o).someProp`, 또 아니면 `Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp` 등으로 계속 된다. + + + + + + + + + + + + +
    + 생성자 함수 사용의 장점과 단점 +
    장점 + 모든 엔진에서 지원합니다(IE 5.5까지도 지원). 또한, 매우 빠르고, 표준에 따르고, JIT 최적화가 가능합니다. +
    단점 +
      +
    • 이 방법을 사용하기 위해서는, 해당 함수를 초기화해야 합니다. 이 초기화 중에 생성자는 각각의 객체마다 생성해야 하는 고유한 정보를 저장할 수 있습니다. 이 고유한 정보는 한 번만 생성되고, 잠재적으로 문제를 발생시킬 수 있습니다.
      • +
    • 생성자의 초기화는 원치 않는 메서드를 객체에 넣을 수 있습니다.
      • +
    +

    둘 다 실제로는 일반적으로 문제가 되지 않습니다.

    +
    -## 프로토타입 상속의 종류 +### Object.create 이용 -프로토타입 상속에는 3가지 종류가 있다 : 위임형 상속, 연결형 상속, 함수형 상속. +{{jsxref("Object.create()")}}을 호출하면 새로운 객체가 생성됩니다. 이 객체의 `[[Prototype]]`은 함수의 첫 번째 인수입니다. -### 위임형 상속(Delegation inheritance) +```js +const a = { a: 1 }; +// a ---> Object.prototype ---> null -위임형 상속에서 프로토타입 객체는 다른 객체의 기반이 된다. 위임 프로토타입을 상속받을 경우 새 객체는 해당 프로토타입에 대한 참조를 가지고 있다. +const b = Object.create(a); +// b ---> a ---> Object.prototype ---> null +console.log(b.a); // 1 (inherited) -새 객체의 속성에 접근할 때, 해당 객체가 직접적으로 속성을 소유하고 있는지 먼저 체크한다. 없다면 다음 순서로 `[[Prototype]]`을 체크한다. 이 과정은 프로토타입 체인을 따라서 모든 객체의 프로토타입 체인의 최상위에 있는 객체인 `Object.prototype`에 도달할 때 까지 반복된다. +const c = Object.create(b); +// c ---> b ---> a ---> Object.prototype ---> null -메소드를 위임 상속할 경우 모든 객체가 각 메소드에에 대해 하나의 코드를 공유하므로 메모리를 절약할 수 있다. +const d = Object.create(null); +// d ---> null (d는 프로토타입으로 직접 null을 갖는 객체입니다) +console.log(d.hasOwnProperty); +// undefined, d는 Object.prototype에서 상속받지 않기 때문입니다. +``` -Javascript에서 이를 구현하는 방법은 여러가지가 있는데 ES6에서는 아래와 같은 방식이 흔하다: + + + + + + + + + + + + +
    + {{jsxref("Object.create")}}의 장점과 단점 +
    장점 + 모든 최신 엔진을 지원합니다. 생성 시 객체의 [[Prototype]]을 직접 설정할 수 있으므로, 런타임에서 객체를 더욱 최적화할 수 있습니다. 또한 Object.create(null)를 사용하여 프로토타입 없이 객체를 생성할 수 있습니다. +
    단점 + IE8 이하에서는 지원하지 않습니다. 그러나 Microsoft는 IE8 이하를 실행하는 시스템에 대한 확장 지원을 중단했기 때문에 대부분의 응용 프로그램에서는 문제가 되지 않습니다. 또한, 두 번째 인수를 사용하는 경우 느린 객체 초기화로 인해 성능이 저하될 수 있습니다. 각 객체 설명자 속성에는 자체적으로 구분된 설명자 객체가 있기 때문입니다. 객체 형태를 가지는 수십만 개의 객체 설명자를 처리할 때, 지연 시간이 심각한 문제가 될 수 있습니다. +
    + +### class를 이용하는 방법 ```js -class Greeter { - constructor(name) { - this.name = name || "John Doe"; +class Rectangle { + constructor(height, width) { + this.name = "Rectangle"; + this.height = height; + this.width = width; } - hello() { - return `Hello, my name is ${this.name}`; +} + +class FilledRectangle extends Rectangle { + constructor(height, width, color) { + super(height, width); + this.name = "Filled rectangle"; + this.color = color; } } -const george = new Greeter("George"); -const msg = george.hello(); -console.log(msg); // Hello, my name is George +const filledRectangle = new FilledRectangle(5, 10, "blue"); +// filledRectangle ---> FilledRectangle.prototype ---> Rectangle.prototype ---> Object.prototype ---> null ``` -`Object.create(null)`. 을 통해 프로토타입을 {{jsxref("null")}}로 지정하여 속성 위임 없이 객체를 생성할 수 있다.. - -이 방법의 큰 단점 중 하나는 상태를 저장하는데 그리 좋은 방법이 아니라는 것이다. 객체나 배열의 상태를 변경하게 되면 같은 프로토타입을 공유하는 모든 객체의 상태가 변경된다. + + + + + + + + + + + + + +
    + 클래스의 장점과 단점 +
    장점 + 모든 최신 엔진에서 지원됩니다. 매우 높은 가독성과 유지 보수성. 비공개 속성은 프로토타입 상속에서 자잘한 대체가 없는 기능입니다. +
    단점 + 특히 비공개 속성이 있는 클래스는 기존 클래스보다 덜 최적화되어 있습니다(엔진 구현자가 이를 개선하기 위해 노력하고 있습니다). 이전 환경에서는 지원되지 않으며 일반적으로 실제 서비스의 운영 환경에서 클래스를 사용하려면 트랜스파일러(transpilers)가 필요합니다. +
    + +### Object.setPrototypeOf()를 이용하는 방법 + +위의 모든 메서드는 객체 생성 시 프로토타입 체인을 설정하지만, [`Object.setPrototypeOf()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf)는 이미 생성된 객체의 내부 `[[Prototype]]` 속성을 변경할 수 있습니다. -상태 변경이 전파되는 것을 막으려면 각 객체마다 상태 값의 복사본을 만들어야 한다. - -### 연결형 상속(Concatenative inheritance) - -연결형 상속은 한 객체의 속성을 다른 객체에 모두 복사함으로써 상속을 구현하는 방법이다. +```js +const obj = { a: 1 }; +const anotherObj = { b: 2 }; +Object.setPrototypeOf(obj, anotherObj); +// obj ---> anotherObj ---> Object.prototype ---> null +``` -이 상속법은 Javascript 객체의 동적 확장성을 이용한 방법이다. 객체 복사는 속성의 초기값을 저장하기 위한 좋은 방법이다: 이 방식은 {{jsxref("Object.assign()")}}을 통해 구현하는 것이 보통이며 ES6 이전에 Lodash, Underscore, jQuery등의 라이브러리들이 `.extend()` 와 비슷한 메소드로 제공한 방법이다. + + + + + + + + + + + + +
    + {{jsxref("Object.setPrototypeOf")}}의 장점과 단점 +
    장점 + 모든 최신 엔진에서 지원됩니다. 객체의 프로토타입을 동적으로 조작할 수 있으며 Object.create(null)로 만든 프로토타입이 없는 객체에 프로토타입을 적용할 수 있습니다. +
    단점 + 성능이 좋지 않습니다. 객체 생성 시 프로토타입을 설정할 수 있는 경우 피해야 합니다. 많은 엔진들이 프로토타입을 최적화하고 미리 인스턴스를 호출할 때 메모리에서 메서드의 위치를 추측하려고 합니다. 그러나 프로토타입을 동적으로 설정하면 이러한 모든 최적화가 중단됩니다. 명세에 따라 작동하도록, 일부 엔진이 최적화 해제를 위해 코드를 다시 컴파일하게 할 수 있습니다. IE8 이하에서는 지원하지 않습니다. +
    + +### \_\_proto\_\_ 접근자를 사용하는 방법 + +모든 객체는 [`Object.prototype.__proto__`](//docs/Web/JavaScript/Reference/Global_Objects/Object/proto) 설정자를 상속하며, 이는 기존 객체의 `[[Prototype]]`을 설정하는 데 사용할 수 있습니다(`__proto__` 키가 객체에서 재정의되지 않은 경우). + +> **경고:** `Object.prototype.__proto__` 접근자는 **비표준**이며 더 이상 사용되지 않습니다. 대신 거의 항상 `Object.setPrototypeOf`를 사용해야 합니다. ```js -const proto = { - hello: function hello() { - return `Hello, my name is ${this.name}`; - }, -}; - -const george = Object.assign({}, proto, { name: "George" }); -const msg = george.hello(); -console.log(msg); // Hello, my name is George +const obj = {}; +// 이것을 사용하지 마세요. 오직 예시일 뿐입니다. +obj.__proto__ = { barProp: "bar val" }; +obj.__proto__.__proto__ = { fooProp: "foo val" }; +console.log(obj.fooProp); +console.log(obj.barProp); ``` -연결형 상속은 매우 좋은 방법이며 클로져와 같이 사용한다면 훨씬 효과적인 상속 방식입니다.. + + + + + + + + + + + + +
    + {{jsxref("Object/proto","__proto__")}} 속성 설정의 장점과 단점 +
    장점 + 모든 최신 엔진에서 지원됩니다. {{jsxref("Object/proto","__proto__")}}를 객체가 아닌 것으로 설정하면 조용히 실패합니다. 예외를 던지지 않습니다. +
    단점 + 성능이 떨어지고 더 이상 사용되지 않습니다. 많은 엔진이 프로토타입을 최적화하고 미리 인스턴스를 호출할 때 메모리에서 메서드의 위치를 추측하려고 합니다. 그러나 프로토타입을 동적으로 설정하면 이러한 모든 최적화가 중단되고 일부 엔진이 명세에 따라 작동하도록 코드의 최적화 해제를 위해 다시 컴파일하도록 강제할 수 있습니다. IE10 이하에서는 지원하지 않습니다. {{jsxref("Object/proto","__proto__")}} 설정자는 표준 선택 사항이므로, 모든 플랫폼에서 작동하지 않을 수 있습니다. 대신 거의 항상 {{jsxref("Object.setPrototypeOf")}}를 사용해야 합니다. +
    + +## 성능 + +프로토타입 체인에서 상위에 있는 속성에 대한 조회 시간은 성능에 부정적인 영향을 미칠 수 있으며, 이는 성능 중심의 코드에선 심각한 문제입니다. 또한, 존재하지도 않는 속성에 접근하려는 시도는 항상 모든 프로토타입 체인인 전체를 탐색하게 됩니다. + +또한, 객체의 속성을 반복할 때, 프로토타입 체인에 있는 **모든"** 열거 가능한 속성이 열거됩니다. 객체가 프로토타입 체인이 아닌 *itself*에 정의된 속성을 가지고 있는지 확인하려면, [`hasOwnProperty`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty) 또는 [`Object.hasOwn`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn) 메서드를 사용해야 합니다. `[[Prototype]]`으로 `null`이 있는 객체를 제외한 모든 객체는 프로토타입 체인에서 더 아래로 재정의되지 않는 한 `Object.prototype`에서 [`hasOwnProperty`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty)를 상속합니다. 구체적인 예를 제공하기 위해 위의 그래프 예제 코드를 사용하여 설명하겠습니다. -### 함수형 상속(Functional inheritance) +```js +function Graph() { + this.vertices = []; + this.edges = []; +} -함수형 상속(Functional inheritance)이라는 단어는 Douglas Crockford가 자신의 저서 "JavaScript: The Good Parts"에서 창조한 단어이다. 이 방법은 새 속성들을 연결형 상속으로 쌓되 상속 기능을 Factory 함수로 만들어 사용하는 방식이다. +Graph.prototype.addVertex = function (v) { + this.vertices.push(v); +}; -기존의 객체를 확장하는데 쓰이는 함수를 일반적으로 믹스인 함수라 칭한다. 객체 확장에 함수를 사용하는 가장 큰 이점은 Private Data를 클로져를 통해 캡슐화 시킬 수 있다는 점이다. +const g = new Graph(); +// g ---> Graph.prototype ---> Object.prototype ---> null -다르게 말하자면 Private 상태를 지정할 수 있다는 의미이다. +g.hasOwnProperty("vertices"); // true +Object.hasOwn(g, "vertices"); // true -특정 함수를 통할 필요 없이 public 접근이 가능한 속성에 대해 접근 제한을 거는 것은 문제가 있다. 따라서 private 클로져에 속성 값을 숨겨야 하며 이는 아래와 같이 구현한다: +g.hasOwnProperty("nope"); // false +Object.hasOwn(g, "nope"); // false -```js -// import Events from 'eventemitter3'; - -const rawMixin = function () { - const attrs = {}; - return Object.assign( - this, - { - set(name, value) { - attrs[name] = value; - this.emit("change", { - prop: name, - value: value, - }); - }, - get(name) { - return attrs[name]; - }, - }, - Events.prototype, - ); -}; +g.hasOwnProperty("addVertex"); // false +Object.hasOwn(g, "addVertex"); // false -const mixinModel = (target) => rawMixin.call(target); -const george = { name: "george" }; -const model = mixinModel(george); -model.on("change", (data) => console.log(data)); -model.set("name", "Sam"); -/* -{ - prop: 'name', - value: 'Sam' -} -*/ +Object.getPrototypeOf(g).hasOwnProperty("addVertex"); // true ``` -`attrs` 을 public 속성에서 private 영역으로 옮겨서 public API를 통한 접근을 차단할 수 있다. // 접근할 수 있는 유일한 방법은 Privileged 메소드 뿐이다. Privileged 메소드는 클로져 영역에 정의된 함수로 private data에 접근 가능한 함수들을 일컫는다. - -위 예제를 보면 믹스인 함수 `rawMixin()`.에 대한 래퍼로 `mixinModel()` 을 선언한 것을 알 수 있다. 이는 예제에서 {{jsxref("Function.prototype.call()")}} 을 사용했듯이 함수 내에서 `this`의 값을 설정해야 하기 때문이다. Wrapper를 생략하고 호출자가 알아서 하도록 놔둘 수 있지만 그럴 경우 혼동될 가능성이 있다. +참고: 속성이 [`undefined`](/ko/docs/Web/JavaScript/Reference/Global_Objects/undefined)인지 확인하는 것만으로는 충분하지 않습니다. 속성이 존재하나 단순히 값이 `undefined`인 경우도 있습니다. ## 결론 -복잡한 코드를 작성하여 이용하기 전에 프로토타입 기반의 상속 모델을 이해하는 것이 **중요하다**. 또한 프로토타입 체인의 길이는 성능을 저해하지 않도록 줄이는 방법을 고안해야 한다. 또한 빌트인 프로토타입은 새로운 자바스크립트 기능과 호환성을 갖기 위한 이유가 아닌 이상 **절대** 확장해서는 안된다. +JavaScript는 모두 동적이고 런타임이며 정적 타입이 전혀 없기 때문에, Java 또는 C++에서 온 개발자에게는 다소 혼란스러울 수 있습니다. 모든 것은 객체(인스턴스)이거나 함수(생성자)이며 함수 자체도 `Function` 생성자의 인스턴스입니다. 문법 구성인 "클래스"도 런타임에는 생성자 함수일 뿐입니다. + +JavaScript의 모든 생성자 함수에는 `new` 연산자와 함께 작동하는 `prototype`이라는 특수 속성이 있습니다. +프로토타입 객체에 대한 참조는 새 인스턴스의 내부 `[[Prototype]]` 속성에 복사됩니다. 예를 들어, `const a1 = new A()`를 수행하면, JavaScript(메모리에 객체를 생성한 후 `this`를 정의한 `A()`를 실행하기 전에)는 `a1.[[Prototype]] = A.prototype`을 설정합니다. 그런 다음 인스턴스의 속성에 접근하면, JavaScript는 먼저 해당 객체에 직접 존재하는지 여부를 확인하고, 그렇지 않은 경우 `[[Prototype]]`에서 찾습니다. `[[Prototype]]`은 원하는 값을 찾을 때까지 재귀적으로 탐색합니다. 즉, `a1.doSomething`, `Object.getPrototypeOf(a1).doSomething`, `Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething` 순서로 탐색하며, 값을 찾거나 `Object.getPrototypeOf`는 `null`일 때 탐색을 종료합니다. 이는 `prototype`에 정의된 모든 속성이 모든 인스턴스에서 효과적으로 공유되며, 나중에 `prototype`의 일부를 변경하고 변경 사항이 모든 기존 인스턴스에 나타나도록 할 수 있다는 것을 의미합니다. + +위의 예에서 `const a1 = new A(); const a2 = new A();`인 경우 `a1.doSomething`은 실제로 `Object.getPrototypeOf(a1).doSomething`을 참조하고, 이는 정의한 `A.prototype.doSomething`과 동일합니다. 즉, `Object.getPrototypeOf(a1).doSomething === Object.getPrototypeOf(a2).doSomething === A.prototype.doSomething`입니다. + +프로토타입 상속 모델을 사용하는 복잡한 코드를 작성하기 전에 프로토타입 상속 모델을 이해하는 것이 필수적입니다. 또한, 코드에서 프로토타입 체인의 길이를 파악하여 필요한 경우 성능 문제를 방지하기 위해 분할하세요. 또한, 내장 프로토타입은 최신 JavaScript 기능과의 호환성을 위한 경우가 아니면 **절대** 확장해서는 안 됩니다. From cfbf2895886ec9e6100d5ecf722a72b0db71fa09 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Wed, 20 Sep 2023 19:09:25 +0900 Subject: [PATCH 412/600] [ko] add index.md for `web/glossary/cross-site_scripting` (#15782) --- .../ko/glossary/cross-site_scripting/index.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 files/ko/glossary/cross-site_scripting/index.md diff --git a/files/ko/glossary/cross-site_scripting/index.md b/files/ko/glossary/cross-site_scripting/index.md new file mode 100644 index 00000000000000..d08911e0311ff6 --- /dev/null +++ b/files/ko/glossary/cross-site_scripting/index.md @@ -0,0 +1,19 @@ +--- +title: 크로스 사이트 스크립팅 (Cross-site scripting (XSS)) +slug: Glossary/Cross-site_scripting +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +크로스 사이트 스크립팅 (XSS)은 공격자가 웹사이트에 악성 클라이언트 사이드 코드를 삽입할 수 있도록 하는 보안 취약점 공격입니다. 이 악성 코드는 피해자에 의해 실행되며 공격자가 접근 제어를 우회하고 사용자로 위장할 수 있게 만들어 줍니다. 오픈 웹 애플리케이션 보안 프로젝트에 따르면, XSS는 2017년에 [7번째로 흔한 웹 앱 취약점]()이었습니다. + +웹 앱이 충분한 유효성 검사나 인코딩을 사용하지 않으면 이러한 공격은 성공하게 됩니다. 사용자의 브라우저는 신뢰할 수 없는 악성 스크립트를 탐지할 수 없고, 쿠키, 세션 토큰 또는 기타 민감한 사이트별 정보에 대한 접근 권한을 부여해버리거나 악성 스크립트가 {{glossary("HTML")}} 콘텐츠를 다시 작성할 수 있도록 합니다. + +## 같이 보기 + +- [공격 유형: 크로스 사이트 스크립팅 (XSS)](/ko/docs/Web/Security/Types_of_attacks#cross-site_scripting_xss) +- 위키백과의 [크로스 사이트 스크립팅](https://en.wikipedia.org/wiki/Cross-site_scripting) +- [OWASP의 크로스 사이트 스크립팅](https://owasp.org/www-community/attacks/xss/) +- [크로스 사이트 스크립팅에 대한 다른 글](https://www.acunetix.com/blog/articles/dom-xss-explained/) From fe3f9d25142145d1fdc171e770996142fe318fd5 Mon Sep 17 00:00:00 2001 From: root Date: Sat, 16 Sep 2023 17:30:08 +0900 Subject: [PATCH 413/600] =?UTF-8?q?=E7=94=A8=E8=AA=9E=E9=9B=86=20=E3=80=8C?= =?UTF-8?q?Node=E3=80=8D=E3=82=92=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/glossary/node/index.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 files/ja/glossary/node/index.md diff --git a/files/ja/glossary/node/index.md b/files/ja/glossary/node/index.md new file mode 100644 index 00000000000000..153178dfdaaa37 --- /dev/null +++ b/files/ja/glossary/node/index.md @@ -0,0 +1,12 @@ +--- +title: Node +slug: Glossary/Node +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +**node** という用語は文脈によっていくつかの意味を持ちます。下記の用語を指しているかもしれません。 + +{{GlossaryDisambiguation}} + +この用語は {{Glossary("Node.js")}} について話すときにも使われます。 From 947ed6338df0a370a2f282950b441c1b6112b12b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 16 Sep 2023 23:06:34 +0900 Subject: [PATCH 414/600] =?UTF-8?q?2023/02/28=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/messageevent/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/files/ja/web/api/messageevent/index.md b/files/ja/web/api/messageevent/index.md index 6a9fbc9d1279ce..303c70d64e01d1 100644 --- a/files/ja/web/api/messageevent/index.md +++ b/files/ja/web/api/messageevent/index.md @@ -2,7 +2,7 @@ title: MessageEvent slug: Web/API/MessageEvent l10n: - sourceCommit: bbecba9e7d688493adbdc37fc70e02d87adfe371 + sourceCommit: 2ba2c0efbdf0c34b1da02203e4e84b571c883629 --- {{APIRef("HTML DOM")}} @@ -16,7 +16,7 @@ l10n: - 文書間のメッセージ（{{domxref("Window.postMessage()")}} および {{domxref("Window.message_event")}} を参照）。 - [チャンネルメッセージ](/ja/docs/Web/API/Channel_Messaging_API) （{{domxref("MessagePort.postMessage()")}} および {{domxref("MessagePort.message_event")}} を参照）。 - ワーカー／文書間メッセージ（上記 2 項目ほか、{{domxref("Worker.postMessage()")}}, {{domxref("Worker.message_event")}}, {{domxref("ServiceWorkerGlobalScope.message_event")}} なども参照）。 -- [ブロードキャストチャンネル](/ja/docs/Web/API/Broadcast_Channel_API) ({{domxref("Broadcastchannel.postMessage()")}}) および {{domxref("BroadcastChannel.onmessage")}} を参照). +- [ブロードキャストチャンネル](/ja/docs/Web/API/Broadcast_Channel_API) ({{domxref("Broadcastchannel.postMessage()")}}) および {{domxref("BroadcastChannel.message_event")}} を参照). このイベントによって引き起こされる動作は、対応する `message` イベント（例えば、 上記の `onmessage` ハンドラーを使ったもの）のイベントハンドラーとして設定された関数の中で定義されています。 @@ -39,7 +39,7 @@ _このインターフェースは親である {{domxref("Event")}} からプロ - {{domxref("MessageEvent.lastEventId")}} {{ReadOnlyInline}} - : 文字列で、このイベントの一意の ID を表します。 - {{domxref("MessageEvent.source")}} {{ReadOnlyInline}} - - : `MessageEventSource` （{{domxref("WindowProxy")}}、{{domxref("MessagePort")}}、{{domxref("ServiceWorker")}} の何れかのオブジェクト）で、メッセージの送信元を表します。 + - : `MessageEventSource` （{{glossary("WindowProxy")}}、{{domxref("MessagePort")}}、{{domxref("ServiceWorker")}} の何れかのオブジェクト）で、メッセージの送信元を表します。 - {{domxref("MessageEvent.ports")}} {{ReadOnlyInline}} - : {{domxref("MessagePort")}} オブジェクトの配列で、メッセージが送信されるチャンネルに関連するポートを表します（チャンネルメッセージングや、共有ワーカーにメッセージを送信する場合など、適切な場合）。 @@ -50,7 +50,7 @@ _このインターフェースは親である {{domxref("Event")}} からメソ - {{domxref("MessageEvent.initMessageEvent","initMessageEvent()")}} {{deprecated_inline}} - : メッセージイベントを初期化します。**これ以上このメソッドを使用しないでください。代わりに、{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}} コンストラクターを使用してください。** -## 例> +## 例 [基本的な共有ワーカーの例](https://github.com/mdn/dom-examples/tree/main/web-workers/simple-shared-worker)（[共有ワーカーを実行](https://mdn.github.io/dom-examples/web-workers/simple-shared-worker/)）には 2 つの HTML ページがあり、それぞれのページが単純な計算をする JavaScript を実行しています。異なるスクリプトが計算を実行するために同一のワーカーファイルを使用しています。ページの異なるウィンドウ内で動作していても、どちらのスクリプトもワーカーファイルにアクセスできます。 From 35a6cbce1e6676b165027b0fb7e7d5ac1db02b69 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 17 Sep 2023 00:36:16 +0900 Subject: [PATCH 415/600] =?UTF-8?q?2023/04/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/messageevent/lasteventid/index.md | 5 +++-- files/ja/web/api/messageevent/messageevent/index.md | 11 ++++++----- files/ja/web/api/messageevent/origin/index.md | 3 ++- files/ja/web/api/messageevent/ports/index.md | 7 ++++--- files/ja/web/api/messageevent/source/index.md | 9 +++++---- 5 files changed, 20 insertions(+), 15 deletions(-) diff --git a/files/ja/web/api/messageevent/lasteventid/index.md b/files/ja/web/api/messageevent/lasteventid/index.md index 77d295937c131d..287fcc36ffd6ce 100644 --- a/files/ja/web/api/messageevent/lasteventid/index.md +++ b/files/ja/web/api/messageevent/lasteventid/index.md @@ -1,8 +1,9 @@ --- -title: MessageEvent.lastEventId +title: "MessageEvent: lastEventId プロパティ" +short-title: lastEventId slug: Web/API/MessageEvent/lastEventId l10n: - sourceCommit: 4b4638246aad5d39b9a2e5c572b179b4c39c0a84 + sourceCommit: 84f8672adab0fdb783d02676c42a2b7ae16b3606 --- {{APIRef("HTML DOM")}} diff --git a/files/ja/web/api/messageevent/messageevent/index.md b/files/ja/web/api/messageevent/messageevent/index.md index 74c105dd00a0ae..6b306577cc0699 100644 --- a/files/ja/web/api/messageevent/messageevent/index.md +++ b/files/ja/web/api/messageevent/messageevent/index.md @@ -1,8 +1,9 @@ --- -title: MessageEvent() +title: "MessageEvent: MessageEvent() コンストラクター" +short-title: MessageEvent() slug: Web/API/MessageEvent/MessageEvent l10n: - sourceCommit: b7556b71e1fc3e89057671b372871e9f33d3f0b8 + sourceCommit: 84f8672adab0fdb783d02676c42a2b7ae16b3606 --- {{APIRef("HTML DOM")}} @@ -11,9 +12,9 @@ l10n: ## 構文 -```js -new MessageEvent(type); -new MessageEvent(type, options); +```js-nolint +new MessageEvent(type) +new MessageEvent(type, options) ``` ### 引数 diff --git a/files/ja/web/api/messageevent/origin/index.md b/files/ja/web/api/messageevent/origin/index.md index dfd061a4afbc63..587f3979d563c7 100644 --- a/files/ja/web/api/messageevent/origin/index.md +++ b/files/ja/web/api/messageevent/origin/index.md @@ -1,5 +1,6 @@ --- -title: MessageEvent.origin +title: "MessageEvent: origin プロパティ" +short-title: origin slug: Web/API/MessageEvent/origin l10n: sourceCommit: 4b4638246aad5d39b9a2e5c572b179b4c39c0a84 diff --git a/files/ja/web/api/messageevent/ports/index.md b/files/ja/web/api/messageevent/ports/index.md index 58904836c77a5e..95d692dd97b825 100644 --- a/files/ja/web/api/messageevent/ports/index.md +++ b/files/ja/web/api/messageevent/ports/index.md @@ -1,8 +1,9 @@ --- -title: MessageEvent.ports +title: "MessageEvent: ports プロパティ" +short-title: ports slug: Web/API/MessageEvent/ports l10n: - sourceCommit: 4b4638246aad5d39b9a2e5c572b179b4c39c0a84 + sourceCommit: 84f8672adab0fdb783d02676c42a2b7ae16b3606 --- {{APIRef("HTML DOM")}} @@ -24,7 +25,7 @@ onconnect = (e) => { port.postMessage(workerResult); }); - port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter. + port.start(); // addEventListener を使用した場合は必要。 onmessage セッターからは暗黙に呼び出されます。 }; ``` diff --git a/files/ja/web/api/messageevent/source/index.md b/files/ja/web/api/messageevent/source/index.md index 5e9b20a10bf40b..3b93d831ac815f 100644 --- a/files/ja/web/api/messageevent/source/index.md +++ b/files/ja/web/api/messageevent/source/index.md @@ -1,17 +1,18 @@ --- -title: MessageEvent.source +title: "MessageEvent: source プロパティ" +short-title: source slug: Web/API/MessageEvent/source l10n: - sourceCommit: 4b4638246aad5d39b9a2e5c572b179b4c39c0a84 + sourceCommit: 84f8672adab0fdb783d02676c42a2b7ae16b3606 --- {{APIRef("HTML DOM")}} -**`source`** は {{domxref("MessageEvent")}} インターフェイスの読み取り専用プロパティで、メッセージ送信者を表す `MessageEventSource` （{{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, {{domxref("ServiceWorker")}} オブジェクトのいずれか）です。 +**`source`** は {{domxref("MessageEvent")}} インターフェイスの読み取り専用プロパティで、メッセージ送信者を表す `MessageEventSource` （{{glossary("WindowProxy")}}, {{domxref("MessagePort")}}, {{domxref("ServiceWorker")}} オブジェクトのいずれか）です。 ## 値 -メッセージ送信者を表す `MessageEventSource` （{{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, {{domxref("ServiceWorker")}} オブジェクトのいずれか）です。 +メッセージ送信者を表す `MessageEventSource` （{{glossary("WindowProxy")}}, {{domxref("MessagePort")}}, {{domxref("ServiceWorker")}} オブジェクトのいずれか）です。 ## 例 From 89027458d15d07998999cde34bf9fa28a166ca46 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 17 Sep 2023 00:39:30 +0900 Subject: [PATCH 416/600] =?UTF-8?q?2023/08/19=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/messageevent/data/index.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/files/ja/web/api/messageevent/data/index.md b/files/ja/web/api/messageevent/data/index.md index d755e9a64f0e15..0dc0408b447a8c 100644 --- a/files/ja/web/api/messageevent/data/index.md +++ b/files/ja/web/api/messageevent/data/index.md @@ -1,8 +1,9 @@ --- -title: MessageEvent.data +title: "MessageEvent: data プロパティ" +short-title: data slug: Web/API/MessageEvent/data l10n: - sourceCommit: 4b4638246aad5d39b9a2e5c572b179b4c39c0a84 + sourceCommit: 6a0f22ee0b3a854ed37271373cbc1d1099c0d361 --- {{APIRef("HTML DOM")}} @@ -11,7 +12,7 @@ l10n: ## 値 -このメッセージの送信元が送信するデータです。これはどの型でも構いません。 +このメッセージの送信元が送信するデータです。このイベントの発信元が何であるかによって、あらゆるデータ型になる可能性があります。 ## 例 From 0e40b53e04148614ec578f8f0958d7ebb4ae053b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Isma=C3=ABl=20Maurice?= <55036198+tisma95@users.noreply.github.com> Date: Wed, 20 Sep 2023 12:22:29 +0200 Subject: [PATCH 417/600] =?UTF-8?q?Translate=20pseudo=20classes=20&=20?= =?UTF-8?q?=C3=A9l=C3=A9ments=20(#15806)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Remove the reference section to be the same like english doc Set the doc according to english translation * Update files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md Co-authored-by: SphinxKnight --- .../index.md | 82 +++---------------- 1 file changed, 12 insertions(+), 70 deletions(-) diff --git a/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md index 2f0d358fbc6464..fcb88096f77259 100644 --- a/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md +++ b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md @@ -123,75 +123,17 @@ Dans l'exemple suivant, nous avons ajouté une chaîne vide en utilisant le pseu L'utilisation des pseudo-éléments `::before` et `::after` avec la propriété `content` est appelée "Generated Content" en CSS, et vous verrez souvent cette technique utilisée pour diverses tâches. Un bon exemple est le site [CSS Arrow Please](http://www.cssarrowplease.com/), qui vous aide à générer une flèche avec le CSS. Examinez le CSS lorsque vous créez votre flèche et vous verrez les pseudo-éléments {{cssxref("::before")}} and {{cssxref("::after")}}utilisés. Chaque fois que vous voyez ces sélecteurs, regardez la propriété {{cssxref("content")}} pour voir ce qui est ajouté au document. -## Section de référence - -Il existe un grand nombre de pseudo-classes et pseudo-éléments, une bonne liste de références est donc utile. Vous trouverez ci-dessous des tableaux les répertoriant, avec pour chacun le lien vers la page de référence sur MDN. Vous y trouverez toutes les informations sur leur utilisation. - -### Pseudo-classes - -| Sélecteur | Description | -| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{ Cssxref(":active") }} | Matches when the user activates (for example clicks on) an element. | -| {{ Cssxref(":any-link") }} | Matches both the `:link` and `:visited` states of a link. | -| {{ Cssxref(":blank") }} | Matches an [`` element](/fr/docs/Web/HTML/Element/input) whose input value is empty. | -| {{ Cssxref(":checked") }} | Matches a radio button or checkbox in the selected state. | -| {{ Cssxref(":current") }} | Matches the element, or an ancestor of the element, that is currently being displayed. | -| {{ Cssxref(":default") }} | Matches the one or more UI elements that are the default among a set of similar elements. | -| {{ Cssxref(":dir") }} | Select an element based on its directionality (value of the HTML [`dir`](/fr/docs/Web/HTML/Global_attributes/dir) attribute or CSS [`direction`](/fr/docs/Web/CSS/direction) property). | -| {{ Cssxref(":disabled") }} | Matches user interface elements that are in an disabled state. | -| {{ Cssxref(":empty") }} | Matches an element that has no children except optionally white space. | -| {{ Cssxref(":enabled") }} | Matches user interface elements that are in an enabled state. | -| {{ Cssxref(":first") }} | In [Paged Media](/fr/docs/Web/CSS/Paged_Media), matches the first page. | -| {{ Cssxref(":first-child") }} | Matches an element that is first among its siblings. | -| {{ Cssxref(":first-of-type") }} | Matches an element which is first of a certain type among its siblings. | -| {{ Cssxref(":focus") }} | Matches when an element has focus. | -| {{ Cssxref(":focus-visible")}} | Matches when an element has focus and the focus should be visible to the user. | -| {{ Cssxref(":focus-within") }} | Matches an element with focus plus an element with a descendent that has focus. | -| {{ Cssxref(":future") }} | Matches the elements after the current element. | -| {{ Cssxref(":hover") }} | Matches when the user hovers over an element. | -| {{ Cssxref(":indeterminate") }} | Matches UI elements whose value is in an indeterminate state, usually [checkboxes](/fr/docs/Web/HTML/Element/input/checkbox). | -| {{ Cssxref(":in-range") }} | Matches an element with a range when its value is in-range. | -| {{ Cssxref(":invalid") }} | Matches an element, such as an ``, in an invalid state. | -| {{ Cssxref(":lang") }} | Matches an element based on language (value of the HTML [lang](/fr/docs/Web/HTML/Global_attributes/lang) attribute). | -| {{ Cssxref(":last-child") }} | Matches an element which is last among its siblings. | -| {{ Cssxref(":last-of-type") }} | Matches an element of a certain type that is last among its siblings. | -| {{ Cssxref(":left") }} | In [Paged Media](/fr/docs/Web/CSS/CSS_Pages), matches left-hand pages. | -| {{ Cssxref(":link")}} | Matches unvisited links. | -| {{ Cssxref(":local-link")}} | Matches links pointing to pages that are in the same site as the current document. | -| {{ Cssxref(":is", ":is()")}} | Matches any of the selectors in the selector list that is passed in. | -| {{ Cssxref(":not") }} | Matches things not matched by selectors that are passed in as a value to this selector. | -| {{ Cssxref(":nth-child") }} | Matches elements from a list of siblings — the siblings are matched by a formula of the form _an+b_ (e.g. 2n + 1 would match elements 1, 3, 5, 7, etc. All the odd ones.) | -| {{ Cssxref(":nth-of-type") }} | Matches elements from a list of siblings that are of a certain type (e.g. `

    ` elements) — the siblings are matched by a formula of the form _an+b_ (e.g. 2n + 1 would match that type of element, numbers 1, 3, 5, 7, etc. All the odd ones.) | -| {{ Cssxref(":nth-last-child") }} | Matches elements from a list of siblings, counting backwards from the end. The siblings are matched by a formula of the form _an+b_ (e.g. 2n + 1 would match the last element in the sequence, then two elements before that, then two elements before that, etc. All the odd ones, counting from the end.) | -| {{ Cssxref(":nth-last-of-type") }} | Matches elements from a list of siblings that are of a certain type (e.g. `

    ` elements), counting backwards from the end. The siblings are matched by a formula of the form _an+b_ (e.g. 2n + 1 would match the last element of that type in the sequence, then two elements before that, then two elements before that, etc. All the odd ones, counting from the end.) | -| {{ Cssxref(":only-child") }} | Matches an element that has no siblings. | -| {{ Cssxref(":only-of-type") }} | Matches an element that is the only one of its type among its siblings. | -| {{ Cssxref(":optional") }} | Matches form elements that are not required. | -| {{ Cssxref(":out-of-range") }} | Matches an element with a range when its value is out of range. | -| {{ Cssxref(":past") }} | Matches the elements before the current element. | -| {{ Cssxref(":placeholder-shown") }} | Matches an input element that is showing placeholder text. | -| {{ Cssxref(":playing") }} | Matches an element representing an audio, video, or similar resource that is capable of being "played" or "paused", when that element is "playing". | -| {{ Cssxref(":paused") }} | Matches an element representing an audio, video, or similar resource that is capable of being "played" or "paused", when that element is "paused". | -| {{ Cssxref(":read-only") }} | Matches an element if it is not user-alterable. | -| {{ Cssxref(":read-write") }} | Matches an element if it is user-alterable. | -| {{ Cssxref(":required") }} | Matches form elements that are required. | -| {{ Cssxref(":right") }} | In [Paged Media](/fr/docs/Web/CSS/CSS_Pages), matches right-hand pages. | -| {{ Cssxref(":root") }} | Matches an element that is the root of the document. | -| {{ Cssxref(":scope") }} | Matches any element that is a scope element. | -| {{ Cssxref(":valid") }} | Matches an element such as an `` element, in a valid state. | -| {{ Cssxref(":target") }} | Matches an element if it is the target of the current URL (i.e. if it has an ID matching the current [URL fragment](https://en.wikipedia.org/wiki/Fragment_identifier)). | -| {{ Cssxref(":visited") }} | Matches visited links. | - -### Pseudo-éléments - -| Sélecteur | Description | -| --------------------------------- | ---------------------------------------------------------------------------------------- | -| {{ Cssxref("::after") }} | Matches a stylable element appearing after the originating element's actual content. | -| {{ Cssxref("::before") }} | Matches a stylable element appearing before the originating element's actual content. | -| {{ Cssxref("::first-letter") }} | Matches the first letter of the element. | -| {{ Cssxref("::first-line") }} | Matches the first line of the containing element. | -| {{ Cssxref("::grammar-error") }} | Matches a portion of the document containing a grammar error as flagged by the browser. | -| {{ Cssxref("::selection") }} | Matches the portion of the document that has been selected. | -| {{ Cssxref("::spelling-error") }} | Matches a portion of the document containing a spelling error as flagged by the browser. | +## Résumé + +Dans cet article, nous avons présenté les pseudo-classes et les pseudo-éléments CSS, qui sont des types particuliers de sélecteurs. + +Les pseudo-classes vous permettent de cibler un élément lorsqu'il se trouve dans un état particulier, comme si vous aviez ajouté une classe pour cet état au DOM. Les pseudo-éléments agissent comme si vous aviez ajouté un nouvel élément au DOM, et vous permettent de le styliser. Les pseudo-éléments `::before` et `::after` vous permettent d'insérer du contenu dans le document à l'aide de CSS. + +Dans le prochain article, nous aborderons [les combinateurs](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators). + +## Voir aussi + +- [La référence des pseudo-classes](/fr/docs/Web/CSS/Pseudo-classes) +- [La référence des pseudo-éléments](/fr/docs/Web/CSS/Pseudo-elements) {{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}} From a9518c8b08cfeb78a5f9f0f062743fbeee5f77ed Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Wed, 20 Sep 2023 13:02:44 +0200 Subject: [PATCH 418/600] Fix #14813 (#15889) Update to fix #14813 --- .../auto-placement_in_grid_layout/index.md | 154 ++++++------------ 1 file changed, 53 insertions(+), 101 deletions(-) diff --git a/files/fr/web/css/css_grid_layout/auto-placement_in_grid_layout/index.md b/files/fr/web/css/css_grid_layout/auto-placement_in_grid_layout/index.md index 100eddbb3fe2fa..2f629ee192cc2a 100644 --- a/files/fr/web/css/css_grid_layout/auto-placement_in_grid_layout/index.md +++ b/files/fr/web/css/css_grid_layout/auto-placement_in_grid_layout/index.md @@ -1,16 +1,18 @@ --- title: Le placement automatique sur une grille CSS slug: Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout +l10n: + sourceCommit: b906098e63b1eb3512b4381fe7c105b67037aff1 --- {{CSSRef}} -{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS","Web/CSS/CSS_Grid_Layout")}} - -En plus de pouvoir placer des objets de façon précise sur une grille, la spécification pour les grilles CSS définit le comportement obtenu lorsque certains des objets ne sont pas placés sur la grille (voire aucun). Pour voir comment fonctionne le placement automatique, il suffit de créer une grille avec un ensemble d'objets. Sans fournir aucune information de placement, ces objets se placeront chacun sur une cellule de la grille. +En plus de pouvoir placer des objets de façon précise sur une grille, la spécification pour les grilles CSS définit le comportement obtenu lorsque certains (voire aucun) des objets ne sont pas placés sur la grille. Pour voir comment fonctionne le placement automatique, il suffit de créer une grille avec un ensemble d'objets. ## Placement automatique +Sans fournir aucune information de placement, ces objets se placeront chacun sur une cellule de la grille. + ```css hidden * { box-sizing: border-box; @@ -49,17 +51,17 @@ En plus de pouvoir placer des objets de façon précise sur une grille, la spéc

    ``` -{{EmbedLiveSample('Placement_automatique', '500', '230')}} +{{EmbedLiveSample('', '500', '230')}} -## Définir des règles pour le placement automatique +## Les règles par défaut pour le placement automatique -Comme on peut le voir dans l'exemple précédent, si on crée une grille sans définir de placement, tous les objets occuperont chacun une cellule de la grille. Par défaut, les objets sont placés au fur et à mesure sur les lignes horizontales de la grille. Si on a créé des lignes supplémentaires avec `grid-template-rows`, les objets suivants seront placés sur ces lignes. En revanche, si la grille ne possède pas suffisamment de lignes sur la grille explicite, de nouvelles lignes, implicites, seront créées. +Comme on peut le voir dans l'exemple précédent, si on crée une grille sans définir de placement, tous les objets se placeront chacun sur une cellule de la grille. Par défaut, les objets sont placés au fur et à mesure sur les lignes horizontales de la grille. Si on a créé des lignes supplémentaires avec `grid-template-rows`, les objets suivants seront placés sur ces lignes. En revanche, si la grille ne possède pas suffisamment de lignes sur la grille explicite, de nouvelles lignes, _implicites_, seront créées. ### Dimensionner les lignes de la grille implicite Par défaut, les lignes implicites créées automatiquement ont une taille automatique. Autrement dit, elles seront dimensionnées pour contenir les éléments qu'elles doivent placer sans que ceux-ci dépassent. -Il est toutefois possible de contrôler la taille de ces lignes grâce à la propriété `grid-auto-rows`. Ainsi, si on veut que les lignes créées automatiquement mesurent 100 pixels de haut, on utilisera : +Il est toutefois possible de contrôler la taille de ces lignes grâce à la propriété `grid-auto-rows`. Ainsi, si on veut que les lignes créées automatiquement mesurent 100 pixels de haut, on utilisera : ```css hidden * { @@ -100,11 +102,11 @@ Il est toutefois possible de contrôler la taille de ces lignes grâce à la pro } ``` -{{EmbedLiveSample('Dimensionner_les_lignes_de_la_grille_implicite', '500', '330')}} +{{EmbedLiveSample('', '500', '330')}} -### Dimensionner les lignes avec minmax() +### Dimensionner les lignes avec `minmax()` -On peut utiliser la fonction {{cssxref("minmax","minmax()")}} pour la valeur de {{cssxref("grid-auto-rows")}} afin de créer des lignes avec une taille minimale mais qui puissent être plus grandes si le contenu est plus grand que cette taille minimale. +On peut utiliser la fonction [`minmax()`](/fr/docs/Web/CSS/minmax) pour la valeur de [`grid-auto-rows`](/fr/docs/Web/CSS/grid-auto-rows) afin de créer des lignes avec une taille minimale mais qui puissent être plus grandes si le contenu est plus grand que cette taille minimale. ```css hidden * { @@ -148,11 +150,11 @@ On peut utiliser la fonction {{cssxref("minmax","minmax()")}} pour la valeur de } ``` -{{EmbedLiveSample('Dimensionner_les_lignes_avec_minmax', '500', '330')}} +{{EmbedLiveSample('', '500', '330')}} ### Dimensionner les lignes avec une liste de pistes -On peut aussi passer en argument une liste de pistes qui se répèteront. Dans l'exemple ci-après, on crée une piste implicite pour une ligne de 100 pixels et une seconde de `200px`. Ce motif sera utilisé tant que du contenu sera ajouté à la grille implicite. +On peut aussi passer en argument une liste de pistes qui se répèteront. Dans l'exemple ci-après, on crée une piste implicite pour une ligne de 100 pixels et une seconde de 200 pixels. Ce motif sera utilisé tant que du contenu sera ajouté à la grille implicite. ```css hidden * { @@ -196,11 +198,11 @@ On peut aussi passer en argument une liste de pistes qui se répèteront. Dans l } ``` -{{EmbedLiveSample('Dimensionner_les_lignes_avec_une_liste_de_pistes', '500', '330')}} +{{EmbedLiveSample('', '500', '480')}} -### Utiliser le placement automatique pour les colonnes +### Utiliser le placement automatique avec les colonnes -On peut également paramétrer la grille pour que les objets soient placés automatiquement en suivant les colonnes de la grille. Pour obtenir ce résultat, on utilisera la propriété {{cssxref("grid-auto-flow")}} avec la valeur `column`. Dans ce cas, la grille ajoutera les objets dans les lignes verticales définies avec {{cssxref("grid-template-rows")}}. Lorsqu'une colonne sera pleine, les prochains objets seront placés dans la colonne explicite suivante ou dans une colonne implicite créée automatiquement s'il n'y a plus assez de colonnes explicites. La taille des pistes pour les colonnes implicites peut être définie avec {{cssxref("grid-auto-columns")}}, cette dernière fonctionne de façon analogue à {{cssxref("grid-auto-rows")}}. +On peut également paramétrer la grille pour que les objets soient placés automatiquement en suivant les colonnes de la grille. Pour obtenir ce résultat, on utilisera la propriété [`grid-auto-flow`](/fr/docs/Web/CSS/grid-auto-flow) avec la valeur `column`. Dans ce cas, la grille ajoutera les objets dans les lignes verticales définies avec [`grid-template-rows`](/fr/docs/Web/CSS/grid-template-rows). Lorsqu'une colonne sera pleine, les prochains objets seront placés dans la colonne explicite suivante ou dans une colonne implicite créée automatiquement s'il n'y a plus assez de colonnes explicites. La taille des pistes pour les colonnes implicites peut être définie avec [`grid-auto-columns`](/fr/docs/Web/CSS/grid-auto-columns), cette dernière fonctionne de façon analogue à [`grid-auto-rows`](/fr/docs/Web/CSS/grid-auto-rows). Dans le prochain exemple, on crée une grille avec trois lignes qui mesurent chacune 200 pixels de haut. On utilise le placement automatique en colonne. La première colonne qui sera créée mesurera 300 pixels de large, ensuite on aura une colonne de 100 pixels de large et ainsi de suite jusqu'à ce que tous les éléments puissent être placés. @@ -247,19 +249,19 @@ Dans le prochain exemple, on crée une grille avec trois lignes qui mesurent cha
    ``` -{{EmbedLiveSample('Utiliser_le_placement_automatique_pour_les_colonnes', '500', '640')}} +{{EmbedLiveSample('', '500', '640')}} ## L'ordre des éléments placés automatiquement -Une grille peut contenir un mélange d'éléments. Certains éléments peuvent avoir une position définie et d'autres être placés automatiquement. Ce placement automatique peut s'avérer utile lorsque l'ordre des éléments dans le document est celui qu'on veut utiliser pour organiser la grille : il n'y a alors pas besoin d'écrire de règles CSS pour positionner les éléments un par un. La spécification détaille exhaustivement [l'algorithme de placement des objets sur la grille](https://drafts.csswg.org/css-grid/#auto-placement-algo), mais voyons ici les quelques règles simples qu'il faut principalement retenir. +Une grille peut contenir un mélange d'éléments. Certains éléments peuvent avoir une position définie et d'autres être placés automatiquement. Ce placement automatique peut s'avérer utile lorsque l'ordre des éléments dans le document est celui qu'on veut utiliser pour organiser la grille : il n'y a alors pas besoin d'écrire de règles CSS pour positionner les éléments un par un. La spécification détaille exhaustivement [l'algorithme de placement des objets sur la grille](https://drafts.csswg.org/css-grid/#auto-placement-algo), mais voyons ici les quelques règles simples qu'il faut principalement retenir. ### Modification de l'ordre du document -Le placement des éléments qui n'ont pas eu d'ordre défini sont placés selon l'algorithme décrit dans la section _"order modified document order"_. Cela signifie que si on utilise uniquement la propriété `order`, les éléments seront placés selon cet ordre plutôt que selon l'ordre indiqué par le DOM. Sinon, l'ordre des éléments sera celui décrit par le document source. +Le placement des éléments qui n'ont pas eu d'ordre défini sont placés selon l'algorithme décrit dans la section _« order modified document order »_. Cela signifie que si on utilise uniquement la propriété `order`, les éléments seront placés selon cet ordre plutôt que selon l'ordre indiqué par le DOM. Sinon, l'ordre des éléments sera celui décrit par le document source. ### Les éléments avec des propriétés de placement -La grille commencera par placer les éléments pour lesquels on a défini une position. Dans l'exemple qui suit, on a une grille avec 12 éléments, l'élément 2 et l'élément 5 sont placés en utilisant les lignes. On put voir comment ces deux éléments sont placés et comment les autres sont placés automatiquement dans les espaces restants. Les objets placés automatiquement seront placés avant les éléments qui sont placés, dans l'ordre du DOM. +La grille commencera par placer les éléments pour lesquels on a défini une position. Dans l'exemple qui suit, on a une grille avec 12 éléments, l'élément 2 et l'élément 5 sont placés en utilisant les lignes. On peut voir comment ces deux éléments sont placés et comment les autres sont placés automatiquement dans les espaces restants. Les objets placés automatiquement seront placés avant les éléments qui sont placés, dans l'ordre du DOM, ils ne commencent pas après la position d'un élément placé qui les précède. ```css hidden * { @@ -315,13 +317,13 @@ La grille commencera par placer les éléments pour lesquels on a défini une po } ``` -{{EmbedLiveSample('Les_éléments_avec_des_propriétés_de_placement', '500', '450')}} +{{EmbedLiveSample('', '500', '450')}} ### Gérer les éléments qui s'étalent sur plusieurs pistes -On peut utiliser les propriétés de placement tout en tirant parti du placement automatique. Dans le prochain exemple, on complète la disposition en indiquant que les éléments 1, 4 et 9 (4n+1) doivent occuper deux pistes, pour les colonnes et pour les lignes. Pour obtenir ce résultat, on utilise les propriétés {{cssxref("grid-column-end")}} et {{cssxref("grid-row-end")}} avec la valeur `span 2`. La ligne de début sera déterminée automatiquement et la ligne de fin sera deux pistes plus loin. +On peut utiliser les propriétés de placement tout en tirant parti du placement automatique. Dans le prochain exemple, on complète la disposition en indiquant que les éléments 1, 5 et 9 (4n+1) doivent occuper deux pistes, pour les colonnes et pour les lignes. Pour obtenir ce résultat, on utilise les propriétés [`grid-column-end`](/fr/docs/Web/CSS/grid-column-end) et [`grid-row-end`](/fr/docs/Web/CSS/grid-row-end) avec la valeur `span 2`. La ligne de début sera déterminée automatiquement et la ligne de fin sera deux pistes plus loin. -On peut voir coment cela laisse des espaces dans la grille car lorsqu'un élément placé automatiquement n'a pas suffisamment de place sur une piste, une nouvelle ligne sera créée jusqu'à ce que l'élément ait la place. +On peut voir comment cela laisse des espaces dans la grille, car lorsqu'un élément placé automatiquement n'a pas suffisamment de place sur une piste, une nouvelle ligne sera créée jusqu'à ce que l'élément ait la place. ```css hidden * { @@ -381,15 +383,15 @@ On peut voir coment cela laisse des espaces dans la grille car lorsqu'un éléme } ``` -{{EmbedLiveSample('Gérer_les_éléments_qui_sétalent_sur_plusieurs_pistes', '500', '770')}} +{{EmbedLiveSample('', '500', '770')}} ### Combler les espaces -En dehors des éléments placés explicitement, la grille place les éléments automatiques en respectant l'ordre du DOM. C'est généralement le résultat qu'on souhaite lorsqu'on met en forme un document comme un formulaire. Toutefois on veut parfois obtenir une disposition plus dense, sans vide entre les différents éléments. +En dehors des éléments placés explicitement, la grille place les éléments automatiques en respectant l'ordre du DOM. C'est généralement le résultat qu'on souhaite lorsqu'on met en forme un document comme un formulaire (on ne voudrait pas que les libellés et les champs soient mélangés pour combler certains trous). Toutefois, on dispose parfois des éléments pour lesquels l'ordre logique n'a pas d'importance et où on veut obtenir une disposition plus dense, sans vide entre les différents éléments. -Pour cela, sur le conteneur, on ajoute la propriété {{cssxref("grid-auto-flow")}} avec la valeur `dense`. C'est la même propriété qu'on utilise pour modifier l'ordre du flux avec `column`. On peut aussi obtenir une disposition dense, rangée par colonne en utilisant les deux valeurs pour la propriété : `grid-auto-flow: column dense`. +Pour cela, sur le conteneur, on ajoute la propriété [`grid-auto-flow`](/fr/docs/Web/CSS/grid-auto-flow) avec la valeur `dense`. C'est la même propriété qu'on utilise pour modifier l'ordre du flux avec `column`. On peut aussi obtenir une disposition dense, rangée par colonne en utilisant les deux valeurs pour la propriété : `grid-auto-flow: column dense`. -Avec cette valeur, la grille cherchera donc à combler les espaces qu'elle a laissés quitte à ne pas respecter l'ordre du DOM. En revanche, l'ordre de la navigation au clavier (_tab order_) suivra toujours l'ordre du document. Nous étudierons cet aspect plus en détails dans [un article sur l'accessibilité](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité). +Avec cette valeur, la grille cherchera donc à combler les espaces qu'elle a laissés, quitte à ne pas respecter l'ordre du DOM. Cela ne modifiera pas l'ordre logique des éléments. Par exemple, l'ordre de la navigation au clavier suivra toujours l'ordre du document. Nous étudierons cet aspect plus en détails dans [un article sur l'accessibilité](/fr/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility). Pour résumer, il faut faire attention quand on détache l'ordre visuel de l'ordre d'affichage. ```css hidden * { @@ -450,80 +452,34 @@ Avec cette valeur, la grille cherchera donc à combler les espaces qu'elle a lai } ``` -{{EmbedLiveSample('Combler_les_espaces', '500', '730')}} +{{EmbedLiveSample('', '500', '730')}} ### Les éléments anonymes de la grille -Dans la spécification, on utilise le concept d'élément anonyme. Ces éléments sont ceux qui sont créés lorsqu'on a une chaîne de caractères dans le conteneur de la grille et que celle-ci n'est pas contenue dans un autre élément. Dans l'exemple ci-après, on a trois éléments sur la grille : le premier est un élément anonyme car il n'est placé dans aucun élément, il sera alors placé automatiquement. Les deux éléments suivants sont placés dans des `div` et peuvent être placés automatiquement ou grâce à une autre méthode de positionnement. +Dans la spécification, on utilise le concept d'élément anonyme. Ces éléments sont ceux qui sont créés lorsqu'on a une chaîne de caractères dans le conteneur de la grille et que celle-ci n'est pas contenue dans un autre élément. Dans l'exemple ci-après, on a trois éléments sur la grille : -```css +- Le premier est un élément anonyme, car il n'est placé dans aucun élément, il sera alors placé automatiquement. +- Les deux éléments suivants sont placés dans des `div` et peuvent être placés automatiquement ou grâce à une autre méthode de positionnement. + +```html
    - Je suis une chaîne de caractères et je serai placé - automatiquement. + Je suis une chaîne de caractères et je serai placée automatiquement.
    Un élément de la grille
    Un élément de la grille
    ``` -Les éléments anonymes sont toujours placés automatiquement car on ne peut pas les cibler autrement. Aussi, si on a du texte sans balise dans la grille, il faut se rappeler que celui-ci peut être placé à un endroit imprévu du fait des règles de placement automatique. +Les éléments anonymes sont toujours placés automatiquement, car on ne peut pas les cibler autrement. Aussi, si on a du texte sans balise dans la grille, il faut se rappeler que celui-ci peut être placé à un endroit imprévu du fait des règles de placement automatique. ### Les cas d'utilisation pour le placement automatique -Le placement automatique peut être utile lorsqu'on a un ensemble d'objets qui se ressemblent. Ce peut être des éléments qui n'ont pas d'ordre logique particulier : une galerie de photos, une liste de produits. Dans ces cas de figure, on peut choisir d'utiliser une disposition dense afin de combler les trous de la grille. Dans l'exemple qui représente la galerie d'images, on a certaines images en paysage et d'autres en portrait (lorsqu'on utilise la classe `landscape` l'élément s'étend sur deux colonnes). On utilise ensuite `grid-auto-flow: dense` afin de créer une grille dense. - -```css -.wrapper { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); - grid-gap: 10px; - grid-auto-flow: dense; - list-style: none; - margin: 1em auto; - padding: 0; - max-width: 800px; -} -.wrapper li { - border: 1px solid #ccc; -} -.wrapper li.landscape { - grid-column-end: span 2; -} -.wrapper li img { - display: block; - object-fit: cover; - width: 100%; - height: 100%; -} -``` - -```html -
      -
    • placeholder
      • -
    • - placeholder -
      • -
    • - placeholder -
      • -
    • - placeholder -
      • -
    • placeholder
      • -
    • placeholder
      • -
    • - placeholder -
      • -
    • placeholder
      • -
    • placeholder
      • -
    • placeholder
      • -
    -``` +Le placement automatique peut être utile lorsqu'on a un ensemble d'objets qui se ressemblent. Ce peut être des éléments qui n'ont pas d'ordre logique particulier : une galerie de photos, une liste de produits. Dans ces cas de figure, on peut choisir d'utiliser une disposition dense afin de combler les trous de la grille. Dans l'exemple qui représente la galerie d'images, on a certaines images en paysage et d'autres en portrait (lorsqu'on utilise la classe `landscape` l'élément s'étend sur deux colonnes). On utilise ensuite `grid-auto-flow: dense` afin de créer une grille dense. -{{EmbedLiveSample('Les_cas_dutilisation_pour_le_placement_automatique', '500', '1300')}} +Dans l'exemple qui suit, retirez la ligne `grid-auto-flow: dense` pour voir la réorganisation du contenu et les espaces que cela crée. -Le placement automatique peut également aider à disposer des éléments d'interface utilisateur qui ont un ordre logique. Dans l'exemple suivant, on voit comment manipuler les listes de définition. Les listes de définition sont intéressantes car il n'y a pas de niveau de regroupement pour regrouper un terme et ses définitions. Dans cet exemple, on autorise le placement automatique mais on a une classe pour qu'un élément `dt` démarre sur la première ligne et que l'élément `dd` sur la ligne 2. On s'assure ainsi que les termes sont bien en face de chaque définition, peu importe le nombre de définitions qu'on a pour un terme. +{{EmbedGHLiveSample("css-examples/grid/docs/autoplacement.html", '100%', 1200)}} -### Autre exemple +Le placement automatique peut également aider lorsqu'on dispose des éléments d'interface sans ordre logique. Dans l'exemple qui suit, on a une liste de définitions. Dans une telle liste, rien ne regroupe particulièrement plusieurs éléments `
    ` et `
    `. Ici, on autorise le placement automatique tout en utilisant des classes pour que les `
    ` soient dans la colonne 1 et les `
    ` dans la colonne 2. On s'assure ainsi que les termes et leurs définitions seront bien l'un en face de l'autre, quel que soit le nombre de définitions pour un terme. ```css hidden * { @@ -540,15 +496,15 @@ Le placement automatique peut également aider à disposer des éléments d'inte ```html
    -
    Mammals
    -
    Cat
    -
    Dog
    -
    Mouse
    -
    Fish
    -
    Guppy
    -
    Birds
    -
    Pied Wagtail
    -
    Owl
    +
    Mammifères
    +
    Chat
    +
    Chien
    +
    Souris
    +
    Poisson
    +
    Poisson rouge
    +
    Oiseaux
    +
    Bergeronnette
    +
    Hiboux
    ``` @@ -570,14 +526,10 @@ dd { } ``` -{{EmbedLiveSample('Autre_exemple', '500', '230')}} - -> **Note :** Voir [cet article de SitePoint](https://www.sitepoint.com/understanding-masonry-layout/) à propos de la disposition en briques pour d'autres cas d'utilisation. - -## Qu'est-ce que le placement automatique ne permet pas de réaliser (actuellement) ? +{{EmbedLiveSample('', '500', '230')}} -Certaines questions se posent encore. Actuellement on ne peut pas cibler toutes les autres cellules de la grille. On ne peut pas non plus définir une règle pour « placer tous les éléments automatiquement après la prochaine ligne intitulée `n` » (pour que certaines lignes soient sautées). Cette question [est décrite sur le dépôt GitHub du CSSWG](https://github.com/w3c/csswg-drafts/issues/796), n'hésitez pas à ajouter vos exemples de scénarios. +## Qu'est-ce que le placement automatique ne permet pas de réaliser (actuellement) ? -Si vous rencontrez des cas d'utilisation problématiques avec le placement automatique et les grilles, vous pouvez consulter les _issues_ existantes et les compléter ou ajouter les vôtres. Cela permettra que les prochaines versions de la spécification soient meilleures. +Certaines questions se posent encore. Actuellement on ne peut pas cibler toutes les autres cellules de la grille. On ne peut pas non plus définir une règle pour « placer tous les éléments automatiquement après la prochaine ligne intitulée `n` » (pour que certaines lignes soient sautées). Cette question [est décrite sur le dépôt GitHub du CSSWG](https://github.com/w3c/csswg-drafts/issues/796), n'hésitez pas à ajouter vos exemples de scénarios. -{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS","Web/CSS/CSS_Grid_Layout")}} +Si vous rencontrez des cas d'utilisation problématiques avec le placement automatique et les grilles, vous pouvez consulter les issues existantes et les compléter ou ajouter les vôtres. Cela permettra que les prochaines versions de la spécification soient meilleures. From 5adfed8c0b349fa2ca14a491912e09bc0aee9c1b Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Wed, 20 Sep 2023 13:03:05 +0200 Subject: [PATCH 419/600] Fix #15129 (#15928) Update and fix #15129 --- .../8-horizontal-tb.png | Bin 0 -> 5691 bytes .../index.md | 113 +++++++++++------- 2 files changed, 71 insertions(+), 42 deletions(-) create mode 100644 files/fr/web/css/css_grid_layout/grids_logical_values_and_writing_modes/8-horizontal-tb.png diff --git a/files/fr/web/css/css_grid_layout/grids_logical_values_and_writing_modes/8-horizontal-tb.png b/files/fr/web/css/css_grid_layout/grids_logical_values_and_writing_modes/8-horizontal-tb.png new file mode 100644 index 0000000000000000000000000000000000000000..4b833aa98e54b4edea3262ce68f0d4a9e9f6b996 GIT binary patch literal 5691 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 Fe*v>8?GFF| literal 0 HcmV?d00001 diff --git a/files/fr/web/css/css_grid_layout/grids_logical_values_and_writing_modes/index.md b/files/fr/web/css/css_grid_layout/grids_logical_values_and_writing_modes/index.md index e44b4acf2fcb58..6d44345c2ae61a 100644 --- a/files/fr/web/css/css_grid_layout/grids_logical_values_and_writing_modes/index.md +++ b/files/fr/web/css/css_grid_layout/grids_logical_values_and_writing_modes/index.md @@ -1,17 +1,17 @@ --- title: Les grilles CSS, les valeurs logiques et les modes d'écriture slug: Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes +l10n: + sourceCommit: f224dbe80c60289cd8b7d2bf92871d091e0f5d0d --- {{CSSRef}} -{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité","Web/CSS/CSS_Grid_Layout")}} - -Dans les articles précédents, nous avons évoqué un aspect important de la disposition en grille : la prise en charge des différents modes d'écriture. Dans ce guide, nous nous intéresserons plus particulièrement à cette fonctionnalité ainsi qu'aux autres méthodes modernes de disposition. Cela sera également l'occasion d'en apprendre plus sur les modes d'écritures et la notion de propriété logique/physique. +Dans les articles précédents, nous avons évoqué un aspect important de la disposition en grille : la prise en charge des différents modes d'écriture. Dans ce guide, nous nous intéresserons plus particulièrement à cette fonctionnalité ainsi qu'aux autres méthodes modernes de disposition. Cela sera également l'occasion d'en apprendre plus sur les modes d'écritures et la notion de propriété logique/physique. ## Les propriétés logiques, les propriétés physiques et les valeurs -CSS possède de nombreux mots-clés qui permettent de positionner **physiquement** les éléments : `left`, `right`, `top`, `bottom`… Si on positionne un élément de façon absolue, on utilisera ces mots-clés physiques comme valeurs pour indiquer le décalage de l'élément. Dans le fragment de code suivant, l'élément est décalé de 20 pixels depuis le haut du conteneur et de 30 pixels depuis le bord gauche du conteneur. +CSS possède de nombreux mots-clés qui permettent de positionner **physiquement** les éléments : `left`, `right`, `top`, `bottom`… Si on positionne un élément de façon absolue, on utilisera ces mots-clés physiques comme valeurs pour indiquer le décalage de l'élément. Dans le fragment de code suivant, l'élément est décalé de 20 pixels depuis le haut du conteneur et de 30 pixels depuis le bord gauche du conteneur. ```css .container { @@ -30,15 +30,48 @@ CSS possède de nombreux mots-clés qui permettent de positionner **physiquement
    • ``` -On rencontre également ces mots-clés physiques avec `text-align: right` afin d'aligner le texte à droite. Il existe aussi des propriétés **physiques** en CSS. On ajoute des marges, du remplissage, des bordures grâces à cs propriétés physiques comme {{cssxref("margin-left")}}, {{cssxref("padding-left")}}, etc. +On rencontre également ces mots-clés physiques avec `text-align: right` afin d'aligner le texte à droite. Il existe aussi des propriétés **physiques** en CSS. On ajoute des marges, du remplissage, des bordures grâces à cs propriétés physiques comme [`margin-left`](/fr/docs/Web/CSS/margin-left), [`padding-left`](/fr/docs/Web/CSS/padding-left), etc. + +On qualifie ces propriétés de physiques, car elles concernent l'écran qu'on regarde : la gauche sera toujours la gauche, quelle que soit la direction du texte. + +### Les problèmes des propriétés physiques + +Cela peut devenir un problème lorsqu'on développe un site qui doit fonctionner avec plusieurs langues dont certaines sont écrites de droite à gauche et non de gauche à droite. Les navigateurs savent plutôt bien gérer les différentes directions d'écriture. Dans l'exemple qui suit, on a deux paragraphes. Pour le deuxième, aucune propriété [`text-align`](/fr/docs/Web/CSS/text-align) n'est utilisée, alors que pour le second, on utilise `text-align` avec `left` et on ajoute `dir="rtl"` sur l'élément HTML ce qui a pour effet de changer la direction d'écriture. On peut voir que, dans le second paragraphe, la direction change et le texte est écrit de droite à gauche. Dans le premier cependant, avec `text-align value: left`, l'alignement reste à gauche. + +```html hidden +

    + Pour ce paragraphe, on a text-align: left, il sera donc toujours + aligné à gauche, même si le sens d'écriture du document va de droite à gauche + (rtl). +

    + +

    + Aucun alignement imposé sur ce paragraphe, il suit la direction du document. +

    +``` -On qualifie ces propriétés de physiques car elles concernent l'écran qu'on regarde : la gauche sera toujours la gauche, quelle que soit la direction du texte. +```css hidden +body { + direction: rtl; +} + +p { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + margin: 1em; + color: #d9480f; +} -Cela peut devenir un problème lorsqu'on développe un site qui doit fonctionner avec plusieurs langues dont certaines sont écrites de droite à gauche et non de gauche à droite. Les navigateurs savent plutôt bien gérer les différentes directions d'écriture. Dans l'exemple qui suit, on a deux paragraphes. Pour le deuxième, aucune propriété {{cssxref("text-align")}} n'est utilisée, alors que pour le second, on utilise `text-align` avec `left` et on ajoute `dir="rtl"` sur l'élément HTML ce qui a pour effet de changer la direction d'écriture. On peut voir que, dans le second paragraphe, la direction change et le texte est écrit de droite à gauche. Dans le premier cependant, avec `text-align value: left`, l'alignement reste à gauche. +.left { + text-align: left; +} +``` -![A simple example of text direction.](8_direction_simple_example.png) +{{EmbedLiveSample("","",200)}} -Cela illustre un problème fréquent avec les propriétés et valeurs physiques en CSS : elles empêchent le navigateur de passer correctement d'un mode d'écriture à l'autre. +Cela illustre un problème fréquent avec les propriétés et valeurs physiques en CSS : en supposant que le texte est toujours écrit de gauche à droite et de bas en haut, elles empêchent le navigateur de passer correctement d'un mode d'écriture à l'autre. ### Les propriétés et valeurs logiques @@ -46,17 +79,17 @@ Les propriétés et les valeurs logiques n'émettent pas d'hypothèse quant à l ## L'axe de bloc et l'axe en ligne -Lorsqu'on commence à travailler avec les propriétés logiques plutôt qu'avec les propriétés physiques, on cesse de voir le monde comme un espace qui va de gauche à droite et de haut en bas. Il faut de nouveaux axes de références : l'axe de bloc (_block axis_ en anglais) et l'axe en ligne (_inline axis_). Le premier est l'axe orthogonal au sens d'écriture et le second est l'axe dans lequel on écrit. Ces axes _logiques_ sont très utiles et on comprend mieux leurs rôles sur la grille. +Lorsqu'on commence à travailler avec les propriétés logiques plutôt qu'avec les propriétés physiques, on cesse de voir le monde comme un espace qui va de gauche à droite et de haut en bas. Il faut de nouveaux axes de références : l'axe de bloc (block axis en anglais) et l'axe en ligne (inline axis en anglais). Le premier est l'axe orthogonal au sens d'écriture et le second est l'axe dans lequel on écrit. Ces axes _logiques_ sont très utiles et on comprend mieux leurs rôles sur la grille. -![An image showing the default direction of the Block and Inline Axes.](8-horizontal-tb.png) +![Une image illustrant la direction par défaut pour l'axe de bloc et l'axe en ligne.](8-horizontal-tb.png) ## Les modes d'écriture CSS -Nous allons ici aborder une autre spécification que nous allons utiliser dans nos exemples : la spécification CSS sur les modes d'écriture (_CSS Writing Modes_). Cette spécification régit comment les différents modes d'écriture peuvent être utilisés en CSS, pas seulement pour prendre en charge différentes langues mais aussi pour créer des effets artistiques. Nous allons utiliser la propriété {{cssxref("writing-mode")}} afin de modifier le mode d'écriture appliqué à la grille pour observer comment fonctionnent les valeurs logiques. Si vous souhaitez approfondir ces notions autour des modes d'écriture, vous pouvez consulter l'article [_CSS Writing Modes_ (en anglais)](https://24ways.org/2016/css-writing-modes/) écrit par Jen Simmons. +Nous allons ici aborder une autre spécification que nous allons utiliser dans nos exemples : la spécification CSS sur les modes d'écriture (CSS Writing Modes). Cette spécification régit comment les différents modes d'écriture peuvent être utilisés en CSS, pas seulement pour prendre en charge différentes langues mais aussi pour créer des effets artistiques. Nous allons utiliser la propriété [`writing-mode`](/fr/docs/Web/CSS/writing-mode) afin de modifier le mode d'écriture appliqué à la grille pour observer comment fonctionnent les valeurs logiques. Si vous souhaitez approfondir ces notions autour des modes d'écriture, vous pouvez consulter [l'article CSS Writing Modes (en anglais), écrit par Jen Simmons](https://24ways.org/2016/css-writing-modes/). ### `writing-mode` -Les modes d'écriture ne se limitent pas à l'écriture de droite à gauche ou de gauche à droite, la propriété `writing-mode` nous permet d'afficher du texte dans plusieurs directions. La propriété {{cssxref("writing-mode")}} peut prendre les valeurs suivantes : +Les modes d'écriture ne se limitent pas à l'écriture de droite à gauche ou de gauche à droite, la propriété `writing-mode` nous permet d'afficher du texte dans plusieurs directions. La propriété [`writing-mode`](/fr/docs/Web/CSS/writing-mode) peut prendre les valeurs suivantes : - `horizontal-tb` - `vertical-rl` @@ -64,7 +97,7 @@ Les modes d'écriture ne se limitent pas à l'écriture de droite à gauche ou d - `sideways-rl` - `sideways-lr` -Sur le Web, c'est la valeur `horizontal-tb` qui est la valeur par défaut pour le texte. C'est dans cette direction que vous lisez cet article. Les autres valeurs changeront la façon dont le texte est écrit sur le document et correspondent aux modes d'écriture utilisés dans d'autres langues. Dans l'exemple qui suit, on a deux paragraphes, le premier utilise la valeur par défaut `horizontal-tb` et le second utilise la valeur `vertical-rl`. Dans ce deuxième mode, le texte est toujours écrit de gauche à droite mais la direction du texte est verticale. Dans ce deuxième paragraphe, l'axe en ligne (_inline_) est donc l'axe vertical. +Sur le Web, c'est la valeur `horizontal-tb` qui est la valeur par défaut pour le texte. C'est dans cette direction que vous lisez cet article. Les autres valeurs changeront la façon dont le texte est écrit sur le document et correspondent aux modes d'écriture utilisés dans d'autres langues. Dans l'exemple qui suit, on a deux paragraphes, le premier utilise la valeur par défaut `horizontal-tb` et le second utilise la valeur `vertical-rl`. Dans ce deuxième mode, le texte est toujours écrit de gauche à droite mais la direction du texte est verticale. Dans ce deuxième paragraphe, l'axe en ligne est donc l'axe vertical. ```css hidden .wrapper > p { @@ -89,7 +122,7 @@ Sur le Web, c'est la valeur `horizontal-tb` qui est la valeur par défaut pour l
    ``` -{{EmbedLiveSample("writing-mode", '500', '420')}} +{{EmbedLiveSample("", '500', '420')}} ## La gestion des modes d'écriture avec une grille @@ -97,7 +130,7 @@ Si on reprend l'exemple avec la grille, on comprend mieux l'effet du changement ### Mode d'écriture par défaut -Dans le prochain exemple, la grille possède trois colonnes et deux lignes. Cela signifie qu'il y a trois pistes qui traversent l'axe de bloc. Avec le mode d'écriture par défaut, la grille commence par placer les objets en haut à gauche en remplissant les trois cellules sur la première ligne avant de passer à la suivante, en formant une nouvelle ligne, etc. +Dans le prochain exemple, la grille possède trois colonnes et deux pistes. Cela signifie qu'il y a trois pistes qui traversent l'axe de bloc. Avec le mode d'écriture par défaut, la grille commence par placer les objets en haut à gauche en remplissant les trois cellules sur la première ligne avant de passer à la suivante, en formant une nouvelle ligne, etc. ```css hidden * { @@ -138,11 +171,11 @@ Dans le prochain exemple, la grille possède trois colonnes et deux lignes. Cela
    ``` -{{EmbedLiveSample("Mode_d'écriture_par_défaut", '500', '330')}} +{{EmbedLiveSample("", '500', '230')}} -### Définir writing-mode +### Définir le mode d'écriture -Si on ajoute `writing-mode: vertical-lr` au conteneur de la grille, on peut voir que les axes logiques s'appliquent désormais dans une autre direction. L'axe de bloc (aussi appelé l'axe des colonnes pour la grille) s'étend maintenant de gauche à droite et l'axe en ligne court verticalement. +Si on ajoute `writing-mode: vertical-lr` au conteneur de la grille, on peut voir que les axes logiques s'appliquent désormais dans une autre direction. L'axe de bloc (aussi appelé l'axe des colonnes pour la grille) s'étend maintenant de gauche à droite et l'axe en ligne court verticalement, de haut en bas. ```css hidden * { @@ -184,9 +217,7 @@ Si on ajoute `writing-mode: vertical-lr` au conteneur de la grille, on peut voir
    ``` -{{EmbedLiveSample("Définir_writing-mode", '500', '330')}} - -![A image showing the direction of Block and Inline when writing-mode is vertical-lr](8-vertical-lr.png) +{{EmbedLiveSample("", '500', '330')}} ## L'utilisation de valeurs logiques pour l'alignement @@ -250,25 +281,25 @@ Dans le prochain exemple, on aligne des objets dans une grille pour laquelle `wr
    ``` -{{EmbedLiveSample("L'utilisation_de_valeurs_logiques_pour_l'alignement", '500', '330')}} +{{EmbedLiveSample("", '500', '240')}} Si vous souhaitez voir l'effet obtenu avec une écriture verticale de haut en bas et de droite à gauche, il suffit de passer de `vertical-lr` à `vertical-rl` pour changer de mode d'écriture. ## Le placement automatique et les modes d'écriture -On a vu dans l'exemple précédent que lorsqu'on changeait de mode d'écriture, cela changeait également la direction selon laquelle les éléments étaient placés sur la grille. Par défaut, les éléments sont placés en progressant sur l'axe en ligne, jusqu'à la fin de la ligne, une nouvelle ligne est ensuite créée si besoin mais cette ligne ne progresse pas nécessairement de gauche à droite. +On a vu dans l'exemple précédent que lorsqu'on changeait de mode d'écriture, cela changeait également la direction selon laquelle les éléments étaient placés sur la grille. Par défaut, les éléments sont placés en progressant sur l'axe en ligne, jusqu'à la fin de la ligne, une nouvelle ligne est ensuite créée si besoin, mais cette ligne ne progresse pas nécessairement de gauche à droite. ## Le placement sur les lignes et les modes d'écriture Il faut garder à l'esprit que lorsqu'on place des objets sur les lignes, la ligne 1 sera toujours la ligne de départ, quel que soit le mode d'écriture et la ligne -1 sera toujours la ligne de fin. -Dans l'exemple suivant, on a une grille avec la direction `ltr` et on positionne trois objets en utilisant le placement sur les lignes. +### Placement sur les lignes pour du texte de gauche à droite -- L'objet 1 commence à la colonne 1 et occupe une piste -- L'objet 2 commence à la colonne -1 et occupe -3 pistes -- L'objet 3 commence à la colonne 1 et s'étend jusqu'à la troisième colonne. +Dans l'exemple suivant, on a une grille avec la direction `ltr` et on positionne trois objets en utilisant le placement sur les lignes. -### Placement sur les lignes pour du texte de gauche à droite +- L'objet 1 commence à la ligne verticale 1 et occupe une piste +- L'objet 2 commence à la ligne verticale -1 (le bord tout à droite) et s'étend jusqu'à la ligne verticale -3 +- L'objet 3 commence à la ligne verticale 1 et s'étend jusqu'à la troisième ligne verticale. ```css hidden * { @@ -317,11 +348,11 @@ Dans l'exemple suivant, on a une grille avec la direction `ltr` et on positionne
    ``` -{{EmbedLiveSample("Placement_sur_les_lignes_pour_du_texte_de_gauche_à_droite", '500', '330')}} +{{EmbedLiveSample("", '500', '240')}} ### Placement sur les lignes pour du texte de droite à gauche -Si on ajoute alors la propriété {{cssxref("direction")}} avec la valeur `rtl` pour le conteneur de la grille, la colonne 1 sera la plus à droite et la colonne 1 sera à gauche. +Si on ajoute alors la propriété [`direction`](/fr/docs/Web/CSS/direction) avec la valeur `rtl` pour le conteneur de la grille, la colonne 1 sera la plus à droite et la colonne -1 sera à gauche. ```css hidden * { @@ -371,29 +402,29 @@ Si on ajoute alors la propriété {{cssxref("direction")}} avec la valeur `rtl`
    ``` -{{EmbedLiveSample("Placement_sur_les_lignes_pour_du_texte_de_droite_à_gauche", '500', '330')}} +{{EmbedLiveSample("", '500', '240')}} -On voit ici que si on change la direction du texte pour la page ou pour une partie de la page : la disposition change selon lees numéros de lignes. Si on ne veut pas que les lignes bougent, on pourra utiliser des lignes nommées pour éviter cet effet. +On voit ici que si on change la direction du texte pour la page ou pour une partie de la page, la disposition change selon les numéros de lignes. Si on ne veut pas que les lignes bougent, on pourra utiliser des lignes nommées pour éviter cet effet. ### L'étrange ordre des valeurs pour `grid-area` -La propriété {{cssxref("grid-area")}} permet d'indiquer les quatre lignes qui définissent une zone. Lorsqu'on apprend à utiliser cette propriété, on se surprend à voir que les quatre valeurs ne suivent pas le même ordre que celui utilisé par les propriétés raccourcies pour les marges (pour celles-ci, les valeurs suivent le sens horaire : haut, droit, bas, gauche). +La propriété [`grid-area`](/fr/docs/Web/CSS/grid-area) permet d'indiquer les quatre lignes qui définissent une zone. Lorsqu'on apprend à utiliser cette propriété, on se surprend à voir que les quatre valeurs ne suivent pas le même ordre que celui utilisé par les propriétés raccourcies pour les marges (pour celles-ci, les valeurs suivent le sens horaire : haut, droit, bas, gauche). -Pour les valeurs de `grid-area`, l'ordre est le suivant : +Pour les valeurs de `grid-area`, l'ordre est le suivant : - `grid-row-start` - `grid-column-start` - `grid-row-end` - `grid-column-end` -Si on transpose ces valeurs à un système d'écriture de gauche à droite, cela correspond aux valeurs physiques suivantes : +Si on transpose ces valeurs à un système d'écriture de gauche à droite, cela correspond aux valeurs physiques suivantes : - `top` - `left` - `bottom` - `right` -Ce qui correspond… au sens anti-horaire ! L'ordre est l'inverse de celui utilisé pour les marges et le remplissage. Pour comprendre, mieux vaut voir la propriété `grid-area` comme une propriété logique qui fonctionne selon les axes de bloc et en ligne : on commence donc avec les deux lignes de départ puis les deux lignes d'arrivée. Cet ordre est plus « logique » ! +Ce qui correspond… au sens anti-horaire ! L'ordre est l'inverse de celui utilisé pour les marges et le remplissage (padding). Pour comprendre, mieux vaut voir la propriété `grid-area` comme une propriété logique qui fonctionne selon les axes de bloc et en ligne : on commence donc avec les deux lignes de départ puis les deux lignes d'arrivée. Cet ordre est plus « logique » ! ## Utiliser des modes d'écriture hybrides et les grilles CSS @@ -455,11 +486,11 @@ Les modes d'écritures permettent d'afficher les documents en respectant les rè
    ``` -{{EmbedLiveSample("Utiliser_des_modes_d'écriture_hybrides_et_les_grilles_CSS", '500', '330')}} +{{EmbedLiveSample("", '500', '280')}} ## Les valeurs physiques et les grilles CSS -On rencontre souvent les propriétés physiques lorsqu'on construit un site web et, bien que la grille et les propriétés logiques permettent de respecter les modes d'écriture, il existe certains effets qui ne peuvent être obtenus qu'avec des propriétés et des valeurs physiques. Dans le guide sur [l'alignement des boîtes et les grilles](/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout), nous avons vu comment utiliser les marges automatiques sur les zones d'une grille. Utiliser les marges automatiques pour contraindre le placement d'un élément est une astuce qu'on rencontre aussi avec les boîtes flexibles mais cela couple la disposition avec l'espace physique. +On rencontre souvent les propriétés physiques lorsqu'on construit un site web et, bien que la grille et les propriétés logiques permettent de respecter les modes d'écriture, il existe certains effets qui ne peuvent être obtenus qu'avec des propriétés et des valeurs physiques. Dans le guide sur [l'alignement des boîtes et les grilles](/fr/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout), nous avons vu comment utiliser les marges automatiques sur les zones d'une grille. Utiliser les marges automatiques pour contraindre le placement d'un élément est une astuce qu'on rencontre aussi avec les boîtes flexibles mais cela couple la disposition avec l'espace physique. Si on utilise le positionnement absolu dans une zone d'une grille, là encore, on utilisera des décalages physiques pour décaler l'élément au sein de la zone. Dans ces cas, il faut être conscient du couplage qu'on ajoute avec l'espace physique et comprendre qu'il faudra adapter la feuille de style si on veut par exemple passer d'un mode `ltr` à un mode `rtl`. @@ -467,6 +498,4 @@ Si on utilise le positionnement absolu dans une zone d'une grille, là encore, o Les nouvelles méthodes de disposition, comme les grilles, permettent d'employer les valeurs logiques afin de placer les éléments. Cependant, dès qu'on combine ces valeurs avec des propriétés physiques, il faut maintenir ces dernières lorsque le mode d'écriture change. -La [spécification sur les propriétés logiques en CSS](https://drafts.csswg.org/css-logical-props/) vise à résoudre ce problème. Nous pourrons peut-être utiliser demain des [équivalents logiques](/fr/docs/Web/CSS/CSS_Logical_Properties) pour chacune des propriétés physiques telles que {{cssxref("margin-left")}} et {{cssxref("margin-right")}}. Firefox a déjà implémenté ces propriétés logiques et vous pouvez les y tester. En utilisant les grilles et en manipulant l'axe de bloc et l'axe de ligne, vous saurez également comment fonctionnent ces propriétés logiques à venir. - -{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité","Web/CSS/CSS_Grid_Layout")}} +La [spécification sur les propriétés logiques en CSS](https://drafts.csswg.org/css-logical-props/) vise à résoudre ce problème en fournissant [des équivalents logiques](/fr/docs/Web/CSS/CSS_logical_properties_and_values) pour chacune des propriétés physiques telles que [`margin-left`](/fr/docs/Web/CSS/margin-left) et [`margin-right`](/fr/docs/Web/CSS/margin-right). Ces propriétés et valeurs sont bien prises en charge par les navigateurs récents. En utilisant les grilles et en manipulant l'axe de bloc et l'axe de ligne, cela vous aidera à comprendre le fonctionnement de ces propriétés logiques. From c6b1c6025ad3fb598b34304c71a5e6212d59850c Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Wed, 20 Sep 2023 13:12:51 +0200 Subject: [PATCH 420/600] Fix #14172 (#15826) * update and fix #14172 * fix asset compression --- files/fr/web/css/css_media_queries/index.md | 47 ++++++++++++++----- .../css/css_media_queries/media-queries.svg | 1 + 2 files changed, 35 insertions(+), 13 deletions(-) create mode 100644 files/fr/web/css/css_media_queries/media-queries.svg diff --git a/files/fr/web/css/css_media_queries/index.md b/files/fr/web/css/css_media_queries/index.md index f222af221919cb..13f553e2a7372d 100644 --- a/files/fr/web/css/css_media_queries/index.md +++ b/files/fr/web/css/css_media_queries/index.md @@ -1,32 +1,52 @@ --- -title: Media queries +title: Requêtes média CSS (media queries) slug: Web/CSS/CSS_media_queries +l10n: + sourceCommit: 50e215d730cd173d93b9bf75785c0d8ed2f67cb0 --- {{CSSRef}} -Les requêtes média, plus souvent appelées **_media queries,_** sont un outil de _responsive design_ qui permet d'adapter la feuille de style CSS en fonction de différents paramètres ou caractéristiques de l'appareil. Par exemple, on pourra appliquer différents styles si l'écran de l'appareil utilisé pour consulter le document est plus petit qu'une taille donnée ou si l'utilisateur tient son appareil en mode portrait ou paysage. La règle @ (ou _at-rule_) {{cssxref("@media")}} est utilisée afin d'appliquer les styles de façon conditionnelle. +Les **requêtes média CSS**, plus souvent appelées **media queries**, sont un outil de [responsive design](/fr/docs/Learn/CSS/CSS_layout/Responsive_Design) qui permet d'adapter la feuille de styles CSS en fonction de différents paramètres ou caractéristiques de l'appareil. -De plus, la syntaxe des requêtes média est également employée dans d'autres contextes, notamment l'attribut [`media`](/fr/docs/Web/HTML/Element/source#media) de l'élément {{HTMLElement("source")}} qui permet de définir une chaîne de caractères contenant une requête média afin de choisir le fichier source utilisé pour une image grâce à l'élément HTML {{HTMLElement("picture")}}. +Par exemple, on pourra appliquer différentes mises en forme selon la taille de [la zone d'affichage](/fr/docs/Glossary/Viewport) pour que la disposition soit correcte selon les tailles d'écran des appareils. -De plus, la méthode du DOM {{domxref("Window.matchMedia()")}} peut être utilisée afin de tester le résultat d'une requête média pour la fenêtre courante. On peut également utiliser la méthode {{domxref("MediaQueryList.addListener()")}} afin de recevoir une notification lorsque l'état de la requête évolue. Grâce à cette fonctionnalité, un site ou une application peut réagir aux changements de configuration, d'orientation ou d'état. +Par exemple, on pourra utiliser une police de caractères plus petite pour les appareils avec des petits écrans, augmenter l'espace entre les paragraphes si la page est vue en mode portrait, ou encore augmenter la taille des boutons sur les écrans tactiles. -Vous pouvez en découvrir plus dans l'article [Tester des requêtes media](/fr/docs/Web/CSS/Requêtes_média/Tester_les_media_queries). +![Un ordinateur portable et un smartphone, chacun avec une taille de zone d'affichage différente, où le contenu est agencé différemment grâce aux media queries.](media-queries.svg) + +C'est [la règle @](/fr/docs/Web/CSS/At-rule) [`@media`](/fr/docs/Web/CSS/@media) qui est utilisée en [CSS](/fr/docs/Web/CSS) pour appliquer de façon conditionnelle un fragment d'une feuille de styles selon le résultat d'une requête média. Si on souhaite appliquer de façon conditionnelle une feuille de styles entière, on utilisera [`@import`](/fr/docs/Web/CSS/@import). + +Lorsqu'on conçoit des composants HTML réutilisables, on peut également utiliser [les requêtes de conteneur](/fr/docs/Web/CSS/CSS_container_queries) qui permettent d'appliquer des mises en forme selon la taille de l'élément englobant plutôt que par rapport à la zone d'affichage ou aux caractéristiques de l'appareil. + +### Les requêtes média en HTML + +En [HTML](/fr/docs/Web/HTML), on peut appliquer des requêtes média à différents éléments : + +- Dans l'attribut [`media`](/fr/docs/Web/HTML/Element/link#media) de l'élément [``](/fr/docs/Web/HTML/Element/link), qui définit le média auquel une ressource liée (généralement du CSS) s'applique. +- Dans l'attribut [`media`](/fr/docs/Web/HTML/Element/source#media) de l'élément [``](/fr/docs/Web/HTML/Element/source), qui définit le média sur lequel la source s'applique (uniquement valide à l'intérieur d'éléments [``](/fr/docs/Web/HTML/Element/picture)). +- Dans l'attribut [`media`](/fr/docs/Web/HTML/Element/style#media) de l'élément [`Lorem ipsum dolor sit amet, consectetur adipisicingelit, sed do eiusmod tempor incididunt ut labore etdolore magna aliqua.Praesent aliquam, enim at fermentum mollis, ligulamassa adipiscing nisl, ac euismod nibh nisl eu lectus.Fusce vulputate sem at sapien. Vivamus leoLorem ipsum dolor sit amet,consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Praesent aliquam, enim atfermentum mollis, ligula massaadipiscing nisl, ac euismod nibhnisl eu lectus. Fusce vulputatesem at sapien. Vivamus leoLargeur de la zone d'affichageLargeur de lazone d'affichageHauteurde la zoned'affichageHauteurde la zoned'affichageTitreTitre \ No newline at end of file From 327c08c4f3c1eaaebf8c07b58690bd92494f1bab Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Wed, 20 Sep 2023 13:31:30 +0200 Subject: [PATCH 421/600] Fix #13894 (#15802) Fixes #13894 and update 2 pages along the way --- .../reference/global_objects/number/index.md | 250 ++++++++++++------ .../global_objects/typedarray/slice/index.md | 49 ++-- 2 files changed, 189 insertions(+), 110 deletions(-) diff --git a/files/fr/web/javascript/reference/global_objects/number/index.md b/files/fr/web/javascript/reference/global_objects/number/index.md index 4b9c10816f778f..96436a622b6c48 100644 --- a/files/fr/web/javascript/reference/global_objects/number/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/index.md @@ -1,137 +1,229 @@ --- title: Number slug: Web/JavaScript/Reference/Global_Objects/Number +l10n: + sourceCommit: b2a5f62d66b4e3d71704017d0fab7ad710e68057 --- {{JSRef}} -L'objet **`Number`** est une enveloppe objet (_wrapper_) autour du [type primitif numérique](/fr/docs/Web/JavaScript/Structures_de_données#Le_type_nombre). Autrement dit, il est utilisé pour manipuler les nombres comme des objets. Pour créer un objet `Number`, on utilise le constructeur `Number()`. +Les valeurs **`Number`** représentent les nombres décimaux comme `37` ou `-9.25`. -Le type JavaScript `Number` utilise [une représentation binaire à précision double sur 64 bits telle que décrite par le standard IEEE 754](https://fr.wikipedia.org/wiki/IEEE_754). Les implémentations plus récentes offrent un nouveau type : {{jsxref("BigInt")}} qui permet de représenter des entiers avec une précision arbitraire. +Le constructeur `Number()` contient des constantes et des méthodes pour manipuler les nombres. Les valeurs des autres types peuvent être converties en nombre à l'aide de la fonction `Number()`. -## Syntaxe +## Description + +Les nombres sont généralement exprimés sous leur forme littérale comme `255` ou `3.14159`. La [grammaire lexicale](/fr/docs/Web/JavaScript/Reference/Lexical_grammar#littéraux_numériques) contient une référence plus détaillée à ce sujet. ```js -new Number(valeur); -var a = new Number("123"); // a === 123 donnera false -var b = Number("123"); // b === 123 donnera true -a instanceof Number; // donnera true -b instanceof Number; // donnera false +255; // deux cent vingt-cinq +255.0; // le même nombre +255 === 255.0; // true +255 === 0xff; // true (notation hexadécimale) +255 === 0b11111111; // true (notation binaire) +255 === 0.255e3; // true (notation scientifique) ``` -### Paramètres +En JavaScript, un littéral numérique comme `37` est bien une valeur décimale et pas particulièrement entière. Il n'existe pas de type entier distinct pour un usage courant (le type [`BigInt`](/fr/docs/Web/JavaScript/Reference/Global_Objects/BigInt) existe mais sert à représenter les très grandes valeurs entières et pas les nombres courants comme `37`). -- `valeur` - - : La valeur numérique pour l'objet qu'on souhaite créer. +Quand on utilise `Number(valeur)` comme fonction, elle permet de convertir une chaîne de caractères ou une valeur d'un autre type en valeur de type `Number`. Si la valeur ne peut pas être convertie, elle renvoie [`NaN`](/fr/docs/Web/JavaScript/Reference/Global_Objects/NaN) -## Description +```js +Number("123"); // renvoie le nombre 123 +Number("123") === 123; // true + +Number("licorne"); // NaN +Number(undefined); // NaN +``` + +### Encodage des valeurs numériques + +Le type JavaScript `Number` utilise [une représentation binaire à précision double sur 64 bits telle que décrite par le standard IEEE 754](https://fr.wikipedia.org/wiki/IEEE_754). Cela signifie que les valeurs décimales peuvent être représentées, avec certaines limites sur l'amplitude et la précision. En résumé, un nombre à précision double IEEE 754 utilise 64 bits pour représenter trois fragments : + +- 1 bit pour _le signe_ (indiquant si le nombre est positif ou négatif) +- 11 bits pour _l'exposant_ (pouvant aller de -1022 à 1023) +- 52 bits pour _la mantisse_ (représentant un nombre entre 0 et 1) + +La mantisse est la partie qui représente la valeur effective (les chiffres significatifs). L'exposant indique la puissance de deux par laquelle la mantisse devrait être multipliée. On peut écrire la formule suivante (proche de la notation scientifique) : + +Nombre=(−1)signe⋅(1+mantisse)⋅2exposant\text{Number} = ({-1})^{\text{signe}} \cdot (1 + \text{mantisse}) \cdot 2^{\text{exposant}} + +La mantisse est stockée sur 52 bits, interprétés comme les chiffres de la partie fractionnaire de `1.…` en binaire. La précision de la mantisse est donc 2-52 (valeur qu'on peut obtenir via [`Number.EPSILON`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON)), soit entre 15 et 17 chiffres en écriture décimale. Les valeurs arithmétiques au-delà de cette précision seront [arrondies](https://fr.wikipedia.org/wiki/IEEE_754#Arrondir_les_nombres_flottants). + +La valeur la plus grande qui puisse être représentée par un nombre en JavaScript est 21024 - 1 (ici l'exposant vaut 1023 et la mantisse vaut 0.1111… en base 2), valeur qu'on peut obtenir avec [`Number.MAX_VALUE`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Les valeurs supérieures à celle-ci sont remplacées par la constante spéciale [`Infinity`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Infinity). + +Les entiers peuvent uniquement être représentés sans perte de précision dans l'intervalle -253 + 1 à 253 - 1 inclus (valeurs qu'on peut obtenir avec [`Number.MIN_SAFE_INTEGER`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER) et [`Number.MAX_SAFE_INTEGER`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER)), car la mantisse ne peut contenir que 53 bits (en comptant le 1). + +De plus amples précisions sont disponibles dans [le standard ECMAScript](https://tc39.es/ecma262/multipage/ecmascript-data-types-and-values.html#sec-ecmascript-language-types-number-type). + +### Conversion numérique + +De nombreuses opérations natives qui s'attendent à manipuler des nombres appliquent d'abord une conversion à leurs arguments pour les transformer en nombre (ce qui explique pourquoi les objets `Number` se comportent généralement comme des valeurs numériques primitives). [Cette opération de conversion](https://tc39.es/ecma262/multipage/abstract-operations.html#sec-tonumber) peut être résumée ainsi : + +- Les nombres sont renvoyés tels quels. +- [`undefined`](/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined) est transformé en [`NaN`](/fr/docs/Web/JavaScript/Reference/Global_Objects/NaN). +- [`null`](/fr/docs/Web/JavaScript/Reference/Operators/null) est transformé en `0`. +- `true` est transformé en `1`, et `false` est transformé en `0`. +- Les chaînes de caractères sont converties en les analysant comme si elles contenaient [un littéral numérique](/fr/docs/Web/JavaScript/Reference/Lexical_grammar#numeric_literals). Toute erreur d'analyse produira `NaN`. Il y a quelques différences mineures par rapport à littéral numérique : + - Les blancs et fins de lignes au début ou à la fin sont ignorés. + - Un chiffre `0` en début de chaîne n'indique pas un littéral en base octale (et n'est pas rejeté en mode strict). + - `+` et `-` sont autorisés au début de la chaîne pour indiquer le signe. Dans du code littéral, ils semblent faire partie du littéral, mais sont en réalité des opérateurs unaires distincts. Toutefois, le signe ne peut apparaître qu'une seule fois et ne pas être suivi par des blancs. + - `Infinity` et `-Infinity` sont reconnus comme des valeurs littérales. Dans du code réel, il s'agit de variables globales. + - Les chaînes de caractères vides ou qui ne contiennent que des blancs sont converties en `0`. + - [Les séparateurs numériques](/fr/docs/Web/JavaScript/Reference/Lexical_grammar#séparateurs_numériques) (le tiret bas dans `1_050.95`) ne sont pas autorisés. +- [Les grands entiers (BigInts)](/fr/docs/Web/JavaScript/Reference/Global_Objects/BigInt) déclenchent une exception [`TypeError`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypeError) pour empêcher une perte de précision involontaire lors de la conversion implicite. +- [Les symboles](/fr/docs/Web/JavaScript/Reference/Global_Objects/Symbol) déclenchent une exception [`TypeError`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypeError) +- Les objets sont d'abord [convertis en une valeur primitive](/fr/docs/Web/JavaScript/Data_structures#primitive_coercion) à l'aide de leurs méthodes [`[@@toPrimitive]()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive) (où `"number"` est fourni comme indication), `valueOf()`, et `toString()`, selon cet ordre. La valeur primitive obtenue est alors convertie en nombre. + +Il existe deux méthodes qui permettent de déclencher cette conversion (ou presque) en JavaScript : -L'objet `Number` est principalement utilisé dans les cas de figure suivants : +- [Le plus unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus) : `+x` applique l'algorithme explicité avant pour convertir `x`. +- [La fonction `Number()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/Number) : `Number(x)` utilise le même algorithme pour convertir `x`, sauf que [les grands entiers (BigInts)](/fr/docs/Web/JavaScript/Reference/Global_Objects/BigInt) ne déclenchent pas d'exception [`TypeError`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypeError) mais renvoient la valeur numérique correspondante, quitte à ce qu'il y ait une perte de précision. -- Si l'argument ne peut pas être converti en un nombre, il renverra {{jsxref("NaN")}}. -- Dans un contexte de fonction simple (quand il n'est pas utilisé comme un constructeur avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}), `Number` peut être utilisé afin d'effectuer des conversions. +[`Number.parseFloat()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/parseFloat) et [`Number.parseInt()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/parseInt) sont semblables à `Number()` mais servent uniquement à convertir des chaînes de caractères, en suivant des règles légèrement différentes. Par exemple, `parseInt()` ne reconnaît pas le point décimal et `parseFloat()` ne reconnaît pas le préfixe `0x`. -## Propriétés +#### Conversion entière -- {{jsxref("Number.EPSILON")}} +Certaines opérations s'attendent à manipuler des entiers, notamment celles qui fonctionnent avec des indices de tableaux ou de chaînes de caractères, des composantes temporelles et des bases numériques. Après la conversion numérique décrite ci-avant, le résultat est [tronqué](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/trunc) en un nombre entier (la partie fractionnaire est ignorée). Si le nombre est `±Infinity`, il est renvoyé tel quel. Si le nombre est `NaN` ou `-0`, c'est `0` qui est renvoyé. Le résultat est donc toujours un entier (qui n'est pas `-0`) ou `±Infinity`. + +On notera que, pour la conversion entière, `undefined` et `null` deviennent `0`, car `undefined` est d'abord converti en `NaN` lors de la conversion numérique, puis en `0` lors de la conversion entière qui suit. + +#### Conversion en nombre à longueur fixe + +Certaines fonctions JavaScript « bas-niveau » permettent de manipuler l'encodage binaire des nombres entiers, notamment [les opérateurs binaires](/fr/docs/Web/JavaScript/Reference/Operators#opérateurs_de_décalage_binaires) et les objets [`TypedArray`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray). Les opérateurs binaires convertissent toujours leurs opérandes en entiers sur 32 bits. Dans ces cas, après la conversion numérique décrite avant, le nombre est normalisé à la largeur souhaitée en [tronquant](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/trunc) la partie fractionnaire, puis en considérant les bits les plus faibles de la représentation de l'entier en complément à deux. + +```js +new Int32Array([1.1, 1.9, -1.1, -1.9]); // Int32Array(4) [ 1, 1, -1, -1 ] + +new Int8Array([257, -257]); // Int8Array(2) [ 1, -1 ] +// 257 = 0001 0000 0001 +// = 0000 0001 (mod 2^8) +// = 1 +// -257 = 1110 1111 1111 +// = 1111 1111 (mod 2^8) +// = -1 (comme entier signé) + +new Uint8Array([257, -257]); // Uint8Array(2) [ 1, 255 ] +// -257 = 1110 1111 1111 +// = 1111 1111 (mod 2^8) +// = 255 (comme entier non-signé) +``` + +## Constructeur + +- [`Number()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/Number) + - : Crée une nouvelle valeur `Number`. + +Lorsque `Number` est appelé comme constructeur (avec le mot-clé `new`), il crée un objet `Number` qui **n'est pas** une valeur primitive. Par exemple, on aura `typeof new Number(42) === "object"`, et `new Number(42) !== 42` (même si `new Number(42) == 42`). + +> **Attention :** Il est plutôt rare de devoir utiliser `Number` comme constructeur. + +## Propriétés statiques + +- [`Number.EPSILON`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON) - : Le plus petit intervalle entre deux valeurs qu'il est possible de représenter en JavaScript. -- {{jsxref("Number.MAX_SAFE_INTEGER")}} - - : La valeur entière maximale qu'on peut représenter en JavaScript (`2^53 - 1`). -- {{jsxref("Number.MAX_VALUE")}} +- [`Number.MAX_SAFE_INTEGER`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) + - : La valeur entière maximale qu'on peut représenter en JavaScript (253 - 1). +- [`Number.MAX_VALUE`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE) - : La valeur numérique maximale qu'on peut représenter en JavaScript. -- {{jsxref("Number.MIN_SAFE_INTEGER")}} - - : La valeur entière minimale qu'on peut représenter en JavaScript (`-(2^53 - 1)`). -- {{jsxref("Number.MIN_VALUE")}} - - : La plus petite valeur qu'on peut représenter en JavaScript, c'est-à-dire le plus petit nombre positif (le nombre le plus près de zéro qui n'est pas égal à zéro et qu'on peut représenter en JavaScript). -- {{jsxref("Number.NaN")}} +- [`Number.MIN_SAFE_INTEGER`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER) + - : La valeur entière minimale qu'on peut représenter en JavaScript (-(253 - 1)). +- [`Number.MIN_VALUE`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE) + - : La plus petite valeur positive qu'on peut représenter en JavaScript, c'est-à-dire le nombre le plus près de zéro qui n'est pas égal à zéro et qu'on peut représenter en JavaScript. +- [`Number.NaN`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/NaN) - : Une valeur spéciale pour représenter les valeurs non-numériques (**NaN** correspond à « **N**ot **a** **N**umber » en anglais, qui signifie « n'est pas un nombre »). -- {{jsxref("Number.NEGATIVE_INFINITY")}} - - : Une valeur spéciale pour représenter l'infini négatif. -- {{jsxref("Number.POSITIVE_INFINITY")}} - - : Une valeur spéciale pour représenter l'infini (positif). -- {{jsxref("Number.prototype")}} - - : Cet objet permet d'ajouter des propriétés aux instances de `Number`. +- [`Number.NEGATIVE_INFINITY`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY) + - : Une valeur spéciale pour représenter l'infini négatif. Cette valeur est renvoyée quand on dépasse les valeurs représentables. +- [`Number.POSITIVE_INFINITY`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY) + - : Une valeur spéciale pour représenter l'infini (positif). Cette valeur est renvoyée quand on dépasse les valeurs représentables. -## Méthodes +## Méthodes statiques -- {{jsxref("Number.isNaN()")}} - - : Cette méthode permet de déterminer si la valeur passée en argument vaut `NaN`. -- {{jsxref("Number.isFinite()")}} +- [`Number.isFinite()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/isFinite) - : Cette méthode permet de déterminer si la valeur numérique passée en argument est un nombre fini. -- {{jsxref("Number.isInteger()")}} +- [`Number.isInteger()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger) - : Cette méthode permet de déterminer si la valeur passée en argument est un entier. -- {{jsxref("Number.isSafeInteger()")}} - - : Cette méthode permet de déterminer si la valeur passée en argument peut correctement être représentée comme un entier en JavaScript (savoir si elle est comprise entre `-(2^53 - 1)` et `2^53 - 1`). -- {{jsxref("Number.toInteger()")}} {{deprecated_inline}} - - : Cette méthode est utilisée afin d'évaluer et de convertir la valeur passée en argument en entier (ou en l'{{jsxref("Infinity", "infini","",1)}}). Cette méthode a été supprimée. -- {{jsxref("Number.parseFloat()", "Number.parseFloat(string)")}} - - : Cette méthode correspond à la méthode {{jsxref("parseFloat", "parseFloat()")}} de l'objet global. -- {{jsxref("Number.parseInt()", "Number.parseInt(string, [radix])")}} - - : Cette méthode correspond à la méthode {{jsxref("parseInt", "parseInt()")}} de l'objet global. +- [`Number.isNaN()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN) + - : Cette méthode permet de déterminer si la valeur passée en argument vaut `NaN`. +- [`Number.isSafeInteger()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger) + - : Cette méthode permet de déterminer si la valeur passée en argument peut correctement être représentée comme un entier en JavaScript (savoir si elle est comprise entre -(253 - 1) et 253 - 1). +- [`Number.parseFloat()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/parseFloat) + - : Cette méthode correspond à la méthode [`parseFloat()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) de l'objet global. +- [`Number.parseInt()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/parseInt) + - : Cette méthode correspond à la méthode [`parseInt()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/parseInt) de l'objet global. -## Les instances de `Number` +## Propriétés des instances -Toutes les instances de `Number` héritent de {{jsxref("Number.prototype")}}. Il est possible de modifier le prototype du constructeur `Number` pour affecter toutes les instances de `Number`. +Ces propriétés sont définies sur `Number.prototype` et partagées par l'ensemble des instances de `Number`. -### Méthodes +- [`Number.prototype.constructor`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor) + - : La fonction utilisée comme constructeur pour créer l'instance objet. Pour les instances `Number`, la valeur initiale est le constructeur [`Number()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/Number). -- {{jsxref("Number.prototype.toExponential()" ,"Number.prototype.toExponential(fractionDigits)")}} +### Méthodes des instances + +- [`Number.prototype.toExponential()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/toExponential) - : Retourne une chaîne représentant le nombre en notation exponentielle. -- {{jsxref("Number.prototype.toFixed()", "Number.prototype.toFixed(digits)")}} - - : Retourne une chaîne représentant le nombre avec la notation virgule fixe. -- {{jsxref("Number.prototype.toLocaleString()", "Number.prototype.toLocaleString([locales [, options]])")}} - - : Retourne une chaîne avec une représentation sensible à la langue de ce nombre. Surcharge la méthode {{jsxref("Object.prototype.toLocaleString()")}}. -- {{jsxref("Number.prototype.toPrecision()", "Number.prototype.toPrecision(precision)")}} - - : Retourne une chaîne représentant le nombre avec une précision donnée en notation virgule fixe ou exponentielle. -- {{jsxref("Number.prototype.toString()", "Number.prototype.toString([radix])")}} - - : Retourne une chaîne représentant le nombre dans une base numérique (radix) donnée. Surcharge la méthode {{jsxref("Object.prototype.toString()")}}. -- {{jsxref("Number.prototype.valueOf()")}} - - : Retourne la valeur primitive de l'objet spécifié. Surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}. +- [`Number.prototype.toFixed()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) + - : Retourne une chaîne représentant le nombre avec la notation en virgule fixe. +- [`Number.prototype.toLocaleString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString) + - : Retourne une chaîne avec une représentation du nombre tenant compte de la locale. Surcharge la méthode [`Object.prototype.toLocaleString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/toLocaleString). +- [`Number.prototype.toPrecision()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/toPrecision) + - : Retourne une chaîne représentant le nombre avec une précision donnée en notation en virgule fixe ou exponentielle. +- [`Number.prototype.toString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/toString) + - : Retourne une chaîne représentant le nombre dans une base numérique donnée. Surcharge la méthode [`Object.prototype.toString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/toString). +- [`Number.prototype.valueOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/valueOf) + - : Retourne la valeur primitive de l'objet spécifié. Surcharge la méthode [`Object.prototype.valueOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf). ## Exemples ### Utiliser l'objet `Number` pour affecter des valeurs numériques à des variables -Dans l'exemple suivant, on utilise les propriétés de l'objet `Number` pour affecter des valeurs à des variables numériques : +Dans l'exemple suivant, on utilise les propriétés de l'objet `Number` pour affecter des valeurs à des variables numériques : ```js -var plusGrandNombre = Number.MAX_VALUE; -var plusPetitNombre = Number.MIN_VALUE; -var infini = Number.POSITIVE_INFINITY; -var infiniNégatif = Number.NEGATIVE_INFINITY; -var nonNumérique = Number.NaN; +const plusGrandNombre = Number.MAX_VALUE; +const plusPetitNombre = Number.MIN_VALUE; +const infini = Number.POSITIVE_INFINITY; +const infiniNégatif = Number.NEGATIVE_INFINITY; +const nonNumérique = Number.NaN; ``` ### Intervalle entier pour `Number` -Dans l'exemple suivant, on illustre les valeurs numériques maximales et minimales (exclues) qu'on peut représenter avec un nombre en JavaScript (pour plus de détails, [voir le chapitre 6.1.6 du standard ECMAScript](https://tc39.github.io/ecma262/#sec-ecmascript-language-types-number-type)) : +Dans l'exemple suivant, on illustre les valeurs numériques entières maximales et minimales qu'on peut représenter avec une valeur `Number` : ```js -var biggestInt = 9007199254740992; //Number.MAX_SAFE_INTEGER+1 (2^53-1) -var smallestInt = -9007199254740992; //Number.MIN_SAFE_INTEGER-1 -(2^53-1) +const biggestInt = Number.MAX_SAFE_INTEGER; // (2**53 - 1) => 9007199254740991 +const smallestInt = Number.MIN_SAFE_INTEGER; // -(2**53 - 1) => -9007199254740991 ``` -Lorsqu'on analyse et convertit des données JSON, les valeurs en dehors de cet intervalle peuvent entraîner des erreurs ou des corruptions de valeurs lors de leurs conversions. Selon les objets qu'on souhaite représenter, on peut utiliser {{jsxref("String")}} dans certains cas pour représenter certaines valeurs. +Lorsqu'on analyse et convertit des données JSON, les valeurs en dehors de cet intervalle peuvent entraîner des erreurs ou des corruptions de valeurs lors de leurs conversions. + +Selon les objets qu'on souhaite représenter, on peut utiliser [`String`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String) dans certains cas pour représenter certaines valeurs. -### Utiliser `Number` pour convertir un objet `Date` +Pour les plus grands nombres, on pourra utiliser le type [`BigInt`](/fr/docs/Web/JavaScript/Reference/Global_Objects/BigInt). -Dans l'exemple suivant, on convertit un objet {{jsxref("Date")}} en une valeur numérique grâce à la fonction `Number` : +### Utiliser `Number()` pour convertir un objet `Date` + +Dans l'exemple suivant, on convertit un objet [`Date`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date) en une valeur numérique grâce à la fonction `Number()` : ```js -var d = new Date("December 17, 1995 03:24:00"); +const d = new Date("1995-12-17T03:24:00"); console.log(Number(d)); ``` -Ceci affichera "819167040000". +Ceci affichera `819199440000`. -### Convertir une chaîne représentant une valeur numérique en un nombre +### Convertir une chaîne de caractères représentant une valeur numérique, ou `null` en un nombre ```js Number("123"); // 123 +Number("123") === 123; // true Number("12.3"); // 12.3 Number("12.00"); // 12 Number("123e-1"); // 12.3 Number(""); // 0 +Number(null); // 0 Number("0x11"); // 17 Number("0b11"); // 3 Number("0o11"); // 9 @@ -140,8 +232,6 @@ Number("100a"); // NaN Number("-Infinity"); // -Infinity ``` -> **Note :** On pourra également convertir `null` en `0` grâce à `Number` : `Number(null)` donnera `0`. - ## Spécifications {{Specifications}} @@ -152,8 +242,8 @@ Number("-Infinity"); // -Infinity ## Voir aussi -- {{jsxref("NaN")}} -- L'objet global {{jsxref("Math")}} -- [Les types de données en JavaScript](/fr/docs/Web/JavaScript/Structures_de_données#Le_type_nombre) -- [Un billet sur le type `Number` (en anglais)](https://medium.com/@maximus.koretskyi/javascripts-number-type-8d59199db1b6#.9whwe88tz) -- Représenter de grands entiers avec une précision arbitraire : {{jsxref("BigInt")}} +- [Une prothèse d'émulation (polyfill) du comportement moderne de `Number` (dont la prise en charge des littéraux binaires et octaux) dans la bibliothèque `core-js`](https://github.com/zloirock/core-js#ecmascript-number) +- [`NaN`](/fr/docs/Web/JavaScript/Reference/Global_Objects/NaN) +- [Les opérateurs arithmétiques](/fr/docs/Web/JavaScript/Reference/Operators#opérateurs_arithmétiques) +- [`Math`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math) +- [`BigInt`](/fr/docs/Web/JavaScript/Reference/Global_Objects/BigInt) diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/slice/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/slice/index.md index 8db67bc548de61..1090869590c544 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/slice/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/slice/index.md @@ -1,26 +1,30 @@ --- title: TypedArray.prototype.slice() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/slice +l10n: + sourceCommit: b2a5f62d66b4e3d71704017d0fab7ad710e68057 --- {{JSRef}} -La méthode **`slice()`** renvoie une copie superficielle (shallow copy) d'un fragment du tableau typé courant dans un nouveau tableau typé. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.slice()")}}_._ _TypedArray_ est utilisé par la suite de façon générique pour réprésenter l'un des [types de tableaux typés](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray). +La méthode **`slice()`** des instances de [`TypedArray`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) renvoie une copie d'un fragment du tableau typé courant dans un nouveau tableau typé. La portion est prise entre les paramètres `début` (inclus) et `fin` (non-inclus) qui correspondent aux indices des éléments du tableau typé courant. Le tableau typé original ne sera pas modifié. Cette méthode utilise le même algorithme que [`Array.prototype.slice()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) -{{EmbedInteractiveExample("pages/js/typedarray-slice.html")}} +{{EmbedInteractiveExample("pages/js/typedarray-slice.html", "shorter")}} ## Syntaxe -```js -typedarray.slice([début[, fin]]) +```js-nolint +slice() +slice(début) +slice(début, fin) ``` ## Paramètres - `début` {{optional_inline}} - - : L'indice (compté à partir de zéro) à partir duquel commencer le fragment. Si l'indice fourni est négatif, `début` indiquera le décalage par rapport à la fin de la séquence. Par exemple, `slice(-2)` extrait les deux derniers éléments de la séquence. Par défaut, si `début` n'est pas utilisé, `slice()` commencera à partir de l'indice `0`. + - : L'indice (compté à partir de zéro), [converti en entier](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number#conversion_entière), à partir duquel commencer le fragment. - `fin` {{optional_inline}} - - : L'indice (compté à partir de zéro) jusqu'auquel extraire le fragment. Le fragment obtenu n'incluera pas l'élément situé à l'indice `fin`. `slice(1,4)` extrait par exemple à partir du deuxième élément et jusqu'au quatrième (c'est-à-dire les éléments dont les indices respectifs sont 1, 2, et 3). Si l'indice utilisé est négatif, `fin` indiquera le décalage par rapport à la fin de la séquence. Ainsi, `slice(2,-1)` extraira à partir du troisième élément et jusqu'à l'avant dernier élément (compris). Par défaut, si `fin` n'est pas utilisé, `slice()` extraira les éléments jusqu'à la fin de la séquence (`arr.length`). + - : L'indice (compté à partir de zéro), [converti en entier](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number#conversion_entière), jusqu'auquel extraire le fragment. Le fragment obtenu n'inclura pas l'élément situé à l'indice `fin`. ### Valeur de retour @@ -28,39 +32,20 @@ Un nouveau tableau typé qui contient les éléments extraits. ## Description -La méthode `slice()` ne modifie pas le tableau typé courant, elle renvoie une copie superficielle (_shallow copy_) du tableau typé original. - -Si un nouvel élément est ajouté à l'un des deux tableaux typés, l'autre ne sera pas impacté. +Voir [`Array.prototype.slice()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) pour plus détails. Cette méthode n'est pas générique et peut uniquement être appelée sur les instances de tableaux typés. ## Exemples +### Renvoyer un fragment d'un tableau typé existant + ```js -var uint8 = new Uint8Array([1, 2, 3]); +const uint8 = new Uint8Array([1, 2, 3]); uint8.slice(1); // Uint8Array [ 2, 3 ] uint8.slice(2); // Uint8Array [ 3 ] uint8.slice(-2); // Uint8Array [ 2, 3 ] uint8.slice(0, 1); // Uint8Array [ 1 ] ``` -## Prothèse d'émulation (_polyfill_) - -Il n'existe pas d'objet global intitulé _TypedArray_, la prothèse doit donc uniquement être employée si nécessaire : - -```js -// https://tc39.github.io/ecma262/#sec-%typedarray%.prototype.slice -if (!Uint8Array.prototype.slice) { - Object.defineProperty(Uint8Array.prototype, "slice", { - value: function (begin, end) { - return new Uint8Array(Array.prototype.slice.call(this, begin, end)); - }, - }); -} -``` - -De plus cette prothèse n'est pas parfaite car elle renvoie une instance d'`Array` et pas de `Uint8Array`. Elle manque donc des propriétés normalement associées aux objets `TypedArray`. - -S'il faut également prendre en charge les moteurs JavaScript qui ne prennent pas en charge la méthode {{jsxref("Object.defineProperty")}}, mieux vaut ne pas ajouter de prothèse du tout pour `TypedArray.prototype` car on ne peut pas les rendre non-énumérables. - ## Spécifications {{Specifications}} @@ -71,4 +56,8 @@ S'il faut également prendre en charge les moteurs JavaScript qui ne prennent pa ## Voir aussi -- {{jsxref("Array.prototype.slice()")}} +- [Une prothèse d'émulation (polyfill) pour `TypedArray.prototype.slice()` dans la bibliothèque `core-js`](https://github.com/zloirock/core-js#ecmascript-typed-arrays) +- [Le guide sur les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Guide/Typed_arrays) +- [`TypedArray`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) +- [`Array.prototype.slice()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) +- [`String.prototype.slice()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/slice) From d6899591ed6a3921fd5ffa9f964773f068583692 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Wed, 20 Sep 2023 13:36:18 +0200 Subject: [PATCH 422/600] Fix #13769 (#15797) Fixes #13769 --- .../resizing_background_images/index.md | 112 +++++++++++------- 1 file changed, 69 insertions(+), 43 deletions(-) diff --git a/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md index bbd12c99587bf1..8e5acec07c50c2 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md +++ b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md @@ -1,119 +1,145 @@ --- -title: Mettre à l'échelle des images en arrière-plan +title: Redimensionner les images d'arrière-plan avec background-size slug: Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images +l10n: + sourceCommit: 70b1b8ac18d3e3346645d4ee5155f654c83d96e0 --- {{CSSRef}} -La propriété CSS {{cssxref("background-size")}} permet d'ajuster la taille des images utilisées en arrière-plan et de remplacer le comportement par défaut qui consiste à créer un carrelage de l'image à sa pleine grandeur. Il est ainsi possible d'agrandir ou de rapetisser l'image. +La propriété [CSS](/fr/docs/Web/CSS) [`background-size`](/fr/docs/Web/CSS/background-size) permet d'ajuster la taille des images utilisées en arrière-plan et de remplacer le comportement par défaut qui consiste à créer une mosaïque répétant l'image à sa taille normale en indiquant une hauteur et/ou une largeur pour l'image. Il est ainsi possible d'agrandir ou de rapetisser l'image. -## Carreler une image de grande taille +## Répéter une grande image -Prenons une image de grande taille (par exemple l'ancien logo de Firefox en 2485x2340px). On souhaite la carreler en quatre copies de 300x300 px, comme dans l'image suivante. +Prenons une grande image, ici le logo de Firefox aux dimensions 2982x2808 pixels. Imaginons qu'on veuille (pour de mauvaises raisons), obtenir une mosaïque avec quatre exemplaires de cette image dans un élément de 300x300 pixels. Pour cela, on pourra fixer la propriété `background-size` à 150 pixels. -![](logo-quantum.9c5e96634f92.png) +### HTML -On peut utiliser la feuille de style CSS suivante pour obtenir l'effet voulu : +```html +
    +``` + +### CSS ```css -.square { - width: 300px; - height: 300px; +.tiledBackground { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); - border: solid 2px; - text-shadow: white 0px 0px 2px; - font-size: 16px; background-size: 150px; + width: 300px; + height: 300px; + border: 2px solid; + color: pink; } ``` -On notera que, dans l'exemple précédent, une seule valeur avait été précisée pour {{cssxref("background-size")}} : 150 px. Dans ce cas, cette valeur est utilisée pour la largeur et la hauteur est alors fixée à `auto`. +### Résultat + +{{EmbedLiveSample("", 340, 340)}} ## Étirer une image -Il est aussi possible de spécifier, respectivement, la largeur et la hauteur de l'image, comme dans l'exemple suivant, où la taille de l'image est imposée à 300x150 px. +On peut aussi indiquer les dimensions horizontale et verticale de l'image, comme ceci : + +### CSS ```css background-size: 300px 150px; ``` -L'image suivante montre le résultat obtenu. +### Résultat -![Logo de Firefox étité](s.codepen.io_richienb_debug_lonxgp_pnkvygvggyxa.png) +![Le logo étiré](stretched_firefox_logo.png) ## Agrandir une image -On peut agrandir une image en arrière-plan. À l'image suivante, une favicône de 32x32 px est agrandie à 300x300 px. +À l'inverse, on peut vouloir agrandir une image en arrière-plan. Ici, on passe d'une icône de 32x32 pixels à 300x300 pixels : -![Logo MDN à l'échelle](favicon57.de33179910ae.1.1.png) +### CSS ```css .square2 { - width: 300px; - height: 300px; background-image: url(favicon.png); background-size: 300px; - border: solid 2px; + width: 300px; + height: 300px; + border: 2px solid; text-shadow: white 0px 0px 2px; font-size: 16px; } ``` -On remarque que la feuille de style utilisée est identique à la précédente, sauf en ce qui concerne le nom de l'image. +### Résultat -## Valeurs spéciales : `contain` et `cover` +![Logo de MDN agrandi](scaled_mdn_logo.png) -En plus de {{cssxref("<length>")}}, la propriété CSS {{cssxref("background-size")}} permet d'employer deux autres valeurs : `contain` et `cover`. +Comme vous pouvez le voir, le CSS est quasi-identique, seul le nom du fichier a été modifié. -### `contain` +## Les valeurs spéciales `contain` et `cover` -La valeur `contain` spécifie les dimensions de l'image d'arrière-plan de manière à ce que sa largeur et sa hauteur soient aussi grandes que possible, tout en conservant l'image à l'intérieur de son élément conteneur. Ainsi, l'image ne peut déborder de son élément conteneur. +En plus des valeurs de longueur (type [``](/fr/docs/Web/CSS/length)), la propriété [`background-size`](/fr/docs/Web/CSS/background-size) permet d'utiliser valeurs spéciales `contain` et `cover`. Voyons ce qu'ils offrent. -Essayez de redimensionner la fenêtre de votre navigateur afin de voir la valeur `contain` en action (Votre navigateur doit supporter la mise à l'échelle d'images d'arrière-plan). +### `contain` -{{EmbedLiveSample("contain", "100%", "220")}} +La valeur `contain` indique que, quelle que soit la taille de la boîte englobante, l'image d'arrière-plan devrait être redimensionnée afin que chaque côté soit aussi grand que possible, sans dépasser la taille du conteneur. Redimensionnez l'exemple qui suit pour observer l'effet obtenu. + +#### HTML ```html
    -

    Redimensionnez la fenêtre de votre navigateur.

    +

    Essayez de redimensionner cet élément !

    ``` +#### CSS + ```css .bgSizeContain { - height: 200px; background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: contain; - border: 2px solid darkgray; - color: #000; - text-shadow: 1px 1px 0 #fff; + width: 160px; + height: 160px; + border: 2px solid; + resize: both; + overflow: scroll; } ``` -### `cover` +#### Résultat -La valeur `cover` assure que l'image d'arrière-plan soit aussi petite que possible, tout en maintenant ses dimensions plus grandes ou égales à la taille de l'élément conteneur. L'échelle entre la largeur et la hauteur est maintenue. +{{EmbedLiveSample('', 250, 250)}} -{{EmbedLiveSample("cover", "100%", "220")}} +### `cover` + +La valeur `cover` indique que l'image d'arrière-plan devrait être aussi petite que possible tout en ayant ses deux dimensions supérieures ou égales à celles du conteneur. Vous pouvez redimensionner l'exemple qui suit pour observer l'effet obtenu. -Cet exemple utilise le document HTML et la feuille de style suivants : +#### HTML ```html
    -

    Redimensionnez la fenêtre de votre navigateur.

    +

    Essayez de redimensionner cet élément !

    ``` +#### CSS + ```css .bgSizeCover { - height: 200px; background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: cover; - border: 2px solid darkgray; - color: #000; text-shadow: 1px 1px 0 #fff; + width: 160px; + height: 160px; + border: 2px solid; + resize: both; + overflow: scroll; +} ``` +#### Résultat + +{{EmbedLiveSample('', 250, 250)}} + ## Voir aussi -- {{cssxref("background-size")}} -- {{cssxref("background")}} +- [`background-size`](/fr/docs/Web/CSS/background-size) +- [`background`](/fr/docs/Web/CSS/background) +- [Redimensionnement des arrières-plans SVG](/fr/docs/Web/CSS/Scaling_of_SVG_backgrounds) From 8ad29f1df50ecac764a3fa29c09cacb9e4518c58 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Wed, 20 Sep 2023 13:41:07 +0200 Subject: [PATCH 423/600] Fix #13734 for `fr` (#15793) * Fixes #13734 * Fix img compression --- .../confirm/firefoxcomfirmdialog_zpsf00ec381.png | Bin 0 -> 2636 bytes files/fr/web/api/window/confirm/index.md | 14 ++++++++------ 2 files changed, 8 insertions(+), 6 deletions(-) create mode 100644 files/fr/web/api/window/confirm/firefoxcomfirmdialog_zpsf00ec381.png diff --git a/files/fr/web/api/window/confirm/firefoxcomfirmdialog_zpsf00ec381.png b/files/fr/web/api/window/confirm/firefoxcomfirmdialog_zpsf00ec381.png new file mode 100644 index 0000000000000000000000000000000000000000..5d05fe4c70c995f201244e104ba983e864836ad1 GIT binary patch literal 2636 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 literal 0 HcmV?d00001 diff --git a/files/fr/web/api/window/confirm/index.md b/files/fr/web/api/window/confirm/index.md index f38d89d90cdcf3..4b291c57a56ec0 100644 --- a/files/fr/web/api/window/confirm/index.md +++ b/files/fr/web/api/window/confirm/index.md @@ -1,6 +1,8 @@ --- -title: Window.confirm() +title: "Window : méthode confirm()" slug: Web/API/Window/confirm +l10n: + sourceCommit: 70b1b8ac18d3e3346645d4ee5155f654c83d96e0 --- {{ApiRef("Window")}} @@ -11,8 +13,8 @@ Sous certaines conditions, par exemple au changement d'onglet, le navigateur pou ## Syntaxe -```js -confirm(message); +```js-nolint +confirm(message) ``` ### Paramètres @@ -27,8 +29,8 @@ Un booléen qui indique si l'option « OK » (`true`) ou « Annul ## Exemples ```js -if (window.confirm("Do you really want to leave?")) { - window.open("exit.html", "Thanks for Visiting!"); +if (window.confirm("Souhaitez-vous vraiment quitter le site ?")) { + window.open("exit.html", "Merci de votre visite !"); } ``` @@ -42,7 +44,7 @@ Ces boîtes de dialogue sont des fenêtres modales qui empêchent d'accéder au Il y a également d'autres raisons [d'éviter les boîtes de dialogue pour demander une confirmation](https://alistapart.com/article/neveruseawarning/). -Une autre méthode consiste à utiliser l'élément [``](/fr/docs/Web/HTML/Element/dialog) afin d'afficher des demandes de confirmation. +Une autre méthode consiste à utiliser l'élément HTML [``](/fr/docs/Web/HTML/Element/dialog) afin d'afficher des demandes de confirmation. ## Spécifications From 7a1456919206ecc60fe8a18a1a0ccfb344aaf038 Mon Sep 17 00:00:00 2001 From: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Date: Wed, 20 Sep 2023 21:02:32 +0800 Subject: [PATCH 424/600] [zh-cn]: update TLS page (#15946) --- .../transport_layer_security/index.md | 95 ++++++++++++++++++- 1 file changed, 90 insertions(+), 5 deletions(-) diff --git a/files/zh-cn/web/security/transport_layer_security/index.md b/files/zh-cn/web/security/transport_layer_security/index.md index 36aa98cf3bf7e2..c63a9bb5d52d39 100644 --- a/files/zh-cn/web/security/transport_layer_security/index.md +++ b/files/zh-cn/web/security/transport_layer_security/index.md @@ -1,16 +1,101 @@ --- -title: 传输层安全协议 +title: 传输层安全 slug: Web/Security/Transport_Layer_Security --- -使用传输层安全性协议（TLS）进行的任何连接的安全性在很大程度上取决于密码套件和所选的安全性参数。本文的目的是帮助你确保客户端和服务器之间的机密性和完整性通信。Mozilla 运营安全团队（OpSec）维护了 [服务器端 TLS 参考配置的 Wiki 条目](https://wiki.mozilla.org/Security/Server_Side_TLS)。 +{{QuickLinksWithSubpages("/zh-CN/docs/Web/Security")}} -传输层安全性协议（Transport Layer Security protocol，TLS）是使两个联网应用程序或设备能够安全可靠地交换信息的标准。使用 TLS 的应用程序可以自行选择安全性参数，这可能会对数据的安全性和可靠性产生重大影响。本文对 TLS 进行了概述，并提供了多种在保护内容时需要做出的决策。 +使用传输层安全协议（TLS）进行的任何连接的安全性在很大程度上取决于密码套件和所选的安全性参数。本文的目的是帮助你确保客户端和服务器之间的机密性和完整性通信。Mozilla 运营安全团队（OpSec）维护了[服务器端 TLS 参考配置的 Wiki 条目](https://wiki.mozilla.org/Security/Server_Side_TLS)。 -### 参见 +传输层安全协议（Transport Layer Security protocol，TLS）是使两个联网应用程序或设备能够安全可靠地交换信息的标准。使用 TLS 的应用程序可以自行选择安全性参数，这可能会对数据的安全性和可靠性产生重大影响。本文对 TLS 进行了概述，并提供了多种在保护内容时需要做出的决策。 + +## 历史 + +HTTPS 推出时，是基于 Netscape 公司推出的安全套接字层（SSL）2.0 技术的。不久后，该技术更新为 SSL 3.0，随着使用范围的扩大，显然需要指定一种通用的标准加密技术，以确保所有 web 浏览器和服务器之间的互操作性。1999 年 1 月，[互联网工程任务组](https://www.ietf.org/)（IETF）在 {{RFC(2246)}} 中规定了 TLS 1.0。TLS 的当前版本为 1.3（{{RFC(8446)}}）。 + +尽管 web 现在使用 TLS 进行加密，但许多人仍然习惯性地将其称为“SSL”。 + +虽然 TLS 可用于任何底层传输协议，但该协议的最初目标是加密 HTTP 流量。使用 TLS 加密的 HTTP 通常被称为 {{Glossary("HTTPS")}}。根据惯例，TLS 加密的网络流量默认在 443 端口交换，而未加密的 HTTP 默认使用 80 端口。HTTPS 仍是 TLS 的一个重要用例。 + +## 在 TLS 上的 HTTP + +TLS 提供三种主要服务，有助于确保与之交换的数据的安全性： + +- 身份验证 + - : 通过认证，通信的每一方都可以验证另一方的身份。 +- 加密 + - : 在用户代理和服务器之间传输数据时对数据进行加密，以防止未经授权的各方读取和解读数据。 +- 完整性 + - : TLS 确保数据在加密、传输和解密过程中不会丢失、损坏、篡改或伪造任何信息。 + +TLS 连接以握手阶段开始，在此阶段，客户端和服务器就共享秘密和重要参数（如密码套件）达成一致。一旦参数确定，就进入数据交换模式，交换应用数据（如 HTTP）。 + +### 密码套件 + +TLS 握手协商的主要参数是[密码套件](https://zh.wikipedia.org/wiki/密码套件)。 + +在 TLS 1.2 及更早版本中，协商密码套件包括一组加密算法，这些算法共同提供了共享秘密的协商、服务器身份验证方法以及用于加密数据的方法。 + +TLS 1.3 中的密码套件主要用于数据加密，密钥协议和身份验证则使用单独的协商方法。 + +不同的软件可能会对相同的密码套件使用不同的名称。例如，OpenSSL 和 GnuTLS 使用的名称与 TLS 标准中的名称不同。Mozilla OpSec 团队关于 TLS 配置的文章中的[密码名称对应表](https://wiki.mozilla.org/Security/Server_Side_TLS#Cipher_names_correspondence_table)列出了这些名称以及有关兼容性和安全级别的信息。 + +### 配置服务器 + +正确配置服务器至关重要。一般来说，应尽量将密码支持限制在与希望连接到网站的浏览器兼容的最新密码上。[Mozilla OpSec TLS 配置指南](https://wiki.mozilla.org/Security/Server_Side_TLS)提供了更多有关推荐配置的信息。 + +为了帮助你配置网站，Mozilla 提供了一个有用的 [TLS 配置生成器](https://ssl-config.mozilla.org/)，它可以为以下 Web 服务器生成配置文件： + +- Apache +- Nginx +- Lighttpd +- HAProxy +- Amazon Web Services CloudFormation Elastic Load Balancer + +建议使用[配置生成器](https://ssl-config.mozilla.org/)来创建配置，以满足你的需要；然后将其复制并粘贴到服务器上的相应文件中，并重新启动服务器以接收更改。配置文件可能需要进行一些调整才能包含自定义设置，因此在使用前一定要检查生成的配置文件；安装配置文件时如果不确保任何域名等引用都是正确的，就会导致服务器无法正常工作。 + +## TLS 1.3 + +{{RFC("8446", "TLS 1.3")}} 是对 TLS 的重大修订。TLS 1.3 包含大量改进安全性和性能的变更。TLS 1.3 的目标是： + +- 删除 TLS 1.2 中未使用和不安全的特性。 +- 在设计中加入强大的安全分析。 +- 通过加密更多协议来提高隐私性。 +- 缩短完成握手所需的时间。 + +TLS 1.3 改变了协议的许多基本原理，但保留了以前 TLS 版本的几乎所有基本功能。对于 web 而言，启用 TLS 1.3 不会影响兼容性，但也有极少数例外情况（见下文）。 + +TLS 1.3 的主要更改有： + +- 在大多数情况下，TLS 1.3 的握手在一次往返中完成，从而减少了握手延迟。 +- 服务器可以启用 0-RTT（零往返时间）握手。重新连接服务器的客户端可以立即发送请求，完全消除了 TLS 握手的延迟。虽然 0-RTT 带来的性能提升非常明显，但也存在一定的重放攻击风险，因此在启用此功能前需要谨慎。 +- TLS 1.3 仅支持前向安全模式，除非连接恢复或使用预共享密钥。 +- TLS 1.3 定义了一组 TLS 1.3 独有的新密码套件。这些密码套件全部使用现代的关联数据验证加密（AEAD）算法。 +- 除了建立共享秘密所需的信息外，TLS 1.3 的握手过程都是加密的。这尤其意味着服务器和客户端证书是加密的。但请注意，客户端发送给服务器的服务器标识（服务器名称或 SNI 扩展名）不加密。 +- 许多机制已被禁用：重新协商、通用数据压缩、[数字签名算法](https://zh.wikipedia.org/wiki/数字签名算法)（DSA）证书、静态 RSA 密钥交换和使用自定义 Diffie-Hellman（DH）组的密钥交换。 + +TLS 1.3 的草案版本已经实现。一些浏览器已启用 TLS 1.3，包括 0-RTT 模式。启用 TLS 1.3 的 web 服务器可能需要调整配置，以便 TLS 1.3 成功运行。 + +TLS 1.3 只增加了一个重要的新用例。0-RTT 握手可为网络等对延迟敏感的应用带来显著的性能提升。启用 0-RTT 需要额外的步骤，既要确保成功部署，又要管理重放攻击的风险。 + +TLS 1.3 中取消了重新协商功能，这可能会影响到一些依赖使用证书进行客户端身份验证的 web 服务器。一些 web 服务器会使用重新协商来确保客户端证书已加密，或仅在请求某些资源时才请求客户端证书。为了保护客户证书的隐私，TLS 1.3 握手的加密可确保客户证书是加密的；但这可能需要对软件进行一些修改。TLS 1.3 支持使用证书进行反应式客户端验证，但并未广泛实施。替代机制正在开发中，也将支持 HTTP/2。 + +## 移除对旧 TLS 版本的支持 + +为了帮助实现更现代、更安全的 web，所有主流浏览器都在 2020 年初开始取消对 TLS 1.0 和 1.1 的支持。需要确保你的 web 服务器支持 TLS 1.2 或 1.3。 + +从版本 74 开始，Firefox 浏览器在连接使用旧版 TLS 的服务器时会返回 [Secure Connection Failed](https://support.mozilla.org/en-US/kb/secure-connection-failed-firefox-did-not-connect) 错误（[Firefox bug 1606734](https://bugzil.la/1606734)）。 + +## TLS 握手超时值 + +如果 TLS 握手由于某种原因开始变得缓慢或反应迟钝，用户的体验就会受到严重影响。为了缓解这一问题，现代浏览器已经实现了握手超时： + +- 从版本 58 开始，Firefox 浏览器实现了 TLS 握手超时，默认值为 30 秒。超时值可通过编辑 about:config 中的 `network.http.tls-handshake-timeout` 首选项来更改。 + +## 参见 - [Mozilla SSL 配置生成器](https://ssl-config.mozilla.org)和 [Cipherlist.eu](https://cipherlist.eu/) 帮助你为服务器生成配置文件以保护你的站点。 -- Mozilla 运营安全（OpSec）团队维护了一个带有[引用的 TLS 配置](https://wiki.mozilla.org/Security/Server_Side_TLS)的 wiki 页面。 +- Mozilla 运营安全（OpSec）团队维护了一个带有[参考的 TLS 配置](https://wiki.mozilla.org/Security/Server_Side_TLS)的 wiki 页面。 - [Mozilla Observatory](https://observatory.mozilla.org/)、[SSL Labs](https://www.ssllabs.com/ssltest/) 以及 [Cipherscan](https://github.com/mozilla/cipherscan) 可以帮助你测试站点以了解其 TLS 配置的安全性。 - [安全上下文](/zh-CN/docs/Web/Security/Secure_Contexts) - [Strict-Transport-Security](/zh-CN/docs/Web/HTTP/Headers/Strict-Transport-Security) HTTP 标头 From 041b3d4b638c8c5ac6533e30da4494ed537bff6b Mon Sep 17 00:00:00 2001 From: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Date: Wed, 20 Sep 2023 21:03:15 +0800 Subject: [PATCH 425/600] [zh-cn]: update html element

    (#15947) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: A1lo --- files/zh-cn/web/html/element/p/index.md | 152 ++++++++++++++++++++++-- 1 file changed, 139 insertions(+), 13 deletions(-) diff --git a/files/zh-cn/web/html/element/p/index.md b/files/zh-cn/web/html/element/p/index.md index 7a9933e99657df..b42d8dad8ec3e8 100644 --- a/files/zh-cn/web/html/element/p/index.md +++ b/files/zh-cn/web/html/element/p/index.md @@ -1,38 +1,164 @@ --- -title:

    +title:

    ：段落元素 slug: Web/HTML/Element/p --- {{HTMLSidebar}} -**HTML \

    **元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，\

    是[块级元素](/zh-CN/docs/HTML/Block-level_elements)。 - -- _[内容分类](/zh-CN/docs/Web/HTML/Content_categories)_ [Flow content](/zh-CN/docs/Web/HTML/Content_categories#Flow_content), palpable content. -- _允许的内容_ [Phrasing content](/zh-CN/docs/Web/HTML/Content_categories#Phrasing_content). -- *标签省略*起始标签是必需的，结束标签在以下情形中可以省略。\

    元素后紧跟{{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hr")}}, {{HTMLElement("menu")}}, {{HTMLElement("nav")}}, {{HTMLElement("ol")}}, {{HTMLElement("pre")}}, {{HTMLElement("section")}}, {{HTMLElement("table")}}, {{HTMLElement("ul")}}或另一个{{HTMLElement("p")}}元素；或者父元素中没有其他内容了，而且父元素不是{{HTMLElement("a")}}元素 -- *允许的父元素*任何接受[flow content](/zh-CN/docs/Web/HTML/Content_categories#Flow_content)的元素 -- _DOM 接口_ {{domxref("HTMLParagraphElement")}} +[HTML](/zh-CN/docs/Web/HTML) **`

    `** 元素表示文本的一个段落。在视觉媒体中，段落通常表现为用空行和/或首行缩进与相邻段落分隔的文本块，但 HTML 段落可以是相关内容的任何结构分组，如图像或表格字段。 + +段落是[块级元素](/zh-CN/docs/Glossary/Block-level_content)，如果在关闭的 `

    ` 标签之前解析了另一个块级元素，则该标签将自动关闭。请参阅下面的“标签省略”。 + +{{EmbedInteractiveExample("pages/tabbed/p.html", "tabbed-standard")}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + 内容分类 + + 流式内容、可感知内容。 +
    允许的内容类型 + 短语内容。 +
    标签省略 + 开始标签是必要的。如果 {{HTMLElement("p")}} 元素后面紧跟 {{HTMLElement("address")}}、{{HTMLElement("article")}}、{{HTMLElement("aside")}}、{{HTMLElement("blockquote")}}、{{HTMLElement("div")}}、{{HTMLElement("dl")}}、{{HTMLElement("fieldset")}}、{{HTMLElement("footer")}}、{{HTMLElement("form")}}、{{HTMLElement("Heading_Elements", "h1")}}、{{HTMLElement("Heading_Elements", "h2")}}、{{HTMLElement("Heading_Elements", "h3")}}、{{HTMLElement("Heading_Elements", "h4")}}、{{HTMLElement("Heading_Elements", "h5")}}、{{HTMLElement("Heading_Elements", "h6")}}、{{HTMLElement("header")}}、{{HTMLElement("hr")}}、{{HTMLElement("menu")}}、{{HTMLElement("nav")}}、{{HTMLElement("ol")}}、{{HTMLElement("pre")}}、{{HTMLElement("section")}}、{{HTMLElement("table")}}、{{HTMLElement("ul")}} 或其他 {{HTMLElement("p")}} 元素，或者父元素中已没有内容，且父元素不是 {{HTMLElement("a")}} 元素，则可以省略结束标签。 +
    允许的父元素 + 任何接受流式内容的元素。 +
    隐式 ARIA 角色 + paragraph +
    允许的 ARIA 角色任意
    DOM 接口{{domxref("HTMLParagraphElement")}}
    ## 属性 这个元素包含[全局属性](/zh-CN/docs/Web/HTML/Global_attributes)。 -\

    元素的 **align** 属性已被弃用，请不要使用。 +> **备注：** `

    ` 标签的 `align` 属性已被弃用，请不要使用。 ## 示例 +### HTML + ```html

    这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。

    这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。

    ``` -输出如下： +### 运行结果 + +{{EmbedLiveSample('示例')}} + +## 为段落添加样式 + +默认情况下，浏览器会用一个空行来分隔段落。其他分隔方法，如首行缩进，可以通过 {{glossary("CSS")}} 来实现： + +### HTML + +```html +

    + 用空行分隔段落最便于读者扫描，但也可以通过缩进首行来分隔段落。这样做通常是为了减少所占空间，例如节省印刷用纸。 +

    + +

    + 学校试卷和草稿等需要编辑的写作，会同时使用空行和缩进进行分隔。在完成的作品中，将两者结合起来会被认为是多余和业余的。 +

    + +

    + 在非常古老的文字中，段落之间用一种特殊的字符：¶（称为段落符号）分隔。如今，这个符号太密集了，难以阅读。 +

    + +

    + 究竟有多难阅读？自己试一下： + +

    +``` + +### CSS + +```css +p { + margin: 0; + text-indent: 3ch; +} + +p.pilcrow { + text-indent: 0; + display: inline; +} +p.pilcrow + p.pilcrow::before { + content: " ¶ "; +} +``` + +### JavaScript + +```js +document.querySelector("button").addEventListener("click", (event) => { + document.querySelectorAll("p").forEach((paragraph) => { + paragraph.classList.toggle("pilcrow"); + }); + + [event.target.innerText, event.target.dataset.toggleText] = [ + event.target.dataset.toggleText, + event.target.innerText, + ]; +}); +``` -{{ EmbedLiveSample('示例') }} +### 运行结果 -## 注意 +{{EmbedLiveSample('为段落添加样式')}} -使用[CSS](/zh-CN/docs/Web/CSS) {{cssxref("margin")}}属性去改变段落之间的间隙，**不要**在段落之间插入空的段落元素或者{{HTMLElement("br")}}元素。 +## 无障碍考虑 + +将内容分成段落有助于使页面更易于访问。屏幕阅读器和其他辅助技术提供的快捷方式可以让用户跳到下一个或上一个段落，让他们可以略读内容，就像留白可以让视觉用户跳来跳去一样。 + +使用空的 `

    ` 元素在段落之间添加空格，对于使用读屏技术浏览的人来说是有问题的。屏幕阅读器可能会显示段落的存在，但不会显示其中包含的任何内容——因为没有内容。这会让使用屏幕阅读器的人感到困惑和沮丧。 + +如果需要额外的空间，可以使用 {{glossary("CSS")}} 属性，如 {{cssxref("margin")}} 来创建效果： + +```css +p { + margin-bottom: 2em; /* 增加段落之后的空白 */ +} +``` ## 规范 From 7720a5e00702cd911d9911adb42483777b749fc6 Mon Sep 17 00:00:00 2001 From: PADAone <50942816+yo-goto@users.noreply.github.com> Date: Mon, 18 Sep 2023 13:20:21 +0900 Subject: [PATCH 426/600] =?UTF-8?q?fix:=206=20primitive=20data=20types=20?= =?UTF-8?q?=E2=86=92=207=20primitive=20data=20types?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/glossary/primitive/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/glossary/primitive/index.md b/files/ja/glossary/primitive/index.md index 6c052d288244f9..55c0f96a59459e 100644 --- a/files/ja/glossary/primitive/index.md +++ b/files/ja/glossary/primitive/index.md @@ -5,7 +5,7 @@ l10n: sourceCommit: 72e6429af2f0ad138223623fb2c86087a008d4dd --- -{{Glossary("JavaScript")}} において、**プリミティブ** (primitive、プリミティブ値、プリミティブデータ型) は{{Glossary("object","オブジェクト")}}でなく、{{glossary("method","メソッド")}}を持たないデータのことです。 6 種類のプリミティブデータ型があります。 +{{Glossary("JavaScript")}} において、**プリミティブ** (primitive、プリミティブ値、プリミティブデータ型) は{{Glossary("object","オブジェクト")}}でなく、{{glossary("method","メソッド")}}を持たないデータのことです。 7 種類のプリミティブデータ型があります。 - {{Glossary("string","文字列")}} - {{Glossary("number","数値")}} From 39563fc576cda4d8cf65aa9df5b1d1d212053d63 Mon Sep 17 00:00:00 2001 From: wonseok Date: Thu, 21 Sep 2023 07:29:07 +0900 Subject: [PATCH 427/600] =?UTF-8?q?ko:=20203=20status=20=EB=B2=88=EC=97=AD?= =?UTF-8?q?=20(#15888)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ko: 203 status 번역 --- files/ko/web/http/status/203/index.md | 28 +++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 files/ko/web/http/status/203/index.md diff --git a/files/ko/web/http/status/203/index.md b/files/ko/web/http/status/203/index.md new file mode 100644 index 00000000000000..64fd43522dae73 --- /dev/null +++ b/files/ko/web/http/status/203/index.md @@ -0,0 +1,28 @@ +--- +title: 203 Non-Authoritative Information +slug: Web/HTTP/Status/203 +l10n: + sourceCommit: 0880a90f3811475d78bc4b2c344eb4146f25f66c +--- + +{{HTTPSidebar}} + +The HTTP **`203 Non-Authoritative Information`** 는 요청이 성공했지만 오리진 서버의 {{HTTPStatus("200")}} (`OK`) 응답에서 {{Glossary("Proxy server", "proxy")}}에 의해 포함된 페이로드가 수정되었음을 나타냅니다. + +`203` 응답은 {{HTTPHeader("Warning")}} 헤더 코드의 변환 적용을 의미하는 [`214`](/ko/docs/Web/HTTP/Headers/Warning#warning_codes) 값과 유사하며, 모든 상태 코드가 있는 응답에 적용할 수 있다는 추가적인 이점이 있습니다. + +## 상태 + +```http +203 Non-Authoritative Information +``` + +## 명세 + +{{Specifications}} + +## 같이 보기 + +- {{HTTPStatus("200")}} +- {{Glossary("Proxy server")}} +- {{HTTPHeader("Warning")}} From b6229a9bd87d43da95addc853210518cb84acaac Mon Sep 17 00:00:00 2001 From: pirateTurtle <75886763+wogha95@users.noreply.github.com> Date: Thu, 21 Sep 2023 07:33:33 +0900 Subject: [PATCH 428/600] [ko] translate `accept-post` (#15493) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * accept-post 1차 번역 완료 * accept-post 소제목 용어 가이드 반영 --- .../ko/web/http/headers/accept-post/index.md | 64 +++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 files/ko/web/http/headers/accept-post/index.md diff --git a/files/ko/web/http/headers/accept-post/index.md b/files/ko/web/http/headers/accept-post/index.md new file mode 100644 index 00000000000000..d61a5092834e4d --- /dev/null +++ b/files/ko/web/http/headers/accept-post/index.md @@ -0,0 +1,64 @@ +--- +title: Accept-Post +slug: Web/HTTP/Headers/Accept-Post +l10n: + sourceCommit: 0880a90f3811475d78bc4b2c344eb4146f25f66c +--- + +{{HTTPSidebar}} + +**`Accept-Post`** 응답 HTTP 헤더는 HTTP 포스트 요청에 대해 서버가 수락하는 [미디어 유형](/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types)을 알립니다. + +모든 메소드에 대한 응답으로 **`Accept-Post`** 를 사용하면 요청된 리소스에서 `POST`가 허용됨을 의미합니다. 헤더의 모든 문서/미디어 형식은 해당 문서 형식이 허용됨을 추가로 나타냅니다. + +예를 들어, 지원되지 않는 미디어 유형이 포함된 `POST` 요청을 수신하는 서버는 {{HTTPStatus("415")}} `Unsupported Media Type`과 하나 이상의 지원되는 미디어 유형을 참조하는 **`Accept-Post`** 헤더를 사용하여 응답할 수 있습니다. + +> **참고:** IANA 레지스트리는 [공식 콘텐츠 인코딩의 전체 목록](https://www.iana.org/assignments/http-parameters/http-parameters.xml#http-parameters-1)을 유지 관리합니다. + + + + + + + + + + + + +
    헤더 유형{{Glossary("Response header", "응답 헤더")}}
    {{Glossary("Forbidden header name", "금지된 헤더 이름")}}예
    + +## 구문 + +```http +Accept-Post: / +Accept-Post: /* +Accept-Post: */* +``` + +> **참고:** `Accept-Post` 헤더는 기본 설정 개념이 없다는 점(즉, `q` 인수가 없다는 점)을 제외하면 {{HTTPHeader("Accept")}}와 동일한 방식으로 미디어 범위를 지정합니다. 이는 `Accept-Post`가 응답 헤더인 반면 `Accept`는 요청 헤더이기 때문입니다. + +## 지시어 + +없습니다. + +## 예제 + +```http +Accept-Post: application/example, text/example +Accept-Post: image/webp +Accept-Post: */* +``` + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +브라우저 호환성은 이 헤더와 관련이 없습니다. 헤더는 서버에서 전송되며 사양은 클라이언트 동작을 정의하지 않습니다. + +## 같이 보기 + +- HTTP 메서드 {{HTTPMethod("POST")}} +- HTTP 시맨틱 및 컨텍스트 {{RFC("7231", "POST", "4.3.3")}} From 27a6c97500fca135959a1aece983fd62aed7da87 Mon Sep 17 00:00:00 2001 From: KyeongSang Yu Date: Thu, 21 Sep 2023 07:35:55 +0900 Subject: [PATCH 429/600] [ko] add translation to typesetting a homepage in CSS styling text (#15130) * add : translation of typesetting a homepage * delete image file --- .../typesetting_a_homepage/index.md | 98 +++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100644 files/ko/learn/css/styling_text/typesetting_a_homepage/index.md diff --git a/files/ko/learn/css/styling_text/typesetting_a_homepage/index.md b/files/ko/learn/css/styling_text/typesetting_a_homepage/index.md new file mode 100644 index 00000000000000..dcd4682c181027 --- /dev/null +++ b/files/ko/learn/css/styling_text/typesetting_a_homepage/index.md @@ -0,0 +1,98 @@ +--- +title: 커뮤니티 대학 홈페이지 레이아웃 구성하기 +slug: Learn/CSS/Styling_text/Typesetting_a_homepage +l10n: + sourceCommit: 751d58669499de0c6ea0d5b356e0e1448418c5d3 +--- + +{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}} + +이 평가에서는 커뮤니티 대학 홈페이지의 텍스트 스타일을 지정하도록 하여 이 모듈에서 다룬 모든 텍스트 스타일링 기법에 대한 이해도를 테스트합니다. 여러분은 그 과정에서 재미를 느낄 수 있습니다. + + + + + + + + + + + + +
    필요한 사전 지식: + 이 평가를 진행하기 전에 이 모듈의 모든 문서를 이미 살펴봤어야 합니다. +
    목표:CSS 텍스트 스타일링 기법에 대한 이해도를 테스트합니다.
    + +## 시작 지점 + +이 평가를 시작하기 위해서는 다음과 같이 해야 합니다. + +- 연습용 [HTML](https://github.com/mdn/learning-area/blob/main/css/styling-text/typesetting-a-homepage-start/index.html) 및 [CSS](https://github.com/mdn/learning-area/blob/main/css/styling-text/typesetting-a-homepage-start/style.css) 파일과 제공된 [외부 링크 아이콘](https://github.com/mdn/learning-area/blob/main/css/styling-text/typesetting-a-homepage-start/external-link-52.png)을 가져옵니다. +- 여러분의 로컬 컴퓨터에 복사본을 만듭니다. + +또는, [JSBin](https://jsbin.com/)이나 [Glitch](https://glitch.com/)와 같은 사이트를 사용하여 평가를 수행할 수도 있습니다. 이러한 온라인 편집기 중 하나에 HTML을 붙여 넣고 CSS를 입력한 다음, [이 URL](https://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png)을 사용하여 배경 이미지를 지정할 수 있습니다. 사용 중인 온라인 편집기에 별도의 CSS 패널이 없는 경우, 문서의 head 부분의 `