Merge pull request #1671 from Rnbsov/patch-102

👾 smth

Author: Alexandre887

1-js/02-first-steps/13-while-for/article.md

@@ -6,6 +6,19 @@
 
 Для многократного повторения одного участка кода предусмотрены *циклы*.
 
+```smart header="Циклы for..of и for..in"
+Небольшое объявление для продвинутых читателей.
+
+В этой статье рассматриваются только базывые циклы: `while`, `do..while` и `for(..;..;..)`.
+
+Если вы пришли к этой статье в поисках других типов циклов, вот указатели:
+
+- См. [for..in](info:object#forin) для перебора свойств объекта.
+- См. [for..of](info:array#loops) и [Перебираемые объекты](info:iterable) для перебора массивов и перебираемых объектов.
+
+В противном случае, продолжайте читать.
+```
+
 ## Цикл "while"
 
 Цикл `while` имеет следующий синтаксис:

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

@@ -83,6 +83,7 @@ let user = {
 ![](object-user-props.svg)
 
 Последнее свойство объекта может заканчиваться запятой:
+
 ```js
 let user = {
   name: "John",
@@ -205,6 +206,7 @@ alert( bag.apple ); // 5, если fruit="apple"
 И если посетитель введёт слово `"apple"`, то в объекте `bag` теперь будет лежать свойство `{apple: 5}`.
 
 По сути, пример выше работает так же, как и следующий пример:
+
 ```js run
 let fruit = prompt("Какой фрукт купить?", "apple");
 let bag = {};
@@ -376,7 +378,7 @@ alert( "test" in obj ); // true, свойство существует!
 
 Подобные ситуации случаются очень редко, так как `undefined` обычно явно не присваивается. Для "неизвестных" или "пустых" свойств мы используем значение `null`. Таким образом, оператор `in` является экзотическим гостем в коде.
 
-## Цикл "for..in"
+## Цикл "for..in" [#forin]
 
 Для перебора всех свойств объекта используется цикл `for..in`. Этот цикл отличается от изученного ранее цикла `for(;;)`.
 

1-js/11-async/01-callbacks/article.md

@@ -1,5 +1,4 @@
 
-
 # Введение: колбэки
 
 Многие действия в JavaScript *асинхронные*.
@@ -54,15 +53,15 @@ newFunction(); // такой функции не существует!
 function loadScript(src, *!*callback*/!*) {
   let script = document.createElement('script');
   script.src = src;
-
 *!*
   script.onload = () => callback(script);
 */!*
-
   document.head.append(script);
 }
 ```
 
+Событие `onload` описано в статье <info:onload-onerror#loading-a-script>, оно в основном выполняет функцию после загрузки и выполнения скрипта.
+
 Теперь, если мы хотим вызвать функцию из скрипта, нужно делать это в колбэке:
 
 ```js

1-js/11-async/02-promise-basics/article.md

@@ -1,3 +1,4 @@
+
 # Промисы
 
 Представьте, что вы известный певец, которого фанаты постоянно донимают расспросами о предстоящем сингле.
@@ -126,9 +127,9 @@ let promise = new Promise(function(resolve, reject) {
 Свойства `state` и `result` - это внутренние свойства объекта `Promise` и мы не имеем к ним прямого доступа. Для обработки результата следует использовать методы `.then`/`.catch`/`.finally`, про них речь пойдёт дальше.
 ```
 
-## Потребители: then, catch, finally
+## Потребители: then, catch
 
-Объект `Promise` служит связующим звеном между исполнителем ("создающим" кодом или "певцом") и функциями-потребителями ("фанатами"), которые получат либо результат, либо ошибку. Функции-потребители могут быть зарегистрированы (подписаны) с помощью методов `.then`, `.catch` и `.finally`.
+Объект `Promise` служит связующим звеном между исполнителем ("создающим" кодом или "певцом") и функциями-потребителями ("фанатами"), которые получат либо результат, либо ошибку. Функции-потребители могут быть зарегистрированы (подписаны) с помощью методов `.then` и `.catch`.
 
 ### then
 
@@ -210,59 +211,84 @@ promise.catch(alert); // выведет "Error: Ошибка!" спустя од
 
 Вызов `.catch(f)` - это сокращённый, "укороченный" вариант  `.then(null, f)`.
 
-### finally
+## Очистка: finally
 
 По аналогии с блоком `finally` из обычного `try {...} catch {...}`, у промисов также есть метод `finally`.
 
 Вызов `.finally(f)` похож на `.then(f, f)`, в том смысле, что `f` выполнится в любом случае, когда промис завершится: успешно или с ошибкой.
 
-`finally` хорошо подходит для очистки, например остановки индикатора загрузки, его ведь нужно остановить вне зависимости от результата.
+Идея `finally` состоит в том, чтобы настроить обработчик для выполнения очистки/доведения после завершения предыдущих операций.
+
+Например, остановка индикаторов загрузки, закрытие больше не нужных соединений и т.д.
 
-Например:
+Думайте об этом как о завершении вечеринки. Независимо от того, была ли вечеринка хорошей или плохой, сколько на ней было друзей, нам все равно нужно (или, по крайней мере, мы должны) сделать уборку после нее.
+
+Код может выглядеть следующим образом:
 
 ```js
 new Promise((resolve, reject) => {
-  /* сделать что-то, что займёт время, и после вызвать resolve/reject */
+  /* сделать что-то, что займёт время, и после вызвать resolve или может reject */
 })
 *!*
   // выполнится, когда промис завершится, независимо от того, успешно или нет
   .finally(() => остановить индикатор загрузки)
+  // таким образом, индикатор загрузки всегда останавливается, прежде чем мы продолжим
 */!*
   .then(result => показать результат, err => показать ошибку)
 ```
 
-Но это не совсем псевдоним `then(f,f)`, как можно было подумать. Существует несколько важных отличий:
+Обратите внимание, что `finally(f)` - это не совсем псевдоним `then(f,f)`, как можно было подумать.
+
+Есть важные различия:
 
 1. Обработчик, вызываемый из `finally`, не имеет аргументов. В `finally` мы не знаем, как был завершён промис. И это нормально, потому что обычно наша задача - выполнить "общие" завершающие процедуры.
+
+    Пожалуйста, взгляните на приведенный выше пример: как вы можете видеть, обработчик `finally` не имеет аргументов, а результат promise обрабатывается в следующем обработчике.
+
 2. Обработчик `finally` "пропускает" результат или ошибку дальше, к последующим обработчикам.
 
     Например, здесь результат проходит через `finally` к `then`:
+    
     ```js run
     new Promise((resolve, reject) => {
-      setTimeout(() => resolve("result"), 2000)
+      setTimeout(() => resolve("value"), 2000);
     })
-      .finally(() => alert("Промис завершён"))
-      .then(result => alert(result)); // <-- .then обработает результат
+      .finally(() => alert("Промис завершён")) // срабатывает первым
+      .then(result => alert(result)); // <-- .then показывает "value"
     ```
-
+    
+    Как вы можете видеть, значение возвращаемое первым промисом, передается через `finally` к следующему `then`.
+    
+    Это очень удобно, потому что `finally` не предназначен для обработки результата промиса. Как уже было сказано, это место для проведения общей очистки, независимо от того, каков был результат.
+    
     А здесь ошибка из промиса проходит через `finally` к `catch`:
 
     ```js run
     new Promise((resolve, reject) => {
       throw new Error("error");
     })
-      .finally(() => alert("Промис завершён"))
-      .catch(err => alert(err));  // <-- .catch обработает объект ошибки
+      .finally(() => alert("Промис завершён")) // срабатывает первым
+      .catch(err => alert(err));  // <-- .catch показывает ошибку
     ```  
 
-    Это очень удобно, потому что `finally` не предназначен для обработки результата промиса. Так что он просто пропускает его через себя дальше.
+3. Обработчик `finally` также не должен ничего возвращать. Если это так, то возвращаемое значение молча игнорируется.
 
-    Мы более подробно поговорим о создании цепочек промисов и передаче результатов между обработчиками в следующей главе.
+    Единственным исключением из этого правила является случай, когда обработчик `finally` выдает ошибку. Затем эта ошибка передается следующему обработчику вместо любого предыдущего результата.
+    
+Подведем итог:
 
-3. Последнее, но не менее значимое: вызов `.finally(f)` удобнее, чем `.then(f, f)` - не надо дублировать функции f.
+- Обработчик `finally` не получает результат предыдущего обработчика (у него нет аргументов). Вместо этого этот результат передается следующему подходящему обработчику.
+- Если обработчик `finally` возвращает что-то, это игнорируется.
+- Когда `finally` выдает ошибку, выполнение переходит к ближайшему обработчику ошибок.
+
+Эти функции полезны и заставляют все работать правильно, если мы используем `finally` так, как предполагается: для общих процедур очистки.
 
 ````smart header="На завершённых промисах обработчики запускаются сразу"
-Если промис в состоянии ожидания, обработчики в `.then/catch/finally` будут ждать его. Однако, если промис уже завершён, то обработчики выполнятся сразу:
+Если промис в состоянии ожидания, обработчики в `.then/catch/finally` будут ждать его.
+
+Иногда может случиться так, что промис уже выполнен, когда мы добавляем к нему обработчик.
+
+В таком случае эти обработчики просто запускаются немедленно:
 
 ```js run
 // при создании промиса он сразу переводится в состояние "успешно завершён"
@@ -272,10 +298,10 @@ promise.then(alert); // готово! (выведется сразу)
 ```
 ````
 
-Теперь рассмотрим несколько практических примеров того, как промисы могут облегчить нам написание асинхронного кода.
-
 ## Пример: loadScript [#loadscript]
 
+Теперь рассмотрим несколько практических примеров того, как промисы могут облегчить нам написание асинхронного кода.
+
 У нас есть функция `loadScript` для загрузки скрипта из предыдущей главы.
 
 Давайте вспомним, как выглядел вариант с колбэками:

1-js/11-async/04-promise-error-handling/article.md

@@ -199,6 +199,7 @@ new Promise(function() {
 ## Итого
 
 - `.catch` перехватывает все виды ошибок в промисах: будь то вызов `reject()` или ошибка, брошенная в обработчике при помощи `throw`.
+- `.then` также перехватывает ошибки таким же образом, если задан второй аргумент (который является обработчиком ошибок).
 - Необходимо размещать `.catch` там, где мы хотим обработать ошибки и знаем, как это сделать. Обработчик может проанализировать ошибку (могут быть полезны пользовательские классы ошибок) и пробросить её, если ничего не знает о ней (возможно, это программная ошибка).
 - Можно и совсем не использовать `.catch`, если нет нормального способа восстановиться после ошибки.
 - В любом случае нам следует использовать обработчик события `unhandledrejection` (для браузеров и аналог для других окружений), чтобы отслеживать необработанные ошибки и информировать о них пользователя (и, возможно, наш сервер), благодаря чему наше приложение никогда не будет "просто умирать".

2-ui/4-forms-controls/2-focus-blur/article.md

@@ -1,3 +1,4 @@
+
 # Фокусировка: focus/blur
 
 Элемент получает фокус, когда пользователь кликает по нему или использует клавишу `key:Tab`. Также существует HTML-атрибут `autofocus`, который устанавливает фокус на элемент, когда страница загружается. Есть и другие способы получения фокуса, о них - далее.
@@ -51,7 +52,6 @@
 
 Современный HTML позволяет делать валидацию с помощью атрибутов `required`, `pattern` и т.д. Иногда - это всё, что нам нужно. JavaScript можно использовать, когда мы хотим больше гибкости. А ещё мы могли бы отправлять изменённое значение на сервер, если оно правильное.
 
-
 ## Методы focus/blur
 
 Методы `elem.focus()` и `elem.blur()` устанавливают/снимают фокус.
@@ -90,6 +90,8 @@
 
 Отметим, что мы не можем "отменить потерю фокуса", вызвав `event.preventDefault()` в обработчике `onblur` потому, что `onblur` срабатывает *после* потери фокуса элементом.
 
+Однако на практике следует хорошо подумать, прежде чем внедрять что-то подобное, потому что мы обычно *должны показывать ошибки* пользователю, но они *не должны мешать* пользователю при заполнении нашей формы. Ведь, вполне возможно, что он захочет сначала заполнить другие поля.
+
 ```warn header="Потеря фокуса, вызванная JavaScript"
 Потеря фокуса может произойти по множеству причин.
 
@@ -102,6 +104,7 @@
 
 Используя эти события, нужно быть осторожным. Если мы хотим отследить потерю фокуса, которую инициировал пользователь, тогда нам следует избегать её самим.
 ```
+
 ## Включаем фокусировку на любом элементе: tabindex
 
 Многие элементы по умолчанию не поддерживают фокусировку.
@@ -125,6 +128,7 @@
 - `tabindex="0"` ставит элемент в один ряд с элементами без `tabindex`. То есть, при переключении такие элементы будут после элементов с `tabindex ≥ 1`.
 
     Обычно используется, чтобы включить фокусировку на элементе, но не менять порядок переключения. Чтобы элемент мог участвовать в форме наравне с обычными `<input>`.
+
 - `tabindex="-1"` позволяет фокусироваться на элементе только программно. Клавиша `key:Tab` проигнорирует такой элемент, но метод `elem.focus()` будет действовать.
 
 Например, список ниже. Кликните первый пункт в списке и нажмите `key:Tab`: