javascript-tutorial · D-kylin · Aug 14, 2018 · Aug 14, 2018 · Aug 14, 2018 · Aug 14, 2018
diff --git a/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/task.md b/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/task.md
@@ -2,9 +2,9 @@ importance: 5
 
 ---
 
-# Get the attribute
+# 获取一个特性
 
-Write the code to select the element with `data-widget-name` attribute from the document and to read its value.
+编写代码从文档中获取一个包含 `data-widget-name` 特性的元素，并且读取它的值。
 
 ```html run
 <!DOCTYPE html>

diff --git a/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.md b/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.md
@@ -1,9 +1,9 @@
 
-First, we need to find all external references.
+首先，我们需要找到所有外部引用。
 
-There are two ways.
+这里有两种办法。
 
-The first is to find all links using `document.querySelectorAll('a')` and then filter out what we need:
+第一种是使用 `document.querySelectorAll('a')` 然后过滤出我们需要的那部分：
 
 ```js
 let links = document.querySelectorAll('a');
@@ -22,13 +22,13 @@ for (let link of links) {
 }
 ```
 
-Please note: we use `link.getAttribute('href')`. Not `link.href`, because we need the value from HTML.
+请注意：我们用的是 `link.getAttribute('href')`。而不是 `link.href`，因为我们需要的是 HTML 上的值。
 
-...Another, simpler way would be to add the checks to CSS selector:
+……除此之外，有一个更简便的方式是利用 CSS 选择器的伪类选择器：
 
 ```js
-// look for all links that have :// in href
-// but href doesn't start with http://internal.com
+// 查找所有 href 中包含：// 的链接
+// 但 href 不是以 http://internal.com 开头
 let selector = 'a[href*="://"]:not([href^="http://internal.com"])';
 let links = document.querySelectorAll(selector);
 

diff --git a/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/task.md b/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/task.md
@@ -2,15 +2,15 @@ importance: 3
 
 ---
 
-# Make external links orange
+# 使外来链接变橙色
 
-Make all external links orange by altering their `style` property.
+改变所有外来链接的 `style` 属性，使链接变橙色。
 
-A link is external if:
-- It's `href` has `://` in it
-- But doesn't start with `http://internal.com`.
+如果一个链接是外来的：
+- 这个 `href` 包含有 `://`
+- 但不是以 `http://internal.com` 开头。
 
-Example:
+例如：
 
 ```html run
 <a name="list">the list</a>
@@ -24,12 +24,12 @@ Example:
 </ul>
 
 <script>
-  // setting style for a single link
+  // 简单地为这些链接设置样式
   let link = document.querySelector('a');
   link.style.color = 'orange';
 </script>
 ```
 
-The result should be:
+结果应该是这样的：
 
 [iframe border=1 height=180 src="solution"]
diff --git a/2-ui/1-document/06-dom-attributes-and-properties/article.md b/2-ui/1-document/06-dom-attributes-and-properties/article.md
@@ -8,9 +8,9 @@
 
 ## DOM 属性
 
-我们已经见过内置的 DOM 属性了。它的数量很庞大，但是 DOM 技术实现上没有限制我们对这个对象进行添加 — 如果我们需要额外的属性的话。
+我们已经见过内置的 DOM 属性了。它的数量很庞大，但是 DOM 技术实现上没有限制我们对这个对象进行添加 —— 如果我们需要额外的属性的话。
 
-DOM 节点是一个标准的 JavaScript 对象。我们可以 alert 它们。
+DOM 节点是一个标准的 JavaScript 对象。我们可以 alert 它。
 
 在这个例子中，让我们在 `document.body` 创建一个新的属性：
 
@@ -51,9 +51,9 @@ document.body.sayHi(); // Hello, I'm BODY
 
 ## HTML 特性
 
-在 HTML 语言中，标签可能拥有特性。当浏览器读取 HTML 文本并根据标签生成 DOM 对象，它会辨别 **标准化** 特性然后以此创建 DOM 属性。
+在 HTML 语言中，标签可能拥有特性。当浏览器读取 HTML 文本并根据标签生成 DOM 对象，它会辨别**标准化**特性然后以此创建 DOM 属性。
 
-因此当一个元素有 `id` 或其他 **标准化** 特性，会生相应的 DOM 属性。但是非 **标准化** 的特性则会被忽略。
+因此当一个元素有 `id` 或其他**标准化**特性，会生相应的 DOM 属性。但是非**标准化**的特性则会被忽略。
 
 例如：
 ```html run
@@ -87,10 +87,10 @@ document.body.sayHi(); // Hello, I'm BODY
 
 答案是肯定的。以下几个方法是针对元素特性的操作：
 
-- `elem.hasAttribute(name)` — 检验是否拥这个特性。
-- `elem.getAttribute(name)` — 获取到这个特性值。
-- `elem.setAttribute(name, value)` — 设置这个特性值。
-- `elem.removeAttribute(name)` — 移除这个特性。
+- `elem.hasAttribute(name)` —— 检验是否拥这个特性。
+- `elem.getAttribute(name)` —— 获取到这个特性值。
+- `elem.setAttribute(name, value)` —— 设置这个特性值。
+- `elem.removeAttribute(name)` —— 移除这个特性。
 
 以上的几个方法实际上也是 HTML 的原生方法。
 
@@ -108,7 +108,7 @@ document.body.sayHi(); // Hello, I'm BODY
 </body>
 ```
 
-HTML 特性有几个特征
+HTML 特性有几个特征：
 
 - 它们的书写是大小写不敏感的（`id` 也可以写作 `ID`）。
 - 他们的值只能是字符串。
@@ -135,7 +135,7 @@ HTML 特性有几个特征
 
 请注意：
 
-1. `getAttribute('About')` — 这里的第一个字母是大写的，但是在 HTML 里是全小写表示。这也就说明：特性的键名是大小写不敏感的。
+1. `getAttribute('About')` —— 这里的第一个字母是大写的，但是在 HTML 里是全小写表示。这也就说明：特性的键名是大小写不敏感的。
 2. 我们可以赋予它任何值，这里我们把 `"123"` 作为它的值。
 3. 所有 attributes 都有一个 `outerHTML` 给我们设置它在页面上的展示内容。
 4. `attributes` 以 `name` 和 `value` 这样的键—值对收集在一个可迭代对象里。
@@ -186,7 +186,7 @@ HTML 特性有几个特征
 - 改变特性值 `value` 会更新到属性上。
 - 但是直接改变属性的值却不会作用在特性的值上。
 
-这种“特征”是相当便利的，因为用户可能会经常修改 `value`，假设我们想要覆盖 HTML 上“原始值”，只需要修改特性的值。
+这种“特征”是相当便利的，因为用户可能会经常修改 `value`，假设我们想要覆盖 HTML上“原始值”，只需要修改特性的值。
 
 ## DOM 属性的类型
 
@@ -358,12 +358,12 @@ div.setAttribute('order-state', 'canceled');
 
 使用 `data-*` 的特性值是一个合法值，保存着自定义数据。
 
-请注意我们不但可以读取，还能修改 data-attributes。上面这个例子的最后一行： `(*)` 会变成蓝色。
+请注意我们不但可以读取，还能修改 data-attributes。上面这个例子的最后一行：`(*)` 会变成蓝色。
 
 ## 总结
 
-- Attributes — 写在 HTML 中。
-- Properties — 是一个 DOM 对象。
+- Attributes —— 写在 HTML 中。
+- Properties —— 是一个 DOM 对象。
 
 简略的对比：
 
@@ -374,13 +374,13 @@ div.setAttribute('order-state', 'canceled');
 
 attributes 的一些方法：
 
-- `elem.hasAttribute(name)` — 检查是否存在这个特性
-- `elem.getAttribute(name)` — 获取这个特性
-- `elem.setAttribute(name, value)` — 把这个特性设置为 name 值
-- `elem.removeAttribute(name)` — 移除这个特性
-- `elem.attributes` 所有特性的集合
+- `elem.hasAttribute(name)` —— 检查是否存在这个特性
+- `elem.getAttribute(name)` —— 获取这个特性
+- `elem.setAttribute(name, value)` —— 把这个特性设置为 name 值
+- `elem.removeAttribute(name)` —— 移除这个特性
+- `elem.attributes` —— 所有特性的集合
 
-对于大多数需求, DOM 属性已经可以给予很好的支持。应当在 DOM 属性实在无法满足开发需求的情况下才使用特性，比如以下情况：
+对于大多数需求，DOM 属性已经可以给予很好的支持。应当在 DOM 属性实在无法满足开发需求的情况下才使用特性，比如以下情况：
 
 - 我们需要一个非标准化的特性。但是如果我们用 `data-` 来设置特性值，那就要使用 `dataset` 来获取属性值。
 - 我们想要读取到 HTML 的展示内容。比如 `href` 属性总是一个绝对路径，但是我们只想要相对路径。
diff --git a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md
@@ -1,8 +1,8 @@
-Answer: **1 and 3**.
+回答：**1 和 3**。
 
-Both commands result in adding the `text` "as text" into the `elem`.
+所有命令行都是将 `text` “作为文本”添加到 `elem`。
 
-Here's an example:
+这里有个简单的例子：
 
 ```html run height=80
 <div id="elem1"></div>

diff --git a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md
@@ -2,11 +2,11 @@ importance: 5
 
 ---
 
-# createTextNode vs innerHTML vs textContent
+# 对比 createTextNode，innerHTML，textContent
 
-We have an empty DOM element `elem` and a string `text`.
+我们有一个空的 DOM 元素 `elem` 和一个字符串 `text`。
 
-Which of these 3 commands do exactly the same?
+以下这三个命令行的结果是一样的吗？
 
 1. `elem.append(document.createTextNode(text))`
 2. `elem.innerHTML = text`

diff --git a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md
@@ -1,16 +1,16 @@
-First, let's make HTML/CSS.
+首先，使用 HTML/CSS。
 
-Each component of the time would look great in its own `<span>`:
+每个时间组件都限制在 `<span>`：
 
 ```html
 <div id="clock">
   <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
 </div>
 ```
 
-Also we'll need CSS to color them.
+我们还会用 CSS 丰富样式。
 
-The `update` function will refresh the clock, to be called by `setInterval` every second:
+`update` 会刷新时钟，它调用 `setInterval` 每秒刷新一次：
 
 ```js
 function update() {
@@ -32,9 +32,9 @@ function update() {
 }
 ```
 
-In the line `(*)` we every time check the current date. The calls to `setInterval` are not reliable: they may happen with delays.
+在这行 `(*)` 我们每秒检查当前时间。调用 `setInterval` 并不是完全可靠：它有可能发生延迟现象。
 
-The clock-managing functions:
+时钟管理函数：
 
 ```js
 let timerId;
@@ -50,4 +50,4 @@ function clockStop() {
 }
 ```
 
-Please note that the call to `update()` is not only scheduled in `clockStart()`, but immediately run in the line `(*)`. Otherwise the visitor would have to wait till the first execution of `setInterval`. And the clock would be empty till then.
+请留意 `update()`，它不单在 `clockStart()` 被间隔器调用，也会在 `(*)` 立即调用一次。如果不是这样，只有在 `setInterval` 第一次执行周期时，才能看到时钟，在此之前时钟一直都是空的。
diff --git a/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md b/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md
@@ -2,8 +2,8 @@ importance: 4
 
 ---
 
-# Colored clock with setInterval
+# setInterval 的彩色时钟
 
-Create a colored clock like here:
+创建一个彩色时钟：
 
 [iframe src="solution" height=60]
diff --git a/2-ui/1-document/07-modifying-document/11-append-to-list/solution.md b/2-ui/1-document/07-modifying-document/11-append-to-list/solution.md
@@ -1,7 +1,7 @@
 
-When we need to insert a piece of HTML somewhere, `insertAdjacentHTML` is the best fit.
+当我们需要在 HTML 某处插入元素，`insertAdjacentHTML` 是最好方案。
 
-The solution:
+具体做法：
 
 ```js
 one.insertAdjacentHTML('afterend', '<li>2</li><li>3</li>');

diff --git a/2-ui/1-document/07-modifying-document/11-append-to-list/task.md b/2-ui/1-document/07-modifying-document/11-append-to-list/task.md
@@ -2,9 +2,9 @@ importance: 5
 
 ---
 
-# Insert the HTML in the list
+# HTML 中插入列表
 
-Write the code to insert `<li>2</li><li>3</li>` between two `<li>` here:
+编写需要插入的文本代码 `<li>2</li><li>3</li>`，插入到两个 `<li>` 之中：
 
 ```html
 <ul id="ul">

diff --git a/2-ui/1-document/07-modifying-document/12-sort-table/solution.md b/2-ui/1-document/07-modifying-document/12-sort-table/solution.md
@@ -1,4 +1,4 @@
-The solution is short, yet may look a bit tricky, so here I provide it with extensive comments:
+这个方法很精简，但是看起来有点难理解，所以我添加了一些注释：
 
 
 ```js
@@ -9,11 +9,11 @@ let sortedRows = Array.from(table.rows)
 table.tBodies[0].append(...sortedRows);
 ```
 
-1. Get all `<tr>`, like `table.querySelectorAll('tr')`, then make an array from them, cause we need array methods.
-2. The first TR (`table.rows[0]`) is actually a table header, so we take the rest by `.slice(1)`.
-3. Then sort them comparing by the content of the first `<td>` (the name field).
-4. Now insert nodes in the right order by `.append(...sortedRows)`.
+1. 使用 `table.querySelectorAll('tr')` 获取所有 `<tr>`，然后生成数组，因为我们需要用到数组方法。
+2. 第一个 TR（`table.rows[0]`）实际上是 table 头，所以我们需要调用 `.slice(1)` 裁剪掉。
+3. 比较 `<td>` 的内容（字符在字符集中的序号），进行排序。
+4. 现在使用 `.append(...sortedRows)` 插入节点。
 
-    Tables always have an implicit <tbody> element, so we need to take it and insert into it: a simple `table.append(...)` would fail.
+    table 永远包含 <tbody> 元素，所以我们需要考虑到它，并将内容插入到其中：单纯的调用 `table.append(...)` 将会失败。
 
-    Please note: we don't have to remove them, just "re-insert", they leave the old place automatically.
+    请留意：我们没有移除操作，只进行“重复插入”，它们会将旧的位置的内容自动去除。
diff --git a/2-ui/1-document/07-modifying-document/12-sort-table/task.md b/2-ui/1-document/07-modifying-document/12-sort-table/task.md
@@ -34,6 +34,6 @@ There's a table:
 </tr>
 </table>
 
-There may be more rows in it.
+可能会有更多的行数。
 
-Write the code to sort it by the `"name"` column.
+编写代码对 `"name"` 列进行排序。
diff --git a/2-ui/1-document/07-modifying-document/4-clear-elem/solution.md b/2-ui/1-document/07-modifying-document/4-clear-elem/solution.md
@@ -1,5 +1,5 @@
 
-First, let's see how *not* to do it:
+首先我们看看**错误**的做法：
 
 ```js
 function clear(elem) {
@@ -9,11 +9,11 @@ function clear(elem) {
 }
 ```
 
-That won't work, because the call to `remove()` shifts the collection `elem.childNodes`, so elements start from the index `0` every time. But `i` increases, and some elements will be skipped.
+这是无效的，因为调用 `remove()` 从前面开始移除 `elem.childNodes` 集合里元素，元素的起始下标一直都是 `0`，但是 `i` 却一直在增长，有的元素会直接被忽略了。
 
-The `for..of` loop also does the same.
+用 `for..of` 循环的结果也跟上面一样。
 
-The right variant could be:
+正确的做法是：
 
 ```js
 function clear(elem) {
@@ -23,7 +23,7 @@ function clear(elem) {
 }
 ```
 
-And also there's a simpler way to do the same:
+这里还有一种更简便的方法，也能达到我们需要的效果。
 
 ```js
 function clear(elem) {

diff --git a/2-ui/1-document/07-modifying-document/4-clear-elem/task.md b/2-ui/1-document/07-modifying-document/4-clear-elem/task.md
@@ -2,9 +2,9 @@ importance: 5
 
 ---
 
-# Clear the element
+# 清除元素
 
-Create a function `clear(elem)` that removes everything from the element.
+创建一个函数 `clear(elem)` 用来移除元素里的内容。
 
 ```html run height=60
 <ol id="elem">
@@ -13,8 +13,8 @@ Create a function `clear(elem)` that removes everything from the element.
 </ol>
 
 <script>
-  function clear(elem) { /* your code */ }
+  function clear(elem) { /* 你的代码 */ }
 
-  clear(elem); // clears the list
+  clear(elem); // 清除列表
 </script>
 ```
diff --git a/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md b/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md
@@ -1,9 +1,9 @@
-The HTML in the task is incorrect. That's the reason of the odd thing.
+HTML 在这个任务中是错误的，这也是造成怪异的原因所在。
 
-The browser has to fix it automatically. But there may be no text inside the `<table>`: according to the spec only table-specific tags are allowed. So the browser adds `"aaa"` *before* the `<table>`.
+浏览器会自动修复它。但 `<table>` 可能会没有文本：根据 table 的特殊规范，这是允许的。所以浏览器会在 `<table>` **前面**添加 `"aaa"`。
 
-Now it's obvious that when we remove the table, it remains.
+现在当我们移除 table 时，它就被保留下来了。
 
-The question can be easily answered by exploring the DOM using the browser tools. It shows `"aaa"` before the `<table>`.
+通过浏览器开发者工具很容易就能在 DOM 找到答案。它显示出 `"aaa"` 在 `<table>` 前面。
 
-The HTML standard specifies in detail how to process bad HTML, and such behavior of the browser is correct.
+HTML 标准规范详细描述了对于异常的 HTML 会如何处理，以及浏览器的行为是否合乎规范。