From 74f74557e3da802c049eb8ee260a9eb542c5e40e Mon Sep 17 00:00:00 2001 From: Gahotx <53534938+Gahotx@users.noreply.github.com> Date: Sat, 7 Sep 2024 15:26:19 +0800 Subject: [PATCH 01/72] [zh-cn]: create the translation of the SVG attribute `additive` (#23423) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: A1lo --- .../zh-cn/web/svg/attribute/additive/index.md | 50 +++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 files/zh-cn/web/svg/attribute/additive/index.md diff --git a/files/zh-cn/web/svg/attribute/additive/index.md b/files/zh-cn/web/svg/attribute/additive/index.md new file mode 100644 index 00000000000000..af52d0edad0411 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/additive/index.md @@ -0,0 +1,50 @@ +--- +title: additive +slug: Web/SVG/Attribute/additive +l10n: + sourceCommit: 54eb3a678b4d4cbc94588d2234103e74dfa063a0 +--- + +{{SVGRef}} + +**`additive`** 属性控制动画是否是可加的。 + +将动画定义为属性值的偏移量或增量（而不是绝对值）通常很有用。 + +你可以将此属性与以下 SVG 元素一起使用： + +- {{SVGElement("animate")}} +- {{SVGElement("animateMotion")}} +- {{SVGElement("animateTransform")}} + +## 使用说明 + + + + + + + + + + + + + + + + +
值replace | sum
默认值replace
动画性无
+ +- sum + - : 指定动画将添加到属性和其他较低优先级动画的基础值之上。 +- replace + - : 指定动画将覆盖属性的基础值和其他优先级较低的动画。这是默认设置，但其作用也会受到动画值属性 {{SVGAttr("by")}} 和 {{SVGAttr("to")}} 的影响，如下文所述：[SMIL 动画：from、to 和 by 属性是如何影响 additive 的行为的](https://www.w3.org/TR/2001/REC-smil-animation-20010904/#FromToByAndAdditive)。 + +## 规范 + +{{Specifications}} + +## 参见 + +- [SMIL 动画规范](https://www.w3.org/TR/2001/REC-smil-animation-20010904/#AdditiveAttribute) From be155b9392e26b7a73d7c62651a1b3f2977a934f Mon Sep 17 00:00:00 2001 From: TripleCamera Date: Sat, 7 Sep 2024 17:04:15 +0800 Subject: [PATCH 02/72] [zh-cn] create the translation of "Test your skills: Loops" (#23359) Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- .../building_blocks/looping_code/index.md | 4 ++ .../test_your_skills_colon__loops/index.md | 63 +++++++++++++++++++ 2 files changed, 67 insertions(+) create mode 100644 files/zh-cn/learn/javascript/building_blocks/test_your_skills_colon__loops/index.md diff --git a/files/zh-cn/learn/javascript/building_blocks/looping_code/index.md b/files/zh-cn/learn/javascript/building_blocks/looping_code/index.md index 435b4147c278d3..fa1ab2f80794c7 100644 --- a/files/zh-cn/learn/javascript/building_blocks/looping_code/index.md +++ b/files/zh-cn/learn/javascript/building_blocks/looping_code/index.md @@ -699,6 +699,10 @@ do { > [!NOTE] > 还有其他循环类型/特性，这些特性在 高级/专门 的情况下是有用的，超出了本文的范围。如果你想进一步了解循环学习，请阅读我们的高级[循环和迭代指南](/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration)。 +## 技能测试！ + +你已经到达了本文的末尾，但你还记得最重要的知识吗？在你继续学习之前，你可以做一些深入的测试，来验证你已经记住了这些知识——请参阅[技能测试：循环](/zh-CN/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Loops)。 + ## 结论 本文向你展示了背后的基本概念，以及 JavaScript 中循环代码时可用的不同选项。你现在应该明白为什么循环是一个处理重复代码的好机制，并且在你自己的例子中使用它们！ diff --git a/files/zh-cn/learn/javascript/building_blocks/test_your_skills_colon__loops/index.md b/files/zh-cn/learn/javascript/building_blocks/test_your_skills_colon__loops/index.md new file mode 100644 index 00000000000000..6d0764544eca16 --- /dev/null +++ b/files/zh-cn/learn/javascript/building_blocks/test_your_skills_colon__loops/index.md @@ -0,0 +1,63 @@ +--- +title: 技能测试：循环 +slug: Learn/JavaScript/Building_blocks/Test_your_skills:_Loops +l10n: + sourceCommit: bc0d0d1ef796435e969f6d65c7e5d3c08f4023aa +--- + +{{learnsidebar}} + +这个技能测试的目标是评估你是否理解了[循环吧，代码](/zh-CN/docs/Learn/JavaScript/Building_blocks/Looping_code)一文。 + +> [!NOTE] +> 你可以下载代码并放入在线编辑器（如 [CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)）中来尝试解决问题。 +> +> 如果你遇到了困难，你可以通过[沟通渠道](/zh-CN/docs/MDN/Community/Communication_channels)联系我们。 + +## 实用的 DOM 操作 + +为了完成下面的某些问题，你需要编写一些 [DOM](/zh-CN/docs/Glossary/DOM) 操作代码——例如创建新的 HTML 元素，将它们的文本内容设为特定的字符串值，以及将它们嵌套到页面中已有的元素中——这些都要通过 JavaScript 来完成。 + +我们还没有在课程中明确讲述这些知识，但是你将会看到一些使用这些知识的示例；并且我们希望你能研究一下，为了成功解答问题，你需要哪些 DOM API。一个好的出发点是我们的[操作文档](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)教程。 + +## 循环 1 + +在第一个循环任务中，我们希望你创建一个简单的循环，遍历给定的 `myArray` 中的所有元素，将它们放在列表项（即 [`
  • `](/zh-CN/docs/Web/HTML/Element/li) 元素）中，将列表项添加到给定的 `list` 中，最后打印到屏幕上。 + +> [!CALLOUT] +> +> [下载此任务的初始代码](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/tasks/loops/loops1-download.html)以在自己的编辑器或在线编辑器中完成任务。 + +## 循环 2 + +在这个任务中，我们希望你编写一个简单的程序，在给定名字的情况下，搜索一个包含名字和电话号码的[对象](/zh-CN/docs/Glossary/Object)数组（`phonebook`）；如果找到了名字，将名字和电话号码输出到段落（`para`）中，然后退出循环，让它不要继续进行。 + +如果你还没有知悉和对象有关的知识，不要担心！现在你只需要知道如何访问成员–值对就可以了。你可以在 [JavaScript 对象基础](/zh-CN/docs/Learn/JavaScript/Objects/Basics)教程中阅读有关对象的内容。 + +开始时，你有三个变量： + +- `name`——包含要搜索的名字。 +- `para`——包含对段落的引用，用于输出结果。 +- `phonebook`——包含要搜索的电话簿条目。 + +你需要使用一种在上一个任务中没有使用过的循环类型。 + +> [!CALLOUT] +> +> [下载此任务的初始代码](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/tasks/loops/loops2-download.html)以在自己的编辑器或在线编辑器中完成任务。 + +## 循环 3 + +在最后一项任务中，你有以下变量和函数： + +- `i`——初始值为 500；应该用作迭代器。 +- `para`——包含对段落的引用，用于输出结果。 +- `isPrime()`——一个函数，当传入的数是质数时返回 `true`，不是时返回 `false`。 + +你需要使用循环来倒序遍历从 2 到 500 的数（1 不算质数），并使用这些数调用给定的 `isPrime()` 函数。对于不是质数的数，继续下一次循环迭代。对于是质数的数，将它添加到段落的 `textContent` 中，并使用某种分隔符分隔。 + +你需要使用一种在前两个任务中没有使用过的循环类型。 + +> [!CALLOUT] +> +> [下载此任务的初始代码](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/tasks/loops/loops3-download.html)以在自己的编辑器或在线编辑器中完成任务。 From a2473eb95b0f9791d748da5ef7732861f45c93f3 Mon Sep 17 00:00:00 2001 From: familyboat <84062528+familyboat@users.noreply.github.com> Date: Sat, 7 Sep 2024 20:19:04 +0800 Subject: [PATCH 03/72] zh-cn: update the translation of "Common questions" (#23447) --- files/zh-cn/learn/common_questions/index.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/files/zh-cn/learn/common_questions/index.md b/files/zh-cn/learn/common_questions/index.md index 1ef73e9518925f..264e4f1ecf06f0 100644 --- a/files/zh-cn/learn/common_questions/index.md +++ b/files/zh-cn/learn/common_questions/index.md @@ -1,15 +1,17 @@ --- title: 常见问题 slug: Learn/Common_questions +l10n: + sourceCommit: 751d58669499de0c6ea0d5b356e0e1448418c5d3 --- {{LearnSidebar}} -学习区域的这一部分旨在为可能出现的常见问题提供答案，这些问题不一定是结构化的核心学习途径的一部分（例如：[HTML](/zh-CN/docs/Learn/HTML) 或 [CSS](/zh-CN/docs/Learn/CSS) 的学习文章），这些文章专注于它们自己的内容。 +学习区的本部分是为可能会遇到的常见问题提供答案，而这些问题不必是结构化的核心学习路径的部分（例如，[HTML](/zh-CN/docs/Learn/HTML) 或 [CSS](/zh-CN/docs/Learn/CSS) 中的学习文章）。这些文章专注于它们自己的内容。 -- [使用 HTML 解决常见问题](/zh-CN/docs/Learn/HTML/Howto) -- [使用 CSS 解决常见问题](/zh-CN/docs/Learn/CSS/Howto) -- [使用 JavaScript 解决常见问题](/zh-CN/docs/Learn/JavaScript/Howto) +- [HTML 问题](/zh-CN/docs/Learn/HTML/Howto) +- [CSS 问题](/zh-CN/docs/Learn/CSS/Howto) +- [JavaScript 问题](/zh-CN/docs/Learn/JavaScript/Howto) - [Web 机制](/zh-CN/docs/Learn/Common_questions/Web_mechanics) - [工具和安装](/zh-CN/docs/Learn/Common_questions/Tools_and_setup) -- [设计与无障碍](/zh-CN/docs/Learn/Common_questions/Design_and_accessibility) +- [设计和无障碍](/zh-CN/docs/Learn/Common_questions/Design_and_accessibility) From 8a7c622e24455060607eef7bad705e8d8747bdf8 Mon Sep 17 00:00:00 2001 From: Dasom Won Date: Sat, 7 Sep 2024 15:16:47 +0200 Subject: [PATCH 04/72] =?UTF-8?q?[ko]=20a11y:=20link=20update(=EC=9B=B9=20?= =?UTF-8?q?=EC=BB=A8=ED=85=90=EC=B8=A0=20=EC=A0=91=EA=B7=BC=EC=84=B1=20?= =?UTF-8?q?=EC=A7=80=EC=B9=A8=20=EC=9D=B4=ED=95=B4=ED=95=98=EA=B8=B0)=20(#?= =?UTF-8?q?23429)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * update links for principles * Update files/ko/web/accessibility/understanding_wcag/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/ko/web/accessibility/understanding_wcag/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/files/ko/web/accessibility/understanding_wcag/index.md b/files/ko/web/accessibility/understanding_wcag/index.md index 501d5c8622bded..cec5ce6425c7f0 100644 --- a/files/ko/web/accessibility/understanding_wcag/index.md +++ b/files/ko/web/accessibility/understanding_wcag/index.md @@ -17,10 +17,10 @@ WCAG는 크게 네 가지 원칙으로 분류할 수 있습니다. 이는 웹 아래의 링크들을 클릭하면 해당 영역에 대해 더 자세히 설명하는 페이지로 이동하며, 각 원칙들을 더욱 세분화 한 WCAG 2.0과 2.1의 지침을 준수할 수 있는 실용적인 조언들을 통해 웹 컨텐츠를 작성할 수 있도록 합니다. -- [인식의 용이성:](/ko/docs/user:chrisdavidmills/Understanding_WCAG/Perceivable) 사용자가 하나 또는 다수의 감각을 사용해 어떤 방식으로든 인지할 수 있어야 합니다. -- [운용의 용이성](/ko/docs/user:chrisdavidmills/Understanding_WCAG/Operable): 사용자가 UI 요소들을 컨트롤 할 수 있어야 합니다(예를 들어, 버튼은 마우스, 키보드, 음성 명령 등의 방식으로 클릭이 가능해야 합니다). -- [이해의 용이성](/ko/docs/user:chrisdavidmills/Understanding_WCAG/Understandable): 컨텐츠를 사용자가 이해할 수 있어야 합니다. -- [견고성](/ko/docs/user:chrisdavidmills/Understanding_WCAG/Robust): 컨텐츠는 각기 다른 브라우저에서, 현재와 미래에 모두 동작할 수 있도록 널리 알려진 웹 표준을 준수하여 개발되어야 합니다. +- [인식의 용이성:](/ko/docs/Web/Accessibility/Understanding_WCAG/Perceivable) 사용자가 하나 또는 다수의 감각을 사용해 어떤 방식으로든 인지할 수 있어야 합니다. +- [운용의 용이성](/ko/docs/Web/Accessibility/Understanding_WCAG/Operable): 사용자가 UI 요소들을 컨트롤 할 수 있어야 합니다(예를 들어, 버튼은 마우스, 키보드, 음성 명령 등의 방식으로 클릭이 가능해야 합니다). +- [이해의 용이성](/ko/docs/Web/Accessibility/Understanding_WCAG/Understandable): 컨텐츠를 사용자가 이해할 수 있어야 합니다. +- [견고성](/ko/docs/Web/Accessibility/Understanding_WCAG/Robust): 컨텐츠는 각기 다른 브라우저에서, 현재와 미래에 모두 동작할 수 있도록 널리 알려진 웹 표준을 준수하여 개발되어야 합니다. ## WCAG 2.0과 2.1 중 어떤 것을 사용해야 하나요? From aa4bc7e8108a61b98e8e96ed426fa313f4f5c892 Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Sun, 8 Sep 2024 09:13:06 +0800 Subject: [PATCH 05/72] [zh-cn]: sync translation for File System API (#23425) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: A1lo --- files/zh-cn/web/api/file_system_api/index.md | 4 +- .../origin_private_file_system/index.md | 6 +- .../api/filesystemdirectoryhandle/index.md | 2 +- .../createsyncaccesshandle/index.md | 148 +++++++++++++++++- .../createwritable/index.md | 121 +++++++++++++- .../web/api/filesystemfilehandle/index.md | 2 +- files/zh-cn/web/api/filesystemhandle/index.md | 6 +- .../api/filesystemhandle/issameentry/index.md | 14 +- .../filesystemhandle/querypermission/index.md | 6 +- .../requestpermission/index.md | 12 +- .../filesystemsyncaccesshandle/close/index.md | 2 +- .../filesystemsyncaccesshandle/flush/index.md | 2 +- .../getsize/index.md | 2 +- .../api/filesystemsyncaccesshandle/index.md | 2 +- .../filesystemsyncaccesshandle/read/index.md | 2 +- .../truncate/index.md | 2 +- .../filesystemsyncaccesshandle/write/index.md | 2 +- .../api/storagemanager/getdirectory/index.md | 2 +- 18 files changed, 304 insertions(+), 33 deletions(-) diff --git a/files/zh-cn/web/api/file_system_api/index.md b/files/zh-cn/web/api/file_system_api/index.md index d75d1aeb0686fc..d86af0fdbaccab 100644 --- a/files/zh-cn/web/api/file_system_api/index.md +++ b/files/zh-cn/web/api/file_system_api/index.md @@ -2,7 +2,7 @@ title: 文件系统 API slug: Web/API/File_System_API l10n: - sourceCommit: 2b6bddfe281c0179fbde9c870f9de7c0dc3829e8 + sourceCommit: 0c3f18aca2c8a93d3982183f64bf7762c2c310b0 --- {{securecontext_header}}{{DefaultAPISidebar("File System API")}}{{AvailableInWorkers}} @@ -20,7 +20,7 @@ l10n: 你还可以从以下途径获得句柄： - {{domxref('HTML Drag and Drop API', 'HTML 拖放 API', '', 'nocode')}} 的 {{domxref('DataTransferItem.getAsFileSystemHandle()')}} 方法。 -- [文件处理 API](https://developer.chrome.com/en/articles/file-handling/)。 +- [文件处理 API](https://developer.chrome.com/docs/capabilities/web-apis/file-handling)。 每种句柄都提供了其独有的功能，取决于你使用的种类，会有些许差异（详见[接口](#接口)部分）。在获得句柄后，你便可以访问文件的数据或是被选中的目录的信息（包含子目录）。此 API 开辟了 web 此前一直缺乏的潜在功能。但不论如何，安全性是设计 API 时的首要考量，除非用户明确授权，否则就不允许访问文件和目录的数据（注意：[源私有文件系统](#源私有文件系统)并非如此，因为其对用户不可见）。 diff --git a/files/zh-cn/web/api/file_system_api/origin_private_file_system/index.md b/files/zh-cn/web/api/file_system_api/origin_private_file_system/index.md index 5628ce6b4c46f6..761775fa5423ca 100644 --- a/files/zh-cn/web/api/file_system_api/origin_private_file_system/index.md +++ b/files/zh-cn/web/api/file_system_api/origin_private_file_system/index.md @@ -2,7 +2,7 @@ title: 源私有文件系统 slug: Web/API/File_System_API/Origin_private_file_system l10n: - sourceCommit: 2b6bddfe281c0179fbde9c870f9de7c0dc3829e8 + sourceCommit: 2cba64f68aab9e233fecfc2bab8bea4118716c14 --- {{securecontext_header}}{{DefaultAPISidebar("File System API")}}{{AvailableInWorkers}} @@ -102,7 +102,7 @@ await (await navigator.storage.getDirectory()).remove({ recursive: true }); ### 列出文件夹中的内容 -{{domxref("FileSystemDirectoryHandle")}} 是一个[异步迭代器](/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols#异步迭代器和异步可迭代协议)。所以，你可以用 [`for await…of`](/zh-CN/docs/Web/JavaScript/Reference/Statements/for-await...of) 循环和诸如 [`entries()`](/zh-CN/docs/Web/API/FileSystemDirectoryHandle/entries)、[`values()`](/zh-CN/docs/Web/API/FileSystemDirectoryHandle/entries) 和 [`keys()`](/zh-CN/docs/Web/API/FileSystemDirectoryHandle/entries) 这样的标准方法对其进行迭代。 +{{domxref("FileSystemDirectoryHandle")}} 是一个[异步迭代器](/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols#异步迭代器和异步可迭代协议)。所以，你可以用 [`for await...of`](/zh-CN/docs/Web/JavaScript/Reference/Statements/for-await...of) 循环和诸如 [`entries()`](/zh-CN/docs/Web/API/FileSystemDirectoryHandle/entries)、[`values()`](/zh-CN/docs/Web/API/FileSystemDirectoryHandle/entries) 和 [`keys()`](/zh-CN/docs/Web/API/FileSystemDirectoryHandle/entries) 这样的标准方法对其进行迭代。 例如： @@ -179,7 +179,7 @@ size = accessHandle.getSize(); const dataView = new DataView(new ArrayBuffer(size)); // 将整个文件读取到数据视图。 -accessHandle.read(dataView); +accessHandle.read(dataView, { at: 0 }); // 打印 `"Some textMore content"`。 console.log(textDecoder.decode(dataView)); diff --git a/files/zh-cn/web/api/filesystemdirectoryhandle/index.md b/files/zh-cn/web/api/filesystemdirectoryhandle/index.md index e29b303201ccc3..be6f060a35b590 100644 --- a/files/zh-cn/web/api/filesystemdirectoryhandle/index.md +++ b/files/zh-cn/web/api/filesystemdirectoryhandle/index.md @@ -2,7 +2,7 @@ title: FileSystemDirectoryHandle slug: Web/API/FileSystemDirectoryHandle l10n: - sourceCommit: be3c45cd7a4d5c04139eceae10f7368251cdca64 + sourceCommit: e92950d09467164afc9dfd8b35be9c909b63a8ab --- {{securecontext_header}}{{APIRef("File System API")}}{{AvailableInWorkers}} diff --git a/files/zh-cn/web/api/filesystemfilehandle/createsyncaccesshandle/index.md b/files/zh-cn/web/api/filesystemfilehandle/createsyncaccesshandle/index.md index 1812ba74b57b24..e4883e512dfe1c 100644 --- a/files/zh-cn/web/api/filesystemfilehandle/createsyncaccesshandle/index.md +++ b/files/zh-cn/web/api/filesystemfilehandle/createsyncaccesshandle/index.md @@ -2,7 +2,7 @@ title: FileSystemFileHandle：createSyncAccessHandle() 方法 slug: Web/API/FileSystemFileHandle/createSyncAccessHandle l10n: - sourceCommit: f10fbe2d2dc4857bf29ce955689a7ba7c1ffac8b + sourceCommit: 2b6f99e45534ce662f842d8b4d2f7845492e353c --- {{securecontext_header}}{{APIRef("File System API")}}{{AvailableInWorkers("dedicated")}} @@ -15,11 +15,23 @@ l10n: ```js-nolint createSyncAccessHandle() +createSyncAccessHandle(options) ``` ### 参数 -无。 +- `options` {{optional_inline}} + + - : 一个具有以下属性的对象： + + - `mode` {{optional_inline}} {{non-standard_inline}} + - : 指定访问句柄的锁定模式的字符串。默认值为 `"readwrite"`。可能的值包括： + - `"read-only"` + - : 可以同时在一个文件上打开多个 `FileSystemSyncAccessHandle` 对象（例如，在多个标签页中使用同一个应用时），前提是它们都以 `"read-only"` 模式打开。打开后，可以在句柄上调用类似读取的方法——{{domxref("FileSystemSyncAccessHandle.read", "read()")}}、{{domxref("FileSystemSyncAccessHandle.getSize", "getSize()")}} 和 {{domxref("FileSystemSyncAccessHandle.close", "close()")}}。 + - `"readwrite"` + - : 每个文件只能打开一个 `FileSystemSyncAccessHandle` 对象。如果在第一个句柄关闭之前尝试打开后续句柄，则会导致抛出 `NoModificationAllowedError` 异常。打开后，可以调用句柄上的任何可用方法。 + - `"readwrite-unsafe"` + - : 可以同时在一个文件上打开多个 `FileSystemSyncAccessHandle` 对象，前提是它们都以 `"readwrite-unsafe"` 模式打开。打开后，可以在句柄上调用任何可用的方法。 ### 返回值 @@ -34,10 +46,12 @@ createSyncAccessHandle() - `NotFoundError` {{domxref("DOMException")}} - : 如果未找到当前条目，则抛出该异常。 - `NoModificationAllowedError` {{domxref("DOMException")}} - - : 如果浏览器无法获得文件句柄所关联的文件的锁定，抛出此异常。 + - : 如果浏览器无法获得文件句柄所关联的文件的锁定，抛出此异常。这可能是因为 `mode` 被设置为 `readwrite`，并尝试同时打开多个句柄。 ## 示例 +### 基本用法 + 以下异步事件处理函数处于 Web Worker 上下文。其中的代码片段创建了一个同步文件访问句柄。 ```js @@ -58,6 +72,134 @@ onmessage = async (e) => { }; ``` +### 带有 `mode` 选项的完整示例 + +我们的 [`createSyncAccessHandle()` 模式测试](https://createsyncaccesshandle-mode-test.glitch.me/)示例提供了一个 {{htmlelement("input")}} 字段来输入文本，以及两个按钮——一个用于将输入的文本写入原始私有文件系统中的文件末尾，另一个用于在文件太满时清空文件。 + +尝试探索上面的演示，打开浏览器开发者控制台，以便你可以看到正在发生的事情。如果你尝试在多个浏览器标签页中打开演示，你会发现可以同时打开多个句柄以同时写入文件。这是因为在 `createSyncAccessHandle()` 调用上设置了 `mode: "readwrite-unsafe"`。 + +下面我们将探索代码。 + +#### HTML + +两个 {{htmlelement("button")}} 元素和文本 {{htmlelement("input")}} 字段如下所示： + +```html +
      +
    1. + + +
      2. +
    2. 将你的文本写入文件：
      3. +
    3. 如果文件太满，则清空该文件：
      4. +
    +``` + +#### 主线程 JavaScript + +HTML 文件中的主线程 JavaScript 如下所示。我们获取对写入文本按钮、清空文件按钮和文本输入字段的引用，然后使用 {{domxref("Worker.Worker", "Worker()")}} 构造函数创建一个新的 Web Worker。然后我们定义两个函数并将它们设置为按钮上的事件处理器： + +- 单击写入文本按钮时运行 `writeToOPFS()`。此函数使用 {{domxref("Worker.postMessage()")}} 方法将文本字段的输入值发布到对象内的 Worker，然后清空文本字段，为下一次添加做好准备。请注意传递的对象还包含 `command: "write"` 属性，以指定我们想要使用此消息触发写入操作。 +- 单击清空文件按钮时运行 `emptyOPFS()`。这会将包含 `command: "empty"` 属性的对象发布到 Worker，指定要清空文件。 + +```js +const writeBtn = document.querySelector(".write"); +const emptyBtn = document.querySelector(".empty"); +const fileText = document.querySelector("#filetext"); + +const opfsWorker = new Worker("worker.js"); + +function writeToOPFS() { + opfsWorker.postMessage({ + command: "write", + content: fileText.value, + }); + console.log("主线程脚本：发送给 worker 的文本"); + fileText.value = ""; +} + +function emptyOPFS() { + opfsWorker.postMessage({ + command: "empty", + }); +} + +writeBtn.addEventListener("click", writeToOPFS); +emptyBtn.addEventListener("click", emptyOPFS); +``` + +#### Worker 线程 JavaScript + +worker JavaScript 如下所示。 + +首先，我们运行一个名为 `initOPFS()` 的函数，该函数使用 {{domxref("StorageManager.getDirectory()")}} 获取对 OPFS 根的引用，使用 {{domxref("FileSystemDirectoryHandle.getFileHandle()")}} 创建文件并返回其句柄，然后使用 `createSyncAccessHandle()` 返回 {{domxref("FileSystemSyncAccessHandle")}}。此调用包括 `mode: "readwrite-unsafe"` 属性，允许多个句柄同时访问同一文件。 + +```js +let accessHandle; + +async function initOPFS() { + const opfsRoot = await navigator.storage.getDirectory(); + const fileHandle = await opfsRoot.getFileHandle("file.txt", { create: true }); + accessHandle = await fileHandle.createSyncAccessHandle({ + mode: "readwrite-unsafe", + }); +} + +initOPFS(); +``` + +在 worker 的 [message 事件](/zh-CN/docs/Web/API/Worker/message_event)处理器中，我们首先使用 {{domxref("FileSystemSyncAccessHandle.getSize", "getSize()")}} 获取文件的大小。然后，我们检查消息中发送的数据是否包含 `command` 属性值 `"empty"`。如果是，我们使用 {{domxref("FileSystemSyncAccessHandle.truncate", "truncate()")}} 清空文件，值为 `0`，并更新 `size` 变量中包含的文件大小。 + +如果消息数据是其他内容，我们： + +- 创建新的 {{domxref("TextEncoder")}} 和 {{domxref("TextDecoder")}} 来处理稍后对文本内容的编码和解码。 +- 使用 {{domxref("FileSystemSyncAccessHandle.write", "write()")}} 对消息数据进行编码并将结果写入文件末尾，然后更新 `size` 变量中包含的文件大小。 +- 创建一个 {{jsxref("DataView")}} 来包含文件内容，并使用 {{domxref("FileSystemSyncAccessHandle.read", "read()")}} 将内容读入其中。 +- 解码 `DataView` 内容并将其记录到控制台。 + +```js +onmessage = function (e) { + console.log("Worker：从主线程收到消息"); + + // 获取文件当前大小 + let size = accessHandle.getSize(); + + if (e.data.command === "empty") { + // 将文件截断为 0 字节 + accessHandle.truncate(0); + + // 获取文件当前大小 + size = accessHandle.getSize(); + } else { + const textEncoder = new TextEncoder(); + const textDecoder = new TextDecoder(); + + // 对要写入文件的内容进行编码 + const content = textEncoder.encode(e.data.content); + // 在文件末尾写入内容 + accessHandle.write(content, { at: size }); + + // 获取文件当前大小 + size = accessHandle.getSize(); + + // 准备文件长度的数据视图 + const dataView = new DataView(new ArrayBuffer(size)); + + // 将整个文件读入数据视图 + accessHandle.read(dataView, { at: 0 }); + + // 将当前文件内容记录到控制台 + console.log("文件内容：" + textDecoder.decode(dataView)); + + // 刷新更改 + accessHandle.flush(); + } + + // 将文件的大小记录到控制台 + console.log("大小：" + size); +}; +``` + ## 规范 {{Specifications}} diff --git a/files/zh-cn/web/api/filesystemfilehandle/createwritable/index.md b/files/zh-cn/web/api/filesystemfilehandle/createwritable/index.md index 0f20a7615f6136..cd3703d5e4f4ca 100644 --- a/files/zh-cn/web/api/filesystemfilehandle/createwritable/index.md +++ b/files/zh-cn/web/api/filesystemfilehandle/createwritable/index.md @@ -2,7 +2,7 @@ title: FileSystemFileHandle：createWritable() 方法 slug: Web/API/FileSystemFileHandle/createWritable l10n: - sourceCommit: f10fbe2d2dc4857bf29ce955689a7ba7c1ffac8b + sourceCommit: 1a7695e13c51d85a81e3e5d85feedbc5dbd2a379 --- {{securecontext_header}}{{APIRef("File System API")}}{{AvailableInWorkers}} @@ -26,6 +26,12 @@ createWritable(options) - `keepExistingData` {{optional_inline}} - : {{jsxref('Boolean', '布尔值', '', 'nocode')}}，默认为 `false`。当设为 `true` 时，如果文件存在，则现将现有文件的内容复制到临时文件，否则临时文件初始时内容为空。 + - `mode` {{optional_inline}} {{non-standard_inline}} + - : 指定可写文件流的锁定模式的字符串。默认值为 `"siloed"`。可能的值包括： + - `"exclusive"` + - : 只能打开一个 `FileSystemWritableFileStream` 写入器。在第一个写入器关闭之前尝试打开后续写入器会导致抛出 `NoModificationAllowedError` 异常。 + - `"siloed"` + - : 可以同时打开多个 `FileSystemWritableFileStream` 写入器，每个写入器都有自己的交换文件，例如在多个标签页中使用同一个应用时。最后打开的写入器会写入其数据，因为每个写入器关闭时都会刷新数据。 ### 返回值 @@ -38,12 +44,14 @@ createWritable(options) - `NotFoundError` {{domxref("DOMException")}} - : 如果未找到当前条目，则抛出该异常。 - `NoModificationAllowedError` {{domxref("DOMException")}} - - : 如果浏览器无法获取与文件句柄关联的文件的锁，则抛出该异常。 + - : 如果浏览器无法获取与文件句柄关联的文件的锁，则抛出该异常。这可能是因为 `mode` 设置为 `exclusive`，并且尝试同时打开多个写入器。 - `AbortError` {{domxref("DOMException")}} - : 如果实现定义的恶意软件扫描和安全浏览检查失败，则抛出此异常。 ## 示例 +### 基本用法 + 以下异步函数用于将给定内容写入文件句柄，从而写入磁盘。 ```js @@ -59,6 +67,115 @@ async function writeFile(fileHandle, contents) { } ``` +### 通过选项扩展用途 + +我们的 [`createWritable()` 模式测试](https://createwritable-mode-test.glitch.me/)示例提供了一个 {{htmlelement("button")}} 来选择要写入的文件，一个文本 {{htmlelement("input")}} 字段，你可以在其中输入一些要写入文件的文本，以及第二个 `
    • +
  • + + +
    • +
  • 将你的文本写入文件：
    • + +``` + +文本输入字段和写入文本按钮最初通过 [`disabled`](/zh-CN/docs/Web/HTML/Attributes/disabled) 属性设置为禁用——直到用户选择要写入的文件时，它们才应被使用。 + +```css hidden +li { + margin-bottom: 10px; +} +``` + +#### JavaScript + +我们首先获取对选择文件按钮、写入文本按钮和文本输入字段的引用。我们还声明一个全局变量 `writableStream`，它将存储对可写流的引用，用于在创建后将文本写入文件。我们最初将其设置为 `null`。 + +```js +const selectBtn = document.querySelector(".select"); +const writeBtn = document.querySelector(".write"); +const fileText = document.querySelector("#filetext"); + +let writableStream = null; +``` + +接下来，我们创建一个名为 `selectFile()` 的异步函数，当按下选择按钮时，我们将调用该函数。它使用 {{domxref("Window.showSaveFilePicker()")}} 方法向用户显示文件选择器对话框，并为他们选择的文件创建文件句柄。在该句柄上，我们调用 `createWritable()` 方法来创建一个流，以将文本写入所选文件。如果调用失败，我们会将错误记录到控制台。 + +我们向 `createWritable()` 传递一个包含以下选项的选项对象： + +- `keepExistingData: true`：如果所选文件已存在，则在开始写入之前，将其中包含的数据复制到临时文件中。 + +- `mode: "exclusive"`：表示只能同时在文件句柄上打开一个写入器。如果第二个用户加载示例并尝试选择文件，他们将收到错误。 + +最后，我们启用输入字段和写文本按钮，因为它们是下一步所需要的，并禁用选择文件按钮（目前不需要）。 + +```js +async function selectFile() { + // 创建新句柄 + const handle = await window.showSaveFilePicker(); + + // 创建 FileSystemWritableFileStream 来写入 + try { + writableStream = await handle.createWritable({ + keepExistingData: true, + mode: "exclusive", + }); + } catch (e) { + if (e.name === "NoModificationAllowedError") { + console.log(`你现在无法访问该文件；其他人正在尝试修改它。请稍后重试。`); + } else { + console.log(e.message); + } + } + + // 启用文本字段和写入按钮，禁用选择按钮 + fileText.disabled = false; + writeBtn.disabled = false; + selectBtn.disabled = true; +} +``` + +我们的下一个函数 `writeFile()` 使用 {{domxref("FileSystemWritableFileStream.write()")}} 将输入字段中输入的文本写入所选文件，然后清空输入字段。然后我们使用 {{domxref("WritableStream.close()")}} 关闭可写流，并重置演示以便再次运行——控件的 `disable` 状态切换回其原始状态，并且 `writableStream` 变量设置回 `null`。 + +```js +async function writeFile() { + // 将文本写入我们的文件并清空文本字段 + await writableStream.write(fileText.value); + fileText.value = ""; + + // 关闭文件并将内容写入磁盘。 + await writableStream.close(); + + // 禁用文本字段和写入按钮，启用选择按钮 + fileText.disabled = true; + writeBtn.disabled = true; + selectBtn.disabled = false; + + // 将 writeableStream 重新设置为 null + writableStream = null; +} +``` + +为了使演示运行，我们在按钮上设置了事件监听器，以便在每个按钮被点击时运行相关的函数。 + +```js +selectBtn.addEventListener("click", selectFile); +writeBtn.addEventListener("click", writeFile); +``` + ## 规范 {{Specifications}} diff --git a/files/zh-cn/web/api/filesystemfilehandle/index.md b/files/zh-cn/web/api/filesystemfilehandle/index.md index fc2bd199e69f4f..35459d1c76927c 100644 --- a/files/zh-cn/web/api/filesystemfilehandle/index.md +++ b/files/zh-cn/web/api/filesystemfilehandle/index.md @@ -2,7 +2,7 @@ title: FileSystemFileHandle slug: Web/API/FileSystemFileHandle l10n: - sourceCommit: f10fbe2d2dc4857bf29ce955689a7ba7c1ffac8b + sourceCommit: d8f04d843dd81ab8cea1cfc0577ae3c5c9b77d5c --- {{securecontext_header}}{{APIRef("File System API")}}{{AvailableInWorkers}} diff --git a/files/zh-cn/web/api/filesystemhandle/index.md b/files/zh-cn/web/api/filesystemhandle/index.md index 3309b0da8b17f9..8926bbbe823c26 100644 --- a/files/zh-cn/web/api/filesystemhandle/index.md +++ b/files/zh-cn/web/api/filesystemhandle/index.md @@ -2,7 +2,7 @@ title: FileSystemHandle slug: Web/API/FileSystemHandle l10n: - sourceCommit: be3c45cd7a4d5c04139eceae10f7368251cdca64 + sourceCommit: 6c592023efa1f762eaa1eb1f36241750626be51c --- {{securecontext_header}}{{APIRef("File System API")}}{{AvailableInWorkers}} @@ -13,9 +13,9 @@ l10n: 以下是基于 `FileSystemHandle` 的接口的列表。 -- {{domxref("FileSystemFileHandle")}} {{SecureContext_Inline}} +- {{domxref("FileSystemFileHandle")}} - : 提供一个指向文件条目的句柄。 -- {{domxref("FileSystemDirectoryHandle")}} {{SecureContext_Inline}} +- {{domxref("FileSystemDirectoryHandle")}} - : 提供一个指向目录条目的句柄。 ## 实例属性 diff --git a/files/zh-cn/web/api/filesystemhandle/issameentry/index.md b/files/zh-cn/web/api/filesystemhandle/issameentry/index.md index 76154202dee57e..4f94527c14a305 100644 --- a/files/zh-cn/web/api/filesystemhandle/issameentry/index.md +++ b/files/zh-cn/web/api/filesystemhandle/issameentry/index.md @@ -2,7 +2,7 @@ title: FileSystemHandle：isSameEntry() 方法 slug: Web/API/FileSystemHandle/isSameEntry l10n: - sourceCommit: f10fbe2d2dc4857bf29ce955689a7ba7c1ffac8b + sourceCommit: a9edf113447f37911ccc0c26ac507ed1d1629606 --- {{securecontext_header}}{{APIRef("File System API")}}{{AvailableInWorkers}} @@ -26,12 +26,16 @@ isSameEntry(fileSystemHandle) ## 示例 -以下函数将单个条目与条目数组进行比对，返回包含不相符条目的新数组。 +以下函数将单个条目与条目数组进行比对，并返回一个 {{jsxref("Promise")}}，其会兑现包含不相符条目的新数组。 ```js -function removeMatches(fileEntry, entriesArr) { - let newArr = entriesArr.filter((entry) => !fileEntry.isSameEntry(entry)); - +async function removeMatches(fileEntry, entriesArr) { + const newArr = []; + for (const entry of entriesArr) { + if (!(await fileEntry.isSameEntry(entry))) { + newArr.push(entry); + } + } return newArr; } ``` diff --git a/files/zh-cn/web/api/filesystemhandle/querypermission/index.md b/files/zh-cn/web/api/filesystemhandle/querypermission/index.md index b91e38e5b43628..4dd3dbd80618a5 100644 --- a/files/zh-cn/web/api/filesystemhandle/querypermission/index.md +++ b/files/zh-cn/web/api/filesystemhandle/querypermission/index.md @@ -2,7 +2,7 @@ title: FileSystemHandle：queryPermission() 方法 slug: Web/API/FileSystemHandle/queryPermission l10n: - sourceCommit: be3c45cd7a4d5c04139eceae10f7368251cdca64 + sourceCommit: 4e8bc4593e38b3902430fa701a6256c95d7bbbdc --- {{securecontext_header}}{{APIRef("File System API")}}{{AvailableInWorkers}}{{SeeCompatTable}} @@ -27,9 +27,9 @@ queryPermission(descriptor) ### 返回值 -一个兑现 {{domxref("PermissionStatus")}} 对象的 {{jsxref("Promise")}}。 +一个兑现为 {{domxref('PermissionStatus.state')}} 的 {{jsxref("Promise")}}，其值为 `'granted'`、`'denied'` 或 `'prompt'`。它也可能因出现以下异常而被拒绝。 -如果 {{domxref('PermissionStatus.state')}} 返回了“prompt”，则站点必须在对句柄进行任何操作前调用 `requestPermission()` 请求授权。如果此方法返回了“denied”，则任何操作都会被拒绝。从本地文件系统句柄构造器返回的句柄通常会在初始时对只读权限状态返回“granted”。但是，除开用户收回了权限的情况，从 IndexedDB 获取的句柄也有可能会返回“prompt”。 +如果其兑现为“prompt”，则网站必须先调用 `requestPermission()`，然后才能对句柄执行任何操作。如果其兑现为“denied”，则任何操作都将被拒绝。通常，本地文件系统句柄工厂返回的句柄最初将兑现“granted”作为其读取权限状态。但是，除了通过用户撤销权限之外，从 IndexedDB 检索到的句柄也可能兑现为“prompt”。 ### 异常 diff --git a/files/zh-cn/web/api/filesystemhandle/requestpermission/index.md b/files/zh-cn/web/api/filesystemhandle/requestpermission/index.md index a1e7d0521e27dc..15724cb7c9617d 100644 --- a/files/zh-cn/web/api/filesystemhandle/requestpermission/index.md +++ b/files/zh-cn/web/api/filesystemhandle/requestpermission/index.md @@ -2,7 +2,7 @@ title: FileSystemHandle：requestPermission() 方法 slug: Web/API/FileSystemHandle/requestPermission l10n: - sourceCommit: be3c45cd7a4d5c04139eceae10f7368251cdca64 + sourceCommit: 6c26f60ea9ab26e591cc59551cd664c07fcf213b --- {{securecontext_header}}{{APIRef("File System API")}}{{AvailableInWorkers}}{{SeeCompatTable}} @@ -27,12 +27,20 @@ requestPermission(descriptor) ### 返回值 -一个兑现 {{domxref("PermissionStatus")}} 对象的 {{jsxref("Promise")}}。 +一个兑现为 {{domxref('PermissionStatus.state')}} 的 {{jsxref("Promise")}}，其值为 `'granted'`、`'denied'` 或 `'prompt'`。它也可能因出现以下异常而被拒绝。 ### 异常 - {{jsxref("TypeError")}} - : 如果没有指定参数或者 `mode` 的值不是 `'read'` 或 `'readwrite'`，则抛出此异常。 +- `SecurityError` {{domxref("DOMException")}} + - : 在下列情况之一发生时抛出： + - 该方法是在与顶级上下文不[同源](/zh-CN/docs/Web/Security/Same-origin_policy)的上下文（例如跨源 iframe）中调用的。 + - 没有瞬态用户激活，例如按下按钮。这包括当句柄处于无法使用用户激活的非 Window 上下文（例如 Worker）中时。 + +## 安全 + +[瞬态用户激活](/zh-CN/docs/Web/Security/User_activation)是必需的。用户必须与页面或 UI 元素进行交互才能使该特性正常运行。 ## 示例 diff --git a/files/zh-cn/web/api/filesystemsyncaccesshandle/close/index.md b/files/zh-cn/web/api/filesystemsyncaccesshandle/close/index.md index eef742f2e1e8f0..8176daf48ab281 100644 --- a/files/zh-cn/web/api/filesystemsyncaccesshandle/close/index.md +++ b/files/zh-cn/web/api/filesystemsyncaccesshandle/close/index.md @@ -2,7 +2,7 @@ title: FileSystemSyncAccessHandle：close() 方法 slug: Web/API/FileSystemSyncAccessHandle/close l10n: - sourceCommit: f10fbe2d2dc4857bf29ce955689a7ba7c1ffac8b + sourceCommit: d8f04d843dd81ab8cea1cfc0577ae3c5c9b77d5c --- {{securecontext_header}}{{APIRef("File System API")}}{{AvailableInWorkers("dedicated")}} diff --git a/files/zh-cn/web/api/filesystemsyncaccesshandle/flush/index.md b/files/zh-cn/web/api/filesystemsyncaccesshandle/flush/index.md index 16ce1ffb15aaa5..e178e261079ff6 100644 --- a/files/zh-cn/web/api/filesystemsyncaccesshandle/flush/index.md +++ b/files/zh-cn/web/api/filesystemsyncaccesshandle/flush/index.md @@ -2,7 +2,7 @@ title: FileSystemSyncAccessHandle：flush() 方法 slug: Web/API/FileSystemSyncAccessHandle/flush l10n: - sourceCommit: f10fbe2d2dc4857bf29ce955689a7ba7c1ffac8b + sourceCommit: d8f04d843dd81ab8cea1cfc0577ae3c5c9b77d5c --- {{securecontext_header}}{{APIRef("File System API")}}{{AvailableInWorkers("dedicated")}} diff --git a/files/zh-cn/web/api/filesystemsyncaccesshandle/getsize/index.md b/files/zh-cn/web/api/filesystemsyncaccesshandle/getsize/index.md index 56e570fbb2e004..3618c711de4b18 100644 --- a/files/zh-cn/web/api/filesystemsyncaccesshandle/getsize/index.md +++ b/files/zh-cn/web/api/filesystemsyncaccesshandle/getsize/index.md @@ -2,7 +2,7 @@ title: FileSystemSyncAccessHandle：getSize() 方法 slug: Web/API/FileSystemSyncAccessHandle/getSize l10n: - sourceCommit: f10fbe2d2dc4857bf29ce955689a7ba7c1ffac8b + sourceCommit: d8f04d843dd81ab8cea1cfc0577ae3c5c9b77d5c --- {{securecontext_header}}{{APIRef("File System API")}}{{AvailableInWorkers("dedicated")}} diff --git a/files/zh-cn/web/api/filesystemsyncaccesshandle/index.md b/files/zh-cn/web/api/filesystemsyncaccesshandle/index.md index bec6c4f14b99cf..b7f0c293272412 100644 --- a/files/zh-cn/web/api/filesystemsyncaccesshandle/index.md +++ b/files/zh-cn/web/api/filesystemsyncaccesshandle/index.md @@ -2,7 +2,7 @@ title: FileSystemSyncAccessHandle slug: Web/API/FileSystemSyncAccessHandle l10n: - sourceCommit: f10fbe2d2dc4857bf29ce955689a7ba7c1ffac8b + sourceCommit: d8f04d843dd81ab8cea1cfc0577ae3c5c9b77d5c --- {{securecontext_header}}{{APIRef("File System API")}}{{AvailableInWorkers("dedicated")}} diff --git a/files/zh-cn/web/api/filesystemsyncaccesshandle/read/index.md b/files/zh-cn/web/api/filesystemsyncaccesshandle/read/index.md index ac2f244f6f5804..1f3c290f0b9d5d 100644 --- a/files/zh-cn/web/api/filesystemsyncaccesshandle/read/index.md +++ b/files/zh-cn/web/api/filesystemsyncaccesshandle/read/index.md @@ -2,7 +2,7 @@ title: FileSystemSyncAccessHandle：read() 方法 slug: Web/API/FileSystemSyncAccessHandle/read l10n: - sourceCommit: f10fbe2d2dc4857bf29ce955689a7ba7c1ffac8b + sourceCommit: d8f04d843dd81ab8cea1cfc0577ae3c5c9b77d5c --- {{securecontext_header}}{{APIRef("File System API")}}{{AvailableInWorkers("dedicated")}} diff --git a/files/zh-cn/web/api/filesystemsyncaccesshandle/truncate/index.md b/files/zh-cn/web/api/filesystemsyncaccesshandle/truncate/index.md index 96a0b7ed981750..de8d301e8619d5 100644 --- a/files/zh-cn/web/api/filesystemsyncaccesshandle/truncate/index.md +++ b/files/zh-cn/web/api/filesystemsyncaccesshandle/truncate/index.md @@ -2,7 +2,7 @@ title: FileSystemSyncAccessHandle：truncate() 方法 slug: Web/API/FileSystemSyncAccessHandle/truncate l10n: - sourceCommit: f10fbe2d2dc4857bf29ce955689a7ba7c1ffac8b + sourceCommit: d8f04d843dd81ab8cea1cfc0577ae3c5c9b77d5c --- {{securecontext_header}}{{APIRef("File System API")}}{{AvailableInWorkers("dedicated")}} diff --git a/files/zh-cn/web/api/filesystemsyncaccesshandle/write/index.md b/files/zh-cn/web/api/filesystemsyncaccesshandle/write/index.md index 29e7c29237bd9e..8979426d100f5d 100644 --- a/files/zh-cn/web/api/filesystemsyncaccesshandle/write/index.md +++ b/files/zh-cn/web/api/filesystemsyncaccesshandle/write/index.md @@ -2,7 +2,7 @@ title: FileSystemSyncAccessHandle：write() 方法 slug: Web/API/FileSystemSyncAccessHandle/write l10n: - sourceCommit: f10fbe2d2dc4857bf29ce955689a7ba7c1ffac8b + sourceCommit: d8f04d843dd81ab8cea1cfc0577ae3c5c9b77d5c --- {{securecontext_header}}{{APIRef("File System API")}}{{AvailableInWorkers("dedicated")}} diff --git a/files/zh-cn/web/api/storagemanager/getdirectory/index.md b/files/zh-cn/web/api/storagemanager/getdirectory/index.md index 7938ba7ffa644b..ecb81e2cce1e62 100644 --- a/files/zh-cn/web/api/storagemanager/getdirectory/index.md +++ b/files/zh-cn/web/api/storagemanager/getdirectory/index.md @@ -2,7 +2,7 @@ title: StorageManager：getDirectory() 方法 slug: Web/API/StorageManager/getDirectory l10n: - sourceCommit: 2b6bddfe281c0179fbde9c870f9de7c0dc3829e8 + sourceCommit: 22080a7cc403f7f45c8e85065b182c9f0d4d383c --- {{securecontext_header}}{{APIRef("File System API")}} {{AvailableInWorkers}} From f1cb10bc345761e4c72fffd30709bcb74a2c3a5a Mon Sep 17 00:00:00 2001 From: familyboat <84062528+familyboat@users.noreply.github.com> Date: Sun, 8 Sep 2024 09:14:45 +0800 Subject: [PATCH 06/72] zh-cn: update the translation of the learn area home page (#23376) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: A1lo --- files/zh-cn/learn/index.md | 135 ++++++++++++++++++++----------------- 1 file changed, 73 insertions(+), 62 deletions(-) diff --git a/files/zh-cn/learn/index.md b/files/zh-cn/learn/index.md index aa832e159e124b..4a034f032cf040 100644 --- a/files/zh-cn/learn/index.md +++ b/files/zh-cn/learn/index.md @@ -1,88 +1,105 @@ --- title: 学习 Web 开发 slug: Learn +l10n: + sourceCommit: 3ab7947b53ae1a8ba41111b29c34585a188718ae --- {{LearnSidebar}} -欢迎来到 MDN 学习区。本系列文章旨在为零基础 Web 开发初学者提供指导和开始编写网站代码所需的所有内容。 +欢迎来到 MDN 学习区。本系列文章意在为 Web 开发的纯新手提供编写网站的基本技巧，而非意在让你从“新手”变成“专家”，但能让你从“新手”变得“熟练”。从那之后，你就能开始以你自己的方式学习 [MDN 的其余部分](/zh-CN)，和其他需要大量前置知识的中高级资源。 -该教程并不是“从入门到精通”类型的教程，只能让你做到“从入门到适应”。在此之后，你应该能够以你自己的方式学习 [MDN 的其他内容](/zh-CN/)，并接触到其他中、高级资源。 - -从零开始学习 Web 开发极具挑战性，该教程将为你提供详细的资料，手把手帮助你轻松愉快地学习。无论你是正在学习 Web 开发的学生（自学或参与课程）、寻找材料的老师、编程爱好者，亦或是仅仅想了解一点点 Web 技术，我们都希望你能感到宾至如归。 +从零开始学习 Web 开发极具挑战性，该教程将为你提供详细的资料，手把手帮助你轻松愉快地学习。无论你是正在学习 Web 开发的学生（自学或参与课程）、寻找材料的老师、编程爱好者，抑或是仅想进一步了解 Web 技术的工作原理，我们都希望你能感到宾至如归。 ## 学习起点 -- 零基础的初学者 - - : 如果你完全没有 Web 开发经验，那么我们推荐从 [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web)部分开始，该部分教程通过实践的方式向你介绍 Web 开发。 -- 有一定基础 - - : 如果你已经具备了一定的开发知识，下一步就是深入学习 {{glossary("HTML")}} 和 {{glossary("CSS")}}。先学习 [HTML 入门](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)，再学习 [CSS 初步](/zh-CN/docs/Learn/CSS/First_steps)。 -- 学习脚本编写 - - : 如果你已经完成了 HTML 和 CSS 入门课程，或是主要对编写代码感兴趣，可以继续学习 {{glossary("JavaScript")}} 或服务端开发。可通过 [JavaScript 初步](/zh-CN/docs/Learn/JavaScript/First_steps)和[服务端编程的第一步](/zh-CN/docs/Learn/Server-side/First_steps)开始学习。 -- 框架与工具 - - : 在掌握了原生 HTML、CSS、JavaScript 的要领后，就可以继续学习[前端开发工具](/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools)课程，并考虑开始研究 [JavaScript 前端框架](/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks)，以及[网站服务端编程](/zh-CN/docs/Learn/Server-side)了。 +你要是还不确定是否要深入地学习 Web 开发，仅想从体验环节开始，我们会建议你从 [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web)指南开始学习。除此之外，你应该从下面的专题开始学习。 + +- HTML 和 CSS + - : HTML 为 Web 内容提供结构，而 CSS 为 Web 内容添加样式并对 Web 内容进行布局。在[介绍 HTML](/zh-CN/docs/Learn/HTML/Introduction_to_HTML) 和 [CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps)中学习基本的入门知识。 +- JavaScript + - : JavaScript 为网站提供交互功能。从 [JavaScript 第一步](/zh-CN/docs/Learn/JavaScript/First_steps)开始学习。 +- 框架和工具 + - : 掌握原生 HTML、CSS 和 JavaScript 的基本知识之后，你应该学习[客户端 Web 开发工具](/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools)，接着考虑钻研[客户端 JavaScript 框架](/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks)。你也应该考虑学习[服务器端网站编程](/zh-CN/docs/Learn/Server-side)的基础知识。 > [!NOTE] -> 可在[术语表](/zh-CN/docs/Glossary)中查询术语。此外，如果你对 Web 开发有具体问题，可以尝试在[常见问题](/zh-CN/docs/Learn/Common_questions)寻找答案。 +> 在[术语表](/zh-CN/docs/Glossary)中能找到术语定义。此外，要是有和 Web 开发相关的特定问题，[常见问题](/zh-CN/docs/Learn/Common_questions)中的内容也许会帮助到你。 > [!CALLOUT] > -> #### 想要成为一名前端工程师？ +> #### 想成为一名前端 Web 开发者吗？ > -> 如果你想要成为一名前端 Web 工程师而又不确定首先要学习什么，我们建议你使用 [MDN 教学课程](/en-US/curriculum/)来规划学习。它提供了结构化的学习路径，涵盖成为一名成功的前端开发人员所需的基本技能与实践，以及推荐的学习资源。 +> 你要是想成为一名前端 Web 开发者，但不确定该从哪开始学习，我们会建议使用 [MDN 合作课程](/en-US/curriculum/)作为你的学习计划。它提供一个结构化的学习路径，包含：成为一名成功的前端开发者所需的基本技巧和练习，以及推荐学习资源。 > > [**现在开始**](/en-US/curriculum/) -## 涵盖的主题 +## 涵盖的专题 -以下列表包含了 MDN 学习区涵盖的所有主题： +下面列表包含 MDN 学习区全部的专题。 - [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web) - - : 为零基础初学者提供实用的 Web 开发入门简介。 -- [HTML 构建网站](/zh-CN/docs/Learn/HTML) - - : HTML 是用于构建网页的内容并定义其含义或目的的语言。该专题将详细讲解 HTML。 -- [CSS 风格化站点](/zh-CN/docs/Learn/CSS) - - : CSS 是用于对网页内容进行设计、布局或添加动画等行为的语言。该专题对 CSS 进行了全面介绍。 -- [JavaScript - 动态客户端脚本语言](/zh-CN/docs/Learn/JavaScript) - - : JavaScript 是用于向网页添加动态功能的脚本语言。该专题涵盖有关编写和理解 JavaScript 代码所需的所有重点。 -- [Web 表单 - 操作用户数据](/zh-CN/docs/Learn/Forms) - - : Web 表单是用于进行用户交互的强大工具——其常用于收集用户数据和控制用户界面。该专题将对 Web 表单的结构、样式、交互要点进行介绍。 -- [无障碍 - 让每个人都能畅游网络](/zh-CN/docs/Learn/Accessibility) - - : “无障碍”（Accessibility）是开发人员对让更多的人能够不受残疾、设备、地区等因素的限制访问 Web 内容做出的努力。该专题包含一切所需了解的信息。 -- [Web 性能优化 - 让网站更快做出响应](/zh-CN/docs/Learn/Performance) - - : Web 性能是确保网络应用的快速下载并对用户操作进行快速响应的艺术，而无论用户的带宽大小、屏幕尺寸、网络状态好坏或是设备性能高低。 -- [工具与测试](/zh-CN/docs/Learn/Tools_and_testing) - - : 该专题涵盖了开发人员常用的效率工具，如跨浏览器测试工具、代码检查工具、代码格式化工具、转换工具、版本控制系统、部署工具、客户端 JavaScript 框架等。 + - : 为纯新手提供实用的 Web 开发介绍。 +- [HTML——为 Web 提供结构](/zh-CN/docs/Learn/HTML) + - : HTML 是用于构建内容的不同部分并定义其含义或目的的语言。该专题将详细讲解 HTML。 +- [CSS——为 Web 提供样式](/zh-CN/docs/Learn/CSS) + - : CSS 是用于为 Web 内容添加样式、对 Web 内容进行布局、添加诸如动画的行为的语言。该专题对 CSS 做了全面的覆盖。 +- [JavaScript——动态客户端脚本语言](/zh-CN/docs/Learn/JavaScript) + - : JavaScript 是用于为 Web 页面添加动态功能的脚本语言。该专题涵盖有关编写和理解 JavaScript 代码所需的全部重点。 +- [Web 表单——操作用户数据](/zh-CN/docs/Learn/Forms) + - : Web 表单是用于和用户交互的强大工具——其常用于收集用户数据和控制用户界面。该专题涵盖 Web 表单的结构、样式和交互相关的全部要点。 +- [无障碍——让每个人都能使用 Web](/zh-CN/docs/Learn/Accessibility) + - : 无障碍是让更多的人不受残疾、设备、地区等因素的限制都能访问 Web 内容的实践。该专题包含一切所需了解的信息。 +- [Web 性能优化——让网站更快做出响应](/zh-CN/docs/Learn/Performance) + - : Web 性能是确保 Web 应用的快速下载并对用户操作进行快速响应的艺术，而无论用户的带宽大小、屏幕尺寸、网络状态好坏或是设备性能高低。 +- [MathML](/zh-CN/docs/Learn/MathML) + - : MathML 是用于在 Web 页面中书写数学公式的语言（使用分数、上下标、根号、矩阵、积分、级数，等等）。该专题讲解 MathML。 +- [工具和测试](/zh-CN/docs/Learn/Tools_and_testing) + - : 该专题涵盖的是开发者用于提升效率的工具，如跨浏览器测试工具、代码检查工具、代码格式化工具、转换工具、版本控制系统、部署工具、客户端 JavaScript 框架等。 - [服务器端网站编程](/zh-CN/docs/Learn/Server-side) - - : 即使你专注于客户端的 Web 开发，了解服务器和服务端代码的运行机制仍然很有用。该专题简单介绍了服务端的运作机制，并包含了两份分别有关使用 Django（Python）和 Express（node.js）两个流行框架构建服务器端应用的教程。 + - : 尽管你专注于客户端 Web 开发，但了解服务器和服务器端代码的运行机制仍是有用的。该专题对服务器端的运作机制进行了通用介绍，以及包含使用 Django（Python）和 Express（node.js）两个流行框架构建服务器端应用的详细教程。 + +## 任务和评估 + +在 MDN 的学习 Web 开发部分，有许多独立的任务和评估，等待你完成。有两种主要类型： + +- “技能测试”任务，例如，在[代码中做决定——条件语句](/zh-CN/docs/Learn/JavaScript/Building_blocks/conditionals#技能测试！)。 +- 在某些模块的结尾处，包含更深入的**评估**，例如，[图片库](/zh-CN/docs/Learn/JavaScript/Building_blocks/Image_gallery)。 + +每个类型都有相应的评分指南和推荐解决方案，可用于帮助你评估你的工作。某些模式能让你更容易地找到这些资源，例如： + +- 上面的**技能测试**任务示例的评分指南和资源位于 。 +- 上面的**评估**示例的评分指南和资源位于 。 + +> [!NOTE] +> 任务和评估中的评分指南及其它资源大多数位于 [`mdn/learning-area`](https://github.com/mdn/learning-area/)，还有一些位于 [`mdn/css-examples`](https://github.com/mdn/css-examples/tree/main/learn)。 ## 获取代码示例 -学习区的所有代码示例都可以在 GitHub 上的 [MDN 学习区示例中文版](https://github.com/roy-tian/learning-area/) 上寻得。如果你想把获取所有代码示例的副本，直接 [包含最新 master 分支内容的压缩文件](https://github.com/roy-tian/learning-area/archive/master.zip) 即可。 +学习区的所有代码示例都[可以在 Github 上找到](https://github.com/mdn/learning-area/)。如果你想将代码示例都复制到你的电脑，最简单的方式就是[下载包含最新 main 分支内容的压缩文件](https://codeload.github.com/mdn/learning-area/zip/main)。 -如果你希望以更灵活的方式复制代码仓库并随时更新本地副本，可参考以下更复杂的步骤： +如果你更喜欢以一种更灵活的方式（允许自动更新）复制仓库，你可以参考下面复杂一点的指导： -1. 在电脑上安装 Github 底层使用的版本控制系统 [Git](https://git-scm.com/downloads)。 +1. 在电脑上安装 [Git](https://git-scm.com/downloads)。它是 Github 底层使用的版本控制系统。 -2. 打开操作系统的命令提示符（[Windows](https://docs.microsoft.com/zh-cn/windows/terminal/)）或终端（[Linux](https://help.ubuntu.com/community/UsingTheTerminal)、[macOS](https://support.apple.com/zh-cn/guide/terminal/welcome/mac)）。 +2. 打开电脑的[命令提示符](https://www.lifewire.com/how-to-open-command-prompt-2618089)（Windows）或终端（[Linux](https://help.ubuntu.com/community/UsingTheTerminal)、[macOS](https://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line)）。 -3. 在命令提示符 / 终端中输入以下命令，即可将 `roy-tian/learning-area` 仓库拷贝到本地的 `learning-area` 文件夹： +3. 要将学习区仓库复制到名为 learning-area 的目录（learning-area 目录将位于命令提示符/终端指向的当前目录中），使用下面的命令： ```bash - git clone https://github.com/roy-tian/learning-area + git clone https://github.com/mdn/learning-area ``` -4. 然后即可使用访达（macOS）、文件资源管理器（Windows/Linux）或 [`cd` 命令]()) 进入该目录，查找所需文件。 +4. 现在，你能通过访达/文件资源管理器或 [`cd` 命令]()进入目录并寻找你想要的文件。 -你可以随时对本地 `learning-area` 目录与 GitHub 仓库中的 master 分支进行同步，具体步骤如下： +你可以将 GitHub 上的主版本的任意改动更新到本地 `learning-area` 仓库，步骤如下： -1. 在命令提示符 / 终端中使用 `cd` 指令进入 `learning-area` 文件夹。例如，当你在父目录时： +1. 在命令提示符/终端中使用 `cd` 命令进入 `learning-area` 目录。例如，假设你在 `learning-area` 目录的父目录中： ```bash cd learning-area ``` -2. 执行以下命令以更新仓库： +2. 使用下列命令更新仓库： ```bash git pull @@ -90,29 +107,23 @@ slug: Learn ## 联系我们 -如果你想就任何事宜联系我们，最好的方式是在[论坛](https://discourse.mozilla.org/c/mdn/236)上留言。如果你认为网站上有任何错误或遗漏、请求新的学习主题、针对你不理解的部分请求帮助、或提出任何其他问题，我们都期待听到你的意见。 +如果你因事想与我们取得联系，请使用[沟通渠道](/zh-CN/docs/MDN/Community/Communication_channels)。如果你认为网站上有任何错误或遗漏、想请求新的学习主题、针对不理解的部分想请求帮助，或想提出任何其他问题，我们愿意倾听你的声音。 -如果你有兴趣帮助我们开发或改进社区内容，请阅读[如何做出贡献](/zh-CN/docs/MDN/Community/Contributing)部分并联系我们！无论你是学生、老师、经验丰富的 Web 开发者、还是其他有兴趣通过帮助我们以提升自学经验的人，我们都不胜荣幸！ +如果你对帮助开发或改进内容感兴趣，请阅读[如何做出贡献](/zh-CN/docs/MDN/Community/Contributing)并联系我们！无论你是学习者、老师，还是有经验的 Web 开发者，抑或是其他对帮助改善学习体验感兴趣的人，我们都不胜荣幸！ ## 参见 -- [Mozilla 开发者新闻通讯](https://www.mozilla.org/zh-CN/newsletter/developer/) - - : 我们为 Web 开发者编写的新闻报，对各水平开发者而言都是优秀的资源。 +- [前端开发者职业道路](https://v2.scrimba.com/the-frontend-developer-career-path-c0j?via=mdn) _MDN 课程合作伙伴_ + - : [Scrimba](https://scrimba.com?via=mdn) 的*前端开发者职业道路*教授成为合格的前端 Web 开发者所需的知识，这里有有趣的交互式课程和挑战、有学识的老师以及提供帮助的社区。让你从零到获得第一份前端工作！许多课程有单独的免费版本。 - [学习 JavaScript](https://learnjavascript.online/) - - : 为有进取心的 Web 开发人员准备的优秀资源——在互动环境中学习 JavaScript，其包含由自动评估系统提供指引的简短的课程和互动测试。前 40 节课为免费课程，而想要购买完整的付费课程只需一次性支付少量费用。 -- [揭开 Web 的面纱](https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g) - - : 面向 Web 开发的零基础教学视频系列，由 [Jérémie Patonnier](https://twitter.com/JeremiePat) 出品。 + - : 为有进取心的 Web 开发人员准备的优秀资源——在交互式环境中学习 JavaScript，包含简短的课程和自动评估的交互式测试。前 40 节课为免费课程，而完整的课程仅需一次性支付少量费用。 - [Codecademy](https://www.codecademy.com/) - - : 用于从零学习编程语言的优秀交互式网站。 -- [BitDegree](https://www.bitdegree.org/learn/) - - : 用游戏的方式学习基础编程理论。主要针对初学者。 -- [Code.org](https://code.org/) - - : 基本的编程理论和实践，主要针对儿童与完全的初学者。 -- [EXLskills](https://exlskills.com/learn-en/courses) - - : 免费开放的学习技术技能的课程，由导师指导和基于项目的学习。 + - : 优秀的交互式网站——从零学习编程语言。 - [freeCodeCamp.org](https://www.freecodecamp.org/) - - : 用于学习 Web 开发的交互式网站，带有教程和项目。 -- [Web 学习路线图](https://foundation.mozilla.org/en/initiatives/web-literacy/core-curriculum/) - - : 用于学习入门级 Web 开发素养与新时代常用技能，另分门别类地提供教学活动。 -- [Edabit](https://edabit.com/challenges/javascript) - - : 上千个 JavaScript 交互式编程挑战。 + - : 通过教程和项目学习 Web 开发的交互式网站。 +- [The Odin Project](https://www.theodinproject.com/) + - : 特点是拥有免费和开源的全栈教学课程，课程涵盖初级到高级。 +- [MDN 博客](/en-US/blog/) + - : MDN 团队和客座作者为 MDN 博客编写的与新的站点开发、HTML、CSS、JavaScript 以及其它 Web 开发新闻相关的文章。 +- [Mozilla 开发者时事通讯](https://www.mozilla.org/zh-CN/newsletter/developer/) + - : 面向 Web 开发者的时事通讯，对各水平开发者而言都是优秀的资源。 From 093b27c60fd8d1197cb3a34a75e5a392b958d792 Mon Sep 17 00:00:00 2001 From: ikenk <93726321+ikenk@users.noreply.github.com> Date: Sun, 8 Sep 2024 09:17:03 +0800 Subject: [PATCH 07/72] [zh-cn] fix some flaws and add new translations (#23374) Co-authored-by: A1lo --- .../date_formatting_using_moment/index.md | 42 ++++++++++--------- 1 file changed, 23 insertions(+), 19 deletions(-) diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md index a4fa838d3ecf92..f9689c4d43b27f 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md +++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md @@ -1,56 +1,60 @@ --- -title: 使用 moment 做日期格式化 +title: 使用 luxon 做日期格式化 slug: Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_moment +l10n: + sourceCommit: 8d5440dbd259fd6eea32b4f4a200f25257d1bf41 --- -我们模型的日期预设呈现很难看：_Tue Dec 06 2016 15:49:58 GMT+1100 (AUS Eastern Daylight Time)_。在本节中，我们将展示如何更新上一节中的 書本實例 BookInstance 列表页面，以更友好的格式显示`due_date`字段：December 6th, 2016。 +{{LearnSidebar}} -我们将使用的方法，是在我们的`BookInstance`模型中，创建一个返回格式化日期的虚拟屬性。我们将使用[moment](https://www.npmjs.com/package/moment) 来做实际的格式化，这是一个轻量级 JavaScript 日期库，用于解析，验证，操作和格式化日期。 +我们模型的默认日期呈现很难看：_Fri Apr 10 2020 12:49:58 GMT+0800 (中国标准时间)_。在本节中，我们将展示如何更新上一节中的*书本实例列表*页面，以更友好的格式显示 `due_date` 字段：2023 年 4 月 10 日。 + +我们使用的方法是在 `BookInstance` 模型中创建一个返回格式化日期的虚拟屬性。我们将使用 [luxon](https://www.npmjs.com/package/luxon) 来做格式化，这是一个功能强大、现代化并且非常友好的 JavaScript 日期库，用于解析、验证、操作、格式化和本地化日期。 > [!NOTE] -> 我们可以直接在 Pug 模板中，使用 _moment_ 格式化字符串，或者可以在许多其他地方格式化字符串。使用虚拟属性，可以使我们获得格式化的日期，這与我们当前获取 `due_date` 的方式完全相同。 +> 我们可以直接在 Pug 模板中使用 _luxon_ 格式化字符串，也可以在其他地方格式化字符串。使用虚拟属性允许我们以与当前获取 `due_date` 完全相同的方式获取格式化日期。 -## 安装 moment +## 安装 luxon 在项目的根目录，输入下列命令 ```bash -npm install moment +npm install luxon ``` ## 创建虚拟属性 -1. 打开 **./models/bookinstance.js**. -2. 在此页面最上方，引用 moment +1. 打开 **./models/bookinstance.js**。 +2. 在此页面最上方，引用 _luxon_。 ```js - var moment = require("moment"); + const { DateTime } = require("luxon"); ``` -在 url 属性后面，加入虚拟属性 `due_back_formatted` 。 +在 URL 属性后面加入虚拟属性 `due_back_formatted`。 ```js BookInstanceSchema.virtual("due_back_formatted").get(function () { - return moment(this.due_back).format("MMMM Do, YYYY"); + return DateTime.fromJSDate(this.due_back).toLocaleString(DateTime.DATE_MED); }); ``` > [!NOTE] -> 格式化方法可以使用几乎任何模式显示日期。[moment 文档](http://momentjs.com/docs/#/displaying/)中，可以找到表示不同日期组件的语法。 +> Luxon 可以导入多种格式的字符串，并导出为预定义格式和自由格式。在本例中，我们使用 `fromJSDate()` 导入 JavaScript 日期字符串，然后使用 `toLocaleString()` 以 `DATE_MED` 格式输出中文日期：2024 年 8 月 9 日。有关其他格式和日期字符串国际化的信息，请参考 Luxon 文档的 [formatting](https://github.com/moment/luxon/blob/master/docs/formatting.md#formatting) 部分。 ## 更新视图 -打开 **/views/bookinstance_list.pug** ，然后用 `due_back_formatted` 取代 `due_back` 。 +打开 **/views/bookinstance_list.pug**，然后用 `due_back_formatted` 取代 `due_back`。 -```js - if val.status!='Available' - //span (Due: #{val.due_back} ) - span (Due: #{val.due_back_formatted} ) +```pug +if val.status != 'Available' + //span (Due: #{val.due_back} ) + span (Due: #{val.due_back_formatted} ) ``` -这就是本章节的全部了。如果你访问侧边栏的 All book-instances，你应该会看到所有的归还日期都更吸引人了！ +这就是本章节的全部了。如果你访问侧边栏的 _All book-instances_，你应该会看到所有的归还日期变得更吸引人了！ ## 下一步 - 回到 [Express 教程 5: 呈现图书馆数据](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data) -- 继续教程 5 下一個部分：[作者列表页面、种类列表页面、与自我挑战](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page) +- 继续教程 5 下一个部分：[作者清单面页、分类清单页面挑战](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page) From 9ece6501b67cb02eb30ac44021c72b84d23dc2bd Mon Sep 17 00:00:00 2001 From: hochan Lee Date: Sun, 8 Sep 2024 10:50:56 +0900 Subject: [PATCH 08/72] [ko] fix: NOTE syntax (#23373) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: NOTE syntax * fix: 안내 문구 안내서 수정 * Update docs/ko/guides/translation-guide.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * feat: 미해결 prettier 린트 오류 이슈 참고 링크 추가 --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- docs/ko/guides/translation-guide.md | 43 +++++-------------- files/ko/web/css/_colon_blank/index.md | 3 +- files/ko/web/css/namespace_separator/index.md | 2 +- 3 files changed, 13 insertions(+), 35 deletions(-) diff --git a/docs/ko/guides/translation-guide.md b/docs/ko/guides/translation-guide.md index 27cc6a6ce7a182..4014bda32b4eb9 100644 --- a/docs/ko/guides/translation-guide.md +++ b/docs/ko/guides/translation-guide.md @@ -41,57 +41,34 @@ | 용어 | 번역 | 참고 링크 | | ------------- | ---------------- | ----------------------------- | -| Note | 참고 | | -| Warning | 경고 | | -| Callout | 알림 | | | Objective | 목표 | [링크][What_is_accessibility] | | Prerequisites | 필요한 사전 지식 | [링크][What_is_accessibility] | ### 교육 과정 callout ```markdown -> **알림:** +> [!CALLOUT] > > #### 프론트엔드 웹 개발자가 되고자 하시나요? > -> 목표를 달성하기 위한 모든 필수 정보가 들어있는 교육 과정을 준비했습니다. +> 프론트엔드 웹 개발자가 되고 싶지만 무엇을 먼저 배워야 할지 모르겠다면, MDN 커리큘럼을 참고해 학습 계획을 세우는 것을 추천합니다. 이 커리큘럼은 성공적인 프론트엔드 개발자가 되기 위한 필수 기술과 실습을 체계적으로 학습할 수 있는 경로를 제공하며, 추천 학습 자료도 함께 제공합니다. > -> [**시작하기**](/ko/docs/Learn/Front-end_web_developer) +> [**시작하기**](/ko/curriculum/) ``` -### 카드 번역 +## GFM Alerts -카드는 참고, 경고 그리고 알림의 세 가지 유형이 있으며, 영어 원문에서는 다음과 같이 표시됩니다. +`> [!NOTE]`, `> [!TIP]`, `> [!IMPORTANT]`, `> [!CAUTION]`, `> [!WARNING]`은 새로 추가된 github markdown으로 영어 문법만 사용할 수 있습니다. ```markdown -# 참고 - -> **Note:** This is a note. - -# 경고 - -> **Warning:** This is a warning. - -# 알림 +// bad -> **Callout:** This is a callout. +> [!참고] +> ... ``` -이런 카드는 아래와 같이 번역해주시면 됩니다. - -```markdown -# 참고 - -> **참고:** 참고입니다. - -# 경고 - -> **경고:** 경고입니다. - -# 알림 - -> **알림:** 알림입니다. -``` +- [[Markdown] An option to highlight a "Note" and "Warning" using blockquote (Beta)](https://github.com/orgs/community/discussions/16925) +- [Incorrect formatting for highlighted notes in GitHub flavoured Markdown](https://github.com/prettier/prettier/issues/16454) ## 역주/역자주 diff --git a/files/ko/web/css/_colon_blank/index.md b/files/ko/web/css/_colon_blank/index.md index 09da72e7633ae8..a7489f48c5f117 100644 --- a/files/ko/web/css/_colon_blank/index.md +++ b/files/ko/web/css/_colon_blank/index.md @@ -7,7 +7,8 @@ l10n: {{CSSRef}}{{SeeCompatTable}} -> [!참고] > `:blank` 선택자는 CSSWG가 지속적으로 변경하고 있음에 따라 위험 요소로 간주됩니다. +> [!NOTE] +> `:blank` 선택자는 CSSWG가 지속적으로 변경하고 있음에 따라 위험 요소로 간주됩니다. > > [CSSWG issue #1967](https://github.com/w3c/csswg-drafts/issues/1967) 를 확인해 보세요. diff --git a/files/ko/web/css/namespace_separator/index.md b/files/ko/web/css/namespace_separator/index.md index 5df83c497d2433..db428cd3b76fb2 100644 --- a/files/ko/web/css/namespace_separator/index.md +++ b/files/ko/web/css/namespace_separator/index.md @@ -101,7 +101,7 @@ htmlNameSpace|a { 이 예제에서는 JavaScript를 사용하여 네임스페이스가 없는 요소를 생성하고 이를 문서 내에 삽입합니다. `@namespace` 를 사용하여 이름이 지정되지 않은 네임스페이스를 정의함으로써 SVG 네임스페이스를 기본 네임스페이스로 설정합니다. -> [!참고] +> [!NOTE] > 기본 또는 이름이 지정되지 않은 네임스페이스가 정의된 경우, 전체 선택자 및 타입 선택자는 해당 네임스페이스의 요소에만 적용됩니다. #### HTML From 7c11074b400bb726f634237efa0ba21c43eef6cd Mon Sep 17 00:00:00 2001 From: hochan Lee Date: Sun, 8 Sep 2024 10:51:41 +0900 Subject: [PATCH 09/72] [ko] remove deprecated macros (#23364) * ko: remove event macro * ko: remove CSSAnimatedProperties macro * fix: redirects * Update files/ko/web/api/fullscreen_api/index.md * Update files/ko/web/api/html_drag_and_drop_api/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/ko/web/api/rtcpeerconnection/addtrack/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/ko/web/api/worker/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/ko/web/api/xmlhttprequest/upload/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/ko/web/api/xmlhttprequest/upload/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix: markdown lint --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/ko/_redirects.txt | 23 -- files/ko/web/api/filereader/index.md | 77 ------ .../web/api/filereader/readasdataurl/index.md | 2 +- .../ko/web/api/filereader/readastext/index.md | 2 +- files/ko/web/api/fullscreen_api/index.md | 14 +- files/ko/web/api/gamepad_api/index.md | 4 +- files/ko/web/api/history/back/index.md | 2 +- files/ko/web/api/history/forward/index.md | 2 +- files/ko/web/api/history/go/index.md | 4 +- files/ko/web/api/history/index.md | 2 +- files/ko/web/api/history/state/index.md | 2 +- .../web/api/html_drag_and_drop_api/index.md | 25 +- files/ko/web/api/htmlelement/index.md | 206 ---------------- .../htmlmediaelement/canplay_event/index.md | 53 ---- .../canplaythrough_event/index.md | 53 ---- files/ko/web/api/htmlmediaelement/index.md | 232 ------------------ .../indexeddb_api/using_indexeddb/index.md | 4 +- files/ko/web/api/keyboardevent/index.md | 6 +- .../web/api/mediastreamtrack/muted/index.md | 2 +- .../ko/web/api/mediastreamtrack/stop/index.md | 2 +- files/ko/web/api/mouseevent/clientx/index.md | 2 +- .../ko/web/api/navigator/connection/index.md | 39 --- files/ko/web/api/notification/index.md | 174 ------------- files/ko/web/api/offlineaudiocontext/index.md | 2 +- .../api/rtcdatachannelevent/channel/index.md | 4 +- files/ko/web/api/rtcdatachannelevent/index.md | 2 +- .../rtcdatachannelevent/index.md | 4 +- .../api/rtcpeerconnection/addtrack/index.md | 8 +- .../connectionstate/index.md | 2 +- .../connectionstatechange_event/index.md | 49 ---- .../createdatachannel/index.md | 4 +- .../datachannel_event/index.md | 45 ---- .../getidentityassertion/index.md | 40 --- .../icecandidate_event/index.md | 47 ---- .../rtcpeerconnection/removetrack/index.md | 2 +- .../setlocaldescription/index.md | 2 +- .../rtcpeerconnection/track_event/index.md | 45 ---- .../candidate/index.md | 2 +- .../screen/orientationchange_event/index.md | 33 --- files/ko/web/api/service_worker_api/index.md | 2 +- files/ko/web/api/sharedworker/index.md | 2 +- .../index.md | 6 +- files/ko/web/api/web_audio_api/index.md | 8 +- .../api/web_audio_api/simple_synth/index.md | 8 +- files/ko/web/api/web_components/index.md | 2 +- files/ko/web/api/web_workers_api/index.md | 2 +- files/ko/web/api/webrtc_api/index.md | 12 +- .../signaling_and_video_calling/index.md | 4 +- .../webrtc_api/using_data_channels/index.md | 2 +- .../web/api/window/hashchange_event/index.md | 123 ---------- files/ko/web/api/window/load_event/index.md | 72 ------ .../ko/web/api/window/storage_event/index.md | 50 ---- files/ko/web/api/worker/index.md | 4 +- .../ko/web/api/xmlhttprequest/upload/index.md | 18 +- files/ko/web/css/_colon_disabled/index.md | 2 +- .../web/css/css_animated_properties/index.md | 12 - files/ko/web/html/cors_enabled_image/index.md | 2 +- files/ko/web/html/element/dialog/index.md | 169 ------------- files/ko/web/html/element/img/index.md | 2 +- files/ko/web/html/element/script/index.md | 4 +- files/ko/web/html/element/slot/index.md | 2 +- files/ko/web/media/autoplay_guide/index.md | 2 +- .../re-engageable_notifications_push/index.md | 4 +- 63 files changed, 95 insertions(+), 1642 deletions(-) delete mode 100644 files/ko/web/api/filereader/index.md delete mode 100644 files/ko/web/api/htmlelement/index.md delete mode 100644 files/ko/web/api/htmlmediaelement/canplay_event/index.md delete mode 100644 files/ko/web/api/htmlmediaelement/canplaythrough_event/index.md delete mode 100644 files/ko/web/api/htmlmediaelement/index.md delete mode 100644 files/ko/web/api/navigator/connection/index.md delete mode 100644 files/ko/web/api/notification/index.md delete mode 100644 files/ko/web/api/rtcpeerconnection/connectionstatechange_event/index.md delete mode 100644 files/ko/web/api/rtcpeerconnection/datachannel_event/index.md delete mode 100644 files/ko/web/api/rtcpeerconnection/getidentityassertion/index.md delete mode 100644 files/ko/web/api/rtcpeerconnection/icecandidate_event/index.md delete mode 100644 files/ko/web/api/rtcpeerconnection/track_event/index.md delete mode 100644 files/ko/web/api/screen/orientationchange_event/index.md delete mode 100644 files/ko/web/api/window/hashchange_event/index.md delete mode 100644 files/ko/web/api/window/load_event/index.md delete mode 100644 files/ko/web/api/window/storage_event/index.md delete mode 100644 files/ko/web/css/css_animated_properties/index.md delete mode 100644 files/ko/web/html/element/dialog/index.md diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt index ac2a8ed7b17856..0ff22781695524 100644 --- a/files/ko/_redirects.txt +++ b/files/ko/_redirects.txt @@ -463,7 +463,6 @@ /ko/docs/Web/API/Navigation_timing_API /ko/docs/Web/API/Performance_API/Navigation_timing /ko/docs/Web/API/Navigator.battery /ko/docs/Web/API/Navigator/getBattery /ko/docs/Web/API/Navigator.battery/window.navigator.battery /ko/docs/Web/API/Navigator/getBattery -/ko/docs/Web/API/Navigator.connection/window.navigator.connection /ko/docs/Web/API/Navigator/connection /ko/docs/Web/API/Navigator/Online_and_offline_events /ko/docs/Web/API/Navigator/onLine /ko/docs/Web/API/Navigator/battery /ko/docs/Web/API/Navigator/getBattery /ko/docs/Web/API/NavigatorID /ko/docs/Web/API/Navigator @@ -471,9 +470,6 @@ /ko/docs/Web/API/NavigatorLanguage/language /ko/docs/Web/API/Navigator/language /ko/docs/Web/API/NavigatorOnLine /ko/docs/Web/API/Navigator/language /ko/docs/Web/API/NavigatorOnLine/Online_and_offline_events /ko/docs/Web/API/Navigator/onLine -/ko/docs/Web/API/NetworkInformation.connection /ko/docs/Web/API/Navigator/connection -/ko/docs/Web/API/NetworkInformation.connection/window.navigator.connection /ko/docs/Web/API/Navigator/connection -/ko/docs/Web/API/NetworkInformation/connection /ko/docs/Web/API/Navigator/connection /ko/docs/Web/API/Node/innerText /ko/docs/Web/API/HTMLElement/innerText /ko/docs/Web/API/Notification.permission /ko/docs/Web/API/Notification/permission_static /ko/docs/Web/API/Notification/permission /ko/docs/Web/API/Notification/permission_static @@ -483,20 +479,13 @@ /ko/docs/Web/API/PositionOptions /ko/docs/Web/API/Geolocation/getCurrentPosition /ko/docs/Web/API/RTCConfiguration /ko/docs/Web/API/RTCPeerConnection/RTCPeerConnection /ko/docs/Web/API/RTCPeerConnection/generateCertificate /ko/docs/Web/API/RTCPeerConnection/generateCertificate_static -/ko/docs/Web/API/RTCPeerConnection/onconnectionstatechange /ko/docs/Web/API/RTCPeerConnection/connectionstatechange_event -/ko/docs/Web/API/RTCPeerConnection/ondatachannel /ko/docs/Web/API/RTCPeerConnection/datachannel_event -/ko/docs/Web/API/RTCPeerConnection/onicecandidate /ko/docs/Web/API/RTCPeerConnection/icecandidate_event /ko/docs/Web/API/RTCPeerConnection/onicegatheringstatechange /ko/docs/Web/API/RTCPeerConnection/icegatheringstatechange_event -/ko/docs/Web/API/RTCPeerConnection/ontrack /ko/docs/Web/API/RTCPeerConnection/track_event /ko/docs/Web/API/RandomSource /ko/docs/Web/API/Crypto/getRandomValues /ko/docs/Web/API/RandomSource/getRandomValues /ko/docs/Web/API/Crypto/getRandomValues /ko/docs/Web/API/Screen.lockOrientation /ko/docs/Web/API/Screen/lockOrientation /ko/docs/Web/API/Screen.lockOrientation/window.screen.lockOrientation /ko/docs/Web/API/Screen/lockOrientation -/ko/docs/Web/API/Screen.onorientationchange /ko/docs/Web/API/Screen/orientationchange_event -/ko/docs/Web/API/Screen.onorientationchange/window.screen.onorientationchange /ko/docs/Web/API/Screen/orientationchange_event /ko/docs/Web/API/Screen.orientation /ko/docs/Web/API/Screen/orientation /ko/docs/Web/API/Screen.orientation/window.screen.orientation /ko/docs/Web/API/Screen/orientation -/ko/docs/Web/API/Screen/onorientationchange /ko/docs/Web/API/Screen/orientationchange_event /ko/docs/Web/API/ServiceWorker/onstatechange /ko/docs/Web/API/ServiceWorker/statechange_event /ko/docs/Web/API/URL/createObjectURL /ko/docs/Web/API/URL/createObjectURL_static /ko/docs/Web/API/URL/revokeObjectURL /ko/docs/Web/API/URL/revokeObjectURL_static @@ -512,9 +501,7 @@ /ko/docs/Web/API/WebRTC_API/adapter.js /ko/docs/Web/API/WebRTC_API#상호_운용성 /ko/docs/Web/API/Web_Audio_API/Migrating_from_webkitAudioContext /ko/docs/conflicting/Web/API/Web_Audio_API /ko/docs/Web/API/Window/DOMContentLoaded_event /ko/docs/Web/API/Document/DOMContentLoaded_event -/ko/docs/Web/API/WindowEventHandlers/onhashchange /ko/docs/Web/API/Window/hashchange_event /ko/docs/Web/API/WindowEventHandlers/onpopstate /ko/docs/Web/API/Window/popstate_event -/ko/docs/Web/API/WindowEventHandlers/onstorage /ko/docs/Web/API/Window/storage_event /ko/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout /ko/docs/Web/API/setTimeout /ko/docs/Web/API/WindowTimers/setTimeout /ko/docs/Web/API/setTimeout /ko/docs/Web/API/XMLHttpRequest/timeout /ko/docs/Web/API/XMLHttpRequest/timeout_event @@ -542,9 +529,7 @@ /ko/docs/Web/API/document.importNode /ko/docs/Web/API/Document/importNode /ko/docs/Web/API/fetch /ko/docs/Web/API/Window/fetch /ko/docs/Web/API/window.navigator.battery /ko/docs/Web/API/Navigator/getBattery -/ko/docs/Web/API/window.navigator.connection /ko/docs/Web/API/Navigator/connection /ko/docs/Web/API/window.screen.lockOrientation /ko/docs/Web/API/Screen/lockOrientation -/ko/docs/Web/API/window.screen.onorientationchange /ko/docs/Web/API/Screen/orientationchange_event /ko/docs/Web/API/window.screen.orientation /ko/docs/Web/API/Screen/orientation /ko/docs/Web/API/window.screen.unlockOrientation /ko/docs/Web/API/Screen/unlockOrientation /ko/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute /ko/docs/Web/Accessibility/ARIA/Attributes/aria-label @@ -649,11 +634,8 @@ /ko/docs/Web/Events/DOMContentLoaded /ko/docs/Web/API/Document/DOMContentLoaded_event /ko/docs/Web/Events/abort /ko/docs/Web/API/HTMLMediaElement/abort_event /ko/docs/Web/Events/blur /ko/docs/Web/API/Element/blur_event -/ko/docs/Web/Events/canplay /ko/docs/Web/API/HTMLMediaElement/canplay_event -/ko/docs/Web/Events/canplaythrough /ko/docs/Web/API/HTMLMediaElement/canplaythrough_event /ko/docs/Web/Events/click /ko/docs/Web/API/Element/click_event /ko/docs/Web/Events/dragstart /ko/docs/Web/API/HTMLElement/dragstart_event -/ko/docs/Web/Events/load /ko/docs/Web/API/Window/load_event /ko/docs/Web/Events/orientationchange /ko/docs/Web/API/Window/orientationchange_event /ko/docs/Web/Events/popstate /ko/docs/Web/API/Window/popstate_event /ko/docs/Web/Events/resize /ko/docs/Web/API/Window/resize_event @@ -694,8 +676,6 @@ /ko/docs/Web/HTML/Canvas/Tutorial/Finale /ko/docs/Web/API/Canvas_API/Tutorial/Finale /ko/docs/Web/HTML/Canvas/Tutorial/Optimizing_canvas /ko/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas /ko/docs/Web/HTML/Canvas/Tutorial/변형 /ko/docs/Web/API/Canvas_API/Tutorial/Transformations -/ko/docs/Web/HTML/Element/Video/canplay_event /ko/docs/Web/API/HTMLMediaElement/canplay_event -/ko/docs/Web/HTML/Element/Video/canplaythrough_event /ko/docs/Web/API/HTMLMediaElement/canplaythrough_event /ko/docs/Web/HTML/Element/content /ko/docs/Web/HTML/Element/slot /ko/docs/Web/HTML/Element/h1 /ko/docs/Web/HTML/Element/Heading_Elements /ko/docs/Web/HTML/Element/h2 /ko/docs/Web/HTML/Element/Heading_Elements @@ -824,10 +804,7 @@ /ko/docs/Web/Progressive_web_apps/소개 /ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames /ko/docs/Web/Reference/Events/DOMContentLoaded /ko/docs/Web/API/Document/DOMContentLoaded_event /ko/docs/Web/Reference/Events/blur /ko/docs/Web/API/Element/blur_event -/ko/docs/Web/Reference/Events/canplay /ko/docs/Web/API/HTMLMediaElement/canplay_event -/ko/docs/Web/Reference/Events/canplaythrough /ko/docs/Web/API/HTMLMediaElement/canplaythrough_event /ko/docs/Web/Reference/Events/click /ko/docs/Web/API/Element/click_event -/ko/docs/Web/Reference/Events/load /ko/docs/Web/API/Window/load_event /ko/docs/Web/Reference/Events/orientationchange /ko/docs/Web/API/Window/orientationchange_event /ko/docs/Web/Reference/Events/popstate /ko/docs/Web/API/Window/popstate_event /ko/docs/Web/Reference/Events/resize /ko/docs/Web/API/Window/resize_event diff --git a/files/ko/web/api/filereader/index.md b/files/ko/web/api/filereader/index.md deleted file mode 100644 index 75fde18b3a2129..00000000000000 --- a/files/ko/web/api/filereader/index.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: FileReader -slug: Web/API/FileReader ---- - -{{APIRef("File API")}} - -**`FileReader`** 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는{{ domxref("File") }} 혹은 {{ domxref("Blob") }} 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다. - -File 객체는 {{ HTMLElement("input") }} 태그를 이용하여 유저가 선택한 파일들의 결과로 반환된 {{ domxref("FileList") }} 객체, 드래그 앤 드랍으로 반환된 [`DataTransfer`](/ko/docs/DragDrop/DataTransfer) 객체 혹은 {{ domxref("HTMLCanvasElement") }}의 `mozGetAsFile()` API로 부터 얻습니다. - -## 생성자 - -- {{domxref("FileReader.FileReader", "FileReader()")}} - - : Returns a newly constructed `FileReader`. - -See [Using files from web applications](/ko/docs/Using_files_from_web_applications) for details and examples. - -## 속성 - -- {{domxref("FileReader.error")}} {{readonlyinline}} - - : {{domxref("DOMError")}} 파일을 읽는 도중에 발생한 에러를 나타냅니다. -- {{domxref("FileReader.readyState")}} {{readonlyinline}} - - - : FileReader의 상태를 나타내는 숫자입니다. - - - `EMPTY` : `0` : 아직 데이터가 로드 되지 않았음. - - `LOADING` : `1` : 데이터가 로딩 중. - - `DONE` : `2` : 모든 읽기 요청이 완료됨. - -- {{domxref("FileReader.result")}} {{readonlyinline}} - - : 파일의 컨텐츠입니다. 이 속성은 읽기 작업이 완료되고 읽기 작업의 초기화에 사용한 방식으로 결정된 데이터의 포맷이 정해진 후에 유효합니다. - -### 이벤트 핸들러 - -- {{domxref("FileReader.onabort")}} - - : {{event("abort")}} 이벤트의 핸들러. 이 이벤트는 읽기 동작이 중단 될 때마다 발생합니다. -- {{domxref("FileReader.onerror")}} - - : {{event("error")}} 이벤트의 핸들러. 이 이벤트는 읽기 동작에 에러가 생길 때마다 발생합니다. -- {{domxref("FileReader.onload")}} - - : {{event("load")}} 이벤트의 핸들러. 이 이벤트는 읽기 동작이 성공적으로 완료 되었을 때마다 발생합니다. -- {{domxref("FileReader.onloadstart")}} - - : {{event("loadstart")}} 이벤트 핸들러. 이 이벤트는 읽기 동작이 실행 될 때마다 발생합니다. -- {{domxref("FileReader.onloadend")}} - - : {{event("loadend")}} 이벤트 핸들러. 이 이벤트는 읽기 동작이 끝났을 때마다 발생합니다. (읽기의 성공이나 실패 여부는 상관 않습니다.) -- {{domxref("FileReader.onprogress")}} - - : {{event("progress")}} 이벤트 핸들러. 이 이벤트는 {{domxref("Blob")}} 컨텐트를 읽는 동안 호출됩니다. - -> **참고:** `FileReader`는 {{domxref("EventTarget")}} 으로 부터 상속 받았습니다, 언급된 모든 이벤트들은 {{domxref("EventTarget.addEventListener()","addEventListener")}} 메소드를 사용하여 listen 하게 할 수 있습니다. - -## 메서드 - -- {{domxref("FileReader.abort()")}} - - : 읽기 요청을 중단시킵니다. 리턴이 되면 readyState 는 DONE이 됩니다. -- {{domxref("FileReader.readAsArrayBuffer()")}} - - : Starts reading the contents of the specified {{ domxref("Blob") }}, once finished, the `result` attribute contains an {{domxref("ArrayBuffer")}} representing the file's data. -- {{domxref("FileReader.readAsBinaryString()")}} - - : Starts reading the contents of the specified {{ domxref("Blob") }}, once finished, the `result` attribute contains the raw binary data from the file as a string. -- {{domxref("FileReader.readAsDataURL()")}} - - : Starts reading the contents of the specified {{ domxref("Blob") }}, once finished, the `result` attribute contains a `data:` URL representing the file's data. -- {{domxref("FileReader.readAsText()")}} - - : Starts reading the contents of the specified {{ domxref("Blob") }}, once finished, the `result` attribute contains the contents of the file as a text string. - -## 명세 - -{{Specifications}} - -## 브라우저 호환성 - -{{Compat}} - -## 같이 보기 - -- [Using files from web applications](/en/Using_files_from_web_applications) -- {{ domxref("File") }} -- {{ domxref("Blob") }} -- [nsIDOMFileReader \[en-US\]](/ko/docs/nsIDOMFileReader) - For addons/privelaged scope diff --git a/files/ko/web/api/filereader/readasdataurl/index.md b/files/ko/web/api/filereader/readasdataurl/index.md index da207d1c2b9809..ce1000b1f022bb 100644 --- a/files/ko/web/api/filereader/readasdataurl/index.md +++ b/files/ko/web/api/filereader/readasdataurl/index.md @@ -5,7 +5,7 @@ slug: Web/API/FileReader/readAsDataURL {{APIRef("File API")}} -`readAsDataURL` 메서드는 컨텐츠를 특정 {{domxref("Blob")}} 이나 {{domxref("File")}}에서 읽어 오는 역할을 합니다. 읽어오는 read 행위가 종료되는 경우에, {{domxref("FileReader.readyState","readyState")}} 의 상태가 `DONE`이 되며, {{event("loadend")}} 이벤트가 트리거 됩니다. 이와 함께, base64 인코딩 된 스트링 데이터가 {{domxref("FileReader.result","result")}} 속성(attribute)에 담아지게 됩니다. +`readAsDataURL` 메서드는 컨텐츠를 특정 {{domxref("Blob")}} 이나 {{domxref("File")}}에서 읽어 오는 역할을 합니다. 읽어오는 read 행위가 종료되는 경우에, {{domxref("FileReader.readyState","readyState")}} 의 상태가 `DONE`이 되며, {{domxref("FileReader/loadend_event", "loadend")}} 이벤트가 트리거 됩니다. 이와 함께, base64 인코딩 된 스트링 데이터가 {{domxref("FileReader.result","result")}} 속성(attribute)에 담아지게 됩니다. ## 문법 diff --git a/files/ko/web/api/filereader/readastext/index.md b/files/ko/web/api/filereader/readastext/index.md index 804105b582420d..44faecfa2aa66e 100644 --- a/files/ko/web/api/filereader/readastext/index.md +++ b/files/ko/web/api/filereader/readastext/index.md @@ -5,7 +5,7 @@ slug: Web/API/FileReader/readAsText {{APIRef("File API")}} -**`readAsText()`** 메서드는 지정된 {{domxref("Blob")}} 이나 {{domxref("File")}} 의 컨텐츠를 읽기 위해 사용합니다. 읽기 연산이 끝나면, {{domxref("FileReader.readyState","readyState")}} 가 `DONE`으로 바뀌고, {{event("loadend")}} 이벤트가 트리거 되고, {{domxref("FileReader.result","result")}} 프로퍼티는 파일의 내용을 텍스트 문자열로 가집니다. +**`readAsText()`** 메서드는 지정된 {{domxref("Blob")}} 이나 {{domxref("File")}} 의 컨텐츠를 읽기 위해 사용합니다. 읽기 연산이 끝나면, {{domxref("FileReader.readyState","readyState")}} 가 `DONE`으로 바뀌고, {{domxref("FileReader/loadend_event", "loadend")}} 이벤트가 트리거 되고, {{domxref("FileReader.result","result")}} 프로퍼티는 파일의 내용을 텍스트 문자열로 가집니다. > **참고:** {{domxref("Blob.text()")}} 메서드는 파일을 텍스트로 읽는 프로미스 기반의 새 API 입니다. diff --git a/files/ko/web/api/fullscreen_api/index.md b/files/ko/web/api/fullscreen_api/index.md index 918e8426a5a7f0..96114fb815037f 100644 --- a/files/ko/web/api/fullscreen_api/index.md +++ b/files/ko/web/api/fullscreen_api/index.md @@ -44,21 +44,21 @@ _{{DOMxRef("Document")}} 인터페이스는 full-screen mode가 지원되고 사 _Fullscreen API는 full-screen mode를 켜고 끌 때 혹은, full-screen mode와 window mode간에 변경하는 과정에서 오류가 발생하는 것을 감지하는데 사용할 수 있는 두 가지 이벤트를 정의합니다. 이러한 이벤트에 대한 이벤트 핸들러는 {{DOMxRef("Document")}} 와{{DOMxRef("Element")}} 인터페이스 에서 사용할 수 있습니다._ > [!NOTE] -> 이러한 이벤트 핸들러 속성(property)은 HTML 컨텐트 속성(attribute)으로 사용할 수 없습니다. 즉, HTML 컨텐트에서 {{Event("fullscreenchange")}} 및 {{Event("fullscreenerror")}} 이벤트를 지정할 수 없습니다. JavaScript 코드로 추가해야만 합니다. +> 이러한 이벤트 핸들러 속성(property)은 HTML 컨텐트 속성(attribute)으로 사용할 수 없습니다. 즉, HTML 컨텐트에서 {{domxref("Element/fullscreenchange_event", "fullscreenchange")}} 및 {{domxref("Element/fullscreenerror_event", "fullscreenerror")}} 이벤트를 지정할 수 없습니다. JavaScript 코드로 추가해야만 합니다. #### Event handlers on documents - {{DOMxRef("Document.onfullscreenchange")}} - - : 문서(document)가 full-screen mode로 전환되거나 full-screen mode를 종료할 때 {{DOMxRef("Document")}}로 보내지는 {{Event("fullscreenchange")}} 이벤트에 대한 이벤트 핸들러 입니다. 이 핸들러는 오직 전체 문서가 full-screen mode로 표시될 때만 호출됩니다. + - : 문서(document)가 full-screen mode로 전환되거나 full-screen mode를 종료할 때 {{DOMxRef("Document")}}로 보내지는 {{domxref("Element/fullscreenchange_event", "fullscreenchange")}} 이벤트에 대한 이벤트 핸들러 입니다. 이 핸들러는 오직 전체 문서가 full-screen mode로 표시될 때만 호출됩니다. - {{DOMxRef("Document.onfullscreenerror")}} - - : 전체 문서에 대해 full-screen mode를 사용하거나, 사용하지 않도록 설정하는 동안 오류가 발생하면, {{DOMxRef("Document")}}로 보내지는 {{Event("fullscreenerror")}} 이벤트의 이벤트 핸들러입니다. + - : 전체 문서에 대해 full-screen mode를 사용하거나, 사용하지 않도록 설정하는 동안 오류가 발생하면, {{DOMxRef("Document")}}로 보내지는 {{domxref("Element/fullscreenerror_event", "fullscreenerror")}} 이벤트의 이벤트 핸들러입니다. #### Event handlers on elements - {{DOMxRef("Element.onfullscreenchange")}} - - : {{Event("fullscreenchange")}} 이벤트가 요소(element)로 전송되면, 요소가 full-screen mode로 배치되거나 제거되었음을 나타내는 이벤트 핸들러입니다. + - : {{domxref("Element/fullscreenchange_event", "fullscreenchange")}} 이벤트가 요소(element)로 전송되면, 요소가 full-screen mode로 배치되거나 제거되었음을 나타내는 이벤트 핸들러입니다. - {{DOMxRef("Element.onfullscreenerror")}} - - : full-screen mode 를 사용하거나, 사용하지 않도록 설정하는 동안 오류가 발생하면 요소로 보내지는 {{Event("fullscreenerror")}} 이벤트의 이벤트 핸들러입니다. + - : full-screen mode 를 사용하거나, 사용하지 않도록 설정하는 동안 오류가 발생하면 요소로 보내지는 {{domxref("Element/fullscreenerror_event", "fullscreenerror")}} 이벤트의 이벤트 핸들러입니다. ### Obsolete properties @@ -71,9 +71,9 @@ _Fullscreen API는 full-screen mode를 켜고 끌 때 혹은, full-screen mode _Fullscreen API는 full-screen mode를 켜고 끌 때 혹은, full-screen mode와 window mode간에 변경하는 과정에서 오류가 발생하는 것을 감지하는데 사용할 수 있는 두 가지 이벤트를 정의합니다._ -- {{Event("fullscreenchange")}} +- {{domxref("Element/fullscreenchange_event", "fullscreenchange")}} - : full-screen mode를 사용하거나, 사용하지 않도록 전환할 때 {{DOMxRef("Document")}} 혹은{{DOMxRef("Element")}} 로 보냅니다. -- {{Event("fullscreenerror")}} +- {{domxref("Element/fullscreenerror_event", "fullscreenerror")}} - : full-screen mode를 사용하거나, 사용하지 않도록 전환하려고 시도하는 중에 오류가 발생하면 `Document` 또는 `Element` 로 보냅니다. ## Dictionaries diff --git a/files/ko/web/api/gamepad_api/index.md b/files/ko/web/api/gamepad_api/index.md index e3a506a57eabb2..5d9a3fd66742f6 100644 --- a/files/ko/web/api/gamepad_api/index.md +++ b/files/ko/web/api/gamepad_api/index.md @@ -35,9 +35,9 @@ slug: Web/API/Gamepad_API #### Window events - {{domxref("Window.ongamepadconnected")}} - - : Represents an event handler that will run when a gamepad is connected (when the {{event('gamepadconnected')}} event fires). + - : Represents an event handler that will run when a gamepad is connected (when the {{domxref("Window.gamepadconnected_event", "gamepadconnected")}} event fires). - {{domxref("Window.ongamepaddisconnected")}} - - : Represents an event handler that will run when a gamepad is disconnected (when the {{event('gamepaddisconnected')}} event fires). + - : Represents an event handler that will run when a gamepad is disconnected (when the {{domxref("Window.gamepaddisconnected_event", "gamepaddisconnected")}} event fires). ## 튜토리얼과 가이드 diff --git a/files/ko/web/api/history/back/index.md b/files/ko/web/api/history/back/index.md index f2021fe2114884..d30934ff924107 100644 --- a/files/ko/web/api/history/back/index.md +++ b/files/ko/web/api/history/back/index.md @@ -7,7 +7,7 @@ slug: Web/API/History/back **`History.back()`** 메서드는 브라우저가 세션 기록의 바로 뒤 페이지로 이동하도록 지시합니다. {{domxref("History.go", "history.go(-1)")}}와 같습니다. 이전 페이지가 없는 경우 아무것도 하지 않습니다. -이 메서드는 비동기적입니다. {{event("popstate")}} 이벤트 처리기를 통해 탐색 완료 시점을 알 수 있습니다. +이 메서드는 비동기적입니다. {{domxref("Window/popstate_event", "popstate")}} 이벤트 처리기를 통해 탐색 완료 시점을 알 수 있습니다. ## 구문 diff --git a/files/ko/web/api/history/forward/index.md b/files/ko/web/api/history/forward/index.md index 4d41a5132e2095..7fad710dd70b2e 100644 --- a/files/ko/web/api/history/forward/index.md +++ b/files/ko/web/api/history/forward/index.md @@ -7,7 +7,7 @@ slug: Web/API/History/forward **`History.forward()`** 메서드는 브라우저가 세션 기록의 바로 앞 페이지로 이동하도록 지시합니다. {{domxref("History.go", "history.go(1)")}}과 같습니다. 다음 페이지가 없는 경우 아무것도 하지 않습니다. -이 메서드는 비동기적입니다. {{event("popstate")}} 이벤트 처리기를 통해 탐색 완료 시점을 알 수 있습니다. +이 메서드는 비동기적입니다. {{domxref("Window/popstate_event", "popstate")}} 이벤트 처리기를 통해 탐색 완료 시점을 알 수 있습니다. ## 구문 diff --git a/files/ko/web/api/history/go/index.md b/files/ko/web/api/history/go/index.md index 5344ce05ea3699..2ea20fbc620d04 100644 --- a/files/ko/web/api/history/go/index.md +++ b/files/ko/web/api/history/go/index.md @@ -7,7 +7,7 @@ slug: Web/API/History/go **`History.go()`** 메서드는 history 세션에서 특정한 페이지를 로딩합니다. 인자로 전달하는 파라미터 값에 따라 history를 통해서 페이지를 앞 뒤로 이동할 수 있습니다. -이 메서드는 {{glossary("asynchronous")}}(비동기)로 동작합니다. 페이지 앞, 뒤 이동이 언제 이뤄지는지 알려면 {{event("popstate")}} event에 대한 listener를 등록합니다. +이 메서드는 {{glossary("asynchronous")}}(비동기)로 동작합니다. 페이지 앞, 뒤 이동이 언제 이뤄지는지 알려면 {{domxref("Window/popstate_event", "popstate")}} event에 대한 listener를 등록합니다. ## 구문 @@ -66,5 +66,5 @@ history.go(0); - {{domxref("History")}} - {{DOMxRef("History.back","back()")}} - {{DOMxRef("History.forward","forward()")}} -- {{event("popstate")}} event +- {{domxref("Window/popstate_event", "popstate")}} event - [Working with the History API](/ko/docs/Web/API/History_API/Working_with_the_History_API) diff --git a/files/ko/web/api/history/index.md b/files/ko/web/api/history/index.md index 150b2925e82e14..a5a948cfef4e78 100644 --- a/files/ko/web/api/history/index.md +++ b/files/ko/web/api/history/index.md @@ -16,7 +16,7 @@ _`History` 인터페이스는 어떤 속성도 상속하지 않습니다._ - {{domxref("History.scrollRestoration")}} - : 기록 탐색 시 스크롤 위치 복원 여부를 명시할 수 있습니다. 가능한 값은 `auto`와 `manual`입니다. - {{domxref("History.state")}} {{readOnlyInline}} - - : 기록 스택 최상단의 스테이트를 나타내는 값을 반환합니다. {{event("popstate")}} 이벤트를 기다리지 않고 현재 기록의 스테이트를 볼 수 있는 방법입니다. + - : 기록 스택 최상단의 스테이트를 나타내는 값을 반환합니다. {{domxref("Window/popstate_event", "popstate")}} 이벤트를 기다리지 않고 현재 기록의 스테이트를 볼 수 있는 방법입니다. ## 메서드 diff --git a/files/ko/web/api/history/state/index.md b/files/ko/web/api/history/state/index.md index c4161c5b910288..40863807496bda 100644 --- a/files/ko/web/api/history/state/index.md +++ b/files/ko/web/api/history/state/index.md @@ -7,7 +7,7 @@ slug: Web/API/History/state **`History.state`** 속성은 현 history에 해당하는 state값을 나타냅니다. -{{event("popstate")}} 이벤트가 트리거될때가 아닌 상태에서 state값을 볼 수 있는 방법입니다. +{{domxref("Window/popstate_event", "popstate")}} 이벤트가 트리거될때가 아닌 상태에서 state값을 볼 수 있는 방법입니다. ## 구문 diff --git a/files/ko/web/api/html_drag_and_drop_api/index.md b/files/ko/web/api/html_drag_and_drop_api/index.md index 73d4f393602678..46ba611af68a78 100644 --- a/files/ko/web/api/html_drag_and_drop_api/index.md +++ b/files/ko/web/api/html_drag_and_drop_api/index.md @@ -13,20 +13,19 @@ HTML 드래그 앤 드롭 인터페이스는 Firefox와 다른 브라우저에 ## 드래그 이벤트 -HTML 드래그 앤 드롭은 {{domxref("Event","DOM event model")}} 과 _{{domxref("DragEvent","drag events")}}_ 를 {{domxref("MouseEvent","mouse events")}} 로부터 상속받습니다. 보통 드래그는 사용자가 draggable 요소를 마우스로 선택하고, 마우스 포인터를 droppable 요소로 가져가 마우스 버튼을 때는 것으로 이루어집니다. 드래그하는 도중에 많은 이벤트가 발생하고, 몇몇 이벤트는 여러번 발생하기도 합니다. ( {{event("drag")}}와 {{event("dragover")}}). +HTML 드래그 앤 드롭은 {{domxref("Event","DOM event model")}} 과 _{{domxref("DragEvent","drag events")}}_ 를 {{domxref("MouseEvent","mouse events")}} 로부터 상속받습니다. 보통 드래그는 사용자가 draggable 요소를 마우스로 선택하고, 마우스 포인터를 droppable 요소로 가져가 마우스 버튼을 때는 것으로 이루어집니다. 드래그하는 도중에 많은 이벤트가 발생하고, 몇몇 이벤트는 여러번 발생하기도 합니다. ( {{domxref('HTMLElement/drag_event', 'drag')}}와 {{domxref('HTMLElement/dragover_event', 'dragover')}}). 모든 [드래그 이벤트](/ko/docs/Web/API/DragEvent#Event_types)는 [글로벌 이벤트 핸들러](/ko/docs/Web/API/DragEvent#GlobalEventHandlers)와 연결되어 있습니다. 각 드래그 이벤트와 드래그 전역 속성은 참조 문서를 가지고 있습니다. 아래 표는 각 이벤트에 대한 간략한 설명과 참조 문서로의 링크를 담고 있습니다. -| 이벤트 | 이벤트 핸들러 | 설명 | -| ------------------------------------------- | ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{domxref('Document/drag_이벤트', 'drag')}} | {{domxref('GlobalEventHandlers.ondrag','ondrag')}} | 요소나 텍스트 블록을 드래그 할 때 발생한다. | -| {{event('dragend')}} | {{domxref('GlobalEventHandlers.ondragend','ondragend')}} | 드래그를 끝냈을 때 발생한다. (마우스 버튼을 떼거나 ESC 키를 누를 때) ([드래그 끝내기](/ko/docs/DragDrop/Drag_Operations#dragend)를 보시오) | -| {{event('dragenter')}} | {{domxref('GlobalEventHandlers.ondragenter','ondragenter')}} | 드래그한 요소나 텍스트 블록을 적합한 드롭 대상위에 올라갔을 때 발생한다. ([드롭 대상 지정하기](/ko/docs/DragDrop/Drag_Operations#droptargets)를 보시오.) | -| {{event('dragexit')}} | {{domxref('GlobalEventHandlers.ondragexit','ondragexit')}} | 요소가 더 이상 드래그의 직접적인 대상이 아닐 때 발생한다. | -| {{event('dragleave')}} | {{domxref('GlobalEventHandlers.ondragleave','ondragleave')}} | 드래그하는 요소나 텍스트 블록이 적합한 드롭 대상에서 벗어났을 때 발생한다. | -| {{event('dragover')}} | {{domxref('GlobalEventHandlers.ondragover','ondragover')}} | 요소나 텍스트 블록을 적합한 드롭 대상 위로 지나갈 때 발생한다. (매 수백 밀리초마다 발생한다.) | -| {{event('dragstart')}} | {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} | 사용자가 요소나 텍스트 블록을 드래그하기 시작했을 때 발생한다. ([드래그 시작하기](/ko/docs/DragDrop/Drag_Operations#dragstart)를 보시오.) | -| {{event('drop')}} | {{domxref('GlobalEventHandlers.ondrop','ondrop')}} | 요소나 텍스트 블록을 적합한 드롭 대상에 드롭했을 때 발생한다. ([드롭하기](/ko/docs/DragDrop/Drag_Operations#dragstart)를 보시오.) | +| 이벤트 | 이벤트 핸들러 | 설명 | +| ------------------------------------------------------- | ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{domxref('Document/drag_이벤트', 'drag')}} | {{domxref('GlobalEventHandlers.ondrag','ondrag')}} | 요소나 텍스트 블록을 드래그 할 때 발생한다. | +| {{domxref('HTMLElement/dragend_event', 'dragend')}} | {{domxref('GlobalEventHandlers.ondragend','ondragend')}} | 드래그를 끝냈을 때 발생한다. (마우스 버튼을 떼거나 ESC 키를 누를 때) ([드래그 끝내기](/ko/docs/DragDrop/Drag_Operations#dragend)를 보시오) | +| {{domxref('HTMLElement/dragenter_event', 'dragenter')}} | {{domxref('GlobalEventHandlers.ondragenter','ondragenter')}} | 드래그한 요소나 텍스트 블록을 적합한 드롭 대상위에 올라갔을 때 발생한다. ([드롭 대상 지정하기](/ko/docs/DragDrop/Drag_Operations#droptargets)를 보시오.) | +| {{domxref('HTMLElement/dragleave_event', 'dragleave')}} | {{domxref('GlobalEventHandlers.ondragleave','ondragleave')}} | 드래그하는 요소나 텍스트 블록이 적합한 드롭 대상에서 벗어났을 때 발생한다. | +| {{domxref('HTMLElement/dragover_event', 'dragover')}} | {{domxref('GlobalEventHandlers.ondragover','ondragover')}} | 요소나 텍스트 블록을 적합한 드롭 대상 위로 지나갈 때 발생한다. (매 수백 밀리초마다 발생한다.) | +| {{domxref('HTMLElement/dragstart_event', 'dragstart')}} | {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} | 사용자가 요소나 텍스트 블록을 드래그하기 시작했을 때 발생한다. ([드래그 시작하기](/ko/docs/DragDrop/Drag_Operations#dragstart)를 보시오.) | +| {{domxref('HTMLElement/drop_event', 'drop')}} | {{domxref('GlobalEventHandlers.ondrop','ondrop')}} | 요소나 텍스트 블록을 적합한 드롭 대상에 드롭했을 때 발생한다. ([드롭하기](/ko/docs/DragDrop/Drag_Operations#dragstart)를 보시오.) | > **참고:** `참고: dragstart`와 `dragend` 이벤트는 파일을 브라우저로 드래그할 때는 발생하지 않습니다. @@ -178,7 +177,7 @@ function dragstart_handler(ev) { ### 드롭 효과 다루기 -{{event("drop")}} 이벤트 핸들러는 자유롭게 드래그 데이터를 가공할 수 있습니다. 보통, 드래그 아이템과 각 아이템을 가공하기 위해 {{domxref("DataTransfer.getData","getData()")}}를 사용합니다. 추가로, {{domxref("DataTransfer.dropEffect","dropEffect")}} 값이나 보조키 상태에 따라 어플리케이션이 어떻게 동작할지를 결정할 수 있습니다. +{{domxref('HTMLElement/drop_event', 'drop')}} 이벤트 핸들러는 자유롭게 드래그 데이터를 가공할 수 있습니다. 보통, 드래그 아이템과 각 아이템을 가공하기 위해 {{domxref("DataTransfer.getData","getData()")}}를 사용합니다. 추가로, {{domxref("DataTransfer.dropEffect","dropEffect")}} 값이나 보조키 상태에 따라 어플리케이션이 어떻게 동작할지를 결정할 수 있습니다. 아래 예제는 드롭 핸들러가 드래그 데이터로부터 드래그하는 요소의 id를 가져와 드래그하는 요소를 드롭하는 요소로 옮기기위해 사용합니다. @@ -217,7 +216,7 @@ function dragstart_handler(ev) { ### 드래그가 끝나면 -드래그가 끝나면 드래그한 요소에 {{event("dragend")}} 이벤트가 발생합니다. 이 이벤트는 드래그가 완료되거나 중간에 취소되어도 발생합니다. {{event("dragend")}} 이벤트 핸들러는 {{domxref("DataTransfer.dropEffect","dropEffect")}} 프로퍼티를 확인해 드래그가 성공했는지를 확인할 수 있습니다. +드래그가 끝나면 드래그한 요소에 {{domxref('HTMLElement/dragend_event', 'dragend')}} 이벤트가 발생합니다. 이 이벤트는 드래그가 완료되거나 중간에 취소되어도 발생합니다. {{domxref('HTMLElement/dragend_event', 'dragend')}} 이벤트 핸들러는 {{domxref("DataTransfer.dropEffect","dropEffect")}} 프로퍼티를 확인해 드래그가 성공했는지를 확인할 수 있습니다. 드래그 끝을 다루기 위한 더 많은 정보는 [Finishing a Drag](/ko/docs/DragDrop/Drag_Operations#dragend)를 참고하세요. diff --git a/files/ko/web/api/htmlelement/index.md b/files/ko/web/api/htmlelement/index.md deleted file mode 100644 index 2b2e0d05a86ebc..00000000000000 --- a/files/ko/web/api/htmlelement/index.md +++ /dev/null @@ -1,206 +0,0 @@ ---- -title: HTMLElement -slug: Web/API/HTMLElement ---- - -{{ APIRef("HTML DOM") }} - -**`HTMLElement`** 인터페이스는 모든 종류의 [HTML](/ko/docs/Web/HTML) 요소를 나타냅니다. 일부 요소는 이 인터페이스를 직접 구현하지만 나머지 요소는 `HTMLElement`를 상속한 자식 인터페이스를 구현합니다. - -{{InheritanceDiagram}} - -## 속성 - -_부모인 {{domxref("Element")}}의 속성을 상속합니다. {{domxref("GlobalEventHandlers")}}, {{domxref("TouchEventHandlers")}}의 속성을 구현합니다._ - -- {{domxref("HTMLElement.accessKey")}} - - : 요소에 할당된 접근 키를 나타내는 {{domxref("DOMString")}}입니다. -- {{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}} - - : 요소에 할당된 접근 키를 포함하는 {{domxref("DOMString")}}을 반환합니다. -- {{domxref("HTMLElement.contentEditable")}} - - : 요소가 수정 가능하면 `"true"`, 그렇지 않으면 `"false"` 값을 갖는 {{domxref("DOMString")}}입니다. -- {{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}} - - : 요소의 콘텐츠가 수정 가능한지 여부를 나타내는 {{domxref("Boolean")}}을 반환합니다. -- {{domxref("HTMLElement.contextMenu")}} {{deprecated_inline}} - - : 요소와 관련된 콘텍스트 메뉴를 나타내는 {{domxref("HTMLMenuElement")}}입니다. {{jsxref("null")}}일 수 있습니다. -- {{domxref("HTMLElement.dataset")}} {{readonlyInline}} - - : 요소의 [사용자 지정 데이터 속성](/ko/docs/Learn/HTML/Howto/%EB%8D%B0%EC%9D%B4%ED%84%B0_%EC%86%8D%EC%84%B1_%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0)(`data-*`)을 스크립트에서 읽고 쓸 수 있는 {{domxref("DOMStringMap")}}을 반환합니다. -- {{domxref("HTMLElement.dir")}} - - : 요소의 방향성을 표현하는 전역 속성 `dir` 을 나타내는 {{domxref("DOMString")}} 을 반환합니다. 가능한 값은 `"ltr"`, `"rtl"`, `"auto"` 입니다. -- {{domxref("HTMLElement.draggable")}} - - : 요소가 드래그 가능한지 여부를 나타내는 {{jsxref("Boolean")}} 을 반환합니다. -- {{domxref("HTMLElement.dropzone")}} {{readonlyInline}} - - : `dropzone` 전역 속성을 나타내고 drop 작업에 대한 동작을 설명하는 {{domxref("DOMSettableTokenList")}} 를 반환합니다. -- {{domxref("HTMLElement.hidden")}} - - : 요소가 숨김상태인지 여부를 나타내는 {{jsxref("Boolean")}} 을 반환합니다. -- {{domxref("HTMLElement.inert")}} - - : 유저 에이전트가 사용자 인터렉션 이벤트, 페이지 내 텍스트 검색("페이지에서 찾기"), 텍스트 선택의 목적으로 주어진 노드가 없는 것처럼 동작해야하는지 여부를 나타내는 {{jsxref("Boolean")}} 을 반환합니다. -- {{domxref("HTMLElement.innerText")}} - - : 노드와 그 자손의 "렌더링된" 텍스트 컨텐츠를 나타냅니다. getter 로써, 이는 사용자가 커서로 요소의 컨텐츠를 하이라이팅한 후 클립보드로 복사하면 얻을 수 있는 텍스트와 유사합니다. -- {{domxref("HTMLElement.itemScope")}} {{experimental_inline}} - - : 항목 스코프를 나타내는 {{jsxref("Boolean")}} 입니다. -- {{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}} - - : {{domxref("DOMSettableTokenList")}}… 를 반환합니다. -- {{domxref("HTMLElement.itemId")}} {{experimental_inline}} - - : 항목 ID 를 나타내는 {{domxref("DOMString")}} 입니다. -- {{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}} - - : {{domxref("DOMSettableTokenList")}}… 를 반환합니다. -- {{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}} - - : {{domxref("DOMSettableTokenList")}}… 를 반환합니다. -- {{domxref("HTMLElement.itemValue")}} {{experimental_inline}} - - : 항목 값을 나타내는 {{jsxref("Object")}} 를 반환합니다. -- {{domxref("HTMLElement.lang")}} - - : 요소의 속성, 텍스트, 컨텐츠의 언어를 나타내는 {{domxref("DOMString")}} 입니다. -- {{domxref("HTMLElement.noModule")}} - - : 임포트한 스크립트가 모듈 스크립트를 지원하는 유저 에이전트에서 실행될 수 있는지를 나타내는 {{jsxref("Boolean")}} 입니다. -- {{domxref("HTMLElement.nonce")}} - - : 주어진 페치(fetch)의 진행을 허용할지를 결정하기 위한 컨텐츠 보안 정책(Content Security Policy)에서 한 번 사용된 암호회된 숫자를 반환합니다. -- {{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}} - - : 레이아웃에 상대적인 요소의 높이를 갖는 `double` 을 반환합니다. -- {{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}} - - : 요소의 left border 부터 `offsetParent` 의 left border 까지의 거리를 `double` 로 반환합니다. -- {{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}} - - : 모든 오프셋 계산이 현재 연산된 요소인 {{domxref("Element")}} 를 반환합니다. -- {{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}} - - : 요소의 top border 부터 `offsetParent` 의 top border 까지의 거리를 `double` 로 반환합니다. -- {{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}} - - : 레이아웃에 상대적인 요소의 너비를 갖는 `double` 을 반환합니다. -- {{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}} - - : {{domxref("HTMLPropertiesCollection")}}… 을 반환합니다. -- {{domxref("HTMLElement.spellcheck")}} - - : [철자 검사](/ko/docs/Web/HTML/Global_attributes/spellcheck)를 제어하는 {{jsxref("Boolean")}} 입니다. 모든 HTML 요소에 존재하지만, 모두에 대해 적용되지는 않습니다. -- {{domxref("HTMLElement.style")}} - - : 요소의 스타일 속성의 정의를 나타내는 {{domxref("CSSStyleDeclaration")}} 객체입니다. -- {{domxref("HTMLElement.tabIndex")}} - - : 탭 순서에서 요소의 위치를 나타내는 `long` 입니다. -- {{domxref("HTMLElement.title")}} - - : 요소에 마우스를 오버할 때 팝업 상자에 표시되는 텍스트를 갖는 {{domxref("DOMString")}} 입니다. -- {{domxref("HTMLElement.translate")}} {{experimental_inline}} - - : 번역을 나타내는 {{jsxref("Boolean")}} 입니다. - -### 이벤트 핸들러 - -`onXYZ` 형태의 대부분의 이벤트 핸들러 속성은 {{domxref("GlobalEventHandlers")}} 또는 {{domxref("TouchEventHandlers")}} 에 정의되어 있으며 `HTMLElement` 에 의해 구현되었습니다. 다음 `HTMLElement` 에 해당하는 핸들러입니다. - -- {{ domxref("HTMLElement.oncopy") }} {{ non-standard_inline() }} - - : `copy` 이벤트를 위한 이벤트 핸들링 코드를 반환합니다([Firefox bug 280959](https://bugzil.la/280959)). -- {{ domxref("HTMLElement.oncut") }} {{ non-standard_inline() }} - - : `cut` 이벤트를 위한 이벤트 핸들링 코드를 반환합니다([Firefox bug 280959](https://bugzil.la/280959)). -- {{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }} - - : `paste` 이벤트를 위한 이벤트 핸들링 코드를 반환합니다([Firefox bug 280959](https://bugzil.la/280959)). -- {{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}} - - : {{event("touchstart")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다. -- {{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}} - - : {{event("touchend")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다. -- {{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}} - - : {{event("touchmove")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다. -- {{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}} - - : {{event("touchenter")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다. -- {{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}} - - : {{event("touchleave")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다. -- {{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}} - - : {{event("touchcancel")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다. - -## 메서드 - -_부모인 {{domxref("Element")}}의 메서드를 상속합니다._ - -- {{domxref("HTMLElement.blur()")}} - - : 현재 포커스된 요소로부터 키보드 포커스를 제거합니다. -- {{domxref("HTMLElement.click()")}} - - : 요소로 마우스 클릭 이벤트를 전달합니다. -- {{domxref("HTMLElement.focus()")}} - - : 요소에 현재 키보드 포커스를 생성합니다. -- {{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}} - - : 요소에 철자 확인자를 생성합니다. - -## 이벤트 - -Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface. - -- [`invalid`](/ko/docs/Web/API/HTMLElement/invalid_event) - - : Fired when an element does not satisfy its constraints during constraint validation. - Also available via the [`oninvalid`](/ko/docs/Web/API/GlobalEventHandlers/oninvalid) property. - -### Animation events - -- [`animationcancel`](/ko/docs/Web/API/HTMLElement/animationcancel_event) - - : Fired when an animation unexpectedly aborts. - Also available via the [`onanimationcancel`](/ko/docs/Web/API/GlobalEventHandlers/onanimationcancel) property. -- [`animationend`](/ko/docs/Web/API/HTMLElement/animationend_event) - - : Fired when an animation has completed normally. - Also available via the [`onanimationend`](/ko/docs/Web/API/GlobalEventHandlers/onanimationend) property. -- [`animationiteration`](/ko/docs/Web/API/HTMLElement/animationiteration_event) - - : Fired when an animation iteration has completed. - Also available via the [`onanimationiteration`](/ko/docs/Web/API/GlobalEventHandlers/onanimationiteration) property. -- [`animationstart`](/ko/docs/Web/API/HTMLElement/animationstart_event) - - : Fired when an animation starts. - Also available via the [`onanimationstart`](/ko/docs/Web/API/GlobalEventHandlers/onanimationstart) property. - -### Input events - -- [`beforeinput`](/ko/docs/Web/API/HTMLElement/beforeinput_event) - - : Fired when the value of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element is about to be modified. -- [`input`](/ko/docs/Web/API/HTMLElement/input_event) - - : Fired when the `value` of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element has been changed. - Also available via the [`oninput`](/ko/docs/Web/API/GlobalEventHandlers/oninput) property. - -### Pointer events - -- [`gotpointercapture`](/ko/docs/Web/API/HTMLElement/gotpointercapture_event) - - : Fired when an element captures a pointer using [`setPointerCapture()`](/ko/docs/Web/API/Element/setPointerCapture). - Also available via the [`ongotpointercapture`](/ko/docs/Web/API/GlobalEventHandlers/ongotpointercapture) property. -- [`lostpointercapture`](/ko/docs/Web/API/HTMLElement/lostpointercapture_event) - - : Fired when a [captured pointer](/ko/docs/Web/API/Pointer_events#Pointer_capture) is released. - Also available via the [`onlostpointercapture`](/ko/docs/Web/API/GlobalEventHandlers/onlostpointercapture) property. -- [`pointercancel`](/ko/docs/Web/API/HTMLElement/pointercancel_event) - - : Fired when a pointer event is canceled. - Also available via the [`onpointercancel`](/ko/docs/Web/API/GlobalEventHandlers/onpointercancel) property. -- [`pointerdown`](/ko/docs/Web/API/HTMLElement/pointerdown_event) - - : Fired when a pointer becomes active. - Also available via the [`onpointerdown`](/ko/docs/Web/API/GlobalEventHandlers/onpointerdown) property. -- [`pointerenter`](/ko/docs/Web/API/HTMLElement/pointerenter_event) - - : Fired when a pointer is moved into the hit test boundaries of an element or one of its descendants. - Also available via the [`onpointerenter`](/ko/docs/Web/API/GlobalEventHandlers/onpointerenter) property. -- [`pointerleave`](/ko/docs/Web/API/HTMLElement/pointerleave_event) - - : Fired when a pointer is moved out of the hit test boundaries of an element. - Also available via the [`onpointerleave`](/ko/docs/Web/API/GlobalEventHandlers/onpointerleave) property. -- [`pointermove`](/ko/docs/Web/API/HTMLElement/pointermove_event) - - : Fired when a pointer changes coordinates. - Also available via the [`onpointermove`](/ko/docs/Web/API/GlobalEventHandlers/onpointermove) property. -- [`pointerout`](/ko/docs/Web/API/HTMLElement/pointerout_event) - - : Fired when a pointer is moved out of the _hit test_ boundaries of an element (among other reasons). - Also available via the [`onpointerout`](/ko/docs/Web/API/GlobalEventHandlers/onpointerout) property. -- [`pointerover`](/ko/docs/Web/API/HTMLElement/pointerover_event) - - : Fired when a pointer is moved into an element's hit test boundaries. - Also available via the [`onpointerover`](/ko/docs/Web/API/GlobalEventHandlers/onpointerover) property. -- [`pointerup`](/ko/docs/Web/API/HTMLElement/pointerup_event) - - : Fired when a pointer is no longer active. - Also available via the [`onpointerup`](/ko/docs/Web/API/GlobalEventHandlers/onpointerup) property. - -### Transition events - -- [`transitioncancel`](/ko/docs/Web/API/HTMLElement/transitioncancel_event) - - : Fired when a [CSS transition](/ko/docs/CSS/Using_CSS_transitions) is canceled. - Also available via the [`ontransitioncancel`](/ko/docs/Web/API/GlobalEventHandlers/ontransitioncancel) property. -- [`transitionend`](/ko/docs/Web/API/HTMLElement/transitionend_event) - - : Fired when a [CSS transition](/ko/docs/CSS/Using_CSS_transitions) has completed. - Also available via the [`ontransitionend`](/ko/docs/Web/API/GlobalEventHandlers/ontransitionend) property. -- [`transitionrun`](/ko/docs/Web/API/HTMLElement/transitionrun_event) - - : Fired when a [CSS transition](/ko/docs/CSS/Using_CSS_transitions) is first created. - Also available via the [`ontransitionrun`](/ko/docs/Web/API/GlobalEventHandlers/ontransitionrun) property. -- [`transitionstart`](/ko/docs/Web/API/HTMLElement/transitionstart_event) - - : Fired when a [CSS transition](/ko/docs/CSS/Using_CSS_transitions) has actually started. - Also available via the [`ontransitionstart`](/ko/docs/Web/API/GlobalEventHandlers/ontransitionstart) property. - -## 명세 - -{{Specifications}} - -## 브라우저 호환성 - -{{Compat}} - -## 같이 보기 - -- {{domxref("Element")}} diff --git a/files/ko/web/api/htmlmediaelement/canplay_event/index.md b/files/ko/web/api/htmlmediaelement/canplay_event/index.md deleted file mode 100644 index e7edae5e79010d..00000000000000 --- a/files/ko/web/api/htmlmediaelement/canplay_event/index.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: "HTMLMediaElement: canplay" -slug: Web/API/HTMLMediaElement/canplay_event ---- - -{{APIRef("HTMLMediaElement")}} - -`canplay` 이벤트는 user agent 가 media 를 재생할 수 있을 때 발생된다. 그러나, 컨텐츠의 추가 버퍼링을 위한 정지 없이 media 를 끝까지 재생하기에는, 로드된 데이터가 충분하지 않을 것으로 추산한다. - -## General info - -- Specification - - : [HTML5 media](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplay) -- Interface - - : Event -- Bubbles - - : No -- Cancelable - - : No -- Target - - : Element -- Default Action - - : None. - -## Properties - -| Property | Type | Description | -| ------------------------------- | -------------------------- | ------------------------------------------------------ | -| `target` {{readonlyInline}} | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree). | -| `type` {{readonlyInline}} | {{domxref("DOMString")}} | The type of event. | -| `bubbles` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event normally bubbles or not. | -| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event is cancellable or not. | - -## Related Events - -- {{event("playing")}} -- {{event("waiting")}} -- {{event("seeking")}} -- {{event("seeked")}} -- {{event("ended")}} -- {{event("loadedmetadata")}} -- {{event("loadeddata")}} -- {{event("canplay")}} -- {{event("canplaythrough")}} -- {{event("durationchange")}} -- {{event("timeupdate")}} -- {{event("play")}} -- {{event("pause")}} -- {{event("ratechange")}} -- {{event("volumechange")}} -- {{event("suspend")}} -- {{event("emptied")}} -- {{event("stalled")}} diff --git a/files/ko/web/api/htmlmediaelement/canplaythrough_event/index.md b/files/ko/web/api/htmlmediaelement/canplaythrough_event/index.md deleted file mode 100644 index c29b504bd2bfe4..00000000000000 --- a/files/ko/web/api/htmlmediaelement/canplaythrough_event/index.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: "HTMLMediaElement: canplaythrough" -slug: Web/API/HTMLMediaElement/canplaythrough_event ---- - -{{APIRef("HTMLMediaElement")}} - -`canplaythrough` 이벤트는 user agent 가 media 를 재생할 수 있을 때 발생되며, 컨텐츠의 추가 버퍼링을 위한 정지 없이 media 를 끝까지 재생하기에 로드된 데이터가 충분할 것으로 추산한다. - -## General info - -- Specification - - : [HTML5 media](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplaythrough) -- Interface - - : Event -- Bubbles - - : No -- Cancelable - - : No -- Target - - : Element -- Default Action - - : None. - -## Properties - -| Property | Type | Description | -| ------------------------------- | -------------------------- | ------------------------------------------------------ | -| `target` {{readonlyInline}} | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree). | -| `type` {{readonlyInline}} | {{domxref("DOMString")}} | The type of event. | -| `bubbles` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event normally bubbles or not. | -| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event is cancellable or not. | - -## Related Events - -- {{event("playing")}} -- {{event("waiting")}} -- {{event("seeking")}} -- {{event("seeked")}} -- {{event("ended")}} -- {{event("loadedmetadata")}} -- {{event("loadeddata")}} -- {{event("canplay")}} -- {{event("canplaythrough")}} -- {{event("durationchange")}} -- {{event("timeupdate")}} -- {{event("play")}} -- {{event("pause")}} -- {{event("ratechange")}} -- {{event("volumechange")}} -- {{event("suspend")}} -- {{event("emptied")}} -- {{event("stalled")}} diff --git a/files/ko/web/api/htmlmediaelement/index.md b/files/ko/web/api/htmlmediaelement/index.md deleted file mode 100644 index 67b25d158f1ce8..00000000000000 --- a/files/ko/web/api/htmlmediaelement/index.md +++ /dev/null @@ -1,232 +0,0 @@ ---- -title: HTMLMediaElement -slug: Web/API/HTMLMediaElement ---- - -{{APIRef("HTML DOM")}} - -**`HTMLMediaElement`** 는 오디오와 비디오에 통용되는 미디어 관련 확장성을 제공하기 위해 {{domxref("HTMLElement")}}에 메소드와 프로퍼티를 추가한 인터페이스입니다. {{domxref("HTMLVideoElement")}} 와 {{domxref("HTMLAudioElement")}} 는 이 인터페이스를 상속합니다. - -{{InheritanceDiagram(600, 120)}} - -## 속성(Properties) - -_이 인터페이스는 {{domxref("HTMLElement")}}, {{domxref("Element")}}, {{domxref("Node")}}, and {{domxref("EventTarget")}}의 프로퍼티들도 모두 상속합니다._ - -- {{domxref("HTMLMediaElement.audioTracks")}} - - : {{domxref("AudioTrackList")}}는 엘레먼트의 {{domxref("AudioTrack")}} 객체의 목록입니다. -- {{domxref("HTMLMediaElement.autoplay")}} - - - : 미디어가 준비된 즉시 재생할 것인지 결정하는 [`autoplay`](/ko/docs/Web/HTML/Element/video#autoplay) 속성에 연결된 {{jsxref("Boolean")}}값입니다. - > [!NOTE] - > 오디오(또는 오디오가 있는 비디오)를 자동으로 재생하는 사이트는 사용자에게 그리 탐탁치 않은 경험일 수 있습니다, 그러므로 가능한 한 지양해야합니다. 자동 재생 기능을 제공하려면, 사전 동의(사용자에게 기능을 켜도록 함)를 받아야 합니다. 의외로 이 점은 사용자의 조작에 의해 미디어 엘레먼츠를 늦게 생성하는 경우 유용할 수 있습니다. - -- {{domxref("HTMLMediaElement.buffered")}} {{readonlyinline}} - - : `buffered` 프로퍼티에 접근한 시점에 브라우저가 버퍼에 담고 있는 미디어 소스의 구간 데이터를 나타내는 {{domxref("TimeRanges")}} 객체를 반환합니다. -- {{domxref("HTMLMediaElement.controller")}} - - : 미디어 엘레먼트에 할당된 {{domxref("MediaController")}} 객체를 반환하거나 없다면 null을 반환합니다. -- {{domxref("HTMLMediaElement.controls")}} - - : 미디어 엘레먼트에 컨트롤를 표시할지 결정하는 [`controls`](/ko/docs/Web/HTML/Element/video#controls) HTML 속성 값을 {{jsxref('Boolean')}}으로 반환합니다. -- {{domxref("HTMLMediaElement.controlsList")}} {{readonlyinline}} - - : 브라우저가 미디어 엘레먼트에 자체 컨트롤을 표시할 때 어떤 컨트롤을 보여주거나 숨길 지 결정하는 {{domxref("DOMTokenList")}}를 반환합니다. `DOMTokenList` 는 `nodownload`, `nofullscreen`, `noremoteplayback` 값을 가질 수 있습니다. -- {{domxref("HTMLMediaElement.crossOrigin")}} - - : {{domxref("DOMString")}}미디어 엘레먼트의 [CORS 설정](/ko/docs/Web/HTML/CORS_settings_attributes)값을 반환합니다. -- {{domxref("HTMLMediaElement.currentSrc")}} {{readonlyinline}} - - : 현재 선택된 미디어 소스 URL의 절대 경로를 {{domxref("DOMString")}}로 반환합니다. -- {{domxref("HTMLMediaElement.currentTime")}} - - : 현재 재생 시점을 초 단위로 표현한 `double`값입니다. 이 값을 세팅하여 재생 시점을 변경할 수 있습니다. -- {{domxref("HTMLMediaElement.defaultMuted")}} - - : {{jsxref('Boolean')}} 기본적으로 음소거 상태인지 표시하는 [`muted`](/ko/docs/Web/HTML/Element/video#muted) HTML 속성 값을 {{jsxref('Boolean')}}으로 반환합니다. -- {{domxref("HTMLMediaElement.defaultPlaybackRate")}} - - : 미디어 기본 재생 배속을 `double` 값으로 반환합니다. -- {{domxref("HTMLMediaElement.disableRemotePlayback")}} - - : Is a {{jsxref('Boolean')}} that sets or returns the remote playback state, indicating whether the media element is allowed to have a remote playback UI. -- {{domxref("HTMLMediaElement.duration")}} {{readonlyinline}} - - : 미디어의 전체 길이를 초 단위로 `double` 값으로 반환합니다. 재생 가능한 미디어가 없을 경우 0을 반환합니다. -- {{domxref("HTMLMediaElement.ended")}} {{readonlyinline}} - - : 미디어 재생 완료 여부를 {{jsxref('Boolean')}} 값으로 반환합니다. -- {{domxref("HTMLMediaElement.error")}} {{readonlyinline}} - - : 마지막으로 발생한 {{domxref("MediaError")}} 객체를 반환합니다. 발생한 에러가 없을 경우 `null`을 반환합니다. -- {{domxref("HTMLMediaElement.loop")}} - - : 미디어의 반복 재생을 결정하는 HTML 속성 [`loop`](/ko/docs/Web/HTML/Element/video#loop) 값을{{jsxref('Boolean')}}으로 반환합니다. -- {{domxref("HTMLMediaElement.mediaGroup")}} - - : 미디어가 속한 그룹을 나타내는 [`mediagroup`](/ko/docs/Web/HTML/Element/video#mediagroup) 속성을 {{domxref("DOMString")}} 값으로 반환합니다. 같은 그룹에 속한 미디어들은 동일한 {{domxref('MediaController')}}에 의해 제어됩니다. -- {{domxref("HTMLMediaElement.mediaKeys")}} {{readonlyinline}} {{experimental_inline}} - - : {{domxref("MediaKeys")}} 객체 또는 `null`을 반환합니다. MediaKeys는 재생할 미디어 데이터를 복호화 하는데 사용합니다. -- {{domxref("HTMLMediaElement.mozAudioCaptured")}} {{readonlyinline}} {{non-standard_inline}} - - : 오디오 스트림 캡쳐 여부를 {{jsxref('Boolean')}} 값으로 반환합니다. (Mozilla 전용 비표준 속성.) -- {{domxref("HTMLMediaElement.mozFragmentEnd")}} {{non-standard_inline}} - - : MediaElement의 `currentSrc`에 fragment URI가 존재하는 경우 fragment end time을 `double` 값으로 반환합니다. 없을 경우 미디어 길이를 반환합니다. (Mozilla 전용 비표준 속성) -- {{domxref("HTMLMediaElement.mozFrameBufferLength")}} {{non-standard_inline}} {{deprecated_inline}} - - : `MozAudioAvailable` 이벤트 발생시마다 반환된 framebuffer의 샘플 숫자를 `unsigned long` 로 반환한다. 이 숫자는 모든 오디오 채널의 총합이며, 기본값은 채널 수 \* 1024(예, 2 채널 \* 1024 샘플 = 2048)이다.레이턴시가 낮은 경우 `mozFrameBufferLength` 를 더 큰 값으로 지정할 수도 있습니다. 범위는 512에서 16384 사이입니다. 범위를 넘어서는 값은 Error를 발생시킵니다. [loadedmetadata](/ko/docs/Web/Events/loadedmetadata) 이벤트가 발생할 때 새 값을 지정하는 것이 적절합니다. 오디오 정보는 알고 있지만 재생 시작 전 또는 `MozAudioAvailable` 이벤트가 발생하기 전 시점이죠. -- {{domxref("HTMLMediaElement.mozSampleRate")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}} - - : 디지털 샘플링 주파수 값을 `double`로 반환합니다. 예를 들어 CD 오디오의 경우 초당 44100 샘플을 가집니다. -- {{domxref("HTMLMediaElement.muted")}} - - : 오디오 음소거 여부를 {{jsxref('Boolean')}} 값으로 반환합니다. 음소거라면 `true` 반대는 `false` 를 반환합니다.. -- {{domxref("HTMLMediaElement.networkState")}} {{readonlyinline}} - - : 네트워크를 통한 미디어 데이터 전송 상태를 `unsigned short` (enumeration)으로 반환합니다. -- {{domxref("HTMLMediaElement.paused")}} {{readonlyinline}} - - : 미디어 일시 정지 여부를 {{jsxref('Boolean')}} 값으로 반환합니다. -- {{domxref("HTMLMediaElement.playbackRate")}} - - : 재생 속도를 `double` 값으로 반환합니다. -- {{domxref("HTMLMediaElement.played")}} {{readonlyinline}} - - : 브라우저에서 재생된 미디어 소스 범위를 포함한 {{domxref('TimeRanges')}} 객체를 반환합니다. -- {{domxref("HTMLMediaElement.preload")}} - - : 프리로드 할 데이터 타입을 명시하는 [`preload`](/ko/docs/Web/HTML/Element/video#preload) attribute를 {{domxref("DOMString")}} 값으로 반환한다. 가능한 값들 : `none`, `metadata`, `auto`. -- {{domxref("HTMLMediaElement.preservesPitch")}} {{non-standard_inline}} - - : 사운드 피치 유지 여부를 {{jsxref('Boolean')}} 값으로 반환합니다. `false` 일 경우, 오디오 재생 속도에 따라 변하게 됩니다. Firefox의 (`mozPreservesPitch`)와 WebKit의 (`webkitPreservesPitch`)로 구현되어 있습니다. -- {{domxref("HTMLMediaElement.readyState")}} {{readonlyinline}} - - : 미디어 대기 상태를 `unsigned short` (enumeration)으로 반환합니다. -- {{domxref("HTMLMediaElement.seekable")}} {{readonlyinline}} - - : 탐색(seeking) 가능한 범위를 포함한 {{domxref('TimeRanges')}} 객체를 반환합니다. -- {{domxref("HTMLMediaElement.seeking")}} {{readonlyinline}} - - : 탐색(seeking) 중 여부를 {{jsxref('Boolean')}} 값으로 반환합니다. -- {{domxref("HTMLMediaElement.sinkId")}} {{readonlyinline}} {{experimental_inline}} - - : 별도의 오디오 재생 장치로 출력중이라면 장치의 unique ID를 {{domxref("DOMString")}} 으로 반환합니다. 브라우저로 재생 중이라면 빈 문자열입니다. 이 ID는 {{domxref("MediaDevices.enumerateDevices()")}}에서 반환된 `MediaDeviceInfo.deviceid`, `id-multimedia`, `id-communications` 중 하나입니다. -- {{domxref("HTMLMediaElement.src")}} - - : 미디어 리소스 URL이 포함된 [`src`](/ko/docs/Web/HTML/Element/video#src) attribute를 {{domxref("DOMString")}} 값으로 반환합니다. -- {{domxref("HTMLMediaElement.srcObject")}} - - : 현재 `HTMLMediaElement` 객체에서 재생 중이거나 재생 되었던 미디어를 표현하는 {{domxref('MediaStream')}} 객체를 반환합니다. 없는 경우, `null` 을 반환합니다. -- {{domxref("HTMLMediaElement.textTracks")}} {{readonlyinline}} - - : {{domxref("TextTrack")}} 리스트를 반환합니다. -- {{domxref("HTMLMediaElement.videoTracks")}} {{readonlyinline}} - - - : {{domxref("VideoTrack")}} 리스트를 반환합니다. - > [!NOTE] - > Gecko는 싱글 트랙 재생만을 지원합니다. 또한 트랙 메타데이터 파싱은 Ogg 컨테이너 포맷에서만 가능합니다.. - -- {{domxref("HTMLMediaElement.volume")}} - - : 오디오 볼륨을 `double` 값으로 반환합니다. 0.0 (무음)에서 1.0 (최대크기) 사이 값을 가집니다.. - -### 이벤트 핸들러(Event handlers) - -- {{domxref("HTMLMediaElement.onencrypted")}} - - - : 미디어 암호화 시 호출되는 {{domxref('EventHandler')}}를 설정합니다. - -- {{domxref("HTMLMediaElement.onwaitingforkey")}} - - : 재생하기 위해 복호화 키가 필요한 경우 호출되는 {{domxref('EventHandler')}}를 설정합니다.. - -## 폐기된 속성(Obsolete attributes) - -아래 속성들은 폐기되었으며 브라우저가 지원하더라도 사용되지 않아야 합니다. - -- {{domxref("HTMLMediaElement.initialTime")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}} - - : 최초 재생 지점을 초 단위로 `double` 값으로 반환합니다. -- {{domxref("HTMLMediaElement.mozChannels")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}} - - : 오디오 채널 수를 `double` 값으로 반환합니다. (예, 스테레오인 경우 `2`). - -### 폐기된 이벤트 핸들러(Obsolete event handlers) - -- {{domxref("HTMLMediaElement.onmozinterruptbegin")}} {{non-standard_inline}} {{deprecated_inline}} - - : Audio Channel manager에 의해 재생이 인터럽트 된 경우 호출되는 {{event("Event_handlers", "event handler")}} 를 설정합니다. Firefox 전용 기능으로 Firefox OS에서 추가되었으며 Firefox 55 버전에서 제거되었습니다. -- {{domxref("HTMLMediaElement.onmozinterruptend")}} {{non-standard_inline}} {{deprecated_inline}} - - : 재생 인터럽트가 해결된 경우 호출되는 {{domxref('EventHandler')}}를 설정합니다. Firefox 전용 기능으로 Firefox OS에서 추가되었으며 Firefox 55 버전에서 제거되었습니다. - -## 메소드 - -_This interface also inherits methods from its ancestors {{domxref("HTMLElement")}}, {{domxref('Element')}}, {{domxref('Node')}}, and {{domxref('EventTarget')}}._ - -- {{domxref("HTMLMediaElement.addTextTrack()")}} - - : 미디어 엘리먼트에 본문 트랙(자막 등)을 추가합니다. -- {{domxref("HTMLMediaElement.captureStream()")}} {{experimental_inline}} - - : 미디어 콘텐트의 스트림을 캡쳐하여 {{domxref("MediaStream")}} 객체로 반환합니다. -- {{domxref("HTMLMediaElement.canPlayType()")}} - - : 현재 지정된 미디어 타입을 재생할 수 있는지 확인합니다. -- {{domxref("HTMLMediaElement.fastSeek()")}} - - : 입력된 시간으로 바로 이동합니다. -- {{domxref("HTMLMediaElement.load()")}} - - : 미디어를 처음으로 리셋하고 [`src`](/ko/docs/Web/HTML/Element/video#src) 어트리뷰트 또는 {{HTMLElement("source")}} 엘리먼트로 전달된 소스 중 최적의 소스를 선택합니다. -- {{domxref("HTMLMediaElement.mozCaptureStream()")}} {{non-standard_inline}} - - : \[enter description] -- {{domxref("HTMLMediaElement.mozCaptureStreamUntilEnded()")}} {{non-standard_inline}} - - : \[enter description] -- {{domxref("HTMLMediaElement.mozGetMetadata()")}} {{non-standard_inline}} - - : Returns {{jsxref('Object')}}, which contains properties that represent metadata from the playing media resource as `{key: value}` pairs. A separate copy of the data is returned each time the method is called. This method must be called after the [loadedmetadata](/ko/docs/Web/Events/loadedmetadata) event fires. -- {{domxref("HTMLMediaElement.pause()")}} - - : 미디어 재생을 일시 정지합니다. -- {{domxref("HTMLMediaElement.play()")}} - - : 미디어를 재생합니다. -- {{domxref("HTMLMediaElement.seekToNextFrame()")}} {{non-standard_inline}} {{experimental_inline}} - - : 미디어의 다음 프레임으로 이동합니다. 비표준이며 실험적인 이 기능은 미디어를 읽고 렌더링 하는 속도를 조절할 수 있게 하거나 프레임별로 필터링 등 추가적인 기능을 수행할 수 있게 합니다. -- {{domxref("HTMLMediaElement.setMediaKeys()")}} {{experimental_inline}} - - : 미디어 복호화에 필요한 키를 지정합니다. {{jsxref("Promise")}} 객체를 반환합니다. -- {{domxref("HTMLMediaElement.setSinkId()")}} {{experimental_inline}} - - : 오디오를 출력할 장치의 ID를 지정합니다. {{jsxref("Promise")}} 객체를 반환합니다. 어플리케이션이 특정 장치를 사용할 수 있는 경우에만 동작합니다. - -## 폐기된 메소드 - -아래 메소드들은 폐기되었습니다. 브라우저가 지원하더라도 사용하면 안됩니다. - -- {{domxref("HTMLMediaElement.mozLoadFrom()")}} {{non-standard_inline}} {{deprecated_inline}} - - : Mozilla 구현체에서만 동작하는 이 메소드는 다른 미디어 엘리먼트에서 데이터를 로드합니다. `load()` 메소드와 유사하게 동작하지만 리소스 선택 알고리즘만 다릅니다. 엘리먼트의 소스를 다른 엘리먼트의 `currentSrc`를 바라보게 합니다. 지정된 엘리먼트의 캐시 및 버퍼에 담긴 데이터에도 모두 접근할 수 있으며 이 말은 즉 다운로드 된 모든 데이터를 공유한다는 의미입니다. - -## 이벤트 - -_부모 엘리먼트 {{domxref("HTMLElement")}}에서 상속받은 이벤트와_ {{domxref('GlobalEventHandlers')}}에 정의된 이벤트를 믹스인합니다. [`addEventListener()`](/ko/docs/Web/API/EventTarget/addEventListener)를 통해 이벤트를 수신하거나 `oneventname` 프로퍼티에 리스터를 할당하여 수신합니다. - -- {{domxref("HTMLMediaElement.abort_event", 'abort')}} - - : 에러 외의 원인으로 전체 리소스가 로드 되지 못했을 때 발생합니다. -- {{domxref("HTMLMediaElement.canplay_event", 'canplay')}} - - : User agent가 미디어를 재생 가능한 시점에 발생합니다. 다만 전체 미디어를 재생하기 위해서는 콘텐츠의 버퍼링이 더 필요할 수 있습니다. -- {{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}} - - : 추가 버퍼링 없이 전체 미디어를 재생할 수 있는 시점에 발생합니다. -- {{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}} - - : duration 속성이 변경된 시점에 발생합니다.. -- {{domxref("HTMLMediaElement.emptied_event", 'emptied')}} - - : 미디어가 제거된 시점에 발생합니다. 예를 들어 미디어가 이미 (부분적으로라도) 로드 되었는데. {{domxref("HTMLMediaElement.load()")}} 메소드 호출로 재 로드할 경우 발생합니다. -- {{domxref("HTMLMediaElement.ended_event", 'ended')}} - - : (\