diff --git a/1-js/01-getting-started/3-devtools/chrome.png b/1-js/01-getting-started/3-devtools/chrome.png index fd029b747f..a506389072 100644 Binary files a/1-js/01-getting-started/3-devtools/chrome.png and b/1-js/01-getting-started/3-devtools/chrome.png differ diff --git a/1-js/02-first-steps/04-variables/2-declare-variables/solution.md b/1-js/02-first-steps/04-variables/2-declare-variables/solution.md index 6b780ffa4f..65194ae7d9 100644 --- a/1-js/02-first-steps/04-variables/2-declare-variables/solution.md +++ b/1-js/02-first-steps/04-variables/2-declare-variables/solution.md @@ -18,4 +18,4 @@ let currentUserName = "John"; 现代编辑器的自动补全可以让长变量名变得容易书写。不要浪费这个特性。一个名字中包含三个词就挺好的。 -如果你的编辑器没有合适的自动补全，换[一个新的吧](/editors)。 +如果你的编辑器没有合适的自动补全，换[一个新的吧](/code-editors)。 diff --git a/1-js/06-advanced-functions/01-recursion/head.html b/1-js/06-advanced-functions/01-recursion/head.html index c2ac3e8cee..bb7fe8772f 100644 --- a/1-js/06-advanced-functions/01-recursion/head.html +++ b/1-js/06-advanced-functions/01-recursion/head.html @@ -7,7 +7,7 @@ .function-execution-context { border: 1px solid black; - font-family: "Consolas", monospace; + font-family: 'DejaVu Sans Mono', 'Lucida Console', 'Menlo', 'Monaco', monospace; padding: 4px 6px; margin: 0 4px; } @@ -23,4 +23,4 @@ .function-execution-context-list li:first-child { font-weight: bold; } - \ No newline at end of file + diff --git a/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.css b/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.css index a82c7d9c1b..aa47c04631 100755 --- a/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.css +++ b/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.css @@ -5,7 +5,7 @@ border: 1px solid black; background: white; text-align: center; - font: italic 14px Georgia; + font: italic 14px serif; } blockquote { @@ -25,4 +25,4 @@ blockquote:before { line-height: .1em; margin-right: .25em; vertical-align: -.4em; -} \ No newline at end of file +} diff --git a/2-ui/1-document/11-coordinates/2-position-at/source.view/index.css b/2-ui/1-document/11-coordinates/2-position-at/source.view/index.css index a82c7d9c1b..aa47c04631 100755 --- a/2-ui/1-document/11-coordinates/2-position-at/source.view/index.css +++ b/2-ui/1-document/11-coordinates/2-position-at/source.view/index.css @@ -5,7 +5,7 @@ border: 1px solid black; background: white; text-align: center; - font: italic 14px Georgia; + font: italic 14px serif; } blockquote { @@ -25,4 +25,4 @@ blockquote:before { line-height: .1em; margin-right: .25em; vertical-align: -.4em; -} \ No newline at end of file +} diff --git a/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.css b/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.css index 700bd8c22b..c4dd26160e 100644 --- a/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.css +++ b/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.css @@ -5,7 +5,7 @@ border: 1px solid black; background: white; text-align: center; - font: italic 14px Georgia; + font: italic 14px serif; } blockquote { @@ -25,4 +25,4 @@ blockquote:before { line-height: .1em; margin-right: .25em; vertical-align: -.4em; -} \ No newline at end of file +} diff --git a/2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.css b/2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.css index d2493f6ebc..f2b2cca86b 100644 --- a/2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.css +++ b/2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.css @@ -5,7 +5,7 @@ border: 1px solid black; background: white; text-align: center; - font: italic 14px Georgia; + font: italic 14px serif; opacity: .8; } @@ -26,4 +26,4 @@ blockquote:before { line-height: .1em; margin-right: .25em; vertical-align: -.4em; -} \ No newline at end of file +} diff --git a/2-ui/1-document/11-coordinates/head.html b/2-ui/1-document/11-coordinates/head.html index efc6cd1cbe..bba7bec068 100644 --- a/2-ui/1-document/11-coordinates/head.html +++ b/2-ui/1-document/11-coordinates/head.html @@ -1,8 +1,9 @@ \ No newline at end of file + 1 t:1 diff --git a/archive/01-hello-world/1-hello-alert/solution.md b/archive/01-hello-world/1-hello-alert/solution.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/archive/01-hello-world/1-hello-alert/solution.view/index.html b/archive/01-hello-world/1-hello-alert/solution.view/index.html deleted file mode 100644 index 45e6744b3a..0000000000 --- a/archive/01-hello-world/1-hello-alert/solution.view/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - \ No newline at end of file diff --git a/archive/01-hello-world/1-hello-alert/task.md b/archive/01-hello-world/1-hello-alert/task.md deleted file mode 100644 index afed6a91d3..0000000000 --- a/archive/01-hello-world/1-hello-alert/task.md +++ /dev/null @@ -1,12 +0,0 @@ -importance: 5 - ---- - -# Show an alert - -Create a page that shows a message "I'm JavaScript!". - -Do it in a sandbox, or on your hard drive, doesn't matter, just ensure that it works. - -[demo src="solution"] - diff --git a/archive/01-hello-world/article.md b/archive/01-hello-world/article.md deleted file mode 100644 index 4021e13732..0000000000 --- a/archive/01-hello-world/article.md +++ /dev/null @@ -1,89 +0,0 @@ -# Hello, world! - -大概 98% 的教程都是 JavaScript 核心，而且它们都是跨平台的。所以你可以学习如何使用 Node.Js 和其他基于 Js 的知识。 - -但是我们需要一些类似“基础环境”的东西来运行脚本，浏览器就是一个很不错的选择。 - -所以我们从在网页上添加脚本开始。对于其他环境例如 Node.JS，还有其他方式去运行它。 - -[TODO defer/async 转到第二部分？] - -## "script" 标签 - -[TODO 需要这个？并且特殊（也需要它？）] -```smart header="如果我希望进度更快点呢？" -如果你已经使用 JavaScript 开发过或者对其他语言很有经验，你可以跳过细节解释并跳到 ，在那里你可以找到重要特征的本质。 - -如果你有足够的时间希望深入学习，那么请继续看： -``` - -JavaScript 程序可以通过使用 -*/!* - -

...脚本运行后

- - - - -``` - -```online -你可以点击右上角的 "Play" 按钮运行这个示例程序。 -``` - -由 - ``` - - 这些注释会在浏览器无法解析 - - - - \ No newline at end of file diff --git a/archive/02-external-script/1-hello-alert-ext/solution.md b/archive/02-external-script/1-hello-alert-ext/solution.md deleted file mode 100644 index f42c41e6db..0000000000 --- a/archive/02-external-script/1-hello-alert-ext/solution.md +++ /dev/null @@ -1,8 +0,0 @@ -The HTML code: - -[html src="index.html"] - -For the file `alert.js` in the same folder: - -[js src="alert.js"] - diff --git a/archive/02-external-script/1-hello-alert-ext/task.md b/archive/02-external-script/1-hello-alert-ext/task.md deleted file mode 100644 index fe38de403e..0000000000 --- a/archive/02-external-script/1-hello-alert-ext/task.md +++ /dev/null @@ -1,9 +0,0 @@ -importance: 5 - ---- - -# Show an alert with an external script - -Take the solution of the previous task . Modify it by extracting the script content into an external file `alert.js`, residing in the same folder. - -Open the page, ensures that the alert works. diff --git a/archive/02-external-script/2-async-defer-first/solution.md b/archive/02-external-script/2-async-defer-first/solution.md deleted file mode 100644 index 0513e5fc05..0000000000 --- a/archive/02-external-script/2-async-defer-first/solution.md +++ /dev/null @@ -1,5 +0,0 @@ -Answers: - -1. The first is `big.js`, that's a normal sequence for external ` - -``` - -What if we add `async`? - -```html - - -``` - -What if we switch to `defer`? - -```html - - -``` - diff --git a/archive/02-external-script/article.md b/archive/02-external-script/article.md deleted file mode 100644 index 0de9bf907a..0000000000 --- a/archive/02-external-script/article.md +++ /dev/null @@ -1,251 +0,0 @@ -# 外部脚本 - -如果我们有很多 JavaScript 代码，我们可以将他们放在一个单独的文件里。 - -脚本文件可以被这样添加到 HTML 中： - -```html - -``` - - 这里的 `/path/to/script.js` 是一个脚本文件所在的绝对路径（从网站根目录） - -也可以提供一个当前页面的相对路径。例如：`src="script.js"` 意味着在当前文件夹的一个文件，名为 `"script.js"`。 - -我们也可以提供一个完整的 URL，例如： - -```html - -``` - -添加多个脚本，要使用多个标签： - -```html - - -… -``` - -```smart -作为规定，只有最简单的脚本才被直接写在 HTML 中。稍复杂的都要写在一个单独的文件中。 - -分离文件的好处是浏览器将会下载它并将其写入[缓存](https://en.wikipedia.org/wiki/Web_cache)。 - -在这之后，其他页面用到和这个相同的脚本的时候，将直接从缓存中读取而不用重新下载。所以实际上这个文件只需要被下载一次。 - -这样可以节省流量并提高页面加载速度。 -``` - -````warn header="如果 `src` 这个属性已被设置，脚本的内容将被忽略。" -一个单独的 ` -``` - -我们必须二选一：在外部 ` - -``` -```` - -## 异步脚本：defer/async - -浏览器逐渐加载并显示 HTML，当网速慢的时候可以很明显的被观察到。浏览器不会等到页面加载完毕，它显示已经被加载的部分，然后当新内容加载后再添加显示。 - -我们之前说过，当浏览器遇到一个 ` -*/!* - -

所有兔子都被计数！

- - - -``` - -这个行为叫做“同步”。通常来说这样不会产生问题，但有一种特殊的情况。 - -**如果一个脚本在外部，用户必须等到浏览器下载并执行完它。** - -所以，在这段代码中，直到 `big.js` 加载并执行，`` 的内容才得以显示。 - -```html - - -*!* - -*/!* - - - 这段文字直到浏览器执行完 big.js 才显示。 - - -``` - -问题是 — 我们真的希望用户等待直到脚本运行结束？ - -大多数时间，我们不希望。 - -有时候，一个脚本可能包含着非常重要的脚本，必须在页面其他内容解析（之后执行的脚本）之前加载。但这也只是有时。 - - -通常，一个用户在脚本加载时应该可以看到页面。尤其是包含重要内容的网站（例如教程）— 即使一些接口还没被激活（脚本还没加载），用户也能阅读文字和导航。 - -在一些情况下，这些阻塞甚至是很危险的。例如，当我们想轮播中加一段脚本，或集成第三方代码。 -比如这样： - -```html run height=100 -等等，下面的文本只有在脚本执行后才会展示出来。 - - - - -

...重要信息

-``` - -页面的其余部分在加载轮播之前没有显示是错误的。如果他们的服务器过载，响应很慢怎么办？我们的用户将要等待更久，甚至离开去了其他更快的网站。 - -所以，怎么“解决”这个阻塞的问题？ - -我们第一步尝试是将这些脚本放在 `` 的底部，在所有内容之后。 - -但是这种解决方法并不完美： - -1. 脚本只能在 HTML 加载完才能开始运行。如果 HTML 很大，这个延迟将会很明显。我们希望浏览器能尽早来加载脚本，还不会阻塞页面渲染。 -2. 如果在页面的底部有很多脚本，他们排起队来执行。浏览器一次只能执行一段 ` - -

...重要信息！

-``` - -现在如果我们执行它，我们将看到整个文档立即显示，并且当它加载的同时，外部脚本也在执行。 - -让我们看看更多关于 `defer` 和 `async` 的例子来更全面地了解他们的相似之处和不同。 - -这两个属性都允许浏览器不用等待脚本加载就显示页面。但... - -1. 延后的脚本保持了脚本的执行顺序，然而异步脚本没有。 - - 举个例子，在下面这段代码中（使用了 `async`）有两段脚本。先加载的将首先运行。 - - ```html - - - ``` - - 如果 `2.js` 比 `1.js` 大，就很有可能`2.js` 在 `1.js` 之前运行。这很正常，异步脚本是完全独立的。 - - 在下面这段使用了 `defer` 的代码中，强制了浏览器保持执行顺序。即使 `2.js` 现加载完毕，它也会在 `1.js` 之后执行。 - - ```html - - - ``` - - “延后”脚本的这个特性在 `2.js` 依赖 `1.js` 的结果时很重要，我们必须确定这个顺序是确定的。 - -2. 一个用了 `defer` 的脚本总是等 HTML 文档流完全加载后，`async` 脚本会在加载时立即执行。 - - 举个例子，当文档很大的时候，例如： - - ```html - - - - A long long text. Many words. - ... - ``` - - ...这里的 `async.js` 在加载时执行 — 肯能实在文本完全加载之前。 比较来说， `defer.js` 总是在等文档全部加载。 - - 所以，如果一个脚本不需要文档的剩余部分（比如web计数器），`async` 是更好的选择。另一种情况脚本可能需要整个文档才能工作，这样 `defer` 就更好。 - - -```smart header="`async` 或者 `defer`" -我们不能在一段脚本中同时使用 `defer` 和 `async`。如果这样的话，`async` 优先，`defer` 被忽略。 -``` - -```warn header="`async/defer` 属性只适用于外部脚本。" -`async/defer` 属性只有在带有 `src` 的脚本上才有效。 - -On a script without `src` like <script>...</script>, they will be ignored. -在没有 `src` 的脚本上设置 `async/defer` 属性无效，例如 <script>...</script>。 -``` - - -## 总结 - -- 外部脚本可以通过 ``插入页面。 -- 浏览器直到脚本执行完才能显示脚本以后的内容，除非脚本设置了 `async` 或 `defer` 属性。 --`async` 和 `defer` 属性允许浏览器开始加载脚同时继续渲染页面。他们只对外部脚本有效。 -- 不同点是 `defer` 保持了脚本的执行顺序，并总是在在文档完全加载之后，相反，`async` 脚本加载时就执行，没有任何条件。 - -在插入一条 ` -[/html] - -The `click` processing order: -
    -
  1. `alert('in onclick')` works.
    2. -
  2. The attribute is changed and the DOM mutation event is processed synchronously, immediately triggering `onchange`. It outputs `alert('onpropchange')`.
    3. -
  3. The rest of `onclick` executes, leading to `alert('out onclick')`.
    4. -
- - -### Nested DOM events are synchronous. - -[summary] -There are methods which trigger an immediate event, like `elem.focus()`. These events are also processed in a synchronous manner. -[/summary] - -Run the example below and click on the button. Notice that `onfocus` -doesn't wait `onclick` to complete, it works immediately. - -[html autorun height=auto] - - - - -[/html] - -In the example above, the alert order is in onclick->focus->out onclick, that clearly demonstrates the synchronous behavior. - -[smart] -The line labelled (*) is required, because `alert(message)` focuses on the message window. When it is disposed, the browser refocuses back. - -So without (*) the `focus` would be triggered one extra time after the alert. -[/smart] - -[summary] -Events are also processed immediately when triggered from JavaScript by `dispatchEvent/fireEvent`. -[/summary] - -Usually event handlers are executed one by one. So we assume that one handler finishes before the other starts. - -**Synchronous events break this one-by-one rule, that may can cause side-effects.** - -For example, the `onfocus` handler may assume that `onclick` has completed the job. - -There are two ways to fix it: -
    -
  1. Move `text.focus()` to the end of the `onclick` code.
    2. -
  2. Wrap `text.focus()` into `setTimeout(.., 0)`: -[js] -button.onclick = function() { - alert(1) - setTimeout(function() { text.focus() }, 0) - alert(2) -} -[/js] -
    3. -
- -The concrete way is chosen according to your architecture. - - -## JavaScript execution and rendering - -[summary]In most browsers, rendering and JavaScript use single event queue. It means that while JavaScript is running, no rendering occurs.[/summary] - -Check it on the demo below. **When you press `run`, the browser may halt for some time**, because it changes `div.style.backgroundColor` from #A00000 to #FFFFFF. - -In most browsers, you see nothing until the script finishes, or until the browser pauses it with a message that 'a script is running too long'. - -The exception is Opera. - -[html run] -
- - - - -[/html] - -In Opera, you may notice `div` is redrawn. Not every change causes a repaint, probably because of Opera internal scheduling. That's because event queues for rendering and JavaScript are different in this browser. - -In other browsers the repaint is postponed until the JavaScript finishes. - -Again, the implementation may be different, but generally **the nodes are marked as "dirty" (want to be recalculated and redrawn), and repaint is queued**. Or, the browser may just look for dirty nodes after every script and process them. - -[smart header="Immediate reflow"] -The browser contains many optimizations to speedup rendering and painting. Generally, it tries to postpone them until the script is finished, but some actions require nodes to be rerendered immediately. - -For example: -[js] -elem.innerHTML = 'new content' -alert(elem.offsetHeight) // <-- rerenders elem to get offsetHeight -[/js] - -In the case above, the browser has to perform relayouting to get the height. -But it doesn't have to repaint `elem` on the screen. - -Sometimes other dependant nodes may get involved into calculations. This process is called *reflow* and may consume lots of resources if script causes it often. - -Surely, there's much more to talk about rendering. It will be covered by a separate article [todo]. -[/smart] - - -## Modal and synchronous calls - -[summary]Modal and synchronous calls like `alert` pause the JavaScript thread. - -That causes related activities to freeze. -[/summary] - -The example below demonstrates it. - -
    -
  1. Press "Run". The `setInterval`-based animation will start and and `alert` button will appear.
    2. -
  2. Press the button, note that the animation stops.
    3. -
- - -[html run height=60] -
- - - -[/html] - -When you press `alert('Hello!')`, the `alert` blocks JavaScript execution and blocks the whole UI thread. That's how `alert`, `confirm` and `prompt` work. And there is only one thread. So, **`setTimeout/setInterval` can't execute while the thread is blocked.** - - -### Opera: `iframes` exception. - -[summary]Usually, `iframes` run in the same thread with the page. [/summary] - -But there is an exception called Opera. **Run the example above in Opera** and press alert in the main window. The iframe animation will continue! -That's because the example is actually running in an iframe. - -Other browsers use single thread for whole tab, so the iframe animation is paused there. - - - -## Script taking too long and heavy jobs - -JavaScript can be heavy. - -In this case, the browser may hangup for a moment or come with a warning "Script is taking too long". - -We'd want to evade that. It can be done by split the job into parts which get scheduled after each other. - -Then there is a "free time" for the browser to respond between parts. It is can render and react on other events. Both the visitor and the browser are happy. - -The background color in the example below is changed once per tick. So the browser has the time to render it, and there are no hangups. Changes are applied incrementally. - -Press the run button on the example to start. -[html run] -
- - - - - -[/html] - -The internal order: -
    -
  1. `setTimeout` appends the `func` call to the event queue.
    2. -
  2. The new call is scheduled on the next tick.
    3. -
  3. The func executes and changes the `div` which appends a repaint request to the queue.
    4. -
  4. The function finishes. The browser takes the next event from the queue which is repaint and executes it. Then it waits the next tick to execute one more `func` call (see step 2).
    5. -
  5. Repeated until `stop()`
    6. -
- -A delay may be increased from 0 to 100 ms, depending on your needs. The longer delay leads to less CPU load. - -[smart header="Evade the 'script is running for too long' warning"] -As an important side-effect, splitting the long job into parts which are executed by `setTimeout` helps to fix browser hangups and evade warnings. - -For example, modern syntax highlighters employ such technique. When a visitor opens a large text, they highlight a part of it then call something like `setTimeout(highlightNext, 50)` which highlights the next part etc. - -It would hangup otherwise, because the syntax highlighting takes time. -[/smart] - - - -## Summary - -Most browsers use single thread for UI and JavaScript, which is blocked by synchronous calls. So, JavaScript execution blocks the rendering. - -Events are processed asynchronously with the exception of DOM events. - -The `setTimeout(..,0)` trick is very useful. It allows to: - - -Opera is special in many places when it comes to timeouts and threading. diff --git a/archive/2-eval-calculator-errors/solution.md b/archive/2-eval-calculator-errors/solution.md deleted file mode 100644 index c564d3ee19..0000000000 --- a/archive/2-eval-calculator-errors/solution.md +++ /dev/null @@ -1,34 +0,0 @@ -Вычислить любое выражение нам поможет `eval`: - -```js run -alert( eval("2+2") ); // 4 -``` - -Считываем выражение в цикле `while(true)`. Если при вычислении возникает ошибка -- ловим её в `try..catch`. - -Ошибкой считается, в том числе, получение `NaN` из `eval`, хотя при этом исключение не возникает. Можно бросить своё исключение в этом случае. - -Код решения: - -```js run demo -let expr, res; - -while (true) { - expr = prompt("Введите выражение?", '2-'); - if (expr == null) break; - - try { - res = eval(expr); - if (isNaN(res)) { - throw new Error("Результат неопределён"); - } - - break; - } catch (e) { - alert( "Ошибка: " + e.message + ", повторите ввод" ); - } -} - -alert( res ); -``` - diff --git a/archive/2-eval-calculator-errors/task.md b/archive/2-eval-calculator-errors/task.md deleted file mode 100644 index b317d52ea1..0000000000 --- a/archive/2-eval-calculator-errors/task.md +++ /dev/null @@ -1,14 +0,0 @@ -importance: 5 - ---- - -# Eval-калькулятор с ошибками [todo: NO EVAL YET] - -Напишите интерфейс, который принимает математическое выражение (в `prompt`) и результат его вычисления через `eval`. - -**При ошибке нужно выводить сообщение и просить переввести выражение**. - -Ошибкой считается не только некорректное выражение, такое как `2+`, но и выражение, возвращающее `NaN`, например `0/0`. - -[demo] - diff --git a/archive/2-events-and-timing-depth/article.md b/archive/2-events-and-timing-depth/article.md deleted file mode 100644 index 3254326fa1..0000000000 --- a/archive/2-events-and-timing-depth/article.md +++ /dev/null @@ -1,170 +0,0 @@ -# Порядок обработки событий - -События могут возникать не только по очереди, но и "пачкой" по много сразу. Возможно и такое, что во время обработки одного события возникают другие, например пока выполнялся код для `onclick` -- посетитель нажал кнопку на клавиатуре (событие `keydown`). - -Здесь мы разберём, как браузер обычно работает с одновременно возникающими событиями и какие есть исключения из общего правила. - -## Главный поток - -В каждом окне выполняется только один *главный* поток, который занимается выполнением JavaScript, отрисовкой и работой с DOM. - -Он выполняет команды последовательно, может делать только одно дело одновременно и блокируется при выводе модальных окон, таких как `alert`. - -```smart header="Дополнительные потоки тоже есть" -Есть и другие, служебные потоки, например, для сетевых коммуникаций. - -Поэтому скачивание файлов может продолжаться пока главный поток ждёт реакции на `alert`. Но управлять служебными потоками мы не можем. -``` - -```smart header="Web Workers" -Существует спецификация Web Workers, которая позволяет запускать дополнительные JavaScript-процессы(workers). - -Они могут обмениваться сообщениями с главным процессом, но у них свои переменные, и работают они также сами по себе. - -Такие дополнительные процессы не имеют доступа к DOM, поэтому они полезны, преимущественно, при вычислениях, чтобы загрузить несколько ядер/процессоров одновременно. -``` - -## Очередь событий - -Произошло одновременно несколько событий или во время работы одного случилось другое -- как главному потоку обработать это? - -Если главный поток прямо сейчас занят, то он не может срочно выйти из середины одной функции и прыгнуть в другую. А потом третью. Отладка при этом могла бы превратиться в кошмар, потому что пришлось бы разбираться с совместным состоянием нескольких функций сразу. - -Поэтому используется альтернативный подход. - -**Когда происходит событие, оно попадает в очередь.** - -Внутри браузера непрерывно работает "главный внутренний цикл", который следит за состоянием очереди и обрабатывает события, запускает соответствующие обработчики и т.п. - -**Иногда события добавляются в очередь сразу пачкой.** - -Например, при клике на элементе генерируется несколько событий: - -1. Сначала `mousedown` -- нажата кнопка мыши. -2. Затем `mouseup` -- кнопка мыши отпущена и, так как это было над одним элементом, то дополнительно генерируется `click` (два события сразу). - -````online -В действии: - -```html autorun height=150 no-beautify - - - -``` -```` - -Таким образом, при нажатии кнопки мыши в очередь попадёт событие `mousedown`, а при отпускании -- сразу два события: `mouseup` и `click`. Браузер обработает их строго одно за другим: `mousedown` -> `mouseup` -> `click`. - -При этом каждое событие из очереди обрабатывается полностью отдельно от других. - -## Вложенные (синхронные) события - -Обычно возникающие события "становятся в очередь". - -Но в тех случаях, когда событие инициируется не посетителем, а кодом, то оно, как правило, обрабатывается синхронно, то есть прямо сейчас. - -Рассмотрим в качестве примера событие `onfocus`. - -### Пример: событие onfocus - -Когда посетитель фокусируется на элементе, возникает событие `onfocus`. Обычно оно происходит, когда посетитель кликает на поле ввода, например: - -```html run height=80 autorun -

При фокусе на поле оно изменит значение.

- -``` - -Но ту же фокусировку можно вызвать и явно, вызовом метода `elem.focus()`: - -```html run - - - -``` - -В главе мы познакомимся с этим событием подробнее, а пока -- нажмите на кнопку в примере ниже. - -При этом обработчик `onclick` вызовет метод `focus()` на текстовом поле `text`. Код обработчика `onfocus`, который при этом запустится, сработает синхронно, прямо сейчас, до завершения `onclick`. - -```html autorun height=80 no-beautify - - - - -``` - -При клике на кнопке в примере выше будет видно, что управление вошло в `onclick`, затем перешло в `onfocus`, затем вышло из `onclick`. - -```warn header="Исключение в IE" -Так ведут себя все браузеры, кроме IE. - -В нём событие `onfocus` -- всегда асинхронное, так что будет сначала полностью обработан клик, а потом -- фокус. В остальных -- фокус вызовется посередине клика. Попробуйте кликнуть в IE и в другом браузере, чтобы увидеть разницу. -``` - -## Делаем события асинхронными через setTimeout(...,0) - -А что, если мы хотим, чтобы *сначала* закончилась обработка `onclick`, а потом уже произошла обработка `onfocus` и связанные с ней действия? - -Можно добиться и этого. - -Один вариант -- просто переместить строку `text.focus()` вниз кода обработчика `onclick`. - -Если это неудобно, можно запланировать `text.focus()` чуть позже через `setTimeout(..., 0)`, вот так - -```html autorun height=80 - - - - -``` - -Такой вызов обеспечит фокусировку через минимальный "тик" таймера, по стандарту равный 4 мс. Обычно такая задержка не играет роли, а необходимую асинхронность мы получили. - -## Итого - -- JavaScript выполняется в едином потоке. Современные браузеры позволяют порождать подпроцессы Web Workers, они выполняются параллельно и могут отправлять/принимать сообщения, но не имеют доступа к DOM. -- Обычно события становятся в очередь и обрабатываются в порядке поступления, асинхронно, независимо друг от друга. -- Синхронными являются вложенные события, инициированные из кода. -- Чтобы сделать событие гарантированно асинхронным, используется вызов через `setTimeout(func, 0)`. - -Отложенный вызов через `setTimeout(func, 0)` используется не только в событиях, а вообще -- всегда, когда мы хотим, чтобы некая функция `func` сработала после того, как текущий скрипт завершится. - diff --git a/archive/4-random-from-array/solution.md b/archive/4-random-from-array/solution.md deleted file mode 100644 index c07a93bc42..0000000000 --- a/archive/4-random-from-array/solution.md +++ /dev/null @@ -1,12 +0,0 @@ -We need to generate a random integer value from `0` to `arr.length-1`, and then take the element with that index. - -Here we go: - -```js run -let arr = ["Apple", "Orange", "Pear", "Lemon"]; - -let rand = Math.floor(Math.random() * arr.length); - -alert( arr[rand] ); -``` - diff --git a/archive/4-random-from-array/task.md b/archive/4-random-from-array/task.md deleted file mode 100644 index c40a10c19d..0000000000 --- a/archive/4-random-from-array/task.md +++ /dev/null @@ -1,11 +0,0 @@ -importance: 3 - ---- - -# A random array value - -Write the code to `alert` a random value from the array: - -```js -let arr = ["Apple", "Orange", "Pear", "Lemon"]; -``` diff --git a/archive/5-drag-and-drop-objects/article.md b/archive/5-drag-and-drop-objects/article.md deleted file mode 100644 index 3b8f331363..0000000000 --- a/archive/5-drag-and-drop-objects/article.md +++ /dev/null @@ -1,512 +0,0 @@ -# Мышь: Drag'n'Drop более глубоко - -В [предыдущей статье](/drag-and-drop) мы рассмотрели основы Drag'n'Drop. Здесь мы разберём дополнительные "тонкие места" и приёмы реализации, которые возникают на практике. - -Почти все javascript-библиотеки реализуют Drag'n'Drop так, как написано (хотя бывает что и менее эффективно). - -Зная, что и как, вы сможете легко написать свой код переноса или поправить, адаптировать существующую библиотеку под себя. - -Этот материал не строго обязателен для изучения, он специфичен именно для Drag'n'Drop. - -## Документ - -Как пример задачи -- возьмём документ с иконками браузера ("объекты переноса"), которые можно переносить в компьютер ("цель переноса"): - -- Элементы, которые можно переносить (иконки браузеров), помечены классом `draggable`. -- Элементы, на которые можно положить (компьютер), имеют класс `droppable`. - -```html - - - - - - -

Браузер переносить сюда:

- - -``` - -Работающий пример с переносом: - -[iframe border=1 src="dragDemo" height=280 link edit] - -Далее мы рассмотрим, как делается фреймворк для таких переносов, а в перспективе -- и для более сложных. - -Требования: - -- Поддержка большого количества элементов без "тормозов". -- Продвинутые возможности по анимации переноса. -- Удобная обработка успешного и неудачного переноса. - -## Начало переноса - -Чтобы начать перенос элемента, мы должны отловить нажатие левой кнопки мыши на нём. Для этого используем событие `mousedown`... И, конечно, делегирование. - -Переносимых элементов может быть много. В нашем документе-примере это всего лишь несколько иконок, но если мы хотим переносить элементы списка или дерева, то их может быть 100 штук и более. - -Поэтому повесим обработчик `mousedown` на контейнер, который содержит переносимые элементы, и будем определять нужный элемент поиском ближайшего `draggable` вверх по иерархии от `event.target`. - -В качестве контейнера здесь будем брать `document`, хотя это может быть и любой элемент. - -Найденный `draggable`-элемент сохраним в свойстве `dragObject.elem` и начнём двигать. - -Код обработчика `mousedown`: - -```js -let dragObject = {}; - -document.onmousedown = function(e) { - - if (e.which != 1) { // если клик правой кнопкой мыши - return; // то он не запускает перенос - } - - let elem = e.target.closest('.draggable'); - - if (!elem) return; // не нашли, клик вне draggable-объекта - - // запомнить переносимый объект - dragObject.elem = elem; - - // запомнить координаты, с которых начат перенос объекта - dragObject.downX = e.pageX; - dragObject.downY = e.pageY; -} -``` - -```warn header="Не начинаем перенос по `mousedown`" -Ранее мы по `mousedown` начинали перенос. - -Но на самом деле нажатие на элемент вовсе не означает, что его собираются куда-то двигать. Возможно, на нём просто кликают. - -Это важное различие. Снимать элемент со своего места и куда-то двигать нужно только при переносе. - -Чтобы отличить перенос от клика, в том числе -- от клика, который сопровождается нечаянным перемещением на пару пикселей (рука дрогнула), мы будем запоминать в `dragObject`, какой элемент (`elem`) и где (`downX/downY`) был зажат, а начало переноса будем инициировать из `mousemove`, если он передвинут хотя бы на несколько пикселей. -``` - -## Перенос элемента - -Первой задачей обработчика `mousemove` является инициировать начало переноса, если элемент передвинули в зажатом состоянии. - -Ну а второй задачей -- отображать его перенос при каждом передвижении мыши. - -Схематично, обработчик будет иметь такой вид: - -```js -document.onmousemove = function(e) { - if (!dragObject.elem) return; // элемент не зажат - - if (!dragObject.avatar) { // элемент нажат, но пока не начали его двигать - ...начать перенос, присвоить dragObject.avatar = переносимый элемент - } - - ...отобразить перенос элемента... -} -``` - -Здесь мы видим новое свойство `dragObject.avatar`. При начале переноса "аватар" делается из элемента и сохраняется в свойство `dragObject.avatar`. - -**"Аватар" -- это DOM-элемент, который перемещается по экрану.** - -Почему бы не перемещать по экрану сам `draggable`-элемент? Зачем, вообще, нужен аватар? - -Дело в том, что иногда сам элемент передвигать неудобно, например потому, что он слишком большой. А удобно создать некоторое визуальное представление элемента, и его уже переносить. Аватар дает такую возможность. - -А в простейшем случае аватаром можно будет сделать сам элемент, и это не повлечёт дополнительных расходов. - -### Визуальное перемещение аватара - -Для того, чтобы отобразить перенос аватара, достаточно поставить ему `position: absolute` и менять координаты `left/top`. - -Для использования абсолютных координат относительно документа, аватар должен быть прямым потомком `BODY`. - -Следующий код готовит аватар к переносу: - -```js -// в начале переноса: -if (avatar.parentNode != document.body) { - document.body.appendChild(avatar); // переместить в BODY, если надо -} -avatar.style.zIndex = 9999; // сделать, чтобы элемент был над другими -avatar.style.position = 'absolute'; -``` - -... А затем его можно двигать: - -```js -// при каждом движении мыши - -avatar.style.left = новая координата + 'px'; -avatar.style.top = новая координата + 'px'; -``` - -Как вычислять новые координаты `left/top` при переносе? - -Чтобы элемент сохранял свою позицию под курсором, необходимо при нажатии запомнить его изначальный сдвиг относительно курсора, и сохранять его при переносе. - -![](shiftx.png) - -Этот сдвиг по горизонтали обозначен `shiftX` на рисунке выше. Аналогично, есть `shiftY`. Они вычисляются как расстояние между курсором и левой/верхней границей элемента при `mousedown`. Детали вычислений описаны в главе . - -Таким образом, при `mousemove` мы будем назначать элементу координаты курсора с учетом сдвига `shiftX/shiftY`: - -```js -avatar.style.left = e.pageX - shiftX + 'px'; -avatar.style.top = e.pageY - shiftY + 'px'; -``` - -## Полный код mousemove - -Код `mousemove`, решающий задачу начала переноса и позиционирования аватара: - -```js -document.onmousemove = function(e) { - if (!dragObject.elem) return; // элемент не зажат - - if ( !dragObject.avatar ) { // если перенос не начат... - - // посчитать дистанцию, на которую переместился курсор мыши - let moveX = e.pageX - dragObject.downX; - let moveY = e.pageY - dragObject.downY; - if ( Math.abs(moveX) < 3 && Math.abs(moveY) < 3 ) { - return; // ничего не делать, мышь не передвинулась достаточно далеко - } - - *!*dragObject.avatar = createAvatar(e)*/!*; // захватить элемент - if (!dragObject.avatar) { - dragObject = {}; // аватар создать не удалось, отмена переноса - return; // возможно, нельзя захватить за эту часть элемента - } - - // аватар создан успешно - // создать вспомогательные свойства shiftX/shiftY - let coords = getCoords(dragObject.avatar); - dragObject.shiftX = dragObject.downX - coords.left; - dragObject.shiftY = dragObject.downY - coords.top; - - *!*startDrag(e)*/!*; // отобразить начало переноса - } - - // отобразить перенос объекта при каждом движении мыши - dragObject.avatar.style.left = e.pageX - dragObject.shiftX + 'px'; - dragObject.avatar.style.top = e.pageY - dragObject.shiftY + 'px'; - - return false; -} -``` - -Здесь используются две функции для начала переноса: `createAvatar(e)` и `startDrag(e)`. - -Функция `createAvatar(e)` создает аватар. В нашем случае в качестве аватара берется сам `draggable` элемент. После создания аватара в него записывается функция `avatar.rollback`, которая задает поведение при отмене переноса. - -Как правило, отмена переноса влечет за собой разрушение аватара, если это был клон, или возвращение его на прежнее место, если это сам элемент. - -В нашем случае для отмены переноса нужно запомнить старую позицию элемента и его родителя. - -```js -function createAvatar(e) { - - // запомнить старые свойства, чтобы вернуться к ним при отмене переноса - let avatar = dragObject.elem; - let old = { - parent: avatar.parentNode, - nextSibling: avatar.nextSibling, - position: avatar.position || '', - left: avatar.left || '', - top: avatar.top || '', - zIndex: avatar.zIndex || '' - }; - - // функция для отмены переноса - avatar.rollback = function() { - old.parent.insertBefore(avatar, old.nextSibling); - avatar.style.position = old.position; - avatar.style.left = old.left; - avatar.style.top = old.top; - avatar.style.zIndex = old.zIndex - }; - - return avatar; -} -``` - -Функция `startDrag(e)`, которую вызывает `mousemove`, если видит, что элемент в "зажатом" состоянии перенесли достаточно далеко, инициирует начало переноса и позиционирует аватар на странице: - -```js -function startDrag(e) { - let avatar = dragObject.avatar; - - document.body.appendChild(avatar); - avatar.style.zIndex = 9999; - avatar.style.position = 'absolute'; -} -``` - -## Окончание переноса - -Окончание переноса происходит по событию `mouseup`. - -Его обработчик можно поставить на аватаре, т.к. аватар всегда под курсором и `mouseup` происходит на нем. Но для универсальности и большей гибкости (вдруг мы захотим перемещать аватар *рядом* с курсором?) поставим его, как и остальные, на `document`. - -Задача обработчика `mouseup`: - -1. Обработать успешный перенос, если он идет (существует аватар) -2. Очистить данные `dragObject`. - -Это дает нам следующий код: - -```js -document.onmouseup = function(e) { - // (1) обработать перенос, если он идет - if (dragObject.avatar) { - *!*finishDrag(e)*/!*; - } - - // в конце mouseup перенос либо завершился, либо даже не начинался - // (2) в любом случае очистим "состояние переноса" dragObject - dragObject = {}; -} -``` - -Для завершения переноса в функции `finishDrag(e)` нам нужно понять, на каком элементе мы находимся, и если над `droppable` -- обработать перенос, а нет -- откатиться: - -```js -function finishDrag(e) { - let dropElem = *!*findDroppable(e)*/!*; - - if (dropElem) { - ... успешный перенос ... - } else { - ... отмена переноса ... - } -} -``` - -### Определяем элемент под курсором - -Чтобы понять, над каким элементом мы остановились -- используем метод [document.elementFromPoint(clientX, clientY)](https://developer.mozilla.org/en/DOM/document.elementFromPoint), который мы обсуждали в разделе [координаты](info:coordinates#elementFromPoint). Этот метод получает координаты *относительно окна* и возвращает самый глубокий элемент, который там находится. - -Функция `findDroppable(event)`, описанная ниже, использует его и находит самый глубокий элемент с атрибутом `droppable` под курсором мыши: - -```js -// возвратит ближайший droppable или null -*!* -// это предварительный вариант findDroppable, исправлен ниже! -*/!* -function findDroppable(event) { - - // взять элемент на данных координатах - let elem = document.elementFromPoint(event.clientX, event.clientY); - - // найти ближайший сверху droppable - return elem.closest('.droppable'); -} -``` - -Обратите внимание -- для `elementFromPoint` нужны координаты относительно окна `clientX/clientY`, а не `pageX/pageY`. - -Вариант выше -- предварительный. Он не будет работать. Если попробовать применить эту функцию, будет все время возвращать один и тот же элемент! А именно -- *текущий переносимый*. Почему так? - -...Дело в том, что в процессе переноса под мышкой находится именно аватар. При начале переноса ему даже `z-index` ставится большой, чтобы он был поверх всех остальных. - -**Аватар перекрывает остальные элементы. Поэтому функция `document.elementFromPoint()` увидит на текущих координатах именно его.** - -Чтобы это изменить, нужно либо поправить код переноса, чтобы аватар двигался *рядом* с курсором мыши, либо дать аватару стиль `pointer-events:none` (кроме IE10-), либо: - -1. Спрятать аватар. -2. Вызывать `elementFromPoint`. -3. Показать аватар. - -Напишем функцию `findDroppable(event)`, которая это делает: - -```js -function findDroppable(event) { - // спрячем переносимый элемент - dragObject.avatar.hidden = true; - - // получить самый вложенный элемент под курсором мыши - let elem = document.elementFromPoint(event.clientX, event.clientY); - - // показать переносимый элемент обратно - dragObject.avatar.hidden = false; - - if (elem == null) { - // такое возможно, если курсор мыши "вылетел" за границу окна - return null; - } - - return elem.closest('.droppable'); -} -``` - -## DragManager - -Из фрагментов кода, разобранных выше, можно собрать мини-фреймворк. - -Объект `DragManager` будет запоминать текущий переносимый объект и отслеживать его перенос. - -Для его создания используем не обычный синтаксис `{...}`, а вызов `new function`. Это позволит прямо при создании объявить дополнительные переменные и функции в замыкании, которыми могут пользоваться методы объекта, а также назначить обработчики: - -```js no-beautify -let DragManager = new function() { - - let dragObject = {}; - - let self = this; // для доступа к себе из обработчиков - - function onMouseDown(e) { ... } - function onMouseMove(e) { ... } - function onMouseUp(e) { ... } - - document.onmousedown = onMouseDown; - document.onmousemove = onMouseMove; - document.onmouseup = onMouseUp; - - this.onDragEnd = function(dragObject, dropElem) { }; - this.onDragCancel = function(dragObject) { }; -} -``` - -Всю работу будут выполнять обработчики `onMouse*`, которые оформлены как локальные функции. В данном случае они ставятся на `document` через `on...`, но это легко поменять на `addEventListener`. - -Код функции `onMouse*` мы подробно рассмотрели ранее, но вы сможете увидеть их в полном примере ниже. - -Внутренний объект `dragObject` будет содержать информацию об объекте переноса. - -У него будут следующие свойства, которые также разобраны выше: - -`elem` -: Текущий зажатый мышью объект, если есть (ставится в `mousedown`). - -`avatar` -: Элемент-аватар, который передвигается по странице. - -`downX/downY` -: Координаты, на которых был клик `mousedown` - -`shiftX/shiftY` -: Относительный сдвиг курсора от угла элемента, вспомогательное свойство вычисляется в начале переноса. - -Задачей `DragManager` является общее управление переносом. Что же касается действий при его окончании -- их должен назначить внешний код, который использует `DragManager`. - -Можно сделать это через вспомогательные методы `onDrag*`, которые устанавливаются внешним кодом и затем вызываются фреймворком. Разработчик, подключив `DragManager`, описывает в этих методах, что делать при завершении или отмене переноса. Конечно же, можно заменить методы `onDrag*` на генерацию "своих" событий. - -С использованием `DragManager` пример, с которого начиналась эта глава -- перенос иконок браузеров в компьютер, реализуется совсем просто: - -```js no-beautify -DragManager.onDragEnd = function(dragObject, dropElem) { - - // скрыть/удалить переносимый объект - dragObject.elem.hidden = true; - - // успешный перенос, показать улыбку классом computer-smile - dropElem.className = 'computer computer-smile'; - - // убрать улыбку через 0.2 сек - setTimeout(function() { - dropElem.classList.remove('computer-smile'); - }, 200); -}; - -DragManager.onDragCancel = function(dragObject) { - // откат переноса - dragObject.avatar.rollback(); -}; -``` - -Полный пример с кодом: - -[codetabs src="dragDemo" height=280] - -## Расширения - -Существует масса возможных применений Drag'n'Drop. Здесь мы не будем реализовывать их все, поскольку не стоит цель создать фреймворк-монстр. - -Однако, мы рассмотрим их, чтобы, при необходимости, легко было написать то, что нужно. - -### Захватывать элемент можно только за "ручку" - -Часто бывает, что перенос должен быть инициирован только при захвате за определённую зону элемента. К примеру, модальное окно можно "взять", только захватив его за заголовок. - -Для этого достаточно добавить необходимую проверку, к примеру, в функцию `createAvatar` или перед её запуском. - -Если `mousedown` был внутри элемента, помеченного, к примеру, классом `draghandle`, то начинаем перенос, иначе -- нет. - -### Проверка прав на droppable - -Бывает и так, что не на любое место в `droppable` можно положить элемент. - -Например: в админке есть дерево всех объектов сайта: статей, разделов, посетителей и т.п. - -- В этом дереве есть узлы различных типов: "статьи", "разделы" и "пользователи". -- Все узлы являются переносимыми объектами. -- Узел "статья" (draggable) можно переносить в "раздел" (droppable), а узел "пользователи" -- нельзя. Но и то и другое можно поместить в "корзину". - -Здесь решение: "можно или нет" переносить или нельзя зависит от "типа" переносимого объекта. - -Есть и более сложные варианты, когда решение зависит от конкретного места в `droppable`, над которым посетитель отпустил кнопку мыши. К примеру, переносить в верхнюю часть можно, а в нижнюю -- нет. - -Эта задача решается добавлением проверки в `findDroppable(e)`. Эта функция знает и об аватаре и о событии, включая координаты. При попытке положить в "неправильное" место функция `findDroppable(e)` должна возвращать `null`. - -Однако, на практике бывают ситуации, когда решение "прямо сейчас" принять невозможно. Например, нужно сделать запрос на сервер: "А разрешено ли текущему посетителю производить такую операцию?" - -Как при этом должен вести себя интерфейс? Можно, конечно сделать, чтобы элемент после отпускания кнопки мыши "завис" над `droppable`, ожидая ответа. Однако, такое решение неудобно в реализации и странновато выглядит для посетителя. - -Как правило, применяют "оптимистичный" алгоритм, по которому мы считаем, что перенос обычно успешен, но при необходимости можем отменить его. - -При нём посетитель кладет объект туда, куда он хочет, а затем, в коде `onDragEnd`: - -1. Визуально обрабатывается завершение переноса, как будто все ок. -2. Производится асинхронный запрос к серверу, содержащий информацию о переносе. -3. Сервер обрабатывает перенос и возвращает ответ, все ли в порядке. -4. Если нет -- выводится ошибка и возвращается `avatar.rollback()`. Аватар в этом случае должен предусматривать возможность отката после успешного завершения. - -Процесс общения с сервером сопровождается индикацией загрузки и, при необходимости, блокировкой новых операций переноса до получения подтверждения. - -### Подсветка текущего droppable - -Удобно, когда пользователь во время переноса наглядно видит, куда он сейчас положит draggable. Например, текущий droppable (или его часть) подсвечиваются. - -Для этого в `DragManager` можно добавить дополнительные методы интеграции с внешним кодом: - -- `onDragEnter` -- будет вызываться при заходе на `droppable`, из `onMouseMove`. -- `onDragMove` -- при каждом передвижении внутри `droppable`, из `onMouseMove`. -- `onDragLeave` -- при выходе с `droppable`, из `onMouseMove` и `onMouseUp`. - -Возможен более сложный вариант, когда нужно поддерживать не только перенос *в элемент*, но и перенос *между элементами*, например вставку одной статьи между двумя другими. - -Для этого код, который обрабатывает перенос, может "делить на части" droppable, к примеру, в отношении 25% - 50% - 25%, и смотреть: - -- Если перенос в верхнюю четверть, то это -- "над". -- Если перенос в середину, то это "внутрь". -- Если перенос в нижнюю четверть, то это -- "под". - -Текущий `droppable` и позиция относительно него при этом могут помечаться подсветкой и жирной чертой над/под, если требуется. - -Пример индикации из Firefox: -![](between.png) - -### Анимация отмены переноса - -Отмену переноса и возврат аватара на место можно красиво анимировать. - -Один из частых вариантов -- скольжение объекта обратно к исходному месту, откуда его взяли. Для этого достаточно поправить `avatar.rollback()`. - -## Итого - -Уточнённый алгоритм Drag'n'Drop: - -1. При `mousedown` запомнить координаты нажатия. -2. При `mousemove` инициировать перенос, как только зажатый элемент передвинули на 3 пикселя или больше. Сообщить во внешний код вызовом `onDragStart`. При этом: -
    -3. Создать аватар, если можно начать перенос элемента `draggable` с данной позиции курсора. -4. Переместить аватар по экрану, установив его новую позицию из `e.pageX/pageY` с учетом изначального сдвига элемента относительно курсора. -5. Сообщить во внешний код о текущем `droppable` под курсором и позиции над ним вызовами `onDragEnter`, `onDragMove`, `onDragLeave`. -6. При `mouseup` обработать завершение переноса. Элемент под аватаром получить по координатам, предварительно спрятав аватар. Сообщить во внешний код вызовом `onDragEnd`. - -Получившаяся реализация Drag'n'Drop проста, эффективна, изящна. - -Её очень легко поменять или адаптировать под "особые" потребности. - -ООП-вариант фреймворка находится в статье . diff --git a/archive/5-drag-and-drop-objects/between.png b/archive/5-drag-and-drop-objects/between.png deleted file mode 100644 index 4001dff049..0000000000 Binary files a/archive/5-drag-and-drop-objects/between.png and /dev/null differ diff --git a/archive/5-drag-and-drop-objects/dragDemo.view/DragManager.js b/archive/5-drag-and-drop-objects/dragDemo.view/DragManager.js deleted file mode 100644 index 24a208db35..0000000000 --- a/archive/5-drag-and-drop-objects/dragDemo.view/DragManager.js +++ /dev/null @@ -1,157 +0,0 @@ -let DragManager = new function() { - - /** - * составной объект для хранения информации о переносе: - * { - * elem - элемент, на котором была зажата мышь - * avatar - аватар - * downX/downY - координаты, на которых был mousedown - * shiftX/shiftY - относительный сдвиг курсора от угла элемента - * } - */ - let dragObject = {}; - - let self = this; - - function onMouseDown(e) { - - if (e.which != 1) return; - - let elem = e.target.closest('.draggable'); - if (!elem) return; - - dragObject.elem = elem; - - // запомним, что элемент нажат на текущих координатах pageX/pageY - dragObject.downX = e.pageX; - dragObject.downY = e.pageY; - - return false; - } - - function onMouseMove(e) { - if (!dragObject.elem) return; // элемент не зажат - - if (!dragObject.avatar) { // если перенос не начат... - let moveX = e.pageX - dragObject.downX; - let moveY = e.pageY - dragObject.downY; - - // если мышь передвинулась в нажатом состоянии недостаточно далеко - if (Math.abs(moveX) < 3 && Math.abs(moveY) < 3) { - return; - } - - // начинаем перенос - dragObject.avatar = createAvatar(e); // создать аватар - if (!dragObject.avatar) { // отмена переноса, нельзя "захватить" за эту часть элемента - dragObject = {}; - return; - } - - // аватар создан успешно - // создать вспомогательные свойства shiftX/shiftY - let coords = getCoords(dragObject.avatar); - dragObject.shiftX = dragObject.downX - coords.left; - dragObject.shiftY = dragObject.downY - coords.top; - - startDrag(e); // отобразить начало переноса - } - - // отобразить перенос объекта при каждом движении мыши - dragObject.avatar.style.left = e.pageX - dragObject.shiftX + 'px'; - dragObject.avatar.style.top = e.pageY - dragObject.shiftY + 'px'; - - return false; - } - - function onMouseUp(e) { - if (dragObject.avatar) { // если перенос идет - finishDrag(e); - } - - // перенос либо не начинался, либо завершился - // в любом случае очистим "состояние переноса" dragObject - dragObject = {}; - } - - function finishDrag(e) { - let dropElem = findDroppable(e); - - if (!dropElem) { - self.onDragCancel(dragObject); - } else { - self.onDragEnd(dragObject, dropElem); - } - } - - function createAvatar(e) { - - // запомнить старые свойства, чтобы вернуться к ним при отмене переноса - let avatar = dragObject.elem; - let old = { - parent: avatar.parentNode, - nextSibling: avatar.nextSibling, - position: avatar.position || '', - left: avatar.left || '', - top: avatar.top || '', - zIndex: avatar.zIndex || '' - }; - - // функция для отмены переноса - avatar.rollback = function() { - old.parent.insertBefore(avatar, old.nextSibling); - avatar.style.position = old.position; - avatar.style.left = old.left; - avatar.style.top = old.top; - avatar.style.zIndex = old.zIndex - }; - - return avatar; - } - - function startDrag(e) { - let avatar = dragObject.avatar; - - // инициировать начало переноса - document.body.appendChild(avatar); - avatar.style.zIndex = 9999; - avatar.style.position = 'absolute'; - } - - function findDroppable(event) { - // спрячем переносимый элемент - dragObject.avatar.hidden = true; - - // получить самый вложенный элемент под курсором мыши - let elem = document.elementFromPoint(event.clientX, event.clientY); - - // показать переносимый элемент обратно - dragObject.avatar.hidden = false; - - if (elem == null) { - // такое возможно, если курсор мыши "вылетел" за границу окна - return null; - } - - return elem.closest('.droppable'); - } - - document.onmousemove = onMouseMove; - document.onmouseup = onMouseUp; - document.onmousedown = onMouseDown; - - this.onDragEnd = function(dragObject, dropElem) {}; - this.onDragCancel = function(dragObject) {}; - -}; - - -function getCoords(elem) { // кроме IE8- - let box = elem.getBoundingClientRect(); - - return { - top: box.top + pageYOffset, - left: box.left + pageXOffset - }; - -} \ No newline at end of file diff --git a/archive/5-drag-and-drop-objects/dragDemo.view/dragDemo.css b/archive/5-drag-and-drop-objects/dragDemo.view/dragDemo.css deleted file mode 100644 index d9cf2ac68b..0000000000 --- a/archive/5-drag-and-drop-objects/dragDemo.view/dragDemo.css +++ /dev/null @@ -1,15 +0,0 @@ -.computer { - width: 93px; - height: 98px; - background: url(https://js.cx/clipart/computer.gif) no-repeat; - padding: 5px; - font-style: italic; -} - -.computer-smile { - background: url(https://js.cx/clipart/computer-smile.gif) no-repeat; -} - -.draggable { - cursor: pointer; -} \ No newline at end of file diff --git a/archive/5-drag-and-drop-objects/dragDemo.view/index.html b/archive/5-drag-and-drop-objects/dragDemo.view/index.html deleted file mode 100644 index cb4fc01b24..0000000000 --- a/archive/5-drag-and-drop-objects/dragDemo.view/index.html +++ /dev/null @@ -1,41 +0,0 @@ - - - - - - - - - - - - - -
    - - - - - -
    - -

    Браузер переносить сюда:

    - -
    -
    - - - - \ No newline at end of file diff --git a/archive/5-drag-and-drop-objects/shiftx.png b/archive/5-drag-and-drop-objects/shiftx.png deleted file mode 100644 index 52d49dd466..0000000000 Binary files a/archive/5-drag-and-drop-objects/shiftx.png and /dev/null differ diff --git a/archive/backticks.md b/archive/backticks.md deleted file mode 100644 index 1f1dd5cdb7..0000000000 --- a/archive/backticks.md +++ /dev/null @@ -1,51 +0,0 @@ - -Backticks allow to specify a "template function" before the first backtick. - -The syntax is: -```js -let str = func`my string`; -``` - -The function `func` is automatically called and receives the array of string pieces split by `${...}` embeds and the list of embedded `${...}` values. - -It's better to see the example: - -```js run -function love(s, v1, v2) { - alert( s[0] ); // Hello: - alert( s[1] ); // and - alert( s[2] ); // ! - - alert( v1 ); // Ilya - alert( v2 ); // Julia - - alert( s.raw[0] ); // Hello:\n - - return v1 + ' ♥ ' + v2; -} - -let mom = "Julia"; -let dad = "Ilya"; - -// s[0] | v1 | s[1] | v2 | s[2] -let str = love`Hello:\n ${mom} and ${dad}!`; - -alert(str); // 'Julia ♥ Ilya' -``` - -The string inside love`string` is split into pieces by embeds. The result is passed to `love`: - -- The first parameter `s` stores the pieces, here `s = ["Hello:\n ", " and ", "!"]`. -- The special proeprty `s.raw` contains unparsed values, the special characters are not processes. -- Then follow the values of embeds: `v1 = mom`, `v2 = data`. - -Templating functions allow to - - - - -- The first parameter `strings` is a - -In the example above, `love` is the name for the function. It is called with an array - - diff --git a/archive/commend.md b/archive/commend.md deleted file mode 100644 index acc2c27ee0..0000000000 --- a/archive/commend.md +++ /dev/null @@ -1,22 +0,0 @@ -### Don't hesitate to comment - -Please, don't hesitate to comment. - -Comments increase the overall code footprint, but that's not a problem at all, because there are many tools which minify the code before publishing to production server. They remove comments, so they do not appear in the working scripts. - -The code clarity is what we should hunt for. And comments can really help to make it easier to understand. - -There are various types of comments, answering different questions: - -- What the code does? -- Why the code is written like that? -- Which counter-intuitive or implicit connections it has with other parts of the program? - -Further in the tutorial we'll make more notes about how to write the code better, easier to read and maintain. We'll also talk more about comments. - -```smart header="The good code is inherently readable and self-commenting" -Please note that the first type of comments ("what the code does") should be used to describe a "high-level" action, like the overall architecture, a function or a chunk of code. It's purpose is to give an overview, so a reader doesn't need to delve into the code and figure out. - -Novice programmers sometimes tend to elaborate too much. Please don't. The good code is inherently readable. No need to describe what few lines do. Unless it's something hard to grasp, and *then* it's worth to consider rewriting the code at the first place rather than commenting it. -``` - diff --git a/archive/descriptors.md b/archive/descriptors.md deleted file mode 100644 index 14f1100911..0000000000 --- a/archive/descriptors.md +++ /dev/null @@ -1,37 +0,0 @@ - - -## Property descriptors - -An object property is actually a more complex and tunable thing than just a "key-value" mapping. - -There are two kinds of properties. - -The first is *data properties*. - -They assiciate a key with the attributes: - -- **`value`** -- the value of the property. -- **`writable`** -- if `true`, can be changed, otherwise it's read-only. -- **`enumerable`** -- if `true`, then listed in loops, otherwise not listed. -- **`configurable`** -- if `true`, the property can be deleted and these attributes can be modified, otherwise not. - -All properties that we've seen yet were data properties. - -By default when a property is created, all attributes are `true`. - -We can get the the information about an existing property using [Object.getOwnPropertyDescriptor](mdn:js/Object/getOwnPropertyDescriptor): - - -```js run -let user = { - name: "John" -}; - -let descriptor = Object.getOwnPropertyDescriptor(user, 'name'); - -alert( descriptor.value ); // John -alert( descriptor.writable ); // true -alert( descriptor.enumerable ); // true -alert( descriptor.configurable ); // true -``` - diff --git a/archive/nfe.md b/archive/nfe.md deleted file mode 100644 index 7f7e2044b4..0000000000 --- a/archive/nfe.md +++ /dev/null @@ -1,140 +0,0 @@ - -## Named Function Expression - -Named Function Expression or, shortly, NFE, is a term a Function Expression that has a name. - -For instance, let's take an ordinary Function Expression: - -```js -let sayHi = function(who) { - alert(`Hello, ${who}`); -}; -``` - -...And add a name to it: - -```js -let sayHi = function *!*func*/!*(who) { - alert(`Hello, ${who}`); -}; -``` - -What's the role of that additional `"func"` name? - -First let's note, that we're still having a Function Expression. Adding the name `"func"` after `function` did not make it a Function Declaration, because it is still created as a part of an assignment expression. - -Adding such a name also did not break anything. - -The function is still available as `sayHi()`: - -```js -//+ run -let sayHi = function *!*func*/!*(who) { - alert(`Hello, ${who}`); -}; - -sayHi("John"); // Hello, John -``` - -There are two special things about the name `func`: -
      -
    1. It allows to reference the function from inside itself.
      2. -
    2. It is not visible outside of the function.
      3. -
    - -For instance, the function `sayHi` below re-calls itself with `"Guest"` if no `who` is provided: - -```js -//+ run -let sayHi = function *!*func*/!*(who) { - if (who) { - alert(`Hello, ${who}`); - } else { -*!* - func("Guest"); // use func to re-call itself -*/!* - } -}; - -sayHi(); // Hello, Guest - -// But this won't work: -func(); // Error, func is not defined (not visible outside of the function) -``` - -Later we'll see more cases when a function wants to re-call itself with modified parameters. - -So, why won't we use `sayHi` for the nested call? - -Actually, in most cases we can: - -```js -let sayHi = function(who) { - if (who) { - alert(`Hello, ${who}`); - } else { -*!* - sayHi("Guest"); -*/!* - } -}; -``` - -The problem with the latter code is that the value of `sayHi` may change. The function may go to another variable: - -```js -//+ run -let sayHi = function *!*func*/!*(who) { - if (who) { - alert(`Hello, ${who}`); - } else { -*!* - func("Guest"); // (*) -*/!* - } -}; - -let welcome = sayHi; -sayHi = null; - -welcome(); // Hello, Guest (still works under different name) -``` - -Using `func` in the line `(*)` *guarantees* that this exactly function will be called. Using `sayHi` there - - -...But the name `func` is not visible outside of the function: - -```js -//+ run -let sayHi = function *!*func*/!*(who) { - // ... -}; - -*!* -func(); // Error: func is not defined -*/!* -``` - -Named Function Expressions are used in rare cases when: -
      -
    • The function needs to reference itself from inside. For instance, call itself with another arguments.
      • -
    • The function travels between variables.
      • -
    - -The code below demonstrates both conditions: - -```js -//+ run -let sayHi = function *!*func*/!*(name) { - if (name) { - alert(`Hello, ${name}!`) - } else { - func("Guest"); - } -}; - -welcome(); // Works -``` - - diff --git a/archive/promise/async-then.js b/archive/promise/async-then.js deleted file mode 100644 index 87150473de..0000000000 --- a/archive/promise/async-then.js +++ /dev/null @@ -1,60 +0,0 @@ - -````smart header="Handlers are always asynchronous, like `setTimeout(...,0)`" -Handlers assigned by `.then/catch` are always asynchronous. But if the promise is settled they run as soon as possible, similar to `setTimeout(...,0)`. - -Here's the example to demonstrate that: - -```js run -// the promise is immediately resolved with "done!" -let promise = new Promise(resolve => resolve("done!")); - -// alert runs asynchronously, like if it were wrapped in setTimeout(..., 0); -promise.then(alert); // (2) - -alert('code end'); // (1) -``` - -We'll first see "code end" `(1)`, and then "done!" `(2)`. - -Like if we had this instead of `(2)`: -```js -promise.then(result => setTimeout(() => alert(result), 0)); -``` - -The inner mechanics is like this: -- Promise handlers form a queue. -- When the current code is complete, the queue shifts and the next handler is executed. -```` - -````smart header="Functions resolve/reject accept at most one argument" -Functions `resolve/reject` accept only one argument. - -We can call them without any arguments too, that's the same as passing `undefined`: - -```js run -let promise = new Promise(resolve => resolve()); - -promise.then(alert); // undefined -``` - -...But if we pass many arguments: `resolve(1, 2, 3)`, then all arguments after the first one are ignored. -The idea is that a promise may have only one result (or an error). Use objects and destructuring if you need to pass many values, like this: - -```js run -let promise = new Promise(function(resolve, reject) { - let name = "John"; - let age = 25; - - resolve({name, age}); // "pack" the values in an object -}); - -// destructuring -promise.then(function({name, age}) { - // here we have name and age variables as if the promise had two results - alert(`${name} ${age}`); // John 25 -}) -``` - -```` - - diff --git a/archive/promise/fetch.js b/archive/promise/fetch.js deleted file mode 100644 index b4719af836..0000000000 --- a/archive/promise/fetch.js +++ /dev/null @@ -1,37 +0,0 @@ -## Example: fetch - - -## Example: fetch - -Promises are also returned by some built-in browser methods. - -For instance, [fetch](https://fetch.spec.whatwg.org/#fetch-method) allows to load arbitrary content over the network. We can use it to send information to the server and load data from it. - -The syntax is: - -```js -let promise = fetch(url[, options]); -``` - -Here: -- `url` is the URL to load, -- `options` are various request options. - -There are many options, full information about them is in the [spec](https://fetch.spec.whatwg.org/#requestinit), here we won't need them. - -The promise returned by `fetch` resolves with the `response` object when the server responds. - -The most important properties of `response` are: -- `status` -- HTTP-code: 200 for OK, 404 for "Page not found" etc. -- `headers` -- HTTP headers. -- - -The important thing - - -```js run -fetch('/article/promise-chaining/1.html?speed=1') - .then(console.log); -``` - - diff --git a/archive/promise/thenable.js b/archive/promise/thenable.js deleted file mode 100644 index b72c0871e7..0000000000 --- a/archive/promise/thenable.js +++ /dev/null @@ -1,23 +0,0 @@ -function loadScript(src) { - return new Promise(function(resolve, reject) { - let script = document.createElement('script'); - script.src = src; - - script.onload = () => resolve(script); - script.onerror = () => reject(new Error("Script load error: " + src)); - - document.head.append(script); - }); -} -loadScript("/article/promise-chaining/one.js") - .then(script => { - return { - then(resolve, reject) { - setTimeout(() => resolve(script), 1000); - } - }; - }) - .then(function(script) { - alert(one); - }); - diff --git a/archive/promise/thenable.md b/archive/promise/thenable.md deleted file mode 100644 index 7f528f1390..0000000000 --- a/archive/promise/thenable.md +++ /dev/null @@ -1,25 +0,0 @@ -````smart header="Thenables" -To be precise, any object that has a method `.then` is treated as a promise here. So we can use custom "promise-compatible" objects in the chain. Such objects are called "thenable". - -Here's an example: - -```js run -class Thenable { - constructor(result, delay) { - this.result = result; - } - then(resolve, reject) { - setTimeout(() => resolve(this.result * 2), delay); - } -}; - -new Promise(resolve => resolve(1)) - .then(result => { - return new Thenable(result, 1000); - }) - .then(alert); // shows 2 after 1000ms -``` - -That allows to use custom implementations of promises from 3rd-party libraries along with native promises. -```` - diff --git a/archive/promise/thenable2.js b/archive/promise/thenable2.js deleted file mode 100644 index 3b72aaf3e7..0000000000 --- a/archive/promise/thenable2.js +++ /dev/null @@ -1,19 +0,0 @@ -'use strict'; - -new Promise() - .then(result => { - return { - then(resolve, reject) { - setTimeout(() => resolve("two"), 1000); - } - }; - }) - .then(result => { - console.log("HERE", result); - return result; - }) - .then(console.log) - .catch(err => console.error("ERROR", err)); - -// https://tc39.github.io/ecma262/#sec-promise-resolve-functions - diff --git a/archive/promise/whereto.txt b/archive/promise/whereto.txt deleted file mode 100644 index 2100b9b3b8..0000000000 --- a/archive/promise/whereto.txt +++ /dev/null @@ -1,58 +0,0 @@ - -## Extending promises, thenables - -Promises are very simple by design. One of the thing they miss is the ability to cancel the process. - -For instance, `loadScript(src)` in previous examples returns a promise that allows to track success/failure of the loading. But can we abort it? No. - -We can inherit from `Promise` to introduce such functionality, like this: - - -```js run -function loadScript(src) { - let script = document.createElement('script'); - alert(1); - script.src = src; - - let promise = new Promise(function(resolve, reject) { - script.onload = () => { alert('onload'); resolve(script); } -*!* - script.onerror = err => reject(new Error("Script load error: " + src)); // (*) -*/!* - }); - - alert(2); - - document.head.append(script); - alert(3); - promise.abort = () => { - script.src = 'javascript:"" - '; - }; - return promise; -} - -let promise = loadScript("/article/promise-chaining/one.js?speed=0"); -promise.then(alert); -promise.abort(); -alert(4); -``` - - - - - - - -## Inheriting from promise, thenables, promise api, async/await - --------- - - -An object that has a method called `.then` is called a "thenable". - -Instead of checking if something is `instanceof Promise`, we should usually check it for being thenable, and if it is, then treat it as a promise ("duck typing"). - -JavaScript specification also checks the value returned by a handler for being a thenable, not exactly a promise, when it decides whether to pass it along the chain or wait for the result. So in the examples above we could use custom thenables instead of `Promise` instances. - -For instance, native promises give no way to "abort" the execution. The `loadScript` above cannot "cancel" script loading, just because there's no `.abort` method on promises, we can only listen for the state change using `.then/catch`. diff --git a/archive/proto/user.js b/archive/proto/user.js deleted file mode 100644 index e79d0b422a..0000000000 --- a/archive/proto/user.js +++ /dev/null @@ -1,16 +0,0 @@ -```js run -function User(name, birthday) { - let age = calcAge(); - - function calcAge() { - new Date().getFullYear() - birthday.getFullYear(); - } - - this.sayHi = function() { - alert(name + ', age:' + age); - }; -} - -let user = new User("John", new Date(2000,0,1)); -user.sayHi(); // John -``` diff --git a/archive/proto/wrong/javascript-prototype-confusion-and.html b/archive/proto/wrong/javascript-prototype-confusion-and.html deleted file mode 100644 index abc8f71a16..0000000000 --- a/archive/proto/wrong/javascript-prototype-confusion-and.html +++ /dev/null @@ -1,1353 +0,0 @@ - - - - - - - - - - - - - - - - - - - -Nowhere Near Ithaca: Javascript "Prototype" Confusion, and the Dubiously Useful "instanceof" - - - - - - - - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    - -
    - - -
    - -
    -
    - -

    -Javascript "Prototype" Confusion, and the Dubiously Useful "instanceof" -

    -
    -
    -
    -
    - - - - - - - - - -
    - - - -

    Recently, I became aware that I was more confused than I realized regarding javascript's use of the word "prototype", as the word is used in two different ways. -

    -

    This draft note is the result of pondering on this a bit more. This pondering also resulted in some clarification (for me) of how the instanceof operator seems to work, and how its utility is doubtful. -

    - - - - - - -
    -Every object has a prototype, accessed via its "__proto__" property -
    - -

    Javascript objects are just bags of named things: properties. Properties can be other objects, functions (which are also objects), or primitives like numbers and strings.

    - -

    Every javascript object has a prototype, which can be accessed directly in most modern browsers via the named property __proto__.

    - -

    -When a property named foo is requested from an object obj via obj.foo, first the set of properties for object itself is searched for the property. If it is not found, then obj.__proto__ is searched for a property named foo. If not found there, then it searches obj.__proto__.__proto__, continuing up the "prototype chain" until it either finds the property or obj.__proto__.__proto__....__proto__ is null, and undefined is returned. -Note that the javascript engine is supposed to prevent cyclic loops in the prototype chain. -

    - - -

    Again: the name of the property for the prototype of an object is not "prototype": its name is "__proto__".

    - -

    That is one part of the potential confusion.

    - - - -
    -Every javascript function f has a property named "prototype" - which is not its prototype -
    - - -

    This is another part of the potential confusion.

    - -

    -f.prototypeis not the function's - prototype. -

    - -

    -As for any object, f.__proto__ is the function's prototype. -

    - -
    -What is the purpose of f.prototype? -
    - -

    Any function f can be used to generate new objects via newObject = new f(args). -When used this way, f is sometimes called the "constructor" for newObject. - -

    - -

    When an object is created from a function f via newObject = new f(args), the new object's prototype __proto__ -property is set to the property named "prototype" of f: -newObject.__proto__ = f.prototype .

    - -

    That is what f.prototype is used for.

    - -

    Note that there are other ways to create an object with a specified prototype, and in fact these other methods are recommended by some folks, avoiding the "new" keyword altogether.

    - -
    -Aside: The "constructor" Property -
    - -

    While every function can be used as a constructor, there is also a property named "constructor" for some objects.

    - -

    -In particular, for any function f, f.prototype.constructor = f. -

    - -

    Since objects created from f via new f(args) have their "__proto__" property initialized to f.prototype, this means that for any object newObject created via newObject = new f(args) for some function f, newObject.constructor will refer to the function used to create the object. Initially, at least, as you can change the constructor later. -

    - -

    Other than a record of the object's ancestry that might be useful in a handful of cases (that I've never encountered), I don't know how the knowledge of the constructor would be generally useful.

    - - -
    - What this has to do with how javascript's instanceof works -
    - -

    Javascript has an instanceof operator that returns true or false, and can be called like so: -

    obj instanceof f
-
    -

    You can only use a function on the right side: instanceof will throw an error if f is not a function.

    - -

    The Mozilla Developer network summarizes this operator quite succinctly (I have used "function" instead of "constructor", since every function can be a constructor): - -

    -The instanceof operator tests whether an object has in its prototype chain the prototype property of a given function. -
    - -

    - - - - - - - - -

    This is illustrated in the figure below.

    - - - - - -
    - -
    -(obj instanceof f -) is true -if f.prototype is equal to -
    -any __proto__ in -the prototype chain of obj -
    - -
    Do People Use instanceof?
    - -

    Answer: I think few do.

    - - - -

    When queried on twitter, both Eric Elliot and Kyle Simpson (two javascript folks I think a lot of) tweeted back that they never did. When I asked on hacker news, one commenter said it was a code smell, while another said it was useful when checking if an object is an array (it should be noted that jquery checks the result of a toString call to determine if something is an array).

    - -

    There are also problems with trying to use instanceof across iframes.

    - -

    @kangax discourages its use (2009). He also recommends the same method jquery uses to check if something is an array, btw.

    - -

    Crockford has remarked (in 2003) about the useless instanceof operator (link via kangax's article).

    - -

    So, I don't foresee using it much myself, but it is personally satisfying to come to a better understanding of it and the surrounding javascript constructs.

    - - - - - - -
    -And be Warned... -
    - - -

    Compared to "standard" OOP that can result in rigid, iron-like structures that complicate change and reuse, javascript with its prototype-based reuse pattern is as firm as a jello: you can change things bit more willy-nilly, if you so desire.

    - -

    In particular, you can muck with the prototype and constructor properties after-the-fact, and this would likely invalidate the notes above in whatever curious ways you (or the code you are using) has mucked with things.

    - - - -
    -
    -
    -
    -
    -Posted by - - - - - - - - - - - - - -
    -
    -Labels: - - -
    -
    -
    -
    - -
    -
    - -
    - -
    -
    - -Newer Post - - -Older Post - -Home -
    -
    -
    -
    -Subscribe to: -Post Comments (Atom) -
    -
    - -
    -

    Popular Posts

    -
    - -
    - - - - - - - -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    - -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - - - - - - - - -
    - - - -
    - - -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/archive/recursion.md b/archive/recursion.md deleted file mode 100644 index 4b142bd486..0000000000 --- a/archive/recursion.md +++ /dev/null @@ -1,283 +0,0 @@ -# Recursion, stack - -It's ok for a function to rely on other functions for sub-tasks. - -We've already been using it when `welcome()` relied on `alert()` call to show the message. - -In particular, a function can make a sub-call *itself*. That's called *a recursion*. - -We'll fiddle around that advanced case to better learn how functions work. - -[smart header="A topic you already know?"] -Recursion is a general programming term. If you are already familiar with it, then you may list the page to the next chapter. Please read on if you are new to functions or just prefer not to skip parts. -[/smart] - -## Divide and conquer - -Divide and conquer (or "divide and rule") is an ancient strategy attributed to Philip II of Macedon and mentioned by the Roman emperor Julius Caesar, the French emperor Napolen and many other leaders. - -They used it to rule, but the similar thing is often done in programming. If we have a complex task, that we're not sure how to solve as a whole, then maybe we can split it and try to solve the smaller parts. - -And if smaller parts are still too big, then let's cut them and try to solve even smaller parts. - -Repeat the cutting until the parts are so small that it's obvious how to deal with them. - -Sounds good? Now let's explore a case of this approach. - -## Eating an elephant - -Let's say we have a task "to eat an elephant". But how? - -The well-known humorous solution is: "piece by piece". We cut a piece, eat it and repeat the process. Sooner or later, the elephant is eaten. - -The algorithm can be reflected in the code: - -``` -function eat(elephant) { - cut a piece from the elephant - eat it - if (something left) { -*!* - eat(what's left of the elephant) // (*) -*/!* - } -} -``` - -The recursion occurs at line `(*)`: function `eat` after making things simpler passes the remaining data again to itself. - -Of course that's only one variant. For example, we could cut the elephant in 2 halves, then cut the halves in half again etc, until the parts are small enough to eat. Then put them into plates and pass to the guests. - -The core idea is the same: splitting the problem into multiple subproblems and doing the same with them if they're still big. - -## A power of a number - - - -## Степень pow(x, n) через рекурсию - -В качестве первого примера использования рекурсивных вызовов -- рассмотрим задачу возведения числа `x` в натуральную степень `n`. - -Её можно представить как совокупность более простого действия и более простой задачи того же типа вот так: - -```js -pow(x, n) = x * pow(x, n - 1) -``` - -То есть, xn = x * xn-1. - -Например, вычислим `pow(2, 4)`, последовательно переходя к более простой задаче: - -
      -
    1. `pow(2, 4) = 2 * pow(2, 3)`
      2. -
    2. `pow(2, 3) = 2 * pow(2, 2)`
      3. -
    3. `pow(2, 2) = 2 * pow(2, 1)`
      4. -
    4. `pow(2, 1) = 2`
      5. -
    - -На шаге 1 нам нужно вычислить `pow(2,3)`, поэтому мы делаем шаг 2, дальше нам нужно `pow(2,2)`, мы делаем шаг 3, затем шаг 4, и на нём уже можно остановиться, ведь очевидно, что результат возведения числа в степень 1 -- равен самому числу. - -Далее, имея результат на шаге 4, он подставляется обратно в шаг 3, затем имеем `pow(2,2)` -- подставляем в шаг 2 и на шаге 1 уже получаем результат. - -Этот алгоритм на JavaScript: - -```js -//+ run -function pow(x, n) { - if (n != 1) { // пока n != 1, сводить вычисление pow(x,n) к pow(x,n-1) - return x * pow(x, n - 1); - } else { - return x; - } -} - -alert( pow(2, 3) ); // 8 -``` - -Говорят, что "функция `pow` *рекурсивно вызывает сама себя*" до `n == 1`. - -Значение, на котором рекурсия заканчивается называют *базисом рекурсии*. В примере выше базисом является `1`. - -Общее количество вложенных вызовов называют *глубиной рекурсии*. В случае со степенью, всего будет `n` вызовов. - -Максимальная глубина рекурсии в браузерах ограничена, точно можно рассчитывать на `10000` вложенных вызовов, но некоторые интерпретаторы допускают и больше. - -Итак, рекурсию используют, когда вычисление функции можно свести к её более простому вызову, а его -- ещё к более простому, и так далее, пока значение не станет очевидно. - -## Контекст выполнения, стек - -Теперь мы посмотрим, как работают рекурсивные вызовы. Для этого мы рассмотрим, как вообще работают функции, что происходит при вызове. - -**У каждого вызова функции есть свой "контекст выполнения" (execution context).** - -Контекст выполнения -- это служебная информация, которая соответствует текущему запуску функции. Она включает в себя локальные переменные функции и конкретное место в коде, на котором находится интерпретатор. - -Например, для вызова `pow(2, 3)` из примера выше будет создан контекст выполнения, который будет хранить переменные `x = 2, n = 3`. Мы схематично обозначим его так: - -
      -
    • Контекст: { x: 2, n: 3, строка 1 }
      • -
    - -Далее функция `pow` начинает выполняться. Вычисляется выражение `n != 1` -- оно равно `true`, ведь в текущем контексте `n=3`. Поэтому задействуется первая ветвь `if` : - -```js -function pow(x, n) { - if (n != 1) { // пока n != 1 сводить вычисление pow(x,n) к pow(x,n-1) -*!* - return x * pow(x, n - 1); -*/!* - } else { - return x; - } -} -``` - -Чтобы вычислить выражение `x * pow(x, n-1)`, требуется произвести запуск `pow` с новыми аргументами. - -**При любом вложенном вызове JavaScript запоминает текущий контекст выполнения в специальной внутренней структуре данных -- "стеке контекстов".** - -Затем интерпретатор приступает к выполнению вложенного вызова. - -В данном случае вызывается та же `pow`, однако это абсолютно неважно. Для любых функций процесс одинаков. - -Для нового вызова создаётся свой контекст выполнения, и управление переходит в него, а когда он завершён -- старый контекст достаётся из стека и выполнение внешней функции возобновляется. - -Разберём происходящее с контекстами более подробно, начиная с вызова `(*)`: - -```js -//+ run -function pow(x, n) { - if (n != 1) { // пока n!=1 сводить вычисление pow(..n) к pow(..n-1) - return x * pow(x, n - 1); - } else { - return x; - } -} - -*!* -alert( pow(2, 3) ); // (*) -*/!* -``` - -
    -
    `pow(2, 3)`
    -
    Запускается функция `pow`, с аргументами `x=2`, `n=3`. Эти переменные хранятся в контексте выполнения, схематично изображённом ниже: - -
      -
    • Контекст: { x: 2, n: 3, строка 1 }
      • -
    -Выполнение в этом контексте продолжается, пока не встретит вложенный вызов в строке 3. -
    -
    `pow(2, 2)`
    -
    В строке `3` происходит вложенный вызов `pow` с аргументами `x=2`, `n=2`. Текущий контекст сохраняется в стеке, а для вложеннного вызова создаётся новый контекст (выделен жирным ниже): - -
      -
    • Контекст: { x: 2, n: 3, строка 3 }
      • -
    • Контекст: { x: 2, n: 2, строка 1 }
      • -
    -Обратим внимание, что контекст включает в себя не только переменные, но и место в коде, так что когда вложенный вызов завершится -- можно будет легко вернуться назад. - -Слово "строка" здесь условно, на самом деле, конечно, запомнено более точное место в цепочке команд. -
    -
    `pow(2, 1)`
    -
    Опять вложенный вызов в строке `3`, на этот раз -- с аргументами `x=2`, `n=1`. Создаётся новый текущий контекст, предыдущий добавляется в стек: -
      -
    • Контекст: { x: 2, n: 3, строка 3 }
      • -
    • Контекст: { x: 2, n: 2, строка 3 }
      • -
    • Контекст: { x: 2, n: 1, строка 1 }
      • -
    -На текущий момент в стеке уже два старых контекста. -
    -
    Выход из `pow(2, 1)`.
    -
    При выполнении `pow(2, 1)`, в отличие от предыдущих запусков, выражение `n != 1` будет равно `false`, поэтому сработает вторая ветка `if..else`: - -```js -function pow(x, n) { - if (n != 1) { - return x * pow(x, n - 1); - } else { -*!* - return x; // первая степень числа равна самому числу -*/!* - } -} -``` - -Здесь вложенных вызовов нет, так что функция заканчивает свою работу, возвращая `2`. Текущий контекст больше не нужен и удаляется из памяти, из стека восстанавливается предыдущий: - -
      -
    • Контекст: { x: 2, n: 3, строка 3 }
      • -
    • Контекст: { x: 2, n: 2, строка 3 }
      • -
    -Возобновляется обработка внешнего вызова `pow(2, 2)`. -
    -
    Выход из `pow(2, 2)`.
    -
    ...И теперь уже `pow(2, 2)` может закончить свою работу, вернув `4`. Восстанавливается контекст предыдущего вызова: -
      -
    • Контекст: { x: 2, n: 3, строка 3 }
      • -
    -Возобновляется обработка внешнего вызова `pow(2, 3)`. -
    -
    Выход из `pow(2, 3)`.
    -
    Самый внешний вызов заканчивает свою работу, его результат: `pow(2, 3) = 8`.
    -
    - -Глубина рекурсии в данном случае составила: **3**. - -Как видно из иллюстраций выше, глубина рекурсии равна максимальному числу контекстов, одновременно хранимых в стеке. - -Обратим внимание на требования к памяти. Рекурсия приводит к хранению всех данных для неоконченных внешних вызовов в стеке, в данном случае это приводит к тому, что возведение в степень `n` хранит в памяти `n` различных контекстов. - -Реализация возведения в степень через цикл гораздо более экономна: - -```js -function pow(x, n) { - let result = x; - for let i = 1; i < n; i++) { - result *= x; - } - return result; -} -``` - -У такой функции `pow` будет один контекст, в котором будут последовательно меняться значения `i` и `result`. - -**Любая рекурсия может быть переделана в цикл. Как правило, вариант с циклом будет эффективнее.** - -Но переделка рекурсии в цикл может быть нетривиальной, особенно когда в функции, в зависимости от условий, используются различные рекурсивные подвызовы, когда ветвление более сложное. - -## Итого - -Рекурсия -- это когда функция вызывает сама себя, как правило, с другими аргументами. - -Существуют много областей применения рекурсивных вызовов. Здесь мы посмотрели на один из них -- решение задачи путём сведения её к более простой (с меньшими аргументами), но также рекурсия используется для работы с "естественно рекурсивными" структурами данных, такими как HTML-документы, для "глубокого" копирования сложных объектов. - -Есть и другие применения, с которыми мы встретимся по мере изучения JavaScript. - -Здесь мы постарались рассмотреть происходящее достаточно подробно, однако, если пожелаете, допустимо временно забежать вперёд и открыть главу [](/debugging-chrome), с тем чтобы при помощи отладчика построчно пробежаться по коду и посмотреть стек на каждом шаге. Отладчик даёт к нему доступ. - - - -[head] - -[/head] - diff --git a/archive/timing-decorator.md b/archive/timing-decorator.md deleted file mode 100644 index b412f5c416..0000000000 --- a/archive/timing-decorator.md +++ /dev/null @@ -1,105 +0,0 @@ - - -## Instrumentation: timing decorator - -Let's say we have a function and want to measure time it takes to run. - -Of course, we could modify it. Add something like `timerStart()` to the start and `timerEnd()` to all exit points. Then later we may want to log which arguments it receives and results. That requires additional code as well. - -That is called [instrumentation](https://en.wikipedia.org/wiki/Instrumentation) of the code -- adding stuff to measure times, log what's happening and do other watching/measuring without interfering with the main functionality. - -Putting instrumentation inside the function manually is not pretty at all. It takes space, shadows the core functionality and makes it harder to debug. - -There are tools that analyze javascript code and add instrumentation calls to it automatically. But here we'll take a "median" approach. We will "wrap" instrumentation over function without touching its code. - -What we going to do is a special function `timingDecorator(func)`, that takes a function `func` and returns a "wrapper" around it, that transfers all calls to `func` and measures time they take. - -For simplicity let's assume that `func` has only one argument. - -The code with `timingDecorator` and example function: - - - - -```js run -function fibo(n) { // a function to measure, here we count fibonacci number - return (n > 2) ? fibo(n - 1) + fibo(n - 2) : 1; -} - -let timers = {}; // timers to store data - -function timingDecorator(func) { - return function(x) { - let start = performance.now(); - - let result = func(x); - - let time = performance.now() - start; - - if (!timers[func.name]) timers[func.name] = 0; - timers[func.name] += time; - - return result; - }; -} - -// decorate it -fibo = timingDecorator(fibo); - -// run -alert( fibo(10) ); // 55 -alert( fibo(20) ); // 6765 -alert( fibo(30) ); // 832040 - -alert( `Total time: ${timers.fibo.toFixed(3)}ms` ); // total count of fibo calls -``` - -При помощи декоратора `timingDecorator` мы сможем взять произвольную функцию и одним движением руки прикрутить к ней измеритель времени. - -Его реализация: - -```js run -let timers = {}; - -// прибавит время выполнения f к таймеру timers[timer] -function timingDecorator(f, timer) { - return function() { - let start = performance.now(); - - let result = f.apply(this, arguments); // (*) - - if (!timers[timer]) timers[timer] = 0; - timers[timer] += performance.now() - start; - - return result; - } -} - -// функция может быть произвольной, например такой: -let fibonacci = function f(n) { - return (n > 2) ? f(n - 1) + f(n - 2) : 1; -} - -*!* -// использование: завернём fibonacci в декоратор -fibonacci = timingDecorator(fibonacci, "fibo"); -*/!* - -// неоднократные вызовы... -alert( fibonacci(10) ); // 55 -alert( fibonacci(20) ); // 6765 -// ... - -*!* -// в любой момент можно получить общее количество времени на вызовы -alert( timers.fibo + 'мс' ); -*/!* -``` - -Обратим внимание на строку `(*)` внутри декоратора, которая и осуществляет передачу вызова: - -```js -let result = f.apply(this, arguments); // (*) -``` - -Этот приём называется "форвардинг вызова" (от англ. forwarding): текущий контекст и аргументы через `apply` передаются в функцию `f`, так что изнутри `f` всё выглядит так, как была вызвана она напрямую, а не декоратор.