feat: update translation

leviding · leviding · commit 947f4760bb78 · 2022-04-17T16:30:58.000+08:00
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html
@@ -10,7 +10,7 @@
   <div id="carousel" class="carousel">
     <button class="arrow prev">⇦</button>
     <div class="gallery">
-      <ul class="images">
+      <ul>
         <li><img src="https://en.js.cx/carousel/1.png"></li>
         <li><img src="https://en.js.cx/carousel/2.png"></li>
         <li><img src="https://en.js.cx/carousel/3.png"></li>
diff --git a/2-ui/2-events/03-event-delegation/article.md b/2-ui/2-events/03-event-delegation/article.md
@@ -1,7 +1,7 @@
 
 # 事件委托
 
-捕获和冒泡允许我们实现一种被称为 **事件委托** 的强大的事件处理模式。
+捕获和冒泡允许我们实现最强大的事件处理模式之一，即 **事件委托** 模式。
 
 这个想法是，如果我们有许多以类似方式处理的元素，那么就不必为每个元素分配一个处理程序 —— 而是将单个处理程序放在它们的共同祖先上。
 
diff --git a/2-ui/2-events/04-default-browser-action/3-image-gallery/solution.view/gallery.css b/2-ui/2-events/04-default-browser-action/3-image-gallery/solution.view/gallery.css
@@ -4,16 +4,6 @@ body {
   font: 75%/120% sans-serif;
 }
 
-h2 {
-  font: bold 190%/100% sans-serif;
-  margin: 0 0 .2em;
-}
-
-h2 em {
-  font: normal 80%/100% sans-serif;
-  color: #999999;
-}
-
 #largeImg {
   border: solid 1px #ccc;
   width: 550px;
diff --git a/2-ui/2-events/04-default-browser-action/3-image-gallery/source.view/gallery.css b/2-ui/2-events/04-default-browser-action/3-image-gallery/source.view/gallery.css
@@ -4,16 +4,6 @@ body {
   font: 75%/120% sans-serif;
 }
 
-h2 {
-  font: bold 190%/100% sans-serif;
-  margin: 0 0 .2em;
-}
-
-h2 em {
-  font: normal 80%/100% sans-serif;
-  color: #999999;
-}
-
 #largeImg {
   border: solid 1px #ccc;
   width: 550px;
@@ -32,4 +22,13 @@ h2 em {
 
 #thumbs a:hover {
   border-color: #FF9900;
-}
+}
+
+#thumbs li {
+  list-style: none;
+}
+
+#thumbs {
+  margin: 0;
+  padding: 0;
+}
diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md
@@ -266,7 +266,7 @@ alert(event.clientX); // undefined，未知的属性被忽略了！
 </script>
 ```
 
-现在，`dispatchEvent` 在当前代码执行完成之后异步运行，包括 `mouse.onclick`，因此，事件处理程序是完全独立的。
+现在，`dispatchEvent` 在当前代码执行完成之后异步运行，包括 `menu.onclick`，因此，事件处理程序是完全独立的。
 
 输出顺序变成：1 -> 2 -> nested。
 
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
@@ -41,9 +41,9 @@
 
 在测试台下面记录了所有的鼠标事件，如果它们之间的延迟时间超过 1 秒，那么它们会被水平分割线分开。
 
-我们还可以看出 `button` 属性允许检测鼠标按钮，演示示例如下。
+我们还可以看出 `button` 属性允许检测鼠标按键，演示示例如下。
 
-<input onmousedown="return logMouse(event)" onmouseup="return logMouse(event)" onclick="return logMouse(event)" oncontextmenu="return logMouse(event)" ondblclick="return logMouse(event)" value="Click me with the right or the left mouse button" type="button"> <input onclick="logClear('test')" value="Clear" type="button"> <form id="testform" name="testform"> <textarea style="font-size:12px;height:150px;width:360px;"></textarea></form>
+<input onmousedown="return logMouse(event)" onmouseup="return logMouse(event)" onclick="return logMouse(event)" oncontextmenu="return logMouse(event)" ondblclick="return logMouse(event)" value="使用鼠标左键或右键点击我" type="button"> <input onclick="logClear('test')" value="Clear" type="button"> <form id="testform" name="testform"> <textarea style="font-size:12px;height:150px;width:360px;"></textarea></form>
 ```
 
 ## 鼠标按钮
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html
@@ -6,7 +6,7 @@
   <style>
     body {
       height: 2000px;
-      /* the tooltip should work after page scroll too */
+      /* 在页面滚动后，工具提示也应该正常展示 */
     }
 
     .tooltip {
@@ -49,16 +49,16 @@
 <body>
 
 
-  <div data-tooltip="Here is the house interior" id="house">
-    <div data-tooltip="Here is the roof" id="roof"></div>
+  <div data-tooltip="这是房子的内部" id="house">
+    <div data-tooltip="这里是屋顶" id="roof"></div>
 
-    <p>Once upon a time there was a mother pig who had three little pigs.</p>
+    <p>从前有一个猪妈妈，她养了三只小猪。</p>
 
-    <p>The three little pigs grew so big that their mother said to them, "You are too big to live here any longer. You must go and build houses for yourselves. But take care that the wolf does not catch you."
+    <p>三只小猪长得很快快，妈妈对它们说：“你们太大了，不能住在这里了，你们自己去盖房子吧，但要小心不要让狼抓到你们。</p>
 
-    <p>The three little pigs set off. "We will take care that the wolf does not catch us," they said.</p>
+    <p>三只小猪出发了。 “我们会注意不要让狼抓住我们，”他们说。</p>
 
-    <p>Soon they met a man. <a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Read on…">Hover over me</a></p>
+    <p>很快，它们遇到了一个男人。<a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="继续阅读...">鼠标悬浮在我上</a></p>
 
   </div>
 
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/source.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/source.view/index.html
@@ -6,7 +6,7 @@
   <style>
     body {
       height: 2000px;
-      /* the tooltip should work after page scroll too */
+      /* 在页面滚动后，工具提示也应该正常展示 */
     }
 
     .tooltip {
@@ -49,21 +49,21 @@
 <body>
 
 
-  <div data-tooltip="Here is the house interior" id="house">
-    <div data-tooltip="Here is the roof" id="roof"></div>
+  <div data-tooltip="这是房子的内部" id="house">
+    <div data-tooltip="这里是屋顶" id="roof"></div>
 
-    <p>Once upon a time there was a mother pig who had three little pigs.</p>
+    <p>从前有一个猪妈妈，她养了三只小猪。</p>
 
-    <p>The three little pigs grew so big that their mother said to them, "You are too big to live here any longer. You must go and build houses for yourselves. But take care that the wolf does not catch you."
+    <p>三只小猪长得很快快，妈妈对它们说：“你们太大了，不能住在这里了，你们自己去盖房子吧，但要小心不要让狼抓到你们。</p>
 
-    <p>The three little pigs set off. "We will take care that the wolf does not catch us," they said.</p>
+    <p>三只小猪出发了。 “我们会注意不要让狼抓住我们，”他们说。</p>
 
-    <p>Soon they met a man. <a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Read on…">Hover over me</a></p>
+    <p>很快，它们遇到了一个男人。<a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="继续阅读...">鼠标悬浮在我上</a></p>
 
   </div>
 
   <script>
-    // ...your code...
+    // ...你的代码...
   </script>
 
 </body>
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/task.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/task.md
@@ -13,10 +13,10 @@ importance: 5
 例如：
 
 ```html
-<div data-tooltip="Here – is the house interior" id="house">
-  <div data-tooltip="Here – is the roof" id="roof"></div>
+<div data-tooltip="这是房子的内部" id="house">
+  <div data-tooltip="这里是屋顶" id="roof"></div>
   ...
-  <a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Read on…">Hover over me</a>
+  <a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Read on…">鼠标悬浮在我上</a>
 </div>
 ```
 
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js
@@ -88,7 +88,7 @@ class HoverIntent {
     if (speed < this.sensitivity) {
       clearInterval(this.checkSpeedInterval);
       this.isHover = true;
-      this.over.call(this.elem, event);
+      this.over.call(this.elem);
     } else {
       // speed fast, remember new coordinates as the previous ones
       this.prevX = this.lastX;
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
@@ -80,7 +80,7 @@
 </div>
 ```
 
-如果我们在 `#parent` 上，然后将鼠标指针更深入地移入 `#child`，但是在 `#parent` 上会得到 `mouseout`！
+如果我们在 `#parent` 上，然后将鼠标指针更深入地移入 `#child`，在 `#parent` 上我们会得到 `mouseout`！
 
 ![](mouseover-to-child.svg)
 
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/script.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/script.js
@@ -3,7 +3,7 @@ parent.onmouseover = parent.onmouseout = parent.onmousemove = handler;
 
 function handler(event) {
   let type = event.type;
-  while (type < 11) type += ' ';
+  while (type.length < 11) type += ' ';
 
   log(type + " target=" + event.target.id)
   return false;
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.css b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.css
@@ -10,7 +10,7 @@ html, body {
   float: left;
 }
 
-/* heroes and the ball (dragables) */
+/* 英雄和球（可拖动） */
 
 .hero {
   background: url(https://js.cx/drag-heroes/heroes.png);
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/article.md b/2-ui/3-event-details/4-mouse-drag-and-drop/article.md
@@ -124,7 +124,7 @@ ball.style.top = pageY - ball.offsetHeight / 2 + 'px';
 
     ```js
     // onmousemove
-    // 球具有 position:absoute
+    // 球具有 position: absolute
     ball.style.left = event.pageX - *!*shiftX*/!* + 'px';
     ball.style.top = event.pageY - *!*shiftY*/!* + 'px';
     ```
diff --git a/2-ui/3-event-details/7-keyboard-events/article.md b/2-ui/3-event-details/7-keyboard-events/article.md
@@ -107,7 +107,7 @@ document.addEventListener('keydown', function(event) {
 
 为了可靠地跟踪与受键盘布局影响的字符，使用 `event.key` 可能是一个更好的方式。
 
-另一方面，`event.code` 的好处是，即使访问者更改了语言，绑定到物理键位置的 `event.code` 会始终保持不变。因此，即使在切换了语言的情况下，依赖于它的热键也能正常工作。
+另一方面，`event.code` 的好处是，绑定到物理键位置的 `event.code` 会始终保持不变。因此，即使在切换了语言的情况下，依赖于它的热键也能正常工作。
 
 我们想要处理与布局有关的按键？那么 `event.key` 是我们必选的方式。
 
diff --git a/2-ui/3-event-details/7-keyboard-events/keyboard-dump.view/index.html b/2-ui/3-event-details/7-keyboard-events/keyboard-dump.view/index.html
@@ -28,11 +28,10 @@
 
     <input type="text" placeholder="Press keys here" id="kinput">
 
-    <textarea id="area"></textarea>
+    <textarea id="area" readonly></textarea>
     <input type="button" value="Clear" onclick="area.value = ''" />
   </form>
   <script src="script.js"></script>
 
-
 </body>
 </html>
diff --git a/5-network/05-fetch-crossorigin/article.md b/5-network/05-fetch-crossorigin/article.md
@@ -207,10 +207,11 @@ Access-Control-Expose-Headers: Content-Length,API-Key
 
 因此，为了避免误解，任何“非标准”请求 —— 浏览器不会立即发出在过去无法完成的这类请求。即在它发送这类请求前，会先发送“预检（preflight）”请求来请求许可。
 
-预检请求使用 `OPTIONS` 方法，它没有 body，但是有两个 header：
+预检请求使用 `OPTIONS` 方法，它没有 body，但是有三个 header：
 
 - `Access-Control-Request-Method` header 带有非简单请求的方法。
 - `Access-Control-Request-Headers` header 提供一个以逗号分隔的非简单 HTTP-header 列表。
+- `Origin` header 告知了请求来自哪儿。（例如 `https://javascript.info`）
 
 如果服务器同意处理请求，那么它会进行响应，此响应的状态码应该为 200，没有 body，具有 header：
 
diff --git a/5-network/11-websocket/article.md b/5-network/11-websocket/article.md
@@ -1,6 +1,6 @@
 # WebSocket
 
-在 [RFC 6455](http://tools.ietf.org/html/rfc6455) 规范中描述的 `WebSocket` 协议提供了一种在浏览器和服务器之间建立持久连接来交换数据的方法。数据可以作为“数据包”在两个方向上传递，而不会断开连接和其他 HTTP 请求。
+在 [RFC 6455](https://datatracker.ietf.org/doc/html/rfc6455) 规范中描述的 `WebSocket` 协议提供了一种在浏览器和服务器之间建立持久连接来交换数据的方法。数据可以作为“数据包”在两个方向上传递，而不会断开连接和其他 HTTP 请求。
 
 对于需要连续数据交换的服务，例如网络游戏，实时交易系统等，WebSocket 尤其有用。
 

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ html, body {`
`10`	`10`	`float: left;`
`11`	`11`	`}`
`12`	`12`
`13`		`-/* heroes and the ball (dragables) */`
	`13`	`+/* 英雄和球（可拖动） */`
`14`	`14`
`15`	`15`	`.hero {`
`16`	`16`	`background: url(https://js.cx/drag-heroes/heroes.png);`