| ` 作为一个整体被高亮显示。 +======= +Try to move the cursor in and out of table cells and inside them. Fast or slow -- doesn't matter. Only ` | ` as a whole is highlighted unlike the example before.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
```
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside.png b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside.png
index ea57233073..a9d76bebfd 100644
Binary files a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside.png and b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside.png differ
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside@2x.png b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside@2x.png
index 6a17ca99f7..8ef27b83a4 100644
Binary files a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside@2x.png and b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside@2x.png differ
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems.png b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems.png
index babbea5027..b421342bff 100644
Binary files a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems.png and b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems.png differ
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems@2x.png b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems@2x.png
index e61891a5af..8a4c8672f2 100644
Binary files a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems@2x.png and b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems@2x.png differ
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout.png b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout.png
index cf9fa448b1..688dcb48b6 100644
Binary files a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout.png and b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout.png differ
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout@2x.png b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout@2x.png
index a2749d68a5..6cb3c78a34 100644
Binary files a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout@2x.png and b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout@2x.png differ
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child.png b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child.png
index 627f9584a7..975acf4aff 100644
Binary files a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child.png and b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child.png differ
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child@2x.png b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child@2x.png
index 51a917d86e..50725f39cd 100644
Binary files a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child@2x.png and b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child@2x.png differ
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/index.html
index 1e38d693c0..17239b026f 100755
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/index.html
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/index.html
@@ -1,5 +1,5 @@
-
+
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.js b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.js
index 6c3daa5b23..1c1443a7e7 100644
--- a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.js
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.js
@@ -1,3 +1,5 @@
+let isDragging = false;
+
document.addEventListener('mousedown', function(event) {
let dragElement = event.target.closest('.draggable');
@@ -5,16 +7,19 @@ document.addEventListener('mousedown', function(event) {
if (!dragElement) return;
event.preventDefault();
- let coords, shiftX, shiftY;
+
+ dragElement.ondragstart = function() {
+ return false;
+ };
- startDrag(event.clientX, event.clientY);
+ let coords, shiftX, shiftY;
- document.addEventListener('mousemove', onMouseMove);
+ startDrag(dragElement, event.clientX, event.clientY);
- dragElement.onmouseup = function() {
+ function onMouseUp(event) {
finishDrag();
};
-
+
function onMouseMove(event) {
moveAt(event.clientX, event.clientY);
}
@@ -22,25 +27,37 @@ document.addEventListener('mousedown', function(event) {
// on drag start:
// remember the initial shift
// move the element position:fixed and a direct child of body
- function startDrag(clientX, clientY) {
-
- shiftX = clientX - dragElement.getBoundingClientRect().left;
- shiftY = clientY - dragElement.getBoundingClientRect().top;
+ function startDrag(element, clientX, clientY) {
+ if(isDragging) {
+ return;
+ }
+
+ isDragging = true;
+
+ document.addEventListener('mousemove', onMouseMove);
+ element.addEventListener('mouseup', onMouseUp);
- dragElement.style.position = 'fixed';
+ shiftX = clientX - element.getBoundingClientRect().left;
+ shiftY = clientY - element.getBoundingClientRect().top;
- document.body.append(dragElement);
+ element.style.position = 'fixed';
moveAt(clientX, clientY);
};
// switch to absolute coordinates at the end, to fix the element in the document
function finishDrag() {
+ if(!isDragging) {
+ return;
+ }
+
+ isDragging = false;
+
dragElement.style.top = parseInt(dragElement.style.top) + pageYOffset + 'px';
dragElement.style.position = 'absolute';
document.removeEventListener('mousemove', onMouseMove);
- dragElement.onmouseup = null;
+ dragElement.removeEventListener('mouseup', onMouseUp);
}
function moveAt(clientX, clientY) {
@@ -96,4 +113,4 @@ document.addEventListener('mousedown', function(event) {
dragElement.style.top = newY + 'px';
}
-});
+});
\ No newline at end of file
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
index a435079ecf..7607576962 100644
--- 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
@@ -2,11 +2,19 @@
拖放是一个很好的界面解决方案。从复制和移动（参考文件管理）到排序（放入购物车），拖放是一种简洁明了的方法。
+<<<<<<< HEAD
在现代 HTML 标准中，有一个[拖动事件的部分](https://html.spec.whatwg.org/multipage/interaction.html#dnd)。
这很有趣，因为它们允许轻松地解决一些简单的任务，而且允许处理“外部”文件拖放到浏览器中的事件。因此我们可以在 OS 文件管理中获取文件，并将其拖动到浏览器窗口。然后 JavaScript 获取对其内容的访问权限。
但是本地的拖动事件总是有局限性。比如，我们可以把拖动范围限制在某个区域内。而且我们也可以把它变成 "horizontal" 或 "vertical"。还有其他的拖放任务无法通过使用 API 实现。
+=======
+In the modern HTML standard there's a [section about Drag and Drop](https://html.spec.whatwg.org/multipage/interaction.html#dnd) with special events such as `dragstart`, `dragend` and so on.
+
+They are interesting because they allow to solve simple tasks easily, and also allow to handle drag'n'drop of "external" files into the browser. So we can take a file in the OS file-manager and drop it into the browser window. Then JavaScript gains access to its contents.
+
+But native Drag Events also have limitations. For instance, we can't limit dragging by a certain area. Also we can't make it "horizontal" or "vertical" only. There are other drag'n'drop tasks that can't be implemented using that API.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
在这里，我们将看到如何使用鼠标事件实现拖放。并不难。
@@ -14,10 +22,17 @@
拖放基础算法就像这样：
+<<<<<<< HEAD
1. 在可拖动元素上捕获 `mousedown` 事件。
2. 准备要移动的元素（可能创建它的副本或其他任何东西）。
3. 然后在 `mousemove` 上，通过改变 `left/top` 和 `position:absolute` 来移动它。
4. 在 `mouseup`（释放按钮）中 —— 执行所有完成拖放相关的动作。
+=======
+1. Catch `mousedown` on a draggable element.
+2. Prepare the element for moving (maybe create a copy of it or whatever).
+3. Then on `mousemove` move it by changing `left/top` and `position:absolute`.
+4. On `mouseup` (button release) -- perform all actions related to a finished Drag'n'Drop.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
这些是基础。我们可以对其进行拓展，例如，当鼠标在可拖动元素上悬停时，高亮这个元素。
@@ -58,7 +73,11 @@ ball.onmousedown = function(event) { // (1) 启动进程
};
```
+<<<<<<< HEAD
如果我们运行代码，我们会发现一些奇怪的事情。在拖放的一开始，球会 "forks"：我们开始拖动它的 "clone"。
+=======
+If we run the code, we can notice something strange. On the beginning of the drag'n'drop, the ball "forks": we start dragging its "clone".
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
```online
这是一个动作实例：
@@ -94,14 +113,22 @@ ball.ondragstart = function() {
## 修正定位
+<<<<<<< HEAD
在上述例子中，球总是以指针为中心的：
+=======
+In the examples above the ball is always moved so, that it's center is under the pointer:
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
```js
ball.style.left = pageX - ball.offsetWidth / 2 + 'px';
ball.style.top = pageY - ball.offsetHeight / 2 + 'px';
```
+<<<<<<< HEAD
不错，但这存在副作用。我们可以在球的任何地方使用 `mousedown` 来开始拖放。如果在边缘那么做，那么球就会突然“跳”到以指针为中心的位置。
+=======
+Not bad, but there's a side-effect. To initiate the drag'n'drop, we can `mousedown` anywhere on the ball. But if do it at the edge, then the ball suddenly "jumps" to become centered.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
如果我们保持元素相对指针的初始位移，情况会更好。
@@ -119,9 +146,13 @@ ball.style.top = pageY - ball.offsetHeight / 2 + 'px';
let shiftY = event.clientY - ball.getBoundingClientRect().top;
```
+<<<<<<< HEAD
请注意，在 JavaScript 中没有获取文档坐标的方法，因此我们在这里使用相对于窗口的坐标。
2. 然后，在拖动球时，我们将球放置在相对于指针移动的位置上，就像这样：
+=======
+2. Then while dragging we position the ball on the same shift relative to the pointer, like this:
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
```js
// onmousemove
@@ -146,7 +177,12 @@ ball.onmousedown = function(event) {
moveAt(event.pageX, event.pageY);
+<<<<<<< HEAD
// 球中心在 (pageX, pageY) 坐标上
+=======
+ // moves the ball at (pageX, pageY) coordinates
+ // taking initial shifts into account
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
function moveAt(pageX, pageY) {
ball.style.left = pageX - *!*shiftX*/!* + 'px';
ball.style.top = pageY - *!*shiftY*/!* + 'px';
@@ -156,10 +192,17 @@ ball.onmousedown = function(event) {
moveAt(event.pageX, event.pageY);
}
+<<<<<<< HEAD
// (3) 用 mousemove 移动球
document.addEventListener('mousemove', onMouseMove);
// (4) 释放球，移除不需要的处理器
+=======
+ // move the ball on mousemove
+ document.addEventListener('mousemove', onMouseMove);
+
+ // drop the ball, remove unneeded handlers
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
ball.onmouseup = function() {
document.removeEventListener('mousemove', onMouseMove);
ball.onmouseup = null;
@@ -178,19 +221,35 @@ In action (inside `
-
-
-
-```
-
-[在 sandbox](sandbox:readystate) 中的运行示例。
-
-典型输出：
-1. [1] initial readyState:loading
-2. [2] readyState:interactive
-3. [2] DOMContentLoaded
-4. [3] iframe onload
-5. [4] img onload
-6. [4] readyState:complete
-7. [4] window onload
-
-方括号中的数字表示发生这种情况的大致时间。标记为相同数字的事件几乎是同时发生的（+- 几毫秒）。
-
-- `document.readyState` 在 `DOMContentLoaded` 之前会立即变成了 `interactive`。这两个事件的意义实际上是相同的。
-- 当所有资源（`iframe` 和 `img`）都被加载完成后，`document.readyState` 变成了 `complete`。这里我们可以发现，它大约发生在 `img.onload`（`img` 是最后的资源）和 `window.onload` 之间。转换到 `complete` 状态的意义与 `window.onload` 一致。区别在于 `window.onload` 在所有其他 `load` 处理器之后一直有效。
-
-## 总结
-
-页面生命周期事件：
-
-- 当 DOM 准备就绪时，`DOMContentLoaded` 事件就会在 `document` 上触发。在这个阶段，我们可以将 JavaScript 应用于元素。
- - 诸如 `` 或者 `` 会阻塞 DOMContentLoaded，浏览器等待它们执行结束。
- - 图像和其他资源仍然可以继续被加载。
-- 当页面和所有资源被加载时，`window` 上的 `load` 事件会被触发。我们很少使用它，因为通常没有必要去等待那么久。
-- 当用户想要离开页面时，`window` 上的 `beforeunload` 事件会被触发。如果我们取消这个事件，浏览器会询问用户是否真的要离开（比如有未保存的内容）。
-- 当用户最终离开时，`window` 上的 `unload` 事件会被触发。在处理器中，我们只能做一些不会涉及到延迟或询问用户的简单事情。正是由于这个限制，它很少被使用。我们可以用 `navigator.sendBeacon` 来发送网络请求。
-- `document.readyState` 是文档的当前状态，可以在 `readystatechange` 事件中跟踪状态变更：
- - `loading` —— 文档正在被加载。
- - `interactive` —— 文档被解析，大概是与 `DOMContentLoaded` 同时发生，而不是在它之前发生。
- - `complete` —— 文档和资源被加载，大概是与 `window.onload` 同时发生，而不是在它之前发生。
+# Page: DOMContentLoaded, load, beforeunload, unload
+
+The lifecycle of an HTML page has three important events:
+
+- `DOMContentLoaded` -- the browser fully loaded HTML, and the DOM tree is built, but external resources like pictures `
+```
+
+In the example the `DOMContentLoaded` handler runs when the document is loaded, so it can see all the elements, including `
+```
+
+## window.onunload
+
+When a visitor leaves the page, the `unload` event triggers on `window`. We can do something there that doesn't involve a delay, like closing related popup windows.
+
+The notable exception is sending analytics.
+
+Let's say we gather data about how the page is used: mouse clicks, scrolls, viewed page areas, and so on.
+
+Naturally, `unload` event is when the user leaves us, and we'd like to save the data on our server.
+
+There exists a special `navigator.sendBeacon(url, data)` method for such needs, described in the specification
+
+```
+
+The working example is [in the sandbox](sandbox:readystate).
+
+The typical output:
+1. [1] initial readyState:loading
+2. [2] readyState:interactive
+3. [2] DOMContentLoaded
+4. [3] iframe onload
+5. [4] img onload
+6. [4] readyState:complete
+7. [4] window onload
+
+The numbers in square brackets denote the approximate time of when it happens. Events labeled with the same digit happen approximately at the same time (+- a few ms).
+
+- `document.readyState` becomes `interactive` right before `DOMContentLoaded`. These two things actually mean the same.
+- `document.readyState` becomes `complete` when all resources (`iframe` and `img`) are loaded. Here we can see that it happens in about the same time as `img.onload` (`img` is the last resource) and `window.onload`. Switching to `complete` state means the same as `window.onload`. The difference is that `window.onload` always works after all other `load` handlers.
+
+
+## Summary
+
+Page load events:
+
+- `DOMContentLoaded` event triggers on `document` when DOM is ready. We can apply JavaScript to elements at this stage.
+ - Script such as `` or `` block DOMContentLoaded, the browser waits for them to execute.
+ - Images and other resources may also still continue loading.
+- `load` event on `window` triggers when the page and all resources are loaded. We rarely use it, because there's usually no need to wait for so long.
+- `beforeunload` event on `window` triggers when the user wants to leave the page. If we cancel the event, browser asks whether the user really wants to leave (e.g we have unsaved changes).
+- `unload` event on `window` triggers when the user is finally leaving, in the handler we can only do simple things that do not involve delays or asking a user. Because of that limitation, it's rarely used. We can send out a network request with `navigator.sendBeacon`.
+- `document.readyState` is the current state of the document, changes can be tracked in the `readystatechange` event:
+ - `loading` -- the document is loading.
+ - `interactive` -- the document is parsed, happens at about the same time as `DOMContentLoaded`, but before it.
+ - `complete` -- the document and resources are loaded, happens at about the same time as `window.onload`, but before it.
diff --git a/2-ui/5-loading/02-script-async-defer/article.md b/2-ui/5-loading/02-script-async-defer/article.md
index 6c49d9945f..fc6858a091 100755
--- a/2-ui/5-loading/02-script-async-defer/article.md
+++ b/2-ui/5-loading/02-script-async-defer/article.md
@@ -1,4 +1,5 @@
+<<<<<<< HEAD
# Script 标签属性：async, defer
现代的网站中，脚本往往比 HTML 更“重”：它们的大小通常更大，处理时间也更长。
@@ -9,17 +10,37 @@
1. 脚本不能访问到位于它们下面的 DOM 元素，因此，脚本不能给它们添加事件等。
2. 如果页面顶部有一个庞大的脚本，它会“阻塞页面”。在脚本下载并执行结束前，用户都不能看到页面内容：
+=======
+# Scripts: async, defer
+
+In modern websites, scripts are often "heavier" than HTML: their download size is larger, and processing time is also longer.
+
+When the browser loads HTML and comes across a `` tag, it can't continue building DOM. It must execute the script right now. The same happens for external scripts ``: the browser must wait until the script downloads, execute it, and only after process the rest of the page.
+
+That leads to two important issues:
+
+1. Scripts can't see DOM elements below them, so can't add handlers etc.
+2. If there's a bulky script at the top of the page, it "blocks the page". Users can't see the page content till it downloads and runs:
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
```html run height=100
...content before script... +<<<<<<< HEAD...content after script... ``` 这里有一些解决办法。例如，我们可以把脚本放在页面底部。此时，它可以访问到它上面的元素，并且不会阻塞页面显示内容： +======= + +...content after script... +``` + +There are some workarounds to that. For instance, we can put a script at the bottom of the page. Then it can see elements above it, and it doesn't block the page content from showing: +>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7 ```html @@ -29,6 +50,7 @@ ``` +<<<<<<< HEAD 但是这样的方案绝非完美。例如：浏览器只有在下载完整的 HTML 文档后才会注意到脚本（并且开始下载它）。对于长的 HTML 文档来说，这样的延迟必须引起注意。 对于网络连接很快的人来说，这不值一提。但是这个世界上仍然有很多地区的人们他们使用很慢的网络连接，并且使用着远非完美的移动互联网。 @@ -40,12 +62,26 @@ `defer` 属性告诉浏览器它应该继续处理页面，并在“后台”下载脚本，然后等页面处理完成后才开始执行此脚本。 接下来的这个例子和上面一样，但是是用 `defer` 属性： +======= +But this solution is far from perfect. For example, the browser notices the script (and can start downloading it) only after it downloaded the full HTML document. For long HTML documents, that may be a noticeable delay. + +Such things are invisible for people using very fast connections, but many people in the world still have slower internet speeds and use far-from-perfect mobile internet. + +Luckily, there are two ` +<<<<<<< HEAD...content after script... ``` @@ -54,6 +90,16 @@ - 具有 `defer` 属性的脚本总是要等到 DOM 解析完毕，但在 `DOMContentLoaded` 事件之前执行。 下面的例子演示了这一过程： +======= + +...content after script... +``` + +- Scripts with `defer` never block the page. +- Scripts with `defer` always execute when the DOM is ready, but before `DOMContentLoaded` event. + +The following example demonstrates that: +>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7 ```html run height=100...content before scripts... @@ -67,18 +113,28 @@...content after scripts... ``` +<<<<<<< HEAD 1. 页面内容立即显示。 2. `DOMContentLoaded` 在等待 defer 脚本动作的完成。它仅在脚本 `(2)` 下载且执行结束后才被触发。 Defer 脚本保持他们的相对顺序，就像常规脚本一样。 所以，如果我们有一个长脚本在前，一个短脚本在后，那么后者就会等待前者。 +======= +1. The page content shows up immediately. +2. `DOMContentLoaded` waits for the deferred script. It only triggers when the script `(2)` is downloaded is executed. + +Deferred scripts keep their relative order, just like regular scripts. + +So, if we have a long script first, and then a smaller one, then the latter one waits. +>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7 ```html ``` +<<<<<<< HEAD ```smart header="短脚本先下载完成，但是后执行" 浏览器解析页面找到 script 属性并并行下载它们，以提高性能。因此，在上面的实例中，两个脚本并行下载。`small.js` 可能会先下载完成。 @@ -87,11 +143,22 @@ Defer 脚本保持他们的相对顺序，就像常规脚本一样。 ```smart header="`defer` 属性仅适用于外部脚本" `defer` 属性会忽略没有 `src` 属性的 ` ``` +<<<<<<< HEAD ## 动态脚本（Dynamic scripts） 我们也可以使用 JavaScript 动态地添加脚本： +======= +## Dynamic scripts + +We can also add a script dynamically using JavaScript: +>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7 ```js run let script = document.createElement('script'); @@ -138,6 +234,7 @@ script.src = "/article/script-async-defer/long.js"; document.body.append(script); // (*) ``` +<<<<<<< HEAD 当脚本附加到文档 `(*)` 时，脚本就会开始加载： **默认情况下，动态脚本表现为“异步”行为。** @@ -147,6 +244,17 @@ document.body.append(script); // (*) - 先加载完成的脚本先运行（“加载优先” 顺序） 我们可以通过将 `async` 属性显示修改为 `false` 以将加载优先顺序修改为文档顺序（就像常规脚本一样）： +======= +The script starts loading as soon as it's appended to the document `(*)`. + +**Dynamic scripts behave as "async" by default.** + +That is: +- They don't wait for anything, nothing waits for them. +- The script that loads first -- runs first ("load-first" order). + +We can change the load-first order into the document order (just like regular scripts) by explicitly setting `async` property to `false`: +>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7 ```js run let script = document.createElement('script'); @@ -159,7 +267,11 @@ script.async = false; document.body.append(script); ``` +<<<<<<< HEAD 例如，这里我们添加了两个脚本。在没有设置 `script.async=false` 时，它们执行顺序为加载优先顺序（即 `small.js` 可能先运行）。但是当设置了 `script.async=false` 后，脚本执行顺序就是它在文档中的顺序： +======= +For example, here we add two scripts. Without `script.async=false` they would execute in load-first order (the `small.js` probably first). But with that flag the order is "as in the document": +>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7 ```js run @@ -170,12 +282,17 @@ function loadScript(src) { document.body.append(script); } +<<<<<<< HEAD // 由于 async=false 属性存在，long.js 会先运行 +======= +// long.js runs first because of async=false +>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7 loadScript("/article/script-async-defer/long.js"); loadScript("/article/script-async-defer/small.js"); ``` +<<<<<<< HEAD ## 总结 `async` 和 `defer` 属性有一个共同点：它们都不会阻塞页面的渲染。因此，用户可以立即阅读并了解页面内容。 @@ -196,3 +313,25 @@ loadScript("/article/script-async-defer/small.js"); ``` 在开发中，通常在脚本需要整个 DOM 文档或者脚本的相对执行顺序很重要的时候，使用 `defer` 属性。而当脚本之间互相独立，比如计数器或者广告，并且它们相对执行顺序不重要的时候，此时使用 `async` 属性。 +======= +## Summary + +Both `async` and `defer` have one common thing: they don't block page rendering. So the user can read page content and get acquanted with the page immediately. + +But there are also essential differences between them: + +| | Order | `DOMContentLoaded` | +|---------|---------|---------| +| `async` | *Load-first order*. Their document order doesn't matter -- which loads first | Irrelevant. May load and execute while the document has not yet been fully downloaded. That happens if scripts are small or cached, and the document is long enough. | +| `defer` | *Document order* (as they go in the document). | Execute after the document is loaded and parsed (they wait if needed), right before `DOMContentLoaded`. | + +```warn header="Page without scripts should be usable" +Please note that if you're using `defer`, then the page is visible *before* the script loads. + +So the user may read the page, but some graphical components are probably not ready yet. + +There should be "loading" indication in proper places, not-working buttons disabled, to clearly show the user what's ready and what's not. +``` + +In practice, `defer` is used for scripts that need the whole DOM and/or their relative execution order is important. And `async` is used for independent scripts, like counters or ads. And their relative execution order does not matter. +>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7 diff --git a/2-ui/5-loading/03-onload-onerror/1-load-img-callback/solution.md b/2-ui/5-loading/03-onload-onerror/1-load-img-callback/solution.md index 772aedf0d2..4b8fe50b4c 100644 --- a/2-ui/5-loading/03-onload-onerror/1-load-img-callback/solution.md +++ b/2-ui/5-loading/03-onload-onerror/1-load-img-callback/solution.md @@ -1,6 +1,6 @@ - -算法： -1. 为每个资源制作 `img`。 -2. 为每个 image 添加 `onload/onerror`。 -3. 在 `onload` 或 `onerror` 被触发时增加计数器。 -4. 当计数器值等于资源值时 —— 结束：`callback()`。 + +The algorithm: +1. Make `img` for every source. +2. Add `onload/onerror` for every image. +3. Increase the counter when either `onload` or `onerror` triggers. +4. When the counter value equals to the sources count -- we're done: `callback()`. diff --git a/2-ui/5-loading/03-onload-onerror/1-load-img-callback/solution.view/index.html b/2-ui/5-loading/03-onload-onerror/1-load-img-callback/solution.view/index.html index 00bcafefe3..eefaae3d59 100644 --- a/2-ui/5-loading/03-onload-onerror/1-load-img-callback/solution.view/index.html +++ b/2-ui/5-loading/03-onload-onerror/1-load-img-callback/solution.view/index.html @@ -1,3 +1,4 @@ +<<<<<<< HEAD:2-ui/5-loading/03-onload-onerror/1-load-img-callback/solution.view/index.html @@ -52,3 +53,59 @@ +======= + + + + + + + + + + + +>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7:2-ui/5-loading/03-onload-onerror/1-load-img-callback/solution.view/index.html diff --git a/2-ui/5-loading/03-onload-onerror/1-load-img-callback/task.md b/2-ui/5-loading/03-onload-onerror/1-load-img-callback/task.md index c3be4cd24c..b7583550b4 100644 --- a/2-ui/5-loading/03-onload-onerror/1-load-img-callback/task.md +++ b/2-ui/5-loading/03-onload-onerror/1-load-img-callback/task.md @@ -1,36 +1,36 @@ -importance: 4 - ---- - -# 用回调函数加载 images - -通常，图像在被创建时才会被加载，因此当我们在页面中添加 `...你会变帅（我才是帅黑客😜）！
+...And you're cool (I'm a cool hacker actually)!
```
-完整的攻击示例如下：
+The full demo of the attack:
[codetabs src="clickjacking-visible" height=160]
-例子中的半透明 `
```
-当然还有其他绕过这个弱鸡防御的方法。
+There are other ways to work around that simple protection too.
## X-Frame-Options
-服务端 header 字段 `X-Frame-Options` 能够允许或禁止 frame 内页面的显示。
+The server-side header `X-Frame-Options` can permit or forbid displaying the page inside a frame.
-这个 header 必须由 **服务端** 发送：若浏览器发现 `` 标签里有该字段，则会忽略此字段。即，`` 不生效。
+It must be sent exactly as HTTP-header: the browser will ignore it if found in HTML `` tag. So, `` won't do anything.
-该 header 有三个值：
+The header may have 3 values:
`DENY`
-: 始终禁止 frame 中的页面加载。
+: Never ever show the page inside a frame.
`SAMEORIGIN`
-: 允许和父页面同一来源的 frame 进行页面加载。
+: Allow inside a frame if the parent document comes from the same origin.
`ALLOW-FROM domain`
-: 允许和父页面同一给定域的 frame 进行页面加载。
+: Allow inside a frame if the parent document is from the given domain.
-例如，Twitter 使用的是 `X-Frame-Options: SAMEORIGIN`。
+For instance, Twitter uses `X-Frame-Options: SAMEORIGIN`.
````online
-如下所示：
+Here's the result:
```html
```
+
-取决于浏览器行为，以上 `iframe` 要么显示为空，要么提醒你浏览器不允许内部页面加载。
+Depending on your browser, the `iframe` above is either empty or alerting you that the browser won't permit that page to be navigating in this way.
````
-## 显示不可用功能
+## Showing with disabled functionality
-`X-Frame-Options` 存在副作用。它无差别地禁止合法站点在 frame 中显示我们的网页。
+The `X-Frame-Options` header has a side-effect. Other sites won't be able to show our page in a frame, even if they have good reasons to do so.
-所以还有其他措施...例如，把设置了 `height: 100%; width: 100%;` 的 `` “覆盖” 在页面上，这样就能监听所有的点击事件。在 `window == top` 或无需防御的情况下，此 ` ` 则应该隐藏起来。
+So there are other solutions... For instance, we can "cover" the page with a ` ` with styles `height: 100%; width: 100%;`, so that it will intercept all clicks. That ` ` is to be removed if `window == top` or if we figure out that we don't need the protection.
-代码示例如下：
+Something like this:
```html
```
-有许多关于 `@keyframes` 的文章以及一个[详细的规范说明](https://drafts.csswg.org/css-animations/)。
+There are many articles about `@keyframes` and a [detailed specification](https://drafts.csswg.org/css-animations/).
-很可能你并不需要经常用到 `@keyframes`，除非你的网站上有一直在运动的元素。
+Probably you won't need `@keyframes` often, unless everything is in the constant move on your sites.
-## 总结
+## Summary
-CSS 动画允许你为一个或者多个属性的变化创建丝滑流畅（也可能不是）的过渡动画。
+CSS animations allow to smoothly (or not) animate changes of one or multiple CSS properties.
-它们适用于大多数的动画需求。我们也可以使用 JavaScript 创建动画，下一章将会详细讲解相关内容。
+They are good for most animation tasks. We're also able to use JavaScript for animations, the next chapter is devoted to that.
-相对于 JavaScript 动画，CSS 动画存在的特点如下：
+Limitations of CSS animations compared to JavaScript animations:
```compare plus="CSS animations" minus="JavaScript animations"
-+ 简单的事，简单地做。
-+ 快速，而且对 CPU 造成的压力很小。
-- JavaScript 动画更加灵活。它们可以实现任何动画逻辑，比如某个元素的爆炸效果。
-- 不仅仅只是属性的变化。我们还可以在 JavaScript 中生成新元素用于动画。
++ Simple things done simply.
++ Fast and lightweight for CPU.
+- JavaScript animations are flexible. They can implement any animation logic, like an "explosion" of an element.
+- Not just property changes. We can create new elements in JavaScript for purposes of animation.
```
-本节已经介绍了可以使用 CSS 实现的主要动画类型，而且 `transitionend` 还允许在动画结束后执行 JavaScript 代码，因此它可以方便得与代码结合起来。
+The majority of animations can be implemented using CSS as described in this chapter. And `transitionend` event allows to run JavaScript after the animation, so it integrates fine with the code.
-但是在下一节，我们将会学习一些 JavaScript 动画来实现更加复杂的效果。
+But in the next chapter we'll do some JavaScript animations to cover more complex cases.
diff --git a/7-animation/2-css-animations/step-list.view/index.html b/7-animation/2-css-animations/step-list.view/index.html
new file mode 100644
index 0000000000..d7931f5e28
--- /dev/null
+++ b/7-animation/2-css-animations/step-list.view/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+ 0123456789 |
/* ... */ 中放入代码，并不会执行。
有时候，可以很方便地临时禁用代码：
+=======
+The content of comments is ignored, so if we put code inside /* ... */, it won't execute.
+
+Sometimes it can be handy to temporarily disable a part of code:
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
```js run
/* 注释代码
@@ -135,8 +201,13 @@ alert('Hello');
alert('World');
```
+<<<<<<< HEAD
```smart header="使用热键！"
在大多数的编辑器中，一行代码可以使用 `key:Ctrl+/` 热键进行单行注释，诸如 `key:Ctrl+Shift+/` 的热键可以进行多行注释（选择代码，然后按下热键）。对于 Mac 电脑，应使用 `key:Cmd` 而不是 `key:Ctrl`。
+=======
+```smart header="Use hotkeys!"
+In most editors, a line of code can be commented out by pressing the `key:Ctrl+/` hotkey for a single-line comment and something like `key:Ctrl+Shift+/` -- for multiline comments (select a piece of code and press the hotkey). For Mac, try `key:Cmd` instead of `key:Ctrl`.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
```
````warn header="不支持注释嵌套！"
@@ -154,6 +225,12 @@ alert( 'World' );
注释你的代码，请不要有任何迟疑。
+<<<<<<< HEAD
注释会增加代码总量，但这一点也不是问题。有很多工具可以在你部署到服务器之前缩减代码。这些工具会移除注释，所以注释不会出现在发布的脚本中。所以，注释对我们的生产没有任何负面影响。
在进一步的教程中，会有一章 true 和 false | `1` and `0` |
| `string` | 去掉首尾空格后的纯数字字符串中含有的数字。如果字符串只由空格字符组成，返回 `0`。
如果字符串不是纯数字，则返回 `NaN`。 | +======= +|
true and false | `1` and `0` |
+| `string` | Whitespaces from the start and end are removed. If the remaining string is empty, the result is `0`. Otherwise, the number is "read" from the string. An error gives `NaN`. |
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
例如：
@@ -79,31 +113,53 @@ alert( Number(true) ); // 1
alert( Number(false) ); // 0
```
+<<<<<<< HEAD
请注意 `null` 和 `undefined` 有点不同。`null` 变成数字 `0`，`undefined` 变成 `NaN`。
````smart header="加号'+' 连接字符串"
几乎所有的算术运算符都将值转换为数字，加号 `+` 是个例外。如果其中一个运算元是字符串，则另一个也会转换为字符串。
然后，连接两者：
+=======
+Please note that `null` and `undefined` behave differently here: `null` becomes zero while `undefined` becomes `NaN`.
+
+````smart header="Addition '+' concatenates strings"
+Almost all mathematical operations convert values to numbers. A notable exception is addition `+`. If one of the added values is a string, the other one is also converted to a string.
+
+Then, it concatenates (joins) them:
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
```js run
alert( 1 + '2' ); // '12' (字符串在加号右边)
alert( '1' + 2 ); // '12' (字符串在加号左边)
```
+<<<<<<< HEAD
这仅仅发生在其中一方为字符串（译者注：或者双方都为字符串）的情况下。其他情况下会被转换为数字。
+=======
+This only happens when at least one of the arguments is a string. Otherwise, values are converted to numbers.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
````
## ToBoolean
转换为 boolean 类型是最为简单的一个。
+<<<<<<< HEAD
逻辑操作或显式调用 `Boolean(value)` 会触发 boolean 类型转换。
+=======
+It happens in logical operations (later we'll meet condition tests and other similar things) but can also be performed explicitly with a call to `Boolean(value)`.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
转换规则如下：
+<<<<<<< HEAD
- 假值，比如 `0`、空的字符串、`null`、`undefined` 和 `NaN` 变成 `false`。
- 其他值变成 `true`。
+=======
+- Values that are intuitively "empty", like `0`, an empty string, `null`, `undefined`, and `NaN`, become `false`.
+- Other values become `true`.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
比如：
@@ -115,8 +171,13 @@ alert( Boolean("hello") ); // true
alert( Boolean("") ); // false
```
+<<<<<<< HEAD
````warn header="请注意: 包含 0 的字符串 `\"0\"` 是 `true`"
一些编程语言（比如 PHP）视 `"0"` 为 `false`。但在 JavaScript 中，非空的字符串总是 `true`。
+=======
+````warn header="Please note: the string with zero `\"0\"` is `true`"
+Some languages (namely PHP) treat `"0"` as `false`. But in JavaScript, a non-empty string is always `true`.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
```js run
alert( Boolean("0") ); // true
@@ -127,11 +188,19 @@ alert( Boolean(" ") ); // 空白, 也是 true (任何非空字符串是 true)
## 总结
+<<<<<<< HEAD
有三种常用的类型转换：转换为 string 类型、转换为 number 类型和转换为 boolean 类型。
**`ToString`** —— 输出内容时 `ToString` 发生转换，或通过 `String(value)` 进行显式转换。原始类型值的 string 类型转换通常是可预见的。
**`ToNumber`** -- 进行算术操作时发生 `ToNumber` 转换，或通过 `Number(value)` 进行显式转换。
+=======
+The three most widely used type conversions are to string, to number, and to boolean.
+
+**`ToString`** -- Occurs when we output something. Can be performed with `String(value)`. The conversion to string is usually obvious for primitive values.
+
+**`ToNumber`** -- Occurs in math operations. Can be performed with `Number(value)`.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
`ToNumber` 转换遵循以下规则：
@@ -142,7 +211,11 @@ alert( Boolean(" ") ); // 空白, 也是 true (任何非空字符串是 true)
|true / false | `1 / 0` |
| `string` | 字符串“按原样读取”，两端的空白被忽略。空字符串变成 `0`。出错变成 `NaN`。 |
+<<<<<<< HEAD
**`ToBoolean`** -- 进行逻辑操作时发生 `ToBoolean` 转换。或通过 `Boolean(value)` 进行显式转换。
+=======
+**`ToBoolean`** -- Occurs in logical operations. Can be performed with `Boolean(value)`.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
`ToBoolean` 遵循以下规则：
@@ -157,4 +230,8 @@ alert( Boolean(" ") ); // 空白, 也是 true (任何非空字符串是 true)
- `undefined` 进行 `ToNumber` 时变成 `NaN`，而非 `0`。
- `"0"` 和只有空格的字符串(比如：`" "` )在进行 `ToBoolean` 变成 `true`。
+<<<<<<< HEAD
对象的转换并未在此提及，我们会在章节 a > b，a < b。
- 大于等于 / 小于等于：a >= b，a <= b。
- 检测两个值的相等写为 `a == b`（注意表达式中是两个等号 `=`，若写为单个等号 `a = b` 则表示赋值）。
- 检测两个值的不等，在数学中使用 ≠ 符号，而在 JavaScript 中则通过在赋值符号前增加叹号表示：a != b。
+=======
+We know many comparison operators from maths:
+
+- Greater/less than: a > b, a < b.
+- Greater/less than or equals: a >= b, a <= b.
+- Equals: `a == b` (please note the double equals sign `=`. A single symbol `a = b` would mean an assignment).
+- Not equals. In maths the notation is ≠, but in JavaScript it's written as an assignment with an exclamation sign before it: a != b.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
## 比较结果为 Boolean 类型
+<<<<<<< HEAD
和其他操作符一样，比较操作符也会有返回值，其类型为布尔值（Boolean）。
- `true` —— 表示“yes（是）”，“correct（正确）”或“the truth（真理）”。
- `false` —— 表示“no（否）”，“wrong（错误）”或“a lie（谎言）”。
+=======
+Like all other operators, a comparison returns a value. In this case, the value is a boolean.
+
+- `true` -- means "yes", "correct" or "the truth".
+- `false` -- means "no", "wrong" or "not the truth".
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
示例：
@@ -31,7 +47,11 @@ alert( result ); // true
## 字符串间的比较
+<<<<<<< HEAD
在比较字符串的大小时，会使用“字典”或“词典”顺序进行判定。
+=======
+To see whether a string is greater than another, JavaScript uses the so-called "dictionary" or "lexicographical" order.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
换言之，字符串是按字符（母）逐个进行比较的。
@@ -45,6 +65,7 @@ alert( 'Bee' > 'Be' ); // true
字符串间的比较算法非常简单：
+<<<<<<< HEAD
1. 首先比较两个字符串的首位字符大小。
2. 如果一方字符较大（或较小），则该字符串大于（或小于）另一个字符串。算法结束。
3. 否则，两个字符串中的字符相等，继续取出各自的后一位字符进行比较。
@@ -54,20 +75,40 @@ alert( 'Bee' > 'Be' ); // true
在上面的例子中，`'Z' > 'A'` 在算法的第 1 步就得到了返回结果。
字符串 `"Glow"` 和 `"Glee"` 会按字符逐个进行比较：
+=======
+1. Compare the first character of both strings.
+2. If the first character from the first string is greater (or less) than the other string's, then the first string is greater (or less) than the second. We're done.
+3. Otherwise, if both strings' first characters are the same, compare the second characters the same way.
+4. Repeat until the end of either string.
+5. If both strings end at the same length, then they are equal. Otherwise, the longer string is greater.
+
+In the examples above, the comparison `'Z' > 'A'` gets to a result at the first step while the strings `"Glow"` and `"Glee"` are compared character-by-character:
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
1. `G` 和 `G` 相等。
2. `l` 和 `l` 相等。
3. `o` 比 `e` 大，算法停止，第一个字符串大于第二个。
+<<<<<<< HEAD
```smart header="非真正的字典顺序，而是 Unicode 编码顺序"
在上面的算法中，比较大小的逻辑与字典或电话簿中的排序很像，但也不完全相同。
比如说，算法中的比较对大小写是敏感的。大写的 `"A"` 并不等于小写的 `"a"`。哪一个更大呢？实际上小写的 `"a"` 更大。至于原因嘛，这是因为在内部的编码表中（Unicode），小写字母的字符索引更大。我们会在 func`string`。函数 `func` 被自动调用，接收字符串和嵌入式表达式，并处理它们。你可以在 [docs](mdn:/JavaScript/Reference/Template_literals#Tagged_template_literals) 中阅读更多关于它们的信息。这叫做 "tagged templates"。此功能可以更轻松地将字符串包装到自定义模版或其他函数中，但这很少使用。
+<<<<<<< HEAD
## 特殊字符
通过使用换行符 `\n` 来创建带有单引号的多行字符串，它表示中断：
+=======
+## Special characters
+
+It is still possible to create multiline strings with single and double quotes by using a so-called "newline character", written as `\n`, which denotes a line break:
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
```js run
let guestList = "Guests:\n * John\n * Pete\n * Mary";
@@ -60,39 +77,62 @@ let guestList = "Guests:\n * John\n * Pete\n * Mary";
alert(guestList); // a multiline list of guests
```
+<<<<<<< HEAD
例如，这两行描述相同：
+=======
+For example, these two lines are equal, just written differently:
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
```js run
-alert( "Hello\nWorld" ); // two lines using a "newline symbol"
+let str1 = "Hello\nWorld"; // two lines using a "newline symbol"
// two lines using a normal newline and backticks
-alert( `Hello
-World` );
+let str2 = `Hello
+World`;
+
+alert(str1 == str2); // true
```
+<<<<<<< HEAD
还有其他不常见的“特殊字符”，列表如下：
+=======
+There are other, less common "special" characters.
+
+Here's the full list:
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
| 字符 | 描述 |
|-----------|-------------|
-|`\b`|Backspace|
-|`\f`|Form feed|
|`\n`|New line|
-|`\r`|Carriage return|
+|`\r`|Carriage return: not used alone. Windows text files use a combination of two characters `\r\n` to represent a line break. |
+|`\'`, `\"`|Quotes|
+|`\\`|Backslash|
|`\t`|Tab|
+<<<<<<< HEAD
|`\uNNNN`|16 进制的 `NNNN` 的unicode 符号，例如 `\u00A9`—— 是版权符号的 unicode `©`。它必须是 4 个16 进制数字。 |
|`\u{NNNNNNNN}`|一些罕见字符使用两个 unicode 符号进行编码，最多占用 4 个字节。这个长的 unicode 需要它周围的括号。|
+=======
+|`\b`, `\f`, `\v`| Backspace, Form Feed, Vertical Tab -- kept for compatibility, not used nowadays. |
+|`\xXX`|Unicode character with the given hexadimal unicode `XX`, e.g. `'\x7A'` is the same as `'z'`.|
+|`\uXXXX`|A unicode symbol with the hex code `XXXX` in UTF-16 encoding, for instance `\u00A9` -- is a unicode for the copyright symbol `©`. It must be exactly 4 hex digits. |
+|`\u{X…XXXXXX}` (1 to 6 hex characters)|A unicode symbol with the given UTF-32 encoding. Some rare characters are encoded with two unicode symbols, taking 4 bytes. This way we can insert long codes. |
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
unicode 示例：
```js run
alert( "\u00A9" ); // ©
-alert( "\u{20331}" ); // 佫, a rare chinese hieroglyph (long unicode)
+alert( "\u{20331}" ); // 佫, a rare Chinese hieroglyph (long unicode)
alert( "\u{1F60D}" ); // 😍, a smiling face symbol (another long unicode)
```
所有的特殊字符都以反斜杠字符 `\` 开始。它也被称为“转义字符”。
+<<<<<<< HEAD
如果我们想要在字符串中插入一个引号，我们也会使用它。
+=======
+We might also use it if we wanted to insert a quote into the string.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
例如：
@@ -102,7 +142,11 @@ alert( 'I*!*\'*/!*m the Walrus!' ); // *!*I'm*/!* the Walrus!
正如你所看到的，我们必须用反斜杠 `\'` 来预设值内部引号，否则就表示字符串结束。
+<<<<<<< HEAD
当然，这只不过是指与上文相同的引文。因此，作为更优雅的解决方案，我们可以改用双引号或反引号。
+=======
+Of course, only to the quotes that are the same as the enclosing ones need to be escaped. So, as a more elegant solution, we could switch to double quotes or backticks instead:
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
```js run
alert( `I'm the Walrus!` ); // I'm the Walrus!
@@ -120,8 +164,12 @@ alert( `The backslash: \\` ); // The backslash: \
## 字符串长度
+<<<<<<< HEAD
`length` 属性有字符串长度：
+=======
+The `length` property has the string length:
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
```js run
alert( `My\n`.length ); // 3
@@ -132,7 +180,11 @@ alert( `My\n`.length ); // 3
```warn header="`length` is a property"
掌握其他语言的人，有时会错误地调用 `str.length()` 而不是 `str.length`。这是行不通的。
+<<<<<<< HEAD
请注意 `str.length` 是一个数字属性，而不是函数。之后不需要添加括号。
+=======
+Please note that `str.length` is a numeric property, not a function. There is no need to add parenthesis after it.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
```
## 访问字符。
@@ -189,7 +241,11 @@ alert( str[0] ); // 无法运行
```js run
let str = 'Hi';
+<<<<<<< HEAD
str = 'h' + str[1]; // 字符串替换
+=======
+str = 'h' + str[1]; // replace the string
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
alert( str ); // hi
```
@@ -242,9 +298,12 @@ let str = 'Widget with id';
alert( str.indexOf('id', 2) ) // 12
```
+<<<<<<< HEAD
如果我们对所有存在位置都感兴趣，可以在一个循环中使用 `indexOf`。每一次新的调用都发生在上一匹配位置之后：
-
+=======
+If we're interested in all occurrences, we can run `indexOf` in a loop. Every new call is made with the position after the previous match:
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
```js run
let str = 'As sly as a fox, as strong as an ox';
@@ -275,8 +334,13 @@ while ((pos = str.indexOf(target, pos + 1)) != -1) {
*/!*
```
+<<<<<<< HEAD
```smart header="`str.lastIndexOf(subStr, pos)`"
还有一个类似的方法 [str.lastIndexOf(subStr, pos)](mdn:js/String/lastIndexOf)，他从字符串的末尾开始搜索。
+=======
+```smart header="`str.lastIndexOf(substr, position)`"
+There is also a similar method [str.lastIndexOf(substr, position)](mdn:js/String/lastIndexOf) that searches from the end of a string to its beginning.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
它会以相反的顺序列出事件。
```
@@ -305,8 +369,14 @@ if (str.indexOf("Widget") != -1) {
}
```
+<<<<<<< HEAD
````smart header="The bitwise NOT trick"
这里使用的一个老技巧是 [bitwise NOT](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT) `~` 运算符。它将该数字转换为 32-bit 整数（如果存在，则删除小数部分），然后反转其二进制表示中的所有位。
+=======
+#### The bitwise NOT trick
+
+One of the old tricks used here is the [bitwise NOT](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT) `~` operator. It converts the number to a 32-bit integer (removes the decimal part if exists) and then reverses all bits in its binary representation.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
对于 32-bit 整数，调用 `~n` 的意思与 `-(n+1)` 完全一样（由于 IEEE-754 格式）。
@@ -321,9 +391,15 @@ alert( ~-1 ); // 0, the same as -(-1+1)
*/!*
```
+<<<<<<< HEAD
正如我们看到这样，只有当 `n == -1` 时，`~n` 才为零。
因此，测试 `if ( ~str.indexOf("...") )` 真是 `indexOf` 的结果不是 `-1`。换句话说，当有匹配时。
+=======
+As we can see, `~n` is zero only if `n == -1` (that's for any 32-bit signed integer `n`).
+
+So, the test `if ( ~str.indexOf("...") )` is truthy only if the result of `indexOf` is not `-1`. In other words, when there is a match.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
人们用它来简写 `indexOf` 检查：
@@ -337,8 +413,16 @@ if (~str.indexOf("Widget")) {
通常不建议以非显而易见的方式使用语言特性，但这种特殊技巧在旧代码中仍被广泛使用，所以我们应该理解它。
+<<<<<<< HEAD
只要记住：`if (~str.indexOf(...))` 读作 "if found"。
````
+=======
+Just remember: `if (~str.indexOf(...))` reads as "if found".
+
+Technically speaking, numbers are truncated to 32 bits by `~` operator, so there exist other big numbers that give `0`, the smallest is `~4294967295=0`. That makes such check is correct only if a string is not that long.
+
+Right now we can see this trick only in the old code, as modern JavaScript provides `.includes` method (see below).
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
### includes, startsWith, endsWith
@@ -362,8 +446,13 @@ alert( "Midget".includes("id", 3) ); // false, 位置 3 没有 "id"
方法 [str.startsWith](mdn:js/String/startsWith) 和 [str.endsWith](mdn:js/String/endsWith) 完全按照它们所说的执行：
```js run
+<<<<<<< HEAD
alert( "Widget".startsWith("Wid") ); // true, "Widget" 以 "Wid" 开始
alert( "Widget".endsWith("get") ); // true, "Widget" 以 "get" 结束
+=======
+alert( "Widget".startsWith("Wid") ); // true, "Widget" starts with "Wid"
+alert( "Widget".endsWith("get") ); // true, "Widget" ends with "get"
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
```
## 获取子字符串
@@ -397,7 +486,6 @@ JavaScript 中有三种获取字符串的方法：`substring`、`substr` 和 `sl
alert( str.slice(-4, -1) ); // */!
```
-
`str.substring(start [, end])`
: 返回 `start` 和 `end` **之间**的字符串部分。
@@ -405,7 +493,6 @@ JavaScript 中有三种获取字符串的方法：`substring`、`substr` 和 `sl
例如：
-
```js run
let str = "st*!*ring*/!*ify";
@@ -421,7 +508,6 @@ JavaScript 中有三种获取字符串的方法：`substring`、`substr` 和 `sl
否定参数（不像 slice）不支持，它们被视为 `0`。
-
`str.substr(start [, length])`
: 从 `start` 开始返回给定 `length` 的字符串部分。
@@ -447,11 +533,14 @@ JavaScript 中有三种获取字符串的方法：`substring`、`substr` 和 `sl
| `substring(start, end)` | between `start` and `end` | negative values mean `0` |
| `substr(start, length)` | from `start` get `length` characters | allows negative `start` |
-
```smart header="Which one to choose?"
他们可以完成这项工作，形式上，`substr` 有一个小缺点：它不是在 JavaScript 核心规范中描述的，而是在附录 B 中，它涵盖了主要由于历史原因而存在的浏览器特性。因此，非浏览器环境可能无法支持它。但实际上它在任何地方都有效。
+<<<<<<< HEAD
作者发现自己几乎一直在使用 `slice`。
+=======
+Of the other two variants, `slice` is a little bit more flexible, it allows negative arguments and shorter to write. So, it's enough to remember solely `slice` of these three methods.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
```
## 比较字符串
@@ -523,10 +612,16 @@ alert( str );
- 所有小写字母都是大写字母，因为它们的代码更大。
- 一些想 `Ö` 的字母与主要字母表不同。这里的代码比从 `a` 到 `z` 的代码都要大。
+<<<<<<< HEAD
### 正确的比较
执行字符串比较的“正确”算法比看起来更复杂，因为不同语言的字母都不相同。相同的字母可能位于不同的字母表中。
+=======
+### Correct comparisons
+
+The "right" algorithm to do string comparisons is more complex than it may seem, because alphabets are different for different languages.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
因此浏览器需要知道要比较的语言。
@@ -534,11 +629,19 @@ alert( str );
它提供了一种特殊的方法来比较不同语言的字符串，遵循它们的规则。
+<<<<<<< HEAD
调用 [str.localeCompare(str2)](mdn:js/String/localeCompare)：
- 根据语言规则，如果 `str` 大于 `str2` 返回 `1`。
- 如果if `str` 小于 `str2` 返回 `-1`。
- 如果相等，返回 `0`。
+=======
+The call [str.localeCompare(str2)](mdn:js/String/localeCompare) returns an integer indicating whether `str` comes before, after or is equivalent to `str2` according to the language rules:
+
+- Returns a negative number if `str` is less than `str2`, i.e. `str` occurs before `str2`.
+- Returns a positive number if `str` is greater than `str2`, i.e. `str` occurs after `str2`.
+- Returns `0` if they are equivalent.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
例如：
@@ -546,19 +649,31 @@ alert( str );
alert( 'Österreich'.localeCompare('Zealand') ); // -1
```
+<<<<<<< HEAD
这个方法实际上在[文档](mdn:js/String/localeCompare)中指定了两个额外的参数，它允许它指定语言（默认从环境中获取）并设置诸如区别大小之类的附加规则，或应该处理将 `"a"` 和 `"á"` 看作相等情况等。
+=======
+This method actually has two additional arguments specified in [the documentation](mdn:js/String/localeCompare), which allows it to specify the language (by default taken from the environment, letter order depends on the language) and setup additional rules like case sensitivity or should `"a"` and `"á"` be treated as the same etc.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
## 内部，Unicode
```warn header="Advanced knowledge"
+<<<<<<< HEAD
这部分会深入字符串内部。如果你计划处理表情符号、罕见的象形文字字符或其他罕见符号，这些知识会对你有用。
+=======
+The section goes deeper into string internals. This knowledge will be useful for you if you plan to deal with emoji, rare mathematical or hieroglyphic characters or other rare symbols.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
如果你不打算支持它们，你可以跳过这一部分。
```
### 代理对
+<<<<<<< HEAD
大部分 symbol 都有一个 2 字节的代码。大多数欧洲语言，数字甚至大多数象形文字中的字母都有 2 字节的表示形式。
+=======
+All frequently used characters have 2-byte codes. Letters in most european languages, numbers, and even most hieroglyphs, have a 2-byte representation.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
但 2 字节只允许 65536 个组合，这对于每个可能的符号都是不够的。所以稀有的符号被称为“代理对”的一对 2 字节符号编码。
@@ -567,7 +682,7 @@ alert( 'Österreich'.localeCompare('Zealand') ); // -1
```js run
alert( '𝒳'.length ); // 2, MATHEMATICAL SCRIPT CAPITAL X
alert( '😂'.length ); // 2, FACE WITH TEARS OF JOY
-alert( '𩷶'.length ); // 2, a rare chinese hieroglyph
+alert( '𩷶'.length ); // 2, a rare Chinese hieroglyph
```
注意，代理对在 JavaScript 被创建时并不存在，因此无法被语言正确代理。
@@ -576,7 +691,11 @@ alert( '𩷶'.length ); // 2, a rare chinese hieroglyph
`String.fromCodePoint` 和 `str.codePointAt` 是几种处理代理对的少数方法。它们最近在出现在语言中。在它们之前，只有 [String.fromCharCode](mdn:js/String/fromCharCode) 和 [str.charCodeAt](mdn:js/String/charCodeAt)。这些方法实际上与 `fromCodePoint/codePointAt` 相同，但是不适用于代理对。
+<<<<<<< HEAD
但是，例如，获取符号可能会非常麻烦，因为代理对被认为是两个字符：
+=======
+Getting a symbol can be tricky, because surrogate pairs are treated as two characters:
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
```js run
alert( '𝒳'[0] ); // 奇怪的符号...
@@ -604,7 +723,11 @@ alert( '𝒳'.charCodeAt(1).toString(16) ); // dcb3, 在 0xdc00 和 0xdfff 之
例如，字母 `a` 可以是基本字符：`àáâäãåā`。最常见的“复合”字符在 UTF-16 表中有自己的代码。但不是全部，因为可能的组合太多。
+<<<<<<< HEAD
为了支持任意组合，UTF-16 允许我们使用多个 unicode 字符。基本字符和“装饰”它的一个或多个“标记”字符。
+=======
+To support arbitrary compositions, UTF-16 allows us to use several unicode characters: the base character followed by one or many "mark" characters that "decorate" it.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
例如，如果我们 `S` 后跟有特殊的 "dot above" 字符（代码 `\u0307`），则显示 Ṡ。
@@ -628,9 +751,9 @@ alert( 'S\u0307\u0323' ); // Ṩ
```js run
alert( 'S\u0307\u0323' ); // Ṩ, S + dot above + dot below
-alert( 'S\u0323\u0307' ); // Ṩ, S + dot below + dot above
+alert( 'S\u0323\u0307' ); // Ṩ, S + dot below + dot above
-alert( 'S\u0307\u0323' == 'S\u0323\u0307' ); // false
+alert( 'S\u0307\u0323' == 'S\u0323\u0307' ); // false, different characters (?!)
```
为了解决这个问题，有一个 “unicode 规范化”算法，它将每个字符串都转化成单个“通用”格式。
@@ -649,10 +772,15 @@ alert( "S\u0307\u0323".normalize().length ); // 1
alert( "S\u0307\u0323".normalize() == "\u1e68" ); // true
```
+<<<<<<< HEAD
事实上，情况并非总是如此，因为符号 `Ṩ` “常用”，所以 UTF-16 创建者把它包含在主表中并给了它代码。
+=======
+In reality, this is not always the case. The reason being that the symbol `Ṩ` is "common enough", so UTF-16 creators included it in the main table and gave it the code.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
如果你想了解更多关于规范化规则和变体的信息 —— 它们在 Unicode 标准附录中有详细描述：[Unicode 规范化形式](http://www.unicode.org/reports/tr15/)，但对于大多数实际目的来说，本文的内容就已经足够了。
+<<<<<<< HEAD
## 总结
@@ -664,11 +792,31 @@ alert( "S\u0307\u0323".normalize() == "\u1e68" ); // true
- 字符串的大/小写转换，使用：`toLowerCase/toUpperCase`。
- 查找子字符串时，使用 `indexOf` 或 `includes/startsWith/endsWith` 进行简单检查。
- 根据语言比较字符串时使用 `localeCompare`，否则将按字符代码进行比较。
+=======
+## Summary
+
+- There are 3 types of quotes. Backticks allow a string to span multiple lines and embed expressions `${…}`.
+- Strings in JavaScript are encoded using UTF-16.
+- We can use special characters like `\n` and insert letters by their unicode using `\u...`.
+- To get a character, use: `[]`.
+- To get a substring, use: `slice` or `substring`.
+- To lowercase/uppercase a string, use: `toLowerCase/toUpperCase`.
+- To look for a substring, use: `indexOf`, or `includes/startsWith/endsWith` for simple checks.
+- To compare strings according to the language, use: `localeCompare`, otherwise they are compared by character codes.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
字符串还有其他几种有用的方法：
+<<<<<<< HEAD
- `str.trim()` —— 删除字符串前后的空格 ("trims")。
- `str.repeat(n)` —— 重复字符串 `n` 次。
- ...更多内容细节参见[手册](mdn:js/String)。
字符串还具有用正则表达式执行搜索/替换的方法。但这个话题值得拥有单独的一章，所以我们稍后再说。
+=======
+- `str.trim()` -- removes ("trims") spaces from the beginning and end of the string.
+- `str.repeat(n)` -- repeats the string `n` times.
+- ...and more to be found in the [manual](mdn:js/String).
+
+Strings also have methods for doing search/replace with regular expressions. But that's big topic, so it's explained in a separate tutorial section | Your age: | + ++ + + + | +
getElementsByTagName.
+
+The `"s"` letter is absent in `getElementById`, because it returns a single element. But `getElementsByTagName` returns a collection of elements, so there's `"s"` inside.
+```
+
+````warn header="It returns a collection, not an element!"
+Another widespread novice mistake is to write:
+
+```js
+// doesn't work
+document.getElementsByTagName('input').value = 5;
+```
+
+That won't work, because it takes a *collection* of inputs and assigns the value to it rather than to elements inside it.
+
+We should either iterate over the collection or get an element by its index, and then assign, like this:
+
+```js
+// should work (if there's an input)
+document.getElementsByTagName('input')[0].value = 5;
+```
+````
+
+Looking for `.article` elements:
+
+```html run height=50
+
+
+
+```
+
+## Live collections
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
所有的 `"getElementsBy*"` 方法都会返回 **live** 集合。这类集合总是可以反映出文档的当前状态而且在文档变化时，可以自动更新。
下面的实例中，有两个脚本。
+<<<<<<< HEAD
1. 第一个方法创建了对集合 `` 的引用。到目前为止，它的长度是 `1`。
2. 第二个脚本在浏览器再遇到一个 `
` 时，它的长度会变成 `2`。
+=======
+1. The first one creates a reference to the collection of `
`. As of now, its length is `1`.
+2. The second scripts runs after the browser meets one more `
`, so its length is `2`.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
```html run
+CSS-selector
+✔
+-
+
+
+CSS-selector
+✔
+-
+
+
-
@@ -350,29 +500,26 @@ CSS 选择器的伪类，如 `:hover` 和 `:active` 都是被支持的。例如
✔
✔
-
-CSS-selector
-✔
--
-
-
-CSS-selector
-✔
--
-
+<<<<<<< HEAD
请注意，只有在文档 `document.getElementById(...)` 的上下文中才能调用 `getElementById` 和 `getElementsByName`。但元素中没有 `elem.getElementById(...)` 会报错。
也可以在元素上调用其他方法，例如 `elem.querySelectorAll(...)` 将会在 `elem`（在 DOM 子树中）内部进行搜素。
+=======
+By far the most used are `querySelector` and `querySelectorAll`, but `getElementBy*` can be sporadically helpful or found in the old scripts.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
除此以外：
- `elem.matches(css)` 用于检查 `elem` 与给定的 CSS 选择器是否匹配。
- `elem.closest(css)` 用于查找与给定 CSS 选择器相匹配的最近的祖先。`elem` 本身也会被检查。
+<<<<<<< HEAD
最后我们在提一种检查父子关系的方法：
- 如果 `elemB` 在 `elemA`（`elemA` 的后代）中或者当 `elemA==elemB` 时 `elemA.contains(elemB)` 将返回 true。
+=======
+And let's mention one more method here to check for the child-parent relationship, as it's sometimes useful:
+- `elemA.contains(elemB)` returns true if `elemB` is inside `elemA` (a descendant of `elemA`) or when `elemA==elemB`.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
diff --git a/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.md b/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.md
new file mode 100644
index 0000000000..c40a614dfa
--- /dev/null
+++ b/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.md
@@ -0,0 +1,29 @@
+我们在 `` 中使用循环：
+
+```js
+for (let li of document.querySelectorAll('li')) {
+ ...
+}
+```
+
+<<<<<<< HEAD:2-ui/1-document/04-searching-elements-dom/2-tree-info/solution.md
+循环时，我们需要获取每个 `li` 的文本下标。我们可以直接从第一个节点开始读取，这就是文本节点：
+=======
+In the loop we need to get the text inside every `li`.
+
+We can read the text from the first child node of `li`, that is the text node:
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7:2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.md
+
+```js
+for (let li of document.querySelectorAll('li')) {
+ let title = li.firstChild.data;
+
+ // title is the text in before any other nodes
+}
+```
+
+<<<<<<< HEAD:2-ui/1-document/04-searching-elements-dom/2-tree-info/solution.md
+之后我们就可以获取后代 `li.getElementsByTagName('li')` 的数目。
+=======
+Then we can get the number of descendants as `li.getElementsByTagName('li').length`.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7:2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.md
diff --git a/2-ui/1-document/04-searching-elements-dom/2-tree-info/solution.view/index.html b/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.view/index.html
similarity index 100%
rename from 2-ui/1-document/04-searching-elements-dom/2-tree-info/solution.view/index.html
rename to 2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.view/index.html
diff --git a/2-ui/1-document/04-searching-elements-dom/2-tree-info/source.view/index.html b/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/source.view/index.html
similarity index 100%
rename from 2-ui/1-document/04-searching-elements-dom/2-tree-info/source.view/index.html
rename to 2-ui/1-document/05-basic-dom-node-properties/2-tree-info/source.view/index.html
diff --git a/2-ui/1-document/04-searching-elements-dom/2-tree-info/task.md b/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/task.md
similarity index 100%
rename from 2-ui/1-document/04-searching-elements-dom/2-tree-info/task.md
rename to 2-ui/1-document/05-basic-dom-node-properties/2-tree-info/task.md
diff --git a/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/solution.md b/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/solution.md
index 19054430b6..e575a7f742 100644
--- a/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/solution.md
+++ b/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/solution.md
@@ -12,6 +12,12 @@
这几步都发生了什么：
+<<<<<<< HEAD
1. `` 内容被注释所取代 ' + key + createTreeText(obj[key]) + ' ';
}
if (li) {
- let ul = '
Flowering
@@ -51,7 +51,7 @@
"oak": {}
},
"Flowering": {
- "redbud": {},
+ "apple tree": {},
"magnolia": {}
}
}
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 f6e51da03d..ea0770a787 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
@@ -21,7 +21,7 @@ let data = {
"oak": {}
},
"Flowering": {
- "redbud": {},
+ "apple tree": {},
"magnolia": {}
}
}
diff --git a/2-ui/1-document/07-modifying-document/article.md b/2-ui/1-document/07-modifying-document/article.md
index e95023075c..5e92172554 100644
--- a/2-ui/1-document/07-modifying-document/article.md
+++ b/2-ui/1-document/07-modifying-document/article.md
@@ -38,7 +38,11 @@ DOM（document object model 文档对象模型，此文中全部以缩写 DOM
这两种方法都可以创建 DOM 节点：
`document.createElement(tag)`
+<<<<<<< HEAD
: 用给定的标签创建一个新元素：
+=======
+: Creates a new *element node* with the given tag:
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
```js
let div = document.createElement('div');
@@ -61,13 +65,21 @@ div.className = "alert alert-success";
div.innerHTML = "Hi there! You've read an important message.";
```
+<<<<<<< HEAD
之后，我们就有拥有一个 DOM 元素。现在这个元素已经有一个保存类名的变量和一个保存文字信息的变量，但是在页面上依然看不到我们想要的内容，因为它还没有被插入到页面中。
+=======
+After that, we have our DOM element ready. Right now it is just in a variable and we cannot see it. That is because it's not yet inserted into the page.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
## 插值方法
为了让 `div` 显示我们想要的内容，我们需要在 `document` 中找个合适的位置插值，这里我们选择 `document.body`。
+<<<<<<< HEAD
这里有一个特定的插值方法：`document.body.appendChild(div)`。
+=======
+There's a special method `appendChild` for that: `document.body.appendChild(div)`.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
这里是完整代码：
@@ -135,8 +147,13 @@ div.innerHTML = "Hi there! You've read an important message.";
*/!*
```
+<<<<<<< HEAD
如果需要把 `newLi` 插入成为第一个子元素，我们可以这样做：
+=======
+ To insert `newLi` as the first element, we can do it like this:
+
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
```js
list.insertBefore(newLi, list.firstChild);
```
@@ -146,9 +163,15 @@ div.innerHTML = "Hi there! You've read an important message.";
所有这些插入节点的操作都会返回节点。换句话说，`parentElem.appendChild(node)` 返回 `node`。但是通常返回的节点都没有用，只是插入方法的默认返回值。
+<<<<<<< HEAD
以上方法都是“旧三板斧”：它们从很早就存在，我们在老的脚本里能看到它们的影子。很不幸，它们已经没法很好的处理现在的需求了。
例如，我们怎样在 **html** 插入字符串呢？又或者，给定你一个节点，你怎样插入到**节点**之前？虽然也能完成需求开发，总归不是那么优雅的解决方式。
+=======
+These methods are "old school": they exist from the ancient times and we can meet them in many old scripts. Unfortunately, they are not flexible enough.
+
+For instance, how to insert *html* if we have it as a string? Or, given a node, without reference to its parent, how to remove it? Of course, that's doable, but not in an elegant way.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
所以诞生了两种优雅插入方法来代替这些繁琐的插入操作。
@@ -162,7 +185,13 @@ This set of methods provides more flexible insertions:
- `node.after(...nodes or strings)` —— 在 `node` 后面插入节点或者字符串，
- `node.replaceWith(...nodes or strings)` —— 将 `node` 替换为节点或者字符串。
+<<<<<<< HEAD
下面例子是使用以上提到的方法在列表项前面或后面插入文本：
+=======
+All of them accept a list of DOM nodes and/or text strings. If a string is given it's inserted as a text node.
+
+Here's an example of using these methods to add more items to a list and the text before/after it:
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
```html autorun
First div
@@ -310,9 +444,13 @@ CSS 选择器的伪类，如 `:hover` 和 `:active` 都是被支持的。例如
现在我们可以很容易地看到不同之处。在文档中出现一个新的 `div` 后，静态集合并没有增加。
+<<<<<<< HEAD
我们在这里使用独立的脚本来说明元素添加是如何影响集合的，但是在此之后的任何 DOM 操作都会影响它们。很快我们就可以看到更多的细节。
## 总结
+=======
+## Summary
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
有 6 种主要的方法，可以在 DOM 中进行搜素：
@@ -327,6 +465,18 @@ CSS 选择器的伪类，如 `:hover` 和 `:active` 都是被支持的。例如
querySelectorquerySelectorAllgetElementByIdidquerySelectorquerySelectorAll<!--BODY-->，因为 `body.tagName == "BODY"`。正如我们所记住的，`tagName` 在 HTML 中总是大写的。
2. 这个注释现在是唯一的子节点，所以我们可以在 `body.firstChild` 中获取。
3. 注释的`data` 属性是它的内容 (inside ``)：`"BODY"`。
+=======
+1. The content of `` is replaced with the comment. The comment is ``, because `body.tagName == "BODY"`. As we remember, `tagName` is always uppercase in HTML.
+2. The comment is now the only child node, so we get it in `body.firstChild`.
+3. The `data` property of the comment is its contents (inside ``): `"BODY"`.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
diff --git a/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md b/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md
index 9f030ec6bb..bf71c8f817 100644
--- a/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md
+++ b/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md
@@ -27,7 +27,11 @@ alert(document.constructor.name); // HTMLDocument
alert(HTMLDocument.prototype.constructor === HTMLDocument); // true
```
+<<<<<<< HEAD
对于所有原型中的内置类，有一个 `constructor` 引用，我们可以获取 `constructor.name` 来查看类名。我们为 `document` 原型链中的所有对象执行以下操作：
+=======
+To get a name of the class as a string, we can use `constructor.name`. Let's do it for the whole `document` prototype chain, till class `Node`:
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
```js run
alert(HTMLDocument.prototype.constructor.name); // HTMLDocument
diff --git a/2-ui/1-document/05-basic-dom-node-properties/article.md b/2-ui/1-document/05-basic-dom-node-properties/article.md
index 6d1423c6a3..447b65e0ad 100644
--- a/2-ui/1-document/05-basic-dom-node-properties/article.md
+++ b/2-ui/1-document/05-basic-dom-node-properties/article.md
@@ -18,6 +18,7 @@ DOM 节点因为它们的类而具有不同的属性。例如，标记 `` 相
类如下所示：
+<<<<<<< HEAD
- [EventTarget](https://dom.spec.whatwg.org/#eventtarget) —— 是根的“抽象”类。该类的对象从未被创建。它作为一个基础，为了让所有 DOM 节点都支持所谓的“事件”，我们会在之后对它进行学习。
- [Node](http://dom.spec.whatwg.org/#interface-node) —— 也是一个“抽象”类，充当 DOM 节点的基础。它提供了树的核心功能：`parentNode`、`nextSibling`、`childNodes` 等（它们都是 getter）。`Node` 类的对象从未被创建。但是一些具体的节点类却继承自它，例如：`Text` 表示文本节点，`Element` 用于元素节点，以及更多外来的类（如注释节点 `Comment`）。
- [Element](http://dom.spec.whatwg.org/#interface-element) —— 是 DOM 元素的基类。它提供了元素级的导航，比如 `nextElementSibling`、`children` 以及像 `getElementsByTagName`、`querySelector` 这样的搜索方法。浏览器中不仅有 HTML，还会有 XML 和SVG 文档。`Element` 类充当以下更具体类的基类：`SVGElement`、`XMLElement` 和 `HTMLElement`。
@@ -26,6 +27,16 @@ DOM 节点因为它们的类而具有不同的属性。例如，标记 `` 相
- [HTMLBodyElement](https://html.spec.whatwg.org/multipage/semantics.html#htmlbodyelement) —— `` 元素的类，
- [HTMLAnchorElement](https://html.spec.whatwg.org/multipage/semantics.html#htmlanchorelement) —— `` 元素的类，
- 等等，每个标记都有可以为自己提供特定属性和方法的类。
+=======
+- [EventTarget](https://dom.spec.whatwg.org/#eventtarget) -- is the root "abstract" class. Objects of that class are never created. It serves as a base, so that all DOM nodes support so-called "events", we'll study them later.
+- [Node](http://dom.spec.whatwg.org/#interface-node) -- is also an "abstract" class, serving as a base for DOM nodes. It provides the core tree functionality: `parentNode`, `nextSibling`, `childNodes` and so on (they are getters). Objects of `Node` class are never created. But there are concrete node classes that inherit from it, namely: `Text` for text nodes, `Element` for element nodes and more exotic ones like `Comment` for comment nodes.
+- [Element](http://dom.spec.whatwg.org/#interface-element) -- is a base class for DOM elements. It provides element-level navigation like `nextElementSibling`, `children` and searching methods like `getElementsByTagName`, `querySelector`. A browser supports not only HTML, but also XML and SVG. The `Element` class serves as a base for more specific classes: `SVGElement`, `XMLElement` and `HTMLElement`.
+- [HTMLElement](https://html.spec.whatwg.org/multipage/dom.html#htmlelement) -- is finally the basic class for all HTML elements. It is inherited by various HTML elements:
+ - [HTMLInputElement](https://html.spec.whatwg.org/multipage/forms.html#htmlinputelement) -- the class for `` elements,
+ - [HTMLBodyElement](https://html.spec.whatwg.org/multipage/semantics.html#htmlbodyelement) -- the class for `` elements,
+ - [HTMLAnchorElement](https://html.spec.whatwg.org/multipage/semantics.html#htmlanchorelement) -- the class for `` elements
+ - ...and so on, each tag has its own class that may provide specific properties and methods.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
因此，给定节点的全部属性和方法都是继承的结果。
@@ -76,7 +87,11 @@ alert( document.body instanceof EventTarget ); // true
```
````smart header="IDL in the spec"
+<<<<<<< HEAD
在规范中，类不是用 JavaScript 描述的，而是一个特殊的[接口描述语言（IDL）](https://en.wikipedia.org/wiki/Interface_description_language)，它很容易理解。
+=======
+In the specification, DOM classes are described not using JavaScript, but a special [Interface description language](https://en.wikipedia.org/wiki/Interface_description_language) (IDL), that is usually easy to understand.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
在 IDL 中，所有的属性都有它们的类型。比如，`DOMString` 和 `boolean` 等等。
@@ -91,7 +106,11 @@ interface HTMLInputElement: HTMLElement {
// 下面是 元素的属性和方法
*!*
+<<<<<<< HEAD
// "DOMString" 意思是这些属性都是字符串
+=======
+ // "DOMString" means that the value of these properties are strings
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
*/!*
attribute DOMString accept;
attribute DOMString alt;
@@ -99,12 +118,20 @@ interface HTMLInputElement: HTMLElement {
attribute DOMString value;
*!*
+<<<<<<< HEAD
// 布尔属性（true/false）
+=======
+ // boolean value property (true/false)
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
attribute boolean autofocus;
*/!*
...
*!*
+<<<<<<< HEAD
//方法 "void" 意思是无返回值
+=======
+ // now the method: "void" means that the method returns no value
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
*/!*
void select();
...
@@ -156,7 +183,11 @@ alert( document.body.nodeName ); // BODY
alert( document.body.tagName ); // BODY
```
+<<<<<<< HEAD
tagName 和 nodeName 之间有何不同？
+=======
+Is there any difference between `tagName` and `nodeName`?
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
当然，差异反映在它们的名字上，但是确实有些微妙。
@@ -175,11 +206,11 @@ tagName 和 nodeName 之间有何不同？
@@ -232,14 +263,22 @@ tagName 和 nodeName 之间有何不同？
```
```smart header="Scripts don't execute"
+<<<<<<< HEAD
如果 `innerHTML` 将 `
```
+<<<<<<< HEAD
还有一个非常重要的不同点。DOM 属性的字符串可能跟特性值的字符串所表示的不是同一个东西！
例如 `href` DOM 属性总是一个绝对路径的，而特性值只包含相对路径或者只包含 `#hash` 这一部分。
+=======
+Most properties are strings though.
+
+Quite rarely, even if a DOM property type is a string, it may differ from the attribute. For instance, the `href` DOM property is always a *full* URL, even if the attribute contains a relative URL or just a `#hash`.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
这里有一个例子：
@@ -382,7 +413,11 @@ div.setAttribute('order-state', 'canceled');
- `elem.removeAttribute(name)` —— 移除这个特性
- `elem.attributes` —— 所有特性的集合
+<<<<<<< HEAD
对于大多数需求，DOM 属性已经可以给予很好的支持。应当在 DOM 属性实在无法满足开发需求的情况下才使用特性，比如以下情况：
+=======
+For most situations using DOM properties is preferable. We should refer to attributes only when DOM properties do not suit us, when we need exactly attributes, for instance:
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
- 我们需要一个非标准化的特性。但是如果我们用 `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 7476de912f..fa8f53060a 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
@@ -12,7 +12,7 @@
let text = 'text';
elem1.append(document.createTextNode(text));
- elem2.textContent = text;
- elem3.innerHTML = text;
+ elem2.innerHTML = text;
+ elem3.textContent = text;
```
diff --git a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html
index 5c0319b620..1bf642b102 100644
--- a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html
+++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html
@@ -54,5 +54,11 @@
clockStart();
+
+
+
+
+
+
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 c2f1d5f3c1..823e8338d6 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
@@ -7,3 +7,5 @@ importance: 4
创建一个彩色时钟：
[iframe src="solution" height=60]
+
+Use HTML/CSS for the styling, JavaScript only updates time in elements.
diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html b/2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html
index aec462fe8a..06d9c01b12 100755
--- a/2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html
+++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html
@@ -17,7 +17,7 @@
"oak": {}
},
"Flowering": {
- "redbud": {},
+ "apple tree": {},
"magnolia": {}
}
}
diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html b/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html
index 9ba40a6d04..0f5f6b0376 100644
--- a/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html
+++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html
@@ -17,7 +17,7 @@
"oak": {}
},
"Flowering": {
- "redbud": {},
+ "apple tree": {},
"magnolia": {}
}
}
@@ -29,11 +29,12 @@
function createTreeText(obj) { // standalone recursive function
let li = '';
+ let ul;
for (let key in obj) {
li += '- ' + li + '
- ' + li + '
-
-
- redbud +
- apple tree
- magnolia
-
@@ -236,6 +265,7 @@ after
接下来登场的这个方法就可以做到：`elem.insertAdjacentHTML(where, html)`。
+<<<<<<< HEAD
该方法第一个参数是字符串，指定插值的位置，必须是以下四个值之一：
- `"beforebegin"` —— 在 `elem` 开头位置前插入 `html`，
@@ -244,6 +274,16 @@ after
- `"afterend"` —— 在 `elem` 结束位置后插入 `html`。
第二个参数是 HTML 字符串，会作为标签插入到页面中。
+=======
+The first parameter is a code word, specifying where to insert relative to `elem`. Must be one of the following:
+
+- `"beforebegin"` -- insert `html` immediately before `elem`,
+- `"afterbegin"` -- insert `html` into `elem`, at the beginning,
+- `"beforeend"` -- insert `html` into `elem`, at the end,
+- `"afterend"` -- insert `html` immediately after `elem`.
+
+The second parameter is an HTML string, that is inserted "as HTML".
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
例如：
@@ -273,10 +313,17 @@ after
这个方法还有两个变种：
+<<<<<<< HEAD
- `elem.insertAdjacentText(where, text)` —— 一样的语法，只不过把 `text` 作为“文本”直接插入到 HTML 中，
- `elem.insertAdjacentElement(where, elem)` —— 一样的语法，只不过插入的是一个元素。
他们存在的意义更多是为了使语法“整齐划一”，在实践中，通常只使用 `insertAdjacentHTML`，因为插入文本和元素的方法可以使用 `append/prepend/before/after` —— 同样的效果这样写起来更简洁。
+=======
+- `elem.insertAdjacentText(where, text)` -- the same syntax, but a string of `text` is inserted "as text" instead of HTML,
+- `elem.insertAdjacentElement(where, elem)` -- the same syntax, but inserts an element.
+
+They exist mainly to make the syntax "uniform". In practice, only `insertAdjacentHTML` is used most of the time. Because for elements and text, we have methods `append/prepend/before/after` -- they are shorter to write and can insert nodes/text pieces.
+>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7
这里有一个展示一条信息的变种写法：
@@ -335,13 +382,89 @@ after
```
+<<<<<<< HEAD
## 移除
+=======
+
+## DocumentFragment [#document-fragment]
+
+`DocumentFragment` is a special DOM node that serves as a wrapper to pass around lists of nodes.
+
+We can append other nodes to it, but when we insert it somewhere, then its content is inserted instead.
+
+For example, `getListContent` below generates a fragment with `
- ` items, that are later inserted into `
- `:
+
+```html run
+
- 1 +
- 2 +
- 3 +
-
+
` 包含给定内容。通知应该在 1.5 秒后自动消失。 +======= +Write a function `showNotification(options)` that creates a notification: `` with the given content. The notification should automatically disappear after 1.5 seconds. +>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7 参数： diff --git a/2-ui/1-document/08-styles-and-classes/article.md b/2-ui/1-document/08-styles-and-classes/article.md index ee8d93109b..abb1f9cd0c 100644 --- a/2-ui/1-document/08-styles-and-classes/article.md +++ b/2-ui/1-document/08-styles-and-classes/article.md @@ -1,6 +1,10 @@ # 样式和类 +<<<<<<< HEAD 在我们讨论 JavaScript 处理样式和类的方法之前 —— 有一个重要的规则。尽管这足够明显的，但我们还是要提到这一点。 +======= +Before we get into JavaScript's ways of dealing with styles and classes -- here's an important rule. Hopefully it's obvious enough, but we still have to mention it. +>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7 通常有两种方式来设计元素样式： @@ -65,11 +69,19 @@ elem.style.top = top; // e.g '456px' `classList` 方法： +<<<<<<< HEAD - `elem.classList.add/remove("class")` —— 添加/移除类。 - `elem.classList.toggle("class")` —— 如果类存在就移除，否则添加。 - `elem.classList.contains("class")` —— 返回 `true/false`，检查给定类。 此外，`classList` 是可迭代的，因此我们可以像下述方法一样列出所有类： +======= +- `elem.classList.add/remove("class")` -- adds/removes the class. +- `elem.classList.toggle("class")` -- adds the class if it doesn't exist, otherwise removes it. +- `elem.classList.contains("class")` -- returns `true/false`, checks for the given class. + +Besides, `classList` is iterable, so we can list all classes with `for..of`, like this: +>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7 ```html run @@ -116,7 +128,11 @@ button.style.WebkitBorderRadius = '5px'; 例如，为了隐藏一个元素，我们可以设置 `elem.style.display = "none"`。 +<<<<<<< HEAD 然后，我们可能要移除 `style.display`，就像它没有被设置一样。这里不应该使用 `delete elem.style.display`，而应该使用 `elem.style.display = ""` 将其赋值为空。 +======= +Then later we may want to remove the `style.display` as if it were not set. Instead of `delete elem.style.display` we should assign an empty string to it: `elem.style.display = ""`. +>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7 ```js run // if we run this code, the "blinks" @@ -125,7 +141,11 @@ document.body.style.display = "none"; // hide setTimeout(() => document.body.style.display = "", 1000); // 恢复正常 ``` +<<<<<<< HEAD 如果我们设置 `display` 为空字符串，那么浏览器一般会应用 CSS 类以及内置样式，就像根本没有这样的 `style` 属性。 +======= +If we set `display` to an empty string, then the browser applies CSS classes and its built-in styles normally, as if there were no such `display` property at all. +>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7 ````smart header="用 `style.cssText` 进行重写" 通常，我们使用 `style.*` 来分配单独的样式属性。我们不能将完整的样式设置为 `div.style="color: red; width: 100px"`，因为 `div.style` 是一个对象，而且它是只读的。 @@ -147,7 +167,11 @@ setTimeout(() => document.body.style.display = "", 1000); // 恢复正常 ``` +<<<<<<< HEAD 我们很少使用它，因为这样的赋值会删除所有现有样式：它不会添加，而是替换它们。偶尔会移出所需的东西。但是当我们知道我们不移出一些重要的内容时，仍然可以对新元素进行处理。 +======= +This property is rarely used, because such assignment removes all existing styles: it does not add, but replaces them. May occasionally delete something needed. But we can safely use it for new elements, when we know we won't delete an existing style. +>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7 通过设置属性：`div.setAttribute('style', 'color: red...')` 也可以实现同样的目的。 ```` @@ -207,7 +231,11 @@ setTimeout(() => document.body.style.display = "", 1000); // 恢复正常 ``` +<<<<<<< HEAD ...但如果我们需要，比如说，把边距增加 20px 呢？那么需要当前值作为开始。 +======= +...But what if we need, say, to increase the margin by 20px? We would want the current value of it. +>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7 还有另一种方法：`getComputedStyle`。 @@ -281,7 +309,11 @@ pseudo 但 `getComputedStyle` 不允许访问该颜色，否则任意页面都可以通过在页面上创建连接并通过检查样式来确定用户是否访问了连接。 +<<<<<<< HEAD JavaScript 中我们看不到 `:visited` 应用的样式。此外，CSS 中也有一个限制，禁止在 `:visited` 中应用更改几何的样式。这是为了保证一个不好的页面没有办法来测试是否访问了链接，从而窥探隐私。 +======= +JavaScript may not see the styles applied by `:visited`. And also, there's a limitation in CSS that forbids to apply geometry-changing styles in `:visited`. That's to guarantee that there's no sideway for an evil page to test if a link was visited and hence to break the privacy. +>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7 ``` ## 总结 diff --git a/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md b/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md index 82ba162df7..b0259c8482 100644 --- a/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md +++ b/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md @@ -6,6 +6,10 @@ importance: 3 编写返回标准滚动条宽度的代码。 +<<<<<<< HEAD 对于Windows，它通常在 `12px` 和 `20px` 之间变化。如果浏览器不为它保留任何空间，那么它可能是 `0px`。 +======= +For Windows it usually varies between `12px` and `20px`. If the browser doesn't reserve any space for it (the scrollbar is half-translucent over the text, also happens), then it may be `0px`. +>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7 P.S. 代码应该适用于任何HTML文档，且不依赖于它的内容元素。 diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.png b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.png index 098f9eb6d5..67b9019a04 100644 Binary files a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.png and b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.png differ diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field@2x.png b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field@2x.png index 3ecb293753..cdd679855e 100644 Binary files a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field@2x.png and b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field@2x.png differ diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md index 87a501baac..f22880b8ec 100644 --- a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md +++ b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md @@ -34,9 +34,13 @@ ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'p 当浏览器还不知道图片的宽/高（图片的尺寸可能来自标签属性或 CSS）的时候它会假设它们的尺寸为 `0`直到图片加载完成。 +<<<<<<< HEAD 实际使用过程中，浏览器会在图片第一次加载完成后缓存该图片，方便下次再次访问时立即显示图片。 但是在第一次加载时 `ball.offsetWidth` 的值为 `0`，这会导致错误的坐标出现。 +======= +After the first load browser usually caches the image, and on next loads it will have the size immediately. But on the first load the value of `ball.offsetWidth` is `0`. That leads to wrong coordinates. +>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7 此时我们应该为 `` 添加 `width/height` 属性： diff --git a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md index 2e3860fc85..df5daf4ec2 100644 --- a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md +++ b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md @@ -1,6 +1,13 @@ 不同点： +<<<<<<< HEAD 1. `clientWidth` 值是数值，然而 `getComputedStyle(elem).width` 返回一个包含 `px` 的字符串。 2. `getComputedStyle` 可能返回非数值的结果，例如内联元素的 `"auto"`。 3. `clientWidth` 是元素的内部内容区域加上内间距，而 CSS 宽度（具有标准的 `box-sizing`）是内部**不包括内间距**的空间区域。 4. 如果有一个滚动条，一般浏览器保留它的空间，有的浏览器从 CSS 宽度中减去这个空间（因为它不再用于内容），而有些则不这样做。`clientWidth` 属性总是相同的：如果保留了滚动条，那么它的宽度将被删去。 +======= +1. `clientWidth` is numeric, while `getComputedStyle(elem).width` returns a string with `px` at the end. +2. `getComputedStyle` may return non-numeric width like `"auto"` for an inline element. +3. `clientWidth` is the inner content area of the element plus paddings, while CSS width (with standard `box-sizing`) is the inner content area *without paddings*. +4. If there's a scrollbar and the browser reserves the space for it, some browser substract that space from CSS width (cause it's not available for content any more), and some do not. The `clientWidth` property is always the same: scrollbar size is substracted if reserved. +>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7 diff --git a/2-ui/1-document/09-size-and-scroll/article.md b/2-ui/1-document/09-size-and-scroll/article.md index 79683bbbba..b01b1ce4bf 100644 --- a/2-ui/1-document/09-size-and-scroll/article.md +++ b/2-ui/1-document/09-size-and-scroll/article.md @@ -38,12 +38,20 @@ JavaScript 中存在许多属性让我们能够读取元素的宽度、高度或 因此，没有滚动条时，内容宽度将是 `300 px`，但是如果滚动条宽度是 `16px`（不同的设备和浏览器，宽度可能会不一样），那么还剩下 `300 - 16＝284px`，这是我们必须考虑到的事。这就是为什么本章的例子总是假设有滚动条的原因。如果没有滚动条，那么事情就会更简单一些。 ``` +<<<<<<< HEAD ```smart header="文本可能会溢出到 `padding-bottom` 中" 内填充通常在插图中显示的是空的，但是如果元素中有很多文本，并且溢出，那么浏览器在 `padding-bottom` 中显示“溢出”文本，这可以在示例中看到。但是填充物仍然存在，除非另有说明。 +======= +```smart header="The `padding-bottom` area may be filled with text" +Usually paddings are shown empty on illustrations, but if there's a lot of text in the element and it overflows, then browsers show the "overflowing" text at `padding-bottom`. + +That's a note to avoid confusion, as `padding-bottom` is set in further examples, unless explicitly specified otherwise. +>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7 ``` ## 几何学 +<<<<<<< HEAD 提供宽度、高度和其他几何形状的元素属性通过数值来计算。它们被假定为像素。 以下是显示总体情况的图片： @@ -51,6 +59,15 @@ JavaScript 中存在许多属性让我们能够读取元素的宽度、高度或  它们有很多属性，很难将它们全部放在单个图片中，但是它们的值很简单，容易理解。 +======= +Here's the overall picture: + + + +Values of these properties are technically numbers, but these numbers are "of pixels", so these are pixel measurements. + +They are many properties, it's difficult to fit them all in the single picture, but their values are simple and easy to understand. +>>>>>>> be342e50e3a3140014b508437afd940cd0439ab7 让我们从元素的外部开始探索它们。 @@ -58,6 +75,7 @@ JavaScript 中存在许多属性让我们能够读取元素的宽度、高度或 这些属性很少出现，但它们仍然是“最外层”的几何属性，所以我们将从它们开始。 +<<<<<<< HEAD `offsetParent` 是最近的祖先元素: 1. CSS 定位（`position` 为 `absolute`、`relative` 或 `fixed`）， @@ -67,6 +85,19 @@ JavaScript 中存在许多属性让我们能够读取元素的宽度、高度或 在大多数实际情况下，我们可以使用 `offsetParent` 来获得最近的 CSS 定位祖先。`offsetLeft/offsetTop` 提供相对于元素左上角的 x/y 坐标。 在下面的例子中，内部 `
` 有 `` 作为 `offsetParent`，并且 `offsetLeft/offsetTop` 让它从左上角位移（`180`）： +======= +The `offsetParent` is the nearest ancestor, that browser uses for calculating coordinates during rendering. + +That's the nearest ancestor, that satisfies following conditions: + +1. CSS-positioned (`position` is `absolute`, `relative`, `fixed` or `sticky`), +2. or ` `, ` `, ` `, +2. or ``. + +Properties `offsetLeft/offsetTop` provide x/y coordinates relative to its upper-left corner. + +In the example below the inner `