From 841aae260382e2bf5ebb44d765d8c7301d27caab Mon Sep 17 00:00:00 2001 From: Alexey Istomin Date: Sat, 20 Mar 2021 18:37:44 +0300 Subject: Restore "ё" letter in Russian translation (#239) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs(ru): restore ё letter * docs(ru): resolve conflicts * refactor(idea): remove ide folder --- .../javascript/asynchronous/async_await/index.html | 30 +++---- .../javascript/asynchronous/concepts/index.html | 22 ++--- .../javascript/asynchronous/introducing/index.html | 26 +++--- .../asynchronous/timeouts_and_intervals/index.html | 100 ++++++++++----------- .../build_your_own_function/index.html | 36 ++++---- .../building_blocks/conditionals/index.html | 60 ++++++------- .../javascript/building_blocks/events/index.html | 50 +++++------ .../building_blocks/functions/index.html | 40 ++++----- .../building_blocks/image_gallery/index.html | 8 +- .../building_blocks/looping_code/index.html | 76 ++++++++-------- .../building_blocks/return_values/index.html | 16 ++-- .../test_your_skills_colon__functions/index.html | 8 +- .../client-side_storage/index.html | 30 +++---- .../client-side_web_apis/fetching_data/index.html | 44 ++++----- .../javascript/client-side_web_apis/index.html | 6 +- .../client-side_web_apis/introduction/index.html | 2 +- .../manipulating_documents/index.html | 54 +++++------ .../third_party_apis/index.html | 18 ++-- .../first_steps/a_first_splash/index.html | 78 ++++++++-------- .../learn/javascript/first_steps/arrays/index.html | 30 +++---- .../learn/javascript/first_steps/math/index.html | 40 ++++----- .../first_steps/silly_story_generator/index.html | 26 +++--- .../javascript/first_steps/strings/index.html | 18 ++-- .../first_steps/useful_string_methods/index.html | 42 ++++----- .../javascript/first_steps/variables/index.html | 44 ++++----- .../first_steps/what_is_javascript/index.html | 38 ++++---- .../first_steps/what_went_wrong/index.html | 48 +++++----- files/ru/learn/javascript/howto/index.html | 6 +- files/ru/learn/javascript/index.html | 4 +- .../adding_bouncing_balls_features/index.html | 24 ++--- .../ru/learn/javascript/objects/basics/index.html | 26 +++--- files/ru/learn/javascript/objects/index.html | 4 +- .../javascript/objects/inheritance/index.html | 36 ++++---- files/ru/learn/javascript/objects/json/index.html | 32 +++---- .../objects/object-oriented_js/index.html | 18 ++-- .../objects/object_building_practice/index.html | 28 +++--- .../objects/object_prototypes/index.html | 42 ++++----- 37 files changed, 605 insertions(+), 605 deletions(-) (limited to 'files/ru/learn/javascript') diff --git a/files/ru/learn/javascript/asynchronous/async_await/index.html b/files/ru/learn/javascript/asynchronous/async_await/index.html index bef0f49847..4c0c08ae33 100644 --- a/files/ru/learn/javascript/asynchronous/async_await/index.html +++ b/files/ru/learn/javascript/asynchronous/async_await/index.html @@ -11,7 +11,7 @@ translation_of: Learn/JavaScript/Asynchronous/Async_await
{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}
-

В ECMAScript версии 2017 появились async functions и ключевое слово await (ECMAScript Next support in Mozilla). По существу, такие функции есть синтаксический сахар над Promises и Generator functions (ts39). С их помощью легче писать/читать асинхронный код, ведь они позволяют использовать привычный синхронный стиль написания. В этой статье мы на базовом уровне разберемся в их устройстве.

+

В ECMAScript версии 2017 появились async functions и ключевое слово await (ECMAScript Next support in Mozilla). По существу, такие функции есть синтаксический сахар над Promises и Generator functions (ts39). С их помощью легче писать/читать асинхронный код, ведь они позволяют использовать привычный синхронный стиль написания. В этой статье мы на базовом уровне разберёмся в их устройстве.

@@ -41,7 +41,7 @@ hello();

Функция возвращает "Hello" — ничего необычного, верно ?

-

Но что если мы сделаем ее асинхронной ? Проверим:

+

Но что если мы сделаем её асинхронной ? Проверим:

async function hello() { return "Hello" };
 hello();
@@ -63,16 +63,16 @@ hello();
hello().then((value) => console.log(value))
-

или еще короче

+

или ещё короче

hello().then(console.log)
-

Итак, ключевое слово async, превращает обычную функцию в асинхронную и результат вызова функции оборачивает в Promise. Также асинхронная функция позволяет использовать в своем теле ключевое слово await, о котором далее.

+

Итак, ключевое слово async, превращает обычную функцию в асинхронную и результат вызова функции оборачивает в Promise. Также асинхронная функция позволяет использовать в своём теле ключевое слово await, о котором далее.

Ключевое слово await

-

Асинхронные функции становятся по настоящему мощными, когда вы используете ключевое слово await  — по факту, await работает только в асинхронных функциях. Мы можем использовать await перед promise-based функцией, чтобы остановить поток выполнения и дождаться результата ее выполнения (результат Promise). В то же время, остальной код нашего приложения не блокируется и продолжает работать.

+

Асинхронные функции становятся по настоящему мощными, когда вы используете ключевое слово await  — по факту, await работает только в асинхронных функциях. Мы можем использовать await перед promise-based функцией, чтобы остановить поток выполнения и дождаться результата её выполнения (результат Promise). В то же время, остальной код нашего приложения не блокируется и продолжает работать.

Вы можете использовать await перед любой функцией, что возвращает Promise, включая Browser API функции.

@@ -84,7 +84,7 @@ hello(); hello().then(alert); -

Конечно, на практике код выше бесполезен, но в учебных целях он иллюстрирует синтаксис асинхронных функций. Теперь давайте перейдем к реальным примерам.

+

Конечно, на практике код выше бесполезен, но в учебных целях он иллюстрирует синтаксис асинхронных функций. Теперь давайте перейдём к реальным примерам.

Переписываем Promises с использованием async/await

@@ -154,7 +154,7 @@ myFetch().then((blob) => {

Минуточку, а как это все работает ?

-

Вы могли заметить, что мы обернули наш код в функцию и сделали ее асинхронной с помощью acync. Это было обязательно - нам надо создать контейнер, внутри которого будет запускаться асинхронный код и будет возможность дождаться его результата с помощью await, не блокируя остальной код нашего скрипта.

+

Вы могли заметить, что мы обернули наш код в функцию и сделали её асинхронной с помощью acync. Это было обязательно - нам надо создать контейнер, внутри которого будет запускаться асинхронный код и будет возможность дождаться его результата с помощью await, не блокируя остальной код нашего скрипта.

Внутри myFetch() находится код, который слегка напоминает версию на Promise, но есть важные отличия. Вместо того, чтобы писать цепочку блоков .then() мы просто использует ключевое слово await перед вызовом promise-based функции и присваиваем результат в переменную. Ключевое слово await говорит JavaScript runtime приостановить код в этой строке, не блокируя остальной код скрипта за пределами асинхронной функции. Когда вызов promise-based функции будет готов вернуть результат, выполнение продолжится с этой строки дальше.

@@ -162,7 +162,7 @@ myFetch().then((blob) => { 

let response = await fetch('coffee.jpg');
-

Значение Promise, которое вернет fetch() будет присвоено переменной response только тогда, когда оно будет доступно - парсер делает паузу на данной строке дожидаясь этого момента. Как только значение доступно, парсер переходит к следующей строке, в которой создается объект Blob из результата Promise. В этой строке, кстати, также используется await, потому что метод .blob() также возвращает Promise. Когда результат готов, мы возвращаем его наружу из myFetch().

+

Значение Promise, которое вернёт fetch() будет присвоено переменной response только тогда, когда оно будет доступно - парсер делает паузу на данной строке дожидаясь этого момента. Как только значение доступно, парсер переходит к следующей строке, в которой создаётся объект Blob из результата Promise. В этой строке, кстати, также используется await, потому что метод .blob() также возвращает Promise. Когда результат готов, мы возвращаем его наружу из myFetch().

Обратите внимание, когда мы вызываем myFetch(), она возвращает Promise, поэтому мы можем вызвать .then() на результате, чтобы отобразить его на экране.

@@ -173,7 +173,7 @@ myFetch().then((blob) => {


Чтобы обработать ошибки у нас есть несколько вариантов

-

Мы можем использовать синхронную try...catch структуру с async/await. Вот измененная версия первого примера выше:

+

Мы можем использовать синхронную try...catch структуру с async/await. Вот изменённая версия первого примера выше:

async function myFetch() {
   try {
@@ -195,7 +195,7 @@ myFetch().then((blob) => {
 
 myFetch();
-

В блок catch() {} передается объект ошибки, который мы назвали e; мы можем вывести его в консоль, чтобы посмотреть детали: где и почему возникла ошибка.

+

В блок catch() {} передаётся объект ошибки, который мы назвали e; мы можем вывести его в консоль, чтобы посмотреть детали: где и почему возникла ошибка.

Если вы хотите использовать гибридный подходы (пример выше), лучше использовать блок .catch() после блока .then() вот так:

@@ -229,7 +229,7 @@ myFetch().then((blob) => {

Await и Promise.all()

-

Как вы помните, асинхронные функции построены поверх promises, поэтому они совместимы со всеми возможностями последних. Мы легко можем подождать выполнение Promise.all(), присвоить результат в переменную и все это сделать используя синхронный стиль. Опять, вернемся к примеру, рассмотренному в предыдущей статье. Откройте пример в соседней вкладке, чтобы лучше понять разницу.

+

Как вы помните, асинхронные функции построены поверх promises, поэтому они совместимы со всеми возможностями последних. Мы легко можем подождать выполнение Promise.all(), присвоить результат в переменную и все это сделать используя синхронный стиль. Опять, вернёмся к примеру, рассмотренному в предыдущей статье. Откройте пример в соседней вкладке, чтобы лучше понять разницу.

Версия с async/await (смотрите live demo и source code), сейчас выглядит так:

@@ -284,9 +284,9 @@ displayContent() 
let values = await Promise.all([coffee, tea, description]);
-

С помощью await мы ждем массив результатов всех трех Promises и присваиваем его в переменную values. Это асинхронный код, но он написан в синхронном стиле, за счет чего он гораздо читабельнее.
+

С помощью await мы ждём массив результатов всех трёх Promises и присваиваем его в переменную values. Это асинхронный код, но он написан в синхронном стиле, за счёт чего он гораздо читабельнее.

- Мы должны обернуть весь код в синхронную функцию, displayContent(), и мы не сильно сэкономили на количестве кода, но мы извлекли код блока .then(), за счет чего наш код стал гораздо чище.

+ Мы должны обернуть весь код в синхронную функцию, displayContent(), и мы не сильно сэкономили на количестве кода, но мы извлекли код блока .then(), за счёт чего наш код стал гораздо чище.

Для обработки ошибок мы добавили блок .catch() для функции displayContent(); Это позволило нам отловить ошибки в обоих функциях.

@@ -300,7 +300,7 @@ displayContent()

Async/await позволяет вам писать код в синхронном стиле. Ключевое слово await блокирует приостанавливает выполнение ptomise-based функции до того момента, пока promise примет статус fulfilled. Это не блокирует код за пределами вашей асинхронной функции, тем не менее важно помнить, что внутри асинхронной функции поток выполнения блокируется.

- Ваш код может стать медленнее за счет большого количества awaited promises, которые идут один за другим. Каждый await должен дождаться выполнения предыдущего, тогда как на самом деле мы хотим, чтобы наши Promises выполнялись одновременно, как если бы мы не использовали async/await.
+ Ваш код может стать медленнее за счёт большого количества awaited promises, которые идут один за другим. Каждый await должен дождаться выполнения предыдущего, тогда как на самом деле мы хотим, чтобы наши Promises выполнялись одновременно, как если бы мы не использовали async/await.

Есть подход, который позволяет обойти эту проблему - сохранить все выполняющиеся Promises в переменные, а уже после этого дожидаться (awaiting) их результата. Давайте посмотрим на несколько примеров.

@@ -339,7 +339,7 @@ timeTest().then(() => { await timeoutPromise(3000); } -

Здесь мы просто ждем все три  timeoutPromise() напрямую, блокируя выполнение на данного блока на 3 секунды при каждом вызове. Все последующие вызовы вынуждены ждать пока разрешится предыдущий. Если вы запустите первый пример (slow-async-await.html) вы увидите alert сообщающий время выполнения около 9 секунд. 

+

Здесь мы просто ждём все три  timeoutPromise() напрямую, блокируя выполнение на данного блока на 3 секунды при каждом вызове. Все последующие вызовы вынуждены ждать пока разрешится предыдущий. Если вы запустите первый пример (slow-async-await.html) вы увидите alert сообщающий время выполнения около 9 секунд. 

Во втором  fast-async-await.html примере, функция timeTest() выглядит как:

diff --git a/files/ru/learn/javascript/asynchronous/concepts/index.html b/files/ru/learn/javascript/asynchronous/concepts/index.html index def7da8a78..cd87899ec3 100644 --- a/files/ru/learn/javascript/asynchronous/concepts/index.html +++ b/files/ru/learn/javascript/asynchronous/concepts/index.html @@ -29,7 +29,7 @@ translation_of: Learn/JavaScript/Asynchronous/Concepts

Что же такое Асинхронность?

-

Как правило, программный код выполняется последовательно, только одна конкретная операция происходит в данный момент времени. Если функция зависит от результата выполнения другой функции, то она должна дождаться пока нужная ей функция не завершит свою работу и не вернет результат и до тех пор пока это не произойдет, выполнение программы, по сути, будет остановлено с точки зрения пользователя.

+

Как правило, программный код выполняется последовательно, только одна конкретная операция происходит в данный момент времени. Если функция зависит от результата выполнения другой функции, то она должна дождаться пока нужная ей функция не завершит свою работу и не вернёт результат и до тех пор пока это не произойдёт, выполнение программы, по сути, будет остановлено с точки зрения пользователя.

Пользователь современного ПК, наверняка, наблюдал, как курсор меняет свой вид и становится "разноцветным спинером" (у пользователей MacOS). Таким образом операционная система сообщает - "текущая программа, ожидает завершения какого то длительного процесса в системе и я решила сообщить тебе, что бы ты не волновался".

@@ -43,7 +43,7 @@ translation_of: Learn/JavaScript/Asynchronous/Concepts

Давайте рассмотрим несколько примеров, которые покажут, что именно значит блокировка.

-

В нашем simple-sync.html примере (see it running live), добавим кнопке событие на клик, чтобы при нажатии на нее запускалась трудоемкая операция (расчет 10000000 дат, и вывод последней рассчитанной даты на консоль) после чего в DOM добавляется еще один параграф:

+

В нашем simple-sync.html примере (see it running live), добавим кнопке событие на клик, чтобы при нажатии на неё запускалась трудоёмкая операция (расчёт 10000000 дат, и вывод последней рассчитанной даты на консоль) после чего в DOM добавляется ещё один параграф:

const btn = document.querySelector('button');
 btn.addEventListener('click', () => {
@@ -69,7 +69,7 @@ btn.addEventListener('click', () => {
 
В нашем следующем примере, simple-sync-ui-blocking.html (посмотреть пример), мы сделаем что-нибудь более реалистичное, с чем вы сможете столкнуться на реальной странице. Мы заблокируем действия пользователя отрисовкой страницы. В этом примере у нас две кнопки:
-

Если вы быстро нажмете на первую кнопку и затем быстро кликните на вторую, вы увидите, что предупреждение не появится на странице, пока все круги не будут отрисованы. Первая операция блокирует выполнение следующей до тех пор пока не завершится сама.

+

Если вы быстро нажмёте на первую кнопку и затем быстро кликните на вторую, вы увидите, что предупреждение не появится на странице, пока все круги не будут отрисованы. Первая операция блокирует выполнение следующей до тех пор пока не завершится сама.

-

Примечание: Хорошо, в приведенном некрасивом примере, мы получили эффект блокировки, который показывает общую проблему  при разработке приложений, с которой все время приходится бороться разработчикам.

+

Примечание: Хорошо, в приведённом некрасивом примере, мы получили эффект блокировки, который показывает общую проблему  при разработке приложений, с которой все время приходится бороться разработчикам.

Почему так происходит? Потому что JavaScript, в общем случае, выполняет команды в одном потоке. Пришло время познакомиться с понятием потока.

@@ -117,7 +117,7 @@ Thread 2: Task C --> Task D
Main thread: Render circles to canvas --> Display alert()
-

В итоге, JavaScript получил несколько инструментов, которые могут помочь в решении подобных проблем. Web workers позволяют вам обработать некоторый JavaScript код в отдельном потоке, который называется обработчик, таким образом вы можете запускать отдельные блоки JavaScript кода одновременно. В основном, вы будете использовать воркеры, чтобы запустить ресурсоемкий процесс, отдельно от основного потока, чтобы не блокировать действия пользователя.

+

В итоге, JavaScript получил несколько инструментов, которые могут помочь в решении подобных проблем. Web workers позволяют вам обработать некоторый JavaScript код в отдельном потоке, который называется обработчик, таким образом вы можете запускать отдельные блоки JavaScript кода одновременно. В основном, вы будете использовать воркеры, чтобы запустить ресурсоёмкий процесс, отдельно от основного потока, чтобы не блокировать действия пользователя.

  Main thread: Task A --> Task C
 Worker thread: Expensive task B
@@ -128,18 +128,18 @@ Worker thread: Expensive task B

Воркеры полезный инструмент, но у них есть свои ограничения. Самое существенное, заключается в том, что они не имеют доступа к {{Glossary("DOM")}} — вы не можете использовать воркер для обновления UI. Мы не можем отрисовать миллион наших точек  внутри воркера; он может только обработать большой объем информации.

-

Следующая проблема заключается в том, что даже если код запущенный в воркере ничего не блокирует, он в целом остается синхронным. Это проблема появляется, когда какой-то функции требуются результаты выполнения нескольких предыдущих функций. Рассмотрим следующую диаграмму потоков:

+

Следующая проблема заключается в том, что даже если код запущенный в воркере ничего не блокирует, он в целом остаётся синхронным. Это проблема появляется, когда какой-то функции требуются результаты выполнения нескольких предыдущих функций. Рассмотрим следующую диаграмму потоков:

Main thread: Task A --> Task B
-

В этом примере, предположим Task A делает что-то вроде получения картинки с сервера а Task B затем делает что-нибудь с полученной картинкой, например, применяет к ней фильтр. Если запустить выполняться Task A и тут же попытаться выполнить Task B, то вы получите ошибку, поскольку картинка еще не будет доступна.

+

В этом примере, предположим Task A делает что-то вроде получения картинки с сервера а Task B затем делает что-нибудь с полученной картинкой, например, применяет к ней фильтр. Если запустить выполняться Task A и тут же попытаться выполнить Task B, то вы получите ошибку, поскольку картинка ещё не будет доступна.

  Main thread: Task A --> Task B --> |Task D|
 Worker thread: Task C -----------> |      |
-

Теперь, давайте предположим, что Task D использует результат выполнения обеих задач Task B и Task C. Если мы уверенны, что оба результата будут доступны одновременно, тогда не возникнет проблем, однако, часто это не так. Если Task D попытаться запустить, когда какого-то нужного ей результата еще нет, выполнение закончится ошибкой.

+

Теперь, давайте предположим, что Task D использует результат выполнения обеих задач Task B и Task C. Если мы уверенны, что оба результата будут доступны одновременно, тогда не возникнет проблем, однако, часто это не так. Если Task D попытаться запустить, когда какого-то нужного ей результата ещё нет, выполнение закончится ошибкой.

-

Чтобы избежать подобных проблем, браузеры позволяют нам выполнять определенные операции асинхронно. Такие возможности, как Promises позволяют запустить некоторую операцию (например, получение картинки с сервера), и затем подождать пока операция не вернет результат, перед тем как начать выполнение другой задачи:

+

Чтобы избежать подобных проблем, браузеры позволяют нам выполнять определённые операции асинхронно. Такие возможности, как Promises позволяют запустить некоторую операцию (например, получение картинки с сервера), и затем подождать пока операция не вернёт результат, перед тем как начать выполнение другой задачи:

Main thread: Task A                   Task B
     Promise:      |__async operation__|
@@ -150,7 +150,7 @@ Worker thread: Task C -----------> | |

Заключение

-

При проектировании современных программ все больше используется асинхронное программирование, чтобы программа имела возможность выполнять несколько операций в конкретный момент времени. Как только вы начнете использовать новые, более мощные возможности API, вы обнаружите множество ситуаций, где решить нужную задачу можно только асинхронно. Раньше было сложно писать асинхронный код. До сих пор, нужно время, чтобы привыкнуть к такому подходу, но процесс стал намного легче. Далее, в этом разделе, мы будем глубже исследовать вопрос, когда же асинхронный код необходим и как спроектировать программу, чтобы избежать проблем, описанных выше.

+

При проектировании современных программ все больше используется асинхронное программирование, чтобы программа имела возможность выполнять несколько операций в конкретный момент времени. Как только вы начнёте использовать новые, более мощные возможности API, вы обнаружите множество ситуаций, где решить нужную задачу можно только асинхронно. Раньше было сложно писать асинхронный код. До сих пор, нужно время, чтобы привыкнуть к такому подходу, но процесс стал намного легче. Далее, в этом разделе, мы будем глубже исследовать вопрос, когда же асинхронный код необходим и как спроектировать программу, чтобы избежать проблем, описанных выше.

В этом модуле

diff --git a/files/ru/learn/javascript/asynchronous/introducing/index.html b/files/ru/learn/javascript/asynchronous/introducing/index.html index 75cae85c11..731c40dfa7 100644 --- a/files/ru/learn/javascript/asynchronous/introducing/index.html +++ b/files/ru/learn/javascript/asynchronous/introducing/index.html @@ -84,13 +84,13 @@ btn.addEventListener('click', () => { let blob = response.blob(); // display your image blob in the UI somehow -

Это происходит потому что вы не знаете сколько времени займет загрузка картинки, следовательно, когда вы начнёте выполнять вторую строку кода, сгенерируется ошибка (возможно, периодически, возможно, каждый раз), потому что response еще не доступен. Вместо этого, ваш код должен дождаться возвращения response до того, как попытается выполнить дальнейшие инструкции.

+

Это происходит потому что вы не знаете сколько времени займёт загрузка картинки, следовательно, когда вы начнёте выполнять вторую строку кода, сгенерируется ошибка (возможно, периодически, возможно, каждый раз), потому что response ещё не доступен. Вместо этого, ваш код должен дождаться возвращения response до того, как попытается выполнить дальнейшие инструкции.

-

Есть два типа стиля асинхронного кода, с которыми вы столкнетесь в коде JavaScript, старый метод — callbacks (колбэки) и более новый —  promise (промисы, обещания). В следующих разделах мы познакомимся с каждым из них. 

+

Есть два типа стиля асинхронного кода, с которыми вы столкнётесь в коде JavaScript, старый метод — callbacks (колбэки) и более новый —  promise (промисы, обещания). В следующих разделах мы познакомимся с каждым из них. 

Асинхронные колбэки

-

Асинхронные колбэки — это функции, которые определяются как аргументы при вызове функции, которая начнет выполнение кода на заднем фоне. Когда код на заднем фоне завершает свою работу, он вызывает колбэк-функцию, оповещающую, что работа сделана, либо оповещающую о трудностях в завершении работы. Обратные вызовы — немного устаревшая практика, но они все еще употребляются в некоторых старомодных, но часто используемых API.

+

Асинхронные колбэки — это функции, которые определяются как аргументы при вызове функции, которая начнёт выполнение кода на заднем фоне. Когда код на заднем фоне завершает свою работу, он вызывает колбэк-функцию, оповещающую, что работа сделана, либо оповещающую о трудностях в завершении работы. Обратные вызовы — немного устаревшая практика, но они все ещё употребляются в некоторых старомодных, но часто используемых API.

Пример асинхронного колбэка вторым параметром {{domxref("EventTarget.addEventListener", "addEventListener()")}} (как мы видели выше):

@@ -104,9 +104,9 @@ let blob = response.blob();

Первый параметр — тип обрабатываемого события, второй параметр — колбэк-функция, вызываемая при срабатывании события.

-

При передаче колбэк-функции как аргумента в другую функцию, мы передаем только ссылку на функцию как аргумент, следовательно колбэк-функция не выполняется мгновенно. Она вызывается асинхронно внутри тела, содержащего функцию. Эта функция должна выполнять колбэк-функцию в нужный момент.

+

При передаче колбэк-функции как аргумента в другую функцию, мы передаём только ссылку на функцию как аргумент, следовательно колбэк-функция не выполняется мгновенно. Она вызывается асинхронно внутри тела, содержащего функцию. Эта функция должна выполнять колбэк-функцию в нужный момент.

-

Вы можете написать свою собственную функцию, содержащую колбэк-функцию. Давайте взглянем на еще один пример, в котором происходит загрузка ресурсов через XMLHttpRequest API (запустите пример, и посмотрите исходный код):

+

Вы можете написать свою собственную функцию, содержащую колбэк-функцию. Давайте взглянем на ещё один пример, в котором происходит загрузка ресурсов через XMLHttpRequest API (запустите пример, и посмотрите исходный код):

function loadAsset(url, type, callback) {
   let xhr = new XMLHttpRequest();
@@ -130,7 +130,7 @@ function displayImage(blob) {
 
 loadAsset('coffee.jpg', 'blob', displayImage);
-

Мы создали  функцию displayImage(), которая представляет blob, переданный в нее, как объект URL, и создает картинку, в которой отображается URL, добавляя ее в элемент документа <body>. Однако, далее мы создаем функцию loadAsset(), которая принимает колбэк-функцию в качестве параметра, вместе с URL для получения данных и типом контента. Для получения данных из URL используется XMLHttpRequest (часто сокращается до аббревиатуры "XHR") , перед тем как передать ответ в колбэк-функцию для дальнейшей обработки. В этом случае колбэк-функция ждет, пока XHR закончит загрузку данных (используя обработчик события onload) перед отправкой данных в колбэк-функцию.

+

Мы создали  функцию displayImage(), которая представляет blob, переданный в неё, как объект URL, и создаёт картинку, в которой отображается URL, добавляя её в элемент документа <body>. Однако, далее мы создаём функцию loadAsset(), которая принимает колбэк-функцию в качестве параметра, вместе с URL для получения данных и типом контента. Для получения данных из URL используется XMLHttpRequest (часто сокращается до аббревиатуры "XHR") , перед тем как передать ответ в колбэк-функцию для дальнейшей обработки. В этом случае колбэк-функция ждёт, пока XHR закончит загрузку данных (используя обработчик события onload) перед отправкой данных в колбэк-функцию.

Колбэк-функции универсальны — они не только позволяют вам контролировать порядок, в котором запускаются функции и данные, передающиеся между ними, они также позволяют передавать данные различным функциям, в зависимости от обстоятельств. Вы можете выполнять различные действия с загруженным ответом, такие как  processJSON(), displayText(), и другие.

@@ -163,7 +163,7 @@ gods.forEach(function (eachName, index){

В примере видно, как fetch() принимает один параметр — URL ресурса, который нужно  получить из сети, — и возвращает промис. Промис или обещание — это объект, представляющий асинхронную операцию, выполненную удачно или неудачно. Он представляет собой как бы промежуточное состояние. По сути, это способ браузера сказать: "я обещаю вернуться к вам с ответом как можно скорее," отсюда и название "обещание."

-

Может понадобиться много времени, чтобы привыкнуть к данной концепции; это немного напоминает {{interwiki("wikipedia", "Кот Шрёдингера")}} в действии. Ни один из возможных результатов еще не произошел, поэтому операция fetch в настоящее время ожидает результата. Далее у нас есть три блока кода следующих сразу после fetch():

+

Может понадобиться много времени, чтобы привыкнуть к данной концепции; это немного напоминает {{interwiki("wikipedia", "Кот Шрёдингера")}} в действии. Ни один из возможных результатов ещё не произошёл, поэтому операция fetch в настоящее время ожидает результата. Далее у нас есть три блока кода следующих сразу после fetch():

@@ -178,9 +178,9 @@ clearInterval(myInterval);

Рекурсивные таймауты

-

Есть еще один способ использования setTimeout (): вы можете вызвать его рекурсивно для повторного запуска одного и того же кода вместо использования setInterval ().

+

Есть ещё один способ использования setTimeout (): вы можете вызвать его рекурсивно для повторного запуска одного и того же кода вместо использования setInterval ().

-

В приведенном ниже примере используется рекурсивный setTimeout () для запуска переданной функции каждые 100 миллисекунд:

+

В приведённом ниже примере используется рекурсивный setTimeout () для запуска переданной функции каждые 100 миллисекунд:

let i = 1;
 
@@ -190,7 +190,7 @@ setTimeout(function run() {
   setTimeout(run, 100);
 }, 100);
-

Сравните приведенный выше пример со следующим - здесь используется setInterval () для достижения того же эффекта:

+

Сравните приведённый выше пример со следующим - здесь используется setInterval () для достижения того же эффекта:

let i = 1;
 
@@ -201,10 +201,10 @@ setInterval(function run() {
 
 
Чем рекурсивный setTimeout () отличается от setInterval () ?

 
-
Разница между двумя версиями приведенного выше кода невелика.

+
Разница между двумя версиями приведённого выше кода невелика.

 
 
    
- 
  • Рекурсивный setTimeout () гарантирует такую же задержку между выполнениями. (Например, 100 мс в приведенном выше случае.) Код будет запущен, затем подождет 100 миллисекунд, прежде чем запустится снова, поэтому интервал будет одинаковым, независимо от того, сколько времени требуется для выполнения кода.
    • 
+ 
  • Рекурсивный setTimeout () гарантирует такую же задержку между выполнениями. (Например, 100 мс в приведённом выше случае.) Код будет запущен, затем подождёт 100 миллисекунд, прежде чем запустится снова, поэтому интервал будет одинаковым, независимо от того, сколько времени требуется для выполнения кода.
    • 
  
  • Пример с использованием setInterval () работает несколько иначе. Выбранный вами интервал включает время, затрачиваемое на выполнение кода, который вы хотите запустить. Предположим, что выполнение кода занимает 40 миллисекунд - тогда интервал составляет всего 60 миллисекунд.
    • 
  
  • При рекурсивном использовании setTimeout () каждая итерация может вычислять различную задержку перед запуском следующей итерации. Другими словами, значение второго параметра может указывать другое время в миллисекундах для ожидания перед повторным запуском кода.
    • 
 

@@ -215,7 +215,7 @@ setInterval(function run() {
 
 
Использование 0 в качестве значения для setTimeout () позволяет планировать выполнение указанной колбэк-функции как можно скорее, но только после того, как будет запущен основной поток кода.

 
-
Например, код приведенный ниже (рабочий код) выводит alert содержащий "Hello", затем alert содержащий "World" как только вы нажмете ОК в первом alert.

+
Например, код приведённый ниже (рабочий код) выводит alert содержащий "Hello", затем alert содержащий "World" как только вы нажмёте ОК в первом alert.

 
 
setTimeout(function() {
   alert('World');
@@ -250,7 +250,7 @@ alert('Hello');

 
 draw();
-

Идея состоит в том, чтобы определить функцию, в которой ваша анимация обновляется (например, ваши спрайты перемещаются, счет обновляется, данные обновляются или что-то еще). Затем вы вызываете его, чтобы начать процесс. В конце функционального блока вы вызываете requestAnimationFrame () со ссылкой на функцию, переданной в качестве параметра, и это дает браузеру указание вызвать функцию снова при следующей перерисовке дисплея. Затем он выполняется непрерывно, поскольку код рекурсивно вызывает requestAnimationFrame ().

+

Идея состоит в том, чтобы определить функцию, в которой ваша анимация обновляется (например, ваши спрайты перемещаются, счёт обновляется, данные обновляются или что-то ещё). Затем вы вызываете его, чтобы начать процесс. В конце функционального блока вы вызываете requestAnimationFrame () со ссылкой на функцию, переданной в качестве параметра, и это даёт браузеру указание вызвать функцию снова при следующей перерисовке дисплея. Затем он выполняется непрерывно, поскольку код рекурсивно вызывает requestAnimationFrame ().

Note: Если вы хотите выполнить простое постоянное анимирование DOM , CSS Анимация вероятно будет быстрее. Она вычисляется непосредственно внутренним кодом браузера, а не JavaScript.

@@ -264,13 +264,13 @@ draw();

Поскольку большинство экранов имеют частоту обновления 60 Гц, максимальная частота кадров, к которой вы можете стремиться, составляет 60 кадров в секунду (FPS) при работе с веб-браузерами. Однако большее количество кадров означает больше обработки, которая часто может вызывать заикание и пропуски, также известные как пропадание кадров или заедание.

-

Если у вас есть монитор с частотой обновления 60 Гц и вы хотите достичь 60 кадров в секунду, у вас есть около 16,7 миллисекунд (1000/60) для выполнения кода анимации для рендеринга каждого кадра. Это напоминание о том, что вам нужно помнить об объеме кода, который вы пытаетесь запустить во время каждого прохождения цикла анимации.

+

Если у вас есть монитор с частотой обновления 60 Гц и вы хотите достичь 60 кадров в секунду, у вас есть около 16,7 миллисекунд (1000/60) для выполнения кода анимации для рендеринга каждого кадра. Это напоминание о том, что вам нужно помнить об объёме кода, который вы пытаетесь запустить во время каждого прохождения цикла анимации.

-

requestAnimationFrame () всегда пытается приблизиться к этому волшебному значению 60 FPS, насколько это возможно. Иногда это невозможно - если у вас действительно сложная анимация и вы запускаете ее на медленном компьютере, частота кадров будет меньше. Во всех случаях requestAnimationFrame () всегда будет делать все возможное с тем, что у него есть.

+

requestAnimationFrame () всегда пытается приблизиться к этому волшебному значению 60 FPS, насколько это возможно. Иногда это невозможно - если у вас действительно сложная анимация и вы запускаете её на медленном компьютере, частота кадров будет меньше. Во всех случаях requestAnimationFrame () всегда будет делать все возможное с тем, что у него есть.

Чем отличается requestAnimationFrame() от setInterval() and setTimeout()?

-

Давайте поговорим еще немного о том, чем метод requestAnimationFrame () отличается от других методов, используемых ранее. Глядя на наш код сверху:

+

Давайте поговорим ещё немного о том, чем метод requestAnimationFrame () отличается от других методов, используемых ранее. Глядя на наш код сверху:

function draw() {
    // Drawing code goes here
@@ -295,7 +295,7 @@ setInterval(draw, 17);

Фактическому колбэку, переданному в функцию requestAnimationFrame (), также может быть задан параметр: значение отметки времени, которое представляет время с момента начала работы requestAnimationFrame ().

-

Это полезно, поскольку позволяет запускать вещи в определенное время и в постоянном темпе, независимо от того, насколько быстрым или медленным может быть ваше устройство. Общий шаблон, который вы бы использовали, выглядит примерно так:

+

Это полезно, поскольку позволяет запускать вещи в определённое время и в постоянном темпе, независимо от того, насколько быстрым или медленным может быть ваше устройство. Общий шаблон, который вы бы использовали, выглядит примерно так:

let startTime = null;
 
@@ -321,7 +321,7 @@ draw();

Простой пример

-

Хватит теории! Давайте выполним упражнение с использованием requestAnimationFrame() . Создадим простую анимацию "spinner animation"—вы могли ее видеть в приложениях когда происходят задержки при ответе с сервера и т.п..

+

Хватит теории! Давайте выполним упражнение с использованием requestAnimationFrame() . Создадим простую анимацию "spinner animation"—вы могли её видеть в приложениях когда происходят задержки при ответе с сервера и т.п..

Note: Для такой простой анимации, вам следовало бы использовать CSS . Однако такой вид анимации очень полезен для демонстрации requestAnimationFrame() , вы скорее всего будете использовать этот метод когда делаете что-то более сложное, например обновление отображения игры в каждом кадре.

@@ -376,7 +376,7 @@ let rAF; }
  • -

    Внутри draw () добавьте следующие строки. Они определят время начала, если оно еще не определено (это произойдет только на первой итерации цикла), и установят для параметра rotateCount значение для поворота счетчика (текущая временная метка, возьмите начальную временную метку, разделенную на три, чтобы замедлиться):

    +

    Внутри draw () добавьте следующие строки. Они определят время начала, если оно ещё не определено (это произойдёт только на первой итерации цикла), и установят для параметра rotateCount значение для поворота счётчика (текущая временная метка, возьмите начальную временную метку, разделённую на три, чтобы замедлиться):

      if (!startTime) {
    startTime = timestamp;
@@ -396,7 +396,7 @@ let rAF;
   
    spinner.style.transform = `rotate(${rotateCount}deg)`;
  • -

    В самом низу внутри функции draw () вставьте следующую строку. Это ключ ко всей операции - вы устанавливаете для переменной, определенной ранее, активный вызов requestAnimation (), который принимает функцию draw () в качестве своего параметра. Это запускает анимацию, постоянно выполняя функцию draw () со скоростью, близкой к 60 FPS.

    +

    В самом низу внутри функции draw () вставьте следующую строку. Это ключ ко всей операции - вы устанавливаете для переменной, определённой ранее, активный вызов requestAnimation (), который принимает функцию draw () в качестве своего параметра. Это запускает анимацию, постоянно выполняя функцию draw () со скоростью, близкой к 60 FPS.

    rAF = requestAnimationFrame(draw);
    • @@ -421,13 +421,13 @@ let rAF;

    Активное обучение: запуск и остановка нашей анимации

    -

    В этом упражнении мы хотели бы, чтобы вы протестировали метод cancelAnimationFrame (), взяв наш предыдущий пример и обновив его, добавив обработчик событий для запуска и остановки счетчика при щелчке мышью в любом месте страницы.

    +

    В этом упражнении мы хотели бы, чтобы вы протестировали метод cancelAnimationFrame (), взяв наш предыдущий пример и обновив его, добавив обработчик событий для запуска и остановки счётчика при щелчке мышью в любом месте страницы.

    Подсказки:

    • Обработчик события щелчка можно добавить к большинству элементов, включая документ <body>. Имеет смысл поместить его в элемент <body>, если вы хотите максимизировать интерактивную область - событие всплывает до его дочерних элементов.
      • -
    • Вы захотите добавить переменную отслеживания, чтобы проверить, вращается ли счетчик или нет, очистив кадр анимации, если он есть, и снова вызвать его, если это не так.
      • +
    • Вы захотите добавить переменную отслеживания, чтобы проверить, вращается ли счётчик или нет, очистив кадр анимации, если он есть, и снова вызвать его, если это не так.
    @@ -436,9 +436,9 @@ let rAF;

    Регулировка анимации requestAnimationFrame() 

    -

    Одним из ограничений requestAnimationFrame () является то, что вы не можете выбирать частоту кадров. В большинстве случаев это не проблема, так как обычно вы хотите, чтобы ваша анимация работала как можно плавное. Но как насчет того, чтобы создать олдскульную 8-битную анимацию?

    +

    Одним из ограничений requestAnimationFrame () является то, что вы не можете выбирать частоту кадров. В большинстве случаев это не проблема, так как обычно вы хотите, чтобы ваша анимация работала как можно плавное. Но как насчёт того, чтобы создать олдскульную 8-битную анимацию?

    -

    Это было проблемой, например в анимации ходьбы, вдохновленной островом обезьян, из статьи Drawing Graphics:

    +

    Это было проблемой, например в анимации ходьбы, вдохновлённой островом обезьян, из статьи Drawing Graphics:

    {{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}

    @@ -466,13 +466,13 @@ let rAF;

    Это код, который вычисляет, как обновлять позицию в каждом кадре анимации.

    -

    Метод, который вы используете для регулирования анимации, будет зависеть от вашего конкретного кода. Например, в предыдущем примере счетчика вы могли заставить его двигаться медленнее, увеличивая rotateCount только на единицу в каждом кадре вместо двух.

    +

    Метод, который вы используете для регулирования анимации, будет зависеть от вашего конкретного кода. Например, в предыдущем примере счётчика вы могли заставить его двигаться медленнее, увеличивая rotateCount только на единицу в каждом кадре вместо двух.

    Активное обучение: игра на реакцию

    В последнем разделе этой статьи вы создадите игру на реакцию для двух игроков. В игре будет два игрока, один из которых управляет игрой с помощью клавиши A, а другой - с помощью клавиши L.

    -

    При нажатии кнопки «Start» счетчик, подобный тому, что мы видели ранее, отображается в течение случайного промежутка времени от 5 до 10 секунд. По истечении этого времени появится сообщение «PLAYERS GO !!» - как только это произойдет, первый игрок, который нажмет свою кнопку управления, выиграет игру.

    +

    При нажатии кнопки «Start» счётчик, подобный тому, что мы видели ранее, отображается в течение случайного промежутка времени от 5 до 10 секунд. По истечении этого времени появится сообщение «PLAYERS GO !!» - как только это произойдёт, первый игрок, который нажмёт свою кнопку управления, выиграет игру.

    {{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}

    @@ -480,7 +480,7 @@ let rAF;
    1. -

      Прежде всего, скачайте стартовый файл. Он содержит законченную структуру HTML и стили CSS, что дает нам игровую доску, которая показывает информацию двух игроков (как показано выше), но с счетчиком и параграфом результатов, отображаемыми друг над другом. Вам нужно просто написать JavaScript код.

      +

      Прежде всего, скачайте стартовый файл. Он содержит законченную структуру HTML и стили CSS, что даёт нам игровую доску, которая показывает информацию двух игроков (как показано выше), но с счётчиком и параграфом результатов, отображаемыми друг над другом. Вам нужно просто написать JavaScript код.

    2. Внутри пустого элемента {{htmlelement("script")}} на вашей странице, начните с добавления следующих строк кода, которые определяют некоторые переменные и константы, которые вам понадобятся в дальнейшем:

      @@ -498,8 +498,8 @@ const result = document.querySelector('.result');
      1. Ссылка на спиннер, чтобы вы могли его анимировать.
      2. Ссылка на элемент {{htmlelement("div")}} содержащий спиннер, используемый для отображения и скрытия.
        3. -
      3. Счетчик поворотов. Он определяет, на сколько вы хотите показывать вращение спиннера на каждом кадре анимации.
        4. -
      4. Нулевое время начала. Это будет заполнено временем начала, когда счетчик начнет вращаться.
        5. +
      5. Счётчик поворотов. Он определяет, на сколько вы хотите показывать вращение спиннера на каждом кадре анимации.
        6. +
      6. Нулевое время начала. Это будет заполнено временем начала, когда счётчик начнёт вращаться.
      7. Неинициализированная переменная для последующего хранения вызова {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} который анимирует спиннер.
      8. Ссылка на кнопку Start .
      9. Ссылка на параграф результатов.
        10. @@ -514,7 +514,7 @@ const result = document.querySelector('.result'); }
      10. -

        Затем добавьте функцию draw(), которая анимирует спиннер. Это очень похоже на версию из предыдущего примера простого счетчика:

        +

        Затем добавьте функцию draw(), которая анимирует спиннер. Это очень похоже на версию из предыдущего примера простого счётчика:

        function draw(timestamp) {
   if(!startTime) {
@@ -532,13 +532,13 @@ const result = document.querySelector('.result');
        }
      11. -

        Теперь пришло время настроить начальное состояние приложения при первой загрузке страницы. Добавьте следующие две строки, которые просто скрывают абзац результатов и контейнер счетчика с помощью display: none ;.

        +

        Теперь пришло время настроить начальное состояние приложения при первой загрузке страницы. Добавьте следующие две строки, которые просто скрывают абзац результатов и контейнер счётчика с помощью display: none ;.

        result.style.display = 'none';
 spinnerContainer.style.display = 'none';
      12. -

        Затем определите функцию reset (), которая возвращает приложение в исходное состояние, необходимое для повторного запуска игры после ее завершения. Добавьте в конец кода следующее:

        +

        Затем определите функцию reset (), которая возвращает приложение в исходное состояние, необходимое для повторного запуска игры после её завершения. Добавьте в конец кода следующее:

        function reset() {
   btn.style.display = 'block';
@@ -547,7 +547,7 @@ spinnerContainer.style.display = 'none';
        }
      13. -

        Хорошо, хватит подготовки! Пришло время сделать игру доступной! Добавьте в свой код следующий блок. Функция start () вызывает draw (), чтобы запустить вращение спиннера и отобразить его в пользовательском интерфейсе, скрыть кнопку Start, чтобы вы не могли испортить игру, запустив ее несколько раз одновременно, и запускает вызов setTimeout (), который выполняется функция setEndgame () по прошествии случайного интервала от 5 до 10 секунд. Следующий блок также добавляет обработчик событий к вашей кнопке для запуска функции start () при ее нажатии.

        +

        Хорошо, хватит подготовки! Пришло время сделать игру доступной! Добавьте в свой код следующий блок. Функция start () вызывает draw (), чтобы запустить вращение спиннера и отобразить его в пользовательском интерфейсе, скрыть кнопку Start, чтобы вы не могли испортить игру, запустив её несколько раз одновременно, и запускает вызов setTimeout (), который выполняется функция setEndgame () по прошествии случайного интервала от 5 до 10 секунд. Следующий блок также добавляет обработчик событий к вашей кнопке для запуска функции start () при её нажатии.

        btn.addEventListener('click', start);
 
@@ -561,7 +561,7 @@ function start() {
   
        
   
        Note: Вы увидите, что этот пример вызывает setTimeout() без сохранения возвращаемого значения. (не  let myTimeout = setTimeout(functionName, interval).) 
        
 
-  
        Это прекрасно работает, если вам не нужно очищать интервал / тайм-аут в любой момент. Если вы это сделаете, вам нужно будет сохранить возвращенный идентификатор!
        
+  
        Это прекрасно работает, если вам не нужно очищать интервал / тайм-аут в любой момент. Если вы это сделаете, вам нужно будет сохранить возвращённый идентификатор!
        
   
        
 
   
        Конечным результатом предыдущего кода является то, что при нажатии кнопки «Start» отображается спиннер, и игроки вынуждены ждать произвольное количество времени, прежде чем их попросят нажать их кнопку. Эта последняя часть обрабатывается функцией setEndgame (), которую вы определите позже.
        
@@ -602,7 +602,7 @@ function start() {
    
      14. Во-первых, отмените анимацию спиннера с помощью {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (всегда полезно очистить ненужные процессы), и скройте контейнер счетчика.
        15. 
    
      15. Затем, отобразите абзац с результатами и установите для его текстового содержимого значение "PLAYERS GO!!"  чтобы сообщить игрокам, что теперь они могут нажать свою кнопку, чтобы победить.
        16. 
    
      16. Прикрепите к документу обработчик событий keydown . При нажатии любой кнопки запускается функция keyHandler().
        17. 
-   
      17. Внутри keyHandler(), код включает объект события в качестве параметра (представленного e) — его свойство {{domxref("KeyboardEvent.key", "key")}} содержит только что нажатую клавишу, и вы можете использовать это для ответа на определенные нажатия клавиш определенными действиями.
        18. 
+   
      18. Внутри keyHandler(), код включает объект события в качестве параметра (представленного e) — его свойство {{domxref("KeyboardEvent.key", "key")}} содержит только что нажатую клавишу, и вы можете использовать это для ответа на определённые нажатия клавиш определёнными действиями.
        19. 
    
      19. Установите для переменной isOver значение false, чтобы мы могли отслеживать, были ли нажаты правильные клавиши, чтобы игрок 1 или 2 выиграл. Мы не хотим, чтобы игра заканчивалась при нажатии неправильной клавиши.
        20. 
    
      20. Регистрация e.key в консоли, это полезный способ узнать значение различных клавиш, которые вы нажимаете.
        21. 
    
      21. Когда e.key принимает значение "a", отобразить сообщение о том, что Player 1 выиграл, а когда e.key это "l", отобразить сообщение о том, что Player 2 выиграл. (Note: Это будет работать только со строчными буквами a и l — если переданы прописные A или L , это считается другими клавишами!) Если была нажата одна из этих клавиш, установите для isOver значение true.
        22. 
@@ -619,7 +619,7 @@ function start() {
 
 
        Заключение
        
 
-
        Вот и все — все основы асинхронных циклов и интервалов рассмотрены в статье. Вы найдете эти методы полезными во многих ситуациях, но постарайтесь не злоупотреблять ими! Поскольку они по-прежнему выполняются в основном потоке, тяжелые и интенсивные колбэки (особенно те, которые управляют DOM) могут действительно замедлить страницу, если вы не будете осторожны.
        
+
        Вот и все — все основы асинхронных циклов и интервалов рассмотрены в статье. Вы найдёте эти методы полезными во многих ситуациях, но постарайтесь не злоупотреблять ими! Поскольку они по-прежнему выполняются в основном потоке, тяжёлые и интенсивные колбэки (особенно те, которые управляют DOM) могут действительно замедлить страницу, если вы не будете осторожны.
        
 
 
        {{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}
        
 
@@ -628,7 +628,7 @@ function start() {
    - +
    Задача:Научить создавать пользовательской функции и объяснить еще несколько полезных деталей.Научить создавать пользовательской функции и объяснить ещё несколько полезных деталей.
    @@ -31,7 +31,7 @@ translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function

    Функция alert принимает один аргумент - строку, которая отображается в окне сообщения на веб-странице Попробуйте изменить строку, чтобы изменить сообщение.

    -

    Функция alert ограничена: вы можете изменить текст сообщения, но не получится изменить его стиль, например, цвет, значок или что-то еще. Создадим сообщение, более интересное по стилю.

    +

    Функция alert ограничена: вы можете изменить текст сообщения, но не получится изменить его стиль, например, цвет, значок или что-то ещё. Создадим сообщение, более интересное по стилю.

    Примечание: Этот пример будет работать во всех современных браузерах, но стиль может выглядеть немного смешным в более старых браузерах. Мы рекомендуем вам выполнять это упражнение в современном браузере, таком как Firefox, Opera или Chrome.

    @@ -39,10 +39,10 @@ translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function

    Основная функция

    -

    Для начала давайте соберем основную функцию.

    +

    Для начала давайте соберём основную функцию.

    -

    Примечание: Для согласований имен функций нужно следовать тем же правилам, что и правила именования переменных. Отличить имена функций от имен переменных просто: после имен функций указываются круглые скобки, а после имен переменных их нет.

    +

    Примечание: Для согласований имён функций нужно следовать тем же правилам, что и правила именования переменных. Отличить имена функций от имён переменных просто: после имён функций указываются круглые скобки, а после имён переменных их нет.

      @@ -81,9 +81,9 @@ closeBtn.onclick = function() {

      В следующем разделе используется другая функция DOM API, называемая {{domxref ("Document.createElement()")}}, применяется для создания элемента {{htmlelement ("div")}} и сохраняет ссылку на него в переменной, называемой panel. Этот элемент будет внешним контейнером нашего окна сообщений.

      -

      Затем мы используем еще одну функцию DOM API, называемую {{domxref ("Element.setAttribute()")}}, чтобы установить атрибут class на нашей панели со значением msgBox. Это упрощает стилизацию элемента. Если вы посмотрите на CSS на странице, вы увидите, что мы используем селектор класса .msgBox для стилизации окна сообщения и его содержимого.

      +

      Затем мы используем ещё одну функцию DOM API, называемую {{domxref ("Element.setAttribute()")}}, чтобы установить атрибут class на нашей панели со значением msgBox. Это упрощает стилизацию элемента. Если вы посмотрите на CSS на странице, вы увидите, что мы используем селектор класса .msgBox для стилизации окна сообщения и его содержимого.

      -

      Наконец, мы вызываем функцию DOM с именем {{domxref ("Node.appendChild()")}} в переменной html, которую мы сохранили ранее, которая вкладывает один элемент в другой как его дочерний элемент. Указываем панель <div> как дочерний элемент, который мы хотим вложить внутрь элемента <html>. То есть, когда мы создаем какой-то элемент, он не просто будет отображаться на странице сам по себе, нам нужно указать, куда его поместить.

      +

      Наконец, мы вызываем функцию DOM с именем {{domxref ("Node.appendChild()")}} в переменной html, которую мы сохранили ранее, которая вкладывает один элемент в другой как его дочерний элемент. Указываем панель <div> как дочерний элемент, который мы хотим вложить внутрь элемента <html>. То есть, когда мы создаём какой-то элемент, он не просто будет отображаться на странице сам по себе, нам нужно указать, куда его поместить.

      var panel = document.createElement('div');
 panel.setAttribute('class', 'msgBox');
@@ -101,7 +101,7 @@ panel.appendChild(closeBtn);

      В заключении мы используем обработчик событий {{domxref ("GlobalEventHandlers.onclick")}}, чтобы при нажатии кнопки был запущен некоторый код для удаления всей панели со страницы, т.е. для закрытия окна сообщения.

      -

      Вкратце, обработчик onclick — это свойство, доступное для кнопки (или, фактически, для любого элемента страницы), которое можно установить в функцию, чтобы указать, какой код следует запускать при нажатии кнопки. Вы узнаете об этом больше в нашей статье о последующих событиях. Мы делаем обработчик onclick равным анонимной функции, которая содержит код, запускаемый при нажатии кнопки. Строка внутри функции использует функцию {{domxref ("Node.removeChild()")}} DOM API, чтобы указать, что мы хотим удалить определенный дочерний элемент внутри HTML — в данном случае панель <div>.

      +

      Вкратце, обработчик onclick — это свойство, доступное для кнопки (или, фактически, для любого элемента страницы), которое можно установить в функцию, чтобы указать, какой код следует запускать при нажатии кнопки. Вы узнаете об этом больше в нашей статье о последующих событиях. Мы делаем обработчик onclick равным анонимной функции, которая содержит код, запускаемый при нажатии кнопки. Строка внутри функции использует функцию {{domxref ("Node.removeChild()")}} DOM API, чтобы указать, что мы хотим удалить определённый дочерний элемент внутри HTML — в данном случае панель <div>.

      closeBtn.onclick = function() {
   panel.parentNode.removeChild(panel);
@@ -121,9 +121,9 @@ panel.appendChild(closeBtn);

      Теперь у вас есть определение функции, написанное в вашем элементе <script>, но оно ничего не будет делать в том виде, в каком оно есть.

        -
      1. Попробуйте написать следующую строку под своей функцией, чтобы вызвать ее: +
      2. Попробуйте написать следующую строку под своей функцией, чтобы вызвать её: 
        displayMessage();
        - Эта строка вызывает функцию, немедленно запуская ее. Когда вы сохраните код и перезагрузите его в браузере, вы увидите, что небольшое окно сообщения появляется сразу и только один раз.
        3. + Эта строка вызывает функцию, немедленно запуская её. Когда вы сохраните код и перезагрузите его в браузере, вы увидите, что небольшое окно сообщения появляется сразу и только один раз.

      3. Теперь откройте инструменты разработчика браузера на странице примера, перейдите в консоль JavaScript и снова введите эту строку. Вы увидите, что окно появится снова! Теперь у нас есть функция многократного использования, которую мы можем вызвать в любое время.

        @@ -132,7 +132,7 @@ panel.appendChild(closeBtn);

        В этой демонстрации мы получим окно сообщения, когда пользователь нажимает кнопку.

      4. Удалите предыдущую добавленную строку.
        5. -
      5. Затем мы выберем кнопку и сохраним ссылку на нее в переменной. Добавьте следующую строку в свой код, над определением функции: +
      6. Затем мы выберем кнопку и сохраним ссылку на неё в переменной. Добавьте следующую строку в свой код, над определением функции: 
        var btn = document.querySelector('button');
      7. Наконец, добавьте следующую строку ниже предыдущей: @@ -151,7 +151,7 @@ panel.appendChild(closeBtn);

        Улучшение функции с параметрами

        -

        В нынешнем виде функция по-прежнему не очень полезна — мы не хотим показывать одно и то же сообщение по умолчанию каждый раз. Давайте улучшим нашу функцию, добавив некоторые параметры, позволяющие нам называть ее различными вариантами.

        +

        В нынешнем виде функция по-прежнему не очень полезна — мы не хотим показывать одно и то же сообщение по умолчанию каждый раз. Давайте улучшим нашу функцию, добавив некоторые параметры, позволяющие нам называть её различными вариантами.

        1. @@ -170,7 +170,7 @@ panel.appendChild(closeBtn); 
          msg.textContent = msgText;
          2. -
        2. И последнее, но не менее важное: теперь вам нужно обновить вызов функции, чтобы включить в него обновленный текст сообщения. Измените следующую строку: +
        3. И последнее, но не менее важное: теперь вам нужно обновить вызов функции, чтобы включить в него обновлённый текст сообщения. Измените следующую строку: 
          btn.onclick = displayMessage;

          к этому блоку:

          @@ -178,8 +178,8 @@ panel.appendChild(closeBtn); 
          btn.onclick = function() {
   displayMessage('Woo, this is a different message!');
 };
          - Если мы хотим указать параметры в круглых скобках для вызываемой нами функции, то мы не можем назвать ее напрямую, нам нужно поместить ее в анонимную функцию, чтобы она не находилась непосредственно в области видимости и, следовательно, не вызывалась немедленно. Теперь она не будет вызываться до нажатия кнопки.
          4. -
        4. Перезагрузите и протестируйте код еще раз, и вы увидите, что он по-прежнему работает, только теперь вы также можете изменять сообщение внутри параметра, чтобы отображать разные сообщения в окне.
          5. + Если мы хотим указать параметры в круглых скобках для вызываемой нами функции, то мы не можем назвать её напрямую, нам нужно поместить её в анонимную функцию, чтобы она не находилась непосредственно в области видимости и, следовательно, не вызывалась немедленно. Теперь она не будет вызываться до нажатия кнопки. +
        5. Перезагрузите и протестируйте код ещё раз, и вы увидите, что он по-прежнему работает, только теперь вы также можете изменять сообщение внутри параметра, чтобы отображать разные сообщения в окне.

        Более сложный параметр

        @@ -187,7 +187,7 @@ panel.appendChild(closeBtn);

        Переход к следующему параметру. Это потребует немного больше работы. Установим его так, чтобы в зависимости от того, какой параметр msgType установлен, функция отображала другой значок и другой цвет фона.

          -
        1. Для начала, загрузите значки, необходимые для этого упражнения (warning и chat [тут черные иконки на черном фоне... тролли на GitHub]) из GitHub. Сохраните их в новой папке icons в том же месте, что и ваш HTML-файл. +
        2. Для начала, загрузите значки, необходимые для этого упражнения (warning и chat [тут чёрные иконки на чёрном фоне... тролли на GitHub]) из GitHub. Сохраните их в новой папке icons в том же месте, что и ваш HTML-файл.
          Примечание: иконки warning и chat были найдены на iconfinder.com, и разработаны Nazarrudin Ansyari. Спасибо! (Фактические страницы значков были перемещены или удалены.) 
          3. @@ -213,8 +213,8 @@ background-repeat: no-repeat; } else { msg.style.paddingLeft = '20px'; } - Здесь, если параметр msgType установлен как 'warning', отображается значок предупреждения, а цвет фона панели устанавливается красным. Если для него установлено значение'chat', отображается значок чата, а цвет фона панели становится голубым. Если параметр msgType не задан вообще (или задано что-то другое), тогда вступает в действие else {...}, а абзацу просто присваиваются заданные по умолчанию отступы, нет никакого значка, при этом не задается цвет фона окна сообщения. Это обеспечивает состояние по умолчанию, если не указан параметр msgType, что означает, что это необязательный параметр! -
        3. Давайте протестируем нашу обновленную функцию, попробуем обновить вызов displayMessage () из этого: + Здесь, если параметр msgType установлен как 'warning', отображается значок предупреждения, а цвет фона панели устанавливается красным. Если для него установлено значение'chat', отображается значок чата, а цвет фона панели становится голубым. Если параметр msgType не задан вообще (или задано что-то другое), тогда вступает в действие else {...}, а абзацу просто присваиваются заданные по умолчанию отступы, нет никакого значка, при этом не задаётся цвет фона окна сообщения. Это обеспечивает состояние по умолчанию, если не указан параметр msgType, что означает, что это необязательный параметр!
          4. +
        4. Давайте протестируем нашу обновлённую функцию, попробуем обновить вызов displayMessage () из этого: 
          displayMessage('Woo, this is a different message!');

          к одному из них:

          @@ -230,7 +230,7 @@ displayMessage('Brian: Hi there, how are you today?','chat');

          Вывод

          -

          В этой статье мы познакомились со всем процессом создания практической пользовательской функции, которую с небольшими доработками можно перенести в реальный проект. В следующей статье мы рассмотрим еще одну важную концепцию — возвращаемые значения функций.

          +

          В этой статье мы познакомились со всем процессом создания практической пользовательской функции, которую с небольшими доработками можно перенести в реальный проект. В следующей статье мы рассмотрим ещё одну важную концепцию — возвращаемые значения функций.

          diff --git a/files/ru/learn/javascript/building_blocks/conditionals/index.html b/files/ru/learn/javascript/building_blocks/conditionals/index.html index a4f5a6e2bf..774d7f2745 100644 --- a/files/ru/learn/javascript/building_blocks/conditionals/index.html +++ b/files/ru/learn/javascript/building_blocks/conditionals/index.html @@ -15,7 +15,7 @@ translation_of: Learn/JavaScript/Building_blocks/conditionals
          {{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}
          -

          Во многих языках программирования код должен иметь возможность принимать решения на основе введенных пользователем данных. Например, в игре, если у пользователя осталось 0 жизней, то игра завершается. В приложении о погоде утром отображается восход солнца, а вечером звезды и луна. В этой статье мы рассмотрим как в  JavaScript работают так называемые "условия".

          +

          Во многих языках программирования код должен иметь возможность принимать решения на основе введённых пользователем данных. Например, в игре, если у пользователя осталось 0 жизней, то игра завершается. В приложении о погоде утром отображается восход солнца, а вечером звезды и луна. В этой статье мы рассмотрим как в  JavaScript работают так называемые "условия".

          @@ -34,13 +34,13 @@ translation_of: Learn/JavaScript/Building_blocks/conditionals

          Люди (и животные) принимают какие-либо решения всю жизнь, от малозначимых ("стоит ли мне съесть одну печеньку или две?") до жизнеопределяющих ("стоит ли мне остаться дома и работать на ферме отца или переехать в другую страну и изучать астрофизику?")

          -

          Операторы условия в JavaScript позволяют нам указать разного рода действия в зависимости от выбранного пользователем или системой ответа (например одна печенька или две) и связать его с действием (результатом), например, результатом "съесть одну печеньку" будет "все еще буду чувствовать себя голодным", а результатом "съесть две печеньки" будет "буду чувствовать себя сытым, но мама меня нарушает за то, что я съел все сладости". 

          +

          Операторы условия в JavaScript позволяют нам указать разного рода действия в зависимости от выбранного пользователем или системой ответа (например одна печенька или две) и связать его с действием (результатом), например, результатом "съесть одну печеньку" будет "все ещё буду чувствовать себя голодным", а результатом "съесть две печеньки" будет "буду чувствовать себя сытым, но мама меня нарушает за то, что я съел все сладости". 

          Оператор if ... else

          -

          Давайте глянем на наиболее распространенный тип условного оператора, который вы будете использовать в JavaScript — if ... else оператор.

          +

          Давайте глянем на наиболее распространённый тип условного оператора, который вы будете использовать в JavaScript — if ... else оператор.

          Базовый if ... else синтаксис

          @@ -59,7 +59,7 @@ translation_of: Learn/JavaScript/Building_blocks/conditionals
        5. Условие для проверки (condition), расположено внутри круглых скобок (например "это значение больше другого значения?", или "это значение существует?"). Это условие использует операторы сравнения (comparison operators), которые мы изучим позже, и возвратит нам true или false.
        6. Внутри скобок { } расположен код, который будет выполняться только в том случае, если условие (condition) верно (true).
        7. Ключевое слово else (иначе).
          8. -
        8. Еще скобки { }, код внутри которых выполнится, только если условие не верно (не true).
          9. +
        9. Ещё скобки { }, код внутри которых выполнится, только если условие не верно (не true).

          10. Этот код довольно читабелен — он говорит "if (если)  condition (условие) возвращает true (истина), запусти код A, else (иначе) запусти B"

          @@ -74,7 +74,7 @@ translation_of: Learn/JavaScript/Building_blocks/conditionals

          Тем не менее, следует быть осторожным — в случае, если код внутри вторых скобок { } не контролируется условием, то этот код будет выполняться всегда. Это не плохо, просто вы должны помнить об этом, чаще вы хотите запустить один кусок кода или другой, но не оба.

          -

          И, наконец, иногда вы можете встретить код if...else без фигурных скобок в сокращенной форме:

          +

          И, наконец, иногда вы можете встретить код if...else без фигурных скобок в сокращённой форме:

          if (condition) code to run if condition is true
 else run some other code instead
          @@ -83,7 +83,7 @@ else run some other code instead

          Реальный пример

          -

          Чтобы лучше понять синтаксис, давайте рассмотрим реальный пример. Представьте, что мать или отец попросили помочь с работой по дому своего ребенка.  Родитель может сказать: "Если ты поможешь мне с покупками, то я дам тебе дополнительные деньги на карманные расходы, которые ты сможешь потратить на игрушку, какую захочешь".  В JavaScript, мы можем представить это так: 

          +

          Чтобы лучше понять синтаксис, давайте рассмотрим реальный пример. Представьте, что мать или отец попросили помочь с работой по дому своего ребёнка.  Родитель может сказать: "Если ты поможешь мне с покупками, то я дам тебе дополнительные деньги на карманные расходы, которые ты сможешь потратить на игрушку, какую захочешь".  В JavaScript, мы можем представить это так: 

          var shoppingDone = false;
 
@@ -93,7 +93,7 @@ if (shoppingDone === true) {
   var childsAllowance = 5;
 }
          -

          В этом коде, как показано, всегда будет shoppingDone равный false, что означает разочарование для нашего бедного ребенка. Мы должны предоставить механизм для родителя, чтобы установить для переменной shoppingDone значение  true , если ребенок помог с покупками.

          +

          В этом коде, как показано, всегда будет shoppingDone равный false, что означает разочарование для нашего бедного ребёнка. Мы должны предоставить механизм для родителя, чтобы установить для переменной shoppingDone значение  true , если ребёнок помог с покупками.

          Примечание: Вы можете увидеть больше в полной версии этого примера на GitHub (также посмотреть как он работает вживую.)

          @@ -143,7 +143,7 @@ function setWeather() {
          1. Здесь у нас есть элемент HTML {{htmlelement("select")}} который позволяет нам выбирать разные варианты погоды и простой абзац.
            2. -
          2. В JavaScript мы создаем ссылки на элементы {{htmlelement("select")}} и {{htmlelement("p")}} и добавляем обработчик события элемента <select>, чтобы при его изменении значения запускалась функция setWeather().
            3. +
          3. В JavaScript мы создаём ссылки на элементы {{htmlelement("select")}} и {{htmlelement("p")}} и добавляем обработчик события элемента <select>, чтобы при его изменении значения запускалась функция setWeather().
          4. Когда функция будет запущена, первоначально мы определим значение переменной choice, которая равна выбранному значению в элементе  <select>. Затем мы используем условный оператор для отображения текста внутри абзаца в зависимости от того, какое значение у переменной  choice. Обратите внимание, как все условия проверяются в else if() {...} блоках, за исключением первого, который использует if() {...}блок.
          5. Последний выбор, внутри  else {...} блока, в основном является «последним средством» — код внутри него будет запущен, если ни одно из условий не будет true. В этом случае он служит для удаления текста из абзаца, если ничего не выбрано, например, если пользователь решает повторно выбрать опцию "--Сделайте выбор--" которая указана в начале.
          @@ -176,7 +176,7 @@ if (cheese) { console.log('Сегодня нет сыра для бутерброда.'); } -

          И, возвращаясь к нашему предыдущему примеру о ребенке, выполняющем поручение своего родителя, вы можете это записать так:

          +

          И, возвращаясь к нашему предыдущему примеру о ребёнке, выполняющем поручение своего родителя, вы можете это записать так:

          var shoppingDone = false;
 
@@ -188,7 +188,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true'
 
 
          Вложенность if ... else
          
 
-
          Вполне нормально использовать один условный оператор if...else внутри другого — вложить их. Например, мы могли бы обновить наше приложение прогноза погоды, чтобы показать еще один набор вариантов в зависимости от температуры:
          
+
          Вполне нормально использовать один условный оператор if...else внутри другого — вложить их. Например, мы могли бы обновить наше приложение прогноза погоды, чтобы показать ещё один набор вариантов в зависимости от температуры:
          
 
 
          if (choice === 'sunny') {
   if (temperature < 86) {
@@ -228,7 +228,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true'
   console.log('Вероятно, можно в нем оставаться.');
 }
          
 
-
          Последний тип логического оператора НЕ, выраженный ! оператором, можно использовать для отрицания выражения. Давайте объединим его с ИЛИ в приведенном выше примере:
          
+
          Последний тип логического оператора НЕ, выраженный ! оператором, можно использовать для отрицания выражения. Давайте объединим его с ИЛИ в приведённом выше примере:
          
 
 
          if (!(iceCreamVanOutside || houseStatus === 'on fire')) {
   console.log('Вероятно, можно в нем оставаться.');
@@ -236,7 +236,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true'
   console.log('Вы должны быстро покинуть дом.');
 }
          
 
-
          В этом фрагменте, если условие ИЛИ возвращает true, оператор НЕ будет отрицать это и выражение вернет false.
          
+
          В этом фрагменте, если условие ИЛИ возвращает true, оператор НЕ будет отрицать это и выражение вернёт false.
          
 
 
          Можно сочетать любое количество логических операторов, в любой последовательности и в любой комбинации. В следующем примере код в блоке будет выполняться только в том случае, если оба условия с ИЛИ возвращают true, а следовательно, и оператор И возвращает true:
          
 
@@ -244,13 +244,13 @@ if (shoppingDone) { // не нужно явно указывать '=== true'
   // код выполняется
 }
          -

          Распространенной ошибкой при использовании логического оператора ИЛИ в условном выражении является указание переменной, значение которой нужно проверить со списком возможных значений этой переменной, разделенных операторами || (ИЛИ). Например.

          +

          Распространённой ошибкой при использовании логического оператора ИЛИ в условном выражении является указание переменной, значение которой нужно проверить со списком возможных значений этой переменной, разделённых операторами || (ИЛИ). Например.

          if (x === 5 || 7 || 10 || 20) {
   // выполнить код
 }
          -

          В данном примере условие в if(...)  всегда будет оцениваться как true, поскольку 7 (или любое другое ненулевое значение) всегда будет оцениваться как true. Фактически, это условие гласит «если х равен 5, или 7 является true». Но нам требуется совсем не это. Чтобы достичь нужной цели, придется выполнять полноценную проверку после каждого оператора ИЛИ:

          +

          В данном примере условие в if(...)  всегда будет оцениваться как true, поскольку 7 (или любое другое ненулевое значение) всегда будет оцениваться как true. Фактически, это условие гласит «если х равен 5, или 7 является true». Но нам требуется совсем не это. Чтобы достичь нужной цели, придётся выполнять полноценную проверку после каждого оператора ИЛИ:

          if (x === 5 || x === 7 || x === 10 ||x === 20) {
   // выполнить код
@@ -258,7 +258,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true'
 
 
          Оператор switch
          
 
-
          Выражения if...else отлично справляются с добавлением условного кода, однако они не лишены недостатков. Они хорошо подходят для ситуации, когда имеется всего пара вариантов развития событий, каждый из которых имеет блок с приемлемым количеством кода, а также в случаях, когда условие является довольно сложным и включает несколько логических операторов. Если же нам требуется всего лишь задать переменную для определенного выбранного значения или напечатать конкретную фразу при определенном условии, изученный нами синтаксис может оказаться довольно громоздким, особенно если имеется большое количество вариантов выбора.
          
+
          Выражения if...else отлично справляются с добавлением условного кода, однако они не лишены недостатков. Они хорошо подходят для ситуации, когда имеется всего пара вариантов развития событий, каждый из которых имеет блок с приемлемым количеством кода, а также в случаях, когда условие является довольно сложным и включает несколько логических операторов. Если же нам требуется всего лишь задать переменную для определённого выбранного значения или напечатать конкретную фразу при определённом условии, изученный нами синтаксис может оказаться довольно громоздким, особенно если имеется большое количество вариантов выбора.
          
 
 
          В этом случае нам поможет оператор switch – он принимает одно единственное выражение или значение, а затем просматривает ряд вариантов, пока не найдут вариант, соответствующий этому значению, после чего выполняет код, назначенный этому варианту. Вот пример использования этого оператора:
          
 
@@ -284,13 +284,13 @@ if (shoppingDone) { // не нужно явно указывать '=== true'
  
        10. В скобках приводится выражение или значение.
          11. 
  
        11. Ключевое слово case, за которым следует вариант выбора (именно он проверяется на соответствие выражению или значению) и двоеточие.
          12. 
  
        12. Код, который будет выполняться, если вариант совпадает с выражением.
          13. 
- 
        13. Оператор break, за которым следует точка с запятой. Если вариант совпал с выражением или значением, браузер закончит выполнять блок кода, дойдя до оператора break, и перейдет к выполнению кода, расположенного после оператора switch.
          14. 
+ 
        14. Оператор break, за которым следует точка с запятой. Если вариант совпал с выражением или значением, браузер закончит выполнять блок кода, дойдя до оператора break, и перейдёт к выполнению кода, расположенного после оператора switch.
          15. 
  
        15. Вариантов выбора (пункты 3–5) может быть сколь угодно много.
          16. 
  
        16. Ключевое слово default используется точно также, как любой другой вариант выбора (пункты 3–5) за тем исключением, что после default нет других вариантов выбора, поэтому инструкция break не требуется, никакого кода дальше нет. Это вариант выбора по умолчанию, выбираемый, если ни один из других вариантов не совпал с выражением.
          17. 
 
 
 
          
-
          Примечание. Вариант выбора default может быть пропущен, если выражение гарантированно совпадет с одним из вариантов выбора. В противном случае вариант default необходим.
          
+
          Примечание. Вариант выбора default может быть пропущен, если выражение гарантированно совпадёт с одним из вариантов выбора. В противном случае вариант default необходим.
          
 
          
 
 
          Пример оператора switch
          
@@ -325,7 +325,7 @@ function setWeather() {
       para.textContent = 'На улице дождь. Возьмите плащ и зонт, и не гуляйте слишком долго';
       break;
     case 'snowing':
-      para.textContent = 'Идет снег - морозно! Лучше всего посидеть с чашкой горячего шоколада или слепить снеговика.';
+      para.textContent = 'Идёт снег - морозно! Лучше всего посидеть с чашкой горячего шоколада или слепить снеговика.';
       break;
     case 'overcast':
       para.textContent = 'Дождя нет, но небо серое и мрачное; он все может измениться в любую минуту, поэтому на всякий случай возьмите дождевик.';
@@ -343,15 +343,15 @@ function setWeather() {
 
 
          Тернарный оператор
          
 
-
          Это последний теоретический раздел данной статьи и мы перейдем к практическим упражнениям. Тернарный или условный оператор имеет простой синтаксис: он проверяет условие и возвращает одно значение или выражение, если условие является true, и другое значение/выражение, если условие является false. Часто это очень удобная альтернатива блоку if...else, позволяющая затрачивать меньшие усилия на написание кода, когда имеется всего лишь два варианта, выбираемых на основе условия true/false. Общая схема оператора:
          
+
          Это последний теоретический раздел данной статьи и мы перейдём к практическим упражнениям. Тернарный или условный оператор имеет простой синтаксис: он проверяет условие и возвращает одно значение или выражение, если условие является true, и другое значение/выражение, если условие является false. Часто это очень удобная альтернатива блоку if...else, позволяющая затрачивать меньшие усилия на написание кода, когда имеется всего лишь два варианта, выбираемых на основе условия true/false. Общая схема оператора:
          
 
 
          ( условие) ? выполнить этот код : выполнить этот код вместо первого
          
 
-
          Приведем простой пример:
          
+
          Приведём простой пример:
          
 
-
          var greeting = ( isBirthday ) ? 'С днем рождения, г-н Кузнецов! Хорошо Вам повеселиться!' : 'Доброе утро, г-н Кузнецов.';
          
+
          var greeting = ( isBirthday ) ? 'С днём рождения, г-н Кузнецов! Хорошо Вам повеселиться!' : 'Доброе утро, г-н Кузнецов.';
          
 
-
          У нас есть переменная isBirthday , если она true, мы отправляем посетителю поздравление с днем рождения; если нет – выдаем стандартное приветствие.
          
+
          У нас есть переменная isBirthday , если она true, мы отправляем посетителю поздравление с днём рождения; если нет – выдаём стандартное приветствие.
          
 
 
          Пример тернарного оператора
          
 
@@ -360,7 +360,7 @@ function setWeather() {
 
          <label for="theme">Выберите тему: </label>
 <select id="theme">
   <option value="white">Белая</option>
-  <option value="black">Черная</option>
+  <option value="black">Чёрная</option>
 </select>
 
 <h1>Это мой веб-сайт</h1>
          
@@ -381,9 +381,9 @@ select.onchange = function() {
 
 
          {{ EmbedLiveSample('Пример_тернарного_оператора', '100%', 300) }}
          
 
-
          Мы используем элемент {{htmlelement('select')}} для выбора темы (черная или белая), а также простой {{htmlelement('h1')}} для отображения заголовка веб-сайта. Кроме того, у нас есть функция update(), принимающая в качестве параметров (входных данных) два цвета. В качестве фона используется первый переданный цвет, а в качестве цвета текста – второй переданный цвет.
          
+
          Мы используем элемент {{htmlelement('select')}} для выбора темы (чёрная или белая), а также простой {{htmlelement('h1')}} для отображения заголовка веб-сайта. Кроме того, у нас есть функция update(), принимающая в качестве параметров (входных данных) два цвета. В качестве фона используется первый переданный цвет, а в качестве цвета текста – второй переданный цвет.
          
 
-
          Наконец, у нас есть обработчик событий onchange , использующийся для запуска функции, содержащей тернарный оператор. Сначала она проверяет условие — select.value === 'black'. Если возвращается true, мы запускаем функцию update() с параметрами черного и белого, в результате чего получаем черный цвет фона и белый цвет текста. Если возвращается false, мы запускаем функцию update() с параметрами белого и черного, в результате чего цвета веб-сайта меняются на противоположные.
          
+
          Наконец, у нас есть обработчик событий onchange , использующийся для запуска функции, содержащей тернарный оператор. Сначала она проверяет условие — select.value === 'black'. Если возвращается true, мы запускаем функцию update() с параметрами чёрного и белого, в результате чего получаем чёрный цвет фона и белый цвет текста. Если возвращается false, мы запускаем функцию update() с параметрами белого и чёрного, в результате чего цвета веб-сайта меняются на противоположные.
          
 
 
          
 
          Note: Вы можете найти этот пример на GitHub (также увидеть как он работает.)
          
@@ -602,8 +602,8 @@ textarea.onkeyup = function(){
 
 
            
  
          • Она должна принимать переменную choice в качестве входного выражения.
            • 
- 
          • Каждый элемент case должен содержать вариант выбора, соответствующий одному из доступных для выбора значений: белая, черная, лиловая, желтая или психоделическая тема.
            • 
- 
          • В блоке каждого элемента case необходимо вызывать функцию update(), которой передается два цвета: первый – это цвет фона, а второй – цвет текста. Помните, что значения цветов – это строковые значения, поэтому их нужно заключать в кавычки.
            • 
+ 
          • Каждый элемент case должен содержать вариант выбора, соответствующий одному из доступных для выбора значений: белая, чёрная, лиловая, жёлтая или психоделическая тема.
            • 
+ 
          • В блоке каждого элемента case необходимо вызывать функцию update(), которой передаётся два цвета: первый – это цвет фона, а второй – цвет текста. Помните, что значения цветов – это строковые значения, поэтому их нужно заключать в кавычки.
            • 
 
          
 
 
          Если допустили ошибку, используйте кнопку «Сброс», чтобы вернуться к исходному виду примера. Если у вас совсем ничего не получается, нажмите «Показать решение».
          
@@ -615,9 +615,9 @@ textarea.onkeyup = function(){
   <label for="theme">Выберите тему: </label>
   <select id="theme">
     <option value="white">Белая</option>
-    <option value="black">Черная</option>
+    <option value="black">Чёрная</option>
     <option value="purple">Лиловая</option>
-    <option value="yellow">Желтая</option>
+    <option value="yellow">Жёлтая</option>
     <option value="psychedelic">Психоделическая</option>
   </select>
 
@@ -732,7 +732,7 @@ updateCode();
 
 
          Заключение
          
 
-
          Это все, что вам нужно знать на данный момент об условных логических структурах! Уверены, вы хорошо разобрались в теоретическом материале и с легкостью справились с предложенными упражнениями. Если же что-то осталось для вас непонятным, перечитайте статью еще раз или свяжитесь с нами.
          
+
          Это все, что вам нужно знать на данный момент об условных логических структурах! Уверены, вы хорошо разобрались в теоретическом материале и с лёгкостью справились с предложенными упражнениями. Если же что-то осталось для вас непонятным, перечитайте статью ещё раз или свяжитесь с нами.
          
 
 
          См. также
          
 
diff --git a/files/ru/learn/javascript/building_blocks/events/index.html b/files/ru/learn/javascript/building_blocks/events/index.html
index 054bc58159..287430e632 100644
--- a/files/ru/learn/javascript/building_blocks/events/index.html
+++ b/files/ru/learn/javascript/building_blocks/events/index.html
@@ -30,14 +30,14 @@ original_slug: Learn/JavaScript/Building_blocks/События
 
 
          Серия удачных событий
          
 
-
          При возникновении события система генерирует сигнал, а также предоставляет механизм, с помощью которого можно автоматически предпринимать какие-либо действия (например, выполнить определенный код), когда происходит событие. Например, в аэропорту, когда взлетно-посадочная полоса свободна для взлета самолета, сигнал передается пилоту, и в результате они приступают к взлету.
          
+
          При возникновении события система генерирует сигнал, а также предоставляет механизм, с помощью которого можно автоматически предпринимать какие-либо действия (например, выполнить определённый код), когда происходит событие. Например, в аэропорту, когда взлётно-посадочная полоса свободна для взлёта самолёта, сигнал передаётся пилоту, и в результате они приступают к взлету.
          
 
 
          
 
 
          В Web события запускаются внутри окна браузера и, как правило, прикрепляются к конкретному элементу, который в нем находится. Это может быть один элемент, набор элементов, документ HTML, загруженный на текущей вкладке, или все окно браузера. Существует множество различных видов событий, которые могут произойти, например:
          
 
 
            
- 
          • Пользователь кликает мышью или наводит курсор на определенный элемент.
            • 
+ 
          • Пользователь кликает мышью или наводит курсор на определённый элемент.
            • 
  
          • Пользователь нажимает клавишу на клавиатуре.
            • 
  
          • Пользователь изменяет размер или закрывает окно браузера.
            • 
  
          • Завершение загрузки веб-страницы.
            • 
@@ -48,7 +48,7 @@ original_slug: Learn/JavaScript/Building_blocks/События
 
 
            Подробнее о событиях можно посмотреть в Справочнике по событиям.
            
 
-
            Каждое доступное событие имеет обработчик событий — блок кода (обычно это функция JavaScript, вводимая вами в качестве разработчика), который будет запускаться при срабатывании события. Когда такой блок кода определен на запуск в ответ на возникновение события, мы говорим, что мы регистрируем обработчик событий. Обратите внимание, что обработчики событий иногда называют слушателями событий (от англ. event listeners). Они в значительной степени взаимозаменяемы для наших целей, хотя, строго говоря, они работают вместе. Слушатель отслеживает событие, а обработчик — это код, который запускается в ответ на событие.
            
+
            Каждое доступное событие имеет обработчик событий — блок кода (обычно это функция JavaScript, вводимая вами в качестве разработчика), который будет запускаться при срабатывании события. Когда такой блок кода определён на запуск в ответ на возникновение события, мы говорим, что мы регистрируем обработчик событий. Обратите внимание, что обработчики событий иногда называют слушателями событий (от англ. event listeners). Они в значительной степени взаимозаменяемы для наших целей, хотя, строго говоря, они работают вместе. Слушатель отслеживает событие, а обработчик — это код, который запускается в ответ на событие.
            
 
 
            
 
            Примечание: Важно отметить, что веб-события не являются частью основного языка JavaScript. Они определены как часть JavaScript-API, встроенных в браузер.
            
@@ -77,9 +77,9 @@ btn.onclick = function() {
   document.body.style.backgroundColor = rndCol;
 }
          -

          В этом коде мы сохраняем ссылку на кнопку внутри переменной btn типа const, используя функцию {{domxref ("Document.querySelector()")}}. Мы также определяем функцию, которая возвращает случайное число. Третья часть кода — обработчик события. Переменная btn указывает на элемент <button> — для этого типа объекта существуют возникающие при определенном взаимодействии с ним события, а значит, возможно использование обработчиков событий. Мы отслеживаем момент возникновения события при щелчке мышью, связывая свойство обработчика события onclick с анонимной функцией, генерирующей случайный цвет RGB и устанавливающей его в качестве цвета фона элемента <body>.

          +

          В этом коде мы сохраняем ссылку на кнопку внутри переменной btn типа const, используя функцию {{domxref ("Document.querySelector()")}}. Мы также определяем функцию, которая возвращает случайное число. Третья часть кода — обработчик события. Переменная btn указывает на элемент <button> — для этого типа объекта существуют возникающие при определённом взаимодействии с ним события, а значит, возможно использование обработчиков событий. Мы отслеживаем момент возникновения события при щелчке мышью, связывая свойство обработчика события onclick с анонимной функцией, генерирующей случайный цвет RGB и устанавливающей его в качестве цвета фона элемента <body>.

          -

          Этот код теперь будет запускаться всякий раз, когда возникает событие при нажатии на элемент <button> — всякий раз, когда пользователь щелкает по нему.

          +

          Этот код теперь будет запускаться всякий раз, когда возникает событие при нажатии на элемент <button> — всякий раз, когда пользователь щёлкает по нему.

          Пример вывода выглядит следующим образом:

          @@ -101,7 +101,7 @@ btn.onclick = function() {

          Свойства обработчика событий

          -

          В этом курсе вы уже сталкивались со свойствами, связываемыми с алгоритмом работы обработчика событий. Вернемся к приведенному выше примеру:

          +

          В этом курсе вы уже сталкивались со свойствами, связываемыми с алгоритмом работы обработчика событий. Вернёмся к приведённому выше примеру:

          const btn = document.querySelector('button');
 
@@ -125,7 +125,7 @@ btn.onclick = bgChange;

          Давайте теперь поэкспериментируем с другими свойствами обработчика событий.

          -

          Создайте локальную копию файла random-color-eventhandlerproperty.html и откройте ее в своем браузере. Это всего лишь копия простого примера про случайные цвета, который мы уже разобрали в этой статье. Теперь попробуйте изменить btn.onclick на следующие значения и понаблюдайте за результатами:

          +

          Создайте локальную копию файла random-color-eventhandlerproperty.html и откройте её в своём браузере. Это всего лишь копия простого примера про случайные цвета, который мы уже разобрали в этой статье. Теперь попробуйте изменить btn.onclick на следующие значения и понаблюдайте за результатами:

          • btn.onfocus и btn.onblur — Цвет изменится, когда кнопка будет сфокусирована или не сфокусирована (попробуйте нажать Tab, чтобы выбрать кнопку или убрать выбор). Эти свойства часто применяются для отображения информации о том, как заполнить поля формы, когда они сфокусированы, или отобразить сообщение об ошибке, если поле формы было заполнено с неправильным значением.
            • @@ -134,11 +134,11 @@ btn.onclick = bgChange;
          • btn.onmouseover и btn.onmouseout — Цвет будет меняться при наведении указателя мыши на кнопку или когда указатель будет отводиться от кнопки соответственно.
          -

          Некоторые события очень общие и доступны практически в любом месте (например, обработчик onclick может быть зарегистрирован практически для любого элемента), тогда как некоторые из них более конкретны и полезны только в определенных ситуациях (например, имеет смысл использовать onplay только для определенных элементов, таких как {{htmlelement ("video")}}).

          +

          Некоторые события очень общие и доступны практически в любом месте (например, обработчик onclick может быть зарегистрирован практически для любого элемента), тогда как некоторые из них более конкретны и полезны только в определённых ситуациях (например, имеет смысл использовать onplay только для определённых элементов, таких как {{htmlelement ("video")}}).

          Встроенные обработчики событий - не используйте их

          -

          Самый ранний из введенных в сеть Web методов регистрации обработчиков событий базируется на HTML атрибутах (встроенные обработчики событий):

          +

          Самый ранний из введённых в сеть Web методов регистрации обработчиков событий базируется на HTML атрибутах (встроенные обработчики событий):

          <button onclick="bgChange()">Press me</button>
          @@ -152,7 +152,7 @@ btn.onclick = bgChange;

          Примечание: Вы можете найти полный исходник кода из этого примера на GitHub (также взгляните на его выполнение).

          -

          Значение атрибута —  это буквально код JavaScript, который вы хотите запустить при возникновении события. В приведенном выше примере вызывается функция, определенная внутри элемента {{htmlelement ("script")}} на той же странице, но вы также можете вставить JavaScript непосредственно внутри атрибута, например:

          +

          Значение атрибута —  это буквально код JavaScript, который вы хотите запустить при возникновении события. В приведённом выше примере вызывается функция, определённая внутри элемента {{htmlelement ("script")}} на той же странице, но вы также можете вставить JavaScript непосредственно внутри атрибута, например:

          <button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>
          @@ -182,7 +182,7 @@ for (var i = 0; i < buttons.length; i++) {

          Функции addEventListener() и removeEventListener()

          -

          Новый тип механизма событий определен в спецификации Document Object Model (DOM) Level 2 Events, которая предоставляет браузеру новую функцию — addEventListener(). Работает она аналогично свойствам обработчика событий, но синтаксис совсем другой. Наш пример со случайным цветом мог бы выглядеть и так:

          +

          Новый тип механизма событий определён в спецификации Document Object Model (DOM) Level 2 Events, которая предоставляет браузеру новую функцию — addEventListener(). Работает она аналогично свойствам обработчика событий, но синтаксис совсем другой. Наш пример со случайным цветом мог бы выглядеть и так:

          var btn = document.querySelector('button');
 
@@ -204,7 +204,7 @@ btn.addEventListener('click', bgChange);
          document.body.style.backgroundColor = rndCol; }); -

          Этот механизм имеет некоторые преимущества по сравнению с более старыми механизмами, рассмотренными ранее. Например, существует аналогичная функция removeEventListener(), которая удаляет ранее добавленный обработчик. Это приведет к удалению набора обработчиков в первом блоке кода в этом разделе:

          +

          Этот механизм имеет некоторые преимущества по сравнению с более старыми механизмами, рассмотренными ранее. Например, существует аналогичная функция removeEventListener(), которая удаляет ранее добавленный обработчик. Это приведёт к удалению набора обработчиков в первом блоке кода в этом разделе:

          btn.removeEventListener('click', bgChange);
          @@ -226,13 +226,13 @@ myElement.addEventListener('click', functionB);

          Какой механизм мне использовать?

          -

          Из трех механизмов определенно не нужно использовать атрибуты событий HTML. Как упоминалось выше, это устаревшая и плохая практика.

          +

          Из трёх механизмов определённо не нужно использовать атрибуты событий HTML. Как упоминалось выше, это устаревшая и плохая практика.

          Остальные два являются относительно взаимозаменяемыми, по крайней мере для простых целей

            -
          • Свойства обработчика событий имеют меньшую мощность и параметры, но лучше совместимость между браузерами (поддерживается еще в Internet Explorer 8). Вероятно, вам следует начать с них, когда вы учитесь.
            • -
          • События уровня 2 DOM (addEventListener() и т. д.) являются более мощными, но также могут стать более сложными и хуже поддерживаться (поддерживается еще в Internet Explorer 9). Вам также стоит поэкспериментировать с ними и стремиться использовать их там, где это возможно.
            • +
          • Свойства обработчика событий имеют меньшую мощность и параметры, но лучше совместимость между браузерами (поддерживается ещё в Internet Explorer 8). Вероятно, вам следует начать с них, когда вы учитесь.
            • +
          • События уровня 2 DOM (addEventListener() и т. д.) являются более мощными, но также могут стать более сложными и хуже поддерживаться (поддерживается ещё в Internet Explorer 9). Вам также стоит поэкспериментировать с ними и стремиться использовать их там, где это возможно.

          Основные преимущества третьего механизма заключаются в том, что при необходимости можно удалить код обработчика событий, используя removeEventListener(), и так же можно добавить несколько элементов-обработчиков того же типа к элементам. Например, вы можете вызвать addEventListener('click', function() {...}) для элемента несколько раз, с разными функциями, указанными во втором аргументе. Это невозможно при использовании свойств обработчика событий, поскольку любые последующие попытки установить свойство будут перезаписывать более ранние, например:

          @@ -251,7 +251,7 @@ etc.

             Объекты событий

          -

          Иногда внутри функции обработчика событий вы можете увидеть параметр, заданный с таким именем, как event, evt или просто e. Называется он объектом события и он автоматически передается обработчикам событий для предоставления дополнительных функций и информации. Например, давайте немного перепишем наш пример со случайным цветом:

          +

          Иногда внутри функции обработчика событий вы можете увидеть параметр, заданный с таким именем, как event, evt или просто e. Называется он объектом события и он автоматически передаётся обработчикам событий для предоставления дополнительных функций и информации. Например, давайте немного перепишем наш пример со случайным цветом:

          function bgChange(e) {
   var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
@@ -271,7 +271,7 @@ btn.addEventListener('click', bgChange);

          Примечание: Вместо e/evt/event можно использовать любое имя для объекта события, которое затем можно использовать для ссылки на него в функции обработчика событий. e/evt/event чаще всего используются разработчиками, потому что они короткие и легко запоминаются. И хорошо придерживаться стандарта.

          -

          e.target применяют, когда нужно установить один и тот же обработчик событий на несколько элементов и, когда на них происходит событие, применить определенное действие к ним ко всем. Например, у вас может быть набор из 16 плиток, которые исчезают при нажатии. Полезно всегда иметь возможность просто указать, чтобы объект исчез, как e.target, вместо того, чтобы выбирать его более сложным способом. В следующем примере (см. исходный код на  useful-eventtarget.html,а как он работает можно посмотреть здесь), мы создаем 16 элементов {{htmlelement ("div")}} с использованием JavaScript. Затем мы выберем все из них, используя {{domxref ("document.querySelectorAll()")}}, и с помощью цикла for выберем каждый из них, добавив обработчик onclick к каждому так, чтобы случайный цвет применялся к каждому клику:

          +

          e.target применяют, когда нужно установить один и тот же обработчик событий на несколько элементов и, когда на них происходит событие, применить определённое действие к ним ко всем. Например, у вас может быть набор из 16 плиток, которые исчезают при нажатии. Полезно всегда иметь возможность просто указать, чтобы объект исчез, как e.target, вместо того, чтобы выбирать его более сложным способом. В следующем примере (см. исходный код на  useful-eventtarget.html,а как он работает можно посмотреть здесь), мы создаём 16 элементов {{htmlelement ("div")}} с использованием JavaScript. Затем мы выберем все из них, используя {{domxref ("document.querySelectorAll()")}}, и с помощью цикла for выберем каждый из них, добавив обработчик onclick к каждому так, чтобы случайный цвет применялся к каждому клику:

          var divs = document.querySelectorAll('div');
 
@@ -281,7 +281,7 @@ for (var i = 0; i < divs.length; i++) {
   }
 }
          -

          Результат выглядит следующим образом (попробуйте щелкнуть по нему):

          +

          Результат выглядит следующим образом (попробуйте щёлкнуть по нему):

          -

          Важно: С циклом for, также как и с другими циклами, вы должны убедиться что инициализатор (счетчик) и окончательное выражение построены так, что они достигнут условия выхода. Если этого не произойдет, то цикл будет продолжаться вечно. В итоге браузер или заставит его остановиться, или выдаст ошибку. Это называется бесконечным циклом.

          +

          Важно: С циклом for, также как и с другими циклами, вы должны убедиться что инициализатор (счётчик) и окончательное выражение построены так, что они достигнут условия выхода. Если этого не произойдёт, то цикл будет продолжаться вечно. В итоге браузер или заставит его остановиться, или выдаст ошибку. Это называется бесконечным циклом.

          Выход из цикла с помощью break

          -

          Если вы хотите выйти из цикла до завершения всех итераций, вы можете использовать оператор break . Мы уже встречались с ним в предыдущей статье, когда рассматривали оператор switch: когда происходит событие, соответствующее условию, прописанному ключевым словом case внутри оператора switch, условие break моментально выходит из конструкции switch и запускает следующий после нее код.

          +

          Если вы хотите выйти из цикла до завершения всех итераций, вы можете использовать оператор break . Мы уже встречались с ним в предыдущей статье, когда рассматривали оператор switch: когда происходит событие, соответствующее условию, прописанному ключевым словом case внутри оператора switch, условие break моментально выходит из конструкции switch и запускает следующий после неё код.

          Тоже самое и с циклами — условие break моментально закончит цикл и заставит браузер запустить следующий после цикла код.

          Предположим, в массиве данных мы хотим найти имена контактов и телефонные номера, а вернуть только номер, который мы нашли.
          - Начнем с разметки HTML: поле {{htmlelement("input")}} позволяет нам ввести имя для поиска, элемент (кнопка) {{htmlelement("button")}} для подтверждения поиска, и элемент {{htmlelement("p")}} для отображения результата:

          + Начнём с разметки HTML: поле {{htmlelement("input")}} позволяет нам ввести имя для поиска, элемент (кнопка) {{htmlelement("button")}} для подтверждения поиска, и элемент {{htmlelement("p")}} для отображения результата:

          <label for="search">Поиск по имени: </label>
 <input id="search" type="text">
@@ -370,16 +370,16 @@ btn.addEventListener('click', function() {
 
            
  
          1. Прежде всего у нас определены некоторые переменные: у нас есть массив с контактной информацией, каждый элемент которого это строка, содержащая в себе имя и номер телефона, которые разделены двоеточием.
            2. 
  
          2. Далее мы применяем обработчик события кнопки (btn), чтобы при её нажатии запускался код для поиска и отображения результатов.
            3. 
- 
          3. Мы сохраняем значение, введенное в текстовое поле, в переменную  searchName, затем очищаем введенный текст и снова фокусируемся на текстовом поле для нового поиска.
            4. 
- 
          4. Теперь перейдем к интересующей нас части — к циклу for:
+ 
          5. Мы сохраняем значение, введённое в текстовое поле, в переменную  searchName, затем очищаем введённый текст и снова фокусируемся на текстовом поле для нового поиска.
            6. 
+ 
          6. Теперь перейдём к интересующей нас части — к циклу for:
   
              
-   
            1. Мы начали счетчик с 0, запускаем цикл до тех пор, пока счетчик всё ещё меньше, чем contacts.length, а инкремент i увеличиваем на 1 после каждой итерации цикла.
              2. 
+   
            2. Мы начали счётчик с 0, запускаем цикл до тех пор, пока счётчик всё ещё меньше, чем contacts.length, а инкремент i увеличиваем на 1 после каждой итерации цикла.
              3. 
    
            3. Внутри цикла мы сначала разделяем текущий контакт (contacts[i]) на символе двоеточия, и сохраняем полученные два значения в массиве с  названием splitContact.
              4. 
-   
            4. Затем мы используем условный оператор, чтобы проверить, равно ли splitContact[0] (имя контакта) введенному searchName. Если это так, мы выводим строку в абзац, чтобы сообщить, каков номер контакта, и используем break для завершения цикла.
              5. 
+   
            5. Затем мы используем условный оператор, чтобы проверить, равно ли splitContact[0] (имя контакта) введённому searchName. Если это так, мы выводим строку в абзац, чтобы сообщить, каков номер контакта, и используем break для завершения цикла.
              6. 
   
            
  
            7. 
  
          7. 
-  
            После итерации (contacts.length-1), если имя контакта не совпадает с введенным именем в поисковом запросе, для текста абзаца устанавливается: «Контакт не найден.», и цикл продолжает повторяться.
            
+  
            После итерации (contacts.length-1), если имя контакта не совпадает с введённым именем в поисковом запросе, для текста абзаца устанавливается: «Контакт не найден.», и цикл продолжает повторяться.
            
  
            8. 
 
          
 
@@ -457,9 +457,9 @@ for (var i = 1; i <= num; i++) {
 
          {{ EmbedLiveSample('Hidden_code_4', '100%', 100) }}
          
 
 
            
- 
          1. В этом случае на входе должно быть число (num). Циклу for присваивается счетчик, начинающийся с 1 (поскольку в данном случае нас не интересует 0), условие выхода, которое говорит, что цикл остановится, когда счетчик станет больше входного num, а итератор добавляет 1 к счетчику каждый раз.
            2. 
- 
          2. Внутри цикла мы находим квадратный корень каждого числа с помощью Math.sqrt(i), а затем проверяем, является ли квадратный корень целым числом, проверяя, совпадает ли он с самим собой, когда он был округлен до ближайшего целого числа (это то, что Math.floor () делает с числом, которое передает).
            3. 
- 
          3. Если квадратный корень и округленный вниз квадратный корень не равны друг другу (! ==), значит квадратный корень не является целым числом, поэтому нас он не интересует.  В таком случае мы используем оператор continue, чтобы перейти к следующей итерации цикла без записи этого числа.
            4. 
+ 
          4. В этом случае на входе должно быть число (num). Циклу for присваивается счётчик, начинающийся с 1 (поскольку в данном случае нас не интересует 0), условие выхода, которое говорит, что цикл остановится, когда счётчик станет больше входного num, а итератор добавляет 1 к счётчику каждый раз.
            5. 
+ 
          5. Внутри цикла мы находим квадратный корень каждого числа с помощью Math.sqrt(i), а затем проверяем, является ли квадратный корень целым числом, проверяя, совпадает ли он с самим собой, когда он был округлён до ближайшего целого числа (это то, что Math.floor () делает с числом, которое передаёт).
            6. 
+ 
          6. Если квадратный корень и округлённый вниз квадратный корень не равны друг другу (! ==), значит квадратный корень не является целым числом, поэтому нас он не интересует.  В таком случае мы используем оператор continue, чтобы перейти к следующей итерации цикла без записи этого числа.
            7. 
  
          7. Если квадратный корень является целым числом, мы пропускаем блок if полностью, поэтому оператор continue не выполняется; вместо этого объединяется текущее значение i с пробелом в конце содержимого абзаца.
            8. 
 
          
 
@@ -484,9 +484,9 @@ while (exit-condition) {
 
 
          Здесь присутствуют те же три элемента и в том же порядке, что и в цикле for. Это важно, так как вам нужно определить инициализатор, прежде чем получится проверить, достиг ли цикл условия выхода.
          
 
-
          Окончательное условие выполняется после выполнения кода внутри цикла (итерация завершена), и оно выполняется только в том случае, если условие выхода еще не достигнуто.
          
+
          Окончательное условие выполняется после выполнения кода внутри цикла (итерация завершена), и оно выполняется только в том случае, если условие выхода ещё не достигнуто.
          
 
-
          Посмотрим еще раз пример со списком кошек с кодом переписанным под использование цикла while:
          
+
          Посмотрим ещё раз пример со списком кошек с кодом переписанным под использование цикла while:
          
 
 
          var i = 0;
 
@@ -501,7 +501,7 @@ while (i < cats.length) {
 }
          
 
 
          
-
          Примечание: цикл все еще работает так же, как и ожидалось - посмотрите, как он работает на GitHub (также посмотрите полный исходный код).
          
+
          Примечание: цикл все ещё работает так же, как и ожидалось - посмотрите, как он работает на GitHub (также посмотрите полный исходный код).
          
 
          
 
 
          Цикл do...while представляет собой вариацию структуры цикла while:
          
@@ -515,7 +515,7 @@ do {
 
 
          В этом случае инициализатор снова указывается прежде, чем цикл запускается. Ключевое слово do непосредственно предшествует фигурным скобкам, содержащим код для запуска и конечное выражение.
          
 
-
          Различие состоит в том, что условие выхода идет после всего остального, заключенное в скобки после ключевого слова while. В цикле do...while код внутри фигурных скобок всегда запускается один раз, прежде чем выполняется проверка, чтобы увидеть, должна ли она быть выполнена снова (в while и for проверка идет первой, поэтому код может быть не выполнен).
          
+
          Различие состоит в том, что условие выхода идёт после всего остального, заключённое в скобки после ключевого слова while. В цикле do...while код внутри фигурных скобок всегда запускается один раз, прежде чем выполняется проверка, чтобы увидеть, должна ли она быть выполнена снова (в while и for проверка идёт первой, поэтому код может быть не выполнен).
          
 
 
          Перепишем наш пример с кошками, чтобы использовать цикл do...while:
          
 
@@ -536,12 +536,12 @@ do {
 
 
 
          
-
          Замечание: Применяя циклы while and do...while , как и все циклы, убедитесь, что инициализатор повторяется так, чтобы он в конце концов достиг условия выхода. Если это не так, цикл будет продолжаться вечно, и либо браузер заставит его остановиться, либо произойдет сбой. Это называется доктор Стрэндж и Дормамму бесконечным циклом. 
          
+
          Замечание: Применяя циклы while and do...while , как и все циклы, убедитесь, что инициализатор повторяется так, чтобы он в конце концов достиг условия выхода. Если это не так, цикл будет продолжаться вечно, и либо браузер заставит его остановиться, либо произойдёт сбой. Это называется доктор Стрэндж и Дормамму бесконечным циклом. 
          
 
          
 
-
          Практическое упражнение:  запускаем обратный отсчет!
          
+
          Практическое упражнение:  запускаем обратный отсчёт!
          
 
-
          В этом упражнении мы хотим, чтобы вы написали простой отсчет времени запуска до поля вывода, от 10 до "Пуск!"  В частности, мы хотим, чтобы вы:
          
+
          В этом упражнении мы хотим, чтобы вы написали простой отсчёт времени запуска до поля вывода, от 10 до "Пуск!"  В частности, мы хотим, чтобы вы:
          
 
 
            
  
          • Цикл от 10 до 0. Мы предоставляем вам инициализатор: var i = 10;.
            • 
@@ -555,12 +555,12 @@ do {
  
          • Разные номера итераций требуют, чтобы в абзаце для каждой итерации помещался свой текст (вам понадобится условный оператор и несколько para.textContent = lines
            
   ):
   
              
-   
            • Если число равно 10, выведите в абзаце «Обратный отсчет 10».
              • 
+   
            • Если число равно 10, выведите в абзаце «Обратный отсчёт 10».
              • 
    
            • Если число равно 0, выведите в абзаце «Пуск!»
              • 
    
            • Для любого другого числа выведите в абзаце только число.
              • 
   
            
  
            • 
- 
          • Не забудьте включить итератор! Однако в этом примере мы ведем обратный отсчет после каждой итерации, а не вверх, поэтому вам не нужен i ++. Как выполнить итерацию вниз?
            • 
+ 
          • Не забудьте включить итератор! Однако в этом примере мы ведём обратный отсчёт после каждой итерации, а не вверх, поэтому вам не нужен i ++. Как выполнить итерацию вниз?
            • 
 
          
 
 
          Если вы допустили ошибку, вы всегда можете сбросить пример с помощью кнопки «Сброс» (Reset). Если у вас совсем ничего не получается, нажмите «Show solution», чтобы увидеть решение.
          
@@ -710,7 +710,7 @@ textarea.onkeyup = function(){
 
 
          Практическое упражнение:   Заполнение списка гостей
          
 
-
          Возьмите список имен, хранящихся в массиве, и поместите их в список гостей. Тут не всё так просто: мы не хотим приглашать Фила и Лолу, потому что они наглые и всё сожрут! У нас есть два списка. Один для тех, кого мы хотим пригласить, второй для тех, кого приглашать не нужно.
          
+
          Возьмите список имён, хранящихся в массиве, и поместите их в список гостей. Тут не всё так просто: мы не хотим приглашать Фила и Лолу, потому что они наглые и всё сожрут! У нас есть два списка. Один для тех, кого мы хотим пригласить, второй для тех, кого приглашать не нужно.
          
 
 
          Для этого нужно сделать следующее:
          
 
@@ -733,7 +733,7 @@ textarea.onkeyup = function(){
  
        17. admitted.textContent += — начало строки, которая объединит что-то до конца admitted.textContent.
          18. 
 
 
-
          Дополнительный бонусный вопрос - после успешного выполнения вышеупомянутых задач у вас останется два списка имен, разделенных запятыми, но они будут составлены некорректно: в конце каждого списка будет запятая. Сможете ли вы составить эти списки так, чтобы в конце каждой строки вместо запятой была точка. За помощью можно обратиться к статье «Полезные строковые методы».
          
+
          Дополнительный бонусный вопрос - после успешного выполнения вышеупомянутых задач у вас останется два списка имён, разделённых запятыми, но они будут составлены некорректно: в конце каждого списка будет запятая. Сможете ли вы составить эти списки так, чтобы в конце каждой строки вместо запятой была точка. За помощью можно обратиться к статье «Полезные строковые методы».
          
 
 
          Если вы допустили ошибку, вы всегда можете сбросить пример с помощью кнопки «Сброс» (Reset). Если у вас совсем ничего не получается, нажмите «Показать решение», чтобы увидеть решение.
          
 
@@ -749,7 +749,7 @@ textarea.onkeyup = function(){
 <h2>Editable code</h2>
 <p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
 <textarea id="code" class="playable-code" style="height: 400px;width: 95%">
-var people = ['Крис', 'Анна', 'Колин', 'Терри', 'Фил', 'Лола', 'Сем', 'Кай', 'Брюс'];
+var people = ['Крис', 'Анна', 'Колин', 'Терри', 'Фил', 'Лола', 'Сём', 'Кай', 'Брюс'];
 
 var admitted = document.querySelector('.admitted');
 var refused = document.querySelector('.refused');
@@ -818,7 +818,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-var jsSolution = 'var people = [\'Крис\', \'Анна\', \'Колин\', \'Терри\', \'Фил\', \'Лола\', \'Сем\', \'Кай\', \'Брюс\'];\n\nvar admitted = document.querySelector(\'.admitted\');\nvar refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Пригласить: \';\nrefused.textContent = \'Не приглашать(!): \'\nvar i = 0;\n\ndo {\n if(people[i] === \'Фил\' || people[i] === \'Лола\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i < people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';';
+var jsSolution = 'var people = [\'Крис\', \'Анна\', \'Колин\', \'Терри\', \'Фил\', \'Лола\', \'Сём\', \'Кай\', \'Брюс\'];\n\nvar admitted = document.querySelector(\'.admitted\');\nvar refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Пригласить: \';\nrefused.textContent = \'Не приглашать(!): \'\nvar i = 0;\n\ndo {\n if(people[i] === \'Фил\' || people[i] === \'Лола\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i < people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';';
 var solutionEntry = jsSolution;
 
 textarea.addEventListener('input', updateCode);
diff --git a/files/ru/learn/javascript/building_blocks/return_values/index.html b/files/ru/learn/javascript/building_blocks/return_values/index.html
index 9ccd384929..9ff812f4a1 100644
--- a/files/ru/learn/javascript/building_blocks/return_values/index.html
+++ b/files/ru/learn/javascript/building_blocks/return_values/index.html
@@ -7,7 +7,7 @@ translation_of: Learn/JavaScript/Building_blocks/Return_values
 
 
          {{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/События", "Learn/JavaScript/Building_blocks")}}
          
 
-
          Для нас в этом курсе имеется еще один важный момент. Посмотрим внимательнее на возвращаемое значение функций. Некоторые функции не возвращают существенное значение после завершения, но некоторые возвращают, и важно понимать что это за значение и как использовать его в своем коде и как сделать так чтобы ваши собственные функции возвращали полезные значения. Мы объясним всё это ниже. 
          
+
          Для нас в этом курсе имеется ещё один важный момент. Посмотрим внимательнее на возвращаемое значение функций. Некоторые функции не возвращают существенное значение после завершения, но некоторые возвращают, и важно понимать что это за значение и как использовать его в своём коде и как сделать так чтобы ваши собственные функции возвращали полезные значения. Мы объясним всё это ниже. 
          @@ -35,7 +35,7 @@ console.log(newString); // заменяет одну подстроку другой и возвращает // новую строку со сделанными заменами -

          Мы уже видели этот блок кода в нашей первой статье про функции. Мы вызываем функцию replace() на строке myText и передаем ей 2 параметра —  заменяемую подстроку и подстроку, которой будем заменять. Когда функция завершит выполнение, она вернет значение, которым является новая строка со сделанными в ней заменами.  В коде выше мы сохраняем это возвращаемое значение как значение переменной newString.

          +

          Мы уже видели этот блок кода в нашей первой статье про функции. Мы вызываем функцию replace() на строке myText и передаём ей 2 параметра —  заменяемую подстроку и подстроку, которой будем заменять. Когда функция завершит выполнение, она вернёт значение, которым является новая строка со сделанными в ней заменами.  В коде выше мы сохраняем это возвращаемое значение как значение переменной newString.

          Если Вы посмотрите на функцию replace() на MDN reference page, вы увидите секцию под названием Return value.  Очень важно знать и понимать какие значения возвращаются функциями, так что мы пытаемся включать эту информацию везде, где это возможно.

          @@ -109,7 +109,7 @@ function factorial(num) { return num; }Ффункции squared() и cubed() довольно очевидны— они возвращают квадрат или куб переданного как параметр числа. Функция factorial() возвращает factorial переданного числа. -
        18. Далее мы добавим способ выводить нашу информацию введенным в  text input числе. Добавьте обработчик событий ниже существующих функций: +
        19. Далее мы добавим способ выводить нашу информацию введённым в  text input числе. Добавьте обработчик событий ниже существующих функций: 
          input.onchange = function() {
   var num = input.value;
   if (isNaN(num)) {
@@ -121,10 +121,10 @@ function factorial(num) {
   }
 }
          -

          Здесь мы создаем обработчик событий onchange  который срабатывает когда меняется когда новое значение вводится в text input и подтверждается (введите значение и, например, нажмите tab). Когда анонимная функция срабатывает, введенное в input значение сохраняется в переменной num .

          +

          Здесь мы создаём обработчик событий onchange  который срабатывает когда меняется когда новое значение вводится в text input и подтверждается (введите значение и, например, нажмите tab). Когда анонимная функция срабатывает, введённое в input значение сохраняется в переменной num .

        20. -

          Далее мы делаем условный тест — если введенное значение не является числом, мы выводим в параграф сообщение об ошибке . Тест смотрит возвращает ли выражение isNaN(num)  true. Мы используем функцию isNaN() чтобы проверить что значение переменной num не число — если так то функция возвращаетtrue, если нет- false.

          +

          Далее мы делаем условный тест — если введённое значение не является числом, мы выводим в параграф сообщение об ошибке . Тест смотрит возвращает ли выражение isNaN(num)  true. Мы используем функцию isNaN() чтобы проверить что значение переменной num не число — если так то функция возвращаетtrue, если нет- false.

        21. Если тест возвращает false, значение переменной numчисло, и поэтому мы выводим сообщение внутри параграфа о значениях квадрата, куба и факториала числа. Предложение вызывает  функции squared(), cubed() иfactorial() чтобы получить нужные значения. Сохраните Ваш код, загрузите его в браузере и посмотрите на то что получилось.

          @@ -135,7 +135,7 @@ function factorial(num) {

          Замечание:  Если у вас проблемы с работой данного примера, не стесняйтесь сверить ваш код с работающей версией finished version on GitHub (или смотрите живой пример), или спросите нас.

          -

          К этому моменту мы хотели бы чтобы вы написали парочку собственных функций и добавили их в библиотеку. Как на счет квадратного или кубического корня числа или длины окружности круга с длиной радиуса равной числу num?

          +

          К этому моменту мы хотели бы чтобы вы написали парочку собственных функций и добавили их в библиотеку. Как на счёт квадратного или кубического корня числа или длины окружности круга с длиной радиуса равной числу num?

          Это упражнение привнесло парочку важных понятий в изучении того, как использовать ключевое слово return . В дополнение:

          @@ -148,13 +148,13 @@ function factorial(num) {

          Функции очень полезны и не смотря на то, что об их синтаксисе и функциональности можно говорить долго, у нас есть довольно понятные статьи для дальнейшего обучения.

          -

          Если в статье есть что-то что вы не поняли, не стесняйтесь перечитать статью еще раз или свяжитесь с нами для получения помощи.

          +

          Если в статье есть что-то что вы не поняли, не стесняйтесь перечитать статью ещё раз или свяжитесь с нами для получения помощи.

          Смотрите также

          • Функции более подробно — подробное руководство, охватывающее более продвинутую информацию, связанную с функциями.
            • -
          • Колбэк-функции в JavaScript — распространенный паттерн JavaScript для передачи функции в другую функцию как аргумент, который затем вызывается внутри первой функции.
            • +
          • Колбэк-функции в JavaScript — распространённый паттерн JavaScript для передачи функции в другую функцию как аргумент, который затем вызывается внутри первой функции.

          {{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}

          diff --git a/files/ru/learn/javascript/building_blocks/test_your_skills_colon__functions/index.html b/files/ru/learn/javascript/building_blocks/test_your_skills_colon__functions/index.html index 8bfb571bcb..d956d7bbc3 100644 --- a/files/ru/learn/javascript/building_blocks/test_your_skills_colon__functions/index.html +++ b/files/ru/learn/javascript/building_blocks/test_your_skills_colon__functions/index.html @@ -24,9 +24,9 @@ translation_of: 'Learn/JavaScript/Building_blocks/Test_your_skills:_Functions'

          Управление структурой DOM: рекомендуется

          -

          Некоторые из вопросов, приведенных ниже, требуют написания кода для управления структурой DOM для их решения - например, создание новых HTML-элементов, установка их текстового содержимого в соответствие с определенными значениями строк, и вложение их внутри существующих элементов на странице - и все это с помощью JavaScript.

          +

          Некоторые из вопросов, приведённых ниже, требуют написания кода для управления структурой DOM для их решения - например, создание новых HTML-элементов, установка их текстового содержимого в соответствие с определёнными значениями строк, и вложение их внутри существующих элементов на странице - и все это с помощью JavaScript.

          -

          Мы еще не обучали этому прямо в курсе, но вы увидите некоторые примеры, которые используют данную структуру, и мы хотели бы, чтобы вы провели некоторые исследования в отношении того, какие DOM API вам нужны, чтобы успешно ответить на эти вопросы. Хорошим началом будет наше учебное пособие Управление документами.

          +

          Мы ещё не обучали этому прямо в курсе, но вы увидите некоторые примеры, которые используют данную структуру, и мы хотели бы, чтобы вы провели некоторые исследования в отношении того, какие DOM API вам нужны, чтобы успешно ответить на эти вопросы. Хорошим началом будет наше учебное пособие Управление документами.

          Функции 1

          @@ -64,7 +64,7 @@ translation_of: 'Learn/JavaScript/Building_blocks/Test_your_skills:_Functions'

          Функции 3

          -

          В этой задаче вы возвращаетесь к проблеме, поставленной в Задаче 1, с целью ее улучшения. Мы хотим, чтобы вы сделали три улучшения:

          +

          В этой задаче вы возвращаетесь к проблеме, поставленной в Задаче 1, с целью её улучшения. Мы хотим, чтобы вы сделали три улучшения:

          1. Выполните рефакторинг (реорганизацию) кода, который отвечает за генерацию случайного числа в отдельную функцию random(), которая принимает в качестве параметров две общие границы, между которыми должно находиться случайное число и возвращает результат.
            2. @@ -87,7 +87,7 @@ translation_of: 'Learn/JavaScript/Building_blocks/Test_your_skills:_Functions'

            Если же вы хотите, чтобы вашу работу проанализировали, или у вас проблема и вы хотите попросить о помощи:

              -
            1. Поместите свой код в онлайн-редактор CodePen, jsFiddle или Glitch с возможностью совместного использования. Вы можете написать код самостоятельно или использовать файлы с исходным кодом, ссылки на которые приведены в вышеприведенных разделах.
              2. +
            2. Поместите свой код в онлайн-редактор CodePen, jsFiddle или Glitch с возможностью совместного использования. Вы можете написать код самостоятельно или использовать файлы с исходным кодом, ссылки на которые приведены в вышеприведённых разделах.
            3. Напишите сообщение с просьбой о проведении анализа и/или помощи в категории MDN Discourse forum Learning category. Ваше сообщение должно включать в себя следующие пункты:
              • Описательный заголовок, например "Анализ для теста навыков: Функции 1".
                • diff --git a/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.html b/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.html index da1f88f0aa..280493b6bd 100644 --- a/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.html +++ b/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.html @@ -76,7 +76,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Client-side_storage

                Некоторые современные браузеры поддерживают новое {{domxref("Cache")}} API. Этот API предназначен для хранения HTTP-ответов на конкретные запросы и очень полезен для таких вещей, как хранение ресурсов сайта в автономном режиме, чтобы впоследствии сайт можно было использовать без сетевого подключения. Cache обычно используется в сочетании с Service Worker API, однако это не обязательно.

                -

                Использование Cache и Service Workers - сложная тема, и мы не будем подробно останавливаться на ней в этой статье, хотя приведем простой пример {{anch("Offline asset storage")}} в разделе ниже.

                +

                Использование Cache и Service Workers - сложная тема, и мы не будем подробно останавливаться на ней в этой статье, хотя приведём простой пример {{anch("Offline asset storage")}} в разделе ниже.

                Хранение простых данных — web storage

                @@ -96,7 +96,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Client-side_storage

              • Все данные вашего веб-хранилища содержатся в двух объектоподобных структурах внутри браузера: {{domxref("Window.sessionStorage", "sessionStorage")}} и {{domxref("Window.localStorage", "localStorage")}}. Первый сохраняет данные до тех пор, пока браузер открыт (данные теряются при закрытии браузера), а второй сохраняет данные даже после того, как браузер закрыт, а затем снова открыт. Мы будем использовать второй в этой статье, так как он, как правило, более полезен.

                -

                {{domxref("Storage.setItem()")}} метод позволяет сохранить элемент данных в хранилище - он принимает два параметра: имя элемента и его значение. Попробуйте ввести это в свою консоль JavaScript (измените значение на свое собственное имя, если хотите!):

                +

                {{domxref("Storage.setItem()")}} метод позволяет сохранить элемент данных в хранилище - он принимает два параметра: имя элемента и его значение. Попробуйте ввести это в свою консоль JavaScript (измените значение на своё собственное имя, если хотите!):

                localStorage.setItem('name','Chris');
                • @@ -134,7 +134,7 @@ myName var myName = localStorage.getItem('name'); myName -

                Вы должны увидеть возвращенное имя элемента.

                +

                Вы должны увидеть возвращённое имя элемента.

              • Теперь закройте браузер и откройте его снова.

                @@ -155,7 +155,7 @@ myName

                Это имеет смысл - вы можете представить себе проблемы безопасности, которые могут возникнуть, если веб-сайты смогут видеть данные друг друга!

                -

                Более развернутый пример

                +

                Более развёрнутый пример

                Давайте применим эти новые знания, написав простой рабочий пример, чтобы дать вам представление о том, как можно использовать веб-хранилище. Наш пример позволит вам ввести имя, после чего страница обновится, чтобы дать вам персональное приветствие. Это состояние также будет сохраняться при перезагрузке страницы / браузера, поскольку имя хранится в веб-хранилище.

                @@ -173,7 +173,7 @@ myName

                Далее обратите внимание, как наш HTML ссылается на файл JavaScript с именем index.js (см. строку 40). Нам нужно создать его, и записать в него наш код JavaScript. Создайте файл index.js в том же каталоге, что и ваш HTML-файл.

              • -

                Мы начнем с создания ссылок на все функции HTML, которыми мы должны манипулировать в этом примере - мы создадим их все как константы, поскольку эти ссылки не нужно изменять в жизненном цикле приложения. Добавьте следующие строки в ваш файл JavaScript:

                +

                Мы начнём с создания ссылок на все функции HTML, которыми мы должны манипулировать в этом примере - мы создадим их все как константы, поскольку эти ссылки не нужно изменять в жизненном цикле приложения. Добавьте следующие строки в ваш файл JavaScript:

                // create needed constants
 const rememberDiv = document.querySelector('.remember');
@@ -195,7 +195,7 @@ form.addEventListener('submit', function(e) {
 });
              • -

                Теперь нам нужно добавить обработчик событий, функция-обработчик которого будет запускаться при нажатии кнопки «Say hello». В комментариях подробно объясняется, что делает каждый бит, но в сущности здесь мы берем имя, которое пользователь ввел в поле ввода текста, и сохраняем его в веб-хранилище с помощью setItem(), затем запускаем функцию nameDisplayCheck(), которая будет обрабатывать обновление фактического текста сайта. Добавьте это в конец: 

                +

                Теперь нам нужно добавить обработчик событий, функция-обработчик которого будет запускаться при нажатии кнопки «Say hello». В комментариях подробно объясняется, что делает каждый бит, но в сущности здесь мы берём имя, которое пользователь ввёл в поле ввода текста, и сохраняем его в веб-хранилище с помощью setItem(), затем запускаем функцию nameDisplayCheck(), которая будет обрабатывать обновление фактического текста сайта. Добавьте это в конец: 

                // run function when the 'Say hello' button is clicked
 submitBtn.addEventListener('click', function() {
@@ -263,7 +263,7 @@ function nameDisplayCheck() {
 
 
                Однако это обходится дорого: IndexedDB гораздо сложнее в использовании, чем Web Storage API.
                
 
-
                В этом разделе мы действительно только коснемся того, на что он способен, но мы дадим вам достаточно, чтобы начать.
                
+
                В этом разделе мы действительно только коснёмся того, на что он способен, но мы дадим вам достаточно, чтобы начать.
                
 
 
                Работа с примером хранения заметок
                
 
@@ -668,7 +668,7 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) {
 
 
                Оффлайн хранение данных
                
 
-
                Пример ниже показывает, как создать приложение, которое будет хранить данные большого объема в хранилище IndexedDB, избегая необходимости скачивать их повторно. Это важное улучшение пользовательского опыта, но есть одно замечание — основной HTML, CSS, и файлы JavaScript все еще нужно загружать каждый раз при запросе сайта, это значит, что данный пример не будет работать при отсутствии сетевого соединения.
                
+
                Пример ниже показывает, как создать приложение, которое будет хранить данные большого объёма в хранилище IndexedDB, избегая необходимости скачивать их повторно. Это важное улучшение пользовательского опыта, но есть одно замечание — основной HTML, CSS, и файлы JavaScript все ещё нужно загружать каждый раз при запросе сайта, это значит, что данный пример не будет работать при отсутствии сетевого соединения.
                
 
 
                
 
@@ -678,10 +678,10 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) {
 
 
                Когда worker перехватывает запрос, он может делать многие вещи (смотри идеи для использования сервис-воркеров), но классический пример это сохранение сетевых ответов и затем доступ к ним при запросе, вместо запросов по сети. В результате, это позволяет сделать веб-сайт полностью работающим в офлайне.
                
 
-
                Cache API это еще один механизм хранения данных на клиенте с небольшим отличием — он разработан для хранения HTTP ответов, и прекрасно работает с сервис-воркерами.
                
+
                Cache API это ещё один механизм хранения данных на клиенте с небольшим отличием — он разработан для хранения HTTP ответов, и прекрасно работает с сервис-воркерами.
                
 
 
                
-
                Note: Service workers и Cache доступны в большинстве современных браузеров. В момент написания статьи, Safari еще не имел реализации, но скоро должна быть.
                
+
                Note: Service workers и Cache доступны в большинстве современных браузеров. В момент написания статьи, Safari ещё не имел реализации, но скоро должна быть.
                
 
                
 
 
                Пример сервис воркера
                
@@ -703,12 +703,12 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) {
   }
                -

                Примечание: Путь к файлу sw.js указан относительно корня сайта, а не JavaScript файла, содержащего основной код. Полный путь - https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js. Корень -  https://mdn.github.io, и следовательно указываемый путь должен быть /learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js. Если вы хотите использовать данный пример на своем сервере, вы также должны изменить путь к скрипту. Это довольно запутанно, но обязано так работать по причинам безопасности.

                +

                Примечание: Путь к файлу sw.js указан относительно корня сайта, а не JavaScript файла, содержащего основной код. Полный путь - https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js. Корень -  https://mdn.github.io, и следовательно указываемый путь должен быть /learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js. Если вы хотите использовать данный пример на своём сервере, вы также должны изменить путь к скрипту. Это довольно запутанно, но обязано так работать по причинам безопасности.

                Устанавливаем сервис воркер

                -

                В следующий раз, когда страница с сервис-воркером будет запрошена (например когда страница будет перезагружена), сервис-воркер запустится на этой странице и начнет контролировать её. Когда это произойдет, событие install будет вызвано в сервис-воркере; вы можете написать код внутри сервис-воркера, который будет вызван в процессе установки.

                +

                В следующий раз, когда страница с сервис-воркером будет запрошена (например когда страница будет перезагружена), сервис-воркер запустится на этой странице и начнёт контролировать её. Когда это произойдёт, событие install будет вызвано в сервис-воркере; вы можете написать код внутри сервис-воркера, который будет вызван в процессе установки.

                Давайте взглянем на файл сервис-воркера sw.js. Вы можете видеть, что обработчик события install зарегистрирован на self. Ключевое слово self это способ ссылки на глобальную область видимости сервис-воркера из файла с сервис-воркером.

                @@ -733,11 +733,11 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) {

                Отвечаем на последующие запросы

                -

                Когда сервис-воркер зарегистрирован и установлен на странице HTML и сопутствующие ресурсы добавлены в кэш, все практически готово. Нужно сделать еще одну вещь - написать код для ответа на дальнейшие сетевые запросы.

                +

                Когда сервис-воркер зарегистрирован и установлен на странице HTML и сопутствующие ресурсы добавлены в кэш, все практически готово. Нужно сделать ещё одну вещь - написать код для ответа на дальнейшие сетевые запросы.

                -

                Это то, что делает вторая часть кода файла sw.js. Мы добавили еще один обработчик к сервис-воркеру в глобальной области видимости, который запускает функцию-обработчик при событии fetch. Это происходит всякий раз, когда браузер делает запрос ресурса в директорию, где зарегистрирован сервис-воркер.

                +

                Это то, что делает вторая часть кода файла sw.js. Мы добавили ещё один обработчик к сервис-воркеру в глобальной области видимости, который запускает функцию-обработчик при событии fetch. Это происходит всякий раз, когда браузер делает запрос ресурса в директорию, где зарегистрирован сервис-воркер.

                -

                Внутри обработчика, мы сначала выводим в консоль URL запрашиваемого ресурса. Затем отдаем особый ответ на запрос, используя метод {{domxref("FetchEvent.respondWith()")}}.

                +

                Внутри обработчика, мы сначала выводим в консоль URL запрашиваемого ресурса. Затем отдаём особый ответ на запрос, используя метод {{domxref("FetchEvent.respondWith()")}}.

                Внутри блока мы используем {{domxref("CacheStorage.match()")}} чтобы проверить, можно ли найти соответствующий запрос (т.е. совпадение по URL) в кэше. Обещание возвращает найденный ответ или undefined, если ничего не нашлось.

                diff --git a/files/ru/learn/javascript/client-side_web_apis/fetching_data/index.html b/files/ru/learn/javascript/client-side_web_apis/fetching_data/index.html index 63d9010aab..da373e930c 100644 --- a/files/ru/learn/javascript/client-side_web_apis/fetching_data/index.html +++ b/files/ru/learn/javascript/client-side_web_apis/fetching_data/index.html @@ -14,7 +14,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data
                {{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
                -

                Другой очень распространенной задачей в современных веб-сайтах и ​​приложениях является получение отдельных элементов данных с сервера для обновления разделов веб-страницы без необходимости загрузки всей новой страницы. Эта, казалось бы, небольшая деталь оказала огромное влияние на производительность и поведение сайтов, поэтому в этой статье мы объясним концепцию и рассмотрим технологии, которые делают это возможным, например XMLHttpRequest и API Fetch.

                +

                Другой очень распространённой задачей в современных веб-сайтах и ​​приложениях является получение отдельных элементов данных с сервера для обновления разделов веб-страницы без необходимости загрузки всей новой страницы. Эта, казалось бы, небольшая деталь оказала огромное влияние на производительность и поведение сайтов, поэтому в этой статье мы объясним концепцию и рассмотрим технологии, которые делают это возможным, например XMLHttpRequest и API Fetch.

          22. @@ -41,7 +41,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data

          Это привело к созданию технологий, позволяющих веб-страницам запрашивать небольшие фрагменты данных (например, HTML, {{glossary("XML")}}, JSON или обычный текст) и отображать их только при необходимости, помогая решать проблему, описанную выше.

          -

          Это достигается с помощью таких API, как {{domxref("XMLHttpRequest")}} или - более новой - Fetch API. Эти технологии позволяют веб-страницам напрямую обрабатывать запросы HTTP для определенных ресурсов, доступных на сервере, и форматировать результирующие данные по мере необходимости перед их отображением.

          +

          Это достигается с помощью таких API, как {{domxref("XMLHttpRequest")}} или - более новой - Fetch API. Эти технологии позволяют веб-страницам напрямую обрабатывать запросы HTTP для определённых ресурсов, доступных на сервере, и форматировать результирующие данные по мере необходимости перед их отображением.

          Примечание: Вначале эта общая техника была известна как Асинхронный JavaScript и XML (Ajax), поскольку она, как правило, использовала {{domxref("XMLHttpRequest")}} для запроса данных XML. В наши дни это обычно не так (вы, скорее всего, будете использовать XMLHttpRequest или Fetch для запроса JSON), но результат все тот же, и термин «Ajax» по-прежнему часто используется для описания этой техники.

          @@ -60,7 +60,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data
          • Обновления страницы намного быстрее, и вам не нужно ждать перезагрузки страницы, а это означает, что сайт работает быстрее и воспринимается более отзывчивым.
            • -
          • Меньше данных загружается при каждом обновлении, что означает меньшее потребление пропускной способности. Это не может быть такой большой проблемой на рабочем столе в широкополосном подключении, но это серьезная проблема на мобильных устройствах и в развивающихся странах, которые не имеют повсеместного быстрого интернет-сервиса.
            • +
          • Меньше данных загружается при каждом обновлении, что означает меньшее потребление пропускной способности. Это не может быть такой большой проблемой на рабочем столе в широкополосном подключении, но это серьёзная проблема на мобильных устройствах и в развивающихся странах, которые не имеют повсеместного быстрого интернет-сервиса.

          Чтобы ускорить работу, некоторые сайты также сохраняют необходимые файлы и данные на компьютере пользователя при первом обращении к сайту, а это означает, что при последующих посещениях они используют локальные версии вместо загрузки свежих копий,  как при первой загрузке страницы. Содержимое загружается с сервера только при его обновлении.

          @@ -75,14 +75,14 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data

          XMLHttpRequest

          -

          XMLHttpRequest (который часто сокращается до XHR) является довольно старой технологией сейчас - он был изобретен Microsoft в конце 1990-х годов и уже довольно долго стандартизирован в браузерах.

          +

          XMLHttpRequest (который часто сокращается до XHR) является довольно старой технологией сейчас - он был изобретён Microsoft в конце 1990-х годов и уже довольно долго стандартизирован в браузерах.

          1. -

            Чтобы начать этот пример, создайте локальную копию ajax-start.html и четырех текстовых файлов - verse1.txt, verse2.txt, verse3.txt и verse4.txt - в новом каталоге на вашем компьютере. В этом примере мы загрузим другое стихотворение (который вы вполне можете распознать) через XHR, когда он будет выбран в выпадающем меню.

            +

            Чтобы начать этот пример, создайте локальную копию ajax-start.html и четырёх текстовых файлов - verse1.txt, verse2.txt, verse3.txt и verse4.txt - в новом каталоге на вашем компьютере. В этом примере мы загрузим другое стихотворение (который вы вполне можете распознать) через XHR, когда он будет выбран в выпадающем меню.

          2. -

            Внутри элемента {{htmlelement("script")}} добавьте следующий код. В нем хранится ссылка на элементы {{htmlelement("select")}} и {{htmlelement("pre")}} в переменных и определяется {{domxref ("GlobalEventHandlers.onchange", "onchange")}} обработчика событий, так что, когда значение select изменяется, его значение передается вызываемой функции updateDisplay() в качестве параметра.

            +

            Внутри элемента {{htmlelement("script")}} добавьте следующий код. В нем хранится ссылка на элементы {{htmlelement("select")}} и {{htmlelement("pre")}} в переменных и определяется {{domxref ("GlobalEventHandlers.onchange", "onchange")}} обработчика событий, так что, когда значение select изменяется, его значение передаётся вызываемой функции updateDisplay() в качестве параметра.

            var verseChoose = document.querySelector('select');
 var poemDisplay = document.querySelector('pre');
@@ -100,7 +100,7 @@ verseChoose.onchange = function() {
 };
          3. -

            Мы начнем нашу функцию с создания относительного URL-адреса, указывающего на текстовый файл, который мы хотим загрузить и который понадобится нам позже. Значение элемента {{htmlelement("select")}} в любой момент совпадает с текстом внутри выбранного {{htmlelement("option")}} (если вы не укажете другое значение в атрибуте value) - например, «Verse 1». Соответствующий текстовый файл стиха является «verse1.txt» и находится в том же каталоге, что и файл HTML, поэтому будет использоваться только имя файла.

            +

            Мы начнём нашу функцию с создания относительного URL-адреса, указывающего на текстовый файл, который мы хотим загрузить и который понадобится нам позже. Значение элемента {{htmlelement("select")}} в любой момент совпадает с текстом внутри выбранного {{htmlelement("option")}} (если вы не укажете другое значение в атрибуте value) - например, «Verse 1». Соответствующий текстовый файл стиха является «verse1.txt» и находится в том же каталоге, что и файл HTML, поэтому будет использоваться только имя файла.

            Тем не менее, веб-серверы, как правило, чувствительны к регистру, и имя файла не имеет символа "пробела". Чтобы преобразовать «Verse 1» в «verse1.txt», нам нужно преобразовать V в нижний регистр, удалить пробел и добавить .txt в конец. Это можно сделать с помощью {{jsxref("String.replace", "replace ()")}}, {{jsxref("String.toLowerCase", "toLowerCase ()")}} и простой конкатенации строк. Добавьте следующие строки внутри функции updateDisplay():

            @@ -114,7 +114,7 @@ var url = verse + '.txt'; 
            var request = new XMLHttpRequest();
          4. -

            Затем вам нужно использовать метод {{domxref("XMLHttpRequest.open", "open()")}}, чтобы указать, какой HTTP request method использовать для запроса ресурса из сети и какой его URL-адрес. Мы просто используем метод GET здесь и задаем URL как нашу переменную url. Добавьте это ниже вашей предыдущей строки:

            +

            Затем вам нужно использовать метод {{domxref("XMLHttpRequest.open", "open()")}}, чтобы указать, какой HTTP request method использовать для запроса ресурса из сети и какой его URL-адрес. Мы просто используем метод GET здесь и задаём URL как нашу переменную url. Добавьте это ниже вашей предыдущей строки:

            request.open('GET', url);
            5. @@ -124,7 +124,7 @@ var url = verse + '.txt'; 
            request.responseType = 'text';
          5. -

            Получение ресурса из сети - это {{glossary("asynchronous")}} операция, означающая, что вам нужно дождаться завершения этой операции (например, ресурс возвращается из сети), прежде чем вы сможете сделать что-либо с этим ответом, иначе будет выброшена ошибка. XHR позволяет вам обрабатывать это, используя обработчик события {{domxref("XMLHttpRequest.onload", "onload")}} - он запускается при возникновении события {{event("load")}} (когда ответ вернулся). Когда это произойдет, данные ответа будут доступны в свойстве response (ответ) объекта запроса XHR.

            +

            Получение ресурса из сети - это {{glossary("asynchronous")}} операция, означающая, что вам нужно дождаться завершения этой операции (например, ресурс возвращается из сети), прежде чем вы сможете сделать что-либо с этим ответом, иначе будет выброшена ошибка. XHR позволяет вам обрабатывать это, используя обработчик события {{domxref("XMLHttpRequest.onload", "onload")}} - он запускается при возникновении события {{event("load")}} (когда ответ вернулся). Когда это произойдёт, данные ответа будут доступны в свойстве response (ответ) объекта запроса XHR.

            Добавьте следующее ниже вашего последнего дополнения. Вы увидите, что внутри обработчика события onload мы устанавливаем textContent poemDisplay (элемент {{htmlelement("pre")}}) в значение {{domxref("XMLHttpRequest.response", "request. response ")}}.

            @@ -133,7 +133,7 @@ var url = verse + '.txt'; };
          6. -

            Вышеприведенная конфигурация запроса XHR  фактически не будет выполняться до тех пор, пока мы не вызовем метод {{domxref("XMLHttpRequest.send", "send()")}}. Добавьте следующее ниже вашего предыдущего дополнения для вызова функции:

            +

            Вышеприведённая конфигурация запроса XHR  фактически не будет выполняться до тех пор, пока мы не вызовем метод {{domxref("XMLHttpRequest.send", "send()")}}. Добавьте следующее ниже вашего предыдущего дополнения для вызова функции:

            request.send();
            7. @@ -159,7 +159,7 @@ verseChoose.value = 'Verse 1';
            1. -

              Сделайте копию своего предыдущего готового каталога примеров. (Если вы не работали над предыдущим упражнением, создайте новый каталог и внутри него создайте копии xhr-basic.html и четырех текстовых файлов — verse1.txt, verse2.txt, verse3.txt и verse4.txt.)

              +

              Сделайте копию своего предыдущего готового каталога примеров. (Если вы не работали над предыдущим упражнением, создайте новый каталог и внутри него создайте копии xhr-basic.html и четырёх текстовых файлов — verse1.txt, verse2.txt, verse3.txt и verse4.txt.)

            2. Внутри функции updateDisplay() найдите код XHR:

              @@ -192,9 +192,9 @@ request.send();

              Прежде всего, мы вызываем метод {{domxref("WorkerOrWindowGlobalScope.fetch()", "fetch()")}}, передавая ему URL-адрес ресурса, который мы хотим получить. Это современный эквивалент {{domxref("XMLHttpRequest.open", "request.open()")}} в XHR, плюс вам не нужен эквивалент .send().

              -

              После этого вы можете увидеть метод {{jsxref("Promise.then", ".then()")}}, прикреплённый в конец fetch() - этот метод является частью {{jsxref("Promise","Promises")}} - современная функция JavaScript для выполнения асинхронных операций. fetch() возвращает обещание, которое разрешает ответ, отправленный обратно с сервера, - мы используем .then() для запуска некоторого последующего кода после того, как обещание будет разрешено, что является функцией, которую мы определили внутри нее. Это эквивалент обработчика события onload в XHR-версии.

              +

              После этого вы можете увидеть метод {{jsxref("Promise.then", ".then()")}}, прикреплённый в конец fetch() - этот метод является частью {{jsxref("Promise","Promises")}} - современная функция JavaScript для выполнения асинхронных операций. fetch() возвращает обещание, которое разрешает ответ, отправленный обратно с сервера, - мы используем .then() для запуска некоторого последующего кода после того, как обещание будет разрешено, что является функцией, которую мы определили внутри неё. Это эквивалент обработчика события onload в XHR-версии.

              -

              Эта функция автоматически передает ответ от сервера в качестве параметра, когда обещает fetch(). Внутри функции мы берем ответ и запускаем его метод {{domxref("Body.text", "text()")}}, который в основном возвращает ответ как необработанный текст. Это эквивалент request.responseType = 'text' в версии XHR.

              +

              Эта функция автоматически передаёт ответ от сервера в качестве параметра, когда обещает fetch(). Внутри функции мы берём ответ и запускаем его метод {{domxref("Body.text", "text()")}}, который в основном возвращает ответ как необработанный текст. Это эквивалент request.responseType = 'text' в версии XHR.

              Вы увидите, что text()также возвращает обещание, поэтому мы привязываем к нему другой .then(), внутри которого мы определяем функцию для получения необработанного текста, который обещает решение text().

              @@ -204,7 +204,7 @@ request.send();

              Обещания немного запутывают первый раз, когда вы их встречаете, но не беспокойтесь об этом слишком долго. Через некоторое время вы привыкнете к ним, особенно, когда вы узнаете больше о современных JavaScript-API. Большинство из них в большей степени основаны на обещаниях.

              -

              Давайте посмотрим на структуру обещаний сверху, чтобы увидеть, можем ли мы еще немного понять это:

              +

              Давайте посмотрим на структуру обещаний сверху, чтобы увидеть, можем ли мы ещё немного понять это:

              fetch(url).then(function(response) {
   response.text().then(function(text) {
@@ -214,7 +214,7 @@ request.send();

              В первой строке говорится: «Получить ресурс, расположенный по адресу url» (fetch(url)) и «затем запустить указанную функцию, когда обещание будет разрешено» (.then(function() { ... })). «Resolve» означает «завершить выполнение указанной операции в какой-то момент в будущем». Указанная операция в этом случае заключается в извлечении ресурса с указанного URL (с использованием HTTP-запроса) и возврата ответа для нас, чтобы что-то сделать.

              -

              Фактически, функция, переданная в then(), представляет собой кусок кода, который не запускается немедленно - вместо этого он будет работать в какой-то момент в будущем, когда ответ будет возвращен. Обратите внимание, что вы также можете сохранить свое обещание в переменной и цепочку {{jsxref("Promise.then", ".then()")}} вместо этого. Ниже код будет делать то же самое:

              +

              Фактически, функция, переданная в then(), представляет собой кусок кода, который не запускается немедленно - вместо этого он будет работать в какой-то момент в будущем, когда ответ будет возвращён. Обратите внимание, что вы также можете сохранить своё обещание в переменной и цепочку {{jsxref("Promise.then", ".then()")}} вместо этого. Ниже код будет делать то же самое:

              var myFetch = fetch(url);
 
@@ -224,7 +224,7 @@ myFetch.then(function(response) {
   });
 });
              -

              Поскольку метод fetch() возвращает обещание, которое разрешает HTTP-ответ, любая функция, которую вы определяете внутри .then(), прикованная к концу, будет автоматически передаваться как параметр. Вы можете вызвать параметр, который вам нравится - приведенный ниже пример будет работать:

              +

              Поскольку метод fetch() возвращает обещание, которое разрешает HTTP-ответ, любая функция, которую вы определяете внутри .then(), прикованная к концу, будет автоматически передаваться как параметр. Вы можете вызвать параметр, который вам нравится - приведённый ниже пример будет работать:

              fetch(url).then(function(dogBiscuits) {
   dogBiscuits.text().then(function(text) {
@@ -258,15 +258,15 @@ myFetch.then(function(response) {
 
 
              Какой механизм следует использовать?
              
 
-
              Это действительно зависит от того, над каким проектом вы работаете. XHR существует уже давно и имеет отличную кросс-браузерную поддержку. Fetch and Promises, с другой стороны, являются более поздним дополнением к веб-платформе, хотя они хорошо поддерживаются в браузере, за исключением Internet Explorer и Safari (которые на момент написания Fetch были доступны в своем предварительный просмотр технологии).
              
+
              Это действительно зависит от того, над каким проектом вы работаете. XHR существует уже давно и имеет отличную кросс-браузерную поддержку. Fetch and Promises, с другой стороны, являются более поздним дополнением к веб-платформе, хотя они хорошо поддерживаются в браузере, за исключением Internet Explorer и Safari (которые на момент написания Fetch были доступны в своём предварительный просмотр технологии).
              
 
 
              Если вам необходимо поддерживать старые браузеры, тогда может быть предпочтительным решение XHR. Если, однако, вы работаете над более прогрессивным проектом и не так обеспокоены старыми браузерами, то Fetch может быть хорошим выбором.
              
 
-
              Вам действительно нужно учиться - Fetch станет более популярным, так как Internet Explorer отказывается от использования (IE больше не разрабатывается, в пользу нового браузера Microsoft Edge), но вам может понадобиться XHR еще некоторое время.
              
+
              Вам действительно нужно учиться - Fetch станет более популярным, так как Internet Explorer отказывается от использования (IE больше не разрабатывается, в пользу нового браузера Microsoft Edge), но вам может понадобиться XHR ещё некоторое время.
              
 
 
              Более сложный пример
              
 
-
              Чтобы завершить статью, мы рассмотрим несколько более сложный пример, который показывает более интересные применения Fetch. Мы создали образец сайта под названием The Can Store - это вымышленный супермаркет, который продает только консервы. Вы можете найти этот пример в прямом эфире на GitHub и посмотреть исходный код.
              
+
              Чтобы завершить статью, мы рассмотрим несколько более сложный пример, который показывает более интересные применения Fetch. Мы создали образец сайта под названием The Can Store - это вымышленный супермаркет, который продаёт только консервы. Вы можете найти этот пример в прямом эфире на GitHub и посмотреть исходный код.
              
 
 
              A fake ecommerce site showing search options in the left hand column, and product search results in the right hand column.
              
 
@@ -289,7 +289,7 @@ myFetch.then(function(response) {
   }
 });
              -

              Это похоже на то, что мы видели раньше, за исключением того, что второе обещание находится в условном выражении. В этом случае мы проверяем, был ли возвращенный ответ успешным - свойство {{domxref("response.ok")}} содержит логическое значение, которое true, если ответ был в порядке (например, 200 meaning "OK") или false, если он не увенчался успехом.

              +

              Это похоже на то, что мы видели раньше, за исключением того, что второе обещание находится в условном выражении. В этом случае мы проверяем, был ли возвращённый ответ успешным - свойство {{domxref("response.ok")}} содержит логическое значение, которое true, если ответ был в порядке (например, 200 meaning "OK") или false, если он не увенчался успехом.

              Если ответ был успешным, мы выполняем второе обещание - на этот раз мы используем {{domxref("Body.json", "json()")}}, а не {{domxref("Body.text", "text()")}}, так как мы хотим вернуть наш ответ как структурированные данные JSON, а не обычный текст.

              @@ -300,7 +300,7 @@ myFetch.then(function(response) {
              1. Создание локальной копии файлов примеров (загрузка и распаковка the can-store ZIP file)
              2. Запустите код через веб-сервер (как описано выше, в {{anch("Serving your example from a server")}})
                3. -
              3. Измените путь к извлеченному файлу, например, «product.json» (т.е. убедитесь, что он написан неправильно)
                4. +
              4. Измените путь к извлечённому файлу, например, «product.json» (т.е. убедитесь, что он написан неправильно)
              5. Теперь загрузите индексный файл в свой браузер (например, через localhost:8000) и посмотрите в консоли разработчика браузера. Вы увидите сообщение в строке «Запрос сети для продуктов.json не удалось с ответом 404: Файл не найден»
              @@ -319,7 +319,7 @@ myFetch.then(function(response) {

              Это работает во многом так же, как и предыдущий, за исключением того, что вместо использования {{domxref("Body.json", "json()")}} мы используем {{domxref("Body.blob", "blob()")}} - в этом случае мы хотим вернуть наш ответ в виде файла изображения, а формат данных, который мы используем для этого - Blob - этот термин является аббревиатурой от« Binary Large Object »и может в основном использоваться для представляют собой большие файловые объекты, такие как изображения или видеофайлы.

              -

              После того как мы успешно получили наш blob, мы создаем URL-адрес объекта, используя {{domxref("URL.createObjectURL()", "createObjectURL()")}}. Это возвращает временный внутренний URL-адрес, указывающий на объект, указанный в браузере. Они не очень читаемы, но вы можете видеть, как выглядит, открывая приложение Can Store, Ctrl-/щелкнуть правой кнопкой мыши по изображению и выбрать опцию «Просмотр изображения» (которая может немного отличаться в зависимости от того, какой браузер вы ). URL-адрес объекта будет отображаться внутри адресной строки и должен выглядеть примерно так:

              +

              После того как мы успешно получили наш blob, мы создаём URL-адрес объекта, используя {{domxref("URL.createObjectURL()", "createObjectURL()")}}. Это возвращает временный внутренний URL-адрес, указывающий на объект, указанный в браузере. Они не очень читаемы, но вы можете видеть, как выглядит, открывая приложение Can Store, Ctrl-/щёлкнуть правой кнопкой мыши по изображению и выбрать опцию «Просмотр изображения» (которая может немного отличаться в зависимости от того, какой браузер вы ). URL-адрес объекта будет отображаться внутри адресной строки и должен выглядеть примерно так:

              blob:http://localhost:7800/9b75250e-5279-e249-884f-d03eb1fd84f4
              diff --git a/files/ru/learn/javascript/client-side_web_apis/index.html b/files/ru/learn/javascript/client-side_web_apis/index.html index b5e7493f19..ed8a1b0a19 100644 --- a/files/ru/learn/javascript/client-side_web_apis/index.html +++ b/files/ru/learn/javascript/client-side_web_apis/index.html @@ -21,7 +21,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs ---
              {{LearnSidebar}}
              -

              При написании клиентского JavaScript для приложений или веб-сайтов Вам не приходится слишком сильно углубляться, пока Вы не начнете использовать API — интерфейсы управления различными аспектами браузера или операционной системы на которой этот сайт работает, или же с данными с других веб-сайтов или сервисов. В этом модуле мы рассмотрим что API из себя представляет и как использовать самые распространенные из них, с которыми Вы можете столкнуться в разработке.

              +

              При написании клиентского JavaScript для приложений или веб-сайтов Вам не приходится слишком сильно углубляться, пока Вы не начнёте использовать API — интерфейсы управления различными аспектами браузера или операционной системы на которой этот сайт работает, или же с данными с других веб-сайтов или сервисов. В этом модуле мы рассмотрим что API из себя представляет и как использовать самые распространённые из них, с которыми Вы можете столкнуться в разработке.

              Прежде чем начать

              @@ -37,11 +37,11 @@ translation_of: Learn/JavaScript/Client-side_web_APIs
              Введение в различные web API
              -
              Прежде всего, мы начнем изучение API с основ - что это такое, как это работает, как вы используете их в своем коде и как они структурированы? Мы также рассмотрим, что представляют собой различные основные классы API, и как их можно использовать.
              +
              Прежде всего, мы начнём изучение API с основ - что это такое, как это работает, как вы используете их в своём коде и как они структурированы? Мы также рассмотрим, что представляют собой различные основные классы API, и как их можно использовать.
              Управление документами
              При написании веб-страниц и приложений Вы чаще всего будете управлять каким-либо образом веб-документами.  Обычно это делается с помощью Document Object Model (DOM), набора API-интерфейсов для управления HTML-разметкой и стилями, которые используют объект {{domxref ("Document")}}. В этой статье мы рассмотрим, как использовать DOM, а также некоторые интересные API, которые могут изменить рабочую среду интересными способами.
              Получение данных с сервера
              -
              Другой очень распространенной задачей в современных веб-сайтах и приложениях является получение отдельных элементов данных с сервера для обновления разделов веб-страницы без необходимости загрузки абсолютно новой страницы. Эта, казалось бы, небольшая деталь оказала огромное влияние на производительность и поведение сайтов, поэтому в этой статье мы объясним концепцию и рассмотрим технологии, которые позволяют это, например {{domxref("XMLHttpRequest")}} и Fetch API.
              +
              Другой очень распространённой задачей в современных веб-сайтах и приложениях является получение отдельных элементов данных с сервера для обновления разделов веб-страницы без необходимости загрузки абсолютно новой страницы. Эта, казалось бы, небольшая деталь оказала огромное влияние на производительность и поведение сайтов, поэтому в этой статье мы объясним концепцию и рассмотрим технологии, которые позволяют это, например {{domxref("XMLHttpRequest")}} и Fetch API.
              Сторонние API
              API, которые мы рассматривали до сих пор, встроены в браузер, но не все API встроены в браузер. Многие крупные веб-сайты и сервисы, такие как Google Maps, Twitter, Facebook, PayPal и т.д. предоставляют API-интерфейсы, позволяющие разработчикам использовать свои данные (например, показывать ваш Twitter-поток в вашем блоге) или сервисы (например, отображение пользовательских карт Google на вашем сайте, или с помощью входа в систему Facebook для входа в систему пользователей). В этой статье рассматривается различие между API браузера и сторонними API и показано типичное использование последнего.
              Рисование графики
              diff --git a/files/ru/learn/javascript/client-side_web_apis/introduction/index.html b/files/ru/learn/javascript/client-side_web_apis/introduction/index.html index 089ee32bab..322ff509a5 100644 --- a/files/ru/learn/javascript/client-side_web_apis/introduction/index.html +++ b/files/ru/learn/javascript/client-side_web_apis/introduction/index.html @@ -43,7 +43,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction

              Для JavaScript на стороне клиента, в частности, существует множество API. Они не являются частью языка, а построены с помощью встроенных функций JavaScript для того, чтобы увеличить ваши возможности при написании кода. Их можно разделить на две категории:

                -
              • API браузера встроены в веб-браузер и способны использовать данные браузера и компьютерной среды для осуществления более сложных действий с этими данными. К примеру, API Геолокации (Geolocation API) предоставляет простые в использовании конструкции JavaScript для работы с данными местоположения, так что вы сможете, допустим, отметить свое расположение на карте Google Map. На самом деле, в браузере выполняется сложный низкоуровневый код (например, на C++) для подключения к устройству GPS (или любому другому устройству геолокации), получения данных и передачи их браузеру для обработки вашей программой, но, как было сказано выше, эти детали скрыты благодаря API.
                • +
              • API браузера встроены в веб-браузер и способны использовать данные браузера и компьютерной среды для осуществления более сложных действий с этими данными. К примеру, API Геолокации (Geolocation API) предоставляет простые в использовании конструкции JavaScript для работы с данными местоположения, так что вы сможете, допустим, отметить своё расположение на карте Google Map. На самом деле, в браузере выполняется сложный низкоуровневый код (например, на C++) для подключения к устройству GPS (или любому другому устройству геолокации), получения данных и передачи их браузеру для обработки вашей программой, но, как было сказано выше, эти детали скрыты благодаря API.
              • Сторонние API не встроены в браузер по умолчанию. Такие API и информацию о них обычно необходимо искать в интернете. Например, Twitter API позволяет размещать последние твиты (tweets) на вашем веб-сайте. В данном API определён набор конструкций, осуществляющих запросы к сервисам Twitter и возвращающих определённые данные.
              diff --git a/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.html index a0e35bc998..f9ce1ece00 100644 --- a/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.html +++ b/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -31,9 +31,9 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents

              Важные элементы веб-браузера

              -

              Веб-браузеры - очень сложные части программного обеспечения с множеством движущихся частей, многие из которых не могут управляться или управляться веб-разработчиком с использованием JavaScript. Вы можете подумать, что такие ограничения - это плохо, но браузеры заблокированы по уважительным причинам (в основном ради безопасности). Представьте себе, что веб-сайт может получить доступ к вашим сохраненным паролям или другой конфиденциальной информации и войти на веб-сайты так, как если бы это были вы?

              +

              Веб-браузеры - очень сложные части программного обеспечения с множеством движущихся частей, многие из которых не могут управляться или управляться веб-разработчиком с использованием JavaScript. Вы можете подумать, что такие ограничения - это плохо, но браузеры заблокированы по уважительным причинам (в основном ради безопасности). Представьте себе, что веб-сайт может получить доступ к вашим сохранённым паролям или другой конфиденциальной информации и войти на веб-сайты так, как если бы это были вы?

              -

              Несмотря на ограничения, Web API по-прежнему дают нам доступ к множеству функциональных возможностей, которые позволяют нам многое делать с веб-страницами. Есть несколько действительно очевидных моментов, на которые вы будете регулярно ссылаться в своем коде. Рассмотрим следующую диаграмму, которая представляет основные части браузера, непосредственно участвующие в просмотре веб-страниц:

              +

              Несмотря на ограничения, Web API по-прежнему дают нам доступ к множеству функциональных возможностей, которые позволяют нам многое делать с веб-страницами. Есть несколько действительно очевидных моментов, на которые вы будете регулярно ссылаться в своём коде. Рассмотрим следующую диаграмму, которая представляет основные части браузера, непосредственно участвующие в просмотре веб-страниц:

              @@ -49,7 +49,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents

              Документ, загруженный в каждый из ваших вкладок браузера, представлен объектной моделью документа. Это представление «древовидной структуры», созданное браузером, которое позволяет легко получить доступ к структуре HTML с помощью языков программирования - например, сам браузер использует его для применения стиля и другой информации к правильным элементам, поскольку он отображает страницу, а разработчики (как Вы) могут манипулировать DOM с JavaScript после того, как страница была отображена.

              -

              Мы создали простую страницу примера в dom-example.html (см. также live). Попробуйте открыть это в своем браузере - это очень простая страница, содержащая элемент {{htmlelement("section")}}, внутри которого вы можете найти изображение и абзац со ссылкой внутри. Исходный код HTML выглядит так:

              +

              Мы создали простую страницу примера в dom-example.html (см. также live). Попробуйте открыть это в своём браузере - это очень простая страница, содержащая элемент {{htmlelement("section")}}, внутри которого вы можете найти изображение и абзац со ссылкой внутри. Исходный код HTML выглядит так:

              <!DOCTYPE html>
 <html>
@@ -73,23 +73,23 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
 
              Примечание. Эта диаграмма дерева DOM была создана с использованием Live DOM viewer Яна Хиксона.
          -

          Вы можете видеть здесь, что каждый элемент и бит текста в документе имеют свою собственную запись в дереве - каждый из них называется узлом (node). Вы также столкнетесь с различными терминами, используемыми для описания типа узла, и их положением в дереве относительно друг друга:

          +

          Вы можете видеть здесь, что каждый элемент и бит текста в документе имеют свою собственную запись в дереве - каждый из них называется узлом (node). Вы также столкнётесь с различными терминами, используемыми для описания типа узла, и их положением в дереве относительно друг друга:

          • Element node: элемент, как он существует в DOM.
          • Root node: верхний узел в дереве, который в случае HTML всегда является узлом HTML (другие словари разметки, такие как SVG и пользовательский XML, будут иметь разные корневые элементы)..
            • -
          • Child node: узел непосредственно внутри другого узла. Например, IMG является дочерним элементом SECTION в приведенном выше примере.
            • -
          • Descendant node (узел потомок): узел внутри дочернего элемента. Например, IMG является дочерним элементом SECTION в приведенном выше примере, и он также является потомком для родителя SECTION. IMG не является ребенком BODY, так как он находится на двух уровнях ниже дерева в дереве, но он является потомком BODY.
            • -
          • Parent node: узел, в котором текущий узел. Например, BODY является родительским узлом SECTION в приведенном выше примере.
            • -
          • Sibling nodes (одноуровневый узел): узлы, которые расположены на одном уровне в дереве DOM. Например, IMG и P являются братьями и сестрами в приведенном выше примере.
            • +
          • Child node: узел непосредственно внутри другого узла. Например, IMG является дочерним элементом SECTION в приведённом выше примере.
            • +
          • Descendant node (узел потомок): узел внутри дочернего элемента. Например, IMG является дочерним элементом SECTION в приведённом выше примере, и он также является потомком для родителя SECTION. IMG не является ребёнком BODY, так как он находится на двух уровнях ниже дерева в дереве, но он является потомком BODY.
            • +
          • Parent node: узел, в котором текущий узел. Например, BODY является родительским узлом SECTION в приведённом выше примере.
            • +
          • Sibling nodes (одноуровневый узел): узлы, которые расположены на одном уровне в дереве DOM. Например, IMG и P являются братьями и сёстрами в приведённом выше примере.
          • Text node: узел, содержащий текстовую строку.
          -

          Полезно ознакомиться с этой терминологией перед тем, как работать с DOM, поскольку некоторые термины кода, с которыми вы столкнетесь, используют их.. Возможно, вы уже сталкивались с ними, если вы изучали CSS (например, селектор потомков, дочерний селектор).

          +

          Полезно ознакомиться с этой терминологией перед тем, как работать с DOM, поскольку некоторые термины кода, с которыми вы столкнётесь, используют их.. Возможно, вы уже сталкивались с ними, если вы изучали CSS (например, селектор потомков, дочерний селектор).

          Активное обучение: основы управления структурой DOM

          -

          Чтобы начать изучение по управлению структуры DOM, давайте начнем с практического примера.

          +

          Чтобы начать изучение по управлению структуры DOM, давайте начнём с практического примера.

          1. Возьмите локальную копию страницы dom-example.html page и изображение, которое вместе с ним.
            2. @@ -97,7 +97,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
          2. Чтобы управлять элементом внутри DOM, вам сначала нужно выбрать его и сохранить ссылку на него внутри переменной. Внутри вашего скриптового элемента добавьте следующую строку: 
            var link = document.querySelector('a');
            3. -
          3. Теперь у нас есть ссылка на элемент, хранящаяся в переменной, мы можем начать ее манипулировать с использованием доступных ему свойств и методов (они определены на таких интерфейсах, как {{domxref("HTMLAnchorElement")}} в случае {{htmlelement ("a")}}, его более общий родительский интерфейс {{domxref ("HTMLElement")}} и {{domxref("Node")}} - который представляет все узлы в DOM). Прежде всего, давайте изменим текст внутри ссылки, обновив значение свойства {{domxref("Node.textContent")}}. Добавьте следующую строку ниже предыдущей: +
          4. Теперь у нас есть ссылка на элемент, хранящаяся в переменной, мы можем начать её манипулировать с использованием доступных ему свойств и методов (они определены на таких интерфейсах, как {{domxref("HTMLAnchorElement")}} в случае {{htmlelement ("a")}}, его более общий родительский интерфейс {{domxref ("HTMLElement")}} и {{domxref("Node")}} - который представляет все узлы в DOM). Прежде всего, давайте изменим текст внутри ссылки, обновив значение свойства {{domxref("Node.textContent")}}. Добавьте следующую строку ниже предыдущей: 
            link.textContent = 'Mozilla Developer Network';
          5. Мы также должны изменить URL-адрес, на который указывает ссылка, чтобы он не попадал в неправильное место при нажатии. Добавьте следующую строку, опять внизу: @@ -111,8 +111,8 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents

            Существуют более старые методы для захвата ссылок на элементы, например:

              -
            • {{domxref("Document.getElementById()")}}, который выбирает элемент с заданным значением атрибута id, например <p id="myId">Мой абзац</p>. Идентификатор передается функции как параметр, т.е. var elementRef = document.getElementById('myId').
              • -
            • {{domxref("Document.getElementsByTagName()")}}, который возвращает массив, содержащий все элементы на странице данного типа, например <p>, <a> и т.д. Тип элемента передается к функции в качестве параметра, то есть var elementRefArray = document.getElementsByTagName('p').
              • +
            • {{domxref("Document.getElementById()")}}, который выбирает элемент с заданным значением атрибута id, например <p id="myId">Мой абзац</p>. Идентификатор передаётся функции как параметр, т.е. var elementRef = document.getElementById('myId').
              • +
            • {{domxref("Document.getElementsByTagName()")}}, который возвращает массив, содержащий все элементы на странице данного типа, например <p>, <a> и т.д. Тип элемента передаётся к функции в качестве параметра, то есть var elementRefArray = document.getElementsByTagName('p').

            Эти два работают в более старых браузерах, чем современные методы, такие как querySelector(), но не так удобны. Осмотритесь и вы увидите, что ещё можно найти!

            @@ -123,7 +123,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents

            Вышесказанное дало вам немного вкуса от того, что вы можете сделать, но давайте продолжим и посмотрим, как мы можем создавать новые элементы.

              -
            1. Возвращаясь к текущему примеру, давайте начнем с захвата ссылки на наш элемент {{htmlelement("section")}} - добавьте следующий код внизу существующего скрипта (сделайте то же самое с другими строками): +
            2. Возвращаясь к текущему примеру, давайте начнём с захвата ссылки на наш элемент {{htmlelement("section")}} - добавьте следующий код внизу существующего скрипта (сделайте то же самое с другими строками): 
              var sect = document.querySelector('section');
            3. Теперь давайте создадим новый абзац, используя {{domxref("Document.createElement()")}} и передадим ему текстовое содержимое так же, как и раньше: @@ -136,7 +136,7 @@ para.textContent = 'We hope you enjoyed the ride.';
            4. Наконец, для этой части, давайте добавим текстовый узел в абзац, где находится ссылка, чтобы оформить предложение красиво. Сначала мы создадим текстовый узел, используя {{domxref("Document.createTextNode()")}}: 
              var text = document.createTextNode(' — the premier source for web development knowledge.');
              5. -
            5. Теперь мы возьмем ссылку на абзац, в котором находится ссылка, и добавим к нему текстовый узел: +
            6. Теперь мы возьмём ссылку на абзац, в котором находится ссылка, и добавим к нему текстовый узел: 
              var linkPara = document.querySelector('p');
 linkPara.appendChild(text);
              7. @@ -152,7 +152,7 @@ linkPara.appendChild(text); 
              sect.appendChild(linkPara);
              -

              Это переводит абзац вниз в нижнюю часть раздела. Вы могли подумать, что это сделает вторую копию, но это не так - linkPara - ссылка на единственную копию этого абзаца. Если вы хотите сделать копию и добавить ее также, вам нужно будет использовать {{domxref("Node.cloneNode()")}}.

              +

              Это переводит абзац вниз в нижнюю часть раздела. Вы могли подумать, что это сделает вторую копию, но это не так - linkPara - ссылка на единственную копию этого абзаца. Если вы хотите сделать копию и добавить её также, вам нужно будет использовать {{domxref("Node.cloneNode()")}}.

              Удаление узла довольно просто, по крайней мере, когда у вас есть ссылка на удаляемый узел и его родительский элемент. В нашем случае мы просто используем {{domxref("Node.removeChild()")}}, например:

              @@ -168,7 +168,7 @@ linkPara.appendChild(text);

              Можно управлять стилями CSS с помощью JavaScript различными способами.

              -

              Для начала вы можете получить список всех таблиц стилей, прикрепленных к документу, с помощью {{domxref("Document.stylesheets")}}, который возвращает массив объектов {{domxref("CSSStyleSheet")}}. Затем вы можете добавлять / удалять стили по желанию. Однако мы не будем расширять эти функции, потому что они являются несколько архаичным и трудным способом манипулирования стилем. Есть гораздо более простые способы.

              +

              Для начала вы можете получить список всех таблиц стилей, прикреплённых к документу, с помощью {{domxref("Document.stylesheets")}}, который возвращает массив объектов {{domxref("CSSStyleSheet")}}. Затем вы можете добавлять / удалять стили по желанию. Однако мы не будем расширять эти функции, потому что они являются несколько архаичным и трудным способом манипулирования стилем. Есть гораздо более простые способы.

              Первый способ - добавить встроенные стили непосредственно на элементы, которые вы хотите динамически стилизовать. Это делается с помощью свойства {{domxref("HTMLElement.style")}}, которое содержит встроенную информацию о стиле для каждого элемента документа. Вы можете установить свойства этого объекта для непосредственного обновления стилей элементов.

              @@ -189,7 +189,7 @@ para.style.textAlign = 'center';

              Примечание: Обратите внимание на то, как версии свойств JavaScript стилей CSS пишутся в нижнем регистре верблюжьего стиля (lower camel case), в то время как версии свойств стилей CSS используют дефисы  (например, backgroundColor и background-color). Убедитесь, что вы не перепутали их, иначе это не сработает.

              -

              Существует еще один распространенный способ динамического управления стилями вашего документа, который мы рассмотрим сейчас.

              +

              Существует ещё один распространённый способ динамического управления стилями вашего документа, который мы рассмотрим сейчас.

              1. Удалите предыдущие пять строк, добавленных в JavaScript.
                2. @@ -204,17 +204,17 @@ para.style.textAlign = 'center'; } </style> -
              2. Теперь мы перейдем к очень полезному методу для общего манипулирования HTML - {{domxref("Element.setAttribute()")}} - это принимает два аргумента, атрибут, который вы хотите установить для элемента, и значение, которое вы хотите для его установки. В этом случае мы укажем имя класса выделения в нашем абзаце: +
              3. Теперь мы перейдём к очень полезному методу для общего манипулирования HTML - {{domxref("Element.setAttribute()")}} - это принимает два аргумента, атрибут, который вы хотите установить для элемента, и значение, которое вы хотите для его установки. В этом случае мы укажем имя класса выделения в нашем абзаце: 
                para.setAttribute('class', 'highlight');
              4. Обновите свою страницу, и вы не увидите изменений - CSS по-прежнему применяется к абзацу, но на этот раз, предоставив ему класс, который выбран нашим правилом CSS, а не как встроенные стили CSS.
              -

              Какой метод вы выбираете, зависит от вас; оба имеют свои преимущества и недостатки. Первый метод принимает меньше настроек и хорош для простого использования, тогда как второй метод более пурист (без смешивания CSS и JavaScript, без встроенных стилей, которые рассматриваются как плохая практика). Когда вы начнете создавать более крупные приложения, вы, вероятно, начнете использовать второй метод больше, но это действительно зависит от вас.

              +

              Какой метод вы выбираете, зависит от вас; оба имеют свои преимущества и недостатки. Первый метод принимает меньше настроек и хорош для простого использования, тогда как второй метод более пурист (без смешивания CSS и JavaScript, без встроенных стилей, которые рассматриваются как плохая практика). Когда вы начнёте создавать более крупные приложения, вы, вероятно, начнёте использовать второй метод больше, но это действительно зависит от вас.

              На данный момент мы не сделали ничего полезного! Нет смысла использовать JavaScript для создания статического контента - вы можете просто записать его в свой HTML и не использовать JavaScript. Это сложнее, чем HTML, и для создания вашего контента с помощью JavaScript также есть другие связанные с ним проблемы (например, не читаемые поисковыми системами).

              -

              В следующих параграфах мы рассмотрим еще несколько практических применений DOM API.

              +

              В следующих параграфах мы рассмотрим ещё несколько практических применений DOM API.

              Примечание. Вы можете найти наш пример finished version of the dom-example.html на GitHub (см. также live).

              @@ -222,14 +222,14 @@ para.style.textAlign = 'center';

              Активное обучение: динамический список покупок

              -

              До сих пор мы действительно смотрели на использование функций {{domxref("Node")}} и {{domxref("Document")}} для управления документами, но нет причин, по которым вы не можете получить данные из других источников и использовать его в пользовательском интерфейсе. Вспомните нашу простую демонстрацию maps-example.html из последней статьи - там мы извлекли некоторые данные о местоположении и использовали ее для отображения карты вашей области. Вам просто нужно убедиться, что ваши данные в правильном формате; JavaScript упрощает работу, чем многие другие языки, будучи слабо типизированным - например, числа автоматически преобразуются в строки, когда вы хотите распечатать их на экране.

              +

              До сих пор мы действительно смотрели на использование функций {{domxref("Node")}} и {{domxref("Document")}} для управления документами, но нет причин, по которым вы не можете получить данные из других источников и использовать его в пользовательском интерфейсе. Вспомните нашу простую демонстрацию maps-example.html из последней статьи - там мы извлекли некоторые данные о местоположении и использовали её для отображения карты вашей области. Вам просто нужно убедиться, что ваши данные в правильном формате; JavaScript упрощает работу, чем многие другие языки, будучи слабо типизированным - например, числа автоматически преобразуются в строки, когда вы хотите распечатать их на экране.

              В этом примере мы решим общую проблему: убедитесь, что ваше приложение имеет размер как окно, в котором он просматривается, независимо от его размера. Это часто полезно в таких ситуациях, как игры, где вы хотите использовать как можно большую площадь экрана, чтобы играть в игру.

              Для начала создайте локальную копию наших демо-файлов window-resize-example.html и bgtile.png. Откройте его и посмотрите - вы увидите, что у нас есть элемент {{htmlelement("div")}}, который покрывает небольшую часть экрана, на который нанесена фоновая плитка. Мы будем использовать это, чтобы представить нашу область пользовательского интерфейса приложения.

                -
              1. Прежде всего, давайте возьмем ссылку на div, а затем возьмем ширину и высоту окна просмотра (внутреннее окно, где отображается ваш документ) и сохраните их в переменных - эти два значения удобно содержатся в {{domxref("Window.innerWidth")}} и {{domxref("Window.innerHeight")}}. Добавьте следующие строки внутри существующего элемента {{htmlelement("script")}}: +
              2. Прежде всего, давайте возьмём ссылку на div, а затем возьмём ширину и высоту окна просмотра (внутреннее окно, где отображается ваш документ) и сохраните их в переменных - эти два значения удобно содержатся в {{domxref("Window.innerWidth")}} и {{domxref("Window.innerHeight")}}. Добавьте следующие строки внутри существующего элемента {{htmlelement("script")}}: 
                var div = document.querySelector('div');
 var WIDTH = window.innerWidth;
 var HEIGHT = window.innerHeight;
                @@ -238,8 +238,8 @@ var HEIGHT = window.innerHeight; 
                div.style.width = WIDTH + 'px';
 div.style.height = HEIGHT + 'px';
                3. -
              3. Сохраните и попробуйте обновить браузер - теперь вы должны увидеть, что div становится таким же большим, как ваш видовой экран, независимо от того, какой размер экрана вы используете. Если теперь вы попытаетесь изменить размер окна, чтобы увеличить его, вы увидите, что div остается одного размера - мы устанавливаем его только один раз.
                4. -
              4. Как насчет того, чтобы мы использовали событие, чтобы размер div изменялся при изменении размера окна? Объект {{domxref("Window")}} имеет событие, имеющееся на нем с именем resize, которое запускается каждый раз при изменении размера окна - давайте обратимся к нему через обработчик событий {{domxref("Window.onresize")}} и повторяйте наш размерный код каждый раз, когда он изменяется. Добавьте нижеследующую часть кода: +
              5. Сохраните и попробуйте обновить браузер - теперь вы должны увидеть, что div становится таким же большим, как ваш видовой экран, независимо от того, какой размер экрана вы используете. Если теперь вы попытаетесь изменить размер окна, чтобы увеличить его, вы увидите, что div остаётся одного размера - мы устанавливаем его только один раз.
                6. +
              6. Как насчёт того, чтобы мы использовали событие, чтобы размер div изменялся при изменении размера окна? Объект {{domxref("Window")}} имеет событие, имеющееся на нем с именем resize, которое запускается каждый раз при изменении размера окна - давайте обратимся к нему через обработчик событий {{domxref("Window.onresize")}} и повторяйте наш размерный код каждый раз, когда он изменяется. Добавьте нижеследующую часть кода: 
                window.onresize = function() {
   WIDTH = window.innerWidth;
   HEIGHT = window.innerHeight;
@@ -260,14 +260,14 @@ div.style.height = HEIGHT + 'px';
                • Элемент должен появиться в списке.
                • Каждому элементу должна быть предоставлена кнопка, которую можно нажать, чтобы удалить этот элемент из списка.
                  • -
                • Вход должен быть опустошен и сфокусирован, чтобы вы могли ввести другой элемент.
                  • +
                • Вход должен быть опустошён и сфокусирован, чтобы вы могли ввести другой элемент.

                Готовое демо будет выглядеть примерно так:

                -

                Чтобы завершить упражнение, выполните следующие действия и убедитесь, что список ведет себя так, как описано выше.

                +

                Чтобы завершить упражнение, выполните следующие действия и убедитесь, что список ведёт себя так, как описано выше.

                1. Для начала загрузите копию нашего начального файла shopping-list.html и скопируйте его где-нибудь. Вы увидите, что у него есть минимальный CSS, список с меткой, ввод и кнопка, пустой список и элемент {{htmlelement("script")}}. Вы будете делать все свои дополнения внутри скрипта.
                  2. diff --git a/files/ru/learn/javascript/client-side_web_apis/third_party_apis/index.html b/files/ru/learn/javascript/client-side_web_apis/third_party_apis/index.html index 4977fe99c7..69af264c07 100644 --- a/files/ru/learn/javascript/client-side_web_apis/third_party_apis/index.html +++ b/files/ru/learn/javascript/client-side_web_apis/third_party_apis/index.html @@ -27,7 +27,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Third_party_APIs

                  Что такое сторонние API?

                  -

                  Сторонние API - это API, предоставляемые третьими лицами — как правило, такими компаниями, как Facebook, Twitter, or Google — чтобы вы могли получить доступ к их функциям с помощью JavaScript и использовать его на своем собственном сайте. Как мы показали в нашей вводной статье об API, одним из наиболее очевидных примеров является использование Google Maps APIs для отображения пользовательских карт на ваших страницах.

                  +

                  Сторонние API - это API, предоставляемые третьими лицами — как правило, такими компаниями, как Facebook, Twitter, or Google — чтобы вы могли получить доступ к их функциям с помощью JavaScript и использовать его на своём собственном сайте. Как мы показали в нашей вводной статье об API, одним из наиболее очевидных примеров является использование Google Maps APIs для отображения пользовательских карт на ваших страницах.

                  Давайте снова посмотрим на наш пример карты (см. исходный код на GitHub; см. это в действии),  и используем его для иллюстрации того, как сторонние API отличаются от API-интерфейсов браузера.

                  @@ -61,12 +61,12 @@ var myOptions = { var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); -

                  Здесь мы создаем новый объект LatLng, используя конструктор google.maps.LatLng(), который содержит широту и долготу местоположения, которое мы хотим показать, полученные из API геолокации. Затем мы создаем объект опций (myOptions), содержащий эту и другую информацию, связанную с отображением карты. Наконец, мы фактически создаем карту, используя конструктор google.maps.Map(), который принимает в качестве параметров элемент, на котором мы хотим нарисовать карту, и объект опций.

                  +

                  Здесь мы создаём новый объект LatLng, используя конструктор google.maps.LatLng(), который содержит широту и долготу местоположения, которое мы хотим показать, полученные из API геолокации. Затем мы создаём объект опций (myOptions), содержащий эту и другую информацию, связанную с отображением карты. Наконец, мы фактически создаём карту, используя конструктор google.maps.Map(), который принимает в качестве параметров элемент, на котором мы хотим нарисовать карту, и объект опций.

                  Это вся информация, которую API Карт Google требует для построения простой карты. Сервер, к которому вы подключаетесь, обрабатывает все сложные вещи, такие как отображение правильных фрагментов карты для отображаемой области и т. д.

                  -

                  Примечание: Некоторые API обрабатывают доступ к их функциям несколько иначе, требуя от разработчика сделать HTTP-запрос (см. Получение данных с сервера) на определенный шаблон URL для получения определенных данных. Они называются RESTful API, и мы покажем пример этого позже в статье.

                  +

                  Примечание: Некоторые API обрабатывают доступ к их функциям несколько иначе, требуя от разработчика сделать HTTP-запрос (см. Получение данных с сервера) на определённый шаблон URL для получения определённых данных. Они называются RESTful API, и мы покажем пример этого позже в статье.

                  Разрешения обрабатываются по-разному

                  @@ -77,15 +77,15 @@ var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
                  https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA
                  -

                  Параметр URL, указанный в конце URL-адреса, является ключом разработчика - разработчик приложения должен применять его для получения ключа, а затем включать его в свой код определенным образом, чтобы иметь доступ к функциям API. В случае с Картами Google (и другими API Google) вы подаете заявку на получение ключа на Google Cloud Platform.

                  +

                  Параметр URL, указанный в конце URL-адреса, является ключом разработчика - разработчик приложения должен применять его для получения ключа, а затем включать его в свой код определённым образом, чтобы иметь доступ к функциям API. В случае с Картами Google (и другими API Google) вы подаёте заявку на получение ключа на Google Cloud Platform.

                  Другие API могут потребовать, чтобы вы включили ключ немного по-другому, но шаблон для большинства из них довольно схож. 
                   
                  - Требование к ключу заключается в том, что не каждый может использовать функциональность API без какой-либо подотчетности. Когда разработчик зарегистрировался для ключа, они затем известны поставщику API, и действие может быть предпринято, если они начинают делать что-то вредоносное с помощью API (например, отслеживать местоположение пользователей или пытаться спамить API с множеством запросов для остановки его работы, например). Самое простое действие - просто отменить их привилегии API.

                  + Требование к ключу заключается в том, что не каждый может использовать функциональность API без какой-либо подотчётности. Когда разработчик зарегистрировался для ключа, они затем известны поставщику API, и действие может быть предпринято, если они начинают делать что-то вредоносное с помощью API (например, отслеживать местоположение пользователей или пытаться спамить API с множеством запросов для остановки его работы, например). Самое простое действие - просто отменить их привилегии API.

                  Расширенный пример Карт Google

                  -

                  Теперь когда мы рассмотрели пример API Карт Google и посмотрели, как он работает, добавим еще несколько функций, чтобы показать, как использовать некоторые другие функции API.

                  +

                  Теперь когда мы рассмотрели пример API Карт Google и посмотрели, как он работает, добавим ещё несколько функций, чтобы показать, как использовать некоторые другие функции API.

                  1. @@ -96,7 +96,7 @@ var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                    1. Перейдите в панель управления API-интерфейсом Google Cloud Platform.
                      2. -
                    2. Создайте новый проект, если у вас его еще нет.
                      3. +
                    3. Создайте новый проект, если у вас его ещё нет.
                    4. Нажмите кнопку Enable API.
                    5. Выберите Google Maps JavaScript API.
                    6. Нажмите кнопку Enable.
                      7. @@ -105,10 +105,10 @@ var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                    -

                    Примечание: Получение ключей API, связанных с Google, может быть немного затруднительным: в Менеджере API Google Cloud Platform много разных экранов, и рабочий процесс может немного отличаться в зависимости от того, как у вас уже установлена ​​учетная запись. Если у вас возникнут проблемы с этим шагом, мы будем рады помочь — Свяжитесь с нами.

                    +

                    Примечание: Получение ключей API, связанных с Google, может быть немного затруднительным: в Менеджере API Google Cloud Platform много разных экранов, и рабочий процесс может немного отличаться в зависимости от того, как у вас уже установлена ​​учётная запись. Если у вас возникнут проблемы с этим шагом, мы будем рады помочь — Свяжитесь с нами.

                    2. -
                  2. Откройте исходный файл Карт Google, найдите строку INSERT-YOUR-API-KEY-HERE, и замените ее фактическим ключом API, который вы получили из панели управления Google Cloud Platform API Manager.
                    3. +
                  3. Откройте исходный файл Карт Google, найдите строку INSERT-YOUR-API-KEY-HERE, и замените её фактическим ключом API, который вы получили из панели управления Google Cloud Platform API Manager.

                  Adding a custom marker

                  diff --git a/files/ru/learn/javascript/first_steps/a_first_splash/index.html b/files/ru/learn/javascript/first_steps/a_first_splash/index.html index 9b719c4029..8ea9bbc299 100644 --- a/files/ru/learn/javascript/first_steps/a_first_splash/index.html +++ b/files/ru/learn/javascript/first_steps/a_first_splash/index.html @@ -23,7 +23,7 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash
          -

          Вам не придется сразу понимать весь код — мы только хотим познакомить вас с базовыми концепциями языка и дать представление о том, как работает JavaScript (и другие языки программирования). В дальнейших статьях вы изучите эти концепции более подробно!

          +

          Вам не придётся сразу понимать весь код — мы только хотим познакомить вас с базовыми концепциями языка и дать представление о том, как работает JavaScript (и другие языки программирования). В дальнейших статьях вы изучите эти концепции более подробно!

          Большинство языковых конструкций JavaScript, с которыми вы познакомитесь (функции, циклы и т.д.), имеют аналоги в других языках программирования — т.е. языки имеют разный синтаксис, но концепции в большинстве случаев те же самые.

          @@ -34,13 +34,13 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash

          Одним из самых трудных и значимых моментов в обучении программированию является не изучение непосредственно синтаксиса языка, а понимание того как применять его для решения реальных задач. Вам нужно начать думать как программист, обычно это означает следующее:

            -
          • Сначала вы разрабатываете логику (структуру, алгоритм выполнения) программы — общие задачи, что и в каких случаях она должна делать, как должна завершиться и т.д., т.е. создаете описание полного цикла её работы.
            • +
          • Сначала вы разрабатываете логику (структуру, алгоритм выполнения) программы — общие задачи, что и в каких случаях она должна делать, как должна завершиться и т.д., т.е. создаёте описание полного цикла её работы.
          • Затем определяете какие конструкции (возможности) языка вам понадобятся и как заставить их работать вместе — для последовательного выполнения всех этапов разработанной логики.
          -

          Всё вместе это потребует тяжелой работы, знания языка, практики в написании кода - и немного творчества. Чем больше вы будете заняты решением практических задач, тем быстрее будете расти в программировании. Мы не обещаем, что вы сразу начнете "думать как программист", но предоставим для этого достаточно возможностей в этой статье.

          +

          Всё вместе это потребует тяжёлой работы, знания языка, практики в написании кода - и немного творчества. Чем больше вы будете заняты решением практических задач, тем быстрее будете расти в программировании. Мы не обещаем, что вы сразу начнёте "думать как программист", но предоставим для этого достаточно возможностей в этой статье.

          -

          Учитывая вышесказанное, на примере простой игры, давайте детально разберем каждый этап создания программы и познакомимся с некоторыми конструкциями языка.

          +

          Учитывая вышесказанное, на примере простой игры, давайте детально разберём каждый этап создания программы и познакомимся с некоторыми конструкциями языка.

          Игра «Угадай число»

          @@ -159,12 +159,12 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash

          {{ EmbedLiveSample('Top_hidden_code', '100%', 320) }}

          -

          Поиграйте в нее - познакомьтесь с игрой, прежде чем двигаться дальше.

          +

          Поиграйте в неё - познакомьтесь с игрой, прежде чем двигаться дальше.

          Давайте представим, что ваш босс дал вам следующую информацию для создания этой игры:

          -

          Я хочу чтобы ты создал простую игру по принципу "Угадай число". Игра должна случайным образом генерировать число от 0 до 100, затем игрок должен отгадать это число за 10 попыток. После каждой попытки игроку сообщают угадал он число или не угадал и если он ошибся, то ему сообщается, что загаданное число больше или меньше того, которое он ввел. Так же необходимо показывать игроку числа из его предыдущих попыток. Игра будет окончена, если игрок угадал число верно или если у него кончатся все попытки. После окончания игры игроку будет дана возможность сыграть в игру еще раз.

          +

          Я хочу чтобы ты создал простую игру по принципу "Угадай число". Игра должна случайным образом генерировать число от 0 до 100, затем игрок должен отгадать это число за 10 попыток. После каждой попытки игроку сообщают угадал он число или не угадал и если он ошибся, то ему сообщается, что загаданное число больше или меньше того, которое он ввёл. Так же необходимо показывать игроку числа из его предыдущих попыток. Игра будет окончена, если игрок угадал число верно или если у него кончатся все попытки. После окончания игры игроку будет дана возможность сыграть в игру ещё раз.

          Поглядев на это краткое изложение, первое, что мы можем сделать - это начать разбивать его на простые действия, максимально думая как программист:

          @@ -173,7 +173,7 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash
        22. Сгенерировать случайное число между 1 и 100.
        23. Начать запись количества попыток игрока угадать число. Начать с 1.
        24. Предоставить попытку угадать игроку загаданное число.
          25. -
        25. Как только попытка угадать была отправлена, сначала записать ее где-нибудь, чтобы пользователь мог увидеть свои предыдущие попытки
          26. +
        26. Как только попытка угадать была отправлена, сначала записать её где-нибудь, чтобы пользователь мог увидеть свои предыдущие попытки
        27. Далее, проверить было ли это число верным.
        28. Если число верное:
            @@ -185,7 +185,7 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash
          1. Если число не верное и есть попытки:
            1. Сказать игроку, что он не угадал.
              2. -
            2. Разрешить ему использовать еще попытку.
              3. +
            3. Разрешить ему использовать ещё попытку.
            4. Повысить число попыток на 1.
            2. @@ -199,7 +199,7 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash
          2. Во время перезапуска игры убедиться, что игровая логика и пользовательский интерфейс полностью сбросились на начальные значения и далее перейти обратно к пункту 1.
          -

          Давайте теперь перейдем к рассмотрению того, как мы можем превратить эти шаги в код, создавая примеры и исследуя возможности JavaScript по ходу.

          +

          Давайте теперь перейдём к рассмотрению того, как мы можем превратить эти шаги в код, создавая примеры и исследуя возможности JavaScript по ходу.

          Подготовка

          @@ -216,7 +216,7 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash

          Добавление переменных для хранения данных

          -

          Давайте начнем. Прежде всего добавьте следующие строки внутри элемента  {{htmlelement("script")}} :

          +

          Давайте начнём. Прежде всего добавьте следующие строки внутри элемента  {{htmlelement("script")}} :

          var randomNumber = Math.floor(Math.random() * 100) + 1;
 
@@ -230,13 +230,13 @@ var guessField = document.querySelector('.guessField');
 var guessCount = 1;
 var resetButton;
          -

          В этом разделе кода устанавливаются переменные, необходимые для хранения данных, которые будет использоваться нашей программой. Переменные - это в основном контейнеры для значений (например, числа или строки текста). Вы создаете переменную с ключевым словом var, за которой следует имя для вашей переменной. Затем вы можете присвоить значение своей переменной знак равенства (=), за которым следует значение, которое вы хотите дать.

          +

          В этом разделе кода устанавливаются переменные, необходимые для хранения данных, которые будет использоваться нашей программой. Переменные - это в основном контейнеры для значений (например, числа или строки текста). Вы создаёте переменную с ключевым словом var, за которой следует имя для вашей переменной. Затем вы можете присвоить значение своей переменной знак равенства (=), за которым следует значение, которое вы хотите дать.

          В нашем примере:

          • Первой переменной - randomNumber - присваивается случайное число от 1 до 100, вычисленное с использованием математического алгоритма.
            • -
          • Следующие три переменные сделаны для хранения ссылок на абзацы результатов в нашем HTML и используются для вставки значений в абзацы, приведенные далее в коде: +
          • Следующие три переменные сделаны для хранения ссылок на абзацы результатов в нашем HTML и используются для вставки значений в абзацы, приведённые далее в коде: 
            <p class="guesses"></p>
 <p class="lastResult"></p>
 <p class="lowOrHi"></p>
            @@ -245,7 +245,7 @@ var resetButton; 
            <label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField">
 <input type="submit" value="Submit guess" class="guessSubmit">
            • -
          • Наши последние две переменные сохраняют количество догадок 1 (используется для отслеживания того, сколько догадок у игрока было), и ссылку на кнопку сброса, которая еще не существует (но позже).
            • +
          • Наши последние две переменные сохраняют количество догадок 1 (используется для отслеживания того, сколько догадок у игрока было), и ссылку на кнопку сброса, которая ещё не существует (но позже).
          @@ -260,7 +260,7 @@ var resetButton; alert('I am a placeholder'); } -

          Функции представляют собой многократно используемые блоки кода, написав один раз вы можете запускать их снова и снова, сохраняя нужный постоянно повторяющийся код. Это действительно полезно. Существует несколько способов определить функцию, но пока мы сосредоточимся на одном простом варианте. Здесь мы определили функцию используя ключевое слово function, за ним идет имя с двумя скобками после него. После этого мы добавляем две фигурные скобки ({ }). Внутри фигурных скобок содержится весь код, запускающийся всякий раз, когда вызываем функцию.

          +

          Функции представляют собой многократно используемые блоки кода, написав один раз вы можете запускать их снова и снова, сохраняя нужный постоянно повторяющийся код. Это действительно полезно. Существует несколько способов определить функцию, но пока мы сосредоточимся на одном простом варианте. Здесь мы определили функцию используя ключевое слово function, за ним идёт имя с двумя скобками после него. После этого мы добавляем две фигурные скобки ({ }). Внутри фигурных скобок содержится весь код, запускающийся всякий раз, когда вызываем функцию.

          Код запускается вводом имени функции, за которым следуют две скобки.

          @@ -270,7 +270,7 @@ var resetButton; 
          checkGuess();
          -

          Вы должны увидеть предупреждение, в котором говорится "I am a placeholder"; в нашем коде мы определили функцию, которая создает предупреждение, когда ее вызывают.

          +

          Вы должны увидеть предупреждение, в котором говорится "I am a placeholder"; в нашем коде мы определили функцию, которая создаёт предупреждение, когда её вызывают.

          Заметка: В дальнейшем вы намного больше узнаете о функциях.

          @@ -278,9 +278,9 @@ var resetButton;

          Операторы (Operators)

          -

          Операторы JavaScript позволяют нам проводить проверки, математические расчеты, объединять строки вместе и выполнять другие подобные действия.

          +

          Операторы JavaScript позволяют нам проводить проверки, математические расчёты, объединять строки вместе и выполнять другие подобные действия.

          -

          Сохраните наш код и обновите страницу показанную в браузере. Откройте консоль JavaScript, если вы еще её не открыли, чтобы попробовать ввести текст из приведенных ниже примеров — введите каждую строчку из столбца "Пример", нажимая Enter после каждого из них, и посмотрите какие результаты они возвращают. Если у вас нет доступа к инструментам разработчика в браузере, вы всегда можете использовать простую встроенную консоль, показанную ниже:

          +

          Сохраните наш код и обновите страницу показанную в браузере. Откройте консоль JavaScript, если вы ещё её не открыли, чтобы попробовать ввести текст из приведённых ниже примеров — введите каждую строчку из столбца "Пример", нажимая Enter после каждого из них, и посмотрите какие результаты они возвращают. Если у вас нет доступа к инструментам разработчика в браузере, вы всегда можете использовать простую встроенную консоль, показанную ниже: