JS: Исправляет ошибки, форматирует (часть 6) (#5294)

* Форматирует, исправляет ошибки * Ещё форматирует, исправляет ошибки * Принимает правки от Светы Co-authored-by: Svetlana Korobtseva <[email protected]> * Находит потерявшуюся правку Co-authored-by: Svetlana Korobtseva <[email protected]> * Возвращает ; * Возвращает запятую --------- Co-authored-by: Svetlana Korobtseva <[email protected]>
doka-guide · Apr 18, 2024 · a0fc3b1 · a0fc3b1
1 parent 99eed1e
commit a0fc3b1
Show file tree

Hide file tree

Showing 32 changed files with 241 additions and 213 deletions.
diff --git a/js/element-removeeventlistener/index.md b/js/element-removeeventlistener/index.md
@@ -36,14 +36,14 @@ window.addEventListener('click', handleMouseClick)
 window.removeEventListener('click', handleMouseClick)
 ```
 
-<iframe title="Удаление обработчика событий — Element.removeEventListener() — Дока" src="demos/index/" height="350"></iframe>
+<iframe title="Удаление обработчика событий" src="demos/index/" height="350"></iframe>
 
 Метод `removeEventListener()` принимает три аргумента. Первые два обязательные:
 
 - название события строкой;
 - функция-обработчик, которую нужно убрать с указанного события.
 
-Третий аргумент необязательный — это объект с настройками в котором могут содержаться свойства `capture` и `passive` с булевыми значениями `true` либо `false`. Точно такие же опции, можно передать и в `.addEventListener()`.
+Третий аргумент необязательный — это объект с настройками, в котором могут содержаться свойства `capture` и `passive` с булевыми значениями `true` либо `false`. Точно такие же опции можно передать и в `.addEventListener()`.
 
 ```js
 window.addEventListener('click', handleMouseClick, {
@@ -73,11 +73,11 @@ window.addEventListener('click', handleMouseClick, true)
 window.removeEventListener('click', handleMouseClick)
 ```
 
-Аналогичная ситуация, если делать наоборот.
+Аналогичная ситуация, если сделать наоборот.
 
 ## Как понять
 
-Браузер даёт возможность не только устанавливать обработчик события, но и убирать их.
+Браузер даёт возможность не только устанавливать обработчики событий, но и убирать их.
 
 Очищать обработчики событий важно, потому что каждый обработчик занимает место в памяти и выполняется всякий раз, когда срабатывает событие. Если не убирать неиспользуемые обработчики событий, то можно столкнуться с неожиданным поведением. Например, один из старых обработчиков будет мешать всплытию события наверх, и другой обработчик не будет работать.
 
@@ -89,7 +89,7 @@ window.removeEventListener('click', handleMouseClick)
 
 Будет ли на самом деле удалён обработчик события зависит от того, какую функцию и какие опции передали вторым и третьим аргументами в `.removeEventListener()`.
 
-Функции относятся к [ссылочным типам данных](/js/ref-type-vs-value-type/), а значит две одинаково написанные функции будут считаться различными. Поэтому, если ранее в `.addEventListener()` использовалась анонимная функция, то убрать обработчик с помощью `.removeEventListener()` не получится.
+Функции относятся к [ссылочным типам данных](/js/ref-type-vs-value-type/), а, значит, две одинаково написанные функции будут считаться различными. Поэтому, если ранее в `.addEventListener()` использовалась анонимная функция, то убрать обработчик с помощью `.removeEventListener()` не получится.
 
 ```js
 window.addEventListener('click', (event) => {
@@ -102,7 +102,7 @@ window.removeEventListener('click', (event) => {
 })
 ```
 
-Всегда сохраняйте функцию-обработчик в переменную чтобы позже убрать обработчик. Делать это необязательно только если вы делаете быстрый прототип или проверяете свою идею прямо в браузере.
+Всегда сохраняйте функцию-обработчик в переменную, чтобы позже убрать обработчик. Делать это необязательно, только если вы делаете быстрый прототип или проверяете свою идею прямо в браузере.
 
 Браузер сравнивает опции, когда ищет обработчик события для удаления. Посмотрим ещё раз на пример выше, когда в `.addEventListener()` передали в опциях `true`, а в `.removeEventListener()` нет опций.
 
@@ -117,4 +117,4 @@ window.addEventListener('click', handleMouseClick, true)
 window.removeEventListener('click', handleMouseClick)
 ```
 
-Так происходит потому что третий аргумент неявно устанавливается в [`undefined`](/js/undefined/), а `undefined` превращается в `false` при [конвертации в булевый тип](/js/typecasting/). Когда браузер ищет обработчик на удаление, он сравнивает опции и видит, что `true !== false`, значит обработчик не будет удалён.
+Так происходит потому, что третий аргумент неявно устанавливается в [`undefined`](/js/undefined/), а `undefined` превращается в `false` при [конвертации в булев тип](/js/typecasting/). Когда браузер ищет обработчик на удаление, он сравнивает опции и видит, что `true !== false`, значит, обработчик не будет удалён.
diff --git a/js/element-removeeventlistener/practice/windrushfarer.md b/js/element-removeeventlistener/practice/windrushfarer.md
@@ -1,6 +1,6 @@
-🛠 Автоматическое очищение обработчика после первого срабатывания
+🛠 Автоматическое очищение обработчика после первого срабатывания.
 
-Если нужно чтобы событие сработало только один раз, то можно не использовать `removeEventListener()`, а использовать опцию `once` в `addEventListener()`.
+Если нужно, чтобы событие сработало только один раз, то можно не использовать `removeEventListener()`, а использовать опцию `once` в `addEventListener()`.
 
 ```js
 window.addEventListener('click', function (event) {
@@ -10,7 +10,7 @@ window.addEventListener('click', function (event) {
 
 При первом клике обработчик сработает, а затем автоматически удалится. В этом случае можно даже использовать анонимную функцию, так как не нужно очищать обработчик вручную.
 
-🛠 Можно написать очищение обработчика в самом обработчике событий
+🛠 Можно написать очищение обработчика в самом обработчике событий.
 
 Когда в браузерах не было возможности использовать опцию `{ once: true }` при установке обработчика события, такое поведение делали самостоятельно:
 

diff --git a/js/element-scroll/index.md b/js/element-scroll/index.md
@@ -44,7 +44,8 @@ document.addEventListener('scroll', function(event) {
 
 ```js
 document.addEventListener('scroll', function() {
-  // получаем высоту элемента, на котором произошло событие
+  // Получаем высоту элемента,
+  // на котором произошло событие
   console.log(this.scrollTop)
 })
 ```
diff --git a/js/element-scroll/practice/nlopin.md b/js/element-scroll/practice/nlopin.md
@@ -1,4 +1,4 @@
-🛠 Если вы подписались на `scroll`, то приготовьтесь получать большое количество событий. Событие будет приходить примерно на каждый кадр. Поэтому в обработчике не рекомендуется производить тяжёлых вычислений и модификации DOM. Это приведёт к потере кадров при отрисовке и ощущения, что сайт тормозит.
+🛠 Если вы подписались на `scroll`, то приготовьтесь получать большое количество событий. Событие будет приходить примерно на каждый кадр. Поэтому в обработчике не рекомендуется производить тяжёлых вычислений и модификации DOM. Это приведёт к потере кадров при отрисовке и ощущению, что сайт тормозит.
 
 🛠 Избежать большого количества событий `scroll` можно, используя технику под названием [throttling](/js/throttle/). Её смысл состоит в том, чтобы принимать следующее событие только после истечения некоторого промежутка времени.
 
@@ -24,7 +24,7 @@ const throttle = (func, limit) => {
   }
 }
 
-// код будет срабатывать раз в 1 секунду
+// Код будет срабатывать раз в 1 секунду
 document.addEventListener('scroll', throttle(function() {
   return console.log('Hey! It is', new Date().toUTCString())
 }, 1000))

diff --git a/js/element-scrollby/index.md b/js/element-scrollby/index.md
@@ -3,6 +3,10 @@ title: "`.scrollBy()`"
 description: "Прокрутить страницу на указанные величины."
 authors:
   - starhamster
+related:
+  - js/scroll
+  - js/event
+  - js/events
 tags:
   - doka
 ---
@@ -26,15 +30,15 @@ div.scrollBy(0, 100)
 ## Как пишется
 
 ```js
-window.scrollBy(x, y);
+window.scrollBy(x, y)
 ```
 
 Тут _x_ и _y_ — это [координаты](/tools/coordinates/), на которые будет прокручено окно.
 
 Вместо координат в `scrollBy()` можно передать объект с тремя параметрами:
 
-- `top` задаёт количество пикселей для прокрутки по оси Y;
-- `left` — то же самое, но по оси X;
+- `top` задаёт количество пикселей для прокрутки по оси _y_;
+- `left` — то же самое, но по оси _x_;
 - `behavior` определяет поведение прокрутки. По умолчанию резкое `auto`, но можно указать плавный `smooth`.
 
 ```js

diff --git a/js/element-scrollintoview/index.md b/js/element-scrollintoview/index.md
@@ -29,8 +29,8 @@ element.scrollIntoView()
 
 🤖 В `scrollIntoView()` можно передать аргумент типа [boolean](/js/boolean/):
 
-- Если указать `true`, то скролл окна остановится у верхней границы элемента;
-- Если указать `false`, то у нижней границы.
+- если указать `true`, то скролл окна остановится у верхней границы элемента;
+- если указать `false`, то у нижней границы.
 
 <iframe title="Прокрутка к элементу с помощью логических аргументов" src="demos/basic/" height="450"></iframe>
 
@@ -41,7 +41,9 @@ element.scrollIntoView()
 - `inline` за горизонтальное выравнивание. Принимает то же, что и `block`.
 
 ```js
-element.scrollIntoView({behavior: "smooth", block: "center", inline: "start"})
+element.scrollIntoView(
+  {behavior: "smooth", block: "center", inline: "start"}
+)
 ```
 
 ## Как понять

diff --git a/js/element-scrollto/index.md b/js/element-scrollto/index.md
@@ -26,7 +26,7 @@ window.scrollTo(x, y)
 
 Где _x_ и _y_ — это [координаты](/tools/coordinates/) левого верхнего угла экрана.
 
-Для скролла внутри элемента (например, в [`<div>`](/html/div/)) нужно сначала получить этот [элемент](/js/element/). Прокрутим первый на странице `<div>` на 100 пикселей вниз (этот блок должен содержать достаточно контента, чтобы появился скроллбар):
+Для скролла внутри элемента (например, в [`<div>`](/html/div/)) нужно сначала получить этот [элемент](/js/element/). Прокрутим первый на странице `<div>` на 100 пикселей вниз (этот блок должен содержать достаточно контента, чтобы появилась полоса прокрутки):
 
 ```js
 const div = document.querySelector('div')
@@ -36,8 +36,8 @@ div.scrollTo(0, 100)
 
 Вместо координат в `scrollTo()` можно передать объект с тремя параметрами:
 
-- `top` задаёт количество пикселей для прокрутки по оси Y;
-- `left` то же самое, но по оси X;
+- `top` задаёт количество пикселей для прокрутки по оси _y_;
+- `left` то же самое, но по оси _x_;
 - `behavior` определяет поведение прокрутки. По умолчанию резкое `auto`, но можно указать плавный `smooth`.
 
 ```js

diff --git a/js/element-set-property/demos/example/index.html b/js/element-set-property/demos/example/index.html
@@ -2,7 +2,7 @@
 <html lang="ru">
 
 <head>
-  <title>Example — Метод setProperty() для установки CSS стилей из JS — Дока</title>
+  <title>Использование setProperty() для изменения стилей — .setProperty() — Дока</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="preconnect" href="https://fonts.googleapis.com">