From 55ddd4454665a3c66e3d5b186bc79048468d36e7 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 15 Mar 2021 14:29:50 +0300 Subject: Auto fixes --- .../javascript/asynchronous/async_await/index.html | 24 +++++++-------- .../javascript/asynchronous/concepts/index.html | 6 ++-- .../javascript/asynchronous/introducing/index.html | 20 ++++++------ .../asynchronous/timeouts_and_intervals/index.html | 36 +++++++++++----------- .../build_your_own_function/index.html | 4 +-- .../building_blocks/conditionals/index.html | 4 +-- .../javascript/building_blocks/events/index.html | 12 ++++---- .../building_blocks/image_gallery/index.html | 2 +- .../ru/learn/javascript/building_blocks/index.html | 2 +- .../building_blocks/looping_code/index.html | 20 ++++++------ .../building_blocks/return_values/index.html | 32 +++++++++---------- .../test_your_skills_colon__functions/index.html | 2 +- .../client-side_storage/index.html | 2 +- .../client-side_web_apis/introduction/index.html | 2 +- .../manipulating_documents/index.html | 4 +-- .../first_steps/a_first_splash/index.html | 10 +++--- .../learn/javascript/first_steps/arrays/index.html | 2 +- .../learn/javascript/first_steps/math/index.html | 28 ++++++++--------- .../first_steps/silly_story_generator/index.html | 8 ++--- .../javascript/first_steps/strings/index.html | 2 +- .../first_steps/useful_string_methods/index.html | 2 +- .../first_steps/what_is_javascript/index.html | 8 ++--- .../first_steps/what_went_wrong/index.html | 2 +- files/ru/learn/javascript/howto/index.html | 2 +- .../ru/learn/javascript/objects/basics/index.html | 6 ++-- files/ru/learn/javascript/objects/index.html | 2 +- .../javascript/objects/inheritance/index.html | 6 ++-- files/ru/learn/javascript/objects/json/index.html | 2 +- .../objects/object-oriented_js/index.html | 2 +- .../objects/object_building_practice/index.html | 2 +- .../objects/object_prototypes/index.html | 4 +-- 31 files changed, 130 insertions(+), 130 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 8146dcfaa1..bef0f49847 100644 --- a/files/ru/learn/javascript/asynchronous/async_await/index.html +++ b/files/ru/learn/javascript/asynchronous/async_await/index.html @@ -86,7 +86,7 @@ hello().then(alert);

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

-

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

+

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

Давайте посмотрим на пример из предыдущей статьи:

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

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

-

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

+

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

-

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

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

Пример:

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() на результате, чтобы отобразить его на экране.

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

Await и Promise.all()

-

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

+

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

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

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

Асинхронные функции с async/await бывают очень удобными, но есть несколько замечаний, о которых полезно знать.

-

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

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

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

@@ -320,7 +320,7 @@ displayContent() ... } -

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

+

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

let startTime = Date.now();
 timeTest().then(() => {
@@ -329,7 +329,7 @@ timeTest().then(() => {
   alert("Time taken in milliseconds: " + timeTaken);
 })
-

Далее представленна асинхронная функция timeTest() различная для каждого из примеров.

+

Далее представлена асинхронная функция timeTest() различная для каждого из примеров.

В случае с медленным примером slow-async-await.html, timeTest() выглядит:

@@ -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() выглядит как:

@@ -353,9 +353,9 @@ timeTest().then(() => { await timeoutPromise3; } -

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

+

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

-

Ниже мы ожидаем разрешения промисов из объекта в результат, так как они были запущенны одновременно, блокируя поток, то и разрешатся одновременно. Если вы запустите второй приимер вы увидите alert, сообщающий время выполнения около 3 секунд.

+

Ниже мы ожидаем разрешения промисов из объекта в результат, так как они были запущенны одновременно, блокируя поток, то и разрешатся одновременно. Если вы запустите второй пример вы увидите alert, сообщающий время выполнения около 3 секунд.

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

@@ -363,7 +363,7 @@ timeTest().then(() => {

Async/await class methods

-

В качестве последнего замечания, вы можете использовать  async  перед методами классов или объектов, вынуждая их возвращать promises. А также  await внутри методов объявленных такиим образом. Посмотрите на пример ES class code, который мы наблюдали в статье  object-oriented JavaScript,  и сравниете его с модифицированной (асинхронной) async версией ниже:

+

В качестве последнего замечания, вы можете использовать  async  перед методами классов или объектов, вынуждая их возвращать promises. А также  await внутри методов объявленных таким образом. Посмотрите на пример ES class code, который мы наблюдали в статье  object-oriented JavaScript,  и сравните его с модифицированной (асинхронной) async версией ниже:

class Person {
   constructor(first, last, age, gender, interests) {
diff --git a/files/ru/learn/javascript/asynchronous/concepts/index.html b/files/ru/learn/javascript/asynchronous/concepts/index.html
index cd7f119acc..def7da8a78 100644
--- a/files/ru/learn/javascript/asynchronous/concepts/index.html
+++ b/files/ru/learn/javascript/asynchronous/concepts/index.html
@@ -35,7 +35,7 @@ translation_of: Learn/JavaScript/Asynchronous/Concepts
 
 
Multi-colored macOS beachball busy spinner

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

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

 
 
Блокировка кода

 
@@ -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', () => {
@@ -106,7 +106,7 @@ alertBtn.addEventListener('click', () =>
 
 
Каждая задача будет выполнена последовательно; только когда текущая задача завершится, следующая сможет начаться.

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

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

 
 
Thread 1: Task A --> Task B
 Thread 2: Task C --> Task D

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

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

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

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

 
 
Асинхронные обратные вызовы

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

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

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

 
@@ -105,7 +105,7 @@ let blob = response.blob();
 
 
Первый параметр — тип прослушиваемого события, второй параметр — функция обратного вызова, вызываемая при срабатывании события.

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

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

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

 
@@ -131,11 +131,11 @@ 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(), и другие.

-

Заметьте, что не все функции обратного вызова асинхронны — некторые запускаются синхронно. Например, при использовании {{jsxref("Array.prototype.forEach()")}} для перебора элементов массива (запустите пример, и посмотрите исходный код):

+

Заметьте, что не все функции обратного вызова асинхронны — некоторые запускаются синхронно. Например, при использовании {{jsxref("Array.prototype.forEach()")}} для перебора элементов массива (запустите пример, и посмотрите исходный код):

const gods = ['Apollo', 'Artemis', 'Ares', 'Zeus'];
 
@@ -162,12 +162,12 @@ gods.forEach(function (eachName, index){
 
Заметка: Вы можете посмотреть законченную версию на github (посмотрите исходный код и запустите пример).

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

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

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

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

 
 
 
@@ -194,7 +194,7 @@ gods.forEach(function (eachName, index){
 
 
Природа асинхронного кода

 
-
Давайте рассмотрим пример, который дополнительно иллюстрирует природу асинхронного кода, показывая, что может произойти, когда мы не полностью осознаем порядок выполнения кода, и проблемы, связанные с попыткой трактовать асинхронный код как синхронный. Следующий пример довольно похож на тот, что мы видели раньше (запустите пример, и посмотрте исходный код). Одно из отличий состоит в том, что мы включили ряд операторов {{domxref("console.log()")}} чтобы проиллюстрировать порядок, в котором, как вы думаете, будет выполняться код.

+
Давайте рассмотрим пример, который дополнительно иллюстрирует природу асинхронного кода, показывая, что может произойти, когда мы не полностью осознаем порядок выполнения кода, и проблемы, связанные с попыткой трактовать асинхронный код как синхронный. Следующий пример довольно похож на тот, что мы видели раньше (запустите пример, и посмотреть исходный код). Одно из отличий состоит в том, что мы включили ряд операторов {{domxref("console.log()")}} чтобы проиллюстрировать порядок, в котором, как вы думаете, будет выполняться код.

 
 
console.log ('Starting');
 let image;
@@ -255,7 +255,7 @@ console.log("all done");

 
 
Активное обучение: сделайте все это асинхронно!

 
-
Чтобы исправить проблемный пример с  fetch() и заставить все три сообщения console.log() появиться в желаемом порядке, вы можете также запустить третье сообщение console.log() асинхронно. Этого можно добиться, переместив его внутрь другого блока .then() присоединенного к концу второго, или просто переместив его внутрь второго блока  then(). Попробуйте иправить это сейчас..

+
Чтобы исправить проблемный пример с  fetch() и заставить все три сообщения console.log() появиться в желаемом порядке, вы можете также запустить третье сообщение console.log() асинхронно. Этого можно добиться, переместив его внутрь другого блока .then() присоединенного к концу второго, или просто переместив его внутрь второго блока  then(). Попробуйте исправить это сейчас..

 
 

 
Заметка: Если вы застряли, вы можете найти ответ здесь (также можно посмотреть запущенный пример). Также вы можете найти много информации о промисах в нашем гайде Основные понятия асинхронного программирования позднее в этом модуле.

diff --git a/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html b/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html
index 3edcaf64c8..7cd498d9a7 100644
--- a/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html
+++ b/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html
@@ -1,5 +1,5 @@
 ---
-title: 'Объединенный асинхронный JavaScript: Таймайты и интервалы'
+title: 'Объединенный асинхронный JavaScript: Таймауты и интервалы'
 slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
 translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
 original_slug: Learn/JavaScript/Asynchronous/Таймауты_и_интервалы
@@ -35,7 +35,7 @@ original_slug: Learn/JavaScript/Asynchronous/Таймауты_и_интерва
  
setInterval()

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

  
requestAnimationFrame()

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

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

 
 
 
Асинхронный код, установленный этими функциями, выполняется в основном потоке (по истечении указанного им таймера).

@@ -176,7 +176,7 @@ clearInterval(myInterval);

При работе с setTimeout () и setInterval () следует помнить о нескольких вещах. Давайте рассмотрим их.

-

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

+

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

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

@@ -253,14 +253,14 @@ draw();

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

-

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

+

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

Однако, если вы делаете что-то более сложное, включающее объекты, которые не доступны напрямую в the DOM (такие как 2D Canvas API или WebGL ), requestAnimationFrame() предпочтительный вариант в большинстве случаев.

Как быстро работает ваша анимация?

-

Плавность анимации напрямую зависит от частоты кадров анимации и измеряется в кадрах в секунду (fps). Чем выше это число, тем плавнее будет выглядеть ваша анимация до точки.

+

Плавность анимации напрямую зависит от частоты кадров анимации и измеряется в кадрах в секунду (fps). Чем выше это число, тем плавное будет выглядеть ваша анимация до точки.

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

@@ -317,7 +317,7 @@ draw();

requestAnimationFrame () поддерживается в более поздних версиях браузеров, чем setInterval () / setTimeout (). Интересно, что он доступен в Internet Explorer 10 и выше.

-

Итак, если вам не тербуется поддержка старых версий IE, нет особых причин не использовать requestAnimationFrame().

+

Итак, если вам не требуется поддержка старых версий IE, нет особых причин не использовать requestAnimationFrame().

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

@@ -332,7 +332,7 @@ draw();

Возьмите базовый HTML шаблон (такой как этот).

  • -

    Поместите пустой  {{htmlelement("div")}} елемент внутри элемента {{htmlelement("body")}}, затем добавьте внутрь символ ↻ . Этот символ будет действовать как spinner в нашем примере.

    +

    Поместите пустой  {{htmlelement("div")}} элемент внутри элемента {{htmlelement("body")}}, затем добавьте внутрь символ ↻ . Этот символ будет действовать как spinner в нашем примере.

  • Применитеpply следующий CSS к HTML шаблону (любым предпочитаемым способом). Он установ красный фон на странице, высоту <body> равную 100% высоты {{htmlelement("html")}} , и центрирует <div> внутри <body>, по горизонтали и вертикали.

    @@ -360,7 +360,7 @@ div {

    Разместите  {{htmlelement("script")}} элемент перед </body> .

  • -

    Разместите следующий JavaScript код в  <script> . Здесь вы сохраняете ссылку на <div> внутри, устанавливаете дяпеременной rotateCount значение 0, устанавливаете неинициализированную переменную, которая позже будет использоваться для хранения ссылки на вызов requestAnimationFrame(), и устанавливаете для переменной startTime значение null, которая будет позже использоваться для хранения времени начала requestAnimationFrame().

    +

    Разместите следующий JavaScript код в  <script> . Здесь вы сохраняете ссылку на <div> внутри, устанавливаете для переменной rotateCount значение 0, устанавливаете неинициализированную переменную, которая позже будет использоваться для хранения ссылки на вызов requestAnimationFrame(), и устанавливаете для переменной startTime значение null, которая будет позже использоваться для хранения времени начала requestAnimationFrame().

    const spinner = document.querySelector('div');
 let rotateCount = 0;
@@ -369,7 +369,7 @@ let rAF;
  • -

    Под предыдущим кодом вставьте функцию draw() соторая будет использоваться для хранения нашешо кода анимации, который включает параметр timestamp :

    +

    Под предыдущим кодом вставьте функцию draw() которая будет использоваться для хранения нашего кода анимации, который включает параметр timestamp :

    function draw(timestamp) {
 
@@ -411,7 +411,7 @@ let rAF;
 
    Note: Вы можете посмотреть рабочий образец на GitHub. ( исходный код.)
    
 
 
-
    Очbстка вызова  requestAnimationFrame() 
    
+
    Очистка вызова  requestAnimationFrame() 
    
 
 
    Очистить вызов requestAnimationFrame () можно, вызвав соответствующий метод cancelAnimationFrame (). (Обратите внимание, что имя функции начинается с «cancel», а не «clear», как у методов «set ...».)
    
 
@@ -436,7 +436,7 @@ let rAF;
 
 
    Регулировка анимации requestAnimationFrame() 
    
 
-
    Одним из ограничений requestAnimationFrame () является то, что вы не можете выбирать частоту кадров. В большинстве случаев это не проблема, так как обычно вы хотите, чтобы ваша анимация работала как можно плавнее. Но как насчет того, чтобы создать олдскульную 8-битную анимацию?
    
+
    Одним из ограничений requestAnimationFrame () является то, что вы не можете выбирать частоту кадров. В большинстве случаев это не проблема, так как обычно вы хотите, чтобы ваша анимация работала как можно плавное. Но как насчет того, чтобы создать олдскульную 8-битную анимацию?
    
 
 
    Это было проблемой, например в анимации ходьбы, вдохновленной островом обезьян, из статьи Drawing Graphics:
    
 
@@ -483,7 +483,7 @@ let rAF;
   
    Прежде всего, скачайте стартовый файл. Он содержит законченную структуру HTML и стили CSS, что дает нам игровую доску, которая показывает информацию двух игроков (как показано выше), но с счетчиком и параграфом результатов, отображаемыми друг над другом. Вам нужно просто написать JavaScript код.
  • -

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

    +

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

    const spinner = document.querySelector('.spinner p');
 const spinnerContainer = document.querySelector('.spinner');
@@ -500,7 +500,7 @@ const result = document.querySelector('.result');
  • Ссылка на элемент {{htmlelement("div")}} содержащий спиннер, используемый для отображения и скрытия.
  • Счетчик поворотов. Он определяет, на сколько вы хотите показывать вращение спиннера на каждом кадре анимации.
  • Нулевое время начала. Это будет заполнено временем начала, когда счетчик начнет вращаться.
    • -
  • Неинициализировання переменная для последующего хранения вызова {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} который анимирует спиннер.
    • +
  • Неинициализированная переменная для последующего хранения вызова {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} который анимирует спиннер.
  • Ссылка на кнопку Start .
  • Ссылка на параграф результатов.
    • @@ -559,7 +559,7 @@ function start() { }
    -

    Note: Вы увидете, что этот пример вызывает setTimeout() без сохранения возвращаемого значения. (не  let myTimeout = setTimeout(functionName, interval).) 

    +

    Note: Вы увидите, что этот пример вызывает setTimeout() без сохранения возвращаемого значения. (не  let myTimeout = setTimeout(functionName, interval).) 

    Это прекрасно работает, если вам не нужно очищать интервал / тайм-аут в любой момент. Если вы это сделаете, вам нужно будет сохранить возвращенный идентификатор!

    @@ -602,11 +602,11 @@ function start() {
  • Во-первых, отмените анимацию спиннера с помощью {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (всегда полезно очистить ненужные процессы), и скройте контейнер счетчика.
  • Затем, отобразите абзац с результатами и установите для его текстового содержимого значение "PLAYERS GO!!"  чтобы сообщить игрокам, что теперь они могут нажать свою кнопку, чтобы победить.
  • Прикрепите к документу прослушиватель событий keydown . При нажатии любой кнопки запускается функция keyHandler().
    • -
  • Внутри keyHandler(), код включает обьект события в качестве параметра (представленного e) — его свойство {{domxref("KeyboardEvent.key", "key")}} содержит только что нажатую клавишу, и вы можете использовать это для твета на определенные нажатия клавиш определенными действиями.
    • -
  • Установите для переменной isOver значение false, чтобы мы могли отслеживать, были ли нажаты правильные клавиши, чтобы игрок 1 или 2 выиграл. Мы не хотим, чтобы игра заканчивалась при нажатии неправильной клваиши.
    • +
  • Внутри keyHandler(), код включает объект события в качестве параметра (представленного e) — его свойство {{domxref("KeyboardEvent.key", "key")}} содержит только что нажатую клавишу, и вы можете использовать это для ответа на определенные нажатия клавиш определенными действиями.
    • +
  • Установите для переменной isOver значение false, чтобы мы могли отслеживать, были ли нажаты правильные клавиши, чтобы игрок 1 или 2 выиграл. Мы не хотим, чтобы игра заканчивалась при нажатии неправильной клавиши.
  • Регистрация e.key в консоли, это полезный способ узнать значение различных клавиш, которые вы нажимаете.
  • Когда e.key принимает значение "a", отобразить сообщение о том, что Player 1 выиграл, а когда e.key это "l", отобразить сообщение о том, что Player 2 выиграл. (Note: Это будет работать только со строчными буквами a и l — если переданы прописные A или L , это считается другими клавишами!) Если была нажата одна из этих клавиш, установите для isOver значение true.
    • -
  • Только еслиf isOver равно true, удалите прослушиватель событий keydown с помощью {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} чтобы после того, как произошло выигрышное нажатие, больше не было возможности ввода с клавиатуры, чтобы испортить финальный результат игры. Вы также используете setTimeout() для вызова reset() через 5 секунд — как обьяснялось ранее, эта функция сбрасывает игру обратно в исходное состояние, чтобы можно было начать новую игру.
    • +
  • Только если isOver равно true, удалите прослушиватель событий keydown с помощью {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} чтобы после того, как произошло выигрышное нажатие, больше не было возможности ввода с клавиатуры, чтобы испортить финальный результат игры. Вы также используете setTimeout() для вызова reset() через 5 секунд — как объяснялось ранее, эта функция сбрасывает игру обратно в исходное состояние, чтобы можно было начать новую игру.
    • @@ -628,7 +628,7 @@ function start() { 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 e93334902a..a0e35bc998 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 @@ -6,7 +6,7 @@ tags: - DOM - Изучение - Навигатор - - Новичек + - Новичок - Окно translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents --- @@ -106,7 +106,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
    -

    Обратите внимание, что, как и во многих вещах в JavaScript, существует множество способов выбора элемента и хранения ссылки на него в переменной. {{domxref("Document.querySelector()")}} - рекомендуемый современный подход, который считается удобным, потому что он позволяет вам выбирать элементы с помощью селекторов CSS. Вышеупомянутый запрос querySelector() будет соответствовать первому элементу {{htmlelement("a")}}, который появляется в документе. Если вы хотите совместить и делать что-то с несколькими элементами, вы можете использовать {{domxref ("Document.querySelectorAll()")}}, который соответствует каждому элементу документа, который соответствует селектору и сохраняет ссылки на них в массиве массиво-подобном объекте, называемом NodeList.

    +

    Обратите внимание, что, как и во многих вещах в JavaScript, существует множество способов выбора элемента и хранения ссылки на него в переменной. {{domxref("Document.querySelector()")}} - рекомендуемый современный подход, который считается удобным, потому что он позволяет вам выбирать элементы с помощью селекторов CSS. Вышеупомянутый запрос querySelector() будет соответствовать первому элементу {{htmlelement("a")}}, который появляется в документе. Если вы хотите совместить и делать что-то с несколькими элементами, вы можете использовать {{domxref ("Document.querySelectorAll()")}}, который соответствует каждому элементу документа, который соответствует селектору и сохраняет ссылки на них в массиве массива-подобном объекте, называемом NodeList.

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

    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 7d04a8b3af..8c4817891c 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 @@ -278,7 +278,7 @@ var resetButton;

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

    -

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

    +

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

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

    @@ -477,7 +477,7 @@ greeting;

    Условные выражения (Conditionals)

    -

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

    +

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

    Теперь, заменим вашу текущую функциюcheckGuess() на эту версию:

    @@ -515,14 +515,14 @@ greeting;

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

    -

    Во-первых, мы просто будем придерживаться десятичных чисел на протяжении всего курса; вы редко когда будете сталкиваться с необходимостью думать в других числовых системах, если вообще когда-либо с ней сталкнетесь.

    +

    Во-первых, мы просто будем придерживаться десятичных чисел на протяжении всего курса; вы редко когда будете сталкиваться с необходимостью думать в других числовых системах, если вообще когда-либо с ней столкнетесь.

    Во-вторых, в отличие от некоторых других языков программирования, JavaScript имеет только один тип данных для чисел, как вы догадались это {{jsxref("Number")}}. Это означает, независимо от типа чисел, с которыми вы работаете в JavaScript, обрабатывать вы их будете точно так же.

    @@ -198,7 +198,7 @@ num2 + num1 / 8 + 2;

    Замечание: инкремент и декремент часто используются в циклах, о которых вы узнаете позже. Например, если вы захотите пройтись по списку цен и добавить к каждой налог с продаж, вам придется в цикле обойти каждую цену и провести необходимые вычисления для учета налога. Инкремент будет использован для перехода на новую ячейку списка при необходимости. У нас есть несложный пример реализации такого списка - попробуйте и взгляните на код чтобы посмотреть, сможете ли вы найти инкременты! Мы взглянем на циклы поближе позже по ходу курса.

    -

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

    +

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

    3++;
    @@ -207,7 +207,7 @@ num2 + num1 / 8 + 2; 
    var num1 = 4;
 num1++;
    -

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

    +

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

    num1;
    @@ -254,7 +254,7 @@ x = y; // x теперь содержит значение y (x == 4) -= Присваивание вычитания - Вычитает значение справа из переменной слева и возвращает новое зачение переменной + Вычитает значение справа из переменной слева и возвращает новое значение переменной x = 6;
    x -= 3;     x = 6;
    @@ -265,7 +265,7 @@ x = y; // x теперь содержит значение y (x == 4)

    Присваивание умножения

    - Умножает переменную слева на значение справа и возвращает новое зачение переменной + Умножает переменную слева на значение справа и возвращает новое значение переменной x = 2;
    x *= 3;     x = 2;
    @@ -274,7 +274,7 @@ x = y; // x теперь содержит значение y (x == 4) /= Присваивание деления - Делит переменную слева на значение справа и возвращает новое зачение переменной + Делит переменную слева на значение справа и возвращает новое значение переменной x = 10;
    x /= 5;     x = 10;
    @@ -285,7 +285,7 @@ x = y; // x теперь содержит значение y (x == 4)

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

    -

    Замьтете, что значение справа может быть как числом (константой), так и переменной, например:

    +

    Заметьте, что значение справа может быть как числом (константой), так и переменной, например:

    var x = 3; // x содержит значение 3
 var y = 4; // y содержит значение 4
@@ -297,7 +297,7 @@ x *= y; // x содержит значение 12

    Активное обучение: меняем размеры коробки

    -

    В этом упражнении вы будете пользоваться числами и операторами для работы с размерами коробки. Коробка рисуется с помощью API браузера, которое назывется Canvas API. Вам не следует беспокоиться о том, как это работает - просто сосредоточьтесь на математике. Ширина и высота коробки (в пикселях) определяются переменными x и y, которые изначально равны 50.

    +

    В этом упражнении вы будете пользоваться числами и операторами для работы с размерами коробки. Коробка рисуется с помощью API браузера, которое называется Canvas API. Вам не следует беспокоиться о том, как это работает - просто сосредоточьтесь на математике. Ширина и высота коробки (в пикселях) определяются переменными x и y, которые изначально равны 50.

    {{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 520)}}

    @@ -306,15 +306,15 @@ x *= y; // x содержит значение 12

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

      -
    • Поменяйте строчку с размером x так, чтобы коробка была шириной 50px, причем 50 должно быть вычислено с помощью чисел 43 и 7 и арифмитического оператора.
      • +
    • Поменяйте строчку с размером x так, чтобы коробка была шириной 50px, причем 50 должно быть вычислено с помощью чисел 43 и 7 и арифметического оператора.
    • Поменяйте строчку с размером y так, чтобы коробка была высотой 75px, причем 75 должно быть вычислено с помощью чисел 25 и 3 и арифметического оператора.
    • Поменяйте строчку с размером y так, чтобы коробка была высотой 250, при этом 250 вычислено с помощью двух чисел и оператором взятия остатка (модуль).
      • -
    • Поменяйте строчку с размером y так, чтобы коробка была высотой 150px, причем 150 вычилено с помощью трех чисел и операторов вычитания и деления.
      • +
    • Поменяйте строчку с размером y так, чтобы коробка была высотой 150px, причем 150 вычислено с помощью трех чисел и операторов вычитания и деления.
    • Поменяйте строчку с размером x так, чтобы коробка была шириной 200px, при этом 200 вычислено с помощью числа 4 и оператора присваивания.
    • Поменяйте строчку с размером y так, чтобы коробка была высотой 200px, причем 200 вычислено с помощью чисел 50 и 3 и операторов умножения и присваивания сложения.
    -

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

    +

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

    Операторы сравнения

    @@ -405,7 +405,7 @@ function updateBtn() {

    Открыть в новом окне

    -

    Мы использовали оператор равенства внутри функции updateBtn(). В этом случае мы не проверяем пару математических выражений на равенcтво значений — мы просто смотрим, является ли текст на кнопке определенной строкой — что по сути является тем же самым. Если кнопка при нажатии содержит "Start machine", мы меняем содержимое метки на "Stop machine" и обновляем метку. Если же текст кнопки — "Stop machine", при нажатии мы возвращем все обратно. 

    +

    Мы использовали оператор равенства внутри функции updateBtn(). В этом случае мы не проверяем пару математических выражений на равенство значений — мы просто смотрим, является ли текст на кнопке определенной строкой — что по сути является тем же самым. Если кнопка при нажатии содержит "Start machine", мы меняем содержимое метки на "Stop machine" и обновляем метку. Если же текст кнопки — "Stop machine", при нажатии мы возвращаем все обратно. 

    Заметка: Такой элемент управления, который переключается между двумя состояниями, обычно называется тумблером. Он переключается между одним состоянием и другим: свет включен, свет выключен и т. д.

    @@ -418,7 +418,7 @@ function updateBtn() {

    В следующей статье мы изучим текст и то, как мы работаем с ним в JavaScript.

    -

    Примечание: если вам хочется узнать подробнее о том, как математика реализуется в JavaScript, вы можете посмотерть главный раздел JavaScript MDN. Статьи Числа и даты и Выражения и операторы - хороший вариант для начала.

    +

    Примечание: если вам хочется узнать подробнее о том, как математика реализуется в JavaScript, вы можете посмотреть главный раздел JavaScript MDN. Статьи Числа и даты и Выражения и операторы - хороший вариант для начала.

    {{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Variables", "Learn/JavaScript/Первые_шаги/Строки", "Learn/JavaScript/Первые_шаги")}}

    diff --git a/files/ru/learn/javascript/first_steps/silly_story_generator/index.html b/files/ru/learn/javascript/first_steps/silly_story_generator/index.html index 62576df3be..b59058d29a 100644 --- a/files/ru/learn/javascript/first_steps/silly_story_generator/index.html +++ b/files/ru/learn/javascript/first_steps/silly_story_generator/index.html @@ -7,8 +7,8 @@ tags: - Изучение - Испытание - Массивы - - НаписаниеКода - - НачальныйУровень + - Написание Кода + - Начальный Уровень - Операторы - Переменные - Проверка @@ -79,7 +79,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Создатель_глу

    Задайте переменные и функции:

      -
    1. В исходном текстовом документе скопируйте весь код под заголовком "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" и вставьте в начало файла main.js. Это даст вам три переменные, ссылающиеся на текстовое поле "Enter custom name" (customName),  кнопку "Generate random story" (randomize), и элемент снизу HTML страницы, куда будет помещена сама история {{htmlelement("p")}} (story), соответственно. Также у вас должна быть функцияrandomValueFromArray(), котрая принимает массив и случайным образом возвращает оттуда один из элементов.
      2. +
    2. В исходном текстовом документе скопируйте весь код под заголовком "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" и вставьте в начало файла main.js. Это даст вам три переменные, ссылающиеся на текстовое поле "Enter custom name" (customName),  кнопку "Generate random story" (randomize), и элемент снизу HTML страницы, куда будет помещена сама история {{htmlelement("p")}} (story), соответственно. Также у вас должна быть функцияrandomValueFromArray(), которая принимает массив и случайным образом возвращает оттуда один из элементов.
    3. Теперь взгляните на второй параграф исходного документа — "2. RAW TEXT STRINGS". Он содержит строки текста, которые будут использоваться как входные данные вашей программы. Вам следует поместить их внутрь переменных в файле main.js:
      1. Сохраните первую большую строку текста в переменную storyText.
        2. @@ -94,7 +94,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Создатель_глу
        1. Теперь возвращаемся к исходному текстовому файлу.
          2. -
        2. Скопируйте код под заголовком "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" и вставте его в конец файла main.js. Это: +
        3. Скопируйте код под заголовком "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" и вставьте его в конец файла main.js. Это:
          • Добавит обработчик события кликанья в переменную randomize,  Так что, когда кнопка будет нажата -  функция result() запустится.
          • Добавляет в код частично завершенную функцию result(). В течении оставшейся части испытания вам предстоит, заполняя строчки внутри этой функции, завершить ее и заставить работать должным образом.
            • diff --git a/files/ru/learn/javascript/first_steps/strings/index.html b/files/ru/learn/javascript/first_steps/strings/index.html index 9c769ff801..3bbdedaca4 100644 --- a/files/ru/learn/javascript/first_steps/strings/index.html +++ b/files/ru/learn/javascript/first_steps/strings/index.html @@ -8,7 +8,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Строки
            {{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Math", "Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/JavaScript/Первые_шаги")}}
            -

            Теперь мы обратим внимание на строки — в программировании так называют части текста. В этой статье мы рассмотрим все распростанённые вещи, которые вы должны действительно знать о строках при изучении JavaScript, например, создание строк, экранирование кавычек в строках и объединение строк вместе.

            +

            Теперь мы обратим внимание на строки — в программировании так называют части текста. В этой статье мы рассмотрим все распространенные вещи, которые вы должны действительно знать о строках при изучении JavaScript, например, создание строк, экранирование кавычек в строках и объединение строк вместе.

            diff --git a/files/ru/learn/javascript/first_steps/useful_string_methods/index.html b/files/ru/learn/javascript/first_steps/useful_string_methods/index.html index 552423bc8b..aa85c3309d 100644 --- a/files/ru/learn/javascript/first_steps/useful_string_methods/index.html +++ b/files/ru/learn/javascript/first_steps/useful_string_methods/index.html @@ -552,7 +552,7 @@ textarea.onkeyup = function(){ 
            MAN: Manchester Piccadilly
            -

            Мы бы рекоменовали реализовать это следующим образом:

            +

            Мы бы рекомендовали реализовать это следующим образом:

            1. Извлеките трехбуквенный код станции и сохраните его в новой переменной.
              2. diff --git a/files/ru/learn/javascript/first_steps/what_is_javascript/index.html b/files/ru/learn/javascript/first_steps/what_is_javascript/index.html index 68c9173c1f..2e0ff5a198 100644 --- a/files/ru/learn/javascript/first_steps/what_is_javascript/index.html +++ b/files/ru/learn/javascript/first_steps/what_is_javascript/index.html @@ -126,7 +126,7 @@ function updateName() {

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

              -

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

              +

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

              @@ -167,7 +167,7 @@ function updateName() {

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

              -

              С другой стороны, компилируемые языки преобразуются (компилируются) в другую форму, прежде чем они будут запущены компьютером. Например, C / C ++ компилируются в язык ассемблера, который затем запускается компьютером.

              +

              С другой стороны, ккомпилируемые языки преобразуются (компилируются) в другую форму, прежде чем они будут запущены компьютером. Например, C / C ++ компилируются в язык ассемблера, который затем запускается компьютером.

              Оба подхода имеют разные преимущества, которые на данном этапе мы обсуждать не будем.

              @@ -179,11 +179,11 @@ function updateName() {

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

              -

              Веб-страница без динамического обновления контента называется статической — она просто показывает один и тотже контент все время.

              +

              Веб-страница без динамического обновления контента называется статической — она просто показывает один и тот же контент все время.

              Как добавить JavaScript на вашу страницу?

              -

              JavaScript применяется к вашей HTML странице точно так же, как CSS. И если CSS использует элементы {{htmlelement("link")}} для внешних стилей и {{htmlelement("style")}} для встроеных в HTML, то для JavaScript нужен только один друг в HTML мире — элемент {{htmlelement("script")}}. Давайте узнаем, как это работает.

              +

              JavaScript применяется к вашей HTML странице точно так же, как CSS. И если CSS использует элементы {{htmlelement("link")}} для внешних стилей и {{htmlelement("style")}} для встроенных в HTML, то для JavaScript нужен только один друг в HTML мире — элемент {{htmlelement("script")}}. Давайте узнаем, как это работает.

              Внутренний JavaScript

              diff --git a/files/ru/learn/javascript/first_steps/what_went_wrong/index.html b/files/ru/learn/javascript/first_steps/what_went_wrong/index.html index 5e84e07e34..1e95ec1c25 100644 --- a/files/ru/learn/javascript/first_steps/what_went_wrong/index.html +++ b/files/ru/learn/javascript/first_steps/what_went_wrong/index.html @@ -149,7 +149,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Что_пошло_не_т

              Работаем через логику

              -

              Чтобы исправить это, давайте рассмотрим как работает строка. Первое, мы вызываем Math.random(), котрый генерирует случайное десятичное число, между 0 и 1, например 0.5675493843.

              +

              Чтобы исправить это, давайте рассмотрим как работает строка. Первое, мы вызываем Math.random(), который генерирует случайное десятичное число, между 0 и 1, например 0.5675493843.

              Math.random()
              diff --git a/files/ru/learn/javascript/howto/index.html b/files/ru/learn/javascript/howto/index.html index b3fa76b1cf..7286c9789f 100644 --- a/files/ru/learn/javascript/howto/index.html +++ b/files/ru/learn/javascript/howto/index.html @@ -85,7 +85,7 @@ translation_of: Learn/JavaScript/Howto

              Область действия

              -

              Помнините, что functions have their own scope —вы не можете получить доступ к значению переменной, установленному внутри функции извне функции, если вы не объявили переменную глобально (т. е. не внутри каких-либо функций), или return the value из функции.

              +

              Помните, что functions have their own scope —вы не можете получить доступ к значению переменной, установленному внутри функции извне функции, если вы не объявили переменную глобально (т. е. не внутри каких-либо функций), или return the value из функции.

              Запуск кода после оператора возврата

              diff --git a/files/ru/learn/javascript/objects/basics/index.html b/files/ru/learn/javascript/objects/basics/index.html index 41873c646b..43acd47b8d 100644 --- a/files/ru/learn/javascript/objects/basics/index.html +++ b/files/ru/learn/javascript/objects/basics/index.html @@ -139,7 +139,7 @@ person['name']['first']

              Запись элементов в объект

              -

              До сих пор мы рассмастривали только возврат (или получение) элементов объекта — Вы так же можете установить (обновить) значение элемента объекта просто объявив элемент, который Вы хотите установить (используя точечную или скобочную запись), например:

              +

              До сих пор мы рассматривали только возврат (или получение) элементов объекта — Вы так же можете установить (обновить) значение элемента объекта просто объявив элемент, который Вы хотите установить (используя точечную или скобочную запись), например:

              person.age = 45;
 person['name']['last'] = 'Cratchit';
              @@ -190,7 +190,7 @@ person[myDataName] = myDataValue;

              Вы, вероятно, задаетесь вопросом, что такое "this"? Ключевое слово this, ссылается на текущий объект, внутри которого пишется код — поэтому в нашем случае this равен объекту person. Но почему просто не написать person? Как Вы увидите в статье Object-oriented JavaScript for beginners (Объектно-ориентированный JavaScript для начинающих), когда мы начинаем создавать конструкторы и т.д., this очень полезен — он всегда будет гарантировать, что используется верное значение, когда контекст элемента изменяется (например, два разных экземпляра объекта person могут иметь разные имена, но захотят использовать свое собственное имя при приветствии.

              -

              Давайте проиллюстритуем, что мы имеем в виду, с упрощенной парой объектов person :

              +

              Давайте проиллюстрируем, что мы имеем в виду, с упрощенной парой объектов person :

              const person1 = {
   name: 'Chris',
@@ -241,7 +241,7 @@ const myVideo = document.querySelector('video');

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

              -

              В следующей статье мы начнем рассматривать теорию объектно-ориентированного программирования (OOП) и как эти техники могут быть использованны в JavaScript 

              +

              В следующей статье мы начнем рассматривать теорию объектно-ориентированного программирования (OOП) и как эти техники могут быть использованы в JavaScript 

              {{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}

              diff --git a/files/ru/learn/javascript/objects/index.html b/files/ru/learn/javascript/objects/index.html index 08d6d2dc43..d01087d4c7 100644 --- a/files/ru/learn/javascript/objects/index.html +++ b/files/ru/learn/javascript/objects/index.html @@ -33,7 +33,7 @@ original_slug: Learn/JavaScript/Объекты
              Прототипы объектов
              Прототипы - это механизм, благодаря которому объекты в JavaScript наследуют функционал друг друга, но при этом они работают иначе по сравнению с механизмами наследования в классических объектно-ориентированных языках. В этой статье мы изучим эти отличия, объясним, как работает цепочка прототипов, и рассмотрим, как свойство прототипа может быть использовано для добавления методов к существующим конструкторам.
              Наследование в JavaScript
              -
              После знакомства с самыми жуткими подробностями OOJS, эта статья покажет, как создавать "дочерные" классы объектов (конструкторы), которые наследуют функционал от своих "родительских" классов. В дополнении, мы дадим Вам пару советов о том, где и когда можно использовать OOJS.
              +
              После знакомства с самыми жуткими подробностями OOJS, эта статья покажет, как создавать "дочерние" классы объектов (конструкторы), которые наследуют функционал от своих "родительских" классов. В дополнении, мы дадим Вам пару советов о том, где и когда можно использовать OOJS.
              Работа с JSON-данными
              Представление объектов в JavaScript (JavaScript Object Notation) (JSON) - это стандартный формат для представления структурированных данных в виде объектов JavaScript, который обычно используется для представления и передачи данных на веб-сайтах (т.е. передача некоторых данных от сервера к клиенту - таким образом они могут быть отображены на веб-странице). Вы довольно часто будете с этим сталкиваться, поэтому в данной статье мы предоставим вам все, что необходимо для работы с JSON с помощью JavaScript, в том числе доступ к элементам данных в объекте JSON и написания собственного JSON-кода.
              Практика построения объектов
              diff --git a/files/ru/learn/javascript/objects/inheritance/index.html b/files/ru/learn/javascript/objects/inheritance/index.html index fe473b0ef8..35e6f4a4df 100644 --- a/files/ru/learn/javascript/objects/inheritance/index.html +++ b/files/ru/learn/javascript/objects/inheritance/index.html @@ -96,7 +96,7 @@ original_slug: Learn/JavaScript/Объекты/Inheritance

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

              -

              Мы хотим, чтобы конструктор Teacher() принимал те же параметры, что и конструктор Person(), от которго он наследуется, поэтому мы указываем их как параметры в вызове call().

              +

              Мы хотим, чтобы конструктор Teacher() принимал те же параметры, что и конструктор Person(), от которого он наследуется, поэтому мы указываем их как параметры в вызове call().

              Последняя строка внутри конструктора просто определяет новое свойство subject, которое будут иметь учителя, и которого нет у Person().

              @@ -190,13 +190,13 @@ teacher1.subject; teacher1.greeting(); teacher1.farewell(); -

              Все должно работать нормально. Запросы в строках 1, 2, 3 и 6 унаследованны от общего конструктора Person() (класса). Запрос в строке 4 обращается к subject, доступному только для более специализированного конструктора (класса) Teacher(). Запрос в строке 5 получил бы доступ к методу greeting(), унаследованному от Person(), но Teacher() имеет свой собственный метод greeting() с тем же именем, поэтому запрос обращается к этому методу.

              +

              Все должно работать нормально. Запросы в строках 1, 2, 3 и 6 унаследованные от общего конструктора Person() (класса). Запрос в строке 4 обращается к subject, доступному только для более специализированного конструктора (класса) Teacher(). Запрос в строке 5 получил бы доступ к методу greeting(), унаследованному от Person(), но Teacher() имеет свой собственный метод greeting() с тем же именем, поэтому запрос обращается к этому методу.

              Примечание. Если вам не удается заставить это работать, сравните свой код с нашей готовой версией (см. также рабочее демо).

              -

              Методика, которую мы здесь рассмотрили, - это не единственный способ создания наследующих классов в JavaScript, но он работает нормально и это дает вам представление о том, как реализовать наследование в JavaScript.

              +

              Методика, которую мы здесь рассмотрели, - это не единственный способ создания наследующих классов в JavaScript, но он работает нормально и это дает вам представление о том, как реализовать наследование в JavaScript.

              Вам также может быть интересно узнать некоторые из новых функций {{glossary("ECMAScript")}}, которые позволяют нам делать наследование более чисто в JavaScript (см. Classes). Мы не рассматривали их здесь, поскольку они пока не поддерживаются очень широко в браузерах. Все остальные конструкторы кода, которые мы обсуждали в этом наборе статей, поддерживаются еще в IE9 или ранее и есть способы добиться более ранней поддержки, чем это.

              diff --git a/files/ru/learn/javascript/objects/json/index.html b/files/ru/learn/javascript/objects/json/index.html index 89de0661a8..68cc6c7fdd 100644 --- a/files/ru/learn/javascript/objects/json/index.html +++ b/files/ru/learn/javascript/objects/json/index.html @@ -267,7 +267,7 @@ request.send();
              1. Создаем несколько новых элементов: <article>, <h2>, три <p> и <ul>.
                2. -
              2. Установливаем <h2>, чтобы содержать name текущего героя.
                3. +
              3. Устанавливаем <h2>, чтобы содержать name текущего героя.
              4. Заполняем три абзаца своей secretIdentity, age и строкой, в которой говорится: «Суперспособности:», чтобы ввести информацию в список.
              5. Сохраняем свойство powers в другой новой переменной под названием superPowers - где содержится массив, в котором перечислены сверхспособности текущего героя.
              6. Используем другой цикл for, чтобы прокрутить сверхспособности текущего героя , для каждого из них мы создаем элемент <li>, помещаем в него сверхспособности, а затем помещаем listItem внутри элемента <ul> (myList) с помощью appendChild().
                7. diff --git a/files/ru/learn/javascript/objects/object-oriented_js/index.html b/files/ru/learn/javascript/objects/object-oriented_js/index.html index 7df73c5045..e5f44c9fb4 100644 --- a/files/ru/learn/javascript/objects/object-oriented_js/index.html +++ b/files/ru/learn/javascript/objects/object-oriented_js/index.html @@ -24,7 +24,7 @@ original_slug: Learn/JavaScript/Объекты/Object-oriented_JS
            diff --git a/files/ru/learn/javascript/objects/object_building_practice/index.html b/files/ru/learn/javascript/objects/object_building_practice/index.html index 778e83578e..b24628ef50 100644 --- a/files/ru/learn/javascript/objects/object_building_practice/index.html +++ b/files/ru/learn/javascript/objects/object_building_practice/index.html @@ -219,7 +219,7 @@ testBall.draw()
            • Устанавливает цвет заливки на полупрозрачный черный, затем рисует прямоугольник цвета по всей ширине и высоте холста, используя fillRect() (четыре параметра обеспечивают начальную координату, а ширину и высоту для рисованного прямоугольника ). Это позволяет скрыть рисунок предыдущего кадра до того, как будет нарисован следующий. Если вы этого не сделаете, вы увидите, как длинные змеи пробираются вокруг холста, а не шары! Цвет заливки устанавливается на полупрозрачный, rgba(0,0,0,0,25), чтобы позволить нескольким кадрам слегка просвечивать, создавая маленькие тропы за шариками по мере их перемещения. Если вы изменили 0.25 на 1, вы больше не увидите их. Попробуйте изменить это число, чтобы увидеть эффект, который он имеет.
              • -
            • Создает новый экземпляр нашего Ball(), используя случайные значения, сгенерированные с помощью нашей функции random(), затем push() на конец нашего массива шаров, но только в том случае, когда количество шаров в массиве меньше 25. Итак когда у нас есть 25 мячей на экране, больше не появляется шаров. Вы можете попробовать изменить число в balls.length < 25, чтобы получить больше или меньше шаров на экране. В зависимости от того, сколько вычислительной мощности имеет ваш компьютер / браузер, если указать несколько тысячь шаров, это может довольно существенно повлиять на производительность анимации. 
              • +
            • Создает новый экземпляр нашего Ball(), используя случайные значения, сгенерированные с помощью нашей функции random(), затем push() на конец нашего массива шаров, но только в том случае, когда количество шаров в массиве меньше 25. Итак когда у нас есть 25 мячей на экране, больше не появляется шаров. Вы можете попробовать изменить число в balls.length < 25, чтобы получить больше или меньше шаров на экране. В зависимости от того, сколько вычислительной мощности имеет ваш компьютер / браузер, если указать несколько тысяч шаров, это может довольно существенно повлиять на производительность анимации. 
            • перебирает все шары в массиве balls и запускает каждую функцию draw() и update() для рисования каждого из них на экране, а затем выполняет необходимые обновления по положению и скорости во времени для следующего кадра.
            • Выполняет функцию снова с помощью метода requestAnimationFrame() - когда этот метод постоянно запускается и передается одно и то же имя функции, он будет запускать эту функцию определенное количество раз в секунду для создания плавной анимации. Обычно это делается рекурсивно - это означает, что функция вызывает себя каждый раз, когда она запускается, поэтому она будет работать снова и снова.
            diff --git a/files/ru/learn/javascript/objects/object_prototypes/index.html b/files/ru/learn/javascript/objects/object_prototypes/index.html index a8487bf0e6..e488f1bdbc 100644 --- a/files/ru/learn/javascript/objects/object_prototypes/index.html +++ b/files/ru/learn/javascript/objects/object_prototypes/index.html @@ -8,7 +8,7 @@ tags: - Начинающий - ООП - Обучение - - Обьект + - Объект - Статья - прототип translation_of: Learn/JavaScript/Objects/Object_prototypes @@ -57,7 +57,7 @@ original_slug: Learn/JavaScript/Объекты/Object_prototypes

            Вернемся к примеру, когда мы закончили писать наш конструктор Person()- загрузите пример в свой браузер. Если у вас еще нет работы от последней статьи, используйте наш пример oojs-class-further-exercises.html (см. Также исходный код).

            -

            В этом примере мы определили конструкторную функцию, например:

            +

            В этом примере мы определили конструктору функцию, например:

            function Person(first, last, age, gender, interests) {
 
-- 
cgit v1.2.3-54-g00ecf
            Необходимые знания: -

            Базовая компьютерная грамотность, базовое понимание HTML и CSS, знакомство с основами JavaScript (см. Первые шаги и Cтруктурные элементы JavaScript) и основы OOJS (см. Введение в объекты).

            +

            Базовая компьютерная грамотность, базовое понимание HTML и CSS, знакомство с основами JavaScript (см. Первые шаги и Cструктурные элементы JavaScript) и основы OOJS (см. Введение в объекты).