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 index 4cdf231b0a..62487bdb6a 100644 --- 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 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 index 726be4c8fa..eabbcd1e7f 100644 --- 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 index f7db9a0421..f3626fb210 100644 --- 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 the list @@ -24,12 +24,12 @@ Example: ``` -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 index 238ac5fe8e..77fc0f5e7c 100644 --- 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 ``` -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 index 93ae862fd6..7476de912f 100644 --- 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
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 index e127bc0efa..8020317309 100644 --- 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 index 15238fcf4f..693693af66 100644 --- 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,6 +1,6 @@ -First, let's make HTML/CSS. +首先，使用 HTML/CSS。 -Each component of the time would look great in its own ``: +每个时间组件都限制在 ``： ```html
@@ -8,9 +8,9 @@ Each component of the time would look great in its own ``:
``` -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 index ba6e3a848e..c2f1d5f3c1 100644 --- 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 index 4e77fb5cbf..0139b0eb3c 100644 --- 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', '
  • 2
  • 3
    • '); 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 index 543cd3e466..dd6764fbdf 100644 --- 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 `
  • 2
  • 3
    • ` between two `
  • ` here: +编写需要插入的文本代码 `
  • 2
  • 3
    • `，插入到两个 `
  • ` 之中： ```html
      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 index 25dd58b0cf..8d5120a2a4 100644 --- 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 ``, 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 `` (the name field). -4. Now insert nodes in the right order by `.append(...sortedRows)`. +1. 使用 `table.querySelectorAll('tr')` 获取所有 ``，然后生成数组，因为我们需要用到数组方法。 +2. 第一个 TR（`table.rows[0]`）实际上是 table 头，所以我们需要调用 `.slice(1)` 裁剪掉。 +3. 比较 `` 的内容（字符在字符集中的序号），进行排序。 +4. 现在使用 `.append(...sortedRows)` 插入节点。 - Tables always have an implicit element, so we need to take it and insert into it: a simple `table.append(...)` would fail. + table 永远包含 元素，所以我们需要考虑到它，并将内容插入到其中：单纯的调用 `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 index 41d6fca29c..359f6d5b99 100644 --- 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: -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 index 62c3386d84..cb4dac9151 100644 --- 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 index 938d534703..d04e691ee8 100644 --- 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
        @@ -13,8 +13,8 @@ Create a function `clear(elem)` that removes everything from the element.
      ``` 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 index 6b85168b99..8d076e0d9a 100644 --- 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 ``: according to the spec only table-specific tags are allowed. So the browser adds `"aaa"` *before* the `
      `. +浏览器会自动修复它。但 `
      ` 可能会没有文本：根据 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 `
      `. +通过浏览器开发者工具很容易就能在 DOM 找到答案。它显示出 `"aaa"` 在 `
      ` 前面。 -The HTML standard specifies in detail how to process bad HTML, and such behavior of the browser is correct. +HTML 标准规范详细描述了对于异常的 HTML 会如何处理，以及浏览器的行为是否合乎规范。 diff --git a/2-ui/1-document/07-modifying-document/5-why-aaa/task.md b/2-ui/1-document/07-modifying-document/5-why-aaa/task.md index 03064ed2c3..2e71290151 100644 --- a/2-ui/1-document/07-modifying-document/5-why-aaa/task.md +++ b/2-ui/1-document/07-modifying-document/5-why-aaa/task.md @@ -2,9 +2,9 @@ importance: 1 --- -# Why does "aaa" remain? +# 为什么留下 "aaa"？ -Run the example. Why does `table.remove()` not delete the text `"aaa"`? +运行下面例子，为什么 `table.remove()` 没有删除 `"aaa"` 文本？ ```html height=100 run
      @@ -15,9 +15,9 @@ Run the example. Why does `table.remove()` not delete the text `"aaa"`?
      ``` diff --git a/2-ui/1-document/07-modifying-document/6-create-list/solution.md b/2-ui/1-document/07-modifying-document/6-create-list/solution.md index 1669be18fa..b871bd6824 100644 --- a/2-ui/1-document/07-modifying-document/6-create-list/solution.md +++ b/2-ui/1-document/07-modifying-document/6-create-list/solution.md @@ -1 +1 @@ -Please note the usage of `textContent` to assign the `
    • ` content. +请留意 `textContent` 复制 `
    • ` 内容的用法。 diff --git a/2-ui/1-document/07-modifying-document/6-create-list/task.md b/2-ui/1-document/07-modifying-document/6-create-list/task.md index 43b0a34a78..9296618984 100644 --- a/2-ui/1-document/07-modifying-document/6-create-list/task.md +++ b/2-ui/1-document/07-modifying-document/6-create-list/task.md @@ -2,18 +2,18 @@ importance: 4 --- -# Create a list +# 创建一个列表 -Write an interface to create a list from user input. +编写一个接口，根据用户输入生成一个列表。 -For every list item: +每一个列表项： -1. Ask a user about its content using `prompt`. -2. Create the `
    • ` with it and add it to `
        `. -3. Continue until the user cancels the input (by pressing `key:Esc` or CANCEL in prompt). +1. 使用 `prompt` 询问用户输入的内容。 +2. 创建 `
      • ` 并添加到 `
          `。 +3. 重复以上两步，直到用户输入取消指令（按下 `key:Esc` 或者 prompt 的 CANCEL）。 -All elements should be created dynamically. +所有元素应该都是动态创建的。 -If a user types HTML-tags, they should be treated like a text. +如果把用户比作 HTML 标签，那应该相当于一个文本。 [demo src="solution"] diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md b/2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md index d29636ee2a..73c50c6968 100644 --- a/2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md +++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md @@ -1,4 +1,4 @@ -The easiest way to walk the object is to use recursion. +使用递归很容易在对象间游走。 1. [The solution with innerHTML](sandbox:innerhtml). 2. [The solution with DOM](sandbox:build-tree-dom). diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md b/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md index 6b60c096f9..f6e51da03d 100644 --- a/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md +++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md @@ -2,11 +2,11 @@ importance: 5 --- -# Create a tree from the object +# 利用对象创建节点树 -Write a function `createTree` that creates a nested `ul/li` list from the nested object. +编写一个函数 `createTree` 将嵌套的对象生成 `ul/li` 的嵌套列表。 -For instance: +例如： ```js let data = { @@ -28,24 +28,24 @@ let data = { }; ``` -The syntax: +语句： ```js let container = document.getElementById('container'); *!* -createTree(container, data); // creates the tree in the container +createTree(container, data); // 在 container 中创建树。 */!* ``` -The result (tree) should look like this: +结果（树）看起来像这样： [iframe border=1 src="build-tree-dom"] -Choose one of two ways of solving this task: +选择其中一种方式来完成这个任务： -1. Create the HTML for the tree and then assign to `container.innerHTML`. -2. Create tree nodes and append with DOM methods. +1. 通过树创建 HTML 然后派发给 `container.innerHTML`。 +2. 创建节点树然后插入到 DOM 中。 -Would be great if you could do both. +如果两种方式都尝试一下就更好。 -P.S. The tree should not have "extra" elements like empty `
            ` for the leaves. +P.S. 树应该没有“额外”的元素，像空的 `
              ` 没有列表项。 diff --git a/2-ui/1-document/07-modifying-document/8-tree-count/solution.md b/2-ui/1-document/07-modifying-document/8-tree-count/solution.md index 43b9a362c8..f6dff21836 100644 --- a/2-ui/1-document/07-modifying-document/8-tree-count/solution.md +++ b/2-ui/1-document/07-modifying-document/8-tree-count/solution.md @@ -1 +1 @@ -To append text to each `
            • ` we can alter the text node `data`. +为每个 `
            • ` 插入文本，我们可以改变文本节点 `data`。 diff --git a/2-ui/1-document/07-modifying-document/8-tree-count/task.md b/2-ui/1-document/07-modifying-document/8-tree-count/task.md index d6343bf3bd..841e4887d7 100644 --- a/2-ui/1-document/07-modifying-document/8-tree-count/task.md +++ b/2-ui/1-document/07-modifying-document/8-tree-count/task.md @@ -2,12 +2,12 @@ importance: 5 --- -# Show descendants in a tree +# 在树中显示后代 -There's a tree organized as nested `ul/li`. +这里有一棵由嵌套的 `ul/li` 组成的树。 -Write the code that adds to each `
            • ` the number of its descendants. Skip leaves (nodes without children). +编写代码在 `
            • ` 添加后代数量的数字。跳过一些叶子（如果节点没有后代节点）。 -The result: +最终结果： [iframe border=1 src="solution"] diff --git a/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md b/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md index 67bb5e13d1..a18a2c0e1a 100644 --- a/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md +++ b/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md @@ -1,9 +1,9 @@ -We'll create the table as a string: `"...
              "`, and then assign it to `innerHTML`. +我们用字符串创建 table：`"...
              "`，然后派发给 `innerHTML`。 -The algorithm: +算法如下： -1. Create the table header with `` and weekday names. -1. Create the date object `d = new Date(year, month-1)`. That's the first day of `month` (taking into account that months in JavaScript start from `0`, not `1`). -2. First few cells till the first day of the month `d.getDay()` may be empty. Let's fill them in with ``. -3. Increase the day in `d`: `d.setDate(d.getDate()+1)`. If `d.getMonth()` is not yet the next month, then add the new cell `` to the calendar. If that's a Sunday, then add a newline "</tr><tr>". -4. If the month has finished, but the table row is not yet full, add empty `` into it, to make it square. +1. 通过 `` 创建 table 头和周末名字。 +1. 创建一个日期对象 `d = new Date(year, month-1)`。它是`月份`的第一天（注意 JavaScript 计算月份是从 `0` 开始，而不是 `1`）。 +2. 将每月第一天的日期生成单元格，直到月份的第一天 `d.getDay()` 是空的。然后将它们填充到 ``。 +3. 天数增长 `d`：`d.setDate(d.getDate()+1)`。如果 `d.getMonth()` 不是下一个月，就添加新单元格 `` 到日历表中，如果那天是星期日，就添加一行 "</tr><tr>"。 +4. 如果天数遍历完但 table 没有填满，就用空的 `` 补齐。 diff --git a/2-ui/1-document/07-modifying-document/9-calendar-table/task.md b/2-ui/1-document/07-modifying-document/9-calendar-table/task.md index 37b1a60d23..8c65ec9327 100644 --- a/2-ui/1-document/07-modifying-document/9-calendar-table/task.md +++ b/2-ui/1-document/07-modifying-document/9-calendar-table/task.md @@ -2,16 +2,16 @@ importance: 4 --- -# Create a calendar +# 创建一个日历 -Write a function `createCalendar(elem, year, month)`. +编写一个函数 `createCalendar(elem, year, month)`。 -The call should create a calendar for the given year/month and put it inside `elem`. +调用后会创建一个日历并添加到 `elem`。 -The calendar should be a table, where a week is ``, and a day is ``. The table top should be `` with weekday names: the first day should be Monday, and so on till Sunday. +日历应该是一个 table，周用 `` 表示，天用 `` 表示。table 顶部是 `` 表示周几：第一天应该是星期一，直到星期日。 -For instance, `createCalendar(cal, 2012, 9)` should generate in element `cal` the following calendar: +例如，`createCalendar(cal, 2012, 9)` 应该在 `cal` 生成一个日历，如下： [iframe height=210 src="solution"] -P.S. For this task it's enough to generate the calendar, should not yet be clickable. +P.S. 这里只要生成一个展示日历就好，不需要点击交互功能。 diff --git a/2-ui/1-document/07-modifying-document/article.md b/2-ui/1-document/07-modifying-document/article.md index 38e1199eb1..db0cb27357 100644 --- a/2-ui/1-document/07-modifying-document/article.md +++ b/2-ui/1-document/07-modifying-document/article.md @@ -1,18 +1,18 @@ -# Modifying the document +# 修改文档内容 -DOM modifications is the key to create "live" pages. +DOM（document object model 文档对象模型，此文中全部以缩写 DOM 表示）的可修改性是网页能“实时”刷新的关键。 -Here we'll see how to create new elements "on the fly" and modify the existing page content. +以下的例子向我们展示如何创建一个“弹幕”新元素并且修改它在页面中展示的内容。 -First we'll see a simple example and then explain the methods. +这里我们先展示出一个建单的例子，随后会逐一向你说明。 -## Example: show a message +## 例子：展示一条信息 -For a start, let's see how to add a message on the page that looks nicer than `alert`. +首先，我们可以看到一条信息，它看起来像是一个美化版的 `alert`。 -Here's how it will look: +这里是它的样式： -```html autorun height="80" +```html