Translate some chapters to [Jul 17, 2020] Part-6 (javascript-tutorial#795) (javascript-tutorial#804)

jtchen2k · MartinsYong · bemself · web-flow · commit f9cb07bf282f · 2020-09-21T14:02:24.000+08:00
* Minor error fix in 1-js/05-data-types/02-number/article.md * Translated 2-ui/3-event-details/6-pointer-events * Translated some chapters to [Jul 17, 2020] Part-6 javascript-tutorial#795 * Translation improvement * Minor error fix in 1-js/05-data-types/02-number/article.md * Minor fix in 2-ui/3-event-details/1-mouse-events-basics * Minor fix in 2-ui/3-event-details/1-mouse-events-basics * Update 2-ui/1-document/01-browser-environment/article.md Co-authored-by: Martin <a545067127@outlook.com> * Apply suggestions from code review Co-authored-by: Martin <a545067127@outlook.com> * Apply suggestions from code review Took some suggestions Co-authored-by: Martin <a545067127@outlook.com> * Apply suggestions from code review Commit from suggestions Co-authored-by: Martin <a545067127@outlook.com> * Apply suggestions from code review Commit from suggestion Co-authored-by: bemself <45781328+bemself@users.noreply.github.com> * Update 2-ui/3-event-details/6-pointer-events/article.md Co-authored-by: bemself <45781328+bemself@users.noreply.github.com> * Apply suggestions from code review 已补充 commit。 Co-authored-by: Martin <a545067127@outlook.com> * Update article.md * Update article.md * Update article.md * Update index.html * Update article.md * Update article.md * Update article.md * Update article.md * Update article.md * Update article.md Co-authored-by: Martin <a545067127@outlook.com> Co-authored-by: bemself <45781328+bemself@users.noreply.github.com> Co-authored-by: LeviDing <imdingxuewen@gmail.com>
diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md
@@ -58,9 +58,9 @@ DOM 规范解释了文档的结构，并提供了操作文档的对象。有的
 ```
 
 ```smart header="用于样式的 CSSOM"
-There's also a separate specification, [CSS Object Model (CSSOM)](https://www.w3.org/TR/cssom-1/) for CSS rules and stylesheets, that explains how they are represented as objects, and how to read and write them.
+另外也有一份针对 CSS 规则和样式表的、单独的规范 [CSS Object Model (CSSOM)](https://www.w3.org/TR/cssom-1/)，这份规范解释了如何将 CSS 表示为对象，以及如何读写这些对象。
 
-当我们修改文档的样式规则时，CSSOM 与 DOM 是一起使用的。但实际上，很少需要 CSSOM，因为 we rarely need to modify CSS rules from JavaScript (usually we just add/remove CSS classes, not modify their CSS rules), but that's also possible.
+当我们修改文档的样式规则时，CSSOM 与 DOM 是一起使用的。但实际上，很少需要 CSSOM，因为我们很少需要从 JavaScript 中修改 CSS 规则（我们通常只是添加/移除一些 CSS 类，而不是直接修改其中的 CSS 规则），但这也是可行的。
 ```
 
 ## 浏览器对象模型（BOM）
diff --git a/2-ui/1-document/07-modifying-document/article.md b/2-ui/1-document/07-modifying-document/article.md
@@ -48,20 +48,20 @@ DOM 修改是创建“实时”页面的关键。
     let textNode = document.createTextNode('Here I am');
     ```
 
-Most of the time we need to create element nodes, such as the `div` for the message.
+大多数情况下，我们需要为此消息创建像 `div` 这样的元素节点。
 
 ### 创建一条消息
 
-Creating the message div takes 3 steps:
+创建一个消息 `div` 分为 3 个步骤：
 
 ```js
-// 1. Create <div> element
+// 1. 创建 <div> 元素
 let div = document.createElement('div');
 
-// 2. Set its class to "alert"
+// 2. 将元素的类设置为 "alert"
 div.className = "alert";
 
-// 3. Fill it with the content
+// 3. 填充消息内容
 div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
 ```
 
@@ -97,19 +97,19 @@ div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
 </script>
 ```
 
-Here we called `append` on `document.body`, but we can call `append` method on any other element, to put another element into it. For instance, we can append something to `<div>` by calling `div.append(anotherElement)`.
+在这个例子中，我们对 `document.body` 调用了 `append` 方法。不过我们可以在其他任何元素上调用 `append` 方法，以将另外一个元素放入到里面。例如，通过调用 `div.append(anotherElement)`，我们便可以在 `<div>` 末尾添加一些内容。
 
-Here are more insertion methods, they specify different places where to insert:
+这里是更多的元素插入方法，指明了不同的插入位置：
 
-- `node.append(...nodes or strings)` — 在 `node` **末尾** 插入节点或字符串，
-- `node.prepend(...nodes or strings)` — 在 `node` **开头** 插入节点或字符串，
-- `node.before(...nodes or strings)` — 在 `node` **前面** 插入节点或字符串，
-- `node.after(...nodes or strings)` — 在 `node` **后面** 插入节点或字符串，
-- `node.replaceWith(...nodes or strings)` — 将 `node` 替换为给定的节点或字符串。
+- `node.append(...nodes or strings)` —— 在 `node` **末尾** 插入节点或字符串，
+- `node.prepend(...nodes or strings)` —— 在 `node` **开头** 插入节点或字符串，
+- `node.before(...nodes or strings)` —— 在 `node` **前面** 插入节点或字符串，
+- `node.after(...nodes or strings)` —— 在 `node` **后面** 插入节点或字符串，
+- `node.replaceWith(...nodes or strings)` —— 将 `node` 替换为给定的节点或字符串。
 
-Arguments of these methods are an arbitrary list of DOM nodes to insert, or text strings (that become text nodes automatically).
+这些方法的参数可以是一个要插入的任意的 DOM 节点列表，或者文本字符串（会被自动转换成文本节点）。
 
-Let's see them in action.
+让我们在实际应用中看一看。
 
 下面是使用这些方法将列表项添加到列表中，以及将文本添加到列表前面和后面的示例：
 
@@ -163,7 +163,7 @@ after
 </script>
 ```
 
-Please note: the text is inserted "as text", not "as HTML", with proper escaping of characters such as `<`, `>`.
+请注意：这里的文字都被“作为文本”插入，而不是“作为 HTML 代码”。因此像 `<`、`>` 这样的符号都会被作转义处理来保证正确显示。
 
 所以，最终的 HTML 为：
 
@@ -179,7 +179,7 @@ Please note: the text is inserted "as text", not "as HTML", with proper escaping
 
 所以，这些方法只能用来插入 DOM 节点或文本片段。
 
-But what if we'd like to insert an HTML string "as html", with all tags and stuff working, in the same manner as `elem.innerHTML` does it?
+但如果我们想要将内容“作为 HTML 代码插入”，让内容中的所有标签和其他东西都像使用 `elem.innerHTML` 所表现的效果一样，那应该怎么办呢？
 
 ## insertAdjacentHTML/Text/Element
 
diff --git a/2-ui/2-events/01-introduction-browser-events/article.md b/2-ui/2-events/01-introduction-browser-events/article.md
@@ -12,7 +12,7 @@
 - `mousemove` —— 当鼠标移动时。
 
 **键盘事件**：
-- `keydown` and `keyup` -- when a keyboard key is pressed and released.
+- `keydown` 和 `keyup` —— 当按下和松开一个按键时。
 
 **表单（form）元素事件**：
 - `submit` —— 当访问者提交了一个 `<form>` 时。
@@ -107,7 +107,7 @@ HTML 特性不是编写大量代码的好位置，因此我们最好创建一个
     </script>
     ```
 
-In the first example, the HTML attribute is used to initialize the `button.onclick`, while in the second example -- the script, that's all the difference.
+在第一个例子中，`button.onclick` 是通过 HTML 特性（attribute）初始化的，而在第二个例子中是通过脚本初始化的。这是它们唯一的不同之处。
 
 **因为这里只有一个 `onclick` 属性，所以我们无法分配更多事件处理程序。**
 
@@ -140,7 +140,7 @@ In the first example, the HTML attribute is used to initialize the `button.oncli
 
 如果你刚开始写事件 —— 请注意一些细微之处。
 
-We can set an existing function as a handler:
+我们可以将一个现存的函数用作处理程序：
 
 ```js
 function sayThanks() {
@@ -150,7 +150,7 @@ function sayThanks() {
 elem.onclick = sayThanks;
 ```
 
-But be careful: the function should be assigned as `sayThanks`, not `sayThanks()`.
+但要注意：函数应该是以 `sayThanks` 的形式进行赋值，而不是 `sayThanks()`。
 
 ```js
 // 正确
diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md
@@ -213,11 +213,11 @@ alert(event.clientX); // undefined，未知的属性被忽略了！
 
 通常事件是在队列中处理的。也就是说：如果浏览器正在处理 `onclick`，这时发生了一个新的事件，例如鼠标移动了，那么它会被排入队列，相应的 `mousemove` 处理程序将在 `onclick` 事件处理完成后被调用。
 
-值得注意的例外情况就是，一个事件是在另一个事件中发起的。例如 using `dispatchEvent`. Such events are processed immediately: the new event handlers are called, and then the current event handling is resumed.
+值得注意的例外情况就是，一个事件是在另一个事件中发起的。例如使用 `dispatchEvent`。这类事件将会被立即处理，即在新的事件处理程序被调用之后，恢复到当前的事件处理程序。
 
-For instance, in the code below the `menu-open` event is triggered during the `onclick`.
+例如，在下面的代码中，`menu-open` 事件是在 `onclick` 事件执行过程中被调用的。
 
-It's processed immediately, without waiting for `onlick` handler to end:
+它会被立即执行，而不必等待 `onclick` 处理程序结束：
 
 
 ```html run autorun
@@ -234,7 +234,7 @@ It's processed immediately, without waiting for `onlick` handler to end:
     alert(2);
   };
 
-  // triggers between 1 and 2
+  // 在 1 和 2 之间触发
   document.addEventListener('menu-open', () => alert('nested'));
 </script>
 ```
@@ -243,11 +243,11 @@ It's processed immediately, without waiting for `onlick` handler to end:
 
 请注意，嵌套事件 `menu-open` 会在 `document` 上被捕获。嵌套事件的传播（propagation）和处理先被完成，然后处理过程才会返回到外部代码（`onclick`）。
 
-这不只是与 `dispatchEvent` 有关，还有其他情况。If an event handler calls methods that trigger to other events -- they are too processed synchronously, in a nested fashion.
+这不只是与 `dispatchEvent` 有关，还有其他情况。如果一个事件处理程序进一步触发了其它的事件 —— 它们同样也会被以嵌套的方式同步处理。
 
-Let's say we don't like it. We'd want `onclick` to be fully processed first, independently from `menu-open` or any other nested events.
+不过有时候，这并不是我们期望的结果。我们想让 `onclick` 不受 `menu-open` 或者其它嵌套事件的影响，优先被处理完毕。
 
-然后，我们可以将 `dispatchEvent`（或另一个触发事件的调用）放在 `onclick` 末尾，或者最好将其包装到零延迟的 `setTimeout` 中：
+那么，我们就可以将 `dispatchEvent`（或另一个触发事件的调用）放在 `onclick` 末尾，或者最好将其包装到零延迟的 `setTimeout` 中：
 
 ```html run
 <button id="menu">Menu (click me)</button>
diff --git a/2-ui/3-event-details/1-mouse-events-basics/article.md b/2-ui/3-event-details/1-mouse-events-basics/article.md
@@ -50,32 +50,32 @@
 
 与点击相关的事件始终具有 `button` 属性，该属性允许获取确切的鼠标按钮。 
 
-We usually don't use it for `click` and `contextmenu` events, because the former happens only on left-click, and the latter -- only on right-click.
+通常我们不在 `click` 和 `contextmenu` 事件中使用这一属性，因为前者只在单击鼠标左键时触发，后者只在单击鼠标右键时触发。
 
-From the other hand, `mousedown` and `mouseup` handlers we may need `event.button`, because these events trigger on any button, so `button` allows to distinguish between "right-mousedown" and "left-mousedown".
+不过，在 `mousedown` 和 `mouseup` 事件中则可能需要用到 `event.button`，因为这两个事件在任何按键上都会触发，所以我们可以使用 `button` 属性来区分是左键单击还是右键单击。
 
-The possible values of `event.button` are:
+`event.button` 的所有可能值如下：
 
-| Button state | `event.button` |
+| 鼠标按键状态 | `event.button` |
 |--------------|----------------|
-| Left button (primary) | 0 |
-| Middle button (auxillary) | 1 |
-| Right button (secondary) | 2 |
-| X1 button (back) | 3 |
-| X2 button (forward) | 4 |
+| 左键 (主要按键) | 0 |
+| 中键 (辅助按键) | 1 |
+| 右键 (次要按键) | 2 |
+| X1 键 (后退按键) | 3 |
+| X2 键 (前进按键) | 4 |
 
-Most mouse devices only have the left and right buttons, so possible values are `0` or `2`. Touch devices also generate similar events when one taps on them.
+大多数鼠标设备只有左键和右键，对应的值就是 `0` 和 `2`。触屏设备中的点按操作也会触发类似的事件。
 
-Also there's `event.buttons` property that has all currently pressed buttons as an integer, one bit per button. In practice this property is very rarely used, you can find details at [MDN](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons) if you ever need it.
+另外，还有一个 `event.buttons` 属性，其中以整数的形式存储着当前所有按下的鼠标按键，每个按键一个比特位。在实际开发中，很少会用到这个属性，如果有需要的话，你可以在 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/buttons) 中找到更多细节。
 
-```warn header="The outdated `event.which`"
-Old code may use `event.which` property that's an old non-standard way of getting a button, with possible values:
+```warn header="过时的 `event.which`"
+一些老代码可能会使用 `event.which` 属性来获得按下的按键。这是一个古老的非标准的方式，具有以下可能值：
 
-- `event.which == 1` – left button,
-- `event.which == 2` – middle button,
-- `event.which == 3` – right button.
+- `event.which == 1` —— 鼠标左键，
+- `event.which == 2` —— 鼠标中键，
+- `event.which == 3` —— 鼠标右键。
 
-As of now, `event.which` is deprecated, we shouldn't use it.
+现在，`event.which` 已经被弃用了，不应再使用它。
 ```
 
 ## 组合键：shift，alt，ctrl，meta
@@ -136,9 +136,9 @@ As of now, `event.which` is deprecated, we shouldn't use it.
 1. 相对于窗口的坐标：`clientX` 和 `clientY`。
 2. 相对于文档的坐标：`pageX` 和 `pageY`。
 
-We already covered the difference between them in the chapter <info:coordinates>.
+我们已经在 <info:coordinates> 中解释过它们之间的区别。
 
-In short, document-relative coordinates `pageX/Y` are counted from the left-upper corner of the document, and do not change when the page is scrolled, while `clientX/Y` are counted from the current window left-upper corner. When the page is scrolled, they change.
+简而言之，相对于文档的坐标 `pageX/Y` 以文档的左上角为参照物，并且同一位置的坐标不随页面的滚动而改变。相对于窗口的坐标 `clientX/Y` 以当前窗口的左上角为参照物，并且同一位置的坐标会随着页面的滚动而改变。
 
 例如，如果我们有一个大小为 500x500 的窗口，并且鼠标在左上角，那么 `clientX` 和 `clientY` 均为 `0`，无论页面如何滚动。
 
diff --git a/2-ui/3-event-details/6-pointer-events/article.md b/2-ui/3-event-details/6-pointer-events/article.md
diff --git a/2-ui/3-event-details/6-pointer-events/slider.view/index.html b/2-ui/3-event-details/6-pointer-events/slider.view/index.html
