Merge branch 'master' of https://github.com/javascript-tutorial/en.javascript.info

Author: iliakan

1-js/04-object-basics/02-garbage-collection/article.md

@@ -207,6 +207,6 @@ A general book "The Garbage Collection Handbook: The Art of Automatic Memory Man
 
 If you are familiar with low-level programming, the more detailed information about V8 garbage collector is in the article [A tour of V8: Garbage Collection](http://jayconrod.com/posts/55/a-tour-of-v8-garbage-collection).
 
-[V8 blog](http://v8project.blogspot.com/) also publishes articles about changes in memory management from time to time. Naturally, to learn the garbage collection, you'd better prepare by learning about V8 internals in general and read the blog of [Vyacheslav Egorov](http://mrale.ph) who worked as one of V8 engineers. I'm saying: "V8", because it is best covered with articles in the internet. For other engines, many approaches are similar, but garbage collection differs in many aspects.
+[V8 blog](https://v8.dev/) also publishes articles about changes in memory management from time to time. Naturally, to learn the garbage collection, you'd better prepare by learning about V8 internals in general and read the blog of [Vyacheslav Egorov](http://mrale.ph) who worked as one of V8 engineers. I'm saying: "V8", because it is best covered with articles in the internet. For other engines, many approaches are similar, but garbage collection differs in many aspects.
 
 In-depth knowledge of engines is good when you need low-level optimizations. It would be wise to plan that as the next step after you're familiar with the language.  

1-js/04-object-basics/04-object-methods/article.md

@@ -63,7 +63,7 @@ user.sayHi(); // Hello!
 ```smart header="Object-oriented programming"
 When we write our code using objects to represent entities, that's called an [object-oriented programming](https://en.wikipedia.org/wiki/Object-oriented_programming), in short: "OOP".
 
-OOP is a big thing, an interesting science of its own. How to choose the right entities? How to organize the interaction between them? That's architecture, and there are great books on that topic, like "Design Patterns: Elements of Reusable Object-Oriented Software" by E.Gamma, R.Helm, R.Johnson, J.Vissides or "Object-Oriented Analysis and Design with Applications" by G.Booch, and more. 
+OOP is a big thing, an interesting science of its own. How to choose the right entities? How to organize the interaction between them? That's architecture, and there are great books on that topic, like "Design Patterns: Elements of Reusable Object-Oriented Software" by E.Gamma, R.Helm, R.Johnson, J.Vissides or "Object-Oriented Analysis and Design with Applications" by G.Booch, and more.
 ```
 ### Method shorthand
 
@@ -72,14 +72,14 @@ There exists a shorter syntax for methods in an object literal:
 ```js
 // these objects do the same
 
-let user = {
+user = {
   sayHi: function() {
     alert("Hello");
   }
 };
 
 // method shorthand looks better, right?
-let user = {
+user = {
 *!*
   sayHi() { // same as "sayHi: function()"
 */!*
@@ -166,7 +166,7 @@ If we used `this.name` instead of `user.name` inside the `alert`, then the code
 
 ## "this" is not bound
 
-In JavaScript, "this" keyword behaves unlike most other programming languages. First, it can be used in any function.
+In JavaScript, "this" keyword behaves unlike most other programming languages. It can be used in any function.
 
 There's no syntax error in the code like that:
 
@@ -176,9 +176,9 @@ function sayHi() {
 }
 ```
 
-The value of `this` is evaluated during the run-time. And it can be anything.
+The value of `this` is evaluated during the run-time, depending on the context. And it can be anything.
 
-For instance, the same function may have different "this" when called from different objects:
+For instance, here the same function is assigned to two different objects and has different "this" in the calls:
 
 ```js run
 let user = { name: "John" };
@@ -189,7 +189,7 @@ function sayHi() {
 }
 
 *!*
-// use the same functions in two objects
+// use the same function in two objects
 user.f = sayHi;
 admin.f = sayHi;
 */!*
@@ -202,7 +202,10 @@ admin.f(); // Admin  (this == admin)
 admin['f'](); // Admin (dot or square brackets access the method – doesn't matter)
 ```
 
-Actually, we can call the function without an object at all:
+The rule is simple: if `obj.f()` is called, then `this` is `obj` during the call of `f`. So it's either `user` or `admin` in the example above.
+
+````smart header="Calling without an object: `this == undefined`"
+We can even call the function without an object at all:
 
 ```js run
 function sayHi() {
@@ -216,7 +219,8 @@ In this case `this` is `undefined` in strict mode. If we try to access `this.nam
 
 In non-strict mode the value of `this` in such case will be the *global object* (`window` in a browser, we'll get to it later in the chapter [](info:global-object)). This is a historical behavior that `"use strict"` fixes.
 
-Please note that usually a call of a function that uses `this` without an object is not normal, but rather a programming mistake. If a function has `this`, then it is usually meant to be called in the context of an object.
+Usually such call is an programming error. If there's `this` inside a function, it expects to be called in an object context.
+````
 
 ```smart header="The consequences of unbound `this`"
 If you come from another programming language, then you are probably used to the idea of a "bound `this`", where methods defined in an object always have `this` referencing that object.

1-js/05-data-types/02-number/3-repeat-until-number/_js.view/test.js

@@ -18,7 +18,7 @@ describe("readNumber", function() {
     assert.strictEqual(readNumber(), 0);
   });
 
-  it("continues the loop unti meets a number", function() {
+  it("continues the loop until meets a number", function() {
     prompt.onCall(0).returns("not a number");
     prompt.onCall(1).returns("not a number again");
     prompt.onCall(2).returns("1");
@@ -35,4 +35,4 @@ describe("readNumber", function() {
     assert.isNull(readNumber());
   });
 
-});
+});

1-js/05-data-types/11-json/article.md

@@ -68,7 +68,6 @@ alert(json);
 
 Полученная строка `json` называется *JSON-форматированным* или *сериализованным* объектом. Мы можем отправить его по сети или поместить в обычное хранилище данных.
 
-
 Обратите внимание, что объект в формате JSON имеет несколько важных отличий от объектного литерала:
 
 - Строки используют двойные кавычки. Никаких одинарных кавычек или обратных кавычек в JSON. Так `'John'` становится `"John"`.

1-js/11-async/07-microtask-queue/article.md

@@ -3,9 +3,9 @@
 
 Promise handlers `.then`/`.catch`/`.finally` are always asynchronous.
 
-Even when a Promise is immediately resolved, the code on the lines *below* your `.then`/`.catch`/`.finally` will still execute first.
+Even when a Promise is immediately resolved, the code on the lines *below* `.then`/`.catch`/`.finally` will still execute before these handlers .
 
-Here's the code that demonstrates it:
+Here's the demo:
 
 ```js run
 let promise = Promise.resolve();
@@ -21,7 +21,7 @@ That's strange, because the promise is definitely done from the beginning.
 
 Why did the `.then` trigger afterwards? What's going on?
 
-# Microtasks
+## Microtasks
 
 Asynchronous tasks need proper management. For that, the standard specifies an internal queue `PromiseJobs`, more often referred to as "microtask queue" (v8 term).
 
@@ -54,9 +54,11 @@ Now the order is as intended.
 
 ## Event loop
 
-In-browser JavaScript, as well as Node.js, is based on an *event loop*.
+In-browser JavaScript execution flow, as well as Node.js, is based on an *event loop*.
 
-"Event loop" is a process when the engine sleeps and waits for events, then reacts on those and sleeps again.
+"Event loop" is a process when the engine sleeps and waits for events. When they occur - handles them and sleeps again.
+
+Events may come either comes from external sources, like user actions, or just as the end signal of an internal task.
 
 Examples of events:
 - `mousemove`, a user moved their mouse.
@@ -120,14 +122,14 @@ Promise.resolve()
 
 Naturally, `promise` shows up first, because `setTimeout` macrotask awaits in the less-priority macrotask queue.
 
-As a logical consequence, macrotasks are handled only when promises give the engine a "free time". So if we have a promise chain that doesn't wait for anything, then things like `setTimeout` or event handlers can never get in the middle.
+As a logical consequence, macrotasks are handled only when promises give the engine a "free time". So if we have a chain of promise handlers that don't wait for anything, execute right one after another, then a `setTimeout` (or a user action handler) can never run in-between them.
 
 
 ## Unhandled rejection
 
 Remember "unhandled rejection" event from the chapter <info:promise-error-handling>?
 
-Now, with the understanding of microtasks, we can formalize it.
+Now we can describe how JavaScript finds out that a rejection was not handled.
 
 **"Unhandled rejection" is when a promise error is not handled at the end of the microtask queue.**
 
@@ -167,15 +169,15 @@ setTimeout(() => promise.catch(err => alert('caught')));
 window.addEventListener('unhandledrejection', event => alert(event.reason));
 ```
 
-Now the unhandled rejection appears again. Why? Because `unhandledrejection` triggers when the microtask queue is complete. The engine examines promises and, if any of them is in "rejected" state, then the event is generated.
+Now the unhandled rejection appears again. Why? Because `unhandledrejection` is generated when the microtask queue is complete. The engine examines promises and, if any of them is in "rejected" state, then the event triggers.
 
 In the example, the `.catch` added by `setTimeout` triggers too, of course it does, but later, after `unhandledrejection` has already occurred.
 
 ## Summary
 
 - Promise handling is always asynchronous, as all promise actions pass through the internal "promise jobs" queue, also called "microtask queue" (v8 term).
 
-    **So, `.then/catch/finally` are called after the current code is finished.**
+    **So, `.then/catch/finally` handlers are called after the current code is finished.**
 
     If we need to guarantee that a piece of code is executed after `.then/catch/finally`, it's best to add it into a chained `.then` call.
 

2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.md

@@ -6,7 +6,7 @@ for (let li of document.querySelectorAll('li')) {
 }
 ```
 
-В цикле нам нужно получить текст в каждом элементе `li`. Мы можем прочитать текст из первого дочернего узла `li`, который будет текстовым узлом:
+В цикле нам нужно получить текст в каждом элементе `li`. Мы можем прочитать текстовое содержимое элемента списска из первого дочернего узла `li`, который будет текстовым узлом:
 
 ```js
 for (let li of document.querySelectorAll('li')) {
@@ -16,4 +16,4 @@ for (let li of document.querySelectorAll('li')) {
 }
 ```
 
-Так мы сможем получить количество потомков как `li.getElementsByTagName('li')`.length
+Так мы сможем получить количество потомков как `li.getElementsByTagName('li').length`.

2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md

@@ -27,7 +27,7 @@ alert(document.constructor.name); // HTMLDocument
 alert(HTMLDocument.prototype.constructor === HTMLDocument); // true
 ```
 
-Чтобы получить имя класса в строковой форме, используем `constructor.name`. Сделаем это для всей цепочки прототипов `document` до класса `Node`:
+Чтобы получить имя класса в строковой форме, используем `constructor.name`. Сделаем это для всей цепочки прототипов `document` вверх до класса `Node`:
 
 ```js run
 alert(HTMLDocument.prototype.constructor.name); // HTMLDocument

2-ui/1-document/05-basic-dom-node-properties/article.md

@@ -326,7 +326,7 @@ elem.innerHTML = elem.innerHTML + "..."
 
 У других типов узлов есть свои аналоги: свойства `nodeValue` и `data`. Эти свойства очень похожи при использовании, есть лишь небольшие различия в спецификации. Мы будем использовать `data`, потому что оно короче.
 
-Прочитаем содержимое текстового узла:
+Прочитаем содержимое текстового узла и комментария:
 
 ```html run height="50"
 <body>
@@ -469,7 +469,7 @@ elem.innerHTML = elem.innerHTML + "..."
 Главные свойства DOM-узла:
 
 `nodeType`
-: Мы можем получить свойство `nodeType` из класса DOM-объекта, но часто нам нужно только посмотреть, является ли элемент текстом или узлом-элементом. Свойство `nodeType` хорошо для этого подходит. В нём содержится цифровое значение, наиболее важными являются: `1` для элементов,`3` для текстовых узлов, и т.д. Только для чтения.
+: Свойство `nodeType` позволяет узнать тип DOM-узла. Его значение - числовое: `1` для элементов,`3` для текстовых узлов, и т.д. Только для чтения.
 
 `nodeName/tagName`
 : Для элементов это свойство возвращает название тега (записывается в верхнем регистре, за исключением XML-режима). Для узлов-неэлементов `nodeName` описывает, что это за узел. Только для чтения.

2-ui/2-events/02-bubbling-and-capturing/article.md

@@ -151,9 +151,7 @@ There are two possible values of the `capture` option:
 
 Note that while formally there are 3 phases, the 2nd phase ("target phase": the event reached the element) is not handled separately: handlers on both capturing and bubbling phases trigger at that phase.
 
-If one puts capturing and bubbling handlers on the target element, the capture handler triggers last in the capturing phase and the bubble handler triggers first in the bubbling phase.
-
-Let's see it in action:
+Let's see both capturing and bubbling in action:
 
 ```html run autorun height=140 edit
 <style>

2-ui/3-event-details/4-mouse-drag-and-drop/article.md

@@ -4,9 +4,9 @@ Drag'n'Drop is a great interface solution. Taking something, dragging and droppi
 
 In the modern HTML standard there's a [section about Drag Events](https://html.spec.whatwg.org/multipage/interaction.html#dnd).
 
-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.
+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 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.
+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.
 
 So here we'll see how to implement Drag'n'Drop using mouse events. Not that hard either.